/* ==========================================================================
   CONSEIL AUTO MOTO — feuille de styles principale
   --------------------------------------------------------------------------
   Langage visuel transposé de Slush (slush.app) :
   - système d'échelle fluide « Osmo » (tout est en em, la page se met à
     l'échelle comme une affiche) ;
   - panneaux très arrondis posés sur un cadre noir ;
   - typographie d'affichage géante et « écrasée » (interlignage < 0,85) ;
   - contours noirs façon autocollant découpé, palette de six couleurs vives ;
   - boutons qui basculent en 3D au survol, courbe élastique « slush-bounce ».
   ========================================================================== */

/* ---------- 1. Échelle fluide (Scaling System by Osmo, repris de Slush) --- */
:root {
  /* Taille de base : 1 % de la largeur de l'écran, entre 11 et 14 px. Sur les grands écrans, les fonds
     restent pleine largeur et le contenu se centre dans --site-max. */
  --size-unit: 16;
  --size-container-ideal: 1600;
  --size-container-min: 1100px;
  --size-container-max: 1400px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --site-max: 1400px;
}
@media screen and (max-width: 991px) {
  :root { --size-container-ideal: 1024; --size-container-min: 768px; --size-container-max: 991px; }
}
@media screen and (max-width: 767px) {
  :root { --size-font: calc(12px + .4vw); }
}
@media screen and (max-width: 479px) {
  :root { --size-container-ideal: 420; --size-container-min: 320px; --size-container-max: 479px;
          --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); }
}

/* ---------- 2. Jetons ---------------------------------------------------- */
:root {
  /* Palette « autocollants » de Slush */
  --c-carbon: #000000;
  --c-paper: #ffffff;
  --c-sky: #dceeff;
  --c-concrete: #cccccc;
  --c-mist: #e9e9e9;
  --c-night: #111114;
  --c-night-2: #1c1c22;
  --c-blue: #4da2ff;
  --c-mint: #55db9c;
  --c-lavender: #e9ccff;
  --c-ember: #fb4903;
  --c-sun: #ffd731;
  --c-violet: #5c4ade;

  /* Couleurs des rubriques */
  --cat-auto: var(--c-ember);
  --cat-moto: var(--c-violet);
  --cat-electrique: var(--c-blue);
  --cat-assurance: var(--c-mint);
  --cat-actualite: var(--c-sun);
  --cat-essais: var(--c-lavender);

  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Courbes et durées relevées dans le code de Slush */
  --ease-slush: cubic-bezier(.65, .05, 0, 1);
  --ease-bounce: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%,
    1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%,
    .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
  --ease-smooth: cubic-bezier(.32, .72, 0, 1);
  --ease-color: cubic-bezier(.216, .62, .356, 1);
  --dur: .75s;
  --dur-m: .85s;
  --dur-fade: .15s;

  --bw: max(1.5px, calc(var(--size-font) / 8));
  --gutter: calc(var(--size-font) * .5);
  --r-panel: calc(var(--size-font) * 2.5);
  --r-card: calc(var(--size-font) * 1.875);
  --r-sm: calc(var(--size-font) * 1.25);
  --pad-x: 3em;
}
@media screen and (max-width: 767px) {
  :root { --r-panel: calc(var(--size-font) * 1.75); --r-card: calc(var(--size-font) * 1.5); --pad-x: 1.25em; }
}

/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--c-carbon);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #3a3a40 var(--c-carbon);
  scrollbar-width: thin;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--size-font);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--c-carbon);
  background: var(--c-carbon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
::selection { background: var(--c-carbon); color: var(--c-paper); }
:focus-visible { outline: var(--bw) solid var(--c-blue); outline-offset: .2em; border-radius: .3em; }

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}
.skip-link {
  position: fixed; left: 1em; top: 1em; z-index: 2000; padding: .8em 1.2em; border-radius: 100em;
  background: var(--c-paper); border: var(--bw) solid var(--c-carbon); font-weight: 700;
  transform: translateY(-200%); transition: transform .3s var(--ease-slush);
}
.skip-link:focus { transform: none; }

/* ---------- 4. Cadre de page & panneaux --------------------------------- */
.page { position: relative; }
.main { display: flex; flex-direction: column; gap: var(--gutter); padding: var(--gutter); background: var(--c-carbon); --overlay: 0; }
.panel {
  position: relative;
  border-radius: var(--r-panel);
  background: var(--bg, var(--c-paper));
  color: var(--fg, var(--c-carbon));
  overflow: clip;
  isolation: isolate;
}
.panel--sky { --bg: var(--c-sky); }
.panel--paper { --bg: var(--c-paper); }
.panel--mist { --bg: var(--c-mist); }
.panel--concrete { --bg: var(--c-concrete); }
.panel--night { --bg: var(--c-night); --fg: var(--c-paper); }
.panel--ember { --bg: var(--c-ember); }
.panel--sun { --bg: var(--c-sun); }
.panel--blue { --bg: var(--c-blue); }
.panel--mint { --bg: var(--c-mint); }
.panel--lavender { --bg: var(--c-lavender); }
.panel--violet { --bg: var(--c-violet); --fg: var(--c-paper); }

.container { width: 100%; max-width: var(--site-max); padding-left: var(--pad-x); padding-right: var(--pad-x); margin: 0 auto; }
.container--narrow { max-width: 62em; }
/* Contenu des sections (rubriques, listes d'articles) : centré, sans occuper toute la largeur */
.container--content { max-width: max(1000px, calc(72em + 2 * var(--pad-x))); }
.section { padding-top: 7.5em; padding-bottom: 7.5em; }
.section--tight { padding-top: 5em; padding-bottom: 5em; }

