/* ==========================================================================
   Le 8 — café-épicerie · Château-Arnoux-Saint-Auban
   Feuille de style de la maquette.
   Le site est un cahier d'écolier : papier Seyès, encre, crayon.
   Les trois écritures sont relevées sur la carte de l'établissement.
   Parti pris assumé : une seule ambiance, claire, quel que soit le
   réglage du lecteur — d'où le color-scheme verrouillé sur light.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. La cursive de la maison
   --------------------------------------------------------------------------
   Old French School Bold — JB Foundry.

   ⚠ LICENCE À RÉGLER AVANT MISE EN LIGNE.
   Le fichier vient d'exfont.com, qui l'annonce « free for personal use ».
   Sa chaîne de version dit autre chose :
       com.myfonts.easy.jbfoundry.old-french-school.bold.wfkit2...
   « wfkit2 » = kit webfont MyFonts, c'est-à-dire un fichier issu d'une
   licence payante, redistribué. Il convient pour la maquette ; pour le
   site en production il faut acheter la licence web auprès de JB Foundry
   via MyFonts. Voir le README.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Old French School";
  src: url("../fonts/old-french-school-bold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Pas d'ellipse dans la fonte : on la laisse au repli. */
  unicode-range: U+0000-2025, U+2027-FFFF;
}

/* --------------------------------------------------------------------------
   1. Jetons — palette relevée sur le logo et la carte de l'établissement
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Papiers */
  --papier:        #FBEBD2;   /* le papier de la carte */
  --papier-clair:  #FFF9EE;   /* les pages du cahier */
  --papier-chaud:  #F6DFBE;   /* replis, bandeaux */

  /* Encres */
  --encre:         #17120E;
  --encre-douce:   #4A3D2E;
  --encre-pale:    #8C7C62;

  /* Couleurs de la maison */
  --jaune:         #F3C543;   /* le disque du logo */
  --jaune-clair:   #FBE08B;
  --rouge:         #E05038;   /* l'anneau du logo */
  --olive:         #6E7F4F;   /* l'épicerie, le frais */

  /* Réglure Seyès */
  --seyes-fort:    #BFAEDB;
  --seyes-fin:     #DCD2EC;
  --seyes-marge:   #A8C6E2;
  --seyes-rouge:   #E9B4A8;

  /* Traits et ombres */
  --trait:         #E0CBA8;
  --ombre-papier:  0 1px 0 rgba(23,18,14,.06), 0 12px 28px -18px rgba(23,18,14,.45);
  --ombre-levee:   0 2px 0 rgba(23,18,14,.08), 0 26px 44px -24px rgba(23,18,14,.5);

  /* Rythme */
  --gouttiere:     clamp(1rem, 4vw, 2.5rem);
  --large:         74rem;
  --lecture:       36rem;

  /* Fontes — relevées sur la carte de l'établissement, qui en compte trois :
     une cursive bouclée pour le chapeau, une ronde d'écolier pour les
     intitulés, un feutre gras pour les étiquettes jaunes. */
  --cursive: "Old French School", "Segoe Script", "Snell Roundhand", cursive;
  --ronde:   "Edu QLD Beginner", "Comic Sans MS", var(--cursive);
  --feutre:  "Permanent Marker", "Segoe Print", "Chalkboard", sans-serif;
  --texte:   "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Socle
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

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

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement */
.saut {
  position: absolute;
  left: var(--gouttiere);
  top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--encre);
  color: var(--papier);
  padding: .6rem 1rem;
  border-radius: 0 0 .6rem .6rem;
  font-family: var(--texte);
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease;
}
.saut:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Le papier — grain, réglure Seyès, marge rouge
   -------------------------------------------------------------------------- */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
}
/* Réglure Seyès : interligne 8 mm, quatre lignes, plus les verticales. */
.seyes {
  --pas: 40px;
  background-color: var(--papier-clair);
  background-image:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--seyes-fort) 52%, transparent) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--seyes-fin) 42%, transparent) 0 1px, transparent 1px calc(var(--pas) / 4)),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--seyes-marge) 26%, transparent) 0 1px, transparent 1px var(--pas));
}
@media (max-width: 40rem) { .seyes { --pas: 56px; } }

/* Le filet rouge de la marge, à gauche comme sur un vrai cahier. */
.marge { position: relative; }
.marge::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(1rem, 6vw, 4rem);
  width: 2px;
  background: var(--seyes-rouge);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
