/* Site premium des clubs de nutrition. Pilote Sainte-Julie. Refonte du 15/10/2026 (David : rien n'etait aligne).
   UNE regle par composant, ecrite pour le telephone puis completee par deux media queries (700 et 960 px).

   LA GRILLE (valable sur toutes les pages)
   - Contenu : colonne de 1290 px max, retrait --marge (18 / 28). Son bord gauche est celui du logo, son bord droit celui du bouton du menu.
   - Cadres (heros, cartes cremes, bloc sombre, formulaire, carte du club) : UN SEUL retrait interieur --pad (20 / 32 / 40).
     Le texte d'un cadre part donc a --marge + --pad, partout.
   - Deux colonnes : 1fr 1fr separees de --gap (18 / 40 / 64). La 2e colonne demarre au centre de la page plus --gap/2,
     dans un cadre comme hors cadre, sur TOUTES les pages (1440 px : 752).
     A 1440 px les textes partent donc de 103 (hors cadre), 143 (dans un cadre) ou 752 (2e colonne).
   - Colonne de lecture (article, mentions) : 720 px, franchement centree.
   ECARTS
   - Entre deux blocs : --sec (32 / 56 / 72), porte uniquement par margin-block des sections (les marges voisines se confondent).
   - En-tete de bloc : surtitre, 12 px, titre, 16 px, texte. Rangees de cartes : --gap.
   DEBORDEMENTS (sobres, meme amplitude --deb : 0 sur telephone, 24 des 700 px, 48 des 960 px, meme ombre --ombre)
   - Heros : le chatbot et la bande des 3 reperes depassent du bas du heros de --deb, et finissent sur la meme ligne.
   - Carte creme avec photo (equipe, resultats) : la photo depasse du haut de sa carte de --deb.
   ANIMATIONS : apparition 560 ms ease-out, montee de 20 px, decalage 70 ms. Survol : elevation de 4 px, image a 103 %.
   Le masquage initial n'existe que si le JS a pose la classe js sur html. prefers-reduced-motion coupe tout.
   RAYONS 14 / 24 / 999. Zones tactiles 44 px. */

