/* Films de France : affiche Nouvelle Vague. Papier crème, encre, bleu et rouge ; Anton pour l'affiche, Newsreader pour lire, Archivo pour les étiquettes. */
:root {
  --vdg2o8f: #f3ede2;
  --v8dhna8: #ebe3d4;
  --v3lpid5: #fbf7ef;
  --v4ozb1c: #141312;
  --v3lsgmu: #4b453d;
  --v5qinsd: #d8cdb9;
  --v00i5cb: #1b3c9e;
  --vf16gvs: #d42a1e;
  --v9sqzlw: #b21f15;
  --v5mdqhd: #121110;
  --vbp98vz: #efe8da;
  --v4kn2gw: "Anton", "Arial Narrow", Impact, sans-serif;
  --v1ep89a: "Newsreader", Georgia, "Times New Roman", serif;
  --v1x21y7: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --v028vb1: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--vdg2o8f); color: var(--v4ozb1c); font: 400 19px/1.62 var(--v1ep89a); font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--v00i5cb); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--v9sqzlw); }
.c56dah4 { max-width: var(--v028vb1); margin: 0 auto; padding: 0 22px; }
h1, h2, h3 { color: var(--v4ozb1c); margin: 0; }
.ccbdm7g { font: 700 0.72rem/1.3 var(--v1x21y7); letter-spacing: 0.22em; text-transform: uppercase; color: var(--v3lsgmu); margin: 0 0 14px; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--v3lsgmu); max-width: 34em; margin: 18px 0 0; }
.cbv1aqh { font: 600 0.78rem/1.4 var(--v1x21y7); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v3lsgmu); margin: 18px 0 0; }
.c6ck5tm { font: 400 clamp(2rem, 4vw, 3rem)/1 var(--v4kn2gw); letter-spacing: 0.005em; }
.c26s87j { font: 700 0.75rem/1 var(--v1x21y7); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v4ozb1c); text-decoration: none; border-bottom: 2px solid var(--vf16gvs); padding-bottom: 5px; white-space: nowrap; }
.c26s87j::after { content: " →"; color: var(--vf16gvs); }
.c26s87j:hover { color: var(--v9sqzlw); }
.btn { display: inline-block; background: var(--vf16gvs); color: #fff; font: 700 0.8rem/1 var(--v1x21y7); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 17px 24px; }
.btn:hover { background: var(--v4ozb1c); color: #fff; }

/* En-tête */
.c423j2k { border-bottom: 1px solid var(--v4ozb1c); background: var(--vdg2o8f); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.caf7brk { font: 700 1.9rem/1 var(--v1ep89a); letter-spacing: -0.02em; color: var(--v4ozb1c); text-decoration: none; }
.caf7brk i, .cdbnojd i { color: var(--vf16gvs); font-weight: 600; }
.caf7brk:hover { color: var(--v4ozb1c); }
.nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; margin: 0; padding: 0; }
.nav a { font: 700 0.74rem/1 var(--v1x21y7); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v4ozb1c); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--vf16gvs); color: var(--v4ozb1c); }

/* Fil d'Ariane */
.c8pziw5 { font: 500 0.78rem/1.4 var(--v1x21y7); color: var(--v3lsgmu); margin-bottom: 18px; }
.c8pziw5 a { color: var(--v3lsgmu); }
.c8pziw5 .c1g9eal { margin: 0 8px; color: var(--v5qinsd); }

