/* ============================================================
   RedKey — Page de présentation publique (site vitrine)
   ------------------------------------------------------------
   Reprend la marque de l'application : rouge #C0392B, Poppins
   pour les titres, Inter pour le texte, plaque grise en relief.
   Feuille autonome : l'app (style.css) n'est PAS chargée ici,
   pour que le site reste léger et que ses règles ne fuient pas
   dans le CRM.

   THÈME CLAIR UNIQUEMENT, volontairement. L'application RedKey
   n'a pas de mode sombre : un visiteur en thème sombre aurait vu
   une page sombre puis, en cliquant sur « Connexion », une
   interface claire. Ne pas réintroduire de bloc
   @media (prefers-color-scheme: dark) ici.

   Système de formes (une seule règle, appliquée partout) :
     - surfaces, cartes, champs .... angles droits (0)
     - boutons ..................... angles droits, aplat ou contour
     - séparations ................. filets 1px, jamais d'ombre
   ============================================================ */

:root {
    /* Marque */
    --red: #C0392B;
    --red-dark: #9E2E22;
    --red-soft: rgba(192, 57, 43, 0.10);
    --red-line: rgba(192, 57, 43, 0.22);

    /* Plaque claire — identique à l'app */
    --bg: #E4E7EC;
    --surface: #F0F2F5;
    --surface-2: #E9ECF1;
    --hollow: #DBDFE6;
    --text: #262A30;
    --text-soft: #5C626B;
    --hairline: rgba(38, 42, 48, 0.09);
    /* Contour des boutons secondaires. Il était appelé sans jamais être
       défini : les deux endroits qui s'en servent retombaient chacun sur sa
       propre valeur de repli, 0,28 d'un côté et 0,22 de l'autre. Une seule
       valeur désormais, et un vrai token. */
    --border-btn: rgba(38, 42, 48, 0.26);

    /* Pas de relief : la structure se lit aux filets, comme dans le hero.
       Les variables d'ombre sont conservées mais neutralisées, pour ne pas
       avoir à traquer chaque composant. */
    --lift: transparent;
    --drop: transparent;
    --sh-sm: none;
    --sh-md: none;
    --sh-lg: none;
    --sh-inset: none;

    /* Filet : seul élément de séparation de la page */
    --rule: 1px solid var(--hairline);
    --rule-strong: 1px solid rgba(38, 42, 48, 0.18);

    /* Formes et rythme — angles droits, comme le bouton du hero */
    --r-card: 0;
    --r-field: 0;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    /* Réduit depuis 8rem : ce sont les filets qui séparent, pas le vide. */
    --section-y: clamp(3.25rem, 5.5vw, 5rem);
    --maxw: 74rem;

    /* Deux courbes, deux usages.
       --ease       : tout ce qui BOUGE (entrées, sorties, rotations).
                      Décélération franche, jamais de ease-in-out.
       --ease-hover : tout ce qui CHANGE DE COULEUR au survol. Une courbe
                      d'entrée-sortie douce y va mieux ; la décélération
                      franche donne l'impression que le bouton traîne. */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-hover: ease;

    --display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --body: "Inter", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;   /* la barre flottante ne masque plus les ancres */
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;              /* même graisse que le titre du hero */
    letter-spacing: -0.03em;
    line-height: 1.14;
    color: var(--text);
}

p { margin: 0; }
/* height:auto est indispensable : les <img> portent leurs dimensions natives
   (réservation de place, pas de saut de mise en page), sans quoi max-width
   réduit la largeur mais laisse la hauteur d'origine. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--red-soft); }

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

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    color: var(--text);
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-field);
    z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------
   Typographie d'échelle
   ------------------------------------------------------------ */
.t-hero  { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.t-sect  { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.t-card  { font-size: clamp(1.02rem, 1.4vw, 1.16rem); }

.lead {
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    color: var(--text-soft);
    max-width: 34rem;
}

/* Pas de pastilles décoratives sur cette page : les libellés d'appoint sont
   du texte, pas des badges arrondis teintés. */

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
/* Angles droits, contour ou aplat, jamais d'ombre portée : le bouton du hero
   sert de modèle à tous les autres. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-hover), border-color 0.18s var(--ease-hover),
                color 0.18s var(--ease-hover), transform 0.16s var(--ease);
}
/* Le bouton s'enfonce sous le doigt. Sans ça, rien ne dit que le clic a été
   entendu tant que la page suivante n'a pas répondu. */
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--red); border-color: var(--red); color: #FFFFFF; }

.btn-ghost { background: transparent; border-color: var(--border-btn); color: var(--text); }

/* Tous les survols sont conditionnés à un vrai pointeur : sur écran tactile,
   :hover reste collé après la tape et l'élément garde son état actif. */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
    .btn-ghost:hover { background: rgba(38, 42, 48, 0.05); border-color: var(--text); }
}

.btn-lg { padding: 1rem 1.7rem; font-size: 1rem; }

/* ------------------------------------------------------------
   Barre de navigation flottante
   ------------------------------------------------------------ */
/* Fixe, pas sticky : le hero commence au tout premier pixel et la barre
   flotte par-dessus la vidéo. */
/* Bandeau pleine largeur posé sur un filet, pas un bloc flottant.
   Il reste escamoté tant que la page n'a pas défilé : le hero occupe alors
   vraiment tout l'écran. Il redescend dès que le hero commence à sortir
   (bascule pilotée par un observateur, voir site.js — jamais par un
   écouteur de défilement, qui saccade). */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    border-bottom: var(--rule);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transform: translateY(-101%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav.is-visible { transform: none; opacity: 1; pointer-events: auto; }

/* Repère invisible : tant qu'il est à l'écran, on est encore dans le hero. */
.nav-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 62dvh;
    pointer-events: none;
    visibility: hidden;
}

