/* ============================================================
   TRUST AUGMENTED — one-page website
   ============================================================ */
:root{
  --bg:#F7F7F5;
  --bg-elev:#FFFFFF;
  --ink:#0D0D0C;
  --ink-2:#3A3A37;
  --muted:#83837C;
  --faint:#B4B4AD;
  --line:rgba(13,13,12,.11);
  --line-soft:rgba(13,13,12,.06);
  --accent:#F10C4F;
  --dock:#FF3C28;
  --palette:#FF49A0;
  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  --sect:clamp(96px,13vh,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* rayons d'arrondi — un seul endroit pour toute la page */
  --r-sm:10px;   /* petits éléments : pastilles, vignettes */
  --r-md:16px;   /* cartes et blocs de texte */
  --r-lg:26px;   /* grands panneaux : partenaire, contact */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:.10em; text-transform:uppercase}

/* ---------- background monogram (filigrane) ---------- */
.monogram{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; place-items:center; overflow:hidden;
}
.mono-stack{
  position:relative; width:min(58vh,40vw); aspect-ratio:175/211;
  transform:translate3d(0, calc(var(--mono-y,0) * 1px), 0) scale(var(--mono-s,1));
  will-change:transform;
}
.mono-stack img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.mono-stack .base{opacity:.020; filter:grayscale(1)}
/* the "inside" of the logotype is progressively revealed while scrolling */
.mono-stack .reveal{
  opacity:.042;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--p,0) * 128% - 16%),transparent calc(var(--p,0) * 128% + 10%),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--p,0) * 128% - 16%),transparent calc(var(--p,0) * 128% + 10%),transparent 100%);
}

/* ---------- nav ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
header.nav.solid{
  background:rgba(247,247,245,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav-in{display:flex; align-items:center; gap:28px; height:80px}
header.nav.solid .nav-in{height:72px}
.nav-logo{flex:none}
.nav-logo img{flex:none; height:44px; width:auto; transition:height .35s var(--ease)}
header.nav.solid .nav-logo img{height:36px}
.nav-links{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-links a{
  white-space:nowrap; font-size:13.5px; color:var(--ink-2); letter-spacing:-.005em;
  position:relative; padding:6px 0; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:999px; font-size:13.5px; font-weight:500;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  transition:background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn .arw{transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

.burger{display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--line);
  border-radius:999px; background:transparent; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){bottom:16px}
body.menu-open .burger span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  padding:120px var(--pad) 40px; display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.menu-open .mobile-menu{opacity:1; visibility:visible; transform:none}
.mobile-menu a{font-size:26px; letter-spacing:-.02em; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{margin-top:24px; align-self:flex-start; font-size:15px; padding:14px 24px}

/* ---------- hero ---------- */
.hero{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:112px; padding-bottom:76px}
.hero .eyebrow{color:var(--muted); margin-bottom:26px}
.hero h1{
  font-size:clamp(34px,4.15vw,60px); line-height:1.05; letter-spacing:-.034em;
  font-weight:400; margin:0; max-width:19ch;
}
.hero h1 .em{font-weight:600}
.hero h1 .accent{color:var(--accent)}
.hero p.lead{
  margin:26px 0 0; max-width:50ch; font-size:clamp(16px,1.22vw,18px);
  color:var(--ink-2); line-height:1.6;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  margin-top:clamp(32px,5vh,60px); border-top:1px solid var(--line);
}
.hero-stats div{padding:22px 24px 0 0; border-right:1px solid var(--line-soft)}
.hero-stats div:last-child{border-right:0}
.hero-stats .n{font-size:clamp(26px,3.2vw,42px); line-height:1; letter-spacing:-.035em; font-weight:500}
.hero-stats .l{color:var(--muted); font-size:13.5px; margin-top:8px; line-height:1.4}
.scroll-cue{position:absolute; left:var(--pad); bottom:26px; color:var(--faint); display:flex; align-items:center; gap:10px}
.scroll-cue .bar{width:2px; border-radius:999px; height:26px; background:linear-gradient(var(--faint),transparent); animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2); transform-origin:bottom}}

/* ---------- vidéo de fond de l'accueil ---------- */
.hero-video{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:min(100%,132vh); z-index:-1; overflow:hidden; pointer-events:none;
  opacity:var(--hero-video-op,.50);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
}
.hero-video video{width:100%; height:100%; object-fit:cover; display:block}
@media (prefers-reduced-motion:reduce){
  .hero-video{background:url("../images/backgrounds/hero-video-poster.jpg") center/cover no-repeat}
  .hero-video video{display:none}
}

.hero-in{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,56px); align-items:center}
.hero-visual{justify-self:end; width:100%; max-width:540px}
.hero-visual .ta{width:100%; height:auto; display:block; overflow:visible}

/* ============================================================
   CONSTRUCTION ANIMÉE DU MONOGRAMME  (.ta)
   Géométrie modulaire relevée sur la planche de construction :
     R = 215 (grand cercle) · r = 0,6 R = 129 · ρ = 0,4 R = 86
     C1 (0,129) r · C2 (215,344) R · C3 (215,344) ρ · C4 (430,430) r
   Un cycle de 18 s : la grille se trace, le contour s'en déduit,
   la marque se remplit, puis tout s'efface et l'on recommence.
   ============================================================ */
.ta{--ta-cycle:18s}
.ta-grid path{stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100; opacity:0}
.ta-outline path{stroke:var(--accent); stroke-width:2.2; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; opacity:0}
.ta-fill{opacity:0; transform:scaleY(0); transform-box:fill-box; transform-origin:50% 100%}
.ta-fill-l{fill:#0F0D0C}
.ta-fill-r{fill:#999490}

.ta-c1,.ta-c2,.ta-c3,.ta-c4,.ta-g1,.ta-g2,.ta-g3,
.ta-o1,.ta-o2,.ta-fill{animation-duration:var(--ta-cycle); animation-timing-function:linear;
  animation-iteration-count:infinite}
.ta-c1{animation-name:taC1}  .ta-c2{animation-name:taC2}
.ta-c3{animation-name:taC3}  .ta-c4{animation-name:taC4}
.ta-g1{animation-name:taG1}  .ta-g2{animation-name:taG2}  .ta-g3{animation-name:taG3}
.ta-o1{animation-name:taO1}  .ta-o2{animation-name:taO2}
.ta-fill-l{animation-name:taFillL}  .ta-fill-r{animation-name:taFillR}

/* 1 · la grille : apparaît, se trace, puis recule au rang de repère */
@keyframes taC1{0%{stroke-dashoffset:100;opacity:0}  1%{opacity:.30} 12%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.30} 52%,92%{opacity:.13} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taC2{0%{stroke-dashoffset:100;opacity:0}  3%{opacity:.30} 14%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.30} 52%,92%{opacity:.13} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taC3{0%{stroke-dashoffset:100;opacity:0}  6%{opacity:.30} 17%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.30} 52%,92%{opacity:.13} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taC4{0%{stroke-dashoffset:100;opacity:0}  8%{opacity:.30} 19%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.30} 52%,92%{opacity:.13} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taG1{0%{stroke-dashoffset:100;opacity:0} 11%{opacity:.26} 21%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.26} 52%,92%{opacity:.11} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taG2{0%{stroke-dashoffset:100;opacity:0} 14%{opacity:.26} 23%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.26} 52%,92%{opacity:.11} 99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taG3{0%{stroke-dashoffset:100;opacity:0} 16%{opacity:.26} 25%{stroke-dashoffset:0}
  44%{stroke-dashoffset:0;opacity:.26} 52%,92%{opacity:.11} 99%,100%{opacity:0;stroke-dashoffset:0}}

/* 2 · le contour résultant, tracé en accent */
@keyframes taO1{0%,26%{stroke-dashoffset:100;opacity:0} 28%{opacity:1} 41%{stroke-dashoffset:0}
  50%{stroke-dashoffset:0;opacity:1} 58%,92%{opacity:.32} 98%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes taO2{0%,29%{stroke-dashoffset:100;opacity:0} 31%{opacity:1} 44%{stroke-dashoffset:0}
  52%{stroke-dashoffset:0;opacity:1} 60%,92%{opacity:.32} 98%,100%{opacity:0;stroke-dashoffset:0}}

/* 3 · le remplissage monte depuis la ligne de pied */
@keyframes taFillL{0%,41%{opacity:0;transform:scaleY(0)} 42%{opacity:1}
  52%{transform:scaleY(1)} 92%{opacity:1;transform:scaleY(1)} 98%,100%{opacity:0;transform:scaleY(1)}}
@keyframes taFillR{0%,44%{opacity:0;transform:scaleY(0)} 45%{opacity:1}
  55%{transform:scaleY(1)} 92%{opacity:1;transform:scaleY(1)} 98%,100%{opacity:0;transform:scaleY(1)}}

/* animations réduites : on affiche directement la marque finie */
@media (prefers-reduced-motion:reduce){
  .ta-c1,.ta-c2,.ta-c3,.ta-c4,.ta-g1,.ta-g2,.ta-g3,.ta-o1,.ta-o2,.ta-fill{animation:none}
  .ta-grid path{stroke-dashoffset:0; opacity:.11}
  .ta-outline path{opacity:0}
  .ta-fill{opacity:1; transform:none}
}

/* ============================================================
   VISUELS DE FOND PAR SECTION
   Une image distincte par partie, dans images/backgrounds/ (2000x1250).
   Chaque image réserve une zone claire à gauche : c'est là que se pose
   le texte. Pour remplacer un fond, déposez votre photo dans ce dossier
   et changez l'URL ci-dessous (--bg-img) ; ajustez son intensité avec
   --bg-op (0 = invisible, 1 = pleine intensité).
   ============================================================ */
.hero::before,
section.band::before{
  content:""; position:absolute; top:0; z-index:-1; pointer-events:none;
  left:50%; width:100vw; transform:translateX(-50%);   /* pleine largeur, hors gouttière */
  height:min(100%, 132vh);   /* sur une section très haute, la photo coiffe le début
                                puis se fond dans le fond de page — évite un
                                agrandissement excessif de l'image */
  background-image:var(--bg-img); background-size:cover;
  background-position:center; background-repeat:no-repeat;
  opacity:var(--bg-op,.55);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 68%,transparent 100%);
}
.hero::before{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
}
#top             {--bg-img:url("../images/backgrounds/bg-hero.jpg");               --bg-op:0}
                 /* l'accueil est couvert par la vidéo ; passez --bg-op à .76
                    et supprimez .hero-video de index.html pour revenir à la photo */
#qui-sommes-nous {--bg-img:url("../images/backgrounds/bg-01-qui-sommes-nous.jpg"); --bg-op:1}
#revolution-ia   {--bg-img:url("../images/backgrounds/bg-02-revolution-ia.jpg");   --bg-op:1}
#offres          {--bg-img:url("../images/backgrounds/bg-03-offres.jpg");          --bg-op:1}
#partenaires     {--bg-img:url("../images/backgrounds/bg-04-partenaires.jpg");     --bg-op:1}
#actualites      {--bg-img:url("../images/backgrounds/bg-05-actualites.jpg");      --bg-op:1}
#contact         {--bg-op:0}   /* bloc sombre : pas de fond */

/* ---------- generic section ---------- */
main{position:relative; z-index:1}
section.band{padding-top:var(--sect); padding-bottom:var(--sect); position:relative; scroll-margin-top:80px}
section.band + section.band{padding-top:0}
.sec-head{display:flex; align-items:flex-start; gap:18px; margin-bottom:clamp(36px,5vw,64px);
  border-top:1px solid var(--line); padding-top:22px}
.sec-head .idx{color:var(--accent); flex:none; padding-top:.75em}
.sec-head h2{font-size:clamp(27px,3.4vw,46px); line-height:1.05; letter-spacing:-.032em; font-weight:400; margin:0}
.sec-head h2 b{font-weight:600}

.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,6vw,88px); align-items:start}
.kicker{font-size:clamp(21px,2.3vw,30px); line-height:1.28; letter-spacing:-.022em; font-weight:400; margin:0 0 20px}
p{margin:0 0 18px; color:var(--ink-2)}
p:last-child{margin-bottom:0}
.muted{color:var(--muted)}

