/* Charte de l'apercu . Graphique Alliance
   Extraite des pages du 27/07 pour que les pages de la nouvelle architecture
   ne dupliquent plus le meme bloc de style. Aucune ressource exterieure :
   ni police, ni script, ni image distante. Les familles typographiques sont
   des piles systeme, resolues sur le poste du visiteur. */

:root{
  --corail:#EA5542;          /* la couleur historique, telle quelle */
  --corail-fonce:#B93520;    /* sa version lisible sur fond clair, contraste 5,4:1 */
  --encre:#13100D;           /* l'encre du logo */
  --encre-2:#413B34;         /* contraste 9,7:1 sur le fond . JAMAIS plus clair */
  --fond:#FFFFFF;
  --fond-2:#FAF7F4;
  --fond-3:#F3EDE8;
  --trait:rgba(19,16,13,.13);
  --trait-fort:rgba(19,16,13,.30);
  --sans:"Montserrat","Avenir Next","Segoe UI",Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
a{color:inherit}
:focus-visible{outline:3px solid var(--corail-fonce);outline-offset:3px}

/* ---------- barre ---------- */
.barre{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);border-bottom:1px solid var(--trait)}
.barre .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .glyphe{width:34px;height:34px;flex:0 0 auto;display:block}
.logo .mot{font-weight:700;font-size:18px;letter-spacing:-.022em;line-height:1.05}
/* nav:debut . genere par gabarit_commun.py, ne pas editer ici */
/* Polices : Montserrat, auto-hebergee (aucun tiers). Une seule fonte couvre 400 et 500. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 500;font-display:swap;src:url(/polices/montserrat-v12-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/polices/montserrat-v12-latin-600.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/polices/montserrat-v12-latin-700.woff2) format("woff2")}
.nav{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;color:var(--encre-2);padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--encre);border-bottom-color:var(--corail)}
.cta-mini{font-size:14px;font-weight:600;color:#fff;background:var(--corail-fonce);padding:11px 19px;text-decoration:none;border-radius:3px}
.cta-mini:hover{background:var(--encre)}
.nav-menu{position:relative}
.nav-sous{display:none;position:absolute;top:100%;left:-16px;flex-direction:column;min-width:270px;padding:10px 0;
  background:#fff;border:1px solid var(--trait);border-radius:3px;box-shadow:0 18px 40px -26px rgba(19,16,13,.45)}
.nav-menu:hover .nav-sous,.nav-menu:focus-within .nav-sous{display:flex}
.nav-sous a{padding:9px 18px;border-bottom:0;white-space:nowrap}
.nav-sous a:hover,.nav-sous a[aria-current]{background:var(--fond-2)}
/* Menu mobile : un <details> natif, sans script. Masque au-dessus de 960 px. */
.menu-mobile{display:none}
@media(max-width:960px){
  .nav{display:none}
  .barre .wrap{gap:12px}
  .menu-mobile{display:block;margin-left:auto}
  .menu-mobile summary{list-style:none;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border:1px solid var(--trait-fort);border-radius:3px;cursor:pointer;background:#fff}
  .menu-mobile summary::-webkit-details-marker{display:none}
  .menu-mobile summary:hover{border-color:var(--corail)}
  .menu-barres,.menu-barres::before,.menu-barres::after{display:block;width:20px;height:2px;background:var(--encre);
    border-radius:1px;transition:transform .15s ease,background .15s ease}
  .menu-barres{position:relative}
  .menu-barres::before,.menu-barres::after{content:"";position:absolute;left:0}
  .menu-barres::before{top:-6px}
  .menu-barres::after{top:6px}
  .menu-mobile[open] .menu-barres{background:transparent}
  .menu-mobile[open] .menu-barres::before{top:0;transform:rotate(45deg)}
  .menu-mobile[open] .menu-barres::after{top:0;transform:rotate(-45deg)}
  .menu-panneau{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;
    padding:8px clamp(20px,4.5vw,56px) 24px;background:#fff;border-bottom:1px solid var(--trait);
    box-shadow:0 22px 40px -28px rgba(19,16,13,.45);max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto}
  .menu-panneau a{display:flex;align-items:center;min-height:48px;font-size:16px;font-weight:500;
    color:var(--encre-2);text-decoration:none;border-bottom:1px solid var(--trait)}
  .menu-panneau a:hover,.menu-panneau a[aria-current]{color:var(--encre)}
  .menu-panneau a[aria-current]{box-shadow:inset 3px 0 0 var(--corail);padding-left:14px}
  .menu-sous{display:flex;flex-direction:column;margin:0 0 0 14px;border-left:2px solid var(--trait)}
  .menu-sous a{padding-left:16px;font-size:15px;min-height:44px}
  .menu-panneau .cta-panneau{justify-content:center;margin-top:20px;color:#fff;border-bottom:0;font-weight:600;font-size:16px}
  .menu-panneau .cta-panneau:hover,.menu-panneau .cta-panneau[aria-current]{color:#fff;box-shadow:none;padding:11px 19px}
}
/* Sous 600 px, le bouton d'appel de la barre cede la place a celui du panneau. */
@media(max-width:600px){.barre .cta-mini:not(.cta-panneau){display:none}}
/* nav:fin */

/* ---------- boutons, titres, sections ---------- */
.btn{font-size:15.5px;font-weight:600;text-decoration:none;padding:14px 27px;display:inline-block;border-radius:3px;transition:background .15s ease,transform .14s ease}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--corail-fonce);color:#fff}
.btn-1:hover{background:var(--encre)}
.btn-2{border:1.5px solid var(--trait-fort);color:var(--encre)}
.btn-2:hover{border-color:var(--corail);color:var(--corail-fonce)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}

section{padding:clamp(62px,10vh,110px) 0}
.tete{max-width:64ch;margin-bottom:44px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.4vw,42px);line-height:1.12;letter-spacing:-.018em;margin:0;max-width:21ch}
.chapo{margin:16px 0 0;font-size:17.5px;line-height:1.55;color:var(--encre-2);max-width:58ch}
.surlignage{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--corail-fonce);margin-bottom:24px}
.surlignage::before{content:"";width:26px;height:2px;background:var(--corail)}
.signature{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,25px);line-height:1.3;color:var(--corail-fonce);margin:22px 0 0}

