*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0B0B14;--s1:rgba(255,255,255,.045);--s2:rgba(255,255,255,.028);
  --bd:rgba(255,255,255,.10);--bd2:rgba(255,255,255,.20);
  --violet:#7E5CFF;--rose:#FF4D7D;--amber:#FFB347;
  --t1:#F5F5F7;--t2:#A0A0AE;--t3:#6E6E7C;
  --px:28px;--maxw:1080px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t1);min-height:100vh;
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  font-feature-settings:'kern' 1}
/* Liseré signature : la bande violet -> rose de l'application. */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--violet),var(--rose))}
/* ── Halos ambiants ────────────────────────────────────────────────────────
   Un ÉLÉMENT plutôt qu'un pseudo-élément de body : il peut ainsi être déplacé
   par transform, seule propriété que le navigateur compose sur le GPU. Décaler
   un dégradé radial par background-position forcerait un repaint à chaque
   pixel de défilement.
   Débordement de 30 % : la translation ne révèle jamais les bords.            */
.halo{position:fixed;inset:-35%;z-index:0;pointer-events:none;
  will-change:transform;transform:translate3d(0,0,0)}
.halo span{position:absolute;inset:0;display:block;
  transition:opacity .28s linear}
/* Deux halos, un par couleur de la charte. Leur OPACITÉ est pilotée par les
   variables --i1 et --i2, mises à jour au défilement : le violet domine en haut
   de page, le rose prend le relais en bas. */
.halo .h1{opacity:var(--i1,1);
  background:radial-gradient(900px circle at 16% 8%,
    rgba(126,92,255,.40),rgba(126,92,255,.13) 46%,transparent 72%);
  animation:d1 26s ease-in-out infinite alternate}
.halo .h2{opacity:var(--i2,.45);
  background:radial-gradient(820px circle at 84% 76%,
    rgba(255,77,125,.34),rgba(255,77,125,.10) 48%,transparent 72%);
  animation:d2 33s ease-in-out infinite alternate}
@keyframes d1{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4.5%,-3.5%,0) scale(1.10)}}
@keyframes d2{from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-5%,4%,0) scale(1)}}

/* Mouvement réduit : plus de dérive, plus de parallaxe. */
@media (prefers-reduced-motion:reduce){
  .halo span{animation:none}
  .halo{transform:none !important}
}
main,header,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--px)}

/* ── en-tête : marque, deux liens, un seul appel à l'action ─────────────── */
.top{position:sticky;top:3px;z-index:40;background:rgba(11,11,20,.72);
  backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--bd)}
.topin{max-width:var(--maxw);margin:0 auto;padding:0 var(--px);height:70px;
  display:flex;align-items:center;gap:22px}
.topin>a:first-child{display:inline-flex;align-items:center;height:40px}
.topin img{width:32px;height:32px;flex:0 0 auto}
.menu{display:flex;gap:6px}
/* Les trois éléments cliquables partagent hauteur, corps, graisse et rayon :
   c'est l'absence de ce socle commun qui rendait la barre hétérogène. */
.menu a,.top .act{height:40px;display:inline-flex;align-items:center;
  padding:0 17px;border-radius:12px;font-size:15px;font-weight:600;
  letter-spacing:-.005em;transition:background .16s,color .16s,box-shadow .18s}
.menu a{color:var(--t2);gap:10px}
.menu a.aide{color:var(--t1);border:1px solid var(--bd2)}
.menu a.aide:hover{background:rgba(255,255,255,.06);border-color:var(--t3)}
/* Badge du compteur : pastille autonome placée AVANT le libellé, plus une
   surimpression sur un pictogramme. Le chiffre vient de len(HELP). */
.hb{flex:0 0 auto;min-width:25px;height:22px;padding:0 8px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;letter-spacing:0;color:#fff;
  background:linear-gradient(120deg,var(--violet),var(--rose));
  box-shadow:0 2px 10px rgba(255,77,125,.38)}
/* Le libellé complet est long : on le raccourcit sur écran étroit plutôt que
   de laisser la barre passer à la ligne. */
.aide .sm{display:none}
@media (max-width:860px){
  .aide .lg{display:none}
  .aide .sm{display:inline}
}
.menu a:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.menu a[aria-current]{color:var(--t1);background:rgba(255,255,255,.09)}
.top .act{margin-left:auto;color:#fff;
  background:linear-gradient(120deg,var(--violet),var(--rose));
  box-shadow:0 4px 16px rgba(126,92,255,.34)}
.top .act:hover{transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(126,92,255,.45),0 4px 18px rgba(255,77,125,.34)}