@font-face{font-family:Figtree;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
 --vert:#266431;--nuit:#0E2512;--sapin:#163E35;--creme:#F9F8F4;--lin:#E0DFD9;--encre:#101820;--gris:#66655F;
 --texte:#4a4945;--trait:#ecebe6;--r-s:14px;--r-m:24px;--r-l:999px;--large:1290px;
 --marge:18px;--pad:20px;--gap:18px;--sec:32px;--deb:0px;
 --ombre:0 30px 60px -28px #0e2512a6,0 0 0 1px #0e25120f;
 --ease:cubic-bezier(.22,.61,.36,1)
}
@media (min-width:700px){:root{--marge:28px;--pad:32px;--gap:40px;--sec:56px;--deb:24px}}
@media (min-width:960px){:root{--pad:40px;--gap:64px;--sec:72px;--deb:48px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#fff;color:var(--encre);font:16px/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible+.sf-tuile,input:focus-visible+.sf-chip,summary:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:var(--r-s)}
fieldset{min-width:0}
[hidden]{display:none!important}
.nobr{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
address{font-style:normal}

/* Colonne et sections */
.sf-wrap{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.sf-sec{margin-block:var(--sec)}
.sf-sec.first{margin-top:28px}
.sf-sec.deborde{margin-top:calc(var(--sec) + var(--deb))}
@media (min-width:960px){.sf-sec.first{margin-top:48px}}

/* Titres. Surtitre, 12 px, titre, 16 px, texte */
.sf-eye{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--vert);font-weight:700;margin:0 0 12px}
.sf-proprio{margin:0;font-size:15px;font-weight:600;color:var(--nuit);line-height:1.2}
.sf-eye::before{content:"";width:18px;height:1.5px;background:currentColor}
.sf-h1{font-size:28px;line-height:1.08;font-weight:700;letter-spacing:-.035em;color:var(--nuit);margin:0 0 16px}
.sf-h2{font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.03em;color:var(--nuit);margin:0 0 16px}
.sf-h3{font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--nuit);margin:12px 0 8px}
.sf-h3-haut{margin-top:0}
.sf-h3-espace{margin-top:24px}
.sf-p{color:var(--texte);margin:0 0 16px;line-height:1.6}
.sf-p-serre{margin:0}
.sf-p-bas{margin:16px 0 0}
.sf-s{font-size:13px;color:var(--gris)}
.sf-s-nu{margin:0}
.sf-b{font-weight:700;color:var(--nuit)}
.sf-tete{display:grid;gap:0}
.sf-tete>.sf-p,.sf-tete .sf-p:last-child{margin-bottom:0}
.sf-tete>.sf-p{margin-top:0}
@media (min-width:700px){
 .sf-tete{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:end}
 .sf-tete .sf-h1,.sf-tete .sf-p{margin-bottom:0}
 .sf-tete>div .sf-h1{margin-bottom:0}
 .sf-tete .sf-chips{grid-column:1/-1}
}
@media (min-width:960px){.sf-h1{font-size:44px}.sf-h2{font-size:30px}.sf-h3{font-size:20px}}

/* Boutons. Une hauteur (48), un rayon, un corps (15), une transition de couleur */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-l);background:linear-gradient(180deg,#ffffff24,#0000001f),var(--vert);box-shadow:0 10px 20px -12px #266431cc;color:#fff;font:700 16px/1.2 Figtree,sans-serif;padding:0 24px;text-align:center;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .15s ease}
.sf-btn:active{transform:scale(.98)}
.sf-btn.ghost{background:none;box-shadow:none;border-color:var(--vert);color:var(--vert)}
.sf-btn.light{background:#fff;color:var(--nuit);box-shadow:0 10px 24px -12px #0009}
.sf-btn.plein{display:flex;width:100%}
.sf-btn[disabled]{opacity:.55;cursor:wait}
.sf-btn-bas{margin-top:16px}
.sf-btn-haut{margin-top:16px}
@media (hover:hover){
 .sf-btn:hover{background-color:#1b4d26;box-shadow:0 14px 24px -12px #266431e6}
 .sf-btn.ghost:hover{background:#2664311a;color:var(--nuit);border-color:var(--nuit)}
 .sf-btn.light:hover{background:var(--creme);box-shadow:0 14px 28px -12px #000b}
}

/* Barre fixe du bas, telephone */
.sf-bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:25;background:#ffffffe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--lin);border-radius:var(--r-l);padding:6px;display:flex;gap:6px;box-shadow:0 12px 30px -12px #0e251259}
.sf-bar .sf-btn{flex:1}
.sf-tel{width:48px;height:48px;flex:0 0 48px;border:1.5px solid var(--vert);border-radius:var(--r-l);display:flex;align-items:center;justify-content:center;color:var(--vert);background:#fff}
.sf-pad{height:84px}
.pas-barre .sf-bar,.pas-barre .sf-pad{display:none!important}

/* Cadres : un seul retrait interieur, --pad */
.sf-card{border-radius:var(--r-m);padding:var(--pad);box-shadow:0 0 0 1px var(--trait),0 18px 34px -26px #0e251266;background:#fff}
.sf-cream{background:linear-gradient(180deg,var(--creme),#f3f1ea);border-radius:var(--r-m);padding:var(--pad)}
.sf-dark{background:radial-gradient(120% 90% at 100% 0,#2a5a3a 0,var(--sapin) 45%,var(--nuit) 100%);box-shadow:0 24px 40px -26px var(--nuit);color:#fff;border-radius:var(--r-m);padding:var(--pad)}
.sf-dark .sf-h2{color:#fff;font-size:24px}
.sf-dark .sf-p{color:#ffffffcc}
.sf-dark-suite .sf-btn{width:100%}
.sf-dark-suite .sf-p{margin-bottom:16px}
@media (min-width:700px){
 .sf-dark{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:center}
 .sf-dark .sf-h2{margin:0;font-size:28px}
 .sf-dark-suite .sf-btn{width:auto}
}
@media (min-width:960px){.sf-dark .sf-h2{font-size:32px}}

/* Images */
.sf-img{border-radius:var(--r-m);overflow:hidden;position:relative;background:var(--creme);box-shadow:0 14px 30px -20px #0e251280}
.sf-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sf-img.sm{border-radius:var(--r-s)}
.sf-cap{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-l);background:#ffffffd9;backdrop-filter:blur(6px);color:var(--nuit);font-size:12px;font-weight:700}
.sf-tag{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 10px;border-radius:var(--r-l);background:#fff;border:1px solid var(--lin);font-size:12px;font-weight:700;color:var(--nuit)}
.sf-line{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--lin)}
.sf-line:first-child{padding-top:0}
.sf-line:last-child{border-bottom:0;padding-bottom:0}
.sf-num{flex:0 0 28px;height:28px;border-radius:var(--r-l);background:linear-gradient(180deg,var(--vert),var(--nuit));box-shadow:0 0 0 4px #fff;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.sf-cream .sf-num{box-shadow:0 0 0 4px var(--creme)}
.sf-coche{flex:0 0 22px;height:22px;margin-top:2px;color:var(--vert)}

/* Deux colonnes. UNE grille : 1fr 1fr, ecart --gap. La 2e colonne demarre au meme x partout. */
.sf-duo,.sf-split,.sf-equipe,.sf-lieu,.sf-contact,.sf-une,.sf-pied-grille,.sf-liste,.sf-tete,.sf-dark,.sf-etapes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
.sf-tete{row-gap:0}
.sf-dark{row-gap:16px}
.sf-duo .sf-img{aspect-ratio:4/3}
.sf-img.portrait,.sf-carre.portrait{aspect-ratio:4/5;max-width:440px;width:100%}
.sf-carre{width:100%;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--ombre)}
.sf-carre img{width:100%;height:100%;object-fit:cover}
@media (min-width:700px){
 .sf-duo,.sf-split,.sf-equipe,.sf-lieu,.sf-contact,.sf-une,.sf-pied-grille,.sf-liste,.sf-tete,.sf-dark{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sf-duo,.sf-equipe,.sf-lieu,.sf-une{align-items:center}
 .sf-split,.sf-contact{align-items:start}
 .sf-duo.inverse .sf-img{order:2}
 .sf-duo.inverse .sf-img.portrait{justify-self:start}
 /* Debordement : la photo d'une carte creme depasse du haut de sa carte */
 .sf-equipe>.sf-carre{align-self:start;margin-top:calc(-1*(var(--pad) + var(--deb)))}
 /* Proprietaires : dans la bande au-dessus de la carte, a droite de la photo qui deborde */
 .sf-equipe>.sf-proprio{grid-column:2;grid-row:1;align-self:start;height:var(--deb);margin-top:calc(-1*(var(--pad) + var(--deb)));display:flex;align-items:flex-end;padding-bottom:10px;box-sizing:border-box}
 .sf-equipe>.sf-proprio+div{grid-column:2;grid-row:1}
}

/* Etapes de l'accueil (15/10/2026) : titre, phrase et bouton REGROUPES a gauche et centres verticalement face aux
   3 etapes (avant : titre en haut, bouton en bas, un grand vide entre). Telephone : titre, phrase, etapes, bouton. */
.sf-split>.sf-h2,.sf-etapes>.sf-h2{margin-bottom:0}
.sf-etapes{row-gap:16px}
.sf-etapes>.sf-etapes-p{margin:0}
.sf-etapes>.sf-etapes-liste{margin-top:8px}
.sf-etapes .sf-btn{width:100%;margin-top:16px}
@media (min-width:700px){
 .sf-etapes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto auto auto 1fr;row-gap:0;align-items:start}
 .sf-etapes>.sf-h2{grid-column:1;grid-row:2;margin:0 0 16px}
 .sf-etapes>.sf-etapes-p{grid-column:1;grid-row:3}
 .sf-etapes>.sf-etapes-liste{grid-column:2;grid-row:1/-1;align-self:center;margin:0}
 .sf-etapes>.sf-btn{grid-column:1;grid-row:4;justify-self:start;margin:24px 0 0;width:auto}
}

/* Galerie qui defile : 2 photos visibles sur la grille a partir de 700 px */
.sf-gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--marge) 14px;scroll-padding-inline:var(--marge);scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1*var(--marge))}
.sf-gal::-webkit-scrollbar{display:none}
.sf-gal>figure{flex:0 0 84%;aspect-ratio:4/3;scroll-snap-align:start;margin:0}
.sf-galwrap{position:relative}
.sf-galnav{display:none}
@media (min-width:700px){
 .sf-gal{gap:var(--gap)}
 .sf-gal>figure{flex-basis:calc((100% - var(--gap))/2)}
}
@media (min-width:700px) and (hover:hover) and (pointer:fine){
 .js .sf-galnav{display:flex;position:absolute;top:calc(50% - 29px);z-index:2;width:48px;height:48px;align-items:center;justify-content:center;border-radius:var(--r-l);border:1.5px solid var(--nuit);background:#fff;color:var(--nuit);cursor:pointer;box-shadow:0 8px 18px -8px #0e251299;padding:0;transition:opacity .2s}
 .js .sf-galnav.prec{left:12px}
 .js .sf-galnav.suiv{right:12px}
 .js .sf-galnav[disabled]{opacity:.35;cursor:default}
}

/* FAQ */
.sf-faq details{border-bottom:1px solid var(--lin)}
.sf-faq details:first-child{border-top:1px solid var(--lin)}
.sf-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--nuit)}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";color:var(--vert);font-weight:800;font-size:22px;line-height:1;flex:0 0 auto;transition:transform .25s var(--ease)}
.sf-faq details[open] summary::after{transform:rotate(45deg)}
.sf-faq details>div{padding:0 0 16px;color:var(--texte)}

/* Carte du club : photo a gauche, adresse a droite, dans une carte creme (retrait --pad) */
.sf-lieu .sf-img{aspect-ratio:4/3}
.sf-lieu-txt .sf-h2{margin-bottom:12px}
.sf-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.sf-actions a{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-l);border:1.5px solid var(--vert);font-weight:700;font-size:15px;text-decoration:none;background:#fff;transition:background-color .22s,color .22s,border-color .22s}
@media (hover:hover){.sf-actions a:hover{background:var(--nuit);border-color:var(--nuit);color:#fff}}
@media (min-width:700px){.sf-lieu:not(.nu) .sf-img{aspect-ratio:auto;height:100%;min-height:320px}}
/* Variante sans cadre (contact), 2e colonne : photo puis adresse, a la hauteur du formulaire */
.sf-lieu.nu{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:0;background:none}
.sf-lieu.nu .sf-img{aspect-ratio:3/2}
@media (min-width:700px){
 /* La colonne de droite suit le defilement du formulaire (photo de 600 px : pas d'agrandissement force) */
 .sf-contact-lieu{position:sticky;top:96px}
 .sf-lieu.nu .sf-img{aspect-ratio:auto;height:440px}
}

/* Filtres en vignettes */
.sf-chips{display:flex;flex-wrap:wrap;gap:8px}
.sf-defile{flex-wrap:nowrap;overflow-x:auto;margin:16px calc(-1*var(--marge)) 0;padding:2px var(--marge) 10px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding-inline:var(--marge)}
.sf-defile::-webkit-scrollbar{display:none}
/* 21/10/2026 maquettiste : 4 filtres du blog = 386 px pour 354 disponibles a 390 px, le dernier etait coupe. Puces plus serrees sous 480 px. */
@media (max-width:480px){.sf-defile{gap:6px}.sf-defile .sf-chip{padding:0 12px}}
.sf-chip{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:var(--r-l);border:1px solid var(--lin);font:700 14px/1 Figtree,sans-serif;color:var(--nuit);background:#fff;box-shadow:0 4px 10px -8px #0e251266;cursor:pointer;scroll-snap-align:start;transition:background-color .2s,color .2s,border-color .2s}
.sf-chip.on,input:checked+.sf-chip{background:var(--nuit);color:#fff;border-color:var(--nuit);font-weight:800}
.sf-chip.on::before,input:checked+.sf-chip::before{content:"\2713";margin-right:6px}

/* Conseils : a la une, puis cartes en 2 colonnes */
.sf-une{display:grid;text-decoration:none;color:inherit}
.sf-une .sf-img{aspect-ratio:3/2}
.sf-une .sf-h3{font-size:24px;line-height:1.15;margin:12px 0 8px}
.sf-liste{row-gap:24px}
.sf-liste a{display:flex;gap:16px;align-items:center;padding:12px;border:1px solid var(--trait);border-radius:var(--r-m);background:#fff;text-decoration:none;color:inherit;min-height:96px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.sf-liste .sf-img{flex:0 0 112px;height:84px;box-shadow:none}
.sf-liste .sf-b{line-height:1.3;margin-bottom:4px}
.sf-liste-une{grid-template-columns:1fr!important;gap:16px}
@media (min-width:960px){.sf-une .sf-h3{font-size:32px}}
@media (hover:hover){
 .sf-liste a:hover,.sf-une:hover .sf-img{box-shadow:0 22px 36px -24px #0e2512a6}
 .sf-liste a:hover{transform:translateY(-4px)}
 .sf-liste a:hover .sf-b,.sf-une:hover .sf-h3{text-decoration:underline;text-underline-offset:3px}
 .sf-liste a:hover img,.sf-une:hover img,.sf-gal figure:hover img{transform:scale(1.03)}
}

/* Article. Colonne de lecture centree, 720 px */
.sf-art{max-width:720px;margin-inline:auto}
.sf-retour{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}
.sf-auteur{display:flex;gap:10px;align-items:center;margin:4px 0 0}
.sf-auteur img{width:44px;height:44px;border-radius:var(--r-l);object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--lin)}
.sf-art .sf-visuel{aspect-ratio:3/2;margin:24px 0}
.sf-essentiel{margin:24px 0}
.sf-essentiel p{margin:8px 0 0;color:var(--texte)}
.sf-art-bloc{margin-top:32px}
.sf-corps h2{font-size:22px;line-height:1.2;letter-spacing:-.025em;color:var(--nuit);margin:32px 0 12px}
.sf-corps h3{font-size:18px;color:var(--nuit);margin:24px 0 8px}
.sf-corps p,.sf-corps li{color:var(--texte)}
.sf-corps strong{color:var(--nuit)}
.sf-corps blockquote{margin:24px 0;padding:20px;border-left:3px solid var(--vert);background:var(--creme);border-radius:0 var(--r-s) var(--r-s) 0}
.sf-corps blockquote p{margin:0;font-size:18px;line-height:1.45;color:var(--nuit);font-weight:600}
.sf-corps blockquote i{font-style:normal}
.sf-corps table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.sf-corps td,.sf-corps th{border-bottom:1px solid var(--lin);padding:8px;text-align:left}
.sf-avis{font-size:13px;color:var(--gris);border-top:1px solid var(--lin);padding-top:16px}
.sf-404{text-align:center;max-width:560px}
.sf-404 .sf-eye{justify-content:center}
.sf-404-actions{display:grid;gap:12px;margin-top:24px}

/* Formulaire */
.sf-champs{border:0;padding:0;margin:0}
.sf-label{display:block;font-size:13px;font-weight:700;color:var(--nuit);margin:20px 0 8px;padding:0}
.sf-label .sf-s{font-weight:400}
.sf-champs:first-child .sf-label{margin-top:0}
legend.sf-label{padding-top:20px;margin-top:0}
form>fieldset:first-child legend.sf-label{padding-top:0}
.sf-field{width:100%;border:1px solid var(--lin);border-radius:18px;min-height:52px;padding:0 16px;font:16px Figtree,sans-serif;color:var(--encre);background:#fff;box-shadow:0 8px 18px -14px #0e251266;-webkit-appearance:none;appearance:none;transition:border-color .2s,outline-color .2s}
.sf-field:focus{outline:3px solid #26643155;border-color:var(--vert)}
.sf-field.err{border-color:var(--encre);border-width:2px}
.sf-err{display:none;font-size:13px;color:var(--encre);font-weight:700;margin-top:6px}
.sf-err::before{content:"! "}
.err+.sf-err,.sf-err.on{display:block}
.sf-civ{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sf-civ>label{display:flex}
.sf-tuiles{display:flex;gap:10px;overflow-x:auto;margin-inline:calc(-1*var(--marge));padding:2px var(--marge) 10px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding-inline:var(--marge)}
.sf-tuiles::-webkit-scrollbar{display:none}
.sf-tuiles>label,.sf-civ>label,.sf-chips>label,.sf-bulles>label{position:relative}  /* l'entree .sr est en absolu : sans ancre elle echappe au defilement et elargit la page */
.sf-tuiles>label{flex:0 0 116px;display:flex;scroll-snap-align:start}
.sf-tuile{flex:1 1 auto;width:100%;min-height:120px;border:1px solid var(--lin);border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;color:var(--vert);background:#fff;position:relative;box-shadow:0 8px 18px -14px #0e251266;cursor:pointer;user-select:none;transition:background-color .2s,border-color .2s}
.sf-civ .sf-tuile{min-height:84px;flex-direction:row;align-items:center;justify-content:flex-start}
.sf-tuile svg{width:48px;height:48px;flex:0 0 auto}  /* 18/10/2026, David : icones x1,5 sur /contact/ */
.sf-tuile img{width:auto;height:48px;flex:0 0 auto;align-self:flex-start}
.sf-tuile span{font-size:14px;line-height:1.25;font-weight:700;color:var(--nuit)}
input:checked+.sf-tuile{background:var(--nuit);border-color:var(--nuit);color:#fff}
input:checked+.sf-tuile span{color:#fff}
input:checked+.sf-tuile img{filter:invert(1)}
input:checked+.sf-tuile::after{content:"\2713";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:var(--r-l);background:#fff;color:var(--nuit);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sf-accord{display:flex;gap:12px;align-items:flex-start;margin:24px 0 16px;cursor:pointer;min-height:44px;position:relative}
.sf-accord input{width:24px;height:24px;margin:0;flex:0 0 24px;accent-color:var(--vert)}
.sf-rgpd{font-size:13px;color:var(--gris);margin:16px 0 0;line-height:1.5}
.sf-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sf-merci .sf-line svg{flex:0 0 24px;height:24px;color:var(--vert)}
.sf-demo{margin-top:16px;font-size:13px;padding:12px 16px;border:1px dashed var(--gris);border-radius:var(--r-s);color:var(--texte)}
@media (min-width:700px){
 .sf-tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:visible;margin:0;padding:2px 0 0}
 .sf-tuiles>label{flex:none}
}

/* Resultats */
.sf-solo{margin:0}
.sf-lead{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--nuit);margin:0 0 16px}
.sf-solo .sf-s{margin:0}
@media (min-width:700px){.sf-lead{font-size:28px}}
@media (min-width:960px){.sf-lead{font-size:34px}}

/* Chatbot du heros. Large (colonne 2), texte 16 px, boutons de choix 15 px sur 44 px, Continuer 48 px */
@media (min-width:960px){
 .sf-chat{display:flex;flex-direction:column;position:relative;z-index:2;background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre);overflow:hidden;font-size:16px;line-height:1.45;color:var(--encre)}
}
.sf-chat .tete{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--trait);font-size:17px;line-height:1.3}
.sf-chat .av{width:44px;height:44px;border-radius:14px;object-fit:cover}
.sf-chat-titre{color:var(--nuit);font-weight:700}
.sf-chat .tete .sf-s{font-size:14px}
.sf-chat .fil{padding:20px 24px 8px;max-height:380px;overflow-y:auto}
.sf-bul{max-width:90%;padding:12px 16px;border-radius:18px 18px 18px 4px;background:#f3f1ea;font-size:16px;line-height:1.45;margin:0 0 10px}
.sf-bul.moi{margin-left:auto;border-radius:18px 18px 4px 18px;background:var(--nuit);color:#fff}
.sf-bulles{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sf-bulles label{position:relative}
.sf-bu{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--lin);border-radius:var(--r-l);background:#fff;font-weight:700;font-size:15px;color:var(--nuit);cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
@media (hover:hover){.sf-bu:hover{border-color:var(--nuit)}}
input:checked+.sf-bu{background:var(--nuit);border-color:var(--nuit);color:#fff}
input:checked+.sf-bu::after{content:"\2713";margin-left:6px}
input:focus-visible+.sf-bu{outline:3px solid var(--vert);outline-offset:2px}
.sf-chat .pied{padding:12px 24px 24px}
.sf-chat .sf-field{min-height:48px;margin-bottom:10px;font-size:16px}
.sf-chat .sf-btn{width:100%;min-height:48px}
.sf-chat .sf-accord{margin:8px 0 12px;font-size:14px}
.sf-chat .sf-accord input{width:22px;height:22px;flex-basis:22px}
.sf-chat .sf-demo{font-size:14px;line-height:1.45}

/* Apparition au defilement. Le masquage n'existe que si le JS a pose .js sur html.
   Un bloc deja visible a l'ouverture porte .vu des le chargement, sans transition. */
.js .sf-monte:not(.vu){opacity:0;transform:translateY(20px)}
.js .sf-monte{transition:opacity .56s ease-out,transform .56s ease-out;transition-delay:var(--retard,0ms)}
.js .sf-monte.direct{transition:none}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .js .sf-monte:not(.vu){opacity:1;transform:none}
 .sf-liste a:hover,.sf-liste a:hover img,.sf-une:hover img,.sf-gal figure:hover img{transform:none}
}

/* ACCUEIL, lisibilite (David, 15/10/2026 : beaucoup de clients ont plus de 60 ans).
   Texte courant 17 px (18 px des 960 px), interligne 1,6, rien d'utile sous 15 px, aucun texte en opacite sous .85,
   gris fonces (#55544f), cibles tactiles 48 px, graisse 400 au minimum. Portee : body.accueil seulement. */
body.accueil{font-size:17px;line-height:1.6}
body.accueil .sf-p,body.accueil .sf-faq details>div,body.accueil .sf-line .sf-b{line-height:1.6}
body.accueil .sf-s,body.accueil .sf-chiffres{color:#55544f}
body.accueil .sf-s{font-size:15px}
body.accueil .sf-eye,body.accueil .sf-tag,body.accueil .sf-cap{font-size:15px}
body.accueil .sf-heros-p{opacity:1}
body.accueil .sf-heros-p{font-size:17px}
body.accueil .sf-num{flex-basis:32px;height:32px;font-size:15px}
body.accueil .sf-coche{flex-basis:24px;height:24px}
body.accueil .sf-chiffres{font-size:15px}
body.accueil .sf-chiffres b{font-size:18px}
body.accueil .sf-btn,body.accueil .sf-actions a{font-size:16px;min-height:48px}
body.accueil .sf-faq summary{font-size:1em;min-height:56px}
body.accueil a[href^="tel:"]:not(.sf-tel){min-height:48px}
body.accueil .sf-chat{font-size:18px}
body.accueil .sf-chat .tete .sf-s,body.accueil .sf-chat .sf-demo,body.accueil .sf-chat .sf-accord{font-size:15px}
body.accueil .sf-bul{font-size:18px}
body.accueil .sf-bu{font-size:16px;min-height:48px}
body.accueil .sf-chat .sf-field{font-size:18px;min-height:48px}
body.accueil .sf-chat .sf-btn{min-height:48px}
body.accueil .sf-chat .fil{max-height:480px}
@media (min-width:960px){
 body.accueil{font-size:18px}
 body.accueil .sf-heros-p{font-size:20px}
 body.accueil .sf-chiffres{font-size:16px}
}

/* Accueil, plus d'air (David, 15/10/2026) : ecart uniforme entre blocs 48 / 72 / 104 px au lieu de 32 / 56 / 72. */
body.accueil{--sec:48px}
@media (min-width:700px){body.accueil{--sec:72px}}
@media (min-width:960px){body.accueil{--sec:104px}}

/* =====================================================================================================
   ACCUEIL, 15/10/2026 : battre club-nutrition.fr. Titre concret, note 5,0, mur des bilans des membres.
   ===================================================================================================== */

/* Heros, telephone et tablette : la photo en haut, le texte en dessous, fonce sur blanc (plus lisible apres 60 ans
   qu'un texte blanc pose sur une photo). Le chatbot suit, comme sur ordinateur il est a cote. */
.sf-heros-eye{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:0 0 12px;color:var(--vert)}
.sf-heros-titre{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.03em;margin:0 0 16px;color:var(--nuit);text-wrap:balance}
.sf-note{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 16px;font-size:17px;line-height:1.3;color:var(--encre)}
.sf-note b{font-weight:800}
.sf-etoiles{display:inline-flex;gap:2px;color:#E8A317}
.sf-heros-txt .sf-etoiles,.sf-cta-preuve .sf-etoiles{gap:0}
.sf-heros-txt .sf-etoiles svg+svg,.sf-cta-preuve .sf-etoiles svg+svg{margin-left:-2px}
.sf-etoiles svg{width:22px;height:22px;flex:0 0 auto}
/* Mur des bilans : 4 colonnes alignees sur la grille (bords du contenu), 2 sur telephone. Coins 14, ecart 12 / 16. */
.sf-mur{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.sf-mur-col{display:flex;flex-direction:column;gap:12px}
.sf-mur-col>.sf-mur-it{flex:1 1 auto;min-height:0}
.sf-mur-it{display:block;border-radius:var(--r-s);overflow:hidden;background:var(--creme);box-shadow:0 12px 24px -20px var(--nuit);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sf-mur-it img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (max-width:699px){.sf-mur-accueil .sf-mur-it:nth-child(4){display:none}}
@media (min-width:700px){.sf-mur{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}.sf-mur-col{gap:16px}}
@media (hover:hover){.sf-mur-it:hover{transform:translateY(-4px);box-shadow:0 22px 36px -22px var(--nuit)}.sf-mur-it:hover img{transform:scale(1.03)}}
.sf-mur-sec .sf-tete .sf-p{color:var(--encre)}
.sf-mur-pied{display:flex;justify-content:center;margin-top:32px}
@media (max-width:699px){.sf-mur-pied .sf-btn{width:100%}}

/* Visionneuse du mur : la photo en grand, Precedente, Suivante, Fermer. Boutons texte, 48 px. */
.sf-vis{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:#0b1a0ef2;color:#fff}
.sf-vis::backdrop{background:#0b1a0ef2}
.sf-vis[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
.sf-vis img{max-width:min(100%,720px);max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:var(--r-s)}
.sf-vis-barre{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sf-vis button{min-height:48px;padding:0 20px;border-radius:var(--r-l);border:1.5px solid #ffffffb3;background:none;color:#fff;font:700 16px Figtree,sans-serif;cursor:pointer}
.sf-vis button:hover{background:#ffffff26}
.sf-vis p{margin:0;font-size:16px;color:#ffffffe6;text-align:center;max-width:720px}

/* Etapes et FAQ de l'accueil : textes a 17 / 18 px, gris fonce lisible */
body.accueil .sf-etapes .sf-line .sf-p{color:var(--texte);margin-top:2px}
.sf-faq-tete .sf-p{margin:16px 0}
@media (min-width:700px){.sf-faq-tete{position:sticky;top:110px}}
/* Visages de membres a cote de la note : 5 ronds de 40 px qui se chevauchent, cercles blancs */
.sf-visages{display:inline-flex;margin-right:4px}
.sf-visages img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 4px 10px -6px #0e251299}
.sf-visages img+img{margin-left:-12px}
.sf-note{row-gap:8px}
@media (max-width:389px){.sf-visages img{width:34px;height:34px}}


/* =====================================================================================================
   15/10/2026 soir, refonte « facon EE » (David : CTA trop fonce, pied catastrophique, heros pleine largeur colle
   sous la barre, sous-menus pour un site de pres de 200 pages). References : ee.metabacklinks.com, prosima.
   ===================================================================================================== */
:root{--vert-pale:#E6F0E1;--vert-clair:#cfe5c8;--accent:#d9f0b8;--haut:64px}
@media (min-width:1080px){:root{--haut:76px}}

/* Lisibilite sur TOUTES les pages (plus de 60 ans) : texte 17 / 18 px, rien sous 15 px */
body{font-size:17px}
@media (min-width:960px){body{font-size:18px}}
.sf-s,.sf-eye,.sf-tag,.sf-cap,.sf-label,.sf-err,.sf-rgpd,.sf-demo,.sf-avis,.sf-chip,.sf-tuile span,.sf-corps table{font-size:15px}
.sf-s{color:#55544f}

/* ---------- En-tete ---------- */
.sf-top{position:sticky;top:0;z-index:40;background:#fffffff5;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.sf-top.ombre,.sf-top.mega-ouvert{border-bottom-color:var(--trait)}
.sf-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--haut)}
.sf-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--nuit);font-size:19px;letter-spacing:-.02em;text-decoration:none;min-height:48px;flex:0 0 auto}
.sf-logo img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--trait)}
.sf-logo i{color:var(--vert);font-style:normal}
.sf-nav{display:none}
.sf-top-act{display:flex;align-items:center;gap:12px}
.sf-top-tel,.sf-top-btn{display:none!important}
.sf-burger{width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:0;margin-right:-12px}
.sf-burger b{display:block;width:22px;height:2px;background:var(--nuit);border-radius:2px;transition:transform .2s,opacity .2s}
.sf-burger[aria-expanded=true] b:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sf-burger[aria-expanded=true] b:nth-child(2){opacity:0}
.sf-burger[aria-expanded=true] b:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sf-chev{width:12px;height:12px;flex:0 0 auto;transition:transform .2s var(--ease)}
.sf-fl{width:18px;height:18px;flex:0 0 auto;transition:transform .2s var(--ease)}
@media (min-width:960px){.sf-top-btn{display:inline-flex!important;min-height:48px;padding:0 22px;font-size:16px}}
@media (min-width:1200px){.sf-top-tel{display:inline-flex!important;align-items:center;min-height:48px;font-weight:700;font-size:16px;color:var(--nuit);text-decoration:none;padding:0 6px}.sf-top-tel:hover{color:var(--vert);text-decoration:underline}}

/* ---------- Tiroir telephone : plein ecran sous la barre, accordeons ---------- */
.sf-menu-mob{position:fixed;inset:var(--haut) 0 0;background:#fff;z-index:39;padding:8px var(--marge) 40px;overflow-y:auto;overscroll-behavior:contain;display:none}
.sf-menu-mob.ouvert{display:block}
.sf-t-l{list-style:none;margin:0;padding:0}
.sf-t-l>li{border-bottom:1px solid var(--lin)}
.sf-t-lien,.sf-t-tete{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0;background:none;border:0;font:700 22px/1.2 Figtree,sans-serif;letter-spacing:-.02em;color:var(--nuit);text-decoration:none;cursor:pointer;text-align:left}
.sf-t-tete .sf-chev{width:16px;height:16px;color:var(--vert)}
.sf-t-tete[aria-expanded=true] .sf-chev{transform:rotate(180deg)}
.sf-t-lien[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.sf-t-corps{padding:0 0 20px}
.sf-t-tous{display:inline-block;padding:12px 0;line-height:24px;font-weight:700;font-size:17px;color:var(--vert);text-decoration:none;margin-bottom:8px}
.sf-t-tous .sf-fl{display:inline-block;vertical-align:-3px;margin-left:8px}
.sf-t-cartes,.sf-t-arts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf-t-cartes a{display:flex;align-items:center;gap:14px;min-height:72px;padding:8px;border-radius:var(--r-s);background:var(--creme);text-decoration:none;color:var(--texte);font-size:15px;line-height:1.35}
.sf-t-cartes img{width:64px;height:56px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.sf-t-cartes b{display:block;font-size:17px;color:var(--nuit)}
.sf-t-cartes .sf-t-preuve{background:linear-gradient(135deg,var(--vert),#1f5a2b);color:#fff;gap:12px;padding:8px 16px}
.sf-t-preuve b{font-size:26px!important;color:#fff!important;letter-spacing:-.03em}
.sf-t-th{margin:16px 0 4px;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sf-t-th a{color:var(--vert);text-decoration:none;display:inline-flex;min-height:48px;align-items:center}
.sf-t-arts{gap:0}
.sf-t-arts a{display:flex;align-items:center;min-height:48px;font-size:17px;font-weight:600;color:var(--nuit);text-decoration:none}
.sf-menu-mob>.sf-btn{margin-top:24px}
.sf-t-tel{text-align:center;margin:12px 0 0;color:var(--texte);font-size:16px}
.sf-t-tel a{font-weight:700}

/* ---------- Menu ordinateur et mega-menus ---------- */
@media (min-width:1080px){
 .sf-burger,.sf-menu-mob{display:none!important}
 .sf-nav{display:block;flex:1 1 auto}
 .sf-nav-l{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:4px}
 .sf-m{display:flex;align-items:center;border-radius:var(--r-l);transition:background-color .2s}
 .sf-m.ouvert,.sf-m:hover{background:var(--creme)}
 .sf-m-lien{display:inline-flex;align-items:center;min-height:48px;padding:0 4px 0 16px;font-size:17px;font-weight:600;color:var(--nuit);text-decoration:none}
 .sf-m-lien[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--vert)}
 .sf-m-chev{display:inline-flex;align-items:center;justify-content:center;width:20px;height:48px;padding:0 14px 0 2px;box-sizing:content-box;background:none;border:0;color:var(--nuit);cursor:pointer;border-radius:0 var(--r-l) var(--r-l) 0}
 .sf-m.ouvert .sf-chev{transform:rotate(180deg)}
 .sf-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--trait);box-shadow:0 34px 60px -30px #0e251259;max-height:calc(100vh - var(--haut));overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
 .sf-m.ouvert>.sf-mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
 html:not(.js) .sf-m:hover>.sf-mega,html:not(.js) .sf-m:focus-within>.sf-mega{opacity:1;visibility:visible;transform:none}
 .sf-mg-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:24px;padding-top:32px;padding-bottom:36px}
 .sf-mg-conseils{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
}
.sf-mg-pastille{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-l);background:var(--vert-pale);color:var(--nuit);font-weight:800;font-size:17px;margin:0}
.sf-mg-pastille::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert)}
.sf-mg-phrase{font-size:17px;line-height:1.55;color:var(--texte);margin:16px 0 18px}
.sf-mg-tous{display:inline-block;padding:10px 0;line-height:24px;font-weight:700;font-size:17px;color:var(--nuit);text-decoration:none}
.sf-mg-tous .sf-fl{display:inline-block;vertical-align:-3px;margin-left:8px}
.sf-mg-tous:hover{color:var(--vert)}
.sf-mg-tous:hover .sf-fl,.sf-t-tous:hover .sf-fl{transform:translateX(3px)}
.sf-mg-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sf-mg-carte{display:flex;flex-direction:column;border-radius:var(--r-m);overflow:hidden;background:var(--creme);text-decoration:none;box-shadow:0 0 0 1px #0e25120d;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sf-mg-carte img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover}
.sf-mg-carte b{font-size:18px;color:var(--nuit);padding:14px 18px 2px}
.sf-mg-carte span{font-size:16px;color:var(--texte);padding:0 18px 16px;line-height:1.4}
.sf-mg-preuve{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-radius:var(--r-m);overflow:hidden;color:#fff;text-decoration:none;min-height:240px}
.sf-mg-preuve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.sf-mg-preuve::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#26643133 0%,#1f5a2bd9 45%,#163E35f7 100%)}
.sf-mg-preuve b{font-size:44px;line-height:1;letter-spacing:-.04em}
.sf-mg-preuve span{font-size:17px;line-height:1.35;margin-top:8px}
@media (hover:hover){.sf-mg-carte:hover,.sf-mg-preuve:hover{transform:translateY(-3px);box-shadow:0 22px 36px -24px #0e2512a6}.sf-mg-carte:hover b{text-decoration:underline;text-underline-offset:3px}}
.sf-mg-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sf-mg-theme{border-left:1px solid var(--lin);padding-left:20px}
.sf-mg-th{display:inline-flex;align-items:center;min-height:40px;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vert);text-decoration:none}
.sf-mg-th:hover{text-decoration:underline}
.sf-mg-theme ul{list-style:none;margin:4px 0 0;padding:0}
.sf-mg-theme a:not(.sf-mg-th){display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:17px;font-weight:600;line-height:1.3;color:var(--nuit);text-decoration:none}
.sf-mg-theme a:not(.sf-mg-th):hover{color:var(--vert);text-decoration:underline;text-underline-offset:3px}

/* ---------- Heros de l'accueil : pleine largeur, colle sous la barre ---------- */
.sf-ouv{position:relative;overflow:hidden;overflow:clip;background:
  radial-gradient(closest-side at 50% 50%,#cfe5c8cc,#cfe5c800) 92% 10%/min(900px,120vw) min(900px,120vw) no-repeat,
  radial-gradient(closest-side at 50% 50%,#fff7e6,#fff7e600) -10% 110%/700px 700px no-repeat,
  linear-gradient(115deg,#FBFAF6 0%,#F6F5EE 40%,#EAF2E4 100%)}
.sf-ouv-in{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:28px;padding-bottom:40px}
.sf-heros-txt{position:relative;z-index:1}
.sf-heros-p{font-size:18px;line-height:1.55;color:var(--texte);margin:0}
.sf-heros-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sf-heros-actions .sf-btn{width:100%}
.sf-heros-actions .sf-pc{display:none}
.sf-chiffres{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:15px;line-height:1.3;color:#55544f;background:#ffffffb3;border:1px solid #0e25121a;border-radius:var(--r-m);padding:12px 0}
.sf-chiffres>div+div{border-left:1px solid #0e25121a}
.sf-chiffres b{display:block;font-size:17px;font-weight:800;color:var(--nuit);margin-bottom:2px}
.sf-ouv-photos{position:relative;height:300px;margin:0 4px}
.sf-hc{position:absolute;margin:0;border-radius:20px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 24px 44px -24px #0e2512a6,0 0 0 1px #0e25120d}
.sf-hc img{width:100%;height:100%;object-fit:cover}
.sf-hc-a{left:0;top:24px;width:64%;aspect-ratio:4/3;transform:rotate(-4deg)}
.sf-hc-b{right:0;top:0;width:44%;aspect-ratio:5/6;transform:rotate(5deg);z-index:1}
.sf-hc-c{display:none}
.sf-pastille{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-l);background:#fff;color:var(--nuit);font-weight:700;font-size:16px;white-space:nowrap;box-shadow:0 12px 26px -14px #0e2512a6}
.sf-pastille::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert);flex:0 0 auto}
.sf-pa-note::before{display:none}
.sf-etoile-1{display:inline-flex;color:#E8A317}
.sf-etoile-1 svg{width:20px;height:20px}
.sf-pa-note{left:4%;bottom:6px}
.sf-pa-dej{display:none}
.sf-pa-bilan{right:2%;bottom:40px;background:var(--nuit);color:#fff}
.sf-pa-bilan::before{background:var(--accent)}
.sf-chat{display:flex;flex-direction:column;position:relative;z-index:2;background:#fff;border-radius:var(--r-m);box-shadow:var(--ombre);overflow:hidden;font-size:18px;line-height:1.45;color:var(--encre)}
.sf-ouv-compo>.sf-chat{margin-top:28px}
@media (max-width:959px){
 .sf-chat .tete{padding:14px 18px}.sf-chat .fil{padding:16px 18px 4px}.sf-chat .pied{padding:10px 18px 20px}
 .sf-chat .sf-bulles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .sf-chat .sf-bulles label{display:flex}
 .sf-chat .sf-bu{width:100%;justify-content:center;text-align:center;padding:8px 10px;min-height:52px;line-height:1.25;white-space:normal}
}
@media (min-width:700px) and (max-width:959px){.sf-heros-titre{font-size:42px}.sf-ouv-photos{height:420px;max-width:620px;margin-inline:auto;width:100%}.sf-heros-actions .sf-btn{width:auto}}
@media (min-width:960px){
 .sf-ouv-in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-top:48px;padding-bottom:56px;min-height:min(780px,calc(100vh - var(--haut)))}
 .sf-heros-titre{font-size:52px;line-height:1.06;letter-spacing:-.04em}
 .sf-heros-p{font-size:20px}
 .sf-note{font-size:18px}
 .sf-heros-actions .sf-btn{width:auto}
 .sf-heros-actions .sf-pc{display:inline-flex}
 .sf-chiffres{max-width:560px}
 .sf-ouv-compo{position:relative;padding-top:132px;padding-bottom:28px}
 .sf-ouv-photos{position:absolute;inset:0;height:auto;margin:0}
 .sf-ouv-compo>.sf-chat{margin:0 0 0 40px}
 .sf-hc-a{left:-28px;top:0;width:300px;aspect-ratio:4/3;transform:rotate(-6deg)}
 .sf-hc-b{right:-36px;left:auto;top:-18px;width:250px;aspect-ratio:5/6;transform:rotate(6deg);z-index:0}
 .sf-hc-c{display:block;left:-56px;bottom:-6px;width:210px;aspect-ratio:1;transform:rotate(-4deg)}
 .sf-pa-note{left:auto;right:150px;top:4px;bottom:auto}
 .sf-pa-dej{display:inline-flex;left:-8px;top:64px}
 .sf-pa-bilan{right:auto;left:-20px;bottom:56px}
}
@media (min-width:960px) and (max-width:1199px){.sf-hc-b{right:-8px;width:210px}.sf-hc-c{left:-32px;width:170px}.sf-heros-titre{font-size:44px}.sf-pa-note{right:110px}}
@media (min-width:1400px){.sf-hc-b{right:-64px}}
@media (prefers-reduced-motion:no-preference){
 .js .sf-hc,.js .sf-pastille{animation:sf-pose .7s var(--ease) both}
 .js .sf-hc-b{animation-delay:.08s}.js .sf-hc-c{animation-delay:.16s}.js .sf-pastille{animation-delay:.3s}
}
@keyframes sf-pose{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* ---------- Appel final : fond clair travaille, carte de reservation qui deborde ---------- */
.sf-cta{position:relative;margin-top:calc(var(--sec) + 40px);background:
  radial-gradient(closest-side at 50% 50%,#cfe5c8b3,#cfe5c800) 100% 0/800px 800px no-repeat,
  radial-gradient(closest-side at 50% 50%,#fff3dc,#fff3dc00) 0 100%/640px 640px no-repeat,
  linear-gradient(120deg,#F7F6EF 0%,#EEF4E8 60%,#E3EEDC 100%)}
.sf-cta-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:44px;padding-bottom:48px}
.sf-cta-titre{font-size:34px;line-height:1.05;letter-spacing:-.04em;font-weight:800;color:var(--nuit);margin:0 0 16px;text-wrap:balance}
.sf-cta-p{font-size:18px;line-height:1.55;color:var(--texte);margin:0}
.sf-cta-preuve{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:24px;font-size:17px;color:var(--encre);line-height:1.35}
.sf-cta-preuve b{font-weight:800}
.sf-cta-visages{display:inline-flex;align-items:center}
.sf-cta-visages img,.sf-cta-plus{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 14px -8px #0e2512a6}
.sf-cta-visages>*+*{margin-left:-14px}
.sf-cta-plus{display:inline-flex;align-items:center;justify-content:center;background:var(--nuit);color:#fff;font-weight:800;font-size:15px}
.sf-cta-preuve .sf-etoiles svg{width:20px;height:20px}
.sf-cta-tel{display:inline-flex!important;flex-direction:column;align-items:flex-start!important;margin-top:24px;text-decoration:none;color:var(--nuit)}
.sf-cta-tel-l{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert)}
.sf-cta-tel .nobr{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.sf-cta-tel:hover .nobr{text-decoration:underline;text-underline-offset:5px}
.sf-cta-carte-zone{position:relative;padding:24px 8px 8px}
.sf-cta-ph{position:absolute;width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;border:5px solid #fff;box-shadow:0 20px 36px -22px #0e2512a6}
.sf-cta-ph1{right:-6px;top:-18px;transform:rotate(7deg)}
.sf-cta-ph2{display:none}
.sf-cta-carte{position:relative;z-index:1;background:#fff;border-radius:28px;padding:28px 24px;box-shadow:0 34px 70px -34px #0e2512b3,0 0 0 1px #0e25120f;max-width:560px}
.sf-cta-carte-t{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--nuit);margin:0 0 12px}
.sf-cta-coches{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.sf-cta-coches li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;color:var(--encre)}
.sf-cta-coches .sf-coche{flex:0 0 24px;height:24px;color:var(--vert);margin-top:0}
.sf-cta-carte .sf-btn{min-height:48px}
.sf-cta-conseil{margin:14px 0 0;font-size:15px;color:#55544f;text-align:center}
@media (min-width:700px){.sf-cta-titre{font-size:44px}.sf-cta-ph{width:190px}}
@media (min-width:960px){
 .sf-cta{margin-top:calc(var(--sec) + 72px)}
 .sf-cta-in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-top:72px;padding-bottom:80px}
 .sf-cta-titre{font-size:56px}
 .sf-cta-p{font-size:20px;max-width:520px}
 .sf-cta-carte-zone{padding:0 0 0 40px;margin-top:-152px;align-self:start}
 .sf-cta-carte{padding:36px 40px}
 .sf-cta-ph{width:200px}
 .sf-cta-ph1{right:-40px;top:-36px}
 .sf-cta-ph2{display:block;left:-12px;bottom:-56px;transform:rotate(-6deg)}
}
@media (min-width:960px) and (max-width:1199px){.sf-cta-ph1{right:-12px}}

/* ---------- Pied de page : degrade vert, colonnes titrees, derniers articles, filigrane geant ---------- */
.sf-pied{position:relative;overflow:hidden;color:#fff;font-size:17px;line-height:1.5;padding:0 0 calc(100px + env(safe-area-inset-bottom));background:
  radial-gradient(closest-side at 50% 50%,#4a9a57aa,#4a9a5700) 100% 0/1100px 1100px no-repeat,
  radial-gradient(closest-side at 50% 50%,#9fcf8f40,#9fcf8f00) 0 100%/900px 900px no-repeat,
  linear-gradient(160deg,#2f7a3c 0%,#266431 50%,#205a2c 100%)}
.sf-pied::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--accent) 0 25%,#9fcf8f 25% 50%,#E8A317 50% 75%,var(--creme) 75%)}
.sf-pied a{color:#fff}
.sf-pied-haut{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 20px;padding:48px 0 32px;border-bottom:1px solid #ffffff2e}
.sf-pied-logo{display:flex;width:76px;height:76px;border-radius:50%;background:#fff;align-items:center;justify-content:center;box-shadow:0 10px 24px -12px #0006}
.sf-pied-logo img{width:62px;height:62px;border-radius:50%}
.sf-pied-accroche{margin:0;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;max-width:520px}
.sf-ronds{grid-column:1/-1;display:flex;gap:10px}
.sf-ronds a{width:48px;height:48px;border-radius:50%;border:1.5px solid #ffffff66;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s}
.sf-ronds a:hover{background:#ffffff26;border-color:#fff}
.sf-pied-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding:40px 0 32px}
.sf-pied-nous,.sf-pied-arts{grid-column:1/-1}
.sf-pied-titre{margin:0 0 10px;font-size:17px;font-weight:800;color:var(--accent);letter-spacing:-.01em}
.sf-pied ul{list-style:none;margin:0;padding:0}
.sf-pied-cols li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:#fffffff2}
.sf-pied-cols li a:hover{text-decoration:underline;text-underline-offset:3px}
.sf-pied address{color:#fffffff2;margin:0 0 8px}
.sf-pied-tel{display:inline-flex!important;font-size:26px;font-weight:800;letter-spacing:-.02em;text-decoration:none;min-height:48px;align-items:center}
.sf-pied-arts ul{display:grid;gap:12px}
.sf-pied-arts li a{display:flex!important;gap:14px;align-items:center;min-height:72px!important}
.sf-pied-arts img{width:96px;height:68px;border-radius:12px;object-fit:cover;flex:0 0 auto;box-shadow:0 8px 18px -10px #0008}
.sf-pied-arts em{display:block;font-style:normal;font-size:15px;font-weight:700;color:var(--accent)}
.sf-pied-arts span{line-height:1.3;font-weight:600}
.sf-pied-bas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;border-top:1px solid #ffffff2e;padding-top:16px;font-size:15px;color:#ffffffe0}
.sf-pied-bas a{display:inline-flex;align-items:center;min-height:48px;color:#ffffffe0;text-decoration:none}
.sf-pied-bas a:hover{text-decoration:underline}
.sf-pied-dossier{opacity:.8}
.sf-pied-mot{margin:24px 0 -0.1em;font-size:min(15.8vw,198px);font-weight:800;letter-spacing:-.06em;line-height:.85;white-space:nowrap;text-align:center;background:linear-gradient(90deg,#ffffff2e,#d9f0b8a6 50%,#ffffff24);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}
@media (min-width:700px){
 .sf-pied-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sf-pied-haut{grid-template-columns:auto minmax(0,1fr) auto}
 .sf-ronds{grid-column:auto}
}
@media (min-width:960px){
 .sf-pied{padding-bottom:0}
 .sf-pied-haut{padding:64px 0 40px}
 .sf-pied-accroche{font-size:28px}
 .sf-pied-cols{grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,.85fr)) minmax(0,2.35fr);gap:32px;padding:48px 0 40px}
 .sf-pied-nous,.sf-pied-arts{grid-column:auto}
}
@media (min-width:960px){.sf-bar,.sf-pad{display:none!important}}

/* Carte du bilan : une photo du club en tete de carte (15/10/2026) */
.sf-cta-carte-img{max-width:none;width:calc(100% + 16px);margin:-16px -8px 20px;aspect-ratio:16/8;height:auto;object-fit:cover;border-radius:20px}
@media (min-width:960px){.sf-cta-carte-img{width:calc(100% + 48px);margin:-24px -24px 24px}.sf-cta-carte-zone{margin-top:-120px}.sf-cta-ph1{top:-44px}}
.sf-pied-tel{display:flex!important;width:max-content}
.sf-pied-mot{font-size:min(calc((100vw - 40px)/6.7),198px)}
@media (min-width:960px){.sf-pa-bilan{bottom:-2px;left:-36px}}

/* Dégradés dans les blocs (demande David 15/10/2026, « tu n'exploites pas de dégradé dans les blocs »).
   Teintes très claires pour garder le contraste du texte foncé. Retour arrière : supprimer ce bloc. */
:root{--halo-menthe:#cbe4cc;--halo-abricot:#f8dbb6;--halo-sauge:#dbe9d6}
.sf-cream{background:
  radial-gradient(60% 80% at 100% 0%,var(--halo-menthe) 0%,transparent 70%),
  radial-gradient(55% 70% at 0% 100%,var(--halo-abricot) 0%,transparent 72%),
  linear-gradient(160deg,#fbfaf6 0%,#f4f2ea 100%)}
.sf-chiffres{background:linear-gradient(120deg,#ffffff 0%,#f3f8f1 55%,#fdf5ea 100%)}
.sf-mur-sec{position:relative;isolation:isolate}
.sf-mg-carte{background:linear-gradient(180deg,#fbfaf6 0%,#eef5ec 100%)}
.sf-cta-carte{background:linear-gradient(170deg,#ffffff 0%,#ffffff 55%,#f1f7ef 100%)}
.sf-faq .sf-q,.sf-faq details{transition:background .3s}
.sf-faq details[open]{background:linear-gradient(90deg,#f1f7ef 0%,transparent 90%);border-radius:var(--r-s)}
.sf-heros-titre .nobr{background:linear-gradient(100deg,var(--vert) 0%,#2f8a4a 45%,var(--sapin,#163E35) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.sf-heros-titre .nobr{color:CanvasText;background:none}}

/* Aucune pastille ne doit recouvrir le chatbot (demande David 15/10/2026).
   La pastille Bilan offert mordait sur lui dès 1024 px, et elle redit son titre : retirée sur grand écran. */
@media (min-width:900px){.sf-pa-bilan{display:none}}

/* 15/10/2026, David : « ça manque d'espacement entre les parties » du haut de l'accueil.
   Ecarts passes de 12/16/16/24/24 a 16/24/24/32/32 (telephone 14/20/20/28/28), une seule echelle. */
.sf-heros-eye{margin-bottom:14px}
.sf-heros-titre{margin-bottom:20px}
.sf-ouv .sf-note{margin-bottom:20px}
.sf-heros-actions{margin-top:28px}
.sf-chiffres{margin-top:28px;padding:16px 0}
@media (min-width:960px){
 .sf-heros-eye{margin-bottom:16px}
 .sf-heros-titre{margin-bottom:24px}
 .sf-ouv .sf-note{margin-bottom:24px}
 .sf-heros-actions{margin-top:32px}
 .sf-chiffres{margin-top:32px}
}

/* 15/10/2026, David (croquis) : chatbot plus GRAND sur ordinateur, meme largeur, il descend jusqu'au bloc Resultats
   et deborde du heros. Le fil prend la hauteur, le bouton reste en bas comme dans une messagerie. */
@media (min-width:960px){
 .sf-ouv{overflow-x:clip;overflow-y:visible}
 .sf-ouv-compo>.sf-chat{height:700px;margin-bottom:-184px}
 body.accueil .sf-ouv .sf-chat .fil{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
 .sf-ouv .sf-chat .pied{margin-top:auto}
}
/* 15/10/2026 : bulles du heros retirees (David), la zone photos du telephone n'a plus a leur reserver de place. */
@media (max-width:699px){.sf-ouv-photos{height:216px}}
@media (min-width:700px) and (max-width:959px){.sf-ouv-photos{height:350px}}
/* 15/10/2026, David : « Vos questions » sans aucune partie coloree. Plus de fond vert sur la question ouverte,
   signe + et bouton d'appel dans la couleur du texte. */
.sf-faq details[open]{background:none;border-radius:0}
.sf-faq summary::after{color:var(--nuit)}
.sf-faq-tete .sf-btn.ghost{color:var(--nuit);border-color:var(--nuit)}
.sf-faq-tete .sf-btn.ghost .nobr,.sf-faq-tete .sf-btn.ghost span{color:inherit}
.sf-faq details>div a{color:var(--nuit);text-decoration:underline;text-underline-offset:3px}
/* 15/10/2026, David : dans « Tout commence par un bilan offert », la photo inclinee passe DEVANT la carte, meme emplacement. */
.sf-cta-ph1{z-index:2}
/* 15/10/2026, David : filigrane du pied « Coaching Nutrition » au lieu du nom du club. 18 lettres au lieu de 12 : taille recalculee. */
.sf-pied-mot{font-size:min(calc((100vw - 40px)/10.4),119px)}
/* 15/10/2026, David (croquis) : sur ordinateur, le logo du club en grand rond, a cheval sur le coin haut gauche du chatbot.
   Le chatbot garde overflow:hidden pour ses coins, on le libere ici et on arrondit l'en-tete a la place. */
@media (min-width:960px){
 .sf-ouv .sf-chat{overflow:visible}
 .sf-ouv .sf-chat .tete{position:relative;padding-left:104px;min-height:76px;border-radius:var(--r-m) var(--r-m) 0 0}
 .sf-ouv .sf-chat .av{position:absolute;left:-36px;top:-50px;width:124px;height:124px;padding:14px;object-fit:contain;background:#fff;border-radius:50%;box-shadow:0 0 0 5px #fff,0 18px 36px -18px #0e2512a6;z-index:3}
}
/* 15/10/2026, David : la photo du petit-dejeuner, sous le logo du chatbot, decalee vers la droite. */
@media (min-width:960px){.sf-hc-a{left:32px}}

/* 15/10/2026, David : pages articles, colonne de droite pour le referencement (sommaire, bilan offert, meme theme).
   Ordinateur large seulement. Telephone et tablette : sommaire repliable sous « L'essentiel ». */
.sf-art-cote{display:none}
.sf-som-tel{margin:24px 0 8px;border:1px solid var(--lin);border-radius:var(--r-s);padding:0 18px}
.sf-som-tel summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-weight:700;color:var(--nuit)}
.sf-som-tel summary::-webkit-details-marker{display:none}
.sf-som-tel summary::after{content:"+";font-size:22px;font-weight:800;transition:transform .25s var(--ease)}
.sf-som-tel[open] summary::after{transform:rotate(45deg)}
.sf-som-tel ol,.sf-som ol{margin:0;padding:0 0 14px 20px;display:grid;gap:10px;font-size:16px;line-height:1.4}
.sf-som-tel a,.sf-som a{color:var(--encre);text-decoration:none}
.sf-som-tel a:hover,.sf-som a:hover{text-decoration:underline;text-underline-offset:3px}
.sf-corps h2[id],.sf-faq h2[id]{scroll-margin-top:110px}
@media (min-width:1100px){
 .sf-art-grille{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:72px;justify-content:center;align-items:start}
 .sf-art-grille .sf-art{margin:0}
 .sf-som-tel{display:none}
 .sf-art>.sf-card{display:none}
 .sf-art-cote{display:block;align-self:stretch;padding-top:56px;padding-bottom:var(--sec)}
 .sf-art-cote-in{display:grid;gap:24px;height:100%;align-content:start}
 .sf-cote-bilan{position:sticky;top:104px}
 .sf-som{border-left:2px solid var(--lin);padding:4px 0 4px 20px}
 .sf-som ol{padding:0;list-style:none;gap:12px;font-size:15px}
 .sf-som-t{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nuit)}
 .sf-som a.actif{font-weight:700;color:var(--nuit)}
 .sf-cote-bilan{background:#fff;border:1px solid var(--lin);border-radius:var(--r-m);padding:20px;box-shadow:0 24px 48px -32px #0e2512a6;display:grid;gap:8px;justify-items:start}
 .sf-cote-bilan img{width:48px;height:48px;border-radius:50%}
 .sf-cote-bilan .sf-b{margin:4px 0 0;font-size:17px;color:var(--nuit)}
 .sf-cote-bilan .sf-s{margin:0 0 8px;font-size:15px}
 .sf-cote-bilan .sf-btn{width:100%;min-height:48px}
 .sf-cote-tel{justify-self:center;font-weight:700;color:var(--nuit);text-decoration:none;font-size:16px;padding:6px 0}
 .sf-cote-arts ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
 .sf-cote-arts a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--encre);font-size:15px;line-height:1.35;font-weight:600}
 .sf-cote-arts img{width:72px;height:52px;object-fit:cover;border-radius:10px}
 .sf-cote-arts a:hover span{text-decoration:underline;text-underline-offset:3px}
}
/* Fin d article : la colonne garde le meme ecart au pied de page que l article (David, 15/10). */
/* 15/10/2026, David : plus de trait au-dessus de « Ces conseils sont generaux ». */
.sf-avis{border-top:0;padding-top:0}
/* Relecture SEO du 15/10 : Google lit la version telephone. Les autres conseils de la colonne y apparaissent donc aussi,
   sous l'article. Sommaire et carte bilan restent reserves a l'ordinateur, le telephone a deja les leurs. */
@media (max-width:1099px){
 .sf-art-cote{display:block;margin:0 0 var(--sec)}
 .sf-art-cote .sf-som,.sf-art-cote .sf-cote-bilan{display:none}
 .sf-art-cote .sf-art-cote-in{max-width:720px;margin-inline:auto}
 .sf-som-t{margin:0 0 14px;font-size:20px;line-height:23px;letter-spacing:-.6px;font-weight:700;color:var(--nuit)}
 .sf-cote-prog{display:none}
 .sf-cote-arts ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
 .sf-cote-arts a{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--encre);font-size:17px;line-height:1.35;font-weight:600}
 .sf-cote-arts img{width:88px;height:62px;object-fit:cover;border-radius:12px}
}
.sf-cote-prog{display:inline-block;margin-top:14px;font-weight:700;color:var(--nuit);text-decoration:underline;text-underline-offset:3px}
@media (min-width:1100px){.sf-cote-prog{font-size:15px}}
/* 15/10/2026, David : le lien programme heritait de la grille des cartes (colonne de 72 px), d'ou le texte en colonne. */
.sf-cote-arts a.sf-cote-prog{display:block;grid-template-columns:none;margin-top:16px;font-size:15px;font-weight:700;line-height:1.4;color:var(--nuit);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1099px){.sf-cote-arts a.sf-cote-prog{display:none}}
/* Controle Webmaster du 15/10 : liens du sommaire telephone a 19 px de haut, sous le minimum tactile. 44 px au moins. */
.sf-som-tel ol{gap:0;padding-bottom:6px}
.sf-som-tel a{display:flex;align-items:center;min-height:44px;padding:6px 0}

/* 15/10/2026, David : chatbot facon Messenger. La boite garde une taille FIXE (700 px sur ordinateur, 600 au telephone),
   les messages partent du bas et poussent les anciens vers le haut, le fil defile quand il deborde. */
.sf-chat .sf-cache{display:none!important}
.sf-chat .sf-entre{animation:sf-bul-in .32s ease-out both}
@keyframes sf-bul-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sf-tape{display:flex;width:max-content;gap:6px;align-items:center;padding:16px 18px;border-radius:18px 18px 18px 4px;background:#f3f1ea;margin:0 0 10px}
.sf-tape i{width:8px;height:8px;border-radius:50%;background:var(--encre);opacity:.3;animation:sf-tape 1s infinite}
.sf-tape i:nth-child(2){animation-delay:.15s}
.sf-tape i:nth-child(3){animation-delay:.3s}
@keyframes sf-tape{0%,60%,100%{opacity:.25;transform:none}30%{opacity:.8;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.sf-chat .sf-entre,.sf-tape i{animation:none}}
@media (min-width:960px){
}
.sf-chat .sf-bul{width:fit-content}
.sf-chat .fil,body.accueil .sf-chat .fil{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
/* 18/10/2026, David : la conversation part du HAUT de la boite. Plus de cale qui poussait les messages en bas ;
   le fil ne defile vers le bas qu'une fois plein (js, bas()). */
.sf-chat .pied{flex:0 0 auto}
@media (max-width:959px){.sf-ouv-compo>.sf-chat{height:600px}}
/* 16/10/2026, David (croquis) : sélecteur Femme / Homme en haut a droite du chatbot, objectifs en blocs avec icone. */
.sf-chat .tete .sf-sexe{margin-left:auto}
.sf-sexe{display:flex;padding:3px;border:1px solid var(--lin);border-radius:var(--r-l);background:#fff}
.sf-sexe label{position:relative;display:flex}
.sf-sexe span{display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--r-l);font-size:15px;font-weight:700;color:var(--nuit);cursor:pointer}
.sf-sexe input:checked+span{background:var(--nuit);color:#fff}
.sf-sexe input:focus-visible+span{outline:3px solid var(--vert);outline-offset:2px}
.sf-chat .sf-objs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sf-objs label{display:flex}
.sf-obj{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:118px;padding:14px 10px;border:1px solid var(--lin);border-radius:var(--r-m);background:#fff;text-align:center;font-weight:700;font-size:16px;line-height:1.25;color:var(--nuit);cursor:pointer}
.sf-obj img{width:auto;height:56px}
@media (hover:hover){.sf-obj:hover{border-color:var(--nuit)}}
input:checked+.sf-obj{border:2px solid var(--nuit);padding:13px 9px;background:#f3f1ea}
input:checked+.sf-obj::after{content:"\2713";position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--nuit);color:#fff;font-size:14px}
input:focus-visible+.sf-obj{outline:3px solid var(--vert);outline-offset:2px}
@media (max-width:420px){.sf-chat .tete .sf-sexe span{padding:0 10px;font-size:14px;min-height:34px}.sf-obj{min-height:104px;font-size:15px}.sf-obj img{width:auto;height:48px}}
.sf-chat .tete .sf-s{white-space:nowrap}
/* 16/10/2026 : au telephone, le selecteur Femme / Homme debordait du chatbot (15 px a 390, hors ecran a 360).
   L'en-tete se resserre et le sous-titre peut passer sur 2 lignes plutot que de pousser le selecteur dehors. */
@media (max-width:479px){
 .sf-chat .tete{gap:10px;padding-left:14px;padding-right:12px}
 .sf-chat .tete>div:not(.sf-sexe){min-width:0}
 .sf-chat .tete .sf-s{white-space:normal}
 .sf-chat .tete .sf-sexe{flex:none}
 .sf-chat .tete .sf-sexe span{padding:0 9px}
}
/* Une page par membre, 16/10/2026. Frise verticale choisie par David, du plus recent en haut au premier jour en bas */
.sf-parc{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.sf-parc-moment{position:relative;min-width:0;padding:0 0 40px 28px;margin-left:7px;border-left:2px solid var(--vert-pale)}
.sf-parc-moment:last-child{border-left-color:transparent;padding-bottom:0}
.sf-parc-moment::before{content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px #fff}
.sf-parc-texte{margin:0 0 16px;max-width:60ch}
.sf-parc-haut{display:grid;gap:8px}
.sf-parc-vues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sf-parc-vues .sf-mur-it{display:block;margin:0}
.sf-parc img,.sf-parc-video{display:block;width:100%;height:auto;border-radius:var(--r-m);background:var(--lin)}
.sf-parc-vues img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-s)}
.sf-parc-video{aspect-ratio:9/16;object-fit:cover;max-width:420px}
.sf-parc-debut{max-width:420px}
.sf-parc-photo{max-width:520px}
.sf-parc-fin{display:grid;gap:32px}
.sf-parc-pied{margin:0}
@media (min-width:960px){
 .sf-parc-moment{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"date contenu" "titre contenu" "texte contenu";grid-template-rows:auto auto 1fr;column-gap:48px;padding-bottom:56px}
 .sf-parc-moment>.sf-eye{grid-area:date}
 .sf-parc-moment>.sf-h2{grid-area:titre}
 .sf-parc-moment>.sf-parc-texte{grid-area:texte}
 .sf-parc-moment>.sf-parc-haut,.sf-parc-moment>.sf-parc-video,.sf-parc-moment>.sf-parc-debut,.sf-parc-moment>.sf-parc-photo{grid-area:contenu}
 .sf-parc-haut{grid-template-columns:minmax(0,520px) 180px;align-items:start}
 .sf-parc-vues{grid-template-columns:1fr}
}
/* Infobulles : au survol, au clavier et au toucher (focus), calees a gauche ou a droite pres des bords */
.sf-ib{position:relative;display:inline-block;max-width:100%;cursor:help;text-decoration:underline dotted 1px;text-underline-offset:3px;outline-offset:3px}
.sf-ib::after{content:attr(data-infobulle);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(240px,80vw);padding:7px 10px;border-radius:8px;background:var(--nuit);color:#fff;font-size:13px;line-height:1.35;font-weight:500;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;display:none;pointer-events:none;z-index:20}
.sf-ib-g::after{left:0;transform:none}
.sf-ib-d::after{left:auto;right:0;transform:none}
.sf-ib.on::after,.sf-ib:focus-visible::after{display:block}
@media (hover:hover){.sf-ib:hover::after{display:block}}
/* Courbe des pesees, plus de 3 pesees : la forme sans les kilos */
.sf-courbe-zone{position:relative;aspect-ratio:600/200;margin:8px 0 6px}
.sf-courbe-zone svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sf-courbe-aire{fill:var(--vert);opacity:.12}
.sf-courbe-ligne{fill:none;stroke:var(--vert);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.sf-courbe-pt{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;background:none;text-decoration:none;cursor:pointer}
.sf-courbe-pt::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;border:3px solid var(--vert)}
.sf-courbe-pt:hover::before,.sf-courbe-pt:focus::before{background:var(--vert)}
.sf-courbe-axe{display:flex;justify-content:space-between;font-size:13px;color:var(--gris)}
/* Partage de la page */
.sf-partage-t{margin:0 0 10px;font-weight:700;color:var(--nuit)}
.sf-partage-btns{display:flex;flex-wrap:wrap;gap:8px}
.sf-partage-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--trait);border-radius:999px;background:#fff;color:var(--nuit);font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.sf-partage-b:hover{border-color:var(--vert);color:var(--vert)}
.sf-partage-natif{background:var(--vert);border-color:var(--vert);color:#fff}
.sf-partage-natif:hover{color:#fff;filter:brightness(1.08)}
.sf-partage-ok{min-height:1.4em;margin:8px 0 0;font-size:14px;color:var(--vert)}
.sf-partage-haut{margin-top:16px}
.sf-partage-haut .sf-partage-ok{margin-top:4px}
@media (min-width:960px){.sf-courbe-zone{aspect-ratio:auto;height:240px}}
/* 16/10/2026, David : aucun texte au-dessus des boutons de partage du haut ; la mention de l'accord passe sous ceux du bas */
.sf-tete-partage .sf-partage-haut{margin-top:0}
.sf-parc-mention{margin:0;font-size:14px;color:var(--gris);max-width:60ch}
/* 16/10/2026, David : horaires d'ouverture, pied de page et bloc du club */
.sf-pied-horaires{margin:12px 0 4px;font-size:15px;line-height:1.55;opacity:.9}
.sf-horaires-t{font-weight:700;color:var(--nuit)}
.sf-pied-sous{font-weight:700}
.sf-pied-sous,.sf-horaires-sous{display:inline-block;margin-top:10px}
.sf-lieu .sf-horaires{margin-top:12px}
/* 16/10/2026, David : sur une fiche, titre sans « au club », boutons de partage sur la ligne du titre, tout a droite */
.sf-tete-fiche .sf-tete-partage{align-self:end}
.sf-tete.sf-tete-fiche{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){
 .sf-tete.sf-tete-fiche{grid-template-columns:minmax(0,1fr) auto}
 .sf-tete-fiche .sf-partage-btns{justify-content:flex-end}
 .sf-tete-fiche .sf-partage-ok{text-align:right}
}
.sf-tete-fiche .sf-partage{position:relative}
.sf-tete-fiche .sf-partage-ok{position:absolute;left:0;right:0;top:100%;min-height:0;margin:4px 0 0}
@media (min-width:700px) and (max-width:959px){.sf-tete-fiche .sf-tete-partage{margin-top:16px}}
/* 16/10/2026, David : les chiffres de l'ardoise en bulles, sous la photo au telephone, a droite a partir de 960 px */
.sf-parc-media{min-width:0}
.sf-donnees{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sf-donnees .sf-donnee{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 14px;background:#fff;border:1.5px solid var(--vert-pale);border-radius:14px;box-shadow:0 6px 18px rgba(20,60,30,.08);text-decoration:none}
.sf-donnee-v{font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--vert)}
.sf-donnee-l{font-size:13px;line-height:1.3;color:var(--gris)}
@media (min-width:960px){
 .sf-parc-moment>.sf-parc-media{grid-area:contenu;display:flex;align-items:flex-start;gap:20px}
 .sf-parc-media .sf-parc-photo{flex:0 1 520px;min-width:0}
 .sf-donnees{flex:0 0 210px;grid-template-columns:1fr;margin:24px 0 0;gap:10px}
 .sf-donnees .sf-donnee::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;background:#fff;border-left:1.5px solid var(--vert-pale);border-bottom:1.5px solid var(--vert-pale);transform:rotate(45deg)}
}
/* 16/10/2026, David : fil d'Ariane en haut des fiches */
.sf-ariane{margin:0 0 10px;font-size:14px;color:var(--gris)}
.sf-ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.sf-ariane li{display:inline-flex;align-items:center}
.sf-ariane li+li::before{content:"›";margin:0 8px;opacity:.6}
.sf-ariane a{color:var(--vert);text-decoration:none}
.sf-ariane a:hover{text-decoration:underline}
.sf-ariane [aria-current]{color:var(--nuit);font-weight:600}
/* 16/10/2026, David : d'autres parcours en bas des fiches, filtres Femmes et Hommes en bulles */
.sf-autres{margin-top:16px;padding-top:32px;border-top:1px solid var(--trait)}
.sf-autres-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.sf-autres-tete .sf-h2{margin:0}
.sf-filtres{display:flex;flex-wrap:wrap;gap:10px}
.sf-filtre{position:relative;min-height:44px;padding:0 18px;border:1.5px solid var(--vert-pale);border-radius:16px;background:#fff;color:var(--nuit);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sf-filtre::after{content:"";position:absolute;left:18px;bottom:-7px;width:12px;height:12px;background:inherit;border-right:1.5px solid var(--vert-pale);border-bottom:1.5px solid var(--vert-pale);transform:rotate(45deg)}
.sf-filtre span{margin-left:4px;font-weight:500;opacity:.65}
.sf-filtre.on{background:var(--vert);border-color:var(--vert);color:#fff}
.sf-filtre.on::after{border-color:var(--vert)}
.sf-autres-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-autre{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--nuit)}
.sf-autre[hidden]{display:none}
.sf-autre img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-m);margin-bottom:8px;background:var(--lin)}
.sf-autre-t{font-weight:700}
.sf-autre-s{font-size:14px;color:var(--gris)}
.sf-autre:hover .sf-autre-t{color:var(--vert)}
@media (min-width:700px){.sf-autres-grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
/* 16/10/2026, David : 1 seule ligne de 6 vignettes. Au telephone, la ligne defile au doigt, 2 vignettes et demie visibles */
.sf-autres-grille{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
.sf-autres-grille::-webkit-scrollbar{display:none}
.sf-autres-grille .sf-autre{flex:0 0 40%;scroll-snap-align:start;min-width:0}
@media (min-width:700px){.sf-autres-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;overflow:visible;padding-bottom:0}.sf-autres-grille .sf-autre{flex:none}}
@media (min-width:960px){.sf-autres-grille{gap:20px}}
.sf-parc-fin>*,.sf-autres{min-width:0}
/* 16/10/2026, David : repetition du CTA a droite du partage, en bas des fiches */
.sf-parc-bas{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.sf-parc-bas-g{display:grid;gap:24px;min-width:0}
.sf-cta-mini{display:grid;gap:10px;justify-items:start;padding:22px 24px;border-radius:20px;background:linear-gradient(135deg,#f3f8ef,#fbf8f1);border:1.5px solid var(--vert-pale);box-shadow:0 10px 28px rgba(20,60,30,.08)}
.sf-cta-mini-t{margin:0;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--nuit)}
.sf-cta-mini-p{margin:0;color:var(--gris)}
.sf-cta-mini .sf-btn{margin-top:4px}
.sf-cta-mini-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--vert);text-decoration:none}
.sf-cta-mini-tel svg{width:20px;height:20px}
@media (min-width:960px){.sf-parc-bas{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px}}
/* 16/10/2026, David : « pas assez flashy, ca merite un fond vert fonce » */
.sf-cta-mini{background:linear-gradient(135deg,var(--sapin),var(--nuit));border-color:transparent;box-shadow:0 14px 34px rgba(10,40,20,.28)}
.sf-cta-mini-t{color:#fff;font-size:22px}
.sf-cta-mini-p{color:rgba(255,255,255,.88)}
.sf-cta-mini .sf-btn{background:#fff;color:var(--sapin);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.sf-cta-mini .sf-btn:hover{background:var(--vert-pale);color:var(--nuit)}
.sf-cta-mini-tel{color:#fff}
/* 16/10/2026, David : « Elargis le bloc » */
@media (min-width:960px){
 .sf-parc-bas{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
 .sf-cta-mini{grid-template-columns:auto auto;justify-content:start;column-gap:28px;padding:28px 32px}
 .sf-cta-mini-t,.sf-cta-mini-p{grid-column:1/-1}
 .sf-cta-mini-t{font-size:26px}
 .sf-cta-mini .sf-btn{margin-top:8px}
 .sf-cta-mini-tel{margin-top:8px}
}
@media (min-width:960px){
 .sf-cta-mini{display:flex;flex-wrap:wrap;align-items:center;column-gap:28px;row-gap:10px}
 .sf-cta-mini-t,.sf-cta-mini-p{flex:0 0 100%}
}
/* 16/10/2026, David : le vert des boutons, et un beau degrade qui se joue en animation */
.sf-cta-mini{background:linear-gradient(120deg,#1f5a2a 0%,#266431 30%,#3a8a46 55%,#266431 75%,#1d5428 100%);background-size:240% 240%;animation:sf-degrade 8s ease-in-out infinite alternate;box-shadow:0 14px 34px -10px #266431aa}
@keyframes sf-degrade{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.sf-cta-mini{animation:none;background-position:30% 50%}}
/* 16/10/2026, David : un fond pleine largeur comme sur l'accueil, pour bien segmenter le bas des fiches */
.sf-bande-partage{position:relative;margin-top:var(--sec);padding:40px 0;background:
  radial-gradient(closest-side at 50% 50%,#cfe5c8b3,#cfe5c800) 100% 0/800px 800px no-repeat,
  radial-gradient(closest-side at 50% 50%,#fff3dc,#fff3dc00) 0 100%/640px 640px no-repeat,
  linear-gradient(120deg,#F7F6EF 0%,#EEF4E8 60%,#E3EEDC 100%)}
.sf-bande-partage .sf-partage-b{background:#fffc}
@media (min-width:960px){.sf-bande-partage{padding:56px 0}}

.sf-bande-partage+.sf-parc-fin .sf-autres{margin-top:0;padding-top:0;border-top:0}
/* 16/10/2026, David : fond transparent et contour comme les boutons de l'accueil (sf-btn ghost), pour TOUS les boutons de
   partage, « Partager » compris. Avant, la bande lui donnait un fond blanc sous un texte blanc : il etait invisible. */
.sf-partage-b,.sf-bande-partage .sf-partage-b,.sf-partage-natif{background:transparent;border:1.5px solid var(--nuit);color:var(--nuit);box-shadow:none}
.sf-partage-b:hover,.sf-partage-natif:hover,.sf-bande-partage .sf-partage-b:hover{background:#2664311a;border-color:var(--nuit);color:var(--nuit);filter:none}
/* 16/10/2026, David : plus de marge interne en haut et en bas de la bande */
.sf-bande-partage{padding:56px 0}
@media (min-width:960px){.sf-bande-partage{padding:88px 0}}
/* 16/10/2026, David : les reseaux du pied a la taille du logo (76 px), sobres, contour fin blanc */
.sf-ronds{flex-wrap:wrap;gap:12px}
.sf-ronds a{width:76px;height:76px;color:#fff;border-width:1.5px}
.sf-ronds a svg{width:28px;height:28px}
/* 16/10/2026, David : « ca fait un peu gros », ronds de 56 px ; TikTok, X et Google non cliquables a 50 % */
.sf-ronds{gap:10px}
.sf-ronds a,.sf-ronds .sf-rond-off{width:56px;height:56px}
.sf-ronds a svg,.sf-ronds .sf-rond-off svg{width:22px;height:22px}
.sf-ronds .sf-rond-off{display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid #ffffff66;color:#fff;opacity:.5}
.sf-ronds .sf-rond-off{opacity:.25} /* 16/10/2026, David : 25 % */
/* 16/10/2026, David : le cadeau x2, sans toucher a l interlignage (line-height 0 : la ligne garde sa hauteur) */
.sf-emoji{display:inline-block;font-size:2em;line-height:0;vertical-align:-.18em}
.sf-emoji{vertical-align:-.3em}
.sf-emoji{vertical-align:-.1em} /* 16/10/2026, David : remonte le cadeau */

/* ---------- 16/10/2026, David : un site plus vivant ----------
   1. Halos des fonds qui derivent lentement. 2. Trait fin sous le menu, toujours.
   3. Reflet continu sur le nom du club. 4. H1 et H2 qui apparaissent au defilement.
   5. La photo qui deborde de sa carte (equipe) arrive puis se pose de biais. Les autres restent droites.
   Tout s'arrete avec prefers-reduced-motion. Le masquage n'existe que sous .js, et le JS
   ne le pose pas pour un robot : rien n'est cache au referencement. */
@property --hx1{syntax:'<percentage>';inherits:false;initial-value:100%}
@property --hy1{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --hx2{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --hy2{syntax:'<percentage>';inherits:false;initial-value:100%}
.sf-cream{background:
  radial-gradient(60% 80% at var(--hx1) var(--hy1),var(--halo-menthe) 0%,transparent 70%),
  radial-gradient(55% 70% at var(--hx2) var(--hy2),var(--halo-abricot) 0%,transparent 72%),
  linear-gradient(160deg,#fbfaf6 0%,#f4f2ea 100%)}
.sf-top{border-bottom-color:#1d2a2012}
.sf-top.ombre,.sf-top.mega-ouvert{border-bottom-color:var(--trait)}
/* David 16/10 : AUCUNE animation dans la navigation, logo compris */
.sf-equipe>.sf-carre{--biais:-1.6deg}
.sf-equipe>.sf-carre{rotate:var(--biais)}  /* biais SEULEMENT sur la photo qui deborde de sa carte (David) */
@media (prefers-reduced-motion:no-preference){
 .sf-cream{animation:sf-halo 16s ease-in-out infinite alternate}
 .sf-ouv,.sf-cta,.sf-bande-partage,.sf-pied{animation:sf-halo-fond 18s ease-in-out infinite alternate}
 .sf-ouv{animation-name:sf-halo-ouv}
 /* David 16/10 : plus lent. 21/10 : depuis la DROITE */
 .js .sf-titre{opacity:0;translate:48px 0;transition:opacity 2s ease-in-out,translate 2s cubic-bezier(.35,.05,.25,1);transition-delay:var(--t-retard,200ms)}
 .js .sf-titre.vu{opacity:1;translate:0 0}
 .js .sf-arrive{transition:rotate 1.8s cubic-bezier(.35,.05,.25,1),translate 1.8s cubic-bezier(.35,.05,.25,1),scale 1.8s cubic-bezier(.35,.05,.25,1)}
 .js .sf-arrive:not(.vu){rotate:calc(var(--biais) * -3);translate:0 36px;scale:.96}
 /* Photo qui deborde de la carte Bilan offert (David 16/10) : elle arrive du bas a droite puis se pose a son angle */
 .js .sf-cta-ph1.sf-arrive{transition:rotate 1.8s cubic-bezier(.35,.05,.25,1),translate 1.8s cubic-bezier(.35,.05,.25,1),scale 1.8s cubic-bezier(.35,.05,.25,1),opacity 1.6s ease-in-out}
 .js .sf-cta-ph1.sf-arrive:not(.vu){rotate:10deg;translate:36px 48px;scale:.9;opacity:0}
 /* David 16/10 : photos sous le chatbot et photo du bilan offert, arrivee depuis un point tire au hasard (--dx --dy --dr poses par site.js) */
 .js .sf-hc.sf-arrive{animation:none;transition:rotate 1.8s cubic-bezier(.35,.05,.25,1),translate 1.8s cubic-bezier(.35,.05,.25,1),scale 1.8s cubic-bezier(.35,.05,.25,1),opacity 1.6s ease-in-out;transition-delay:var(--t-retard,0ms)}
 .js .sf-hasard.sf-arrive:not(.vu){rotate:var(--dr,10deg);translate:var(--dx,0) var(--dy,48px);scale:.9;opacity:0}
}
@keyframes sf-halo{0%{--hx1:100%;--hy1:0%;--hx2:0%;--hy2:100%}50%{--hx1:82%;--hy1:18%;--hx2:14%;--hy2:84%}100%{--hx1:92%;--hy1:34%;--hx2:6%;--hy2:70%}}
@keyframes sf-halo-fond{0%{background-position:100% 0,0 100%,0 0}100%{background-position:86% 14%,12% 86%,0 0}}
@keyframes sf-halo-ouv{0%{background-position:92% 10%,-10% 110%,0 0}100%{background-position:78% 24%,4% 94%,0 0}}
/* 16/10/2026, David : couleur qui circule dans le nom du club (H1 de l'accueil) et dans le filigrane du pied.
   Degrade periodique sur 2 largeurs, decale d'une periode entiere : la boucle ne se voit pas. */
.sf-heros-titre .nobr{background:linear-gradient(100deg,var(--vert) 0%,#4aa65a 25%,var(--sapin,#163E35) 50%,#4aa65a 75%,var(--vert) 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-pied-mot{background:linear-gradient(90deg,#ffffff2e 0%,#d9f0b8b8 25%,#ffffff24 50%,#d9f0b8b8 75%,#ffffff2e 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){
 .sf-heros-titre .nobr{animation:sf-encre 8s linear infinite}
 .sf-pied-mot{animation:sf-encre 12s linear infinite}
}
@keyframes sf-encre{from{background-position:0% 0}to{background-position:200% 0}}
/* La photo du bilan offert, cachee et decalee avant son arrivee, ne doit pas elargir la page au telephone */
.sf-cta{overflow-x:clip}
/* Polish 16/10 : animations en boucle en pause hors de l'ecran (classe posee par site.js) ; impression sans fondu */
.sf-pause{animation-play-state:paused!important}
@media print{.sf-titre,.sf-arrive{opacity:1!important;translate:none!important;rotate:none!important;scale:none!important;transition:none!important}.sf-equipe>.sf-carre{rotate:var(--biais)!important}}

/* 16/10/2026, rapport 9 : nouvelles pages en liens courts sous la phrase du panneau, carte coach a la place du 48,
   et autant de colonnes que de themes visibles dans Conseils (5 avec Age et silhouette, 6 avec Pres du club) */
.sf-mg-themes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.sf-mg-liens{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:2px}
.sf-mg-liens a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;font-weight:600;color:var(--nuit);text-decoration:none}
.sf-mg-liens a:hover{color:var(--vert);text-decoration:underline;text-underline-offset:3px}
.sf-mg-liens a:hover .sf-fl{transform:translateX(3px)}
.sf-mg-appel b{font-size:24px;line-height:1.2;letter-spacing:-.02em}
.sf-t-liens{list-style:none;margin:8px 0 0;padding:0}
.sf-t-liens a{display:flex;align-items:center;min-height:48px;font-size:17px;font-weight:700;color:var(--nuit);text-decoration:none;border-top:1px solid var(--lin)}

/* 16/10/2026, pages nouvelles du rapport 9 : calculateurs, etapes numerotees, sommaire de la FAQ, contact coach */
.sf-visuel-page{border-radius:var(--r-m);overflow:hidden}
.sf-visuel-page img,img.sf-visuel-page{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--r-m)}
.sf-calc-bloc{background:var(--creme);border:1px solid var(--lin);border-radius:var(--r-m);padding:24px;margin:24px 0}
.sf-calc-bloc .sf-h2{margin-top:0}
.sf-calc{display:grid;gap:16px;margin-top:12px}
.sf-calc-ch{display:grid;gap:6px;border:0;padding:0;margin:0;min-width:0}
.sf-calc-l{font-weight:700;font-size:17px;color:var(--nuit);padding:0}
.sf-calc-in{display:flex;align-items:center;gap:8px}
.sf-calc input[type=text],.sf-calc select{font:inherit;font-size:18px;min-height:52px;padding:10px 14px;border:1.5px solid var(--lin);border-radius:14px;background:#fff;color:var(--nuit);width:100%;max-width:220px}
.sf-calc select{max-width:100%}
.sf-calc input:focus-visible,.sf-calc select:focus-visible{outline:3px solid var(--vert);outline-offset:2px}
.sf-calc-in i{font-style:normal;font-weight:600;color:#74736E}
.sf-calc-radios{display:flex;flex-wrap:wrap;gap:10px}
.sf-calc-radios label,.sf-calc-coche{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px;border:1.5px solid var(--lin);border-radius:999px;background:#fff;font-weight:600;cursor:pointer}
.sf-calc-coche{justify-self:start;font-weight:500}
.sf-calc-radios input,.sf-calc-coche input{width:24px;height:24px;accent-color:var(--vert)}
.sf-calc>.sf-btn{justify-self:start}
.sf-calc-res{border-top:1px solid var(--lin);padding-top:16px;display:grid;gap:10px}
.sf-calc-res .sf-btn{justify-self:start}
.sf-calc-chiffre{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--vert);margin:0}
.sf-calc-res p{margin:0}
.sf-calc-limite,.sf-calc-prive{font-size:15px;color:#6B6A64}  /* 21/10/2026 maquettiste : 4,47 -> 5,1 sur creme */
.sf-calc-medecin,.sf-calc-err{font-weight:600;color:var(--nuit);border-left:4px solid var(--nuit);padding-left:12px}
.sf-calc-jauge{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#26643126,#26643166,#266431b3,#266431)}
.sf-calc-jauge span{position:absolute;top:-6px;width:4px;height:24px;border-radius:2px;background:var(--nuit);transform:translateX(-50%)}
.sf-calc-reperes{display:flex;justify-content:space-around;font-size:15px;color:#74736E}
.sf-calc-expl{margin-top:8px}
.sf-calc-expl summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;color:var(--vert)}
.sf-calc-expl p{font-size:17px;margin:8px 0}
.sf-calc-page{display:grid;gap:24px;align-items:start}
.sf-calc-page .sf-calc-bloc{margin:0}
.sf-calc-photo img{display:block;width:100%;height:auto;border-radius:var(--r-m)}
@media(min-width:960px){.sf-calc-page{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.sf-calc-photo{position:sticky;top:96px}}
.sf-etapes-ol{list-style:none;counter-reset:et;margin:0;padding:0;display:grid;gap:16px}
.sf-etapes-ol li{counter-increment:et;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.sf-etapes-ol li::before{content:counter(et);grid-row:span 2;width:44px;height:44px;border-radius:999px;background:var(--vert);color:#fff;font-weight:800;display:grid;place-items:center}
.sf-etapes-ol b{font-size:18px}
.sf-etapes-ol span{color:#74736E}
.sf-faq-grille{display:grid;gap:40px}
.sf-faq-som{background:var(--creme);border-radius:var(--r-m);padding:20px}
.sf-faq-som ol{margin:8px 0 0;padding-left:22px}
.sf-faq-som a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--nuit)}
.sf-faq-theme{margin-bottom:44px;scroll-margin-top:96px}
@media(min-width:960px){.sf-faq-grille{grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:start}.sf-faq-som{position:sticky;top:96px}}
.sf-faq-tout{margin-top:16px}
.sf-coach-contact{padding:32px;border-radius:var(--r-m)}
.sf-coach-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
#calculateur{scroll-margin-top:96px}
.sf-calc>.sf-btn,.sf-calc-res .sf-btn,.sf-coach-btns .sf-btn{width:auto;flex:0 0 auto}
.sf-faq-cote{display:grid;gap:24px;align-content:start}
.sf-faq-photo img{display:block;width:100%;height:auto;border-radius:var(--r-m)}
@media(max-width:959px){.sf-faq-photo{display:none}}
@media(min-width:960px){.sf-faq-som{position:static}.sf-faq-cote{position:sticky;top:96px}}
/* 16/10/2026, webmaster : le lien d'evitement devient visible au clavier */
a.sr:focus,a.sr:focus-visible{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;z-index:1000;padding:12px 18px;background:#fff;color:var(--nuit);border:3px solid var(--vert);border-radius:14px;font-weight:700}

/* Page Devenir coach refaite (16/10/2026, David) : un parcours, puis 2 directions, club en ligne ou club physique */
.sf-dc-parc-bloc{display:grid;gap:24px}
.sf-dc-parc-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%;border-radius:20px}
.sf-dc-parcours{list-style:none;counter-reset:dc;margin:16px 0 0;padding:0;display:grid}
.sf-dc-parcours li{counter-increment:dc;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:28px}
.sf-dc-parcours li:last-child{padding-bottom:0}
.sf-dc-parcours li::before{content:counter(dc);grid-row:span 2;width:44px;height:44px;border-radius:999px;background:var(--vert);color:#fff;font-weight:800;display:grid;place-items:center;position:relative;z-index:1}
.sf-dc-parcours li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--vert-clair)}
.sf-dc-parcours b{font-size:19px;line-height:1.25;color:var(--nuit);padding-top:10px}
.sf-dc-parcours span{color:var(--texte);margin-top:4px}
.sf-dc-chapo{margin:8px 0 0;max-width:640px}
.sf-dc-voies{display:grid;gap:20px;margin-top:24px}
.sf-dc-voie{background:linear-gradient(180deg,var(--creme),#f3f1ea);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.sf-dc-voie img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.sf-dc-voie-txt{padding:20px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.sf-dc-voie .sf-h3{font-size:22px;margin:12px 0 8px}
.sf-dc-voie ul{margin:0 0 16px;padding-left:20px;display:grid;gap:6px;color:var(--texte)}
.sf-dc-voie-lien{display:inline-block;margin-top:auto;padding:10px 0;line-height:24px;font-weight:700;color:var(--nuit);text-decoration:none}
.sf-dc-voie-lien .sf-fl{display:inline-block;vertical-align:-3px;margin-left:8px}
.sf-dc-voie-lien:hover{color:var(--vert)}
.sf-dc-voie-lien:hover .sf-fl{transform:translateX(3px)}
@media (min-width:700px){.sf-dc-voies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
 .sf-dc-parc-bloc{grid-template-columns:420px minmax(0,1fr);gap:64px;align-items:center}
 .sf-dc-parc-photo img{aspect-ratio:4/5}
 .sf-dc-voie-txt{padding:28px}
}
/* Bloc flottant de partage (/partage.js, module commun du réseau), 17/10/2026.
   Sur téléphone il occupe le bas de l'écran : la barre « Mon bilan offert » monte au-dessus
   dès qu'il apparaît, et redescend quand il se cache en haut de page. */
@media (max-width:768px){.sf-bar{transition:bottom .4s ease}body:has(.mbl-share:not(.mbl-share--hidden)) .sf-bar{bottom:calc(66px + env(safe-area-inset-bottom))}}
/* Navigateurs sans :has (Safari avant 15.4, Firefox avant 121) : la barre reste toujours au-dessus. */
@supports not selector(:has(a)){@media (max-width:768px){.sf-bar{bottom:calc(66px + env(safe-area-inset-bottom))}}}
/* Bloc flottant de partage aux couleurs du club (David, 18/10/2026), en version CLAIRE à sa demande :
   fond crème du site, icônes vertes, survol rempli de vert. Le module commun pose un gris anthracite ;
   « html body » lui passe devant, sa feuille étant injectée après celle-ci. */
html body .mbl-share{background:#fffffff2;border-color:var(--lin);box-shadow:0 10px 30px -8px #0e251238,0 0 0 1px #0e25120a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html body .mbl-share a{background:#2664310f;border-color:#26643129}
html body .mbl-share a svg{fill:var(--vert)}
html body .mbl-share a:hover,html body .mbl-share a:focus-visible{background:var(--vert);border-color:var(--vert)}
html body .mbl-share a:hover svg,html body .mbl-share a.mbl-x:hover svg,html body .mbl-share a:focus-visible svg{fill:#fff}
html body .mbl-share__titre{color:var(--gris)}
html body .mbl-share__titre svg{fill:var(--vert)}
/* Bouton « Mon bilan offert » du menu, 18/10/2026, David : le fond vert ondule lentement, en boucle.
   Même dégradé et même mouvement que .sf-cta-mini, un peu plus lent. Le reflet clair de .sf-btn reste par-dessus. */
.sf-top-btn{background:linear-gradient(180deg,#ffffff24,#0000001f),linear-gradient(120deg,#1f5a2a 0%,#266431 30%,#3a8a46 55%,#266431 75%,#1d5428 100%);background-size:100% 100%,240% 240%;animation:sf-degrade-btn 6s ease-in-out infinite alternate}
@media (hover:hover){.sf-top-btn{transition:filter .22s ease,box-shadow .22s ease,transform .15s ease}.sf-top-btn:hover{filter:brightness(.9)}}
@keyframes sf-degrade-btn{0%{background-position:0 0,0% 50%}100%{background-position:0 0,100% 50%}}
@media (prefers-reduced-motion:reduce){.sf-top-btn{animation:none;background-position:0 0,30% 50%}}
/* Téléphone du menu en vert des boutons, 18/10/2026, David. Au survol il fonce et se souligne. */
@media (min-width:1200px){.sf-top-tel{color:var(--vert)}.sf-top-tel:hover{color:var(--nuit)}}
/* Page FAQ, 18/10/2026, David : « les blocs sont trop collés, il faut une gouttière plus prononcée ».
   Colonne sommaire et photo écartée des questions (24 px avant), thèmes plus espacés entre eux. */
@media(min-width:960px){.sf-faq-grille{column-gap:72px}.sf-faq-theme{margin-bottom:56px}}
@media(min-width:1200px){.sf-faq-grille{column-gap:96px}}

/* 18/10/2026, David : plus de bouton Continuer sous les objectifs. La boite garde sa hauteur, les 6 blocs prennent la place
   liberee tant qu'ils sont a l'ecran. Une fois repondu, l'etape 1 reprend sa taille et la conversation part du haut. */
.sf-chat [data-etape="1"]:has(.sf-objs:not([hidden])){display:flex;flex-direction:column;flex:1 0 auto}
.sf-chat [data-etape="1"] .sf-objs:not([hidden]){flex:1 0 auto;grid-auto-rows:1fr;margin-bottom:16px}

/* 18/10/2026, David : fondu de 5 photos sur /contact/, une toutes les 5 secondes. La premiere photo garde la place,
   les autres se posent dessus et passent au premier plan a tour de role (js/site.js, data-fondu). */
.sf-img .sf-fondu{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}  /* 1s jugé trop rapide par David */
.sf-img .sf-fondu.on{opacity:1}

/* 18/10/2026, David : le bloc du formulaire de /contact/ sur fond clair, pour que les champs, vignettes et pastilles
   blancs ressortent. Meme teinte que le bas des blocs creme. Le message de remerciement suit, c'est la meme carte. */
#form-bilan,#merci{background:#f3f1ea;box-shadow:0 18px 34px -26px #0e251266}

/* 18/10/2026, David : le chatbot en 7 temps. Reglette de motivation 1 a 10, age et ville cote a cote, creneau en liste. */
.sf-chat .sf-note10{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 6px;font-weight:700;color:var(--nuit)}
.sf-chat .sf-note10 output{font-size:28px;font-weight:800;color:var(--vert)}
.sf-chat .sf-range{width:100%;height:44px;margin:0;accent-color:var(--vert);cursor:pointer}
.sf-chat .sf-range-bornes{display:flex;justify-content:space-between;margin:-4px 2px 14px;font-size:14px;color:var(--gris)}
.sf-chat .sf-chat-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px}
.sf-chat .sf-select{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8l4-3.8' fill='none' stroke='%230E2512' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/14px;cursor:pointer}
.sf-chat .sf-select:invalid,.sf-chat .sf-select option[value=""]{color:var(--gris)}
.sf-chat .sf-chat-aide{margin:-2px 0 10px;font-size:14px}
.sf-chat .pied .sf-err{display:none;margin-top:8px}
.sf-chat .pied .sf-err.on{display:block}

/* 18/10/2026, David : en-tete du chatbot, Marjory vous repond en gras puis la frise des 7 etapes. Fait = vert plein,
   a venir = lin clair : l'ecart se lit a la clarte, pas a la teinte. */
.sf-chat-tl{display:flex;gap:4px;margin-top:8px}
.sf-chat-tl i{width:16px;height:3px;border-radius:2px;  /* plus fin, David 18/10 */
 background:var(--lin);transition:background-color .3s}
.sf-chat-tl i.on{background:var(--vert)}

/* 18/10/2026, David : le libelle du creneau est trop long pour tenir dans la liste au telephone, il passe au-dessus. */
.sf-chat .sf-chat-lab{display:block;margin:2px 0 6px;font-size:15px;font-weight:700;color:var(--nuit)}

/* 18/10/2026, David : la fin du chatbot, un grand check puis le message de Marjory, centres. */
.sf-chat .sf-fini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:18px 0 8px}
.sf-chat .sf-fini-ico{width:72px;height:72px;fill:var(--vert)}
.sf-chat .sf-fini-txt{margin:0;max-width:34ch;font-size:18px;line-height:1.5;font-weight:600;color:var(--nuit)}
.sf-chat .sf-fini .sf-demo{margin:0}

/* 18/10/2026, David : a la fin, le message s'affiche seul, centre dans la boite, sans la conversation au-dessus. */
.sf-chat.sf-chat-fin .fil>[data-etape]:not([data-etape="7"]){display:none!important}
.sf-chat.sf-chat-fin .fil>[data-etape="7"]{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
.sf-chat.sf-chat-fin .sf-fini{margin:0}
.sf-chat.sf-chat-fin .fil>[data-etape="7"]{margin-bottom:12px}  /* le fil a 12 px de moins en bas qu en haut */

/* 18/10/2026, David : Femme et Homme quittent l'en-tete, leurs icones vont dans Perte de poids et Prise de masse. */
.sf-chat .sf-obj-duo{display:flex;align-items:flex-end;justify-content:center;gap:4px}
.sf-chat .sf-obj-sexe{display:flex;padding:3px 5px;border-radius:12px;transition:background-color .2s}
.sf-chat .sf-obj-sexe.on{background:var(--lin)}
@media (hover:hover){.sf-chat .sf-obj-sexe:hover{background:#f3f1ea}}

/* 18/10/2026, David : dans le menu, la carte de la note sur fond vert uni avec 5 etoiles, sans photo. */
.sf-mg-note{background:var(--vert)}
.sf-mg-note::after{display:none}
.sf-mg-preuve.sf-mg-note .sf-etoiles{margin:0 0 14px;font-size:0}
.sf-mg-note .sf-etoiles svg{width:28px;height:28px}

/* 18/10/2026, David : Conseils sur 3 colonnes, sans retour a la ligne, les themes se partagent les colonnes (club-premium-construire.py). */
.sf-mg-themes{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}
.sf-mg-theme ul+.sf-mg-th{margin-top:18px}
/* entre 1080 et 1279 px, la colonne de gauche cede de la place pour qu'aucun titre de Conseils ne passe a la ligne */
@media (min-width:1080px) and (max-width:1279px){
 .sf-mg-conseils{grid-template-columns:minmax(0,2.4fr) minmax(0,9.6fr)}
 .sf-mg-conseils .sf-mg-theme{padding-left:16px}
 .sf-mg-conseils .sf-mg-theme a:not(.sf-mg-th){font-size:16px}
}
@media (min-width:1080px) and (max-width:1179px){
 .sf-mg-conseils{grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:16px}
 .sf-mg-conseils .sf-mg-themes{gap:16px}
}

/* 18/10/2026, David : Conseils en 3 themes, Perdre du poids apres puis 40 ans, 50 ans, 60 ans sur une ligne. */
.sf-mg-ages{padding:6px 0}
.sf-mg-ages>span:first-child{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--nuit)}
.sf-mg-ages-l{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sf-mg-theme .sf-mg-ages-l a:not(.sf-mg-th){min-height:34px;padding:0 12px;border:1px solid var(--lin);border-radius:var(--r-l);font-size:15px;font-weight:700}
.sf-mg-theme .sf-mg-ages-l a:not(.sf-mg-th):hover{border-color:var(--vert);text-decoration:none}
.sf-t-ages{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sf-t-ages>span:last-child{display:flex;flex-wrap:wrap;gap:6px}
.sf-t-ages>span:last-child a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--lin);border-radius:var(--r-l);font-weight:700;color:var(--nuit);text-decoration:none}

/* 18/10/2026, David : « comble des vides inutiles ». Un titre seul a gauche laissait sa colonne vide sur ordinateur. */
/* Rangee : les points passent sous leur titre, cote a cote (2 ou 3 colonnes, 4 pour sf-rangee-4). Telephone : en liste. */
.sf-rangee{display:grid;grid-template-columns:minmax(0,1fr);margin-top:4px}
@media (min-width:700px){
 .sf-rangee{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap)}
 .sf-rangee-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sf-rangee .sf-line,.sf-rangee .sf-line:first-child,.sf-rangee .sf-line:last-child{padding:16px 0;border-bottom:0;border-top:1px solid var(--lin)}
}
@media (min-width:1100px){.sf-rangee-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Titre + photo : la photo du sujet remplit la hauteur de la colonne, face au texte. Telephone : photo en 4/3 sous le titre. */
.sf-split-ph>div:first-child{display:flex;flex-direction:column;gap:20px}
.sf-split-photo{aspect-ratio:4/3}
@media (min-width:700px){
 .sf-split.sf-split-ph{align-items:stretch}
 .sf-split-ph .sf-split-photo{aspect-ratio:auto;flex:1 1 auto;min-height:260px}
}
/* Grilles de l'IMC et du tour de taille, en schema sous leur titre. L'opacite monte avec le palier, le texte dit tout. */
.sf-grille{margin:20px 0 0}
.sf-grille figcaption{font-size:15px;color:var(--texte);margin-bottom:12px}
.sf-grille ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sf-grille-qui{margin:16px 0 8px;font-weight:800;color:var(--nuit)}
.sf-grille-qui:first-of-type{margin-top:0}
.sf-grille-l{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--creme)}
.sf-grille-barre{grid-row:span 2;height:36px;border-radius:8px;background:var(--vert);opacity:var(--niv)}
.sf-grille-seuil{font-weight:800;color:var(--nuit);line-height:1.2}
.sf-grille-nom{font-size:15px;color:var(--texte);line-height:1.3}
.sf-grille-l.repere{box-shadow:inset 0 0 0 2px var(--vert)}
/* La photo suit la hauteur du texte d'en face, elle ne la dicte pas. */
@media (min-width:700px){
 .sf-split-ph .sf-split-photo{position:relative}
 .sf-split-ph .sf-split-photo img{position:absolute;inset:0}
 .sf-grille-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .sf-grille-duo .sf-grille-qui{margin-top:0}
}
.sf-grille-duo>div+div .sf-grille-qui{margin-top:16px}
@media (min-width:700px){.sf-grille-duo>div+div .sf-grille-qui{margin-top:0}}

/* Courbe de perte de poids des articles, 19/10/2026 (js/courbe-poids.js). Lecture par l'epaisseur, le pointille et
   l'opacite, jamais par la teinte seule. */
.sf-cp{background:var(--creme);border:1px solid var(--lin);border-radius:var(--r-m);padding:24px}
.sf-cp .sf-h2{margin-top:0}
.sf-cp-reglages{display:grid;gap:16px;margin:16px 0 8px}
.sf-cp-ch{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.sf-cp-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sf-cp-l output{font-weight:700;font-size:17px;color:var(--vert);font-variant-numeric:tabular-nums}
.sf-cp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;margin:0;cursor:pointer;accent-color:var(--vert)}
.sf-cp input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#26643166,#26643126)}
.sf-cp input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#26643166,#26643126)}
.sf-cp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--vert);border:3px solid #fff;box-shadow:0 4px 12px -4px #0e251299}
.sf-cp input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--vert);border:3px solid #fff;box-shadow:0 4px 12px -4px #0e251299}
.sf-cp-fig{margin:16px 0 0;background:#fff;border-radius:var(--r-s);padding:12px 8px 8px;box-shadow:0 0 0 1px var(--trait)}
.sf-cp-fig{container-type:inline-size}
.sf-cp-svg{width:100%;min-width:0;height:250px;height:clamp(250px,55cqw,360px)}  /* meme hauteur que js/courbe-poids.js (55 % de la largeur, de 250 a 360 px) : rien ne bouge au chargement */
.sf-cp-svg svg{display:block;width:100%;height:auto;overflow:visible}
.sf-cp-axes text{font:600 12px Figtree,sans-serif;fill:var(--gris)}
.sf-cp-axes .sf-cp-unite{font-weight:700}
.sf-cp-gl{stroke:var(--trait);stroke-width:1}
.sf-cp-zero{stroke:var(--lin);stroke-width:1.5}
.sf-cp-hach{stroke:var(--nuit);stroke-opacity:.16;stroke-width:3}
.sf-cp-zone{fill:var(--vert);fill-opacity:.16}
.sf-cp-bord{fill:none;stroke:var(--vert);stroke-opacity:.45;stroke-width:1.5}
.sf-cp-med{fill:none;stroke:var(--sapin);stroke-width:2.5;stroke-dasharray:7 6;stroke-linecap:round}
.sf-cp-parc{fill:none;stroke:var(--vert);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.sf-cp-fin{fill:#fff;stroke:var(--vert);stroke-width:3}
.sf-cp-et{font:700 13px Figtree,sans-serif;fill:var(--nuit);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.sf-cp-leg{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 8px 4px;font-size:14px;color:var(--texte);line-height:1.35}
.sf-cp-leg span{display:inline-flex;align-items:center;gap:8px}
.sf-cp-k{flex:0 0 26px;height:14px;border-radius:4px}
.sf-cp-k.zone{background:#26643129;box-shadow:inset 0 0 0 1.5px #26643173}
.sf-cp-k.risque{background:repeating-linear-gradient(45deg,#0e251229 0 3px,transparent 3px 7px)}
.sf-cp-k.mediane{height:0;border-radius:0;border-top:2.5px dashed var(--sapin)}
.sf-cp-k.parcours{height:4px;border-radius:2px;background:var(--vert)}
.sf-cp-res{margin:16px 0 0;font-size:17px;font-weight:600;color:var(--nuit)}
.sf-cp-repere{margin:12px 0 0}
.sf-cp-portraits{margin-top:20px}

p.sf-cp-pt{margin:0 0 12px;color:var(--nuit)}
.sf-cp-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sf-cp-photo{aspect-ratio:4/5;border-radius:var(--r-s);overflow:hidden;background:var(--lin)}
.sf-cp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sf-cp-lien{display:inline-block;margin-top:12px;font-weight:700}
.sf-cp .sf-calc-prive{margin:16px 0 0}
@media (min-width:760px){.sf-cp{padding:32px}.sf-cp-reglages{grid-template-columns:1fr 1fr;gap:16px 32px}.sf-cp-reglages fieldset{grid-column:1/-1}}

/* 19/10/2026 : photo du club tiree au hasard en tete de la carte Bilan offert des articles, a la place du logo */
.sf-cote-photo{width:100%}
.sf-cote-bilan .sf-cote-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-s)}
a.sf-tag{text-decoration:none;transition:background-color .2s ease,color .2s ease}
@media (hover:hover){a.sf-tag:hover{background:var(--vert);color:#fff}a.sf-cp-photo img{transition:transform .4s ease}a.sf-cp-photo:hover img{transform:scale(1.04)}}
/* 19/10/2026 : tableaux de 3 colonnes ou plus, en fiches empilees au telephone (tableau_pile du script) */
@media (max-width:700px){
.sf-corps table.sf-pile{display:block;overflow:visible}
.sf-pile thead{display:none}
.sf-pile tbody,.sf-pile tr,.sf-pile td{display:block}
.sf-pile tr{border:1px solid var(--lin);border-radius:var(--r-m,14px);padding:10px 14px;margin:0 0 10px}
.sf-pile td{border:0;padding:4px 0}
.sf-pile td:first-child{font-weight:700;color:var(--nuit)}
.sf-pile td[data-l]:not(:first-child)::before{content:attr(data-l);display:block;font-size:15px;font-weight:600;opacity:.7}
}

/* 19/10/2026, David : grille du rythme de perte de poids (article perte-de-poids-durable), plus parlante que la liste.
   Le picto porte le verdict par sa FORME (rond coche, cercle, triangle, croix) : David est daltonien. */
.sf-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sf-gr{margin:28px 0;scroll-margin-top:calc(var(--haut) + 16px)}
.sf-gr-leg{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.sf-gr-leg li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--nuit)}
.sf-gr-i{flex:0 0 22px;height:22px;background:center/contain no-repeat}
.sf-gr-aide{font-size:15px;color:var(--gris);margin:0}
.sf-gr-choix{margin-top:12px}
.sf-gr-t{margin-top:8px}
.sf-corps table.sf-gr-tab{display:table;width:100%;max-width:600px;table-layout:fixed;border-collapse:separate;border-spacing:4px;margin:0 -4px;font-size:15px}
.sf-corps .sf-gr-tab td,.sf-corps .sf-gr-tab th{border:0;padding:0}
.sf-corps .sf-gr-tab .sf-gr-coin{width:96px;height:auto;color:var(--gris);font-weight:600;text-align:left;vertical-align:bottom;padding-bottom:6px;background:none}
.sf-corps .sf-gr-tab th[scope=col]{text-align:center;font-weight:800;color:var(--nuit);white-space:nowrap;padding-bottom:6px;vertical-align:bottom}
.sf-corps .sf-gr-tab th[scope=row]{text-align:left;font-weight:600;color:var(--nuit);white-space:nowrap;padding-right:6px}
.sf-corps .sf-gr-tab td{height:40px;border-radius:10px;text-align:center;vertical-align:middle}
.sf-gr-tab td::before{content:"";display:inline-block;width:22px;height:22px;vertical-align:middle;background:center/contain no-repeat}
.sf-gr-tab td.sf-gr-coin::before{content:none}
.sf-gr-tab td.ok{background:#26643126}
.sf-gr-tab td.doux{background:#2664310b}
.sf-gr-tab td.veille{background:#d9a12b1f}
.sf-gr-tab td.danger{background:repeating-linear-gradient(45deg,#a3301f21 0 3px,transparent 3px 7px)}
.sf-gr-tab td.ok::before,.sf-gr-i.ok{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23266431'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sf-gr-tab td.doux::before,.sf-gr-i.doux{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23266431' stroke-width='2'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.6' fill='none' stroke='%23266431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sf-gr-tab td.veille::before,.sf-gr-i.veille{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2L23.2 21.6H.8z' fill='%23D9A12B' stroke='%23D9A12B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 9v6' stroke='%230E2512' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18.4' r='1.4' fill='%230E2512'/%3E%3C/svg%3E")}
.sf-gr-tab td.danger::before,.sf-gr-i.danger{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23A3301F'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.sf-corps .sf-gr-tab td.sel{box-shadow:inset 0 0 0 2px var(--nuit)}
.sf-corps .sf-gr-tab th.sel{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sf-gr-durees{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:4px 24px;font-size:15px}
@media (min-width:700px){.sf-gr-durees{grid-template-columns:1fr 1fr}.sf-gr-leg{grid-template-columns:1fr 1fr;gap:10px 24px}}

/* 19/10/2026, David : les tags passent en BAS de l'article, jusqu'a 3, au lieu d'un seul pose de biais au-dessus du titre */
.sf-tags{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sf-tags .sf-tag{min-height:40px;padding:0 16px;font-size:15px}

/* 20/10/2026, relecture webmaster : les liens des 3 reperes de l'accueil, zone tactile de 40 px sans bouger les lignes */
.sf-etapes-liste .sf-p a{display:inline-block;padding:10px 0;margin:-10px 0}
/* Bilan depose dans l'onglet Resultats du CRM (20/10/2026) : les 3 autres photos et la video, sous la photo du post */
.sf-bilan-plus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;max-width:520px}
.sf-bilan-ph{margin:0;min-width:0}
.sf-bilan-ph img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-s);background:var(--lin)}
.sf-bilan-ph figcaption{margin-top:4px;font-size:13px;color:var(--gris)}
.sf-bilan-video{grid-column:1/-1;position:relative;display:block;border-radius:var(--r-m);overflow:hidden;background:var(--nuit)}
.sf-bilan-video img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.9}
.sf-bilan-lire{position:absolute;left:12px;bottom:12px;padding:10px 16px;border-radius:999px;background:var(--vert);color:#fff;font-weight:600}
.sf-bilan-lire::before{content:"\25B6\00a0"}
.sf-bilan-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media (min-width:960px){.sf-parc-moment>.sf-bilan-plus{grid-column:2;grid-row:4}}

/* 20/10/2026, David : plus de lien Itineraire, l'adresse du club y mene elle-meme, dans un nouvel onglet.
   Soulignee en permanence, d'un trait discret qui se renforce au survol : on la reconnait comme un lien sans la couleur. */
.sf-adr{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:4px;transition:text-decoration-color .2s}
.sf-adr:hover,.sf-adr:focus-visible{text-decoration-color:currentColor}
.sf-pied address .sf-adr{display:inline-block;padding:2px 0}
.sf-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Itineraire retire des boutons du bloc adresse : Appeler et WhatsApp se partagent la ligne. */
.sf-actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* 20/10/2026, David : le prenom a cote de chaque numero du pied */
.sf-tel-nom{display:inline-block;min-width:4.6em;font-size:15px;font-weight:600;letter-spacing:0;opacity:.85;margin-right:6px}
/* 20/10/2026 : le nom unique « Club Nutrition Sainte-Julie » est trop long pour une ligne au telephone, il passe a la ligne */
.sf-heros-titre .nobr{white-space:normal}
/* 20/10/2026, audit : les numeros en texte gardent une cible tactile de 24 px au moins */
a.nobr[href^="tel:"]{padding:3px 0}
/* 20/10/2026, controle webmaster : les liens dans le texte gardent 24 px de cible au doigt, sans bouger les lignes */
main p a:not([class]),.sf-note a,details a{padding:3px 0}
.sf-ariane a{padding:3px 0}
/* 20/10/2026, SEO local : les 9 communes en 3 lignes pleines sur ordinateur, 1 colonne au telephone */
@media (min-width:900px){.sf-rangee-communes{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 20/10/2026, David : les communes desservies dans un bloc sous les derniers articles du pied */
.sf-pied-communes{margin:20px 0 0;padding:16px 18px;border:1px solid #ffffff2e;border-radius:12px;background:#ffffff0d;line-height:1.5;font-size:15px}
/* 21/10/2026, David : sur la courbe de perte de poids, Femme et Homme sur une meme ligne, meme au telephone */
.sf-cp .sf-calc-radios{flex-wrap:nowrap;gap:8px}
.sf-cp .sf-calc-radios label{flex:1 1 0;min-width:0;justify-content:center;padding:6px 12px}
@media (min-width:760px){.sf-cp .sf-calc-radios label{flex:0 0 auto;padding:6px 16px}}
/* 21/10/2026, David : chaque entree de la legende de la courbe tient sur une ligne */
.sf-cp-leg span{white-space:nowrap}
@media (max-width:359px){.sf-cp-leg{font-size:13px;gap:6px 14px}}
/* 21/10/2026, David : sur mobile, un lien WhatsApp a gauche du burger, cache quand le menu complet s'affiche */
.sf-top-wa{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--vert);margin-right:-8px}
.sf-top-wa:hover{color:var(--nuit)}
@media (min-width:1080px){.sf-top-wa{display:none}}
/* 21/10/2026 : les titres arrivent de la droite, leur decalage de depart ne doit pas elargir la page au telephone */
body{overflow-x:clip}
/* 21/10/2026, David : bloc Comment venir du bilan offert, la colonne des consignes calee en bas, sur le bas de la photo */
@media (min-width:700px){.sf-split-bas>div:last-child{align-self:end}.sf-split-bas>div:last-child>:last-child{margin-bottom:0}}   /* la colonne entiere descend, ses marges restent les memes */

/* 21/10/2026, Bamber Bridge : un nom de club long poussait le bouton du menu hors de l ecran au telephone */
@media (max-width:420px){.sf-logo{flex:0 1 auto;min-width:0;font-size:17px;line-height:1.15}}