/* =========================================================================
   SKOLEOM UNIVERSE - feuille de style
   -------------------------------------------------------------------------
   Reprise du Figma « 27 Produits » (page Skoleom page) : rail de gauche,
   barre de recherche en pilule, grille en maçonnerie, page de marque (ASP)
   et lecteur Capsule Play. Thème clair par défaut, thème sombre au choix.
   Polices de la maison : Poppins (interface) + Anton (signatures).
   ========================================================================= */

/* ============================ 1. JETONS ================================= */
:root{
  --brand:#b9f227;          /* vert acide Skoleom */
  --brand-2:#a4de1a;
  --brand-ink:#12180a;
  --pink:#faaad3;           /* rose du titre « tu peux l'avoir. », relevé sur la maquette */
  --blue:#1e7bff;

  --bg:#ffffff;
  --surface:#f6f6f4;
  --surface-2:#efefec;
  --surface-3:#e6e6e2;
  --ink:#101114;
  --ink-2:#5b5f68;
  --ink-3:#8e939c;
  --line:#e7e8ea;
  --line-2:#d8dade;

  --shadow-1:0 1px 2px rgba(16,17,20,.05), 0 2px 8px rgba(16,17,20,.05);
  --shadow-2:0 10px 30px rgba(16,17,20,.10), 0 2px 8px rgba(16,17,20,.06);
  --shadow-3:0 24px 60px rgba(16,17,20,.18);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  --ui:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display:'Anton', 'Poppins', sans-serif;

  --rail:208px;
  --topbar:76px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* Noms courts utilises par le Page Studio et le lecteur d'article.
     Sans eux, background:var(--card) ne valait rien : la carte du lecteur
     etait transparente et le texte de Wikipedia illisible par-dessus la
     page. Ils suivent le theme, clair comme sombre. */
  --card:var(--bg);
  --soft:var(--surface);
  --mute:var(--ink-3);
}

:root[data-theme="dark"]{
  --bg:#0c0d10;
  --surface:#15171c;
  --surface-2:#1c1f25;
  --surface-3:#242830;
  --ink:#f3f4f6;
  --ink-2:#a6abb5;
  --ink-3:#787e88;
  --line:#262a31;
  --line-2:#333843;

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 10px 30px rgba(0,0,0,.5);
  --shadow-3:0 24px 60px rgba(0,0,0,.6);
}

/* ============================ 2. BASE =================================== */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
input,select,textarea{font:inherit; color:inherit}
/* 16 px minimum : en dessous, Safari iOS zoome la page à la saisie. */
input,textarea,select{font-size:16px}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; font-weight:700; letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
::selection{background:var(--brand); color:var(--brand-ink)}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================ 3. RAIL =================================== */
.rail{
  position:fixed; inset-block:0; inset-inline-start:0; inset-inline-end:auto;
  width:var(--rail); z-index:60;
  background:var(--bg); border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; align-items:stretch;
  padding:16px 12px calc(16px + var(--safe-b));
  overflow-y:auto; transition:transform .28s var(--ease);
}
.rail-brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 18px; text-align:start; width:100%;
}
.rail-brand img{width:34px;height:34px;object-fit:contain;flex:none}
.rail-brand span{font-size:13px; font-weight:700; line-height:1.2; color:var(--ink); letter-spacing:-.01em}
.rail-nav{display:flex; flex-direction:column; gap:4px; width:100%; flex:1}
.rail-foot{width:100%; padding-top:8px; border-top:1px solid var(--line)}
.rail-item{
  display:flex; align-items:center; justify-content:flex-start; gap:13px;
  width:100%; padding:11px 14px; border-radius:var(--r-md); color:var(--ink-2);
  transition:background .16s, color .16s; position:relative;
}
.rail-item:hover{background:var(--surface); color:var(--ink)}
.rail-item.on{background:var(--surface-2); color:var(--ink)}
.rail-item.on::before{
  content:''; position:absolute; inset-inline-start:-12px; top:50%; translate:0 -50%;
  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--brand);
}
.ri-ico{display:grid; place-items:center; width:22px; height:22px}
.ri-ico svg{width:21px; height:21px}
.ri-lab{font-size:14px; font-weight:500; letter-spacing:-.005em}
.rail-item .badge{
  position:absolute; top:12px; inset-inline-start:30px; width:7px; height:7px;
  border-radius:50%; background:#ff4d5e;
}
.rail-item.on .ri-ico{background:var(--ink); color:var(--bg); border-radius:50%}
.rail-item .ri-ico{width:26px; height:26px; transition:background .16s, color .16s}

/* ============================ 4. TOPBAR ================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  margin-inline-start:var(--rail);
  height:var(--topbar); padding:0 24px; padding-top:var(--safe-t);
  display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.tb-burger{display:none; width:40px; height:40px; border-radius:var(--r-md); color:var(--ink-2)}
.tb-burger svg{width:22px;height:22px;margin:auto}

.tb-search{
  position:relative; flex:1; max-width:860px; height:46px;
  display:flex; align-items:center; gap:10px; padding:0 8px 0 16px;
  background:var(--surface); border:1px solid transparent; border-radius:var(--r-pill);
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.tb-search:focus-within{background:var(--bg); border-color:var(--line-2); box-shadow:var(--shadow-1)}
.tb-ico{display:grid; place-items:center; color:var(--ink-3); flex:none}
.tb-ico svg{width:18px;height:18px}
.tb-search input{
  flex:1; min-width:0; height:100%; border:0; background:none; outline:none;
  font-size:15px; font-weight:400; color:var(--ink);
}
.tb-search input::placeholder{color:var(--ink-3)}
.tb-search input::-webkit-search-cancel-button{display:none}
.tb-clear,.tb-filter{
  flex:none; width:32px; height:32px; border-radius:50%; color:var(--ink-2);
  display:grid; place-items:center; transition:background .16s;
}
.tb-clear{display:none}
.tb-clear.on{display:grid}
.tb-clear:hover,.tb-filter:hover{background:var(--surface-2)}
.tb-clear svg,.tb-filter svg{width:17px;height:17px}

.tb-suggest{
  position:absolute; top:calc(100% + 8px); inset-inline:0; z-index:70;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); overflow:hidden; display:none; max-height:56vh; overflow-y:auto;
}
.tb-suggest.on{display:block}
.tb-suggest button{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 16px;
  text-align:start; font-size:14.5px; color:var(--ink-2); transition:background .14s;
}
.tb-suggest button:hover,.tb-suggest button.sel{background:var(--surface); color:var(--ink)}
.tb-suggest .sg-ico{color:var(--ink-3); display:grid; place-items:center}
.tb-suggest .sg-ico svg{width:16px;height:16px}
.tb-suggest .sg-kind{margin-inline-start:auto; font-size:11.5px; color:var(--ink-3)}

.tb-right{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.tb-cat{
  display:flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap;
  transition:border-color .16s, color .16s;
}
.tb-cat:hover{border-color:var(--line-2); color:var(--ink)}
.tb-cat svg{width:14px;height:14px}
.tb-round{
  position:relative; width:40px; height:40px; border-radius:50%; color:var(--ink-2);
  display:grid; place-items:center; transition:background .16s, color .16s;
}
.tb-round:hover{background:var(--surface); color:var(--ink)}
.tb-round svg{width:19px;height:19px}
.tb-round .dot{position:absolute; top:8px; inset-inline-end:9px; width:7px; height:7px; border-radius:50%; background:#ff4d5e}
.tb-lang{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 12px;
  border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--ink-2);
  transition:background .16s;
}
.tb-lang:hover{background:var(--surface)}
.tb-user{display:flex; align-items:center; gap:9px; height:44px; padding:0 10px 0 4px; border-radius:var(--r-pill); transition:background .16s}
.tb-user:hover{background:var(--surface)}
.tb-user svg{width:14px;height:14px;color:var(--ink-3)}
.av{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:14px; font-weight:600;
  background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:var(--brand-ink);
}
.tb-user .who{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.tb-user .who small{font-size:10.5px; color:var(--ink-3)}
.tb-user .who b{font-size:13.5px; font-weight:600}

/* ============================ 5. MAIN =================================== */
.main{margin-inline-start:var(--rail); min-height:100vh}
.wrap{width:min(1280px, 100% - 48px); margin-inline:auto}
.wrap-wide{width:min(1560px, 100% - 48px); margin-inline:auto}
.view{display:none}
.view.on{display:block; animation:viewIn .3s var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.sec{padding:34px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px}
.sec-head h2{font-size:clamp(20px,2.4vw,27px); font-weight:700}
.sec-head p{margin:4px 0 0; color:var(--ink-2); font-size:14px}
.sec-link{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.sec-link:hover{color:var(--ink)}
.sec-link svg{width:15px;height:15px}

/* boutons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:600; white-space:nowrap;
  transition:transform .14s var(--ease), background .16s, border-color .16s, box-shadow .16s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px}
.btn-1{background:var(--ink); color:var(--bg)}
.btn-1:hover{box-shadow:var(--shadow-2)}
.btn-brand{background:var(--brand); color:var(--brand-ink)}
.btn-brand:hover{background:var(--brand-2)}
.btn-2{background:var(--surface-2); color:var(--ink)}
.btn-2:hover{background:var(--surface-3)}
.btn-ghost{border:1px solid var(--line-2); color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{height:36px; padding:0 15px; font-size:13px}
.btn-round{width:44px; height:44px; padding:0; border-radius:50%}

/* ======================= 6. ÉCRAN PUBLIC (LANDING) ====================== */
.hero{
  position:relative; min-height:min(760px, 92vh); border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; isolation:isolate;
  padding:96px 0 28px; background:linear-gradient(118deg,#2f6fd0,#6f57c9 38%,#e0568f 68%,#f4a6cb);
}
.hero-bg{position:absolute; inset:0; z-index:-2; object-fit:cover; width:100%; height:100%}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(8,14,32,.72) 0%, rgba(8,14,32,.36) 46%, rgba(8,14,32,.12) 72%, transparent 100%);
}
.hero-nav{
  position:absolute; top:0; inset-inline:0; height:84px; padding:0 34px; z-index:3;
  display:flex; align-items:center; gap:34px;
}
.hero-logo{display:flex; align-items:center; gap:10px; color:#fff}
/* le logo garde ses proportions : un bloc-marque large n'est pas ecrase */
.hero-logo img{height:34px; width:auto; max-width:70px; object-fit:contain}
.hero-logo b{font-size:15.5px; font-weight:600; line-height:1.15}
.hero-nav nav{display:flex; gap:28px; margin-inline:auto}
.hero-nav nav a{color:#fff; font-size:14.5px; font-weight:500; opacity:.92}
.hero-nav nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
.hero-nav .hn-r{display:flex; align-items:center; gap:12px}

.hero-in{position:relative; z-index:2; padding:0 34px; max-width:780px;
  flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0}
.hero h1{
  font-size:clamp(42px, 7.2vw, 92px); font-weight:800; line-height:.96;
  letter-spacing:-.035em; color:#fff; margin:0 0 20px;
}
.hero h1 .pk{color:var(--pink); display:block}
.hero-sub{color:rgba(255,255,255,.94); font-size:clamp(14px,1.5vw,17px); max-width:440px; margin:0 0 26px; line-height:1.45}

.hero-search{
  display:flex; align-items:center; gap:10px; height:60px; padding:0 8px 0 22px;
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--shadow-3); max-width:660px;
}
.hero-search .hs-ico{color:#101114; display:grid; place-items:center; flex:none}
.hero-search .hs-ico svg{width:20px; height:20px}
.hero-search input{flex:1; min-width:0; border:0; background:none; outline:none; color:#101114; font-size:15.5px}
.hero-search input::placeholder{color:#8e939c}
.hero-search .hs-go{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:var(--brand-ink); display:grid; place-items:center;
  transition:transform .15s var(--ease), background .15s;
}
.hero-search .hs-go:hover{background:var(--brand-2); transform:translateX(2px)}
.hero-search .hs-go svg{width:19px; height:19px}

.hero-steps{
  position:relative; z-index:2; padding:26px 34px 0;
  display:flex; gap:clamp(18px,6vw,90px); flex-wrap:wrap;
}
.hstep{display:flex; gap:12px; color:#fff; max-width:300px}
.hstep .hi{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.7); display:grid; place-items:center;
}
.hstep .hi svg{width:16px; height:16px}
.hstep b{display:block; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:3px}
.hstep p{margin:0; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.88)}

.hero-plats{
  position:relative; z-index:2; padding:26px 24px 0;
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
}
/* tous les logos de la ligne sont ramenes au blanc, comme sur la maquette */
.hero-plats img{height:22px; width:auto; max-width:150px; object-fit:contain;
  opacity:.95; filter:brightness(0) invert(1)}
.hero-plats .sep{width:1px; height:20px; background:rgba(255,255,255,.4)}

/* bandeau de confiance sous le héros -------------------------------------- */
.trust{display:flex; gap:14px; flex-wrap:wrap; padding:26px 0 0}
.trust .t{
  flex:1 1 220px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
}
.trust .t b{display:block; font-size:26px; font-weight:700; letter-spacing:-.03em}
.trust .t span{font-size:13px; color:var(--ink-2)}

/* ====================== 7. ACCUEIL CONNECTÉ ============================= */
.crumbs{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.crumbs i{width:4px; height:4px; border-radius:50%; background:var(--line-2); display:inline-block}

.welcome{display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:center;
  padding:30px 0 12px}
.welcome h1{font-size:clamp(30px,4.3vw,50px); font-weight:800; line-height:1.03; letter-spacing:-.035em}
.welcome p.lead{color:var(--ink-2); font-size:15.5px; margin:16px 0 22px; max-width:520px}
.welcome-search{
  display:flex; align-items:center; gap:10px; height:54px; padding:0 8px 0 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); max-width:560px;
}
.welcome-search input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:15px}
.welcome-search input::placeholder{color:var(--ink-3)}
.welcome-cta{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

.showcase{position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3; background:var(--surface-2); box-shadow:var(--shadow-2)}
.showcase img{width:100%; height:100%; object-fit:cover}
.showcase .sc-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#101114; display:grid; place-items:center;
  box-shadow:var(--shadow-2); transition:transform .18s var(--ease);
}
.showcase .sc-play:hover{transform:scale(1.07)}
.showcase .sc-play svg{width:26px;height:26px; margin-inline-start:3px}
.showcase .sc-cap{
  position:absolute; inset-inline:16px; bottom:16px; color:#fff; font-size:13.5px;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.sc-prod{
  position:absolute; top:16px; inset-inline-end:16px; width:190px;
  background:rgba(255,255,255,.96); border-radius:var(--r-md); padding:10px;
  box-shadow:var(--shadow-2); color:#101114;
}
.sc-prod img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); margin-bottom:8px}
.sc-prod b{display:block; font-size:12.5px; font-weight:600; line-height:1.3}
.sc-prod .pr{font-size:14px; font-weight:700; margin:3px 0 8px}
.sc-prod .add{width:100%; height:32px; border-radius:var(--r-pill); background:#101114; color:#fff; font-size:12px; font-weight:600}

/* comment ça marche ------------------------------------------------------ */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.how .h{display:flex; gap:14px; padding:20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg)}
.how .h .hi{width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center}
.how .h:nth-child(1) .hi{background:#e8f0ff; color:#1e63d6}
.how .h:nth-child(2) .hi{background:#ffeaf3; color:#d6407e}
.how .h:nth-child(3) .hi{background:#eefbd6; color:#5f8f0d}
:root[data-theme="dark"] .how .h:nth-child(1) .hi{background:rgba(30,99,214,.18)}
:root[data-theme="dark"] .how .h:nth-child(2) .hi{background:rgba(214,64,126,.18)}
:root[data-theme="dark"] .how .h:nth-child(3) .hi{background:rgba(95,143,13,.2)}
.how .h .hi svg{width:20px;height:20px}
.how .h b{display:block; font-size:14.5px; margin-bottom:4px}
.how .h p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5}

/* démarrer : catégories --------------------------------------------------- */
.starts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.start{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/8;
  display:flex; align-items:flex-end; padding:18px; color:#fff; isolation:isolate;
}
.start img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.start:hover img{transform:scale(1.05)}
.start::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12) 62%, transparent)}
.start b{font-size:17px; font-weight:700}
.start span{display:block; font-size:12.5px; opacity:.88; margin-top:2px; max-width:80%}
.start .go{
  margin-inline-start:auto; width:36px; height:36px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.95); color:#101114; display:grid; place-items:center;
}
.start .go svg{width:17px;height:17px}

/* ==================== 8. PASTILLES DE CATÉGORIE ========================= */
/* Pastilles du Figma : une image ronde qui déborde sur une pilule.
   Active = pilule noire, texte blanc.                                    */
.chips{
  display:flex; align-items:center; gap:10px; overflow-x:auto; padding:8px 2px 16px;
  scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;
  touch-action:pan-x pan-y;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  position:relative; flex:none; display:flex; align-items:center; gap:9px;
  height:46px; padding:0 20px 0 62px; border-radius:var(--r-pill);
  background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-size:14px; font-weight:600; white-space:nowrap; scroll-snap-align:start;
  box-shadow:var(--shadow-1); transition:background .16s, color .16s, border-color .16s, transform .16s var(--ease);
}
.chip:hover{transform:translateY(-1px)}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .cp{
  position:absolute; inset-inline-start:-1px; top:-4px;
  width:54px; height:54px; border-radius:50%; overflow:hidden;
  background:var(--surface-2); border:2px solid var(--bg); box-shadow:var(--shadow-1);
}
.chip .cp img{width:100%; height:100%; object-fit:cover}
.chip.nopic{padding-inline-start:20px}
.chip.nopic .cp{display:none}
.chips-btn{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-2); transition:background .16s, color .16s;
}
.chips-btn:hover{background:var(--surface-3); color:var(--ink)}
.chips-btn svg{width:18px; height:18px}

/* pastilles texte (raffinements de recherche) ----------------------------- */
.pills{display:flex; gap:9px; overflow-x:auto; padding:2px 2px 14px; scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex:none; height:34px; padding:0 15px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:7px;
  transition:background .16s, color .16s;
}
.pill:hover{background:var(--surface-3); color:var(--ink)}
.pill.on{background:var(--ink); color:var(--bg)}
.pill img{width:18px;height:18px;border-radius:50%;object-fit:cover}

/* ===================== 9. GRILLE EN MAÇONNERIE ========================== */
.masonry{columns:5 232px; column-gap:16px}
.masonry > *{break-inside:avoid; margin-bottom:16px}
@media (max-width:1100px){ .masonry{columns:3 200px} }
@media (max-width:640px){ .masonry{columns:2 150px; column-gap:10px} .masonry > *{margin-bottom:10px} }

.card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2);
  cursor:pointer; display:block; width:100%;
}
.card > img{width:100%; height:auto; display:block; transition:transform .5s var(--ease)}
.card:hover > img{transform:scale(1.035)}
.card .ov{
  position:absolute; inset:0; opacity:0; transition:opacity .2s;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent 42%, rgba(0,0,0,.24));
}
.card:hover .ov{opacity:1}
.card .save{
  position:absolute; top:10px; inset-inline-end:10px; height:34px; padding:0 13px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.95); color:#101114;
  font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(-4px); transition:.2s var(--ease);
}
.card:hover .save{opacity:1; transform:none}
.card .save svg{width:14px;height:14px}
.card .save.on{background:var(--ink); color:var(--bg)}
.card .dur{
  position:absolute; top:10px; inset-inline-start:10px; height:24px; padding:0 9px;
  border-radius:var(--r-pill); background:rgba(0,0,0,.62); color:#fff;
  font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px;
  backdrop-filter:blur(6px);
}
.card .dur svg{width:11px;height:11px}
.card .cap{
  position:absolute; inset-inline:12px; bottom:12px; color:#fff;
  opacity:0; transform:translateY(6px); transition:.22s var(--ease);
}
.card:hover .cap{opacity:1; transform:none}
.card .cap b{display:block; font-size:13.5px; font-weight:600; line-height:1.3;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.card .cap span{font-size:11.5px; opacity:.88}
.card .wtb{
  position:absolute; inset-inline-start:12px; bottom:12px;
  height:26px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--brand-ink);
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:5px;
}
.card .wtb svg{width:11px;height:11px}
.card-foot{display:flex; align-items:center; gap:8px; padding:8px 4px 0}
.card-foot .av{width:24px;height:24px;font-size:10px}
.card-foot b{font-size:12.5px; font-weight:500; color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.card-foot .lk{margin-inline-start:auto; font-size:11.5px; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:4px}
.card-foot .lk svg{width:13px;height:13px}
.cardwrap{break-inside:avoid; margin-bottom:16px}

/* carrousel horizontal ---------------------------------------------------- */
.rail-h{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;
  scroll-snap-type:x proximity; touch-action:pan-x pan-y}
.rail-h::-webkit-scrollbar{display:none}
.rail-h > *{flex:none; width:clamp(210px,23vw,262px); scroll-snap-align:start}

/* ===================== 10. PAGE DE MARQUE (ASP) ========================= */
.asp-cover{position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1120/230; min-height:170px; background:var(--surface-2)}
.asp-cover img{width:100%; height:100%; object-fit:cover}
.asp-cover .kick{
  position:absolute; top:18px; inset-inline-start:26px; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.85;
}
.asp-cover h2{
  position:absolute; inset-inline-start:74px; top:50%; translate:0 -50%; color:#fff;
  font-size:clamp(20px,3vw,34px); font-weight:300; line-height:1.08; letter-spacing:-.01em;
  text-shadow:0 2px 20px rgba(0,0,0,.35); max-width:46%;
}
.asp-head{display:flex; align-items:center; gap:16px; padding:18px 4px; flex-wrap:wrap}
.asp-logo{width:64px; height:64px; border-radius:50%; flex:none; background:var(--bg);
  border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-1)}
.asp-logo img{width:100%; height:100%; object-fit:contain; padding:8px}
.asp-id h3{font-size:21px; display:flex; align-items:center; gap:7px}
.asp-id h3 .vf{width:17px;height:17px;color:var(--blue)}
.asp-id .meta{font-size:12.5px; color:var(--ink-2); display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.asp-stats{display:flex; gap:26px; margin-inline-start:auto; flex-wrap:wrap}
.asp-stats div{text-align:center}
.asp-stats b{display:block; font-size:15px; font-weight:700}
.asp-stats span{font-size:11px; color:var(--ink-3)}
.asp-act{display:flex; gap:8px; align-items:center}
.asp-tabs{
  display:flex; gap:22px; border-bottom:1px solid var(--line); padding:0 4px; overflow-x:auto;
  scrollbar-width:none;
}
.asp-tabs::-webkit-scrollbar{display:none}
.asp-tab{
  position:relative; padding:12px 0; font-size:14px; font-weight:600; color:var(--ink-3);
  white-space:nowrap; transition:color .16s;
}
.asp-tab:hover{color:var(--ink-2)}
.asp-tab.on{color:var(--ink)}
.asp-tab.on::after{content:''; position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--ink); border-radius:2px}
.asp-sort{margin-inline-start:auto; display:flex; align-items:center; gap:10px; padding:8px 0}

