/* L'étude du droit — feuille de style du site.
   Mise en page : un bandeau de tête fixe, des sections pleine largeur au contenu centré (1080 px au plus),
   la marque en blanc sur rouge suisse, le reste sur le noir des vidéos. Un seul thème, sombre, par choix :
   c'est le monde visuel des vidéos. */
:root {
  --fond: #0B0B0B;
  --surface: #17171A;
  --trait: #2C2C31;
  --texte: #F2EFE6;
  --doux: #B3AEA3;
  --rouge: #DA291C;
  --rouge-fonce: #B01F14;
  --vert: #4CAF7D;
  --f: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--f); font-size: 17px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.cadre { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.etroit { max-width: 760px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 900; }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 800; }
p { margin: 0; }
.sur { color: var(--rouge); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.chapeau { color: var(--doux); font-size: 1.12rem; max-width: 62ch; margin-top: 14px; }
.petit { color: var(--doux); font-size: 0.86rem; }
.bouton { display: inline-flex; align-items: center; background: var(--rouge); color: #fff; font-weight: 800; text-decoration: none; border-radius: 6px; padding: 12px 20px; border: 2px solid var(--rouge); }
.bouton:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.bouton.second { background: transparent; color: var(--texte); border-color: var(--trait); }
.bouton.second:hover { border-color: var(--texte); }

/* Tête */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--fond); }
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(11, 11, 11, 0.94); border-bottom: 1px solid var(--trait); backdrop-filter: blur(6px); }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.pastille svg { width: 34px; height: 34px; display: block; }
nav { display: flex; gap: 18px; font-weight: 600; font-size: 0.95rem; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--doux); }
nav a:hover { color: var(--texte); }

/* Une */
.une .cadre { padding-block: 56px 48px; }
.une .nom { margin-bottom: 22px; }
.une .nom span { display: inline-block; background: var(--rouge); color: #fff; font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.5rem); padding: 6px 14px 7px; border-radius: 6px; letter-spacing: -0.01em; }
.une h1 em { font-style: normal; color: var(--rouge); }
.une .liens { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Vidéos */
.videos .cadre, .methode .cadre { padding-block: 40px; }
.videos { border-top: 1px solid var(--trait); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; margin-top: 22px; }
.carte { display: grid; gap: 6px; text-decoration: none; position: relative; min-width: 0; }
.carte img { border-radius: 8px; border: 1px solid var(--trait); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.carte .num { color: var(--doux); font-size: 0.82rem; font-weight: 600; margin-top: 4px; }
.carte:hover h3 { text-decoration: underline; text-decoration-color: var(--rouge); }
.carte.inactive { opacity: 0.55; }
.carte .etat { position: absolute; top: 10px; right: 10px; background: var(--fond); color: var(--texte); font-size: 0.75rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--trait); }

/* Méthode */
.methode { background: var(--surface); }
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.etapes li { counter-increment: e; border-top: 3px solid var(--rouge); padding-top: 12px; color: var(--doux); }
.etapes li::before { content: counter(e); display: block; font-weight: 900; font-size: 1.6rem; color: var(--texte); margin-bottom: 4px; }
.etapes b { color: var(--texte); display: block; }

/* Inscription */
.inscription { background: var(--rouge); color: #fff; }
.inscription .cadre { padding-block: 44px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.inscription .sur { color: #fff; opacity: 0.85; }
.inscription p { margin-top: 10px; max-width: 46ch; }
.formulaire { display: grid; gap: 10px; min-width: 0; }
.formulaire label { font-weight: 600; font-size: 0.9rem; }
.formulaire input[type=email] { font: inherit; padding: 12px 14px; border-radius: 6px; border: 2px solid #fff; background: #fff; color: #111; width: 100%; }
.formulaire .accord { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 0.84rem; line-height: 1.45; }
.formulaire .accord input { margin-top: 3px; accent-color: #111; flex: none; }
.formulaire .accord a { color: #fff; }
.formulaire button { font: inherit; font-weight: 800; padding: 12px 20px; border-radius: 6px; border: 2px solid #fff; background: var(--fond); color: #fff; cursor: pointer; }
.formulaire button:disabled, .formulaire input:disabled { opacity: 0.65; cursor: not-allowed; }

/* Page d'une vidéo */
.video .cadre { padding-block: 40px 28px; }
.lecteur { display: block; position: relative; margin-top: 22px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); max-width: 100%; }
.lecteur img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lecteur .lire { position: absolute; left: 16px; bottom: 16px; background: var(--rouge); color: #fff; font-weight: 800; padding: 14px 24px; border-radius: 999px; white-space: nowrap; }
.lecteur .bientot { background: var(--fond); border: 1px solid var(--trait); }
.contenu .cadre { padding-block: 36px 52px; }
.colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.colonnes article { display: grid; gap: 14px; min-width: 0; }
.colonnes article p { max-width: 64ch; }
details { border-top: 1px solid var(--trait); padding-top: 14px; margin-top: 6px; }
summary { cursor: pointer; font-weight: 800; }
summary::marker { color: var(--rouge); }
details h3 { margin: 18px 0 8px; }
details p { display: grid; grid-template-columns: 2.2em 1fr; gap: 6px; margin-bottom: 8px; }
details .n { color: var(--rouge); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.reponse p { display: block; margin-top: 10px; }
aside { display: grid; gap: 16px; min-width: 0; position: sticky; top: 84px; }
.fiche { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 18px; display: grid; gap: 10px; justify-items: start; }
.fiche .sur { margin: 0; }
.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.92rem; color: var(--doux); }
.sources a { color: var(--texte); font-weight: 700; text-decoration-color: var(--rouge); }

/* Parcours */
.parcours { list-style: none; padding: 0; margin: 14px 0 34px; display: grid; gap: 2px; }
.parcours li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.parcours .num { color: var(--doux); font-variant-numeric: tabular-nums; font-weight: 600; }
.parcours b { display: block; }
.parcours div span { color: var(--doux); font-size: 0.92rem; }
.parcours .etat { font-size: 0.75rem; font-weight: 800; color: var(--doux); border: 1px solid var(--trait); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.parcours .etat.actif { color: #fff; background: var(--rouge); border-color: var(--rouge); }
.contenu h2 { margin-top: 30px; margin-bottom: 8px; }
.contenu .etroit > p { margin-top: 10px; }
.alerte { border: 2px solid var(--rouge); border-radius: 8px; padding: 12px 14px; margin-top: 18px; font-weight: 600; }

/* Pied */
.pied { border-top: 1px solid var(--trait); color: var(--doux); font-size: 0.86rem; }
.pied .cadre { padding-block: 26px 40px; display: grid; gap: 8px; }
.pied b { color: var(--texte); }

@media (max-width: 560px) {
  .lecteur .lire { left: 10px; bottom: 10px; padding: 7px 12px; font-size: 0.8rem; }
}
@media (max-width: 820px) {
  .inscription .cadre, .colonnes { grid-template-columns: 1fr; }
  aside { position: static; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }