@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   datebbw.online — design system
   Mobile-first. Aucun !important : les overrides du widget tiers vivent
   dans vendor-prelinker.css, seul fichier autorisé à en contenir.
   ══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. POLICES ══════════════════════════════════════════════════════ */

@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* Replis à métriques calibrées, mesurées sur les fichiers réels :
   le texte ne se décale pas quand la police de marque prend le relais. */
@font-face{
  font-family:"Fraunces Fallback"; src:local("Georgia"),local("Times New Roman");
  size-adjust:96.28%; ascent-override:101.58%;
  descent-override:26.49%; line-gap-override:0%;
}
@font-face{
  font-family:"Archivo Fallback"; src:local("Arial"),local("Helvetica Neue");
  size-adjust:98.60%; ascent-override:89.05%;
  descent-override:21.30%; line-gap-override:0%;
}


/* ═══ 2. TOKENS ═══════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;

  /* ── Accent, décliné par RÔLE et non par teinte.
        Correction de fond : #e65b72 ne peut pas être à la fois couleur
        de texte et fond de bouton. Contrastes vérifiés WCAG.          */
  --c-accent:#e65b72;            /* 6,10:1 sur noir — texte, icônes, bordures  */
  --c-accent-fill:#c8355a;       /* 5,11:1 blanc dessus — fonds pleins         */
  --c-accent-deep:#7f2562;       /* 8,96:1 blanc dessus — fond profond         */
  --c-accent-soft:#f09eab;       /* 10,18:1 sur noir — hover de lien           */
  --c-accent-ghost:rgba(230,91,114,.14);
  --c-accent-ring:rgba(230,91,114,.45);
  --grad-brand:linear-gradient(135deg,var(--c-accent-deep) 0%,var(--c-accent-fill) 100%);
  --grad-line:linear-gradient(180deg,var(--c-accent-deep),var(--c-accent));

  /* ── Socle : la profondeur vient de surfaces translucides, jamais
        d'un éclaircissement du fond. Le noir absolu est un parti pris. */
  --c-void:#000;
  --c-surface-1:rgba(255,255,255,.045);
  --c-surface-2:rgba(255,255,255,.075);
  --c-surface-3:rgba(255,255,255,.11);
  --c-hairline:rgba(255,255,255,.10);
  --c-hairline-strong:rgba(255,255,255,.18);

  /* ── Texte ── */
  --c-ink:#f2f2f2;               /* 17,4:1 */
  --c-ink-muted:#c4c4c4;         /* 11,9:1 */
  --c-ink-faint:#9a9a9a;         /*  6,9:1 — plancher, jamais en dessous */
  --c-ink-on-fill:#fff;

  /* ── Typographie : échelle 1.250, fluide de 360 à 1440 px ── */
  --f-display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --f-text:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --t-2xs:clamp(.75rem,.72rem + .12vw,.8125rem);
  --t-xs:clamp(.8125rem,.78rem + .17vw,.875rem);
  --t-sm:clamp(.9375rem,.90rem + .19vw,1rem);
  --t-base:clamp(1rem,.95rem + .27vw,1.125rem);
  --t-lg:clamp(1.125rem,1.04rem + .40vw,1.3125rem);
  --t-xl:clamp(1.375rem,1.24rem + .63vw,1.75rem);
  --t-2xl:clamp(1.75rem,1.52rem + 1.05vw,2.5rem);
  --t-3xl:clamp(2.125rem,1.75rem + 1.7vw,3.25rem);

  --lh-tight:1.08; --lh-snug:1.22; --lh-normal:1.6; --lh-loose:1.75;
  --ls-tight:-.022em; --ls-wide:.09em;

  /* ── Espacement, base 4 px ── */
  --s-3xs:.25rem; --s-2xs:.5rem; --s-xs:.75rem; --s-sm:1rem;
  --s-md:1.5rem; --s-lg:2rem; --s-xl:3rem; --s-2xl:4rem; --s-3xl:6rem;
  --s-section:clamp(3.5rem,2rem + 6vw,7.5rem);
  --s-gutter:clamp(1.25rem,.6rem + 2.6vw,3rem);
  --w-page:75rem; --w-prose:44rem;

  /* ── Rayons. La base 5/10 de l'ancien site est conservée pour les
        éléments de contrôle ; les conteneurs s'arrondissent nettement
        plus, parce que la rondeur est le sujet même du site. ── */
  --r-xs:3px; --r-sm:5px; --r-md:10px; --r-lg:16px;
  --r-card:20px; --r-xl:28px; --r-pill:999px;

  /* ── Élévation : l'ombre qui manquait pour ancrer le micro-lift ── */
  --e-1:0 1px 2px rgba(0,0,0,.6);
  --e-2:0 4px 14px rgba(0,0,0,.55),0 0 0 1px var(--c-hairline);
  --e-3:0 14px 34px rgba(0,0,0,.65),0 0 0 1px var(--c-hairline-strong);
  --e-glow:0 8px 28px rgba(200,53,90,.32);
  --e-ring:0 0 0 3px var(--c-accent-ring);
  --blur-glass:14px;

  /* ── Traitement de la photographie ──
     UN SEUL reglage, partagé par les trois emplacements où elle
     apparaît : hero mobile, hero desktop, bandeau des pages internes.
     Ces valeurs avaient dérivé séparément au fil des retours — la même
     image finissait nette sur téléphone et floue sur bureau, sans
     aucune raison. Tout écart futur doit être un token nommé, jamais
     une valeur libre posée dans une règle. */
  --hero-blur:1.5px;
  --hero-bright:1.08;
  --hero-contrast:1.06;

  --header-h:4.5rem;

  /* ── Mouvement : 3 durées et 3 courbes, contre 1 durée et 0 courbe ── */
  --d-fast:120ms; --d-base:220ms; --d-slow:380ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --lift:-4px;

  /* Le voile du hero (::after) est peint en 2. Le contenu doit passer
     au-dessus : à z-index égal, un pseudo-élément ::after l'emporte sur
     ses frères puisqu'il est peint en dernier. */
  --z-hero:1; --z-content:3; --z-header:100; --z-widget:500;
  --z-cookie:900; --z-modal:1000;
}

