/* Accueil : la Une, la carte rouge de vérification, les listes éditoriales (tout en coins arrondis) */
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 64px); }
.sec-head h2 { font-size: var(--fs-xl); }

/* la Une */
.une { padding-block: clamp(24px, 3.5vw, 56px) clamp(40px, 5vw, 80px); }
.une-title { margin-bottom: clamp(24px, 3vw, 48px); }
.une-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
.une-main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.une-lead { max-width: 34em; }
.une-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.une-by { font: 500 var(--fs-s)/1.4 var(--font-text); color: var(--color-ink-2); }
.vignette { margin: 0; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 16px; padding: clamp(18px, 2.4vw, 32px); background: var(--color-s1); border-radius: var(--r-xl); }
.vignette figcaption { font: 500 var(--fs-s)/1.45 var(--font-text); color: var(--color-ink-2); }
.bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 16px); flex: 1; min-height: clamp(200px, 24vw, 280px); }
.bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-width: 0; }
.bar-plot { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; }
.bar-v { font: 800 var(--fs-l)/1 var(--font-display); font-stretch: 75%; text-align: center; }
.bar-b { width: 100%; height: calc((100% - 44px) * var(--h, 0)); min-height: 10px; background: var(--color-ink); border-radius: var(--r-bar) var(--r-bar) 0 0; transform-origin: bottom; transition: transform 0.9s var(--ease); }
.is-anim [data-rv]:not(.is-in) .bar-b { transform: scaleY(0.04); }
.bar.is-zero .bar-b { background: var(--color-s2); }
.bar.is-peak .bar-b { background: var(--color-accent); }
.bar-l { display: grid; justify-items: center; font: 600 var(--fs-s)/1.15 var(--font-text); color: var(--color-ink-2); }
.feed { align-self: stretch; padding: clamp(16px, 2vw, 28px); background: var(--color-s1); border-radius: var(--r-xl); }
.feed h2 { font-size: var(--fs-l); margin-bottom: 16px; padding-left: 6px; }
.feed-state { margin-bottom: 12px; padding-left: 6px; font: 600 var(--fs-s)/1.4 var(--font-text); }
.feed-state button { all: unset; box-sizing: border-box; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; min-height: 44px; display: inline-flex; align-items: center; margin-left: 8px; }
.feed-state button:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; border-radius: var(--r-pill); }
.feed-list { display: grid; gap: 6px; }
.feed-list a { display: grid; gap: 3px; padding: 14px 18px; background: var(--color-ground); border-radius: var(--r-md); text-decoration: none; transition: background-color 0.15s; }
.feed-list a:hover { background: var(--color-s2); }
.fi-name { font: 800 var(--fs-l)/1.05 var(--font-display); font-stretch: 75%; word-spacing: 0.1em; overflow-wrap: anywhere; }
.fi-meta { font: 600 var(--fs-s)/1.3 var(--font-text); color: var(--color-ink-2); }
.fi-text { font-size: var(--fs-s); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1000px) { .une-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); } }

