/*
Theme Name: Le Jardin de Lilith
*/
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Figtree:wght@400;700&display=swap');

/* ==========================================================================
   GABARIT « TABLE DE SAISON » — une cuisine de marché
   Quatre choses le font reconnaître, et ce sont les seules qui comptent :
   1. LE RUBAN DES DOUZE MOIS collé sous la tête : le mois courant en pastille pleine
      accent, les onze autres en pastilles creuses, une piste qui défile sur mobile ;
   2. les PASTILLES RONDES « de saison ce mois-ci » (image ronde 72px + nom) ;
   3. la CARTE RECETTE carrée : ombre légère, image 1:1, et sous l'image un TRIPLET
      en petites capitales (prépa · cuisson · parts) — jamais d'étoile, jamais d'avis ;
   4. une pastille de mois posée sur aplat en haut à gauche de chaque carte, HORS image.
   Crème, vert olive, tomate. Baloo 2 (serif ronde) en titre, Figtree en lecture.
   ========================================================================== */

/* ---------- 1. JETONS ---------------------------------------------------- */
:root{
  --fond:#f6f6f4;            /* la crème du plan de travail, jamais un blanc pur */
  --encre:#1C1C1C;           /* une encre olive très sombre, jamais #000 */
  --doux:#1D1D1D;            /* le vert-gris de service : chapôs, dates, légendes (6,5:1) */
  --filet:#70706F;           /* le filet chaud — CHOISI, jamais un gris pur */
  --surf:#ADADAC;            /* l'aplat des bandes, des panneaux et des pastilles */
  --nuit:#1C1C1C;            /* la bande sombre « Équilibre du repas », dans les deux thèmes */
  --nuit-encre:#B2B2B1;      /* texte sur la bande sombre — 14:1 */
  --nuit-doux:#8A8A89;       /* texte secondaire sur la bande sombre — 8,5:1 */
  --accent:#a67c1e;       /* l'olive du site, tirée par domaine */
  --accent2:#8D691A;     /* la tomate : réservée au mois courant et aux encadrés */
  --accent-txt:color-mix(in srgb, #a67c1e 0%, #1a1a1a);
  --accent2-txt:color-mix(in srgb, #a67c1e 0%, #1a1a1a);
  --sur-accent:#000000;      /* ce qu'on pose SUR l'accent : en clair l'accent est sombre */
  --titre:'Baloo 2','Iowan Old Style',Georgia,'Times New Roman',serif;
  --courant:'Figtree','Helvetica Neue',Helvetica,Arial,sans-serif;
  --rayon:14px;
  --ombre:0 1px 2px rgba(26,26,18,.05), 0 6px 18px rgba(26,26,18,.07);
  --ombre-forte:0 2px 4px rgba(26,26,18,.07), 0 14px 34px rgba(26,26,18,.11);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#17181A; --accent2:#d9b656; --accent:#d9b656; --encre:#F2F1EE; --doux:#858585; --filet:#17181A; --surf:#17181A;
    --nuit:#17181A; --nuit-encre:#F2F1EE; --nuit-doux:#858585;
    --accent-txt:color-mix(in srgb, #a67c1e 0%, #ffffff);
    --accent2-txt:color-mix(in srgb, #a67c1e 0%, #ffffff);
    --sur-accent:#000000;    /* en sombre l'accent s'éclaircit : on pose de l'encre dessus */
    --ombre:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42);
    --ombre-forte:0 2px 4px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#17181A; --accent2:#d9b656; --accent:#d9b656; --encre:#F2F1EE; --doux:#858585; --filet:#17181A; --surf:#17181A;
  --nuit:#17181A; --nuit-encre:#F2F1EE; --nuit-doux:#858585;
  --accent-txt:color-mix(in srgb, #a67c1e 0%, #ffffff);
  --accent2-txt:color-mix(in srgb, #a67c1e 0%, #ffffff);
  --sur-accent:#000000;
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42);
  --ombre-forte:0 2px 4px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- 2. SOCLE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--courant);font-size:16.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:700;margin:0;line-height:1.16;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
.sb-oeil,.sb-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sb-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.55rem .9rem;
  background:var(--encre);color:var(--fond);z-index:99;border-radius:var(--rayon)}
.ts-enveloppe{width:min(1220px,100% - 2.4rem);margin-inline:auto}
.ts-fleche{color:var(--filet);padding-inline:.4em}
.ts-nombre{font-variant-numeric:tabular-nums;font-size:13px;color:var(--doux);flex:0 0 auto}

/* le titre de section : serif ronde, un trait olive court dessous */
.ts-titre-fin{font-size:clamp(21px,2.5vw,29px);letter-spacing:-.012em;
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ts-titre-fin::after{content:"";flex:1 1 60px;height:2px;background:var(--filet);
  border-radius:2px;transform:translateY(-.28em)}
.ts-mois-dit{font-family:var(--courant);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt)}
.ts-chapo{font-size:15px;line-height:1.5;color:var(--doux);margin-top:.4rem}

/* le triplet — la signature de la carte : petites capitales, chiffres tabulaires */
.ts-triplet{display:flex;flex-wrap:wrap;gap:.15rem .95rem;margin-top:.7rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--filet)}
.ts-donnee{display:inline-flex;align-items:baseline;gap:.32rem;font-size:10.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--doux)}
.ts-donnee-val{font-variant-numeric:tabular-nums;color:var(--accent-txt);letter-spacing:.06em}

/* la pastille de mois posée sur aplat, HORS image (procédé signature) */
.ts-saison{align-self:flex-start;display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-txt);
  background:var(--surf);border-radius:999px;padding:.24rem .68rem;margin-bottom:.55rem}