.ecriture {
  font-family: var(--cursive);
  font-weight: 400;
  line-height: 1.5;           /* Ses hampes montent et descendent très
                                 loin : en deçà, le t d'une ligne va
                                 cogner la ligne du dessus. */
  letter-spacing: .004em;
  text-wrap: balance;
  margin: 0;
}

h1.ecriture { font-size: clamp(2.5rem, 1.45rem + 5.2vw, 5.4rem); }
h2.ecriture { font-size: clamp(2rem, 1.4rem + 2.9vw, 3.5rem); }
h3.ecriture { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem); }

.chapo {
  font-family: var(--ronde);
  font-size: clamp(1.2rem, 1.02rem + .78vw, 1.6rem);
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: var(--lecture);
  margin: 0;
}

p { max-width: var(--lecture); }

/* L'étiquette jaune des rubriques de la carte. */
/* Old French School a des capitales à swashes qui se recouvrent :
   tout ce qui est en majuscules reste au feutre. */
.etiquette {
  display: inline-block;
  font-family: var(--feutre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.05rem, .9rem + .75vw, 1.5rem);
  line-height: 1.45;          /* Permanent Marker monte haut ; en deçà,
                                 le conteneur multi-colonnes rogne B, I et G */
  color: var(--encre);
  background: var(--jaune);
  padding: .34em .7em .42em;
  border-radius: .55em .7em .5em .65em / .9em .6em .8em .55em;
  transform: rotate(-1.4deg);
  box-shadow: 0 2px 0 rgba(23,18,14,.14);
}
/* Permanent Marker trace son esperluette comme un « + ». On prend
   celle de la cursive, qui en a une vraie, légèrement agrandie pour
   tenir la même densité que les capitales au feutre. */
.eperluette {
  font-family: var(--cursive);
  font-size: 1.24em;
  line-height: 1;
  letter-spacing: 0;
  padding-inline: .05em;
  text-transform: none;
}

/* Le surlignage au feutre jaune, tracé d'un geste. */
.surligne {
  padding-inline: .1em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background-image: linear-gradient(var(--jaune), var(--jaune));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: calc(var(--trace, 1) * 100%) .48em;
}
.surligne.rouge {
  background-image: linear-gradient(
    color-mix(in srgb, var(--rouge) 34%, transparent),
    color-mix(in srgb, var(--rouge) 34%, transparent));
}

/* Petite mention manuscrite à la marge. */
.annotation {
  font-family: var(--cursive);
  font-size: 1.35rem;
  color: var(--rouge);
  line-height: 1.32;
  transform: rotate(-3deg);
  display: inline-block;
}

.mot-cle { color: var(--rouge); }

/* Filet en pointillés orange, comme les séparateurs de la carte. */
.pointilles {
  border: 0;
  border-top: 2px dashed var(--rouge);
  opacity: .5;
  margin: 1.6rem 0;
}

/* --------------------------------------------------------------------------
   5. L'écriture au crayon (masque révélé + crayon qui suit la pointe)
   -------------------------------------------------------------------------- */
/* La cursive espace très largement entre les mots. Sur le papier c'est
   juste, à l'écran c'est trop aéré : on resserre partout où elle sert. */
.ecriture,
.marque,
.epingle,
.annotation,
.manifeste p,
.manifeste .cloture,
.pied .signature,
.tiroir a {
  word-spacing: -.13em;
}

.ligne {
  display: block;
  position: relative;
}
.ecrire { display: inline-block; }

/* Au repos, tout est lisible : le masque n'est posé que si le script tourne. */
html.js .ecrire[data-anim] {
  -webkit-mask-image: linear-gradient(90deg,
      #000 0 calc(var(--p, 1) * 100%),
      rgba(0,0,0,.45) calc(var(--p, 1) * 100% + 5px),
      transparent calc(var(--p, 1) * 100% + 15px));
          mask-image: linear-gradient(90deg,
      #000 0 calc(var(--p, 1) * 100%),
      rgba(0,0,0,.45) calc(var(--p, 1) * 100% + 5px),
      transparent calc(var(--p, 1) * 100% + 15px));
  /* Agrandir le masque ne suffit pas : mask-clip vaut border-box par
     défaut, et rogne le rendu à la boîte quelle que soit la taille du
     masque. D'où les boucles hautes coupées. Deux parades cumulées :

     1. mask-clip: no-clip, là où le navigateur le connaît ;
     2. de la marge intérieure verticale sur la boîte, annulée par une
        marge extérieure négative. La boîte englobe alors l'encre sans
        rien déplacer dans la page — et ça, tous les navigateurs le
        comprennent.
     Le dégradé ne variant qu'en x, l'étirer verticalement est gratuit. */
  padding-block: .62em .62em;
  margin-block: -.62em -.62em;
  -webkit-mask-clip: no-clip;        mask-clip: no-clip;
  -webkit-mask-size: 100% 400%;      mask-size: 100% 400%;
  -webkit-mask-position: 0 50%;      mask-position: 0 50%;
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
}