/* ---------- 5. Typographie ---------------------------------------------- */
.h-display, .h-large, .h-mid, .h-mega {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  padding-top: .08em;
  margin-bottom: -.1em;
}
.h-mega { font-size: 17.5em; line-height: .76; }
.h-display { font-size: 12.5em; line-height: .78; }
.h-large { font-size: 9em; line-height: .8; }
.h-mid { font-size: 4.6em; line-height: .84; }
.h-sm { font-size: 4em; font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.h-xs { font-size: 1.875em; font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.h-sub { font-size: 1.5em; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.t-lead { font-size: max(1.375em, 16px); line-height: 1.38; letter-spacing: -.015em; }
.t-body { font-size: max(1em, 15px); line-height: 1.5; }
.t-small { font-size: max(.875em, 13px); line-height: 1.45; }
.t-label {
  font-size: max(.8125em, 11px); font-weight: 700; line-height: 1; letter-spacing: .032em; text-transform: uppercase;
}
.t-muted { opacity: .62; }
.slant { display: inline-block; transform: skewX(-9deg); }
[data-anim-slant] .char, [data-anim-hero] .char, [data-anim-fiche] .char { display: inline-block !important; padding: 0 .1em; margin: 0 -.1em; }
[data-anim-slant] .word, [data-anim-hero] .word { display: inline-block; white-space: nowrap; }
.u-up { text-transform: uppercase; }
.u-tnum { font-variant-numeric: tabular-nums; }

@media screen and (max-width: 991px) {
  .h-mega { font-size: 12em; }
  .h-display { font-size: 10em; }
  .h-large { font-size: 7.5em; }
}
@media screen and (max-width: 767px) {
  .h-mega { font-size: 7.6em; }
  .h-display { font-size: 5.4em; }
  .h-large { font-size: 5em; }
  .h-mid { font-size: 3.2em; }
  .h-sm { font-size: 2.4em; }
  .h-xs { font-size: 1.5em; }
  .h-sub { font-size: 1.25em; }
  .section { padding-top: 4.5em; padding-bottom: 4.5em; }
  .section--tight { padding-top: 3.5em; padding-bottom: 3.5em; }
}

/* Lien souligné (Slush .link) */
.link { position: relative; display: inline-flex; align-items: center; gap: .45em; font-weight: 700; }
.link::after {
  content: ""; position: absolute; left: 0; bottom: -.15em; width: 100%; height: var(--bw);
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-slush);
}
@media (hover: hover) {
  .link:hover::after { transform: scaleX(1); }
}
.link--always::after { transform: scaleX(1); transform-origin: right center; }
@media (hover: hover) {
  .link--always:hover::after { transform: scaleX(0); }
}
.arrow { width: 1em; height: 1em; flex: none; }

/* ---------- 6. Boutons à bascule 3D (Slush .button-main) ----------------- */
.btn {
  --accent: var(--c-sun);
  --btn-bg: var(--c-paper);
  --btn-fg: var(--c-carbon);
  position: relative;
  display: inline-flex;
  font-size: 1em;
  color: var(--btn-fg);
  transition: transform .5s var(--ease-bounce);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.btn:active { transform: scale(.955); }
.btn__inner { display: grid; perspective: 500px; transform-style: preserve-3d; pointer-events: none; min-height: 100%; width: 100%; }
.btn__front {
  grid-area: 1 / 1; display: grid;
  transition: translate var(--dur-m) var(--ease-bounce), rotate var(--dur) var(--ease-bounce), opacity var(--dur-fade) ease-out;
}
.btn__bg {
  grid-area: 1 / 1; border-radius: 100vw; background: var(--btn-bg); border: var(--bw) solid var(--c-carbon);
  transition: background-color .2s var(--ease-color);
}
.btn__text, .btn__back {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.05em 1.9em;
  font-size: .9375em; font-weight: 700; line-height: 1; letter-spacing: .032em;
  text-transform: uppercase; white-space: nowrap;
}
.btn__text { grid-area: 1 / 1; transition: translate var(--dur) var(--ease-bounce); }
.btn__back {
  grid-area: 1 / 1;
  border-radius: 100vw; border: var(--bw) solid var(--c-carbon);
  background: var(--accent); color: var(--c-carbon);
  opacity: 0; translate: 0 2em -6em; rotate: 1 0 0 -90deg;
  transition: translate var(--dur-m) var(--ease-bounce), rotate var(--dur) var(--ease-bounce), opacity .15s ease-out;
}
.btn__back > span { translate: 0 .75em 0; transition: translate var(--dur) var(--ease-bounce); display: inline-flex; align-items: center; gap: .6em; }
.btn .arrow { width: 1.05em; height: 1.05em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible) .btn__front { translate: 0 -2em -6em; rotate: 1 0 0 85deg; opacity: 0; }
  .btn:is(:hover, :focus-visible) .btn__text { translate: 0 -.75em 0; }
  .btn:is(:hover, :focus-visible) .btn__back {
    rotate: 1 0 0 0deg; translate: 0 0 0; opacity: 1;
    transition: translate var(--dur-m) var(--ease-bounce), rotate var(--dur) var(--ease-bounce), opacity .075s ease-in;
  }
  .btn:is(:hover, :focus-visible) .btn__back > span { translate: 0 0 0; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .btn:is(:hover, :focus-visible) .btn__bg { background: var(--c-carbon); }
  .btn:is(:hover, :focus-visible) .btn__text { color: var(--c-paper); }
}
/* Repli sans JavaScript */
.btn > .btn__label {
  display: inline-flex; align-items: center; gap: .6em; padding: 1.05em 1.9em; border: var(--bw) solid var(--c-carbon);
  border-radius: 100em; background: var(--btn-bg); font-size: .9375em; font-weight: 700; line-height: 1;
  letter-spacing: .032em; text-transform: uppercase; white-space: nowrap;
}
.btn--dark { --btn-bg: var(--c-carbon); --btn-fg: var(--c-paper); }
.btn--sm .btn__text, .btn--sm .btn__back { padding: .95em 1.35em; font-size: .8125em; }
.btn--lg .btn__text, .btn--lg .btn__back { padding: 1.25em 2.4em; font-size: 1.0625em; }
.btn--block { display: flex; width: 100%; }
.btn[data-accent="ember"] { --accent: var(--c-ember); }
.btn[data-accent="blue"] { --accent: var(--c-blue); }
.btn[data-accent="mint"] { --accent: var(--c-mint); }
.btn[data-accent="violet"] { --accent: var(--c-violet); }
.btn[data-accent="violet"] .btn__back { color: var(--c-paper); }
.btn[data-accent="lavender"] { --accent: var(--c-lavender); }
.btn[data-accent="sun"] { --accent: var(--c-sun); }
.btn[data-accent="paper"] { --accent: var(--c-paper); }
.btn[data-accent="dark"] { --accent: var(--c-carbon); }
.btn[data-accent="dark"] .btn__back { color: var(--c-paper); }
.on-dark .btn__bg, .panel--night .btn:not(.btn--dark) .btn__bg { border-color: var(--c-paper); }

/* Bouton rond (Slush .nav-btn-circle) */
.circle-btn {
  display: grid; place-items: center; flex: none;
  width: 3.125em; height: 3.125em; padding: .625em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-paper); color: var(--c-carbon);
  transition: transform .5s var(--ease-bounce), background-color .2s var(--ease-color);
  pointer-events: auto; overflow: clip;
}
@media (hover: hover) {
  .circle-btn:hover { transform: rotate(90deg); }
}
.circle-btn:active { transform: scale(.955); }
.circle-btn svg { width: 100%; height: 100%; }
.circle-btn--dark { background: var(--c-carbon); color: var(--c-paper); border-color: var(--c-carbon); }

/* Pastilles / étiquettes */
.tag {
  --tag-bg: var(--c-paper);
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .9em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--tag-bg); color: var(--c-carbon);
  font-size: max(.75em, 10.5px); font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.tag[data-cat="auto"] { --tag-bg: var(--cat-auto); }
.tag[data-cat="moto"] { --tag-bg: var(--cat-moto); color: var(--c-paper); }
.tag[data-cat="electrique"] { --tag-bg: var(--cat-electrique); }
.tag[data-cat="assurance"] { --tag-bg: var(--cat-assurance); }
.tag[data-cat="actualite"] { --tag-bg: var(--cat-actualite); }
.tag[data-cat="essais"] { --tag-bg: var(--cat-essais); }
.tag--ghost { --tag-bg: transparent; }
.tag--dark { --tag-bg: var(--c-carbon); color: var(--c-paper); }

/* Puces de filtre (chips) */
.chips { display: flex; flex-wrap: wrap; gap: .5em; position: relative; }
.chip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.25em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-paper); font-size: .8125em; font-weight: 700; line-height: 1; letter-spacing: .032em; text-transform: uppercase;
  transition: background-color .25s var(--ease-color), color .25s var(--ease-color), transform .5s var(--ease-bounce);
}
.chip:active { transform: scale(.955); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-active { background: var(--c-carbon); color: var(--c-paper); }
.chip__count { opacity: .55; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .chip:not([aria-pressed="true"]):not(.is-active):hover { background: var(--chip-hover, var(--c-sun)); }
}

/* ---------- 7. Navigation ------------------------------------------------ */
.pencil {
  position: relative; z-index: 3; display: block; overflow: clip;
  background: var(--c-lavender); color: var(--c-carbon);
  height: 2.25em; font-size: max(.8em, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pencil .marquee__scroll { height: 100%; }
.pencil__item { display: inline-flex; align-items: center; gap: 1.1em; padding-right: 1.1em; height: 2.8em; white-space: nowrap; }
.pencil__dot { width: .55em; height: .55em; border-radius: 100em; background: var(--c-carbon); flex: none; }

.nav {
  position: fixed; left: 0; right: 0; top: 3.5em; z-index: 80;
  pointer-events: none;
  transition: top .6s var(--ease-bounce);
}
body[data-scrolling-started="true"] .nav { top: 1.25em; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 1.75em; }
.nav__logo { position: relative; }
.nav__logo .logo-needle { transform-origin: 32px 32px; transition: transform 1s var(--ease-bounce); }
@media (hover: hover) {
  .nav__logo:hover { transform: rotate(0deg); }
  .nav__logo:hover .logo-needle { transform: rotate(-200deg); }
}
.nav__list { position: absolute; left: 50%; translate: -50% 0; }
.nav__list ul { display: flex; align-items: center; gap: .3em; list-style: none; }
.nav__li { pointer-events: auto; }
.nav__li .btn__text, .nav__li .btn__back { padding: 1.1em 1.25em; font-size: max(.78em, 11px); }
.nav__li .btn[aria-current="page"] .btn__bg { background: var(--current-bg, var(--c-sun)); }
.nav__li .btn[aria-current="page"][data-nav-key="moto"] .btn__text { color: var(--c-paper); }
.nav__li .btn[data-nav-key="auto"] { --current-bg: var(--cat-auto); --accent: var(--cat-auto); }
.nav__li .btn[data-nav-key="moto"] { --current-bg: var(--cat-moto); --accent: var(--cat-moto); }
.nav__li .btn[data-nav-key="moto"] .btn__back { color: var(--c-paper); }
.nav__li .btn[data-nav-key="electrique"] { --current-bg: var(--cat-electrique); --accent: var(--cat-electrique); }
.nav__li .btn[data-nav-key="assurance"] { --current-bg: var(--cat-assurance); --accent: var(--cat-assurance); }
.nav__li .btn[data-nav-key="actualite"] { --current-bg: var(--cat-actualite); --accent: var(--cat-actualite); }
.nav__right { display: flex; align-items: center; gap: .3em; pointer-events: auto; }
.nav__right .btn .btn__text, .nav__right .btn .btn__back { padding: 1.1em 1.35em; font-size: max(.78em, 11px); }

.nav-menu { position: relative; }
.nav-menu__lines { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.nav-menu__line {
  position: absolute; background: currentColor; border-radius: 1em;
  transition: transform .25s cubic-bezier(.215, .61, .355, 1);
}
.nav-menu__line.is--h { width: 100%; height: var(--bw); }
.nav-menu__line.is--v { width: var(--bw); height: 100%; }
@media (hover: hover) {
  .nav-menu:hover .nav-menu__line.is--h { transform: scaleX(0); }
}
.nav-menu[aria-expanded="true"] { transform: rotate(90deg); }
.nav-menu[aria-expanded="true"] .nav-menu__line.is--h { transform: scaleX(0); }

@media screen and (max-width: 991px) {
  .nav { top: 3.4em; }
  body[data-scrolling-started="true"] .nav { top: .9em; }
  .nav__inner { padding: 0 1em; }
  .nav__list { left: auto; right: 1em; top: calc(100% + .6em); translate: none; }
  .nav__list ul { flex-direction: column; align-items: flex-end; gap: .4em; }
  .nav__li { transform: translateX(300%); }
  .nav__li .btn__text, .nav__li .btn__back { font-size: 1em; padding: 1.1em 1.5em; }
  .nav__cta { display: none; }
}

/* Curseur-étiquette (Slush .cursor) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: .5em;
  padding: .75em 1em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-paper); color: var(--c-carbon);
  font-size: .875em; font-weight: 700; line-height: 1; letter-spacing: .032em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cursor__dot { width: .6em; height: .6em; border-radius: 100em; background: var(--cursor-dot, var(--c-ember)); }
body:has([data-cursor]:hover) .cursor { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- 8. Défilants (marquee) --------------------------------------- */
[data-marquee-scroll-direction-target] { overflow: clip; }
.marquee__scroll { display: flex; width: 100%; will-change: transform; }
.marquee__collection { display: flex; flex: none; align-items: center; will-change: transform; }

/* ---------- 9. Autocollants --------------------------------------------- */
.sticker { position: absolute; z-index: 4; display: block; width: var(--s, 7em); aspect-ratio: 1; rotate: var(--r, 0deg); pointer-events: auto; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.sticker__in { display: block; width: 100%; height: 100%; transition: transform .6s var(--ease-bounce); }
@media (hover: hover) {
  .sticker:hover .sticker__in { transform: scale(1.12) rotate(-8deg); }
}
.needle { transform-box: view-box; transition: transform 1.1s var(--ease-bounce); }
@media (hover: hover) {
  .sticker:hover .needle, .speedo-host:hover .needle, a:hover > .sticker .needle { transform: rotate(190deg); }
}
.speedo-host svg { width: 100%; height: auto; overflow: visible; }
.sticker-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; }
.sticker-inline svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- 10. Cartes --------------------------------------------------- */
.card {
  --card-bg: var(--c-paper);
  position: relative; display: flex; flex-direction: column;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--card-bg); color: var(--c-carbon);
  overflow: clip; isolation: isolate;
  transition: transform .6s var(--ease-bounce), background-color .3s var(--ease-color);
}
.card__media { position: relative; overflow: clip; aspect-ratio: 16 / 10; min-height: 0; flex: none; border-bottom: var(--bw) solid var(--c-carbon); background: var(--c-mist); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-slush); }
.card__media .tag { position: absolute; left: .9em; top: .9em; z-index: 2; }
.card__body { display: flex; flex-direction: column; gap: .7em; padding: 1.15em 1.25em 1.3em; flex: 1; }
.card__title { font-size: max(1.25em, 16px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: max(.875em, 14px); line-height: 1.45; opacity: .74; }
.card__meta { margin-top: auto; display: flex; align-items: center; gap: .6em; font-size: max(.8125em, 12px); font-weight: 600; opacity: .7; }
.card__meta i { width: .3em; height: .3em; border-radius: 100em; background: currentColor; opacity: .6; }
@media (hover: hover) {
  .card:hover { transform: translateY(-.35em) rotate(-.6deg); }
  .card:hover .card__media img { transform: scale(1.09); }
}
.card[data-cat="auto"] { --card-hover: var(--cat-auto); }
.card[data-cat="moto"] { --card-hover: var(--cat-moto); }
.card[data-cat="electrique"] { --card-hover: var(--cat-electrique); }
.card[data-cat="assurance"] { --card-hover: var(--cat-assurance); }
.card[data-cat="actualite"] { --card-hover: var(--cat-actualite); }
.card--tint { --card-bg: var(--card-hover, var(--c-paper)); }
.card--tint[data-cat="moto"] { color: var(--c-paper); }
.card--tint[data-cat="moto"] .card__media { border-color: var(--c-carbon); }

.grid { display: grid; gap: 1.25em; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reveal-wrap { perspective: 80em; }
@media screen and (max-width: 991px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .grid--3, .grid--2, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .card__title { font-size: 1.3em; }
}

/* Rangée d'en-tête de section */
.s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-bottom: 3em; }
.s-head__title { max-width: 16em; }
.s-head .h-sm { max-width: 13em; }
[data-heading-reveal] { perspective: 62em; }
.s-head--cat { align-items: flex-end; margin-bottom: 3.5em; }
.s-head--cat .s-head__title { max-width: none; }
.s-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; max-width: 27em; padding-bottom: .6em; }
.essais__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; max-width: 26em; padding-bottom: .6em; }
.u-flex-col { display: flex; flex-direction: column; align-items: flex-start; }
@media screen and (max-width: 767px) {
  .s-head { flex-direction: column; align-items: flex-start; gap: 1.25em; margin-bottom: 2em; }
}

/* ---------- 11. HERO immersif ------------------------------------------- */
/* Comme le ruban bleu de Slush : un visuel 3D fixe (route en S rendue en lancer
   de rayons, fond transparent) posé sur le panneau ciel, le titre géant au-dessus.
   La profondeur vient des couches : route, titre et autocollants bougent à des
   vitesses différentes (souris et défilement). */
.hero { height: 165vh; height: 165svh; }
.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip; border-radius: var(--r-panel);
}
.hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 50% at 50% 46%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%);
}
.hero__scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__road {
  position: absolute; inset: -4%; display: block;
  transform-origin: 50% 62%; will-change: transform;
  --rv: 1;
}
.hero__road img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-drag: none; }
/* révélation de la route du premier plan vers le lointain (piloté par --rv) */
.hero__road.is-revealing {
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rv) * 135% - 35%), transparent calc(var(--rv) * 135%));
  mask-image: linear-gradient(to top, #000 calc(var(--rv) * 135% - 35%), transparent calc(var(--rv) * 135%));
}
.js .hero__road { visibility: hidden; }
.js-failsafe .hero__road { visibility: visible !important; }
.hero__title {
  position: absolute; left: 0; right: 0; top: var(--title-top, 15%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: .8; color: var(--c-carbon); white-space: nowrap;
  pointer-events: none; user-select: none;
}
.hero__line { display: flex; width: max-content; font-size: var(--fs, 20vw); }
/* Lettres « rouleau » (Slush home-logo-letter) : la lettre sort par le haut,
   des tranches de sa base traînent derrière comme des lignes de vitesse,
   puis la lettre définitive arrive par le bas. */
.hl { position: relative; display: inline-block; overflow: clip; padding-top: .1em; margin-top: -.1em; }
.hl--space { width: .2em; }
.hl__track { position: relative; display: block; }
.hl__el { position: relative; display: block; }
.hl__el--next { position: absolute; left: 0; top: 100%; width: 100%; }
.hl__c { display: block; }
.hl__el > .hl__c + .hl__c { position: absolute; left: 0; top: 0; }
.hl__el > .hl__c:nth-child(2) { clip-path: inset(70% 0 0 0); }
.hl__el > .hl__c:nth-child(3) { clip-path: inset(78% 0 0 0); }
.hl__el > .hl__c:nth-child(4) { clip-path: inset(85% 0 0 0); }
.hl__el > .hl__c:nth-child(5) { clip-path: inset(95% 0 0 0); }

/* Autocollants accrochés aux coins du titre, comme sur le logo Slush
   (--t-left / --t-right / --t-top / --t-h sont calculés par app.js) */
.hero__stickers .hs { position: absolute; z-index: 4; }
.hero__stickers .sticker { position: relative; z-index: 4; }
.hs .sticker { width: var(--s); }
.hs--1 { --s: 7em; left: calc(var(--t-left, 20%) - var(--s) * .62); top: calc(var(--t-top, 30%) - var(--s) * .36); }
.hs--2 { --s: 5.25em; left: calc(var(--t-right, 80%) - var(--s) * .4); top: calc(var(--t-top, 30%) - var(--s) * .52); }
.hs--3 { --s: 6em; left: calc(var(--t-left, 20%) - var(--s) * .8); top: calc(var(--t-top, 30%) + var(--t-h, 30%) * .58); }
.hs--4 { --s: 5.5em; left: calc(var(--t-right, 80%) - var(--s) * .28); top: calc(var(--t-top, 30%) + var(--t-h, 30%) * .5); }
.hero--portrait .hs--1 { --s: 5.2em; left: 4%; top: calc(var(--t-top) - var(--s) * 1.15); }
.hero--portrait .hs--2 { --s: 4.2em; left: calc(95% - var(--s)); top: calc(var(--t-top) - var(--s) * 1.25); }
.hero--portrait .hs--3 { --s: 4.6em; left: 4%; top: calc(var(--t-top) + var(--t-h) + var(--s) * .35); }
.hero--portrait .hs--4 { --s: 4.4em; left: calc(96% - var(--s)); top: calc(var(--t-top) + var(--t-h) + var(--s) * .2); }

.hero__ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero__ui > * { pointer-events: auto; }
/* Accroche et boutons centrés sous le titre (« Your money. Unstuck. » chez Slush) */
.hero__intro {
  position: absolute; left: 50%; top: calc(var(--t-top, 30%) + var(--t-h, 30%) + 2.25em); translate: -50% 0;
  width: max-content; max-width: calc(100% - 3em);
  display: flex; flex-direction: column; align-items: center; gap: 1.3em; text-align: center;
}
.hero__tagline { font-size: 2.6em; font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.hero__tagline br { display: none; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; }
/* au chargement, la scène commence sous le bandeau défilant : on garde les boutons au-dessus de la ligne de flottaison */
.hero--portrait .hero__intro { top: auto; bottom: 4em; left: 1.5em; right: 1.5em; translate: none; width: auto; max-width: none; }
.hero--portrait .hero__tagline br { display: inline; }
.hero--portrait .hero__scroll { display: none; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 4.4em; z-index: 5; translate: -50% 0;
  display: flex; align-items: center; gap: .6em; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .55;
}
.hero__scroll i { width: .2em; height: 2.4em; border-radius: 1em; background: currentColor; transform-origin: top; animation: scrollcue 1.8s var(--ease-slush) infinite; }
@keyframes scrollcue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Contenu masqué avant l'animation d'entrée (comme Slush) */
.js [data-hero-content]:not(.panel) { opacity: 0; }
.js [data-load-stagger], .js [data-load-pop], .js [data-anim-hero] { visibility: hidden; }
.js .nav { transform: translateY(-300%); }
.js-failsafe [data-hero-content] { opacity: 1 !important; }
.js-failsafe [data-load-stagger], .js-failsafe [data-load-pop], .js-failsafe [data-anim-hero] { visibility: visible !important; }
.js-failsafe .nav { transform: none !important; }

@media screen and (max-width: 991px) {
  .hero { height: 150vh; height: 150svh; }
}
@media screen and (max-width: 767px) {
  .hero { height: 140vh; height: 140svh; }
  .hero__tagline { font-size: 2.25em; }
  .hero__intro { gap: 1.1em; }
  .hero__ctas .btn__text, .hero__ctas .btn__back { padding: 1em 1.3em; font-size: .8125em; }
  .hero__scroll { display: none; }
}

/* ---------- 12. Signature d'auteur -------------------------------------- */
.byline { display: flex; align-items: center; gap: .75em; font-size: max(.875em, 13px); }
.byline b { font-weight: 700; }
.avatar {
  display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--av, var(--c-sun));
  font-size: .875em; font-weight: 700; letter-spacing: .02em; color: var(--c-carbon);
  position: relative; overflow: hidden;
}
/* photo de profil posée sur les initiales (transparente s'il n'y en a pas) */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar--lg { width: 4.2em; height: 4.2em; font-size: 1.1em; }

/* Bloc « L'auteur » en fin d'article */
.a-main { min-width: 0; }
.a-author {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2em; align-items: start;
  margin-top: 2.6em; padding: 1.7em 1.5em 1.4em;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--c-mist);
}
.a-author__label {
  position: absolute; left: 1.2em; top: -.9em; padding: .55em .95em .5em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--progress, var(--c-sun)); color: var(--progress-fg, var(--c-carbon));
  font-size: max(.6875em, 10.5px); font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; rotate: -2deg;
}
.a-author__body { display: flex; flex-direction: column; align-items: flex-start; gap: .4em; min-width: 0; }
.a-author__name { font-size: 1.2em; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.a-author__meta { font-size: max(.75em, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.a-author__bio { margin-top: .3em; font-size: max(.9375em, 14px); line-height: 1.55; }
.a-author__bio p + p { margin-top: .6em; }
.a-author__bio a { text-decoration: underline; text-underline-offset: .2em; }
.a-author__more { margin-top: .4em; font-size: max(.875em, 13px); }
/* Nom et photo de l'auteur cliquables (haut d'article et bloc « L'auteur ») :
   soulignement toujours visible, comme .link--always, pour qu'on voie que c'est un lien */
.byline__name, .a-author__name a { text-decoration: underline; text-decoration-thickness: var(--bw); text-underline-offset: .2em; text-decoration-color: currentColor; transition: text-decoration-color .2s; }
@media (hover: hover) { .byline__name:hover, .a-author__name a:hover { text-decoration-color: transparent; } }
.avatar-link { display: block; flex: none; border-radius: 100em; }
.avatar-link .avatar { transition: rotate .4s var(--ease-slush); }
@media (hover: hover) { .avatar-link:hover .avatar { rotate: -10deg; } }

/* Page auteur (author.php) : photo à côté du nom géant */
.author-title { position: relative; z-index: 1; display: flex; align-items: center; gap: .6em; }
.avatar--xl { width: 3.6em; height: 3.6em; flex: none; font-size: 2.2em; }
.cat-hero--author .h-mega { min-width: 0; font-size: min(17.5em, calc((min(100vw, var(--site-max)) - 16em) / (var(--chars, 6) * .47))); }
.cat-hero--author .cat-hero__desc { max-width: 38em; }
@media screen and (max-width: 767px) {
  .author-title { flex-direction: column; align-items: flex-start; gap: .5em; }
  .avatar--xl { font-size: 1.6em; }
  .cat-hero--author .h-mega { font-size: min(7.6em, calc((100vw - 3.5em) / (var(--chars, 6) * .47))); }
  /* biographie plus compacte : elle peut faire plusieurs phrases */
  .cat-hero--author .cat-hero__desc { font-size: max(1.0625em, 16px); line-height: 1.45; }
}

/* Page d'un auteur : photo et biographie sous le nom */
.author-hero { display: flex; align-items: flex-start; gap: 1.2em; max-width: 46em; }
.author-hero .avatar--lg { flex: none; }
.author-hero__bio p + p { margin-top: .6em; }
@media screen and (max-width: 767px) {
  .a-author { gap: .9em; padding: 1.55em 1.15em 1.25em; }
  .avatar--lg { width: 3.4em; height: 3.4em; }
}

/* ---------- 13. Nos rubriques : mosaïque de toutes les catégories ------- */
.cats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25em; }
.cat-card {
  --cc: var(--c-paper);
  --cc-fg: var(--c-carbon);
  grid-column: span 4;
  position: relative; display: flex; flex-direction: column; gap: 1em;
  min-height: 0; padding: 1.1em;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--cc); color: var(--cc-fg);
  overflow: clip; isolation: isolate; container-type: inline-size;
  transition: transform .6s var(--ease-bounce);
}
.cat-card[data-tone="ember"] { --cc: var(--c-ember); }
.cat-card[data-tone="violet"] { --cc: var(--c-violet); --cc-fg: var(--c-paper); }
.cat-card[data-tone="blue"] { --cc: var(--c-blue); }
.cat-card[data-tone="mint"] { --cc: var(--c-mint); }
.cat-card[data-tone="sun"] { --cc: var(--c-sun); }
.cat-card--big { flex-direction: row; min-height: 23em; }
.cat-card--big:nth-child(1) { grid-column: span 7; }
.cat-card--big:nth-child(2) { grid-column: span 5; }
.cat-card__media {
  position: relative; flex: none; aspect-ratio: 2 / 1; min-height: 0; overflow: clip;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); background: rgba(0, 0, 0, .15);
}
.cat-card--big .cat-card__media { order: 2; width: 46%; aspect-ratio: auto; }
.cat-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-slush); }
.cat-card__sticker { --s: 4.4em; top: .45em; right: .45em; z-index: 3; }
.cat-card--big .cat-card__sticker { --s: 5.4em; }
.cat-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1em; flex: 1; min-width: 0; }
.cat-card__top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.cat-card--big .cat-card__top { justify-content: flex-start; }
.cat-card__count {
  padding: .55em .85em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-paper); color: var(--c-carbon);
  font-size: max(.75em, 11px); font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cat-card__title {
  margin-top: auto; padding-top: .08em;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .8; white-space: nowrap;
  font-size: 4em; font-size: 14cqi;
  transform-origin: left bottom; transition: transform .6s var(--ease-bounce);
}
.cat-card--big .cat-card__title { font-size: 13cqi; }
.cat-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.cat-card__text { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.cat-card__desc { font-size: max(.9375em, 14px); font-weight: 600; line-height: 1.35; }
.cat-card__latest {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-top: .8em; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: max(.875em, 13px); line-height: 1.4;
}
.cat-card__latest .t-label { margin-right: .6em; }
.cat-card__go {
  display: grid; place-items: center; flex: none; width: 3.2em; height: 3.2em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-paper); color: var(--c-carbon);
  transition: transform .5s var(--ease-bounce), background-color .25s var(--ease-color), color .25s var(--ease-color);
}
.cat-card__go svg { width: 1.2em; height: 1.2em; }
@media (hover: hover) {
  .cat-card:hover { transform: translateY(-.4em) rotate(-.6deg); }
  .cat-card:hover .cat-card__media img { transform: scale(1.09); }
  .cat-card:hover .cat-card__title { transform: skewX(-9deg); }
  .cat-card:hover .cat-card__go { transform: rotate(-45deg); background: var(--c-carbon); color: var(--c-paper); }
  .cat-card:hover .sticker__in { transform: scale(1.12) rotate(-8deg); }
  .cat-card:hover .needle { transform: rotate(190deg); }
}
@media screen and (max-width: 991px) {
  .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card, .cat-card--big:nth-child(2) { grid-column: span 1; min-height: 0; }
  .cat-card--big:nth-child(1) { grid-column: 1 / -1; }
  .cat-card--big:nth-child(2) { flex-direction: column; }
  .cat-card--big:nth-child(2) .cat-card__media { order: 0; width: auto; aspect-ratio: 16 / 9; }
  .cat-card--big:nth-child(2) .cat-card__title { font-size: 16cqi; }
}
@media screen and (max-width: 767px) {
  .cats-grid { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .cat-card, .cat-card--big:nth-child(n) { grid-column: 1 / -1; flex-direction: column; min-height: 0; }
  .cat-card--big .cat-card__media { order: 0; width: auto; aspect-ratio: 16 / 9; }
  .cat-card__title, .cat-card--big .cat-card__title { font-size: 17cqi; }
  .cat-card__sticker, .cat-card--big .cat-card__sticker { --s: 4em; }
}

/* ---------- 14. Carrousel centré (Slush centered slider) ---------------- */
.slider { position: relative; }
.slider__list { display: flex; touch-action: pan-y; cursor: grab; user-select: none; }
.slider__list:active { cursor: grabbing; }
.slide { flex: none; width: 31em; padding: 0 .5em; }
.slide-card {
  --slide-bg: var(--c-sun);
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5em;
  height: 38em; padding: 1.75em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--slide-bg); overflow: clip; color: var(--c-carbon);
  transition: transform .7s var(--ease-bounce);
}
.slide:not(.active) .slide-card { transform: scale(.94); }
.slide-card__top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.slide-card__title { font-family: var(--font-display); font-size: 4.4em; line-height: .84; text-transform: uppercase; padding-top: .08em; }
.slide-card__title .slant { display: inline-block; transform-origin: left bottom; }
.slide-card__media { position: relative; height: 13em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); overflow: clip; }
.slide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-slush); }
.slide-card .sticker { --s: 6.5em; right: 1.25em; top: 9.5em; }
@media (hover: hover) { .slide-card:hover .slide-card__media img { transform: scale(1.08); } }
.slide-card[data-tone="violet"] { color: var(--c-paper); }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 1em; margin-top: 2.5em; }
.slider__bullets { display: flex; gap: .45em; }
.slider__bullet { width: .75em; height: .75em; border-radius: 100em; border: var(--bw) solid var(--c-carbon); background: transparent; transition: width .5s var(--ease-bounce), background-color .2s; }
.slider__bullet.active { width: 2.4em; background: var(--c-carbon); }
@media screen and (max-width: 767px) {
  .slide { width: 82vw; }
  .slide-card { height: 31em; padding: 1.35em; }
  .slide-card__title { font-size: 3.2em; }
  .slide-card__media { height: 10em; }
  .slide-card .sticker { --s: 4.5em; top: 7.5em; }
}

/* ---------- 15. Essais & fiches techniques ------------------------------ */
.essais { color: var(--c-paper); }
.essais__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2em; align-items: end; margin-bottom: 2.75em; }
.essais__head .h-display { color: var(--c-paper); }
.tabs-nav { position: relative; display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 2.25em; }
.tabs-nav__item {
  position: relative; display: inline-flex; align-items: center; gap: .55em;
  padding: .95em 1.25em; border: var(--bw) solid rgba(255, 255, 255, .9); border-radius: 100em;
  font-size: .8125em; font-weight: 700; line-height: 1; letter-spacing: .032em; text-transform: uppercase;
  color: var(--c-paper); transition: color .3s var(--ease-color);
}
.tabs-nav__item span { position: relative; z-index: 1; }
.tabs-nav__item .tabs-nav__dot { width: .7em; height: .7em; border-radius: 100em; background: var(--dot, var(--c-sun)); border: 1px solid #000; position: relative; z-index: 1; }
.tabs-nav__item:has(.tabs-nav__bg) { color: var(--c-carbon); }
.tabs-nav__bg { position: absolute; inset: calc(var(--bw) * -1); border-radius: 100em; background: var(--c-paper); z-index: 0; pointer-events: none; }
.essai-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 1.25em; align-items: stretch; }
.essai-visual {
  position: relative; min-height: 36em; border: var(--bw) solid var(--c-paper); border-radius: var(--r-card);
  background: var(--visual-bg, var(--c-ember)); overflow: clip;
}
.essai-visual__img { position: absolute; inset: 0; opacity: 0; }
.essai-visual__img.active { opacity: 1; }
.essai-visual__img img { width: 100%; height: 100%; object-fit: cover; }
.essai-visual__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); pointer-events: none; }
.essai-visual__meta { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.3em; display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; color: var(--c-paper); }
.rating {
  position: absolute; right: 1.25em; top: 1.25em; z-index: 3;
  display: grid; place-items: center; width: 7.5em; height: 7.5em; border-radius: 100em;
  background: var(--c-sun); color: var(--c-carbon); border: var(--bw) solid var(--c-carbon);
  box-shadow: 0 .45em 0 0 var(--c-carbon);
  rotate: -10deg; text-align: center;
}
.rating b { display: block; font-family: var(--font-display); font-size: 2.9em; line-height: .8; font-weight: 400; padding-top: .08em; }
.rating small { display: block; font-size: .72em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-top: .3em; }
.fiche {
  display: flex; flex-direction: column; gap: 1.5em;
  padding: 2em 2.1em 2.1em; border: var(--bw) solid var(--c-paper); border-radius: var(--r-card); background: var(--c-night-2);
}
.fiche__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.fiche__name { font-family: var(--font-display); font-size: 5.6em; line-height: .82; text-transform: uppercase; padding-top: .08em; margin-bottom: -.06em; }
.fiche__kind { opacity: .7; }
.fiche__compare { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.select {
  appearance: none; -webkit-appearance: none;
  padding: .85em 2.6em .85em 1.15em; border: var(--bw) solid var(--c-paper); border-radius: 100em;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1em center / 1em;
  font-size: .8125em; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; color: var(--c-paper); cursor: pointer;
}
.select option { color: #000; }
.specs { display: flex; flex-direction: column; gap: .2em; }
.spec { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 7.5em; align-items: center; gap: 1em; padding: .62em 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.spec__label { font-size: max(.8125em, 12px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .72; }
.spec__bars { display: flex; flex-direction: column; gap: .3em; }
.spec__bar { position: relative; height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .1); overflow: clip; }
.spec__fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 1em; background: var(--fill, var(--c-sun)); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.spec__fill--b { --fill: var(--c-blue); }
.spec__bar--b { display: none; }
.is-comparing .spec__bar--b { display: block; }
.spec__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: max(.9375em, 13px); white-space: nowrap; }
.spec__value small { font-size: .78em; opacity: .65; font-weight: 600; margin-left: .2em; }
.spec__value .b { display: none; color: var(--c-blue); }
.is-comparing .spec__value .b { display: block; }
.legend { display: none; gap: 1.2em; font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.is-comparing .legend { display: flex; }
.legend i { display: inline-block; width: .8em; height: .8em; border-radius: 100em; margin-right: .45em; vertical-align: -.05em; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.proscons ul { list-style: none; display: flex; flex-direction: column; gap: .55em; }
.proscons li { display: flex; gap: .6em; font-size: max(.9375em, 13px); line-height: 1.35; }
.proscons li::before {
  content: "+"; display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 100em;
  background: var(--c-mint); color: #000; font-weight: 800; font-size: .85em; border: 1px solid #000;
}
.proscons .cons li::before { content: "−"; background: var(--c-ember); }
.proscons h4 { font-size: .75em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin-bottom: .8em; }
.fiche__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-top: auto; }
.fiche__price { font-size: max(.9375em, 13px); }
.fiche__price b { font-size: 1.35em; letter-spacing: -.02em; }
@media screen and (max-width: 991px) {
  .essai-view { grid-template-columns: minmax(0, 1fr); }
  .essai-visual { min-height: 26em; }
  .essais__head { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
  .tabs-nav { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--pad-x) * -1); margin-right: calc(var(--pad-x) * -1); padding: .3em var(--pad-x); scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tabs-nav__item { flex: none; }
  .essai-visual { min-height: 20em; }
  .rating { width: 6em; height: 6em; }
  .fiche { padding: 1.4em 1.25em 1.5em; }
  .fiche__name { font-size: 3.8em; }
  .spec { grid-template-columns: 7.2em minmax(0, 1fr) 5.6em; gap: .6em; }
  .proscons { grid-template-columns: 1fr; }
}

/* Variante claire (pages d'article) */
.fiche--light { background: var(--c-paper); color: var(--c-carbon); border-color: var(--c-carbon); }
.fiche--light .spec { border-top-color: rgba(0, 0, 0, .12); }
.fiche--light .spec__bar { background: rgba(0, 0, 0, .08); }
.fiche--light .spec__fill { --fill: var(--c-ember); }

/* ---------- 17. Électrique & outils -------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5em; align-items: start; }
.split--center { align-items: center; }

.tool {
  position: relative; display: flex; flex-direction: column; gap: 1.5em;
  padding: 2em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--c-paper); color: var(--c-carbon);
}
.tool__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.tool__title { font-family: var(--font-display); font-size: 3.4em; line-height: .84; text-transform: uppercase; padding-top: .08em; }
.range { display: flex; flex-direction: column; gap: .6em; }
.range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.range__label { font-size: max(.8125em, 12px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.range__value { font-weight: 700; font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1.4em; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: .55em; border-radius: 1em; background: linear-gradient(90deg, var(--c-carbon) var(--fill, 50%), var(--c-mist) var(--fill, 50%)); border: 1px solid var(--c-carbon); }
input[type="range"]::-moz-range-track { height: .55em; border-radius: 1em; background: var(--c-mist); border: 1px solid var(--c-carbon); }
input[type="range"]::-moz-range-progress { height: .55em; border-radius: 1em; background: var(--c-carbon); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.5em; height: 1.5em; margin-top: -.55em; border-radius: 100em;
  background: var(--thumb, var(--c-sun)); border: var(--bw) solid var(--c-carbon); transition: transform .4s var(--ease-bounce);
}
input[type="range"]::-moz-range-thumb { width: 1.3em; height: 1.3em; border-radius: 100em; background: var(--thumb, var(--c-sun)); border: var(--bw) solid var(--c-carbon); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.tool__result { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.result {
  display: flex; flex-direction: column; gap: .4em; padding: 1.1em 1.2em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm);
  background: var(--res-bg, var(--c-mist));
}
.result__value { font-family: var(--font-display); font-size: 3.1em; line-height: .84; padding-top: .08em; font-variant-numeric: tabular-nums; }
.result__label { font-size: max(.75em, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.result--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.tool__note { font-size: max(.8125em, 12px); opacity: .62; line-height: 1.4; }
.toggle { display: inline-flex; padding: .3em; border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-mist); gap: .2em; }
.toggle button { padding: .65em 1em; border-radius: 100em; font-size: .75em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: background-color .25s var(--ease-color), color .25s; }
.toggle button[aria-pressed="true"] { background: var(--c-carbon); color: var(--c-paper); }
@media screen and (max-width: 991px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5em; }
}
@media screen and (max-width: 767px) {
  .tool { padding: 1.4em; }
  .tool__title { font-size: 2.6em; }
  .result__value { font-size: 2.5em; }
}

/* Jauge bonus-malus façon compteur */
.gauge { position: relative; width: 100%; max-width: 26em; margin: 0 auto; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge__needle { transform-origin: 160px 170px; transform-box: view-box; }
.gauge__value { position: absolute; left: 50%; bottom: 0; translate: -50% 0; text-align: center; }
.gauge__value b { display: block; font-family: var(--font-display); font-size: 4.4em; line-height: .8; font-weight: 400; padding-top: .08em; font-variant-numeric: tabular-nums; }
.gauge__value span { display: inline-block; margin-top: .45em; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.stepper__label { font-size: max(.875em, 13px); font-weight: 600; line-height: 1.3; max-width: 17em; }
.stepper__ctrl { display: flex; align-items: center; gap: .5em; }
.stepper__btn { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 100em; border: var(--bw) solid var(--c-carbon); background: var(--c-paper); font-size: 1.1em; font-weight: 700; line-height: 1; transition: transform .45s var(--ease-bounce), background-color .2s; }
.stepper__btn:active { transform: scale(.9); }
@media (hover: hover) { .stepper__btn:hover { background: var(--c-sun); } }
.stepper__val { min-width: 2.2em; text-align: center; font-weight: 700; font-size: 1.25em; font-variant-numeric: tabular-nums; }

/* Réflexes assurance (cartes carrées Slush) */
.square-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2em;
  aspect-ratio: 1; padding: 1.75em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--sq-bg, var(--c-sun)); color: var(--c-carbon); overflow: clip;
}
.square-card__num { font-family: var(--font-display); font-size: 6em; line-height: .78; padding-top: .08em; }
.square-card__title { font-size: 1.35em; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.square-card p { font-size: max(.875em, 13px); line-height: 1.4; opacity: .78; }
@media screen and (max-width: 767px) {
  .square-card { aspect-ratio: auto; min-height: 15em; }
}

/* ---------- 18. Actualité ------------------------------------------------ */
.news { list-style: none; border-top: var(--bw) solid var(--c-carbon); }
.news__row { border-bottom: var(--bw) solid var(--c-carbon); }
.news__link {
  position: relative; display: grid; grid-template-columns: 8.5em 9em minmax(0, 1fr) auto; align-items: center; gap: 1.5em;
  padding: 1.6em .25em; transition: padding .5s var(--ease-bounce), background-color .3s var(--ease-color);
}
.news__date { font-weight: 700; font-variant-numeric: tabular-nums; font-size: max(.875em, 12px); opacity: .7; }
.news__title { font-size: 2em; font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.news__thumb { display: none; }
.news__go { display: grid; place-items: center; width: 3em; height: 3em; border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-paper); transition: transform .5s var(--ease-bounce), background-color .2s; }
.news__go svg { width: 1.2em; height: 1.2em; }
@media (hover: hover) {
  .news__link:hover { padding-left: 1.25em; padding-right: 1.25em; }
  .news__link:hover .news__go { transform: rotate(-45deg); background: var(--row-color, var(--c-sun)); }
}
.preview {
  position: fixed; left: 0; top: 0; z-index: 90; width: 20em; aspect-ratio: 4 / 3; pointer-events: none;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); overflow: clip; background: var(--c-mist);
  opacity: 0;
}
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .preview { display: none; } }
@media screen and (max-width: 767px) {
  .news__link { grid-template-columns: 5.5em minmax(0, 1fr); grid-template-areas: "thumb tag" "thumb title" "thumb date"; gap: .45em 1em; padding: 1.2em 0; }
  .news__thumb { display: block; grid-area: thumb; width: 5.5em; aspect-ratio: 1; border: var(--bw) solid var(--c-carbon); border-radius: 1em; overflow: clip; align-self: start; }
  .news__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .news__date { grid-area: date; }
  .news__tag { grid-area: tag; }
  .news__title { grid-area: title; font-size: 1.3em; }
  .news__go { display: none; }
}

/* ---------- 19. Formulaires ---------------------------------------------- */
.field { position: relative; display: flex; flex-direction: column; gap: .55em; }
.field__label { font-size: max(.8125em, 12px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.input, .textarea {
  width: 100%; padding: 1.05em 1.35em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-paper); color: var(--c-carbon); font-size: max(1em, 16px); font-weight: 500; outline: none;
  transition: box-shadow .35s var(--ease-bounce), background-color .2s;
}
.textarea { border-radius: var(--r-sm); min-height: 11em; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: rgba(0, 0, 0, .45); }
.input:focus, .textarea:focus { box-shadow: 0 0 0 .3em var(--focus-ring, var(--c-sun)); }
.field.is-invalid .input, .field.is-invalid .textarea { background: #fff1ec; }
.field__error { display: none; font-size: max(.8125em, 12px); font-weight: 600; color: #c53a00; }
.field.is-invalid .field__error { display: block; }
.check { display: flex; align-items: flex-start; gap: .75em; cursor: pointer; font-size: max(.875em, 13px); line-height: 1.4; text-align: left; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border: var(--bw) solid var(--c-carbon); border-radius: .45em; background: var(--c-paper);
  transition: background-color .2s, transform .45s var(--ease-bounce);
}
.check__box svg { width: 1em; height: 1em; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s var(--ease-bounce); }
.check input:checked + .check__box { background: var(--c-mint); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: var(--bw) solid var(--c-blue); outline-offset: .2em; }

/* ---------- 20. Pied de page -------------------------------------------- */
.footer { color: var(--c-paper); padding: 2em 0 1.5em; }
.footer__marquee { padding: 1em 0 2.5em; }
.footer__word { font-family: var(--font-display); font-size: 13em; line-height: .78; padding: .08em .2em 0; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: .25em; }
.footer__word:nth-child(even) { transform: skewX(-9deg); color: transparent; -webkit-text-stroke: var(--bw) var(--c-paper); }
.footer__word .sticker-inline { width: .55em; height: .55em; }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 2.5em; padding-top: 3em; border-top: 1px solid rgba(255, 255, 255, .2); }
.footer__brand { display: flex; flex-direction: column; gap: 1.25em; align-items: flex-start; max-width: 24em; }
.footer__logo { display: flex; align-items: center; gap: .75em; font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.footer__logo .circle-btn { width: 2.8em; height: 2.8em; }
.footer h3 { font-size: .75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .5; margin-bottom: 1.2em; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: .7em; }
.footer li a { font-size: max(1em, 14px); font-weight: 600; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; margin-top: 3.5em; padding-top: 1.5em; border-top: 1px solid rgba(255, 255, 255, .2); font-size: max(.8125em, 12px); opacity: .62; }
.footer__bottom a { text-decoration: underline; text-underline-offset: .2em; }
.to-top { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }
@media screen and (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 767px) {
  .footer__word { font-size: 6.5em; }
}

/* ---------- 21. Pages rubrique ------------------------------------------ */
.cat-hero { position: relative; min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 11em 0 3.5em; }
.cat-hero .h-mega { position: relative; z-index: 1; }
.cat-hero__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3em; align-items: end; margin-top: 2.5em; }
.cat-hero__desc { max-width: 30em; }
.cat-hero__stats { display: flex; gap: .6em; flex-wrap: wrap; justify-content: flex-end; }
.stat { display: flex; flex-direction: column; gap: .35em; padding: 1em 1.3em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); background: var(--c-paper); min-width: 9em; }
.stat b { font-family: var(--font-display); font-size: 2.8em; line-height: .8; font-weight: 400; padding-top: .08em; }
.stat span { font-size: max(.75em, 11px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cat-hero .sticker { --s: 13em; right: 4%; top: 18%; }
.cat-hero__bg-word {
  position: absolute; right: -.05em; top: 6%; z-index: 0; font-family: var(--font-display); font-size: 40em; line-height: .76;
  color: transparent; -webkit-text-stroke: var(--bw) rgba(0, 0, 0, .25); text-transform: uppercase; pointer-events: none; white-space: nowrap;
}
.stat--date b { font-size: 1.75em; line-height: .9; }
.panel--violet .cat-hero__bg-word { -webkit-text-stroke-color: rgba(255, 255, 255, .28); }
.panel--violet .stat { color: var(--c-carbon); }
.filters-bar { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; flex-wrap: wrap; margin-bottom: 2.5em; }
.legal p + p { margin-top: .9em; }
.legal { line-height: 1.55; max-width: 46em; }
.empty { padding: 3em; border: var(--bw) dashed var(--c-carbon); border-radius: var(--r-card); text-align: center; font-weight: 600; }
@media screen and (max-width: 991px) {
  .cat-hero__row { grid-template-columns: minmax(0, 1fr); }
  .cat-hero__stats { justify-content: flex-start; }
  .cat-hero .sticker { --s: 8em; top: 14%; }
}
@media screen and (max-width: 767px) {
  .cat-hero { min-height: 64vh; padding: 8.5em 0 2.25em; }
  .cat-hero .sticker { --s: 6em; top: 12%; right: 6%; }
  .stat { min-width: 0; flex: 1; }
}

/* ---------- 22. Article --------------------------------------------------- */
.progress { position: fixed; left: 0; top: 0; z-index: 95; width: 100%; height: .35em; background: transparent; pointer-events: none; }
.progress__bar { height: 100%; background: var(--progress, var(--c-ember)); transform-origin: left center; transform: scaleX(0); }
.a-hero { padding: 11em 2em 3em; position: relative; max-width: calc(99em + 4em); } /* aligné sur sommaire + texte + encadré */
.a-hero__meta { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin-bottom: 2em; }
.a-hero__title { max-width: 13em; font-size: 7em; }
.a-hero__lead { max-width: 34em; margin-top: 2.2em; }
.a-hero__by { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; margin-top: 2.5em; padding-top: 1.5em; border-top: var(--bw) solid var(--c-carbon); }
.share { display: flex; gap: .4em; }
.share .circle-btn { width: 2.8em; height: 2.8em; padding: .7em; }
.a-cover-wrap { max-width: calc(68em + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); } /* même largeur que le texte */
.a-end-wrap { max-width: 62em; padding-bottom: 5em; }
.a-cover { position: relative; aspect-ratio: 16 / 9; max-height: 78vh; overflow: clip; border-radius: var(--r-panel); background: var(--c-mist); }
.a-cover img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.a-cover__credit { position: absolute; right: 1.25em; bottom: 1.25em; z-index: 2; }
.a-layout { display: grid; grid-template-columns: 13em minmax(0, 68em) 13em; justify-content: center; gap: 2.5em; padding: 5em 2em; }
.a-aside { position: relative; }
.a-aside__inner { position: sticky; top: 7em; display: flex; flex-direction: column; gap: 1.2em; }
.toc { list-style: none; display: flex; flex-direction: column; gap: .2em; border-left: var(--bw) solid var(--c-carbon); }
.toc a { display: block; padding: .5em 0 .5em 1em; margin-left: calc(var(--bw) * -1); border-left: var(--bw) solid transparent; font-size: max(.875em, 13px); font-weight: 600; line-height: 1.3; opacity: .55; transition: opacity .2s, border-color .2s; }
.toc a.is-active { opacity: 1; border-left-color: var(--progress, var(--c-ember)); }
.prose { font-size: max(1.3em, 18px); line-height: 1.62; letter-spacing: -.01em; }
.prose > * + * { margin-top: 1.25em; }
.prose > p.is-dropcap::first-letter {
  float: left; font-family: var(--font-display); font-size: 4.6em; line-height: .78; padding: .1em .12em 0 0; margin-top: .02em; color: var(--c-carbon);
}
.prose h2 { font-size: 1.65em; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; margin-top: 2.2em; scroll-margin-top: 6em; }
.prose ul { list-style: none; display: flex; flex-direction: column; gap: .7em; }
.prose ul li { position: relative; padding-left: 1.6em; }
.prose ul li::before { content: ""; position: absolute; left: .1em; top: .55em; width: .7em; height: .7em; border-radius: 100em; border: var(--bw) solid var(--c-carbon); background: var(--progress, var(--c-ember)); }
.prose a { text-decoration: underline; text-decoration-thickness: var(--bw); text-underline-offset: .2em; }
.prose strong { font-weight: 700; }
.pull {
  position: relative; margin: 2.4em 0 !important; padding: 2.2em 2em 2em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--progress, var(--c-sun)); rotate: -1.2deg;
}
.pull p { font-family: var(--font-display); font-size: 2.1em; line-height: .98; text-transform: uppercase; letter-spacing: .005em; }
.pull cite { display: block; margin-top: 1em; font-style: normal; font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pull .sticker { --s: 4.5em; right: -1.4em; top: -1.6em; }
.figure { margin: 2.2em 0 !important; }
.figure__media { border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); overflow: clip; }
.figure__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.figure figcaption { margin-top: .8em; font-size: .7em; line-height: 1.4; opacity: .7; }
.a-specs { margin: 2.6em 0 !important; font-size: .8em; }
.a-specs .fiche { gap: 1.25em; }
.a-tool { margin: 2.6em 0 !important; font-size: .8em; }
.verdict { display: flex; flex-direction: column; gap: 1em; }
.a-end { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; flex-wrap: wrap; margin-top: 3em; padding-top: 1.5em; border-top: var(--bw) solid var(--c-carbon); font-size: .8em; }
.a-tags { display: flex; gap: .5em; flex-wrap: wrap; }
.a-next { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em; }
.a-next__item { display: flex; flex-direction: column; gap: .8em; padding: 1.75em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--c-paper); transition: transform .6s var(--ease-bounce), background-color .3s; }
.a-next__item:last-child { text-align: right; align-items: flex-end; }
.a-next__item .h-sub { max-width: 18em; }
@media (hover: hover) { .a-next__item:hover { transform: translateY(-.3em); background: var(--c-sun); } }
@media screen and (max-width: 1199px) {
  .a-layout { grid-template-columns: minmax(0, 1fr) 13em; gap: 2.5em; }
  .a-hero { max-width: none; }
  .a-aside--left { display: none; }
  /* image du haut alignée sur la colonne de texte (l'encadré « Rubrique » est à droite) */
  .a-cover-wrap { max-width: none; padding: 0 2em; }
  .a-cover { margin-right: 15.5em; }
}
@media screen and (max-width: 991px) {
  .a-layout { grid-template-columns: minmax(0, 1fr); padding-top: 3.5em; padding-bottom: 3.5em; }
  .a-aside--right { display: none; }
  .a-hero__title { font-size: 6em; }
  .a-cover { margin-right: 0; }
}
@media screen and (max-width: 767px) {
  .a-hero { padding-top: 8em; padding-bottom: 2em; }
  .a-hero__title { font-size: 3.8em; }
  .a-cover { aspect-ratio: 4 / 3; }
  .a-layout { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .a-hero { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .a-cover-wrap { padding: 0 var(--pad-x); }
  .prose { font-size: 17.5px; }
  .pull { padding: 1.6em 1.3em 1.4em; }
  .pull p { font-size: 1.6em; }
  .a-next { grid-template-columns: 1fr; }
  .a-next__item:last-child { text-align: left; align-items: flex-start; }
}

/* ---------- 23. Contact -------------------------------------------------- */
.contact-hero { position: relative; padding: 11em 0 4em; }
.contact-hero .h-mega { position: relative; z-index: 1; }
.contact-hero .sticker { z-index: 2; }
.contact-hero__lead { max-width: 30em; margin-top: 2.5em; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25em; align-items: start; }
.form-card { display: flex; flex-direction: column; gap: 1.5em; padding: 2.5em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--c-paper); }
.contact-form { display: flex; flex-direction: column; gap: 1.6em; }
.contact-form[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.subjects { display: flex; flex-wrap: wrap; gap: .45em; }
.subject input { position: absolute; opacity: 0; pointer-events: none; }
.subject span {
  display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.2em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  font-size: .8125em; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; cursor: pointer; background: var(--c-paper);
  transition: background-color .25s var(--ease-color), transform .5s var(--ease-bounce);
}
.subject span i { width: .7em; height: .7em; border-radius: 100em; background: var(--sub-c, var(--c-sun)); border: 1px solid #000; }
.subject input:checked + span { background: var(--sub-c, var(--c-sun)); transform: rotate(-2deg) scale(1.04); }
.subject input:focus-visible + span { outline: var(--bw) solid var(--c-blue); outline-offset: .2em; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 1.25em; flex-wrap: wrap; }
.form-done { display: none; flex-direction: column; align-items: center; text-align: center; gap: 1.25em; padding: 3em 1em; }
.form-done.is-on { display: flex; }
.form-done .sticker { position: relative; --s: 9em; }
.info-cards { display: flex; flex-direction: column; gap: 1.25em; }
.info-card { display: flex; flex-direction: column; gap: .8em; padding: 1.75em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--info-bg, var(--c-paper)); }
.info-card a { font-weight: 700; word-break: break-word; }
.faq { border-top: var(--bw) solid var(--c-carbon); }
.faq__item { border-bottom: var(--bw) solid var(--c-carbon); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1em; width: 100%; padding: 1.4em 0; text-align: left; font-size: 1.4em; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.faq__icon { position: relative; flex: none; width: 2.2em; height: 2.2em; border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-paper); transition: transform .5s var(--ease-bounce), background-color .2s; font-size: .7em; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: var(--bw); background: currentColor; translate: -50% -50%; transition: transform .35s var(--ease-slush); }
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); background: var(--c-sun); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { overflow: clip; height: 0; }
.faq__a > div { padding-bottom: 1.5em; max-width: 46em; }
@media screen and (max-width: 991px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
  .contact-hero { padding: 8.5em 0 2.5em; }
  .form-card { padding: 1.5em; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 24. Transition de page (Slush) ------------------------------ */
.pt { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.pt__el { display: none; position: absolute; inset: 0; border-radius: 2em; }
.page.is-transitioning { height: 100vh; overflow: clip; }
.main[data-barba="container"] { position: relative; background: var(--c-carbon); }
.main::after {
  content: ""; position: absolute; inset: 0; z-index: 10; background: var(--c-paper);
  opacity: var(--overlay, 0); pointer-events: none;
}

/* ---------- 25. Utilitaires & mouvement réduit -------------------------- */
.u-center { text-align: center; }
.u-mt-2 { margin-top: 2em; }
.u-mt-3 { margin-top: 3em; }
.u-flex-gap { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.hide-mobile { }
@media screen and (max-width: 767px) { .hide-mobile { display: none !important; } }
.only-mobile { display: none !important; }
@media screen and (max-width: 767px) { .only-mobile { display: initial !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn, .card, .circle-btn, .chip, .sticker__in { transition-duration: .01ms !important; }
}

/* ---------- 26. WordPress -------------------------------------------------- */
/* Barre d'administration (visible seulement une fois connecté) */
.admin-bar .nav { margin-top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .progress { top: var(--wp-admin--admin-bar--height, 32px); }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}
/* Champ piège à robots du formulaire de contact */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: .9em 1.2em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); background: #fff1ec; font-weight: 600; font-size: max(.875em, 13px); }
.form-msg[hidden] { display: none; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* En-têtes simples (recherche, étiquettes, auteurs, 404) */
.cat-hero--simple { min-height: 0; padding: 11em 0 3.5em; }
.cat-hero--simple .h-large { position: relative; z-index: 1; max-width: 14em; }
@media screen and (max-width: 767px) { .cat-hero--simple { padding: 8.5em 0 2.25em; } }

/* Pastilles de sous-rubriques (liens) et pagination */
.chips a.chip { text-decoration: none; }
.pager { margin-top: 3.5em; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; }
.pager .page-numbers {
  display: inline-flex; align-items: center; min-height: 2.9em; padding: .75em 1.2em; border: var(--bw) solid var(--c-carbon);
  border-radius: 100em; background: var(--c-paper); font-weight: 700; font-size: max(.875em, 13px); line-height: 1;
  transition: background-color .2s, transform .5s var(--ease-bounce);
}
.pager .page-numbers.current { background: var(--c-carbon); color: var(--c-paper); }
.pager .page-numbers.dots { border-color: transparent; background: none; }
@media (hover: hover) { .pager a.page-numbers:hover { background: var(--c-sun); transform: translateY(-.15em); } }

/* Pages et articles sans colonnes latérales */
.a-layout--page { grid-template-columns: minmax(0, 46em); }
.a-cover figcaption { position: absolute; right: 1.25em; bottom: 1.25em; z-index: 2; max-width: 70%; }

/* Carrousel « À lire aussi » : titres d'articles complets (souvent longs) */
.slide-card__title { line-height: .9; }
.slide-card__title .slant { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; padding: .06em .12em .06em 0; transform: skewX(-9deg); }
.slide-card__title.is-long { font-size: 3.1em; }
.slide-card__title.is-xlong { font-size: 2.45em; }
.slide-card__title.is-xlong .slant { -webkit-line-clamp: 5; }
.slide-card .sticker { top: auto; bottom: 11.4em; right: 1.1em; --s: 5.6em; }
.a-next__item .t-label { display: inline-flex; align-items: center; gap: .5em; }
@media screen and (max-width: 767px) {
  .slide-card__title.is-long { font-size: 2.5em; }
  .slide-card__title.is-xlong { font-size: 2em; }
  .slide-card .sticker { --s: 4.2em; bottom: 8.6em; top: auto; }
}

/* Contenu de l'éditeur de blocs (Gutenberg) dans un article */
.prose h3 { font-size: 1.3em; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; margin-top: 1.9em; scroll-margin-top: 6em; }
.prose h4 { font-size: 1.1em; font-weight: 700; line-height: 1.25; margin-top: 1.6em; }
.prose ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: .7em; }
.prose ol li::marker { font-weight: 700; }
.prose img { max-width: 100%; height: auto; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose .wp-block-image, .prose .wp-caption { margin-top: 2.2em; margin-bottom: 2.2em; }
.prose .wp-block-image img, .prose .wp-caption img, .prose .wp-block-gallery img { border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); }
.prose figcaption, .prose .wp-element-caption, .prose .wp-caption-text { margin-top: .8em; font-size: .7em; line-height: 1.4; opacity: .7; text-align: left; }
.prose .blocks-gallery-grid, .prose .wp-block-gallery ul { list-style: none; }
.prose .blocks-gallery-grid li::before, .prose .wp-block-gallery li::before { content: none; }
.prose blockquote, .prose .wp-block-quote, .prose .wp-block-pullquote {
  position: relative; margin: 2.4em 0; padding: 2.2em 2em 2em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--progress, var(--c-sun)); rotate: -1.2deg; text-align: left;
}
.prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; background: none; rotate: none; }
.prose blockquote p, .prose .wp-block-pullquote p { font-family: var(--font-display); font-size: 2.1em; line-height: .98; text-transform: uppercase; letter-spacing: .005em; }
.prose blockquote cite, .prose .wp-block-pullquote cite { display: block; margin-top: 1em; font-style: normal; font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.prose table { width: 100%; border-collapse: collapse; font-size: .85em; }
.prose th, .prose td { padding: .7em .9em; border-bottom: var(--bw) solid var(--c-carbon); text-align: left; vertical-align: top; }
.prose th { font-weight: 700; }
.prose hr, .prose .wp-block-separator { border: 0; height: var(--bw); background: var(--c-carbon); margin: 2.5em 0; opacity: 1; }
.prose code { font-size: .9em; padding: .1em .35em; border-radius: .3em; background: var(--c-mist); }
.prose pre { padding: 1.2em; border-radius: var(--r-sm); background: var(--c-night); color: var(--c-paper); overflow: auto; font-size: .8em; }
.prose pre code { background: none; padding: 0; }
.prose .alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.prose .alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.prose .wp-block-embed { margin: 2.2em 0; }
.prose .wp-block-embed iframe { border-radius: var(--r-card); max-width: 100%; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6em; }
.prose .wp-block-button__link {
  display: inline-flex; padding: 1em 1.5em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-sun); color: var(--c-carbon); font-weight: 700; text-decoration: none;
}
.prose::after { content: ""; display: table; clear: both; }
@media screen and (max-width: 767px) {
  .prose blockquote, .prose .wp-block-quote, .prose .wp-block-pullquote { padding: 1.6em 1.3em 1.4em; }
  .prose blockquote p, .prose .wp-block-pullquote p { font-size: 1.6em; }
  .prose .alignleft, .prose .alignright { float: none; margin: 1.5em 0; max-width: 100%; }
}

/* Titre géant des rubriques : réduit si le mot le plus long dépasse la largeur de l'écran */
.cat-hero .h-mega { font-size: min(17.5em, calc((min(100vw, var(--site-max)) - 8em) / (var(--chars, 6) * .47))); padding-top: .16em; }
@media screen and (max-width: 991px) { .cat-hero .h-mega { font-size: min(12em, calc((100vw - 7.5em) / (var(--chars, 6) * .47))); } }
@media screen and (max-width: 767px) { .cat-hero .h-mega { font-size: min(7.6em, calc((100vw - 3.5em) / (var(--chars, 6) * .47))); } }

/* Divers */
.u-mb-2 { margin-bottom: 2em; }
.a-hero.a-hero--page { padding-bottom: 1em; max-width: calc(46em + 4em); }
.a-hero__title.is-long { font-size: 5.6em; max-width: 15em; line-height: .92; }
.a-hero__title.is-xlong { font-size: 4.6em; max-width: 17em; line-height: .94; }
.a-next__item--prev, .a-next__item--prev:last-child { text-align: left; align-items: flex-start; }
.a-next__item--next { grid-column: 2; text-align: right; align-items: flex-end; }
.page-builder { font-size: max(1em, 16px); line-height: 1.6; }
.cat-hero--404 .sticker { --s: 9em; right: 8%; top: 22%; }
.cat-hero--404 .cat-hero__bg-word { font-size: 30em; top: 2%; }
@media screen and (max-width: 991px) {
  .a-hero__title.is-long { font-size: 5em; }
  .a-hero__title.is-xlong { font-size: 4.2em; }
}
@media screen and (max-width: 767px) {
  .a-hero__title.is-long { font-size: 3em; }
  .a-hero__title.is-xlong { font-size: 2.6em; }
  .a-next__item--next { grid-column: auto; text-align: left; align-items: flex-start; }
  .cat-hero--404 .sticker { --s: 5.5em; top: 10%; }
}

/* ---------- 27. Articles : trame des contenus ------------------------------ */
/* Encadrés d'extensions remplacés par ceux du thème (sommaire, articles similaires) */
.prose #toc_container, .prose .ez-toc-container, .prose #ez-toc-container, .prose .lwptoc, .prose .rank-math-toc,
.prose .wp-block-rank-math-toc-block, .prose .yarpp, .prose .yarpp-related, .prose .crp_related, .prose .jp-relatedposts,
.prose .pp-multiple-authors-boxes-wrapper, .prose .pp-multiple-authors-wrapper, .prose .pp-author-boxes-wrapper { display: none !important; }

/* Intertitres : pastille à la couleur de la rubrique ; le gras ne change pas leur graisse */
.prose h2::before {
  content: ""; display: block; width: 2.4em; height: .42em; margin-bottom: .75em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--progress, var(--c-sun));
}
.prose h2 strong, .prose h3 strong, .prose h4 strong { font-weight: inherit; }
.prose a { text-decoration-color: var(--progress, currentColor); transition: text-decoration-color .2s, background-color .2s; }
@media (hover: hover) { .prose a:hover { text-decoration-color: currentColor; background: color-mix(in srgb, var(--progress, var(--c-sun)) 24%, transparent); } }

/* « Résumé de l'article » */
.prose .a-summary {
  position: relative; margin: 0 0 2.4em; padding: 1.6em 1.9em 1.75em;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card);
  background: var(--progress, var(--c-sun)); color: var(--progress-fg, var(--c-carbon));
}
.prose .a-summary__title {
  display: inline-flex; align-items: center; margin: 0 0 1em; padding: .6em 1em .55em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-paper); color: var(--c-carbon);
  font-size: max(.6em, 11px); font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; rotate: -2deg;
}
.a-summary__body { font-size: 1.04em; line-height: 1.52; letter-spacing: -.015em; }
.a-summary__body > * + * { margin-top: .8em; }
.a-summary__body strong { font-weight: 700; }
.a-summary .sticker { --s: 4.6em; right: -1.1em; top: -1.9em; rotate: 12deg; }

/* Sommaire dans le texte (quand la colonne de gauche n'est pas affichée) */
.prose .a-toc-inline { display: none; margin: 0 0 2.4em; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); background: var(--c-paper); overflow: clip; }
.a-toc-inline summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.05em 1.25em; cursor: pointer; list-style: none; }
.a-toc-inline summary::-webkit-details-marker { display: none; }
.a-toc-inline__icon { position: relative; flex: none; width: 1.7em; height: 1.7em; border: var(--bw) solid var(--c-carbon); border-radius: 100em; transition: transform .5s var(--ease-bounce), background-color .2s; }
.a-toc-inline__icon::before, .a-toc-inline__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: var(--bw); background: currentColor; translate: -50% -50%; transition: transform .35s var(--ease-slush); }
.a-toc-inline__icon::after { transform: rotate(90deg); }
.a-toc-inline[open] .a-toc-inline__icon { transform: rotate(180deg); background: var(--progress, var(--c-sun)); }
.a-toc-inline[open] .a-toc-inline__icon::after { transform: rotate(0deg); }
.prose .a-toc-inline__list { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 0; padding: 0 1.25em 1em; font-size: .82em; }
.prose .a-toc-inline__list li { counter-increment: toc; }
.prose .a-toc-inline__list a { display: flex; gap: .9em; padding: .7em 0; border-top: 1px solid rgba(0, 0, 0, .14); font-weight: 600; line-height: 1.3; text-decoration: none; }
.prose .a-toc-inline__list a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 1.5em; font-family: var(--font-display); font-weight: 400; }
@media screen and (max-width: 1199px) { .prose .a-toc-inline { display: block; } }

