/* ============================================================================
   SentinelleFin : Landing
   Implémentation de « Landing SentinelleFin.dc.html ».
   Le reset, l'accessibilité et les boutons vivent dans base.css ; cette feuille
   ne contient que la page. Couleurs, typo, rayons, ombres et durées viennent
   exclusivement des tokens du design system.
   ========================================================================== */

/* --------------------------------------------------------------- Enveloppe */

/* Un cran plus soutenu que --surface-pearl, mais toujours l'un des trois blancs
   du système : les cartes blanches se détachent mieux du fond. */
/* overflow-x:hidden : le hero plus bas se libere de la largeur maximale
   de .page (voir .hero) pour couvrir tout l'ecran sur un grand moniteur ;
   sans ce garde-fou, le calcul en 100vw declenche une barre de defilement
   horizontale d'un ou deux pixels des que la barre verticale est presente.
   clip plutot que hidden quand le navigateur le connait : hidden fait du body un conteneur de defilement, ce qui, sur
   iPhone, peut figer les elements collants et brouiller le defilement au doigt ; clip coupe sans rien changer d'autre. */
body { background: var(--canvas-parchment); overflow-x: hidden; overflow-x: clip; }

.page {
  --pad: 42px;
  width: 100%;
  margin: 0;
  background: var(--canvas-parchment);
}

/* -------------------------------------------------------------- Navigation */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 20px 0 0;
  margin-bottom: -88px;
}

.nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 0 12px 0 26px;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: var(--shadow-subject);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Rotation lente et continue, uniquement sur le pictogramme (voir le
   commentaire du balisage). Le contraire -- faire tourner tout le
   lockup, texte compris -- rendrait "SentinelleFin" illisible : aucune
   marque serieuse ne fait pivoter son nom.
   Pictogramme et mot-symbole ne partagent plus la meme taille : a la
   demande expresse, le picto grossit encore (40px, pour bien voir la
   rotation) pendant que le mot redescend (22px, il avait grossi en
   meme temps que le picto lors du dernier reglage et etait devenu trop
   present a cote du picto). */
.nav__logo-icone {
  display: block;
  width: 40px;
  height: 40px;
  animation: navLogoTourne 48s linear infinite;
}
.nav__logo-pic { position: relative; display: block; width: 40px; height: 40px; }
.nav__logo-icone--blanc { position: absolute; inset: 0; opacity: 0; }
.nav__logo-texte { position: relative; }
.nav__logo-texte .nav__logo-blanc { position: absolute; left: 0; top: 0; opacity: 0; }
@keyframes navLogoTourne {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__logo-icone { animation: none; }
}

/* Fenetre qui ne montre que la portion "texte" du fichier officiel du
   logo (105px a 600px sur sa largeur native de 600px, mesure a l'octet
   pres via un canvas) : le mot-symbole reste donc pixel pour pixel
   l'asset de marque, jamais reconstruit en police live. Valeurs
   recalculees pour une hauteur de 24px (leger reajustement, le ratio
   600/26 de l'image d'origine reste conserve, sinon le mot serait
   deforme). */
.nav__logo-texte {
  display: block;
  width: 135px;
  height: 24px;
  overflow: hidden;
}
.nav__logo-texte img {
  display: block;
  width: 163px;
  height: 24px;
  max-width: none;
  transform: translateX(-28.6px);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav__links a {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__links a:hover { color: var(--action-focus); text-decoration: none; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav__signin {
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-ls);
  color: var(--brand-1);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.nav__signin:hover {
  background: var(--action-tint);
  color: var(--action-focus);
  text-decoration: none;
}

/* Bouton hamburger : n’apparaît qu’en dessous de 900 px */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: var(--brand-1);
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xxs);
  margin-top: var(--space-xs);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-subject);
}
.nav-mobile a {
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
  text-decoration: none;
}
.nav-mobile a:hover { background: var(--action-tint); color: var(--action-focus); text-decoration: none; }
.nav-mobile .btn { margin-top: var(--space-xs); }
.nav-mobile .btn:hover { background: var(--action-focus); color: var(--on-action); }


.nav-wrap--hero { padding-inline: max(14px, calc((100% - 1480px) / 2)); }
/* ---- Accueil : tout en haut de la page, la barre se réduit au logo (en blanc) et à « Se connecter » ; elle se déploie dès qu'on descend. ---- */
.nav-wrap--hero .nav,
.nav-wrap--hero .nav__links,
.nav-wrap--hero .nav__actions .btn,
.nav-wrap--hero .nav__signin,
.nav-wrap--hero .nav__logo-icone,
.nav-wrap--hero .nav__logo-texte img {
  transition:
    background-color 360ms var(--ease-standard),
    box-shadow 360ms var(--ease-standard),
    opacity 300ms var(--ease-standard),
    transform 360ms var(--ease-standard),
    max-width 360ms var(--ease-standard),
    padding 360ms var(--ease-standard),
    color 300ms var(--ease-standard);
}
.nav-wrap--hero.is-haut:not(:focus-within) .nav { background: transparent; box-shadow: none; }
.nav-wrap--hero .nav__actions .btn { max-width: 160px; overflow: hidden; white-space: nowrap; }
.nav-wrap--hero.is-haut:not(:focus-within) .nav__links { opacity: 0; transform: translateY(-4px); pointer-events: none; }
/* « S'inscrire » ne laisse pas de vide : il se replie sur lui-même (largeur nulle), « Se connecter » se range alors au bord droit. */
.nav-wrap--hero.is-haut:not(:focus-within) .nav__actions { gap: 0; }
.nav-wrap--hero.is-haut:not(:focus-within) .nav__actions .btn { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; transform: translateY(-4px); pointer-events: none; }
.nav-wrap--hero.is-haut:not(:focus-within) .nav__logo-icone:not(.nav__logo-icone--blanc),
.nav-wrap--hero.is-haut:not(:focus-within) .nav__logo-texte img:not(.nav__logo-blanc) { opacity: 0; }
.nav-wrap--hero.is-haut:not(:focus-within) .nav__logo-icone--blanc,
.nav-wrap--hero.is-haut:not(:focus-within) .nav__logo-blanc { opacity: 1; }
.nav-wrap--hero.is-haut:not(:focus-within) .nav__signin { background: #fff; color: var(--brand-1); padding: 12px 22px; box-shadow: 0 6px 20px rgba(14, 10, 38, .25); }
@media (max-width: 900px) {
  /* Sur téléphone, en haut : le logo et « Se connecter » à la place du menu ; le menu revient dès qu'on descend. */
  .nav-wrap--hero.is-haut:not(:focus-within) .nav__actions { display: flex; }
  .nav-wrap--hero.is-haut:not(:focus-within) .nav__burger { display: none; }
  .nav-wrap--hero.is-haut:not(:focus-within) .nav { padding: 0 4px 0 6px; }
}
@media (max-width: 380px) {
  /* Petits téléphones : en haut de page, le logo et « Se connecter » doivent tenir sur une ligne sans faire déborder la page. */
  .nav-wrap--hero { padding-inline: 10px; }
  .nav-wrap--hero.is-haut:not(:focus-within) .nav__logo-texte { transform: scale(.82); transform-origin: left center; margin-right: -24px; }
  .nav-wrap--hero.is-haut:not(:focus-within) .nav__signin { padding: 10px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-wrap--hero .nav, .nav-wrap--hero .nav__links, .nav-wrap--hero .nav__actions .btn, .nav-wrap--hero .nav__signin,
  .nav-wrap--hero .nav__logo-icone, .nav-wrap--hero .nav__logo-texte img { transition: none; }
}

/* ------------------------------------------------------------------- Hero */

/* Plein ecran, meme si .page (son parent) est plafonne a
   --container-wide : sur un grand moniteur, la video/le degrade
   s'arretait net avant les bords de l'ecran et laissait deux bandes
   vides -- a la demande expresse, seul le FOND du hero se libere de
   cette largeur maximale. Le contenu (nav, titre, bouton), lui, garde
   sa propre largeur confortable de lecture (voir .hero__title) : rien
   ne s'etire jusqu'au bord, seul le decor le fait. */
.hero {
  position: relative;
  /* Plein cadre, un peu plus haut que l'écran : on devine la suite en dessous. */
  min-height: max(880px, 104svh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #14102e;
  width: 100%;   /* .page n'a plus de largeur maximale : l'ancien calcul en 100vw (qui compte la barre de défilement) ne sert plus et faisait déborder la page de quelques pixels */
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__veil--1 {
  /* Voile sombre teinté indigo : le texte blanc tient partout, la vidéo reste lisible. Plus dense en haut (la barre) et en bas (la bande). */
  background: linear-gradient(180deg,
    rgba(14, 10, 38, .66) 0%,
    rgba(14, 10, 38, .40) 28%,
    rgba(14, 10, 38, .40) 60%,
    rgba(14, 10, 38, .78) 100%);
}
.hero__veil--2 {
  /* Une zone plus sombre derrière le bloc de texte, au centre. */
  background: radial-gradient(ellipse 62% 52% at 50% 46%, rgba(14, 10, 38, .46) 0%, rgba(14, 10, 38, 0) 100%);
}

.hero__content {
  position: relative;
  flex: 1;
  justify-content: center;
  padding: 108px 80px 96px;   /* le bloc est centré, mais plus haut que le milieu : le haut pèse moins que le bas */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  margin-top: 56px;
  max-width: 1000px;
  font-family: var(--font-display);
  font-size: 72px;   /* plus grand que le --text-hero-size (56 px) des autres titres : c'est le titre de la page */
  font-weight: var(--text-hero-weight);
  line-height: 1.08;
  letter-spacing: var(--text-hero-ls);
  color: #fff;
  text-shadow: 0 2px 24px rgba(14, 10, 38, .35);
  /* balance, pas pretty : le titre tient en deux clauses et doit casser sur la
     virgule, pas laisser « les vôtres. » seul sur la seconde ligne. */
  text-wrap: balance;
}

.hero__lede {
  margin-top: 20px;
  /* Deux lignes sur ordinateur : la première phrase (« Fraudes bancaires, usurpation d'identité… ») sur une ligne, et le <br>
     du balisage isole la seconde. D'où une largeur généreuse et un corps un cran plus petit (16 px). */
  max-width: 900px;
  font-size: 16px;
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 14px rgba(14, 10, 38, .4);
  text-wrap: balance;
}
/* Le panneau Professionnels a son propre texte, plus dense, sur une seule phrase. */
.hero__lede--pro { max-width: 452px; }

.hero__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__note { margin: 0; font-size: 13px; letter-spacing: -.1px; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 10px rgba(14, 10, 38, .45); }

/* La bande d'engagements, au pied du hero : du verre dépoli sur la vidéo. */
.hero__bande {
  position: relative;
  z-index: 1;
  list-style: none;
  width: min(1260px, calc(100% - 2 * var(--pad, 24px)));
  margin: 0 auto 36px;
  padding: 16px 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 26px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px rgba(14, 10, 38, .28);
}
.hero__bande li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px;
  color: #fff;
}
.hero__bande li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
.hero__bande svg { flex: none; opacity: .92; }
.hero__bande span { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.hero__bande b { font-size: 13.5px; font-weight: 600; letter-spacing: -.15px; line-height: 1.3; }
.hero__bande i { font-style: normal; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78); }

.hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sélecteur de profil */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--space-xxs);
  border-radius: var(--radius-pill);
  background: var(--brand-1);
}
.segmented__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.29;
  padding: 9px 21px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-dark-muted);
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.segmented__btn:active { transform: scale(var(--press-scale)); }
.segmented__btn.is-active {
  background: var(--canvas);
  color: var(--action-focus);
}

/* Sélecteur Particuliers / Professionnels du hero : un verre gris fumé, translucide (le flou de la vidéo passe derrière), plutôt qu'un
   aplat bleu. Le texte blanc reste lisible : le voile sombre du hero passe déjà dessous. */
.hero .segmented {
  background: rgba(38, 38, 44, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
/* Un cran plus haut et plus large que le sélecteur des autres pages. */
.hero .segmented { padding: 5px; }
.hero .segmented__btn { padding: 13px 26px; font-size: 14px; }
.hero .segmented__btn:not(.is-active) { color: rgba(255, 255, 255, .92); }
.hero .segmented__btn:not(.is-active):hover { background: rgba(255, 255, 255, .12); }

/* Crédit photo, mesuré sur le rendu : en --ink-muted-48 il tombait à 1,6:1
   dans le hero et 2,0:1 sur la carte cas d’usage. Chaque crédit prend donc la
   couleur qui tient sur son fond, avec une ombre de sécurité si la photo change. */
.credit {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-sm);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-lh);
  letter-spacing: var(--text-micro-ls);
  color: var(--on-dark);
  text-shadow: 0 1px 3px rgba(25, 20, 62, .6);
}
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--on-dark-muted); }

.credit--inset {
  left: 30px;
  bottom: var(--space-xs);
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(255, 255, 255, .7);
}
.credit--inset a:hover { color: var(--action-focus); }

/* ------------------------------------------------- Le monde devient intelligent */