.crayon {
  position: absolute;
  bottom: -.14em;
  width: clamp(2.1rem, 5vw, 3.1rem);
  height: auto;
  transform: translate(-14%, 8%) rotate(4deg);
  transform-origin: 10% 90%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  will-change: left, opacity;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(23,18,14,.22));
}
.crayon.ecrit-la { opacity: 1; }

/* Les traits dessinés qui se tracent au scroll. */
.trace-moi path,
.trace-moi line,
.trace-moi circle,
.trace-moi polyline { vector-effect: non-scaling-stroke; }

/* --------------------------------------------------------------------------
   6. Bandeau de navigation
   -------------------------------------------------------------------------- */
.bandeau {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.bandeau.pose { border-bottom-color: var(--trait); }

.bandeau-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding-block: .55rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-family: var(--cursive);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  margin-right: auto;
}
.marque .logo { width: 2.7rem; height: 2.7rem; flex: none; }
.marque .sous { font-family: var(--texte); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-pale); display: block; margin-top: .2rem; }

.menu-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem);
  list-style: none;
  margin: 0; padding: 0;
}
.menu-nav a {
  font-family: var(--ronde);
  font-size: 1.2rem;
  text-decoration: none;
  padding: .25rem 0;
  position: relative;
  white-space: nowrap;
}
.menu-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.1rem;
  height: 3px;
  background: var(--jaune);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.menu-nav a:hover::after,
.menu-nav a:focus-visible::after,
.menu-nav a[aria-current="true"]::after { transform: scaleX(1); }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--texte);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  color: #17120E;
  background: var(--jaune);
  border: 2px solid var(--encre);
  border-radius: 2rem 1.6rem 2.2rem 1.7rem / 1.8rem 2.2rem 1.6rem 2rem;
  padding: .6rem 1.15rem;
  box-shadow: 3px 3px 0 var(--encre);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.bouton:hover, .bouton:focus-visible { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.bouton.fantome { background: transparent; color: var(--encre); box-shadow: 3px 3px 0 var(--trait); }
.bouton.fantome:hover { box-shadow: 5px 5px 0 var(--trait); }

.brule-nav { display: none; }

@media (max-width: 52rem) {
  .libelle-bouton { display: none; }
  .bandeau .bouton { padding: .6rem .75rem; }
  .marque { font-size: 1.3rem; }
  .marque .logo { width: 2.3rem; height: 2.3rem; }
  .marque .sous { font-size: .55rem; letter-spacing: .12em; }
}

@media (max-width: 62rem) {
  .menu-nav { display: none; }
  .brule-nav {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 3rem; height: 3rem;
    padding: 0;
    background: transparent;
    border: 2px solid var(--encre);
    border-radius: 1rem .8rem 1.1rem .9rem;
    cursor: pointer;
  }
  .brule-nav span {
    display: block;
    height: 2.5px;
    width: 1.4rem;
    margin-inline: auto;
    border-radius: 3px;
    background: var(--encre);
    transition: transform .2s ease, opacity .2s ease;
  }
  .brule-nav[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(-6deg); }
  .brule-nav[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .brule-nav[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(5deg); }

  .tiroir {
    border-top: 2px dashed var(--trait);
    padding-block: 1rem 1.4rem;
  }
  .tiroir ul {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  .tiroir a {
    display: block;
    font-family: var(--cursive);
    font-size: 1.9rem;
    text-decoration: none;
    padding: .25rem 0;
  }
}
@media (min-width: 62.0625rem) { .tiroir { display: none !important; } }

/* --------------------------------------------------------------------------
   7. La page d'ouverture
   -------------------------------------------------------------------------- */
.ouverture {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem);
}

.ouverture-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 58rem) {
  .ouverture-grille { grid-template-columns: 1fr; }
}

.ouverture h1 { margin-bottom: 1.9rem; }
.ouverture h1 .ligne:nth-child(2) { padding-left: clamp(.5rem, 4vw, 3rem); }
.ouverture h1 .ligne:nth-child(3) { padding-left: clamp(.25rem, 2vw, 1.5rem); }

.sur-titre {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--texte);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 2.4rem;
}
.sur-titre::before {
  content: "";
  width: 2.2rem; height: 2px;
  background: var(--rouge);
}

