/*
 * psub-v3 — REPRISE de l'orchestrateur (02/10/2026) : héros, formulaire, en-tête.
 * Chargée APRÈS app.css. Le designer ne touche pas à ce fichier.
 */

/* ---------- Formulaire : un seul cadre, fieldset neutralisé ---------- */
.formulaire fieldset{border:0;padding:0;margin:0;min-width:0}
.formulaire legend{padding:0;float:left;width:100%}
.formulaire legend + *{clear:both}
.formulaire{grid-template-columns:20px minmax(0,1fr);gap:22px;padding:30px 30px 26px;box-shadow:var(--ombre)}
.formulaire-rail{padding-block:6px}
.rail-ligne{min-height:0}
.rail-libelle{display:none}
.fs-question{font-size:30px;line-height:1;margin:0 0 20px}
.fs-option{font-size:16px;line-height:1.25;color:var(--basalte);cursor:pointer;box-shadow:0 1px 2px rgba(30,36,40,.05);transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease}
.fs-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,36,40,.10)}
.fs-option:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fs-option-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--vert-pale)}
.fs-option-icone svg{width:24px;height:24px}
.fs-etape-communes .fs-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto;padding:2px}
.fs-etape-communes .fs-option{min-height:44px;padding:8px 10px;font-size:14px;justify-content:center;text-align:center}
.fs-etape[data-step="ouvrage"] .fs-options + .fs-sousquestion + .fs-options .fs-option{min-height:48px;justify-content:center;font-size:14px;padding:10px}
.fs-etape-photos .fs-option{min-height:72px}
.fs-option-photo{width:64px;height:48px}
.champ input,.champ textarea{min-height:52px}

/* Variante HÉROS : tuiles en colonne (icône au-dessus du texte) */
.formulaire--heros .fs-options{gap:12px}
.formulaire--heros [data-step="symptome"] .fs-option{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:124px;padding:16px;font-size:17px;font-weight:700}

/* Variante COLONNE (pages ville) et COMPACTE : une tuile par ligne, lisible */
.formulaire--colonne,.formulaire--compact{padding:24px}
.formulaire--colonne .fs-options,.formulaire--compact .fs-options{grid-template-columns:1fr}
.formulaire--colonne [data-step="symptome"] .fs-option,.formulaire--compact [data-step="symptome"] .fs-option{min-height:64px}
.formulaire--colonne .fs-question,.formulaire--compact .fs-question{font-size:26px}
.formulaire--colonne .fs-champs,.formulaire--compact .fs-champs{grid-template-columns:1fr}
.formulaire--compact .fs-etape-communes .fs-options{grid-template-columns:1fr 1fr}

/* ---------- Héros de l'accueil ---------- */
.hero{background:linear-gradient(90deg,var(--pierre) 0%,var(--pierre) 58%,var(--blanc) 58%);padding-block:40px 36px}
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;min-height:620px}
.hero-texte{padding-bottom:0;align-self:center}
.hero-badge{font-size:15px;color:var(--schiste);margin-bottom:22px}
.hero h1{font-size:clamp(48px,5.4vw,96px);line-height:.9;letter-spacing:-.015em;margin-bottom:24px;max-width:12.5ch}
.hero .chapo{font-size:20px;line-height:1.5;max-width:30em;color:var(--schiste)}
.hero-reassurances{gap:10px;padding:0;margin:26px 0 0;list-style:none}
.hero-reassurances li{background:var(--blanc);border-radius:999px;padding:9px 16px 9px 14px;font-size:14px;color:var(--basalte);box-shadow:0 1px 2px rgba(30,36,40,.06)}
.hero-reassurances li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent);margin:0 9px 1px 0;align-self:center}