.fraude {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Fond chaud de bout en bout, sans bleu ni lavande : creme en haut, une nappe d'ambre qui brille au
     centre (derriere le titre et la carte de chiffres), puis du sable dore vers le bas. Teintes
     relevees sur la reference (#fffbf5 creme, #f8cb8d ambre). */
  background:
    /* Blanc franc derriere le titre seulement ; il se fond ensuite dans l'ambre, qui colore le chapeau. */
    linear-gradient(180deg, #fff 0, #fff 210px, rgba(255, 255, 255, 0) 340px),
    /* Tout en bas, un tout petit dégradé lavande qui referme la section, comme sur la référence. */
    linear-gradient(180deg, rgba(198, 195, 228, 0) calc(100% - 130px), rgba(198, 195, 228, .5) calc(100% - 50px), rgba(192, 189, 225, .8) 100%),
    radial-gradient(62% 34% at 50% 46%, rgba(248, 203, 141, .95) 0%, rgba(246, 214, 170, .72) 42%, rgba(255, 251, 245, 0) 100%),
    radial-gradient(46% 28% at 50% 50%, rgba(243, 197, 131, .55) 0%, rgba(255, 251, 245, 0) 100%),
    linear-gradient(180deg, #fffbf5 0%, #fdf4e6 16%, #f7e7cf 40%, #f3dcbd 64%, #efd2ad 86%, #ebc99f 100%),
    var(--canvas-parchment);
  padding: 104px 80px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Le ciel occupe le bas de la section et passe sous le contenu. Il est masqué
   par un dégradé vertical pour naître du blanc plutôt que de s'y découper. */
.ciel {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  width: 100%;
  height: 62%;
  opacity: .85;
  pointer-events: none;
}

.fraude__title {
  max-width: 1100px;
  font-family: var(--font-display);
  font-size: var(--text-hero-size);
  font-weight: var(--text-hero-weight);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-ls);
  color: var(--brand-1);
  text-wrap: pretty;
}

.fraude__lede {
  margin-top: var(--space-lg);
  max-width: 700px;
  font-size: var(--text-lead-airy-size);
  font-weight: var(--text-lead-airy-weight);
  line-height: var(--text-lead-airy-lh);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}


/* Carrousel de chiffres */
.statbox {
  margin-top: 56px;
  width: 820px;
  max-width: 100%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px var(--space-xxl) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.statbox__stage {
  width: 100%;
  min-height: 138px;   /* la plus haute des six diapositives (133 px) : la carte ne saute pas d'un chiffre à l'autre */
  display: grid;
  place-items: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat__figure {
  font-family: var(--font-display);
  font-size: 64px;   /* un cran sous les 76 px d'avant : la carte respire davantage */
  font-weight: var(--text-hero-weight);
  line-height: 1;
  letter-spacing: var(--text-hero-ls);
  color: var(--brand-1);
}

.stat__caption {
  margin-top: 18px;
  max-width: 420px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .2px;
  color: var(--ink-muted-80);
}
.stat__caption strong { font-weight: 600; color: var(--ink); }
/* Renvoi numéroté vers la source, affichée en petit sous la légende (1 Banque de France, 2 AMF, 3 ACPR). */
.stat__note { font-size: .62em; font-weight: 600; margin-left: 2px; vertical-align: super; line-height: 0; color: var(--ink-muted-80); }
/* Sources des chiffres (renvois 1, 2, 3 du carrousel) : un bandeau discret au-dessus du pied de page. */
.sources {
  background: var(--surface-pearl);
  padding: 0 var(--pad) 24px;
}
.sources__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 24px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .1px;
  color: var(--ink-muted-80);
}
.sources__liste b { font-weight: 600; color: var(--ink); margin-right: 5px; }

/* Derobe : la fraude par manipulation depuis le 1er janvier, en estimation. Même largeur que le carrousel, juste dessous. */
.derobe {
  margin-top: 20px;
  width: 820px;
  max-width: 100%;
  padding: 40px var(--space-xxl) 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--brand-3) 0%, var(--action-focus) 38%, var(--brand-5) 72%, var(--brand-6) 100%);
  box-shadow: 0 30px 60px -38px rgba(25, 20, 62, .75);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.derobe__etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.derobe__point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a94;
  animation: derobe-pouls 2.2s ease-out infinite;
}
@keyframes derobe-pouls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 148, .65); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 122, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 148, 0); }
}
.derobe__nombre {
  margin-top: 16px;
  min-height: 1em;
  font-family: var(--font-display);
  font-size: clamp(38px, 7.4vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  /* Les groupes de trois chiffres sont nettement séparés : l'espace insécable d'une police s'efface à cette taille. */
  word-spacing: .16em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(25, 20, 62, .35);
}
.derobe__legende {
  margin-top: 18px;
  max-width: 470px;
  font-size: var(--text-tagline-size);
  line-height: 1.42;
  color: rgba(255, 255, 255, .94);
  text-wrap: pretty;
}
.derobe__legende strong { font-weight: 600; }
.derobe .stat__note { color: inherit; opacity: .8; }
.derobe__rythme {
  margin-top: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, .86);
}
.derobe__rythme strong { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .derobe { padding: 32px var(--space-lg) 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .derobe__point { animation: none; }
}

.statbox__dots {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot {
  appearance: none;
  border: 0;
  /* Le point reste de 10 px, sa zone cliquable passe à 24 px (WCAG 2.5.8) : le remplissage
     est compensé par une marge négative, la mise en page ne change pas. */
  box-sizing: content-box;
  padding: 7px;
  margin: -7px;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: var(--radius-pill);
  background: var(--action-tint-strong);
  transition:
    width var(--dur-base) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.dot:hover { opacity: .75; }
.dot:active { transform: scale(.9); }
.dot.is-active { width: 44px; background: var(--action); }
/* Après les `background:` ci-dessus : le raccourci remettrait le fond sur toute la zone cliquable. */
.dot, .dot.is-active { background-clip: content-box; }

/* --------------------------------------------------- Qu’est-ce que SentinelleFin */

/* La scène réagit au défilement : le JS pose --progress (0 → 1 sur la traversée
   de la section) et, sur chaque carte, --near (0 → 1 quand elle passe au centre
   de l’écran) et --dy (parallaxe). Sans JS ces valeurs gardent leurs défauts et
   la section reste entièrement lisible. */
.presentation {
  --progress: .5;
  position: relative;
  isolation: isolate;
  /* Pas d'overflow:hidden ici : il annulerait le position:sticky de la colonne
     et de la pile de cartes. Le découpage du décor est porté par .scene. */
  /* Meme bleu « nuit » que la section des comptes reliés : nappe violette en haut, degrade sombre
     (sans la trame de points). */
  background:
    radial-gradient(72% 40% at 50% 0%, rgba(132, 126, 214, .5) 0%, rgba(132, 126, 214, 0) 100%),
    linear-gradient(160deg, #1d1648 0%, #2b2169 55%, #1a1242 100%);
  padding: 120px 80px 128px;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.scene > * { position: absolute; display: block; }

/* Aurore : deux masses de couleur qui dérivent en boucle lente et remontent
   d’un cran supplémentaire au fil du défilement.
   La dérive est un TRANSFORM sur deux calques (::before et ::after), pas un déplacement du fond : animer background-position
   obligeait le navigateur à repeindre toute la section à chaque image, en continu, même sans défilement. */
.scene__aurore {
  inset: -18% -12% auto -12%;
  height: 132%;
  transform: translate3d(0, calc(var(--progress) * -86px), 0);
  will-change: transform;
}
.scene__aurore::before,
.scene__aurore::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140%;
  height: 140%;
  will-change: transform;
}
.scene__aurore::before {
  background:
    radial-gradient(40% 36% at 20% 16%, rgba(115, 111, 182, .50) 0%, rgba(115, 111, 182, 0) 70%),
    radial-gradient(56% 34% at 56% 78%, rgba(183, 174, 201, .16) 0%, rgba(25, 20, 62, 0) 76%);
  animation: derive 18s var(--ease-standard) infinite alternate;
}
.scene__aurore::after {
  background: radial-gradient(36% 40% at 84% 30%, rgba(94, 83, 152, .40) 0%, rgba(94, 83, 152, 0) 72%);
  animation: derive-inverse 18s var(--ease-standard) infinite alternate;
}
@keyframes derive {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3.4%, -2.4%, 0); }
}
@keyframes derive-inverse {
  from { transform: translate3d(-3.4%, 0, 0); }
  to   { transform: translate3d(0, -3%, 0); }
}

/* Horizon : grille en perspective, en fondu haut et bas. */
.scene__horizon {
  inset: auto -8% 0 -8%;
  height: 720px;
  background:
    repeating-linear-gradient(90deg, rgba(183, 174, 201, .26) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg,  rgba(183, 174, 201, .22) 0 1px, transparent 1px 92px);
  transform-origin: 50% 100%;
  transform: perspective(640px) rotateX(71deg) translate3d(0, calc(var(--progress) * 90px), 0);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%, transparent 94%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 44%, transparent 94%);
  opacity: .44;
}

/* Marque : le logo de SentinelleFin, tres grand et presque efface, tourne lentement derriere la
   section (meme geste que le pictogramme de la navigation). Il est FIXE dans la fenetre : le contenu
   defile devant lui, il ne bouge pas d'un pixel, il tourne sur lui-meme. Le clip-path de .scene le
   garde a l'interieur de la section (position: fixed ignore overflow, pas clip-path). */
.scene { clip-path: inset(0); }
/* Section hors de l'écran : les mouvements en boucle du fond se mettent en pause (posé par js/landing.js). */
.scene--hors .scene__marque,
.scene--hors .scene__aurore::before,
.scene--hors .scene__aurore::after { animation-play-state: paused; }
.scene__marque {
  position: fixed;
  left: -260px;
  top: 50%;
  width: 880px;
  height: 880px;
  margin-top: -440px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .075;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .scene__marque { animation: marque-tourne 150s linear infinite; }
}
@keyframes marque-tourne { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .scene__marque { left: -300px; width: 640px; height: 640px; margin-top: -320px; }
}
/* Sur téléphone, le fond animé des sections ne se dessine pas : l'aurore (deux calques de 140 % de la section, donc plusieurs milliers de
   pixels de haut, multipliés par la densité de pixels) était une surface de plusieurs centaines de Mo permanente. En descendant vite jusqu'à
   la carte du score, Safari sur iPhone dépassait sa mémoire et la page plantait (« Un problème récurrent est survenu »). Le dégradé de la section
   reste ; le logo en filigrane reste, fixe, sans rotation ni calque permanent. */
@media (max-width: 900px) {
  .scene__aurore, .scene__horizon, .scene__balayage { display: none; }
  .scene__marque { animation: none !important; will-change: auto; }
}

/* Balayage : la bande claire descend exactement au rythme du défilement. */
.scene__balayage {
  left: 0;
  right: 0;
  height: 360px;
  top: -180px;
  /* --scene-h : la hauteur de la section, posée par js/landing.js. */
  transform: translate3d(0, calc(var(--progress) * var(--scene-h, 2400px)), 0);
  will-change: transform;
  background: linear-gradient(180deg,
    rgba(115, 111, 182, 0) 0%,
    rgba(160, 152, 225, .17) 48%,
    rgba(115, 111, 182, 0) 100%);
}


.presentation__title {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: -.4px;
  color: var(--on-dark);
  text-wrap: pretty;
}

.presentation__cta { margin-top: 28px; }

.presentation__lede {
  margin-top: 22px;                 /* un vrai espace entre le titre et le texte */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .2px;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

/* Bento asymétrique : large + moyen, petit + large, deux moitiés.
   L’ordre du DOM et l’ordre de lecture restent identiques. */
/* ---------------------------------------------- Traversée des fonctionnalités */
/* La colonne de gauche reste figée pendant que les cartes défilent et
   s'empilent. Chaque carte se colle un cran plus bas que la précédente : on
   garde ainsi une lisière visible de celles déjà passées. */

.produits {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.produits__colonne {
  position: sticky;
  top: 132px;
  align-self: start;
}

.pas {
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pas__point {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-fine-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
/* Chaque pastille est un vrai bouton : un clic amene la carte correspondante au sommet de la pile. */
.pas__bouton {
  appearance: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pas__point:hover { transform: translateY(-2px); }
.pas__point:not(.is-active):hover { background: rgba(255, 255, 255, .16); color: var(--on-dark); }
.presentation--clair .pas__point:not(.is-active):hover { background: var(--action-tint); color: var(--brand-1); }
.pas__bouton:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: 3px; }
.presentation--clair .pas__bouton:focus-visible { outline-color: var(--action-focus); }
.pas__point.is-active {
  background: var(--on-dark);
  color: var(--brand-1);
  box-shadow: none;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Les cartes empilées ne prennent pas la parallaxe : elle se battrait avec le
   collant. Le liseré et la lueur, eux, restent pilotés au défilement. */
.cards .card {
  position: sticky;
  transform: none;
  /* Une fois les cartes empilees, chacune jette une petite ombre vers le haut, sur la precedente. */
  box-shadow:
    0 -12px 26px -14px rgba(9, 6, 28, .55),
    0 24px 64px -36px rgba(9, 6, 28, .92),
    0 0 0 1px rgba(115, 111, 182, calc(var(--near) * .34)),
    0 0 36px -8px rgba(115, 111, 182, calc(var(--near) * .42));
  min-height: 468px;
  margin-bottom: var(--space-xxl);
  /* Texte à gauche, visuel à fond perdu sur toute la moitié droite. */
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  padding: 0;
  overflow: hidden;
}

.card__mot {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
}
.card__mot .card__title { margin-top: 0; }
.card__mot .card__text { margin-top: 0; }

.card__scene {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, var(--action-tint) 0%, var(--action-tint-strong) 100%);
}
.card__scene--centre { align-items: center; }
.cards .card:nth-child(1) { top: 132px; }
.cards .card:nth-child(2) { top: 146px; }
.cards .card:nth-child(3) { top: 160px; }
.cards .card:nth-child(4) { top: 174px; }
.cards .card:nth-child(5) { top: 188px; }
.cards .card:nth-child(6) { top: 202px; margin-bottom: 0; }

.card {
  --near: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px;
  transform: translate3d(0, var(--dy, 0px), 0);
  box-shadow:
    0 24px 64px -36px rgba(9, 6, 28, .92),
    0 0 0 1px rgba(115, 111, 182, calc(var(--near) * .34)),
    0 0 36px -8px rgba(115, 111, 182, calc(var(--near) * .42));
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.card:hover { border-color: var(--action); }

/* Liseré lumineux : il s’allume quand la carte approche du centre de l’écran. */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-5), transparent);
  opacity: calc(.18 + var(--near) * .82);
  pointer-events: none;
}


/* ---- Carte média ---- */
/* La vidéo tient toute la carte. Le voile est horizontal, pas vertical : il
   est presque opaque sous la colonne de texte, presque transparent sous le
   relevé : l'image reste visible là où rien n'a besoin d'être lu. */

.card--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
}

.card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}
.card--media:hover .card__media { transform: scale(1.04); }

.card__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(101deg,
      rgba(252, 252, 254, .975) 0%,
      rgba(249, 248, 254, .955) 34%,
      rgba(243, 241, 253, .80) 48%,
      rgba(236, 233, 250, .46) 62%,
      rgba(229, 226, 248, .34) 82%,
      rgba(226, 223, 247, .42) 100%);
}

/* La colonne de texte de la carte média porte trois blocs : l'accroche, ce que
   la veille regarde, puis la note de bas de carte. */
.card__mot--media {
  gap: var(--space-lg);
  justify-content: space-between;
}
.card__mot--media .chip { margin-bottom: 14px; }

.card__note {
  font-size: var(--text-micro-size);
  line-height: 1.55;
  letter-spacing: var(--text-micro-ls);
  color: var(--ink-muted-48);
}


.card__title {
  margin-top: var(--gutter-grid);
  font-family: var(--font-display);
  font-size: var(--text-tagline-size);
  font-weight: var(--text-tagline-weight);
  line-height: var(--text-tagline-lh);
  letter-spacing: var(--text-tagline-ls);
  color: var(--brand-1);
  text-wrap: pretty;
}

.card__text {
  margin-top: var(--space-sm);
  font-size: var(--text-caption-size);
  line-height: 1.62;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}


/* ============================================================================
   Visuels de carte : chaque tuile démontre un mécanisme, pas une capture.
   ========================================================================== */

/* Pastille d'état : un seul objet pour tous les signaux. */
.chip {
  display: inline-block;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
}
.chip--critique  { background: var(--signal-critique-tint);  color: var(--signal-critique); }
.chip--vigilance { background: var(--signal-vigilance-tint); color: var(--signal-vigilance); }
.chip--sur       { background: var(--signal-sur-tint);       color: var(--signal-sur); }
.chip--neutre    { background: var(--signal-neutre-tint);    color: var(--signal-neutre); }

/* Puce de signal : même objet dans l'écran du téléphone, le relevé du bien
   et le verdict ScamDetect. */
.puce {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--signal-neutre);
}
.puce--critique  { background: var(--signal-critique); }
.puce--vigilance { background: var(--signal-vigilance); }
.puce--sur       { background: var(--signal-sur); }

/* ---- Carte 5 : ce que la veille foncière regarde ---- */

.veille {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.veille li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--text-caption-size);
  line-height: 1.35;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}
.veille svg { flex: 0 0 auto; color: var(--action); }

/* ---- Carte 6 : les opérations du mois, les écarts reliés ---- */

.grille {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}

.grille__liens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.grille__liens path {
  fill: none;
  stroke: var(--signal-critique);
  stroke-width: 1.25;
  stroke-opacity: .55;
  vector-effect: non-scaling-stroke;
}

.op {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: -.2px;
  color: var(--ink-muted-48);
  white-space: nowrap;
}
.op--alerte {
  position: relative;
  z-index: 2;
  background: var(--signal-critique);
  color: var(--on-dark);
  font-weight: 600;
}

/* Bandeau partenaires */
.partners {
  margin-top: var(--space-xl);
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.partners__label {
  max-width: 230px;
  font-size: var(--text-fine-size);
  line-height: 1.5;
  letter-spacing: var(--text-fine-ls);
  color: var(--on-dark-muted);
}
.partners__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}
.partner {
  display: block;
  width: 126px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .06);
}

/* ---------------------------------------------------- Banques compatibles */

.banques {
  background:
    radial-gradient(46% 40% at 78% 44%, rgba(115, 111, 182, .14) 0%, rgba(245, 245, 247, 0) 72%),
    var(--canvas-parchment);
  /* 80 px de chaque côté, comme la section « Au-delà des comptes » juste au-dessus :
     le texte commence au même endroit d'une section à l'autre. */
  padding: 104px 80px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: 56px;
  align-items: center;
}

.banques__texte { max-width: 500px; }

.banques__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: balance;
}


/* Le chiffre porte la section : il est traité comme un titre, pas comme du texte. */
.compteur {
  margin-top: var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.compteur__nombre {
  font-family: var(--font-display);
  /* Chiffres de largeur fixe : le décompte ne doit pas faire vibrer le nombre. */
  font-variant-numeric: tabular-nums;
  font-size: var(--text-hero-size);
  font-weight: var(--text-hero-weight);
  line-height: 1;
  letter-spacing: var(--text-hero-ls);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.compteur__unite {
  max-width: 15em;
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}

.notes {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.notes li {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
}
.notes li:last-child { border-bottom: 1px solid var(--hairline); }

/* ----------------------------------------------------------- Constellation */

/* width:100% indispensable : sous 1180 px la grille passe en justify-items:center,
   l'élément se dimensionne alors sur son contenu et le width:100% de la
   constellation se résoudrait à zéro. */
.banques__scene {
  width: 100%;
  display: flex;
  justify-content: center;
}

.constellation {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  /* Le rayon des orbites est exprimé en cqmin : il suit la taille réelle de
     la constellation, sans dépendre de la boîte du bras, qui est nulle. */
  container-type: size;
  /* clip et non hidden : coupe le débordement sans créer de conteneur de
     défilement, donc sans casser le collant ni le conteneur de requête. Le
     masque n'estompe que le rendu : il laissait les vignettes en orbite
     élargir la page par intermittence, à chaque passage au bord. */
  overflow: clip;
  /* Le fondu ne commence qu'au tout dernier centième : avec des monogrammes il
     estompait joliment le pourtour, avec de vrais logos il les ternissait. Il
     ne sert plus qu'à adoucir un bord, si un jour une pilule l'atteint. */
  -webkit-mask-image: radial-gradient(closest-side, #000 92%, rgba(0, 0, 0, .88) 98%, rgba(0, 0, 0, .55) 100%);
  mask-image: radial-gradient(closest-side, #000 92%, rgba(0, 0, 0, .88) 98%, rgba(0, 0, 0, .55) 100%);
}

.constellation__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: radial-gradient(closest-side, rgba(115, 111, 182, .26) 0%, rgba(115, 111, 182, 0) 100%);
}

.constellation__orbite {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(115, 111, 182, .16);
}
.constellation__orbite--1 { width: 46%; height: 46%; }
.constellation__orbite--2 { width: 77%; height: 77%; border-color: rgba(115, 111, 182, .10); }

.constellation__coeur {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient-diag);
  box-shadow: var(--shadow-subject);
}
.constellation__coeur img { width: 52px; height: 52px; }

/* ---- Anneaux en rotation ---- */
/* Deux anneaux tournent en sens inverse sur des durées très longues. Chaque
   vignette contre-tourne à la même cadence pour rester droite. */

.constellation__anneau {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.constellation__anneau--int { animation: orbite 150s linear infinite; }
.constellation__anneau--ext { animation: orbite 210s linear infinite reverse; }

@keyframes orbite {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes contre-orbite {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}

.bras {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateX(var(--r));
}
.constellation__anneau--int .bras { --r: 23cqmin; }
.constellation__anneau--ext .bras { --r: 38.5cqmin; }

.constellation__anneau--int .banque { animation: contre-orbite 150s linear infinite; }
.constellation__anneau--ext .banque { animation: contre-orbite 210s linear infinite reverse; }

/* La rotation ne s'interrompt jamais : les logos se lisent en mouvement, il
   n'y a plus de monogramme à déchiffrer au survol. Seul
   prefers-reduced-motion l'arrête, plus bas. */

/* ---- Vignette d'établissement ---- */
/* Une pilule blanche dont la largeur suit celle du logo : une marque carrée
   donne un rond, un logotype en largeur donne une pilule. Sans libellé
   visible : seize noms en rotation se chevaucheraient. Le nom reste lu par
   les lecteurs d'écran ; sous 640 px il réapparaît. */

.banque {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 58px;
  height: 58px;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  box-shadow:
    0 1px 2px rgba(66, 55, 122, .10),
    0 6px 16px rgba(115, 111, 182, .16),
    0 16px 32px rgba(183, 174, 201, .18);
}

.banque__nom {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les fichiers portent leur taille exacte en attributs : la pilule a sa
   largeur définitive avant même que l'image arrive, l'anneau ne saute pas.
   Les plafonds ne servent que de garde-fou. */
.banque__logo {
  display: block;
  flex: 0 0 auto;
  max-width: 96px;
  max-height: 36px;
  object-fit: contain;
}

/* ------------------------------------------------------------------ Tarifs */

/* --------------------------------------------------------------- Avis */
/* Citation phare, puis une piste de témoignages qui défile latéralement.
   Le contenu actuel n'est qu'un gabarit : voir le commentaire du balisage. */

.avis {
  background: var(--canvas-parchment);
  padding: 104px 0 96px;
}

.avis__phare {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.avis__phare blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-hero-size);
  font-weight: var(--text-hero-weight);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-ls);
  color: var(--action);
  text-wrap: balance;
}
.avis__sur {
  margin-bottom: var(--space-lg);
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}

.avis__phare figcaption {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.avis__etoiles {
  display: inline-flex;
  gap: 4px;
  color: var(--signal-vigilance);
}

.avis__signature {
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--action);
}

.avis__cadre {
  position: relative;
  margin-top: 72px;
  padding: var(--space-xxl) 0 var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--surface-pearl);
  border: 1px solid var(--hairline);
}

.avis__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 0 var(--space-xxl) var(--space-xl);
}
.avis__fleche {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--action);
  background: transparent;
  color: var(--action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.avis__fleche:hover { background: var(--action); color: var(--on-action); }
.avis__fleche[disabled] { opacity: .35; cursor: default; }
.avis__fleche[disabled]:hover { background: transparent; color: var(--action); }

/* Défilement au doigt et à la molette, avec calage sur les cartes. */
.avis__piste {
  display: flex;
  gap: var(--gutter-grid);
  padding: 0 var(--space-xxl);
  scroll-padding-inline: var(--space-xxl);   /* le calage garde la marge : la carte ne colle pas au bord */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.avis__piste::-webkit-scrollbar { display: none; }

/* Les cartes s'effacent aux deux bords du cadre plutôt que d'y être tranchées
   net : c'est ce qui dit qu'il y en a d'autres à côté. */
.avis__cadre {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.avis__carte {
  flex: 0 0 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 306px;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.avis__carte:hover {
  transform: translateY(-4px);
  border-color: var(--action-tint-strong);
  box-shadow: 0 2px 6px rgba(66, 55, 122, .06), 0 18px 40px rgba(115, 111, 182, .18);
}

.avis__note {
  display: inline-flex;
  gap: 2px;
  color: var(--signal-vigilance);
}

.avis__carte blockquote {
  /* Pousse la signature en bas de carte quelle que soit la longueur de la
     citation : les cinq cartes gardent la même ligne de pied. */
  flex: 1;
}
.avis__carte blockquote p {
  /* Des retours de plusieurs lignes : un cran plus petit et moins gras qu'une phrase courte, pour rester agréable à lire. */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--ink);
  text-wrap: pretty;
}

.avis__carte figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: var(--space-md);
  border-top: 1px solid var(--divider-soft);
}
/* Initiales plutôt qu'un portrait : aucune de ces personnes n'existe encore,
   inventer un visage serait une fausse preuve de plus. */
.avis__vignette {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action-tint);
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--action-focus);
}
.avis__qui { min-width: 0; }
.avis__nom {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink);
}
.avis__role {
  display: block;
  margin-top: 2px;
  font-size: var(--text-fine-size);
  line-height: 1.4;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
}

.tarifs {
  /* Deux fondus encadrent le lavande : vers le parchemin de la section des
     banques en haut, vers le perle de l'essai en bas. Sans eux, la couleur
     s'arrêtait net et la page semblait changer d'un bloc à l'autre. */
  background:
    linear-gradient(180deg,
      var(--canvas-parchment) 0%,
      rgba(245, 245, 247, .55) 6%,
      rgba(245, 245, 247, 0) 15%,
      rgba(250, 250, 252, 0) 74%,
      rgba(250, 250, 252, .62) 89%,
      var(--surface-pearl) 100%),
    radial-gradient(56% 44% at 20% 12%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(52% 44% at 84% 82%, rgba(115, 111, 182, .26) 0%, rgba(240, 238, 251, 0) 74%),
    linear-gradient(160deg, var(--action-tint) 0%, var(--action-tint-strong) 52%, #cfc9ef 100%);
  padding: 104px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tarifs__entete {
  max-width: 640px;
  text-align: center;
}

.tarifs__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: balance;
}

.tarifs__lede {
  margin-top: 18px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}

.tarifs__cycle { margin-top: var(--space-xl); }

/* La remise annoncée sur l'onglet annuel : l'arbitrage se fait avant le clic. */
.segmented__eco {
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--action-tint-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--action-focus);
}


/* Permutation mensuel / annuel : la valeur sortante s'efface vers le haut, la
   nouvelle entre par le bas. Les classes ne sont posées que par landing.js. */
.offre__barre,
.offre__montant,
.offre__periode,
.offre__economie {
  transition:
    opacity 220ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}
.valeur--sort {
  opacity: 0;
  transform: translateY(-5px);
  transition-duration: 150ms;
}
/* État d'entrée posé sans transition, le temps d'une image. */
.valeur--entre {
  opacity: 0;
  transform: translateY(5px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .valeur--sort,
  .valeur--entre { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Les deux offres */

.offres {
  margin-top: 56px;
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-grid);
  align-items: start;
}

/* Deux offres : on resserre la largeur pour que les colonnes ne s'étirent pas. */
.offres--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}

/* Prix barré : présent uniquement en facturation annuelle. Vide, il disparaît
   sans laisser d'espace : sinon la ligne de prix sauterait au changement. */
.offre__barre {
  align-self: baseline;
  font-size: var(--text-body-size);
  font-weight: 400;
  color: var(--ink-muted-80);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.offre__barre:empty { display: none; }

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.offre:hover { border-color: var(--action); }

/* L'offre conseillée se distingue par un anneau, pas par une taille : les deux
   colonnes gardent la même largeur, l'œil compare des égales. */
.offre--conseillee {
  border-color: var(--action);
  box-shadow: 0 1px 2px rgba(66, 55, 122, .08), 0 14px 34px rgba(115, 111, 182, .18);
}

.offre__marque {
  position: absolute;
  top: 0;
  right: var(--space-xl);
  transform: translateY(-50%);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--on-dark);
  white-space: nowrap;
}

.offre__nom {
  font-family: var(--font-display);
  font-size: var(--text-lead-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.3px;
  color: var(--brand-1);
}

.offre__pour {
  margin-top: 6px;
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}

.offre__prix {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.offre__montant {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.8px;
  color: var(--brand-1);
  font-variant-numeric: tabular-nums;
}
.offre__periode {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}

/* L'économie annuelle : incitation en mensuel, confirmation en annuel. */
.offre__economie {
  margin-top: calc(-1 * var(--space-sm));
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--action-focus);
}

/* Passerelle vers le comparatif complet. */
/* Pastille de remise : vide en mensuel, donc masquée, même mécanisme que les
   prix, piloté par data-mensuel / data-annuel. */
.offre__promo {
  align-self: center;
  margin-left: var(--space-xs);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--signal-sur-tint);
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--signal-sur);
}
.offre__promo:empty { display: none; }

.tarifs__detail {
  margin-top: var(--space-xl);
  font-size: var(--text-caption-size);
}
.tarifs__detail a {
  color: var(--action-focus);
  font-weight: 600;
  text-underline-offset: 3px;
}
.tarifs__detail a::after { content: " \2192"; }

.offre__points {
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--divider-soft);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.offre__points li {
  display: grid;
  grid-template-columns: 15px 1fr;
  align-items: start;
  gap: 10px;
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}
.offre__coche {
  margin-top: 3px;
  color: var(--ink-muted-48);
}
.offre--conseillee .offre__coche { color: var(--action); }

/* Une icône par ligne plutôt qu'une coche répétée : le design system remplace
   les emoji par des icônes, chacune portant le sens de sa ligne. */
.offre__icone {
  margin-top: 2px;
  color: var(--ink-muted-48);
}
.offre--conseillee .offre__icone { color: var(--action); }
/* La précision d'une ligne (nombre d'adresses, de lignes, de personnes) tient sur sa propre ligne, plus discrète que le titre. */
.offre__detail { display: block; margin-top: 3px; color: var(--ink-muted-80); }

.offre__herite {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--divider-soft);
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  letter-spacing: var(--text-caption-strong-ls);
  color: var(--ink);
}
/* Le filet est déjà porté par la ligne « Tout Essentiel, plus : ». */
.offre__points--suite {
  padding-top: var(--space-sm);
  border-top: 0;
}

/* ----------------------------------------------------------- Essai gratuit */
/* Une longue section pleine largeur : le texte centré en haut, en grand, la photo en dessous. La photo se fond dans le mur du fond (un
   fondu sur son bord haut) pour que le titre ait de la place sans masquer les visages. */

.essai {
  /* Une respiration claire entre la section violette qui précède et la photo : la photo vit dans une grande carte arrondie, posée sur
     le fond clair de la page, avec de l'air autour. Plus de bord droit entre deux grands aplats. */
  background: var(--surface-pearl);
  padding: clamp(44px, 6.5vw, 96px) clamp(12px, 2.4vw, 32px) clamp(20px, 3vw, 44px);
}

.essai__carte {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(72px, 8.5vw, 132px) 0 0;
  border-radius: clamp(24px, 3.2vw, 48px);
  background: linear-gradient(90deg, #c0b2a4 0%, #c8bbb0 55%, #cfbdae 100%);
  overflow: hidden;
  isolation: isolate;
}

.essai__mot {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.essai__title {
  max-width: 22ch;
  /* Même écriture que les autres titres du site (celui du hero) : mêmes graisse, interlignage et espacement. */
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: var(--text-hero-weight);
  line-height: 1.08;
  letter-spacing: var(--text-hero-ls);
  color: var(--brand-1);
  text-wrap: balance;
}

.essai__lede {
  margin-top: 22px;
  max-width: 520px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
  text-wrap: balance;
}

.essai__cta { margin-top: 30px; }
.essai__cta .btn { padding-left: 36px; padding-right: 36px; }

.essai__image {
  position: relative;
  /* Plus la section est large, plus la photo est haute, mais jamais au-delà de ce qu'un écran montre d'un coup. */
  height: clamp(540px, 62vw, 940px);
  margin-top: clamp(-70px, -3.5vw, -28px);   /* le haut de la photo remonte sous le texte */
}
.essai__fond {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}

/* ---------------------------------------------------------- Pied de page */
/* Deux cartes côte à côte : le dégradé de marque à gauche, le parchemin à
   droite. C'est la seule tuile en dégradé de la page, comme le veut le
   design system, et cela retire une des surfaces sombres en trop. */

.pied {
  background: var(--surface-pearl);
  padding: 0 0 var(--space-xl);
}

.pied__cartes {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-md);
  align-items: stretch;
}

/* ---- Carte gauche : la marque ---- */

.pied__marque {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Bleu profond, avec une lueur plus claire dans le coin haut droit. */
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(120, 150, 255, .38) 0%, rgba(120, 150, 255, 0) 100%),
    linear-gradient(150deg, #101a52 0%, #1d2d86 52%, #3149b8 100%);
  box-shadow: 0 30px 60px -34px rgba(16, 26, 82, .75);
}

/* align-self : sans lui, le stretch du conteneur flex étirait le logo sur
   toute la largeur de la carte et l'écrasait (688 × 31 au lieu de 177 × 26). */
.pied__logo {
  height: 26px;
  width: auto;
  align-self: flex-start;
}

.pied__marque-bas { margin-top: auto; }

/* 21 px et non 24 : dans une colonne de 340 px, la taille du chapeau aéré
   poussait la phrase sur cinq lignes serrées. */
.pied__baseline {
  font-size: var(--text-tagline-size);
  font-weight: 300;
  line-height: 1.42;
  text-wrap: pretty;
  color: var(--on-dark);
  text-wrap: pretty;
}
.pied__baseline span { color: rgba(255, 255, 255, .62); }

.pied__sceau {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-ls);
  color: rgba(255, 255, 255, .75);
}
.pied__sceau svg { flex: 0 0 auto; }

/* L'adresse du siege, sous le sceau. */
.pied__adresse {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-ls);
  color: rgba(255, 255, 255, .75);
}
.pied__adresse svg { flex: 0 0 auto; }

