/* =====================================================================
   Association Edgar Faure — V9 « Matignon »
   Ce que Rodolphe a demandé le 20/10/2026 : une première page très
   institutionnelle, comme l'hôtel Matignon, le drapeau français, le
   Président Edgar Faure à son avantage en filigrane, et que ça respire.
   Blanc, grandes marges, encre bleue, filet tricolore discret.
   Spectral pour les titres (le serif des sites de l'État), Source Sans
   pour le texte. Rien de noir, rien de serré, aucun décor.
   ===================================================================== */

:root {
  --blanc: #ffffff;
  --papier: #f6f6f4;
  --encre: #1c1c1c;
  --encre-2: #4a4a4a;
  --encre-3: #767676;
  --bleu: #1d2b6f;
  --bleu-clair: #e9ecf6;
  --rouge: #c8102e;
  --filet: #e3e3e0;
  --filet-2: #cfcfcb;
  --titres: "Spectral", Georgia, "Times New Roman", serif;
  --texte: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --marge: clamp(24px, 6vw, 120px);
  --mesure: 1240px;
  --transition: 220ms ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--blanc); }
body { margin: 0; font-family: var(--texte); font-size: 18px; line-height: 1.65; color: var(--encre); background: var(--blanc); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, figure, blockquote, h1, h2, h3, p, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
sup { font-size: .6em; line-height: 0; }
b { font-weight: 600; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--bleu); color: #fff; padding: 8px 14px; z-index: 100; }
.lien-evitement:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* ---------- le filet tricolore, discret ---------- */
.tricolore { height: 3px; background: linear-gradient(to right, var(--bleu) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66%); }
.tricolore:first-child { border-bottom: 1px solid var(--filet); }

/* ---------- typographie ---------- */
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin-bottom: 18px; }
.titre-section { font-family: var(--titres); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; max-width: 22ch; }
.titre-bloc { font-family: var(--titres); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; margin-bottom: 36px; }
.titre-bloc small { display: block; font-family: var(--texte); font-size: 15px; color: var(--encre-3); margin-top: 6px; letter-spacing: .02em; }
.chapeau { font-size: 20px; line-height: 1.6; color: var(--encre-2); max-width: 64ch; margin-top: 22px; }
.section__tete { padding: 0 var(--marge); max-width: var(--mesure); margin: 0 auto 64px; }
.section__tete--large .titre-section { max-width: 26ch; }
.lien { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--bleu); padding-bottom: 2px; border-bottom: 1px solid currentColor; transition: color var(--transition), gap var(--transition); }
.lien::after { content: "→"; font-weight: 400; }
.lien:hover { color: var(--rouge); gap: 12px; }
.liens { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 36px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; font-size: 16px; font-weight: 600; border: 1px solid var(--bleu); border-radius: 2px; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; }
.bouton--plein { background: var(--bleu); color: #fff; }
.bouton--plein:hover { background: #142053; border-color: #142053; }
.bouton--contour { color: var(--bleu); background: #fff; }
.bouton--contour:hover { background: var(--bleu-clair); }

/* ---------- en-tête : sceau centré, navigation centrée, blanc sur l’image puis blanc opaque ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 40; color: #fff; background: linear-gradient(to bottom, rgba(10, 14, 32, .55), rgba(10, 14, 32, 0)); transition: background var(--transition), color var(--transition), box-shadow var(--transition); }
.entete::before { content: ""; display: block; height: 3px; background: linear-gradient(to right, var(--bleu) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66%); }
.entete__barre { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--mesure); margin: 0 auto; padding: 14px var(--marge) 6px; min-height: 86px; }
.sceau { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sceau img { width: 56px; height: 56px; transition: opacity var(--transition); }
.sceau__encre { display: none; }
.sceau__texte { display: flex; flex-direction: column; line-height: 1.1; }
.sceau__texte b { font-family: var(--titres); font-weight: 500; font-size: 17px; letter-spacing: .18em; text-transform: uppercase; }
.sceau__texte small { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
.entete__contact, .bascule-menu { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.entete__contact { right: var(--marge); padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color var(--transition); }
.entete__contact:hover { border-bottom-color: currentColor; }
.nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 38px; padding: 10px var(--marge) 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color var(--transition), opacity var(--transition); }
.nav a:hover { border-bottom-color: currentColor; }
.entete--dense .nav__contact { color: var(--bleu); }
.bascule-menu { left: var(--marge); display: flex; align-items: center; gap: 10px; height: 44px; padding: 0; }
.bascule-menu span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); position: absolute; left: 0; }
.bascule-menu span:nth-child(1) { top: 15px; } .bascule-menu span:nth-child(2) { top: 21px; } .bascule-menu span:nth-child(3) { top: 27px; }
.bascule-menu em { font-style: normal; margin-left: 30px; }
/* dès qu’on défile : barre compacte ; sur l’ouverture, voile marine ; après, fond blanc, encre */
.entete--compact .entete__barre { min-height: 58px; padding: 8px var(--marge) 2px; }
.entete--compact .sceau { gap: 3px; }
.entete--compact .sceau img { width: 32px; height: 32px; }
.entete--compact .sceau__texte b { font-size: 13px; }
.entete--compact .sceau__texte small { display: none; }
.entete--compact .nav { padding: 2px var(--marge) 10px; font-size: 11.5px; gap: 0 30px; }
.entete--voile { background: #0b1029; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
/* après l’ouverture : fond blanc, encre */
.entete--dense { color: var(--encre); background: #fff; box-shadow: 0 1px 0 var(--filet); }
.entete--dense .sceau__or { display: none; } .entete--dense .sceau__encre { display: block; }
.entete--dense .entete__contact { color: var(--bleu); }
.entete--dense .nav a:hover { color: var(--bleu); }

/* ---------- ouverture : le Palais plein écran ---------- */
.ouverture { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 220px var(--marge) 96px; overflow: hidden; isolation: isolate; color: #fff; background: #0e1430; }
.ouverture__image { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ouverture__scene { position: absolute; inset: 0; transform: scale(1.06); }
.ouverture__scene.est-chargee { animation: ouverture-zoom 14s ease-out forwards; }
.ouverture__image picture { position: absolute; inset: 0; display: block; }
.ouverture__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0; transition: opacity 1.4s ease; }
.ouverture__image img.est-chargee { opacity: 1; }
@keyframes ouverture-zoom { to { transform: none; } }
/* entrée : le voile s'éclaircit, puis le nom, les fonctions et les boutons montent en cascade */
.ouverture__contenu > * { animation: ouverture-monte 1s cubic-bezier(.2, .7, .2, 1) both; }
.ouverture__contenu > .surtitre { animation-delay: .55s; }
.ouverture__contenu > .ouverture__titre { animation-delay: .7s; }
.ouverture__contenu > .ouverture__fonction { animation-delay: .95s; }
.ouverture__contenu > .ouverture__actions { animation-delay: 1.15s; }
.ouverture__credit, .ouverture__indice { animation: ouverture-fondu 1s ease 1.8s both; }
.entete { animation: ouverture-fondu .9s ease .35s both; }
@keyframes ouverture-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ouverture-fondu { from { opacity: 0; } to { opacity: 1; } }
.ouverture__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 12, 30, .86) 0, rgba(8, 12, 30, .55) 36%, rgba(8, 12, 30, .18) 65%, rgba(8, 12, 30, .35) 100%); }
.ouverture__contenu { max-width: var(--mesure); width: 100%; margin: 0 auto; }
.surtitre--clair { color: #fff; opacity: .85; }
.ouverture__titre { font-family: var(--titres); font-weight: 300; font-size: clamp(64px, 10vw, 150px); line-height: .98; letter-spacing: -.01em; margin: 0 0 24px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.ouverture__fonction { font-family: var(--titres); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.8vw, 26px); margin-bottom: 40px; opacity: .92; }
.ouverture__fonction span { color: #e9b4bd; padding: 0 .25em; }
.ouverture__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.bouton--blanc { background: #fff; color: var(--bleu); border-color: #fff; }
.bouton--blanc:hover { background: #eef0f7; border-color: #eef0f7; }
.bouton--contour-blanc { color: #fff; border-color: rgba(255, 255, 255, .7); }
.bouton--contour-blanc:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.ouverture__credit { position: absolute; right: var(--marge); bottom: 22px; font-size: 11.5px; letter-spacing: .02em; }
.ouverture__credit { animation-name: ouverture-fondu-credit; }
@keyframes ouverture-fondu-credit { from { opacity: 0; } to { opacity: .7; } }
.ouverture__indice { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 46px; margin-left: -.5px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.ouverture__indice span { position: absolute; left: 0; top: -46px; width: 1px; height: 46px; background: #fff; animation: indice 2.2s ease-in-out infinite; }
@keyframes indice { to { top: 46px; } }

/* ---------- le drapeau tricolore qui flotte sur le dôme (placé par main.js sur le mât, dessiné en canvas) ---------- */
.drapeau { position: absolute; left: 50%; top: 13.6%; width: 60px; height: 40px; transform: translate(-100%, 6%); perspective: 220px; opacity: 0; transition: opacity 1.4s ease; }
.ouverture__scene.est-chargee .drapeau { opacity: 1; }
.drapeau__toile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 100% 50%; transform: rotateY(28deg) rotateX(4deg); filter: blur(.3px) saturate(.82) brightness(.93) contrast(.95) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
/* sur l'ouverture, avant tout défilement, le menu reste au-dessus du dôme : barre plus basse */
.entete:not(.entete--compact) .entete__barre { min-height: 0; padding-top: 8px; padding-bottom: 0; }
.entete:not(.entete--compact) .sceau { gap: 4px; }
.entete:not(.entete--compact) .sceau img { width: 40px; height: 40px; }
.entete:not(.entete--compact) .sceau__texte b { font-size: 15px; }
.entete:not(.entete--compact) .sceau__texte small { display: none; }
.entete:not(.entete--compact) .nav { padding-top: 0; padding-bottom: 8px; }
.entete:not(.entete--compact) .nav a { padding: 3px 0; }
/* la photo est un peu agrandie depuis le haut : le dôme descend sous le menu, on perd un peu de pelouse */
.ouverture__image { transform: scale(1.12); transform-origin: 50% 0; }

/* ---------- travelling d'entrée : serré sur le drapeau du dôme, noir et blanc, puis recul jusqu'à la façade en couleur ---------- */
.intro-joue .ouverture__scene { transform-origin: 50% 15%; transform: scale(2.7); filter: grayscale(1) brightness(.72); }
.intro-joue .ouverture__scene.est-chargee { animation: travelling 4.6s cubic-bezier(.25, .8, .2, 1) both; }
@keyframes travelling {
  0% { transform: scale(2.7); filter: grayscale(1) brightness(.72); }
  45% { filter: grayscale(.35) brightness(.9); }
  100% { transform: scale(1); filter: none; }
}
/* le filet tricolore devant le surtitre se trace */
.surtitre__filet { display: inline-flex; width: 42px; height: 2px; margin-right: 14px; vertical-align: middle; transform-origin: 0 50%; }
.surtitre__filet i { flex: 1; } .surtitre__filet i:nth-child(1) { background: #4a63d0; } .surtitre__filet i:nth-child(2) { background: #fff; } .surtitre__filet i:nth-child(3) { background: #e0344f; }
.ouverture-prete .surtitre__filet { animation: filet-trace .8s cubic-bezier(.6, 0, .2, 1) .45s both; }
@keyframes filet-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* le nom s'écrit lettre par lettre, du flou au net (lettres posées par main.js) */
.ouverture__titre .mot { display: inline-block; white-space: nowrap; }
.ouverture__titre .lettre { display: inline-block; }
.intro-joue.ouverture-prete .ouverture__contenu > .ouverture__titre { animation: none; opacity: 1; }
.intro-joue.ouverture-prete .ouverture__titre .lettre { animation: lettre 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--i) * 60ms); }
@keyframes lettre { from { opacity: 0; transform: translateY(.28em); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
.intro-joue.ouverture-prete .ouverture__contenu > .surtitre { animation-delay: 0s; }
.intro-joue.ouverture-prete .ouverture__contenu > .ouverture__fonction { animation-delay: 1.2s; }
.intro-joue.ouverture-prete .ouverture__contenu > .ouverture__actions { animation-delay: 1.45s; }
.intro-joue.ouverture-prete .entete { animation-delay: 1.1s; }
.intro-joue.ouverture-prete .ouverture__credit, .intro-joue.ouverture-prete .ouverture__indice { animation-delay: 2.2s; }
/* tant que l'ouverture n'est pas prête, le texte attend : sa cascade part au signal de main.js */
.avec-js:not(.ouverture-prete) .ouverture__contenu > *, .avec-js:not(.ouverture-prete) .ouverture__credit, .avec-js:not(.ouverture-prete) .ouverture__indice, .avec-js:not(.ouverture-prete) .entete { opacity: 0; animation: none; }

/* ---------- à la une : un titre, trois cartes illustrées ---------- */
.une { padding: clamp(80px, 9vw, 120px) 0; border-bottom: 1px solid var(--filet); }
.section__tete--une { margin-bottom: 48px; }
.une__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: var(--mesure); margin: 0 auto; padding: 0 var(--marge); }
.une__liste a { display: flex; flex-direction: column; height: 100%; }
.une__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier); margin-bottom: 22px; }
.une__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.une__image--livre { position: relative; background: #e8e8e4; }
.une__image--livre img { position: absolute; top: 9%; left: 50%; height: 82%; width: auto; transform: translateX(-50%); object-fit: contain; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.une__liste a:hover .une__image--livre img { transform: translateX(-50%) scale(1.03); }
.une__liste a:hover .une__image img { transform: scale(1.03); }
.une__etiquette { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); margin-bottom: 10px; }
.une__liste h3 { font-family: var(--titres); font-weight: 400; font-size: 24px; line-height: 1.25; margin-bottom: 10px; text-wrap: balance; }
.une__liste p { color: var(--encre-2); font-size: 17px; margin-bottom: 18px; flex: 1; }

/* ---------- sections : beaucoup d'air ---------- */
section { padding: clamp(96px, 11vw, 160px) 0; }
.homme, .heures, .prix, .archives, .association { padding-inline: 0; }
.homme__grille { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: start; max-width: var(--mesure); margin: 0 auto; padding: 0 var(--marge); }
.homme__filigrane { position: relative; margin: -150px calc(-1 * var(--marge)) 0 0; }
.homme__filigrane img { width: 100%; height: auto; }
.homme__filigrane figcaption, .heures__photo figcaption { font-size: 13px; color: var(--encre-3); margin-top: 4px; text-align: right; }
.homme__intro { font-family: var(--titres); font-size: clamp(22px, 2vw, 27px); line-height: 1.45; font-weight: 300; margin-bottom: 24px; }
.homme__texte > p + p { margin-top: 18px; color: var(--encre-2); }
.reperes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 44px; border-top: 1px solid var(--filet); }
.reperes div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.reperes dt { font-family: var(--titres); font-size: 20px; color: var(--bleu); }
.reperes dd { color: var(--encre-2); font-size: 16px; line-height: 1.5; }

.heures { background: var(--papier); }
.chapitres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--filet); border: 1px solid var(--filet); max-width: var(--mesure); margin: 0 auto; width: calc(100% - 2 * var(--marge)); }
.chapitres a { display: block; height: 100%; background: var(--papier); padding: 30px 30px 34px; transition: background var(--transition); }
.chapitres a:hover { background: #fff; }
.chapitres__num { display: block; font-family: var(--titres); font-size: 15px; color: var(--rouge); letter-spacing: .08em; margin-bottom: 20px; }
.chapitres h3 { font-family: var(--titres); font-weight: 500; font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.chapitres p { font-size: 16px; color: var(--encre-2); line-height: 1.5; }
.heures__photo { max-width: var(--mesure); margin: 64px auto 0; padding: 0 var(--marge); }
.heures__photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 30%; }

.citation { padding: clamp(80px, 9vw, 120px) var(--marge); text-align: center; }
.citation blockquote { max-width: 860px; margin: 0 auto; }
.citation p { font-family: var(--titres); font-weight: 300; font-style: italic; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.3; text-wrap: balance; }
.citation cite { display: block; margin-top: 26px; font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.citation cite::before { content: ""; display: block; width: 36px; height: 1px; background: var(--rouge); margin: 0 auto 18px; }

/* ---------- le prix ---------- */
.prix > div { max-width: var(--mesure); margin: 0 auto; padding: 0 var(--marge); }
.prix > div + div { margin-top: clamp(72px, 8vw, 120px); }
.livres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 28px; }
.livres a { display: block; }
.livres img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 24px -14px rgba(0,0,0,.35); transition: transform var(--transition); }
.livres a:hover img { transform: translateY(-4px); }
.livres__cartel { display: block; margin-top: 14px; font-size: 15px; line-height: 1.4; }
.livres__cartel b { display: block; font-size: 12px; letter-spacing: .1em; color: var(--rouge); margin-bottom: 4px; }
.livres__cartel em { display: block; font-family: var(--titres); font-style: italic; font-size: 16px; color: var(--encre); }
.livres__cartel small { display: block; color: var(--encre-3); font-size: 13px; }

.laureate { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding-block: 48px !important; }
.laureate img { width: 100%; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
.laureate h3 { font-family: var(--titres); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; margin-bottom: 14px; }
.laureate p:not(.surtitre) { color: var(--encre-2); max-width: 60ch; }
.laureate .liens { margin-top: 24px; }

.palmares__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; border-top: 1px solid var(--filet); }
.palmares__liste li { border-bottom: 1px solid var(--filet); }
.palmares__liste a { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 14px 0; align-items: baseline; transition: color var(--transition); }
.palmares__liste a:hover { color: var(--bleu); }
.palmares__liste b { font-family: var(--titres); font-weight: 400; font-size: 18px; color: var(--bleu); }
.palmares__liste span { font-size: 17px; }
.palmares__liste small { display: block; font-size: 15px; color: var(--encre-3); font-style: italic; font-family: var(--titres); }
.palmares .liens { margin-top: 28px; }

.trophees { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.trophees img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.trophees h3 { font-family: var(--titres); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; margin-bottom: 14px; }
.trophees p:not(.surtitre) { color: var(--encre-2); margin-bottom: 22px; }

.jury__liste { display: grid; grid-template-columns: repeat(8, 1fr); gap: 28px 20px; }
.jury__liste li { text-align: center; }
.jury__liste img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50%; filter: grayscale(1); transition: filter var(--transition); }
.jury__liste li:hover img { filter: none; }
.jury__liste span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.3; color: var(--encre-2); }
.jury .liens { margin-top: 36px; }

/* ---------- archives ---------- */
.archives { background: var(--papier); }
.fonds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filet); border: 1px solid var(--filet); max-width: var(--mesure); margin: 0 auto; width: calc(100% - 2 * var(--marge)); }
.fonds a { display: block; background: var(--papier); padding: 32px 30px; transition: background var(--transition); }
.fonds a:hover { background: #fff; }
.fonds b { display: block; font-family: var(--titres); font-weight: 300; font-size: 56px; line-height: 1; color: var(--bleu); margin-bottom: 10px; }
.fonds span { font-size: 16px; color: var(--encre-2); }
.films { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--mesure); margin: 48px auto 0; padding: 0 var(--marge); }
.film { position: relative; display: block; width: 100%; text-align: left; }
.film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.2); transition: filter var(--transition); }
.film:hover img { filter: none; }
.film__lecture { position: absolute; left: 50%; top: calc(56.25% / 2 * 1); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.film__lecture::after { content: ""; width: 0; height: 0; border-left: 14px solid var(--bleu); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; }
.film__texte { display: block; margin-top: 12px; font-size: 15px; line-height: 1.4; }
.film__texte b { display: block; font-weight: 600; }
.film__texte small { color: var(--encre-3); font-size: 13px; }

/* ---------- témoignages ---------- */
.temoignages__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: var(--mesure); margin: 0 auto; padding: 0 var(--marge); }
.temoignages blockquote { border-left: 2px solid var(--rouge); padding-left: 28px; }
.temoignages p { font-family: var(--titres); font-weight: 300; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; }
.temoignages cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; font-style: normal; font-size: 15px; color: var(--encre-3); margin-top: 20px; }
.temoignages cite .lien { font-size: 15px; }

