/* Formules : composition de la page (pictogrammes, titres de section, liens d'action et tracés viennent de forge.css / composants).
   Même langage que Espaces : fonds kaki clair (jamais d'abricot, il féminise la page), transitions en dégradé masqué, tracés verticaux de la marque derrière les cartes. */
.formulas,.offers{--khaki:color-mix(in srgb,var(--color-forest) 9%,var(--color-surface));--khaki-line:color-mix(in srgb,var(--color-forest) 16%,transparent)}

/* Sous-navigation « Je veux » : collée sous le header pendant les formules, mêmes liens que la navigation (petites capitales, souligné abricot pour le lien actif). */
.formulas{padding-block:clamp(110px,11vw,170px) var(--space-section)}
.intent-filter{position:sticky;top:var(--header-height);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:4px clamp(24px,3vw,44px);margin-bottom:clamp(24px,2.6vw,40px);padding-block:14px;isolation:isolate}
.intent-filter::before{content:'';position:absolute;z-index:-1;inset:0 -100vmax;background:color-mix(in srgb,var(--color-surface) 96%,transparent)}
.intent-label{font:500 var(--text-sm)/18.6px var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-text-soft)}
.intent-options{display:flex;flex-wrap:wrap;gap:4px clamp(22px,3vw,44px)}
.intent-option{padding:8px 0;border:0;background:none;cursor:pointer;font-family:var(--font-heading);font-size:var(--text-sm);line-height:18.6px;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;color:var(--color-text)}
.intent-option:hover{text-decoration:underline;text-underline-offset:8px}
.intent-option[aria-pressed=true]{text-decoration:underline;text-decoration-color:var(--color-brand);text-decoration-thickness:2px;text-underline-offset:8px}
.intent-option:focus-visible{outline:2px solid var(--color-text);outline-offset:4px}
/* Le nombre de formules n'est plus affiché ; il reste annoncé aux lecteurs d'écran */
.intent-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cartes : photo plein cadre, voile sombre en bas, texte clair posé dessus. Pas de bordure ni de filet. Grille régulière de 3 colonnes ; la dernière carte seule prend toute la largeur. */
.formula-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
/* Section 1 : grille organique. Hauteurs différentes, décalages X et Y propres à chaque carte (comme les photos d'Espaces), sans aucun mouvement. */
.formula-list{--rg:clamp(80px,9vw,140px);align-items:start;row-gap:var(--rg);padding-bottom:calc(var(--rg) * .6)}
.formula{position:relative;isolation:isolate;container-type:inline-size;transform:translate3d(0,var(--formula-shift,0px),0);display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:var(--h,clamp(560px,42vw,660px));overflow:hidden;border-radius:var(--radius);background:var(--khaki);color:var(--color-surface);scroll-margin-top:calc(var(--header-height) + 88px)}
.formula-photo{position:absolute;inset:0;z-index:-2;margin:0;background:var(--color-forest);transition:opacity 300ms ease,filter 300ms ease}
.formula-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--formula-photo-shift,0px),0) scale(1.18);will-change:transform}
.formula::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,17,8,.96) 0,rgba(14,17,8,.9) 46%,rgba(14,17,8,.5) 76%,rgba(14,17,8,0) 100%);transition:opacity 300ms ease}
.formula-content{display:flex;flex-direction:column;padding:clamp(20px,1.8vw,28px);transition:opacity 300ms ease,filter 300ms ease}
.formula-head .forge-icon{position:static;display:block;width:28px;height:28px;margin-bottom:12px;color:var(--color-surface)}
.formula-head .forge-icon :is(path,circle,line,polyline,polygon,rect,ellipse){stroke-width:1.1}
.formula :is(h2,h3){font-size:min(clamp(22px,1.9vw,28px),8.4cqi);line-height:1.2;letter-spacing:-.4px;overflow-wrap:normal}
.formula-subtitle{margin-top:8px;font:500 var(--text-ui)/1.5 var(--font-heading);color:color-mix(in srgb,var(--color-surface) 94%,transparent)}
.formula-body{display:flex;flex-direction:column;margin-top:10px;min-width:0}
.formula-body>p{font-size:var(--text-ui);line-height:1.6;color:color-mix(in srgb,var(--color-surface) 88%,transparent)}
.formula-tags{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px}
.formula-tags li{display:flex;align-items:center;gap:8px;font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:1.1px;text-transform:uppercase;color:color-mix(in srgb,var(--color-surface) 78%,transparent)}
.formula-tags li::before{content:'';width:5px;height:5px;flex-shrink:0;background:var(--color-accent)}
.formula-formats{padding-top:16px}
.formula-formats h3{margin-bottom:4px;font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:1.1px;text-transform:uppercase;color:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.formula-formats li{padding:4px 0;font-size:var(--text-ui);line-height:1.45}
.formula-action{padding-top:18px}
/* Toute la carte est cliquable : le lien d'action s'étire sur la carte ; les cartes estompées par le tri ne le sont pas */
.formula:not(.is-dimmed){cursor:pointer}
.formula-cta{display:flex;justify-content:flex-end;align-items:center;gap:16px;width:100%;min-height:44px;color:var(--color-brand)}
.formula-cta::after{content:'';position:absolute;inset:0;z-index:3}
.formula.is-dimmed .formula-cta::after{display:none}
.formula-cta:focus-visible{outline:none}
.formula:has(.formula-cta:focus-visible){outline:2px solid var(--color-brand);outline-offset:-3px}
/* Même hover que les cartes du ticker de l'accueil : la flèche est toujours là, son libellé n'apparaît qu'au survol (ou au focus), toujours visible sur écran tactile */
.formula-cta-label{font:500 var(--text-sm)/1.4 var(--font-heading);opacity:0;transform:translateX(-6px);transition:opacity var(--learn-out) var(--learn-ease),transform var(--learn-out) var(--learn-ease)}
.formula:has(.formula-cta:focus-visible) .formula-cta-label{opacity:1;transform:none}
.formula:has(.formula-cta:focus-visible) .t-learn-chevron{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){
.formula:not(.is-dimmed):hover .formula-cta-label{opacity:1;transform:none}
.formula:not(.is-dimmed):hover .t-learn-chevron{transform:translateX(4px)}
/* Le texte du dessus se soulève de 6 px, comme le texte des cartes du ticker (jamais le bloc du lien : il sert de repère à la carte cliquable) */
.formula-head,.formula-body>p,.formula-tags,.formula-formats{transition:translate var(--learn-out) var(--learn-ease),opacity 320ms ease,max-height 320ms ease,padding-top 320ms ease}
.formula:not(.is-dimmed):is(:hover,:focus-within) :is(.formula-head,.formula-body>p,.formula-tags,.formula-formats){translate:0 -6px}
/* Pictogramme : se colore et se redessine, exactement comme celui des cartes du ticker */
.formula:not(.is-dimmed):hover .service-icon{color:var(--color-brand);transform:translateY(-4px)}
.formula:not(.is-dimmed):hover .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse){animation:forge-icon-draw 1000ms var(--dropdown-ease) both}
.formula:not(.is-dimmed):hover .service-icon :nth-child(2){animation-delay:90ms}
.formula:not(.is-dimmed):hover .service-icon :nth-child(3){animation-delay:180ms}
.formula:not(.is-dimmed):hover .service-icon :nth-child(4){animation-delay:270ms}
.formula:not(.is-dimmed):hover .service-icon :nth-child(5){animation-delay:360ms}
.formula:not(.is-dimmed):hover .service-icon :nth-child(n+6){animation-delay:450ms}
}
@media(hover:none){.formula-cta-label{opacity:1;transform:none}}
.formula:has(.formula-cta:focus-visible) .service-icon{color:var(--color-brand)}
.formula:has(.formula-cta:focus-visible) .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse){animation:forge-icon-draw 1000ms var(--dropdown-ease) both}
/* Une fois l'apparition terminée, plus de transform ni de filtre résiduels sur les lignes : sinon elles deviennent le repère du lien étiré et la carte n'est plus cliquable en entier */
.formula-content.is-settled .t-stagger-line{transform:none;filter:none}
/* Hauteurs et décalages (translate : sans effet sur la mise en page) */
.formula-list>.formula:nth-child(1){--h:clamp(560px,41vw,640px)}
.formula-list>.formula:nth-child(2){--h:clamp(600px,44vw,680px);translate:10px calc(var(--rg) * .5)}
.formula-list>.formula:nth-child(3){--h:clamp(540px,39vw,610px);translate:-8px calc(var(--rg) * .2)}
.formula-list>.formula:nth-child(4){--h:clamp(580px,43vw,660px);translate:-6px calc(var(--rg) * .3)}
.formula-list>.formula:nth-child(5){--h:clamp(540px,39vw,620px);translate:8px 0}
.formula-list>.formula:nth-child(6){--h:clamp(600px,44vw,680px);translate:4px calc(var(--rg) * .55)}
/* Formats et durées : au survol (ou au focus) sur ordinateur, toujours affichés sur écran tactile */
@media(hover:hover) and (pointer:fine){
.formula-formats{max-height:0;padding-top:0;overflow:hidden;opacity:0;transition:max-height 320ms ease,padding-top 320ms ease,opacity 240ms ease}
.formula:not(.is-dimmed):is(:hover,:focus-within) .formula-formats{max-height:280px;padding-top:16px;opacity:1}
}
/* Au survol, le texte d'avant baisse un peu (0,72, lisible) pour que l'œil aille vers les formats et durées qui arrivent */
@media(hover:hover) and (pointer:fine){
.formula-head,.formula-body>p,.formula-tags{transition:opacity 320ms ease}
.formula:not(.is-dimmed):is(:hover,:focus-within) :is(.formula-head,.formula-body>p,.formula-tags){opacity:.72}
}
/* Tri par envie : une formule non conseillée devient un fantôme flou et pâle (état fixe, un seul rendu, pas d'animation en continu) */
.formula.is-dimmed{background:var(--khaki)}
.formula.is-dimmed .formula-photo{opacity:.16;filter:blur(7px) saturate(.4)}
.formula.is-dimmed::after,.formula.is-dimmed:last-child:nth-child(3n+1)::after{opacity:0}
.formula.is-dimmed .formula-content{opacity:.22;filter:blur(3px);color:var(--color-text)}
.formula.is-dimmed :is(.formula-head .forge-icon,.formula-cta){color:var(--color-text)}
.formula.is-dimmed :is(.formula-body>p,.formula-tags li,.formula-formats h3){color:var(--color-text)}
/* Dernière carte seule : pleine largeur, contenu en bas à gauche sur une largeur de lecture */
.formula-list>.formula:last-child:nth-child(3n+1){grid-column:1/-1;--h:clamp(380px,30vw,460px);translate:none}
.formula-list>.formula:last-child:nth-child(3n+1) .formula-content{max-width:min(720px,100%)}
.formula-list>.formula:last-child:nth-child(3n+1)::after{background:linear-gradient(to right,rgba(14,17,8,.96) 0,rgba(14,17,8,.9) 52%,rgba(14,17,8,.45) 80%,rgba(14,17,8,.1) 100%)}