/* ---------- fil d'ariane ---------- */
.fil{font-size:13.5px;color:var(--encre-2);padding:22px 0 0}
.fil a{text-decoration:none;border-bottom:1px solid var(--trait-fort)}
.fil a:hover{color:var(--corail-fonce);border-bottom-color:var(--corail)}
.fil span{margin:0 9px;color:var(--trait-fort)}

/* ---------- tete de rubrique ---------- */
.rubrique-une{padding:clamp(34px,5vh,58px) 0 clamp(40px,6vh,70px)}
.rubrique-une h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,58px);
  line-height:1.06;letter-spacing:-.021em;margin:0;max-width:19ch}
.rubrique-une h1 .it{display:block;font-style:italic;color:var(--corail-fonce)}
.rubrique-une .sous{margin:26px 0 0;font-size:clamp(17px,1.55vw,19.5px);line-height:1.52;max-width:52ch;color:var(--encre-2)}
.une-deux{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:940px){.une-deux{grid-template-columns:1fr}}

/* les reperes : de la matiere a droite du titre, jamais du decor */
.reperes{border-top:2px solid var(--encre);margin:0;padding:0}
.reperes div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
  padding:16px 0 17px;border-bottom:1px solid var(--trait)}
.reperes dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--corail-fonce)}
.reperes dd{margin:0;font-size:16px;line-height:1.48;color:var(--encre)}

/* ---------- le probleme, pose avant la reponse ---------- */
.probleme{background:var(--fond-2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.probleme .wrap{padding:clamp(44px,6vh,72px) clamp(20px,4.5vw,56px)}
.probleme .qui{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--corail-fonce);margin-bottom:18px}
.probleme p{font-family:var(--serif);font-size:clamp(21px,2.4vw,29px);line-height:1.3;margin:0;max-width:30ch}
.probleme .apres{font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--encre-2);max-width:56ch;margin:22px 0 0}

/* ---------- ce que nous faisons : liste numerotee ---------- */
.gestes{border-top:2px solid var(--encre)}
.geste{display:grid;grid-template-columns:minmax(0,64px) minmax(0,1fr);gap:0 clamp(18px,3vw,38px);
  padding:26px 0 28px;border-bottom:1px solid var(--trait);align-items:start}
