/* FD Service — feuille de style unique.

   Identité : noir, blanc, et le vert FD réservé à l'appel téléphonique. Aucune autre teinte.
   Titres en Anton (capitales condensées), texte en Archivo.
   Les sections alternent en bandes blanches et noires, coupées net (classes .tone-light et
   .tone-dark posées par build.py). Chaque bande redéfinit les variables de couleur : les
   composants n'ont donc pas à savoir sur quel fond ils se trouvent.
   L'en-tête, les hauts de page en photo et le pied de page sont toujours noirs (.dark). */
@font-face{font-family:"Anton";src:url("/fonts/anton-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* Marque */
  --black:#0a0a0a;--white:#fff;--green:#8bff2e;--green-hover:#a6ff5e;
  /* Bande blanche (valeurs par défaut) */
  --bg:#fff;--surface:#f4f4f4;--text:#0a0a0a;--text-2:#333;--muted:#5e5e5e;
  --rule:#dedede;--rule-strong:#0a0a0a;--accent-text:#1d6a08;--field-border:#8c8c8c;
  /* Surfaces de marque, toujours noires */
  --d-bg:#0a0a0a;--d-text:#fff;--d-text-2:#d6d6d6;--d-muted:#a6a6a6;--d-rule:#2b2b2b;
  --max:1200px;--gutter:24px;--r:4px;
  --display:"Anton","Archivo",Impact,sans-serif;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.tone-light,.tone-dark{background:var(--bg);color:var(--text)}
.tone-dark{
  color-scheme:dark;
  --bg:#0a0a0a;--surface:#161616;--text:#f4f4f4;--text-2:#d6d6d6;--muted:#a6a6a6;
  --rule:#2b2b2b;--rule-strong:#5a5a5a;--accent-text:#8bff2e;--field-border:#5a5a5a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:var(--green)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--white);color:var(--black);padding:10px 14px;border-radius:var(--r)}
.skip:focus{top:8px}
.arrow{flex:none}

/* Titres */
h1,h2,.tel-xl,.tel-lg,.dep-n,.row-t{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:1.1;text-wrap:balance;max-width:20ch}
h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.1;text-wrap:balance}
h3{font-size:1.15rem;font-weight:700;line-height:1.3}
.kicker,.hero-call-k,.post-k,.panel-h{font-size:.8rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text)}

/* Surfaces de marque : toujours noires */
.dark{background:var(--d-bg);color:var(--d-text)}
.dark .kicker{color:var(--green)}
.dark a{color:var(--d-text)}

/* En-tête */
.hdr{position:sticky;top:0;z-index:70;background:rgba(10,10,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--d-rule)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;min-height:44px;gap:10px;color:var(--d-text);text-decoration:none;margin-right:auto}
.logo b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.01em;line-height:1.1}
.logo small{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);white-space:nowrap}
#menu ul{display:flex;gap:2px}
#menu a{display:block;padding:12px 11px;color:var(--d-text-2);text-decoration:none;font-weight:500;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
#menu a:hover{color:var(--d-text)}
#menu a[aria-current="page"]{color:var(--d-text);box-shadow:inset 0 -2px 0 var(--green)}
.menu-btn{display:none;width:48px;height:48px;background:none;border:1px solid #444;border-radius:var(--r);cursor:pointer;align-items:center;justify-content:center}
.bars,.bars::before,.bars::after{display:block;width:22px;height:2px;background:var(--d-text);content:""}
.bars{position:relative}.bars::before{position:absolute;top:-7px}.bars::after{position:absolute;top:7px}

/* Boutons : un seul bouton plein, celui qui appelle */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 26px;border-radius:999px;font:700 1rem/1.2 var(--font);text-decoration:none;border:1.5px solid var(--rule-strong);cursor:pointer;text-align:center}
.btn-call,.dark a.btn-call{background:var(--green);color:var(--black);border-color:var(--green)}
.btn-call:hover{background:var(--green-hover);border-color:var(--green-hover)}
.btn-line{background:transparent;color:var(--text)}
.btn-line:hover{background:var(--text);color:var(--bg)}
.dark .btn-line{color:var(--d-text);border-color:#6a6a6a}
.dark .btn-line:hover{background:var(--d-text);color:var(--black);border-color:var(--d-text)}
.hdr .btn{min-height:44px;padding:8px 18px;font-size:.95rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Haut de page */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--rule)}
.hero-main{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px 72px;align-items:end}
.hero-call{display:grid;gap:10px;justify-items:start;border-top:1.5px solid var(--rule-strong);padding-top:18px}
.tel-lg{padding:5px 0;font-size:clamp(2rem,3.3vw,2.75rem);line-height:1.1;color:var(--text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.tel-lg:hover{text-decoration:underline;text-decoration-thickness:3px}
.hours{display:grid;gap:4px;margin-bottom:10px;color:var(--muted);font-size:.98rem}
.hours b{color:var(--text);font-weight:700}
.lead{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.5;color:var(--text-2);max-width:58ch}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px}
.crumbs a{display:inline-block;padding:14px 0;margin:-14px 0;color:var(--muted)}

/* Pages intérieures : photo d'ambiance derrière le titre, toujours sombre */
.hero-photo{position:relative;isolation:isolate;overflow:hidden;border-bottom:0;padding:96px 0 72px}
.hero-bg{position:absolute;inset:0;z-index:-1}
/* Le sujet des photos est à gauche : on les retourne pour le placer à droite, hors du titre. */
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.8) 45%,rgba(10,10,10,.5) 100%)}
.dark .lead{color:var(--d-text-2)}
.dark .crumbs ol,.dark .crumbs a{color:var(--d-muted)}
.dark .tel-lg{color:var(--d-text)}
.dark .hours{color:var(--d-muted)}
.dark .hours b{color:var(--d-text)}
.dark .hero-call{border-top-color:#6a6a6a}
.dark .hero-call-k{color:var(--green)}

/* Accueil : photo plein écran, toujours sombre */
.hero-dark{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 0;border-bottom:0;color:var(--d-text);
  background:linear-gradient(180deg,rgba(10,10,10,.3) 0%,rgba(10,10,10,.6) 45%,#0a0a0a 100%),url("/img/hero-nuit.jpg") center/cover no-repeat #0a0a0a}
.hero-dark .wrap{width:100%}
.hero-dark h1{font-size:clamp(2.9rem,8.4vw,7rem);max-width:14ch}
.hero-dark .lead{color:var(--d-text-2)}
.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid #444}
.points li{padding:22px 24px 26px 0;font-size:.95rem;line-height:1.4;color:var(--d-muted)}
.points b{display:block;color:var(--d-text);font-size:1.05rem;font-weight:700}

/* Sections */
.sec{padding:88px 0}
/* Un filet seulement entre deux bandes de même couleur ; sinon la coupe suffit. */
.tone-light+.tone-light,.tone-dark+.tone-dark{border-top:1px solid var(--rule)}
.sec h2{margin-bottom:32px}
.sec-intro{max-width:60ch;color:var(--muted);margin-bottom:36px}
.sec h2+.sec-intro{margin-top:-18px}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 64px;align-items:start}
.split-h{position:sticky;top:104px}
.split-h h2{margin-bottom:0;font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.14}
.split-h h2+.sec-intro{margin:14px 0 0}
.prose{max-width:66ch;display:grid;gap:18px;font-size:1.1rem;line-height:1.62}

/* Métiers : trois panneaux numérotés */
.sec.sec-duo{padding:0;border-top:0}
.sec-duo .wrap{max-width:none;padding:0}
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:metier}
.panel{padding:72px 44px 64px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.panel:first-child{padding-left:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.panel:last-child{padding-right:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));border-right:0}
.panel-img{order:-1;margin-bottom:14px}
.panel-img img{display:block;width:100%;height:230px;object-fit:cover;object-position:left center;border-radius:var(--r);background:var(--surface)}
.panel::before{counter-increment:metier;content:"0" counter(metier);font-family:var(--display);font-size:1.1rem;letter-spacing:.06em;color:var(--muted)}
.panel h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0}
.panel-h+p{max-width:44ch;color:var(--muted);font-size:1.08rem;line-height:1.5}
.panel-more{margin-top:auto;padding-top:28px}
.panel-more a{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-weight:700;color:var(--text);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:6px}
.panel-more a:hover{color:var(--accent-text)}

