/*!
 * 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 PAGE DES TARIFS.
 *
 * Trois colonnes, et une hiérarchie qui se lit sans lire : la formule
 * recommandée est plus lumineuse que ses voisines, sans être plus grande —
 * une colonne surdimensionnée signale qu'on essaie de pousser quelque chose.
 */


/* ══════════════════════════════════════════════════════════════════════════
   LES OUTILS LIBRES — une bande, pas une colonne
   ══════════════════════════════════════════════════════════════════════════
   Tout ici sert à ce qu'on ne la confonde pas avec les trois formules qui
   suivent : elle est COUCHÉE quand elles sont debout, elle n'affiche aucun
   prix, et elle ne porte pas de croix rouges. Une colonne de la même hauteur,
   au même endroit, se serait lue comme la quatrième offre — c'est exactement
   ce qui se passait.
   ══════════════════════════════════════════════════════════════════════════ */
.outils-libres{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;
  align-items:center;
  padding:30px 32px;border-radius:var(--r-lg,22px);
  /* Un fond qui la distingue franchement des colonnes : celles-ci sont posées
     sur un voile presque invisible, celle-ci porte la teinte d'accent. */
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 17%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent));
  border:var(--filet,1px) solid color-mix(in srgb, var(--accent) 38%, transparent);
  /* Une lueur très basse, qui la détache du fond sans la faire flotter : sur
     un noir profond, dix-sept pour cent d'un bleu clair restent discrets, et
     c'est le CONTRASTE avec les trois colonnes voisines — presque
     transparentes — qui doit se voir au premier coup d'œil. */
  box-shadow:0 0 40px -14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ol-oeil{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.ol-nom{margin:0 0 10px;font-size:29px;line-height:1.12;}
.ol-pour{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--mist);max-width:44ch;}
.ol-action{align-self:start;}
/* CE QUI REMPLACE LE PRIX. « Gratuit » en gros était le mot qui faisait
   basculer la carte du côté des offres ; ces trois mentions disent la même
   chose sans jamais nommer un tarif. */
.ol-sans{
  margin:14px 0 0;font-size:12.5px;color:var(--mist-dim);line-height:1.5;
}
.ol-traits{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.ol-traits li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;line-height:1.5;color:var(--ink);
}
.ol-traits svg{
  flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width: 760px){
  .outils-libres{grid-template-columns:1fr;gap:22px;padding:24px 22px;}
  .ol-nom{font-size:25px;}
  .ol-action{align-self:stretch;text-align:center;}
}

/* ── Une formule qu'on ne peut pas encore souscrire ───────────────────── */
/* Le bouton reste à sa place et garde sa forme : le déplacer ou le supprimer
   ferait croire que la formule n'existe pas. Il cesse simplement d'être un
   lien, et le dit. */
.f-fermee{
  opacity:.55;cursor:not-allowed;
  border-style:dashed;
}
/* La raison, en NOTE. Elle était rendue au corps de texte courant — plus
   grosse et plus claire que la description de la formule elle-même, alors
   qu'elle n'est qu'une circonstance passagère. */
.f-attente{
  margin:10px 0 18px;font-size:12.5px;line-height:1.5;color:var(--mist-dim);
}

/* ── Les trois colonnes ───────────────────────────────────────────────── */
.formules{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;align-items:start;
}
.formule{
  position:relative;display:flex;flex-direction:column;
  padding:32px 28px;border-radius:var(--r-lg,22px);
  background:rgba(255,255,255,.03);border:var(--filet,1px) solid var(--trait);
  transition:border-color .25s, transform .25s;
}
.formule:hover{transform:translateY(-3px);border-color:var(--accent-ombre);}

/* La vedette : plus lumineuse, pas plus grosse. */
.formule.vedette{
  background:linear-gradient(165deg, var(--accent-sourd), rgba(255,255,255,.02));
  border-color:var(--accent-ombre);
}
.f-ruban{
  position:absolute;top:-11px;left:28px;
  padding:4px 12px;border-radius:var(--r-pill,99px);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#08131f;background:var(--accent);
}

.f-nom{font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em;}
.f-accroche{margin:0 0 20px;font-size:13.5px;color:var(--accent);font-weight:500;}

.f-prix{display:flex;align-items:baseline;gap:7px;margin-bottom:16px;}
.f-prix b{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1;}
.f-prix small{font-size:13.5px;color:var(--encre-douce);}

.f-pour{
  margin:0 0 22px;font-size:14px;line-height:1.6;color:var(--encre-douce);
  min-height:44px;   /* les trois boutons s'alignent malgré des textes inégaux */
}
.f-action{width:100%;justify-content:center;margin-bottom:24px;}

.f-reprend{
  margin:0 0 14px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce);
}

.f-traits{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.f-traits li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.55;color:var(--encre-douce);
}
.f-traits 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;
}
/* Ce que la formule NE fait pas. Dit dans la même liste, sans euphémisme :
   une colonne gratuite sans limite affichée n'est pas crue. */
.f-traits .f-limite{opacity:.72;}
.f-traits .f-limite svg{stroke:#e8a06a;stroke-width:2;}

.t-mention{
  margin:26px auto 0;max-width:620px;text-align:center;
  font-size:13px;line-height:1.6;color:var(--encre-douce);opacity:.85;
}

/* ── La ligne de partage ──────────────────────────────────────────────── */
.partage{padding-top:20px;}
.trois-temps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;
}
.temps{
  padding:26px 24px;border-radius:var(--r-lg,18px);
  background:rgba(255,255,255,.03);border:var(--filet,1px) solid var(--trait);
}
.temps.vedette{background:var(--accent-sourd);border-color:var(--accent-ombre);}
.temps-num{
  display:inline-block;margin-bottom:14px;padding:4px 11px;border-radius:var(--r-pill,99px);
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-sourd);
  border:var(--filet,1px) solid var(--accent-sourd);
}
.temps h3{font-size:18px;font-weight:600;margin:0 0 10px;}
.temps p{margin:0;font-size:14px;line-height:1.65;color:var(--encre-douce);}

/* Le ruban tombait à 11 px — sous le seuil de lisibilité retenu (11,5). */
.f-ruban{font-size:11.5px;}