/* ==========================================================================
   Monketo v2 — feuille de style commune
   Palette reprise du logo ; polices auto-hébergées (pas d'appel à Google).
   ========================================================================== */

@font-face { font-family: 'Arimo'; src: url('fonts/arimo-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/arimo-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Didact Gothic'; src: url('fonts/didact-gothic-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
    --vert: #1e3f2c;
    --vert-clair: #e3f1dc;
    --vert-texte: #1b4d1f;
    --olive: #5f7a1c;          /* olive assombri : texte blanc lisible */
    --olive-logo: #7a9a2e;
    --orange: #c24d14;         /* orange assombri pour les boutons */
    --orange-logo: #ee6f30;
    --orange-clair: #fde6d6;
    --orange-texte: #86330c;
    --creme: #fdf3d6;
    --creme-texte: #6b4e0a;
    --beige: #efece3;
    --bordure: #e4e1d8;
    --bordure-forte: #bdb8a8;
    --texte: #26241f;
    --texte-doux: #4d4b45;
    --rouge: #b3261e;
    --titre: 'Arimo', 'Helvetica Neue', Arial, sans-serif;
    --corps: 'Didact Gothic', 'Century Gothic', system-ui, sans-serif;
    --rayon: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--corps); color: var(--texte); background: #fff; line-height: 1.5; overflow-x: hidden; }
a { color: var(--vert); }
a:hover { color: var(--orange); }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.petit { font-size: 13px; color: var(--texte-doux); }
.c-vert { color: var(--vert); } .c-olive { color: var(--olive-logo); } .c-orange { color: var(--orange-logo); } .c-olive-fonce { color: var(--olive); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--orange-logo); outline-offset: 2px; }

/* --- Ruban version ------------------------------------------------------ */
.ruban-coin { position: absolute; top: 0; right: 0; width: 140px; height: 140px; overflow: hidden; z-index: 30; pointer-events: none; }
.ruban-version { position: absolute; top: 26px; right: -46px; width: 190px; transform: rotate(45deg); background: var(--orange-logo); color: #fff; text-align: center; font: 700 12px var(--titre); padding: 5px 0; z-index: 30; }

/* --- En-tête ------------------------------------------------------------ */
.entete { max-width: 1280px; margin: 0 auto; min-height: 150px; padding: 12px 120px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { width: 104px; height: auto; }
.logo-texte { display: flex; flex-direction: column; gap: 2px; }
.logo-nom { font: 700 58px/1 var(--titre); letter-spacing: -1px; }
.logo-devise { font: 700 11px var(--titre); letter-spacing: .3px; color: var(--vert); }
.whatsapp { display: flex; align-items: center; gap: 16px; }
.whatsapp-texte { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; color: var(--texte-doux); }
.bouton-whatsapp { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #e8f3e4; color: var(--vert); text-decoration: none; font: 700 15px var(--titre); }
.whatsapp .qr { width: 76px; height: 76px; border-radius: 6px; }

/* --- Bande photo + carte ------------------------------------------------ */
.bande-photo { position: relative; padding-bottom: 64px; }
.bande-photo-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bande-photo-contenu { position: relative; max-width: 1280px; margin: 0 auto; padding: 20px 120px 0; display: flex; flex-direction: column; gap: 16px; }
.legende-fond { position: absolute; right: 120px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 14px; max-width: calc(100% - 32px); }
.legende-fond a { font-family: var(--titre); font-weight: 700; text-decoration: none; }
.carte { background: rgba(255,255,255,.96); border-left: 5px solid var(--vert); border-radius: 8px; padding: 32px 36px; display: flex; flex-direction: column; gap: 22px; }
.carte-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.carte-titre h1 { margin: 0; font: 700 52px/1 var(--titre); color: var(--vert); }
.sous-titre { margin: 6px 0 0; font-size: 17px; color: var(--texte-doux); }
h2 { font: 700 28px/1.2 var(--titre); color: var(--vert); margin: 0; }
h3 { font: 700 18px var(--titre); color: var(--vert); margin: 0; }

/* --- Navigation --------------------------------------------------------- */
.navigation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-espace { flex-grow: 1; }
.pilule { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--vert); color: #fff; text-decoration: none; font: 700 15px var(--titre); white-space: nowrap; }
.pilule:hover { color: #fff; filter: brightness(1.12); }
.pilule-olive { background: var(--olive); }
.pilule-verte { background: var(--vert); }
.pilule-orange { background: var(--orange); }
.pilule-blanche { background: #fff; color: var(--vert); }
.pilule-blanche:hover { color: var(--vert); }
.pilule.actif { background: var(--vert); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.menu-compte { position: relative; }
.menu-compte summary { list-style: none; cursor: pointer; }
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte-liste { position: absolute; right: 0; top: 52px; z-index: 20; min-width: 240px; background: #fff; border-radius: var(--rayon); box-shadow: 0 16px 40px rgba(30,63,44,.25); padding: 10px; display: flex; flex-direction: column; }
.menu-compte-liste a { padding: 10px 12px; border-radius: 8px; text-decoration: none; font-family: var(--titre); font-weight: 700; }
.menu-compte-liste a:hover { background: var(--beige); }
.menu-compte-liste .petit { padding: 6px 12px; }

/* --- Boutons ------------------------------------------------------------ */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--vert); background: #fff; color: var(--vert); text-decoration: none; font: 700 15px var(--titre); white-space: nowrap; }
.bouton:hover { color: var(--vert); background: var(--beige); }
.bouton-plein { background: var(--vert); color: #fff; }
.bouton-plein:hover { background: #16301f; color: #fff; }
.bouton-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.bouton-orange:hover { background: #a8410f; color: #fff; }
.bouton-lien { border: 0; background: none; padding: 0; min-height: 0; color: var(--vert); text-decoration: underline; font: 700 14px var(--titre); }
.bouton-rond { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--bordure); background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bouton-rond[aria-pressed="true"].pouce-vert { background: var(--vert-clair); border-color: #2e7d32; }
.bouton-rond[aria-pressed="true"].pouce-orange { background: var(--orange-clair); border-color: var(--orange); }
.bouton[disabled], .bouton-orange[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Barre à flèches (croquis de Didier) -------------------------------- */
.barre-fleches { display: flex; min-height: 60px; border: 2px solid var(--vert); border-radius: 12px; overflow: hidden; background: #fff; }
.barre-fleches > button { border: 0; border-left: 1px solid #cfcabb; background: #fff; color: var(--vert); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--titre); padding: 6px 8px; flex: 1 1 0; min-width: 0; }
.barre-fleches > button:first-child { border-left: 0; }
.barre-fleches > .fleche { flex: 0 0 60px; background: var(--beige); }
.barre-fleches > .fleche:disabled { opacity: .35; cursor: default; }
.barre-fleches > button[aria-pressed="true"], .barre-fleches > button[aria-selected="true"] { background: var(--vert); color: #fff; }
.barre-fleches .libelle { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.barre-fleches .detail { font-size: 13px; }

/* --- Indicateurs (objectifs) ------------------------------------------- */
.indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.indicateur { background: #fff; border: 1px solid var(--bordure); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.indicateur .nom { font-size: 14px; color: var(--texte-doux); }
.indicateur .valeur { font: 15px var(--titre); color: #6b6a63; }
.indicateur .valeur strong { font-size: 24px; color: var(--vert); }
.jauge { height: 6px; border-radius: 3px; background: var(--beige); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 3px; background: var(--vert); }

/* --- Cartes repas ------------------------------------------------------- */
.grille-repas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.repas { position: relative; background: #fff; border: 1px solid var(--bordure); border-radius: 12px; display: flex; flex-direction: column; }
.repas.inactif { opacity: .55; }
.repas-photo { position: relative; height: 200px; }
.repas-photo img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 11px 11px 0 0; }
.etiquette { position: absolute; top: 12px; padding: 6px 12px; border-radius: 999px; font: 700 13px var(--titre); }
.etiquette-type { left: 12px; background: var(--vert); color: #fff; }
.etiquette-vote { right: 12px; }
.vote-pour { background: var(--vert-clair); color: var(--vert-texte); }
.vote-contre { background: var(--orange-clair); color: var(--orange-texte); }
.repas-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.repas-titre { font: 700 19px/1.25 var(--titre); color: var(--vert); text-decoration: none; }
.repas-kcal { font: 700 15px var(--titre); }
.repas-actions { position: relative; display: flex; align-items: center; gap: 8px; margin-top: auto; }
.repas-actions .espace { flex-grow: 1; }
.case-menu { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.case-menu input { width: 18px; height: 18px; accent-color: var(--vert); }

.menu-changer { position: absolute; right: 0; top: 52px; width: 440px; max-width: 86vw; z-index: 15; background: #fff; border: 1px solid #cfcabb; border-radius: 12px; box-shadow: 0 16px 40px rgba(30,63,44,.25); padding: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow: auto; }
.menu-changer .intertitre { font: 700 13px var(--titre); color: var(--texte-doux); text-transform: uppercase; letter-spacing: .5px; padding: 6px; }
.menu-changer .intertitre + .intertitre { display: none; }
.option-plat { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 8px; padding: 6px; background: #fff; text-align: left; }
.option-plat:hover { outline: 2px solid var(--vert); }
.option-plat img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.option-plat .texte { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.option-plat .t { font: 700 15px var(--titre); }
.option-plat .i { font-size: 13px; }
.option-plat.pour { background: var(--vert-clair); color: var(--vert-texte); }
.option-plat.contre { background: var(--orange-clair); color: var(--orange-texte); }
.menu-changer .chargement { padding: 14px; color: var(--texte-doux); }

.total-jour { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--bordure); padding-top: 14px; flex-wrap: wrap; }
.total-jour strong { font-family: var(--titre); color: var(--vert); }

/* --- Section crème ------------------------------------------------------ */
.section-creme { background: var(--creme); }
.section-creme-contenu { max-width: 1280px; margin: 0 auto; padding: 48px 120px; display: flex; flex-direction: column; gap: 24px; }
.apercu-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.apercu-jour { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 8px; border-radius: 10px; background: transparent; text-align: left; color: var(--texte); }
.apercu-jour[aria-pressed="true"] { background: #fff; }
.apercu-jour .nom { font: 700 15px var(--titre); color: var(--vert); }
.apercu-jour img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; display: block; }
.apercu-jour img.inactif { opacity: .35; }

/* --- Pied de page ------------------------------------------------------- */
.pied { position: relative; background: var(--vert); color: #a8c85a; text-align: center; padding: 44px 16px 28px; font: 700 15px/1.7 var(--titre); }
.pied a { color: #a8c85a; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied p { margin: 0; }
.pied-copyright { font-size: 14px; margin-top: 10px !important; }
.pied-copyright a { text-decoration: underline; }
.pied-feuille { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 80px; height: 52px; border-radius: 40px 4px 40px 4px; background: var(--vert); display: flex; align-items: center; justify-content: center; }

/* --- Formulaires -------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label, .etiquette-champ { font: 700 15px var(--titre); }
.saisie { display: flex; align-items: center; min-height: 48px; border: 1.5px solid var(--bordure-forte); border-radius: 10px; background: #fff; padding: 0 14px; gap: 8px; }
.saisie:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(30,63,44,.15); }
.saisie input, .saisie select { border: 0; outline: none; width: 100%; background: transparent; font: 17px var(--titre); color: var(--texte); min-height: 44px; }
.saisie .unite { font-size: 14px; color: #6b6a63; white-space: nowrap; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=number], textarea, select { font: 16px var(--corps); color: var(--texte); }
.champ-texte { min-height: 46px; border: 1.5px solid var(--bordure-forte); border-radius: 10px; padding: 0 12px; background: #fff; width: 100%; }
textarea.champ-texte { padding: 10px 12px; resize: vertical; }
[aria-invalid="true"], .saisie:has([aria-invalid="true"]) { border-color: var(--rouge) !important; box-shadow: 0 0 0 3px rgba(179,38,30,.15); }
.grille-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.grille-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--vert); background: #fff; color: var(--vert); font: 700 15px var(--titre); cursor: pointer; }
.choix input:checked + label { background: var(--vert); color: #fff; }
.choix input:focus-visible + label { outline: 3px solid var(--orange-logo); outline-offset: 2px; }
.choix-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.choix-cartes label { flex-direction: column; align-items: flex-start; border-radius: 12px; padding: 12px; border: 2px solid var(--bordure); gap: 4px; min-height: 0; }
.choix-cartes label small { font: 13px var(--corps); color: var(--texte-doux); }
.choix-cartes input:checked + label { background: var(--vert-clair); color: var(--vert); border-color: var(--vert); }
.interrupteur { display: inline-flex; align-items: center; gap: 12px; font: 700 16px var(--titre); color: var(--vert); cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; }
.interrupteur .rail { width: 52px; height: 30px; border-radius: 999px; background: var(--bordure-forte); padding: 3px; display: flex; transition: background .15s; }
.interrupteur .rail::after { content: ''; width: 24px; height: 24px; border-radius: 999px; background: #fff; transition: transform .15s; }
.interrupteur input:checked + .rail { background: var(--vert); }
.interrupteur input:checked + .rail::after { transform: translateX(22px); }
.interrupteur input:focus-visible + .rail { outline: 3px solid var(--orange-logo); outline-offset: 2px; }
.encadre { padding: 16px 18px; border-radius: 12px; }
.encadre-creme { background: var(--creme); }
.encadre-orange { background: var(--orange-clair); color: #5c2408; }
.encadre-vert { background: var(--vert-clair); color: var(--vert-texte); }
.encadre-blanc { background: #fff; border: 1px solid var(--bordure); }
.message-erreur { padding: 14px 16px; border-radius: 10px; background: var(--orange-clair); color: #5c2408; font-family: var(--titre); font-weight: 700; }

/* --- Étiquettes d'ingrédients (chips) ----------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 6px 0 14px; border-radius: 999px; font: 700 14px var(--titre); background: var(--beige); }
.chip button { width: 26px; height: 26px; border: 0; border-radius: 999px; background: rgba(255,255,255,.7); color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.chip.auto { padding-right: 14px; font-weight: 400; }
.chips-evite .chip { background: var(--orange-clair); color: var(--orange-texte); }
.chips-prefere .chip { background: var(--vert-clair); color: var(--vert-texte); }
.chips-garde .chip { background: var(--creme); color: var(--creme-texte); }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suggestions button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px dashed #8f8a78; background: #fff; color: var(--texte); font-size: 13px; }
.groupe-ingredients { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: #fff; }
.ligne-ajout { display: flex; gap: 8px; }
.ligne-ajout input { flex-grow: 1; }

/* --- Profil ------------------------------------------------------------- */
.profil-grille { display: flex; gap: 28px; align-items: flex-start; }
.profil-etapes { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.etape { display: flex; flex-direction: column; gap: 20px; }
.etape-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.etape-entete p { margin: 6px 0 0; color: var(--texte-doux); font-size: 15px; }
.navigation-etapes { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--bordure); padding-top: 18px; }
.cartes-repas-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartes-repas-choix input { position: absolute; opacity: 0; }
.cartes-repas-choix label { position: relative; display: flex; flex-direction: column; border: 3px solid var(--bordure); border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; }
.cartes-repas-choix img { width: 100%; height: 150px; object-fit: cover; display: block; opacity: .45; }
.cartes-repas-choix .coche { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 999px; background: var(--bordure-forte); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.cartes-repas-choix .texte { padding: 12px 14px; display: flex; flex-direction: column; }
.cartes-repas-choix .texte strong { font: 700 18px var(--titre); color: var(--vert); }
.cartes-repas-choix input:checked + label { border-color: var(--vert); }
.cartes-repas-choix input:checked + label img { opacity: 1; }
.cartes-repas-choix input:checked + label .coche { background: var(--vert); }
.cartes-repas-choix input:focus-visible + label { outline: 3px solid var(--orange-logo); outline-offset: 2px; }
.resume { width: 320px; flex-shrink: 0; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 14px; background: var(--vert); color: #fff; }
.resume .rubrique { font: 700 12px var(--titre); text-transform: uppercase; letter-spacing: .6px; color: #cfe3a0; }
.resume .objectif { font: 700 44px/1 var(--titre); }
.resume .objectif small { font-size: 18px; }
.resume .detail { font-size: 14px; line-height: 1.5; color: #e7efd9; }
.resume hr { border: 0; height: 1px; background: rgba(255,255,255,.2); margin: 0; width: 100%; }
.resume dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.resume dt { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #cfe3a0; }
.resume dd { margin: 0; font: 700 15px var(--titre); }
.etat-enregistrement { display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.12); font-size: 14px; line-height: 1.4; }
.etat-enregistrement::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: #a8c85a; margin-top: 5px; flex-shrink: 0; }
.etat-enregistrement[data-type="modifie"], .etat-enregistrement[data-type="attente"] { background: var(--orange-clair); color: #5c2408; }
.etat-enregistrement[data-type="modifie"]::before, .etat-enregistrement[data-type="attente"]::before { background: var(--orange); }
.etat-enregistrement[data-type="ok"] { background: var(--vert-clair); color: var(--vert-texte); }
.etat-enregistrement[data-type="ok"]::before { background: #2e7d32; }
.etat-enregistrement[data-type="erreur"] { background: #fbe0de; color: #7a1a14; }
.etat-enregistrement[data-type="erreur"]::before { background: var(--rouge); }
.resume .bouton-orange { border-color: #fff; min-height: 54px; font-size: 16px; }
.resume .note { font-size: 12px; color: #cfe3a0; line-height: 1.4; }
.groupes-sante { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.groupe-sante { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: #fff; }
.carte-famille { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; background: var(--creme); flex-wrap: wrap; }
.carte-famille .texte { flex-grow: 1; min-width: 200px; }

/* --- Liste de courses --------------------------------------------------- */
.ligne-reglages { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.compteur { display: inline-flex; align-items: center; border: 2px solid var(--vert); border-radius: 999px; overflow: hidden; }
.compteur button { width: 44px; height: 42px; border: 0; background: var(--beige); color: var(--vert); font: 700 22px var(--titre); }
.compteur output { min-width: 120px; text-align: center; font: 700 16px var(--titre); color: var(--vert); }
.progression { display: flex; flex-direction: column; gap: 6px; width: 300px; max-width: 100%; }
.progression .jauge { height: 8px; }
.progression .jauge > span { background: var(--olive); }
.grille-selection { display: grid; grid-template-columns: 130px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.grille-selection .jour { text-align: center; font: 700 14px var(--titre); color: var(--vert); }
.grille-selection .type { font: 700 14px var(--titre); color: var(--vert); }
.grille-selection input { position: absolute; opacity: 0; }
.grille-selection label { height: 38px; border-radius: 8px; border: 2px solid var(--bordure-forte); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.grille-selection input:checked + label { background: var(--vert); border-color: var(--vert); }
.grille-selection input:checked + label::after { content: '✓'; color: #fff; font-weight: 700; }
.grille-selection input:focus-visible + label { outline: 3px solid var(--orange-logo); outline-offset: 2px; }
.grille-selection .vide { height: 38px; border-radius: 8px; background: var(--beige); opacity: .5; }
.bandeau-cout { display: flex; align-items: center; gap: 24px; padding: 18px 20px; border-radius: 12px; background: var(--vert-clair); color: var(--vert-texte); flex-wrap: wrap; }
.bandeau-cout.depasse { background: var(--orange-clair); color: #5c2408; }
.bandeau-cout .montant { font: 700 32px var(--titre); }
.bandeau-cout .jauge { height: 10px; background: rgba(255,255,255,.8); }
.bandeau-cout .jauge > span { background: #2e7d32; }
.bandeau-cout.depasse .jauge > span { background: var(--orange); }
.courses-grille { display: flex; gap: 28px; align-items: flex-start; }
.courses-liste { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.rayon { background: #fff; border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; }
.rayon-entete { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.rayon-entete .numero { width: 26px; height: 26px; border-radius: 999px; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px var(--titre); }
.rayon-entete h3 { flex-grow: 1; font-size: 17px; color: inherit; }
.rayon-entete .petit { color: inherit; }
.rayon-1 .rayon-entete { background: var(--vert-clair); color: var(--vert-texte); } .rayon-1 .numero { background: var(--vert-texte); }
.rayon-2 .rayon-entete { background: var(--creme); color: var(--creme-texte); } .rayon-2 .numero { background: var(--creme-texte); }
.rayon-3 .rayon-entete { background: var(--orange-clair); color: var(--orange-texte); } .rayon-3 .numero { background: var(--orange-texte); }
.rayon-4 .rayon-entete { background: var(--beige); color: #3d3a31; } .rayon-4 .numero { background: #3d3a31; }
.rayon-5 .rayon-entete { background: #e8eef6; color: #23466e; } .rayon-5 .numero { background: #23466e; }
.article { border-top: 1px solid #f0ede4; }
.article-ligne { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; min-height: 52px; }
.coche-article { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.coche-article::before { content: ''; width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--vert); }
.article-nom { flex-grow: 1; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 0; text-align: left; font-size: 16px; color: var(--texte); }
.article-nom .nb { font: 700 12px var(--titre); color: var(--olive); }
.article-qte { font: 700 15px var(--titre); color: var(--vert); white-space: nowrap; }
.article-prix { width: 70px; text-align: right; font-size: 13px; color: #6b6a63; white-space: nowrap; }
.lien-drive { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--beige); color: var(--vert); text-decoration: none; font: 700 12px var(--titre); white-space: nowrap; }
.article-origine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 14px 62px; }
.article-origine a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--vert-clair); color: var(--vert-texte); text-decoration: none; font-size: 13px; }
.bouton-retirer { width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--beige); color: var(--vert); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ajout-article { border: 2px dashed var(--bordure-forte); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.courses-cote { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.encart-drive { border-radius: 12px; background: var(--vert); color: #fff; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.encart-drive p { margin: 0; font-size: 14px; color: #e7efd9; line-height: 1.4; }
.encart-drive .choix-drive input { position: absolute; opacity: 0; }
.encart-drive .choix-drive label { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 2px solid rgba(255,255,255,.4); color: #fff; font: 700 15px var(--titre); cursor: pointer; margin-bottom: 8px; }
.encart-drive .choix-drive label small { font: 12px var(--corps); }
.encart-drive .choix-drive input:checked + label { background: #fff; color: var(--vert); border-color: #fff; }
.encart-drive .choix-drive input:focus-visible + label { outline: 3px solid var(--orange-logo); }
.encart-drive a { color: #cfe3a0; font-size: 13px; }
.encart-drive .champ-texte { min-height: 40px; }
.encart-local { border-radius: 12px; background: var(--creme); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.segmente { display: flex; padding: 3px; border-radius: 999px; background: #fff; }
.segmente input { position: absolute; opacity: 0; }
.segmente label { flex: 1; text-align: center; min-height: 36px; line-height: 36px; border-radius: 999px; font: 700 13px var(--titre); color: var(--vert); cursor: pointer; }
.segmente input:checked + label { background: var(--vert); color: #fff; }
.vendeur { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #fff; }
.vendeur .haut { display: flex; justify-content: space-between; gap: 8px; }
.vendeur .haut strong { font: 700 15px var(--titre); color: var(--vert); }
.type-vendeur { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--titre); background: var(--orange-clair); color: var(--orange-texte); }
.type-vendeur.producteur { background: var(--vert-clair); color: var(--vert-texte); }
.panier { border: 1px solid var(--bordure); border-radius: 12px; background: #f7f5ef; }
.panier > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 0; background: transparent; font: 700 17px var(--titre); color: var(--vert); }
.panier .chips { padding: 0 18px 16px; }
.panier .chip { background: #fff; border: 1px solid #cfcabb; color: #6b6a63; text-decoration: line-through; padding: 0 14px; cursor: pointer; }

/* --- Aide --------------------------------------------------------------- */
.aide-article { display: flex; flex-direction: column; gap: 16px; min-height: 480px; }
.aide-article .surtitre { font: 700 14px var(--titre); color: var(--olive); text-transform: uppercase; letter-spacing: .6px; }
.aide-article h1 { margin: 0; font: 700 48px/1.05 var(--titre); color: var(--vert); }
.aide-texte { font-size: 17px; line-height: 1.65; max-width: 920px; }
.aide-texte p { margin: 0 0 14px; }
.section-olive { background: var(--olive); color: #fff; }
.section-olive-contenu { max-width: 1280px; margin: 0 auto; padding: 48px 120px 64px; display: flex; flex-direction: column; gap: 20px; }
.section-olive h2 { color: #fff; font-size: 30px; }
.sommaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0; padding: 0; list-style: none; }
.sommaire a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 8px; color: #fff; text-decoration: none; font: 700 17px var(--titre); }
.sommaire a .n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; background: #fff; color: var(--vert); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sommaire a[aria-current="true"] { background: #fff; color: var(--vert); }
.sommaire a[aria-current="true"] .n { background: var(--vert); color: #fff; }
.sommaire a:hover { background: rgba(255,255,255,.15); color: #fff; }
.section-olive .sources { font-size: 14px; line-height: 1.6; color: #f3f6ea; max-width: 1000px; margin: 8px 0 0; }

/* --- Adaptation petits écrans (la vraie version mobile viendra ensuite) -- */
@media (max-width: 1100px) {
    .entete, .bande-photo-contenu, .section-creme-contenu, .section-olive-contenu { padding-left: 24px; padding-right: 24px; }
    .legende-fond { right: 24px; }
    .profil-grille, .courses-grille { flex-direction: column; }
    .resume, .courses-cote { width: 100%; position: static; }
}
@media (max-width: 760px) {
    .entete { flex-direction: column; align-items: flex-start; min-height: 0; }
    .logo-nom { font-size: 40px; } .logo img { width: 64px; }
    .whatsapp-texte { align-items: flex-start; } .whatsapp .qr { display: none; }
    .entete, .bande-photo-contenu, .section-creme-contenu, .section-olive-contenu { padding-left: 12px; padding-right: 12px; }
    .carte { padding: 20px 14px; }
    .carte-titre h1, .aide-article h1 { font-size: 34px; }
    .grille-repas, .cartes-repas-choix, .indicateurs, .grille-champs, .grille-champs-2, .groupes-sante, .choix-cartes, .sommaire { grid-template-columns: minmax(0, 1fr); }
    .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apercu-semaine { grid-template-columns: repeat(7, 110px); overflow-x: auto; }
    .barre-fleches > .fleche { flex-basis: 44px; }
    .barre-fleches > button.masque-mobile { display: none; }
    .legende-fond { position: static; margin: 12px 12px 0; }
    .grille-selection { grid-template-columns: 90px repeat(7, minmax(30px, 1fr)); font-size: 12px; }
    .article-prix { display: none; }
    .menu-changer { position: static; width: 100%; max-width: none; margin-top: 8px; }
}

/* --- Impression de la liste de courses ---------------------------------- */
@media print {
    .entete, .navigation, .bande-photo-image, .legende-fond, .pied, .ruban-version, .courses-cote, .no-print, .lien-drive, .coche-article, .article-prix, .ajout-article, .panier { display: none !important; }
    .bande-photo { padding: 0; }
    .bande-photo-contenu { padding: 0; }
    .carte { border: 0; padding: 0; }
    .rayon { break-inside: avoid; }
}

/* Liens lisibles sur fonds colorés */
.section-olive a { color: #fff; }
.section-olive a:hover { color: var(--creme); }
.resume a { color: #cfe3a0; }
@media (max-width: 760px) { .ruban-coin { display: none; } }

/* --- Fiche recette ------------------------------------------------------ */
.fiche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.fiche-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; }
.fiche-entete { display: flex; flex-direction: column; gap: 16px; }
.fiche-entete h1 { margin: 0; font: 700 44px/1.1 var(--titre); color: var(--vert); }
.votes-fiche { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.votes-fiche strong { font: 700 18px var(--titre); min-width: 18px; }
.votes-fiche .petit { flex-basis: 100%; }
.bouton-rond:disabled { opacity: .5; cursor: default; }
.indicateurs-fiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiche-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.liste-ingredients { list-style: none; margin: 0; padding: 0; }
.liste-ingredients li { border-top: 1px solid #f0ede4; }
.liste-ingredients input { position: absolute; opacity: 0; }
.liste-ingredients label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; cursor: pointer; }
.liste-ingredients label::before { content: ''; width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--vert); }
.liste-ingredients label > span:first-child { flex-grow: 1; }
.liste-ingredients .quantite { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.liste-ingredients input:checked + label { color: #8f8a78; text-decoration: line-through; }
.liste-ingredients input:checked + label::before { background: var(--vert); box-shadow: inset 0 0 0 3px #fff; }
.liste-ingredients input:focus-visible + label { outline: 3px solid var(--orange-logo); }
.etapes-recette { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 14px; }
.etapes-recette li { counter-increment: etape; display: flex; gap: 14px; font-size: 17px; line-height: 1.6; }
.etapes-recette li::before { content: counter(etape); width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 15px var(--titre); }

/* --- Mes plats votés ---------------------------------------------------- */
.onglets-votes { max-width: 520px; }
.grille-plats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.plat { background: #fff; border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.plat img { width: 100%; height: 150px; object-fit: cover; display: block; }
.plat .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.plat .titre { font: 700 16px/1.25 var(--titre); color: var(--vert); text-decoration: none; }
.plat .actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.vide { padding: 24px; border-radius: 12px; background: var(--beige); text-align: center; }

/* --- Ma famille --------------------------------------------------------- */
.membres { list-style: none; margin: 0; padding: 0; }
.membres li { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid #f0ede4; flex-wrap: wrap; padding: 6px 0; }
.membres li:first-child { border-top: 0; }
.avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--vert-clair); color: var(--vert); display: flex; align-items: center; justify-content: center; font: 700 16px var(--titre); }
.membres .nom { flex-grow: 1; }
.badge { padding: 3px 10px; border-radius: 999px; font: 700 12px var(--titre); background: var(--creme); color: var(--creme-texte); }
.bouton-danger { border-color: var(--rouge); color: var(--rouge); }
.bouton-danger:hover { background: #fbe0de; color: var(--rouge); }
.message-ok { padding: 14px 16px; border-radius: 10px; background: var(--vert-clair); color: var(--vert-texte); font-family: var(--titre); font-weight: 700; }

@media (max-width: 900px) {
    .fiche, .fiche-corps { grid-template-columns: minmax(0, 1fr); }
    .grille-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aide-resume p { margin: 0 0 10px; }
.aide-resume { max-height: 70vh; overflow: auto; }

/* --- Pages de compte (connexion, inscription, mot de passe) --- */
.formulaire-compte { max-width: 620px; }
.pile-champs { display: flex; flex-direction: column; gap: 18px; }
.ligne-boutons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ligne-boutons .bouton { min-height: 52px; padding: 0 28px; font-size: 16px; }
.bouton-oeil { flex-shrink: 0; width: 40px; height: 40px; border: 0; background: none; color: var(--texte-doux); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; cursor: pointer; }
.bouton-oeil:hover { background: var(--beige); color: var(--vert); }
.bouton-oeil .icone-oeil-ferme, .bouton-oeil.oeil-visible .icone-oeil-ouvert { display: none; }
.bouton-oeil.oeil-visible .icone-oeil-ferme { display: block; }
.indicateur-longueur-mdp.longueur-atteinte { color: var(--vert-texte); font-weight: 700; }
.case-accord { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.case-accord input { width: 20px; height: 20px; accent-color: var(--vert); flex-shrink: 0; margin-top: 1px; }
.liste-atouts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.4; color: #e7efd9; }
.resume a.bouton { color: var(--vert); }
.resume a.bouton-orange { color: #fff; }
.resume .note a { color: #fff; }

/* --- Politique de confidentialité --- */
.politique { font-size: 16.5px; line-height: 1.6; max-width: 860px; }
.politique .chapeau { font: 700 19px/1.45 var(--titre); color: var(--vert); margin: 0; }
.politique section { scroll-margin-top: 16px; }
.politique h2 { font: 700 26px/1.2 var(--titre); color: var(--vert); margin: 8px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--vert-clair); }
.politique h3 { font: 700 17px var(--titre); color: var(--olive); margin: 18px 0 6px; }
.politique ul { margin: 0 0 8px; padding-left: 22px; }
.politique li { margin-bottom: 6px; }
.politique p { margin: 0 0 12px; }
.politique .encadre-orange h2 { border-color: rgba(194,77,20,.25); }
.tableau-defilant { overflow-x: auto; }
.politique table { width: 100%; border-collapse: collapse; font-size: 15px; }
.politique th, .politique td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.politique th { background: var(--creme); font-family: var(--titre); }
.sommaire-politique { display: flex; flex-direction: column; gap: 8px; }
.sommaire-politique a { color: #fff; text-decoration: none; font: 700 14.5px var(--titre); }
.sommaire-politique a:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .resume .sommaire-politique { display: none; }
    .politique h2 { font-size: 22px; }
}

/* --- Administration --- */
.bloc-admin { display: flex; flex-direction: column; gap: 12px; }
.bloc-admin h2 { margin: 8px 0 0; font: 700 26px var(--titre); color: var(--vert); }
.grille-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.fiche-admin { background: #fff; border: 1px solid var(--bordure); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.fiche-admin .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 700 17px var(--titre); }
.fiche-admin dl { margin: 0; display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 14.5px; }
.fiche-admin dt { color: var(--texte-doux); font: 700 12.5px var(--titre); text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.fiche-admin dd { margin: 0; overflow-wrap: anywhere; }
.fiche-admin .bouton { min-height: 40px; }
.table-admin { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.table-admin th, .table-admin td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.table-admin th { background: var(--creme); font-family: var(--titre); white-space: nowrap; }
.actions-compte { display: flex; gap: 6px; flex-wrap: wrap; }
.actions-compte .bouton { min-height: 34px; padding: 0 12px; font-size: 13px; }
.mdp-genere { font: 700 18px monospace; background: #fff; padding: 2px 8px; border-radius: 6px; user-select: all; }
@media (max-width: 760px) { .grille-fiches { grid-template-columns: 1fr; } .fiche-admin dl { grid-template-columns: 1fr; } }

/* --- Mise en page générale : pied de page toujours en bas, en-tête et menu sur une ligne --- */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .bande-photo { flex: 1 0 auto; }
body > .pied { flex-shrink: 0; }
body > .entete { width: 100%; box-sizing: border-box; }
.legende-fond { display: none; }

.logo { flex-shrink: 0; }
.logo-devise { white-space: nowrap; }
.whatsapp { min-width: 0; flex-shrink: 1; }
.whatsapp-texte { min-width: 0; text-align: right; }

.navigation { flex-wrap: nowrap; gap: 8px; }
.navigation .pilule { padding: 0 17px; }
.navigation > .menu-compte { margin-left: auto; }
.nom-compte { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

@media (min-width: 1101px) {
    .entete, .bande-photo-contenu { padding-left: 64px; padding-right: 64px; }
}
@media (max-width: 1240px) {
    .wa-long { display: none; }
    .navigation .pilule { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 1000px) {
    .navigation { flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .logo-devise { white-space: normal; }
    .whatsapp-texte { text-align: left; }
}

/* --- Rayons repliables (liste de courses) --- */
.rayon-titre { margin: 0; font: inherit; }
button.rayon-entete { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; }
button.rayon-entete:focus-visible { outline: 3px solid var(--vert); outline-offset: -3px; }
.rayon-entete .nom { flex-grow: 1; font: 700 17px var(--titre); }
.rayon-entete .compte { font-size: 14px; font-weight: 700; white-space: nowrap; }
.rayon-entete svg { flex-shrink: 0; }
.rayon.replie .rayon-entete { border-radius: 12px; }
.rayons-actions { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: -6px; }
@media (max-width: 760px) { .rayon-entete .compte { white-space: normal; text-align: right; } }
@media print { .rayon-articles[hidden] { display: block !important; } }

/* --- Logo : slogan et signature sous « Monketo » ---
   Le bloc a exactement la largeur du titre (les deux lignes ne l'elargissent pas) :
   « Comme Linda & Didier » est centre juste sous le titre ;
   « Pour vivre mieux, ensemble ! » s'etale du M au o en dessous. */
.logo-texte { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0; width: max-content; }
.logo-slogan, .logo-signature { width: 0; min-width: 100%; white-space: nowrap; }
.logo-slogan { display: flex; justify-content: space-between; margin-top: 4px; padding-left: 3px; /* compense l'approche du M */ font: 700 15px/1.1 var(--titre); color: var(--orange-logo); letter-spacing: .2px; }
.logo-signature { display: block; text-align: center; margin-top: 2px; font: 700 12px/1.1 var(--titre); color: var(--olive); letter-spacing: .4px; }
@media (max-width: 760px) {
    .logo-slogan { font-size: 10.5px; padding-left: 2px; }
    .logo-signature { font-size: 9.5px; }
}

/* --- Couleurs des choix validés et navigation (oct. 2026) ---------------- */
/* Semaine choisie (Mon plan, Liste de courses) en orange */
#barre-semaines > button[aria-pressed="true"], #barre-semaines > button[aria-selected="true"] { background: var(--orange-logo); color: #fff; }
/* Jour choisi (Mon plan) et étape du profil en vert olive */
#barre-jours > button[aria-pressed="true"], #barre-jours > button[aria-selected="true"],
#barre-etapes > button[aria-pressed="true"], #barre-etapes > button[aria-selected="true"] { background: var(--olive); color: #fff; }
/* Onglet actif : en premier, orange vif */
.navigation .pilule.actif { background: var(--orange-logo); color: #fff; box-shadow: none; }
.navigation .pilule.actif:hover { color: #fff; }
/* Filtre Tous / Producteurs / Commerces : textes centrés dans le cadre blanc */
.segmente { align-items: stretch; gap: 2px; }
.segmente label { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 36px; margin: 0; padding: 0 10px; line-height: 1.1; white-space: nowrap; }

/* --- Catalogue des produits par rayon (inscription producteurs / commerces) */
.catalogue { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rayon-catalogue { border: 1px solid var(--bordure); border-radius: 12px; background: #fff; }
.rayon-catalogue > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; font: 700 16px var(--titre); color: var(--vert); list-style: none; }
.rayon-catalogue > summary::-webkit-details-marker { display: none; }
.rayon-catalogue > summary::before { content: '›'; font-size: 22px; transition: transform .15s; margin-right: 4px; }
.rayon-catalogue[open] > summary::before { transform: rotate(90deg); }
.rayon-catalogue > summary > span:first-of-type { flex: 1; }
.rayon-catalogue .compte { font: 400 13px var(--texte-police, inherit); color: #6b6a63; }
.rayon-catalogue .compte.actif { font-weight: 700; color: var(--olive); }
.outils-rayon { display: flex; gap: 16px; padding: 0 16px 6px; }
.grille-catalogue { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.produit-catalogue { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #cfcabb; background: #f7f5ef; color: var(--texte); font: 400 14px inherit; cursor: pointer; }
.produit-catalogue[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; font-weight: 700; }
.produit-catalogue[aria-pressed="true"]::before { content: '✓ '; }

/* --- Prix des vendeurs (facultatifs) ------------------------------------- */
.bloc-prix { border: 1px solid var(--bordure); border-radius: 12px; background: #fff; }
.bloc-prix > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; font: 700 16px var(--titre); color: var(--vert); list-style: none; }
.bloc-prix > summary::-webkit-details-marker { display: none; }
.bloc-prix > summary::before { content: '›'; font-size: 22px; transition: transform .15s; margin-right: 4px; }
.bloc-prix[open] > summary::before { transform: rotate(90deg); }
.bloc-prix > summary > span:first-of-type { flex: 1; }
.bloc-prix .compte { font: 700 13px var(--titre); color: var(--olive); }
.bloc-prix > p { margin: 0 16px 10px; }
.tableau-prix { display: flex; flex-direction: column; padding: 0 16px 16px; }
.ligne-prix { display: grid; grid-template-columns: minmax(0, 1fr) 96px 118px minmax(0, 170px); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #eee9dc; }
.ligne-prix:first-child { border-top: 0; }
.ligne-prix label { font: 700 15px var(--titre); color: var(--vert); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-prix .champ-texte { min-height: 40px; padding: 0 10px; }
.ligne-prix input.champ-texte { text-align: right; font-weight: 700; }
.ligne-prix input[aria-invalid="true"] { border-color: var(--rouge); background: #fff3f0; }
.ligne-prix .indicatif { color: #8a8678; }
@media (max-width: 640px) {
    .ligne-prix { grid-template-columns: minmax(0, 1fr) 84px 104px; }
    .ligne-prix .indicatif { grid-column: 1 / -1; margin-top: -4px; }
}

/* Prix d'un vendeur proche dans la liste de courses */
.article-local { display: block; padding: 0 0 8px 58px; margin-top: -4px; font-size: 12.5px; color: var(--olive); font-weight: 700; }
.vendeur .prix-vendeur { font-size: 13px; }
.vendeur .prix-vendeur b { color: var(--vert); }
.menu-compte-liste a.lien-danger { color: var(--rouge); }

/* --- Pages publiques : accueil, recettes, guides (octobre 2026) ---------- */
.accueil-hero h1 { margin: 0 0 12px; font: 700 44px/1.1 var(--titre); color: var(--vert); max-width: 900px; }
.accueil-hero .sous-titre { max-width: 860px; font-size: 18px; line-height: 1.6; }
.accueil-hero .ligne-boutons { margin: 20px 0 8px; }
.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
section > h2 { margin-bottom: 16px; }
.etapes-accueil { list-style: none; counter-reset: etape; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.etapes-accueil li { counter-increment: etape; background: #fff; border: 1px solid var(--bordure); border-radius: 12px; padding: 18px 18px 18px 64px; position: relative; display: flex; flex-direction: column; gap: 6px; }
.etapes-accueil li::before { content: counter(etape); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px; border-radius: 999px; background: var(--orange-logo); color: #fff; font: 700 18px/36px var(--titre); text-align: center; }
.etapes-accueil strong { font: 700 17px var(--titre); color: var(--vert); }
.grille-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grille-atouts > div { background: var(--vert-clair); border-radius: 12px; padding: 16px 18px; }
.grille-atouts p { margin: 6px 0 0; color: var(--vert-texte); }
.bloc-applis h2, .encadre h2 { margin-bottom: 8px; }
.encadre .ligne-boutons, .encadre p.ligne-boutons { display: flex; flex-wrap: wrap; gap: 10px; }

.carte-recette .infos-recette { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--texte-doux); }
.badge-saison { align-self: flex-start; background: var(--vert-clair); color: var(--vert-texte); }
.filtres-recettes { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; background: var(--beige); border-radius: 12px; padding: 16px; }
.filtres-recettes .champ { display: flex; flex-direction: column; gap: 6px; }
.filtres-recettes .saisie { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--bordure-forte); border-radius: 10px; background: #fff; font: inherit; }
.actions-filtres { display: flex; align-items: center; gap: 12px; }
.raccourcis-saisons { display: flex; flex-wrap: wrap; gap: 8px; }
.raccourcis-saisons .chip { padding: 0 14px; text-decoration: none; color: var(--vert); }
.raccourcis-saisons .chip-actif { background: var(--vert); color: #fff; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .bouton { min-height: 40px; padding: 0 16px; }
.texte-recettes p { margin: 8px 0 0; }
.fil-ariane { display: block; margin-bottom: 6px; }
.fil-ariane a { color: var(--olive); }

.en-bref { background: var(--creme); border-radius: 12px; padding: 20px 24px; }
.liste-en-bref { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }
.recettes-proches h2 { margin-bottom: 14px; }

.grille-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.carte-guide { background: #fff; border: 1px solid var(--bordure); border-left: 4px solid var(--olive-logo); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.carte-guide h2, .carte-guide h3 { font: 700 19px/1.3 var(--titre); }
.carte-guide h2 a, .carte-guide h3 a { color: var(--vert); text-decoration: none; }
.carte-guide h2 a:hover, .carte-guide h3 a:hover { color: var(--orange); }
.carte-guide p { margin: 0; }
.article-guide { max-width: 820px; }
.article-guide h1 { margin: 0 0 8px; font: 700 40px/1.15 var(--titre); color: var(--vert); }
.chapeau { font-size: 19px; line-height: 1.6; color: var(--texte-doux); }
.texte-guide { font-size: 17px; line-height: 1.7; }
.texte-guide h2 { font-size: 26px; margin: 32px 0 10px; }
.texte-guide h3 { font-size: 18px; margin: 20px 0 6px; }
.texte-guide p, .texte-guide ul, .texte-guide ol { margin: 0 0 14px; }
.texte-guide li { margin-bottom: 6px; }
.appel-inscription p { margin: 8px 0 0; }

@media (max-width: 1100px) {
    .filtres-recettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grille-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .accueil-hero h1 { font-size: 30px; }
    .article-guide h1 { font-size: 30px; }
    .etapes-accueil, .grille-guides, .grille-atouts { grid-template-columns: 1fr; }
    .filtres-recettes { grid-template-columns: 1fr 1fr; }
    .filtres-recettes .champ:first-child { grid-column: 1 / -1; }
    .texte-guide { font-size: 16px; }
}