/*!
 * Thème par défaut — design system du frontend public.
 * 100 % piloté par les variables de marque (/brand.css : --brand-*, générées par le Brand Studio).
 * Aucune couleur, police ou valeur de marque n'est codée en dur ici : uniquement des jetons
 * neutres (espacements, ombres, durées) et leur application aux composants.
 */

/* ==========================================================================
   1. Jetons de mise en page (neutres, au-dessus de /brand.css)
   ========================================================================== */
:root{
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-md:1.125rem;
  --fs-lg:1.25rem; --fs-xl:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);
  --fs-2xl:clamp(1.75rem,1.35rem + 1.8vw,2.375rem);
  --fs-3xl:clamp(2.1rem,1.5rem + 2.6vw,3.1rem);
  --fs-4xl:clamp(2.5rem,1.6rem + 4vw,4.2rem);
  /* XXL — réservé aux compositions héros/immersives (jamais aux titres de contenu H1/H2 courants,
     pour ne pas nuire à la hiérarchie éditoriale ni au SEO). */
  --fs-5xl:clamp(3rem,1.6rem + 7vw,6.4rem);

  --container-max:var(--brand-content-max,1180px);
  --header-h:76px;
  --header-h-scrolled:64px;

  --ease:cubic-bezier(.22,.8,.28,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:450ms;
  /* Intensité des animations (réglage Brand Studio « animation_intensity »), indépendante du
     prefers-reduced-motion système : un débutant peut calmer les mouvements décoratifs sans
     toucher aux réglages de son appareil. */
  --reveal-distance:18px;

  --ring:0 0 0 3px color-mix(in srgb,var(--brand-accent) 45%,transparent);
  --line:color-mix(in srgb,var(--brand-text) 11%,transparent);
  --line-strong:color-mix(in srgb,var(--brand-text) 22%,transparent);
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--brand-text) 8%,transparent);
  --shadow-md:0 6px 20px -4px color-mix(in srgb,var(--brand-text) 16%,transparent);
  --shadow-lg:0 20px 50px -12px color-mix(in srgb,var(--brand-text) 24%,transparent);

  --radius-card:var(--brand-radius-card,var(--brand-radius));
  --radius-btn:var(--brand-btn-radius,var(--brand-radius));
  --radius-pill:999px;

  --z-header:40; --z-drawer:60; --z-overlay:70; --z-toast:80;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--brand-bg);color:var(--brand-text);font:var(--fs-base)/1.7 var(--brand-font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main{flex:1;min-width:0}
h1,h2,h3,h4,h5{font-family:var(--brand-font-heading);line-height:1.15;color:var(--brand-primary);margin:1.4em 0 .55em;letter-spacing:-.01em;font-weight:700}
h1{font-size:var(--fs-4xl);margin-top:.4em;letter-spacing:-.02em}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{margin:0 0 1em}
a{color:var(--brand-accent);text-underline-offset:.15em}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit}
::selection{background:color-mix(in srgb,var(--brand-accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-toast)}
.skip:focus{left:1rem;top:1rem;background:var(--brand-bg);color:var(--brand-text);padding:.7em 1.1em;border-radius:var(--radius-btn);box-shadow:var(--shadow-md)}

.container{width:min(var(--container-max),100% - 2.5rem);margin-inline:auto}
.container--narrow{width:min(860px,100% - 2.5rem);margin-inline:auto}
.container--wide{width:min(1440px,100% - 2.5rem);margin-inline:auto}
.prose{max-width:750px}
.prose img{border-radius:var(--radius-card)}
.lead{font-size:var(--fs-lg);color:var(--brand-muted);line-height:1.6}
.muted{color:var(--brand-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-accent);margin-bottom:.9em}
.eyebrow::before{content:"";width:1.4em;height:2px;background:currentColor;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ==========================================================================
   3. Boutons, badges, chips
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.5em;border-radius:var(--radius-btn);background:var(--brand-accent);color:var(--brand-on-accent);text-decoration:none;font-weight:600;font-size:var(--fs-sm);border:0;cursor:pointer;font-family:inherit;line-height:1.2;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);white-space:nowrap}
.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline-offset:3px}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-primary{background:var(--brand-accent);color:var(--brand-on-accent)}
.btn-secondary{background:var(--brand-primary);color:var(--brand-on-primary)}
.btn-outline{background:transparent;color:var(--brand-primary);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--brand-primary)}
.btn-ghost{background:transparent;color:inherit;padding-inline:.9em}
.btn-ghost:hover{background:color-mix(in srgb,var(--brand-text) 6%,transparent);box-shadow:none;transform:none}
.btn-sm{padding:.55em 1.05em;font-size:var(--fs-xs)}
.btn-lg{padding:1em 1.9em;font-size:var(--fs-md)}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-icon{padding:.6em;border-radius:var(--radius-pill)}

.badge{display:inline-flex;align-items:center;gap:.35em;padding:.3em .7em;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;background:var(--brand-surface);color:var(--brand-text);line-height:1.4}
.badge-new{background:color-mix(in srgb,var(--brand-accent) 16%,var(--brand-bg));color:var(--brand-accent)}
.badge-featured{background:color-mix(in srgb,var(--brand-primary) 14%,var(--brand-bg));color:var(--brand-primary)}
.badge-b2b{background:var(--brand-primary);color:var(--brand-on-primary)}
.badge-outline{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.card-badges{position:absolute;top:.9rem;left:.9rem;display:flex;flex-direction:column;gap:.4rem;z-index:2}

.chip{display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:var(--radius-pill);background:var(--brand-surface);color:var(--brand-text);font-size:var(--fs-xs);font-weight:600;text-decoration:none;border:0;cursor:pointer;line-height:1.3}
.chip:hover{background:color-mix(in srgb,var(--brand-text) 10%,var(--brand-surface))}
.chip.is-active{background:var(--brand-primary);color:var(--brand-on-primary)}
.chip-remove{border:0;background:none;color:inherit;cursor:pointer;font-size:1.1em;line-height:1;padding:0 0 0 .1em}

/* ==========================================================================
   4. En-tête — direction « premium / centrée / séparateurs fins » (V2)
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--brand-bg);border-bottom:1px solid var(--line);transition:box-shadow var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),backdrop-filter var(--dur-base) var(--ease)}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);background:color-mix(in srgb,var(--brand-bg) 92%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header.is-scrolled{background:var(--brand-bg)}}
html[data-header="minimal"] .site-header{position:absolute;inset-inline:0;background:transparent;border-bottom-color:transparent}
html[data-header="minimal"] .site-header.is-scrolled{position:sticky;border-bottom-color:var(--line)}
html[data-header="minimal"] .site-header:not(.is-scrolled) .nav-link,
html[data-header="minimal"] .site-header:not(.is-scrolled) .nav-sub-toggle,
html[data-header="minimal"] .site-header:not(.is-scrolled) .nav-sep,
html[data-header="minimal"] .site-header:not(.is-scrolled) .logo-word,
html[data-header="minimal"] .site-header:not(.is-scrolled) .header-icon-btn,
html[data-header="minimal"] .site-header:not(.is-scrolled) .header-cta,
html[data-header="minimal"] .site-header:not(.is-scrolled) .nav-toggle{color:#fff}
html[data-header="minimal"] .site-header:not(.is-scrolled) .logo:has(.logo-img--dark) .logo-img--default{display:none}
html[data-header="minimal"] .site-header:not(.is-scrolled) .logo:has(.logo-img--dark) .logo-img--dark{display:block}
html[data-header="minimal"] .site-header:not(.is-scrolled) .logo:not(:has(.logo-img--dark)) .logo-img--default{filter:brightness(0) invert(1)}
html[data-header="bold"] .site-header{background:var(--brand-primary);color:var(--brand-on-primary);border-bottom-color:transparent;backdrop-filter:none}
html[data-header="bold"] .site-header .logo-word,
html[data-header="bold"] .site-header .nav-link,
html[data-header="bold"] .site-header .nav-sub-toggle,
html[data-header="bold"] .site-header .header-icon-btn,
html[data-header="bold"] .site-header .header-cta,
html[data-header="bold"] .site-header .nav-toggle{color:var(--brand-on-primary)}
html[data-header="bold"] .site-header .nav-link:hover{opacity:.8;color:var(--brand-on-primary)}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-h);transition:min-height var(--dur-base) var(--ease)}
.site-header.is-scrolled .header-inner{min-height:var(--header-h-scrolled)}
@media (min-width:760px){.header-inner{display:grid;grid-template-columns:1fr auto 1fr;column-gap:var(--space-5)}}

.logo{display:inline-flex;align-items:center;font-family:var(--brand-font-heading);font-weight:800;font-size:1.2rem;color:var(--brand-primary);text-decoration:none;letter-spacing:-.01em;flex:none;justify-self:start}
.logo-word{white-space:nowrap}
.logo-img{max-height:34px;width:auto;display:block}
.logo-img--dark{display:none}

/* Navigation centrale (desktop uniquement — panneau plein écran dédié en mobile) */
.site-nav{display:none;justify-self:center}
@media (min-width:760px){.site-nav{display:flex;align-items:center;gap:var(--space-4)}}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item--wide{display:none}
.nav-sep{width:1px;height:12px;background:currentColor;opacity:.2;flex:none}
.nav-sep--wide{display:none}
@media (min-width:1120px){.nav-item--wide,.nav-sep--wide{display:flex}}
.nav-link{color:var(--brand-text);text-decoration:none;font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;padding:.6em .1em;position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:.35em;height:1.5px;background:currentColor;transition:right var(--dur-base) var(--ease)}
.nav-link:hover,.nav-link:focus-visible{color:var(--brand-accent)}
.nav-link:hover::after,.nav-link:focus-visible::after{right:0}
.nav-item--dropdown{gap:.15em}
.nav-sub-toggle{background:none;border:0;color:inherit;opacity:.55;cursor:pointer;display:flex;align-items:center;padding:.6em .2em;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.nav-item--dropdown:hover .nav-sub-toggle,.nav-sub-toggle:focus-visible{opacity:1}
.nav-sub-toggle[aria-expanded="true"]{transform:rotate(180deg);opacity:1}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);margin-top:.85rem;min-width:14rem;padding:.5rem 0;background:var(--brand-bg);color:var(--brand-text);border:1px solid var(--line);border-radius:var(--space-2);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base)}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}
.nav-sub a{display:block;padding:.6em 1.2em;font-size:var(--fs-sm);font-weight:500;color:inherit;text-decoration:none;opacity:.75}
.nav-sub a:hover,.nav-sub a:focus-visible{opacity:1;background:color-mix(in srgb,var(--brand-text) 5%,transparent)}
.nav-item--dropdown:hover .nav-sub,.nav-item--dropdown:focus-within .nav-sub,.nav-sub.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* Menus personnalisés (APPARENCE > MENUS) — 3ᵉ niveau : groupe indenté à l'intérieur du même
   panneau .nav-sub plutôt qu'un second panneau flottant (plus simple, plus robuste au clavier). */
.nav-sub-group{padding:.5rem 0;border-top:1px solid var(--line)}
.nav-sub-group:first-child{border-top:0}
.nav-sub-heading,.nav-sub-heading-flat{display:block;padding:.4em 1.2em;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:700;opacity:.55;text-decoration:none;color:inherit}
a.nav-sub-heading:hover,a.nav-sub-heading:focus-visible{opacity:.9}
.nav-sub-sub{display:block;padding:.5em 1.2em .5em 1.8em;font-size:var(--fs-sm);color:inherit;text-decoration:none;opacity:.75}
.nav-sub-sub:hover,.nav-sub-sub:focus-visible{opacity:1;background:color-mix(in srgb,var(--brand-text) 5%,transparent)}

.header-actions{display:flex;align-items:center;gap:var(--space-2);flex:none;justify-self:end}
.header-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);border:0;background:none;color:var(--brand-text);cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.header-icon-btn:hover{background:color-mix(in srgb,var(--brand-text) 8%,transparent)}
.header-icon-btn svg{width:1.35rem;height:1.35rem}
.header-cta{display:none;align-items:center;gap:.3em;color:var(--brand-text);text-decoration:none;font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
@media (min-width:760px){.header-cta{display:inline-flex}}
.header-cta span{transition:transform var(--dur-base) var(--ease)}
.header-cta:hover span{transform:translate(2px,-2px)}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--radius-btn);border:0;background:none;color:inherit;cursor:pointer;flex-direction:column;gap:5px}
@media (min-width:760px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:1.1rem;height:1.5px;background:currentColor}
.nav-toggle span:last-child{width:.7rem;align-self:flex-end}

