/* Outil d'audit des pubs Meta, LEAD CLUB : option B « tech IA nouvelle génération » (planche du 13/10/2026). */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --fond: #05060E;
  --panneau: rgba(10, 12, 28, .78);
  --ligne: rgba(255, 255, 255, .1);
  --ligne-douce: rgba(255, 255, 255, .06);
  --texte: #EEF0FF;
  --doux: #A9AFD0;
  --pale: #8D93B8;
  --eteint: #5D6488;
  --bleu: #002BFA;
  --bleu-clair: #4E6BFF;
  --neon: #D2F716;
  --alerte: #FF8A7A;
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --sans: Geist, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--texte); background: var(--fond);
  background-image: radial-gradient(900px 520px at 50% -140px, rgba(0, 43, 250, .55), transparent 70%),
    radial-gradient(600px 400px at 85% 640px, rgba(210, 247, 22, .06), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--neon); }
a:hover { color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); }
.conteneur { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 48px); }
[hidden] { display: none !important; }

/* Navigation */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.nav img { height: 28px; width: auto; display: block; }
.nav-liens { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .03); }
.nav-liens a { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: #B9BEDA; text-decoration: none; }
.nav-liens a.plein { color: var(--fond); background: var(--texte); font-weight: 600; }
@media (max-width: 640px) { .nav-liens a:not(.plein) { display: none; } .nav img { height: 22px; } }

/* Pastille et puce vivante */
.pastille { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); font-family: var(--mono); font-size: 12.5px; color: #B9BEDA; }
.pastille.vive { border-color: rgba(210, 247, 22, .35); color: var(--neon); }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); flex: 0 0 auto; }
.point.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Accueil */
.hero { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding-block: clamp(40px, 8vw, 100px) 56px; }
.hero h1 { margin: 0; font-size: clamp(36px, 6vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; max-width: 1000px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--neon); text-shadow: 0 0 32px rgba(210, 247, 22, .35); }
.hero > p { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--doux); max-width: 640px; text-wrap: pretty; }
.note { margin: 0; font-family: var(--mono); font-size: 12.5px; color: #6E76A3; }

/* Le champ « prompt » */
.prompt { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.prompt-boite { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 14, 34, .8); box-shadow: 0 0 0 6px rgba(0, 43, 250, .12), 0 30px 80px -20px rgba(0, 43, 250, .55); transition: box-shadow 200ms var(--sortie), border-color 200ms var(--sortie); }
.prompt-boite:focus-within { border-color: rgba(210, 247, 22, .6); box-shadow: 0 0 0 6px rgba(210, 247, 22, .12), 0 30px 80px -20px rgba(0, 43, 250, .55); }
.prompt-boite svg { flex: 0 0 auto; }
.prompt-boite input { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--texte); font-family: var(--mono); font-size: 18px; outline: none; }
.prompt-boite input::placeholder { color: var(--eteint); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--neon); color: var(--fond); font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 160ms var(--sortie), opacity 160ms ease; }
.bouton:active { transform: scale(0.97); }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton .touche { font-family: var(--mono); font-size: 13px; padding: 2px 7px; border-radius: 6px; background: rgba(5, 6, 14, .12); }
.bouton.large { width: 100%; height: 54px; }
.erreur { margin: 0; min-height: 1em; font-size: 14px; color: var(--alerte); }
@media (max-width: 560px) {
  .prompt-boite { padding: 4px 6px 4px 14px; }
  .prompt-boite .bouton { display: none; }
  .prompt .bouton-mobile { display: inline-flex; }
}
.bouton-mobile { display: none; width: 100%; }

/* Panneaux */
.panneau { border-radius: 20px; border: 1px solid var(--ligne); background: var(--panneau); overflow: hidden; }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--ligne-douce); font-family: var(--mono); font-size: 12.5px; color: var(--pale); }
.panneau-corps { padding: 20px; }

