/* Satio — feuille de style (mobile d'abord, mode sombre automatique) */

:root {
    --vert: #2E6B4F;
    --vert-fonce: #235440;
    --vert-clair: #E6F0EA;
    --vert-texte: #2E6B4F;
    --or: #F2B84B;
    --orange: #D9822B;
    --orange-clair: #FCF0E3;
    --rouge: #C2413A;
    --rouge-clair: #FBE9E7;
    --gris-clair: #EEF0EE;

    --fond: #F5F6F3;
    --surface: #FFFFFF;
    --surface-2: #F0F2EE;
    --texte: #1C2420;
    --texte-2: #5D6862;
    --bord: #DDE2DD;
    --ombre: 0 1px 2px rgba(20, 40, 30, .06), 0 4px 16px rgba(20, 40, 30, .06);

    --rayon: 18px;
    --rayon-s: 12px;
    --onglets-h: 64px;
    --tactile: 48px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --vert: #4FA27A;
        --vert-fonce: #3E8A65;
        --vert-clair: #1C3329;
        --vert-texte: #7CC7A0;
        --orange: #E9A15A;
        --orange-clair: #3A2A1A;
        --rouge: #EC7A72;
        --rouge-clair: #3D1F1D;
        --gris-clair: #252D29;

        --fond: #0F1714;
        --surface: #18221E;
        --surface-2: #202B26;
        --texte: #E7ECE9;
        --texte-2: #9AA8A1;
        --bord: #2C3833;
        --ombre: 0 1px 2px rgba(0, 0, 0, .3);

        color-scheme: dark;
    }
}

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

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

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h2 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--vert-texte); }
small { font-size: .82em; font-weight: 400; color: var(--texte-2); }

.ico { width: 22px; height: 22px; flex: none; }
.ico-s { width: 16px; height: 16px; vertical-align: -3px; }
.ico-l { width: 40px; height: 40px; }

.discret { color: var(--texte-2); }
.petit { font-size: .85rem; }
.mention { font-size: .8rem; color: var(--texte-2); text-align: center; margin: 1rem 0; }
.vide { color: var(--texte-2); font-style: italic; }
.intro { color: var(--texte-2); margin: .25rem 0 1rem; }

/* ---------- Structure ---------- */

.entete {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--bord);
    padding-top: env(safe-area-inset-top);
}
.entete-in {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: .75rem;
    height: 56px; padding: 0 16px;
}
.marque { display: flex; }
.logo { width: 32px; height: 32px; display: block; }
.entete-titre { font-size: 1.15rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-bouton {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--vert-texte); background: var(--vert-clair);
}
.entete-bouton.actif { background: var(--vert); color: #fff; }
.entete-sortie { margin: 0; display: flex; }
.entete-bouton-sortie { border: 0; cursor: pointer; background: var(--surface-2); color: var(--texte-2); }
.entete-bouton-sortie:hover, .entete-bouton-sortie:focus-visible { background: var(--rouge-clair); color: var(--rouge); }

.contenu {
    max-width: 720px; margin: 0 auto;
    padding: 16px 16px 24px;
}
.avec-onglets .contenu { padding-bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom) + 24px); }

.onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; justify-content: center;
    background: var(--surface);
    border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom);
}
.onglet {
    flex: 1; max-width: 140px; height: var(--onglets-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--texte-2); text-decoration: none; font-size: .72rem; font-weight: 550;
}
.onglet .ico { width: 24px; height: 24px; }
.onglet.actif { color: var(--vert-texte); }
.onglet.actif .ico { background: var(--vert-clair); border-radius: 12px; padding: 3px 14px; width: 54px; height: 30px; }

/* ---------- Cartes ---------- */

.carte {
    display: block;
    background: var(--surface);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 16px;
    margin-bottom: 14px;
    color: inherit;
}
.carte > h2:first-child { margin-bottom: .75rem; }
.carte-lien { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.carte-lien span { flex: 1; }
.carte-lien strong { display: block; }
.carte-lien span { color: var(--texte-2); font-size: .92rem; }
.carte-lien strong { color: var(--texte); font-size: 1rem; }

.titre-section { font-size: 1.05rem; margin: 22px 4px 10px; }

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--tactile); padding: 0 20px;
    border: 1.5px solid var(--vert); border-radius: 999px;
    background: transparent; color: var(--vert-texte);
    font: inherit; font-weight: 600; text-decoration: none;
    cursor: pointer; touch-action: manipulation;
    transition: transform .1s, background .15s;
}
.bouton:active { transform: scale(.97); }
.bouton-plein { background: var(--vert); color: #fff; border-color: var(--vert); }
.bouton-plein:hover { background: var(--vert-fonce); }
.bouton-contour { border-color: var(--bord); color: var(--texte-2); width: 100%; }
.bouton-rond { width: var(--tactile); padding: 0; font-size: 1.5rem; line-height: 1; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.formulaire .bouton { width: 100%; }

.bouton-icone {
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: transparent; color: var(--texte-2); cursor: pointer;
    display: grid; place-items: center;
}
.bouton-icone:active { background: var(--surface-2); }

.lien-discret { background: none; border: 0; padding: 8px 0; font: inherit; font-size: .88rem; color: var(--texte-2); text-decoration: underline; cursor: pointer; }
.lien-discret.danger { color: var(--rouge); }
.lien-fleche { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; font-size: .92rem; }
.retour { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; text-decoration: none; font-weight: 550; }

/* ---------- Formulaires ---------- */

.formulaire { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ > span, .champ > legend { font-size: .88rem; font-weight: 600; color: var(--texte-2); padding: 0; }
.champ-ligne { flex-direction: row; align-items: center; gap: 12px; }
.champ-ligne select { flex: 1; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url], select, textarea {
    width: 100%; min-height: var(--tactile);
    padding: 10px 14px;
    font: inherit; font-size: 16px; /* évite le zoom sur iOS */
    color: var(--texte); background: var(--surface-2);
    border: 1.5px solid transparent; border-radius: var(--rayon-s);
    outline: none; appearance: none; -webkit-appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a857f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
    padding-right: 40px;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { border-color: var(--vert); background: var(--surface); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); outline-offset: 2px; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.formulaire-ligne { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.formulaire-ligne input[type=text] { flex: 1; min-width: 0; }
.formulaire-ligne .bouton, .formulaire .formulaire-ligne .bouton { padding: 0 16px; flex: none; width: auto; }
.champ-g { position: relative; flex: none; width: 76px; }
.champ-g input { padding-right: 26px; }
.champ-g span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--texte-2); font-size: .9rem; }
.champ-code { text-transform: uppercase; letter-spacing: .15em; font-weight: 650; }

/* Contrôle segmenté (niveaux, sites) */
.segments { display: flex; background: var(--surface-2); border-radius: var(--rayon-s); padding: 3px; gap: 3px; }
.segment { flex: 1; position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment span {
    display: grid; place-items: center; min-height: 40px; border-radius: 9px;
    font-size: .84rem; font-weight: 550; color: var(--texte-2); text-align: center;
}
.segment input:checked + span { background: var(--surface); color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segment input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); }
.niveau-1 input:checked + span { color: #8a6d00; background: #FFF6D6; }
.niveau-2 input:checked + span { color: var(--orange); background: var(--orange-clair); }
.niveau-3 input:checked + span { color: var(--rouge); background: var(--rouge-clair); }
@media (prefers-color-scheme: dark) { .niveau-1 input:checked + span { color: #F2D06B; background: #3A3418; } }

.symptomes { display: flex; flex-direction: column; gap: 12px; }
.symptome { border: 0; padding: 0; margin: 0; }
.symptome legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }

/* Interrupteur */
.interrupteur-bloc { background: var(--surface-2); border-radius: var(--rayon-s); padding: 12px; }
.interrupteur { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; }
.interrupteur-piste {
    flex: none; width: 50px; height: 30px; border-radius: 15px; margin-top: 2px;
    background: var(--bord); position: relative; transition: background .2s;
}
.interrupteur-piste::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
}
.interrupteur input:checked + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(20px); }
.interrupteur input:disabled + .interrupteur-piste { opacity: .4; }
.interrupteur input:focus-visible + .interrupteur-piste { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); outline-offset: 2px; }
.interrupteur strong { display: block; }
.interrupteur small { display: block; line-height: 1.4; margin-top: 2px; }

/* ---------- Messages ---------- */

.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--rayon-s); margin-bottom: 14px; font-weight: 550; }
.flash ul { margin: 0; padding-left: 1rem; }
.flash-ok { background: var(--vert-clair); color: var(--vert-texte); }
.flash-erreur { background: var(--rouge-clair); color: var(--rouge); }

