/* =============================================================================
   LE FOURNIL — les composants : l'en-tête, le premier écran, le pied de page.
   Tout vient de tokens.css.
   ============================================================================= */

/* =============================================================================
   L'EN-TÊTE

   LA MÉCANIQUE, reprise du mockup de Codex (2026-08-03) parce qu'elle est
   plus juste que la mienne, et elle tient en trois lignes :

     · l'en-tête FLOTTE à quelques pixels du bord ;
     · la capsule est DÉCALÉE vers le bas de la part visible de la languette ;
     · au défilement, l'en-tête remonte à 0 ET le décalage s'annule.

   Résultat : la capsule vient se coller au bord en RECOUVRANT la languette.
   Celle-ci n'a aucune animation propre, elle se fait avaler. C'est tout le
   geste, et c'est ce que je n'avais pas compris : je faisais disparaître la
   languette en la translatant, sans jamais faire remonter le menu.

   La transition est LONGUE (450 ms) : à 180 ms le mouvement passait inaperçu.

   SANS JavaScript : l'en-tête reste dans le flux, tout est lisible, rien ne
   bouge.
   ============================================================================= */

.fo-entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  border: 0;
}

.fo-entete {
  --fo-languette-vue: 27px;   /* la MOITIÉ de la pilule, celle qui dépasse */
}

.fo-entete-cadre {
  position: relative;
  /* flow-root : sans lui, la marge haute de la capsule S'ÉCHAPPE du cadre
     (effondrement des marges) et emporte la languette avec elle, qui
     disparaît alors complètement. */
  display: flow-root;
  /* La part VISIBLE de la languette au repos : c'est ELLE qui décale la
     capsule, et son annulation qui produit le mouvement. */
  --fo-languette-vue: 27px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--fo-e-4));
  margin-inline: auto;
}

.fo-entete-barre {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--fo-e-5);
  margin-top: var(--fo-languette-vue);
  min-height: var(--fo-menu-h);
  padding-inline: var(--fo-e-4);
  background: color-mix(in srgb, var(--fo-carte) 95%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--fo-croute) 20%, transparent);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(42, 31, 23, .05), 0 14px 36px rgba(42, 31, 23, .10);
  transition: margin-top .45s cubic-bezier(.22, .7, .25, 1),
              border-radius .45s cubic-bezier(.22, .7, .25, 1),
              box-shadow .45s cubic-bezier(.22, .7, .25, 1);
}

/* ── La marque, au centre ── */
.fo-marque { display: block; text-align: center; text-decoration: none; white-space: nowrap; }
.fo-marque-nom {
  display: block;
  font-family: var(--fo-titre);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}
.fo-marque-logo { max-height: 44px; width: auto; }

/* ── Les deux navigations, serrées contre le logo ── */
/* LE DÉFILEMENT HORIZONTAL ROGNE AUSSI LA VERTICALE : en CSS, dès qu'un axe
   n'est plus « visible », l'autre passe en « auto ». La pastille du panier,
   qui déborde du lien en haut et à droite, se retrouvait donc coupée net
   (constaté par Jonas, 2026-08-04). On agrandit la boîte de ce qu'elle
   déborde, et on annule l'agrandissement par une marge négative : la
   mise en page ne bouge pas, la pastille tient dedans. */
/* LE DÉFILEMENT NE VIT QUE SUR PETIT ÉCRAN. Sur grand écran il rognait tout
   ce qui déborde de la nav : la pastille du panier d'abord, puis le panneau
   du panier au survol, qui fait trois cents pixels de haut. Et il n'y sert à
   rien — c'est en dessous de 980 px que le menu peut manquer de place, et là
   le panneau n'existe pas (il est masqué au doigt). */
.fo-nav { min-width: 0; scrollbar-width: none; }
@media (max-width: 980px) {
  .fo-nav {
    overflow-x: auto;
    /* La pastille déborde du lien : on agrandit la boîte de ce qu'elle
       déborde et on annule par une marge négative. */
    padding: 8px 10px;
    margin: -8px -10px;
  }
}
.fo-nav::-webkit-scrollbar { display: none; }
.fo-nav-g { justify-self: end; }
.fo-nav-d { justify-self: start; }

.fo-nav-liste {
  display: flex;
  align-items: center;
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-nav-item { flex: 0 0 auto; }

.fo-nav-lien {
  position: relative;
  display: inline-block;
  padding: var(--fo-e-2) 0;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fo-transition);
}
.fo-nav-lien::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--fo-braise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.16, .8, .3, 1);
}
.fo-nav-lien:hover { color: var(--fo-txt); }
.fo-nav-lien:hover::after { transform: scaleX(1); }
.fo-nav-lien[aria-current="page"] { color: var(--fo-txt); }
.fo-nav-lien[aria-current="page"]::after { transform: scaleX(1); }

.fo-panier-lien {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--fo-txt);
  border-radius: 999px;
  transition: background var(--fo-transition);
}
.fo-panier-lien:hover { background: var(--fo-croute-voile); }
.fo-picto { width: 21px; height: 21px; }

.fo-panier-pastille {
  position: absolute;
  top: -1px; right: -3px;
  min-width: 17px; height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--fo-braise);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}

/* ── LA LANGUETTE : posée en haut, DERRIÈRE la capsule. Aucune animation
   propre : elle se fait recouvrir, et c'est ça le mouvement. ── */
.fo-languette {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92%;
  margin: 0;
  /* UNE PILULE ENTIÈRE dont la MOITIÉ BASSE passe sous la capsule. L'arrondi
     des extrémités est donc juste par construction, au lieu d'être dessiné à
     la main (astuce de Jonas, 2026-08-03). Sa hauteur vaut exactement le
     double de la part visible. */
  display: grid;
  /* Le texte vit dans la MOITIÉ HAUTE, la seule visible : centré sur la
     hauteur totale, il serait coupé en deux par la capsule. */
  align-content: start;
  justify-items: center;
  height: calc(var(--fo-languette-vue) * 2);
  padding-top: 6px;
  padding-inline: clamp(var(--fo-e-5), 4vw, var(--fo-e-7));
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
}

/* ── AU DÉFILEMENT ──
   L'en-tête remonte se coller au bord, ET la capsule perd son décalage :
   les deux mouvements ensemble donnent l'impression qu'elle avale la
   languette. Les coins hauts se posent à plat, les coins bas ne bougent pas. */
.fo-js .fo-entete {
  position: fixed;
  left: 0; right: 0;
  top: var(--fo-e-3);
  transition: top .45s cubic-bezier(.22, .7, .25, 1);
}
.fo-js .fo-entete.fo-compact { top: 0; }
.fo-js .fo-entete.fo-compact .fo-entete-barre {
  margin-top: 0;
  /* 46px FIXES, pas 999px : sur une boîte de 86 px de haut, 999px est
     ramené à 86px par le navigateur et l'arrondi du bas GROSSIT. C'est
     très exactement ce qui faisait que « ce ne sont pas les mêmes angles ». */
  border-radius: 0 0 46px 46px;
  border-top-color: transparent;
  box-shadow: 0 2px 6px rgba(42, 31, 23, .06), 0 18px 40px rgba(42, 31, 23, .16);
}

@media (prefers-reduced-motion: reduce) {
  .fo-js .fo-entete, .fo-entete-barre { transition: none; }
}

@media (max-width: 980px) {
  .fo-entete-barre {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--fo-e-2);
    padding-block: var(--fo-e-3);
    border-radius: var(--fo-rayon-2);
  }
  .fo-nav-g, .fo-nav-d { justify-self: center; max-width: 100%; }
  .fo-nav-liste { gap: var(--fo-e-3); }
  .fo-languette { max-width: 96%; }
}

/* =============================================================================
   LE PREMIER ÉCRAN

   RÈGLE : il tient ENTIER dans la hauteur de la fenêtre, bandeau compris.
   D'où une hauteur bornée et des tailles qui suivent la place disponible
   (vh) autant que la largeur (vw).
   ============================================================================= */

.fo-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(120px, 15vh, 170px) clamp(110px, 14vh, 150px);
  background: var(--fo-fond);
  overflow: hidden;
  isolation: isolate;
}

.fo-hero-grille {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(var(--fo-e-4), 4vw, var(--fo-e-6));
}

.fo-hero-contenu { position: relative; z-index: 2; }

/* Le titre : TROIS lignes, taille menée par la hauteur autant que par la
   largeur pour ne jamais déborder de l'écran. */
.fo-hero-titre {
  font-size: clamp(2.8rem, min(6.4vw, 9.4vh), 5.6rem);
  line-height: .98;
  color: var(--fo-txt);
  /* La largeur qui donne TROIS lignes. En `ch`, c'est-à-dire en largeur du
     chiffre zéro DE LA POLICE COURANTE : la valeur était calibrée à 9ch pour
     Georgia, et le passage à Fraunces l'a rendue trop étroite — « Le bon
     pain » se coupait après « bon » et le titre tombait à quatre lignes.
     Toute nouvelle police oblige à revérifier cette valeur. */
  max-width: 11.5ch;
  margin-bottom: var(--fo-e-4);
}

/* Le mot d'accent : italique et couleur. Aucun trait, aucun ornement. */
.fo-accent {
  font-style: italic;
  color: var(--fo-braise);
}

.fo-hero-lead {
  font-size: clamp(.98rem, 1.15vw, var(--fo-t-m));
  line-height: 1.6;
  color: var(--fo-txt-2);
  max-width: 38ch;
}

.fo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-3);
  margin-top: clamp(var(--fo-e-4), 3.4vh, var(--fo-e-5));
}

/* ── LA SCÈNE : trois objets indépendants, chacun à son rythme ──
   Pas de fond plein derrière les pains (le halo a été retiré) : un semis de
   points très pâle suffit à les détacher, sans qu'on remarque le procédé. */
.fo-hero-scene {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  max-height: 66vh;
  justify-self: center;
  width: 100%;
}

.fo-hero-semis {
  position: absolute;
  inset: 4%;
  border-radius: 999px;
  background-image: radial-gradient(color-mix(in srgb, var(--fo-croute) 34%, transparent) 1.4px, transparent 1.5px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 32%, transparent 71%);
          mask-image: radial-gradient(circle at 50% 50%, #000 32%, transparent 71%);
  opacity: .75;
}

/* 1. les pains : ils occupent vraiment la place et respirent lentement */
.fo-hero-pains {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 104%;
}
.fo-hero-pains img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 38px rgba(42, 31, 23, .30));
  animation: fo-respire 7s ease-in-out infinite;
}
@keyframes fo-respire {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

/* 2. la pastille : posée SUR le pain, son anneau pointillé tourne autour */
.fo-pastille {
  position: absolute;
  z-index: 4;
  top: 8%; right: 6%;
  width: clamp(116px, 13.5vw, 152px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 3px;
  text-align: center;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(42, 31, 23, .28);
  animation: fo-flotte-a 5.5s ease-in-out infinite;
}
@keyframes fo-flotte-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.fo-pastille-anneau {
  position: absolute;
  inset: -11px;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--fo-braise) 55%, transparent);
  animation: fo-tourne 22s linear infinite;
}
@keyframes fo-tourne { to { transform: rotate(360deg); } }

.fo-pastille-chiffre {
  font-family: var(--fo-titre);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.fo-pastille-texte {
  max-width: 8ch;
  margin-inline: auto;
  font-size: .5625rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
}

/* 3. la vignette cerclée de blanc, qui flotte à contretemps */
.fo-vignette {
  position: absolute;
  z-index: 4;
  left: 0; bottom: 8%;
  width: clamp(124px, 15vw, 168px);
  margin: 0;
  animation: fo-flotte-b 6.4s ease-in-out infinite;
}
@keyframes fo-flotte-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.fo-vignette img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  border: 6px solid var(--fo-fond);
  box-shadow: 0 16px 36px rgba(42, 31, 23, .22);
}
.fo-vignette-mot {
  margin-top: var(--fo-e-2);
  padding: 5px 11px;
  background: var(--fo-carte);
  border-radius: 999px;
  box-shadow: var(--fo-ombre);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fo-txt);
  text-align: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .fo-hero-pains img, .fo-pastille, .fo-vignette, .fo-pastille-anneau { animation: none; }
}

/* =============================================================================
   LE BANDEAU DU PREMIER ÉCRAN
   Il n'est plus figé : un liseré aux couleurs de Sillon le traverse en
   continu, et ses informations arrivent l'une après l'autre au chargement.
   ============================================================================= */

.fo-bandeau {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(160deg, #35271C 0%, var(--fo-fond-3) 55%, #1F1710 100%);
  color: var(--fo-txt-clair);
  overflow: hidden;
}

/* Le filet du haut reprend LA GRIGNE, notre motif. Le dégradé orange vers
   rose est la signature de SILLON : il appartient à la barre d'aperçu, pas
   au site du client. */
/* Pas de filet sur le bord haut : essayé en grigne, jugé sale (Jonas,
   2026-08-03). Le bandeau se suffit de son dégradé. */

.fo-bandeau-grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;   /* toute la ligne, pas un tas à gauche */
  gap: var(--fo-e-3) var(--fo-e-4);
  padding-block: clamp(var(--fo-e-3), 2.2vh, var(--fo-e-4));
}

.fo-bandeau-item {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  margin: 0;
  padding: var(--fo-e-2) var(--fo-e-3);
  border-radius: 999px;
  transition: background var(--fo-transition);
}
.fo-bandeau-item:hover { background: rgba(255, 255, 255, .05); }

/* Le picto, dans sa pastille. Il pivote légèrement au survol du bloc. */
.fo-bandeau-picto {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--fo-croute);
  transition: transform var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}
.fo-bandeau-picto svg { width: 19px; height: 19px; display: block; }
.fo-bandeau-item:hover .fo-bandeau-picto {
  transform: rotate(-8deg);
  background: var(--fo-braise);
  color: #fff;
}

/* L'arrivée en séquence, sans l'observateur : collé au bas de l'écran, il
   n'entrait jamais assez dans la zone de détection pour se déclencher. */
.fo-js .fo-bandeau-item {
  opacity: 0;
  transform: translateY(14px);
  animation: fo-monte .8s cubic-bezier(.16, .8, .3, 1) forwards;
  animation-delay: calc(.5s + var(--fo-rang, 0) * 140ms);
}
@keyframes fo-monte { to { opacity: 1; transform: none; } }

.fo-bandeau-bloc { display: block; }
.fo-bandeau-etiquette {
  display: block;
  font-size: .625rem;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fo-txt-clair) 55%, transparent);
}
.fo-bandeau-fort {
  display: block;
  font-family: var(--fo-titre);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--fo-txt-clair);
}

/* L'état ouvert ou fermé se lit à la COULEUR du picto : le point coloré a
   disparu avec l'arrivée des pictos, l'information ne doit pas partir avec. */
.fo-enseigne[data-ouvert="1"] .fo-bandeau-picto { color: var(--fo-olive); }
.fo-enseigne[data-ouvert="0"] .fo-bandeau-picto { color: var(--fo-braise); }

.fo-enseigne-point {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--fo-txt-3);
  flex: 0 0 auto;
}
.fo-enseigne[data-ouvert="1"] /* L'état ouvert ou fermé se lit à la COULEUR du picto : le point coloré a
   disparu avec l'arrivée des pictos, l'information ne doit pas partir avec. */
.fo-enseigne[data-ouvert="1"] .fo-bandeau-picto { color: var(--fo-olive); }
.fo-enseigne[data-ouvert="0"] .fo-bandeau-picto { color: var(--fo-braise); }

.fo-enseigne-point {
  background: var(--fo-olive);
  animation: fo-pouls 2.6s ease-in-out infinite;
}
@keyframes fo-pouls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fo-olive) 55%, transparent); }
  60%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--fo-olive) 0%, transparent); }
}
.fo-enseigne[data-ouvert="0"] /* L'état ouvert ou fermé se lit à la COULEUR du picto : le point coloré a
   disparu avec l'arrivée des pictos, l'information ne doit pas partir avec. */
.fo-enseigne[data-ouvert="1"] .fo-bandeau-picto { color: var(--fo-olive); }
.fo-enseigne[data-ouvert="0"] .fo-bandeau-picto { color: var(--fo-braise); }

.fo-enseigne-point { background: var(--fo-braise); }

/* Le menu se clipse dès le PREMIER défilement : le collage de l'en-tête et
   la longueur du premier écran sont DEUX CHOSES INDÉPENDANTES (Jonas,
   2026-08-03). La sentinelle est donc juste sous l'en-tête, pas à mi-écran. */
.fo-sentinelle {
  position: absolute;
  top: 90px; left: 0;
  width: 1px; height: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .fo-bandeau::before,
  .fo-enseigne[data-ouvert="1"] /* L'état ouvert ou fermé se lit à la COULEUR du picto : le point coloré a
   disparu avec l'arrivée des pictos, l'information ne doit pas partir avec. */
.fo-enseigne[data-ouvert="1"] .fo-bandeau-picto { color: var(--fo-olive); }
.fo-enseigne[data-ouvert="0"] .fo-bandeau-picto { color: var(--fo-braise); }

.fo-enseigne-point { animation: none; }
  .fo-js .fo-bandeau-item { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 980px) {
  .fo-hero {
    min-height: auto;
    padding-block: clamp(130px, 18vh, 180px) calc(var(--fo-e-7) + var(--fo-e-5));
  }
  .fo-hero-grille { grid-template-columns: 1fr; gap: var(--fo-e-5); }
  .fo-hero-titre { max-width: 12ch; }
  .fo-hero-scene { max-height: 52vh; order: 2; }
  .fo-hero-contenu { order: 1; }
  .fo-bandeau { position: static; }
}

/* =============================================================================
   LE PIED DE PAGE
   ============================================================================= */

/* =============================================================================
   LE PIED DE PAGE

   SOMBRE, et c'est le point : il clôt la page et tranche avec n'importe
   quelle section au-dessus, quelle que soit sa teinte. L'ancien était crème
   sur crème, d'où la bande blanche qu'il fallait ajouter pour les séparer —
   et qui se voyait comme un trou. Plus de marge : le fond suffit.
   ============================================================================= */

.fo-pied {
  position: relative;
  background: var(--fo-fond-3);
  color: color-mix(in srgb, var(--fo-txt-clair) 82%, transparent);
  font-size: var(--fo-t-s);
}

/* La grigne en FILET, pas en bande de scie : elle signe le passage au pied
   de page sans faire barrière. */
.fo-pied-grigne {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--fo-grigne-bande);
  opacity: .5;
}

.fo-pied a { color: inherit; text-decoration: none; transition: color var(--fo-transition); }
.fo-pied a:hover { color: var(--fo-croute); }

.fo-pied-haut {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--fo-e-6);
  padding-block: var(--fo-e-7) var(--fo-e-6);
}

/* ── La maison ── */
.fo-pied-marque {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--fo-txt-clair);
}
.fo-pied-baseline {
  margin: 4px 0 0;
  font-size: var(--fo-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-croute);
}
.fo-pied-coord {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: var(--fo-e-4) 0 0;
  font-style: normal;
  line-height: 1.6;
}

/* ── Les colonnes de liens ── */
.fo-pied-titre {
  margin: 0 0 var(--fo-e-3);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fo-txt-clair);
}
.fo-pied-col ul { margin: 0; padding: 0; list-style: none; }
.fo-pied-col li { margin-bottom: 7px; }

/* ── Ouvert ou non ── */
.fo-pied-etat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-weight: 600;
}
.fo-pied-point {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--fo-txt-3);
}
.fo-pied-etat[data-ouvert="1"] { color: #9BC37E; }
.fo-pied-etat[data-ouvert="1"] .fo-pied-point {
  background: #9BC37E;
  box-shadow: 0 0 0 4px color-mix(in srgb, #9BC37E 22%, transparent);
}
.fo-pied-etat[data-ouvert="0"] { color: var(--fo-croute); }
.fo-pied-etat[data-ouvert="0"] .fo-pied-point { background: var(--fo-croute); }

.fo-pied-auj { margin: 0; color: color-mix(in srgb, var(--fo-txt-clair) 70%, transparent); }
.fo-pied-tout { margin: 6px 0 0; font-size: var(--fo-t-xs); }
.fo-pied-tout a { color: var(--fo-croute); border-bottom: 1px solid currentColor; }

.fo-pied-lettre {
  margin-top: var(--fo-e-5);
  padding-top: var(--fo-e-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.fo-pied-mot {
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  color: color-mix(in srgb, var(--fo-txt-clair) 62%, transparent);
}

/* ── La barre du bas ── */
.fo-pied-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding-block: var(--fo-e-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fo-t-xs);
  color: color-mix(in srgb, var(--fo-txt-clair) 55%, transparent);
}
.fo-pied-copy, .fo-pied-signature { margin: 0; }
.fo-pied-signature { color: var(--fo-croute); }

@media (max-width: 980px) {
  .fo-pied-haut { grid-template-columns: 1fr 1fr; gap: var(--fo-e-5); }
}
@media (max-width: 600px) {
  .fo-pied-haut { grid-template-columns: 1fr; }
  .fo-pied-bas { justify-content: center; text-align: center; }
}

/* =============================================================================
   CE MATIN AU COMPTOIR — la carte du jour en onglets

   LES ONGLETS SANS JAVASCRIPT : des radios masquées, des labels qui les
   cochent, et un sélecteur qui affiche le panneau correspondant. Le clavier
   les parcourt tout seul (flèches), et le contenu des familles non affichées
   reste dans la page, donc lisible par les moteurs.

   Six familles sont câblées : au-delà, la septième s'afficherait avec la
   première, ce qui reste sans gravité. Une carte de boulangerie qui dépasse
   six familles n'est plus une carte, c'est un catalogue.
   ============================================================================= */

.fo-carte { background: var(--fo-fond); }

.fo-carte-entete {
  text-align: center;
  margin-bottom: clamp(var(--fo-e-5), 5vh, var(--fo-e-6));
}
.fo-carte-titre {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  max-width: 18ch;
  margin: 0 auto var(--fo-e-3);
}
.fo-carte-mot { color: var(--fo-txt-2); max-width: 52ch; margin: 0 auto; }

/* ── La barre d'onglets ── */
.fo-onglet-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fo-onglets { position: relative; }

/* CENTRÉE et SANS TRAIT de séparation : ce qui distingue l'onglet actif,
   c'est que les autres sont GRISÉS, pas une ligne sous la barre. */
.fo-onglets-barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--fo-e-3), 3vw, var(--fo-e-6));
  margin-bottom: clamp(var(--fo-e-5), 5vh, var(--fo-e-6));
}

.fo-onglet {
  display: grid;
  justify-items: center;
  gap: var(--fo-e-2);
  padding: var(--fo-e-2) var(--fo-e-3);
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-txt-3);
  cursor: pointer;
  opacity: .5;                      /* GRISÉ tant qu'il n'est pas choisi */
  transition: opacity var(--fo-transition), color var(--fo-transition),
              transform var(--fo-transition);
}
.fo-onglet:hover { opacity: .8; color: var(--fo-txt-2); }

