/* Fournil — interface Phase 1.
   Contexte d'usage : labo humide, mal éclairé, mains farineuses, téléphone à
   bout de bras. Gros corps, gros contrastes, grosses cibles (CLAUDE.md §7). */

/* Palette. Les quatre teintes portant du texte ont été assombries de 8 à 10 %
   par rapport aux valeurs du document : aux valeurs d'origine, le blanc sur
   croûte tombait à 3,9:1 et le texte secondaire à 3,3:1, sous le seuil WCAG AA
   de 4,5:1 exigé par ce même document (§7). Les teintes sont conservées ; seule
   la luminosité change. Valeurs d'origine en commentaire. */
:root {
    --fournil-pate:   #F4EBDC;
    --fournil-croute: #A56735;  /* était #B5713A — 4,57:1 avec du blanc */
    --fournil-braise: #CC4A2D;  /* était #D94F30 — 4,58:1 */
    --fournil-levain: #5F7E50;  /* était #6B8E5A — 4,58:1 */
    --fournil-four:   #241C16;
    --fournil-cendre: #70675D;  /* était #8A7F73 — 4,69:1 sur fond pâte */

    /* Teintes claires des mêmes couleurs, pour les fonds de bandeau. Du texte
       « four » posé dessus dépasse 12:1, là où le blanc sur couleur pleine
       plafonnait à 4,6:1 : c'est à la fois plus lisible et plus calme. Un labo
       où tout crie en aplat rouge finit par ne plus rien signaler. */
    --tint-croute: #F7EDE4;
    --tint-braise: #FBEAE6;
    --tint-levain: #ECF1E9;

    /* Trait de séparation : le pâte pur disparaît sur fond blanc */
    --trait: #E8DECE;

    /* Élévation. Deux ombres superposées — une courte et dense pour poser
       l'objet, une longue et diffuse pour l'éloigner du fond — au lieu d'une
       seule ombre plate. */
    --ombre-1: 0 1px 2px rgba(36, 28, 22, 0.06), 0 2px 8px rgba(36, 28, 22, 0.06);
    --ombre-2: 0 2px 4px rgba(36, 28, 22, 0.08), 0 8px 24px rgba(36, 28, 22, 0.10);

    --rayon: 14px;
    --rayon-petit: 10px;
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

body {
    margin: 0;
    background: var(--fournil-pate);
    color: var(--fournil-four);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    /* Le rendu par défaut épaissit le texte sombre sur fond clair */
    -webkit-font-smoothing: antialiased;
}

/* Les chiffres s'alignent en colonne : dans un écran de stock, tout est
   quantité, prix et écart. Sans chasse fixe, une colonne de nombres tremble. */
.row, .rows, .cost-panel, .inv-row, .draft-row, table,
input[inputmode="decimal"], input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums;
}

/* Animations discrètes, et coupées net pour qui les refuse */
@media (prefers-reduced-motion: no-preference) {
    .btn, .row-click, .section-head, .tab, .allergen, .card {
        transition: background-color 120ms ease, border-color 120ms ease,
                    box-shadow 120ms ease, transform 120ms ease;
    }

    .btn:active:not(:disabled) { transform: translateY(1px); }
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fournil-four);
    color: var(--fournil-pate);
}

.brand {
    font-size: 22px;
    font-weight: 800;
    /* Un titre serré se lit comme un mot, pas comme une suite de lettres */
    letter-spacing: -0.2px;
}

/* Le nom de la boulangerie ne doit pas pousser le bouton « Quitter » hors
   de l'écran sur un téléphone étroit */
.tenant {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px;
}

.card {
    background: #fff;
    border-radius: var(--rayon);
    padding: 22px;
    margin: 18px 0;
    box-shadow: var(--ombre-1);
}

.card-ok   { border-left: 6px solid var(--fournil-levain); }
.card-warn { border-left: 6px solid var(--fournil-braise); }

/* Titres resserrés : à corps égal, un titre à interlettrage négatif paraît
   plus assuré et se distingue mieux du texte courant. */
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; margin: 0 0 14px; }
h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.3px; margin: 0 0 10px; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.2px; margin: 0 0 10px; }
h4 { font-size: 16px; margin: 20px 0 8px; letter-spacing: 0.3px; text-transform: uppercase;
     color: var(--fournil-cendre); }