.urgence { display: flex; gap: 12px; padding: 16px; border-radius: var(--rayon); background: var(--rouge); color: #fff; margin-bottom: 14px; }
.urgence p { margin: 4px 0 0; }
.urgence a { color: #fff; font-weight: 700; font-size: 1.1em; }

.bandeau {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px; margin-bottom: 14px; border-radius: var(--rayon);
    background: var(--vert-clair); color: var(--vert-texte); text-decoration: none;
}
.bandeau span { flex: 1; font-size: .9rem; }
.bandeau strong { display: block; font-size: 1rem; }
.bandeau-injection { background: var(--orange-clair); color: var(--orange); }
.bandeau-note { background: var(--surface); box-shadow: var(--ombre); border-left: 4px solid var(--or); color: var(--texte); }

.alertes { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.alerte { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--rayon-s); font-size: .9rem; font-weight: 550; }
.alerte-rouge { background: var(--rouge-clair); color: var(--rouge); }
.alerte-orange { background: var(--orange-clair); color: var(--orange); }
.alerte-gris { background: var(--gris-clair); color: var(--texte-2); }

/* ---------- Connexion ---------- */

.accueil { max-width: 420px; margin: 0 auto; padding-top: max(6vh, env(safe-area-inset-top)); }
.accueil-marque { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 2rem; font-weight: 700; color: var(--vert-texte); margin-bottom: .5rem; }
.accueil-marque .logo { width: 52px; height: 52px; }
.accueil-slogan { text-align: center; color: var(--texte-2); margin-bottom: 1.5rem; }
.accueil h1 { font-size: 1.35rem; }
.accueil-bas { text-align: center; }
.accueil .vide-bloc h1 { font-size: 1.3rem; }

.choix-role { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-role legend { font-size: .88rem; font-weight: 600; color: var(--texte-2); margin-bottom: 6px; padding: 0; }
.tuile-radio { position: relative; cursor: pointer; }
.tuile-radio input { position: absolute; opacity: 0; }
.tuile-radio > span {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px; border-radius: var(--rayon-s); border: 2px solid var(--bord); height: 100%;
}
.tuile-radio .ico { color: var(--texte-2); margin-bottom: 4px; }
.tuile-radio small { line-height: 1.3; }
.tuile-radio input:checked + span { border-color: var(--vert); background: var(--vert-clair); }
.tuile-radio input:checked + span .ico { color: var(--vert-texte); }
.tuile-radio input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); }

/* ---------- Aujourd'hui ---------- */

.navdate { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.navdate-centre { flex: 1; text-align: center; }
.navdate-centre strong { display: block; font-size: 1.15rem; }
.navdate-centre small { font-size: .85rem; }
.navdate-fleche { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--ombre); color: var(--texte); }
.navdate-fleche.inactif { visibility: hidden; }

.resume-jour { display: flex; align-items: center; gap: 18px; }
.resume-anneau { flex: none; width: 128px; }
.resume-texte h2 { font-size: .9rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.gros { font-size: 1.35rem; margin-bottom: 2px; }
.gros strong { color: var(--vert-texte); }
.gros.ok { color: var(--vert-texte); font-weight: 650; }
.resume-texte .discret { font-size: .88rem; margin-bottom: 8px; }

.anneau { width: 100%; height: auto; display: block; }
.anneau-fond { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.anneau-valeur { fill: none; stroke: var(--vert); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s; }
.anneau-valeur[stroke-dasharray^="0 "] { stroke: transparent; }
.anneau-moyen .anneau-valeur { stroke: var(--or); }
.anneau-bas .anneau-valeur { stroke: var(--orange); }
.anneau-chiffre { font-size: 30px; font-weight: 700; text-anchor: middle; fill: var(--texte); }
.anneau-unite { font-size: 13px; text-anchor: middle; fill: var(--texte-2); }

.eau-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.eau-tete h2 { margin: 0; color: #2F80C0; }
.eau-tete p { margin: 0; }
.eau-tete strong { font-size: 1.3rem; }
.eau-verres { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 14px 0; }
.verre { height: 30px; border-radius: 4px 4px 9px 9px; background: var(--surface-2); border: 1.5px solid var(--bord); position: relative; overflow: hidden; }
.verre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #5AA9E6; transition: height .3s; }
.verre.plein::after { height: 82%; }
.eau-boutons { display: flex; justify-content: space-between; align-items: center; }
.eau-boutons form { margin: 0; }

.liste-repas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.repas-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px;
}
.repas-coche { margin: 0; }
.coche {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 2px solid var(--bord); background: var(--surface); color: transparent;
    display: grid; place-items: center; cursor: pointer; transition: all .15s;
}
.coche:not(:disabled):active { transform: scale(.92); }
.repas-item.fait .coche, .coche.statique { background: var(--vert); border-color: var(--vert); color: #fff; }
.coche.statique { background: var(--or); border-color: var(--or); }
.coche:disabled { opacity: .4; }
.repas-corps { flex: 1; min-width: 0; }
.repas-ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.repas-moment { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); }
.repas-desc { margin: 2px 0 0; }
.repas-item.fait .repas-desc { color: var(--texte); }
.repas-item.fait:not(.extra) .repas-moment { color: var(--vert-texte); }

.pastille { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--vert-clair); color: var(--vert-texte); font-weight: 650; font-size: .82rem; white-space: nowrap; }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); }

.remplacer { margin-top: 4px; }
.remplacer summary { font-size: .85rem; color: var(--texte-2); cursor: pointer; padding: 6px 0; list-style: none; }
.remplacer summary::-webkit-details-marker { display: none; }
.remplacer summary::before { content: "+ "; }
.remplacer[open] summary::before { content: "− "; }

