/* SansTrace — accueil du design v2 (mission I, I1, 10/10/2026) : ce que la feuille de l'export ne sait pas habiller.
   Les blocs ÉCRITS PAR LE SERVEUR gardent leur balisage — on ne change pas ces fonctions ce soir, ce serait un déploiement du serveur :
   le bandeau d'échelle (`echelle.bloc_html` : .preuve4, .p4i, .p4src, .note-methodo), « Dernières alertes » (`bloc_accueil_alertes` :
   .wrap, .muted, styles en ligne) et la ligne d'avis (`vivacite.bloc_avis`). Feuille EXTERNE : l'allègement de l'accueil
   (`scanner/alleger.py`) retire d'une feuille en ligne les règles qui ne visent aucune classe de la page construite — or ces classes
   n'y entrent qu'avec le passage `accueil` du serveur. */

/* un texte devenu contenu de style (libellé court du menu, nombres des écrans d'exemple : exactitude.rendre_illustratif) */
.ill::before{content:attr(data-ill)}

/* ── le bandeau d'échelle : l'habit du cadre bleu nuit des chiffres de la maquette (.stats) ── */
.preuve4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-radius:28px;overflow:hidden;
  background:radial-gradient(50% 130% at 100% 0%,rgba(59,130,246,.38),transparent 62%),linear-gradient(160deg,#050B1F 0%,#0B1F4D 100%);
  box-shadow:0 34px 70px -36px rgba(7,26,61,.7)}
.preuve4 .p4i{padding:34px 30px 32px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}
.preuve4 .p4i b{font-weight:500;color:#fff;font-size:clamp(2.6rem,4.2vw,3.75rem);line-height:1;letter-spacing:-.04em;white-space:nowrap;
  font-variant-numeric:lining-nums proportional-nums}
.preuve4 .p4i span{color:rgba(255,255,255,.72);font-size:.9375rem;line-height:1.45;margin-top:14px;max-width:32ch}
.preuve4 .p4i.wide b{font-weight:600;font-size:clamp(1.5rem,2vw,1.75rem);white-space:normal;letter-spacing:-.02em}
.preuve4 .p4i.wide::after{content:"FBI  ·  EUROPOL  ·  NCA";white-space:pre;display:block;width:max-content;margin-top:14px;padding:5px 10px;
  border:1px solid rgba(219,234,254,.3);border-radius:8px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;color:#DBEAFE}
.preuve4 a{color:#DBEAFE;border-bottom:1px solid rgba(219,234,254,.35)}
.preuve4 .p4src{grid-column:1/-1;margin:0;padding:16px 30px 20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.62);font-size:.875rem}
.preuve4 .p4src a{color:#fff;font-weight:500;border-bottom-color:rgba(255,255,255,.3)}
.note-methodo{font-size:.8125rem!important;color:#8296B8!important;line-height:1.55;max-width:900px!important;margin:14px 0 28px!important}
.note-methodo a{color:#48587A;border-bottom:1px solid rgba(37,99,255,.22)}
@media (max-width:640px){
  .preuve4 .p4i{padding:24px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .preuve4 .p4i b{font-size:2.3rem}
  .preuve4 .p4src{padding:14px 20px 18px}
}

/* ── « Dernières alertes » et la ligne d'avis : dans la largeur du design ── */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
main > section > .wrap{padding-bottom:72px}
main > section > .wrap h2{letter-spacing:-.02em;color:#0B1B3A}
main > section > .wrap li a{color:#2563FF;font-weight:500}
.muted{color:#48587A}
.muted a{color:#2563FF;border-bottom:1px solid rgba(37,99,255,.22)}

/* ── les légendes des trois étapes (page réelle : « 100 % confidentiel », « Un clic pour envoyer », « Vous êtes informé ») ── */
.flux__pied{margin:14px 0 0;font-size:.875rem;line-height:1.5;color:#48587A}
.flux__pied b{color:#0B1B3A;font-weight:600}

/* ── les avatars de la bannière (décision n° 1 du fondateur en attente : ils restent, comme sur la page réelle) ── */
.ab-ava{display:inline-flex;vertical-align:middle;margin-bottom:4px}
.ab-ava span{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-size:.75rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#3B82F6,#1E3A8A);border:2px solid #0B1B3A;margin-left:-8px}
.ab-ava span:first-child{margin-left:0}
/* SansTrace — l'accueil sur téléphone (11/10/2026). Le fondateur : « sur le téléphone, ça ressort vraiment très mal ; 90 % des gens
   vont sur les sites et achètent sur leur téléphone ». Mesuré avant : 15 904 px de haut à 390 px, soit 19 écrans.
   Principe : aucune ligne de texte retirée. On raccourcit en mettant côte à côte ce qui s'empilait (chiffres en 2 × 2, familles et
   offres en carrousel qu'on fait glisser du pouce), et on rend la lecture plus confortable. Tout est sous @media : l'ordinateur ne
   bouge pas. */
@media (max-width:760px){
  /* rythme général : des sections moins hautes */
  .section{padding-top:48px!important;padding-bottom:48px!important}
  .section-head{margin-bottom:24px}
  .h2{font-size:28px;line-height:1.15}

  /* 1 · héros : le téléphone illustre, il ne doit pas occuper deux écrans */
  .hero{padding-top:88px!important;padding-bottom:40px!important}
  .hero__visual{height:430px;overflow:hidden;margin-top:28px;-webkit-mask-image:linear-gradient(#000 72%,transparent 100%);mask-image:linear-gradient(#000 72%,transparent 100%)}
  .phone--ios{transform:scale(.86);transform-origin:top center}

  /* 2 · les quatre chiffres : 2 × 2 au lieu de quatre blocs empilés */
  .preuve4{grid-template-columns:1fr 1fr!important}
  .preuve4 .p4i{padding:18px 16px!important;min-width:0}
  .preuve4 .p4i b{font-size:30px!important;line-height:1.05}
  .preuve4 .p4i span{font-size:12.5px!important;line-height:1.4}
  .preuve4 .p4i.wide{grid-column:1/-1}
  .preuve4 .p4i.wide b{font-size:22px!important}

  /* 3 · « Pour toute la famille » : les trois cartes en carrousel, qu'on fait glisser */
  .family{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .family::-webkit-scrollbar{display:none}
  .family>.carte-photo{flex:0 0 84%;min-height:440px;scroll-snap-align:center}

  /* 4 · « Comment ça marche » : les étapes inactives restent lisibles (l'écran actif est déjà au-dessus) */
  .var-a .e21{opacity:.9!important}
  .var-a .e21 p{color:rgba(219,234,254,.82)!important}
  .e21{padding:16px 16px 18px!important}
  .e21__titre{font-size:24px!important;margin-top:2px!important}
  .e21-scene{min-height:360px!important}

  /* 5 · les offres : une carte à la fois, qu'on fait glisser ; la suivante dépasse pour inviter au geste */
  .plans{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:6px 20px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plans::-webkit-scrollbar{display:none}
  .plans>.plan{flex:0 0 84%;scroll-snap-align:center;padding:24px 22px!important}
  .group-head{margin-bottom:10px}
  .group-head::after{content:"Faites glisser →";margin-left:auto;font-size:12.5px;font-weight:600;color:#5B6782}

  /* 6 · pied de page : deux colonnes au lieu d'une longue liste */
  .footer__cols{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .footer__about{grid-column:1/-1}
  .footer__cols a{font-size:14px}
}
@media (max-width:380px){
  .preuve4 .p4i b{font-size:26px!important}
  .family>.carte-photo,.plans>.plan{flex-basis:88%}
}