/* PROTOCOLES : bande abricot du bilan (bords en dégradé), grand tracé de la marque derrière les cartes, trois cartes sombres à chiffres géants, étapes avec pictogramme. */
.offers{position:relative;padding-block:var(--space-section)}
.offers .section-heading{margin-bottom:0}
.offers[id=protocoles]::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--forge-grain) 0 0/256px 256px,color-mix(in srgb,var(--color-brand) 13%,var(--color-surface));-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.protocoles-track{position:relative;margin-top:clamp(56px,6vw,96px)}
.protocoles-trace{position:absolute;z-index:-1;left:calc(50% - 50vw);top:clamp(-84px,-5vw,-36px);width:100vw;max-width:none;height:auto;overflow:visible;color:var(--color-brand)}
.offer-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start;padding-bottom:clamp(32px,4vw,64px)}
.offer--protocole{--glow:.5;position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:clamp(470px,36vw,560px);padding:clamp(24px,2.4vw,36px);overflow:hidden;border-radius:var(--radius);color:var(--color-surface);background:var(--forge-grain) 0 0/256px 256px,linear-gradient(165deg,#30352a 0,var(--color-forest) 62%);container-type:inline-size;top:0;transform:translate3d(0,var(--offer-shift,0px),0);transition:top var(--learn-out) var(--learn-ease)}
.offer--protocole::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(90% 70% at 100% 0,color-mix(in srgb,var(--color-brand) 34%,transparent) 0,transparent 62%);opacity:var(--glow);transition:opacity 400ms ease}
.offer-list>.offer--protocole:nth-child(2){translate:0 clamp(28px,3.4vw,56px)}
.offer-list>.offer--protocole:nth-child(3){translate:0 clamp(10px,1.4vw,22px)}
.offer-kind{font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:1.4px;text-transform:uppercase;color:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.offer-duration{min-height:clamp(96px,8.6vw,132px);margin-top:clamp(18px,2vw,30px)}
.offer-figure{display:flex;align-items:baseline;gap:10px;font:500 clamp(68px,6.2vw,100px)/.9 var(--font-heading);letter-spacing:-2px;color:var(--color-brand)}
.offer-or{font:500 var(--text-sm)/1 var(--font-label);letter-spacing:1.4px;text-transform:uppercase;color:color-mix(in srgb,var(--color-surface) 72%,transparent)}
.offer-unit{display:block;margin-top:10px;font:500 var(--text-sm)/1.4 var(--font-label);letter-spacing:1.4px;text-transform:uppercase;color:color-mix(in srgb,var(--color-surface) 86%,transparent)}
.offer--protocole h3{margin-top:clamp(14px,1.6vw,22px);font-size:min(clamp(26px,2.3vw,34px),9.4cqi);line-height:1.12;letter-spacing:-.5px;overflow-wrap:normal}
.offer-text{margin-top:12px;line-height:1.65;color:color-mix(in srgb,var(--color-surface) 82%,transparent)}
.offer-items{margin-top:clamp(18px,2vw,26px)}
.offer-items li{display:flex;align-items:center;gap:14px;padding:7px 0;font-size:var(--text-body);line-height:1.35}
.offer-step-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;color:color-mix(in srgb,var(--color-surface) 88%,transparent)}
.offer-step-icon .service-icon{position:static;width:24px;height:24px;color:inherit}
.offer-step-icon .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse){stroke-width:1.1}
.offer-action{margin-top:auto;padding-top:22px}
.offer--protocole.is-settled .t-stagger-line{transform:none;filter:none}
.offer--protocole:has(.formula-cta:focus-visible){outline:2px solid var(--color-brand);outline-offset:-3px}
.offer--protocole:has(.formula-cta:focus-visible) .formula-cta-label{opacity:1;transform:none}
.offer--protocole:has(.formula-cta:focus-visible) .t-learn-chevron{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){
.offer--protocole:hover{--glow:1;top:-4px}
.offer--protocole:hover .formula-cta-label{opacity:1;transform:none}
.offer--protocole:hover .t-learn-chevron{transform:translateX(4px)}
.offer--protocole:hover .offer-step-icon .service-icon{color:var(--color-brand)}
.offer--protocole:hover .offer-step-icon .service-icon :is(path,circle,line,polyline,polygon,rect,ellipse){animation:forge-icon-draw 1000ms var(--dropdown-ease) both}
}