.ajout-extra { margin-top: 10px; }
.ajout-extra summary { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vert-texte); cursor: pointer; list-style: none; min-height: 28px; }
.ajout-extra summary::-webkit-details-marker { display: none; }

.coach-appel { margin-top: 18px; background: linear-gradient(135deg, var(--vert), var(--vert-fonce)); color: #fff; }
.coach-appel span, .coach-appel strong { color: #fff; }
.coach-appel span { opacity: .92; }

/* ---------- Frigo ---------- */

.frigo-tete { display: flex; justify-content: space-between; align-items: center; }
.frigo-tete form { margin: 0; }
.frigo-tete h2 { margin: 0; }
.compteur { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--vert); color: #fff; font-size: .8rem; }
.frigo-cat { border-top: 1px solid var(--bord); margin-top: 12px; padding-top: 4px; }
.frigo-cat summary, details > summary h2 { cursor: pointer; }
.frigo-cat summary { font-weight: 600; padding: 8px 0; list-style-position: outside; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.puce-form { margin: 0; }
.puce {
    min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid var(--bord); background: var(--surface); color: var(--texte);
    font: inherit; font-size: .9rem; cursor: pointer; touch-action: manipulation;
    transition: background .15s, border-color .15s;
}
.puce.active { background: var(--vert); border-color: var(--vert); color: #fff; }
.puce.active::before { content: "✓ "; }
.puce:disabled { text-decoration: line-through; opacity: .45; }
.puce.charge { opacity: .6; }

.puce-case { position: relative; }
.puce-case input { position: absolute; opacity: 0; }
.puce-case span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--bord); font-size: .9rem; cursor: pointer; }
.puce-case input:checked + span { background: var(--rouge-clair); border-color: var(--rouge); color: var(--rouge); text-decoration: line-through; }
.puce-case input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); }
.petit-titre { font-size: .85rem; color: var(--texte-2); margin: 12px 0 2px; }

.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.filtre { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--ombre); text-decoration: none; color: var(--texte); font-weight: 550; font-size: .9rem; }
.filtre.actif { background: var(--texte); color: var(--surface); }

.cartes-recettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.cartes-recettes .carte { margin: 0; height: 100%; }
.recette-carte { text-decoration: none; }
.recette-carte h3 { margin: 6px 0 4px; }
.recette-tete { display: flex; justify-content: space-between; align-items: center; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texte-2); font-size: .85rem; margin: 0 0 6px; align-items: center; }
.manque { font-size: .85rem; color: var(--orange); margin: 0; }
.complet { font-size: .85rem; color: var(--vert-texte); margin: 0; font-weight: 600; }
#suggestions.charge { opacity: .5; transition: opacity .2s; }

.vide-bloc { text-align: center; padding: 28px 16px; color: var(--texte-2); }
.vide-bloc .ico-l { color: var(--vert-texte); margin-bottom: 8px; }
.vide-bloc h2 { justify-content: center; color: var(--texte); }
.vide-bloc .bouton { margin-top: 8px; }

.ia h2 { color: var(--vert-texte); }
.recette-ia { border-bottom: 1px solid var(--bord); padding-bottom: 14px; margin-bottom: 14px; }
.recette-ia form { margin-top: 12px; }
.conseil { background: var(--vert-clair); color: var(--vert-texte); padding: 10px 12px; border-radius: var(--rayon-s); font-size: .9rem; }

/* Recette */
.recette-titre { font-size: 1.4rem; display: block; margin-top: 4px; }
.chiffres { display: flex; gap: 10px; margin: 14px 0 18px; }
.chiffres div { flex: 1; background: var(--surface-2); border-radius: var(--rayon-s); padding: 10px; text-align: center; }
.chiffres strong { display: block; font-size: 1.1rem; color: var(--vert-texte); }
.chiffres span { font-size: .78rem; color: var(--texte-2); }
.ingredients { list-style: none; padding: 0; margin: 0 0 16px; }
.ingredients li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients .dispo .ico { color: var(--vert-texte); }
.ingredients .absent > span:first-child { color: var(--texte-2); }
.point-vide { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--bord); vertical-align: -2px; margin: 0 1px; }
.etapes { padding-left: 1.3rem; margin: 0; }
.etapes li { margin-bottom: 8px; padding-left: 4px; }
.collant-bas { position: sticky; bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom) + 10px); }

/* ---------- Suivi ---------- */

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tuile { background: var(--surface); border-radius: var(--rayon-s); box-shadow: var(--ombre); padding: 12px 10px; display: flex; flex-direction: column; min-width: 0; }
.tuile-label { font-size: .72rem; font-weight: 650; color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile strong { font-size: 1.35rem; line-height: 1.3; white-space: nowrap; }
.tuile strong small { font-size: .8rem; }
.tuile .baisse { color: var(--vert-texte); }
.tuiles-4 { grid-template-columns: repeat(2, 1fr); }

.courbe { width: 100%; height: auto; display: block; }
.courbe .grille { stroke: var(--bord); stroke-width: 1; }
.courbe .axe { font-size: 20px; fill: var(--texte-2); }
@media (min-width: 640px) { .courbe .axe { font-size: 14px; } }
.courbe .aire { fill: var(--vert); opacity: .12; }
.courbe .ligne { fill: none; stroke: var(--vert); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.courbe .point { fill: var(--surface); stroke: var(--vert); stroke-width: 3; }
.courbe .objectif { stroke: var(--or); stroke-width: 2; stroke-dasharray: 6 5; }
.courbe .objectif-txt { fill: var(--orange); font-weight: 600; }

.historique { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 8px; }
.historique summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--texte-2); font-size: .92rem; }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bord); min-height: 48px; }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple li > span:first-child { flex: 1; }
.liste-simple form { margin: 0; }

.tableau-defile { overflow-x: auto; margin: 0 -4px; }
.tableau-symptomes { border-collapse: collapse; width: 100%; font-size: .82rem; }
.tableau-symptomes th, .tableau-symptomes td { padding: 5px 3px; text-align: center; }
.tableau-symptomes thead th { font-weight: 600; color: var(--texte-2); font-size: .72rem; }
.tableau-symptomes tbody th { text-align: left; font-weight: 500; white-space: nowrap; color: var(--texte-2); }
.tableau-symptomes tbody tr { border-top: 1px solid var(--bord); }
.niv { display: inline-block; width: 16px; height: 16px; border-radius: 5px; vertical-align: middle; }
.niv-0 { background: var(--surface-2); }
.niv-1 { background: #F2D06B; }
.niv-2 { background: var(--orange); }
.niv-3 { background: var(--rouge); }
.legende { font-size: .78rem; color: var(--texte-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; }
.legende .niv { width: 12px; height: 12px; margin-left: 6px; }

/* ---------- Plan ---------- */

.semaines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface-2); padding: 4px; border-radius: var(--rayon-s); }
.semaine { text-align: center; padding: 8px 4px; border-radius: 9px; text-decoration: none; color: var(--texte-2); font-weight: 600; font-size: .9rem; line-height: 1.2; }
.semaine small { display: block; font-size: .7rem; }
.semaine.actif { background: var(--surface); color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.jour-plan { padding: 0; }
.jour-plan summary { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; list-style: none; }
.jour-plan summary::-webkit-details-marker { display: none; }
.jour-nom { font-weight: 650; }
.jour-nom small { color: var(--vert-texte); font-weight: 600; margin-left: 6px; }
.jour-plan.aujourdhui { outline: 2px solid var(--vert); }
.liste-plan { list-style: none; margin: 0; padding: 0 16px 12px; }
.liste-plan li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 0; border-top: 1px solid var(--bord); }
.liste-plan .repas-moment { grid-column: 1 / -1; }
.liste-plan .plan-desc { font-size: .95rem; }

