/* Faukon — direction A « Pierre & Sapin », version nette (coins serrés, traits fins, chiffres en mono).
   Couleurs : fond minéral, encre presque noire, sapin pour l'action,
   ambre « signal » pour ce qui demande une action, rouge rare pour le danger. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-wght.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --pierre: #F3F4F1;
  --blanc: #FFFFFF;
  --trait: #E3E5E0;
  --encre: #16191D;
  --gris: #5B6169;
  --sapin: #1E5A4E;
  --sapin-fonce: #16443B;
  --sapin-clair: #E3EEEA;
  --signal: #E58A2E;
  --signal-texte: #9A4D0B;
  --signal-clair: #FBEBD9;
  --alerte: #B3261E;
  --alerte-clair: #F8E1DF;
  --rayon: 14px;
  --police: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ombre: 0 1px 2px rgba(22, 25, 29, 0.04);
  --ombre-haute: 0 1px 2px rgba(22, 25, 29, 0.06), 0 6px 16px rgba(22, 25, 29, 0.06);
  --largeur-nav: 232px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pierre);
  color: var(--encre);
  font-family: var(--police);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}

a { color: var(--sapin); }
a:hover { color: var(--sapin-fonce); }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
h2 { font-size: 1.125rem; font-weight: 600; }
h3 { font-size: 0.875rem; font-weight: 600; color: var(--gris); margin-top: 6px; }

.ln { display: block; }
.ic { flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--sapin); outline-offset: 2px; border-radius: 8px; }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 120px calc(16px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

section { display: flex; flex-direction: column; gap: 10px; }

.marque { font-size: 0.8125rem; color: var(--gris); letter-spacing: 0.02em; }
.entete { display: flex; flex-direction: column; gap: 6px; }
.sous-titre { color: var(--gris); font-size: 0.9375rem; }
.entete-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.discret { font-size: 0.8125rem; color: var(--gris); }
.section-tete { display: flex; justify-content: space-between; align-items: baseline; }

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
a.carte { transition: box-shadow 0.15s ease, transform 0.15s ease; }
@media (hover: hover) {
  a.carte:hover { box-shadow: var(--ombre-haute); transform: translateY(-1px); }
}
.bloc { padding: 18px; gap: 14px; }
.vide { padding: 18px; color: var(--gris); }

/* Héros de l'accueil */
.hero {
  /* Sapin, trame fine et dégradé léger : un écran d'instrument, sans assombrir. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(120% 90% at 100% 0%, #2A7464 0%, var(--sapin) 55%, #174A40 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--blanc);
  border-radius: 16px;
  padding: 22px;
  gap: 16px;
}
.hero-label { font-size: 0.875rem; opacity: 0.85; }
.hero-chiffre { font-size: 1.25rem; font-weight: 500; }
.hero-chiffre span { font-size: 3.5rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; margin-right: 6px; }
.hero-texte { font-size: 0.875rem; opacity: 0.9; }
.hero-jauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hero .barre { background: rgba(255, 255, 255, 0.22); }
.jauge-tete { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 6px; }
.hero-note { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; opacity: 0.75; }
.objectifs { display: flex; gap: 6px; }
.objectif {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.objectif.actif { background: var(--blanc); color: var(--sapin); border-color: var(--blanc); }

/* Jauges */
.barre { height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.barre > div { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.jauge-trait { position: relative; }
.trait { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--encre); }

/* Actions de la semaine */
.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  min-height: 56px;
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
}
.action:last-child { border-bottom: 0; }
.action-texte { display: flex; flex-direction: column; gap: 2px; }

/* Modules */
.modules { display: flex; flex-direction: column; gap: 10px; }
.module { padding: 16px; display: flex; align-items: center; gap: 14px; color: var(--encre); text-decoration: none; min-height: 72px; }
.module-icone { width: 44px; height: 44px; border-radius: 10px; background: var(--sapin-clair); color: var(--sapin); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.module-corps { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.module-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.module-titre { font-weight: 600; }

/* Conseil */
.conseil { background: var(--sapin-clair); border: 0; padding: 18px; gap: 6px; }
.conseil-titre { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sapin); }

/* Listes à cocher */
.groupe-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.groupe { padding-bottom: 4px; gap: 0; }
.groupe > .groupe-tete { padding: 14px 16px 6px; }
.groupe-titre { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.compteur { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--gris); }
.compteur.complet { color: var(--sapin); }
.item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; min-height: 48px; cursor: pointer; }
.item input { width: 22px; height: 22px; margin: 0; accent-color: var(--sapin); flex-shrink: 0; }
.item-texte { display: flex; flex-direction: column; gap: 2px; }
.item-label { font-weight: 500; }
.item-detail { font-size: 0.8125rem; color: var(--gris); }
.item.fait .item-label { color: var(--gris); }

/* Badges */
.badge { font-size: 0.75rem; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.badge-ok { color: var(--sapin); background: var(--sapin-clair); }
.badge-signal { color: var(--signal-texte); background: var(--signal-clair); }
.badge-alerte { color: var(--alerte); background: var(--alerte-clair); }
.badge-neutre { color: var(--gris); background: var(--trait); }

/* Boutons */
.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 10px;
  background: var(--sapin);
  color: var(--blanc);
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--sapin-fonce); color: var(--blanc); }
.bouton.secondaire { background: var(--blanc); color: var(--encre); border: 1px solid var(--trait); min-height: 48px; font-size: 0.9375rem; }
.bouton.secondaire:hover { background: var(--pierre); }
.bouton.danger { background: var(--blanc); color: var(--alerte); border: 1px solid var(--alerte-clair); min-height: 48px; font-size: 0.9375rem; }
.bouton.fichier { position: relative; overflow: hidden; }
.bouton.fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bouton-icone {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  color: var(--encre);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lien { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; background: none; border: 0; color: var(--sapin); font: inherit; font-weight: 600; cursor: pointer; }
.lien-discret { text-align: center; font-size: 0.875rem; padding: 8px; }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; text-decoration: none; }