.fo-onglet-picto {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--fo-txt-3);
  transition: color var(--fo-transition), transform var(--fo-transition);
}
.fo-onglet-picto svg { width: 100%; height: 100%; display: block; }
.fo-onglet-nom { white-space: nowrap; }

.fo-onglet-compte {
  min-width: 1.5em;
  padding: .1em .45em;
  border-radius: 999px;
  background: var(--fo-fond-2);
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
  transition: background var(--fo-transition), color var(--fo-transition);
}

/* L'onglet actif : le fond passe en braise, comme les boutons. */
.fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1),
.fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2),
.fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3),
.fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4),
.fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5),
.fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6),
.fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7),
.fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8),
.fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9),
.fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) {
  opacity: 1;
  color: var(--fo-txt);
  transform: translateY(-2px);
}
.fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9) .fo-onglet-picto,
.fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) .fo-onglet-picto {
  color: var(--fo-braise);
  transform: scale(1.06);
}

/* Le focus clavier se voit sur le label, pas sur la radio invisible. */
.fo-onglet-radio:focus-visible ~ .fo-onglets-barre .fo-onglet { outline: 0; }
.fo-onglet-radio:nth-of-type(1):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(1),
.fo-onglet-radio:nth-of-type(2):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(2),
.fo-onglet-radio:nth-of-type(3):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(3),
.fo-onglet-radio:nth-of-type(4):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(4),
.fo-onglet-radio:nth-of-type(5):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(5),
.fo-onglet-radio:nth-of-type(6):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(6),
.fo-onglet-radio:nth-of-type(7):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(7),
.fo-onglet-radio:nth-of-type(8):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(8),
.fo-onglet-radio:nth-of-type(9):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(9),
.fo-onglet-radio:nth-of-type(10):focus-visible ~ .fo-onglets-barre .fo-onglet:nth-child(10) {
  outline: 2px solid var(--fo-braise);
  outline-offset: 3px;
}

/* ── Les panneaux ── */
/* LES ONGLETS SONT CÂBLÉS JUSQU'À DIX. Au-delà, l'onglet s'affiche mais son
   panneau ne s'ouvrirait jamais : les gabarits bornent donc leur liste à
   FO_ONGLETS_MAX, qui vaut le même nombre. Les deux se suivent. */
.fo-panneau { display: none; }

.fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(1),
.fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(2),
.fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(3),
.fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(4),
.fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(5),
.fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(6),
.fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(7),
.fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(8),
.fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(9),
.fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-panneaux .fo-panneau:nth-child(10) {
  display: block;
  animation: fo-panneau-entre .45s cubic-bezier(.16, .8, .3, 1);
}
@keyframes fo-panneau-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.fo-panneau-mot {
  color: var(--fo-txt-2);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--fo-e-5);
}

/* ── La liste des produits ── */
/* TROIS colonnes : six produits par famille font alors DEUX lignes pleines.
   En quatre colonnes, la sixième carte restait seule sur sa ligne. */
.fo-produits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}

/* LA CARTE PRODUIT, en VERTICAL : image carrée en haut, texte dessous.
   En horizontal, dès qu'il y a plus de trois colonnes, le nom se casse sur
   trois lignes et la description tombe à deux mots. */
.fo-produit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-produit:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--fo-ombre-haute);
}

.fo-produit-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--fo-fond-2);
}
.fo-produit-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .7, .25, 1);
}
.fo-produit:hover .fo-produit-media img { transform: scale(1.05); }

/* Sans photo : le semis de points plutôt qu'un carré vide. */
.fo-produit-vide {
  display: block;
  width: 100%; height: 100%;
  background-image: radial-gradient(color-mix(in srgb, var(--fo-croute) 40%, transparent) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
}

.fo-produit-etoile {
  position: absolute;
  left: var(--fo-e-2); top: var(--fo-e-2);
  padding: 3px 9px;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Tout est CENTRÉ dans la carte : ça se lit comme une étiquette de vitrine,
   pas comme une ligne de tableau. */
.fo-produit-mots {
  flex: 1 1 auto;
  padding: var(--fo-e-3) var(--fo-e-3) 0;
  text-align: center;
}
.fo-produit-nom { font-size: 1.15rem; line-height: 1.15; margin: 0 0 var(--fo-e-1); }
.fo-produit-desc {
  font-size: var(--fo-t-xs);
  line-height: 1.5;
  color: var(--fo-txt-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fo-produit-prix {
  margin: 0;
  padding: var(--fo-e-3);
  text-align: center;
  font-family: var(--fo-titre);
  font-size: 1.25rem;
  color: var(--fo-braise);
}

/* Les badges des packs métier (Végé, Du moment…) — classes s-* du kit. */
.fo-produit-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: var(--fo-e-2) 0 0;
  padding: 0;
  list-style: none;
}
.fo-produit-badges .s-catalog-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fo-fond-2);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
.fo-produit-badges .s-catalog-badge-veggie { background: color-mix(in srgb, var(--fo-olive) 18%, transparent); color: var(--fo-olive); }
.fo-produit-badges .s-catalog-badge-du-moment { background: var(--fo-croute-voile); color: var(--fo-croute-fonce); }

.fo-carte-pied { margin-top: var(--fo-e-6); text-align: center; }

@media (max-width: 820px) {
  .fo-carte-entete { grid-template-columns: 1fr; align-items: start; }
  .fo-carte-titre { max-width: none; }
  .fo-produits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .fo-produits { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-panneau { animation: none !important; }
}

/* =============================================================================
   LA BANDE DES VALEURS

   Un respirateur entre deux sections denses. Le défilement est en CSS pur sur
   une piste écrite DEUX FOIS : quand la première moitié sort à gauche, la
   seconde est déjà en place, donc la boucle ne se voit pas.

   Le survol met en pause : quelqu'un qui veut lire ne doit pas courir après
   le texte. Et « moins d'animation » l'arrête tout à fait.
   ============================================================================= */

/* PLUS FINE et sur la COULEUR D'ACCENT : c'est un liseré qui traverse la
   page, pas une section. Fond soutenu, donc texte en clair. */
.fo-bande {
  overflow: hidden;
  padding-block: 5px;
  background: var(--fo-braise);
  color: #fff;
  border: 0;
}

.fo-bande-piste {
  display: flex;
  align-items: center;
  gap: clamp(var(--fo-e-4), 3vw, var(--fo-e-6));
  width: max-content;
  animation: fo-defile 46s linear infinite;
}
.fo-bande:hover .fo-bande-piste { animation-play-state: paused; }

/* La piste étant écrite deux fois, la faire glisser de la MOITIÉ de sa
   largeur ramène exactement au point de départ. */
@keyframes fo-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fo-bande-mot {
  flex: 0 0 auto;
  font-family: var(--fo-titre);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #fff;
  white-space: nowrap;
}

.fo-bande-sep {
  flex: 0 0 auto;
  display: block;
  width: 17px; height: 17px;
  color: #fff;
  opacity: .55;
}
.fo-bande-sep svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .fo-bande-piste { animation: none; }
}

/* =============================================================================
   DANS L'ATELIER

   LA SECTION BASCULE EN SOMBRE. C'est elle qui donne son rythme à la page :
   sans ce contraste, on déroule six blocs crème et rien ne se détache.

   La photo tient toute la hauteur à gauche (c'est le geste du métier qu'on
   vend ici, pas le produit), les quatre étapes défilent à droite, reliées par
   un filet vertical et numérotées en grand.
   ============================================================================= */

.fo-atelier {
  padding-block: clamp(var(--fo-e-6), 9vh, var(--fo-e-7));
  background: var(--fo-fond-3);
  color: var(--fo-txt-clair);
}
.fo-atelier .fo-sur { color: var(--fo-croute); }

.fo-atelier-grille {
  display: grid;
  grid-template-columns: .85fr 1fr;
  align-items: center;
  gap: clamp(var(--fo-e-5), 6vw, var(--fo-e-7));
}

/* ── La photo, et l'heure qui mord dessus ── */
.fo-atelier-photo {
  position: relative;
  margin: 0;
  border-radius: var(--fo-rayon-img);
  overflow: visible;
}
.fo-atelier-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--fo-rayon-img);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.fo-atelier-heure {
  position: absolute;
  right: -18px; bottom: 28px;
  display: grid;
  gap: 1px;
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-braise);
  color: #fff;
  border-radius: var(--fo-rayon-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
  text-align: right;
}
.fo-atelier-heure-nombre {
  font-family: var(--fo-titre);
  font-size: 1.7rem;
  line-height: 1;
}
.fo-atelier-heure-mot {
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}

/* ── Le titre et les étapes ── */
.fo-atelier-titre {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.02;
  color: var(--fo-txt-clair);
  max-width: 14ch;
  margin-bottom: clamp(var(--fo-e-4), 4vh, var(--fo-e-5));
}
.fo-atelier .fo-accent { color: var(--fo-croute); }

.fo-etapes {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
}

/* Le filet vertical qui relie les étapes : il passe DERRIÈRE les numéros. */
.fo-etapes::before {
  content: '';
  position: absolute;
  left: 22px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fo-croute) 12%, var(--fo-croute) 88%, transparent);
  opacity: .38;
}

.fo-etape {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: var(--fo-e-4);
  padding-block: var(--fo-e-3);
}

.fo-etape-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--fo-fond-3);
  border: 1px solid color-mix(in srgb, var(--fo-croute) 45%, transparent);
  font-family: var(--fo-titre);
  font-size: 1.05rem;
  color: var(--fo-croute);
}

.fo-etape-titre {
  display: block;
  font-family: var(--fo-titre);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 3px;
}
.fo-etape-texte {
  margin: 0;
  font-size: var(--fo-t-s);
  line-height: 1.55;
  color: color-mix(in srgb, var(--fo-txt-clair) 72%, transparent);
  max-width: 46ch;
}

@media (max-width: 880px) {
  .fo-atelier-grille { grid-template-columns: 1fr; }
  .fo-atelier-photo img { aspect-ratio: 4 / 3; }
  .fo-atelier-heure { right: var(--fo-e-3); bottom: var(--fo-e-3); }
  .fo-atelier-titre { max-width: none; }
}

/* =============================================================================
   À EMPORTER — la section qui change de visage

   Trois cartes hautes, plus généreuses que celles de la carte du comptoir :
   ce qu'on vend ici se réserve, donc ça se regarde plus longtemps. Le pied de
   carte (prix et bouton) est toujours aligné, quelle que soit la longueur du
   nom ou de la description.
   ============================================================================= */

/* Fond plus chaud que le journal : les deux sections se ressemblaient trop
   (Jonas), et une page qui alterne deux crèmes proches ne raconte rien. */
.fo-emporter { background: var(--fo-fond-2); }

.fo-emporter-entete { text-align: center; margin-bottom: clamp(var(--fo-e-5), 5vh, var(--fo-e-6)); }
.fo-emporter-titre {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  max-width: 18ch;
  margin: 0 auto var(--fo-e-3);
}
.fo-emporter-mot { color: var(--fo-txt-2); max-width: 52ch; margin: 0 auto; }

.fo-phares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}

.fo-phare {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-phare:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--fo-ombre-haute);
}

.fo-phare-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fo-fond-2);
}
.fo-phare-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .7, .25, 1);
}
.fo-phare:hover .fo-phare-media img { transform: scale(1.05); }

.fo-phare-etoile {
  position: absolute;
  left: var(--fo-e-2); top: var(--fo-e-2);
  padding: 3px 9px;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Le corps pousse le pied vers le bas : les prix restent alignés d'une carte
   à l'autre même quand les textes n'ont pas la même longueur. */
.fo-phare-mots { flex: 1 1 auto; padding: var(--fo-e-4) var(--fo-e-4) 0; text-align: center; }
.fo-phare-nom { font-size: 1.3rem; line-height: 1.15; margin: 0 0 var(--fo-e-2); }
.fo-phare-desc {
  margin: 0;
  font-size: var(--fo-t-s);
  line-height: 1.55;
  color: var(--fo-txt-2);
}

.fo-phare-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding: var(--fo-e-4);
}
.fo-phare-prix {
  font-family: var(--fo-titre);
  font-size: 1.4rem;
  color: var(--fo-braise);
  white-space: nowrap;
}
.fo-phare-btn { padding: .7em 1.3em; font-size: var(--fo-t-s); }

.fo-emporter-pied { margin-top: var(--fo-e-6); text-align: center; }

@media (max-width: 900px) { .fo-phares { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fo-phares { grid-template-columns: 1fr; } }

/* =============================================================================
   CE QU'ILS EN DISENT — un mur, pas une grille

   La page compte déjà deux grilles de trois (la carte, la boutique). Une
   troisième aurait fait catalogue. Les colonnes CSS laissent les hauteurs se
   décaler d'elles-mêmes selon la longueur des citations : c'est le désordre
   qui rend le mur vivant.
   ============================================================================= */

/* LA SECTION EST EN BRIQUE : c'est le second point de contraste de la page
   après l'atelier sombre. Les cartes restent claires dessus, donc les
   citations se lisent sans effort. */
.fo-avis {
  background: var(--fo-braise);
  color: #fff;
}
.fo-avis .fo-sur { color: color-mix(in srgb, #fff 78%, transparent); }
.fo-avis .fo-avis-titre { color: #fff; }
.fo-avis .fo-accent { color: color-mix(in srgb, #fff 88%, transparent); font-style: italic; }

.fo-avis-entete { text-align: center; margin-bottom: clamp(var(--fo-e-5), 5vh, var(--fo-e-6)); }
/* text-wrap: balance ÉQUILIBRE les deux lignes au lieu de remplir la
   première : « On revient surtout » puis « pour le pain », au lieu d'une
   coupure après « le ». Deviner une largeur en ch ne marche pas, elle dépend
   de la police. */
.fo-avis-titre {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.02;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* LE CARROUSEL. Même mécanique que la bande des valeurs : une piste écrite
   deux fois qui glisse de la moitié de sa largeur, donc une boucle invisible
   et zéro JavaScript. Le survol met en pause.

   Les cartes ont TOUTES LA MÊME HAUTEUR : dans un défilement horizontal, des
   hauteurs inégales font sauter la ligne de base à chaque carte. */
.fo-avis-rail {
  overflow: hidden;
  /* Les bords s'estompent : on comprend que ça continue de chaque côté. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.fo-avis-piste {
  display: flex;
  align-items: stretch;
  gap: var(--fo-e-4);
  width: max-content;
  padding-block: var(--fo-e-2);
  animation: fo-defile 52s linear infinite;
}
.fo-avis-rail:hover .fo-avis-piste { animation-play-state: paused; }

.fo-avis-carte {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(300px, 26vw, 380px);
  margin: 0;
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-avis-carte:hover { transform: translateY(-3px); box-shadow: var(--fo-ombre); }

/* L'avis à la une prend le fond sombre : il se détache sans changer de taille. */
/* Sur la brique, l'avis à la une prend le crème chaud : le fond sombre
   d'avant faisait une troisième couleur pour rien. */
.fo-avis-carte[data-une="1"] {
  background: var(--fo-fond-2);
  border-color: transparent;
}

/* La citation pousse l'auteur en bas : les noms restent alignés d'une carte
   à l'autre malgré des citations de longueurs différentes. */
.fo-avis-mot { flex: 1 1 auto; }

/* Les épis de la note : cinq épis plutôt que cinq étoiles. */
.fo-avis-note { display: flex; gap: 3px; margin: 0 0 var(--fo-e-3); }
.fo-avis-epi { display: block; width: 16px; height: 16px; color: var(--fo-croute); }
.fo-avis-epi svg { width: 100%; height: 100%; display: block; }

.fo-avis-mot {
  margin: 0 0 var(--fo-e-3);
  font-family: var(--fo-titre);
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--fo-txt);
}
.fo-avis-mot::before { content: '« '; }
.fo-avis-mot::after  { content: ' »'; }

.fo-avis-qui { display: grid; gap: 1px; }
.fo-avis-nom { font-size: var(--fo-t-s); }
.fo-avis-ou {
  font-size: var(--fo-t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}

@media (prefers-reduced-motion: reduce) {
  .fo-avis-piste { animation: none; }
}

/* =============================================================================
   LE JOURNAL

   Des billets ALIGNÉS, et surtout une carte qui NE RESSEMBLE PAS à une carte
   produit : image en paysage plutôt qu'en carré, texte à gauche plutôt que
   centré, date en pastille en haut à droite, et un lien de lecture à la place
   d'un prix. Sans ces quatre différences, le visiteur confond les deux.
   ============================================================================= */

/* Le journal prend la teinte « mie » : sans ce changement il se collait à
   « Nous trouver », qui vient juste après sur le même crème, et on ne voyait
   plus où finissait une section. */
.fo-journal { background: var(--fo-fond-4); }

.fo-journal-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--fo-e-4);
  margin-bottom: clamp(var(--fo-e-5), 5vh, var(--fo-e-6));
}
.fo-journal-titre {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.02;
  max-width: 16ch;
  margin: 0;
}

.fo-billets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}

.fo-billet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-billet:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--fo-ombre-haute);
}

/* PAYSAGE, là où les produits sont carrés : c'est la première différence
   qu'on remarque sans y penser. */
.fo-billet-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fo-fond);
}
.fo-billet-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .7, .25, 1);
}
.fo-billet:hover .fo-billet-media img { transform: scale(1.04); }

/* LA DATE EN HAUT À DROITE : le marqueur d'un article. */
.fo-billet-date {
  position: absolute;
  top: var(--fo-e-2); right: var(--fo-e-2);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--fo-carte) 92%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fo-txt);
  box-shadow: var(--fo-ombre);
}

/* Texte À GAUCHE, là où les produits sont centrés. */
.fo-billet-mots { flex: 1 1 auto; padding: var(--fo-e-3) var(--fo-e-3) 0; text-align: left; }
.fo-billet-cat {
  display: inline-block;
  margin-bottom: var(--fo-e-1);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fo-braise);
}
.fo-billet-titre { font-size: 1.1rem; line-height: 1.2; margin: 0 0 var(--fo-e-2); }
.fo-billet-mot {
  margin: 0;
  font-size: var(--fo-t-xs);
  line-height: 1.5;
  color: var(--fo-txt-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Un LIEN DE LECTURE là où le produit affiche un prix. */
.fo-billet-lire {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-e-2);
  margin: var(--fo-e-3);
  padding: 0;
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-braise);
  text-decoration: none;
}
.fo-billet-lire::after {
  content: '';
  width: .5em; height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fo-transition);
}
.fo-billet:hover .fo-billet-lire::after { transform: rotate(45deg) translate(2px, -2px); }
.fo-billet-lire:hover { color: var(--fo-txt); }

/* =============================================================================
   NOUS TROUVER

   La devanture en grand à gauche, le pratique à droite sur un fond doré. La
   section ferme la page sur ce qu'on attend d'une boulangerie : où, quand, et
   comment y aller.
   ============================================================================= */

/* Le plus clair de la palette, juste après la « mie » du journal : c'est
   l'écart entre les deux qui fait comprendre qu'on change de sujet. */
.fo-trouver { background: var(--fo-fond-0); }

.fo-trouver-grille {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  gap: 0;
  border-radius: var(--fo-rayon-img);
  overflow: hidden;
  box-shadow: var(--fo-ombre-haute);
  margin-block: clamp(var(--fo-e-6), 9vh, var(--fo-e-7));
}

.fo-trouver-photo { position: relative; margin: 0; }
.fo-trouver-photo img { width: 100%; height: 100%; object-fit: cover; }

.fo-trouver-pastille {
  position: absolute;
  left: var(--fo-e-4); bottom: var(--fo-e-4);
  max-width: 62%;
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-braise);
  color: #fff;
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
  font-weight: 600;
  box-shadow: var(--fo-ombre-haute);
}

/* Le doré : la seule section de la page sur cette couleur, donc elle se
   retient. */
.fo-trouver-infos {
  background: var(--fo-croute);
  color: var(--fo-encre);
  padding: clamp(var(--fo-e-5), 4vw, var(--fo-e-6));
}
.fo-trouver-infos .fo-sur { color: color-mix(in srgb, var(--fo-encre) 68%, transparent); }
.fo-trouver-titre {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.02;
  color: var(--fo-encre);
  max-width: 14ch;
  margin: 0 0 var(--fo-e-4);
}
.fo-trouver .fo-accent { color: #fff; }

.fo-trouver-adresse {
  font-style: normal;
  display: grid;
  gap: 2px;
  margin-bottom: var(--fo-e-4);
}
.fo-trouver-adresse b { font-family: var(--fo-titre); font-size: 1.2rem; font-weight: 400; }
.fo-trouver-adresse a { color: var(--fo-encre); }

/* Les horaires : la prise du kit, habillée sur le doré. */
.fo-trouver-horaires { margin-bottom: var(--fo-e-4); }
.fo-trouver-horaires .s-hours { font-size: var(--fo-t-xs); }
.fo-trouver-horaires .s-hours-day > * { padding: .28rem 0; }
.fo-trouver-horaires .s-hours-day[data-today="1"] { font-weight: 700; }
.fo-trouver-horaires .s-hours-closed { opacity: .6; }
.fo-trouver-horaires .s-hours-now { display: none; }   /* déjà dit par le bandeau du haut */
.fo-trouver-horaires .s-hours-caption { color: color-mix(in srgb, var(--fo-encre) 60%, transparent); }

.fo-trouver-marches { margin-bottom: var(--fo-e-4); }
.fo-trouver-marches-titre {
  margin: 0 0 var(--fo-e-2);
  font-size: var(--fo-t-xs);
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fo-encre) 68%, transparent);
}
.fo-marches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fo-e-2); }
.fo-marche { display: flex; align-items: center; gap: var(--fo-e-2); }
.fo-marche-picto { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.fo-marche-picto svg { width: 100%; height: 100%; display: block; }
.fo-marche-mots b { display: block; font-size: var(--fo-t-s); font-weight: 600; }
.fo-marche-mots small { font-size: var(--fo-t-xs); opacity: .75; }

.fo-trouver-actions { margin: 0; }
.fo-trouver .fo-btn-plein { background: var(--fo-encre); color: var(--fo-croute); }
.fo-trouver .fo-btn-plein::before { background: #fff; }
.fo-trouver .fo-btn-plein:hover { color: var(--fo-encre); }

@media (max-width: 880px) {
  .fo-trouver-grille { grid-template-columns: 1fr; }
  .fo-trouver-photo img { aspect-ratio: 16 / 10; }
  .fo-trouver-titre { max-width: none; }
}

/* =============================================================================
   LA PAGE INTROUVABLE

   PLEIN ÉCRAN, sans menu ni pied de page : sur une erreur on ne déroule pas
   la navigation entière, on donne UNE sortie. Grande image en fond, un gros
   « oups », le code en très grand, puis l'explication et les raccourcis.
   ============================================================================= */

.fo-perdu {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(var(--fo-e-6), 10vh, var(--fo-e-7));
  overflow: hidden;
  isolation: isolate;
  background: var(--fo-fond-3);
  text-align: center;
}

.fo-perdu-fond { position: absolute; inset: 0; z-index: -2; }
.fo-perdu-fond img { width: 100%; height: 100%; object-fit: cover; }

/* Un voile chaud plutôt qu'un noir plat : l'image reste lisible dessous. */
.fo-perdu::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(26, 18, 12, .5) 0%, rgba(26, 18, 12, .82) 68%),
    linear-gradient(to bottom, rgba(26, 18, 12, .55), rgba(26, 18, 12, .78));
}