/* Sans JavaScript, la barre doit rester accessible. */
.no-js .nav { transform: none; opacity: 1; pointer-events: auto; }
.nav-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 4.25rem;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: -0.02em;
}
.nav-brand img { width: 1.7rem; height: auto; }
.nav-brand b { font-weight: inherit; }   /* « RedKey » en un seul mot, sans espace */
.nav-brand span { color: var(--red); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-soft);
}
.nav-links a { transition: color 0.18s var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover { color: var(--text); }
}

.nav-cta { display: flex; align-items: center; gap: 1rem; margin-left: 1.5rem; }
/* Filet discret : sépare la navigation de l'espace « accès / action ». */
.nav-cta::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin: 1.1rem 0.2rem 1.1rem -0.6rem;
    background: var(--hairline);
}
.nav-login { font-size: 0.92rem; font-weight: 600; }

.nav-burger {
    display: none;
    width: 2.6rem;
    height: 2.6rem;
    margin-left: auto;
    border: var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}

/* La navigation vit dans le menu plein écran, à toutes les tailles : la barre
   ne garde que la marque, l'action principale et le bouton d'ouverture. */
.nav-links, .nav-login { display: none; }
.nav-burger { display: grid; place-items: center; margin-left: auto; }
.nav-cta { margin-left: 1rem; }
.nav-cta::before { display: none; }

@media (max-width: 620px) {
    .nav-cta .btn { display: none; }
}

/* Menu plein écran. Chaque entrée est une rangée séparée par un filet, dans
   le même langage que le reste de la page. */
.nav-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: center;
    gap: 0;
    padding: 6rem var(--gutter) 3rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.nav-panel.open { opacity: 1; visibility: visible; }

.nav-panel-inner {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    display: grid;
    border-top: var(--rule);
}
.nav-panel a {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    font-family: var(--display);
    font-size: clamp(1.7rem, 4.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
    border-bottom: var(--rule);
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), color 0.18s var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) {
    .nav-panel a:hover { color: var(--red); }
}
/* Le libellé d'appoint reste discret et aligné sur la ligne de base. */
.nav-panel a small {
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-soft);
}
/* Cascade à l'ouverture seulement : les délais vivent sur .open, donc la
   fermeture les perd et se fait d'un bloc. Ouvrir se regarde, fermer doit
   disparaître — asymétrie voulue, ne pas « corriger ». */
.nav-panel.open a { opacity: 1; transform: none; }
.nav-panel.open a:nth-child(1) { transition-delay: 0.04s; }
.nav-panel.open a:nth-child(2) { transition-delay: 0.08s; }
.nav-panel.open a:nth-child(3) { transition-delay: 0.12s; }
.nav-panel.open a:nth-child(4) { transition-delay: 0.16s; }
.nav-panel.open a:nth-child(5) { transition-delay: 0.20s; }
/* Le bouton de fermeture se pose exactement là où était le bouton menu. */
.nav-close {
    position: absolute;
    top: 0.82rem;
    right: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
    width: 2.6rem;
    height: 2.6rem;
    border: var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .nav-close:hover { border-color: var(--text); }
}

/* ------------------------------------------------------------
   Hero plein écran sur vidéo
   ------------------------------------------------------------ */
/* Contenu ancré en bas : la vidéo occupe le haut du cadre, le message se pose
   sur une ligne de base, comme un bas de page d'affiche. */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 100dvh;   /* jamais 100vh : la barre d'adresse d'iOS ferait sauter la page */
    padding-block: 8rem 4.5rem;
    overflow: hidden;
    isolation: isolate;
}

/* Fond de repli aussi sombre que le visuel : si l'image tarde, l'écran ne
   passe pas par un aplat clair avant de s'assombrir. */
.hero-media { position: absolute; inset: 0; z-index: -2; background: #14171A; }
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* DÉRIVE TRÈS LENTE — 32 s pour un aller-retour de 2,5 %.
       Une vidéo générée pour cette image ne donnait rien de bon : le décor est
       du béton et une vue fixe, il n'y a ni feuillage ni eau à animer. Le
       modèle attrapait donc le néon et le faisait clignoter, ce qui volait
       l'attention au titre.

       Ici la scène respire sans que rien ne « joue » : on ne perçoit pas le
       mouvement, on perçoit que l'image n'est pas morte. Coût : zéro octet,
       contre 1,5 à 3 Mo pour une vidéo.

       `scale` d'abord, puis `translate` : la mise à l'échelle donne la marge
       nécessaire au déplacement, sinon un bord découvrirait le fond.
       `transform` seul, jamais `width`/`top` : composé par le GPU, aucun
       recalcul de mise en page à chaque image.

       ⚠ `transform-origin` reste au CENTRE (valeur par défaut). Un point
       d'ancrage décalé — essayé à 61 %, pour suivre le recadrage portrait —
       rend les marges asymétriques : il ne restait plus que 5 px d'un côté, et
       un rapport d'écran un peu différent aurait découvert le fond. Le
       recadrage portrait est déjà géré par `object-position` plus bas. */
    animation: hero-derive 24s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hero-derive {
    /* 7 % d'échelle sur 24 s. Le premier réglage (4 % sur 32 s) était
       littéralement imperceptible : personne ne voyait la différence avec une
       image fixe. Un effet qu'on ne distingue pas d'une panne ne sert à rien —
       autant ne rien animer. Ici le mouvement se remarque si on regarde la
       hero quelques secondes, sans jamais attirer l'œil hors du titre.
       La marge d'échelle reste très supérieure au déplacement : aucun bord ne
       peut découvrir le fond, quel que soit le rapport d'écran. */
    from { transform: scale(1.07) translate3d(-1.6%, -1.1%, 0); }
    to   { transform: scale(1.07) translate3d(1.6%, 1.1%, 0); }
}

/* Immobile si le système le demande. Une image de fond n'a aucune raison de
   bouger chez quelqu'un que le mouvement dérange. */
@media (prefers-reduced-motion: reduce) {
    .hero-media img { animation: none; transform: none; will-change: auto; }
}
/* En portrait, le cadrage 16/9 est recoupé au centre — or le néon se tient
   à 60 % de la largeur de l'image, il partait donc vers le bord droit. On
   décale le point d'ancrage pour le ramener au milieu de l'écran. */
@media (max-aspect-ratio: 1/1) {
    .hero-media img { object-position: 61% center; }
}

/* Plus d'aplat général : le visuel est déjà une scène de nuit, l'assombrir
   encore éteindrait le néon, qui est tout l'intérêt de l'image. Seul reste
   un pied de dégradé sur le tiers bas, là où se posent le filet, le titre
   et le bouton — le canapé y est plus clair que le reste. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(12, 15, 18, 0) 55%,
        rgba(12, 15, 18, 0.55) 100%);
}

/* Pas de marque au centre du hero : le visuel de fond porte déjà le logo.
   Deux logos dans le même écran s'annulent. La barre de navigation le
   reprend de toute façon dès que la page défile. */
.hero-inner { display: grid; width: 100%; }
.hero-rule { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.28); margin-bottom: 2.2rem; }

.hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem 3rem;
    align-items: flex-end;
    width: 100%;
}
.hero-inner .t-hero {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    max-width: 18ch;
}

/* Bouton à angles droits, contour blanc : une seule action dans le hero,
   les tarifs restent accessibles depuis la barre de navigation. */
.hero-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1;
    transition: background-color 0.18s var(--ease-hover), border-color 0.18s var(--ease-hover),
                transform 0.16s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .hero-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; }
}
/* Le fond seul ne se voit pas sur une vidéo qui bouge : c'est l'échelle qui
   signale l'appui, elle est lisible sur n'importe quelle image. */
.hero-cta:active { background: rgba(255, 255, 255, 0.22); transform: scale(0.97); }

/* Sur téléphone, le bouton passe sous le titre et prend toute la largeur. */
@media (max-width: 700px) {
    .hero-cta { margin-left: 0; width: 100%; justify-content: center; }
}

/* Le hero se terminant sur sa ligne de base, ce qui suit ne remonte pas
   dessus : cela le recouvrirait. Le bandeau suit, simplement détaché. */
.after-hero { margin-top: clamp(2rem, 4vw, 3.5rem); position: relative; z-index: 2; }

/* Zoom sur la carte de la capture « Biens ».
   object-fit ne sait pas agrandir : on agrandit l'image (316 % de la largeur
   du cadre, soit la largeur exacte de la carte dans la capture d'origine) et
   on la décale pour amener la carte dans le cadre. */
.shot-crop { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 16 / 11; }
.shot-crop img {
    position: absolute;
    top: -108%;    /* amène l'amas de pastilles au centre du cadre */
    left: -208%;
    width: 316%;
    max-width: none;
    height: auto;
    border-radius: 0;
}

/* ------------------------------------------------------------
   Bandeau de réassurance (sous le hero)
   ------------------------------------------------------------ */
/* Quatre colonnes entre deux filets, séparées par des filets verticaux. */
.band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: var(--rule);
    border-bottom: var(--rule);
}
@media (min-width: 780px) { .band { grid-template-columns: repeat(4, 1fr); } }

.band-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1.5rem 0;
}
.band-item + .band-item { border-left: var(--rule); padding-left: 1.5rem; }
@media (max-width: 779px) {
    .band-item:nth-child(odd) { padding-left: 0; border-left: 0; }
    .band-item:nth-child(n+3) { border-top: var(--rule); }
}
.band-item i { color: var(--red); font-size: 1.05rem; margin-top: 0.15rem; }
.band-item strong { display: block; font-size: 0.94rem; font-weight: 600; }
.band-item span { font-size: 0.83rem; color: var(--text-soft); line-height: 1.45; }

/* ------------------------------------------------------------
   Sections génériques
   ------------------------------------------------------------ */
/* Chaque section est bornée par un filet qui va d'un bord à l'autre de
   l'écran : la séparation se voit avant même de lire. */
.sect { padding-block: var(--section-y); border-top: var(--rule-strong); }

/* ------------------------------------------------------------
   Rail latéral : une colonne étroite reste affichée à gauche pendant
   qu'on déroule le contenu de la section à droite. C'est ce rail qui
   donne sa structure à toute la page.
   ------------------------------------------------------------ */
.sect-grid { display: grid; gap: 1.75rem; }

@media (min-width: 1000px) {
    .sect-grid { grid-template-columns: 11rem minmax(0, 1fr); gap: 4.5rem; align-items: start; }
    .rail { position: sticky; top: 6.5rem; }
    /* Section « demande de démo » : le rail porte aussi la promesse, la
       colonne de droite est réservée au formulaire. */
    .sect-grid-demo { grid-template-columns: 19rem minmax(0, 1fr); }
}

.rail { display: grid; gap: 0.85rem; align-content: start; }
.rail-label {
    font-family: var(--body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--red-dark);
    line-height: 1.3;
}
.rail-note { font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }
.rail-mail {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--red-dark);
    border-bottom: 1px solid var(--red-line);
    justify-self: start;
}
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rail li { display: flex; gap: 0.6rem; font-size: 0.87rem; color: var(--text-soft); line-height: 1.5; }
.rail li i { color: var(--red); margin-top: 0.3rem; font-size: 0.72rem; }

/* Corps de section : le grand titre ouvre la colonne de droite. */
.sect-body { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.sect-body > .t-sect { max-width: 26ch; }
.sect-body > .lead { max-width: 42rem; margin-top: -0.75rem; }

/* ------------------------------------------------------------
   Avant / après — deux colonnes contrastées
   ------------------------------------------------------------ */
.versus {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 860px) { .versus { grid-template-columns: 1fr 1fr; } }

/* Deux colonnes séparées par un filet. Le contraste ne vient plus d'un
   creux et d'un relief, mais du texte : gris atténué contre texte plein. */
.versus-col { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) 0; }
.versus-before { color: var(--text-soft); }
.versus-after { padding-left: clamp(1.5rem, 3vw, 2.25rem); border-left: var(--rule); }
@media (max-width: 859px) {
    .versus-after { padding-left: 0; border-left: 0; border-top: var(--rule); }
}
.versus h3 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.versus-after h3 { color: var(--red); }

.versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.versus li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.95rem; }
.versus li i { margin-top: 0.25rem; font-size: 0.85rem; }
.versus-before li { color: var(--text-soft); }
.versus-before li i { color: var(--text-soft); }
.versus-after li i { color: var(--red); }

/* ------------------------------------------------------------
   Bento des fonctionnalités — 5 cellules, aucune vide
   ------------------------------------------------------------ */
.bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
/* Trois contenus, trois cellules : la grande capture en tête sur toute la
   largeur, les deux autres côte à côte en dessous. Aucune case vide. */
@media (min-width: 860px) {
    .bento { grid-template-columns: repeat(6, 1fr); }
    .bento-a { grid-column: span 6; }
    .bento-d { grid-column: span 3; }
    .bento-e { grid-column: span 3; }
}

/* Cellule cernée d'un filet, sans ombre ni survol qui décolle. */
.cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border: var(--rule);
    background: transparent;
    overflow: hidden;
    transition: border-color 0.18s var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) {
    .cell:hover { border-color: var(--red-line); }
}

/* Icône nue, sans rond teinté derrière. */
.cell-icon { color: var(--red); font-size: 1.35rem; line-height: 1; }
.cell p { color: var(--text-soft); font-size: 0.95rem; }

/* Cellule qui porte une capture : l'image déborde volontairement en bas */
.cell-visual { padding-bottom: 0; }
.cell-visual .cell-shot {
    margin-top: auto;
    margin-inline: -0.5rem;
    border: var(--rule);
    border-bottom: 0;
    overflow: hidden;
}
.cell-shot img { border-radius: 0; }

/* Cellule teintée : un aplat très léger suffit à varier le rythme. */
.cell-tint { background: var(--red-soft); }

/* Cellule « téléphone » : le visuel se pose sous le texte, cadré sur le haut
   de la capture (l'écran entier serait illisible à cette taille). */
.cell-mobile {
    margin-top: auto;
    width: min(11.5rem, 58%);
    margin-inline: auto;
    overflow: hidden;
    border: var(--rule);
    border-bottom: 0;
}
.cell-mobile img { border-radius: 0; }

/* ------------------------------------------------------------
   Parcours en 3 temps
   ------------------------------------------------------------ */
.flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    counter-reset: step;
}
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Le numéro est un chiffre, pas une pastille : gros, discret, aligné au filet. */
.flow-step { position: relative; display: grid; gap: 0.7rem; padding-top: 2.6rem; }
.flow-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--red);
}
.flow-step { border-top: 1px solid var(--hairline); padding-top: 3.4rem; }
.flow-step::before { top: 1.4rem; }
.flow-step h3 { font-size: 1.12rem; }
.flow-step p { color: var(--text-soft); font-size: 0.95rem; }

/* ------------------------------------------------------------
   Tarifs — lus en direct dans la table plans (RedKey Control)
   ------------------------------------------------------------ */
/* align-items: stretch (défaut) : les cartes font la même hauteur, donc les
   quatre boutons « Choisir » s'alignent sur une même ligne. */
.plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 700px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(4, 1fr); } }

/* Quatre colonnes sous un filet commun, séparées par des filets verticaux.
   Le plan mis en avant se distingue par un filet rouge en tête, pas par une
   carte flottante. */
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem 1.5rem 1.75rem 0;
    border-top: var(--rule-strong);
}
.plan + .plan { padding-left: 1.5rem; border-left: var(--rule); }
.plan-featured { border-top: 2px solid var(--red); }

.plan-name {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.2rem;
}
/* Mise en avant en toutes lettres plutôt qu'en badge collé sur la carte. */
.plan-note {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 500;
    font-style: normal;
    color: var(--red-dark);
}
.plan-price { display: flex; align-items: baseline; gap: 0.35rem; }
.plan-price b {
    font-family: var(--display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
}
.plan-price span { font-size: 0.85rem; color: var(--text-soft); }

.plan-limits { display: grid; gap: 0.55rem; padding: 0.9rem 0; border-block: 1px solid var(--hairline); }
.plan-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.plan-row i { width: 1rem; text-align: center; color: var(--text-soft); font-size: 0.8rem; }
.plan-row span { color: var(--text-soft); }
.plan-row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.plan-adds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plan-adds li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.plan-adds i { color: var(--red); font-size: 0.78rem; margin-top: 0.3rem; }
.plan-inherit { font-size: 0.82rem; color: var(--text-soft); font-style: italic; }

.plan .btn { margin-top: auto; justify-content: center; }

/* Tableau comparatif repliable */
.compare { margin-top: 2rem; }
/* Lien texte souligné, pas une pilule teintée. */
.compare > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--red-dark);
    list-style: none;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--red-line);
}
.compare > summary::-webkit-details-marker { display: none; }
.compare[open] > summary i { transform: rotate(180deg); }
.compare > summary i { transition: transform 0.22s var(--ease); }

.compare-scroll { overflow-x: auto; margin-top: 1.5rem; -webkit-overflow-scrolling: touch; }
.compare table {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: transparent;
    border-top: var(--rule-strong);
    border-bottom: var(--rule-strong);
}
.compare th, .compare td { padding: 0.75rem 1rem; text-align: center; }
.compare thead th { font-family: var(--display); font-size: 0.95rem; }
.compare tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.compare tbody th i { color: var(--text-soft); font-size: 0.8rem; width: 1rem; }
.compare tbody tr + tr { border-top: 1px solid var(--hairline); }
.compare .yes { color: var(--red); }
.compare .no  { color: var(--text-soft); opacity: 0.45; }
.compare td b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Questions fréquentes
   ------------------------------------------------------------ */
