/* Carnet de recettes : accessibilité d'abord (contrastes AA, focus visible, cibles de 44 px, aucune animation décorative). */
:root {
  --vert: #1B5E3F; --vert-fonce: #0F3D28; --vert-clair: #E3EEE6; --vert-barre: #5E8F76;
  --encre: #17231C; --gris: #4A5A50; --bord: #C9D1C7; --fond: #F3F5F1; --blanc: #fff;
  --rouge: #A63A1F; --orange: #8A4B00; --focus: #0B57D0;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--encre); background: var(--fond); }
a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { margin: 0; font-size: 32px; line-height: 1.2; }
h2 { margin: 0; font-size: 24px; line-height: 1.25; }
h3 { margin: 0 0 8px; font-size: 20px; }
p { margin: 0 0 12px; }
.discret { color: var(--gris); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--blanc); padding: 12px 16px; z-index: 10; }
.evitement:focus { left: 8px; top: 8px; }

/* En-tête */
.entete { background: var(--vert); color: #fff; padding: 12px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.marque { font-size: 22px; font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 6px; color: #fff; text-decoration: none; }
.nav a:hover { background: var(--vert-fonce); color: #fff; }
.nav a[aria-current="page"] { background: #fff; color: var(--vert); font-weight: 700; }
.compte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compte form { margin: 0; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 2px solid var(--vert); border-radius: 6px; background: var(--vert); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.btn-contour { background: #fff; color: var(--vert); }
.btn-contour:hover { background: var(--vert-clair); color: var(--vert-fonce); }
.btn-neutre { background: #fff; color: var(--encre); border-color: var(--gris); font-weight: 400; }
.btn-neutre:hover { background: var(--fond); color: var(--encre); border-color: var(--encre); }
.btn-danger { background: #fff; color: var(--rouge); border-color: var(--rouge); }
.btn-danger:hover { background: #fbeeea; color: var(--rouge); border-color: var(--rouge); }
.btn-danger-plein { background: var(--rouge); border-color: var(--rouge); }
.btn-danger-plein:hover { background: #7f2a14; border-color: #7f2a14; }
.btn-blanc { background: #fff; color: var(--vert); border-color: #fff; }
.btn-blanc:hover { background: var(--vert-clair); color: var(--vert-fonce); }
.btn-clair { background: transparent; color: #fff; border-color: #fff; font-weight: 400; }
.btn-clair:hover { background: var(--vert-fonce); color: #fff; }
.btn-grand { min-height: 52px; padding: 0 28px; }
.btn-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--vert); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.actions form { margin: 0; }

/* Mise en page */
.contenu { padding: 32px; display: flex; flex-direction: column; gap: 28px; max-width: 1216px; width: 100%; margin: 0 auto; }
.contenu:focus { outline: none; }
.contenu.etroit { max-width: 1000px; }
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.carte.selection { border: 2px solid var(--vert); }
.ligne-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.message { padding: 12px 16px; border-radius: 6px; border: 2px solid var(--vert); background: var(--vert-clair); color: var(--vert-fonce); }
.message-err { border-color: var(--rouge); background: #fbeeea; color: #6f2210; }
.message ul { margin: 6px 0 0; padding-left: 20px; }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champ label, .champ .etiquette { font-weight: 700; }
.champ .aide { color: var(--gris); }
input[type=text], input[type=search], input[type=email], input[type=password], select, textarea { min-height: 44px; padding: 0 12px; border: 2px solid var(--gris); border-radius: 6px; font: inherit; background: #fff; color: var(--encre); width: 100%; }
textarea { padding: 8px 12px; min-height: 88px; }
input[type=file] { min-height: 44px; font: inherit; max-width: 100%; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; flex: 0 0 24px; accent-color: var(--vert); }
[aria-invalid="true"] { border-color: var(--rouge); }
.champ-etroit { max-width: 140px; }
.grille-champs { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.grille-champs > .champ { flex: 1 1 180px; }
.grille-champs > .large { flex: 2 1 280px; }
.grille-champs > .plein { flex: 1 1 100%; }
fieldset { margin: 0; padding: 20px 24px 24px; background: #fff; border: 1px solid var(--bord); border-radius: 8px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
legend { padding: 0 8px; font-size: 20px; font-weight: 700; }
.case { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.case-haute { align-items: flex-start; }
.ligne-saisie { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding-bottom: 12px; border-bottom: 1px dashed var(--bord); }
.ligne-saisie .champ { flex: 1 1 140px; }
.ligne-saisie .qte { flex: 0 1 110px; }
.ligne-saisie .unite { flex: 0 1 150px; }
.ligne-saisie .nom { flex: 2 1 240px; }
.ligne-saisie .texte { flex: 1 1 360px; }
.ligne-saisie .outils { display: flex; gap: 8px; flex-wrap: wrap; }
.filtres { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.filtres .champ { flex: 1 1 170px; }
.filtres .champ.large { flex: 2 1 260px; }

/* Tableaux */
.defilement { overflow-x: auto; border: 1px solid var(--bord); border-radius: 8px; background: #fff; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; padding: 12px 16px; color: var(--gris); }
th, td { text-align: left; padding: 10px 14px; vertical-align: middle; }
thead tr { background: var(--vert-clair); color: #17432E; }
tbody tr { border-top: 1px solid var(--bord); }
tbody th { font-weight: 700; }
tr.choisie { background: var(--vert-clair); }
tr.choisie td:first-child, tr.choisie th:first-child { box-shadow: inset 4px 0 0 var(--vert); }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: #f0f6f2; }
.min-large { min-width: 760px; }
.pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Fiche recette */
.pastilles { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { padding: 4px 12px; border-radius: 999px; background: var(--vert-clair); color: #17432E; font-weight: 700; }
.colonnes { display: flex; flex-wrap: wrap; gap: 32px; }
.colonnes > .col-1 { flex: 1 1 300px; min-width: 0; }
.colonnes > .col-2 { flex: 2 1 420px; min-width: 0; }
.liste-ingredients { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bord); }
.liste-ingredients li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.liste-ingredients .q { flex: 0 0 96px; font-weight: 700; }
.liste-etapes { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.liste-etapes li { padding-left: 4px; }
.liste-fichiers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.liste-fichiers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 6px; }
.note { margin: 0; padding: 12px; border: 1px solid var(--bord); border-radius: 6px; background: var(--fond); }
.photo-fiche { max-width: 360px; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--bord); }
.ajuste { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ajuste input { width: 80px; }

/* Récapitulatif */
.chiffres { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 16px; }
.chiffres li { flex: 1 1 200px; background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 16px 20px; }
.chiffres li.alerte { border-color: var(--orange); }
.chiffres .valeur { font-size: 36px; font-weight: 700; line-height: 1.2; }
.chiffres .legende { color: var(--gris); }
.chiffres li.alerte .legende { color: var(--orange); font-weight: 700; }
.repartition { margin: 0; padding: 0; list-style: none; min-width: 640px; }
.repartition a { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--bord); border-left: 4px solid transparent; color: var(--encre); text-decoration: none; background: #fff; }
.repartition li:last-child a { border-bottom: 0; }
.repartition a:hover { background: #f0f6f2; }
.repartition a[aria-current="true"] { background: var(--vert-clair); border-left-color: var(--vert); font-weight: 700; }
.repartition .nom-type { flex: 0 0 190px; font-weight: 700; }
.repartition .barre { flex: 1 1 200px; height: 20px; border-radius: 4px; background: var(--vert-clair); }
.repartition .barre span { display: block; height: 20px; border-radius: 4px; background: var(--vert-barre); }
.repartition a[aria-current="true"] .barre { background: #fff; }
.repartition a[aria-current="true"] .barre span { background: var(--vert); }
.repartition .nombre { flex: 0 0 120px; text-align: right; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--gris); border-radius: 999px; background: #fff; color: var(--encre); text-decoration: none; }
.puce:hover { background: var(--fond); }
.puce[aria-current="true"] { border-color: var(--vert); background: var(--vert); color: #fff; font-weight: 700; }

/* Import */
.etapes-import { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.etapes-import li { padding: 8px 16px; border-radius: 6px; border: 2px solid var(--gris); }
.etapes-import li.fait { background: var(--vert-clair); border-color: var(--vert-clair); color: #17432E; font-weight: 700; }
.etapes-import li[aria-current="step"] { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 700; }
.etat-pret { color: #17432E; font-weight: 700; }
.etat-verifier { color: var(--orange); font-weight: 700; }
.etat-non { color: var(--rouge); font-weight: 700; }
.texte-lu { margin: 0; padding: 16px; border: 1px solid var(--bord); border-radius: 6px; background: var(--fond); max-height: 360px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: 15px; }
.champ-a-renseigner { border-color: var(--orange); }

/* Courses */
.rayons { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rayon { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 20px; }
.rayon h2 { font-size: 20px; margin-bottom: 8px; }
.rayon ul { margin: 0; padding: 0; list-style: none; }
.rayon li { border-top: 1px solid var(--bord); }
.rayon label { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.rayon input:checked + span { text-decoration: line-through; color: var(--gris); }
.origine { color: var(--gris); font-size: 14px; }

/* Utilisateurs, aide */
.matrice td, .matrice th { text-align: left; }
.aide-sommaire { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.aide-theme h3 { margin-top: 12px; }
.aide-theme ol, .aide-theme ul { margin: 0 0 12px; padding-left: 24px; }

/* Connexion */
.carte-centree { width: 100%; max-width: 440px; margin: 48px auto; }
.carte-centree form { display: flex; flex-direction: column; gap: 16px; }
.mdp { display: flex; gap: 8px; }

/* Mode cuisine (mobile d'abord) */
body.cuisine { font-size: 18px; }
.cuisine-entete { background: var(--vert); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cuisine-entete .petit { font-size: 14px; }
.cuisine-entete .titre { font-size: 20px; font-weight: 700; }
.cuisine .contenu { padding-bottom: 96px; max-width: 760px; padding: 20px 16px; gap: 16px; }
.barre-progression { height: 10px; border-radius: 5px; background: var(--bord); }
.barre-progression span { display: block; height: 10px; border-radius: 5px; background: var(--vert); }
.etape-texte { margin: 0; font-size: 26px; line-height: 1.35; font-weight: 700; }
.cuisine-nav { position: sticky; bottom: 0; display: flex; gap: 12px; padding: 12px 16px 20px; background: #fff; border-top: 1px solid var(--bord); }
.cuisine-nav .btn { flex: 1; min-height: 60px; font-size: 18px; }
.minuteur { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.minuteur input { width: 96px; }
.minuteur .affichage { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ing-etape { margin: 0; padding: 0; list-style: none; }
.ing-etape li { padding: 6px 0; border-top: 1px solid var(--bord); }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .entete { padding: 12px 16px; }
  .contenu { padding: 20px 16px; }
  h1 { font-size: 26px; }
}
@media print {
  .entete, .actions, .cuisine-nav { display: none; }
  body { background: #fff; }
}