/* Panneau mobile plein écran — sobre, aéré, sans sur-longueur */
.nav-overlay{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--brand-bg);color:var(--brand-text);opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease);display:flex;flex-direction:column}
.nav-overlay.is-open{opacity:1;visibility:visible}
@media (min-width:760px){.nav-overlay{display:none}}
.nav-overlay-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h-scrolled);border-bottom:1px solid var(--line);flex:none}
.nav-overlay-close{background:none;border:1px solid var(--line-strong);border-radius:50%;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;flex:none}
.nav-panel{display:flex;flex-direction:column;padding-top:var(--space-2);list-style:none;margin:0}
.nav-panel>a{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-lg);font-weight:600;color:inherit;text-decoration:none;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.nav-panel-chevron{opacity:.4;font-size:.85em}
.nav-panel-group{border-bottom:1px solid var(--line);padding:var(--space-1) 0}
.nav-panel-group summary{cursor:pointer;font-size:var(--fs-lg);font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0}
.nav-panel-group summary::-webkit-details-marker{display:none}
.nav-panel-group[open] summary .nav-panel-chevron{transform:rotate(90deg);display:inline-block}
.nav-panel-sub{display:flex;flex-direction:column;padding:0 0 var(--space-3) var(--space-3)}
.nav-panel-sub a{color:var(--brand-muted);text-decoration:none;font-size:var(--fs-base);padding:.6em 0}
.nav-panel-sub a:hover{color:var(--brand-accent)}
/* Menus personnalisés — 3ᵉ niveau mobile : accordéon <details> imbriqué, plus petit, indenté. */
.nav-panel-group--nested{border-bottom:0;padding:0}
.nav-panel-group--nested summary{font-size:var(--fs-base);font-weight:600;padding:.7em 0}
.nav-panel-heading{margin:.4em 0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;opacity:.6;font-weight:700}
.nav-overlay-foot{margin-top:auto;padding:var(--space-5) 0 var(--space-6);border-top:1px solid var(--line)}
.nav-overlay-foot .header-cta{display:inline-flex}

/* Panneau de recherche */
.search-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--brand-text) 45%,transparent);backdrop-filter:blur(2px);z-index:var(--z-overlay);display:flex;align-items:flex-start;justify-content:center;padding:min(14vh,7rem) 1.25rem 1.25rem;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease),visibility var(--dur-base)}
.search-overlay.is-open{opacity:1;visibility:visible}
.search-panel{background:var(--brand-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);width:min(640px,100%);padding:var(--space-5);max-height:75vh;overflow:auto}
.search-form{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--line);padding-bottom:var(--space-4)}
.search-form input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-lg);color:var(--brand-text)}
.search-form input:focus{outline:0}
.search-form svg{width:1.4rem;height:1.4rem;color:var(--brand-muted);flex:none}
.search-close{border:0;background:none;color:var(--brand-muted);cursor:pointer;padding:.3rem}
.search-suggestions{list-style:none;margin:0;padding:var(--space-3) 0 0}
.search-suggestion a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75em .25em;text-decoration:none;color:var(--brand-text);border-radius:var(--space-2)}
.search-suggestion a:hover,.search-suggestion a:focus-visible{background:var(--brand-surface)}
.search-suggestion small{color:var(--brand-muted);font-weight:500;flex:none}
.search-empty{padding:var(--space-4) .25rem;color:var(--brand-muted)}
.search-page-form{max-width:640px;margin:var(--space-5) auto 0;background:var(--brand-bg);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.4rem .4rem .4rem var(--space-5);box-shadow:var(--shadow-sm)}
.search-page-form input{color:var(--brand-text)}
.search-group{margin-top:var(--space-8)}
.search-group h3{margin-bottom:var(--space-4)}

/* ==========================================================================
   5. Héros et sections génériques
   ========================================================================== */
.section{padding:var(--space-9) 0}
.section-tight{padding:var(--space-7) 0}
.section-alt{background:var(--brand-surface)}
/* Alternance claire/sombre de l'accueil (direction V2) : chaque section réellement affichée
   (les sections désactivées ou vides ne comptent pas, puisqu'elles ne sont pas rendues) reçoit
   en alternance un panneau teinté — jamais de couleur de marque codée en dur, uniquement les
   jetons neutres déjà utilisés ailleurs (surface, radius). */
.home-flow>section:nth-of-type(even){background:var(--brand-surface);border-radius:var(--radius-card)}
.section-head{max-width:640px;margin:0 0 var(--space-6)}
.section-head--center{margin-inline:auto;text-align:center}
.section-title{margin:0 0 .35em}
.section-subtitle{color:var(--brand-muted);font-size:var(--fs-md);margin:0}
.section-foot{margin-top:var(--space-6);display:flex;justify-content:center}
.reveal{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

.hero{position:relative;background:var(--brand-surface);padding:clamp(3.5rem,9vw,7.5rem) 0;overflow:hidden}
.hero-grid{display:grid;gap:var(--space-8);align-items:center}
.hero-grid:has(.hero-media){grid-template-columns:1.1fr 1fr}
.hero-eyebrow{margin-bottom:var(--space-3)}
.hero h1{margin-top:0}
.hero-subtitle{font-size:var(--fs-lg);color:var(--brand-muted);max-width:46ch;margin:0 0 var(--space-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-media{position:relative;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hero-img{border-radius:var(--radius-card);margin:var(--space-4) 0 var(--space-6)}
.hero-video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden}
.hero-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 0.8.1-alpha — Slider Studio comme hero principal (Accueil > Sections) : espacements simples
   (préréglages, jamais une valeur libre) et titre compact au-dessus du diaporama, pour qu'il
   puisse démarrer directement sous l'en-tête sans le grand bloc du hero classique. */
.home-hero-slider--before-none{margin-top:0}
.home-hero-slider--before-small{margin-top:var(--space-5)}
.home-hero-slider--before-default{margin-top:var(--space-8)}
.home-hero-slider--before-large{margin-top:var(--space-10)}
.home-hero-slider--after-none{margin-bottom:0}
.home-hero-slider--after-small{margin-bottom:var(--space-5)}
.home-hero-slider--after-default{margin-bottom:var(--space-8)}
.home-hero-slider--after-large{margin-bottom:var(--space-10)}
.home-hero-slider-title{padding:var(--space-5) 0 var(--space-3)}
.home-hero-slider-title h1{margin:0;font-size:var(--fs-2xl);letter-spacing:-.01em}

.hero--dark{background:var(--brand-primary);color:var(--brand-on-primary)}
.hero--dark h1,.hero--dark h2{color:var(--brand-on-primary)}
.hero--dark .hero-subtitle{color:color-mix(in srgb,var(--brand-on-primary) 78%,transparent)}
.hero--dark .btn-outline{color:var(--brand-on-primary);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand-on-primary) 55%,transparent)}
.hero--gradient{background:linear-gradient(135deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 40%,var(--brand-accent)));color:var(--brand-on-primary)}
.hero--gradient h1,.hero--gradient h2{color:var(--brand-on-primary)}
.hero--gradient .hero-subtitle{color:color-mix(in srgb,var(--brand-on-primary) 80%,transparent)}
.hero--minimal{background:var(--brand-bg);padding:clamp(2.5rem,6vw,4.5rem) 0}
.hero--image{color:#fff}
.hero--image .hero-bg{position:absolute;inset:0;z-index:0}
.hero--image .hero-bg img{width:100%;height:100%;object-fit:cover}
.hero--image .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,#000 35%,transparent),color-mix(in srgb,#000 55%,transparent))}
.hero--image .hero-grid{position:relative;z-index:1}
.hero--image h1,.hero--image .hero-subtitle{color:#fff}

/* Luminosité du hero (réglage Brand Studio « hero_brightness ») — s'applique au voile posé sur
   l'image de fond, pour un rendu clair, moyen (par défaut) ou sombre selon la photo choisie. */
html[data-hero-brightness="light"] .hero--image .hero-bg::after,
html[data-hero-brightness="light"] .hero--immersive .hero-bg::after{background:linear-gradient(180deg,color-mix(in srgb,#000 12%,transparent),color-mix(in srgb,#000 30%,transparent))}
html[data-hero-brightness="dark"] .hero--image .hero-bg::after,
html[data-hero-brightness="dark"] .hero--immersive .hero-bg::after{background:linear-gradient(180deg,color-mix(in srgb,#000 48%,transparent),color-mix(in srgb,#000 70%,transparent))}

/* Hero « immersif » (direction V2) : typographie XXL, composition asymétrique, respiration
   verticale généreuse. Toujours retenu par le Brand Studio (hero_style=immersive) — jamais
   codé en dur — et toujours dégradé proprement si aucune image n'est fournie (fond de marque
   + accent, sans jamais afficher de zone vide ou cassée). */
.hero--immersive{min-height:min(88vh,880px);display:flex;align-items:flex-end;padding-bottom:clamp(2.5rem,6vw,5rem);padding-top:clamp(6rem,14vw,9rem);color:#fff;background:linear-gradient(155deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 55%,var(--brand-accent)))}
.hero--immersive:has(.hero-bg){background:#0b0d10}
.hero--immersive .hero-bg{position:absolute;inset:0;z-index:0}
.hero--immersive .hero-bg img{width:100%;height:100%;object-fit:cover}
.hero--immersive .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,#000 20%,transparent) 0%,color-mix(in srgb,#000 35%,transparent) 55%,color-mix(in srgb,#000 62%,transparent) 100%)}
.hero--immersive .container{position:relative;z-index:1}
.hero--immersive .hero-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;align-items:end}
.hero--immersive .hero-grid:has(.hero-media){grid-template-columns:1.5fr 1fr}
.hero--immersive h1{font-size:var(--fs-5xl);line-height:.98;letter-spacing:-.03em;color:#fff;max-width:16ch}
.hero--immersive .hero-subtitle{color:color-mix(in srgb,#fff 80%,transparent);font-size:var(--fs-lg);max-width:42ch}
.hero--immersive .hero-media{align-self:end}
@media (max-width:900px){.hero--immersive{min-height:auto;padding-top:clamp(5rem,20vw,7rem)}.hero--immersive .hero-grid:has(.hero-media){grid-template-columns:1fr}}

@media (max-width:900px){.hero-grid:has(.hero-media){grid-template-columns:1fr}}

/* Chiffres clés */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-6);text-align:center}
.stat-number{font-family:var(--brand-font-heading);font-size:var(--fs-3xl);font-weight:800;color:var(--brand-primary);line-height:1}
.stat-label{margin-top:.5em;color:var(--brand-muted);font-size:var(--fs-sm)}

/* Arguments de marque */
.arguments{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}
.argument{padding:var(--space-5);border-radius:var(--radius-card);background:var(--brand-surface)}
.argument-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--brand-accent) 16%,transparent);color:var(--brand-accent);margin-bottom:var(--space-4)}
.argument-icon svg{width:1.4rem;height:1.4rem}
.argument h3{margin:0 0 .35em;font-size:var(--fs-md)}
.argument p{margin:0;color:var(--brand-muted);font-size:var(--fs-sm)}

/* Collection / gamme, éditorial */
.collection{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center;border-radius:var(--radius-card);overflow:hidden}
.collection-media{aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius-card)}
.collection-media img{width:100%;height:100%;object-fit:cover}
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.editorial--reverse{direction:rtl}
.editorial--reverse>*{direction:ltr}
.editorial-media img{border-radius:var(--radius-card);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:820px){.collection,.editorial{grid-template-columns:1fr}}

.video-section{max-width:920px;margin-inline:auto}

.cta-banner{background:var(--brand-surface);border-radius:var(--radius-card);padding:var(--space-8);text-align:center;position:relative;overflow:hidden}
/* Mise en avant B2B — plus immersive (direction V2) : bloc plus grand, titre XXL, dégradé de
   marque en fond. Reste un simple <div> générique piloté par home.php : rien n'est codé en dur. */
.cta-banner--dark{background:linear-gradient(155deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 55%,var(--brand-accent)));color:var(--brand-on-primary);padding:clamp(var(--space-8),9vw,var(--space-10)) var(--space-6)}
.cta-banner--dark h2{color:var(--brand-on-primary);font-size:var(--fs-3xl);max-width:20ch;margin-inline:auto}
.cta-banner--dark p{color:color-mix(in srgb,var(--brand-on-primary) 82%,transparent)}
.cta-banner--dark .btn-outline{color:var(--brand-on-primary);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand-on-primary) 55%,transparent)}
.cta-banner--dark .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--brand-on-primary)}
.cta-banner p{max-width:60ch;margin-inline:auto}
.cta-banner .hero-actions{justify-content:center;margin-top:var(--space-5)}
.newsletter-form{display:flex;gap:.6rem;max-width:420px;margin:var(--space-5) auto 0;flex-wrap:wrap;justify-content:center}
.newsletter-form input[type="email"]{flex:1;min-width:200px;padding:.8em 1em;border-radius:var(--radius-btn);border:1.5px solid var(--line-strong);font:inherit;background:var(--brand-bg);color:var(--brand-text)}
.newsletter-form input[type="email"]:focus{outline:0;border-color:var(--brand-accent);box-shadow:var(--ring)}

/* ==========================================================================
   6. Grilles, cartes (catégories, produits, articles)
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6);padding:0;list-style:none;margin:0}
.grid--tight{gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid--featured{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid--featured{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid--featured{grid-template-columns:1fr}}

/* Grille de produits dynamique (0.6.2-alpha, voir LiveProductBlocks::renderGrid()) : le nombre de
   colonnes choisi dans l'atelier de pages (2 à 6) est une cible de bureau — pas un réglage par palier
   séparé (choix validé : « responsive automatique par paliers », comme .grid--featured ci-dessus).
   Chaque palier plafonne le nombre de colonnes plutôt que de le réduire pour toutes les tailles, afin
   qu'une grille à 2 colonnes reste à 2 colonnes sur tablette au lieu de forcer un unique palier commun. */
.grid--cols-2{grid-template-columns:repeat(2,1fr)}
.grid--cols-3{grid-template-columns:repeat(3,1fr)}
.grid--cols-4{grid-template-columns:repeat(4,1fr)}
.grid--cols-5{grid-template-columns:repeat(5,1fr)}
.grid--cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1000px){.grid--cols-4,.grid--cols-5,.grid--cols-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.grid--cols-3,.grid--cols-4,.grid--cols-5,.grid--cols-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.grid--cols-2,.grid--cols-3,.grid--cols-4,.grid--cols-5,.grid--cols-6{grid-template-columns:1fr}}

