/* ============================================================
     MINUTIC, refonte 3D de la landing pre-lancement
     Fidele au systeme visuel live (palette, composants, Charles),
     enrichi d'une couche 3D : grille Tron perspective, tilt,
     revelations en profondeur au scroll.
     Theme unique assume : la marque est nativement sombre
     (le site force #0a0a0f meme en prefers-color-scheme light).
     ============================================================ */

  :root, :root[data-theme="light"], :root[data-theme="dark"] {
    --orange: #ff6b00;
    --orange-soft: #ff8c33;
    --orange-glow: rgba(0, 224, 150, .35);
    --green: #22c55e;
    --green-soft: #4ade80;
    --green-glow: rgba(34, 197, 94, .25);
    --bg: #0a0a0f;
    --bg-card: rgba(255, 255, 255, .03);
    --bg-card-hover: rgba(255, 255, 255, .06);
    --surface: #111118;
    --surface-2: #1a1a24;
    --border: rgba(255, 255, 255, .06);
    --border-hover: rgba(255, 255, 255, .12);
    --text: #f0f0f5;
    --text-2: #a0a0b8;
    --text-3: #6a6a82;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --nav-h: 64px;
    --max-w: 1140px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color-scheme: dark;
  }

  html { background: var(--bg); scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); min-height: 100vh; }

  .landing-root {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
  }

  /* ===== Fond 3D : grille Tron perspective (canvas) + aurora ===== */
  .tron-3d {
    position: fixed;
    inset: 0;
    /* INDISPENSABLE : un canvas est un element REMPLACE. Avec inset: 0
       seul (width/height auto), il ne s'etire PAS : il garde sa taille
       intrinseque, soit ses pixels bitmap (largeur x DPR). Sur un ecran
       a densite 1 cela coincide avec la fenetre, mais sur un telephone
       a densite 2 ou 3 le canvas s'affichait 2 a 3 fois trop grand :
       seul le coin haut-gauche (vide, au-dessus de l'horizon) restait
       dans le cadre. C'etait LA cause de la grille invisible sur mobile. */
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .aurora {
    position: fixed;
    top: -40%; left: -40%;
    width: 180%; height: 180%;
    z-index: 0;
    background:
      radial-gradient(ellipse at 25% 15%, rgba(27,140,61,.05) 0%, transparent 50%),
      radial-gradient(ellipse at 75% 65%, rgba(245,132,31,.025) 0%, transparent 50%);
    animation: aurora-move 20s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes aurora-move {
    0%  { transform: translate(0) rotate(0); }
    to  { transform: translate(20px, -15px) rotate(2deg); }
  }

  /* ===== Boutons ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
  }
  .btn:focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--green-soft);
    outline-offset: 2px;
  }
  .btn-sm { font-size: .85rem; padding: 8px 14px; }
  .btn-lg { font-size: 1rem; padding: 14px 28px; }
  .btn-primary { background: var(--green); color: #fff; }
  .btn-primary:hover { background: var(--green-soft); box-shadow: 0 0 20px var(--green-glow); }
  .btn-orange { background: var(--green); color: #fff; }
  .btn-orange:hover { background: var(--orange-soft); box-shadow: 0 0 20px var(--orange-glow); }
  .btn-disabled { opacity: .6; cursor: default; pointer-events: none; }

  /* ===== Intro construction du wordmark =====
     Sequence : guides de construction, trace du pin au trait, remplissage,
     anneau qui se dessine, graduations et badge qui poppent, aiguilles qui
     pivotent en place, lettres qui tombent avec flash de contour, puis
     morph FLIP du logo vers son emplacement dans la nav. */
  .logo-intro {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #0a0a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease;
  }
  .logo-intro.fade { opacity: 0; pointer-events: none; }
  /* Sans JavaScript l'intro ne doit jamais couvrir la page : display:flex
     primerait sur l'attribut hidden sans cette regle explicite. */
  .logo-intro[hidden] { display: none; }
  .li-svg {
    width: min(72vw, 500px);
    height: auto;
    transform-origin: 0 0;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }
  .li-guides line, .li-guides circle {
    stroke: rgba(74, 222, 128, .15);
    stroke-width: .7;
    fill: none;
  }
  .lg-dash { stroke-dasharray: 4 5; }
  .li-guides { animation: li-guides-seq 3.2s ease forwards; }
  @keyframes li-guides-seq {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    to  { opacity: 0; }
  }
  .li-pin-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: li-draw .9s cubic-bezier(.4, 0, .2, 1) .25s forwards,
               li-out .4s ease 2.6s forwards;
  }
  .li-ring {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: li-draw .8s cubic-bezier(.4, 0, .2, 1) 1.15s forwards;
  }
  @keyframes li-draw { to { stroke-dashoffset: 0; } }
  @keyframes li-out { to { opacity: 0; } }
  .li-pin { opacity: 0; animation: li-in .45s ease 1s forwards; }
  @keyframes li-in { to { opacity: 1; } }
  .li-pop {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: li-pop-in .35s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: var(--d, 1.8s);
  }
  @keyframes li-pop-in {
    0% { opacity: 0; transform: scale(.2); }
    to { opacity: 1; transform: scale(1); }
  }
  .li-hand {
    opacity: 0;
    transform-origin: 68.87px 70.83px;
    animation: li-hand-in .7s cubic-bezier(.34, 1.4, .64, 1) forwards;
  }
  .li-hand-h { animation-delay: 1.9s; --rot: -75deg; }
  .li-hand-m { animation-delay: 2.05s; --rot: 80deg; }
  @keyframes li-hand-in {
    0%  { opacity: 0; transform: rotate(var(--rot, -75deg)); }
    25% { opacity: 1; }
    to  { opacity: 1; transform: rotate(0deg); }
  }
  .li-letter {
    opacity: 0;
    stroke: #4ade80;
    stroke-width: 0;
    animation: li-letter-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(1.7s + var(--i, 0) * .11s);
  }
  @keyframes li-letter-in {
    0%  { opacity: 0; transform: translateY(-14px); stroke-width: 1.2; }
    40% { opacity: 1; stroke-width: 1; }
    to  { opacity: 1; transform: translateY(0); stroke-width: 0; }
  }

  /* ===== Nav ===== */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(10, 10, 15, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: border-color .4s ease, box-shadow .4s ease;
  }
  .nav.scrolled {
    border-bottom-color: rgba(74, 222, 128, .14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  }
  .nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand { display: flex; align-items: center; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; }
  .brand-logo { height: 56px; width: auto; display: block; }
  svg.brand-logo { width: 127px; }
  .nav-links { display: flex; gap: 28px; }
  .nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--text); }
  .nav-actions { display: flex; gap: 12px; align-items: center; }
  .nav-status { display: flex; align-items: center; gap: 8px; }
  .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot { 0%, to { opacity: 1; } 50% { opacity: .4; } }
  .status-text {
    font-size: .78rem;
    color: var(--green);
    font-weight: 600;
    letter-spacing: .02em;
  }

  /* ===== Hero ===== */
  .hero {
    position: relative;
    z-index: 1;
    padding: calc(var(--nav-h) + 36px) 24px 40px;
    max-width: var(--max-w);
    margin: 0 auto;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  .hero-copy {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .hero-copy.revealed { opacity: 1; transform: translateY(0); }
  .hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    text-align: center;
    text-wrap: balance;
    margin: 0 0 1rem;
  }
  .accent { color: var(--green); }
  .hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
  }
  .hero-visual { display: flex; flex-direction: column; align-items: center; width: 100%; }

  /* ===== Charles (apparence canonique live, conservee a l'identique) ===== */
  .charles-scene {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 90px auto 0;
    perspective: 700px;
  }
  .charles-bubble {
    position: absolute;
    bottom: calc(100% - 14px);
    left: 50%;
    transform: translate(-50%);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    padding: 16px 24px;
    color: #fff;
    font-size: .95rem;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 520px;
    text-align: center;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
    z-index: 10;
  }
  .charles-bubble.arrived { opacity: 1; transform: translate(-50%) translateY(0); pointer-events: auto; }
  .charles-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255, 255, 255, .13);
  }
  .charles-container {
    position: relative;
    width: 160px;
    height: 160px;
    cursor: default;
    opacity: 0;
    transform: scale(0);
    z-index: 10;
  }
  .charles-container.arrived { animation: charles-grow .8s cubic-bezier(.34, 1.56, .64, 1) forwards; }
  @keyframes charles-grow {
    0%  { transform: scale(0); opacity: 0; filter: brightness(2); }
    30% { transform: scale(.3); opacity: 1; filter: brightness(1.5); }
    70% { transform: scale(1.08); filter: brightness(1.05); }
    85% { transform: scale(.97); filter: brightness(1); }
    to  { transform: scale(1); opacity: 1; filter: brightness(1); }
  }
  .charles-container.arrived.hovered { transform: scale(1.08); }
  .charles-container.arrived.pulse { opacity: 1; animation: charles-breathe 4s ease-in-out infinite; }
  @keyframes charles-breathe {
    0%, to { transform: scale(1); opacity: 1; }
    50%    { transform: scale(1.03); opacity: 1; }
  }
  .charles-glow {
    position: absolute;
    inset: -25px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27,140,61,.18) 0%, transparent 70%);
    transition: all .5s;
    pointer-events: none;
  }
  .charles-container.hovered .charles-glow {
    inset: -45px;
    background: radial-gradient(circle, rgba(27,140,61,.3) 0%, rgba(74,222,128,.1) 50%, transparent 70%);
  }
  /* Couche 3D : le tilt pivote l'interieur du robot, les animations de
     scale restent sur le conteneur, donc aucune collision de transform.
     Antennes et tete sur des plans Z distincts pour une vraie parallaxe. */
  .charles-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg));
    will-change: transform;
  }
  .antenna {
    position: absolute;
    top: 6px;
    width: 2px;
    height: 30px;
    background: linear-gradient(to top, #1a2a1f, rgba(74, 222, 128, .3));
    transform: translateZ(-8px);
  }
  .antenna-left  { left: 50px;  transform: translateZ(-8px) rotate(-20deg); transform-origin: bottom center; }
  .antenna-right { right: 50px; transform: translateZ(-8px) rotate(20deg);  transform-origin: bottom center; }
  .antenna-ball {
    position: absolute;
    top: -5px; left: -4px;
    width: 9px; height: 9px;
    background: radial-gradient(circle, #4ade80, #1b8c3d 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(74, 222, 128, .6);
    animation: antenna-glow 2s ease-in-out infinite alternate;
  }
  @keyframes antenna-glow {
    0% { box-shadow: 0 0 6px rgba(74, 222, 128, .4); }
    to { box-shadow: 0 0 14px rgba(74, 222, 128, .8); }
  }
  .charles-head {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translate(-50%) translateZ(10px);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 35% 30%, #1a2a1f, #0d1510 60%, #080c09);
    border-radius: 50%;
    box-shadow:
      0 0 30px rgba(27, 140, 61, .15),
      inset 0 -3px 12px rgba(0, 0, 0, .5),
      inset 0 2px 8px rgba(74, 222, 128, .08);
  }
  .charles-face {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 20px;
  }
  .charles-face.blink .eye-slit {
    height: 4px !important;
    border-radius: 6px;
    transition: height .08s ease-in;
  }
  .eye-slit {
    width: 9px;
    height: 32px;
    border-radius: 5px;
    background: rgba(200, 255, 220, .95);
    box-shadow:
      0 0 15px rgba(74, 222, 128, .8),
      0 0 30px rgba(74, 222, 128, .5),
      0 0 60px rgba(27, 140, 61, .3),
      inset 0 0 8px rgba(255, 255, 255, .4);
    transition: transform .08s ease-out, box-shadow .3s;
    position: relative;
  }
  .charles-container.hovered .eye-slit {
    box-shadow:
      0 0 20px #4ade80,
      0 0 45px rgba(74, 222, 128, .7),
      0 0 80px rgba(27, 140, 61, .5),
      0 0 120px rgba(27, 140, 61, .2),
      inset 0 0 10px rgba(255, 255, 255, .5);
  }
  .eye-inner {
    width: 100%;
    height: 40%;
    background: rgba(255, 255, 255, .25);
    border-radius: 5px 5px 0 0;
  }
  .charles-reflection {
    position: absolute;
    top: 12px; left: 18px;
    width: 30px; height: 15px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .12) 0%, transparent 80%);
    border-radius: 50%;
  }
  .charles-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  .charles-badge-dot {
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: dot-pulse 2s ease-in-out infinite;
  }
  @keyframes dot-pulse {
    0%, to { opacity: 1; box-shadow: 0 0 0 0 var(--green-glow); }
    50%    { opacity: .8; box-shadow: 0 0 0 6px transparent; }
  }

  /* ===== Sections : materialisation 3D au scroll =====
     Chaque section se "digitalise" : clip vertical qui la revele de haut
     en bas, ligne de balayage lumineuse qui accompagne le bord, arrivee
     depuis la profondeur. La classe .settled (posee en fin d'animation
     par JS) libere clip et transform pour ne rien figer. */
  .section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    opacity: 0;
  }
  .section.visible { animation: section-in .8s cubic-bezier(.22, 1, .36, 1) forwards; }
  @keyframes section-in {
    0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: perspective(1200px) translateY(36px) translateZ(-160px); }
    55%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: perspective(1200px) translateY(0) translateZ(0); }
  }
  .section.settled { animation: none; opacity: 1; clip-path: none; transform: none; }
  /* Ligne de balayage : legerement plus lente que le clip, elle reste
     dans la zone deja revelee et la parcourt comme un scanner. */
  .section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 4%, rgba(74, 222, 128, .85) 50%, transparent 96%);
    box-shadow: 0 0 16px rgba(74, 222, 128, .65), 0 0 48px rgba(74, 222, 128, .3);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
  }
  .section.visible::before { animation: scan-sweep 1s cubic-bezier(.22, 1, .36, 1) forwards; }
  @keyframes scan-sweep {
    0%   { top: 0%; opacity: 1; }
    80%  { opacity: .9; }
    100% { top: 100%; opacity: 0; }
  }
  /* Sections sombres : bordure d'energie qui se trace depuis le centre */
  .section.dim::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, .55), transparent);
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
  }
  .section.dim.visible::after { animation: border-draw 1.2s .2s cubic-bezier(.22, 1, .36, 1) forwards; }
  @keyframes border-draw {
    0%   { transform: scaleX(0); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: .45; }
  }
  .section.dim {
    background: rgba(17, 17, 24, .78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .section-inner { max-width: var(--max-w); margin: 0 auto; }
  .section-head { text-align: center; margin-bottom: 48px; }
  .eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--green);
    margin-bottom: 12px;
  }
  .section-head h2 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0 0 16px;
  }
  .section-lead {
    font-size: 1.05rem;
    color: var(--text-2);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
  }
  .preview-label {
    text-align: center;
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 16px;
    padding: 5px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%);
  }

  /* Entree en profondeur des cartes, cadencee par --i. Pilotee par une
     animation (et non une transition) : la classe .in posee par JS en fin
     de course coupe l'animation et rend le transform au moteur de tilt. */
  .r-item { opacity: 0; }
  .section.visible .r-item {
    animation: item-in .75s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(.18s + var(--i, 0) * 75ms);
  }
  .section.visible .r-item.in { animation: none; opacity: 1; }
  @keyframes item-in {
    0%   { opacity: 0; transform: perspective(900px) translateY(30px) translateZ(-110px) rotateX(10deg); }
    100% { opacity: 1; transform: perspective(900px) translateY(0) translateZ(0) rotateX(0); }
  }

  /* ===== Tilt 3D des cartes ===== */
  .tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: transform .18s ease-out, border-color .2s, background .2s, box-shadow .3s;
    position: relative;
    will-change: transform;
  }
  .tilt .glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(74, 222, 128, .07), transparent 55%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
  }
  .tilt:hover .glare { opacity: 1; }

  /* ===== Etapes ===== */
  .steps-grid { display: flex; align-items: stretch; justify-content: center; gap: 0; }
  .step-card {
    flex: 1;
    max-width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
  }
  .step-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); --lift: -3px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  .step-num { font-size: 2rem; font-weight: 800; color: var(--green); margin-bottom: 12px; }
  .step-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
  .step-text { font-size: .92rem; color: var(--text-2); line-height: 1.6; margin: 0; }
  .step-arrow { display: flex; align-items: center; padding: 0 16px; color: var(--text-3); }

  /* ===== Categories ===== */
  .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: default;
  }
  .cat-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); --lift: -2px; box-shadow: 0 14px 32px rgba(0, 0, 0, .3); }
  .cat-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, .08);
    border-radius: 12px;
    color: var(--green);
    transform: translateZ(24px);
  }
  .cat-body { flex: 1; min-width: 0; }
  .cat-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .cat-top h3 { font-size: .95rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-count { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
  .cat-desc { font-size: .82rem; color: var(--text-2); margin: 0; line-height: 1.5; }
  .cat-arrow { flex-shrink: 0; color: var(--text-3); transition: color .2s, transform .2s; }
  .cat-card:hover .cat-arrow { color: var(--green); transform: translate(3px); }

  /* ===== Marketplace ===== */
  .experts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .expert-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
  }
  .expert-card:hover { border-color: var(--border-hover); --lift: -4px; box-shadow: 0 16px 48px rgba(0, 0, 0, .3); }
  .expert-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
  .expert-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    transform: translateZ(20px);
  }
  .expert-name { font-size: .95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
  .expert-badge { flex-shrink: 0; }
  .expert-role { font-size: .82rem; color: var(--text-2); margin-top: 2px; }
  .expert-avail {
    font-size: .8rem;
    color: var(--green);
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(34, 197, 94, .08);
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 12px;
  }

  /* ===== Confiance ===== */
  .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .trust-card {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 20px;
  }
  .trust-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); --lift: -3px; }
  .trust-icon { color: var(--green); margin-bottom: 16px; transform: translateZ(18px); }
  .trust-title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
  .trust-text { font-size: .88rem; color: var(--text-2); margin: 0; line-height: 1.6; }

  /* ===== Pourquoi ===== */
  .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .why-card {
    display: flex;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
  }
  .why-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); --lift: -2px; }
  .why-check {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, .1);
    border-radius: 50%;
    color: var(--green);
    transform: translateZ(16px);
  }
  .why-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
  .why-card p { font-size: .9rem; color: var(--text-2); margin: 0; line-height: 1.6; }

  /* ===== CTA final + formulaire ===== */
  .cta-final { text-align: center; }
  .cta-card {
    background: linear-gradient(145deg, rgba(17, 17, 24, .9), rgba(26, 26, 36, .9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 60px 40px;
    max-width: 640px;
    margin: 0 auto;
  }
  .cta-card h2 { font-size: 1.8rem; font-weight: 800; text-wrap: balance; margin: 0 0 16px; }
  .cta-card > p { font-size: 1.05rem; color: var(--text-2); margin: 0 0 32px; line-height: 1.7; }
  .email-section { width: 100%; max-width: 480px; margin: 0 auto; }
  .email-form {
    display: flex;
    background: rgba(22, 25, 38, .95);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
  }
  .email-form:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .1); }
  .email-form.error { border-color: rgba(239, 68, 68, .5); animation: shake .4s ease-in-out; }
  @keyframes shake {
    0%, to { transform: translate(0); }
    25% { transform: translate(-5px); }
    75% { transform: translate(5px); }
  }
  .email-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-size: .95rem;
    font-family: var(--font);
    padding: 15px 16px;
    outline: none;
    min-width: 0;
  }
  .email-input::placeholder { color: var(--text-3); }
  .email-input:disabled { opacity: .5; }
  .email-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 22px;
    background: var(--green);
    color: #fff;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s;
    white-space: nowrap;
    font-family: var(--font);
  }
  .email-btn:hover { background: var(--orange-soft); box-shadow: 0 4px 16px var(--orange-glow); }
  .email-btn:disabled { opacity: .7; cursor: not-allowed; }
  .email-error-msg { font-size: .8rem; color: #ef4444; margin: 8px 0 0; }
  .email-hint { font-size: .78rem; color: var(--text-3); margin: 24px 0 0; text-align: center; }
  .email-success {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(74, 222, 128, .2);
    border-radius: var(--radius);
    padding: 18px 22px;
    animation: fade-in .5s ease-out;
    text-align: left;
    color: var(--green);
  }
  .success-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--green); }
  .success-sub { margin: 4px 0 0; font-size: .85rem; color: var(--text-2); }
  .success-sub a { color: var(--green-soft); }
  @keyframes fade-in {
    0% { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ===== Footer ===== */
  .footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    padding: 48px 24px 24px;
    background: rgba(17, 17, 24, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .footer-brand { display: flex; flex-direction: row; align-items: center; gap: 20px; }
  .footer-logo-btn { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; }
  .footer-logo { height: 81px; width: auto; display: block; }
  .footer-desc { font-size: .85rem; color: var(--text-3); line-height: 1.6; margin: 0; }
  .footer-cols { display: grid; grid-template-columns: repeat(2, max-content); gap: 32px; justify-self: end; }
  .footer-col { display: flex; flex-direction: column; gap: 10px; text-align: right; }
  .footer-col h4 {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
    margin: 0 0 4px;
  }
  .footer-col a { font-size: .88rem; color: var(--text-3); text-decoration: none; transition: color .2s; }
  .footer-col a:hover { color: var(--text); }
  .footer-bottom {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    position: relative;
  }
  .footer-bottom span { font-size: .8rem; color: var(--text-3); text-align: center; line-height: 1.5; }
  .back-to-top {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    cursor: pointer;
    transition: color .2s, border-color .2s;
  }
  .back-to-top:hover { color: var(--green); border-color: var(--green); }

  /* ===== CTA mobile ===== */
  .mobile-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    padding: 12px 16px;
    background: rgba(10, 10, 15, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .mobile-cta-btn { width: 100%; justify-content: center; }

  /* ===== Responsive (points de rupture du site live) ===== */
  @media (max-width: 1200px) {
    .hero-title { font-size: 2.4rem; }
    .hero-lead { font-size: 1.1rem; }
  }
  @media (max-width: 960px) {
    .nav-links { display: none; }
    .hero-grid { gap: 1.5rem; }
    .hero-title { font-size: 2.1rem; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .charles-scene { width: 200px; height: 200px; }
    .steps-grid { flex-direction: column; align-items: center; }
    .step-arrow { transform: rotate(90deg); padding: 8px 0; }
    .cat-grid, .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .experts-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .mobile-cta { display: block; }
  }
  @media (max-width: 768px) {
    .hero { padding: calc(var(--nav-h) + 20px) 1rem 2rem; }
    .hero-grid { gap: 1.5rem; }
    .hero-title { font-size: 1.8rem; }
    .hero-lead { font-size: 1.05rem; max-width: 90vw; }
  }
  @media (max-width: 640px) {
    .nav-inner { padding: 0 14px; }
    .brand-logo { height: 44px; }
    svg.brand-logo { width: 100px; }
    .status-text { display: none; }
    .charles-bubble { top: auto; bottom: calc(100% + 10px); width: max-content; max-width: min(88vw, 340px); font-size: .88rem; padding: 12px 16px; }
    .charles-scene { margin-top: 110px; }
    .hero-lead br { display: none; }
    .hero-lead { max-width: 34ch; }
    .cat-grid { grid-template-columns: minmax(0, 1fr); }
    .cat-desc br, .step-text br { display: none; }
    .footer-brand { flex-direction: column; text-align: center; }
    .footer-cols { justify-self: center; }
    .footer-col { text-align: center; }
    .footer { padding-bottom: 96px; }
  }
  @media (max-width: 520px) {
    .hero-title { font-size: 1.7rem; }
    .section-head h2 { font-size: 1.6rem; }
    .cat-grid, .trust-grid, .footer-cols { grid-template-columns: 1fr; }
    .cta-card { padding: 36px 20px; }
    .cta-card h2 { font-size: 1.4rem; }
    .email-form { flex-direction: column; }
    .email-btn { justify-content: center; padding: 14px; }
  }
  @media (max-width: 480px) {
    .hero-grid { gap: 1rem; }
    .hero-title { font-size: 1.55rem; }
    .hero-lead { font-size: .95rem; line-height: 1.6; }
    .charles-scene { width: 175px; height: 175px; }
    .charles-badge { font-size: .72rem; }
  }
  @media (max-width: 400px) {
    .section { padding: 56px 16px; }
  }

  /* ===== Ordre de superposition VERROUILLE =====
     Regle posee en fin de feuille pour primer sur toutes les precedentes.
     Le decor 3D (grille, traces de circuit, horizon) occupe le plan 0 ;
     tout element porteur de contenu lisible occupe le plan 2 ou plus.
     Aucun trait du canvas ne peut donc passer devant un texte ou une
     carte, quel que soit l'etat d'animation (clip, transform, opacite). */
  .tron-3d, .aurora { z-index: 0; }
  .hero, .section, .footer { position: relative; z-index: 2; }
  .section-inner, .hero-grid { position: relative; z-index: 1; }

  /* ===== Accessibilite : mouvement reduit ===== */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aurora, .status-dot, .charles-badge-dot, .antenna-ball { animation: none; }
    .hero-copy, .section, .r-item { opacity: 1; transform: none; transition: none; }
    .section, .section.visible, .section.visible .r-item { animation: none; clip-path: none; }
    .section.visible .r-item { opacity: 1; transform: none; }
    .section::before, .section.dim::after { display: none; }
    .charles-container { opacity: 1; transform: scale(1); }
    .charles-container.arrived, .charles-container.arrived.pulse { animation: none; }
    .charles-bubble { opacity: 1; transition: none; }
    .tilt { transform: none; }
    .logo-intro { display: none; }
  }






/* ============================================================
   REVISION MOBILE
   Cibles : iPhone 13 et posterieurs, Android 12 et posterieurs,
   et les pliables (Z Fold 7, 8, 8 Ultra) dans LES DEUX etats.

   Principe directeur, adopte apres retour terrain sur Z Fold 7 :
   ne plus faire dependre le nombre de colonnes d'un point de
   rupture ni d'un ratio d'ecran. Un pliable change de largeur en
   continu, et toute largeur non prevue retombait dans une ancienne
   regle posant deux colonnes rigides, d'ou des cartes plus larges
   que leur colonne qui se chevauchaient. Les grilles sont donc
   rendues INTRINSEQUEMENT responsives : le navigateur place autant
   de colonnes que la largeur en autorise, jamais plus.
   ============================================================ */

/* ===== 1. Jusqu'a 1100px : grilles auto-adaptatives ===== */
@media (max-width: 1100px) {

  /* -- Modele de boite. La production est en content-box : un
        width:100% AJOUTE le remplissage, la carte devient plus large
        que sa colonne et deborde sur sa voisine. Cause directe du
        chevauchement constate en ecran deplie. Borne a 1100px pour
        ne pas retrecir le bureau, ou des cartes sont dimensionnees
        en max-width. -- */
  .hero, .section, .footer, .nav-inner, .section-inner,
  .step-card, .cat-card, .trust-card, .why-card, .expert-card, .cta-card,
  .email-form, .email-input, .email-btn, .btn, .mobile-cta, .pill {
    box-sizing: border-box;
  }

  /* -- Grilles intrinseques. minmax(min(100%, 260px), 1fr) garantit
        que la colonne ne depasse JAMAIS la largeur disponible, ce
        qu'un simple 1fr ne fait pas. auto-fit place ensuite 1, 2 ou
        3 colonnes selon la place, sans qu'aucun seuil ne l'impose. -- */
  .cat-grid, .trust-grid, .why-grid, .experts-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    justify-content: center;
    justify-items: stretch;
    max-width: 900px;
    margin-inline: auto;
  }
  .steps-grid { flex-wrap: wrap; justify-content: center; align-items: stretch; }

  /* -- Seconde cause du chevauchement : un titre et un compteur en
        white-space:nowrap imposent une largeur minimale superieure a
        la colonne. On autorise le retour a la ligne partout. -- */
  .cat-top h3, .cat-count { white-space: normal; overflow: visible; text-overflow: clip; }
  .cat-card, .cat-body, .why-card, .expert-card, .step-card, .trust-card { min-width: 0; }
}

/* -- Des 700px de large, la place existe : on rend le menu et on
      retire le bandeau collant, quel que soit le ratio de l'ecran.
      Requete separee et non imbriquee, pour rester compatible avec
      les navigateurs sans imbrication CSS native. -- */
@media (min-width: 700px) and (max-width: 1100px) {
  .nav-links { display: flex; }
  .mobile-cta { display: none; }
  .footer { padding-bottom: 24px; }
}

/* ===== 2. Telephones et ecrans etroits : tout centre ===== */
@media (max-width: 699px) {

  /* -- Zones sures iOS : encoche, Dynamic Island, barre d'accueil.
        max() garantit un retrait meme quand l'encart vaut 0. -- */
  .nav-inner {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .hero, .section, .footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .mobile-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .steps-grid { flex-direction: column; align-items: center; }

  /* -- Toute carte : bornee, centree, jamais plus large que l'ecran -- */
  .step-card, .cat-card, .trust-card, .why-card, .expert-card, .cta-card {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  /* -- Cartes disposees en ligne : on empile et on centre -- */
  .cat-card, .why-card, .expert-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cat-card, .why-card, .expert-card, .step-card, .trust-card, .cta-card { text-align: center; }
  .cat-top { flex-direction: column; align-items: center; gap: 2px; }
  .cat-body, .expert-card > div { width: 100%; }
  .cat-arrow { display: none; }

  /* -- Chaque objet interne centre -- */
  .cat-icon, .trust-icon, .why-check, .expert-avatar, .step-num,
  .expert-avail, .email-section, .pills, .kpis {
    margin-inline: auto;
  }
  .cat-icon, .trust-icon, .why-check, .expert-avatar { flex-shrink: 0; }
  .pills, .pills-vertical { align-items: center; justify-content: center; }
  .pills-vertical .pills-label, .pills-vertical .pill { text-align: center; }
  .kpis { flex-direction: column; align-items: center; gap: 16px; }
  .kpi-sep { width: 36px; height: 1px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .footer-bottom .back-to-top { position: static; transform: none; }

  /* -- Cibles tactiles : 44px minimum -- */
  .btn, .email-btn, .pill { min-height: 44px; justify-content: center; }
  .footer-col a, .nav-links a { display: inline-block; padding-block: 13px; }
  .back-to-top { width: 44px; height: 44px; }

  .hero-title { overflow-wrap: break-word; hyphens: none; }
}

/* ===== 3. Tres petits ecrans (Android 360, iPhone 13 mini) ===== */
@media (max-width: 380px) {
  .hero-title { font-size: 1.45rem; }
  .step-card, .cat-card, .trust-card, .why-card, .cta-card { padding: 20px 16px; }
  .cta-card { padding: 28px 16px; }
}

/* ===== 4. Pliables deplies : Z Fold 7, 8, 8 Ultra =====
   Le nombre de colonnes est deja gere par les grilles intrinseques,
   quelle que soit la largeur. Ce bloc ne traite plus que le confort
   de lecture propre a un ecran presque carre : hero moins haut,
   texte borne, etapes remises en ligne. La fourchette de ratio est
   large (0,6 a 1,6) pour couvrir les deux orientations d'un deplie
   ainsi que les modeles a venir, sans les enumerer. */
@media (min-width: 620px) and (max-width: 1100px)
   and (min-aspect-ratio: 6/10) and (max-aspect-ratio: 16/10) {
  .steps-grid { flex-direction: row; }
  .step-arrow { transform: none; padding: 0 10px; }
  .hero { padding-top: calc(var(--nav-h, 64px) + 32px); }
  .hero-title { font-size: 2.2rem; }
  .hero-lead { max-width: 620px; margin-inline: auto; }
  .cta-card { max-width: 640px; margin-inline: auto; }
}

/* ===== 5. Ecrans courts en paysage (telephone tourne) ===== */
@media (max-height: 460px) and (orientation: landscape) {
  .charles-scene { width: 150px; height: 150px; margin-top: 40px; }
  .hero { padding-top: calc(var(--nav-h, 64px) + 8px); padding-bottom: 16px; }
  .hero-title { font-size: 1.5rem; }
}


/* ============================================================
   CORRECTIFS APRES RETOUR TERRAIN Z FOLD 7 (2)
   1. Pastilles rondes etirees en ovales
   2. Pied de page en colonne unique, sans structure
   ============================================================ */

/* ===== 1. Pastilles rondes : ne plus les etirer =====
   Les pastilles (coche verte, avatar expert, icone de categorie)
   sont des div. Les regles de centrage qui posaient width:100% sur
   les enfants directs les touchaient donc aussi, d'ou des ovales.
   On exclut explicitement ces elements, et on verrouille leur forme
   par aspect-ratio pour qu'aucune regle future ne puisse les
   deformer a nouveau. */
.why-card > div:not(.why-check),
.expert-top > div:not(.expert-avatar) {
  width: 100%;
  text-align: center;
}
/* Seules les pastilles a taille propre sont verrouillees en cercle.
   .trust-icon n'a AUCUNE dimension declaree (c'est un simple
   habillage colore autour d'un SVG, donc un bloc large de 100%) :
   lui imposer un aspect-ratio en ferait un carre geant de la largeur
   de la carte. Elle est donc explicitement exclue et neutralisee. */
.why-check, .expert-avatar {
  flex: 0 0 auto;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
}
.cat-icon { flex: 0 0 auto; align-self: center; }
.trust-icon { aspect-ratio: auto; width: auto; height: auto; }


/* ============================================================
   PIED DE PAGE : 4 COLONNES A TOUTES LES LARGEURS
   Regle demandee : logo dans une colonne etroite, description a sa
   droite, puis Plateforme, puis Legal (et Compte sur le .140).
   Chaque colonne de liens tient sur 3 lignes, son intitule occupant
   une ligne SUPERIEURE dont il est separe par un filet.

   La version precedente empilait tout sous 620px, ce qui donnait cette
   colonne unique centree jugee inesthetique. La structure ne change
   donc plus jamais : c'est la TAILLE DES CARACTERES qui absorbe la
   contrainte, via clamp() indexe sur la largeur de fenetre. Entre 340
   et 1140px, la typographie se contracte continument, sans palier ni
   saut visible.

   Les deux conteneurs intermediaires sont aplatis par display:contents,
   donc leurs enfants deviennent directement les colonnes de la grille,
   sans toucher au markup. minmax(0, Nfr) partout : un simple Nfr ne
   protege pas du debordement quand le contenu impose une largeur
   minimale, piege deja rencontre sur les cartes.
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns:
    minmax(0, 0.72fr)  /* logo, colonne etroite */
    minmax(0, 1.55fr)   /* description Charles */
    minmax(0, 1fr)      /* Plateforme */
    minmax(0, 1fr);     /* Legal */
  gap: clamp(12px, 2.4vw, 24px) clamp(9px, 2.6vw, 36px);
  align-items: start;
  text-align: left;
  max-width: var(--max-w, 1140px);
  margin-inline: auto;
}
.footer-brand, .footer-cols { display: contents; }

.footer-logo-btn { align-self: start; justify-self: stretch; min-width: 0; }
/* Le logo epouse SA piste au lieu d'imposer sa largeur : une valeur fixe
   le faisait deborder sur la colonne de description (mesure : piste 46px,
   logo 64px, donc 8px de chevauchement a 390px de large). */
.footer-logo { width: 100%; max-width: 118px; height: auto; }

.footer-desc {
  margin: 0;
  text-align: left;
  min-width: 0;
  max-width: 42ch;
  font-size: clamp(.6rem, 2.1vw, .88rem);
  line-height: 1.5;
}

.footer-col {
  text-align: left;
  align-items: flex-start;
  min-width: 0;
}

/* Intitule : ligne propre, filet de separation, jamais coupe. */
.footer-col h4 {
  font-size: clamp(.5rem, 1.75vw, .7rem);
  letter-spacing: .09em;
  margin: 0 0 clamp(5px, 1.3vw, 8px);
  padding-bottom: clamp(4px, 1vw, 6px);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
  white-space: nowrap;
  width: 100%;
}

/* Trois liens, donc trois lignes. Ils ne se coupent pas : c'est la
   taille qui cede, pas la mise en page. */
.footer-col a {
  display: block;
  font-size: clamp(.57rem, 1.95vw, .8rem);
  line-height: 1.35;
  padding-block: clamp(3px, .9vw, 5px);
  white-space: nowrap;
}

/* Sous 400px, "Mentions legales" et "Fonctionnement" sont les deux
   libelles les plus longs : on leur laisse un cran de plus. */
@media (max-width: 399px) {
  .footer-col a { letter-spacing: -.01em; }
}

/* ============================================================
   IDENTITE VISUELLE SUR MOBILE : la grille DOIT se voir
   Sur telephone, les sections sombres etouffaient le decor 3D :
   un flou d'arriere-plan (backdrop-filter) reduisait la grille en
   bouillie, puis un voile a 78% posait un aplat dessus. Mesurer le
   canvas ne detectait pas le probleme, le dessin etant correct SOUS
   le voile. Sur mobile le voile descend a 45% et le flou disparait :
   la grille et les points restent lisibles derriere, et le texte
   garde son contraste, les cartes ayant leur propre fond.
   Le bureau conserve trait pour trait le rendu valide.
   ============================================================ */
@media (max-width: 949px) {
  .section.dim {
    background: rgba(17, 17, 24, .45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Le pied de page garde un voile plus fort (petits caracteres),
     seul le flou disparait. */
  .footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}