.fo-perdu-centre { position: relative; color: var(--fo-txt-clair); }

.fo-perdu-oups {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--fo-croute);
}

/* Le code en TRÈS grand : c'est lui qu'on lit en premier. */
.fo-perdu-code {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: clamp(6rem, 20vw, 15rem);
  line-height: .82;
  letter-spacing: -.05em;
  color: #fff;
}

.fo-perdu-titre {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  color: #fff;
  max-width: 20ch;
  margin: var(--fo-e-5) auto var(--fo-e-3);
}
.fo-perdu .fo-accent { color: var(--fo-croute); }

.fo-perdu-lead {
  max-width: 52ch;
  margin: 0 auto var(--fo-e-5);
  font-size: var(--fo-t-m);
  line-height: 1.6;
  color: color-mix(in srgb, var(--fo-txt-clair) 82%, transparent);
}

.fo-perdu-actions { margin: 0 0 var(--fo-e-5); }

.fo-perdu-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-2) var(--fo-e-5);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-perdu-lien {
  position: relative;
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: color-mix(in srgb, var(--fo-txt-clair) 75%, transparent);
  text-decoration: none;
}
.fo-perdu-lien::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--fo-croute);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16, .8, .3, 1);
}
.fo-perdu-lien:hover { color: #fff; }
.fo-perdu-lien:hover::after { transform: scaleX(1); }

/* =============================================================================
   LA PAGE CARTE — le catalogue déroulé en entier

   Sur l'accueil la carte est en onglets : c'est un APERÇU, on n'en montre
   qu'une famille. Ici tout est ouvert, parce qu'une carte se lit d'un bout à
   l'autre. Ce qui remplace les onglets, c'est une barre d'ancres qui suit la
   lecture, et un changement de teinte à chaque famille pour qu'on voie où
   l'une s'arrête.
   ============================================================================= */

/* Les ancres ne doivent pas atterrir SOUS la barre collante : on réserve la
   hauteur du menu, qui flotte au-dessus du contenu. */
html { scroll-padding-top: calc(var(--fo-menu-h) + var(--fo-e-4)); }
.fo-js html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .fo-js html { scroll-behavior: auto; } }

/* ── LA BANNIÈRE DES PAGES INTÉRIEURES ──────────────────────────────────
   La MÊME ouverture pour toutes les pages : c'est ce qui manquait, chaque
   page commençait à sa façon et le menu se comportait donc différemment
   selon l'endroit. Fine, sombre, une image derrière, et c'est tout.

   Le menu FLOTTE au-dessus (il ne se colle qu'au premier défilement, comme
   sur l'accueil) : la réserve du haut lui laisse sa place sans qu'il mange
   le titre. */
.fo-ban {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 400px;
  /* La réserve du haut doit couvrir la capsule ENTIÈRE : son décalage, la
     languette qui dépasse au-dessus d'elle, puis sa hauteur. Sinon le
     sur-titre vient se coller sous le menu. */
  padding-block: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-5);
  background: var(--fo-fond-3);   /* le repli si l'image ne charge pas */
  color: var(--fo-txt-clair);
  text-align: center;
}

.fo-ban-fond { position: absolute; inset: 0; }
/* L'assombrissement vit ICI, pas dans le fichier image : le même visuel doit
   rester réutilisable ailleurs en pleine lumière. */
.fo-ban-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: brightness(.40) saturate(.85);
  transition: transform 1.4s cubic-bezier(.22, .7, .25, 1),
              filter 1.4s cubic-bezier(.22, .7, .25, 1);
}
.fo-ban:hover .fo-ban-fond img {
  transform: scale(1.10);
  filter: brightness(.52) saturate(1);
}

/* Un voile bas : le titre garde son contraste même sur une zone claire de
   l'image, sans avoir à noircir toute la photo. */
.fo-ban::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%,
              rgba(20, 14, 9, .55), rgba(20, 14, 9, .15) 70%);
  pointer-events: none;
}

.fo-ban-centre { position: relative; z-index: 1; }

.fo-ban-titre {
  font-size: var(--fo-t-xxl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.fo-ban-titre .fo-accent { color: var(--fo-croute); }

.fo-ban-mot {
  max-width: 52ch;
  margin: var(--fo-e-3) auto 0;
  color: color-mix(in srgb, var(--fo-txt-clair) 88%, transparent);
  font-size: var(--fo-t-l);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .fo-ban { min-height: 300px; }
}

/* ── LA BARRE DES FAMILLES ───────────────────────────────────────────────
   Collante SEULEMENT avec JavaScript : sans lui, l'en-tête du site est déjà
   collant au même endroit et les deux se recouvriraient. Dans le flux, elle
   reste parfaitement utilisable. */
.fo-ancres {
  position: relative;
  z-index: 20;                 /* sous la capsule du menu, qui est à 30 */
  background: color-mix(in srgb, var(--fo-fond-0) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fo-trait);
}
/* PAS de collage (arbitrage Jonas, 2026-08-04) : au-delà de quatre familles
   la barre devenait plus large que la capsule du menu, et deux barres
   empilées de largeurs différentes, c'est laid. Elle défile avec la page. */

.fo-ancres-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-1);
  margin: 0;
  padding: 12px var(--fo-e-4);
  list-style: none;
}

.fo-ancre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--fo-txt-2);
  font-size: var(--fo-t-s);
  text-decoration: none;
  transition: background var(--fo-transition), color var(--fo-transition),
              box-shadow var(--fo-transition);
}
.fo-ancre:hover {
  background: var(--fo-carte);
  color: var(--fo-txt);
  box-shadow: var(--fo-ombre);
}

/* Le picto porte la couleur d'accent, le libellé reste sobre. */
.fo-ancre-picto {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  color: var(--fo-braise);
}
.fo-ancre-picto svg { width: 100%; height: 100%; display: block; }

.fo-ancre-nb {
  min-width: 1.5em;
  padding: .1em .45em;
  background: var(--fo-fond-2);
  border-radius: 999px;
  font-size: .6875rem;
  color: var(--fo-txt-3);
  text-align: center;
}

/* La famille en cours, quand la page est filtrée. */
.fo-ancre-ici { background: var(--fo-braise); color: #fff; }
.fo-ancre-ici .fo-ancre-picto { color: #fff; }
.fo-ancre-ici .fo-ancre-nb { background: rgba(255, 255, 255, .22); color: #fff; }
.fo-ancre-ici:hover { background: var(--fo-braise-fonce); color: #fff; }
.fo-ancre-tout { font-weight: 600; color: var(--fo-braise); }

/* ── UNE FAMILLE ─────────────────────────────────────────────────────────
   Teinte alternée : sans elle, les trois grilles se collent et on ne
   comprend plus où l'on est. */
.fo-famille { background: var(--fo-fond-0); }
.fo-famille-mie { background: var(--fo-fond-4); }

.fo-famille-entete { text-align: center; margin-bottom: var(--fo-e-6); }

.fo-famille-picto {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--fo-e-3);
  color: var(--fo-braise);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: 50%;
  box-shadow: var(--fo-ombre);
}
.fo-famille-picto svg { width: 34px; height: 34px; display: block; }

.fo-famille-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-famille-mot {
  max-width: 54ch;
  margin: var(--fo-e-3) auto 0;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

/* ── LES FORMULES ────────────────────────────────────────────────────────
   Sur la braise, comme les avis de l'accueil : c'est le moment où la page
   hausse la voix. */
.fo-formules { background: var(--fo-braise); color: var(--fo-txt-clair); }
.fo-formules-entete { text-align: center; margin-bottom: var(--fo-e-6); }
.fo-sur-clair { color: color-mix(in srgb, #fff 78%, transparent); }
.fo-formules-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  color: #fff;
  margin: 0;
}
.fo-formules-titre .fo-accent { color: color-mix(in srgb, #fff 82%, var(--fo-croute)); }

.fo-formules-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}

.fo-formule {
  display: flex;
  flex-direction: column;
  padding: var(--fo-e-5) var(--fo-e-4) 0;
  background: var(--fo-fond-0);
  color: var(--fo-txt);
  border-radius: var(--fo-rayon-img);
  text-align: center;
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-formule:hover { transform: translateY(-5px); box-shadow: var(--fo-ombre-haute); }

.fo-formule-nom {
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0;
  transition: color var(--fo-transition);
}
.fo-formule:hover .fo-formule-nom { color: var(--fo-braise); }

.fo-formule-mot {
  margin: var(--fo-e-2) 0 0;
  font-size: var(--fo-t-s);
  line-height: 1.55;
  color: var(--fo-txt-2);
}

/* Le contenu de la formule : une formule qu'on ne peut pas lire ne se vend
   pas. Chaque ligne porte une entaille en guise de puce. */
.fo-formule-contenu {
  flex: 1 1 auto;
  margin: var(--fo-e-4) 0 0;
  padding: var(--fo-e-3) 0 0;
  border-top: 1px solid var(--fo-trait);
  list-style: none;
}
.fo-formule-contenu li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: var(--fo-t-s);
  text-align: left;
}
.fo-formule-contenu li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 9px; height: 2px;
  background: var(--fo-croute);
  border-radius: 2px;
  transform: rotate(-38deg);
}

.fo-formule-prix {
  margin: var(--fo-e-3) calc(var(--fo-e-4) * -1) 0;
  padding: var(--fo-e-3);
  background: var(--fo-fond-2);
  border-radius: 0 0 var(--fo-rayon-img) var(--fo-rayon-img);
  font-family: var(--fo-titre);
  font-size: 1.5rem;
  color: var(--fo-braise);
}

/* ── LA FIN DE LA CARTE ──────────────────────────────────────────────────
   Ce que la carte ne dit pas, puis les deux sorties possibles. */
/* La MIE, pas fond-2 : le pied de page est déjà en fond-2, et les deux
   collés ne laissaient qu'un liseré clair entre deux teintes identiques —
   on ne comprenait plus où la page s'arrête. */
.fo-fin { background: var(--fo-fond-4); }
.fo-fin-grille {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: var(--fo-e-7);
  align-items: start;
}

.fo-fin-notes { margin: 0; padding: 0; list-style: none; }
.fo-fin-note {
  display: flex;
  gap: var(--fo-e-4);
  padding: var(--fo-e-4) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.fo-fin-note:last-child { border-bottom: 0; }

.fo-fin-picto {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--fo-braise);
}
.fo-fin-picto svg { width: 100%; height: 100%; display: block; }

.fo-fin-note-titre { font-size: var(--fo-t-l); margin: 0 0 var(--fo-e-1); }
.fo-fin-note-mot {
  margin: 0;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
  font-size: var(--fo-t-s);
}

.fo-fin-appel {
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-fin-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-fin-mot {
  margin: var(--fo-e-3) 0 var(--fo-e-4);
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}
.fo-fin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  margin: 0;
}
.fo-fin-tel {
  margin: var(--fo-e-4) 0 0;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
}
.fo-fin-tel a { color: var(--fo-braise); font-weight: 600; }

/* La carte vide : le module est absent, ou rien n'est encore saisi. */
.fo-vide-carte { background: var(--fo-fond-0); }
.fo-vide-centre { text-align: center; }
.fo-vide-mot {
  max-width: 46ch;
  margin: 0 auto var(--fo-e-4);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt-2);
}

@media (max-width: 980px) {
  .fo-formules-liste { grid-template-columns: 1fr; }
  .fo-fin-grille { grid-template-columns: 1fr; gap: var(--fo-e-5); }
  .fo-js .fo-ancres { top: 0; }
}
@media (max-width: 700px) {
  .fo-ancre-nb { display: none; }
  .fo-ancre { padding: 8px 12px; }
}

/* =============================================================================
   LES GALERIES — la liste des albums

   Une MOSAÏQUE, pas une grille régulière : le premier album prend deux
   places. Des vignettes toutes identiques font catalogue, et une galerie
   n'est pas un catalogue.

   Le texte est POSÉ SUR la photo, jamais dessous : une carte avec un pavé de
   texte sous l'image, c'est une carte produit, et on confondrait les deux.
   ============================================================================= */

.fo-albums { background: var(--fo-fond-0); }

.fo-albums-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-album-grand { grid-column: span 2; }

.fo-album-lien {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--fo-ombre);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-album-lien:hover { transform: translateY(-5px); box-shadow: var(--fo-ombre-haute); }

.fo-album-media { aspect-ratio: 4 / 3; background: var(--fo-fond-2); }
.fo-album-grand .fo-album-media { aspect-ratio: 8 / 3; }
.fo-album-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .7, .25, 1);
}
.fo-album-lien:hover .fo-album-media img { transform: scale(1.06); }

/* Le voile ne couvre que le bas : la photo reste la photo. */
.fo-album-mots {
  position: absolute;
  inset: auto 0 0;
  padding: var(--fo-e-5) var(--fo-e-4) var(--fo-e-4);
  background: linear-gradient(to top, rgba(20, 14, 9, .82), rgba(20, 14, 9, .45) 45%, transparent);
  color: #fff;
}
.fo-album-titre {
  font-size: var(--fo-t-l);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.fo-album-grand .fo-album-titre { font-size: var(--fo-t-xl); }

.fo-album-pied {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  margin: var(--fo-e-2) 0 0;
  font-size: var(--fo-t-xs);
  color: color-mix(in srgb, #fff 78%, transparent);
}
/* « Voir l'album » n'apparaît qu'au survol : au repos on veut la photo. */
.fo-album-voir {
  color: var(--fo-croute);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--fo-transition), transform var(--fo-transition);
}
.fo-album-lien:hover .fo-album-voir { opacity: 1; transform: none; }
/* Sans souris, l'appel doit être là d'emblée. */
@media (hover: none) {
  .fo-album-voir { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .fo-albums-grille { grid-template-columns: 1fr; }
  .fo-album-grand { grid-column: auto; }
  .fo-album-grand .fo-album-media { aspect-ratio: 4 / 3; }
}

/* =============================================================================
   LE JOURNAL — la page

   Les mêmes cartes que sur l'accueil, en trois colonnes, plus un billet de
   tête pour celui que le client a coché « à la une ».
   ============================================================================= */

.fo-journal-page { background: var(--fo-fond-0); }
.fo-billets-3 { grid-template-columns: repeat(3, 1fr); }


@media (min-width: 901px) and (max-width: 1100px) {
  .fo-billets-3 { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   NOUS TROUVER — la page

   Ce qu'on cherche à gauche (adresse, heures, marchés), ce qu'on écrit à
   droite. L'ordre du code suit l'ordre du besoin : personne n'ouvre cette
   page pour remplir un formulaire.
   ============================================================================= */

.fo-nous { background: var(--fo-fond-0); }
.fo-nous-grille {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: var(--fo-e-7);
  align-items: start;
}

.fo-coord { margin: 0 0 var(--fo-e-5); padding: 0; list-style: none; }
.fo-coord-item {
  display: flex;
  gap: var(--fo-e-4);
  padding-bottom: var(--fo-e-4);
  margin-bottom: var(--fo-e-4);
  border-bottom: 1px solid var(--fo-trait);
}
.fo-coord-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.fo-coord-picto {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: var(--fo-braise);
}
.fo-coord-picto svg { width: 100%; height: 100%; display: block; }

.fo-coord-titre { font-size: var(--fo-t-l); margin: 0 0 var(--fo-e-1); }
.fo-coord-mot {
  margin: 0;
  font-style: normal;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}
.fo-coord-mot a { color: var(--fo-braise); font-weight: 600; }

.fo-nous-soustitre {
  font-size: var(--fo-t-m);
  font-family: var(--fo-texte);
  font-weight: 700;
  margin: 0 0 var(--fo-e-3);
}
.fo-nous-horaires, .fo-nous-marches { margin-bottom: var(--fo-e-5); }

.fo-nous-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
}
.fo-nous-photo img {
  width: 100%; height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .7, .25, 1);
}
.fo-nous-photo:hover img { transform: scale(1.04); }

/* Le bloc du formulaire : une carte posée, pour qu'on voie que c'est autre
   chose que la colonne d'informations. */
.fo-nous-mot {
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
  position: sticky;
  top: var(--fo-e-4);
}
.fo-nous-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-nous-lead {
  margin: var(--fo-e-2) 0 var(--fo-e-4);
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

@media (max-width: 900px) {
  .fo-nous-grille { grid-template-columns: 1fr; gap: var(--fo-e-5); }
  .fo-nous-mot { position: static; }
}

/* Le tableau des horaires prend 100 % de son conteneur : dans la colonne
   large de « Nous trouver », les jours partaient au milieu de l'écran. */
.fo-nous-horaires .s-hours { max-width: 20rem; }
.fo-nous-horaires .s-hours-jour { text-align: left; }

/* =============================================================================
   LES GALERIES — les albums en onglets VIGNETTES

   Pas les pastilles à picto de la carte : sur une page de photos, l'onglet le
   plus parlant est une photo. Deux pages du même pack ne doivent pas porter
   les mêmes onglets, sinon le pack n'a qu'une idée.
   ============================================================================= */

.fo-albums { background: var(--fo-fond-0); }

.fo-onglets-photo .fo-onglets-barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-3);
  margin-bottom: var(--fo-e-6);
  border: 0;
}

.fo-onglets-photo .fo-onglet {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  padding: 8px 18px 8px 8px;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition),
              transform var(--fo-transition);
}
/* Le gris de l'onglet vient de la vignette, PAS d'une opacité sur tout le
   label : à .5 le nom de l'album devenait illisible. */
.fo-onglets-photo .fo-onglet { opacity: 1; }
.fo-onglets-photo .fo-onglet:hover {
  opacity: 1;
  border-color: var(--fo-trait-fort);
  box-shadow: var(--fo-ombre);
  transform: translateY(-2px);
}

/* La vignette : c'est elle qui fait tout le travail. */
.fo-onglet-vue {
  flex: 0 0 auto;
  display: block;
  width: 54px; height: 54px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fo-fond-2);
}
.fo-onglet-vue img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.95);
  transition: filter var(--fo-transition), transform var(--fo-transition);
}

.fo-onglet-mots { display: flex; flex-direction: column; text-align: left; }
.fo-onglets-photo .fo-onglet-nom {
  font-family: var(--fo-titre);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--fo-txt-2);
  transition: color var(--fo-transition);
}
.fo-onglets-photo .fo-onglet-compte {
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  background: none;
  padding: 0;
}


.fo-albums .fo-panneau-mot { font-size: var(--fo-t-l); font-family: var(--fo-titre); }
.fo-albums .fo-panneau-pied { text-align: center; margin: var(--fo-e-5) 0 0; }

/* ── LA MURETTE ──
   Les photos gardent leurs proportions au lieu d'être recadrées au carré :
   une galerie qui rogne ses photos ne montre pas ce qu'elle prétend montrer.
   Colonnes CSS plutôt que grille, c'est le seul moyen sans JavaScript. */
.fo-murette {
  column-count: 3;
  column-gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-murette-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--fo-e-4);
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-murette-item img {
  width: 100%; height: auto;
  display: block;
  transition: transform .9s cubic-bezier(.22, .7, .25, 1);
}
.fo-murette-item:hover img { transform: scale(1.05); }

.fo-murette-legende {
  position: absolute;
  inset: auto 0 0;
  padding: var(--fo-e-5) var(--fo-e-3) var(--fo-e-3);
  background: linear-gradient(to top, rgba(20, 14, 9, .8), transparent);
  color: #fff;
  font-size: var(--fo-t-xs);
  opacity: 0;
  transition: opacity var(--fo-transition);
}
.fo-murette-item:hover .fo-murette-legende { opacity: 1; }
@media (hover: none) { .fo-murette-legende { opacity: 1; } }

@media (max-width: 900px) { .fo-murette { column-count: 2; } }
@media (max-width: 560px) { .fo-murette { column-count: 1; } }

/* L'ALBUM OUVERT : sa vignette reprend ses couleurs pendant que les autres
   restent en gris. C'est le seul signal dont on a besoin — inutile de
   colorer tout l'onglet, la photo parle mieux. */
.fo-onglets-photo .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9) .fo-onglet-vue img,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) .fo-onglet-vue img {
  filter: none;
  transform: scale(1.05);
}
.fo-onglets-photo .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9),
.fo-onglets-photo .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) {
  border-color: var(--fo-braise);
  box-shadow: 0 6px 20px rgba(181, 55, 43, .18);
}
.fo-onglets-photo .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9) .fo-onglet-nom,
.fo-onglets-photo .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) .fo-onglet-nom {
  color: var(--fo-braise);
  font-weight: 600;
}

/* =============================================================================
   LE JOURNAL — « À la une » et son ruban

   La piste est écrite DEUX FOIS et translatée de la moitié de sa largeur :
   arrivée au bout elle est exactement à sa position de départ, la boucle ne
   se voit pas. Le survol met en pause, parce qu'un texte qui fuit sous le
   curseur est insupportable.
   ============================================================================= */

.fo-une { background: var(--fo-fond-4); overflow: hidden; }
.fo-une-entete { text-align: center; margin-bottom: var(--fo-e-6); }
.fo-une-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}

.fo-ruban {
  /* Il DÉBORDE de la largeur de contenu : le ruban touche les deux bords, on
     doit sentir qu'il continue au-delà de l'écran. */
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.fo-ruban-piste {
  display: flex;
  width: max-content;
  animation: fo-ruban 46s linear infinite;
}
.fo-ruban:hover .fo-ruban-piste { animation-play-state: paused; }
@keyframes fo-ruban {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sans animation : la copie disparaît et le ruban se pousse à la main. */
@media (prefers-reduced-motion: reduce) {
  .fo-ruban { overflow-x: auto; }
  .fo-ruban-piste { animation: none; }
  .fo-ruban-lot[aria-hidden="true"] { display: none; }
}

.fo-ruban-lot {
  display: flex;
  gap: var(--fo-e-4);
  margin: 0;
  padding: 0 calc(var(--fo-e-4) / 2);
  list-style: none;
}

/* ── LA GRANDE CARTE du ruban ── */
.fo-grand { flex: 0 0 auto; width: min(440px, 78vw); }
.fo-grand-lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  color: inherit;
  text-decoration: none;
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-grand-lien:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--fo-ombre-haute);
}

.fo-grand-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fo-fond-2); }
.fo-grand-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .7, .25, 1);
}
.fo-grand-lien:hover .fo-grand-media img { transform: scale(1.05); }

.fo-grand-mots { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--fo-e-4); }
.fo-grand-meta {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  margin: 0 0 var(--fo-e-2);
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
}
.fo-grand-cat {
  color: var(--fo-braise);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fo-grand-titre {
  font-size: 1.6rem;
  line-height: 1.12;
  letter-spacing: var(--fo-suivi-titre);
  margin: 0 0 var(--fo-e-2);
}
.fo-grand-mot {
  flex: 1 1 auto;
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-s);
  line-height: 1.55;
  color: var(--fo-txt-2);
}
.fo-grand-lire {
  align-self: flex-start;
  font-size: var(--fo-t-s);
  font-weight: 600;
  color: var(--fo-braise);
}
.fo-grand-lire::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--fo-braise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16, .8, .3, 1);
}
.fo-grand-lien:hover .fo-grand-lire::after { transform: scaleX(1); }