@media (prefers-reduced-motion:reduce){
  :root{--d-fast:1ms;--d-base:1ms;--d-slow:1ms;--lift:0px}
  *,*::before,*::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
}


/* ═══ 3. RESET & BASE ═════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;    /* les ancres ne passent plus sous le header */
}

body{
  background:var(--c-void);
  color:var(--c-ink);
  font-family:var(--f-text);
  font-size:var(--t-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100svh;
  overflow-x:clip;              /* clip, pas hidden : ne casse pas position:sticky */
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
  color:var(--c-ink);
}
h1{font-size:var(--t-3xl);line-height:var(--lh-tight)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}

p{text-wrap:pretty}
p,li{color:var(--c-ink-muted)}

a{
  color:var(--c-accent);
  text-decoration-color:var(--c-accent-ghost);
  text-underline-offset:.18em;
  transition:color var(--d-base) var(--ease-out);
}
a:hover{color:var(--c-accent-soft);text-decoration-color:currentColor}

img,picture,svg,video{display:block;max-width:100%;height:auto}
ul,ol{padding-left:1.15em}
li::marker{color:var(--c-accent)}
strong{color:var(--c-ink);font-weight:600}
:where(button,input,select,textarea){font:inherit;color:inherit}
button{cursor:pointer}

/* Focus clavier — il n'existait sur AUCUN élément du site auparavant */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
  box-shadow:var(--e-ring);
}
:focus:not(:focus-visible){outline:none}

/* Liens : contour de focus lisible sur fond sombre ET sur fond clair
   (audit H : trois liens des blocs <details> sans indicateur détectable).
   L'anneau accent seul descend à ~3:1 sur les zones claires de la photo ;
   le halo sombre extérieur porte le contraste là où le fond est clair,
   tandis que sur fond sombre c'est l'anneau accent (6,1:1 sur noir) qui
   reste porteur. La règle ne parle qu'à :focus-visible : rien ne change
   au repos, ni pour la souris. */
a:focus-visible{
  box-shadow:var(--e-ring),0 0 0 5px rgba(10,4,8,.85);
}

::selection{background:var(--c-accent-fill);color:#fff}

/* Grain. Le noir absolu rend à l'écran comme une surface parfaitement
   plate ; un bruit très léger lui rend la matière d'un tirage argentique,
   ce qui prolonge le traitement noir et blanc de la photographie. Assez
   discret pour ne jamais se remarquer consciemment. */
body::before{
  content:"";position:fixed;inset:0;
  z-index:calc(var(--z-modal) + 50);
  pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::before{opacity:.02}}

.skip-link{
  position:absolute;left:var(--s-sm);top:-4rem;
  z-index:calc(var(--z-modal) + 10);
  padding:var(--s-2xs) var(--s-sm);border-radius:var(--r-sm);
  background:var(--c-accent-fill);color:var(--c-ink-on-fill);
  font-weight:600;text-decoration:none;
  transition:top var(--d-base) var(--ease-out);
}
.skip-link:focus{top:var(--s-sm);color:var(--c-ink-on-fill)}

.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ═══ 4. LAYOUT ═══════════════════════════════════════════════════════ */

.wrap{
  position:relative;z-index:1;
  width:100%;max-width:var(--w-page);
  margin-inline:auto;padding-inline:var(--s-gutter);
}
.wrap--prose{max-width:var(--w-prose)}

.section{position:relative;padding-block:var(--s-section)}
.section--tight{padding-block:calc(var(--s-section) * .6)}

/* Rythme. Une lueur prune très basse, dont le point d'origine alterne
   d'un bord à l'autre : le fond noir cesse d'être un aplat uniforme sur
   toute la longueur de la page, sans jamais devenir un motif.        */
.section::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62rem 26rem at 88% 6%,rgba(127,37,98,.13),transparent 66%);
}
.section:nth-of-type(even)::before{
  background:radial-gradient(62rem 26rem at 10% 4%,rgba(127,37,98,.11),transparent 66%);
}

/* Filet dégradé entre sections : remplace les linear-gradient noir sur
   noir de l'ancien CSS, qui étaient rigoureusement invisibles. */
.section + .section{border-top:1px solid var(--c-hairline)}

.section__head{max-width:46rem;margin-bottom:var(--s-xl)}
.section__head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2xs);
  margin-bottom:var(--s-sm);padding:.35em .85em;
  border:1px solid rgba(230,91,114,.42);border-radius:var(--r-pill);
  background:rgba(10,4,8,.72);      /* lisible meme pose sur la photo */
  color:var(--c-accent-soft);
  font-size:var(--t-xs);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
}

.lead{font-size:var(--t-lg);color:var(--c-ink-muted);line-height:var(--lh-loose)}
.section__head p + p{margin-top:var(--s-sm)}

.prose > * + *{margin-top:var(--s-sm)}
.prose h3{margin-top:var(--s-lg)}
.prose h4{margin-top:var(--s-md);font-size:var(--t-base);color:var(--c-accent)}


/* ═══ 5. BOUTONS ══════════════════════════════════════════════════════ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2xs);
  min-height:48px;padding:.85em 1.75em;
  border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--f-text);font-size:var(--t-sm);font-weight:600;
  line-height:1;text-align:center;text-decoration:none;
  transition:background var(--d-base) var(--ease-out),
             border-color var(--d-base) var(--ease-out),
             color var(--d-base) var(--ease-out),
             transform var(--d-fast) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out),
             filter var(--d-base) var(--ease-out);
}
.btn:active{transform:translateY(1px)}

/* Primaire : fond dégradé. Blanc dessus = 5,11:1 au point le plus clair,
   là où l'ancien #e65b72 plafonnait à 3,44:1 et échouait AA.            */
.btn--primary{
  background:var(--grad-brand);
  color:var(--c-ink-on-fill);
  box-shadow:var(--e-glow);
}
.btn--primary:hover{color:var(--c-ink-on-fill);filter:brightness(1.12)}

.btn--ghost{
  background:var(--c-surface-1);
  border-color:var(--c-hairline-strong);
  color:var(--c-ink);
}
.btn--ghost:hover{
  background:var(--c-surface-3);
  border-color:var(--c-accent);
  color:var(--c-ink);
}

.btn--lg{min-height:56px;padding:1em 2.25em;font-size:var(--t-base)}
.btn--block{display:flex;width:100%}


/* ═══ 6. EN-TÊTE ══════════════════════════════════════════════════════ */

.header{
  position:sticky;top:0;z-index:var(--z-header);
  transition:background var(--d-slow) var(--ease-out),
             border-color var(--d-slow) var(--ease-out),
             backdrop-filter var(--d-slow) var(--ease-out);
  border-bottom:1px solid transparent;
}
/* Transparent au-dessus du hero, verre fumé dès le premier scroll —
   plutôt que l'ancien header en position:absolute qui disparaissait. */
.header[data-scrolled="true"]{
  background:rgba(0,0,0,.72);
  border-bottom-color:var(--c-hairline);
  -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.3);
          backdrop-filter:blur(var(--blur-glass)) saturate(1.3);
}

.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
  min-height:var(--header-h);
}
.header__logo{display:inline-flex;flex-shrink:0;line-height:0}
.header__logo img{height:3rem;width:auto}

.header__nav{display:none}
.header__actions{display:flex;align-items:center;gap:var(--s-2xs)}

.nav__link{
  padding:var(--s-2xs) var(--s-xs);border-radius:var(--r-sm);
  color:var(--c-ink-muted);font-size:var(--t-sm);font-weight:500;
  text-decoration:none;white-space:nowrap;
}
.nav__link:hover{color:var(--c-ink)}
.nav__link[aria-current="page"]{color:var(--c-accent)}

/* Bouton hamburger — 48x48, contre ~29 px auparavant (sous le seuil tactile) */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:12px;
  background:none;border:0;border-radius:var(--r-sm);
}
.burger span{
  display:block;height:2px;width:100%;
  background:var(--c-accent);border-radius:2px;
  transition:transform var(--d-base) var(--ease-out),
             opacity var(--d-fast) var(--ease-out);
}
/* La transition existait déjà, mais aucune règle ne transformait jamais
   les barres en croix : elle ne servait à rien. C'est corrigé. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;
  padding:var(--s-sm) 0 var(--s-md);
  border-top:1px solid var(--c-hairline);
}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav ul{display:flex;flex-direction:column;gap:var(--s-3xs);list-style:none;padding:0}
.mobile-nav .nav__link{display:block;padding:var(--s-xs) var(--s-2xs);font-size:var(--t-base)}


/* ═══ 7. HERO ═════════════════════════════════════════════════════════ */

/* MOBILE D'ABORD — l'image doit se voir ENTIERE.
   L'ancienne mise en page la posait en fond absolu, recadree en bande
   verticale par object-fit:cover sur un hero tres haut : sur telephone,
   on n'en voyait qu'une lichette. Ici elle reprend sa place dans le
   flux, pleine largeur et au format carre de son fichier source
   (768x768) : aucun recadrage, l'image est integralement visible.
   Le contenu remonte ensuite sur son bas, fondu au noir. */
/* MOBILE — l'image n'est PAS agrandie.
   object-fit:cover sur une zone etroite et haute agrandit fortement une
   source carree : c'est ce qui donnait une photo zoomee dont on ne
   voyait qu'un fragment. Ici la zone image reprend le ratio 1:1 du
   fichier, donc l'echelle est exactement 1 — la photo s'affiche entiere,
   nette, pleine largeur. Le titre se pose par-dessus, le formulaire
   descend en dessous pour ne pas la masquer. */
.hero{
  position:relative;isolation:isolate;
  display:block;
  padding-block:0 var(--s-2xl);
  overflow:hidden;
}
/* Le header est transparent au repos : plutôt que de lui réserver sa
   propre bande au-dessus de la photo, on fait remonter le hero dessous.
   Il flotte sur l'image (z-index 100 contre 3), et la photo démarre au
   bord haut de la page. Ne s'applique qu'à un hero qui ouvre la page :
   les pages internes gardent leur bandeau sous le header. */
.hero:first-child{margin-top:calc(-1 * var(--header-h))}
.hero picture{display:contents}

/* La bande verticale floutée en noir et blanc est le parti pris le plus
   personnel du site : conservée, mais ses bords nets sont fondus au noir
   et un vignettage ancre le contenu par-dessus. */
.hero__media{
  position:absolute;inset:0 0 auto 0;   /* callee en haut du hero */
  width:100%;height:auto;
  /* Legerement plus haut que le carre natif : le recadrage lateral est
     minime (le sujet est central) et la photo monte assez haut pour que
     le formulaire se pose dessus plutot qu'en dessous. */
  aspect-ratio:4/5;
  transform:none;
  z-index:var(--z-hero);
  object-fit:cover;object-position:50% 50%;
  filter:blur(var(--hero-blur)) grayscale(1) contrast(var(--hero-contrast)) brightness(var(--hero-bright));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.45) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.45) 86%,transparent 100%);
}
/* Voile de lisibilité, dosé au plus juste : la photo doit rester une
   présence, pas un fond perdu. Le contraste du titre est porté par la
   graisse de la display et par un dégradé ciblé — pas par un aplat
   sombre généralisé. */
/* Le voile epouse la zone de l'image, pas tout le hero : le haut reste
   clair pour que la photo se voie, et il se renforce la ou le titre se
   superpose. */
.hero::after{
  content:"";position:absolute;inset:0 0 auto 0;
  width:100%;aspect-ratio:4/5;
  z-index:calc(var(--z-hero) + 1);pointer-events:none;
  /* La zone sombre du haut couvre desormais toute la hauteur du header,
     qui flotte sur la photo : sans cela le logo et la navigation
     tombaient sur une partie claire de l'image. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 9%,rgba(0,0,0,.04) 22%,
    rgba(0,0,0,.06) 52%,rgba(0,0,0,.30) 80%,rgba(0,0,0,.85) 100%);
}

.hero__inner{
  position:relative;z-index:var(--z-content);
  display:grid;gap:var(--s-md);align-items:center;
  /* Le titre demarre dans la seconde moitie de la photo, et le
     formulaire suit immediatement : sur telephone, l'image ET
     l'inscription sont visibles sans avoir a faire defiler. */
  padding-top:calc(20vw + var(--header-h));
}
/* Sur telephone, le formulaire passe AVANT le titre : la place au-dessus
   doit revenir a la photo et a l'inscription, pas a du texte. Le titre
   et l'argumentaire suivent. L'ordre du DOM, lui, garde le h1 en tete
   pour les moteurs et les lecteurs d'ecran. */
.pt-slot{order:1}
.hero__head{order:2}
.hero__body{order:3}

.hero__title{margin-bottom:var(--s-md)}
.hero__title em{
  font-style:normal;
  background:linear-gradient(120deg,var(--c-accent-soft),var(--c-accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--c-accent);
}
.hero__lead{font-size:var(--t-lg);color:var(--c-ink-muted);max-width:34rem}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-2xs) var(--s-sm);
  margin-top:var(--s-md);padding:0;list-style:none;
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--c-ink-faint);font-size:var(--t-xs);
}
.hero__trust li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--c-accent);flex-shrink:0;
}


/* ═══ 8. EMPLACEMENT DU FORMULAIRE PARTENAIRE ═════════════════════════ */

/* Le repli est l'état par défaut : un lien affilié réel est présent dès
   le premier octet de HTML. Le widget ne fait que le remplacer.
   Avant, le hero était vide et le restait en cas d'échec.            */
.pt-slot{
  position:relative;z-index:var(--z-widget);
  width:100%;max-width:27rem;margin-inline:auto;
  padding:var(--s-sm);
  /* Volontairement peu couvrant : la photographie doit rester lisible
     derrière le formulaire. Le flou d'arrière-plan est réduit pour la
     même raison — c'est lui, plus que la couleur, qui masquait tout. */
  /* Le cadre reste presque immateriel : ce sont les champs qui portent
     l'effet de verre. */
  background:
    radial-gradient(28rem circle at 100% 0%,rgba(127,37,98,.16),transparent 62%),
    linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);
  -webkit-backdrop-filter:blur(3px) saturate(130%);
          backdrop-filter:blur(3px) saturate(130%);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
/* Réservation de hauteur contre le décalage de mise en page (CLS).
   Mesures Playwright sur https://datebbw.online/ : une fois installé,
   le widget Prelinker mesure 407,6 px de haut à 360 px, 408 px à 414 px
   et 411,6 px à 768 px, alors que le repli n'occupe qu'environ 230 px.
   Le formulaire arrivait donc en poussant tout ce qui suit. Cette
   min-height fait occuper au bloc sa place définitive dès le premier
   rendu ; c'est un minimum et non une hauteur fixe, pour que le
   formulaire puisse grandir s'il affiche une erreur. La valeur retenue,
   412 px, est le maximum mesuré arrondi au pixel supérieur.
   Portée à #pt-register-slot seul : le widget de connexion
   (#pt-login-slot) n'a pas été mesuré et ne doit pas hériter d'une
   réserve calée sur le formulaire d'inscription.                     */
#pt-register-slot{min-height:412px}

/* Sans JavaScript, le widget n'arrive jamais : la reserve laisserait
   environ 300 px de vide sous le bouton de repli. On l'annule alors, il
   n'y a de toute facon aucun decalage a prevenir. Un navigateur qui ne
   connait pas la requete `scripting` ignore ce bloc et garde la reserve,
   ce qui est le comportement sur : jamais de retour du decalage.        */
@media (scripting: none){
  #pt-register-slot{min-height:0}
}

/* Repli quand backdrop-filter manque (audit I-navigateurs). Le bloc est
   posé sur la photographie et son texte clair rgb(242,242,242) n'y est
   lisible QUE par le flou d'arrière-plan : le fond du bloc est
   rigoureusement transparent. Sans la propriété, ce serait du blanc
   sur photo claire. On pose donc un voile sombre semi-transparent,
   même teinte que l'eyebrow (rgba(10,4,8,.72)) : contrastes calculés
   dans le pire cas — photo blanche pure derrière — ≥ 7,7:1 avec le
   texte. La condition exclut aussi les WebKit qui n'ont que le préfixe
   -webkit- : eux appliquent bien l'effet de verre et ne doivent rien
   voir changer. Chromium et Firefox récents ne matchent pas la requête :
   leur rendu est strictement identique à avant.
   background-COLOR uniquement : le raccourci effacerait les dégradés
   décoratifs posés par .pt-slot ci-dessus.                            */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #pt-register-slot{background-color:rgba(10,4,8,.72)}
}

