/* ============================================================
   BATIMM RENOV — Accueil : sections choisies en navy DA
   (À propos, Plâtrier peintre Louhans, Zones, Footer)
   Le reste de l'accueil garde ses fonds clairs.
   ============================================================ */

/* ══ SURFACES DE SECTION ═══════════════════════════════════════════════════
   Le fond des sections de l'accueil se decide ICI, et nulle part ailleurs.

   Ce qui est corrige : chaque section portait son propre degrade et sa propre
   nuance de navy — huit au total, dont une seule venait de la charte. Tous ces
   degrades finissaient sombres et repartaient plus clairs a la section
   suivante, donc il y avait une marche a chaque jonction. Une cassure a chaque
   scroll, sans qu'aucune ne signale quoi que ce soit.

   Trois surfaces, en aplat :

     Principale  #1A2640  navy de la charte
                 services, temoignages, a propos, contact, FAQ, zones,
                 bande CTA d'avant-footer
     Profonde    #141d33  le socle : ce qui porte et ce qui conclut
                 fond de page, plaque chiffres, blocs SEO de bas, footer
     Claire      #EAE2D7  creme de la charte
                 realisations

   Attention : la regle vise aussi des blocs qui ne sont PAS des <section>
   (.sb, .nft-cta-band, body). Un fond qui n'est pas rattache a une surface
   ressort tot ou tard comme une bande parasite — c'est arrive a .nft-cta-band,
   qui gardait son propre degrade entre deux blocs de surface Profonde.

   La rupture voulue, c'est le passage navy -> creme -> navy sur les
   realisations : la preuve du travail, et les photos se detachent mieux sur
   clair. La FAQ, elle, est deja une rupture : c'est un bandeau photo. Sa
   couleur de section n'est donc que le repli si l'image ne charge pas — et ce
   repli etait clair sous un texte creme, donc illisible. En navy il est sur.
   Ailleurs, la separation vient des titres et de l'espacement, pas du fond.

   Les halos or ont ete retires. A 10-12% ils passaient inapercus un par un,
   mais chacun etait pose a un endroit different de sa section : c'est leur
   cumul qui donnait a chaque rubrique une teinte legerement differente.
   ══════════════════════════════════════════════════════════════════════════ */
