/*
Theme Name: BAYT
Theme URI: https://www.baytservices.fr/
Author: Fethi Ameur
Description: Theme sur mesure pour BAYT Services — entretien et remise en etat de residences privees. Reprend la maquette « Signature » validee par la cliente.
Version: 1.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: Tous droits reserves
Text Domain: bayt
*/

:root{
  --nuit:#1A1613;
  --nuit-clair:#241F1A;
  --taupe:#4C443C;
  --beige:#C8B9A6;
  --beige-pale:#E4DACC;
  --creme:#F6F2EC;
  --blanc:#FFFFFF;
  --texte-clair:#CFC5B8;
  --action:#C8B9A6;
  --large:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--texte-clair);
  font-family:'Montserrat',-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:300;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--large);margin:0 auto;padding:0 30px}
section{padding:120px 0}

/* Le lien d'evitement, pour la navigation au clavier */
.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:100;padding:14px 22px;
  background:var(--creme);color:#1A1613;text-decoration:none;font-size:13px;
}
.saut-contenu:focus{left:0}

/* ---------- Typographie ---------- */
.display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.12;margin:0}
/* Sur une page de rubrique, le titre de la rubrique devient le titre principal
   de la page : c'est le meme dessin, seule la balise change (h1 au lieu de h2).
   Les deux doivent donc etre habilles ensemble. */