/* ---------- association ---------- */
.association { border-top: 1px solid var(--filet); }
.association__grille { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 7vw, 110px); align-items: start; max-width: var(--mesure); margin: 0 auto; padding: 0 var(--marge); }
.association__grille > div > p:not(.surtitre) { color: var(--encre-2); max-width: 60ch; margin-top: 22px; }
.bureau { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin: 36px 0 40px; border-top: 1px solid var(--filet); }
.bureau div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 16px; }
.bureau dt { color: var(--encre-3); }
.association__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; filter: grayscale(1); }
.association__portrait figcaption { font-size: 13px; color: var(--encre-3); margin-top: 12px; }

/* ---------- pied ---------- */
.pied { background: var(--papier); border-top: 1px solid var(--filet); }
.pied__grille { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; max-width: var(--mesure); margin: 0 auto; padding: 72px var(--marge) 56px; }
.pied__marque b { display: block; font-family: var(--titres); font-weight: 500; font-size: 22px; margin: 18px 0 10px; }
.pied__marque p { color: var(--encre-2); font-size: 16px; max-width: 30ch; }
.pied__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pied__nav div { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.pied__nav b { margin-bottom: 6px; }
.pied__nav a { color: var(--encre-2); transition: color var(--transition); }
.pied__nav a:hover { color: var(--bleu); }
.pied__bas { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: var(--mesure); margin: 0 auto; padding: 22px var(--marge) 28px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--encre-3); }
.pied__bas a { margin-left: 24px; }
.pied__bas a:first-child { margin-left: 0; }

