/* Livre de recettes — feuille de style unique, mobile d'abord (référence 390 px).
   Aucune étape de build : ce fichier est servi tel quel. */

:root {
    color-scheme: light dark;

    --fond: #faf8f5;
    --fond-carte: #ffffff;
    --fond-doux: #f1ede7;
    --texte: #1f1c19;
    --texte-doux: #6b635a;
    --bordure: #e2dbd2;
    --accent: #b4531f;
    --accent-texte: #ffffff;
    --ok: #2f6f3e;
    --erreur: #a32a20;

    --rayon: 12px;
    --espace: 16px;
    --cible: 44px;              /* cible tactile minimale, accessibilité AA */
    --largeur-max: 68rem;
    --hauteur-nav: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #171614;
        --fond-carte: #211f1c;
        --fond-doux: #2b2825;
        --texte: #f2eee9;
        --texte-doux: #a89e94;
        --bordure: #38342f;
        --accent: #e2843f;
        --accent-texte: #1a1512;
        --ok: #7bc48c;
        --erreur: #f08b80;
    }
}

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

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

body {
    margin: 0;
    padding: 0 0 calc(var(--hauteur-nav) + env(safe-area-inset-bottom));
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.body--centre {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--espace);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
code {
    background: var(--fond-doux);
    border-radius: 4px;
    padding: .1em .35em;
    font-size: .9em;
}

a { color: var(--accent); }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

input[type="checkbox"] { accent-color: var(--accent); }

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--espace);
    padding: 12px var(--espace);
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordure);
}

.topbar__brand {
    font-weight: 650;
    text-decoration: none;
    color: var(--texte);
}

.container {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: var(--espace);
}

.intro { color: var(--texte-doux); }

.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--espace);
    margin: 0 0 var(--espace);
}

.carte--etroite { width: min(100%, 24rem); }

/* ---------- Composants ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cible);
    padding: 0 20px;
    border: 0;
    border-radius: var(--rayon);
    background: var(--accent);
    color: var(--accent-texte);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bouton--secondaire {
    background: var(--fond-doux);
    color: var(--texte);
    border: 1px solid var(--bordure);
}

.flashes { margin: 0 0 var(--espace); }

.flash {
    margin: 0 0 8px;
    padding: 12px var(--espace);
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    background: var(--fond-doux);
}

.flash--succes { border-color: var(--ok); }
.flash--erreur { border-color: var(--erreur); }

.etat {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px var(--espace);
    margin: 0;
}

.etat dt { color: var(--texte-doux); }
.etat dd { margin: 0; overflow-wrap: anywhere; }

.est-ok { color: var(--ok); }
.est-ko { color: var(--erreur); }

.aide {
    margin: var(--espace) 0 0;
    color: var(--texte-doux);
    font-size: .92rem;
}

/* ---------- Navigation basse (mobile) ---------- */

.nav-basse {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--fond-carte);
    border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-basse__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--hauteur-nav);
    color: var(--texte-doux);
    font-size: .72rem;
    text-decoration: none;
}

.nav-basse__lien.est-actif { color: var(--accent); font-weight: 600; }
.nav-basse__icone { font-size: 1.25rem; line-height: 1; }

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
    body { padding-bottom: var(--espace); }

    .nav-basse {
        position: static;
        display: flex;
        justify-content: center;
        gap: var(--espace);
        border-top: 0;
        background: transparent;
    }

    .nav-basse__lien {
        flex-direction: row;
        min-height: var(--cible);
        font-size: .95rem;
    }
}

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

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

.formulaire {
    display: grid;
    gap: var(--espace);
}

.champ {
    display: grid;
    gap: 6px;
}

.champ > span {
    font-size: .9rem;
    color: var(--texte-doux);
}