/* ---- Carte droite : la navigation ---- */

.pied__panneau {
  border-radius: var(--radius-xl);
  /* Blanc sur parchemin, comme toutes les cartes de la page : le
     --canvas-parchment du modèle ne se détachait pas du fond --surface-pearl. */
  background: var(--canvas);
  border: 1px solid var(--hairline);
  padding: var(--space-xxl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xxl);
}

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-grid);
}

.pied__titre {
  font-size: 12px;          /* était 10 px (--text-micro-size) : trop petit pour un titre de colonne */
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}

.pied__colonne ul {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pied__colonne a {
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.pied__colonne a:hover { color: var(--action-focus); text-decoration: none; }

.pied__bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.pied__copyright {
  font-size: var(--text-fine-size);
  letter-spacing: var(--text-fine-ls);
  color: var(--ink-muted-48);
}

.pied__relance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.pied__relance-mot {
  font-size: var(--text-caption-size);
  line-height: 1.45;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-48);
}
.pied__relance-mot strong {
  display: block;
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--ink);
}

/* ---- Filigrane ---- */
/* Le viewBox est recalé sur la boîte réelle du texte (landing.js) pour que les
   jambages affleurent les bords, comme un ex-libris posé sous les cartes. */

.pied__filigrane {
  margin-top: -34px;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
.pied__filigrane svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pied__filigrane text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  fill: rgba(25, 20, 62, .055);
}

/* ------------------------------------------------------------- Surtitres */
/* .eyebrow était balisé partout mais n'avait aucune règle : les surtitres
   passaient en corps de texte. --action-focus plutôt que --action : à 12 px,
   #736fb6 sur parchemin tombe à 4,1:1, sous le seuil des petits textes. */

.eyebrow {
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--action-focus);
}
.eyebrow--sur-fonce { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- ScamDetect */
/* Une conversation piégée, et le verdict qui vient se poser dessus. Le fil
   reste à gauche, le verdict remonte par-dessus son coin bas-droit : c'est ce
   chevauchement qui raconte « l'application a lu ce message ». */

.scam {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(58% 48% at 80% 10%, rgba(115, 111, 182, .38) 0%, rgba(66, 55, 122, .12) 52%, rgba(25, 20, 62, 0) 80%),
    linear-gradient(180deg, #241c53 0%, var(--surface-deep) 44%, #140f31 100%);
  /* 80 px de chaque cote, comme « Au-dela des comptes » sur la page d'accueil : le texte ne
     colle plus au bord de l'ecran. */
  padding: 112px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  grid-template-areas:
    "mot   scene"
    "temps temps";
  column-gap: 72px;
  row-gap: 84px;
  align-items: center;
}

.scam__lueur {
  position: absolute;
  z-index: -1;
  right: -12%;
  top: -22%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 111, 182, .34) 0%, rgba(115, 111, 182, 0) 68%);
  animation: scam-lueur 17s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
@keyframes scam-lueur {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 6%, 0) scale(1.14); }
}

.scam__mot { grid-area: mot; max-width: 540px; }

.scam__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--on-dark);
  text-wrap: pretty;
}
.scam__lede {
  margin-top: var(--space-md);
  font-size: var(--text-tagline-size);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .2px;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

/* ---- Les trois temps, en bande sous la scène ---- */
/* Sortis de la colonne de gauche : alignés, ils se lisent d'un coup d'œil,
   là où la liste verticale allongeait le texte sous le titre et repoussait
   l'appel à l'action hors de l'écran. */

.parcours {
  grid-area: temps;
  margin: 0;
  padding: var(--space-xl) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.parcours__num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .32);
}

.parcours__titre {
  margin-top: 12px;
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--on-dark);
}

.parcours__texte {
  margin-top: 4px;
  font-size: var(--text-caption-size);
  line-height: 1.55;
  letter-spacing: var(--text-caption-ls);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.scam__cta {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.scam__note {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  color: var(--on-dark-muted);
}

/* ---- Le fil de conversation ---- */

.scam__scene { grid-area: scene; display: flex; justify-content: center; }
.scam__pile { width: 100%; max-width: 520px; }

.fil {
  width: min(100%, 404px);
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.fil__entete {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.fil__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  font-size: 15px;
  font-weight: 600;
  color: var(--on-dark-muted);
}
.fil__ident b {
  display: block;
  font-size: var(--text-caption-strong-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-strong-ls);
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
}
.fil__ident i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: var(--text-micro-size);
  color: var(--on-dark-muted);
}

.bulle {
  max-width: 90%;
  margin-top: 12px;
  padding: 12px 15px;
  border-radius: 18px 18px 18px 7px;
  background: rgba(255, 255, 255, .13);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  letter-spacing: var(--text-caption-ls);
  color: var(--on-dark);
  text-wrap: pretty;
}

/* ---- Le verdict ---- */

.verdict {
  position: relative;
  z-index: 2;
  width: min(100%, 352px);
  margin: -88px 0 0 auto;
  padding: 21px;
  border-radius: var(--radius-xl);
  background: var(--canvas);
  box-shadow:
    0 2px 8px rgba(9, 6, 28, .20),
    0 32px 72px rgba(9, 6, 28, .44);
}

.verdict__niveau {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--signal-critique-tint);
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-critique);
}

.verdict__titre {
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: pretty;
}

.verdict__raisons,
.verdict__gestes {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.verdict__raisons li,
.verdict__gestes li {
  position: relative;
  font-size: var(--text-caption-size);
  line-height: 1.5;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}
.verdict__raisons li { padding-left: 17px; }
.verdict__raisons li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--signal-critique);
}
.verdict__raisons b { font-weight: 600; color: var(--ink); }

.verdict__legende {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--divider-soft);
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}

.verdict__gestes {
  counter-reset: geste;
  margin-top: 12px;
}
.verdict__gestes li {
  counter-increment: geste;
  padding-left: 25px;
}
.verdict__gestes li::before {
  content: counter(geste);
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  font-size: 9px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  color: var(--action-focus);
}
.verdict__gestes b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Sécurité */
/* Six garanties dans une grille au filet unique : les cellules se touchent,
   c'est le trait de 1 px qui les sépare. Rien ne dépasse, rien ne flotte. */

.securite {
  background: var(--surface-pearl);
  padding: 104px 0;
}

.securite__entete {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 72px;
  align-items: end;
}
.securite__entete .eyebrow { grid-column: 1; grid-row: 1; }
.securite__title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: pretty;
}
.securite__lede {
  grid-column: 2;
  grid-row: 2;
  padding-bottom: 5px;
  font-size: var(--text-body-size);
  line-height: 1.62;
  letter-spacing: var(--text-body-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}

.garanties {
  max-width: var(--container-wide);
  margin: var(--space-xxl) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.garantie {
  padding: var(--space-xl);
  background: var(--canvas);
  transition: background var(--dur-base) var(--ease-standard);
}
.garantie:hover { background: var(--action-tint); }

.garantie__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--action-tint);
  color: var(--action-focus);
  transition: background var(--dur-base) var(--ease-standard);
}
.garantie:hover .garantie__icone { background: var(--canvas); }

.garantie__titre {
  margin-top: var(--space-md);
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--brand-1);
  text-wrap: pretty;
}
.garantie__texte {
  margin-top: var(--space-xs);
  font-size: var(--text-caption-size);
  line-height: 1.6;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}

/* ============================================================================
   Animations d'entrée des visuels.
   Comme pour les apparitions, rien n'est masqué tant que landing.js n'a pas posé
   .js-anim : sans JavaScript, chaque visuel s'affiche dans son état final.
   Chaque scène a un seul déclencheur ([data-anim]) et une seule horloge : les
   retards sont écrits en clair pour qu'on lise l'ordre des choses.
   ========================================================================== */

/* ---- L'appareil monte, la main le rejoint ---- */

.js-anim .appareil { opacity: 0; transform: translate3d(0, 38px, 0); }
.js-anim .appareil.is-animated {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--ease-standard),
    transform 900ms var(--ease-standard);
}

.js-anim .main { opacity: 0; transform: translate3d(0, 26px, 0); }
.js-anim .appareil--miroir .main { transform: scaleX(-1) translate3d(0, 26px, 0); }
.js-anim .appareil.is-animated .main {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease-standard) 180ms,
    transform 820ms var(--ease-standard) 180ms;
}
.js-anim .appareil--miroir.is-animated .main { transform: scaleX(-1); }

/* ---- La bannière se pose au-dessus de l'écran ---- */

.js-anim .notif { opacity: 0; transform: translate3d(0, -16px, 0) scale(.96); }
.js-anim .appareil.is-animated .notif {
  opacity: 1;
  transform: none;
  transition:
    opacity 480ms var(--ease-standard) 760ms,
    transform 620ms var(--ease-standard) 760ms;
}
/* Écrit après la règle d'entrée, à spécificité égale : le survol l'emporte. */
.notif { transition: transform var(--dur-slow) var(--ease-standard); }
.card:hover .appareil.is-animated .notif,
.card:hover .notif { transform: translate3d(0, -5px, 0); }

/* ---- Écran 1 : les deux barres poussent depuis la gauche, puis les signaux ---- */

.js-anim .ecart__barre { transform: scaleX(0); }
.js-anim .appareil.is-animated .ecart__barre {
  transform: scaleX(1);
  transition: transform 780ms var(--ease-standard) 460ms;
}
/* La seconde part après la première : c'est l'écart entre les deux qui doit
   se lire, pas leur apparition simultanée. */
.js-anim .appareil.is-animated .ecart__barre--fort { transition-delay: 760ms; }

.js-anim .signaux li { opacity: 0; transform: translate3d(0, 7px, 0); }
.js-anim .appareil.is-animated .signaux li {
  opacity: 1;
  transform: none;
  transition:
    opacity 440ms var(--ease-standard) calc(var(--ordre, 0) * 140ms + 1080ms),
    transform 500ms var(--ease-standard) calc(var(--ordre, 0) * 140ms + 1080ms);
}

/* ---- Écran 2 : l'anneau se trace, le chiffre est compté par le JS,
        puis les trois critères poussent l'un après l'autre ---- */

.js-anim .cadran__arc { stroke-dashoffset: 345.58; }
.js-anim .cadran--sombre .cadran__arc { stroke-dashoffset: 326.73; }
.js-anim .appareil.is-animated .cadran--sombre .cadran__arc {
  stroke-dashoffset: 42.48;
  transition: stroke-dashoffset 1300ms var(--ease-standard) 280ms;
}
.js-anim .appareil.is-animated .cadran__arc {
  stroke-dashoffset: 76.03;
  transition: stroke-dashoffset 1300ms var(--ease-standard) 280ms;
}

.js-anim .facteurs li { opacity: 0; transform: translate3d(0, 7px, 0); }
.js-anim .appareil.is-animated .facteurs li {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 900ms),
    transform 480ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 900ms);
}

.js-anim .facteurs__barre { transform: scaleX(0); }
.js-anim .appareil.is-animated .facteurs__barre {
  transform: scaleX(1);
  transition: transform 700ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 1020ms);
}

/* ---- Le relevé du bien : les jalons tombent du plus récent au plus ancien ---- */

.js-anim .jalons__item { opacity: 0; transform: translate3d(0, 9px, 0); }
.js-anim .bien.is-animated .jalons__item {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 320ms),
    transform 520ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 320ms);
}

/* Le jalon inattendu continue de battre : c'est le seul mouvement en boucle de
   la carte, et il porte la seule information urgente. */
.jalons__item--neuf .jalons__marque::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  animation: pouls 2.8s var(--ease-standard) infinite;
}
@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 rgba(210, 38, 79, .48); }
  62%  { box-shadow: 0 0 0 10px rgba(210, 38, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 38, 79, 0); }
}

/* ---- ScamDetect : le message arrive, le verdict se pose dessus ---- */

.js-anim .bulle { opacity: 0; transform: translate3d(0, 12px, 0); }
.js-anim .scam__pile.is-animated .bulle {
  opacity: 1;
  transform: none;
  transition:
    opacity 480ms var(--ease-standard) calc(var(--ordre, 0) * 230ms + 160ms),
    transform 560ms var(--ease-standard) calc(var(--ordre, 0) * 230ms + 160ms);
}

.js-anim .verdict { opacity: 0; transform: translate3d(0, 30px, 0) scale(.985); }
.js-anim .scam__pile.is-animated .verdict {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms var(--ease-standard) 1020ms,
    transform 760ms var(--ease-standard) 1020ms;
}

.js-anim .verdict__raisons li,
.js-anim .verdict__gestes li { opacity: 0; transform: translate3d(0, 7px, 0); }
.js-anim .scam__pile.is-animated .verdict__raisons li,
.js-anim .scam__pile.is-animated .verdict__gestes li {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms var(--ease-standard) calc(var(--ordre, 0) * 105ms + 1420ms),
    transform 440ms var(--ease-standard) calc(var(--ordre, 0) * 105ms + 1420ms);
}

/* ---- La grille des opérations : les écarts s'allument, puis les liens se tracent ---- */

.js-anim .grille .op--alerte {
  background: var(--canvas);
  color: var(--ink-muted-48);
  transform: scale(.94);
}
.js-anim .grille.is-animated .op--alerte {
  background: var(--signal-critique);
  color: var(--on-dark);
  transform: none;
  transition:
    background 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    color 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    transform 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms);
}

/* La longueur du tracé est mesurée en JavaScript et posée en --trace. */
.js-anim .grille__liens path { stroke-dashoffset: var(--trace, 0); }
.js-anim .grille.is-animated .grille__liens path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1300ms var(--ease-standard) 900ms;
}

/* ---- La courbe se trace, son pointeur arrive au bout ---- */