/* ====================== 11. PLATEFORMES ================================= */
.plats{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none}
.plats::-webkit-scrollbar{display:none}
.plat{
  flex:none; display:flex; align-items:center; gap:9px; height:44px; padding:0 15px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg);
  font-size:13.5px; font-weight:600; transition:border-color .16s, box-shadow .16s, transform .16s var(--ease);
}
.plat:hover{border-color:var(--line-2); box-shadow:var(--shadow-1); transform:translateY(-1px)}
.plogo-wrap{width:24px; height:24px; border-radius:6px; overflow:hidden; display:grid; place-items:center; flex:none; background:var(--surface-2)}
.plogo-img{width:100%; height:100%; object-fit:contain}
.plogo-wrap svg{width:100%; height:100%}

/* ====================== 12. CAPSULE PLAY ================================ */
.capsule{
  position:fixed; inset:0; z-index:200; background:#000; display:none;
  align-items:center; justify-content:center;
}
.capsule.on{display:flex; animation:viewIn .25s var(--ease)}
.cap-media{position:absolute; inset:0}
.cap-media iframe,.cap-media video,.cap-media img{width:100%; height:100%; border:0; object-fit:cover}
.cap-x{
  position:absolute; top:calc(16px + var(--safe-t)); inset-inline-end:16px; z-index:6;
  width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(8px);
}
.cap-x svg{width:19px;height:19px}
.cap-top{
  position:absolute; top:calc(16px + var(--safe-t)); inset-inline-start:16px; z-index:6;
  display:flex; align-items:center; gap:9px; height:34px; padding:0 13px;
  border-radius:var(--r-pill); background:rgba(0,0,0,.5); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.04em; backdrop-filter:blur(8px);
}
.cap-top svg{width:14px;height:14px; color:var(--brand)}

/* barre de produits, façon Figma : fiche + rail de vignettes -------------- */
.cap-bar{
  position:absolute; inset-inline:0; bottom:0; z-index:5;
  /* la capsule passe au-dessus de la barre de lecture du lecteur :
     rien ne recouvre la progression ni les commandes de la vidéo. */
  padding:0 16px calc(74px + var(--safe-b));
  display:flex; justify-content:center; pointer-events:none;
}
.cap-bar-in,.cap-bar button{pointer-events:auto}
.cap-bar-in{
  width:min(760px, 100%); display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:var(--r-lg);
  background:rgba(22,22,24,.78); backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--shadow-3); color:#fff; position:relative;
}
.cap-grip{
  position:absolute; top:-9px; inset-inline:0; margin-inline:auto;
  width:46px; height:4px; border-radius:4px; background:rgba(255,255,255,.55);
}
.cap-feature{display:flex; align-items:center; gap:11px; flex:none; max-width:330px}
.cap-feature img{width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none}
.cap-feature .ft{min-width:0}
.cap-feature b{display:block; font-size:12.5px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cap-feature small{display:block; font-size:11px; color:rgba(255,255,255,.62)}
.cap-feature .pr{font-size:13.5px; font-weight:700; margin-top:1px}
.cap-feature .see{
  flex:none; height:30px; padding:0 13px; border-radius:var(--r-pill);
  background:#fff; color:#101114; font-size:11.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.cap-feature .see svg{width:13px;height:13px}
.cap-rail{
  display:flex; align-items:center; gap:8px; overflow-x:auto; flex:1;
  scrollbar-width:none; padding:2px; touch-action:pan-x pan-y;
}
.cap-rail::-webkit-scrollbar{display:none}
.cap-thumb{
  flex:none; width:44px; height:44px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; background:rgba(255,255,255,.1);
  transition:border-color .16s, transform .16s var(--ease);
}
.cap-thumb:hover{transform:translateY(-2px)}
.cap-thumb.on{border-color:var(--brand)}
.cap-thumb img{width:100%; height:100%; object-fit:cover}
.cap-more{
  flex:none; min-width:44px; height:44px; padding:0 10px; border-radius:10px;
  background:rgba(255,255,255,.14); color:#fff; font-size:12.5px; font-weight:700;
  display:grid; place-items:center;
}

/* fiche produit en surimpression ------------------------------------------ */
.cap-sheet{
  position:absolute; inset-inline:0; bottom:0; z-index:7;
  transform:translateY(102%); transition:transform .3s var(--ease);
  background:var(--bg); color:var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-3);
  max-height:86vh; overflow-y:auto; padding-bottom:calc(20px + var(--safe-b));
}
.cap-sheet.on{transform:none}
.cs-in{width:min(920px,100%); margin-inline:auto; padding:22px 20px 0}
.cs-grip{width:46px; height:4px; border-radius:4px; background:var(--line-2); margin:12px auto 0}
.cs-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px}
.cs-img{border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); aspect-ratio:1}
.cs-img img{width:100%; height:100%; object-fit:cover}
.cs-brand{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cs-in h3{font-size:22px; margin:6px 0 8px; line-height:1.2}
.cs-price{font-size:26px; font-weight:700; letter-spacing:-.02em}
.cs-sizes{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0}
.cs-size{min-width:44px; height:40px; padding:0 12px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); font-size:13.5px; font-weight:600; display:grid; place-items:center}
.cs-size.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cs-act{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap}
.cs-note{font-size:12.5px; color:var(--ink-2); margin-top:14px; line-height:1.55}

/* ====================== 13. PANNEAUX ET MODALES ========================= */
.scrim{position:fixed; inset:0; z-index:150; background:rgba(8,9,12,.5); opacity:0;
  pointer-events:none; transition:opacity .25s; backdrop-filter:blur(2px)}
.scrim.on{opacity:1; pointer-events:auto}
.panel{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:160; width:min(420px,92vw);
  background:var(--bg); border-inline-start:1px solid var(--line);
  transform:translateX(102%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-3);
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
}
[dir="rtl"] .panel{transform:translateX(-102%)}
.panel.on{transform:none}
.pn-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)}
.pn-head h3{font-size:17px; flex:1}
.pn-body{flex:1; overflow-y:auto; padding:18px 20px}
.pn-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.pn-row:last-child{border-bottom:0}
.pn-row .lb{flex:1; font-size:14px}
.pn-row .sub{font-size:12px; color:var(--ink-3)}

.switch{width:44px; height:26px; border-radius:var(--r-pill); background:var(--surface-3); position:relative; flex:none; transition:background .2s}
.switch::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform .2s var(--ease)}
.switch.on{background:var(--brand)}
.switch.on::after{transform:translateX(18px)}
[dir="rtl"] .switch.on::after{transform:translateX(-18px)}

.modal{position:fixed; inset:0; z-index:180; display:none; align-items:center; justify-content:center; padding:20px}
.modal.on{display:flex}
.modal-card{
  width:min(560px,100%); max-height:88vh; overflow-y:auto; background:var(--bg);
  border-radius:var(--r-xl); box-shadow:var(--shadow-3); padding:26px;
  animation:pop .26s var(--ease);
}
@keyframes pop{from{opacity:0; transform:scale(.96) translateY(10px)} to{opacity:1; transform:none}}

/* ======================== 14. PIED DE PAGE ============================== */
.foot{border-top:1px solid var(--line); margin-top:40px; padding:44px 0 30px; background:var(--surface)}

/* la bande du haut : l'identite a gauche, le groupe a droite */
.foot-top{display:grid; grid-template-columns:1fr 1.25fr; gap:40px;
  padding-bottom:34px; border-bottom:1px solid var(--line)}
.foot-brand img{width:38px; margin-bottom:12px}
.foot-brand p{font-size:12.5px; color:var(--ink-2); line-height:1.65; max-width:340px; margin:0 0 12px}
.foot-brand .fb-sig{margin-bottom:10px}
.fb-liens{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.foot-pitch h4{font-family:var(--display); font-size:19px; letter-spacing:.01em;
  margin:0 0 10px; color:var(--ink)}
.foot-pitch p{font-size:13px; color:var(--ink-2); line-height:1.72; margin:0 0 10px; max-width:620px}
.foot-pitch p b{color:var(--ink); font-weight:600}
.fp-cle{font-size:14.5px !important; color:var(--ink) !important; margin:14px 0 4px !important}
.fp-cle b{font-weight:700}
.fp-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* les quatre chiffres, et le lien vers leurs sources */
.foot-kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 20px;
  margin-top:26px; padding:22px 22px 18px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
  text-decoration:none}
.foot-kpi:hover{border-color:var(--ink-3)}
.foot-kpi b{display:block; font-family:var(--display); font-size:clamp(22px,2.4vw,30px);
  line-height:1.05; color:var(--ink); letter-spacing:.005em; margin-bottom:6px}
.foot-kpi span{display:block; font-size:12px; color:var(--ink-3); line-height:1.45}
.fk-src{grid-column:1/-1; display:flex !important; align-items:center; gap:6px;
  border-top:1px solid var(--line); padding-top:13px; margin-top:4px;
  font-size:12px !important; font-weight:600; color:var(--ink-2) !important}
.fk-src svg{width:14px; height:14px; flex:none}
.foot-kpi:hover .fk-src{color:var(--ink) !important}
.foot-kpi:hover .fk-src svg{transform:translateX(3px); transition:transform .2s var(--ease)}
@media (max-width:900px){ .foot-kpi{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-kpi{grid-template-columns:1fr} }

/* les colonnes de liens : six colonnes qui se replient proprement */
.foot-in{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:26px 22px; padding:30px 0 4px}
.foot h5{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px; line-height:1.4}
.foot li{margin-bottom:7px}
.foot li a{font-size:13px; color:var(--ink-2); line-height:1.45}
.foot li a:hover{color:var(--ink)}

/* le menu déroulant des sites du groupe : une bande, pas une colonne.
   Ouvert, il tient sur une ou deux lignes au lieu d'allonger la page. */
.foot-sites{margin-top:22px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); overflow:hidden}
.foot-sites summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:14px 20px;
  font-size:13px; font-weight:600; color:var(--ink)}
.foot-sites summary::-webkit-details-marker{display:none}
.foot-sites summary > span{display:flex; align-items:center; gap:9px}
.foot-sites summary i{font-style:normal; font-size:11px; font-weight:700;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-3);
  border-radius:999px; padding:2px 8px; line-height:1.5}
.foot-sites summary svg{width:16px; height:16px; flex:none; transition:transform .2s var(--ease)}
.foot-sites[open] summary svg{transform:rotate(180deg)}
.foot-sites ul{border-top:1px solid var(--line); padding:14px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px}
.foot-sites li{margin:0; min-width:0}
.foot-sites li a{display:block; padding:10px 12px; border-radius:var(--r-md);
  border:1px solid transparent; font-size:13px; color:var(--ink); line-height:1.3}
.foot-sites li a:hover{background:var(--surface); border-color:var(--line)}
.foot-sites li a{position:relative}
.foot-sites li a b{display:block; font-weight:600; font-size:13px; padding-inline-end:16px}
.foot-sites li a small{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}
/* la petite flèche « lien externe » se range en haut à droite de la carte,
   au lieu de tomber sur une troisième ligne et de rallonger la bande. */
.foot-sites li a .ext-ico{position:absolute; inset-inline-end:10px; top:10px}
@media (max-width:640px){ .foot-sites ul{grid-template-columns:1fr 1fr; gap:6px; padding:10px} }

/* la bande de confiance */
.foot-trust{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  border-top:1px solid var(--line); margin-top:26px; padding-top:22px}
.foot-trust > div{border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 14px; background:var(--bg)}
.foot-trust b{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:5px}
.foot-trust span{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.55}

/* qui contracte et qui encaisse */
.foot-societe{margin-top:20px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--bg); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink-2); line-height:1.65}
.foot-societe b{color:var(--ink); font-weight:600}
.foot-societe a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.foot-societe a:hover{color:var(--ink)}

.foot-legal{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:24px; padding-top:18px;
  font-size:12px; color:var(--ink-3)}

/* =================== 14 bis. LES PAGES DU GROUPE ======================== */
.pg{width:min(860px, 100% - 48px); padding:26px 0 56px}
.pg-fil{display:flex; gap:8px; align-items:center; font-size:12px;
  color:var(--ink-3); margin-bottom:18px}
.pg-fil a{color:var(--ink-3)}
.pg-fil a:hover{color:var(--ink)}
.pg-tete{padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:26px}
.pg-sur{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.pg-tete h1{font-family:var(--display); font-size:clamp(28px,4.4vw,44px);
  line-height:1.08; letter-spacing:-.01em; margin:0 0 12px}
.pg-chapo{font-size:16px; color:var(--ink-2); line-height:1.6; max-width:680px; margin:0}

.pg-corps{font-size:14.5px; color:var(--ink-2); line-height:1.78}
.pg-corps h2{font-family:var(--display); font-size:20px; letter-spacing:.005em;
  color:var(--ink); margin:30px 0 12px; line-height:1.25}
.pg-corps h3{font-size:15px; font-weight:600; color:var(--ink); margin:22px 0 8px}
.pg-corps p{margin:0 0 13px}
.pg-corps b, .pg-corps strong{color:var(--ink); font-weight:600}
.pg-corps a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.pg-li{margin:0 0 15px; padding:0; list-style:none}
.pg-li li{position:relative; padding-inline-start:18px; margin-bottom:8px}
.pg-li li::before{content:""; position:absolute; inset-inline-start:2px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--ink-3)}

.pg-def{display:grid; gap:10px; margin:4px 0 18px}
.pg-def > div{border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; background:var(--surface)}
.pg-def b{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:5px}
.pg-def span{display:block; font-size:13px; color:var(--ink-2); line-height:1.65}

.pg-note{border-inline-start:3px solid var(--line); background:var(--surface);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:12px 16px; margin:18px 0;
  font-size:12.5px; color:var(--ink-3); line-height:1.65}

.pg-pied{margin-top:40px; padding-top:24px; border-top:1px solid var(--line)}
.pg-ident{display:flex; flex-direction:column; gap:3px; margin-bottom:16px}
.pg-ident b{font-size:13.5px; color:var(--ink)}
.pg-ident span{font-size:12px; color:var(--ink-3)}
.pg-liens{display:flex; flex-wrap:wrap; gap:8px}
.pg-liens a{font-size:12px; color:var(--ink-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px}
.pg-liens a:hover{color:var(--ink); border-color:var(--ink-3)}

/* les chiffres dans la fenêtre communauté */
.cs-kpi{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px}
.cs-kpi > div{border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 13px; background:var(--surface)}
.cs-kpi b{display:block; font-family:var(--display); font-size:21px; line-height:1.05;
  color:var(--ink)}
.cs-kpi span{display:block; font-size:11px; color:var(--ink-3); line-height:1.4; margin-top:3px}

/* ============ L'ÉDITEUR DES TEXTES DU SITE, DANS LE STUDIO ============== */
.tx-avis{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:14px 0 4px; padding:13px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  font-size:12.5px; color:var(--ink-2); line-height:1.6}
.tx-avis b{color:var(--ink); font-weight:600}
.tx-avis span{flex:1 1 320px; min-width:0}
.tx-avis code{font-size:11.5px; background:var(--bg); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px}
.tx-avis.is-chaud{border-color:var(--brand-2); background:color-mix(in srgb, var(--brand) 10%, var(--surface))}

.tx-body{display:flex; flex-direction:column; gap:22px}
.tx-bloc h4{font-size:14.5px; font-weight:600; color:var(--ink); margin:0 0 3px}
.tx-aide{font-size:12.5px; color:var(--ink-3); line-height:1.55; margin:0 0 12px}
.tx-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}

.tx-champ{display:flex; flex-direction:column; gap:5px; min-width:0}
.tx-champ label{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tx-champ label span{font-size:12px; font-weight:600; color:var(--ink-2)}
.tx-rev{font-size:11px; font-weight:600; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px; background:var(--bg)}
.tx-rev:hover{color:var(--ink); border-color:var(--ink-3)}
.tx-champ input, .tx-champ textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); padding:9px 11px;
  font:inherit; font-size:13px; line-height:1.55; resize:vertical}
.tx-champ textarea{min-height:60px}
.tx-champ input:focus, .tx-champ textarea:focus{border-color:var(--ink-3); outline:none}
.tx-champ.is-chg input, .tx-champ.is-chg textarea{
  border-color:var(--brand-2); background:color-mix(in srgb, var(--brand) 7%, var(--bg))}
.tx-cle{font-size:10.5px; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all}

.tx-pied{border-top:1px solid var(--line); padding-top:16px; margin-top:4px}
.tx-pied b{display:block; font-size:13px; color:var(--ink); margin-bottom:5px}
.tx-pied p{font-size:12.5px; color:var(--ink-3); line-height:1.65; margin:0}
.tx-pied code{font-size:11.5px; background:var(--surface); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px}

/* un chiffre et sa source, sur la page des chiffres */
.pg-src{display:grid; gap:10px; margin:4px 0 20px}
.pg-src > div{border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 17px; background:var(--surface)}
.pg-src b{display:block; font-family:var(--display); font-size:26px; line-height:1.05;
  color:var(--ink); letter-spacing:.005em}
.pg-src-l{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2);
  margin:4px 0 9px}
.pg-src p{font-size:13px; color:var(--ink-2); line-height:1.6; margin:0 0 7px}
.pg-src a{display:inline-block; font-size:12px; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:2px; word-break:break-all}
.pg-src a:hover{color:var(--ink)}
/* les mesures du groupe : même objet, mais on les distingue de celles qui
   portent la signature d'un tiers, pour qu'on ne les confonde jamais. */
.pg-src-nous > div{background:var(--bg); border-style:dashed}
.pg-src-nous > div::after{content:"Mesure du groupe"; display:inline-block;
  margin-top:9px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px}

/* les sites du groupe, sur la page du groupe */
.pg-sites{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px; margin:4px 0 20px}
.pg-sites a{position:relative; border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 15px; background:var(--surface); text-decoration:none; display:block}
/* la flèche « lien externe » est un <span> : sans ceci, la règle
   « .pg-sites span{display:block} » la jette sur une ligne à elle seule. */
.pg-sites a .ext-ico{position:absolute; inset-inline-end:12px; top:12px; display:block}
.pg-sites a:hover{border-color:var(--ink-3)}
.pg-sites b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:3px}
.pg-sites span{display:block; font-size:12px; color:var(--ink-2)}
.pg-sites em{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:5px}

/* les menus déroulants du panneau « Mon compte » */
.pn-det{margin-top:10px; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--surface)}
.pn-det summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:8px; padding:12px 14px;
  font-size:13.5px; font-weight:600; color:var(--ink)}
.pn-det summary::-webkit-details-marker{display:none}
.pn-chev{width:16px; height:16px; flex:none; transition:transform .2s var(--ease)}
.pn-det[open] .pn-chev{transform:rotate(180deg)}
.pn-liens{border-top:1px solid var(--line); padding:6px 6px 8px;
  display:flex; flex-direction:column}
.pn-liens a{padding:8px 10px; border-radius:var(--r-xs); font-size:13.5px;
  color:var(--ink-2); line-height:1.3}
.pn-liens a:hover{background:var(--bg); color:var(--ink)}
.pn-liens a small{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}

/* ====================== 15. ONGLETS MOBILES ============================= */
.tabbar{
  display:none; position:fixed; inset-inline:0; bottom:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + var(--safe-b));
}
.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; border-radius:var(--r-sm); color:var(--ink-3); font-size:10px; font-weight:500;
}
.tabbar button.on{color:var(--ink)}
.tabbar button svg{width:22px; height:22px}

/* ======================= 16. DIVERS ET ÉTATS ============================ */
.toasts{position:fixed; inset-inline:0; bottom:calc(24px + var(--safe-b)); z-index:300;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{
  padding:11px 18px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg);
  font-size:13.5px; font-weight:500; box-shadow:var(--shadow-2); animation:tin .3s var(--ease);
}
@keyframes tin{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.install{
  position:fixed; inset-inline:12px; bottom:calc(12px + var(--safe-b)); z-index:190;
  display:none; align-items:center; gap:12px; padding:12px 14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
}
.install.on{display:flex}
.install img{width:40px; height:40px; border-radius:10px}
.install .in-t{flex:1; min-width:0}
.install .in-t b{font-size:14px}
.install .in-t p{margin:2px 0 0; font-size:12px; color:var(--ink-2)}
.install .in-go{height:36px; padding:0 15px; border-radius:var(--r-pill); background:var(--brand); color:var(--brand-ink); font-size:13px; font-weight:600}
.install .in-x{width:30px; height:30px; border-radius:50%; color:var(--ink-3); display:grid; place-items:center}
.install .in-x svg{width:15px;height:15px}

/* Image absente : un aplat de marque, jamais un logo étiré. */
img.gone{visibility:hidden}
.asp-logo img.gone,.tr-look img.gone,.chip img.gone,.cta .ic img.gone,
.cap-thumb img.gone,.col-grid img.gone,.ad-bar img.gone,.stack .a.gone,
.plogo-img.gone{display:none}
.asp-cover.noimg{background:linear-gradient(120deg,#20242c,#3b4250 55%,#6f57c9)}
.asp-cover.noimg img{visibility:hidden}
/* initiales de secours derrière un logo de marque */
.asp-logo{position:relative}
.asp-logo .ini{position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; font-weight:700; color:var(--ink-2); background:var(--surface-2)}
.asp-logo img{position:relative; z-index:1}
.cta .ic{position:relative}
.cta .ic .ini{position:absolute; inset:0; display:grid; place-items:center;
  font-size:17px; font-weight:700; color:var(--ink-2)}
.cta .ic img{position:relative; z-index:1}
.stack .a{background:linear-gradient(140deg,var(--brand),var(--brand-2))}
.card.noimg,.showcase.noimg{background:linear-gradient(140deg,#2f6fd0,#6f57c9 42%,#e0568f 78%,#f4a6cb)}
.card.noimg > img{min-height:220px}

.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:sh 1.3s ease-in-out infinite; border-radius:var(--r-lg)}
@keyframes sh{0%{background-position:100% 50%} 100%{background-position:0 50%}}

.empty{padding:60px 20px; text-align:center; color:var(--ink-2)}
.empty b{display:block; font-size:17px; color:var(--ink); margin-bottom:6px}

.sources{display:flex; gap:7px; flex-wrap:wrap; padding:2px 2px 14px}
.src{
  height:26px; padding:0 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); color:var(--ink-3);
}
.src i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); display:inline-block}
.src.ok{color:var(--ink-2)} .src.ok i{background:var(--brand-2)}
.src.ko i{background:#ff4d5e}
.src.pending i{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}

/* signature de marque, jamais traduite ----------------------------------- */
.wtb-mark{font-family:var(--display); letter-spacing:.01em; font-size:inherit}

/* ========================= 17. RESPONSIVE =============================== */
@media (max-width:1180px){
  .welcome{grid-template-columns:1fr; gap:24px}
  .how{grid-template-columns:1fr}
  .starts{grid-template-columns:1fr}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr; gap:26px}
  .foot-trust{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--rail:0px; --topbar:64px}
  .rail{transform:translateX(-102%); width:246px; align-items:stretch; padding:18px 12px;
        box-shadow:var(--shadow-3)}
  .rail.on{transform:none}
  .rail-item{flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 14px}
  .rail-item.on::before{inset-inline-start:0}
  .ri-lab{font-size:14px}
  .rail-brand{flex-direction:row; gap:10px; justify-content:flex-start; padding:4px 10px 18px; text-align:start}
  .tb-burger{display:grid}
  .tb-cat,.tb-lang,.tb-user .who{display:none}
  .topbar{padding:0 14px; gap:10px}
  .wrap,.wrap-wide{width:calc(100% - 28px)}
  .tabbar{display:flex}
  .main{padding-bottom:78px}
  .hero-nav{padding:0 18px; gap:14px; height:70px}
  .hero-nav nav{display:none}
  .hero-in{padding:0 18px}
  .hero-steps{inset-inline:18px; bottom:92px; gap:18px}
  .hstep{max-width:none; flex:1 1 40%}
  .cs-grid{grid-template-columns:1fr}
  .asp-stats{margin-inline-start:0; width:100%; gap:18px; justify-content:space-between}
}
@media (max-width:640px){
  .hero{min-height:88vh; border-radius:0; margin-inline:calc(50% - 50vw); width:100vw; padding-top:78px}
  .hero-steps{display:none}
  .hero-plats{gap:14px}
  .hero-plats img{height:17px; max-width:110px}
  .hero-plats .sep{display:none}
  .foot-in{grid-template-columns:1fr 1fr; gap:22px 18px}
  .foot-trust{grid-template-columns:1fr}
  .pg-tete h1{font-size:28px}
  .cap-bar-in{flex-direction:column; align-items:stretch; gap:10px}
  .cap-feature{max-width:none}
  .sec{padding:24px 0}
}

/* accessibilité : on respecte le réglage système --------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* impression --------------------------------------------------------------- */
@media print{
  .rail,.topbar,.tabbar,.install,.capsule{display:none!important}
  .main{margin:0}
}

/* =========================================================================
   18. TENDANCES  (frame « Explorer / Tendances »)
   ========================================================================= */
.tr-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:6px 0 4px}
.tr-head h1{font-size:clamp(30px,4.2vw,48px); font-weight:800; letter-spacing:-.035em; line-height:1}
.tr-month{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2);
  font-size:13.5px; font-weight:500;
}
.tr-month svg{width:15px; height:15px}
.tr-sub{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:6px 0 18px}
.tr-sub p{margin:0; color:var(--ink-2); font-size:14.5px; flex:1; min-width:260px}