.card{position:relative;background:var(--brand-surface);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.card>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.card-media{position:relative;overflow:hidden;background:var(--brand-bg)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform var(--dur-slow) var(--ease)}
.card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:.4rem;flex:1}
.card h2,.card h3{margin:0;font-size:var(--fs-md);line-height:1.3}
.card a{text-decoration:none;color:inherit}
.card p{margin:0;font-size:var(--fs-sm)}
.card-cta{margin-top:auto;padding-top:.6rem;font-weight:700;font-size:var(--fs-sm);color:var(--brand-accent);display:inline-flex;align-items:center;gap:.3em}
.card-cta svg{width:1em;height:1em;transition:transform var(--dur-base) var(--ease)}
@media (hover:hover){
  .card:hover{box-shadow:var(--shadow-md)}
  .card:hover img{transform:scale(1.04)}
  .card:hover .card-cta svg{transform:translateX(3px)}
}
.card-category{text-align:center}
.card-category .card-body{align-items:center}

.price{font-weight:700;color:var(--brand-primary);font-size:var(--fs-lg);display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.price small{font-weight:500;font-size:var(--fs-xs);color:var(--brand-muted)}
.price-compare{font-weight:500;font-size:var(--fs-sm);color:var(--brand-muted);text-decoration:line-through}
.price-onrequest{font-weight:600;color:var(--brand-muted);font-size:var(--fs-sm)}

.compare-toggle{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-xs);color:var(--brand-muted);cursor:pointer;margin-top:.5rem}
.compare-toggle input{accent-color:var(--brand-accent)}
.card .compare-toggle{padding:0 var(--space-5) var(--space-4)}

.breadcrumb{font-size:var(--fs-xs);color:var(--brand-muted);margin:var(--space-5) 0 0;display:flex;flex-wrap:wrap;gap:.35em;align-items:center}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--brand-accent)}
.breadcrumb .sep{opacity:.6}

.pagination{display:flex;gap:.5rem;margin:var(--space-7) 0;flex-wrap:wrap}
.pagination .btn{min-width:2.6em;padding:.65em;text-align:center}

.empty-state{text-align:center;padding:var(--space-9) var(--space-4);color:var(--brand-muted);background:var(--brand-surface);border-radius:var(--radius-card)}
.empty-state-icon{width:3rem;height:3rem;margin:0 auto var(--space-4);color:var(--brand-muted);opacity:.6}
.empty-state h2,.empty-state h3{color:var(--brand-text);margin-top:0}

/* ==========================================================================
   7. Filtres catalogue &amp; tri
   ========================================================================== */
.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8);align-items:start}
@media (max-width:900px){.catalog-layout{grid-template-columns:1fr}}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap}
.result-count{color:var(--brand-muted);font-size:var(--fs-sm)}
.sort-select{padding:.6em 2.2em .6em 1em;border-radius:var(--radius-btn);border:1px solid var(--line-strong);background:var(--brand-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23888"/></svg>') right 1em center/10px no-repeat;color:var(--brand-text);font:inherit;font-size:var(--fs-sm);appearance:none}
.filter-toggle{display:none}
.filters{position:sticky;top:calc(var(--header-h) + var(--space-4))}
.filter-group{border-bottom:1px solid var(--line);padding:var(--space-4) 0}
.filter-group:first-child{padding-top:0}
.filter-group summary{cursor:pointer;font-weight:700;font-size:var(--fs-sm);list-style:none;display:flex;justify-content:space-between;align-items:center}
.filter-group summary::-webkit-details-marker{display:none}
.filter-group summary::after{content:"+";font-weight:400;color:var(--brand-muted)}
.filter-group[open] summary::after{content:"–"}
.filter-options{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.filter-options label{display:flex;align-items:center;gap:.55em;font-size:var(--fs-sm);cursor:pointer}
.filter-options input{accent-color:var(--brand-accent)}
.active-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-5)}
@media (max-width:900px){
  .filters{position:fixed;inset:0 0 0 auto;width:min(320px,88vw);background:var(--brand-bg);z-index:var(--z-drawer);padding:var(--space-5);overflow:auto;transform:translateX(100%);transition:transform var(--dur-base) var(--ease);top:0}
  .filters.is-open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .filter-toggle{display:inline-flex}
  .filters-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--brand-text) 40%,transparent);z-index:calc(var(--z-drawer) - 1);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease)}
  .filters-backdrop.is-open{opacity:1;visibility:visible}
}

/* ==========================================================================
   8. Fiche produit
   ========================================================================== */
.product{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-9);margin:var(--space-6) 0 var(--space-9)}
.product-gallery{position:sticky;top:calc(var(--header-h) + var(--space-4))}
.gallery-main{border-radius:var(--radius-card);overflow:hidden;background:var(--brand-surface);aspect-ratio:1;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:.6rem;margin-top:var(--space-4);flex-wrap:wrap}
.thumb{width:70px;height:70px;border-radius:var(--space-2);overflow:hidden;border:2px solid transparent;background:var(--brand-surface);cursor:pointer;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{border-color:var(--brand-accent)}
.product-info h1{margin-top:.2em}
.product-meta{color:var(--brand-muted);font-size:var(--fs-sm)}
.product .price{font-size:var(--fs-2xl);margin:.6em 0}
.badges-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.price-disclaimer{margin-top:-.6rem}
.stock-status{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-sm);font-weight:600;margin:.3em 0}
.stock-status::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.stock-ok{color:#1e7d3c}
.stock-warn{color:#8a5a00}
.stock-ko{color:#b3261e}
.gallery-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--brand-muted)}
.gallery-placeholder svg{width:25%;height:25%}

.variant-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--space-4) 0}
.variant-pill{padding:.55em 1.1em;border-radius:var(--radius-pill);border:1.5px solid var(--line-strong);background:var(--brand-bg);color:var(--brand-text);cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:600}
.variant-pill.is-active{border-color:var(--brand-accent);color:var(--brand-accent);background:color-mix(in srgb,var(--brand-accent) 10%,transparent)}

.buy-actions{display:flex;flex-direction:column;gap:.65rem;margin:var(--space-5) 0}
/* white-space:nowrap (hérité de .btn) protège les libellés courts d'un bouton auto-largeur,
   mais un bouton pleine largeur (100%) n'a besoin d'aucune protection : un libellé long
   ("Nous contacter à propos de ce produit") y forçait au contraire un débordement horizontal
   sur mobile (le libellé imposait sa largeur minimale à toute la grille .product — défaut
   réel constaté lors de la QA visuelle 0.5.0-alpha). Corrigé en autorisant le retour à la ligne. */
.buy-actions .btn,.btn-block{width:100%;white-space:normal;text-align:center}

/* Fiche technique (direction V2) : traitement plus « graphique/technique » — filet supérieur
   marqué, libellés en petites capitales espacées, valeurs en chiffres tabulaires. */
.specs{border-collapse:collapse;width:100%;margin:var(--space-6) 0;border-top:2px solid var(--brand-primary)}
.specs th,.specs td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.specs th{font-weight:700;width:38%;color:var(--brand-muted);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.06em}
.specs td{font-variant-numeric:tabular-nums}
.specs tr:nth-child(odd){background:color-mix(in srgb,var(--brand-text) 3%,transparent)}

.product-tabs{margin-top:var(--space-9)}
.product-section{padding:var(--space-7) 0;border-top:1px solid var(--line)}
.product-section:first-child{border-top:0}

@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:var(--space-6)}
  .product-gallery{position:static}
}

.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-8);align-items:start}
@media (max-width:820px){.contact-layout{grid-template-columns:1fr}}

/* Comparateur */
.compare-bar{position:fixed;left:50%;bottom:var(--space-5);transform:translate(-50%,140%);width:min(760px,92vw);background:var(--brand-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--space-4);display:flex;align-items:center;gap:var(--space-4);z-index:var(--z-drawer);transition:transform var(--dur-base) var(--ease);border:1px solid var(--line)}
.compare-bar:not(.is-visible){visibility:hidden;transition:transform var(--dur-base) var(--ease),visibility 0s var(--dur-base)}
.compare-bar.is-visible{transform:translate(-50%,0)}
.compare-bar-items{display:flex;gap:.6rem;flex:1;overflow:auto}
.compare-bar-item{display:flex;align-items:center;gap:.4rem;background:var(--brand-surface);border-radius:var(--space-2);padding:.35rem .6rem;font-size:var(--fs-xs);white-space:nowrap}
.compare-bar-item button{border:0;background:none;cursor:pointer;color:var(--brand-muted);font-size:1em;line-height:1}

.compare-scroll-hint{display:none;align-items:center;gap:.4em;color:var(--brand-muted);font-size:var(--fs-xs);margin:0 0 var(--space-3)}
.compare-scroll-hint svg{width:1em;height:1em;flex:none}
@media (max-width:640px){.compare-scroll-hint{display:flex}}
.compare-table-wrap{overflow-x:auto;margin:var(--space-6) 0}
.compare-table{border-collapse:collapse;width:100%;min-width:560px}
.compare-table th,.compare-table td{padding:.85rem 1rem;border-bottom:1px solid var(--line);text-align:left;font-size:var(--fs-sm);vertical-align:top}
.compare-table thead th{vertical-align:bottom}
.compare-table .compare-head img{border-radius:var(--space-2);aspect-ratio:1;object-fit:cover;width:100%;max-width:140px;margin-bottom:.6rem}
.compare-table .compare-head a:not(.compare-remove){display:inline-block;font-weight:700;color:inherit;text-decoration:none}
.compare-table .compare-head a:not(.compare-remove):hover,.compare-table .compare-head a:not(.compare-remove):focus-visible{text-decoration:underline}
.compare-table tbody th{width:180px;color:var(--brand-muted);font-weight:600;background:color-mix(in srgb,var(--brand-text) 3%,transparent)}
.compare-table td.differs{background:color-mix(in srgb,var(--brand-accent) 8%,transparent);font-weight:600}
.compare-remove{margin-top:.5rem}