.js-anim .courbe__trait { stroke-dashoffset: var(--trace, 0); }
.js-anim .courbe-bloc.is-animated .courbe__trait {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1500ms var(--ease-standard) 200ms;
}
.js-anim .courbe__aire { opacity: 0; }
.js-anim .courbe-bloc.is-animated .courbe__aire {
  opacity: 1;
  transition: opacity 700ms var(--ease-standard) 900ms;
}
.js-anim .courbe__pointeur { opacity: 0; transform: scale(.4); }
.js-anim .courbe-bloc.is-animated .courbe__pointeur {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms var(--ease-standard) 1500ms,
    transform 420ms var(--ease-standard) 1500ms;
}

/* ---- Les garanties de sécurité entrent en cascade ---- */

.js-reveal .garanties .garantie { opacity: 0; transform: translate3d(0, 18px, 0); }
.js-reveal .garanties.is-revealed .garantie {
  opacity: 1;
  transform: none;
  transition:
    opacity 540ms var(--ease-standard),
    transform 600ms var(--ease-standard);
}
.js-reveal .garanties.is-revealed .garantie:nth-child(2) { transition-delay:  70ms; }
.js-reveal .garanties.is-revealed .garantie:nth-child(3) { transition-delay: 140ms; }
.js-reveal .garanties.is-revealed .garantie:nth-child(4) { transition-delay: 100ms; }
.js-reveal .garanties.is-revealed .garantie:nth-child(5) { transition-delay: 170ms; }
.js-reveal .garanties.is-revealed .garantie:nth-child(6) { transition-delay: 240ms; }

/* ---- Entrée des cartes de la traversée ----
   L'entrée et la parallaxe partagent la propriété transform. On ne les fait
   donc pas cohabiter : la transition est retirée dès l'entrée terminée
   (.is-settled), et seule la parallaxe pilote ensuite --dy. */

.js-anim .cards .card { opacity: 0; transform: translate3d(0, 32px, 0) scale(.985); }
.js-anim .cards .card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 640ms var(--ease-standard),
    transform 760ms var(--ease-standard);
}
.js-anim .cards .card:nth-child(2).is-in { transition-delay:  80ms; }
.js-anim .cards .card:nth-child(3).is-in { transition-delay: 160ms; }
.js-anim .cards .card:nth-child(4).is-in { transition-delay:  80ms; }
.js-anim .cards .card:nth-child(5).is-in { transition-delay: 160ms; }
.js-anim .cards .card:nth-child(6).is-in { transition-delay: 240ms; }

/* La lueur suit le défilement image par image : pas de transition dessus,
   elle ferait traîner l'effet d'une frame sur l'autre. */
.js-anim .cards .card.is-settled {
  transform: translate3d(0, var(--dy, 0px), 0);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

/* ---- Mouvement réduit : chaque scène est posée dans son état final ---- */

@media (prefers-reduced-motion: reduce) {
  .js-anim .cards .card,
  .js-anim .cards .card.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scene__aurore { transform: none; }
  .scene__aurore::before, .scene__aurore::after { animation: none; }
  .scene__horizon { transform: perspective(640px) rotateX(71deg); }
  .scene__balayage { display: none; }
  .scam__lueur { animation: none; }
  .jalons__item--neuf .jalons__marque::after { animation: none; }

  .js-anim .appareil,
  .js-anim .main,
  .js-anim .notif,
  .js-anim .signaux li,
  .js-anim .facteurs li,
  .js-anim .jalons__item,
  .js-anim .bulle,
  .js-anim .verdict,
  .js-anim .verdict__raisons li,
  .js-anim .verdict__gestes li,
  .js-anim .card__scene--scam .fil,
  .js-anim .scam-demo__signal,
  .js-anim .panneau__signal,
  .js-anim .courbe__aire,
  .js-anim .courbe__pointeur,
  .js-reveal .garanties .garantie {
    opacity: 1;
    transform: none;
  }
  .js-anim .appareil--miroir .main { transform: scaleX(-1); }
  .js-anim .ecart__barre,
  .js-anim .facteurs__barre { transform: scaleX(1); }
  .js-anim .cadran__arc { stroke-dashoffset: 76.03; }
  .js-anim .cadran--sombre .cadran__arc { stroke-dashoffset: 42.48; }
  .js-anim .courbe__trait,
  .js-anim .grille__liens path { stroke-dashoffset: 0; }
  .js-anim .grille .op--alerte {
    background: var(--signal-critique);
    color: var(--on-dark);
    transform: none;
  }
}

/* ------------------------------------------------------------- Apparitions */

/* Le masquage n’est appliqué que si landing.js a pris la main (il pose
   .js-reveal sur <html>). Sans JS, tout le contenu reste visible. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 720ms var(--ease-standard) var(--reveal-delay, 0ms),
    transform 780ms var(--ease-standard) var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================================
   Adaptatif : la maquette est dessinée à 1440 px, tout se resserre en dessous.
   ========================================================================== */

@media (max-width: 1439px) {
  .page { --pad: 32px; }
}

@media (max-width: 1180px) {
  .page { --pad: 24px; }
  .nav__links { gap: var(--lg-gap, 24px); }
  .pied__cartes { grid-template-columns: 300px 1fr; }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .nav { padding: 0 12px 0 20px; }

  .hero { min-height: 100svh; }
  .hero__content { padding: 100px 20px 40px; }
  .hero__title { font-size: 46px; margin-top: var(--space-xl); text-shadow: 0 2px 18px rgba(14, 10, 38, .6); }
  .hero__lede, .hero__note { text-shadow: 0 1px 12px rgba(14, 10, 38, .65); }
  /* Sur téléphone la vidéo doit se voir : voile léger, plus marqué seulement derrière le texte et au pied de l'écran. */
  .hero__veil--1 {
    background: linear-gradient(180deg,
      rgba(14, 10, 38, .46) 0%,
      rgba(14, 10, 38, .18) 30%,
      rgba(14, 10, 38, .22) 62%,
      rgba(14, 10, 38, .66) 100%);
  }
  .hero__veil--2 { background: radial-gradient(ellipse 95% 40% at 50% 42%, rgba(14, 10, 38, .34) 0%, rgba(14, 10, 38, 0) 100%); }
  .hero__bande { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2px; padding: 8px 4px; margin-bottom: 24px; }
  .hero__bande li { padding: 9px 14px; gap: 10px; }
  .hero__bande li + li { box-shadow: none; }
  .hero__bande li:nth-child(even) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
  .hero__bande li:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
  .hero__bande li:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2); }
  .hero__bande i { display: none; }

  .fraude { padding: 80px 0 72px; }
  .fraude__title { font-size: 40px; }
  .fraude__lede { font-size: 21px; }
  .statbox { padding: var(--space-xxl) var(--space-lg) 28px; }

  .presentation { padding: 88px 0 var(--space-lg); }
  .presentation__title { font-size: 34px; }
  .cards { margin-top: 56px; }

  .pied__cartes { grid-template-columns: 1fr; }
  .pied__marque { min-height: 0; }
  .pied__panneau { padding: var(--space-xl); }
}

@media (max-width: 640px) {
  .page { --pad: 18px; }

  .hero__content { padding: 148px 0 112px; }
  .hero__title { font-size: 36px; }
  .hero__lede,
  .hero__lede--pro { max-width: none; }
  .hero__lede:not(.hero__lede--pro) { font-size: 14px; }   /* 3 lignes au lieu de 4 : la première phrase ne peut pas tenir sur une ligne à 390 px */
  .segmented__btn { padding: 9px 16px; }

  .fraude__title { font-size: 32px; }
  .fraude__lede { font-size: 18px; }
  .statbox { padding: var(--space-xl) var(--space-md) var(--space-lg); }
  .stat__figure { font-size: 44px; }
  .statbox__stage { min-height: 134px; }   /* 130 px au plus (320 px de large) */
  .stat__caption { font-size: 16px; }

  .presentation__title { font-size: 30px; }
  .presentation__lede { font-size: 15.5px; margin-top: 18px; }


  .pied__marque { padding: var(--space-lg); }
  .pied__panneau { padding: var(--space-lg); gap: var(--space-xl); }
  .pied__colonnes { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--gutter-grid); }
  .pied__bas { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
}

/* ------------------------------------ Adaptatif de la section banques */

@media (max-width: 1180px) {
  .banques {
    grid-template-columns: 1fr;
    gap: 48px;
    justify-items: center;
    text-align: center;
  }
  .banques__texte { max-width: 620px; }
  .notes,
  .compteur { text-align: left; }
  .compteur { justify-content: center; }
  .banques__title { text-wrap: pretty; }
}

/* Tablette large : la section passe en une colonne, mais le texte reste calé à gauche sur les
   80 px de la section précédente ; seule la constellation se centre. */
@media (min-width: 900.02px) and (max-width: 1180px) {
  .banques { justify-items: start; text-align: left; }
  .banques__texte { max-width: 620px; }
  .compteur { justify-content: flex-start; }
  .banques .constellation { justify-self: center; }
}

@media (max-width: 900px) {
  .banques { padding: 80px 0; }
  .banques__title { font-size: 34px; }
  /* La scène perd 80 px de large : à pilules inchangées, l'anneau intérieur
     se resserrait à 18 px entre voisines. Les vignettes rétrécissent avec
     elle, et l'anneau intérieur s'écarte du cœur. */
  .constellation { max-width: 520px; }
  .constellation__anneau--int .bras { --r: 25cqmin; }
  .constellation__orbite--1 { width: 50%; height: 50%; }
  .banque { min-width: 46px; height: 46px; padding: 0 11px; }
  .banque__logo { max-width: 70px; max-height: 26px; width: auto; height: auto; }
  .constellation__coeur { width: 92px; height: 92px; border-radius: 24px; }
  .constellation__coeur img { width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  .banques { padding: 72px 0; }
  .banques__title { font-size: 30px; }
  .compteur__nombre { font-size: 44px; }
  /* Sur telephone la constellation garde SA rotation, comme sur ordinateur : les deux anneaux
     tournent en sens inverse, les vignettes contre-tournent pour rester droites. Avant, sous
     640 px, les anneaux se dissolvaient en une liste de pilules immobile. Tout est simplement
     reduit a l'echelle d'une scene d'environ 320 a 400 px : coeur, vignettes et logos (les rayons
     des orbites, en cqmin, suivent deja la taille reelle de la scene). L'anneau interieur porte
     7 marques a 25 cqmin, l'exterieur 8 a 38,5 cqmin : de quoi les separer d'au moins 10 px. */
  .constellation { max-width: 420px; margin: 0 auto; }
  .constellation__coeur { width: 60px; height: 60px; border-radius: 16px; }
  .constellation__coeur img { width: 30px; height: 30px; }
  /* Orbites plus ecartees que sur ordinateur (23 / 38,5 cqmin) : les vignettes, relativement plus
     grosses sur une petite scene, se croisaient trop souvent d'un anneau a l'autre. */
  .constellation__anneau--int .bras { --r: 22.5cqmin; }
  .constellation__anneau--ext .bras { --r: 39.5cqmin; }
  .constellation__orbite--1 { width: 45%; height: 45%; }
  .constellation__orbite--2 { width: 79%; height: 79%; }
  .banque { min-width: 37px; height: 37px; padding: 0 8px; }
  .banque__logo { max-width: 50px; max-height: 21px; width: auto; height: auto; }
}

/* ------------------------------------------ Adaptatif de la section tarifs */

@media (max-width: 1080px) {
  .offre { padding: var(--space-lg); }
  .offre__marque { right: var(--space-lg); }
}

/* Sous 900 px, trois colonnes deviendraient trois bandes illisibles. */
@media (max-width: 900px) {
  .tarifs { padding: 80px 0; }
  .tarifs__title { font-size: 34px; }
  .offres {
    grid-template-columns: 1fr;
    max-width: 460px;
    gap: var(--space-xl);
  }
  .tarifs__cycle { margin-top: var(--space-lg); }
  /* En colonne unique, l'étiquette se recale à gauche pour ne pas flotter. */
  .offre__marque { right: auto; left: var(--space-lg); }
}

@media (max-width: 640px) {
  .tarifs { padding: 72px 0; }
  .tarifs__title { font-size: 30px; }
  .offre { padding: var(--space-lg); }
  .offre__marque { left: var(--space-lg); }
  .offre__montant { font-size: 36px; }
}

/* --------------------------------------------------------- Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================================
   Adaptatif : traversée des fonctionnalités et avis
   ========================================================================== */

/* Seuil à 900 px et non 1180 : à 1100 px, une largeur de fenêtre très
   courante sur portable, il reste 1037 px, largement de quoi tenir la colonne
   figée de 400 px et la pile. Au-dessus de ce seuil, la traversée doit vivre. */
@media (max-width: 900px) {
  /* Une seule colonne : figer l'intro mangerait l'écran, elle défile donc
     normalement. Les cartes, elles, gardent le collant et continuent de se
     poser les unes sur les autres, sous la barre de navigation. */
  .produits {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .produits__colonne { position: static; }
  .cards .card {
    min-height: 0;
    margin-bottom: var(--space-xl);
  }
  .cards .card:last-child { margin-bottom: 0; }

  /* 84 px : la barre fait 68 px et flotte à 8 px du haut. Le décalage passe
     de 14 à 10 px, le liseré de la carte précédente suffit à se voir. */
  .cards .card:nth-child(1) { top: 84px; }
  .cards .card:nth-child(2) { top: 94px; }
  .cards .card:nth-child(3) { top: 104px; }
  .cards .card:nth-child(4) { top: 114px; }
  .cards .card:nth-child(5) { top: 124px; }
  .cards .card:nth-child(6) { top: 134px; }

  .avis { padding: 88px 0 80px; }
  .avis__phare blockquote p { font-size: 40px; }
  .avis__cadre { margin-top: 56px; padding: var(--space-xl) 0; }
  .avis__nav { padding: 0 var(--space-xl) var(--space-lg); }
  .avis__piste { padding: 0 var(--space-xl); scroll-padding-inline: var(--space-xl); }
}

@media (max-width: 640px) {
  .produits { margin-top: 40px; gap: var(--space-xl); }
  .pas { margin-bottom: var(--space-lg); }
  .pas__point { width: 26px; height: 26px; }

  .avis { padding: 72px 0 64px; }
  .avis__phare blockquote p { font-size: 30px; }
  .avis__phare figcaption { margin-top: var(--space-lg); }
  .avis__cadre { padding: var(--space-lg) 0; }
  .avis__nav { padding: 0 var(--space-lg) var(--space-md); }
  .avis__piste { padding: 0 var(--space-lg); scroll-padding-inline: var(--space-lg); }
  .avis__carte {
    flex-basis: 78vw;
    min-height: 0;
    padding: var(--space-lg);
  }
}

/* Les orbites sont un mouvement d'ambiance : elles s'arrêtent si le visiteur
   demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .constellation__anneau,
  .constellation .banque { animation: none !important; }
}

/* ============================================================================
   Scènes des cartes de fonctionnalités
   Chaque visuel occupe la moitié droite de sa carte, à fond perdu. Les maquettes
   sont dessinées en CSS : ni image, ni capture d'écran à maintenir.
   ========================================================================== */

/* --------------------------------------------- 1 et 3. L'appareil en main */

/* Toute la composition tient sur une seule mesure : --tel-w, la largeur de
   l'appareil. Le châssis porte le rapport 9/19,5 d'un téléphone réel : c'est
   lui qui donne l'objet étroit et haut, là où la vignette précédente était
   presque carrée. L'écran est posé en retrait de 6 px à l'intérieur.

   La main est un seul dessin, rappelé deux fois par <use> : la paume derrière
   l'appareil, le pouce et les doigts devant. Elle est calée en pourcentages sur
   la largeur de l'appareil, jamais en pixels : le décalage de −28,13 % amène
   la ligne des doigts au tiers bas de l'écran quelle que soit la taille. */

.card__scene--appareil {
  --tel-w: 214px;
  align-items: center;
  justify-content: flex-end;
  padding: 26px 22px 0;
  overflow: hidden;
}

.appareil {
  position: relative;
  width: min(100%, var(--tel-w));
  margin: 0 auto -22px;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.card:hover .appareil { transform: translateY(-7px); }

/* Le sprite n'est là que pour ses <defs> : il ne doit rien peindre, mais
   display:none rendrait ses dégradés inutilisables. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.main {
  position: absolute;
  left: -50%;
  /* −17,35 % de la hauteur de l'appareil : c'est ce décalage qui amène la
     ligne des doigts à 88 % de l'écran et le pouce sur son coin bas. Il tient
     quelle que soit la largeur, les deux mesures étant proportionnelles. */
  bottom: -17.35%;
  z-index: 0;
  width: 200%;
  height: auto;
  pointer-events: none;
}
.main--doigts { z-index: 3; }
/* La seconde carte tient l'appareil de l'autre main : le dessin est simplement
   retourné, il n'y en a pas deux à maintenir. */
.appareil--miroir .main { transform: scaleX(-1); }

/* ---- Le châssis ---- */

.tel {
  --ilot-w: 56px;
  position: relative;
  z-index: 1;
  aspect-ratio: 9 / 19.5;
  border-radius: 34px;
  background: linear-gradient(158deg, #3d3670 0%, #1e1842 46%, #14102c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 2px 5px rgba(25, 20, 62, .30),
    0 20px 44px rgba(25, 20, 62, .32),
    0 46px 88px rgba(25, 20, 62, .24);
}

/* L'îlot du haut de l'appareil. Sa largeur (--ilot-w, posée sur .tel) est aussi celle que
   .tel__barre réserve au milieu de sa grille : les deux ne peuvent pas se décaler l'un de
   l'autre. */
.tel__ilot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: var(--ilot-w);
  height: 16px;
  border-radius: var(--radius-pill);
  background: #0c0920;
}

.tel__ecran {
  position: absolute;
  inset: 6px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
}

/* ---- Barre d'état (tous les téléphones du site) --------------------------------------------
   Trois colonnes : l'heure au milieu de l'oreille gauche, les jauges au milieu de la droite, et
   au centre une colonne qui réserve la place de l'îlot sans y toucher : la même variable --ilot-w
   que .tel__ilot (posée sur .tel, dont les deux héritent), pour que la réservation corresponde
   toujours à la vraie largeur de l'îlot. Une seule règle pour tous les téléphones, dessinés ou
   photographiés : avant, chaque carte avait sa propre version, un peu différente des autres (5G
   pas à la même taille, jauges chevauchant l'îlot sur la carte dark web faute de colonne
   réservée) — remarqué et corrigé le 2026-09-28. Les téléphones-photo, dont l'îlot est peint
   dans la photo et mesure un peu plus (pas de vraie .tel__ilot à accorder), gardent leur propre
   grille asymétrique (voir #surveillance plus bas). */
.tel__barre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ilot-w, 56px) minmax(0, 1fr);
  align-items: center;
  height: 32px;
  padding: 0 9px;
  color: var(--brand-1);
}
.tel__heure {
  justify-self: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
.tel__jauges {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  height: 12px;
}
.tel__jauges .jauge,
.tel__jauges svg { display: block; flex: 0 0 auto; }
.jauge--reseau { width: 14px; height: 9.5px; margin-bottom: 0; }
.jauge--5g { font-size: 8.2px; font-weight: 700; letter-spacing: -.1px; line-height: 1; }
.jauge--batterie { width: 20.5px; height: 10px; }

/* ---- Cadre iPhone des téléphones dessinés (carte Dark Web, carte SIM) ----------------------------------
   Le châssis dégradé + îlot dessiné est remplacé par un cadre d'iPhone en SVG (assets/img/cadre-iphone.svg :
   corps noir, liseré métallique violet, boutons latéraux, îlot et caméra, écran évidé). Vectoriel donc net à toute
   taille ; ses proportions reprennent celles d'un iPhone 14 Pro violet, au format 9 / 19,5 de .tel. Il est posé
   PAR-DESSUS l'écran, qui reste le même élément avec le même contenu : seul le contour change. Les marges de
   l'écran et le rayon de ses coins sont ceux du dessin, en pourcentages : ils suivent la largeur.
   Les téléphones-photo (.tel--photo, dans la main) ne sont pas concernés. */
.appareil .tel:not(.tel--photo) {
  /* L'îlot du dessin fait 28,3 % de la largeur du téléphone, soit 31,8 % de celle de l'écran. */
  --ilot-w: 31.8%;
  border-radius: 15.5% / 7.2%;
  background: none;
  box-shadow:
    0 2px 5px rgba(25, 20, 62, .30),
    0 20px 44px rgba(25, 20, 62, .32),
    0 46px 88px rgba(25, 20, 62, .24);
}
.appareil .tel:not(.tel--photo)::after {
  content: "";
  position: absolute;
  /* 0,894 % = les 6 unités de dessin dont dépassent les boutons latéraux : le corps noir recouvre exactement la boîte,
     sans liseré clair entre lui et l'ombre portée. */
  inset: 0 -0.894%;
  z-index: 3;
  background: url("../assets/img/cadre-iphone.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.appareil .tel:not(.tel--photo) .tel__ilot { display: none; }
.appareil .tel:not(.tel--photo) .tel__ecran {
  /* déborde de 0,4 % sous le cadre noir (fenêtre : 1,79 % / 4,32 %) : pas de fente claire au raccord */
  inset: 1.4% 3.9%;
  border-radius: 12% / 5.2%;
}
/* La barre d'état se centre sur l'îlot du dessin (centre à 13 px sous le haut de l'écran). */
.appareil .tel:not(.tel--photo) .tel__barre { height: 26px; padding: 0 4px; }
/* L'écran est un peu plus étroit que celui du châssis dessiné : les jauges se resserrent pour ne pas toucher l'îlot. */
.appareil .tel:not(.tel--photo) .tel__jauges { gap: 3px; margin-right: 5px; }   /* décalées vers la gauche : la batterie ne frôle plus le coin arrondi */
/* Le téléphone rétrécit sous 640 px : le décalage se réduit pour que les jauges ne touchent pas l'îlot (mesuré 2,6 px à 195 px de large). */
@media (max-width: 640px) {
  .appareil .tel:not(.tel--photo) .tel__jauges { margin-right: 3px; }
}

/* ---- L'écran d'application ---- */

.vue {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 15px 15px;
}

.vue__legende {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--divider-soft);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}

.vue__actions {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 6px;
}
.vue__bouton {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
}
.vue__bouton--plein {
  background: var(--action);
  color: var(--on-action);
  box-shadow: none;
}

/* ---- Écran 1 : l'alerte, et l'écart mis à l'échelle ---- */

.vue__eyebrow {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-critique);
}

.vue__titre {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.35px;
  color: var(--brand-1);
}

.vue__sous {
  margin-top: 5px;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ink-muted-48);
}