/* ---------- Coach ---------- */

.discussion { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bulle { max-width: 86%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; }
.bulle-ia { background: var(--surface); box-shadow: var(--ombre); border-bottom-left-radius: 6px; align-self: flex-start; }
.bulle-moi { background: var(--vert); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.bulle-erreur { background: var(--rouge-clair); color: var(--rouge); align-self: flex-start; }
.bulle-attente { align-self: flex-start; color: var(--texte-2); font-style: italic; }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; }
.exemples .puce { text-align: left; height: auto; padding: 8px 14px; }
.saisie-coach {
    position: sticky; bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom) + 10px);
    display: flex; gap: 8px; align-items: flex-end;
    background: var(--surface); padding: 6px; border-radius: 28px; box-shadow: var(--ombre);
}
.saisie-coach textarea { min-height: 44px; max-height: 160px; border-radius: 22px; resize: none; background: transparent; padding: 10px 14px; }
.saisie-coach textarea:focus { background: transparent; border-color: transparent; }
.saisie-coach .bouton { flex: none; width: 44px; min-height: 44px; }
.coach-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.coach-pied form { margin: 0; }

/* ---------- Profil ---------- */

.profil-tete { display: flex; align-items: center; gap: 14px; }
.profil-tete h2 { margin: 0; }
.profil-tete p { margin: 0; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--vert-clair); color: var(--vert-texte); font-weight: 700; font-size: 1.2rem; }
details > summary h2 { display: inline-flex; margin: 0; }
#exclusions summary { list-style: none; }
#exclusions summary::-webkit-details-marker { display: none; }
#exclusions details[open] summary { margin-bottom: 8px; }
#exclusions .bouton { margin-top: 14px; }