/* feature list */
ul.ticks{list-style:none; margin:0; padding:0; display:grid; gap:0}
ul.ticks li{
  display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2);
}
ul.ticks li:first-child{border-top:1px solid var(--line-soft)}
ul.ticks li svg{margin-top:6px; flex:none; color:var(--accent)}

/* numbered cards */
.cards{display:grid; gap:clamp(10px,1.1vw,16px)}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgba(13,13,12,.03);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)}
.card:hover{border-color:var(--line); box-shadow:0 6px 22px rgba(13,13,12,.06); transform:translateY(-2px)}
.card .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); letter-spacing:.1em}
.card h3{margin:0; font-size:clamp(18px,1.55vw,22px); line-height:1.25; letter-spacing:-.02em; font-weight:500}
.card p{font-size:15.5px; color:var(--muted); margin:0}

/* stat row */
.statrow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--line); padding-top:28px; margin-top:clamp(40px,5vw,64px)}
.statrow .n{font-size:clamp(30px,4vw,56px); line-height:1; letter-spacing:-.04em; font-weight:500}
.statrow .l{color:var(--muted); font-size:14px; margin-top:10px}

/* pull quote */
.pull{
  position:relative; padding:6px 0 6px 28px; margin:clamp(36px,5vw,60px) 0 0;
  font-size:clamp(19px,2vw,27px); line-height:1.32; letter-spacing:-.022em; color:var(--ink);
}
.pull::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  border-radius:999px; background:var(--accent)}

/* revolution chapters */
.chapter{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,5vw,72px);
  padding:clamp(36px,5vw,60px) 0; border-top:1px solid var(--line-soft)}