/* L'opération signalée : une ligne de relevé (icône d'avertissement, montant, trajet), et « × 8 » à droite. Le rouge ne sert qu'à l'icône. */
.vue__op {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--divider-soft);
}
.vue__op-icone {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--signal-critique-tint, #fdeef2);
  color: var(--signal-critique);
}
.vue__op-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vue__op-texte b {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--brand-1);
}
.vue__op-texte span { font-size: 9px; line-height: 1.3; white-space: nowrap; color: var(--ink-muted-48); }
.vue__op-fois {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-3);
}
.vue__sous--op { margin-top: 8px; }

/* Deux barres à la même échelle : l'écart se voit avant d'être lu. */
.ecart {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ecart__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 8.5px;
  line-height: 1.3;
  color: var(--ink-muted-48);
}
.ecart__ligne + .ecart__piste { margin-bottom: 5px; }
.ecart__ligne b {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ecart__ligne .ecart__fort { color: var(--brand-3); }

.ecart__piste {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
}
.ecart__barre {
  display: block;
  width: var(--part, 100%);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-6);
  transform-origin: left center;
}
.ecart__barre--fort {
  background: var(--brand-3);
}

.signaux {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.signaux li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--ink-muted-48);
}
.signaux .puce { margin-top: 3px; }
.signaux b {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  color: var(--ink);
}

/* ---- Écran 2 : le score de vigilance ---- */

.vue__tete {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vue__titre-sm {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.25px;
  color: var(--brand-1);
}
.vue__periode {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-pearl);
  box-shadow: inset 0 0 0 1px var(--divider-soft);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ink-muted-48);
}

.cadran {
  position: relative;
  width: 118px;
  margin: 14px auto 0;
}
.cadran__svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}
.cadran__piste {
  fill: none;
  stroke: var(--action-tint);
  stroke-width: 9;
}
.cadran__arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  /* 2πr = 345,58 ; 78 sur 100 en couvrent 269,55, soit 76,03 de retrait. */
  stroke-dasharray: 345.58;
  stroke-dashoffset: 76.03;
}
.cadran__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cadran__valeur {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--brand-1);
}
.cadran__sur {
  font-size: 8px;
  letter-spacing: .04em;
  color: var(--ink-muted-48);
}

.vue__etat {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.15px;
  color: var(--signal-sur);
}
.vue__delta {
  margin-top: 4px;
  text-align: center;
  font-size: 8.5px;
  line-height: 1.4;
  color: var(--ink-muted-48);
}
.vue__fleche {
  margin-right: 2px;
  font-size: 7px;
  color: var(--signal-vigilance);
}

.facteurs {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.facteurs li {
  display: grid;
  grid-template-columns: 1fr 44px 17px;
  align-items: center;
  gap: 8px;
}
.facteurs__nom {
  font-size: 8.5px;
  line-height: 1.3;
  color: var(--ink-muted-80);
}
.facteurs__piste {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--action-tint);
}
.facteurs__barre {
  display: block;
  width: var(--part, 100%);
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--action);
  transform-origin: left center;
}
.facteurs__barre--sur { background: var(--signal-sur); }
.facteurs__barre--vigilance { background: var(--signal-vigilance); }
.facteurs__note {
  font-size: 9.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---- Écran « Score de vigilance » : la carte du bandeau de l'application (cadran à graduations sur
        fond de marque, courbe du comportement), puis les indicateurs comparés aux habitudes ---- */
.vigcarte {
  flex: none;
  --arc: #e6e2fb;
  margin-top: 6px;
  padding: 8px 10px 0;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  justify-items: center;
  color: var(--on-dark);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(150, 140, 230, .5), rgba(150, 140, 230, 0) 62%),
    radial-gradient(rgba(255, 255, 255, .14) .6px, transparent 1px) 0 0 / 9px 9px,
    var(--brand-gradient-diag);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.vigcarte[data-etat="elevee"] {
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(30, 166, 124, .5), rgba(30, 166, 124, 0) 62%),
    radial-gradient(rgba(255, 255, 255, .14) .6px, transparent 1px) 0 0 / 9px 9px,
    var(--brand-gradient-diag);
}
.vigcarte[data-etat="elevee"] .vigcarte__puce { background: #7ff0c9; box-shadow: 0 0 0 2.5px rgba(127, 240, 201, .26); }
.vigcarte[data-etat="elevee"] .vigcarte__delta span { color: #9ff0d0; }
/* Pas de lueur (filter: drop-shadow) sur l'anneau : un filtre SVG qui change, dans un écran projeté en 3D, faisait planter Safari sur iPhone. */
.cadran--sombre { width: 86px; margin: 0; }
.cadran--sombre .cadran__graduations { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 5; stroke-dasharray: 1.3 5.19; }
.cadran--sombre .cadran__piste { stroke: rgba(255, 255, 255, .16); stroke-width: 8; }
.cadran--sombre .cadran__arc { stroke-width: 8; stroke-dasharray: 326.73; stroke-dashoffset: 42.48; }
.cadran--sombre .cadran__valeur { font-size: 28px; color: #fff; letter-spacing: -1px; }
.cadran--sombre .cadran__sur { font-size: 7px; color: rgba(255, 255, 255, .72); }
.vigcarte__etat {
  margin: 6px 0 0;
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: -.15px;
}
.vigcarte__puce { width: 6px; height: 6px; border-radius: 50%; background: #e6e2fb; box-shadow: 0 0 0 2.5px rgba(230, 226, 251, .25); }
.vigcarte__delta { margin: 2px 0 0; font-size: 8px; color: rgba(255, 255, 255, .78); }
.vigcarte__delta span { font-size: 6px; color: #ffd698; }
.vigcarte__courbe { display: block; width: calc(100% + 20px); height: 24px; margin: 4px -10px 0; }
.vigcarte__aire { fill: rgba(255, 255, 255, .16); }
.vigcarte__trait { fill: none; stroke: #e6e2fb; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Les indicateurs : de petites cartes (icône teintée, nom, barre, points), comme la console de la page. */
.vigliste__tete { margin-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.vigliste__titre { margin: 0; font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted-48); }
.vigliste__total { margin: 0; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: -.3px; color: var(--brand-1); font-variant-numeric: tabular-nums; }
.vigliste__total small { font-family: var(--font-body, inherit); font-size: 7px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted-48); }
.vigliste { margin: 4px 0 0; gap: 3px; }
.vigliste .vigl {
  --couleur: var(--signal-neutre);
  grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  padding: 4px 7px 4px 6px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(94, 83, 152, .14);
  box-shadow: 0 5px 9px -7px rgba(66, 55, 122, .55);
}
.vigliste .vigl[data-etat="sur"] { --couleur: var(--signal-sur); }
.vigliste .vigl[data-etat="vigilance"] { --couleur: var(--signal-vigilance); }
.vigliste .vigl[data-etat="critique"] { --couleur: var(--signal-critique); }
.vigl__icone { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: var(--couleur); background: color-mix(in srgb, var(--couleur) 13%, #fff); }
.vigl__corps { display: grid; gap: 3px; min-width: 0; }
.vigl__nom { font-size: 8px; font-weight: 600; line-height: 1.1; color: var(--brand-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vigliste .facteurs__piste { height: 3px; }
.vigl__pts { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: -.3px; color: var(--brand-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vigl__pts small { font-family: var(--font-body, inherit); font-size: 6.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted-48); }

.vue__pied {
  margin-top: auto;
  padding-top: 12px;
  font-size: 7.5px;
  line-height: 1.5;
  color: var(--ink-muted-48);
}

/* ---- La bannière de notification ---- */
/* Elle déborde à gauche de l'appareil : c'est ce débord qui la fait lire comme
   une bannière du système, posée par-dessus, et non comme un bloc de l'écran. */

.notif {
  position: absolute;
  z-index: 4;
  top: 36px;
  /* Décalée plus loin sur la gauche : elle déborde franchement de l'appareil,
     comme une bannière système qui arrive par-dessus l'écran. */
  left: -46%;
  width: 112%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow:
    0 2px 6px rgba(66, 55, 122, .16),
    0 18px 36px rgba(115, 111, 182, .30);
}

.notif__marque {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient-diag);
}
.notif__marque img { width: 18px; height: 18px; }
.notif__corps { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
/* Comme une bannière iPhone : une ligne d'en-tête (le type d'alerte, l'heure), puis la phrase. */
.notif__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  line-height: 1.2;
}
.notif__alerte {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-critique);
}
.notif__alerte .puce { width: 5px; height: 5px; margin: 0; }
.notif__heure { color: var(--ink-muted-48); }
.notif__titre {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.15px;
  color: var(--ink);
}

/* ------------------------------------------- 2 et 6. Panneau de données */

.panneau {
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow:
    0 1px 2px rgba(66, 55, 122, .08),
    0 14px 34px rgba(115, 111, 182, .18);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panneau__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.panneau__titre {
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
}
.panneau__meta {
  font-size: var(--text-micro-size);
  color: var(--ink-muted-48);
}

.panneau__note {
  font-size: var(--text-micro-size);
  line-height: 1.45;
  color: var(--ink-muted-48);
}
.panneau__note strong { font-weight: 600; color: var(--ink); }

/* Les deux chiffres clés, posés au-dessus de la courbe. */
.panneau__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-bloc {
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--surface-pearl);
  box-shadow: inset 0 0 0 1px var(--divider-soft);
}
.stat-bloc__label {
  display: block;
  font-size: var(--text-micro-size);
  line-height: 1.3;
  color: var(--ink-muted-48);
}
.stat-bloc__valeur {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.4px;
  color: var(--brand-1);
}
.stat-bloc--alerte .stat-bloc__valeur { color: var(--signal-vigilance); }

.courbe-bloc { position: relative; }
.courbe {
  display: block;
  width: 100%;
  height: 118px;
  overflow: visible;
}
/* Pas de non-scaling-stroke : le pointillé du tracé serait alors calculé en
   pixels écran alors que --trace vient de getTotalLength(), en unités du
   viewBox. La courbe s'arrêtait avant la fin. L'échelle est de 0,9 sur les deux
   axes, l'épaisseur reste régulière sans cette propriété. */
.courbe__trait {
  fill: none;
  stroke: var(--action);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.courbe__pointeur {
  position: absolute;
  right: 0;
  top: 14%;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--signal-vigilance);
  box-shadow: 0 0 0 4px var(--canvas), 0 0 0 6px rgba(176, 112, 11, .22);
}
.courbe__axe {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: var(--text-micro-size);
  color: var(--ink-muted-48);
}

/* --------------------------------------------- 5. Le relevé du bien */

/* Le relevé est posé sur l'image, pas dans une colonne à fond : la scène de
   droite n'a donc pas de fond propre. */
.card__scene--releve {
  background: none;
  align-items: center;
  justify-content: center;
  padding: 30px 30px 30px 4px;
}

.bien {
  width: 100%;
  max-width: 316px;
  padding: 17px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .93);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .8),
    0 2px 6px rgba(66, 55, 122, .12),
    0 22px 52px rgba(66, 55, 122, .24);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.card--media:hover .bien { transform: translateY(-7px); }

.bien__tete {
  display: flex;
  align-items: center;
  gap: 11px;
}
.bien__vignette {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action-tint);
  color: var(--action);
}
.bien__ident { min-width: 0; }
.bien__ident b {
  display: block;
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
}
.bien__ident i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: var(--text-micro-size);
  line-height: 1.4;
  color: var(--ink-muted-48);
}

.bien__legende {
  margin-top: 15px;
  padding-top: 11px;
  border-top: 1px solid var(--divider-soft);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}

/* Les jalons se lisent du plus récent au plus ancien, reliés par un fil. */
.jalons {
  position: relative;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.jalons::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}
.jalons__item {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.jalons__marque {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--brand-6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95);
}
.jalons__item--neuf .jalons__marque { background: var(--signal-critique); }

.jalons__mot b {
  display: block;
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
}
.jalons__mot i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: var(--text-micro-size);
  color: var(--ink-muted-48);
}
.jalons__item--neuf .jalons__mot b { color: var(--brand-1); }

.bien__pied {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--divider-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-micro-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
}
.bien__pied .puce { margin-top: 4px; }

/* --------------------------------------------- 4. Le panneau d'alerte */

.alerte {
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow:
    0 1px 2px rgba(66, 55, 122, .08),
    0 16px 38px rgba(115, 111, 182, .20);
  overflow: hidden;
}

/* Posé directement dans l'écran du téléphone (carte dark web) : l'écran porte déjà le fond et
   l'arrondi, .alerte n'a plus besoin des siens. */
.alerte--ecran {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* Le contenu est plus court que la hauteur de l'ecran (le format court demande par le client
     n'a plus de section repliable) : centre verticalement dans l'espace laisse par la barre
     d'etat plutot que de rester colle en haut avec un grand vide en dessous. */
  margin-top: auto;
  margin-bottom: auto;
}
/* .alerte a été dessinée pour flotter, seule, sur une largeur de 300 à 340 px : posée dans
   l'écran d'un téléphone (202 px), ses tailles d'origine faisaient déborder le bas de l'écran
   et passer les boutons à la ligne. On la ramène à l'échelle des autres écrans de téléphone
   (.vue__titre 15px, .vue__bouton 9.5px, etc.). */
.alerte--ecran .alerte__entete { padding: 11px 14px; }
.alerte--ecran .alerte__logo { width: 26px; height: 26px; }
.alerte--ecran .alerte__source-mot b { font-size: 11px; }
.alerte--ecran .alerte__source-mot i { font-size: 8.5px; }
.alerte--ecran .alerte__titre { margin-top: 12px; font-size: 15px; line-height: 1.24; }
.alerte--ecran .alerte__actions { margin: 14px 14px 14px; gap: 6px; }
.alerte--ecran .alerte__bouton { padding: 7px 6px; font-size: 8.8px; white-space: nowrap; }

/* Ce qui est potentiellement exposé : un simple libellé et sa valeur, plutôt que le détail
   dépliable (site / e-mail / mot de passe) qui n'a plus de sens pour une fuite de cette nature. */
.alerte__legende {
  margin: 14px 14px 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}
.alerte__tags {
  margin: 4px 14px 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.sans-coupure { white-space: nowrap; }

/* ---- La veille en direct (carte dark web) : même sonar que la page Sentinelle Dark Web de
   l'application (fuites.css) — disque, balayage qui tourne, ondes, points qui s'allument au
   passage du balayage, pastille « en direct » —, à l'échelle d'un écran de téléphone. La teinte
   suit l'état (data-etat), comme là-bas : rouge tant qu'une fuite est trouvée. */
.radar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  margin: 6px 10px 0;
  padding: 9px 11px 10px;
  border-radius: 14px;
  color: var(--on-dark);
  background: var(--brand-gradient-diag);
}
.radar[data-etat="critique"] { background: radial-gradient(95% 190% at 8% 0%, rgba(210, 38, 79, .62) 0%, transparent 70%), var(--brand-gradient-diag); }
.radar[data-etat="vigilance"] { background: radial-gradient(95% 190% at 8% 0%, rgba(176, 112, 11, .62) 0%, transparent 70%), var(--brand-gradient-diag); }
.radar[data-etat="sur"] { background: radial-gradient(90% 180% at 8% 0%, rgba(18, 135, 111, .42) 0%, transparent 66%), var(--brand-gradient-diag); }
.radar__disque {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}
.radar__balayage {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, .42) 0deg, transparent 55deg, transparent 360deg);
  mix-blend-mode: screen;
  animation: radar-tour 4.5s linear infinite;
}
@keyframes radar-tour { to { transform: rotate(360deg); } }
.radar__onde {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  opacity: .5;
  animation: radar-onde 3.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -1.4s);
}
@keyframes radar-onde {
  from { transform: scale(.7); opacity: .55; }
  to   { transform: scale(1.4); opacity: 0; }
}
.radar__icone { position: relative; z-index: 1; }
/* Le point qu'on vient de trouver : il s'allume quand le balayage passe (en haut à droite, à
   45°, donc 1/8 de tour après le départ) puis s'éteint doucement. */
.radar__blip {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff9db3;
  box-shadow: 0 0 6px 1px rgba(255, 157, 179, .9);
  opacity: 0;
  animation: radar-blip 4.5s linear .56s infinite;
}
@keyframes radar-blip {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: .55; }
  55%  { opacity: .15; }
  85%, 100% { opacity: 0; }
}
.radar__mot { min-width: 0; }
.radar__titre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--on-dark);
  text-wrap: balance;
}
.radar__direct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
  font-size: 7.4px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.radar__point {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7ee0c4;
  animation: radar-point 1.8s ease-in-out infinite;
}
@keyframes radar-point { 50% { opacity: .35; } }
.radar__adresse {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-size: 7.8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radar__etat {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff9db3;
}
@media (prefers-reduced-motion: reduce) {
  .radar__balayage, .radar__onde, .radar__point { animation: none; }
  .radar__blip { animation: none; opacity: 1; }
}

/* En-tête « source » : le logo de la fuite plutôt qu'un simple libellé (même padding que
   .alerte__entete : la règle vient après elle dans la feuille, elle n'a pas besoin de le répéter). */
.alerte__source { display: flex; align-items: center; gap: 10px; min-width: 0; }
.alerte__logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(9, 6, 28, .10);
}
.alerte__source-mot { min-width: 0; }
.alerte__source-mot b {
  display: block;
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alerte__source-mot i {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: var(--text-micro-size);
  color: var(--ink-muted-48);
}

.alerte__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--divider-soft);
}
.alerte__label {
  font-size: var(--text-micro-size);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
}
.alerte__fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-muted-48);
}

.alerte__titre {
  margin: 16px 16px 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: var(--brand-1);
}
.alerte__texte {
  margin: 8px 16px 0;
  font-size: var(--text-micro-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
}

.alerte__actions {
  margin: 14px 16px 16px;
  display: flex;
  gap: 8px;
}
.alerte__bouton {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action-tint-strong);
  transition: background var(--dur-fast) var(--ease-standard);
}
.alerte__bouton--plein {
  background: var(--action);
  color: var(--on-action);
  box-shadow: none;
}
.card:hover .alerte__bouton--plein { background: var(--action-focus); }

.alerte__details {
  border-top: 1px solid var(--divider-soft);
  background: var(--surface-pearl);
}
.alerte__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
}
.alerte__section svg { color: var(--ink-muted-48); }

