/* ===================================================================
     MORPHISM — V3 « LA SPHÈRE DE DONNÉES » — ROUND 7 — DÉCLINAISON CLAIRE
     Même identité, même structure : fond blanc, surfaces #F3F3F3/#FAFAFA,
     fenêtres d'imagerie (canvas) volontairement SOMBRES comme dans les
     planches claires de la charte (scans noirs sur page blanche).
     Logo officiel SVG, header capsule flottante, boutons majuscules,
     intégration (ligne de progression + règle de temps proportionnelle)
     et souveraineté (cadre-périmètre) en deux sections dédiées,
     CTA minimal sombre, footer une rangée (filets alignés sur le contenu)
     + wordmark géant. Contrastes AAA (corps ≥ 8:1, labels ≥ 5.5:1).
     Registre métrologie. Aucun glow, aucun néon.
     =================================================================== */

  :root{
    --bg:#FFFFFF;           /* fond de page */
    --panel:#FAFAFA;        /* surfaces discrètes : tuiles, conteneurs */
    --panel-2:#F3F3F3;      /* surfaces appuyées : barres de titre, en-têtes, tab actif */
    --line:#E2E2E2;         /* filet discret */
    --line-2:#D5D5D5;       /* filet appuyé */

    --ink:#080605;          /* titres, mots-clés, valeurs — ≈ 20.2:1 sur blanc */
    --grey-light:#F3F3F3;   /* réservé aux OVERLAYS posés sur les fenêtres d'imagerie sombres */
    --grey-title:#4C5256;   /* partie « contexte » des titres — ≈ 7.9:1 sur blanc, 7.15:1 sur #F3F3F3 */
    --grey-body:#33383B;    /* texte courant / descriptions — ≈ 11.9:1 sur blanc */
    --grey-mut:#545B5F;     /* labels mono, notes, légendes — ≈ 6.9:1 sur blanc, 5.9:1 sur #F3F3F3 */

    --ocean:#157086;        /* CTA pleins, eyebrows, accents — 5.7:1 sur blanc */
    --ocean-deep:#0F6076;   /* texte océan sur fond clair (remplace ocean-mid en texte) — 7:1 sur blanc */
    --ocean-mid:#57A6B4;    /* UNIQUEMENT décoratif sur fond clair */
    --ocean-light:#B3D2DC;

    --radius:0px;
    --maxw:1200px;
    --gut:clamp(20px,4.5vw,56px);

    --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
    --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--grey-body);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.5;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-0.01em;text-wrap:balance}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  img,canvas,svg{max-width:100%;display:block}
  button{font:inherit;color:inherit}
  ::selection{background:var(--ocean);color:#fff}

  :focus-visible{outline:2px solid var(--ocean);outline-offset:3px;border-radius:0}

  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.22em;
    color:var(--ocean);
    display:inline-flex;
    align-items:center;
  }


  /* Motif "+" — trame de croix : opacité 0.10 minimum (retour client :
     visibles sur le blanc sans gêner la lecture). Une seule variante de tuile,
     les conteneurs qui la posent ne réduisent plus son opacité. */
  section{position:relative}
  .sec-pad{padding-block:clamp(64px,9vw,120px)}

  /* Tête de section — eyebrow mono seul, sans index ni filet */
  .sec-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
  .sec-head{max-width:780px}
  .sec-title{
    font-size:clamp(28px,4vw,44px);
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.06;
    margin-top:22px;
  }
  .sec-title .mut{color:var(--grey-title);font-weight:400}
  .sec-sub{color:var(--grey-body);font-size:clamp(16px,1.5vw,18px);line-height:1.62;margin-top:20px;max-width:64ch}

  /* ===================== HEADER / NAV — capsule flottante ===================== */
  /* bandeau fixe pleine largeur ; la capsule (.nav) reprend la geometrie exacte
     de .wrap (meme --gut, meme centrage en flux) : bords toujours alignes au contenu */
  header.site{
    position:fixed;top:14px;left:0;right:0;z-index:60;
    pointer-events:none;
  }
  header.site.scrolled .nav{background:rgba(255,255,255,0.92)}
  /* ancre : le titre atterrit ~128px du haut (padding interne compense) */
  section[id]{scroll-margin-top:calc(128px - clamp(64px,9vw,120px))}
  /* le constat enchaine directement sur la demonstration : pas de filet,
     et une respiration reduite de part et d'autre de la jointure */
  #probleme{padding-bottom:clamp(36px,4.6vw,60px)}
  #mesure{padding-top:clamp(36px,4.6vw,60px)}
  /* jointure souverainete / a propos : deux fonds blancs qui se suivent */
  #confidentialite{padding-bottom:clamp(36px,4.6vw,60px)}
  #apropos{padding-top:clamp(36px,4.6vw,60px)}
  /* respiration avant la bascule sur le bleu du CTA */
  #apropos{padding-bottom:clamp(76px,9.5vw,128px)}
  .nav{
    pointer-events:auto;position:relative;
    display:flex;align-items:center;gap:28px;height:56px;padding-left:20px;padding-right:10px;
    width:calc(100% - 2*var(--gut));max-width:calc(var(--maxw) - 2*var(--gut));
    margin-inline:auto;
    background:rgba(255,255,255,0.82);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border:1px solid rgba(8,6,5,0.10);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(8,6,5,0.10);
    transition:background .25s ease;
  }
  /* Liens centres dans la capsule, logo et CTA ancres aux bords.
     Seuil a 1000px : logo (185) + liens (459) + CTA (156) + marges exigent
     une capsule d'au moins ~869px, soit un viewport >= ~955px ; en dessous
     les liens centres recouvriraient le logo et le CTA (tous deux hors flux).
     Sous ce seuil, c'est le menu burger qui prend le relais. */
  @media (min-width:1000px){
    .nav{position:relative;justify-content:center}
    .brand{position:absolute;left:20px;top:50%;transform:translateY(-50%);margin-right:0}
    .nav-cta{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
  }
  .brand{display:flex;align-items:center;margin-right:auto}
  .brand .logo{display:block;height:17px;width:auto;aspect-ratio:289.92/26.64;color:var(--ink)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a:not(.nav-cta){
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    text-transform:uppercase;letter-spacing:0.12em;
    color:var(--grey-body);
    transition:color .18s ease;position:relative;padding:6px 0;
  }
  .nav-links a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:var(--ocean-mid);transform:scaleX(0);transform-origin:left;
    transition:transform .22s ease;
  }
  .nav-links a:not(.nav-cta):hover{color:var(--ink)}
  .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
  .nav-cta{
    font-family:var(--sans);background:var(--ocean);color:#fff;font-weight:600;
    font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;
    padding:9px 16px;border-radius:var(--radius);
    border:1px solid var(--ocean);
    transition:background .18s ease;white-space:nowrap;
  }
  .nav-cta:hover{background:#12606f}
  .burger{
    display:none;background:none;border:1px solid var(--line-2);
    border-radius:0;width:40px;height:38px;cursor:pointer;
    align-items:center;justify-content:center;
  }
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:background .2s ease}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s ease,top .25s ease}
  .burger span::before{top:-5px}.burger span::after{top:5px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

  /* ===================== HERO — LA SPHÈRE DE DONNÉES ===================== */
  .hero{
    position:relative;
    overflow:hidden;
    background:var(--bg);
    border-bottom:0;
  }
  .hero .sphere-stage{
    position:absolute;inset:0;z-index:0;pointer-events:none;
  }
  .hero .sphere-stage canvas{width:100%;height:100%;display:block}
  /* Voile radial — recentré sur le bloc titre (colonne gauche) :
     lisibilité garantie au centre du bloc, champ radial perceptible autour */
  .hero .veil{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(52% 54% at 50% 46%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%);
  }

  /* TEST — composition « à la Grok » : bloc aligné à gauche,
     lignes du titre désaxées (réf. « Understand / The Universe ») */
  .hero-inner{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding-top:clamp(122px,14vw,180px);
    padding-bottom:clamp(56px,7vw,96px);
    min-height:min(86vh,860px);
    justify-content:center;
  }
  .hero h1{
    font-size:clamp(38px,6.2vw,74px);
    line-height:1.02;
    letter-spacing:-0.03em;
    font-weight:600;
    margin-top:26px;
    max-width:17ch;
  }
  .hero h1 .mut{color:var(--grey-title);font-weight:400;display:block}
  .hero h1 .kw{color:var(--ink);display:block}
  .hero-sub{
    margin-top:24px;max-width:62ch;color:var(--grey-body);
    font-size:clamp(16px,1.5vw,18.5px);line-height:1.62;font-weight:400;
  }
  .hero-sub b{color:var(--ink);font-weight:600}

  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;justify-content:center}
  /* TEST — boutons « coin coupé » (réf. GET STARTED Grok) :
     rectangle net, coin inférieur droit biseauté à 45°. Aucun border-radius. */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-size:13.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:0.08em;
    padding:14px 22px;border-radius:var(--radius);cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--ocean);color:#fff;border-color:var(--ocean)}
  .btn-primary:hover{background:#12606f}
  .btn .arw{transition:transform .2s ease}
  .btn-primary:hover .arw{transform:translate(2px,-2px)}
  /* Outline « coin coupé » — technique double polygone :
     l'élément = fond couleur bordure clippé (9px),
     ::before = fond sombre clippé 1px plus petit (8px) -> diagonale nette tracée. */
  .btn-outline{background:#FFFFFF;color:var(--ink);border-color:var(--line-2)}
  .btn-outline:hover{border-color:var(--ink)}


  /* ===================== TICKER TÉLÉMÉTRIE — pièce signature ===================== */
  .ticker{
    position:relative;z-index:3;
    background:var(--panel-2);
    border-top:1px solid var(--line-2);
    border-bottom:1px solid var(--line-2);
    overflow:hidden;
  }
  .ticker-track{
    display:flex;align-items:center;width:max-content;
    height:50px;
    animation:tk 46s linear infinite;
    will-change:transform;
  }
  .ticker:hover .ticker-track,
  .ticker:focus-within .ticker-track{animation-play-state:paused}
  @keyframes tk{to{transform:translateX(-50%)}}
  .tk-group{display:flex;align-items:center;flex:0 0 auto}
  .tk-item{
    font-family:var(--mono);
    font-size:13.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--grey-mut);
    white-space:nowrap;
    padding-inline:30px;
    font-variant-numeric:tabular-nums;
  }
  .tk-item b{color:var(--ink);font-weight:500}
  .tk-item .oc{color:var(--ocean-deep)}
  .tk-sep{color:var(--ocean);font-family:var(--mono);font-size:14px;flex:0 0 auto}

  /* ===================== 01 — SANS ALTÉRATION (comparateur) ===================== */
  .compare{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line-2);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .compare-stage{
    position:relative;background:#050506;overflow:hidden;
    aspect-ratio:1024/640;
    touch-action:pan-y;
    cursor:ew-resize;
  }
  .compare-stage canvas{position:absolute;inset:0;width:100%;height:100%}
  .compare-stage .cv-clean{position:relative}
  /* couche dégradée (codec standard), rognée à gauche du curseur */
  .compare-stage .layer-std{
    position:absolute;inset:0;overflow:hidden;
    width:var(--split,50%);
  }
  .compare-stage .layer-std canvas{width:auto;height:100%;max-width:none}

  /* tags bas, meme style que les labels des apercus */
  .cmp-tag{
    position:absolute;bottom:14px;z-index:2;
    font-family:var(--mono);font-size:10.5px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;
    color:#fff;background:rgba(8,6,5,0.8);border:1px solid var(--line-2);
    padding:6px 10px;white-space:nowrap;
  }
  .cmp-tag.left{left:14px}
  .cmp-tag.right{right:14px}
  /* le fond océan signe la moitié Morphism : réservé au comparateur */
  .compare-stage .cmp-tag.right{background:var(--ocean)}

  /* poignée du comparateur */
  .cmp-handle{
    position:absolute;top:0;bottom:0;z-index:5;
    left:var(--split,50%);
    width:0;
    outline-offset:6px;
    cursor:ew-resize;
  }
  .cmp-handle .rail{
    position:absolute;top:0;bottom:0;left:-0.5px;width:1px;
    background:rgba(255,255,255,0.85);
  }
  .cmp-handle .grip{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:38px;height:38px;
    background:rgba(8,6,5,0.85);border:1px solid rgba(255,255,255,0.85);
    display:flex;align-items:center;justify-content:center;gap:5px;
    transition:border-color .18s ease,background .18s ease;
  }
  .cmp-handle:hover .grip,
  .cmp-handle:focus-visible .grip{border-color:var(--ocean-mid);background:rgba(0,67,87,0.85)}
  .cmp-handle .grip i{
    display:block;width:0;height:0;border-block:4px solid transparent;
  }
  .cmp-handle .grip i.l{border-right:5px solid var(--grey-light)}
  .cmp-handle .grip i.r{border-left:5px solid var(--grey-light)}

  /* métriques count-up sous le comparateur */
  .measures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:26px}
  .ms{background:var(--panel);padding:20px 20px 22px;position:relative;transition:background .22s ease}
  .ms:hover{background:var(--panel-2)}
  .ms .mhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--grey-mut);text-transform:uppercase}
  .ms .mhead .tickmk{color:var(--ocean)}
  .ms .v{font-family:var(--mono);font-size:clamp(26px,3.2vw,36px);font-weight:600;color:var(--ink);letter-spacing:-0.01em;margin-top:12px;font-variant-numeric:tabular-nums}
  .ms .v.oc{color:var(--ocean-deep)}
  .ms .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey-title);margin-top:8px}

  /* tableau x6 / x12 — complément compact sous le module */
  .cmp-wrap{margin-top:40px}
  .cmp-kicker{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-title);margin-bottom:14px}
  .cmp-kicker .oc{color:var(--ocean)}
  .cmp{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
  .cmp-scroll{overflow-x:auto}
  .cmp-scroll:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px}
  table.cmp-t{width:100%;border-collapse:collapse;min-width:560px}
  .cmp-t th,.cmp-t td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
  .cmp-t thead th{
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--grey-title);font-weight:500;background:var(--panel-2);
  }
  .cmp-t thead th.morph{color:#fff;background:var(--ocean)}
  .cmp-t tbody th{font-weight:500;color:var(--ink);font-size:14px}
  .cmp-t tbody tr{transition:background .18s ease}
  .cmp-t tbody tr:hover{background:rgba(8,6,5,0.03)}
  .cmp-t td{color:var(--grey-body);font-size:14px}
  .cmp-t td.std{font-family:var(--mono);color:var(--grey-body);font-variant-numeric:tabular-nums}
  .cmp-t td.morph{
    font-family:var(--mono);color:#0B3B47;font-weight:600;font-variant-numeric:tabular-nums;
    background:rgba(21,112,134,0.10);
  }
  .cmp-t td.morph .big{font-size:15px;color:#0B3B47}
  .cmp-t tr:last-child th,.cmp-t tr:last-child td{border-bottom:0}
  .cellbar{min-width:110px}
  .bar{display:block;height:3px;background:var(--line);overflow:hidden;margin-top:8px}
  .bar .fill{display:block;height:100%;width:var(--pct,100%);background:var(--grey-title)}
  .bar .fill.oc{background:var(--ocean)}

  /* ===================== 02 — SECTEURS (TABS) ===================== */
  .sect-grid{
    display:grid;grid-template-columns:0.92fr 1.08fr;
    gap:clamp(24px,3.5vw,44px);
    margin-top:40px;
    align-items:start;
  }
  .sect-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .sect-tab{
    position:relative;
    display:block;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);
    padding:16px 18px 16px 20px;cursor:pointer;
    transition:background .22s ease;
  }
  .sect-tab .st-row{display:flex;align-items:baseline;gap:14px}
  .sect-tab .st-title{font-size:clamp(16px,1.8vw,18.5px);color:var(--grey-title);font-weight:600;transition:color .2s ease}
  .sect-tab .st-desc{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
  }
  .sect-tab .st-desc>span{overflow:hidden;display:block}
  .sect-tab .st-desc p{
    color:var(--grey-body);font-size:14px;line-height:1.55;
    padding-top:8px;max-width:44ch;
  }
  .sect-tab:hover .st-title{color:var(--ink)}
  /* la section est desormais grise : l'onglet actif se detache en blanc */
  .sect-tab[aria-selected="true"]{background:#fff}
  .sect-tab[aria-selected="true"] .st-title{color:var(--ink)}
  .sect-tab[aria-selected="true"] .st-desc{grid-template-rows:1fr}
  /* barre de progression rotation auto */
  .sect-tab .st-progress{
    position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:transparent;overflow:hidden;pointer-events:none;
  }
  .sect-tab .st-progress i{
    display:block;height:100%;width:100%;
    background:var(--ocean);
    transform:scaleX(var(--p,0));transform-origin:left;
  }

  .sect-stage{
    position:relative;
    background:#050506;border:1px solid var(--line-2);border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:12/7.4;
  }
  .sect-panel{
    position:absolute;inset:0;
    opacity:0;transition:opacity .35s ease;
  }
  .sect-panel.active{opacity:1}
  .sect-panel canvas{width:100%;height:100%;object-fit:cover}
  .sect-panel .ov{
    position:absolute;left:12px;bottom:12px;z-index:2;
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
    color:#fff;background:rgba(8,6,5,0.66);border:1px solid var(--line-2);
    padding:5px 10px;border-radius:0;backdrop-filter:blur(3px);
  }
  .sect-panel .meta{
    position:absolute;right:12px;top:12px;z-index:2;
    font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--grey-light);background:rgba(8,6,5,0.66);border:1px solid var(--line-2);
    padding:4px 9px;border-radius:0;
  }

  /* ===================== 03 — PILIERS ===================== */
  .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:40px}
  .pillar{background:var(--panel-2);padding:clamp(24px,3vw,34px)}
  .pillar .pn{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--ocean)}
  .pillar h4{font-size:20px;margin-top:16px;margin-bottom:12px;color:var(--ink)}
  .pillar p{color:var(--grey-body);font-size:14.5px;line-height:1.58}

  /* ===================== 04 — INTÉGRATION (colonnes + ligne de progression + règle de temps) ===================== */
  .steps-flow{
    position:relative;
    margin-top:clamp(20px,2.6vw,32px);
    --sgap:clamp(12px,1.4vw,16px);   /* doit rester égal au gap de .steps */
  }

  .steps{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:var(--sgap,clamp(20px,2.6vw,32px));
  }
  .step{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--bg);
    padding:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px);
  }
  .step .snum{
    font-family:var(--mono);font-size:12px;font-weight:500;
    color:var(--ocean);letter-spacing:0.14em;
    font-variant-numeric:tabular-nums;
  }
  .step h3{font-size:17px;color:var(--ink);font-weight:600;line-height:1.3;margin-top:14px}
  .step p{color:var(--grey-body);font-size:14px;line-height:1.58;margin-top:10px;margin-bottom:18px}
  /* Chips de durée : visibles uniquement ≤720px, où la règle de temps est masquée
     (jamais en même temps que la règle — pas de redondance). */
  .step .dur{
    display:none;
    margin-top:auto;align-self:flex-start;
    font-family:var(--mono);font-size:11px;white-space:nowrap;
    letter-spacing:0.06em;color:var(--grey-title);border:1px solid var(--line-2);
    padding:5px 10px;border-radius:0;background:var(--panel);
  }
  .step .dur.oc{
    color:var(--ocean-deep);border-color:rgba(21,112,134,0.5);
    background:rgba(21,112,134,0.10);
  }

  /* Règle de temps — mini-Gantt aux proportions relatives des phases (2 + 2 + 4 + continu).
     Les colonnes sont égales en contenu, les segments sont proportionnels en durée :
     le décalage est assumé (réf. Circle « Go live in 6 weeks » × Grok « Path of progress »).
     Unité : 10,5 parts = 8 parts de phases + queue « continu » (2,5 parts). */
  .timerule{
    margin-top:40px;
    font-variant-numeric:tabular-nums;
    --u:calc(100%/10.5);
  }
  .tr-scale{
    display:grid;grid-template-columns:repeat(8,1fr) 2.5fr;
    font-family:var(--mono);font-size:10px;font-weight:500;
    letter-spacing:0.12em;color:var(--grey-mut);
  }
  .tr-scale span{position:relative;padding:0 0 7px 6px}
  .tr-scale span::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:6px;background:var(--line-2)}
  .tr-bar{
    position:relative;
    display:grid;grid-template-columns:2fr 2fr 4fr 2.5fr;
    height:28px;
  }
  .tr-seg{position:relative;overflow:hidden;background:rgba(8,6,5,0.05)}
  .tr-seg + .tr-seg{border-left:1px solid var(--bg)}
  .tr-seg .tr-fill{
    position:absolute;inset:0;display:block;
    background:var(--ocean);
    transform-origin:left center;
  }
  .tr-seg.cont{background:linear-gradient(90deg,rgba(8,6,5,0.05),transparent 90%)}
  .tr-seg.cont .tr-fill{
    background:linear-gradient(90deg,var(--ocean),rgba(21,112,134,0) 92%);
  }
  /* petits nœuds carrés aux frontières de phase (réf. Grok) */
  .tr-node{
    position:absolute;top:50%;z-index:2;
    width:5px;height:5px;margin-top:-2.5px;
    left:calc(var(--x) - 2px);
    background:var(--ocean);
  }
  /* labels de phase reliés à la barre par des pointillés verticaux,
     alternance courte / longue (réf. Circle) */
  .tr-labels{position:relative;height:86px}
  .trl{
    position:absolute;top:var(--drop);left:var(--x);
    padding:4px 0 0 9px;
    font-family:var(--mono);text-transform:uppercase;white-space:nowrap;
  }
  .trl::before{
    content:"";position:absolute;left:0;top:calc(-1*var(--drop));
    width:1px;height:calc(var(--drop) + 16px);
    background:repeating-linear-gradient(180deg,var(--line-2) 0 3px,transparent 3px 7px);
  }
  .trl b{display:block;font-size:11px;font-weight:600;letter-spacing:0.12em;color:#33383B}
  .trl i{display:block;font-style:normal;font-weight:400;font-size:10px;letter-spacing:0.08em;color:#545B5F;margin-top:4px}

  /* ===================== 05 — SOUVERAINETÉ — LE PÉRIMÈTRE ===================== */
  .sov-head{display:flex;justify-content:center;text-align:center}
  /* Cadre-périmètre : un TRAIT 1px, angles droits, jamais un panneau rempli */
  .perim{
    position:relative;
    margin-top:40px;
  }
  .perim-head{
    padding:clamp(46px,7vw,88px) clamp(24px,5vw,72px);
    text-align:center;
  }
  .perim-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .perim-frame rect{fill:none;stroke:var(--line-2);stroke-width:1}
  /* réticules « + » aux coins — mêmes repères de mesure que le reste de la page */
  /* boite blanche 23px = respiration entre le trait du cadre et la croix (15px) */
  .pcross{position:absolute;width:23px;height:23px;pointer-events:none;background:var(--bg)}
  .pcross::before{content:"";position:absolute;left:11px;top:4px;bottom:4px;width:1px;background:var(--ocean)}
  .pcross::after{content:"";position:absolute;top:11px;left:4px;right:4px;height:1px;background:var(--ocean)}
  .pcross.c1{top:-11.5px;left:-11.5px}
  .pcross.c2{top:-11.5px;right:-11.5px}
  .pcross.c3{bottom:-11.5px;left:-11.5px}
  .pcross.c4{bottom:-11.5px;right:-11.5px}
  /* labels mono à cheval sur le trait (fond du body derrière) */
  .perim-tag{
    position:absolute;z-index:2;
    font-family:var(--mono);font-size:10px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;
    background:var(--bg);padding:2px 10px;white-space:nowrap;
  }
  .perim-tag.tl{top:0;left:32px;transform:translateY(-50%);color:var(--grey-mut)}
  .perim h2{font-size:clamp(30px,4.4vw,50px);letter-spacing:-0.02em;line-height:1.08}
  .perim h2 .mut{display:block;color:var(--grey-title);font-weight:400}
  .perim h2 .kw{display:block;color:var(--ink)}
  .perim-line{
    margin:24px auto 0;max-width:54ch;
    color:var(--grey-body);
    font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;
  }

  /* Souveraineté — bande conformité sans conteneur (réf. Linear) */
  /* Fiche technique — integree dans le perimetre ; le filet haut = l'ancienne bordure basse */
  .sov-specs{border-top:1px solid var(--line-2);text-align:left}
  .spec-row{
    display:grid;grid-template-columns:auto 1fr;
    gap:clamp(20px,4vw,48px);align-items:baseline;
    padding:clamp(18px,2.4vw,26px) 32px;
  }
  .spec-row + .spec-row{border-top:1px solid var(--line)}
  .spec-row .spec-label{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ocean);
  }
  .spec-row p{color:var(--grey-body);font-size:clamp(15px,1.6vw,17px);line-height:1.6;margin:0 0 0 auto;text-align:right;max-width:64ch}

  /* ===================== 06 — CTA FINAL (minimal) ===================== */
  .final{position:relative;overflow:hidden;background:var(--ocean)}
  /* fond anime : canvas de croix « + » (vague lente), masque radial pour degager le titre */
  .final-inner{position:relative;z-index:1;text-align:center;max-width:840px;margin:0 auto}
  .final h2{font-size:clamp(34px,4.8vw,58px);letter-spacing:-0.02em;line-height:1.04}
  .final .eyebrow{color:rgba(255,255,255,0.88)}
  .final h2{color:#fff}
  .final h2 .mut{color:#DCE7EA;font-weight:400}
  /* rangee equilibree : bouton + email cote a cote (ref. Resend) */
  .final .final-ctas{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:40px}
  .final .final-ctas .btn{padding:16px 26px;font-size:14px}
  .final .btn-mail{
    font-family:var(--mono);text-transform:none;letter-spacing:0.04em;font-size:14px;
    background:#fff;color:var(--ocean);border-color:#fff;
  }
  .final .btn-mail:hover{background:#E7F0F2}
  /* meme glyphe de fleche que le CTA du hero (fonte sans, pas mono) */
  .final .btn-mail .arw{font-family:var(--sans)}

  /* ===================== FOOTER — rangée unique + barre légale + wordmark géant ===================== */
  /* Les filets vivent DANS le .wrap : alignés exactement sur les bords du contenu */
  /* Footer — barre pleine largeur + wordmark geant coupe, sur ocean */
  footer.site{background:var(--ocean)}
  .foot-bar{
    padding:24px clamp(20px,2.2vw,34px) 0;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  }
  .foot-rule{height:1px;background:rgba(255,255,255,0.30);margin-inline:clamp(20px,2.2vw,34px)}
  .foot-sign{overflow:hidden;padding-top:32px;padding-inline:clamp(20px,2.2vw,34px)}
  .sign-mark{
    display:block;width:100%;height:auto;
    aspect-ratio:289.92/26.64;
    color:#FFFFFF;
    margin-bottom:-2.58%;   /* hauteur du logo = 9.2% de la largeur : 72% visible (28% coupe) */
    user-select:none;
  }
  .foot-links{display:flex;gap:22px;align-items:center}
  .foot-links a{
    font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.06em;
    color:#fff;border-bottom:1px solid transparent;transition:border-color .16s ease;
  }
  .foot-links a.up{text-transform:uppercase;letter-spacing:0.1em}
  .foot-links a:hover{border-bottom-color:#fff}
  /* Barre reseaux/legal integree au bas de la section CTA grise */
  .foot-bar .mini{display:flex;gap:20px;flex-wrap:wrap}
  .foot-bar .mini a{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#fff;border-bottom:1px solid transparent;transition:border-color .16s ease}
  .foot-bar .mini a:hover{border-bottom-color:#fff}

  /* ===================== LE PROBLÈME — LE CONSTAT =====================
     Réf. V7 « widespread problems » : l'énoncé du problème à gauche
     (le titre, puis les impasses marquées ✕), la preuve visuelle à droite.
     Le cadre reprend le langage périmètre (filet 1px + réticules « + »),
     la vignette mono réutilise .cmp-tag : aucune règle dupliquée. */
  /* deux lignes : le titre seul en haut a gauche, puis les trois blocs a gauche
     et la planche a droite — meme ligne, donc EXACTEMENT la meme hauteur. */
  .prob-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    column-gap:clamp(24px,2.8vw,40px);row-gap:clamp(24px,3vw,36px);
    align-items:stretch;
  }
  .prob-txt{grid-column:1;grid-row:1}
  .prob-dead{grid-column:1;grid-row:2}
  .prob-fig{grid-column:2;grid-row:2}
  .prob-txt .sec-head{max-width:none}
  /* coupure entre les deux phrases sans <br> : le repli naturel reprend sous 560px */
  #probleme .sec-title .mut{display:block}
  /* trois reponses, trois blocs de meme gabarit, pleine largeur de la colonne.
     Chaque bloc porte en tete son index et SON VERDICT en mono : la colonne de
     droite se lit seule (cout croissant / perte definitive / Morphism).
     La troisieme est pleine ocean : la reponse se voit avant d'etre lue. */
  .prob-dead{margin:0;padding:0;list-style:none;display:grid;gap:14px}
  .prob-dead li{border:1px solid var(--line-2);padding:16px 22px 20px}
  .pd-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--grey-mut);
    padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
  }
  .prob-dead h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
  .prob-dead p{margin-top:6px;color:var(--grey-body);font-size:14.5px;line-height:1.6}
  .prob-dead li.pd-yes{background:var(--ocean);border-color:var(--ocean)}
  .prob-dead li.pd-yes .pd-head{color:#fff;border-bottom-color:rgba(255,255,255,0.4)}
  .prob-dead li.pd-yes h3,.prob-dead li.pd-yes p{color:#fff}
  /* fenêtre d'imagerie : sombre sur la page claire, comme les autres planches */
  /* chaque bloc garde la hauteur de son texte : la liste ne s'etire pas */
  .prob-dead{align-content:start}
  /* le cadre est en absolu : il ne pese pas sur la hauteur de ligne, c'est la
     colonne de gauche qui la fixe, et le schema s'y adapte */
  .prob-fig{position:relative;margin:0;min-height:0}
  /* le graphique se suffit : aucun cadre, aucun fond */
  .prob-frame{position:absolute;inset:0}
  .prob-frame svg{display:block;width:100%;height:100%}
  /* le trace */
  .cc-axis{stroke:var(--line-2);stroke-width:1}
  .cc-tick{stroke:var(--line-2);stroke-width:1}
  .cc-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .cc-line.sans{stroke:var(--ink);stroke-width:2}
  .cc-line.codec{stroke:var(--grey-mut);stroke-width:1.5}
  .cc-line.morph{stroke:var(--ocean);stroke-width:2.5}
  .cc-lbl{
    font-family:var(--mono);font-size:12.5px;font-weight:500;
    letter-spacing:0.1em;text-transform:uppercase;fill:var(--grey-mut);
  }
  .cc-lbl.ink{fill:var(--ink)}
  .cc-lbl.oc{fill:var(--ocean-deep)}
  .cc-ax{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;fill:var(--grey-mut);
  }

  /* ===================== COMPARATEUR — CARROUSEL INFINI CENTRÉ =====================
     Réf. Mistral AI customer stories : slide centrale + voisines qui dépassent.
     La slide centrale = le comparateur complet ; les voisines = le MÊME comparateur
     en clone statique atténué. Recentrage instantané après la transition (boucle infinie). */
  .cmp-car{
    margin-top:22px; /* la rangée d'onglets au-dessus porte l'essentiel de l'espacement */
    /* sortie de la colonne .wrap : pleine largeur de l'ecran */
    width:100vw;margin-left:calc(50% - 50vw);
  }
  .cmp-viewport{overflow:hidden}
  .cmp-track{
    display:flex;align-items:stretch;justify-content:center;
    gap:clamp(12px,1.8vw,22px);
    will-change:transform;
  }
  .cmp-slide-main{flex:0 0 min(80vw,calc(var(--maxw) - 2*var(--gut)));min-width:0}
  .cmp-peek{
    /* MEMES dimensions que la slide principale : aucun etirement possible */
    position:relative;flex:0 0 min(80vw,calc(var(--maxw) - 2*var(--gut)));
    background:#050506;border:1px solid var(--line-2);border-radius:var(--radius);
    padding:0;cursor:pointer;overflow:hidden;
  }
  /* Aperçus = CLONES STRICTS de la slide centrale : MÊMES classes réutilisées
     (.compare-stage, .layer-std, .cmp-handle), mêmes buffers 1024×640, même
     mécanisme var(--split). Seules règles propres aux aperçus : partage fixé
     à 50 %, curseur pointer, poignée décorative (non interactive), voile
     d'atténuation, label secteur. */
  .cmp-peek .compare-stage{--split:50%;cursor:pointer}
  .cmp-peek .cmp-handle{pointer-events:none}
  /* voile : simple div overlay sombre superposé, sans canvas propre
     (z6 : au-dessus de la poignée z5, sous le label z7) — contenu perçu
     à .55 (hover/focus .75), équivalent de l'ancien voile-conteneur */
  .cmp-peek .peek-veil{
    position:absolute;inset:0;z-index:6;display:block;
    background:#050506;opacity:.45;
    transition:opacity .25s ease;pointer-events:none;
  }
  .cmp-peek:hover .peek-veil,
  .cmp-peek:focus-visible .peek-veil{opacity:.25}
  /* label posé AU-DESSUS du voile : lisibilité conservée (blanc sur fond sombre) */
  .cmp-peek .peek-lbl{
    position:absolute;bottom:14px;z-index:7;
    font-family:var(--mono);font-size:10.5px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;
    color:#fff;background:rgba(8,6,5,0.8);border:1px solid var(--line-2);
    padding:6px 10px;white-space:nowrap;
  }
  .cmp-peek.prev .peek-lbl{right:14px}
  .cmp-peek.next .peek-lbl{left:14px}
  /* sélecteur de type de client : onglets TEXTE alignés à gauche sur la colonne
     de contenu (dans le .wrap, au-dessus du carrousel full-bleed) ; les flèches
     < > sont déportées discrètement à l'extrémité droite de la même rangée.
     Aucun arrondi, aucune bordure de boîte : l'état actif est porté par la
     couleur (#0F6076, 7:1 sur blanc) + un soulignement 1px océan. */
  .car-tabsrow{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px 24px;margin-top:40px;
  }
  .car-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
  .car-tab{
    font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:0.1em;text-transform:uppercase;
    background:transparent;border:0;border-radius:0;cursor:pointer;
    padding:2px 0 7px;color:#545B5F; /* ≈ 6.6:1 sur blanc */
    border-bottom:1px solid transparent;
    transition:color .18s ease,border-color .18s ease;
  }
  .car-tab:hover{color:var(--ink)}
  .car-tab.on{color:var(--ocean-deep);border-bottom-color:var(--ocean);cursor:default}
  .car-arrows{display:inline-flex;gap:8px;flex:0 0 auto}
  .car-arrow{
    background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius);
    width:36px;height:32px;cursor:pointer;
    font-family:var(--mono);font-size:14px;color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;
    transition:border-color .18s ease;
  }
  .car-arrow:hover{border-color:var(--ink)}

  /* CAS D'USAGE — UN cas (demande client), structure prête pour les suivants.
     Réf. Upwork : plaque à gauche, à droite le récit puis le bloc de relevés
     sous filet, chaque chiffre suivi de sa phrase de contexte. */
  .uc-case{
    display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
    gap:clamp(22px,2.8vw,40px);align-items:stretch;
    margin-top:clamp(26px,3vw,38px);
    border:1px solid var(--line-2);padding:clamp(18px,2.2vw,26px);
  }
  /* la plaque ne pèse pas sur la hauteur : c'est le récit qui la fixe */
  .uc-plate{
    position:relative;min-height:clamp(230px,24vw,300px);
    border:1px solid var(--line-2);background:#040405;
  }
  .uc-plate canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* le recit occupe toute la colonne, comme les releves en dessous */
  .uc-recit{margin-top:0;color:var(--grey-body);font-size:15px;line-height:1.64}
  /* RELEVÉS (réf. YLLW « sustainability must be measurable ») : trois colonnes
     séparées de filets verticaux, la phrase en haut, le chiffre en grand en bas.
     Aucun pictogramme : c'est l'échelle du chiffre qui porte la lecture. */
  .uc-relhead{
    margin-top:clamp(26px,3vw,36px);
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--ocean-deep);
  }
  .uc-rel{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    margin:clamp(18px,2vw,24px) 0 0;
  }
  .uc-row{
    display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
    padding:0 clamp(20px,2.4vw,34px);
  }
  .uc-row:first-child{padding-left:0}
  .uc-row:last-child{padding-right:0}
  .uc-row + .uc-row{border-left:1px solid var(--line)}
  .uc-rel dd{
    margin:0;order:1;color:var(--grey-body);
    font-size:13.5px;line-height:1.5;
  }
  .uc-rel dt{
    order:2;margin-top:auto;
    font-family:var(--mono);font-size:clamp(30px,3.6vw,44px);font-weight:600;
    color:var(--ink);letter-spacing:-0.02em;line-height:1;
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .uc-row.lead dt{color:var(--ocean-deep)}
  .uc-rel dt .u{font-size:0.52em;margin-left:0.06em;letter-spacing:0}
  .uc-foot{
    margin-top:clamp(16px,1.8vw,22px);
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.05em;color:var(--grey-mut);
  }

  .about-lead{
    margin-top:clamp(18px,2vw,24px);max-width:66ch;
    color:var(--grey-body);font-size:clamp(16px,1.7vw,18.5px);line-height:1.6;
  }
  .about-cols{
    margin-top:clamp(24px,2.6vw,34px);
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3vw,44px);
  }
  .about-col{border-top:1px solid var(--line-2);padding-top:clamp(16px,1.8vw,22px)}
  .ac-label{
    display:block;margin-bottom:12px;
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--ocean-deep);
  }
  .about-col p{color:var(--grey-body);font-size:14.5px;line-height:1.62;margin:0}

  /* la grande image, entre le relevé d'identité et les engagements */
  .about-fig{margin:clamp(24px,2.6vw,34px) 0 0}
  .about-shot{
    position:relative;aspect-ratio:16/9;
    background:var(--panel-2);border:1px solid var(--line-2);
    display:grid;place-items:center;padding:24px;text-align:center;
  }
  .about-shot span{
    font-family:var(--mono);font-size:10.5px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--grey-mut);line-height:1.9;
  }
  #apropos .pillars{margin-top:clamp(20px,2.2vw,30px)}



  /* ===================== RESPONSIVE ===================== */
  @media (max-width:960px){
    /* empile : titre, planche en paysage, puis les trois blocs */
    .prob-grid{grid-template-columns:1fr}
    .prob-txt,.prob-fig,.prob-dead{grid-column:1;grid-row:auto}
    .prob-frame{aspect-ratio:3/2;height:auto}
    .sect-grid{grid-template-columns:1fr;gap:20px}
    /* tabs horizontaux scrollables au-dessus du visuel */
    .sect-tabs{
      flex-direction:row;order:-1;overflow-x:auto;
      border-top:0;border-bottom:1px solid var(--line);
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .sect-tabs::-webkit-scrollbar{display:none}
    .sect-tab{flex:0 0 auto;border-bottom:0;padding:12px 16px;white-space:nowrap}
    /* indicateur actif : uniquement en bas du tab */
    .sect-tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ocean);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
    .sect-tab[aria-selected="true"]::before{transform:scaleX(1)}
    .sect-tab .st-desc{display:none}
    .sect-tab .st-progress{bottom:0}
    .steps{grid-template-columns:1fr 1fr;gap:32px clamp(20px,3vw,32px);padding-top:0}
    /* la ligne de progression suppose 4 colonnes sur une rangée */
  }
  /* NAVIGATION REPLIEE — sous le seuil ou les liens centres tiennent (voir @media
     min-width:1000px) : les liens passent dans le panneau deroulant du burger.
     Bloc isole de la media query 720px : le seuil de la nav est plus haut que
     celui du reste de la mise en page. */
  @media (max-width:999px){
    .nav-links{display:none}
    .nav-links.open{
      display:flex;position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;
      flex-direction:column;gap:0;align-items:stretch;
      background:rgba(255,255,255,0.94);
      backdrop-filter:saturate(140%) blur(14px);
      -webkit-backdrop-filter:saturate(140%) blur(14px);
      border:1px solid rgba(8,6,5,0.10);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(8,6,5,0.12);
      padding:8px 18px 18px;
    }
    .nav-links.open a:not(.nav-cta){padding:12px 0;border-bottom:1px solid var(--line);width:100%}
    .nav-links.open a:not(.nav-cta):last-of-type{border-bottom:0}
    .nav-links.open .nav-cta{margin-top:12px;text-align:center}
    .burger{display:inline-flex}
  }
  @media (max-width:720px){
    header.site{top:12px}
    /* TEST — le désaxage casse les petits écrans : retour à l'empilement simple */
    .hero h1 .kw{margin-left:0}
    .hero .veil{background:radial-gradient(85% 60% at 50% 46%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%)}
    .measures{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr}
    /* ≤720px : la règle de temps laisse place aux chips de durée dans les étapes */
    .timerule{display:none}
    .step .dur{display:inline-block}
    .spec-row{grid-template-columns:1fr;gap:8px;padding-inline:20px}
    .spec-row p{margin-left:0;text-align:left}
    .tk-item{font-size:13px;padding-inline:22px}
    .cmp-tag{bottom:10px;font-size:9.5px}
    .cmp-tag.left{left:10px}
    .cmp-tag.right{right:10px}
    .sec-top{flex-direction:column;gap:10px}
    /* carrousel : slide centrale plus large, aperçus réduits à un liseré */
    .cmp-slide-main,.cmp-peek{flex:0 0 90%}
    .cmp-track{gap:10px}
    .cmp-peek .peek-lbl{display:none}
    .car-tabsrow{margin-top:32px;gap:12px 16px}
    .car-tabs{gap:6px 18px}
    .about-cols{grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px)}
    .uc-case{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .steps{grid-template-columns:1fr;gap:14px}
    .step{padding:20px 18px}
    .step:first-child{border-top:0;padding-top:6px}
  }

  /* ===================== REDUCED MOTION ===================== */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .ticker-track{animation:none!important;transform:none!important;flex-wrap:wrap;height:auto;padding-block:12px;width:100%}
    .ticker-track .tk-group[aria-hidden="true"]{display:none}
    .sect-tab .st-progress{display:none}
  }

/* ===================================================================
   MORPHISM — V9 OVERRIDES
   Architecture et rythme issus de la version webmaster ; contenus et
   composants ajustés pour le nouveau récit. Les images de contenu sont
   des fichiers statiques, jamais générées par JavaScript.
   =================================================================== */

.brand-img{display:block;height:18px;width:auto;max-width:186px}
.hero .sphere-stage{display:grid;place-items:center;overflow:hidden}
.hero .sphere-stage img{
  width:min(1040px,90vw);height:auto;opacity:.52;
  animation:heroField 18s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes heroField{from{transform:scale(.98) rotate(-.4deg);opacity:.44}to{transform:scale(1.035) rotate(.4deg);opacity:.58}}
.hero h1{max-width:19ch}
.hero h1 .kw{color:var(--ink);font-weight:600}
.hero-sub{max-width:66ch}

/* ticker autonome, sans dépendance JS */
.ticker-track{animation:marquee 34s linear infinite}
.ticker:hover .ticker-track,.ticker:focus .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* problème — titre au-dessus, puis graphe + réponses */
#probleme .sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
#probleme .problem-grid{row-gap:0}
#probleme .prob-dead{grid-column:1;grid-row:1}
#probleme .prob-fig{grid-column:2;grid-row:1}
#probleme .prob-dead p{max-width:50ch}

/* comparateur : les deux images ont strictement la même géométrie */
.static-compare img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;display:block;user-select:none;-webkit-user-drag:none;
}
.static-compare .cv-clean{position:absolute}
.static-compare .layer-std{width:var(--split,50%)}
.static-compare .layer-std img{width:100%;height:100%;object-fit:cover}
.cmp-peek .static-compare{--split:50%}
.measures-four{grid-template-columns:repeat(4,1fr)}
.measures-four .ms .v{font-size:clamp(20px,2.2vw,28px);font-family:var(--sans);font-weight:600}
#visuel .sec-head{max-width:760px}

/* performances — volontairement compact : le chiffre ne doit pas engloutir la page */
.perf-section{border-top:1px solid var(--line)}
.perf-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(440px,1.16fr);gap:clamp(48px,7vw,90px);align-items:center}
.perf-grid .sec-head{max-width:560px}
.perf-card{background:#fff;border:1px solid var(--line-2);padding:clamp(20px,2.6vw,30px)}
.perf-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--grey-mut)}
.perf-head strong{font-weight:500;color:var(--ink)}
.perf-bars{display:grid;gap:13px;margin-top:18px}
.perf-row{display:grid;grid-template-columns:84px 1fr 58px;gap:12px;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--grey-title)}
.perf-row>i{display:block;height:8px;background:var(--panel-2);position:relative;overflow:hidden}
.perf-row>i>b{display:block;height:100%;background:var(--grey-title)}
.perf-row.morph{color:var(--ocean-deep);font-weight:600}
.perf-row.morph>i>b{background:var(--ocean)}
.perf-row em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}

