/* Charte BRNSG : Onyx, Glacier et Bleu dragée (guide du logo), angles droits, filets. Tout dérive de tokens.css. */

/* Base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
/* Pas d'overscroll-behavior sur html : il couperait le balayage arrière au trackpad, et le rebond est déjà Onyx (fond du body
   propagé au canevas, color-scheme: dark). */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-0)/var(--leading) var(--font-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 650; letter-spacing: var(--tracking-l); line-height: var(--leading-l); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--bleu); color: var(--onyx); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 90; padding: 12px 16px; background: var(--text); color: var(--onyx); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Titres et textes */
.titre-l, .titre-court, .titre-final { letter-spacing: var(--tracking-xl); line-height: var(--leading-xl); }
.titre-l { font-size: var(--step-3); max-width: 20ch; }
.titre-court { font-size: var(--step-3); }
.titre-final { font-size: var(--step-3); max-width: 14ch; }
.h2 { font-size: var(--step-2); }
.h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; letter-spacing: var(--tracking-m); line-height: var(--leading-m); text-wrap: balance; overflow-wrap: anywhere; }
.lead { max-width: var(--lecture); margin-top: 24px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; text-wrap: pretty; }
.texte-lecture { max-width: var(--lecture); text-wrap: pretty; }
/* Petit texte : un peu plus aéré (approche positive, interlignage 1.5) */
.note, .muted, .secteur, .fil-ariane, .legal, .copy, .field-aide, .field-err, .promesses, .bande-pause, .pres-prix, .defilant-prix, .sommaire { letter-spacing: var(--tracking-s); line-height: 1.5; }
.note, .muted { color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.secteur { color: var(--text-muted); font-size: var(--step--1); }
.lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }

/* Boutons : rectangles, fond plein noir ou bordure de 1 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--bordure); font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease-couleur), color var(--dur-1) var(--ease-couleur), transform var(--dur-1) var(--ease); }
.btn-primary { background: var(--bleu); border-color: var(--bleu); color: var(--onyx); }
.btn-plein { background: var(--text); border-color: var(--text); color: var(--onyx); }
.btn-ghost { background: transparent; color: var(--text); }
/* Appui : le même changement que le survol plus un léger recul, sur tous les appareils, sans transition, dès que le bouton
   est enfoncé ; le relâchement revient en 150 ms. Les survols sont regroupés en fin de feuille, réservés aux vrais pointeurs. */