/* ==========================================================================
   9. Formulaires, alertes
   ========================================================================== */
.form-grid{display:grid;gap:var(--space-4);max-width:640px}
.form-grid label{display:block;font-weight:600;margin-bottom:.35rem;font-size:var(--fs-sm)}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:.8em .9em;border:1.5px solid var(--line-strong);border-radius:var(--radius-btn);font:inherit;font-size:var(--fs-base);background:var(--brand-bg);color:var(--brand-text);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:0;border-color:var(--brand-accent);box-shadow:var(--ring)}
.form-grid small{color:#b3261e;display:block;margin-top:.3rem;font-size:var(--fs-xs)}
.form-grid .hint{color:var(--brand-muted);font-size:var(--fs-xs);margin-top:.3rem;display:block}
.hp{position:absolute;left:-9999px}
.alert{padding:1em 1.2em;border-radius:var(--radius-btn);background:var(--brand-surface);margin:var(--space-4) 0;font-size:var(--fs-sm);border-left:4px solid var(--brand-accent)}
.alert-error{border-left-color:#b3261e}

/* ==========================================================================
   10. Pied de page
   ========================================================================== */
.site-footer{margin-top:var(--space-10);background:var(--brand-primary);color:var(--brand-on-primary);padding:var(--space-9) 0 var(--space-5);position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-on-primary) 35%,transparent),transparent)}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
/* Trame « architecturale » (V2) : colonnes séparées par des filets fins verticaux plutôt que
   par le seul espacement, pour une lecture plus structurée. */
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-6);padding-bottom:var(--space-7)}
.footer-top>*+*{border-left:1px solid color-mix(in srgb,var(--brand-on-primary) 14%,transparent);padding-left:var(--space-6)}
.footer-brand p{color:color-mix(in srgb,var(--brand-on-primary) 78%,transparent);max-width:34ch}
.footer-brand .logo{color:var(--brand-on-primary);align-items:flex-start}
.footer-brand .logo-img{max-height:32px;margin-bottom:.2rem}
.footer-brand .logo-img--autolight{filter:brightness(0) invert(1)}
.footer-col h3{color:inherit;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--space-4);opacity:.65}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;font-size:var(--fs-sm)}
.footer-col-heading{opacity:.55;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin-top:.4rem}
@media (max-width:900px){.footer-top>*+*{border-left:0;padding-left:0}}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}
.social{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.75rem}
.social a{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--brand-on-primary) 14%,transparent)}
.social svg{width:1.05rem;height:1.05rem}
.footer-bottom{border-top:1px solid color-mix(in srgb,var(--brand-on-primary) 20%,transparent);padding-top:var(--space-5);margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;font-size:var(--fs-xs);opacity:.85}
.footer-legal-links{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.legal{margin-top:var(--space-6);font-size:.85rem;opacity:.8}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}

/* ==========================================================================
   11. Erreurs
   ========================================================================== */
.error-page{text-align:center;padding:var(--space-10) 0}
.error-code{font-size:5rem;font-weight:800;margin:0;color:var(--brand-accent);font-family:var(--brand-font-heading)}
.error-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-5)}
.error-search{max-width:420px;margin:var(--space-6) auto 0;display:flex;flex-wrap:wrap;gap:.5rem}
.error-search input{flex:1 1 200px;min-width:0;padding:.8em 1em;border-radius:var(--radius-btn);border:1.5px solid var(--line-strong);font:inherit;background:var(--brand-bg);color:var(--brand-text)}
.error-search button{flex:1 0 auto}

/* ==========================================================================
   12. Blog magazine
   ========================================================================== */
.featured-post{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-7);align-items:center;background:var(--brand-surface);border-radius:var(--radius-card);overflow:hidden;margin-bottom:var(--space-8);text-decoration:none;color:inherit}
.featured-post-media{aspect-ratio:4/3}
.featured-post-media img{width:100%;height:100%;object-fit:cover}
.featured-post-body{padding:var(--space-6)}
.featured-post-body h2{font-size:var(--fs-3xl);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color var(--dur-base) var(--ease)}
.featured-post:hover .featured-post-body h2,.featured-post:focus-visible .featured-post-body h2{text-decoration-color:currentColor}
@media (max-width:820px){.featured-post{grid-template-columns:1fr}}

.blog-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--space-8);align-items:start}
.blog-layout--full{grid-template-columns:1fr}
@media (max-width:900px){.blog-layout{grid-template-columns:1fr}}
.blog-sidebar section{margin-bottom:var(--space-6)}
.blog-sidebar h3{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--brand-muted);margin-bottom:.8em}
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}

.post-hero{max-width:820px;margin:0 auto var(--space-6)}
.post-meta{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;color:var(--brand-muted);font-size:var(--fs-sm)}
.post-meta .dot{opacity:.6}
.author{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--brand-text)}
.author-avatar{width:1.8em;height:1.8em;border-radius:50%;background:var(--brand-surface);display:inline-flex;align-items:center;justify-content:center;font-size:.8em;font-weight:700;color:var(--brand-primary)}
.article-layout{display:grid;grid-template-columns:220px 1fr;gap:var(--space-8);align-items:start}
.article-layout--full{grid-template-columns:1fr}
@media (max-width:980px){.article-layout{grid-template-columns:1fr}}
.toc{position:sticky;top:calc(var(--header-h) + var(--space-4));font-size:var(--fs-sm)}
.toc-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--brand-muted);margin-bottom:.8em;font-weight:700}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;border-left:2px solid var(--line)}
.toc a{display:block;padding-left:1rem;color:var(--brand-muted);text-decoration:none}
.toc a.is-active,.toc a:hover{color:var(--brand-accent);border-left:2px solid var(--brand-accent);margin-left:-2px;padding-left:calc(1rem - 2px)}
.toc li.lvl-3 a{padding-left:1.75rem}
@media (max-width:980px){.toc{display:none}}

/* ==========================================================================
   13. Divers utilitaires
   ========================================================================== */
.back-to-top{position:fixed;right:var(--space-5);bottom:var(--space-5);width:2.9rem;height:2.9rem;border-radius:50%;background:var(--brand-primary);color:var(--brand-on-primary);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base);z-index:var(--z-header)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top svg{width:1.3rem;height:1.3rem}

/* ==========================================================================
   14. Blocs de contenu (éditeur de l'administration)
   ========================================================================== */
.blk{margin:1.8rem 0}
.blk-image img,.blk-gallery img{border-radius:var(--radius-card);display:block}
.blk figcaption,.blk-image figcaption{font-size:.9rem;color:var(--brand-muted);margin-top:.5rem}
.blk-gallery ul{list-style:none;padding:0;margin:0;display:grid;gap:.8rem;grid-template-columns:repeat(var(--cols,3),1fr)}
.blk-cols-2 ul{--cols:2}.blk-cols-3 ul{--cols:3}.blk-cols-4 ul{--cols:4}
/* Repli responsive par paliers (0.6.2-alpha) — ajouté rétroactivement pour que la galerie de
   l'éditeur classique se comporte comme les nouvelles grilles dynamiques (.grid--cols-*, ci-dessus) :
   même principe de plafond par palier plutôt qu'un réglage séparé par point de rupture. */