/* =============================================================================
   LE JOURNAL — les rubriques en onglets PRESSE

   Ni pastilles ni vignettes : un filet fin sous toute la barre, le picto en
   ligne devant le mot, l'onglet ouvert souligné d'un trait épais.
   ============================================================================= */

.fo-journal-page { background: var(--fo-fond-0); }
.fo-billets-3 { grid-template-columns: repeat(3, 1fr); }

.fo-onglets-presse .fo-onglets-barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-5);
  margin-bottom: var(--fo-e-6);
  border-bottom: 1px solid var(--fo-trait);
}

.fo-onglets-presse .fo-onglet {
  position: relative;
  display: flex;              /* en LIGNE, pas le picto au-dessus */
  align-items: center;
  gap: 9px;
  padding: 0 2px var(--fo-e-3);
  opacity: 1;
  color: var(--fo-txt-3);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-s);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fo-onglets-presse .fo-onglet:hover { color: var(--fo-txt-2); }

.fo-onglets-presse .fo-onglet-picto { width: 20px; height: 20px; }
.fo-onglets-presse .fo-onglet-compte {
  background: none;
  padding: 0;
  font-size: .6875rem;
  color: var(--fo-txt-3);
}

/* Le trait de l'onglet ouvert : il pousse depuis la gauche. */
.fo-onglets-presse .fo-onglet::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--fo-braise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}

@media (max-width: 900px) {
  .fo-billets-3 { grid-template-columns: 1fr; }
  .fo-onglets-presse .fo-onglets-barre { gap: var(--fo-e-4); }
}

/* Téléphone : quatre onglets centrés qui passent à la ligne se retrouvent
   décalés chacun différemment — trois lignes, aucune alignée sur la
   précédente. Alignés à GAUCHE avec une gouttière plus serrée, ils tiennent
   en deux lignes propres et le trait de l'onglet ouvert reste lisible. */
@media (max-width: 640px) {
  .fo-onglets-presse .fo-onglets-barre {
    justify-content: flex-start;
    gap: var(--fo-e-2) var(--fo-e-4);
    margin-bottom: var(--fo-e-5);
  }
  .fo-onglets-presse .fo-onglet {
    font-size: var(--fo-t-xs);
    gap: 6px;
    padding-bottom: var(--fo-e-2);
  }
  .fo-onglets-presse .fo-onglet-picto { width: 16px; height: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .fo-billets-3 { grid-template-columns: repeat(2, 1fr); }
}

/* La rubrique ouverte : le trait se déploie et le mot reprend sa couleur. */
.fo-onglets-presse .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9)::after,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10)::after {
  transform: scaleX(1);
}
.fo-onglets-presse .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9),
.fo-onglets-presse .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) {
  color: var(--fo-txt);
  font-weight: 700;
  transform: none;
}
.fo-onglets-presse .fo-onglet-radio:nth-of-type(1):checked ~ .fo-onglets-barre .fo-onglet:nth-child(1) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(2):checked ~ .fo-onglets-barre .fo-onglet:nth-child(2) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(3):checked ~ .fo-onglets-barre .fo-onglet:nth-child(3) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(4):checked ~ .fo-onglets-barre .fo-onglet:nth-child(4) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(5):checked ~ .fo-onglets-barre .fo-onglet:nth-child(5) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(6):checked ~ .fo-onglets-barre .fo-onglet:nth-child(6) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(7):checked ~ .fo-onglets-barre .fo-onglet:nth-child(7) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(8):checked ~ .fo-onglets-barre .fo-onglet:nth-child(8) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(9):checked ~ .fo-onglets-barre .fo-onglet:nth-child(9) .fo-onglet-compte,
.fo-onglets-presse .fo-onglet-radio:nth-of-type(10):checked ~ .fo-onglets-barre .fo-onglet:nth-child(10) .fo-onglet-compte {
  color: var(--fo-braise);
}

/* =============================================================================
   L'ARTICLE — deux mises en page livrées avec le pack

   LE RÉCIT : couverture pleine largeur, titre par-dessus, corps en colonne
   étroite. Pour ce qui se lit d'une traite.
   LE DOSSIER : couverture en médaillon, sommaire qui suit la lecture. Pour ce
   qui se consulte.
   ============================================================================= */

.fo-art { background: var(--fo-fond-0); }

/* ── Le fil d'ariane et les méta, communs aux deux ── */
.fo-art-fil {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: var(--fo-e-2);
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fo-art-fil a { color: inherit; text-decoration: none; opacity: .75; }
.fo-art-fil a:hover { opacity: 1; }
.fo-art-cat { color: var(--fo-braise); font-weight: 700; }

.fo-art-titre {
  font-size: var(--fo-t-xxl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-art-meta {
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: var(--fo-e-2);
}

/* ── LE RÉCIT ── */
.fo-art-tete {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 62vh;
  overflow: hidden;
  padding-block: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-7);
  background: var(--fo-fond-3);
  color: var(--fo-txt-clair);
  text-align: center;
}
.fo-art-fond { position: absolute; inset: 0; }
.fo-art-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.44) saturate(.9);
}
.fo-art-tete::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 14, 9, .82), rgba(20, 14, 9, .18) 55%, rgba(20, 14, 9, .35));
  pointer-events: none;
}
.fo-art-tete-centre { position: relative; z-index: 1; justify-content: center; }
.fo-art-tete .fo-art-titre { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .4); }
.fo-art-tete .fo-art-meta { color: color-mix(in srgb, #fff 72%, transparent); justify-content: center; }
.fo-art-tete .fo-art-fil { justify-content: center; color: color-mix(in srgb, #fff 80%, transparent); }

/* ── LE DOSSIER ── */
.fo-art-tete-plate {
  background: var(--fo-fond-4);
  padding-block: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-6);
}
.fo-art-plate-grille {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: var(--fo-e-6);
  align-items: center;
}
.fo-art-medaillon {
  margin: 0;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre-haute);
}
.fo-art-medaillon img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }

.fo-art-deux {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--fo-e-7);
  align-items: start;
}
.fo-art-sommaire {
  position: sticky;
  top: calc(var(--fo-menu-h) + var(--fo-e-3));
  padding-right: var(--fo-e-4);
  border-right: 1px solid var(--fo-trait);
}
.fo-art-sommaire-titre {
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-art-sommaire ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fo-t-s);
  line-height: 1.5;
  color: var(--fo-txt-2);
}
.fo-art-sommaire li { margin-bottom: var(--fo-e-2); }
.fo-art-sommaire li::marker { color: var(--fo-braise); font-weight: 700; }

/* ── LE CORPS, commun aux deux ──
   La colonne de lecture est ÉTROITE : au-delà de soixante-dix caractères,
   l'œil perd sa ligne en revenant à gauche. */
.fo-art-corps { background: var(--fo-fond-0); }
.fo-art-colonne {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--fo-txt-2);
}
/* En dossier AVEC sommaire, la colonne s'aligne à gauche de sa piste. Sans
   sommaire il n'y a plus de grille du tout : sinon l'unique enfant tombait
   dans la piste de 220 px et le texte se lisait sur quatre-vingt-dix pixels
   de large. */
.fo-art-deux .fo-art-colonne { margin-inline: 0; }

.fo-art-pied { background: var(--fo-fond-4); padding-block: var(--fo-e-6); }
.fo-art-pied-centre { text-align: center; }
.fo-art-commentaires { background: var(--fo-fond-0); }

@media (max-width: 900px) {
  .fo-art-plate-grille, .fo-art-deux { grid-template-columns: 1fr; gap: var(--fo-e-4); }
  .fo-art-sommaire { position: static; border-right: 0; border-bottom: 1px solid var(--fo-trait); padding: 0 0 var(--fo-e-4); }
  .fo-art-tete { min-height: 46vh; }
}

/* =============================================================================
   LA BOUTIQUE — la page qui vend

   Ce n'est pas la Carte avec un bouton en plus : la carte produit porte ici
   un prix EN GRAND, son prix barré s'il y a promo, ses badges en coin et un
   bouton d'ajout pleine largeur. Rien de tout ça sur le comptoir.
   ============================================================================= */

/* ── UN RAYON ── */
.fo-vente { background: var(--fo-fond-0); }
.fo-vente-mie { background: var(--fo-fond-4); }
.fo-vente-entete { text-align: center; margin-bottom: var(--fo-e-6); }
.fo-vente-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-vente-mot {
  max-width: 54ch;
  margin: var(--fo-e-3) auto 0;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

/* ── LA CARTE QUI VEND ── */
.fo-vitrine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-vend {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-vend:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--fo-ombre-haute); }
/* Épuisé : la carte reste lisible mais recule visuellement. */
.fo-vend-epuise { opacity: .72; }
.fo-vend-epuise:hover { transform: none; box-shadow: var(--fo-ombre); }

/* Paysage, pas carré : c'est ce qui distingue au premier coup d'œil une
   carte de vente d'une carte du comptoir. */
.fo-vend-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fo-fond-2);
}
.fo-vend-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .7, .25, 1);
}
.fo-vend:hover .fo-vend-media img { transform: scale(1.05); }
.fo-vend-epuise .fo-vend-media img { filter: grayscale(.6); }

.fo-vend-badges {
  position: absolute;
  left: var(--fo-e-2); top: var(--fo-e-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0; padding: 0;
  list-style: none;
}
.s-shop-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.s-shop-badge-favori  { background: var(--fo-braise); }
.s-shop-badge-promo   { background: var(--fo-olive); }
.s-shop-badge-rupture { background: var(--fo-txt-2); }

.fo-vend-mots { flex: 1 1 auto; padding: var(--fo-e-3) var(--fo-e-3) 0; }
.fo-vend-nom { font-size: 1.15rem; line-height: 1.15; margin: 0 0 var(--fo-e-1); }
.fo-vend-nom a { color: inherit; text-decoration: none; }
.fo-vend-nom a:hover { color: var(--fo-braise); }
.fo-vend-accroche {
  margin: 0;
  font-size: var(--fo-t-xs);
  line-height: 1.5;
  color: var(--fo-txt-2);
}

.fo-vend-pied { padding: var(--fo-e-3); }
.fo-vend-prix {
  display: flex;
  align-items: baseline;
  gap: var(--fo-e-2);
  margin: 0 0 var(--fo-e-3);
}
.fo-vend-somme { font-family: var(--fo-titre); font-size: 1.35rem; color: var(--fo-braise); }
.fo-vend-barre {
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
  text-decoration: line-through;
}

.fo-vend-ajout { margin: 0; }
.fo-vend-btn {
  display: block;
  width: 100%;
  padding: .75em 1em;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  /* AFFIRMÉ dès le repos : sur une page qui vend, le bouton d'achat ne se
     découvre pas au survol. Il se remplit au survol, il ne s'allume pas. */
  color: var(--fo-braise);
  background: transparent;
  border: 1.5px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition),
              border-color var(--fo-transition), transform var(--fo-transition);
}
.fo-vend:hover .fo-vend-btn {
  background: var(--fo-braise);
  border-color: var(--fo-braise);
  color: #fff;
}
.fo-vend-btn:hover { transform: translateY(-2px); }
.fo-vend-rupture {
  margin: 0;
  padding: .75em 1em;
  text-align: center;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
}

/* ── COMMENT ÇA MARCHE ── */
.fo-rassure { background: var(--fo-fond-2); }
.fo-rassure-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-5);
  margin: 0; padding: 0;
  list-style: none;
  text-align: center;
}
.fo-rassure-picto {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--fo-e-3);
  color: var(--fo-braise);
}
.fo-rassure-picto svg { width: 100%; height: 100%; display: block; }
.fo-rassure-titre { font-size: var(--fo-t-l); margin: 0 0 var(--fo-e-2); }
.fo-rassure-mot {
  margin: 0;
  font-size: var(--fo-t-s);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

@media (max-width: 980px) {
  .fo-rayons-liste, .fo-vitrine, .fo-rassure-liste { grid-template-columns: 1fr; }
}
@media (min-width: 981px) and (max-width: 1150px) {
  .fo-vitrine { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   LA BOUTIQUE — la grammaire STANDARD, la matière du pack

   Filtres à gauche, compteur et tri en haut, grille à droite. On ne
   réinvente pas la navigation d'une boutique : le visiteur cherche ce qu'il
   connaît. Ce qui appartient au pack, ce sont les teintes et les cartes.
   ============================================================================= */

.fo-shop { background: var(--fo-fond-0); }
.fo-shop-grille {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--fo-e-6);
  align-items: start;
}

/* ── LA COLONNE DE FILTRES ── */
.fo-filtres { position: sticky; top: calc(var(--fo-menu-h) + var(--fo-e-3)); }
.fo-filtre-bloc { margin-bottom: var(--fo-e-5); }
.fo-filtre-titre {
  margin: 0 0 var(--fo-e-3);
  padding-bottom: var(--fo-e-2);
  border-bottom: 1px solid var(--fo-trait);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-filtre-liste { margin: 0; padding: 0; list-style: none; }

.fo-filtre-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-2);
  padding: 8px 10px;
  border-radius: var(--fo-rayon-2);
  color: var(--fo-txt-2);
  font-size: var(--fo-t-s);
  text-decoration: none;
  transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-filtre-item:hover { background: var(--fo-fond-2); color: var(--fo-txt); }
.fo-filtre-nb {
  min-width: 1.6em;
  padding: .1em .45em;
  background: var(--fo-fond-2);
  border-radius: 999px;
  font-size: .6875rem;
  color: var(--fo-txt-3);
  text-align: center;
}
.fo-filtre-item.fo-filtre-ici { background: var(--fo-braise); color: #fff; font-weight: 600; }
.fo-filtre-item.fo-filtre-ici .fo-filtre-nb { background: rgba(255, 255, 255, .22); color: #fff; }

/* La case à cocher est DESSINÉE : ce sont des liens, pas des cases réelles,
   mais le visiteur doit lire le geste qu'il connaît. */
.fo-filtre-coche {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--fo-rayon-2);
  color: var(--fo-txt-2);
  font-size: var(--fo-t-s);
  text-decoration: none;
  transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-filtre-coche:hover { background: var(--fo-fond-2); color: var(--fo-txt); }
.fo-filtre-case {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border: 1.5px solid var(--fo-trait-fort);
  border-radius: 4px;
  transition: background var(--fo-transition), border-color var(--fo-transition);
}
.fo-filtre-coche.fo-filtre-ici { color: var(--fo-txt); font-weight: 600; }
.fo-filtre-coche.fo-filtre-ici .fo-filtre-case {
  background: var(--fo-braise);
  border-color: var(--fo-braise);
  /* La coche, en SVG inline : aucun fichier, aucune requête. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.fo-filtre-vider { margin: 0; font-size: var(--fo-t-xs); }
.fo-filtre-vider a { color: var(--fo-braise); }

/* ── LA BARRE D'OUTILS ── */
.fo-shop-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-3);
  margin-bottom: var(--fo-e-4);
  padding-bottom: var(--fo-e-3);
  border-bottom: 1px solid var(--fo-trait);
}
.fo-shop-compte { margin: 0; font-size: var(--fo-t-s); color: var(--fo-txt-2); }
.fo-shop-compte strong { font-family: var(--fo-titre); font-size: 1.25rem; color: var(--fo-txt); }
.fo-shop-dans { color: var(--fo-txt-3); }

.fo-shop-tri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fo-e-2); }
.fo-shop-tri-mot {
  font-size: var(--fo-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
/* Des BOUTONS, jamais une liste déroulante : règle du pack. */
.fo-shop-tri-item {
  padding: 6px 13px;
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-2);
  text-decoration: none;
  transition: background var(--fo-transition), color var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-shop-tri-item:hover { border-color: var(--fo-trait-fort); color: var(--fo-txt); }
.fo-shop-tri-ici {
  background: var(--fo-txt);
  border-color: var(--fo-txt);
  color: var(--fo-fond-0);
}

.fo-shop-rien {
  padding: var(--fo-e-7) var(--fo-e-4);
  text-align: center;
  color: var(--fo-txt-2);
}
.fo-shop-rien p:first-child { font-family: var(--fo-titre); font-size: var(--fo-t-l); }

/* Dans la colonne de résultats, deux cartes par ligne : la grille est plus
   étroite qu'une pleine largeur, trois cartes y seraient serrées. */
.fo-shop-corps .fo-vitrine { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1150px) {
  .fo-shop-corps .fo-vitrine { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fo-shop-grille { grid-template-columns: 1fr; gap: var(--fo-e-4); }
  .fo-filtres { position: static; }
  /* PAS une seule colonne : les filtres sont déjà passés au-dessus, la
     grille a toute la largeur. Un produit par ligne sur une tablette, c'est
     une vignette de six cents pixels et deux articles visibles. */
  .fo-shop-corps .fo-vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   LA FICHE PRODUIT

   La grammaire d'une boutique moderne : miniatures en colonne, grande image,
   colonne d'achat qui suit le défilement, prix avec l'économie, réassurance
   sous le bouton, accordéons pour le détail. Ce qui appartient au pack, c'est
   la matière — la braise, le serif, la mie.
   ============================================================================= */

.fo-fiche {
  background: var(--fo-fond-0);
  /* La réserve doit couvrir la capsule ENTIÈRE : son décalage, la languette
     qui dépasse au-dessus, puis sa hauteur. Avec e-5 le fil d'ariane venait
     se coller au menu (Jonas, 2026-08-04). */
  padding-block: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-7);
}

.fo-fiche-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-e-2);
  margin: 0 0 var(--fo-e-5);
  font-size: var(--fo-t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-fiche-fil a { color: inherit; text-decoration: none; }
.fo-fiche-fil a:hover { color: var(--fo-braise); }
.fo-fiche-fil-ici { color: var(--fo-txt); }

.fo-fiche-grille {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--fo-e-7);
  align-items: start;
}

/* ── LA GALERIE : miniatures en COLONNE, grande image à droite ── */
/* Deux colonnes SEULEMENT s'il y a des miniatures : sans elles, l'unique
   grande image tombait dans la piste de 84 px. Même piège que la colonne de
   sommaire du dossier d'article — une grille sans son premier enfant écrase
   le second. */
.fo-fiche-vues { display: block; }
.fo-fiche-vues-multi {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--fo-e-3);
  align-items: start;
}
.fo-vue-radio { position: absolute; opacity: 0; pointer-events: none; }

.fo-vue-mini { display: flex; flex-direction: column; gap: var(--fo-e-2); }
.fo-vue-choix {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--fo-rayon-2);
  background: var(--fo-fond-2);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--fo-transition), border-color var(--fo-transition),
              transform var(--fo-transition);
}
.fo-vue-choix:hover { opacity: 1; transform: translateX(2px); }
.fo-vue-choix img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fo-vue-cadre {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  background: var(--fo-fond-2);
  box-shadow: var(--fo-ombre-haute);
}
.fo-vue-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .45s cubic-bezier(.16, .8, .3, 1),
              transform 1.1s cubic-bezier(.22, .7, .25, 1);
}
/* Le zoom lent au survol : le seul mouvement de la fiche, et il suffit. */
.fo-vue-cadre:hover .fo-vue-img { transform: scale(1.06); }

.fo-fiche-remise {
  position: absolute;
  left: var(--fo-e-3); top: var(--fo-e-3);
  z-index: 2;
  padding: 8px 14px;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-family: var(--fo-titre);
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(181, 55, 43, .32);
}
.fo-fiche-epuise {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: var(--fo-e-3);
  background: rgba(42, 31, 23, .82);
  color: #fff;
  text-align: center;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fo-fiche-vide { aspect-ratio: 1; border-radius: var(--fo-rayon-img); }

/* ── LA COLONNE D'ACHAT ── */
.fo-fiche-achat { position: sticky; top: calc(var(--fo-menu-h) + var(--fo-e-4)); }

.fo-fiche-rayon {
  margin: 0 0 var(--fo-e-2);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fo-croute-fonce);
}
.fo-fiche-nom {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
/* La description COURTE reste courte à l'œil aussi : à --fo-t-l elle
   concurrençait le titre (Jonas, 2026-08-04). */
.fo-fiche-accroche {
  margin: var(--fo-e-3) 0 0;
  font-size: var(--fo-t-m);
  line-height: 1.6;
  color: var(--fo-txt-2);
}

.fo-fiche-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fo-e-3);
  margin: var(--fo-e-5) 0;
  padding-bottom: var(--fo-e-4);
  border-bottom: 1px solid var(--fo-trait);
}
.fo-fiche-somme {
  font-family: var(--fo-titre);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--fo-braise);
}
.fo-fiche-barre { font-size: var(--fo-t-l); color: var(--fo-txt-3); text-decoration: line-through; }
.fo-fiche-gain {
  flex-basis: 100%;
  font-size: var(--fo-t-s);
  color: var(--fo-olive);
  font-weight: 600;
}

.fo-fiche-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fo-e-3); }
.fo-fiche-qte { display: flex; flex-direction: column; gap: 6px; }
.fo-fiche-qte-mot {
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-fiche-qte input {
  width: 5.5rem;
  padding: .95em .8em;
  font: inherit;
  font-size: 1.05rem;
  text-align: center;
  color: var(--fo-txt);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait-fort);
  border-radius: 999px;
}
.fo-fiche-qte input:focus {
  outline: 0;
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}

/* Le bouton d'achat : GRAND, plein, et il ne se découvre pas au survol. */
.fo-fiche-btn {
  flex: 1 1 14rem;
  padding: 1.05em 1.8em;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition),
              box-shadow var(--fo-transition);
}
.fo-fiche-btn:hover {
  background: var(--fo-braise-fonce);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(181, 55, 43, .3);
}
.fo-fiche-btn:active { transform: translateY(0); }

.fo-fiche-indispo {
  margin: 0;
  padding: var(--fo-e-4);
  background: var(--fo-fond-2);
  border-left: 3px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon-2);
  color: var(--fo-txt-2);
  font-size: var(--fo-t-s);
}

.fo-fiche-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  margin: var(--fo-e-4) 0 0;
  padding: 0;
  list-style: none;
}
/* JAMAIS une pastille nue : une étiquette sans picto, c'est une bulle de
   texte, et ça salit une fiche produit. */
.s-shop-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 9px;
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-2);
}
.fo-etiq-picto {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  color: var(--fo-croute-fonce);
}
.fo-etiq-picto svg { width: 100%; height: 100%; display: block; }

/* ── LES ACCORDÉONS ──
   <details> natif : il s'ouvre sans script, il est accessible au clavier
   d'origine, et un moteur lit le contenu même fermé. */
.fo-fiche-detail { background: var(--fo-fond-0); padding-block: 0 var(--fo-section); }
.fo-fiche-detail-large { max-width: 900px; }

