/* ============================================================
   PLOMB'ART V5 — « L'eau et la flamme »
   Feuille de style de la nouvelle page d'accueil.
   Couleurs relevées sur le logo officiel (bleu #1A6DAE, rouge #CC1A1E).
   Signature : le repère du mitigeur — un trait mi-bleu (froid), mi-rouge (chaud).
   ============================================================ */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face{ font-family:'Figtree'; src:url('/assets/fonts/figtree-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Figtree'; src:url('/assets/fonts/figtree-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Figtree'; src:url('/assets/fonts/figtree-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Figtree'; src:url('/assets/fonts/figtree-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --bleu:#1A6DAE;          /* bleu du logo : marque, titres d'accent, liens */
  --bleu-700:#14568B;      /* survol, texte bleu sur fond clair */
  --bleu-nuit:#0B2238;     /* fonds sombres */
  --bleu-nuit-2:#12304D;
  --bleu-eau:#EDF4FA;      /* fonds de section clairs */
  --bleu-eau-2:#DCE9F5;
  --rouge:#CC1F24;         /* rouge du logo : uniquement les actions */
  --rouge-700:#A5171C;

  --encre:#132130;         /* texte principal */
  --ardoise:#536274;       /* texte secondaire */
  --ligne:#DCE3EA;
  --ligne-sombre:rgba(255,255,255,.12);
  --papier:#F7F9FB;
  --blanc:#FFFFFF;

  --police:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-hero:clamp(2.45rem, 1.45rem + 3.9vw, 4.3rem);
  --t-h2:clamp(1.9rem, 1.35rem + 2.1vw, 3rem);
  --t-h3:clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --t-lead:clamp(1.08rem, 1rem + .35vw, 1.28rem);

  --gouttiere:clamp(1rem, .4rem + 2.6vw, 2.5rem);
  --section:clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --max:1240px;

  --r-s:8px; --r-m:14px; --r-l:22px;
  --ombre-s:0 1px 2px rgba(11,34,56,.06), 0 2px 8px rgba(11,34,56,.04);
  --ombre-m:0 18px 40px -18px rgba(11,34,56,.28);
  --ombre-l:0 40px 80px -30px rgba(11,34,56,.38);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; }
body{
  margin:0; background:var(--blanc); color:var(--encre);
  font-family:var(--police); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3{ font-weight:700; letter-spacing:-.025em; line-height:1.08; color:var(--bleu-nuit); text-wrap:balance; }
p{ text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--bleu); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--bleu-eau-2); color:var(--bleu-nuit); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

.conteneur{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gouttiere); }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lien-evitement{ position:absolute; left:1rem; top:-5rem; z-index:200; background:var(--bleu-nuit); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-s); font-weight:600; }
.lien-evitement:focus{ top:1rem; }
.ic{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Signature : le repère du mitigeur ---------- */
.mitigeur{ display:inline-flex; width:44px; height:4px; border-radius:4px; overflow:hidden; flex:none; }
.mitigeur::before,.mitigeur::after{ content:''; flex:1; }
.mitigeur::before{ background:var(--bleu); }
.mitigeur::after{ background:var(--rouge); }

.surtitre{
  display:flex; align-items:center; gap:.85rem;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bleu-700);
}
.surtitre .num{ font-variant-numeric:tabular-nums; color:var(--ardoise); letter-spacing:.06em; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.45rem; border-radius:12px;
  font-weight:700; font-size:1rem; line-height:1.2; white-space:nowrap;
  border:1.5px solid transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-action{ background:var(--rouge); color:#fff; box-shadow:0 10px 24px -12px rgba(204,31,36,.75); }
.btn-action:hover{ background:var(--rouge-700); }
.btn-contour{ border-color:var(--bleu-nuit); color:var(--bleu-nuit); background:transparent; }
.btn-contour:hover{ background:var(--bleu-nuit); color:#fff; }
.btn-clair{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-clair:hover{ background:#fff; color:var(--bleu-nuit); border-color:#fff; }
.btn-sm{ min-height:44px; padding:.6rem 1.05rem; font-size:.94rem; border-radius:10px; }
.tel{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }

.lien-fleche{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--bleu-700); }
.lien-fleche .ic{ transition:transform .2s var(--ease); }
.lien-fleche:hover .ic{ transform:translateX(4px); }

/* ---------- Barre utilitaire ---------- */
.utilitaire{ background:var(--bleu-nuit); color:#C9D6E3; font-size:.86rem; }
.utilitaire .conteneur{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:40px; }
.utilitaire a{ color:#fff; font-weight:600; display:inline-flex; align-items:center; gap:.45rem; }
.utilitaire a:hover{ text-decoration:underline; text-underline-offset:3px; }
.utilitaire .droite{ display:flex; gap:1.6rem; }
@media (max-width:760px){ .utilitaire{ display:none; } }

/* ---------- En-tête ---------- */
.entete{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.entete.defile{ border-color:var(--ligne); box-shadow:0 6px 24px -18px rgba(11,34,56,.4); }
.entete .conteneur{ display:flex; align-items:center; gap:2rem; min-height:78px; }
.logo{ display:block; flex:none; }
.logo img{ height:60px; width:auto; }
.nav{ display:flex; align-items:center; gap:1.9rem; margin-left:auto; }
.nav a{ position:relative; font-weight:600; font-size:.97rem; color:var(--encre); padding-block:.4rem; }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--bleu); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a:hover::after{ transform:scaleX(1); }
.entete-actions{ display:flex; align-items:center; gap:.8rem; }
.entete-tel{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--bleu-nuit); }
.entete-tel .ic{ color:var(--rouge); }
.menu-bouton{ display:none; width:46px; height:46px; border-radius:10px; align-items:center; justify-content:center; border:1.5px solid var(--ligne); }
.menu-bouton .ic{ width:22px; height:22px; }

@media (max-width:1180px){
  .nav{ gap:1.3rem; }
  .entete-tel span{ display:none; }
}
@media (max-width:1024px){
  .entete .conteneur{ min-height:68px; gap:1rem; }
  .logo img{ height:50px; }
  .menu-bouton{ display:inline-flex; }
  .entete-actions{ margin-left:auto; }
  .entete-actions .btn-action{ display:none; }
  .entete-tel{ width:46px; height:46px; justify-content:center; border-radius:10px; background:var(--bleu-eau); }
  .js .nav{
    position:fixed; inset:68px 0 auto 0; margin:0; padding:1rem var(--gouttiere) 1.6rem;
    flex-direction:column; align-items:stretch; gap:0; background:#fff;
    border-bottom:1px solid var(--ligne); box-shadow:0 30px 40px -30px rgba(11,34,56,.35);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s;
  }
  .js .nav.ouvert{ transform:none; opacity:1; visibility:visible; }
  .js .nav a{ padding:1rem 0; font-size:1.1rem; border-bottom:1px solid var(--ligne); }
  .js .nav a::after{ display:none; }
  html:not(.js) .nav{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(4rem, 2rem + 6vw, 7.5rem); overflow:hidden; }
.hero-grille{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2.5rem, 1rem + 5vw, 6rem); align-items:center; }
.hero h1{ font-size:var(--t-hero); line-height:1.02; letter-spacing:-.035em; margin:1.4rem 0 1.5rem; }
.hero h1 .art{ color:var(--rouge); }
.hero .chapo{ font-size:var(--t-lead); color:var(--ardoise); max-width:34rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.interlocuteur{
  display:flex; align-items:center; gap:1rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--ligne); max-width:34rem;
}
.monogramme{
  width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--bleu-nuit); color:#fff; font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 -3px 0 var(--rouge), inset 0 3px 0 var(--bleu);
}
.interlocuteur strong{ display:block; color:var(--bleu-nuit); font-size:1.02rem; }
.interlocuteur p span{ color:var(--ardoise); font-size:.95rem; }
.interlocuteur a{ color:var(--bleu-700); font-weight:600; }
.interlocuteur a:hover{ text-decoration:underline; text-underline-offset:3px; }

.hero-visuel{ position:relative; padding:0 0 3.2rem 3.2rem; }
.hero-visuel::before{
  content:''; position:absolute; inset:2.4rem -40vw -2rem 0; background:var(--bleu-eau); border-radius:var(--r-l) 0 0 var(--r-l); z-index:-1;
}
.photo-principale{ position:relative; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--ombre-l); aspect-ratio:4/5; background:var(--bleu-eau-2); }
.photo-principale img{ width:100%; height:100%; object-fit:cover; }
.photo-secondaire{
  position:absolute; left:0; bottom:0; width:42%; aspect-ratio:4/5; border-radius:var(--r-m); overflow:hidden;
  border:6px solid #fff; box-shadow:var(--ombre-m); background:var(--bleu-eau-2);
}
.photo-secondaire img{ width:100%; height:100%; object-fit:cover; }
.etiquette{
  position:absolute; right:1rem; bottom:1rem; display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.94); color:var(--bleu-nuit); font-size:.82rem; font-weight:600;
  padding:.5rem .8rem; border-radius:999px; box-shadow:var(--ombre-s);
}
.etiquette .mitigeur{ width:22px; height:3px; }

@media (max-width:920px){
  .hero-grille{ grid-template-columns:1fr; }
  .hero-visuel{ max-width:520px; width:100%; margin-inline:auto; padding:0 0 2.4rem 2rem; }
  .hero-visuel::before{ inset:1.6rem -2rem -1.4rem 0; border-radius:var(--r-l); }
}
@media (max-width:560px){
  .hero-actions .btn{ width:100%; }
  .photo-secondaire{ width:40%; border-width:4px; }
  .etiquette{ font-size:.75rem; right:.6rem; bottom:.6rem; }
}

/* ---------- Sections ---------- */
.section{ padding-block:var(--section); }
.section-eau{ background:var(--papier); }
.tete-section{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem 4rem; align-items:end; margin-bottom:clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.tete-section h2{ font-size:var(--t-h2); margin-top:1.1rem; }
.tete-section p{ color:var(--ardoise); font-size:1.08rem; max-width:32rem; }
@media (max-width:820px){ .tete-section{ grid-template-columns:1fr; } }

/* ---------- Métiers ---------- */
.metiers{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.metier{
  position:relative; background:#fff; border:1px solid var(--ligne); border-radius:var(--r-l);
  padding:clamp(1.6rem, 1rem + 2vw, 2.6rem); overflow:hidden;
}
.metier::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--bleu); }
.metier.flamme::before{ background:var(--rouge); }
.metier-tete{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.pastille{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--bleu-eau); color:var(--bleu); flex:none; }
.metier.flamme .pastille{ background:#FBECEC; color:var(--rouge); }
.pastille .ic{ width:26px; height:26px; }
.metier h3{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.metier > p{ color:var(--ardoise); max-width:30rem; }
.liste-services{ margin-top:1.6rem; border-top:1px solid var(--ligne); }
.liste-services a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem .25rem; border-bottom:1px solid var(--ligne); font-weight:600; color:var(--encre);
  transition:color .2s, padding .2s var(--ease);
}
.liste-services a .ic{ color:var(--ardoise); transition:transform .2s var(--ease), color .2s; }
.liste-services a:hover{ color:var(--bleu-700); padding-left:.6rem; }
.liste-services a:hover .ic{ transform:translateX(3px); color:var(--bleu); }
.metier.flamme .liste-services a:hover{ color:var(--rouge-700); }
.metier.flamme .liste-services a:hover .ic{ color:var(--rouge); }
.metier .lien-fleche{ margin-top:1.6rem; }
@media (max-width:860px){ .metiers{ grid-template-columns:1fr; } }

/* ---------- Réalisations ---------- */
.galerie{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.25rem; }
.chantier{ display:flex; flex-direction:column; gap:.9rem; }
.chantier button{ display:block; width:100%; text-align:left; border-radius:var(--r-m); overflow:hidden; aspect-ratio:4/5; background:var(--bleu-eau-2); position:relative; }
.chantier img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.chantier button::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,34,56,.35), transparent 40%); opacity:0; transition:opacity .3s;
}
.chantier button:hover img{ transform:scale(1.035); }
.chantier button:hover::after{ opacity:1; }
.agrandir{ position:absolute; right:.75rem; top:.75rem; z-index:1; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--bleu-nuit); opacity:0; transform:scale(.9); transition:opacity .25s, transform .25s; }
.chantier button:hover .agrandir,.chantier button:focus-visible .agrandir{ opacity:1; transform:none; }
.chantier figcaption strong{ display:block; color:var(--bleu-nuit); font-size:1.02rem; line-height:1.3; }
.chantier figcaption span{ color:var(--ardoise); font-size:.9rem; }
.galerie-pied{ display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--ligne); }
.galerie-pied p{ color:var(--ardoise); font-size:.95rem; max-width:40rem; }
@media (max-width:980px){ .galerie{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){
  .galerie{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gouttiere); gap:.9rem; margin-inline:calc(var(--gouttiere) * -1); padding-inline:var(--gouttiere); padding-bottom:.6rem; scrollbar-width:none; }
  .galerie::-webkit-scrollbar{ display:none; }
  .chantier{ flex:0 0 78%; scroll-snap-align:start; }
}

