/* =============================================================================
   Composants LoopDay — la bibliothèque complète du gabarit, reprise telle quelle.
   =============================================================================

   Décision Musa (08/09/2026) : l'application entière — back-office commerçant ET
   écrans du client final — porte l'apparence du gabarit LoopDay, sans réinterprétation.

   ⚠️ AUCUNE COTE DE CE FICHIER N'EST ESTIMÉE. Toutes sont relevées dans
   « LoopDay - Habit Tracker Mobile App.sketch » (planches Button, Input Field,
   Component, Element + les dix écrans), pas mesurées sur les PNG : sur un export
   à 2×, deux boutons de même hauteur se lisent 57 px et 42 px selon le bord qu'on
   choisit. Si tu dois changer une valeur ici, retourne d'abord la lire dans le
   .sketch — c'est la seule source qui fait foi.

   Ce que le relevé donne, et qu'il faut respecter :

     planche de référence   440 × 956, marges latérales 30, bloc utile 380
     bouton pilule          379 × 55, rayon 28, texte 16 gras
     petit bouton pilule    79 × 32
     bouton rond            50 × 50   ·  rond d'action d'en-tête : 56 × 56
     champ de saisie        379 × 55, rayon 28
     barre de recherche     379 × 55, rayon 28, contenu à 18
     onglet-filtre          h. 56, rayon 28, padding 32, texte 16 gras, écart 15
     ligne de liste         380 × 108, rayon 30, padding 15, écart 15
     carte accent           380 × 103, rayon 30
     carte statistique      182 × 73, rayon 30 (2 par ligne, écart 16)
     panneau                379 × 216, rayon 30, padding 26/21
     barre d'onglets        440 × 84, icônes 24, SANS libellé
     média de détail        440 × 413, feuille remontée de 153, rayon 50
     pilule de catégorie    182 × 31, rayon 16, 12 Inter medium
     tuile de rappel        136 × 74, rayon 37, écart 6
     pastille de jour       39 × 39, rayon 20, écart 6
     case à cocher 24  ·  interrupteur 50 × 25  ·  coche de ligne 25
     rangée de réglage      252 × 36, icône 26, libellé 18 à x=41, filet 1, pas 51
     notification           380 × 71, rayon 30, padding 15, écart 15 ; geste 350 × 32 r16

   ⚠️ Chez LoopDay TOUT le texte est en gras — le 14 px secondaire comme le titre.
   C'est une signature du gabarit, pas un oubli : ne pas « corriger » en 400.

   Échelle typographique, elle aussi relevée :
     14  texte secondaire (heure, sous-titre)
     16  libellés, boutons, intitulés de statistique
     18  titre de ligne, salutation, titre de panneau
     24  titre de section, valeur de statistique, compteur
     36  titre d'accueil pleine page

   Les couleurs, les polices et les rayons vivent dans /charte-loopday.css : ce
   fichier n'en redéfinit aucun, il les consomme.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Socle d'écran
   ------------------------------------------------------------------------- */

.ld-ecran {
    /* 440 de planche, marges de 30 : le bloc utile fait 380. On garde la mesure
       exacte au centre plutôt que d'étaler sur toute la largeur d'un écran large. */
    max-width: 440px;
    margin: 0 auto;
    padding: 30px 30px calc(84px + 30px);  /* la barre d'onglets mange le bas */
    font-family: var(--ld-police);
    color: var(--ld-encre);
    background: var(--ld-fond);
    min-height: 100dvh;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   2. En-tête — avatar 40, salutation 18, sous-titre 14 accent, compteur 24, cloche
   ------------------------------------------------------------------------- */

.ld-entete {
    display: flex;
    align-items: center;
    gap: 15px;                 /* relevé : bloc texte à x=55, avatar 40 de large */
    min-height: 46px;
    margin-bottom: 25px;
}

.ld-pastille {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--ld-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ld-entete-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ld-salutation   { font-size: 18px; font-weight: 700; line-height: 23px; }
.ld-enseigne-nom { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--ld-accent); }

.ld-compteur {
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ld-compteur svg { color: var(--ld-accent); }

.ld-cloche { flex: none; color: var(--ld-accent); display: flex; }

/* En-tête d'écran secondaire : bouton rond de retour + titre de section. */
.ld-entete-retour { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }

/* ----------------------------------------------------------------------------
   3. Boutons — les trois familles de la planche « Button », dans leurs 3 états
   ------------------------------------------------------------------------- */

.ld-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    height: 55px;
    padding: 0 32px;
    border-radius: 28px;
    border: 1px solid transparent;
    font-family: var(--ld-police-bouton);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    /* Un libellé de bouton ne se coupe pas : « Marquer épuisé » sur deux lignes dans une
       pilule de 32 n'est plus une pilule. */
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.ld-bouton:hover { text-decoration: none; }

/* Primaire : aplat d'accent, texte blanc. */
.ld-bouton { background: var(--ld-accent); color: #fff; }
.ld-bouton:hover { background: var(--ld-accent-fonce); color: #fff; }

/* Secondaire : fond blanc, contour et texte à l'accent. */
.ld-bouton.contour { background: var(--ld-fond); color: var(--ld-accent); border-color: var(--ld-accent); }
.ld-bouton.contour:hover { background: var(--ld-accent-doux); }

/* Tertiaire : gris plein — l'état inerte du gabarit, pas une couleur inventée. */
.ld-bouton.inerte,
.ld-bouton:disabled,
.ld-bouton[aria-disabled="true"] {
    background: var(--ld-fond-alt);
    color: var(--ld-gris);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sur fond d'accent (écran d'accueil) le secondaire s'inverse : contour blanc. */
.ld-bouton.sur-accent { background: transparent; color: #fff; border-color: #fff; }
.ld-bouton.sur-accent:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* Le gris de l'état inerte disparaîtrait sur l'accent : on le transpose en blanc voilé.
   Cette règle vient APRÈS .sur-accent, sinon c'est elle qui perdrait — les deux ont le
   même poids et c'est l'ordre du fichier qui départage. */
.ld-bouton.sur-accent.inerte,
.ld-bouton.sur-accent:disabled,
.ld-bouton.sur-accent[aria-disabled="true"] {
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .75);
    border-color: transparent;
}

/* Pleine largeur : la mesure du gabarit, 379 dans un bloc de 380. */
.ld-bouton.large { display: flex; width: 100%; }

/* Petit bouton pilule — 79 × 32 relevé. */
.ld-bouton.petit { height: 32px; padding: 0 18px; font-size: 14px; border-radius: 16px; }

/* Bouton rond — 50 × 50 dans la planche, 56 × 56 en en-tête d'écran. */
.ld-rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ld-bordure);
    background: var(--ld-fond);
    color: var(--ld-encre);
    cursor: pointer;
    text-decoration: none;
}
.ld-rond:hover { background: var(--ld-fond-alt); text-decoration: none; }
.ld-rond.accent { width: 56px; height: 56px; background: var(--ld-accent); border-color: transparent; color: #fff; }
.ld-rond.accent:hover { background: var(--ld-accent-fonce); }
.ld-rond.inerte { background: var(--ld-fond-alt); border-color: transparent; color: var(--ld-gris); pointer-events: none; }

/* ----------------------------------------------------------------------------
   4. Champs de saisie — 379 × 55, rayon 28, icône à gauche
   ------------------------------------------------------------------------- */

.ld-champ {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 55px;
    padding: 0 18px;
    border: 1px solid var(--ld-bordure);
    border-radius: 28px;
    background: var(--ld-fond);
}
.ld-champ:focus-within { border-color: var(--ld-accent); }
.ld-champ > svg { flex: none; color: var(--ld-encre); }
.ld-champ > svg.inerte { color: var(--ld-gris); }

/* Le champ nu, quand il n'y a pas d'icône à porter. */
.ld-champ input,
.ld-champ select,
input.ld-champ,
select.ld-champ,
textarea.ld-champ {
    font-family: var(--ld-police);
    font-size: 16px;
    font-weight: 700;
    color: var(--ld-encre);
}
.ld-champ input,
.ld-champ select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    height: 100%;
}
.ld-champ ::placeholder,
input.ld-champ::placeholder,
textarea.ld-champ::placeholder { color: var(--ld-gris); font-weight: 700; }

textarea.ld-champ { height: auto; min-height: 110px; padding: 16px 18px; border-radius: var(--ld-rayon-carte); resize: vertical; }

/* Une liste déroulante dans la pilule : la flèche native du navigateur ne ressemble à
   rien de LoopDay, on la retire et on pose le chevron du gabarit (`arrow-down`) à droite,
   à la place où la planche « Input Field » met son icône de fin. */
.ld-champ select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ld-champ > svg.chevron { color: var(--ld-gris); }
/* La pilule à la taille du petit bouton (79 × 32, rayon 16) : pour un champ posé dans une
   rangée de gestes — une date d'épuisement à côté de « Marquer épuisé ». */
.ld-champ.petit { width: auto; height: 32px; padding: 0 14px; border-radius: 16px; gap: 8px; }
.ld-champ.petit input { font-size: 14px; }
/* Une unité après un nombre (« 2 couverts ») : 14 gras, en couleur douce. */
.ld-champ-unite { flex: none; font-size: 14px; font-weight: 700; color: var(--ld-encre-douce); }
/* Bouton « œil » d'un champ mot de passe : il vit dans la pilule, à droite. */
.ld-champ .ld-oeil { flex: none; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ld-encre); display: flex; }

/* Le lien « Mot de passe oublié ? » : aligné à droite sous le champ, 14 gras. */
.ld-champ-lien { display: block; text-align: right; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ld-encre); }

/* Barre de recherche — même gabarit que le champ, loupe à gauche. */
.ld-recherche { composes: ld-champ; }

/* ----------------------------------------------------------------------------
   5. Case à cocher (24), coche de ligne (25) et interrupteur (50 × 25)
   ------------------------------------------------------------------------- */

.ld-coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ld-encre);
    background: transparent;
    color: transparent;
}
/* « Few » : contour et coche à l'accent, fond blanc — l'état intermédiaire. */
.ld-coche.partielle { border-color: var(--ld-accent); color: var(--ld-accent); }
/* « All » : pastille pleine, coche blanche. */
.ld-coche.faite { border-color: transparent; background: var(--ld-accent); color: #fff; }

.ld-interrupteur {
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 25px;
    flex: none;
    padding: 3px;
    border-radius: 13px;
    background: var(--ld-gris);
    cursor: pointer;
    transition: background-color .15s;
}
.ld-interrupteur::after {
    content: '';
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.ld-interrupteur.actif { background: var(--ld-accent); }
.ld-interrupteur.actif::after { transform: translateX(25px); }

/* ----------------------------------------------------------------------------
   6. Titres de section et pilules d'information
   ------------------------------------------------------------------------- */

.ld-section-ligne { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 25px 0 15px; }
.ld-section { font-size: 24px; font-weight: 700; line-height: 30px; margin: 0; }

/* La pilule à droite d'un titre (« This Week ⌄ », « August 2039 ») : contour accent. */
.ld-pilule-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--ld-accent);
    border-radius: 20px;
    color: var(--ld-accent);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* La même pilule quand le chiffre qu'elle porte est un problème (créneau complet). */
.ld-pilule-info.danger { border-color: var(--ld-danger); color: var(--ld-danger); }
/* Pleine à l'accent quand elle réclame un geste MAINTENANT : l'avantage acquis, à appliquer
   en caisse (service du jour). Même logique que .ld-badge.accent pour le client arrivé. */
.ld-pilule-info.accent { background: var(--ld-accent); color: #fff; }
/* Le contenu peut être long (« −20 % + 125 pts · bon ABCD1234 · acquis ») : on autorise le retour
   à la ligne dans ce cas précis, la pilule s'étire en hauteur plutôt que de déborder. */
.ld-pilule-info.souple { height: auto; min-height: 40px; padding: 8px 20px; white-space: normal; }
a.ld-pilule-info:hover { background: var(--ld-accent-doux); text-decoration: none; }

/* ----------------------------------------------------------------------------
   7. Onglets-filtres — h. 56, rayon 28, padding 32, écart 15, défilables
   ------------------------------------------------------------------------- */

.ld-filtres {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    /* Les filtres débordent volontairement à droite chez LoopDay : c'est ce
       débordement qui indique qu'il y en a d'autres. On ne masque pas la barre. */
    scrollbar-width: none;
    margin: 0 -30px 15px;
    padding: 0 30px;
}
.ld-filtres::-webkit-scrollbar { display: none; }

.ld-filtre {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 56px;
    padding: 0 32px;
    border-radius: 28px;
    border: 1px solid var(--ld-accent);
    background: var(--ld-fond);
    color: var(--ld-accent);
    font-family: var(--ld-police-bouton);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ld-filtre:hover { background: var(--ld-accent-doux); text-decoration: none; }
.ld-filtre.actif { background: var(--ld-accent); border-color: transparent; color: #fff; }

/* ----------------------------------------------------------------------------
   8. Ligne de liste — 380 × 108, rayon 30, fond #F4F4F4
   ------------------------------------------------------------------------- */

.ld-ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: space-between;
    box-sizing: border-box;
    min-height: 108px;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 30px;
    background: var(--ld-fond-alt);
    color: inherit;
    text-decoration: none;
}
.ld-ligne:hover { text-decoration: none; }

/* Rangée du haut : l'heure à gauche (14 gras), la coche à droite. */
.ld-ligne-quand  { font-size: 14px; font-weight: 700; line-height: 18px; }
/* Rangée du bas : l'intitulé à gauche (18 gras), la valeur à droite (14 gras). */
.ld-ligne-quoi   { font-size: 18px; font-weight: 700; line-height: 23px; margin-top: 27px; }
.ld-ligne-valeur { font-size: 14px; font-weight: 700; line-height: 18px; align-self: end; color: var(--ld-encre); }
.ld-ligne-valeur.negatif { color: var(--ld-danger); }
.ld-ligne > .ld-coche { align-self: start; }

/* Une ligne dont l'affaire est close (réservation annulée, plat retiré) : atténuée, pas
   cachée — elle reste lisible, elle n'appelle plus de geste. */
.ld-ligne.terminee { opacity: .55; }
/* Les gestes d'une ligne (service du jour, catalogue) : posés SOUS le texte, petits boutons
   79 × 32 à l'écart de 8, la ligne grandit au-delà de son minimum de 108. */
.ld-ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ld-ligne-actions form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* Une quantité à droite d'une ligne (carte à emporter) : la cote du PETIT BOUTON du
   gabarit (79 × 32, rayon 16), en champ nu centré — LoopDay n'a pas de compteur. */
.ld-quantite {
    box-sizing: border-box;
    width: 79px;
    height: 32px;
    align-self: center;
    padding: 0;
    border: 1px solid var(--ld-bordure);
    border-radius: 16px;
    background: var(--ld-fond);
    color: var(--ld-encre);
    font-family: var(--ld-police-bouton);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.ld-quantite:focus { outline: 0; border-color: var(--ld-accent); }
/* Variante deux lignes empilées (intitulé + description), écran « Badges ». */
.ld-ligne.simple { min-height: 0; align-content: center; gap: 5px; }
.ld-ligne.simple .ld-ligne-quoi { margin-top: 0; }

/* ----------------------------------------------------------------------------
   9. Cartes — accent (380 × 103), statistique (182 × 73), panneau (379 × 216)
   ------------------------------------------------------------------------- */

.ld-carte-accent {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 103px;
    padding: 22px 30px;
    border-radius: 30px;
    background: var(--ld-accent);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
}
.ld-carte-accent-titre { font-size: 18px; font-weight: 700; line-height: 23px; }
.ld-carte-accent-sous  { font-size: 14px; font-weight: 700; line-height: 18px; opacity: .92; margin-top: 5px; }

/* L'illustration occupe la moitié gauche de la carte, comme dans la maquette. */
.ld-illustration { flex: none; width: 140px; height: auto; color: var(--ld-accent-fonce); }

/* Carte statistique : deux par ligne, écart 16 — la grille tient dans 380. */
.ld-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ld-stat {
    box-sizing: border-box;
    min-height: 73px;
    padding: 9px 31px;
    border: 1px solid var(--ld-bordure);
    border-radius: 30px;
    background: var(--ld-fond);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}
.ld-stat:hover { text-decoration: none; }
.ld-stat-valeur  { font-size: 24px; font-weight: 700; line-height: 30px; }
.ld-stat-libelle { font-size: 16px; font-weight: 700; line-height: 21px; }
.ld-stat.alerte .ld-stat-valeur { color: var(--ld-danger); }
/* Les deux seuils de l'univers (IDRESTO.md §2), pour l'écran « Ressources » : à 70 % le chiffre
   passe à la couleur d'attention (le jaune de --ir-attention, seule couleur hors charte LoopDay,
   assumée : le gabarit n'a pas d'état intermédiaire), à 90 % c'est la carte entière qui passe en
   danger. Même carte, mêmes cotes, la couleur en plus. */
.ld-stat.attention .ld-stat-valeur { color: #D9A400; }
.ld-stat.critique { border-color: var(--ld-danger); background: rgba(255, 56, 60, .1); }
.ld-stat.critique .ld-stat-valeur { color: var(--ld-danger); }

/* Variante pleine — la carte « Completed » de la planche « Calendar » : même 182 × 73,
   fond à l'accent, texte blanc. Réservée à LA métrique qu'on veut mettre en avant. */
.ld-stat.plein { border-color: transparent; background: var(--ld-accent); color: #fff; }

/* Panneau : la carte blanche à contour qui porte un graphe ou un tableau. */
.ld-panneau {
    box-sizing: border-box;
    padding: 21px 26px;
    border: 1px solid var(--ld-bordure);
    border-radius: 30px;
    background: var(--ld-fond);
    margin-bottom: 16px;
}
.ld-panneau-entete { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.ld-panneau-titre  { font-size: 18px; font-weight: 700; line-height: 23px; margin: 0; }

/* Carte QR : le code doit être le plus grand élément de l'écran, on le scanne. */
.ld-carte-qr {
    border: 1px solid var(--ld-bordure);
    border-radius: 30px;
    background: var(--ld-fond);
    padding: 26px;
    text-align: center;
    margin-bottom: 16px;
}
.ld-carte-qr img { display: block; margin: 0 auto 15px; max-width: 100%; height: auto; }

/* Carte citation : la carte d'accent avec le grand guillemet du gabarit. */
.ld-carte-citation { align-items: flex-start; }
.ld-guillemet { font-size: 86px; line-height: .8; font-weight: 700; opacity: .35; flex: none; }

/* ----------------------------------------------------------------------------
   10. Badges — les quatre tailles de la planche « Element »
   ------------------------------------------------------------------------- */

.ld-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ld-encre);
    color: #fff;
    font-weight: 700;
    flex: none;
    width: 40px; height: 40px; font-size: 16px;
}
.ld-badge.xs { width: 28px; height: 28px; font-size: 12px; }
.ld-badge.s  { width: 34px; height: 34px; font-size: 14px; }
.ld-badge.l  { width: 56px; height: 56px; font-size: 20px; }
.ld-badge.xl { width: 75px; height: 75px; font-size: 26px; }
.ld-badge.accent { background: var(--ld-accent); }

/* ----------------------------------------------------------------------------
   11. Points de progression (10 px, écart 8)
   ------------------------------------------------------------------------- */

.ld-points { display: inline-flex; gap: 8px; align-items: center; }
.ld-point  { width: 10px; height: 10px; border-radius: 50%; background: var(--ld-bordure); }
.ld-point.actif { background: var(--ld-accent); }
/* Sur fond d'accent, les points s'inversent (écran d'accueil). */
.ld-sur-accent .ld-point { background: rgba(255, 255, 255, .45); }
.ld-sur-accent .ld-point.actif { background: #fff; }

/* ----------------------------------------------------------------------------
   12. Barre d'onglets — 440 × 84, icônes 24, SANS libellé
   ------------------------------------------------------------------------- */

.ld-onglets {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--ld-fond);
    border-top: 1px solid var(--ld-bordure);
    /* Sur iPhone, la barre système mord le bas de l'écran. */
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
}
.ld-onglets a { display: flex; align-items: center; justify-content: center; color: var(--ld-gris); padding: 12px; }
.ld-onglets a.actif { color: var(--ld-encre); }
.ld-onglets a:hover { color: var(--ld-encre); text-decoration: none; }

/* ----------------------------------------------------------------------------
   13. Écran plein accent — l'accueil (« On Boarding »)
   ------------------------------------------------------------------------- */

.ld-sur-accent {
    background: var(--ld-accent);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 30px;
}
.ld-sur-accent .ld-hero {
    /* 440 × 440 pleine largeur : l'image déborde des marges de 30. */
    margin: 0 -30px;
    width: calc(100% + 60px);
    height: auto;
    display: block;
    /* L'illustration hérite sinon du blanc du texte, et ses tampons disparaîtraient
       sur la carte blanche qu'elle dessine. On lui redonne l'accent explicitement. */
    color: var(--ld-accent);
}
.ld-sur-accent .ld-kicker { font-size: 16px; font-weight: 700; line-height: 21px; margin: 40px 0 15px; }
.ld-sur-accent .ld-titre-hero { font-size: 36px; font-weight: 700; line-height: 45px; margin: 0 0 30px; }
.ld-sur-accent .ld-aide { color: rgba(255, 255, 255, .9); }

/* ----------------------------------------------------------------------------
   14. Divers
   ------------------------------------------------------------------------- */

.ld-aide { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--ld-encre-douce); text-align: center; }

/* Message d'alerte : la couleur de danger du gabarit, dans une carte de liste. */
.ld-alerte {
    box-sizing: border-box;
    padding: 15px 20px;
    border-radius: 30px;
    background: var(--ld-fond-alt);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
}
.ld-alerte.danger { background: rgba(255, 56, 60, .1); color: var(--ld-danger); }
.ld-alerte.succes { background: var(--ld-accent-doux); color: var(--ld-accent-fonce); }

/* État vide : illustration centrée + une phrase, jamais un tableau à zéro ligne. */
.ld-vide { text-align: center; padding: 40px 0; }
.ld-vide svg { color: var(--ld-gris); margin-bottom: 15px; }

/* ----------------------------------------------------------------------------
   16. Histogramme hebdomadaire — planche « Statistics », panneau 379 × 216
   ------------------------------------------------------------------------- */

/* Cotes relevées : zone traçée 300 × 98, barres larges de 30 au pas de 45 (donc
   15 d'écart), quatre graduations à 32-33 d'écart, libellés de jour 7 sous la base.
   Les barres sont à COINS DROITS dans le .sketch — le PNG donne l'illusion d'un
   arrondi. Ne pas en ajouter. */
.ld-histo { display: flex; align-items: flex-end; gap: 15px; }

/* La colonne des graduations : 0, 3, 6, 9 de bas en haut, alignées sur les lignes. */
.ld-histo-axe {
    flex: none;
    height: 98px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    /* Le libellé est centré sur SA ligne : sans ce décalage d'une demi-ligne, « 9 »
       flotte sous la graduation qu'il désigne. */
    margin: -9px 0;
    color: var(--ld-encre);
}

.ld-histo-zone { flex: 1; min-width: 0; }

/* Les lignes de graduation, tirets, derrière les barres. */
.ld-histo-barres {
    position: relative;
    height: 98px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}
/* Les quatre graduations en tirets, DERRIÈRE les barres — une par valeur de l'axe. */
.ld-histo-barres::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to right, var(--ld-bordure) 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to right, var(--ld-bordure) 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to right, var(--ld-bordure) 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to right, var(--ld-bordure) 0 4px, transparent 4px 8px);
    background-size: 100% 1px;
    background-position: 0 0, 0 32.6px, 0 65.3px, 0 97px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Une barre : largeur fixée par le gabarit, hauteur portée par --part (0 à 1). */
.ld-histo-barre {
    position: relative;
    flex: 1;
    max-width: 30px;
    height: calc(98px * var(--part, 0));
    /* Une journée à zéro doit rester visible : un trait, sinon la colonne disparaît
       et on croit à un jour manquant plutôt qu'à un jour sans passage. */
    min-height: 2px;
    background: var(--ld-accent);
}
.ld-histo-barre.vide { background: var(--ld-bordure); }

.ld-histo-jours {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ld-histo-jours span { flex: 1; max-width: 30px; }

/* ----------------------------------------------------------------------------
   17. Anneau de progression — planche « Statistics », panneau 379 × 197
   ------------------------------------------------------------------------- */

/* Relevé : boîte 109, anneau ⌀91 mesuré dans l'export à 2×, trait 9, pourcentage
   en 24 gras au centre, phrase en 18 gras à 15 sur la droite. */
.ld-anneau-ligne { display: flex; align-items: center; gap: 15px; }

.ld-anneau { position: relative; flex: none; width: 109px; height: 109px; }
.ld-anneau svg { display: block; transform: rotate(-90deg); }
.ld-anneau .fond { stroke: var(--ld-accent-doux); }
.ld-anneau .part { stroke: var(--ld-accent); stroke-linecap: butt; }
.ld-anneau-valeur {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}
.ld-anneau-texte { font-size: 18px; font-weight: 700; line-height: 23px; }

/* ----------------------------------------------------------------------------
   18. Texte réservé aux lecteurs d'écran
   ------------------------------------------------------------------------- */

/* Le gabarit met une loupe sans libellé dans sa barre de recherche. Un champ sans
   étiquette n'est pas lisible au lecteur d'écran : on garde le dessin de LoopDay ET
   l'étiquette, en la retirant de l'affichage seulement. `display:none` ne suffirait
   pas — ce qui est en display:none n'est pas lu non plus. */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------------
   19. Écran de détail — planche « Habit Detail »
   ------------------------------------------------------------------------- */

/* Cotes relevées sur la planche (440 × 956) :

     média en tête (Rectangle 81)      440 × 413
     rangée d'actions (Frame 6433)     380 × 56 @30,84 — un rond 56 à gauche,
                                       deux ronds 56 à droite, écart 10
     feuille de contenu (Frame 6430)   420 × 662 @30,290 → le titre tombe à y=290,
                                       donc la feuille remonte SUR le média
     titre                             32 gras (et non 36 : le .sketch tranche)
     titre de sous-section             18 gras, 30 au-dessus, 15/16 en dessous
     pilule de catégorie (Frame 6421)  182 × 31, rayon 16, 12 Inter medium, écart 16
     paragraphe                        12 medium
     carte accent (Frame 6306_5)       380 × 103 r30, texte à x=166 → visuel à gauche
     tuile (Frame 6425/6426/6427)      136 × 74, rayon 37, écart 6 ; icône 24 à 16 ;
                                       texte à x=52 : libellé 16 gras, valeur 14 gras
     carte notes (Frame 6306_6)        380 × 133 r30 ; guillemet 54 × 43 à 15 ;
                                       texte à x=84 : titre 18 gras + 12 medium

   La feuille remonte de 153 sur le média : 413 − 260, et 260 + 30 de marge intérieure
   = 290, la position relevée du titre. Rien n'est estimé ici. */

.ld-detail { max-width: 440px; margin: 0 auto; }

/* Le média : chez LoopDay c'est une photo de plat. Nous n'avons pas de photo — et nous
   n'en voulons pas sur une fiche client, ce serait une donnée personnelle de plus à
   protéger pour rien. On garde le bloc, sa hauteur et son rôle : c'est lui qui porte
   l'identité de la fiche (initiale + accent du commerçant). */
.ld-detail-media {
    position: relative;
    height: 413px;
    border-radius: 50px 50px 0 0;
    background: var(--ld-accent);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-detail-media .ld-detail-initiale {
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    opacity: .35;
    /* La feuille recouvre le bas : on remonte l'initiale dans la part visible. */
    margin-bottom: 120px;
    user-select: none;
}

/* Rangée d'actions posée SUR le média, à 84 du haut, dans le bloc utile de 380. */
.ld-detail-actions {
    position: absolute;
    top: 84px;
    left: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ld-detail-actions .ld-groupe { display: flex; gap: 10px; }
/* Sur l'accent, un rond blanc à contour gris disparaîtrait : ils passent en verre. */
.ld-detail-actions .ld-rond {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}
.ld-detail-actions .ld-rond:hover { background: rgba(255, 255, 255, .35); }

/* La feuille blanche, remontée de 153 sur le média. */
.ld-detail-corps {
    position: relative;
    margin-top: -153px;
    padding: 30px;
    border-radius: 50px 50px 0 0;
    background: var(--ld-fond);
}
.ld-detail-titre { font-size: 32px; font-weight: 700; line-height: 40px; margin: 0; }

/* Titre de sous-section (« Category », « Daily Goal », « Reminder ») : 18 gras. */
.ld-sous-section { font-size: 18px; font-weight: 700; line-height: 23px; margin: 30px 0 15px; }

/* Pilules de catégorie — 182 × 31, rayon 16, 12 Inter medium. Deux par ligne dans 380. */
/* Deux pilules côte à côte, jamais empilées : c'est ce que montre la planche. */
.ld-categories { display: flex; flex-wrap: nowrap; gap: 16px; }
.ld-categorie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 182 est la cote du .sketch, mais la planche fait 440 pleine largeur alors que notre
       feuille a 30 de marge : à deux pilules par ligne, 182 ne tient plus et elles
       s'empilent. On garde 182 comme base et on les laisse se partager la ligne — la
       maquette montre DEUX pilules côte à côte, c'est cela qu'il faut respecter. */
    flex: 1 1 182px;
    min-width: 0;
    max-width: 182px;
    height: 31px;
    padding: 0 16px;
    border: 1px solid var(--ld-accent);
    border-radius: 16px;
    color: var(--ld-accent);
    font-family: var(--ld-police-bouton);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.ld-categorie.pleine { background: var(--ld-accent); border-color: transparent; color: #fff; }
/* Le statut d'un plat du catalogue, dans la même pilule : épuisé en danger, retiré en gris. */
.ld-categorie.danger { border-color: var(--ld-danger); color: var(--ld-danger); }
/* Posée dans une ligne de liste (colonne de droite), la pilule garde sa largeur de contenu :
   `flex: 1 1 182px` + `min-width: 0` sont faits pour la rangée de deux, pas pour une cellule
   de grille où un texte long à gauche l'écraserait jusqu'à couper son libellé. */
.ld-ligne > .ld-categorie { width: auto; max-width: none; min-width: max-content; align-self: start; }
/* Contour gris, fond transparent : posée sur une ligne #F4F4F4, une pilule #F4F4F4 disparaît. */
.ld-categorie.inerte { border-color: var(--ld-gris); color: var(--ld-gris); }

/* Paragraphe 12 medium — le seul texte du gabarit qui ne soit pas en gras. */
.ld-detail-texte { font-size: 12px; font-weight: 500; line-height: 15px; color: var(--ld-encre-douce); margin: 16px 0 0; }

/* Tuiles « Reminder » — 136 × 74, rayon 37. Leur rangée fait 420 dans une planche de
   440 : elle déborde volontairement, comme les onglets-filtres. On la laisse défiler
   plutôt que de rétrécir les tuiles, sinon la cote ne veut plus rien dire. */
.ld-tuiles {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -30px;
    padding: 0 30px;
}
.ld-tuiles::-webkit-scrollbar { display: none; }
.ld-tuile {
    display: flex;
    align-items: center;
    gap: 12px;              /* icône à 16, texte à 52 : 52 − 16 − 24 = 12 */
    flex: none;
    box-sizing: border-box;
    min-width: 136px;
    height: 74px;
    padding: 0 16px;
    border: 1px solid var(--ld-bordure);
    border-radius: 37px;
    background: var(--ld-fond);
    color: inherit;
    text-decoration: none;
}
.ld-tuile:hover { text-decoration: none; }
.ld-tuile svg { flex: none; color: var(--ld-accent); }
/* Une tuile fait 74 de haut pour DEUX lignes : un libellé qui passe à la ligne la crève.
   On ne renvoie jamais à la ligne dans une tuile — c'est la rangée qui défile. */
.ld-tuile-libelle { font-size: 16px; font-weight: 700; line-height: 21px; white-space: nowrap; }
.ld-tuile-valeur  { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--ld-encre-douce); white-space: nowrap; }

/* Carte de notes — 380 × 133, le grand guillemet à gauche, le texte à x=84. */
.ld-carte-notes {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-sizing: border-box;
    min-height: 133px;
    padding: 30px 15px;
    border-radius: 30px;
    background: var(--ld-fond-alt);
}
.ld-carte-notes .ld-guillemet { color: var(--ld-accent); opacity: 1; margin-top: -18px; }
.ld-carte-notes-titre { font-size: 18px; font-weight: 700; line-height: 23px; margin: 0; }
.ld-carte-notes-texte { font-size: 12px; font-weight: 500; line-height: 15px; color: var(--ld-encre-douce); margin: 6px 0 0; }

/* ----------------------------------------------------------------------------
   20. Sélecteur de mois et de jour — planche « Calendar »
   ------------------------------------------------------------------------- */

/* Cotes relevées : rangée de navigation avec un rond de chaque côté d'une pilule
   d'information (déjà définie §6) ; jours 39 × 39, rayon 20, écart 6 (39×7 + 6×6 = 309,
   la rangée relevée fait 379 pour 7 jours visibles — le reste défile). */

.ld-nav-mois { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 25px; }

.ld-jours {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -30px 25px;
    padding: 0 30px;
}
.ld-jours::-webkit-scrollbar { display: none; }

.ld-jour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 39px;
    height: 39px;
    border-radius: 20px;
    border: 1px solid var(--ld-bordure);
    background: var(--ld-fond);
    color: var(--ld-encre);
    font-family: var(--ld-police-bouton);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.ld-jour:hover { background: var(--ld-fond-alt); text-decoration: none; }
/* Aujourd'hui, non sélectionné : contour accent, pour le retrouver dans la rangée. */
.ld-jour.aujourdhui { border-color: var(--ld-accent); color: var(--ld-accent); }
.ld-jour.actif { background: var(--ld-accent); border-color: transparent; color: #fff; }

/* ----------------------------------------------------------------------------
   21. Liste de réglages — planche « settings »
   ------------------------------------------------------------------------- */

/* Chez LoopDay « settings » n'est pas un formulaire : c'est un PANNEAU de réglages, une
   rangée par entrée. Cotes relevées (Frame 6481, à x=150 dans un panneau de 320 → marge 30,
   bloc utile 252) :

     rangée (Frame 6473)      252 × 36 ; icône 26 × 26 (glyphe 17 centré) ; libellé 18 gras
                              à x=41 → écart 15 après l'icône ; filet 252 × 1 à y=35
     pas entre rangées        51 → écart 15 sous le filet
     rond de retour           56 × 56 r28 (Frame 6433_9), 30 au-dessus de la liste
     pied « Logout »          16 gras + icône 24, écart 10, en couleur de danger

   Le gabarit n'a que des libellés : ce que nous mettons À DROITE de la rangée (la valeur, un
   champ, un interrupteur) est notre lecture — un réglage doit montrer sa valeur courante.
   Les contrôles y sont NUS (pas de pilule 55 dans une rangée de 36) : le filet de la rangée
   passe à l'accent quand on y écrit, c'est lui qui joue le rôle de la bordure du champ. */

.ld-reglages { display: flex; flex-direction: column; }

.ld-reglage {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 36px;
    padding-bottom: 15px;            /* 36 de rangée : 26 d'icône + ce qu'il faut sous elle */
    margin-bottom: 15px;             /* le pas de 51 : 36 + 15 */
    border-bottom: 1px solid var(--ld-bordure);
    /* Une rangée est souvent un <label> : sans ça, elle hérite du gris 14 des libellés de
       formulaire du socle, et le réglage a l'air désactivé. */
    color: var(--ld-encre);
    font-size: 16px;
}
.ld-reglage:focus-within { border-bottom-color: var(--ld-accent); }
/* Une ligne suspendue/inactive dans une liste de réglages (service, récompense…) : même
   traitement que .ld-ligne.terminee, pour que « en pause » se lise pareil partout. */
.ld-reglage.inactif { opacity: .55; }
.ld-reglage > svg { flex: none; width: 26px; height: 26px; color: var(--ld-encre); }

.ld-reglage-libelle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ld-reglage-libelle > span:first-child { font-size: 18px; font-weight: 700; line-height: 23px; }
.ld-reglage-aide { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--ld-encre-douce); }

/* La valeur, à droite : même graisse que le libellé, alignée sur le bord du bloc. */
.ld-reglage-valeur { flex: none; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ld-reglage-valeur input,
.ld-reglage-valeur select {
    box-sizing: border-box;
    width: 110px;
    height: 30px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ld-encre);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}
.ld-reglage-valeur input[type="number"] { width: 64px; }
.ld-reglage-valeur select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ld-reglage-valeur .unite { color: var(--ld-encre-douce); font-size: 14px; }
/* Un réglage textuel prend la place que le libellé lui laisse, pas 110 px. */
.ld-reglage.texte .ld-reglage-valeur { flex: 1; min-width: 0; }
.ld-reglage.texte .ld-reglage-valeur input { width: 100%; }

/* L'interrupteur du §5 commandé par une case à cocher, SANS JavaScript : la case est hors
   écran (pas display:none, pour garder le clavier), l'état vient de :checked. */
.ld-bascule { position: relative; display: inline-flex; cursor: pointer; }
.ld-bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ld-bascule input:checked + .ld-interrupteur { background: var(--ld-accent); }
.ld-bascule input:checked + .ld-interrupteur::after { transform: translateX(25px); }
.ld-bascule input:focus-visible + .ld-interrupteur { outline: 2px solid var(--ld-accent); outline-offset: 2px; }

/* Le pied « Logout » : un lien en couleur de danger, centré, icône 24 à 10 du texte. */
.ld-lien-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ld-danger);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.ld-lien-danger:hover { color: var(--ld-danger); text-decoration: underline; }
/* Le même lien à la taille des petits boutons, pour vivre dans une rangée de gestes. */
.ld-lien-danger.petit { font-size: 14px; gap: 6px; }

/* ----------------------------------------------------------------------------
   22. Notification — planche « Notifications »
   ------------------------------------------------------------------------- */

/* Cotes relevées dans le .sketch (planche « Notifications », 440 × 956), pas estimées :

     liste                bloc 380, écart 15 entre cartes
     carte simple         380 × 71,  rayon 30, padding 15
     carte à geste        380 × 118 (message d'une ligne) · 380 × 136 (de deux)
     rangée de titre      h. 23 — titre 18 gras à gauche, horodatage 12 medium à droite
     message              14 gras, interligne 18, COLLÉ sous la rangée de titre (y = 23)
     geste                350 × 32, rayon 16, libellé 12 Inter medium, à 15 sous le message
     « Show all »         14 gras, centré, à 15 sous la dernière carte

   Les trois hauteurs de carte se déduisent l'une de l'autre et se vérifient :
   15 + 41 + 15 = 71 · 15 + 41 + 15 + 32 + 15 = 118 · 15 + 59 + 15 + 32 + 15 = 136.
   Aucune n'est donc écrite en dur ici : c'est le padding de 15 et l'écart de 15 qui les
   produisent, et une carte à trois lignes de message tombera juste toute seule. */

.ld-notif {
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 30px;
    background: var(--ld-fond-alt);
    color: inherit;
    text-decoration: none;
}
.ld-notif:hover { text-decoration: none; }

/* La rangée de titre : 23 de haut, l'horodatage aligné sur la ligne de base du titre — dans
   la planche il est posé à y=5 dans une rangée de 23, ce qui est exactement ce que rend
   `align-items: baseline` sur un 12 à côté d'un 18. */
.ld-notif-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 23px;
}
.ld-notif-titre {
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    margin: 0;
}
/* 12 Inter medium — comme la pilule de catégorie et le paragraphe de détail, c'est l'un des
   rares textes que le gabarit ne met PAS en gras. Ne pas « corriger » en 700. */
.ld-notif-quand {
    flex: none;
    font-family: var(--ld-police-bouton);
    font-size: 12px;
    font-weight: 500;
    color: var(--ld-encre-douce);
    white-space: nowrap;
}
/* Aucune marge haute : dans la planche le message commence à y=23, c'est-à-dire au ras de la
   rangée de titre. Un `margin-top` ferait grandir toutes les cartes de la liste. */
.ld-notif-texte {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    margin: 0;
}
/* Le geste de la carte : le petit bouton pilule du §3 (32 de haut, rayon 16) en pleine
   largeur — 350 dans une carte de 380 moins ses deux padding de 15, la cote tombe juste
   sans qu'on l'écrive. Son libellé est relevé à 12 medium, pas au 14 gras du petit bouton
   isolé : c'est la seule différence, et elle vient de la planche. */
.ld-notif-geste { margin-top: 15px; }
.ld-notif-geste .ld-bouton.petit { font-size: 12px; font-weight: 500; }

/* Une notification déjà traitée (récompense consommée, réservation passée) : atténuée comme
   une ligne close (§8), jamais retirée — on ne fait pas disparaître ce qu'on a annoncé. */
.ld-notif.terminee { opacity: .55; }

/* La carte qui appelle un geste porte l'accent doux du gabarit (planche : c'est la seule
   dont le fond se détache), pas une couleur inventée : le jeton existe déjà en charte. */
.ld-notif.accent { background: var(--ld-accent-doux); }

/* « Show all » : 14 gras centré, à 15 sous la dernière carte — la marge basse de celle-ci
   fournit déjà l'écart, d'où l'absence de margin-top. */
.ld-notif-tout {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ld-encre);
    text-decoration: none;
}
.ld-notif-tout:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   Le repli — une section facultative qu'on ouvre soi-même (<details> natif).

   POURQUOI du HTML natif : le tunnel public ne calcule rien côté client, et un
   dépliant maison demanderait du JavaScript pour rester accessible au clavier.
   <details> l'est déjà, et fonctionne même si le script ne charge pas.

   Premier usage : les quatorze allergènes du tunnel de commande. La très grande
   majorité des commandes n'en coche aucun — les déplier d'office ferait passer
   l'exception avant la règle, juste au-dessus du bouton « Commander ».
   ───────────────────────────────────────────────────────────────────────── */
.ld-repli {
    border: 1px solid var(--ld-bordure);
    border-radius: 28px;
    background: var(--ld-fond);
}
.ld-repli[open] { border-radius: 20px; }
.ld-repli:focus-within { border-color: var(--ld-accent); }

.ld-repli-titre {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 53px;
    padding: 0 18px;
    color: var(--ld-encre);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;                /* la flèche par défaut casse l'alignement de la pilule */
}
.ld-repli-titre::-webkit-details-marker { display: none; }
.ld-repli-titre > svg { flex: none; width: 20px; height: 20px; color: var(--ld-encre); }
.ld-repli-titre > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
/* Le chevron, dessiné en CSS : une icône de plus alourdirait le gabarit pour un ornement. */
.ld-repli-titre::after {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--ld-encre-douce);
    border-bottom: 2px solid var(--ld-encre-douce);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}
.ld-repli[open] > .ld-repli-titre::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* ─────────────────────────────────────────────────────────────────────────
   Une liste de cases à cocher, chacune avec sa précision sous le libellé.
   Deux colonnes dès qu'il y a la place, une seule au pouce.
   ───────────────────────────────────────────────────────────────────────── */
.ld-cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding: 0 18px 14px;
    border: 0;
}
@media (min-width: 560px) {
    .ld-cases { grid-template-columns: 1fr 1fr; column-gap: 18px; }
    .ld-cases > legend { grid-column: 1 / -1; }
}

.ld-case {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    color: var(--ld-encre);
    cursor: pointer;
}
/* La cible tactile fait la hauteur de la rangée, pas celle du carré de 20 px. */
.ld-case input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--ld-accent);
}
.ld-case > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-case-libelle { font-size: 16px; font-weight: 700; line-height: 20px; }
.ld-case-aide { font-size: 13px; line-height: 17px; color: var(--ld-encre-douce); }