.geste .num{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1;color:var(--corail-fonce)}
.geste h3,.geste h2{font-family:var(--serif);font-weight:400;font-size:clamp(19.5px,2.05vw,24px);line-height:1.25;margin:0 0 9px;max-width:30ch;letter-spacing:normal}
.geste p{margin:0;font-size:15.5px;line-height:1.58;color:var(--encre-2);max-width:60ch}
@media(max-width:720px){.geste{grid-template-columns:1fr;gap:8px}}

/* ---------- bandeau preuve ---------- */
.preuve{background:var(--encre);color:#fff}
.preuve .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;padding-top:30px;padding-bottom:32px}
.preuve .n{font-family:var(--serif);font-size:clamp(48px,5.6vw,66px);line-height:.9;color:var(--corail)}
.preuve .t{font-size:clamp(17.5px,1.65vw,20.5px);line-height:1.36;max-width:36ch}
.preuve .t b{font-weight:700}
.preuve .src{margin-left:auto;font-size:13px;color:rgba(255,255,255,.82);max-width:23ch;text-align:right}
@media(max-width:840px){.preuve .src{margin-left:0;text-align:left}}

/* ---------- cartes de chantier ---------- */
.chantiers-lies{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}
.chantier-carte{border:1px solid var(--trait-fort);border-top:3px solid var(--corail);
  padding:26px 24px 22px;background:#fff;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;transition:box-shadow .16s ease,transform .16s ease}
.chantier-carte:hover{box-shadow:0 18px 40px -30px rgba(19,16,13,.55);transform:translateY(-2px)}
.chantier-carte .mes{font-family:var(--serif);font-size:clamp(26px,3vw,34px);line-height:1;color:var(--corail-fonce)}
.chantier-carte .mes small{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-2);margin-top:8px}
.chantier-carte h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.26;margin:6px 0 0}
.chantier-carte p{margin:0;font-size:15px;line-height:1.55;color:var(--encre-2)}
.chantier-carte .aller{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--corail-fonce)}

/* ---------- les deux entrees, sur l'accueil ---------- */
.entrees{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.entree-bloc{border:1px solid var(--trait-fort);background:#fff;padding:34px 32px 30px;display:flex;flex-direction:column}
.entree-bloc.majeure{border-top:4px solid var(--corail);box-shadow:0 18px 40px -30px rgba(19,16,13,.5)}
.entree-bloc.seconde{background:var(--fond-2);border-top:4px solid var(--encre)}
.entree-bloc .qui{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--corail-fonce);margin-bottom:14px}
.entree-bloc.seconde .qui{color:var(--encre-2)}
.entree-bloc h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,27px);line-height:1.2;margin:0 0 12px;max-width:20ch}
.entree-bloc > p{margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--encre-2);max-width:44ch}
.liste-rubriques{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--trait)}
.liste-rubriques li{border-bottom:1px solid var(--trait)}
.liste-rubriques a{display:flex;align-items:baseline;gap:12px;padding:13px 2px;text-decoration:none;font-size:15.5px;line-height:1.4;transition:padding-left .16s ease,color .16s ease}
.liste-rubriques a:hover{padding-left:8px;color:var(--corail-fonce)}
.liste-rubriques a::after{content:"→";margin-left:auto;color:var(--corail-fonce);opacity:.55}
.entree-bloc .pied{margin-top:auto;padding-top:6px;font-size:14.5px;color:var(--encre-2)}
@media(max-width:900px){.entrees{grid-template-columns:1fr}}

/* ---------- ce que nous integrons ---------- */
.socle{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px 40px}
.socle .bloc{border-top:2px solid var(--corail);padding-top:15px}
.socle .nom{font-family:var(--serif);font-size:19.5px;margin-bottom:6px}
.socle .quoi{font-size:15px;line-height:1.5;color:var(--encre-2)}

/* ---------- encart de reserve, quand une page manque de preuve ---------- */
.reserve{border-left:3px solid var(--corail);background:var(--fond-3);padding:16px 20px;
  font-size:15.5px;line-height:1.55;color:var(--encre);max-width:62ch;margin:0}
.reserve b{font-weight:700}

/* ---------- sous-secteurs : sections ancrees d'une page mere ----------
   Portees en sections plutot qu'en pages : deux des quatre sous-secteurs n'ont
   aucun travail de reference qui leur soit attribue, et l'entree 2 demarre a zero
   en referencement. Une section se promeut en page quand ses cas arrivent ;
   l'inverse perdrait des adresses. Motif complet dans construire-apercu.py. */
.sous-sects{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--trait);
  border:1px solid var(--trait)}