/* Onglets */
.onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.onglet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.onglet.actif { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

.progression-tete { display: flex; justify-content: space-between; align-items: baseline; }
.gros-chiffre { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.gros-chiffre small { font-size: 0.9375rem; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.rappel { display: flex; gap: 10px; align-items: center; font-size: 0.8125rem; color: var(--sapin-fonce); background: var(--sapin-clair); border-radius: 12px; padding: 10px 12px; }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; font-weight: 500; flex: 1; }
.champ-court { flex: 0 0 90px; }
.champ input, .champ textarea {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--trait);
  background: var(--pierre);
  color: var(--encre);
  width: 100%;
}
.champ textarea { resize: vertical; }
.aide { font-size: 0.8125rem; color: var(--gris); }
.ligne-compteur { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.ligne-compteur:last-child { border-bottom: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--trait); background: var(--pierre); color: var(--encre); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper-valeur { min-width: 24px; text-align: center; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.enfant { display: flex; align-items: flex-end; gap: 10px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-weight: 500; cursor: pointer; }
.puce.actif { background: var(--sapin); color: var(--blanc); border-color: var(--sapin); }

/* Logement */
.alerte { flex-direction: row; gap: 12px; align-items: flex-start; background: var(--alerte-clair); color: var(--alerte); border-radius: 16px; padding: 14px 16px; font-weight: 500; }
.avertissement { flex-direction: row; gap: 12px; align-items: flex-start; padding: 16px; color: var(--alerte); }
.avertissement p { color: var(--encre); font-size: 0.875rem; }
.equipement { padding: 16px; gap: 10px; }
.equipement-titre { font-size: 1rem; }
.choix { display: flex; gap: 8px; }
.choix button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
.choix button.actif[data-valeur="ok"] { background: var(--sapin); border-color: var(--sapin); color: var(--blanc); }
.choix button.actif[data-valeur="todo"] { background: var(--signal-clair); border-color: var(--signal); color: var(--signal-texte); }

/* Sources */
.source { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }

/* Navigation */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 60px;
  min-height: 48px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--gris);
  text-decoration: none;
}
.nav a.actif { color: var(--sapin); }

@media (prefers-reduced-motion: reduce) {
  .barre > div { transition: none; }
}

/* Impression : en noir et blanc, sans navigation ni boutons. */
@media print {
  body { background: #fff; font-size: 12pt; }
  .nav, .bouton, .bouton-icone, .objectifs, .choix, .lien, .lien-discret, .onglets { display: none !important; }
  .page { padding: 0; max-width: none; }
  .carte, .hero, .conseil, .alerte, .rappel { border: 1px solid #999; background: #fff !important; color: #000 !important; break-inside: avoid; }
  .item.fait .item-label { text-decoration: none; color: #000; }
}

/* Stock roulant */
.produit { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--trait); }
.produit:last-child { border-bottom: 0; }
.produit-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quantite { color: var(--gris); font-weight: 400; }
.consigne { color: var(--encre); }
.produit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.produit-boutons { display: flex; gap: 6px; }
.bouton-mini { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; min-width: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--trait); background: var(--pierre); color: var(--encre); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; justify-content: center; }
.discret-bouton { background: var(--blanc); color: var(--gris); font-weight: 500; }
.puce.petite { min-height: 40px; padding: 0 12px; font-size: 0.875rem; }
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.champs-ligne { display: flex; gap: 10px; }
.champ select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--trait);
  background: var(--pierre);
  color: var(--encre);
  width: 100%;
}
.ajout-course { display: flex; gap: 8px; align-items: flex-end; }
details > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 4px; }
.methode { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.lien-source { font-size: 0.8125rem; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media print {
  .produit-boutons, .formulaire, .ajout-course, details:not([open]) { display: none !important; }
}

/* Jours de repas et liste idéale */
.mini-jauges { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.8125rem; color: var(--gris); }
.mini-jauges strong { color: var(--encre); }
.question { gap: 8px; }
.resultat { gap: 12px; }
.resultat h3.groupe-titre { font-size: 0.8125rem; }
.quantite-achat { font-size: 1.0625rem; font-weight: 600; color: var(--sapin); white-space: nowrap; }
.cible-focus:focus { outline: none; }

/* Fiches réflexes */
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fiche { display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 64px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.fiche .ic { color: var(--sapin); }
.etape { gap: 10px; }
.consignes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.consignes li::marker { color: var(--sapin); }
.numeros { display: flex; flex-direction: column; }
.numero { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.numero:last-child { border-bottom: 0; }
.numero strong { min-width: 44px; font-size: 1.25rem; color: var(--alerte); }

/* Plan familial */
.contact { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--trait); }
.contact .bouton-mini { align-self: flex-start; }
.champ .aide { font-weight: 400; }

/* Pages légales */
.legal .bloc p { font-size: 0.875rem; }

@media print {
  .champ input, .champ textarea { border: 0; border-bottom: 1px solid #999; border-radius: 0; background: #fff; resize: none; }
  .fiches, .retour { display: none !important; }
  .numero strong { color: #000; }
}

/* Listes détaillées, entretien, lien Géorisques */
.fiche-texte { display: flex; flex-direction: column; gap: 2px; }
.fiche .discret { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; }
.carte.source { padding: 14px 16px; border-bottom: 0; }
.carte.source .item-label { color: var(--sapin); }
.choix .bouton-mini { min-height: 44px; border-radius: 10px; padding: 0 18px; text-decoration: none; }
.lien-source { display: block; margin: 4px 0; }

/* Situation en cours */
.situation { border: 2px solid var(--signal); gap: 10px; padding: 16px; }
.situation-tete { display: flex; gap: 12px; align-items: center; }
.situation-tete .ic { color: var(--signal-texte); flex-shrink: 0; }
.situation-tete .conseil-titre { color: var(--signal-texte); }
.situation h2 { margin: 0; }
.situation-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.en-cours { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.liens-officiels { display: flex; flex-direction: column; gap: 6px; }

/* Classeur imprimable */
.classeur .chapitre { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-top: 1px solid var(--trait); }
.classeur h3 { margin: 10px 0 0; font-size: 1rem; }
.classeur h4 { margin: 6px 0 0; font-size: 0.875rem; color: var(--sapin); }
.papier-champ p { margin: 2px 0 0; }
.a-remplir { color: var(--gris); font-style: italic; }
.papier-liste, .papier-puces { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.papier-liste { list-style: none; padding: 0; }
.papier-liste li { display: flex; gap: 10px; align-items: flex-start; }
.papier-puces { padding-left: 20px; }
.case-papier { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--encre); border-radius: 3px; font-size: 0.75rem; line-height: 14px; text-align: center; }
.papier-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.papier-table th, .papier-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.papier-fiche { break-inside: avoid; }
@media print {
  .ecran-seulement, .retour, .situation-actions { display: none !important; }
  .classeur .chapitre { break-before: page; border-top: 0; }
  .classeur .chapitre:first-of-type { break-before: auto; }
  .classeur h4 { color: #000; }
}


/* Étiquettes et titres éditoriaux */
.eyebrow { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sapin); }
.eyebrow-clair { color: rgba(255, 255, 255, 0.75); }
.titre-xl { font-size: 2.375rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
.titre-l { font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.titre-m { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
.chapo { font-size: 1.0625rem; color: var(--gris); line-height: 1.5; }

/* Bienvenue */
.bienvenue { gap: 28px; }
.bienvenue-hero { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 4px; }
.cta { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.promesses { display: grid; grid-template-columns: 1fr; gap: 10px; }
.promesse { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.promesse h2 { font-size: 1rem; }
.manifeste { background: var(--sapin); color: var(--blanc); border-radius: 16px; padding: 26px 22px; gap: 14px; }
.manifeste .eyebrow { color: rgba(255, 255, 255, 0.75); }
.manifeste p { font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.manifeste:focus { outline: none; }
.grille-contenu { display: grid; grid-template-columns: 1fr; gap: 10px; }
.contenu { padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.contenu > .ic { color: var(--sapin); margin-top: 2px; }
.contenu-titre { margin: 0 0 2px; font-size: 0.9375rem; color: var(--encre); }
.manifeste-court { padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--encre); }

/* Fin de formulaire */
.suite { gap: 10px; padding-top: 6px; }
.suite .aide { display: flex; align-items: center; gap: 6px; }
.suite-boutons { display: flex; flex-direction: column; gap: 10px; }
.suite .bouton .ic { margin-left: 4px; }

/* Message de confirmation */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  background: var(--encre);
  color: var(--blanc);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--ombre-haute);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
  max-width: calc(100vw - 32px);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }

.nav { z-index: 10; }
.nav-marque { display: none !important; }

/* Ordinateur et tablette en paysage */
@media (min-width: 720px) {
  .titre-xl { font-size: 3.25rem; }
  .promesses { grid-template-columns: repeat(3, 1fr); }
  .grille-contenu { grid-template-columns: repeat(2, 1fr); }
  .cta, .suite-boutons { flex-direction: row; }
  .cta .bouton, .suite-boutons .bouton { flex: 1; }
  .modules { display: grid; grid-template-columns: repeat(2, 1fr); }
  .onglets { flex-wrap: wrap; overflow: visible; }
  .bienvenue { max-width: 880px; }
}
@media (min-width: 960px) {
  .avec-nav main { margin-left: var(--largeur-nav); }
  .page { max-width: 820px; padding: 40px 32px 64px; }
  .nav {
    top: 0;
    right: auto;
    width: var(--largeur-nav);
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px 14px;
    border-top: 0;
    border-right: 1px solid var(--trait);
  }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; min-height: 46px; border-radius: 8px; font-size: 0.9375rem; }
  .nav a.actif { background: var(--sapin-clair); }
  .nav a:hover { color: var(--sapin); }
  .nav-marque { display: flex !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--sapin) !important; margin-bottom: 18px; }
  .toast { bottom: 32px; left: calc(50% + var(--largeur-nav) / 2); }
  .hero { padding: 28px; }
}
@media print {
  .toast, .suite { display: none !important; }
  .avec-nav main { margin-left: 0; }
  .carte { box-shadow: none; }
}

/* Promesses compactes sur téléphone, en colonnes sur grand écran */
@media (max-width: 719px) {
  .promesse { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; }
  .promesse .module-icone { grid-row: span 2; }
}
@media (min-width: 960px) {
  .avec-nav .entete-ligne > .marque { visibility: hidden; }
}


/* Accessibilité */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.hero :focus-visible, .manifeste :focus-visible { outline-color: var(--blanc); }
.lien-source, .lien-discret { display: inline-flex; align-items: center; min-height: 44px; }
.bouton-mini, .puce.petite { min-height: 44px; }
.nav a { flex: 1 1 0; min-width: 0; text-align: center; }
.nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-defile { overflow-x: auto; }
.papier-label { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--sapin); }
.avertissement-sante { font-size: 0.8125rem; color: var(--gris); border-top: 1px solid var(--trait); padding-top: 12px; }
.toast.erreur { background: var(--alerte); }
@media (prefers-reduced-motion: reduce) {
  .toast, a.carte { transition: none; }
  a.carte:hover { transform: none; }
}
@media (min-width: 960px) {
  .nav { padding-top: calc(28px + env(safe-area-inset-top)); padding-left: calc(14px + env(safe-area-inset-left)); }
  .nav a { flex: 0 0 auto; text-align: left; }
}
@media print {
  .avertissement-sante { border: 0; }
  .classeur .papier-label { color: #000; }
}
.lien-discret { justify-content: center; }

/* Pages publiques (confidentialité, aide) : lisibles sans JavaScript */
.page-statique { padding-bottom: 48px; }
.page-statique h2 { margin-top: 10px; }
.page-statique p, .page-statique li { line-height: 1.55; }
.page-statique ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.alerte-statique { border-color: var(--alerte-clair); }


/* Passe design : rythme, liens, entretien, grands écrans */
.liens-officiels { gap: 0; }
.bloc > .liens-officiels { margin-top: -6px; }
.taches { padding: 0; }
.tache { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-bottom: 1px solid var(--trait); }
.tache:last-child { border-bottom: 0; }
.tache-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tache-titre { font-size: 1rem; font-weight: 600; margin: 0; }
.tache-titre a { color: var(--encre); text-decoration: none; }
.tache-titre a:hover { color: var(--sapin); }
.tache-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tache-pied .bouton-mini { gap: 6px; padding: 0 14px; }
.badge { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
@media (min-width: 720px) {
  .carte .bouton, .suite .bouton.secondaire:only-child { align-self: flex-start; min-width: 280px; }
  .choix { max-width: 420px; }
  .fiches { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* Raccourcis de l'accueil : trois tuiles sur une ligne */
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.raccourci { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; min-height: 112px; color: var(--encre); text-decoration: none; }
.raccourci > .ic { color: var(--sapin); margin-bottom: 6px; }
.raccourci-titre { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.raccourci .discret { font-size: 0.75rem; line-height: 1.3; }

/* Accès au mode urgence */
.entete-actions { display: flex; align-items: center; gap: 8px; }
.bouton-urgence { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--encre); color: var(--blanc); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.bouton-urgence:hover { color: var(--blanc); background: #000; }

/* Mode urgence : noir pur (pixels éteints sur écran OLED), gros texte, aucun effet */
html.mode-urgence, html.mode-urgence body { background: #000; color: #fff; }
html.mode-urgence *, html.mode-urgence *::before, html.mode-urgence *::after { transition: none !important; animation: none !important; box-shadow: none !important; }
html.mode-urgence .toast { display: none; }
.urgence {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 1.125rem;
  line-height: 1.45;
}
.urgence section { gap: 10px; }
.urgence h1 { font-size: 1.75rem; color: #fff; }
.urgence h2 { font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; }
.urgence h3 { font-size: 0.9375rem; color: #fff; opacity: 0.75; margin: 0; }
.urgence a { color: #fff; }
.urgence :focus-visible { outline-color: #fff; }
.u-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.u-quitter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #fff; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; }
.u-rappels { margin: 0; padding: 14px 16px 14px 34px; border: 1px solid #fff; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 1rem; }
.u-numeros { display: flex; flex-direction: column; }
.u-numeros > a, .u-numeros > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid #444; text-decoration: none; min-height: 56px; }
.u-numeros strong { font-size: 1.5rem; font-weight: 600; }
.u-numeros span { font-size: 0.9375rem; color: #fff; opacity: 0.8; }
.u-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.u-bloc { display: flex; flex-direction: column; gap: 2px; }
.u-bloc p { margin: 0; }
.u-vide { opacity: 0.75; }
@media (max-width: 380px) {
  .bouton-urgence { padding: 0 12px; }
}
.entete-ligne > .marque { min-width: 0; }

/* Titre de bienvenue : chaque ligne tient sur une ligne, du petit téléphone à l'ordinateur */
.bienvenue .titre-xl { font-size: clamp(1.625rem, 7.4vw, 3.25rem); }

@media (min-width: 720px) {
  .promesse h2 { font-size: 0.9375rem; }
}

/* Mode urgence : fiches dépliables */
.u-fiches { display: flex; flex-direction: column; }
.u-fiches details { border-bottom: 1px solid #444; padding: 4px 0 10px; }
.u-fiches summary { min-height: 52px; font-size: 1.125rem; font-weight: 600; color: #fff; }
.u-fiches summary::after { content: '+'; margin-left: auto; font-size: 1.5rem; font-weight: 400; }
.u-fiches details[open] summary::after { content: '−'; }
.u-fiches h3 { margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }

/* Rations des tout-petits et des animaux */
.speciaux { gap: 12px; }
.speciaux-trio h4 { margin: 4px 0 6px; font-size: 0.875rem; font-weight: 600; }
.champs-ligne.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.champs-ligne.trois .champ span { font-size: 0.75rem; line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; }

.speciaux .sous-titre-champ { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; }
.speciaux .eau-animal { align-self: flex-end; padding-bottom: 12px; }

/* Marque Faukon : le signe à côté du nom */
.marque { display: inline-flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; color: var(--sapin); }
.signe { color: var(--sapin); flex-shrink: 0; }
.nav-marque { align-items: center; gap: 12px; font-size: 1.375rem !important; }
html.mode-urgence .signe { color: #fff; }

/* Transfert : le QR code reste blanc et net, quelle que soit la taille d'écran. */
.qr { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 8px; width: min(100%, 320px); margin: 0 auto; }
.qr svg { display: block; width: 100%; height: auto; }
.formulaire-transfert { display: grid; gap: 12px; }

/* Chiffres de suivi en mono, petits et alignés. */
.jauge-tete strong { font-family: var(--mono); font-weight: 500; font-size: 0.75rem; }
.objectif { font-variant-numeric: tabular-nums; }
.module-ligne .discret, .section-tete .discret { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.01em; }

/* Ligne d'état sous le logo : ce qui est vrai, rien d'autre. */
.etat-systeme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: -6px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--gris); }
.etat-systeme span, .etat-systeme a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); }
.etat-point { width: 6px; height: 6px; border-radius: 50%; background: #2E9E6A; box-shadow: 0 0 0 3px rgba(46, 158, 106, 0.15); }
.etat-systeme a { color: var(--gris); text-decoration: none; min-height: 24px; }
.version { text-align: center; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--gris); }