.btn:active { transition: none; transform: scale(0.98); }
.btn-primary:active { background: transparent; color: var(--bleu); }
.btn-plein:active { background: transparent; color: var(--text); }
.btn-ghost:active { background: var(--text); color: var(--onyx); }
.btn[disabled] { cursor: progress; opacity: .7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions + .note { margin-top: 14px; }
@media (max-width: 480px) { .actions .btn { flex: 1 1 100%; } }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo-haut { fill: var(--glacier); }
.logo-bas { fill: var(--bleu); }
.menu-bouton { min-height: 44px; padding: 8px 16px; background: none; border: 1px solid var(--bordure); cursor: pointer; transition: border-color var(--dur-1) var(--ease-couleur), opacity var(--dur-1) var(--ease); }
.nav-liens { display: flex; align-items: center; gap: 4px; }
.nav-liens a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; text-decoration: none; }
/* Appui sur tout ce qui se presse hors .btn (la surbrillance native au toucher est retirée) : voile immédiat, retour en 150 ms */
.nav-liens a, .footer-liens a, .footer-titre a, .footer-marque a, .lien, .menu-bouton, .logo, .carte-image, .fil-ariane a, .coordonnees a, .legal a, .pres-service, .faq-item summary { transition: opacity var(--dur-1) var(--ease); }
:is(.nav-liens a, .footer-liens a, .footer-titre a, .footer-marque a, .lien, .menu-bouton, .logo, .carte-image, .fil-ariane a, .coordonnees a, .legal a, .pres-service, .faq-item summary, .defilant-nav a, .pres-onglet):active { opacity: 0.6; transition: none; }
.nav-liens a[aria-current] { text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-mobile { display: none; }

.barre-mobile { display: none; }
@media (min-width: 1080px) { .menu-bouton { display: none; } }

/* Petit écran : menu plein écran, les trois pôles dépliés, le bouton principal en bas, fixe */
@media (max-width: 1079px) {
  .header-cta { display: none; }
  .js .nav { display: none; position: fixed; inset: 73px 0 0; z-index: 49; padding: 24px var(--gutter) 112px; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
  .js .nav.est-ouverte { display: block; opacity: 1; }
  .js .nav { opacity: 0; transition: opacity var(--dur-1) var(--ease), display var(--dur-1) allow-discrete; }
  @starting-style { .js .nav.est-ouverte { opacity: 0; } }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .nav { flex-basis: 100%; }
  html.menu-ouvert { overflow: hidden; }
  .nav-liens { display: block; }
  .nav-liens a { padding-inline: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; letter-spacing: var(--tracking-m); }
  .nav-simple { padding-block: 8px; border-bottom: 1px solid var(--rule); }
  .nav-mobile { display: block; }
  .nav-liens .nav-mobile a { font-family: var(--font-text); font-size: var(--step-0); font-weight: 400; letter-spacing: 0; }
  .nav-mobile:first-of-type { padding-top: 12px; }
  .barre-mobile { display: block; position: fixed; inset: auto 0 0; z-index: 60; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--rule); }
  .barre-mobile .btn { width: 100%; }
  .barre-mobile { transition: transform var(--dur-2) var(--ease-drawer), visibility 0s linear 0s; }
  .barre-mobile.est-cachee { transform: translateY(100%); visibility: hidden; transition: transform var(--dur-2) var(--ease-drawer), visibility 0s linear var(--dur-2); }
  /* Menu ouvert : la barre revient tout de suite (visibilité immédiate, sinon elle n'apparaîtrait qu'à la fin du délai de sortie) */
  html.menu-ouvert .barre-mobile, html.menu-ouvert .barre-mobile.est-cachee { transform: none; opacity: 1; visibility: visible; transition: transform var(--dur-2) var(--ease-drawer), opacity var(--dur-1) var(--ease), visibility 0s linear 0s; }
  body { padding-bottom: 73px; }
  html { scroll-padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
}

/* Sections : bandes pleine largeur, texte à gauche */
.section { padding-block: var(--section); }
.section-filet { border-top: 1px solid var(--rule); }
.section-sombre { background: var(--sombre); color: var(--sur-sombre); border-block: 1px solid var(--rule); }
/* Bande claire (guide du logo : Onyx sur Glacier) pour rythmer la page. Jamais de logo ni de bouton bleu dedans : le Bleu dragée
   ne se pose pas sur un fond clair ; le focus y passe en Onyx. */
.section-claire {
  --text: var(--onyx);
  --text-muted: color-mix(in oklab, var(--onyx) 62%, var(--glacier));
  --rule: color-mix(in srgb, var(--onyx) 14%, transparent);
  --ring: var(--onyx);
  --sur-sombre: var(--onyx);
  background: var(--glacier);
  color: var(--onyx);
}
.section-claire ::selection { background: var(--onyx); color: var(--glacier); }
.tete { padding-block: clamp(48px, 7vw, 104px); }
/* Pages de pôle : la photo du pôle remplit le premier écran. Paysage : le sujet occupe le tiers droit, le texte se pose sur la
   moitié gauche restée sombre. Portrait (sous 900 px) : le sujet est dans la moitié basse, le texte en haut. Aucun voile tant que
   le contraste mesuré tient (Glacier sur les noirs de la photo). */
.tete-photo { position: relative; display: grid; align-items: center; min-height: clamp(560px, 82svh, 820px); overflow: hidden; background: var(--onyx); }
.tete-photo-image { position: absolute; inset: 0; z-index: 0; }
.tete-photo-image img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.tete-photo-texte { position: relative; z-index: 1; }
/* Sur la photo, tout le texte est en Glacier plein, fil d'Ariane compris (contraste mesuré sur les noirs de la photo) */
.tete-photo .fil-ariane { color: var(--text); }
/* Photo paysage (écran large ou couché) : le texte reste dans la moitié gauche, sombre */
@media (min-width: 900px), (orientation: landscape) { .tete-photo-texte > * { max-width: 48%; } }
/* Photo portrait (téléphone ou tablette tenus droits) : texte en haut, sujet en bas */
@media (max-width: 899px) and (orientation: portrait) {
  .tete-photo { min-height: calc(100svh - 72px); align-items: start; padding-top: 32px; }
  .tete-photo-image img { object-position: center bottom; }
  /* Tablette : la photo entière, sans rogner (un écran de 768 px large couperait 30 % du haut sombre) */
  @media (min-width: 600px) { .tete-photo { min-height: calc(100vw * 16 / 9); } }
}
.fil-ariane { margin-bottom: 28px; color: var(--text-muted); font-size: var(--step--1); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-ariane a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.fil-ariane li + li::before { content: "/"; margin-right: 8px; }
.grille-libelle { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .grille-libelle { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
}
.fin-parcours { min-height: 60vh; }

/* Bande de démos */
.bande { overflow: hidden; padding-bottom: clamp(32px, 4vw, 56px); }
.bande-piste { display: flex; width: max-content; animation: defile 70s linear infinite; }
.bande-piste ul { display: flex; flex: none; }
.bande-piste li { flex: none; width: clamp(240px, 26vw, 352px); margin-right: 12px; border: 1px solid var(--cadre); }
.bande:focus-within .bande-piste, .bande.en-pause .bande-piste { animation-play-state: paused; }
.bande-pause { margin-top: 8px; font-size: var(--step--1); }
@keyframes defile { to { transform: translateX(-50%); } }
.mouvement-reduit .bande-piste { animation: none; }
.mouvement-reduit .bande { overflow-x: auto; }
.mouvement-reduit .bande-piste ul[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bande-piste { animation: none; }
  .bande { overflow-x: auto; }
  .bande-piste ul[aria-hidden] { display: none; }
}
/* Écran tactile : la bande se fait glisser au doigt (défilement natif, 1:1, interruptible, élan et rebond du système), aucun
   défilement automatique ni bouton de pause ; sur pointeur fin, le défilement automatique continue (survol, focus, bouton). */
@media (hover: none) {
  .bande { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .bande-piste { animation: none; }
  .bande-piste ul[aria-hidden] { display: none; }
  .bande-piste li { scroll-snap-align: start; }
}

/* Preuve */
.preuves li { padding-block: clamp(20px, 3vw, 36px); border-top: 1px solid color-mix(in srgb, var(--sur-sombre) 28%, transparent); font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; letter-spacing: var(--tracking-l); line-height: var(--leading-l); max-width: 30ch; overflow-wrap: anywhere; }
.preuves li:first-child { border-top: 0; padding-top: 0; }
.preuves li:last-child { padding-bottom: 0; }

/* Présentation des services sur l'accueil : trois onglets, un panneau à la fois (presentation.js). Sans JavaScript,
   les trois panneaux sont empilés et lisibles. */
.presentation { margin-top: 40px; }
.pres-onglets { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.pres-onglet { flex: none; min-height: 56px; padding: 12px 18px; background: none; border: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; letter-spacing: var(--tracking-m); color: var(--text-muted); cursor: pointer; transition: color var(--dur-1) var(--ease-couleur), opacity var(--dur-1) var(--ease); }
.pres-onglet[aria-selected="true"] { color: var(--text); }
/* La liste d'onglets défile sur petit écran (overflow) : l'anneau de focus se dessine à l'intérieur pour ne pas être rogné */
.pres-onglet:focus-visible { outline-offset: -3px; }
.pres-indicateur { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--bleu); transform-origin: left; transition: transform var(--dur-3) var(--ease-in-out); }
html:not(.js) .pres-onglets, .presentation:not(.est-interactive) .pres-indicateur { display: none; }
.pres-panneau { padding-top: 32px; }
/* Panneau qui remplace le précédent : court fondu à l'entrée (opacité seule, transition interruptible via @starting-style) ;
   un changement au clavier (flèches) est immédiat, classe .clavier posée le temps du changement par presentation.js */
.est-interactive .pres-panneau { opacity: 1; transition: opacity var(--dur-1) var(--ease); }
@starting-style { .est-interactive .pres-panneau { opacity: 0; } }
.presentation.sans-transition :is(.pres-indicateur, .pres-panneau), .defilant.sans-transition .defilant-repere { transition: none; }
.pres-phrase { max-width: var(--lecture); font-size: var(--step-1); line-height: 1.4; text-wrap: pretty; }
.pres-services { margin-top: 24px; border-top: 1px solid var(--rule); }
.pres-service { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.pres-nom { font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; letter-spacing: var(--tracking-m); line-height: var(--leading-m); }
.pres-promesse { color: var(--text-muted); }
.pres-prix { color: var(--text-muted); font-size: var(--step--1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pres-service:focus-visible .pres-nom { text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .pres-service { grid-template-columns: minmax(0, 1fr) auto; }
  .pres-promesse { grid-column: 1 / -1; }
}
.pres-panneau .suite { margin-top: 24px; }
/* Sans JavaScript : les trois panneaux à la suite, chacun sous le titre de son pôle (le libellé est dans l'onglet masqué) */
html:not(.js) .pres-panneau + .pres-panneau { margin-top: 24px; border-top: 1px solid var(--rule); }

/* Page de pôle : sommaire collé à gauche, repère Bleu dragée qui glisse jusqu'au bloc à l'écran */
.defilant { display: grid; gap: 40px; }
.defilant-nav { position: relative; }
@media (min-width: 900px) {
  .defilant { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .defilant-nav { position: sticky; top: 104px; }
}
.defilant-nav ol { border-left: 1px solid var(--rule); }
.defilant-nav a { display: grid; gap: 2px; padding: 12px 0 12px 20px; text-decoration: none; color: var(--text-muted); transition: color var(--dur-1) var(--ease-couleur), opacity var(--dur-1) var(--ease); }
.defilant-nav a[aria-current] { color: var(--text); }
.defilant-nom { font-weight: 500; }
.defilant-prix { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.defilant-repere { position: absolute; left: -1px; top: 0; width: 2px; height: 100px; background: var(--bleu); transform-origin: top; transition: transform var(--dur-3) var(--ease-in-out); }
.defilant:not(.est-interactive) .defilant-repere { display: none; }
@media (max-width: 899px) { .defilant-nav { display: none; } }
.defilant-blocs { display: grid; gap: clamp(56px, 8vw, 112px); }
.defilant-bloc { scroll-margin-top: 104px; padding-top: 20px; border-top: 2px solid var(--text); }
.defilant-bloc .lead { margin-top: 16px; }
.defilant-bloc .texte-lecture { margin-top: 16px; }
.defilant-bloc .livrables { margin-top: 20px; }
.defilant-bloc .prix { margin-top: 24px; }
/* Mouvement réduit : plus de déplacement (indicateur, repère) ; le fondu du panneau reste, il n'est qu'opacité */
@media (prefers-reduced-motion: reduce) { .pres-indicateur, .defilant-repere { transition: none; } }
:root:where(.mouvement-reduit) :is(.pres-indicateur, .defilant-repere) { transition: none; }

/* Démos */
.demos { display: grid; gap: 48px; margin-top: 40px; }
.demos-trois { }
@media (min-width: 900px) { .demos-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.carte-image { display: block; border: 1px solid var(--cadre); margin-bottom: 16px; }
.carte-image img { width: 100%; }
.carte-demo .secteur { margin-top: 4px; }
.carte-demo .secteur + p { margin-top: 10px; max-width: var(--lecture); text-wrap: pretty; }
.suite { margin-top: 32px; }
.demos-liste { margin-top: 0; gap: clamp(48px, 7vw, 96px); }
@media (min-width: 900px) {
  .demos-liste .carte-demo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-content: start; }
  .demos-liste .carte-image { grid-row: 1 / span 5; margin-bottom: 0; }
  .demos-liste .h3 { font-size: var(--step-2); letter-spacing: var(--tracking-l); line-height: var(--leading-l); }
}

/* Étapes */
.etapes { display: grid; gap: 32px; margin-top: 40px; counter-reset: etape; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.etapes li { counter-increment: etape; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--sur-sombre) 28%, transparent); }
.etapes li::before { content: counter(etape); display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.etapes p:not(.h3) { margin-top: 10px; text-wrap: pretty; }

/* Pages métier */
.metier-tete { display: grid; gap: 32px; }
.metier-capture { margin: 0; }
.metier-capture img, .fonction img { border: 1px solid var(--cadre); width: 100%; }
.metier-capture figcaption, .fonction figcaption { margin-top: 8px; }
.promesses { margin-top: 20px; color: var(--text-muted); font-size: var(--step--1); }
.promesses li { padding-block: 2px; }
.fonctions { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: 40px; }
.fonction { display: grid; gap: 20px; }
.fonction figure { margin: 0; }
.fonction .h3 + p { margin-top: 10px; max-width: var(--lecture); }
.fonction-portrait figure { max-width: 280px; }
@media (min-width: 900px) {
  .metier-tete { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .fonction { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: start; }
  .fonction-texte > div { grid-column: 2; }
}

/* Livrables, prix */
.livrables li { padding-block: 14px; border-top: 1px solid var(--rule); max-width: var(--lecture); text-wrap: pretty; }
.livrables li:first-child { border-top: 0; padding-top: 0; }
.prix { font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; letter-spacing: var(--tracking-l); line-height: var(--leading-l); max-width: 24ch; text-wrap: balance; font-variant-numeric: tabular-nums; }
.prix + .note { margin-top: 14px; }

/* FAQ */
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-block: 16px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: var(--step-1); line-height: 1; }
.faq-item summary::after { transition: transform var(--dur-1) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
/* Dépliage animé quand le navigateur sait interpoler vers auto ; sinon, ouverture immédiate comme avant */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}
.faq-item p { max-width: var(--lecture); padding-bottom: 20px; text-wrap: pretty; }

/* Appel final et formulaire */
.section-final { border-top: 2px solid var(--text); }
.tete.section-final { border-top: 0; }
.grille-final { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .grille-final { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .final-tete { position: sticky; top: 104px; }
}
.coordonnees { margin-top: 24px; }
.coordonnees li { padding-block: 10px; border-top: 1px solid var(--rule); }
.coordonnees a { display: inline-flex; align-items: center; min-height: 28px; }
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: transparent; border: 1px solid var(--bordure); }
.field textarea { resize: vertical; }
/* Erreur : bordure de 3 px, remplissage réduit d'autant : le champ garde sa taille, rien ne se décale */
.field [aria-invalid="true"] { border-width: 3px; padding: 8px 10px; }
.field-err { font-size: var(--step--1); font-weight: 600; }
.field-err:empty { display: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: grid; gap: 10px; justify-items: start; }
.form-foot .note { max-width: var(--lecture); }
.btn-envoi { min-width: min(100%, 320px); }
.field-aide { color: var(--text-muted); font-size: var(--step--1); }
/* Envoi sans JavaScript refusé par le script (?erreur=1#erreur-envoi) : affiché par :target, ou par form.js */
.form-erreur-envoi { display: none; padding: 16px 20px; border: 2px solid var(--text); color: var(--text); font-weight: 500; }
.form-erreur-envoi:target:not([hidden]), .form-erreur-envoi.est-visible:not([hidden]) { display: block; }
/* Lien vers une section (navigation.js lui donne le focus) : le focus s'y pose sans encadrer toute la section */
section[tabindex="-1"]:focus { outline: none; }
.form-statut:empty { display: none; }
.form-statut { font-weight: 600; }
.legal { color: var(--text-muted); font-size: var(--step--1); max-width: var(--lecture); }

/* Pied de page */
.site-footer { padding-block: clamp(48px, 6vw, 80px) 24px; background: var(--sombre); color: var(--sur-sombre); border-top: 1px solid var(--rule); }
.footer-grille { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-marque { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: start; align-content: start; }
.footer-logo { margin-bottom: 8px; }
@media (min-width: 1000px) {
  .footer-grille { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
  .footer-marque { grid-column: auto; }
}
.footer-titre { margin-bottom: 8px; font-weight: 600; }
.footer-titre a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; text-decoration: none; }
.footer-grille > div > .footer-liens:first-child { margin-top: -10px; }
.footer-liens a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-marque a { display: inline-flex; align-items: center; min-height: 44px; }
.copy { margin-top: 32px; font-size: var(--step--1); }

/* Mouvement réduit : moins et plus doux, pas zéro. Le menu garde son fondu (opacité) ; la barre mobile fond au lieu de glisser ;
   la FAQ s'ouvre d'un coup et son signe ne tourne pas. */
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .faq-item::details-content { transition: none; }
  .barre-mobile { transition: opacity var(--dur-1) var(--ease), visibility 0s linear 0s; }
  .barre-mobile.est-cachee { transform: none; opacity: 0; transition: opacity var(--dur-1) var(--ease), visibility 0s linear var(--dur-1); }
}
/* Chemin de test (?motion=reduce) : :root:where() garde la spécificité des règles sous media query ; un pseudo-élément n'entre pas dans :is() */
:root:where(.mouvement-reduit) .faq-item summary::after { transition: none; }
:root:where(.mouvement-reduit) .faq-item::details-content { transition: none; }
:root:where(.mouvement-reduit) .barre-mobile { transition: opacity var(--dur-1) var(--ease), visibility 0s linear 0s; }
:root:where(.mouvement-reduit) .barre-mobile.est-cachee { transform: none; opacity: 0; transition: opacity var(--dur-1) var(--ease), visibility 0s linear var(--dur-1); }
/* Au chargement, la barre part cachée sans glisser ni fondre (ui.js pose la classe le temps d'un reflow) : garde en dernier, plus forte
   que les chemins réduits */
.barre-mobile.sans-transition, .barre-mobile.sans-transition.est-cachee { transition: none; }
/* Survols : seulement avec un vrai pointeur (sur téléphone, un survol resterait collé après le toucher). Un seul bloc pour
   toute la feuille. */
@media (hover: hover) {
  .lien:hover { text-decoration-thickness: 2px; }
  .btn-primary:hover { background: transparent; color: var(--bleu); }
  .btn-plein:hover { background: transparent; color: var(--text); }
  .btn-ghost:hover { background: var(--text); color: var(--onyx); }
  .menu-bouton:hover { border-color: var(--text); }
  .nav-liens a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .fil-ariane a:hover, .coordonnees a:hover, .legal a:hover { text-decoration-thickness: 2px; }
  .pres-onglet:hover { color: var(--text); }
  .pres-service:hover .pres-nom { text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .defilant-nav a:hover { color: var(--text); }
  .bande:hover .bande-piste { animation-play-state: paused; }
  .faq-item summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .footer-liens a:hover, .footer-titre a:hover, .footer-marque a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media print { .site-header, .barre-mobile, .site-footer { display: none; } }