.champ input,
.champ select,
.champ textarea {
    /* Dans une grille, un champ garde sa largeur intrinsèque (~20 caractères) et
       déborde de sa colonne : il faut le contraindre explicitement. */
    width: 100%;
    min-width: 0;
    min-height: var(--cible);
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte);
    font: inherit;
    /* 16px minimum : en dessous, iOS zoome automatiquement à la mise au point. */
    font-size: 16px;
}

.bouton--pleine-largeur { width: 100%; }

/* ---------- Barre supérieure ---------- */

.topbar__compte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0 auto;
}

.topbar__nom {
    color: var(--texte-doux);
    font-size: .9rem;
}

.lien-bouton {
    min-height: var(--cible);
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Listes et cartes de recettes ---------- */

.entete-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace);
    flex-wrap: wrap;
}

.entete-page {
    margin-bottom: 12px;
}

.entete-page h1,
.entete-page h2 { margin-bottom: 0; }

.grille-recettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--espace);
}

.carte-recette {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.carte-recette__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--fond-doux);
}

.carte-recette__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-recette__vide { font-size: 2rem; opacity: .5; }

.carte-recette__favori {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--accent);
    text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}

.carte-recette__texte { padding: 10px 12px; }
.carte-recette__texte h3 { font-size: 1rem; margin-bottom: .25em; }

.carte-recette__meta {
    margin: 0;
    color: var(--texte-doux);
    font-size: .82rem;
}

.carte-recette__meta span + span::before { content: ' · '; }

.vide { text-align: center; }

/* ---------- Fiche recette ---------- */

.recette__photo {
    width: 100%;
    max-height: 45vh;
    object-fit: cover;
    border-radius: var(--rayon);
    margin-bottom: var(--espace);
}

.meta-recette {
    color: var(--texte-doux);
    font-size: .92rem;
}

.meta-recette span + span::before { content: ' · '; }

.puces { display: flex; flex-wrap: wrap; gap: 6px; }

.puce {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fond-doux);
    font-size: .82rem;
}

.portions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--texte-doux);
}

.portions input {
    width: 4.5rem;
    min-height: var(--cible);
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
}

.groupe {
    margin: var(--espace) 0 .4em;
    font-size: .95rem;
    color: var(--texte-doux);
}

.liste-ingredients {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-ingredients li { border-bottom: 1px solid var(--bordure); }
.liste-ingredients li:last-child { border-bottom: 0; }

.liste-ingredients label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: var(--cible);
    padding: 8px 0;
    cursor: pointer;
}

.liste-ingredients .coche {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.liste-ingredients .est-coche span[data-ligne] {
    text-decoration: line-through;
    opacity: .55;
}

.est-facultatif { opacity: .8; }

.note {
    color: var(--texte-doux);
    font-size: .85rem;
}

.liste-etapes { padding-left: 1.4em; }
.liste-etapes li { margin-bottom: .8em; }

.etoile {
    min-width: var(--cible);
    min-height: var(--cible);
    border: 0;
    background: none;
    color: var(--bordure);
    font-size: 1.6rem;
    cursor: pointer;
}

.etoile.est-actif { color: var(--accent); }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--espace) 0;
}

.bouton--danger {
    background: transparent;
    color: var(--erreur);
    border: 1px solid var(--erreur);
}

/* ---------- Formulaire de recette ---------- */

.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--espace);
}

.grille-champs > .champ { min-width: 0; }

.bloc {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--espace);
    margin: 0;
    display: grid;
    gap: 12px;
}

.bloc legend {
    padding: 0 6px;
    font-weight: 650;
}

.lignes { display: grid; gap: 8px; }

.ligne {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    grid-template-areas:
        "principal principal principal principal principal"
        "groupe    case      monter    descendre supprimer";
    gap: 6px;
    align-items: center;
}

.ligne__principal {
    grid-area: principal;
    min-height: var(--cible);
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
    width: 100%;
}

.ligne__groupe {
    grid-area: groupe;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: 16px;
    min-width: 0;
}

.ligne > .ligne__case { grid-area: case; }

.ligne__case {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    color: var(--texte-doux);
}

