/*!
 * Atlas — gestionnaire immobilier. Version 1.85.0.
 * Copyright (c) 2026 Systegon. Tous droits reserves.
 *
 * Ce fichier et son contenu sont protégés par le droit d'auteur
 * (code de la propriété intellectuelle, art. L112-2 et L122-6).
 * Leur reproduction, adaptation ou réutilisation, même partielle,
 * est interdite sans autorisation écrite de Systegon.
 *
 * https://atlas.systegon.com — contact-atlas@systegon.com
 */
/* ==========================================================================
   LA VITRINE D'ATLAS — pages publiques, avant toute connexion
   ==========================================================================

   L'IDÉE QUI TIENT TOUT : LE SOLEIL.
   La page d'accueil portait déjà un point lumineux qui basculait du bleu au
   doré. C'était un jeu ; il devient le sens de la maison :

       BLEU  = le gestionnaire. Ce qu'il possède, ce qu'il pilote.
       DORÉ  = le locataire.    Ce qu'il reçoit, ce qu'il comprend.

   Une seule lumière, deux versants. C'est exactement ce qu'est Atlas : un
   produit vendu au professionnel, mais dont la moitié de la valeur se joue
   chez quelqu'un qui ne l'achètera jamais. Toute page qui parle au locataire
   passe en doré (`body.versant-client`) — sans changer de maison.

   Rien ici n'est décoratif par accident : la couleur dit à qui l'on parle.
   ========================================================================== */

:root{
  /* Le ciel — commun aux deux versants */
  --nuit:#05060f;
  --nuit-haute:#0c1530;
  --voile:rgba(255,255,255,.06);
  --trait:rgba(174,207,242,.14);
  --trait-vif:rgba(174,207,242,.30);

  /* ── LA VITRINE EST NOCTURNE, ET C'EST UN CHOIX ─────────────────────────
   *
   * Elle n'a pas de thème clair, et n'en aura pas : ciel étoilé animé,
   * pyramides éclairées par-dessous, dégradés qui n'existent que sur du noir.
   * En faire une version claire ne serait pas une adaptation mais une autre
   * page. Elle peint donc tout explicitement — un visiteur en préférence
   * claire la voit telle qu'elle est prévue, ce qui a été vérifié.
   *
   * `color-scheme: dark` EST LA PIÈCE QUI MANQUAIT. Sans elle, les éléments
   * que le NAVIGATEUR dessine lui-même suivent le système : la liste qui
   * s'ouvre sous un menu déroulant, le calendrier d'un champ de date, la
   * barre de défilement. Sur un système en clair, ils s'affichaient en noir
   * sur blanc au milieu d'une page sombre — le seul endroit où la vitrine
   * cessait d'être elle-même, et celui qu'aucune règle de couleur n'atteint. */
  color-scheme:dark;

  /* Versant gestionnaire */
  --clair:#d8ecf8;
  --bleu:#9dc3f7;
  --bleu-profond:#6fa8e8;
  --encre:#e8eef8;
  --encre-douce:#a8b8cf;
  --encre-tenue:#6f7f97;

  /* L'accent du versant courant : bleu par défaut, doré côté locataire.
     Tout ce qui accentue passe par cette variable — c'est ce qui permet de
     changer de versant sans réécrire une seule règle. */
  --accent:#9dc3f7;
  --accent-vif:#bad6f7;
  --accent-sourd:rgba(157,195,247,.16);
  --accent-ombre:rgba(157,195,247,.40);
}

body.versant-client{
  --accent:#e8c56a;
  --accent-vif:#f5dd9a;
  --accent-sourd:rgba(232,197,106,.16);
  --accent-ombre:rgba(232,197,106,.42);
}

*{box-sizing:border-box;}
/* Même raison que dans base.css : iOS regonfle le texte de lui-même à la
   rotation en paysage, et les proportions de la page se défont. La vitrine ne
   charge pas base.css — la règle doit donc exister ici aussi. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--nuit);
  background-image:radial-gradient(ellipse 120% 80% at 50% -10%, var(--nuit-haute) 0%, var(--nuit) 55%, #000 100%);
  background-attachment:fixed;
  color:var(--encre);
  font-family:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Le ciel étoilé, derrière tout ── */
#ciel{position:fixed;inset:0;z-index:0;pointer-events:none;}

.enveloppe{position:relative;z-index:1;}
.bande{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ══════════════════════════════════════════════════════════════════════════
   L'EN-TÊTE
   Volontairement maigre : une marque, trois liens, aucun fond, aucune ombre.
   C'est la première chose qu'on voit et la dernière qui doit attirer l'œil.
   ══════════════════════════════════════════════════════════════════════════ */
.entete{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 28px;max-width:1160px;margin:0 auto;
}
.entete nav{display:flex;align-items:center;gap:26px;}

.marque{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--encre);
}
/* Le vrai logo Atlas, en tout petit. Ses dégradés partent de `currentColor`,
   donc il passe au doré avec le reste dès qu'on bascule sur le versant
   locataire — aucune seconde version à maintenir. */
.marque-logo{
  width:31px;height:auto;display:block;flex-shrink:0;
  color:var(--accent);
  transition:color .3s;
}
@media (max-width:640px){ .marque-logo{width:27px;} }
.marque-nom{
  font-size:17px;font-weight:600;letter-spacing:-.01em;
}

.lien-tete{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:14px;color:var(--encre-douce);text-decoration:none;
  transition:color .2s;
}
.lien-tete:hover{color:var(--encre);}
.lien-tete.actif{color:var(--accent);}

/* ══════════════════════════════════════════════════════════════════════════
   LA NAVIGATION PUBLIQUE
   ══════════════════════════════════════════════════════════════════════════

   Elle avait divergé en cinq versions parce qu'elle était recopiée dans
   dix-huit fichiers ; elle est désormais injectée depuis `partials/nav.html`.
   Ce bloc habille ce fragment unique.

   LE PROBLÈME DU TÉLÉPHONE, ET SA VRAIE SOLUTION. L'ancienne règle masquait
   « Ce qu'il fait » et « Tarifs » sous 640 px — sans rien pour les
   remplacer. Sur un écran de 390 px, la vitrine se réduisait donc à deux
   liens, et les tarifs devenaient introuvables depuis un téléphone, d'où
   vient pourtant la majorité des visites. Masquer n'est pas ranger : ce qui
   sort de la barre entre dans le menu. */

.nav-vitrine{display:flex;align-items:center;gap:22px;}

.nav-separateur{
  width:1px;height:20px;background:var(--trait-vif);opacity:.6;
}

/* LE LIEN DU GRATUIT — le seul de la barre qui ne ressemble pas aux autres.
   C'est la porte d'entrée du produit : on s'en sert sans compte, sans carte,
   sans rien laisser. Un visiteur qui repart avec sa quittance a déjà éprouvé
   Atlas, ce qu'aucun argumentaire ne fait. Il porte donc la seule pastille
   de la barre — et il est le seul à survivre au téléphone. */