/* Un paragraphe d'explication sous un titre lui appartient : on colle les deux */
h2 + .muted, h3 + .muted { margin-top: -4px; }

label {
    display: block;
    margin: 14px 0;
    font-weight: 600;
}

input, textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 14px;
    font-size: 17px;
    font-family: inherit;
    /* Bordure discrète au repos, franche au focus : une grille de champs tous
       cerclés de 2px de gris sombre alourdit inutilement l'écran. */
    border: 2px solid var(--trait);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--fournil-four);
}

input::placeholder, textarea::placeholder { color: #A79C90; }

input:hover, textarea:hover, select:hover { border-color: #CFC2AE; }

input:focus, textarea:focus {
    outline: 3px solid var(--fournil-croute);
    outline-offset: 1px;
    border-color: var(--fournil-croute);
}

input:disabled { background: var(--fournil-pate); color: var(--fournil-cendre); }

/* Case à cocher : la cible reste large, la coche suit la couleur de marque */
label.check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border: 2px solid var(--trait);
    border-radius: var(--rayon-petit);
    cursor: pointer;
}

label.check:hover { border-color: #CFC2AE; background: #FCFAF7; }

label.check input[type="checkbox"] {
    width: 26px;
    height: 26px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--fournil-croute);
}

.btn {
    display: inline-block;
    min-height: 56px;
    padding: 14px 22px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--rayon-petit);
    cursor: pointer;
    margin-top: 10px;
}

.btn:focus-visible {
    outline: 3px solid var(--fournil-four);
    outline-offset: 2px;
}

.btn:disabled { opacity: 0.45; cursor: wait; }