.ligne__action {
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-doux);
    color: var(--texte);
    font: inherit;
    cursor: pointer;
}

.ligne__action[data-monter]     { grid-area: monter; }
.ligne__action[data-descendre]  { grid-area: descendre; }
.ligne__action[data-supprimer]  { grid-area: supprimer; }

.apercu {
    max-width: 200px;
    border-radius: var(--rayon);
}

@media (min-width: 768px) {
    .ligne {
        grid-template-columns: 1fr 10rem auto auto auto auto;
        grid-template-areas: "principal groupe case monter descendre supprimer";
    }
}

/* ---------- Recherche et filtres ---------- */

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.recherche {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: var(--espace);
}

.recherche__champ { display: block; }

.recherche__champ input {
    width: 100%;
    min-height: var(--cible);
    padding: 10px 14px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
}

.filtres {
    grid-column: 1 / -1;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
}

.filtres > summary {
    min-height: var(--cible);
    display: flex;
    align-items: center;
    padding: 0 var(--espace);
    cursor: pointer;
    font-weight: 600;
}

.filtres__corps {
    display: grid;
    gap: 12px;
    padding: 0 var(--espace) var(--espace);
}

.filtres__corps .champ select,
.filtres__corps .champ input {
    min-height: var(--cible);
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
}

.puces--cochables {
    border: 0;
    padding: 0;
    margin: 0;
}

.puce--cochable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    cursor: pointer;
}

.puce--cochable:has(input:checked) {
    background: var(--accent);
    color: var(--accent-texte);
}

.puce--cochable input { accent-color: var(--accent); }

.puces--actifs { margin-bottom: var(--espace); }

.puce--retirable {
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--bordure);
}

/* ---------- Planificateur ---------- */

.nav-semaine {
    display: flex;
    gap: 6px;
}

.planning {
    display: grid;
    gap: var(--espace);
}

.jour {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    overflow: hidden;
}

.jour.est-aujourdhui { border-color: var(--accent); }

.jour__titre {
    margin: 0;
    padding: 10px var(--espace);
    background: var(--fond-doux);
    font-size: .95rem;
}

.jour.est-aujourdhui .jour__titre {
    color: var(--accent);
    font-weight: 700;
}

.creneau {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px var(--espace);
    border-top: 1px solid var(--bordure);
    min-height: 56px;
}

.creneau:first-of-type { border-top: 0; }

.creneau__libelle {
    color: var(--texte-doux);
    font-size: .85rem;
}

.creneau__vide {
    width: 100%;
    min-height: var(--cible);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
}

.creneau__vide:hover { border-color: var(--accent); color: var(--accent); }

.repas {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--cible);
    padding: 4px 6px 4px 12px;
    border-radius: var(--rayon);
    background: var(--fond-doux);
    cursor: grab;
}

.repas__titre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texte);
    font-weight: 600;
    text-decoration: none;
}

.repas__titre--libre {
    font-weight: 400;
    font-style: italic;
    color: var(--texte-doux);
}

.repas__portions {
    flex: 0 0 auto;
    color: var(--texte-doux);
    font-size: .8rem;
}

.repas__action {
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: var(--rayon);
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    cursor: pointer;
}

.repas__action:hover { background: var(--fond-carte); color: var(--texte); }

/* Feuille de choix : plein écran sur téléphone, boîte centrée sur grand écran. */
.feuille {
    width: min(100%, 32rem);
    max-height: 85dvh;
    margin: auto;
    padding: var(--espace);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte);
    overflow: auto;
}

.feuille::backdrop { background: rgb(0 0 0 / .5); }

.feuille__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace);
    margin-bottom: var(--espace);
}

.feuille__resultats {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    max-height: 40dvh;
    overflow: auto;
}