/* Journal de l'agent */
.journal { list-style: none; margin: 0; padding: 4px 20px 12px; display: flex; flex-direction: column; font-family: var(--mono); font-size: 13.5px; }
.etape { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ligne-douce); align-items: start; transition: opacity 200ms var(--sortie), transform 200ms var(--sortie); }
@starting-style { .etape { opacity: 0; transform: translateY(6px); } }
.etape:last-child { border-bottom: 0; }
.etape .titre { font-family: var(--sans); font-size: 15px; color: var(--texte); }
.etape .detail { display: block; margin-top: 3px; color: var(--pale); }
.etape .temps { color: var(--eteint); }
.etape[data-statut="en_cours"] .temps { color: var(--neon); }
.etape[data-statut="echec"] .detail { color: var(--alerte); }
.icone { width: 16px; height: 16px; margin-top: 2px; display: grid; place-items: center; }
.icone .point { width: 9px; height: 9px; }
.icone svg { transition: opacity 180ms ease, filter 180ms ease; }
@starting-style { .icone svg { opacity: 0; filter: blur(2px); } }

/* Frise des pubs */
.frise { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--ligne-douce); border-bottom: 1px solid var(--ligne-douce); background-image: linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 33.33% 100%; }
.frise .rang { height: 4px; display: flex; }
.frise .trait { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .24); transform-origin: left center; transition: opacity 260ms var(--sortie), transform 260ms var(--sortie); }
.frise .trait.actif { background: var(--neon); box-shadow: 0 0 10px rgba(210, 247, 22, .8); }
.frise .trait.attente { background: rgba(255, 255, 255, .06); animation: attente 1.4s ease-in-out infinite; }
@keyframes attente { 50% { opacity: .35; } }
@starting-style { .frise .trait:not(.attente) { opacity: 0; transform: scaleX(0.6); } }
.frise-axe { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--eteint); }
.legende { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.legende b { white-space: nowrap; }
.legende b { font-weight: 500; font-size: 15px; }
.legende span { font-family: var(--mono); font-size: 12px; color: var(--pale); }

/* Score en anneau */
.anneau { --p: 0%; position: relative; width: 132px; height: 132px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--neon) 0 var(--p), rgba(255, 255, 255, .08) var(--p) 100%); box-shadow: 0 0 50px -8px rgba(210, 247, 22, .45); transition: --p 1100ms var(--sortie); }
.anneau > div { position: absolute; inset: 8px; border-radius: 50%; background: #0A0C1C; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anneau strong { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; }
.anneau small { font-family: var(--mono); font-size: 12px; color: var(--pale); }
.anneau.petit { width: 104px; height: 104px; }
.anneau.petit strong { font-size: 30px; }
.bloc-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bloc-score .verdict { flex: 1 1 220px; font-size: 19px; line-height: 1.35; font-weight: 500; }
.constats { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ligne-douce); display: flex; flex-direction: column; gap: 10px; }
.constats li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; transition: opacity 240ms var(--sortie), transform 240ms var(--sortie); }
@starting-style { .constats li { opacity: 0; transform: translateY(6px); } }
.constats li::before { content: counter(c, decimal-leading-zero); counter-increment: c; font-family: var(--mono); color: var(--neon); }
.constats { counter-reset: c; }

/* Atelier (analyse en direct) */
.atelier { padding-block: 8px 64px; display: flex; flex-direction: column; gap: 20px; }
.atelier-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.atelier-tete h1 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; }
.atelier-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* Sur écran étroit : une seule colonne, dans l'ordre de lecture du dirigeant (journal, score, frise, porte). */
@media (max-width: 979px) {
  .atelier-grille { display: flex; flex-direction: column; }
  .atelier-grille .colonne { display: contents; }
  #panneau-journal { order: 1; } #panneau-score { order: 2; } #panneau-frise { order: 3; }
  #porte, #panneau-approfondi, #panneau-erreur { order: 4; }
}
.colonne { display: flex; flex-direction: column; gap: 20px; }
.choix { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; }
.choix p { margin: 0 0 4px; font-size: 14.5px; color: var(--doux); }
.choix button { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .03); color: var(--texte); font: 15px var(--sans); text-align: left; cursor: pointer; transition: transform 160ms var(--sortie), border-color 160ms ease; }
.choix button:active { transform: scale(0.98); }
.choix button span { font-family: var(--mono); font-size: 12.5px; color: var(--pale); }
@media (hover: hover) and (pointer: fine) { .choix button:hover { border-color: rgba(210, 247, 22, .5); } }

