:root{
--stage: #0B0D0F;
--stage-2: #12161A;
--stage-3: #171C21;
--marker: #F2EDE4;
--text: #CED2D7;
--dim: #8D9298;
--dimmer: #828890;
--amber: #E0A951;
--amber-ink: #8A5310; /* variante papier : l'ambre d'ecran est illisible sur fond clair */
--line: #222A30;
--display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--body: 'Newsreader', Georgia, 'Times New Roman', serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
color-scheme: dark;
}
*{ box-sizing: border-box; }
/* ---------- language switching ----------
:not(:root) is essential: the element itself carries lang="fr"
when French is active, and must never be hidden by these rules. */
[lang="fr"]:not(:root){ display: none; }
:root[data-lang="fr"] [lang="fr"]:not(:root){ display: revert; }
:root[data-lang="fr"] [lang="en"]:not(:root){ display: none; }
body{
background: var(--stage);
color: var(--marker);
font-family: var(--body);
font-size: 18px;
line-height: 1.64;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.wrap{ max-width: 1080px; margin: 0 auto; padding-inline: 24px; }
a{ color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }
/* ---------- top bar ---------- */
.bar{
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
background: rgba(11,13,15,.88);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.bar .wrap{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding-block: 11px;
}
.bar .who{
font-family: var(--display); font-weight: 600; font-size: 15px;
letter-spacing: .01em; color: var(--marker);
}
.lang{ display: flex; align-items: center; gap: 2px; }
.lang button{
appearance: none; background: none; border: 0; cursor: pointer;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--dimmer);
padding: 5px 9px; border-radius: 2px;
}
.lang button:hover{ color: var(--marker); }
.lang button[aria-pressed="true"]{ color: var(--stage); background: var(--amber); }
.lang .sep{ color: var(--line); font-family: var(--mono); font-size: 11px; }
/* ---------- draft notice ---------- */
.draft{ border-bottom: 1px solid var(--line); background: var(--stage-2); }
.draft .wrap{ padding-block: 14px; }
.draft p, .draft ul{
font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--dim);
margin: 0; max-width: none;
}
.draft b{ color: var(--amber); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.draft ul{ margin-top: 6px; padding-left: 18px; }
/* ---------- hero ---------- */
.hero{ position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-photo{
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 62% 32%;
filter: grayscale(.35) contrast(1.05) brightness(.62);
}
.hero::after{
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(to right, rgba(10,10,11,.92) 0%, rgba(10,10,11,.72) 34%, rgba(10,10,11,.18) 62%, rgba(10,10,11,.38) 100%),
linear-gradient(to top, rgba(10,10,11,.85) 0%, rgba(10,10,11,0) 46%);
}
/* hero a marqueurs : retire pour le moment, la photo porte le bloc seule */
.hero{ min-height: 540px; }
#markers{ display: none; }
.hero-text{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 54px; pointer-events: none; }
.hero-text .wrap{ width: 100%; }
.eyebrow{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em;
text-transform: uppercase; color: var(--amber); margin: 0 0 14px;
}
h1{
font-family: var(--display); font-weight: 700;
font-size: clamp(2.4rem, 7vw, 4.4rem);
line-height: .96; letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.role{
font-family: var(--body); font-size: 20px; letter-spacing: 0;
color: var(--dim); margin: 16px 0 0;
}
.eyebrow::before{
content: ""; display: inline-block; width: 26px; height: 1px;
background: var(--amber); vertical-align: middle;
margin-right: 12px; position: relative; top: -1px;
}
/* ---------- sections ---------- */
section{ border-bottom: 1px solid var(--line); }
section > .wrap{ padding-block: 72px; }
/* Le repere : un tiret ambre devant chaque label de section. C'est le motif
qui ponctue tout le systeme — section, citation, label de reel. */
.label{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .17em;
text-transform: uppercase; color: var(--amber); margin: 0 0 22px;
}
.label::before{
content: ""; display: inline-block; width: 26px; height: 1px;
background: var(--amber); vertical-align: middle;
margin-right: 12px; position: relative; top: -1px;
}
h2{
font-family: var(--display); font-weight: 600;
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
line-height: 1.12; letter-spacing: -.015em; margin: 0 0 20px; text-wrap: balance;
}
h3{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; margin: 0 0 6px; }
p{ margin: 0 0 18px; max-width: 64ch; color: var(--text); }
h1, h2, h3{ color: var(--marker); }
/* Le mono capitale avec interlettrage est large : la mesure de 64ch le coupe
en plein milieu. Ces lignes de service se mesurent a leur conteneur. */
.eyebrow, .src, .attrib, .label, .foot, .code{ max-width: none; }
.muted{ color: var(--dim); }
.split{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
/* thesis */
.thesis blockquote{
margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.05rem);
line-height: 1.32; font-style: italic; font-weight: 300;
max-width: 30ch; text-wrap: balance;
}
.attrib{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--dimmer); margin-top: 22px;
}
/* citation de presse + master reel : une seule bande */
.reel-lead .wrap{ padding-block: 100px; }
.lead-top{ display: grid; grid-template-columns: 1fr 1fr; gap: 78px; align-items: start; margin-bottom: 54px; }
.lead-top:last-child{ margin-bottom: 0; } /* version live : pas de cadre dessous */
.reel-lead blockquote{
margin: 0; font-family: var(--display); font-weight: 500;
font-size: clamp(1.55rem, 3.3vw, 2.5rem); line-height: 1.12;
letter-spacing: -.01em; max-width: 18ch; text-wrap: balance;
}
.reel-lead .src{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber); margin-top: 22px;
}
.reel-lead h2{ margin-top: 2px; }
.reel-lead .lead-top .muted{ margin-top: 20px; max-width: 48ch; }
/* ---------- reels ---------- */
.reels{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.reel{ display: flex; flex-direction: column; gap: 12px; }
.reel.master{ grid-column: 1 / -1; }
.frame{
aspect-ratio: 16 / 9; width: 100%; max-width: 100%;
background: var(--stage-2); border: 1px solid var(--line);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; color: var(--dimmer);
font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.reel.master .frame{ background: var(--stage-3); }
.code{ font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; color: var(--amber); }
.reel h3{ margin: 0; }
.reel p{ margin: 0; font-size: 15px; color: var(--dim); }
.reel-head{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* ---------- capability rows ---------- */
.rows{ display: flex; flex-direction: column; }
/* La colonne de gauche passe en Archivo : c'est un intitule, pas une etiquette.
L'ambre remonte au label de section, ou il structure la page. */
.row{ display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 40px; padding-block: 28px; border-top: 1px solid var(--line); }
.row:first-of-type{ border-top: 0; padding-top: 0; }
.row .k{
font-family: var(--display); font-weight: 600; font-size: 16px;
line-height: 1.5; letter-spacing: -.005em; color: var(--marker); padding-top: 3px;
}
.row .v{ max-width: 660px; }
.row .v p{ margin: 0; }
.said{
margin-top: 18px; font-size: 16px; font-style: italic; color: var(--dim);
line-height: 1.55;
}
.said::before{
content: ""; display: inline-block; width: 22px; height: 1px;
background: var(--amber); vertical-align: middle;
margin-right: 12px; position: relative; top: -2px;
}
.said span{
font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--dimmer); display: block; margin-top: 8px;
}
/* ---------- credits ---------- */
.credits{ display: flex; flex-direction: column; gap: 26px; }
.credit-group .k{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--amber); margin-bottom: 8px;
}
.credit-group .v{ color: var(--dim); font-size: 16px; line-height: 1.8; max-width: none; margin: 0; }
/* ---------- awards ---------- */
.awards{ display: flex; flex-direction: column; }
.award{ display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; padding-block: 18px; border-top: 1px solid var(--line); align-items: baseline; }
.award.first{ border-top: 0; padding-top: 0; }
.award .t{ font-family: var(--display); font-weight: 500; font-size: 1rem; }
.award .w{ color: var(--dim); font-size: 15px; grid-column: 1 / -1; max-width: 62ch; }
.award .n{ font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: .08em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note{
font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--dimmer);
margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 70ch;
}
/* ---------- quotes ---------- */
.quotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }
.quote{ display: flex; flex-direction: column; gap: 14px; }
.quote p{ margin: 0; font-size: 16.5px; font-style: italic; line-height: 1.55; }
.quote .who{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); line-height: 1.6; font-style: normal; }
.pending{ color: var(--amber); }
/* ---------- portrait de reconnaissance ---------- */
.rec-photo{ margin: 34px 0 0; display: grid; grid-template-columns: 270px 1fr; gap: 30px; align-items: start; }
.rec-photo img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.rec-photo figcaption{ font-size: 14.5px; line-height: 1.6; color: var(--dim); max-width: 56ch; }
.rec-photo figcaption .credit{
display: inline-block; margin-top: 10px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--dimmer);
}
/* ---------- contact ---------- */
.contact .wrap{ padding-block: 80px; }
.contact h2{ font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.contact a{ font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.5rem); }
.foot{ font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); padding-block: 28px; }
@media (max-width: 820px){
.split{ grid-template-columns: 1fr; gap: 36px; }
.reels{ grid-template-columns: 1fr; }
.row{ grid-template-columns: 1fr; gap: 10px; }
.quotes{ grid-template-columns: 1fr; gap: 32px; }
.hero{ min-height: 340px; }
section > .wrap{ padding-block: 56px; }
/* barre : le nom sort, la ligne Travaux / Enseignement / Contact tient d'un bloc */
.lead-top{ grid-template-columns: 1fr; gap: 34px; margin-bottom: 34px; }
.reel-lead blockquote{ max-width: 22ch; }
.reel-lead .wrap{ padding-block: 64px; }
.rec-photo{ grid-template-columns: 1fr; gap: 16px; align-items: start; }
.rec-photo img{ max-width: 260px; }
.bar .who{ display: none; }
.nav{ gap: 16px; flex-wrap: nowrap; }
.nav a.cta{ margin-left: 0; padding: 4px 10px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}
/* ---------- navigation ---------- */
.nav{ display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.nav a{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--dimmer); text-decoration: none;
}
.nav a:hover{ color: var(--marker); }
.nav a[aria-current="page"]{ color: var(--marker); }
.nav a.cta{
color: var(--amber); border: 1px solid rgba(201,162,92,.58);
padding: 5px 13px; border-radius: 2px; margin-left: auto;
font-size: 11.5px; letter-spacing: .16em;
transition: background-color .18s ease, border-color .18s ease;
}
.nav a.cta:hover{ background: rgba(201,162,92,.12); border-color: var(--amber); color: var(--amber); }
.nav a.cta[aria-current="page"]{ color: var(--amber); }
#contact{ scroll-margin-top: 78px; }
/* ---------- teaching page ---------- */
.page-head{ border-bottom: 1px solid var(--line); }
.page-head .wrap{ padding-block: 72px 64px; }
.page-head h1{
font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.02;
max-width: 18ch; margin-bottom: 24px;
}
.page-head .lede{
font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55;
color: var(--dim); max-width: 58ch; margin: 0;
}
.formats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.format{ background: var(--stage); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.format .meta{
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber); font-variant-numeric: tabular-nums;
}
.format h3{ margin: 0; font-size: 1.15rem; }
.format p{ margin: 0; font-size: 15.5px; color: var(--dim); max-width: none; }
.format .status{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--dimmer); margin-top: auto; padding-top: 10px;
}
.day{ display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding-block: 20px; border-top: 1px solid var(--line); }
.day:first-of-type{ border-top: 0; padding-top: 0; }
.day .d{ font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.day p{ margin: 0; font-size: 15.5px; color: var(--dim); }
.facts{ display: flex; flex-wrap: wrap; gap: 0 48px; margin-top: 8px; }
.fact{ padding-block: 14px; }
.fact .n{ font-family: var(--display); font-weight: 600; font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: block; }
.fact .l{ font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); }
@media (max-width: 820px){
.formats{ grid-template-columns: 1fr; }
.day{ grid-template-columns: 1fr; gap: 6px; }
.page-head .wrap{ padding-block: 48px 44px; }
}
/* pull quote inside body copy */
blockquote.pull{
margin: 26px 0 22px; padding-left: 18px;
border-left: 2px solid var(--amber);
font-family: var(--display); font-weight: 500;
font-size: 1.05rem; line-height: 1.42; letter-spacing: -.005em;
max-width: 46ch;
}
blockquote.pull cite{
display: block; margin-top: 12px; font-style: normal;
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--dimmer);
}
/* ---------- photo de plateau ---------- */
.stage-photo{ margin: 0 0 28px; }
.stage-photo img{
display: block; width: 240px; max-width: 100%; height: auto;
border-radius: 2px; filter: grayscale(.2) contrast(1.04) brightness(.94);
}
.stage-photo figcaption{
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
color: var(--dimmer); margin-top: 10px; max-width: 240px; line-height: 1.5;
}
/* ---------- la chaine complete ---------- */
.chain{ border-top: 1px solid var(--line); }
.phase{
display: grid; grid-template-columns: 240px 1fr; gap: 28px;
padding: 26px 0; border-bottom: 1px solid var(--line);
}
.phase-k .num{
display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
color: var(--amber); margin-bottom: 8px;
}
.phase-k h3{ margin: 0; font-size: 1.05rem; line-height: 1.25; }
.phase-v ul{ margin: 0; padding-left: 17px; }
.phase-v li{ font-size: 15.5px; color: var(--dim); margin-bottom: 10px; line-height: 1.55; max-width: 74ch; }
.phase-v li:last-child{ margin-bottom: 0; }
@media (max-width: 860px){ .phase{ grid-template-columns: 1fr; gap: 12px; } }
/* ---------- hero : la danse en marqueurs ---------- */
/* Fond de video noir pur + fusion « lighten » : le rectangle disparait
sous le gris de la page quel que soit le rendu des noirs par le codec. */
.hero{ min-height: 540px; }
/* La danse est centree entre le bord droit du titre et le bord de page.
50% - 210px est la position mesuree du bord droit du titre, stable
de 1200 a 1920 px de large. */
.hero-media{
position: absolute; top: 0; bottom: 65px; right: 0;
left: calc(50% - 210px);
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none;
/* surtout pas de z-index ici : il creerait un contexte d'empilement
qui isolerait la fusion « lighten » de la video du fond de page. */
}
.hero-video{
display: block;
max-height: 432px; max-width: 100%;
height: auto; width: auto;
mix-blend-mode: lighten;
}
.hero::after{
background:
linear-gradient(to right, rgba(11,13,15,.97) 0%, rgba(11,13,15,.80) 26%,
rgba(11,13,15,.14) 50%, rgba(11,13,15,0) 68%),
linear-gradient(to top, rgba(11,13,15,.62) 0%, rgba(11,13,15,0) 38%);
}
/* Le titre doit se reduire d'un seul bloc. h1 est fluide (7vw) ; si la
surlignee et la ligne de role restent fixes, les proportions cassent des
que la page retrecit. On les accroche donc a la meme pente : chaque
valeur est son maximum actuel divise par 70,4 px (h1 a son plafond),
exprime en vw. Le plancher est la valeur atteinte a 760 px, ou la
mise en page telephone prend le relais. */
.eyebrow{
font-size: clamp(8.7px, 1.1434vw, 11.5px);
margin-bottom: clamp(10.6px, 1.3920vw, 14px);
}
.eyebrow::before{
width: clamp(19.6px, 2.5852vw, 26px);
margin-right: clamp(9.1px, 1.1932vw, 12px);
}
.role{
font-size: clamp(15.1px, 1.9886vw, 20px);
margin-top: clamp(12.1px, 1.5909vw, 16px);
}
/* Credit + bouton son : centres sur la meme bande que la danse, pas colles
au bord de page — sinon ils glissent quand la largeur change alors que
le hero, lui, reste centre. */
.hero-meta{
position: absolute; bottom: 22px;
left: var(--meta-left, calc(50% - 210px)); right: 0;
display: flex; align-items: center; justify-content: center; gap: 13px;
z-index: 3; pointer-events: none;
}
.hero-meta.is-tight{ left: 0; justify-content: flex-end; padding-right: 24px; }
.hero-credit{
margin: 0; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .10em; text-transform: uppercase;
color: var(--dimmer); opacity: .62; white-space: nowrap;
/* sans ca, la max-width globale des paragraphes coupe la ligne a 404 px
et le texte, en nowrap, passe sous le bouton. */
max-width: none;
}
.hero-sound{
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 1px solid var(--line);
border-radius: 999px; padding: 6px 13px 6px 10px;
color: var(--dim); cursor: pointer;
font-family: var(--mono); font-size: 10.5px;
letter-spacing: .14em; text-transform: uppercase;
transition: color .18s, border-color .18s;
pointer-events: auto;
}
.hero-sound:hover{ color: var(--marker); border-color: var(--dim); }
.hero-sound svg{ width: 16px; height: 16px; fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; }
/* Plus petit et plus discret : la commande ne doit pas peser plus que le
credit qu'elle accompagne. Le cadre n'apparait qu'au survol. */
.hero-sound{
gap: 6px; padding: 3px 9px 3px 7px;
border-color: transparent;
color: var(--dimmer); opacity: .62;
font-size: 9.5px; letter-spacing: .12em;
transition: color .18s, border-color .18s, opacity .18s;
}
.hero-sound svg{ width: 13px; height: 13px; stroke-width: 1.6; }
.hero-sound:hover{ color: var(--marker); border-color: var(--line); opacity: 1; }
.hero-sound:focus-visible{ outline: 1px solid var(--amber); outline-offset: 2px; }
.hero-sound .spk{ fill: currentColor; stroke-linejoin: round; }
.hero-sound .waves{ display: none; }
.hero-sound .cross{ display: inline; }
.hero-sound[aria-pressed="true"]{ color: var(--amber); border-color: transparent; opacity: .92; }
.hero-sound[aria-pressed="true"] .waves{ display: inline; }
.hero-sound[aria-pressed="true"] .cross{ display: none; }
@media (max-width: 760px){
/* la danse passe sous le titre, centree entre les deux bords de page */
.hero{ min-height: 0; display: flex; flex-direction: column; }
.hero-text{
position: static; order: 1;
padding-top: 38px; padding-bottom: 14px;
}
.hero-text h1{ font-size: clamp(1.95rem, 8.4vw, 2.35rem); }
/* sous 760 px la pente desktop donnerait 5 a 6 px : on reprend la main */
.hero-text .eyebrow{ font-size: 10.5px; margin-bottom: 12px; }
.hero-text .eyebrow::before{ width: 22px; margin-right: 10px; }
.hero-text .role{ font-size: 16px; margin-top: 13px; }
.hero-media{
position: static; order: 2;
top: auto; bottom: auto; left: auto; right: auto;
width: 100%; margin: 0 0 30px;
}
.hero-video{ max-height: none; width: 86%; max-width: 380px; }
.hero-meta, .hero-meta.is-tight{
position: static; order: 3;
left: auto; right: auto; justify-content: center;
flex-direction: column; gap: 12px;
align-items: center; text-align: center;
padding: 0 24px 30px;
}
.hero-credit{ font-size: 10px; line-height: 1.6; white-space: normal; }
.hero::after{ content: none; }
}
/* ---------- sections repliables ----------
La ligne de titre est le nom ambre de la section : c'est le seul element
que les huit sections ont en commun, et c'est sous ces noms que la page
se lit comme un sommaire une fois tout replie. La fleche pointe a droite
au repos, pivote vers le bas a l'ouverture. Sans JS, rien ne se replie :
la page reste entiere. */
Le tiret ambre passe du au bouton : si on rendait le
flex, sa
regle `display` entrerait en conflit avec le systeme de langue, qui masque
l'autre langue par `display: none` a specificite egale — et les deux
langues s'afficheraient en meme temps. */
.label.is-toggle{ margin-bottom: 0; }
.label.is-toggle::before{ display: none; }
.sec-toggle{
display: inline-flex; align-items: center;
gap: 20px; margin: 0; padding: 0;
background: none; border: 0;
color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
text-align: left; cursor: pointer;
transition: color .18s;
}
.sec-toggle::before{
content: ""; flex: none; width: 26px; height: 1px; background: var(--amber);
}
/* Toutes les fleches sur la meme verticale : le nom occupe une largeur
commune, mesuree en JS sur le plus long de la page et de la langue
courante. Sans JS, --sec-w vaut auto et la fleche suit simplement le
texte, ce qui reste juste. */
.sec-name{ display: block; width: var(--sec-w, auto); }
.sec-toggle:hover{ color: var(--marker); }
.sec-toggle:focus-visible{ outline: 1px solid var(--amber); outline-offset: 5px; }
.chev{
width: 14px; height: 14px; flex: none;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .24s ease;
}
.sec-toggle[aria-expanded="true"] .chev{ transform: rotate(90deg); }
.sec-body{ padding-top: 30px; }
.sec-body[hidden]{ display: none; }
/* Repliee : plus de respiration de section, et surtout plus de filet.
Sept sections repliees a la suite faisaient une echelle de traits ;
il ne doit rester que les noms. Le filet revient des que la section
s'ouvre, parce que la il separe vraiment deux blocs de lecture. */
section.is-collapsed{ border-bottom-color: transparent; }
section.is-collapsed > .wrap{ padding-block: 17px; }
/* ---------- retour en haut ---------- */
.to-top{
position: fixed; right: 22px; bottom: 22px; z-index: 50;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px 9px 11px;
background: var(--stage-2); border: 1px solid var(--line); border-radius: 999px;
color: var(--dim); cursor: pointer;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s, transform .2s, color .18s, border-color .18s;
}
.to-top.is-on{ opacity: .9; transform: none; pointer-events: auto; }
.to-top:hover{ color: var(--marker); border-color: var(--dim); opacity: 1; }
.to-top:focus-visible{ outline: 1px solid var(--amber); outline-offset: 3px; }
.to-top svg{ width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- portrait de l'ecran these ---------- */
.portrait{ margin: 0 0 40px; max-width: 300px; }
.portrait .frame{ aspect-ratio: 4 / 5; }
.portrait figcaption{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--dimmer); margin-top: 10px;
}
@media (max-width: 820px){
.portrait{ max-width: 230px; margin-bottom: 30px; }
.to-top{ right: 16px; bottom: 16px; }
}
/* ---------- bandeau photo de l'en-tete enseignement ----------
Plateau de la Griffith Film School, Brisbane, 2015 : la masterclass dont
parle l'etude de cas plus bas. Memes reglages que la photo qui tenait le
hero de l'accueil — cadrage, gris, luminosite, degrade — et meme hauteur
de bande, 540 px. La bande s'arrete sous le chapo ; les citations vivent
en dessous, sur le fond de page, centrees dans leur propre respiration. */
.head-band{
position: relative; overflow: hidden;
min-height: 540px; display: flex; align-items: center;
}
.head-band .wrap{ position: relative; z-index: 2; width: 100%; }
.head-photo{
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 62% 32%;
filter: grayscale(.35) contrast(1.05) brightness(.62);
}
.head-band::after{
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
/* Les arrets sont en pixels, pas en pourcentage : la zone sombre doit
couvrir la colonne de texte, qui fait la meme largeur sur un
telephone que sur un grand ecran. En pourcentage, un ecran etroit
ramenait l'ouverture du degrade au milieu du chapo. */
linear-gradient(to right, rgba(10,10,11,.92) 0px, rgba(10,10,11,.84) 430px,
rgba(10,10,11,.22) 820px, rgba(10,10,11,.40) 100%),
linear-gradient(to top, rgba(10,10,11,.85) 0%, rgba(10,10,11,0) 46%);
}
/* .page-head .wrap impose 72/64 : on reprend la main a la meme
specificite, sinon les citations ne sont pas centrees. */
.page-head .head-quotes{ padding-block: 56px; }
/* Pas de rupture a 760 px : la bande garde sa hauteur et son degrade a
toutes les largeurs. L'ancienne version basculait min-height a 0 et
changeait de degrade d'un coup — la photo sautait de 134 px et changeait
d'aspect entre deux pixels de largeur de fenetre. */
@media (max-width: 760px){
.page-head .head-quotes{ padding-block: 40px; }
/* Sur telephone les trois citations passent en pile et occupent tout
l'ecran : a leur taille d'ordinateur elles pesaient plus que le titre
qu'elles sont censees appuyer. Les noms surtout, en mono capitale sur
trois lignes chacun. */
.head-quotes .quotes{ gap: 26px; }
.head-quotes .quote{ gap: 9px; }
.head-quotes .quote p{ font-size: 14px; line-height: 1.5; }
.head-quotes .quote .who{ font-size: 9.5px; letter-spacing: .08em; line-height: 1.55; }
}