.feuille__choix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: var(--cible);
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--bordure);
    background: transparent;
    color: var(--texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.feuille__choix:hover { background: var(--fond-doux); }

.feuille__recemment {
    color: var(--accent);
    font-size: .78rem;
}

.feuille__vide {
    padding: 12px;
    color: var(--texte-doux);
}

.champ--petit { max-width: 6rem; }

@media (min-width: 768px) {
    .planning {
        grid-template-columns: repeat(7, 1fr);
        align-items: start;
    }

    .creneau {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-height: 92px;
    }

    .creneau__libelle { font-size: .78rem; }

    .repas {
        flex-wrap: wrap;
        padding: 8px;
    }

    .repas__titre { white-space: normal; flex-basis: 100%; }
}

/* ---------- Aperçu de la semaine sur l'accueil ---------- */

.apercu-semaine {
    list-style: none;
    margin: 0;
    padding: 0;
}

.apercu-semaine li {
    padding: 8px 0;
    border-bottom: 1px solid var(--bordure);
}

.apercu-semaine li:last-child { border-bottom: 0; }

.apercu-semaine__repas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .92rem;
    color: var(--texte-doux);
}

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

.generation {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.courses__barre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--espace);
}

.courses__barre progress {
    flex: 1 1 auto;
    height: 10px;
    accent-color: var(--accent);
}

.rayon { margin-bottom: var(--espace); }

.rayon__titre {
    position: sticky;
    top: 56px;
    z-index: 5;
    margin: 0 0 4px;
    padding: 6px 0;
    background: var(--fond);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-doux);
}

.rayon--coches { opacity: .65; }

.liste-courses {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    overflow: hidden;
}

.article {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
    border-bottom: 1px solid var(--bordure);
}

.article:last-child { border-bottom: 0; }

.article__label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    /* Cible tactile large : on coche avec des mains pleines, en marchant. */
    min-height: 52px;
    padding: 8px 12px;
    cursor: pointer;
}

.article .coche {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.article__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.article__nom { font-weight: 600; }

.article__quantite {
    color: var(--texte-doux);
    font-size: .9rem;
}

.article__detail {
    color: var(--texte-doux);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article.est-coche .article__nom {
    text-decoration: line-through;
    opacity: .6;
}

.ajout-manuel__champs {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.ajout-manuel__champs input {
    min-height: var(--cible);
    padding: 8px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
    min-width: 0;
}

.ajout-manuel__champs input[name="libelle"] { grid-column: 1 / -1; }

/* Mode magasin : grande typographie, détails effacés, moins de bruit. */
.mode-magasin .article__label {
    min-height: 64px;
    font-size: 1.2rem;
}

.mode-magasin .article .coche {
    width: 30px;
    height: 30px;
}

.mode-magasin .article__detail,
.mode-magasin .generation,
.mode-magasin .ajout-manuel,
.mode-magasin .topbar,
.mode-magasin .intro { display: none; }

.mode-magasin .rayon__titre { top: 0; font-size: 1rem; }

/* ---------- Import IA ---------- */

.flash--attention {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--fond-carte));
}

.champ.est-incertain input,
.champ.est-incertain select {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--fond-carte));
}

.champ.est-incertain > span::after {
    content: ' · à vérifier';
    color: var(--accent);
    font-size: .8em;
}

.apercus {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--espace);
}

/* ---------- Catalogue d'ingrédients ---------- */

.catalogue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.catalogue__ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-carte);
}

.catalogue__nom {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.catalogue__nom strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalogue__champ select,
.catalogue__champ input {
    width: 100%;
    min-height: var(--cible);
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    font-size: 16px;
}

@media (min-width: 768px) {
    .catalogue__ligne {
        grid-template-columns: 2fr 1.4fr 1fr auto auto;
    }

    .catalogue__nom { grid-column: auto; flex-direction: column; gap: 0; }
}

/* ---------- Accessibilité ---------- */

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 16px;
    background: var(--accent);
    color: var(--accent-texte);
    border-radius: 0 0 var(--rayon) 0;
}

.lien-evitement:focus {
    left: 0;
}