/* ═══════════════════════════════════════════════════════════════════════════
   CallFlow — Design system
   Dérivé des références Heysimon · adapté à un outil de réservation
   Chargé UNE fois depuis base.html. Aucun hexadécimal n'existe hors de ce
   fichier. Zéro CDN : fontes self-hosted, htmx et Alpine vendorisés.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens, base, composants, utilitaires, pages;

/* ───────────────────────────────────────────────────────────────────────────
   FONTES — self-hosted, variables, sous-ensemble latin
   Sora (titres) et Plus Jakarta Sans (texte) : SIL Open Font License 1.1
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.ebe022f74bf5.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-var.c79972eeacb9.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@layer tokens {
  :root {
    /* ═══ PALETTE BRUTE ═══
       Valeurs issues des références. Ne JAMAIS les utiliser directement dans
       un composant : passer par les jetons sémantiques plus bas. */
    --ds-p-encre:          #0d211d;   /* vert-noir : la couleur de la marque */
    --ds-p-papier:         #fcfcfc;
    --ds-p-blanc:          #ffffff;
    --ds-p-brume:          #f5f5f5;

    --ds-p-turquoise:      #6bdbc5;   /* l'accent — ne porte JAMAIS de texte clair */
    --ds-p-persian:        #25a791;   /* turquoise profond : bordures, survol */
    --ds-p-persian-texte:  #1c8170;   /* variante lisible sur fond clair (4,6:1) */

    --ds-p-azur:           #e4f6f6;
    --ds-p-fluo:           #d0ffcc;
    --ds-p-abricot:        #fff0e5;
    --ds-p-lavande:        #dbe1eb;

    --ds-p-succes:         #0ba954;
    --ds-p-succes-texte:   #098442;   /* 4,7:1 sur papier */
    --ds-p-alerte:         #e1c96b;
    --ds-p-alerte-texte:   #87711b;   /* 4,6:1 sur papier */
    --ds-p-danger:         #fb3747;
    --ds-p-danger-texte:   #e70517;   /* 4,6:1 sur papier */

    /* Voiles — l'encre et le blanc à faible opacité, comme dans la référence.
       C'est ce qui permet aux bordures et aux textes secondaires de rester
       cohérents quel que soit le fond. */
    --ds-v-encre-3:        #0d211d08;
    --ds-v-encre-6:        #0d211d0f;
    --ds-v-encre-12:       #0d211d1f;
    --ds-v-encre-24:       #0d211d3d;
    --ds-v-encre-50:       #0d211d80;
    --ds-v-encre-64:        #0d211da3;
    --ds-v-encre-73:       #0d211dba;
    --ds-v-blanc-6:        #ffffff0f;
    --ds-v-blanc-12:       #ffffff1f;
    --ds-v-blanc-24:       #ffffff3d;
    --ds-v-blanc-50:       #ffffff80;
    --ds-v-blanc-73:       #ffffffba;
    --ds-v-turquoise-10:   #6bdbc51a;
    --ds-v-turquoise-20:   #6bdbc533;

    /* ═══ JETONS SÉMANTIQUES (clair par défaut) ═══
       Nommés par RÔLE, jamais par couleur : le jour où l'accent change,
       aucun nom ne ment. Remappés par .ds-inverse. */
    --ds-fond:             var(--ds-p-papier);
    --ds-surface:          var(--ds-p-blanc);
    --ds-surface-creuse:   var(--ds-p-brume);
    --ds-texte:            var(--ds-p-encre);
    --ds-texte-doux:       var(--ds-v-encre-73);
    --ds-texte-tres-doux:  var(--ds-v-encre-64);  /* AA : 5.0 sur fond clair */
    --ds-bordure:          var(--ds-v-encre-12);
    --ds-bordure-douce:    var(--ds-v-encre-6);

    --ds-accent:           var(--ds-p-turquoise);
    --ds-accent-profond:   var(--ds-p-persian);
    --ds-accent-texte:     var(--ds-p-persian-texte);
    --ds-accent-voile:     var(--ds-v-turquoise-20);
    /* Ce qui s'écrit SUR l'accent. Jamais du blanc : 1,67:1. */
    --ds-sur-accent:       var(--ds-p-encre);

    --ds-succes:           var(--ds-p-succes);
    --ds-succes-texte:     var(--ds-p-succes-texte);
    --ds-alerte:           var(--ds-p-alerte);
    --ds-alerte-texte:     var(--ds-p-alerte-texte);
    --ds-danger:           var(--ds-p-danger);
    --ds-danger-texte:     var(--ds-p-danger-texte);

    /* Tranches horaires — codage fonctionnel du parcours SVI et du planning.
       Quatre teintes pâles qui portent toutes le texte encre à plus de 12:1. */
    --ds-tranche-matin:       var(--ds-p-azur);
    --ds-tranche-midi:        var(--ds-p-fluo);
    --ds-tranche-apres-midi:  var(--ds-p-abricot);
    --ds-tranche-soir:        var(--ds-p-lavande);

    /* ═══ TYPOGRAPHIE ═══ */
    --ds-police-titre:   "Sora", ui-sans-serif, system-ui, sans-serif;
    --ds-police-texte:   "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --ds-police-donnee:  "Plus Jakarta Sans", ui-monospace, monospace;

    --ds-graisse-normale:  400;
    --ds-graisse-moyenne:  500;
    --ds-graisse-forte:    600;

    /* Interlettrage serré des titres : c'est la signature typographique
       reprise de la référence. */
    --ds-interlettrage-titre:  -0.045em;
    --ds-interlettrage-texte:  -0.007em;
    --ds-interligne-titre:     1.12;
    --ds-interligne-texte:     1.5;   /* 1.5 et non 1.4 : lisibilité outil */

    /* Échelle en rem — l'em de la référence compose dans les imbrications,
       ce qu'un outil dense ne pardonne pas. */
    --ds-t-mini:     0.6875rem;   /* 11px */
    --ds-t-xs:       0.75rem;     /* 12px */
    --ds-t-s:        0.875rem;    /* 14px */
    --ds-t-m:        1rem;        /* 16px */
    --ds-t-l:        1.125rem;    /* 18px */
    --ds-t-xl:       1.375rem;    /* 22px */
    --ds-t-h3:       1.5rem;      /* 24px */
    --ds-t-h2:       1.875rem;    /* 30px */
    --ds-t-h1:       2.25rem;     /* 36px */
    --ds-t-affiche:  3rem;        /* 48px — réservé aux moments publics */

    /* ═══ ESPACEMENT — échelle fermée de 4px ═══
       Une valeur hors échelle signifie que l'échelle est mal calibrée. */
    --ds-e-1:   0.25rem;
    --ds-e-2:   0.5rem;
    --ds-e-3:   0.75rem;
    --ds-e-4:   1rem;
    --ds-e-5:   1.25rem;
    --ds-e-6:   1.5rem;
    --ds-e-8:   2rem;
    --ds-e-10:  2.5rem;
    --ds-e-12:  3rem;
    --ds-e-16:  4rem;

    /* ═══ FORME ═══ */
    --ds-rayon-xs:   0.375rem;
    --ds-rayon-s:    0.625rem;
    --ds-rayon-m:    0.875rem;
    --ds-rayon-l:    1.25rem;
    --ds-rayon-xl:   1.75rem;
    --ds-rayon-pilule: 999em;

    /* Ombres en couches, empruntées au principe de la référence : plusieurs
       passes très faibles teintées d'encre plutôt qu'un flou gris unique. */
    --ds-ombre-xs: 0 0 0 1px var(--ds-v-encre-3),
                   0 1px 2px -1px var(--ds-v-encre-6);
    --ds-ombre-s:  0 0 0 1px var(--ds-v-encre-3),
                   0 1px 2px -1px var(--ds-v-encre-6),
                   0 4px 8px -4px var(--ds-v-encre-6);
    --ds-ombre-m:  0 0 0 1px var(--ds-v-encre-3),
                   0 2px 4px -2px var(--ds-v-encre-6),
                   0 8px 16px -8px var(--ds-v-encre-12);
    --ds-ombre-l:  0 0 0 1px var(--ds-v-encre-3),
                   0 4px 8px -4px var(--ds-v-encre-6),
                   0 16px 32px -12px var(--ds-v-encre-12),
                   0 32px 48px -24px var(--ds-v-encre-12);
    --ds-halo-accent: 0 0 0 3px var(--ds-accent-voile);

    /* ═══ MOUVEMENT ═══ */
    --ds-duree-rapide:  140ms;
    --ds-duree-normale: 220ms;
    --ds-courbe:        cubic-bezier(0.4, 0, 0.2, 1);

    /* ═══ STRUCTURE ═══ */
    --ds-largeur-sidebar:   16.5rem;
    --ds-hauteur-topbar:    4rem;
    --ds-largeur-contenu:   78rem;
    --ds-largeur-tunnel:    44rem;   /* colonne du parcours de réservation */
    --ds-z-tiroir:          40;
    --ds-z-toasts:          60;
  }

  /* Surfaces sombres — le même mécanisme que la référence, mais utilisé
     structurellement (barre latérale) plutôt que par alternance de sections. */
  .ds-inverse {
    --ds-fond:            var(--ds-p-encre);
    --ds-surface:         var(--ds-p-encre);
    --ds-surface-creuse:  var(--ds-v-blanc-6);
    --ds-texte:           var(--ds-p-blanc);
    --ds-texte-doux:      var(--ds-v-blanc-73);
    --ds-texte-tres-doux: var(--ds-v-blanc-50);
    --ds-bordure:         var(--ds-v-blanc-12);
    --ds-bordure-douce:   var(--ds-v-blanc-6);
    /* Sur fond sombre le turquoise devient lisible (10:1) : il peut enfin
       porter du texte. */
    --ds-accent-texte:    var(--ds-p-turquoise);
    background-color: var(--ds-fond);
    color: var(--ds-texte);
  }
}