.alerte__champs { margin: 0; padding: 0 16px 14px; }
.alerte__champs > div {
  padding: 9px 0;
  border-top: 1px solid var(--divider-soft);
}
.alerte__champs dt {
  font-size: var(--text-micro-size);
  color: var(--ink-muted-48);
}
.alerte__champs dd {
  margin: 3px 0 0;
  font-size: var(--text-fine-size);
  font-weight: 600;
  letter-spacing: var(--text-fine-ls);
  color: var(--ink);
}

/* ---- Carte dark web : le châssis dessiné, sans main (aucune photo à détourer ici, juste
   l'écran) ; --tel-w et sa chaîne responsive viennent de .card__scene--appareil, partagée avec
   les autres téléphones du site. */
#patrimoine .card__scene--appareil {
  padding: 28px 22px;
  justify-content: center;
}
#patrimoine .card__scene--appareil .appareil { margin-bottom: 0; }
/* La barre d'état est désormais partagée avec tous les téléphones (voir .tel__barre) : ce
   téléphone dessiné utilise directement sa valeur par défaut (--ilot-w: 56px, la largeur réelle
   de .tel__ilot), rien à ajouter ici. */

/* ============================================================================
   Adaptatif : sections ScamDetect et Sécurité
   ========================================================================== */

@media (max-width: 1180px) {
  .scam {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mot" "scene" "temps";
    column-gap: 0;
    row-gap: 56px;
    padding: 96px 40px;
  }
  .scam__mot { max-width: 720px; }
  .scam__scene { justify-content: flex-start; }
  .scam__pile { max-width: 560px; }

  .securite { padding: 96px 0; }
  .securite__entete { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .securite__entete .eyebrow { grid-column: 1; grid-row: 1; }
  .securite__title { grid-column: 1; grid-row: 2; }
  .securite__lede {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--space-xs);
    padding-bottom: 0;
    max-width: 70ch;
  }
}

@media (max-width: 900px) {
  .scam { padding: 80px 32px; }
  .scam__title { font-size: 34px; }
  .scam__lede { font-size: 18px; }
  .verdict { margin-top: -64px; }

  .securite { padding: 80px 0; }
  .securite__title { font-size: 34px; }
  .garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garantie { padding: var(--space-lg); }
}

/* Trois colonnes de 190 px couperaient chaque temps sur quatre lignes : la
   bande se met en pile, le numéro reste en tête. */
@media (max-width: 720px) {
  .parcours {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }
  .parcours__num { font-size: 26px; }
}

@media (max-width: 640px) {
  .scam { padding: 72px 24px; row-gap: 40px; }
  .scam__title { font-size: 30px; }
  .scam__lede { font-size: 17px; }
  .fil { width: 100%; padding: 15px; }
  .bulle { max-width: 100%; }
  /* Sous 640 px, le verdict cesse de chevaucher le fil : superposés, les deux
     blocs ne laisseraient plus assez de message visible pour comprendre. */
  .verdict {
    width: 100%;
    margin: var(--space-lg) 0 0;
    padding: 18px;
  }
  .verdict__titre { font-size: 20px; }

  .securite { padding: 72px 0; }
  .securite__title { font-size: 30px; }
  .garanties { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Adaptatif des scènes de cartes
   ========================================================================== */

/* L'appareil se resserre avec la carte : --tel-w est la seule mesure à bouger,
   la main et l'écran suivent puisqu'ils sont calés dessus. */
@media (max-width: 1180px) {
  .card__scene--appareil { --tel-w: 222px; }
}

@media (max-width: 900px) {
  .card__scene--appareil { --tel-w: 208px; }
}

/* La pile passe en colonne unique : les deux colonnes de la carte tiennent
   bien plus bas. */
@media (max-width: 760px) {
  .cards .card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .card__mot { padding: 26px 26px 0; gap: 13px; }
  .card__scene { padding: 26px; }
  .card__scene--appareil { padding: 30px 26px 0; }

  /* Une carte figée plus haute que l'écran garde toujours un bout hors de
     vue : on resserre les blancs plutôt que de retirer du texte. La plus
     longue, l'immobilier, repasse ainsi sous la hauteur d'un téléphone. */
  .veille { gap: 8px; }
  .bien { padding: 13px; }
  .jalons { margin-top: 8px; gap: 9px; }
  .bien__legende { margin-top: 10px; padding-top: 8px; }
  .bien__pied { margin-top: 10px; padding-top: 9px; }

  /* En colonne unique, le voile horizontal de la carte média ne protège plus
     rien : il est redressé pour couvrir le texte, qui est passé au-dessus. */
  .card__voile {
    background: linear-gradient(180deg,
      rgba(252, 252, 254, .975) 0%,
      rgba(250, 249, 254, .96) 42%,
      rgba(242, 240, 252, .78) 62%,
      rgba(233, 230, 249, .48) 82%,
      rgba(228, 225, 248, .42) 100%);
  }
  .card__scene--releve { padding: 6px 26px 26px; }
  .bien { max-width: none; }
}

@media (max-width: 640px) {
  .card__mot { padding: 20px 20px 0; }
  .card__scene { padding: 20px; }
  .card__scene--appareil { --tel-w: 198px; padding: 26px 20px 0; }
  .card__scene--releve { padding: 4px 20px 18px; }
  .bien { padding: 14px; }
  .panneau { padding: 16px; }
  .panneau__stats { grid-template-columns: 1fr; }
}

/* Sous 380 px, la bannière déborderait de la carte : elle se recale sur
   l'appareil plutôt que de se faire couper. */
@media (max-width: 380px) {
  .card__scene--appareil { --tel-w: 182px; }
  .notif { left: -22%; width: 116%; padding: 8px 10px; }
  .notif__titre { font-size: 10px; }
  /* Au plus petit gabarit, l'îlot dessiné (56 px, fixe) mangeait une trop grosse part de l'écran
     (170 px) : les jauges n'avaient plus la place et chevauchaient l'îlot (mesuré : le réseau
     disparaissait presque entièrement dessous). On réduit l'îlot et les jauges ensemble. */
  .tel { --ilot-w: 44px; }
  /* Même raison : sur ces écrans de 169 × 380 px, la veille en direct ajoutée à la carte dark web
     faisait déborder le bas de quelques pixels (mesuré : 9). On resserre le tout. */
  .radar { margin-top: 2px; padding: 7px 9px 8px; gap: 6px 8px; }
  .radar__disque { width: 32px; height: 32px; }
  .radar__blip { top: 4px; right: 4px; }
  .radar__adresse { font-size: 7.4px; letter-spacing: -.1px; gap: 4px; padding: 5px 5px; }
  .alerte--ecran .alerte__entete { padding: 8px 14px; }
  .alerte--ecran .alerte__titre { margin-top: 9px; font-size: 13.5px; }
  .alerte__legende { margin-top: 10px; }
  .alerte--ecran .alerte__actions { margin: 10px 14px 12px; }
  .tel__barre { padding: 0 8px; }
  .tel__jauges { gap: 2.5px; }
  .jauge--reseau { width: 12px; height: 8.2px; }
  .jauge--5g { font-size: 7.4px; }
  .jauge--batterie { width: 18px; height: 8.8px; }
}

/* ============================================================================
   Seconde traversée : le patrimoine
   Même mécanique que la première, sur un fond clair : deux thématiques
   distinctes, deux respirations.
   ========================================================================== */

.presentation--clair {
  /* Un gris doux, un peu plus soutenu que le parchemin du reste de la page. */
  background: linear-gradient(180deg, #ebebef 0%, #e3e3e9 100%);
  padding-top: 104px;
}
.presentation--clair .presentation__title,
.presentation--clair .presentation__lede { color: var(--ink); }
.presentation--clair .presentation__lede { color: var(--ink-muted-80); }
.presentation--clair .eyebrow { color: var(--action-focus); }

/* Le compteur s'inverse : cercles sombres sur fond clair. */
.presentation--clair .pas__point {
  color: var(--ink-muted-48);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.presentation--clair .pas__point.is-active {
  background: var(--brand-1);
  color: var(--on-dark);
  box-shadow: none;
}

/* Sur parchemin, la carte blanche a besoin d'un filet plutôt que d'une ombre
   portée profonde, calibrée pour l'indigo. */
.presentation--clair .cards .card {
  box-shadow:
    0 -12px 26px -14px rgba(25, 20, 62, .30),   /* l'ombre que la carte projette sur celle qu'elle recouvre */
    0 1px 2px rgba(66, 55, 122, .06),
    0 18px 40px -28px rgba(25, 20, 62, .40);
}

/* ---- Carte qui renvoie vers une page ---- */

.card--lien .card__mot { justify-content: flex-start; gap: var(--space-md); }
.card--lien .card__mot .btn { margin-top: auto; align-self: flex-start; }

/* ---- ScamDetect : le fil + le verdict, comme sur le hero de sa page --------------------------
   Les classes (fil, bulle, verdict, verdict__niveau, verdict__raisons, verdict__gestes,
   verdict__legende) sont celles du hero de scamdetect.html : le rendu de base vient donc
   gratuitement, et une amélioration de l'un profite à l'autre. Tout ce qui est propre à la
   vignette (plus petite, sans le décor sombre de la section) est scopé sous .card__scene--scam,
   pour ne jamais modifier le hero. */

.card__scene--scam .scam-demo {
  position: relative;
  width: 100%;
  max-width: 288px;
  margin: 0 auto;
}

/* Le chip qui déborde en haut : la vitesse de réponse, en un coup d'œil (même motif que
   .graph__signal sur la carte des prélèvements). */
.scam-demo__signal {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--brand-1);
  box-shadow: 0 14px 26px -12px rgba(25, 20, 62, .7);
}
.scam-demo__signal svg { color: var(--action-on-dark); }

/* Le SMS reçu : une carte sombre, comme sur le hero. Elle reste au second plan : c'est le
   verdict qui grimpe par-dessus son coin bas-droit. */
.card__scene--scam .fil {
  width: 100%;
  padding: 15px 16px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #2c2461 0%, #140f31 100%);
  box-shadow: 0 22px 40px -20px rgba(20, 15, 49, .55);
}
.card__scene--scam .fil__entete { padding-bottom: 11px; gap: 9px; }
.card__scene--scam .fil__avatar { width: 27px; height: 27px; font-size: 12.5px; }
.card__scene--scam .fil__ident b { font-size: 11.5px; }
.card__scene--scam .fil__ident i { margin-top: 1px; font-size: 10px; }
.card__scene--scam .bulle { margin-top: 8px; padding: 9px 12px; font-size: 11.5px; line-height: 1.42; }

/* Le verdict grimpe sur le coin bas du fil, comme sur le hero, mais de peu (14 px, à
   l'intérieur du padding bas du fil) : à cette taille, un débord aussi large que sur le hero
   aurait mangé la fin du dernier message plutôt que son seul padding. */
.card__scene--scam .verdict {
  width: calc(100% - 22px);
  margin: -14px 0 0 auto;
  padding: 17px 18px 18px;
  box-shadow:
    0 2px 6px rgba(66, 55, 122, .10),
    0 28px 48px -18px rgba(25, 20, 62, .40);
}
.card__scene--scam .verdict__niveau {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  font-size: 9.5px;
}
.card__scene--scam .verdict__titre { margin-top: 10px; font-size: 17px; }
.card__scene--scam .verdict__raisons { margin-top: 12px; gap: 7px; }
.card__scene--scam .verdict__raisons li { font-size: 11.5px; line-height: 1.4; }
.card__scene--scam .verdict__legende { margin-top: 13px; padding-top: 11px; font-size: 9.5px; }
.card__scene--scam .verdict__gestes { margin-top: 9px; gap: 7px; }
.card__scene--scam .verdict__gestes li { font-size: 11.5px; line-height: 1.4; }

/* Entrée : le SMS arrive, ses bulles s'affichent l'une après l'autre, puis le verdict grimpe
   par-dessus et ses lignes s'allument à leur tour. Les états masqués de .bulle, .verdict et
   .verdict__raisons/__gestes li sont déjà posés plus haut pour le hero (.js-anim .bulle, etc.) :
   on ne pose ici que leur révélation, rattachée à .scam-demo — le panneau qui porte data-anim
   dans la vignette, puisqu'elle n'a pas de .scam__pile comme sur le hero. */
.js-anim .card__scene--scam .fil { opacity: 0; transform: translate3d(0, 14px, 0); }
.js-anim .scam-demo.is-animated .fil {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms var(--ease-standard) 60ms,
    transform 600ms var(--ease-standard) 60ms;
}
.js-anim .scam-demo.is-animated .bulle {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms var(--ease-standard) calc(var(--ordre, 0) * 190ms + 280ms),
    transform 540ms var(--ease-standard) calc(var(--ordre, 0) * 190ms + 280ms);
}
.js-anim .scam-demo.is-animated .verdict {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease-standard) 640ms,
    transform 760ms var(--ease-standard) 640ms;
}
.js-anim .scam-demo.is-animated .verdict__raisons li,
.js-anim .scam-demo.is-animated .verdict__gestes li {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 1080ms),
    transform 460ms var(--ease-standard) calc(var(--ordre, 0) * 130ms + 1080ms);
}
.js-anim .scam-demo__signal { opacity: 0; transform: translateY(-8px) scale(.92); }
.js-anim .scam-demo.is-animated .scam-demo__signal {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms var(--ease-standard) 1500ms,
    transform 520ms cubic-bezier(.3, 1.5, .5, 1) 1500ms;
}

@media (max-width: 900px) {
  .presentation--clair { padding-top: 80px; }
}

/* ============================================================================
   Page ScamDetect : les vérifications
   ========================================================================== */

.fonctions {
  background: var(--canvas-parchment);
  /* Memes marges lateales que .scam, pour que les deux blocs s'alignent. */
  padding: 104px 80px 112px;
}

.fonctions__entete {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.fonctions__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: balance;
}

.fonctions__lede {
  margin-top: 18px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}

.fonctions__liste {
  margin: 64px auto 0;
  padding: 0;
  max-width: var(--container-wide);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter-grid);
}

.fonction {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}
.fonction:hover {
  border-color: var(--action);
  transform: translateY(-2px);
}

.fonction__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--action-tint);
  color: var(--action-focus);
}

.fonction__titre {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  letter-spacing: var(--text-body-strong-ls);
  color: var(--brand-1);
}

.fonction__texte {
  margin-top: 9px;
  font-size: var(--text-caption-size);
  line-height: 1.62;
  letter-spacing: var(--text-caption-ls);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}

@media (max-width: 1000px) {
  .fonctions { padding-inline: 40px; }
  .fonctions__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fonctions { padding: 80px 24px 88px; }
  .fonctions__title { font-size: 30px; }
  .fonctions__liste { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .fonction { padding: var(--space-lg); }
}

/* ============================================================================
   « SentinelleFin veille sur son argent » : refonte des visuels
   1. le fond des scenes (halo, anneaux de veille) ;
   2. le telephone tenu en main (photo detouree, ecran vivant derriere) ;
   3. le graphique des prelevements (barres empilees, prelevement inconnu en ambre).
   Ecrit en fin de feuille et sous #surveillance : ces regles l'emportent sur les
   anciennes, qui restent valables pour les autres sections.
   ========================================================================== */

/* ---- 1. Le fond des scenes ---------------------------------------------- */

#surveillance .card__scene {
  background:
    radial-gradient(64% 58% at 50% 42%, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(165deg, #f0edfd 0%, #dfdaf8 54%, #cdc6f1 100%);
}
/* Des anneaux concentriques, comme un radar : ils disent « veille » sans un mot, et
   s'effacent vers les bords pour ne jamais concurrencer le contenu. */
#surveillance .card__scene::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 66px, rgba(94, 83, 152, .17) 66px 67.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 70%);
}
/* Une trame de points, au coin haut-droit seulement. */
#surveillance .card__scene::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 46%;
  pointer-events: none;
  background-image: radial-gradient(rgba(94, 83, 152, .30) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 72%);
}
#surveillance .card__scene > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  #surveillance .card__scene::before { animation: anneaux-veille 9s ease-in-out infinite alternate; }
}
@keyframes anneaux-veille { from { transform: scale(.94); } to { transform: scale(1.08); } }

/* ---- 2. Le telephone tenu en main ---------------------------------------- */

/* La photo (736 x 1 308 px, ecran vert rendu transparent) garde ses dimensions d'origine et se met a
   l'echelle avec --k. L'interface vivante est posee DERRIERE, en perspective : sa matrice matrix3d est
   l'homographie qui envoie le rectangle de l'interface (202 x 434,4 px) sur les quatre coins de l'ecran
   releves dans la photo (le telephone est tourne d'une trentaine de degres). Le cadre, l'ilot et les
   doigts passent devant, comme en vrai.
   --cx : abscisse du milieu de l'ecran dans la photo ; --ft : ordonnee du haut du cadre ;
   --top : ou se pose ce haut de cadre dans la scene. */
#surveillance .card__scene--appareil {
  padding: 0;
  justify-content: center;
  align-items: center;
}
.appareil--photo {
  --k: .53;
  --cx: 344;
  --ft: 176;
  --top: 12px;
  width: 100%;
  height: 520px;
  margin: 0;
}
.appareil--photo.appareil--miroir { --cx: 392; }

.tel--photo {
  position: absolute;
  z-index: 1;
  top: calc(var(--top) - var(--ft) * var(--k) * 1px);
  left: calc(50% - var(--cx) * var(--k) * 1px);
  width: 736px;
  height: 1308px;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: scale(var(--k));
  transform-origin: 0 0;
  /* L'ombre se porte sur l'ensemble interface + photo : elle ne tombe ainsi jamais DANS l'ecran. */
  /* L'ombre n'est plus un filtre posé sur tout le téléphone : tant que l'écran s'anime dedans (sonar, balayage, notification), le filtre obligeait le
     navigateur à redessiner un élément de 736 x 1 308 px à chaque image, et la section saccadait. Elle vient maintenant de deux copies floues et
     sombres de la photo, posées DERRIÈRE l'écran et dessinées une seule fois (voir ::before et ::after plus bas). */
}
.tel--photo::before,
.tel--photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Ombres : images déjà floutées (outils/generer_ombres_telephone.py), noir pur dont seule l'opacité est réglée ici.
   Avant, deux copies de la photo étaient floutées en direct (flou de 58 et 11 px) : Safari sur iPhone les redessinait en direct,
   immenses une fois multipliées par la densité de pixels, sur chaque carte à téléphone, et la page plantait au défilement. */
/* Décalées par leurs bords (haut + 50 px, bas − 50 px) et non par une transformation : une transformation fait de chaque ombre une couche graphique de plus. */
.tel--photo::before { top: -124px; bottom: -224px; left: -174px; right: -174px; background-image: url("../assets/img/ombre-telephone-large.png"); opacity: .30; }
.tel--photo::after { top: -25px; bottom: -41px; left: -33px; right: -33px; background-image: url("../assets/img/ombre-telephone-nette.png"); opacity: .26; }
.appareil--miroir .tel--photo::before { background-image: url("../assets/img/ombre-telephone-large-miroir.png"); }
.appareil--miroir .tel--photo::after { background-image: url("../assets/img/ombre-telephone-nette-miroir.png"); }
/* L'interface garde sa taille d'origine : c'est la matrice qui la couche sur l'ecran de la photo.
   Les coins arrondis (30 px) restent juste en dessous de ceux de l'ecran : le cadre noir opaque
   recouvre le surplus, aucun eclat de couleur ne depasse du telephone. */
.tel--photo .tel__ecran {
  inset: auto;
  left: 0;
  top: 0;
  z-index: 1;
  width: 202px;
  height: 434.4px;
  border-radius: 30px;
  transform-origin: 0 0;
  transform: matrix3d(1.86342952, 0.171704806, 0, 0.000379974679, 0.169533555, 2.10260012, 0, 3.14882663e-05, 0, 0, 1, 0, 141.248187, 188.191338, 0, 1);
}
.appareil--miroir .tel--photo .tel__ecran {
  transform: matrix3d(1.47087158, -0.159465082, 0, -0.000352888744, -0.135925264, 1.95271937, 0, 2.92436716e-05, 0, 0, 1, 0, 255.239748, 206.988343, 0, 1);
}
.tel__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
/* La photo du téléphone en miroir est déjà retournée dans son fichier (main-telephone-miroir.webp) : aucune transformation à l'écran. */

/* La banniere se pose sur le haut de l'ecran : elle deborde a gauche du telephone et s'arrete juste
   avant son bord droit, si bien qu'elle cache entierement le haut de l'ecran (aucun mot coupe). */