.ouverture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.blason {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.8rem .5rem 3.4rem;
}
.blason .disque { width: min(70vw, 19rem); height: auto; }

/* Les petits mots épinglés autour du logo. */
.epingle {
  position: absolute;
  font-family: var(--cursive);
  font-size: clamp(.9rem, .5rem + .85vw, 1.25rem);
  line-height: 1.38;
  color: var(--encre);
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: .9rem .6rem 1rem .7rem;
  padding: .35rem .8rem;
  box-shadow: 3px 3px 0 var(--encre);
  white-space: nowrap;
}
.epingle.un   { top: 0;    left: -1%;  transform: rotate(-7deg); }
.epingle.deux { bottom: 0; right: -1%; transform: rotate(6deg); background: var(--jaune); color: #17120E; }
@media (max-width: 30rem) {
  .epingle { padding: .28rem .55rem; }
}

.filons {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--ronde);
  color: var(--encre-pale);
  font-size: 1.05rem;
}
.filons svg { width: 1.5rem; height: 1.5rem; }

/* --------------------------------------------------------------------------
   8. Rubriques
   -------------------------------------------------------------------------- */
.rubrique {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.rubrique + .rubrique { border-top: 2px dashed var(--trait); }

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.entete .titrage { max-width: 46rem; }
.entete h2 { margin-bottom: 1.1rem; }

/* Le manifeste, recopié de la carte. */
.manifeste {
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 1.4rem 2rem 1.5rem 2.2rem / 2rem 1.4rem 2.2rem 1.5rem;
  box-shadow: var(--ombre-papier);
  padding: clamp(1.6rem, 4vw, 3rem);
  position: relative;
}
.manifeste p {
  font-family: var(--cursive);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.28;
  max-width: 24ch;
  margin: 0;
}
.manifeste .cloture {
  font-family: var(--cursive);
  color: var(--rouge);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  display: block;
  margin-top: .8rem;
}

.paire {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 54rem) { .paire { grid-template-columns: 1fr; } }

/* Les vignettes de valeurs. */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.vignette {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.5rem 1.4rem 1.7rem;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 1.2rem 1.6rem 1.1rem 1.8rem / 1.7rem 1.1rem 1.9rem 1.2rem;
  box-shadow: var(--ombre-papier);
}
.vignette svg { width: 3.4rem; height: 3.4rem; }
.vignette h3 { margin: 0; }
.vignette p { margin: 0; font-size: .97rem; color: var(--encre-douce); max-width: none; }

/* --------------------------------------------------------------------------
   9. La carte
   -------------------------------------------------------------------------- */
.carte { background: var(--papier-chaud); }

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
}
.onglet {
  font-family: var(--feutre);
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(.82rem, .74rem + .35vw, 1rem);
  line-height: 1.35;
  color: var(--encre);
  background: transparent;
  border: 2px solid var(--encre);
  border-radius: 1.3rem .9rem 1.5rem 1rem / 1rem 1.5rem .9rem 1.4rem;
  padding: .5rem 1.1rem .6rem;
  cursor: pointer;
  transition: background .18s ease, transform .14s ease, box-shadow .14s ease;
}
.onglet:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--encre); }
.onglet[aria-selected="true"] {
  background: var(--jaune);
  color: #17120E;
  box-shadow: 3px 3px 0 var(--encre);
}

.feuille {
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: .6rem 1.4rem .7rem 1.5rem / 1.4rem .6rem 1.5rem .7rem;
  box-shadow: var(--ombre-levee);
  padding: clamp(1.3rem, 3.5vw, 2.6rem);
}
.feuille[hidden] { display: none !important; }

.colonnes {
  column-width: 21rem;
  column-gap: clamp(1.8rem, 4vw, 3.2rem);
}
.bloc {
  break-inside: avoid;
  margin-bottom: 2.2rem;
}
.bloc > .etiquette { margin-bottom: 1rem; }