/* Liste d'entrées */
.index{border-top:1.5px solid var(--rule-strong)}
.index li{border-bottom:1px solid var(--rule)}
.index a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) 32px;gap:24px;align-items:baseline;padding:22px 0;color:var(--text);text-decoration:none}
.row-t{font-size:1.6rem;line-height:1.15}
.row-d{color:var(--muted)}
.index .arrow{justify-self:end;align-self:center}
.index a:hover .row-t{color:var(--accent-text)}

/* Conseils : cartes d'articles et page article */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.post a{display:flex;flex-direction:column;gap:10px;color:var(--text);text-decoration:none}
.post img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);background:var(--surface);margin-bottom:6px}
.post h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
.post a:hover h3{text-decoration:underline;text-decoration-thickness:2px}
.post p:last-child{color:var(--muted);font-size:.96rem}
.posts-more{margin-top:36px;font-weight:700}
.posts-more a{display:inline-block;padding:12px 0}
.hero-art{border-bottom:0;padding-bottom:8px}
.hero-art .wrap,[data-page="article"] .sec:not(.band) .wrap{max-width:820px}
.hero-art h1{max-width:none;font-size:clamp(2.2rem,5.2vw,4rem)}
.art-fig{margin:36px 0 0}
.art-fig img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--surface)}
.art-fig figcaption{margin-top:8px;font-size:.82rem;color:var(--muted)}
[data-page="article"] .sec:not(.band){padding:36px 0;border-top:0}
[data-page="article"] .sec:not(.band) h2{margin-bottom:16px;font-size:clamp(1.5rem,2.6vw,2rem)}

