/* Meann · « Les trois papiers ». Toutes les couleurs sont ici, dans :root. */
:root {
  --encre: #16140F;
  --papier-journal: #E9E4D6;
  --papier-livre: #F5EDD9;
  --papier-cahier: #FBFAF4;
  --seyes-ligne: #C6CAEA;
  --seyes-fort: #8F95D6;
  --seyes-marge: #D9534F;
  --tranche: #BDB08F;
  --bleu: #1B3FC4;
  --bleu-clair: #C9D3FF;
  --blanc: #FFFFFF;

  --fond: var(--papier-journal);
  --surface: var(--papier-cahier);
  --texte: var(--encre);
  --texte-doux: #4A463B;
  --accent: var(--bleu);
  --accent-texte: var(--blanc);
  --sous-fond: var(--fond);
  --pli: #C9C2AE;

  --titre: 'Abril Fatface', Georgia, serif;
  --corps: 'Libre Franklin', system-ui, sans-serif;
  --t-corps: 1.0625rem;
  --marge: clamp(1.125rem, 5vw, 3.5rem);

  --nav-hauteur: 56px;
  --nav-fond: var(--encre);
  --nav-texte: var(--papier-cahier);
  --nav-bord: var(--encre);
  --nav-actif: #38352D;

  --carte-filet: var(--encre);

  --filigrane-fond: var(--papier-cahier);
  --filigrane-texte: var(--encre);
  --filigrane-bord: var(--encre);
  --filigrane-point: var(--bleu);

  --assistant-fond: var(--papier-cahier);
  --assistant-texte: var(--encre);
}