/* la photo : carrée, coins arrondis, aucune surimpression de texte (R-0025) */
.ts-photo{margin:0;border-radius:var(--rayon);overflow:hidden;background:var(--surf)}
.ts-photo img,.ts-photo .jr-plaque{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.jr-plaque{border-radius:var(--rayon)}

/* ---------- 3. LA TÊTE : DEUX ÉTAGES ------------------------------------- */
.ts-tete{background:var(--fond);position:relative;z-index:20}
.ts-etage{border-bottom:1px solid var(--filet)}
.ts-etage-in{display:flex;align-items:center;gap:1.4rem;min-height:92px;padding-block:.8rem}
.ts-marque a{display:flex;align-items:center;gap:.65rem}
.ts-marque a:hover{text-decoration:none}
.ts-mono{display:inline-flex;width:38px;color:var(--accent)}
.ts-mono svg{width:100%;height:auto;fill:currentColor}
.ts-marque-txt{display:flex;flex-direction:column}
.ts-marque-mot{font-family:var(--titre);font-weight:800;font-size:clamp(23px,3.2vw,32px);
  line-height:1;letter-spacing:-.02em;color:var(--encre)}
.ts-baseline{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux);margin-top:.24rem}

/* la recherche d'ingrédient : un champ large, un bouton plein olive */
.ts-panier{flex:1 1 300px;display:flex;max-width:440px;background:var(--surf);
  border:1px solid var(--filet);border-radius:999px;padding:.22rem .22rem .22rem .95rem}
.ts-panier input{flex:1 1 auto;min-width:0;font:inherit;font-size:14.5px;border:0;
  background:none;color:var(--encre);padding:.42rem 0}
.ts-panier input::placeholder{color:var(--doux)}
.ts-panier input:focus{outline:0}
.ts-panier:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ts-panier button{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  border:0;border-radius:999px;padding:.45rem 1.05rem;cursor:pointer;
  background:var(--accent);color:var(--sur-accent)}
.ts-familles{display:flex;gap:.15rem;margin-left:auto}
.ts-familles a{font-size:13.5px;font-weight:600;padding:.42rem .62rem;border-radius:999px;
  white-space:nowrap;color:var(--encre)}
.ts-familles a:hover{text-decoration:none;background:var(--surf);color:var(--accent-txt)}

/* --- LE RUBAN DES DOUZE MOIS : le trait qui commande toute la page --- */
.ts-ruban{position:sticky;top:0;z-index:19;background:var(--fond);
  border-bottom:1px solid var(--filet);box-shadow:0 1px 0 var(--filet)}