h1.display,h2.display{font-size:clamp(32px,4.6vw,54px);color:var(--creme);letter-spacing:.01em}
.surtitre{
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--beige);font-weight:400;margin-bottom:24px;
}
.filet{width:52px;height:1px;background:rgba(200,185,166,.42);margin:28px 0}
.filet.centre{margin:28px auto}
.centre{text-align:center}
.chapeau{max-width:600px;color:#A9A093;margin-top:20px;font-size:15.5px}

/* Sections claires */
.clair{background:var(--creme);color:#4A423B}
.clair h1.display,.clair h2.display{color:#1A1613}
.clair .surtitre{color:#6E6255}
.clair .filet{background:rgba(26,22,19,.22)}
.clair .chapeau{color:#635B52}

/* ---------- Marque ---------- */
.marque{display:flex;align-items:center;gap:13px;text-decoration:none}
.marque svg{width:24px;height:24px;flex:none}
.marque-nom{font-size:18px;letter-spacing:.46em;text-transform:uppercase;font-weight:300;padding-left:3px;color:var(--creme)}
.clair .marque-nom{color:#1A1613}

/* ---------- En-tete ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;padding:26px 0;transition:background .4s,padding .4s}
header.site.pose{background:rgba(26,22,19,.93);backdrop-filter:blur(12px);padding:15px 0}
.barre{display:flex;align-items:center;justify-content:space-between;gap:20px}
nav.liens{display:flex;gap:34px}
nav.liens a{
  text-decoration:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-clair);padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .3s,color .3s
}
nav.liens a:hover,nav.liens a:focus{color:var(--blanc);border-color:var(--beige)}
/* La page en cours reste marquee : sur un site en plusieurs pages, le visiteur
   doit voir ou il se trouve sans avoir a lire l'adresse. */
nav.liens a.ici{color:var(--blanc);border-color:var(--beige)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--creme);margin:5px 0}

/* Le numero de telephone dans l'en-tete, quand il est renseigne */
.tel-entete{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:12px;letter-spacing:.14em;color:var(--creme);white-space:nowrap;
}
.tel-entete svg{width:14px;height:14px;flex:none}
.tel-entete:hover{color:var(--blanc)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 36px;background:var(--action);color:#1A1613;text-decoration:none;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--action);cursor:pointer;transition:background .3s,color .3s;font-family:inherit;
}
.btn:hover{background:var(--blanc);border-color:var(--blanc)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.creux{background:transparent;color:var(--creme);border-color:rgba(230,220,205,.4)}
.btn.creux:hover{background:transparent;border-color:var(--creme);color:var(--blanc)}
.clair .btn.creux{color:#1A1613;border-color:rgba(26,22,19,.3)}
.clair .btn.creux:hover{border-color:#1A1613;color:#1A1613}
.clair .btn{background:#1A1613;color:var(--creme);border-color:#1A1613}
.clair .btn:hover{background:var(--taupe);border-color:var(--taupe)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-fond{position:absolute;inset:0}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,22,19,.78),rgba(26,22,19,.7) 45%,rgba(26,22,19,.92))}
/* Sur petit ecran la photo passe derriere tout le texte : on assombrit davantage. */
@media (max-width:820px){
  .hero-voile{background:linear-gradient(180deg,rgba(26,22,19,.86),rgba(26,22,19,.8) 45%,rgba(26,22,19,.94))}
}
.hero-contenu{position:relative;z-index:2;padding:140px 30px 90px;max-width:820px}
.hero .mot{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(58px,11vw,132px);letter-spacing:.24em;line-height:1;
  color:var(--blanc);text-transform:uppercase;font-weight:300;padding-left:.24em;
}
.hero .sous{
  margin-top:26px;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--beige);
}
.hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(24px,3.4vw,40px);color:var(--creme);margin:40px auto 0;max-width:20ch;line-height:1.25;
}
.hero p.intro{margin:24px auto 0;max-width:52ch;color:#BFB5A7;font-size:15.5px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}
.rassurance{
  margin-top:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9C9285;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
}
.defiler{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8B8175}

/* ---------- Chiffres ---------- */
.chiffres{background:var(--nuit-clair);padding:0}
.chiffres .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.chiffres .wrap.n2{grid-template-columns:repeat(2,1fr)}
.chiffres .item{padding:52px 28px;text-align:center;border-right:1px solid rgba(200,185,166,.14)}
.chiffres .item:last-child{border-right:0}
.chiffres .cle{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;color:var(--creme);line-height:1}
.chiffres .quoi{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--beige);margin-top:12px}

/* ---------- Duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.photo-cadre{position:relative}
.photo-cadre img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo-cadre .bordure{position:absolute;inset:-16px -16px 16px 16px;border:1px solid rgba(200,185,166,.35);pointer-events:none}
.clair .photo-cadre .bordure{border-color:rgba(26,22,19,.2)}

/* La rubrique « Bayt signifie maison » porte un texte long (sept paragraphes).
   Avec la photo centree, il restait pres de 150 px de vide au-dessus et au-
   dessous d'elle. Ici, et ICI SEULEMENT, la photo occupe toute la hauteur de la
   colonne : mesure avant/apres, l'ecart passe de 296 px a 0. */
#bayt .duo{align-items:stretch}
#bayt .photo-cadre img{height:100%;aspect-ratio:auto}

/* ---------- Bandeau credit d'impot, sur l'accueil ---------- */
/* Fond legerement detache du noir, comme la bande de chiffres : l'argument doit
   se voir des le premier coup d'oeil sans casser l'harmonie de la page. */
.bandeau-impot{background:var(--nuit-clair);border-top:1px solid rgba(200,185,166,.14);border-bottom:1px solid rgba(200,185,166,.14)}
.bi-grille{display:grid;grid-template-columns:auto 1fr;gap:70px;align-items:center}
.bi-chiffre{text-align:center;padding-right:70px;border-right:1px solid rgba(200,185,166,.18)}
.bi-cle{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(64px,9vw,116px);line-height:.95;color:var(--creme);
}
.bi-quoi{margin-top:14px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--beige)}
.bi-texte h2.display{font-size:clamp(26px,3.2vw,38px)}
.bi-texte p{margin:0 0 12px;font-size:15px}
.bi-texte strong{color:var(--creme);font-weight:400}
.bi-exemple{font-size:16px}
/* #8C8073 tombait a 4,24 sur le fond du bandeau, sous le seuil de 4,5.
   Mesure : #9A8E7D donne 5,09. Une mention legale doit rester lisible, c'est
   precisement le texte qu'on ne doit pas pouvoir accuser d'avoir cache. */
.bi-note{margin-top:34px;font-size:11.5px;line-height:1.7;color:#9A8E7D;max-width:66ch}

/* ---------- Pages de rubrique ---------- */
/* L'en-tete du site est fixe et vient se poser par-dessus le haut de la page.
   Sur l'accueil, le bandeau plein ecran absorbe ce recouvrement ; sur une page
   de rubrique, il n'y a pas de bandeau, donc le titre passerait sous la barre.
   D'ou ce degagement, applique a la PREMIERE rubrique seulement. */
.page-rubrique > section:first-of-type{padding-top:170px}

/* ---------- Apercu des rubriques, sur l'accueil ---------- */
.cartes{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 48px;margin-top:64px}
.carte{display:flex;flex-direction:column}
.carte-photo{display:block;overflow:hidden}
.carte-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .7s ease}
.carte:hover .carte-photo img{transform:scale(1.04)}
.carte-texte{padding-top:24px}
.carte-texte h3{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:28px;
  line-height:1.15;margin:0;color:#1A1613;
}
.carte-texte p{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:#5E564C}
.carte-lien{
  display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#4C443C;text-decoration:none;
  border-bottom:1px solid rgba(26,22,19,.3);padding-bottom:5px;transition:border-color .3s,color .3s;
}
.carte-lien::after{content:' \2192'}
.carte-lien:hover,.carte-lien:focus{color:#1A1613;border-color:#1A1613}

/* ---------- Services : liste + photo ---------- */
.svc{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start;margin-top:64px}
.svc-liste{border-top:1px solid rgba(200,185,166,.2)}
.svc-item{
  border-bottom:1px solid rgba(200,185,166,.2);padding:26px 4px;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;transition:padding-left .35s ease;
}
.svc-item:hover,.svc-item.actif{padding-left:16px}
.svc-item .n{font-size:11px;letter-spacing:.2em;color:var(--beige);opacity:.65}
/* Le titre est un vrai bouton : utilisable au clavier et annonce aux lecteurs d'ecran. */
.svc-item h3{margin:0}
.svc-item .bascule{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:27px;
  color:var(--creme);line-height:1.2;transition:color .3s;
}
.svc-item.actif .bascule{color:var(--blanc)}
.svc-item .bascule:focus-visible{outline:1px solid var(--beige);outline-offset:6px}
.svc-item .detail{grid-column:2;margin-top:14px}
/* Le repli n'existe que si le JavaScript a repondu : sans lui, les
   prestations restent lisibles au lieu d'etre invisibles et non depliables. */
.js .svc-item .detail{
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .5s ease,opacity .4s ease,margin-top .4s ease;
}
.js .svc-item.actif .detail{max-height:340px;opacity:1;margin-top:14px}
.svc-item .detail p{margin:0 0 12px;font-size:14.5px;color:#A9A093;line-height:1.7}
.svc-item .detail ul{list-style:none;padding:0;margin:0;font-size:14px;color:#A9A093}
.svc-item .detail li{padding:5px 0 5px 18px;position:relative}
.svc-item .detail li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--beige)}
.svc-item .detail .mention{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--beige)}
/* Toutes les couleurs ci-dessus sont pensées pour le fond sombre. La rubrique
   Prestations, elle, est sur le crème : mesurée dans le navigateur sur la page
   en ligne, TOUTE la liste tombait sous le seuil. Les titres étaient à 1,00
   et 1,12, c'est-à-dire exactement la couleur du fond : ils ne s'affichaient
   pas du tout. Les numéros et la légende étaient à 1,72.
   La première correction n'avait repris que le texte des détails parce qu'elle
   s'appuyait sur une liste de paires écrite à la main ; c'est le relevé complet
   du navigateur qui a montré le reste. Ratios obtenus sur le crème #F6F2EC :
   titre 8,56 · titre ouvert 16,12 · numéro 5,32 · légende 5,32 · détail 6,47. */
.clair .svc-liste{border-top-color:rgba(26,22,19,.14)}
.clair .svc-item{border-bottom-color:rgba(26,22,19,.14)}
.clair .svc-item .n{color:#6E6255;opacity:1}
.clair .svc-item .bascule{color:var(--taupe)}
.clair .svc-item.actif .bascule,.clair .svc-item:hover .bascule{color:#1A1613}
.clair .svc-item .bascule:focus-visible{outline-color:var(--taupe)}
.clair .svc-item .detail p,.clair .svc-item .detail ul{color:#5E564C}
.clair .svc-item .detail .mention{color:#7A6A56}
.clair .svc-item .detail li::before{background:rgba(26,22,19,.45)}
.svc-visuel{position:sticky;top:120px}
.svc-visuel img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .45s ease}
.svc-visuel .legende{margin-top:16px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige)}
.clair .svc-visuel .legende{color:#6E6255}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:60px}
.galerie figure{margin:0;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.galerie figure:hover img{transform:scale(1.05)}
.g-a{grid-column:span 3;aspect-ratio:3/2}
.g-b{grid-column:span 3;aspect-ratio:3/2}
.g-c{grid-column:span 2;aspect-ratio:1/1}
.galerie figcaption{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8C8073;padding-top:12px}

/* ---------- Avant / après ---------- */
/* Le texte qui introduit la série de paires. Il était auparavant posé à côté
   d'un curseur unique ; maintenant que toutes les paires sont affichées à la
   suite, il passe au-dessus de la grille, en colonne étroite pour rester
   lisible (une ligne de texte trop longue se lit mal). */
.ap-intro{margin-top:64px;max-width:640px}
.ap-intro h3{font-size:clamp(26px,3vw,32px);color:var(--creme)}
.ap-intro p{font-size:15px;margin:0 0 14px}
.ap{
  position:relative;overflow:hidden;background:#0F0D0B;
  /* Carré, et non au format des photos (4/5) : celles-ci sont centrées sur
     l'interrupteur, donc rien d'utile n'est perdu, et le bloc cesse d'être
     bien plus haut que le texte posé à côté. */
  aspect-ratio:1/1;--ap:50%;
  border:1px solid rgba(200,185,166,.22);
}
.ap-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* On DÉCOUPE l'image du dessus au lieu de la redimensionner : elle garde donc
   ses proportions quelle que soit la position de la poignée. Une largeur
   variable, elle, écraserait la photo. */
.ap-avant{clip-path:inset(0 calc(100% - var(--ap)) 0 0)}
.ap-ligne{
  position:absolute;top:0;bottom:0;left:var(--ap);width:1px;
  background:rgba(246,242,236,.85);transform:translateX(-.5px);pointer-events:none;
}
.ap-ligne::after{
  content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border:1px solid rgba(246,242,236,.9);border-radius:50%;
  background:rgba(26,22,19,.4);
}
.ap-fleches{
  position:absolute;top:50%;left:var(--ap);transform:translate(-50%,-50%);
  pointer-events:none;font-size:11px;letter-spacing:.1em;color:#F6F2EC;
}
.ap-etiq{
  position:absolute;top:18px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:7px 14px;background:rgba(26,22,19,.72);color:#F6F2EC;pointer-events:none;
}
.ap-etiq.a{left:18px}
.ap-etiq.b{right:18px}
/* La poignée est un vrai champ de type « range » : elle fonctionne donc à la
   souris, au doigt ET au clavier, sans code supplémentaire. */
.ap-curseur{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  background:transparent;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
}
.ap-curseur:focus-visible{opacity:1;outline:2px solid var(--beige);outline-offset:-4px}
.ap-legende{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--beige);margin-top:18px}
.ap-figure{margin:0}
.ap-titre{
  margin-top:18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme);
}
.ap-lieu{display:block;margin-top:7px;font-size:11px;letter-spacing:.12em;color:var(--beige);text-transform:none}

/* Avant et après côte à côte, quand le curseur n'est pas possible. */
.duo-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo-vue{position:relative;overflow:hidden;background:#0F0D0B;aspect-ratio:3/4;border:1px solid rgba(200,185,166,.22)}
.duo-vue img{width:100%;height:100%;object-fit:cover;display:block}
/* Les étiquettes sont plus petites ici : les deux vignettes sont étroites. */
.duo-vue .ap-etiq{top:12px;left:12px;right:auto;font-size:9px;padding:5px 10px}

/* La grille de curseurs. Elle sert à DEUX endroits : la rubrique « Signatures
   BAYT » de la page d'accueil et la page à modèle « Avant / Après ». Le
   préfixe « .page-ap » a donc été retiré — sans quoi la grille ne s'appliquait
   qu'à la page et les paires se seraient empilées sur l'accueil. */
.ap-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 40px;margin-top:70px}
/* Une paire montrée côte à côte contient deux photos : elle prend deux places. */
.ap-cellule-large{grid-column:span 2}
.ap-texte{font-size:14.5px;color:#A9A093;line-height:1.75;margin:14px 0 0}
/* Celui-ci reste propre à la page : l'accueil a déjà son appel au devis. */
.page-ap .ap-appel{
  text-align:center;margin-top:100px;padding-top:70px;
  border-top:1px solid rgba(200,185,166,.18);
}
@media (max-width:1000px){
  .ap-galerie{grid-template-columns:repeat(2,1fr);gap:44px 30px}
  .ap-cellule-large{grid-column:span 2}
}
@media (max-width:680px){
  .ap-galerie{grid-template-columns:1fr;gap:52px}
  .ap-cellule-large{grid-column:span 1}
  .ap-galerie .ap{max-width:420px;margin:0 auto}
}

/* ---------- Valeurs ---------- */
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 48px;margin-top:66px}
.valeur .n{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;color:var(--beige);line-height:1;margin-bottom:16px}
.valeur h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme);margin:0 0 14px;font-weight:400}
.clair .valeur h3{color:#1A1613}
.valeur p{margin:0;font-size:14.5px;color:#A9A093;line-height:1.75}
.clair .valeur p{color:#635B52}

/* ---------- Credit d'impot ---------- */
.impot-carte{background:var(--nuit-clair);border:1px solid rgba(200,185,166,.22);padding:42px 38px}
.ligne{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(200,185,166,.16);font-size:14.5px}
.ligne:last-of-type{border-bottom:0}
.ligne .val{white-space:nowrap;color:var(--creme)}
.ligne.total{border-top:1px solid rgba(200,185,166,.35);border-bottom:0;margin-top:10px;padding-top:20px}
.ligne.total .val{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:var(--blanc)}
.note{font-size:11.5px;color:#A39A8D;line-height:1.7;margin-top:24px}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px}
.etape .n{font-size:10.5px;letter-spacing:.26em;color:var(--beige);margin-bottom:12px}
.etape p{margin:0;font-size:14.5px;color:#A9A093}

/* ---------- Formulaire ---------- */
.form-bloc{margin-top:60px}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:28px 30px}
.champ{display:flex;flex-direction:column}
.champ.plein{grid-column:1/-1}
/* Le formulaire vit sur le fond creme : ces couleurs sont calculees pour lui. */
.champ label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#635B52;margin-bottom:10px}
.champ .requis{color:#8A4B3A}
input,select,textarea{
  font-family:inherit;font-size:15px;font-weight:300;color:#1A1613;
  background:transparent;border:0;border-bottom:1px solid rgba(26,22,19,.24);
  padding:12px 2px;border-radius:0;transition:border-color .25s;
}
input::placeholder,textarea::placeholder{color:#736A5F}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:#1A1613}
input[aria-invalid="true"]{border-bottom-color:#8A4B3A;border-bottom-width:2px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8C8073 50%),linear-gradient(135deg,#8C8073 50%,transparent 50%);background-position:calc(100% - 12px) 21px,calc(100% - 7px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:96px}
.pieds-form{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:44px}
.pieds-form .petit{font-size:12px;color:#635B52;max-width:40ch;line-height:1.65;margin:0}
.erreur-form{width:100%;margin:0;color:#8A4B3A;font-size:13px;letter-spacing:.04em}
/* Le pot de miel : invisible a l'oeil, rempli seulement par les robots. */
.pot-miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.confirmation{text-align:center;margin-top:60px}
.confirmation .coche{width:56px;height:56px;border:1px solid rgba(26,22,19,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 28px}
.recap{text-align:left;max-width:540px;margin:34px auto 0;border-top:1px solid rgba(26,22,19,.2)}
.recap div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(26,22,19,.14);font-size:14px}
.recap div span:first-child{color:#635B52;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.recap div span:last-child{text-align:right;color:#3A342E}

/* ---------- Pied de page ---------- */
footer.site{background:#120F0D;padding:86px 0 34px;font-size:14px;color:#8C8377}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:52px}
footer.site h2{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--beige);margin:0 0 22px;font-weight:400;font-family:inherit}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{padding:6px 0}
footer.site a{text-decoration:none;transition:color .25s}
footer.site a:hover{color:var(--creme)}
.pied-bas{margin-top:64px;padding-top:28px;border-top:1px solid rgba(200,185,166,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:11.5px;color:#8C8377}

/* Rappel visible UNIQUEMENT par l'administrateur connecte : jamais par un visiteur. */
.rappel-admin{
  color:#C9A227;border:1px dashed rgba(201,162,39,.5);padding:4px 10px;
  display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:none;
}

/* ---------- Pages interieures (CGV, confidentialite) ---------- */
.page-interieure{padding:190px 0 120px}
.page-interieure .contenu{max-width:760px}
.page-interieure h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(34px,5vw,54px);color:var(--creme);margin:0 0 8px;line-height:1.12}
.page-interieure .contenu h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:28px;color:var(--creme);margin:52px 0 14px}
.page-interieure .contenu h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--beige);margin:36px 0 12px;font-weight:400}
.page-interieure .contenu p,.page-interieure .contenu li{font-size:15px;color:#A9A093;line-height:1.85}
.page-interieure .contenu a{color:var(--beige)}
.page-interieure .contenu ul,.page-interieure .contenu ol{padding-left:20px}
.page-interieure .contenu li{padding:4px 0}
.page-interieure .contenu table{width:100%;border-collapse:collapse;margin:24px 0}
.page-interieure .contenu td,.page-interieure .contenu th{border-bottom:1px solid rgba(200,185,166,.18);padding:12px 8px;text-align:left;font-size:14.5px}
.retour{display:inline-block;margin-top:56px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);text-decoration:none}
.retour:hover{color:var(--creme)}
/* Blocs WordPress inseres dans une page interieure */
.page-interieure .contenu img{margin:24px 0}
.page-interieure .contenu blockquote{border-left:1px solid rgba(200,185,166,.35);margin:24px 0;padding-left:24px;font-style:italic}

/* ---------- Apparition ---------- */
.js .revele{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
.js .revele.vu{opacity:1;transform:none}
/* Le PC de Fethi tourne sans animations : on neutralise le decalage, pas l'affichage. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revele{opacity:1;transform:none;transition:none}
  .galerie img,.svc-item,.svc-visuel img{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .tel-entete{display:none}
}
@media (max-width:1000px){
  .svc{grid-template-columns:1fr;gap:44px}
  .svc-visuel{position:static;order:-1}
  .svc-visuel img{aspect-ratio:16/10}
  .valeurs{grid-template-columns:1fr 1fr}
  /* La galerie ne compte plus que TROIS photos, toutes en « g-c ». Les faire
     passer à une demi-largeur ici laissait deux photos sur la première rangée
     et la troisième toute seule. Elles restent donc à un tiers, simplement
     plus petites. Si la galerie repasse à quatre photos ou plus, c'est cette
     règle qu'il faut revoir en premier. */
}
@media (max-width:820px){
  section{padding:80px 0}
  nav.liens{
    display:none;position:absolute;top:100%;left:0;right:0;background:rgba(26,22,19,.98);
    flex-direction:column;gap:0;padding:10px 30px 24px
  }
  nav.liens.ouvert{display:flex}
  nav.liens a{padding:15px 0;border-bottom:1px solid rgba(200,185,166,.14)}
  .burger{display:block}
  header.site{background:rgba(26,22,19,.94);padding:14px 0}
  .duo{grid-template-columns:1fr;gap:48px}
  .cartes{grid-template-columns:1fr;gap:44px}
  .page-rubrique > section:first-of-type{padding-top:140px}
  /* Le grand « 50 % » passe au-dessus du texte : cote a cote, il ne resterait
     plus assez de largeur pour lire la phrase. */
  .bi-grille{grid-template-columns:1fr;gap:36px}
  .bi-chiffre{text-align:left;padding-right:0;border-right:0;padding-bottom:30px;border-bottom:1px solid rgba(200,185,166,.18)}
  .photo-cadre .bordure{display:none}
  /* La classe n2 est plus specifique : elle doit etre citee ici aussi,
     sinon deux chiffres resteraient cote a cote sur telephone. */
  .chiffres .wrap,.chiffres .wrap.n2{grid-template-columns:1fr}
  .chiffres .item{border-right:0;border-bottom:1px solid rgba(200,185,166,.14);padding:34px 20px}
  .etapes{grid-template-columns:1fr;gap:28px}
  .pied-grille{grid-template-columns:1fr;gap:40px}
  /* Trois colonnes plutôt que deux, pour la même raison : trois photos dans
     une grille de deux laissent un trou sur la seconde rangée. */
  .galerie{grid-template-columns:repeat(3,1fr);gap:12px}
  .g-a,.g-b,.g-c{grid-column:span 1;aspect-ratio:1/1}
  .page-interieure{padding:140px 0 80px}
}
@media (max-width:560px){
  .valeurs{grid-template-columns:1fr}
  .grille{grid-template-columns:1fr}
  .hero .mot{letter-spacing:.16em;padding-left:.16em}
  .wrap{padding:0 22px}
  .galerie{grid-template-columns:1fr}
}