/* Conseils Senolo Anti-arnaque.
   Territoire web de la charte v2.1 : fond #F7FAFC, surface blanche, encre
   #2D3748, Inter pour tout, trois ombres et pas une quatrieme, echelle
   typographique a huit tailles.
   Ces pages se lisent, elles ne se regardent pas : la mesure de lecture est
   bornee a 68 caracteres, et le corps ne descend jamais sous 18 px. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --klein:#002FA7; --vert:#1B7A34; --rouge:#B01515;
  --fond:#F7FAFC; --surface:#FFFFFF; --encre:#2D3748; --encre-2:#4A5568;
  --trait:#E5E7EB; --gris:#6B7280;
  --ombre-1:0 2px 8px rgba(0,0,0,.06);
  --ombre-2:0 8px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.marge{width:min(100% - 40px, 1120px); margin-inline:auto}
/* Les pages qui se lisent d'un bout a l'autre prennent une colonne etroite et
   centree : un pave de texte cale a gauche sur 1120 px fatigue l'oeil et laisse
   la moitie droite vide. */
.marge--lecture{width:min(100% - 40px, 800px)}
/* Sur un article, l'en-tete, le rappel et le pied se calent sur la meme
   colonne que le texte : un contenu centre au-dessus d'un pied cale a gauche
   se lit comme un defaut d'alignement, et c'en est un. */
body.lecture .marge{width:min(100% - 40px, 800px)}
a{color:var(--klein)}
img{max-width:100%; height:auto}

.saut{position:absolute; left:-9999px}
.saut:focus{left:16px; top:16px; z-index:50; background:#fff; padding:12px 18px;
  border-radius:10px; box-shadow:var(--ombre-2)}
