/* ─────────────────────────────────────────────────────────────
   OULA — Feuille de styles principale
   Ordre des layers : reset → tokens → base → components → utilities
   (tokens.css et fonts.css sont chargés AVANT ce fichier)
   ───────────────────────────────────────────────────────────── */
@layer reset, tokens, base, components, utilities;

/* ═══════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important; /* neutralise les boucles décoratives */
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    min-height: 100svh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: none;
    cursor: pointer;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    line-height: 1.15;
  }

  p {
    text-wrap: pretty;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
@layer base {
  body {
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 700;
  }

  /* Focus visible — accessibilité (CLAUDE.md §11) */
  :focus-visible {
    outline: 3px solid var(--c-coral);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Lien d'évitement */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--c-indigo);
    color: #fff;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
@layer components {
  /* ─── Layout ──────────────────────────────────────────────── */
  .container {
    width: min(100% - 2 * var(--sp-md), var(--container));
    margin-inline: auto;
  }

  .container--narrow {
    width: min(100% - 2 * var(--sp-md), var(--container-narrow));
    margin-inline: auto;
  }

  /* Rythme vertical commun à toutes les grandes sections de page
     (accueil, pages de contenu). */
  .section {
    padding-block: var(--sp-2xl);
  }

  /* ─── Header ──────────────────────────────────────────────── */
  /* `position: relative` + z-index élevé : sans cela le hero (dont
     `.hero__media` est positionné) crée un contexte d'empilement qui
     passe par-dessus le header — le burger disparaissait derrière
     l'image du jean au défilement. Le header et son menu déroulant
     restent ainsi au premier plan. */
  .site-header {
    position: relative;
    z-index: 30;
    background: var(--c-bg);
  }

  /* Pleine largeur : le logo est calé tout à gauche, la nav tout à
     droite (cf. maquette _references/Homepage.png). Pas de
     `.container` ici, seulement une marge de sécurité latérale.
     `--bar-height` est partagé avec le bandeau de réassurance pour
     que les deux bandes aient exactement la même hauteur. */
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xs) var(--sp-md);
    width: 100%;
    min-height: var(--bar-height);
    padding-block: 0;
    padding-inline: var(--sp-md);
  }

  .site-header__logo {
    /* Le logo est calé tout à gauche ; le lien ne prend que la place
       de l'image, il ne s'étire pas. */
    display: inline-flex;
    align-items: center;
  }

  .site-header__logo img {
    /* Reste sous --bar-height pour ne pas gonfler la barre : celle-ci
       plafonne à 3.75rem, on garde ~0.4rem de respiration. Plancher
       relevé à 2.75rem pour un logo plus présent en mobile. */
    height: clamp(2.75rem, 2.2rem + 1.9vw, 3.375rem);
    width: auto;
  }

  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--sp-md), 2vw, var(--sp-lg));
    /* Le reset ne cible que ul[class] : cette liste n'en a pas. */
    list-style: none;
    padding: 0;
  }

  .site-nav a {
    color: var(--c-indigo);
    /* Corps de texte (18 → 20px) : --fs-lead rendait les liens trop
       imposants face au logo. */
    font-size: var(--fs-body);
    /* Graisse normale : sur la maquette les liens de nav sont nettement
       plus légers que les libellés du footer (qui, eux, sont en gras). */
    font-weight: 400;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  /* Pas de soulignement au survol : seule la couleur passe au coral. */
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--c-coral);
  }

  /* ─── Bouton burger ───────────────────────────────────────── */
  /* Masqué par défaut (desktop) : la nav en ligne suffit. Il n'apparaît
     qu'en dessous du point de bascule mobile (voir plus bas). */
  .site-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--c-indigo);
    cursor: pointer;
  }

  /* Les trois barres du burger, dessinées avec un seul span + ses
     pseudo-éléments. Passent en croix quand le menu est ouvert. */
  .site-nav__burger,
  .site-nav__burger::before,
  .site-nav__burger::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }

  .site-nav__burger {
    position: relative;
  }

  .site-nav__burger::before { position: absolute; top: -0.5rem; left: 0; }
  .site-nav__burger::after  { position: absolute; top:  0.5rem; left: 0; }

  .site-header--nav-open .site-nav__burger {
    background: transparent;
  }

  .site-header--nav-open .site-nav__burger::before {
    transform: translateY(0.5rem) rotate(45deg);
  }

  .site-header--nav-open .site-nav__burger::after {
    transform: translateY(-0.5rem) rotate(-45deg);
  }

  /* ─── Bascule mobile ──────────────────────────────────────── */
  /* En dessous de ~48rem : logo à gauche, burger à droite, et la nav
     bascule en panneau déroulant masqué tant que le menu est fermé. */
  @media (width < 48rem) {
    .site-nav__toggle {
      display: inline-flex;
    }

    .site-nav {
      display: none;
      position: absolute;
      inset-inline: 0;
      /* Ancré au bas réel du header (`top: 100%`), quelle que soit sa
         hauteur : pas d'espace blanc entre le burger et les liens. Le
         panneau ne fait que la hauteur de ses liens (il ne descend pas
         jusqu'en bas de l'écran) et masque le contenu sous lui grâce à
         son fond opaque. Aucun filet de séparation sous le burger. */
      top: 100%;
      z-index: 20;
      background: var(--c-bg);
      box-shadow: 0 0.75rem 1rem rgb(12 12 108 / 0.08);
    }

    .site-header--nav-open .site-nav {
      display: block;
    }

    .site-nav ul {
      flex-direction: column;
      gap: 0;
      padding-block: var(--sp-xs);
    }

    .site-nav li {
      width: 100%;
    }

    .site-nav a {
      display: block;
      padding: var(--sp-sm) var(--sp-md);
      font-size: var(--fs-lead);
    }
  }

  /* ─── Bandeau de réassurance ──────────────────────────────── */
  /* `margin-bottom` : espace entre les cases et le bandeau floral
     qui suit, sinon les fleurs viennent coller le rose. */
  .reassurance {
    background: var(--c-pink);
    margin-bottom: var(--sp-lg);
  }

  /* 3 cases de largeur égale, séparées par un filet blanc. */
  .reassurance__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
  }

  .reassurance__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bar-height);
    padding: var(--sp-xs) var(--sp-md);
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    font-weight: 400;
    text-align: center;
  }

  .reassurance__item + .reassurance__item {
    border-inline-start: 1px solid var(--c-bg);
  }

  /* En mobile, les cases s'empilent : le filet passe à l'horizontale. */
  @media (width < 40rem) {
    .reassurance__list {
      grid-auto-flow: row;
    }

    .reassurance__item + .reassurance__item {
      border-inline-start: 0;
      border-block-start: 1px solid var(--c-bg);
    }
  }

  /* ─── Boutons ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: var(--sp-sm) var(--sp-lg);
    border-radius: var(--radius-pill);
    /* Les libellés de boutons sont en fonte display sur les maquettes
       (cf. « Commencer le test Oula ça déborde »), comme le logo. */
    font-family: var(--font-display);
    font-size: var(--fs-body);
    /* Original Quality n'existe qu'en une seule graisse : au-delà de
       400 le navigateur la graisserait artificiellement. */
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  /* CTA principal du hero : pilule large et généreuse. */
  .btn--lg {
    padding: var(--sp-sm) clamp(var(--sp-md), 3vw, var(--sp-xl));
    font-size: var(--fs-lead);
  }

  .btn--primary {
    background: var(--c-periwinkle);
    color: var(--c-indigo);
  }

  /* Survol : fond périwinkle foncé, libellé en blanc pour garder
     le contraste (l'indigo sur #514C9F ne passerait pas AA). */
  .btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
  .btn--primary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
    background: var(--c-periwinkle-dark);
    color: var(--c-bg);
  }

  /* Clic maintenu : bascule sur le corail vif. */
  .btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--c-cta-active);
    color: var(--c-bg);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ─── Bordure florale décorative ──────────────────────────── */
  /* Bandeau PNG fourni par le client (1440 × 68, ratio ~21:1).
     UN SEUL bandeau, étiré sur la largeur : `100% 100%` couvre
     bord à bord sans vide sur les côtés ni raccord de répétition.
     La largeur est PLAFONNÉE à la taille native (1440px) : au-delà,
     les fleurs s'écarteraient trop les unes des autres. Sur écran
     large le bandeau est donc centré, avec du blanc sur les côtés. */
  /* Le bandeau est RECOMPOSÉ fleur par fleur (cf. le snippet) : chaque
     fleur est un élément positionné en %, ce qui permet de n'en colorer
     qu'UNE au survol. Le conteneur ne porte plus aucun motif. */
  .floral-border {
    --floral-max: 90rem; /* 1440px — largeur native du bandeau */
    --floral-color: var(--c-coral);
    --floral-color-hover: var(--c-periwinkle);

    position: relative;
    width: min(100%, var(--floral-max));
    margin-inline: auto;
    /* `aspect-ratio` plutôt qu'une hauteur en `vw` : la hauteur suit
       la largeur RÉELLE du bandeau, donc les fleurs gardent leurs
       proportions natives une fois le plafond de 1440px atteint. */
    aspect-ratio: 1440 / 68;
  }

  /* Calque qui porte les fleurs. En rythme normal il épouse la bande ;
     quand celle-ci est rognée à une hauteur fixe, il garde le ratio du
     bandeau (cf. plus bas) pour que les fleurs restent rondes. */
  .floral-border__inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* La fleur du client sert de MASQUE : sa forme découpe l'aplat de
     couleur, donc seuls les pétales captent le survol — pas leur boîte
     englobante ni les fentes blanches entre eux.
     La boîte reprend EXACTEMENT les proportions de l'image (marges
     transparentes comprises, cf. le snippet) : `100% 100%` la remplit
     donc sans déformer le dessin. */
  .floral-border__flower {
    position: absolute;
    background-color: var(--floral-color);
    transition: background-color 250ms ease;
    mask-image: var(--floral-src);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--floral-src);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
  }

  /* Survol : SEULE la fleur survolée passe au périwinkle. Le bandeau est
     décoratif (`aria-hidden`) et ne reçoit pas le focus — l'effet est
     donc réservé au survol, sans équivalent clavier à prévoir. */
  .floral-border__flower:hover {
    background-color: var(--floral-color-hover);
  }

  @media (prefers-reduced-motion: reduce) {
    .floral-border__flower {
      transition: none;
    }
  }

  /* Sous ~64rem, le ratio 21:1 réduirait la bande à une vingtaine de
     pixels : on lui impose une hauteur lisible. Les fleurs, dimension-
     nées en % des DEUX axes, s'y étireraient — on garde donc le ratio du
     bandeau sur un calque interne, dimensionné par sa HAUTEUR (et non sa
     largeur) : le motif est ainsi agrandi puis rogné sur les côtés,
     exactement comme le `cover` de l'ancienne image de fond. */
  @media (width < 64rem) {
    .floral-border {
      aspect-ratio: auto;
      height: clamp(2.125rem, 1.9rem + 1.1vw, 3.1875rem);
      overflow: hidden;
    }

    /* Calque interne : hauteur = celle de la bande, largeur déduite du
       ratio → il déborde horizontalement, et le parent le rogne. */
    .floral-border__inner {
      position: absolute;
      top: 0;
      left: 50%;
      /* `width: auto` est indispensable : la règle de base impose
         `width: 100%`, qui l'emporterait sur `aspect-ratio`. */
      width: auto;
      height: 100%;
      aspect-ratio: 1440 / 68;
      translate: -50% 0;
    }
  }

  /* ─── Footer ──────────────────────────────────────────────── */
  /* Calé sur _references/Homepage.png : bloc rose pleine largeur, mais
     contenu resserré et inset (le texte commence bien après le bord de
     l'écran sur la maquette), trois colonnes de largeurs INÉGALES. */
  .site-footer {
    background: var(--c-pink);
    padding-block: var(--sp-xl) var(--sp-md);
    margin-top: var(--sp-2xl);
    color: var(--c-indigo);
  }

  .site-footer__inner {
    width: min(100% - 2 * var(--sp-md), var(--container-narrow));
    margin-inline: auto;
  }

  .site-footer__title {
    color: var(--c-coral);
    font-family: var(--font-display);
    /* Le titre du footer est presque aussi imposant que le logo sur la
       maquette : on le traite au même niveau qu'un titre de section. */
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: var(--sp-md);
  }

  /* Marque large / liens / contact. La colonne de contact ne prend que
     sa largeur utile et se cale à droite. */
  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    gap: var(--sp-lg);
    align-items: start;
  }

  .site-footer__baseline {
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.3;
    /* Ne pas courir sur toute la colonne : sur la maquette la phrase
       casse en DEUX lignes avant le logo Hemogyn. */
    max-width: 30ch;
    margin-bottom: var(--sp-lg);
  }

  .site-footer__partner {
    display: block;
    height: auto;
    width: clamp(10rem, 8rem + 8vw, 14.5rem);
    margin-bottom: var(--sp-sm);
  }

  /* Les retours à la ligne viennent du contenu (nl2br) : l'éditeur
     maîtrise la découpe en 3 lignes de la maquette. */
  .site-footer__partner-text {
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.35;
  }

  /* Liens du footer : gras, interligne généreux (~1 ligne vide entre
     chaque item sur la maquette). Ils sont alignés sur la baseline de
     la colonne de marque, d'où le décalage haut. */
  .site-footer__links {
    display: grid;
    justify-items: start;
    gap: var(--sp-md);
    padding-top: 0.15em;
    font-size: var(--fs-body);
    font-weight: 700;
  }

  .site-footer__links a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .site-footer__links a:hover,
  .site-footer__links a:focus-visible {
    color: var(--c-coral);
  }

  /* Sur la maquette le bloc contact est décalé vers le bas : son titre
     s'aligne à peu près sur le 2e lien de la colonne du milieu. */
  .site-footer__contact {
    justify-self: end;
    padding-top: var(--sp-lg);
    text-align: center;
  }

  /* Titre « Contactez-nous » : graisse normale, contrairement aux liens. */
  .site-footer__socials-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: var(--fs-body);
    font-weight: 400;
    white-space: nowrap;
  }

  .site-footer__heart {
    width: 0.9em;
    height: 0.9em;
    fill: var(--c-coral);
    flex: none;
  }

  /* Réseaux sociaux — même composant que le site Hemogyn
     (cf. _references/components.css, `.site-footer__social-link`) : les PNG
     fournis sont des glyphes BLANCS sur fond transparent, ils doivent donc
     être posés dans un carré plein, sinon ils disparaissent sur le rose.
     Gabarit repris tel quel (3.5rem, icône 38px, coins 10px) ; seules les
     couleurs passent à la palette OULA (indigo au lieu du violet Hemogyn). */
  .site-footer__socials {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--sp-sm);
  }

  .site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 10px;
    background-color: var(--c-indigo);
    color: var(--c-bg);
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  /* Hover en périwinkle : équivalent OULA du mauve clair (#908BEC) utilisé
     côté Hemogyn. Pas de translation verticale, comme la référence. */
  .site-footer__socials a:hover,
  .site-footer__socials a:focus-visible {
    background-color: var(--c-periwinkle);
  }

  .site-footer__socials img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
  }

  /* Repli si un réseau n'a pas d'icône déposée au panel : le libellé reste
     lisible en blanc dans le carré indigo. */
  .site-footer__socials a:not(:has(img)) {
    width: auto;
    padding-inline: var(--sp-sm);
    font-size: var(--fs-ui);
    font-weight: 700;
    text-decoration: none;
  }

  /* Barre légale : filet indigo fin, tout sur une ligne centrée, le lien
     « Mentions légales » suivant directement le copyright. */
  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.4em var(--sp-xs);
    margin-top: var(--sp-lg);
    padding-top: var(--sp-sm);
    border-top: 1px solid rgb(12 12 108 / 0.35);
    font-size: var(--fs-caption);
    text-align: center;
  }

  .site-footer__legal a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  /* Survol : corail du design system, sans soulignement (cf. le hover des
     liens du footer, même traitement). La référence Hemogyn utilise ici son
     mauve #999DFE, qui correspond chez OULA au périwinkle : on garde le
     corail, seule couleur d'accent « rouge » de la palette. */
  .site-footer__legal a:hover,
  .site-footer__legal a:focus-visible {
    color: var(--c-coral);
    text-decoration: none;
  }

  /* Sous ~56rem : contact sous la marque, puis empilement complet. */
  @media (width < 56rem) {
    .site-footer__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Le décalage vertical n'a de sens qu'en 3 colonnes. */
    .site-footer__contact {
      grid-column: 1 / -1;
      justify-self: start;
      padding-top: 0;
      text-align: start;
    }

    .site-footer__socials-title,
    .site-footer__socials {
      justify-content: flex-start;
    }
  }

  /* ─── Footer mobile : colonne centrée, liens calés à gauche ───
     Sous 34rem le footer s'organise dans une colonne étroite, centrée
     dans la page (le « container » de la maquette). Titre, texte de
     marque et contact sont centrés DANS cette colonne ; les liens, eux,
     s'alignent sur son bord GAUCHE — c.-à-d. sur le début du texte
     « Un outil conçu… ». */
  @media (width < 34rem) {
    /* La colonne de contenu : largeur fixe et centrée dans la page. Son
       bord GAUCHE sert de ligne d'alignement commune — le texte de marque
       et les liens partent tous les deux de ce bord, donc les liens
       tombent pile sous « Un outil conçu… » (cf. maquette). */
    .site-footer__grid {
      grid-template-columns: 1fr;
      width: min(100%, 19rem);
      margin-inline: auto;
      justify-items: stretch;
    }

    /* Titre « OULA CA DEBORDE » centré (hors grille, sur toute la largeur). */
    .site-footer__title {
      text-align: center;
    }

    /* Colonne de marque : baseline + logo Hemogyn, tout centré. */
    .site-footer__brand {
      display: grid;
      justify-items: center;
    }

    .site-footer__baseline {
      max-width: none;
      text-align: center;
    }

    /* Le texte partenaire (« L'association qui éclaire… ») est retiré en
       mobile, comme sur la maquette. */
    .site-footer__partner-text {
      display: none;
    }

    /* Liens de bas de page centrés, avec un peu d'air sous le dernier
       lien avant le bloc « Contactez-nous ». */
    .site-footer__links {
      justify-items: center;
      text-align: center;
      padding-bottom: var(--sp-lg);
    }

    /* Bloc contact : centré dans la colonne. */
    .site-footer__contact {
      grid-column: 1;
      justify-self: stretch;
      padding-top: 0;
      text-align: center;
    }

    .site-footer__socials-title,
    .site-footer__socials {
      justify-content: center;
    }

    /* « Contactez-nous » un peu plus grand en mobile. */
    .site-footer__socials-title {
      font-size: var(--fs-lead);
    }

    /* Ligne légale : copyright à gauche (en plusieurs lignes), « Mentions
       légales » repoussé à droite sur la même ligne de base, comme sur la
       maquette. On repasse donc à un alignement aux extrémités, ancré en
       haut pour que le lien s'aligne sur la 1re ligne du copyright. */
    .site-footer__legal {
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--sp-md);
      text-align: start;
    }

    .site-footer__legal a {
      flex: none;
      text-align: end;
    }
  }

  /* ─── Bloc « Tu veux en savoir plus ? » ────────────────────
     Partagé par l'écran de résultat du quiz et la page « Explication
     du test » (cf. snippets/more-link.php) : il vit donc dans main.css
     et non dans quiz.css. */
  .more-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-lg);
    width: 100%;
    padding: var(--sp-xl) var(--sp-lg);
    border-radius: var(--radius-lg);
    background: var(--c-lavender);
    text-align: center;
  }

  .more-link__title {
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.2;
  }

  /* Le lien vers Hemogyn est une pilule bordée sur fond blanc :
     un bouton secondaire, moins appuyé que les CTA périwinkle. */
  .more-link__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-lg);
    border: 1px solid var(--c-indigo);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
    color: var(--c-indigo);
    font-size: var(--fs-body);
    text-decoration: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  /* Survol : rose soutenu + ombre portée, comme les cartes-réponses du
     quiz (`.answer-card:hover`). La pilule se teinte au lieu de se
     remplir d'indigo — le pictogramme Hemogyn est en couleur, un fond
     plein le rendrait illisible. Le libellé reste donc en indigo. */
  .more-link__cta:hover,
  .more-link__cta:focus-visible {
    background: var(--c-pink-hover);
    border-color: var(--c-indigo);
    box-shadow: var(--shadow-md);
  }

  /* Clic maintenu : corail vif, comme les CTA périwinkle
     (`.btn--primary:active`) et l'état sélectionné des cartes-réponses. */
  .more-link__cta:active {
    background: var(--c-cta-active);
    box-shadow: none;
  }

  /* Le pictogramme carré d'Hemogyn (`logo_g.png`), comme sur la maquette.
     Carré : hauteur et largeur sont liées, `aspect-ratio` évite de le
     déformer si le fichier déposé au panel ne l'est pas tout à fait. */
  .more-link__logo {
    flex: none;
    width: auto;
    height: 2em;
    aspect-ratio: 1;
    object-fit: contain;
  }

  /* Sur petit écran, logo et libellé côte à côte laissent au texte une
     colonne de quelques mots. On les empile plutôt. */
  @media (width < 30rem) {
    .more-link__cta {
      flex-direction: column;
      gap: var(--sp-xs);
    }
  }

  /* ─── Disclaimer médical (CLAUDE.md §13) ──────────────────── */
  .disclaimer {
    padding: var(--sp-md);
    border-radius: var(--radius-md);
    background: var(--c-lavender);
    color: var(--c-indigo);
    /* Information de santé : elle ne doit pas se lire comme une note de
       bas de page, d'où le corps de texte courant (CLAUDE.md §13). */
    font-size: var(--fs-body);
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-coral  { color: var(--c-coral); }
  .text-indigo { color: var(--c-indigo); }
  .text-muted  { color: var(--c-muted); }

  .flow > * + * {
    margin-top: var(--flow-space, var(--sp-md));
  }

  /* Masque le contenu Alpine avant hydratation (évite le FOUC) */
  [x-cloak] {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS DE VUE (navigation entre pages)

   Activées par <meta name="view-transition" content="same-origin">
   dans le header. Le navigateur fige la page sortante, peint
   l'entrante hors écran, puis croise les deux : plus de flash blanc
   ni de saut au changement de page — y compris accueil → /quiz.
   Sans support (Firefox, Safari ancien), la navigation reste
   normale : rien à polyfiller.
   ═══════════════════════════════════════════════════════════════ */
@view-transition {
  navigation: auto;
}

/* Fondu croisé court. Le défaut du navigateur convient, mais sa durée
   (250ms) est un peu molle sur un parcours qui se veut vif. */
::view-transition-old(root) {
  animation: vt-fade-out 120ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: vt-fade-in 180ms var(--ease-out) both;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Le header et le footer sont identiques d'une page à l'autre : nommés,
   ils sont traités comme un élément persistant et NE clignotent pas
   pendant que le contenu, lui, se croise. */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

@media (prefers-reduced-motion: reduce) {
  /* Aucune animation, mais on garde la transition de vue : elle évite
     à elle seule le flash blanc, même sans fondu. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}