.fo-plie { border-bottom: 1px solid var(--fo-trait); }
.fo-plie:first-child { border-top: 1px solid var(--fo-trait); }
.fo-plie-tete {
  position: relative;
  padding: var(--fo-e-4) 42px var(--fo-e-4) 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
  cursor: pointer;
  list-style: none;
  transition: color var(--fo-transition);
}
.fo-plie-tete::-webkit-details-marker { display: none; }
.fo-plie-tete:hover { color: var(--fo-braise); }

/* Le chevron, dessiné en CSS : deux traits qui pivotent à l'ouverture. */
.fo-plie-tete::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--fo-croute);
  border-bottom: 2px solid var(--fo-croute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--fo-transition);
}
.fo-plie[open] > .fo-plie-tete::after { transform: translateY(-20%) rotate(-135deg); }

.fo-plie-corps {
  padding: 0 0 var(--fo-e-5);
  max-width: 68ch;
  line-height: 1.75;
  color: var(--fo-txt-2);
}
.fo-plie-corps p { margin: 0 0 var(--fo-e-3); }
.fo-plie-corps p:last-child { margin-bottom: 0; }

.fo-fiche-attributs { margin: 0; }
.fo-fiche-attributs .s-shop-attribut {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-3);
  padding: var(--fo-e-2) 0;
  border-bottom: 1px dashed var(--fo-trait);
}
.fo-fiche-attributs .s-shop-attribut:last-child { border-bottom: 0; }
.s-shop-attribut-nom { min-width: 10rem; margin: 0; font-weight: 700; color: var(--fo-txt); }
.s-shop-attribut-valeurs { margin: 0; color: var(--fo-txt-2); }

.fo-fiche-avis { background: var(--fo-fond-0); }

@media (max-width: 980px) {
  .fo-fiche-grille { grid-template-columns: 1fr; gap: var(--fo-e-5); }
  .fo-fiche-achat { position: static; }
}
@media (max-width: 560px) {
  .fo-fiche-vues { grid-template-columns: 1fr; }
  .fo-vue-mini { flex-direction: row; flex-wrap: wrap; }
  .fo-vue-choix { width: 68px; }
}

/* La vue choisie s'affiche, sa miniature se cercle. Huit vues câblées. */
.fo-vue-radio:nth-of-type(1):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(1),
.fo-vue-radio:nth-of-type(2):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(2),
.fo-vue-radio:nth-of-type(3):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(3),
.fo-vue-radio:nth-of-type(4):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(4),
.fo-vue-radio:nth-of-type(5):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(5),
.fo-vue-radio:nth-of-type(6):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(6),
.fo-vue-radio:nth-of-type(7):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(7),
.fo-vue-radio:nth-of-type(8):checked ~ .fo-vue-cadre .fo-vue-img:nth-of-type(8) {
  opacity: 1;
}
.fo-vue-radio:nth-of-type(1):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(1),
.fo-vue-radio:nth-of-type(2):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(2),
.fo-vue-radio:nth-of-type(3):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(3),
.fo-vue-radio:nth-of-type(4):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(4),
.fo-vue-radio:nth-of-type(5):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(5),
.fo-vue-radio:nth-of-type(6):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(6),
.fo-vue-radio:nth-of-type(7):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(7),
.fo-vue-radio:nth-of-type(8):checked ~ .fo-vue-mini .fo-vue-choix:nth-of-type(8) {
  opacity: 1;
  border-color: var(--fo-braise);
}


/* =============================================================================
   LA BANDE DES GAGES — ce qui vaut pour tout le fournil

   Ces arguments sont les MÊMES sur chaque produit : les répéter dans la
   colonne d'achat de chaque fiche, c'est du bruit. Une bande pleine largeur
   sur la couleur de la maison les dit une fois, et les dit fort.
   ============================================================================= */

.fo-gages {
  position: relative;
  /* Un dégradé, pas un aplat : la bande prend de la matière et ne fait plus
     bloc de couleur posé là. */
  background: linear-gradient(168deg,
              color-mix(in srgb, var(--fo-braise) 92%, #fff),
              var(--fo-braise) 52%,
              var(--fo-braise-fonce));
  color: #fff;
  /* Elle FLOTTE au-dessus des sections voisines : sans ombre elle avait l'air
     collée au fond (Jonas, 2026-08-04). */
  box-shadow: 0 -12px 30px rgba(181, 55, 43, .14),
              0 18px 44px rgba(181, 55, 43, .26);
  /* Écarts égaux À L'ŒIL, ce qui n'est pas la même chose qu'égaux au pixel :
     la boîte du picto laisse une douzaine de pixels de vide au-dessus du
     tracé, on les retire du haut. */
  padding-block: calc(var(--fo-e-6) - 12px) var(--fo-e-6);
}

/* Deux filets clairs sur les arêtes : la bande se termine net. */
.fo-gages::before,
.fo-gages::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .22);
  pointer-events: none;
}
.fo-gages::before { top: 0; }
.fo-gages::after  { bottom: 0; }

/* margin-inline: auto, JAMAIS margin: 0 — la classe de largeur centre par la
   marge automatique, et un `margin: 0` l'écrase en silence. C'est ce qui
   collait la bande à gauche. */
.fo-gages-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-5);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.fo-gage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.fo-gage-picto {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--fo-e-2);
  color: #fff;
  /* Un halo derrière le picto : il se détache du fond rouge sans qu'on ait
     besoin d'un cercle plein, qui alourdirait. */
  background: radial-gradient(circle,
              rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 68%);
  border-radius: 999px;
  transition: transform .45s cubic-bezier(.22, .7, .25, 1),
              background .45s cubic-bezier(.22, .7, .25, 1);
}
.fo-gage-picto svg { width: 30px; height: 30px; display: block; }
.fo-gage:hover .fo-gage-picto {
  transform: translateY(-4px) scale(1.06);
  background: radial-gradient(circle,
              rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 72%);
}

.fo-gage-titre {
  font-family: var(--fo-titre);
  font-size: 1.2rem;
  line-height: 1.15;
}
/* Les trois textes tiennent sur UNE ligne : c'est ce qui garde le bas de la
   bande net. Un texte plus long chez un client repoussera sa colonne, et
   c'est très bien — mieux vaut une colonne plus haute qu'un texte coupé. */
.fo-gage-mot {
  max-width: 26ch;
  font-size: var(--fo-t-s);
  line-height: 1.45;
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* Un filet de séparation entre les colonnes, pas une bordure de tableau : il
   ne monte pas jusqu'aux bords, il tient le milieu. */
.fo-gage { position: relative; }
.fo-gage + .fo-gage::before {
  content: '';
  position: absolute;
  left: calc(var(--fo-e-5) / -2);
  top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom,
              transparent, rgba(255, 255, 255, .28), transparent);
}

@media (max-width: 760px) {
  .fo-gages-liste { grid-template-columns: 1fr; gap: var(--fo-e-4); }
  .fo-gage + .fo-gage::before {
    left: 15%; right: 15%;
    top: calc(var(--fo-e-4) / -2); bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right,
                transparent, rgba(255, 255, 255, .28), transparent);
  }
}

/* =============================================================================
   LA CONFIRMATION D'AJOUT AU PANIER

   Elle s'ouvre parce que l'adresse porte `?panier=ok`, pas parce qu'un script
   l'a décidé. Le voile et la croix sont des LIENS vers la même page sans le
   paramètre : fermer, c'est revenir à l'état normal.
   ============================================================================= */

.fo-ajout {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* au-dessus du menu, qui est à 30 */
  display: grid;
  place-items: center;
  padding: var(--fo-e-4);
}

.fo-ajout-voile {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 9, .58);
  backdrop-filter: blur(3px);
  animation: fo-voile .35s ease both;
}
@keyframes fo-voile { from { opacity: 0; } to { opacity: 1; } }

.fo-ajout-carte {
  position: relative;
  width: min(100%, 520px);
  padding: var(--fo-e-6) var(--fo-e-5) var(--fo-e-5);
  background: var(--fo-fond-0);
  border-radius: var(--fo-rayon-img);
  box-shadow: 0 30px 80px rgba(20, 14, 9, .38);
  text-align: center;
  animation: fo-ajout-entre .45s cubic-bezier(.16, .8, .3, 1) both;
}
@keyframes fo-ajout-entre {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.fo-ajout-croix {
  position: absolute;
  right: var(--fo-e-3); top: var(--fo-e-3);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  color: var(--fo-txt-3);
  transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-ajout-croix svg { width: 17px; height: 17px; }
.fo-ajout-croix:hover { background: var(--fo-fond-2); color: var(--fo-txt); }

/* La coche : elle se DESSINE à l'ouverture, c'est ce qui donne le sentiment
   que quelque chose vient de se passer. */
.fo-ajout-coche {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--fo-e-4);
  background: var(--fo-olive);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--fo-olive) 42%, transparent);
}
.fo-ajout-coche svg { width: 30px; height: 30px; }
.fo-ajout-coche path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: fo-trace .5s cubic-bezier(.16, .8, .3, 1) .18s both;
}
@keyframes fo-trace { to { stroke-dashoffset: 0; } }

.fo-ajout-coche-rate {
  background: var(--fo-braise);
  box-shadow: 0 10px 26px rgba(181, 55, 43, .35);
}

.fo-ajout-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-ajout-mot {
  margin: var(--fo-e-2) 0 var(--fo-e-5);
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

.fo-ajout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-2);
  margin: 0;
}

/* Personne ne subit une animation : le panneau apparaît, sans plus. */
@media (prefers-reduced-motion: reduce) {
  .fo-ajout-carte, .fo-ajout-voile, .fo-ajout-coche path { animation: none; }
  .fo-ajout-coche path { stroke-dashoffset: 0; }
}

/* =============================================================================
   LE PANIER AU SURVOL

   Un RACCOURCI, jamais le seul chemin : le clic sur l'icône mène toujours à
   /panier. Il s'ouvre au survol ET au clavier (:focus-within), et reste caché
   au doigt — « survoler » n'existe pas sur un écran tactile, et un panneau
   qui s'ouvre sur un effleurement est une plaie. Aucun JavaScript.
   ============================================================================= */

/* La zone du panier doit AUTORISER le débordement du panneau : c'est le
   parent de la nav qui porte le défilement horizontal, pas cet élément. */
.fo-boutique { position: relative; }

.fo-mini {
  position: absolute;
  right: -8px; top: calc(100% + 12px);
  z-index: 40;
  width: 320px;
  padding: var(--fo-e-4);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: 0 24px 60px rgba(20, 14, 9, .26);
  text-align: left;
  /* Fermé : invisible ET hors du chemin de la souris. `visibility` plutôt
     que `display` pour que la transition existe. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--fo-transition), transform var(--fo-transition),
              visibility 0s linear var(--fo-transition);
}

/* Le petit bec qui rattache le panneau à l'icône. */
.fo-mini::before {
  content: '';
  position: absolute;
  right: 26px; top: -6px;
  width: 11px; height: 11px;
  background: var(--fo-fond-0);
  border-left: 1px solid var(--fo-trait);
  border-top: 1px solid var(--fo-trait);
  transform: rotate(45deg);
}
/* Un pont invisible entre l'icône et le panneau : sans lui, la souris passe
   « à travers » les douze pixels de vide et le panneau se referme. */
.fo-mini::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}

.fo-boutique:hover .fo-mini,
.fo-boutique:focus-within .fo-mini {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.fo-mini-liste { margin: 0; padding: 0; list-style: none; }
.fo-mini-ligne {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--fo-e-3);
  padding: var(--fo-e-2) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.fo-mini-ligne:last-child { border-bottom: 0; }

.fo-mini-vue {
  display: block;
  width: 44px; height: 44px;
  overflow: hidden;
  border-radius: var(--fo-rayon-2);
  background: var(--fo-fond-2);
}
.fo-mini-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fo-mini-mots { display: flex; flex-direction: column; min-width: 0; }
.fo-mini-mots b {
  font-family: var(--fo-titre);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fo-txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fo-mini-mots small { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }
.fo-mini-somme { font-size: var(--fo-t-s); color: var(--fo-txt-2); white-space: nowrap; }

.fo-mini-reste {
  margin: var(--fo-e-2) 0 0;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  text-align: center;
}

.fo-mini-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  margin: var(--fo-e-3) 0 var(--fo-e-3);
  padding-top: var(--fo-e-3);
  border-top: 1px solid var(--fo-trait-fort);
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
}
.fo-mini-total b { font-family: var(--fo-titre); font-size: 1.3rem; color: var(--fo-braise); }

.fo-mini-actions { margin: 0; }
.fo-mini-actions .fo-btn { display: block; text-align: center; }

/* Au doigt, on ne survole pas : le panneau ne s'ouvre jamais, le clic sur
   l'icône emmène directement au panier. */
@media (hover: none) {
  .fo-mini { display: none; }
}

/* =============================================================================
   LE TUNNEL — le fil d'étapes, puis le panier

   Pas de bannière image sur ces pages : dans un tunnel, ce qu'on veut savoir
   c'est où l'on en est. La place va au fil d'étapes.
   ============================================================================= */

.fo-fil {
  background: var(--fo-fond-4);
  padding-block: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-5);
  text-align: center;
}
.fo-fil-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0 0 var(--fo-e-5);
}

.fo-fil-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--fo-e-2);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: none;
}
.fo-fil-pas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--fo-e-3);
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
}
/* Le trait qui relie deux étapes : il dit que c'est un chemin, pas trois
   boutons posés côte à côte. */
.fo-fil-pas + .fo-fil-pas::before {
  content: '';
  width: clamp(18px, 5vw, 54px);
  height: 1px;
  margin-right: var(--fo-e-3);
  background: var(--fo-trait-fort);
}

.fo-fil-rond {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--fo-trait-fort);
  border-radius: 999px;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  background: var(--fo-carte);
}
.fo-fil-rond svg { width: 15px; height: 15px; }

.fo-fil-faite { color: var(--fo-txt-2); }
.fo-fil-faite .fo-fil-rond {
  background: var(--fo-olive);
  border-color: var(--fo-olive);
  color: #fff;
}
.fo-fil-ici { color: var(--fo-txt); font-weight: 700; }
.fo-fil-ici .fo-fil-rond {
  background: var(--fo-braise);
  border-color: var(--fo-braise);
  color: #fff;
  box-shadow: 0 0 0 4px var(--fo-braise-voile);
}

@media (max-width: 620px) {
  .fo-fil-nom { display: none; }   /* les ronds suffisent, la place manque */
  .fo-fil-pas { padding: 0; }
}

/* ── LA PAGE PANIER ── */
.fo-tunnel { background: var(--fo-fond-0); }
.fo-tunnel-grille {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--fo-e-6);
  align-items: start;
}

.fo-lignes-liste { margin: 0; padding: 0; list-style: none; }
.fo-ligne {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  align-items: center;
  gap: var(--fo-e-4);
  padding: var(--fo-e-4) 0;
  border-bottom: 1px solid var(--fo-trait);
}
.fo-ligne:first-child { border-top: 1px solid var(--fo-trait); }

.fo-ligne-vue {
  display: block;
  width: 88px; height: 88px;
  overflow: hidden;
  border-radius: var(--fo-rayon-2);
  background: var(--fo-fond-2);
}
.fo-ligne-vue img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .7, .25, 1);
}
.fo-ligne:hover .fo-ligne-vue img { transform: scale(1.06); }

.fo-ligne-mots { min-width: 0; }
.fo-ligne-nom { font-size: 1.1rem; line-height: 1.2; margin: 0 0 3px; }
.fo-ligne-nom a { color: inherit; text-decoration: none; }
.fo-ligne-nom a:hover { color: var(--fo-braise); }
.fo-ligne-unite { margin: 0; font-size: var(--fo-t-xs); color: var(--fo-txt-3); }

.fo-ligne-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--fo-e-2) 0 0;
  padding: 0;
  list-style: none;
}
.s-shop-panier-label {
  padding: 3px 9px;
  background: color-mix(in srgb, var(--fo-olive) 12%, transparent);
  border-radius: 999px;
  font-size: .6875rem;
  color: var(--fo-olive);
}

.fo-ligne-qte { display: flex; align-items: center; gap: var(--fo-e-2); margin: 0; }
.s-shop-panier-qty-input {
  width: 4.4rem;
  padding: .55em .5em;
  font: inherit;
  text-align: center;
  color: var(--fo-txt);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait-fort);
  border-radius: 999px;
}
.s-shop-panier-qty-input:focus {
  outline: 0;
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
/* Le bouton de validation est DISCRET mais toujours là : sans JavaScript,
   une quantité changée doit être soumise, et l'oublier vaut un panier faux. */
.fo-ligne-maj {
  padding: .5em .9em;
  font: inherit;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-2);
  background: none;
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-ligne-maj:hover { background: var(--fo-txt); border-color: var(--fo-txt); color: var(--fo-fond-0); }

.fo-ligne-somme {
  margin: 0;
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--fo-titre);
  font-size: 1.2rem;
  color: var(--fo-txt);
}

.fo-ligne-oter { margin: 0; }
.fo-ligne-oter-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--fo-txt-3);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-ligne-oter-btn svg { width: 16px; height: 16px; }
.fo-ligne-oter-btn:hover { background: var(--fo-braise-voile); color: var(--fo-braise); }

.fo-lignes-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-e-3);
  margin-top: var(--fo-e-4);
}
.fo-lignes-retour { font-size: var(--fo-t-s); color: var(--fo-braise); font-weight: 600; }
.fo-lignes-vider {
  padding: 0;
  font: inherit;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fo-trait-fort);
  cursor: pointer;
}
.fo-lignes-vider:hover { color: var(--fo-braise); border-color: var(--fo-braise); }

/* ── LE RÉCAPITULATIF ── */
.fo-recap {
  position: sticky;
  top: calc(var(--fo-menu-h) + var(--fo-e-3));
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-recap-titre { font-size: var(--fo-t-l); margin: 0 0 var(--fo-e-4); }

.fo-recap-lignes { margin: 0 0 var(--fo-e-3); }
.fo-recap-lignes > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  padding: 5px 0;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
}
.fo-recap-lignes dt, .fo-recap-lignes dd { margin: 0; }
.fo-recap-remise { color: var(--fo-olive) !important; font-weight: 600; }
.fo-recap-tva { color: var(--fo-txt-3) !important; font-size: var(--fo-t-xs) !important; }

.fo-recap-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-e-3);
  margin: 0 0 var(--fo-e-4);
  padding-top: var(--fo-e-3);
  border-top: 1px solid var(--fo-trait-fort);
}
.fo-recap-total b { font-family: var(--fo-titre); font-size: 1.9rem; color: var(--fo-braise); }

.fo-recap-actions { margin: 0; }
.fo-recap-btn {
  display: block;
  padding: 1em 1.6em;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--fo-transition), transform var(--fo-transition),
              box-shadow var(--fo-transition);
}
.fo-recap-btn:hover {
  background: var(--fo-braise-fonce);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(181, 55, 43, .3);
}

.fo-recap-gages {
  margin: var(--fo-e-4) 0 0;
  padding: var(--fo-e-4) 0 0;
  border-top: 1px solid var(--fo-trait);
  list-style: none;
}
.fo-recap-gages li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-2);
}
.fo-recap-gages li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--fo-olive)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
}

/* ── LE PANIER VIDE ── */
.fo-vide-picto {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto var(--fo-e-4);
  color: var(--fo-croute);
}
.fo-vide-picto svg { width: 100%; height: 100%; display: block; }
.fo-vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fo-e-2); margin: 0; }

@media (max-width: 1000px) {
  .fo-tunnel-grille { grid-template-columns: 1fr; }
  .fo-recap { position: static; }
}
@media (max-width: 700px) {
  .fo-ligne {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: 'vue mots oter' 'vue qte somme';
    row-gap: var(--fo-e-2);
  }
  .fo-ligne-vue  { grid-area: vue; width: 72px; height: 72px; }
  .fo-ligne-mots { grid-area: mots; }
  .fo-ligne-qte  { grid-area: qte; }
  .fo-ligne-somme{ grid-area: somme; }
  .fo-ligne-oter { grid-area: oter; justify-self: end; }
}

/* ── Le tunnel sur une seule colonne (commande, confirmation) ── */
.fo-tunnel-seul { background: var(--fo-fond-0); }
.fo-tunnel-seul .fo-large { max-width: 860px; }

/* ── La page connexion ── */
.fo-porte-corps { background: var(--fo-fond-0); }

/* =============================================================================
   LES PORTES DU COMPTE — se connecter, s'inscrire, mot de passe perdu

   COMPACT, et 80 % de la largeur au plus (Jonas, 2026-08-04) : c'est une
   page fonctionnelle, pas une page éditoriale. Les tailles éditoriales
   n'ont rien à faire ici.
   ============================================================================= */

.fo-porte-corps { background: var(--fo-fond-0); }

.fo-portes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fo-e-4);
  align-items: start;
  width: 80%;
  margin-inline: auto;
}
/* Le mot de passe perdu est seul : une colonne étroite, centrée. */
.fo-portes-seule { grid-template-columns: 1fr; max-width: 460px; width: 100%; }

.s-shop-connexion-success, .s-shop-connexion-error,
.s-shop-connexion-deja, .s-shop-connexion-code,
.fo-portes-suite { grid-column: 1 / -1; }

.fo-porte-bloc {
  margin: 0;
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}

/* Un titre de FORMULAIRE : à la taille d'un titre de page, il écrasait les
   champs qu'il annonce. */
.fo-porte-h {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 var(--fo-e-3);
  padding-bottom: var(--fo-e-2);
  border-bottom: 1px solid var(--fo-trait);
}

.fo-porte-perdu { margin: var(--fo-e-3) 0 0; font-size: var(--fo-t-xs); text-align: center; }
.fo-porte-perdu a { color: var(--fo-txt-3); }
.fo-porte-perdu a:hover { color: var(--fo-braise); }
.fo-porte-retour { margin: var(--fo-e-3) 0 0; font-size: var(--fo-t-xs); text-align: center; }
.fo-porte-mot { margin: 0 0 var(--fo-e-4); font-size: var(--fo-t-s); color: var(--fo-txt-2); line-height: 1.55; }
.fo-portes-suite { text-align: center; }

/* ── Les champs, compacts ── */
.s-shop-connexion-champ { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--fo-e-3); }
/* PAS de retour à la ligne : le « i » doit rester au bout de son libellé,
   pas se retrouver seul sur la ligne d'en dessous. */
.s-shop-connexion-champ label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
}
.s-shop-connexion-optionnel {
  font-size: .625rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fo-txt-3);
}
.s-shop-connexion-input {
  width: 100%;
  padding: .6em .8em;
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond-0);
  border: 1px solid var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition), background var(--fo-transition);
}
.s-shop-connexion-input:focus {
  outline: 0;
  background: var(--fo-carte);
  border-color: var(--fo-braise);
  box-shadow: 0 0 0 3px var(--fo-braise-voile);
}
.s-shop-connexion-input[readonly] { background: var(--fo-fond-2); color: var(--fo-txt-2); }

.s-shop-connexion-hp { display: none !important; }

.s-shop-connexion-submit {
  width: 100%;
  padding: .7em 1.4em;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--fo-braise);
  border: 1px solid var(--fo-braise);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), transform var(--fo-transition);
}
.s-shop-connexion-submit:hover { background: var(--fo-braise-fonce); transform: translateY(-2px); }