.pt-slot__title{
  font-size:var(--t-lg);text-align:center;margin-bottom:var(--s-2xs);
}
.pt-slot__sub{
  font-size:var(--t-sm);text-align:center;color:var(--c-ink-faint);
  margin-bottom:var(--s-md);
}
.pt-fallback__note{
  margin-top:var(--s-xs);text-align:center;
  font-size:var(--t-2xs);color:var(--c-ink-faint);line-height:1.5;
}
/* Le widget a pris la main : on masque le repli. */
.pt-slot[data-pt-state="ready"] .pt-fallback{display:none}

.pt-slot__loading{
  display:none;margin-top:var(--s-xs);text-align:center;
  font-size:var(--t-2xs);color:var(--c-ink-faint);
}


/* ═══ 9. CARTES ═══════════════════════════════════════════════════════ */

.grid{display:grid;gap:var(--s-md)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}

/* Le sujet du site, ce sont les formes rondes. Le langage visuel des
   blocs le reprend : rayons généreux, et un filet d'accent en retrait
   aux extrémités arrondies plutôt qu'une barre franche collée au bord.
   Le bloc gagne en volume par un dégradé de surface et une lumière
   rasante qui se lève au survol. */
.card{
  position:relative;
  display:flex;flex-direction:column;
  padding:var(--s-md) var(--s-md) var(--s-md) calc(var(--s-md) + .55rem);
  background:
    linear-gradient(158deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.038) 46%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.2);
          backdrop-filter:blur(var(--blur-glass)) saturate(1.2);
  box-shadow:var(--e-1);
  transition:transform var(--d-base) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out),
             border-color var(--d-base) var(--ease-out);
}

/* Le filet d'accent — la signature, redessinée. */
.card::before{
  content:"";position:absolute;
  left:.85rem;top:var(--s-md);bottom:var(--s-md);
  width:4px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--c-accent-soft),var(--c-accent) 38%,var(--c-accent-deep));
  box-shadow:0 0 12px rgba(230,91,114,.35);
  transition:top var(--d-slow) var(--ease-out),
             bottom var(--d-slow) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out);
}
/* Lumière chaude rasante, venue du coin haut-gauche. */
.card::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(22rem circle at 0% 0%,rgba(230,91,114,.13),transparent 62%);
  opacity:0;transition:opacity var(--d-slow) var(--ease-out);
}
.card:hover{
  transform:translateY(var(--lift));
  border-color:var(--c-hairline-strong);
  box-shadow:var(--e-3);
}
.card:hover::before{
  top:.85rem;bottom:.85rem;              /* le filet s'étire sur la hauteur */
  box-shadow:0 0 20px rgba(230,91,114,.65);
}
.card:hover::after{opacity:1}

.card > *{position:relative;z-index:1}
.card h3,.card h4{margin-bottom:var(--s-2xs)}
.card p{font-size:var(--t-sm)}
.card p + p{margin-top:var(--s-2xs)}

.card--link{text-decoration:none}
.card--link h3{color:var(--c-ink);transition:color var(--d-base) var(--ease-out)}
.card--link:hover h3{color:var(--c-accent)}
.card__meta{
  display:inline-flex;align-items:center;gap:.45em;
  margin-top:auto;padding-top:var(--s-sm);
  font-size:var(--t-xs);color:var(--c-accent);font-weight:600;
}
/* Chevron qui avance au survol : indique la sortie vers le blog. */
.card__meta::after{
  content:"";width:.42em;height:.42em;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--d-base) var(--ease-out);
}
.card--link:hover .card__meta::after{transform:rotate(45deg) translate(2px,-2px)}

/* Étapes numérotées. Le parcours d'inscription est une vraie séquence :
   la numérotation porte donc une information, elle n'habille pas. */
.step{padding-top:var(--s-xl)}
.step__num{
  position:absolute;top:var(--s-md);right:var(--s-md);
  display:grid;place-items:center;
  width:2.6rem;height:2.6rem;border-radius:var(--r-pill);
  border:1px solid rgba(230,91,114,.32);
  background:radial-gradient(circle at 32% 26%,rgba(230,91,114,.22),rgba(127,37,98,.10));
  font-family:var(--f-display);font-size:1.25rem;font-weight:700;line-height:1;
  color:var(--c-accent);
  -webkit-user-select:none;user-select:none;pointer-events:none;
  transition:box-shadow var(--d-base) var(--ease-out);
}
.card:hover .step__num{box-shadow:0 0 0 5px rgba(230,91,114,.08)}

/* Bandeau de bénéfices */
.benefits{
  display:grid;gap:var(--s-md);
  padding:var(--s-lg) var(--s-md);
  background:
    radial-gradient(60rem 20rem at 12% -30%,rgba(127,37,98,.20),transparent 70%),
    linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--c-hairline);
  border-radius:var(--r-xl);
  -webkit-backdrop-filter:blur(var(--blur-glass));
          backdrop-filter:blur(var(--blur-glass));
}
.benefit{display:flex;gap:var(--s-sm);align-items:flex-start}
/* Pastille ronde, cerclée d'un filet accent : même vocabulaire courbe
   que les blocs, à l'échelle de l'icône. */