@media (max-width:680px){.blk-cols-3 ul,.blk-cols-4 ul{--cols:2}}
@media (max-width:420px){.blk-cols-2 ul,.blk-cols-3 ul,.blk-cols-4 ul{--cols:1}}
.blk-gallery img{aspect-ratio:1;object-fit:cover;width:100%}
.blk-video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:#000}
.blk-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-quote{border-left:4px solid var(--brand-accent);padding:.4rem 0 .4rem 1.2rem;font-size:1.15rem}
.blk-quote footer{font-size:.9rem;color:var(--brand-muted)}
.blk-align-center{text-align:center}.blk-align-right{text-align:right}
.blk-table{overflow-x:auto}
.blk-table table{border-collapse:collapse;width:100%}
.blk-table th,.blk-table td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--line)}
.blk-table caption{caption-side:bottom;font-size:.9rem;color:var(--brand-muted);padding-top:.5rem}
.blk-separator{border:0;border-top:1px solid var(--line-strong)}
.blk-space{height:2.5rem}
.blk-faq{border-radius:var(--radius-card);overflow:hidden}
.blk-faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.blk-faq summary{cursor:pointer;font-weight:600;color:var(--brand-primary);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.blk-faq summary::-webkit-details-marker{display:none}
.blk-faq summary::after{content:"+";color:var(--brand-muted);font-weight:400}
.blk-faq details[open] summary::after{content:"–"}
.blk-faq-answer p{margin:.6rem 0 0}

/* ==========================================================================
   14 bis. Générateur de pages visuel (sections, 0.6.0-alpha)
   Classes produites par PageBuilder::render() (core/src/Content/PageBuilder.php) — le contenu de
   chaque colonne reste des .blk-* ci-dessus, rendus par Blocks::render() sans aucun changement.
   ========================================================================== */
.pb-section{position:relative}
.pb-section--contained{width:min(var(--container-max),100% - 2.5rem);margin-inline:auto}
/* « Pleine largeur » : seul le FOND déborde jusqu'au bord de l'écran (quel que soit le gabarit et
   sa propre largeur de colonne) ; le contenu reste centré et plafonné par .pb-section-inner ci-dessous. */
.pb-section--full{margin-inline:calc(50% - 50vw);padding-inline:2.5rem}
@media (max-width:640px){.pb-section--full{padding-inline:1.25rem}}

.pb-bg-none{background:transparent}
.pb-bg-surface{background:var(--brand-surface)}
.pb-bg-primary{background:var(--brand-primary);color:var(--brand-on-primary)}
.pb-bg-dark{background:#12151a;color:#f2f3f5}
.pb-bg-image{background:var(--brand-surface);color:#fff}
/* Fonds de couleur ou de photo : les jetons neutres utilisés par les blocs (texte atténué, traits de
   séparation) s'adaptent à la couleur du texte de la section plutôt que de garder leur valeur globale,
   potentiellement illisible une fois la section teintée (ex. FAQ ou tableau sur un fond de marque). */
.pb-bg-primary,.pb-bg-dark,.pb-bg-image{
  --brand-muted:color-mix(in srgb, currentColor 65%, transparent);
  --line:color-mix(in srgb, currentColor 20%, transparent);
  --line-strong:color-mix(in srgb, currentColor 32%, transparent);
}
.pb-bg-primary h1,.pb-bg-primary h2,.pb-bg-primary h3,.pb-bg-primary h4,.pb-bg-primary h5,
.pb-bg-dark h1,.pb-bg-dark h2,.pb-bg-dark h3,.pb-bg-dark h4,.pb-bg-dark h5,
.pb-bg-image h1,.pb-bg-image h2,.pb-bg-image h3,.pb-bg-image h4,.pb-bg-image h5,
.pb-bg-primary .blk-faq summary,.pb-bg-dark .blk-faq summary,.pb-bg-image .blk-faq summary{color:inherit}
.pb-bg-primary a:not(.btn),.pb-bg-dark a:not(.btn),.pb-bg-image a:not(.btn){color:inherit;text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
/* Boutons secondaire/contour d'un bloc « Bouton » (Blocks::render) : ces deux styles peignent
   fond OU texte avec --brand-primary, exactement le jeton que pb-bg-primary utilise comme fond de
   section — un bouton y devient alors invisible (texte ou fond de la même couleur que le fond).
   À l'intérieur d'une section teintée, ils basculent donc sur un contour utilisant la couleur de
   texte déjà choisie pour rester lisible (currentColor), quel que soit le fond réellement en cause
   (marque, sombre ou image) ; le bouton plein (accent) n'a pas ce risque et reste inchangé. */
.pb-bg-primary .btn-secondary,.pb-bg-dark .btn-secondary,.pb-bg-image .btn-secondary,
.pb-bg-primary .btn-outline,.pb-bg-dark .btn-outline,.pb-bg-image .btn-outline{
  background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;
}
.pb-bg-primary .btn-outline:hover,.pb-bg-dark .btn-outline:hover,.pb-bg-image .btn-outline:hover,
.pb-bg-primary .btn-secondary:hover,.pb-bg-dark .btn-secondary:hover,.pb-bg-image .btn-secondary:hover{
  background:color-mix(in srgb, currentColor 12%, transparent);
}

.pb-section-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.pb-section-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Voile de lisibilité derrière le texte, quelle que soit l'image choisie — jamais de style inline
   (retiré par HtmlSanitizer), donc géré entièrement ici plutôt que par PageBuilder::render(). */
.pb-bg-image::after{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in srgb, var(--brand-text) 45%, transparent);pointer-events:none}
.pb-section>.pb-row,.pb-section>.pb-section-inner{position:relative;z-index:2}

.pb-space-sm{padding-block:var(--space-5)}
.pb-space-md{padding-block:var(--space-7)}
.pb-space-lg{padding-block:var(--space-8)}
.pb-space-xl{padding-block:var(--space-9)}

.pb-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5)}
.pb-row+.pb-row{margin-top:var(--space-5)}
.pb-col{min-width:0}
.pb-col-1{grid-column:span 1}.pb-col-2{grid-column:span 2}.pb-col-3{grid-column:span 3}
.pb-col-4{grid-column:span 4}.pb-col-5{grid-column:span 5}.pb-col-6{grid-column:span 6}
.pb-col-7{grid-column:span 7}.pb-col-8{grid-column:span 8}.pb-col-9{grid-column:span 9}
.pb-col-10{grid-column:span 10}.pb-col-11{grid-column:span 11}.pb-col-12{grid-column:span 12}
@media (max-width:760px){
  .pb-row{grid-template-columns:1fr;gap:var(--space-4)}
  .pb-col-1,.pb-col-2,.pb-col-3,.pb-col-4,.pb-col-5,.pb-col-6,.pb-col-7,.pb-col-8,.pb-col-9,.pb-col-10,.pb-col-11,.pb-col-12{grid-column:1 / -1}
}

/* ==========================================================================
   15. Responsive — ajustements globaux
   ========================================================================== */
@media (max-width:760px){
  .product{grid-template-columns:1fr}
}

/* ==========================================================================
   16. Accessibilité
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* Intensité des animations choisie dans le Brand Studio (indépendante du réglage système
   ci-dessus) : un débutant peut calmer ou couper les animations décoratives de son site sans
   toucher aux réglages de son appareil. « none » retire le même ensemble de mouvements que
   prefers-reduced-motion ; « subtle » réduit simplement leur amplitude. */
html[data-motion="subtle"]{--reveal-distance:8px;--dur-slow:250ms}
html[data-motion="none"]{scroll-behavior:auto}
html[data-motion="none"] *{animation:none!important;transition:none!important}
html[data-motion="none"] .reveal{opacity:1!important;transform:none!important}
/* ==========================================================================
   Règles partagées catalogue (cartes, badges, filtres, comparateur) — 0.9.0
   ========================================================================== */
.faq-answer p{margin:.6rem 0 0;color:var(--brand-muted)}
.card-stock{margin:0;font-size:var(--fs-xs);font-weight:600}
.card-stock.stock-ok{color:#1e7d3c}.card-stock.stock-warn{color:#8a5a00}.card-stock.stock-ko{color:#b3261e}
.badge-promo{background:#b3261e;color:#fff}
.badge-manual{background:var(--brand-primary);color:var(--brand-on-primary)}
.badge-out{background:var(--brand-surface);color:#8f1d16}
.badge-preorder,.badge-soon,.badge-eol{background:color-mix(in srgb,#8a5a00 14%,var(--brand-bg));color:#6b4600}
.filter-swatch{width:1rem;height:1rem;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px var(--line-strong);flex:none}
.filter-group--flat{padding-top:0}
.filter-switch{display:flex;align-items:center;gap:.55em;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.filter-price{display:flex;gap:.5rem;align-items:flex-end;margin-top:var(--space-3)}
.filter-price label{display:flex;flex-direction:column;gap:.2rem;font-size:var(--fs-xs);flex:1;min-width:0}
.filter-price input{width:100%;padding:.5em .6em;border-radius:var(--radius-btn);border:1px solid var(--line-strong);font:inherit;background:var(--brand-bg);color:var(--brand-text)}
.compare-group th{text-align:left;background:var(--brand-surface);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
.brand-logo img{width:auto;max-height:64px}
/* ==========================================================================
   Fiche produit — direction 0.9.0-alpha.3 « stable et premium » (.pdp)
   Uniquement des jetons dérivés du Brand Studio : aucune identité codée en dur.
   Principes : défilement naturel (seule la navigation de fiche reste en haut de l'écran) ;
   un héros qui vend ; un bloc commercial net ; des valeurs plus visibles que leurs libellés ;
   des fonds qui structurent sans former de blocs massifs.
   ========================================================================== */
.pdp{
  /* Couleurs */
  --pdp-ink:var(--brand-text);
  --pdp-soft:color-mix(in srgb,var(--brand-text) 68%,var(--brand-bg));
  --pdp-faint:color-mix(in srgb,var(--brand-text) 50%,var(--brand-bg));
  --pdp-border:color-mix(in srgb,var(--brand-text) 9%,transparent);
  --pdp-border-strong:color-mix(in srgb,var(--brand-text) 16%,transparent);
  --pdp-stage:color-mix(in srgb,var(--brand-text) 3.5%,var(--brand-bg));
  --pdp-section-tint:color-mix(in srgb,var(--brand-surface) 60%,var(--brand-bg));
  --pdp-card:var(--brand-bg);
  --pdp-accent:var(--brand-accent);
  --pdp-accent-soft:color-mix(in srgb,var(--brand-accent) 10%,var(--brand-bg));
  --pdp-ok:#1a7f3c;--pdp-warn:#8a5a00;--pdp-ko:#b3261e;
  /* Formes */
  --pdp-radius:min(var(--radius-card),16px);
  --pdp-radius-sm:calc(var(--pdp-radius) * .7);
  --pdp-shadow-card:0 1px 2px color-mix(in srgb,var(--brand-text) 5%,transparent),0 8px 24px -18px color-mix(in srgb,var(--brand-text) 30%,transparent);
  --pdp-shadow-hover:0 1px 2px color-mix(in srgb,var(--brand-text) 6%,transparent),0 16px 32px -20px color-mix(in srgb,var(--brand-text) 40%,transparent);
  /* Rythme et typographie */
  --pdp-sec-y:clamp(2.25rem,1.75rem + 1.9vw,3.25rem);
  --pdp-h1:clamp(2rem,1.45rem + 1.7vw,2.65rem);
  --pdp-h2:clamp(1.4rem,1.2rem + .75vw,1.8rem);
  --pdp-nav-h:3rem;
  --pdp-stick:calc(var(--header-h-scrolled,64px) + var(--pdp-nav-h));
  color:var(--pdp-ink)}
.pdp [hidden]{display:none!important}
.pdp a:not(.btn){color:inherit}
body:has(.pdp) .site-footer{margin-top:0}
/* En-tête et navigation de fiche forment un bloc opaque : aucun contenu ne transparaît entre les deux (Firefox sans flou compris) */
body:has(.pdp-tabs) .site-header.is-scrolled{background:var(--brand-bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* --- En-tête : fil d'Ariane, avis d'arrêt --- */
.pdp-crumbs{margin:var(--space-4) 0 var(--space-5);font-size:var(--fs-xs);color:var(--pdp-faint);display:flex;flex-wrap:wrap;gap:.45em;align-items:center}
.pdp-crumbs a{text-decoration:none;color:var(--pdp-soft)}.pdp-crumbs a:hover{color:var(--pdp-ink);text-decoration:underline}
.pdp-crumbs .sep{opacity:.5}
.pdp-notice{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--pdp-radius);background:color-mix(in srgb,var(--pdp-ko) 7%,var(--brand-bg));border:1px solid color-mix(in srgb,var(--pdp-ko) 25%,transparent)}
.pdp-top{padding-bottom:clamp(2rem,1.5rem + 2vw,3rem)}

/* --- Héros (0.9.0-alpha.5) : galerie seule à gauche ~55 % · informations ~45 %, défilement naturel.
   Sur ordinateur, avec des photos détourées, la scène s'allonge (jusqu'à +30 %) pour suivre une colonne
   d'informations plus haute au lieu de laisser un vide sous l'image ; la photo garde sa taille,
   centrée. Rien n'est collant. --- */
.pdp-hero{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(1.75rem,1rem + 1.5vw,2.25rem) clamp(2rem,1rem + 3.5vw,4.5rem);align-items:start}
.pdp-gallery{min-width:0;--pdp-thumb:4.5rem;--pdp-thumb-col:0px}
.pdp-gallery--multi{--pdp-thumb-col:calc(var(--pdp-thumb) + .85rem)}
.pdp-stage{position:relative;aspect-ratio:1/1;border-radius:var(--pdp-radius);background:var(--pdp-stage);overflow:hidden}
.pdp-stage--empty{display:grid;place-items:center;color:var(--pdp-faint)}.pdp-stage--empty svg{width:22%}
.pdp-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.pdp-track::-webkit-scrollbar{display:none}
.pdp-track:focus-visible{box-shadow:inset var(--ring)}
.pdp-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
/* Jamais agrandie au-delà de sa taille réelle : une petite image reste nette, centrée sur fond sobre */
.pdp-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pdp-slide.is-solid img{mix-blend-mode:normal}
@media (min-width:1024px){.pdp-gallery--tall .pdp-slide.is-cover img{width:100%;height:100%;max-width:none;object-fit:cover;mix-blend-mode:normal}}
.pdp-slide video{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--pdp-radius) - 6px);background:#000}
.pdp-nav{position:absolute;top:50%;translate:0 -50%;width:2.5rem;height:2.5rem;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--brand-bg) 92%,transparent);color:var(--pdp-ink);box-shadow:0 0 0 1px var(--pdp-border),0 2px 6px -2px color-mix(in srgb,var(--brand-text) 20%,transparent);cursor:pointer;opacity:0;transition:opacity var(--dur-base) var(--ease),background-color var(--dur-fast)}
.pdp-nav svg{width:1.05rem;height:1.05rem}
.pdp-prev{left:var(--space-4)}.pdp-next{right:var(--space-4)}
.pdp-stage:hover .pdp-nav,.pdp-nav:focus-visible{opacity:1}
.pdp-nav:hover{background:var(--brand-bg)}
.pdp-nav:focus-visible,.pdp-zoom:focus-visible,.pdp-thumb:focus-visible{outline:none;box-shadow:var(--ring)}
.pdp-zoom{position:absolute;right:var(--space-4);bottom:var(--space-4);width:2.25rem;height:2.25rem;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--brand-bg) 92%,transparent);color:var(--pdp-soft);box-shadow:0 0 0 1px var(--pdp-border);cursor:zoom-in;opacity:.8;transition:opacity var(--dur-fast),color var(--dur-fast)}
.pdp-zoom svg{width:.95rem;height:.95rem}.pdp-zoom:hover,.pdp-stage:hover .pdp-zoom{opacity:1;color:var(--pdp-ink)}
.pdp-counter{position:absolute;left:50%;bottom:var(--space-4);translate:-50% 0;margin:0;padding:.2em .7em;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--brand-bg) 92%,transparent);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--pdp-soft);display:none}
.pdp-counter-sep{margin:0 .25em;opacity:.5}
.pdp-thumbs{display:flex;gap:.6rem;margin-top:.75rem;overflow-x:auto;scrollbar-width:none;padding:3px}
.pdp-thumbs::-webkit-scrollbar{display:none}
/* Vignettes : 72 px, sélection nette (anneau détaché), survol discret */
.pdp-thumb{position:relative;flex:0 0 var(--pdp-thumb);aspect-ratio:1;padding:.35rem;border:0;border-radius:var(--pdp-radius-sm);background:var(--pdp-stage);cursor:pointer;box-shadow:inset 0 0 0 1px var(--pdp-border);transition:box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast);opacity:.72}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;border-radius:calc(var(--pdp-radius-sm) * .6)}
.pdp-thumb:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--pdp-border-strong)}
.pdp-thumb[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--brand-bg),0 0 0 3.5px var(--pdp-ink)}
.pdp-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pdp-play svg{width:1.9rem;height:1.9rem;padding:.4rem;border-radius:50%;background:color-mix(in srgb,var(--brand-bg) 94%,transparent);color:var(--pdp-ink);box-shadow:0 1px 4px color-mix(in srgb,var(--brand-text) 22%,transparent)}
@media (min-width:1024px){
  .pdp-gallery--multi{display:grid;grid-template-columns:var(--pdp-thumb) minmax(0,1fr);gap:.85rem;align-items:start}
  .pdp-gallery--multi .pdp-thumbs{order:-1;flex-direction:column;margin:0;padding:3px;overflow:visible}
  .pdp-gallery--multi .pdp-thumb{flex-basis:auto;width:var(--pdp-thumb)}
  /* Scène allongée : seulement si toutes les photos sont détourées / sur fond clair (détecté par le
     script) — une photo à fond coloré garderait sinon des bandes au-dessus et au-dessous. */
  .pdp-hero>.pdp-gallery--tall{align-self:stretch;container-type:inline-size}
  .pdp-gallery--tall>.pdp-stage{align-self:stretch;aspect-ratio:auto;height:100%;min-height:calc(100cqi - var(--pdp-thumb-col));max-height:calc((100cqi - var(--pdp-thumb-col)) * 1.3)}
}
.pdp-lightbox{width:min(96vw,1200px);max-height:94vh;padding:0;border:0;border-radius:var(--pdp-radius);background:var(--brand-bg);box-shadow:var(--shadow-lg)}
.pdp-lightbox::backdrop{background:color-mix(in srgb,#000 72%,transparent)}
.pdp-lightbox[open]{display:grid;place-items:center}
.pdp-lightbox img{max-width:100%;max-height:90vh;object-fit:contain;padding:var(--space-6)}
.pdp-lightbox .pdp-nav{opacity:1}
.pdp-lightbox-close{position:absolute;top:var(--space-3);right:var(--space-3);width:2.5rem;height:2.5rem;display:grid;place-items:center;border:0;border-radius:50%;background:var(--pdp-stage);color:var(--pdp-ink);cursor:pointer;z-index:1}
.pdp-lightbox-close svg{width:1.1rem;height:1.1rem}

/* --- Informations : identité, bénéfices, bloc commercial, repères --- */
.pdp-info{min-width:0;display:flex;flex-direction:column;gap:1.5rem}
.pdp-heading{display:flex;flex-direction:column}
/* Marque · badge : une ligne compacte, au plus près du titre */
.pdp-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;margin-bottom:.7rem;font-size:.75rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase}
.pdp-brand{margin:0;font-size:inherit;font-weight:700;color:var(--pdp-accent)}
.pdp-brand a{text-decoration:none}.pdp-brand a:hover{text-decoration:underline;text-underline-offset:.2em}
.pdp-kicker .badge{padding:0;border-radius:0;background:none;box-shadow:none;font-size:inherit;font-weight:650;letter-spacing:inherit;color:var(--pdp-soft)}
.pdp-kicker>*+.badge::before{content:"";width:.22rem;height:.22rem;margin-right:.6rem;border-radius:50%;background:var(--pdp-border-strong)}
.pdp-title{margin:0;font-size:var(--pdp-h1);line-height:1.06;font-weight:700;letter-spacing:-.032em;color:var(--pdp-ink);text-wrap:balance}
.pdp-title--long{font-size:clamp(1.7rem,1.35rem + 1vw,2.15rem);line-height:1.1;letter-spacing:-.026em}
.pdp-title--xlong{font-size:clamp(1.5rem,1.25rem + .7vw,1.8rem);line-height:1.15;letter-spacing:-.02em}
.pdp-rating{display:inline-flex;align-self:flex-start;align-items:center;gap:.5rem;min-height:2rem;margin-top:.6rem;font-size:var(--fs-sm);text-decoration:none}
.pdp-rating-value{font-weight:700}
.pdp-rating-count{color:var(--pdp-soft);text-decoration:underline;text-decoration-color:var(--pdp-border-strong);text-underline-offset:.22em}
.pdp-rating:hover .pdp-rating-count{color:var(--pdp-ink);text-decoration-color:currentColor}
.stars{position:relative;display:inline-block;font-size:.95em;letter-spacing:.06em;line-height:1;color:color-mix(in srgb,var(--brand-text) 16%,transparent);white-space:nowrap}
.stars-on{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#e5a100}
.pdp-lead{margin:.8rem 0 0;font-size:var(--fs-md);line-height:1.55;color:var(--pdp-soft);max-width:44ch;text-wrap:pretty}
.pdp-lead--long{font-size:var(--fs-base);line-height:1.6;max-width:52ch}

/* Bénéfices : points forts du produit (4 au plus), pictogramme fin dans une pastille d'accent */
.pdp-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.25rem}
.pdp-benefits--1{grid-template-columns:1fr}
.pdp-benefits--3.pdp-benefits--short{grid-template-columns:repeat(3,minmax(0,1fr))}
.pdp-benefits li{display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.7rem;align-items:center;min-width:0}
.pdp-benefit-icon{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:calc(var(--pdp-radius-sm) * .8);background:var(--pdp-accent-soft);color:var(--pdp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-accent) 14%,transparent)}
.pdp-benefit-icon svg{width:1.1rem;height:1.1rem}
.pdp-benefit-text{font-size:var(--fs-sm);font-weight:550;line-height:1.35;color:var(--pdp-ink);text-wrap:pretty}