/* Encadrés « Conseil de pro », « Astuce », « Attention »… */
.prose .a-tip {
  position: relative; margin: 2.6em 0; padding: 1.55em 1.9em 1.7em;
  border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); background: var(--tip-bg, var(--c-sun));
}
.prose .a-tip--warn { --tip-bg: #ffd9c9; }
.main[data-cat="actualite"] .prose .a-tip--tip { --tip-bg: var(--c-mint); }
.prose .a-tip__label {
  display: inline-flex; margin: 0 0 .9em; padding: .6em 1em .55em; border: var(--bw) solid var(--c-carbon); border-radius: 100em;
  background: var(--c-carbon); color: var(--c-paper); font-size: max(.6em, 11px); font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}
.prose .a-tip > * + p:not(.a-tip__label) { margin-top: .8em; }
.prose .a-tip > .a-tip__label + * { margin-top: 0; }
.a-tip .sticker { --s: 4.4em; right: -1.2em; top: -2em; rotate: -8deg; }

/* FAQ en fin d'article (questions en accordéon) */
.prose .a-faq-title { font-family: var(--font-display); font-weight: 400; font-size: 3.4em; line-height: .86; letter-spacing: 0; text-transform: uppercase; padding-top: .08em; }
.prose .a-faq-title::before { font-size: .485em; }
.prose .a-faq-title.is-long { font-size: 2.1em; line-height: .95; }
.prose .a-faq-title.is-long::before { font-size: .786em; }
.prose .a-faq { margin-top: 1.5em; }
.prose .faq__h { margin: 0; font-size: 1em; font-weight: 700; letter-spacing: normal; }
.prose .faq__q { font-size: .95em; padding: 1.1em 0; letter-spacing: -.02em; }
.prose .faq__qt { flex: 1; }
.prose .faq__icon { font-size: .78em; }
.prose .faq__body { padding-bottom: 1.35em; font-size: .92em; }
.prose .faq__body > * + * { margin-top: .8em; }

/* Vidéos intégrées (YouTube…) : proportions gérées ici, que les styles des blocs soient chargés ou non */
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: none !important; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.prose .wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }
.prose .wp-embed-aspect-18-9 .wp-block-embed__wrapper { aspect-ratio: 2 / 1; }
.prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.prose .wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1; }
.prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; max-width: 24em; margin: 0 auto; }
.prose .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose > iframe, .prose p > iframe[src*="youtube"], .prose p > iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); }
.prose .wp-block-embed.is-type-video { position: relative; margin: 2.8em 0; }
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper { border: var(--bw) solid var(--c-carbon); border-radius: var(--r-card); overflow: clip; background: var(--c-carbon); }
.prose .wp-block-embed.is-type-video iframe { border-radius: 0; }
.prose .wp-block-embed.is-type-video::before {
  content: "Vidéo"; position: absolute; z-index: 2; left: 1.2em; top: -.95em; padding: .6em 1em .55em;
  border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--c-sun);
  font-size: max(.6em, 11px); font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; rotate: -3deg;
}
/* Tableaux : cadre arrondi, en-tête noir, lignes alternées ; défilement horizontal si besoin */
.prose .wp-block-table { margin: 2.4em 0; overflow-x: auto; border: var(--bw) solid var(--c-carbon); border-radius: var(--r-sm); background: var(--c-paper); }
.prose .wp-block-table table { margin: 0; border: 0; border-collapse: collapse; width: 100%; font-size: .78em; line-height: 1.4; }
.prose .wp-block-table th, .prose .wp-block-table td { padding: .8em 1em; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .14); text-align: left; vertical-align: top; }
.prose .wp-block-table thead, .prose .wp-block-table tfoot { border: 0; }
.prose .wp-block-table thead th, .prose .wp-block-table thead td, .prose .wp-block-table tr.is-head > * { background: var(--c-carbon) !important; color: var(--c-paper); font-weight: 700; letter-spacing: -.005em; }
.prose .wp-block-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .035); }
.prose .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.prose .wp-block-table figcaption { margin: 0; padding: .7em 1em; border-top: 1px solid rgba(0, 0, 0, .14); }
.prose > table { display: block; overflow-x: auto; }