@layer base {
  /* Lien d'évitement — WCAG 2.4.1. Hors écran jusqu'au focus clavier. */
  .ds-evitement {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--ds-p-encre);
    color: var(--ds-p-blanc);
    border-radius: var(--ds-rayon-m, 8px);
    font-weight: var(--ds-graisse-moyenne, 600);
    transition: top var(--ds-duree-rapide, 120ms) ease;
  }
  .ds-evitement:focus { top: 1rem; }

  *, *::before, *::after { box-sizing: border-box; }

  /* Tant qu'Alpine n'a pas initialisé le sous-arbre, on le cache : évite que
     le tiroir n'apparaisse une fraction de seconde au chargement. */
  [x-cloak] { display: none !important; }

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

  body {
    margin: 0;
    background-color: var(--ds-fond);
    color: var(--ds-texte);
    font-family: var(--ds-police-texte);
    font-size: var(--ds-t-m);
    font-weight: var(--ds-graisse-normale);
    line-height: var(--ds-interligne-texte);
    letter-spacing: var(--ds-interlettrage-texte);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--ds-police-titre);
    font-weight: var(--ds-graisse-forte);
    letter-spacing: var(--ds-interlettrage-titre);
    line-height: var(--ds-interligne-titre);
    text-wrap: balance;
  }
  h1 { font-size: var(--ds-t-h1); }
  h2 { font-size: var(--ds-t-h2); }
  h3 { font-size: var(--ds-t-h3); }
  h4 { font-size: var(--ds-t-xl); }
  h5 { font-size: var(--ds-t-l); }
  h6 { font-size: var(--ds-t-m); }

  p { margin: 0; text-wrap: pretty; }

  a {
    color: inherit;
    text-decoration-color: var(--ds-v-encre-24);
    text-underline-offset: 0.2em;
  }
  a:hover { text-decoration-color: currentColor; }

  img, svg { display: block; max-width: 100%; }

  /* Le focus est toujours visible. Jamais d'outline:none sans remplacement. */
  :focus-visible {
    outline: 2px solid var(--ds-accent-profond);
    outline-offset: 2px;
    border-radius: var(--ds-rayon-xs);
  }

  ::selection { background: var(--ds-accent-voile); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer composants {

  /* ─────────────────────────────────────────────────────────────────────────
     BOUTON — pilule, à la manière de la référence.
     Cible tactile minimale 44px sur la taille « grande ».
     ───────────────────────────────────────────────────────────────────────── */
  .ds-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-e-2);
    padding: 0.625rem 1.25rem;
    min-height: 2.5rem;
    border: 1px solid transparent;
    border-radius: var(--ds-rayon-pilule);
    background: var(--ds-texte);
    color: var(--ds-fond);
    font-family: inherit;
    font-size: var(--ds-t-s);
    font-weight: var(--ds-graisse-forte);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ds-duree-rapide) var(--ds-courbe),
                box-shadow var(--ds-duree-rapide) var(--ds-courbe),
                transform var(--ds-duree-rapide) var(--ds-courbe);
  }
  .ds-bouton:hover { transform: translateY(-1px); box-shadow: var(--ds-ombre-m); }
  .ds-bouton:active { transform: translateY(0); }
  .ds-bouton[disabled], .ds-bouton[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
  }

  .ds-bouton--accent {
    background: var(--ds-accent);
    color: var(--ds-sur-accent);          /* encre, jamais blanc */
    border-color: var(--ds-accent-profond);
  }
  .ds-bouton--accent:hover { background: var(--ds-accent-profond); }

  .ds-bouton--secondaire {
    background: var(--ds-surface);
    color: var(--ds-texte);
    border-color: var(--ds-bordure);
    box-shadow: var(--ds-ombre-xs);
  }
  .ds-bouton--secondaire:hover { background: var(--ds-surface-creuse); }

  .ds-bouton--discret {
    background: transparent;
    color: var(--ds-texte-doux);
    border-color: transparent;
  }
  .ds-bouton--discret:hover {
    background: var(--ds-surface-creuse); color: var(--ds-texte); box-shadow: none;
  }

  .ds-bouton--danger { background: var(--ds-danger-texte); color: var(--ds-p-blanc); }

  .ds-bouton--grand {
    padding: 0.875rem 1.75rem;
    min-height: 3rem;
    font-size: var(--ds-t-m);
  }
  .ds-bouton--pleine-largeur { width: 100%; }

  /* La flèche glisse au survol — seul mouvement décoratif conservé. */
  .ds-bouton__fleche {
    width: 1.125em; height: 1.125em; flex-shrink: 0;
    transition: transform var(--ds-duree-normale) var(--ds-courbe);
  }
  .ds-bouton:hover .ds-bouton__fleche { transform: translateX(0.2em); }

  /* ─────────────────────────────────────────────────────────────────────────
     FORMULAIRE
     ───────────────────────────────────────────────────────────────────────── */
  .ds-champ-groupe { display: flex; flex-direction: column; gap: var(--ds-e-2); }

  .ds-label {
    font-size: var(--ds-t-s);
    font-weight: var(--ds-graisse-moyenne);
    color: var(--ds-texte);
  }
  .ds-label__requis { color: var(--ds-danger-texte); }

  .ds-champ {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    background: var(--ds-surface);
    color: var(--ds-texte);
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-rayon-m);
    font-family: inherit;
    font-size: var(--ds-t-m);
    font-weight: var(--ds-graisse-moyenne);
    transition: border-color var(--ds-duree-rapide) var(--ds-courbe),
                box-shadow var(--ds-duree-rapide) var(--ds-courbe);
  }
  .ds-champ::placeholder { color: var(--ds-texte-tres-doux); font-weight: 400; }
  .ds-champ:focus {
    outline: none;
    border-color: var(--ds-accent-profond);
    box-shadow: var(--ds-halo-accent);
  }
  .ds-champ[aria-invalid="true"] { border-color: var(--ds-danger-texte); }
  .ds-champ--zone { min-height: 8rem; resize: vertical; }

  .ds-aide  { font-size: var(--ds-t-s); color: var(--ds-texte-doux); }
  .ds-erreur {
    display: flex; align-items: center; gap: var(--ds-e-2);
    font-size: var(--ds-t-s); font-weight: var(--ds-graisse-moyenne);
    color: var(--ds-danger-texte);
  }

  /* Code à usage unique — un caractère par case. */
  .ds-otp { display: flex; gap: var(--ds-e-3); }
  .ds-otp .ds-champ {
    width: 3.5rem; height: 4rem; padding: 0;
    text-align: center;
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-h2);
    font-variant-numeric: tabular-nums;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     CARTE
     ───────────────────────────────────────────────────────────────────────── */
  .ds-carte {
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure-douce);
    border-radius: var(--ds-rayon-l);
    box-shadow: var(--ds-ombre-s);
    padding: var(--ds-e-5);
  }
  .ds-carte--plate { box-shadow: none; }
  .ds-carte--large { border-radius: var(--ds-rayon-xl); padding: var(--ds-e-8); }
  .ds-carte__titre {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ds-e-4); margin-bottom: var(--ds-e-4);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     ÉTIQUETTE — état d'une réservation, d'un envoi, d'un appel
     ───────────────────────────────────────────────────────────────────────── */
  .ds-etiquette {
    display: inline-flex; align-items: center; gap: var(--ds-e-1);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--ds-rayon-xs);
    background: var(--ds-surface-creuse);
    color: var(--ds-texte-doux);
    font-size: var(--ds-t-xs);
    font-weight: var(--ds-graisse-forte);
    line-height: 1.4;
    white-space: nowrap;
  }
  .ds-etiquette::before {
    content: ""; width: 0.375rem; height: 0.375rem;
    border-radius: 50%; background: currentColor; flex-shrink: 0;
  }
  .ds-etiquette--confirmee { background: var(--ds-v-turquoise-20); color: var(--ds-accent-texte); }
  .ds-etiquette--succes    { background: color-mix(in srgb, var(--ds-succes) 14%, transparent); color: var(--ds-succes-texte); }
  .ds-etiquette--alerte    { background: color-mix(in srgb, var(--ds-alerte) 22%, transparent); color: var(--ds-alerte-texte); }
  .ds-etiquette--danger    { background: color-mix(in srgb, var(--ds-danger) 12%, transparent); color: var(--ds-danger-texte); }
  .ds-etiquette--neutre::before { display: none; }

  /* ─────────────────────────────────────────────────────────────────────────
     ★ PASTILLE DE CRÉNEAU — l'élément signature
     La place est la ressource rare du produit ; la contrainte
     places_reservees <= capacite est le cœur technique du système.
     Cette pastille EST cette contrainte, rendue visible.
     La jauge est alimentée par data-taux, posée en CSSOM par shell.js
     (pas de style inline : la CSP l'interdirait).
     ───────────────────────────────────────────────────────────────────────── */
  .ds-creneau {
    --ds-taux: 0%;
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.125rem;
    min-width: 6.5rem;
    padding: var(--ds-e-3) var(--ds-e-4) var(--ds-e-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-rayon-m);
    box-shadow: var(--ds-ombre-xs);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--ds-duree-rapide) var(--ds-courbe),
                box-shadow var(--ds-duree-rapide) var(--ds-courbe),
                transform var(--ds-duree-rapide) var(--ds-courbe);
  }
  .ds-creneau:hover { transform: translateY(-2px); box-shadow: var(--ds-ombre-m); }

  .ds-creneau__heure {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-l);
    font-weight: var(--ds-graisse-forte);
    letter-spacing: var(--ds-interlettrage-titre);
    font-variant-numeric: tabular-nums;
    color: var(--ds-texte);
  }
  .ds-creneau__places {
    font-size: var(--ds-t-xs);
    font-weight: var(--ds-graisse-moyenne);
    color: var(--ds-texte-doux);
  }
  /* La jauge : rail sur toute la largeur, remplissage = taux d'occupation. */
  .ds-creneau__jauge {
    position: absolute; inset: auto 0 0 0;
    height: 0.25rem;
    background: var(--ds-v-encre-6);
  }
  .ds-creneau__jauge::after {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: var(--ds-taux);
    background: var(--ds-accent);
    transition: width var(--ds-duree-normale) var(--ds-courbe);
  }

  .ds-creneau[data-etat="tension"] { border-color: var(--ds-alerte); }
  .ds-creneau[data-etat="tension"] .ds-creneau__places { color: var(--ds-alerte-texte); }
  .ds-creneau[data-etat="tension"] .ds-creneau__jauge::after {
    background: var(--ds-alerte);
  }

  .ds-creneau[data-etat="complet"] {
    background: var(--ds-surface-creuse);
    border-style: dashed;
    box-shadow: none;
    cursor: not-allowed;
  }
  .ds-creneau[data-etat="complet"] .ds-creneau__heure { color: var(--ds-texte-tres-doux); }
  .ds-creneau[data-etat="complet"]:hover { transform: none; box-shadow: none; }
  .ds-creneau[data-etat="complet"] .ds-creneau__jauge::after {
    width: 100%; background: var(--ds-v-encre-24);
  }

  .ds-creneau[aria-pressed="true"], .ds-creneau[data-etat="choisi"] {
    background: var(--ds-texte);
    border-color: var(--ds-texte);
  }
  .ds-creneau[aria-pressed="true"] .ds-creneau__heure,
  .ds-creneau[data-etat="choisi"] .ds-creneau__heure { color: var(--ds-p-blanc); }
  .ds-creneau[aria-pressed="true"] .ds-creneau__places,
  .ds-creneau[data-etat="choisi"] .ds-creneau__places { color: var(--ds-v-blanc-73); }
  .ds-creneau[aria-pressed="true"] .ds-creneau__jauge,
  .ds-creneau[data-etat="choisi"] .ds-creneau__jauge { background: var(--ds-v-blanc-12); }

  .ds-creneaux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--ds-e-3);
  }

  /* Jauge autonome — réutilisée en back-office (taux de remplissage du jour). */
  .ds-jauge {
    --ds-taux: 0%;
    position: relative; height: 0.5rem; width: 100%;
    background: var(--ds-v-encre-6);
    border-radius: var(--ds-rayon-pilule);
    overflow: hidden;
  }
  .ds-jauge::after {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: var(--ds-taux);
    background: var(--ds-accent);
    border-radius: inherit;
    transition: width var(--ds-duree-normale) var(--ds-courbe);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     TRANCHES HORAIRES — le segment du tunnel, calqué sur le menu vocal
     ───────────────────────────────────────────────────────────────────────── */
  .ds-tranches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-e-3); }
  @media (min-width: 40rem) { .ds-tranches { grid-template-columns: repeat(4, 1fr); } }

  .ds-tranche {
    display: flex; flex-direction: column; gap: var(--ds-e-1);
    padding: var(--ds-e-4);
    min-height: 5rem;
    border: 1px solid var(--ds-bordure);
    border-radius: var(--ds-rayon-m);
    background: var(--ds-surface);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--ds-duree-rapide) var(--ds-courbe),
                box-shadow var(--ds-duree-rapide) var(--ds-courbe);
  }
  .ds-tranche:hover { box-shadow: var(--ds-ombre-s); }
  .ds-tranche[data-tranche="matin"]       { background: var(--ds-tranche-matin); }
  .ds-tranche[data-tranche="midi"]        { background: var(--ds-tranche-midi); }
  .ds-tranche[data-tranche="apres-midi"]  { background: var(--ds-tranche-apres-midi); }
  .ds-tranche[data-tranche="soir"]        { background: var(--ds-tranche-soir); }
  .ds-tranche[aria-pressed="true"] {
    border-color: var(--ds-texte);
    box-shadow: var(--ds-ombre-m);
  }
  .ds-tranche__nom {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-m);
    font-weight: var(--ds-graisse-forte);
    letter-spacing: var(--ds-interlettrage-titre);
  }
  .ds-tranche__détail, .ds-tranche__detail {
    font-size: var(--ds-t-xs);
    color: var(--ds-v-encre-73);
    font-weight: var(--ds-graisse-moyenne);
  }
  .ds-tranche[disabled] { opacity: 0.4; cursor: not-allowed; }

  /* ─────────────────────────────────────────────────────────────────────────
     ÉTAPES — le tunnel web reproduit l'entonnoir du SVI
     ───────────────────────────────────────────────────────────────────────── */
  .ds-etapes {
    display: flex; align-items: center; gap: var(--ds-e-2);
    list-style: none; margin: 0; padding: 0;
  }
  .ds-etape {
    display: flex; align-items: center; gap: var(--ds-e-2);
    font-size: var(--ds-t-xs);
    font-weight: var(--ds-graisse-forte);
    color: var(--ds-texte-tres-doux);
  }
  .ds-etape__puce {
    display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--ds-bordure);
    font-variant-numeric: tabular-nums;
  }
  .ds-etape[aria-current="step"] { color: var(--ds-texte); }
  .ds-etape[aria-current="step"] .ds-etape__puce {
    background: var(--ds-accent); border-color: var(--ds-accent-profond);
    color: var(--ds-sur-accent);
  }
  .ds-etape[data-fait="true"] { color: var(--ds-accent-texte); }
  .ds-etape[data-fait="true"] .ds-etape__puce {
    background: var(--ds-accent-voile); border-color: transparent;
    color: var(--ds-accent-texte);
  }
  .ds-etape + .ds-etape::before {
    content: ""; width: 1.25rem; height: 1px;
    background: var(--ds-bordure); margin-right: var(--ds-e-2);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     TABLEAU — densité back-office
     ───────────────────────────────────────────────────────────────────────── */
  .ds-tableau-cadre {
    background: var(--ds-surface);
    border: 1px solid var(--ds-bordure-douce);
    border-radius: var(--ds-rayon-l);
    box-shadow: var(--ds-ombre-s);
    overflow: hidden;
  }
  .ds-tableau { width: 100%; border-collapse: collapse; font-size: var(--ds-t-s); }
  .ds-tableau th {
    padding: var(--ds-e-3) var(--ds-e-4);
    background: var(--ds-surface-creuse);
    border-bottom: 1px solid var(--ds-bordure);
    text-align: left;
    font-size: var(--ds-t-xs);
    font-weight: var(--ds-graisse-forte);
    color: var(--ds-texte-doux);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ds-tableau td {
    padding: var(--ds-e-3) var(--ds-e-4);
    border-bottom: 1px solid var(--ds-bordure-douce);
  }
  .ds-tableau tbody tr:last-child td { border-bottom: none; }
  /* Ligne navigable : c'est htmx qui porte le comportement, pas un onclick. */
  .ds-tableau tbody tr[hx-get] { cursor: pointer; }
  .ds-tableau tbody tr[hx-get]:hover { background: var(--ds-surface-creuse); }
  .ds-tableau__nombre { font-variant-numeric: tabular-nums; text-align: right; }

  /* ─────────────────────────────────────────────────────────────────────────
     BARRE LATÉRALE — la dualité clair/sombre de la référence,
     appliquée horizontalement plutôt que par alternance de sections
     ───────────────────────────────────────────────────────────────────────── */
  .ds-sidebar {
    grid-area: sidebar;
    display: flex; flex-direction: column; gap: var(--ds-e-6);
    width: var(--ds-largeur-sidebar);
    padding: var(--ds-e-5) var(--ds-e-4);
    overflow-y: auto;
  }
  .ds-marque { display: flex; align-items: center; gap: var(--ds-e-3); padding: 0 var(--ds-e-2); }
  .ds-marque__nom {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-l);
    font-weight: var(--ds-graisse-forte);
    letter-spacing: var(--ds-interlettrage-titre);
  }
  .ds-marque__signe {
    display: grid; place-items: center;
    width: 2rem; height: 2rem;
    border-radius: var(--ds-rayon-s);
    background: var(--ds-accent);
    color: var(--ds-p-encre);
  }
  .ds-nav { display: flex; flex-direction: column; gap: var(--ds-e-1); }
  .ds-nav__titre {
    padding: var(--ds-e-2) var(--ds-e-2) var(--ds-e-1);
    font-size: var(--ds-t-mini);
    font-weight: var(--ds-graisse-forte);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-texte-tres-doux);
  }
  .ds-nav__lien {
    position: relative;
    display: flex; align-items: center; gap: var(--ds-e-3);
    padding: var(--ds-e-2) var(--ds-e-3);
    border-radius: var(--ds-rayon-s);
    color: var(--ds-texte-doux);
    font-size: var(--ds-t-s);
    font-weight: var(--ds-graisse-moyenne);
    text-decoration: none;
    transition: background-color var(--ds-duree-rapide) var(--ds-courbe),
                color var(--ds-duree-rapide) var(--ds-courbe);
  }
  .ds-nav__lien:hover { background: var(--ds-surface-creuse); color: var(--ds-texte); }
  /* Actif : rail turquoise + voile. Pas de pilule pleine — elle exigerait un
     texte clair sur turquoise, illisible (1,67:1). */
  .ds-nav__lien[aria-current="page"] {
    background: var(--ds-v-turquoise-10);
    color: var(--ds-accent-texte);
    font-weight: var(--ds-graisse-forte);
  }
  .ds-nav__lien[aria-current="page"]::before {
    content: "";
    position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; border-radius: var(--ds-rayon-pilule);
    background: var(--ds-accent);
  }
  .ds-nav__icone { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
  .ds-nav__compteur {
    margin-left: auto;
    padding: 0 0.375rem;
    border-radius: var(--ds-rayon-pilule);
    background: var(--ds-accent);
    color: var(--ds-p-encre);
    font-size: var(--ds-t-mini);
    font-weight: var(--ds-graisse-forte);
    font-variant-numeric: tabular-nums;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     BARRE HAUTE
     ───────────────────────────────────────────────────────────────────────── */
  .ds-topbar {
    grid-area: topbar;
    display: flex; align-items: center; gap: var(--ds-e-4);
    height: var(--ds-hauteur-topbar);
    padding: 0 var(--ds-e-6);
    background: var(--ds-fond);
    border-bottom: 1px solid var(--ds-bordure-douce);
  }
  .ds-fil {
    display: flex; align-items: center; gap: var(--ds-e-2);
    font-size: var(--ds-t-s); color: var(--ds-texte-doux);
  }
  .ds-fil__sep { color: var(--ds-texte-tres-doux); }
  .ds-fil [aria-current="page"] { color: var(--ds-texte); font-weight: var(--ds-graisse-forte); }

  /* ─────────────────────────────────────────────────────────────────────────
     BANDEAU — mode dégradé (RG-05), fermeture, information
     ───────────────────────────────────────────────────────────────────────── */
  .ds-bandeau {
    display: flex; align-items: flex-start; gap: var(--ds-e-3);
    padding: var(--ds-e-3) var(--ds-e-4);
    border-radius: var(--ds-rayon-m);
    background: var(--ds-tranche-matin);
    color: var(--ds-p-encre);
    font-size: var(--ds-t-s);
  }
  .ds-bandeau--alerte { background: color-mix(in srgb, var(--ds-alerte) 28%, var(--ds-p-blanc)); }
  .ds-bandeau--danger { background: color-mix(in srgb, var(--ds-danger) 14%, var(--ds-p-blanc)); }
  .ds-bandeau__icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }

  /* ─────────────────────────────────────────────────────────────────────────
     TOASTS — hôte singleton du shell, jamais swappé
     ───────────────────────────────────────────────────────────────────────── */
  .ds-toasts {
    position: fixed; inset: auto var(--ds-e-6) var(--ds-e-6) auto;
    z-index: var(--ds-z-toasts);
    display: flex; flex-direction: column; align-items: flex-end;
    gap: var(--ds-e-2);
    pointer-events: none;
  }
  .ds-toast {
    display: flex; align-items: center; gap: var(--ds-e-2);
    padding: var(--ds-e-3) var(--ds-e-4);
    max-width: 24rem;
    background: var(--ds-p-blanc);
    color: var(--ds-p-encre);
    border-radius: var(--ds-rayon-m);
    box-shadow: var(--ds-ombre-l);
    font-size: var(--ds-t-s);
    font-weight: var(--ds-graisse-moyenne);
    pointer-events: auto;
    animation: ds-toast-entree var(--ds-duree-normale) var(--ds-courbe);
  }
  .ds-toast__icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  .ds-toast--success .ds-toast__icone { color: var(--ds-succes-texte); }
  .ds-toast--warning .ds-toast__icone { color: var(--ds-alerte-texte); }
  .ds-toast--danger  .ds-toast__icone { color: var(--ds-danger-texte); }
  @keyframes ds-toast-entree {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }

  /* ─────────────────────────────────────────────────────────────────────────
     TIROIR — singleton du shell (détail sans quitter la liste)
     ───────────────────────────────────────────────────────────────────────── */
  .ds-tiroir-fond {
    position: fixed; inset: 0; z-index: var(--ds-z-tiroir);
    background: var(--ds-v-encre-50);
    backdrop-filter: blur(2px);
  }
  .ds-tiroir {
    position: fixed; inset: 0 0 0 auto; z-index: calc(var(--ds-z-tiroir) + 1);
    width: min(34rem, 100vw);
    display: flex; flex-direction: column;
    background: var(--ds-fond);
    box-shadow: var(--ds-ombre-l);
  }
  .ds-tiroir__tete {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ds-e-4);
    padding: var(--ds-e-5) var(--ds-e-6);
    border-bottom: 1px solid var(--ds-bordure-douce);
  }
  .ds-tiroir__corps { flex: 1; overflow-y: auto; padding: var(--ds-e-6); }

  /* ─────────────────────────────────────────────────────────────────────────
     ÉTAT VIDE
     ───────────────────────────────────────────────────────────────────────── */
  .ds-vide {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--ds-e-3);
    padding: var(--ds-e-12) var(--ds-e-6);
    border: 1px dashed var(--ds-bordure);
    border-radius: var(--ds-rayon-l);
    text-align: center;
    color: var(--ds-texte-doux);
  }
  .ds-vide__titre {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-l);
    font-weight: var(--ds-graisse-forte);
    color: var(--ds-texte);
  }

  /* ─────────────────────────────────────────────────────────────────────────
     SOLDE DE CRÉDITS — l'information la plus consultée
     ───────────────────────────────────────────────────────────────────────── */
  .ds-solde {
    display: flex; align-items: baseline; gap: var(--ds-e-2);
    font-family: var(--ds-police-titre);
    letter-spacing: var(--ds-interlettrage-titre);
  }
  .ds-solde__valeur {
    font-size: var(--ds-t-h1);
    font-weight: var(--ds-graisse-forte);
    font-variant-numeric: tabular-nums;
  }
  .ds-solde__unite { font-size: var(--ds-t-m); color: var(--ds-texte-doux); }
  .ds-solde--perime .ds-solde__valeur { color: var(--ds-texte-doux); }
}