.plats { list-style: none; margin: 0; padding: 0; }
.plat {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .42rem 0;
  position: relative;
}
.plat + .plat { border-top: 1px dotted var(--trait); }
.plat .nom {
  font-family: var(--ronde);
  font-size: 1.32rem;
  position: relative;
  z-index: 1;
}
.plat .fuite {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--trait);
  transform: translateY(-.28em);
}
.plat .prix {
  font-family: var(--ronde);
  font-weight: 600;
  font-size: 1.18rem;
  white-space: nowrap;
}
.plat .detail {
  display: block;
  font-family: var(--ronde);
  font-size: .98rem;
  line-height: 1.4;
  color: var(--encre-pale);
  max-width: 34ch;
}
/* Le coup de surligneur au survol. */
.plat .nom {
  background-image: linear-gradient(var(--jaune), var(--jaune));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% .5em;
  transition: background-size .24s cubic-bezier(.4,.9,.3,1);
}
.plat:hover .nom,
.plat:focus-within .nom { background-size: 100% .5em; }

.sous-titre-carte {
  font-family: var(--feutre);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 1.3rem 0 .3rem;
}

.mention-carte {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 2px dashed var(--rouge);
  font-family: var(--ronde);
  font-size: 1.05rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   10. Le coin des minots
   -------------------------------------------------------------------------- */
.minots { position: relative; overflow: hidden; }

.ardoise-enfant {
  position: relative;
  border: 2px solid var(--encre);
  border-radius: 1rem 1.6rem 1.1rem 1.7rem / 1.6rem 1rem 1.8rem 1.1rem;
  box-shadow: var(--ombre-levee);
  overflow: hidden;
  background: var(--papier-clair);
}
.ardoise-enfant canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  touch-action: none;
  cursor: crosshair;
  max-width: 100%;
}

.trousse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .75rem .9rem;
  background: var(--papier-chaud);
  border-top: 2px dashed var(--trait);
}
.trousse .libelle {
  font-family: var(--ronde);
  font-size: 1rem;
  color: var(--encre-douce);
  margin-right: auto;
}
.craie {
  width: 2.1rem; height: 2.1rem;
  padding: 0;
  border: 2px solid var(--encre);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .14s ease;
}
.craie:hover { transform: scale(1.12) rotate(-6deg); }
.craie[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--papier-clair), 0 0 0 5px var(--encre); }

/* --------------------------------------------------------------------------
   11. Épicerie
   -------------------------------------------------------------------------- */
.etals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(.9rem, 2vw, 1.5rem);
}
.etal {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.2rem;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 1.1rem 1.5rem 1rem 1.6rem / 1.5rem 1rem 1.7rem 1.1rem;
}
.etal svg { width: 2.5rem; height: 2.5rem; flex: none; }
.etal span { font-family: var(--ronde); font-size: 1.12rem; line-height: 1.3; }

/* --------------------------------------------------------------------------
   12. Infos pratiques
   -------------------------------------------------------------------------- */
.infos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.fiche {
  padding: 1.5rem 1.4rem;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  border-radius: 1.2rem 1.7rem 1.1rem 1.6rem / 1.6rem 1.1rem 1.8rem 1.2rem;
  box-shadow: var(--ombre-papier);
}
.fiche h3 { margin: 0 0 .5rem; }
.fiche p, .fiche address {
  margin: 0;
  font-style: normal;
  font-size: 1rem;
  color: var(--encre-douce);
  max-width: none;
}
.fiche a { font-weight: 700; }

.horaires { list-style: none; margin: .2rem 0 0; padding: 0; }
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  font-size: .98rem;
}
.horaires li + li { border-top: 1px dotted var(--trait); }
.horaires .jour { font-family: var(--ronde); font-size: 1.1rem; }
.horaires .heure { font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.horaires li.ferme .heure { color: var(--rouge); font-weight: 700; }

.a-verifier {
  display: inline-block;
  font-family: var(--texte);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge);
  border: 1.5px dashed var(--rouge);
  border-radius: .5rem;
  padding: .1rem .45rem;
  margin-left: .4rem;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--jaune);
  color: var(--encre);
  border-top: 3px solid var(--encre);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.pied a { color: var(--encre); text-underline-offset: 3px; }
.logo-pied { width: clamp(4.5rem, 11vw, 6.5rem); height: auto; }
.pied .enveloppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.pied .signature {
  font-family: var(--cursive);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.1;
  margin: 0;
}
.pied .mentions {
  font-size: .86rem;
  color: color-mix(in srgb, var(--encre) 74%, transparent);
  max-width: 28rem;
}

/* --------------------------------------------------------------------------
   14. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .ecrire[data-anim] {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .crayon { display: none !important; }
  .surligne { background-size: 100% .48em !important; }
}