:focus-visible{outline:3px solid #FFD700; outline-offset:3px}

/* En-tete */
.tete{background:var(--surface); border-bottom:1px solid var(--trait)}
.tete-rang{display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:68px; padding:12px 0}
.tete-marque{display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--encre); font-weight:700; font-size:18px; white-space:nowrap}
.tete-action .court{display:none}
.tete-action{
  text-decoration:none; color:#fff; font-weight:700; font-size:15px;
  background:linear-gradient(112deg,#002FA7 8%,#1B7A34 96%);
  padding:12px 20px; border-radius:999px; white-space:nowrap;
}

/* Fil d'Ariane */
.fil{font-size:15px; color:var(--gris); padding:16px 0 0}
.fil .marge{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.fil a{color:var(--gris)}
.fil [aria-current]{color:var(--encre); font-weight:600}

/* Titre de page */
.chapeau{padding:36px 0 8px}
.chapeau h1{
  font-size:34px; line-height:1.2; font-weight:800; letter-spacing:-.02em;
  color:var(--encre); margin:0 0 12px; max-width:24ch; text-wrap:balance;
}
.marge--lecture .chapeau h1{max-width:none}
.chapeau .intro{font-size:20px; line-height:1.55; color:var(--encre-2); margin:0; max-width:62ch}
.chapeau .date{font-size:13px; color:var(--gris); text-transform:uppercase;
  letter-spacing:.04em; margin:14px 0 0}

/* Corps de lecture */
.papier{
  background:var(--surface); border:1px solid var(--trait); border-radius:20px;
  padding:36px; margin:24px 0 40px; box-shadow:var(--ombre-1);
}
.papier > *{max-width:68ch}
.papier h2{font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.01em;
  margin:36px 0 12px; text-wrap:balance}
.papier h2:first-child{margin-top:0}
.papier h3{font-size:22px; line-height:1.3; font-weight:700; margin:28px 0 10px}
.papier p{margin:0 0 16px}
.papier ul,.papier ol{margin:0 0 18px; padding-left:24px}
.papier li{margin:0 0 10px}
.papier strong{font-weight:700}
.papier .exemple{
  background:#F1F5F9; border:1px solid var(--trait); border-radius:12px;
  padding:16px 18px; font-size:17px; color:var(--encre-2); margin:0 0 18px;
}
.papier .exemple b{color:var(--encre)}

/* Le point qui compte, une fois par article et pas plus */
.retenir{
  background:linear-gradient(112deg,#002FA7 8%,#1B7A34 96%); color:#fff;
  border-radius:16px; padding:24px 26px; margin:28px 0; max-width:68ch;
  box-shadow:var(--ombre-2);
}
.retenir p{margin:0; font-size:20px; line-height:1.5; font-weight:600}
.retenir .quoi{display:block; font-size:13px; text-transform:uppercase;
  letter-spacing:.08em; opacity:.85; font-weight:700; margin-bottom:8px}

/* Ce que nous verifions vraiment */
.verifie{list-style:none; padding:0; margin:0 0 18px; display:flex;
  flex-direction:column; gap:12px; max-width:68ch}
.verifie li{display:flex; gap:12px; align-items:flex-start}
.verifie .puce{flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  background:#EAF0FF; color:var(--klein); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px}

/* Liste des conseils */
.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin:24px 0 40px}
.carte{
  background:var(--surface); border:1px solid var(--trait); border-radius:18px;
  padding:26px; box-shadow:var(--ombre-1); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease;
}
.carte:hover,.carte:focus-visible{box-shadow:var(--ombre-2); transform:translateY(-2px)}
.carte h2{font-size:22px; line-height:1.3; font-weight:700; margin:0 0 10px; color:var(--klein)}
.carte p{margin:0 0 16px; color:var(--encre-2); font-size:17px}
.carte .lire{margin-top:auto; font-size:15px; font-weight:700; color:var(--klein)}

/* Chiffres de la base */
.socle{background:var(--surface); border:1px solid var(--trait); border-radius:18px;
  padding:26px; margin:0 0 40px; box-shadow:var(--ombre-1)}
.socle h2{font-size:22px; margin:0 0 6px; font-weight:700}
.socle p.sous{margin:0 0 18px; color:var(--encre-2); font-size:17px}
.socle-rang{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px}
.socle-un b{display:block; font-size:26px; font-weight:800; color:var(--klein);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.socle-un span{display:block; font-size:15px; color:var(--encre-2); line-height:1.4}

/* Tableaux des sources.
   Un tableau large ne doit jamais faire deborder la page : il defile dans sa
   propre boite, et la page reste immobile. */
.titre-bloc{font-size:26px; font-weight:700; letter-spacing:-.01em; margin:36px 0 8px}
.dit{margin:0 0 16px; color:var(--encre-2); max-width:68ch}
.tableau-boite{
  background:var(--surface); border:1px solid var(--trait); border-radius:16px;
  box-shadow:var(--ombre-1); overflow-x:auto; margin:0 0 32px;
}
.tableau{width:100%; border-collapse:collapse; font-size:16px; min-width:560px}
.tableau th,.tableau td{padding:14px 18px; text-align:left; vertical-align:top}
.tableau thead th{
  font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--gris);
  font-weight:700; border-bottom:1px solid var(--trait); white-space:nowrap;
}
.tableau tbody tr + tr th,.tableau tbody tr + tr td{border-top:1px solid #F1F5F9}
.tableau tbody th{font-weight:600; color:var(--encre)}
.tableau .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tableau .petit{font-size:14px; color:var(--encre-2)}
.etat{
  display:inline-block; font-size:13px; font-weight:700; padding:4px 10px;
  border-radius:999px; white-space:nowrap;
}
.etat--ok{background:#E9F4EC; color:#166B2C}
.etat--muet{background:#FDECEC; color:#B01515}

/* Les notes attribuees par des tiers.
   Elles se distinguent de l'engagement CharteCyber, qui est declaratif : ici,
   c'est un organisme exterieur qui mesure, et le lecteur peut refaire le test. */
.mesures{
  background:var(--surface); border:1px solid var(--trait); border-radius:20px;
  padding:30px; margin:0 0 24px; box-shadow:var(--ombre-1);
}
.mesures .charte-etiquette{
  font-size:13px; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--klein); margin:0 0 6px;
}
.mesures h2{font-size:26px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em; color:var(--encre)}
.mesures-intro{margin:0 0 22px; color:var(--encre-2); max-width:68ch}
.mesures-rang{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px}
.mesure b{
  display:block; font-size:34px; font-weight:800; color:var(--klein);
  letter-spacing:-.02em; line-height:1.1; margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.mesure span{display:block; font-size:15px; line-height:1.5; color:var(--encre-2)}
.mesure a{display:inline-block; margin-top:8px; font-size:14px; font-weight:600}
@media (max-width:640px){ .mesures{padding:24px 20px} .mesures h2{font-size:22px} }

/* L'engagement CharteCyber.
   Pas de logo : Cybermalveillance.gouv.fr n'en fournit aucun pour le web, et
   afficher le sien sans autorisation serait usurper un signe d'Etat. On montre
   donc l'engagement lui-meme, point par point, avec ce que nous faisons pour
   chacun. C'est verifiable, ce qu'un logo n'est pas. */
.charte{
  background:linear-gradient(112deg,#002FA7 8%,#1B7A34 96%); color:#fff;
  border-radius:20px; padding:32px; margin:0 0 32px; box-shadow:var(--ombre-2);
}
.charte-etiquette{
  font-size:13px; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  opacity:.85; margin:0 0 6px;
}
.charte h2{font-size:26px; font-weight:700; margin:0 0 12px; letter-spacing:-.01em}
.charte-intro{margin:0 0 24px; font-size:17px; line-height:1.6; max-width:68ch; opacity:.95}
.charte-intro a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.charte-liste{
  list-style:none; counter-reset:ceng; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
}
.charte-liste li{counter-increment:ceng; position:relative; padding-left:38px}
.charte-liste li::before{
  content:counter(ceng); position:absolute; left:0; top:1px;
  width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800;
}
.charte-liste b{display:block; font-size:17px; font-weight:700; margin-bottom:3px}
.charte-liste span{display:block; font-size:15px; line-height:1.5; opacity:.92}
@media (max-width:640px){
  .charte{padding:24px 20px}
  .charte h2{font-size:22px}
}

/* Rappel de fin */
.rappel{background:var(--surface); border-top:1px solid var(--trait); padding:48px 0}
.rappel h2{font-size:26px; font-weight:700; margin:0 0 8px}
.rappel p{margin:0 0 20px; color:var(--encre-2); max-width:58ch}
.bt{display:inline-block; text-decoration:none; color:#fff; font-weight:700; font-size:18px;
  background:linear-gradient(112deg,#002FA7 8%,#1B7A34 96%);
  padding:16px 30px; border-radius:999px; min-height:56px; line-height:24px;
  box-shadow:var(--ombre-1)}

/* Pied */
.bas{background:#0E1726; color:#CBD5E1; padding:36px 0 44px; font-size:15px}
.bas a{color:#fff; text-decoration:none; margin-right:22px; font-weight:600;
  display:inline-block; margin-bottom:8px}
.bas a:hover{text-decoration:underline}
.bas p{margin:14px 0 0; color:#94A3B8; max-width:70ch; line-height:1.6; font-size:13px}

@media (max-width:640px){
  .titre-bloc{font-size:22px}
  .tableau{font-size:15px}
  .tableau th,.tableau td{padding:12px 14px}
  .chapeau h1{font-size:28px}
  .chapeau .intro{font-size:18px}
  .papier{padding:24px 20px; border-radius:16px}
  .papier h2{font-size:22px}
  .papier h3{font-size:20px}
  /* Sur un ecran etroit, le nom complet et le libelle long se disputent la
     ligne : le nom gagne, l'action se raccourcit. */
  .tete-action{padding:10px 16px; font-size:14px}
  .tete-action .long{display:none}
  .tete-action .court{display:inline}
  .tete-marque span{font-size:15px}
  .tete-marque img{width:28px; height:28px}
}
@media (prefers-reduced-motion:reduce){
  .carte{transition:none}
  .carte:hover,.carte:focus-visible{transform:none}
}