/* Pulse Tweaks — styles de page (structure reprise de la référence, couleurs Pulse) */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

canvas { position: fixed; inset: 0; }
.section { pointer-events: none; }
.gamme_container, .profile_container, .benefits_container, .argument_container, .carousel_title-bis-wrapper { position: fixed; inset: 0; }
.benefits_nav { position: fixed; }
.loader { display: flex; }

html { font-size: clamp(0.875rem, 0.833vw, 1rem) !important; }
* { -webkit-tap-highlight-color: transparent; }
/* selection : seulement le chrome (HUD, navbar, carrousel), le texte courant se copie */
.hud, .navbar, .loader, .carousel_title-collection, .carousel_title-bis-wrapper, .stack_symptoms { -webkit-user-select: none; user-select: none; }
input, textarea, .is-selectable { -webkit-user-select: text; user-select: text; }
a { color: inherit; text-decoration: inherit; font-size: inherit; }
.pointer-events-off { pointer-events: none; }
.pointer-events-on { pointer-events: auto; }
.hide { display: none !important; }
@media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } }
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
svg:not(:root) { overflow: visible !important; }

.navbar_menu .navbar_link:first-child { padding-top: 0; }
.navbar_menu .navbar_link:last-child { padding-bottom: 0; border: none; }
@media screen and (min-width: 991px) {
  .navbar_link-list:hover .navbar_link, .footer_link-list:hover .footer_link, .faq_list:hover .faq_accordion { color: var(--_primitives---opacity--white-30); }
  .navbar_link:hover, .footer_link:hover, .faq_accordion:hover { color: var(--color-scheme-1--text) !important; }
}
.navbar_menu-circle-closed { opacity: 0; transition: opacity 0.2s; }
.navbar_menu-button.is-open .navbar_menu-circle-closed { opacity: 1; }

/* ---- Couleurs produit (le FOND de la page : dégradé CSS piloté par variables) ---- */
@property --color-scheme-1--taste-primary { syntax: '<color>'; inherits: true; initial-value: #2a1657; }
@property --color-scheme-1--taste-secondary { syntax: '<color>'; inherits: true; initial-value: #8b5cf6; }
@property --loader-reveal { syntax: '<length>'; inherits: true; initial-value: 100vh; }

:root {
  --color-scheme-1--taste-primary: #2a1657;
  --color-scheme-1--taste-secondary: #8b5cf6;
  transition: --color-scheme-1--taste-primary 0.6s ease-in-out, --color-scheme-1--taste-secondary 0.6s ease-in-out;
}

body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; transition: opacity 0.4s; }
body::before {
  height: 100vh; top: 0;
  background: linear-gradient(9.02deg, #eeeeee -30%, #959492 15%, #000000 65%);
  transform: translateY(var(--loader-reveal, 100vh));
  will-change: transform;
}
body::after {
  background: radial-gradient(88.85% 121.19% at 43.49% 112.49%, var(--color-scheme-1--taste-secondary) 4.96%, var(--color-scheme-1--taste-primary) 54.38%, #000 93.49%);
  opacity: 0;
}
body.is-profile-active::after { opacity: 1; }

h2[data-anim='chars-mask'], .heading-style-h2 [data-anim='chars-mask'] { line-height: 1.2; }
h2[data-anim='chars-mask'] .line-mask:not(:first-child), .heading-style-h2 [data-anim='chars-mask']:not(:first-child) .line-mask { margin-top: -0.35em; }
.carousel_title-bis-collection div[data-anim='chars-mask'] { width: 100%; }
.carousel_title-bis-collection .line { display: flex !important; justify-content: space-between; }

.benefits_text .subhead_text::before {
  content: ''; position: absolute; top: 50%; left: var(--_spacing-sizing---element-padding--xxs);
  width: calc(100% - var(--_spacing-sizing---element-padding--xs)); height: 1px;
  background: var(--_primitives---colors--neutral-darkest);
  transform: scaleX(var(--benefits-line, 0)); transform-origin: left center;
}

.scroll_indicator { width: calc(var(--p, 0) * 100%); }
.scroll_indicator__core { background: linear-gradient(to right, rgba(255,255,255,.05) 0%, rgba(255,255,255,.35) 55%, #fff 100%); }
.scroll_indicator__mid { background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.25) 60%, rgba(255,255,255,.95) 100%); }
.scroll_indicator__halo { background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.1) 65%, rgba(255,255,255,.5) 100%); }
.scroll_indicator__hotspot { background: radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,.5) 35%, transparent 70%); }