@layer utilitaires {
  .ds-pile      { display: flex; flex-direction: column; }
  .ds-rangee    { display: flex; align-items: center; }
  .ds-entre     { justify-content: space-between; }
  .ds-enroule   { flex-wrap: wrap; }
  .ds-g-1 { gap: var(--ds-e-1); } .ds-g-2 { gap: var(--ds-e-2); }
  .ds-g-3 { gap: var(--ds-e-3); } .ds-g-4 { gap: var(--ds-e-4); }
  .ds-g-6 { gap: var(--ds-e-6); } .ds-g-8 { gap: var(--ds-e-8); }

  .ds-t-mini { font-size: var(--ds-t-mini); }
  .ds-t-xs   { font-size: var(--ds-t-xs); }
  .ds-t-s    { font-size: var(--ds-t-s); }
  .ds-t-l    { font-size: var(--ds-t-l); }
  .ds-doux   { color: var(--ds-texte-doux); }
  .ds-tres-doux { color: var(--ds-texte-tres-doux); }
  .ds-fort   { font-weight: var(--ds-graisse-forte); }
  .ds-moyen  { font-weight: var(--ds-graisse-moyenne); }
  .ds-titre-police { font-family: var(--ds-police-titre); letter-spacing: var(--ds-interlettrage-titre); }
  .ds-nombre { font-variant-numeric: tabular-nums; }

  .ds-grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--ds-e-4); }
  .ds-grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ds-e-4); }

  .ds-invisible {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ds-separateur { height: 1px; background: var(--ds-bordure-douce); border: 0; margin: 0; }
  .ds-titre-page { font-size: var(--ds-t-h2); }
  .ds-marge-haut { margin-top: var(--ds-e-6); }
  .ds-pousse-bas    { margin-top: auto; }
  .ds-pousse-droite { margin-left: auto; }

  /* Le bouton de navigation mobile n'existe qu'en dessous du seuil de coque.
     Piloté par media query, jamais par un style="display:none" inline. */
  .ds-bascule-nav { display: none; }
  @media (max-width: 60rem) { .ds-bascule-nav { display: inline-flex; } }
}