/* ── typographie ────────────────────────────────────────────────────────── */
h1{font-weight:640;letter-spacing:-.03em;line-height:1.06}
.eyebrow{display:block;font-size:16px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#FF6E96;
  text-shadow:0 0 22px rgba(255,77,125,.35)}
.lead{color:var(--t2);font-size:clamp(17px,1.9vw,20px);max-width:60ch}
p{max-width:70ch}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(72px,11vw,132px) 0 clamp(56px,7vw,84px)}
.hero::before{content:'';position:absolute;inset:-40% -20% auto -30%;height:150%;
  pointer-events:none;z-index:-1;transform:rotate(-14deg);
  background:linear-gradient(90deg,transparent,rgba(126,92,255,.13) 38%,
    rgba(255,77,125,.10) 62%,transparent);filter:blur(46px)}
.hero h1{font-size:clamp(44px,7.2vw,82px);margin:18px 0 0}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--violet),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--rose)}
.hero .lead{margin-top:24px}
.act-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.btn{font-size:15.5px;font-weight:600;padding:14px 26px;border-radius:12px;
  transition:transform .18s,opacity .18s}
.btn.p{background:linear-gradient(120deg,var(--violet),var(--rose));color:#fff;
  box-shadow:0 6px 22px rgba(126,92,255,.45),0 4px 18px rgba(255,77,125,.40)}
.btn.s{border:1px solid var(--bd2);color:var(--t1)}
/* Bouton secondaire à CONTOUR dégradé, obtenu par MASQUE plutôt que par deux
   boîtes imbriquées : le pseudo-élément porte le dégradé, et le masque en
   évide le centre. L'intérieur est donc réellement transparent — il épouse le
   fond de la page, quel qu'il soit — et le bouton garde exactement la même
   géométrie que le bouton principal, mêmes marges internes, même arrondi. */
.btn.g{position:relative;color:var(--t1);background:none;
  box-shadow:0 6px 22px rgba(126,92,255,.20)}
.btn.g::before{content:"";position:absolute;inset:0;border-radius:12px;
  padding:1.5px;pointer-events:none;
  background:linear-gradient(120deg,var(--violet),var(--rose));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.btn.g:hover{box-shadow:0 8px 26px rgba(126,92,255,.32)}
.btn:hover{transform:translateY(-1px)}
.btn.s:hover{border-color:var(--t3)}
/* Plateformes : GRILLE et non flex. Chaque carte porte désormais un badge de
   store, donc une hauteur commune est nécessaire — en flex, les cartes sans
   badge se retrouvaient plus courtes que les autres.
   Plus de filet ni de grande marge en tête : le bloc n'est plus accroché au
   bas du hero, il a sa propre section titrée. */
.plat{display:grid;gap:14px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.pl{display:flex;flex-direction:column;padding:16px;border-radius:13px;
  background:var(--s2);border:1px solid var(--bd);backdrop-filter:blur(14px)}
.plh{display:flex;align-items:center;gap:9px}
.pl svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor}
.pl .nm{font-size:14.5px;font-weight:600;color:var(--t1);line-height:1.2}
/* margin-left:auto : la disponibilité est poussée à droite, sur la même ligne
   que le nom de la plateforme. */
.pl .st{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.pl.y{color:#3DFFAB}.pl.y .st{color:#3DFFAB}
.pl.n{color:var(--amber)}.pl.n .st{color:var(--amber)}
/* margin-top:auto : les badges s'alignent en bas de carte quel que soit le
   retour à la ligne du nom de plateforme. Le badge occupe TOUTE la largeur de
   la tuile ; height:auto préserve ses proportions, exigence des règles d'usage
   de la marque (on ne déforme jamais un badge de store). Même traitement pour
   les deux badges, aucune règle particulière par plateforme. */
/* Pas de margin-top:auto : le badge se place JUSTE SOUS l'en-tête, à la même
   hauteur dans les quatre tuiles. Poussé en bas, celui d'une tuile sans bouton
   QR se retrouvait décalé par rapport aux autres. */
.plb{display:block;padding-top:14px;line-height:0}
/* Un seul cadre pour les quatre badges. Les artworks n'ont pas le même rapport
   largeur/hauteur (Google 2,6:1, Apple et Microsoft plus allongés) : on impose
   le RATIO du badge Google et `object-fit:contain` recadre sans jamais
   déformer — déformer un badge de store est interdit par les trois marques.
   Le cadre reste TRANSPARENT : avec un fond noir, l'espace ajouté au-dessus et
   en dessous formait une bande visible sous les badges les plus plats. Sa seule
   fonction est de réserver la même hauteur dans les quatre tuiles.
   Aucun contour ajouté non plus : Google et Apple portent déjà le leur dans
   l'artwork, en superposer un second créait un double liseré. */
.plb img{width:100%;aspect-ratio:646/250;object-fit:contain;display:block}
/* Microsoft est le seul badge dont l'artwork ne comporte PAS de liseré clair.
   On le trace avec quatre `drop-shadow` décalés d'un pixel : contrairement à
   `border`, un drop-shadow suit la FORME du dessin (son canal alpha), donc le
   contour épouse le badge au lieu d'entourer le cadre invisible. Le ratio
   commun est ainsi conservé, et le badge reste centré à la même hauteur
   qu'avant. */
.plb.ms img{filter:drop-shadow(1px 0 0 rgba(255,255,255,.9))
  drop-shadow(-1px 0 0 rgba(255,255,255,.9))
  drop-shadow(0 1px 0 rgba(255,255,255,.9))
  drop-shadow(0 -1px 0 rgba(255,255,255,.9))}
.plb:hover{opacity:.86}
.plw{margin-top:auto;padding-top:14px;font-size:12.5px;line-height:1.5;
  color:var(--t3)}

/* Bouton « QR code » : le code ne s'affiche QUE dans la fenêtre qu'il ouvre. */
.qrbtn{display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:10px;padding:9px 12px;border-radius:9px;
  background:var(--s1);border:1px solid var(--bd2);color:var(--t1);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color .16s,background .16s}
.qrbtn svg{width:15px;height:15px;fill:currentColor}
.qrbtn:hover{border-color:var(--t3);background:var(--s2)}

/* Fenêtre du QR : image sur fond blanc, la zone claire autour du motif est
   indispensable, sans elle beaucoup de scanners échouent. */
.qrd{display:flex;flex-direction:column;align-items:center;gap:16px}
.qrd .qri{background:#fff;border-radius:12px;padding:12px;line-height:0}
.qrd .qri img{display:block;width:196px;height:196px}
.qrd p{text-align:center}

/* ── rythme de section ──────────────────────────────────────────────────── */
section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--bd)}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t3);margin-bottom:12px}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:640;letter-spacing:-.025em;
  line-height:1.15}