.hero-visuel{min-height:620px}
.hero-disque{width:min(640px,44vw);right:max(-120px,-7vw);top:50%;translate:0 -50%;border:12px solid var(--blanc);box-shadow:0 30px 80px rgba(30,36,40,.22)}
.hero-disque img{position:absolute;left:0;top:-20%;width:140%;height:140%;max-width:none;object-fit:cover}
.carte-formulaire-flottante{position:absolute;left:0;top:50%;translate:0 -50%;width:470px;max-width:none;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
.carte-formulaire-flottante .formulaire{box-shadow:0 2px 6px rgba(30,36,40,.06),0 30px 70px rgba(30,36,40,.24)}
.fil-sonde-hero{left:40px;top:-40px;height:calc(50% - 160px);min-height:40px}
.hero + p,.hero p.conteneur{margin-top:0}

@media (min-width:1700px){
  .hero-inner{min-height:700px}
  .hero-visuel{min-height:700px}
  .carte-formulaire-flottante{width:500px}
  .hero-disque{width:min(760px,42vw)}
}

/* Tablette et mobile : texte, puis disque à demi hors cadre, puis carte */
@media (max-width:1180px){
  .hero{background:var(--pierre);padding-block:28px 32px}
  .hero-inner{grid-template-columns:1fr;min-height:0;gap:8px}
  .hero h1{max-width:13ch}
  .hero-visuel{min-height:0;display:flex;flex-direction:column}
  .hero-disque{position:relative;right:auto;top:auto;translate:none;width:min(420px,80vw);align-self:flex-end;margin-right:-60px;margin-top:-10px;border-width:8px}
  .carte-formulaire-flottante{position:relative;top:auto;translate:none;width:auto;margin-top:-90px}
}
@media (max-width:700px){
  .hero{padding-block:8px 24px}
  .hero-inner{display:flex;flex-direction:column;gap:0}
  .hero-visuel{display:contents}
  .fil-sonde-hero,.hero-badge{display:none}
  .hero-disque{order:-1;position:relative;right:auto;top:auto;translate:none;width:176px;align-self:flex-end;margin:0 -52px 6px 0;border-width:6px}
  .hero-texte{order:0}
  .hero h1{font-size:44px;max-width:none;margin-bottom:12px}
  .hero .chapo{font-size:17px;margin-bottom:0}
  .hero-reassurances{margin-top:14px;gap:8px}
  .hero-reassurances li{padding:7px 12px;font-size:13px}
  .carte-formulaire-flottante{order:1;position:relative;width:auto;margin-top:20px}
  .formulaire{padding:22px 18px}
  .formulaire--heros [data-step="symptome"] .fs-options{grid-template-columns:1fr 1fr}
  .formulaire--heros [data-step="symptome"] .fs-option{min-height:112px;font-size:15px;padding:14px}
  .fs-question{font-size:26px}
  .fs-etape-communes .fs-options{grid-template-columns:1fr 1fr}
}

/* ---------- En-tête : bouton jamais sur plusieurs lignes ---------- */
.entete .bouton{white-space:nowrap;gap:0}
.entete .bouton .libelle-long{margin-right:.28em}
.marque{flex:none}
@media (max-width:700px){
  .entete-inner{gap:12px;height:64px;padding-inline:16px}
  .entete-cta .bouton{min-height:44px;padding:10px 14px;font-size:15px}
}
@media (max-width:420px){
  .entete-cta .bouton .libelle-long{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fs-option:hover{transform:none}
}

/* Attribut hidden toujours respecté (le display des .champ le battait) */
[hidden]{display:none!important}
.fs-erreur-champ{margin:6px 0 0;color:var(--alerte);font-size:14px;font-weight:600}
.formulaire [aria-invalid="true"]{border-color:var(--alerte)!important}
.formulaire button[disabled]{opacity:.7;cursor:progress}

/* ---------- Mobile : rail horizontal au-dessus, place pour la barre du bas ---------- */
@media (max-width:900px){
  .formulaire{grid-template-columns:minmax(0,1fr);gap:16px}
  .formulaire-rail{flex-direction:row;align-items:center;padding:0;order:-1}
  .rail-ligne{flex:1;height:2px;width:auto;min-height:0}
  .rail-perle{top:50%!important;left:var(--etape-pct,0%);width:24px;height:12px;transform:translate(-50%,-50%)}
  .rail-perle{left:clamp(12px,var(--etape-pct,0%),calc(100% - 12px))}
  body{padding-bottom:76px}
  .fs-nav{flex-wrap:wrap}
}

/* Fond pierre pendant le chargement des photos (jamais de blanc) */
.carte-situation,.panneau-final,.carte-article-photo,.entete-article-photo,.hero-disque,.ville-photo,.entete-rubrique-disque{background-color:var(--pierre)}

/* Contact : le disque coincé entre carte et encadré faisait accident */
.contact-disque{display:none}

/* ---------- Porte de sortie 02/10 ---------- */
.panneau-mobile{transform:none;opacity:0;pointer-events:none;transition:opacity .2s ease;visibility:hidden}
.panneau-mobile.est-ouvert{opacity:1;pointer-events:auto;visibility:visible}
.carte-situation{background-color:var(--basalte)}
.signature-auteur{font-size:14px;color:var(--schiste);margin:10px 0 0}
.signature-auteur a{color:var(--vert-fonce);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auteur-photo{border-radius:999px;object-fit:cover;border:3px solid var(--blanc);box-shadow:0 0 0 2px var(--basalte)}
.suite-rubrique{display:flex;justify-content:center;margin-top:40px}
.suite-rubrique a{display:inline-flex;padding:12px 22px;border-radius:999px;border:1.5px solid rgba(30,36,40,.16);font-weight:700}
@media (max-width:640px){.grille-pastilles-communes{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.grille-pastilles-communes > *{min-width:0}}

/* ---------- Page ville : formulaire dès le premier écran (B-MK-30, BD-0172) ---------- */
.ville-haut{padding-block:36px 64px}
.ville-mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto 1fr;column-gap:48px;align-items:start}
.ville-entete-bloc{grid-column:1;grid-row:1;margin-bottom:28px}
.ville-entete-bloc h1{font-size:clamp(40px,3.6vw,60px);line-height:.95;max-width:16ch;margin-bottom:12px}
.ville-ligne{color:var(--schiste);font-weight:600;margin:0}
.ville-photo{margin:22px 0 0;position:relative}
.ville-photo img{width:100%;height:300px;object-fit:cover;border-radius:var(--r-carte);box-shadow:var(--ombre);background:var(--pierre)}
.ville-photo .tirage-legende{font-size:12px;color:var(--schiste);margin-top:8px}
.ville-corps{grid-column:1;grid-row:2}
.ville-colonne-form{grid-column:2;grid-row:1 / span 2;position:sticky;top:92px}
.ville-form-carte{background:var(--pierre);border-radius:var(--r-carte);padding:20px}
.ville-form-carte .bloc-titre{font-family:var(--f-titre);font-weight:800;font-size:22px;line-height:1.05;margin:4px 6px 14px}
.ville-form-carte .formulaire{box-shadow:var(--ombre)}
@media (max-width:980px){
  .ville-mise-en-page{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .ville-entete-bloc,.ville-corps,.ville-colonne-form{grid-column:1;grid-row:auto}
  .ville-colonne-form{position:static;margin-bottom:32px}
  .ville-photo img{height:200px}
  .ville-entete-bloc{margin-bottom:18px}
}
@media (max-width:700px){
  .ville-haut{padding-top:18px}
  .ville-entete-bloc h1{font-size:36px}
  .ville-photo img{height:150px}
}

/* Accueil mobile : le disque à demi hors cadre ne fait plus défiler la page */
.hero{overflow:clip}
/* Cartes en fond clair (B-CI-05 / I-PL-05) */
.carte-zone-bloc{background:var(--pierre)!important}
.carte-zone .commune-voisine{fill:#D3D5D0;stroke:#B9BCB6}

/* Mobile : rien ne fait défiler latéralement ; disque du héros dans l'écran */
html,body{overflow-x:clip}
@media (max-width:700px){ .hero-disque{margin-right:-8px} }
/* Page ville mobile : titre → formulaire → photo → texte */
.ville-photo{background:none!important}
@media (max-width:980px){
  .ville-entete-bloc{display:contents}
  .ville-entete-bloc > h1,.ville-entete-bloc > .ville-ligne,.ville-entete-bloc > .signature-auteur{order:1;grid-column:1}
  .ville-colonne-form{order:2}
  .ville-photo{order:3;margin:0 0 24px}
  .ville-corps{order:4}
  .ville-entete-bloc > .signature-auteur{margin-bottom:16px}
}
@media (max-width:980px){.ville-mise-en-page{row-gap:0;column-gap:0}.ville-entete-bloc > h1{margin-bottom:8px}.ville-entete-bloc > .ville-ligne{margin-bottom:4px}}

/* ---------- Articles (constat 02/10) ---------- */
.formulaire--compact{grid-template-columns:minmax(0,1fr)!important}
.formulaire--compact .fs-question{font-size:22px;word-break:normal;hyphens:none}
.corps-article h2,.corps-article h3,[id]{scroll-margin-top:100px}
.bloc-auteur-date{font-size:13px;color:var(--schiste);margin:2px 0 8px}
.a-lire-ensuite .grille-tirages{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (max-width:700px){
  .entete-article{padding-block:16px 40px}
  .entete-article h1{font-size:32px}
  .entete-article .chapo{font-size:16px;margin-bottom:12px}
  .entete-article-photo{aspect-ratio:16/9;max-height:190px}
  .entete-article .fil-ariane{font-size:13px;margin-bottom:8px}
  .fil-sonde-court{display:none}
}
@media (max-width:700px){
  .page-contact-haut,.contact-haut,.entete-contact{padding-top:16px!important}
}
@media (max-width:700px){.page-template-page-contact .bande--pierre{padding-top:18px}.page-template-page-contact .ouverture-section .chapo{display:none}.page-template-page-contact .ouverture-section{margin-bottom:12px}}

/* ---------- Blocs comparatifs des articles (remplacent les schémas dessinés) ---------- */
.infographie-cartes{margin:32px 0;padding:24px;background:var(--pierre);border-radius:var(--r-carte)}
.ic-grille{display:grid;gap:12px}
.ic-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ic-5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ic-carte{background:var(--blanc);border-radius:var(--r-tuile);padding:16px 18px;box-shadow:0 1px 2px rgba(30,36,40,.06)}
.ic-titre{font-family:var(--f-titre);font-weight:800;font-size:22px;line-height:1.05;margin:0 0 6px}
.ic-ligne{font-size:15px;line-height:1.45;color:var(--schiste);margin:0 0 10px}
.ic-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--vert-fonce);background:var(--vert-pale);border-radius:999px;padding:4px 12px;margin:0}
.ic-tag.ic-oui{color:#8A2A18;background:#FBE7E3}
.infographie-cartes figcaption{font-size:14px;color:var(--schiste);margin-top:14px}
.ic-surtitre{font-family:var(--f-titre);font-weight:800;font-size:24px;margin:0 0 14px}
.ic-sequence{list-style:none;counter-reset:ic;margin:0;padding:0 0 0 34px;position:relative}
.ic-sequence::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--basalte)}
.ic-sequence li{counter-increment:ic;position:relative;background:var(--blanc);border-radius:var(--r-tuile);padding:12px 16px;margin:0 0 8px;font-size:16px;line-height:1.45}
.ic-sequence li::before{content:counter(ic);position:absolute;left:-34px;top:10px;width:24px;height:24px;border-radius:999px;background:var(--vert);color:var(--basalte);font-weight:800;font-size:13px;display:grid;place-items:center}
@media (max-width:700px){.ic-4{grid-template-columns:1fr}.infographie-cartes{padding:16px}}

/* Logo : pictogramme + nom en vrai texte */
.marque-svg{height:36px;width:36px}
.marque-texte{display:flex;flex-direction:column;line-height:1}
.marque-nom{font-family:var(--f-titre);font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--basalte)}
.marque-lieu{font-size:12px;font-weight:600;color:var(--schiste);margin-top:3px}
.pied .marque-nom,.pied-marque .marque-nom,footer .marque-nom{color:var(--blanc)}
.pied .marque-lieu,.pied-marque .marque-lieu,footer .marque-lieu{color:rgba(255,255,255,.65)}
@media (max-width:420px){.marque-nom{font-size:19px}.marque-lieu{font-size:11px}.marque-svg{height:30px;width:30px}}
span.auteur-photo{display:inline-block;background-size:cover;background-position:center;flex:none}
.fs-option-photo{background-size:cover;background-position:center}

/* ===== Passe v4 — accueil, en-tête, pied (juge visuel 03/10) ===== */
/* Bouton d'en-tête : libellé entier, ou court sur petit écran — jamais tronqué */
.entete .bouton .libelle-long{margin-right:0}
.entete .bouton .libelle-court{display:none}
@media (max-width:420px){
  .entete-cta .bouton .libelle-long{display:none}
  .entete-cta .bouton .libelle-court{display:inline}
}
.hero-credit{font-size:11px;color:var(--encre-douce);margin-top:8px}

/* Mobile : médaillon à côté du titre, carte du formulaire remontée sous le pli de la barre d'onglets */
@media (max-width:700px){
  .hero-inner{position:relative}
  .hero-disque{position:absolute;order:0;top:6px;right:-40px;width:128px;margin:0;border-width:5px;z-index:0}
  .hero-texte{position:relative;z-index:1;padding-top:14px}
  .hero h1{font-size:36px;line-height:1.08;padding-right:84px;margin-bottom:0}
  .hero .chapo{display:none}
  .hero-reassurances{margin-top:12px}
  .carte-formulaire-flottante{margin-top:14px}
  .formulaire{padding:18px 16px}
  .fs-question{font-size:23px}
  .formulaire--heros [data-step="symptome"] .fs-option{min-height:88px;padding:12px}
  .hero-credit{display:none}
}

/* Communes : la carte au-dessus, les noms en pastilles qui passent à la ligne, jamais coupés */
@media (max-width:900px){
  .zone-mise-en-page{grid-template-columns:1fr;gap:22px}
  .grille-pastilles-communes{display:flex;flex-wrap:wrap;gap:8px}
  .pastille-commune{white-space:nowrap;padding:9px 14px}
}

/* Pied de page : colonnes équilibrées, communes sur 3 colonnes en grand écran */
@media (min-width:1100px){
  .pied-haut{grid-template-columns:1.25fr .75fr 2.1fr .8fr}
  .pied-haut .pied-liens[style]{grid-template-columns:repeat(3,1fr)!important}
}