.sv,
.testi,
.ap-section,
.ct,
.faq-section,
.zi-section,
.nft-cta-band{ background:#1A2640 !important; }

body,
.sb,
.sl-section,
.seo-local,
footer.nft{ background:#141d33 !important; }

.reals{ background:#EAE2D7 !important; }

/* Ces sections empilent des elements en absolu (vagues, filets, decors). */
.ap-section,
.sl-section,
.zi-section,
.seo-local,
footer.nft{ position:relative; }

/* Boutons sur une seule ligne (Montserrat plus large) */
.btn-p,.btn-s,.btn-noir{white-space:nowrap;}

/* ===== Sections CLAIRES : titres en navy charte (identite DA, fond garde clair) ===== */
.prest-h2,.tr-title,.reals .sec-title,.gc-title,.ct3-title{color:#1A2640 !important;}
/* mots accent / contours gardent l'or (fonds sombres : or clair de charte) */
.sec-title .gold,[class*="title"] .or{color:#BD9361 !important;}
/* Sur fond clair l'or de charte tombe a 2.2-2.4:1 (seuil 3:1 grand texte).
   Or assombri #96703D : 3.85:1 sur #f2ede4, 3.58:1 sur #ece5d9.
   Regle placee APRES la precedente : specificite egale, celle-ci gagne. */
.prest-h2 .or,.tr-title .or,.gc-title .or{color:#96703D !important;}
/* FAQ : section a FOND SOMBRE (calque photo .faq-br-bg), pas une section claire.
   Elle etait rangee avec les sections claires et recevait #1A2640 : le titre
   tombait a 1,2:1, navy sur navy. Texte creme + or clair, comme le reste du bloc. */
.faq-section .faq-br-title,.faq-br .faq-br-title,section.faq-section .sec-title{color:#F2EDE3 !important;}
.faq-section .faq-br-title span,.faq-br .faq-br-title span{color:#BD9361 !important;}

/* ===== Titres "plein + contour" des sections claires : navy charte visible ===== */
section.reals .sec-title,section.tr-section .tr-title,section.gc-section .gc-title{color:#1A2640 !important;}
/* contours (outline) en navy plein (fini le gris pale) */
section.reals .sec-title .ol{-webkit-text-stroke:1.6px #1A2640 !important;color:transparent !important;}
.tr-title .tr-title-outline{-webkit-text-stroke:2px #1A2640 !important;color:transparent !important;}
.gc-title .gc-title-outline{-webkit-text-stroke:1.6px #1A2640 !important;color:transparent !important;}

/* VARIANTE deux tons : contour des titres en OR (navy plein + or contour) */
section.reals .sec-title .ol{-webkit-text-stroke-color:#96703D !important;}
.tr-title .tr-title-outline{-webkit-text-stroke-color:#96703D !important;}
.gc-title .gc-title-outline{-webkit-text-stroke-color:#96703D !important;}

/* ===== Titres sections claires : 1er mot navy PLEIN + 2e mot or/beige PLEIN (rempli) ===== */
section.reals .sec-title .ol,
.tr-title .tr-title-outline,
.gc-title .gc-title-outline{
  -webkit-text-stroke:0 !important;
  color:#96703D !important;
}
/* FAQ exclue : #96703D est l'or assombri des FONDS CLAIRS. Sur le fond
   sombre du bloc FAQ il tombe a 3,1:1 ; l'or de charte y donne 5,0:1. */
.faq-br-title .ol,.faq-br-title span:last-child{
  -webkit-text-stroke:0 !important;
  color:#BD9361 !important;
}

/* Transformations : "Avant / Apres" sur une ligne + meme taille que les autres titres */
.tr-title{font-size:clamp(38px,5vw,64px) !important;white-space:nowrap !important;line-height:1.05 !important;}
.tr-title .tr-title-outline{display:inline !important;}
/* Transformations : titre en majuscules (comme les autres) */
.tr-title{text-transform:uppercase !important;}

/* ============================================================
   ECHELLE DES TITRES DE SECTION
   Avant : 9 titres de meme niveau, 9 tailles differentes
   (76 / 64 / 64 / 64 / 54 / 50 / 46 / 42 / 40 / 33,6 px en 1440).
   Le plus gros etait une section de maillage SEO, le plus petit
   les temoignages clients. Trois paliers, definis par le role
   ET par la largeur reellement disponible :
     A - titre pleine largeur
     B - titre dans une colonne (place contrainte)
     C - section secondaire de maillage local
   ============================================================ */

/* --- Palier A : sections pleine largeur --- */
.sv .sv-title,
.tr-section .tr-title,
.reals .sec-title,
.gc-section .gc-title{
  font-size:clamp(28px,4.2vw,60px) !important;
  line-height:1.06 !important;
}

/* --- Palier B : titres loges dans une colonne --- */
.ap-section .ap-title,
.testi .tg-header h2,
.ct3-section .ct3-sidebar-title,
.faq-section .faq-br-title{
  font-size:clamp(24px,2.8vw,40px) !important;
  line-height:1.1 !important;
}

/* --- Palier C : maillage local, volontairement en retrait --- */
.sl-section .sl-hero-city,
.zi-section .zi-title{
  font-size:clamp(20px,2.4vw,32px) !important;
  line-height:1.1 !important;
}

/* ══ SUR-TITRES DE SECTION ═════════════════════════════════════════════════
   Une seule recette pour les sept. Ils jouent tous le meme role — annoncer la
   section — mais ils avaient derive chacun de leur cote : 2 tailles (10 et
   11px), 3 graisses (600, 700, 800) et 5 interlettrages (2.2 / 2.5 / 2.64 /
   3 / 5px) pour ce qui se lit comme un seul et meme element.

   Ce n'est pas un detail depuis que les fonds sont en aplat : la separation
   entre deux sections de meme surface n'est plus portee par une couleur mais
   par l'ouverture de section. Pour se lire comme un signal, elle doit etre
   rigoureusement identique partout.

   La couleur n'est volontairement PAS imposee ici : sur la creme des
   realisations, l'or #BD9361 tombe a 2.18 pour 4.5 exiges. Cette section
   garde donc sa version assombrie (#7A5428, qui mesure 5.23).
   ═════════════════════════════════════════════════════════════════════════ */
/* Note de cascade : cette feuille est chargee AVANT les blocs <style> de la
   page. A specificite egale et !important des deux cotes, c'est le bloc inline
   qui gagne. section.reals ajoute donc un selecteur de type pour passer devant
   codex-realisations-premium, seul bloc a poser son sur-titre en !important.
   Les six autres n'ont pas de !important, le notre suffit. */
.sv .sv-kicker,
section.reals .sec-tag,
.testi .tg-header .tg-label,
.ap-section .ap-tag,
.ct .ct-kicker,
.faq-section .faq-br-tag,
.zi-section .zi-tag{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
}

/* ============================================================
   RYTHME VERTICAL
   Avant : 5 respirations differentes d'une section a l'autre
   (96, 88, 78/68, 72, 50 px selon les blocs et les breakpoints).
   Deux valeurs suffisent : une pour les sections de contenu,
   une pour le bloc de maillage local, plus discret.
   Non touchees : .sl-section et .ct3-section, qui sont en pleine
   hauteur et gerent leur espacement en interne.
   ============================================================ */
.tr-section,
.reals,
.ap-section,
.testi,
.gc-section,
.faq-section,
.zi-section{
  padding-top:clamp(64px,7vw,96px) !important;
  padding-bottom:clamp(64px,7vw,96px) !important;
}
/* Services : corrige a la source dans index.html (la regle inline
   .sv{padding:...} passe apres cette feuille et gagnait). Son bas
   reste a 0 : la section enchaine sur la vague de Saone-et-Loire. */

.seo-local{
  padding-top:clamp(40px,4vw,56px) !important;
  padding-bottom:clamp(40px,4vw,56px) !important;
}

/* ============================================================
   HERO : le telephone devient l'action principale
   Justification mesuree (juillet 2026, fiche Google) : 5 appels
   depuis la fiche contre 0,45 demande de formulaire attendue sur
   le meme trafic. L'appel est le canal reel de ce metier ; le
   devis en ligne reste accessible, en second rang.
   ============================================================ */
.hc-cta{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:14px !important;
}
.hc-tel{gap:10px !important;}
.hc-tel svg{flex:0 0 auto;}
.hc-alt{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:11px 22px;
  border:1px solid rgba(189,148,97,.42);
  border-radius:10px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#EAE2D7;
  text-decoration:none;
  transition:border-color .25s,background .25s,color .25s;
}
.hc-alt:hover,.hc-alt:focus-visible{
  border-color:rgba(189,148,97,.8);
  background:rgba(189,148,97,.10);
  color:#d4aa7a;
}
@media (max-width:768px){
  .hc-cta{align-items:stretch !important;}
  .hc-alt{width:100%;justify-content:center;text-align:center;}
}

/* ============================================================
   SECTION SERVICES : trois prestations principales
   Le bloc .sv-feature (photo + texte) est repete pour Peinture
   interieure et Isolation thermique. Le deuxieme est inverse :
   texte a gauche, photo a droite.
   L'inversion ne vaut qu'en deux colonnes : sous 1000 px la
   grille passe sur une colonne et la photo doit rester en tete
   des trois blocs, sinon la lecture devient incoherente.
   ============================================================ */
@media (min-width:1001px){
  .sv-feature--rev{grid-template-columns:.98fr 1.02fr !important;}
  .sv-feature--rev .sv-feature-media{order:2 !important;}
  .sv-feature--rev .sv-feature-body{order:1 !important;}
}

/* ------------------------------------------------------------
   Bande « maison ancienne » : cloture de la section Services.
   Forme volontairement differente des .sv-feature (pas de carte,
   pas de photo, pleine largeur) : c'est un TYPE DE CHANTIER qui
   contient les trois metiers ci-dessus, pas une 4e prestation.
   La forme dit le niveau sans avoir a l'expliquer.
   ------------------------------------------------------------ */
.sv-ancien{
  margin:0 0 96px;
  padding:44px 0;
  border-top:1px solid rgba(189,148,97,.22);
  border-bottom:1px solid rgba(189,148,97,.22);
}
.sv-ancien-in{max-width:820px;}
.sv-ancien-kick{
  font-family:'Montserrat',sans-serif;
  font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--or-clair,#d4aa7a);
  margin:0 0 14px;
}
.sv-ancien-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(20px,2.2vw,30px);
  font-weight:900;line-height:1.22;letter-spacing:-.2px;
  text-transform:none;
  color:#EAE2D7;
  margin:0 0 16px;
}
.sv-ancien-text{
  font-size:15.5px;line-height:1.78;
  color:#D5D1C5;
  margin:0 0 22px;
}
@media (max-width:1000px){
  .sv-ancien{margin-bottom:72px;padding:36px 0;}
}
@media (max-width:620px){
  .sv-ancien{margin-bottom:56px;padding:30px 0;}
  .sv-ancien-text{font-size:14.5px;}
}
/* Les 4 liens « Decouvrir… » faisaient 24 px de haut : sous la cible
   tactile de 44 px. Defaut pre-existant sur les trois blocs, corrige
   pour les quatre d'un coup. */
@media (max-width:900px){
  .sv-inline{min-height:44px !important;align-items:center !important;}
}

/* ============================================================
   MENU SERVICES : liste verticale simple
   Remplace le mega-panneau de 780 px sur 3 colonnes par une
   liste de libelles, un service par ligne.
   Ancre sur #nav-svc-panel : la specificite d'id l'emporte sur
   les .nav-drop-* !important redefinis dans les blocs <style>
   de la page (7 fois pour .nav-drop-grid, 6 pour .nav-drop-item).
   ============================================================ */

/* Une seule colonne, plus de grille */
html body #nav-links #nav-svc-panel .nav-drop-grid{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

/* Libelles seuls : ni icone ni description */
html body #nav-links #nav-svc-panel .nav-drop-ic,
html body #nav-links #nav-svc-panel .nav-drop-desc{display:none !important;}

/* Chaque service = une ligne plate, sans carte ni ombre */
html body #nav-links #nav-svc-panel .nav-drop-item{
  display:flex !important;
  align-items:center !important;
  min-height:44px !important;      /* cible tactile */
  padding:11px 14px !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .2s,color .2s !important;
}
/* Filet de separation entre deux services */
html body #nav-links #nav-svc-panel .nav-drop-item + .nav-drop-item{
  border-top:1px solid rgba(212,170,122,.10) !important;
}
html body #nav-links #nav-svc-panel .nav-drop-item:hover,
html body #nav-links #nav-svc-panel .nav-drop-item:focus-visible{
  background:linear-gradient(90deg,rgba(212,170,122,.16),rgba(212,170,122,.04)) !important;
  transform:none !important;
  box-shadow:none !important;
}
html body #nav-links #nav-svc-panel .nav-drop-text{display:block !important;}
html body #nav-links #nav-svc-panel .nav-drop-label{
  font-family:'Montserrat',sans-serif !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.2px !important;
  line-height:1.25 !important;
  text-transform:none !important;
  color:rgba(244,237,227,.86) !important;
}
html body #nav-links #nav-svc-panel .nav-drop-item:hover .nav-drop-label,
html body #nav-links #nav-svc-panel .nav-drop-item:focus-visible .nav-drop-label{
  color:#d4aa7a !important;
}

/* --- Hierarchie : 3 services phares, 7 prestations secondaires ---
   Reprend le decoupage que la section Services affiche deja :
   « Le coeur du metier » (platrerie) et « Les autres prestations ». */
html body #nav-links #nav-svc-panel .nav-drop-group{
  margin:10px 14px 6px !important;
  font-family:'Montserrat',sans-serif !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(212,170,122,.75) !important;
}
html body #nav-links #nav-svc-panel .nav-drop-group--sec{
  margin-top:14px !important;
  padding-top:12px !important;
  border-top:1px solid rgba(212,170,122,.16) !important;
  /* .38 tombait a 3.03:1 : discret ne doit pas vouloir dire illisible.
     .54 donne 4.87:1 et reste nettement en retrait de l'or du groupe 1. */
  color:rgba(234,226,215,.54) !important;
}
/* Un intitule de groupe casse le filet entre deux services */
html body #nav-links #nav-svc-panel .nav-drop-group + .nav-drop-item{
  border-top:0 !important;
}

/* Phares : plus grands, plus clairs, avec un liseré or */
html body #nav-links #nav-svc-panel .nav-drop-item--phare{
  min-height:46px !important;
  border-left:2px solid rgba(212,170,122,.55) !important;
  border-radius:0 8px 8px 0 !important;
}
html body #nav-links #nav-svc-panel .nav-drop-item--phare .nav-drop-label{
  font-size:14px !important;
  font-weight:600 !important;
  color:#f4ede3 !important;
}

/* Secondaires : en retrait, sans disparaitre (contraste conserve) */
html body #nav-links #nav-svc-panel .nav-drop-item--sec{
  min-height:40px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}
html body #nav-links #nav-svc-panel .nav-drop-item--sec .nav-drop-label{
  font-size:12.5px !important;
  font-weight:400 !important;
  color:rgba(234,226,215,.62) !important;
}
/* Au survol, un secondaire retrouve la lisibilite d'un phare */
html body #nav-links #nav-svc-panel .nav-drop-item--sec:hover .nav-drop-label,
html body #nav-links #nav-svc-panel .nav-drop-item--sec:focus-visible .nav-drop-label{
  color:#d4aa7a !important;
}

/* En tactile, la hierarchie passe par la taille et la couleur, jamais par
   la hauteur : toutes les lignes reviennent a 44 px de cible. */
@media (max-width:900px){
  html body #nav-links #nav-svc-panel .nav-drop-item--sec{
    min-height:44px !important;
  }
}