.benefit__icon{
  flex-shrink:0;display:grid;place-items:center;
  width:3rem;height:3rem;border-radius:var(--r-pill);
  background:radial-gradient(circle at 30% 25%,rgba(230,91,114,.28),rgba(127,37,98,.14));
  border:1px solid rgba(230,91,114,.35);
  color:var(--c-accent);
  box-shadow:0 0 0 4px rgba(230,91,114,.06);
}
.benefit__icon svg{width:1.35rem;height:1.35rem}
.benefit strong{display:block;margin-bottom:.2em;font-size:var(--t-sm);font-weight:600}
.benefit p{font-size:var(--t-xs);color:var(--c-ink-faint);margin:0;line-height:1.55}


/* ═══ 10. TÉMOIGNAGES ═════════════════════════════════════════════════ */

.quote{
  position:relative;
  display:flex;flex-direction:column;
  padding:var(--s-xl) var(--s-md) var(--s-md);
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--c-hairline);
  border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(var(--blur-glass));
          backdrop-filter:blur(var(--blur-glass));
  transition:border-color var(--d-base) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out);
}
.quote:hover{border-color:var(--c-hairline-strong);box-shadow:var(--e-2)}
/* Guillemet ouvrant en display, très ouvert et clairement typographique :
   il signe le bloc au lieu de le décorer. */
.quote::before{
  content:"«";position:absolute;top:.44rem;left:1rem;
  font-family:var(--f-display);font-size:4.4rem;line-height:1;
  color:rgba(230,91,114,.22);
  -webkit-user-select:none;user-select:none;
}
.quote p{
  position:relative;
  font-style:italic;color:var(--c-ink);font-size:var(--t-sm);
  line-height:var(--lh-loose);
}
.quote figcaption{
  margin-top:auto;padding-top:var(--s-sm);
  font-size:var(--t-xs);color:var(--c-ink-faint);
}
/* Le filet de séparation reprend le dégradé de marque et s'arrête avant
   le bord — même retrait que le filet des blocs. */
.quote figcaption::before{
  content:"";display:block;width:2.5rem;height:2px;margin-bottom:var(--s-xs);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--c-accent),transparent);
}
.quote figcaption b{
  display:block;color:var(--c-accent);font-size:var(--t-sm);
  font-family:var(--f-display);font-weight:700;margin-bottom:.1em;
}

/* Mention obligatoire : ces récits sont illustratifs, pas des avis
   clients. Les présenter comme authentiques serait une pratique
   commerciale trompeuse (art. L.121-4 20° du Code de la consommation). */
.disclaimer{
  margin-top:var(--s-md);padding:var(--s-xs) var(--s-sm);
  border-left:3px solid var(--c-hairline-strong);
  font-size:var(--t-2xs);color:var(--c-ink-faint);line-height:1.55;
}


/* ═══ 11. FAQ ═════════════════════════════════════════════════════════ */

/* <details> natif : fonctionne sans une ligne de JavaScript. */
.faq{display:grid;gap:var(--s-2xs);max-width:52rem}
.faq__item{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid var(--c-hairline);
  border-radius:var(--r-card);
  transition:background var(--d-base) var(--ease-out),
             border-color var(--d-base) var(--ease-out);
}
/* Filet accent qui se déploie sur le bord gauche quand la réponse
   s'ouvre : l'état ouvert se lit d'un coup d'œil dans une longue liste. */
.faq__item::before{
  content:"";position:absolute;left:0;top:50%;bottom:50%;width:3px;
  background:var(--grad-line);
  transition:top var(--d-slow) var(--ease-out),bottom var(--d-slow) var(--ease-out);
}
.faq__item[open]{background:var(--c-surface-2);border-color:var(--c-hairline-strong)}
.faq__item[open]::before{top:0;bottom:0}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);
  padding:var(--s-sm) var(--s-md);
  font-family:var(--f-display);font-size:var(--t-base);font-weight:700;
  color:var(--c-ink);cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex-shrink:0;width:.65rem;height:.65rem;
  border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);
  transform:rotate(45deg) translateY(-25%);
  transition:transform var(--d-base) var(--ease-out);
}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq__item summary:hover{color:var(--c-accent)}
.faq__body{padding:0 var(--s-md) var(--s-md)}
.faq__body p + p{margin-top:var(--s-2xs)}
.faq__body p{font-size:var(--t-sm)}


/* ═══ 12. APPEL FINAL ═════════════════════════════════════════════════ */

.cta-final{
  position:relative;overflow:hidden;
  padding:var(--s-2xl) var(--s-md);
  text-align:center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 108%,rgba(200,53,90,.34),transparent 68%),
    radial-gradient(ellipse 90% 80% at 50% -10%,rgba(127,37,98,.22),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--c-hairline-strong);
  border-radius:var(--r-xl);
}
/* Liseré lumineux sur l'arête haute : la lumière vient du même point
   que celle qui se lève sur les blocs au survol. */
.cta-final::before{
  content:"";position:absolute;inset:0 auto auto 0;
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,91,114,.65),transparent);
}
.cta-final h2{margin-bottom:var(--s-sm)}
.cta-final p{max-width:38rem;margin-inline:auto;margin-bottom:var(--s-lg)}


/* ═══ 13. PIED DE PAGE ════════════════════════════════════════════════ */

.footer{
  margin-top:var(--s-section);
  padding-block:var(--s-xl) var(--s-lg);
  border-top:1px solid var(--c-hairline);
  background:linear-gradient(180deg,transparent,rgba(127,37,98,.07));
}
.footer__grid{display:grid;gap:var(--s-lg)}
.footer__logo img{height:2.5rem;width:auto;margin-bottom:var(--s-sm)}
.footer__about p{font-size:var(--t-xs);color:var(--c-ink-faint);max-width:32rem}
.footer h2{
  margin-bottom:var(--s-sm);
  font-family:var(--f-text);font-size:var(--t-xs);font-weight:700;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--c-ink);
}
.footer ul{list-style:none;padding:0;display:grid;gap:var(--s-3xs)}
.footer a{
  color:var(--c-ink-muted);font-size:var(--t-sm);text-decoration:none;
}
.footer a:hover{color:var(--c-accent-soft)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-md);
  align-items:center;justify-content:space-between;
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid var(--c-hairline);
  font-size:var(--t-2xs);color:var(--c-ink-faint);
}
.footer__bottom p{font-size:inherit;color:inherit}