/* Accueil : texte d'abord dans le code ; l'image passe au-dessus sur mobile, à droite sur grand écran */
.c7rb7du { border-bottom: 1px solid var(--v4ozb1c); overflow: hidden; }
.c1itavv { position: relative; display: flex; flex-direction: column; gap: 26px; padding-top: 26px; padding-bottom: 40px; }
.cad4yf5 { margin: 0; order: -1; position: relative; }
.cad4yf5::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; background: var(--v00i5cb); z-index: 0; }
.cad4yf5 img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.c7rb7du h1 { font: 400 clamp(3.1rem, 13.5vw, 6.9rem)/0.92 var(--v4kn2gw); letter-spacing: -0.005em; }
.c0wuxu3, .c4pb8xx { display: block; white-space: nowrap; }
.c0wuxu3 { color: var(--v4ozb1c); }
.c83ru0y { color: var(--v00i5cb); }
.c22j8jo { color: var(--vf16gvs); }
.c6wcjbg { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 30px 0 0; }
.c64j5qp { display: none; }
@media (min-width: 900px) {
  .c7rb7du h1 { font-size: clamp(4rem, 6.6vw, 6.9rem); }
  .c1itavv { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 56px; padding-top: 48px; padding-bottom: 64px; }
  .cad4yf5 { order: 0; }
  .cad4yf5 img { aspect-ratio: 5 / 6; }
}
@media (min-width: 1240px) {
  .c1itavv { grid-template-columns: 1.15fr 0.85fr 90px; }
  .c64j5qp { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; align-self: end; font: 700 0.7rem/1 var(--v1x21y7); letter-spacing: 0.2em; text-transform: uppercase; color: var(--v3lsgmu); }
  .c64j5qp li:nth-child(2) { color: var(--v9sqzlw); }
  .c64j5qp li:nth-child(5) { color: var(--v00i5cb); }
}

/* Les 3 premiers du classement */
.c7btgtk { border-bottom: 1px solid var(--v4ozb1c); }
.cbu1b3y { display: grid; grid-template-columns: 1fr; gap: 34px; padding-top: 44px; padding-bottom: 48px; }
.cavdv58 p { color: var(--v3lsgmu); margin: 14px 0 20px; max-width: 22em; }
.c27a2je { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n img" "t t" "m m" "note note"; gap: 4px 16px; text-decoration: none; color: var(--v4ozb1c); border-bottom: 4px solid var(--vf16gvs); padding-bottom: 18px; }
.c27a2je.c9iqk2o { border-bottom-color: var(--v00i5cb); }
.c9ll6ux { grid-area: n; font: 400 5.4rem/0.82 var(--v4kn2gw); color: var(--vf16gvs); }
.c9iqk2o .c9ll6ux { color: var(--v00i5cb); }
.c9vyi10 { grid-area: img; overflow: hidden; }
.c9vyi10 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(1.05); transition: transform 0.4s; }
.c27a2je:hover img { transform: scale(1.04); }
.c6b6bha { grid-area: t; font: 700 1.6rem/1.08 var(--v1ep89a); margin-top: 14px; }
.cfzawr9 { grid-area: m; font: 700 0.7rem/1.4 var(--v1x21y7); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3lsgmu); }
.c4hl60r { grid-area: note; color: var(--v3lsgmu); font-size: 1rem; margin-top: 6px; }
@media (min-width: 900px) { .cbu1b3y { grid-template-columns: 0.8fr 1fr 1fr 1fr; gap: 30px; } .cavdv58 { padding-right: 10px; border-right: 1px solid var(--v5qinsd); } }

/* Bande des décennies : grands chiffres détourés */
.c188hr6 { border-bottom: 1px solid var(--v4ozb1c); background: var(--vdg2o8f); }
.c6qizx6 { display: grid; gap: 12px; padding-top: 26px; padding-bottom: 26px; }
.c188hr6 .ccbdm7g { margin: 0; }
.c188hr6 ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.c188hr6 a { font: 400 clamp(1.7rem, 3vw, 2.55rem)/1.05 var(--v4kn2gw); color: transparent; -webkit-text-stroke: 1.4px var(--v00i5cb); text-decoration: none; transition: color 0.15s; }
.c188hr6 a:hover, .c188hr6 a.c7nwafb { color: var(--vf16gvs); -webkit-text-stroke-color: var(--vf16gvs); }
@supports not (-webkit-text-stroke: 1px black) { .c188hr6 a { color: var(--v00i5cb); } }
@media (min-width: 1000px) { .c188hr6 ul { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0 6px; } .c188hr6 a { font-size: clamp(1.6rem, 2.35vw, 2.35rem); } }

