/*
 * Mijoka — charte tablette (15 novembre 2026).
 * Tablettes visées : 8 pouces (≈ 960 × 600) et 10 pouces (≈ 1280 × 800), puis plus grandes.
 * Cibles de 48 px (doigt), texte de 16 px ; pages larges ; peu d'informations = un seul écran.
 * Seul le mode En cuisine garde ses grandes cibles (lu à un mètre).
 * Chargé après mijoka.css : ne contient que des règles de tablette.
 */
@media (min-width: 700px) and (min-height: 521px) {
  /* --- Échelle --- */
  h1 { font-size: calc(1.4rem * var(--titre-echelle)); }
  h2 { font-size: calc(1.1rem * var(--titre-echelle)); }
  h3 { font-size: calc(1rem * var(--titre-echelle)); }
  [data-theme="plan-travail"] .barre-titre h1, [data-theme="plan-travail"] .page > h1 { font-size: calc(1.4rem * var(--sur-fond-echelle)); }
  .aide, .sous-titre { font-size: .875rem; }

  /* --- Page : toute la largeur utile --- */
  .page, .barre-titre { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
  .page { padding-top: var(--esp-4); padding-bottom: var(--esp-4); }
  .page .barre-titre { padding-left: 0; padding-right: 0; }

  /* --- Cartes, boutons, puces --- */
  .carte { padding: 20px; }
  .bouton { font-size: 1rem; padding: 0 20px; border-radius: 12px; gap: 8px; }
  .bouton svg.icone, .bouton .icone { width: 1.25em; height: 1.25em; }
  .puces { gap: 8px; }
  .puce span, a.puce { padding: 0 14px; font-size: .95rem; }
  .presences .puce span { padding: 0 14px; }
  .lien-retour { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }

  /* --- Tuiles et listes --- */
  .tuile { padding: 18px; font-size: 1.05rem; }
  .tuile-icone { width: 46px; height: 46px; border-radius: 14px; }
  .tuile-icone svg { width: 26px; height: 26px; }
  .membres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liste-recettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }

  /* --- En cuisine : on garde les grandes cibles, lues à un mètre --- */
  body.mode-cuisine { --cible: 64px; font-size: 18px; }
}
@media (min-width: 1100px) and (min-height: 521px) {
  .liste-recettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Utilitaires : un élément pour la tablette, son équivalent ailleurs */
.seulement-tablette { display: none !important; }
@media (min-width: 700px) and (min-height: 521px) {
  .seulement-tablette { display: inline-flex !important; }
  .sauf-tablette { display: none !important; }
  .barre-titre > .bouton { margin: 0; flex: none; }
}

/* ---------- La Tablée : personnes en 3-4 colonnes, semaine type en une ligne ---------- */
@media (min-width: 700px) and (min-height: 521px) {
  .carte-semaine-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-5); align-items: center; }
  .carte-semaine-type h2 { grid-column: 1; margin: 0 0 var(--esp-1); }
  .carte-semaine-type p { grid-column: 1; margin: 0; font-size: .9rem; color: var(--texte-doux); }
  .carte-semaine-type .bouton { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- Fiche d'une personne : deux colonnes (qui elle est | allergies) ---------- */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
  .fiche-membre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--esp-6); align-items: start; }
  .fiche-membre > fieldset.colonne { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fiche-membre > fieldset.colonne > :first-child { margin-top: 0; }
  .fiche-membre .puces-allergies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fiche-membre .puces-allergies .puce span { display: flex; width: 100%; min-height: 40px; padding: 0 12px; font-size: .9rem; }
  .fiche-membre .puce span small { display: none; }   /* « jusqu'à 3 ans »… : la tranche suffit sur tablette */
}

/* ---------- Fenêtre (modale) : ce qui ne tient pas sur la page ---------- */
dialog.fenetre { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--rayon);
  background-color: var(--surface); background-image: var(--surface-image); color: var(--texte); box-shadow: 0 24px 64px rgba(40, 24, 12, .35); overflow: hidden; }