.age-badge{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3em .7em;border-radius:var(--r-pill);
  border:1px solid var(--c-accent-ghost);background:var(--c-accent-ghost);
  color:var(--c-accent);font-size:var(--t-2xs);font-weight:700;
  white-space:nowrap;
}

/* Bouton texte servant à rouvrir le panneau de consentement.
   Le retrait doit rester possible à tout moment (RGPD). */
.linklike{
  background:none;border:0;padding:0;
  color:var(--c-ink-muted);font-size:inherit;
  text-decoration:underline;text-underline-offset:.18em;
}
.linklike:hover{color:var(--c-accent-soft)}


/* ═══ 14. BANDEAU DE CONSENTEMENT ═════════════════════════════════════ */

.cookie{
  position:fixed;inset:auto 0 0 0;z-index:var(--z-cookie);
  display:none;
  padding:var(--s-md) var(--s-gutter) calc(var(--s-md) + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.96);
  border-top:2px solid var(--c-accent);   /* le liseré de marque déjà présent, conservé */
  -webkit-backdrop-filter:blur(var(--blur-glass));
          backdrop-filter:blur(var(--blur-glass));
  box-shadow:0 -12px 40px rgba(0,0,0,.6);
}
.cookie[data-open="true"]{
  display:block;
  animation:cookie-in var(--d-slow) var(--ease-out) both;
}
@keyframes cookie-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}

.cookie__inner{
  display:grid;gap:var(--s-md);
  width:100%;max-width:var(--w-page);margin-inline:auto;
}
.cookie h2{font-family:var(--f-display);font-size:var(--t-lg);margin-bottom:var(--s-2xs)}
.cookie p{font-size:var(--t-xs);color:var(--c-ink-muted)}
.cookie__actions{display:grid;gap:var(--s-2xs)}
/* « Tout refuser » a exactement le même poids visuel que « Tout accepter » :
   même taille, même graisse, même nombre de clics. Un refus relégué en
   lien texte a été explicitement sanctionné par la CNIL. */
.cookie__actions .btn{width:100%}
.cookie__more{
  margin-top:var(--s-2xs);text-align:center;
  font-size:var(--t-2xs);color:var(--c-ink-faint);
}

.cookie__prefs{display:none;margin-top:var(--s-sm)}
.cookie[data-prefs="true"] .cookie__prefs{display:grid;gap:var(--s-xs)}
.pref{
  display:flex;gap:var(--s-sm);align-items:flex-start;
  padding:var(--s-xs) var(--s-sm);
  background:var(--c-surface-1);border:1px solid var(--c-hairline);
  border-radius:var(--r-sm);
}
.pref input{
  flex-shrink:0;width:20px;height:20px;margin-top:.15rem;
  accent-color:var(--c-accent-fill);
}
.pref label{font-size:var(--t-sm);font-weight:600;color:var(--c-ink);cursor:pointer}
.pref p{font-size:var(--t-2xs);margin-top:.15rem}
.pref input:disabled + div label{color:var(--c-ink-faint)}

.cookie__prefs-actions{display:grid;gap:var(--s-2xs)}
.cookie__prefs-actions .btn{width:100%}


/* ═══ 15. APPARITION AU DÉFILEMENT ════════════════════════════════════ */

/* Le masquage initial est conditionné à la classe `js`, posée par un
   script en tête de <head>. Sans elle — JavaScript coupé, script bloqué,
   erreur avant exécution — la règle ne s'applique jamais et le contenu
   reste visible. Masquer sur la seule présence de l'attribut rendrait
   toute la page invisible dès que le script ne tourne pas. */
.js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-slow) var(--ease-out),
             transform var(--d-slow) var(--ease-out);
}
.js [data-reveal="in"]{opacity:1;transform:none}

/* Ceinture de sécurité : si l'utilisateur refuse les animations, on
   n'attend pas l'observateur d'intersection pour afficher. */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
}


/* ═══ 16. PAGES DE CONTENU (légal, connexion) ═════════════════════════ */

/* Bandeau de tête des pages internes.
   La photographie est l'élément d'identité du site : elle est reprise
   ici, en bande décalée à droite comme dans le hero, pour que connexion,
   mentions légales et 404 appartiennent visiblement au même site.
   Posée en CSS et non dans le balisage : elle est décorative, aucune
   page n'a à la déclarer. */