.s-shop-password-wrap { position: relative; display: flex; align-items: center; }
.s-shop-password-eye {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  color: var(--fo-txt-3);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.s-shop-password-eye:hover { background: var(--fo-fond-2); color: var(--fo-txt); }

/* ── LE CHOIX DU MOT DE PASSE, en deux positions ──
   Un interrupteur, pas deux boutons : la position active glisse. */
.fo-mdp-mode {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 var(--fo-e-3);
  padding: 3px;
  background: var(--fo-fond-2);
  border-radius: 999px;
}
.fo-mdp-btn {
  padding: 6px 14px;
  font: inherit;
  font-size: var(--fo-t-xs);
  font-weight: 600;
  color: var(--fo-txt-2);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-mdp-btn:hover { color: var(--fo-txt); }
.fo-mdp-on {
  background: var(--fo-carte);
  color: var(--fo-braise);
  box-shadow: var(--fo-ombre);
}

.fo-mdp-note {
  margin: calc(var(--fo-e-3) * -1) 0 var(--fo-e-3);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--fo-croute) 14%, transparent);
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-xs);
  color: var(--fo-croute-fonce);
}

/* ── LE « i » ET SA BULLE ──
   <details> natif : il s'ouvre sans script, au clavier d'origine, et un
   moteur lit les conseils même fermés. */
.fo-champ-tete { display: flex; align-items: center; gap: 6px; }
.fo-champ-tete label { flex: 1 1 auto; }
.fo-aide-pli { position: relative; display: inline-block; flex: 0 0 auto; }
.fo-aide-i {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 1px solid var(--fo-trait-fort);
  border-radius: 999px;
  font-family: var(--fo-titre);
  font-size: .625rem;
  font-style: italic;
  color: var(--fo-txt-3);
  cursor: pointer;
  list-style: none;
  transition: background var(--fo-transition), color var(--fo-transition), border-color var(--fo-transition);
}
.fo-aide-i::-webkit-details-marker { display: none; }
.fo-aide-i:hover, .fo-aide-pli[open] .fo-aide-i {
  background: var(--fo-braise);
  border-color: var(--fo-braise);
  color: #fff;
}
.fo-aide-bulle {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  z-index: 20;
  display: block;
  width: 250px;
  padding: var(--fo-e-3);
  background: var(--fo-fond-3);
  color: var(--fo-txt-clair);
  border-radius: var(--fo-rayon-2);
  box-shadow: 0 16px 40px rgba(20, 14, 9, .35);
}
.fo-aide-bulle .s-shop-password-regles {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.fo-aide-bulle li { padding: 3px 0 3px 12px; position: relative; }
.fo-aide-bulle li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fo-croute);
}

@media (max-width: 900px) {
  .fo-portes { grid-template-columns: 1fr; width: 100%; max-width: 460px; }
}

/* =============================================================================
   MON COMPTE — menu vertical et panneaux

   La prise du kit rend toutes ses sections d'un bloc. Elles sont SŒURS, donc
   les radios posées avant elle les atteignent par `~` : on n'en montre
   qu'une, sans copier la prise et sans JavaScript.

   Menu VERTICAL à gauche : quatrième présentation d'onglets du pack, et elle
   ne ressemble à aucune des trois autres.
   ============================================================================= */

.fo-compte {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--fo-e-6);
  align-items: start;
  width: 80%;
  margin-inline: auto;
}
.fo-compte-seul { width: 80%; margin-inline: auto; }
.fo-compte-radio { position: absolute; opacity: 0; pointer-events: none; }

.fo-compte-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--fo-menu-h) + var(--fo-e-3));
}
.fo-compte-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--fo-rayon-2);
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
  cursor: pointer;
  transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-compte-item:hover { background: var(--fo-fond-2); color: var(--fo-txt); }
.fo-compte-picto {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  color: var(--fo-croute);
}
.fo-compte-picto svg { width: 100%; height: 100%; display: block; }

/* Le panneau ouvert : la prise du kit est le second enfant de la grille. */
.fo-compte .s-shop-compte {
  padding: var(--fo-e-5);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}

/* Par défaut TOUT est masqué, sauf ce qui doit rester visible en permanence :
   les messages de retour et la déconnexion. */
.fo-compte .s-shop-compte-infos,
.fo-compte .s-shop-compte-mdp,
.fo-compte .s-shop-compte-commandes,
.fo-compte .s-shop-compte-abonnements,
.fo-compte .s-shop-compte-licences,
.fo-compte .s-shop-compte-adresses,
.fo-compte .s-shop-adresse-nouvelle,
.fo-compte .s-tickets { display: none; }

/* ⚠️ LE FORMULAIRE D'AJOUT PORTE DEUX CLASSES : `s-shop-adresse-form` ET
   `s-shop-adresse-nouvelle`. Le masquage ci-dessus le visait par la seconde,
   à poids égal (0,2,0) avec la règle qui habille la PREMIÈRE — et celle-là
   est écrite plus bas, donc elle gagnait. Résultat : le formulaire d'ajout
   d'adresse restait ouvert dans TOUS les onglets du compte, « Mes commandes »
   compris.

   On vise donc les deux classes ensemble (0,3,0) : le masquage repasse
   devant, et la règle `:checked` qui montre l'onglet (1,3,0) reste au-dessus.

   Défaut resté invisible tant que la démonstration servait une COPIE du
   balisage de la prise. Il s'est vu le jour où on a branché la vraie. */
.fo-compte .s-shop-adresse-form.s-shop-adresse-nouvelle { display: none; }


/* MES COMMANDES — c'est ce qu'on vient chercher, donc l'onglet par défaut. */
#fo-cpt-commandes:checked ~ .s-shop-compte .s-shop-compte-commandes,
#fo-cpt-commandes:checked ~ .s-shop-compte .s-shop-compte-abonnements,
#fo-cpt-commandes:checked ~ .s-shop-compte .s-shop-compte-licences { display: block; }

/* MES INFORMATIONS — état civil et mot de passe vont ensemble. */
#fo-cpt-infos:checked ~ .s-shop-compte .s-shop-compte-infos,
#fo-cpt-infos:checked ~ .s-shop-compte .s-shop-compte-mdp { display: block; }

/* MES ADRESSES — la liste ET le formulaire d'ajout, qui en est le frère. */
#fo-cpt-adresses:checked ~ .s-shop-compte .s-shop-compte-adresses { display: block; }
#fo-cpt-adresses:checked ~ .s-shop-compte .s-shop-adresse-nouvelle { display: block; }

/* MES DEMANDES — la prise tickets, auto-incluse par le compte. */
#fo-cpt-demandes:checked ~ .s-shop-compte .s-tickets { display: block; }

/* L'entrée active du menu. Les radios précèdent le menu, donc `~` marche. */
#fo-cpt-commandes:checked ~ .fo-compte-menu .fo-compte-item:nth-child(1),
#fo-cpt-infos:checked     ~ .fo-compte-menu .fo-compte-item:nth-child(2),
#fo-cpt-adresses:checked  ~ .fo-compte-menu .fo-compte-item:nth-child(3),
#fo-cpt-demandes:checked  ~ .fo-compte-menu .fo-compte-item:nth-child(4) {
  background: var(--fo-braise);
  color: #fff;
  font-weight: 600;
}
#fo-cpt-commandes:checked ~ .fo-compte-menu .fo-compte-item:nth-child(1) .fo-compte-picto,
#fo-cpt-infos:checked     ~ .fo-compte-menu .fo-compte-item:nth-child(2) .fo-compte-picto,
#fo-cpt-adresses:checked  ~ .fo-compte-menu .fo-compte-item:nth-child(3) .fo-compte-picto,
#fo-cpt-demandes:checked  ~ .fo-compte-menu .fo-compte-item:nth-child(4) .fo-compte-picto { color: #fff; }

/* Le focus clavier se voit sur le libellé, pas sur la radio invisible. */
#fo-cpt-commandes:focus-visible ~ .fo-compte-menu .fo-compte-item:nth-child(1),
#fo-cpt-infos:focus-visible     ~ .fo-compte-menu .fo-compte-item:nth-child(2),
#fo-cpt-adresses:focus-visible  ~ .fo-compte-menu .fo-compte-item:nth-child(3),
#fo-cpt-demandes:focus-visible  ~ .fo-compte-menu .fo-compte-item:nth-child(4) {
  outline: 2px solid var(--fo-braise);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .fo-compte, .fo-compte-seul { grid-template-columns: 1fr; width: 100%; }
  .fo-compte-menu { position: static; flex-direction: row; flex-wrap: wrap; }
}


/* =============================================================================
   LE CONTENU DU COMPTE — relevé, informations, adresses, demandes
   🔴 2026-08-09 — CE BLOC N'EXISTAIT PAS. Le pack ne stylait QUE l'affichage
   et le masquage des panneaux : à l'intérieur, tout sortait brut — le relevé
   de commandes en liste à puces avec des liens soulignés, les champs
   d'adresse en pleine largeur les uns sous les autres, les demandes idem.
   Personne ne l'avait vu parce que personne n'avait jamais ouvert un compte
   CONNECTÉ : la page redirigeait vers la connexion, et il fallait un mot de
   passe pour aller plus loin. C'est la démonstration statique qui a montré
   l'intérieur pour la première fois.
   ============================================================================= */

/* ── UN TITRE DE PANNEAU ── */
.fo-compte .s-shop-compte-commandes-titre,
.fo-compte .s-shop-compte-abonnements-titre,
.fo-compte .s-shop-compte-licences-titre,
.fo-compte .s-shop-compte-mdp-titre,
.fo-compte .s-tickets-titre,
.fo-compte .s-ticket-nouvelle-titre {
  margin: 0 0 var(--fo-e-4);
  padding-bottom: var(--fo-e-2);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: var(--fo-txt-3);
  border-bottom: 1px solid var(--fo-trait);
}

/* ── LE RELEVÉ : des LIGNES, pas des cartes ──
   Un relevé se parcourt de haut en bas, colonne par colonne. Des cartes
   obligeraient l'œil à zigzaguer pour comparer deux dates. */
.fo-compte .s-shop-compte-commandes-liste,
.fo-compte .s-shop-compte-abonnements-liste,
.fo-compte .s-shop-licences-liste,
.fo-compte .s-tickets-liste { margin: 0 0 var(--fo-e-5); padding: 0; list-style: none; }
.fo-compte .s-shop-compte-commande,
.fo-compte .s-ticket { border-bottom: 1px solid var(--fo-trait); }
.fo-compte .s-shop-compte-commande-lien,
.fo-compte .s-ticket-lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--fo-e-1) var(--fo-e-4);
  padding: var(--fo-e-3) 0;
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--fo-transition);
}
.fo-compte .s-shop-compte-commande-lien:hover,
.fo-compte .s-ticket-lien:hover { padding-left: 10px; }
.fo-compte .s-shop-compte-commande-numero,
.fo-compte .s-ticket-sujet {
  grid-column: 1; grid-row: 1;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-m);
  color: var(--fo-txt);
}
.fo-compte .s-shop-compte-commande-date,
.fo-compte .s-ticket-date {
  grid-column: 1; grid-row: 2;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
}
.fo-compte .s-shop-compte-commande-statut,
.fo-compte .s-ticket-etat {
  grid-column: 2; grid-row: 1 / span 2;
  justify-self: end;
  padding: 4px 9px;
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-txt-2);
  background: var(--fo-fond-2);
  border-radius: var(--fo-rayon);
}
/* L'état qui attend QUELQUE CHOSE DE MOI se voit : c'est la seule ligne sur
   laquelle le client a une action à faire. */
.fo-compte .s-ticket[data-etat="attente_client"] .s-ticket-etat {
  color: var(--fo-braise);
  background: var(--fo-braise-voile);
}
.fo-compte .s-shop-compte-commande-total {
  grid-column: 3; grid-row: 1 / span 2;
  justify-self: end;
  min-width: 7ch;
  text-align: right;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-m);
  color: var(--fo-txt);
}
.fo-compte .s-tickets-vide,
.fo-compte .s-shop-compte-commandes-vide {
  margin: 0 0 var(--fo-e-5);
  font-size: var(--fo-t-s);
  color: var(--fo-txt-3);
}

/* ── MES INFORMATIONS ── */
.fo-compte .s-shop-compte-infos { display: grid; gap: var(--fo-e-1); margin-bottom: var(--fo-e-5); }
.fo-compte .s-shop-compte-nom {
  margin: 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt);
}
.fo-compte .s-shop-compte-email,
.fo-compte .s-shop-compte-telephone { margin: 0; font-size: var(--fo-t-s); color: var(--fo-txt-2); }

/* ── LES FORMULAIRES : DEUX COLONNES, jamais des champs pleine largeur
   empilés (règle du kit). Le mot de passe, l'adresse et la demande suivent
   tous la même grille : trois formulaires côte à côte dans un même écran
   doivent se ressembler. ── */
.fo-compte .s-shop-compte-mdp-form,
.fo-compte .s-shop-adresse-form,
.fo-compte .s-ticket-nouvelle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fo-e-3) var(--fo-e-4);
}
.fo-compte .s-shop-adresse-label,
.fo-compte .s-shop-adresse-email,
.fo-compte .s-shop-adresse-defaut-livraison,
.fo-compte .s-shop-adresse-defaut-facturation,
.fo-compte .s-shop-adresse-supprimer,
.fo-compte .s-ticket-nouvelle-titre,
.fo-compte .s-ticket-commande,
.fo-compte .s-shop-compte-mdp-champ:has(.s-shop-compte-mdp-submit),
.fo-compte .s-shop-adresse-champ:has(.s-shop-adresse-submit),
.fo-compte .s-ticket-champ:has(.s-ticket-textarea),
.fo-compte .s-ticket-champ:has(.s-ticket-nouvelle-submit) { grid-column: 1 / -1; }

.fo-compte .s-shop-compte-mdp-champ,
.fo-compte .s-shop-adresse-champ,
.fo-compte .s-ticket-champ { margin: 0; display: grid; gap: 6px; }
.fo-compte .s-shop-compte-mdp-champ > label,
.fo-compte .s-shop-adresse-champ > label,
.fo-compte .s-ticket-champ > label {
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-compte .s-ticket-optionnel {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fo-txt-3);
}
.fo-compte .s-shop-compte-mdp-input,
.fo-compte .s-shop-adresse-input,
.fo-compte .s-ticket-input,
.fo-compte .s-ticket-textarea {
  width: 100%;
  padding: var(--fo-e-2) var(--fo-e-3);
  font: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon);
}
.fo-compte .s-ticket-textarea { resize: vertical; min-height: 7em; }
.fo-compte .s-shop-compte-mdp-input:focus-visible,
.fo-compte .s-shop-adresse-input:focus-visible,
.fo-compte .s-ticket-input:focus-visible,
.fo-compte .s-ticket-textarea:focus-visible {
  outline: 2px solid var(--fo-croute);
  outline-offset: 2px;
  border-color: var(--fo-croute);
}

/* ── MES ADRESSES : DES FICHES REPLIÉES, UNE SEULE OUVERTE ──
   🔴 Refonte 2026-08-09 (Jonas). Avant : toutes les adresses en cartes, TOUS
   les formulaires ouverts en même temps. « Si il en a 20 c'est compliqué » —
   et c'est vrai, on cherchait sa propre adresse au milieu de soixante champs.

   LE PRINCIPE. Fermée, une adresse est une LIGNE : le libellé, l'adresse en
   clair, et les pastilles qui disent à quoi elle sert. On clique dedans, elle
   s'ouvre en formulaire deux colonnes. Les autres restent fermées.

   POURQUOI `:focus-within` ET PAS UNE CASE À COCHER. Le pack ne peut pas
   ajouter de bouton « Modifier » : la prise rend la liste elle-même, et un
   pack n'a pas le droit de réécrire son balisage. `:focus-within` est ce qui
   s'en approche sans mentir — cliquer dans une fiche la déplie, en sortir la
   replie. Un vrai bouton demande que la prise émette une case + un label,
   c'est la remontée n° 25.

   POURQUOI DES LIGNES ET PAS DES TUILES. Les tuiles étroites gaspillaient la
   largeur : « tu finis par travailler sur un timbre poste » (Jonas). Une
   ligne prend toute la largeur disponible et deux lignes de haut. Vingt
   adresses tiennent à l'écran. */

#fo-cpt-adresses:checked ~ .s-shop-compte .s-shop-compte-adresses { display: flex; }
.fo-compte .s-shop-compte-adresses {
  flex-direction: column;
  gap: var(--fo-e-2);
  margin: 0 0 var(--fo-e-5);
  padding: 0;
  list-style: none;
}

/* L'ORDRE : la facturation par défaut en tête, puis la livraison par défaut
   si c'est une autre fiche, puis le reste. C'est l'ordre dans lequel on les
   cherche. Les marqueurs viennent de la prise, on ne devine rien. */
.fo-compte .s-shop-compte-adresse[data-defaut-facturation="1"] { order: -2; }
.fo-compte .s-shop-compte-adresse[data-defaut-livraison="1"]   { order: -1; }
.fo-compte .s-shop-compte-adresse[data-defaut-facturation="1"][data-defaut-livraison="1"] { order: -3; }

.fo-compte .s-shop-compte-adresse {
  position: relative;
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-left: 3px solid var(--fo-trait);
  border-radius: var(--fo-rayon);
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-compte .s-shop-compte-adresse:hover { border-color: var(--fo-trait-fort); }

/* LES DEUX RÔLES, DEUX COULEURS. La facturation prend la braise (celle des
   actions), la livraison l'olive : deux teintes déjà au pack, qu'on ne
   confond pas, et qui ne se disputent pas l'attention. */
.fo-compte .s-shop-compte-adresse[data-defaut-facturation="1"] { border-left-color: var(--fo-braise); }
.fo-compte .s-shop-compte-adresse[data-defaut-livraison="1"]   { border-left-color: var(--fo-olive); }
.fo-compte .s-shop-compte-adresse[data-defaut-facturation="1"][data-defaut-livraison="1"] {
  border-left-color: var(--fo-braise);
  border-image: linear-gradient(var(--fo-braise) 50%, var(--fo-olive) 50%) 1;
  border-image-width: 0 0 0 3px;
}

/* ── FERMÉE : une ligne qui se lit ── */
.fo-compte .s-shop-adresse-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
/* Les libellés de champ n'ont aucun sens sur une fiche repliée : « Ville »
   devant « Bordeaux » n'apprend rien à personne. */
.fo-compte .s-shop-adresse-form .s-shop-adresse-champ > label { display: none; }
.fo-compte .s-shop-adresse-champ { display: contents; }
.fo-compte .s-shop-adresse-input {
  width: auto;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
  background: none;
  border: 0;
  border-radius: 0;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Le libellé de la fiche EST son titre. */
.fo-compte .s-shop-adresse-label .s-shop-adresse-input {
  flex-basis: 100%;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-m);
  color: var(--fo-txt);
}
/* Ce qu'on ne montre pas quand c'est replié : le contact, le pays, les cases,
   les boutons. On garde le nom et l'adresse postale, c'est ce qui identifie. */
.fo-compte .s-shop-compte-adresse .s-shop-adresse-email,
.fo-compte .s-shop-compte-adresse [data-af-champ="phone"],
.fo-compte .s-shop-compte-adresse [data-af-champ="line2"],
.fo-compte .s-shop-compte-adresse .s-shop-adresse-champ:has(.s-shop-adresse-submit),
.fo-compte .s-shop-compte-adresse .s-shop-adresse-supprimer { display: none; }

/* LES PASTILLES DE RÔLE. Le texte vient des libellés de la prise, déjà
   traduits : on ne réécrit jamais une phrase dans une feuille de style. */
.fo-compte .s-shop-adresse-defaut-livraison,
.fo-compte .s-shop-adresse-defaut-facturation { display: none; }
.fo-compte .s-shop-adresse-defaut-livraison:has(input:checked),
.fo-compte .s-shop-adresse-defaut-facturation:has(input:checked) {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
}
.fo-compte .s-shop-adresse-defaut-facturation:has(input:checked) {
  color: var(--fo-braise);
  background: var(--fo-braise-voile);
}
.fo-compte .s-shop-adresse-defaut-livraison:has(input:checked) {
  color: var(--fo-olive);
  background: var(--fo-fond-2);
}
.fo-compte .s-shop-adresse-defaut-livraison:has(input:checked) input,
.fo-compte .s-shop-adresse-defaut-facturation:has(input:checked) input { display: none; }
.fo-compte .s-shop-adresse-defaut-livraison label,
.fo-compte .s-shop-adresse-defaut-facturation label { cursor: pointer; }

/* ── OUVERTE : le formulaire complet, deux colonnes ── */
.fo-compte .s-shop-compte-adresse:focus-within {
  border-color: var(--fo-braise);
  box-shadow: var(--fo-ombre);
  padding: var(--fo-e-4);
}
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fo-e-3) var(--fo-e-4);
  align-items: start;
}
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-champ { display: grid; gap: 6px; }
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-champ > label {
  display: block;
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-input {
  width: 100%;
  padding: var(--fo-e-2) var(--fo-e-3);
  font-size: inherit;
  color: var(--fo-txt);
  background: var(--fo-fond);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon);
  cursor: auto;
}
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-label,
.fo-compte .s-shop-compte-adresse:focus-within [data-af-champ="line1"],
.fo-compte .s-shop-compte-adresse:focus-within [data-af-champ="line2"],
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-email,
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-champ:has(.s-shop-adresse-submit) { grid-column: 1 / -1; }
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-label .s-shop-adresse-input {
  font-family: var(--fo-texte);
  font-size: inherit;
}
/* Ouverte, tout revient : contact, pays, cases à cocher, boutons. */
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-email,
.fo-compte .s-shop-compte-adresse:focus-within [data-af-champ="phone"],
.fo-compte .s-shop-compte-adresse:focus-within [data-af-champ="line2"],
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-champ:has(.s-shop-adresse-submit) { display: grid; }
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-supprimer { display: block; margin-top: var(--fo-e-3); }
/* Ouvertes, les cases redeviennent des cases : c'est là qu'on change le rôle
   d'une adresse, et une pastille ne se coche pas. */
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-defaut-livraison,
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-defaut-facturation {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: var(--fo-t-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fo-txt-2);
  background: none;
}
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-defaut-livraison input,
.fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-defaut-facturation input {
  display: inline-block;
  margin-right: 8px;
  accent-color: var(--fo-braise);
}

/* ── AJOUTER UNE ADRESSE : toujours ouverte, elle est vide ── */
/* ⚠️ PAS DE `display` ICI. Cette règle habille le formulaire d'ajout ; celle
   qui décide s'il se voit est plus haut, sur `#fo-cpt-adresses:checked`. En
   posant un `display:grid` de mise en forme, elle écrasait le `display:none`
   de même poids écrit avant elle — et le formulaire restait ouvert dans TOUS
   les onglets du compte, y compris « Mes commandes ».

   Le défaut est resté invisible tant que la démonstration servait une copie
   du balisage : c'est en branchant la vraie prise qu'il s'est vu. */
.fo-compte .s-shop-adresse-nouvelle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fo-e-3) var(--fo-e-4);
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px dashed var(--fo-trait-fort);
  border-radius: var(--fo-rayon);
}
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-champ { display: grid; gap: 6px; }
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-champ > label { display: block; }
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-input {
  width: 100%;
  padding: var(--fo-e-2) var(--fo-e-3);
  background: var(--fo-fond);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon);
  cursor: auto;
}
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-label,
.fo-compte .s-shop-adresse-nouvelle [data-af-champ="line1"],
.fo-compte .s-shop-adresse-nouvelle [data-af-champ="line2"],
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-email,
.fo-compte .s-shop-adresse-nouvelle .s-shop-adresse-champ:has(.s-shop-adresse-submit) { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .fo-compte .s-shop-compte-adresse:focus-within .s-shop-adresse-form,
  .fo-compte .s-shop-adresse-nouvelle { grid-template-columns: 1fr; }
}

/* La commande concernée : des pastilles, jamais une liste déroulante
   (règle du kit — un choix court se montre en entier). */
.fo-compte .s-ticket-commandes { display: flex; flex-wrap: wrap; gap: var(--fo-e-2); }
.fo-compte .s-ticket-commande-choix {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: var(--fo-t-s);
  color: var(--fo-txt-2);
  background: var(--fo-fond);
  border: 1px solid var(--fo-trait);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--fo-transition), color var(--fo-transition);
}
.fo-compte .s-ticket-commande-choix:has(input:checked) {
  color: var(--fo-braise);
  background: var(--fo-braise-voile);
  border-color: var(--fo-braise);
}
.fo-compte .s-ticket-commande-choix input { accent-color: var(--fo-braise); }

/* ── LES BOUTONS D'ACTION ── */
.fo-compte .s-shop-compte-mdp-submit,
.fo-compte .s-shop-adresse-submit,
.fo-compte .s-ticket-nouvelle-submit,
.fo-compte .s-ticket-repondre-submit {
  justify-self: start;
  padding: var(--fo-e-2) var(--fo-e-5);
  font-family: var(--fo-texte);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: var(--fo-suivi-sur);
  text-transform: uppercase;
  color: var(--fo-txt-clair);
  background: var(--fo-braise);
  border: 0;
  border-radius: var(--fo-rayon);
  cursor: pointer;
  transition: background var(--fo-transition);
}
.fo-compte .s-shop-compte-mdp-submit:hover,
.fo-compte .s-shop-adresse-submit:hover,
.fo-compte .s-ticket-nouvelle-submit:hover,
.fo-compte .s-ticket-repondre-submit:hover { background: var(--fo-braise-fonce); }

/* Supprimer une adresse n'est pas une action qu'on met en avant. */
.fo-compte .s-shop-adresse-supprimer-submit {
  padding: 0;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.fo-compte .s-shop-adresse-supprimer-submit:hover { color: var(--fo-braise); }

@media (max-width: 700px) {
  .fo-compte .s-shop-compte-mdp-form,
  .fo-compte .s-shop-adresse-form,
  .fo-compte .s-ticket-nouvelle { grid-template-columns: 1fr; }
}

/* ── Les pages PLATES : forum, FAQ, recherche, mentions, confidentialité ──
   Un fond, une largeur de lecture, et c'est tout : le contenu vient des
   prises, le pack ne fait que lui donner de l'air. */
.fo-plat { background: var(--fo-fond-0); }
.fo-plat-lecture { max-width: 780px; }

/* =============================================================================
   LA PAGE FAQ — une page composée, pas une liste d'accordéons

   Chapeau avec photo, trois réponses clés en bande, les questions en deux
   colonnes, et une sortie. Celui qui arrive ici n'a pas trouvé ailleurs :
   s'il ne trouve pas non plus, il doit savoir où appeler.
   ============================================================================= */

.fo-faq-tete { background: var(--fo-fond-0); }
.fo-faq-tete-grille {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--fo-e-6);
  align-items: center;
}
.fo-faq-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-faq-mot {
  margin: var(--fo-e-3) 0 0;
  max-width: 52ch;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}
.fo-faq-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre-haute);
}
.fo-faq-photo img {
  width: 100%; height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .7, .25, 1);
}
.fo-faq-photo:hover img { transform: scale(1.04); }

/* ── Les trois réponses clés, sur la mie ── */
.fo-faq-cles { background: var(--fo-fond-4); padding-block: var(--fo-e-6); }
.fo-faq-cles-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-5);
  margin-block: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.fo-faq-cle { position: relative; }
.fo-faq-cle + .fo-faq-cle::before {
  content: '';
  position: absolute;
  left: calc(var(--fo-e-5) / -2);
  top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fo-trait-fort), transparent);
}
.fo-faq-cle-picto {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto var(--fo-e-2);
  color: var(--fo-braise);
}
.fo-faq-cle-picto svg { width: 100%; height: 100%; display: block; }
.fo-faq-cle-titre {
  margin: 0 0 4px;
  font-family: var(--fo-titre);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--fo-txt);
}
.fo-faq-cle-mot {
  margin: 0 auto;
  max-width: 30ch;
  font-size: var(--fo-t-s);
  line-height: 1.5;
  color: var(--fo-txt-2);
}

/* ── Les questions, en deux colonnes ── */
.fo-faq-liste { background: var(--fo-fond-0); }
.fo-faq-entete { text-align: center; margin-bottom: var(--fo-e-5); }
.fo-faq-liste .s-faq {
  columns: 2;
  column-gap: var(--fo-e-6);
}
.fo-faq-liste .s-faq-item { break-inside: avoid; }

/* ── La sortie ── */
.fo-faq-reste { background: var(--fo-fond-2); }
.fo-faq-reste-grille {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--fo-e-6);
  align-items: center;
}
.fo-faq-tel {
  margin: var(--fo-e-4) 0 0;
  font-family: var(--fo-titre);
  font-size: 1.8rem;
}
.fo-faq-tel a { color: var(--fo-braise); text-decoration: none; }
.fo-faq-tel a:hover { color: var(--fo-braise-fonce); }
.fo-faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-e-2);
  margin: var(--fo-e-4) 0 0;
}
.fo-faq-heures {
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-faq-heures-titre {
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}

@media (max-width: 900px) {
  .fo-faq-tete-grille, .fo-faq-reste-grille { grid-template-columns: 1fr; }
  .fo-faq-cles-liste { grid-template-columns: 1fr; gap: var(--fo-e-4); }
  .fo-faq-cle + .fo-faq-cle::before { display: none; }
  .fo-faq-liste .s-faq { columns: 1; }
}

/* =============================================================================
   LE FORUM — la page
   ============================================================================= */

.fo-forum-tete { background: var(--fo-fond-0); }
.fo-forum-tete-grille {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--fo-e-6);
  align-items: center;
}
.fo-forum-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-forum-mot {
  margin: var(--fo-e-3) 0 0;
  max-width: 52ch;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

/* Trois règles, numérotées à la main : c'est une charte, pas une liste. */
.fo-forum-regles {
  margin: 0;
  padding: var(--fo-e-4) var(--fo-e-5);
  background: var(--fo-fond-4);
  border-radius: var(--fo-rayon-img);
  counter-reset: fo-regle;
  list-style: none;
}
.fo-forum-regles li {
  position: relative;
  counter-increment: fo-regle;
  padding: var(--fo-e-2) 0 var(--fo-e-2) 40px;
  font-size: var(--fo-t-s);
  line-height: 1.5;
  color: var(--fo-txt-2);
}
.fo-forum-regles li + li { border-top: 1px solid color-mix(in srgb, var(--fo-trait-fort) 60%, transparent); }
.fo-forum-regles li::before {
  content: counter(fo-regle);
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: var(--fo-braise);
  color: #fff;
  border-radius: 999px;
  font-family: var(--fo-titre);
  font-size: .8125rem;
}

.fo-forum { background: var(--fo-fond-0); }

.fo-forum-vite { background: var(--fo-fond-2); }
.fo-forum-vite-grille {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--fo-e-6);
  align-items: center;
}
.fo-forum-photo { margin: 0; overflow: hidden; border-radius: 0 var(--fo-rayon-img) var(--fo-rayon-img) 0; }
.fo-forum-photo img {
  width: 100%; height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fo-forum-vite-mots { padding: var(--fo-e-6) var(--fo-e-4) var(--fo-e-6) 0; }
.fo-forum-actions { display: flex; flex-wrap: wrap; gap: var(--fo-e-2); margin: var(--fo-e-4) 0 0; }

/* =============================================================================
   LA RECHERCHE — le champ, puis des pistes plutôt qu'un écran vide
   ============================================================================= */

.fo-cherche { background: var(--fo-fond-0); padding-block: var(--fo-e-6) 0; }
/* Le champ est l'objet principal de la page : centré, large, et son
   étiquette au-dessus plutôt que collée devant. */
.fo-cherche-boite { max-width: 620px; margin-inline: auto; }
.fo-cherche .s-search { flex-wrap: wrap; justify-content: center; }
.fo-cherche .s-search-input { flex: 1 1 16rem; font-size: 1.05rem; padding: .9em 1.3em; }
.fo-cherche-retour { margin: var(--fo-e-6) 0 0; text-align: center; font-size: var(--fo-t-s); }
.fo-cherche-retour a { color: var(--fo-braise); }

.fo-pistes { background: var(--fo-fond-0); }
.fo-pistes-entete { text-align: center; margin-bottom: var(--fo-e-6); }
.fo-pistes-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-pistes-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-piste-lien {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-e-3);
  height: 100%;
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  color: inherit;
  text-decoration: none;
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-piste-lien:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--fo-ombre-haute);
}
.fo-piste-picto {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--fo-braise);
}
.fo-piste-picto svg { width: 100%; height: 100%; display: block; }
.fo-piste-mots { display: flex; flex-direction: column; gap: 3px; }
.fo-piste-mots b { font-family: var(--fo-titre); font-size: 1.15rem; font-weight: 400; line-height: 1.2; }
.fo-piste-mots small { font-size: var(--fo-t-xs); color: var(--fo-txt-2); line-height: 1.5; }

/* =============================================================================
   LES PAGES LÉGALES — repères à gauche, texte à droite
   ============================================================================= */

.fo-legale { background: var(--fo-fond-0); }
.fo-legale-grille {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--fo-e-7);
  align-items: start;
}
.fo-legale-fil {
  position: sticky;
  top: calc(var(--fo-menu-h) + var(--fo-e-3));
  padding-right: var(--fo-e-4);
  border-right: 1px solid var(--fo-trait);
}
.fo-legale-fil-titre {
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-legale-fil ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fo-t-s);
  line-height: 1.5;
  color: var(--fo-txt-2);
}
.fo-legale-fil li { margin-bottom: var(--fo-e-2); }
.fo-legale-fil li::marker { color: var(--fo-braise); font-weight: 700; }
.fo-legale-fil-note {
  margin: var(--fo-e-4) 0 0;
  font-size: .6875rem;
  color: var(--fo-txt-3);
  font-style: italic;
}
.fo-legale-corps { max-width: 68ch; }

.fo-legale-fin { background: var(--fo-fond-4); padding-block: var(--fo-e-6); }
.fo-legale-fin-grille {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--fo-e-5);
  align-items: center;
}
.fo-legale-fin-titre {
  font-size: var(--fo-t-l);
  line-height: var(--fo-lh-titre);
  margin: 0;
}
.fo-legale-fin-mot { margin: var(--fo-e-2) 0 0; color: var(--fo-txt-2); max-width: 56ch; }
.fo-legale-fin-actions { display: flex; flex-wrap: wrap; gap: var(--fo-e-2); margin: 0; }

/* =============================================================================
   LA SUITE — les autres albums au bout d'un album
   ============================================================================= */

.fo-album-compte { color: var(--fo-txt-3); }
.fo-suite { background: var(--fo-fond-4); }
.fo-suite-entete { text-align: center; margin-bottom: var(--fo-e-5); }
.fo-suite-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-suite-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
.fo-suite-lien {
  display: block;
  overflow: hidden;
  border-radius: var(--fo-rayon-img);
  background: var(--fo-carte);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--fo-ombre);
  transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-suite-lien:hover { transform: translateY(-4px); box-shadow: var(--fo-ombre-haute); }
.fo-suite-vue { display: block; aspect-ratio: 16 / 10; background: var(--fo-fond-2); }
.fo-suite-vue img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .7, .25, 1);
}
.fo-suite-lien:hover .fo-suite-vue img { transform: scale(1.06); }
.fo-suite-mots { display: flex; flex-direction: column; gap: 2px; padding: var(--fo-e-3); }
.fo-suite-mots b { font-family: var(--fo-titre); font-size: 1.15rem; font-weight: 400; }
.fo-suite-mots small { font-size: var(--fo-t-xs); color: var(--fo-txt-3); }

@media (max-width: 900px) {
  .fo-forum-tete-grille, .fo-forum-vite-grille,
  .fo-legale-grille, .fo-legale-fin-grille { grid-template-columns: 1fr; }
  .fo-pistes-liste, .fo-suite-liste { grid-template-columns: 1fr; }
  .fo-legale-fil { position: static; border-right: 0; border-bottom: 1px solid var(--fo-trait); padding: 0 0 var(--fo-e-4); }
  .fo-forum-photo { border-radius: var(--fo-rayon-img); }
  .fo-forum-vite-mots { padding: 0 0 var(--fo-e-5); }
}

/* =============================================================================
   LE SOMMAIRE DU TEMPLATE

   Une page de DÉMONSTRATION du pack : elle montre toutes les pages, y compris
   celles qu'aucun menu ne liste. Chaque entrée est vérifiée contre le gabarit
   qui existe — une page listée est une page qui s'ouvre.
   ============================================================================= */

.fo-somm { background: var(--fo-fond-0); }
.fo-somm-groupe { margin-bottom: var(--fo-e-6); }
.fo-somm-groupe:last-of-type { margin-bottom: 0; }

.fo-somm-titre {
  display: flex;
  align-items: center;
  gap: var(--fo-e-3);
  margin: 0 0 var(--fo-e-4);
  padding-bottom: var(--fo-e-2);
  border-bottom: 1px solid var(--fo-trait);
  font-size: var(--fo-t-l);
}
.fo-somm-nb {
  min-width: 1.7em;
  padding: .15em .5em;
  background: var(--fo-fond-2);
  border-radius: 999px;
  font-family: var(--fo-texte);
  font-size: .6875rem;
  color: var(--fo-txt-3);
  text-align: center;
}

.fo-somm-liste > li { min-width: 0; }
.fo-somm-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fo-e-3);
  margin: 0; padding: 0;
  list-style: none;
}
/* min-width: 0 — sans lui, la piste de grille prend la largeur du plus long
   chemin (« /actualites/le-pain-de-seigle-revient-sur-la-carte ») au lieu de
   le tronquer, et la page déborde sur téléphone. */
.fo-somm-lien {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: var(--fo-e-3) var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-2);
  color: inherit;
  text-decoration: none;
  transition: transform var(--fo-transition), box-shadow var(--fo-transition),
              border-color var(--fo-transition);
}
.fo-somm-lien:hover {
  transform: translateY(-3px);
  border-color: var(--fo-braise);
  box-shadow: var(--fo-ombre);
}
.fo-somm-nom { font-family: var(--fo-titre); font-size: 1.05rem; line-height: 1.2; }
.fo-somm-url {
  font-size: .6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fo-txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fo-somm-pied {
  margin: var(--fo-e-6) 0 0;
  padding-top: var(--fo-e-4);
  border-top: 1px solid var(--fo-trait);
  text-align: center;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  font-style: italic;
}

@media (max-width: 900px) { .fo-somm-liste { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   COMMANDER — le formulaire, et la colonne qui rassure

   C'est l'écran où l'on abandonne le plus. La colonne de droite répond aux
   trois questions qui font renoncer et laisse un numéro. Elle SUIT le
   défilement, parce que le formulaire est long.
   ============================================================================= */

.fo-cmd-aide {
  position: sticky;
  top: calc(var(--fo-menu-h) + var(--fo-e-3));
  padding: var(--fo-e-4);
  background: var(--fo-carte);
  border: 1px solid var(--fo-trait);
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-cmd-aide-titre {
  margin: 0 0 var(--fo-e-3);
  font-size: var(--fo-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-txt-3);
}
.fo-cmd-gages { margin: 0; padding: 0; list-style: none; }
.fo-cmd-gages li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--fo-e-3) 0 var(--fo-e-3) 28px;
  border-bottom: 1px solid var(--fo-trait);
}
.fo-cmd-gages li:last-child { border-bottom: 0; }
.fo-cmd-gages li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--fo-e-3) + 3px);
  width: 17px; height: 17px;
  border-radius: 999px;
  background: var(--fo-olive)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
.fo-cmd-gages b { font-size: var(--fo-t-s); color: var(--fo-txt); }
.fo-cmd-gages small { font-size: var(--fo-t-xs); color: var(--fo-txt-2); line-height: 1.45; }

.fo-cmd-tel {
  margin-top: var(--fo-e-4);
  padding: var(--fo-e-3);
  background: var(--fo-fond-4);
  border-radius: var(--fo-rayon-2);
  text-align: center;
}
.fo-cmd-tel-mot { margin: 0 0 4px; font-size: var(--fo-t-xs); color: var(--fo-txt-2); }
.fo-cmd-tel-num { font-family: var(--fo-titre); font-size: 1.3rem; color: var(--fo-braise); text-decoration: none; }
.fo-cmd-retour { margin: var(--fo-e-3) 0 0; text-align: center; font-size: var(--fo-t-xs); }
.fo-cmd-retour a { color: var(--fo-txt-3); }
.fo-cmd-retour a:hover { color: var(--fo-braise); }

/* =============================================================================
   MA COMMANDE — dire que c'est passé, puis ce qui va se passer
   ============================================================================= */

.fo-merci {
  background: var(--fo-fond-0);
  padding-block: var(--fo-e-6) 0;
  text-align: center;
}
.fo-merci-coche {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto var(--fo-e-4);
  background: var(--fo-olive);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--fo-olive) 40%, transparent);
}
.fo-merci-coche svg { width: 32px; height: 32px; }
.fo-merci-coche path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: fo-trace .55s cubic-bezier(.16, .8, .3, 1) .2s both;
}
@media (prefers-reduced-motion: reduce) {
  .fo-merci-coche path { animation: none; stroke-dashoffset: 0; }
}
.fo-merci-titre {
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  margin: 0;
}
.fo-merci-mot {
  max-width: 54ch;
  margin: var(--fo-e-3) auto 0;
  color: var(--fo-txt-2);
  line-height: var(--fo-lh-texte);
}

.fo-apres { background: var(--fo-fond-4); padding-block: var(--fo-e-6); }
.fo-apres-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fo-e-5);
  margin-block: 0;
  padding: 0;
  list-style: none;
  counter-reset: fo-apres;
}
.fo-apres-pas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  counter-increment: fo-apres;
}
.fo-apres-pas + .fo-apres-pas::before {
  content: '';
  position: absolute;
  left: calc(var(--fo-e-5) / -2);
  top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fo-trait-fort), transparent);
}
.fo-apres-picto {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 4px;
  color: var(--fo-braise);
}
.fo-apres-picto svg { width: 100%; height: 100%; display: block; }
.fo-apres-pas b { font-family: var(--fo-titre); font-size: 1.2rem; font-weight: 400; }
.fo-apres-pas small { font-size: var(--fo-t-s); color: var(--fo-txt-2); max-width: 28ch; line-height: 1.45; }

.fo-apres-fin { background: var(--fo-fond-0); }
.fo-apres-fin-mot {
  max-width: 48ch;
  margin: 0 auto var(--fo-e-4);
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  color: var(--fo-txt-2);
}

@media (max-width: 900px) {
  .fo-cmd-aide { position: static; }
  .fo-apres-liste { grid-template-columns: 1fr; gap: var(--fo-e-4); }
  .fo-apres-pas + .fo-apres-pas::before { display: none; }
}

/* La sortie du compte : sous les panneaux, pas dans le menu latéral —
   se déconnecter est une action de fin de visite. */
.fo-compte-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fo-e-3);
  margin-top: var(--fo-e-6);
  padding-top: var(--fo-e-4);
  border-top: 1px solid var(--fo-trait);
  font-size: var(--fo-t-s);
}
.fo-compte-pied-mot { margin: 0; color: var(--fo-txt-3); }
.fo-compte-pied-liens { display: flex; flex-wrap: wrap; gap: var(--fo-e-4); margin: 0; }
.fo-compte-pied-liens a { color: var(--fo-braise); }
/* La déconnexion, rendue par la prise, prend le même ton discret. */
.fo-compte .s-shop-compte-deconnexion { margin-top: var(--fo-e-4); text-align: right; }
.fo-compte .s-shop-compte-deconnexion-submit {
  padding: 0;
  font: inherit;
  font-size: var(--fo-t-xs);
  color: var(--fo-txt-3);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.fo-compte .s-shop-compte-deconnexion-submit:hover { color: var(--fo-braise); }

/* =============================================================================
   LE MENU MOBILE — PLEINE PAGE, sans une ligne de JavaScript

   Pas un tiroir de côté (Jonas, 2026-08-05) : sur un téléphone, un menu
   occupe l'écran entier. On ne se bat pas pour trois cents pixels, et les
   entrées peuvent respirer au lieu d'être empilées serré.

   Une case cachée et son étiquette, comme les onglets du pack. Sans CSS, la
   case reste actionnable et la navigation reste visible : rien ne dépend
   d'un script.
   ============================================================================= */

/* Hors écran plutôt que display:none : une case masquée ainsi n'est plus
   annoncée ni actionnable au clavier. */
.fo-burger-case {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.fo-burger {
  display: none;               /* seulement en dessous de la capsule */
  position: absolute;
  left: var(--fo-e-3); top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 999px;
  cursor: pointer;
}
.fo-burger-trait {
  display: block;
  height: 2px;
  background: var(--fo-txt);
  border-radius: 2px;
  transition: transform var(--fo-transition), opacity var(--fo-transition);
}
/* Ouvert : les deux traits extrêmes se croisent, celui du milieu s'efface. */
.fo-burger-case:checked ~ .fo-entete .fo-burger-trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fo-burger-case:checked ~ .fo-entete .fo-burger-trait:nth-child(2) { opacity: 0; }
.fo-burger-case:checked ~ .fo-entete .fo-burger-trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pleine page : plus besoin d'un voile derrière, il n'y a plus de « derrière ». */
.fo-tiroir-voile { display: none; }

.fo-tiroir {
  display: none;
  position: fixed;
  inset: 0;
  /* AU-DESSUS du bandeau cookies (80) : plein écran veut dire plein écran.
     On les retrouve en refermant le menu. */
  z-index: 85;
  padding: calc(var(--fo-menu-h) + var(--fo-e-6)) var(--fo-e-5) var(--fo-e-5);
  background: var(--fo-fond-0);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .3s cubic-bezier(.22, .7, .25, 1),
              transform .3s cubic-bezier(.22, .7, .25, 1),
              visibility 0s linear .3s;
  visibility: hidden;
}

/* La grigne en fond, très pâle : la page entière est vide, autant qu'elle
   porte la signature du pack. */
.fo-tiroir::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: var(--fo-grigne-bande);
  opacity: .07;
  pointer-events: none;
}

.fo-tiroir-liste { margin: 0; padding: 0; list-style: none; }
.fo-tiroir-lien {
  display: block;
  padding: var(--fo-e-4) 0;
  border-bottom: 1px solid var(--fo-trait);
  font-family: var(--fo-titre);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--fo-txt);
  text-decoration: none;
}
.fo-tiroir-lien:hover, .fo-tiroir-ici { color: var(--fo-braise); }
.fo-tiroir-ici { font-weight: 600; }