/* Bloc commercial : une seule surface teintée (comme la scène de la galerie), sans bordure ni ombre ;
   prix → disponibilité → options → action principale → accompagnement en liens discrets. */
.pdp-buy{display:flex;flex-direction:column;gap:1.1rem;padding:clamp(1.2rem,1rem + .6vw,1.5rem);border-radius:var(--pdp-radius);background:var(--pdp-stage)}
.pdp-price .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;margin:0}
.price-from{font-size:var(--fs-sm);color:var(--pdp-soft);font-weight:500;align-self:center}
.price-now{font-size:clamp(2rem,1.6rem + 1vw,2.4rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.price-tax{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--pdp-faint)}
.pdp .price-compare{font-size:var(--fs-sm);color:var(--pdp-faint);text-decoration:line-through;font-variant-numeric:tabular-nums}
.pdp .price .badge{align-self:center;font-size:.72rem}
.price-onrequest{font-size:clamp(1.5rem,1.3rem + .6vw,1.85rem);font-weight:700;letter-spacing:-.02em;color:var(--pdp-ink)}
.pdp-subprice{margin:.45rem 0 0;font-size:var(--fs-xs);color:var(--pdp-soft)}
.pdp-promo-end{color:var(--pdp-ko);font-weight:600}
.pdp .stock-status{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem;margin:.7rem 0 0;padding:0;font-size:var(--fs-sm);font-weight:650;background:none}
.pdp .stock-status::before{width:.5rem;height:.5rem;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)}
.pdp .stock-status small{font-size:inherit;font-weight:500;color:var(--pdp-soft)}
.pdp .stock-ok{color:var(--pdp-ok)}.pdp .stock-warn{color:var(--pdp-warn)}.pdp .stock-ko{color:var(--pdp-ko)}
.pdp-variants{display:grid;gap:1rem;padding-top:1.1rem;border-top:1px solid var(--pdp-border-strong)}
.pdp-axis{border:0;margin:0;padding:0;min-width:0}
.pdp-axis legend{display:flex;gap:.5rem;padding:0;margin-bottom:.55rem;font-size:var(--fs-sm);font-weight:650}
.pdp-axis-value{font-weight:500;color:var(--pdp-soft)}
.pdp-options{display:flex;flex-wrap:wrap;gap:.5rem}
.pdp-option{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:3.5rem;min-height:2.75rem;padding:.5rem 1rem;border-radius:calc(var(--radius-btn) * .8 + 2px);border:1px solid var(--pdp-border-strong);background:var(--pdp-card);font-size:var(--fs-sm);font-weight:550;cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background-color var(--dur-fast);user-select:none}
.pdp-option:hover{border-color:var(--pdp-ink)}
input:checked+.pdp-option{border-color:var(--pdp-ink);box-shadow:inset 0 0 0 1px var(--pdp-ink);background:var(--pdp-stage)}
input:focus-visible+.pdp-option{outline:none;box-shadow:var(--ring)}
.pdp-option.is-unavailable{color:var(--pdp-faint);border-style:dashed;background:transparent}
.pdp-option.is-unavailable .pdp-option-label{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
.pdp-swatch{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--swatch,#ccc);box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 15%,transparent)}
.pdp-variant-links{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.pdp-actions{display:flex;flex-direction:column;gap:.75rem}
.pdp-variants+.pdp-actions{padding-top:.1rem}
.pdp-actions-main{display:flex;flex-wrap:wrap;gap:.6rem}
.pdp-cta{flex:1 1 14rem;min-height:3.25rem;padding:.9em 1.6em;font-size:var(--fs-base);font-weight:650;letter-spacing:.005em;box-shadow:none;transition:background-color var(--dur-fast),box-shadow var(--dur-fast)}
.pdp-cta:hover{transform:none;background:color-mix(in srgb,var(--brand-accent) 88%,var(--brand-text));box-shadow:0 6px 18px -10px color-mix(in srgb,var(--brand-accent) 80%,transparent)}
.pdp-cta-secondary{flex:0 1 auto;min-height:3.25rem;padding:.85em 1.3em}
.pdp-assist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pdp-assist-link{display:flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.1rem 0;font-size:var(--fs-xs);text-decoration:none}
.pdp-assist-link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.35rem}
.pdp-assist-text{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35rem;line-height:1.35}
.pdp-assist-link:hover .pdp-assist-label{text-decoration:underline;text-underline-offset:.22em}
.pdp-assist-kick{color:var(--pdp-faint)}
.pdp-assist-label{font-size:var(--fs-sm);font-weight:600;color:var(--pdp-ink)}
.pdp-assist-link>svg{flex:none;width:.8rem;height:.8rem;color:var(--pdp-faint);transition:translate var(--dur-fast)}
.pdp-assist-link:hover>svg{translate:2px 0;color:var(--pdp-ink)}
.pdp-external-note{margin:0;font-size:var(--fs-xs);color:var(--pdp-faint)}

/* Référence · garantie · documentation : une ligne discrète après le bloc commercial */
.pdp-facts{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;list-style:none;margin:-.6rem 0 0;padding:0 .15rem;font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-facts li{display:inline-flex;align-items:center;gap:.75rem}
.pdp-facts li+li::before{content:"";width:.2rem;height:.2rem;border-radius:50%;background:var(--pdp-border-strong)}
@media (max-width:680px){.pdp-facts{column-gap:1.1rem}.pdp-facts li+li::before{display:none}}
.pdp-facts-sku{font-weight:600;color:var(--pdp-soft);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pdp-facts a{color:var(--pdp-soft);text-decoration:underline;text-decoration-color:var(--pdp-border-strong);text-underline-offset:.2em}
.pdp-facts a:hover{text-decoration-color:currentColor}

/* --- Navigation de fiche : fine, discrète, seul élément qui reste en haut --- */
.pdp-tabs{position:sticky;top:var(--header-h-scrolled,64px);z-index:20;background:var(--brand-bg);border-bottom:1px solid var(--pdp-border)}
.pdp-tabs-list{display:flex;gap:clamp(1.25rem,2.5vw,2.25rem);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.pdp-tabs-list::-webkit-scrollbar{display:none}
.pdp-tabs-list li{flex:none}
.pdp-tabs-list a{position:relative;display:inline-flex;align-items:center;gap:.35rem;height:var(--pdp-nav-h);font-size:var(--fs-sm);font-weight:550;color:var(--pdp-soft);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast)}
.pdp-tabs-list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--pdp-ink);transform:scaleX(0);transition:transform var(--dur-base) var(--ease)}
.pdp-tabs-list a:hover{color:var(--pdp-ink)}
.pdp-tabs-list a[aria-current]{color:var(--pdp-ink)}
.pdp-tabs-list a[aria-current]::after{transform:scaleX(1)}
.pdp-tabs-list a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.35rem}
.pdp-tabs-count{font-size:.75rem;font-weight:600;color:var(--pdp-faint);font-variant-numeric:tabular-nums}

/* --- Sections : titre en tête, fonds alternés discrets --- */
.pdp-sec{padding-block:var(--pdp-sec-y);scroll-margin-top:calc(var(--pdp-stick) - 1px)}
.pdp-sec--tint{background:var(--pdp-section-tint)}
.pdp-sec--compact{padding-block:calc(var(--pdp-sec-y) * .72)}
.pdp-sec--compact .pdp-sec-head{margin-bottom:.8rem}
.pdp-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1.5rem;margin-bottom:clamp(1.1rem,.9rem + .6vw,1.5rem)}
.pdp-h2{margin:0;font-size:var(--pdp-h2);line-height:1.15;font-weight:700;letter-spacing:-.025em;color:var(--pdp-ink)}
.pdp-sec-meta{margin:0;font-size:var(--fs-sm);color:var(--pdp-soft)}
.pdp-sec-meta a{display:inline-flex;align-items:center;min-height:2.5rem;font-weight:600;color:var(--pdp-ink);text-decoration:underline;text-decoration-color:var(--pdp-border-strong);text-underline-offset:.22em}
.pdp-sec-meta a:hover{text-decoration-color:currentColor}