.ts-ruban-in{display:flex;align-items:center;gap:1rem;padding-block:.5rem}
.ts-ruban-mot{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--doux);padding-right:.9rem;border-right:1px solid var(--filet)}
.ts-ruban-piste{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;padding-block:.1rem}
.ts-ruban-piste::-webkit-scrollbar{display:none}
.ts-mois{scroll-snap-align:center;white-space:nowrap;font-size:13px;font-weight:600;
  padding:.34rem .78rem;border-radius:999px;border:1px solid transparent;color:var(--doux)}
.ts-mois:hover{text-decoration:none;border-color:var(--filet);background:var(--surf);color:var(--encre)}
.ts-mois.is-actif{background:var(--accent);color:var(--sur-accent);font-weight:800;
  border-color:var(--accent);box-shadow:var(--ombre)}
.ts-mois.is-actif:hover{text-decoration:none;background:var(--accent);color:var(--sur-accent)}

/* ---------- 4. DE SAISON CE MOIS-CI : SIX PASTILLES RONDES --------------- */
.ts-saisonnier{background:var(--surf);border-bottom:1px solid var(--filet)}
.ts-saisonnier-in{padding-block:1.4rem 1.5rem}
.ts-pastilles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:1rem}
.ts-pastille a{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.ts-pastille a:hover{text-decoration:none}
.ts-pastille a:hover .ts-pastille-nom{text-decoration:underline;text-underline-offset:3px}
.ts-rond{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:var(--fond);box-shadow:var(--ombre);border:2px solid var(--fond)}
.ts-rond img,.ts-rond .jr-plaque{width:72px;height:72px;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%!important;font-size:26px!important}
.ts-pastille a:hover .ts-rond{box-shadow:var(--ombre-forte)}
.ts-pastille-nom{font-size:13px;font-weight:600;line-height:1.3;color:var(--encre)}

/* ---------- 5. LE PLAT DU MOMENT : 6 COLONNES + 3 + 3 -------------------- */
.ts-moment{padding-block:2rem 1.6rem}
.ts-douze{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.6rem}
.ts-carte{display:flex;flex-direction:column;background:var(--fond);
  border:1px solid var(--filet);border-radius:var(--rayon);padding:.85rem .85rem 1rem;
  box-shadow:var(--ombre)}
.ts-carte:hover{box-shadow:var(--ombre-forte)}
.ts-carte-titre{font-size:18px;margin-top:.5rem;letter-spacing:-.01em}
.ts-carte--plat{grid-column:span 6}
.ts-carte--plat .ts-carte-titre{font-size:clamp(24px,3vw,34px)}
.ts-carte--plat .ts-triplet{gap:.15rem 1.6rem}
.ts-carte--plat .ts-donnee{font-size:11.5px}
.ts-carte--cote{grid-column:span 3}
.ts-carte--cote .ts-carte-titre{font-size:17px}
.ts-famille{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--doux);margin-top:.55rem}
@media (prefers-reduced-motion: no-preference){
  .ts-carte,.ts-rond{transition:box-shadow .18s ease}
}

/* ---------- 6. LA TECHNIQUE DU MOIS : PHOTO | ÉTAPES -------------------- */
.ts-technique{background:var(--surf);border-block:1px solid var(--filet);margin-block:1.4rem}
.ts-technique-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:2.2rem;align-items:center;padding-block:2.2rem}
.ts-technique-photo{margin:0;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.ts-technique-photo img,.ts-technique-photo .jr-plaque{width:100%;aspect-ratio:4/3;object-fit:cover}
.ts-technique-titre{font-size:clamp(20px,2.4vw,27px);margin-top:.7rem}
.ts-etapes{counter-reset:none;margin-top:1.1rem;display:grid;gap:.55rem}
.ts-etapes li{display:flex;gap:.75rem;align-items:baseline;font-size:15px;
  padding-bottom:.55rem;border-bottom:1px solid var(--filet)}
.ts-etapes li:last-child{border-bottom:0}
.ts-num{flex:0 0 auto;font-family:var(--titre);font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--accent-txt);min-width:1.9em}
.ts-bouton{display:inline-block;margin-top:1.1rem;font-size:13px;font-weight:700;
  letter-spacing:.04em;padding:.6rem 1.25rem;border-radius:999px;
  background:var(--accent);color:var(--sur-accent)}