.appareil--photo .notif {
  top: calc(var(--top) + 85.8 * var(--k) * 1px);            /* 35 px sous le haut de l'ecran */
  height: calc(143 * var(--k) * 1px);                       /* jusqu'a 103 px : entre le titre (fin a 96) et le montant (debut a 108) */
  box-sizing: border-box;
  left: max(8px, calc(50% - 267 * var(--k) * 1px));
  right: calc(50% - 155 * var(--k) * 1px);
  width: auto;
  background: #fff;                                         /* opaque : aucun texte ne transparait dessous */
}

/* ---- 3. Le graphique des prelevements ------------------------------------ */

.graph {
  /* Conteneur : sur une scene etroite, l'en-tete se resserre selon la largeur du graphique lui-meme. */
  container-type: inline-size;
  position: relative;
  width: min(100%, 396px);
  margin: 0 auto;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 223, 247, .95),
    0 2px 6px rgba(66, 55, 122, .07),
    0 34px 60px -26px rgba(66, 55, 122, .46);
}

/* En-tete : ce qu'on regarde, et de combien ca a bouge. */
.graph__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.graph__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.graph__icone {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--action-focus);
  background: linear-gradient(145deg, var(--action-tint) 0%, var(--action-tint-strong) 100%);
  box-shadow: inset 0 0 0 1px rgba(115, 111, 182, .16);
}
.graph__etiquette { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.graph__periode { margin: 3px 0 0; font-size: 11.5px; line-height: 1.2; color: var(--ink-muted-48); }
.graph__delta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--signal-vigilance);
  background: var(--signal-vigilance-tint);
  box-shadow: inset 0 0 0 1px rgba(176, 112, 11, .16);
}

.graph__valeur {
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-1);
  background: linear-gradient(180deg, var(--brand-1) 30%, var(--brand-4) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Le graphique : six colonnes, une par mois. */
.graph__zone {
  position: relative;
  height: 178px;
  padding-top: 30px;
}
/* Des reperes horizontaux, a peine visibles. */
.graph__zone::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 24px;
  background: repeating-linear-gradient(180deg, var(--divider-soft) 0 1px, transparent 1px 42px);
}
.graph__barres {
  position: relative;
  z-index: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.graph__barres li { position: relative; display: flex; flex-direction: column; min-width: 0; }
.graph__pile { position: relative; flex: 1; display: flex; flex-direction: column-reverse; }
.graph__base,
.graph__extra { display: block; transform-origin: 50% 100%; }
.graph__base {
  height: var(--base);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #c5bfeb 0%, #928dce 58%, #7b75c1 100%);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .3), 0 10px 16px -10px rgba(94, 83, 152, .6);
  transition: filter var(--dur-fast) var(--ease-standard);
}
.graph__extra {
  clip-path: inset(-14px -14px 0 -14px);      /* l'anneau qui pulse ne deborde pas sur le violet en dessous */
  height: var(--extra);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f3b955 0%, #d9932a 52%, #b0700b 100%);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .34), 0 0 0 0 rgba(176, 112, 11, .35);
}
/* Colonne de la hausse : le violet monte jusqu'au trait de la moyenne (coins droits en haut), l'orange
   n'est que ce qui depasse (coins droits en bas) : les deux blocs se touchent, sans aucune separation. */
.graph__barre--hausse .graph__base { border-radius: 0 0 4px 4px; }
.graph__barre--hausse .graph__extra { border-radius: 10px 10px 0 0; margin-bottom: -1px; }   /* 1 px de recouvrement : pas de filet clair entre les deux blocs */
/* La colonne du prelevement inconnu est surlignee : c'est elle qu'il faut regarder. */
.graph__barre--alerte::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  right: -5px;
  top: -4px;
  bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(243, 185, 85, .22), rgba(243, 185, 85, .04));
  box-shadow: inset 0 0 0 1px rgba(217, 147, 42, .16);
}
.graph__mois {
  height: 24px;
  padding-top: 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-muted-48);
}
.graph__barre--alerte .graph__mois { font-weight: 700; color: var(--signal-vigilance); }

/* Au survol d'une colonne : le total du mois. */
.graph__total {
  position: absolute;
  left: 50%;
  bottom: calc(var(--base) + var(--extra, 0%) + 8px);
  z-index: 3;
  transform: translate(-50%, 4px);
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--brand-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard);
}
.graph__barres li:hover .graph__total { opacity: 1; transform: translate(-50%, 0); }
.graph__barres li:hover .graph__base { filter: brightness(1.07) saturate(1.12); }

/* La bulle du prelevement inconnu, accrochee a la derniere colonne. */
.graph__bulle {
  position: absolute;
  right: -3px;
  bottom: calc(100% + 8px);
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(160deg, var(--brand-3), var(--brand-1));
  box-shadow: 0 12px 20px -8px rgba(25, 20, 62, .65);
}
.graph__bulle::after {
  content: "";
  position: absolute;
  right: 21px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--brand-1);
}
/* La moyenne : un pointille a 89,90 EUR (75 % de la hauteur des barres), derriere les barres. */
.graph__moyenne {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: calc(24px + (178px - 30px - 24px) * .75);
  border-top: 1.5px dashed rgba(94, 83, 152, .42);
}
.graph__moyenne i {
  position: absolute;
  left: 0;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--brand-4);
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--action-tint-strong);
}

/* Legende et lecture. */
.graph__legende { display: flex; gap: 16px; margin: -2px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--ink-muted-48); }
.graph__legende li { display: inline-flex; align-items: center; gap: 6px; }
.graph__point { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #c5bfeb, #7b75c1); }
.graph__point--inconnu { background: linear-gradient(180deg, #f3b955, #b0700b); }
/* La note sous le graphique : une ligne blanche à filet fin (la même que les signaux de l'écran d'alerte), et un seul trait d'orange, la
   petite icône de hausse, qui reprend l'orange de la barre de septembre et de la légende « Hausse ». Plus de fond ambré ni de cadre teinté. */
.graph__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px 9px 10px;
  border-radius: 13px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted-80);
  background: #fff;
  border: 1px solid rgba(94, 83, 152, .14);
  box-shadow: 0 6px 12px -9px rgba(66, 55, 122, .5);
}
.graph__note-icone {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--signal-vigilance);
  background: var(--signal-vigilance-tint);
}
.graph__note strong { font-weight: 700; color: var(--ink); }

/* Le signal part vers le proche : la pastille qui deborde du coin haut du graphique. */
.graph__signal {
  position: absolute;
  z-index: 2;
  top: -17px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--brand-1);
  box-shadow: 0 16px 28px -12px rgba(25, 20, 62, .7);
}
.graph__signal svg { color: var(--action-on-dark); }

/* Sur une scene etroite, le graphique se resserre selon SA largeur (requetes de conteneur : la
   largeur utile du .graph, marges comprises en moins). Placees apres les regles de base, sinon
   elles ne l'emportent pas. */
@container (max-width: 340px) { .graph__periode { display: none; } }
@container (max-width: 258px) { .graph__icone { display: none; } }   /* l'icone + « Assurance auto AXA » + la pastille tiennent des 262 px */
@container (max-width: 270px) {
  .graph__etiquette { white-space: normal; font-size: 12px; }
}
@container (max-width: 220px) {
  .graph__valeur { font-size: 34px; }
  .graph__barres { gap: 6px; }
  .graph__mois { font-size: 10.5px; }
}

/* Entree : les barres poussent l'une apres l'autre, la moyenne se trace, puis le prelevement
   inconnu tombe sur la derniere barre, s'annonce, et la pastille part vers le proche. */
.js-anim .graph__base,
.js-anim .graph__extra { transform: scaleY(0); }
.js-anim .graph__zone.is-animated .graph__base {
  transform: scaleY(1);
  transition: transform 760ms var(--ease-standard) calc(var(--i, 0) * 90ms + 180ms), filter var(--dur-fast) var(--ease-standard);
}
.js-anim .graph__zone.is-animated .graph__extra {
  transform: scaleY(1);
  transition: transform 640ms var(--ease-standard) calc(var(--i, 0) * 110ms + 800ms);
}
.js-anim .graph__moyenne { transform: scaleX(0); transform-origin: 0 50%; }
.js-anim .graph__zone.is-animated .graph__moyenne { transform: scaleX(1); transition: transform 900ms var(--ease-standard) 120ms; }
.js-anim .graph__barre--alerte::before { opacity: 0; }
.js-anim .graph__zone.is-animated .graph__barre--alerte::before { opacity: 1; transition: opacity 600ms var(--ease-standard) 900ms; }
.js-anim .graph__bulle { opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 90% 100%; }
.js-anim .graph__zone.is-animated .graph__bulle {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-standard) 1500ms, transform 500ms cubic-bezier(.3, 1.5, .5, 1) 1500ms;
}
.js-anim .graph__signal { opacity: 0; transform: translateY(-8px) scale(.92); }
.js-anim .graph__zone.is-animated ~ .graph__signal {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-standard) 1900ms, transform 520ms cubic-bezier(.3, 1.5, .5, 1) 1900ms;
}
@media (prefers-reduced-motion: no-preference) {
  .graph__zone.is-animated .graph__barre--alerte .graph__extra { animation: graph-pouls 2.6s ease-out 2.2s infinite; }
  .graph__zone.is-animated ~ .graph__signal { animation: graph-flotte 4.6s ease-in-out 2.6s infinite alternate; }
}
@keyframes graph-pouls {
  0%   { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .34), 0 0 0 0 rgba(176, 112, 11, .4); }
  70%, 100% { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .34), 0 0 0 10px rgba(176, 112, 11, 0); }
}
@keyframes graph-flotte { to { transform: translateY(-4px); } }

/* La barre d'état, calée sur l'îlot relevé dans la photo (en px de l'interface : de 71 à 137,
   centré à 18 px du haut) : la grille n'est pas symétrique comme sur .tel__barre de base, l'îlot
   de CETTE photo ne l'étant pas non plus. Tailles des jauges et heure : héritées de la base,
   communes à tous les téléphones (avant, elles étaient répétées ici avec des valeurs presque
   identiques mais pas tout à fait — la 5G en particulier n'avait pas la même taille sur cette
   carte et sur la carte dark web). */
#surveillance .tel__barre {
  grid-template-columns: 71px 66px minmax(0, 1fr);
  height: 36px;
  padding: 0;
}
#surveillance .tel__heure { letter-spacing: -.25px; line-height: 1; }
#surveillance .tel__jauges { margin-right: 14px; gap: 3px; }
/* La barre d'etat est plus haute qu'avant : on reprend la place sur le premier titre. */
#surveillance .vue--alerte .vue__eyebrow { margin-top: 4px; }

/* Les deux signaux relevés : des lignes blanches à filet fin, une icône violette de la marque (même famille que les indicateurs de l'écran du
   score). Ni rouge ni ambre : la gravité est déjà dite plus haut (« Alerte critique », le montant), ici on énonce seulement les faits. */
#surveillance .vue--alerte .signaux { gap: 5px; margin-top: 10px; }
/* L'écran est plein : on resserre les respirations (la notification couvre le haut) pour que les boutons ne collent pas au bas du téléphone. */
#surveillance .vue--alerte .ecart { margin-top: 8px; }
#surveillance .vue--alerte .vue__legende { margin-top: 10px; padding-top: 8px; }
#surveillance .vue--alerte .signaux { margin-top: 8px; }
#surveillance .vue--alerte .signaux li {
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 6px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(94, 83, 152, .14);
  box-shadow: 0 5px 9px -7px rgba(66, 55, 122, .55);
}
.signaux__icone {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--brand-4);
  background: rgba(94, 83, 152, .1);
}

/* Les deux boutons de l'alerte : le premier, plus long, prend un peu plus de place. */
#surveillance .vue--alerte .vue__bouton { padding: 8px 4px; font-size: 8.8px; letter-spacing: -.2px; white-space: nowrap; }
#surveillance .vue--alerte .vue__bouton--plein { flex: 1.45; }

/* ---- Portable etroit et tablette en paysage (901 a 1180 px) ----------------
   La colonne figee de gauche (400 px) ne laissait aux cartes que 216 a 300 px : la scene, moitie de
   carte, n'y tenait plus (mesure : jusqu'a 59 px de large sur la carte ScamDetect a 901 px). Meme
   structure sur #surveillance et #patrimoine (.produits/.cards/.card__mot identiques) : meme correctif
   pour les deux. On resserre la colonne, et chaque carte se lit de haut en bas (texte, puis scene sur
   toute sa largeur). */
@media (min-width: 900.02px) and (max-width: 1180px) {
  #surveillance .produits,
  #patrimoine .produits { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; }
  #surveillance .presentation__title,
  #patrimoine .presentation__title { font-size: 34px; }
  #surveillance .cards .card,
  #patrimoine .cards .card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* padding pour toutes les cartes ; gap et justify-content seulement pour les cartes ordinaires,
     sinon on ecraserait le space-between de .card__mot--media (carte immobiliere, en video). */
  #surveillance .card__mot,
  #patrimoine .card__mot { padding: 24px 28px 6px; }
  #surveillance .card__mot:not(.card__mot--media),
  #patrimoine .card__mot:not(.card__mot--media) { gap: 10px; justify-content: flex-start; }
}

/* ---- Telephone et tablette ------------------------------------------------ */
@media (max-width: 760px) {
  .appareil--photo { --k: .47; --top: 10px; height: 470px; }

  .graph { padding: 18px 16px 14px; }
  .graph__zone { height: 164px; }
  .graph__zone::before { background: repeating-linear-gradient(180deg, var(--divider-soft) 0 1px, transparent 1px 38px); }
  .graph__moyenne { bottom: calc(24px + (164px - 30px - 24px) * .75); }
}
@media (max-width: 380px) {
  .appareil--photo .notif { left: 6px; }
}

/* ---- « Apprend les habitudes » : la grille des operations, en grand ---------------------------
   Les cases des operations habituelles deviennent de vraies tuiles (fond perle, filet fin), plus
   grandes ; leur taille suit la largeur du panneau (unites de conteneur). Les liens se tracent d'un
   trait plus fin, la grille etant plus large. */
.card__scene--grille { padding: 22px; }
/* Le chip qui déborde en haut, même motif que « Répond en quelques secondes » (ScamDetect) et
   « Proche prévenu » (graphique) : l'IA intégrée, en un coup d'œil. */
.panneau__signal {
  position: absolute;
  z-index: 2;
  top: -14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--brand-1);
  box-shadow: 0 14px 26px -12px rgba(25, 20, 62, .7);
}
.panneau__signal svg { color: var(--action-on-dark); }
.js-anim .panneau__signal { opacity: 0; transform: translateY(-8px) scale(.92); }
.js-anim .grille.is-animated ~ .panneau__signal {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-standard) 1500ms, transform 520ms cubic-bezier(.3, 1.5, .5, 1) 1500ms;
}
.panneau--grille {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 18px 18px;
  gap: 16px;
}
.panneau--grille .panneau__titre { font-size: clamp(12.5px, 5.1cqw, 16px); white-space: nowrap; }
.panneau--grille .panneau__meta { font-size: clamp(10.5px, 4cqw, 13px); text-align: right; }
.panneau--grille .grille {
  flex: 0 0 auto;
  gap: 8px;
  grid-auto-rows: clamp(40px, 19cqw - 5px, 60px);
}
.panneau--grille .op {
  padding: 0 2px;
  border-radius: 11px;
  font-size: clamp(8px, 4.05cqw - 1.9px, 12.4px);   /* la plus longue valeur (+1 677,03 €, avec son symbole) doit tenir dans sa case */
  letter-spacing: -.3px;
  color: var(--ink-muted-80);
  background: rgba(250, 250, 252, .8);      /* un peu translucide : on devine les liens qui passent dessous */
  box-shadow: inset 0 0 0 1px var(--divider-soft);
}
.panneau--grille .op::after { content: "\202F\20AC"; font-size: .88em; }   /* montants en euros */
.panneau--grille .op--alerte {
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(199, 30, 86, .6);
}
.panneau--grille .grille__liens path { stroke-width: .9; stroke-opacity: .85; }
/* Les liens passent DERRIERE les tuiles habituelles (ils ne barrent aucun montant) et ne se voient que
   dans les interstices, entre les cases a signaler. */
.panneau--grille .grille__liens { z-index: 0; }
.panneau--grille .op { position: relative; z-index: 1; }
.panneau--grille .op--alerte { z-index: 2; }
.panneau--grille .panneau__note { font-size: clamp(12px, 4.9cqw, 14.5px); }
/* Avant l'allumage, les cases a signaler ressemblent aux autres tuiles. */
.js-anim .panneau--grille .grille .op--alerte {
  background: rgba(250, 250, 252, .8);
  color: var(--ink-muted-80);
  box-shadow: inset 0 0 0 1px var(--divider-soft);
}
.js-anim .panneau--grille .grille.is-animated .op--alerte {
  background: var(--signal-critique);
  color: var(--on-dark);
  box-shadow: 0 8px 16px -8px rgba(199, 30, 86, .6);
  transition:
    background 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    color 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    transform 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    box-shadow 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms);
}
/* ---- Deux etats qui se relaient : l'arnaque possible (rouge), puis le normal (bleu) ---------------
   Meme mise en scene pour les deux : les cases s'allument l'une apres l'autre, puis les liens se
   tracent. landing.js bascule .is-normal sur la grille ; sans JS ou en mouvement reduit, on reste sur
   l'etat rouge. */
.panneau--grille .grille__liens path.lien--bleu { stroke: var(--action); stroke-opacity: .8; }
.panneau--grille .op--normal { z-index: 2; transition: background 350ms var(--ease-standard), color 350ms var(--ease-standard), box-shadow 350ms var(--ease-standard); }
.js-anim .grille__liens path.lien--bleu { stroke-dashoffset: var(--trace, 0); }
.js-anim .grille.is-animated .grille__liens path.lien--bleu {
  stroke-dashoffset: var(--trace, 0);
  transition: stroke-dashoffset 500ms var(--ease-standard);
}
.js-anim .grille.is-animated.is-normal .grille__liens path.lien--bleu {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1300ms var(--ease-standard) 900ms;
}
/* Le rouge se retire quand le bleu prend la place. */
.js-anim .grille.is-animated.is-normal .grille__liens path.lien--rouge {
  stroke-dashoffset: var(--trace, 0);
  transition: stroke-dashoffset 450ms var(--ease-standard);
}
.js-anim .grille.is-animated.is-normal .op--alerte {
  background: rgba(250, 250, 252, .8);
  color: var(--ink-muted-80);
  font-weight: 400;
  box-shadow: inset 0 0 0 1px var(--divider-soft);
  transition: background 350ms var(--ease-standard), color 350ms var(--ease-standard), box-shadow 350ms var(--ease-standard);
}
.js-anim .grille.is-animated.is-normal .op--normal {
  background: linear-gradient(160deg, var(--brand-4), var(--action));
  color: var(--on-dark);
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(94, 83, 152, .65);
  transition:
    background 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    color 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms),
    box-shadow 420ms var(--ease-standard) calc(var(--ordre, 0) * 150ms + 400ms);
}

/* Les etiquettes : deux pastilles superposees dans la meme case, une seule visible. */
.grille__etiquettes { display: grid; justify-items: center; margin-top: -2px; }
.etiquette {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 16px;
  font-size: clamp(10px, 3.7cqw, 12px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: #fff;
  transition: opacity 350ms var(--ease-standard), transform 450ms cubic-bezier(.3, 1.5, .5, 1);
}
.etiquette svg { flex: 0 0 auto; }
.etiquette--bleue { opacity: 0; }
.etiquette--rouge { background: var(--signal-critique); box-shadow: 0 12px 22px -10px rgba(199, 30, 86, .7); }
.etiquette--bleue { background: linear-gradient(160deg, var(--brand-4), var(--action)); box-shadow: 0 12px 22px -10px rgba(94, 83, 152, .7); }
.js-anim .grille ~ .grille__etiquettes .etiquette { opacity: 0; transform: translateY(8px) scale(.92); }
.js-anim .grille.is-animated ~ .grille__etiquettes .etiquette--rouge {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-standard) 1700ms, transform 500ms cubic-bezier(.3, 1.5, .5, 1) 1700ms;
}
.js-anim .grille.is-animated.is-normal ~ .grille__etiquettes .etiquette--rouge { opacity: 0; transform: translateY(-6px) scale(.94); transition-delay: 0s; }
.js-anim .grille.is-animated.is-normal ~ .grille__etiquettes .etiquette--bleue {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-standard) 1700ms, transform 500ms cubic-bezier(.3, 1.5, .5, 1) 1700ms;
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .panneau--grille .grille .op--alerte {
    background: var(--signal-critique);
    color: var(--on-dark);
    box-shadow: 0 8px 16px -8px rgba(199, 30, 86, .6);
  }
}