.btn-primary {
    background: var(--fournil-croute);
    color: #fff;
    width: 100%;
    box-shadow: var(--ombre-1);
}
.btn-primary:hover:not(:disabled) { background: #94592C; }

.btn-secondary { background: var(--fournil-levain); color: #fff; width: 100%; }
.btn-secondary:hover:not(:disabled) { background: #526E45; }

.btn-ghost {
    background: transparent;
    color: var(--fournil-pate);
    border: 2px solid rgba(244, 235, 220, 0.4);
    min-height: 44px;
}
.btn-ghost:hover { background: rgba(244, 235, 220, 0.12); }

.btn-link {
    background: none;
    color: var(--fournil-croute);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 0;
}
.btn-link:hover { color: #7E4A24; }

/* Bandeaux : fond teinté et texte sombre plutôt qu'aplat saturé et texte
   blanc. Le contraste passe de 4,6:1 à plus de 12:1, et un écran qui ne crie
   pas en permanence laisse l'urgence réelle ressortir. Le liseré porte la
   couleur, donc l'information reste lisible sans dépendre d'elle seule. */
.banner {
    padding: 14px 16px;
    border-radius: var(--rayon-petit);
    border-left: 5px solid transparent;
    font-weight: 600;
    margin: 16px 0;
}

.banner p { margin: 0 0 8px; }
.banner p:last-child { margin-bottom: 0; }

.banner-error   { background: var(--tint-braise); border-left-color: var(--fournil-braise); color: var(--fournil-four); }
.banner-ok      { background: var(--tint-levain); border-left-color: var(--fournil-levain); color: var(--fournil-four); }
.banner-queue   { background: var(--tint-croute); border-left-color: var(--fournil-croute); color: var(--fournil-four); }
/* Hors ligne : état du système, pas du métier — il garde son aplat sombre */
.banner-offline { background: var(--fournil-four); color: var(--fournil-pate); border-left-color: var(--fournil-croute); }

/* Retour en arrière possible pendant 10 secondes après une production */
.undo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--fournil-four);
    color: var(--fournil-pate);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0;
    font-weight: 600;
}

.btn-undo {
    background: var(--fournil-braise);
    color: #fff;
    min-height: 48px;
    margin: 0;
}

.muted { color: var(--fournil-cendre); }

.words {
    background: var(--fournil-pate);
    border: 2px dashed var(--fournil-croute);
    border-radius: 10px;
    padding: 16px;
    font-size: 18px;
    line-height: 1.8;
    white-space: pre-wrap;
    column-count: 2;
}

.sas {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 8px;
    text-align: center;
    color: var(--fournil-four);
    background: var(--fournil-pate);
    border-radius: 10px;
    padding: 12px;
}

/* ---------- Navigation par onglets ----------
   Sur grand écran : bandeau haut classique.
   Sur téléphone : barre basse fixe, à portée du pouce — l'application est
   consultée debout, d'une main, dans un labo (CLAUDE.md §7). */

.tabs {
    display: flex;
    gap: 6px;
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    flex: 1 0 auto;
    min-width: 84px;
    min-height: 56px;
    padding: 0 14px;
    border: none;
    border-radius: var(--rayon-petit) var(--rayon-petit) 0 0;
    background: transparent;
    color: var(--fournil-cendre);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.tab:hover { color: var(--fournil-four); background: rgba(255, 255, 255, 0.5); }

.tab:focus-visible {
    outline: 3px solid var(--fournil-croute);
    outline-offset: -3px;
}

.tab[aria-selected="true"] {
    background: #fff;
    color: var(--fournil-four);
    box-shadow: var(--ombre-1);
    /* L'onglet actif se prolonge dans la carte : il ne flotte pas au-dessus */
    box-shadow: 0 -2px 6px rgba(36, 28, 22, 0.06);
}

@media (max-width: 720px) {
    .tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        margin: 0;
        padding: 4px 8px;
        gap: 4px;
        background: #fff;
        border-top: 2px solid var(--fournil-pate);
        /* Encoches et barre gestuelle des téléphones récents */
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(36, 28, 22, 0.10);
        scroll-snap-type: x proximity;
    }

    .tab {
        flex: 0 0 auto;
        min-width: 76px;
        border-radius: 10px;
        font-size: 15px;
        scroll-snap-align: center;
    }

    .tab[aria-selected="true"] {
        background: var(--fournil-croute);
        color: #fff;
        box-shadow: none;
    }

    /* La barre basse ne doit jamais masquer le dernier bouton d'un écran */
    .wrap {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Listes en lignes ---------- */

.rows {
    margin: 12px 0;
}

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border-bottom: 1px solid var(--trait);
    font-size: 17px;
    text-align: left;
}

/* Le dernier trait d'une liste ne sépare rien : il souligne le vide */
.rows > *:last-child > .row,
.rows > .row:last-child,
.rows > .row-click:last-child { border-bottom: none; }

.row-click {
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: var(--rayon-petit);
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    min-height: 56px;
}

.row-click:hover {
    background: var(--fournil-pate);
}

.row-click:focus-visible {
    outline: 3px solid var(--fournil-croute);
    outline-offset: -3px;
}


.row-main {
    flex: 1;
    font-weight: 600;
}

/* Sur téléphone, une ligne à quatre colonnes ne tient pas : le libellé prend
   toute la largeur et les informations secondaires passent dessous. */
@media (max-width: 720px) {
    .row,
    .row-click {
        flex-wrap: wrap;
        row-gap: 4px;
        align-items: baseline;
    }

    .row-main {
        flex: 1 0 100%;
    }

    .row > .muted,
    .row-click > .muted {
        font-size: 15px;
    }
}

.row[data-neg="true"] {
    color: var(--fournil-braise);
    font-weight: 700;
}

.row[data-info="true"] {
    color: var(--fournil-cendre);
}

/* ---------- Inventaire ---------- */

.inv-row {
    padding: 14px 12px;
    border-bottom: 1px solid var(--fournil-pate);
}

.inv-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.inv-count {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.inv-count input {
    margin-top: 0;
    flex: 1;
}

.inv-delta {
    margin: 8px 0 0;
    font-weight: 700;
    color: var(--fournil-levain);
}

.inv-delta[data-neg="true"] {
    color: var(--fournil-braise);
}

.btn-mini-ok {
    min-height: 56px;
    padding: 10px 18px;
    background: var(--fournil-levain);
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

/* ---------- Achats et validation de quittance ---------- */

.draft-row {
    padding: 14px 12px;
    border-bottom: 1px solid var(--fournil-pate);
}

.draft-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pill {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: var(--fournil-braise);
    color: #fff;
}

.pill[data-ok="true"] {
    background: var(--fournil-levain);
}

/* Un lot sans urgence reste discret ; l'urgence saute aux yeux */
.pill[data-urgent="false"] {
    background: var(--fournil-cendre);
}

.pill[data-urgent="true"] {
    background: var(--fournil-braise);
}

/* ---------- Fiche de traçabilité ---------- */

.trace-subject {
    font-size: 19px;
    font-weight: 700;
    color: var(--fournil-croute);
    margin: 0 0 12px;
}

.file-btn {
    display: block;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}

.file-btn input[type="file"] {
    display: none;
}

/* ---------- Coût de revient ---------- */

/* Le panneau de coût est la réponse à « combien me coûte mon croissant » :
   il mérite d'être posé sur un fond à lui plutôt que noyé dans le formulaire. */
.cost-panel {
    margin-top: 16px;
    padding: 4px 16px;
    background: var(--fournil-pate);
    border-radius: var(--rayon-petit);
}

.cost-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
}

.cost-line:last-child { border-bottom: none; }

.cost-line-big {
    font-size: 22px;
    font-weight: 600;
}

.cost-line-big strong {
    color: var(--fournil-levain);
}

.cost-line-big strong[data-thin="true"] {
    color: var(--fournil-braise);
}

/* ---------- Édition d'une recette ---------- */

/* Ligne en cours de modification : repérable sans lire */
.row[data-editing="true"] {
    background: var(--tint-croute);
    box-shadow: inset 4px 0 0 var(--fournil-croute);
    border-radius: var(--rayon-petit);
}

.step-row {
    padding: 14px 12px;
    border-bottom: 1px solid var(--fournil-pate);
}

.step-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.step-num {
    flex: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 999px;
    background: var(--fournil-croute);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.step-text {
    margin: 6px 0 0 40px;
}

.step-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 0 40px;
}

.allergens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.allergen {
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 2px solid var(--trait);
    background: #fff;
    color: var(--fournil-four);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
}

.allergen:hover { border-color: var(--fournil-croute); }

.allergen[data-on="true"] {
    background: var(--fournil-croute);
    border-color: var(--fournil-croute);
    color: #fff;
    font-weight: 700;
}

.recipe-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid var(--fournil-pate);
}

.recipe-actions .btn {
    flex: 1;
    min-width: 140px;
}

/* Grille de saisie d'une ligne d'achat : deux colonnes sur large écran */
.draft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 12px;
}

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    cursor: pointer;
}

.check input[type="checkbox"] {
    width: 28px;
    height: 28px;
    margin: 0;
    flex: none;
    accent-color: var(--fournil-croute);
}

.btn-loss {
    background: var(--fournil-pate);
    color: var(--fournil-braise);
    border: 2px solid var(--fournil-braise);
    width: 100%;
}

/* ---------- Faisabilité : combien de fois avec le stock actuel ---------- */

.faisable {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fournil-levain);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.faisable[data-bloque="true"] {
    background: var(--fournil-braise);
}

.faisable:empty {
    display: none;
}

.limite {
    flex: none;
    font-size: 14px;
}

.limite:empty {
    display: none;
}

.stock-dispo {
    background: var(--fournil-pate);
    border-left: 5px solid var(--fournil-levain);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-weight: 600;
}

/* ---------- Faisabilité : combien de fournées avec le stock actuel ---------- */

.faisable {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fournil-levain);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.faisable[data-bloque="true"] {
    background: var(--fournil-braise);
}

.faisable:empty {
    display: none;
}

.limite {
    font-size: 15px;
}

.limite:empty {
    display: none;
}

/* Le chiffre qu'on vient chercher : annoncé avant de choisir le multiplicateur */
.stock-dispo {
    background: var(--fournil-pate);
    border-left: 6px solid var(--fournil-levain);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-weight: 600;
}

/* ---------- Écran produire ---------- */

.mult-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.btn-mult {
    background: var(--fournil-pate);
    color: var(--fournil-four);
    font-size: 22px;
    min-height: 64px;
    border: 2px solid var(--fournil-croute);
}

.btn-mult:hover {
    background: var(--fournil-croute);
    color: #fff;
}

/* ---------- Divers ---------- */

/* Action destructive en ligne : jamais sous 48 px, un tap accidentel supprime */
.btn-mini {
    min-height: 48px;
    padding: 8px 16px;
    font-size: 15px;
    background: var(--fournil-pate);
    color: var(--fournil-braise);
    border: 2px solid var(--fournil-braise);
    margin: 0;
}

@media (max-width: 720px) {
    .btn-mini,
    .btn-mini-ok {
        min-height: 52px;
        padding: 10px 18px;
    }
}

fieldset {
    border: 2px solid var(--fournil-pate);
    border-radius: 10px;
    margin: 16px 0;
    padding: 12px 16px;
}

legend {
    font-weight: 700;
    padding: 0 6px;
}

select {
    display: block;
    width: 100%;
    min-height: 56px;
    margin-top: 6px;
    padding: 14px;
    font-size: 17px;
    font-family: inherit;
    border: 2px solid var(--trait);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--fournil-four);
    cursor: pointer;
}

