/* =========================================================
NUTRY — Maquette de refonte (démo)
Identité reprise du logo : vert avocat / crème / noyau brun
========================================================= */
:root{
/* Marque */
/* Vert du logo, échantillonné sur assets/logo-nutry.png (teinte dominante, 16 761 px).
⚠️ Trop clair pour du texte blanc (1,7:1) : tout ce qui est posé DESSUS doit être
écrit en --ink (8,1:1). Les verts foncés ci-dessous restent réservés au texte. */
--green: #b1d353; /* vert du logo */
--green-500: #9dc23f; /* survol des surfaces vertes */
--green-600: #6f9a30;
--green-700: #557a22; /* texte vert accessible */
--green-cta: #b1d353; /* boutons — vert du logo, texte en --ink obligatoire */
--green-deep: #4d7a1f; /* grandes surfaces à texte blanc (bandeaux, en-têtes) */
--green-soft: #eef7db; /* fond très clair dérivé du vert du logo */
--cream: #faf7e6; /* chair d'avocat clair */
--cream-200: #f3edcd;
--brown: #7a5230; /* noyau */
--brown-soft: #9a6b44;
/* Neutres */
--ink: #273020; /* texte principal (olive profond) */
--muted: #5d6753;
--line: #e7e3cf;
--white: #ffffff;
/* Système */
--radius: 18px;
--radius-sm: 12px;
--shadow: 0 10px 30px rgba(60,80,30,.10);
--shadow-lg: 0 24px 60px rgba(60,80,30,.16);
--maxw: 1180px;
--ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;overflow-x:clip;
font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--ink);
background:var(--white);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand{font-family:"Poppins","Inter",sans-serif;line-height:1.15;margin:0}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.02em}
/* titres d'affichage : police éditoriale Fraunces */
.hero h1,.form-hero h1,.page-hero h1,.section-head h2,.section h2,.cta-band h2,.news h2{
font-family:"Fraunces","Poppins",serif;font-weight:600;letter-spacing:-.015em}
.hero h1{font-weight:600}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--green-700);text-decoration:none}
img{max-width:100%;display:block}
/* L'optimisation d'images enveloppe chaque ![]()
dans un pour servir du WebP.
Un est en display:inline et n'est borné par rien : le max-width de l'image
se résolvait contre lui, et la photo de couverture des fiches débordait la page de
30 px sur téléphone. Il doit se comporter comme l'image qu'il remplace. */
picture{display:block;max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
display:inline-block;font-weight:600;font-size:.8rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--green-700);
background:var(--cream-200);padding:.4rem .8rem;border-radius:999px;margin-bottom:1rem
}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
/* ---------- Boutons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
font-weight:600;font-size:.98rem;padding:.85rem 1.5rem;border-radius:999px;
border:2px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s;
font-family:"Poppins",sans-serif;
}
/* Boutons au vert du logo. Le texte est en --ink et non en blanc : sur #b1d353,
du blanc tomberait à 1,7:1 (illisible) alors que l'encre donne 8,1:1. */
.btn-primary{background:var(--green);color:var(--ink);box-shadow:0 8px 20px rgba(139,175,70,.35)}
.btn-primary:hover{background:var(--green-500);transform:translateY(-2px);box-shadow:0 12px 26px rgba(139,175,70,.45)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-700);background:#fff}
.btn-light{background:#fff;color:var(--green-700)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1.1rem}
.nav .logo{flex:0 0 auto;display:flex;align-items:center}
.nav .logo img{height:42px;width:auto;max-width:none}
.nav-links{display:flex;gap:1.25rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);font-weight:500;font-size:.94rem;position:relative;padding:.3rem 0;white-space:nowrap}
.nav-links a:hover{color:var(--green-700)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--green);transition:width .25s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}
/* ---------- Hero ---------- */
.hero{
position:relative;overflow:hidden;
background:
radial-gradient(1200px 500px at 85% -10%, rgba(164,201,90,.28), transparent 60%),
linear-gradient(180deg,var(--cream) 0%,#fff 100%);
padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1.2rem}
.hero h1 .hl{color:var(--green-700);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:none}
.hero .lead{margin-bottom:2rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-trust{display:flex;gap:1.8rem;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.hero-trust b{color:var(--ink);font-family:"Poppins",sans-serif}
.hero-visual{position:relative}
.hero-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-lg);padding:1.6rem;
}
.hero-card .ribbon{display:inline-block;background:var(--green);color:#1f330f;font-weight:600;font-size:.78rem;padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem}
.hero-card h3{margin-bottom:.4rem}
.hero-card .meta{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.hero-card .price{font-family:"Poppins";font-size:1.5rem;font-weight:700;color:var(--ink)}
.hero-card .price small{font-size:.85rem;color:var(--muted);font-weight:500}
.blob{display:none}
.blob-1{width:120px;height:120px;background:var(--green);top:-30px;left:-30px}
.blob-2{width:90px;height:90px;background:var(--cream-200);bottom:-25px;right:-20px;opacity:.9}
/* ---------- Bandeau confiance ---------- */
.trustbar{background:var(--green);color:#1f330f}
.trustbar .container{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:center;padding:1.1rem 24px;font-size:.92rem}
.trustbar .item{display:flex;align-items:center;gap:.6rem}
.trustbar b{color:#1f330f;font-family:"Poppins"}
/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
section[id],[id^="objectifs"],[id^="public"],[id^="programme"],[id^="methodes"],[id^="sessions"]{scroll-margin-top:96px}
.section.cream{background:linear-gradient(180deg,#fff,var(--cream) 50%,#fff)}
.section-head{max-width:62ch;margin:0 auto 3rem;text-align:center}
.section-head .lead{margin:1rem auto 0}
/* ---------- Grille formations ---------- */
.cat-title{font-size:1.05rem;font-weight:600;color:var(--green-700);margin:2.5rem 0 1.2rem;display:flex;align-items:center;gap:.6rem}
.cat-title::before{content:"";width:26px;height:3px;background:var(--green);border-radius:3px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;
transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(164,201,90,.6)}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--cream-200);display:grid;place-items:center;font-size:1.4rem}
.card h3{font-size:1.06rem}
.card .dur{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--brown);background:#f6efe6;padding:.25rem .6rem;border-radius:999px;width:fit-content;font-weight:600}
.card .card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:.6rem}
.card .more{font-weight:600;color:var(--green-700);font-size:.92rem;display:inline-flex;gap:.3rem;align-items:center;transition:gap .2s}
.card:hover .more{gap:.6rem}
/* ---------- Formats / financement ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;background:#fff}
.panel.lime{background:var(--cream);border-color:var(--cream-200)}
.panel h3{margin-bottom:.6rem}
.fin-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
.fin{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem;text-align:center}
.fin .tag{font-family:"Poppins";font-weight:700;color:var(--green-700);font-size:1.05rem}
.fin small{color:var(--muted)}
/* ---------- Équipe ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.member{text-align:center}
.member .avatar{width:84px;height:84px;border-radius:50%;margin:0 auto .8rem;background:
linear-gradient(135deg,var(--green),var(--cream-200));display:grid;place-items:center;
font-family:"Poppins";font-weight:700;color:#33471a;font-size:1.4rem;border:3px solid #fff;box-shadow:var(--shadow)}
.member .name{font-weight:600;font-size:.98rem}
.member .role{color:var(--muted);font-size:.85rem}
/* ---------- CTA webinaire ---------- */
.cta-band{
background:linear-gradient(120deg,var(--green-700),var(--green-deep));
border-radius:calc(var(--radius)*1.4);color:#fff;padding:clamp(2.2rem,5vw,3.5rem);
display:grid;grid-template-columns:1.4fr auto;gap:2rem;align-items:center;box-shadow:var(--shadow-lg);
}
.cta-band h2{color:#fff}
.cta-band p{color:#eaf3d9;margin:0}
/* ---------- Ressources ---------- */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.res{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:#fff;transition:transform .25s var(--ease)}
.res:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.res .price{font-family:"Poppins";font-weight:700;font-size:1.3rem;color:var(--ink)}
/* ---------- Newsletter ---------- */
.news{background:var(--cream-200);color:var(--ink);border-radius:var(--radius);padding:clamp(2rem,5vw,3rem);text-align:center}
.news h2{color:var(--ink)}
.news .eyebrow{background:rgba(85,122,34,.14);color:var(--green-700)}
.news p{color:var(--muted)}
.news form{display:flex;gap:.6rem;max-width:480px;margin:1.4rem auto 0;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;padding:.85rem 1.1rem;border-radius:999px;border:0;font-size:.95rem}
/* ---------- Footer ---------- */
.footer{background:#fff;color:var(--muted);padding:3rem 0 2rem;font-size:.92rem;border-top:7px solid var(--green)}
/* 5 colonnes : identité · Nutry + Se former · les 2 rubriques du catalogue · ressources.
Les proportions sont calées sur le libellé le plus long de chaque colonne, qui ne doit jamais
se couper en deux lignes : « Éducation thérapeutique (ETP) » = 238 px et « Troubles du système
nerveux » = 230 px commandent les colonnes 3 et 4, « Calendrier des sessions » = 167 px la 2e. */
.footer-grid{display:grid;grid-template-columns:1.05fr .89fr 1.22fr 1.19fr .66fr;gap:2rem;margin-bottom:2.5rem}
/* Une 5e colonne ne rentre qu'en resserrant un peu les liens : .87rem laisse ~20 px de marge
sous le libellé le plus long, contre 0 à la taille du corps de page. */
.footer-grid a{font-size:.87rem}
/* coordonnées mises en évidence dans le vert clair de la charte ; texte en --ink, seul
contraste acceptable sur ce fond (le vert de marque échoue à 1,7:1 avec du blanc). */
.fg-contact{background:var(--green-soft);border:1px solid #dcebc0;border-radius:14px;padding:.9rem 1rem;margin-top:1.2rem}
.footer-grid .fg-contact a{color:var(--ink);font-weight:600;padding:.15rem 0}
.footer-grid .fg-contact a:hover{color:var(--green-700)}
.fg-contact .fgc-horaires{display:block;font-size:.8rem;color:var(--muted);line-height:1.45;margin:.15rem 0 .55rem}
.footer-grid .fg-contact .fgc-btn{display:block;text-align:center;margin-top:.8rem;background:var(--green-cta);
border-radius:999px;padding:.55rem .9rem;font-family:"Poppins",sans-serif;font-size:.85rem;transition:background .18s}
.footer-grid .fg-contact .fgc-btn:hover{background:var(--green-500);color:var(--ink)}
/* Sous 1240 px la somme des libellés ne rentre plus sur 5 colonnes : on replie sur 3, puis 2, puis 1. */
@media (max-width:1240px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-grid>*{min-width:0}
/* Les colonnes de liens démarrent à la hauteur de la baseline « Organisme de
formation… », pas du logo : le décalage vaut la hauteur du logo plus sa marge. */
@media (min-width:981px){.footer-grid>*:not(.fg-marque){padding-top:calc(44px + 1rem)}}
.footer-grid h4+h4,.footer-grid a+h4{margin-top:1.8rem}
.footer h4{color:var(--ink);font-size:.95rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.06em}
/* une seule ligne par libellé ; l'ellipse n'est qu'un garde-fou si un intitulé futur dépasse */
.footer-grid h4,.footer-grid a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer a{color:var(--muted);display:block;padding:.25rem 0}
/* liens juridiques : en ligne dans la barre du bas, pas en colonne.
À écrire APRÈS .footer a, sinon le padding:.25rem l'emporte (même spécificité, dernière règle gagnante)
et les 3 liens se décalent verticalement par rapport au copyright voisin.
Inutile de forcer display:inline : le parent est un conteneur flex, qui blockifie ses enfants. */
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.footer-legal a{padding:0}
.footer a:hover{color:var(--green-700)}
.footer .logo-foot{height:44px;margin-bottom:1rem}
.footer-bottom{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--muted)}
/* ---------- Page formation (gabarit) ---------- */
.breadcrumb{font-size:.85rem;color:var(--muted);padding:1.2rem 0}
.breadcrumb a{color:var(--muted)}
.form-hero{background:linear-gradient(180deg,var(--cream),#fff);padding:2rem 0 3rem}
.form-hero-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:2.5rem;align-items:start}
/* Un enfant de grille vaut min-width:auto par défaut : il ne peut pas descendre sous la
largeur intrinsèque de son contenu. La photo de couverture forçait ainsi la colonne à
381 px dans une page de 375, et débordait — sans barre de défilement, body étant en
overflow-x:clip, mais l'image était rognée à droite. */
.form-hero-grid>*{min-width:0}
.tags{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.tag-pill{font-size:.82rem;font-weight:600;padding:.3rem .8rem;border-radius:999px;background:var(--cream-200);color:var(--brown)}
.buybox{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;background:#fff}
.buybox .price{font-family:"Poppins";font-size:2rem;font-weight:700}
.buybox .opt{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
/* Le format e-learning est mis en avant sur un fond dérivé du vert du logo. */
.buybox .opt.opt-el{background:var(--green-soft);border-bottom-color:var(--green);
margin:0 -1rem;padding-left:1rem;padding-right:1rem;border-radius:10px 10px 0 0}
.buybox .opt:last-of-type{border-bottom:0}
.toc{display:flex;gap:1.5rem;border-bottom:1px solid var(--line);margin:2rem 0;flex-wrap:wrap}
.toc a{padding:.8rem 0;color:var(--muted);font-weight:500;border-bottom:2px solid transparent}
.toc a:hover{color:var(--green-700);border-color:var(--green)}
.prose h2{margin:2rem 0 1rem}
.prose ul{padding-left:1.2rem}
.prose li{margin:.4rem 0}
.session-row{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.7rem}
.session-row:hover{border-color:var(--green)}
/* ---------- Responsive ---------- */
/* nav : passe en burger dès qu'elle risque de déborder
(1140px = largeur réellement nécessaire à la nav complète ; à 980px elle débordait) */
@media (max-width:1140px){
.nav-links{display:none}
.nav-cta .btn-ghost{display:none}
.burger{display:flex}
.nav-links.open{display:flex}
}
@media (max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:2rem}
.grid,.res-grid,.fin-list{grid-template-columns:repeat(2,1fr)}
.team{grid-template-columns:repeat(3,1fr)}
.split,.form-hero-grid,.cta-band{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-legal{justify-content:center;width:100%}
.buybox{position:static}
}
@media (max-width:640px){
.nav-links,.nav-cta .btn-ghost{display:none}
.burger{display:flex}
/* le CTA d'en-tête ne rentre plus sous ~560px : on garde logo + compte + menu */
.nav-cta .btn-primary{display:none}
.grid,.res-grid,.team,.fin-list,.footer-grid{grid-template-columns:1fr}
.trustbar .container{gap:1rem}
}
/* menu mobile ouvert */
.nav-links.open{
display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;
background:#fff;padding:1rem 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)
}
/* =========================================================
COMPOSANTS DE VENTE (ajout) — v2
========================================================= */
/* marqueur de contenu à remplacer (données non confirmées) */
/* marqueurs de dev neutralisés (masqués visuellement, classes conservées) */
.todo{position:relative}
.todo::after{content:none}
.tag-todo{display:none}
/* bandeau de statistiques */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1rem}
.stat .num{font-family:"Poppins";font-weight:700;font-size:2rem;color:var(--green-700);line-height:1}
.stat .lbl{color:var(--muted);font-size:.9rem;margin-top:.4rem}
/* tableau comparatif des formats */
.compare{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.compare th,.compare td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);font-size:.96rem}
.compare thead th{background:var(--cream);font-family:"Poppins";font-weight:600}
.compare thead th.hot{background:var(--green-700);color:#fff}
.compare td.center,.compare th.center{text-align:center}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:var(--green-700);font-weight:700}
.compare .no{color:#bcb9a8}
/* FAQ (accordéon natif) */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:"Poppins";font-weight:600;
display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--green-700);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{background:var(--cream)}
.faq .answer{padding:0 1.3rem 1.2rem;color:var(--muted)}
/* témoignages */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.quote .stars{color:#f1b53d;letter-spacing:2px}
.quote p{font-style:italic;color:var(--ink);margin:0}
.quote .who{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.quote .who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--cream-200));
display:grid;place-items:center;font-family:"Poppins";font-weight:700;color:#33471a;font-size:.95rem}
.quote .who b{font-size:.92rem}
.quote .who small{color:var(--muted);display:block}
/* La frise en quatre étapes a été retirée du site le 08/08/2026, ses styles avec. */
/* bloc réassurance / garantie */
.assurance{display:flex;gap:1rem;align-items:center;background:var(--cream);border:1px solid var(--cream-200);
border-radius:var(--radius);padding:1.3rem 1.6rem}
.assurance .ico{font-size:1.8rem}
.assurance b{font-family:"Poppins"}
/* deliverables (ce que vous repartez avec) */
.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.deliverable{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem}
.deliverable .ck{color:var(--green-700);font-weight:700;font-size:1.1rem;flex:0 0 auto}
/* urgence : places restantes */
.spots{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:#a8521e;
background:#fdeede;border:1px solid #f6cda3;padding:.2rem .6rem;border-radius:999px;font-family:"Poppins"}
.spots.low{color:#b3261e;background:#fde4e1;border-color:#f4b6af}
/* filtres calendrier */
.cal-filters{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.chip{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;
font-weight:500;font-size:.9rem;color:var(--ink);transition:all .2s;font-family:"Inter"}
.chip:hover{border-color:var(--green)}
.chip.active{background:var(--green-cta);color:var(--ink);border-color:var(--green-500)}
.cal-date{flex:0 0 auto;text-align:center;background:var(--cream);border-radius:var(--radius-sm);padding:.5rem .8rem;min-width:64px}
.cal-date .d{font-family:"Poppins";font-weight:700;font-size:1.3rem;line-height:1;color:var(--green-700)}
.cal-date .m{font-size:.72rem;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}
.session-row .meta-s{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
/* mini valeurs (à propos) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.value .ico{width:48px;height:48px;border-radius:12px;background:var(--cream-200);display:grid;place-items:center;font-size:1.4rem;margin-bottom:.8rem}
/* vignette catalogue + image de couverture formation */
.card .thumb{width:100%;height:150px;object-fit:cover;border-radius:12px;background:var(--cream-200)}
.fcover{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:3/2;background:var(--cream);display:block}
.tariff-card{display:flex;flex-direction:column;gap:.5rem}
.tariff-card .tprice{font-family:"Poppins";font-weight:700;font-size:2rem;color:var(--ink)}
.tariff-card .tprice small{font-size:.85rem;color:var(--muted);font-weight:500}
.tariff-card ul{list-style:none;padding:0;margin:.4rem 0;display:flex;flex-direction:column;gap:.45rem}
.tariff-card li{display:flex;gap:.5rem;font-size:.92rem;color:var(--muted)}
.tariff-card li::before{content:"✓";color:var(--green-700);font-weight:700}
/* page-hero générique (titres de pages internes) */
.page-hero{background:radial-gradient(900px 380px at 80% -20%,rgba(164,201,90,.25),transparent 60%),linear-gradient(180deg,var(--cream),#fff);padding:clamp(2.5rem,6vw,4.5rem) 0}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:1rem}
/* responsive des nouveaux composants */
@media (max-width:980px){
.stats{grid-template-columns:repeat(2,1fr)}
.quotes,.steps,.plans,.values{grid-template-columns:1fr}
.deliverables{grid-template-columns:1fr}
.plan.featured{transform:none}
.compare{display:block;overflow-x:auto;white-space:nowrap}
}
@media (max-width:640px){
.stats{grid-template-columns:1fr}
}