.lien-gratuit{
  gap:8px;padding:7px 14px 7px 15px;border-radius:var(--r-pill,99px);
  color:var(--encre);font-weight:550;
  border:var(--filet,1px) solid var(--accent-sourd);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  transition:border-color .2s, background .2s, color .2s;
}
.lien-gratuit:hover{
  color:var(--accent-vif);
  border-color:var(--accent-ombre);
  background:color-mix(in srgb, var(--accent) 15%, transparent);
}
.pastille{
  /* 11,5 px est le plancher de lisibilité retenu par le banc d'affichage, et
     il ne se négocie pas : une mention qu'on ne peut pas lire ne rassure
     personne. Elle était à 10,5 — assez pour paraître soignée sur un écran de
     bureau, trop peu pour être lue sur un téléphone. */
  font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--r-pill,99px);
  color:#08131f;background:var(--accent);
  line-height:1;white-space:nowrap;
}

/* L'action d'inscription : le seul bouton plein de la barre. Deux boutons
   pleins côte à côte ne hiérarchisent rien — « Se connecter » reste un lien,
   parce que celui qui a déjà un compte sait le trouver. */
.bouton-tete{
  display:inline-flex;align-items:center;min-height:38px;padding:0 18px;
  border-radius:var(--r-pill,99px);font-size:14px;font-weight:600;text-decoration:none;
  background:linear-gradient(140deg, var(--accent-vif), var(--accent));
  color:#08131f;box-shadow:0 5px 20px -8px var(--accent-ombre);
  transition:box-shadow .2s, transform .12s;
}
.bouton-tete:hover{box-shadow:0 9px 28px -8px var(--accent-ombre);}
.bouton-tete:active{transform:scale(.98);}

/* L'ÉTAT ACTIF SE DÉDUIT DE LA PAGE, jamais du fragment. Chaque page déclare
   son `data-page` sur <body> ; sans cela il faudrait une version du fragment
   par page — c'est-à-dire le problème qu'il résout. */
body[data-page="gratuit"]   [data-nav="gratuit"],
body[data-page="tarifs"]    [data-nav="tarifs"],
body[data-page="locataire"] [data-nav="locataire"],
body[data-page="fonctions"] [data-nav="fonctions"]{color:var(--accent);}
body[data-page="tarifs"]    [data-nav="tarifs"],
body[data-page="locataire"] [data-nav="locataire"],
body[data-page="fonctions"] [data-nav="fonctions"]{
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;
}
body[data-page="gratuit"] .lien-gratuit{
  border-color:var(--accent-ombre);
  background:color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── LE MENU DU TÉLÉPHONE ────────────────────────────────────────────────
   Un <details> natif : pas une ligne de script. La politique de sécurité
   interdit le script en ligne, et l'élément natif fait exactement cela en
   restant utilisable au clavier et annoncé aux lecteurs d'écran. */
.menu-tel{display:none;position:relative;}
.menu-tel summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-sm,11px);
  border:var(--filet,1px) solid var(--trait-vif);
}
.menu-tel summary::-webkit-details-marker{display:none;}
.menu-tel summary:hover{border-color:var(--accent);}
.barres{display:flex;flex-direction:column;gap:4px;width:16px;}
.barres i{display:block;height:1.5px;background:var(--encre);border-radius:2px;}
.menu-tel[open] summary{border-color:var(--accent);}
.menu-tel-panneau{
  position:absolute;right:0;top:calc(100% + 10px);z-index:40;
  display:flex;flex-direction:column;min-width:212px;padding:8px;
  border-radius:var(--r-md,15px);border:var(--filet,1px) solid var(--trait-vif);
  background:var(--fond-carte, #0d1725);
  box-shadow:0 22px 54px -18px rgba(0,0,0,.7);
}
.menu-tel-panneau a{
  padding:11px 13px;border-radius:var(--r-sm,10px);
  font-size:14.5px;color:var(--encre-douce);text-decoration:none;
}
.menu-tel-panneau a:hover{background:var(--accent-sourd);color:var(--encre);}
.menu-tel-panneau hr{
  border:0;border-top:var(--filet,1px) solid var(--trait-vif);margin:6px 9px;
}
.menu-tel-primaire{color:var(--accent) !important;font-weight:600;}

@media (max-width:860px){
  .entete{padding:16px 18px;gap:10px;}
  .nav-vitrine{gap:10px;}
  .marque-nom{font-size:16px;}
  /* CE QUI SORT DE LA BARRE ENTRE DANS LE MENU — il n'y a plus de lien
     simplement escamoté.
   *
   * LA SPÉCIFICITÉ EST DÉLIBÉRÉE, et elle a été payée pour l'apprendre.
   * Écrite `.au-large{display:none}`, la règle perdait : deux règles plus
   * bas dans le fichier reposent `display:inline-flex` sur `.lien-tete`
   * pour lui garantir ses 40 px de hauteur tactile. Même spécificité, donc
   * c'est l'ORDRE qui tranchait — et les liens restaient affichés, invisibles
   * à la lecture du code mais bien là : sur 390 px, « Fonctionnalités »
   * débordait par-dessus le bouton du menu et interceptait ses clics.
   * Le menu était inatteignable au doigt.
   *
   * `.nav-vitrine .au-large` vaut 0,2,0 et gagne quel que soit l'ordre. Une
   * règle de masquage doit être plus forte que ce qu'elle masque, jamais
   * seulement plus tardive. */
  .nav-vitrine .au-large{display:none;}
  .nav-vitrine .menu-tel{display:block;}
}
@media (max-width:420px){
  /* Sous 420 px, la pastille « sans compte » pousse la barre au-delà de sa
     largeur. Le lien reste, entier et lisible ; c'est la mention qui cède. */
  .pastille{display:none;}
  .lien-gratuit{padding:7px 13px;font-size:13.5px;}
}

/* L'en-tête réduite des pages de connexion et d'inscription. */
.entete-nue{max-width:1160px;}


.titre-zone{text-align:center;padding:0 24px 40px;}
.surtitre{
  display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:var(--r-pill,99px);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-sourd);border:var(--filet,1px) solid var(--accent-sourd);
}
h1{
  margin:0 0 18px;font-size:clamp(38px, 7vw, 68px);font-weight:600;
  line-height:1.04;letter-spacing:-.035em;text-wrap:balance;
  background:linear-gradient(180deg, #fff 0%, var(--clair) 40%, var(--accent) 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chapeau{
  max-width:600px;margin:0 auto;font-size:clamp(16px,2.1vw,19px);
  line-height:1.6;color:var(--encre-douce);text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════ Boutons ── */
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.bouton{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-pill,99px);border:var(--filet,1px) solid transparent;
  font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.bouton:active{transform:scale(.98);}
.bouton.plein{
  background:linear-gradient(140deg, var(--accent-vif), var(--accent));
  color:#08131f;box-shadow:0 6px 26px -8px var(--accent-ombre);
}
.bouton.plein:hover{box-shadow:0 10px 34px -8px var(--accent-ombre);}
.bouton.creux{background:transparent;border-color:var(--trait-vif);color:var(--encre);}
.bouton.creux:hover{border-color:var(--accent);color:var(--accent);}
.bouton svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ═════════════════════════════════════════════════════════════ Sections ── */
section{padding:88px 0;}
.section-tete{max-width:640px;margin:0 0 44px;}
.section-tete.centre{margin-left:auto;margin-right:auto;text-align:center;}
.oeil{
  display:block;margin-bottom:12px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
h2{
  margin:0 0 14px;font-size:clamp(27px,4vw,38px);font-weight:600;
  line-height:1.16;letter-spacing:-.025em;text-wrap:balance;
}
.section-tete p{margin:0;font-size:17px;line-height:1.62;color:var(--encre-douce);}

/* ── À qui Atlas s'adresse : le sélecteur vivant ──
   C'est la démonstration de la promesse. Plutôt que d'écrire « Atlas
   s'adapte », la page s'adapte sous les yeux du visiteur. */
.spectre{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
/* 40 px au doigt : ces cinq boutons sont le premier geste d'un visiteur sur
   la vitrine — celui qui choisit quel Atlas on lui montre. À 38 px ils se
   manquent, et l'on repart en croyant le site cassé (banc mobile). */
.spectre-btn{
  padding:11px 18px;min-height:40px;border-radius:var(--r-pill,99px);cursor:pointer;
  background:var(--voile);border:var(--filet,1px) solid var(--trait);color:var(--encre-douce);
  font-family:inherit;font-size:14px;font-weight:500;
  transition:border-color .2s,color .2s,background .2s;
}
.spectre-btn:hover{border-color:var(--trait-vif);color:var(--encre);}
.spectre-btn.actif{
  background:var(--accent-sourd);border-color:var(--accent);color:var(--accent);font-weight:600;
}
.portrait{
  max-width:760px;margin:0 auto;padding:32px 34px;border-radius:var(--r-lg,22px);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:var(--filet,1px) solid var(--trait);
  transition:opacity .25s;
}
.portrait.change{opacity:0;}
.portrait-titre{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:-.015em;}
.portrait-texte{margin:0 0 22px;font-size:16.5px;line-height:1.62;color:var(--encre-douce);}
.portrait-points{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.portrait-points li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.5;}
.portrait-points svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--accent);
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ── Les fonctions : des cartes qui mènent ailleurs ── */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;}
.carte{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 22px;border-radius:var(--r-lg,20px);text-decoration:none;color:inherit;
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:var(--filet,1px) solid var(--trait);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s, box-shadow .22s;
  overflow:hidden;
}
/* Une lueur naît au coin haut-gauche au survol : la carte s'éclaire plutôt
   que de bouger brutalement. */
.carte::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at 12% 0%, var(--accent-sourd), transparent 62%);
}
.carte:hover{transform:translateY(-4px);border-color:var(--trait-vif);
  box-shadow:0 18px 46px -22px rgba(0,0,0,.9);}