/* Présentation : colonne de lecture, première phrase en chapeau, images à la largeur du texte */
.pdp-prose{max-width:48rem;font-size:var(--fs-base);line-height:1.72;color:var(--pdp-soft)}
.pdp-prose>:first-child{margin-top:0}.pdp-prose>:last-child{margin-bottom:0}
.pdp-prose>h2:first-child+p,.pdp-prose>p:first-child{font-size:var(--fs-md);line-height:1.65;color:var(--pdp-ink)}
.pdp-prose h2,.pdp-prose h3,.pdp-prose h4{color:var(--pdp-ink);font-weight:700;letter-spacing:-.018em;line-height:1.25}
.pdp-prose h2{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);margin:1.7em 0 .45em}
.pdp-prose h3{font-size:var(--fs-md);margin:1.5em 0 .4em}
.pdp-prose p{margin:0 0 .95em;text-wrap:pretty}
.pdp-prose strong{color:var(--pdp-ink);font-weight:650}
.pdp-prose a{color:var(--pdp-ink);text-decoration-color:var(--pdp-border-strong);text-underline-offset:.2em}
.pdp-prose figure,.pdp-prose .blk-image{margin:1.5em 0}
.pdp-prose img{display:block;width:100%;height:auto;border-radius:var(--pdp-radius);background:var(--pdp-stage)}
.pdp-prose figcaption{margin-top:.6em;font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-prose .blk-list,.pdp-prose>ul{list-style:none;padding:0;margin:1em 0 1.2em;display:grid;gap:.55rem}
.pdp-prose .blk-list li,.pdp-prose>ul li{position:relative;margin:0;padding-left:1.7rem;line-height:1.55}
.pdp-prose .blk-list li::before,.pdp-prose>ul li::before{content:"";position:absolute;left:.3rem;top:.32em;width:.36rem;height:.68rem;border:solid var(--pdp-accent);border-width:0 2px 2px 0;rotate:45deg}
.pdp-prose ol{padding-left:1.3em}
.pdp-prose .blk-quote{margin:1.5em 0;padding:.15em 0 .15em 1.2rem;border-left:3px solid var(--pdp-accent);font-size:var(--fs-lg);line-height:1.5;color:var(--pdp-ink)}
.pdp-prose .blk-quote p{margin:0}.pdp-prose .blk-quote footer{margin-top:.5em;font-size:var(--fs-sm);color:var(--pdp-faint)}
.pdp-prose .blk-gallery ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.75rem;list-style:none;padding:0;margin:0}
.pdp-prose .blk-gallery li{padding:0}.pdp-prose .blk-gallery li::before{display:none}

/* Caractéristiques : groupes en cartes, valeur au premier plan, libellé discret */
.pdp-specs{columns:2 22rem;column-gap:1rem}
.pdp-specs--single{columns:1;max-width:52rem}
.pdp-spec-group:not(:has(.pdp-spec-head)) dl{margin-top:-1px}
/* Groupe : en-tête identifié (pictogramme dans une pastille d'accent, titre), puis lignes à filet fin
   où la valeur passe avant le libellé ; le premier filet sépare l'en-tête des valeurs. */
.pdp-spec-group{break-inside:avoid;margin:0 0 1rem;border-radius:var(--pdp-radius);background:var(--pdp-card);border:1px solid var(--pdp-border);box-shadow:0 1px 2px color-mix(in srgb,var(--brand-text) 4%,transparent);overflow:hidden}
.pdp-spec-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.2rem .7rem}
.pdp-spec-icon{flex:none;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:calc(var(--pdp-radius-sm) * .8);background:var(--pdp-accent-soft);color:var(--pdp-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-accent) 14%,transparent)}
.pdp-spec-icon svg{width:1.05rem;height:1.05rem}
.pdp-spec-head h3{margin:0;font-size:var(--fs-base);font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--pdp-ink)}
.pdp-spec-group dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0 1.2rem .3rem}
.pdp-spec-group dl div{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:.8rem 1.25rem .75rem 0;border-top:1px solid var(--pdp-border)}
.pdp-spec-group dl div.is-wide{grid-column:1/-1}
/* Fonctions du produit (0.9.0-alpha.6) : pastilles sobres sous l'en-tête du groupe */
.pdp-spec-chips{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:.85rem 1.2rem 1.1rem;border-top:1px solid var(--pdp-border)}
.pdp-spec-chips li{padding:.3rem .75rem;border-radius:var(--radius-pill);background:var(--pdp-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-accent) 14%,transparent);font-size:var(--fs-sm);font-weight:600;color:var(--pdp-ink)}
.pdp-spec-group dt{order:2;font-size:var(--fs-xs);line-height:1.35;color:var(--pdp-faint)}
.pdp-spec-group dd{order:1;margin:0;font-size:1.05rem;font-weight:650;line-height:1.3;letter-spacing:-.012em;color:var(--pdp-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Infos pratiques : petits blocs, hauteur dictée par le contenu */
.pdp-practical{columns:var(--pi-cols,3) 15rem;column-gap:.85rem}
.pdp-practical--1{max-width:42rem}
.pdp-pi{display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:.7rem;break-inside:avoid;margin:0 0 .85rem;padding:.95rem 1.05rem;border-radius:var(--pdp-radius-sm);background:var(--pdp-stage)}
.pdp-sec--tint .pdp-pi{background:var(--pdp-card)}
.pdp-pi-icon{width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:50%;background:var(--pdp-card);color:var(--pdp-soft);box-shadow:0 0 0 1px var(--pdp-border)}
.pdp-pi-icon svg{width:1rem;height:1rem}
.pdp-pi h3{margin:.3rem 0 .4rem;font-size:var(--fs-sm);font-weight:700;color:var(--pdp-ink)}
.pdp-pi p,.pdp-pi li{margin:0 0 .25rem;font-size:var(--fs-sm);line-height:1.55;color:var(--pdp-soft)}
.pdp-pi p:last-child{margin-bottom:0}
.pdp-pi ul{list-style:none;margin:0;padding:0}
.pdp-pi ul:not(.pdp-docs) li{position:relative;padding-left:.9rem}
.pdp-pi ul:not(.pdp-docs) li::before{content:"";position:absolute;left:0;top:.68em;width:.28rem;height:.28rem;border-radius:50%;background:var(--pdp-faint)}
.pdp-docs{display:grid;gap:.35rem}
.pdp-docs li{margin:0}
.pdp-docs a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .75rem;border-radius:calc(var(--pdp-radius-sm) * .8);background:var(--pdp-card);box-shadow:0 0 0 1px var(--pdp-border);text-decoration:none;transition:box-shadow var(--dur-fast)}
.pdp-docs a:hover{box-shadow:0 0 0 1px var(--pdp-border-strong)}
.pdp-docs a:focus-visible{outline:none;box-shadow:var(--ring)}
.pdp-doc-text{display:flex;flex-direction:column;min-width:0}
.pdp-doc-title{font-size:var(--fs-sm);font-weight:600;color:var(--pdp-ink)}
.pdp-docs small{font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-docs svg{flex:none;width:1rem;height:1rem;color:var(--pdp-soft)}

/* FAQ : accordéon, large zone cliquable, chevron */
.pdp-faq-wrap .pdp-sec-head{max-width:52rem}
.pdp-faq{max-width:52rem;border-top:1px solid var(--pdp-border)}
.pdp-faq-item{border-bottom:1px solid var(--pdp-border)}
.pdp-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:3.6rem;padding:.9rem 0;cursor:pointer;list-style:none;font-weight:600;font-size:var(--fs-base);line-height:1.4;transition:color var(--dur-fast)}
.pdp-faq-item summary::-webkit-details-marker{display:none}
.pdp-faq-item summary::marker{content:""}
.pdp-faq-item summary:hover{color:var(--pdp-accent)}
.pdp-faq-item summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.5rem}
.pdp-faq-icon{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--pdp-border-strong);color:var(--pdp-ink);transition:transform var(--dur-base) var(--ease),background-color var(--dur-fast),border-color var(--dur-fast)}
.pdp-faq-icon svg{width:1rem;height:1rem}
.pdp-faq-item[open] .pdp-faq-icon{transform:rotate(180deg);background:var(--pdp-stage);border-color:var(--pdp-border)}
.pdp-faq-answer{padding:0 3.25rem 1.15rem 0;animation:pdpFade var(--dur-base) var(--ease)}
.pdp-faq-answer p{margin:0;max-width:66ch;color:var(--pdp-soft);line-height:1.7;font-size:var(--fs-sm)}
@keyframes pdpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Avis clients : synthèse à gauche, cartes à droite */
.pdp-reviews{display:grid;grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);gap:clamp(1.25rem,1rem + 1.5vw,2.25rem);align-items:start}
.pdp-reviews>.pdp-rmain:only-child{grid-column:1/-1}
.pdp-rsum{padding:1.4rem 1.4rem 1.3rem;border-radius:var(--pdp-radius);background:var(--pdp-card);border:1px solid var(--pdp-border)}
.pdp-rsum-score{margin:0;font-size:3.4rem;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pdp-rsum-score small{font-size:1.05rem;font-weight:500;letter-spacing:0;color:var(--pdp-faint);margin-left:.15rem}
.pdp-rsum>.stars{display:block;width:max-content;margin-top:.55rem;font-size:1.2rem}
.pdp-rsum-count{margin:.4rem 0 1rem;font-size:var(--fs-sm);color:var(--pdp-soft)}
.pdp-rdist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--pdp-soft)}
.pdp-rdist li{display:grid;grid-template-columns:1.6rem minmax(0,1fr) 1.2rem;gap:.55rem;align-items:center}
.pdp-rdist-n{text-align:right}
.pdp-rbar{height:.45rem;border-radius:var(--radius-pill);background:var(--pdp-stage);box-shadow:inset 0 0 0 1px var(--pdp-border);overflow:hidden}
.pdp-rbar span{display:block;height:100%;background:#e5a100;border-radius:inherit}
.pdp-rsum-reco{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--pdp-border);font-size:var(--fs-sm);line-height:1.45;color:var(--pdp-soft)}
.pdp-rsum-reco strong{color:var(--pdp-ink);font-weight:700}
.pdp-rlist{columns:var(--r-cols,2) 17rem;column-gap:1rem}
.pdp-reviews--single{grid-template-columns:minmax(0,15rem) minmax(0,40rem)}
.pdp-review{break-inside:avoid;display:flex;flex-direction:column;margin:0 0 1rem;padding:1.15rem 1.25rem 1.1rem;border-radius:var(--pdp-radius);background:var(--pdp-card);border:1px solid var(--pdp-border);transition:box-shadow var(--dur-base) var(--ease)}
.pdp-review:hover{box-shadow:var(--pdp-shadow-card)}
.pdp-review-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem}
.pdp-review h3{margin:.7rem 0 0;font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--pdp-ink)}
.pdp-review-body{margin:.4rem 0 0;font-size:var(--fs-sm);line-height:1.65;color:var(--pdp-soft)}
.pdp-review-meta{display:flex;align-items:center;gap:.6rem;margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--pdp-border)}
.pdp-review-meta>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.pdp-review-meta strong{font-size:var(--fs-sm);font-weight:650;color:var(--pdp-ink)}
.pdp-review-meta time{font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-avatar{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--pdp-accent-soft);color:var(--pdp-accent);font-size:.8rem;font-weight:700}
.pdp-verified{display:inline-flex;align-items:center;gap:.25rem;padding:.14em .6em .14em .45em;border-radius:var(--radius-pill);font-size:.72rem;font-weight:650;color:var(--pdp-ok);background:color-mix(in srgb,var(--pdp-ok) 10%,var(--brand-bg))}
.pdp-verified svg{width:.75rem;height:.75rem}
.pdp-rnote{margin:.6rem 0 0;font-size:var(--fs-xs);color:var(--pdp-faint);font-style:italic}
.pdp-reply{margin:.75rem 0 0;padding:.7rem .9rem;border-radius:var(--pdp-radius-sm);background:var(--pdp-stage);font-size:var(--fs-sm)}
.pdp-reply p{margin:.25rem 0 0;color:var(--pdp-soft)}
.pdp-rmore{min-height:2.75rem;margin-top:.25rem;background:var(--pdp-card)}
.pdp-rexternal{margin-top:1.75rem}
.pdp-rexternal>h3{margin:0;font-size:var(--fs-sm);font-weight:700}
.pdp-rexternal-note{margin:.2rem 0 .85rem;font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-review--ext{background:transparent;border-style:dashed;border-color:var(--pdp-border-strong)}
.pdp-review--ext:hover{box-shadow:none}
.pdp-review--ext .pdp-avatar{background:var(--pdp-stage);color:var(--pdp-soft)}
.pdp-review-source{display:inline-flex;padding:.12em .6em;border-radius:var(--radius-pill);background:var(--pdp-stage);font-size:.72rem;font-weight:600;color:var(--pdp-soft)}
.pdp-review-source a{text-decoration:underline;text-underline-offset:.15em}

/* Recommandations : cartes produit compactes groupées par rôle */
.pdp-recos{display:grid;gap:1.75rem}
.pdp-recos--few{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem 1.5rem;max-width:62rem}
.pdp-recos--few .pdp-rail{grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))}
.pdp-recos--few .pdp-mini{display:grid;grid-template-columns:8.5rem minmax(0,1fr)}
.pdp-recos--few .pdp-mini-img{aspect-ratio:auto;height:100%;min-height:8.5rem}
.pdp-recos--few .pdp-mini-body{padding:.9rem 1.1rem}
.pdp-recos--row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem 2rem;container-type:inline-size}
.pdp-reco-group{min-width:0}
.pdp-recos--row .pdp-reco-group{--card-w:max(11rem,calc((100cqi - 5rem) / 4));flex:none;width:min(100%,calc(var(--n) * var(--card-w) + (var(--n) - 1) * 1rem))}
.pdp-reco-title{margin:0 0 .75rem;font-size:var(--fs-sm);font-weight:650;color:var(--pdp-soft)}
.pdp-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.pdp-recos--row .pdp-rail{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.pdp-mini{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--pdp-radius);background:var(--pdp-card);border:1px solid var(--pdp-border);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base)}
.pdp-mini:hover{border-color:var(--pdp-border-strong);box-shadow:var(--pdp-shadow-hover)}
.pdp-mini:has(.pdp-mini-name:focus-visible){box-shadow:var(--ring)}
.pdp-mini-img{aspect-ratio:4/3;background:var(--pdp-stage);overflow:hidden}
.pdp-mini-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform var(--dur-slow) var(--ease)}
.pdp-mini:hover .pdp-mini-img img{transform:scale(1.03)}
.pdp-mini-body{flex:1;display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem 1rem}
.pdp-mini-name{font-size:var(--fs-sm);font-weight:650;line-height:1.35;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;outline:none}
.pdp-mini-name::after{content:"";position:absolute;inset:0;z-index:1}
.pdp-mini-meta{margin:.15rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline}
.pdp-mini-price{font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.pdp-mini-meta s{font-size:var(--fs-xs);color:var(--pdp-faint)}
.pdp-mini-stock{margin:0;font-size:var(--fs-xs);font-weight:600}
.pdp-mini-stock--ok{color:var(--pdp-ok)}.pdp-mini-stock--warn{color:var(--pdp-warn)}.pdp-mini-stock--ko{color:var(--pdp-ko)}
.pdp-mini-cta{display:inline-flex;align-items:center;gap:.2rem;margin-top:auto;padding-top:.55rem;font-size:var(--fs-xs);font-weight:650;color:var(--pdp-soft);transition:color var(--dur-fast)}
.pdp-mini-cta svg{width:.75rem;height:.75rem;transition:translate var(--dur-fast)}
.pdp-mini:hover .pdp-mini-cta{color:var(--pdp-accent)}.pdp-mini:hover .pdp-mini-cta svg{translate:2px 0}

/* Fin de fiche : liens catégorie / marque, sécurité produit, puis le pied de page */
.pdp-end{padding:1.25rem 0 2rem;border-top:1px solid var(--pdp-border)}
.pdp-sec--tint+.pdp-end{border-top:0}
.pdp-explore{display:flex;flex-wrap:wrap;gap:.5rem}
.pdp-explore a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 1rem;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--pdp-border-strong);font-size:var(--fs-sm);font-weight:600;text-decoration:none;transition:box-shadow var(--dur-fast)}
.pdp-explore a:hover{box-shadow:inset 0 0 0 1px var(--pdp-ink)}
.pdp-explore a:focus-visible{outline:none;box-shadow:var(--ring)}
.pdp-explore a svg{width:.8rem;height:.8rem;color:var(--pdp-faint)}
.pdp-explore-kind{font-weight:500;color:var(--pdp-faint)}
.pdp-explore--inline{margin-top:1.5rem;gap:.25rem 1.5rem}
.pdp-explore--inline a{min-height:2.75rem;padding:0;box-shadow:none;color:var(--pdp-soft)}
.pdp-explore--inline a:hover{box-shadow:none;color:var(--pdp-ink);text-decoration:underline;text-underline-offset:.22em}
.pdp-explore--inline a:focus-visible{box-shadow:var(--ring);border-radius:.35rem}
.pdp-compliance{margin-top:1.25rem;font-size:var(--fs-xs);color:var(--pdp-soft)}
.pdp-explore+.pdp-compliance{padding-top:1.1rem;border-top:1px solid var(--pdp-border)}
.pdp-compliance h2{margin:0 0 .55rem;font-size:var(--fs-xs);font-weight:700;color:var(--pdp-ink)}
.pdp-compliance-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-4)}
.pdp-compliance h3{margin:0 0 .2rem;font-size:var(--fs-xs);font-weight:650;color:var(--pdp-ink)}
.pdp-compliance p{margin:0;line-height:1.6}