.page-head{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--s-2xl) var(--s-lg);
  border-bottom:1px solid var(--c-hairline);
}
.page-head::before{
  content:"";position:absolute;z-index:-2;
  inset:0 0 0 auto;
  width:min(72%,46rem);
  background-image:url("../img/hero.jpg");
  background-image:image-set(url("../img/hero.webp") type("image/webp"),
                             url("../img/hero.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:50% 24%;
  transform:scale(1.06);
  filter:blur(var(--hero-blur)) grayscale(1) contrast(var(--hero-contrast)) brightness(var(--hero-bright));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 92%,transparent 100%);
}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.80) 30%,rgba(0,0,0,.28) 56%,transparent 78%),
    radial-gradient(ellipse 70% 100% at 50% 0%,rgba(127,37,98,.22),transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 30%,rgba(0,0,0,.55) 100%);
}
.breadcrumb{padding-block:var(--s-sm)}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;gap:.4em;align-items:center;
  list-style:none;padding:0;font-size:var(--t-xs);color:var(--c-ink-faint);
}
.breadcrumb a{color:var(--c-ink-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb li + li::before{content:"/";margin-right:.4em;color:var(--c-hairline-strong)}

.legal{max-width:var(--w-prose)}
.legal h2{
  margin-top:var(--s-xl);margin-bottom:var(--s-sm);
  font-size:var(--t-xl);
  padding-left:var(--s-sm);border-left:4px solid var(--c-accent);
}
.legal h3{margin-top:var(--s-lg);margin-bottom:var(--s-2xs);font-size:var(--t-lg)}
.legal p,.legal li{font-size:var(--t-sm)}
.legal > p + p,.legal ul,.legal ol{margin-top:var(--s-sm)}
.legal li + li{margin-top:var(--s-3xs)}
.legal__updated{font-size:var(--t-xs);color:var(--c-ink-faint)}

/* Champ à compléter avant mise en ligne — volontairement très visible. */
.todo{
  display:inline-block;padding:.1em .45em;border-radius:var(--r-xs);
  background:rgba(255,193,7,.16);border:1px dashed rgba(255,193,7,.55);
  color:#ffd85e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;font-weight:600;
}

.table-wrap{overflow-x:auto;margin-top:var(--s-sm);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--t-xs)}
th,td{padding:var(--s-2xs) var(--s-xs);text-align:left;border:1px solid var(--c-hairline)}
th{background:var(--c-surface-2);color:var(--c-ink);font-weight:600}
td{color:var(--c-ink-muted)}

.notice{
  padding:var(--s-sm) var(--s-md);
  background:var(--c-accent-ghost);
  border:1px solid var(--c-accent-ghost);
  border-left:4px solid var(--c-accent);
  border-radius:var(--r-md);
}
.notice p{font-size:var(--t-sm);color:var(--c-ink)}


/* ═══ 17. POINTS DE RUPTURE ═══════════════════════════════════════════
   Deux seulement, contre treize media queries desktop-first éparpillées
   dans l'ancien fichier. Tout le reste est absorbé par clamp().
   ══════════════════════════════════════════════════════════════════ */

@media (min-width:48rem){                       /* ≥ 768 px */
  /* Le ratio de la zone image ne change PAS entre telephone et tablette.
     Un format paysage y etait applique pour gagner de la hauteur, mais
     il amputait de 44% une source carree : le sujet se retrouvait coupe.
     Tant que l'image est dans le flux, elle garde le meme cadrage. */
  .hero__inner{padding-top:calc(34vw + var(--header-h))}

  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(3,1fr);gap:var(--s-md);padding:var(--s-lg)}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
  .cookie__inner{grid-template-columns:1fr auto;align-items:center}
  .cookie__actions{grid-auto-flow:column;gap:var(--s-xs)}
  .cookie__actions .btn{width:auto;min-width:11rem}
  .cookie__prefs{grid-column:1 / -1}
  .cookie__prefs-actions{grid-auto-flow:column;justify-content:start;gap:var(--s-xs)}
  .cookie__prefs-actions .btn{width:auto;min-width:11rem}
  .hero__trust{gap:var(--s-2xs) var(--s-md)}
}

@media (min-width:64rem){                       /* ≥ 1024 px */
  .header__nav{display:flex;align-items:center;gap:var(--s-3xs)}
  .burger{display:none}
  .mobile-nav{display:none}
  .header__logo img{height:3.5rem}

  /* À partir de deux colonnes seulement, la photo repasse en fond : la
     place est alors suffisante pour qu'un recadrage vertical ne la
     mutile plus, et le texte se lit sur du noir franc à gauche. */
  .hero{
    display:flex;align-items:center;
    min-height:min(92svh,54rem);
    padding-block:var(--s-2xl) var(--s-3xl);
  }
  .hero__inner{padding-top:var(--header-h)}
  .hero::after{inset:0;width:auto;aspect-ratio:auto}
  .hero picture{display:contents}
  .hero__media{
    position:absolute;inset:0 auto 0 50%;   /* centree */
    width:min(70%,56rem);height:100%;
    /* Indispensable : sans cette remise a zero, le ratio 4/5 herite du
       mode « image dans le flux » entre en conflit avec height:100% et
       l'image depasse la hauteur du hero, donc se fait couper. */
    aspect-ratio:auto;
    transform:translateX(-50%) scale(1.04);
    object-position:50% 26%;
    filter:blur(var(--hero-blur)) grayscale(1) contrast(var(--hero-contrast)) brightness(var(--hero-bright));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 94%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 94%,transparent 100%);
  }
  .hero::after{
    /* La photo etant recentree, le voile lateral s'adoucit et se
       symetrise : il ne sert plus qu'a detacher le texte. */
    background:
      linear-gradient(90deg,#000 0%,rgba(0,0,0,.68) 20%,rgba(0,0,0,.14) 44%,transparent 62%),
      radial-gradient(ellipse 70% 60% at 50% 46%,transparent 0%,rgba(0,0,0,.34) 100%),
      linear-gradient(180deg,rgba(0,0,0,.52) 0%,transparent 20%,transparent 68%,#000 100%);
  }

  .hero__inner{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"head slot" "body slot";
    gap:var(--s-sm) var(--s-2xl);
    align-content:center;
  }
  .hero__head{grid-area:head;align-self:end}
  .pt-slot{grid-area:slot}
  .hero__body{grid-area:body;align-self:start}
  .pt-slot{margin-inline:0 0;margin-left:auto}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .section__head{margin-bottom:var(--s-2xl)}
}