.ts-bouton:hover{text-decoration:none;box-shadow:var(--ombre-forte)}

/* ---------- 7. LA PLANCHE DE RECETTES ----------------------------------- */
.ts-planche{padding-block:1.8rem}
.ts-planche-tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.ts-planche-tete .ts-titre-fin{flex:1 1 260px}
.ts-lien-suite{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--accent-txt)}
.ts-quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.ts-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding-block:1.6rem}

/* ---------- 8. ÉQUILIBRE DU REPAS : LA BANDE SOMBRE --------------------- */
.ts-nuit{background:var(--nuit);color:var(--nuit-encre);padding-block:2.4rem 2.2rem;margin-block:1.8rem}
.ts-nuit-tete{max-width:min(680px,100%);margin-bottom:1.4rem}
.ts-titre-fin--nuit{color:var(--nuit-encre)}
.ts-titre-fin--nuit::after{background:color-mix(in srgb,var(--nuit-encre) 26%,transparent)}
.ts-nuit-chapo{font-size:15px;color:var(--nuit-doux);margin-top:.5rem}
.ts-table-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ts-table{width:100%;min-width:520px;font-size:15px}
.ts-table th,.ts-table td{text-align:left;padding:.8rem .9rem;
  border-bottom:1px solid color-mix(in srgb,var(--nuit-encre) 16%,transparent);vertical-align:top}
.ts-table thead th{font-family:var(--courant);font-size:10.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--nuit-doux)}
.ts-table tbody th{font-family:var(--titre);font-size:17px;font-weight:700;white-space:nowrap}
.ts-table td{color:var(--nuit-doux)}
.ts-table td.ts-nombre{color:var(--nuit-encre);font-weight:700;text-align:right}
.ts-nuit-pied{font-size:13px;color:var(--nuit-doux);margin-top:1rem}

/* ---------- 9. PAR FAMILLE DE PRODUIT : LISTE À FILETS ------------------ */
.ts-produits{padding-block:1.6rem 2.4rem}
.ts-liste-filets{margin-top:1rem;columns:2;column-gap:2.6rem}
.ts-liste-filets li{break-inside:avoid;display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid var(--filet)}
.ts-liste-filets a{font-family:var(--titre);font-size:17px;font-weight:600}

/* ---------- 10. LA RECETTE (single) ------------------------------------- */
.ts-recette{padding-block:1.8rem 2rem}
.ts-recette-tete{max-width:min(820px,100%)}
.ts-ariane{font-size:12.5px;color:var(--doux);margin-bottom:.9rem}
.ts-saison--article{margin-bottom:.7rem}
.ts-recette-titre{font-size:clamp(29px,5vw,50px);letter-spacing:-.02em}
.ts-recette-chapo{font-family:var(--titre);font-size:19px;font-style:italic;line-height:1.55;
  color:var(--doux);margin-top:.8rem;padding-left:1rem;border-left:3px solid var(--accent)}
.ts-recette-credits{font-size:12.5px;color:var(--doux);margin-top:.9rem}

/* la fiche recette : des cases sur aplat, une donnée absente = une case en moins */
.ts-fiche{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 0}
.ts-fiche-case{flex:1 1 130px;background:var(--surf);border:1px solid var(--filet);
  border-radius:var(--rayon);padding:.7rem .85rem}
.ts-fiche-case dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--doux)}
.ts-fiche-case dd{margin:.22rem 0 0;font-family:var(--titre);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--encre)}
.ts-photo--article{margin:1.6rem 0 0;border-radius:var(--rayon)}
.ts-photo--article img{aspect-ratio:3/2}
.ts-photo--article figcaption{font-size:12.5px;color:var(--doux);padding:.6rem .2rem 0;
  font-style:italic;background:var(--fond)}

.ts-recette-corps{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:2.6rem;margin-top:2rem;align-items:start}
.ts-colonne{position:sticky;top:74px;display:grid;gap:1rem}
.ts-panneau{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:1rem 1.1rem 1.1rem}
.ts-panneau-titre{font-size:12px;font-weight:800;font-family:var(--courant);
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-txt);
  padding-bottom:.55rem;border-bottom:1px solid var(--filet);margin-bottom:.7rem}
.ts-ingredients-corps ul{display:grid;gap:.05rem}
.ts-ingredients-corps li{position:relative;padding:.42rem 0 .42rem 1.05rem;font-size:15px;
  border-bottom:1px solid var(--filet)}
.ts-ingredients-corps li:last-child{border-bottom:0}
.ts-ingredients-corps li::before{content:"";position:absolute;left:0;top:.95em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ts-ingredients-corps p{font-size:14px;color:var(--doux);margin:.5rem 0}
.ts-sommaire ol{counter-reset:ts-s;display:grid;gap:.1rem}
.ts-sommaire li{counter-increment:ts-s;font-size:14px;padding:.34rem 0}
.ts-sommaire li::before{content:counter(ts-s,decimal-leading-zero) " ";
  font-weight:800;color:var(--accent-txt);font-variant-numeric:tabular-nums;margin-right:.4rem}
.ts-sommaire a{color:var(--encre)}

/* ---------- 11. LE CONTENU WORDPRESS RÉEL ------------------------------- */
.ts-texte{max-width:min(760px,100%);font-size:17.5px;line-height:1.68}
.ts-texte p{margin:0 0 1.15rem}
.ts-texte h2{font-size:clamp(22px,2.6vw,29px);margin:2.2rem 0 .8rem;
  padding-bottom:.45rem;border-bottom:2px solid var(--filet)}
.ts-texte h3{font-size:20px;margin:1.7rem 0 .5rem;color:var(--accent-txt)}
.ts-texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px}
/* les listes du contenu réel : puces olive pour les ul, étapes numérotées pour les ol */
.ts-texte ul{margin:0 0 1.25rem;padding:0}
.ts-texte ul li{position:relative;padding-left:1.3rem;margin-bottom:.55rem}
.ts-texte ul li::before{content:"";position:absolute;left:.1rem;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.ts-texte ol{counter-reset:ts-etape;margin:0 0 1.4rem;padding:0}
.ts-texte ol li{counter-increment:ts-etape;position:relative;padding:.15rem 0 1rem 3.1rem;
  margin-bottom:.55rem;border-bottom:1px solid var(--filet)}
.ts-texte ol li:last-child{border-bottom:0}
.ts-texte ol li::before{content:counter(ts-etape,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--titre);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;
  color:var(--sur-accent);background:var(--accent);border-radius:999px;
  width:2.2rem;height:2.2rem;display:grid;place-items:center;line-height:1}
.ts-texte blockquote{margin:1.7rem 0;padding:1rem 1.2rem;background:var(--surf);
  border-left:4px solid var(--accent2);border-radius:var(--rayon);
  font-family:var(--titre);font-style:italic;font-size:18px;color:var(--encre)}
.ts-texte blockquote p:last-child{margin-bottom:0}
.ts-texte figure{margin:1.6rem 0}
.ts-texte figure img{border-radius:var(--rayon)}
.ts-texte figcaption{font-size:12.5px;color:var(--doux);margin-top:.5rem;font-style:italic}
.ts-texte img{border-radius:var(--rayon);margin:1.4rem 0}
.ts-texte table{width:100%;font-size:15px;margin:1.6rem 0;display:block;overflow-x:auto}
.ts-texte th,.ts-texte td{border-bottom:1px solid var(--filet);padding:.6rem .6rem;text-align:left}
.ts-texte th{font-family:var(--courant);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--doux)}

/* les deux encadrés de la famille — stylés ici pour que le contenu réel en profite aussi */
.ts-texte .ts-encadre,.ts-encadre{margin:1.8rem 0;padding:1.1rem 1.25rem;border-radius:var(--rayon);
  background:var(--surf);border:1px solid var(--filet);border-left:5px solid var(--accent)}
