/* Seventy Labs — pages de contenu.
   Même univers que la page d’accueil : noir profond, violet de marque, Chakra Petch,
   annotations techniques façon panneau d'instruments. */

@font-face{
  font-family:'Chakra Petch';
  src:url('/assets/fonts/chakra-petch-latin-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('/assets/fonts/chakra-petch-latin-ext-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('/assets/fonts/chakra-petch-latin-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('/assets/fonts/chakra-petch-latin-ext-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113;
}

:root{
  --bg:#07060C;
  --panel:#0E0B18;
  --ink:#FFFFFF;
  --soft:#C9C3DA;
  --violet:#7C3AED;
  --violet-hi:#A78BFA;
  --line:rgba(124,58,237,.30);
  --hair:rgba(124,58,237,.14);
  --ok:#7DF0C9;
  --wrap:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--violet-hi);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--violet-hi);outline-offset:3px}

/* Lien d'évitement : masqué sans créer de débordement.
   « left:-9999px » élargissait le document de 10 000 px, ce qui décalait
   toute la page en écriture de droite à gauche (arabe, ourdou). */
.skip{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;inset-inline-start:0;top:0;z-index:99;
  width:auto;height:auto;margin:0;padding:12px 18px;
  overflow:visible;clip-path:none;
  background:var(--violet);color:#fff;
}

