/* Phillias 32 — pages thématiques (05/09/2026).
   Aucune couleur nouvelle : tout vient de tokens-v3.css. Cette feuille ne fait
   qu'ajouter le fil d'Ariane, le bandeau visuel et la rangée de boutons hors du hero. */

/* Hero d'une page thématique : une seule colonne, pas de bloc vidéo à droite. */
.hero--theme{min-height:auto;padding-block:clamp(46px,7vh,88px)}
.hero--theme .hero__in{grid-template-columns:minmax(0,1fr)}
.hero--theme h1{max-width:15ch}
.hero--theme .lead{max-width:58ch}
.hero--theme figure.hero__fond{margin:0}
.hero__legende{position:absolute;right:clamp(14px,3vw,42px);bottom:14px;padding:6px 9px;
  border:1px solid var(--v3-line);border-radius:var(--v3-radius-small);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--v3-muted);background:var(--v3-graphite-deep)}

/* Fil d'Ariane */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 20px;padding:0;list-style:none;
  font-size:.79rem;font-weight:500;letter-spacing:.05em;color:var(--v3-muted)}
.fil li{display:flex;align-items:center;gap:9px}
.fil li+li::before{content:"\203A";color:var(--v3-red-hot);font-weight:700}
.fil a{color:var(--v3-muted);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover,.fil a:focus-visible{color:var(--v3-ink);border-bottom-color:var(--v3-red)}
.fil [aria-current]{color:var(--v3-ink)}

/* Bandeau visuel pleine largeur */
.bandeau{margin:0;position:relative;border:1px solid var(--v3-line);border-radius:var(--v3-radius);
  overflow:hidden;box-shadow:var(--v3-shadow);background:var(--v3-graphite-deep)}
.bandeau img{display:block;width:100%;height:auto}
.bandeau figcaption{padding:13px 18px;font-size:.83rem;color:var(--v3-muted);
  background:color-mix(in srgb,var(--v3-graphite-deep) 88%,transparent);border-top:1px solid var(--v3-line)}
.sec--clair .bandeau{border-color:var(--v3-line-dark)}
.sec--clair .bandeau figcaption{color:var(--v3-muted-dark);background:var(--v3-paper-soft);
  border-top-color:var(--v3-line-dark)}

/* Rangée de boutons réutilisable hors du hero */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Texte local réellement spécifique aux pages de ville. */
.texte-long{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;
  margin:0 0 clamp(34px,5vh,58px);max-width:92ch}
.texte-long p{margin:0;line-height:1.72}
.liens-freres{max-width:72ch;line-height:1.72}
.liens-freres a{font-weight:700;text-underline-offset:3px}

/* Liste de communes : même grammaire que .formats, en plus compact */
.communes{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.communes li{border:1px solid var(--v3-line);border-radius:var(--v3-radius-small);
  background:var(--v3-surface);padding:9px 14px;font-size:.92rem;font-weight:500;color:var(--v3-ink)}
.sec--clair .communes li{border-color:var(--v3-line-dark);background:#fff;color:var(--v3-ink-dark)}

/* Texte des cartes sur fond clair : marge AA conservée même sur les transitions rendues. */
.sec--clair .etape p{color:#191622}

@media (max-width:520px){
  .actions .btn{width:100%}
  .texte-long{grid-template-columns:1fr}
}

/* Respiration entre un titre et son chapô. Le soulignement rouge de .brille descend
   sous la ligne de base : sans cette marge il vient toucher le paragraphe qui suit. */
h2 + .lead{margin-top:.5em}
.bandeau + .faq,.bandeau + .communes{margin-top:28px}
.led h2{margin-bottom:.1em}

/* La galerie de l'accueil est calée sur six vignettes (la 1re et la 6e occupent deux
   colonnes). Ici il y en a quatre : on neutralise le doublement, sinon la dernière
   se retrouve seule sur une deuxième rangée. */
.galerie figure:nth-child(1),.galerie figure:nth-child(6){grid-column:auto}