/* applications — images réellement statiques */
.sect-panel img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.sect-tab .st-progress{display:none}

/* intégration — 5 étapes de lecture, 4 phases de projet */
.steps-five{grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps-five .step{border:0;min-height:260px;background:#fff}
.steps-five .step h3{font-size:17px}
.steps-five .step p{font-size:13.8px;line-height:1.55}
.timeline-four{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid var(--line-2);position:relative}
.timeline-four::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--ocean) 0 25%,var(--ocean-mid) 25% 50%,var(--grey-title) 50% 75%,var(--line-2) 75% 100%)}
.timeline-four>div{padding:18px 18px 0 0;min-height:90px}
.timeline-four>div+div{border-left:1px solid var(--line);padding-left:18px}
.timeline-four span,.timeline-four small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-mut)}
.timeline-four b{display:block;margin:6px 0 4px;font-size:15px;color:var(--ink);font-weight:600}

/* souveraineté — schéma "Votre système" */
.perim{padding-bottom:0}
.perim-head{padding-bottom:clamp(26px,3.5vw,40px)}
.perim-line{max-width:66ch}
.system-flow{margin:0 32px clamp(28px,3vw,38px);display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;gap:12px;align-items:center}
.flow-node{min-height:116px;border:1px solid var(--line-2);display:grid;place-items:center;align-content:center;text-align:center;padding:18px;gap:7px;background:#fff}
.flow-node strong{font-size:17px;color:var(--ink)}
.flow-node span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-mut)}
.flow-node.morph{background:var(--ocean);border-color:var(--ocean)}
.flow-node.morph strong,.flow-node.morph span{color:#fff}
.system-flow>i{font-style:normal;text-align:center;color:var(--ocean);font-size:24px}
.spec-row .spec-label{min-width:190px}
.spec-row p{text-align:left;margin:0;max-width:none}

/* à propos — photo petite, en haut à droite ; valeurs intégrées au texte */
.about-topline{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(36px,6vw,72px);align-items:start}
.about-mini{margin:0;border:1px solid var(--line-2);overflow:hidden;background:var(--panel-2);aspect-ratio:4/3}
.about-mini img{width:100%;height:100%;object-fit:cover;display:block}
#apropos .sec-head{max-width:700px}
#apropos .about-lead{max-width:62ch}
.about-col p{text-align:justify;text-wrap:pretty}

/* footer : logo centré, présent mais discret */
.footer-compact .foot-sign{display:flex;justify-content:center;align-items:center;padding:34px 20px 38px}
.footer-compact .foot-sign img{width:min(250px,42vw);height:auto;filter:brightness(0) invert(1);opacity:.95}
.footer-compact .foot-bar{padding-top:22px}

[data-reveal]{opacity:1;transform:none}
[data-reveal].reveal-ready{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].reveal-ready.revealed{opacity:1;transform:none}

@media (max-width:960px){
  #probleme .prob-dead,#probleme .prob-fig{grid-column:1;grid-row:auto}
  #probleme .prob-fig{min-height:420px;margin-top:18px}
  .perf-grid{grid-template-columns:1fr;gap:30px}
  .perf-card{max-width:760px}
  .steps-five{grid-template-columns:1fr 1fr}
  .timeline-four{grid-template-columns:1fr 1fr}
  .system-flow{grid-template-columns:1fr;gap:12px}
  .system-flow>i{transform:rotate(90deg)}
  .about-topline{grid-template-columns:1fr 230px}
}
@media (max-width:720px){
  .hero .sphere-stage img{width:130vw}
  .measures-four{grid-template-columns:1fr 1fr}
  .steps-five{grid-template-columns:1fr}
  .steps-five .step{min-height:0}
  .timeline-four{grid-template-columns:1fr}
  .timeline-four>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .system-flow{margin-inline:18px}
  .spec-row{grid-template-columns:1fr;gap:8px}
  .spec-row .spec-label{min-width:0}
  .about-topline{grid-template-columns:1fr}
  .about-mini{width:min(320px,100%)}
  .perf-row{grid-template-columns:74px 1fr 52px}
}
@media (prefers-reduced-motion:reduce){
  .hero .sphere-stage img,.ticker-track{animation:none!important}
  [data-reveal].reveal-ready{opacity:1;transform:none}
}

/* Pages légales */
.legal-copy{max-width:780px;margin-top:42px}
.legal-copy h2{font-size:20px;margin:28px 0 8px}
.legal-copy p{font-size:16px;line-height:1.7;color:var(--grey-body)}
.legal-copy a{color:var(--ocean-deep);border-bottom:1px solid var(--ocean-light)}

/* ===================== V10 PATCHES ===================== */

/* Alternance des fonds par section */
#performances,
#integration,
#apropos{background:var(--panel-2)}
#applications{background:var(--bg)}

/* Logo officiel sans "Group" */
.brand .logo{height:19px;width:auto;color:var(--ink)}

/* Bouton secondaire du hero */
.btn-secondary{
  background:rgba(255,255,255,0.86);
  color:var(--ink);
  border:1px solid rgba(8,6,5,0.16);
}
.btn-secondary:hover{background:#fff}

/* Hero : canevas animé rétabli */
.hero .sphere-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .sphere-stage canvas{display:block;width:100%;height:100%}
.hero .veil{background:radial-gradient(56% 58% at 50% 44%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.63) 52%, rgba(255,255,255,0.06) 100%)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;justify-content:center}

/* Ruban : défilement continu, sans trou visuel */
.ticker{overflow:hidden;white-space:nowrap}
.ticker-track{display:flex;align-items:center;width:max-content;min-width:200%;animation:marquee 26s linear infinite}
.ticker .tk-group{display:flex;align-items:center;flex:0 0 auto}
.ticker:hover .ticker-track,.ticker:focus .ticker-track{animation-play-state:paused}

/* Problème : version plus compacte sans graphique */
#probleme .sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,40px)}
.problem-pains{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.problem-pains li{background:#fff;min-height:100%}
.problem-pains li.pd-yes{background:var(--ocean);border-color:var(--ocean)}
.problem-pains .pd-head{padding-bottom:10px;margin-bottom:12px}
.problem-pains h3{font-size:21px;line-height:1.18;max-width:18ch}
.problem-pains p{font-size:15px;line-height:1.64;max-width:38ch}

/* Comparateur : vrai effet de découverte */
.static-compare .cv-clean,
.static-compare .layer-std,
.static-compare .layer-std img{
  object-fit:cover;
  object-position:center;
}
.static-compare .layer-std{width:var(--split,50%)}
#cmpStage .layer-std,
.cmp-peek .layer-std{will-change:width}
.measures-four{margin-top:28px}
.measures-four .ms{display:grid;align-content:center;justify-items:start;padding:28px 22px 24px;min-height:132px}
.measures-four .mhead{display:none}
.measures-four .ms .v{margin-top:0;font-size:clamp(18px,2.2vw,30px);font-family:var(--sans);font-weight:600;color:var(--ink)}
.measures-four .ms .k{margin-top:10px;font-size:11px;line-height:1.45;letter-spacing:0.11em}

/* Performances : un peu plus d’espace pour le graphique */
.perf-section{border-top:0}
.perf-grid{grid-template-columns:minmax(0,.7fr) minmax(520px,1.3fr);gap:clamp(44px,6vw,80px)}
.perf-card{background:#fff}
.perf-row i{height:8px}
.perf-row em{min-width:58px;text-align:right}

/* Applications */
#applications .sec-head{max-width:860px}
.sect-grid{align-items:stretch}
.sect-tab .st-desc p{max-width:30ch}

/* Intégration : carte + frise façon webmaster */
#integration .steps-flow{margin-top:34px}
#integration .steps-five{grid-template-columns:repeat(5,1fr);background:var(--line);gap:1px;border:1px solid var(--line)}
#integration .steps-five .step{background:#fff;min-height:246px;padding-bottom:18px}
#integration .steps-five .dur{display:none}
.integration-timerule{margin-top:42px}
.integration-timerule .trl{padding-left:10px}
.integration-timerule .trl b{display:block}
.integration-timerule .trl i{display:block;font-size:10px;letter-spacing:0.08em;color:var(--ink);margin-top:4px;font-style:normal}
.integration-timerule .trl small{display:block;margin-top:6px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey-mut)}

/* Souveraineté : cadre autour du schéma */
#confidentialite .perim{margin-top:34px}
#confidentialite .perim-tag.tl{left:34px;color:var(--ocean-deep)}
#confidentialite .perim-head{padding-bottom:36px}
.system-flow{margin:0 32px clamp(32px,3vw,40px);display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr;gap:12px;align-items:center}
.flow-node{min-height:126px}

/* À propos */
.about-lead{color:var(--grey-body);font-size:clamp(16px,1.6vw,18px);line-height:1.62;margin-top:20px;max-width:60ch}

/* Footer plus sobre, logo plus petit et centré */
footer.site{background:var(--ocean)}
.foot-sign-centered{display:flex;justify-content:center;align-items:center;padding:0 20px 30px}
.sign-mark.small{width:min(240px,42vw);height:auto;color:#fff;margin-bottom:0}
.foot-rule{margin-inline:clamp(24px,4vw,44px)}
.foot-bar{padding:20px clamp(24px,4vw,44px) 30px}

/* Mobile */
@media (max-width:999px){
  .hero-ctas{justify-content:flex-start}
}
@media (max-width:920px){
  .problem-pains{grid-template-columns:1fr}
  .perf-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  #integration .steps-five{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  #integration .steps-five{grid-template-columns:1fr}
  .integration-timerule{display:none}
  .system-flow{grid-template-columns:1fr;gap:12px}
  .system-flow>i{transform:rotate(90deg)}
}
@media (max-width:640px){
  .measures-four{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .measures-four{grid-template-columns:1fr}
  .foot-bar{justify-content:center}
  .foot-links,.foot-bar .mini{justify-content:center}
}


/* v11 corrections */
#mesure .compare-stage.static-compare{position:relative;overflow:hidden;--split:50%;aspect-ratio:16/9;}
#mesure .compare-stage.static-compare > img.cv-clean{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
#mesure .compare-stage.static-compare .layer-std{position:absolute;top:0;left:0;bottom:0;width:var(--split,50%);overflow:hidden;}
#mesure .compare-stage.static-compare .layer-std img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;display:block;}
#mesure .cmp-handle{touch-action:none;}
#mesure .measures-four .ms{min-height:136px;justify-content:center;}
#mesure .measures-four .v{margin-top:0;}
#mesure .measures-four .k{margin-top:8px;}

/* Applications: use v8 images with stronger crop */
#applications .sect-panel img{width:100%;height:100%;object-fit:cover;display:block;}

/* Souveraineté: only frame the diagram, not the entire section */
#confidentialite .perim{padding:0;border:none;}
#confidentialite .perim-frame,#confidentialite .perim-tag{display:none!important;}
#confidentialite .perim-head{padding-bottom:28px;}
#confidentialite .infra-diagram{position:relative;border:1px solid var(--ocean);padding:30px 26px 26px;margin:0 0 34px;}
#confidentialite .infra-tag{position:absolute;top:0;left:18px;transform:translateY(-50%);padding:0 10px;background:var(--bg);font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);}
#confidentialite .infra-diagram .system-flow{margin:0;display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr;gap:12px;align-items:center;}
#confidentialite .infra-diagram .flow-node{min-height:124px;}
@media (max-width: 900px){#confidentialite .infra-diagram .system-flow{grid-template-columns:1fr;gap:12px;}#confidentialite .infra-diagram .system-flow>i{transform:rotate(90deg);}}


/* v12 corrective overrides */
#confidentialite .perim, #confidentialite .perim *{box-sizing:border-box;}
#confidentialite .perim{border:none!important;outline:none!important;background:transparent!important;box-shadow:none!important;}
#confidentialite .perim::before,#confidentialite .perim::after{display:none!important;content:none!important;}
#confidentialite .perim > svg, #confidentialite .perim > .perim-frame, #confidentialite .perim > .perim-tag, #confidentialite .perim > .pcross{display:none!important;}
#confidentialite .infra-diagram{position:relative;border:1px solid var(--ocean)!important;padding:24px 20px 18px!important;margin:0 0 34px!important;background:transparent!important;}
#confidentialite .infra-tag{position:absolute;top:0;left:18px;transform:translateY(-50%);padding:0 10px;background:var(--bg);font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);z-index:2;}



/* v13 final fixes */
#mesure #compareDesc{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
#mesure .compare-stage.static-compare{position:relative;overflow:hidden;--split:50%;aspect-ratio:16/9;background:#000;}
#mesure .compare-stage.static-compare > img.cv-clean,
#mesure .compare-stage.static-compare .layer-std img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;max-width:none;}
#mesure .compare-stage.static-compare .layer-std{position:absolute;top:0;left:0;bottom:0;width:var(--split,50%);overflow:hidden;}
#mesure .cmp-handle{top:0;bottom:0;height:auto;}
#mesure .cmp-handle .rail{top:0;bottom:0;height:auto;width:1px;transform:none;left:50%;margin-left:0;}
#confidentialite .perim{margin-top:34px;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;}
#confidentialite .perim::before,#confidentialite .perim::after,#confidentialite .perim > .perim-frame,#confidentialite .perim > .perim-tag,#confidentialite .perim > .pcross{display:none!important;content:none!important;}
#confidentialite .perim-head{padding:0 0 28px!important;text-align:center;}
#confidentialite .infra-diagram{display:table;position:relative;border:1px solid var(--ocean)!important;padding:16px 18px 18px!important;margin:0 auto 34px!important;background:transparent!important;}
#confidentialite .infra-tag{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 10px;background:var(--bg);font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);z-index:2;}
#confidentialite .infra-diagram .system-flow{margin:0;display:grid;grid-template-columns:minmax(250px,410px) 58px minmax(250px,410px) 58px minmax(250px,410px);gap:12px;align-items:center;width:auto;}
#confidentialite .infra-diagram .flow-node{min-height:124px;}
@media (max-width: 1100px){#confidentialite .infra-diagram{display:block;}#confidentialite .infra-diagram .system-flow{grid-template-columns:1fr;max-width:560px;margin:0 auto;}#confidentialite .infra-diagram .system-flow>i{transform:rotate(90deg);}}


/* v15 updates */
#probleme .problem-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
#probleme .problem-pains li{background:#fff;border:1px solid var(--line-2);padding:18px 22px 20px;min-height:100%;}
#probleme .problem-pains li.pd-yes{background:#fff;border-color:var(--line-2);}
#probleme .problem-pains .pd-head,
#probleme .problem-solution .pd-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-mut);}
#probleme .problem-pains h3,#probleme .problem-solution h3{font-size:21px;line-height:1.18;letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px;}
#probleme .problem-pains p,#probleme .problem-solution p{font-size:15px;line-height:1.64;color:var(--grey-body);margin:0;}
#probleme .problem-solution{margin-top:14px;background:var(--ocean);border:1px solid var(--ocean);padding:18px 22px 20px;border-radius:0;}
#probleme .problem-solution .pd-head{color:#fff;border-bottom-color:rgba(255,255,255,.34);}
#probleme .problem-solution h3,#probleme .problem-solution p{color:#fff;}

#mesure .compare-stage.static-compare{position:relative;overflow:hidden;--split:50%;aspect-ratio:1024/640;background:#000;}
#mesure .compare-stage.static-compare > img.cv-clean,
#mesure .compare-stage.static-compare .layer-std img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;max-width:none;}
#mesure .compare-stage.static-compare .layer-std{position:absolute;top:0;left:0;bottom:0;width:var(--split,50%);overflow:hidden;}

#applications .sect-panel img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;}
#applications .sect-panel{background:#0b1117;}

@media (max-width:920px){#probleme .problem-pains{grid-template-columns:1fr;} }

/* Locale catalog: avoid a flash of empty localized nodes while fr_FR.json loads. */
html:not(.i18n-ready):not(.legal-static) body { visibility: hidden; }


/* ===== v21 exact webmaster component CSS ===== */
  /* ===================== HEADER / NAV — capsule flottante ===================== */
  /* bandeau fixe pleine largeur ; la capsule (.nav) reprend la geometrie exacte
     de .wrap (meme --gut, meme centrage en flux) : bords toujours alignes au contenu */
  header.site{
    position:fixed;top:14px;left:0;right:0;z-index:60;
    pointer-events:none;
  }
  header.site.scrolled .nav{background:rgba(255,255,255,0.92)}
  /* ancre : le titre atterrit ~128px du haut (padding interne compense) */
  section[id]{scroll-margin-top:calc(128px - clamp(64px,9vw,120px))}
  /* le constat enchaine directement sur la demonstration : pas de filet,
     et une respiration reduite de part et d'autre de la jointure */
  #probleme{padding-bottom:clamp(36px,4.6vw,60px)}
  #mesure{padding-top:clamp(36px,4.6vw,60px)}
  /* jointure souverainete / a propos : deux fonds blancs qui se suivent */
  #confidentialite{padding-bottom:clamp(36px,4.6vw,60px)}
  #apropos{padding-top:clamp(36px,4.6vw,60px)}
  /* respiration avant la bascule sur le bleu du CTA */
  #apropos{padding-bottom:clamp(76px,9.5vw,128px)}
  .nav{
    pointer-events:auto;position:relative;
    display:flex;align-items:center;gap:28px;height:56px;padding-left:20px;padding-right:10px;
    width:calc(100% - 2*var(--gut));max-width:calc(var(--maxw) - 2*var(--gut));
    margin-inline:auto;
    background:rgba(255,255,255,0.82);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border:1px solid rgba(8,6,5,0.10);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(8,6,5,0.10);
    transition:background .25s ease;
  }
  /* Liens centres dans la capsule, logo et CTA ancres aux bords.
     Seuil a 1000px : logo (185) + liens (459) + CTA (156) + marges exigent
     une capsule d'au moins ~869px, soit un viewport >= ~955px ; en dessous
     les liens centres recouvriraient le logo et le CTA (tous deux hors flux).
     Sous ce seuil, c'est le menu burger qui prend le relais. */
  @media (min-width:1000px){
    .nav{position:relative;justify-content:center}
    .brand{position:absolute;left:20px;top:50%;transform:translateY(-50%);margin-right:0}
    .nav-cta{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
  }
  .brand{display:flex;align-items:center;margin-right:auto}
  .brand .logo{display:block;height:17px;width:auto;aspect-ratio:289.92/26.64;color:var(--ink)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a:not(.nav-cta){
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    text-transform:uppercase;letter-spacing:0.12em;
    color:var(--grey-body);
    transition:color .18s ease;position:relative;padding:6px 0;
  }
  .nav-links a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:var(--ocean-mid);transform:scaleX(0);transform-origin:left;
    transition:transform .22s ease;
  }
  .nav-links a:not(.nav-cta):hover{color:var(--ink)}
  .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
  .nav-cta{
    font-family:var(--sans);background:var(--ocean);color:#fff;font-weight:600;
    font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;
    padding:9px 16px;border-radius:var(--radius);
    border:1px solid var(--ocean);
    transition:background .18s ease;white-space:nowrap;
  }
  .nav-cta:hover{background:#12606f}
  .burger{
    display:none;background:none;border:1px solid var(--line-2);
    border-radius:0;width:40px;height:38px;cursor:pointer;
    align-items:center;justify-content:center;
  }
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:background .2s ease}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s ease,top .25s ease}
  .burger span::before{top:-5px}.burger span::after{top:5px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}


  .ticker{
    position:relative;z-index:3;
    background:var(--panel-2);
    border-top:1px solid var(--line-2);
    border-bottom:1px solid var(--line-2);
    overflow:hidden;
  }
  .ticker-track{
    display:flex;align-items:center;width:max-content;
    height:50px;
    animation:tk 46s linear infinite;
    will-change:transform;
  }
  .ticker:hover .ticker-track,
  .ticker:focus-within .ticker-track{animation-play-state:paused}
  @keyframes tk{to{transform:translateX(-50%)}}
  .tk-group{display:flex;align-items:center;flex:0 0 auto}
  .tk-item{
    font-family:var(--mono);
    font-size:13.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--grey-mut);
    white-space:nowrap;
    padding-inline:30px;
    font-variant-numeric:tabular-nums;
  }
  .tk-item b{color:var(--ink);font-weight:500}
  .tk-item .oc{color:var(--ocean-deep)}
  .tk-sep{color:var(--ocean);font-family:var(--mono);font-size:14px;flex:0 0 auto}

  .cmp-car{
    margin-top:22px; /* la rangée d'onglets au-dessus porte l'essentiel de l'espacement */
    /* sortie de la colonne .wrap : pleine largeur de l'ecran */
    width:100vw;margin-left:calc(50% - 50vw);
  }
  .cmp-viewport{overflow:hidden}
  .cmp-track{
    display:flex;align-items:stretch;justify-content:center;
    gap:clamp(12px,1.8vw,22px);
    will-change:transform;
  }
  .cmp-slide-main{flex:0 0 min(80vw,calc(var(--maxw) - 2*var(--gut)));min-width:0}
  .cmp-peek{
    /* MEMES dimensions que la slide principale : aucun etirement possible */
    position:relative;flex:0 0 min(80vw,calc(var(--maxw) - 2*var(--gut)));
    background:#050506;border:1px solid var(--line-2);border-radius:var(--radius);
    padding:0;cursor:pointer;overflow:hidden;
  }
  /* Aperçus = CLONES STRICTS de la slide centrale : MÊMES classes réutilisées
     (.compare-stage, .layer-std, .cmp-handle), mêmes buffers 1024×640, même
     mécanisme var(--split). Seules règles propres aux aperçus : partage fixé
     à 50 %, curseur pointer, poignée décorative (non interactive), voile
     d'atténuation, label secteur. */
  .cmp-peek .compare-stage{--split:50%;cursor:pointer}
  .cmp-peek .cmp-handle{pointer-events:none}
  /* voile : simple div overlay sombre superposé, sans canvas propre
     (z6 : au-dessus de la poignée z5, sous le label z7) — contenu perçu
     à .55 (hover/focus .75), équivalent de l'ancien voile-conteneur */
  .cmp-peek .peek-veil{
    position:absolute;inset:0;z-index:6;display:block;
    background:#050506;opacity:.45;
    transition:opacity .25s ease;pointer-events:none;
  }
  .cmp-peek:hover .peek-veil,
  .cmp-peek:focus-visible .peek-veil{opacity:.25}
  /* label posé AU-DESSUS du voile : lisibilité conservée (blanc sur fond sombre) */
  .cmp-peek .peek-lbl{
    position:absolute;bottom:14px;z-index:7;
    font-family:var(--mono);font-size:10.5px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;
    color:#fff;background:rgba(8,6,5,0.8);border:1px solid var(--line-2);
    padding:6px 10px;white-space:nowrap;
  }
  .cmp-peek.prev .peek-lbl{right:14px}
  .cmp-peek.next .peek-lbl{left:14px}
  /* sélecteur de type de client : onglets TEXTE alignés à gauche sur la colonne
     de contenu (dans le .wrap, au-dessus du carrousel full-bleed) ; les flèches
     < > sont déportées discrètement à l'extrémité droite de la même rangée.
     Aucun arrondi, aucune bordure de boîte : l'état actif est porté par la
     couleur (#0F6076, 7:1 sur blanc) + un soulignement 1px océan. */
  .car-tabsrow{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px 24px;margin-top:40px;
  }
  .car-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
  .car-tab{
    font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:0.1em;text-transform:uppercase;
    background:transparent;border:0;border-radius:0;cursor:pointer;
    padding:2px 0 7px;color:#545B5F; /* ≈ 6.6:1 sur blanc */
    border-bottom:1px solid transparent;
    transition:color .18s ease,border-color .18s ease;
  }
  .car-tab:hover{color:var(--ink)}
  .car-tab.on{color:var(--ocean-deep);border-bottom-color:var(--ocean);cursor:default}
  .car-arrows{display:inline-flex;gap:8px;flex:0 0 auto}
  .car-arrow{
    background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius);
    width:36px;height:32px;cursor:pointer;
    font-family:var(--mono);font-size:14px;color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;
    transition:border-color .18s ease;
  }
  .car-arrow:hover{border-color:var(--ink)}

  .sect-grid{
    display:grid;grid-template-columns:0.92fr 1.08fr;
    gap:clamp(24px,3.5vw,44px);
    margin-top:40px;
    align-items:start;
  }
  .sect-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .sect-tab{
    position:relative;
    display:block;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);
    padding:16px 18px 16px 20px;cursor:pointer;
    transition:background .22s ease;
  }
  .sect-tab .st-row{display:flex;align-items:baseline;gap:14px}
  .sect-tab .st-title{font-size:clamp(16px,1.8vw,18.5px);color:var(--grey-title);font-weight:600;transition:color .2s ease}
  .sect-tab .st-desc{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
  }
  .sect-tab .st-desc>span{overflow:hidden;display:block}
  .sect-tab .st-desc p{
    color:var(--grey-body);font-size:14px;line-height:1.55;
    padding-top:8px;max-width:44ch;
  }
  .sect-tab:hover .st-title{color:var(--ink)}
  /* la section est desormais grise : l'onglet actif se detache en blanc */
  .sect-tab[aria-selected="true"]{background:#fff}
  .sect-tab[aria-selected="true"] .st-title{color:var(--ink)}
  .sect-tab[aria-selected="true"] .st-desc{grid-template-rows:1fr}
  /* barre de progression rotation auto */
  .sect-tab .st-progress{
    position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:transparent;overflow:hidden;pointer-events:none;
  }
  .sect-tab .st-progress i{
    display:block;height:100%;width:100%;
    background:var(--ocean);
    transform:scaleX(var(--p,0));transform-origin:left;
  }

  .sect-stage{
    position:relative;
    background:#050506;border:1px solid var(--line-2);border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:12/7.4;
  }
  .sect-panel{
    position:absolute;inset:0;
    opacity:0;transition:opacity .35s ease;
  }
  .sect-panel.active{opacity:1}
  .sect-panel canvas{width:100%;height:100%;object-fit:cover}
  .sect-panel .ov{
    position:absolute;left:12px;bottom:12px;z-index:2;
    font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
    color:#fff;background:rgba(8,6,5,0.66);border:1px solid var(--line-2);
    padding:5px 10px;border-radius:0;backdrop-filter:blur(3px);
  }
  .sect-panel .meta{
    position:absolute;right:12px;top:12px;z-index:2;
    font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--grey-light);background:rgba(8,6,5,0.66);border:1px solid var(--line-2);
    padding:4px 9px;border-radius:0;

  @media (max-width:999px){
    .nav-links{display:none}
    .nav-links.open{
      display:flex;position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;
      flex-direction:column;gap:0;align-items:stretch;
      background:rgba(255,255,255,0.94);
      backdrop-filter:saturate(140%) blur(14px);
      -webkit-backdrop-filter:saturate(140%) blur(14px);
      border:1px solid rgba(8,6,5,0.10);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(8,6,5,0.12);
      padding:8px 18px 18px;
    }
    .nav-links.open a:not(.nav-cta){padding:12px 0;border-bottom:1px solid var(--line);width:100%}
    .nav-links.open a:not(.nav-cta):last-of-type{border-bottom:0}
    .nav-links.open .nav-cta{margin-top:12px;text-align:center}
    .burger{display:inline-flex}
  }
  @media (max-width:720px){
    header.site{top:12px}
    /* TEST — le désaxage casse les petits écrans : retour à l'empilement simple */


/* v21 ticker — requested values and emphasis */
.ticker .tk-number{font-variant-numeric:tabular-nums;}
.ticker .tk-number.oc{color:var(--ocean-deep);font-weight:400;}
.ticker b.tk-number{font-weight:700;color:var(--ink);}
.ticker .tk-sep{color:var(--ocean);font-weight:600;}

/* Application panels use photographic images instead of generated canvases. */
.sect-panel img{width:100%;height:100%;object-fit:cover;display:block;}

/* Confidentialité — + marks exactly on the frame corners. */
#confidentialite{padding-bottom:clamp(36px,4.6vw,60px);}
#confidentialite .infra-diagram{position:relative;overflow:visible;}
.infra-cross{position:absolute;width:22px;height:22px;z-index:5;pointer-events:none;}
.infra-cross::before,.infra-cross::after{content:"";position:absolute;background:var(--ocean);}
.infra-cross::before{left:0;top:10.5px;width:22px;height:1px;}
.infra-cross::after{left:10.5px;top:0;width:1px;height:22px;}
.infra-cross.tl{left:0;top:0;transform:translate(-50%,-50%);}
.infra-cross.tr{right:0;top:0;transform:translate(50%,-50%);}
.infra-cross.bl{left:0;bottom:0;transform:translate(-50%,50%);}
.infra-cross.br{right:0;bottom:0;transform:translate(50%,50%);}

/* Footer: social/legal row, then logo centered beneath. */
.footer-compact{padding-top:30px;padding-bottom:30px;}
.footer-compact .foot-rule{margin-inline:clamp(24px,4vw,44px);}
.footer-compact .foot-bar{padding:24px clamp(24px,4vw,44px) 18px;}
.footer-compact .foot-sign-centered{display:flex;justify-content:center;align-items:center;padding:18px 20px 0;}
.footer-compact .sign-mark.small{width:min(240px,42vw);height:auto;color:#fff;}

/* ===================== V22 — HEADER/NAV EXACT WEBMASTER CODE ===================== */
  /* ===================== HEADER / NAV — capsule flottante ===================== */
  /* bandeau fixe pleine largeur ; la capsule (.nav) reprend la geometrie exacte
     de .wrap (meme --gut, meme centrage en flux) : bords toujours alignes au contenu */
  header.site{
    position:fixed;top:14px;left:0;right:0;z-index:60;
    pointer-events:none;
  }
  header.site.scrolled .nav{background:rgba(255,255,255,0.92)}
  /* ancre : le titre atterrit ~128px du haut (padding interne compense) */
  section[id]{scroll-margin-top:calc(128px - clamp(64px,9vw,120px))}
  /* le constat enchaine directement sur la demonstration : pas de filet,
     et une respiration reduite de part et d'autre de la jointure */
  #probleme{padding-bottom:clamp(36px,4.6vw,60px)}
  #mesure{padding-top:clamp(36px,4.6vw,60px)}
  /* jointure souverainete / a propos : deux fonds blancs qui se suivent */
  #souverainete{padding-bottom:clamp(36px,4.6vw,60px)}
  #apropos{padding-top:clamp(36px,4.6vw,60px)}
  /* respiration avant la bascule sur le bleu du CTA */
  #apropos{padding-bottom:clamp(76px,9.5vw,128px)}
  .nav{
    pointer-events:auto;position:relative;
    display:flex;align-items:center;gap:28px;height:56px;padding-left:20px;padding-right:10px;
    width:calc(100% - 2*var(--gut));max-width:calc(var(--maxw) - 2*var(--gut));
    margin-inline:auto;
    background:rgba(255,255,255,0.82);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border:1px solid rgba(8,6,5,0.10);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(8,6,5,0.10);
    transition:background .25s ease;
  }
  /* Liens centres dans la capsule, logo et CTA ancres aux bords.
     Seuil a 1000px : logo (185) + liens (459) + CTA (156) + marges exigent
     une capsule d'au moins ~869px, soit un viewport >= ~955px ; en dessous
     les liens centres recouvriraient le logo et le CTA (tous deux hors flux).
     Sous ce seuil, c'est le menu burger qui prend le relais. */
  @media (min-width:1000px){
    .nav{position:relative;justify-content:center}
    .brand{position:absolute;left:20px;top:50%;transform:translateY(-50%);margin-right:0}
    .nav-cta{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
  }
  .brand{display:flex;align-items:center;margin-right:auto}
  .brand .logo{display:block;height:17px;width:auto;aspect-ratio:289.92/26.64;color:var(--ink)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a:not(.nav-cta){
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    text-transform:uppercase;letter-spacing:0.12em;
    color:var(--grey-body);
    transition:color .18s ease;position:relative;padding:6px 0;
  }
  .nav-links a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:var(--ocean-mid);transform:scaleX(0);transform-origin:left;
    transition:transform .22s ease;
  }
  .nav-links a:not(.nav-cta):hover{color:var(--ink)}
  .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
  .nav-cta{
    font-family:var(--sans);background:var(--ocean);color:#fff;font-weight:600;
    font-size:12.5px;text-transform:uppercase;letter-spacing:0.08em;
    padding:9px 16px;border-radius:var(--radius);
    border:1px solid var(--ocean);
    transition:background .18s ease;white-space:nowrap;
  }
  .nav-cta:hover{background:#12606f}
  .burger{
    display:none;background:none;border:1px solid var(--line-2);
    border-radius:0;width:40px;height:38px;cursor:pointer;
    align-items:center;justify-content:center;
  }
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:background .2s ease}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s ease,top .25s ease}
  .burger span::before{top:-5px}.burger span::after{top:5px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  /* NAVIGATION REPLIEE — sous le seuil ou les liens centres tiennent (voir @media
     min-width:1000px) : les liens passent dans le panneau deroulant du burger.
     Bloc isole de la media query 720px : le seuil de la nav est plus haut que
     celui du reste de la mise en page. */
  @media (max-width:999px){
    .nav-links{display:none}
    .nav-links.open{
      display:flex;position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;
      flex-direction:column;gap:0;align-items:stretch;
      background:rgba(255,255,255,0.94);
      backdrop-filter:saturate(140%) blur(14px);
      -webkit-backdrop-filter:saturate(140%) blur(14px);
      border:1px solid rgba(8,6,5,0.10);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(8,6,5,0.12);
      padding:8px 18px 18px;
    }
    .nav-links.open a:not(.nav-cta){padding:12px 0;border-bottom:1px solid var(--line);width:100%}
    .nav-links.open a:not(.nav-cta):last-of-type{border-bottom:0}
    .nav-links.open .nav-cta{margin-top:12px;text-align:center}
    .burger{display:inline-flex}
  }

/* ===================== V22 — TARGETED LAYOUT FIXES ===================== */
/* Alternance stricte des sections */
#performances{background:var(--panel-2);}
#applications{background:var(--bg)!important;}
#integration{background:var(--panel-2);}
#confidentialite{background:var(--bg);}
#apropos{background:var(--panel-2);}

/* Hero : deux lignes, contraste comme le hero webmaster */
.hero h1{font-size:clamp(46px,7vw,86px);max-width:15ch;}
.hero h1 .mut{display:block;color:var(--grey-title);font-weight:400;}
.hero h1 .kw{display:block;color:var(--ink);font-weight:700;}

/* Applications : panneaux photos */
#applications .sect-tab[aria-selected="true"]{background:var(--panel-2);}
#applications .sect-panel img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}

/* Confidentialité : croix bleues clairement visibles sur les quatre coins du seul cadre figure */
#confidentialite .infra-diagram{position:relative;overflow:visible;}
#confidentialite .infra-cross{position:absolute;width:27px;height:27px;z-index:30;pointer-events:none;background:var(--bg);}
#confidentialite .infra-cross::before,#confidentialite .infra-cross::after{content:"";position:absolute;background:var(--ocean);}
#confidentialite .infra-cross::before{left:0;top:13px;width:27px;height:1px;}
#confidentialite .infra-cross::after{left:13px;top:0;width:1px;height:27px;}
#confidentialite .infra-cross.tl{left:0;top:0;transform:translate(-50%,-50%);}
#confidentialite .infra-cross.tr{right:0;top:0;transform:translate(50%,-50%);}
#confidentialite .infra-cross.bl{left:0;bottom:0;transform:translate(-50%,50%);}
#confidentialite .infra-cross.br{right:0;bottom:0;transform:translate(50%,50%);}

/* Footer : logo exactement dans la ligne des liens, centré dans la page */
.footer-compact{padding-top:0;padding-bottom:20px;}
.footer-compact .foot-rule{margin-inline:clamp(24px,4vw,44px);}
.footer-compact .foot-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:16px clamp(24px,4vw,44px) 14px;
}
.footer-compact .foot-links{justify-self:start;}
.footer-compact .mini{justify-self:end;}
.footer-compact .foot-sign-centered{justify-self:center;display:flex;align-items:center;padding:0;transform:translateY(-1px);}
.footer-compact .sign-mark.small{display:block;width:min(240px,28vw);height:auto;color:#fff;margin:0;}
@media(max-width:720px){
  .footer-compact .foot-bar{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .footer-compact .foot-links,.footer-compact .mini,.footer-compact .foot-sign-centered{justify-self:center;}
  .footer-compact .foot-sign-centered{order:3;}
}

/* ===================== V22 — PAGES LÉGALES ===================== */
.legal-page{background:var(--bg);}
.legal-wrap{max-width:980px;}
.legal-brand{display:inline-flex;margin-bottom:clamp(52px,8vw,90px);}
.legal-brand img{width:190px;height:auto;display:block;}
.legal-head{margin-top:20px;}
.legal-copy{max-width:820px;margin-top:48px;}
.legal-copy section{padding:26px 0;border-top:1px solid var(--line);}
.legal-copy section:last-child{border-bottom:1px solid var(--line);}
.legal-copy h2{font-size:20px;line-height:1.25;margin:0 0 12px;color:var(--ink);}
.legal-copy p{font-size:16px;line-height:1.72;color:var(--grey-body);margin:0;}
.legal-copy p+p{margin-top:10px;}
.legal-copy a{color:var(--ocean-deep);border-bottom:1px solid var(--ocean-light);}
.legal-back{margin-top:42px;}


/* ===================== V22.1 — FINAL REGRESSION FIXES ===================== */
/* Footer: one baseline row under the rule, centered both ways. */
.footer-compact{padding-bottom:0;}
.footer-compact .foot-bar{
  min-height:72px;
  padding:18px clamp(24px,4vw,44px);
  align-items:center;
}
.footer-compact .foot-sign-centered{transform:translateY(-4px);align-self:center;}
.footer-compact .sign-mark.small{width:min(240px,28vw);}

/* Applications: alternate section background explicitly white. */
#applications{background:#fff!important;}
#applications .sect-tab[aria-selected="true"]{background:var(--panel-2);}

/* The four infrastructure corner markers: aligned to the frame axes. */
#confidentialite .infra-cross{
  position:absolute;z-index:50;width:15px;height:15px;
  background:var(--bg);pointer-events:none;
}
#confidentialite .infra-cross::before,
#confidentialite .infra-cross::after{content:"";position:absolute;background:var(--ocean);}
#confidentialite .infra-cross::before{height:1px;width:23px;left:-4px;top:7px;}
#confidentialite .infra-cross::after{width:1px;height:23px;left:7px;top:-4px;}
#confidentialite .infra-cross.tl{left:0;top:0;transform:translate(-50%,-50%);}
#confidentialite .infra-cross.tr{right:0;top:0;transform:translate(50%,-50%);}
#confidentialite .infra-cross.bl{left:0;bottom:0;transform:translate(-50%,50%);}
#confidentialite .infra-cross.br{right:0;bottom:0;transform:translate(50%,50%);}

/* ===================== V23 — TARGETED FIXES ONLY ===================== */
/* 1) Comparateur: true overlay wipe, never image squashing/stretching. */
#mesure .compare-stage.static-compare{
  --split:50%;
  position:relative;
  overflow:hidden;
  aspect-ratio:1024/640;
  background:#000;
}
#mesure .compare-stage.static-compare > img.cv-clean,
#mesure .compare-stage.static-compare .layer-std img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  max-width:none;
}
#mesure .compare-stage.static-compare .layer-std{
  position:absolute;
  inset:0;
  width:auto !important;
  overflow:hidden;
  clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);
}
#mesure .cmp-handle{
  top:0;
  bottom:0;
  height:auto;
}
#mesure .cmp-handle .rail{
  top:0;
  bottom:0;
  height:auto;
  width:1px;
  left:50%;
  margin-left:0;
  transform:none;
}

/* 2) Confidentialité: four visible + corners, without square patches. */
#confidentialite .infra-diagram{
  position:relative;
  overflow:visible;
}
#confidentialite .infra-cross{
  position:absolute;
  z-index:60;
  width:0;
  height:0;
  pointer-events:none;
  background:none !important;
}
#confidentialite .infra-cross::before,
#confidentialite .infra-cross::after{
  content:"";
  position:absolute;
  background:var(--ocean);
}
#confidentialite .infra-cross::before{
  width:18px;
  height:1px;
  left:-9px;
  top:0;
}
#confidentialite .infra-cross::after{
  width:1px;
  height:18px;
  left:0;
  top:-9px;
}
#confidentialite .infra-cross.tl{left:0;top:0;transform:translate(-50%,-50%);}
#confidentialite .infra-cross.tr{right:0;top:0;transform:translate(50%,-50%);}
#confidentialite .infra-cross.bl{left:0;bottom:0;transform:translate(-50%,50%);}
#confidentialite .infra-cross.br{right:0;bottom:0;transform:translate(50%,50%);}