select:focus {
    outline: 3px solid var(--fournil-croute);
    outline-offset: 1px;
    border-color: var(--fournil-croute);
}

/* ---------- Impression : la fiche remise au contrôle des denrées ----------
   Le document demande un export PDF. Plutôt qu'un générateur PDF maison, on
   soigne la feuille imprimable : le navigateur sait l'enregistrer en PDF, sur
   ordinateur comme sur téléphone, et le rendu reste juste sans dépendance. */

@media print {
    .topbar,
    .tabs,
    .banner,
    .undo-bar,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 12pt;
    }

    .wrap {
        max-width: none;
        padding: 0;
    }

    /* Seule la fiche s'imprime : le reste de l'écran n'a rien à faire sur papier */
    .card:not(.trace-sheet) {
        display: none !important;
    }

    .trace-sheet {
        box-shadow: none;
        border: 1px solid #000;
        padding: 0;
    }

    .row {
        break-inside: avoid;
        border-bottom: 1px solid #ccc;
    }
}

.invite-url {
    background: var(--fournil-pate);
    border-radius: 8px;
    padding: 12px;
    word-break: break-all;
    font-family: ui-monospace, monospace;
    font-size: 14px;
    user-select: all;
}

/* ---------- Formulaire à sections dépliantes ----------
   Le formulaire recette complet fait trois écrans sur téléphone. Déplié d'un
   bloc, il oblige à faire défiler à l'aveugle pour trouver le bouton
   d'enregistrement. Une section ouverte à la fois, chaque en-tête résumant son
   contenu, garde l'ensemble lisible sans rien cacher. */

