/* =============================================================================
   COQUILLE COMMUNE — les sites France Assos Santé réalisés par ExpectPatient.

   Posée par commun/outils/poser.py dans <site>/commun/. NE PAS L'ÉDITER DANS
   UN SITE : la modification serait écrasée à la pose suivante, et
   `poser.py --verifier` la signale comme une dérive. La source est
   Marjorie/commun/kit/coquille.css.

   Ce qu'elle porte — ce qui doit rester IDENTIQUE d'un site à l'autre :
   la base (boîtes, corps, masquage, focus), le filet de marque, l'en-tête,
   l'évitement, le bandeau d'état, le pied de page et sa signature bénévole,
   la vue des mentions légales, le mouvement (apparitions, cascade, animations
   réduites) et le socle de l'impression.

   Ce qu'elle ne porte pas : la mise en page, les boutons et la typographie de
   contenu de chaque outil, qui restent dans son app.css.

   Jetons : ceux de theme.css (ep-ui, thème fas-editorial). Jetons locaux hors
   contrat : préfixe x-fas-. Aucune couleur écrite en dur.
   ========================================================================== */

:root {
  --x-fas-bandeau: color-mix(in srgb, var(--brand-ponctuation) 10%, var(--paper-bright));
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px;
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-300); line-height: 1.5;
}
/* Un élément masqué l'est, quel que soit son display : sans cette règle, un
   bloc en `display: flex` restait visible avec l'attribut hidden. */
[hidden] { display: none !important; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:where(a, button, summary, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: var(--focus-ring-epaisseur) solid var(--focus-ring);
  outline-offset: var(--focus-ring-decalage);
  box-shadow: 0 0 0 6px var(--focus-ring-liseré);
}
/* un titre qui reçoit le focus au changement de vue ne s'encadre pas */
:where(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

.eyebrow {
  margin: 0; color: var(--muted);
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .14em;
  line-height: 1.4; text-transform: uppercase;
}

/* Icônes Lucide (commun/icones.js). Elles doublent toujours un libellé. */
.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }

/* ---- en-tête ---------------------------------------------------------------- */
.brand-rule { height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent), var(--brand-ponctuation)); }

/* L'évitement : invisible tant qu'on ne le rejoint pas au clavier. */
.evitement {
  position: absolute; z-index: 80; left: var(--gutter); top: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--brand-primary); color: var(--paper-bright);
  font-size: var(--fs-200); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.evitement:focus { transform: none; }

.site-header { background: var(--paper-bright); border-bottom: 1px solid var(--line); }
.site-header-inner {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
}
.wordmark {
  display: flex; align-items: center; gap: var(--space-4); min-width: 0;
  color: inherit; text-decoration: none; font-weight: 700;
}
.logo-fas { display: block; height: 54px; width: auto; }
.wordmark .sep { width: 1px; height: 26px; flex: none; background: var(--line-strong); }
.wordmark .titre {
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .12em; line-height: 1.35;
  text-transform: uppercase; color: var(--muted);
  transition: color var(--dur-1) var(--ease-out);
}
a.wordmark:hover .titre { color: var(--ink); }
@media (max-width: 560px) {
  .logo-fas { height: 42px; }
  .wordmark { gap: var(--space-3); }
}

/* Le bandeau d'état : ce que le site est, à cette date. */
.status-band {
  min-height: 38px; margin: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-ponctuation) 32%, transparent);
  background: var(--x-fas-bandeau); color: var(--brand-primary);
  font-size: var(--fs-100); line-height: 1.35; text-align: center;
}
.status-band strong { font-weight: 800; }
.status-band strong::after { content: "·"; margin-left: var(--space-2); color: var(--brand-accent); }

/* ---- pied ------------------------------------------------------------------------------------------
   Le logo de l'association d'abord ; la signature de conception ensuite, d'un
   poids visuel inférieur — le portage est associatif, pas prestataire. */
.pied {
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-8) var(--gutter); border-top: 1px solid var(--line-strong);
}
.pied > p { margin: 0; }
.logo-fas--pied { height: 64px; opacity: .9; }
.pied-collectif {
  max-width: 52ch; color: var(--ink);
  font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-300); line-height: 1.4;
}
.pied-signature { display: grid; justify-items: center; gap: var(--space-2); }
.pied > .pied-signature { margin-top: var(--space-2); }
.pied-signature .ps-libelle {
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.logo-ep { display: block; width: 200px; height: auto; opacity: .92; }
/* Pas d'opacité sur ce texte : à 11 px, le gris atténué descendait sous 4,5:1. */
.pied-mentions { max-width: 68ch; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pied > .pied-liens { margin-top: var(--space-3); }
.lien-pied {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-200); color: var(--muted);
  text-decoration: underline; text-underline-offset: .25em;
}
.lien-pied:hover { color: var(--brand-primary); }
@media (max-width: 560px) { .logo-ep { width: 168px; } }

/* ---- mentions légales ---------------------------------------------------------------------------- */
/* l'encadré « informations vérifiées » : ce qui distingue des mentions établies
   sur pièce de mentions recopiées */
.mentions-verifie {
  padding: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper-bright);
}
.verifie-titre {
  margin: var(--space-2) 0 var(--space-3); font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: clamp(var(--fs-500), 2.4vw, var(--fs-600));
  line-height: 1.15; letter-spacing: -.02em; color: var(--brand-primary);
}
.verifie-texte { margin: 0; font-size: var(--fs-300); line-height: 1.65; max-width: 70ch; }