/* 3) Footer logo: visually centered in the lower row and raised. */
.footer-compact .foot-bar{
  min-height:78px;
  padding:14px clamp(24px,4vw,44px) 16px;
  align-items:center;
}
.footer-compact .foot-sign-centered{
  justify-self:center;
  align-self:center;
  display:flex;
  align-items:center;
  transform:translateY(-12px);
}
.footer-compact .sign-mark.small{
  display:block;
  width:min(240px,28vw);
  height:auto;
  margin:0;
}
@media(max-width:720px){
  .footer-compact .foot-sign-centered{transform:translateY(-6px);}
}

/* ===================== V24 — TARGETED CORRECTIONS ===================== */
/* Comparator: use webmaster canvas geometry verbatim. The clipped parent changes
   width; the canvas inside always remains the full stage width. */
#mesure .compare-stage{position:relative;background:#050506;overflow:hidden;aspect-ratio:1024/640;touch-action:pan-y;cursor:ew-resize;}
#mesure .compare-stage canvas{position:absolute;inset:0;width:100%;height:100%;}
#mesure .compare-stage .cv-clean{position:relative;}
#mesure .compare-stage .layer-std{position:absolute;inset:0;overflow:hidden;width:var(--split,50%);}
#mesure .compare-stage .layer-std canvas{width:auto!important;height:100%!important;max-width:none!important;}
#mesure .cmp-peek .compare-stage{--split:50%;cursor:pointer;}
#mesure .cmp-peek .cmp-handle{pointer-events:none;}

/* Confidentialité: draw the frame as four independent edges. By extending every
   edge beyond its neighbour, the four intersections naturally form '+' marks. */
#confidentialite .infra-diagram{
  position:relative;
  display:table;
  border:0!important;
  overflow:visible!important;
  padding:16px 18px 18px!important;
  margin:0 auto 34px!important;
  background:transparent!important;
}
#confidentialite .infra-edge{position:absolute;z-index:20;pointer-events:none;background:var(--ocean);}
#confidentialite .infra-edge.top{height:1px;left:-10px;right:-10px;top:0;}
#confidentialite .infra-edge.bottom{height:1px;left:-10px;right:-10px;bottom:0;}
#confidentialite .infra-edge.left{width:1px;top:-10px;bottom:-10px;left:0;}
#confidentialite .infra-edge.right{width:1px;top:-10px;bottom:-10px;right:0;}
#confidentialite .infra-tag{
  position:absolute;top:0;left:14px;transform:translateY(-50%);
  padding:0 10px;background:var(--bg);z-index:30;
  font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);
}

/* Footer: the wordmark is anchored to the geometric centre of the page, not to
   the content-dependent CSS grid tracks. */
.footer-compact .foot-bar{position:relative;min-height:82px;padding:18px clamp(24px,4vw,44px);align-items:center;}
.footer-compact .foot-sign-centered{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%)!important;
  display:flex;align-items:center;justify-content:center;padding:0;margin:0;
}
.footer-compact .sign-mark.small{width:min(240px,28vw);height:auto;margin:0;display:block;}
@media(max-width:720px){
  .footer-compact .foot-bar{display:flex;flex-direction:column;gap:18px;padding-block:22px;}
  .footer-compact .foot-sign-centered{position:static;transform:none!important;order:3;}
}
/* Footer grid after absolutely centering the wordmark. */
.footer-compact .foot-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.footer-compact .foot-links{grid-column:1;justify-self:start;}
.footer-compact .mini{grid-column:2;justify-self:end;}
@media(max-width:720px){
  .footer-compact .foot-links,.footer-compact .mini{grid-column:auto;justify-self:center;}
}


/* V25 targeted fixes */
#confidentialite .infra-diagram{overflow:visible!important;}
#confidentialite .infra-edge{position:absolute;z-index:20;pointer-events:none;background:var(--ocean);}
#confidentialite .infra-edge.top{height:1px;left:-10px;right:-10px;top:0;}
#confidentialite .infra-edge.bottom{height:1px;left:-10px;right:-10px;bottom:0;}
#confidentialite .infra-edge.left{width:1px;top:-10px;bottom:-10px;left:0;}
#confidentialite .infra-edge.right{width:1px;top:-10px;bottom:-10px;right:0;}
#confidentialite .infra-cross{
  position:absolute; width:18px; height:18px; background:var(--bg);
  z-index:35; pointer-events:none;
}
#confidentialite .infra-cross::before,
#confidentialite .infra-cross::after{content:"";position:absolute;background:var(--ocean);}
#confidentialite .infra-cross::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%);}
#confidentialite .infra-cross::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);}
#confidentialite .infra-cross.tl{left:0;top:0;transform:translate(-50%,-50%);}
#confidentialite .infra-cross.tr{right:0;top:0;transform:translate(50%,-50%);}
#confidentialite .infra-cross.bl{left:0;bottom:0;transform:translate(-50%,50%);}
#confidentialite .infra-cross.br{right:0;bottom:0;transform:translate(50%,50%);}

/* Footer logo: use the direct wordmark asset and anchor its optical centre to the page centre. */
.footer-compact .foot-bar{position:relative;min-height:82px;padding:18px clamp(24px,4vw,44px);align-items:center;}
.footer-compact .foot-sign-centered{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)!important;
  display:flex; align-items:center; justify-content:center; margin:0; padding:0;
}
.footer-compact .foot-sign-centered img.sign-mark.small{
  display:block; width:min(246px,28vw); height:auto; margin:0;
  filter:brightness(0) invert(1);
}
@media(max-width:720px){
  .footer-compact .foot-bar{display:flex;flex-direction:column;gap:18px;padding-block:22px;}
  .footer-compact .foot-sign-centered{position:static;transform:none!important;order:3;}
}


/* ===================== V26 — authoritative targeted fixes ===================== */
/* Keep the working comparator untouched. */

/* Problem cards: use the available horizontal space. */
#probleme .problem-pains h3{
  max-width:none !important;
  width:auto !important;
  white-space:normal;
  text-wrap:balance;
}

/* Infrastructure frame: four independent line segments + four explicit '+' glyphs. */
#confidentialite .infra-diagram{
  position:relative !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
}
#confidentialite .infra-edge{
  position:absolute !important;
  z-index:20 !important;
  display:block !important;
  background:var(--ocean) !important;
  pointer-events:none !important;
}
#confidentialite .infra-edge.top{
  top:0 !important; left:18px !important; right:18px !important;
  width:auto !important; height:1px !important;
}
#confidentialite .infra-edge.bottom{
  bottom:0 !important; left:18px !important; right:18px !important;
  width:auto !important; height:1px !important;
}
#confidentialite .infra-edge.left{
  left:0 !important; top:18px !important; bottom:18px !important;
  height:auto !important; width:1px !important;
}
#confidentialite .infra-edge.right{
  right:0 !important; top:18px !important; bottom:18px !important;
  height:auto !important; width:1px !important;
}
#confidentialite .infra-cross{
  position:absolute !important;
  z-index:50 !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
  background:var(--bg) !important;
  color:var(--ocean) !important;
  font-family:var(--mono) !important;
  font-size:22px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  pointer-events:none !important;
}
#confidentialite .infra-cross::before,
#confidentialite .infra-cross::after{content:none !important;display:none !important;}
#confidentialite .infra-cross.tl{left:0 !important;top:0 !important;transform:translate(-50%,-50%) !important;}
#confidentialite .infra-cross.tr{right:0 !important;top:0 !important;transform:translate(50%,-50%) !important;}
#confidentialite .infra-cross.bl{left:0 !important;bottom:0 !important;transform:translate(-50%,50%) !important;}
#confidentialite .infra-cross.br{right:0 !important;bottom:0 !important;transform:translate(50%,50%) !important;}
#confidentialite .infra-tag{
  z-index:60 !important;
  background:var(--bg) !important;
}

/* Footer wordmark x-position is supplied by JS from the e-mail button's real centre. */
.footer-compact .foot-bar{position:relative !important;}
.footer-compact .foot-sign-centered{
  position:absolute !important;
  left:var(--mail-center-x,50%) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.footer-compact .foot-sign-centered img.sign-mark.small{
  display:block !important;
  width:min(246px,28vw) !important;
  height:auto !important;
  margin:0 !important;
  filter:brightness(0) invert(1) !important;
}
@media(max-width:720px){
  .footer-compact .foot-sign-centered{
    position:static !important;
    transform:none !important;
    order:3 !important;
  }
}

/* Static editorial pages must always render, even without i18n.js. */
html.legal-static body,
html.i18n-ready.legal-static body{
  visibility:visible !important;
  opacity:1 !important;
}


/* ===================== V27 — authoritative targeted fixes ===================== */
/* No comparator rules here: the working v24-v26 comparator is frozen. */

/* Problem cards — natural wrapping, using the full card width. */
#probleme .problem-pains li{padding-left:18px!important;padding-right:18px!important;}
#probleme .problem-pains h3{
  max-width:none!important;
  width:100%!important;
  font-size:18px!important;
  line-height:1.22!important;
  letter-spacing:-0.012em!important;
  text-wrap:wrap!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Infrastructure — the frame is a set of independent graphic segments.
   The short corner strokes are isolated from the main edges by a white gap. */
#confidentialite .infra-diagram{
  position:relative!important;
  border:0!important;
  outline:0!important;
  overflow:visible!important;
}
#confidentialite .infra-frame-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:20;
}
#confidentialite .infra-frame-lines line{
  stroke:var(--ocean);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges;
}
#confidentialite .infra-tag{
  z-index:30!important;
  background:var(--bg)!important;
  padding-inline:10px!important;
}

/* Footer — a single, conflict-free wordmark layer. Its x-position is supplied
   by the one JS alignment function from the real e-mail CTA centre. */
.footer-compact .foot-bar{position:relative!important;min-height:82px!important;}
.footer-compact .footer-wordmark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  pointer-events:none;
}
.footer-compact .footer-wordmark img{
  display:block;
  width:min(246px,28vw);
  height:auto;
  margin:0;
  filter:brightness(0) invert(1);
}
@media(max-width:720px){
  .footer-compact .footer-wordmark{
    position:static;
    transform:none;
    order:3;
  }
}