@font-face { font-family: Poppins; font-weight: 300; font-style: normal; font-display: swap; src: url(/polices/poppins-300.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url(/polices/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url(/polices/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Lato; font-weight: 400; font-style: normal; font-display: swap; src: url(/polices/lato-400.woff2) format('woff2'); }
@font-face { font-family: Lato; font-weight: 700; font-style: normal; font-display: swap; src: url(/polices/lato-700.woff2) format('woff2'); }
:root {
--fond: #FFFFFF; --fond-doux: #F5F2F2; --champ: #F2F4F6;
--encre: #303030; --encre-2: #757575; --trait: #E0E0E0; --carte-bord: #EEEEEE;
--nuit: #0F1416; --nuit-encre: #DEE3E6; --nuit-encre-2: #B8BEC1; --nuit-trait: #303638;
--perso: #44BBDF; --perso-fin: #2852CA;
--ali: #2BB662; --ali-debut: #44DF78; --ali-fin: #1F9E54; --ali-fonce: #0B6B4A;
--activite-debut: #2852CA; --activite-fin: #1B3A9A;
--coaching-debut: #F29E55; --coaching: #E8544F;
--communaute-debut: #BEA8FA; --communaute: #4F48DF;
--premium-debut: #F6C664; --premium-fin: #DE8F1F;
--danger: #ED4C4C; --alerte: #F5A623;
--proteines: #44BBDF; --glucides: #44DF78; --lipides: #F29E55;
--poppins: Poppins, "Segoe UI", system-ui, sans-serif;
--lato: Lato, "Helvetica Neue", Arial, sans-serif;
--r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 25px; --r-pill: 999px;
--accent-debut: var(--perso); --accent-fin: var(--perso-fin); --accent-texte: #2852CA;
}
.t-ali { --accent-debut: var(--ali-debut); --accent-fin: var(--ali-fin); --accent-texte: var(--ali-fonce); }
.t-perso { --accent-debut: var(--perso); --accent-fin: var(--perso-fin); --accent-texte: #2852CA; }
.f-perso { --f-debut: var(--perso); --f-fin: var(--perso-fin); }
.f-ali { --f-debut: var(--ali-debut); --f-fin: var(--ali-fin); }
.f-activite { --f-debut: var(--activite-debut); --f-fin: var(--activite-fin); }
.f-coaching { --f-debut: var(--coaching-debut); --f-fin: var(--coaching); }
.f-communaute { --f-debut: var(--communaute-debut); --f-fin: var(--communaute); }
.f-premium { --f-debut: var(--premium-debut); --f-fin: var(--premium-fin); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 17px/1.7 var(--lato); }
img, video { max-width: 100%; display: block; }
img { height: auto; }
.evitement { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: var(--r-sm); background: #1B2023; color: #fff; font: 600 14px var(--poppins); text-decoration: none; }
.evitement:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--perso); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
a { color: var(--accent-texte); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--poppins); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: #1B2023; }
h1 { font-size: clamp(30px, 4.6vw, 46px); }
h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 16px; }
h3 { font-size: 17px; }
h2 small, h3 small { font: 400 14px var(--lato); color: var(--encre-2); margin-left: 8px; letter-spacing: 0; }
small { color: var(--encre-2); font-size: 14px; }
small.bloc { display: block; margin-top: 4px; }
p { margin: 0 0 16px; }
section { margin-block: 48px; }
mark { background: #FFE9B8; border-radius: 4px; padding: 0 4px; }
.cadre { width: min(1120px, 100% - 40px); margin-inline: auto; }
.bande-douce { background: var(--fond-doux); }
.apercu { margin: 0; padding: 5px 16px; background: var(--alerte); color: #1B2023; font: 600 12px var(--poppins); text-align: center; }
.surtitre { margin: 0 0 12px; font: 700 13px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-texte); }
.chapo { font-size: 19px; line-height: 1.6; color: #55595C; margin: 16px 0 0; max-width: 46rem; }
.vide { padding: 40px 16px; text-align: center; color: var(--encre-2); background: var(--fond-doux); border-radius: var(--r-md); }
.titre-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.titre-ligne h2, .titre-ligne h3 { margin: 0; }
.lien-fort { font: 600 15px var(--poppins); text-decoration: none; white-space: nowrap; }
.lien-fort:hover { text-decoration: underline; }
.entete { background: #fff; border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 10; }
.entete-ligne { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 21px var(--poppins); color: #1B2023; text-decoration: none; margin: 0; }
.entete nav { flex: 1; }
.menu { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.menu > li > a { display: block; font: 500 15px var(--poppins); color: var(--encre); text-decoration: none; padding: 23px 0 21px; border-bottom: 2px solid transparent; }
.menu > li:hover > a, .menu > li:focus-within > a, .menu > li > a[aria-current] { color: var(--accent-texte); border-color: currentColor; }
.panneau { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); box-shadow: 0 24px 40px -24px rgb(15 20 22 / 0.25); }
.menu > li:hover > .panneau, .menu > li:focus-within > .panneau { display: block; }
.panneau-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 32px; padding-block: 28px 32px; max-height: calc(100vh - 140px); overflow-y: auto; }
.panneau-colonnes > div { display: flex; flex-direction: column; border-left: 1px solid var(--trait); padding-left: 20px; }
.panneau-colonnes > div:first-child { border-left: 0; padding-left: 0; }
.panneau p { margin: 0 0 10px; font: 600 14px var(--poppins); color: var(--accent-texte); }
.panneau a { padding: 5px 0; font: 400 15px var(--lato); color: var(--encre); text-decoration: none; }
.panneau a:hover { color: var(--accent-texte); text-decoration: underline; }
.langue { position: relative; font: 500 14px var(--poppins); }
.langue summary { list-style: none; cursor: pointer; padding: 8px 10px; border-radius: var(--r-sm); color: var(--encre); display: flex; align-items: center; gap: 6px; }
.langue summary::-webkit-details-marker { display: none; }
.langue summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.langue summary:hover, .langue[open] summary { background: var(--champ); }
.langue div { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; padding: 6px; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-sm); box-shadow: 0 12px 28px -12px rgb(15 20 22 / 0.25); display: grid; }
.langue div a { padding: 8px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.langue div a:hover { background: var(--champ); }
.langue div a[aria-current] { font-weight: 600; color: var(--accent-texte); }
@media (max-width: 760px) { .logo { font-size: 19px; } }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; font: 600 15px var(--poppins); text-decoration: none; white-space: nowrap; border: 0; }
.bouton.petit { padding: 9px 18px; font-size: 14px; background: linear-gradient(135deg, var(--perso), var(--perso-fin)); }
.bouton.inactif { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.bouton small { font: 300 12px var(--poppins); color: var(--encre-2); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.bouton-discret { background: none; border: 1px solid var(--trait); border-radius: var(--r-pill); padding: 8px 18px; font: 500 14px var(--poppins); color: var(--encre); cursor: pointer; }
.bouton-discret:hover { border-color: var(--accent-texte); color: var(--accent-texte); }
.hero { margin: 0; padding-block: 72px 40px; text-align: center; background: linear-gradient(180deg, rgb(68 187 223 / 0.16), rgb(40 82 202 / 0.04) 80%, #fff); }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .chapo { max-width: 40rem; margin-inline: auto; }
.hero .stores { justify-content: center; }
.hero-grille { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); }
.hero .chapo { margin-bottom: 28px; }
.visuel { justify-self: center; width: min(420px, 100%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 30px 60px -24px rgb(15 20 22 / 0.35); }
.visuel.vide { background: linear-gradient(160deg, var(--f-debut), var(--f-fin)); display: grid; place-items: center; padding: 24px; }
.visuel.vide span { color: #fff; font: 500 15px var(--poppins); text-align: center; display: grid; gap: 6px; }
.visuel.vide small { color: rgb(255 255 255 / 0.75); font: 400 12px ui-monospace, Menlo, monospace; }
.points-forts { margin: 20px 0 0; display: grid; gap: 14px; }
.points-forts div { padding-left: 16px; border-left: 3px solid var(--f-fin); }
.points-forts dt { font: 600 17px var(--poppins); color: #1B2023; }
.points-forts dd { margin: 2px 0 0; color: #55595C; }
.atout .lien-fort { color: var(--f-fin); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; margin: 0; text-align: center; }
.chiffres dd { margin: 0; font: 600 44px/1.1 var(--poppins); background: linear-gradient(135deg, var(--perso), var(--perso-fin)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffres dt { color: var(--encre-2); font-size: 15px; }
.titre-centre { text-align: center; font-size: clamp(26px, 3.4vw, 38px); }
.chapo.centre { text-align: center; margin-inline: auto; }
.atouts { display: grid; gap: 72px; margin-block: 72px; }
.atout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.atout.inverse > div:first-child { order: 2; }
.atout .surtitre { color: var(--f-fin); }
.atout p:last-child { font-size: 18px; color: #55595C; margin: 0; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.trio h3 { margin: 14px 0 6px; }
.trio p { margin: 0; color: #55595C; font-size: 16px; }
.bande-douce > .cadre { padding-block: 56px; }
.pastille-famille { display: block; width: 44px; height: 44px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--f-debut), var(--f-fin)); }
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.porte { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden; text-decoration: none; background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); }
.porte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.porte.exercices img { object-fit: cover; }
.porte-texte { position: absolute; inset: auto 0 0 0; padding: 72px 28px 24px; display: grid; gap: 4px; color: #fff; background: linear-gradient(transparent, rgb(15 20 22 / 0.88)); }
.porte-texte small { color: rgb(255 255 255 / 0.8); font: 700 12px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; }
.porte-texte strong { font: 600 30px/1.1 var(--poppins); }
.porte-texte span { color: rgb(255 255 255 / 0.85); font-size: 16px; }
.porte-texte em { font: 600 15px var(--poppins); font-style: normal; margin-top: 8px; }
.porte:hover em { text-decoration: underline; }
@media (max-width: 760px) { .portes { grid-template-columns: 1fr; } .porte { aspect-ratio: 4 / 3; } }
.blog-bloc { margin-top: 56px; }
.bande-marque { margin: 72px 0 0; background: linear-gradient(135deg, var(--perso), var(--perso-fin)); color: #fff; text-align: center; }
.bande-marque .cadre { padding-block: 64px; }
.bande-marque h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 8px; }
.bande-marque .stores { justify-content: center; margin-top: 24px; }
.bande-marque .bouton { background: #fff; color: #1B2023; box-shadow: none; }
.bande-marque + .pied { margin-top: 0; }
@media (max-width: 820px) {
.hero { padding-block: 40px; }
.hero-grille, .atout { grid-template-columns: 1fr; gap: 32px; }
.atout.inverse > div:first-child { order: 0; }
.atouts { gap: 56px; margin-block: 48px; }
}
.fil { font-size: 14px; color: var(--encre-2); margin: 24px 0 0; }
.fil a { color: inherit; text-decoration: none; }
.fil a:hover { color: var(--accent-texte); text-decoration: underline; }
.rubrique-tete { margin-block: 32px 40px; }
.fil + .rubrique-tete { margin-top: 12px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 32px 24px; }
@media (max-width: 560px) {
.grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.grille .vignette-titre { margin-top: 8px; font-size: 14.5px; }
.grille .vignette-details { font-size: 12.5px; }
.grille .vignette-details > span + span::before { margin-inline: 5px; }
}
.vignette { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.vignette-image { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--fond-doux); }
.vignette-image img, .vignette-vide { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vignette.article > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); background: var(--fond-doux); }
.vignette.exercices .vignette-image { background: #fff; border: 1px solid var(--carte-bord); }
.vignette.exercices .vignette-image img { object-fit: contain; }
.vignette.article > .vignette-vide, .a-la-une > .vignette-vide { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r-md); background: url(/logo.svg) center / 20% no-repeat, linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); }
.vignette.article > img.contenir { object-fit: contain; background: #fff; border: 1px solid var(--carte-bord); }
.a-la-une img.contenir { object-fit: contain; background: #fff; }
.vignette-image img.vignette-dessin { object-fit: contain; padding: 14px; background: var(--champ); }
.vignette-image.mosaique { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; gap: 1px; background: var(--carte-bord); }
.vignette-image.mosaique img { background: #fff; min-height: 0; }
.vignette-plus { position: absolute; right: 8px; bottom: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; font: 600 12px var(--poppins); }
.vignette:hover .vignette-image { box-shadow: 0 12px 28px -14px rgb(15 20 22 / 0.35); }
[data-carte][hidden] { display: none; }
.vignette-vide { display: grid; place-items: center; font-size: 13px; color: var(--encre-2); }
.vignette-titre { margin-top: 12px; font: 600 17px/1.3 var(--poppins); color: #1B2023; }
.vignette:hover .vignette-titre { color: var(--accent-texte); }
.vignette-details { margin-top: 4px; font-size: 14px; color: var(--encre-2); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.vignette-details > span + span::before { content: '·'; margin-inline: 7px; color: var(--trait); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
@media (min-width: 700px) { .tuiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.tuiles-muscles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tuile-muscle { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; min-height: 84px; border: 1px solid var(--carte-bord); border-radius: var(--r-lg); overflow: hidden; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 8px 22px -18px rgb(15 20 22 / 0.35); }
.tuile-muscle > span { display: grid; gap: 6px; padding: 14px 8px 14px 18px; }
.tuile-muscle strong { font: 600 16px/1.2 var(--poppins); color: #1B2023; }
.tuile-muscle small { justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--champ); font-size: 12.5px; color: var(--encre); }
.tuile-muscle img { width: 128px; height: 84px; object-fit: cover; background: var(--champ); }
.tuile-muscle.dessin { grid-template-columns: minmax(0, 1fr) 96px; min-height: 96px; }
.tuile-muscle.dessin img { width: 96px; height: 96px; object-fit: contain; }
.tuile-muscle:hover { border-color: var(--accent-fin); }
.tuile-muscle:hover strong { color: var(--accent-texte); }
@media (max-width: 560px) { .tuiles-muscles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tuile-muscle { grid-template-columns: minmax(0, 1fr) 96px; min-height: 64px; } .tuile-muscle img { width: 96px; height: 64px; object-fit: cover; } .tuile-muscle > span { padding: 10px 4px 10px 12px; } .tuile-muscle strong { font-size: 14px; } }
.rubrique-tete.avec-dessin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.dessin-muscle { width: 120px; height: 120px; border-radius: var(--r-lg); background: var(--champ); }
.dessin-muscle.rendu { width: 160px; height: 100px; object-fit: cover; }
@media (max-width: 560px) { .dessin-muscle { width: 84px; height: 84px; } }
.acces-rapides { margin: -12px 0 36px; display: grid; gap: 10px; }
.acces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.acces > span { flex: 0 0 auto; min-width: 78px; font: 700 12px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.acces .etiquette:hover { border-color: var(--accent-texte); color: var(--accent-texte); }
@media (max-width: 760px) { .acces { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .acces > span { min-width: 0; } .acces .etiquette { white-space: nowrap; } }
@media (max-width: 560px) {
.tuiles { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -20px; padding: 0 20px 8px; scrollbar-width: none; }
.tuiles .tuile { scroll-snap-align: start; }
}
.tuile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); text-decoration: none; }
.tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile.exercices img { object-fit: cover; }
.tuile-texte { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; background: linear-gradient(transparent, rgb(15 20 22 / 0.82)); color: #fff; display: flex; flex-direction: column; }
.tuile-texte strong { font: 600 16px/1.25 var(--poppins); }
.tuile-texte small { color: rgb(255 255 255 / 0.8); font-size: 13px; }
.alphabet { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.alphabet a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--trait); text-decoration: none; font: 600 14px var(--poppins); }
.lettre { margin-block: 32px; }
.lettre ul { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 32px; }
.lettre li { padding: 4px 0; break-inside: avoid; font-size: 16px; }
.lettre a { text-decoration: none; color: var(--encre); }
.lettre a:hover { color: var(--accent-texte); text-decoration: underline; }
.plus { margin-top: 12px; }
.plus summary { cursor: pointer; font: 600 14px var(--poppins); color: var(--accent-texte); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
.etiquettes-titre { font: 700 12px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); margin-right: 4px; flex-basis: 100%; }
.etiquette { padding: 5px 14px; border-radius: var(--r-pill); font-size: 14px; border: 1px solid var(--trait); color: var(--encre); text-decoration: none; background: #fff; }
a.etiquette:hover { border-color: var(--accent-texte); color: var(--accent-texte); }
.etiquette small { font-size: 12px; }
.etiquette.forte { border-color: transparent; background: #E9F7EE; color: var(--ali-fonce); }
.etiquette.alerte { border-color: transparent; background: #FFF1D6; color: #8A5A00; }
.fiche-tete { margin-block: 12px 28px; max-width: 52rem; }
.synonymes { margin: 10px 0 0; color: var(--encre-2); font-size: 15px; }
.resume-chiffres { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 0; font-size: 16px; color: var(--encre); }
.resume-chiffres > span { display: inline-flex; align-items: center; gap: 8px; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--trait); }
.resume-chiffres > span:last-child { border: 0; margin: 0; padding: 0; }
@media (max-width: 560px) { .resume-chiffres { font-size: 15px; } .resume-chiffres > span { gap: 5px; padding-right: 10px; margin-right: 10px; } .resume-chiffres small { display: none; } }
.recette-tete { max-width: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 40px;
grid-template-areas: "titre titre" "image chiffres" "image chapo" "image sommaire" "image actions" "image ."; }
.recette-tete h1 { grid-area: titre; max-width: 52rem; margin-bottom: 22px; }
.recette-tete .fiche-image { grid-area: image; aspect-ratio: 3 / 2; align-self: start; }
.recette-tete .resume-chiffres { grid-area: chiffres; margin-top: 4px; }
.recette-tete .chapo { grid-area: chapo; font-size: 17px; margin-top: 16px; }
.recette-tete .sommaire-fiche { grid-area: sommaire; }
@media (max-width: 900px) {
.recette-tete { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "titre" "chiffres" "image" "chapo" "sommaire" "actions"; }
.recette-tete h1 { margin-bottom: 10px; }
.recette-tete .fiche-image { aspect-ratio: 16 / 10; margin-top: 16px; }
}
.fiche-image { width: 100%; height: auto; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond-doux); }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; margin-top: 8px; }
.colonne-texte > section:first-child, .colonne-texte > .chapo:first-child { margin-top: 40px; }
.colonne-texte > .chapo { color: var(--encre); font-size: 18px; max-width: none; }
.colonne-cote { position: sticky; top: 92px; margin-top: 40px; display: grid; gap: 20px; justify-items: start; }
.colonne-cote .etiquettes { margin: 0; }
@media (max-width: 900px) {
.deux-colonnes { grid-template-columns: 1fr; gap: 0; }
.colonne-cote { position: static; margin-top: 32px; width: 100%; }
.recette .colonne-cote .encart { display: none; }
.colonne-cote .encart { width: 100%; }
}
.portions { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--trait); border-radius: var(--r-pill); padding: 4px; }
.portions button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; font: 600 20px/1 var(--poppins); cursor: pointer; }
.portions button:disabled { background: var(--champ); color: var(--encre-2); cursor: default; }
.portions output { min-width: 108px; text-align: center; font: 600 15px var(--poppins); }
.ingredients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 12px; }
.ingredients li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 15px; line-height: 1.35; }
.ingredients img, .ingredients .sans-image { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--fond-doux); }
.quantite { font: 600 15px var(--poppins); color: #1B2023; }
.ingredients small { display: block; font-size: 13px; }
.ustensiles { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--trait); }
.ustensiles h3 { margin-bottom: 10px; }
.ustensiles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ustensiles li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--trait); border-radius: var(--r-pill); font-size: 15px; }
.achat { font: 600 13px var(--poppins); color: var(--accent-texte); text-decoration: none; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--trait); }
.achat:hover { text-decoration: underline; }
.definitions dt .achat { margin-left: 10px; }
.mention-affilie { margin: 10px 0 0; font-size: 12px; color: var(--encre-2); }
.mention-affilie a, a.mention-affilie { color: inherit; text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 3px; }
a.mention-affilie { margin: 0; font-size: inherit; }
small.mention-affilie { margin: 0; }
.pub { display: grid; place-items: center; margin: 40px auto; background: var(--fond-doux); border: 1px dashed var(--trait); border-radius: var(--r-sm); color: var(--encre-2); font: 400 11px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; }
.pub-contenu { width: min(336px, 100%); min-height: 280px; }
.pub-colonne { width: 300px; min-height: 250px; margin: 0; }
.pub-bandeau { width: min(728px, 100%); min-height: 90px; }
@media (max-width: 900px) { .pub-colonne { display: none; } }
@media (min-width: 901px) {
.colonne-cote:has(.pub-colonne) { position: static; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.colonne-cote:has(.pub-colonne) .pub-colonne { position: sticky; top: 92px; }
}
@media (min-width: 901px) and (min-height: 800px) { .pub-colonne { min-height: 600px; } }
.pub-collante { position: fixed; left: 16px; bottom: 16px; z-index: 30; width: 300px; padding: 6px; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--r-sm); box-shadow: 0 16px 40px -16px rgb(15 20 22 / 0.4); }
.pub-collante[hidden] { display: none; }
.pub-collante .pub-ancre { width: 100%; aspect-ratio: 16 / 9; margin: 0; }
.pub-collante button { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--trait); border-radius: var(--r-pill); background: var(--fond); color: var(--encre); font: 600 16px/1 var(--poppins); cursor: pointer; }
.pub-collante button:hover { background: var(--fond-doux); }
@media (max-width: 1799px) {
.pub-collante { left: 0; right: 0; bottom: 0; width: auto; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; }
.pub-collante .pub-ancre { width: min(728px, 100% - 56px); aspect-ratio: auto; min-height: 90px; margin-inline: auto; }
.pub-collante button { top: 50%; right: 8px; translate: 0 -50%; }
body:has(.pub-collante:not([hidden])) { padding-bottom: 100px; }
}
@media (max-width: 760px) {
.pub-collante .pub-ancre { width: min(320px, 100% - 56px); min-height: 50px; }
body:has(.pub-collante:not([hidden])) { padding-bottom: 60px; }
}
.etapes { list-style: none; margin: 0; padding: 0; }
.etapes li { padding: 20px 0; border-top: 1px solid var(--trait); }
.etapes li:first-child { border-top: 0; padding-top: 0; }
.etapes h3 { font: 700 13px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: 6px; }
.etapes p { margin: 0; font-size: 18px; line-height: 1.65; }
.liste-simple { margin: 0; padding-left: 20px; }
.liste-simple li { margin: 6px 0; }
.liste-simple li::marker { color: var(--accent-texte); }
.etiquette-table, table.etiquette { width: 100%; border-collapse: collapse; border: 0; border-radius: 0; padding: 0; font-size: 16px; }
table.etiquette caption { text-align: left; color: var(--encre-2); font-size: 14px; padding-bottom: 8px; }
table.etiquette th, table.etiquette td { padding: 10px 4px; border-bottom: 1px solid var(--trait); text-align: right; font-weight: 400; }
table.etiquette thead th { font: 700 12px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); border-bottom: 2px solid #1B2023; }
table.etiquette tbody th { text-align: left; font-weight: 700; }
table.etiquette .retrait th { font-weight: 400; padding-left: 20px; color: #55595C; }
table.etiquette td:nth-child(2) { font: 600 15px var(--poppins); color: #1B2023; }
table.etiquette td:nth-child(4) { color: var(--encre-2); width: 4.5em; }
@media (max-width: 560px) { table.etiquette { font-size: 15px; } table.etiquette .retrait th { padding-left: 12px; } table.etiquette :is(th, td):nth-child(3) { display: none; } }
#nutrition h3 { margin: 32px 0 12px; }
.repartition { display: flex; height: 30px; border-radius: var(--r-pill); overflow: hidden; font: 600 13px/30px var(--poppins); color: #1B2023; text-align: center; }
.repartition span { min-width: 44px; }
.m-proteines { --m: var(--proteines); } .m-glucides { --m: var(--glucides); } .m-lipides { --m: var(--lipides); }
.repartition span { background: var(--m); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: 14px; color: var(--encre-2); }
.legende span::before, .macros dt::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--m); margin-right: 8px; }
.ig { margin: 24px 0 0; }
.pastille { display: inline-block; padding: 1px 10px; border-radius: var(--r-pill); font: 600 12px var(--poppins); color: #1B2023; vertical-align: 2px; }
.ig-bas { background: var(--glucides); } .ig-moyen { background: #FFD27A; } .ig-eleve { background: var(--danger); color: #fff; }
.micros { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.micros li { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 52px 72px; gap: 12px; align-items: center; font-size: 15px; }
.jauge { height: 8px; border-radius: var(--r-pill); background: var(--champ); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-debut), var(--accent-fin)); }
.micros strong { font: 600 14px var(--poppins); text-align: right; }
.micros small { text-align: right; font-size: 13px; }
.note-bas { margin: 16px 0 0; font-size: 13px; color: var(--encre-2); }
@media (max-width: 520px) { .micros li { grid-template-columns: 1fr 52px; } .micros .jauge { grid-column: 1 / -1; order: 3; } .micros small { display: none; } }
.encart { width: 100%; border: 1px solid var(--carte-bord); border-radius: var(--r-md); padding: 22px; background: #fff; box-shadow: 0 8px 24px -16px rgb(15 20 22 / 0.18); }
.encart-titre { margin: 0 0 8px; font: 700 12px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.encart-titre small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.kcal { margin: 0 0 12px; font-size: 16px; color: var(--encre-2); }
.kcal strong { font: 600 40px/1 var(--poppins); color: #1B2023; }
.macros { margin: 0 0 14px; }
.macros div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.macros dd { margin: 0; font: 600 15px var(--poppins); }
.encart a { font: 600 14px var(--poppins); text-decoration: none; }
.liste-def { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 15px; }
.liste-def dt, .liste-def dd { padding: 9px 0; border-top: 1px solid var(--trait); }
.liste-def dt:first-of-type, .liste-def dd:first-of-type { border-top: 0; }
.liste-def dt { color: var(--encre-2); padding-right: 16px; }
.liste-def dd { margin: 0; font-weight: 700; text-align: right; }
.definitions { margin: 0; }
.definitions dt { font: 600 16px var(--poppins); color: #1B2023; margin-top: 14px; }
.definitions dt:first-child { margin-top: 0; }
.definitions dt a { text-decoration: none; }
.definitions dd { margin: 2px 0 0; color: #55595C; }
.points { display: inline-flex; gap: 4px; }
.points i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait); }
.points i.plein { background: var(--accent-fin); }
.positions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.positions figure { margin: 0; border: 1px solid var(--carte-bord); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.positions img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.positions figcaption { padding: 10px 16px; font: 500 14px var(--poppins); color: var(--encre-2); border-top: 1px solid var(--carte-bord); }
.positions.petites { margin-top: 16px; }
@media (max-width: 560px) { .positions { grid-template-columns: 1fr; } }
.positions.avec-video { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.positions.avec-video .video { grid-row: span 2; height: 100%; object-fit: contain; background: #fff; border: 1px solid var(--carte-bord); }
.positions.avec-video figure { margin: 0; }
@media (max-width: 760px) { .positions.avec-video { grid-template-columns: 1fr 1fr; } .positions.avec-video .video { grid-column: 1 / -1; grid-row: auto; } }
.planche { width: 100%; height: auto; border-radius: var(--r-md); background: var(--champ); }
.encart .planche { margin: 4px 0 14px; }
.muscles-bloc { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 560px) { .muscles-bloc { grid-template-columns: 1fr; } .muscles-bloc .planche { max-width: 260px; } }
.muscles-role + .muscles-role { margin-top: 24px; }
.muscles-role h3 { margin-bottom: 12px; font-size: 15px; color: var(--encre-2); font-family: var(--lato); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.muscles-role ul, .muscles-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.muscles-role li { display: grid; justify-items: center; gap: 8px; width: 112px; text-align: center; font-size: 14px; line-height: 1.3; }
.muscles-role img, .muscles-role .sans-dessin { width: 96px; height: 96px; border-radius: var(--r-md); background: var(--champ); }
.muscles-role.principaux li { font-weight: 700; color: #1B2023; }
.muscles-role.secondaires li { width: 84px; font-size: 13px; color: #55595C; }
.muscles-role.secondaires img, .muscles-role.secondaires .sans-dessin { width: 64px; height: 64px; border-radius: var(--r-sm); }
.muscles-mini { display: grid; gap: 10px; }
.muscles-mini li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.muscles-mini img, .muscles-mini .sans-dessin { width: 44px; height: 44px; border-radius: 10px; background: var(--champ); }
.video { width: 100%; border-radius: var(--r-lg); background: #000; aspect-ratio: 16 / 9; }
.appel { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-top: 56px; padding: 32px; border-radius: var(--r-lg); background: var(--fond-doux); }
.appel h2 { margin-bottom: 6px; font-size: 22px; }
.appel p { margin: 0; color: #55595C; max-width: 36rem; }
.voisins { margin-top: 56px; }
.voisins .chapo { margin: -8px 0 24px; font-size: 17px; }
.depliable { margin-top: 24px; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.depliable summary { display: flex; align-items: baseline; gap: 8px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 17px var(--poppins); color: #1B2023; }
.depliable summary::-webkit-details-marker { display: none; }
.depliable summary::after { content: ''; margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.depliable[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.depliable summary small { font: 400 14px var(--lato); color: var(--encre-2); }
.depliable > :last-child { margin-bottom: 18px; }
@media (max-width: 760px) {
.filtres button, .tri select, .sommaire-fiche a, .etiquette, .acces .etiquette { min-height: 40px; display: inline-flex; align-items: center; }
.portions button { width: 40px; height: 40px; }
.loupe { width: 40px; height: 40px; }
.lien-fort, .fil a, .achat { padding-block: 9px; }
.fil { margin-top: 12px; }
.pied nav a, .plan a { padding-block: 9px; }
}
.reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.reperes > div { padding: 10px 12px 11px; border-radius: var(--r-sm); background: var(--fond-doux); }
.reperes > div.large { grid-column: span 2; }
.reperes dt { font: 700 11px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.reperes dd { margin: 3px 0 0; font: 600 21px/1.15 var(--poppins); color: #1B2023; }
.reperes dd small { font: 400 13px var(--lato); color: var(--encre-2); margin: 0; }
.reperes dd.texte { font-size: 15px; line-height: 1.3; padding-top: 3px; }
.reperes dd.precision { font: 400 12px var(--lato); color: var(--encre-2); }
.reperes .m-proteines dd { color: #1B2023; box-shadow: inset 0 -3px 0 var(--proteines); display: inline-block; }
.recette-tete .reperes { grid-area: chiffres; }
.reperes.trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr); max-width: 44rem; margin-top: 14px; }
.reperes dd.texte .points { margin-right: 8px; vertical-align: 1px; }
.reperes dd.texte > span:not(.points) { font-size: 14px; }
[data-ailleurs] { margin-top: 28px; }
.seance .reperes { max-width: 34rem; margin-top: 16px; }
@media (max-width: 560px) { .reperes.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reperes.trois > div:last-child { grid-column: 1 / -1; } .reperes dd.texte { overflow-wrap: anywhere; } .reperes { gap: 6px; } .reperes > div { padding: 8px 8px 9px; } .reperes dt { font-size: 10px; letter-spacing: 0.03em; } .reperes dd { font-size: 17px; } .reperes dd.texte { font-size: 13px; } .reperes dd small { font-size: 11px; } .reperes dd.precision { display: none; } }
.prescription { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.prescription span { padding: 3px 10px; border-radius: var(--r-pill); background: var(--champ); font-size: 14px; color: var(--encre); }
.prescription span:first-child { background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; font-weight: 700; }
.catalogue-app { margin-block: 8px 40px; text-align: center; }
.catalogue-app dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px auto 0; max-width: 860px; }
.catalogue-app dl > div { display: flex; flex-direction: column; padding: 18px 8px; border-radius: var(--r-md); background: var(--fond-doux); }
.catalogue-app dd { margin: 0; font: 600 clamp(26px, 4vw, 40px)/1.1 var(--poppins); background: linear-gradient(135deg, var(--perso), var(--perso-fin)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.catalogue-app dt { margin-top: 4px; font-size: 14px; color: #55595C; }
@media (max-width: 560px) { .catalogue-app dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.actions-fiche { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 18px 0 0; }
.recette-tete .actions-fiche { grid-area: actions; align-self: start; }
.bascule[aria-pressed='true'] { background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); border-color: transparent; color: #fff; }
[data-cochable] > li[role='checkbox'] { cursor: pointer; }
[data-cochable] > li[aria-checked='true'] { opacity: 0.45; }
[data-cochable] > li[aria-checked='true'] :is(strong, span, p, h3) { text-decoration: line-through; }
.introuvable { padding-block: 56px 8px; max-width: 46rem; }
.introuvable .surtitre { font-size: 15px; }
.introuvable-liens { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.introuvable-liens .bouton-discret { padding: 11px 22px; text-decoration: none; }
.attente { padding-block: 56px 8px; max-width: 46rem; }
.attente-logo { display: block; width: 72px; height: 72px; border-radius: 18px; margin-bottom: 20px; }
.attente .stores { margin-top: 24px; }
.attente-liens { margin-top: 40px; }
.attente-liens h2 { font: 600 15px var(--poppins); margin: 0 0 8px; }
.attente-liens a { display: block; padding: 6px 0; }
.entete.minimale { top: 0; }
.entete-ligne.minimale { display: flex; justify-content: space-between; min-height: 64px; padding-block: 0; }
.pied-colonnes.minimale { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 560px) { .pied-colonnes.minimale { grid-template-columns: 1fr; } }
.fiche-pied { margin-top: 48px; font-size: 13px; color: var(--encre-2); border-top: 1px solid var(--trait); padding-top: 16px; }
.fiche-pied p { margin: 6px 0; }
.pied { margin-top: 80px; background: var(--nuit); color: var(--nuit-encre-2); font-size: 15px; }
.pied-colonnes { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; padding-block: 56px 36px; }
.pied .logo { color: var(--nuit-encre); font-size: 19px; margin-bottom: 10px; }
.pied h2 { font: 600 15px var(--poppins); color: var(--nuit-encre); margin-bottom: 12px; }
.pied h2 a { color: inherit; }
.pied nav a { display: block; color: var(--nuit-encre-2); text-decoration: none; padding: 4px 0; }
.pied nav a:hover { color: #fff; }
.pied .stores { margin-top: 16px; }
.pied .bouton { padding: 8px 16px; font-size: 13px; }
.pied .bouton.inactif { background: transparent; color: var(--nuit-encre); box-shadow: inset 0 0 0 1px var(--nuit-trait); }
.pied-bas { border-top: 1px solid var(--nuit-trait); padding-block: 20px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.pied-bas p { margin: 0; }
.date-effet { margin: 12px 0 32px; color: var(--encre-2); font-size: 15px; }
.prose .attente, .prose section.attente { padding: 10px 14px; border-left: 3px solid var(--alerte); background: #FFF8E6; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose .attente small, .prose .attente-note { display: block; margin: 0 0 6px; font: 700 12px var(--lato); letter-spacing: 0.04em; text-transform: uppercase; color: #8A5A00; }
.prose section.attente > .attente { padding: 0; border: 0; background: none; }
.pied-langues { display: flex; gap: 16px; }
.pied-langues a { color: var(--nuit-encre-2); text-decoration: none; }
.pied-langues a[aria-current] { color: #fff; font-weight: 700; }
@media (max-width: 980px) { .pied-colonnes { grid-template-columns: 1fr 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pied-colonnes { grid-template-columns: 1fr 1fr; } }
.prose { max-width: 46rem; padding-top: 40px; }
.prose h1 { margin-bottom: 8px; }
.prose section { margin-block: 32px; }
.prose h2 { font-size: 22px; margin-bottom: 8px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
@media print {
.entete, .pied, .apercu, .appel, .voisins, .colonne-cote, .portions, .fil, .pub, .pub-collante, .achat, .mention-affilie, .actions-fiche, .bascule, .evitement { display: none !important; }
[data-cochable] > li[aria-checked='true'] { opacity: 1; }
[data-cochable] > li[aria-checked='true'] :is(strong, span, p, h3) { text-decoration: none; }
body { font-size: 12pt; }
.deux-colonnes, .recette-tete { display: block; }
.reperes { grid-template-columns: repeat(4, 1fr); margin-block: 10pt; }
.fiche-image { max-height: 8cm; width: auto; object-fit: cover; margin-block: 10pt; }
.depliable[open] summary::after, .depliable summary::after { display: none; }
section { margin-block: 18pt; break-inside: avoid; }
}
.vignette-rubrique { margin-top: 12px; font: 700 12px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-texte); }
.vignette-rubrique + .vignette-titre { margin-top: 4px; }
.vignette-extrait { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #55595C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.a-la-une { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 48px; }
.a-la-une img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); }
.a-la-une span { display: grid; gap: 10px; }
.a-la-une small { font: 700 12px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-texte); }
.a-la-une strong { font: 600 clamp(24px, 3vw, 34px)/1.2 var(--poppins); color: #1B2023; }
.a-la-une em { font-style: normal; color: #55595C; font-size: 18px; }
.a-la-une:hover strong { color: var(--accent-texte); }
@media (max-width: 760px) { .a-la-une { grid-template-columns: 1fr; gap: 16px; } }
.signature { margin: 16px 0 0; font-size: 14px; color: var(--encre-2); }
.billet .fiche-tete { margin-inline: auto; text-align: left; }
.billet-corps { max-width: 44rem; margin-inline: auto; padding-top: 32px; font-size: 18px; line-height: 1.75; }
.billet-corps h2 { margin: 40px 0 12px; }
.billet-corps h3 { margin: 28px 0 8px; font-size: 20px; }
.billet-corps ul, .billet-corps ol { padding-left: 24px; }
.billet-corps li { margin: 6px 0; }
.billet-corps li::marker { color: var(--accent-texte); font-weight: 700; }
.billet-corps blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--accent-fin); font-size: 20px; color: #1B2023; }
.billet-corps blockquote p { margin: 0; }
.billet-corps figure { margin: 32px 0; }
.billet-corps figure img { width: 100%; border-radius: var(--r-md); }
.billet-corps figcaption { margin-top: 8px; font-size: 14px; color: var(--encre-2); text-align: center; }
.billet-corps hr { border: 0; border-top: 1px solid var(--trait); margin: 40px 0; }
.bm-ref { font-weight: 700; }
.bm-ref--affiliate::after { content: ' ↗'; }
.bm-carte { position: relative; margin: 28px 0; border: 1px solid var(--carte-bord); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: 0 8px 24px -18px rgb(15 20 22 / 0.2); }
.bm-carte a { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 0; text-decoration: none; color: inherit; min-height: 104px; }
.bm-carte img { width: 160px; height: auto; min-height: 104px; align-self: stretch; object-fit: cover; }
.bm-carte--exercise img { object-fit: contain; background: #fff; }
.bm-carte a:not(:has(img)) { grid-template-columns: 1fr; }
.bm-carte-texte { display: grid; gap: 4px; padding: 16px 20px; }
.bm-carte-texte strong { font: 600 18px/1.3 var(--poppins); color: #1B2023; }
.bm-carte-texte small { font-size: 14px; color: var(--encre-2); }
.bm-carte a:hover strong { color: var(--accent-texte); }
.bm-carte--recipe { --accent-texte: var(--ali-fonce); }
.bm-carte--affiliate { background: var(--fond-doux); }
.bm-carte--affiliate .bm-carte-texte strong::after { content: ' ↗'; }
.bm-mention { position: absolute; top: 10px; right: 12px; font: 700 10px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.bm-table { overflow-x: auto; margin: 28px 0; }
.bm-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bm-table th, .bm-table td { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; }
.bm-table thead th { font: 700 12px var(--lato); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); border-bottom: 2px solid #1B2023; }
.billet-corps pre { overflow-x: auto; padding: 16px; border-radius: var(--r-sm); background: var(--nuit); color: var(--nuit-encre); font-size: 14px; }
.billet-corps code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--champ); padding: 1px 6px; border-radius: 6px; }
.billet-corps pre code { background: none; padding: 0; }
.billet-corps h2, .billet-corps h3, .billet-corps h4 { scroll-margin-top: 90px; }
.sommaire { margin: 0 0 32px; padding: 18px 22px; border: 1px solid var(--carte-bord); border-radius: var(--r-md); font-size: 16px; }
.sommaire p { margin: 0 0 6px; font: 700 12px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.sommaire ol { margin: 0; padding-left: 20px; }
.sommaire a { text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.sources { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--trait); font-size: 15px; }
.sources h2 { font-size: 18px; margin: 0 0 8px; }
.ingredients .achat { border: 0; padding: 0; font-size: 12px; }
@media (max-width: 560px) { .bm-carte a { grid-template-columns: 104px 1fr; } .bm-carte img { width: 104px; } }
.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 56px; }
.axes section { margin-block: 28px; }
.axes h2 { font-size: 20px; margin-bottom: 4px; }
.sous-titre { margin: -8px 0 20px; color: #55595C; max-width: 46rem; }
.rubrique-tete .surtitre { margin-bottom: 8px; }
@media (max-width: 560px) { .axes { grid-template-columns: 1fr; } }
.deroule { list-style: none; margin: 0; padding: 0; }
.deroule li { display: grid; grid-template-columns: 32px 132px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--trait); }
.deroule li:first-child { border-top: 0; padding-top: 0; }
.deroule .rang { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; font: 600 14px var(--poppins); }
.deroule img, .deroule .sans-image { width: 132px; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; border: 1px solid var(--carte-bord); border-radius: var(--r-sm); }
.deroule h3 { font-size: 18px; }
.deroule h3 a { color: inherit; text-decoration: none; }
.deroule h3 a:hover { color: var(--accent-texte); text-decoration: underline; }
.deroule p { margin: 4px 0 0; color: #55595C; }
.deroule .etiquettes { margin-top: 8px; }
.deroule li.superset { border-left: 3px solid var(--accent-fin); padding-left: 14px; margin-left: -17px; }
@media (max-width: 560px) { .deroule li { grid-template-columns: 28px 96px 1fr; gap: 12px; } .deroule img, .deroule .sans-image { width: 96px; } .deroule .rang { width: 28px; height: 28px; font-size: 13px; } .deroule h3 { font-size: 16px; } }
.liste-materiel { list-style: none; margin: 0; padding: 0; }
.liste-materiel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.liste-materiel li:first-child { border-top: 0; }
.liste-materiel a:not(.achat) { color: var(--encre); text-decoration: none; }
.liste-materiel a:not(.achat):hover { color: var(--accent-texte); text-decoration: underline; }
.encart > p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .deroule li { grid-template-columns: 28px 92px 1fr; gap: 12px; } .deroule img, .deroule .sans-image { width: 92px; } .deroule li.superset { margin-left: 0; } }
.deroule li.superset.suite { border-top-style: dashed; }
.entete nav { flex: 0 0 auto; }
.recherche { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.recherche input { width: 100%; height: 42px; padding: 0 16px 0 42px; border: 1px solid var(--trait); border-radius: var(--r-pill); background: var(--champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") 14px center / 18px no-repeat; font: 400 15px var(--lato); color: var(--encre); -webkit-appearance: none; appearance: none; }
.recherche input:focus { outline: 2px solid var(--perso); outline-offset: 1px; background-color: #fff; }
.resultats { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; background: #fff; border: 1px solid var(--trait); border-radius: var(--r-md); box-shadow: 0 24px 48px -20px rgb(15 20 22 / 0.35); padding: 6px; max-height: min(70vh, 560px); overflow-y: auto; }
.resultat { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--encre); }
.resultat img, .resultat .sans-image { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--fond-doux); }
.resultat.r-exercices img, .resultat.r-seances img { object-fit: contain; background: #fff; border: 1px solid var(--carte-bord); }
.resultat span { display: grid; min-width: 0; }
.resultat strong { font: 600 15px/1.3 var(--poppins); color: #1B2023; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat small { font-size: 13px; }
.resultat:hover, .resultat.actif { background: var(--champ); }
.resultat.tout { display: block; text-align: center; font: 600 14px var(--poppins); color: var(--accent-texte); }
.resultat.vide { display: block; margin: 0; padding: 14px; color: var(--encre-2); background: none; text-align: left; }
.resultats-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
.resultats-grille .resultat strong { white-space: normal; }
.loupe { display: none; }
@media (max-width: 900px) { .recherche input, .tri select { font-size: 16px; } }
@media (max-width: 900px) {
html { scroll-padding-top: 56px; }
.entete { top: -104px; }
.entete-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 46px 50px 42px; gap: 0 14px; align-items: center; min-height: 0; padding-block: 8px 0; }
.logo { grid-area: 1 / 1; }
.langue { grid-area: 1 / 2; }
.recherche { grid-area: 2 / 1 / 3 / -1; max-width: none; margin: 0; }
.entete nav { grid-area: 3 / 1; overflow-x: auto; min-width: 0; }
.loupe { grid-area: 3 / 2; display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / 17px no-repeat; }
.entete .bouton { display: none; }
.menu { gap: 22px; }
.menu > li > a { padding: 9px 0 7px; }
.panneau { display: none !important; }
}
.galerie { margin-block: 0 24px; }
.visuels { gap: 24px; padding-block: 8px 28px; }
.visuels .visuel { flex: 0 0 min(300px, 72vw); width: auto; min-width: 0; scroll-snap-align: center; box-shadow: 0 24px 48px -24px rgb(15 20 22 / 0.45); }
@media (min-width: 1100px) { .galerie .visuels { justify-content: center; overflow: visible; } .galerie .visuels .visuel { flex: 1 1 0; max-width: 300px; } }
.explorer { margin-block: 56px 24px; }
.portes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.porte { aspect-ratio: 4 / 3; }
.porte-texte strong { font-size: 26px; }
.rangee { margin-block: 44px; }
.defilant { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; }
.defilant > .vignette { flex: 0 0 min(260px, 70vw); scroll-snap-align: start; }
.defilant > .vignette.article { flex-basis: min(300px, 78vw); }
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 32px; margin-top: 64px; padding: 32px; border-radius: var(--r-lg); background: var(--fond-doux); }
.plan h3 { font-size: 15px; margin-bottom: 10px; color: var(--accent-texte); }
.plan a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 14px; margin-bottom: 6px; border: 1px solid var(--carte-bord); border-radius: var(--r-sm); background: #fff; font: 500 15px/1.25 var(--poppins); color: #1B2023; text-decoration: none; }
.plan a::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--accent-texte); border-top: 2px solid var(--accent-texte); transform: rotate(45deg); }
.plan a:hover, .plan a:active { border-color: var(--accent-fin); color: var(--accent-texte); }
.plan small { margin-left: auto; padding: 2px 9px; border-radius: var(--r-pill); background: var(--champ); font: 600 12px var(--lato); color: var(--encre-2); }
@media (max-width: 760px) { .plan { padding: 20px 14px; gap: 22px; margin-top: 48px; } }
.filtres { position: sticky; top: 69px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 28px; padding: 12px 0; background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); }
.filtres-titre { font: 700 12px var(--lato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin-right: 4px; }
.filtres button { padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--trait); background: #fff; font: 500 14px var(--poppins); color: var(--encre); cursor: pointer; }
.filtres button:hover { border-color: var(--accent-texte); }
.filtres button[aria-pressed='true'] { background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); border-color: transparent; color: #fff; }
.filtres .effacer { border: 0; background: none; color: var(--accent-texte); text-decoration: underline; padding-inline: 6px; }
.filtres-compte { margin-left: auto; font-size: 14px; color: var(--encre-2); }
.tri { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--encre-2); }
.tri select { padding: 7px 30px 7px 14px; border: 1px solid var(--trait); border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23303030' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") right 12px center / 10px no-repeat; font: 500 14px var(--poppins); color: var(--encre); -webkit-appearance: none; appearance: none; cursor: pointer; }
.suite { margin: 36px 0 0; text-align: center; }
.suite .bouton-discret { padding: 12px 28px; font-size: 15px; }
@media (max-width: 760px) {
.filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
.filtres button, .filtres .tri, .filtres-compte { flex: 0 0 auto; white-space: nowrap; }
.filtres-titre { display: none; }
.filtres-compte { margin-left: 4px; order: 9; }
}
@media (max-width: 900px) { .filtres { top: 0; position: static; } }
.sommaire-fiche { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.sommaire-fiche a { padding: 8px 18px; border-radius: var(--r-pill); background: var(--fond-doux); font: 500 14px var(--poppins); color: var(--encre); text-decoration: none; }
.sommaire-fiche a:hover { background: linear-gradient(135deg, var(--accent-debut), var(--accent-fin)); color: #fff; }
.grille > .pub { grid-column: 1 / -1; margin-block: 8px; }
.pub[hidden] { display: none; }
h1, h2, .chapo { text-wrap: balance; }