dialog.fenetre[open] { display: flex; flex-direction: column; }
dialog.fenetre.large { width: min(880px, calc(100vw - 32px)); }
.fenetre-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--ligne); }
.fenetre-entete h2 { margin: 0; }
.fenetre-entete .fermer { margin: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.fenetre-corps { padding: 20px; overflow: auto; overscroll-behavior: contain; }
.fenetre-corps > :first-child { margin-top: 0; }
.fenetre-corps .formulaire { margin-top: 0; }
/* Fenêtre « tablette » : sur téléphone (ou sans script), son contenu reste dans la page, comme une carte */
@media not ((min-width: 700px) and (min-height: 521px)) {
  dialog.fenetre.tablette { display: block; position: static; width: auto; max-height: none; margin: 0; box-shadow: var(--ombre); border: 1px solid var(--surface-bord); overflow: visible; }
  dialog.fenetre.tablette .fenetre-entete { padding: 20px 20px 0; border: 0; }
  dialog.fenetre.tablette .fermer, .ouvre-fenetre.tablette { display: none; }
}
@media (scripting: none) {
  dialog.fenetre.tablette { display: block; position: static; width: auto; max-height: none; margin: 0; box-shadow: var(--ombre); }
  dialog.fenetre.tablette .fermer, .ouvre-fenetre { display: none; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
}
dialog.fenetre .barre-actions { display: flex; justify-content: flex-end; gap: var(--esp-3); margin-top: var(--esp-5); }
dialog.fenetre .barre-actions .bouton { margin: 0; width: auto; }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
  .fiche-membre .puces-allergies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fiche-membre .puces-allergies .puce span { padding: 0 8px; justify-content: center; font-size: .85rem; white-space: nowrap; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 700px) {
  .fiche-membre label:not(.puce), .fiche-membre .libelle { margin-top: var(--esp-3); margin-bottom: 6px; }
  .fiche-membre .puce span { min-height: 40px; }
  .carte:has(> .fiche-membre) > h1 { margin-bottom: 0; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
  .fiche-membre { grid-template-rows: auto 1fr; }
  .fiche-membre > fieldset.colonne:first-of-type { grid-row: 1 / span 2; }
  .fiche-membre { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .fiche-membre > .actions-membre { grid-column: 2; grid-row: 2; align-self: end; display: flex; justify-content: flex-end; gap: var(--esp-3); margin-top: var(--esp-4); }
  .fiche-membre > .actions-membre .bouton { margin: 0; }
  .fiche-membre .puces { flex-wrap: wrap; }
  .fiche-membre .puces:not(.puces-allergies) { gap: 6px; }
  .fiche-membre .puces:not(.puces-allergies) .puce span { padding: 0 11px; font-size: .85rem; }
  /* Titre (prénom) sur la ligne du lien de retour : une ligne de gagnée */
  main.page > p:has(> .lien-retour) + .carte:has(> .fiche-membre) > h1 { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); margin: 0; }
  .carte:has(> .fiche-membre) { margin-top: var(--esp-2); }
}
.actions-membre { margin-top: var(--esp-5); }
.actions-membre .bouton { margin: 0; }
/* Tablette basse (10 pouces Android ≈ 533 px de haut) : marges de page et pied resserrés */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  .page { padding-top: var(--esp-2); padding-bottom: var(--esp-2); }
  body.avec-nav .pied { padding-top: 2px; padding-bottom: 4px; font-size: .72rem; }
}

/* ---------- En-tête de page sur tablette (règle commune) ----------
   Ligne 1 : retour en haut à gauche. Ligne 2 : titre à gauche, sous-titre sur la même ligne, à droite. */
@media (min-width: 700px) and (min-height: 521px) {
  p.retour-accueil.seulement-tablette { display: block !important; }
  .barre-titre > div:has(> h1) { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-4); }
  .barre-titre > div:has(> h1) > .salut { margin: 0; text-align: right; max-width: 60%; }
  main.page > p:has(> .lien-retour) + .barre-titre, main.page > p:has(> .lien-retour) + .entete-section { margin-top: 0; }
  .lien-retour { min-height: 40px; }

  /* La Tablée : 3 personnes par ligne, « Ajouter quelqu'un » en dernière case, semaine type sur une ligne */
  .membres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ajout-membre { display: block !important; }
  .membre.ajouter { height: 100%; border: 2px dashed var(--ligne); background: transparent; box-shadow: none; color: var(--accent-fort); align-items: center; }
  .membre.ajouter .avatar { background: var(--accent-doux); color: var(--accent-fort); }
  .membre.ajouter .avatar .icone { width: 22px; height: 22px; }
  .carte-semaine-type { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 12px 12px 20px; }
  .carte-semaine-type h2 { grid-column: 1; margin: 0; white-space: nowrap; }
  .carte-semaine-type p { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carte-semaine-type .bouton { grid-column: 3; grid-row: 1; }
}
.membres > li > .membre { height: 100%; }

/* ---------- Mon compte sur tablette : un écran de réglages, les formulaires en fenêtre ---------- */
@media (min-width: 700px) and (min-height: 521px) {
  .resume-reglage.seulement-tablette { display: grid !important; }
  .page-compte main.page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); align-content: start;
    grid-template-areas: "retour retour retour" "titre titre titre" "foyer email mdp" "theme voix voix" "activite pied pied"; }
  .page-compte main.page > * { margin: 0 !important; min-width: 0; }
  .page-compte main.page > .retour-accueil { grid-area: retour; }
  .page-compte main.page > .barre-titre { grid-area: titre; margin-top: calc(-1 * var(--esp-3)) !important; }
  .page-compte main.page > .info, .page-compte main.page > .alerte { grid-column: 1 / -1; }
  .page-compte .resume-reglage:has([data-ouvre="fenetre-foyer"]) { grid-area: foyer; }
  .page-compte .resume-reglage:has([data-ouvre="fenetre-email"]) { grid-area: email; }
  .page-compte .resume-reglage:has([data-ouvre="fenetre-mdp"]) { grid-area: mdp; }
  .page-compte .resume-reglage:has([data-ouvre="fenetre-activite"]) { grid-area: activite; }
  .page-compte .carte-theme { grid-area: theme; }
  .page-compte .choix-voix { grid-area: voix; }
  .page-compte .pied-compte { grid-area: pied; align-self: center; display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-2); }
  .page-compte .pied-compte > * { margin: 0; }
  .page-compte .actions-compte .bouton, .page-compte .deconnexion-compte .bouton { margin: 0; }

  .resume-reglage { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: var(--esp-3); align-items: center; padding: 16px 16px 16px 20px; }
  .resume-reglage h2 { grid-column: 1 / -1; margin: 0 0 var(--esp-2); font-size: 1rem; }
  .resume-reglage .valeur { margin: 0; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .resume-reglage .valeur small { display: block; font-weight: 600; font-size: .8rem; color: var(--texte-doux); }
  .resume-reglage .bouton { margin: 0; padding: 0 14px; }

  /* Thème et voix restent sur la page, en plus petit */
  .page-compte .carte-theme h2, .page-compte .choix-voix h2 { margin: 0 0 2px; font-size: 1rem; }
  .page-compte .carte-theme > .aide, .page-compte .choix-voix > .aide { margin: 0 0 var(--esp-3); }
  .page-compte .choix-themes { gap: var(--esp-2); }
}
@media (min-width: 700px) and (min-height: 521px) {
  .page-compte .apercu-theme { min-height: 0; }
  .page-compte .voix-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .page-compte .voix-carte { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 10px 12px; gap: 4px var(--esp-3); }
  .page-compte .voix-contenu { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: var(--esp-3); grid-column: 1 / -1; }
  .page-compte .voix-icone { width: 44px; height: 44px; padding: 6px; margin: 0; grid-row: 1 / span 2; }
  .page-compte .voix-contenu strong { font-size: 1.05rem; }
  .page-compte .voix-contenu span { font-size: .8rem; }
  .page-compte .voix-carte .bouton-ecouter { grid-column: 1 / -1; justify-self: stretch; min-height: 40px; margin: 0; }
}