.chapter:first-of-type{border-top:0; padding-top:0}
.chapter .side{position:sticky; top:104px; align-self:start}
.chapter .side .step{color:var(--faint); margin-bottom:10px}
.chapter .side h3{margin:0; font-size:clamp(19px,1.65vw,24px); line-height:1.2; letter-spacing:-.024em; font-weight:500}
.chapter .side .rule{width:32px; height:2px; background:var(--accent); margin-top:16px}

/* two column list */
ul.ticks.cols2{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,4vw,56px)}
ul.ticks.cols2 li{border-top:1px solid var(--line-soft); border-bottom:0}

/* partner */
.partner{
  display:flex; align-items:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(13,13,12,.03);
  padding:clamp(28px,4vw,52px);
}
.partner .mark{display:flex; align-items:center; gap:16px; flex:none}
.partner .mark img{width:54px; height:auto}
.partner .mark .name{font-size:26px; letter-spacing:-.03em; font-weight:500}
.partner .txt{flex:1; min-width:260px}
.partner .txt .q{font-size:clamp(19px,1.8vw,25px); letter-spacing:-.022em; line-height:1.3; margin:0 0 10px; color:var(--ink)}
.partner .txt p{margin:0; font-size:15.5px; color:var(--muted)}

/* news */
.news-lead{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px); margin-bottom:clamp(32px,4vw,56px)}
.news-lead .item{background:var(--bg-elev); border:1px solid var(--line-soft);
  border-radius:var(--r-md); box-shadow:0 1px 2px rgba(13,13,12,.03);
  padding:clamp(24px,2.6vw,36px)}
.news-lead .tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border:1px solid rgba(241,12,79,.28); border-radius:999px;
  padding:4px 11px; margin-bottom:16px}
.news-lead h3{margin:0; font-size:clamp(19px,1.75vw,25px); line-height:1.25; letter-spacing:-.024em; font-weight:400}

.apps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.1vw,16px)}
.app{background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(13,13,12,.03);
  padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:18px;
  position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)}
.app:hover{border-color:var(--line); box-shadow:0 6px 22px rgba(13,13,12,.06); transform:translateY(-2px)}
.app::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--c,var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.app:hover::after{transform:scaleX(1)}
.app img{height:clamp(30px,3vw,38px); width:auto; align-self:flex-start; max-width:100%; object-fit:contain; object-position:left center}
.app .role{font-size:15.5px; color:var(--ink-2); line-height:1.4}
.app .soon{margin-top:auto; padding-top:16px; color:var(--faint)}
/* Pastille de brique OMS : elle rattache les trois produits à une même gamme.
   Le texte reste en --ink-2 et non dans la couleur produit — sur carte claire,
   --dock tombe à 3,5:1 et --palette à 3,1:1, sous le seuil AA. La couleur ne
   porte donc que le point et la bordure, où le contraste n'est pas en jeu. */
.app .brick{align-self:flex-start; margin-top:-8px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--line);                                  /* repli */
  border-color:color-mix(in srgb, var(--c,var(--accent)) 34%, transparent);
  background:color-mix(in srgb, var(--c,var(--accent)) 7%, transparent);
  border-radius:999px; padding:6px 12px 6px 10px}
.app .brick::before{content:""; flex:none; width:6px; height:6px;
  border-radius:50%; background:var(--c,var(--accent))}

/* contact */
.contact{background:var(--ink); color:#fff; border-radius:var(--r-lg);
  padding:clamp(32px,5vw,72px); position:relative; overflow:hidden}
.contact h2{font-size:clamp(29px,4.4vw,62px); line-height:1.03; letter-spacing:-.037em; font-weight:400; margin:0; max-width:15ch}
.contact h2 b{font-weight:600}
.contact p.lead{color:rgba(255,255,255,.62); max-width:52ch; margin:24px 0 0; font-size:16.5px}
.contact .grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
  margin-top:clamp(40px,5vw,68px); border-top:1px solid rgba(255,255,255,.14); padding-top:32px}
.contact .lbl{color:rgba(255,255,255,.42); margin-bottom:12px}
.contact .val{font-size:16.5px; line-height:1.6}
.contact .val a{border-bottom:1px solid rgba(255,255,255,.22); transition:border-color .25s, color .25s}
.contact .val a:hover{color:var(--accent); border-color:var(--accent)}
.contact .btn{background:#fff; color:var(--ink); border-color:#fff; margin-top:36px; font-size:15px; padding:14px 24px}
.contact .btn:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.contact .glow{position:absolute; right:-14%; top:-40%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(241,12,79,.30), transparent 62%); pointer-events:none}