/* ---------- Visionneuse ---------- */
.visionneuse{ width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(6,18,30,.94); color:#fff; }
.visionneuse[open]{ display:grid; grid-template-rows:auto 1fr auto; }
.visionneuse::backdrop{ background:transparent; }
.vis-barre{ display:flex; justify-content:space-between; align-items:center; padding:1rem var(--gouttiere); font-size:.9rem; color:#B9C7D6; }
.vis-scene{ display:grid; place-items:center; min-height:0; padding:0 4.5rem; }
.vis-scene img{ max-width:100%; max-height:calc(100vh - 11rem); max-height:calc(100dvh - 11rem); width:auto; border-radius:var(--r-s); }
.vis-legende{ text-align:center; padding:1rem var(--gouttiere) 1.6rem; font-weight:600; }
.vis-btn{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#fff; transition:background .2s; }
.vis-btn:hover{ background:rgba(255,255,255,.2); }
.vis-prec,.vis-suiv{ position:fixed; top:50%; transform:translateY(-50%); }
.vis-prec{ left:1rem; } .vis-suiv{ right:1rem; }
@media (max-width:640px){ .vis-scene{ padding:0 .75rem; } .vis-prec,.vis-suiv{ top:auto; bottom:1rem; transform:none; } }

/* ---------- Interlocuteur & méthode ---------- */
.duo{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2.5rem, 1rem + 5vw, 6rem); align-items:start; }
.carte-contact{ position:sticky; top:7rem; background:var(--bleu-nuit); color:#D3DEE9; border-radius:var(--r-l); padding:clamp(1.8rem, 1.2rem + 2vw, 2.8rem); overflow:hidden; }
.carte-contact::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--bleu) 50%, var(--rouge) 50%); }
.carte-contact .surtitre{ color:#9FB8D0; }
.carte-contact h2{ color:#fff; font-size:var(--t-h2); margin:1.1rem 0 1.1rem; }
.carte-contact p{ color:#B9C8D7; }
.coordonnees{ margin-top:2rem; display:grid; gap:.75rem; }
.coordonnees a{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:12px; background:var(--bleu-nuit-2); color:#fff; font-weight:600; transition:background .2s; }
.coordonnees a:hover{ background:#183C60; }
.coordonnees .ic{ width:22px; height:22px; color:#8FB6DD; }
.coordonnees small{ display:block; font-weight:500; color:#9FB2C6; font-size:.82rem; }

.etapes{ counter-reset:etape; }
.etapes h2{ font-size:var(--t-h2); margin:1.1rem 0 2.2rem; }
.etape{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding:1.7rem 0; border-top:1px solid var(--ligne); }
.etape:last-child{ border-bottom:1px solid var(--ligne); }
.etape::before{
  counter-increment:etape; content:counter(etape, decimal-leading-zero);
  font-weight:700; font-size:1.05rem; color:var(--bleu); font-variant-numeric:tabular-nums; padding-top:.15rem; min-width:2.2rem;
}
.etape h3{ font-size:var(--t-h3); margin-bottom:.4rem; }
.etape p{ color:var(--ardoise); }
@media (max-width:920px){ .duo{ grid-template-columns:1fr; } .carte-contact{ position:static; } }

/* ---------- Zone ---------- */
.zone{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.zone h2{ font-size:var(--t-h2); margin:1.1rem 0 1.1rem; }
.zone > div > p{ color:var(--ardoise); max-width:32rem; }
.communes{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.8rem; }
.communes a{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem; border:1px solid var(--ligne); border-radius:999px; background:#fff; font-weight:600; font-size:.93rem; transition:border-color .2s, color .2s; }
.communes a:hover{ border-color:var(--bleu); color:var(--bleu-700); }
.communes a.base{ background:var(--bleu-nuit); border-color:var(--bleu-nuit); color:#fff; }
.carte-zone{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r-l); padding:1rem; box-shadow:var(--ombre-s); }
.carte-zone svg{ width:100%; height:auto; }
.carte-zone .legende{ display:block; text-align:right; font-size:.78rem; color:var(--ardoise); padding:.3rem .4rem 0; }
.carte-zone .ville text{ font-family:var(--police); font-size:13px; font-weight:600; fill:var(--encre); }
.carte-zone .ville circle{ fill:var(--bleu); }
.carte-zone .ville.base text{ font-size:15px; font-weight:700; fill:var(--bleu-nuit); }
.carte-zone .ville.base circle{ fill:#fff; }
@media (max-width:920px){ .zone{ grid-template-columns:1fr; } }
/* Sur téléphone, les noms de la carte deviennent illisibles : la liste des communes suffit. */
@media (max-width:560px){ .carte-zone{ display:none; } }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem, 1rem + 4vw, 5rem); }
.faq h2{ font-size:var(--t-h2); margin-top:1.1rem; }
.faq details{ border-top:1px solid var(--ligne); }
.faq details:last-child{ border-bottom:1px solid var(--ligne); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.4rem 0; font-weight:700; font-size:1.12rem; color:var(--bleu-nuit); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ic{ color:var(--bleu); transition:transform .25s var(--ease); }
.faq details[open] summary .ic{ transform:rotate(45deg); }
.faq details p{ color:var(--ardoise); padding:0 2.5rem 1.5rem 0; }
.faq details a{ color:var(--bleu-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:860px){ .faq{ grid-template-columns:1fr; } }

/* ---------- Appel final ---------- */
.appel{ position:relative; background:var(--bleu-nuit); color:#C9D6E3; border-radius:var(--r-l); padding:clamp(2.2rem, 1rem + 5vw, 5rem); overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:2rem 3rem; align-items:end; }
.appel::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--bleu) 50%, var(--rouge) 50%); }
.appel h2{ color:#fff; font-size:var(--t-h2); }
.appel p{ margin-top:1rem; max-width:34rem; }
.appel-actions{ display:flex; flex-direction:column; gap:.75rem; }
@media (max-width:860px){ .appel{ grid-template-columns:1fr; } .appel-actions .btn{ width:100%; } }

/* ---------- Pied de page ---------- */
.pied{ background:var(--bleu-nuit); color:#A9BACB; margin-top:var(--section); padding-top:clamp(3.5rem, 2rem + 4vw, 5.5rem); font-size:.95rem; }
.pied-grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.pied-logo{ display:inline-block; background:#fff; padding:.8rem 1rem; border-radius:12px; }
.pied-logo img{ height:44px; width:auto; }
.pied-marque p{ margin-top:1.2rem; max-width:20rem; }
.pied h3{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; }
.pied li + li{ margin-top:.6rem; }
.pied a:hover{ color:#fff; }
.pied .contact-pied a{ color:#fff; font-weight:600; }
.pied-bas{ border-top:1px solid var(--ligne-sombre); padding-block:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem 2rem; font-size:.86rem; color:#8397AB; }
.pied-bas nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
@media (max-width:920px){ .pied-grille{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pied-grille{ grid-template-columns:1fr; } }

/* ---------- Barre d'actions mobile ---------- */
.barre-mobile{ display:none; }
@media (max-width:760px){
  .barre-mobile{
    position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px); border-top:1px solid var(--ligne); box-shadow:0 -10px 30px -20px rgba(11,34,56,.4);
  }
  .barre-mobile .btn{ min-height:48px; padding-inline:.8rem; }
  body{ padding-bottom:76px; }
}

/* ---------- Apparition au défilement (uniquement si JS actif) ---------- */
.js [data-apparition]{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-apparition].visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js [data-apparition]{ opacity:1; transform:none; } }

@media print{ .utilitaire,.entete,.barre-mobile,.visionneuse{ display:none !important; } }

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
.nav a[aria-current="page"]{ color:var(--bleu-700); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---------- En-tête de page ---------- */
.page-tete{ background:var(--papier); border-bottom:1px solid var(--ligne); padding-block:clamp(1.6rem, 1rem + 2vw, 2.6rem) clamp(2.8rem, 1.8rem + 3vw, 4.5rem); }
.page-tete-grille{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.page-tete.simple .page-tete-grille{ grid-template-columns:1fr; }
.page-tete h1{ font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); line-height:1.05; letter-spacing:-.03em; margin:1.1rem 0 1.1rem; max-width:22ch; }
.page-tete .chapo{ font-size:var(--t-lead); color:var(--ardoise); max-width:40rem; }
.page-tete .hero-actions{ margin-top:1.8rem; }
.page-tete-visuel{ border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--ombre-m); max-width:380px; justify-self:end; width:100%; background:var(--bleu-eau-2); }
.page-tete-visuel img{ width:100%; height:100%; object-fit:cover; }
.page-tete-pictogramme{ justify-self:end; width:min(100%, 320px); aspect-ratio:1; border-radius:var(--r-l); background:var(--bleu-nuit); display:grid; place-items:center; position:relative; overflow:hidden; }
.page-tete-pictogramme::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg, var(--bleu) 50%, var(--rouge) 50%); }
.page-tete-pictogramme .ic{ width:42%; height:42%; color:#fff; stroke-width:1.2; }
.page-tete-pictogramme.flamme .ic{ color:#FFB3B5; }
@media (max-width:860px){
  .page-tete-grille{ grid-template-columns:1fr; }
  .page-tete-visuel,.page-tete-pictogramme{ display:none; }
}
@media (max-width:560px){ .page-tete .hero-actions .btn{ width:100%; } }

.fil{ font-size:.86rem; color:var(--ardoise); }
.fil ol{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; }
.fil li{ display:inline-flex; align-items:center; gap:.5rem; }
.fil li + li::before{ content:'/'; color:#A9B6C3; }
.fil a{ color:var(--bleu-700); font-weight:600; }
.fil a:hover{ text-decoration:underline; text-underline-offset:3px; }
.fil [aria-current]{ color:var(--encre); font-weight:600; }

/* ---------- Mise en page contenu + colonne ---------- */
.mise-en-page{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2.5rem, 1rem + 4vw, 5rem); align-items:start; }
.colonne{ position:sticky; top:7rem; display:grid; gap:1.25rem; }
.colonne .carte-contact{ position:static; padding:1.8rem; }
.colonne .carte-contact h2{ font-size:1.6rem; margin:.9rem 0 .7rem; }
.colonne .coordonnees{ margin-top:1.4rem; }
.colonne-liens{ border:1px solid var(--ligne); border-radius:var(--r-l); padding:1.4rem 1.5rem; background:#fff; }
.colonne-liens h2{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ardoise); margin-bottom:.6rem; }
.colonne-liens a{ display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--ligne); font-weight:600; font-size:.95rem; }
.colonne-liens li:last-child a{ border-bottom:0; }
.colonne-liens a:hover{ color:var(--bleu-700); }
.colonne-liens a[aria-current]{ color:var(--bleu-700); }
@media (max-width:980px){ .mise-en-page{ grid-template-columns:1fr; } .colonne{ position:static; } }

/* ---------- Texte éditorial ---------- */
.prose{ max-width:46rem; }
.prose > * + *{ margin-top:1.1rem; }
.prose h2{ font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-top:3rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.25rem; margin-top:2rem; }
.prose p,.prose li{ color:#2B3A49; }
.prose a{ color:var(--bleu-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose ul,.prose ol{ display:grid; gap:.6rem; }
.prose ul li{ position:relative; padding-left:1.6rem; }
.prose ul li::before{ content:''; position:absolute; left:0; top:.68em; width:12px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--bleu) 50%, var(--rouge) 50%); }
.prose ol{ counter-reset:liste; }
.prose ol li{ position:relative; padding-left:2.2rem; counter-increment:liste; }
.prose ol li::before{ content:counter(liste); position:absolute; left:0; top:.1rem; width:1.55rem; height:1.55rem; border-radius:50%; background:var(--bleu-eau); color:var(--bleu-700); font-weight:700; font-size:.85rem; display:grid; place-items:center; }
.prose strong{ color:var(--bleu-nuit); }
.encadre{ background:var(--bleu-eau); border-radius:var(--r-m); padding:1.3rem 1.5rem 1.3rem 1.6rem; position:relative; overflow:hidden; }
.encadre::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--bleu) 50%, var(--rouge) 50%); }
.encadre p + p{ margin-top:.6rem; }
.encadre .encadre-titre{ font-weight:700; color:var(--bleu-nuit); }
.encadre.alerte-encadre{ background:#FDF1F1; }
.prose .faq-liste{ margin-top:1.4rem; }
.faq-liste details{ border-top:1px solid var(--ligne); }
.faq-liste details:last-child{ border-bottom:1px solid var(--ligne); }
.faq-liste summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; font-weight:700; color:var(--bleu-nuit); }
.faq-liste summary::-webkit-details-marker{ display:none; }
.faq-liste summary .ic{ color:var(--bleu); transition:transform .25s var(--ease); }
.faq-liste details[open] summary .ic{ transform:rotate(45deg); }
.faq-liste details > div{ padding:0 2rem 1.3rem 0; color:var(--ardoise); }
.faq-liste details > div p + p{ margin-top:.6rem; }
.prose .aide{ font-size:.9rem; color:var(--ardoise); font-style:italic; }
.article-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; font-size:.9rem; color:var(--ardoise); margin-top:1rem; }

/* ---------- Cartes de services / articles ---------- */
.cartes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; }
.carte-lien{ display:flex; flex-direction:column; gap:.7rem; background:#fff; border:1px solid var(--ligne); border-radius:var(--r-l); padding:1.6rem; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease); position:relative; }
.carte-lien:hover{ border-color:#BCD3E8; box-shadow:var(--ombre-m); transform:translateY(-2px); }
.carte-lien .pastille{ width:48px; height:48px; border-radius:12px; }
.carte-lien.flamme .pastille{ background:#FBECEC; color:var(--rouge); }
.carte-lien h3{ font-size:1.2rem; }
.carte-lien p{ color:var(--ardoise); font-size:.97rem; }
.carte-lien .lien-fleche{ margin-top:auto; padding-top:.4rem; }
.carte-lien .categorie{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bleu-700); }
@media (max-width:980px){ .cartes{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .cartes{ grid-template-columns:1fr; } }

/* ---------- Photos dans les pages ---------- */
.photos-page{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; margin-top:1.4rem; }
.photos-page.deux{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.galerie.grille{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:980px){ .galerie.grille{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){
  .photos-page,.photos-page.deux{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; }
  .galerie.grille{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); overflow:visible; margin-inline:0; padding-inline:0; gap:.8rem; }
  .galerie.grille .chantier{ flex:none; }
  .chantier figcaption strong{ font-size:.92rem; }
}
.carnet + .carnet{ margin-top:clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.carnet-tete{ display:flex; justify-content:space-between; align-items:end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.carnet-tete h2{ font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.carnet-tete p{ color:var(--ardoise); max-width:36rem; }
.compte{ font-size:.85rem; font-weight:700; color:var(--bleu-700); background:var(--bleu-eau); padding:.35rem .75rem; border-radius:999px; }

/* ---------- Bandeau d'appel compact ---------- */
.section-appel{ padding-bottom:0; }

/* ---------- Formulaire ---------- */
.formulaire{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r-l); padding:clamp(1.4rem, 1rem + 2vw, 2.6rem); box-shadow:var(--ombre-s); }
.formulaire fieldset{ border:0; margin:0; padding:0; }
.formulaire fieldset + fieldset{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--ligne); }
/* Légende flottante : elle se place dans le contenu du fieldset, sous le trait de séparation. */
.formulaire legend{ float:left; width:100%; font-size:1.25rem; font-weight:700; color:var(--bleu-nuit); padding:0; margin-bottom:1.2rem; display:flex; align-items:center; gap:.7rem; }
.formulaire legend + *{ clear:both; }
.formulaire legend .num{ width:1.9rem; height:1.9rem; border-radius:50%; background:var(--bleu-nuit); color:#fff; display:grid; place-items:center; font-size:.9rem; flex:none; }
.champs{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.champ{ display:flex; flex-direction:column; gap:.4rem; }
.champ.large{ grid-column:1 / -1; }
.champ label,.champ .etiquette-champ{ font-weight:600; font-size:.95rem; color:var(--bleu-nuit); }
.champ .requis{ color:var(--rouge); }
.champ .aide{ font-size:.85rem; color:var(--ardoise); }
.champ input,.champ select,.champ textarea{
  font:inherit; font-size:1rem; color:var(--encre); background:#fff; border:1.5px solid #C9D4DF; border-radius:10px;
  padding:.8rem .95rem; min-height:50px; width:100%; transition:border-color .2s, box-shadow .2s;
}
.champ textarea{ min-height:150px; resize:vertical; }
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-color:var(--bleu); box-shadow:0 0 0 4px rgba(26,109,174,.15); }
.champ input[type=file]{ padding:.65rem; background:var(--papier); cursor:pointer; }
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{ border-color:var(--rouge); }
.message-erreur{ color:var(--rouge-700); font-size:.88rem; font-weight:600; }
.choix{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.7rem; }
.choix label{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; border:1.5px solid #C9D4DF; border-radius:12px; cursor:pointer; font-weight:600; transition:border-color .2s, background .2s; }
.choix input{ accent-color:var(--rouge); width:18px; height:18px; flex:none; margin:0; }
.choix label:hover{ border-color:var(--bleu); }
.choix label:has(input:checked){ border-color:var(--bleu-nuit); background:var(--bleu-eau); }
.consentement{ display:flex; gap:.8rem; align-items:flex-start; margin-top:1.6rem; font-size:.93rem; color:var(--ardoise); }
.consentement input{ width:20px; height:20px; margin-top:.15rem; flex:none; accent-color:var(--bleu-nuit); }
.consentement a{ color:var(--bleu-700); font-weight:600; text-decoration:underline; }
.formulaire-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.8rem; }
.formulaire-actions .note{ font-size:.88rem; color:var(--ardoise); }
.formulaire .btn[disabled]{ opacity:.6; cursor:wait; }
.piege{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.mentions-formulaire{ margin-top:1.4rem; font-size:.84rem; color:var(--ardoise); line-height:1.55; }
.mentions-formulaire a{ color:var(--bleu-700); text-decoration:underline; }
@media (max-width:640px){ .champs{ grid-template-columns:1fr; } .formulaire-actions .btn{ width:100%; } }

.alerte{ border-radius:var(--r-m); padding:1rem 1.2rem; font-weight:600; display:flex; gap:.8rem; align-items:flex-start; }
.alerte .ic{ margin-top:.2rem; }
.alerte-succes{ background:#E8F5EE; color:#1E6B45; }
.alerte-erreur{ background:#FDECEC; color:var(--rouge-700); }
.alerte-info{ background:var(--bleu-eau); color:var(--bleu-nuit); }
.alerte[hidden]{ display:none; }
.formulaire .alerte{ margin-bottom:1.6rem; }

/* ---------- Pages légales : informations à compléter ---------- */
.a-completer{ display:inline-block; background:#FFF4D6; color:#7A5300; border:1px dashed #D9A400; border-radius:6px; padding:0 .45rem; font-weight:700; font-size:.92em; }

/* ---------- 404 ---------- */
.page-404{ text-align:center; padding-block:var(--section); }
.page-404 .code{ font-size:clamp(4rem, 3rem + 6vw, 8rem); font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--bleu-nuit); }
.page-404 .code span{ color:var(--rouge); }
.page-404 p{ color:var(--ardoise); max-width:32rem; margin:1rem auto 2rem; }
.page-404 .hero-actions{ justify-content:center; }