/* la carte rouge de vérification */
.verif { padding-block: clamp(40px, 5.5vw, 88px); }
.verif-in { display: grid; gap: clamp(24px, 3vw, 40px); }
.verif h2 { color: var(--color-ground); max-width: 15em; }
.verif-form { display: grid; gap: 12px; max-width: 1000px; }
.verif-label, .lundi-form label { font: 700 var(--fs-b)/1.3 var(--font-text); padding-left: 8px; }
.verif-row { display: flex; gap: 8px; }
.verif-row input { flex: 1; min-width: 0; min-height: 64px; padding: 0 28px; border: 0; border-radius: var(--r-pill); background: var(--color-ground); color: var(--color-ink); font: 500 var(--fs-l)/1.2 var(--font-text); }
.verif-row input::placeholder { color: var(--color-ink-2); opacity: 1; }
.verif-row input:focus-visible { outline: 4px solid var(--color-ink); outline-offset: 3px; }
.verif-row input[aria-invalid="true"] { outline: 3px solid var(--color-danger); outline-offset: -3px; }
.verif-row .btn { min-height: 64px; padding-inline: clamp(24px, 3vw, 36px) 14px; }
.verif-row .btn > svg { width: 40px; height: 40px; padding: 10px; }
.verif-err { padding: 12px 20px; background: var(--color-ground); color: var(--color-danger); border-radius: var(--r-md); font: 700 var(--fs-s)/1.4 var(--font-text); }
.verif-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.verif-ex-t { font: 700 var(--fs-s)/1.3 var(--font-text); padding-left: 8px; }
.verif-ex ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ex { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--color-ink); color: var(--color-ground); border-radius: var(--r-pill); font: 600 var(--fs-s)/1 var(--font-text); text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.ex:hover { background: var(--color-ground); color: var(--color-ink); }
@media (max-width: 560px) { .verif-row { flex-direction: column; } .verif-row .btn { width: 100%; } }

/* les plus signalés */
.rank { display: grid; gap: 8px; counter-reset: rank; }
.rank li { counter-increment: rank; }
.rank a { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 2.4fr) auto; align-items: center; gap: 12px 24px; padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 28px); background: var(--color-s1); border-radius: var(--r-lg); text-decoration: none; transition: background-color 0.15s; }
.rank a:hover { background: var(--color-s2); }
.rank a::before { content: counter(rank); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-ground); font: 800 28px/1 var(--font-display); font-stretch: 75%; }
.rank-name { font: 800 var(--fs-h)/0.95 var(--font-display); font-stretch: 75%; overflow-wrap: anywhere; }
.rank-meta { display: grid; gap: 2px; font: 600 var(--fs-s)/1.3 var(--font-text); }
.rank-meta span:last-child { color: var(--color-ink-2); }
@media (max-width: 800px) {
  .rank { gap: 16px; }
  .rank a { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; padding: 20px 14px; }
  .rank a::before { grid-row: 1 / span 3; align-self: start; }
  .rank-name, .rank-score, .rank-meta { grid-column: 2; }
  .rank-name { grid-row: 1; }
  .rank-score { grid-row: 2; justify-self: start; }
  .rank-meta { grid-row: 3; font-size: var(--fs-l); line-height: 1.3; }
  .rank .chip { white-space: normal; font-size: var(--fs-s); }
}

/* les dossiers (types d'arnaque) : une grande carte grise, des lignes blanches */
.dos-list { display: grid; gap: 8px; }
.dos-list a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: 8px 32px; align-items: center; padding: clamp(16px, 2vw, 26px) clamp(18px, 2.2vw, 30px); background: var(--color-ground); border-radius: var(--r-lg); text-decoration: none; transition: background-color 0.15s; }
.dos-list a:hover { background: var(--color-s2); }
.dos-name { font: 800 var(--fs-h)/0.95 var(--font-display); font-stretch: 75%; }
.dos-count { justify-self: end; white-space: nowrap; padding: 6px 16px; border-radius: var(--r-pill); background: var(--color-s1); font: 700 var(--fs-s)/1.3 var(--font-text); text-align: center; }
@media (max-width: 900px) { .dos-list a { grid-template-columns: minmax(0, 1fr); } .dos-count { justify-self: start; order: 2; } .dos-desc { order: 3; } }