/* ---------- barre du haut ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(16px,4vw,44px);flex-wrap:wrap;
  padding:16px clamp(18px,5vw,56px);
  background:rgba(7,6,12,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.tb-brand img{height:30px;width:auto}
.tb-nav{display:flex;gap:clamp(10px,2vw,24px);flex-wrap:wrap}
.tb-nav a{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.tb-nav a:hover{color:#fff;border-color:var(--violet)}
.tb-nav a[aria-current="page"]{color:#fff;border-color:var(--violet-hi)}

/* sélecteur de langue : accordé au thème sombre plutôt que le rendu natif */
.tb-lang{display:flex;align-items:center;gap:9px;margin-inline-start:auto}
.tb-lang-lbl{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.tb-lang select{
  appearance:none;-webkit-appearance:none;
  background:var(--panel);color:#fff;
  border:1px solid var(--line);border-radius:0;
  font-family:inherit;font-size:12px;font-weight:500;
  padding:7px 30px 7px 11px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A78BFA'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
[dir="rtl"] .tb-lang select{padding:7px 11px 7px 30px;background-position:left 11px center}
.tb-lang select:hover{border-color:var(--violet-hi)}
.tb-lang select:focus-visible{outline:2px solid var(--violet-hi);outline-offset:1px}
.tb-lang select option{background:var(--panel);color:#fff}
@media (max-width:760px){ .tb-lang{margin-inline-start:0} .tb-lang-lbl{display:none} }

/* ---------- rythme général ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,5vw,56px)}
section{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--hair)}
section:first-of-type{border-top:none}

.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--violet-hi);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:120px;background:var(--line)}

/* ---------- fil d'Ariane ----------
   Il partage la ligne du bandeau plutôt que d'empiler un second micro-titre
   au-dessus du H1. Le chevron est décoratif : les lecteurs d'écran suivent
   les liens, pas le glyphe. */
.hero-hud{display:flex;align-items:center;column-gap:clamp(12px,2.4vw,26px);row-gap:9px;flex-wrap:wrap}
.ariane{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);
}
.ariane a{color:var(--soft);border-bottom:1px solid transparent;padding-bottom:2px}
.ariane a:hover{color:#fff;border-bottom-color:var(--violet)}
.ariane .sep{color:var(--violet);font-size:9px;line-height:1}
.ariane [aria-current]{color:#fff}
/* en arabe et en ourdou la lecture va de droite à gauche : le chevron doit
   pointer dans le sens du chemin, pas contre lui */
[dir="rtl"] .ariane .sep{transform:scaleX(-1)}
/* une barre violette sépare le chemin de l'état de la baie sur la même ligne */
.hero-hud .eyebrow::before{content:"";height:11px;width:1px;background:var(--line)}
/* dans la ligne partagée, flex:1 n'a plus d'espace libre à prendre : on rend
   au filet de queue une largeur propre pour qu'il ne s'écrase pas à zéro */
.hero-hud .eyebrow::after{flex:none;width:clamp(20px,5vw,80px);max-width:none}
@media (max-width:640px){ .hero-hud .eyebrow::before{display:none} }

h1{
  margin-top:clamp(28px,3vw,34px);
  font-size:clamp(34px,6vw,68px);font-weight:700;
  line-height:1.02;letter-spacing:-.02em;text-wrap:balance;
}
h2{
  font-size:clamp(24px,3.4vw,38px);font-weight:700;
  line-height:1.15;letter-spacing:-.015em;text-wrap:balance;
}
h3{font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.01em}
h3 + p{margin-top:clamp(11px,1.1vw,15px)}
.lead{
  margin-top:clamp(28px,3.2vw,40px);font-size:clamp(17px,1.6vw,20px);line-height:1.65;
  color:var(--soft);max-width:62ch;
}
p{max-width:70ch}
p + p{margin-top:16px}
section > .wrap > h2{margin-bottom:clamp(12px,1.3vw,17px)}
section > .wrap > h2 + p{margin-top:clamp(18px,1.7vw,24px);color:var(--soft)}

.answer{
  margin-top:clamp(26px,2.6vw,34px);padding:18px 20px;
  border-left:2px solid var(--violet);
  background:rgba(124,58,237,.07);
  max-width:70ch;
}

/* Le bloc .answer n'a pas de marge basse : ailleurs il termine sa section.
   Quand un titre le suit (mentions legales), il faut respirer. */
.answer + h2{margin-top:clamp(30px,3vw,42px)}

/* ---------- rack de baies ---------- */
.rack{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  margin-top:34px;
}
.bay{
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px 16px;min-height:120px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .18s,background .18s,transform .18s;
}
a.bay:hover{border-color:var(--violet-hi);background:rgba(124,58,237,.14);transform:translateY(-2px)}
.bay .b-id{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet-hi)}
.bay .b-name{font-size:17px;font-weight:700;letter-spacing:.01em;color:#fff}
.bay .b-desc{font-size:13px;line-height:1.55;color:var(--soft)}
.bay.free{border-style:dashed;border-color:rgba(201,195,218,.22);background:transparent}
.bay.free .b-id{color:var(--soft);opacity:.7}
.bay.free .b-name{font-size:12px;letter-spacing:.2em;color:var(--soft);opacity:.7;font-weight:500}
@media (max-width:900px){ .rack{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .rack{grid-template-columns:repeat(2,1fr)} .bay{min-height:96px} }

/* ---------- cartes produits (liste détaillée) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:32px}
.card{
  border:1px solid var(--line);background:var(--panel);
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;
}
.card .c-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h3{color:#fff}
.card p{font-size:14.5px;color:var(--soft);flex:1}
.card .c-go{font-size:12px;letter-spacing:.16em;text-transform:uppercase}

.tag{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);color:var(--violet-hi);white-space:nowrap;
}
.tag.live{color:var(--ok);border-color:rgba(125,240,201,.4)}

/* ---------- listes de faits ---------- */
.facts{list-style:none;margin-top:26px;border-top:1px solid var(--hair)}
.facts li{
  display:flex;gap:clamp(14px,3vw,30px);align-items:baseline;flex-wrap:wrap;
  padding:15px 2px;border-bottom:1px solid var(--hair);
}
.facts .f-k{
  flex:0 0 190px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-hi);
}
.facts .f-v{flex:1;min-width:220px;color:var(--ink)}

.checks{list-style:none;margin-top:22px;display:grid;gap:10px}
.checks li{position:relative;padding-left:26px;color:var(--soft);max-width:66ch}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--violet);
}

/* ---------- appel à l'action ---------- */
.cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  padding:15px 24px;border:1px solid var(--violet);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  transition:background .18s;
}
.cta:hover{background:var(--violet);color:#fff}
.cta.ghost{border-color:var(--line);color:var(--soft)}
.cta.ghost:hover{background:rgba(124,58,237,.16);color:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- questions / réponses ---------- */
.qa{margin-top:34px;display:grid;gap:2px}
.qa details{border:1px solid var(--hair);background:var(--panel)}
.qa summary{
  cursor:pointer;padding:16px 20px;font-weight:700;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--violet-hi);font-weight:500}
.qa details[open] summary::after{content:"–"}
.qa summary:hover{background:rgba(124,58,237,.1)}
.qa .qa-body{padding:0 20px 18px;color:var(--soft);font-size:15px}

/* ---------- pied de page ---------- */
.sitefoot{border-top:1px solid var(--line);margin-top:clamp(40px,8vw,90px)}
.sf-grid{
  max-width:var(--wrap);margin:0 auto;padding:clamp(34px,6vw,60px) clamp(18px,5vw,56px);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
}
.sf-mark{font-size:13px;letter-spacing:.34em;font-weight:700}
.sf-tag{margin-top:12px;font-size:14px;color:var(--soft);max-width:38ch}
.sf-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-hi);font-weight:500}
.sitefoot ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.sitefoot ul a{font-size:14.5px;color:var(--soft)}
.sitefoot ul a:hover{color:#fff}
.sf-bar{
  max-width:var(--wrap);margin:0 auto;
  padding:16px clamp(18px,5vw,56px) 30px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--hair);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
@media (max-width:760px){ .sf-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}