/* Cartes de films */
.cb4cp00 { padding-top: 56px; }
.cfugddj { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.c3oac5q { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
@media (min-width: 700px) { .c2pigmy, .c3gkhw9, .c7tnohx { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .c2pigmy { grid-template-columns: repeat(4, 1fr); } .c3gkhw9 { grid-template-columns: repeat(5, 1fr); } .c7tnohx { grid-template-columns: repeat(6, 1fr); } }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--v4ozb1c); border-bottom: 3px solid var(--vf16gvs); padding-bottom: 12px; }
.card.c9iqk2o { border-bottom-color: var(--v00i5cb); }
.card-img { display: block; overflow: hidden; background: var(--v8dhna8); margin-bottom: 12px; }
.card-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.4s; }
.card:hover .card-img img { transform: scale(1.05); }
.ccv5wka { font: 700 0.66rem/1.3 var(--v1x21y7); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v9sqzlw); }
.c9iqk2o .ccv5wka { color: var(--v00i5cb); }
.card-title { font: 700 1.22rem/1.15 var(--v1ep89a); margin: 4px 0 6px; }
.c97uwtm { font: 600 0.68rem/1.4 var(--v1x21y7); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v3lsgmu); margin-top: auto; }

/* Bandeau citation, en noir (la touche « salle obscure ») */
.cetf8cg { background: var(--v5mdqhd); color: var(--vbp98vz); margin-top: 64px; }
.c5bomzh { display: grid; grid-template-columns: 1fr; gap: 26px; padding-top: 44px; padding-bottom: 44px; align-items: center; }
.cao4y4e { margin: 0; }
.cao4y4e img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cetf8cg blockquote { margin: 0; }
.cetf8cg blockquote p { font: italic 400 clamp(1.7rem, 3.4vw, 2.7rem)/1.2 var(--v1ep89a); margin: 0; color: var(--vbp98vz); }
.cetf8cg blockquote p::before { content: "“"; font: 400 4.5rem/0 var(--v4kn2gw); color: var(--vf16gvs); vertical-align: -0.38em; margin-right: 10px; }
.cetf8cg footer { font: 700 0.74rem/1.5 var(--v1x21y7); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 22px; color: #cfc6b4; }
.cetf8cg footer a { color: #fff; }
@media (min-width: 900px) { .c5bomzh { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }

/* Guides */
.c3yyt5k { display: grid; grid-template-columns: 1fr; gap: 30px 24px; }
@media (min-width: 700px) { .c3yyt5k { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c3yyt5k { grid-template-columns: repeat(3, 1fr); } }
.ccwyk4j { display: flex; flex-direction: column; text-decoration: none; color: var(--v4ozb1c); }
.c08eidw { overflow: hidden; margin-bottom: 14px; border-bottom: 4px solid var(--vf16gvs); }
.ccwyk4j.c9iqk2o .c08eidw { border-bottom-color: var(--v00i5cb); }
.c08eidw img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; transition: transform 0.4s; }
.ccwyk4j:hover .c08eidw img { transform: scale(1.04); }
.c2026ew { font: 700 1.4rem/1.15 var(--v1ep89a); margin: 4px 0 6px; }
.c1i9ffs { color: var(--v3lsgmu); font-size: 1rem; }

/* À propos sur l'accueil */
.c74rfea { display: grid; grid-template-columns: 1fr; gap: 20px; padding-top: 64px; }
.c3k736y { font: 700 clamp(2.8rem, 6vw, 4.6rem)/0.95 var(--v1ep89a); letter-spacing: -0.02em; margin: 0; }
.c3k736y span { display: block; color: var(--vf16gvs); font-style: italic; font-weight: 600; padding-left: 0.6em; }
@media (min-width: 900px) { .c74rfea { grid-template-columns: 0.8fr 1.2fr; gap: 56px; } .c7wsf38 { border-right: 1px solid var(--v5qinsd); padding-right: 30px; } }
.cbwbhso { columns: 2 230px; column-gap: 34px; padding: 0; list-style: none; margin-top: 22px; font-size: 1rem; }
.cbwbhso li { padding: 6px 0; border-bottom: 1px solid var(--v5qinsd); break-inside: avoid; }
.cbwbhso a { color: var(--v4ozb1c); text-decoration: none; font-weight: 600; }
.cbwbhso a:hover { color: var(--v9sqzlw); }
.cbwbhso span { font: 600 0.72rem/1 var(--v1x21y7); color: var(--v3lsgmu); letter-spacing: 0.08em; float: right; padding-top: 5px; }

/* Page film */
.c4ygel0 { display: flex; flex-direction: column; gap: 26px; padding-top: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--v4ozb1c); }
.c4ygel0 h1 { font: 400 clamp(2.9rem, 8vw, 5.6rem)/0.95 var(--v4kn2gw); letter-spacing: 0; }
.c0ix8x0 { color: var(--vf16gvs); white-space: nowrap; }
.c6pio9n { font-size: 1.15rem; color: var(--v3lsgmu); margin: 16px 0 0; }
.c6pio9n strong { color: var(--v4ozb1c); }
.c25fblh { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--v4ozb1c); }
.c25fblh li { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--v5qinsd); font: 400 1.25rem/1.15 var(--v4kn2gw); letter-spacing: 0.01em; }
.c25fblh span { display: block; font: 700 0.62rem/1.3 var(--v1x21y7); letter-spacing: 0.18em; text-transform: uppercase; color: var(--v9sqzlw); margin-bottom: 4px; }
@media (min-width: 700px) { .c25fblh { grid-template-columns: repeat(4, auto); } .c25fblh li { border-bottom: 0; padding-right: 26px; } }
.cd7ywwr { margin: 0; position: relative; max-width: 420px; }
.cd7ywwr::before { content: ""; position: absolute; inset: 16px -12px -12px 16px; background: var(--vf16gvs); }
.cd7ywwr.c9iqk2o::before { background: var(--v00i5cb); }
.cd7ywwr img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .c4ygel0 { display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 60px; padding-top: 40px; padding-bottom: 50px; border-bottom: 0; }
  .cd7ywwr { max-width: none; }
}
.c7orqqx { display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
@media (min-width: 1000px) { .c7orqqx { grid-template-columns: minmax(0, 1fr) 320px; gap: 70px; } }
.c9k6nvl { max-width: 40em; }
.cef37hw { max-width: 46em; }
.c9k6nvl p { margin: 0 0 1.05em; }
.c9k6nvl h2 { font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1.12 var(--v1ep89a); letter-spacing: -0.01em; margin: 1.7em 0 0.5em; }
.c9k6nvl h3 { font: 700 1.3rem/1.2 var(--v1ep89a); margin: 1.5em 0 0.4em; }
.c9k6nvl blockquote { margin: 1.6em 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--vf16gvs); font: italic 400 1.5rem/1.35 var(--v1ep89a); color: var(--v4ozb1c); }
.c9k6nvl ul { padding-left: 1.2em; }
.c9k6nvl li { margin-bottom: 0.4em; }
.c00ldxs > p:first-child::first-letter { float: left; font: 400 5.2rem/0.8 var(--v4kn2gw); color: var(--vf16gvs); margin: 0.08em 0.12em 0 0; }
.c23ufhe { align-self: start; background: var(--v3lpid5); border: 1px solid var(--v5qinsd); padding: 0 22px 20px; font: 400 0.98rem/1.5 var(--v1ep89a); }
.c23ufhe::before { content: ""; display: block; height: 6px; margin: 0 -22px 18px; background: linear-gradient(90deg, var(--v00i5cb) 0 33.3%, var(--vdg2o8f) 33.3% 66.6%, var(--vf16gvs) 66.6%); border-bottom: 1px solid var(--v5qinsd); }
@media (min-width: 1000px) { .c23ufhe { position: sticky; top: 22px; } }
.c32eof5 { font: 400 1.7rem/1 var(--v4kn2gw); margin: 0 0 8px; }
.c23ufhe dl { margin: 0; }
.c23ufhe dt { font: 700 0.66rem/1.3 var(--v1x21y7); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v9sqzlw); margin-top: 14px; }
.c23ufhe dd { margin: 3px 0 0; }
.c530gpb { margin: 18px 0 0; font: 700 0.75rem/1.4 var(--v1x21y7); letter-spacing: 0.08em; text-transform: uppercase; }
.c0c9e2o { padding-top: 60px; padding-bottom: 60px; }
.c0c9e2o .c6ck5tm { margin-bottom: 26px; }

/* Pages éditoriales */
.c44kr1b { border-bottom: 1px solid var(--v4ozb1c); }
.c6e35oi { display: flex; flex-direction: column; gap: 26px; padding-top: 30px; padding-bottom: 38px; }
.c44kr1b h1 { font: 400 clamp(2.6rem, 6.4vw, 4.8rem)/0.96 var(--v4kn2gw); }
.cal3epd { margin: 0; position: relative; }
.cal3epd::before { content: ""; position: absolute; inset: 14px -12px -12px 14px; background: var(--v00i5cb); }
.cal3epd img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.c60vhaa { font: 400 clamp(5rem, 15vw, 11rem)/0.85 var(--v4kn2gw); color: transparent; -webkit-text-stroke: 2px var(--vf16gvs); margin: 0; letter-spacing: -0.01em; }
@supports not (-webkit-text-stroke: 1px black) { .c60vhaa { color: var(--vf16gvs); } }
@media (min-width: 900px) {
  .c6e35oi { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 60px; padding-top: 44px; padding-bottom: 54px; }
  .c60vhaa { text-align: right; }
}
.c7rmiu7 { padding-top: 34px; padding-bottom: 50px; }
.cev0a9o { margin: 34px 0 20px; }
.cev0a9o .card-img img { aspect-ratio: 1 / 1; }
.c5n28gu { counter-reset: entry; }
.c9k6nvl h2.c7qixpn { counter-increment: entry; display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 14px; align-items: baseline; font-size: clamp(1.35rem, 2.2vw, 1.65rem); border-top: 1px solid var(--v5qinsd); padding-top: 22px; margin-top: 1.4em; }
.c9k6nvl h2.c7qixpn::before { content: counter(entry, decimal-leading-zero); font: 400 2.3rem/1 var(--v4kn2gw); color: var(--vf16gvs); }
.c9k6nvl h2.c7qixpn:nth-of-type(even)::before { color: var(--v00i5cb); }
.c9k6nvl h2.c7qixpn + p { margin-left: calc(3.2rem + 14px); }
.c9k6nvl h2.c7qixpn a { color: var(--v4ozb1c); text-decoration-color: var(--vf16gvs); text-decoration-thickness: 2px; }
.c9k6nvl h2.c7qixpn a:hover { color: var(--v9sqzlw); }