@layer pages {
  /* ─── Coque back-office : sidebar sombre + contenu clair ─── */
  .ds-coque {
    display: grid;
    grid-template-areas: "sidebar topbar" "sidebar contenu";
    grid-template-columns: var(--ds-largeur-sidebar) 1fr;
    grid-template-rows: var(--ds-hauteur-topbar) 1fr;
    min-height: 100vh;
  }
  .ds-contenu {
    grid-area: contenu;
    padding: var(--ds-e-6);
    max-width: var(--ds-largeur-contenu);
  }
  @media (max-width: 60rem) {
    .ds-coque { grid-template-areas: "topbar" "contenu"; grid-template-columns: 1fr; }
    .ds-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--ds-z-tiroir);
                  transform: translateX(-100%); transition: transform var(--ds-duree-normale) var(--ds-courbe); }
    .ds-sidebar[data-ouverte="true"] { transform: none; }
  }

  /* ─── Coque publique : colonne unique, cibles larges ─── */
  .ds-tunnel {
    width: 100%;
    max-width: var(--ds-largeur-tunnel);
    margin: 0 auto;
    padding: var(--ds-e-8) var(--ds-e-4) var(--ds-e-16);
    display: flex; flex-direction: column; gap: var(--ds-e-6);
  }
  .ds-tunnel .ds-bouton { min-height: 3rem; }
  .ds-tunnel__question {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-h2);
    font-weight: var(--ds-graisse-forte);
    letter-spacing: var(--ds-interlettrage-titre);
  }

  /* ─── Bandeau d'appel : rappelle que le service existe aussi au téléphone ─── */
  .ds-rappel-tel {
    display: flex; align-items: center; gap: var(--ds-e-3);
    padding: var(--ds-e-4) var(--ds-e-5);
    border-radius: var(--ds-rayon-l);
    background: var(--ds-p-encre);
    color: var(--ds-p-blanc);
  }
  .ds-rappel-tel__numero {
    font-family: var(--ds-police-titre);
    font-size: var(--ds-t-l);
    font-weight: var(--ds-graisse-forte);
    font-variant-numeric: tabular-nums;
    color: var(--ds-p-turquoise);   /* 10:1 sur l'encre — lisible ici, et ici seulement */
  }
}