.sous-sect{background:#fff;padding:30px 28px 28px;scroll-margin-top:90px}
.sous-sect h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,25px);
  line-height:1.2;margin:0 0 12px;max-width:22ch}
.sous-sect .monde{margin:0 0 20px;font-size:16px;line-height:1.55;color:var(--encre-2);max-width:44ch}
.sous-sect .atteste{border-left:3px solid var(--corail);padding:12px 0 12px 16px;
  background:linear-gradient(90deg,rgba(234,85,66,.07),transparent 90%);max-width:46ch}
.sous-sect .produit-l{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--corail-fonce);margin-bottom:6px}
.sous-sect .produit-p{margin:0;font-size:15.5px;line-height:1.5}
@media(max-width:880px){.sous-sects{grid-template-columns:1fr}}

/* ---------- appel ---------- */
/* corail-fonce et non corail : blanc sur #EA5542 ne donne que 3,57 de contraste,
   sous le seuil de 4,5 exige pour du texte courant. Invariant 4 du projet.
   Aucune couleur nouvelle : --corail-fonce est deja la version lisible du corail. */
.appel{background:var(--corail-fonce);color:#fff}
.appel .wrap{padding:clamp(64px,10vh,110px) clamp(20px,4.5vw,56px)}
.appel h2{color:#fff;max-width:15ch}
.appel p{font-size:18px;line-height:1.55;max-width:54ch;margin:22px 0 34px;color:rgba(255,255,255,.96)}
.appel .btn-1{background:#fff;color:var(--corail-fonce)}
.appel .btn-1:hover{background:var(--encre);color:#fff}

footer{padding:34px 0 62px;font-size:14px;color:var(--encre-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}

.bandeau{background:var(--encre);color:#fff;font-size:12px;font-weight:600;letter-spacing:.05em;padding:9px 0}
.bandeau .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
.bandeau b{color:var(--corail)}

/* ---------- formulaire de contact ----------
   Classes NOUVELLES, ajoutees le 08/09/2026 : aucune regle existante n'est
   modifiee, donc rien ne peut etre endormi sur les pages qui ne chargent pas
   cette feuille. Elles ne servent que sur /contact.html.

   Aucun placeholder : un texte d'exemple dans le champ est gris par
   construction et disparait des qu'on tape. L'etiquette reste. */
.contact-deux{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:940px){.contact-deux{grid-template-columns:1fr}}

.formulaire{border-top:2px solid var(--encre);padding-top:8px}
.champ{padding:18px 0 0}
.champ label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-2);margin-bottom:8px}
.champ label .req{color:var(--corail-fonce);margin-left:5px}
.champ label .fac{font-weight:600;letter-spacing:.06em;text-transform:none;
  color:var(--encre-2);margin-left:7px;font-size:11.5px}
.champ-paire{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:620px){.champ-paire{grid-template-columns:1fr}}
.champ input,.champ textarea{width:100%;font-family:var(--sans);font-size:16.5px;
  line-height:1.5;color:var(--encre);background:#fff;
  border:1.5px solid var(--trait-fort);border-radius:3px;padding:13px 15px;
  transition:border-color .15s ease,box-shadow .15s ease}
.champ textarea{min-height:172px;resize:vertical}
.champ input:hover,.champ textarea:hover{border-color:var(--encre-2)}
.champ input:focus,.champ textarea:focus{border-color:var(--corail-fonce);
  box-shadow:0 0 0 3px rgba(185,53,32,.13);outline:none}
.champ .aide{margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--encre-2)}

/* le leurre : hors de l'ecran, hors du parcours au clavier, jamais rempli par
   un humain. C'est notre anti-robot, et il ne fait appel a aucun tiers. */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.envoi{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  margin:30px 0 0;padding-top:26px;border-top:1px solid var(--trait)}
button.btn{border:0;cursor:pointer;font-family:var(--sans)}
.envoi .note{font-size:14px;line-height:1.45;color:var(--encre-2);max-width:34ch}
.note-donnees{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--encre-2);max-width:62ch}

/* le retour apres envoi, et le refus : meme bloc, deux tonalites */
.retour{border-left:3px solid var(--corail);background:var(--fond-3);
  padding:20px 24px;max-width:62ch;margin:0}
.retour.refus{border-left-color:var(--encre)}
.retour h2{font-size:clamp(21px,2.3vw,27px);max-width:26ch}
.retour p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--encre)}