section>.wrap>.lead{margin-top:18px}

/* ── chiffres ───────────────────────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:34px;margin-top:46px}
.fig b{display:block;font-size:clamp(34px,4.4vw,46px);font-weight:640;
  letter-spacing:-.035em;
  /* Aucun jambage dans ces chiffres : le mot « jours » a été déplacé dans le
     libellé secondaire. background-clip:text ne peint que la boîte du texte et
     rognait la jambe du « j ». */
  line-height:1.08;padding-bottom:.04em;
  background:linear-gradient(115deg,var(--violet),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--rose)}
.fig span{display:block;margin-top:8px;font-size:14.5px;color:var(--t3)}

button.fig,a.fig{background:none;border:0;padding:0;font:inherit;text-align:left;
  cursor:pointer;position:relative}
button.fig span,a.fig span{transition:color .16s}
button.fig::after,a.fig::after{content:'';display:block;width:22px;height:2px;border-radius:1px;
  margin-top:14px;background:linear-gradient(90deg,var(--violet),var(--rose));
  opacity:.45;transition:width .22s,opacity .22s}
button.fig:hover span,a.fig:hover span{color:var(--t2)}
button.fig:hover::after,a.fig:hover::after{width:52px;opacity:1}

dialog{border:0;padding:0;margin:0;background:transparent;color:var(--t1);
  position:fixed;inset:0;width:100vw;max-width:100vw;height:100%;max-height:100%;
  overflow:auto;overscroll-behavior:contain}
dialog[open]{display:grid;place-items:center}
dialog::backdrop{background:rgba(6,6,12,.62);backdrop-filter:blur(16px)}
.sheet{width:min(520px,calc(100vw - 40px));
  background:rgba(24,20,40,.72);border:1px solid var(--bd2);border-radius:20px;
  backdrop-filter:blur(26px) saturate(160%);padding:30px 30px 28px;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}
.sheet header{display:flex;align-items:flex-start;gap:18px;margin-bottom:16px}
.sheet b{font-size:40px;font-weight:640;letter-spacing:-.035em;
  line-height:1.08;padding-bottom:.04em;
  background:linear-gradient(115deg,var(--violet),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sheet h3{font-size:19px;font-weight:600;margin-top:5px}
.sheet .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--t3);
  font-size:24px;line-height:1;padding:0 2px}