.form-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.form-head h3 { margin: 0; }

.btn-back {
    background: var(--fournil-pate);
    color: var(--fournil-four);
    min-height: 44px;
    padding: 10px 16px;
    margin-top: 0;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 14px 16px;
    margin-top: 10px;
    font-family: inherit;
    font-size: 17px;
    text-align: left;
    background: var(--fournil-pate);
    color: var(--fournil-four);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

.section-head:focus-visible {
    outline: 3px solid var(--fournil-croute);
    outline-offset: 1px;
}

.section-head[data-open="true"] {
    background: #fff;
    border-color: var(--fournil-croute);
}

.section-title { font-weight: 700; }

/* Le résumé replié : lisible mais clairement secondaire */
.section-sum {
    color: var(--fournil-cendre);
    font-weight: 400;
    font-size: 15px;
    text-align: right;
}

/* Le chevron indique l'état sans dépendre d'une icône chargée */
.section-head::after {
    content: "▾";
    flex: 0 0 auto;
    color: var(--fournil-cendre);
}

.section-head[data-open="true"]::after {
    content: "▴";
    color: var(--fournil-croute);
}

.section-body {
    padding: 4px 2px 18px;
    border-bottom: 1px solid var(--trait);
}

/* Deux champs liés côte à côte : quantité + unité, durée + température */
.field-pair {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.field-pair > label {
    flex: 1 1 140px;
    min-width: 140px;
}

/* Produit ou sous-recette : deux gros boutons plutôt qu'une liste déroulante
   (CLAUDE.md §7 — pas de menu déroulant là où des boutons suffisent) */
.kind-switch {
    display: flex;
    gap: 10px;
    margin: 8px 0 4px;
}

.btn-kind {
    flex: 1 1 0;
    min-height: 56px;
    margin-top: 0;
    background: #fff;
    color: var(--fournil-four);
    border: 2px solid var(--trait);
}

.btn-kind:hover { border-color: var(--fournil-croute); }

.btn-kind[data-on="true"] {
    background: var(--fournil-croute);
    border-color: var(--fournil-croute);
    color: #fff;
}

.form-actions { margin-top: 20px; }

/* Champ de recherche : il doit se voir sans porter d'étiquette, l'intitulé
   reste dans le placeholder et pour les lecteurs d'écran. */
.recherche input {
    min-height: 56px;
    margin-top: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Intertitre de famille dans la liste des produits */
.produit-groupe h4 { margin: 18px 0 2px; }
.produit-groupe:first-of-type h4 { margin-top: 10px; }

/* Taux de marge trop mince : c'est l'information, pas une décoration */
[data-thin="true"] {
    color: var(--fournil-braise);
    font-weight: 700;
}

/* ---------- Catalogue de démarrage ----------
   Des pastilles cochables plutôt qu'une liste de cases : quarante lignes de
   cases à cocher font trois écrans, les pastilles en font un. */

.starter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.starter-group { margin-top: 4px; }

.starter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.starter-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 56px;
    padding: 8px 16px;
    border: 2px solid var(--trait);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--fournil-four);
    font-family: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.starter-item:hover:not(:disabled) { border-color: var(--fournil-croute); }

.starter-item:focus-visible {
    outline: 3px solid var(--fournil-croute);
    outline-offset: 2px;
}

/* Coché : la coche double la couleur, pour ne pas reposer sur elle seule */
.starter-item[data-on="true"] {
    background: var(--fournil-croute);
    border-color: var(--fournil-croute);
    color: #fff;
}

.starter-item[data-on="true"] .starter-nom::before {
    content: "✓ ";
    font-weight: 800;
}

.starter-item:disabled {
    opacity: 1;
    background: var(--fournil-pate);
    border-style: dashed;
    color: var(--fournil-cendre);
    cursor: default;
}

.starter-nom { font-weight: 600; }

.starter-note {
    font-size: 13px;
    opacity: 0.85;
}

.starter-item[data-on="false"] .starter-note { color: var(--fournil-cendre); }

/* ---------- Cloche d'alertes ----------
   Elle vit dans la barre sombre du haut, donc tout y est clair. Au repos la
   cloche est atténuée : une icône qui a l'air active en permanence cesse d'être
   un signal. */

.cloche {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.cloche:hover { background: rgba(244, 235, 220, 0.14); }

.cloche:focus-visible {
    outline: 3px solid var(--fournil-pate);
    outline-offset: 2px;
}

.cloche-icone {
    font-size: 22px;
    line-height: 1;
    /* Sans alerte, la cloche est en niveaux de gris et à moitié éteinte */
    filter: grayscale(1);
    opacity: 0.55;
}

.cloche[data-on="true"] .cloche-icone {
    filter: none;
    opacity: 1;
}

/* Le nombre, pas juste une pastille : « 1 » et « 12 » n'appellent pas la
   même réaction, et la couleur seule ne le dit pas (WCAG 1.4.1). */
.cloche-compte {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fournil-croute);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* Détache le compteur de la cloche quand ils se chevauchent */
    box-shadow: 0 0 0 2px var(--fournil-four);
}

.cloche[data-critique="true"] .cloche-compte {
    background: var(--fournil-braise);
}

@media (prefers-reduced-motion: no-preference) {
    .cloche[data-critique="true"] .cloche-compte {
        animation: cloche-pulse 2s ease-in-out 3;
    }
}

/* Trois battements puis le calme : une pastille qui clignote sans fin devient
   du bruit, et on finit par ne plus la voir. */
@keyframes cloche-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* Produit sans prix d'achat : à traiter, pas juste une donnée manquante */
[data-nocost="true"] {
    color: var(--fournil-braise);
    font-weight: 700;
}

@media (max-width: 720px) {
    .section-head {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Sur téléphone le résumé passe sous le titre plutôt que de le comprimer */
    .section-sum {
        flex: 1 0 100%;
        text-align: left;
    }
}