/* la contribution bénévole, mise en avant plutôt que reléguée en bas de page */
.contribution { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.contribution-marque img { display: block; width: 72px; height: auto; }
.contribution-texte { min-width: 0; }
.contribution-principal {
  margin: 0 0 var(--space-4); font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-400); line-height: 1.6; max-width: 62ch;
}
.contribution-benevolat {
  margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--brand-ponctuation); background: var(--paper-bright);
  font-size: var(--fs-300); line-height: 1.7; max-width: 66ch;
}
.contribution-perennite { margin: 0; font-size: var(--fs-200); line-height: 1.6; color: var(--muted); max-width: 62ch; }
@media (max-width: 640px) { .contribution { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Deux colonnes : les sections se suivent dans l'ordre du contenu, aucune n'est
   mise en avant par sa place. */
.mentions-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.mentions-section { min-width: 0; }
.mentions-titre {
  margin: var(--space-1) 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: var(--fs-500); letter-spacing: -.02em; line-height: 1.2; color: var(--brand-primary);
}
.contribution-texte .mentions-titre { margin-top: 0; }
.mentions-para { margin: 0 0 var(--space-4); font-size: var(--fs-300); line-height: 1.65; max-width: 62ch; }
.mentions-para:last-child { margin-bottom: 0; }
/* une note est une phrase entière : un filet, pas de capitales */
.mentions-note {
  margin: var(--space-4) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--brand-primary);
  color: var(--muted); font-size: var(--fs-200); line-height: 1.6; max-width: 66ch;
}
.mentions-lignes { margin: 0; display: grid; gap: var(--space-3); }
.mentions-para + .mentions-lignes { margin-top: var(--space-4); }
.mentions-lignes > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
.mentions-lignes dt {
  font-size: var(--fs-100); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.mentions-lignes dd { margin: 0; font-size: var(--fs-300); line-height: 1.55; overflow-wrap: anywhere; }
/* Un champ resté vide doit se voir : il bloque la mise en ligne. Le corail
   marque, il ne porte pas le texte. */
.mentions-lignes dd.a-completer {
  color: var(--ink); font-style: italic;
  padding-left: var(--space-3); border-left: 3px solid var(--brand-accent);
}
@media (max-width: 860px) { .mentions-sections { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .mentions-lignes > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ---- mouvement ------------------------------------------------------------------------------------
   Le vocabulaire du kit de la charte web ExpectPatient : trois durées
   (--dur-1 retour tactile, --dur-2 changement d'état, --dur-3 entrée de
   contenu), deux courbes, une seule distance (--rise). Le mouvement est rapide
   et assuré, jamais rebondissant ni joueur : pas de dépassement élastique sur
   un chiffre qui compte des personnes. */
@keyframes arrive { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
/* Un bloc fait de commandes ne s'estompe jamais — à opacité partielle, il a
   l'air désactivé. Il ne reçoit que le mouvement. */
@keyframes reveal-in-motion { from { transform: translateY(var(--rise)); } to { transform: none; } }
/* Micro-entrées : un libellé qui apparaît, une valeur qui vient de changer. */
@keyframes readout-in { from { opacity: 0; transform: translateY(calc(var(--rise) / 4)); } to { opacity: 1; transform: none; } }
@keyframes value-pop { from { opacity: .55; transform: translateY(calc(var(--rise) / 4)); } to { opacity: 1; transform: none; } }
/* Les données se construisent : la barre pousse depuis son origine, la colonne
   monte depuis sa base, le trait se dessine — jamais l'inverse. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes col-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw-line { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* Au repos, tout est visible : c'est coquille.js qui prépare l'apparition, et
   seulement si le mouvement est permis. */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal.is-reveal-ready {
    opacity: 0; transform: translateY(var(--rise));
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }
  .reveal.is-reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
  .reveal.is-reveal-ready.is-interactive { opacity: 1; }
  @supports (animation-timeline: view()) {
    .reveal.is-reveal-ready {
      opacity: 1; transform: none; transition: none;
      animation: arrive linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 80%;
    }
    .reveal.is-reveal-ready.is-interactive { animation-name: reveal-in-motion; }
  }
  /* Une valeur qui vient de changer (COQUILLE.rejouer). Sur un élément en ligne,
     un transform ne s'applique pas : lui donner display: inline-block. */
  .valeur-changee { animation: value-pop var(--dur-2) var(--ease-out); }
  /* Les états de départ d'une entrée (COQUILLE.entree, .entree-prete) s'écrivent
     dans la feuille de chaque site, sous @media screen and
     (prefers-reduced-motion: no-preference) : ni le papier ni les animations
     réduites ne doivent les voir. */
  .stagger > * { animation: arrive var(--dur-3) var(--ease-out) both; }
  .stagger > :nth-child(2) { animation-delay: var(--stagger-step); }
  .stagger > :nth-child(3) { animation-delay: calc(2 * var(--stagger-step)); }
  .stagger > :nth-child(4) { animation-delay: calc(3 * var(--stagger-step)); }
  .stagger > :nth-child(5) { animation-delay: calc(4 * var(--stagger-step)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; animation-timeline: none !important; transition: none !important; }
  .reveal, .reveal.is-reveal-ready { opacity: 1 !important; transform: none !important; }
}

/* ---- impression : le socle commun ---------------------------------------------------------------- */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* ce qui n'apparaît qu'en défilant doit être sur le papier */
  .reveal, .reveal.is-reveal-ready { opacity: 1 !important; transform: none !important; }
  .evitement, .pied-liens, .no-print { display: none !important; }
  body { background: var(--paper-bright); }
}