/* Largeur du panneau : seulement quand il flotte sous la barre.
   Sous 901 px il vit dans le tiroir du burger et garde sa largeur. */
@media (min-width:901px){
  html body #nav-links #nav-svc-panel{
    width:300px !important;
    min-width:0 !important;
    max-width:calc(100vw - 32px) !important;
  }
  html body #nav-links #nav-svc-panel .nav-drop-inner{padding:10px !important;}
  html body #nav-links #nav-svc-panel .nav-drop-footer{margin-left:0 !important;margin-right:0 !important;}
}

/* ===== FIX lisibilite : labels bandeau confiance (.st-copy .st-lbl) =====
   Etaient en 9px + or moyen rgba(138,106,58,.88) => contraste 3.10/3.94 (echec AA).
   Desktop (fond clair) : or fonce lisible. Mobile (fond navy) : or clair lisible. */
.st-copy .st-lbl{font-size:11px !important;letter-spacing:1.6px !important;color:#6d4f1e !important;}
@media (max-width:768px){
  .st-copy .st-lbl{color:#d4aa7a !important;}
}

/* ============================================================
   BARRE STICKY MOBILE : deux actions, une seule primaire
   Avant : trois boutons de poids egal (Appeler / WhatsApp / Devis
   gratuit). Trois choix equivalents = aucune decision, et "Devis
   gratuit" passait sur deux lignes en debordant a droite en 375 px.
   WhatsApp sort de la barre ; l'appel devient primaire, meme
   justification mesuree que le hero (5 appels depuis la fiche Google
   contre 0,45 demande de formulaire attendue sur le meme trafic).
   Le devis reste : sur mobile le CTA du header disparait derriere le
   burger, la barre est le seul acces permanent au formulaire.
   ============================================================ */
#sticky-bar .sb-call{
  flex:1.3 !important;
  background:linear-gradient(135deg,#BD9361,#d4aa7a) !important;
  color:#0d1525 !important;
}
#sticky-bar .sb-call:active{background:linear-gradient(135deg,#d4aa7a,#BD9361) !important;}
#sticky-bar .sb-devis{
  flex:1 !important;
  background:none !important;
  color:#EAE2D7 !important;
}
#sticky-bar .sb-devis::before{display:none !important;}
#sticky-bar .sb-devis:active{background:rgba(189,147,97,.12) !important;color:#d4aa7a !important;}
/* 13px + letter-spacing 2px ne tenait pas sur une ligne en 375 px. */
#sticky-bar .sb-btn{font-size:12px !important;letter-spacing:1.1px !important;white-space:nowrap !important;}

/* Le bouton "retour en haut" flottait a 16 px au-dessus de la barre,
   en pleine zone du pouce. On le remonte franchement. */
@media (max-width:768px){
  #back-top{bottom:calc(60px + 76px + env(safe-area-inset-bottom)) !important;}
}

/* Zoom automatique d'iOS a la saisie.
   Safari iOS zoome sur le formulaire des qu'un champ fait moins de 16px : la
   page saute au premier tap, il faut dezoomer a la main, et une partie des
   visiteurs abandonne en cours de remplissage. Les champs etaient a 15,5px.
   Les autres pages recoivent le meme correctif par da-charte.css, que
   l'accueil ne charge pas — d'ou cette regle ici. */
@media (max-width:620px){
  .ct-field input,
  .ct-field select,
  .ct-field textarea{ font-size:16px !important; }
}

/* ══ TAILLE DES CIBLES TACTILES (mobile) ═══════════════════════════════════
   Reference : WCAG 2.5.8 (niveau AA) impose 24x24 px minimum ; Google et
   Apple recommandent 44x44. Les liens en ligne dans un paragraphe sont
   explicitement exemptes — ceux du contenu editorial ne sont donc pas vises.
   Ne sont corriges ici que les elements autonomes, en commencant par ceux qui
   servent a naviguer ou a vous joindre.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* Menu mobile : les entrees faisaient 34px de haut. C'est la navigation
     principale au doigt, elle passe a 48. */
  #nav-links > li > a,
  #nav-links .nav-dropdown-trigger{
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
  }
  #nav-links .nav-drop-item{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* Telephone et e-mail du pied de menu : 19 et 16px de haut. Ce sont deux
     liens de contact direct — les plus rentables du menu, et les plus durs
     a viser. */
  #nav-links .nav-mob-footer .nmf-tel,
  #nav-links .nav-mob-footer .nmf-mail{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }
}

@media (max-width:620px){
  /* Fermeture de la galerie photo : 31px. Ne pas pouvoir refermer une image
     en plein ecran du premier coup est un cul-de-sac. */
  #lb-close{ min-width:44px !important; min-height:44px !important; }

  /* Sous les 24px du minimum AA. */
  .nft-zones-city{ min-height:24px; display:inline-flex; align-items:center; }
  .hc-tb{ min-height:24px; }

  /* Champs et icones a 41 et 36px : juste sous la recommandation. */
  .ct-field input,
  .ct-field select{ min-height:44px; }
  .nft-soc{ min-width:44px !important; min-height:44px !important; }
}