/* CURES (solution provisoire) : fond clair, trois cartes photo plein cadre comme les formules (même hover, même clic), décalées en hauteur, durée en bandeau abricot sur la photo. */
.cures{position:relative;padding-block:var(--space-section) calc(var(--space-section) * .8)}
.cure-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start;margin-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,64px)}
.formula--cure{--h:clamp(440px,34vw,540px)}
.cure-list>.formula--cure:nth-child(2){translate:0 clamp(28px,3.4vw,56px)}
.cure-list>.formula--cure:nth-child(3){translate:0 clamp(10px,1.4vw,22px)}
.cure-badge{position:absolute;top:18px;left:18px;z-index:1;padding:9px 16px;background:var(--color-brand);color:var(--color-text);font:500 var(--text-sm)/1.4 var(--font-heading);letter-spacing:1px;text-transform:uppercase}
/* Essai (×4) : tracés à 400 % de la largeur de la carte, centrés en X et en Y */
/* Tracés de cure : entre 4 et 7 contours tirés au hasard (hauteur, taille, décalage, opacité, durée et délai chacun leur tour : classes ct-*), centrés ou répartis sur la hauteur de la carte, derrière le texte. */
.formula--cure::after{z-index:-2}
/* Les tracés sont regroupés dans un calque masqué par un dégradé vers le bas : ils s'effacent avant la zone de texte, qui reste lisible */
.cure-traces{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 26%,transparent 60%);mask-image:linear-gradient(to bottom,#000 0,#000 26%,transparent 60%)}
.formula--cure .cure-trace{--w:320%;--tx:0%;overflow:visible;position:absolute;left:calc((100% - var(--w)) / 2);top:50%;translate:var(--tx) -50%;width:var(--w);max-width:none;height:auto;color:var(--color-brand);pointer-events:none;opacity:var(--o,1)}
.formula--cure .cure-trace :is(polygon,path,rect,circle,ellipse,polyline){fill:none;stroke:currentColor;stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cure-trace.ct-s1{--w:220%}.cure-trace.ct-s2{--w:320%}.cure-trace.ct-s3{--w:420%}
.cure-trace.ct-x1{--tx:-14%}.cure-trace.ct-x2{--tx:0%}.cure-trace.ct-x3{--tx:14%}
.cure-trace.ct-o1{--o:1}.cure-trace.ct-o2{--o:.7}.cure-trace.ct-o3{--o:.45}
.cure-trace.ct-y1{top:6%}.cure-trace.ct-y2{top:18%}.cure-trace.ct-y3{top:30%}.cure-trace.ct-y4{top:42%}.cure-trace.ct-y5{top:54%}.cure-trace.ct-y6{top:66%}.cure-trace.ct-y7{top:78%}.cure-trace.ct-y8{top:90%}
/* Chaque tracé se dessine de gauche à droite, reste un instant, s'efface dans le même sens, puis recommence. Arrêté hors écran ; fixe et entier si le mouvement est réduit ou sans JavaScript. */
@keyframes cure-trace{0%{clip-path:inset(-120% 100% -120% 0)}38%{clip-path:inset(-120% 0 -120% 0)}70%{clip-path:inset(-120% 0 -120% 0)}90%{clip-path:inset(-120% 0 -120% 100%)}100%{clip-path:inset(-120% 0 -120% 100%)}}
.cure-live-ready .formula--cure .cure-trace{animation:cure-trace 13s cubic-bezier(.4,0,.2,1) infinite paused;animation-delay:-3s}
.cure-live-ready .cure-trace.ct-t1{animation-duration:9s}.cure-live-ready .cure-trace.ct-t2{animation-duration:12s}.cure-live-ready .cure-trace.ct-t3{animation-duration:15s}.cure-live-ready .cure-trace.ct-t4{animation-duration:18s}
.cure-live-ready .cure-trace.ct-d1{animation-delay:0s}.cure-live-ready .cure-trace.ct-d2{animation-delay:-1.7s}.cure-live-ready .cure-trace.ct-d3{animation-delay:-3.4s}.cure-live-ready .cure-trace.ct-d4{animation-delay:-5.1s}.cure-live-ready .cure-trace.ct-d5{animation-delay:-6.8s}.cure-live-ready .cure-trace.ct-d6{animation-delay:-8.5s}.cure-live-ready .cure-trace.ct-d7{animation-delay:-10.2s}.cure-live-ready .cure-trace.ct-d8{animation-delay:-11.9s}
.cure-live-ready .formula--cure.is-live .cure-trace{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.cure-live-ready .formula--cure .cure-trace{animation:none}}
.formula--cure .formula-subtitle{text-transform:uppercase;letter-spacing:1.2px;font-size:var(--text-xs);font-family:var(--font-label)}

@media(max-width:1000px){
.offer-list,.cure-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.offer-list>.offer--protocole:nth-child(n),.cure-list>.formula--cure:nth-child(n){translate:none;--h:clamp(440px,50vw,540px);min-height:var(--h)}

.offer-list>.offer--protocole:last-child:nth-child(odd),.cure-list>.formula--cure:last-child:nth-child(odd){grid-column:1/-1}
.formula-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.formula-list>.formula:last-child:nth-child(3n+1){grid-column:auto;--h:clamp(520px,50vw,640px)}
.formula-list>.formula:last-child:nth-child(odd){grid-column:1/-1;--h:clamp(380px,40vw,460px)}
.formula:nth-child(n){translate:none;--h:clamp(520px,56vw,620px)}
.formula:nth-child(even){translate:0 calc(var(--rg) * .45)}
.formula-list>.formula:last-child:nth-child(odd){translate:none}
}
@media(max-width:700px){
.formula:nth-child(n){translate:none;--h:520px}
.intent-filter{flex-wrap:nowrap;gap:16px;padding-block:8px}
.intent-label{display:none}
.intent-options{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:24px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.intent-options::-webkit-scrollbar{display:none}
.formula-list,.offer-list,.cure-list{grid-template-columns:minmax(0,1fr)}
.offer-list>.offer--protocole:nth-child(n),.cure-list>.formula--cure:nth-child(n){translate:none;--h:480px;min-height:var(--h)}
.protocoles-trace{display:none}
}
@media(prefers-reduced-motion:reduce){.offer--protocole{transform:none;transition:none}.offer--protocole::before{transition:none}.formula-cta-label{transition:none}.formula .service-icon *{animation:none!important}.formula-head,.formula-body>p,.formula-tags,.formula-formats{transition:none;translate:none!important}.formula{transform:none}.formula-photo img{transform:none;will-change:auto}.formula-formats,.formula-photo,.formula-content,.formula::after,.intent-option,.intent-option::before{transition:none}}
@media print{.formula{transform:none}.formula-photo img{transform:none}.formula,.offer{break-inside:avoid}.protocoles-trace{display:none}.intent-filter{display:none}}

@media(max-width:1000px){.intent-option{min-height:44px;display:inline-flex;align-items:center}}