@media (min-width: 700px) and (min-height: 521px) {
  /* Résumés : bouton en icône seule (le titre de la carte dit ce qu'il fait), la valeur garde la place */
  .resume-reglage .bouton { width: 48px; min-width: 48px; padding: 0; }
  .resume-reglage .libelle-bouton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-compte .carte-theme > .aide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-compte .apercu-theme { height: clamp(84px, calc(100dvh - 520px), 132px); padding: 6px; }
  .page-compte .apercu-fiche { height: 100%; }
}
.pied-compte > * + * { margin-top: var(--esp-4); }
@media (min-width: 700px) and (min-height: 521px) {
  .page-compte .apercu-titre { font-size: calc(.72rem * var(--titre-echelle)); }
  .page-compte .apercu-fiche { padding: 6px; gap: 4px; }
}

/* ---------- Validations : bulle flottante en bas, au centre (charte 15/11/2026) ----------
   Visible 2 secondes (4 s si le message dépasse 80 caractères), puis s'efface ; les alertes restent dans la page. */
.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: var(--esp-2); width: max-content; max-width: min(92vw, 560px); margin: 0 !important; pointer-events: none; }
body.avec-nav .toasts { bottom: calc(65px + 12px + env(safe-area-inset-bottom)); }   /* au-dessus de la barre d'icônes */
.toast { display: flex; align-items: center; gap: var(--esp-2); margin: 0; padding: 10px 18px; border-radius: 14px;
  background: #3B2412; color: #FFF8EC; font-weight: 700; font-size: .95rem; line-height: 1.35; box-shadow: 0 10px 30px rgba(40, 24, 12, .35);
  opacity: 0; animation: toast-vie 2.5s ease forwards; }