.ts-encadre-titre{font-family:var(--courant);font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-txt);margin-bottom:.45rem}
.ts-encadre p:last-child{margin-bottom:0}
.ts-encadre--conservation{border-left-color:var(--accent2)}
.ts-encadre--conservation .ts-encadre-titre{color:var(--accent2-txt)}
.ts-origine{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--filet);
  font-family:var(--titre);font-style:italic;font-size:16px;color:var(--doux)}

.ts-recette-pied{max-width:min(820px,100%);margin-top:2.2rem;padding-top:1.3rem;
  border-top:1px solid var(--filet)}
.ts-planche--suite{border-top:1px solid var(--filet);margin-top:2.2rem;padding-top:2rem}

/* signature d'auteur produite par jr_signature */
.sb-signature{display:flex;gap:1.1rem;align-items:flex-start}
.sb-signature img{width:64px;height:64px;border-radius:50%;flex:0 0 auto}
.sb-signature-nom{font-family:var(--titre);font-weight:700;font-size:17px}
.sb-signature-bio{font-size:14.5px;color:var(--doux);margin-top:.3rem;line-height:1.5}
.sb-date{font-size:12px;color:var(--doux);margin-top:.45rem}

/* ---------- 12. LA FAMILLE (category) ----------------------------------- */
.ts-cartouche{background:var(--surf);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:1.6rem 1.7rem;margin-top:1.8rem}
.ts-cartouche-titre{font-size:clamp(26px,4vw,42px);letter-spacing:-.02em;margin-top:.2rem}
.ts-cartouche-chapo{font-family:var(--titre);font-size:18px;font-style:italic;color:var(--doux);
  margin-top:.6rem;max-width:min(640px,100%)}
.ts-cartouche-compte{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-txt);margin-top:.8rem}
.ts-pagination{display:flex;flex-wrap:wrap;gap:.4rem;padding-block:1rem 2.4rem;font-size:14px}
.ts-pagination .page-numbers{padding:.45rem .85rem;border:1px solid var(--filet);
  border-radius:999px;font-weight:600}
.ts-pagination .current{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}

/* ---------- 13. LE PIED ------------------------------------------------- */
.ts-pied{margin-top:2.4rem;background:var(--surf);border-top:1px solid var(--filet)}
.ts-pied-haut{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.25fr 1.2fr;
  gap:1.8rem;padding-block:2.4rem 2rem}
.ts-pied-marque{display:flex;flex-direction:column;gap:.3rem}
.ts-mono--pied{width:40px;color:var(--accent)}
.ts-pied-nom{font-family:var(--titre);font-weight:800;font-size:24px;letter-spacing:-.02em}
.ts-pied-baseline{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.ts-pied-titre{font-family:var(--courant);font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--doux);padding-bottom:.5rem;
  border-bottom:1px solid var(--filet);margin-bottom:.7rem}
.ts-pied-liste li{display:flex;justify-content:space-between;align-items:baseline;
  gap:.8rem;padding:.32rem 0;font-size:14.5px}
.ts-pied-liste--dates a{font-family:var(--titre);font-size:15px}
.ts-pied-note{font-size:12.5px;color:var(--doux);margin-top:.7rem;line-height:1.45}
.ts-pied input[type="search"],.ts-pied input[type="text"]{font:inherit;font-size:14px;width:100%;
  padding:.5rem .8rem;border:1px solid var(--filet);border-radius:999px;
  background:var(--fond);color:var(--encre)}
.ts-pied button[type="submit"],.ts-pied input[type="submit"]{font:inherit;font-size:12px;
  font-weight:700;margin-top:.5rem;padding:.5rem 1rem;border:0;border-radius:999px;
  background:var(--accent);color:var(--sur-accent);cursor:pointer}