.sheet .x:hover{color:var(--t1)}
.sheet p{color:var(--t2);font-size:16px;max-width:none}
.sheet ul{list-style:none;margin-top:14px}
.sheet li{color:var(--t2);font-size:15.5px;padding:7px 0 7px 18px;position:relative}
.sheet li::before{content:'';position:absolute;left:0;top:17px;width:6px;height:6px;
  border-radius:50%;background:linear-gradient(120deg,var(--violet),var(--rose))}

/* ── points clés, en lignes numérotées ──────────────────────────────────── */
.rows{margin-top:52px}
.row{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:30px 0;
  border-top:1px solid var(--bd)}
.row:first-child{border-top:0;padding-top:0}
.row b{font-size:14px;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(115deg,var(--violet),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--rose)}
.row h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.row p{color:var(--t2);font-size:16.5px}

/* ── galerie ────────────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;margin-top:46px}
.shot{border-radius:16px;overflow:hidden;background:var(--s2);
  border:1px solid var(--bd);backdrop-filter:blur(14px);
  transition:border-color .22s,transform .22s,box-shadow .22s}
.shot:hover{border-color:rgba(126,92,255,.45);transform:translateY(-4px);
  box-shadow:0 18px 46px rgba(126,92,255,.20)}

/* ── listes de fonctionnalités ──────────────────────────────────────────── */
.grp{margin-top:52px}
.grp h3{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rose);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,var(--violet),rgba(255,77,125,.25),transparent) 1}
.grp dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 44px}
.grp dt{font-size:16.5px;font-weight:600;margin-top:26px}
.grp dd{color:var(--t2);font-size:15.5px;margin-top:5px}

/* ── procédures ─────────────────────────────────────────────────────────── */
.field{position:relative;max-width:440px;margin-top:40px}
.field input{width:100%;padding:14px 16px 14px 44px;font-size:16px;color:var(--t1);
  background:var(--s1);border:1px solid var(--bd);border-radius:12px;outline:none;
  font-family:inherit;backdrop-filter:blur(14px);
  transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--t3)}
.field input:focus{border-color:rgba(126,92,255,.60);
  box-shadow:0 0 0 4px rgba(126,92,255,.12)}
.field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--t3);fill:none;stroke-width:2}
.none{display:none;color:var(--t3);margin-top:34px}
.none.on{display:block}
.sop{border-top:1px solid var(--bd)}
.sop:last-of-type{border-bottom:1px solid var(--bd)}
.sop summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;
  font-size:17px;font-weight:600;position:relative}
.sop summary::-webkit-details-marker{display:none}
.sop summary::after{content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.sop[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.sop summary:hover{color:var(--t1)}
.sop ol{padding:0 0 8px 22px;color:var(--t2);font-size:16px;max-width:70ch}
.sop ol li{margin-bottom:10px}
.sop ol li::marker{color:var(--t3)}
.hint{color:var(--t3);font-size:15px;padding-bottom:24px;max-width:70ch}
.aftr{margin-top:44px;color:var(--t2)}
.aftr a{color:var(--t1);border-bottom:1px solid var(--bd2)}
.aftr a:hover{border-bottom-color:var(--rose)}

/* ── contact ────────────────────────────────────────────────────────────── */
.chan{margin-top:48px}
.ch{display:grid;grid-template-columns:1fr auto;gap:14px 34px;align-items:start;
  padding:30px 0;border-top:1px solid var(--bd)}
.ch:last-child{border-bottom:1px solid var(--bd)}
.ch h3{font-size:19px;font-weight:600;margin-bottom:7px}
.ch p{color:var(--t2);font-size:16px}
.ch .mail{display:block;margin-top:12px;font-size:16px;font-weight:600;
  border-bottom:1px solid var(--bd2);width:fit-content}
.ch .mail:hover{border-bottom-color:var(--rose)}
.ch .sla{font-size:13.5px;color:var(--t3);text-align:right;white-space:nowrap}
.ch .sla b{display:block;color:var(--t2);font-weight:600}

/* ── pages légales ──────────────────────────────────────────────────────── */
.doc{padding-top:clamp(52px,7vw,86px)}
.doc h1{font-size:clamp(32px,4.6vw,50px)}
.date{margin-top:16px;color:var(--t3);font-size:15px}
.intro{margin-top:30px;color:var(--t2);font-size:17.5px;max-width:88ch}
/* Retour à la ligne CHOISI, actif sur écran large seulement : en portrait il
   couperait la phrase au mauvais endroit et laisserait une ligne orpheline. */
.wbr{display:none}
@media (min-width:1000px){ .wbr{display:inline} }
.toc{margin-top:44px;padding:26px 0;border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd)}
.toc p{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t3);margin-bottom:14px}
.toc ol{list-style:none;columns:2;column-gap:44px}
.toc a{display:block;padding:5px 0;color:var(--t2);font-size:15.5px}
.toc a:hover{color:var(--t1)}
.art{padding:34px 0;border-bottom:1px solid var(--bd);scroll-margin-top:86px}
.art h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.art p{color:var(--t2);font-size:16.5px;white-space:pre-line;max-width:72ch}
/* Listes et paragraphes enchaînés dans une section (page Suppression de
   compte). Sans ces règles, les puces héritaient du retrait par défaut du
   navigateur et sortaient de l'alignement du texte. */