/* Barre d'action mobile (téléphone uniquement, après le bouton principal) */
.pdp-sticky{position:fixed;inset:auto 0 0;z-index:30;display:none;align-items:center;gap:var(--space-3);padding:.65rem max(1rem,env(safe-area-inset-left)) calc(.65rem + env(safe-area-inset-bottom));background:var(--brand-bg);border-top:1px solid var(--pdp-border);box-shadow:0 -8px 24px -18px color-mix(in srgb,var(--brand-text) 35%,transparent);transform:translateY(110%);transition:transform var(--dur-base) var(--ease)}
.pdp-sticky.is-visible{transform:none}
.pdp-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--fs-xs);line-height:1.3}
.pdp-sticky-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.pdp-sticky-info span{font-weight:650;font-variant-numeric:tabular-nums}
.pdp-sticky .btn{padding:.8em 1.25em;font-size:var(--fs-sm)}

/* --- Tablette --- */
@media (max-width:1023px){
  .pdp-hero{grid-template-columns:1fr;gap:1.75rem}
  .pdp-gallery{width:min(100%,34rem);margin-inline:auto;--pdp-thumb:4rem}
  .pdp-thumbs{justify-content:center}
  .pdp-reviews{grid-template-columns:1fr}
  .pdp-rsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.5rem;align-items:center}
  .pdp-rsum>.pdp-rsum-score{grid-row:span 2}
  .pdp-rsum>.stars{margin-top:0}
  .pdp-rsum-count{margin:.2rem 0 0}
  .pdp-rdist,.pdp-rsum-reco{grid-column:1/-1}
  .pdp-rdist{margin-top:1rem}
  .pdp-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .pdp-sticky{display:flex}
  .pdp{padding-bottom:4.5rem}
  body:has(.pdp-sticky.is-visible) .back-to-top{bottom:calc(5rem + env(safe-area-inset-bottom))}
}
/* --- Mobile : conçu séparément --- */
@media (max-width:680px){
  .pdp{--pdp-nav-h:2.85rem;--pdp-sec-y:2rem}
  .pdp-crumbs{margin:var(--space-3) 0}
  .pdp-crumbs>*{display:none}
  .pdp-crumbs>a:nth-last-child(3){display:inline-flex;align-items:center;gap:.35em}
  .pdp-crumbs>a:nth-last-child(3)::before{content:"\2039";font-size:1.3em;line-height:1}
  .pdp-top{padding-bottom:1.5rem}
  .pdp-hero{gap:1.15rem}
  .pdp-gallery{width:auto;margin-inline:calc(-1 * max(1.25rem,(100vw - var(--container-max)) / 2))}
  .pdp-stage{border-radius:0}
  .pdp-nav,.pdp-thumbs{display:none}
  .pdp-counter{display:block}
  .pdp-info{gap:1.25rem}
  .pdp-kicker{margin-bottom:.5rem}
  .pdp-title{font-size:1.75rem}
  .pdp-title--long{font-size:1.55rem}
  .pdp-title--xlong{font-size:1.35rem}
  .pdp-lead,.pdp-lead--long{font-size:var(--fs-base);margin-top:.6rem}
  .pdp-benefits{grid-template-columns:1fr;gap:.6rem}
  .pdp-benefits--short,.pdp-benefits--3.pdp-benefits--short{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .9rem}
  .pdp-benefits--1.pdp-benefits--short{grid-template-columns:1fr}
  .pdp-benefits li{grid-template-columns:1.9rem minmax(0,1fr);gap:.6rem}
  .pdp-benefit-icon{width:1.9rem;height:1.9rem}
  .pdp-buy{gap:1.05rem;padding:1.1rem}
  .pdp-facts{margin-top:-.35rem}
  .pdp-assist-link{min-height:2.75rem}
  .pdp-assist-text{flex:1} /* chevrons alignés à droite, que le libellé tienne sur une ou deux lignes */
  .pdp-actions-main{flex-direction:column}
  .pdp-cta,.pdp-cta-secondary{flex:none;width:100%}
  .pdp-option{min-height:2.875rem}
  .pdp-tabs-list{gap:1.35rem;margin-inline:calc(-1 * max(1.25rem,(100vw - var(--container-max)) / 2));padding-inline:max(1.25rem,(100vw - var(--container-max)) / 2);scroll-padding-inline:1.25rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 2.5rem),transparent)}
  .pdp-specs,.pdp-practical,.pdp-rlist{columns:1}
  .pdp-spec-head{padding:.7rem 1rem}
  .pdp-spec-group dl{padding:0 1rem .25rem}
  .pdp-faq-answer{padding-right:0}
  .pdp-recos--row{display:grid;gap:1.25rem}
  .pdp-recos--row .pdp-reco-group{width:auto}
  .pdp-rail,.pdp-recos--row .pdp-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;margin-inline:calc(-1 * max(1.25rem,(100vw - var(--container-max)) / 2));padding:2px max(1.25rem,(100vw - var(--container-max)) / 2) 6px;scroll-padding-inline:1.25rem;scrollbar-width:none}
  .pdp-rail::-webkit-scrollbar{display:none}
  .pdp-mini{flex:0 0 min(62%,15rem);scroll-snap-align:start}
  .pdp-recos--few .pdp-rail{display:grid;overflow:visible;margin-inline:0;padding:0}
  .pdp-recos--few .pdp-mini{grid-template-columns:7rem minmax(0,1fr)}
  .pdp-reviews--single{grid-template-columns:1fr}
  .pdp-end{padding:1.1rem 0 1.5rem}
}
@media (prefers-reduced-motion:no-preference){html:has(.pdp){scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.pdp-track{scroll-behavior:auto}.pdp-sticky,.pdp-mini,.pdp-review,.pdp-faq-icon,.pdp-faq-answer,.pdp-tabs-list a::after{transition:none;animation:none}.pdp-mini-img img{transition:none}}