/* footer */
footer{padding:56px 0 44px; border-top:1px solid var(--line); position:relative; z-index:1}
.foot-in{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot-in img{height:32px; width:auto; opacity:.9}
.foot-meta{color:var(--faint); font-size:13px; line-height:1.7; text-align:right}
.foot-meta a:hover{color:var(--ink)}
/* la page en cours ne se signale pas comme une destination */
.foot-meta a[aria-current="page"]{color:var(--ink-2); cursor:default}

/* reveal animation */
.rv{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav-in .btn{display:none}
  .burger{display:block}
  .hero-in{grid-template-columns:1fr; gap:clamp(28px,5vw,44px)}
  .hero-visual{justify-self:start; max-width:min(360px,72vw)}
  .grid2{grid-template-columns:1fr; gap:36px}
  .chapter{grid-template-columns:1fr; gap:20px}
  .chapter .side{position:static}
  .cards.c3{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hero-stats{grid-template-columns:1fr; border-top:1px solid var(--line)}
  .hero-stats div{border-right:0; border-bottom:1px solid var(--line-soft); padding:18px 0}
  .hero-stats div:last-child{border-bottom:0}
  .statrow{grid-template-columns:1fr; gap:24px}
  ul.ticks.cols2{grid-template-columns:1fr}
  .cards.c2{grid-template-columns:1fr}
  .news-lead{grid-template-columns:1fr}
  .contact .grid{grid-template-columns:1fr; gap:26px}
  .foot-in{flex-direction:column; align-items:flex-start}
  .foot-meta{text-align:left}
  .scroll-cue{display:none}
  .hero-visual{max-width:min(220px,54vw); align-self:center; justify-self:center}
  .hero-video{display:none}          /* jamais téléchargée : voir js/main.js */
  #top{--bg-op:.76}                  /* l'accueil retrouve sa photo */
  /* en colonne étroite, on cadre la photo sur sa zone calme */
  .hero::before, section.band::before{background-position:64% center; height:min(100%,118vh)}
  .mono-stack{width:min(78vw,52vh)}
  .mono-stack .base{opacity:.028}
  .mono-stack .reveal{opacity:.055}
}


/* ════════════════════════════════════════════════════════════
   VERSION 2 — MODE SOMBRE
   Tout ce qui suit ne s'applique qu'à <html data-theme="dark">.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#0A0A0B;
  --bg-elev:#131316;
  --bg-elev-2:#191920;
  --ink:#F5F5F3;
  --ink-2:#B7B7BF;
  --muted:#83838E;
  --faint:#57575F;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.06);
  --glow:rgba(241,12,79,.30);
  --grid:38px;
}

/* --- trame technique et halo, propres à la v2 --- */
[data-theme="dark"] body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 72%);
}
[data-theme="dark"] body::after{
  content:""; position:fixed; top:-30vh; right:-10vw; width:80vw; height:90vh;
  z-index:0; pointer-events:none; border-radius:50%; filter:blur(30px);
  background:radial-gradient(circle, rgba(241,12,79,.16), transparent 62%);
}

/* --- progression de lecture --- */
.progress{position:fixed; top:0; left:0; height:2px; z-index:70; width:100%;
  transform:scaleX(var(--sp,0)); transform-origin:left; display:none;
  background:linear-gradient(90deg, var(--accent), var(--palette));
  box-shadow:0 0 12px rgba(241,12,79,.3)}
[data-theme="dark"] .progress{display:block}