/* ── Landing publique ──────────────────────────────────────────────────── */
@layer composants {
  .ds-landing {
    max-width: var(--ds-largeur-contenu);
    margin: 0 auto;
    padding: var(--ds-e-8) var(--ds-e-5) var(--ds-e-16);
    display: flex;
    flex-direction: column;
    gap: var(--ds-e-16);
  }

  .ds-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-e-5);
    padding: var(--ds-e-12) var(--ds-e-4);
  }
  .ds-hero--final {
    background: var(--ds-accent-voile);
    border: 1px solid var(--ds-bordure-douce);
    border-radius: var(--ds-courbe);
    padding: var(--ds-e-12) var(--ds-e-6);
  }
  .ds-hero__sur {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--ds-t-xs);
    font-weight: var(--ds-graisse-moyenne);
    color: var(--ds-accent-profond);
    margin: 0;
  }
  .ds-hero__titre {
    font-size: var(--ds-t-affiche);
    line-height: var(--ds-interligne-titre);
    letter-spacing: var(--ds-interlettrage-titre);
    max-width: 18ch;
    margin: 0;
  }
  .ds-hero__sous {
    font-size: var(--ds-t-l);
    color: var(--ds-doux, var(--ds-p-encre));
    max-width: 52ch;
    line-height: var(--ds-interligne-texte);
    margin: 0;
  }
  .ds-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e-3);
    justify-content: center;
    margin-top: var(--ds-e-2);
  }
  .ds-hero__preuves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-e-2) var(--ds-e-5);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: var(--ds-e-4) 0 0;
    font-size: var(--ds-t-s);
    color: var(--ds-p-encre);
  }
  .ds-hero__preuves li { display: flex; align-items: center; gap: var(--ds-e-2); }
  .ds-hero__preuves li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ds-accent);
  }

  .ds-section { display: flex; flex-direction: column; gap: var(--ds-e-6); }
    .ds-landing__pied {
    text-align: center;
    padding-top: var(--ds-e-8);
    border-top: 1px solid var(--ds-bordure-douce);
  }
  .ds-section__titre {
    font-size: var(--ds-t-h2);
    letter-spacing: var(--ds-interlettrage-titre);
    text-align: center;
    margin: 0;
  }
}