/* les guides pratiques : quatre cartes arrondies */
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.guide { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); background: var(--color-s1); border-radius: var(--r-xl); }
.guide h3 { font-size: var(--fs-h); }
.guide-lead { font-size: var(--fs-l); line-height: 1.4; margin: 16px 0 22px; }
.guide ol { counter-reset: gs; display: grid; gap: 8px; }
.guide ol li { counter-increment: gs; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 16px 12px 12px; background: var(--color-ground); border-radius: var(--r-md); }
.guide ol li::before { content: counter(gs); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-ink); color: var(--color-ground); font: 800 var(--fs-s)/1 var(--font-display); font-stretch: 87.5%; }
.guide-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; padding-top: 22px; font: 600 var(--fs-s)/1.3 var(--font-text); color: var(--color-ink-2); }
.guide-foot a { color: var(--color-ink); display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--color-s2); font-weight: 700; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.guide-foot a:hover { background: var(--color-ink); color: var(--color-ground); }
@media (max-width: 899px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* l'appel à signaler */
.appel-in { display: grid; gap: 28px; justify-items: start; }
.appel h2 { font-size: var(--fs-xl); max-width: 16em; }
.appel .lead { max-width: 34em; }

/* la méthode en bref */
.meth-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.meth-grid > h2 { font-size: var(--fs-xl); grid-column: 1 / -1; max-width: 14em; }
.meth-text { display: grid; gap: 24px; align-content: start; justify-items: start; }
.meth-viz { display: grid; gap: 20px; align-content: start; }
.pillars-bar { display: grid; gap: 8px; }
.pillars-bar li { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr) 56px; align-items: center; gap: 4px 16px; padding: 14px 20px; background: var(--color-ground); border-radius: var(--r-md); font: 600 var(--fs-s)/1.2 var(--font-text); }
.pb-track { height: 14px; background: var(--color-s2); border-radius: var(--r-pill); overflow: clip; }
.pb-track i { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--color-ink); border-radius: var(--r-pill); transform-origin: left; transition: transform 0.9s var(--ease); }
.is-anim [data-rv]:not(.is-in) .pb-track i { transform: scaleX(0.04); }
.pb-w { font: 800 var(--fs-l)/1 var(--font-display); font-stretch: 75%; text-align: right; }
.bands { display: grid; gap: 8px; }
.bands li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 5fr); gap: 4px 16px; align-items: center; padding: 14px 22px; background: var(--tone); color: var(--on-tone); border-radius: var(--r-lg); font: 600 var(--fs-s)/1.3 var(--font-text); }
.bands strong { font: 800 var(--fs-l)/1 var(--font-display); font-stretch: 75%; }
@media (min-width: 1000px) { .meth-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
@media (max-width: 560px) { .bands li { grid-template-columns: minmax(0, 1fr) auto; } .bands li > span:last-child { grid-column: 1 / -1; } .pillars-bar li { grid-template-columns: minmax(0, 1fr) 56px; } .pb-track { grid-column: 1 / -1; grid-row: 2; } }

/* l'alerte du lundi */
.lundi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
.lundi h2 { font-size: var(--fs-xl); margin-bottom: 20px; }
.lundi-form { display: grid; gap: 12px; }
.lundi-form input { flex: 1; min-width: 0; min-height: 60px; padding: 0 24px; border: 2px solid var(--color-ink-2); border-radius: var(--r-pill); background: var(--color-ground); color: var(--color-ink); font: 500 var(--fs-u)/1.2 var(--font-text); }
.lundi-form input:hover { border-color: var(--color-ink); }
.lundi-form input:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; border-color: var(--color-ink); }
.lundi-form input[aria-invalid="true"] { border-color: var(--color-danger); }
.lundi-form .btn { min-height: 60px; }
.lundi-msg { padding-left: 8px; font: 500 var(--fs-s)/1.45 var(--font-text); color: var(--color-ink-2); }
.lundi-msg.is-ok { color: var(--color-ok); font-weight: 700; }
.lundi-msg.is-err { color: var(--color-danger); font-weight: 700; }
@media (min-width: 900px) { .lundi-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* emplacements photo prévus (n'existent dans le DOM que si le fichier répond) */
.photo { margin: 0 0 20px; width: 100%; }
.photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--color-s2); }
.guide .photo img { aspect-ratio: 3 / 2; }