/* Porte de capture */
.porte { border-radius: 20px; border: 1px solid rgba(78, 107, 255, .45); background: linear-gradient(180deg, rgba(0, 43, 250, .18), rgba(10, 12, 28, .8) 55%); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: opacity 260ms var(--sortie), transform 260ms var(--sortie); }
@starting-style { .porte { opacity: 0; transform: translateY(10px); } }
.porte h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.porte > p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--doux); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ legend { padding: 0; font-family: var(--mono); font-size: 12px; color: var(--pale); }
.champ input { height: 50px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(5, 6, 14, .6); color: var(--texte); font: 16px var(--sans); }
.champ input::placeholder { color: var(--eteint); }
.champ input:focus { outline: 2px solid var(--bleu-clair); outline-offset: 1px; }
fieldset.champ { margin: 0; padding: 0; min-width: 0; border: 0; }
.porte .erreur:empty { display: none; }
.tranches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.tranches label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); font-family: var(--sans); font-size: 14px; color: var(--texte); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.tranches input { accent-color: var(--neon); }
.tranches label:has(input:checked) { border-color: var(--neon); background: rgba(210, 247, 22, .08); }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.mentions { margin: 0; font-size: 12.5px; line-height: 1.5; color: #6E76A3; }

/* Sections marketing */
.section { padding-bottom: clamp(64px, 9vw, 120px); }
.section h2 { margin: 0 0 28px; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; max-width: 760px; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .bento { grid-template-columns: minmax(0, 1fr); } }
.tuile { padding: 28px; border-radius: 20px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 12px; }
.tuile.large { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; }
.tuile.vive { border-color: rgba(210, 247, 22, .25); background: rgba(210, 247, 22, .04); }
.tuile h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.tuile p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--doux); }
.etiquette { font-family: var(--mono); font-size: 12px; color: var(--bleu-clair); }
.tuile.vive .etiquette { color: var(--neon); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 13px; }
.puces span { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); color: #D5D9F2; }
.puces b { color: var(--neon); font-weight: 500; }
.barres-duel { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 13px; }
.barres-duel div { display: grid; grid-template-columns: 110px 1fr 34px; gap: 10px; align-items: center; }
.jauge { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 4px; background: var(--neon); }
.jauge i.bleu { background: var(--bleu-clair); }
.cta-final { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cta-final h2 { margin: 0; }

/* Exemple (panneau de démonstration) */
.exemple-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.exemple-grille > div + div { border-left: 1px solid var(--ligne-douce); }
@media (max-width: 900px) { .exemple-grille > div + div { border-left: 0; border-top: 1px solid var(--ligne-douce); } }
.ecrit { margin-top: 10px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ligne-douce); font-size: 15.5px; line-height: 1.55; color: #D5D9F2; }
.curseur { display: inline-block; width: 8px; height: 17px; margin-left: 3px; vertical-align: -3px; background: var(--neon); animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.legende-exemple { margin: 14px 0 0; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--eteint); }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne-douce); }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 13.5px; color: var(--pale); }
.pied img { height: 22px; width: auto; }
.pied a { color: var(--pale); }

/* Moins de mouvement si le visiteur l'a demandé : on garde les fondus, on retire les déplacements. */
@media (prefers-reduced-motion: reduce) {
  .point.pulse, .frise .trait.attente, .curseur { animation: none; }
  .etape, .constats li, .porte, .frise .trait { transform: none !important; }
  .anneau { transition: none; }
}