.art p + p{margin-top:12px}
.art ul{margin-top:12px;padding-left:20px;max-width:72ch}
.art li{color:var(--t2);font-size:16.5px;margin-bottom:7px}
.art .btn{display:inline-block;margin:16px 0 4px}

/* Section active, marquée au clic sur le sommaire. Violet de marque, pour ne
   pas entrer en concurrence avec le rose du surtitre. Le trait vertical rend
   le repère lisible même pour qui distingue mal les teintes. */
.docnav .toc a{border-left:2px solid transparent;padding-left:9px}
.docnav .toc a.on{color:var(--violet);font-weight:600;
  border-left-color:var(--violet)}
.art h2.on{color:var(--violet)}

/* ── pages légales : exploitation de la largeur ─────────────────────────────
   En une seule colonne, ces pages faisaient plusieurs écrans de haut sur un
   moniteur, alors que les deux tiers de la largeur restaient vides. Trois
   paliers, du plus étroit au plus large.

   Sous 760 px (téléphone) : rien ne change, tout est empilé comme avant.     */

/* Palier tablette / petit portable : le titre de section passe à gauche du
   texte. La page raccourcit sans que les lignes s'allongent — au-delà de ~75
   caractères, un texte juridique devient pénible à suivre. */
@media (min-width:760px){
  .art{display:grid;grid-template-columns:186px minmax(0,1fr);gap:30px;
    align-items:start}
  /* Tout ce qui n'est pas le titre va en colonne de DROITE. Sans cette règle,
     une section à plusieurs paragraphes les répartissait alternativement à
     gauche et à droite : la grille place ses enfants dans l'ordre, sans savoir
     que seul le h2 appartient à la colonne de titre. */
  .art > :not(h2){grid-column:2}
  .art h2{margin-bottom:0;font-size:17.5px;line-height:1.35}
  .art p{font-size:15.5px}
  .art li{font-size:15.5px}
}

/* Palier écran large : le sommaire quitte le flux et devient une colonne
   collante. `align-self:start` est indispensable, sinon l'élément s'étire sur
   toute la hauteur de la grille et `sticky` n'a plus rien pour accrocher. */
@media (min-width:1000px){
  .docgrid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px;
    align-items:start}
  .docnav{position:sticky;top:96px;align-self:start;
    border-right:1px solid var(--bd);padding-right:26px}
  .docnav .toc{margin-top:0;padding:0;border:0}
  .docnav .toc ol{columns:1}
  .docnav .toc a{font-size:14px;padding:4px 0}
  /* Le premier filet du contenu ferait doublon avec celui du sommaire. */
  .docbody .art:first-child{padding-top:0}
}
a.ml{color:var(--t1);border-bottom:1px solid var(--bd2)}
a.ml:hover{border-bottom-color:var(--rose)}

/* ── mentions ───────────────────────────────────────────────────────────── */
.legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;
  margin-top:44px}
.legal h3{font-size:16px;font-weight:600;margin-bottom:9px}
.legal p{color:var(--t3);font-size:15px}

/* ── pied de page ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--bd);padding:40px 0 56px}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  align-items:center;color:var(--t3);font-size:14.5px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a:hover{color:var(--t1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media (max-width:760px){
  :root{--px:20px}
  body{font-size:16.5px}
  .topin{height:60px;gap:20px}.menu{gap:18px}.menu a{font-size:14px}
  .top .act{padding:8px 14px;font-size:13.5px}
  .row{grid-template-columns:1fr;gap:6px}
  .row b{color:var(--rose)}
  .ch{grid-template-columns:1fr}.ch .sla{text-align:left}
  .toc ol{columns:1}
  /* Deux colonnes plutôt qu'une : quatre cartes empilées repousseraient tout
     le contenu sous la ligne de flottaison. */
  .plat{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pl{padding:13px}
  .qrd .qri img{width:164px;height:164px}
}