/* ============================================================
   LAYOUT — la structure de page commune à tous les forks.
   Dépend de tokens.css (variables + primitives).
   Un site ne redéfinit ici que ce qui lui est vraiment propre.
   ============================================================ */

:root {
  --strike:    #DA2E2E;                   /* rature manuscrite */
  --highlight: rgba(255, 210, 30, .28);   /* surlignage or */
}

/* Les titres du modèle sont en 500, pas en 800 */
.hero h1, .sec-title { font-weight: 500; letter-spacing: -.02em; }

/* ---- Header ---- */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(6,10,7,.9); backdrop-filter: blur(14px); }
.nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px);
       padding-block: 18px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav a { color: var(--fg-dim); transition: color .2s; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--accent); }
.nav__drop { position: relative; }
.nav__drop > button { all: unset; cursor: pointer; color: var(--fg-dim); transition: color .2s; }
.nav__drop > button:hover, .nav__drop[data-open] > button { color: var(--accent); }
.nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
             display: none; flex-direction: column; gap: 4px; padding: 10px;
             background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 150px; }
.nav__drop[data-open] .nav__menu { display: flex; }
.nav__menu a { padding: 9px 14px; border-radius: 8px; }
.nav__menu a:hover { background: rgba(0,200,5,.1); }

/* ---- Hero ---- */
.hero { padding-top: clamp(46px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero h1 { font-size: clamp(40px, 7vw, 76px); }
.manifesto { max-width: 800px; margin: 42px auto 0; font-size: clamp(17px, 2.1vw, 23px);
             font-weight: 500; line-height: 1.55; text-transform: uppercase; letter-spacing: -.01em; }

/* Annotations façon RoughNotation, refaites en CSS/SVG — pas de librairie */
.mark { background: var(--highlight); box-shadow: 0 0 0 4px var(--highlight); border-radius: 3px; }
.strike { position: relative; white-space: nowrap; }
.strike::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C40 2, 70 8, 110 4 S170 7, 199 3' fill='none' stroke='%23DA2E2E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events: none;
}

/* ---- Comparateur avant / après draggable ---- */
.ba { position: relative; max-width: 560px; margin: 56px auto 0; aspect-ratio: 1;
      border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
      touch-action: none; user-select: none; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__top { clip-path: inset(0 var(--rev, 50%) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: calc(100% - var(--rev, 50%));
              width: 3px; background: var(--accent); box-shadow: var(--glow-green); transform: translateX(-50%); }
.ba__grip { position: absolute; top: 50%; left: 50%; translate: -50% -50%;
            width: 46px; height: 46px; border-radius: var(--r-pill);
            background: var(--accent); color: var(--on-accent);
            display: grid; place-items: center; font-size: 15px; font-weight: 900; letter-spacing: -1px; }
.ba__label { position: absolute; bottom: 14px; padding: 6px 14px; border-radius: var(--r-pill);
             background: rgba(6,10,7,.72); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ba__label--l { left: 14px; } .ba__label--r { right: 14px; }

/* ---- Séparateur flèche ---- */
.divider { display: grid; place-items: center; padding-top: 56px; }
.divider svg { width: 30px; height: 30px; fill: var(--accent); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(9px); } }

/* ---- Titres de section ---- */
.sec-title { font-size: clamp(32px, 5.4vw, 62px); text-align: center; }

/* ---- Emplacement média large (vidéo, GIF, image) ---- */
.video { position: relative; aspect-ratio: 16/9; max-width: 940px; margin: 46px auto 0;
         border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video > img { width: 100%; height: 100%; object-fit: cover; }
.video--contain { background: var(--bg); }
.video--contain > img { object-fit: contain; }

.audio { max-width: 560px; margin: 34px auto 0; }
.audio audio { width: 100%; }

/* ---- Comparatif de chaînes ---- */
.compare { display: grid; gap: 22px; margin-top: 54px; align-items: stretch; }
@media (min-width: 980px) { .compare { grid-template-columns: 1fr 1.16fr 1fr; align-items: center; } }
.col { display: flex; flex-direction: column; text-align: center; }
.col__rank { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
.col--win .col__rank { color: var(--gold); }
.col__name { font-size: clamp(23px, 2.8vw, 32px); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; margin: 10px 0 3px; }
.col__ticker { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--fg-dim); }
.col__verdict { align-self: center; margin: 18px 0 22px; padding: 7px 16px; border-radius: var(--r-pill);
                font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
                background: rgba(255,255,255,.05); color: var(--fg-dim); }
.col--win .col__verdict { background: linear-gradient(90deg, var(--green), var(--gold)); color: var(--on-accent); }
.col__stats { list-style: none; margin: 0 0 26px; padding: 0; }
.col__stats li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--fg-dim); }
.col--win .col__stats li { color: var(--fg); }
.col__blurb { font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); margin: 0 0 26px; }
.col .btn { margin-top: auto; justify-content: center; }

/* ---- Témoignages ---- */
.quotes { display: grid; gap: 20px; }
@media (min-width: 760px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { text-align: center; }
.quote__tag { font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.quote--real .quote__tag { color: var(--green); }
.quote--fake .quote__tag { color: var(--fg-faint); }
.quote__body { font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.02em; margin: 16px 0 14px; }
.quote__who { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }

.gallery { margin-top: 48px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }

/* ---- Footer ---- */
.foot { padding-block: 46px 38px; border-top: 1px solid var(--line); }
.foot__links { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center;
               font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.foot__links a { color: var(--fg-dim); transition: color .2s; }
.foot__links a:hover { color: var(--accent); }
.foot__legal { margin-top: 28px; text-align: center; font-size: 11.5px; line-height: 1.75;
               color: var(--fg-faint); max-width: 640px; margin-inline: auto; }