/* Titre à gauche, questions à droite : la largeur est occupée, et le titre
   reste visible pendant qu'on déroule les réponses. */
.qa { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
    .qa { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
    .qa-head { position: sticky; top: 7rem; }
}
.qa-head { display: grid; gap: 1rem; justify-items: start; }
.qa-head .lead { font-size: 1rem; }
.qa-mail { color: var(--red-dark); font-weight: 500; font-size: 0.95rem; border-bottom: 1px solid var(--red-line); }

/* Rangées séparées par un filet, pas des cartes empilées. */
.faq { display: grid; gap: 0; max-width: none; border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--red);
    /* Le panneau s'ouvre d'un coup : un chevron plus lent finirait sa course
       bien après le texte qu'il annonce. */
    transition: transform 0.22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p {
    padding: 0 0 1.4rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    max-width: 60ch;
}

/* ------------------------------------------------------------
   Demande de démonstration
   ------------------------------------------------------------ */
.demo {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-top: 2rem;
    border-top: var(--rule-strong);
}
@media (min-width: 950px) { .demo { grid-template-columns: 0.85fr 1fr; align-items: start; } }

.demo-side { display: grid; gap: 1.2rem; align-content: start; }
.demo-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.demo-side li { display: flex; gap: 0.7rem; font-size: 0.92rem; color: var(--text-soft); }
.demo-side li i { color: var(--red); margin-top: 0.28rem; font-size: 0.8rem; }
.demo-contact { font-size: 0.9rem; color: var(--text-soft); padding-top: 1rem; border-top: 1px solid var(--hairline); }
.demo-contact a { color: var(--red); font-weight: 600; }

/* align-items: start — sans quoi un champ voisin doté d'une aide sous le
   champ étire son vis-à-vis et les hauteurs de saisie deviennent inégales. */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field-full { grid-column: 1 / -1; }

.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.field .hint { font-size: 0.76rem; color: var(--text-soft); }

/* Champs plats, cernés d'un filet : ni creux ni coins arrondis. */
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-btn);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--body);
    font-size: 0.95rem;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-soft); opacity: 0.85; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: var(--sh-inset), 0 0 0 3px var(--red-soft);
}

/* Piège à robots : invisible pour l'humain, atteignable par un script */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-note { font-size: 0.78rem; color: var(--text-soft); }

.alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    border-radius: var(--r-field);
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
}
.alert i { margin-top: 0.2rem; }
.alert-ok  { background: rgba(71, 121, 90, 0.14); color: #2F5C42; border: 1px solid rgba(71, 121, 90, 0.3); }
.alert-err { background: var(--red-soft); color: var(--red-dark); border: 1px solid var(--red-line); }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
.foot {
    padding-block: 3rem 2.5rem;
    border-top: 1px solid var(--hairline);
    margin-top: var(--section-y);
}
.foot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
/* Les documents contractuels prennent une ligne à part, sous les deux
   premières colonnes : ils se cherchent, ils ne se parcourent pas. */
.foot-legal {
    flex-basis: 100%;
    padding-top: 1.25rem;
    border-top: var(--rule);
    font-size: 0.82rem;
}
.foot-links a { transition: color 0.18s var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
    .foot-links a:hover { color: var(--text); }
}

/* ------------------------------------------------------------
   Apparition au défilement (IntersectionObserver, voir site.js)
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Assistant, dans la section « Questions »
   ------------------------------------------------------------ */
/* Même langage que le reste : angles droits, filets, aucune ombre. Ni bulle
   flottante ni rond qui clignote — il se pose là où le visiteur a déjà une
   question en tête, et les réponses dépliantes restent en dessous. */
.ask { margin-bottom: 2.5rem; }
.ask-intro { margin: 0 0 1rem; color: var(--text-soft); font-size: 0.95rem; }

.ask-form { display: flex; border: var(--rule-strong); background: var(--surface); }
.ask-form input {
    flex: 1 1 auto; min-width: 0;
    padding: 0.95rem 1.1rem;
    border: 0; background: transparent;
    font-family: var(--body); font-size: 0.95rem; color: var(--text);
}
.ask-form input:focus { outline: none; }
.ask-form:focus-within { border-color: var(--red); }
.ask-form button {
    flex: 0 0 auto; width: 3.4rem;
    border: 0; border-left: var(--rule);
    background: var(--red); color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-hover), transform 0.16s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .ask-form button:hover:not(:disabled) { background: var(--red-dark); }
}
.ask-form button:active:not(:disabled) { transform: scale(0.97); }
.ask-form button:disabled { opacity: 0.5; cursor: default; }

.ask-thread { display: grid; gap: 0.75rem; }
.ask-thread:not(:empty) { margin-top: 1.25rem; }

.ask-bulle { padding: 0.85rem 1.1rem; font-size: 0.93rem; line-height: 1.6; }
/* La question porte le filet rouge, la réponse le fond : on distingue les
   deux voix sans recourir à des bulles arrondies façon messagerie. */
.ask-q { border-left: 3px solid var(--red); color: var(--text); font-weight: 500; }
.ask-r { border: var(--rule); background: var(--surface); color: var(--text-soft); }

/* Attente : la seule animation du bloc, et elle a une raison — sans elle,
   deux secondes de silence ressemblent à une panne. */
.ask-attente { color: var(--text-soft); font-style: italic; }
.ask-attente::after {
    content: ""; display: inline-block;
    width: 0.35rem; height: 0.35rem; margin-left: 0.4rem;
    background: var(--red); vertical-align: middle;
    animation: ask-pulse 1s ease-in-out infinite;
}
@keyframes ask-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ask-attente::after { animation: none; opacity: 0.6; }
}

.ask-relais {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.6rem; font-weight: 500; color: var(--red);
    border-bottom: 1px solid var(--red-line);
}

.ask-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--text-soft); }
.ask-foot a { color: var(--red); border-bottom: 1px solid var(--red-line); }

/* ------------------------------------------------------------
   Documents contractuels (pages/legal.php)
   ------------------------------------------------------------ */
/* La barre y est visible d'emblée : il n'y a pas de hero à préserver, et
   une page de conditions se lit en revenant en arrière. */
.page-doc { padding-top: 5rem; }

.doc-wrap { padding-block: var(--section-y); }

.doc-head { padding-bottom: 2rem; border-bottom: var(--rule-strong); margin-bottom: 2.5rem; }
.doc-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    margin-bottom: 1.25rem;
    transition: color 0.18s var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) {
    .doc-retour:hover { color: var(--red); }
}
.doc-intro { color: var(--text-soft); max-width: 60ch; margin-top: 0.75rem; }

/* Colonne de lecture bornée : au-delà d'une soixantaine de signes, l'œil
   perd la ligne suivante en revenant à la marge. */
.doc-body { max-width: 68ch; }
.doc-body h2 {
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 3rem 0 0.9rem;
    padding-top: 1.5rem;
    border-top: var(--rule);
}
/* Le titre porte déjà son filet : un `---` juste avant en dessinerait un
   second, à quelques pixels. Le premier titre n'en veut pas non plus. */
.doc-body h2:first-child,
.doc-body hr + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body hr + h2 { margin-top: 2.5rem; }
.doc-body h3 {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    margin: 2rem 0 0.6rem;
}
.doc-body p, .doc-body li { font-size: 0.95rem; line-height: 1.65; color: var(--text-soft); }
.doc-body p { margin: 0 0 1rem; }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body ul, .doc-body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.doc-body li { margin-bottom: 0.45rem; }
.doc-body hr { border: 0; border-top: var(--rule); margin: 2.5rem 0; }
.doc-body code {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", monospace;
    font-size: 0.85em;
    background: var(--red-soft);
    color: var(--red-dark);
    padding: 0.1em 0.4em;
}

/* Encadré d'avertissement : filet rouge à gauche, pas de fond teinté ni
   d'arrondi — le reste de la page n'en a nulle part. */
.doc-body blockquote {
    margin: 0 0 1.75rem;
    padding: 0.2rem 0 0.2rem 1.25rem;
    border-left: 3px solid var(--red);
}
.doc-body blockquote p { margin: 0; color: var(--text); }

/* Les tableaux du DPA débordent sur téléphone : ils défilent dans leur
   propre cadre, jamais la page. */
.doc-table { overflow-x: auto; margin: 0 0 1.75rem; -webkit-overflow-scrolling: touch; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.doc-body th, .doc-body td {
    text-align: left;
    vertical-align: top;
    padding: 0.7rem 1rem 0.7rem 0;
    border-bottom: var(--rule);
}
.doc-body th { font-weight: 600; color: var(--text); white-space: nowrap; }
.doc-body td { color: var(--text-soft); }

.doc-autres {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: var(--rule-strong);
    font-size: 0.9rem;
    font-weight: 500;
}
.doc-autres a { display: inline-flex; align-items: center; gap: 0.6rem; transition: color 0.18s var(--ease-hover); }
.doc-autres i { color: var(--red); font-size: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
    .doc-autres a:hover { color: var(--red); }
}

/* Un déplacement court et bref : le bloc se pose, il ne glisse pas. Au-delà
   d'une douzaine de pixels et d'un demi-tiers de seconde, le lecteur attend
   le texte au lieu de le lire — et il traverse six sections comme ça. */
.rise {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rise.seen { opacity: 1; transform: none; }

/* Les cellules du bento portent les deux classes. `transition` étant une
   propriété-raccourci, la règle .rise — plus bas dans le fichier, même
   spécificité — effaçait purement la transition de bordure : le survol
   changeait la couleur d'un coup sec. Les deux sont donc redéclarées ici. */
.cell.rise {
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
                border-color 0.18s var(--ease-hover);
}

@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; transition: none; }
    .btn, .cell, .plan, .nav-panel a { transition: none; }
    /* La barre est le plus grand déplacement de la page : elle se pose sans
       course, sinon elle échappe entièrement au réglage du système. */
    .nav { transform: none; transition: opacity 0.2s var(--ease); }
}

/* ------------------------------------------------------------
   Démonstration animée de l'import
   ------------------------------------------------------------ */
/* La démonstration déborde du rail : dans la colonne de droite elle ne fait
   que 856 px sur un écran large, et le texte de l'écran d'import y devient
   illisible. Elle reprend donc toute la largeur de la page. */
/* La vidéo reste dans sa colonne. Elle a débordé sur le rail un temps, pour
   compenser une typographie trop petite dans la séquence ; celle-ci ayant été
   agrandie à la source, le débordement n'avait plus de raison d'être et
   écrasait le reste de la page. */
.demo-import { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.demo-import video {
    display: block;
    width: 100%;
    height: auto;
    border: var(--rule);
    background: var(--surface-2);
}
.demo-import figcaption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    max-width: 60ch;
}

/* ================================================================
   V2 — Direction A : néomorphique, continuité avec l'app RedKey.
   Couche d'override posée sur le socle éditorial d'origine.
   ================================================================ */
:root {
    --nm-light: rgba(255, 255, 255, 0.78);
    --nm-dark: rgba(178, 186, 197, 0.62);
    --sh-soft: 0.4rem 0.4rem 1rem var(--nm-dark), -0.4rem -0.4rem 1rem var(--nm-light);
    --sh-soft-sm: 0.22rem 0.22rem 0.55rem var(--nm-dark), -0.22rem -0.22rem 0.55rem var(--nm-light);
    --sh-press: inset 0.22rem 0.22rem 0.55rem var(--nm-dark), inset -0.22rem -0.22rem 0.55rem var(--nm-light);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --section-y: clamp(4.5rem, 7vw, 7rem);
    --r-soft: 18px;
}

/* --- Réassurance : quatre vraies cartes, plus de filets collés --- */
.band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    border: 0;
}
@media (min-width: 900px) { .band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band-item {
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.85rem 1.6rem;
    background: var(--surface);
    border-radius: var(--r-soft);
    box-shadow: var(--sh-soft);
}
.band-item + .band-item { border-left: 0; padding-left: 1.6rem; }
@media (max-width: 899px) {
    .band-item:nth-child(odd) { padding-left: 1.6rem; }
    .band-item:nth-child(n+3) { border-top: 0; }
}
.band-item i {
    font-size: 1.15rem;
    width: 2.6rem; height: 2.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--sh-soft-sm);
    margin: 0;
}
.band-item strong { font-size: 1rem; margin-bottom: 0.2rem; }
.band-item span { font-size: 0.875rem; line-height: 1.6; }

/* --- Compteurs --- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem;
    margin-top: 1.1rem;
}
.stat {
    padding: 2.1rem 1.6rem;
    text-align: center;
    background: var(--surface);
    border-radius: var(--r-soft);
    box-shadow: var(--sh-soft);
}
.stat-n {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    line-height: 1;
    color: var(--red);
    letter-spacing: -0.02em;
}
.stat-l {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* --- Bloc souveraineté (globe) --- */
.globe-sect {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(2rem, 4vw, 3.25rem);
    background: var(--surface);
    border-radius: var(--r-soft);
    box-shadow: var(--sh-soft);
}
@media (min-width: 880px) { .globe-sect { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.globe-wrap {
    position: relative;
    width: min(20rem, 74vw);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--hollow);
    box-shadow: var(--sh-press);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.globe-wrap canvas { width: 100%; height: 100%; display: block; }
.globe-txt h2 { margin: 0 0 0.75rem; }
.globe-txt p { margin: 0; }

/* --- Cartes du bento et plans tarifaires --- */
.cell, .plan, .demo-side, .versus-col, .qa {
    background: var(--surface);
    border: 0;
    border-radius: var(--r-soft);
    box-shadow: var(--sh-soft);
}
.cell { padding: 1.85rem 1.6rem; }
.plan { padding: 2rem 1.6rem; }
.bento { gap: 1.1rem; }
.plans { gap: 1.1rem; }
.plan-featured { box-shadow: var(--sh-soft), 0 0 0 2px var(--red) inset; }
.shot-crop, .cell-shot img { border-radius: 12px; }

/* Boucle de navigation dans l'application : même cadre que les captures. */
.cell-video video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --- Champs et boutons --- */
.field input, .field textarea, .field select, .ask-form {
    background: var(--surface);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--sh-press);
}
.btn, .hero-cta, .nav-cta .btn {
    border-radius: 12px;
    transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active, .hero-cta:active { transform: scale(0.97); }

/* --- Interaction « press » : la carte s'enfonce, langage tactile de l'app --- */
@media (hover: hover) and (pointer: fine) {
    .band-item, .plan, .stat {
        transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
    }
    .band-item:hover, .plan:hover, .stat:hover {
        box-shadow: var(--sh-press);
        transform: translateY(1px);
    }
}

/* --- Mot tournant du hero --- */
.hero-word {
    color: var(--red);
    display: inline-block;
    min-width: 6.5ch;
    transition: opacity 400ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .hero-word, .band-item, .plan, .stat, .btn, .hero-cta { transition: none; }
}

/* --- Réassurance : une colonne sous 640px (deux colonnes hachaient le texte) --- */
@media (max-width: 639px) {
    .band { grid-template-columns: minmax(0, 1fr); }
    .band-item {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1.35rem 1.35rem;
    }
    .band-item i { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; }
    .band-item > div { min-width: 0; }
    .stat { padding: 1.75rem 1.35rem; }
    .globe-sect { padding: 1.5rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
    .band-item { padding: 1.6rem 1.35rem; }
}

/* --- Sous-titre du hero : blanc cassé, le hero est sur photo sombre --- */
.t-hero-sub {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--body);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 12px rgba(12, 15, 18, 0.45);
}
.t-hero-sub .hero-word { color: #fff; font-weight: 600; }

/* --- Globe : le canvas déborde légèrement son cercle pour remplir le cadre --- */
.globe-wrap canvas { width: 112%; height: 112%; }

/* --- Mot tournant : largeur naturelle (le min-width laissait un trou) --- */
.t-hero-sub .hero-word { min-width: 0; }

/* --- Navigation : les liens restent visibles en desktop.
       Les cacher derrière un burger sur grand écran enterre tarifs et produit. --- */
@media (min-width: 1000px) {
    .nav-links { display: flex; }
    .nav-login { display: inline-flex; }
    .nav-burger { display: none; }
}

/* ================================================================
   V2 — corrections de finition (verifiees par capture)
   ================================================================ */

/* « CHF / mois » se cassait sur deux lignes dans trois cartes sur quatre. */
.plan-price { flex-wrap: nowrap; }
.plan-price span { white-space: nowrap; font-size: 0.8rem; line-height: 1.25; }

/* Le rail sticky mangeait 248px sur toute la hauteur des sections
   pour n'afficher qu'un mot. Colonne resserree, contenu elargi. */
@media (min-width: 1000px) {
    .sect-grid { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 3rem; }
    /* Le filet de separation entre navigation et actions revient :
       sans lui, l'ecart entre « Questions » et « Connexion » paraissait accidentel. */
    .nav-cta { margin-left: 1.25rem; }
    .nav-cta::before { display: block; }
}

/* Compteurs : trop de hauteur pour trois chiffres. Chiffre et libelle
   rapproches, carte moins haute, libelle plus lisible. */
.stat { padding: 1.5rem 1.4rem; }
.stat-n { font-size: clamp(2.1rem, 3.4vw, 2.6rem); }
.stat-l { margin-top: 0.35rem; font-size: 0.86rem; color: var(--text-soft); }

/* « Biens au catalogue » tenait sur deux lignes et desalignait les rangees. */
.plan-row { font-size: 0.85rem; }
.plan-row span:first-of-type { white-space: nowrap; }

/* ================================================================
   V3 — Suppression des rails et des sections cloisonnees.
   Lecture centree, flux continu, titres qui portent la page.
   ================================================================ */

/* Plus de colonne laterale : une seule colonne centree. */
@media (min-width: 1000px) {
    .sect-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .rail { position: static; }
}
.sect-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* Le rail devient un sur-titre centre, au-dessus du titre de section. */
.rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    margin-bottom: 1rem;
    max-width: 46rem;
    margin-inline: auto;
}
.rail-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.rail-note, .rail p { font-size: 0.95rem; color: var(--text-soft); max-width: 42rem; }

/* Titres de section : centres, plus grands, ils portent le rythme. */
.t-sect {
    text-align: center;
    max-width: 20ch;
    margin-inline: auto;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.sect-body > .lead { text-align: center; max-width: 44rem; margin-inline: auto; }

/* Sections : plus de filets qui decoupent la page en tranches.
   La respiration suffit a separer. */
.sect { border-top: 0; padding-block: clamp(5rem, 9vw, 9rem); }
.after-hero { padding-top: clamp(3.5rem, 6vw, 5.5rem); }

/* Le contenu peut respirer plus large maintenant que le rail a disparu. */
.sect .wrap, .sect-body { max-width: 72rem; margin-inline: auto; }
.bento, .plans, .flow { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Le rail de la section demo garde sa colonne : le formulaire a besoin
   d'un vis-a-vis, sinon il flotte seul au milieu. */
@media (min-width: 1000px) {
    .demo .sect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
    .demo .rail { text-align: left; align-items: flex-start; margin-inline: 0; }
    .demo .t-sect { text-align: left; margin-inline: 0; }
}

/* ================================================================
   V3 — Maquettes d'ecran en HTML (plus de captures matricielles).
   Nettes a toute definition, responsives, ~2 Ko au lieu de 300.
   ================================================================ */
.mock {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--sh-soft);
    overflow: hidden;
    font-size: 0.82rem;
}
.mock-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--hollow);
    font-weight: 600; font-size: 0.78rem;
}
.mock-bar i { color: var(--red); font-size: 0.85rem; }
.mock-bar em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--text-soft); font-size: 0.72rem; }
.mock-body { padding: 0.7rem 0.9rem 0.9rem; display: grid; gap: 0.5rem; }

.mock-row {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg);
    border-radius: 10px;
}
.mock-tick {
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--hollow); color: var(--text-soft); font-size: 0.55rem;
}
.mock-tick.on { background: #2E7D5B; color: #fff; }
.mock-tick.hot { background: var(--red); color: #fff; }
.mock-row b { display: block; font-weight: 600; font-size: 0.8rem; }
.mock-row small { display: block; color: var(--text-soft); font-size: 0.72rem; }
.mock-amt { font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.mock-chip {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 0.18rem 0.5rem; border-radius: 999px;
    background: var(--red-soft); color: var(--red-dark); white-space: nowrap;
}
.mock-chip.ok { background: rgba(46,125,91,0.12); color: #2E7D5B; }

/* Grille des maquettes : trois ecrans cote a cote, empiles sur mobile. */
.mocks {
    display: grid; gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .mocks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.mock-cap { margin: 0.7rem 0 0; text-align: center; font-size: 0.88rem; color: var(--text-soft); }
.mock-cap b { display: block; color: var(--text); font-size: 0.98rem; font-weight: 600; margin-bottom: 0.15rem; }

/* --- Correction : 9rem en haut ET en bas cumulaient 288px entre sections. --- */
.sect { padding-block: clamp(3.25rem, 5vw, 4.75rem); }
.after-hero { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
/* La section souverainete porte deja une carte avec son propre padding. */
.sect > .wrap > .globe-sect { margin-top: 0; }
.bento, .plans, .flow, .mocks { margin-top: clamp(2rem, 3.5vw, 3rem); }
.compare { margin-top: 1.5rem; }
/* Le lien de comparaison suit l'alignement centre des sections. */
.compare > summary { justify-content: center; }
.compare { text-align: center; }
.compare-scroll { text-align: left; }

/* Le bloc « Vos données restent ici » est une carte isolée : sa marge basse
   s'ajoutait à la marge haute de la section suivante, soit 261 px de vide au
   milieu de la page. Une seule des deux suffit. */
.sect:has(.globe-sect) { padding-bottom: 2rem; }

/* Le globe n'était ni carré ni centré : cobe écrit sa propre taille en style
   en ligne (mesuré 358x440 dans un cercle de 320), ce qui le décalait vers le
   bas à gauche. On impose le carré, quoi qu'il écrive. */
.globe-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* La section n'avait plus de marge basse mais gardait ses 76 px en haut, et
   la carte du globe ajoute encore sa propre marge : le lien « Comparer les
   plans » flottait tout seul au milieu du vide. */
.sect:has(.globe-sect) { padding-top: 1.5rem; }
.globe-sect { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ---- Vidéos sur téléphone ----
   À 375 px, l'interface filmée tombe à 283 px de large : le texte de
   l'application n'y est plus lisible, la démonstration ne démontre plus rien.
   Deux réponses : la vidéo sort des marges de sa carte pour gagner toute la
   largeur, et un appui l'ouvre en plein écran (site.js). */
@media (max-width: 700px) {
    /* Sortir la vidéo des marges de sa carte ne gagnait qu'une trentaine de
       pixels et provoquait un débordement horizontal de la page : abandonné.
       Ce qui rend vraiment la démonstration lisible, c'est le plein écran. */
    .cell-video video, .demo-import video { cursor: zoom-in; }

    .video-zoom {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-soft);
    }
    .video-zoom i { margin-right: 0.35rem; }
}
@media (min-width: 701px) { .video-zoom { display: none; } }