html { background: var(--fond); }
body { background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: var(--t-corps); line-height: 1.5; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; }
p { margin: 0; }
main > section { scroll-margin-top: var(--nav-hauteur); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.compteur-panier {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .25em;
  border-radius: 1em; background: var(--papier-cahier); color: var(--encre); font-size: .8em; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------ */
/* La signature : sans JavaScript ni mouvement, les feuilles se suivent       */
/* ------------------------------------------------------------------------ */
.feuilles { height: auto; }
.feuilles .scene__collant { position: static; height: auto; overflow: visible; }
.feuilles .toile { display: none; }

.feuille {
  position: relative; display: flex; flex-direction: column; min-height: 100svh;
  padding: calc(var(--nav-hauteur) + .75rem) var(--marge) 4.25rem;
}
.feuille--journal { background: var(--papier-journal); }
.feuille--livre { background: var(--papier-livre); }
/* Sans mouvement, le livre et le cahier ne prennent que la place de leur texte. */
html:not(.socle-actif) .feuille--livre,
html:not(.socle-actif) .feuille--cahier { min-height: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.feuille--cahier {
  background-color: var(--papier-cahier);
  background-image:
    linear-gradient(90deg, transparent 39px, var(--seyes-marge) 39px, var(--seyes-marge) 40px, transparent 40px),
    linear-gradient(var(--seyes-fort) 1px, transparent 1px),
    linear-gradient(var(--seyes-ligne) 1px, transparent 1px);
  background-size: 100% 100%, 100% 32px, 100% 8px;
}

/* Avec le mouvement : la scène se fige et les feuilles s'empilent. */
.socle-actif .feuilles { height: var(--longueur, 180svh); }
.socle-actif .feuilles .scene__collant { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.socle-actif .feuilles .toile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.socle-actif .feuille { position: absolute; inset: 0; min-height: 0; }
.socle-actif .feuille--livre, .socle-actif .feuille--cahier { visibility: hidden; }

/* Sans WebGL : la page change par classes, le texte reste lisible. */
.socle-actif .feuilles.est-livre .feuille--livre,
.socle-actif .feuilles.est-cahier .feuille--cahier { visibility: visible; }
.socle-actif .feuilles.est-livre .feuille--journal { visibility: hidden; }
.socle-actif .feuilles.est-cahier .feuille--livre { visibility: hidden; }

/* Avec la toile : tout est imprimé dans les feuilles, le HTML reste pour lire et cliquer. */
.socle-actif .feuilles.toile-prete.imprime .feuille { background: none; }
.socle-actif .feuilles.toile-prete.imprime .feuille--livre,
.socle-actif .feuilles.toile-prete.imprime .feuille--cahier { visibility: hidden; }
.socle-actif .feuilles.toile-prete.imprime.est-partie .feuille--journal { visibility: hidden; }
.socle-actif .feuilles.toile-prete.imprime .feuille--journal { z-index: 1; }
/* Les boutons imprimés restent à l'écran après le départ du journal : les vrais liens, transparents, gardent l'appui. */
.socle-actif .feuilles.toile-prete.imprime.est-partie .feuille--journal .guide__bouton { visibility: visible; opacity: 0; }
.socle-actif .feuilles.toile-prete.imprime.est-livre .feuille--journal .guide__bouton { visibility: hidden; }

/* Le bouton de fin de scène n'existe qu'à la fin de la scène. */
.socle-actif .cahier__suite { visibility: hidden; }
.socle-actif .feuilles.est-fin .feuille--cahier .cahier__suite { visibility: visible; }
.socle-actif .feuilles.toile-prete.imprime.est-fin .feuille--cahier { z-index: 2; }

/* --- Page 1 : la une ----------------------------------------------------- */
.une__haut { display: flex; align-items: center; gap: .75rem; padding-right: 4.5rem; }
.une__surtitre {
  padding: .3rem .6rem; background: var(--accent); color: var(--accent-texte);
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}
.une__lieu { font-size: .875rem; font-weight: 600; color: var(--texte); }
.une__nom {
  font-size: min(29.5vw, 30svh); line-height: 1.02; letter-spacing: -.01em; text-align: center;
  margin-top: .35rem; color: var(--texte);
}
.une__rayons {
  border-top: 4px double var(--encre); border-bottom: 1px solid var(--encre);
  padding: .3rem 0; text-align: center; font-size: .875rem; font-weight: 600; color: var(--texte);
}
.une__corps { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.une__manchette { font-family: var(--titre); font-size: clamp(1.5rem, 7vw, 2.75rem); line-height: 1.12; color: var(--texte); }
.trame { flex: 1 1 0; min-height: 0; width: 100%; height: 0; display: block; }
.feuille--journal .guide { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.feuille--journal .guide__bouton { text-align: center; padding-left: .4rem; padding-right: .4rem; white-space: nowrap; font-size: 1rem; }

/* --- Page 2 : le livre --------------------------------------------------- */
.feuille--livre { padding-right: calc(var(--marge) + 14px); }
.livre__tete { display: flex; justify-content: space-between; gap: 1rem; }
.livre__tete p { padding-bottom: .4rem; border-bottom: 1px solid var(--encre); font-size: .875rem; font-weight: 600; flex: 1 1 auto; }
.livre__tete p + p { text-align: right; }
.livre__texte { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; max-width: 40rem; }
.livre__titre { font-size: clamp(2.25rem, 11vw, 4.5rem); line-height: 1.06; color: var(--texte); }
.livre__para { font-size: 1.125rem; line-height: 1.55; color: var(--texte); }

/* --- Page 3 : le cahier, aligné sur sa réglure --------------------------- */
.feuille--cahier { padding-left: 52px; justify-content: center; gap: 1rem; }
.cahier__titre { font-size: clamp(2.25rem, 10.5vw, 4.5rem); line-height: 1.06; color: var(--accent); }
.cahier__liste { list-style: none; margin: 0; padding: 0; }
.cahier__liste li { font-size: 1.1875rem; font-weight: 500; line-height: 32px; color: var(--texte); }
.cahier__note { font-size: .9375rem; color: var(--texte-doux); }
.cahier__suite { align-self: flex-start; margin: .5rem 0 0; }

/* ------------------------------------------------------------------------ */
/* Les parties                                                                */
/* ------------------------------------------------------------------------ */
main > section:not(.feuilles) { padding: 3.5rem var(--marge); background: var(--sous-fond); color: var(--texte); }
.tete { max-width: 46rem; margin-bottom: 1.75rem; }
.tete__rubrique {
  border-top: 4px double currentColor; border-bottom: 1px solid currentColor; padding: .3rem 0;
  font-size: .875rem; font-weight: 700; margin-bottom: .9rem;
}
.tete__titre { font-size: clamp(2rem, 8.5vw, 3.5rem); line-height: 1.08; }
.mention-exemple { margin-top: .9rem; font-size: .9375rem; font-weight: 600; color: var(--texte); }

/* La corne : le coin de page relevé de la signature, en petit. */
.corne { position: relative; }
.corne::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(225deg, var(--sous-fond) 50%, var(--pli) 50%);
}

/* --- Boutique ------------------------------------------------------------ */
.boutique .carte-resto__onglets { display: flex; gap: .25rem; overflow-x: auto; margin: 0 calc(var(--marge) * -1) 1rem; padding: 0 var(--marge); scrollbar-width: none; border: 0; background: none; }
.boutique .carte-resto__onglets[hidden] { display: none; }
.boutique [role="tab"] {
  flex: none; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--encre); background: transparent;
  color: var(--texte); font: 600 1rem var(--corps); cursor: pointer; border-radius: 0;
}
.boutique [role="tab"][aria-selected="true"] { background: var(--encre); color: var(--papier-cahier); }
.rayon { background: var(--surface); border: 1px solid var(--encre); padding: 1.25rem 1.125rem .5rem; max-width: 70rem; }
.rayon__dessin { width: 96px; height: 64px; fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: block; margin-bottom: .5rem; }
.rayon .carte-resto__categorie { font-family: var(--titre); font-size: 2rem; line-height: 1.1; color: var(--texte); margin-bottom: .5rem; border: 0; padding: 0; }
.rayon .carte-resto__liste { list-style: none; margin: 0; padding: 0; }
.rayon .carte-resto__liste li {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: .75rem; align-items: start;
  padding: .75rem 0; border-top: 1px solid var(--carte-filet);
}
.rayon .carte-resto__liste li strong { grid-column: 1; font-weight: 700; color: var(--texte); }
.rayon .carte-resto__liste li > span { grid-column: 1; font-size: .9375rem; color: var(--texte-doux); }
.article__action { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .6rem; }
.article__prix { font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.article__ajouter {
  min-width: 44px; min-height: 44px; padding: 0 .7rem; border: 0; background: var(--accent); color: var(--accent-texte);
  font: 700 .9375rem var(--corps); cursor: pointer;
}

/* --- Panier : le ticket de caisse sur fond d'encre ----------------------- */
.panier {
  --sous-fond: var(--encre); --texte: var(--papier-cahier); --texte-doux: var(--papier-journal);
  --accent: var(--papier-cahier); --accent-texte: var(--encre); --nav-bord: var(--papier-cahier);
}
.ticket {
  --texte: var(--encre); --texte-doux: #4A463B;
  background: var(--papier-cahier); color: var(--texte); padding: 1.25rem 1.125rem 1.75rem; max-width: 34rem;
  /* Le bord déchiré du ticket. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px));
}
.ticket__lignes { list-style: none; margin: 0; padding: 0; }
.ticket__lignes:empty { display: none; }
.ticket__lignes li { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--encre); }
.ticket__nom { font-weight: 600; }
.ticket__montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__reglage { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; }
.ticket__reglage button {
  min-width: 44px; min-height: 44px; border: 1px solid var(--encre); background: transparent; color: var(--encre);
  font: 600 1rem var(--corps); cursor: pointer;
}
.ticket__reglage output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.ticket__retirer { margin-left: auto; padding: 0 .75rem; }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .9rem; font-weight: 700; }
.ticket__total strong { font-family: var(--titre); font-weight: 400; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.ticket__total[hidden] { display: none; }

/* --- Formulaires --------------------------------------------------------- */
.formulaire {
  --texte: var(--encre); --texte-doux: #4A463B;
  display: grid; gap: 1rem; margin-top: 1.5rem; max-width: 34rem; padding: 1.25rem 1.125rem;
  background: var(--papier-cahier); color: var(--texte); border: 1px solid var(--encre);
}
.formulaire[hidden], .confirmation[hidden], [data-champ-adresse][hidden] { display: none; }
.champ { display: grid; gap: .3rem; }
.champ label, .choix legend { font-weight: 600; }
.champ input {
  width: 100%; min-height: 48px; padding: .6rem .7rem; border: 1px solid var(--encre); border-radius: 0;
  background: var(--blanc); color: var(--encre); font: 400 1rem var(--corps);
}
.champ__erreur { color: var(--bleu); font-size: .9375rem; font-weight: 700; }
.champ--erreur input { border-width: 2px; border-color: var(--bleu); }
.choix { border: 0; margin: 0; padding: 0; display: grid; gap: .25rem; }
.choix label { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.choix input { width: 22px; height: 22px; accent-color: var(--bleu); }
.bouton-plein {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .6rem 1.25rem;
  background: var(--bleu); color: var(--blanc); border: 0; font: 700 1.0625rem var(--corps); text-decoration: none; cursor: pointer;
}
.bouton-plein--clair { background: transparent; color: var(--encre); border: 2px solid var(--encre); }
.confirmation {
  margin-top: 1.5rem; max-width: 34rem; padding: 1.25rem 1.125rem; display: grid; gap: .5rem;
  background: var(--papier-cahier); color: var(--encre); border-left: 6px solid var(--bleu);
}
.confirmation h3 { font-size: 1.5rem; }

/* --- Rentrée : la réglure du cahier ---------------------------------------- */
.carnet {
  --sous-fond: var(--papier-journal);
  max-width: 40rem; padding: 1.25rem 1.125rem 1.25rem 52px; border: 1px solid var(--encre);
  background-color: var(--papier-cahier);
  background-image:
    linear-gradient(90deg, transparent 39px, var(--seyes-marge) 39px, var(--seyes-marge) 40px, transparent 40px),
    linear-gradient(var(--seyes-fort) 1px, transparent 1px),
    linear-gradient(var(--seyes-ligne) 1px, transparent 1px);
  background-size: 100% 100%, 100% 32px, 100% 8px;
}
.niveaux { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.niveaux button {
  flex: 1 1 auto; min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--encre); background: var(--papier-cahier);
  color: var(--encre); font: 600 1rem var(--corps); cursor: pointer;
}
.niveaux button[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.carnet__liste { list-style: none; margin: 0; padding: 0; }
.carnet__liste label { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: .5rem; min-height: 48px; line-height: 1.25; }
.carnet__liste input { width: 22px; height: 22px; margin: 0; accent-color: var(--bleu); }
.carnet__prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carnet__total { display: flex; justify-content: space-between; align-items: baseline; margin: .75rem 0; font-weight: 700; background: var(--papier-cahier); }
.carnet__total strong { font-family: var(--titre); font-weight: 400; font-size: 1.75rem; }
.carnet .bouton-plein { width: 100%; }
.carnet__retour { min-height: 1.5em; margin-top: .5rem; font-weight: 600; background: var(--papier-cahier); }
.carnet__retour:empty { background: none; }

/* --- Commander : le grand aplat bleu stylo -------------------------------- */
.commander {
  --sous-fond: var(--bleu); --texte: var(--blanc); --texte-doux: var(--blanc);
  --accent: var(--blanc); --accent-texte: var(--bleu); --nav-bord: var(--blanc); --pli: var(--bleu-clair);
}

/* --- Comptoir ------------------------------------------------------------- */
.tarifs { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.tarifs li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--encre); }
.tarifs li:last-child { border-bottom: 1px solid var(--encre); }
.tarifs strong { font-weight: 700; }
.tarifs span { grid-column: 1; font-size: .9375rem; color: var(--texte-doux); }
.tarifs em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trois { max-width: 46rem; margin-top: 2rem; }
.trois__titre { font-weight: 700; margin-bottom: .4rem; }

/* --- Infos ---------------------------------------------------------------- */
.infos { --sous-fond: var(--papier-livre); }
.infos__grille { display: grid; gap: 1.5rem; }
.infos__bloc { display: grid; gap: .6rem; align-content: start; justify-items: start; padding: 1.25rem 1.125rem; border: 1px solid var(--encre); background: var(--papier-cahier); }
.infos__bloc h3 { font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.infos__bloc h3:not(:first-child) { margin-top: .9rem; }
.pastille { padding: .15rem .5rem; background: var(--bleu); color: var(--blanc); font: 700 .8125rem var(--corps); }
.lien-texte { color: var(--encre); font-weight: 700; display: inline-block; min-height: 44px; padding: .55rem 0; }
.horaires { border-collapse: collapse; width: 100%; }
.horaires th, .horaires td { padding: .55rem 0; border-top: 1px solid var(--encre); text-align: left; font-weight: 400; }
.horaires td { text-align: right; font-weight: 600; }
.carte-google { display: block; width: 100%; height: 340px; margin-top: 1.5rem; border: 1px solid var(--encre); background: var(--papier-journal); }

/* --- Pied ----------------------------------------------------------------- */
.pied { padding: 2.5rem var(--marge) 5.5rem; background: var(--encre); color: var(--papier-cahier); }
.pied__nom { font-family: var(--titre); font-size: 3rem; line-height: 1.1; margin-bottom: .5rem; }

/* Largeur de bureau : la une se compose en colonnes. */
@media (min-width: 900px) {
  .une__rayons { font-size: 1rem; }
  .une__corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; column-gap: 2.5rem; row-gap: 1rem; }
  .une__manchette { grid-column: 1; align-self: center; font-size: clamp(2rem, 5.5svh, 3.5rem); }
  .feuille--journal .guide { grid-column: 1; grid-row: 2; }
  .trame { grid-column: 2; grid-row: 1 / span 2; height: 100%; }
  .boutique .carte-resto__liste { columns: 2; column-gap: 3rem; }
  .rayon .carte-resto__liste li { break-inside: avoid; }
  .infos__grille { grid-template-columns: 1fr 1fr; max-width: 70rem; }
  .carte-google { max-width: 70rem; }
  .panier { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 34rem); column-gap: 2.5rem; align-items: start; }
  .panier > .tete, .panier > .suite { grid-column: 1 / -1; }
  .panier .formulaire, .panier .confirmation { margin-top: 0; }
}

/* Écran bas : la trame cède sa place, jamais les boutons. */
@media (max-height: 620px) {
  .feuille { padding-bottom: 3.75rem; }
  .une__nom { font-size: min(24vw, 26svh); }
  .une__manchette { font-size: 1.375rem; }
}