/* Cartes, étapes, listes */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px}
.card{border-top:1.5px solid var(--rule-strong);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.card p{color:var(--muted)}
.card .more{margin-top:auto;padding-top:6px;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:etape}
.steps li{counter-increment:etape}
.steps li::before{content:counter(etape);display:block;font-family:var(--display);font-size:4.2rem;line-height:1;color:var(--text);border-bottom:1.5px solid var(--rule-strong);padding-bottom:14px;margin-bottom:18px}
.steps h3{margin-bottom:8px;font-size:1.3rem}
.steps p{color:var(--muted)}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.ticks li{padding:18px 0 30px;border-top:1.5px solid var(--rule-strong);color:var(--muted)}
.ticks strong{display:block;color:var(--text);font-size:1.15rem;font-weight:700;margin-bottom:2px}

/* Questions */
.faq{border-top:1.5px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.12rem;padding:20px 44px 20px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:1.6rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details div{padding:0 0 24px;color:var(--text-2);max-width:64ch}

/* Tableau */
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{border-bottom:1.5px solid var(--rule-strong);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tbody th{font-weight:700}
.note{max-width:66ch;margin-top:16px;font-size:.92rem;color:var(--muted)}

/* Communes */
.cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.dep h3{display:flex;align-items:baseline;gap:12px;font-size:1.5rem;border-bottom:1.5px solid var(--rule-strong);padding-bottom:12px;margin-bottom:16px}
.dep-n{font-size:2.4rem;line-height:1}
.dep ul{columns:2;column-gap:28px}
.dep li{padding:5px 0;break-inside:avoid;color:var(--muted)}
.dep a{font-weight:700;color:var(--text)}

/* Bandeau final : le numéro */
.sec.band{padding:96px 0 104px}
.callout{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.callout h2{font:600 1rem/1.3 var(--font);letter-spacing:.1em;color:var(--muted);margin:0}
.tel-xl{padding:6px 0;font-size:clamp(2.05rem,9.6vw,8rem);line-height:1.05;color:var(--accent-text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.tel-xl:hover{color:var(--text)}
.callout p{color:var(--muted);max-width:60ch;font-size:1.1rem}
.callout p a{color:var(--text)}

/* Formulaire */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field-wide{grid-column:1/-1}
.field label{font-weight:600;font-size:.95rem}
.opt{font-weight:400;color:var(--muted)}
.hint{font-size:.85rem;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--field-border);border-radius:var(--r);padding:12px 14px;min-height:52px;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--text)}
textarea{min-height:128px;resize:vertical}
input[aria-invalid="true"]{border-color:#c0392b;border-width:2px}
.check{flex-direction:row;align-items:flex-start;gap:12px}
.check input{width:24px;min-height:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--accent-text)}
.check input[aria-invalid="true"]{outline:2px solid #c0392b;outline-offset:2px}
.check label{font-weight:400}
.hp{position:absolute;left:-9999px}
.form-msg{margin-top:12px;font-weight:600}
.form-msg:empty{display:none}
.form-ok{border-top:1.5px solid var(--rule-strong);padding-top:20px}

/* Pied de page */
.ftr{background:var(--d-bg);color:var(--d-muted);padding:56px 0 36px;font-size:.92rem;border-top:1px solid var(--d-rule)}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:28px}
.ftr-h{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--d-text);margin-bottom:12px}
.ftr-name{font-weight:800;font-size:1.15rem;color:var(--d-text)}
.ftr-id{display:grid;gap:12px;align-content:start;max-width:34ch}
.ftr a{color:var(--d-text-2);text-decoration:none;display:inline-block;padding:4px 0}
.ftr a:hover{color:var(--green);text-decoration:underline}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--d-rule);font-size:.85rem}
.linklike{background:none;border:0;padding:4px 0;font:inherit;color:var(--d-text-2);text-decoration:underline;cursor:pointer}
.callbar{display:none}

/* Bandeau cookies (affiché seulement si la mesure d'audience est activée) */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:720px;margin:0 auto;background:var(--bg);color:var(--text);border:1.5px solid var(--rule-strong);border-radius:var(--r);padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.cookies p{flex:1 1 300px;font-size:.92rem}
.cookies div{display:flex;gap:10px}
.cookies .btn{min-height:46px;padding:8px 18px}

/* En-tête compact et zones tactiles : téléphones, tablettes et petits écrans (le menu complet demande 1190 px) */
@media (max-width:1240px){
  .logo{order:1}
  .hdr .btn{order:2}
  .menu-btn{display:inline-flex;order:3}
  #menu{order:4;display:none;flex-basis:100%;border-top:1px solid var(--d-rule);padding:4px 0 14px}
  .hdr-in{flex-wrap:wrap;gap:0 12px}
  .hdr:has(#menu.open){background:var(--black)}
  #menu.open{display:block;max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
  #menu ul{flex-direction:column;gap:0}
  #menu a{padding:15px 2px;font-size:.9rem;border-bottom:1px solid var(--d-rule)}
  #menu a[aria-current="page"]{box-shadow:none;color:var(--green)}
  .ftr a{padding:12px 0}
  .dep li{padding:8px 0}
  .dep a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (max-width:1020px){
  .split,.hero-grid{grid-template-columns:minmax(0,1fr)}
  .split-h{position:static}
  .hero-call{max-width:420px}
  .cards,.steps,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:minmax(0,1fr)}
  .panel,.panel:first-child,.panel:last-child{padding:52px var(--gutter);border-right:0}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-id{grid-column:1/-1}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .callbar{display:grid;grid-template-columns:2fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--black);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));border-top:1px solid var(--d-rule)}
  .callbar .btn{min-height:50px}
  .cookies{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:680px){
  :root{--gutter:20px}
  .hdr .btn{width:48px;min-height:48px;padding:0}
  .logo small{font-size:.69rem;letter-spacing:.03em}
  .hdr .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sec{padding:56px 0}
  .hero{padding:36px 0 40px}
  .hero-photo{padding:48px 0 44px}
  .hero-dark{min-height:calc(100svh - 150px);padding:72px 0 0;
    background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.72) 45%,#0a0a0a 100%),url("/img/hero-nuit.jpg") 8% 50%/cover no-repeat #0a0a0a}
  .points{margin-top:40px}
  .points li{padding:14px 12px 14px 0}
  .cards,.steps,.cities,.form,.ticks,.posts{grid-template-columns:minmax(0,1fr)}
  .steps{gap:0}
  .steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;border-top:1px solid var(--rule);padding:18px 0}
  .steps li::before{grid-row:1/3;font-size:2.2rem;border:0;padding:0;margin:0}
  .steps h3{font-size:1.15rem}
  .index a{grid-template-columns:minmax(0,1fr) 24px;gap:4px 12px}
  .row-d{grid-column:1;grid-row:2}
  .index .arrow{grid-row:1/3}
  .row-t{font-size:1.35rem}
  .ctas{width:100%}
  .ctas .btn{flex:1 1 100%}
  .sec.band{padding:64px 0 72px}
}
@media print{.hdr nav,.menu-btn,.callbar,.cookies{display:none}}
@media (max-width:359px){
  .logo small{display:none}
  .logo b{font-size:1.02rem}
}