/* Citations : les longues restent lisibles (la grande capitale est réservée aux exergues) */
.prose blockquote.wp-block-quote p, .prose > blockquote p { font-family: var(--font-ui); font-size: 1.1em; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: -.015em; }
.prose blockquote.wp-block-quote { rotate: -.6deg; }

/* Intertitre de premier niveau dans le texte (rare) : traité comme un h2 */
.prose h1 { font-size: 1.65em; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; margin-top: 2.2em; scroll-margin-top: 6em; }
.prose h1::before { content: ""; display: block; width: 2.4em; height: .42em; margin-bottom: .75em; border: var(--bw) solid var(--c-carbon); border-radius: 100em; background: var(--progress, var(--c-sun)); }
.prose h3[data-toc-target] { scroll-margin-top: 6em; }

/* Paragraphes encadrés dans l'éditeur et renvois « À lire aussi » */
.prose p.has-border-color { padding: 1em 1.25em; }
.prose .a-readalso { padding: 1.05em 1.3em; border: var(--bw) solid var(--c-carbon); border-left-width: .5em; border-left-color: var(--progress, var(--c-sun)); border-radius: var(--r-sm); background: var(--c-mist); font-size: .92em; }

@media screen and (max-width: 767px) {
  .prose .wp-block-table th, .prose .wp-block-table td { min-width: 8em; }
  .prose .wp-block-table table { table-layout: auto !important; }
  .prose h1 { font-size: 1.42em; }
  .prose h2 { font-size: 1.42em; }
  .prose h3 { font-size: 1.2em; }
  .prose .a-summary, .prose .a-tip { padding: 1.35em 1.2em 1.4em; }
  .a-summary .sticker, .a-tip .sticker { --s: 3.4em; right: -.5em; top: -1.6em; }
  .prose .a-faq-title { font-size: 2.8em; }
}