.toast.toast-long { animation-duration: 4.5s; }
.toast .icone { width: 20px; height: 20px; flex: none; color: #B9D27A; }
@keyframes toast-vie { 0% { opacity: 0; transform: translateY(12px); } 10% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { @keyframes toast-vie { 0%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } }
@media (min-width: 700px) and (min-height: 521px) {
  .toasts, body.avec-nav .toasts { bottom: calc(24px + env(safe-area-inset-bottom)); max-width: min(70vw, 620px); }
  .toast { font-size: 1rem; padding: 12px 22px; }
}
@media (orientation: landscape) and (max-height: 520px) { body.avec-nav .toasts { bottom: calc(12px + env(safe-area-inset-bottom)); } }
@media (min-width: 700px) and (min-height: 521px) {
  .page-compte .carte-theme > .aide, .page-compte .choix-voix > .aide:not([data-voix-absente]) { display: none; }
  .page-compte .choix-voix { position: relative; }
  .page-compte .voix-appareil { position: absolute; top: 16px; right: 20px; margin: 0; font-size: .85rem; }
  .page-compte .voix-appareil[open] { position: static; margin-top: var(--esp-3); }
  .page-compte .voix-carte { grid-template-columns: minmax(0, 1fr) auto; }
  .page-compte .voix-contenu { grid-column: 1; }
  .page-compte .voix-carte .bouton-ecouter { grid-column: 2; grid-row: 1; justify-self: end; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; }
  .page-compte .voix-carte .bouton-ecouter .icone { width: 22px; height: 22px; }
  .page-compte .carte-theme h2 { margin-bottom: var(--esp-3); }
  .page-compte .choix-voix h2 { margin-bottom: var(--esp-3); }
}
@media (min-width: 700px) and (min-height: 521px) {
  .page-compte .voix-carte:has(input:checked)::after { top: 4px; left: 42px; right: auto; width: 20px; height: 20px; font-size: .7rem; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  .page-compte .apercu-theme { height: 72px; }
  .page-compte main.page { gap: var(--esp-3); }
}

/* ---------- Page d'un repas sur tablette : qui mange | le plat, Le Carnet en fenêtre ---------- */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
  .repas-unique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--esp-6); align-content: start; }
  .repas-unique > * { grid-column: 1; }
  .repas-unique > h2 { margin: 0 0 var(--esp-3); }
  .repas-unique > .titre-plat { grid-column: 2; grid-row: 1; }
  .repas-unique > .choix-plat { grid-column: 2; grid-row: 2 / span 6; margin: 0; }
  .repas-unique > .actions-repas { grid-column: 2; grid-row: 8; display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-4); flex-direction: row-reverse; margin-top: var(--esp-4); }
  .repas-unique > .actions-repas .bouton, .repas-unique > .actions-repas .lien-secondaire { margin: 0; }
  .repas-unique .choix-plat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .repas-unique .choix-plat > .choix, .repas-unique .choix-plat > details { margin: 0; }
  .repas-unique .choix-plat .choix span { font-size: .9rem; }
  .repas-unique .choix { padding: 10px 12px; min-height: 0; }
  a.bouton.cuisiner { min-height: 48px; }
  /* Fenêtre « Choisir dans Le Carnet » : recettes en 2 colonnes */
  dialog.fenetre .liste-recettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  dialog.fenetre .liste-recettes .choix { margin: 0; }
}
.actions-repas > .bouton { margin-top: var(--esp-5); }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) {
  form.repas-unique { grid-template-rows: auto auto auto auto auto 1fr auto; }
  form.repas-unique > h2, form.repas-unique > h2.titre-plat { margin: 0 0 var(--esp-3); }
  form.repas-unique > .choix-plat { grid-row: 2 / span 5; align-self: start; }
  form.repas-unique > .actions-repas { grid-row: 7; justify-content: flex-start; }
  form.repas-unique > .puces { margin-top: 0; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  a.bouton.cuisiner .cuisiner-texte small { display: inline; margin-left: 6px; }
  a.bouton.cuisiner .cuisiner-texte { display: block; }
}

/* ---------- Barre système du bas (Android : retour, accueil, applications) ----------
   L'app s'étend sous les barres du système : une bande sombre sous les trois boutons les rend lisibles (boutons blancs). */
html::after { content: ""; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom, 0px); background: #3B2412; pointer-events: none; }

/* Thème Épuré : fond de croquis seul, sans illustrations (tomate, poivre, farine…) — demande du 15/11/2026 */
[data-theme="epure"] .decor-scene { display: none; }

/* Accueil sur tablette : tuile « Mon compte » (pas de barre d'icônes sur tablette) */
@media (min-width: 700px) and (min-height: 521px) { .tuile.seulement-tablette { display: flex !important; } }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) { .carte:has(> .fiche-membre) { position: relative; } }