/* ─── Rapport ─────────────────────────────────────────────────────────────────────────── */
.rapport { max-width: 1040px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 72px; }
.rapport-tete { display: flex; flex-direction: column; gap: 10px; padding-block: 12px 10px; }
.rapport-tete h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.surtitre { font-family: var(--mono); font-size: 12.5px; color: var(--pale); }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.duo > div + div { border-left: 1px solid var(--ligne-douce); }
@media (max-width: 900px) { .duo > div + div { border-left: 0; border-top: 1px solid var(--ligne-douce); } }
.bloc { padding: 24px; }
.bloc h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.bloc-tete span { font-family: var(--mono); font-size: 12px; color: var(--pale); }
.bloc p.lead { margin: 0 0 18px; font-size: 17px; line-height: 1.5; color: #D5D9F2; text-wrap: pretty; }
.critere { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--ligne-douce); }
.critere:first-of-type { border-top: 0; padding-top: 0; }
.critere .nom { font-size: 15.5px; font-weight: 500; }
.critere .pts { font-family: var(--mono); font-size: 14px; color: var(--neon); }
.critere .pts.hors { color: var(--eteint); }
.critere .jauge { grid-column: 1 / -1; }
.critere .explication { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--doux); }
.critere .explication .mono { color: var(--pale); font-size: 12.5px; }
.note-bas { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--eteint); }
.duel { display: grid; gap: 0; font-size: 14px; }
.duel-ligne { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--ligne-douce); align-items: center; }
.duel-ligne:first-child { border-top: 0; font-family: var(--mono); font-size: 12px; color: var(--pale); padding-top: 0; }
.duel-ligne b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.duel-ligne b.vous { color: var(--neon); }
.duel-ligne .lib { color: var(--doux); }
.barre-ligne { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 70px; gap: 12px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.barre-ligne span:last-child { font-family: var(--mono); font-size: 13px; color: var(--pale); text-align: right; }
.priorites { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ligne-douce); display: flex; flex-direction: column; gap: 12px; counter-reset: p; }
.priorites li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.priorites li::before { counter-increment: p; content: counter(p); width: 24px; height: 24px; border-radius: 6px; background: rgba(210, 247, 22, .12); color: var(--neon); font-family: var(--mono); font-size: 12.5px; display: grid; place-items: center; }
.sous-titre { display: block; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; color: var(--pale); }
.visuel { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ligne-douce); font-size: 14.5px; line-height: 1.5; }
.visuel .n { font-family: var(--mono); color: var(--neon); }
.visuel small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--pale); }
.citation { margin: 0; padding: 14px 0; border-top: 1px solid var(--ligne-douce); display: grid; grid-template-columns: 1fr auto; gap: 16px; font-size: 15px; line-height: 1.5; color: #D5D9F2; }
.citation:first-of-type { border-top: 0; padding-top: 0; }
.citation span { font-family: var(--mono); font-size: 12.5px; color: var(--pale); white-space: nowrap; }
.chute { border-radius: 20px; border: 1px solid rgba(210, 247, 22, .3); background: radial-gradient(600px 300px at 0% 0%, rgba(0, 43, 250, .35), transparent 70%), rgba(10, 12, 28, .85); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.chute .phrase { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.chute p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--doux); max-width: 640px; }
.calendrier { width: 100%; min-height: 680px; border: 0; border-radius: 14px; background: #fff; }
.calendrier-vide { border: 1px dashed rgba(255, 255, 255, .2); border-radius: 14px; padding: 28px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--pale); }
.bouton.discret { height: 40px; padding: 0 14px; font-size: 14px; background: rgba(255, 255, 255, .06); color: var(--texte); border: 1px solid var(--ligne); }
.chargement { padding-block: 120px; text-align: center; font-family: var(--mono); color: var(--pale); }
@media (max-width: 560px) {
  .bloc { padding: 20px 16px; }
  .barre-ligne { grid-template-columns: 96px 1fr 56px; gap: 8px; }
  .citation { grid-template-columns: 1fr; gap: 4px; }
}

/* Téléphone : anneau plus compact pour garder le verdict à côté, pastille raccourcie. */
@media (max-width: 560px) {
  .bloc-score { gap: 16px; flex-wrap: nowrap; }
  .bloc-score .verdict { flex-basis: 150px; font-size: 16px; }
  .anneau { width: 100px; height: 100px; }
  .anneau > div { inset: 7px; }
  .anneau strong { font-size: 32px; }
  .hero { align-items: flex-start; text-align: left; gap: 20px; padding-top: 28px; }
  .hero h1 { font-size: 34px; letter-spacing: -0.04em; }
  .pastille { font-size: 11px; padding: 6px 12px; }
  .pastille .long { display: none; }
}
@media (min-width: 561px) { .pastille .court { display: none; } }
.mentions a { color: var(--pale); }