.carte:hover::before{opacity:1;}
.carte-ico{
  position:relative;width:42px;height:42px;border-radius:var(--r-md,13px);margin-bottom:18px;
  display:grid;place-items:center;color:var(--accent);
  background:var(--accent-sourd);border:var(--filet,1px) solid var(--accent-sourd);
}
.carte-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.carte h3{position:relative;margin:0 0 8px;font-size:18.5px;font-weight:600;letter-spacing:-.015em;}
.carte p{position:relative;margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--encre-douce);flex:1;}
.carte-suite{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--accent);
}
.carte-suite svg{width:14px;height:14px;transition:transform .2s;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.carte:hover .carte-suite svg{transform:translateX(3px);}
.carte.beta .carte-ico::after{
  content:"bêta";position:absolute;top:-9px;right:-16px;
  padding:1px 6px;border-radius:var(--r-pill,99px);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  background:var(--accent);color:#08131f;
}

/* ══════════════════════════ LE VERSANT CLIENT — le passage au doré ══════ */
.passage{
  position:relative;padding:76px 0;margin:40px 0;
  border-top:var(--filet,1px) solid var(--trait);border-bottom:var(--filet,1px) solid var(--trait);
  /* Le doré s'invite ici même sur une page bleue : c'est l'endroit où l'on
     parle de l'autre versant, et la lumière l'annonce avant les mots. */
  background:
    radial-gradient(760px circle at 50% 0%, rgba(232,197,106,.13), transparent 66%),
    radial-gradient(560px circle at 50% 100%, rgba(232,197,106,.06), transparent 62%);
}
.passage .oeil,
.passage .portrait-points svg{color:#e8c56a;}
.passage .bouton.plein{background:linear-gradient(140deg,#f5dd9a,#e8c56a);color:#1a1405;
  box-shadow:0 6px 26px -8px rgba(232,197,106,.42);}
.passage .bouton.creux:hover{border-color:#e8c56a;color:#e8c56a;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
@media (max-width:820px){ .duo{grid-template-columns:1fr;gap:30px;} }


/* ═══════════════════════════════════════════════════ Une phrase forte ── */
.affirmation{
  max-width:820px;margin:0 auto;text-align:center;
  font-size:clamp(21px,3.1vw,30px);line-height:1.42;font-weight:500;
  letter-spacing:-.02em;text-wrap:balance;color:var(--clair);
}
.affirmation b{color:var(--accent);font-weight:600;}

/* ══════════════════════════════════════════════════════════════ Pied ── */
footer{padding:56px 0 44px;border-top:var(--filet,1px) solid var(--trait);}
.pied-grille{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.pied-mot{max-width:340px;font-size:14px;line-height:1.6;color:var(--encre-tenue);}
.pied-liens{display:flex;gap:28px;flex-wrap:wrap;}
.pied-col{display:flex;flex-direction:column;gap:9px;}
.pied-col strong{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-tenue);}
.pied-col a{font-size:14.5px;color:var(--encre-douce);text-decoration:none;}
.pied-col a:hover{color:var(--accent);}

/* ══════════════════════════════════ Apparition au défilement ══════════ */
.monte{opacity:0;transform:translateY(22px);transition:opacity .6s ease-out, transform .6s cubic-bezier(.22,.61,.36,1);}
.monte.vu{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .monte{opacity:1;transform:none;transition:none} }

@media (max-width:640px){
  body{font-size:16px;}
  /* Hauteur tactile : au doigt, un lien de 22 px se manque une fois sur
     trois. Les liens de navigation et de pied en sont, même s'ils
     ressemblent à du texte. */
  .lien-tete{min-height:40px;display:inline-flex;align-items:center;}
  .pied-col a{min-height:40px;display:inline-flex;align-items:center;}
  .marque{min-height:40px;}
  .retour{min-height:40px;}
  section{padding:62px 0;}
  .entete{padding:14px 16px;}
  .lien-tete{padding:8px 11px;font-size:13.5px;white-space:nowrap;}
  /* `.lien-tete.secondaire` et `.entete nav{gap}` vivaient ici. La classe
     `secondaire` n'existe plus — masquer des liens sans rien offrir à la
     place était le défaut qu'on a corrigé — et le gap appartient désormais
     à `.nav-vitrine`. */
  .bande{padding:0 18px;}
  .portrait{padding:24px 20px;}
  .bouton{padding:12px 20px;font-size:14.5px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES DE DÉTAIL — une fonction, expliquée
   Elles répondent à « comment ça marche ? », pas à « pourquoi acheter ». Le
   visiteur qui arrive ici a déjà été convaincu par la page d'accueil : il
   veut comprendre le mécanisme, pas se faire vendre à nouveau.
   ══════════════════════════════════════════════════════════════════════════ */
.retour{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-size:14px;color:var(--encre-douce);text-decoration:none;
}
.retour:hover{color:var(--accent);}
.retour svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.detail-tete{max-width:720px;padding:10px 0 46px;}
.detail-tete h1{font-size:clamp(32px,5.4vw,50px);margin-bottom:16px;}
.detail-tete .chapeau{margin:0;text-align:left;}

/* Les étapes : le mécanisme, dans l'ordre où il se produit. La numérotation
   est ici légitime — c'est une séquence, pas une liste décorée. */
.etapes{display:grid;gap:14px;counter-reset:etape;}
.etape{
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  padding:22px 24px;border-radius:var(--r-lg,18px);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:var(--filet,1px) solid var(--trait);
}
.etape::before{
  counter-increment:etape;content:counter(etape);
  width:36px;height:36px;border-radius:var(--r-sm,11px);display:grid;place-items:center;
  font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--accent);background:var(--accent-sourd);border:var(--filet,1px) solid var(--accent-sourd);
}
.etape h3{margin:6px 0 7px;font-size:18px;font-weight:600;letter-spacing:-.015em;}
.etape p{margin:0;font-size:15.5px;line-height:1.58;color:var(--encre-douce);}

/* Ce qu'on dit franchement — les limites. Une page produit qui n'en a aucune
   n'est pas crue, et à juste titre. */
.franchise{
  padding:24px 26px;border-radius:var(--r-lg,18px);margin-top:34px;
  background:rgba(255,255,255,.025);border:var(--filet,1px) solid var(--trait);
  border-left:3px solid var(--accent);
}
.franchise strong{display:block;margin-bottom:7px;font-size:15px;}
.franchise p{margin:0;font-size:15px;line-height:1.6;color:var(--encre-douce);}

.suite-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:16px;}
.suite-lien{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-radius:var(--r-md,14px);text-decoration:none;color:var(--encre);
  background:rgba(255,255,255,.03);border:var(--filet,1px) solid var(--trait);
  font-size:15px;font-weight:500;transition:border-color .2s,color .2s;
}
.suite-lien:hover{border-color:var(--accent);color:var(--accent);}
.suite-lien svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ══════════════════════════════════════════════════════════════════════════
   LES VISUELS — montrer Atlas plutôt que le décrire
   Toutes les images sont des captures du VRAI produit, sur données de
   démonstration. Une illustration inventée promettrait ce qui n'existe pas ;
   une capture engage.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le cadre commun : une fenêtre posée dans le ciel, légèrement inclinée pour
   ne pas ressembler à une capture d'écran collée. */
.hublot{
  position:relative;border-radius:var(--r-md,16px);overflow:hidden;
  border:var(--filet,1px) solid var(--trait-vif);
  background:#0a0f1a;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.hublot img,.hublot video{display:block;width:100%;height:auto;}
/* Un léger voile en bas : l'image se fond dans la page au lieu de s'y couper net. */
.hublot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(to top, rgba(5,6,15,.55), transparent);
}
.hublot-barre{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:rgba(255,255,255,.03);border-bottom:var(--filet,1px) solid var(--trait);
}
.hublot-barre i{width:9px;height:9px;border-radius:50%;background:var(--trait-vif);display:block;}
.hublot-barre span{
  margin-left:8px;font-size:11.5px;color:var(--encre-tenue);
  letter-spacing:.02em;
}

/* La constellation : la vidéo du vrai organigramme, en boucle et muette.
   C'est l'objet le plus reconnaissable d'Atlas — il mérite la première place. */
.constellation{
  position:relative;margin:0 auto;max-width:900px;
  border-radius:var(--r-lg,22px);overflow:hidden;border:var(--filet,1px) solid var(--trait);
  background:#05060f;
  box-shadow:0 50px 120px -60px rgba(0,0,0,1);
}
.constellation video{display:block;width:100%;height:auto;}
/* Les bords se fondent dans le ciel : la constellation ne doit pas paraître
   enfermée dans une boîte, mais ouverte sur la page. */
.constellation::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right, var(--nuit) 0%, transparent 12%, transparent 88%, var(--nuit) 100%),
    linear-gradient(to bottom, transparent 60%, rgba(5,6,15,.85) 100%);
}
.constellation-legende{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 26px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--encre-douce);
}
.constellation-legende b{color:var(--encre);font-weight:600;}
.pastille{display:inline-flex;align-items:center;gap:7px;}
.pastille i{width:9px;height:9px;border-radius:50%;display:block;}

/* Une fonction et son écran, côte à côte, en alternance. */
.demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;margin-bottom:82px;}
.demo:nth-child(even){grid-template-columns:1.15fr .85fr;}
.demo:nth-child(even) .demo-mot{order:2;}
.demo-mot h3{margin:0 0 12px;font-size:clamp(22px,3vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.demo-mot p{margin:0 0 18px;font-size:16.5px;line-height:1.62;color:var(--encre-douce);}
.demo-lien{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--accent);text-decoration:none;}
.demo-lien svg{width:15px;height:15px;transition:transform .2s;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.demo-lien:hover svg{transform:translateX(3px);}

@media (max-width:820px){
  .demo,.demo:nth-child(even){grid-template-columns:1fr;gap:22px;margin-bottom:56px;}
  .demo:nth-child(even) .demo-mot{order:0;}
  .constellation-legende{padding:16px 18px;gap:14px;font-size:12px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE DÉCOR D'ORIGINE, REPRIS
   La première page d'accueil portait une grille de lignes fines et des
   montagnes en contre-jour. Elles avaient disparu dans la refonte ; elles
   reviennent, calées sur la nouvelle grammaire de couleur (`--accent`), si
   bien qu'elles passent au doré avec le reste quand on parle au locataire.
   ══════════════════════════════════════════════════════════════════════════ */
.lignes{
  position:absolute;top:0;left:0;right:0;height:46em;z-index:0;pointer-events:none;
  --fil:color-mix(in srgb, var(--accent) 18%, transparent);
}
.lignes .h,.lignes .v{position:absolute;left:0;right:0;margin:auto;opacity:0;}
.lignes .h{
  width:100%;height:1px;
  background:linear-gradient(90deg, transparent, var(--fil), transparent);
  animation:fil-h 2.2s ease-out forwards;
}
.lignes .v{width:1px;height:100%;background:var(--fil);animation:fil-v 2s ease-out forwards;}
.lignes .h:nth-child(1){top:7em;animation-delay:.5s}
.lignes .h:nth-child(2){top:13em;animation-delay:.65s}
.lignes .h:nth-child(3){top:20em;animation-delay:.8s}
.lignes .h:nth-child(4){top:28em;animation-delay:.95s}
.lignes .v:nth-child(5){left:22em;right:auto;animation-delay:.7s}
.lignes .v:nth-child(6){right:22em;left:auto;animation-delay:.85s}
@keyframes fil-h{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes fil-v{from{opacity:0;transform:scaleY(0)}to{opacity:.8;transform:none}}
@media (prefers-reduced-motion:reduce){ .lignes .h,.lignes .v{animation:none;opacity:.7} }
@media (max-width:900px){ .lignes .v{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   LES PYRAMIDES — l'élément signature
   Reprises de la toute première page d'Atlas : trois carrés tournés à 45°,
   dont seules les arêtes captent la lumière. Le liseré fait 2 px comme à
   l'origine — à 1 px les crêtes se perdaient et la silhouette devenait molle.
   Elles remplacent le soleil : une forme franche, sans halo ni orbite, qui
   dit mieux ce qu'est Atlas qu'un astre décoratif.

   Elles portent aussi la division pro/client : le liseré suit `--accent`, si
   bien que basculer vers le locataire fait passer tout le relief au doré.
   ══════════════════════════════════════════════════════════════════════════ */
.monts{
  position:absolute;left:0;right:0;bottom:0;height:21em;
  z-index:0;pointer-events:none;overflow:hidden;
  /* Le fondu appartient au CONTENEUR : posé sur les losanges, il tournerait
     à 45° avec eux et le dégradé partirait en diagonale. */
  -webkit-mask-image:linear-gradient(0deg, transparent 2%, #000 26%);
  mask-image:linear-gradient(0deg, transparent 2%, #000 26%);
}
.monts i{
  position:absolute;left:0;right:0;margin:auto;display:block;
  width:31em;height:31em;rotate:45deg;background:#0a0e1a;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent) 68%, transparent),
    inset .3em .4em .35em -.25em color-mix(in srgb, var(--accent) 72%, transparent),
    inset 13em 13em 3em -12.6em color-mix(in srgb, var(--accent) 22%, transparent);
  filter:brightness(.82);
  animation:pyramide 1.5s cubic-bezier(.22,.68,.28,1) forwards;
  opacity:0;
}
.monts i:nth-child(1){bottom:-22.4em;translate:-11em 3em;animation-delay:.35s;}
.monts i:nth-child(2){bottom:-16.2em;translate:0 0;width:23em;height:23em;animation-delay:.15s;}
.monts i:nth-child(3){bottom:-23.2em;translate:11em 4em;animation-delay:.5s;}
@keyframes pyramide{
  from{opacity:0;transform:translateY(2.2em);}
  to{opacity:1;transform:none;}
}
/* Les bases s'estompent par un MASQUE, jamais par un aplat posé par-dessus :
   le fond de page est un dégradé, et tout aplat de couleur unie y dessinait
   une démarcation horizontale visible sous les pyramides. */

@media (prefers-reduced-motion:reduce){ .monts i{animation:none;opacity:1;} }
@media (max-width:820px){
  .monts{height:13em;}
  .monts i{width:19em;height:19em;}
  .monts i:nth-child(1){bottom:-13.4em;translate:-6.2em 1.8em;}
  .monts i:nth-child(2){bottom:-9.8em;width:14em;height:14em;}
  .monts i:nth-child(3){bottom:-13.9em;translate:6.2em 2.3em;}
}
@media (max-width:640px){
  .monts{height:10em;}
  /* Agrandies plutôt que le socle rallongé : sur un écran étroit, laisser du
     vide au-dessus des crêtes coûte un demi-écran de défilement. */
  .monts i{width:17.5em;height:17.5em;}
  .monts i:nth-child(1){bottom:-12.6em;translate:-5.6em .6em;}
  .monts i:nth-child(2){bottom:-8.6em;width:13em;height:13em;}
  .monts i:nth-child(3){bottom:-13em;translate:5.6em 1em;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE COMMUTATEUR — bailleur / locataire
   Le point le plus important de la page après le titre : quelqu'un qui
   arrive doit savoir en une seconde qu'Atlas a deux visages, et lequel le
   concerne. Il bascule la lumière ENTIÈRE de la page (les pyramides, les lignes,
   les montagnes, les boutons), ce qui rend le changement impossible à
   manquer — c'est le geste qui remplace un lien perdu dans un menu.
   ══════════════════════════════════════════════════════════════════════════ */
.bascule-versant{
  display:inline-flex;padding:4px;gap:3px;margin-bottom:26px;
  border-radius:var(--r-pill,99px);background:rgba(255,255,255,.05);
  border:var(--filet,1px) solid var(--trait);
  backdrop-filter:blur(8px);
}
.bascule-versant button,
.bascule-versant a,
.bascule-versant span{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill,99px);border:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;
  background:transparent;color:var(--encre-douce);
  transition:background .25s, color .25s;
}
.bascule-versant i{
  width:9px;height:9px;border-radius:50%;display:block;flex-shrink:0;
  transition:background .25s, box-shadow .25s;
}
.bascule-versant [data-versant="pro"] i{background:#9dc3f7;}
.bascule-versant [data-versant="client"] i{background:#e8c56a;}
.bascule-versant .actif{color:#08131f;}
.bascule-versant [data-versant="pro"].actif{background:#9dc3f7;}
.bascule-versant [data-versant="client"].actif{background:#e8c56a;color:#1a1405;}
.bascule-versant .actif i{background:currentColor;box-shadow:none;}

/* Le titre et le chapeau changent avec le versant : sans cela, la couleur
   basculerait mais le discours resterait celui du bailleur. */
.titre-zone h1,.titre-zone .chapeau,.titre-zone .surtitre{transition:opacity .22s;}
.titre-zone.change h1,.titre-zone.change .chapeau,.titre-zone.change .surtitre{opacity:0;}

/* Sur le versant locataire, tout ce qui est réservé au bailleur s'efface —
   on ne lui propose pas de comparer des forfaits qu'il ne paiera jamais. */
body.versant-client .pro-seulement{display:none;}

/* Le socle qui porte les pyramides. Il ferme le titre et ouvre la page. */
.socle{position:relative;height:21em;margin-bottom:-1px;overflow:hidden;}
@media (max-width:820px){ .socle{height:13em;} }
@media (max-width:640px){ .socle{height:10em;} }

.bascule-versant a{text-decoration:none;}

/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — mesuré par bancs/mobile.js à 390 px
   Trois corrections que seule la mesure révèle : au doigt, un bouton de 35 px
   se rate une fois sur trois, et les montagnes débordaient de 75 px vers la
   droite en emportant la page avec elles.
   ══════════════════════════════════════════════════════════════════════════ */
.socle{overflow:hidden;}

.bascule-versant button,
.bascule-versant a,
.bascule-versant span{min-height:44px;}

/* Les liens de démonstration et de pied : cliquables au doigt. */
.demo-lien,.pied-col a,.lien-tete{min-height:40px;display:inline-flex;align-items:center;}

/* Le produit d'appel sur l'accueil. Mis en avant sans crier : c'est une
   offre, pas une réclame — le fond reste celui des autres sections. */
.appat{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  min-width:0;box-sizing:border-box;
  gap:44px;align-items:center;padding:38px;border-radius:var(--r-lg,24px);
  background:linear-gradient(150deg, var(--accent-sourd), rgba(255,255,255,.02));
  border:var(--filet,1px) solid var(--accent-ombre);
}
@media (max-width:860px){ .appat{grid-template-columns:1fr;gap:26px;padding:26px;} }
@media (max-width:640px){ .appat{padding:20px 18px;} }
.appat-points{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.appat-points li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.55;color:var(--encre-douce);
}
.appat-points svg{
  width:17px;height:17px;flex-shrink:0;margin-top:2px;
  fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — le hero, repris pour un écran de 390 px
   Mesuré sur l'appareil, pas déduit du bureau : le titre, le commutateur et
   les deux boutons y occupaient trois écrans à eux seuls, et il fallait
   défiler pour arriver aux pyramides. Tout est resserré pour que la promesse,
   le choix du versant, l'action et la silhouette tiennent d'un seul regard.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .titre-zone{padding:0 20px 14px;}
  h1{font-size:clamp(31px, 8.6vw, 40px);letter-spacing:-.03em;margin-bottom:14px;}
  .chapeau{font-size:15px;line-height:1.62;}

  /* Le commutateur prenait toute la largeur et pesait plus lourd que le
     titre : il redevient un repère, pas une bannière. */
  .bascule-versant{margin-bottom:20px;padding:3px;gap:2px;}
  .bascule-versant button,
  .bascule-versant a,
  .bascule-versant span{
    padding:0 13px;font-size:12.5px;min-height:40px;gap:6px;
  }
  .bascule-versant i{width:7px;height:7px;}

  /* CÔTE À CÔTE, LE TEXTE SORTAIT DU BOUTON.
     Deux boutons à `flex:1 1 0` se partagent 390 px moins les marges : environ
     171 px chacun. « Créer un document gratuit » en mesure 171 à lui seul, et
     `white-space:nowrap` l'empêche de se replier — il débordait donc DES DEUX
     CÔTÉS de sa pastille, à cheval sur le fond (essai du 20/09/2026, TEL-30).
     C'est l'action n° 1 du site, sur le premier écran.

     Sur téléphone, les deux passent donc l'un SOUS l'autre, pleine largeur :
     l'action principale se touche sans viser, et la seconde — « j'ai déjà un
     compte » — n'a pas à lui disputer la place. Le « couloir vide » que
     l'empilement créait autrefois venait de boutons étroits centrés ; pleine
     largeur, il n'y en a plus. */
  .actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
  .actions .bouton{
    flex:1 1 100%;min-width:0;justify-content:center;
    padding:0 14px;min-height:48px;font-size:14.5px;
    white-space:normal;text-wrap:balance;
  }
}

/* Sur les écrans très étroits, deux boutons côte à côte deviennent illisibles :
   on repasse à l'empilement, mais serré. */
@media (max-width:360px){
  .actions{flex-wrap:wrap;}
  .actions .bouton{flex:1 1 100%;}
}

/* Sur les pages secondaires, la signature se fait courte : elle rappelle la
   maison sans repousser le contenu — quelqu'un venu voir des tarifs ne doit
   pas défiler un demi-écran de décor avant la première colonne. */
.socle.court{height:12em;}
.socle.court .monts{height:12em;}
.socle.court .monts i{width:20em;height:20em;}
.socle.court .monts i:nth-child(1){bottom:-14.2em;translate:-7em 2em;}
.socle.court .monts i:nth-child(2){bottom:-10.6em;width:15em;height:15em;}
.socle.court .monts i:nth-child(3){bottom:-14.8em;translate:7em 2.6em;}
@media (max-width:640px){
  .socle.court,.socle.court .monts{height:9em;}
  .socle.court .monts i{width:15em;height:15em;}
  .socle.court .monts i:nth-child(1){bottom:-10.8em;translate:-4.8em 1em;}
  .socle.court .monts i:nth-child(2){bottom:-7.6em;width:11em;height:11em;}
  .socle.court .monts i:nth-child(3){bottom:-11.2em;translate:4.8em 1.4em;}
}

/* Le `nowrap` des boutons du hero (deux libellés courts, côte à côte) ne vaut
   pas pour le bloc d'appel, dont le second bouton pose une question entière :
   là, les boutons s'empilent et le texte revient à la ligne. */
@media (max-width:640px){
  .appat .actions{flex-wrap:wrap;}
  .appat .actions .bouton{
    flex:1 1 100%;white-space:normal;padding:11px 16px;height:auto;min-height:46px;
  }
}

/* La marque vivante remplace le SVG statique : mêmes dimensions, pour que la
   barre ne bouge pas au moment du remplacement. Repliée, elle est carrée et
   rend la largeur qu'elle occupait — c'est tout l'objet du repli. */
.marque-vivante{display:block;flex-shrink:0;width:31px;line-height:0;}
.marque-vivante .lgm{width:100%;height:auto;display:block;}
.marque-vivante.marque-repliee{width:23px;}
@media (max-width:640px){
  .marque-vivante{width:27px;}
  .marque-vivante.marque-repliee{width:21px;}
}

/* ── LES SIX ACTES GRATUITS, EN TÊTE DE L'ACCUEIL ──────────────────────────
   Ce bloc a remplacé un pavé d'argumentaire relégué en bas de page. Six
   entrées, chacune correspondant à une recherche différente : celui qui vient
   pour un état des lieux doit le voir, pas le deviner. */
.actes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;
  max-width:1060px;margin:0 auto;
}
.acte{
  display:block;padding:20px 22px;border-radius:var(--r-lg,18px);text-decoration:none;
  background:rgba(255,255,255,.035);border:var(--filet,1px) solid var(--trait);
  transition:border-color .2s, background .2s, transform .2s;
}
.acte:hover{
  transform:translateY(-3px);border-color:var(--accent-ombre);
  background:rgba(255,255,255,.055);
}
.acte-ico{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:13px;border-radius:var(--r-sm,11px);
  background:var(--accent-sourd);
}
.acte-ico svg{
  width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.acte b{
  display:block;font-size:16px;font-weight:600;color:var(--encre);margin-bottom:5px;
}
.acte>span:not(.acte-ico){
  display:block;font-size:13.5px;line-height:1.5;color:var(--encre-douce);
}

/* Les trois garanties, sous les actes. EN GRILLE, PAS EN FLEX : en flex, la
   troisième passait seule à la ligne dès que la place manquait — deux en haut,
   une en bas, décentrée. Trois colonnes égales tiennent ou s'empilent
   franchement, sans cet entre-deux bancal. */
.appat-points.large{
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:center;gap:12px 34px;
  max-width:1120px;margin:30px auto 0;padding:0;
}
.appat-points.large li{margin:0;}
@media (max-width:1000px){
  .appat-points.large{grid-template-columns:1fr;justify-items:start;max-width:440px;}
}

/* Sur téléphone, six cartes empilées font une colonne qu'on fait défiler sans
   la lire. L'icône passe À CÔTÉ du titre plutôt qu'au-dessus : la même
   information tient dans deux fois moins de hauteur, et les six actes se
   voient d'un coup au lieu de trois. */
@media (max-width:560px){
  .actes{gap:10px;}
  .acte{
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:13px;padding:15px 17px;border-radius:var(--r-md,15px);
  }
  .acte-ico{grid-row:1 / span 2;align-self:center;margin-bottom:0;width:34px;height:34px;}
  .acte b{margin-bottom:2px;font-size:15px;}
  .acte>span:not(.acte-ico){font-size:12.8px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   L'APPEL AU GRATUIT
   ══════════════════════════════════════════════════════════════════════════

   Cinq pages de fonction sur cinq expliquaient ce qu'Atlas fait, puis
   laissaient le lecteur sans autre issue que « Se connecter » — c'est-à-dire
   la seule chose qu'un visiteur qui ne connaît pas encore le produit ne fera
   pas. Ce bloc leur donne une sortie, et c'est toujours la même : essayer
   sans rien engager.

   IL NE CRIE PAS. Une bannière tape-à-l'œil répétée sur huit pages devient
   un bandeau publicitaire qu'on apprend à sauter. Celle-ci reprend le trait
   et la teinte des cartes du site ; c'est sa CONSTANCE qui la rend efficace,
   pas son intensité. */
.appel-gratuit{padding:0 0 78px;}
.appel-gratuit-boite{
  display:flex;align-items:center;justify-content:space-between;gap:38px;
  padding:34px 38px;border-radius:var(--r-lg,22px);
  border:var(--filet,1px) solid var(--accent-sourd);
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    var(--fond-carte, rgba(255,255,255,.02));
}
.appel-gratuit-boite > div:first-child{max-width:560px;}
.appel-etiquette{
  display:inline-block;margin-bottom:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);
}
.appel-gratuit h2{font-size:26px;line-height:1.25;margin:0 0 10px;}
.appel-gratuit p{margin:0;color:var(--encre-douce);font-size:15px;line-height:1.65;}
.appel-actions{display:flex;flex-direction:column;align-items:stretch;gap:11px;flex-shrink:0;}
.appel-actions .bouton{
  justify-content:center;
  background:linear-gradient(140deg, var(--accent-vif), var(--accent));
  color:#08131f;box-shadow:0 6px 26px -8px var(--accent-ombre);
}
.appel-actions .bouton:hover{box-shadow:0 10px 34px -8px var(--accent-ombre);}
.lien-discret{
  /* Hauteur tactile : au doigt, un lien de 22 px se manque une fois sur trois.
     Il ressemble à du texte, il se touche comme un bouton. */
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  text-align:center;font-size:14px;color:var(--encre-douce);text-decoration:none;
}
.lien-discret:hover{color:var(--accent);}

/* Le lien qui conclut une colonne du pied : il mène au gratuit et doit se
   distinguer de la liste qu'il termine. */
.pied-fort{color:var(--accent) !important;font-weight:600;margin-top:4px;}

@media (max-width:760px){
  .appel-gratuit{padding-bottom:56px;}
  .appel-gratuit-boite{flex-direction:column;align-items:flex-start;gap:24px;padding:26px 22px;}
  .appel-actions{width:100%;}
  .appel-gratuit h2{font-size:22px;}
}

/* Le pied réduit des pages de connexion et d'inscription. Elles n'avaient
   aucune sortie : ni en haut, ni en bas. */
/* `position:relative; z-index:2` : sur la page de connexion, les pyramides
   sont en `position:fixed` au bas de l'écran. À z-index égal, un élément
   POSITIONNÉ passe devant un élément qui ne l'est pas — le pied, dans le flux,
   se retrouvait donc DERRIÈRE elles : « Outils gratuits », « Formules et
   tarifs » et « Conditions générales » étaient illisibles, et leurs liens
   inatteignables. Les mêmes 2 que la carte de connexion. */
.pied-nu{
  padding:30px 0 34px;margin-top:auto;position:relative;z-index:2;
  /* Un voile sous le pied : sur la page de connexion il se lit PAR-DESSUS les
     pyramides, dont le gris-bleu ramenait le contraste de ses liens sous le
     seuil. Le voile ne se voit pas sur un fond uni, et rend le texte au texte
     partout ailleurs. */
  background:linear-gradient(to bottom, transparent, rgba(5,6,15,.72) 38%, rgba(5,6,15,.92));
}
.pied-nu-ligne a{color:var(--encre-douce);}
.pied-nu-ligne{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;
  padding-top:22px;border-top:var(--filet,1px) solid var(--trait, rgba(255,255,255,.08));
}
.pied-nu-ligne a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:13.5px;color:var(--encre-douce);text-decoration:none;
}
.pied-nu-ligne a:hover{color:var(--accent);}
.pied-nu-ligne a:first-child{color:var(--encre-douce);font-weight:550;}

/* La mention sous les deux actions du hero. Elle lève l'objection au moment
   où elle se pose — « gratuit, oui, mais quoi en échange ? » — sans occuper
   la place d'un argument. */
.hero-mention{
  margin:16px 0 0;font-size:13.5px;color:var(--encre-tenue);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA LIGNE DE FLOTTAISON
   ══════════════════════════════════════════════════════════════════════════

   Mesuré : sur un portable de 1280×720 — la taille d'écran la plus répandue
   après le téléphone — la section gratuite commençait à 942 px. Il fallait
   défiler 222 px pour soupçonner son existence, et 521 px pour voir la
   première carte. Sur un écran de bureau de 900 px de haut, elle affleurait
   sans jamais se montrer.

   Or c'est LA chose à voir : celle qu'on peut essayer sans compte, et la
   seule qui prouve quelque chose. Un visiteur qui ne défile pas — la
   majorité — ne rencontrait que la promesse, jamais la preuve.

   On ne rogne pas le hero pour autant : le titre, le chapeau et les deux
   actions gardent leur place. Ce qui cède, c'est le DÉCOR — les pyramides
   occupaient 21 em sous les boutons pour ne rien dire. Elles restent, plus
   basses, et laissent la section suivante affleurer. */
/* CE QUI CÈDE EST LE SOCLE, mesuré à 357 px de décor entre les boutons du
   hero et la section suivante. Les pyramides restent — c'est la signature
   d'Atlas — mais elles n'ont pas besoin de vingt et un cadratins pour se
   faire reconnaître. Les proportions reprises ici sont celles de
   `.socle.court`, déjà réglées pour les pages de guide : inventer un
   troisième jeu de valeurs aurait créé une variante de plus à maintenir.

   L'OBJECTIF N'EST PAS DE TOUT MONTRER mais de faire AFFLEURER : l'étiquette
   « Gratuit, sans compte, tout de suite » doit dépasser sous la ligne de
   flottaison. Un bloc qu'on aperçoit à moitié appelle le défilement mieux
   qu'un bloc entier, et bien mieux qu'un bloc absent. */
@media (min-width:861px){
  .socle{height:12em;}
  .socle .monts{height:12em;}
  .socle .monts i{width:20em;height:20em;}
  .socle .monts i:nth-child(1){bottom:-14.2em;translate:-7em 2em;}
  .socle .monts i:nth-child(2){bottom:-10.6em;width:15em;height:15em;}
  .socle .monts i:nth-child(3){bottom:-14.8em;translate:7em 2.6em;}
  #gratuit{padding-top:30px;}
  .titre-zone{padding-bottom:24px;}
}
/* Sur les écrans bas — portables 720 px, fenêtres réduites — on serre
   davantage. La HAUTEUR est la seule contrainte qui compte ici ; la mesurer
   en largeur, comme le faisaient toutes les règles de ce fichier, laissait
   un portable 1280×720 dans le même état qu'un écran de bureau deux fois
   plus haut. */
/* LE SEUIL EST À 1000 PX, PAS À 800.
   Réglé d'abord à 800, il laissait de côté le 1440×900 — l'écran de bureau le
   plus répandu — qui retombait donc sur le traitement large et n'affichait
   toujours rien de la section gratuite. Un seuil se choisit sur les tailles
   d'écran réelles, pas sur un chiffre rond. Au-delà de 1000 px de haut, le
   hero peut respirer : la place ne manque plus. */
@media (min-width:861px) and (max-height:1000px){
  .socle{height:6em;}
  .socle .monts{height:6em;}
  .socle .monts i{width:11em;height:11em;}
  .socle .monts i:nth-child(1){bottom:-7.8em;translate:-4em 1.1em;}
  .socle .monts i:nth-child(2){bottom:-5.8em;width:8em;height:8em;}
  .socle .monts i:nth-child(3){bottom:-8.1em;translate:4em 1.4em;}
  #gratuit{padding-top:14px;}
  .titre-zone{padding-bottom:10px;}
  /* Le titre aussi : 68 px sur un écran de 720 de haut, c'est un dixième de
     la page pour deux lignes. Il reste dominant à 52 — et ce qu'on gagne
     sert à montrer ce qu'Atlas fait plutôt que ce qu'il promet. */
  .titre-zone h1{font-size:clamp(34px, 4.4vw, 52px);margin-bottom:12px;}
  .titre-zone .chapeau{font-size:15.5px;}
  #hero-actions{margin-top:24px;}
  .hero-mention{margin-top:12px;}
  .bascule-versant{margin-bottom:18px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LES TROIS PALIERS DE L'ACCUEIL
   ══════════════════════════════════════════════════════════════════════════

   La page d'accueil ne portait aucun lien vers les tarifs dans tout son
   corps : on pouvait la lire entière sans jamais savoir ce que ça coûte.
   Ces trois cartes répondent à la question à l'endroit où elle se pose, et
   renvoient au détail plutôt que de le refaire.

   ELLES NE REPRODUISENT PAS LE TABLEAU DES TARIFS. Pas de liste de
   fonctions, pas de coches : une ligne de prix, ce que fait Atlas à ce
   palier, et pourquoi. Un comparatif au milieu de l'accueil ferait
   concurrence à la page qui existe pour cela. */
.paliers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;
  max-width:1060px;margin:0 auto;
}
.palier{
  display:flex;flex-direction:column;gap:7px;
  padding:24px 22px;border-radius:var(--r-lg,17px);text-decoration:none;
  border:var(--filet,1px) solid var(--trait, rgba(255,255,255,.08));
  background:var(--fond-carte, rgba(255,255,255,.02));
  transition:border-color .2s, transform .12s, background .2s;
}
.palier:hover{
  border-color:var(--accent-ombre);transform:translateY(-2px);
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.palier-prix{
  font-size:23px;font-weight:600;color:var(--accent);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.palier-prix i{font-style:normal;font-size:13.5px;font-weight:450;color:var(--encre-tenue);}
.palier b{font-size:15.5px;font-weight:600;color:var(--encre);}
.palier span:last-child{font-size:14px;line-height:1.6;color:var(--encre-douce);}
/* La vedette se marque par un LISERÉ, pas par une couleur de fond : trois
   cartes dont une criarde se lit comme une réclame, pas comme une offre. */
.palier-vedette{border-color:var(--accent-sourd);}
.prix-note{
  margin:22px 0 0;text-align:center;font-size:14px;color:var(--encre-tenue);
}
.prix-note a{color:var(--accent);text-decoration:none;}
.prix-note a:hover{text-decoration:underline;text-underline-offset:4px;}

/* La sortie de la page — elle n'en avait aucune. */
.sortie{padding-bottom:96px;}
.sortie-actions{justify-content:center;margin-top:30px;}
.sortie-mention{text-align:center;max-width:520px;margin:14px auto 0;}
@media (max-width:640px){
  .sortie{padding-bottom:64px;}
  .sortie-actions{flex-direction:column;align-items:stretch;}
  .sortie-actions .bouton{justify-content:center;}
}

/* Le nom de l'éditeur, sous la devise du pied. Discret : c'est une mention
   légale, pas un argument — mais elle doit exister, et être lisible. */
.pied-editeur{
  margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--encre-tenue);
}
.pied-editeur strong{color:var(--encre-douce);font-weight:600;}
.pied-editeur a{color:var(--encre-tenue);text-decoration:underline;text-underline-offset:3px;}
.pied-editeur a:hover{color:var(--accent);}

/* SOUS 16 PX, iOS ZOOME À LA SAISIE — et la mise en page saute, le champ
   suivant part hors écran, on tape à l'aveugle. La même règle vit dans
   `base.css` (le socle de l'application) ; la vitrine a son propre socle et ne
   charge pas base.css, d'où la répétition. Le générateur gratuit et le
   calculateur de révision sont les deux écrans où un visiteur SAISIT : ils
   zoomaient à chaque champ (essai du 20/09/2026, TEL-17).
   `bancs/champs-telephone.js` mesure la taille rendue, pas la règle. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{
    font-size:16px !important;
  }
}

/* Le surtitre du hero — ce qu'est Atlas, dit avant la formule qui le résume.
   Il vit DANS le H1 (voir home.html) pour compter aux yeux des moteurs, et se
   présente comme une ligne d'étiquette au-dessus du titre. */
.hero-sur{
  display:block;margin-bottom:14px;
  font-family:var(--mono, ui-monospace, monospace);
  /* Le plancher de lisibilité d'Atlas est 11,5 px : la borne basse du clamp
     descendait un demi-pixel en dessous sur un écran de téléphone. */
  font-size:clamp(11.5px, 2.6vw, 12.5px);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);
}
@media (max-width:760px){ .hero-sur{margin-bottom:10px;letter-spacing:.06em;} }