/* dégradé conique de la gamme : les 4 couches */
.gamme_gradient { background: conic-gradient(from 17deg at 50% 50%, #8b5cf6 0deg, #d946ef 72deg, #3b82f6 144deg, #6366f1 216deg, #22d3ee 288deg, #8b5cf6 360deg); }

/* claim : texte géant SVG */
.argument_svg svg text { fill: #f4f3f6; font-family: Anton, Impact, sans-serif; font-style: italic; } /* blanc : la couleur produit inonde le fond, un texte de la meme couleur disparaissait (« INUTILE » illisible) */
.argument_svg { filter: drop-shadow(0 0 80px var(--color-scheme-1--taste-secondary)) drop-shadow(0 0 90px var(--color-scheme-1--taste-primary)); mix-blend-mode: screen; }
.argument_video img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media screen and (min-width: 991px) { .section { min-height: 125svh; } }
@media screen and (max-width: 991px) { .section { min-height: 125svh; } .argument_svg { filter: none; } }

@supports (-webkit-hyphens: none) { .gradient_overlay, .navbar_overlay { filter: none; } }

/* ---- Spécifique Pulse ---- */
.navbar_logo-text { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.5rem; line-height: .9; letter-spacing: .01em; text-align: center; text-transform: uppercase; color: #fff; }
.navbar_logo-text small { display: block; font-family: var(--_typography---font-styles--mono); font-style: normal; font-size: .55rem; letter-spacing: .42em; opacity: .7; margin-top: .15rem; }
.loader_wordmark { text-align: left; font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(3rem, 9vw, 9rem); line-height: .85; text-align: center; color: #fff; opacity: .9; animation: loaderPulse 2.4s ease-in-out infinite; }
@keyframes loaderPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.heading-style-h2 { font-style: italic; }
h2 { font-style: italic; }
.profile_price { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 2.25rem; line-height: 1; }
.profile_cta { display: flex; align-items: center; gap: var(--_spacing-sizing---element-padding--m); margin-top: var(--_spacing-sizing---element-padding--m); pointer-events: auto; }
.reviews_list { display: grid; gap: var(--_spacing-sizing---element-padding--s); margin-top: var(--_spacing-sizing---element-padding--xl); text-align: left; }
.review { border: 1px solid var(--color-scheme-1--border); border-radius: var(--_ui-styles---radius--small); background: var(--_primitives---opacity--white-5); backdrop-filter: blur(1rem); padding: var(--_spacing-sizing---element-padding--s); font-size: .95rem; line-height: 1.5; }
.review_who { margin-top: .5rem; font-family: var(--_typography---font-styles--mono); font-size: .75rem; color: var(--_primitives---opacity--white-60); }
.faq_icon-wrapper { transform-origin: center; }
.text-size-tiny a { text-decoration: underline; }

/* ---- Fluidité : filtres lourds allégés (un drop-shadow de 90 px sur un SVG pleine largeur se repeint à chaque frame) ---- */
.argument_svg { filter: drop-shadow(0 0 18px var(--color-scheme-1--taste-secondary)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); will-change: filter, opacity; }
.argument_svg svg text { fill-opacity: 0.94 !important; }
.review { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.06); }

/* ---- Signature Pulse : survol des boutons par crochets d'angle (le motif des fiches), plus de bascule de lettres ---- */
.button { position: relative; overflow: visible; }
.button::before, .button::after { content: ''; position: absolute; width: .6em; height: .6em; border: 1.5px solid var(--_primitives---colors--white, #fff); filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); opacity: 0; pointer-events: none; transition: opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1); }
.button::before { top: -.35em; left: -.35em; border-right: 0; border-bottom: 0; border-top-left-radius: .25em; transform: translate(-.35em, -.35em); }
.button::after { bottom: -.35em; right: -.35em; border-left: 0; border-top: 0; border-bottom-right-radius: .25em; transform: translate(.35em, .35em); }
@media (hover: hover) { .button:hover::before, .button:hover::after { opacity: 1; transform: translate(0, 0); } }

/* ---- HUD : lecture de la section et de la couche courantes ---- */
.hud_readout { display: flex; flex-direction: column; gap: .15rem; margin-top: .4rem; font-family: var(--_typography---font-styles--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; text-align: right; min-height: 2.2em; }
.hud_readout-layer { color: var(--color-scheme-1--taste-secondary); }

/* ---- Section « Couches » : les 4 modules 3D empilés à gauche, la liste à droite ---- */
.stack_container { position: fixed; inset: 0; }
.stack_grid { display: grid; grid-template-columns: 44% 1fr; align-items: center; height: 100%; }
.stack_text { pointer-events: auto; max-width: 34rem; }
.stack_list { list-style: none; margin: var(--_spacing-sizing---element-padding--m) 0 0; padding: 0; border-top: 1px solid var(--color-scheme-1--border); }
.stack_layer { display: grid; grid-template-columns: 2.2rem 8.5rem 1fr auto; align-items: baseline; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--color-scheme-1--border); font-family: var(--_typography---font-styles--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); cursor: pointer; outline: none; position: relative; transition: color .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.stack_layer::before { content: ''; position: absolute; left: -1.2rem; top: 50%; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c); transform: translateY(-50%) scale(0); transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 14px var(--c); }
.stack_name { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.25rem; letter-spacing: .01em; line-height: 1; color: var(--color-scheme-1--text); }
.stack_price { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.1rem; letter-spacing: 0; }
.stack_layer.is-active { color: var(--color-scheme-1--text); transform: translateX(.6rem); }
.stack_layer.is-active::before { transform: translateY(-50%) scale(1); }
.stack_layer.is-active .stack_num { color: var(--c); }
.stack_cta { margin-top: var(--_spacing-sizing---element-padding--m); }
@media screen and (max-width: 991px) {
  .stack_grid { grid-template-columns: 1fr; align-content: end; }
  .stack_spacer { display: none; }
  .stack_text { max-width: none; }
  .stack_layer { grid-template-columns: 2rem 1fr auto; grid-template-rows: auto auto; row-gap: .3rem; padding: .6rem 0; }
  .stack_num, .stack_name, .stack_price { grid-row: 1; }
  .stack_price { grid-column: 3; }
  .stack_what { grid-column: 2 / span 2; grid-row: 2; font-size: .66rem; opacity: .8; }
  .stack_name { font-size: 1.1rem; }
  .stack_text p { font-size: .95rem; }
  .hud_readout { display: none; }
}

/* ---- Protocole d'intervention (FAQ) : un relevé numéroté, pas des cartes ---- */
.protocol { margin-bottom: var(--_spacing-sizing---section-padding--medium, 6rem); }
.protocol_head { display: flex; justify-content: center; margin-bottom: var(--_spacing-sizing---element-padding--m); }
.protocol_head .subhead { display: inline-flex; width: auto; }
.protocol_head .subhead_text, .protocol_head .subhead_text .line { white-space: nowrap; }
.protocol_steps { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--color-scheme-1--border); border-bottom: 1px solid var(--color-scheme-1--border); }
.protocol_step { padding: 1.4rem 1.2rem 1.4rem 0; display: grid; gap: .55rem; align-content: start; border-right: 1px solid var(--color-scheme-1--border); margin-right: 1.2rem; }
.protocol_step:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.protocol_num { font-family: var(--_typography---font-styles--mono); font-size: .7rem; letter-spacing: .2em; color: var(--color-scheme-1--taste-secondary); }
.protocol_title { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.protocol_desc { font-size: .9rem; line-height: 1.5; color: var(--_primitives---opacity--white-60); }
@media screen and (max-width: 991px) { .protocol_steps { grid-template-columns: 1fr 1fr; } .protocol_step:nth-child(2) { border-right: 0; } }
@media screen and (max-width: 560px) { .protocol_steps { grid-template-columns: 1fr; } .protocol_step { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--color-scheme-1--border); } .protocol_step:last-child { border-bottom: 0; } }

/* ---- Pile : 5 couches, configurateur par symptome ---- */
.stack_symptoms { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: var(--_spacing-sizing---element-padding--s); }
.stack_symptoms-label { font-family: var(--_typography---font-styles--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); margin-right: .35rem; }
.stack_chip { appearance: none; background: transparent; color: var(--color-scheme-1--text); border: 1px solid var(--color-scheme-1--border); border-radius: 999px; padding: .45rem .85rem; font-family: var(--_typography---font-styles--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.stack_chip:hover { border-color: var(--_primitives---opacity--white-60); }
.stack_chip.is-on { background: var(--color-scheme-1--text); color: var(--_primitives---colors--neutral-darkest); border-color: var(--color-scheme-1--text); }
.stack_layer.is-suggested { color: var(--color-scheme-1--text); }
.stack_layer.is-suggested .stack_num { color: var(--c); }
.stack_layer.is-suggested::after { content: 'conseillé'; position: absolute; right: 0; top: .35rem; font-size: .58rem; letter-spacing: .18em; color: var(--c); }
.stack_layer.is-suggested .stack_price { visibility: hidden; }
.stack_price.is-ticket, .profile_price.is-ticket { font-size: .8rem; font-family: var(--_typography---font-styles--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.profile_price.is-ticket { font-size: .85rem; }
.stack_note { margin-top: .8rem; font-family: var(--_typography---font-styles--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--_primitives---opacity--white-30); }
.stack_list { margin-top: var(--_spacing-sizing---element-padding--s); }
.stack_layer { padding: .7rem 0; }

/* ---- Avis : preuve sociale sur trois colonnes ---- */
.reviews_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.reviews_side { display: grid; gap: var(--_spacing-sizing---element-padding--s); text-align: left; }
.reviews_side.is-left { margin-top: 9rem; }
.reviews_side.is-right { margin-top: 14rem; }
.review.is-result { display: block; border-color: var(--color-scheme-1--taste-secondary); pointer-events: auto; cursor: pointer; transition: background-color .3s; }
.review.is-result:hover { background: rgba(255,255,255,.1); }
.review.is-result .review_who { text-decoration: underline; text-underline-offset: .2em; color: var(--color-scheme-1--taste-secondary); }
.reviews_grid, .reviews_grid a { pointer-events: auto; }
.review_result-num { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; }
.review_result-num span { color: var(--color-scheme-1--taste-secondary); font-size: 1.2rem; margin: 0 .15em; }
.review_result-ctx { margin-top: .5rem; font-size: .85rem; color: var(--_primitives---opacity--white-60); }

@media screen and (max-width: 1199px) { .reviews_grid { grid-template-columns: 1fr; } .reviews_side { margin-top: 0 !important; } .reviews_side.is-left { order: 2; } .reviews_side.is-right { order: 3; } }

/* ---- Accessibilite / robustesse (audit 2026-08-21) ---- */
button.carousel_arrow, button.navbar_sound, button.navbar_menu-button { appearance: none; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
button.navbar_sound { display: flex; align-items: center; gap: .5rem; }
.stack_layer:focus-visible, .stack_chip:focus-visible, .button:focus-visible, a:focus-visible, .faq_question:focus-visible, .carousel_arrow:focus-visible, .navbar_sound:focus-visible, .navbar_menu-button:focus-visible { outline: 2px solid var(--color-scheme-1--taste-secondary, #8b5cf6); outline-offset: 3px; border-radius: .25rem; }
.stack_note { color: var(--_primitives---opacity--white-60); font-size: .7rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* EXCEPTION : la ligne d'avis doit defiler quoi qu'il arrive (demande client).
     Sans ces !important, la regle globale ci-dessus la figeait (duree 0,01 ms) sur un Windows
     ou "animations reduites" est actif — c'est ce que Raphael voyait : un bloc immobile. */
  .reviews_track { animation-duration: var(--dur, 60s) !important; animation-iteration-count: infinite !important; }
}
/* fiche : sous 1100 px le paragraphe passait sous le module 3D */
@media screen and (min-width: 992px) and (max-width: 1100px) { .profile_container .max-width-custom { max-width: 24rem; } }
/* repli sans WebGL/CDN : la page reste lisible */
html[data-fallback="1"] .section { pointer-events: auto; }

/* ecrans peu hauts (<= 900 px) : la pile ne doit pas remonter sous le logo */
@media screen and (min-width: 992px) and (max-height: 900px) {
  .stack_grid { align-items: start; padding-top: 5.5rem; }
  .stack_text h2 { font-size: 2.4rem; }
  .stack_text .margin-bottom.margin-small { margin-bottom: .4rem; }
  .stack_layer { padding: .5rem 0; }
  .stack_list, .stack_symptoms { margin-top: .7rem; }
  .stack_cta { margin-top: .9rem; }
}

/* ---- Mobile (audit 2026-08-21) ---- */
.review { background: rgba(12,11,18,.97); } /* opaque : le module 3D du retour de camera transparaissait derriere les avis */
@media screen and (max-width: 991px) {
  .profile_desc { height: auto !important; } /* 5rem fixes en base : le paragraphe debordait, prix et bouton se posaient dessus */
  .carousel_title-bis-wrapper { opacity: .22; }
  .profile_cta { margin-top: var(--_spacing-sizing---element-padding--s); flex-wrap: wrap; gap: .8rem; }
  .stack_text { padding-top: 1rem; }
  .stack_chip { font-size: .78rem; padding: .6rem .95rem; min-height: 40px; }
  .stack_symptoms-label { font-size: .72rem; }
  .stack_what { font-size: .74rem; }
  .stack_num, .protocol_num, .review_who, .stack_note { font-size: .75rem; }
  .review_result-ctx { font-size: .9rem; }
  .stack_layer { min-height: 48px; }
  .navbar_menu-button, .navbar_sound { min-height: 44px; padding: 0 .6rem; }
  .navbar_menu-button { margin-left: -.6rem; }
  .carousel_arrow { width: 44px !important; height: 44px !important; padding: 6px; }
  .footer_container { display: flex !important; flex-direction: column; align-items: stretch; gap: .6rem; grid-template-columns: none !important; }
  .footer_container .button.is-social { width: 100%; }
  .footer_container .button.is-social, .footer_container .footer_link { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: .6rem 1rem; font-size: .85rem; }
  .footer_link-list { display: flex; justify-content: center; }
  .section.is-last-copy, .section.is-last { min-height: 55svh; } /* 2 ecrans vides avant la boucle : trop long au pouce */
}

@media screen and (max-width: 991px) {
  .carousel_title-bis-wrapper { display: none; } /* les grandes lettres passaient sous le paragraphe de la fiche */
  .hud_left { display: none; } /* les lettres P T _ croisaient les numeros de la pile */
  /* pile compacte : tout doit tenir sous la barre en 844 px */
  .stack_text { padding-top: 0; }
  .stack_text .margin-bottom.margin-small { margin-bottom: .5rem; }
  .stack_text h2 { font-size: 2rem; }
  .stack_text p { font-size: .9rem; line-height: 1.35; }
  .stack_symptoms { gap: .35rem; margin-top: .6rem; }
  .stack_symptoms-label { display: none; }
  .stack_chip { font-size: .7rem; padding: .45rem .7rem; min-height: 36px; }
  .stack_list { margin-top: .6rem; }
  .stack_layer { grid-template-columns: 1.8rem 1fr auto; grid-template-rows: auto; min-height: 44px; padding: .45rem 0; gap: .6rem; align-items: center; }
  .stack_what { display: none; }
  .stack_layer.is-active .stack_what, .stack_layer.is-suggested .stack_what { display: block; grid-column: 2 / span 2; font-size: .7rem; opacity: .85; }
  .stack_name { font-size: 1.1rem; }
  .stack_price { font-size: 1rem; }
  .stack_note { margin-top: .5rem; font-size: .66rem; }
  .stack_cta { margin-top: .7rem; }
  .stack_cta .button { padding: .75rem 1rem; font-size: .8rem; }
}

/* ---- Header : logo a gauche, pilule de navigation + CTA accole a droite (structure Fauna, palette Pulse) ---- */
.navbar_container { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.navbar_brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
/* logo de marque : le symbole se suffit, pas de pastille coloree derriere */
.navbar_brand-logo { width: 2.4rem; height: 2.4rem; object-fit: contain; display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 55%, transparent)); transition: filter .4s; }
.navbar_brand:hover .navbar_brand-logo { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 85%, transparent)); }
.navbar_menu-logo { width: 5.5rem; height: 5.5rem; object-fit: contain; display: block; margin: 0 auto .8rem; }
.navbar_brand .navbar_logo-text { text-align: left; font-size: 1.35rem; }
.navbar_brand .navbar_logo-text small { letter-spacing: .34em; }
.navpill { display: flex; align-items: center; gap: 1.4rem; padding: .3rem .3rem .3rem 1.1rem; border: 1px solid var(--color-scheme-1--border); border-radius: 999px; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto; }

.navpill_link { font-size: .85rem; letter-spacing: .01em; color: var(--_primitives---opacity--white-60); text-decoration: none; transition: color .3s; white-space: nowrap; }
.navpill_link:hover { color: var(--color-scheme-1--text); }
.navpill_link.is-current { color: var(--color-scheme-1--taste-secondary); }
.navpill_cta.button.is-small { border-radius: 999px; padding: .8rem 1.2rem; margin-left: .2rem; box-shadow: none; }
.navbar_sound-wrapper.is-mobile { display: none; }
@media screen and (min-width: 992px) { .navbar_menu-wrapper { display: none; } }
@media screen and (max-width: 991px) {
  /* Le panneau du menu fait un ecran de haut ; sur les telephones courts ses derniers elements
     (« Ouvrir un ticket », Discord, Charte) tombaient hors cadre sans moyen d'y acceder, car
     rien ne pouvait defiler dedans. Il defile maintenant, et son defilement lui reste : ni la
     page ni le calage tactile ne le recuperent. */
  /* Mesure du 24/08 sur iPhone 15 Pro : `.navbar_menu` porte 860 px de contenu pour 659 px de
     haut, en `overflow-y: hidden` — 201 px etaient clippes sans aucun moyen d'y acceder, dont
     « Ouvrir un ticket », Discord et Charte. `!important` parce que la valeur vient de
     l'animation d'ouverture, posee en style INLINE, qui bat une regle ordinaire. */
  .navbar_menu { overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; scrollbar-width: none; }
  .navbar_menu::-webkit-scrollbar { width: 0; height: 0; }
  .navpill { display: none; }
  .navbar_sound-wrapper.is-mobile { display: flex; flex: 0 0 auto; margin-right: 1.1rem; }
  .navbar_menu-wrapper { flex: 0 0 auto; }
  .navbar_brand { flex: 1; }
}

/* ---- Section Methode : bento (structure Fauna Robotics, palette Pulse) ---- */
.bento_container { position: fixed; inset: 0; display: flex; align-items: center; }
.bento_container > .padding-global { width: 100%; }
.bento_head { text-align: center; margin-bottom: 1.6rem; }
.bento_title { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; }
.bento_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; max-width: 66rem; margin: 0 auto; height: min(60vh, 560px); pointer-events: auto; }
.bento_card { position: relative; overflow: hidden; border-radius: 1.25rem; background: rgba(255,255,255,.06); border: 1px solid var(--color-scheme-1--border); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.bento_col { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.bento_card.is-tall { flex: 1.45 1 0; justify-content: flex-start; min-height: 0; }
.bento_card.is-safe { flex: 1 1 0; justify-content: center; min-height: 0; }
.bento_icon { font-size: 1.1rem; line-height: 1; color: var(--_primitives---opacity--white-60); }
.bento_icon.is-color { width: 3.2rem; height: 3.2rem; border-radius: 1rem 1rem 1.6rem 1.6rem; background: var(--color-scheme-1--taste-secondary); color: var(--color-scheme-1--taste-primary); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: .4rem; }
.bento_card-title { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: 1.25rem; line-height: 1.05; letter-spacing: .01em; }
.bento_card-big { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: .95; }
.bento_card-text { font-size: .86rem; line-height: 1.45; color: var(--_primitives---opacity--white-60); max-width: 22rem; }
/* detection : grille de points balayee par un curseur */
.bento_scan { position: relative; width: 100%; flex: 1; min-height: 5rem; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; }
.bento_scan-dot { width: .6rem; height: .6rem; border-radius: .15rem; background: rgba(255,255,255,.14); transition: background-color .3s, transform .3s; }
.bento_scan-dot:nth-child(3n) { border-radius: 50%; }
.bento_scan-cursor { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; border-radius: .6rem; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-scheme-1--taste-secondary) 35%, transparent), transparent); opacity: 0; }
.is-live .bento_scan-cursor { animation: bentoScan 3.2s ease-in-out infinite; opacity: 1; }
@keyframes bentoScan { 0% { left: -22%; } 50% { left: 100%; } 100% { left: -22%; } }
.is-live .bento_scan-dot { animation: bentoDot 3.2s ease-in-out infinite; }
.bento_scan-dot:nth-child(1) { animation-delay: .05s } .bento_scan-dot:nth-child(2) { animation-delay: .25s } .bento_scan-dot:nth-child(3) { animation-delay: .45s } .bento_scan-dot:nth-child(4) { animation-delay: .65s }
.bento_scan-dot:nth-child(5) { animation-delay: .1s } .bento_scan-dot:nth-child(6) { animation-delay: .3s } .bento_scan-dot:nth-child(7) { animation-delay: .5s } .bento_scan-dot:nth-child(8) { animation-delay: .7s }
.bento_scan-dot:nth-child(9) { animation-delay: .15s } .bento_scan-dot:nth-child(10) { animation-delay: .35s } .bento_scan-dot:nth-child(11) { animation-delay: .55s } .bento_scan-dot:nth-child(12) { animation-delay: .75s }
@keyframes bentoDot { 0%, 100% { background: rgba(255,255,255,.14); transform: scale(1); } 18% { background: var(--color-scheme-1--taste-secondary); transform: scale(1.35); } 36% { background: rgba(255,255,255,.14); transform: scale(1); } }
/* couches : cinq barres, la couleur de chacune */
.bento_layers { display: flex; flex-direction: column; gap: .45rem; width: 100%; flex: 1; justify-content: center; padding: .4rem 0; }
.bento_layers span { display: flex; align-items: center; gap: .7rem; min-height: 2.2rem; padding: .45rem .9rem; text-align: left; line-height: 1.25; border-radius: .7rem; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-family: var(--_typography---font-styles--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; transform: translateX(0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bento_layers span i { font-style: normal; color: var(--c); flex: 0 0 1.4rem; }
.bento_layers span { width: 100%; letter-spacing: .06em; text-transform: none; font-size: .76rem; }

/* journal d'intervention */
.bento_card.is-log { align-items: flex-start; text-align: left; justify-content: center; background: rgba(8,8,12,.85); }
.bento_log { font-family: var(--_typography---font-styles--mono); font-size: .74rem; letter-spacing: .04em; line-height: 1.9; color: var(--_primitives---opacity--white-60); width: 100%; }
.bento_log-line { min-height: 1.9em; padding-left: 1.3rem; position: relative; }
.bento_log-line::before { content: '\203a'; position: absolute; left: 0; color: var(--color-scheme-1--taste-secondary); }
.bento_log-line.is-done { color: #fff; }
.bento_log-line.is-done::before { content: '\2713'; }
.bento_pill { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--color-scheme-1--border); font-family: var(--_typography---font-styles--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
/* graphe frametime */
.bento_card.is-graph { justify-content: center; padding: 1.2rem; }
.bento_graph { width: 100%; height: 62%; }
.bento_graph path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.bento_graph-before { stroke: rgba(255,255,255,.35); }
.bento_graph-after { stroke: var(--color-scheme-1--taste-secondary); }
.is-live .bento_graph-before { animation: bentoDraw 1.6s ease-out .9s forwards; }
.is-live .bento_graph-after { animation: bentoDraw 1.4s ease-out 2.3s forwards; }
@keyframes bentoDraw { to { stroke-dashoffset: 0; } }
@media screen and (min-width: 992px) and (max-height: 860px) { .bento_grid { height: 62vh; } .bento_head { margin-bottom: 1rem; } .bento_card { padding: 1rem 1.1rem; gap: .4rem; } .bento_card-text { font-size: .8rem; } .bento_layers { gap: .3rem; padding: .2rem 0; } .bento_layers span { height: 1.85rem; font-size: .66rem; padding: 0 .8rem; } .bento_card-title { font-size: 1.1rem; } }
@media screen and (max-width: 991px) {
  .section.is-bento { min-height: auto; }
  .bento_container { position: relative; inset: auto; display: block; padding: 3rem 0; }
  /* Mosaïque à deux colonnes (référence donnée par Raphael le 24/08). Une seule colonne de
     cartes pleine largeur, c'était six écrans de défilement pour six idées. En colonnes CSS,
     chaque carte fait la hauteur de son contenu et les deux colonnes s'équilibrent toutes
     seules : la page respire et on embrasse trois cartes d'un coup d'œil. */
  .bento_grid { display: block; columns: 2; column-gap: .7rem; height: auto; max-width: none; }
  .bento_col { display: contents; }
  .bento_card {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin: 0 0 .7rem; min-height: 0; height: auto;
    padding: 1.3rem .95rem 1.4rem; border-radius: 1.4rem; gap: .55rem;
  }
  .bento_card.is-tall, .bento_card.is-safe { flex: none; grid-row: auto; grid-column: auto; }
  .bento_card-title { font-size: 1.12rem; }
  .bento_card-big { font-size: 1.6rem; }
  .bento_card-text { font-size: .8rem; line-height: 1.42; }
  .bento_icon { font-size: 1rem; }
  .bento_tags { gap: .3rem; }
  .bento_tags span { font-size: .62rem; padding: .3rem .5rem; }
  .bento_layers { gap: .32rem; padding: .2rem 0; }
  .bento_layers span { font-size: .68rem; padding: .4rem .55rem; gap: .45rem; min-height: 0; letter-spacing: .02em; }
  .bento_layers span i { flex: 0 0 1.1rem; }
  .bento_log { font-size: .66rem; line-height: 1.75; }
  .bento_log-line { padding-left: 1rem; }
  /* la pastille était posée en absolu au bas de la carte, avec interdiction de retourner à la
     ligne : dans une colonne deux fois plus étroite elle sortait du cadre */
  .bento_pill { position: static; transform: none; white-space: normal; margin-top: .7rem;
    font-size: .58rem; line-height: 1.35; padding: .4rem .7rem; letter-spacing: .08em; }
  /* une hauteur en pourcentage n'a pas de sens quand la carte se dimensionne sur son contenu */
  .bento_graph { height: 5.5rem; }
  .bento_card.is-graph { padding: 1.1rem .85rem 1.25rem; }
  .bento_card.is-log { align-items: center; text-align: center; }
  .bento_card.is-log .bento_log { text-align: left; }
  .bento_scan { min-height: 4.5rem; }
}

.bento_tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .3rem 0; }
.bento_tags span { padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--color-scheme-1--border); background: rgba(255,255,255,.05); font-family: var(--_typography---font-styles--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); }
.is-live .bento_tags span { animation: bentoTag 3.6s ease-in-out infinite; }
.bento_tags span:nth-child(2) { animation-delay: .4s } .bento_tags span:nth-child(3) { animation-delay: .8s } .bento_tags span:nth-child(4) { animation-delay: 1.2s } .bento_tags span:nth-child(5) { animation-delay: 1.6s } .bento_tags span:nth-child(6) { animation-delay: 2s }
@keyframes bentoTag { 0%, 100% { color: var(--_primitives---opacity--white-60); border-color: var(--color-scheme-1--border); } 12% { color: #fff; border-color: var(--color-scheme-1--taste-secondary); } 24% { color: var(--_primitives---opacity--white-60); border-color: var(--color-scheme-1--border); } }

/* ---- Methode : 4 points en une section (stepper) ---- */
.benefits_steps { position: relative; min-height: 14rem; }
.benefits_step { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.benefits_step.is-active { position: relative; }
.benefits_progress { display: flex; gap: .4rem; justify-content: center; margin-top: 1.2rem; }
.benefits_progress span { display: block; width: 2.6rem; height: 2px; background: rgba(255,255,255,.16); border-radius: 2px; overflow: hidden; position: relative; }
.benefits_progress span::after { content: ''; position: absolute; inset: 0; background: var(--color-scheme-1--taste-secondary); transform-origin: left; transform: scaleX(inherit); }
.benefits_progress span { transform-origin: left; }
.benefits_nav .benefits_icon-wrapper { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }

/* ---- Methode : rail fixe + panneau de lecture (le module reste au centre, immobile) ---- */
.benefits_nav { display: none !important; }
.method_side { position: fixed; top: 50%; right: var(--_spacing-sizing---page-padding--padding-global); transform: translateY(-50%); width: min(40vw, 33rem); display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; pointer-events: auto; z-index: 3; }
.method_rail { display: flex; flex-direction: column; gap: .55rem; position: relative; padding-left: 1.1rem; }
.method_rail::before { content: ''; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 1px; background: var(--color-scheme-1--border); }
.method_mark { appearance: none; border: 1px solid var(--color-scheme-1--border); background: rgba(12,11,18,.72); color: var(--_primitives---opacity--white-60); border-radius: 999px; padding: .5rem .85rem .5rem .55rem; display: flex; align-items: center; gap: .6rem; cursor: pointer; font: inherit; text-align: left; white-space: nowrap; transition: color .3s, border-color .3s, background-color .3s; position: relative; }
.method_mark::before { content: ''; position: absolute; left: -1.1rem; top: 50%; width: .7rem; height: 1px; background: var(--color-scheme-1--border); }
.method_mark-no { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--_typography---font-styles--mono); font-size: .58rem; letter-spacing: .06em; }
.method_mark-label { font-size: .8rem; }
.method_mark:hover { color: var(--color-scheme-1--text); border-color: var(--_primitives---opacity--white-60); }
.method_mark.is-active { color: var(--color-scheme-1--text); border-color: var(--color-scheme-1--taste-secondary); }
.method_mark.is-active .method_mark-no { background: var(--color-scheme-1--taste-secondary); border-color: var(--color-scheme-1--taste-secondary); color: var(--color-scheme-1--taste-primary); }
.method_panel { position: relative; min-height: 14rem; text-align: left; }
/* tous les textes restent en absolu (aucun reflow au changement) ; seule l'opacite/la position changent */
.method_item { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.method_item.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.method_no { font-family: var(--_typography---font-styles--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); text-decoration: line-through; margin-bottom: .6rem; }
.method_title { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(1.35rem, 1.85vw, 2.05rem); line-height: 1; margin-bottom: .8rem; text-wrap: balance; }
.method_text { font-size: 1.02rem; line-height: 1.55; color: var(--color-scheme-1--text); max-width: 22rem; }
@media screen and (max-width: 1280px) { .method_side { width: min(40vw, 26rem); gap: 1rem; } .method_mark-label { display: none; } .method_mark { padding: .4rem; } }
@media screen and (max-width: 991px) {
  .method_side { position: fixed; top: auto; bottom: 1.2rem; left: var(--_spacing-sizing---page-padding--padding-global); right: var(--_spacing-sizing---page-padding--padding-global); transform: none; width: auto; grid-template-columns: 1fr; gap: .8rem; }
  .method_rail { flex-direction: row; padding-left: 0; justify-content: space-between; }
  .method_rail::before, .method_mark::before { display: none; }
  .method_panel { min-height: 9rem; }
  .method_title { font-size: 1.5rem; }
  .method_text { font-size: .9rem; }
}

/* ---- Avis : une ligne qui defile de gauche a droite, clic = pause 3 s ---- */
.reviews_grid { display: block; }
.reviews_marquee { position: relative; overflow: hidden; margin-top: var(--_spacing-sizing---element-padding--l); padding: .4rem 0; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews_track { display: flex; gap: 1rem; width: max-content; animation: reviewsScroll var(--dur, 60s) linear infinite; will-change: transform; }
.reviews_marquee.is-paused .reviews_track { animation-play-state: paused; }
@keyframes reviewsScroll { from { transform: translateX(calc(-1 * var(--w, 50%))); } to { transform: translateX(0); } }
.reviews_track .review { flex: 0 0 auto; width: 22rem; cursor: pointer; text-align: left; font-size: .92rem; transition: border-color .3s, background-color .3s; }
.reviews_track .review:hover, .reviews_track .review:focus-visible { border-color: var(--_primitives---opacity--white-60); }
.reviews_marquee.is-paused .review { border-color: var(--color-scheme-1--taste-secondary); }
.review.is-new { border-color: var(--color-scheme-1--taste-secondary); box-shadow: 0 0 24px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 45%, transparent); }
@media screen and (max-width: 991px) { .reviews_track .review { width: 17rem; } }

/* ---- Admin + modales ---- */
.navpill_admin, .navbar_link[data-admin-open] { opacity: .55; font-size: .75rem; }
.navpill_admin:hover { opacity: 1; }
button.navpill_link { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; }
.navpill_addreview { color: var(--color-scheme-1--taste-secondary) !important; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: auto; }
.modal[hidden] { display: none; }
.modal_backdrop { position: absolute; inset: 0; background: rgba(4,4,8,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.modal_box { position: relative; width: min(92vw, 30rem); max-height: 90vh; overflow: auto; padding: 1.6rem 1.6rem 1.4rem; border-radius: 1.25rem; background: #0e0d15; border: 1px solid var(--color-scheme-1--border); transform: translateY(12px); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.modal.is-open .modal_backdrop { opacity: 1; }
.modal.is-open .modal_box { transform: none; opacity: 1; }
.modal_close { position: absolute; top: .8rem; right: .9rem; appearance: none; background: transparent; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .7; }
.modal_close:hover { opacity: 1; }
.modal_kicker { font-family: var(--_typography---font-styles--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-scheme-1--taste-secondary); margin-bottom: .4rem; }
.modal_title { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin-bottom: 1rem; }
.modal_form { display: grid; gap: .8rem; }
.modal_label { display: grid; gap: .35rem; font-family: var(--_typography---font-styles--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); }
.modal_input { width: 100%; padding: .75rem .9rem; border-radius: .7rem; border: 1px solid var(--color-scheme-1--border); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.modal_input:focus { outline: 2px solid var(--color-scheme-1--taste-secondary); outline-offset: 2px; }
select.modal_input { appearance: none; }
.modal_submit { justify-self: start; }
.modal_error { color: #ff7a7a; font-size: .85rem; }
.modal_text { font-size: .9rem; line-height: 1.5; color: var(--_primitives---opacity--white-60); margin-bottom: 1rem; }
.modal_actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.modal_export { width: 100%; min-height: 9rem; margin-top: .8rem; padding: .7rem; border-radius: .7rem; border: 1px solid var(--color-scheme-1--border); background: rgba(0,0,0,.5); color: #fff; font-family: var(--_typography---font-styles--mono); font-size: .72rem; }

/* [hidden] doit gagner sur tout display explicite (Code 901 : piege deja paye) */
[hidden] { display: none !important; }
.modal_row { display: grid; grid-template-columns: 1fr auto; gap: .8rem; }
.modal_count { margin: 1rem 0 .8rem; font-size: .85rem; line-height: 1.5; color: var(--_primitives---opacity--white-60); }
.modal_count span { color: var(--color-scheme-1--taste-secondary); font-family: var(--_typography---font-styles--mono); }
.modal_ok { font-family: var(--_typography---font-styles--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-scheme-1--taste-secondary); }
.modal_input, .modal_input:focus { pointer-events: auto; -webkit-user-select: text; user-select: text; }


/* Loader : le logo entre en premier, le wordmark suit */
.loader_img { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.loader_logo { width: clamp(5rem, 11vw, 9rem); height: clamp(5rem, 11vw, 9rem); object-fit: contain; display: block; flex: 0 0 auto; animation: loaderLogo 2.8s ease-in-out infinite; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 60%, transparent)); }
@keyframes loaderLogo { 0%, 100% { transform: scale(.97); opacity: .85; } 50% { transform: scale(1); opacity: 1; } }

/* Avis : la ligne prend toute la largeur de la page */
.reviews_marquee { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.review_tag { display: inline-block; margin-left: .45rem; padding: .12rem .45rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-scheme-1--taste-secondary) 60%, transparent); color: var(--color-scheme-1--taste-secondary); font-size: .72em; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }

/* Panneau admin : logo, etoiles maison, bloc publication */
.modal_head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.modal_logo { width: 3.2rem; height: 3.2rem; object-fit: contain; flex: 0 0 auto; }
.modal_head .modal_title { margin-bottom: 0; }
.stars_field { display: flex; gap: .25rem; }
.star { appearance: none; background: transparent; border: 0; padding: .1rem; font-size: 1.5rem; line-height: 1; cursor: pointer; color: rgba(255,255,255,.22); transition: color .2s, transform .2s; }
.star.is-on { color: var(--color-scheme-1--taste-secondary); }
.star:hover { transform: scale(1.12); }
.modal_details { margin: .2rem 0 1rem; border-top: 1px solid var(--color-scheme-1--border); padding-top: .8rem; }
.modal_details summary { cursor: pointer; font-family: var(--_typography---font-styles--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-scheme-1--taste-secondary); }
.modal_details .modal_form { margin-top: .7rem; }
.bento_logo { width: 3.4rem; height: 3.4rem; object-fit: contain; margin-bottom: .3rem; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 55%, transparent)); }

/* Gestion des avis : liste a cocher */
.rev_list { max-height: 15rem; overflow-y: auto; margin: .7rem 0; border: 1px solid var(--color-scheme-1--border); border-radius: .7rem; }
.rev_row { display: grid; grid-template-columns: auto 7rem 1fr auto; gap: .6rem; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--color-scheme-1--border); font-size: .78rem; cursor: pointer; }
.rev_row:last-child { border-bottom: 0; }
.rev_row:hover { background: rgba(255,255,255,.05); }
.rev_row input { accent-color: var(--color-scheme-1--taste-secondary); width: 1rem; height: 1rem; }
.rev_who { font-family: var(--_typography---font-styles--mono); font-size: .7rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev_txt { color: var(--_primitives---opacity--white-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev_org { font-family: var(--_typography---font-styles--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--_primitives---opacity--white-30); }
[data-delete-reviews][disabled] { opacity: .4; cursor: not-allowed; }

/* la fenetre admin garde la molette pour elle */
.modal_box, .rev_list { overscroll-behavior: contain; }
.modal_formactions { display: flex; gap: .6rem; align-items: center; }
.rev_row { grid-template-columns: auto 6.5rem 1fr auto auto; }
.rev_edit { appearance: none; background: transparent; border: 1px solid var(--color-scheme-1--border); border-radius: 999px; color: var(--_primitives---opacity--white-60); font-family: var(--_typography---font-styles--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .5rem; cursor: pointer; }
.rev_edit:hover { color: #fff; border-color: var(--color-scheme-1--taste-secondary); }
.rev_row.is-editing { background: color-mix(in srgb, var(--color-scheme-1--taste-secondary) 12%, transparent); }

/* Filtre par probleme : tout ce qui n'est pas conseille s'efface */
.stack_list.is-filtered .stack_layer { filter: saturate(.35); transition: filter .35s; }
.stack_list.is-filtered .stack_layer.is-suggested { filter: none; }
.stack_list.is-filtered .stack_layer.is-suggested::before { transform: translateY(-50%) scale(1); }
.stack_layer.is-suggested::after { content: 'conseillé'; font-family: var(--_typography---font-styles--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }

/* ---- Section Avis (autonome, juste avant la FAQ) ---- */
.section.is-reviews { display: flex; align-items: center; }
.reviews_container { width: 100%; pointer-events: auto; }
.reviews_head { text-align: center; margin-bottom: var(--_spacing-sizing---element-padding--l); }
.reviews_head .subhead_wrapper { display: flex; justify-content: center; margin-bottom: .8rem; }
.reviews_head h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .98; }
.reviews_note { max-width: 42rem; margin: var(--_spacing-sizing---element-padding--l) auto 0; text-align: center; font-size: .85rem; line-height: 1.5; color: var(--_primitives---opacity--white-60); }
@media screen and (max-width: 991px) { .section.is-reviews { min-height: auto; padding: 3rem 0; } .reviews_note { padding: 0 1.2rem; } }

/* ================= Détails Pulse (plus rien des ornements de la référence) ================= */
/* Flèches du carrousel : un chevron nu qui glisse, et un filet qui se déploie dans le sens du
   déplacement. Pas de pastille ni de cadre — rien qui puisse faire « bouton par défaut ». */
.carousel_arrow { width: 3.25rem !important; height: 3.25rem !important; display: grid; place-items: center; }
.arrow_mark { position: relative; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: rgba(255, 255, 255, .68); filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .9)); transition: color .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.arrow_mark svg { width: 100%; height: 100%; }
.arrow_mark::after { content: ''; position: absolute; top: 50%; width: 0; height: 1px; background: currentColor; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.carousel_arrow.is-prev .arrow_mark::after { right: 86%; }
.carousel_arrow.is-next .arrow_mark::after { left: 86%; }
.carousel_arrow:hover .arrow_mark, .carousel_arrow:focus-visible .arrow_mark { color: #fff; }
.carousel_arrow:hover .arrow_mark::after, .carousel_arrow:focus-visible .arrow_mark::after { width: 1.15rem; }
.carousel_arrow.is-prev:hover .arrow_mark { transform: translateX(-.28rem); }
.carousel_arrow.is-next:hover .arrow_mark { transform: translateX(.28rem); }
@media (hover: none) { .arrow_mark { color: rgba(255, 255, 255, .82); } }
/* écartées du module central : au repos elles tombaient sur l'arête du produit */
.carousel_nav { max-width: 46vh; }
@media screen and (max-width: 991px) { .carousel_nav { max-width: 74vw; } }

.faq_plus { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; color: var(--color-scheme-1--taste-secondary); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.faq_plus svg { width: 100%; height: 100%; }
.faq_accordion.is-open .faq_plus, .faq_question[aria-expanded="true"] .faq_plus { transform: rotate(45deg); }

/* HUD : lecture de section seule, aucun ornement */
.hud_container { justify-content: flex-end; }
.hud_right { align-items: flex-end; }

/* Fluidité : les flous d'arrière-plan sont recomposés à chaque frame par-dessus le canvas */
.navpill, .navbar_menu, .benefits_icon-wrapper, .method_mark { -webkit-backdrop-filter: none; backdrop-filter: none; }
.navpill { background: rgba(12, 11, 18, .82); }

/* ================= Écran de fin (remplace la boucle infinie de la référence) ================= */
.section.is-end { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.section.is-end > .end_container { flex: 1 1 auto; display: flex; align-items: center; }
.end_footer-slot { flex: 0 0 auto; pointer-events: auto; padding-bottom: 2rem; }
.end_container > .padding-global { width: 100%; }
.end_container { width: 100%; pointer-events: auto; } /* remonte le texte SANS changer la hauteur de section (la timeline se cale dessus) */
.end_logo { width: clamp(4rem, 7vw, 6rem); height: clamp(4rem, 7vw, 6rem); object-fit: contain; margin: 0 auto 1.4rem; display: block; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--color-scheme-1--taste-secondary) 55%, transparent)); }
.end_title { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .95; margin: 0 0 1.2rem; }
.end_text { max-width: 34rem; margin: 0 auto; font-size: 1rem; line-height: 1.55; color: var(--_primitives---opacity--white-60); }
.end_actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 2.2rem; }
.end_top { appearance: none; background: transparent; border: 1px solid var(--color-scheme-1--border); border-radius: 999px; color: var(--_primitives---opacity--white-60); font-family: var(--_typography---font-styles--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .95rem 1.35rem; cursor: pointer; transition: color .3s, border-color .3s; }
.end_top:hover { color: #fff; border-color: var(--color-scheme-1--taste-secondary); }

/* ================= Pied de page Pulse (la référence n'avait qu'une pilule à 3 éléments) ================= */
.pulse_footer { pointer-events: auto; max-width: 68rem; margin: 0 auto; padding: 2.4rem 0 1.2rem; border-top: 1px solid var(--color-scheme-1--border); }
.pulse_footer-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.pulse_footer-brand { display: flex; align-items: flex-start; gap: .9rem; }
.pulse_footer-logo { width: 2.8rem; height: 2.8rem; object-fit: contain; flex: 0 0 auto; }
.pulse_footer-brand .navbar_logo-text { text-align: left; font-size: 1.15rem; }
.pulse_footer-base { margin: .5rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--_primitives---opacity--white-60); max-width: 18rem; }
.pulse_footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pulse_footer-col { display: flex; flex-direction: column; gap: .45rem; }
.pulse_footer-title { font-family: var(--_typography---font-styles--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-scheme-1--taste-secondary); margin-bottom: .3rem; }
.pulse_footer-col a { font-size: .86rem; color: var(--_primitives---opacity--white-60); text-decoration: none; transition: color .25s; }
.pulse_footer-col a:hover { color: #fff; }
.pulse_footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-scheme-1--border); font-family: var(--_typography---font-styles--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--_primitives---opacity--white-30); }
@media screen and (max-width: 991px) {
  .pulse_footer-main { grid-template-columns: 1fr; gap: 1.6rem; }
  .pulse_footer-cols { grid-template-columns: 1fr 1fr; }
  .pulse_footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .end_actions { flex-direction: column; }
  .end_container { transform: none; }
}
.section.is-end .end_footer-slot { text-align: left; }
.section.is-end .pulse_footer-col { align-items: flex-start; }
@media screen and (max-width: 991px) { .section.is-end .end_footer-slot { text-align: center; } .section.is-end .pulse_footer-col { align-items: center; } .pulse_footer-brand { justify-content: center; } .pulse_footer-base { margin-left: auto; margin-right: auto; } }

/* Écran de fin en mobile : la hauteur suit le contenu (sinon le centrage coupe le titre en haut) */
@media screen and (max-width: 991px) {
  /* Mesure sur l iPhone de Raphael (24/08) : 100svh = 635 px, 100lvh = 735 px. Une section en
     svh s arrete donc 100 px trop tot des que la barre de Safari se replie, et on voit du vide
     sous elle. dvh suit la hauteur REELLEMENT visible : plus de vide, quelle que soit la barre. */
  .section.is-end { min-height: 100dvh; height: auto; justify-content: flex-start; padding: 7rem 0 2.5rem; }
  .section.is-end > .end_container { flex: 0 0 auto; display: block; margin-bottom: 3rem; }
  .end_title { font-size: clamp(2rem, 9vw, 2.9rem); }
  .end_text { font-size: .95rem; }
  .end_actions { margin-top: 1.8rem; }
  .pulse_footer { padding-top: 1.8rem; }
  .pulse_footer-cols > .pulse_footer-col:nth-child(3) { grid-column: 1 / -1; }
}
/* ...et l'écran de fin tient dans un écran : au plus bas, le titre reste sous l'en-tête */
@media screen and (max-width: 991px) {
  .section.is-end { padding: 4.5rem 0 1.4rem; }
  .section.is-end > .end_container { margin-bottom: 1.6rem; }
  .end_logo { width: 3.2rem; height: 3.2rem; margin-bottom: .9rem; }
  .end_actions { gap: .7rem; margin-top: 1.4rem; }
  .pulse_footer { padding-top: 1.2rem; padding-bottom: 0; }
  .pulse_footer-main { gap: 1.1rem; }
  .pulse_footer-cols { gap: 1rem; }
  .pulse_footer-bottom { margin-top: 1.2rem; gap: .4rem; }
}
@media screen and (max-width: 991px) { .pulse_footer-brand { flex-direction: column; align-items: center; gap: .5rem; } }

/* ================= Compositeur : deux flous plein écran retirés =================
   Ils étaient recalculés par le compositeur à CHAQUE image présentée (le fond derrière eux
   change en permanence), et n'apportaient rien : mesuré par différence d'images, 4/255 et
   7/255 d'écart maximum, soit zéro pixel visible. Ce coût n'apparaît dans aucune mesure de
   requestAnimationFrame — il ne se voit que sur les images réellement affichées. */
.gradient_overlay { filter: none; }
.gamme_gradient-blur { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Le halo coloré du bas était flouté sur toute la surface de l'écran, à chaque image présentée.
   On le floute maintenant sur seize fois moins de pixels puis on l'agrandit : un flou gaussien
   agrandi donne exactement le même résultat. Mesuré par différence d'images : 2/255 d'écart
   maximum, zéro pixel visible — pour seize fois moins de travail au compositeur. */
.gamme_gradient-wrapper { width: 25%; height: 25%; filter: blur(1.5rem); transform-origin: top left; transform: scale(4); }

/* ================= Socle rendu (2026-08-23) =================
   Le socle du carrousel n'est plus un cylindre procédural mais le socle rendu fourni par Kouro,
   décliné en cinq couleurs (une par opti) et fondu d'une couleur à l'autre dans la scène 3D.
   Deux conséquences côté page :
   - il porte sa propre plaque « PULSE TWEAKS », donc le nom du produit et la barre de progression
     remontent au-dessus de lui : sinon les deux textes se superposent ;
   - le grand halo violet passait par-dessus le canvas et lavait complètement le socle (comparaison
     avec et sans : le socle passe de délavé à noir profond). On le dose au lieu de le retirer. */
@media screen and (min-width: 992px) {
  /* en vh, pas en rem : la scène 3D est cadrée par un champ vertical, donc le socle grandit
     avec la hauteur de la fenêtre. En rem, le nom retombait sur le module sur un écran court. */
  .carousel_title-collection, .carousel_pagination { transform: translateY(-11vh); }
  .carousel_pagination { margin-top: 1rem; }
  .gamme_gradient { opacity: .45; }
}

/* =====================================================================================
   TÉLÉPHONE — mise au propre (2026-08-23)
   Le site est conçu comme un parcours 3D où le texte est posé par-dessus un canvas fixe.
   Sur un écran étroit, texte et objet occupent la même place : titres superposés, phrases
   coupées, blocs illisibles. Sur téléphone on empile, on aère, et on laisse la 3D là où
   elle a de la place.
   ===================================================================================== */
@media screen and (max-width: 991px) {

  /* ---- Fiche produit : le texte descend sous le module, aligné à gauche, lisible ---- */
  .profile_container .padding-section-medium { display: flex; align-items: flex-end; padding-bottom: 6.5rem; }
  .carousel_desc .max-width-custom { max-width: none; text-align: left; }
  .profile_desc p { font-size: 1rem; line-height: 1.5; color: var(--color-scheme-1--text); }
  .profile_cta { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
  .profile_price { font-size: 1.9rem; }
  /* un voile sous le texte : le module passe derrière sans jamais gêner la lecture */
  .profile_container .padding-section-medium::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(to top, var(--color-scheme-1--background) 34%, color-mix(in srgb, var(--color-scheme-1--background) 82%, transparent) 62%, transparent);
    pointer-events: none;
  }
  .profile_container .carousel_desc-collection { position: relative; z-index: 1; }

  /* ---- Méthode : tout s'empile, plus rien en position fixe l'un sur l'autre ---- */
  .benefits_container { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1.6rem; padding: 5.5rem 0 2rem; }
  .benefits_container > .padding-global { flex: 0 0 auto; }
  .benefits_container .padding-section-medium { padding-top: 0; padding-bottom: 0; }
  .benefits_text { text-align: left; }
  .benefits_container h2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1; }
  .method_side { position: static; inset: auto; transform: none; width: auto; display: block;
    padding-left: var(--_spacing-sizing---page-padding--padding-global); padding-right: var(--_spacing-sizing---page-padding--padding-global); }
  .method_rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1.4rem; }
  .method_mark { justify-content: flex-start; }
  .method_mark-label { display: block; font-size: .72rem; line-height: 1.15; text-align: left; } /* la regle 1280px les masquait : ici les pastilles font 176 px, le libelle tient */
  .method_mark { padding: .45rem .7rem .45rem .45rem; gap: .5rem; }
  .method_panel { min-height: 11rem; }
  .method_title { font-size: 1.6rem; }
  .method_text { font-size: .95rem; max-width: none; }

  /* ---- Flèches du carrousel : cible tactile confortable et bien visible ---- */
  .carousel_arrow { width: 3.4rem !important; height: 3.4rem !important; }
  .arrow_mark { width: 1.5rem; height: 1.5rem; color: rgba(255, 255, 255, .9); }

  /* ---- Bento : le titre passait sous l'en-tête ---- */
  .section.is-bento { padding-top: 5rem; }

  /* ---- Titres de section : jamais collés au bord ---- */
  .section h2 { text-wrap: balance; }
}

@media screen and (max-width: 991px) {
  /* ---- Avis : les cartes ne doivent plus être coupées en plein mot ---- */
  .reviews_track .review { width: min(20rem, 78vw); }
  .reviews_marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }

  /* ---- Accès permanent au ticket : la seule action du site, toujours à portée de pouce ---- */
  .cta_mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); pointer-events: none;
    background: linear-gradient(to top, var(--color-scheme-1--background) 55%, transparent);
    opacity: 0; transform: translateY(120%); transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
  .cta_mobile.is-on { opacity: 1; transform: none; }
  .cta_mobile a { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; max-width: 22rem; padding: .95rem 1.2rem; border-radius: 999px;
    background: #fff; color: #0c0b12; font-family: var(--_typography---font-styles--mono); font-size: .78rem;
    letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
}
@media screen and (min-width: 992px) { .cta_mobile { display: none; } }

@media screen and (max-width: 991px) {
  /* Le bouton collant occupe ~4,5 rem en bas : aucun contenu ne doit passer dessous. */
  .argument_container, .stack_container, .full-gamme_container { padding-bottom: 4.5rem; }
  .section.is-bento .bento_container, .section.is-faq, .section.is-reviews { padding-bottom: 4.5rem; }
}

@media screen and (max-width: 991px) {
  /* Le claim était posé bas dans l'écran (mise en page de bureau) : le bouton collant le mangeait. */
  .argument_svg-container { transform: translateY(-15vh); }
}

@media screen and (max-width: 991px) {
  /* Le « packshot » est une image de composition : une diagonale qui ne rentre pas dans un écran
     portrait, et qui ne porte aucun texte. Sur téléphone c'est un écran de défilement pour rien —
     on le sort du parcours. La gamme complète est de toute façon détaillée deux sections plus loin. */
  .section.is-full-gamme { display: none; }
}

/* =====================================================================================
   TÉLÉPHONE — CHANGEMENT DE STRUCTURE (2026-08-23)
   Régler les détails ne suffisait pas : sur un écran étroit, l'architecture elle-même est
   fausse. Le site empile des conteneurs en position fixe au-dessus d'un canvas, sur dix
   sections de 125 % de hauteur — d'où les superpositions et la longueur.
   Sur téléphone : UN héros 3D d'un écran, puis une page qui coule normalement. Les quatre
   sections qui n'existaient que pour la mise en scène 3D (fiche, rail méthode, claim,
   packshot) sortent du parcours : leur contenu est déjà couvert, en mieux, par la liste des
   optis et par le bento. Reste six écrans utiles au lieu de dix.
   ===================================================================================== */
@media screen and (max-width: 991px) {
  /* Le héros restait en position fixe : il couvrait l'écran en permanence et le texte des
     sections suivantes lui passait dessus (titres l'un sur l'autre, vu sur capture). Sur
     téléphone il occupe son écran, puis il s'en va en défilant comme le reste. */
  .section.is-gamme { position: relative; overflow: hidden; }
  .gamme_container { position: absolute; inset: 0; }

  /* Les liens du menu sont de simples ancres : le navigateur pose le haut de la section à
     y = 0, donc SOUS l'en-tête fixe (66 px) — le titre des avis arrivait coupé. */
  .section { scroll-margin-top: 5rem; }

  /* plus de hauteur imposée : chaque bloc fait la taille de son contenu */
  .section { min-height: 0; }
  /* `svh` est la hauteur quand les barres de Safari sont AFFICHEES. Des qu'elles se
     retractent, la zone visible devient plus haute et le bloc suivant apparaissait sous le
     heros. `dvh` suit la hauteur reellement visible : le heros remplit toujours l'ecran. */
  .section.is-gamme { min-height: 100dvh; }
  .section.is-end { min-height: 100dvh; }

  /* les quatre écrans de mise en scène sortent du parcours mobile */
  .section.is-benefits, .section.is-argument, .section.is-full-gamme { display: none; }

  /* la liste des optis rejoint le flux normal (elle était en position fixe) */
  /* Le conteneur de la fiche est en position fixe : il couvre l'écran entier. Sans un blanc
     au-dessus du bloc suivant, celui-ci entrait par le bas alors que la fiche était encore
     pleinement là — les deux textes se sont retrouvés l'un sur l'autre (vu sur capture).
     Un demi-écran de silence laisse la fiche s'en aller avant que le document commence. */
  /* 42svh de blanc avaient ete poses quand la fiche produit se comportait autrement. Mesure du
     24/08 sur iPhone 15 Pro (393x659) : la section « Cinq optis » faisait 1009 px, soit 1,53
     ecran, dont 277 px de ce seul padding — le contenu, lui, ne fait que 718 px. D'ou les deux
     seules positions possibles au defilement : la moitie haute, puis la moitie basse.
     La fiche a fini de s'effacer bien avant (son declencheur se termine a « bottom 45% », soit
     environ 300 px avant le haut de cette section) : ce blanc n'a plus lieu d'etre. */
  /* L'en-tete est fixe et opaque (66 px) : centrer dans l'ecran entier fait passer le surtitre
     dessous. On lui reserve sa hauteur, et le centrage se fait dans ce qui reste. */
  /* box-sizing: border-box, sinon le rembourrage s'AJOUTE au « min-height: 100svh » et la section
     redevient plus haute que l'ecran (716 px mesures pour 659) — c'est ce qui remettait le
     surtitre sous l'en-tete. Avec la bordure comprise, la section fait exactement un ecran. */
  .section.is-stack { box-sizing: border-box; padding: 4.9rem 0 1rem; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; }
  .stack_container { position: relative; inset: auto; pointer-events: auto; }

  /* respirations entre blocs, cohérentes */
  .section.is-bento { padding-top: 3.5rem; }
  .section.is-reviews { padding: 3.5rem 0; }
  .section.is-faq { padding: 1rem 0 4.5rem; }
}

@media screen and (max-width: 991px) {
  /* Le contenu défilait derrière l'en-tête sans fond : les titres traversaient le logo. Un simple
     dégradé ne suffisait pas (le texte restait lisible au travers). Passé le héros, l'en-tête devient
     franchement opaque — c'est aussi ce qui aide à savoir où l'on est. */
  .navbar { transition: background-color .25s, border-color .25s; border-bottom: 1px solid transparent; }
  .navbar.is-solid { background: var(--color-scheme-1--background); border-bottom-color: var(--color-scheme-1--border); }
}

@media screen and (max-width: 991px) {
  /* Les avis étaient un bandeau qui défile tout seul : au pouce, on lit une carte coupée à
     gauche et une autre coupée à droite, jamais une entière. Sur téléphone c'est une liste
     qu'on fait glisser, calée sur la marge de la page, avec accrochage. Les copies qui
     servaient à boucler le défilement n'ont plus de raison d'être. */
  /* Le bandeau defile tout seul ET se fait glisser au doigt. Les deux agissent sur la meme
     grandeur — `scrollLeft` du conteneur — donc ils ne se battent pas : l'animation CSS est
     coupee ici, c'est le JS qui avance (voir initAvisMobile). Un doigt pose met en pause,
     l'automatique reprend 3 s apres qu'on a lache.
     `touch-action: pan-x` dit explicitement a iOS que ce conteneur se manipule a l'horizontale. */
  .reviews_marquee { overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .reviews_marquee::-webkit-scrollbar { width: 0; height: 0; }
  .reviews_track { animation: none !important; transform: none !important; }
}


/* =====================================================================================
   TÉLÉPHONE — LE SYSTÈME SCÉNOGRAPHIQUE (2026-08-23)
   Relevé sur la version téléphone de Ciao Energy, à la mesure : l'objet 3D reste un FOND
   PLEIN CADRE du début à la fin, et les mots vivent dans une bande réservée en bas de
   l'écran — titre à 76 % de la hauteur (32 px, condensé, centré), texte à 85 % (18 px),
   quatre pastilles rondes de 44 px alignées à droite (marge 16, pas 80, centrées à 47 %).
   Une idée par écran. C'est ce système-là qu'on reprend, avec le module à la place
   de la canette : la fiche produit redevient un écran, au lieu d'être retirée.
   ===================================================================================== */
@media screen and (max-width: 991px) {

  /* PLUS D'EFFET DE DEFILEMENT SUR TELEPHONE (decision Raphael, 24/08).
     L'ecran scenographique de la fiche produit — conteneur fixe plein cadre, module en fond,
     bande de texte calee sur Ciao — disparait ici. Ce qu'il portait (nom, description, prix)
     se retrouve, en mieux, dans les sections propres a chaque opti construites juste sous le
     heros. La 3D reste sur le premier ecran, ou elle sert a choisir au pouce ; ensuite la page
     est un document, et rien n'y est fige.
     (Ancien commentaire conserve pour memoire du chemin parcouru.)
     La gamme (1re section) derive toute seule et se parcourt au pouce ou aux fleches ; on
     s'arrete sur l'opti qui interesse, PUIS on descend, et la fiche donne les informations de
     CETTE opti-la. La fiche est donc UN ecran, et le defilement vertical ne change pas de
     produit — c'est le geste horizontal qui choisit.
     (Essai du 24/08 : fiche etiree sur cinq ecrans, une opti par ecran au defilement vertical.
     Ecarte par Raphael — ce n'est pas le fonctionnement du site.) */
  .section.is-profile { display: none; }
  /* le nom du produit est déjà le titre de la bande : le doublon en haut d'écran (une pièce de
     la mise en page de bureau) n'a plus lieu d'être ici */
  .carousel_title-bis-wrapper { display: none; }
  .profile_container { position: fixed; inset: 0; }

  /* la bande du bas appartient aux mots. Un voile la sépare du fond sans le masquer :
     sur Ciao le texte tombe sur la partie sombre de l'objet, ici l'objet est éclairé. */
  .profile_container .padding-section-medium {
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 0 calc(5.2rem + env(safe-area-inset-bottom)); height: 100%;
  }
  .profile_container .padding-section-medium::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    /* le module porte son propre nom en grand : sans un voile franc, les deux mots se
       superposaient et devenaient illisibles */
    background: linear-gradient(to top, rgba(6,5,12,.97) 30%, rgba(6,5,12,.86) 55%, rgba(6,5,12,.4) 78%, transparent);
    pointer-events: none;
  }
  .profile_container .carousel_desc-collection { position: relative; z-index: 1; width: 100%; }
  .profile_container .max-width-custom {
    max-width: none; text-align: center;
    padding-left: var(--_spacing-sizing---page-padding--padding-global);
    padding-right: var(--_spacing-sizing---page-padding--padding-global);
  }

  /* Le nom du produit était masqué sur petit écran par la règle .hide-tablet, qui porte un
     !important : il faut le même poids pour le rendre. C'est lui le titre de l'écran. */
  .profile_container .margin-bottom.margin-large.hide-tablet { display: block !important; margin-bottom: .5rem; }
  /* Remesure du 24/08, sonde identique sur les deux sites : Ciao rend un titre de 31,5 px et
     un texte de 17,5 px. Nous rendions 30,1 et 16,9 — la conversion en rem avait ete faite sur
     une racine de 14,88 px alors qu'elle vaut 14. Ecart mesure : -4,4 % sur le titre, -3,4 %
     sur le texte. Les bonnes valeurs sont donc 2,25 rem et 1,25 rem. */
  .profile_container .heading-style-h2 { font-size: 2.25rem; line-height: .95; }
  /* Mesure du 24/08 : notre bande allait de 60,0 % a 91,4 % (31,4 % de l'ecran) et sa hauteur
     CHANGEAIT d'une opti a l'autre (22,6 % pour FluxTuner, 30,7 % pour ChipsetTuner, dont la
     description tenait sur huit lignes). Chez Ciao elle est constante : 71,2 % -> 95,0 %, soit
     23,8 %, avec quatre lignes de texte. Deux corrections : une description courte propre au
     telephone (4 lignes maxi, tiree du texte existant) et une hauteur RESERVEE, pour que le
     titre et le prix tombent au meme endroit sur les cinq optis. */
  .profile_desc p { font-size: 1.25rem; line-height: 1.34; color: var(--color-scheme-1--text); }
  .profile_container .profile_desc > p:not(.profile_desc-court) { display: none; }
  .profile_container .profile_desc-court { display: block; }
  /* 4 lignes x 1,34 x 1,25 rem = 6,7 rem : la bande garde la meme hauteur meme quand le texte
     est plus court, donc le titre ne remonte pas d'une opti a l'autre.
     Hauteur RESERVEE et non imposee : un texte qui deborderait serait coupe en silence, et une
     coupure silencieuse se lit comme un defaut. La mesure d'apres coup verifie qu'aucune
     description ne depasse. */
  .profile_container .profile_desc { min-height: 6.7rem; height: auto; }
  .profile_cta { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .9rem; }
  .profile_price { font-size: 1.6rem; }
  /* le bouton de l'écran ferait doublon avec le bouton collant, qui fait déjà cette action */
  .profile_cta .button.is-small { display: none; }

  /* ---- le rail : accès direct aux cinq optis, à portée de pouce, côté droit ---- */
  .rail_mobile {
    /* Ciao : quatre pastilles de 44 px, marge droite 16, pas 80, groupe centre a 50,0 %
       (premiere a 35,8 %, derniere a 64,2 %). Nos cinq pastilles au pas de 71 px couvrent
       exactement la meme hauteur (4 x 71 = 284 px = 3 x 80 + 44). Il ne manquait que le
       centrage : nous etions a 47,0 %. */
    position: fixed; right: 1.15rem; top: 50%; transform: translateY(-50%);
    z-index: 45; display: flex; flex-direction: column; gap: 2rem;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  /* Le rail servait l'ecran scenographique de la fiche, retire le 24/08 : il ne
     s'affiche plus. La gamme se parcourt au pouce et aux fleches, et la liste des
     optis donne l'acces direct. */
  .rail_mobile { display: none !important; }
  .rail_mobile button {
    width: 3.15rem; height: 3.15rem; border-radius: 999px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--_primitives---opacity--white-20);
    background: rgba(10, 9, 18, .72);
    color: var(--_primitives---opacity--white-60);
    font-family: var(--_typography---font-styles--mono); font-size: .78rem; letter-spacing: .04em;
    transition: border-color .25s, color .25s, background-color .25s, transform .25s;
  }
  .rail_mobile button.is-active {
    color: #fff; border-color: transparent; transform: scale(1.06);
    background: var(--color-scheme-1--taste-secondary);
  }
}
@media screen and (min-width: 992px) { .rail_mobile { display: none; } }
/* L'ordinateur garde la description complete : c'est le seul endroit du site ou elle vit. */
@media screen and (min-width: 992px) { .profile_desc-court { display: none; } }


/* La gamme se parcourt au pouce, horizontalement, sur toute la largeur de l'ecran. Sans cette
   ligne, un glissement horizontal ample n'est pas consomme par la page et le navigateur le prend
   pour son propre geste de navigation : on quitte le site au lieu de changer d'opti.
   Mesure du 24/08 : au-dela de ~180 px de glisse, le carrousel ne bougeait plus et la page se
   rechargeait. Les listes qui defilent horizontalement a l'interieur (la ligne d'avis) ne sont
   pas concernees, elles ont leur propre conteneur. */
/* ZONES SURES — contrepartie de `viewport-fit=cover` (voir la balise viewport).
   La page peint desormais sous les barres d'iOS : c'est ce qui fait disparaitre le bloc en bas.
   En echange, il faut rendre a la main les marges que le navigateur ne met plus :
   l'en-tete doit descendre sous l'encoche, et le bas de page remonter au-dessus de la barre
   d'accueil. Ailleurs, `env(...)` vaut zero et ces regles ne changent rien. */
@media screen and (max-width: 991px) {
  .navbar { padding-top: env(safe-area-inset-top); }
  .section.is-end { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .section.is-faq { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .opti_page { padding-bottom: calc(2.8rem + env(safe-area-inset-bottom)); }
}

/* Le bloc gris sous la barre de Safari (retour Raphael, iPhone) : la zone que le navigateur
   peint AUTOUR de la page ne suit pas le fond du body — html etait transparent, Safari y
   mettait donc sa couleur systeme, claire. On le lui dit des deux facons. */
:root { color-scheme: dark; }
/* PAS de fond sur html — et c est important.
   Le halo violet du site est un `body::after` en `z-index: -1`. Tant que html n a pas de fond,
   le fond du body remonte au canevas de la page et le pseudo-element reste VISIBLE derriere le
   contenu. Des qu on donne un fond a html, le body peint le sien sur sa propre boite, et
   l element en z-index -1 passe DERRIERE : le halo disparait.
   Mesure du 24/08 : luminosite moyenne de l ecran 44,3 sans fond sur html, 18,2 avec. J avais
   ainsi eteint tout le fond du site en croyant corriger une bande grise — laquelle venait en
   realite de la barre de Safari qui ne se repliait pas (voir syncTouch dans engine.js).
   `color-scheme: dark` suffit a dire au navigateur de peindre sombre autour de la page. */

/* `overscroll-behavior-x` etait pose sur html ET body pour empecher le geste « retour » du
   navigateur pendant la glisse horizontale de la gamme. Mais sur body il couvre TOUTE la page,
   y compris la ligne d'avis qui, elle, doit se faire glisser horizontalement — c'est
   probablement ce qui l'empechait de defiler sur iPhone. On le limite au seul endroit qui en a
   besoin : le heros, ou vit le geste de la gamme. */
.section.is-gamme { overscroll-behavior-x: none; }

/* Retour du 24/08 : « tu as mis des lettres qui forment les mots TIMER, TUNER, PULSE, ça ne sert
   à rien, enlève ça ». Ce sont les grandes lettres dispersées derrière la fiche produit, héritées
   du moteur d'origine. Elles disparaissent partout, y compris sur ordinateur. */
.carousel_title-bis-wrapper { display: none !important; }


/* =====================================================================================
   TELEPHONE — CE QUE SAFARI MANGE EN BAS (retours de Raphael, essai sur iPhone 24/08)
   Sur un vrai iPhone, la barre de navigation de Safari occupe le bas de l'ecran en
   permanence. Mesure sur les gabarits iPhone 14 / 15 Pro (hauteur utile 659-664 px) :
     - la barre de progression de la gamme finissait a 21 px du bord : cachee ;
     - le bouton « Ouvrir un ticket » finissait a 10 px du bord : colle a la barre Safari,
       donc penible a viser et visuellement etouffe.
   env(safe-area-inset-bottom) ne suffit pas : quand la barre de Safari est affichee, cette
   valeur vaut zero. Il faut un degagement pose en dur.
   ===================================================================================== */
@media screen and (max-width: 991px) {
  /* le nom du produit et la barre remontent, comme ils le font deja sur ordinateur (-11vh) */
  .carousel_title-collection, .carousel_pagination { transform: translateY(-7svh); }

  /* le bouton collant se decolle franchement du bas : le lien passe de 10 a ~34 px du bord */
  .cta_mobile { padding: .7rem 1rem calc(2.2rem + env(safe-area-inset-bottom)); }

  /* Sur l'ecran des optis, le bouton collant fait doublon : la section porte deja son propre
     « Ouvrir un ticket ». Le masquer y rend 63 px, ce qui permet de tout voir d'un coup. */
  body.is-optis .cta_mobile { opacity: 0; transform: translateY(120%); pointer-events: none; }

  /* Ce qui reste a gagner pour que la section tienne dans un ecran, sans rien retirer :
     on resserre les respirations et les lignes, on ne coupe aucun contenu. */
  .section.is-stack .stack_head .margin-bottom.margin-small { margin-bottom: .5rem; }
  .section.is-stack .stack_head .margin-bottom.margin-xsmall { margin-bottom: .45rem; }
  .section.is-stack .stack_text p { font-size: .88rem; line-height: 1.35; }
  .section.is-stack .stack_symptoms { margin-top: .5rem; gap: .3rem; }
  .section.is-stack .stack_chip { padding: .38rem .7rem; font-size: .66rem; }
  .section.is-stack .stack_list { margin-top: .5rem; }
  .section.is-stack .stack_layer { min-height: 42px; padding: .38rem 0; }
  .section.is-stack .stack_note { margin-top: .45rem; font-size: .62rem; }
  .section.is-stack .stack_cta { margin-top: .6rem; }
  /* Les 42 px qui manquaient encore n'etaient pas du contenu : c'est le rembourrage vertical
     du conteneur de section (63 px a lui seul, mesure sur iPhone 15 Pro). On le resserre —
     aucun texte, aucune ligne, aucun bouton n'est retire. */
  .section.is-stack .padding-section-medium,
  .section.is-stack .stack_container,
  .section.is-stack .padding-global,
  .section.is-stack .container-large { padding-top: 0; padding-bottom: 0; }
  /* La section etait bien reglee pour centrer, mais son contenu ne pouvait pas l'etre : trois
     conteneurs imbriques portent « height: 100% » et la grille est en « align-content: end »
     (heritage de la mise en page de bureau, ou le bloc se cale en bas). Resultat mesure : le
     texte debordait de 71 px en haut alors qu'il restait 190 px de vide en bas. On rend au bloc
     sa hauteur naturelle, et le centrage de la section fait le reste. */
  .section.is-stack .height-100 { height: auto; }
  .section.is-stack .stack_grid { height: auto; align-content: center; }
}

/* Ecrans courts (iPhone Mini, SE) : il manque une quarantaine de pixels. On les prend sur les
   respirations, jamais sur le contenu — aucune ligne, aucun prix, aucun bouton ne disparait. */
@media screen and (max-width: 991px) and (max-height: 660px) {
  .section.is-stack { padding-top: 4.4rem; }
  .section.is-stack .stack_head .margin-bottom.margin-small { margin-bottom: .35rem; }
  .section.is-stack .stack_head .margin-bottom.margin-xsmall { margin-bottom: .3rem; }
  .section.is-stack .stack_text p { font-size: .82rem; line-height: 1.3; }
  .section.is-stack .stack_symptoms { margin-top: .35rem; }
  .section.is-stack .stack_chip { padding: .3rem .6rem; font-size: .62rem; }
  .section.is-stack .stack_list { margin-top: .35rem; }
  .section.is-stack .stack_layer { min-height: 38px; padding: .28rem 0; }
  .section.is-stack .stack_note { margin-top: .35rem; }
  .section.is-stack .stack_cta { margin-top: .45rem; }
}

/* =====================================================================================
   TELEPHONE — LES SECTIONS PROPRES A CHAQUE OPTI
   Retour Raphael (24/08) : « trop de texte, trop surcharge, personne va lire tout ca ;
   des choses simples, une bonne hierarchie au niveau des textes ». Le premier jet empilait
   quinze elements. Ici tout est CLASSE, sur trois niveaux seulement :
     1. le nom, puis LE RESULTAT — ce qui decide, en grand ;
     2. pour quel probleme — des puces, sans phrase autour ;
     3. le prix et le bouton ; et le detail technique, replie.
   Pas d'image : c'est la taille, la graisse et le blanc qui font la hierarchie.
   ===================================================================================== */
.opti_page { display: none; }
@media screen and (max-width: 991px) {
  /* Le canvas est en `position: fixed` : il couvre l'ecran en permanence. Ce bloc doit donc
     etre OPAQUE et passer devant, sinon la 3D se dessine par-dessus le texte, le prix et le
     bouton (capture iPhone du 24/08). Un fond et un plan suffisent — inutile de toucher au
     canvas, qui sert encore au heros juste au-dessus. */
  .opti_page { display: block; position: relative; z-index: 3;
    background: var(--color-scheme-1--background);
    padding: 3rem var(--_spacing-sizing---page-padding--padding-global) 2.8rem; }
  /* Le canvas 3D est fixe, ce bloc defile et il est opaque : sans transition, son bord superieur
     tranche le module d un trait net — c est le « bloc noir ». L opacite du canvas suit deja la
     couverture du bloc (voir initHeroMobile) ; ce degrade acheve le raccord, pour qu il n y ait
     plus aucune arete visible entre la scene et le document. */
  .opti_page::before { content: ''; position: absolute; left: 0; right: 0; top: -5.5rem;
    height: 5.5rem; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--color-scheme-1--background)); }

  /* --- niveau 1 : qui c'est, et ce que ca change --- */
  .opti_page-tag { font-family: var(--_typography---font-styles--mono); font-size: .78rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--c, #8b5cf6); margin: 0 0 .4rem; }
  .opti_page-nom { font-family: Anton, Impact, sans-serif; font-style: italic; text-transform: uppercase;
    font-size: 2.6rem; line-height: .9; margin: 0; color: var(--color-scheme-1--text); }
  .opti_page-resultat { font-family: Anton, Impact, sans-serif; font-style: italic;
    text-transform: uppercase; font-size: 1.5rem; line-height: 1.02; margin: 1.4rem 0 0;
    color: var(--c, #8b5cf6); }
  .opti_page-texte { font-size: 1.02rem; line-height: 1.45; margin: 1rem 0 0;
    color: var(--color-scheme-1--text); }

  /* le releve : deux chiffres cote a cote, c'est la preuve, elle doit se lire sans lire */
  .opti_page-releve { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }
  .opti_page-releve > div { border: 1px solid var(--color-scheme-1--border); border-radius: .7rem;
    padding: .7rem .8rem; }
  .opti_page-releve > div.is-apres { border-color: var(--c, #8b5cf6); }
  .opti_page-releve span { display: block; font-family: var(--_typography---font-styles--mono);
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--_primitives---opacity--white-60); margin-bottom: .25rem; }
  .opti_page-releve strong { display: block; font-size: .92rem; line-height: 1.25; font-weight: 500;
    color: var(--color-scheme-1--text); }
  .opti_page-releve > div.is-apres strong { color: var(--c, #8b5cf6); }
  .opti_page-cadre { font-family: var(--_typography---font-styles--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--_primitives---opacity--white-60);
    margin: .55rem 0 0; }

  /* --- niveau 2 : pour quel probleme --- */
  .opti_page-syms { list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .opti_page-pour { font-family: var(--_typography---font-styles--mono); font-size: .76rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--_primitives---opacity--white-60);
    margin-right: .2rem; }
  .opti_page-sym { border: 1px solid var(--c, #8b5cf6); border-radius: 999px;
    padding: .38rem .8rem; font-family: var(--_typography---font-styles--mono);
    font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-scheme-1--text); }

  /* --- niveau 3 : le prix, l'action, puis le detail replie --- */
  .opti_page-achat { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; }
  .opti_page-prix { font-family: Anton, Impact, sans-serif; font-style: italic; font-size: 1.7rem;
    color: var(--color-scheme-1--text); flex: 0 0 auto; }
  .opti_page-cta { flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .85rem 1rem; border-radius: 999px; background: #fff; color: #0c0b12;
    font-family: var(--_typography---font-styles--mono); font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; }

  .opti_page-detail { margin-top: 1.5rem; border-top: 1px solid var(--color-scheme-1--border);
    padding-top: .2rem; }
  .opti_page-detail > summary { list-style: none; cursor: pointer; min-height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--_typography---font-styles--mono); font-size: .76rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); }
  .opti_page-detail > summary::-webkit-details-marker { display: none; }
  .opti_page-detail > summary::after { content: '+'; font-size: 1rem; line-height: 1;
    color: var(--c, #8b5cf6); }
  .opti_page-detail[open] > summary::after { content: '\2212'; }
  .opti_page-detail .opti_page-texte { font-size: .95rem; margin-top: .2rem;
    color: var(--_primitives---opacity--white-60); }
  .opti_page-ou { font-family: var(--_typography---font-styles--mono); font-size: .76rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--c, #8b5cf6); margin: .9rem 0 0; }
  .opti_page-points { list-style: none; margin: .7rem 0 .4rem; padding: 0; }
  .opti_page-points li { display: flex; flex-direction: column; gap: .1rem;
    padding: .55rem 0 .55rem 1rem; border-bottom: 1px solid var(--color-scheme-1--border);
    position: relative; }
  .opti_page-points li:last-child { border-bottom: 0; }
  .opti_page-points li::before { content: ''; position: absolute; left: 0; top: .85rem;
    width: .35rem; height: .35rem; border-radius: 50%; background: var(--c, #8b5cf6); }
  .opti_page-pt { font-family: var(--_typography---font-styles--mono); font-size: .76rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-scheme-1--text); }
  .opti_page-pt2 { font-family: var(--_typography---font-styles--mono); font-size: .76rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--_primitives---opacity--white-60); }

  /* le bouton « Detail » de la liste des optis ramene ici */
  .opti_detail-plus { appearance: none; background: transparent; cursor: pointer;
    border: 1px solid var(--_primitives---opacity--white-20); border-radius: 999px;
    min-height: 32px; padding: .25rem .6rem; margin-left: .5rem;
    color: var(--_primitives---opacity--white-60);
    font-family: var(--_typography---font-styles--mono); font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase; grid-row: 1; }
}
@media screen and (min-width: 992px) { .opti_page, .opti_detail-plus { display: none; } }


/* =====================================================================================
   TELEPHONE — CONFORT D'USAGE (audit chiffre du 24/08)
   Trois defauts mesures, corriges ici. Aucun n'est cosmetique : une cible de 32 px se
   rate une fois sur trois au pouce, et un texte a 2,46:1 ne se lit pas au soleil.
   ===================================================================================== */
@media screen and (max-width: 991px) {

  /* ---- 1. toutes les cibles atteignent 44 px ----
     Deux methodes : agrandir quand la place existe (puces, boutons), ou elargir la zone
     tactile par un calque invisible quand agrandir casserait la mise en page (lignes
     denses, pied de page). Le calque ne change aucune hauteur. */
  /* Portee alignee sur la regle des ecrans courts (.section.is-stack .stack_chip), qui est
     plus specifique : sans ca la taille de police restait a 8,7 px. */
  .stack_chip, .section.is-stack .stack_chip { min-height: 44px; padding: .55rem .9rem; font-size: .78rem; }
  .section.is-stack .stack_what { font-size: .78rem; }
  .section.is-stack .stack_note { font-size: .76rem; color: var(--_primitives---opacity--white-60); }
  .stack_cta .button { min-height: 44px; }
  .navbar_brand { min-height: 44px; display: flex; align-items: center; }
  .end_top { min-height: 44px; }

  .opti_detail-plus { position: relative; font-size: .76rem; }
  .opti_detail-plus::after { content: ''; position: absolute; inset: -.6rem -.7rem; }

  /* les liens du pied de page font 18 px de haut : on elargit sans deplacer le texte */
  .pulse_footer-col a, .footer_link { position: relative; }
  .pulse_footer-col a::after, .footer_link::after { content: ''; position: absolute;
    inset: -1.05rem -.6rem; }
  /* le bento : ses etiquettes et son journal descendaient a 9,2 px */
  .bento_layers span, .bento_log-line, .bento_pill, .bento_card-text small { font-size: .78rem; }
  .bento_tags span { font-size: .78rem; padding: .35rem .6rem; }
  .pulse_footer-title { font-size: .78rem; }
  .end_top { font-size: .78rem; }
  /* Les trois glyphes decoratifs (∿, ★, ›) sont a 3,67:1. Ils portent aria-hidden : la regle
     de contraste ne leur applique pas. J ai essaye de les remonter en white-60 — ca les a fait
     TOMBER a 2,51:1, parce qu ils vivent dans une pastille au fond clair, pas sur du noir.
     On les laisse tels quels : mieux vaut ne pas toucher que degrader. */

  /* ---- 2. plus rien sous le plancher de 10,5 px ---- */
  .stack_what { font-size: .78rem; }
  .bento_layers span, .stack_symptoms-label { font-size: .76rem; }
  .pulse_footer-bottom { font-size: .76rem; }
  .stack_note { font-size: .76rem; }

  /* ---- 3. contrastes ----
     Mesure alpha COMPOSEE sur le fond (une couleur a 30 % d'opacite n'est pas sa couleur
     pleine) : le pied de page etait a 2,46:1 pour un seuil de 4,5, les glyphes a 3,67:1. */
  .pulse_footer-bottom, .stack_note, .rev_org { color: var(--_primitives---opacity--white-60); }
  .pulse_footer-base { color: var(--_primitives---opacity--white-60); }
}

/* ---- Fluidité (27/08) : plus aucun backdrop-filter au-dessus du canvas 3D ; un flou de compositeur se repaie à chaque image présentée, hors de toute mesure rAF ---- */
/* ---- « Plus de détails » : le lien vers le guide de l'opti affichée, en bas à gauche de la gamme (27/08) ---- */
.gamme_plus { position: absolute; left: 2.5rem; bottom: 2.4rem; z-index: 6; pointer-events: auto; display: inline-flex; align-items: center; gap: .7rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); color: #fff; text-decoration: none;
  font-family: var(--_typography---font-styles--mono, 'Geistmono', monospace); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(8,8,12,.55); transition: background .3s, color .3s, border-color .3s, transform .35s cubic-bezier(.2,.7,.3,1); }
.gamme_plus:hover, .gamme_plus:focus-visible { background: #fff; color: #000; border-color: #fff; transform: translateY(-2px); }
.gamme_plus i { font-style: normal; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.gamme_plus:hover i { transform: translateX(4px); }
@media screen and (max-width: 991px) {
  .gamme_plus { left: 1.25rem; bottom: 1.5rem; /* sous la barre de progression : a 5.6rem il la chevauchait (capture 393, 27/08) */ padding: .7rem 1.1rem; font-size: .58rem; background: rgba(8,8,12,.55); }
}