.genres{display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px}
.genres::-webkit-scrollbar{display:none}
.genre{
  flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px;
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2);
  font-size:13px; font-weight:500; transition:background .16s, color .16s;
}
.genre:hover{background:var(--surface-3); color:var(--ink)}
.genre.on{background:var(--ink); color:var(--bg)}
.genre svg{width:14px; height:14px}

.tr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tr-card{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg); display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s var(--ease);
}
.tr-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px)}
.tr-media{position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; cursor:pointer}
.tr-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.tr-card:hover .tr-media img{transform:scale(1.04)}
.tr-media.noimg{background:linear-gradient(140deg,#2f6fd0,#6f57c9 42%,#e0568f 78%,#f4a6cb)}
.tr-dur{
  position:absolute; top:12px; inset-inline-start:12px; height:26px; padding:0 10px;
  border-radius:8px; background:rgba(0,0,0,.66); color:#fff; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; backdrop-filter:blur(6px);
}
.tr-add{
  position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px;
  border-radius:9px; background:rgba(255,255,255,.22); color:#fff;
  border:1.5px solid rgba(255,255,255,.75); display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:background .16s;
}
.tr-add:hover{background:rgba(255,255,255,.4)}
.tr-add svg{width:15px; height:15px}
.tr-add.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.tr-play{
  position:absolute; inset-inline-start:14px; bottom:14px; width:42px; height:42px;
  border-radius:50%; background:rgba(255,255,255,.95); color:#101114;
  display:grid; place-items:center; box-shadow:var(--shadow-2);
  transition:transform .18s var(--ease);
}
.tr-card:hover .tr-play{transform:scale(1.08)}
.tr-play svg{width:17px; height:17px; margin-inline-start:2px}
.tr-body{padding:14px 16px 16px}
.tr-body b{display:block; font-size:16px; font-weight:700; letter-spacing:-.01em}
.tr-body .meta{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.tr-shop{display:flex; align-items:center; gap:8px; margin-top:14px}
.tr-looks{display:flex; gap:7px; flex:1; min-width:0; overflow:hidden}
.tr-look{
  flex:none; width:46px; height:46px; border-radius:11px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  transition:transform .16s var(--ease), border-color .16s;
}
.tr-look:hover{transform:translateY(-2px); border-color:var(--line-2)}
.tr-look img{width:100%; height:100%; object-fit:cover}
.tr-shopbtn{
  flex:none; height:44px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition:background .16s, border-color .16s;
}
.tr-shopbtn:hover{background:var(--surface); border-color:var(--line-2)}
.tr-shopbtn svg{width:14px; height:14px}

/* cartes communauté en bas de Tendances ---------------------------------- */
.ctas{display:grid; grid-template-columns:1.45fr 1fr; gap:16px; margin-top:22px}
.cta{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
}
.cta .ic{width:52px; height:52px; border-radius:14px; flex:none; overflow:hidden;
  display:grid; place-items:center; background:var(--surface-2)}
.cta .ic.green{background:var(--brand)}
.cta .ic img{width:100%; height:100%; object-fit:cover}
.cta .ic.green img{width:62%; height:62%; object-fit:contain}
.cta .tx{flex:1; min-width:0}
.cta .tx b{display:block; font-size:15.5px}
.cta .tx p{margin:3px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.stack{display:flex; align-items:center}
.stack .a{width:30px; height:30px; border-radius:50%; border:2px solid var(--bg);
  margin-inline-start:-9px; object-fit:cover; background:var(--surface-3)}
.stack .a:first-child{margin-inline-start:0}
.stack .n{margin-inline-start:8px; font-size:12.5px; font-weight:700; color:var(--ink-2)}

/* carte communauté du rail ------------------------------------------------ */
.rail-cta{
  /* sur la maquette elle est posee en bas du rail, pas collee au menu */
  margin:auto 6px 12px; padding:14px 12px; border-radius:var(--r-md);
  background:var(--surface); text-align:center;
}
.rail-cta b{display:block; font-size:13px; line-height:1.25; margin-bottom:6px}
.rail-cta p{margin:0 0 10px; font-size:11px; color:var(--ink-3); line-height:1.4}
.rail-cta .stack{justify-content:center; margin-bottom:10px}
.rail-cta .stack .a{width:26px; height:26px}
.rail-cta .join{
  width:100%; height:34px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg);
  font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.rail-cta .join svg{width:13px; height:13px}

/* =========================================================================
   19. PAGE DE MARQUE - version complète du Figma
   ========================================================================= */
.asp-cover .co-logo{position:absolute; inset-inline-start:26px; top:50%; translate:0 -50%; width:44px; opacity:.95}
.asp-cover .co-kick{
  position:absolute; inset-inline-end:26px; top:20px; text-align:end; color:rgba(255,255,255,.8);
  font-size:9px; font-weight:600; letter-spacing:.22em; line-height:1.7; text-transform:uppercase;
}
.asp-cover .co-claim{
  position:absolute; inset-inline-end:26px; bottom:34px; color:rgba(255,255,255,.92);
  font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; text-align:end;
}

.asp-wrap{position:relative; padding-inline:8px}
.asp-logo{
  width:112px; height:112px; border-radius:50%; flex:none; background:var(--bg);
  border:4px solid var(--bg); display:grid; place-items:center; overflow:hidden;
  box-shadow:var(--shadow-2); margin-top:-58px; align-self:flex-start;
}
.asp-logo img{width:78%; height:78%; object-fit:contain}
.asp-id h3{font-size:24px}
.asp-id h3 .vf{width:19px; height:19px; color:#e8342f}
.asp-tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.asp-tag{height:26px; padding:0 11px; border-radius:var(--r-pill); background:var(--surface-2);
  color:var(--ink-2); font-size:11.5px; font-weight:500; display:inline-flex; align-items:center}
.asp-stats{gap:0}
.asp-stats div{padding:0 22px; border-inline-start:1px solid var(--line); text-align:start}
.asp-stats div:first-child{border-inline-start:0; padding-inline-start:0}
.asp-stats b{font-size:17px}
.asp-viewtog{display:flex; gap:4px}
.asp-viewtog button{width:34px; height:34px; border-radius:9px; color:var(--ink-3); display:grid; place-items:center}
.asp-viewtog button.on{background:var(--surface-2); color:var(--ink)}
.asp-viewtog svg{width:17px; height:17px}

/* =========================================================================
   20. FORMATS PUBLICITAIRES
   ========================================================================= */
.fmt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px; align-items:start}
.fmt-grid .fmt:nth-child(3),.fmt-grid .fmt:nth-child(5){grid-column:span 2}
@media (max-width:900px){.fmt-grid .fmt:nth-child(3),.fmt-grid .fmt:nth-child(5){grid-column:span 1}}
.fmt{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg)}
.fmt-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.fmt-head > svg{width:19px; height:19px; flex:none; color:var(--ink-2)}
.fmt-head b{font-size:14.5px; flex:1; white-space:nowrap}
.fmt-head .sz{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; flex:none}
.fmt-stage{padding:18px; background:var(--surface); display:grid; place-items:center}
.fmt-foot{padding:12px 16px; font-size:12.5px; color:var(--ink-2); line-height:1.5}

/* le cadre de chaque format, aux bonnes proportions */
.ad{position:relative; overflow:hidden; border-radius:var(--r-md); background:#131a2c;
  box-shadow:var(--shadow-1); cursor:pointer; width:100%; isolation:isolate}
.ad > img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:-1}
.ad.f-short,.ad.f-capsule{aspect-ratio:9/16; max-width:216px; margin-inline:auto}
.ad.f-mobile{aspect-ratio:320/480; max-width:236px; margin-inline:auto}
.ad.f-sesync{aspect-ratio:16/9}
.ad.f-billboard{aspect-ratio:970/250; min-height:130px}
.ad-veil{position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.78),transparent 58%)}
.ad-badge{
  position:absolute; top:10px; inset-inline-start:10px; height:22px; padding:0 9px;
  border-radius:var(--r-pill); background:var(--brand); color:var(--brand-ink);
  font-size:9px; font-weight:700; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:5px; z-index:2;
}
.ad-badge svg{width:10px; height:10px; flex:none}
.ad-copy{position:absolute; inset-inline:12px; bottom:62px; color:#fff; z-index:2}
.ad-copy b{display:block; font-size:14px; font-weight:700; line-height:1.2}
.ad-copy span{display:block; font-size:11px; opacity:.82; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ad-bar{
  position:absolute; inset-inline:10px; bottom:10px; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:7px; border-radius:12px; background:rgba(22,22,24,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fff;
}
.ad-bar img{position:static; width:30px; height:30px; border-radius:8px; flex:none; object-fit:cover}
.ad-bar .t{flex:1; min-width:0}
.ad-bar .t b{display:block; font-size:10px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ad-bar .t span{font-size:9.5px; opacity:.72}
.ad-bar .go{flex:none; height:23px; padding:0 9px; border-radius:var(--r-pill);
  background:#fff; color:#101114; font-size:9px; font-weight:700;
  display:inline-flex; align-items:center}

/* formats larges : le texte à gauche, la vitrine à droite */
.ad.f-sesync .ad-copy,.ad.f-billboard .ad-copy{
  inset-inline-start:18px; inset-inline-end:auto; bottom:auto; top:50%; translate:0 -50%; max-width:46%;
}
.ad.f-sesync .ad-bar,.ad.f-billboard .ad-bar{
  inset-inline-start:auto; inset-inline-end:14px; bottom:auto; top:50%; translate:0 -50%; width:236px;
}

/* =========================================================================
   21. MESSAGERIE
   ========================================================================= */
.msg{display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; min-height:min(640px,72vh)}
.msg-list{border-inline-end:1px solid var(--line); overflow-y:auto; background:var(--bg)}
.msg-search{padding:12px; border-bottom:1px solid var(--line)}
.msg-search input{width:100%; height:40px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); outline:none; font-size:14px}
.msg-item{display:flex; align-items:center; gap:11px; width:100%; padding:12px 14px;
  text-align:start; border-bottom:1px solid var(--line); transition:background .14s}
.msg-item:hover{background:var(--surface)}
.msg-item.on{background:var(--surface-2)}
.msg-item .t{flex:1; min-width:0}
.msg-item .t b{display:block; font-size:13.5px}
.msg-item .t span{font-size:12px; color:var(--ink-3); display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.msg-item .w{font-size:10.5px; color:var(--ink-3); flex:none}
.msg-pane{display:flex; flex-direction:column; background:var(--surface)}
.msg-top{display:flex; align-items:center; gap:11px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--bg)}
.msg-top b{font-size:14.5px}
.msg-top [data-msg-back]{display:none}
@media (max-width:900px){.msg-top [data-msg-back]{display:grid}}
.msg-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px}
.bub{max-width:74%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5}
.bub.them{align-self:flex-start; background:var(--bg); border:1px solid var(--line); border-end-start-radius:5px}
.bub.me{align-self:flex-end; background:var(--ink); color:var(--bg); border-end-end-radius:5px}
.bub .pc{display:flex; gap:9px; align-items:center; margin-top:8px; padding-top:8px;
  border-top:1px solid var(--line)}
.bub .pc img{width:38px; height:38px; border-radius:9px; object-fit:cover}
.msg-form{display:flex; gap:9px; padding:14px 18px; border-top:1px solid var(--line); background:var(--bg)}
.msg-form input{flex:1; height:44px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); outline:none}

/* =========================================================================
   22. ACTIVITÉ ET COLLECTIONS
   ========================================================================= */
.act{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line)}
.act .ic{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-2)}
.act .ic svg{width:17px; height:17px}
.act .t{flex:1; min-width:0}
.act .t b{font-size:14px}
.act .t .sub{font-size:12.5px; color:var(--ink-2)}
.act .w{font-size:11.5px; color:var(--ink-3); flex:none}
.act img.th{width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none}

.cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.col{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg)}
.col-grid{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:2px; aspect-ratio:3/2}
.col-grid img{width:100%; height:100%; object-fit:cover; background:var(--surface-2)}
.col-grid img:first-child{grid-row:1/3}
.col b{display:block; padding:12px 14px 4px; font-size:14.5px}
.col span{display:block; padding:0 14px 14px; font-size:12px; color:var(--ink-3)}

/* =========================================================================
   23. CORRECTIFS
   ========================================================================= */
/* Une image absente ne doit jamais faire disparaître sa carte. */
.card.noimg{min-height:230px}
.card.noimg > img{min-height:230px; width:100%}
.tr-media.noimg img{visibility:hidden}

@media (max-width:1180px){
  .tr-grid{grid-template-columns:repeat(2,1fr)}
  .ctas{grid-template-columns:1fr}
}
@media (max-width:900px){
  .tr-grid{grid-template-columns:1fr}
  .msg{grid-template-columns:1fr}
  .msg-list{display:none}
  .msg.list-open .msg-list{display:block}
  .msg.list-open .msg-pane{display:none}
  .asp-logo{width:84px; height:84px; margin-top:-36px}
  .asp-cover h2{inset-inline-start:22px}
  .asp-cover h2{max-width:70%}
  .asp-cover .co-kick{display:none}
  .asp-stats div{padding:0 14px}
}

/* =========================================================================
   24. SKOLEOM SeSync - le parcours d'achat DANS le contenu
   Reprise de skoleom-sesync-demo : panneau sombre, vert acide, zéro sortie.
   ========================================================================= */
.sy{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(4,6,10,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sy.on{display:flex; animation:viewIn .24s var(--ease)}
.sy *{box-sizing:border-box}
.sy-wrap{
  display:flex; gap:12px; width:min(1440px,100%); max-height:94vh; align-items:stretch;
}
.sy-main{
  flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:#0e1013; color:#fff; border:1px solid rgba(255,255,255,.1);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* en-tête ---------------------------------------------------------------- */
.sy-head{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sy-head .lg{width:30px; height:30px; border-radius:9px; background:var(--brand);
  display:grid; place-items:center; flex:none}
.sy-head .lg img{width:64%; height:64%; object-fit:contain}
.sy-head .id{flex:1; min-width:0}
.sy-head .id b{display:block; font-size:13.5px; font-weight:600}
.sy-head .id span{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); display:flex; align-items:center; gap:6px}
.sy-head .id span i{width:6px; height:6px; border-radius:50%; background:var(--brand);
  display:inline-block; animation:blink 1.6s infinite}
.sy-x{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  color:#fff; display:grid; place-items:center; flex:none}
.sy-x:hover{background:rgba(255,255,255,.16)}
.sy-x svg{width:17px; height:17px}

/* les trois modes : produits, loisirs, service --------------------------- */
.sy-modes{flex:0 0 auto; display:flex; gap:10px; padding:14px 18px 4px; overflow-x:auto; scrollbar-width:none}
.sy-modes::-webkit-scrollbar{display:none}
.sy-mode{
  flex:1; min-width:210px; display:flex; align-items:center; gap:11px; padding:11px 14px;
  border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.62); text-align:start; transition:.16s;
}
.sy-mode:hover{background:rgba(255,255,255,.07)}
.sy-mode.on{border-color:var(--brand); background:rgba(185,242,39,.1); color:#fff}
.sy-mode .ic{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.08)}
.sy-mode.on .ic{background:var(--brand); color:var(--brand-ink)}
.sy-mode .ic svg{width:17px; height:17px}
.sy-mode .tx{flex:1; min-width:0}
.sy-mode .tx b{display:block; font-size:13.5px; font-weight:600; color:#fff}
.sy-mode .tx span{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.sy-mode .ct{font-size:13px; font-weight:700; color:var(--brand)}

/* corps : visuel, fiche, colonne info ----------------------------------- */
.sy-body{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 18px 18px;
  display:grid; grid-template-columns:300px minmax(0,1fr) 330px; gap:18px; align-content:start}
.sy-shot{position:relative; border-radius:16px; overflow:hidden; background:#fff; aspect-ratio:3/4;
  max-height:46vh}
.sy-shot img{width:100%; height:100%; object-fit:cover}
.sy-vision{
  position:absolute; top:10px; inset-inline-start:10px; height:26px; padding:0 11px;
  border-radius:var(--r-pill); background:rgba(14,16,19,.86); color:var(--brand);
  font-size:9.5px; font-weight:700; letter-spacing:.07em;
  display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(8px);
}
.sy-vision svg{width:11px; height:11px}
.sy-ref{position:absolute; bottom:10px; inset-inline-start:10px; height:22px; padding:0 9px;
  border-radius:7px; background:rgba(14,16,19,.8); color:rgba(255,255,255,.75);
  font-size:9.5px; letter-spacing:.06em; display:inline-flex; align-items:center}
.sy-strip{display:flex; gap:7px; margin-top:9px; overflow-x:auto; scrollbar-width:none}
.sy-strip::-webkit-scrollbar{display:none}
.sy-strip button{flex:none; width:52px; height:52px; border-radius:11px; overflow:hidden;
  border:2px solid transparent; background:rgba(255,255,255,.07)}
.sy-strip button.on{border-color:var(--brand)}
.sy-strip img{width:100%; height:100%; object-fit:cover}

.sy-kicker{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  display:flex; align-items:center; gap:7px}
.sy-kicker svg{width:12px; height:12px}
.sy-title{font-size:21px; font-weight:700; margin:7px 0 3px; line-height:1.2}
.sy-sub{font-size:12.5px; color:rgba(255,255,255,.55)}
.sy-price{display:flex; align-items:baseline; gap:10px; margin:14px 0 12px}
.sy-price b{font-size:33px; font-weight:800; letter-spacing:-.02em}
.sy-price s{font-size:15px; color:rgba(255,255,255,.4)}
.sy-price .off{height:22px; padding:0 8px; border-radius:6px; background:rgba(185,242,39,.16);
  color:var(--brand); font-size:11px; font-weight:700; display:inline-flex; align-items:center}
.sy-facts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.sy-fact{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,.05); font-size:11.5px; color:rgba(255,255,255,.72)}
.sy-fact svg{width:14px; height:14px; color:var(--brand); flex:none}
.sy-fact b{color:#fff; font-weight:600}
.sy-lab{font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:8px}
.sy-swatch{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); margin-bottom:14px}
.sy-swatch .dot{width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25); flex:none}
.sy-swatch b{font-size:13px}
.sy-swatch span{font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.sy-sizes{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px}
.sy-size{min-width:50px; height:40px; padding:0 12px; border-radius:11px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); display:grid; place-items:center}
.sy-size:hover{background:rgba(255,255,255,.12)}
.sy-size.on{background:var(--brand); color:var(--brand-ink)}
.sy-try{width:100%; height:48px; border-radius:13px; background:rgba(255,255,255,.06);
  color:#fff; font-size:13.5px; font-weight:600; display:flex; align-items:center;
  justify-content:center; gap:9px; margin-bottom:12px}
.sy-try:hover{background:rgba(255,255,255,.11)}
.sy-try svg{width:16px; height:16px}
.sy-try b{color:var(--brand)}
.sy-buyrow{display:flex; gap:9px}
.sy-buy{
  flex:1; height:52px; border-radius:14px; font-size:15px; font-weight:700;
  background:linear-gradient(100deg,var(--brand),#8fe01a); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 8px 24px rgba(185,242,39,.22); transition:transform .14s var(--ease);
}
.sy-buy:hover{transform:translateY(-1px)}
.sy-buy svg{width:18px; height:18px}
.sy-icon{width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.06);
  color:#fff; display:grid; place-items:center; flex:none}
.sy-icon:hover{background:rgba(255,255,255,.12)}
.sy-icon.on{background:rgba(185,242,39,.16); color:var(--brand)}
.sy-icon svg{width:18px; height:18px}

/* colonne de droite : info, magazine, reconnaissance -------------------- */
.sy-tabs{display:flex; gap:7px; margin-bottom:12px}
.sy-tab{flex:1; height:40px; border-radius:11px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.65);
  display:flex; align-items:center; justify-content:center; gap:7px}
.sy-tab.on{background:rgba(185,242,39,.12); color:var(--brand); border:1px solid rgba(185,242,39,.35)}
.sy-tab svg{width:14px; height:14px}
.sy-card{border-radius:14px; overflow:hidden; background:rgba(255,255,255,.05); margin-bottom:12px}
.sy-card img{width:100%; aspect-ratio:16/9; object-fit:cover}
.sy-card .bd{padding:12px 13px}
.sy-card .tag{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  display:flex; align-items:center; gap:6px; margin-bottom:6px}
.sy-card .tag svg{width:11px; height:11px}
.sy-card b{display:block; font-size:13px; line-height:1.3; margin-bottom:5px}
.sy-card p{margin:0; font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.6)}
.sy-vid{position:relative}
.sy-vid .pl{position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#101114; display:grid; place-items:center}
.sy-vid .pl svg{width:19px; height:19px; margin-inline-start:2px}
.sy-reco{border-radius:14px; background:rgba(255,255,255,.05); padding:13px}
.sy-reco .h{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:10px}
.sy-bar{margin-bottom:11px}
.sy-bar .t{display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:5px}
.sy-bar .t b{color:var(--brand); font-weight:700}
.sy-bar .r{height:4px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden}
.sy-bar .r i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--brand),#8fe01a)}

/* bandeau d'état --------------------------------------------------------- */
.sy-live{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:11px 18px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; color:rgba(255,255,255,.62)}
.sy-live .k{display:inline-flex; align-items:center; gap:6px; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand)}
.sy-live .k i{width:6px; height:6px; border-radius:50%; background:var(--brand);
  display:inline-block; animation:blink 1.6s infinite}
.sy-live .sy-txt{flex:1 1 auto; min-width:180px}
.sy-live .sy-txt b{color:#fff}
.sy-live .pat{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4)}

/* panneau Skoleom Pay ---------------------------------------------------- */
.sy-pay{
  width:330px; flex:none; display:flex; flex-direction:column; overflow:hidden;
  background:#0e1013; color:#fff; border:1px solid rgba(255,255,255,.1);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.sy-pay-head{display:flex; align-items:center; gap:9px; padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sy-pay-head b{font-size:15px; font-weight:700; flex:1}
.sy-pay-head .pay{font-size:15px; font-weight:800; color:#2a7bff; letter-spacing:-.02em}
.sy-pay-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 16px}
.sy-line{display:flex; align-items:center; gap:11px; padding:10px; border-radius:13px;
  background:rgba(255,255,255,.05); margin-bottom:9px}
.sy-line img{width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; background:#fff}
.sy-line .t{flex:1; min-width:0}
.sy-line .t b{display:block; font-size:12.5px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sy-line .t span{font-size:10.5px; color:rgba(255,255,255,.5)}
.sy-line .t .pr{font-size:13px; font-weight:700; color:var(--brand); margin-top:2px}
.sy-line .rm{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.6); display:grid; place-items:center; flex:none}
.sy-line .rm svg{width:13px; height:13px}
.sy-tot{border-radius:13px; background:rgba(255,255,255,.05); padding:13px; margin:12px 0}
.sy-tot .r{display:flex; justify-content:space-between; font-size:12.5px;
  color:rgba(255,255,255,.65); margin-bottom:7px}
.sy-tot .r:last-child{margin-bottom:0; padding-top:9px; border-top:1px solid rgba(255,255,255,.1);
  font-size:17px; font-weight:800; color:#fff}
.sy-tot .r.free{color:var(--brand)}
.sy-cta{
  width:100%; height:54px; border-radius:15px; font-size:14.5px; font-weight:700;
  background:linear-gradient(100deg,var(--brand),#8fe01a); color:var(--brand-ink);
  box-shadow:0 8px 26px rgba(185,242,39,.24);
}
.sy-note{font-size:10.5px; color:rgba(255,255,255,.4); text-align:center; margin-top:10px; line-height:1.5}
.sy-pay-tabs{display:flex; border-top:1px solid rgba(255,255,255,.08)}
.sy-pay-tabs button{flex:1; padding:11px 2px; display:flex; flex-direction:column;
  align-items:center; gap:4px; font-size:9.5px; color:rgba(255,255,255,.45)}
.sy-pay-tabs button.on{color:var(--brand)}
.sy-pay-tabs svg{width:17px; height:17px}

/* tunnel : adresse, livraison, paiement, confirmation ------------------- */
.sy-steps{display:flex; gap:6px; margin-bottom:14px}
.sy-step{flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.12)}
.sy-step.on{background:var(--brand)}
.sy-form{display:grid; gap:9px}
.sy-form input,.sy-form select{
  width:100%; height:44px; padding:0 13px; border-radius:11px; font-size:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; outline:none;
}
.sy-form input:focus{border-color:var(--brand)}
.sy-form input::placeholder{color:rgba(255,255,255,.35)}
.sy-form .two{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.sy-opt{display:flex; align-items:center; gap:11px; padding:12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid transparent; cursor:pointer}
.sy-opt.on{border-color:var(--brand); background:rgba(185,242,39,.08)}
.sy-opt .t{flex:1}
.sy-opt .t b{display:block; font-size:13px}
.sy-opt .t span{font-size:11px; color:rgba(255,255,255,.55)}
.sy-opt .p{font-size:13px; font-weight:700}
.sy-ok{text-align:center; padding:22px 8px}
.sy-ok .ic{width:68px; height:68px; border-radius:50%; margin:0 auto 16px;
  background:rgba(185,242,39,.14); color:var(--brand); display:grid; place-items:center}
.sy-ok .ic svg{width:32px; height:32px}
.sy-ok b{display:block; font-size:19px; margin-bottom:7px}
.sy-ok p{margin:0 0 4px; font-size:12.5px; color:rgba(255,255,255,.6); line-height:1.6}
.sy-ok .ref{font-size:11px; color:var(--brand); letter-spacing:.06em; margin-top:10px}

@media (max-width:1180px){
  .sy-body{grid-template-columns:240px minmax(0,1fr)}
  .sy-col3{display:none}
  .sy-pay{width:290px}
}
@media (max-width:900px){
  .sy{padding:0}
  .sy-wrap{flex-direction:column; max-height:100vh}
  .sy-main{border-radius:0; border:0}
  .sy-body{grid-template-columns:1fr; padding-bottom:12px}
  .sy-shot{aspect-ratio:1; max-height:38vh}
  .sy-pay{width:auto; border-radius:18px 18px 0 0; max-height:46vh}
  .sy-modes{padding-inline:12px}
  .sy-mode{min-width:170px}
}

/* =========================================================================
   25. PAGE DE MARQUE - modèle unique, automatique, avec vidéo en tête
   ========================================================================= */
.bp{
  display:grid; grid-template-columns:minmax(320px,38%) 1fr; gap:0;
  background:var(--bg); border:1px solid var(--line); border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow-1); margin-top:14px;
}
.bp-id{padding:30px 32px}
.bp-logo{
  width:150px; height:150px; border-radius:50%; background:var(--bg);
  border:1px solid var(--line); display:grid; place-items:center; overflow:hidden;
  margin-bottom:22px; position:relative;
}
.bp-logo img{width:76%; height:76%; object-fit:contain}
.bp-logo .ini{position:absolute; inset:0; display:grid; place-items:center;
  font-size:38px; font-weight:800; color:var(--ink-3)}
.bp-logo img{position:relative; z-index:1}
.bp-id h1{display:flex; align-items:center; gap:10px;
  font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1}
.bp-id h1 .vf{width:24px; height:24px; color:#1d9bf0; flex:none}
.bp-sub{font-size:14px; color:var(--ink-2); margin-top:8px}
.bp-stats{display:flex; margin:20px 0 18px}
.bp-stats div{padding-inline:22px; border-inline-start:1px solid var(--line)}
.bp-stats div:first-child{padding-inline-start:0; border-inline-start:0}
.bp-stats b{display:block; font-size:19px; font-weight:700; letter-spacing:-.02em}
.bp-stats span{font-size:12.5px; color:var(--ink-2)}
.bp-about{font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 18px; max-width:440px}
.bp-links{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:22px}
.bp-links a{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2)}
.bp-links a:hover{color:var(--ink)}
.bp-links svg{width:16px; height:16px}
.bp-act{display:flex; align-items:center; gap:10px}
.bp-follow{height:48px; padding:0 34px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--bg); font-size:15px; font-weight:600}
.bp-follow.on{background:var(--surface-2); color:var(--ink)}
.bp-more{width:44px; height:44px; border-radius:50%; background:var(--surface-2);
  color:var(--ink-2); display:grid; place-items:center}
.bp-more svg{width:18px; height:18px}

/* la vidéo : toujours présente, quelle que soit la marque */
.bp-video{position:relative; background:#000; min-height:330px}
.bp-video iframe,.bp-video video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
.bp-video .ph{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(140deg,#20242c,#3b4250 55%,#6f57c9)}
.bp-video .ph img{width:100%; height:100%; object-fit:cover; opacity:.8}
.bp-video .src{
  position:absolute; top:12px; inset-inline-end:12px; z-index:3; height:26px; padding:0 11px;
  border-radius:var(--r-pill); background:rgba(0,0,0,.58); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(8px);
}
.bp-video .src svg{width:12px; height:12px; color:var(--brand)}
.bp-video .wait{position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  font-size:12.5px; letter-spacing:.04em}

/* onglets --------------------------------------------------------------- */
.bp-tabs{display:flex; align-items:center; gap:34px; padding:22px 4px 0; position:relative}
.bp-tabs .tabs{display:flex; gap:34px; margin-inline:auto}
.bp-tab{position:relative; padding:8px 0 12px; font-size:15px; font-weight:500; color:var(--ink-2)}
.bp-tab:hover{color:var(--ink)}
.bp-tab.on{color:var(--ink); font-weight:600}
.bp-tab.on::after{content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--ink); border-radius:2px}
.bp-sort{display:flex; align-items:center; gap:8px; position:absolute; inset-inline-end:4px; top:20px}

/* cartes de la grille --------------------------------------------------- */
.bv{position:relative; border-radius:16px; overflow:hidden; background:var(--surface-2);
  cursor:pointer; display:block; width:100%}
.bv > img{width:100%; display:block; transition:transform .5s var(--ease)}
.bv:hover > img{transform:scale(1.04)}
.bv .sh{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent 46%)}
.bv .dur{position:absolute; top:11px; inset-inline-start:11px; height:24px; padding:0 9px;
  border-radius:7px; background:rgba(0,0,0,.66); color:#fff; font-size:11.5px; font-weight:600;
  display:inline-flex; align-items:center; backdrop-filter:blur(6px)}
.bv .pl{position:absolute; inset-inline-end:11px; bottom:11px; width:36px; height:36px;
  border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(8px); transition:transform .16s var(--ease)}
.bv:hover .pl{transform:scale(1.1); background:#fff; color:#101114}
.bv .pl svg{width:15px; height:15px; margin-inline-start:2px}
.bv .cp{position:absolute; inset-inline-start:13px; bottom:14px; color:#fff; max-width:74%}
.bv .cp b{display:block; font-size:14px; font-weight:600; line-height:1.25}
.bv .cp span{font-size:12px; opacity:.82}
.bv .fav{position:absolute; top:11px; inset-inline-end:11px; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,.94); color:#101114;
  display:grid; place-items:center; opacity:0; transition:.18s}
.bv:hover .fav,.bv .fav.on{opacity:1}
.bv .fav.on{background:var(--ink); color:var(--bg)}
.bv .fav svg{width:15px; height:15px}

/* carte produit, fond clair comme dans le Figma -------------------------- */
.bpr{position:relative; border-radius:16px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); display:block; width:100%; text-align:start; cursor:pointer}
.bpr .ph{position:relative; aspect-ratio:1; background:var(--surface-2)}
.bpr .ph img{width:100%; height:100%; object-fit:contain; padding:10%;
  transition:transform .4s var(--ease); mix-blend-mode:multiply}
:root[data-theme="dark"] .bpr .ph img{mix-blend-mode:normal}
.bpr:hover .ph img{transform:scale(1.05)}
.bpr .new{position:absolute; top:11px; inset-inline-start:11px; height:26px; padding:0 11px;
  border-radius:var(--r-pill); background:var(--bg); color:var(--ink);
  font-size:11.5px; font-weight:600; display:inline-flex; align-items:center;
  box-shadow:var(--shadow-1)}
.bpr .fav{position:absolute; top:11px; inset-inline-end:11px; width:32px; height:32px;
  border-radius:50%; background:var(--bg); color:var(--ink); display:grid; place-items:center;
  box-shadow:var(--shadow-1)}
.bpr .fav svg{width:15px; height:15px}
.bpr .fav.on{background:var(--ink); color:var(--bg)}
.bpr .bd{padding:13px 14px 15px; position:relative}
.bpr .br{font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase}
.bpr .nm{font-size:15px; font-weight:600; margin-top:1px; line-height:1.25}
.bpr .ct{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.bpr .pz{font-size:16px; font-weight:700; margin-top:9px}
.bpr .add{position:absolute; inset-inline-end:14px; bottom:14px; width:38px; height:38px;
  border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center;
  transition:transform .16s var(--ease)}
.bpr .add:hover{transform:scale(1.08)}
.bpr .add svg{width:18px; height:18px}

/* bandeau d'état des sources ------------------------------------------- */
.bp-live{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 4px 0;
  font-size:11.5px; color:var(--ink-3)}

@media (max-width:1100px){
  .bp{grid-template-columns:minmax(0,1fr)}
  .bp-video{min-height:260px; order:-1; aspect-ratio:16/9}
  .bp-logo{width:104px; height:104px; margin-bottom:16px}
  .bp-id{padding:22px}
  .bp-tabs .tabs{margin-inline:0; overflow-x:auto; scrollbar-width:none}
  .bp-sort{display:none}
}

/* image absente dans la page de marque : aplat, jamais de texte nu */
.bpr .ph.noimg{background:linear-gradient(140deg,var(--surface-2),var(--surface-3))}
.bv.noimg{background:linear-gradient(140deg,#2f6fd0,#6f57c9 42%,#e0568f 78%,#f4a6cb); min-height:230px}
.bv.noimg > img{min-height:230px; width:100%}

/* =========================================================================
   26. GRILLE DE MARQUE - toutes les vignettes à la même hauteur
   ========================================================================= */
.bp-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px; margin-top:18px; align-items:start;
}
.bp-grid > .bv,.bp-grid > .bpr{height:100%}
/* la vidéo et la photo : toujours 16/9, jamais de hauteur qui saute */
.bp-grid .bv{aspect-ratio:16/9; border-radius:16px}
.bp-grid .bv > img{width:100%; height:100%; object-fit:cover}
.bp-grid .bv .cp b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.bp-grid .bv .cp span{text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* le produit : carré + fiche, hauteur constante */
.bp-grid .bpr{display:flex; flex-direction:column}
.bp-grid .bpr .bd{flex:1; display:flex; flex-direction:column}
.bp-grid .bpr .nm{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bp-grid .bpr .ct{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.bp-grid .bpr .pz{margin-top:auto; padding-top:9px}

/* vue liste */
.bp-grid.as-list{grid-template-columns:1fr; gap:10px}
.bp-grid.as-list .bv{aspect-ratio:auto; height:104px; display:flex}
.bp-grid.as-list .bv > img{width:184px; height:104px; flex:none}
.bp-grid.as-list .bv .sh{background:none}
.bp-grid.as-list .bv .cp{position:static; color:var(--ink); padding:14px 16px; max-width:none;
  align-self:center}
.bp-grid.as-list .bv .cp b,.bp-grid.as-list .bv .cp span{text-shadow:none}
.bp-grid.as-list .bv{background:var(--surface); border:1px solid var(--line)}
.bp-grid.as-list .bv .pl{inset-inline-end:14px; bottom:auto; top:50%; translate:0 -50%}
.bp-grid.as-list .bpr{flex-direction:row; height:104px}
.bp-grid.as-list .bpr .ph{width:104px; aspect-ratio:auto; flex:none}
.bp-grid.as-list .bpr .new,.bp-grid.as-list .bpr .fav{display:none}

@media (max-width:640px){
  .bp-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
}

/* =========================================================================
   27. SeSync EN CLAIR - le parcours d'achat suit le thème de l'app
   Le fond noir ne collait pas au design blanc : on repasse sur les jetons.
   ========================================================================= */
.sy{background:rgba(16,17,20,.42)}
.sy-main,.sy-pay{background:var(--bg); color:var(--ink); border-color:var(--line)}
.sy-head,.sy-pay-head,.sy-live,.sy-pay-tabs{border-color:var(--line)}
.sy-x{background:var(--surface-2); color:var(--ink-2)}
.sy-x:hover{background:var(--surface-3)}
.sy-head .id span{color:var(--brand-2)}
.sy-head .id span i{background:var(--brand-2)}
.sy-mode{background:var(--surface); border-color:var(--line); color:var(--ink-2)}
.sy-mode:hover{background:var(--surface-2)}
.sy-mode.on{border-color:var(--ink); background:var(--surface-2); color:var(--ink)}
.sy-mode .ic{background:var(--surface-2); color:var(--ink-2)}
.sy-mode.on .ic{background:var(--ink); color:var(--bg)}
.sy-mode .tx b{color:var(--ink)}
.sy-mode .tx span{color:var(--ink-3)}
.sy-mode .ct{color:var(--ink)}
.sy-shot{background:var(--surface); border:1px solid var(--line)}
.sy-vision{background:rgba(255,255,255,.94); color:#101114; box-shadow:var(--shadow-1)}
.sy-ref{background:rgba(255,255,255,.9); color:#5b5f68}
.sy-strip button{background:var(--surface-2)}
.sy-strip button.on{border-color:var(--ink)}
.sy-kicker{color:var(--ink-3)}
.sy-kicker svg{color:var(--brand-2)}
.sy-sub{color:var(--ink-2)}
.sy-price s{color:var(--ink-3)}
.sy-price .off{background:var(--surface-2); color:var(--ink)}
.sy-fact{background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.sy-fact svg{color:var(--ink-2)}
.sy-fact b{color:var(--ink)}
.sy-lab{color:var(--ink-3)}
.sy-swatch{background:var(--surface); border:1px solid var(--line)}
.sy-swatch .dot{border-color:var(--line-2)}
.sy-swatch span{color:var(--ink-3)}
.sy-size{background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.sy-size:hover{background:var(--surface-2)}
.sy-size.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.sy-try{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.sy-try:hover{background:var(--surface-2)}
.sy-try b{color:var(--ink)}
.sy-buy,.sy-cta{background:var(--ink); color:var(--bg); box-shadow:none}
.sy-buy:hover,.sy-cta:hover{box-shadow:var(--shadow-2)}
.sy-icon{background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.sy-icon:hover{background:var(--surface-2)}
.sy-icon.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.sy-tab{background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.sy-tab.on{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.sy-card{background:var(--surface); border:1px solid var(--line)}
.sy-card .tag{color:var(--ink-3)}
.sy-card p{color:var(--ink-2)}
.sy-vid .pl{background:rgba(255,255,255,.94); color:#101114}
.sy-reco{background:var(--surface); border:1px solid var(--line)}
.sy-reco .h{color:var(--ink-3)}
.sy-bar .t b{color:var(--ink)}
.sy-bar .r{background:var(--surface-3)}
.sy-bar .r i{background:var(--ink)}
.sy-live{color:var(--ink-2)}
.sy-live .k{color:var(--ink-3)}
.sy-live .k i{background:var(--brand-2)}
.sy-live .sy-txt b{color:var(--ink)}
.sy-live .pat{color:var(--ink-3)}
.sy-pay-head .pay{color:#1d63d6}
.sy-line{background:var(--surface); border:1px solid var(--line)}
.sy-line .t span{color:var(--ink-3)}
.sy-line .t .pr{color:var(--ink)}
.sy-line .rm{background:var(--surface-2); color:var(--ink-2)}
.sy-tot{background:var(--surface); border:1px solid var(--line)}
.sy-tot .r{color:var(--ink-2)}
.sy-tot .r:last-child{color:var(--ink); border-color:var(--line)}
.sy-tot .r.free{color:var(--ink-2)}
.sy-tot .r.free span:last-child{color:#2f8f1e; font-weight:600}
.sy-note{color:var(--ink-3)}
.sy-pay-tabs button{color:var(--ink-3)}
.sy-pay-tabs button.on{color:var(--ink)}
.sy-step{background:var(--surface-3)}
.sy-step.on{background:var(--ink)}
.sy-form input,.sy-form select{background:var(--surface); border-color:var(--line); color:var(--ink)}
.sy-form input:focus{border-color:var(--ink)}
.sy-form input::placeholder{color:var(--ink-3)}
.sy-opt{background:var(--surface); border-color:var(--line)}
.sy-opt.on{border-color:var(--ink); background:var(--surface-2)}
.sy-opt .t span{color:var(--ink-2)}
.sy-ok .ic{background:var(--surface-2); color:var(--ink)}
.sy-ok p{color:var(--ink-2)}
.sy-ok .ref{color:var(--ink-2)}

/* =========================================================================
   28. TOUTES LES MARQUES
   ========================================================================= */
.brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.brandcard{
  display:flex; align-items:center; gap:13px; padding:15px 16px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
  text-align:start; transition:box-shadow .18s, transform .18s var(--ease);
}
.brandcard:hover{box-shadow:var(--shadow-2); transform:translateY(-2px)}
.brandcard .lg{width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center; position:relative}
.brandcard .lg img{width:74%; height:74%; object-fit:contain; position:relative; z-index:1}
.brandcard .lg .ini{position:absolute; inset:0; display:grid; place-items:center;
  font-size:16px; font-weight:700; color:var(--ink-3)}
.brandcard .t{flex:1; min-width:0}
.brandcard .t b{display:block; font-size:14.5px}
.brandcard .t span{font-size:11.5px; color:var(--ink-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; display:block}
.brandcard svg{width:16px; height:16px; color:var(--ink-3); flex:none}
.more-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--surface);
  min-height:150px; color:var(--ink-2); font-size:13.5px; font-weight:600;
}
.more-card:hover{background:var(--surface-2); color:var(--ink)}
.more-card .c{width:38px; height:38px; border-radius:50%; background:var(--bg);
  display:grid; place-items:center; box-shadow:var(--shadow-1)}
.more-card svg{width:17px; height:17px}

/* Logo de marque : les initiales ne se voient que tant qu'aucune image
   n'est arrivée. Dès qu'elle arrive, elles disparaissent - on ne doit
   jamais voir la lettre derrière le logo.                              */
.bp-logo img.blogo{width:76%; height:76%; object-fit:contain; position:relative; z-index:1}
.brandcard .lg img.blogo{width:74%; height:74%; object-fit:contain; position:relative; z-index:1}
.bp-logo.has-logo .ini,.brandcard .lg.has-logo .ini{display:none}
.bp-logo img.blogo:not([src]),.brandcard .lg img.blogo:not([src]){display:none}


/* =========================================================================
   29. APPLICATION NATIVE - v1.4
   Le même écran du téléphone au grand moniteur : gouttières régulières,
   grilles qui se replient, zones sûres iOS respectées, et aucune barre
   qui recouvre la vidéo.
   ========================================================================= */

html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent}
button,a{-webkit-tap-highlight-color:transparent}
.main{min-height:100svh}
.rail,.panel,.cap-sheet,.sy-body,.bp-grid{-webkit-overflow-scrolling:touch}

/* mode application installé : les zones sûres comptent double ------------- */
@media (display-mode:standalone){
  .topbar{padding-top:var(--safe-t); height:calc(var(--topbar) + var(--safe-t))}
  .rail{padding-top:calc(18px + var(--safe-t))}
  .tabbar{padding-bottom:var(--safe-b)}
}

/* tablette ---------------------------------------------------------------- */
@media (max-width:1180px){
  .wrap,.wrap-wide{width:calc(100% - 40px)}
  .fmt-grid .fmt:nth-child(3),.fmt-grid .fmt:nth-child(5){grid-column:auto}
  .bpr{grid-column:1 / -1}
}

/* téléphone --------------------------------------------------------------- */
@media (max-width:900px){
  .wrap,.wrap-wide{width:calc(100% - 32px)}
  .sec{padding:26px 0}
  .masonry{columns:2 150px; column-gap:12px}
  .masonry > *{margin-bottom:12px}
  .brands{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .cols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .bp-video{position:static; width:100%}
  .tb-round{width:38px; height:38px}
  .act img.th{width:64px; height:40px}
  .pills{overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap}
  .pills::-webkit-scrollbar{display:none}
  .pill{flex:none}
}

@media (max-width:640px){
  .wrap,.wrap-wide{width:calc(100% - 24px)}
  .tr-head h1{font-size:28px}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brandcard{padding:12px}
  .brandcard .t b{font-size:13px}
  .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .bp-grid.as-list{grid-template-columns:1fr}
  .fmt-grid{grid-template-columns:1fr}
  .cap-bar{padding:0 10px calc(66px + var(--safe-b))}
  .cap-bar-in{padding:10px; gap:8px}
  .cap-feature img{width:40px; height:40px}
  .cap-thumb,.cap-more{width:38px; height:38px; min-width:38px}
  .cap-sheet{max-height:92vh}
  .cs-in{padding:18px 16px 0}
  .cs-in h3{font-size:19px}
  .cs-price{font-size:22px}
  .sy-wrap{inset:0; border-radius:0}
  .tabbar{padding-bottom:var(--safe-b)}
  .install{inset-inline:12px; bottom:calc(78px + var(--safe-b))}
}

@media (max-width:420px){
  .wrap,.wrap-wide{width:calc(100% - 20px)}
  .tb-cat,.tb-lang{display:none}
  .topbar{gap:8px; padding:0 10px}
  .tb-search{min-width:0}
  .bp-grid{grid-template-columns:1fr}
  .cap-feature .see{padding:0 10px; font-size:11px}
  .sy-facts,.sy-form .two{grid-template-columns:1fr}
}

/* écran large : on remplit vraiment la page ------------------------------- */
@media (min-width:1600px){
  .wrap{width:min(1420px, 100% - 64px)}
  .wrap-wide{width:min(1700px, 100% - 64px)}
  .tr-grid{grid-template-columns:repeat(4,1fr)}
}

/* téléphone couché : la vidéo garde toute la place ------------------------ */
@media (max-height:520px) and (orientation:landscape){
  .cap-bar{padding-bottom:calc(52px + var(--safe-b))}
  .cap-bar-in{padding:8px}
  .cap-top{height:28px; font-size:11px}
}

/* les cartes ne poussent jamais la page : le texte se coupe proprement ---- */
.brandcard,.brandcard .t,.bv,.bpr,.act,.act .t,.plat,.fmt{min-width:0}
.brandcard .t{overflow:hidden}
.brandcard .t b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; line-height:1.25}
.brandcard .t span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:640px){ .brandcard > svg{display:none} .brandcard{gap:10px} }
.act .t b,.act .t .sub{overflow:hidden; text-overflow:ellipsis}
.brands{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:900px){ .brands{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))} }
@media (max-width:640px){ .brands{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .brands{grid-template-columns:minmax(0,1fr)} }

/* vitrine de l'accueil sur téléphone : la fiche produit devient une barre
   d'achat au pied de l'image, comme dans la capsule. --------------------- */
@media (max-width:760px){
  .showcase{aspect-ratio:16/11}
  .showcase .sc-cap{bottom:auto; top:14px; inset-inline:14px; font-size:12.5px}
  .sc-prod{
    top:auto; bottom:12px; inset-inline:12px; width:auto;
    display:grid; grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center; gap:10px; padding:8px 10px;
  }
  .sc-prod img{width:44px; height:44px; aspect-ratio:1; margin:0}
  .sc-prod b{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .sc-prod .pr{grid-column:2; margin:0; font-size:13px}
  .sc-prod .add{grid-row:1 / span 2; grid-column:3; width:auto; padding:0 14px; height:34px}
}

/* page de marque : une seule colonne qui tient dans l'écran, toujours ---- */
.bp,.bp-id,.bp-video,.bp-tabs{min-width:0}
@media (max-width:1100px){
  .bp{grid-template-columns:minmax(0,1fr)}
  .bp-video{width:100%; min-width:0}
  .bp-stats{flex-wrap:wrap; gap:14px 20px}
}
@media (max-width:640px){
  .bp-id{padding:18px}
  .bp-id h1{font-size:26px}
  .bp-about{font-size:14px}
  .bp-logo{width:84px; height:84px}
  .bp-video{min-height:0; aspect-ratio:16/9}
  .bp-act{flex-wrap:wrap}
  .bp-act .btn{flex:1 1 140px}
}


/* =========================================================================
   30. RETOUR, RECHERCHE ET HAUTEURS - v1.5
   ========================================================================= */

/* flèche de retour : présente sur toutes les vues, y compris les onglets
   de plateformes, pour ne jamais rester bloqué sur un écran. ------------- */
.tb-back{
  display:none; width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--surface-2); color:var(--ink); place-items:center;
  transition:background .16s, transform .16s var(--ease);
}
.tb-back.on{display:grid}
.tb-back:hover{background:var(--surface-3); transform:translateX(-1px)}
.tb-back svg{width:19px; height:19px}

/* la barre de recherche se referme : croix dans le panneau ---------------- */
.tb-suggest{position:relative}
.sg-close{
  position:absolute; top:8px; inset-inline-end:8px; z-index:2;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-2);
}
.sg-close:hover{background:var(--surface-3); color:var(--ink)}
.sg-close svg{width:15px; height:15px}
.tb-suggest button[data-suggest]{padding-inline-end:46px}

/* portraits d'artistes et de créateurs : la photo remplit la pastille ----- */
.bp-logo img.blogo.face,.brandcard .lg img.blogo.face,.asp-logo img.blogo.face{
  width:100%; height:100%; object-fit:cover; border-radius:inherit;
}

/* toutes les capsules Watch. Touch. Buy. à la même hauteur ---------------- */
.rail-h{align-items:flex-start}
.rail-h .card > img,
.tr-looks + * .card > img{aspect-ratio:16/9; height:auto; object-fit:cover}
.rail-h .cardwrap,.rail-h .card{height:auto}
.masonry .card > img{min-height:0}
#fy-grid .card > img{aspect-ratio:16/9; object-fit:cover}
#fy-grid .cardwrap{break-inside:avoid}

/* pied de page : le logo est cliquable ----------------------------------- */
.foot-brand a{display:inline-block}


/* =========================================================================
   31. SESYNC - lisibilité, visuels et panier  (v1.5)
   ========================================================================= */

/* le panier : le prix sur sa ligne, jamais collé au sous-titre ----------- */
.sy-line{display:grid; grid-template-columns:52px minmax(0,1fr) 26px; align-items:center}
.sy-line .t{display:flex; flex-direction:column; gap:1px; min-width:0}
.sy-line .t span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sy-line .t .pr{white-space:nowrap}

/* les lieux reconnus : une photo, et un texte lisible dans les deux thèmes */
.sy-spot{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center;
  padding:10px; border-radius:14px; background:var(--surface); border:1px solid var(--line);
}
.sy-spot .ph{
  width:64px; height:64px; border-radius:11px; overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center;
}
.sy-spot .ph img{width:100%; height:100%; object-fit:cover}
.sy-spot .tx{min-width:0}
.sy-spot b{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.sy-spot .loc{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}
.sy-spot p{margin:5px 0 0; font-size:12px; color:var(--ink-2); line-height:1.35}

/* le vrai logo Skoleom Pay dès que le fichier est déposé ----------------- */
.sy-pay-head .pay-logo{height:28px; width:auto; object-fit:contain; flex:none}
.sy-pay-head .pay-logo + .pay{display:none}


/* =========================================================================
   32. SESYNC - vidéo dans la fiche et Skoleom Fitting  (v1.5)
   ========================================================================= */
.sy-vid{position:relative; cursor:pointer; overflow:hidden}
.sy-vid.playing{aspect-ratio:16/9; cursor:default}
.sy-vid.playing iframe{width:100%; height:100%; border:0; display:block}
.sy-vid-x{
  position:absolute; top:8px; inset-inline-end:8px; z-index:2; width:28px; height:28px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center;
}
.sy-vid-x svg{width:14px; height:14px}
.sy-vid-lab{
  position:absolute; inset-inline:10px; bottom:10px; color:#fff; font-size:11.5px;
  font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.7); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

.sy-fit{display:flex; flex-direction:column; gap:12px; min-width:0}
.sy-fit-lead{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.45}
.sy-fit-form{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.sy-fit-form label{
  display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.sy-fit-form label:last-child{grid-column:1 / -1}
.sy-fit-form input,.sy-fit-form select{
  height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); padding:0 12px; font:inherit; font-size:14px; text-transform:none;
  letter-spacing:0; outline:none;
}
.sy-fit-form input:focus,.sy-fit-form select:focus{border-color:var(--ink-3)}
.sy-fit-res{
  border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
}
.sy-fit-res b{font-size:16px}
.sy-fit-res > span{font-size:12.5px; color:var(--ink-2)}
@media (max-width:760px){
  .sy-fit-form{grid-template-columns:1fr}
}

/* les pastilles de sources sont cliquables : elles filtrent la page ------ */
.bp-live .src{cursor:pointer; border:1px solid transparent; transition:background .16s, border-color .16s, color .16s}
.bp-live .src:hover:not([disabled]){background:var(--surface-3); color:var(--ink)}
.bp-live .src.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.bp-live .src.on i{background:var(--brand)}
.bp-live .src[disabled]{cursor:default; opacity:.55}


/* =========================================================================
   33. PARTAGE - tous les réseaux, avec l'image de la marque  (v1.5)
   ========================================================================= */
.sh-card{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface);
  margin-bottom:16px;
}
.sh-card img{width:96px; height:96px; object-fit:cover; display:block}
.sh-card .ph{width:96px; height:96px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-3)}
.sh-card .ph svg{width:26px; height:26px}
.sh-card .tx{min-width:0; padding:12px 14px 12px 0}
.sh-card b{display:block; font-size:15px; font-weight:600}
.sh-card span{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.sh-card small{display:block; font-size:11px; color:var(--ink-3); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.sh-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.sh-net{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 4px;
  border-radius:14px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:11px; font-weight:500; text-align:center; text-decoration:none;
  transition:transform .14s var(--ease), box-shadow .16s, border-color .16s;
}
.sh-net:hover{transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--line-2)}
.sh-net .ic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff}
.sh-net .ic svg{width:19px; height:19px}
.i-whatsapp{background:#25d366} .i-x{background:#0f1419} .i-facebook{background:#1877f2}
.i-linkedin{background:#0a66c2} .i-telegram{background:#2aabee} .i-pinterest{background:#e60023}
.i-reddit{background:#ff4500} .i-messenger{background:#a334fa} .i-mail{background:#6b7280}
.i-sms{background:#34c759} .i-copy{background:var(--ink)} .i-more{background:var(--brand); color:var(--brand-ink)}
.sh-note{margin:16px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.5}
@media (max-width:420px){ .sh-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }


/* =========================================================================
   34. MON COMPTE - profil complet  (v1.5)
   ========================================================================= */
.av.has-img{padding:0; overflow:hidden}
.av.has-img img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block}

.acct{display:flex; flex-direction:column; gap:18px}
.acct-sec{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
  padding:20px; display:flex; flex-direction:column; gap:14px;
}
.acct-sec h3{font-size:16px; font-weight:600; letter-spacing:-.01em}
.acct-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}

.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld > span{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.fld input,.fld textarea{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink); padding:11px 13px; font:inherit; font-size:14.5px; outline:none;
  transition:border-color .16s;
}
.fld input:focus,.fld textarea:focus{border-color:var(--ink-3)}
.fld textarea{resize:vertical; line-height:1.5}

.acct-id{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.acct-ph{
  position:relative; width:104px; height:104px; border-radius:50%; cursor:pointer;
  background:var(--surface-2); display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--line); flex:none;
}
.acct-ph img{width:100%; height:100%; object-fit:cover}
.acct-ph .ini{font-size:32px; font-weight:700; color:var(--ink-3)}
.acct-ph .pen{
  position:absolute; inset-inline-end:2px; bottom:2px; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:var(--brand-ink); display:grid; place-items:center;
  box-shadow:var(--shadow-1);
}
.acct-ph .pen svg{width:17px; height:17px}
.acct-phx{min-width:0; flex:1}
.acct-phx b{display:block; font-size:14.5px; font-weight:600}
.acct-phx p{margin:4px 0 10px; font-size:12.5px; color:var(--ink-2); max-width:420px}

.acct-types{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.acct-type{
  text-align:start; padding:14px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); transition:border-color .16s, background .16s, transform .14s var(--ease);
}
.acct-type:hover{transform:translateY(-1px); border-color:var(--line-2)}
.acct-type b{display:block; font-size:14.5px; font-weight:600}
.acct-type span{display:block; font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.4}
.acct-type.on{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.acct-type.on span{color:rgba(255,255,255,.75)}
:root[data-theme="dark"] .acct-type.on span{color:rgba(0,0,0,.7)}

.acct-cats{display:flex; flex-wrap:wrap; gap:8px}
.acct-note{margin:0; font-size:12px; color:var(--ink-3); line-height:1.5}
.acct-note a{color:var(--ink); text-decoration:underline}
.acct-act{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

@media (max-width:640px){
  .acct-sec{padding:16px}
  .acct-grid{grid-template-columns:1fr}
  .acct-types{grid-template-columns:1fr}
  .acct-act .btn{flex:1 1 100%}
}


/* =========================================================================
   35. LIENS SORTANTS - on dit toujours quand on quitte l'app  (v1.5)
   ========================================================================= */
a.is-ext{display:inline-flex; align-items:center; gap:5px}
.ext-ico{display:inline-grid; place-items:center; opacity:.7}
.ext-ico svg{width:13px; height:13px}
a.is-ext:hover .ext-ico{opacity:1}
.foot a.is-ext .ext-ico svg{width:12px; height:12px}
.bv .ext-badge{
  position:absolute; top:10px; inset-inline-end:10px; z-index:2;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(6px);
}
.bv .ext-badge svg{width:13px; height:13px}


/* =========================================================================
   36. ARABE : toute l'interface bascule proprement en RTL  (v1.5)
   ========================================================================= */
[dir="rtl"] .rail{inset-inline-start:0; inset-inline-end:auto}
[dir="rtl"] .cap-feature .see svg,[dir="rtl"] .sec-link svg,
[dir="rtl"] .btn svg.arw,[dir="rtl"] .brandcard > svg,
[dir="rtl"] .more-card .c svg{transform:scaleX(-1)}
[dir="rtl"] .tb-back svg{transform:scaleX(-1)}
[dir="rtl"] .crumbs,[dir="rtl"] .acct-act,[dir="rtl"] .sh-grid{direction:rtl}
@media (max-width:900px){
  [dir="rtl"] .rail{transform:translateX(102%)}
  [dir="rtl"] .rail.on{transform:none}
}


/* =========================================================================
   37. SESYNC - vidéo additionnelle et article de presse  (v1.5)
   ========================================================================= */
.sy-more-vid{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  height:40px; border-radius:12px; margin-bottom:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13px; font-weight:600; transition:background .16s, border-color .16s;
}
.sy-more-vid:hover{background:var(--surface-2); border-color:var(--line-2)}
.sy-more-vid svg{width:16px; height:16px}

.sy-press{
  position:relative; display:grid; grid-template-columns:72px minmax(0,1fr);
  gap:12px; align-items:center; text-decoration:none; color:inherit; overflow:hidden;
}
.sy-press img{width:72px; height:72px; object-fit:cover; display:block}
.sy-press .bd{padding:10px 30px 10px 0; min-width:0}
.sy-press b{display:block; font-size:13px; line-height:1.35; margin-top:4px}
.sy-press p{margin:4px 0 0; font-size:11.5px; color:var(--ink-3)}
.sy-press .sy-ext{
  position:absolute; top:10px; inset-inline-end:10px; width:22px; height:22px;
  display:grid; place-items:center; color:var(--ink-3);
}
.sy-press .sy-ext svg{width:13px; height:13px}
.sy-press:hover{border-color:var(--line-2)}
.sy-press:hover .sy-ext{color:var(--ink)}
[dir="rtl"] .sy-press .bd{padding:10px 0 10px 30px}


/* la vitrine de l'accueil lit la vidéo sur place ------------------------- */
.showcase.playing{background:#000}
.showcase iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.showcase.playing .sc-cap{display:none}
.showcase.playing .sc-prod{z-index:3}
.sc-full{
  position:absolute; top:14px; inset-inline-start:14px; z-index:4;
  height:32px; padding:0 13px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(8px);
}
.sc-full svg{width:14px; height:14px}
.sc-full:hover{background:rgba(0,0,0,.72)}


/* =========================================================================
   38. CAPSULE - menu déroulant des références et fermeture claire  (v1.5)
   ========================================================================= */
.cap-menu{
  position:absolute; inset-inline:0; bottom:calc(74px + var(--safe-b) + 96px); z-index:6;
  display:none; justify-content:center; padding:0 16px; pointer-events:none;
}
.cap-menu.on{display:flex}
.cm-box{
  pointer-events:auto; width:min(760px,100%); max-height:52vh; display:flex;
  flex-direction:column; overflow:hidden; color:#fff; border-radius:var(--r-lg);
  background:rgba(22,22,24,.92); backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); box-shadow:var(--shadow-3);
  animation:viewIn .18s var(--ease);
}
.cm-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.1);
}
.cm-x{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; display:grid; place-items:center; flex:none}
.cm-x svg{width:14px; height:14px}
.cm-list{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px}
.cm-row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:6px; border-radius:12px}
.cm-row.on{background:rgba(255,255,255,.1)}
.cm-row:hover{background:rgba(255,255,255,.07)}
.cm-pick{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center;
  gap:10px; text-align:start; color:#fff; min-width:0}
.cm-pick img{width:44px; height:44px; border-radius:10px; object-fit:cover; background:#fff}
.cm-pick .t{min-width:0}
.cm-pick .t b{display:block; font-size:12.5px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.cm-pick .t span{font-size:11px; color:rgba(255,255,255,.6)}
.cm-pick .pr{font-size:13px; font-weight:700; white-space:nowrap}
.cm-go{height:30px; padding:0 12px; border-radius:var(--r-pill); background:#fff; color:#101114;
  font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.cm-go svg{width:13px; height:13px}

.cap-menu-btn{
  flex:none; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.14);
  color:#fff; display:grid; place-items:center; transition:background .16s;
}
.cap-menu-btn svg{width:17px; height:17px; transform:rotate(-90deg); transition:transform .2s var(--ease)}
.cap-menu-btn.on{background:var(--brand); color:var(--brand-ink)}
.cap-menu-btn.on svg{transform:rotate(90deg)}
.cap-menu-btn:hover{background:rgba(255,255,255,.24)}

/* la croix de fermeture, impossible à manquer */
.cap-x{width:44px; height:44px; background:rgba(0,0,0,.6)}
.cap-x:hover{background:rgba(0,0,0,.8)}
.cap-x svg{width:21px; height:21px}

@media (max-width:640px){
  .cap-menu{bottom:calc(66px + var(--safe-b) + 132px); padding:0 10px}
  .cm-box{max-height:44vh}
  .cm-go{display:none}
}


/* =========================================================================
   39. PASTILLES - logo de marque, portrait, logo the25x  (v1.7)
   ========================================================================= */
.av{position:relative; overflow:hidden}
.av img.blogo{width:76%; height:76%; object-fit:contain; position:relative; z-index:1}
.av img.blogo.face{width:100%; height:100%; object-fit:cover}
.av img.t25{width:82%; height:82%; object-fit:contain; position:relative; z-index:1}
.av.has-logo{background:var(--surface-2)}
.av.has-logo .ini{display:none}
.av .ini{display:grid; place-items:center; width:100%; height:100%}

/* l'activité : qui parle, puis la nature de l'action ------------------- */
.act .av-act{width:38px; height:38px; border-radius:50%; flex:none; background:var(--surface-2);
  display:grid; place-items:center; font-size:13px; font-weight:600; color:var(--ink-2)}
.act .ic{flex:none}

/* le logo the25x sur fond sombre garde son vert ------------------------ */
.sy-head .lg img.t25,.cap-feature img.t25{width:80%; height:80%; object-fit:contain}


/* =========================================================================
   40. ACTIVITÉ - des lignes régulières et des vignettes au même format
   ========================================================================= */
.act{
  display:grid;
  grid-template-columns:38px 30px minmax(0,1fr) 72px auto;
  align-items:center; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .16s;
}
.act:hover{background:var(--surface)}
.act .av-act{width:38px; height:38px}
.act .ic{width:30px; height:30px}
.act .ic svg{width:15px; height:15px}
.act .t{min-width:0}
.act .t b,.act .t .sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.act img.th{
  width:72px; height:44px; border-radius:10px; object-fit:cover; display:block;
  background:var(--surface-2); flex:none;
}
.act .w{text-align:end; white-space:nowrap}
@media (max-width:640px){
  .act{grid-template-columns:34px minmax(0,1fr) 56px; gap:10px}
  .act .ic{display:none}
  .act .av-act{width:34px; height:34px}
  .act img.th{width:56px; height:36px}
  .act .w{grid-column:2; font-size:11px; text-align:start}
}


/* =========================================================================
   41. PANNEAUX - aucune icône ne peut plus s'étirer  (v1.8)
   ========================================================================= */
.pn-body svg{width:18px; height:18px; flex:none}
.pn-row > svg,.pn-row .lb + svg{width:18px; height:18px; flex:none; color:var(--ink-3)}
.pn-row{width:100%}
.pn-note{margin:0 0 14px; font-size:12.5px; color:var(--ink-3); line-height:1.5}

/* le panneau Catégories : une vraie liste illustrée -------------------- */
.cat-list{display:flex; flex-direction:column; gap:8px}
.cat-row{
  display:grid; grid-template-columns:46px minmax(0,1fr) 18px; align-items:center; gap:12px;
  padding:9px 12px 9px 9px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); text-align:start; width:100%;
  transition:border-color .16s, background .16s, transform .14s var(--ease);
}
.cat-row:hover{background:var(--surface-2); border-color:var(--line-2); transform:translateY(-1px)}
.cat-row.on{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.cat-row.on .t span{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .cat-row.on .t span{color:rgba(0,0,0,.65)}
.cat-row .ph{
  width:46px; height:46px; border-radius:12px; overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center; color:var(--ink-3);
}
.cat-row .ph img{width:100%; height:100%; object-fit:cover}
.cat-row .ph svg{width:19px; height:19px}
.cat-row .t{min-width:0}
.cat-row .t b{display:block; font-size:14.5px; font-weight:600}
.cat-row .t span{display:block; font-size:12px; color:var(--ink-3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cat-row > svg{width:18px; height:18px; opacity:.6}
.cat-row.on > svg{opacity:1}

/* garde-fou général : une icône sans taille ne casse plus une mise en page */
svg:not([width]):not([height]){max-width:100%; max-height:100%}
.panel svg,.modal svg,.toasts svg{max-width:28px; max-height:28px}


/* =========================================================================
   42. TENDANCES - les encarts d'appel tiennent dans l'écran  (v1.8)
   ========================================================================= */
.ctas{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.cta,.cta .tx,.cta .stack{min-width:0}
.cta .tx b,.cta .tx p{overflow-wrap:anywhere}
@media (max-width:760px){
  .ctas{grid-template-columns:minmax(0,1fr)}
  .cta{flex-wrap:wrap; padding:16px}
  .cta .btn{flex:1 1 140px}
  .cta .stack{display:none}
}

/* la catégorie active se voit dans la barre du haut ------------------- */
.tb-cat.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tb-cat.on svg{color:inherit}

/* the25x : logo noir sur la pastille verte, pour qu'il se voie ---------- */
.av img.t25{width:78%; height:78%; object-fit:contain}
.sy-head .lg img.t25,.cap-feature img.t25{width:76%; height:76%}
:root[data-theme="dark"] .av img.t25{filter:none}

/* la pastille the25x garde son cercle vert, le logo passe en noir ------- */
.av:has(> img.t25){background:linear-gradient(140deg,var(--brand),var(--brand-2))}
.av:has(> img.t25) .ini{display:none}


/* =========================================================================
   43. ENREGISTRÉS - retirer un élément, vider la liste  (v2.0)
   ========================================================================= */
.sv-wrap{position:relative}
.sv-x{
  position:absolute; top:10px; inset-inline-start:10px; z-index:3;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.58); color:#fff; backdrop-filter:blur(6px);
  opacity:0; transform:scale(.9); transition:opacity .16s, transform .16s var(--ease), background .16s;
}
.sv-wrap:hover .sv-x,.sv-x:focus-visible{opacity:1; transform:none}
.sv-x:hover{background:#e0313f}
.sv-x svg{width:15px; height:15px}
@media (hover:none){ .sv-x{opacity:1; transform:none} }

/* une carte enregistrée sans visuel : une tuile lisible, pas un logo géant */
.card.sv-noimg{
  aspect-ratio:4/5; background:linear-gradient(150deg,var(--surface-2),var(--surface-3));
  display:grid; place-items:center; padding:18px;
}
.card.sv-noimg .ov,.card.sv-noimg .cap{display:none}
.sv-txt{display:block; text-align:center; color:var(--ink); max-width:100%}
.sv-txt b{display:block; font-size:14px; font-weight:600; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.sv-txt span{display:block; font-size:12px; color:var(--ink-3); margin-top:6px}


/* =========================================================================
   44. DÉMONSTRATIONS INTÉGRÉES - le format chez l'éditeur  (v2.1)
   Cinq environnements fictifs, cinq mises en page différentes.
   ========================================================================= */
#view-demo{padding:0}
.dm-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; padding:12px 20px; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.dm-top-t{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.dm-top-t svg{width:15px; height:15px; color:var(--brand-2)}
.dm-sz{font-size:11.5px; color:var(--ink-3)}
.dm-top-n{display:flex; gap:7px; flex-wrap:wrap; margin-inline-start:auto}
.dm-pill{
  height:30px; padding:0 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500;
  background:var(--surface-2); color:var(--ink-2); transition:background .16s, color .16s;
}
.dm-pill:hover{background:var(--surface-3); color:var(--ink)}
.dm-pill.on{background:var(--ink); color:var(--bg)}

/* le décor de l'éditeur -------------------------------------------------- */
.dm-stage{--dm-ink:#12131a; --dm-bg:#fff; --dm-line:#e6e7ec; --dm-accent:#12131a;
  background:var(--dm-bg); color:var(--dm-ink); min-height:70vh; padding-bottom:40px}
.dm-head{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 26px; border-bottom:1px solid var(--dm-line);
}
.dm-mast{font-size:24px; font-weight:800; letter-spacing:-.03em}
.dm-head nav{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; opacity:.72}
.dm-sub{margin-inline-start:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5}
.dm-page{width:min(1100px, 100% - 44px); margin:26px auto 0}
.dm-cols{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:34px; align-items:start}
.dm-art{min-width:0}
.dm-rub{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:10px}
.dm-art h1,.dm-page > h1{font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px}
.dm-chapo{font-size:17px; line-height:1.5; opacity:.82; margin:0 0 16px}
.dm-meta{display:flex; align-items:center; gap:10px; font-size:12.5px; opacity:.6; margin-bottom:22px}
.dm-meta .av{width:28px; height:28px; font-size:11px}
.dm-art p{font-size:15.5px; line-height:1.72; margin:0 0 16px; max-width:64ch}
.dm-side{border-inline-start:1px solid var(--dm-line); padding-inline-start:20px}
.dm-side b{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:12px}
.dm-link{display:block; font-size:14px; line-height:1.4; padding:10px 0; border-bottom:1px solid var(--dm-line); cursor:pointer}
.dm-link:hover{opacity:.6}
.dm-bottom{width:min(1100px,100% - 44px); margin:34px auto 0; padding-top:16px;
  border-top:1px solid var(--dm-line); font-size:11.5px; opacity:.55}

/* l'emplacement publicitaire -------------------------------------------- */
.dm-slot{margin:22px 0 26px}
.dm-slot-lab{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.45; margin-bottom:8px}
.dm-player{border-radius:16px; overflow:hidden; background:#0b0b0d; color:#fff;
  box-shadow:0 18px 44px rgba(10,12,20,.18)}
.dm-video{position:relative; aspect-ratio:16/9; background:#000}
.dm-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.dm-badge{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border-radius:var(--r-pill); background:var(--brand); color:var(--brand-ink);
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
}
.dm-badge svg{width:12px; height:12px}
.dm-who{position:absolute; inset-inline-start:12px; bottom:12px; z-index:2; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.7); max-width:70%}
.dm-who b{display:block; font-size:14px}
.dm-who span{display:block; font-size:11.5px; opacity:.82; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.dm-bar{display:flex; align-items:center; gap:12px; padding:11px 12px; background:#151519}
.dm-bar > img{width:44px; height:44px; border-radius:10px; object-fit:cover; background:#fff; flex:none}
.dm-bar .t{min-width:0; flex:1}
.dm-bar .t b{display:block; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dm-bar .t span{font-size:12px; opacity:.7}
.dm-buy{height:34px; padding:0 15px; border-radius:var(--r-pill); background:var(--brand);
  color:var(--brand-ink); font-size:12.5px; font-weight:700; display:inline-flex;
  align-items:center; gap:6px; flex:none}
.dm-buy svg{width:15px; height:15px}
.dm-rail{display:flex; gap:6px; flex:none}
.dm-th{width:36px; height:36px; border-radius:9px; overflow:hidden; background:rgba(255,255,255,.12)}
.dm-th img{width:100%; height:100%; object-fit:cover}
.dm-th.more{display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:700}
.dm-foot{display:flex; align-items:center; gap:7px; padding:9px 12px; background:#101013;
  font-size:11px; color:rgba(255,255,255,.72)}
.dm-foot svg{width:13px; height:13px; color:var(--brand)}

/* variantes par format --------------------------------------------------- */
.dm-short .dm-video,.dm-capsule .dm-video{aspect-ratio:9/16; max-height:70vh}
.dm-short,.dm-capsule{width:min(360px,100%); margin-inline:auto}
.dm-billboard .dm-video{aspect-ratio:970/250}
.dm-mobile{width:100%}
.dm-mobile .dm-video{aspect-ratio:320/300}
.dm-mobile .dm-rail{display:none}

/* skins : un quotidien, un réseau, un streaming, un magazine, un sport --- */
.pub-news{--dm-ink:#101014; --dm-bg:#fffdf8; --dm-line:#e4e0d6; font-family:Georgia,'Times New Roman',serif}
.pub-news .dm-mast{font-family:Georgia,serif; letter-spacing:-.01em}
.pub-news .dm-head nav{font-family:var(--font)}
.pub-social{--dm-ink:#0f1014; --dm-bg:#f4f5f8; --dm-line:#e2e4ea}
.pub-social .dm-page{width:min(620px,100% - 32px)}
.dm-feed{display:flex; flex-direction:column; gap:14px}
.dm-post{background:#fff; border:1px solid var(--dm-line); border-radius:16px; padding:14px 16px}
.dm-post p{margin:10px 0 0; font-size:14.5px; line-height:1.55}
.dm-post-h{display:flex; align-items:center; gap:10px; font-size:13px}
.dm-post-h .av{width:32px; height:32px; font-size:12px}
.dm-post-h b{font-weight:600}
.dm-post-h span:last-child{margin-inline-start:auto; font-size:11.5px; opacity:.5}
.pub-stream{--dm-ink:#f3f4f8; --dm-bg:#0d0e12; --dm-line:#23252e}
.pub-stream .dm-side{border-color:var(--dm-line)}
.dm-rowcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:22px 0}
.dm-card{border-radius:12px; overflow:hidden; background:rgba(255,255,255,.06); cursor:pointer}
.dm-card img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.dm-card b{display:block; padding:9px 10px; font-size:12.5px; font-weight:500; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.pub-mag{--dm-ink:#1b1a17; --dm-bg:#faf7f2; --dm-line:#e6e0d5}
.pub-mag .dm-mast{font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:19px}
.pub-sport{--dm-ink:#0f1116; --dm-bg:#eef1f6; --dm-line:#dfe3ec}
.dm-phone-wrap{display:grid; place-items:center; padding:10px 0 26px}
.dm-phone{width:min(380px,100%); border-radius:34px; overflow:hidden; background:#fff;
  border:9px solid #14161c; box-shadow:0 26px 60px rgba(12,16,28,.28)}
.dm-phone-top{padding:14px 18px 10px; font-weight:800; font-size:17px; letter-spacing:-.02em;
  border-bottom:1px solid var(--dm-line)}
.dm-phone-body{padding:16px 18px 24px}
.dm-phone-body h1{font-size:21px; line-height:1.18; margin:0 0 10px}
.dm-phone-body p{font-size:14px; line-height:1.6; margin:0 0 12px}
.dm-phone-body .dm-chapo{font-size:14.5px}

@media (max-width:860px){
  .dm-cols{grid-template-columns:minmax(0,1fr)}
  .dm-side{border:0; padding:0; border-top:1px solid var(--dm-line); padding-top:16px}
  .dm-page{width:calc(100% - 32px)}
  .dm-bar{flex-wrap:wrap}
  .dm-rail{width:100%; overflow-x:auto}
  .dm-top-n{width:100%; margin-inline-start:0; overflow-x:auto; flex-wrap:nowrap}
  .dm-pill{flex:none}
}


/* =========================================================================
   46. FRAÎCHEUR ET PORTRAITS  (v2.5)
   ========================================================================= */
.bv .fresh{
  position:absolute; top:10px; inset-inline-start:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  border-radius:var(--r-pill); background:var(--brand); color:var(--brand-ink);
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
.bv .fresh svg{width:11px; height:11px}

/* une personne : la photo remplit la pastille de la page de marque ----- */
.bp-logo.is-face{overflow:hidden; background:var(--surface-2)}
.bp-logo.is-face img.blogo{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.bp-logo.is-face .ini{display:none}

/* ===================== 47. LOGOS DES MARQUES =============================
   L'ecran ou l'on depose une fois pour toutes le bon logo d'une marque.  */
.lg-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:4px 0 16px;
}
.lg-q{
  flex:1 1 240px; min-width:0;
  height:44px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  font:inherit; font-size:15px;
}
.lg-q:focus{ outline:none; border-color:var(--brand); }

.lg-list{ display:grid; gap:10px; }
.lg-row{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto;
  gap:14px; align-items:center;
  padding:12px 14px;
  border:1px solid var(--line); border-radius:18px;
  background:var(--card);
}
.lg-badge{
  position:relative; display:grid; place-items:center;
  width:56px; height:56px; border-radius:16px;
  background:var(--soft); overflow:hidden;
}
.lg-badge .ini{ font-weight:700; font-size:16px; color:var(--mute); }
.lg-badge.has-logo .ini{ display:none; }
.lg-badge img{
  position:absolute; inset:6px;
  width:calc(100% - 12px); height:calc(100% - 12px);
  object-fit:contain;
}
.lg-id{ min-width:0; }
.lg-id b{ display:block; font-size:15px; }
.lg-id span{ display:block; font-size:12.5px; color:var(--mute); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-act{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.lg-act .btn{ height:38px; padding:0 14px; font-size:13.5px; }
.lg-file{ display:inline-flex; align-items:center; cursor:pointer; }
.lg-off{ color:#c0392b; }

@media (max-width:720px){
  .lg-row{ grid-template-columns:48px minmax(0,1fr); }
  .lg-badge{ width:48px; height:48px; }
  .lg-act{ grid-column:1/-1; justify-content:flex-start; }
}

/* ===================== 48. STUDIO DES MARQUES ============================
   Logo, photos, videos et produits deposes a la main pour une marque.   */
.crumb-b{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--mute); font:inherit; font-size:inherit;
}
.crumb-b:hover{ color:var(--ink); text-decoration:underline; }

.ks-tabs{ margin:6px 0 18px; }
.ks-body{ min-height:200px; }

.ks-logo{
  display:flex; gap:18px; align-items:center;
  padding:18px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:20px; background:var(--card);
}
.lg-badge.lg-big{ width:96px; height:96px; border-radius:24px; flex:0 0 96px; }
.ks-txt{ min-width:0; }
.ks-txt b{ display:block; font-size:16px; margin-bottom:4px; }
.ks-txt span{ display:block; font-size:13.5px; color:var(--mute); line-height:1.5; }

.ks-act{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ks-act .btn{ height:42px; padding:0 18px; font-size:14px; }
.ks-help{
  margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--mute);
  max-width:760px;
}

.kt-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
}
.kt{ min-width:0; }
.kt-th{
  position:relative; aspect-ratio:4/5;
  border-radius:16px; overflow:hidden;
  background:var(--soft); border:1px solid var(--line);
}
.kt-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.kt-x{
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(16,17,20,.72); color:#fff;
}
.kt-x:hover{ background:#c0392b; }
.kt-x svg{ width:15px; height:15px; }
.kt-play{
  position:absolute; left:8px; bottom:8px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(16,17,20,.72); color:#fff;
}
.kt-play svg{ width:14px; height:14px; }
.kt-lb{ padding:8px 2px 0; }
.kt-lb b{
  display:block; font-size:13.5px; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.kt-lb span{ display:block; font-size:12.5px; color:var(--mute); margin-top:2px; }

/* le choix des produits presents dans une video */
.kt-refs{
  margin-top:7px; width:100%; border:1px dashed var(--line); background:transparent;
  color:var(--mute); border-radius:10px; padding:6px 8px; font:inherit;
  font-size:12px; cursor:pointer; text-align:center;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.kt-refs:hover{ border-color:var(--ink); color:var(--ink); }
.kt-refs.on{
  border-style:solid; border-color:var(--vert, #c8f34a);
  background:var(--vert, #c8f34a); color:#12140c; font-weight:650;
}
.rf-list{
  max-height:min(52vh, 420px); overflow:auto; margin-top:6px;
  border:1px solid var(--line); border-radius:14px;
}
.rf{
  display:flex; align-items:center; gap:11px; padding:9px 11px; cursor:pointer;
  border-bottom:1px solid var(--line);
}
.rf:last-child{ border-bottom:0; }
.rf:hover{ background:var(--soft, rgba(127,127,127,.08)); }
.rf input{ width:17px; height:17px; flex:0 0 auto; accent-color:#12140c; }
.rf-th{
  width:44px; height:44px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  background:var(--soft, rgba(127,127,127,.12)); display:grid; place-items:center;
}
.rf-th img{ width:100%; height:100%; object-fit:cover; }
.rf-t{ min-width:0; }
.rf-t b{ display:block; font-size:13.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rf-t small{ color:var(--mute); font-size:12px; }

/* --- le Page Studio des capsules --- */
.kt.is-cap{ cursor:pointer; }
.kt.is-cap:hover .kt-th{ outline:2px solid var(--ink); outline-offset:2px; }
.kt-cn{
  position:absolute; left:8px; top:8px; z-index:2; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; background:var(--vert, #c8f34a); color:#12140c;
}
.cap-ed{ display:block; }
.cap-eh{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
/* ici la fleche de retour est le seul chemin vers la liste des capsules :
   elle est visible a toutes les largeurs, pas seulement sur telephone */
.cap-eh .st-back{ display:grid; }
.cap-th{
  width:74px; height:44px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  background:var(--soft, rgba(127,127,127,.12));
}
.cap-th img{ width:100%; height:100%; object-fit:cover; }
.cap-sec{ margin-top:18px; }
.cap-sh{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:9px;
}
.cap-sh b{ font-size:14.5px; }
/* ces lignes n'ont pas de pastille de marque : la colonne du logo laisse
   sa place au texte, qui est ce que l'on vient lire */
/* Ces lignes n'ont pas de pastille de marque : la colonne du logo laisse
   sa place au texte, qui est ce que l'on vient lire. La regle generale
   .lg-row.has-mv declare quatre colonnes pour trois enfants ; il faut
   donc etre plus precis qu'elle, et non simplement plus tard. */
.cap-sec .lg-row.cap-row{ grid-template-columns:28px minmax(0,1fr) auto; }
.cap-sec .lg-row.cap-row.has-aff{ grid-template-columns:42px 28px minmax(0,1fr) auto; }
.cap-sec .lg-row.cap-row .lg-id b{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:820px){
  .cap-sec .lg-row.cap-row{ grid-template-columns:28px minmax(0,1fr); }
  .cap-sec .lg-row.cap-row.has-aff{ grid-template-columns:42px 28px minmax(0,1fr); }
  .cap-sec .lg-row.cap-row .lg-act{ grid-column:1 / -1; justify-content:flex-start; }
}
.empty.is-s{ padding:14px; font-size:13px; }
/* l'affiche d'un titre a voir, deposee en un clic */
.cap-aff{
  width:42px; height:58px; flex:0 0 42px; border-radius:8px; overflow:hidden;
  background:var(--soft, rgba(127,127,127,.12)); display:grid; place-items:center;
  cursor:pointer; border:1px dashed var(--line);
}
.cap-aff:hover{ border-color:var(--ink); }
.cap-aff img{ width:100%; height:100%; object-fit:cover; }
.cap-aff span{ font-size:9.5px; color:var(--mute); text-align:center; line-height:1.1; }

@media (max-width:720px){
  .ks-logo{ flex-direction:column; align-items:flex-start; }
  .kt-grid{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ===================== 49. LECTEUR D'ARTICLE =============================
   Wikipedia et la presse se lisent dans la page. Une iframe ne peut pas
   servir : ces sites refusent d'etre encadres (X-Frame-Options).       */
.rd{
  position:fixed; inset:0; z-index:90;
  display:none; justify-content:center; align-items:flex-start;
  padding:28px 16px; overflow-y:auto;
  background:rgba(16,17,20,.62); backdrop-filter:blur(6px);
}
.rd.on{ display:flex; }
.rd-card{
  position:relative; width:min(760px, 100%);
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  padding:0 0 26px; overflow:hidden;
}
.rd-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(16,17,20,.72); color:#fff;
}
.rd-x svg{ width:18px; height:18px; }
.rd-x:hover{ background:#101114; }

.rd-body{ padding:0 28px; }
.rd-hero{
  display:block; width:calc(100% + 56px); margin:0 -28px 20px;
  max-height:320px; object-fit:cover;
}
.rd-t{ font-size:27px; line-height:1.22; margin:22px 0 8px; letter-spacing:-.4px; }
.rd-hero + .rd-t{ margin-top:4px; }
.rd-src{
  font-size:13px; color:var(--mute); margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.rd-lede{ font-size:17px; line-height:1.6; color:var(--ink-2); margin:0 0 18px; }
.rd-wait{ padding:28px 0; color:var(--mute); font-size:14px; }
.rd-txt p{ font-size:16px; line-height:1.72; margin:0 0 16px; color:var(--ink-2); }
.rd-txt h2{ font-size:19px; line-height:1.35; margin:26px 0 10px; }
.rd-foot{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
}
.rd-foot .btn svg{ width:15px; height:15px; margin-inline-start:7px; }
body.no-scroll{ overflow:hidden; }

@media (max-width:640px){
  .rd{ padding:0; }
  .rd-card{ border-radius:0; min-height:100vh; width:100%; }
  .rd-body{ padding:0 18px; }
  .rd-hero{ width:calc(100% + 36px); margin:0 -18px 18px; max-height:220px; }
  .rd-t{ font-size:23px; }
}

/* ===================== 50. FORMULAIRES DU STUDIO =========================
   Tout se saisit dans la page : la boite du navigateur (« le site
   indique ») sort du design et bloque le reste de l'application.      */
.kf-t{ margin:0 0 14px; font-size:19px; letter-spacing:-.2px; }
.kf{ display:grid; gap:12px; }
.kf .fld{ display:block; }
.kf .fld > span{
  display:block; font-size:12.5px; color:var(--mute);
  margin-bottom:6px; font-weight:600;
}
.kf input, .kf textarea{
  width:100%; box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface-2, var(--soft)); color:var(--ink);
  font:inherit; font-size:15px; line-height:1.4;
}
.kf textarea{ resize:vertical; min-height:74px; }
.kf input:focus, .kf textarea:focus{ outline:none; border-color:var(--brand); }
.kf input::placeholder, .kf textarea::placeholder{ color:var(--mute); opacity:.75; }

/* les onglets du studio ont besoin de leur propre espacement :
   la regle existante ne vaut que dans .bp-tabs */
.ks-tabs{
  display:flex; gap:26px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin:6px 0 20px; padding-bottom:0;
}
.ks-tabs .bp-tab{ padding-bottom:12px; }
@media (max-width:640px){
  .ks-tabs{ gap:18px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
  .ks-tabs::-webkit-scrollbar{ display:none; }
}

/* ===================== 51. PAGE STUDIO (BACK-OFFICE) =====================
   Deux panneaux : la liste des pages a gauche, l'editeur a droite.     */
.st{ padding-top:18px; }
.st-top{
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  margin-bottom:18px;
}
.st-ti{ flex:1 1 320px; min-width:0; }
.st-ti h1{ font-size:27px; letter-spacing:-.5px; margin:0 0 6px; }
.st-ti p{ margin:0; font-size:14px; line-height:1.55; color:var(--mute); max-width:640px; }
.st-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.st-tools .btn{ height:42px; padding:0 16px; font-size:14px; }
.st-tools .btn svg{ width:15px; height:15px; margin-inline-end:7px; }

.st-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
  align-items:start;
}
.st-side{
  border:1px solid var(--line); border-radius:22px;
  background:var(--card); overflow:hidden;
  position:sticky; top:86px;
}
.st-sh{ padding:14px 14px 10px; }
.st-sh .lg-q{ width:100%; height:40px; }
.st-count{
  padding:0 16px 10px; font-size:12px; color:var(--mute);
  text-transform:uppercase; letter-spacing:.4px; font-weight:600;
}
.st-list{ max-height:min(62vh, 620px); overflow-y:auto; padding:0 8px 10px; }
.st-none{ padding:18px 16px; font-size:13.5px; color:var(--mute); line-height:1.6; }

.st-row{
  display:flex; gap:11px; align-items:center; width:100%;
  padding:9px 10px; margin-bottom:2px;
  border:0; border-radius:14px; background:none; cursor:pointer;
  text-align:start; color:var(--ink); font:inherit;
}
.st-row:hover{ background:var(--soft); }
.st-row.on{ background:var(--ink); color:var(--card); }
.st-row.on .st-rt small{ color:rgba(255,255,255,.66); }
.st-row .lg-badge{ width:38px; height:38px; border-radius:11px; flex:0 0 38px; }
.st-rt{ min-width:0; flex:1; }
.st-rt b{ display:block; font-size:14px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.st-rt small{ display:block; font-size:11.5px; color:var(--mute); margin-top:1px; }
.st-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); flex:0 0 7px; }

.st-main{
  border:1px solid var(--line); border-radius:22px;
  background:var(--card); padding:20px 22px 26px; min-height:440px;
}
.st-empty{
  display:grid; place-items:center; text-align:center;
  padding:62px 20px; gap:10px;
}
.st-ic{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--soft); color:var(--mute); margin-bottom:4px;
}
.st-ic svg{ width:26px; height:26px; }
.st-empty b{ font-size:17px; }
.st-empty p{ margin:0; font-size:14px; line-height:1.6; color:var(--mute); max-width:430px; }
.st-empty .btn{ margin-top:8px; }
.st-empty .btn svg{ width:15px; height:15px; margin-inline-end:7px; }

.st-eh{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding-bottom:16px;
}
.st-back{
  display:none; width:36px; height:36px; flex:0 0 36px;
  border:1px solid var(--line); border-radius:50%; background:var(--card);
  color:var(--ink); cursor:pointer; place-items:center;
}
.st-back svg{ width:17px; height:17px; }
.st-eh .lg-badge{ width:48px; height:48px; border-radius:14px; flex:0 0 48px; }
.st-eid{ flex:1 1 140px; min-width:0; }
.st-eid b{ display:block; font-size:20px; letter-spacing:-.3px; }
.st-eid small{ display:block; font-size:12.5px; color:var(--mute); margin-top:2px; }
.st-eact{ display:flex; gap:8px; flex-wrap:wrap; }
.st-eact .btn{ height:38px; padding:0 14px; font-size:13.5px; }

.ks-tabs .bp-tab{ display:inline-flex; align-items:center; gap:7px; }
.st-n{
  display:inline-grid; place-items:center; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px;
  background:var(--soft); color:var(--mute);
  font-size:11px; font-weight:700; line-height:1;
}
.bp-tab.on .st-n{ background:var(--brand); color:#101114; }

@media (max-width:980px){
  .st-grid{ grid-template-columns:minmax(0, 1fr); }
  .st-side{ position:static; }
  .st-list{ max-height:320px; }
  /* une page ouverte : l'editeur seul, avec sa fleche retour */
  .st-grid.is-open .st-side{ display:none; }
  .st-grid.is-open .st-back{ display:grid; }
}
@media (max-width:640px){
  .st-main{ padding:16px 14px 22px; border-radius:18px; }
  .st-eact{ width:100%; }
  .st-eact .btn{ flex:1; }
}

/* ===================== 52. BARRE DU HAUT, LARGEURS INTERMEDIAIRES =========
   Entre 900 et 1100 px, la barre du haut depassait a droite : la
   categorie et la langue tenaient encore, mais plus la recherche.     */
.topbar{ min-width:0; }
.tb-search{ min-width:0; }
.tb-right{ min-width:0; flex-shrink:0; }
@media (max-width:1100px){
  .tb-cat{ display:none; }
}
@media (max-width:1000px){
  .tb-lang{ display:none; }
}
@media (max-width:960px){
  .tb-user .who{ display:none; }
}

/* le detail de lecture d'un import : ce qui s'est vraiment passe */
.kf-log{
  margin-top:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--soft);
  max-height:190px; overflow-y:auto;
}
.kf-log b{
  display:block; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.4px; color:var(--mute); margin-bottom:8px;
}
.kf-log span{
  display:block; font-size:12px; line-height:1.55; color:var(--ink-2);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break:break-all; margin-bottom:3px;
}

/* modifier une vignette deposee : prix, nom, lien... */
.kt-e{
  position:absolute; top:8px; left:8px;
  width:30px; height:30px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(16,17,20,.72); color:#fff;
}
.kt-e:hover{ background:var(--brand); color:#101114; }
.kt-e svg{ width:14px; height:14px; }
.kt-p{
  cursor:pointer; border-bottom:1px dashed transparent;
}
.kt-p:hover{ border-bottom-color:var(--mute); }
.kt-p.is-0{ color:#c0392b; font-weight:600; }

/* ===================== 53. IMPORT DEPUIS LE NAVIGATEUR ===================
   Quand l'enseigne refuse le serveur, la grille se lit dans le navigateur
   de l'utilisateur, qui lui a le droit d'ouvrir la page.              */
.kn-step{
  padding:12px 14px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:16px; background:var(--soft);
}
.kn-step b{ display:block; font-size:13.5px; margin-bottom:4px; }
.kn-step span{ display:block; font-size:13px; line-height:1.55; color:var(--mute); }
.kn-bm{
  display:inline-block; margin-top:10px;
  padding:10px 18px; border-radius:999px;
  background:#101114; color:#ffffff;
  border:2px dashed var(--brand);
  font-size:13.5px; font-weight:600; text-decoration:none;
  cursor:grab; user-select:none;
}
.kn-bm:active{ cursor:grabbing; }
.kn-ta{
  width:100%; box-sizing:border-box; margin-top:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; line-height:1.5; resize:vertical;
}
.kn-ta:focus{ outline:none; border-color:var(--brand); }

/* ===================== 54. VIDEO DE GARDE ET RETRAITS ====================
   Choisir la video qui ouvre la page, et retirer ce qui arrive des
   sources automatiques.                                              */
.ks-hero{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:14px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:20px; background:var(--card);
}
.ks-ht{
  width:128px; height:72px; flex:0 0 128px;
  border-radius:12px; overflow:hidden; background:var(--soft);
  display:grid; place-items:center; color:var(--mute);
}
.ks-ht img{ width:100%; height:100%; object-fit:cover; }
.ks-ht svg{ width:26px; height:26px; }
.ks-hact{ display:flex; gap:8px; margin-inline-start:auto; flex-wrap:wrap; }
.ks-hact .btn{ height:38px; padding:0 14px; font-size:13.5px; }

.ks-masq{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-top:20px; padding:14px;
  border:1px dashed var(--line-2); border-radius:18px;
}
.ks-masq b{ display:block; font-size:14px; }
.ks-masq span{ display:block; font-size:12.5px; color:var(--mute);
  line-height:1.5; margin-top:3px; max-width:520px; }
.ks-masq .btn{ margin-inline-start:auto; height:38px; padding:0 14px; font-size:13.5px; }

/* le mode modification de la page de marque */
.bp-edit{
  width:40px; height:40px; flex:0 0 40px;
  border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer;
  margin-inline-end:8px;
}
.bp-edit svg{ width:16px; height:16px; }
.bp-edit:hover{ background:var(--surface-2); color:var(--ink); }
.bp-edit.on{ background:var(--ink); border-color:var(--ink); color:var(--brand); }

.bp-grid.is-edit > *{ position:relative; }
.bp-grid.is-edit > *::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--brand); pointer-events:none; opacity:.55;
}
.bp-x{
  position:absolute; top:8px; inset-inline-start:8px; z-index:4;
  width:30px; height:30px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(16,17,20,.78); color:#fff;
}
.bp-x:hover{ background:#c0392b; }
.bp-x svg{ width:15px; height:15px; }

@media (max-width:640px){
  .ks-hero{ gap:12px; }
  .ks-hact{ margin-inline-start:0; width:100%; }
  .ks-hact .btn{ flex:1; }
  .ks-masq .btn{ margin-inline-start:0; width:100%; }
}

/* ===================== 55. AUDIENCE CUMULEE ==============================
   Le total des abonnes, plateforme par plateforme, renseigne a la main
   et additionne. Rien n'est extrapole.                               */
.ks-aud-tot{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  padding:16px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:20px; background:var(--card);
}
.ks-aud-tot b{ display:block; font-size:24px; letter-spacing:-.6px; line-height:1.1; }
.ks-aud-tot span{ display:block; font-size:12.5px; color:var(--mute); margin-top:3px; }

.ks-aud{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.ks-af{ display:block; }
.ks-af.is-w{ grid-column:1/-1; }
.ks-af > span{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--mute); margin-bottom:5px;
}
.ks-af input{
  width:100%; box-sizing:border-box;
  padding:11px 13px; border:1px solid var(--line); border-radius:13px;
  background:var(--soft); color:var(--ink);
  font:inherit; font-size:15px;
}
.ks-af input:focus{ outline:none; border-color:var(--brand); background:var(--card); }

.bp-stats[data-bp-aud]{ cursor:pointer; border-radius:14px; }
.bp-stats[data-bp-aud]:hover{ background:var(--surface); }
.bp-stats.is-real b{ color:var(--ink); }

/* le repli quand le glisse-depose ne marche pas */
.kn-alt{
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--line-2);
}
.kn-alt b{ display:block; font-size:12.5px; margin-bottom:3px; }
.kn-alt span{ display:block; font-size:12.5px; line-height:1.55; color:var(--mute); }
.kn-alt .btn{ margin-top:9px; height:36px; padding:0 14px; font-size:13px; }

/* ===================== 56. VIDEO DE GARDE, DEPUIS LA PAGE ================
   En mode modification, la grande video du haut porte ses commandes.  */
.bp-video{ position:relative; }
.bp-hero-edit{
  position:absolute; inset-inline-start:12px; bottom:12px; z-index:6;
  display:flex; gap:8px; flex-wrap:wrap; max-width:calc(100% - 24px);
}
.bp-he-b{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 14px; border:0; border-radius:999px;
  background:rgba(16,17,20,.82); color:#fff; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600;
  backdrop-filter:blur(6px);
}
.bp-he-b:hover{ background:#101114; }
.bp-he-b.is-x:hover{ background:#c0392b; }
.bp-he-b svg{ width:15px; height:15px; }
@media (max-width:640px){
  .bp-hero-edit{ inset-inline-start:8px; bottom:8px; gap:6px; }
  .bp-he-b{ height:32px; padding:0 11px; font-size:12px; }
}

/* la vue active doit se voir d'un coup d'oeil : on cliquait sur la grille
   deja active en attendant qu'il se passe quelque chose */
.asp-viewtog button{ transition:background .14s, color .14s; }
.asp-viewtog button.on{
  background:var(--ink); color:var(--brand);
}
.asp-viewtog button:not(.on):hover{ background:var(--surface-2); color:var(--ink); }

/* ---- vue liste des fiches produit : une vraie ligne de tableau --------
   .bpr est un bloc, pas un flex : la regle « flex-direction:row » n'avait
   aucun effet et la ligne se disloquait - nom absent, marque au milieu,
   bouton coupe en bas. On redefinit la ligne entiere. */
.bp-grid.as-list .bpr{
  display:grid;
  grid-template-columns:76px minmax(0, 1fr);
  align-items:center;
  gap:16px;
  height:auto;
  min-height:96px;
  padding:10px 16px 10px 10px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
}
.bp-grid.as-list .bpr .ph{
  width:76px; height:76px; aspect-ratio:1;
  border-radius:12px; overflow:hidden; flex:none;
}
.bp-grid.as-list .bpr .ph img{ padding:8%; }
/* trop serre en ligne : la pastille et le coeur restent a la grille */
.bp-grid.as-list .bpr .new{ display:none; }
.bp-grid.as-list .bpr .fav{ top:auto; inset-inline-end:auto; position:static; display:none; }

.bp-grid.as-list .bpr .bd{
  /* .bp-grid .bpr .bd impose flex-direction:column pour la grille :
     sans le redire ici, la ligne restait empilee et « LACOSTE »
     s'ecrivait une lettre par ligne. */
  display:flex; flex-direction:row; align-items:center; gap:18px;
  flex:1 1 auto; padding:0; min-width:0; position:static;
}
.bp-grid.as-list .bpr .br{
  flex:0 0 108px; font-size:11.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bp-grid.as-list .bpr .nm{
  flex:1 1 auto; min-width:0; margin:0; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bp-grid.as-list .bpr .ct{ display:none; }
.bp-grid.as-list .bpr .pz{
  flex:0 0 auto; margin:0; font-size:16px; text-align:end; min-width:82px;
}
.bp-grid.as-list .bpr .add{
  position:static; flex:0 0 38px; margin-inline-start:4px;
}

@media (max-width:640px){
  .bp-grid.as-list .bpr{ grid-template-columns:60px minmax(0, 1fr); gap:12px;
    min-height:80px; padding:8px 12px 8px 8px; }
  .bp-grid.as-list .bpr .ph{ width:60px; height:60px; }
  .bp-grid.as-list .bpr .bd{ gap:10px; }
  .bp-grid.as-list .bpr .br{ display:none; }
  .bp-grid.as-list .bpr .pz{ min-width:64px; font-size:14.5px; }
  .bp-grid.as-list .bpr .add{ flex:0 0 32px; width:32px; height:32px; }
}


/* une vignette dont l'image ne charge pas, dans le studio : on le dit au
   lieu d'afficher un cadre vide (un lien de profil colle par erreur) */
.kt-th{ position:relative; }
.kt-th::before{
  content:''; position:absolute; inset:0;
  background:var(--soft);
  background-image:linear-gradient(135deg, transparent 46%, var(--line-2) 46%,
    var(--line-2) 54%, transparent 54%);
  background-size:14px 14px; opacity:.5; z-index:0;
}
.kt-th img{ position:relative; z-index:1; }


/* ===================== 57. PLACER LES ELEMENTS ===========================
   Retirer ne suffit pas : il faut pouvoir mettre une photo ou une video
   devant les autres. Deux commandes pour la meme chose, parce qu'elles ne
   servent pas dans les memes conditions : les fleches, qui marchent au
   doigt comme au clavier, et le glisser-deposer a la souris.
   Le numero affiche le rang : c'est lui qu'Arnaud lit pour verifier que
   la vignette est bien passee devant.                                  */

/* --- dans le Page Studio --- */
.kt-mv{
  position:absolute; inset-inline:8px; bottom:8px; z-index:3;
  display:flex; align-items:center; gap:4px;
  padding:4px; border-radius:999px;
  background:rgba(16,17,20,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .16s ease;
}
.kt:hover .kt-mv, .kt:focus-within .kt-mv{ opacity:1; }
@media (hover:none){ .kt-mv{ opacity:1; } }
.kt-m{
  width:26px; height:26px; flex:0 0 26px;
  border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:transparent; color:#fff;
}
.kt-m:hover:not(:disabled){ background:var(--brand); color:#101114; }
.kt-m:disabled{ opacity:.3; cursor:default; }
.kt-m svg{ width:13px; height:13px; }
.kt-n{
  margin-inline-start:auto; padding:0 8px;
  font-size:12px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
}
/* l'image ne doit pas partir seule : c'est la vignette entiere qu'on glisse */
.kt img, .kt-th img{ -webkit-user-drag:none; user-select:none; }
.kt[draggable="true"]{ cursor:grab; }
.kt.is-drag{ opacity:.45; cursor:grabbing; }

/* --- les liens, en liste --- */
.lg-mv{ display:flex; flex-direction:column; gap:2px; margin-inline-end:4px; }
.lg-mv button{
  width:24px; height:20px; border:0; border-radius:6px; cursor:pointer;
  display:grid; place-items:center;
  background:transparent; color:var(--mute);
}
.lg-mv button:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); }
.lg-mv button:disabled{ opacity:.25; cursor:default; }
.lg-mv button svg{ width:12px; height:12px; transform:rotate(90deg); }

/* --- sur la page de la marque, en mode modification --- */
.bp-mv{
  position:absolute; inset-inline:8px; bottom:8px; z-index:5;
  display:flex; align-items:center; gap:2px;
  padding:4px; border-radius:999px;
  background:rgba(16,17,20,.80);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.bp-mv button{
  width:26px; height:26px; flex:0 0 26px;
  border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:transparent; color:#fff;
}
.bp-mv button:hover:not(:disabled){ background:var(--brand); color:#101114; }
.bp-mv button:disabled{ opacity:.3; cursor:default; }
.bp-mv button svg{ width:13px; height:13px; }
.bp-n{
  margin-inline-start:auto; padding:0 8px;
  font-size:12px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
}
.bp-grid.is-edit > *{ cursor:grab; }
.bp-grid.is-edit img{ -webkit-user-drag:none; }
.bp-grid.is-edit > *.is-drag{ opacity:.45; cursor:grabbing; }

/* en vue liste la barre reste sur une ligne, a droite du libelle */
.bp-grid.as-list.is-edit .bp-mv{
  inset-inline:auto; inset-inline-end:46px; bottom:auto; top:50%;
  transform:translateY(-50%);
}
.bp-grid.as-list.is-edit .bp-n{ display:none; }

@media (max-width:640px){
  .kt-mv, .bp-mv{ inset-inline:6px; bottom:6px; gap:0; padding:3px; }
  .kt-m, .bp-mv button{ width:24px; height:24px; flex:0 0 24px; }
  .kt-n, .bp-n{ padding:0 6px; font-size:11px; }
  .bp-grid.as-list.is-edit .bp-mv{ inset-inline-end:40px; }
}

/* La croix et le crayon du studio passaient sous la photo : l'image porte
   un z-index depuis le voile des vignettes sans visuel (section 56), les
   deux boutons n'en avaient aucun. Ils etaient donc affiches derriere, et
   un clic ne les atteignait jamais. */
.kt-x, .kt-e, .kt-play{ z-index:3; }

/* Sous 1100 px, toute la barre de droite disparaissait : plus de tri, plus
   de bascule grille/liste, et surtout plus de crayon, donc aucun moyen de
   modifier la page depuis une tablette ou un telephone. On la remet, sur
   sa propre ligne au lieu d'etre posee en absolu sur les onglets. */
@media (max-width:1280px){
  .bp-tabs{flex-wrap:wrap; gap:10px}
  .bp-tabs .tabs{margin-inline:0; flex:1 1 100%}
  .bp-sort{display:flex; position:static; inset-inline-end:auto; top:auto;
    flex:1 1 100%; justify-content:flex-end; flex-wrap:wrap; padding-bottom:4px}
}


/* ===================== 58. UNE VIDEO HEBERGEE AILLEURS ===================
   Netflix, Prime Video, Disney+, france.tv, TF1+ : toutes repondent
   X-Frame-Options et refusent d'etre lues a l'interieur d'un autre site.
   Un iframe resterait noir. On montre donc l'affiche publiee par la
   plateforme et un bouton qui y mene : le clic ouvre la plateforme dans
   le meme onglet, la fleche retour du navigateur ramene ici.          */
.bv-ext{
  position:absolute; inset:0; display:block; cursor:pointer;
  background:#0d0e11; overflow:hidden;
}
.bv-ext img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.72; transition:opacity .25s var(--ease), transform .5s var(--ease);
}
.bv-ext:hover img{ opacity:.85; transform:scale(1.03); }
.bv-ext-b{
  position:absolute; inset-inline-start:50%; top:50%;
  transform:translate(-50%, -50%);
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  background:var(--brand); color:#101114;
  font-size:14.5px; font-weight:700; white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
[dir="rtl"] .bv-ext-b{ transform:translate(50%, -50%); }
.bv-ext-b svg{ width:15px; height:15px; }
.bv-ext:hover .bv-ext-b{ background:#cdff4a; }

/* la vignette d'une vidéo externe dans la grille : le cartouche reste
   lisible même sans affiche */
.bv.is-ext-card .pl{ opacity:.9; }


/* ===================== 59. UNE VIDEO SANS AFFICHE ========================
   Netflix, Prime Video et les autres refusent souvent la lecture depuis un
   serveur : l'affiche ne peut pas etre recuperee et la vignette restait
   vide, sans un mot. On le dit, et on donne les deux moyens de la mettre :
   une image de l'ordinateur (qui marche toujours) ou une nouvelle
   tentative de lecture.                                              */
.kt-noaff{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:14px 12px 46px; text-align:center;
}
/* la surface entiere ouvre le choix d'une image : c'est le geste attendu
   quand on voit un cadre vide */
.kt-drop{ position:absolute; inset:0; z-index:1; cursor:pointer; }
.kt-noaff b, .kt-noaff small{ position:relative; z-index:2; pointer-events:none; }
.kt-noaff b{ font-size:13px; font-weight:600; color:var(--ink-2); }
.kt-noaff small{ font-size:11px; color:var(--mute); }
.kt-up, .kt-uplab{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 13px; border:1px solid var(--line);
  border-radius:999px; background:var(--card); color:var(--ink);
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  max-width:100%; position:relative; z-index:2;
}
.kt-uplab{ background:var(--ink); border-color:var(--ink); color:var(--brand);
  pointer-events:none; }
.kt-up{ z-index:3; }
.kt-up:hover{ background:var(--ink); border-color:var(--ink); color:var(--brand); }
.kt-th.is-over{ outline:2px dashed var(--brand); outline-offset:-4px; }

/* déposer l'affiche d'une vidéo depuis la page de la marque, en
   modification : le même geste qu'au studio, sans changer d'écran */
.bp-aff{
  position:absolute; top:8px; inset-inline-end:46px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:999px; cursor:pointer;
  background:rgba(16,17,20,.82); color:#fff;
  font-size:12px; font-weight:600;
}
.bp-aff:hover{ background:var(--brand); color:#101114; }
.bp-aff svg{ width:14px; height:14px; }
@media (max-width:640px){
  .bp-aff span{ display:none; }
  .bp-aff{ padding:0 9px; inset-inline-end:44px; }
}


/* ===================== 60. L'ONGLET LIVE ================================
   Un live n'est pas une video : il a une heure. La pastille rouge n'est
   posee que sur une diffusion REELLEMENT en cours, confirmee par la
   plateforme ou par l'heure programmee. Avant, c'est « A venir » ; apres,
   c'est un replay. Rien n'est annonce en direct sans l'etre.         */
.lv-badge{
  position:absolute; top:10px; inset-inline-start:10px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.03em;
  background:rgba(16,17,20,.78); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lv-badge.is-direct{ background:#e0202f; }
.lv-badge.is-avenir{ background:rgba(16,17,20,.82); font-weight:700; letter-spacing:0; }
.lv-badge.is-replay{ background:rgba(16,17,20,.62); font-weight:700; letter-spacing:0; }
.lv-badge i{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:lvPulse 1.4s ease-in-out infinite;
}
@keyframes lvPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion:reduce){ .lv-badge i{ animation:none; } }

/* l'etiquette d'etat sous la vignette du studio */
.kt-lv{ display:block; font-size:12px; font-weight:600; margin-top:2px; }
.kt-lv.is-direct{ color:#e0202f; }
.kt-lv.is-avenir{ color:var(--ink-2); }
.kt-lv.is-replay, .kt-lv.is-sans{ color:var(--mute); font-weight:500; }

/* la pastille de source « En direct » */
.bp-live .src[data-bpsrc="live"].ok i{ background:#e0202f; }
.lv-badge{ max-width:calc(100% - 20px); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }


/* ===================== 61. QUI GERE LA PAGE =============================
   Deux cas, deux couleurs, et c'est le badge a cote du nom de la marque
   qui le dit :
     bleu  -> page officielle ouverte et tenue a jour par Skoleom
     vert  -> la marque gere elle-meme sa page
   Les deux sont des pages verifiees : la couleur dit l'auteur, pas le
   niveau de confiance.                                                */
/* la regle de la page de marque porte deja deux classes et un element :
   on la surclasse explicitement, sinon le vert ne passait pas. */
.vf.is-skoleom, .bp-id h1 .vf.is-skoleom, .asp-id h3 .vf.is-skoleom{ color:#1d9bf0; }
.vf.is-marque,  .bp-id h1 .vf.is-marque,  .asp-id h3 .vf.is-marque { color:#12a150; }

.ks-stat{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:14px 16px; margin:0 0 6px;
  border:1px solid var(--line); border-radius:16px; background:var(--soft);
}
.ks-stat-t{ flex:1 1 220px; min-width:0; }
.ks-stat-t b{ display:block; font-size:14px; }
.ks-stat-t span{ display:block; font-size:12.5px; color:var(--mute); margin-top:2px; }
.ks-stat-c{ display:flex; flex-wrap:wrap; gap:10px; }
.ks-st{
  display:inline-flex; align-items:center; gap:10px; text-align:start;
  padding:10px 14px; border:1.5px solid var(--line); border-radius:14px;
  background:var(--card); cursor:pointer; font:inherit; color:var(--ink);
  max-width:300px;
}
.ks-st:hover{ border-color:var(--ink-3); }
.ks-st .vf{ width:22px; height:22px; flex:none; }
.ks-st b{ display:block; font-size:13.5px; font-weight:600; }
.ks-st small{ display:block; font-size:11.5px; color:var(--mute); margin-top:1px; }
.ks-st.on.is-bleu{ border-color:#1d9bf0; box-shadow:0 0 0 3px rgba(29,155,240,.14); }
.ks-st.on.is-vert{ border-color:#12a150; box-shadow:0 0 0 3px rgba(18,161,80,.14); }

.st-dot.is-skoleom{ background:#1d9bf0; }
.st-dot.is-marque { background:#12a150; }

@media (max-width:640px){
  .ks-stat{ flex-direction:column; align-items:stretch; }
  .ks-stat-c{ flex-direction:column; }
  .ks-st{ max-width:none; }
}


/* ===================== 62. L'ACCUEIL PUBLIC, D'APRES LA MAQUETTE =========
   Reprise fidele du PDF : la photo occupe tout le cadre, le voile ne
   fonce que la gauche pour garder les couleurs de l'image, la barre de
   recherche est centree, et les trois reperes sont places comme sur la
   maquette (Regarde a gauche, Trouve et Achete a droite).
   Le fond accepte aussi une video : meme cadre, meme voile.        */
.hero{ --voile:.24; }
.hero.has-bg{ background:#0e1430; }
video.hero-bg{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* le voile suit le reglage du studio ; il s'efface vers la droite */
.hero.has-bg::after{
  background:linear-gradient(100deg,
    rgba(8,14,32, calc(var(--voile) * 2.1)) 0%,
    rgba(8,14,32, calc(var(--voile) * 1.1)) 38%,
    rgba(8,14,32, calc(var(--voile) * .35)) 66%,
    transparent 88%);
}

/* la barre de recherche : centree dans le cadre, comme sur la maquette */
.hero > .hero-search{
  position:relative; z-index:2; width:min(660px, 48%);
  margin:6px auto 0; min-width:340px;
}
.hero-in{ padding-bottom:6px; }

/* Regarde a gauche, Trouve et Achete a droite */
.hero-steps{ justify-content:space-between; align-items:flex-start; }
.hs-duo{ display:flex; gap:clamp(18px, 4vw, 58px); }

/* la ligne des plateformes : icones puis noms, separes par un trait */
.hero-plats{ gap:26px; padding-top:22px; }
.hp-ico{ color:#fff; display:grid; place-items:center; opacity:.95; }
.hp-ico svg{ width:22px; height:22px; }
.hp-lab{
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em; opacity:.95;
}

/* la phrase sous le bandeau de chiffres */
.trust-note{
  margin:14px 2px 0; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:820px;
}

@media (max-width:900px){
  .hero > .hero-search{ width:auto; min-width:0; margin-inline:34px; }
  .hero-steps{ flex-direction:column; gap:18px; }
  .hs-duo{ flex-direction:column; gap:18px; }
  .hero-plats{ gap:16px; }
  .hp-lab{ font-size:12px; }
  .hp-ico svg{ width:19px; height:19px; }
}


/* ===================== 63. L'EDITEUR DE LA PAGE D'ACCUEIL ===============
   Meme grammaire que l'editeur d'une marque : des blocs, pas de
   formulaire fleuve.                                                 */
.st-row.st-home .lg-badge{ background:var(--ink); }
.st-row.st-home .lg-badge img{ width:22px; height:22px; object-fit:contain; }

.ks-fond{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--soft);
  margin-bottom:14px;
}
.ks-fo-ap{
  width:190px; height:106px; flex:none; border-radius:12px; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center; color:var(--mute);
  border:1px solid var(--line);
}
.ks-fo-ap img, .ks-fo-ap video{ width:100%; height:100%; object-fit:cover; display:block; }

.ks-reg{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  padding:14px 16px; border:1px solid var(--line); border-radius:16px;
  background:var(--card); margin:12px 0;
}
.ks-reg .ks-af{ flex:1 1 220px; }

.ks-bloc{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); margin-bottom:10px;
}
.ks-bloc b{ flex:0 0 190px; font-size:13.5px; }
.ks-bloc p{ flex:1 1 260px; margin:0; font-size:13px; color:var(--ink-2); line-height:1.5; }
.ks-bloc i{ color:var(--mute); font-style:normal; }
.ks-bloc .btn{ margin-inline-start:auto; }

.lg-badge.lg-noir{
  background:var(--ink); color:#fff; font-weight:700; font-size:13px;
  display:grid; place-items:center;
}
.lg-badge.lg-noir img{ width:26px; height:26px; object-fit:contain; }
.lg-badge.lg-noir svg{ width:20px; height:20px; }

@media (max-width:640px){
  .ks-bloc b{ flex:1 1 100%; }
  .ks-bloc .btn{ margin-inline-start:0; width:100%; }
  .ks-fo-ap{ width:100%; height:150px; }
}


/* ===================== 64. UNE LIGNE AVEC SES FLECHES ===================
   .lg-row est une grille de trois colonnes. Depuis que les fleches de
   deplacement ont ete ajoutees, la ligne comptait quatre enfants pour
   trois colonnes : les boutons d'action passaient a la ligne, sous les
   fleches, et devenaient presque impossibles a atteindre. Une ligne qui
   porte des fleches declare donc sa quatrieme colonne.          */
.lg-row.has-mv{ grid-template-columns:28px 56px minmax(0,1fr) auto; }
@media (max-width:720px){
  .lg-row.has-mv{ grid-template-columns:28px 48px minmax(0,1fr); }
  .lg-row.has-mv .lg-act{ grid-column:1 / -1; justify-content:flex-start; }
}

/* ==================== 65. PAGE DES FORMATS (v6.3) ======================= */
/* Trois grosses cartes d'abord : ou le contenu part. Le detail technique
   des cinq formats reste replie derriere « Voir plus de formats », pour ne
   pas noyer une marque qui decouvre le produit. */

.fmt-hero{ padding:26px 0 8px; max-width:720px }
.fmt-hero h1{
  font-family:var(--display); font-size:clamp(30px,5.4vw,50px); line-height:1.02;
  letter-spacing:-.5px; margin:0 0 10px; text-transform:uppercase;
}
.fmt-hero p{ margin:0; color:var(--ink-2); font-size:16px; line-height:1.55 }

.canaux{
  display:grid; gap:18px; margin:26px 0 8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1040px){ .canaux{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:660px){  .canaux{ grid-template-columns:minmax(0,1fr) } }

.canal{
  display:flex; flex-direction:column; gap:16px; min-width:0;
  padding:20px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.canal:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px) }
.canal.c-rose{ background:linear-gradient(170deg,#fff0f7,#ffe4f1); border-color:#fbd3e6 }
.canal.c-bleu{ background:linear-gradient(170deg,#eff5ff,#e1ecff); border-color:#cfe0fb }
.canal.c-vert{ background:linear-gradient(170deg,#f4fde4,#e9f9cd); border-color:#d8f0b0 }
:root[data-theme="dark"] .canal.c-rose{ background:linear-gradient(170deg,#241520,#1b1018); border-color:#3a2030 }
:root[data-theme="dark"] .canal.c-bleu{ background:linear-gradient(170deg,#121a28,#0f1420); border-color:#1f2c44 }
:root[data-theme="dark"] .canal.c-vert{ background:linear-gradient(170deg,#18200f,#12180a); border-color:#2a3718 }

.canal-h{ display:flex; gap:12px; align-items:flex-start; min-width:0 }
.canal-h > div{ min-width:0 }
.canal-h b{ display:block; font-size:17px; font-weight:700; line-height:1.25 }
.canal-h span{ display:block; margin-top:2px; font-size:13px; color:var(--ink-2); line-height:1.45 }
.canal-i{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; background:var(--bg); color:var(--ink);
  box-shadow:var(--shadow-1);
}
.canal-i svg{ width:20px; height:20px }
.canal-go{ width:100%; justify-content:center; margin-top:auto }
.canal-go svg{ width:16px; height:16px }

/* ---- les maquettes : de vraies petites interfaces, pas des captures ---- */
.mq{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:#0c0d10; box-shadow:var(--shadow-1);
}
.mq > img{ width:100%; height:100%; object-fit:cover; display:block }
.mq svg{ width:15px; height:15px; flex:0 0 auto }

/* Les trois maquettes font la meme hauteur : sans cela le format vertical
   ecrasait les deux autres et la rangee partait de travers. */
.canal .mq{ height:300px }
.canal .mq-player, .canal .mq-site{ width:100% }

/* 1. vertical des reseaux */
.mq-phone{ aspect-ratio:9/14; width:auto; margin:0 auto; max-width:100% }
.mq-phone::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 46%);
}
.mq-side{
  position:absolute; right:8px; bottom:74px; z-index:2;
  display:flex; flex-direction:column; gap:12px; align-items:center; color:#fff;
}
.mq-side span{ display:flex; flex-direction:column; align-items:center; gap:2px }
.mq-side b{ font-size:9.5px; font-weight:600; opacity:.95 }
.mq-foot{
  position:absolute; left:10px; right:52px; bottom:10px; z-index:2; color:#fff;
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
}
.mq-foot b{ font-size:11.5px; font-weight:700 }
.mq-foot > span{ font-size:10.5px; opacity:.88; line-height:1.3 }
.mq-pill{
  display:inline-flex !important; align-items:center; gap:5px; margin-top:5px;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--brand-ink);
  font-size:10.5px; font-weight:700; opacity:1 !important;
}

/* 2. fiche produit par-dessus le lecteur */
.mq-player{ aspect-ratio:16/11 }
.mq-player > img{ height:100% }
.mq-card{
  position:absolute; right:9px; top:9px; z-index:2; width:44%; max-width:150px;
  padding:9px; border-radius:12px; background:rgba(255,255,255,.96);
  color:#101114; backdrop-filter:blur(8px); box-shadow:0 8px 22px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:4px;
}
.mq-card > img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px }
.mq-card b{ font-size:11.5px; font-weight:700; line-height:1.25 }
.mq-card > span{ font-size:11px; color:#5b5f68 }
.mq-x{
  position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; background:rgba(16,17,20,.55); color:#fff;
}
.mq-x svg{ width:9px; height:9px }
.mq-add{
  margin-top:2px; padding:5px 0; border-radius:var(--r-pill); text-align:center;
  background:var(--brand); color:var(--brand-ink); font-size:10.5px; font-weight:700;
}
.mq-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:8px; padding:8px 10px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));
}
.mq-bar small{ font-size:9.5px; opacity:.9; margin-left:auto; white-space:nowrap }
.mq-prog{
  flex:1 1 auto; height:3px; border-radius:2px;
  background:rgba(255,255,255,.34); overflow:hidden;
}
.mq-prog u{ display:block; width:32%; height:100%; background:var(--brand) }

/* 3. site de l'editeur */
.mq-site{
  aspect-ratio:16/11; background:var(--bg); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.mq-site .mq-body{ flex:1 1 auto }
.mq-chrome{
  display:flex; gap:4px; align-items:center; padding:7px 9px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.mq-chrome i{ width:6px; height:6px; border-radius:50%; background:var(--line-2) }
.mq-nav{
  display:flex; align-items:center; gap:9px; padding:7px 10px;
  border-bottom:1px solid var(--line); color:var(--ink-2); min-width:0;
}
.mq-nav b{ font-family:var(--display); font-size:12px; color:var(--ink); letter-spacing:.2px }
.mq-nav span{ font-size:9px; white-space:nowrap }
.mq-nav em{ display:grid; place-items:center; color:var(--ink) }
.mq-nav em:first-of-type{ margin-left:auto }
.mq-nav svg{ width:11px; height:11px }
.mq-body{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center;
  padding:12px 10px; min-width:0;
}
.mq-txt{ min-width:0 }
.mq-txt b{
  display:block; font-family:var(--display); font-size:clamp(14px,1.6vw,19px);
  line-height:1.05; text-transform:uppercase; letter-spacing:-.2px; color:var(--ink);
}
.mq-txt > span{ display:block; margin-top:5px; font-size:9.5px; color:var(--ink-2); line-height:1.4 }
.mq-cta{
  display:inline-block !important; margin-top:8px; padding:4px 11px;
  border-radius:var(--r-pill); background:var(--ink); color:var(--bg);
  font-size:9.5px; font-weight:700;
}
.mq-vis{ position:relative; min-width:0 }
.mq-vis img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px }
.mq-tag{
  position:absolute; left:6px; bottom:6px; right:6px;
  display:flex; align-items:center; gap:5px;
  padding:5px 7px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.95); color:#101114;
  box-shadow:0 4px 14px rgba(0,0,0,.18); min-width:0;
}
.mq-tag b{ font-size:9.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mq-tag > span{ font-size:9.5px; color:#5b5f68; margin-left:auto; white-space:nowrap }

/* ---- la rangee « tous les formats » + les puces ------------------------ */
.fmt-tous{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:34px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
.fmt-tous b{ font-family:var(--display); font-size:22px; text-transform:uppercase; letter-spacing:-.2px }
.fmt-plus{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--bg);
  font-size:13.5px; font-weight:600; transition:background .2s var(--ease);
}
.fmt-plus:hover{ background:var(--surface) }
.fmt-plus svg{ width:15px; height:15px }

.fmt-chips{ display:flex; gap:10px; flex-wrap:wrap }
.fmt-chip{
  display:flex; align-items:center; gap:9px; min-width:0;
  padding:10px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  text-align:left; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.fmt-chip:hover{ background:var(--surface-2) }
.fmt-chip.on{ border-color:var(--ink); background:var(--bg); box-shadow:var(--shadow-1) }
.fmt-chip svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ink-2) }
.fmt-chip.on svg{ color:var(--ink) }
.fmt-chip b{ display:block; font-size:13.5px; font-weight:600; line-height:1.2 }
.fmt-chip small{ display:block; font-size:11px; color:var(--ink-3) }

.fmt.is-vise{
  border-color:var(--ink); box-shadow:var(--shadow-2);
  scroll-margin-top:calc(var(--topbar) + 18px);
}
#fmt-detail{ scroll-margin-top:calc(var(--topbar) + 12px) }

/* ============ 66. LE CADRE D'OUVERTURE DE « CRÉER » (v6.4) ============== */
/* Repris au pixel de la maquette Figma « Créer une capsule » : fond blanc,
   titre en Poppins extra-gras, le visuel fourni pose a droite sans cadre de
   telephone, les trois cartes pastel et la rangee « Monetisez votre
   contenu ». Tout vient de creGet() : rien n'est code en dur. */

.cr-hero{
  position:relative; overflow:hidden; isolation:isolate;
  margin:10px 0 4px; padding:26px 26px 24px;
  border-radius:var(--r-xl); background:#fff;
}
:root[data-theme="dark"] .cr-hero{ background:var(--bg) }
.cr-hero.has-fond .cr-txt, .cr-hero.has-fond .cr-voir{ color:#fff }
.cr-hero.has-fond .cr-sub{ color:rgba(255,255,255,.88) }
.cr-hero.has-fond .cr-voir{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3) }
.cr-fond{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover }
.cr-voile{ position:absolute; inset:0; z-index:-1; background:#0c0d10 }

.cr-voir{
  position:absolute; top:18px; right:20px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 17px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--bg);
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-1);
}
.cr-voir svg{ width:15px; height:15px }

.cr-in{
  display:grid; gap:18px; align-items:center; min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
}
.cr-txt{ min-width:0; padding:8px 8px 8px 4px }
.cr-txt .crumbs{ text-transform:uppercase; letter-spacing:.15em; font-size:11px; margin-bottom:16px }
/* Poppins extra-gras, comme la maquette. Surtout pas Anton. */
.cr-txt h1{
  font-family:var(--ui); font-weight:800; margin:0 0 16px;
  font-size:clamp(32px,4.4vw,58px); line-height:1.02;
  letter-spacing:-.03em; text-transform:none;
}
.cr-sub{ margin:0 0 26px; font-size:16.5px; line-height:1.5; color:var(--ink-2); max-width:420px }
.cr-cta{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 28px; border-radius:var(--r-pill);
  background:#101114; color:#fff; font-size:15px; font-weight:600;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
:root[data-theme="dark"] .cr-cta{ background:var(--ink); color:var(--bg) }
.cr-cta:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2) }
.cr-cta svg{ width:17px; height:17px }

/* ---- le visuel : l'image ou la video, telle quelle ---- */
/* le bouton « Voir mes contenus » est pose en haut a droite : le visuel
   descend d'autant pour ne pas passer dessous */
.cr-vis{ position:relative; min-width:0; display:flex; justify-content:center; padding-top:34px }
.cr-media{
  width:100%; height:auto; max-height:430px; object-fit:contain;
  border-radius:var(--r-md); background:transparent;
}
.cr-script{
  position:absolute; right:6%; top:50%; transform:translateY(-50%) rotate(-4deg);
  display:flex; flex-direction:column; gap:2px; white-space:nowrap;
  font-family:'Segoe Script','Bradley Hand','Snell Roundhand',cursive;
  font-size:clamp(17px,1.8vw,26px); line-height:1.08; color:var(--ink-3);
}
.cr-hero.has-fond .cr-script{ color:rgba(255,255,255,.72) }
.cr-script i{ font-style:normal }

/* ---- les trois cartes d'action ---- */
.cr-cards{
  display:grid; gap:16px; margin-top:22px; position:relative; z-index:2;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cr-card{
  display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:14px; min-width:0;
  padding:18px; border-radius:var(--r-lg);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cr-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2) }
.cr-card.k-vert{   background:#e9f5ee }
.cr-card.k-violet{ background:#eeeafc }
.cr-card.k-peche{  background:#fbeee8 }
.cr-card.k-bleu{   background:#e8f1fd }
.cr-card.k-rose{   background:#fce9f3 }
:root[data-theme="dark"] .cr-card.k-vert{   background:#131d17 }
:root[data-theme="dark"] .cr-card.k-violet{ background:#171528 }
:root[data-theme="dark"] .cr-card.k-peche{  background:#231710 }
:root[data-theme="dark"] .cr-card.k-bleu{   background:#101827 }
:root[data-theme="dark"] .cr-card.k-rose{   background:#231320 }

.cr-cb{ display:flex; flex-direction:column; gap:6px; min-width:0 }
/* rond blanc pour les deux premieres, carre noir pour « Créer un post » */
.cr-ci{
  width:52px; height:52px; border-radius:50%; margin-bottom:10px;
  display:grid; place-items:center; background:#fff;
}
.cr-ci svg{ width:22px; height:22px }
.k-vert   .cr-ci{ color:#127a63 }
.k-violet .cr-ci{ color:#3a2bc4 }
.k-bleu   .cr-ci{ color:#1c62d6 }
.k-rose   .cr-ci{ color:#c4368c }
.k-peche  .cr-ci{ background:#101114; color:#fff; border-radius:15px; width:50px; height:50px }
:root[data-theme="dark"] .cr-ci{ background:#22262e }
:root[data-theme="dark"] .k-peche .cr-ci{ background:#f3f4f6; color:#101114 }

.cr-cb > b{ font-size:17px; font-weight:700; line-height:1.25; letter-spacing:-.01em }
.cr-cb > span{ font-size:13px; color:var(--ink-2); line-height:1.45 }
.cr-cgo{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 19px; border-radius:var(--r-pill);
  background:#fff; border:1px solid rgba(16,17,20,.06);
  font-size:13.5px; font-weight:600; box-shadow:0 1px 2px rgba(16,17,20,.05);
}
:root[data-theme="dark"] .cr-cgo{ background:#1c1f25; border-color:var(--line) }
.cr-cgo svg{ width:15px; height:15px }

.cr-cv{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:var(--surface-2); min-height:190px;
}
.cr-cv img, .cr-cv video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* la pile de photos defile en fondu : une seule est visible a la fois */
.cr-cv img{ opacity:0; transition:opacity .7s var(--ease) }
.cr-cv img.on, .cr-cv img:only-of-type{ opacity:1 }
.cr-cpile{
  position:absolute; top:8px; right:8px; z-index:2;
  width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:#101114;
}
.cr-cpile svg{ width:13px; height:13px }
.cr-cp{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:#101114;
}
.cr-cp svg{ width:12px; height:12px }
.cr-cl{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:#e8312f; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.05em;
}
.cr-cl svg{ width:9px; height:9px }

/* ---- la rangee « Monétisez votre contenu » ---- */
.cr-mon{ padding-top:10px }
.cr-mh{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:16px }
.cr-mh > div{ min-width:0 }
.cr-mh h2{
  margin:0 0 4px; font-family:var(--ui); font-weight:700;
  font-size:clamp(21px,2.2vw,26px); letter-spacing:-.02em; line-height:1.2;
}
.cr-mh p{ margin:0; color:var(--ink-2); font-size:14.5px }
.cr-mlink{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; white-space:nowrap;
}
.cr-mlink svg{ width:15px; height:15px }

.cr-outils{
  display:grid; gap:12px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.cr-outil{
  display:flex; gap:12px; align-items:flex-start; min-width:0;
  padding:16px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg);
}
.cr-outil > div{ min-width:0 }
.cr-outil b{ display:block; font-size:14.5px; font-weight:700; line-height:1.3 }
.cr-outil span{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-2); line-height:1.45 }
.cr-oi{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
}
.cr-oi svg{ width:19px; height:19px }
.cr-oi.o-violet{ background:#f3eafd; color:#8b2fd6 }
.cr-oi.o-ambre { background:#fdf3d9; color:#e0a41b }
.cr-oi.o-menthe{ background:#e2f6f1; color:#149a86 }
.cr-oi.o-lilas { background:#efeafd; color:#7a45e8 }
.cr-oi.o-indigo{ background:#eceafe; color:#3a2bc4 }
:root[data-theme="dark"] .cr-oi{ background:var(--surface-2) }

/* ---- les paliers ---- */
@media (max-width:1240px){ .cr-outils{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:980px){
  .cr-hero{ padding:22px 18px 20px }
  .cr-in{ grid-template-columns:minmax(0,1fr); gap:20px }
  .cr-voir{ position:static; margin-bottom:14px }
  .cr-vis{ padding-top:0 }
  .cr-media{ max-height:340px }
  .cr-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cr-outils{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .cr-hero{ padding:18px 14px 16px; border-radius:var(--r-lg) }
  .cr-cards{ grid-template-columns:minmax(0,1fr) }
  .cr-card{ grid-template-columns:minmax(0,1fr) 96px }
  .cr-cv{ min-height:170px }
  .cr-outils{ grid-template-columns:minmax(0,1fr) }
  .cr-mlink{ margin-left:0 }
}

/* la vignette d'une carte dans le Page Studio */
.lg-badge.lg-ph{ overflow:hidden }
.lg-badge.lg-ph img, .lg-badge.lg-ph video{ width:100%; height:100%; object-fit:cover }
.lg-badge .cr-oi{ width:100%; height:100%; border-radius:inherit }
.ks-fo-ap.ks-fo-l{ width:132px; height:auto; aspect-ratio:16/9 }