/* --- barre, boutons, cartes --- */
[data-theme="dark"] header.nav.solid{background:rgba(10,10,11,.72)}
[data-theme="dark"] .btn{border-color:var(--accent); background:var(--accent); color:#fff}
[data-theme="dark"] .btn:hover{background:var(--accent); box-shadow:0 6px 26px var(--glow)}
[data-theme="dark"] .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
[data-theme="dark"] .btn.ghost:hover{background:rgba(255,255,255,.06); color:var(--ink);
  border-color:var(--ink-2); box-shadow:none}
[data-theme="dark"] .card,
[data-theme="dark"] .app,
[data-theme="dark"] .news-lead .item,
[data-theme="dark"] .partner{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .app:hover{border-color:rgba(241,12,79,.45); transform:translateY(-3px);
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 0 34px -12px var(--glow)}
[data-theme="dark"] .sec-head .idx::before{content:'// '; color:var(--faint)}

/* --- filigrane du monogramme : il émet au lieu d'assombrir --- */
[data-theme="dark"] .mono-stack .base{opacity:.045; filter:grayscale(1) brightness(1.6)}
[data-theme="dark"] .mono-stack .reveal{opacity:.085}

/* --- l'animation du monogramme passe en clair --- */
[data-theme="dark"] .ta-fill-l{fill:#F5F5F3}
[data-theme="dark"] .ta-fill-r{fill:#6E6E78}

/* --- accueil : la colonne droite change de contenu, donc de proportion --- */
[data-theme="dark"] .hero-in{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
[data-theme="dark"] .hero-visual{max-width:580px}
[data-theme="dark"] .hero-video{opacity:var(--hero-video-op,.5)}

/* --- fonds de section : jeu d'images dédié au fond noir --- */
[data-theme="dark"] #top             {--bg-img:url("../images/backgrounds/bg-hero-on-dark.jpg");               --bg-op:0}
[data-theme="dark"] #qui-sommes-nous {--bg-img:url("../images/backgrounds/bg-01-qui-sommes-nous-on-dark.jpg"); --bg-op:.85}
[data-theme="dark"] #revolution-ia   {--bg-img:url("../images/backgrounds/bg-02-revolution-ia-on-dark.jpg");   --bg-op:.85}
[data-theme="dark"] #offres          {--bg-img:url("../images/backgrounds/bg-03-offres-on-dark.jpg");          --bg-op:.85}
[data-theme="dark"] #partenaires     {--bg-img:url("../images/backgrounds/bg-04-partenaires-on-dark.jpg");     --bg-op:.85}
[data-theme="dark"] #actualites      {--bg-img:url("../images/backgrounds/bg-05-actualites-on-dark.jpg");      --bg-op:.85}

/* --- bloc de contact : il s'inverse pour rester une clôture --- */
.contact-lbl{color:rgba(255,255,255,.42); margin-bottom:26px}
[data-theme="dark"] .contact{background:var(--ink); color:#0A0A0B}
[data-theme="dark"] .contact-lbl{color:rgba(10,10,11,.45)}
[data-theme="dark"] .contact p.lead{color:rgba(10,10,11,.62)}
[data-theme="dark"] .contact .grid{border-top-color:rgba(10,10,11,.16)}
[data-theme="dark"] .contact .lbl{color:rgba(10,10,11,.45)}
[data-theme="dark"] .contact .val a{border-bottom-color:rgba(10,10,11,.25)}
[data-theme="dark"] .contact .btn{background:#0A0A0B; color:var(--ink); border-color:#0A0A0B}
[data-theme="dark"] .contact .btn:hover{background:var(--accent); border-color:var(--accent); color:#fff}
[data-theme="dark"] .contact .glow{background:radial-gradient(circle, rgba(241,12,79,.22), transparent 62%)}


/* ════════════════════════════════════════════════════════════
   L'INTERRUPTEUR DE VERSION
   ════════════════════════════════════════════════════════════ */
.tsw{display:inline-flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid var(--line); border-radius:999px;
  background:transparent}
.tsw button{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 9px; border:0; border-radius:999px; background:transparent;
  color:var(--muted); font:inherit; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-family:"IBM Plex Mono",ui-monospace,monospace;
  transition:background .28s var(--ease), color .28s var(--ease)}
.tsw button svg{width:15px; height:15px; flex:none}
.tsw button span{display:none}
.tsw button:hover{color:var(--ink)}
.tsw button[aria-pressed="true"]{background:var(--accent); color:#fff}
.tsw-wide button span{display:inline}
.tsw-wide button{padding:9px 16px}


/* ════════════════════════════════════════════════════════════
   TRACE D'AGENT — bloc signature de la v2 (piloté par les jetons,
   il suivrait donc aussi un thème clair si on l'y affichait)
   ════════════════════════════════════════════════════════════ */
.term{--term-cycle:18s;
  background:linear-gradient(180deg, var(--bg-elev-2,#fff), var(--bg-elev));
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  box-shadow:0 34px 90px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05)}
.term-bar{display:flex; align-items:center; gap:8px; padding:11px 15px;
  border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.025)}
.term-bar .dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.term-bar .dot:first-child{background:rgba(241,12,79,.6)}
.term-title{margin-left:8px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.term-live{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.term-live i{width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:statusPulse 2.6s ease-out infinite}
.term-body{margin:0; padding:20px 18px 24px; white-space:pre-wrap; word-break:break-word;
  font-size:clamp(10.5px,.86vw,12.5px); line-height:2.05; color:var(--ink-2)}
.term-body .l{display:block; opacity:0}
.term-body .pr,.term-body .ok{color:var(--accent)}
.term-body .ar,.term-body .dim{color:var(--faint)}
.term-body .hi{color:var(--ink)}
.term-caret{display:inline-block; width:7px; height:1em; margin-left:4px;
  vertical-align:-2px; background:var(--accent); animation:caret 1.1s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}

/* Pastille d'état — en inline-block, pas en flex : le texte doit se replier
   comme du texte courant. En conteneur flex, chaque fragment devenait un item
   et la pastille se scindait avec un espacement irrégulier dès que le libellé
   ne tenait plus sur une ligne. */
.status{display:inline-block; padding:7px 15px 7px 12px; line-height:1.7;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03);
  color:var(--ink-2)}
.status i{display:inline-block; width:7px; height:7px; margin-right:9px;
  vertical-align:1px; border-radius:50%; background:var(--accent);
  animation:statusPulse 2.6s ease-out infinite}
.status b{color:var(--ink); font-weight:500}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(241,12,79,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(241,12,79,0)}}

/* .ta-inline — habillage prévu pour poser le monogramme animé à l'intérieur
   d'une section plutôt qu'en accueil. Plus utilisé : le mode sombre ne
   l'affiche pas. Les règles restent, il suffit de remettre le bloc SVG
   (classe .ta-inline) dans le HTML pour le réactiver. */
.ta-inline{max-width:330px; margin:0 0 30px}
.ta-inline .ta{width:100%; height:auto; display:block; overflow:visible}

@media (prefers-reduced-motion:reduce){
  .term-body .l{animation:none; opacity:1}
  .term-caret,.status i,.term-live i{animation:none}
}

.term-body .l0{animation:termL0 var(--term-cycle) linear infinite}
@keyframes termL0{0%,4.0%{opacity:0; transform:translateY(5px)}6.0%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l1{animation:termL1 var(--term-cycle) linear infinite}
@keyframes termL1{0%,8.5%{opacity:0; transform:translateY(5px)}10.5%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l2{animation:termL2 var(--term-cycle) linear infinite}
@keyframes termL2{0%,13.0%{opacity:0; transform:translateY(5px)}15.0%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l3{animation:termL3 var(--term-cycle) linear infinite}
@keyframes termL3{0%,17.5%{opacity:0; transform:translateY(5px)}19.5%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l4{animation:termL4 var(--term-cycle) linear infinite}
@keyframes termL4{0%,22.0%{opacity:0; transform:translateY(5px)}24.0%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l5{animation:termL5 var(--term-cycle) linear infinite}
@keyframes termL5{0%,26.5%{opacity:0; transform:translateY(5px)}28.5%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l6{animation:termL6 var(--term-cycle) linear infinite}
@keyframes termL6{0%,31.0%{opacity:0; transform:translateY(5px)}33.0%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l7{animation:termL7 var(--term-cycle) linear infinite}
@keyframes termL7{0%,35.5%{opacity:0; transform:translateY(5px)}37.5%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}
.term-body .l8{animation:termL8 var(--term-cycle) linear infinite}
@keyframes termL8{0%,40.0%{opacity:0; transform:translateY(5px)}42.0%{opacity:1; transform:none}93%{opacity:1; transform:none}97%,100%{opacity:0}}


@media (max-width:1024px){
  [data-theme="dark"] .hero-in{grid-template-columns:1fr}
  .ta-inline{max-width:240px}
  .tsw{order:2}
}
@media (max-width:860px){
  .ta-inline{max-width:190px}
  [data-theme="dark"] .hero-visual{max-width:100%}
  .term-body{padding:16px 14px 18px; line-height:1.9}
  .status{font-size:11px; letter-spacing:.1em}
  [data-theme="dark"] #top{--bg-op:.85}
}


/* ============================================================
   PAGES LÉGALES — confidentialité, mentions légales
   Colonne unique, mesure de lecture courte. Aucun fond de section, aucune
   photo : ces pages se lisent, elles ne se parcourent pas.
   ============================================================ */
.legal{max-width:820px; margin:0 auto; padding-top:150px; padding-bottom:110px}
.legal-back{display:inline-block; color:var(--ink-2); margin-bottom:26px}
.legal-back:hover{color:var(--accent)}
.legal h1{font-size:clamp(34px,5vw,54px); line-height:1.06; letter-spacing:-.022em;
  font-weight:500; margin:0 0 14px}
.legal .legal-date{color:var(--ink-2); margin:0 0 40px}
.legal h2{font-size:clamp(21px,2.6vw,26px); line-height:1.22; letter-spacing:-.012em;
  font-weight:500; margin:56px 0 14px; padding-top:26px; border-top:1px solid var(--line-soft)}
.legal h3{font-size:17.5px; font-weight:600; margin:32px 0 10px}
.legal p, .legal li{color:var(--ink-2); font-size:16.5px; line-height:1.72}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 18px; padding-left:22px}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--accent)}
.legal a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--line)}
.legal a:hover{color:var(--accent); text-decoration-color:currentColor}
.legal strong,.legal b{color:var(--ink); font-weight:600}
.legal code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.88em;
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:6px;
  padding:1px 6px}

.legal table{width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15px}
.legal th,.legal td{text-align:left; vertical-align:top; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); color:var(--ink-2)}
.legal th{color:var(--ink); font-weight:600; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; border-bottom:1px solid var(--line)}
.legal tbody tr:last-child td{border-bottom:0}

/* Encadré d'avertissement — statut du document */
.legal-note{background:var(--bg-elev); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-md);
  padding:20px 24px; margin:0 0 44px}
.legal-note p{margin:0 0 10px; font-size:15.5px}
.legal-note p:last-child{margin-bottom:0}
.legal-note .mono{color:var(--accent); margin-bottom:8px}

/* Marqueur des informations manquantes : volontairement voyant, il doit être
   impossible de publier la page en en oubliant un. */
.todo{background:rgba(241,12,79,.10); color:#C0093F;
  border:1px dashed rgba(241,12,79,.42); border-radius:5px;
  padding:0 6px; font-size:.93em; font-weight:500}
/* l'accent pur ne tient que 3,4:1 sur son propre fond teinté : on l'assombrit
   à teinte constante en clair, tandis qu'en sombre il passe déjà à 4,6:1 */
[data-theme="dark"] .todo{background:rgba(241,12,79,.16); color:var(--accent)}

/* Bloc de commentaire destiné au rédacteur, retiré à la publication */
.legal-aside{border:1px dashed var(--line); border-radius:var(--r-md);
  padding:18px 22px; margin:0 0 26px; background:transparent}
.legal-aside p{margin:0 0 10px; font-size:15px; color:var(--ink-2)}
.legal-aside p:last-child{margin-bottom:0}
.legal-aside .mono{color:var(--ink-2); margin-bottom:8px; font-size:11.5px}

@media (max-width:860px){
  .legal{padding-top:112px; padding-bottom:76px}
  .legal table{display:block; overflow-x:auto}
}

/* ============================================================
   BANDEAU DE CONSENTEMENT — mesure d'audience
   Il vit sur les tokens du thème, donc il suit clair/sombre sans une seule
   règle dédiée. Les deux boutons ont volontairement le même poids visuel :
   la CNIL demande que refuser soit aussi simple qu'accepter.
   ============================================================ */
.cmp{
  position:fixed; left:var(--pad); right:var(--pad); bottom:clamp(14px,2.4vw,26px);
  z-index:80;                      /* au-dessus de la nav (60) et du menu (55) */
  max-width:var(--maxw); margin:0 auto;
  background:var(--bg-elev); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(13,13,12,.16), 0 2px 6px rgba(13,13,12,.06);
  animation:cmpIn .5s var(--ease) both;
}
[data-theme="dark"] .cmp{box-shadow:0 18px 44px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03)}
.cmp[hidden]{display:none}
/* le menu plein écran du mobile passe devant : sans cela le bandeau, plus haut
   dans la pile, recouvrait l'interrupteur de thème du menu. */
body.menu-open .cmp{display:none}
@keyframes cmpIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.cmp{animation:none}}

.cmp-in{display:flex; align-items:center; gap:clamp(20px,3vw,44px);
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,30px)}
.cmp-lbl{color:var(--accent); margin-bottom:8px}
.cmp-txt{flex:1; min-width:0}
.cmp-txt p{margin:0; font-size:14.5px; line-height:1.62; color:var(--ink-2); max-width:92ch}
.cmp-txt a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--line)}
.cmp-txt a:hover{color:var(--accent); text-decoration-color:currentColor}
.cmp-act{display:flex; gap:10px; flex:none}
.cmp-act .btn{padding:10px 22px}

/* lien-bouton du pied de page : un bouton, pour l'accessibilité, mais rendu
   comme les autres liens de la zone */
.linklike{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--line);
}
.linklike:hover{color:var(--ink); text-decoration-color:currentColor}

@media (max-width:760px){
  .cmp{left:12px; right:12px}
  .cmp-in{flex-direction:column; align-items:stretch; gap:16px}
  .cmp-txt p{font-size:14px}
  .cmp-act{justify-content:stretch}
  .cmp-act .btn{flex:1; justify-content:center}
}

/* ════════════════════════════════════════════════════════════
   BASCULE D'AFFICHAGE — À GARDER EN FIN DE FEUILLE
   On masque uniquement la variante inactive ; la variante active ne reçoit
   aucune règle, elle conserve donc son display propre (.status est en
   inline-flex, .hero-visual en block…). Les sélecteurs sont en deux classes
   pour primer sur les display: des composants déclarés plus haut.
   ════════════════════════════════════════════════════════════ */
[data-theme="light"] .only-dark{display:none}
[data-theme="dark"]  .only-light{display:none}
html:not([data-theme]) .only-dark{display:none}   /* sans JavaScript : v1 */