/* ═══════════════════════════════════════════════════════════════════════════
   AIQUAL — FEUILLE DE STYLE COMMUNE (source de vérité unique)
   Toutes les pages la chargent via <link href="/css/aiqual.css?v=N">.
   Une seule définition de .top, .page, .pilltrack, .hero, .rv : une page qui a
   besoin d'une règle PROPRE l'ajoute en plus (ex. /css/article.css), jamais en
   redéfinissant une règle d'ici.
   Après toute modification : incrémenter ?v=N dans les pages, sinon le
   navigateur sert l'ancienne feuille.
   ═══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:#14151A;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;padding:0}
::selection{background:#FF6B45;color:#fff}

/* pas d'overflow:hidden ici : un ancêtre qui rogne annulerait position:sticky
   sur la barre de navigation. */
.page{max-width:1080px;margin:0 auto;padding:18px 18px 0}

.eyebrow{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#FF6B45}
.pill-outline{display:inline-block;font-weight:600;font-size:13px;color:#14151A;border:1.5px solid #14151A;padding:11px 20px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.pill-outline:hover{background:#14151A;color:#fff}

/* ── BARRE DE NAVIGATION — FIXE (sticky), IDENTIQUE SUR TOUTES LES PAGES ──
   Pas de flex-wrap au-dessus de 860 px : la barre garde une seule ligne et
   une seule hauteur, quelle que soit la page. */
/* line-height:normal est verrouillé ici : sans lui, l'interligne 1.62 des pages
   article se propage aux pastilles et la barre gagne 5 px sur ces pages. */
nav.top{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 10px;line-height:normal;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 18px -20px rgba(20,21,26,.22)}
.brand{display:flex;align-items:center;gap:8px}
.brand .mark{width:20px;height:20px;border-radius:6px;background:#14151A;display:inline-block}
.brand .word{font-weight:800;font-size:16px;color:#14151A;letter-spacing:-.01em}
.pilltrack{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #ECECEC;border-radius:999px;padding:4px}
.pilltrack a{font-weight:600;font-size:12.5px;color:#55534E;padding:8px 14px;border-radius:999px;white-space:nowrap}
/* La pastille active se distingue par la COULEUR seule : même padding que les
   autres, sinon la piste change de largeur (±4 px) entre une page présente
   dans le menu et une page qui n'y est pas (ex. /souverainete/). */
.pilltrack a.on{color:#fff;background:#14151A}
.langwrap{position:relative}
.langbtn{font-weight:700;font-size:12.5px;color:#14151A;padding:6px 4px}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);display:none;flex-direction:column;background:#fff;border-radius:14px;padding:6px;box-shadow:0 14px 34px -18px rgba(20,21,26,.35);z-index:60;min-width:110px}
.langmenu.open{display:flex}
.langmenu a{font-weight:600;font-size:13px;color:#55534E;padding:8px 12px;border-radius:9px}
.langmenu a:hover{background:#F5F5F5;color:#14151A}
.langmenu a.cur{color:#FF6B45}

/* ── DÉFILEMENT PAR ANCRE ──
   La barre est sticky : sans scroll-margin, un saut d'ancre glisse le titre
   sous la barre. La marge est réservée AU MOMENT du saut, sans décaler la
   mise en page. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:target{scroll-margin-top:96px}
[id]{scroll-margin-top:96px}

/* ── ACCUEIL : HÉROS ET SECTIONS ── */
.hero{position:relative;height:clamp(300px,34vw,380px);border-radius:20px;overflow:hidden;background:linear-gradient(125deg,#1a1f33,#3b1f2e,#0d1420)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .txt{position:absolute;left:28px;bottom:34px;max-width:64%}
.hero h1{font-weight:600;font-size:clamp(26px,3.4vw,38px);color:#fff;line-height:1.08;letter-spacing:-.02em;margin:10px 0 0}
.hero .glass{position:absolute;right:24px;bottom:28px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:9px 16px 9px 10px;border-radius:999px}
.hero .glass .dot{width:20px;height:20px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center}

.cards3{position:relative;margin:14px 0 0;display:flex;gap:14px;z-index:2}
.c3{position:relative;overflow:hidden;border-radius:16px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:118px}
.c3::before{content:"";position:absolute;inset:0;background:url('/img/hero.jpg') center/cover no-repeat;opacity:.16;pointer-events:none}
.c3.dark1::before{background-position:0% 40%}
.c3.dark2::before{background-position:100% 60%}
.c3.white::before{opacity:.07;background-position:50% 20%}
.c3>*{position:relative;z-index:1}
.c3 .t{font-weight:700;font-size:14px;color:#fff}
.c3 .d{font-weight:400;font-size:12px;margin-top:6px;line-height:1.4}
.c3 .arr{align-self:flex-end;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:10px;transition:transform .2s}
.c3:hover .arr{transform:scale(1.12)}
.c3.dark1{flex:1;background:#181A20}.c3.dark1 .d{color:#9A98A0}.c3.dark1 .arr{background:#26282F}
.c3.dark2{flex:1;background:#221A18}.c3.dark2 .d{color:#A79792}.c3.dark2 .arr{background:#FF6B45}
.c3.white{flex:1;background:#fff;border:1px solid #EFEFEF;box-shadow:0 20px 40px -24px rgba(20,21,26,.25)}
.c3.white .stat{font-weight:800;font-size:30px;color:#14151A;line-height:1}
.c3.white .cap{font-weight:400;font-size:12px;color:#8A8880;margin-top:6px}
.c3.white .arr{background:#F2F2F2}

section{padding:72px 22px 0}
.sec-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:24px 56px;align-items:start}
.sec-grid .rows{margin-top:0}
.sec-grid .sec-left{position:sticky;top:24px}
@media(max-width:640px){.tlong{display:none}.term-body{font-size:12.5px;line-height:1.9}}
@media(max-width:860px){.sec-grid{display:block}.sec-grid .sec-left{position:static;margin-bottom:26px}}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:14px}
h2.h{font-weight:600;font-size:clamp(26px,3.4vw,36px);color:#17181D;letter-spacing:-.03em;line-height:1.12;margin:0;max-width:22ch}

.rows{display:flex;flex-direction:column;margin-top:34px}
.row{display:flex;align-items:center;gap:18px;padding:18px 0;border-top:1px solid #E8E8E8}
.row:last-child{border-bottom:1px solid #E8E8E8}
.row .ic{width:64px;height:64px;flex-shrink:0;object-fit:contain;mix-blend-mode:multiply}
.row .rt{font-weight:700;font-size:15px;color:#14151A}
.row .rd{font-weight:400;font-size:13px;color:#6C6A66;margin-top:3px;line-height:1.45}
.row .num{flex:0 0 64px;font-weight:800;font-size:40px;line-height:1;color:rgba(20,21,26,.12);letter-spacing:-.02em}

.bleed{margin-top:54px;padding:0 22px}
.bleed div{font-weight:600;font-style:italic;font-size:clamp(32px,5.2vw,58px);color:#17181D;letter-spacing:-.03em;line-height:1.1}

.split{margin-top:40px;display:flex;gap:14px;padding:0 6px}
.split .imgcard{flex:1;position:relative;border-radius:18px;overflow:hidden;min-height:260px;background:linear-gradient(160deg,#1a1f2b,#0c0d11)}
.split .imgcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .bar{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.split .bar .k{font-weight:400;font-size:11px;color:rgba(255,255,255,.6)}
.split .bar .v{font-weight:700;font-size:15px;color:#fff;margin-top:2px}
.split .txtcard{flex:1;position:relative;border-radius:18px;overflow:hidden;background:#FAFAFA;padding:26px;display:flex;flex-direction:column;justify-content:center}
.split .ghost{position:absolute;top:-14px;right:-8px;font-weight:800;font-size:98px;color:transparent;-webkit-text-stroke:1.5px rgba(20,21,26,.08);letter-spacing:-.03em;white-space:nowrap}
.split h3{position:relative;font-weight:600;font-size:24px;color:#14151A;letter-spacing:-.015em;line-height:1.15;margin:10px 0 0}
.split p{position:relative;font-weight:400;font-size:13.5px;color:#6C6A66;line-height:1.55;margin:12px 0 0;max-width:46ch}

.prod-list{margin-top:30px}
.prod-list .row .rt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.prod-list .idx{font-weight:800;font-size:12px;color:#FF6B45}
.prod-list .tag{font-weight:500;font-size:12px;color:#8A8880}
.prod-list .rd{max-width:62ch}
.plogo{width:34px;height:34px;border-radius:9px;flex-shrink:0;object-fit:contain;align-self:center}
.arrmini{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s;box-shadow:0 8px 18px -12px rgba(20,21,26,.3)}
.prod-list .row:hover .arrmini{transform:scale(1.15)}
.prod-list .row:hover .rt{color:#FF6B45}

.statcards{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.statcard{flex:1 1 220px;background:#fff;border:1px solid #EFEFEF;border-radius:16px;padding:20px;box-shadow:0 20px 40px -24px rgba(20,21,26,.25)}
.statcard .sv{font-weight:800;font-size:24px;color:#14151A;line-height:1.1}
.statcard .sk{font-weight:400;font-size:12px;color:#8A8880;margin-top:6px}

.contact-card{margin-top:34px;background:#FAFAFA;border-radius:18px;padding:clamp(24px,3.4vw,36px);display:flex;flex-wrap:wrap;gap:36px 56px}
.contact-left{flex:1 1 280px}
.contact-left p{font-weight:400;font-size:14px;color:#6C6A66;line-height:1.6;margin:14px 0 0;max-width:40ch}
.contact-mail{display:inline-block;margin-top:20px;font-weight:700;font-size:16px;color:#FF6B45}
.contact-mail:hover{text-decoration:underline;text-underline-offset:3px}
form{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
form label{display:flex;flex-direction:column;gap:6px}
form .fl{font-weight:600;font-size:12.5px;color:#8A8880}
form input,form textarea{background:#F3F3F3;border:none;border-radius:12px;padding:13px 15px;font-size:14.5px;color:#14151A;font-family:inherit}
form input:focus,form textarea:focus{outline:2px solid #FF6B45;outline-offset:0}
form textarea{resize:vertical}
.form-2col{display:flex;flex-wrap:wrap;gap:14px}
.form-2col label{flex:1 1 140px}
form button{align-self:flex-start;margin-top:6px;font-weight:700;font-size:14px;color:#fff;background:#FF6B45;padding:13px 26px;border-radius:999px;transition:filter .2s}
form button:hover{filter:brightness(.93)}

.term{flex:1 1 320px;background:#14151A;border-radius:16px;overflow:hidden;align-self:flex-start;min-width:min(100%,320px)}
.term-head{display:flex;gap:6px;padding:12px 14px;background:#1E2027}
.term-head span{width:10px;height:10px;border-radius:50%;background:#3A3D46}
.term-head span:first-child{background:#FF6B45}
.term-body{padding:18px 20px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:2;color:#E8E6E1}
.term .tp{color:#FF9270}
.term .tok{color:#5BD89A}
.term .tl{opacity:0;animation:tline .01s forwards}
.term .t1{animation-delay:.15s}.term .t2{animation-delay:.75s}.term .t3{animation-delay:1.3s}.term .t4{animation-delay:1.8s}
.term .tcur{animation:tline .01s 1.8s forwards, tblink 1s 1.8s step-end infinite}
@keyframes tline{to{opacity:1}}
@keyframes tblink{50%{opacity:0}}
footer{margin:64px 6px 18px;background:#14151A;border-radius:18px;padding:clamp(28px,4vw,44px)}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.foot-brand .word{color:#fff}
.foot-brand p{font-weight:400;font-size:13.5px;color:#9A98A0;margin:14px 0 0;max-width:26ch}
.foot-cols{display:flex;flex-wrap:wrap;gap:48px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col .h{font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#FF9270;margin-bottom:2px}
.foot-col a,.foot-col span{font-weight:400;font-size:13.5px;color:#9A98A0}
.foot-col a:hover{color:#fff}
.foot-legal{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.foot-legal span{font-size:12px;color:#6E6C74}

/* ── RÉVÉLATION AU DÉFILEMENT ──
   .rv n'est masqué QUE si le script de révélation a posé html.rv-on (accueils).
   Sur une page sans ce script, le contenu reste visible : plus jamais de page
   « blanche » parce qu'un .rv attend un observateur absent. */
.rv{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.rv-on .rv:not(.in){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){html.rv-on .rv:not(.in){opacity:1;transform:none;transition:none}}

/* ── ÉTROIT (≤ 860 px) : la piste de pastilles passe sur sa propre ligne ── */
@media(max-width:860px){
  nav.top{flex-wrap:wrap;row-gap:10px;padding:10px 0}
  .pilltrack{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:space-between}
  .pilltrack::-webkit-scrollbar{display:none}
  /* 25/08 : ne plus masquer la 1re et la dernière entrée — le menu burger affiche
     la liste complète, la contrainte de largeur qui justifiait ce masquage a disparu. */
  .langwrap{margin-left:auto}
  [id],:target{scroll-margin-top:120px}
  .cards3{flex-wrap:wrap}
  .c3.dark1,.c3.dark2,.c3.white{flex:1 1 100%}
  .split{flex-direction:column}
  .hero .txt{left:20px;right:20px;bottom:24px;max-width:none}
  .hero .glass{display:none}
  section{padding:48px 4px 0}
  .bleed{padding-left:4px;padding-right:4px}
  .bleed div{font-size:clamp(26px,8vw,36px)}
  .prod-list .row{flex-wrap:nowrap;align-items:flex-start}
  .plogo{width:28px;height:28px;margin-top:2px}
  .prod-list .arrmini{display:none}
  .row .ic{width:48px;height:48px}
  .row .num{flex-basis:44px;font-size:30px}
  .foot-cols{gap:28px}
}
@media(max-width:560px){
  .page{padding:16px 16px 0}
}
@media(max-width:360px){
  .page{padding:14px 13px 0}
  .pilltrack a{padding:7px 9px;font-size:11.5px}
}

/* ── MENU BURGER SUR MOBILE (25/08/2026) ─────────────────────────────────────
   Le ruban défilable tenait à 7 entrées, mais il coupait « Réglementation » au
   bord dès 320 px, et le nombre d'entrées va augmenter. Un menu qui se découvre
   en faisant glisser du doigt est un menu que personne n'explore : on ne cherche
   pas ce qu'on ne voit pas.
   Choix : un bouton qui ouvre la liste ENTIÈRE, à plat. Pas d'animation
   d'ouverture — sur un menu de navigation elle ne fait que retarder le clic.
   Fonctionne sans JavaScript : c'est une case à cocher masquée qui pilote
   l'affichage. Rien à charger, rien qui casse si un script échoue. */
.burger{display:none}
.burger-btn{display:none}

@media (max-width:920px){
  .burger-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:42px; padding:0 16px; border:1px solid #ECECEC; border-radius:999px;
    background:#fff; font-weight:700; font-size:13px; color:#14151A;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    max-width:56vw; padding:0 14px;
  }
  /* Le bouton porte le nom de la section courante : replié, c'est le SEUL
     repère de position sur mobile. Tronqué plutôt que de casser l'en-tête. */
  .burger-btn b{
    font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .burger-btn span{display:block; flex:0 0 auto; width:16px; height:1.5px; background:#14151A; position:relative}
  .burger-btn span::before,.burger-btn span::after{
    content:""; position:absolute; left:0; width:16px; height:1.5px; background:#14151A;
  }
  .burger-btn span::before{top:-5px}
  .burger-btn span::after{top:5px}

  /* la piste devient un panneau déroulant, replié par défaut */
  .pilltrack{
    order:3; width:100%; display:none; flex-direction:column; align-items:stretch;
    gap:2px; border-radius:14px; padding:8px; margin-top:10px; overflow:visible;
  }
  .burger:checked ~ .pilltrack{display:flex}
  .pilltrack a{
    padding:13px 14px; border-radius:10px; font-size:15px; text-align:left;
    border-bottom:1px solid #F4F4F3;
  }
  .pilltrack a:last-child{border-bottom:0}
  /* cible tactile confortable : 44 px, la recommandation d'accessibilité */
  .pilltrack a{min-height:44px; display:flex; align-items:center}
  .burger:checked ~ .burger-btn span{background:transparent}
  .burger:checked ~ .burger-btn span::before{top:0; transform:rotate(45deg)}
  .burger:checked ~ .burger-btn span::after{top:0; transform:rotate(-45deg)}
  .top{flex-wrap:wrap}
}
@media (min-width:921px){ .burger,.burger-btn{display:none} }