/* ---- Marges laterales sur tablette et telephone ----------------------------------------------
   Les fonds restent pleine largeur ; le texte, lui, ne doit jamais toucher le bord de l'ecran. Ces
   sections avaient 0 de marge laterale sous 900 px : les 80 px du bureau leur avaient ete donnes
   (commit « Fonds pleine largeur avec marges laterales »), sans que leurs regles mobiles suivent. */
@media (max-width: 900px) {
  .hero__content,
  .fraude,
  .presentation,
  .banques,
  .avis,
  .tarifs { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
  .hero__content,
  .fraude,
  .presentation,
  .banques,
  .avis,
  .tarifs { padding-left: 20px; padding-right: 20px; }
  /* Le cadre des avis est plus etroit : les cartes le sont aussi, pour qu'on voie encore la suivante. */
  .avis__carte { flex-basis: 70vw; }
}
/* La citation d'ouverture ne colle plus au bord entre 901 et 1100 px, ou la section n'a pas de marge. */
.avis__phare { padding-left: 32px; padding-right: 32px; }

/* ---- Navigation juste au-dessus du seuil du menu mobile (901 a 960 px) -----------------------
   Les liens et les deux boutons demandent environ 915 px : la barre depassait l'ecran de quelques
   pixels (tablettes de 912 px, par exemple). On resserre les espaces sur cette bande. */
@media (min-width: 900.02px) and (max-width: 1040px) {
  .nav { gap: 10px; padding-left: 20px; }
  .nav__links { gap: 10px; }
  .nav__links a { font-size: 13.5px; }
  .nav__signin { padding-left: 12px; padding-right: 12px; }
}

/* ---- Carte immobilière sur telephone : le batiment doit se voir ----------------------------------
   Sur ordinateur, la video couvre toute la carte et le temple (fronton, colonnes, lavande) apparait a
   droite du releve. Sur telephone la carte est en colonne et le releve, plus le voile blanc, le
   recouvraient entierement : il ne restait que quelques fleurs. Ici la video n'est plus un fond de
   toute la carte mais une bande dediee entre le texte et le releve (le temple, cadre en bas de la
   video), que le releve chevauche par le haut, comme sur ordinateur. Le releve perd deux
   jalons et sa legende pour rester compact ; les quatre restent sur ordinateur. */
@media (max-width: 760px) {
  .card--media { grid-template-rows: auto auto auto; }
  .card--media .card__mot { grid-row: 1; }
  .card--media .card__voile { display: none; }
  .card--media .card__media {
    position: static;
    grid-row: 2;
    grid-column: 1;
    z-index: auto;
    height: 226px;
    object-position: 50% 84%;
    /* le haut et le bas du cadre se fondent dans le blanc de la carte : pas de bord franc */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  }
  .card--media .card__scene--releve {
    grid-row: 3;
    margin-top: -152px;   /* le relevé recouvre les colonnes : on ne voit que le toit et le fronton */
    position: relative;
    z-index: 1;
  }
  .card--media .jalons__item:nth-child(n + 3),
  .card--media .bien__legende { display: none; }
}

/* Carte immobiliere : le titre et le texte sont ranges dans un meme bloc, donc l'ecart que les autres
   cartes tiennent par leur « gap » n'existait pas ici (0). On leur donne le meme, a chaque largeur :
   13 px sur telephone, 10 px sur tablette, 14 px sur ordinateur. */
.card__mot--media .card__text { margin-top: 14px; }
@media (max-width: 760px) { .card__mot--media .card__text { margin-top: 13px; } }
@media (min-width: 900.02px) and (max-width: 1180px) { .card__mot--media .card__text { margin-top: 10px; } }

/* ---- Patrimoine : fond des scenes en degrade diagonal lavande -> rose pale -> peche ----------------
   Teintes relevees sur la reference : #e2e1f6 (haut gauche), #eee3e2 (milieu), #fee5ca (bas droite).
   Vaut pour la carte dark web et la carte ScamDetect, pour le voile de la carte immobiliere sur
   ordinateur et, sur telephone, pour toute la moitie basse de cette carte (texte en blanc au-dessus). */
#patrimoine .card__scene {
  background: linear-gradient(135deg, #e2e1f6 0%, #e9e2ec 30%, #eee3e2 55%, #f6e4d6 80%, #fee5ca 100%);
}
#patrimoine .card__scene--releve { background: none; }
#patrimoine .card__voile {
  background:
    linear-gradient(101deg,
      rgba(252, 252, 254, .975) 0%,
      rgba(249, 248, 254, .955) 34%,
      rgba(233, 226, 236, .66) 50%,
      rgba(240, 227, 224, .52) 68%,
      rgba(254, 229, 202, .55) 100%);
}
@media (max-width: 760px) {
  /* Sur telephone, le temple et le releve occupent le bas de la carte (environ 310 px) : on leur donne,
     derriere, le meme degrade diagonal que les autres scenes. Un voile blanc le fait naitre du fond du
     texte, sans bord franc. */
  #patrimoine .card--media {
    background:
      linear-gradient(180deg, var(--canvas) 0, rgba(255, 255, 255, 0) 110px) left bottom / 100% 310px no-repeat,
      linear-gradient(135deg, #e2e1f6 0%, #e9e2ec 30%, #eee3e2 55%, #f6e4d6 80%, #fee5ca 100%) left bottom / 100% 310px no-repeat,
      var(--canvas);
  }
}

/* Le cadre des chiffres se feuillette d'un clic : le curseur le dit, le texte ne se selectionne pas. */
.statbox { cursor: pointer; -webkit-user-select: none; user-select: none; }
.statbox .dot { cursor: pointer; }

/* Retour visuel au clic : la carte s'enfonce un instant, le nouveau chiffre arrive en fondu, la pastille « pulse ». */
.statbox__stage { transition: transform var(--dur-fast) var(--ease-standard); }
.statbox:active .statbox__stage { transform: scale(.975); }
@media (prefers-reduced-motion: no-preference) {
  .stat.is-active { animation: stat-entree .38s cubic-bezier(.2, .7, .2, 1) both; }
  .dot.is-active { animation: dot-pulse .4s var(--ease-standard); }
}
@keyframes stat-entree {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes dot-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Comptes relies : fond « nuit » (violet-bleu fonce), coeur de la constellation nacre --------------
   Nappe violette derriere les logos, trame de points, degrade sombre ; le texte passe en clair. Le coeur
   de la constellation est un carre blanc nacre dont le pictogramme est en bleu nuit. */
.banques {
  /* Le même dégradé violet-bleu que le panneau de la page de connexion (« Une protection
     intelligente… ») : indigo en haut à gauche, violet médian, puis le violet de la marque.
     Jeton --degrade-marque (base.css) : il s'arrête à #6862ab et ne va PAS jusqu'à la
     lavande de la connexion (--brand-6) : le texte blanc doit rester à 4,5 : 1 partout. */
  background:
    radial-gradient(46% 46% at 74% 46%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 100%),
    var(--degrade-marque);   /* les points sont dessinés par js/fond-points.js (data-fond-points) */
}
.banques .eyebrow { color: #cfc9f5; }
.banques .banques__title { color: #fff; }
.banques .compteur__nombre { background: linear-gradient(120deg, #fff 10%, #c9c4f2 100%); -webkit-background-clip: text; background-clip: text; }
.banques .compteur__unite,
.banques .notes li { color: rgba(255, 255, 255, .8); }
.banques .notes li { border-color: rgba(255, 255, 255, .18); }
.banques .constellation__orbite { border-color: rgba(255, 255, 255, .16); }
.banques .constellation__coeur {
  background: linear-gradient(150deg, #ffffff 0%, #eeebfb 60%, #d9d4f4 100%);
  box-shadow: 0 18px 40px -10px rgba(200, 196, 255, .6);
}
.banques .constellation__coeur img { filter: brightness(0) opacity(.82); }

/* ---- Pied de page : le bleu « nuit » des comptes relies, a l'essai sur deux perimetres (data-pied) ------
   carres : les deux cartes (marque et navigation) en bleu nuit, sur le fond clair ;
   entier : tout le pied de page en bleu nuit, les cartes deviennent du verre sombre. */
.pied[data-pied="carres"] .pied__marque,
.pied[data-pied="carres"] .pied__panneau {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(132, 126, 214, .5) 0%, rgba(132, 126, 214, 0) 100%),
    linear-gradient(160deg, #1d1648 0%, #2b2169 55%, #1a1242 100%);
  border: 0;
  box-shadow: 0 30px 60px -34px rgba(29, 22, 72, .7);
}
.pied[data-pied="entier"] {
  padding-top: var(--space-xl);
  background:
    radial-gradient(50% 50% at 80% 10%, rgba(132, 126, 214, .45) 0%, rgba(132, 126, 214, 0) 100%),
    radial-gradient(rgba(255, 255, 255, .12) 1px, rgba(255, 255, 255, 0) 1.6px) 0 0 / 24px 24px,
    linear-gradient(160deg, #1d1648 0%, #2b2169 55%, #1a1242 100%);
}
.pied[data-pied="entier"] .pied__marque,
.pied[data-pied="entier"] .pied__panneau {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.pied[data-pied="entier"] .pied__filigrane text { fill: rgba(255, 255, 255, .07); }
/* Texte clair sur ces deux variantes. */
.pied[data-pied] .pied__titre { color: rgba(255, 255, 255, .55); }
.pied[data-pied] .pied__colonne a { color: #fff; }
.pied[data-pied] .pied__colonne a:hover { color: #cfc9f5; }
.pied[data-pied] .pied__copyright,
.pied[data-pied] .pied__relance-mot { color: rgba(255, 255, 255, .65); }
.pied[data-pied] .pied__relance-mot strong { color: #fff; }
/* Bouton du pied de page : blanc sur le panneau violet (il se confondait avec lui), flèche au dégradé de la marque. */
.pied[data-pied] .pied__relance .btn--action { background: #fff; color: var(--brand-1); box-shadow: 0 12px 26px -14px rgba(10, 6, 40, .7); }
.pied[data-pied] .pied__relance .btn--action:hover { background: #f3f1fb; }
.pied[data-pied] .pied__relance .btn--action .btn__fleche { background: linear-gradient(135deg, var(--brand-3), var(--brand-5)); color: #fff; }

/* Sans le sceau « Connexion chiffree », l'adresse suit directement la phrase d'accroche : on garde l'air. */
.pied__baseline + .pied__adresse { margin-top: var(--space-lg); }

/* ---- Carte de marque : coordonnees sous le logo (plus de phrase d'accroche) ---- */
.pied__marque { justify-content: flex-start; gap: var(--space-xl); }
.pied__marque-bas { margin-top: 0; }
.pied__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.pied__contact p { margin: 0; }
.pied__contact a { color: inherit; text-decoration: none; }
.pied__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied__reseaux { display: flex; gap: 6px; margin: var(--space-xs) 0 0 -8px; padding: 0; list-style: none; }
.pied__reseaux a {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.pied__reseaux a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); text-decoration: none; }
.pied__reseaux a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sur ce bleu, le surtitre de la section (« Ce que nous surveillons ») se fondait dans le fond : on l'eclaircit. */
#surveillance .eyebrow { color: #d6d1f7; }

/* ---- Tarifs : fond « nuit » (le bleu des comptes relies), cartes blanches ------------------------------ */
.tarifs {
  /* Même dégradé que la section des banques et que le panneau de la connexion. */
  background:
    radial-gradient(56% 40% at 50% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 100%),
    var(--degrade-marque);
}
.tarifs .eyebrow { color: #d6d1f7; }
.tarifs .tarifs__title { color: #fff; }
.tarifs .tarifs__lede { color: rgba(255, 255, 255, .8); }
.tarifs .segmented { background: rgba(255, 255, 255, .16); }
.tarifs .segmented__btn { color: rgba(255, 255, 255, .8); }
.tarifs .segmented__btn.is-active { color: var(--action-focus); }
.tarifs .tarifs__detail { color: rgba(255, 255, 255, .8); }
.tarifs .tarifs__detail a { color: #fff; }



/* ---- Mise en route : trois etapes, apres les comptes relies ----------------------------------------
   Trois colonnes reliees par un fil qui se trace de gauche a droite, les etapes se posant l'une apres
   l'autre. Pas de texte de developpement : un rond, un numero, un titre. Meme composition sur telephone,
   en plus petit (rien a faire glisser). */
.etapes { background: var(--canvas); padding: 96px 0 100px; }

.etapes__cadre { width: min(1040px, calc(100% - 48px)); margin: 0 auto; }
.etapes__liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.etapes__liste::before,
.etapes__liste::after {
  content: "";
  position: absolute; top: 38px; left: calc(16.666% + 46px); right: calc(16.666% + 46px);
  height: 2px; border-radius: 2px;
}
.etapes__liste::before { background: repeating-linear-gradient(90deg, var(--action-tint-strong) 0 8px, transparent 8px 15px); }
.etapes__liste::after { background: linear-gradient(90deg, var(--brand-5), var(--brand-3)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-standard) .35s; }
.etapes__liste.is-animated::after { transform: scaleX(1); }
.etape { position: relative; padding: 0 12px; text-align: center; }
.etape__rond {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 78px; height: 78px; margin: 0 auto 22px;
  border-radius: 50%;
  color: var(--on-action);
  background: linear-gradient(145deg, var(--brand-3), var(--brand-5));
  box-shadow: 0 16px 32px -14px rgba(94, 83, 152, .8), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 8px var(--canvas);
}
.etape__num { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--action-focus); }
.etape__titre { margin: 0 auto; max-width: 14em; font-family: var(--font-display); font-size: var(--text-tagline-size); font-weight: 600; line-height: 1.25; color: var(--brand-1); text-wrap: balance; }

/* Entree : les etapes se posent de gauche a droite, au rythme du fil. */
.js-anim .etape { opacity: 0; transform: translate3d(-22px, 0, 0); }
.js-anim .etapes__liste.is-animated .etape {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-standard) calc(var(--i, 0) * 340ms + 250ms), transform 700ms var(--ease-standard) calc(var(--i, 0) * 340ms + 250ms);
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .etape { opacity: 1; transform: none; }
  .etapes__liste::after { transform: scaleX(1); transition: none; }
}

@media (max-width: 900px) {
  .etapes { padding: 80px 0 84px; }
}

/* Telephone : meme composition, en plus petit. Le fil passe derriere les trois ronds. */
@media (max-width: 760px) {
  .etapes { padding: 64px 0 68px; }
  .etapes__cadre { width: calc(100% - 32px); }
  .etapes__liste { gap: 6px; }
  .etapes__liste::before,
  .etapes__liste::after { top: 28px; left: calc(16.666% + 32px); right: calc(16.666% + 32px); }
  .etape { padding: 0 2px; }
  .etape__rond { width: 56px; height: 56px; margin-bottom: 14px; box-shadow: 0 10px 20px -10px rgba(94, 83, 152, .8), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 5px var(--canvas); }
  .etape__rond svg { width: 22px; height: 22px; }
  .etape__num { margin-bottom: 5px; font-size: 10px; letter-spacing: .1em; }
  .etape__titre { font-size: 14.5px; line-height: 1.25; letter-spacing: -.2px; }
}
@media (max-width: 380px) {
  .etapes__cadre { width: calc(100% - 24px); }
  .etape__titre { font-size: 13.5px; }
}
/* Très petits écrans (320 px) : les colonnes font ~ 85 px, les titres des étapes ne doivent pas déborder sur leur voisine. */
@media (max-width: 340px) {
  .etape__titre { font-size: 12.5px; letter-spacing: -.3px; }
}


/* ---- Mise en route : rattachee a la section des comptes relies, au-dessus ------------------------------
   Les trois etapes partagent le fond bleu nuit de la section : plus de bande blanche a part. Ronds
   nacres, fil clair, textes en blanc. */
.banques .etapes {
  grid-column: 1 / -1;
  background: none;
  padding: 0;
  margin-top: 0;
}
.banques .etapes__cadre { width: min(1040px, 100%); }
.banques .etapes__liste::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 8px, transparent 8px 15px); }
.banques .etapes__liste::after { background: linear-gradient(90deg, #ffffff, #c9c4f2); }
.banques .etape__rond {
  color: #2b2169;
  background: linear-gradient(150deg, #ffffff 0%, #eeebfb 60%, #d9d4f4 100%);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .08);
}
.banques .etape__num { color: #cfc9f5; }
.banques .etape__titre { color: #fff; }

@media (max-width: 900px) {
  .banques .etapes { padding: 0; margin-top: 0; }
}
@media (max-width: 760px) {
  .banques .etapes { padding: 0; margin-top: 0; }
  .banques .etapes__cadre { width: 100%; }
  .banques .etape__rond { box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .55), 0 0 0 5px rgba(255, 255, 255, .08); }
}

/* Etapes remontees sous la constellation (un peu plus proches que l'espacement naturel de la grille). */
.banques .etapes { margin-top: -10px; }
@media (max-width: 900px) { .banques .etapes { margin-top: -6px; } }

/* Chapeau de la section Patrimoine : la phrase finale est en gras, plus sombre que le reste. */
.presentation--clair .presentation__lede strong { font-weight: 600; color: var(--ink); }

/* Cartes qui renvoient vers une page (ScamDetect, SIM swapping), en colonne sur telephone : le bouton ne colle plus a la scene. */
@media (max-width: 900px) {
  .card--lien .card__mot { padding-bottom: 26px; }
}

/* Ce que chaque offre protège, en deux pastilles sous la phrase d'accroche (comme sur la page Tarifs). */
.offre__foyer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.offre__puce {
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--action-tint); box-shadow: inset 0 0 0 1px var(--action-tint-strong);
  font-size: 13px; font-weight: 600; color: var(--action-focus);
}

/* ---- Section « SentinelleFin protège votre argent » : le titre gagne en présence (40 -> 48 px sur grand écran) ---------------
   Posé en fin de fichier : il passe après les réglages de 901-1180 px et des petits écrans. Le titre de la section Patrimoine
   ne bouge pas. */
#surveillance .presentation__title { font-size: 48px; line-height: 1.08; }
@media (min-width: 900.02px) and (max-width: 1180px) { #surveillance .presentation__title { font-size: 40px; } }
@media (max-width: 900px) { #surveillance .presentation__title { font-size: 40px; } }
@media (max-width: 640px) { #surveillance .presentation__title { font-size: 34px; } }

/* ---- Sections « SentinelleFin protège votre argent » et « Au-delà des comptes » : textes courants plus grands ----------------
   Texte d'introduction de la colonne de gauche : 16 -> 18 px ; texte des cartes : 14 -> 16 px ; liste de la carte immobilière :
   14 -> 15,5 px. Posé en fin de fichier pour passer après les réglages des petits écrans ; réduit d'un cran sous 640 px. */
#surveillance .presentation__lede,
#patrimoine .presentation__lede { font-size: 18px; }
#surveillance .card__text,
#patrimoine .card__text { font-size: 16px; }
#surveillance .veille li,
#patrimoine .veille li { font-size: 15.5px; }
@media (max-width: 640px) {
  #surveillance .presentation__lede,
  #patrimoine .presentation__lede { font-size: 16.5px; }
  #surveillance .card__text,
  #patrimoine .card__text { font-size: 15px; }
  #surveillance .veille li,
  #patrimoine .veille li { font-size: 14.5px; }
}

/* Sélecteur Particuliers / Professionnels du hero : deux liens (deux pages), pas deux onglets. */
a.segmented__btn { display: inline-block; text-decoration: none; }
a.segmented__btn:hover { text-decoration: none; }
.hero .segmented__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Téléphone : le titre du hero tient sur deux lignes (accueil) ou trois (page Professionnels), de 320 à 700 px de large. */
@media (max-width: 700px) {
  .hero__title { font-size: clamp(20px, 6.1vw, 32px); line-height: 1.14; }
}

/* Pied de page : liens vers les réseaux sociaux (YouTube, Instagram, Facebook, LinkedIn), sous l'adresse. Cibles de 44 px. */
.pied__reseaux { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pied__reseaux a {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pied__reseaux a:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); transform: translateY(-2px); }
.pied__reseaux a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pied__reseaux a { transition: none; } .pied__reseaux a:hover { transform: none; } }

/* Titre du hero : il apparaît en CSS seul, sans attendre le JavaScript (avant, il restait masqué jusqu'à l'exécution de landing.js :
   plus de 3 s avant l'affichage sur un téléphone en 4G lente, et c'était le plus grand élément de la page, donc le LCP). */
@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation: hero-titre-fondu .7s var(--ease-standard, ease) both; }
}
@keyframes hero-titre-fondu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }