/*
Theme Name:  Sauvage
Theme URI:   https://www.menuiseriesauvage.fr/
Description: Habillage de menuiseriesauvage.fr — reprend l'identite du site d'origine (theme fortis7, 2014) : mise en page « boxed » sur fond anthracite, en-tete a logo centre, bandeau photo anime et pied de page clair. Theme enfant de Twenty Twenty-Five : le socle reste a jour, seule l'apparence est retablie.
Author:      reconstruction 2026
Template:    twentytwentyfive
Version:     1.0.0
Text Domain: sauvage
*/

/* ==========================================================================
   Valeurs reprises du site d'origine.
   Elles proviennent du CSS que le panneau du theme fortis7 generait, retrouve
   dans les captures Wayback : les reglages eux-memes vivaient en base et ont
   ete perdus, mais leur resultat, lui, etait dans le HTML archive.
   ========================================================================== */
:root {
  --sv-fond:        #282a2f;  /* fond du bloc central */
  --sv-page:        #d6d6d6;  /* fond de page, autour du bloc */
  --sv-texte:       #a7aab2;  /* texte courant */
  --sv-accent:      #8d9096;  /* filets, entree de menu active */
  --sv-bordure:     #3a3c42;  /* separations internes */
  --sv-sous-menu:   #1a1b1e;  /* fond des sous-menus */
  --sv-rouge:       #e40514;  /* unique couleur de la marque */
  --sv-pied:        #f7f7f8;  /* pied de page, clair */
  --sv-pied-titre:  #666;
  --sv-pied-texte:  #999;
  --sv-pied-filet:  #e5eaec;
  --sv-largeur:     1200px;   /* bloc « boxed » */
  --sv-conteneur:   1170px;   /* colonne de contenu */

  /* Roboto n'est pas embarquee : l'original l'appelait chez Google, ce qu'on ne
     retablit pas (requete vers un tiers a chaque visite). La pile ci-dessous
     rend Roboto quand elle est installee, et une sans-serif proche sinon. */
  --sv-police-texte: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sv-police-titre: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   1. Mise en page « boxed »
   Le site d'origine n'occupait pas toute la largeur : un bloc de 1200 px
   centre, pose sur un fond gris clair. C'est ce qui frappe en premier.
   ========================================================================== */
html {
  background: var(--sv-page);
}

body {
  max-width: var(--sv-largeur);
  margin: 0 auto;
  background: var(--sv-fond);
  color: var(--sv-texte);
  font-family: var(--sv-police-texte);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--sv-police-titre);
  font-weight: 300;
  color: #fff;
  line-height: 1.3;
}

h1, .wp-block-heading.wp-block-post-title { font-size: 28px; }
h2 { font-size: 16px; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }

a { color: var(--sv-accent); }
a:hover { color: #fff; }

/* Le contenu des pages garde la largeur de colonne d'origine. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* ==========================================================================
   2. En-tete — trois bandes empilees, toutes anthracite
   ========================================================================== */
.sv-entete { background: var(--sv-fond); }

/* 2a. bandeau de coordonnees */
.sv-contact {
  border-top: 2px solid var(--sv-accent);
  border-bottom: 1px solid var(--sv-bordure);
  background: var(--sv-fond);
  color: var(--sv-texte);
  font-size: 12px;
  line-height: 45px;
}
.sv-contact p {
  margin: 0;
  text-align: right;
  font-size: 12px;
}
.sv-contact a { color: var(--sv-texte); text-decoration: none; }
.sv-contact a:hover { color: #fff; }

/* 2b. bande du logo — centre, particularite du « header_7 » d'origine */
.sv-logo {
  border-bottom: 1px solid var(--sv-bordure);
  padding: 21px 0 32px;
  text-align: center;
}
.sv-logo .wp-block-site-logo { display: inline-block; }
.sv-logo .wp-block-site-logo img {
  width: 200px;
  height: auto;
  display: block;
}

/* 2c. bande du menu — aligne a gauche, en majuscules */
.sv-menu { border-bottom: 1px solid var(--sv-bordure); }

.sv-menu .wp-block-navigation {
  font-family: var(--sv-police-titre);
  font-size: 14px;
  font-weight: 300;
}
/* Le menu est CENTRE, et chaque entree est separee par un filet vertical.
   C'est l'un des points ou la reconstruction s'ecartait de l'original. */
.sv-menu .wp-block-navigation__container {
  gap: 0;
  justify-content: center;
}
.sv-menu .wp-block-navigation .wp-block-navigation-item {
  border-left: 1px solid var(--sv-bordure);
}
.sv-menu .wp-block-navigation .wp-block-navigation-item:last-child {
  border-right: 1px solid var(--sv-bordure);
}
.sv-menu .wp-block-navigation .wp-block-navigation-item > a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 18px;
  display: block;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.sv-menu .wp-block-navigation .wp-block-navigation-item > a:hover {
  border-top-color: #444;
  border-bottom-color: #444;
}
.sv-menu .wp-block-navigation .current-menu-item > a,
.sv-menu .wp-block-navigation .current-menu-ancestor > a {
  color: var(--sv-accent);
  border-top-color: var(--sv-accent);
  border-bottom-color: var(--sv-accent);
}

/* sous-menu deroulant : fond plus noir, liseré argent */
.sv-menu .wp-block-navigation__submenu-container {
  background: var(--sv-sous-menu) !important;
  border: 0 !important;
  border-top: 1px solid var(--sv-accent) !important;
  min-width: 240px;
  padding: 0;
}
.sv-menu .wp-block-navigation__submenu-container li > a {
  color: #888 !important;
  text-transform: none;
  padding: 10px 18px;
  border-bottom: 1px solid var(--sv-bordure);
}
.sv-menu .wp-block-navigation__submenu-container li:last-child > a { border-bottom: 0; }
.sv-menu .wp-block-navigation__submenu-container li > a:hover { color: #fff !important; }

/* barre de menu collante au defilement, comme sur l'original */
.sv-menu.sv-collee {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  max-width: var(--sv-largeur);
  margin: 0 auto;
  background: rgba(40, 42, 47, .95);
  border-bottom: 1px solid var(--sv-bordure);
}

/* ==========================================================================
   3. Bandeau d'accueil — la galerie des 3 photos devient un diaporama
   Le site d'origine utilisait Revolution Slider (1170x370, rotation 9 s).
   L'extension est morte ; le comportement est refait en quelques lignes,
   sans dependance.
   ========================================================================== */
/* Le bloc galerie de WordPress est un conteneur flex dont les regles sont
   specifiques ; on les neutralise franchement, sinon les photos gardent leur
   largeur naturelle au lieu de remplir le bandeau. */
/* Le bandeau deborde la colonne de contenu pour occuper toute la largeur du
   bloc, et son fond rouge apparait de part et d'autre de la photo — c'est la
   seule respiration coloree de la page d'accueil. */
.wp-block-gallery.sv-bandeau {
  position: relative;
  display: block;
  /* Deborde la colonne de contenu pour couvrir toute la largeur du bloc.
     Les « !important » sont necessaires : la mise en page contrainte de
     WordPress recentre sinon l'element avec margin:auto !important. */
  width: auto !important;
  max-width: none !important;
  margin-left: calc(-1 * (var(--sv-largeur) - var(--sv-conteneur)) / 2) !important;
  margin-right: calc(-1 * (var(--sv-largeur) - var(--sv-conteneur)) / 2) !important;
  height: 370px;
  overflow: hidden;
  background: var(--sv-rouge);
  margin-bottom: 0;
  gap: 0;
}

/* Les photos ne se fondent PAS l'une dans l'autre : la nouvelle glisse par la
   droite en recouvrant la precedente, restee opaque dessous. Un fondu croise
   laisserait voir le fond sombre a travers les deux et produirait un
   clignotement toutes les 9 secondes. C'est aussi la transition d'origine
   (« slideleft »). */
/* La photo ne couvre pas toute la largeur : elle est centree, et laisse voir
   le fond rouge sur environ 50 px de chaque cote. */
.wp-block-gallery.sv-bandeau figure.wp-block-image {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: 91.5% !important;
  height: 100% !important;
  max-width: none !important;
  flex: none !important;
  display: block !important;
  opacity: 1;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
}
.wp-block-gallery.sv-bandeau figure.wp-block-image.sv-sortante {
  visibility: visible;
  z-index: 2;
}
.wp-block-gallery.sv-bandeau figure.wp-block-image.sv-active {
  visibility: visible;
  z-index: 3;
  pointer-events: auto;
  animation: sv-glisse .8s ease both;
}
/* Au tout premier affichage, la photo est deja en place : pas d'animation. */
.wp-block-gallery.sv-bandeau figure.wp-block-image.sv-active.sv-sans-anim {
  animation: none;
}
/* La photo etant centree par translateX(-50%), l'entree se compose avec elle. */
@keyframes sv-glisse {
  from { transform: translateX(-50%) translateX(100%); }
  to   { transform: translateX(-50%); }
}
.wp-block-gallery.sv-bandeau figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.wp-block-gallery.sv-bandeau figcaption { display: none !important; }

/* Les deux calques de marque, qui entraient en glissant sur l'original :
   la pyramide 3D rouge et le logotype « SARL SAUVAGE ». Seul endroit du site
   ou le rouge apparait. */
.wp-block-gallery.sv-bandeau::after,
.wp-block-gallery.sv-bandeau::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
/* Pyramide : CENTREE dans le bandeau, pleine hauteur. */
.wp-block-gallery.sv-bandeau::after {
  left: 50%;
  top: 0;
  width: 28%;
  height: 100%;
  background-image: url("/wp-content/uploads/2014/04/SAUVAGE-sarl-logo-slide.png");
  background-position: center center;
  background-size: contain;
  transform: translateX(-50%);
  animation: sv-entree-centre .9s .5s both;
}
/* Logotype « SARL SAUVAGE » : en haut a GAUCHE, au bord de la photo. */
.wp-block-gallery.sv-bandeau::before {
  left: 4.25%;
  top: 7%;
  width: 28%;
  height: 30%;
  background-image: url("/wp-content/uploads/2014/04/SAUVAGE-sarl-typo-slide.png");
  background-position: top left;
  background-size: contain;
  animation: sv-entree .9s .8s both;
  z-index: 4;
}
@keyframes sv-entree {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sv-entree-centre {
  from { opacity: 0; transform: translateX(-50%) translateX(60px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* fleches de navigation, discretes comme sur l'original */
.sv-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s;
}
.sv-bandeau:hover .sv-fleche { opacity: 1; }
.sv-fleche.sv-prec { left: 14px; }
.sv-fleche.sv-suiv { right: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sv-bandeau figure.wp-block-image,
  .sv-bandeau::before,
  .sv-bandeau::after { transition: none; animation: none; }
}

/* ==========================================================================
   4. Corps de page
   ========================================================================== */
.wp-block-post-content p { color: var(--sv-texte); }

/* Page d'accueil : le bandeau vient coller sous le menu, comme a l'origine,
   sans le grand blanc que le gabarit laisse d'ordinaire au-dessus du titre. */
.sv-accueil { padding-top: 0 !important; margin-top: 0 !important; }
.sv-accueil > .wp-block-post-content > *:first-child { margin-top: 0; }

/* Le contenu de l'accueil est decale vers la droite : le gabarit d'origine
   reservait une colonne de gauche (un quart de la largeur) qui est restee
   VIDE, faute de widget. C'est fidele, mais c'est aussi un defaut de
   l'original — le supprimer ne demande que de retirer cette regle. */
/* Le « !important » n'est pas de confort : la mise en page contrainte de
   WordPress pose elle-meme margin-left:auto !important sur chaque enfant, et
   recentrerait tout. */
.sv-accueil > .wp-block-post-content > *:not(.sv-bandeau) {
  margin-left: 27% !important;
  margin-right: 0 !important;
  max-width: 73% !important;
}

/* Titre « SARL SAUVAGE », remis juste sous le bandeau */
.sv-titre-accueil {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin: 40px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sv-bordure);
}

/* « Voir nos realisations » etait un TITRE sur l'original, pas un bouton :
   on lui rend son allure, tout en gardant le lien vers les realisations. */
.sv-accueil .wp-block-buttons {
  border-top: 1px solid var(--sv-bordure);
  margin-top: 38px;
  padding-top: 34px;
}
.sv-accueil .wp-block-button__link {
  background: transparent !important;
  color: #fff !important;
  font-family: var(--sv-police-titre);
  font-size: 28px;
  font-weight: 300;
  padding: 0;
  border-radius: 0;
}
.sv-accueil .wp-block-button__link:hover {
  color: var(--sv-accent) !important;
  background: transparent !important;
}

/* Twenty Twenty-Five aere beaucoup ses gabarits : sans cela, un vide d'environ
   160 px separe le menu du titre sur toutes les pages interieures, ce que le
   site d'origine n'avait pas. */
.wp-site-blocks > main.wp-block-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
main > .wp-block-post-content > *:first-child { margin-top: 0; }

/* ---- Bandeau de titre des pages interieures ----
   L'original coiffait chaque page d'une bande legerement plus claire portant
   le titre a gauche et le fil d'Ariane a droite. */
.sv-bandeau-page {
  background: #303238;
  border-bottom: 1px solid var(--sv-bordure);
  width: auto !important;
  max-width: none !important;
  margin-left: calc(-1 * (var(--sv-largeur) - var(--sv-conteneur)) / 2) !important;
  margin-right: calc(-1 * (var(--sv-largeur) - var(--sv-conteneur)) / 2) !important;
  margin-bottom: 46px;
  padding: 26px 0;
}
.sv-bandeau-page-inner {
  max-width: var(--sv-conteneur);
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sv-bandeau-page .wp-block-post-title {
  margin: 0 !important;
  font-size: 20px;
  font-weight: 300;
  color: var(--sv-texte);
}
.sv-fil {
  font-size: 13px;
  color: var(--sv-accent);
  margin: 0;
}
.sv-fil a { color: var(--sv-texte); text-decoration: none; }
.sv-fil a:hover { color: #fff; }
.sv-fil .sv-sep { color: #5b5e66; padding: 0 8px; }
.sv-fil .sv-courant { color: #6f727a; }

/* separateur d'origine : une ombre douce degradee entre deux blocs */
.sv-separateur {
  height: 5px;
  margin: 34px auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 72%);
}

/* Les 4 vignettes de realisations de l'accueil */
.sv-vignettes .wp-block-column { text-align: left; }
.sv-vignettes .wp-block-image { margin-bottom: 14px; }
.sv-vignettes .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}
.sv-vignettes h2,
.sv-vignettes h3 {
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 8px;
}
.sv-vignettes h2 a,
.sv-vignettes h3 a { color: #fff; text-decoration: none; }
.sv-vignettes h2 a:hover,
.sv-vignettes h3 a:hover { color: var(--sv-accent); }
.sv-vignettes p { font-size: 13px; color: var(--sv-texte); }

/* galeries des pages de realisations */
.wp-block-gallery:not(.sv-bandeau) figure.wp-block-image { margin: 0; }

/* boutons */
.wp-block-button__link {
  background: var(--sv-accent);
  color: #fff;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 300;
}
.wp-block-button__link:hover { background: #fff; color: var(--sv-fond); }

/* formulaire de contact */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  background: #22242a;
  border: 1px solid var(--sv-bordure);
  color: var(--sv-texte);
  padding: 9px 11px;
  font-family: var(--sv-police-texte);
  font-size: 14px;
}
.wpcf7 input[type="submit"] {
  background: var(--sv-accent);
  border: 0;
  color: #fff;
  padding: 10px 22px;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: #fff; color: var(--sv-fond); }

/* ==========================================================================
   5. Pied de page — clair, en rupture nette avec le corps sombre
   ========================================================================== */
.sv-pied {
  background: var(--sv-pied);
  color: var(--sv-pied-texte);
  padding: 52px 0 0;
}
.sv-pied h2,
.sv-pied h3 {
  color: var(--sv-pied-titre);
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 18px;
  text-transform: none;
}
.sv-pied p,
.sv-pied li { color: var(--sv-pied-texte); font-size: 13px; }
.sv-pied a { color: var(--sv-pied-texte); }
.sv-pied a:hover { color: var(--sv-pied-titre); }
.sv-pied strong { color: var(--sv-pied-titre); font-weight: 400; }

/* filigrane de carte derriere la colonne « Nous contacter », comme a l'origine */
.sv-pied .sv-colonne-contact {
  background: url("assets/map-light.png") no-repeat center center;
}

.sv-pied ul { list-style: none; padding-left: 0; }
.sv-pied ul li { padding: 3px 0; }
.sv-pied ul li::before { content: "– "; color: #c3c6cc; }

.sv-pied-bas {
  border-top: 1px solid var(--sv-pied-filet);
  margin-top: 40px;
  padding: 18px 0;
  font-size: 13px;
  color: var(--sv-pied-texte);
}
.sv-pied-bas p { margin: 0; font-size: 13px; }

/* ==========================================================================
   6. Retour en haut
   ========================================================================== */
.sv-haut {
  position: fixed;
  right: 100px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 6px;
  background: rgba(34, 34, 34, .6);
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 998;
}
.sv-haut.sv-visible { opacity: 1; visibility: visible; }
.sv-haut:hover { background: rgba(34, 34, 34, .85); }

/* ==========================================================================
   7. Ecrans etroits
   ========================================================================== */
@media (max-width: 1240px) {
  body { max-width: 100%; box-shadow: none; }
}

@media (max-width: 900px) {
  .sv-contact p { text-align: center; line-height: 1.6; padding: 8px 0; }
  .sv-contact { line-height: normal; }
  .sv-bandeau::before,
  .sv-bandeau::after { display: none; }
  .sv-haut { right: 20px; bottom: 20px; }
  .sv-pied { padding-top: 34px; }
  .sv-pied .sv-colonne-contact { background-image: none; }
}