/* ---------- lecteur vidéo ---------- */
.lecteur { border: 0; padding: 0; background: transparent; max-width: min(960px, 92vw); width: 100%; }
.lecteur::backdrop { background: rgba(20, 24, 40, .82); }
.lecteur__cadre { background: #fff; padding: 18px 18px 22px; }
.lecteur__fermer { float: right; font-size: 28px; line-height: 1; width: 36px; height: 36px; color: var(--encre-2); }
.lecteur__titre { font-family: var(--titres); font-size: 18px; margin: 4px 0 14px; }
.lecteur__video { aspect-ratio: 16 / 9; background: #000; }
.lecteur__video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- apparitions, sobres ---------- */
.avec-js [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.avec-js [data-apparait].est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-joue .ouverture__scene, .intro-joue .ouverture__scene.est-chargee, .ouverture__scene { animation: none; transform: none; filter: none; }
  .ouverture__titre .lettre, .surtitre__filet { animation: none !important; opacity: 1; transform: none; filter: none; }
  .ouverture__image img, .drapeau { opacity: 1; transition: none; }
  .ouverture__contenu > *, .ouverture__credit, .ouverture__indice, .entete { opacity: 1; transform: none; animation: none; }
  .ouverture__credit { opacity: .7; }
  .ouverture__indice span { animation: none; }
  .avec-js [data-apparait] { opacity: 1; transform: none; transition: none; }
}

/* ---------- écrans ---------- */
@media (min-width: 1181px) { .bascule-menu { display: none; } }
@media (max-width: 1180px) {
  .nav { display: none; }
  .entete__barre { min-height: 76px; padding-bottom: 12px; }
  .sceau__texte small { display: none; }
  body.menu-ouvert .entete { color: var(--encre); background: #fff; }
  body.menu-ouvert .sceau__or { display: none; } body.menu-ouvert .sceau__encre { display: block; }
  body.menu-ouvert .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #fff; border-bottom: 1px solid var(--filet); padding: 8px var(--marge) 24px; font-size: 15px; letter-spacing: .16em; }
  body.menu-ouvert .bascule-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-ouvert .bascule-menu span:nth-child(2) { opacity: 0; }
  body.menu-ouvert .bascule-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .jury__liste { grid-template-columns: repeat(6, 1fr); }
  .livres { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .ouverture { padding-top: 140px; padding-bottom: 84px; }
  .ouverture__image img { object-position: 50% 50%; }
  .ouverture__credit { left: var(--marge); right: auto; bottom: 14px; }
  .ouverture__indice { display: none; }
  .homme__filigrane { margin: 0 calc(-1 * var(--marge)) 0 auto; width: 92%; max-width: 520px; }
  .homme__filigrane figcaption { text-align: left; }
  .une__liste { grid-template-columns: 1fr; gap: 48px; }
  .homme__grille, .association__grille, .temoignages__grille, .trophees { grid-template-columns: 1fr; }
  .homme__portrait { max-width: 420px; }
  .chapitres { grid-template-columns: repeat(2, 1fr); }
  .fonds { grid-template-columns: repeat(2, 1fr); }
  .films { grid-template-columns: repeat(2, 1fr); }
  .livres { grid-template-columns: repeat(3, 1fr); }
  .palmares__liste { grid-template-columns: 1fr; }
  .jury__liste { grid-template-columns: repeat(4, 1fr); }
  .pied__grille { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .marque__texte small { display: none; }
  .ouverture__titre { font-size: clamp(56px, 17vw, 80px); }
  .intro-joue .ouverture__scene { transform-origin: 50% 17%; }
  .bascule-menu em { display: none; }
  .ouverture__chapeau, .chapeau { font-size: 18px; }
  .bouton { width: 100%; }
  .reperes, .bureau { grid-template-columns: 1fr; }
  .chapitres { grid-template-columns: 1fr; }
  .livres { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .laureate { grid-template-columns: 1fr; }
  .laureate img { max-width: 180px; }
  .jury__liste { grid-template-columns: repeat(3, 1fr); }
  .fonds, .films { grid-template-columns: 1fr; }
  .pied__nav { grid-template-columns: 1fr; }
}