.ts-pied label{font-size:12px;color:var(--doux)}
.ts-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:1rem 1.2rem;border-top:1px solid var(--filet);font-size:12.5px;color:var(--doux)}
.ts-bascule{font:inherit;font-size:12px;font-weight:700;padding:.45rem .95rem;
  border:1px solid var(--filet);border-radius:999px;background:var(--fond);
  color:var(--encre);cursor:pointer}

/* ---------- 14. LA BARRE MOBILE BASSE ----------------------------------- */
.sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--fond);border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom)}
.sb-nav-mobile-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.45rem .2rem .5rem;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--doux);text-align:center}
.sb-nav-mobile-item:hover{text-decoration:none}
.sb-nav-mobile-item.is-actif{color:var(--accent-txt)}
.sb-nav-ico{display:block;width:20px;height:20px}
.sb-nav-ico svg{width:100%;height:100%;stroke:currentColor;fill:none}

/* ---------- 15. REPLIS — jamais un débordement horizontal --------------- */
@media (max-width: 1080px){
  .ts-familles{display:none}
  .ts-panier{max-width:none}
  .ts-douze{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ts-carte--plat{grid-column:span 6}
  .ts-carte--cote{grid-column:span 3}
  .ts-quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-trois{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-pastilles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ts-technique-in{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .ts-recette-corps{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .ts-colonne{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-texte{max-width:100%}
  .ts-pied-haut{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
}
@media (max-width: 760px){
  .ts-etage-in{flex-wrap:wrap;gap:.8rem;min-height:0;padding-block:.7rem}
  .ts-marque{flex:1 1 100%}
  .ts-panier{flex:1 1 100%}
  .ts-ruban-mot{display:none}
  .ts-ruban-in{padding-block:.45rem}
  /* le ruban reste : c'est lui qui commande la page, il défile au doigt */
  .ts-douze,.ts-quatre,.ts-trois,.ts-pastilles{grid-template-columns:minmax(0,1fr)}
  .ts-carte--plat,.ts-carte--cote{grid-column:auto}
  .ts-liste-filets{columns:1}
  .ts-colonne{grid-template-columns:minmax(0,1fr)}
  .ts-cartouche{padding:1.2rem 1.1rem}
  .ts-pied-haut{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .ts-nuit{padding-block:1.8rem}
  .sb-nav-mobile{display:flex}
  body{padding-bottom:64px}
}
@media (max-width: 480px){
  body{font-size:16px}
  .ts-recette-titre{font-size:28px}
  .ts-texte{font-size:17px}
  .ts-texte ol li{padding-left:2.7rem}
  .ts-texte ol li::before{width:1.95rem;height:1.95rem;font-size:15px}
  .ts-fiche-case{flex:1 1 calc(50% - .35rem)}
  .ts-triplet{gap:.15rem .7rem}
  .ts-enveloppe{width:min(1220px,100% - 1.6rem)}
  .ts-mois{font-size:12.5px;padding:.32rem .68rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media print{
  .ts-ruban,.sb-nav-mobile,.ts-bascule,.ts-panier,.ts-planche--suite{display:none!important}
  .ts-colonne{position:static}
}

/* garde-fou : un display:grid/flex de classe bat l'attribut hidden */
[hidden]{display:none!important}

/* P-470 — la 1re carte de l accueil porte grid-column:span 2 en style INLINE.
   Sur telephone la grille n a plus qu une colonne : le span fabrique une colonne
   implicite dimensionnee sur le contenu (526px dans un ecran de 390) et pousse la page.
   !important est indispensable : on annule un style inline. */
@media (max-width:760px){.sb-grille>*{grid-column:auto!important}}

/* P-470 — la plume cite ses sources en URL BRUTE entre parentheses. Une URL ne
   contient aucun point de coupure : le paragraphe fait 677px de large dans une colonne
   de 329 et la page deborde de 351px sur telephone. Le piege : AUCUN element ne depasse
   le viewport (getBoundingClientRect ne voit rien), c est le contenu qui deborde de son
   propre element — seul scrollWidth > clientWidth le montre. */
.sb-corps{overflow-wrap:anywhere}

/* P-491 — display:contents : le h1 de la marque n existe pas pour la mise en page. */
.sb-marque-h1{display:contents}