/* Classement des 100 */
.cf022ud { list-style: none; padding: 0; margin: 10px 0 0; }
.cf022ud li { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--v5qinsd); }
.ccsklrw { font: 400 2.6rem/1 var(--v4kn2gw); color: var(--v00i5cb); }
.cf022ud li:nth-child(odd) .ccsklrw { color: var(--vf16gvs); }
.cdpx6de { font-size: 1.04rem; }
.cdpx6de a { font-weight: 700; color: var(--v4ozb1c); text-decoration-color: var(--vf16gvs); }
.c1dtdtu { width: 56px; height: 72px; object-fit: cover; }

/* Pied de page, en noir */
.cbg37xl { background: var(--v5mdqhd); color: #cfc6b4; margin-top: 70px; font: 400 0.98rem/1.55 var(--v1ep89a); }
.cf4ko1c { height: 8px; background: linear-gradient(90deg, var(--v00i5cb) 0 33.3%, var(--vdg2o8f) 33.3% 66.6%, var(--vf16gvs) 66.6%); }
.c6a5c4b { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 30px; }
@media (min-width: 700px) { .c6a5c4b { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .c6a5c4b { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.cbg37xl a { color: var(--vbp98vz); text-decoration: none; }
.cbg37xl a:hover { color: #fff; text-decoration: underline; }
.cbg37xl ul { list-style: none; padding: 0; margin: 0; }
.cbg37xl li { margin-bottom: 7px; }
.c91k7nf { columns: 2; }
.cdbnojd { display: inline-block; font: 700 2.2rem/1 var(--v1ep89a); letter-spacing: -0.02em; color: var(--vbp98vz) !important; margin-bottom: 14px; }
.cdbnojd i { color: #ff6b5e; }
.cbewioz { font-style: italic; color: var(--vbp98vz); }
.cc0zq1w { font: 700 0.72rem/1 var(--v1x21y7); letter-spacing: 0.2em; text-transform: uppercase; color: var(--vbp98vz); margin: 6px 0 16px; }
.c7v1zge { border-top: 1px solid #2d2a26; padding-top: 16px; padding-bottom: 24px; font: 500 0.78rem/1.5 var(--v1x21y7); color: #b5ac9a; }