/* ---------- Thème ardoise (Plan de travail) : sous-titre sous le titre, sur une pastille sombre ----------
   Sur la photo (torchon, toque à la craie), un texte posé à droite se perdait. */
[data-theme="plan-travail"] .barre-titre > div:has(> h1) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--esp-1); }
[data-theme="plan-travail"] .barre-titre .salut, [data-theme="plan-travail"] main.page > h1 + .salut {
  display: inline-block; max-width: 100%; margin: var(--esp-1) 0 0; padding: 2px 12px; border-radius: 999px; text-align: left;
  background: rgba(24, 20, 17, .68); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #F6EDDD; font-family: var(--police-texte); font-size: .9rem; font-weight: 700; text-shadow: none; }
[data-theme="plan-travail"] .lien-retour { padding: 0 12px 0 8px; border-radius: 999px; background: rgba(24, 20, 17, .68);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #F6EDDD; text-shadow: none; }
[data-theme="plan-travail"] .barre-titre .date-du-jour { padding: 2px 12px; border-radius: 999px; background: rgba(24, 20, 17, .68); color: #F6EDDD; font-family: var(--police-texte); font-size: .9rem; }
@media (max-width: 559px) { [data-theme="plan-travail"] .page-accueil .barre-titre h1 { font-size: 1.45rem; line-height: 1.1; } }

/* Fenêtre ouverte : toujours centrée (les règles de rythme des pages mettaient sa marge à zéro) */
dialog.fenetre:modal { margin: auto !important; inset: 0; position: fixed; }
@media (min-width: 700px) and (min-height: 521px) { dialog.fenetre:not(.large) { width: min(520px, calc(100vw - 48px)); } }

/* Thème Carnet : lien de retour sur une pastille crème (illisible sur le bois et le torchon de la photo) */
[data-theme="carnet"] .lien-retour { padding: 0 14px 0 8px; border-radius: 999px; background: rgba(253, 248, 236, .92); color: #5C2E12;
  box-shadow: 0 2px 8px rgba(60, 30, 10, .25); text-shadow: none; font-weight: 800; }
[data-theme="carnet"] .lien-retour .icone { color: #9E4113; }

/* ---------- Sous-titre de page (15/11/2026) : sous le titre, sur toute la largeur, lisible sur chaque thème ---------- */
.barre-titre > div:has(> h1), [data-theme="plan-travail"] .barre-titre > div:has(> h1) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
.barre-titre > div:has(> h1) > .salut, main.page > h1 + .salut,
[data-theme="plan-travail"] .barre-titre .salut, [data-theme="plan-travail"] main.page > h1 + .salut {
  display: block; width: 100%; max-width: none; margin: 0; text-align: left; font-family: var(--police-texte); font-size: .95rem; font-weight: 700; line-height: 1.35;
  -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none; }
/* Épuré : texte brun doux, filet orange à gauche */
[data-theme="epure"] .barre-titre > div:has(> h1) > .salut, [data-theme="epure"] main.page > h1 + .salut {
  padding: 2px 0 2px 12px; border-left: 3px solid var(--accent-fort); border-radius: 0; background: none; color: var(--texte); }
/* Carnet : bandeau de papier crème sur la photo, écriture manuscrite brune */
[data-theme="carnet"] .barre-titre > div:has(> h1) > .salut, [data-theme="carnet"] main.page > h1 + .salut {
  padding: 4px 14px; border-radius: 10px; background: rgba(253, 248, 236, .9); box-shadow: 0 2px 8px rgba(60, 30, 10, .2);
  color: #5C2E12; font-family: "Caveat", var(--police-texte); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
/* Plan de travail (ardoise) : bandeau d'ardoise sombre, texte craie */
[data-theme="plan-travail"] .barre-titre > div:has(> h1) > .salut, [data-theme="plan-travail"] main.page > h1 + .salut {
  padding: 5px 14px; border-radius: 10px; background: rgba(24, 20, 17, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #F6EDDD; border-left: 3px solid #E8B04A; }
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  form.repas-unique { padding: 14px 20px; }
  form.repas-unique > .aide { display: none; }
  form.repas-unique > .actions-repas { margin-top: var(--esp-2); }
  .barre-titre > div:has(> h1) { gap: 4px; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  form.repas-unique > h2 { margin-bottom: var(--esp-2); }
  .repas-unique .choix { padding: 8px 12px; }
  main.page > .barre-titre + a.bouton.cuisiner { margin-top: var(--esp-3); }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  form.repas-unique .compteur .bouton, form.repas-unique .compteur input { min-height: 44px; height: 44px; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 521px) and (max-height: 560px) {
  .repas-unique .choix-plat { gap: 6px; }
  .page { padding-bottom: 4px; }
}
