/*
Theme Name: Bio Foodies Café
Theme URI: https://biofoodiescafe.fr
Description: Le comptoir d'un café healthy de quartier — guide « où manger healthy » et recettes bio. Thème maison, mode clair uniquement (CM-0417).
Author: Seobooster LTD
Version: 2.0.0
Text Domain: biofoodiescafe
*/

/* =====================================================================
   1. TOKENS — mode clair UNIQUEMENT (CM-0417, 14/09/2026). Pas de
   prefers-color-scheme, pas de [data-theme], pas de bouton clair/sombre.
   ===================================================================== */
:root{
  --lait:#FFFCF5;
  --avoine:#F4EFE2;
  --lavis:#E4F5D5;
  --nori:#11251A;
  --matcha:#3CCB4A;
  --matcha-texte:#177A2A;
  --pitaya:#FF3D7F;
  --ardoise:#11251A;
  --ardoise-encre:#EEF5E8;
  --rayon:20px;
  --rayon-pilule:999px;
  --ombre:0 18px 38px -22px rgba(17,37,26,.35);
  --conteneur:1240px;
  --festons: 12px;
  --titre: 'Caprasimo', Georgia, serif;
  --corps: 'Figtree', -apple-system, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   2. POLICES — auto-hébergées, woff2, font-display swap (P-086)
   ===================================================================== */
@font-face{font-family:'Caprasimo';src:url('assets/fonts/caprasimo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Figtree';src:url('assets/fonts/figtree-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Figtree';src:url('assets/fonts/figtree-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Figtree';src:url('assets/fonts/figtree-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

/* =====================================================================
   3. RESET & BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--lait);color:var(--nori);font-family:var(--corps);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-color:color-mix(in srgb, var(--matcha) 70%, transparent);text-underline-offset:.2em}
h1,h2,h3{font-family:var(--titre);font-weight:400;margin:0 0 .5em;line-height:1.08}
h1{font-size:clamp(2.6rem,6vw,5.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,3.2rem)}
h3{font-family:var(--corps);font-weight:800;font-size:1.35rem;line-height:1.3;margin:0 0 .4em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
.bfc-num{font-variant-numeric:tabular-nums}
.bfc-oeil-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bfc-conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 24px}
@media (max-width:900px){.bfc-conteneur{padding:0 16px}}
.bfc-etiquette{display:inline-block;font-family:var(--corps);font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--matcha-texte)}

/* coup de feutre : mot du H1 surligné */
.bfc-feutre{position:relative;white-space:nowrap}
.bfc-feutre::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:38%;background:var(--matcha);z-index:-1;transform:rotate(-1deg)}

/* bord festonné entre bandes */
.bfc-feston{display:block;width:100%;height:var(--festons);margin-top:calc(var(--festons) * -1)}

/* =====================================================================
   4. BOUTONS, PILULES, CARTES
   ===================================================================== */
.bfc-bouton{display:inline-flex;align-items:center;gap:.4em;border-radius:var(--rayon-pilule);padding:.85em 1.5em;font-weight:800;font-size:.95rem;border:2px solid transparent;transition:transform .15s ease, background .2s ease}
.bfc-bouton--plein{background:var(--matcha);color:var(--nori)}
.bfc-bouton--plein:hover{transform:translateY(-2px)}
.bfc-bouton--filaire{background:transparent;border-color:var(--nori);color:var(--nori)}
.bfc-bouton--filaire:hover{background:var(--nori);color:var(--lait)}
.bfc-bouton--sur-sombre{background:var(--matcha);color:var(--nori)}

.bfc-pastilles{display:flex;flex-wrap:wrap;gap:.4em;margin:.6em 0}
.bfc-pastille{display:inline-flex;align-items:center;gap:.3em;font-size:.75rem;font-weight:700;letter-spacing:.02em;padding:.35em .8em;border-radius:var(--rayon-pilule);border:1.5px solid var(--nori)}
.bfc-pastille--vegan{background:var(--matcha);color:var(--nori);border-color:var(--matcha)}
.bfc-pastille--vegetarien{background:transparent;color:var(--matcha-texte);border-color:var(--matcha)}
.bfc-pastille--bio{background:transparent;color:var(--nori)}
.bfc-pastille--sans-gluten{background:transparent;color:var(--pitaya);border-color:var(--pitaya)}

.bfc-carte{background:var(--lait);border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column}
.bfc-carte-img{aspect-ratio:1/1;overflow:hidden;border-radius:var(--rayon);position:relative}
.bfc-carte-img img,.bfc-carte-img .bfc-plaque{width:100%;height:100%;object-fit:cover;display:block}
.bfc-plaque{display:flex;align-items:center;justify-content:center;background:var(--lavis)}
.bfc-plaque svg{width:70%;height:70%}
.bfc-carte h3{margin-top:.7em}
.bfc-carte h3 a{text-decoration:none}
.bfc-carte h3 a:hover{text-decoration:underline}
.bfc-chapo{color:color-mix(in srgb, var(--nori) 78%, transparent);font-size:.98rem}
.bfc-meta-ligne{display:flex;align-items:center;gap:.5em;font-size:.82rem;color:color-mix(in srgb, var(--nori) 62%, transparent);margin-top:.3em}

/* =====================================================================
   5. TAMPON DE GOBELET — procédé #1
   ===================================================================== */
.bfc-tampon{width:96px;height:96px;position:absolute;top:16px;right:16px;z-index:2;animation:bfc-tourne 40s linear infinite;filter:drop-shadow(0 6px 10px rgba(17,37,26,.18))}
@media (prefers-reduced-motion: reduce){.bfc-tampon{animation:none}}
@keyframes bfc-tourne{to{transform:rotate(360deg)}}

/* =====================================================================
   6. EN-TÊTE
   ===================================================================== */
.bfc-tete{background:var(--lait);position:sticky;top:0;z-index:40;border-bottom:2px solid transparent;transition:border-color .2s}
.bfc-tete.is-pose{border-color:color-mix(in srgb, var(--nori) 12%, transparent)}
.bfc-tete-in{display:flex;align-items:center;gap:24px;padding:16px 0}
.bfc-marque{margin:0}
.bfc-marque a{display:block;line-height:0}
.bfc-logo--horizontal{height:40px;width:auto}
.bfc-nav-princ{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:12px;flex:1}
.bfc-nav-princ a{font-weight:600;font-size:.98rem;text-decoration:none;padding:.3em 0;border-bottom:2px solid transparent}
.bfc-nav-princ a:hover{border-color:var(--matcha)}
.bfc-tete-actions{display:flex;align-items:center;gap:10px}
.bfc-loupe-bouton{background:none;border:1.5px solid var(--nori);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.bfc-burger{display:none;background:none;border:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px}
.bfc-burger span{display:block;height:2px;background:var(--nori);border-radius:2px}
.bfc-mobrail{position:fixed;inset:0;top:0;background:var(--lait);z-index:60;padding:20px;overflow:auto}
.bfc-mobrail[hidden]{display:none}
.bfc-mobrail-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.bfc-mobrail ul{display:flex;flex-direction:column;gap:2px}
.bfc-mobrail a{display:block;padding:.9em 0;font-size:1.2rem;font-family:var(--titre);border-bottom:1px solid color-mix(in srgb, var(--nori) 12%, transparent)}
.bfc-recherche-panel{position:absolute;left:0;right:0;top:100%;background:var(--lait);border-bottom:2px solid var(--nori);padding:18px 0;box-shadow:var(--ombre)}
.bfc-recherche-panel[hidden]{display:none}
.bfc-form-recherche{display:flex;gap:10px;max-width:var(--conteneur);margin:0 auto;padding:0 24px}
.bfc-form-recherche input{flex:1;border:1.5px solid var(--nori);border-radius:var(--rayon-pilule);padding:.7em 1.2em;font:inherit}
.bfc-form-recherche button{border:none}

/* =====================================================================
   7. BANDES / SECTIONS
   ===================================================================== */
.bfc-bande{padding:64px 0}
.bfc-bande--lait{background:var(--lait)}
.bfc-bande--avoine{background:var(--avoine)}
.bfc-bande--lavis{background:var(--lavis)}
.bfc-bande--matcha{background:var(--matcha);color:var(--nori)}
.bfc-bande--ardoise{background:var(--ardoise);color:var(--ardoise-encre)}
.bfc-sect-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.bfc-sect-tete p{margin:0;color:color-mix(in srgb, currentColor 70%, transparent)}
.bfc-voir-tout{white-space:nowrap;font-weight:800;text-decoration:none;border-bottom:2px solid var(--matcha)}

.bfc-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bfc-grille--2{grid-template-columns:repeat(2,1fr)}
.bfc-grille--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.bfc-grille,.bfc-grille--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bfc-grille,.bfc-grille--2,.bfc-grille--4{grid-template-columns:1fr}}

/* =====================================================================
   8. HERO ACCUEIL
   ===================================================================== */
.bfc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:36px}
.bfc-hero-promesse{font-size:1.15rem;max-width:46ch;color:color-mix(in srgb, var(--nori) 75%, transparent)}
.bfc-hero-form{display:flex;gap:10px;margin:1.4em 0 .8em;max-width:460px}
.bfc-hero-form input{flex:1;border:1.5px solid var(--nori);border-radius:var(--rayon-pilule);padding:.9em 1.3em;font:inherit;background:var(--lait)}
.bfc-hero-form input:focus{outline:3px solid var(--matcha)}
.bfc-hero-secondaire{display:inline-block;font-weight:700;text-decoration:none;border-bottom:2px solid var(--matcha)}
.bfc-hero-visuel{position:relative;aspect-ratio:4/5;border-radius:var(--rayon);overflow:visible}
.bfc-hero-visuel .bfc-illus-bol{border-radius:var(--rayon)}
.bfc-hero-pastilles{position:absolute;left:-10px;right:-10px;bottom:-30px;display:flex;justify-content:center;gap:14px}
.bfc-hero-pastilles .bfc-ingredient{width:88px;height:88px;box-shadow:var(--ombre)}
@media (max-width:900px){.bfc-hero{grid-template-columns:1fr;gap:32px}.bfc-hero-visuel{order:-1;aspect-ratio:1/1}}

/* =====================================================================
   9. CARTE DE FRANCE
   ===================================================================== */
.bfc-carte-villes{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bfc-carte-france{width:100%;height:auto;max-height:440px}
.bfc-carte-point{fill:var(--nori);cursor:pointer;transition:r .15s}
.bfc-carte-point:hover{fill:var(--matcha)}
.bfc-carte-pulse{fill:none;stroke:var(--pitaya);stroke-width:2;animation:bfc-pulse 2.4s ease-out infinite}
@media (prefers-reduced-motion: reduce){.bfc-carte-pulse{animation:none}}
@keyframes bfc-pulse{0%{r:8;opacity:1}100%{r:22;opacity:0}}
.bfc-carte-etiquette{font-family:'Figtree';font-weight:800;font-size:11px;fill:var(--nori);text-anchor:middle}
.bfc-villes-pilules{display:flex;flex-wrap:wrap;gap:12px}
.bfc-ville-pilule{display:flex;align-items:center;gap:.5em;background:var(--nori);color:var(--lait);border-radius:var(--rayon-pilule);padding:.7em 1.2em;text-decoration:none;font-weight:700}
.bfc-ville-pilule .bfc-num{background:var(--matcha);color:var(--nori);border-radius:999px;padding:.05em .55em;font-size:.82rem}
@media (max-width:900px){.bfc-carte-villes{grid-template-columns:1fr}}

/* =====================================================================
   10. ARDOISE DE LA SEMAINE — procédé #2
   ===================================================================== */
.bfc-ardoise{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.bfc-ardoise-liste{display:flex;flex-direction:column}
.bfc-ardoise-ligne{display:flex;align-items:baseline;gap:.5em;padding:.65em 0;text-decoration:none;color:inherit;font-family:var(--corps);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem}
.bfc-ardoise-ligne .bfc-ardoise-nom{white-space:nowrap}
.bfc-ardoise-ligne .bfc-ardoise-pointilles{flex:1;border-bottom:2px dotted var(--matcha);height:.6em;align-self:flex-end}
.bfc-ardoise-ligne .bfc-ardoise-temps{white-space:nowrap;color:var(--matcha)}
.bfc-ardoise-photo{aspect-ratio:3/4;border-radius:var(--rayon);overflow:hidden}
@media (max-width:900px){.bfc-ardoise{grid-template-columns:1fr}.bfc-ardoise-photo{order:-1}}

/* =====================================================================
   11. ÉCRAN SCINDÉ RECETTE — procédé #5
   ===================================================================== */
.bfc-recette-tete{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;padding:32px 0 48px}
.bfc-recette-colonne{position:sticky;top:96px;align-self:start}
.bfc-recette-auteur{display:flex;align-items:center;gap:10px;margin-bottom:1em}
.bfc-recette-actions{display:flex;gap:10px;margin-top:1.2em}
.bfc-recette-actions button{border:1.5px solid var(--nori);background:none;border-radius:var(--rayon-pilule);padding:.6em 1em;font-weight:700}
.bfc-recette-visuel{position:relative;aspect-ratio:4/5;border-radius:var(--rayon);overflow:hidden;background:var(--lavis)}
.bfc-anneaux{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.bfc-recette-visuel img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.bfc-recette-tete{grid-template-columns:1fr;gap:28px}.bfc-recette-colonne{position:static}.bfc-recette-visuel{order:-1}}

.bfc-cases4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:color-mix(in srgb, var(--nori) 16%, transparent);border-radius:var(--rayon);overflow:hidden;margin:32px 0}
.bfc-case{background:var(--lavis);padding:1.4em 1em;text-align:center}
.bfc-case b{display:block;font-family:var(--titre);font-size:1.5rem}
.bfc-case span{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:640px){.bfc-cases4{grid-template-columns:repeat(2,1fr)}}

.bfc-ingredients{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px 12px;margin:28px 0}
.bfc-ingredient{width:88px;height:88px;border-radius:50%;background:var(--lavis);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bfc-ingredient-svg{width:100%;height:100%}
.bfc-ingredient-nom{text-align:center;font-size:.85rem;font-weight:700;margin-top:.5em}
.bfc-ingredient-qte{text-align:center;font-size:.78rem;color:color-mix(in srgb, var(--nori) 65%, transparent)}
.bfc-ingredient-item{display:flex;flex-direction:column;align-items:center}
.bfc-hero-pastilles .bfc-ingredient{background:var(--lait);border:3px solid var(--matcha)}

.bfc-etapes{counter-reset:none;display:flex;flex-direction:column;gap:24px;margin:28px 0}
.bfc-etape{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.bfc-etape-num{font-family:var(--titre);font-size:2rem;color:var(--matcha)}
.bfc-etape-ico{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--lavis)}
.bfc-etape-corps{display:flex;gap:14px;align-items:flex-start}

.bfc-encadre{background:var(--lavis);border-radius:var(--rayon);padding:24px;margin:28px 0}
.bfc-jauges{display:flex;flex-direction:column;gap:10px;margin-top:.8em}
.bfc-jauge{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;font-size:.9rem}
.bfc-jauge-barre{height:10px;background:color-mix(in srgb, var(--matcha) 22%, var(--lait));border-radius:999px;overflow:hidden}
.bfc-jauge-barre span{display:block;height:100%;background:var(--matcha);border-radius:999px;animation:bfc-jauge 1.1s ease-out both}
@keyframes bfc-jauge{from{width:0}}

details.bfc-accordeon{border-top:1.5px solid color-mix(in srgb, var(--nori) 18%, transparent);padding:14px 0}
details.bfc-accordeon summary{cursor:pointer;font-weight:800}

.bfc-separateur{border:none;border-top:3px dotted var(--matcha);margin:40px 0}

/* =====================================================================
   12. PAGE VILLE — HappyCow
   ===================================================================== */
.bfc-fil{font-size:.85rem;color:color-mix(in srgb, var(--nori) 60%, transparent);padding:20px 0 0}
.bfc-fil a{text-decoration:none}
.bfc-ville-tete{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:24px 0 40px}
.bfc-ville-compteur{font-weight:700;color:var(--matcha-texte)}
.bfc-filtres{position:sticky;top:74px;z-index:20;background:var(--lait);padding:14px 0;border-bottom:1.5px solid color-mix(in srgb, var(--nori) 14%, transparent);display:flex;gap:10px;flex-wrap:wrap}
.bfc-filtre-pilule{border:1.5px solid var(--nori);border-radius:var(--rayon-pilule);padding:.5em 1em;font-size:.85rem;font-weight:700;background:none}
.bfc-filtre-pilule.is-actif{background:var(--matcha);border-color:var(--matcha)}
.bfc-carte--large{grid-column:span 2}
@media (max-width:900px){.bfc-carte--large{grid-column:span 1}}
.bfc-ville-corps{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;padding:32px 0}
.bfc-lieu{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:20px 0;border-bottom:1.5px solid color-mix(in srgb, var(--nori) 12%, transparent)}
.bfc-lieu-vignette{width:120px;height:120px;border-radius:var(--rayon);overflow:hidden;background:var(--lavis);display:flex;align-items:center;justify-content:center}
.bfc-lieu-vignette svg{width:70%;height:70%}
.bfc-lieu-fiche{display:flex;flex-direction:column;gap:.35em}
.bfc-lieu-meta{font-size:.85rem;color:color-mix(in srgb, var(--nori) 65%, transparent)}
.bfc-lieu-source{font-size:.78rem;color:color-mix(in srgb, var(--nori) 55%, transparent)}
.bfc-rail-droite{position:sticky;top:130px;display:flex;flex-direction:column;gap:24px}
.bfc-villes-proches{background:var(--avoine);border-radius:var(--rayon);padding:20px}
.bfc-villes-proches li{padding:.4em 0}
@media (max-width:900px){.bfc-ville-tete,.bfc-ville-corps{grid-template-columns:1fr}.bfc-rail-droite{position:static}}

.bfc-vide{background:var(--avoine);border-radius:var(--rayon);padding:28px;text-align:center}

/* =====================================================================
   13. PIED DE PAGE
   ===================================================================== */
.bfc-pied{background:var(--ardoise);color:var(--ardoise-encre)}
.bfc-pied a{text-decoration:none}
.bfc-pied-titre-geant{font-family:var(--titre);font-size:clamp(1.8rem,5vw,3.2rem);text-align:center;padding:40px 0}
.bfc-pied-grille{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding:20px 0 40px}
.bfc-pied-col h2{font-family:var(--corps);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.8em;color:var(--matcha)}
.bfc-pied-col li{padding:.35em 0}
.bfc-pied-form{display:flex;flex-direction:column;gap:8px}
.bfc-pied-form input{border-radius:var(--rayon-pilule);border:none;padding:.7em 1.1em;font:inherit}
.bfc-pied-bas{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid color-mix(in srgb, var(--ardoise-encre) 20%, transparent);font-size:.82rem;flex-wrap:wrap;gap:10px}
@media (max-width:900px){.bfc-pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bfc-pied-grille{grid-template-columns:1fr}}

/* =====================================================================
   14. FORMULAIRES
   ===================================================================== */
.bfc-form{max-width:640px}
.bfc-champs{display:grid;gap:14px;margin-bottom:14px}
.bfc-champs--deux{grid-template-columns:1fr 1fr}
@media (max-width:600px){.bfc-champs--deux{grid-template-columns:1fr}}
.bfc-champ label,.bfc-champ legend{display:block;font-weight:700;font-size:.85rem;margin-bottom:.35em}
.bfc-champ input[type=text],.bfc-champ input[type=email],.bfc-champ select,.bfc-champ textarea{width:100%;border:1.5px solid var(--nori);border-radius:var(--rayon);padding:.75em 1em;font:inherit;background:var(--lait)}
.bfc-champ input:focus,.bfc-champ select:focus,.bfc-champ textarea:focus{outline:3px solid var(--matcha)}
.bfc-check{display:inline-flex;align-items:center;gap:.4em;font-size:.9rem;margin:.3em 1em .3em 0}
.bfc-champ--regimes{border:none;padding:0;margin-bottom:14px}
.bfc-form-note{font-size:.82rem;color:color-mix(in srgb, var(--nori) 60%, transparent)}
.bfc-form-ok{background:var(--matcha);color:var(--nori);border-radius:var(--rayon);padding:.8em 1.2em;font-weight:700;margin-top:1em}
.bfc-piege{position:absolute;left:-9999px}
.bfc-form--newsletter .bfc-form-ligne{display:flex;gap:10px}
.bfc-form--newsletter input[type=email]{flex:1;border:1.5px solid var(--nori);border-radius:var(--rayon-pilule);padding:.8em 1.2em;font:inherit}
.bfc-form-consent{font-size:.82rem;margin-top:.6em}

/* bandes doubles formulaire (accueil §7 DA) */
.bfc-double{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:900px){.bfc-double{grid-template-columns:1fr;gap:36px}}

/* pastille numérotée « ce qui se passe après » */
.bfc-etapes-num{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0}
.bfc-etape-num-carte{text-align:center}
.bfc-etape-num-carte .bfc-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--matcha);color:var(--nori);font-family:var(--titre);font-size:1.4rem;margin-bottom:.6em}
@media (max-width:700px){.bfc-etapes-num{grid-template-columns:1fr}}

/* =====================================================================
   15. ARTICLE
   ===================================================================== */
.bfc-article-tete{padding:24px 0 20px;max-width:74ch}
.bfc-article-chapo{font-size:1.2rem;font-weight:600;color:color-mix(in srgb, var(--nori) 78%, transparent)}
.bfc-article-ouverture{aspect-ratio:16/9;border-radius:var(--rayon);overflow:hidden;margin-bottom:.6em}
.bfc-article-legende{font-size:.8rem;color:color-mix(in srgb, var(--nori) 55%, transparent)}
.bfc-texte{max-width:68ch;margin:0 auto}
.bfc-texte h2{font-size:1.8rem;margin-top:1.6em}
.bfc-texte h3{font-family:var(--corps)}
.bfc-texte blockquote{font-family:var(--titre);font-size:1.5rem;color:var(--matcha-texte);border:none;margin:1.2em 0;padding:0}
.bfc-texte .bfc-encadre{font-size:.98rem}
.bfc-texte img{border-radius:var(--rayon);margin:1.2em 0}
.sbs_tableau{overflow-x:auto}
.sbs_tableau table{width:100%;border-collapse:collapse}
.sbs_tableau th,.sbs_tableau td{padding:.6em .8em;border-bottom:1px solid color-mix(in srgb, var(--nori) 15%, transparent);text-align:left}

/* =====================================================================
   16. AUTEUR / 404
   ===================================================================== */
.bfc-signature{display:flex;gap:16px;align-items:flex-start;background:var(--avoine);border-radius:var(--rayon);padding:20px;margin:32px 0}
.bfc-signature-photo{border-radius:50%;object-fit:cover}
.bfc-signature-ecusson{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:none;background:var(--lavis)}
.bfc-signature-nom a{font-weight:800;text-decoration:none}
.bfc-auteur-tete{display:flex;gap:24px;align-items:center;padding:48px 0}
.bfc-404{text-align:center;padding:80px 0}
.bfc-404 svg{width:220px;margin:0 auto 24px}

/* =====================================================================
   17. NAV MOBILE BASSE (390 px)
   ===================================================================== */
.bfc-nav-mobile{display:none}
@media (max-width:640px){
  .bfc-nav-princ,.bfc-tete-actions .bfc-loupe-bouton{display:none}
  .bfc-burger{display:flex}
  .bfc-nav-mobile{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--lait);border-top:2px solid color-mix(in srgb, var(--nori) 14%, transparent);z-index:50;padding:6px 0 max(6px, env(safe-area-inset-bottom))}
  .bfc-nav-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;text-decoration:none;padding:.4em 0}
  .bfc-nav-mobile svg{width:22px;height:22px}
  body{padding-bottom:62px}
  .bfc-recette-tete{padding-bottom:12px}
  .bfc-tampon{width:64px;height:64px;top:10px;right:10px}
  .bfc-pied-form,.bfc-pied-titre-geant{font-size:1.6rem}
}

/* défilement horizontal natif pour toute grille qui déborderait sur mobile (P-205 lisibilité) */
@media (max-width:480px){
  .bfc-ardoise-ligne{font-size:.85rem}
  .bfc-case b{font-size:1.2rem}
}

/* Correctif héros 21/09 : l'illustration et les pastilles n'avaient aucune taille (SVG effondrés). */
.bfc-hero-visuel .bfc-illus-bol{width:100%;height:100%;display:block}
.bfc-ingredient > svg{width:64%;height:64%;display:block}
.bfc-hero{max-width:var(--conteneur)}