.code-partage { text-align: center; background: var(--vert-clair); border-radius: var(--rayon-s); padding: 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.code-partage strong { font-size: 2rem; letter-spacing: .12em; color: var(--vert-texte); font-family: ui-monospace, "SF Mono", Consolas, monospace; cursor: copy; }

.notes { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.note { background: var(--surface-2); border-radius: var(--rayon-s); padding: 12px; }
.note p { margin-bottom: 4px; }
.note.nouvelle { border-left: 4px solid var(--or); }

.deconnexion { margin: 20px 0 0; }

/* ---------- Médecin ---------- */

.ajout-patient .formulaire-ligne { margin: 0; }
.liste-patients { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.patient-carte { display: flex; align-items: center; gap: 12px; text-decoration: none; margin: 0; border-left: 5px solid var(--vert); }
.patient-carte.statut-orange { border-left-color: var(--orange); }
.patient-carte.statut-rouge { border-left-color: var(--rouge); }
.patient-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.patient-carte > .ico { color: var(--texte-2); }
.alerte-ligne { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.alerte-ligne.alerte-rouge { color: var(--rouge); background: none; }
.alerte-ligne.alerte-orange { color: var(--orange); background: none; }
.alerte-ligne.alerte-gris { color: var(--texte-2); background: none; }
.resume-ia { background: var(--vert-clair); border-radius: var(--rayon-s); padding: 12px 14px; margin-bottom: 8px; }

/* ---------- Attente (envoi IA) ---------- */

.attente { position: relative; pointer-events: none; }
.attente .bouton[type=submit] { opacity: .7; }
.attente .bouton[type=submit]::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Écrans plus larges (tablette) ---------- */

@media (min-width: 640px) {
    .contenu { padding: 24px 24px 32px; }
    .cartes-recettes { grid-template-columns: 1fr 1fr; }
    .tuiles-4 { grid-template-columns: repeat(4, 1fr); }
    .resume-anneau { width: 150px; }
    .onglet { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Traitement : paliers de dose ---------- */

.sous-titre-form { margin: 10px 0 -2px; padding-top: 14px; border-top: 1px solid var(--bord); font-size: 1rem; }
.paliers { background: var(--surface-2); border-radius: var(--rayon-s); padding: 12px; }
.paliers summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.paliers[open] summary { margin-bottom: 8px; }
.paliers .champ { margin-bottom: 10px; }
.lignes-paliers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ligne-palier { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px; align-items: center; background: var(--surface); border-radius: var(--rayon-s); padding: 8px; }
.ligne-palier > span { font-size: .82rem; color: var(--texte-2); }
.ligne-palier input, .ligne-palier select { min-height: 42px; padding: 8px 10px; }
.ligne-palier input[name="palier_dose[]"] { grid-column: 1 / 3; }
.ligne-palier select { grid-column: 3 / 4; padding-right: 30px; background-position: right 6px center; }
.ligne-palier .bouton-icone { grid-column: 4; justify-self: end; }
.palier-actuel { background: var(--vert-clair); color: var(--vert-texte); border-radius: var(--rayon-s); padding: 8px 12px; font-size: .92rem; }
.palier-en-cours { font-weight: 650; color: var(--vert-texte); }
.grille-2 > .champ-dose { grid-column: 1 / -1; }
.dose-saisie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) {
    .ligne-palier { grid-template-columns: auto 70px auto 70px 1fr auto 40px; }
    .ligne-palier input[name="palier_dose[]"], .ligne-palier select, .ligne-palier .bouton-icone { grid-column: auto; }
}

/* ---------- Coordonnées ---------- */

.champ-partage { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.partager { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; font-weight: 600; color: var(--texte-2); cursor: pointer; padding-bottom: 6px; }
.partager input { width: 24px; height: 24px; accent-color: var(--vert); margin: 0; cursor: pointer; }
.coordonnees input:disabled { opacity: .7; }
.coordonnees-liste { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.coordonnees-liste div { display: flex; flex-direction: column; }
.coordonnees-liste dt { font-size: .74rem; color: var(--texte-2); font-weight: 600; }
.coordonnees-liste dd { margin: 0; word-break: break-word; }
.coordonnees-liste a { font-weight: 600; }
.coordonnees-patient summary { display: flex; align-items: center; gap: 8px; font-weight: 650; cursor: pointer; list-style: none; }
.coordonnees-patient summary::-webkit-details-marker { display: none; }
.liste-medecins-lies { list-style: none; margin: 0; padding: 0; }
.liste-medecins-lies > li { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.liste-medecins-lies > li:last-child { border-bottom: 0; }
.liste-simple-ligne { display: flex; align-items: center; gap: 10px; }
.liste-simple-ligne strong { flex: 1; }
.liste-simple-ligne form { margin: 0; }

/* ---------- Rappels ---------- */

.grille-rappel { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.jours-semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jour-case { position: relative; }
.jour-case input { position: absolute; opacity: 0; }
.jour-case span { display: grid; place-items: center; height: 40px; border-radius: 50%; border: 1.5px solid var(--bord); font-weight: 650; cursor: pointer; color: var(--texte-2); }
.jour-case input:checked + span { background: var(--vert); border-color: var(--vert); color: #fff; }
.jour-case input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); }
.canaux { gap: 8px; }
.case { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--vert); margin: 0; }
.rappel summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.rappel summary::-webkit-details-marker { display: none; }
.rappel summary > .ico { color: var(--texte-2); }
.rappel[open] summary { margin-bottom: 12px; }
.rappel-heure { font-size: 1.5rem; font-weight: 750; color: var(--vert-texte); font-variant-numeric: tabular-nums; }
.rappel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rappel.inactif { opacity: .6; }
.rappel form + form { margin-top: 8px; text-align: center; }
.appareil .bouton { width: 100%; margin-top: 4px; }

/* ---------- Histogramme des protéines ---------- */

.barres { width: 100%; height: auto; display: block; }
.barres .axe { font-size: 18px; fill: var(--texte-2); }
.barres .barre-ok { fill: var(--vert); }
.barres .barre-moyen { fill: var(--or); }
.barres .barre-bas { fill: var(--orange); }
.barres .barre-vide { fill: var(--bord); }
.barres .objectif { stroke: var(--texte-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
@media (min-width: 640px) { .barres .axe { font-size: 13px; } }

/* ---------- Rapport imprimable ---------- */

body.rapport { background: var(--surface-2); }
.rapport-actions { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--bord); }
.rapport-actions span { display: flex; gap: 6px; }
.rapport-actions .filtre { padding: 6px 12px; font-size: .85rem; }
.rapport-page { max-width: 820px; margin: 16px auto; background: #fff; color: #1C2420; padding: 28px; border-radius: 6px; box-shadow: var(--ombre); }
.rapport-page .l-marque { color: #2E6B4F; }
.rapport-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #2E6B4F; padding-bottom: 12px; margin-bottom: 16px; }
.rapport-tete h1 { font-size: 1.4rem; margin: 0 0 2px; text-align: right; }
.rapport-tete p { margin: 0; text-align: right; color: #5D6862; }
.rapport-chiffres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.rapport-chiffres div { border: 1px solid #DDE2DD; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; }
.rapport-chiffres span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #5D6862; font-weight: 600; }
.rapport-chiffres strong { font-size: 1.15rem; }
.rapport-chiffres small { color: #5D6862; font-size: .72rem; }
.rapport-bloc { margin-bottom: 14px; break-inside: avoid; }
.rapport-bloc h2 { font-size: 1rem; color: #2E6B4F; border-bottom: 1px solid #DDE2DD; padding-bottom: 4px; margin-bottom: 8px; display: block; }
.rapport-ligne { font-size: .82rem; color: #3a4440; margin: 4px 0; }
.rapport-alertes { margin: 0; padding-left: 18px; font-size: .88rem; }
.rapport-alertes .alerte-rouge { color: #C2413A; font-weight: 600; }
.rapport-alertes .alerte-orange { color: #b06a1f; }
.rapport .tableau-symptomes { font-size: .78rem; }
.rapport .niv { width: 18px; height: 18px; font-size: .68rem; line-height: 18px; text-align: center; color: #fff; font-weight: 700; }
.rapport .niv-0 { background: #EEF0EE; }
.rapport-note td { text-align: left !important; font-style: italic; color: #5D6862; font-size: .74rem; }
.rapport-pied { margin-top: 18px; padding-top: 8px; border-top: 1px solid #DDE2DD; font-size: .72rem; color: #5D6862; }
.rapport-page .courbe .aire { fill: #2E6B4F; }
.rapport-page .courbe .ligne, .rapport-page .courbe .point { stroke: #2E6B4F; }
@media (max-width: 640px) {
    .rapport-page { padding: 16px; margin: 8px; }
    .rapport-chiffres { grid-template-columns: repeat(2, 1fr); }
    .rapport-tete { flex-direction: column; }
    .rapport-tete h1, .rapport-tete p { text-align: left; }
}
@media print {
    @page { size: A4; margin: 12mm; }
    body.rapport { background: #fff; }
    .rapport-actions { display: none; }
    .rapport-page { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
    .rapport-chiffres { grid-template-columns: repeat(5, 1fr); }
    .barres .axe, .courbe .axe { font-size: 12px; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Scan de produits ---------- */

.actions-rapides { display: flex; gap: 8px; margin: 10px 0; }
.actions-rapides .bouton { flex: 1; padding: 0 12px; font-size: .92rem; }
.actions-rapides .form-photo { flex: 1; margin: 0; display: flex; }
.actions-rapides .form-photo .bouton { cursor: pointer; }
.actions-rapides .attente { opacity: .7; pointer-events: none; }
.scanner { display: flex; flex-direction: column; gap: 10px; }
.scanner-cadre { position: relative; border-radius: var(--rayon-s); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scanner-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-viseur { position: absolute; left: 8%; right: 8%; top: 30%; bottom: 30%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.scanner-viseur::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff5252; box-shadow: 0 0 8px #ff5252; }
.produit-nom { font-size: 1.3rem; display: block; margin-bottom: 2px; }
.score-proteines { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 12px 14px; border-radius: var(--rayon-s); margin: 12px 0; background: var(--surface-2); }
.score-proteines strong { grid-row: span 2; font-size: 1.8rem; font-weight: 750; }
.score-proteines span { font-weight: 600; }
.score-proteines small { color: inherit; opacity: .85; }
.score-excellent { background: var(--vert); color: #fff; }
.score-bon { background: var(--vert-clair); color: var(--vert-texte); }
.score-moyen { background: #FFF6D6; color: #6b5200; }
.score-faible { background: var(--orange-clair); color: var(--orange); }
.tableau-nutrition { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 8px; }
.tableau-nutrition th, .tableau-nutrition td { padding: 7px 4px; border-bottom: 1px solid var(--bord); text-align: right; }
.tableau-nutrition th:first-child { text-align: left; font-weight: 550; }
.tableau-nutrition tr:first-child th { font-size: .78rem; color: var(--texte-2); font-weight: 600; }
.proteines-portion { font-size: 1.1rem; margin: 0; }
.proteines-portion strong { color: var(--vert-texte); font-size: 1.4rem; }
.actions-produit { align-items: start; }
.actions-produit .carte { margin: 0; gap: 10px; }
.actions-produit h3 { margin: 0; }
@media (max-width: 420px) { .actions-produit { grid-template-columns: 1fr; } }

/* ---------- Comptes : sécurité, consentements, pages légales ---------- */

.lien-oubli { text-align: center; font-size: .92rem; }
.consentements { display: flex; flex-direction: column; gap: 10px; }
.consentements .case { align-items: flex-start; font-size: .88rem; line-height: 1.4; }
.consentements .case input { flex: none; margin-top: 1px; }
.bandeau-verif form { margin: 0; }
.lien-dev { background: #FFF6D6; color: #6b5200; }
.lien-dev a { font-weight: 700; color: inherit; }
.etapes-2fa { margin-bottom: 12px; }
.etapes-2fa li { margin-bottom: 10px; }
.etapes-2fa .bouton { margin: 6px 0; }
.cle-2fa { display: block; margin-top: 6px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon-s); font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; cursor: copy; }
.zone-danger-carte summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; color: var(--rouge); list-style: none; }
.zone-danger-carte summary::-webkit-details-marker { display: none; }
.zone-danger-carte[open] summary { margin-bottom: 10px; }
.lien-securite > .ico:first-child { color: var(--vert-texte); }
.actions-admin { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.actions-admin form { margin: 0; }
.texte-legal { padding-top: 32px; padding-bottom: 48px; line-height: 1.6; }
.texte-legal h1 { font-size: 1.8rem; }
.texte-legal h2 { font-size: 1.15rem; margin-top: 28px; display: block; }
.texte-legal li { margin-bottom: 6px; }
.a-completer { background: #FFF6D6; color: #6b5200; padding: 10px 14px; border-radius: var(--rayon-s); font-size: .9rem; }
.l-flash { margin: 16px 0 0; }

/* ---------- Onglets de listes et d'emplacements ---------- */

.onglets-listes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: none; }
.onglets-listes .filtre { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.filtre-ajout { border: 1.5px dashed var(--bord); background: transparent; box-shadow: none; color: var(--vert-texte); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
/* Bloc replié sans titre visible : ouvert par un bouton [data-ouvrir] */
.repliable-cache:not([open]) { display: none; }
.gestion-liste > summary { cursor: pointer; font-weight: 600; color: var(--texte-2); }
.gestion-liste[open] > summary { margin-bottom: 10px; }
.gestion-liste .formulaire-ligne { margin-top: 0; }
.gestion-liste form + form { margin-top: 10px; }

/* ---------- Emplacements : articles libres et aliments rangés ailleurs ---------- */

.articles-libres { list-style: none; margin: 8px 0 0; padding: 0; }
.articles-libres li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--bord); }
.articles-libres li > span { flex: 1; min-width: 0; }
.articles-libres small { color: var(--texte-2); margin-left: 6px; }
.articles-libres form { margin: 0; }
.frigo .ajout-course { padding: 10px 0 4px; }
.puce.ailleurs { border-style: dashed; color: var(--texte-2); }
.puce-lieu { font-size: .72rem; font-weight: 600; background: var(--surface-2); color: var(--texte-2); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.gestion-emplacement { border-top: 1px solid var(--bord); margin-top: 12px; padding-top: 10px; }

/* ---------- Liste de courses ---------- */

.lien-courses { margin-bottom: 14px; }
.lien-courses > .ico:first-child { color: var(--vert-texte); }
.generer-courses { display: flex; gap: 8px; }
.generer-courses form { flex: 1; margin: 0; }
.generer-courses .bouton { width: 100%; }
.ajout-course { margin-top: 0; padding: 8px; }
.ajout-course input.champ-qte { flex: none; width: 76px; }
.compte-courses { margin: 4px 4px 8px; }
.rayon { padding: 10px 16px; }
.rayon .petit-titre { margin: 4px 0; }
.liste-courses { list-style: none; margin: 0; padding: 0; }
.liste-courses li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--bord); }
.liste-courses li:first-child { border-top: 0; }
.liste-courses form { margin: 0; }
.coche.petite { width: 34px; height: 34px; }
.liste-courses li.achete .coche { background: var(--vert); border-color: var(--vert); color: #fff; }
.course-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.course-texte strong { font-weight: 550; }
.liste-courses li.achete .course-texte strong { text-decoration: line-through; color: var(--texte-2); }
.ajout-frigo { color: var(--vert-texte); font-weight: 600; }

/* ---------- Mes protéines ---------- */

.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; }
.raccourcis .filtre { border: 0; font: inherit; font-size: .88rem; font-weight: 550; cursor: pointer; }
.puce-mange { position: relative; }
.puce-mange input { position: absolute; opacity: 0; }
.puce-mange span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--bord); font-size: .9rem; cursor: pointer; color: var(--texte-2); text-decoration: line-through; }
.puce-mange input:checked + span { background: var(--vert); border-color: var(--vert); color: #fff; text-decoration: none; }
.puce-mange input:checked + span::before { content: "✓ "; white-space: pre; }
.puce-mange input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--vert) 45%, transparent); }
.autres-exclusions { border-top: 1px solid var(--bord); padding-top: 10px; }
.autres-exclusions summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.adapte { font-size: .78rem; font-weight: 600; color: var(--vert-texte); margin: 2px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.adapte.conflit { color: var(--orange); }
.plan-desc .adapte { display: block; }

/* ---------- Choix du médecin / demandes ---------- */

.bouton-large { width: 100%; margin-top: 12px; }
.centre { text-align: center; margin: 10px 0 4px; }
.ligne-medecin { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 64px; }
.ligne-medecin form { margin: 0; }
.etat { font-size: .8rem; font-weight: 650; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.etat-ok { color: var(--vert-texte); }
.etat-refus { color: var(--rouge); }
.liste-simple .etat-refus { margin-left: auto; }
.demande { border-left: 5px solid var(--or); margin: 0; }
.demande-tete { display: flex; align-items: center; gap: 12px; }
.demande-actions { display: flex; gap: 8px; margin-top: 12px; }
.demande-actions form { flex: 1; margin: 0; }
.demande-actions .bouton { width: 100%; }
.demande-actions > a { flex: 1; }
.titre-section .compteur { margin-left: 6px; }

/* =====================================================================
   Espace d'administration
   ===================================================================== */

.badge-admin { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--texte); color: var(--surface); font-size: .78rem; font-weight: 650; }
.titre-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 10px; }
.titre-ligne .titre-section { margin: 0 4px; }
.tuile-lien { text-decoration: none; color: inherit; }
.tuile-lien:active { transform: scale(.98); }

.recherche { margin-bottom: 10px; }
.recherche-champ { position: relative; display: block; }
.recherche-champ .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texte-2); }
.recherche-champ input[type=search] { padding-left: 40px; background: var(--surface); box-shadow: var(--ombre); }
input[type=search] {
    width: 100%; min-height: var(--tactile); padding: 10px 14px; font: inherit; font-size: 16px;
    color: var(--texte); border: 1.5px solid transparent; border-radius: var(--rayon-s); outline: none; -webkit-appearance: none; appearance: none;
}
input[type=search]:focus { border-color: var(--vert); }
.filtre span { opacity: .6; margin-left: 2px; font-weight: 500; }

.texte-coupe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.etiquette-role { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 650; margin-right: 6px; background: var(--vert-clair); color: var(--vert-texte); }
.etiquette-role.role-medecin { background: #E3EEF9; color: #2F6BA8; }
.etiquette-role.role-admin { background: var(--texte); color: var(--surface); }
@media (prefers-color-scheme: dark) { .etiquette-role.role-medecin { background: #1B2B3D; color: #8DBDEB; } }
.patient-carte.role-medecin { border-left-color: #2F80C0; }
.patient-carte.role-admin { border-left-color: var(--texte); }

.liste-admin { list-style: none; padding: 4px 16px; }
.liste-admin li + li { border-top: 1px solid var(--bord); }
.liste-admin a { display: flex; align-items: center; gap: 10px; padding: 12px 0; text-decoration: none; color: inherit; min-height: 56px; }
.liste-admin-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-admin .ico { color: var(--texte-2); }

.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lignes-ingredients { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ligne-ingredient { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 6px; padding: 8px; background: var(--surface-2); border-radius: var(--rayon-s); }
.ligne-ingredient select:first-child { grid-column: 1 / -1; }
.ligne-ingredient input, .ligne-ingredient select { background-color: var(--surface); min-height: 42px; }
.ligne-ingredient .bouton-icone { align-self: center; }
button.lien-fleche { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 600; color: var(--vert-texte); cursor: pointer; }

.liste-ingredients-admin { list-style: none; margin: 0; padding: 0; }
.liste-ingredients-admin li + li { border-top: 1px solid var(--bord); }
.liste-ingredients-admin summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; min-height: 48px; }
.liste-ingredients-admin summary::-webkit-details-marker { display: none; }
.liste-ingredients-admin details[open] { padding-bottom: 12px; }
.liste-ingredients-admin details[open] summary { font-weight: 650; }
.liste-ingredients-admin form + form { margin-top: 6px; }

.zone-danger { margin-top: 24px; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--rouge) 50%, transparent); border-radius: var(--rayon); text-align: center; }
.zone-danger p { margin: 8px 0 0; }
.bouton-danger { border-color: var(--rouge); color: var(--rouge); width: 100%; }
.bouton-danger:hover { background: var(--rouge-clair); }

@media (min-width: 640px) {
    .ligne-ingredient { grid-template-columns: 2fr 1fr 1fr 40px; }
    .ligne-ingredient select:first-child { grid-column: auto; }
}

/* =====================================================================
   Landing page (présentation du produit)
   ===================================================================== */

.landing { background: var(--surface); }
.l-conteneur { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.l-etroit { max-width: 760px; }

.l-entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bord); padding-top: env(safe-area-inset-top); }
.l-entete-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.l-marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.3rem; color: var(--texte); text-decoration: none; }
.l-nav { display: none; gap: 24px; flex: 1; }
.l-nav a { color: var(--texte-2); text-decoration: none; font-weight: 550; }
.l-nav a:hover { color: var(--texte); }
.l-entete-in .bouton { margin-left: auto; }
.bouton-petit { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.bouton-grand { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }
.bouton-blanc { background: #fff; color: #235440; border-color: #fff; }

.l-heros { padding: 40px 0 56px; background: radial-gradient(120% 80% at 100% 0%, var(--vert-clair), transparent 60%); }
.l-heros-grille { display: grid; gap: 48px; align-items: center; }
.l-surtitre { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vert-texte); margin-bottom: 14px; }
.l-heros h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 18px; font-weight: 750; }
.l-heros h1 em { font-style: normal; color: var(--vert-texte); }
.l-chapeau { font-size: 1.12rem; color: var(--texte-2); max-width: 34em; margin-bottom: 26px; }
.l-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.l-atouts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--texte-2); font-size: .92rem; }
.l-atouts .ico { color: var(--vert-texte); }

/* Maquette de téléphone */
.l-telephone { justify-self: center; width: 290px; padding: 12px; border-radius: 44px; background: #1A211D; box-shadow: 0 30px 60px -20px rgba(20, 50, 35, .45), inset 0 0 0 2px #333; transform: rotate(2deg); }
.l-ecran { background: #F5F6F3; color: #1C2420; border-radius: 34px; padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 9px; min-height: 540px; }
.l-ecran small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: #5D6862; }
.l-ecran p { margin: 0; font-size: .82rem; }
.l-ecran-tete { text-align: center; margin-bottom: 4px; }
.l-ecran-tete strong { display: block; font-size: 1rem; }
.l-ecran-tete span { font-size: .72rem; color: #5D6862; }
.l-ecran-carte { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.l-ecran-anneau { display: flex; align-items: center; gap: 12px; }
.l-ecran-anneau .anneau { width: 92px; flex: none; }
.l-ecran-anneau p { font-size: 1.05rem; }
.l-ecran-anneau b { color: #2E6B4F; }
.l-ecran .anneau-fond { stroke: #EEF0EE; }
.l-ecran .anneau-chiffre { fill: #1C2420; }
.l-ecran .anneau-valeur { stroke: #F2B84B; }
.l-mini-lien { font-size: .72rem; color: #2E6B4F; font-weight: 650; }
.l-verres { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 6px; }
.l-verres i { height: 18px; border-radius: 3px 3px 6px 6px; background: #EEF0EE; border: 1px solid #DDE2DD; }
.l-verres i.p { background: linear-gradient(to top, #5AA9E6 80%, #EEF0EE 80%); }
.l-ecran-repas { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.l-ecran-repas div { flex: 1; min-width: 0; }
.l-ecran-repas b { font-size: .72rem; background: #E6F0EA; color: #2E6B4F; border-radius: 99px; padding: 2px 8px; }
.l-coche { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #DDE2DD; display: grid; place-items: center; font-size: .75rem; color: #fff; flex: none; }
.l-ecran-repas.fait .l-coche { background: #2E6B4F; border-color: #2E6B4F; }

.l-section { padding: 64px 0; }
.l-fond { background: var(--fond); }
.l-titre { font-size: clamp(1.6rem, 4.5vw, 2.3rem); letter-spacing: -.01em; text-align: center; display: block; margin-bottom: 12px; font-weight: 720; }
.l-titre.l-gauche { text-align: left; }
.l-sous-titre { text-align: center; color: var(--texte-2); font-size: 1.08rem; max-width: 36em; margin: 0 auto 36px; }

.l-constat { background: var(--vert); color: #fff; padding: 44px 0; }
.l-constat-grille { display: grid; gap: 28px; }
.l-chiffre { display: block; font-size: 2rem; font-weight: 750; color: var(--or); margin-bottom: 4px; }
.l-constat p { margin: 0; opacity: .92; }

.l-fonctions { display: grid; gap: 16px; }
.l-fonction { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; }
.l-fonction h3 { font-size: 1.08rem; margin: 12px 0 6px; }
.l-fonction p { color: var(--texte-2); margin: 0; }
.l-pictos { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--vert-clair); color: var(--vert-texte); }
.l-confiance .l-fonction { background: var(--fond); border: 0; }
.l-confiance .l-fonction h3 { margin-top: 0; color: var(--vert-texte); }

.l-etapes { list-style: none; counter-reset: etape; padding: 0; margin: 32px auto 0; max-width: 900px; display: grid; gap: 16px; }
.l-etapes li { counter-increment: etape; background: var(--surface); border-radius: var(--rayon); padding: 22px 22px 22px 78px; position: relative; box-shadow: var(--ombre); }
.l-etapes li::before { content: counter(etape); position: absolute; left: 22px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.l-etapes strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.l-etapes span { color: var(--texte-2); }

.l-medecins { display: grid; gap: 40px; align-items: center; }
.l-medecins p { color: var(--texte-2); font-size: 1.05rem; }
.l-liste { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; }
.l-liste li { display: flex; gap: 10px; align-items: flex-start; }
.l-liste .ico { color: var(--vert-texte); margin-top: 4px; }
.l-carte-medecin { background: var(--fond); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.l-patient { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 14px; padding: 14px; border-left: 5px solid var(--vert); box-shadow: var(--ombre); }
.l-patient.statut-orange { border-left-color: var(--orange); }
.l-patient.statut-rouge { border-left-color: var(--rouge); }
.l-patient strong { display: block; }
.l-patient.statut-rouge small { color: var(--rouge); font-weight: 600; }
.l-patient.statut-orange small { color: var(--orange); font-weight: 600; }

.l-faq { border-bottom: 1px solid var(--bord); }
.l-faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 600; font-size: 1.05rem; list-style: none; position: relative; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.5rem; color: var(--vert-texte); font-weight: 400; }
.l-faq[open] summary::after { content: "−"; }
.l-faq p { color: var(--texte-2); padding-bottom: 18px; margin: 0; }

.l-final { background: linear-gradient(135deg, var(--vert), #1E4A37); color: #fff; text-align: center; }
.l-final h2 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); display: block; }
.l-final p { opacity: .9; margin-bottom: 24px; }

.l-pied { padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); background: var(--fond); color: var(--texte-2); font-size: .88rem; }
.l-pied .l-marque { font-size: 1.1rem; margin-bottom: 12px; }
.l-pied .logo { width: 26px; height: 26px; }

@media (min-width: 720px) {
    .l-nav { display: flex; }
    .l-entete-in .bouton { margin-left: 0; }
    .l-constat-grille { grid-template-columns: repeat(3, 1fr); }
    .l-fonctions { grid-template-columns: repeat(2, 1fr); }
    .l-etapes { grid-template-columns: repeat(3, 1fr); }
    .l-etapes li { padding: 74px 22px 22px; }
    .l-section { padding: 88px 0; }
}
@media (min-width: 960px) {
    .l-heros { padding: 72px 0 88px; }
    .l-heros-grille { grid-template-columns: 1.15fr .85fr; }
    .l-fonctions { grid-template-columns: repeat(3, 1fr); }
    .l-medecins { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
.lien-rappels { background: var(--surface-2); border-radius: var(--rayon-s); padding: 12px; color: inherit; }
.lien-rappels > .ico:first-child { color: var(--vert-texte); }

/* Admin : édition du plan */
.plan-edition { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.repas-edition { margin: 0; border-top: 1px solid var(--bord); padding-top: 10px; }
.repas-edition-champs { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.repas-edition-champs input[type=text] { flex: 1; min-width: 0; }
.repas-edition .bouton-icone { background: var(--vert-clair); color: var(--vert-texte); flex: none; }

/* Traductions du catalogue (admin) */
.traductions { margin-top: 8px; }
.traductions > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; color: var(--texte-2); }
.traductions[open] > summary { margin-bottom: 8px; }
.traductions .champ { margin-top: 8px; }
.puce-manque { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--orange); background: var(--orange-clair); border-radius: 999px; padding: 1px 8px; }
.traductions-ia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.case-petite { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texte-2); cursor: pointer; }
.case-petite input { width: 18px; height: 18px; accent-color: var(--vert); margin: 0; }

/* Menu personnel généré par l'IA */
.etapes-menu { margin: 4px 0; padding-left: 22px; display: grid; gap: 4px; }
.etapes-menu li.en-cours { font-weight: 600; }
.etapes-menu li.fait [data-etat] { color: var(--vert-texte); }
.etapes-menu li.echec [data-etat] { color: var(--orange); }
.bandeau-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bandeau-menu form { margin: 0; }

/* Requêtes IA supplémentaires */
.solde-ia { margin: 6px 0 10px; }
.packs-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
.pack-ia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border: 1.5px solid var(--bord); border-radius: var(--rayon-s); margin: 0; text-align: center; }
.pack-ia span { color: var(--texte-2); font-size: .9rem; }
.commande-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.commande-ia > span { flex: 1 1 200px; display: flex; flex-direction: column; }
.commande-ia form { margin: 0; }
.quota-ia a { white-space: nowrap; }

/* Factures (admin) */
.facture-ligne .facture-actions { display: flex; justify-content: flex-end; padding: 0 0 10px; }
.facture-ligne .facture-actions form { margin: 0; }
.tuile.actif { outline: 2px solid var(--vert); }

/* Page d'accueil : sécurité et tarifs */
.l-centre { text-align: center; display: block; }
.l-sceaux { background: var(--surface); border-bottom: 1px solid var(--bord); padding: 18px 0; }
.l-sceaux-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.l-sceaux a { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-2); text-decoration: none; font-size: .85rem; line-height: 1.35; }
.l-sceaux a .ico { flex: none; width: 26px; height: 26px; color: var(--vert-texte); }
.l-sceaux strong { display: block; color: var(--texte); font-size: .92rem; }
.l-securite { background: linear-gradient(160deg, #1E4A37, var(--vert)); color: #fff; }
.l-securite .l-surtitre { color: var(--or); display: flex; justify-content: center; align-items: center; gap: 6px; }
.l-securite .l-sous-titre { color: rgba(255, 255, 255, .85); }
.l-securite .l-fonction { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.l-securite .l-fonction h3 { color: #fff; }
.l-securite .l-fonction p { color: rgba(255, 255, 255, .82); }
.l-securite .l-pictos { background: rgba(255, 255, 255, .14); color: var(--or); }
.l-securite a { color: #fff; font-weight: 650; }
.l-jamais { list-style: none; padding: 0; margin: 30px auto 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.l-jamais li { border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 14px; font-size: .9rem; }
.l-jamais li::before { content: "✕ "; color: var(--or); font-weight: 700; }
.l-tarifs { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.l-tarif { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.l-tarif h3 { margin: 0; font-size: 1.15rem; }
.l-tarif-gratuit { border: 2px solid var(--vert); }
.l-prix { font-size: 2rem; font-weight: 750; color: var(--vert-texte); margin: 0; }
.l-tarif .l-liste { margin-bottom: 8px; }
.l-tarif .bouton { align-self: flex-start; }
.l-packs { list-style: none; padding: 0; margin: 0; }
.l-packs li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.l-packs li:last-child { border-bottom: 0; }
.l-pied-securite { display: flex; align-items: center; gap: 6px; color: var(--vert-texte); font-weight: 600; }
@media (min-width: 720px) {
    .l-sceaux-grille { grid-template-columns: repeat(4, 1fr); }
    .l-tarifs { grid-template-columns: 1fr 1fr; }
}
.l-tarifs-3 { max-width: 1120px; }
.l-prix small { font-size: .9rem; font-weight: 500; color: var(--texte-2); }
@media (min-width: 960px) { .l-tarifs-3 { grid-template-columns: repeat(3, 1fr); } }

/* Profil : comparatif gratuit / Satio Plus */
.comparatif { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 8px 0; }
.comparatif th, .comparatif td { padding: 7px 6px; border-bottom: 1px solid var(--bord); text-align: left; }
.comparatif th:not(:first-child), .comparatif td:not(:first-child) { text-align: center; white-space: nowrap; }
.comparatif th:last-child, .comparatif td:last-child { color: var(--vert-texte); font-weight: 650; }