.fo-tiroir-pied {
  display: flex;
  flex-direction: column;
  gap: var(--fo-e-2);
  margin: var(--fo-e-6) 0 0;
}
.fo-tiroir-pied .fo-btn { text-align: center; }

/* ── En dessous de 980 px, la capsule ne tient plus : burger ── */
@media (max-width: 980px) {
  .fo-burger { display: flex; }
  .fo-tiroir { display: block; }

  /* Les deux navigations de la capsule s'effacent : leurs entrées sont dans
     le menu plein écran. Le logo reste au centre, le panier à droite. */
  .fo-entete-barre .fo-nav { display: none; }
  .fo-entete-barre {
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    padding-inline: var(--fo-e-5);
  }
  .fo-entete-barre .fo-boutique { justify-self: end; }

  .fo-burger-case:checked ~ .fo-tiroir {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Menu ouvert : la page dessous ne défile plus. */
  .fo-burger-case:checked ~ .fo-entete { z-index: 86; }
}

/* Le focus clavier se voit sur le bouton, pas sur la case invisible. */
.fo-burger-case:focus-visible ~ .fo-entete .fo-burger {
  outline: 2px solid var(--fo-braise);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fo-tiroir, .fo-burger-trait { transition: none; }
}


/* La languette d'annonce sur petit écran : la phrase de la boutique ne tient
   pas sur une ligne à 390 px et se faisait tronquer par la capsule. Elle
   passe à deux lignes plutôt que d'être coupée au milieu d'un mot. */
/* ── L'EN-TÊTE SUR PETIT ÉCRAN ──
   Le seuil est le MÊME que celui du burger (980 px) : en dessous, la capsule
   n'a plus la place de flotter, et garder sa forme jusqu'à 620 laissait une
   plage entière où la languette se faisait tronquer sur tablette. Un seul
   basculement, pas deux.
   Rien de la capsule ne survit ici, et c'est voulu (Jonas, 2026-08-05) : la
   pilule flottante, les coins ronds et l'ombre portée sont des objets de
   grand écran. Sur un téléphone, on veut une bande rouge en haut, une barre
   blanche dessous, et rien qui dépasse.

     [ bande rouge, pleine largeur, toujours là ]
     [ Le Fournil ............. panier  burger ]

   Pleine largeur, bords droits, aucun arrondi. */
@media (max-width: 980px) {

  .fo-entete .fo-entete-cadre {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* La bande d'annonce : posée en haut, pleine largeur, jamais tronquée. */
  .fo-entete .fo-languette {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 9px var(--fo-e-4);
    border-radius: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .fo-entete .fo-languette > * { padding: 0; }

  /* La barre : pleine largeur, bords droits, logo à gauche, actions à
     droite. Plus de marge négative pour avaler la pilule — il n'y a plus de
     pilule. */
  .fo-entete .fo-entete-barre,
  .fo-js .fo-entete.fo-compact .fo-entete-barre {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--fo-e-2);
    margin-top: 0;
    min-height: 62px;
    padding-inline: var(--fo-e-3);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--fo-trait);
    background: var(--fo-carte);
  }

  /* Le logo prend la gauche, sans décalage : le burger n'est plus dessus. */
  .fo-entete .fo-marque { justify-self: start; padding-left: 0; }
  .fo-entete .fo-marque-nom { font-size: 1.35rem; }

  /* LE PANIER RESTE VISIBLE. La navigation entière est masquée sur petit
     écran, mais le panier n'est pas une entrée de menu : sur une boutique,
     il doit être atteignable de partout, en un geste. On ressort donc sa
     navigation, vidée de tout le reste. */
  .fo-entete .fo-nav-d {
    display: flex;
    justify-self: end;
    order: 2;
    min-width: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .fo-entete .fo-nav-d .fo-nav-item:not(.fo-boutique) { display: none; }
  .fo-entete .fo-nav-d .fo-nav-liste { gap: 0; }
  /* Le panneau du panier au survol n'a pas de sens au doigt : il est déjà
     masqué par (hover: none), on s'assure qu'il ne gêne pas ici non plus. */
  .fo-entete .fo-mini { display: none; }

  /* Le burger passe à DROITE, dans le flux, à côté du panier. */
  .fo-burger {
    position: static;
    transform: none;
    order: 3;
    justify-self: end;
    width: 34px; height: 34px;
    padding: 9px 5px;
  }
  .fo-entete .fo-boutique { justify-self: end; }

  /* L'en-tête ne flotte plus : il est posé, et le contenu commence dessous. */
  .fo-js .fo-entete { position: sticky; top: 0; }
}

/* Sur petit écran l'en-tête n'est plus une capsule flottante : les pages qui
   réservaient sa hauteur n'ont plus rien à réserver. */
@media (max-width: 980px) {
  .fo-js .fo-ban,
  .fo-fiche,
  .fo-porte,
  .fo-fil,
  .fo-art-tete-plate,
  .fo-art-tete { padding-top: var(--fo-e-6); }
}


/* =============================================================================
   LE MOBILE — les grilles de produits

   Une seule colonne, c'est six écrans de défilement pour voir une famille.
   Toutes les boutiques mobiles montrent DEUX produits par ligne : on voit
   plus, on compare, et l'image reste assez grande pour donner envie.

   En deux colonnes une carte fait cent-soixante pixels : la description n'y
   tient plus lisiblement, elle passe donc à la trappe. Le nom et le prix
   suffisent à choisir, la fiche dit le reste.
   ============================================================================= */
@media (max-width: 620px) {
  .fo-produits,
  .fo-vitrine,
  .fo-shop-corps .fo-vitrine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fo-e-2);
  }

  .fo-produit-desc,
  .fo-vend-accroche { display: none; }

  .fo-produit-mots,
  .fo-vend-mots { padding: var(--fo-e-2) var(--fo-e-2) 0; }
  .fo-produit-nom,
  .fo-vend-nom { font-size: .95rem; line-height: 1.15; }
  .fo-produit-prix { padding: var(--fo-e-2); font-size: 1.05rem; }
  .fo-vend-pied { padding: var(--fo-e-2); }
  .fo-vend-somme { font-size: 1.05rem; }
  .fo-vend-btn { padding: .6em .5em; font-size: var(--fo-t-xs); }
  .fo-produit-etoile, .fo-vend-badges .s-shop-badge { font-size: .5rem; padding: 3px 7px; }

  /* Les mêmes règles pour les formules et les albums, qui partagent la
     logique « une vignette, un nom, un prix ». */
  .fo-formules-liste { gap: var(--fo-e-3); }
  .fo-suite-liste { gap: var(--fo-e-3); }
}

/* La pastille du premier écran : à 390 px, « fermentation lente » sortait du
   disque. On réduit le disque et sa mention plutôt que de couper le mot. */
@media (max-width: 620px) {
  .fo-pastille { width: 106px; height: 106px; }
  .fo-pastille-chiffre { font-size: 1.45rem; }
  .fo-pastille-texte {
    font-size: .4375rem;
    letter-spacing: .06em;
    max-width: 78px;
    line-height: 1.25;
  }
}

/* =============================================================================
   NOTRE HISTOIRE — pages/histoire.php

   La page « à propos » du pack. Le risque de ce genre de page, c'est le pavé
   centré : on le coupe en trois temps, on inverse la mise en page au second,
   et on pose une frise entre les deux pour ceux qui ne lisent que les dates.
   ============================================================================= */

/* ── LE RÉCIT, en deux colonnes ──
   Le texte est plus large que la photo : c'est lui qu'on vient lire. Une
   colonne de 1fr/1fr aurait donné deux blocs égaux, donc une brochure. */
.fo-hist-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.fo-hist-mots { max-width: 56ch; }

.fo-hist-titre {
  margin: var(--fo-e-3) 0 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt);
}

.fo-hist-mot {
  margin: var(--fo-e-4) 0 0;
  font-size: var(--fo-t-m);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

.fo-hist-chapeau {
  max-width: var(--fo-lecture);
  margin: var(--fo-e-4) 0 0;
  font-size: var(--fo-t-m);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

.fo-hist-photo { margin: 0; }
.fo-hist-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--fo-rayon-img);
  box-shadow: var(--fo-ombre);
}
.fo-hist-legende {
  margin-top: var(--fo-e-3);
  font-size: var(--fo-t-xs);
  font-style: italic;
  color: var(--fo-txt-3);
}

/* Le second temps inverse l'ordre VISUEL sans toucher à l'ordre du code :
   la photo est déjà écrite avant le texte dans le gabarit, donc rien à
   permuter — on rétablit seulement le rapport de largeurs, sinon c'est la
   photo qui hériterait de la colonne large. */
.fo-hist-inverse .fo-hist-grille {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

/* ── LA FRISE ──
   Sur fond « mie », pour trancher avec les deux sections de récit qui
   l'encadrent. Quatre jalons reliés par un filet continu. */
.fo-hist-frise {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--fo-fond-4);
}

.fo-hist-frise-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fo-e-4);
  /* `margin-block` et PAS `margin` : la liste porte aussi .fo-large, dont le
     `margin-inline: auto` est ce qui la centre. Un `margin: 0` ici le remet à
     zéro et la frise part se coller au bord gauche de l'écran. */
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.fo-hist-jalon {
  position: relative;
  padding-top: var(--fo-e-5);
}

/* Le filet et la pastille : le filet part du centre de la pastille et file
   jusqu'au jalon suivant. Le dernier n'en a pas — sinon la ligne sortirait
   de la page dans le vide. */
.fo-hist-jalon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 13px;
  height: 13px;
  background: var(--fo-braise);
  border-radius: 50%;
}
.fo-hist-jalon::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 13px;
  right: calc(var(--fo-e-4) * -1);
  height: 1px;
  background: var(--fo-trait-fort);
}
.fo-hist-jalon:last-child::after { display: none; }

.fo-hist-an {
  display: block;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-l);
  line-height: 1;
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-braise);
}
.fo-hist-quoi {
  display: block;
  margin-top: var(--fo-e-2);
  font-size: var(--fo-t-s);
  line-height: var(--fo-lh-texte);
  color: var(--fo-txt-2);
}

/* ── L'entête des sections à prise ── */
.fo-hist-entete { max-width: var(--fo-lecture); }

/* Les engagements sont sur le fond alterné, l'équipe sur le fond général :
   deux grilles de cartes qui se suivent sur le même fond se confondent. */
.fo-hist-phares { background: var(--fo-fond-2); }

/* ── LA SORTIE ──
   Une boîte sombre pleine largeur : la page se ferme sur la porte, pas sur
   un point final. */
.fo-hist-fin { padding: 0 0 var(--fo-section); }
.fo-hist-fin-boite {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--fo-e-5);
  text-align: center;
  color: var(--fo-txt-clair);
  background: var(--fo-fond-3);
  border-radius: var(--fo-rayon-2);
}
.fo-hist-fin-picto {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--fo-croute);
}
.fo-hist-fin-picto svg { width: 40px; height: 40px; }

.fo-hist-fin-titre {
  margin: var(--fo-e-3) 0 0;
  font-family: var(--fo-titre);
  font-size: var(--fo-t-xl);
  line-height: var(--fo-lh-titre);
  letter-spacing: var(--fo-suivi-titre);
  color: var(--fo-txt-clair);
}
.fo-hist-fin-mot {
  max-width: 46ch;
  margin: var(--fo-e-4) auto 0;
  font-size: var(--fo-t-m);
  line-height: var(--fo-lh-texte);
  color: color-mix(in srgb, var(--fo-txt-clair) 76%, transparent);
}
.fo-hist-fin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fo-e-3);
  margin: var(--fo-e-5) 0 0;
}
/* Le bouton filaire sur fond sombre : la bordure brune d'origine y disparaît. */
.fo-hist-fin-actions .fo-btn-trait {
  color: var(--fo-txt-clair);
  border-color: rgba(255, 255, 255, .38);
}
.fo-hist-fin-actions .fo-btn-trait:hover {
  color: var(--fo-encre);
  background: var(--fo-croute);
  border-color: var(--fo-croute);
}

/* ── Tablette ── */
@media (max-width: 900px) {
  .fo-hist-grille,
  .fo-hist-inverse .fo-hist-grille { grid-template-columns: 1fr; }
  /* La photo passe SOUS le texte dans les deux sens de lecture : au second
     temps elle est écrite en premier dans le code, on la renvoie après. */
  .fo-hist-inverse .fo-hist-photo { order: 2; }
  .fo-hist-photo img { aspect-ratio: 16 / 10; }
  .fo-hist-mots { max-width: none; }

  .fo-hist-frise-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le filet horizontal n'a plus de sens sur deux lignes : il partirait dans
     le vide en bout de rangée. */
  .fo-hist-jalon:nth-child(2n)::after { display: none; }
}

/* ── Téléphone ── */
@media (max-width: 640px) {
  /* La frise passe en colonne, et le filet devient VERTICAL : c'est la même
     chronologie, lue de haut en bas. */
  .fo-hist-frise-liste { grid-template-columns: 1fr; gap: 0; }
  .fo-hist-jalon {
    padding: 0 0 var(--fo-e-5) var(--fo-e-5);
  }
  .fo-hist-jalon::before { top: 4px; }
  .fo-hist-jalon::after {
    top: 17px;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .fo-hist-jalon:last-child { padding-bottom: 0; }
  .fo-hist-jalon:last-child::after { display: none; }
  .fo-hist-jalon:nth-child(2n)::after { display: block; }

  .fo-hist-fin-boite { padding: var(--fo-e-5) var(--fo-e-4); border-radius: 0; }
  .fo-hist-fin-actions .fo-btn { width: 100%; }
}

/* =============================================================================
   L'AGENDA. L'enveloppe de section a été RETIRÉE le 2026-08-05 : l'agenda
   n'est plus une section de la page contact, c'est un onglet des actualités
   (cf. pages/actualites.php). Ce qui reste ci-dessous est le repli
   téléphone des lignes de la PRISE agenda, gardé parce que la prise, elle,
   existe toujours et peut être incluse par un autre pack ou une page
   personnalisée : sans lui, ses lignes gardent une colonne de date de
   150 px sur un écran de 390.
   ============================================================================= */
@media (max-width: 640px) {
  .s-event {
    grid-template-columns: 1fr;
    gap: var(--fo-e-2);
    padding: var(--fo-e-4) 0;
  }
  .s-event-date {
    flex-direction: row;
    align-items: baseline;
    gap: var(--fo-e-3);
    font-size: var(--fo-t-m);
  }
  .s-event-title,
  .s-event-location,
  .s-event-excerpt,
  .s-event-date-end { grid-column: 1; }
  .s-event-title { grid-row: auto; }
}

/* =============================================================================
   LES CARTES D'AGENDA — l'onglet « Agenda » de pages/actualites.php.

   MÊME CARTE que les billets (Jonas, 2026-08-05) : c'est la demande, et
   c'est juste — un événement est un article, il n'a aucune raison d'avoir
   sa propre allure. Ne se distinguent ici que les deux informations qu'un
   billet n'a pas : le LIEU, et l'HEURE.
   ============================================================================= */

/* Le lieu prend la place de la rubrique : même pastille, plus un picto. */
.fo-billet-ou {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.fo-billet-ou-picto {
  display: inline-flex;
  flex: 0 0 auto;
}
.fo-billet-ou-picto svg {
  width: 13px;
  height: 13px;
}

.fo-billet-heure {
  margin: var(--fo-e-2) 0 0;
  font-size: var(--fo-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--fo-suivi-sur);
  color: var(--fo-croute-fonce);
}

/* La date d'un rendez-vous est une date À VENIR : elle passe en braise, pour
   qu'on la distingue au premier coup d'œil d'une date de parution. */
.fo-billet-rdv .fo-billet-date {
  background: var(--fo-braise);
  color: #fff;
}

/* =============================================================================
   LES PAGES D'ATTENTE — elles réutilisent la grammaire de la 404

   Rien de nouveau ici : `construction.php` et `maintenance.php` reprennent
   les classes `.fo-perdu-*` telles quelles — même image sombre en fond, même
   voile chaud, même contenu centré, même mot en très grand. C'est ce qui fait
   qu'elles parlent la langue du site au lieu d'être trois écrans étrangers.

   Seuls s'ajoutent la grigne de signature et le mot du propriétaire.
   ============================================================================= */

/* La grigne, entre la phrase et le bas de page : la signature du pack. */
.fo-perdu-signe {
  width: 92px;
  height: 20px;
  margin: var(--fo-e-5) auto 0;
  background: var(--fo-grigne-marque) center / contain no-repeat;
  opacity: .9;
}

.fo-perdu-admin {
  max-width: 52ch;
  margin: var(--fo-e-6) auto 0;
  padding-top: var(--fo-e-4);
  border-top: 1px solid rgba(247, 239, 225, .22);
  font-size: var(--fo-t-s);
  line-height: 1.6;
  color: color-mix(in srgb, var(--fo-txt-clair) 68%, transparent);
}
.fo-perdu-admin a { color: var(--fo-croute); font-weight: 600; }

/* Le mot d'attente est un MOT, pas un nombre à trois chiffres : il lui faut
   pouvoir se couper plutôt que déborder en petit écran. */
.fo-perdu-code { overflow-wrap: anywhere; }

/* LE VOILE EST ALLÉGÉ SUR LES PAGES D'ATTENTE.
   Celui de la 404 est réglé pour `vide.webp`, dont le centre est clair : il
   l'assombrit juste ce qu'il faut. Le pâton et la bouche du four sont eux
   déjà sombres, et le même voile les effaçait complètement — on ne voyait
   plus que du brun. Ici on éclaircit franchement le centre pour que le sujet
   se voie, tout en gardant les bords sombres qui portent le texte. */
.fo-perdu-attente::before {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(26, 18, 12, .12) 0%, rgba(26, 18, 12, .62) 62%),
    linear-gradient(to bottom, rgba(26, 18, 12, .40), rgba(26, 18, 12, .66));
}
/* Et l'image remonte un peu en lumière : elle sort du studio très contrasté,
   elle a de la marge. */
.fo-perdu-attente .fo-perdu-fond img { filter: brightness(1.18) contrast(1.04); }

/* ══ LA BULLE DE CHAT ═════════════════════════════════════════════════════
   La prise `s-chat` du satellite assistant-visiteurs. Le kit possède le
   comportement et le coin ; le pack ne fait que l'habiller.

   À DROITE : la gauche est occupée par la capsule du panier, qui flotte en
   permanence, et par le burger sur téléphone. Deux objets flottants dans le
   même coin, c'est un qui recouvre l'autre au premier défilement.

   TOUT EST ROND ICI, comme les capsules du menu et les cartes de la carte. */
.s-chat{position:fixed;z-index:70;bottom:22px;font-family:'Montserrat',system-ui,sans-serif}
.s-chat[data-coin="gauche"]{left:22px}
.s-chat[data-coin="droite"]{right:22px}

.s-chat-bulle{display:flex;align-items:center;gap:10px;padding:13px 20px;background:var(--fo-braise);color:#fff;border:0;border-radius:999px;font-size:var(--fo-t-s);font-weight:600;box-shadow:0 10px 26px rgba(42,31,23,.22);transition:.25s}
.s-chat-bulle:hover{background:var(--fo-braise-fonce);transform:translateY(-2px)}
.s-chat-bulle:focus-visible{outline:2px solid var(--fo-croute);outline-offset:3px}
.s-chat-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}

.s-chat-panneau{position:absolute;bottom:calc(100% + 12px);width:min(370px,calc(100vw - 44px));display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 130px));background:var(--fo-carte);border:1px solid var(--fo-trait);border-radius:22px;overflow:hidden;box-shadow:0 22px 55px rgba(42,31,23,.24)}
.s-chat[data-coin="gauche"] .s-chat-panneau{left:0}
.s-chat[data-coin="droite"] .s-chat-panneau{right:0}
.s-chat-panneau[hidden]{display:none}

.s-chat-entete{padding:18px 20px 14px;background:var(--fo-fond-2);border-bottom:1px solid var(--fo-trait)}
.s-chat-titre{margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.25rem;color:var(--fo-txt)}
.s-chat-mention{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--fo-txt-2)}
.s-chat-fermer{position:absolute;top:15px;right:15px;width:30px;height:30px;border:1px solid var(--fo-trait);border-radius:50%;background:var(--fo-carte);color:var(--fo-txt);font-size:14px;line-height:1;transition:.25s}
.s-chat-fermer:hover{background:var(--fo-braise);border-color:var(--fo-braise);color:#fff}

.s-chat-fil{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.s-chat-msg{margin:0;max-width:86%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55}
.s-chat-msg[data-role="assistant"]{align-self:flex-start;background:var(--fo-fond);border-bottom-left-radius:5px;color:var(--fo-txt)}
.s-chat-msg[data-role="user"]{align-self:flex-end;background:var(--fo-braise);color:#fff;border-bottom-right-radius:5px}

.s-chat-passees{padding:0 20px 12px}
.s-chat-passees-titre{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fo-txt-3)}
.s-chat-passees-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}

.s-chat-form{display:flex;gap:9px;align-items:flex-end;padding:14px 16px;border-top:1px solid var(--fo-trait);background:var(--fo-carte-2)}
.s-chat-saisie{flex:1;min-height:42px;max-height:120px;resize:none;padding:11px 14px;background:var(--fo-fond-0);border:1px solid var(--fo-trait);border-radius:14px;font:inherit;font-size:14px}
.s-chat-saisie:focus-visible{outline:none;border-color:var(--fo-croute);box-shadow:0 0 0 3px rgba(185,131,74,.18)}
.s-chat-envoyer{flex:0 0 auto;padding:12px 18px;background:var(--fo-braise);color:#fff;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;transition:.25s}
.s-chat-envoyer:hover{background:var(--fo-braise-fonce)}

@media(max-width:640px){
  .s-chat{bottom:16px}
  .s-chat[data-coin="gauche"]{left:16px}
  .s-chat[data-coin="droite"]{right:16px}
  .s-chat-bulle{padding:13px 16px}
  .s-chat-bulle-nom{display:none}
  .s-chat-panneau{width:calc(100vw - 32px);max-height:calc(100vh - 105px)}
}

/* ── LE BANDEAU D'APERÇU ──
   En tête d'un brouillon ouvert par un jeton signé. Il doit se voir : sans
   lui on relit un brouillon en croyant relire la page publiée. */
.fo-apercu {
  margin: 0;
  padding: 12px var(--fo-e-4);
  background: var(--fo-braise);
  color: #fff;
  font-size: var(--fo-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}