/* Mise en page : une colonne étroite, bandeau marine repris du logo, cartes vidéo en grille. */
:root {
  --marine: #1b2f50;
  --marine-2: #24406b;
  --fond: #f3f5f9;
  --surface: #ffffff;
  --texte: #16202f;
  --discret: #55627a;
  --ligne: #d9dfe9;
  --accent: #e0951f;
  --sur-marine: #ffffff;
  --titre: "Oswald", "Arial Narrow", Impact, sans-serif;
  --corps: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0e1625; --surface: #16223a; --texte: #e8edf5; --discret: #9fb0c8;
    --ligne: #2a3a57; --accent: #f0ab3c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0e1625; --surface: #16223a; --texte: #e8edf5; --discret: #9fb0c8;
  --ligne: #2a3a57; --accent: #f0ab3c; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font: 1.0625rem/1.6 var(--corps); }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.enveloppe { max-width: 64rem; margin: 0 auto; padding-inline: 1rem; }
.etroit { max-width: 42rem; }

.bandeau { background: var(--marine); color: var(--sur-marine); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.35rem/1 var(--titre); letter-spacing: .06em; }
.marque img { width: 2.5rem; height: 2.5rem; }
.nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav ul a { text-decoration: none; font: 500 .95rem var(--titre); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
@media (max-width: 30rem) { .nav ul { gap: .9rem; } .nav ul a { font-size: .8rem; letter-spacing: .05em; } }
.nav ul a:hover, .nav ul a[aria-current] { opacity: 1; box-shadow: 0 2px 0 var(--accent); }

.hero { padding-block: 3rem 3.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.hero img { width: 9rem; height: 9rem; }
.hero h1 { font: 600 clamp(2rem, 5vw, 3.25rem)/1.05 var(--titre); text-transform: uppercase; margin: 0 0 .75rem; text-wrap: balance; }
.hero p { margin: 0 0 1.5rem; max-width: 38rem; opacity: .9; }
@media (max-width: 40rem) { .hero { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 2rem 2.5rem; } .hero img { width: 6rem; height: 6rem; } }

.bouton { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: #1b1404; text-decoration: none;
  font: 600 1rem var(--titre); text-transform: uppercase; letter-spacing: .06em; padding: .75rem 1.25rem; border-radius: .25rem; }
.bouton:hover { filter: brightness(1.08); }

main { padding-block: 2.5rem 3.5rem; }
h2 { font: 600 1.6rem/1.2 var(--titre); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 1.25rem; text-wrap: balance; }
h3 { font: 600 1.2rem/1.25 var(--titre); margin: 0; text-wrap: balance; }
.section + .section { margin-top: 3rem; }
.etiquette { font: 500 .8rem var(--titre); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.video { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ligne); border-radius: .375rem; overflow: hidden; text-decoration: none; min-width: 0; }
.video:hover { border-color: var(--accent); }
.vignette { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--marine) url("img/logo.png") center / 22% no-repeat; }
/* Les miniatures YouTube (4:3 avec bandes noires) sont recadrées en 16:9 comme les photos. */
.vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .texte { padding: 1rem 1.1rem 1.25rem; display: grid; gap: .35rem; }

.methode { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.methode p { margin: .35rem 0 0; color: var(--discret); }

.prose p, .prose li { max-width: 65ch; }
.prose h2 { margin-top: 2.25rem; }
.a-completer { background: color-mix(in srgb, var(--accent) 25%, transparent); padding: 0 .25rem; border-radius: .2rem; }

footer { border-top: 1px solid var(--ligne); padding-block: 1.5rem 2rem; color: var(--discret); font-size: .9rem; }
footer .enveloppe { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; justify-content: space-between; }
footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.suite { font: 500 .85rem var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-top: .35rem; }

/* Article */
.article h1 { font: 600 clamp(1.9rem, 4.5vw, 2.6rem)/1.1 var(--titre); margin: .35rem 0 .5rem; text-wrap: balance; }
.signature { color: var(--discret); font-size: .95rem; margin: 0 0 1.5rem; }
.chapo { font-size: 1.2rem; line-height: 1.55; }
.video-cadre { aspect-ratio: 16 / 9; max-width: 100%; background: var(--marine); border-radius: .375rem; overflow: hidden; margin-block: 1.5rem; }
.video-cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.lien-video { margin: -.75rem 0 1.5rem; font-size: .9rem; color: var(--discret); }
.tableau { overflow-x: auto; }
.tableau table { border-collapse: collapse; width: 100%; font-size: .98rem; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: .55rem .75rem; border-bottom: 1px solid var(--ligne); }
.tableau th { font: 500 .85rem var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--discret); white-space: nowrap; width: 1%; }
figure { margin: 1.75rem 0; }
figure img { border-radius: .375rem; width: 100%; height: auto; }
figcaption { color: var(--discret); font-size: .9rem; margin-top: .5rem; }
.note { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--discret); font-style: italic; }
.sources { font-size: .95rem; }
.essentiel { background: var(--surface); border: 1px solid var(--ligne); border-top: 4px solid var(--accent); border-radius: .375rem; padding: 1rem 1.25rem; margin-block: 1.5rem; }
.essentiel-titre, .verdict-titre { font: 600 .9rem var(--titre); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 .5rem; }
.essentiel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--discret); font-size: 1.15rem; line-height: 1.5; }
blockquote p { margin: 0 0 .4rem; }
blockquote cite { display: block; font-style: normal; font-size: .9rem; color: var(--discret); }
.frise { list-style: none; padding: 0; margin: 1.75rem 0; border-left: 2px solid var(--ligne); }
.frise li { position: relative; padding: 0 0 1rem 1.25rem; }
.frise li::before { content: ""; position: absolute; left: -.45rem; top: .45rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); }
.frise li:last-child { padding-bottom: 0; }
.frise time { display: block; font: 600 .85rem var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-block: 1.25rem; }
.verdict > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: .375rem; padding: 1rem 1.25rem; }
.verdict ul { margin: 0; padding-left: 1.1rem; }
.tableau thead th { width: auto; }

/* Page liens */
.liens-page { min-height: 100vh; background: var(--marine); color: var(--sur-marine); }
.liens-page .nav { border-bottom: 1px solid rgba(255,255,255,.15); }
.liens { max-width: 30rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; display: grid; gap: .9rem; text-align: center; }
.liens > img { width: 7rem; height: 7rem; margin: 0 auto .5rem; }
.liens h1 { font: 600 2rem/1 var(--titre); letter-spacing: .08em; margin: 0; }
.liens > p { margin: 0 0 1rem; opacity: .85; }
.lien { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .1rem; align-items: center; padding: .9rem 1.1rem; border: 2px solid rgba(255,255,255,.35); border-radius: .375rem; text-decoration: none; text-align: left; }
.lien:hover { border-color: var(--accent); }
.lien svg { grid-row: span 2; width: 1.75rem; height: 1.75rem; }
.lien strong, .lien span { grid-column: 2; }
.lien strong { font: 600 1.05rem var(--titre); text-transform: uppercase; letter-spacing: .05em; }
.lien span { font-size: .9rem; opacity: .8; overflow-wrap: anywhere; }
.lien.fort { background: var(--accent); border-color: var(--accent); color: #1b1404; }
.lien.fort span { opacity: .85; }
.liens small { margin-top: 1.5rem; opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .video, .lien, .bouton { transition: border-color .15s, filter .15s; } }