/* =============================================================================
PCC — Feuille de style unique du site
-----------------------------------------------------------------------------
Comment lire ce fichier :
1. TOKENS ........... toutes les valeurs du design system (couleurs, tailles)
2. BASES ............ remises à zéro et styles de texte généraux
3. MISE EN PAGE ..... conteneurs et sections
4. COMPOSANTS ....... header, boutons, liens, lecteur vidéo, footer…
5. SECTIONS ......... les blocs propres à chaque page
6. RESPONSIVE ....... adaptations tablette et mobile
RÈGLE D'OR : ne jamais écrire une couleur ou une taille « en dur » dans le
code. Tout passe par les tokens de la partie 1. Pour changer le site entier,
on change une seule valeur ici.
============================================================================= */
/* =============================================================================
1. TOKENS — les fondations du design system
============================================================================= */
:root{
/* ---- Couleurs -------------------------------------------------------------
Le site tient sur des gris, plus UNE couleur : le bordeaux d'identité,
défini juste en dessous. Il marque les personnes et l'action, rien
d'autre. Tout le reste vient du contenu — une vidéo lancée, une
couverture de livre. */
/* ⚠️ PLUS DE BLANC PUR. C'ETAIT #FFFFFF. Un blanc legerement chaud donne au
fond une matiere que le blanc d'ecran n'a pas : c'est la difference entre
un ecran et une page. Le noir du texte (--ink) reste un quasi-noir, pas
un noir pur, pour la meme raison. Les deux surfaces secondaires suivent,
avec la meme chaleur, sinon elles paraitraient sales sur ce fond.
Les blancs qui restent en « #fff » plus bas sont VOULUS : ce sont ceux
poses sur une video ou une photo (boutons, mot-symbole, menu), ou un
blanc chaud tournerait au jaune. */
/* ⚠️ DEUXIEME REGLAGE. Le blanc CHAUD (#FAF8F5) tirait visiblement vers le
beige a cote des portraits sur fond noir, et c'est lui qui donnait au site
un air de maison d'edition plutot que de bureau de 2026. Celui-ci est un
blanc casse NEUTRE : la matiere reste (ce n'est pas le blanc de l'ecran),
la chaleur est partie. */
/* ⚠️ TROISIEME REGLAGE. Retour a un ivoire tres clair, a peine plus
retenu que le premier, comme les pages interieures d'Anthropic. Pour
revenir au neutre : #F9F9F7 / #F0F0EE / #E3E3E0. */
--bg: #FAF9F5; /* fond principal — ivoire tres clair */
--bg-subtle: #F0EEE8; /* surfaces secondaires, cartes, placeholders */
--ink: #141414; /* texte principal, titres */
/* ---- La couleur d'identité ----------------------------------------------
Le site est en noir et blanc, à DEUX exceptions près, et elles disent la
même chose : ce rouge marque les personnes (le fond des portraits) et
l'action (les boutons). Rien d'autre ne doit le porter — dès qu'il sert à
décorer, il cesse d'être une signature.
Le blanc dessus atteint un contraste de 13,4:1, très au-delà de ce
qu'exige l'accessibilité : le libellé reste lisible partout, y compris
pour une vue fatiguée ou un écran mal réglé.
Pour revenir au noir : remettez #141414 ici, et rien d'autre à toucher. */
--accent: #660000;
--on-accent: #ffffff;
--ink-secondary: #6B6B6B; /* texte secondaire — PLANCHER de contraste */
--ink-tertiary: #A0A0A0; /* désactivé + placeholders de champ UNIQUEMENT */
--hairline: #E5E2DA; /* filets, bordures, séparateurs — meme chaleur que le fond */
--on-ink: #FFFFFF; /* texte posé sur du noir */
/* ---- Espacement ---------------------------------------------------------
Douze crans. Les quatre premiers servent aux réglages fins (l'écart entre
un nom et sa fonction), les suivants aux blocs, les derniers aux sections.
⚠️ LES NUMÉROS ONT CHANGÉ. L'ancienne échelle allait de 4 à 160 px en dix
crans ; celle-ci en compte douze, avec trois valeurs nouvelles (12, 40 et
un 32 conservé). Toutes les références du fichier ont été renumérotées en
même temps, de sorte qu'aucun espacement n'a bougé — mais si vous
retrouvez un vieux bout de code ailleurs, --space-4 n'y voulait pas dire
la même chose. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 48px;
--space-9: 64px;
--space-10: 96px;
--space-11: 128px;
--space-12: 160px;
/* L'ECART A L'INTERIEUR D'UN BLOC DE TITRE — le seul espacement du site qui
grandit avec l'ecran.
Les douze crans ci-dessus sont en pixels fixes, et c'est voulu : un
espacement qui change de valeur selon l'ecran est impossible a tenir a
l'oeil sur vingt-huit pages. Une exception se justifie pourtant.
Les TITRES, eux, grandissent : « --fs-2 » va de 30 a 58 px, « --fs-3 » de
28 a 48. Mesure sur la page Sujets : le titre d'une bande passe de 35 px a
1024 de large a 58 px a 1800, soit deux tiers de plus, pendant que l'ecart
sous lui restait a 12 px. Le rapport entre les deux tombait de 0,34 a 0,21
— le chapo se rapprochait du titre a mesure que le titre grossissait,
jusqu'a toucher ses jambages. Ce n'est pas une impression : c'est
arithmetique.
Ce jeton suit donc la meme courbe que « --fs-2 », a un tiers de sa valeur :
12 px sous un titre de 35, 20 px sous un titre de 58. Le rapport reste
constant, le bloc garde sa forme a toutes les tailles.
Il ne sert QU'A CA — l'interieur d'un bloc de titre. La respiration entre
deux sections a deja son reglage (« --section-y »), et depuis peu la
hauteur d'ecran elle-meme sur les quatre pages en plein ecran. */
--space-tete: clamp(12px, 1.15vw, 20px);
/* ---- Grille et largeurs --------------------------------------------------
Ces valeurs grandissent avec l'écran, sans à-coup.
clamp(plancher, proportion, plafond) se lit : « au minimum ceci, au mieux
cette proportion de la largeur d'écran, au maximum cela ».
En dessous de ~1830px, tout vaut le plancher — c'est-à-dire exactement les
valeurs du design system. Au-delà, la composition suit l'écran au lieu de
rester figée au milieu du vide. */
--content-max: clamp(1320px, 72vw, 1680px); /* largeur maximale du contenu */
/* Marges latérales. C'était clamp(64px, 4.2vw, 96px) — 4 % de l'écran, un
site presque pleine largeur. On passe à 13 % : la colonne de lecture se
resserre, et surtout la marge devient assez large pour que le mot-symbole
y tienne, comme sur les grandes agences étrangères.
C'EST LE RÉGLAGE LE PLUS LOURD DU SITE : il change la largeur des vingt-huit
pages d'un coup. Pour revenir en arrière, remettez l'ancienne ligne. */
--margin-x: clamp(48px, 13vw, 240px);
/* Les écrans vidéo gardent les ANCIENNES marges. La marge large du site
(13 %) sert à loger le mot-symbole et à resserrer la colonne de lecture ;
sur une vidéo plein écran elle n'a aucun sens : elle repousserait le
bouton de pause et le texte loin à l'intérieur de l'image.
C'est la valeur qu'avait --margin-x avant l'élargissement. */
--margin-video: clamp(64px, 4.2vw, 96px);
--section-y: clamp(78px, 4.8vw, 120px); /* respiration entre sections */
--player-max: clamp(440px, 25vw, 560px); /* largeur d'une vignette vidéo */
--reading-max: 66ch; /* longueur de ligne confortable pour le corps */
/* Colonne de lecture des pages profil : plus étroite que le contenu général,
et centrée. Tout ce qui compose une page profil s'y aligne — la bio, les
conférences, les publications. Nommée ici plutôt que recopiée, pour qu'un
bloc ne puisse pas s'en écarter par accident. */
--rail-max: clamp(1000px, 52vw, 1120px);
/* Hauteur de la barre du haut. Ce n'est PAS un réglage cosmétique : la valeur
sert à calculer la hauteur des écrans vidéo (100vh moins cette hauteur), le
décalage du hero qui passe dessous, et le haut du menu du téléphone. La
changer ici recalcule tout le reste — ne la changez qu'ici.
96 px, puis 88. Aujourd'hui 76, la même valeur que sur téléphone : la barre
ne porte plus qu'UNE ligne — le mot-symbole et « Agence de conférenciers »
côte à côte, la baseline étant partie au pied de page. Le plus haut de ce
qu'elle contient est le mot-symbole lui-même. */
--header-h: 70px; /* 76 → 70 le 30 septembre, comme anthropic.com */
/* ---- Typographie : une seule famille ------------------------------------ */
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* La deuxième famille, et la seule. Le sans porte la STRUCTURE — titres,
boutons, navigation. Le serif porte ce qui SE LIT : les sous-titres de
section et les titres des conférenciers.
Un serif posé à un seul endroit a l'air tombé là par accident ; c'est
pour ça qu'il en a deux, et qu'il en aura peut-être trois (les bios).
Georgia est la roue de secours : installée partout, même allure. */
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
/* Police des grands titres (29 septembre) : Sora, large et ronde. Si Google
Fonts ne répond pas, les titres retombent sur Inter. */
--font-titre: 'Sora', 'Inter', system-ui, sans-serif;
/* Les plafonds sont volontairement hauts : c'est ce qui permet aux titres de
continuer à grandir sur un grand écran. En dessous de ~1470px, c'est la
proportion (vw) qui décide — rien ne change par rapport au design system. */
--fs-display: clamp(40px, 6vw, 104px); /* titre héros — 2 lignes maximum */
--fs-body: 17px; /* corps courant */
--fs-meta: 13px; /* mentions, durées, fil d'Ariane */
--fs-label: 11px; /* étiquettes en petites capitales */
/* --fs-h2 et --fs-h3 ont disparu : ils sont devenus --fs-3 et --fs-5, qui
couvrent la même plage et servent aussi ailleurs qu'aux balises h2 et h3.
Une taille se nomme par sa TAILLE, pas par la balise qui la portait. */
/* ---- Mouvement ----------------------------------------------------------- */
/* C'ETAIT 150 ms. Un survol qui repond en 150 ms est vif ; a 250 ms il est
pose. C'est la duree des sites qui ne se pressent pas. Les menus et la
barre des noms gardent leurs durees propres, plus bas : ce sont des
mecanismes, pas des survols. */
--t-fast: 250ms; /* liens, boutons */
--t-media: 400ms; /* fondu noir et blanc → couleur de la vidéo */
--ease: cubic-bezier(.22,.61,.36,1);
/* Le bandeau s'en va, et il s'en va VITE.
Il y a eu ici un départ lesté : 480 ms sur une courbe qui accélérait, avec
l'idée qu'un départ lent se lit comme du soin. À l'usage, non — le bandeau
traînait derrière le contenu et l'effet se voyait, ce qui est exactement ce
qu'un mouvement d'interface ne doit pas faire. Il part maintenant en 180 ms,
un peu plus vite qu'il ne revient.
Les deux jetons restent séparés : si vous voulez retrouver un départ
appuyé, c'est ici et nulle part ailleurs — la barre des noms des pages
Conférenciers et Sujets relit ces deux valeurs pour bouger exactement avec
lui. Les changer ici les change partout. */
--t-sortie: 180ms;
--ease-sortie: var(--ease);
--t-entree: 220ms;
/* Le glissement des rangées horizontales quand on clique une flèche.
700 ms : assez long pour qu'on voie la rangée se déplacer et s'arrêter,
assez court pour qu'un deuxième clic ne soit pas une attente.
⚠️ Ne sert QU'aux flèches. Le geste au trackpad n'est jamais touché. */
--t-glisse: 700ms;
/* =========================================================================
LES JETONS NORMALISÉS
-------------------------------------------------------------------------
Ce bloc remplace progressivement les valeurs écrites au cas par cas plus
bas dans le fichier. Le principe : une poignée de crans, et chaque règle
se rattache au cran le plus proche. Une valeur sur mesure de plus, c'est
une valeur que personne ne saura réutiliser six mois plus tard.
Aucun de ces nombres n'est inventé : chacun reprend une valeur déjà
présente dans le fichier et absorbe le petit groupe de valeurs voisines.
========================================================================= */
/* ---- Tailles de texte ---------------------------------------------------
Onze crans. Les cinq premiers grandissent avec l'écran (clamp), les six
derniers sont fixes : en dessous de 22px, faire varier la taille avec la
largeur de la fenêtre ne se voit pas et complique tout. */
--fs-1: clamp(36px, 4.9vw, 84px); /* h1 de page */
--fs-2: clamp(30px, 3.4vw, 58px); /* punchline vidéo, nom en tête de fiche */
--fs-3: clamp(28px, 3vw, 48px); /* h2, titres de section, nom de conférencier */
--fs-4: clamp(22px, 2vw, 30px); /* titres de rubrique, de conférence, de format */
--fs-5: clamp(19px, 1.4vw, 23px); /* h3, titres de mentions légales */
--fs-lede: clamp(18px, 1.2vw, 21px); /* chapôs serif, bio d'accroche, citations */
--fs-sm: 15px; /* légendes, navigation, liens secondaires */
/* Les deux petits textes POSES SUR UNE IMAGE : la fonction sous le nom, et
le paragraphe de presentation. Ils font 15 px comme partout ailleurs
jusqu'a 1580 px de large, puis suivent l'ecran jusqu'a 19.
Pourquoi eux et pas le corps de texte du site : ce sont les seuls textes
du site places sous une punchline de 58 px, dans une image plein ecran.
Figes a 15, ils tombaient au quart de la taille du titre au-dessus d'eux.
Les deux partagent ce jeton pour ne pas pouvoir se desaccorder. */
--fs-media-sm: clamp(15px, 0.95vw, 19px);
/* LE TEXTE QUI SUIT UN GRAND TITRE : la fonction et la bio sous le nom d'un
conferencier, le lien « Voir les neuf conferenciers » sous un titre
d'encart, le chapo du bandeau podcast.
Ces textes etaient a 17 px, comme le corps courant. Mais un corps courant
est seul sur sa ligne, alors que ceux-la sont poses juste sous un titre qui
grandit de 28 a 58 px selon l'ecran. Mesure sur la page Conferenciers :
leur rapport au nom tombait de 0,45 a 0,35.
17 px jusqu'a 1480 de large — la valeur d'avant — puis jusqu'a 21. */
--fs-suite: clamp(17px, 1.15vw, 21px);
/* ---- Interlignes --------------------------------------------------------
Cinq crans, du plus serré au plus aéré. La règle est simple : plus le
texte est gros, plus l'interligne est serré ; plus il se lit longtemps,
plus il est ouvert. */
--lh-tight: 1.02; /* display et grands titres */
--lh-title: 1.1; /* titres moyens */
--lh-snug: 1.3; /* titres de carte, légendes */
--lh-body: 1.5; /* corps courant, bios */
--lh-read: 1.62; /* lecture longue, serif */
/* ---- Espacement des lettres ---------------------------------------------
Le serrage suit la TAILLE, pas le composant : un titre de 60px a besoin
d'être plus serré qu'un titre de 20px, quel que soit l'endroit où il se
trouve. C'est ce qui remplace les 29 réglages au cas par cas. */
--ls-display: -0.035em; /* au-delà de 60px */
--ls-title: -0.025em; /* 30 à 60px */
--ls-tight: -0.015em; /* 17 à 30px */
--ls-none: 0; /* corps courant */
--ls-label: 0.1em; /* étiquettes en capitales */
--ls-wide: 0.16em; /* sur-titres, titres de colonne du pied de page */
/* ---- Le gris désactivé reçoit enfin un nom ------------------------------
Il était écrit en dur dans .arrow-bare[disabled]. */
--ink-disabled: #C4C4C4;
/* ---- Voiles sur média ---------------------------------------------------
Quatre bases de noir différentes se partageaient ce travail (0,0,0 —
8,6,4 — 10,8,6 — 12,12,12). Une seule suffit : un noir légèrement chaud,
qui ne verdit pas les peaux sur les portraits. */
--veil-strong: rgba(10, 8, 6, .78);
--veil-mid: rgba(10, 8, 6, .52);
--veil-soft: rgba(10, 8, 6, .32);
--veil-none: rgba(10, 8, 6, 0);
/* ---- Blancs translucides, posés sur une vidéo ou une photo --------------
Treize niveaux d'opacité coexistaient. Quatre suffisent, et ils disent
enfin quelque chose : le texte principal, le secondaire, les mentions,
les bordures. */
--on-media: rgba(255,255,255,.95); /* texte principal */
--on-media-2: rgba(255,255,255,.78); /* texte secondaire */
--on-media-3: rgba(255,255,255,.55); /* mentions */
--on-media-line: rgba(255,255,255,.32); /* bordures */
}
/* Tablette : marges et respirations resserrées */
@media (max-width: 1024px){
:root{
--margin-x: 32px;
--section-y: 64px;
/* La barre revient à 76 px : le slogan a disparu, le mot-symbole est plus
petit, et 28 px de haut en moins, c'est 28 px de vidéo et de texte en
plus sur un petit écran. */
--header-h: 70px;
}
}
/* Mobile : marges 24px, sections 64–80px, titres redimensionnés */
@media (max-width: 640px){
:root{
--margin-x: 24px;
/* ⚠️ LA MARGE DU HERO DOIT SUIVRE CELLE DU SITE SUR TÉLÉPHONE.
Elle est écrite « clamp(64px, 4.2vw, 96px) » : sur un écran de 412 px,
4,2 vw ne font que 17 px, donc c'est toujours le PLANCHER de 64 px qui
gagnait — un plancher pensé pour un ordinateur. Mesuré : 31 % de l'écran
mangé par les marges (36 % sur un écran de 360), 284 px pour le texte, et
la question du conférencier sur 3 à 4 lignes.
Sur la marge du site, tout le hero s'aligne enfin sur le reste des pages. */
--margin-video: var(--margin-x);
--section-y: 52px;
/* Borne basse abaissée à 32px pour que « Le bon intervenant change tout. »
tienne sur deux lignes et non trois sur un écran de téléphone. */
--fs-display: clamp(32px, 8vw, 40px);
}
}
/* =============================================================================
2. BASES
============================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
/* Force l'attribut hidden à gagner, même sur les éléments qui ont un display
explicite (sinon un élément masqué en JS reste visible). */
[hidden]{ display: none !important; }
html{
background: var(--bg); /* évite tout liseré sombre au rebond de scroll */
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}
body{
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--ink); color: var(--bg); }
/* Contour de focus visible au clavier — accessibilité, en noir (jamais de couleur) */
/* L'anneau qui suit la navigation au clavier prend la couleur d'identité :
c'est un repère d'action, comme les boutons. */
:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---- Rôles typographiques ------------------------------------------------- */
.display{
margin: 0;
font-size: var(--fs-display);
font-weight: 600;
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
text-wrap: balance; /* équilibre les lignes, évite les mots orphelins */
}
/* 600, et plus rien au-dessus nulle part sur le site. Le site n'a plus que
trois graisses : 400, 500, 600. Le 800 avait été essayé sur tous les grands
titres ; il a été retiré — un titre qui hausse la voix vieillit mal.
Les petits h2 — pied de page, sections de fiche, pages légales — ne bougent
pas : ils portent chacun leur propre font-weight, qui gagne. */
h2, .h2{
margin: 0;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: var(--ls-tight);
line-height: var(--lh-title);
}
h3, .h3{
margin: 0;
font-size: var(--fs-5);
font-weight: 600;
line-height: var(--lh-snug);
}
.body-lg{
font-size: var(--fs-lede);
line-height: var(--lh-body);
margin: 0;
}
.meta{
font-size: var(--fs-meta);
line-height: var(--lh-body);
color: var(--ink-secondary);
margin: 0;
}
/* Label d'INFORMATION (l'enjeu d'un conférencier, « VOUS »…).
Ce n'est PAS un titre de section : on n'en met jamais au-dessus d'une section.
Pas de tiret « — » devant (règle validée). */
.label-info{
margin: 0;
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-label);
line-height: var(--lh-snug);
text-transform: uppercase;
color: var(--ink-secondary);
}
/* =============================================================================
3. MISE EN PAGE
============================================================================= */
/* Conteneur central : toutes les sections l'utilisent, donc tout est aligné. */
.container{
width: 100%;
max-width: calc(var(--content-max) + var(--margin-x) * 2);
margin-inline: auto;
padding-inline: var(--margin-x);
}
.section{ padding-block: var(--section-y); }
/* ---------------------------------------------------------------------------
UN ENCART QUI OCCUPE UN ÉCRAN ENTIER, quelle que soit la taille de l'écran.
Il ne sert aujourd'hui qu'à « Nos conférenciers », sur l'accueil : cet encart
faisait environ 700 px de haut pour 690 à 1020 px disponibles selon l'écran —
il flottait donc dans le vide sur un grand écran, et la section suivante
pointait sous la ligne de flottaison.
« min-height » et non « height » : si le contenu est plus haut qu'un écran —
c'est le cas sur téléphone — rien ne le comprime, il déborde normalement.
On retire la hauteur du bandeau du haut : il est collant et recouvre ce qui
passe dessous.
Le contenu est CENTRÉ dans la hauteur, et non réparti : la tête d'encart et
sa rangée de visages forment un bloc, les séparer autant qu'on les sépare des
bords casserait ce lien. La place en trop va donc moitié au-dessus, moitié
en dessous — les deux respirations restent égales entre elles.
--------------------------------------------------------------------------- */
/* Deux classes dans le sélecteur, et c'est nécessaire : « .section--serree »,
écrite plus bas, en pose un autre. À une classe chacune, c'est la dernière
écrite qui gagnerait — et ce serait l'asymétrique. */
.section.section--plein{
/* Rembourrage SYMÉTRIQUE, alors que « .section--serree » en pose 64 en haut
et 32 en bas. Cette asymétrie datait du temps où deux encarts se suivaient
et devaient tenir ensemble dans un écran ; ici l'encart occupe l'écran à
lui seul, et elle ne laissait plus que 32 px d'écart entre l'air du haut et
celui du bas. 48 px de chaque côté, soit la moyenne des deux : la hauteur
totale ne change pas, les deux respirations deviennent égales. */
padding-block: var(--space-8);
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
display: flex;
flex-direction: column;
justify-content: center;
}
/* Deux sections de l'accueil — les livres et les témoignages — respirent moins
que les autres : elles sont faites pour tenir ENSEMBLE dans une hauteur
d'écran, comme sur les grandes agences étrangères. C'est le seul endroit du
site où la respiration entre sections est réduite. */
/* TOUS les encarts de l'accueil portent cette classe. C'est elle qui règle la
respiration entre deux blocs : 32 px en haut et en bas, contre 78 px pour le
reste du site. Depuis que le filet est passé sous la tête de chaque encart,
plus rien ne sépare les blocs à part ce blanc — il n'a plus besoin d'être
aussi large.
C'est LE réglage à toucher si l'accueil vous paraît trop tassé ou trop aéré. */
.section--serree{ padding-block: var(--space-6); }
/* Le premier encart arrive juste après le carrousel vidéo, qui occupe tout
l'écran. Il lui faut plus d'air qu'entre deux encarts ordinaires : sans ça le
titre « Les Conférenciers » semble collé au bas de la vidéo. */
.vhero + .section{ padding-top: var(--space-9); }
/* ⚠️ SAUF S'IL OCCUPE L'ÉCRAN ENTIER. La règle juste au-dessus ajoute 64 px en
haut au premier encart, pour le décoller du carrousel vidéo. Quand l'encart
remplit l'écran et centre son contenu, cet air supplémentaire n'a plus lieu
d'être : il rend simplement le blanc du haut plus grand que celui du bas.
Mesuré : 16 px d'écart avant cette ligne, 0 après.
Elle est écrite ICI, après l'autre : à spécificité égale, c'est la dernière
qui gagne. La déplacer plus haut la rendrait sans effet. */
.vhero + .section--plein{ padding-block: var(--space-8); }
/* Une section faite de BANDES pleine largeur. Elle n'a pas de respiration à
elle : chaque bande porte la sienne, sinon le blanc de la section
s'ajouterait à la couleur des bandes et on verrait des liserés.
Elle garde la classe .section pour une raison précise : c'est
« .section[id] » qui décale les ancres sous la barre du haut. */
.section--bandes{ padding-block: 0; }
/* L'encart qui SUIT les bandes ne prend que 16 px en haut, et non 32.
La dernière bande porte déjà 48 px de rembourrage à l'intérieur d'elle-même
(.sujet), et comme elle est blanche, ce blanc-là ne se distingue pas du
blanc qui sépare deux encarts. 48 + 16 = les 64 px qu'on trouve partout
ailleurs. Sans cette règle on en compte 80, et l'encart suivant décroche. */
.section--bandes + .section{ padding-top: var(--space-4); }
/* Le header reste collé en haut : on décale les cibles de défilement d'autant,
sinon un lien d'ancre (ou un champ en erreur) se retrouve caché dessous. */
.section[id], .field, .banner{ scroll-margin-top: var(--space-10); }
/* Section séparée de la précédente par un filet fin (jamais par une ombre).
Le filet s'arrête aux marges du contenu, il ne traverse pas la page. C'est
la règle déjà appliquée sur les pages profil : un filet appartient au bloc
qu'il annonce, il s'aligne donc sur lui. Un trait qui déborde à gauche et à
droite n'appartient à rien.
Il est dessiné par un pseudo-élément, et pas par la bordure de la section :
c'est le seul moyen de lui donner la largeur du contenu sans ajouter une
balise dans les 24 pages. */
.section--ruled{ position: relative; }
.section--ruled::before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
/* exactement la largeur intérieure de .container */
width: min(100% - var(--margin-x) * 2, var(--content-max));
border-top: 1px solid var(--hairline);
}
/* Empêche un mot composé de se couper en fin de ligne (ex. « co-créer »).
Les titres ne doivent jamais présenter de coupure de mot. */
.nowrap{ white-space: nowrap; }
/* Texte réservé aux lecteurs d'écran : présent dans le code, invisible à l'œil.
Sert pour les libellés de champs qu'on ne veut pas afficher. */
.sr-only{
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Lien d'évitement pour la navigation au clavier (invisible jusqu'au focus). */
.skip-link{
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ink);
color: var(--bg);
padding: var(--space-4) var(--space-5);
font-size: var(--fs-meta);
}
.skip-link:focus{ left: 0; }
/* =============================================================================
4. COMPOSANTS RÉUTILISABLES
============================================================================= */
/* ---- 4.1 Header global ----------------------------------------------------
Identique sur toutes les pages. Fond blanc, filet en bas, jamais de bande
noire. Sur mobile, la navigation part dans un menu plein écran. */
.site-header{
position: sticky;
top: 0;
z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--hairline);
/* transform : c'est le RETOUR du bandeau qui est réglé ici (on retire la
classe « --cache »). Rapide, et freiné en fin de course.
Le départ, lui, est réglé sur .site-header--cache, plus bas. */
transition: background var(--t-media) var(--ease),
border-color var(--t-media) var(--ease),
color var(--t-media) var(--ease),
transform var(--t-entree) var(--ease);
}
/* Le bandeau s'efface quand on descend, revient quand on remonte : 76 px
rendus à la lecture sur des pages qui font trois à huit écrans de haut.
C'est le JavaScript (partie 1bis) qui pose et retire cette classe ; ici on
ne décrit que l'état caché.
Il n'y a rien à déplacer d'autre : le bandeau est en position collante, il
flotte au-dessus du contenu et ne prend pas sa place dans le flux. */
/* Le départ du bandeau : deux fois plus lent que son retour, et sur une courbe
qui accélère au lieu de freiner — il s'échappe vers le haut au lieu de se
ranger. C'est la seule chose du site qui soit volontairement lente.
La règle de transition est réécrite en entier : « transition » est une
propriété raccourcie, n'en redéclarer qu'une partie effacerait les autres. */
.site-header--cache{
transform: translateY(-100%);
transition: background var(--t-media) var(--ease),
border-color var(--t-media) var(--ease),
color var(--t-media) var(--ease),
transform var(--t-sortie) var(--ease-sortie);
}
/* Quelqu'un qui navigue au clavier arrive dans le bandeau par la touche Tab.
S'il était resté escamoté, le focus serait parti hors de l'écran. */
.site-header:focus-within{ transform: none; }
/* Certains règlent leur système sur « moins d'animations », souvent pour des
raisons vestibulaires. On respecte : le bandeau ne bouge plus du tout. */
@media (prefers-reduced-motion: reduce){
.site-header{ transition: background var(--t-media) var(--ease),
border-color var(--t-media) var(--ease),
color var(--t-media) var(--ease); }
.site-header--cache{ transform: none; }
}
/* ---- Header posé sur la vidéo (accueil uniquement) ------------------------
Tant que l'écran vidéo occupe le haut de la page, le header s'efface : plus
de bande blanche qui coupe l'image. Dès qu'on descend, il redevient opaque
— sinon des liens blancs se retrouveraient sur du blanc.
La bascule est posée par le JavaScript ; la classe de départ est écrite
directement dans index.html pour qu'il n'y ait aucun clignotement au
chargement. */
.site-header--sur-video{
background: transparent;
border-bottom-color: transparent;
color: #fff;
}
/* Sur la vidéo, le mot-symbole abandonne le rouge : un bordeaux sur une image
sombre disparaîtrait. Le blanc est la seule couleur qui tienne sur n'importe
quelle image. */
.site-header--sur-video .brand{ color: #fff; }
/* Le menu suit la meme logique que sur fond blanc : liens en blanc attenue,
page courante et survol en blanc plein. */
.site-header--sur-video .site-nav a{ color: var(--on-media-2); }
.site-header--sur-video .site-nav a:hover,
.site-header--sur-video .site-nav a[aria-current="page"]{ color: #fff; }
/* La ligne de métier est secondaire : sur une vidéo elle prend le blanc
atténué, comme le gris qu'elle prend sur fond blanc. En blanc plein elle
pesait autant que le mot-symbole. */
.site-header--sur-video .brand-titre{ color: var(--on-media-2); }
/* Même règle que .btn--clair : sur une image, le bouton reste blanc, et son
texte comme son contour passent au noir. Le rouge d'identité est fait pour
être vu en aplat ; en petits caractères sur du blanc, il se lit moins bien
qu'un noir franc. */
.site-header--sur-video .btn{
border-color: var(--ink);
background: #fff;
color: var(--ink);
}
.site-header--sur-video .btn:hover{ background: var(--on-media); }
.site-header--sur-video .nav-toggle__bars,
.site-header--sur-video .nav-toggle__bars::before,
.site-header--sur-video .nav-toggle__bars::after{ background: #fff; }
/* La barre prend toute la largeur de l'écran — c'est .site-header, au-dessus,
qui porte le fond blanc et le filet. Son CONTENU, lui, tient dans la même
boîte que le texte des pages : c'est la classe « container » qui s'en charge.
Seul le mot-symbole en sort : il est posé EN DEHORS DU FLUX, dans la marge
gauche (voir .brand). C'est ce qui garantit que le slogan démarre pile sur la
ligne où commence le contenu, quelle que soit la largeur du mot-symbole.
⚠️ IL Y AVAIT ICI « max-width: none », et c'était un bug.
La boîte du contenu a une largeur maximale, et au-delà elle se CENTRE. En
refusant cette largeur maximale, la barre gardait une marge fixe pendant que
le contenu, lui, s'écartait des bords : les deux ne suivaient plus la même
règle. À partir de 1790 px l'écart apparaissait, et il grandissait sans
limite — 29 px à 1920, 83 px à 2300, 200 px à 2560. Sur un grand écran, le
mot-symbole et le bouton sortaient visiblement de la colonne de la page.
Ne remettez pas cette ligne. */
.site-header__inner{
position: relative;
padding-left: var(--margin-x);
display: flex;
align-items: center;
justify-content: space-between;
/* 32 px et non 48 : depuis que le mot-symbole a doublé de taille et gagné un
slogan, la barre n'a plus 48 px à donner entre chaque élément. */
gap: var(--space-6);
height: var(--header-h);
}
/* Logo « PCC » — sans point, jamais. */
/* Le mot-symbole. L'interlettrage était LÉGÈREMENT POSITIF quand le nom
s'écrivait « PCC » : trois capitales ont besoin d'air pour ne pas se coller.
« Chapitre » fait huit lettres en bas-de-casse, en gras : il lui faut
l'inverse, un resserrement, pour se lire comme un bloc et non comme un mot
étiré. Si vous changez encore de nom, c'est la ligne à réajuster. */
/* Le mot-symbole. C'est la TROISIÈME et dernière chose à porter le rouge
d'identité, et la plus légitime : les portraits pour les personnes, les
boutons pour l'action, le nom pour l'identité.
L'objection qu'on avait sur les boutons blancs — « le rouge en petits
caractères fatigue l'œil » — ne vaut pas ici : à 36 px et en gras, ce
n'est plus du texte, c'est un aplat.
Pour revenir au noir : remettez var(--ink) à la place de var(--accent). */
/* TOUT EN CAPITALES. Le texte du HTML reste « Chapitre » : ce sont les
capitales du CSS qui l'affichent ainsi, donc un lecteur d'écran continue
d'épeler un mot et non neuf lettres.
L'interlettrage était à -0.02em pour des bas-de-casse. Neuf capitales en
grasses se collent moins : -0.01em suffit. */
/* Aucune graisse n'est déclarée ici : le mot-symbole est en Bebas Neue, qui
n'en a qu'une. Sa force vient de sa hauteur, pas de l'épaisseur du trait.
L'interlettrage descend à -0.045em : c'est ce qui fait qu'un mot-symbole se
lit comme un bloc plein et non comme huit lettres alignées. À cette graisse
et à cette taille, les capitales supportent d'être très serrées. */
/* Le mot-symbole vit DANS LA MARGE, hors du flux de la barre : de 28 px du bord
jusqu'à la ligne où commence le texte du site. Comme il ne prend aucune place
dans la rangée, le slogan démarre pile sur cette ligne — c'est garanti par la
construction, pas par un calcul de largeur.
La taille est en vw pour suivre la marge, elle aussi en vw.
⚠️ SEUL RÉGLAGE À TOUCHER : le 2vw ci-dessous. S'il déborde sur le slogan,
baissez-le ; s'il flotte dans sa marge, montez-le. Rien d'autre à changer.
Bebas est très étroite : à taille égale elle occupe environ moitié moins de
largeur qu'une grotesque normale. C'est pour ça que la valeur est passée de
2vw à 3.4vw — les lettres sont beaucoup plus hautes SANS être plus larges.
Une fois le site en ligne, regardez : si CHAPITRE touche le slogan, baissez ;
s'il flotte dans sa marge, montez. */
.site-header .brand{
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
}
/* 29 septembre : le mot-symbole passe de « CHAPITRE » en Bebas Neue (police
étroite, capitales) à « Chapitre » en Source Serif 4, la serif des textes
longs, en graisse 500. Le serif est environ deux fois plus large que Bebas à
corps égal : la taille redescend de clamp(30px, 3.4vw, 68px) à
clamp(24px, 2vw, 38px). Le mot est dans le flux de la barre (voir « LA BARRE
DU HAUT, SYMÉTRIQUE ») : il ne peut pas heurter « Agence de conférenciers ».
Léger resserrement (-0.015em) pour qu'il se lise comme un bloc. */
/* Le logo est un dessin (voir « LE LOGO DESSINÉ » en fin de fichier) : il
n'a plus de police, seulement une couleur. */
.brand{ color: var(--ink); }
/* Le bloc de gauche : le nom, puis le slogan à sa droite. */
.brand-bloc{
display: flex;
align-items: center;
/* Cet écart ne sert QUE sous 1025 px. Au-dessus, le mot-symbole est en
position absolue — il sort du flux, et un écart entre éléments n'a plus
personne à écarter : c'est la largeur de sa case qui fait le blanc, et
c'est elle qui garantit que le texte tombe pile sur la marge. */
gap: var(--space-4);
/* Il ne rétrécit pas. Sans cette ligne, la barre en flex comprime le bloc
pendant que le slogan, lui, garde ses 250 px : le texte sortait de sa
boîte et venait se poser SOUS le premier lien du menu. */
flex: 0 0 auto;
}
/* Le slogan dit ce que fait la maison — pas ce qu'elle promet. C'est le rôle
d'une ligne de barre : quelqu'un qui arrive par une page profil doit
comprendre en une seconde chez qui il est tombé.
En serif, comme les sous-titres de section : même voix, même fonction.
La largeur bornée le force sur deux lignes plutôt que de l'étirer et de
repousser la navigation. */
/* Le bloc de texte à droite du mot-symbole. Il ne contient plus qu'une ligne
depuis que la baseline est partie : il prend donc la largeur de cette
ligne, ni plus ni moins. C'était une largeur FIXE de 340 px, taillée pour un
titre plus une phrase sur deux lignes ; elle n'a plus lieu d'être. */
.brand-texte{
flex: 0 0 auto;
min-width: 0;
}
/* Le titre du bloc : en sans et en noir, comme un nom de maison. */
/* Une LÉGENDE du mot-symbole, pas un second titre. C'était 23 px en demi-gras
et en noir d'encre : à côté de CHAPITRE, ça faisait deux titres qui se
disputaient la barre, et la ligne paraissait flotter à mi-hauteur sans se
rattacher à rien. En 15 px, en graisse normale et en gris, elle redevient ce
qu'elle est : la mention de métier posée sous le nom de la maison.
C'est le même traitement que sur téléphone, à deux points de corps près. */
.brand-titre{
margin: 0;
font-size: var(--fs-sm);
font-weight: 400;
letter-spacing: var(--ls-none);
line-height: var(--lh-snug);
color: var(--ink-secondary);
}
/* LA BASELINE A QUITTÉ LA BARRE DU HAUT.
C'est elle qui obligeait le bloc de marque à tenir sur deux lignes, et donc
la barre à faire 88 px. Une barre du haut n'a pas à porter une promesse : elle
porte le nom de la maison, son métier, et les chemins. La phrase reste
lisible en pied de page et sur la page À propos.
Le paragraphe est laissé dans le HTML des trente pages : le masquer d'une
ligne ici se défait d'une ligne. Pour la remettre, supprimez ce bloc. */
.brand-slogan{ display: none; }
/* Sous 1600 px, la barre ne tient plus sur une ligne : le bloc de texte part le
premier, avant le numéro de téléphone (qui part à 1180).
⚠️ LE SEUIL ÉTAIT À 1440 px, et c'était un bug.
Le bloc de texte occupe une largeur FIXE de 340 px. Mesuré dans le
navigateur : la barre n'a la place de l'accueillir qu'à partir de 1580 px.
Entre 1441 et 1578 px il réapparaissait donc alors qu'il ne rentrait pas,
et tout le reste était poussé vers la droite : le bouton « Prendre
rendez-vous » sortait de la colonne de la page — jusqu'à 87 px à 1460 px,
au point de presque toucher le bord de la fenêtre.
1600 px laisse 20 px de sécurité. Contrepartie assumée : de 1440 à 1600 px
(beaucoup de portables) le slogan ne s'affiche plus dans la barre. Il reste
lisible en pied de page et sur la page À propos.
Si vous RACCOURCISSEZ le slogan un jour, vous pourrez redescendre ce seuil —
remesurez avant.
⚠️ CE QUI RESTE DE CE SEUIL, MAINTENANT QUE LA BASELINE EST PARTIE.
Le bloc de texte ne fait plus 340 px mais la largeur d'une seule ligne : la
place ne manque plus. Ce qui manque, c'est la GARANTIE de ne pas heurter le
mot-symbole. Au-dessus de 1601 px, celui-ci est calé par sa droite (règle
suivante) et le blanc est un réglage. En dessous, il est calé par sa gauche à
28 px et sa largeur dépend de Bebas Neue, qui change avec la fenêtre : rien
n'empêcherait « CHAPITRE » de venir buter dans « Agence de conférenciers ».
La ligne est donc masquée entre 1025 et 1600 px — et seulement là. Sous
1025 px, le mot-symbole revient dans le flux : les deux ne peuvent plus se
chevaucher, et la ligne réapparaît (voir le bloc « max-width: 1024px »). */
@media (min-width: 1025px) and (max-width: 1600px){
.brand-texte{ display: none; }
}
/* Le mot-symbole est calé par sa DROITE dès que le bloc de textes est affiché.
C'est la seule construction qui GARANTIT le blanc entre les deux.
Pourquoi : le mot-symbole était calé par sa gauche, à 28 px du bord, et le
blanc qui le séparait du slogan n'était donc pas réglé — c'était ce qui
RESTAIT une fois le mot écrit. Ce reste dépend de la largeur exacte que
Bebas Neue donne à « CHAPITRE », qui change avec la taille de la fenêtre :
mesuré à 30 px sur un écran de 1850, il tombait à 14 px au-delà de 2000,
parce que la marge cesse de grandir (240 px maximum) alors que le
mot-symbole, lui, continue jusqu'à 68 px. Les deux se rejoignaient.
En le calant par la droite, le blanc devient un RÉGLAGE et non un reste :
32 px, le même écart qu'entre tous les autres éléments de la barre, à
toutes les largeurs. Le mot-symbole flotte alors plus ou moins loin du bord
gauche — c'est sans importance, il est dans la marge.
Uniquement au-dessus de 1600 px : en dessous, le bloc de textes est masqué,
il n'y a plus rien à heurter, et la marge devient trop étroite pour caler
par la droite. On reprend donc le calage à gauche, à 28 px. */
@media (min-width: 1601px){
.site-header .brand{
left: auto;
right: calc(100% - var(--margin-x) + var(--space-6));
}
}
/* Sous 1024 px la marge retombe à 32 px : il n'y a plus de marge où loger le
mot-symbole. Il revient donc dans le flux, en tête de barre, taille fixe.
⚠️ IL Y AVAIT ICI « padding-left: var(--space-5) », soit 24 px, et c'était un
bug : à ces largeurs la marge du site vaut 32 px. Le mot-symbole commençait
donc 8 px à gauche du contenu de la page. La ligne est retirée — la barre
reprend la marge du site, comme partout ailleurs. */
@media (max-width: 1024px){
.site-header .brand{ position: static; transform: none; }
/* ---- Ce qu'est Chapitre, dit dans la barre ------------------------------
Un visiteur qui arrive sur un portrait ne pouvait pas savoir qu'il est chez
une agence de conférenciers : la barre ne montrait que le mot-symbole et le
hamburger. La ligne se pose À CÔTÉ du mot-symbole, sur la même ligne, et
l'écart entre les deux est celui de « .brand-bloc ».
Ici — et seulement ici — le chevauchement est impossible par construction :
le mot-symbole est revenu dans le flux, c'est la rangée en flex qui range
les deux, pas un calcul de largeur.
C'est le texte QUI EXISTE DÉJÀ dans le HTML (« .brand-titre »).
JAMAIS DEUX LIGNES : « white-space: nowrap » l'interdit. Deux lignes
feraient grandir la barre. Si vous rallongez ce texte un jour et qu'il ne
rentre plus, baissez le corps ici plutôt que de retirer le « nowrap ». */
.brand-texte{
display: block;
flex: 0 0 auto;
width: auto;
}
.brand-titre{
font-size: var(--fs-meta);
font-weight: 500;
letter-spacing: var(--ls-none);
line-height: var(--lh-snug);
color: var(--ink-secondary);
white-space: nowrap;
}
}
/* Le menu est accroché au BLOC DE MARQUE, pas poussé vers la droite.
Il était calé à droite (`margin-left: auto`) et se retrouvait ni centré ni
aligné : à 2000 px il flottait à 305 px du slogan, décentré de 106 px par
rapport à la barre — et le blanc qui le séparait du téléphone (80 px) était
plus grand que celui qui séparait le menu du bouton. Rien ne se groupait, et
les quatre liens paraissaient posés au hasard.
Il est maintenant CENTRÉ DANS L'ESPACE LIBRE, entre le slogan et le numéro
de téléphone. Deux marges automatiques, une de chaque côté : le blanc
disponible se partage exactement en deux, donc le menu tombe pile au milieu
de ce qui reste, à toutes les largeurs et sans qu'aucun nombre soit à régler.
⚠️ Ce n'est PAS un menu centré dans la barre. Ça, c'est autre chose, et je
l'ai écarté après mesure : entre 1441 et 1490 px, un menu centré sur la barre
vient toucher le numéro de téléphone (0 px de blanc à 1445 px), parce que les
deux blocs qui l'encadrent n'ont pas la même largeur. Centré dans l'espace
libre, le problème ne peut pas se poser : quand l'espace se réduit, les deux
marges se réduisent ensemble et il reste toujours l'écart de la barre.
Le téléphone n'a donc plus de marge automatique : il forme une paire serrée
avec le bouton, à 32 px, et cette paire reste calée à droite. */
.site-nav{
display: flex;
align-items: center;
/* 32 px et non 48 entre les liens : ça rend 48 px à la barre, juste assez
pour que le bloc de marque tienne aussi sur un écran de portable (1440). */
gap: var(--space-6);
margin-left: auto;
margin-right: auto;
}
/* Les libellés ne se coupent jamais en deux lignes : « À propos » sur deux
étages dans une barre de navigation, ça se voit tout de suite.
⚠️ LE MENU EST EN GRIS, ET LA PAGE COURANTE EN NOIR. IL Y AVAIT AVANT un
trait sous la page courante, qui se deployait aussi au survol. Un trait est
un signal de lien, pas de position : il ornait la barre sans dire grand-chose.
Le gris fait le travail tout seul — c'est la grammaire de l'index des noms
sur la page Conferenciers (liste grise, nom actif en couleur), reprise ici.
Meme graisse pour tous : un gras sur la page courante aurait elargi le mot de
3 px et decale le menu, qui est centre, de 2 px d'une page a l'autre.
Sur l'accueil et les fiches, aucune page n'est courante : le menu est
entierement gris, et c'est normal, ces pages ne sont pas dans le menu. */
.site-nav a{
white-space: nowrap;
padding-block: var(--space-1);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-secondary);
transition: color var(--t-fast) var(--ease);
}
.site-nav a:hover{ color: var(--ink); }
/* Page courante : en noir, sans rien d'autre. */
.site-nav a[aria-current="page"]{ color: var(--ink); }
/* Bouton hamburger — visible seulement sous 1024px (voir partie 6). */
/* ⚠️ CE BOUTON NE FAISAIT QUE 40 × 18 px DE ZONE TACTILE.
Les trois barres semblent occuper 16 px de haut, mais les deux barres
extérieures sont dessinées en position absolue : elles n'ajoutent AUCUNE
hauteur au bouton. Il ne restait donc que la barre du milieu (2 px) et son
rembourrage. C'était la plus petite cible de la page — et c'est le menu
principal du site sur téléphone.
Une case de 44 × 44 px, avec le dessin centré dedans : rien ne change à
l'œil, tout change au doigt.
La marge négative vaut désormais -10 px et non -8 : c'est ce qui reste de
chaque côté des 24 px de barres dans une case de 44. Elle sert à ce que les
BARRES tombent pile sur la marge du site, et non le bord de la case. */
.nav-toggle{
display: none;
appearance: none;
border: 0;
background: transparent;
color: var(--ink);
padding: 0;
width: 44px;
height: 44px;
place-items: center;
margin-right: -10px;
cursor: pointer;
}
.nav-toggle__bars{
display: block;
position: relative;
width: 24px;
height: 2px;
background: var(--ink);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: var(--ink);
}
.nav-toggle__bars::before{ top: -7px; }
.nav-toggle__bars::after{ top: 7px; }
/* Menu mobile plein écran, fond blanc, liens empilés en grand. */
/* Le panneau couvre TOUT l'écran, bandeau compris (inset: 0 et non
inset: var(--header-h)). Avant, la bande du haut laissait voir la page —
sur l'accueil, la vidéo continuait de jouer derrière le menu.
Le bandeau reste AU-DESSUS du panneau (z-index 50 contre 49) : le
mot-symbole et la croix de fermeture restent donc visibles et cliquables.
C'est pour cela que le rembourrage du haut ajoute la hauteur du bandeau —
sans quoi la première entrée passerait dessous. */
.mobile-menu{
position: fixed;
inset: 0;
z-index: 49;
background: var(--bg);
/* En haut : la hauteur du bandeau, puis 32 px et non 64. Le bandeau reste
visible par-dessus le panneau et il porte déjà « CHAPITRE » ET la ligne
« Agence de conférenciers » : c'est donc lui, et non le panneau, qui dit
ce qu'est la maison. Il ne restait qu'à retirer le vide — il était de
79 px entre cette ligne et la première entrée, il en fait 47.
En bas : 32 px aussi. À 64, sur un téléphone court (360 × 740), le contenu
dépassait de 24 px et faisait apparaître une barre de défilement pour du
vide. */
/* 8 px sous le bandeau et non 32 : la liste commence tout de suite, et
c'est le premier filet qui fait la respiration. */
padding: calc(var(--header-h) + 8px) var(--margin-x) var(--space-6);
/* Une colonne : la navigation en haut, l'action et la voix au milieu, le
contact pousse tout en bas (« margin-top: auto » sur « .menu-tel »). Le
panneau a un haut, un milieu et un bas — avant, c'etait une liste qui
s'arretait a 80 % de l'ecran et laissait 169 px de vide en dessous. */
display: flex;
flex-direction: column;
overflow-y: auto;
/* Fondu du panneau. Les entrées, elles, arrivent en cascade juste après :
voir plus bas. */
opacity: 0;
transition: opacity 160ms var(--ease);
}
.mobile-menu.is-ouvert{ opacity: 1; }
/* ⚠️ SUR L'ACCUEIL, LE BANDEAU EST TRANSPARENT ET SES ENCRES SONT BLANCHES.
Panneau blanc plein écran + mot-symbole blanc + croix blanche = plus rien de
visible en haut de l'écran. Tant que le menu s'arrêtait sous le bandeau, la
vidéo servait de fond et le blanc tenait ; en plein écran, il faut rendre au
bandeau son fond et ses encres sombres. C'est le JavaScript qui pose
« menu-ouvert » sur le body. */
body.menu-ouvert .site-header{
background: var(--bg);
border-bottom-color: transparent;
}
body.menu-ouvert .site-header .brand{ color: var(--ink); }
/* ⚠️ ET LA LIGNE DE MÉTIER AVEC LUI. Sur la page d'accueil, le bandeau est posé
sur la vidéo : « Agence de conférenciers » y est en blanc atténué. À
l'ouverture du menu, le bandeau passe au blanc et le mot-symbole repasse au
noir — mais cette ligne-ci restait blanche, donc blanche sur blanc. Elle ne
disparaissait pas : elle devenait invisible.
Trois classes dans le sélecteur contre deux dans « .site-header--sur-video
.brand-titre » : celui-ci l'emporte, quel que soit l'ordre d'écriture. */
body.menu-ouvert .site-header .brand-titre{ color: var(--ink-secondary); }
body.menu-ouvert .nav-toggle__bars,
body.menu-ouvert .nav-toggle__bars::before,
body.menu-ouvert .nav-toggle__bars::after{ background: var(--ink); }
/* La navigation est le premier objet du menu : elle doit peser plus que tout
le reste. 30 px contre 22 avant — les quatre entrées ne se distinguaient
pas des liens de contact, qui étaient au même corps.
L'écart passe de 32 à 24 px : à 30 px de corps, 32 px les faisaient flotter.
Le filet du bas sépare ce groupe du bloc de contact : deux ensembles, deux
fonctions, et l'œil doit le voir avant de lire. */
/* ⚠️ LE MENU A ETE REDESSINE : UNE LISTE FINE, plus une affiche.
Il y avait quatre mots enormes (34 a 44 px, gras), un bouton, une phrase en
serif qui flottait, un grand vide, et le telephone tout en bas : quatre
objets de nature differente empiles sans lien. Un menu n'est pas une page,
c'est un outil ; il doit s'effacer devant ce qu'il ouvre.
Maintenant : quatre entrees a 24 px en graisse moyenne, un filet entre
chacune, une petite fleche a droite — le dessin des menus de telephone les
plus propres, et le meme geste « voici une liste » que la FAQ et les
formats. La phrase en serif est masquee (elle reste dans le HTML des 29
pages, voir « .mobile-menu__voix »). */
.mobile-menu ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.mobile-menu ul li{ border-bottom: 1px solid var(--hairline); }
.mobile-menu > .btn{ margin-top: var(--space-7); }
/* LES ENTREES SONT DES TITRES, pas des liens : 41 px a 390 de large (34 a 320,
44 au plus), graisse 600 — la taille et la graisse des grands titres du site
sur telephone. Quatre mots qu'on lit en une seconde. « nowrap » : une entree
sur deux lignes casserait l'affiche ; le plafond de 44 px et le plancher de
34 sont regles pour que « Conferenciers » tienne de 320 a 640 px de large. */
.mobile-menu ul a{
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--ink);
}
/* Telephones courts (640 px de haut) : les entrees se resserrent d'un cran,
sinon le menu depassait de 18 px et faisait defiler pour rien. */
@media (max-height: 700px){
.mobile-menu ul a{ padding: 13px 0; }
}
/* La fleche : discrete, elle dit « ceci mene quelque part » sans peser. */
.mobile-menu ul a::after{
content: "→";
font-weight: 400;
color: var(--ink-tertiary);
}
/* LA VOIX. La promesse de l'agence, en serif, sous l'action — la meme phrase
que sous « Nos conferenciers » sur l'accueil. C'est ce qui fait du menu une
page de Chapitre et non un tiroir de reglages. */
.mobile-menu__voix{
/* Le paragraphe a ete RETIRE du HTML des 29 pages (menage du 9 septembre).
La regle reste, au cas ou il revienne : retirer alors cette ligne. */
display: none;
margin: var(--space-7) 0 0;
max-width: 28ch;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* LE CONTACT EST UN COLOPHON : au bas de l'ecran, numero en noir, horaires en
gris de lecture. Avant, le numero et le SMS etaient gris (ils se lisaient
comme des liens inactifs) et les horaires au gris « desactive » de la
palette, celui que le fichier reserve aux champs de formulaire. */
.mobile-menu .menu-tel{
margin-top: auto;
/* Plus de filet ni de rembourrage au-dessus du contact : les filets sont
ceux de la liste, et le blanc suffit a separer. */
padding-top: 0;
border-top: 0;
}
/* Trois classes dans le selecteur : les regles generales de « .menu-tel »,
plus bas, en ont deux, et elles gagneraient sinon. */
.mobile-menu .menu-tel .tel-bloc{ color: var(--ink); font-size: var(--fs-body); }
.mobile-menu .menu-tel .tel-heures{
margin-top: var(--space-3);
max-width: 30ch;
font-size: var(--fs-sm);
color: var(--ink-secondary);
}
/* Telephones courts (iPhone SE, 667 px de haut ; et 740) : les respirations
se resserrent d'un cran pour que le colophon reste au-dessus du bord. */
@media (max-height: 760px){
.mobile-menu{ padding-top: calc(var(--header-h) + var(--space-5)); }
.mobile-menu ul{ padding-bottom: var(--space-5); }
.mobile-menu > .btn{ margin-top: var(--space-5); }
.mobile-menu__voix{ margin-top: var(--space-5); }
}
/* En dessous de 700 px de haut (iPhone SE : 667), meme resserre, le colophon
depassait de 12 px. La voix est l'element facultatif du panneau : c'est elle
qui s'efface, pas le contact. */
@media (max-height: 700px){
.mobile-menu__voix{ display: none; }
}
/* IL Y AVAIT ICI UN REPERE DE PAGE EN COURS : l'entree de la page ou l'on se
trouve passait en bordeaux et en 600, avec un trait dans la marge. Retire :
dans un menu on choisit ou aller, ou l'on est, la page le montre deja — et
le bordeaux, sur ce site, ne dit qu'une chose : les personnes et l'action.
Un lecteur exterieur l'avait lu comme un clic. Sur ordinateur, le
soulignement de la barre garde ce role, il ne concurrence rien.
(Le script continue de poser « aria-current » : les lecteurs d'ecran
l'annoncent, c'est utile ; seul l'affichage est retire.) */
/* ---- La cascade d'ouverture ------------------------------------------------
Le panneau se fond, puis les entrées montent d'un cran les unes après les
autres, 30 ms d'écart. Six éléments : la dernière part donc à 150 ms et
finit à 270 ms. C'est un peu plus que les 200 ms visées — on ne peut pas
décaler six choses de 30 ms ET garder un fondu lisible en 200 ms. Pour
descendre à 200 : passez l'écart à 20 ms ci-dessous. */
.mobile-menu ul li,
.mobile-menu > .btn,
.mobile-menu .mobile-menu__voix,
.mobile-menu .menu-tel{
opacity: 0;
/* 10 px et non 6 : à 6 px le mouvement existait mais ne se voyait pas.
C'est le déplacement, plus que le fondu, qui fait lire la cascade. */
transform: translateY(10px);
transition: opacity 110ms var(--ease), transform 110ms var(--ease);
}
.mobile-menu.is-ouvert ul li,
.mobile-menu.is-ouvert > .btn,
.mobile-menu.is-ouvert .mobile-menu__voix,
.mobile-menu.is-ouvert .menu-tel{
opacity: 1;
transform: none;
}
/* 25 ms d'écart, et seules les ENTRÉES de navigation défilent : le bouton et
le bloc de contact arrivent avec la dernière. La cascade sert à faire lire
la navigation, pas à faire durer l'ouverture.
La dernière part à 100 ms et finit à 210 ms : c'est bien la durée totale
demandée. Avec six éléments décalés de 30 ms, on tombait à 268 ms. */
.mobile-menu ul li:nth-child(1){ transition-delay: 0ms; }
.mobile-menu ul li:nth-child(2){ transition-delay: 25ms; }
.mobile-menu ul li:nth-child(3){ transition-delay: 50ms; }
.mobile-menu ul li:nth-child(4){ transition-delay: 75ms; }
.mobile-menu ul li:nth-child(5){ transition-delay: 100ms; }
.mobile-menu > .btn{ transition-delay: 100ms; }
.mobile-menu .menu-tel{ transition-delay: 100ms; }
.mobile-menu .mobile-menu__voix{ transition-delay: 100ms; }
/* Système réglé sur « moins d'animations » : tout est là d'emblée.
La règle générale du site ne suffit pas ici — elle raccourcit les
transitions, elle ne remet pas une opacité à 1. */
@media (prefers-reduced-motion: reduce){
.mobile-menu,
.mobile-menu ul li,
.mobile-menu > .btn,
.mobile-menu .mobile-menu__voix,
.mobile-menu .menu-tel{
opacity: 1;
transform: none;
transition: none;
transition-delay: 0s;
}
}
/* ---- La croix de fermeture -------------------------------------------------
Le bouton ne changeait pas de dessin : ouvert ou fermé, trois barres. On ne
savait pas si on allait ouvrir ou refermer.
Les deux barres extérieures pivotent en croix, celle du milieu s'efface.
Le sélecteur porte trois classes/attributs : il l'emporte donc sur la règle
« menu-ouvert » juste au-dessus, qui redonne du noir aux trois barres. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
transition: transform 160ms var(--ease), top 160ms var(--ease),
background 120ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{
top: 0; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{
top: 0; transform: rotate(-45deg);
}
/* ---- 4.1bis Le numéro de téléphone ----------------------------------------
Un lien, jamais un bouton : deux boutons côte à côte se disputeraient l'œil,
et c'est « Prendre rendez-vous » qui doit gagner.
Sur ordinateur, un lien tel: n'ouvre pas grand-chose d'utile — mais le
numéro reste lisible et se recopie. Sur téléphone, il appelle. */
/* Le téléphone n'a AUCUNE marge propre : ce sont les deux marges automatiques
du menu qui se partagent le blanc, et le téléphone se contente de l'écart de
32 px de la barre. Il avait une marge fixe de 48 px qui s'ajoutait à ces
32 px et fabriquait un blanc de 80 px — une somme qui n'est sur aucun cran de
l'échelle, et qui détachait le téléphone du menu plus que du bouton. */
.tel-lien{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--ink);
white-space: nowrap; /* un numéro ne se coupe jamais en deux lignes */
}
.tel-lien svg{ display: block; opacity: .7; }
.tel-lien:hover{ text-decoration: underline; text-underline-offset: 4px; }
/* Sur la vidéo de l'accueil, le header est transparent : le numéro passe en
blanc comme le reste. */
.site-header--sur-video .tel-lien{ color: #fff; }
/* Le menu mobile et la page rendez-vous : des lignes cliquables larges, faites
pour le pouce (48 px de haut, la taille de cible recommandée). */
.menu-tel{ margin-top: var(--space-8); }
.tel-bloc{
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 48px;
padding: 0 var(--space-6);
border: 1px solid var(--hairline);
font-size: var(--fs-body);
font-weight: 500;
color: var(--ink);
}
.tel-bloc:hover{ border-color: var(--ink); }
/* ⚠️ DANS LE MENU, LE TÉLÉPHONE ET LE SMS SONT DES LIENS, PAS DES CADRES.
Le bas du menu portait trois habillages différents pour trois actions :
un bouton noir plein, deux cadres blancs, et une ligne de texte. Trois
traitements, aucune hiérarchie lisible.
Un seul bouton plein — « Prendre rendez-vous » —, et en dessous deux liens
soulignés. Ils gardent 44 px de haut : c'est la cible du doigt, même sans
cadre autour.
Bénéfice mesuré : le bloc perd 40 px, et la ligne « Nous répondons… »
cesse de sortir de l'écran sur un téléphone court.
(Hors du menu, sur la page Prendre rendez-vous, les cadres restent.) */
.menu-tel{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.menu-tel .tel-bloc{
display: inline-flex;
justify-content: flex-start;
/* 44 px de haut restent la cible du doigt, même sans cadre ni soulignement :
la zone cliquable ne se voit pas, elle se touche. */
min-height: 44px;
padding: 0;
border: 0;
margin-bottom: 0;
/* 15 px et gris : ces deux liens étaient à 30 px comme la navigation et
soulignés par-dessus le marché. Ils lui disputaient l'œil alors qu'ils
viennent après elle. */
font-size: var(--fs-sm);
color: var(--ink-secondary);
text-decoration: none;
}
.menu-tel .tel-bloc:hover{ text-decoration: underline; text-underline-offset: 4px; }
.menu-tel .tel-bloc svg{ opacity: .55; }
/* Un cran plus bas encore : c'est une précision, pas une action. */
.menu-tel .tel-heures{
font-size: var(--fs-meta);
color: var(--ink-tertiary);
}
/* Un lien SMS n'a de sens que sur un appareil qui envoie des SMS.
Les deux sélecteurs sont écrits ici, et APRÈS « .menu-tel .tel-bloc » :
sinon la règle du dessus, plus précise, l'emporterait et le lien SMS
s'afficherait aussi sur ordinateur. */
.tel-bloc--sms,
.menu-tel .tel-bloc--sms{ display: none; }
@media (max-width: 1024px){
.tel-bloc--sms{ display: inline-flex; }
.menu-tel .tel-bloc--sms{ display: flex; }
}
/* Le numéro disparaît de la barre sous 1600 px. C'était 1180, avant que le
mot-symbole ne passe à 56 px et gagne un bloc de deux textes : à 1440 px —
la largeur d'un portable — il ne restait plus de place pour lui.
C'est le bon sacrifice : le numéro reste dans le menu déroulant, en pied de
page, et sur la page « Prendre rendez-vous ». Le mot-symbole, lui, ne se
trouve nulle part ailleurs. */
/* Seuil ramené de 1599 à 1440 px. Le numéro de téléphone est la
première chose qu'on retire quand la barre se resserre. */
@media (max-width: 1440px){
.tel-lien{ display: none; }
}
.tel-heures{
margin: var(--space-4) 0 0;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--ink-secondary);
}
/* Le bloc « ou appelez-nous », sur la page Prendre rendez-vous. */
.appel{
margin-top: var(--space-8);
padding-top: var(--space-8);
border-top: 1px solid var(--hairline);
}
.appel__intro{ margin: 0 0 var(--space-5); font-size: var(--fs-body); color: var(--ink-secondary); }
.appel__actions{ display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* Le numéro du pied de page. */
.site-footer__tel{ margin: var(--space-5) 0 0; font-size: var(--fs-sm); }
.site-footer__tel a{ color: inherit; font-weight: 500; }
.site-footer__tel a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.site-footer__tel span{ margin-left: var(--space-2); color: var(--ink-secondary); font-size: var(--fs-sm); }
/* ---- 4.2 Bouton primaire --------------------------------------------------
Fond noir, texte blanc, flèche. C'est le seul bouton « plein » du site.
Au survol il s'inverse (fond blanc, texte noir, contour noir). */
.btn{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bg);
font-family: inherit;
font-size: var(--fs-meta);
font-weight: 600;
line-height: var(--lh-snug);
white-space: nowrap;
cursor: pointer;
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.btn:hover{ background: transparent; color: var(--ink); }
/* La flèche avance légèrement au survol — c'est notre signal d'interaction. */
/* Les boutons n'ont plus de flèche. Un rectangle plein, avec un libellé qui
commence par un verbe, est déjà on ne peut plus cliquable — la flèche n'y
ajoutait rien et le site en comptait 94, contre 47 pour tout le reste.
Les deux règles qui l'animaient au survol ont donc disparu.
Là où la flèche reste — les titres cliquables, le lien « Voir le profil » —
elle est le SEUL signe qu'on peut cliquer. C'est ce qui fait la différence. */
.btn--block{ width: 100%; justify-content: center; }
/* ---- 4.3 Lien texte fléché ------------------------------------------------
« Voir le profil → ». Souligné fin qui apparaît au survol, flèche qui avance.
Jamais encadré. */
.link-arrow{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-1);
border-bottom: 1px solid transparent;
font-size: var(--fs-meta);
font-weight: 600;
transition: border-color var(--t-fast) var(--ease);
}
.link-arrow:hover{ border-color: var(--ink); }
/* Variante discrète (gris) pour les liens secondaires. */
.link-arrow--quiet{
font-weight: 400;
color: var(--ink-secondary);
}
.link-arrow--quiet:hover{ color: var(--ink); border-color: var(--ink-secondary); }
/* ---- 4.4 Flèche nue -------------------------------------------------------
Glyphe ← ou → seul, sans cadre ni fond. Navigation du carrousel, retour.
Zone de clic de 44px minimum pour le tactile. */
.arrow-bare{
appearance: none;
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
border: 0;
background: transparent;
/* Gris moyen et non noir : au repos, un chevron n'a pas à peser autant
qu'un titre. Il passe au noir au survol — c'est là qu'il devient une
commande. */
color: var(--ink-secondary);
font-family: inherit;
/* Un CHEVRON, pas une flèche. La distinction n'est pas décorative :
la flèche « → » du site veut dire « ceci mène ailleurs » — un titre
cliquable, un lien vers une fiche. Le chevron veut dire « fais glisser
cette rangée ». Deux gestes différents, deux signes différents.
Le chevron n'est plus le CARACTÈRE « ‹ » du texte mais un trait DESSINÉ :
un petit carré dont on ne garde que deux bordures, puis qu'on fait pivoter.
La différence tient en un mot : l'épaisseur. Un caractère tire son trait de
la graisse de la police — 400, et rien entre 400 et 500. Un carré au trait
se règle au dixième de pixel, ici 1,4 px, et reste identique quelle que
soit la police qui charge.
Le glyphe reste écrit dans le HTML : il ne sert plus qu'aux navigateurs
qui n'appliqueraient pas le style, et « font-size: 0 » l'efface ici. Le
nom du bouton, lui, vient de son aria-label, pas de son texte. */
font-size: 0;
line-height: var(--lh-tight);
cursor: pointer;
transition: opacity var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
/* Un chevron inutilisable reste VISIBLE, en gris clair. Il a été masqué un
temps ; on le remet pour deux raisons.
La première est de fond : voir les deux chevrons dès l'arrivée, c'est
comprendre tout de suite qu'il y a deux sens. Un seul chevron laisse croire
à un sens unique.
La seconde est de forme : un bouton qui apparaît en cours de route attire
l'œil au mauvais moment, même quand il ne déplace rien. */
.arrow-bare[disabled]{
/* --ink-disabled (#C4C4C4) et non --ink-tertiary (#A0A0A0) : un cran plus clair.
Ce chevron n'est pas là pour être lu, seulement pour montrer qu'il existe
un deuxième sens. À #A0A0A0 il pesait encore trop face à son voisin actif.
La couleur est écrite en clair plutôt que reprise d'un jeton : --ink-tertiary
sert aussi aux initiales des photos manquantes, qui doivent rester lisibles.
Un bouton désactivé n'est pas soumis aux règles de contraste — c'est la
seule couleur du site dans ce cas. */
color: var(--ink-disabled);
pointer-events: none;
}
/* Le trait lui-même : deux bordures d'un carré, pivotées. « rotate(45deg) »
pointe à droite, « rotate(-135deg) » à gauche.
Le décalage de 1 px recentre optiquement : un carré pivoté n'a pas son poids
visuel au milieu de sa boîte, il penche du côté de la pointe. */
.arrow-bare::before{
content: "";
width: 9px;
height: 9px;
border-top: 1.4px solid currentColor;
border-right: 1.4px solid currentColor;
transform: translateX(-1px) rotate(45deg);
}
.arrow-bare[data-etagere-prec]::before{
transform: translateX(1px) rotate(-135deg);
}
/* ⚠️ Ces deux règles visaient « data-prev » et « data-next », qui n'existent
nulle part dans le HTML — les attributs s'appellent data-etagere-prec et
data-etagere-suiv. Elles n'ont jamais rien fait. */
.arrow-bare:hover{ color: var(--ink); }
.arrow-bare[data-etagere-prec]:hover{ transform: translateX(-3px); }
.arrow-bare[data-etagere-suiv]:hover{ transform: translateX(3px); }
/* ---- 4.5 MediaPlayer — le composant signature ------------------------------
Au repos : vignette en noir et blanc + bouton play + durée discrète.
Au clic : la vidéo passe EN COULEUR, en place, en un fondu de 400ms.
C'est le seul endroit où la couleur apparaît sur le site.
Tant que les vraies vidéos ne sont pas là, la vignette est un placeholder
gris rayé et l'état « en lecture » est un aplat chaud simulé.
Pour brancher une vraie vidéo : ajouter data-vimeo="adresse Vimeo" sur le
bouton (voir js/site.js). */
.player{
appearance: none;
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.player__frame{
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 5;
background: var(--bg-subtle);
overflow: hidden;
}
/* Format paysage, pour la vidéo principale d'une page profil. */
.player--wide .player__frame{ aspect-ratio: 16 / 9; }
/* Vignette au repos : l'image de couverture de la vidéo, en couleur.
Elle est récupérée automatiquement chez Vimeo par le JavaScript ; tant
qu'elle n'est pas arrivée, c'est le placeholder gris rayé qui tient la
place, pour qu'aucun cadre ne reste vide.
Elle est posée PAR-DESSUS le lecteur vidéo (z-index) : c'est ce qui permet
de précharger la vidéo sans jamais montrer son écran de chargement. */
.player__thumb{
position: absolute;
inset: 0;
z-index: 2;
background: var(--bg-subtle);
background-image: repeating-linear-gradient(
135deg,
transparent 0 23px,
rgba(20,20,20,.05) 23px 24px
);
background-size: cover;
background-position: center;
/* Elle s'efface uniquement quand la vidéo a réellement commencé à jouer
(classe .is-ready). Jamais avant : sinon on verrait le blanc du lecteur. */
transition: opacity var(--t-media) ease-out;
}
.player__play{
position: absolute;
z-index: 3; /* au-dessus de la vignette */
top: 50%; left: 50%;
transform: translate(-50%,-50%);
display: grid;
place-items: center;
width: 66px; height: 66px;
border-radius: 50%;
background: var(--ink);
transition: transform var(--t-fast) var(--ease),
opacity var(--t-media) ease-out;
}
.player:hover .player__play{ transform: translate(-50%,-50%) scale(1.07); }
/* Triangle de lecture, dessiné en CSS (pas d'image à charger). */
.player__tri{
width: 0; height: 0;
margin-left: var(--space-1);
border-left: 18px solid var(--bg);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
/* Au clic, le bouton de lecture s'efface tout de suite : c'est l'accusé de
réception du clic. La vignette, elle, reste encore un instant. */
.player.is-playing .player__play{
opacity: 0;
pointer-events: none;
}
/* Durée de l'extrait, dans le coin bas gauche de la vignette.
Elle sert à décider si on clique : trois minutes ou trente secondes, ce
n'est pas le même engagement. C'est la seule information ajoutée sur une
vignette — pas de titre, pas de barre de progression.
Le fond est le même noir voilé que les bandes vidéo du site (8,6,4) : ce
n'est pas une nouvelle couleur, c'est celle des voiles existants. Il est
nécessaire — une vignette peut être claire ou sombre selon la vidéo, du
texte blanc seul n'y serait pas toujours lisible.
Elle s'efface au clic, en même temps que le bouton de lecture. */
.player__duree{
position: absolute;
z-index: 3; /* même plan que le bouton de lecture */
left: 12px;
bottom: 12px;
padding: var(--space-1) var(--space-2);
background: var(--veil-strong);
color: #fff;
font-size: var(--fs-meta);
font-weight: 500;
line-height: var(--lh-tight);
letter-spacing: var(--ls-none);
/* Chiffres de largeur fixe : les durées s'alignent d'une vignette à l'autre. */
font-variant-numeric: tabular-nums;
}
.player.is-playing .player__duree{
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
/* Et elle ne s'efface QUE lorsque la vidéo joue vraiment (.is-ready posée
par le JavaScript). C'est toute l'astuce : on ne découvre jamais un
lecteur en train de charger, donc jamais d'écran blanc. */
.player.is-ready .player__thumb{
opacity: 0;
pointer-events: none;
}
/* Vraie vidéo, insérée par le JavaScript dès que le bloc approche de l'écran.
Les vidéos sont exportées au format 4/5, exactement celui du cadre : elle
se pose donc au pixel près, sans recadrage ni bande noire.
Elle est en dessous de la vignette, et n'attrape les clics qu'une fois
celle-ci effacée. */
.player__embed{
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
}
.player.is-ready .player__embed{ pointer-events: auto; }
/* ---- 4.6bis La collection : les cadres sans vidéo -------------------------
Les rangées des pages Conférenciers et Thématiques gardent le format 4/5.
On a essayé le 9/16, pour réutiliser les vidéos verticales de la home sans
rien exporter de plus : abandonné. Ces vidéos portent un dégradé sombre sur
leur tiers bas, prévu pour recevoir du texte en plein écran sur téléphone ;
réduit à une carte de 330 px sur une page blanche, ce dégradé devient une
tache. Ces pages attendent donc leur propre export, en 4/5.
Ce qui RESTE de cet essai, et qui n'a rien à voir avec le format :
1. Une rangée sans vidéo affiche le portrait du conférencier au lieu d'un
rectangle gris rayé — les huit portraits sont déjà déposés et servent
déjà à trois autres endroits du site.
2. Elle n'affiche plus de bouton de lecture. Avant, sept rangées sur huit
montraient une pastille de lecture qui ne faisait rien. */
.roster .player:not([data-vimeo]) .player__play{ display: none; }
/* Le portrait de la page Conférenciers. Ce n'est plus un lecteur : cette page
présente les visages, les vidéos sont sur les fiches. Même cadre 4/5 et même
largeur de colonne qu'avant, pour que rien ne bouge dans la mise en page. */
.portrait{
display: grid;
place-items: center;
/* .speaker__media est une boîte flex : sans cette largeur, un élément vide
de contenu mesurerait 0 et le portrait n'apparaîtrait pas du tout. */
width: 100%;
aspect-ratio: 4 / 5;
background: var(--bg-subtle) center/cover no-repeat;
overflow: hidden;
}
/* ---- 4.6 Entrée conférencier ----------------------------------------------
Le bloc cœur du site : la question-manifeste domine, la vidéo accompagne.
Utilisé par la collection, le carrousel de l'accueil et les pages thématiques. */
.speaker{
display: grid;
/* Les colonnes sont taillées sur les contenus eux-mêmes — la vidéo d'un
côté, la largeur de lecture de l'autre — et l'ensemble est centré dans la
page.
Auparavant : « 1fr 1fr », soit deux moitiés égales dans lesquelles la
vidéo (440px) et le texte (544px) flottaient chacun de leur côté. Le
blanc restant s'ajoutait à l'écart entre les deux, et pas de la même
façon selon le sens de la rangée : 264px sur une rangée normale, 328px
sur une rangée inversée, et le tout décalé de 64px vers la gauche.
Ici, l'écart qu'on voit est exactement celui qui est écrit. */
grid-template-columns: minmax(0, var(--player-max)) minmax(0, 34rem);
justify-content: center;
gap: clamp(56px, 4.6vw, 112px);
align-items: center;
}
/* Une rangée sur deux est inversée (texte à gauche, vidéo à droite). Les
colonnes s'inversent avec elle : sans ça, la vidéo se retrouverait dans la
colonne taillée pour le texte, et l'écart repartirait de travers. */
.speaker--reverse{ grid-template-columns: minmax(0, 34rem) minmax(0, var(--player-max)); }
.speaker--reverse .speaker__media{ order: 2; }
.speaker__media{ display: flex; }
.speaker__media .player,
.speaker__media .portrait{ max-width: var(--player-max, 440px); }
/* La collection : six rangées séparées par beaucoup d'air, pas par un filet. */
/* En haut, la MOITIÉ de la respiration entre sections — le même blanc que
sous l'index sur la page Sujets. En entier, la page démarrait dans le vide.
En bas, la respiration complète : c'est une vraie fin de section. */
.roster{ padding-block: calc(var(--section-y) / 2) var(--section-y); }
.roster .speaker + .speaker{ margin-top: var(--space-12); }
/* ---------------------------------------------------------------------------
UN CONFERENCIER PAR ECRAN — page Conferenciers seulement
---------------------------------------------------------------------------
Meme geste que sur les Formats et que sur l'encart « Nos conferenciers » de
l'accueil : une idee, un ecran. Ici chaque fiche occupe la hauteur VISIBLE,
c'est-a-dire l'ecran moins les DEUX barres collantes — le bandeau du haut et
la barre des noms. « --index-h » est mesuree par le JavaScript, qui la
recalcule a chaque changement de largeur : c'est la seule facon d'avoir la
bonne hauteur alors que la barre des noms passe de une a trois lignes.
« align-content: center » et non « align-items » : la fiche est deja une
grille de deux colonnes alignees entre elles ; ce qu'on centre ici, c'est la
RANGEE entiere dans la hauteur nouvellement gagnee.
L'ecart de 160 px entre deux fiches disparait : c'est desormais la hauteur
d'ecran qui separe, et l'ajouter par-dessus decalerait chaque fiche un peu
plus que la precedente. Le rembourrage de la collection tombe a zero pour la
meme raison — sinon la premiere fiche ne serait pas au meme endroit que les
huit autres.
Effet secondaire voulu : le nom allume dans la barre change desormais au
MILIEU du blanc qui separe deux fiches, et non au moment ou le texte de la
suivante arrive. Le repere devient franc.
⚠️ A partir de 1025 px seulement. En dessous, la fiche passe sur une seule
colonne et mesure deja de 1 200 a 1 800 px de haut : elle depasse l'ecran, il
n'y a rien a remplir, et l'ecart de 96 px entre fiches doit rester.
--------------------------------------------------------------------------- */
@media (min-width: 1025px){
body:has(.roster) .roster .speaker{
min-height: calc(100vh - var(--header-h) - var(--index-h, 0px));
min-height: calc(100svh - var(--header-h) - var(--index-h, 0px));
align-content: center;
}
body:has(.roster) .roster .speaker + .speaker{ margin-top: 0; }
body:has(.roster) .roster{ padding-block: 0; }
}
/* ---------------------------------------------------------------------------
LE PORTRAIT SUIT AUSSI LA HAUTEUR DE L'ECRAN — page Conferenciers seulement
---------------------------------------------------------------------------
« --player-max » est la largeur d'un cadre video, et elle suivait deja la
LARGEUR de la fenetre : 440 px sur un portable, 560 px sur un tres grand
ecran. Elle ignorait la hauteur. Sur un ecran haut, la fiche gardait donc sa
taille de portable et toute la hauteur gagnee partait en blanc.
« max(25vw, 55vh) » : on prend celle des deux dimensions qui donne le plus,
sans jamais sortir de l'intervalle 440-640 px. Le plancher de 440 garantit
qu'aucun ecran ne recoit un portrait plus petit qu'aujourd'hui ; le plafond
de 640 evite qu'un portrait finisse plus large que la colonne de texte a
cote de lui.
⚠️ A partir de 1600 px de large seulement. En dessous, les deux colonnes
(portrait + texte) remplissent deja toute la largeur disponible : elargir le
portrait ne prendrait pas du blanc, il prendrait du texte. Mesure a
1440 px : les deux colonnes font 1 066 px pour 1 066 px disponibles, il n'y
a pas un pixel de marge.
C'est la MEME variable qui donne sa largeur au filet sous la barre des noms.
Les deux restent donc alignes tout seuls — ne les separez pas.
--------------------------------------------------------------------------- */
@media (min-width: 1600px){
body:has(.roster){
--player-max: clamp(440px, max(25vw, 55vh), 640px);
}
}
.speaker__body{ max-width: 34rem; }
/* Ordre de lecture : le nom, ce qu'il fait, puis qui il est.
La question-manifeste a laissé la place à la bio ; c'est donc le NOM qui
porte désormais l'entrée, et la bio qui l'explique en dessous. */
/* 600, comme tous les autres grands titres du site. */
.speaker__name{
margin: 0;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
}
/* L'enjeu principal, AU-DESSUS du nom, en rouge et en petites capitales.
C'est le même geste que partout ailleurs sur le site : une petite ligne
rouge annonce ce qui suit. Elle relie aussi cette page aux six enjeux —
deux systèmes qui s'ignoraient jusqu'ici.
Ce n'est pas un lien : le nom juste en dessous en est déjà un.
Elle n'apparaît QUE sur la page Conférenciers. Sur une page d'enjeu, redire
l'enjeu de la personne n'apprendrait rien : on y est déjà. */
/* LA THÉMATIQUE AU-DESSUS DU NOM NE S'AFFICHE PLUS. Elle était déjà dite deux
fois sur la même page : dans le sommaire du haut, et par le regroupement des
fiches elles-mêmes. Trois fois, c'est une étiquette qui parle plus fort que
la personne qu'elle classe.
Le texte reste dans le HTML des neuf fiches — le remettre, c'est supprimer
ce bloc et rendre à la règle son ancien contenu. */
.speaker__enjeu{ display: none; }
/* La fonction, sous le nom : en serif, comme sur la rangée de l'accueil.
C'est du texte qui se lit, pas une étiquette. */
.speaker__role{
margin-top: var(--space-2);
/* IL Y AVAIT ICI « font-family: var(--font-serif) ». Voir la note « LES DEUX
POLICES ONT ECHANGE LEUR ROLE » : le serif est parti aux textes longs, et
cette ligne-ci redevient une identification en sans. Elle en avait besoin :
depuis que sa taille suit celle du nom, elle avait exactement la meme
taille que la bio en dessous — meme corps ET meme police, deux paragraphes
qu'on ne distinguait plus. */
/* Suit le nom au-dessus, qui va de 28 a 48 px : voir « --fs-suite ». */
font-size: var(--fs-suite);
line-height: var(--lh-body);
}
/* ---- L'index des neuf noms (page Conférenciers) ---------------------------
Une page de huit écrans doit dire tout de suite combien de monde elle
contient et qui. C'est ce que fait cette liste : un coup d'œil, et on sait.
Chaque nom saute à sa fiche.
Ce n'est PAS un filtre : rien ne se cache, on se déplace. */
/* Pas de respiration en haut : l'intro juste au-dessus en donne déjà 96 px.
Les deux additionnées faisaient 160 px de blanc entre la phrase d'ouverture
et le premier nom.
Il y avait ici une mention « NEUF CONFÉRENCIERS ». Elle a été retirée : elle
annonçait ce que la ligne suivante montre déjà — neuf noms se comptent d'un
coup d'œil — et c'était un chiffre à corriger à la main à chaque arrivée. */
/* ---------------------------------------------------------------------------
LA BARRE DES NEUF NOMS, en haut de la page Conférenciers.
Ce n'est pas une phrase, c'est un OUTIL. Avant, elle se composait comme du
texte courant — 21 px, presque le corps d'un titre — et elle se lisait comme
un paragraphe où l'on aurait mis des liens. Trois choses la font basculer du
côté des commandes : un corps plus petit que le texte de la page, un léger
espacement des lettres (la prose n'en a pas, les menus si), et du gris plutôt
que du noir — le noir est réservé au nom qu'on est en train de lire.
--------------------------------------------------------------------------- */
.index-noms{
/* Elle reste sous le bandeau pendant qu'on parcourt les fiches : la page fait
huit écrans, sans ça il faut remonter tout en haut pour changer de nom. */
position: sticky;
top: var(--header-h);
z-index: 40; /* sous le bandeau (50), au-dessus des fiches */
width: 100%;
background: var(--bg); /* sinon les fiches défilent en transparence */
/* AUCUNE MARGE AU-DESSUS : la barre est collée sous le filet du bandeau, et
les deux ne font qu'un bloc de navigation. Il y avait ici 84 px de blanc,
hérités du temps où un titre de page la précédait — ce titre a disparu, la
barre flottait donc dans le vide.
L'air se joue en deux temps : ce rembourrage au-dessus des noms, et un
rembourrage égal SOUS les noms, posé sur la liste (voir plus bas). Le filet
se retrouve ainsi collé au bas de la barre, et le contenu qui suit repart
sur --section-y sans blanc perdu entre les deux. */
padding-block: var(--space-4) 0;
/* Quand le bandeau s'escamote au défilement, la barre remonte prendre sa
place. Sans ça, un vide de 96 px s'ouvrirait au-dessus d'elle et on verrait
la page défiler dedans. C'est le JavaScript qui pose « entete-cachee » sur
le body.
⚠️ ELLES DOIVENT BOUGER EXACTEMENT ENSEMBLE — mêmes durées, mêmes courbes
que le bandeau, et DANS CHAQUE SENS. Le bandeau ayant deux vitesses (il
part lentement, il revient vite, voir --t-sortie et --t-entree), la barre
en a deux aussi. Les deux jetons sont donc écrits ici tels quels : si vous
changez ceux du bandeau, ceux-ci suivent tout seuls.
Ce qui arrive si on les désaccorde : la barre était restée à 260 ms dans
les deux sens pendant que le bandeau passait à 480 ms pour partir. Mesuré :
en descendant, la barre atteignait le haut de l'écran en 300 ms alors que
le bandeau mettait 650 ms à s'en aller — elle passait donc JUSQU'À 78 px
SOUS le bandeau, et paraissait collée en haut de la page.
⚠️ ET C'EST « transform », PAS « top ».
Les deux animaient la même distance, dans le même temps, sur la même
courbe — et il s'ouvrait quand même un mince trou entre le bas du bandeau
et le haut de la barre au moment du retour. La raison est technique : un
déplacement par « transform » est calculé par la carte graphique, un
déplacement par « top » est recalculé à chaque image par le navigateur, qui
doit en plus refaire le calcul de position collante. Les deux ne tombent
pas exactement sur les mêmes images.
En donnant à la barre la MÊME propriété qu'au bandeau, les deux mouvements
empruntent le même chemin et ne peuvent plus se désynchroniser. Et comme le
bandeau parcourt 77 px (sa hauteur plus son filet) là où la barre en
parcourt 76, le décalage résiduel se fait toujours en RECOUVREMENT, jamais
en écart : le bandeau mord d'un pixel sur la barre, et il passe devant. */
transition: transform var(--t-entree) var(--ease);
/* CEINTURE ET BRETELLES : la barre prolonge son fond de 24 px VERS LE HAUT.
Ce n'est pas une ombre, c'est un aplat de la couleur de la page, posé
au-dessus d'elle. Il est invisible en temps normal — il est soit hors de
l'écran (bandeau escamoté, barre collée à 0), soit caché derrière le
bandeau, qui passe devant elle. Il ne devient visible que dans le cas
précis qu'on veut supprimer : si la barre et le bandeau se désynchronisent
d'une image, le mince trou entre les deux est rempli de blanc au lieu de
laisser voir la page défiler dessous.
Le prolongement fait UNE HAUTEUR DE BANDEAU, et non quelques pixels : il
couvre donc exactement la distance que les deux parcourent. Même un
décalage complet entre les deux mouvements ne pourrait plus laisser voir
la page — il n'y a plus de taille de trou possible. */
box-shadow: 0 calc(-1 * var(--header-h)) 0 var(--bg);
}
/* Le départ : la barre monte à la même vitesse et sur la même courbe que le
bandeau qui s'échappe. */
/* LE FILET DE LA BARRE TOMBE SUR LA MÊME COLONNE QUE LE CONTENU.
Il courait sur toute la colonne de contenu — 1066 px à 1440 — alors que les
bandes de Sujets et les fiches de Conférenciers vivent dans le RAIL, qui en
fait 1000. Le trait dépassait donc des deux côtés et rien ne s'alignait.
Même largeur maximale que « .enjeu .container », plus bas dans le fichier.
⚠️ SEULEMENT SUR SUJETS — d'où la classe en plus dans le HTML de cette page.
Sur Conférenciers, les fiches ne sont pas dans le rail : leur grille fait
440 + 544 px, centrée. Mesuré à 1440 px : le rail les décalerait de 25 px,
soit plus que le décalage qu'on corrige. Et les neuf noms demandent 1042 px
d'un seul tenant, quand le rail n'en offre que 1000 : la rangée tomberait en
deux lignes. Cette page garde donc la colonne de contenu. */
.index-noms--rail > .container{
max-width: calc(var(--rail-max) + var(--margin-x) * 2);
}
/* Sur CONFÉRENCIERS, la colonne n'est pas le rail : c'est la grille des fiches,
taillée sur ses deux contenus — la vidéo d'un côté, la largeur de lecture de
l'autre — avec son écart au milieu. Le filet reprend donc exactement cette
addition, et il tombe au pixel sur le bord de la première fiche.
⚠️ SI VOUS CHANGEZ LA GRILLE DES FICHES (« .speaker », plus haut), changez
les trois mêmes valeurs ici : ce sont les seules du fichier qui doivent
rester identiques d'un endroit à l'autre. */
.index-noms--fiches > .container{
max-width: calc(var(--player-max) + 34rem + clamp(56px, 4.6vw, 112px)
+ var(--margin-x) * 2);
}
body.entete-cachee .index-noms{
transform: translateY(calc(-1 * var(--header-h)));
transition: transform var(--t-sortie) var(--ease-sortie);
}
/* Système réglé sur « moins d'animations » : le bandeau ne s'escamote plus
(voir plus haut), donc la barre ne doit pas bouger non plus. */
@media (prefers-reduced-motion: reduce){
.index-noms{ transition: none; }
body.entete-cachee .index-noms{ transform: none; }
}
/* UNE LIGNE DE TEXTE CENTRÉE QUI SE REPLIE — plus une grille, et pas non plus
une rangée en flex.
La grille en colonnes égales avait deux défauts ici : elle réservait à chaque
nom la largeur du plus long (« Philippe Grandcolas »), ce qui creusait des
trous entre les courts, et elle calait tout à gauche, alors qu'une
sous-navigation se lit centrée, comme le menu du bandeau au-dessus.
⚠️ POURQUOI PAS « display: flex » AVEC « flex-wrap ».
Une rangée en flex remplit gloutonnement : elle case autant de noms que
possible sur la première ligne, puis jette le reste sur la suivante. Mesuré
entre 1222 et 1372 px — donc sur les portables en 1280 et en 1366, les plus
répandus — ça donnait HUIT NOMS PUIS UN, ce qu'on ne veut à aucun prix.
Les noms sont donc posés comme du texte : des blocs alignés en ligne, dans un
paragraphe centré. Ça débloque « text-wrap: balance », qui n'existe que pour
le texte : le navigateur essaie toutes les coupes possibles et garde celle
qui égalise le mieux les lignes, SANS jamais en ajouter une. Neuf noms sur
une ligne quand ils tiennent, quatre puis cinq quand ils ne tiennent plus.
C'est la même propriété que sur les titres de bande, plus bas.
Là où elle n'existe pas encore (Safari d'avant 17.5), on retombe simplement
sur le remplissage glouton : rien ne casse, les lignes sont juste moins
régulières.
« font-size: 0 » sur la liste : entre deux écrits sur deux lignes du
fichier HTML, il y a un retour à la ligne, et un retour à la ligne dans du
texte, c'est une espace. À zéro, cette espace ne mesure rien — les écarts
viennent alors des marges des , et d'elles seules. */
.index-noms__liste{
list-style: none;
margin: 0;
text-align: center;
text-wrap: balance;
font-size: 0;
/* Raccourci et non « padding-block » : il faut aussi remettre à zéro le
retrait de puce que le navigateur ajoute à gauche de tout , sinon le
premier nom part 40 px trop à droite.
Le rembourrage du bas est le pendant de celui posé au-dessus des noms sur
« .index-noms » : même jeton, donc autant d'air de chaque côté. */
padding: 0 0 var(--space-4);
/* Le filet qui sépare la navigation du contenu — le même trait, la même
épaisseur et la même couleur que sous « Nos conférenciers » sur
l'accueil. Il est porté par la LISTE et non par la barre : la barre va
d'un bord à l'autre de l'écran pour que rien ne défile en transparence
à côté d'elle, le filet s'arrête aux marges du contenu. */
border-bottom: 1px solid var(--hairline);
}
/* La moitié de l'écart de chaque côté : deux voisins mis bout à bout en font
donc un entier. Les marges du haut et du bas font l'écart entre deux lignes
quand la liste se replie.
⚠️ C'EST LE SEUL ENDROIT DU SITE OU LA CONTRAINTE EST HORIZONTALE, et ou
faire grandir DEGRADE au lieu d'ameliorer. Les neuf noms de la page
Conferenciers mesurent 826 px a eux seuls ; avec 24 px entre chacun ils en
occupaient 1 042 pour une barre qui en offre 1 050 a 1440 px de large. Huit
pixels de marge. En dessous, la barre passait sur DEUX lignes — et a
1366 x 768, l'une des resolutions de portable les plus repandues, la seconde
ligne portait 526 px de vide.
L'ecart suit donc l'ecran, mais a l'envers de tout le reste : il se RESSERRE
la ou la place manque et s'ouvre la ou elle abonde.
20 px de 1025 a ~1700 — c'est ce qui fait tenir les neuf noms sur UNE
ligne des 1366 au lieu de 1440 ;
24 px vers 2000 — la valeur d'avant, inchangee ;
31 px a 2560 — la barre respire au lieu de se serrer a gauche.
Le corps du texte, lui, ne bouge pas et ne doit pas bouger : passer de 13 a
16 px demanderait 1 232 px de barre, dont on ne dispose qu'au-dela de
~2 400 px de large. On echangerait une ligne propre contre deux lignes
bancales sur tous les ecrans ordinaires.
⚠️ SUR TELEPHONE, c'est la regle de fin de section qui commande (16 px) :
elle est ecrite plus bas, donc elle gagne. Ne la deplacez pas au-dessus.
⚠️ POUR PLUS TARD : au dixieme conferencier, la barre repassera sur deux
lignes a 1440, avec ou sans ce reglage. Ce n'est pas un defaut, c'est la
limite du format — a douze noms, deux lignes seront l'etat normal. */
.index-noms__liste li{
display: inline-block;
vertical-align: top;
margin: clamp(10px, 0.6vw, 22px);
}
.index-noms__liste a{
display: block;
/* DEUX crans sous le texte courant, et non plus un : 13 px contre 17.
C'est ce qui décide de tout le reste. Mesuré à 15 px : les neuf noms
réclament 1024 px pour 1066 px disponibles à 1440 px de large — il ne
reste que 5 px par écart, autant dire qu'ils se touchent, et la rangée
tombait en 8 + 1. À 13 px la ligne est unique. */
font-size: var(--fs-meta);
/* 500, et plus 600 : à 13 px en gris, le demi-gras faisait un pâté. */
font-weight: 500;
/* PLUS D'INTERLETTRAGE. Il y avait ici 0.025em, avec pour argument que « la
prose est resserrée, un menu est aéré ». L'air d'un menu se joue ENTRE les
entrées, pas entre les lettres : ces 0.025em coûtaient 41 px sur les neuf
noms, soit exactement de quoi passer l'écart de 12 à 24 px. Mesuré à
1440 px : 1042 px demandés pour 1066 px disponibles, la ligne reste
unique. Si vous remettez l'interlettrage, la rangée tombe en deux lignes. */
letter-spacing: var(--ls-none);
line-height: var(--lh-snug);
color: var(--ink-secondary); /* le gris de tous les textes secondaires */
text-decoration: none;
cursor: pointer;
}
/* LE SOUS-LIBELLÉ NE S'AFFICHE PLUS. C'était la thématique sous chaque nom sur
Conférenciers, le nombre de conférenciers sous chaque sujet sur Sujets.
Depuis que la barre est devenue une sous-navigation collée au bandeau, ces
petites capitales en faisaient une deuxième barre plutôt qu'une ligne de
chemins : deux étages de texte, dont un que personne ne lit.
Le texte est laissé dans le HTML — le remettre, c'est supprimer ce bloc. */
.index-noms__enjeu{ display: none; }
.index-noms__liste a:hover{ color: var(--ink); }
.index-noms__liste a:hover .index-noms__nom{
text-decoration: underline;
text-underline-offset: 4px;
}
/* Le nom de la fiche qu'on est en train de lire. C'est le JavaScript qui pose
cette classe au défilement ; sans lui la barre reste utilisable, elle ne
dit simplement pas où l'on en est. */
.index-noms__liste a.est-actif{ color: var(--accent); }
/* IL Y AVAIT ICI UNE RANGÉE QUI DÉFILAIT LATÉRALEMENT sous 1200 px, avec sa
barre de défilement fine et son aimantation. Elle réglait un problème de la
grille : sous 1200 px, celle-ci tombait à quatre colonnes, donc à trois
lignes dont la dernière ne portait qu'un seul nom.
La rangée qui se replie et se centre n'a pas ce défaut — deux lignes
équilibrées au lieu de 4 / 4 / 1 — et elle montre tous les noms d'un coup au
lieu d'en cacher la moitié à droite. Le défilement latéral n'a donc plus
d'objet, à aucune largeur. Ne le remettez pas. */
/* Le saut doit s'arrêter SOUS la barre du haut ET sous la barre des noms, qui
est collante elle aussi. « --index-h » est mesurée par le JavaScript : la
barre change de hauteur selon la largeur de la fenêtre, aucune valeur écrite
à la main ne resterait juste. */
.speaker[id],
.enjeu[id]{
scroll-margin-top: calc(var(--header-h) + var(--index-h, 0px) + var(--space-5));
}
/* ⚠️ SUR TÉLÉPHONE, LA BARRE N'EST PLUS COLLANTE — elle reste un sommaire.
Collée, elle n'affichait que 2 de ses 9 entrées et confisquait 8 % de l'écran.
En liste repliée, elle les montre toutes une fois, puis s'en va au défilement. */
@media (max-width: 640px){
/* Rien d'autre à défaire : le repli et le centrage sont maintenant la règle
générale, à toutes les largeurs. Seule la position change. */
/* Le prolongement du fond ne sert QUE si la barre est collante : ici elle ne
l'est plus, et un aplat qui défile avec la page n'aurait rien à combler. */
.index-noms{ position: static; box-shadow: none; }
/* L'écart entre les noms retombe de 24 à 16 px : sur un écran étroit, 24 px
laissaient un nom tout seul sur une ligne. Mesuré de 360 à 640 px, plus
aucune ligne solitaire à 16 px, sur les deux pages. */
.index-noms__liste li{ margin: calc(var(--space-4) / 2); }
.speaker[id],
.enjeu[id]{ scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
}
.speaker__bio{
margin: var(--space-5) 0 0;
/* Voir la note « LES DEUX POLICES ONT ECHANGE LEUR ROLE ». */
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
max-width: 38ch;
}
/* Sur la page Conférenciers, la bio n'est plus une accroche d'une ligne mais
la vraie biographie, reprise de la fiche — deux paragraphes en corps de
texte. Elle prend donc toute la largeur de la colonne au lieu des 38
caractères réservés à une phrase d'accroche.
Les pages Thématiques, elles, gardent l'accroche courte : on y compare des
sujets, pas des parcours. */
.speaker__bio--detaillee{ max-width: none; }
.speaker__links{ margin-top: var(--space-7); }
/* ---- Les noms sont des liens ---------------------------------------------
On clique d'instinct sur le nom d'une personne. Il mène donc à sa fiche,
exactement comme le bouton placé plus bas dans le même bloc — c'est le même
chemin, offert à ceux qui ne cherchent pas le bouton.
Le lien ne change RIEN à l'aspect du nom tant qu'on ne le survole pas : un
nom reste un titre avant d'être un lien, et une page dont tous les noms sont
soulignés ressemble à un annuaire. Le trait n'apparaît qu'au survol, et le
curseur en forme de main fait le reste.
Sur les fiches profil, le nom n'est PAS un lien : on y est déjà. */
.vscreen__nom a,
.speaker__name a{
color: inherit;
text-decoration: none;
}
.vscreen__nom a:hover,
.speaker__name a:hover{
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
/* Un cran plus présent : soulignement permanent au lieu d'apparaître au survol. */
.speaker__links .link-arrow{
font-size: var(--fs-suite);
border-bottom-color: var(--ink);
}
/* ---- 4.7 Footer global ---------------------------------------------------- */
.site-footer{
padding-block: var(--space-10) var(--space-8);
border-top: 1px solid var(--hairline);
}
.site-footer__top{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--hairline);
}
/* En pied de page, le mot-symbole reste BORDEAUX — plus petit, il signe au
lieu d'annoncer. En haut de page il est passé au noir : la barre du haut
porte déjà le bouton d'action, et deux aplats de couleur côte à côte se
disputaient l'œil. En bas, il n'a plus de concurrent.
⚠️ La couleur est redéclarée ici parce que .brand est passé au noir : sans
cette ligne, le pied de page suivrait. */
.site-footer .brand{ color: var(--accent); }
/* Le pied de page reprend, en plus petit, le bloc de la barre du haut : le
même titre, la même phrase. Ce n'est pas une redite pour rien — quelqu'un qui
arrive en bas d'une page profil n'a pas forcément vu le haut, et c'est le
dernier endroit où l'on peut dire ce qu'est cette maison.
Le titre est en sans et en 600, comme celui de la barre ; la phrase est en
serif, comme tous les textes qui SE LISENT sur ce site. */
.site-footer__titre{
margin: var(--space-5) 0 0;
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: var(--ls-tight);
line-height: var(--lh-snug);
color: var(--ink);
}
/* La phrase reste en gris : dans un pied de page, tout est en retrait, et un
noir franc ici ferait de l'ombre aux colonnes de liens à côté.
Pour la passer en noir comme dans la barre du haut : var(--ink). */
.site-footer__blurb{
margin: var(--space-2) 0 0;
max-width: 38ch;
font-family: var(--font-serif);
font-size: var(--fs-meta);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
.footer-col h2{
margin: 0 0 var(--space-4);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--ink-secondary);
}
.footer-col ul{
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.footer-col a{ font-size: var(--fs-sm); }
.footer-col a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom{
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-5);
padding-top: var(--space-6);
font-size: var(--fs-meta);
color: var(--ink-secondary);
}
.site-footer__legal{ display: flex; gap: var(--space-6); }
/* =============================================================================
5. SECTIONS DE PAGE
============================================================================= */
/* ---- 5.1 Hero de l'accueil : texte pur, aucune image ---------------------- */
/* Le hero occupe exactement une hauteur d'écran, moins le header : le filet qui
le sépare de la suite tombe donc pile en bas de l'écran, quelle que soit la
taille de celui-ci.
Pourquoi « svh » et pas « vh » : sur téléphone, la barre d'adresse du
navigateur apparaît et disparaît au défilement. L'unité vh ignore ce
mouvement et provoque un décalage ; svh mesure l'écran barre visible, donc
le filet tombe juste dans tous les cas. La ligne vh juste avant sert de
secours pour les navigateurs anciens.
Le contenu est centré verticalement, avec un léger décalage vers le haut
(padding-bottom plus grand) — un bloc optiquement centré se pose toujours un
peu au-dessus du milieu géométrique. */
.hero{
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
/* Respirations proportionnelles à la HAUTEUR de l'écran (vh), et non fixes :
sur une fenêtre basse, des marges de 96 et 160px suffisaient à faire
déborder le hero et le filet passait sous la ligne de flottaison. */
padding-block: clamp(24px, 4vh, 96px) clamp(32px, 7vh, 160px);
}
.hero__title{ max-width: 15ch; } /* force la coupe en 2 lignes */
.hero__lede{
margin-top: var(--space-8);
max-width: 50ch;
color: var(--ink);
}
/* Un seul bouton, en grand : c'est l'unique action de la page d'accueil. */
.hero__actions{ margin-top: var(--space-9); }
/* ---- 5.1bis HERO VIDÉO — un écran plein par conférencier -------------------
La vidéo remplit l'écran, la punchline est posée en bas à gauche.
Le texte est blanc sur l'image : sa lisibilité vient ENTIÈREMENT du fichier
vidéo, dont la bande basse est assombrie au montage. Le site n'ajoute plus
aucun voile par-dessus — il en posait un avant, et c'est lui qui provoquait
un éclaircissement au démarrage.
⚠️ Conséquence : une vidéo livrée sans cet assombrissement rendra la
punchline illisible. C'est une contrainte de montage, pas un réglage.
--------------------------------------------------------------------------- */
.vhero{
/* La vidéo passe SOUS le header : on la remonte de la hauteur exacte de
celui-ci, et l'écran occupe alors toute la fenêtre. Sans ça, le header
transparent laisserait voir le blanc de la page derrière lui — et ses
liens blancs deviendraient invisibles. */
/* -1px : le header mesure sa hauteur PLUS son filet de séparation. */
margin-top: calc(-1 * var(--header-h) - 1px);
/* Où se pose le texte sur l'image. La vidéo est assombrie à droite au
montage : le bloc s'y cale. Deux réglages, et rien d'autre à toucher. */
/* Largeur maximale du bloc de texte. ELLE SUIT L'ECRAN, et c'est la suite
logique de l'echelle typographique : les titres grandissent jusqu'a
1600-1700 px de large, puis se figent. Au-dela, si la colonne reste figee
elle aussi, le bloc entier retrecit par rapport a l'image — mesure a
2560 px : 480 px de texte dans une demi-image de 1280, soit 38 % contre
68 % a 1280 px de large. Le meme bloc, deux fois plus maigre.
Ici la colonne prend le relais exactement la ou les titres s'arretent :
480 px jusqu'a 1600, puis elle s'elargit jusqu'a 660. La punchline y tient
alors en trois lignes au lieu de quatre. */
--texte-largeur: clamp(480px, 30vw, 660px);
--texte-y: center; /* center · flex-start (haut) · flex-end (bas) */
position: relative;
background: #100d0a; /* fond du cadre pendant le chargement */
overflow: hidden;
}
.vscreen{
position: relative;
display: flex;
flex-direction: column;
justify-content: var(--texte-y, center);
height: 100vh;
height: 100svh;
min-height: 520px;
}
.vscreen[hidden]{ display: none; }
/* L'image et la vidéo occupent tout le cadre et sont rognées sur les côtés.
--ancrage décide de ce qu'on garde au rognage : 50% = centré, plus petit
pour garder la gauche, plus grand pour garder la droite. Il se règle par
écran, directement dans le HTML : style="--ancrage: 42%". */
/* Le bloc média est un étage à lui seul (z-index explicite) : l'ordre des
couches qu'il contient — image d'attente et vidéo — reste enfermé dedans et
ne peut jamais passer devant le texte, qui vit à l'étage au-dessus. */
.vscreen__media{
position: absolute;
z-index: 0;
inset: 0;
overflow: hidden;
container-type: size; /* sert d'unité de mesure à la vidéo, ci-dessous */
}
/* L'image d'attente au fond, la vidéo par-dessus. Les deux sont traitées
exactement pareil : aucune couche n'est ajoutée sur l'une et pas sur
l'autre — c'est la condition pour que la bascule ne se voie pas. */
.vscreen__thumb{
position: absolute;
z-index: 0;
inset: 0;
background: center / cover no-repeat;
background-position: var(--ancrage, 50%) center;
}
/* Faire remplir l'écran à une vidéo Vimeo.
Un lecteur Vimeo est un cadre étranger : on ne peut pas lui dire « remplis
et laisse déborder » comme à une image. Si on lui donne simplement la taille
de l'écran, il garde ses proportions à l'intérieur et laisse des bandes —
c'est ce qui donnait l'impression que la vidéo se posait « au-dessus » de
l'image de fond.
La solution : on calcule nous-mêmes une taille plus grande que le cadre,
dans les proportions exactes de la vidéo (--ar, mesuré automatiquement
auprès de Vimeo), et on la centre. Le débordement est rogné par le cadre.
--ancrage décide de ce qu'on garde au rognage : 50% = centré, moins pour
garder la gauche, plus pour garder la droite. */
.vscreen__video{
position: absolute;
z-index: 1;
top: 50%;
left: var(--ancrage, 50%);
transform: translate(-50%, -50%);
border: 0;
/* Repli pour les navigateurs anciens : mesuré sur la fenêtre plutôt que sur
le cadre. Légèrement trop grand, donc ça rogne un peu plus — jamais de
bande vide. */
width: calc(100vh * var(--ar, 1.7778));
min-width: 100vw;
height: calc(100vw / var(--ar, 1.7778));
min-height: 100vh;
opacity: 0;
/* Court : le lecteur est dévoilé pendant qu'il affiche la même image que
celle déjà à l'écran. L'enchaîné n'a donc rien à masquer, il sert juste
à éviter une apparition sèche. */
transition: opacity 300ms ease;
pointer-events: none; /* en fond, le clic traverse et lance le son */
}
@supports (container-type: size){
.vscreen__video{
width: calc(100cqh * var(--ar, 1.7778));
min-width: 100cqw;
height: calc(100cqw / var(--ar, 1.7778));
min-height: 100cqh;
}
}
/* Un vrai fichier vidéo est un élément d'image comme un autre : le navigateur
sait le faire déborder et rogner tout seul. Toute la gymnastique ci-dessus
ne concerne que le cadre Vimeo. */
video.vscreen__video{
top: 0;
left: 0;
transform: none;
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
object-fit: cover;
/* --ancrage : cadrage horizontal (50 % = centré)
--ancrage-y : cadrage vertical. 50 % = centré. Une valeur PLUS PETITE
montre davantage le haut de l'image, donc fait DESCENDRE le
visage dans le cadre ; une valeur plus grande le fait
remonter. C'est le réglage pour placer un regard à la bonne
hauteur, sans toucher au fichier vidéo. */
object-position: var(--ancrage, 50%) var(--ancrage-y, 50%);
}
.vscreen__video.is-vu{ opacity: 1; }
/* Voile très léger en haut, sous le header transparent : sans lui, des liens
blancs posés sur une étagère éclairée deviennent illisibles. Il est à
l'intérieur du bloc média, donc il s'applique à l'image d'attente comme à la
vidéo — c'est ce qui évite toute rupture au démarrage. */
.vscreen__media::after{
content: "";
position: absolute;
z-index: 3;
inset: 0 0 auto 0;
height: clamp(140px, 22vh, 240px);
background: linear-gradient(to bottom, var(--veil-mid), var(--veil-none));
pointer-events: none;
}
/* En mode son, le lecteur reprend ses commandes : c'est lui qui reçoit les
clics, pas l'écran — sinon mettre en pause relançait tout depuis le début. */
.vscreen.is-son .vscreen__video{ pointer-events: auto; }
.vscreen__inner{
position: relative;
z-index: 1; /* toujours au-dessus du bloc média */
color: #fff;
}
/* Le texte se pose au CENTRE DE LA MOITIÉ DROITE DE L'ÉCRAN — pas de la
colonne de texte. La différence compte : le bloc ne suit plus les marges du
site, il suit l'image, qui occupe elle toute la fenêtre.
Il reste aligné à gauche : un texte au fer à droite se lit mal dès qu'il
fait plus d'une ligne. */
.vscreen__moitie{
margin-left: 50%; /* on part du milieu exact de l'écran */
width: 50%; /* et on occupe toute la moitié droite */
display: flex;
justify-content: center;
/* de quoi laisser passer les flèches sans jamais toucher le texte */
padding-inline: clamp(72px, 5.5vw, 96px);
}
.vscreen__bloc{
width: min(calc(100% - var(--margin-video)), var(--texte-largeur, 480px));
/* Hauteur plancher : sans elle, un écran dont la punchline tient en deux
lignes place son nom plus bas qu'un écran à trois lignes, et le nom
saute d'un écran à l'autre. Avec ce plancher, tous les blocs ont la même
hauteur et les noms restent à la même place. */
min-height: 265px;
/* Le bouton est poussé tout en bas du bloc (voir .vscreen__cta) : d'un écran
à l'autre, les textes commencent à la même hauteur ET les boutons
finissent à la même hauteur, quelle que soit la longueur de la phrase. */
display: flex;
flex-direction: column;
}
/* Variante : le bloc se pose dans la moitié GAUCHE de l'écran. Utile quand la
personne est cadrée à droite dans le plan. Il suffit d'ajouter la classe
« vscreen--gauche » sur le bloc concerné. */
.vscreen--gauche .vscreen__moitie{ margin-left: 0; }
/* Le nom devient un vrai niveau de lecture — mais reste sous la punchline en
taille : au-dessus, l'écran deviendrait une carte de visite au lieu d'un
manifeste. */
.vscreen__nom{
margin: 0;
/* C'ETAIT « --fs-4 », qui plafonne a 30 px des 1500 px de large — soit 200 px
plus tot que la punchline juste en dessous, qui monte, elle, jusqu'a 58 a
1700. Le nom perdait donc du terrain a mesure que l'ecran grandissait :
mesure, son rapport a la punchline passait de 0,59 a 0,52.
Meme plancher et meme pente qu'avant, plafond releve de 30 a 34 et atteint
au meme moment que celui de la punchline. En dessous de 1500 px de large,
pas un pixel ne change. */
font-size: clamp(22px, 2vw, 34px);
font-weight: 600;
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
}
.vscreen__role{
margin: var(--space-2) 0 0;
/* Suit le nom au-dessus : voir « --fs-media-sm ». Sur telephone, la regle de
fin de fichier la ramene a 15 px — la largeur y est la ressource rare. */
font-size: var(--fs-media-sm);
color: var(--on-media-2);
}
.vscreen__punch{
margin: clamp(22px, 2.6vh, 34px) 0 0;
font-size: var(--fs-2);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-title);
text-wrap: balance;
}
/* margin-top: auto = « prends toute la place libre au-dessus de moi », donc le bouton se cale en bas du bloc. Le padding-top garantit qu'il ne colle jamais au texte quand il n'y a pas de place libre. */ .vscreen__cta{ margin-top: auto; padding-top: clamp(28px, 3.4vh, 46px); }
/* DEUX BOUTONS COTE A COTE : « Ecouter l'extrait », plein, en premier — c'est
l'invitation propre au site ; « Voir ... », en contour, en second. L'ecart
entre les deux est celui de deux boutons partout ailleurs. Quand la ligne
est trop etroite, le second passe dessous avec le meme ecart. */
.vscreen__cta .btn + .btn{ margin-left: var(--space-3); }
.vscreen__cta .btn{ margin-bottom: var(--space-3); }
.vscreen__cta .btn + .btn{ margin-bottom: 0; }
.vscreen__cta .vscreen__pagin{ margin-top: var(--space-2); }
/* Le compteur, sous le bouton. Discret par construction : petit, en petites
capitales, à demi transparent. Il ne demande rien — il informe.
Son rôle est de dire qu'il y a d'autres portraits derrière celui-ci. Une
flèche seule au bord de l'image ne le disait pas : on ne savait pas si on
était sur un carrousel de trois ou de neuf. */
.vscreen__pagin{
margin: var(--space-3) 0 0;
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: var(--ls-wide);
color: var(--on-media-3);
}
/* Deux formes dans le même bloc, construites par le JavaScript. Sur
ordinateur on lit « 02 / 04 » ; les traits, eux, ne servent qu'au
téléphone (voir le bloc mobile en fin de fichier). */
.vscreen__traits{ display: none; }
.vscreen__traits span{
display: block;
width: 18px;
height: 2px;
background: currentColor;
opacity: .35;
transition: opacity 150ms var(--ease), background 150ms var(--ease);
}
.vscreen__traits span.est-actif{ opacity: 1; }
/* ---- Les fleches, a cote du compteur -----------------------------------------
Sur ordinateur, les deux fleches rondes qui flottaient a mi-hauteur au bord
de l'ecran, sans rapport avec le texte, sont masquees (voir plus bas). A la
place, deux petites fleches a cote du compteur « 01 / 04 », sous les
boutons : tout ce qui sert a naviguer est au meme endroit. Elles sont
construites par le script, dans chaque ecran (voir afficher() dans site.js).
Sur tablette, les fleches du bord restent ; sur telephone, on balaie du
doigt et il n'y a de fleches nulle part. */
.vscreen__pagin{
display: flex;
align-items: center;
gap: var(--space-4);
}
.vscreen__pagin__fleches{ display: inline-flex; gap: var(--space-2); }
.vscreen__pagin__fleche{
width: 32px; height: 32px;
display: grid; place-items: center;
padding: 0;
border: 1px solid var(--on-media-line);
border-radius: 50%;
background: transparent;
color: var(--on-media-2);
font-family: var(--font);
font-size: 15px;
line-height: 1;
letter-spacing: 0;
cursor: pointer;
transition: color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
}
.vscreen__pagin__fleche:hover{ color: #fff; border-color: #fff; background: var(--veil-soft); }
/* Une fleche qui ne mene nulle part reste visible, en retrait : le compteur
garde sa forme d'un ecran a l'autre, rien ne saute. */
.vscreen__pagin__fleche:disabled{ opacity: .3; cursor: default; }
/* Tablette comprise (depuis le 30 septembre) : les flèches nues sous le
compteur, comme sur ordinateur, et plus la flèche dans un rond posée au
milieu de l'image. Seul le téléphone s'en passe (on y balaie du doigt). */
@media (min-width: 641px){
.vhero:not(.vhero--bande) .vhero__fleche{ display: none; }
}
@media (max-width: 640px){
.vscreen__pagin__fleches{ display: none; }
}
/* ---- Écran 01 : le texte long posé sur la vidéo ---------------------------
Un écran qui porte un paragraphe, et pas seulement une punchline. Trois
niveaux de lecture : la phrase-titre, la promesse, puis la note personnelle.
OÙ LE MASQUER : la toute dernière règle de ce bloc cache la promesse et la
note sous 1025 px de large (téléphones et tablettes) ; seule la phrase-titre
reste. Pour les afficher aussi sur tablette, remplacez 1024px par 640px ;
pour les afficher partout, supprimez ces trois lignes. */
.vscreen__bloc--large{
/* la colonne de texte s'élargit : un paragraphe a besoin de plus d'air
qu'une punchline de six mots. Meme principe que ci-dessus : au-dela de
1670 px de large, elle continue de suivre l'ecran, jusqu'a 800 px. */
--texte-largeur: clamp(600px, 36vw, 800px);
/* IL Y AVAIT ICI UNE OMBRE PORTÉE sur le texte — un halo noir très diffus,
censé le décoller de la vidéo si un plan s'éclaircissait. Sur une boucle
déjà sombre elle ne protégeait de rien et se voyait : un voile flou autour
de chaque ligne, qui salissait le gris. Le texte est posé net.
Si vous changez un jour de boucle pour un plan clair et que la lecture
devient difficile, c'est ici qu'on la remettrait. */
}
/* ⚠️ text-shadow SE TRANSMET AUX ENFANTS. Le bouton « Voir les conférenciers »
est à l'intérieur du bloc ci-dessus : il héritait donc d'une ombre noire de
30 px de flou, appliquée à un texte noir posé sur un aplat blanc. Résultat,
un libellé légèrement sale, alors que les mêmes boutons sont nets partout
ailleurs sur le site.
L'ombre sert à décoller le texte de la vidéo. Un bouton, lui, a déjà son
propre fond : il n'en a aucun besoin. On la coupe donc, sur tous les boutons
posés dans un écran vidéo. */
.vscreen .btn{ text-shadow: none; }
/* La phrase-titre est plus longue qu'une punchline : elle descend d'un cran en
taille, sinon elle mange l'écran et pousse le bouton hors de la fenêtre. */
.vscreen__punch--titre{
margin-top: var(--space-3);
/* 26ch et non 20 : la phrase de la page A propos est une phrase entiere,
pas une question de six mots ; a 20ch elle faisait six lignes. */
max-width: 26ch;
font-size: var(--fs-2);
line-height: var(--lh-tight);
letter-spacing: var(--ls-title);
}
.vscreen__lede{
margin: clamp(18px, 2.2vh, 28px) 0 0;
font-size: var(--fs-lede);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--on-media);
text-wrap: pretty;
}
/* ---------------------------------------------------------------------------
LE REPÈRE DE DÉFILEMENT, en bas de l'écran vidéo de la page À propos.
Un écran qui remplit la fenêtre ne dit pas de lui-même qu'il y a une suite :
sans repère, on peut croire que la page s'arrête là. Un chevron suffit — il
n'explique rien, il montre une direction.
Mesuré : il se pose à 32 px du bas de la fenêtre. L'écran vidéo déborde
légèrement sous celle-ci — il est remonté d'une hauteur de bandeau pour
passer sous l'en-tête — d'où un écart écrit ici qui n'est pas celui qu'on
voit à l'arrivée.
--------------------------------------------------------------------------- */
.vscreen__defiler{
position: absolute;
left: 50%;
bottom: var(--space-7);
color: var(--on-media-2);
pointer-events: none; /* rien à cliquer : il n'est là que pour être vu */
animation: defiler 2400ms var(--ease) infinite;
}
@keyframes defiler{
0%, 100% { transform: translate(-50%, 0); opacity: .6; }
50% { transform: translate(-50%, 8px); opacity: 1; }
}
/* Sans animation, il reste : c'est le repère qui compte, pas son mouvement. */
@media (prefers-reduced-motion: reduce){
.vscreen__defiler{ animation: none; transform: translateX(-50%); }
}
/* La note personnelle : décalée et posée sur un filet, pour qu'on voie au
premier coup d'œil que la voix change — ce n'est plus l'agence qui parle. */
.vscreen__note{
margin: clamp(20px, 2.4vh, 32px) 0 0;
padding-left: clamp(18px, 1.4vw, 26px);
border-left: 1px solid var(--on-media-line);
}
.vscreen__note p{
margin: 0 0 clamp(10px, 1.3vh, 16px);
/* Ce texte est désormais le SEUL de l'écran — la phrase d'accroche et le
bouton sont partis. Un paragraphe de 17 px s'y lisait comme une légende
oubliée dans un coin.
⚠️ SEULE TAILLE DU SITE À NE PAS ÊTRE UN JETON, et c'est délibéré : elle
tombe entre --fs-5 (19 à 23 px) et --fs-4 (22 à 30 px). Essayé à --fs-4,
c'était d'un cheveu trop gros ; --fs-5 aurait fait redescendre de 30 à
23 px d'un coup, soit bien plus qu'un cheveu. Si vous voulez revenir dans
l'échelle, c'est --fs-5 qu'il faut mettre. */
font-size: clamp(20px, 1.7vw, 26px);
line-height: var(--lh-body);
color: var(--on-media-2);
text-wrap: pretty;
}
.vscreen__note p:last-child{ margin-bottom: 0; }
.vscreen__note b{ color: #fff; font-weight: 600; }
/* Le début de bio, sous la punchline d'un conférencier. Même taille et même
gris que la note personnelle, mais sans filet : ici la voix ne change pas,
c'est toujours l'agence qui présente. */
.vscreen__bio{
margin: clamp(16px, 2vh, 26px) 0 0;
max-width: 46ch;
/* 15 px jusqu'a 1580 px de large — la valeur d'avant, personne ne voit de
difference sur un portable. Au-dela, jusqu'a 19 px : c'est le seul
paragraphe du site pose sur une image plein ecran, et sous une punchline
de 58 px il tombait a un quart de sa taille.
Le « 46ch » suit tout seul : une largeur en caracteres grandit avec la
police, la ligne garde donc exactement la meme longueur de lecture.
⚠️ Sur une fenetre de moins de 880 px de haut, la regle de fenetre basse,
plus bas dans ce fichier, ramene ce texte a 15 px. C'est voulu : la
hauteur y est la ressource rare, pas la largeur. */
font-size: var(--fs-media-sm);
line-height: var(--lh-body);
color: var(--on-media-2);
text-wrap: pretty;
/* le texte le plus petit de l'écran est aussi le plus fragile sur une image
claire : même ombre diffuse que sur l'écran 01 */
text-shadow: 0 1px 30px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.32);
}
/* L'écran au texte long se centre dans la zone LIBRE, c'est-à-dire sous le
bandeau — pas dans la fenêtre entière. Sans cela, la première ligne finit
derrière le bandeau dès que la fenêtre est peu haute.
⚠️ CETTE RÈGLE ÉTAIT RÉSERVÉE AUX ORDINATEURS, et c'était un oubli le jour où
ce texte est devenu visible sur téléphone : en dessous de 1025 px il se
centrait dans la fenêtre ENTIÈRE, donc partiellement sous le bandeau. Mesuré
à 320 × 568 : la première ligne commençait 9 px au-dessus du bas du bandeau.
Elle vaut maintenant à toutes les largeurs. */
.vscreen--long{ padding-top: var(--header-h); }
/* Fenêtres peu hautes (portables 13", navigateur avec ses barres) : tout le
bloc descend d'un cran de taille. Sans cette règle, le texte finit par
toucher le header en haut et le bord de l'écran en bas. */
@media (min-width: 1025px) and (max-height: 880px){
.vscreen__punch--titre{ font-size: var(--fs-2); }
.vscreen__lede{ font-size: var(--fs-body); }
.vscreen__note{ margin-top: var(--space-4); }
/* Le corps ne bouge plus ici : ces deux règles de fenêtre basse dataient du
temps où ce bloc portait aussi une phrase d'accroche et un bouton. Il n'y
a plus que trois paragraphes — mesuré, ils tiennent en pleine taille
jusqu'à 800 px de hauteur. Seule la marge se resserre. */
.vscreen__note p{ margin-bottom: var(--space-2); }
.vscreen__bio{ font-size: var(--fs-sm); margin-top: var(--space-4); }
}
/* Fenêtres vraiment basses (13" en 1280x640, écran partagé en deux) :
un cran de plus, sinon le haut du texte passe derrière le menu. */
@media (min-width: 1025px) and (max-height: 720px){
.vscreen__punch--titre{ font-size: var(--fs-4); }
.vscreen__lede{ font-size: var(--fs-sm); line-height: var(--lh-body); }
.vscreen__note{ margin-top: var(--space-3); }
.vscreen__note p{ font-size: var(--fs-5); line-height: var(--lh-body); margin-bottom: var(--space-2); }
.vscreen__bloc--large .vscreen__cta{ padding-top: var(--space-5); }
}
@media (max-width: 1024px){
.vscreen__long{ display: none; }
/* SAUF SUR LA PAGE À PROPOS. Son écran ne porte plus qu'un texte court — la
phrase d'accroche est partie, il ne reste que les trois paragraphes signés.
Masqué comme les autres, l'écran ne disait plus rien du tout sur téléphone :
une vidéo plein cadre et un chevron. Mesuré à 390 px de large, les trois
paragraphes tiennent en 12 lignes pour 767 px de hauteur disponible. */
.vscreen--long .vscreen__long{ display: block; }
/* Et il faut lui laisser la place du chevron. Le texte est centré dans la
hauteur de l'écran ; sans ce rembourrage bas, sa dernière ligne venait se
poser sur le repère de défilement. Mesuré à 390 px : 6 px de chevauchement
avant, 58 px de blanc après. */
.vscreen--long .vscreen__inner{ padding-bottom: var(--space-11); }
/* ⚠️ ET UN CRAN DE MOINS EN CORPS. Les règles de fenêtre basse, plus haut,
ne valent qu'au-dessus de 1025 px : ici rien ne protégeait la hauteur.
Mesuré à 360 × 640 px avec le corps des titres de rubrique : les trois
paragraphes réclamaient 614 px pour 491 px disponibles entre le bandeau et
le chevron, et la première ligne passait 102 px AU-DESSUS du haut de
l'écran. À 19 px ils tiennent. */
.vscreen__note p{ font-size: var(--fs-5); }
}
/* ---- DEUX GARDE-FOUS DE HAUTEUR, mesurés un par un -------------------------
Le texte de l'écran À propos est le seul du site à devoir tenir en entier
dans une fenêtre, entre le bandeau du haut et le chevron du bas. Deux
formats le mettaient en défaut ; ces deux règles les couvrent. */
/* Portable dont la fenêtre fait moins de 700 px de haut : en dessous, la
dernière ligne vient toucher le chevron (mesuré à 1440 × 660).
Le seuil était à 800 px du temps où ce texte était d'un cran plus gros ; à
26 px il tient jusqu'à 700, et le laisser à 800 faisait chuter le corps de
24,5 à 20 px sur les portables les plus courants, sans nécessité. */
@media (min-width: 1025px) and (max-height: 700px){
.vscreen__note p{ font-size: var(--fs-5); }
}
/* Très petit téléphone (320 × 568 et compagnie) : le texte descend d'un cran,
et surtout l'écran cesse d'être verrouillé sur la hauteur de la fenêtre. */
@media (max-width: 1024px) and (max-height: 600px){
.vscreen__note p{ font-size: var(--fs-lede); }
/* L'écran s'allonge pour contenir son texte au lieu de le comprimer. Mesuré à
320 × 568 : il fait 657 px, on fait donc glisser 89 px de plus avant
d'atteindre la suite. Mieux vaut ça qu'un paragraphe écrasé sous le
chevron. C'est le seul endroit du site où un écran vidéo dépasse la
fenêtre, et il n'y a que là que ça se justifie. */
.vscreen--long{ height: auto; min-height: 100svh; }
}
/* Tablette tenue en portrait : la moitié de 768 px, moins les marges, ne laisse
qu'une colonne de 208 px — ce n'est plus une colonne, c'est un couloir. Sous
900 px, le texte reprend donc toute la largeur et se pose en bas, comme sur
téléphone. */
@media (min-width: 641px) and (max-width: 900px){
.vscreen{ justify-content: flex-end; }
.vscreen__inner{
padding-inline: var(--margin-video);
padding-bottom: clamp(56px, 8vh, 110px);
}
.vscreen__moitie{ width: 100%; margin-left: 0; display: block; padding-inline: 0; }
.vscreen__bloc{ width: 100%; max-width: 620px; }
}
/* Sur une image sombre, le bouton s'inverse : la règle reste « le bouton est
l'élément le plus contrasté de son fond ». */
/* Sur une vidéo, le bouton reste blanc — un aplat rouge sur une image serait
une tache. Son texte et son contour sont NOIRS : sur du blanc, en petits
caractères, le rouge d'identité fatigue l'œil. Le rouge reste réservé aux
boutons pleins, là où il occupe une surface.
Pour revenir au rouge : remettre var(--accent) à la place de var(--ink). */
/* Le bouton SECONDAIRE, sur une vidéo : contour blanc, fond transparent.
Deux boutons blancs pleins sur le même écran — « Prendre rendez-vous » dans
la barre du haut, « Voir Untel » sur l'image — se disputaient l'attention
alors qu'ils ne servent pas la même chose. Le seul bouton plein de la page
doit être celui qui déclenche une demande.
Au survol il se remplit : c'est là qu'il devient franc. */
.btn--fantome{
border-color: var(--on-media-line);
background: transparent;
color: #fff;
}
.btn--fantome:hover{
border-color: #fff;
background: #fff;
color: var(--ink);
}
.btn--clair{
border-color: var(--ink);
background: #fff;
color: var(--ink);
}
.btn--clair:hover{ background: var(--on-media); }
/* Commande de son, discrète, en haut à droite de l'image. Elle sert aussi de
bouton de lecture quand le navigateur refuse le démarrage automatique. */
/* Commandes de lecture en bas à gauche : la zone est libre, c'est là qu'on
les cherche, et elles ne se disputent pas le coin haut droit avec le bouton
« Prendre rendez-vous » du header devenu transparent. */
.vscreen__cmds{
position: absolute;
z-index: 2;
width: max-content; /* sinon les boutons se tassent sur écran étroit */
bottom: clamp(20px, 3vh, 34px);
left: var(--margin-video);
display: flex;
align-items: center;
/* 22 px et non 10 : les deux boutons portaient le même contour et le même
fond, collés l'un à l'autre — on les lisait comme une paire, et on ne
savait plus lequel commandait quoi. L'écart les sépare, et la mise en
forme les distingue (voir .vscreen__cmd juste dessous). */
gap: var(--space-5);
}
/* Bouton pause : rond, même famille que « Écouter ». Il ne fait qu'arrêter
l'image — le son, lui, a son propre bouton juste à côté. */
/* La pause : un signe NU, sans contour ni fond. Elle arrête l'image qui
bouge — c'est un réglage de confort, pas une action éditoriale.
« Écouter », à côté, garde sa pastille : c'est lui l'action. Tant que les
deux portaient le même habillage, on ne savait pas lequel faisait quoi.
L'ombre portée remplace le fond : elle tient sur une image claire comme sur
une image sombre. */
.vscreen__cmd{
flex: none;
/* 44 px et non 38 : c'est la plus petite cible qu'un doigt atteint sans
rater. Le dessin, lui, ne change pas — c'est la zone qui grandit. */
width: 44px; height: 44px;
display: grid; place-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--on-media-2);
filter: drop-shadow(0 1px 6px rgba(0,0,0,.55));
cursor: pointer;
transition: color var(--t-fast) var(--ease);
}
.vscreen__cmd:hover{ color: #fff; }
/* ⚠️ LE BOUTON PAUSE GARDE SA PLACE MÊME QUAND IL N'A RIEN À COMMANDER.
Il n'apparaît qu'une fois la boucle lancée. Tant qu'il était absent de la
mise en page, le bouton du son occupait sa position ; il glissait ensuite
vers la droite quand la pause arrivait. En passant d'un écran à l'autre, on
voyait donc la pause clignoter et le son faire l'aller-retour.
« visibility » plutôt que « display » : la case reste réservée, mais le
bouton n'est ni visible, ni cliquable, ni atteignable au clavier.
Le « !important » est imposé : la règle générale « [hidden] { display: none
!important } » en tête de fichier ne se laisse pas contredire autrement. */
.vscreen__cmds [data-pause][hidden]{
display: grid !important;
visibility: hidden;
}
.vscreen__cmd svg{ display: block; }
/* Un seul dessin dans le bouton : deux barres, ou un triangle. */
.vscreen__cmd .i-play{ display: none; }
.vscreen__cmd.is-paused .i-pause{ display: none; }
.vscreen__cmd.is-paused .i-play{ display: block; }
.vscreen__son{
flex: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
/* La pastille faisait 41 px de haut : trois pixels sous la cible tactile
minimale. Le rembourrage ne suffit pas à le garantir quand la police
change, une hauteur plancher si. */
min-height: 44px;
gap: var(--space-2);
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
border: 1px solid var(--on-media-line);
border-radius: 999px;
background: var(--veil-soft);
color: #fff;
font: inherit;
font-size: var(--fs-sm);
letter-spacing: var(--ls-tight);
cursor: pointer;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.vscreen__son:hover{ background: var(--veil-mid); border-color: #fff; }
.vscreen__son svg{ display: block; }
/* L'icône suit l'état : barrée quand c'est muet, ondes quand le son joue.
Les deux dessins vivent dans le même SVG, on n'en montre qu'un. */
.vscreen__son .i-ondes{ display: none; }
.vscreen.is-son .vscreen__son .i-muet{ display: none; }
.vscreen.is-son .vscreen__son .i-ondes{ display: block; }
/* Navigation entre les écrans : deux flèches rondes, à mi-hauteur, contre les
bords. Rien en bas de l'écran — l'image reste entière. */
.vhero__fleche{
position: absolute;
z-index: 3;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
display: grid; place-items: center;
padding: 0;
border: 1px solid var(--on-media-line);
border-radius: 50%;
background: var(--veil-soft);
color: #fff;
font-size: 19px;
line-height: var(--lh-tight);
cursor: pointer;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.vhero__fleche:hover{ background: var(--veil-mid); border-color: #fff; }
/* ⚠️ Les flèches étaient à 16 px du bord, seules sur cette marge : tout le
reste du hero est sur --margin-video. Sur téléphone, la flèche paraissait
collée à la vitre, sans rapport avec le reste. Elles sont maintenant sur la
marge du hero, comme le texte et les commandes. */
.vhero__fleche--prec{ left: var(--margin-video); }
.vhero__fleche--suiv{ right: var(--margin-video); }
/* ---- 5.1quater L'écran vidéo des pages profil ------------------------------
Même composant que la page d'accueil, à deux différences près, et elles ont
la même raison : sur un profil, on vient DÉCIDER, pas se laisser séduire.
1. On ne garde que le haut du plan. Le cadrage est celui de la home au pixel
près — c'est simplement le bas de l'image qui est coupé, et c'est là que
la bio vient se poser.
2. La boucle se fige au bout de quelques secondes (attribut « data-arret »
dans le HTML) : le visage a vécu, puis la page se tait pour qu'on lise. */
.vhero--bande{
/* On garde 60 % du plan : les 40 % du bas sont remplacés par le texte.
C'est LE seul chiffre à changer pour couper plus ou moins. */
--bande-h: 60svh;
margin-top: calc(-1 * var(--header-h) - 1px); /* passe sous le menu */
height: var(--bande-h);
min-height: 300px;
transition: height 460ms var(--ease);
}
/* Au clic sur « Écouter », l'écran s'ouvre en grand : le lecteur Vimeo a
besoin de sa place, et ses commandes — qui sont en bas — seraient sinon
coupées par la bande. Le bouton de retour le referme. */
.vhero--bande.is-plein{ --bande-h: 100svh; }
/* Le texte s'efface pendant l'écoute : c'est la vidéo qu'on regarde. */
.vhero--bande.is-plein .vscreen__inner{
opacity: 0;
pointer-events: none;
transition: opacity 200ms var(--ease);
}
/* Le bouton de retour : une croix, à la place des deux barres de pause.
On masque le SVG ENTIER, pas seulement son dessin : sinon il continue
d'occuper une case dans le bouton et pousse la croix hors du centre. */
.vscreen__cmd.is-retour svg{ display: none; }
.vscreen__cmd.is-retour::before{
content: "✕";
font-size: 15px;
line-height: var(--lh-tight);
}
@media (prefers-reduced-motion: reduce){
.vhero--bande{ transition: none; }
}
/* Le cœur du cadrage : le média garde la taille d'un ÉCRAN ENTIER, ancré en
haut. La bande, plus courte, en masque le bas. Le visage se retrouve donc
exactement là où il est sur la page d'accueil. */
.vhero--bande .vscreen__media{
inset: 0 0 auto 0;
height: 100vh;
height: 100svh;
}
/* ---- La bande sans boucle vidéo : le portrait du conférencier -------------
Un portrait est vertical, la bande est large. Le recadrer en plein cadre
(« cover ») revenait à n'en montrer qu'un quart, agrandi d'autant : c'est ce
qui donnait l'impression d'un bug.
On l'affiche donc EN ENTIER, à sa hauteur réelle, calé à droite — le nom
occupe la gauche. Rien n'est rogné, rien n'est agrandi.
La règle ne vise que les bandes portant un data-photo, c'est-à-dire celles
dont la boucle n'est pas encore déposée. Dès que la vidéo arrive, elle passe
par-dessus et reprend le cadrage de l'accueil. */
.vhero--bande .vscreen__thumb.is-portrait{
/* La photo occupe une colonne à droite, de largeur connue : c'est ce qui
permet de faire partir le fondu de SON bord gauche, et non de celui de
l'écran. Sans cette colonne, le dégradé se terminait bien avant la photo
et ne servait à rien. */
left: auto;
right: 0;
/* la hauteur de la bande, et non celle de l'écran entier */
height: var(--bande-h);
/* et la largeur exacte de la photo à cette hauteur : --photo-ar est posé par
le JavaScript à partir des dimensions réelles du fichier. La colonne épouse
donc la photo, ni plus ni moins — c'est ce qui permet au fondu ci-dessous
de tomber sur elle. */
width: calc(var(--bande-h) * var(--photo-ar, 0.6667));
max-width: 46vw;
background-size: cover;
background-position: center bottom;
/* Le bord gauche est fondu dans le noir de la bande : sans ça, on verrait un
rectangle rapporté, avec une arête nette et le fond de la photo qui jure
avec celui de la page. Le visage, lui, reste intact. */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
@media (max-width: 900px){
/* Sur téléphone, la colonne de droite ne marche pas : la bande est presque
carrée et le nom, posé en bas à gauche, passerait par-dessus la photo.
On revient donc au plein cadre, ancré en haut pour garder le visage.
À cette largeur le recadrage ne pose pas de problème : la photo n'est pas
agrandie, on en montre simplement les deux tiers supérieurs.
Le nom reste lisible grâce au dégradé sombre déjà posé sur .vscreen__inner. */
.vhero--bande .vscreen__thumb.is-portrait{
left: 0;
right: 0;
width: auto;
max-width: none;
background-position: center top;
-webkit-mask-image: none;
mask-image: none;
}
}
.vhero--bande .vscreen{
height: 100%;
min-height: 0;
justify-content: flex-end; /* le nom se cale en bas de la bande */
}
.vhero--bande .vscreen__moitie{
width: 100%;
margin-left: 0;
display: block;
padding-inline: var(--margin-video);
}
.vhero--bande .vscreen__bloc{
width: 100%;
max-width: none;
min-height: 0;
display: block;
}
/* Le dégradé qui rend le nom lisible est porté par le bloc de texte : il suit
donc le bas de la BANDE, pas celui du média, qui descend bien plus bas. */
.vhero--bande .vscreen__inner{
padding-top: clamp(70px, 12vh, 150px);
padding-bottom: clamp(26px, 3.6vh, 46px);
background: linear-gradient(to top, var(--veil-strong), var(--veil-none));
}
.vhero--bande .vscreen__nom{ font-size: var(--fs-2); }
.vhero--bande .vscreen__role{ margin-top: var(--space-2); font-size: var(--fs-body); }
/* Les commandes passent à droite : à gauche, elles buteraient sur le nom. */
.vhero--bande .vscreen__cmds{
left: auto;
right: var(--margin-video);
bottom: clamp(22px, 3vh, 38px);
}
/* Sous la bande : la bio à gauche, le bouton à droite, sur la même ligne. */
/* Double classe volontaire (.opening.opening--sous-bande) : la règle générale
« .opening { padding-block: … } » est écrite PLUS BAS dans ce fichier, et à spécificité égale c'est la dernière écrite qui l'emporte. Avec une seule classe, ce réglage était purement décoratif — il n'a jamais rien fait. Les deux colonnes (bio à gauche, bouton à droite) portaient en plus une marge haute de 30 px héritée des fiches classiques, où la bio suit le nom. Ici rien ne les précède : on la retire, et l'écart qu'on voit devient exactement celui qui est écrit ci-dessous. */ .opening.opening--sous-bande{ padding-top: var(--space-9); }
.opening--sous-bande .opening__bio,
.opening--sous-bande .cta-row{ margin-top: 0; }
.opening--sous-bande .opening__body{
/* La bio et le bouton s'alignent sur la même colonne que les sections qui
suivent (Conférences, Publications…), et non sur toute la largeur de la
page : sans ça, le premier bloc de la fiche déborde de chaque côté de tout
ce qui vient dessous, et le regard voit un décalage. */
max-width: var(--rail-max);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
align-items: start;
gap: clamp(32px, 4vw, 72px);
}
.opening--sous-bande .opening__bio{ max-width: 62ch; }
.opening--sous-bande .cta-row{
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
@media (max-width: 900px){
/* Sur téléphone, la bio fait deux paragraphes pleine largeur : on découvre
moins de vidéo pour que le texte commence tout de suite. Le bouton, lui,
demandera un petit défilement — c'est normal sur un écran de téléphone. */
.vhero--bande{ --bande-h: 44svh; }
/* Une seule colonne : le bouton repasse sous le texte. */
.opening--sous-bande .opening__body{ grid-template-columns: 1fr; gap: var(--space-8); }
.opening--sous-bande .cta-row{ flex-direction: row; align-items: center; gap: var(--space-6); }
}
/* ---- 5.2 Carrousel de la collection (accueil) ----------------------------- */
.carousel__foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
margin-top: var(--space-8);
padding-top: var(--space-5);
border-top: 1px solid var(--hairline);
}
/* Pagination « 01 / 02 » — dans la grotesque du site, jamais en chasse fixe. */
.carousel__count{
font-size: var(--fs-meta);
letter-spacing: var(--ls-label);
color: var(--ink-secondary);
}
.carousel__count b{ color: var(--ink); font-weight: 500; }
.carousel__nav{
display: flex;
align-items: center;
gap: var(--space-5);
}
/* ---- 5.3 Index thématique ------------------------------------------------- */
/* Comme la liste de conférences : seules les séparations entre deux enjeux
portent un filet — rien au-dessus du premier, rien sous le dernier. */
.theme-row{
/* flex, donc chaque enjeu occupe sa propre ligne, pleine largeur.
Sans cette ligne, le lien redevient un simple mot dans un paragraphe et
les quatre enjeux se retrouvent côte à côte. */
display: flex;
align-items: baseline;
gap: var(--space-6);
/* 24 px et non 32 : ces goutttières avaient été réglées pour un titre de
38 px. Sous un titre de 25, elles faisaient flotter les lignes dans le
vide. Les deux réglages vont ensemble. */
padding: var(--space-5) var(--space-1);
transition: padding-left var(--t-fast) var(--ease);
}
.theme-row + .theme-row{ border-top: 1px solid var(--hairline); }
.theme-row:hover{ padding-left: var(--space-4); }
/* Même correction que pour les conférences : le padding sert à écarter les
lignes de leur filet, il n'a rien à faire en haut de la première ni en bas
de la dernière, où il ne fait qu'ajouter du vide. */
.theme-row:first-child{ padding-top: 0; }
.theme-row:last-child{ padding-bottom: 0; }
/* La taille est LE réglage de ce bloc — c'est la seule ligne à toucher.
Historique, pour situer : 38 px à l'origine (des étiquettes de trois mots),
puis 40 px pour coller à la page Thématiques, maintenant 25.
Sur la page Thématiques, 40 px se tient parce que le titre est suivi d'un
chapô et d'une rangée de visages : c'est l'en-tête d'un bloc. Ici la ligne
ne porte qu'elle-même, et une phrase de soixante signes à 40 px annonçait
plus qu'elle ne tenait.
Pour ajuster : changez les trois valeurs ensemble, en gardant le rapport —
le minimum sur téléphone, la respiration au milieu, le plafond sur grand
écran. Ex. un cran au-dessus : clamp(21px, 1.95vw, 30px). */
.theme-row__label{
font-size: var(--fs-lede);
font-weight: 500;
letter-spacing: var(--ls-tight);
}
.theme-row__arrow{
margin-left: auto;
font-size: 20px;
color: var(--ink-secondary);
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.theme-row:hover .theme-row__arrow{
opacity: 1;
transform: translateX(0);
color: var(--ink);
}
/* ---- 5.3bis Page Thématiques — les quatre enjeux et leurs conférenciers ----
Une section par enjeu : le titre cliquable, une phrase, puis les cartes.
Séparation par filet, comme partout ailleurs : rien au-dessus de la première
section, rien sous la dernière. */
/* AUCUN BLANC SOUS LA DERNIÈRE BANDE. Elle est grise, le bloc « Parlons de
votre événement » qui la suit est gris aussi, et il y avait 110 px de blanc
entre les deux — 78 de rembourrage ici, 32 de marge sur le bandeau d'appel.
Une bande blanche pour rien, à la fin de la page. Les deux gris se touchent
maintenant, et c'est le filet du bandeau d'appel qui les sépare. */
.enjeux{ padding-bottom: 0; }
.enjeux + .cta-band{ margin-top: 0; }
/* LA BANDE D'APPEL PREND L'INVERSE DE LA DERNIÈRE BANDE DE SUJETS. Collée à
elle et de la même couleur, elle n'en faisait qu'une : le lecteur voyait un
seul bloc gris de 700 px. En inversant, la coupure se fait toute seule, sans
filet ni blanc.
« :has() » lit le contenu : la règle demande « la dernière bande est-elle
grise ? ». Elle reste donc juste toute seule si vous ajoutez un septième
sujet et que l'alternance se retourne — rien à recalculer à la main. */
/* ⚠️ RETIRÉ le 30 septembre : la bande d'appel est désormais NOIRE sur tout
le site, avec un texte blanc. Ces deux règles lui redonnaient un fond clair
ici, et son texte devenait invisible (blanc sur ivoire). Le noir se
distingue de toute façon des bandes claires, il n'y a plus rien à inverser. */
/* Chaque enjeu est une BANDE pleine largeur, avec son propre fond. Les fonds
alternent gris puis blanc — exactement comme l'encart des sujets sur
l'accueil. Ce n'est pas une couleur par enjeu : une teinte différente par
thématique serait arbitraire (pourquoi la géopolitique en vert ?) et le
lecteur devrait apprendre un code qui ne lui apprend rien. Le gris qui
alterne ne prétend rien signifier — il découpe, c'est tout.
Le filet qui séparait deux enjeux a disparu : c'est le changement de fond
qui les sépare, et deux séparateurs valent moins qu'un. */
/* La MOITIÉ de la respiration entre sections de chaque côté : deux bandes qui
se touchent en laissent donc une entière entre leurs contenus, pas deux.
C'était --space-9, soit 64 px de part et d'autre : 128 px entre deux bandes
à 1440 px, contre 78 px partout ailleurs sur le site. */
.enjeu{ padding-block: calc(var(--section-y) / 2); }
/* IL Y AVAIT ICI une exception pour la première bande : --section-y sous
l'index, contre la moitié entre deux bandes. Ça faisait 96 px de blanc sous
le filet sur un grand écran, et la page démarrait dans le vide. La première
bande n'a plus rien de particulier : elle prend le même rembourrage que les
cinq autres, et le rythme est le même partout. */
.enjeu--gris{ background: var(--bg-subtle); }
/* ---------------------------------------------------------------------------
UN SUJET PAR ECRAN
---------------------------------------------------------------------------
Meme geste que sur les Formats, sur l'encart « Nos conferenciers » de
l'accueil et sur la page Conferenciers : une bande occupe la hauteur
VISIBLE, c'est-a-dire l'ecran moins les deux barres collantes — le bandeau
du haut et la barre des noms. « --index-h » est mesuree par le JavaScript,
qui la recalcule a chaque changement de largeur.
Ici les bandes portent une COULEUR en alternance. Leur donner la meme
hauteur les transforme en six panneaux egaux, et c'est tout l'interet : le
changement de couleur tombe toujours au meme endroit, au bas de l'ecran.
« min-height » et non « height » : quand une bande est plus grande que
l'ecran, elle garde sa taille. C'est le cas de toutes les bandes en dessous
de 1440 px de large — mesure a 1366 x 768, une bande fait 763 px pour 618
disponibles. La regle ne fait donc rien la ou il n'y a rien a faire, et elle
ne peut pas couper de contenu.
La taille des visages ne bouge pas : ils restent a 216 px, comme sur
l'accueil jusqu'a 900 px de hauteur d'ecran. Les faire grandir ici ferait
deborder les deux plus grandes bandes — mesure a 2000 x 1100 : 996 px de
contenu pour 950 px d'ecran. C'est la seule page du site ou la place manque.
⚠️ A partir de 1025 px seulement, comme les autres pages : en dessous, les
bandes depassent deja largement l'ecran.
--------------------------------------------------------------------------- */
@media (min-width: 1025px){
.enjeu{
min-height: calc(100vh - var(--header-h) - var(--index-h, 0px));
min-height: calc(100svh - var(--header-h) - var(--index-h, 0px));
display: flex;
flex-direction: column;
/* CENTRE, de nouveau. Un temps cale en haut, pour que le blanc d'un ecran
haut tombe en bas plutot que de se repartir. Mais le client veut que
chaque sujet OCCUPE son ecran et s'y adapte : le contenu est donc pose
au milieu, et ce sont les visages qui grandissent avec la hauteur de la
fenetre (regle ci-dessous, la meme que sur l'accueil), ce qui resorbe
le vide au lieu de le deplacer. */
justify-content: center;
}
/* LES VISAGES GRANDISSENT AVEC LA HAUTEUR DE L'ECRAN, comme sur l'accueil :
216 px jusqu'a 900 px de haut, puis 0,52 px par pixel de hauteur en plus,
320 px au plus. Le titre des sujets ayant retrouve une taille raisonnable,
la place est la : mesure a 2000 x 1100, le sujet le plus haut fait 800 px
pour 949 disponibles.
La largeur, elle, est bornee par le rail : quatre cartes doivent tenir
cote a cote, donc une carte ne depasse jamais le quart de la rangee, ecarts
deduits. C'est le « min() » de la flex-basis. */
.enjeu .minis--rangee{
--carte-l: clamp(216px, calc(216px + (100vh - 900px) * 0.52), 320px);
}
}
/* 600, la graisse de tous les grands titres du site. À 500, ces six titres-là
étaient les seuls à chuchoter. */
.enjeu__titre{
margin: 0;
/* Un cran au-dessus des autres titres de section du site. Ces six-là sont la
structure de la page, pas des intertitres : à --fs-3 ils pesaient moins que
la rangée de portraits posée dessous. */
font-size: var(--fs-2);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
text-wrap: balance;
}
/* Le dernier mot et sa flèche ne se séparent jamais.
Une flèche est un « bloc en ligne » (il lui faut ça pour glisser au survol) :
le navigateur s'autorise à couper juste avant elle, même sans espace. Sur un
titre qui remplit sa ligne, elle tombait donc toute seule au début de la
suivante. La solidariser avec le dernier mot est le seul remède fiable.
⚠️ Plus aucun titre du site n'a de flèche : cette enveloppe ne sert donc
nulle part aujourd'hui. On la garde parce qu'elle est le remède éprouvé —
si vous remettez une flèche dans un titre un jour, reprenez-la. */
.sans-coupure{ white-space: nowrap; }
/* Les six titres d'enjeu ne sont plus des liens : ce sont des titres, et le
lien vers la page complète est le texte souligné posé sous le sous-titre
(classe « tete-voir »), exactement comme sur l'accueil. C'était le dernier
endroit du site où une flèche annonçait un lien.
Le bloc qui réglait ici la flèche du titre et son survol a donc été retiré :
il ne s'appliquait plus à rien. */
/* IL Y AVAIT ICI « .enjeu .minis { margin-top: 48px } », et c'était un double
compte. Les six rangées de cette page sont des « .minis--rangee », dont la
marge haute est portée par « .etagere » : les deux s'additionnaient. Mesuré
sous 1025 px : 93 px entre le lien et la première photo, pour une respiration
entre sections qui vaut 52 px sur téléphone. */
/* La colonne de lecture. Au-delà de --reading-max, l'œil perd sa ligne en
revenant à la gauche. Mesuré sans elle, à 900 px de large : 93 caractères.
C'est vrai à toutes les largeurs, d'où sa place ici et non dans le bloc
« ordinateur » plus bas.
Le chapô est BORNÉ, il n'est pas centré : son bord gauche reste celui du
titre et du lien. */
.enjeu .tete-section__soustitre{ max-width: var(--reading-max); }
/* Effet de bord à neutraliser : sous 1025 px, la tête de bande est une rangée
en flex, et une rangée en flex donne à son unique élément la largeur de son
contenu. En bornant le paragraphe à 62 caractères, on bornait donc aussi le
TITRE — mesuré à 900 px : 558 px au lieu de 836, et des titres qui gagnaient
une ligne. La largeur pleine rend au titre ce qui est au titre. */
.enjeu .tete-section__titre{ width: 100%; }
/* ---------------------------------------------------------------------------
LES BANDES, SUR ORDINATEUR : UNE SEULE COLONNE, UN SEUL BORD GAUCHE.
C'était le titre et le texte à gauche, les visages à droite ; puis tout
centré sur un axe. Ni l'un ni l'autre. Une bande est maintenant UNE COLONNE
de la largeur du rail des fiches, centrée dans la page, et tout ce qu'elle
contient part du même bord gauche : le titre, le chapô, le lien, la première
photo, chaque nom. Il n'y a AUCUN « text-align: center » sur cette page en
dehors du sommaire du haut.
Un seul bord gauche, c'est une seule ligne où l'œil revient. Un axe central
en demande deux, et rien ne s'aligne vraiment sur un texte de longueur
variable.
--------------------------------------------------------------------------- */
@media (min-width: 1025px){
/* Le rail des fiches, pas la pleine colonne de contenu. Mesuré à 2000 px :
le contenu d'une fiche va de 432 à 1568 px, une bande allait de 280 à
1720 — 152 px d'air en moins de chaque côté. Les deux pages respirent
maintenant pareil, et c'est le jeton existant qui le dit.
C'est « .container » qui porte déjà « margin-inline: auto » : la colonne
est donc centrée, son contenu ne l'est pas. */
.enjeu .container{
max-width: calc(var(--rail-max) + var(--margin-x) * 2);
}
.enjeu .tete-section{ display: block; }
.enjeu .tete-section--filet{ border-bottom: 0; padding-bottom: 0; }
/* Sans ça, la rangée garde une marge droite d'une largeur de marge de page :
les quatre cartes ne rempliraient pas la colonne. */
.enjeu .etagere{ padding-right: 0; }
/* UNE SEULE TAILLE DE CARTE CONFÉRENCIER SUR TOUT LE SITE : 216 px, la même
que sur la rangée de l'accueil.
Les cartes se partageaient la largeur du rail — « (100% - 3 écarts) / 4 ».
Résultat mesuré : 232 px sur un grand écran, mais 172 px à 1025 px de
large, et un saut de 172 à 216 px en franchissant 1024 px vers le bas. Une
carte conférencier changeait donc de taille selon la page ET selon la
fenêtre, avec une marche au milieu.
Une largeur fixe supprime les trois défauts d'un coup. La contrepartie est
assumée : entre 1025 et environ 1290 px, quatre cartes de 216 px ne tiennent
plus dans le rail et la rangée redevient défilante, avec ses flèches —
exactement comme la rangée de l'accueil, qui est le même objet.
La largeur est écrite en clair et non calculée : c'est « flex-basis », qui
l'emporte sur la largeur prévue pour le filet vertical entre deux cartes,
filet qu'on retire juste en dessous. */
.enjeu .minis--rangee > .mini{
flex: 0 0 min(var(--carte-l), calc((100% - 3 * var(--space-5)) / 4));
}
/* Pas de filet vertical entre les cartes : il décalerait la première d'une
largeur de trait par rapport au titre. */
.enjeu .minis--rangee > .mini + .mini{
padding-left: 0;
border-left: 0;
}
}
/* Les conférenciers rattachés à l'enjeu, en petites cartes.
La grille se remplit toute seule : 5 cartes ou 2, la mise en page tient. */
.minis{
display: grid;
/* Des cartes de largeur bornée (196 à 232 px) plutôt que des colonnes
élastiques : avec deux cartes sous un enjeu et trois sous le suivant,
les cartes gardent la même taille d'un enjeu à l'autre. */
grid-template-columns: repeat(auto-fill, minmax(196px, 232px));
gap: var(--space-6) var(--space-5);
margin-top: var(--space-6);
}
.mini{
display: block;
text-decoration: none;
color: inherit;
}
/* La photo. Format portrait 4/5, comme les cadres vidéo du site.
Le fond gris reste visible tant qu'aucune photo n'est déposée. */
.mini__photo{
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
background: var(--bg-subtle) center/cover no-repeat;
overflow: hidden;
}
/* Les initiales, affichées seulement quand la photo manque : dès qu'une image
de fond est posée par le JavaScript, la classe « photo-vide » est retirée.
La même règle sert aux couvertures de livres. */
.mini__photo.photo-vide::before,
.portrait.photo-vide::before,
.pub-cover__img.photo-vide::before{
content: attr(data-initiales);
font-size: var(--fs-lede);
font-weight: 500;
letter-spacing: var(--ls-label);
color: var(--ink-tertiary);
}
/* L'enjeu principal, au-dessus du nom. C'est la seule autre chose que les
boutons à porter le rouge d'identité : il classe la personne avant même
qu'on lise son nom, et il relie la collection aux six enjeux — deux systèmes
qui s'ignoraient.
Le libellé est COURT exprès (« Souveraineté », pas « La souveraineté ne se
décrète pas, elle s'organise ») : un titre en phrase, en capitales, sur une
carte de 232 px, serait illisible.
Ce n'est pas un lien : la carte entière en est déjà un, et on n'imbrique pas
deux liens l'un dans l'autre. */
/* ⚠️ L'ETIQUETTE AU-DESSUS DU NOM N'EST PLUS DANS LE HTML DE L'ACCUEIL.
Elle disait Economie, Prospective, Anthropologie, Philosophe... : quatre de
ces sept mots n'etaient pas dans les six sujets du site, et « Philosophe »
est un metier, pas un sujet. Une taxonomie qui ne vient pas d'une liste
unique ne classe rien. Et la ligne de fonction juste en dessous disait deja
tout. La regle reste, au cas ou l'etiquette revienne — avec les VRAIS
sujets, cette fois. */
.mini__enjeu{
display: block;
margin-top: var(--space-4);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--accent);
}
.mini__nom{
display: block;
/* 16 px et non 8 : c'est l'ecart que l'etiquette posait entre la photo et
le nom. L'etiquette est partie, le nom reprend sa place. */
margin-top: var(--space-4);
/* SUIT LA LARGEUR DE LA CARTE, et non l'ecran. Sur l'accueil la carte passe
de 216 a 320 px avec la hauteur de la fenetre — le nom restait a 17 px et
rapetissait donc par rapport a la photo qu'il legende.
« --carte-l » est posee sur la rangee ; la valeur de secours 216px protege
les endroits ou la variable n'existe pas. Sur la page Sujets, ou la carte
vaut toujours 216, le calcul retombe sur le plancher : rien n'y change. */
font-size: clamp(17px, calc(var(--carte-l, 216px) * 0.062), 20px);
font-weight: 500;
letter-spacing: var(--ls-tight);
}
/* La ligne sous le nom, sur la page « Nos sujets ». Elle porte la QUESTION du
conférencier — la même que celle affichée sur sa boucle vidéo de l'accueil.
Les conférenciers qui n'ont pas encore de question n'ont pas cette ligne du
tout : une carte sans phrase vaut mieux qu'une phrase inventée. */
.mini__bio{
display: block;
margin-top: var(--space-2);
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* La fonction, sous le nom, sur les rangees de l'accueil et de la page Sujets.
ELLE ETAIT EN SERIF, pour dire « ceci se lit, ce n'est pas une etiquette ».
L'intention etait juste, le moyen s'est retourne : a force d'etre la seule
chose en serif sur ces pages, le serif ne disait plus « lisez-moi », il
faisait ornement. Il est parti aux textes longs (voir la note « LES DEUX
POLICES ONT ECHANGE LEUR ROLE »), et cette ligne redevient en sans.
Ce qui la distingue du nom au-dessus n'a pas disparu pour autant : elle est
plus petite, plus claire, et sans graisse. */
.mini__role{
display: block;
margin-top: var(--space-2);
/* Suit la carte comme le nom au-dessus : voir « .mini__nom ». */
font-size: clamp(15px, calc(var(--carte-l, 216px) * 0.055), 17px);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* La rangée de l'accueil : UNE SEULE LIGNE qui défile latéralement.
C'était une grille de trois lignes de trois. Elle mesurait 2 073 px de haut
sur une page d'accueil qui en fait 7 775 : plus du quart de la page, pour
redire ce que la page Conférenciers dit mieux, et juste après cinq écrans
vidéo plein format. La ligne unique en fait environ 420.
Le nombre de conférenciers n'a plus d'importance : on peut en ajouter dix,
la rangée s'allonge vers la droite. Il n'y a plus de « chiffre qui divise
juste » à recalculer à chaque arrivée.
Ce n'est pas la grille qui défile : c'est son cadre .etagere (le même que
celui des livres, plus bas). Ici on ne décrit que la piste. */
/* La largeur d'une carte est une VARIABLE, et non un nombre ecrit trois fois.
Trois regles en dependent : la carte, la carte qui suit un filet (qui doit
ajouter le filet et son ecart), et la version telephone. Les faire varier
ensemble depuis un seul endroit evite qu'une des trois soit oubliee. */
.minis--rangee{
--carte-l: 216px;
display: flex;
gap: var(--space-5);
/* La marge haute est portée par .etagere, sinon elle compterait deux fois. */
margin-top: 0;
}
/* 232 px, c'est la largeur maximale que les cartes avaient déjà dans la
grille : elles ne changent pas de taille, elles changent de disposition.
flex: 0 0 auto — sans lui, les neuf cartes se comprimeraient pour tenir dans
la largeur au lieu de déborder, et il n'y aurait rien à faire défiler.
scroll-snap-align — chaque carte vient se caler proprement au bord gauche
quand on relâche le geste ; on ne s'arrête jamais sur un demi-visage. */
.minis--rangee > .mini{
flex: 0 0 auto;
width: var(--carte-l);
scroll-snap-align: start;
}
/* Un filet vertical entre deux cartes. Avec quatre lignes de gris par carte,
les colonnes se rejoignaient à l'œil ; le trait les sépare franchement et
transforme une bande d'images en une liste de personnes.
La largeur de la carte est augmentée du filet et de son écart, pour que la
PHOTO garde exactement la même largeur d'une carte à l'autre — sans ça, la
première serait plus large que les huit suivantes. */
/* IL Y AVAIT ICI UN FILET VERTICAL ENTRE LES CARTES. Les photos, sur fond
noir, delimitent deja chaque carte : le filet ne faisait que rayer la rangee.
Le rembourrage de gauche reste — c'est lui qui fait l'ecart entre deux
cartes. */
.minis--rangee > .mini + .mini{
padding-left: var(--space-5);
width: calc(var(--carte-l) + var(--space-5));
}
/* Sur téléphone, des cartes un peu plus étroites : on en voit deux, plus le
bord de la troisième. Ce bord coupé est ce qui dit « il y en a d'autres » —
sans lui, personne ne devine qu'on peut faire glisser. */
@media (max-width: 640px){
.minis--rangee{ --carte-l: 168px; }
/* L'écart après le filet passe de 24 à 16 px : sur un écran de téléphone,
chaque pixel repris au blanc est un pixel de visage en plus. */
.minis--rangee > .mini + .mini{
padding-left: var(--space-4);
width: calc(var(--carte-l) + var(--space-4));
}
}
/* ---------------------------------------------------------------------------
LES VISAGES GRANDISSENT AVEC LA HAUTEUR DE L'ECRAN — accueil seulement
---------------------------------------------------------------------------
L'encart « Nos conferenciers » de l'accueil occupe un ecran entier
(.section--plein). Sur un ecran haut, son contenu ne mesurait toujours que
617 px : toute la hauteur gagnee partait en blanc. Mesure a 2000 x 1100 :
204 px de blanc au-dessus, 204 px en dessous, pour une rangee de visages de
270 px de haut. La place allait au vide plutot qu'aux visages.
Ici la carte grandit donc avec la hauteur DISPONIBLE, et elle seule :
- en dessous de 900 px de haut, rien ne change (216 px, exactement la
taille des cartes de la page Sujets — les deux pages restent jumelles
sur un portable ordinaire) ;
- au-dela, la carte gagne un peu plus d'un demi-pixel par pixel de
hauteur d'ecran ;
- plafond a 320 px, atteint vers 1100 px de haut. Sans ce plafond, les
visages de l'accueil finiraient deux fois plus grands que partout
ailleurs sur le site, et l'accueil ne ressemblerait plus au reste.
Le titre et le chapo ne bougent PAS. Ce sont les memes objets que sur les
autres pages ; un titre qui change de taille selon l'ecran serait le seul du
site a le faire. Une photo qui occupe la place qu'on lui donne est normale,
un texte qui enfle ne l'est pas.
Bornee a 641 px de large et plus : en dessous, c'est la regle telephone
ci-dessus qui commande (168 px), et elle doit rester la plus forte.
--------------------------------------------------------------------------- */
@media (min-width: 641px){
.section--plein .minis--rangee{
/* Le « min() » borne par la LARGEUR : depuis que l'accueil est sur le
rail, quatre visages doivent tenir cote a cote. Sans cette borne, a
2000 x 1100 les cartes montaient a 320 px et on ne voyait plus que trois
visages et un bord.
La largeur reelle du rail est le plus petit de « --rail-max » et de
l'ecran moins ses deux marges (a 1280, c'est 947 px, pas 1000). Et
l'ecart entre deux visages vaut DEUX fois --space-5 : le gap de la
rangee plus le rembourrage gauche de chaque carte (voir plus bas). */
--carte-l: min(clamp(216px, calc(216px + (100vh - 900px) * 0.52), 320px),
calc((min(var(--rail-max), 100vw - 2 * var(--margin-x)) - 6 * var(--space-5)) / 4));
}
}
/* Au survol, c'est la photo qui répond — un léger rapprochement, rien de plus.
Le nom se souligne pour dire que toute la carte est cliquable. */
.mini__photo{ transition: opacity var(--t-fast) var(--ease); }
.mini:hover .mini__photo{ opacity: 0.86; }
.mini:hover .mini__nom{ text-decoration: underline; text-underline-offset: 3px; }
/* En-tête de section : le titre à gauche, et à droite ce qui commande la
section — des flèches, un lien « voir tout ». Sert à plusieurs blocs. */
.tete-section{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}
/* Le filet ne sépare plus les encarts les uns des autres : il souligne la
TÊTE de chaque encart, sous le titre et son sous-titre. La différence n'est
pas décorative — un trait entre deux blocs dit « ici finit quelque chose »,
un trait sous un titre dit « ce qui suit appartient à ce titre ».
La classe est explicite (et non posée sur toutes les .tete-section) parce que
les fiches profil en ont une aussi, pour « Dans les médias », qui n'a ni
sous-titre ni besoin de filet. */
/* ⚠️ LES TITRES D'ENCART DE L'ACCUEIL NE SONT PLUS CLIQUABLES, et la rangée
des conférenciers n'a plus de carte de sortie en bout de course.
Ce qui mène à la page complète, c'est le lien souligné sous le sous-titre
(.tete-voir), et lui seul — un seul chemin, visible sans survol.
Les règles .tete-lien (titre cliquable) et .mini--tout (carte de fin de
rangée) ont donc été retirées d'ici. */
/* ⚠️ LE FILET N'EST PLUS DESSINE. Le bord haut des portraits, noir sur fond
clair, trace deja cette ligne — plus fort qu'un trait d'un pixel. Et le lien
souligne juste au-dessus faisait un deuxieme trait a trente pixels du
premier. La classe reste sur les tetes d'encart : elle ne porte plus que le
rembourrage du bas, qui fait l'ecart avec la rangee. Pour remettre le trait :
border-bottom: 1px solid var(--hairline). */
.tete-section--filet{
padding-bottom: var(--space-5);
}
/* Les deux titres d'encart de l'accueil restent cliquables, mais sans flèche :
c'est le lien texte juste en dessous qui dit où l'on va. Le soulignement au
survol du titre reste — une trouvaille pour qui essaie de cliquer dessus,
plus le signal principal. */
/* Le lien texte sous le sous-titre. Souligné EN PERMANENCE, contrairement à
tout le reste du site : c'est un lien, pas un titre, et il doit se voir sans
qu'on ait à survoler. C'est lui qui remplace la flèche.
Aligné à gauche, sous la phrase — là où l'œil termine sa lecture. */
/* Sa taille suit le titre au-dessus : voir « --fs-suite ». */
/* ⚠️ LE LIEN « VOIR LES 9 CONFERENCIERS », SOUS LE CHAPO.
Il etait gros (21 px), gris et souligne en permanence : lourd par la taille,
faible par la couleur, et le seul soulignement permanent du site. Un essai
l'a mis a droite du titre, a cote des chevrons : pas au bon endroit. Il
reste donc sous le chapo, la ou l'oeil finit sa lecture, mais avec sa
nouvelle forme : 15 px, noir, graisse moyenne, souligne seulement au
survol. Toujours visible, mais fin. */
.tete-voir{
display: inline-block;
/* Meme ecart que celui du chapo au-dessus : les trois lignes du bloc de
titre respirent du meme pas, quelle que soit la taille de l'ecran. */
margin-top: var(--space-tete);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: var(--ls-none);
color: var(--ink);
text-decoration: none;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.tete-voir:hover{ text-decoration: underline; }
/* Dans un bandeau de couleur, le lien passe au BLANC. En noir d'encre sur le
bordeaux, il était illisible — c'est la seule couleur de texte du site qui ne
survit pas au changement de fond.
Son soulignement est légèrement retenu au repos et devient franc au survol :
sur un aplat sombre, un trait blanc plein tire trop l'œil. */
.bandeau .tete-voir{
color: #fff;
text-decoration-color: var(--on-media-3);
}
.bandeau .tete-voir:hover{
color: #fff;
text-decoration-color: #fff;
text-decoration-thickness: 2px;
}
/* Le titre et son sous-titre voyagent ensemble à gauche ; le lien reste à
droite, aligné sur la première ligne du titre. */
/* 80ch et non 64. À 64, la phrase « Ils ont passé dix ans sur un sujet pour que
vous le compreniez en une heure. » remplissait la ligne au pixel près : une
lettre de plus et elle se coupait en deux. Une phrase d'encart doit tenir sur
une ligne, et avoir de la marge pour être retouchée sans tout casser. */
.tete-section__titre{ max-width: 80ch; }
/* ---------------------------------------------------------------------------
LE TITRE D'UN ENCART MONTE D'UN CRAN DANS L'ECHELLE
---------------------------------------------------------------------------
« Nos conferenciers » sur l'accueil et « Pour une IA porteuse d'espoir » sur
la page Sujets sont le MEME objet : un titre, un chapo, un lien, une rangee
de visages. Ils n'avaient pourtant pas la meme taille — le titre de bande
etait ecrit en « --fs-2 » et celui de l'accueil au cran en dessous. Mesure a
2000 px de large : 58 px d'un cote, 48 de l'autre, pour deux blocs qui se
ressemblent trait pour trait.
Ce n'etait pas une decision, c'etait un heritage : le titre de bande a recu
sa taille propre, celui de l'accueil est reste au « h2 » general du site.
La regle ne touche QUE le titre d'un bloc de tete. Le « h2 » general ne
bouge pas, et avec lui les noms de conferenciers, les titres de rubrique du
pied de page et « Parlons de votre evenement » — qui sont d'autres objets.
Consequence chiffree, de 1024 px a 2000 px de large : le titre d'encart de
l'accueil passe de 31-48 px a 35-58 px. Les titres de bande de la page
Sujets ne changent pas d'un pixel : ils etaient deja a cette taille, la
regle leur redonne exactement la meme valeur.
--------------------------------------------------------------------------- */
.tete-section__titre h2{ font-size: var(--fs-2); }
/* Le sous-titre : il dit POURQUOI ces gens-là sont ensemble. Sans lui, un
bloc de la page d'accueil n'est qu'une liste.
C'est ici que le serif entre en scène : une ligne posée sous un titre très
noir, en gris et dans une autre famille, se lit comme une voix qui commente
— pas comme une deuxième étiquette. */
.tete-section__soustitre{
/* Voir « --space-tete » : cet ecart suit la taille du titre au-dessus. */
margin: var(--space-tete) 0 0;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* Les flèches des deux étagères de l'accueil — les conférenciers et les
livres — sont SOUS leur rangée et alignées à DROITE. Dans le titre, elles se
disputaient la place avec le lien « Voir tous les profils » ; sous la
rangée, elles tombent là où le regard arrive quand il a fini de la parcourir,
du côté où elle continue.
.etagere__nav est déjà une boîte flex : il suffit de pousser son contenu au
bout. */
.etagere__nav--sous{
margin-top: var(--space-4);
justify-content: flex-end;
}
/* Les flèches sont remontées dans la tête de section, en haut à droite.
Sous la rangée, elles occupaient une ligne entière pour deux boutons de
40 px : environ 60 px de blanc par encart, quatre fois sur la page.
« align-self: flex-end » plutôt que la ligne de base : la tête aligne ses
deux enfants sur la première ligne du titre, ce qui plaçait les flèches
très haut, loin du filet ; on les pose plutôt en bas du bloc, juste
au-dessus du filet, à hauteur de la dernière ligne du sous-titre. */
.tete-section > .etagere__nav{
align-self: flex-end;
flex: 0 0 auto;
}
/* Quand la tête porte un lien texte, ses chevrons se posent à hauteur du
SOUS-TITRE et non du lien. Alignés en bas, ils se retrouvaient sur la même
ligne que « Voir les 9 conférenciers », aux deux extrémités : deux appels à
l'action en vis-à-vis, donc en concurrence.
On les remonte de la hauteur exacte du lien — son écart du dessus (14 px)
plus sa ligne (19 px).
⚠️ Si vous changez la taille du lien, changez ce nombre avec.
Les têtes sans lien (Leurs Livres, Témoignages) n'ont pas cette classe :
leurs chevrons restent en bas, où il n'y a rien à éviter. */
/* Le lien fait maintenant 15 px : sa ligne (20 px) plus son ecart du dessus
(12 a 20 px). Les chevrons remontent d'autant pour rester a hauteur du chapo,
et non du lien. */
.tete-section--avec-lien > .etagere__nav{ margin-bottom: calc(20px + var(--space-tete)); }
/* ---- 5.3ter Étagère de livres (accueil) ------------------------------------
Une rangée qui défile latéralement. Le défilement est natif : on peut aussi
glisser au doigt, au trackpad, ou avec la molette horizontale. Les flèches
ne sont qu'un raccourci — elles disparaissent si tout tient à l'écran. */
.etagere__nav{ display: flex; gap: var(--space-5); }
/* Sur un écran tactile, les flèches disparaissent.
Elles n'ont jamais été qu'un raccourci à la souris : au doigt, on fait
glisser la rangée, et c'est plus rapide que de viser un bouton de 40 px.
La règle teste la PRÉSENCE D'UNE SOURIS (hover: none), pas la largeur de
l'écran : une petite fenêtre sur un ordinateur garde ses flèches, et une
grande tablette n'en a pas — ce qui est le bon critère dans les deux cas.
C'est aussi ce qui règle le problème de place sur téléphone : « Les
Conférenciers » et deux flèches demandaient 410 px de large pour 342 px
disponibles.
Cette règle DOIT rester après « .etagere__nav{ display: flex } » : à
spécificité égale, c'est la dernière écrite qui gagne. */
@media (hover: none){
.etagere__nav{ display: none; }
}
.etagere{
/* L'écart entre le filet de la tête et la première carte. C'était 64, puis 32.
À 24, le filet et la rangée se lisent comme un seul objet. */
margin-top: var(--space-5);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
/* La barre de défilement est masquée : la rangée doit rester un objet
éditorial, pas un composant d'interface. Le geste, lui, reste possible. */
scrollbar-width: none;
/* De quoi laisser respirer la dernière carte contre le bord de la page. */
padding-right: var(--margin-x);
}
/* Une étagère qui ne défile pas — une seule citation — n'a pas de « dernière
carte » à protéger. Ce rembourrage de fuite lui rétrécit alors sa boîte par
la droite, et tout ce qu'on y centre se retrouve décalé vers la gauche : à
1440 px, la citation tombait 94 px à gauche du milieu de la page. */
.etagere--centree{ padding-right: 0; }
.etagere::-webkit-scrollbar{ display: none; }
/* IL Y AVAIT ICI UN FONDU AU BORD DE LA RANGEE (un masque en degrade qui
effacait la carte coupee). Essaye a 72, 40 puis 24 px : a chaque fois il se
voyait comme un objet, une bande claire sur la photo, et il faisait date.
La rangee se coupe a vif au bord du conteneur, comme chez ceux qui font les
rangees les plus propres. */
/* ---- Ou s'affiche la commande « Ecouter » sur l'accueil ---------------------
Ordinateur : le bouton « Ecouter l'extrait » du bloc de texte, et la
pastille des commandes est masquee. Telephone : l'inverse — la pastille, a
cote de la pause, en haut a gauche, et le bouton du bloc de texte est
masque. Deux commandes pour la meme chose sur un petit ecran, c'etait une
de trop. */
@media (min-width: 641px){
.vhero--accueil .vscreen__cmds .vscreen__son{ display: none; }
}
@media (max-width: 640px){
/* Ecrit avec cette lourdeur pour peser plus que la regle « le bouton devient
un lien souligne » de la partie telephone, qui pose elle aussi « display ». */
.vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son]{ display: none; }
/* Le lien « Voir ... » heritait de l'ecart prevu ENTRE deux boutons (32 px a
gauche) alors que le premier est cache : il se retrouvait decale du bord,
desaligne de la question au-dessus. */
.vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son] + .btn{ margin-left: 0; }
/* La question et son lien restent ENSEMBLE : le lien suit la question a
24 px, au lieu d'etre pousse tout en bas du bloc (jusqu'a 80 px d'air
quand la question tient en deux lignes). Ce sont les traits de position
qui prennent la place libre et restent cales en bas, a la meme hauteur
d'un ecran a l'autre. */
.vhero:not(.vhero--bande) .vscreen__cta{
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
margin-top: 0;
padding-top: var(--space-5);
}
.vhero:not(.vhero--bande) .vscreen__cta .vscreen__pagin{
margin-top: auto;
padding-top: var(--space-7);
}
}
.etagere__piste{
display: flex;
gap: var(--space-8);
margin: 0;
padding: 0;
list-style: none;
}
/* ---- 5.3quater Bande podcast (accueil) ------------------------------------- */
.podcast{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9) var(--space-10);
flex-wrap: wrap;
}
/* margin-top nul : le titre ouvre le bloc, il n'y a plus d'étiquette
au-dessus de lui. Un écart résiduel décalerait le texte vers le bas par
rapport à la pochette, les deux étant centrés l'un sur l'autre. */
.podcast__titre{
margin: 0;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: var(--ls-title);
}
.podcast__chapo{
/* Meme piege que « .sec-body » : la largeur en signes etait calculee sur une
police figee. Elle part du meme 578 px et suit l'ecran. */
max-width: clamp(578px, 30vw, 700px);
margin: var(--space-5) 0 0;
/* Suit le titre du bandeau, qui va de 28 a 48 px. */
font-size: var(--fs-suite);
line-height: var(--lh-read);
color: var(--ink-secondary);
text-wrap: pretty;
}
.podcast__liens{ display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
/* La pochette et le texte forment un seul groupe : sans ça, le « space-between »
de .podcast les aurait écartés l'un de l'autre au lieu de les tenir ensemble
face aux liens. */
.podcast__intro{
display: flex;
align-items: center;
gap: clamp(24px, 2.4vw, 40px);
}
/* Pochette carrée — le format de toutes les plateformes de podcast. */
.podcast__couv{
flex: 0 0 auto;
width: clamp(104px, 10vw, 148px);
aspect-ratio: 1 / 1;
background-color: var(--bg-subtle);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid var(--hairline);
/* flex seulement pour centrer le repli tant que l'image n'est pas déposée. */
display: flex;
align-items: center;
justify-content: center;
}
.podcast__couv.photo-vide::before{
content: attr(data-initiales);
font-size: var(--fs-sm);
letter-spacing: var(--ls-label);
color: var(--ink-tertiary);
}
@media (max-width: 640px){
/* Sur téléphone la pochette passe au-dessus du texte plutôt que de le
comprimer sur la moitié de l'écran. */
.podcast__intro{ flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}
/* Les plateformes secondaires : des liens, pas des boutons. Un seul bouton
par bloc, c'est la règle du site. */
.lien-plateforme{
font-size: var(--fs-body);
color: var(--ink-secondary);
text-decoration: underline;
text-underline-offset: 4px;
}
.lien-plateforme:hover{ color: var(--ink); }
/* ---- 5.3quinquies Arguments texte + photo (accueil) -------------------------
Deux rangées, sens inversé une rangée sur deux — même principe que les
entrées de la page Conférenciers. */
.argument{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(40px, 5vw, 88px);
}
.argument + .argument{ margin-top: var(--section-y); }
/* On inverse par l'ordre d'affichage, jamais par un changement de balise :
l'ordre de lecture à voix haute reste titre, texte, image. */
.argument--inverse .argument__media{ order: -1; }
.argument__titre{
margin: 0 0 var(--space-6);
font-size: var(--fs-3);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
text-wrap: balance;
}
.argument__texte p{
margin: 0 0 var(--space-5);
max-width: 52ch;
font-size: var(--fs-body);
line-height: var(--lh-read);
color: var(--ink-secondary);
text-wrap: pretty;
}
.argument__texte p:last-child{ margin-bottom: 0; }
.zone-photo{
display: block;
aspect-ratio: 3 / 2;
background: var(--bg-subtle) center/cover no-repeat;
}
/* ---- 5.3sexies FAQ ---------------------------------------------------------
REFONTE DU 17 SEPTEMBRE : une liste OUVERTE, plus d'accordeon. La question
en gras, la reponse en serif dessous, sur toute la largeur du rail — le
meme rail et les memes marges que Formats et Sujets. Ni grand titre, ni
chapo, ni titres de groupe : la page commence par sa premiere question.
Entre deux questions, 48 px : assez pour les separer, pas de quoi faire
defiler pour rien. (Une premiere version indentait les questions et les
espacait de 96 px, sur la largeur de contenu generale : trop de vide.) */
.faq-page{ padding-block: calc(var(--section-y) / 2) var(--space-10); }
@media (min-width: 1025px){
.faq-page{ max-width: calc(var(--rail-max) + var(--margin-x) * 2); }
}
.qa + .qa{ margin-top: var(--space-7); }
.qa__q{
margin: 0;
font-size: var(--fs-4);
font-weight: 700;
letter-spacing: var(--ls-title);
line-height: var(--lh-tight);
/* « pretty » et non « balance » : balance coupait une question en deux
lignes de longueur egale alors que la premiere avait la place de
continuer — ca se lisait comme une coupure au hasard. */
text-wrap: pretty;
}
.qa__r{
margin: var(--space-3) 0 0;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
color: var(--ink);
}
.qa__r a{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.qa__r a:hover{ text-decoration-thickness: 2px; }
@media (max-width: 640px){
.faq-page{ padding-top: var(--space-7); }
.qa + .qa{ margin-top: var(--space-6); }
}
/* ---- 5.3septies Page Formats ----------------------------------------------
Huit formats, en grille. Chaque entrée porte son nom, une ligne qui dit ce
que c'est, puis le détail. */
/* ⚠️ LE NOMBRE DE COLONNES EST PLAFONNE A TROIS, plus bas dans ce bloc.
Sans ce plafond, la page allait a l'envers : plus l'ecran etait large, plus
chaque format etait ETROIT, parce que la grille ajoutait une colonne au lieu
d'elargir celles qui existaient. Mesure : 387 px de large a 1800, puis 300 px
a 2000. Le plafond supprime cette marche. */
/* ---- 5.6 LA PAGE FORMATS ---------------------------------------------------
C'ETAIT huit blocs identiques dans une grille. Ils repondaient a « qu'est-ce
qu'un debat ? », alors que l'organisateur arrive avec « j'ai une convention
de six cents personnes, qu'est-ce que je reserve ? ». Huit cases egales ne
l'aident pas a trancher : aucune ne compte plus qu'une autre.
C'est maintenant une CARTE, au sens d'une carte de restaurant. Trois groupes
classes par SALLE — sur scene, en petit comite, a distance — et, dans chaque
groupe, une ligne par format en trois colonnes : le nom, ce que c'est, et la
fiche technique. C'est cette troisieme colonne qui fait tout le travail :
elle transforme une definition en aide a la decision.
AUCUNE IMAGE, ET C'EST VOULU. Les autres pages sont portees par des visages
parce qu'elles parlent de personnes ; celle-ci parle de logistique. Une photo
d'evenement generique y sonnerait faux. Le site est typographique, cette page
l'est aussi.
ELLE N'OCCUPE PLUS EXACTEMENT UN ECRAN, et c'est normal : elle avait ce
plancher quand elle etait une grille a remplir. Elle a maintenant une tete,
trois groupes et huit lignes — de quoi se lire, pas de quoi etre gonflee.
(Elle depassait deja l'ecran sur tous les portables : mesure, 1 125 px de
contenu pour 724 disponibles a 1280 x 800.)
--------------------------------------------------------------------------- */
/* En haut, LA MOITIE de la respiration entre sections : la page n'a pas de
titre visible (voir formats.html), elle commence par sa premiere categorie.
C'est la meme regle que la page Conferenciers, qui commence par sa premiere
fiche — et le meme blanc. */
.formats{ padding-block: calc(var(--section-y) / 2) var(--space-10); }
/* LA MEME COLONNE QUE LA PAGE SUJETS. La page prenait la largeur de contenu
generale (jusqu'a 1 680 px) ; elle prend maintenant le rail de lecture
(1 000 a 1 120 px), comme les bandes de Sujets — meme largeur, memes marges,
meme x pour le bord gauche. */
@media (min-width: 1025px){
.formats{ max-width: calc(var(--rail-max) + var(--margin-x) * 2); }
/* ---- L'ACCUEIL SUR LE RAIL, LUI AUSSI --------------------------------------
C'etait la derniere page sur la colonne large (1 320 a 1 680 px), quand
Conferenciers, Sujets et Formats sont sur le rail (1 000 a 1 120). A 1440
l'ecart etait faible (1 066 contre 1 000) ; a 2000 il sautait aux yeux
(1 440 contre 1 040) : l'accueil s'etalait, les autres pages non.
Tout ce qui suit le heros prend donc le rail : titres, chapos et liens
s'alignent au pixel sur ceux de la page Sujets, les fonds gris restent
pleine largeur avec leur contenu dans le rail, comme les bandes de Sujets.
Le heros n'est pas concerne : il n'a pas de « .container », il est
pleine largeur par construction. Le pied de page non plus.
Consequence assumee : sur un grand ecran, la rangee des neuf visages en
montre trois ou quatre au lieu de cinq — elle defile, c'est son travail.
POUR REVENIR A LA COLONNE LARGE : supprimer cette regle. */
body:has(.vhero--accueil) main .container{
max-width: calc(var(--rail-max) + var(--margin-x) * 2);
}
}
/* Un groupe : son titre AU-DESSUS de ses formats, comme sur une carte de
restaurant — et non plus dans une colonne a gauche. C'est une vraie section :
titre, ligne qui dit pour quelle salle, filet, puis la liste.
IL Y AVAIT ICI une grille a deux colonnes, l'etiquette a gauche en petites
capitales bordeaux. Trop discret pour ce que c'est — une CATEGORIE
d'evenement, la premiere question que se pose l'organisateur — et la colonne
mangeait 180 a 240 px de largeur pour trois lignes de texte. */
.fgroupe{ display: block; }
.fgroupe + .fgroupe{ margin-top: var(--space-11); }
/* La tete de groupe reprend la forme des tetes d'encart du site : un titre,
un chapo en serif, un filet dessous (voir « .tete-section--filet »). */
.fgroupe__tete{
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--hairline);
}
/* Le nom du groupe est un h2, avec la taille et la graisse des h2 du site
(« --fs-3 », 600) : le meme rang que « Nos conferenciers » sur l'accueil.
C'est ce qui le rend « affirme » — un titre, pas une etiquette. */
.fgroupe__label{
margin: 0;
color: var(--ink);
text-wrap: balance;
}
/* Pour quelle salle : en serif, comme tous les chapos de tete d'encart. */
.fgroupe__quoi{
margin: var(--space-tete) 0 0;
max-width: var(--reading-max);
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* Une ligne de format : DEUX colonnes, et non plus trois.
IL Y AVAIT ICI trois colonnes — nom, definition, fiche technique — et c'etait
illisible. Mesure a 1440 : la definition n'avait que 315 px, soit 34 signes
par ligne (le confort commence vers 45), et la fiche a cote faisait presque
la meme largeur : deux blocs de texte de meme poids cote a cote, qu'il
fallait decoder comme un tableau au lieu de les lire.
Maintenant : a gauche le nom, sa mention, ET la fiche technique juste
dessous — elle qualifie le nom, elle n'a rien a faire en concurrence avec la
phrase. A droite, la definition seule, sur ~500 px : 51 signes par ligne.
« grid-template-rows: auto 1fr » : la premiere rangee prend exactement la
hauteur du nom, la definition (qui s'etend sur les deux rangees) pousse la
seconde — la fiche vient donc se coller sous le nom, sans tomber au fond. */
.format{
display: grid;
/* ⚠️ C'ETAIT « 5fr / 8fr » : la colonne du nom prenait 38 % du rail, soit
420 px a 1440 pour des noms de dix lettres — un vide enorme entre le nom
et sa definition. Elle fait maintenant 240 a 300 px : assez pour la fiche
technique sur deux lignes, pas plus. */
grid-template-columns: clamp(240px, 22vw, 300px) minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"tete def"
"fiche def";
gap: 0 clamp(24px, 2.6vw, 48px);
align-items: start;
padding-block: var(--space-6);
}
.format__tete{ grid-area: tete; }
.format:first-child{ padding-top: var(--space-6); } /* sous le filet de la tete */
.format + .format{ border-top: 1px solid var(--hairline); }
/* Un h3 (le groupe est le h2) ; la taille est posee ici, pas heritee des h3
generaux du site, qui sont plus petits. */
.format__nom{
margin: 0;
font-size: var(--fs-4);
/* 600 et non 500 : c'est le nom qui ancre chaque ligne. */
font-weight: 600;
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
}
/* « LE FORMAT DE REFERENCE », sous Conference : la mention a ete RETIREE du
HTML a la demande du client. La regle reste, au cas ou. */
.format__ref{
margin: var(--space-2) 0 0;
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--accent);
}
/* En SERIF : c'est le texte de lecture de cette page. Voir la note « LES DEUX
POLICES ONT ECHANGE LEUR ROLE ». 18 px et non 17 : la taille du serif de
lecture partout ailleurs sur le site (chapos, manifeste).
LES DEUX PHRASES SONT DU MEME NOIR. La seconde etait en gris — « une
deuxieme voix » — et c'est ce qui rendait la page fatigante : avec la
description de groupe et la fiche, trois textes sur cinq etaient au gris le
plus clair du site, et l'oeil sautait d'ilot noir en ilot noir au lieu de
lire. Une phrase grise a l'interieur d'un paragraphe en serif se lit comme
un texte desactive — le meme piege que les trois phrases du manifeste. */
.format__def{
grid-area: def;
margin: 0;
/* La colonne s'est elargie avec le retrecissement de celle du nom : sans
plafond, une definition tenait sur une seule ligne de 110 signes. 60
signes, c'est la mesure de lecture. */
max-width: 60ch;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
text-wrap: pretty;
}
/* La classe reste dans le HTML (elle marque la phrase « a quoi ca sert ») ;
elle ne change plus rien a l'affichage. */
.format__usage{ color: inherit; }
/* La fiche technique. C'est la colonne qui manquait : sans elle, la page
definit des mots ; avec elle, elle aide a choisir. */
.format__fiche{
grid-area: fiche;
margin: var(--space-3) 0 0;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
.format__duree{ font-weight: 600; color: var(--ink); }
.format__prevoir{ display: block; margin-top: 3px; }
/* Sous 1025 px, tout s'empile : l'etiquette de groupe rythme le defilement, et
chaque format se lit nom, definition, fiche technique. */
@media (max-width: 1024px){
/* Les zones nommees de la grille d'ordinateur sont defaites, sinon elles
recreeraient une seconde colonne ; les trois blocs reprennent l'ordre du
HTML : nom, definition, fiche. */
.format{ grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; gap: var(--space-3); padding-block: var(--space-6); }
.format__tete, .format__def, .format__fiche{ grid-area: auto; }
.format__fiche{ margin-top: var(--space-1); }
.format:first-child{ padding-top: var(--space-5); }
}
/* Et la marge du bloc d'appel, qui s'ajouterait a tout ca. « :has() » lit le
contenu : la regle ne vise que le bloc d'appel qui suit les formats. */
section:has(> .fgroupe) + .cta-band,
section.formats + .cta-band{ margin-top: 0; }
/* ---- 5.4 Mur de logos clients ---------------------------------------------
Wordmarks typographiques monochromes — pas de logos image en couleur. */
.logos{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-6) var(--space-9);
margin-top: var(--space-6);
}
.wordmark{
font-size: 23px;
font-weight: 600;
letter-spacing: var(--ls-tight);
opacity: .82;
}
/* Variantes : chaque marque garde sa graphie propre. */
.wordmark--spaced{ font-size: 17px; font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.wordmark--light{ font-weight: 400; }
/* ---- 5.5 Bloc CTA de section ---------------------------------------------- */
.cta-band{
/* 32 px de marge, qui s'ajoutent aux 32 px du bas de l'encart précédent :
64 px de blanc avant le filet du bandeau, comme entre deux encarts.
Sans elle il n'y en avait que 32 et le bandeau semblait collé aux
témoignages. Le rembourrage de 40 px est À L'INTÉRIEUR du bandeau, après
son filet : il ne compte pas dans l'écart entre encarts. */
margin-top: var(--space-6);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
background: var(--bg-subtle);
}
/* 40 px de haut et de bas, et non 96. Ce bloc n'est pas une section : c'est
une dernière ligne, la phrase qu'on lit en arrivant en bas de la page. À
96 px il faisait 382 px de haut à 1440 — presque un demi-écran pour deux
phrases et un bouton. */
.cta-band__inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9);
padding-block: var(--space-7);
}
/* Le titre descend d'un cran : à 43 px il annonçait une section, alors que ce
bloc conclut. À 29 px il reste le plus gros du bloc sans le faire grandir. */
/* 30ch et non 20 : depuis que le titre est passé à 29 px, « Parlons de votre
événement. » se coupait en deux lignes pour rien, et le bloc regagnait la
hauteur qu'on venait de lui retirer. */
.cta-band h2{ max-width: 30ch; font-size: var(--fs-4); }
.cta-band p{
margin: var(--space-2) 0 0;
/* 60ch et non 44 : deux lignes au lieu de trois, dans un bloc qu'on veut
bas. La colonne de gauche a la place. */
max-width: 60ch;
color: var(--ink-secondary);
font-size: var(--fs-body);
}
.cta-band__action{ flex: none; }
/* ---- 5.5b Intro de collection ---------------------------------------------
La page s'ouvre directement sur son titre : pas de petit label de section
au-dessus (règle transverse, les eyebrows ont été supprimés partout). */
/* 64 px au-dessus du titre, et non 128. Le double ouvrait la page sur un vide
qu'aucun contenu ne justifiait — la barre du haut fait déjà 96 px de blanc à
elle seule, les deux s'additionnaient.
C'est exactement la respiration de .bandeau-page, sur les six pages d'enjeu :
les dix têtes de page du site commencent maintenant à la même hauteur. */
.intro{ padding-block: var(--space-9) var(--space-10); }
/* 600, comme les titres de l'accueil. Une seule graisse pour tous les grands
titres, partout — c'est ce qui empêche une page de crier quand la suivante
murmure. */
.intro h1,
.bandeau-page h1{
margin: 0;
max-width: 18ch;
/* C'était clamp(40px, 5.8vw, 98px), soit 83 px sur un portable. Un cran
en dessous : le titre reste le plus gros objet de la page, mais il ne
l'écrase plus, et sa phrase peut monter le rejoindre. */
font-size: var(--fs-1);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
/* La phrase d'ouverture, en SERIF — comme les sous-titres de section sur
l'accueil. Même voix, même fonction : c'est ce qui se lit, pas ce qui
structure. Le sans porte la structure, le serif porte le propos. */
/* Le cadrage d'une page d'enjeu : trois paragraphes qui posent le problème.
La phrase d'ouverture au-dessus dit ce que le site en pense ; ces trois
paragraphes-là expliquent pourquoi c'est un problème. Sans eux, une page
d'enjeu ne fait que répéter l'index des thématiques — même titre, même
phrase, mêmes personnes.
En serif comme tout ce qui SE LIT, mais un cran plus petit que la phrase
d'ouverture : celle-ci annonce, ceux-là développent.
45ch : la mesure de lecture. C'est le seul texte long du site. */
.cadrage{
margin-top: var(--space-8);
max-width: 62ch;
}
.cadrage p{
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
color: var(--ink-secondary);
text-wrap: pretty;
}
.cadrage p + p{ margin-top: var(--space-5); }
/* ⚠️ LE COMPTE D'INTERVENANTS A ÉTÉ SUPPRIMÉ des six pages de sujet, avec le
filet qui le surmontait : un chiffre à corriger à la main à chaque arrivée,
pour une information que la rangée de portraits juste en dessous donne d'un
coup d'œil. Les règles .intro__count ont été retirées avec lui. */
/* Une page d'enjeu SANS texte de cadrage n'a plus de section d'intro du tout :
le bandeau est suivi directement de la rangée des conférenciers. La rangée
ne porte que 32 px de rembourrage en haut, ce qui la collerait au bandeau —
on lui rend les 64 px qui séparent deux blocs partout ailleurs. */
.bandeau + .roster{ padding-top: var(--space-9); }
/* La phrase d'ouverture d'une page, en SERIF et en GRIS.
Le gris n'est pas un effacement : sous un titre de 83 px en gras, une
phrase en noir se battrait avec lui. C'est le contraste de VALEUR qui fait le
rang, pas la taille seule.
Elle est un cran plus grosse que les sous-titres de l'accueil : c'est la
seule phrase de la page, elle a le droit de prendre de la place.
Dans un bandeau de couleur (les six pages d'enjeu), la règle
« .bandeau .intro__manifesto » la repasse en blanc — elle est plus précise,
elle gagne. */
.intro__manifesto{
/* 20 px et non 32 : le titre et sa phrase forment UN objet, pas deux. Plus
l'écart est petit, plus on les lit ensemble. */
margin: var(--space-4) 0 0;
/* 72ch et non 54 : à cette taille, une phrase courte se coupait en deux
lignes pour rien. La mesure reste dans le lisible. */
max-width: 72ch;
font-family: var(--font-serif);
font-size: var(--fs-5);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
/* ---- 5.5bis Page thématique ------------------------------------------------
Une collection filtrée sur un enjeu. La seule différence avec la page
Conférenciers est le cadrage éditorial du haut, qui met le problème en mots. */
.intro--theme{ padding-block: var(--space-11) var(--space-10); }
/* Fil d'Ariane : Thématiques → l'enjeu courant. */
.crumb-path{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-5);
font-size: var(--fs-meta);
color: var(--ink-secondary);
}
.crumb-path a{
padding-bottom: var(--space-1);
border-bottom: 1px solid transparent;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.crumb-path a:hover{ color: var(--ink); border-color: var(--ink-secondary); }
.crumb-path .arrow{ color: var(--hairline); }
.intro--theme h1{
margin: 0;
max-width: 14ch;
font-size: var(--fs-display);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
/* ---- 5.5c Page profil ------------------------------------------------------
Colonne unique, pas de barre latérale : plus chic et plus simple.
La page est une vente éditoriale — densité assumée, mais toujours de l'air. */
/* Colonne du profil : plus étroite que le reste du site (lecture confortable). */
.rail{ max-width: var(--rail-max); margin-inline: auto; }
/* Lien retour, en haut de page. */
.crumb{ padding-top: var(--space-6); }
.crumb a{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-meta);
color: var(--ink-secondary);
transition: color var(--t-fast) var(--ease);
}
.crumb a:hover{ color: var(--ink); }
.crumb .arrow{ transition: transform var(--t-fast) var(--ease); }
.crumb a:hover .arrow{ transform: translateX(-3px); }
/* Ouverture : même composition qu'une entrée de la collection, en plus grand.
Vidéo verticale à gauche, informations à droite, dans le même ordre de
lecture : le nom, le métier, la question, puis l'appel à l'action. */
/* 64 px au-dessus ET en dessous du bloc d'ouverture : c'est l'écart de
l'accueil, mesuré entre le bas du hero et le titre de la première section.
C'était 48 en haut (16 de moins que l'accueil) et 128 en bas (le double de
tous les autres écarts de la page). */
.opening{ padding-block: var(--space-9) var(--space-9); }
/* Deux colonnes, mais la première est taillée sur la vidéo elle-même, pas sur
la moitié de la page. Sans ça, la vidéo — plafonnée à --player-max — laissait
derrière elle un vide qui s'ajoutait à l'écart entre les colonnes, et le nom
partait très loin sur la droite des grands écrans.
Ici, l'écart qu'on voit à l'œil est exactement celui qui est écrit.
L'ensemble vidéo + texte est ensuite centré dans la page : autant d'air à
gauche qu'à droite, quelle que soit la largeur de l'écran. */
.opening__grid{
display: grid;
grid-template-columns: minmax(0, var(--player-max)) auto;
justify-content: center;
/* L'écart valait clamp(112px, 8vw, 200px) : un quart de la largeur de la
vidéo en blanc, ce qui séparait les deux colonnes au lieu de les tenir
ensemble. Ramené à l'échelle des grands écarts du site (--space-7 = 64px),
qui suffit largement à distinguer deux colonnes. */
gap: clamp(56px, 4.6vw, 112px);
align-items: center;
}
.opening__media{ display: flex; }
.opening__media .player{ width: 100%; max-width: var(--player-max); }
/* Le texte garde sa largeur de lecture : la question continue de tomber sur
deux lignes, elle ne s'étire pas jusqu'au bord de l'écran. */
.opening__body{ max-width: 640px; }
/* Le nom est devenu la tête d'affiche de la page : il reprend la taille que
tenait la question-manifeste, désormais remplacée par la bio. */
.opening__name{
margin: 0;
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
}
.opening__role{ margin-top: var(--space-2); }
/* Bio : le parcours et la manière de travailler. Elle vit entièrement ici,
à côté de la vidéo — il n'y a plus de section « Bio » plus bas dans la page,
ni de phrase d'accroche au-dessus.
Comme c'est désormais le seul texte de l'ouverture, il passe en noir plein
et un cran au-dessus du corps courant : gris et petit, il n'aurait pas tenu
face à un nom de 52 px.
Ligne limitée à 58 signes : au-delà, l'œil peine à retrouver le début de la
ligne suivante. */
.opening__bio{
margin-top: var(--space-5);
max-width: 58ch;
}
.opening__bio .bio-detail{
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--ink);
}
.opening__bio .bio-detail + .bio-detail{ margin-top: var(--space-4); }
/* Ligne d'appel à l'action : bouton + réassurance sobre. */
.cta-row{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-5);
margin-top: var(--space-5);
}
.reassure{ font-size: var(--fs-meta); color: var(--ink-secondary); }
/* Le grand bouton suit la taille de l'écran : sous un titre de 104px, un
bouton figé à 15px paraît timide. */
.btn--lg{
padding: clamp(15px, 1vw, 21px) clamp(24px, 1.7vw, 36px);
font-size: var(--fs-body);
}
/* Section de profil : séparée par un filet, jamais par une ombre.
Le filet est porté par la colonne de lecture et non par la page entière,
pour qu'il s'aligne sur le texte qu'il annonce. */
/* ⚠️ LE RYTHME EST CELUI DE L'ACCUEIL, ET IL EST COPIÉ, PAS INVENTÉ.
Les fiches respiraient deux fois plus large que l'accueil : 96 px avant le
filet et 96 px après, soit 192 px entre deux blocs, là où l'accueil en met
64. Les deux pages ne se lisaient pas au même rythme.
Le modèle est la bande « Parlons de votre événement » de l'accueil — le seul
endroit du site où un filet sépare déjà deux blocs. Elle a 64 px au-dessus
et 40 px en dessous. C'est exactement ce qui est écrit ici.
Si vous trouvez les fiches trop serrées, ce sont ces deux valeurs, et elles
seules, qu'il faut remonter. */
.psection{ padding-block: 0 var(--space-9); }
.psection > .rail{
padding-top: var(--space-7);
border-top: 1px solid var(--hairline);
}
/* Le titre de section est discret : c'est le contenu qui parle. */
.psection h2{
margin: 0 0 var(--space-8);
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--ink-secondary);
}
/* Bio : une phrase forte à gauche, le détail à droite. */
/* La bio se lit maintenant en deux temps : l'accroche est remontée dans
l'ouverture, à côté de la vidéo (voir .opening__bio).
Il n'y a plus de section « Bio » dans la page ; ces règles habillent les
paragraphes de détail, où qu'ils soient placés. */
/* ---------------------------------------------------------------------------
LES DEUX POLICES ONT ECHANGE LEUR ROLE
---------------------------------------------------------------------------
AVANT : le serif portait des dizaines de LIGNES COURTES — la fonction sous
chaque nom, les chapos — et la sans-serif portait les deux seuls vrais
textes de lecture du site. Compte des signes affiches, sur sept pages :
6 640 en serif, 13 996 en sans, dont 5 579 pour les seules bios. Le serif
n'etait donc jamais la ou l'on s'installe pour lire : il faisait ornement.
APRES : le serif prend les textes longs — bios des conferenciers, manifeste,
reponses de la FAQ — et les lignes de fonction repassent en sans, ou elles
redeviennent ce qu'elles sont : une identification, pas une phrase.
Les CHAPOS de tete de section restent en serif : ils gardent une note de
voix sur chaque tete de page, y compris sur l'accueil, qui serait sinon
entierement en sans.
Le paragraphe du HERO reste en sans lui aussi, et c'est volontaire : pose
sur une image qui bouge, il se lit d'un coup d'oeil et non a la ligne. La
clarte y prime sur le confort de lecture longue.
POUR TOUT ANNULER : supprimer les quatre lignes « font-family » ajoutees
plus bas (bios, manifeste, FAQ), et remettre « font-family:
var(--font-serif) » dans « .speaker__role » et « .mini__role ».
--------------------------------------------------------------------------- */
.bio-detail{
margin: 0;
/* Voir la note ci-dessus : le texte long prend le serif. */
font-family: var(--font-serif);
/* Meme raison que « .speaker__role » juste au-dessus. */
font-size: var(--fs-suite);
line-height: var(--lh-read);
color: var(--ink-secondary);
}
.bio-detail + .bio-detail{ margin-top: var(--space-4); }
/* ---- Les sujets du moment (accueil) ----------------------------------------
Deux sujets — IA, Géopolitique — et sous chacun les extraits vidéo déjà
branchés sur les fiches. Ce ne sont pas de nouvelles vidéos : ce sont les
mêmes, montrées là où un visiteur cherche un sujet plutôt qu'une personne.
Chaque carte garde la classe .extract : c'est elle qui déclenche l'affichage
automatique de la durée (le site la demande à Vimeo). Il faut en revanche
neutraliser l'agrandissement au clic, qui n'a de sens que dans la grille
d'une fiche profil — ici il ferait sauter la carte en tête de rangée. */
/* Le premier sujet touchait le filet de la tête d'encart : « IA » arrivait
24 px sous le trait, comme si c'était le sous-titre de « Par Thématique ».
48 px le détachent, sans aller jusqu'aux 64 px qui séparent DEUX sujets —
l'écart doit rester plus petit à l'intérieur d'un encart qu'entre ses
parties, sinon le premier sujet paraît décroché du titre. */
/* ---- Le bandeau de couleur et les bandes des sujets ---------------------- */
/* ---- La bande de couleur ---------------------------------------------------
Il n'en reste qu'UNE sorte : .bandeau-page, qui ouvre une page de
collection. Sur les six pages d'enjeu elle porte une image (.bandeau--image)
et la couleur ne sert plus que de fond d'attente, le temps que la photo
arrive.
La bande bordeaux de l'accueil — celle qui coiffait l'encart des sujets — a
été retirée : la couleur pleine revenait deux fois sur la même page, avec
les boutons, et elle cessait d'être un événement.
Pour tout repasser en noir : remplacez var(--accent) par var(--ink) ici, et
rien d'autre. Le blanc du texte tient sur les deux. */
.bandeau{
background: var(--accent);
color: var(--bg);
}
/* Dans une bande, les titres et leurs liens empruntent la couleur de la bande
(donc le blanc) au lieu du noir d'encre habituel. */
.bandeau h1,
.bandeau h2{ color: inherit; }
/* Les phrases : un blanc légèrement retenu. Un gris ne fonctionnerait pas sur
de la couleur — il virerait au sale. */
.bandeau .tete-section__soustitre,
.bandeau .intro__manifesto{ color: var(--on-media-2); }
/* Le toit d'une page de collection. Il remplace les 129 px de blanc qui
ouvraient ces pages sur du vide.
La respiration est plus courte que celle de l'ancienne intro (128 px en
haut) : sous un aplat de couleur, le même blanc pèse deux fois plus. */
.bandeau-page{
padding-block: var(--space-9) var(--space-10);
}
/* ---- Le bandeau IMAGE des pages d'enjeu -----------------------------------
L'image arrive par data-photo, comme les portraits : le site essaie .jpg,
.png puis .webp, et ne pose rien s'il ne trouve pas. Le fond bordeaux de
.bandeau reste donc visible tant qu'aucune image n'est déposée — c'est un
fond de secours, pas un bogue.
Les fichiers vont dans site/images/enjeux/, sous le nom écrit dans
data-photo. Format conseillé : 2400 × 1200 au moins. */
/* Une page qui ATTEND une image ne montre pas de bordeaux en attendant.
Le rouge, le temps d'un battement de cil, se voyait comme un défaut. Un brun
très sombre est déjà la couleur que l'image aura sous son voile : le passage
de l'attente à l'image ne se remarque plus.
Les pages qui n'ont pas encore d'illustration gardent le bordeaux — là, ce
n'est pas une attente, c'est le fond prévu. */
.bandeau--photo{ background-color: #1B1917; }
.bandeau--image{
position: relative;
display: flex;
align-items: flex-end; /* le titre se pose EN BAS, comme une une */
min-height: clamp(340px, 48vh, 580px);
background-size: cover;
background-position: center;
overflow: hidden;
}
/* Le voile sombre, entre l'image et le texte. Sans lui, un titre blanc sur une
photo claire devient illisible — et on ne choisit pas toujours ses photos.
Il est dégradé : presque rien en haut, franc en bas, là où se pose le texte.
« :not(.photo-vide) » : le voile n'existe QUE si une image a été trouvée.
Sur le bordeaux seul, il ferait une tache brune. La classe photo-vide est
posée puis retirée par le site (voir initPortraits dans site.js). */
.bandeau--image:not(.photo-vide)::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
var(--veil-soft) 0%,
var(--veil-mid) 55%,
var(--veil-strong) 100%);
}
/* Le texte repasse au-dessus du voile. */
.bandeau--image > .container{ position: relative; z-index: 1; }
/* Le fil d'Ariane, sur l'image : blanc retenu, et le lien souligné au survol.
Il garde sa taille — c'est un repère, pas un titre. */
.bandeau .crumb-path,
.bandeau .crumb-path a{ color: var(--on-media-2); }
.bandeau .crumb-path a:hover{ color: #fff; text-decoration: underline; }
/* Sur l'image, le titre gagne une ombre portée très douce. Elle ne se voit pas
sur un fond uni ; elle sauve la lisibilité sur une photo claire. */
.bandeau--image:not(.photo-vide) h1{ text-shadow: 0 2px 24px rgba(0,0,0,.45); }
/* Le bloc éditorial qui suit le bandeau n'a plus besoin de ses 128 px du haut :
la page a maintenant un toit. */
.intro--theme{ padding-block: var(--space-9) var(--space-10); }
/* La tête de l'encart des sujets, au milieu de l'accueil.
⚠️ Elle a été un BANDEAU BORDEAUX pleine largeur, et ne l'est plus. Il ne
reste de lui que le rythme : le blanc au-dessus, qui la sépare des
témoignages, et le blanc en dessous, qui la sépare de la première rubrique.
Sans ce blanc, le titre se collerait au bloc précédent et l'encart perdrait
son toit.
Les deux valeurs sont COPIÉES sur des écarts qui existent déjà ailleurs sur
l'accueil, et c'est ce qui les rend justes :
64 px au-dessus = l'écart entre la fin du hero et « Nos conférenciers ».
24 px en dessous = l'écart entre un sous-titre d'encart et son filet
(--space-5, la valeur de .tete-section--filet).
Le bas est bien plus serré que le haut, et c'est voulu : au-dessus, on passe
d'un encart à un autre ; en dessous, le titre et la première rubrique
appartiennent au MÊME encart. Le blanc dit à quel niveau on se trouve.
⚠️ Quand la bande était en couleur, elle portait 96 px de rembourrage en
haut. Cet air était À L'INTÉRIEUR du bordeaux et se lisait comme de la
générosité ; en blanc sur blanc, il ne sépare plus rien, il creuse. Il a
fallu trois essais — 224 px, 192, 128 — avant de comprendre qu'il ne
s'agissait pas de choisir une valeur mais de recopier celle d'à côté. */
.tete-sujets{
/* 32 px, comme le bas de l'encart précédent : 32 + 32 = les 64 px qui
séparent DEUX encarts partout ailleurs sur l'accueil. */
margin-top: var(--space-6);
padding-block: 0 var(--space-5);
}
/* Chaque sujet est une bande pleine largeur, avec sa propre respiration.
L'écart entre deux sujets n'existe plus en tant que tel : c'est le bas de
l'un plus le haut de l'autre, et le changement de fond qui les sépare. */
/* 48 px, et non 64. Assez pour que la bande de couleur se lise comme un bloc
à elle, pas assez pour qu'elle se mette à flotter. Essayé à 24 : les deux
rubriques se touchaient presque. */
.sujet{ padding-block: var(--space-8); }
.sujet--gris{ background: var(--bg-subtle); }
/* La tête d'un sujet : son nom à gauche, ses flèches à droite. Il y a DEUX
sujets dans une seule section ; sans cette tête, les deux rangées iraient
chercher les mêmes flèches (voir le commentaire de initEtagere dans
site.js) et l'une des deux se retrouvait sans commande. */
.sujet__tete{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-6);
}
/* Bas-de-casse, et non plus en capitales. « INTELLIGENCE ARTIFICIELLE » se
déchiffre lettre à lettre ; « Intelligence artificielle » se lit d'un coup
d'œil. Les capitales restent réservées aux ÉTIQUETTES — la spécialité d'un
conférencier, le libellé d'un champ — où elles servent à dire « ceci nomme
une case », pas « ceci est important ».
⚠️ Le texte est déjà écrit en bas-de-casse dans le HTML : c'est le CSS seul
qui le mettait en capitales. Rien à changer dans les pages. */
.sujet__titre{
margin: 0;
font-size: var(--fs-4);
font-weight: 600;
letter-spacing: var(--ls-tight);
}
.sujet__chapo{
margin: var(--space-2) 0 0;
/* La largeur du chapô est calée sur la RANGÉE, pas sur un nombre de
caractères : deux cartes, leurs deux écarts, et la moitié de la
troisième. Le texte s'arrête donc au milieu de la troisième vignette —
un repère visible, qui reste juste si la largeur des cartes change.
C'était « 62ch » (513 px), la mesure de lecture classique. À 814 px la
ligne fait environ 98 signes, soit plus long que ce qu'on recommande
d'ordinaire. C'est assumé ici : trois lignes de chapô ne se lisent pas
comme une page de texte. Pour revenir à une mesure prudente sans perdre
l'alignement, mettez calc(300px * 2 + var(--space-6) * 2) — le texte
s'arrête alors au bord GAUCHE de la troisième vignette, à 664 px. */
/* Les cartes n'ont plus de largeur fixe (voir .sujet__carte) : le chapo
prend la mesure de lecture du site, comme les autres chapos. */
max-width: var(--reading-max);
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-body);
color: var(--ink-secondary);
text-wrap: pretty;
}
.sujet__rangee{ gap: var(--space-6); }
/* Sur ordinateur, la rangee d'extraits d'un sujet de l'accueil n'a pas de
rembourrage de fuite : ce rembourrage (une marge de page, 187 px a 1440)
sert aux rangees qui defilent, pour que la derniere carte respire contre le
bord de l'ecran. Ici les trois cartes doivent remplir le rail, comme les
trois extraits d'une fiche profil. Meme regle que « .enjeu .etagere » sur
la page Sujets. Sur telephone la rangee defile, il reste. */
@media (min-width: 1025px){
.sujet .etagere{ padding-right: 0; }
}
/* ⚠️ C'ETAIT « flex: 0 0 300px » : trois cartes de 300 px dans une colonne
de 1 000 a 1 120, et 40 a 160 px de vide a droite, la ou les trois extraits
d'une fiche profil remplissent leur colonne. Les cartes partagent maintenant
la largeur : 300 px au minimum, et elles grandissent pour remplir le rail a
trois. Si un jour une rangee porte quatre extraits ou plus, ils ne se
compriment pas sous 300 px : la rangee redevient defilante, avec ses
chevrons, comme la rangee des conferenciers. */
.sujet__carte{
/* 280 et non 300 : a 1280 px de large, le rail fait 947 px et trois cartes
de 300 y debordaient de 17 px — une rangee qui defile pour rien. */
flex: 1 1 280px;
min-width: 280px;
margin: 0;
scroll-snap-align: start;
}
/* Le nom du conférencier, au-dessus du titre de l'extrait : c'est lui qui donne
l'autorité, comme sur la rangée des conférenciers. En rouge d'identité et en
petites capitales. Il mène à la fiche ; le cadre vidéo, lui, lance la vidéo
sur place. Deux gestes, deux destinations. */
.sujet__qui{
display: block;
margin-top: var(--space-3);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
}
.sujet__qui:hover{ text-decoration: underline; text-underline-offset: 3px; }
/* Le titre de l'extrait est en GRAS. C'est lui qu'on lit pour décider si on
clique — pas le nom au-dessus, qui n'est qu'une signature. Avec ce nom en
rouge et en capitales juste au-dessus, un titre en graisse normale passait
au second plan alors qu'il porte tout le contenu. */
.sujet__legende{
margin: var(--space-2) 0 0;
font-size: var(--fs-sm);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
color: var(--ink);
text-wrap: pretty;
}
/* L'agrandissement au clic ne vaut que pour la grille des fiches profil. */
.sujet__rangee .extract.is-expanded{ order: 0; z-index: auto; }
@media (max-width: 640px){
.sujet__carte{ flex: 0 0 240px; min-width: 240px; }
}
/* ---- Témoignages (accueil) -------------------------------------------------
Une citation à la fois, qui glisse latéralement — c'est le cadre .etagere,
le même que les livres et la rangée des conférenciers.
La citation est en SERIF et en gris : c'est quelqu'un d'autre qui parle, et
le changement de famille le dit mieux que des guillemets. La source est en
petites capitales noires, courte et sèche — c'est elle qui donne le poids.
Chaque témoignage occupe une colonne de lecture (62 signes maximum) : au-delà
une citation de quatre lignes devient illisible sur un grand écran. */
.temoignages{ gap: var(--space-10); }
/* Les DEUX TIERS de la colonne de contenu, et non une largeur en caractères.
Une largeur en « ch » se règle sur le texte d'attente : le jour où la vraie
citation sera deux fois plus longue, elle tiendrait dans la même boîte et le
bloc paraîtrait étroit. Une fraction de la colonne, elle, ne bouge pas —
c'est le texte qui s'y adapte, pas l'inverse.
⚠️ Sur téléphone, elle reprend la PLEINE largeur (voir la surcharge à
640 px plus bas) : les deux tiers de 342 px ne feraient que 228 px, une
colonne de cinq mots. Une fraction qui va de soi sur un grand écran devient
absurde sur un petit ; c'est le cas classique où un pourcentage a besoin
d'un point de rupture. */
.temoignage{
flex: 0 0 72%;
scroll-snap-align: start;
}
/* ⚠️ CETTE RÈGLE DOIT RESTER APRÈS CELLE DU DESSUS. À spécificité égale, c'est
la dernière écrite qui gagne : placée plus haut dans le fichier, elle n'avait
aucun effet et la citation restait à 228 px sur téléphone. */
@media (max-width: 640px){
.temoignage{ flex: 0 0 100%; }
}
/* Une seule citation : la piste la centre au lieu de la caler à gauche.
« justify-content » ne déplace rien dès qu'il y en a deux — elles remplissent
alors la largeur et le centrage n'a plus de prise. */
.temoignages{ justify-content: center; }
/* Il n'y a plus qu'UNE citation, et elle est centrée sur la page.
Trois citations identiques côte à côte se lisaient comme un gabarit à
remplir plutôt que comme des paroles ; une seule, posée au milieu et un cran
plus petite, se lit comme une parole.
La rangée reste une étagère : le jour où vous en ajoutez une deuxième, le
défilement et les chevrons reviennent tout seuls. */
.temoignage__texte{
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
color: var(--ink-secondary);
text-wrap: pretty;
}
.temoignage__source{
margin: var(--space-5) 0 0;
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--ink);
}
/* La page Questions fréquentes : même liste que sur l'accueil autrefois, mais
dans une page à elle. Le titre de section a disparu — c'est le titre de la
page qui le porte. */
/* ⚠️ CETTE MARGE ETAIT UN DOUBLE COMPTE — le meme travers que celui corrige un
jour sur les bandes de la page Sujets.
Le bloc d'introduction pose DEJA 96 px de rembourrage sous sa phrase, et
cette marge en ajoutait 96 autres : 192 px de blanc entre le chapo et la
premiere question, mesures a toutes les largeurs (128 px sur telephone). On
croyait la page finie avant de faire defiler.
Pour comparer, le meme ecart vaut 108 px sur la page A propos.
Zero ici : c'est le rembourrage de l'introduction qui pose la respiration,
une fois. Resultat mesure : 96 px.
(Au passage, « .faq » porte aussi une marge haute de 64 px plus haut dans ce
fichier : elle ne compte pas, elle se fond dans celle de cette section. La
toucher ne change rien — c'est ici qu'il faut regler.) */
.faq-page{ margin-top: 0; }
/* Keynotes : une liste de lignes, format aligné à droite.
Seules les séparations entre deux conférences portent un filet — rien
au-dessus de la première, rien sous la dernière. */
.talk{
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-1) var(--space-8);
padding: var(--space-6) var(--space-1);
transition: padding-left var(--t-fast) var(--ease);
}
.talk + .talk{ border-top: 1px solid var(--hairline); }
/* Les 30 px de padding servent à écarter les conférences de leur filet de
séparation. Sur la première et la dernière, il n'y a pas de filet : ce
padding ajoutait un vide en trop sous le titre de section et avant la
section suivante. On le retire aux extrémités — l'écart sous « Conférences
données » redevient identique à celui de toutes les autres sections. */
.talk:first-child{ padding-top: 0; }
.talk:last-child{ padding-bottom: 0; }
/* IL Y AVAIT ICI « .talk:hover{ padding-left: var(--space-4) } » : au passage
de la souris, la conference se decalait de 16 px vers la droite. Retire a la
demande — une ligne de liste n'a pas a bouger sous le curseur. */
.talk__title{
grid-column: 1;
margin: 0;
font-size: var(--fs-4);
font-weight: 600;
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
}
.talk__angle{
grid-column: 1;
margin: var(--space-1) 0 0;
max-width: 58ch;
font-size: var(--fs-body);
color: var(--ink-secondary);
}
/* Le format reste dans la police du site — jamais de chasse fixe. */
.talk__format{
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
font-size: var(--fs-label);
letter-spacing: var(--ls-none);
color: var(--ink-secondary);
white-space: nowrap;
}
/* Trois extraits chapitrés, côte à côte. */
.extracts{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.extract{ margin: 0; }
/* --- L'extrait qu'on lance passe en grand -------------------------------
Au clic, la vidéo choisie prend toute la largeur de la colonne de texte
et les deux autres se rangent dessous, à égalité. Format 16/9 : à pleine
largeur elle reste plus courte que l'écran, on ne perd donc jamais la
vidéo de vue.
Uniquement à partir de 641 px — sur téléphone les extraits sont déjà
les uns sous les autres, en pleine largeur : il n'y a rien à agrandir.
---------------------------------------------------------------------- */
@media (min-width: 641px){
.extracts.has-expanded{ grid-template-columns: 1fr 1fr; }
.extract.is-expanded{
grid-column: 1 / -1; /* toute la largeur */
order: -1; /* et en premier, quelle que soit sa place */
/* Pendant qu'elle grandit, la vidéo choisie passe au-dessus des deux
autres : c'est elle qu'on regarde, elle ne doit jamais passer dessous. */
position: relative;
z-index: 2;
}
/* La légende de l'extrait en grand s'aligne sur son nouveau format. */
.extract.is-expanded figcaption{
max-width: 46ch;
font-size: var(--fs-lede);
}
/* Le bouton de lecture reprend sa taille normale quand la vidéo est grande. */
.extract.is-expanded .player--sm .player__play{ width: 66px; height: 66px; }
.extract.is-expanded .player--sm .player__tri{
border-left-width: 18px;
border-top-width: 11px;
border-bottom-width: 11px;
}
}
.extract figcaption{
margin-top: var(--space-4);
max-width: 30ch;
font-size: var(--fs-body);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
}
/* Bouton de lecture réduit sur les vignettes d'extrait. */
.player--sm .player__play{ width: 56px; height: 56px; }
.player--sm .player__tri{
border-left-width: 15px;
border-top-width: 9px;
border-bottom-width: 9px;
margin-left: var(--space-1);
}
/* Publications : les couvertures sont l'une des rares images en couleur. */
/* ---- UNE SEULE LARGEUR POUR TOUTE LA SECTION PUBLICATIONS -----------------
« --pub-l » est la largeur du livre ET de chaque carte de presse. Une seule
valeur a changer si vous voulez les grossir ou les reduire, elles bougeront
ensemble.
HISTOIRE DE CE CHIFFRE, EN DEUX TEMPS.
1. Le livre etait fige a 208 px pendant que les cartes de presse suivaient
l'ecran (300 a 380 px). A 2000 px, la presse faisait 340 de large et le
livre 208 : l'oeil lisait les coupures comme l'objet principal et
l'oeuvre de la personne comme un accessoire. On a donc aligne le livre sur
les cartes.
2. Mais a cette largeur, les deux etaient trop gros sur grand ecran (livre de
340 x 510 a 2000 px, 380 x 570 a 2560). La largeur commune est descendue :
240 px jusqu'a 1920, 250 a 2000, 272 au plus. C'est la meme famille que
les cartes de conferenciers de l'accueil (216 a 320 px) — la section ne
crie plus.
Sur telephone, la regle de fin de fichier fixe les deux a 250 px. */
.pub-covers, .tribunes{ --pub-l: clamp(240px, 12.5vw, 272px); }
.pub-covers{ display: flex; flex-wrap: wrap; gap: var(--space-7); }
.pub-cover{ width: var(--pub-l); }
/* La couverture est posée en image de fond, comme toutes les images du site :
c'est ce qui permet d'accepter indifféremment .jpg, .png ou .webp, et
d'afficher les initiales plutôt qu'une icône d'image cassée tant que le
fichier n'a pas été déposé. Les proportions sont fixées ici (2/3), elles ne
dépendent donc pas du fichier. */
.pub-cover__img{
display: flex; /* centre les initiales, rien de plus */
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 2 / 3;
background-color: var(--bg-subtle);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 1px 0 var(--hairline);
}
.pub-cover__title{
margin-top: var(--space-4);
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: var(--ls-tight);
line-height: var(--lh-snug);
}
.pub-cover__year{
margin-top: var(--space-2);
font-size: var(--fs-meta);
letter-spacing: var(--ls-none);
color: var(--ink-secondary);
}
/* Une vraie couverture garde ses proportions : on ne lui impose plus le
2/3 du placeholder, sinon elle serait légèrement étirée. */
img.pub-cover__img{
height: auto;
aspect-ratio: auto;
object-fit: contain;
}
/* Un seul livre : couverture à gauche, titre à droite. Le titre a alors la
place de respirer, au lieu d'être tassé dans une colonne de la largeur de
la couverture. */
.pub-covers--seule .pub-cover{
display: flex;
align-items: flex-start;
gap: clamp(28px, 2.4vw, 44px);
width: auto;
}
/* Meme largeur que « .pub-cover » ci-dessus, et que les cartes de presse. */
.pub-covers--seule .pub-cover__img{ width: var(--pub-l); flex: none; }
.pub-covers--seule .pub-cover__texte{ max-width: 34ch; padding-top: var(--space-1); }
.pub-covers--seule .pub-cover__title{ margin-top: 0; font-size: var(--fs-5); }
.pub-cover__sub{
margin-top: var(--space-2);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--ink-secondary);
}
@media (max-width: 640px){
.pub-covers--seule .pub-cover{ display: block; }
/* 150 px avant ; 250 maintenant, la largeur des cartes de presse sur
telephone. Le livre est pose au-dessus de son titre ici, il a la place. */
.pub-covers--seule .pub-cover__img{ width: 250px; }
.pub-covers--seule .pub-cover__texte{ margin-top: var(--space-4); }
.pub-covers--seule .pub-cover__title{ font-size: var(--fs-lede); }
.pub-cover__sub{ font-size: var(--fs-body); }
}
/* ---- Tribunes de presse ----------------------------------------------------
Sous le livre, les articles signés dans la presse. Chaque tribune est une
image composée à l'avance, affichée telle quelle : on ne lui impose aucun
format, elle garde ses propres proportions (width 100%, height auto).
Conséquence : rien n'est jamais rogné — ni le nom du journal, ni le titre.
Si deux images n'ont pas les mêmes dimensions, elles n'auront pas la même
hauteur, et c'est le seul défaut possible. C'est le bon compromis : mieux
vaut deux hauteurs différentes qu'un titre coupé. */
/* Les cartes sont posées sur l'ÉTAGÈRE HORIZONTALE — le composant déjà
utilisé pour les livres sur l'accueil. Elles défilent latéralement au lieu
de passer à la ligne : la rangée garde la même hauteur qu'il y en ait trois
ou douze, et sur téléphone on balaie du doigt au lieu de faire défiler
quatre grandes cartes empilées.
Largeur fixe, obligatoire dans une étagère : sans elle les cartes se
compriment pour tenir à l'écran au lieu de déborder. */
/* ---- Sur ordinateur, « Dans les medias » n'est plus une rangee qui defile :
QUATRE cartes en grille, qui se partagent la colonne, sans chevrons. Une
cinquieme coupure et les suivantes ne s'affichent pas — quatre suffisent a
dire « on l'entend dans la presse », et la rangee ne deborde plus jamais.
Sur tablette et telephone, la rangee defile comme avant. */
@media (min-width: 1025px){
.etagere:has(> .tribunes){ padding-right: 0; }
.tribunes{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-6);
}
/* Trois classes, pour peser plus que la largeur fixe posee plus bas. */
.etagere .tribunes .tribune{ width: auto; }
.etagere .tribunes .tribune:nth-child(n + 5){ display: none; }
}
.tribunes .tribune{
flex: 0 0 auto;
/* La largeur commune de la section Publications, definie plus haut sur
« .pub-covers, .tribunes » : le livre a la meme. Sur telephone, la regle de
fin de fichier les ramene a 250 px. */
width: var(--pub-l);
scroll-snap-align: start;
}
.tribune > a{ display: block; text-decoration: none; color: inherit; }
.tribune__vue{
/* flex sert uniquement à centrer le nom du journal tant que l'image n'a pas
été déposée ; l'image, elle, est posée en fond. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* Proportions d'attente, remplacées par celles du fichier réel dès que le
JavaScript l'a trouvé (voir data-photo-libre dans js/site.js). */
aspect-ratio: 3 / 2;
background-color: var(--bg-subtle);
/* « 100% auto » et non « 100% 100% » : l'image est posée sur toute la largeur
en gardant ses proportions. Avec « 100% 100% » elle serait étirée pour
remplir le cadre, donc déformée dès que le cadre ne correspond pas
exactement au fichier — ce qui est le cas dès qu'on harmonise la rangée.
Ancrée en haut : si une bande doit être perdue, c'est celle du bas, jamais
le bandeau du journal ni le titre. */
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
/* Le filet sert aux images à fond blanc, qui sinon se fondraient dans la page. */
border: 1px solid var(--hairline);
transition: opacity var(--t-fast) var(--ease);
}
/* Tant que l'image n'est pas déposée, le cadre affiche le nom du journal
plutôt qu'une icône d'image cassée : la page reste publiable en l'état. */
.tribune__vue.photo-vide::before{
content: attr(data-initiales);
font-size: var(--fs-sm);
letter-spacing: var(--ls-label);
color: var(--ink-tertiary);
text-align: center;
padding: 0 var(--space-4);
}
.tribune:hover .tribune__vue{ opacity: 0.88; }
/* Nature du passage : Tribune, Radio, Télévision. Le bloc mélange les trois,
et une carte de radio ne se distingue pas d'une carte de presse au premier
coup d'œil — cette étiquette le dit en un mot. */
.tribune__genre{
display: block;
margin-top: var(--space-4);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--ink-tertiary);
}
/* display:block sur les deux : sans ça, le titre et la ligne « journal · date »
se suivraient sur la même ligne, tous deux étant des dans le lien. */
.tribune__titre{
display: block;
margin-top: var(--space-4);
font-size: var(--fs-body);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
}
/* Quand l'étiquette est présente, c'est elle qui porte l'écart avec l'image :
le titre se resserre dessous. Écrit ainsi, un bloc sans étiquette garde
malgré tout son espacement. */
.tribune__genre + .tribune__titre{ margin-top: var(--space-2); }
.tribune:hover .tribune__titre{ text-decoration: underline; text-underline-offset: 4px; }
.tribune__meta{
display: block;
margin-top: var(--space-2);
font-size: var(--fs-sm);
letter-spacing: var(--ls-none);
color: var(--ink-secondary);
}
/* Flèche oblique : elle signale qu'on quitte le site, là où la flèche droite
utilisée partout ailleurs annonce une navigation interne. */
.tribune__meta::after{ content: " ↗"; }
/* Sous-titre à l'intérieur de « Publications », entre le livre et la presse. */
.pub-soustitre{
margin-top: clamp(52px, 4vw, 76px);
font-size: var(--fs-meta);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--ink-secondary);
}
@media (max-width: 640px){
.tribunes .tribune{ width: 250px; }
}
/* Témoignages — preuve chaude, placée avant les logos. */
/* Les témoignages d'une fiche : UNE SEULE citation à la fois, les autres
derrière, dans le même cadre glissant que celui de l'accueil.
Deux citations côte à côte se lisaient comme un gabarit rempli deux fois —
même longueur, même forme, même ton. Une seule se lit comme une parole.
72 % de la colonne, et non une largeur en caractères : le jour où la vraie
citation sera deux fois plus longue, une largeur en « ch » la laisserait
dans la même boîte et le bloc paraîtrait étroit. C'est exactement le
raisonnement des témoignages de l'accueil, et la même valeur.
⚠️ NE PAS CENTRER AVEC « justify-content: center ». C'est le réflexe, et il
est faux ici. Quand la rangée déborde — dès la deuxième citation — un
contenu centré déborde des DEUX CÔTÉS, et la partie qui sort à gauche
devient inatteignable : le défilement ne remonte jamais avant zéro. Mesuré :
la première citation partait à −24 px sur ordinateur et à −134 px sur
téléphone, définitivement coupée.
On centre donc la citation SEULE, et elle seule, par ses marges. Quand il y
en a deux, la règle ne s'applique plus d'elle-même et la rangée se cale à
gauche, comme il faut. Rien à régler à la main selon le nombre. */
.quotes{
display: flex;
gap: var(--space-8);
}
.quote{
flex: 0 0 72%;
scroll-snap-align: start;
}
.quote:only-child{ margin-inline: auto; }
/* L'indicateur à tirets d'une rangée. Le JavaScript le construit sous CHAQUE
rangée du site ; c'est cette règle qui décide où il se voit — aujourd'hui
nulle part par défaut, et sous les témoignages des fiches sur téléphone
(voir le bloc mobile en fin de fichier).
Même dessin que les tirets du hero de l'accueil : 18 × 2 px, l'actif plein,
les autres à 35 %. */
.etagere__tirets{
display: none;
gap: var(--space-2);
margin-top: var(--space-5);
}
.etagere__tirets span{
display: block;
width: 18px;
height: 2px;
background: currentColor;
opacity: .35;
transition: opacity 150ms var(--ease);
}
.etagere__tirets span.est-actif{ opacity: 1; }
.quote blockquote{
margin: 0;
max-width: 34ch;
/* Seule entorse à la règle « pas d'italique » : une citation d'organisateur.
Choix client, assumé. */
font-style: italic;
font-size: var(--fs-5);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
}
.quote__attr{
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
/* Suit la citation au-dessus, qui va de 19 a 23 px. */
font-size: clamp(13px, 0.75vw, 16px);
color: var(--ink-secondary);
}
.quote__attr::before{ content: "—"; }
/* Appel à l'action final, personnalisé au nom du conférencier. */
.cta-final{
border-top: 1px solid var(--hairline);
background: var(--bg-subtle);
}
/* 40 px, comme la bande de l'accueil : vous l'aviez voulue « beaucoup plus
fine », et la bande des fiches était restée à 96. */
.cta-final .rail{ padding-block: var(--space-7); }
.cta-final h2{
margin: 0 0 var(--space-5);
max-width: 20ch;
font-size: var(--fs-3);
font-weight: 600; /* même graisse que les titres de section */
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
}
.cta-final .cta-row{ margin-top: 0; }
/* ---- 5.6 En-tête de page intérieure --------------------------------------- */
.page-head{ padding-block: var(--space-10) var(--space-9); }
.page-title{
margin: 0;
font-size: var(--fs-1);
font-weight: 600;
letter-spacing: var(--ls-tight);
line-height: var(--lh-title);
}
.page-head__lede{
margin: var(--space-5) 0 0;
max-width: 46ch;
font-size: var(--fs-lede);
color: var(--ink-secondary);
}
/* ---- 5.7 Formulaire --------------------------------------------------------
Un formulaire calme : beaucoup d'air entre les groupes, jamais un mur
administratif. Les erreurs se disent par le poids et le texte, jamais par
une couleur (il n'y a pas de rouge sur ce site). */
/* Colonne unique centrée : le format des pages de formulaire. */
/* ⚠️ UNE COLONNE DE LECTURE NE DOIT PAS GRANDIR SANS FIN : passe une certaine
longueur, l'oeil perd sa ligne en revenant a gauche. Le plafond de 880 px est
donc volontairement bas — on corrige un ruban de 760 px perdu au milieu d'un
ecran de 2560, on ne cherche pas a remplir l'ecran. */
.column{ max-width: clamp(760px, 40vw, 880px); margin-inline: auto; }
.form{ padding-bottom: var(--section-y); }
/* Espace généreux entre deux groupes de questions. */
.form-group + .form-group{ margin-top: var(--space-8); }
.form-section{ margin-top: var(--space-11); }
.form-section__title{
margin: 0 0 var(--space-8);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--hairline);
font-size: var(--fs-5);
font-weight: 600;
}
/* Label : petites capitales, au-dessus du champ. */
.field__label{
display: block;
margin-bottom: var(--space-2);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--ink-secondary);
}
/* Mention « facultatif » : se distingue par la casse, pas par la couleur. */
.field__optional{
text-transform: none;
letter-spacing: var(--ls-none);
font-weight: 400;
}
.field input,
.field textarea{
display: block;
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--hairline);
border-radius: 0;
background: var(--bg);
color: var(--ink);
font-family: inherit;
font-size: var(--fs-body);
line-height: var(--lh-body);
transition: border-color var(--t-fast) var(--ease);
}
.field input:focus,
.field textarea:focus{
outline: none;
border-color: var(--ink);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--ink-tertiary); }
.field textarea{ resize: vertical; }
/* État d'erreur : la bordure s'épaissit (par une ombre intérieure, pour ne pas
décaler la mise en page) et un message court apparaît sous le champ. */
.field.is-error input,
.field.is-error textarea{
border-color: var(--ink);
box-shadow: inset 0 0 0 1px var(--ink);
}
.field__error{
margin: var(--space-2) 0 0;
font-size: var(--fs-meta);
font-weight: 500;
color: var(--ink);
}
/* Paires courtes côte à côte (prénom / nom, email / téléphone). */
.field-pair{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.form-submit{ margin-top: var(--space-10); }
.btn[disabled]{
background: var(--ink-tertiary);
border-color: var(--ink-tertiary);
color: var(--bg);
cursor: default;
}
.form-legal{
margin: var(--space-5) 0 0;
max-width: 56ch;
font-size: var(--fs-meta);
line-height: var(--lh-body);
color: var(--ink-secondary);
}
/* Bandeau informatif — sert aussi à annoncer un échec d'envoi. */
.banner{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
margin-bottom: var(--space-6);
padding: var(--space-5) var(--space-6);
background: var(--bg-subtle);
font-size: var(--fs-sm);
line-height: var(--lh-body);
}
.banner a{ text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* ---- 5.7b Chips de sélection ----------------------------------------------
Pilule à bordure fine ; sélectionnée, elle se remplit de noir.
Techniquement, chaque chip est un vrai bouton radio masqué : le clavier
fonctionne, et la valeur part bien avec le formulaire. */
.chips{ display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip{
display: inline-flex;
align-items: center;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--hairline);
font-size: var(--fs-meta);
font-weight: 500;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.chip:hover{ border-color: var(--ink); }
/* Le bouton radio est invisible mais toujours là, pour le clavier. */
.chip input{
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.chip:focus-within{ outline: 2px solid var(--ink); outline-offset: 3px; }
.chip.is-selected,
.chip:has(input:checked){
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
/* ---- 5.7c Ligne « votre demande concerne » --------------------------------- */
.concerns{
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--hairline);
}
/* Pastille à initiales — un des rares aplats noirs autorisés (petit, contenu). */
.pastille{
flex: none;
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--ink);
color: var(--bg);
font-size: var(--fs-label);
font-weight: 600;
}
.concerns__name{ font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--ls-tight); }
.concerns__edit{
margin-left: auto;
font-size: var(--fs-meta);
color: var(--ink-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.concerns__edit:hover{ color: var(--ink); }
/* ---- 5.7d Page À propos — mise en page éditoriale --------------------------
La voix prime sur le layout : un titre-ancre à gauche, le texte à droite. */
.manifesto{ padding-block: var(--space-12) var(--space-11); }
.manifesto h1{
margin: 0;
max-width: 17ch;
font-size: var(--fs-display);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.manifesto__lede{
margin: var(--space-7) 0 0;
max-width: 52ch;
font-size: var(--fs-5);
line-height: var(--lh-body);
letter-spacing: var(--ls-tight);
color: var(--ink-secondary);
}
.manifesto__lede b{ color: var(--ink); font-weight: 600; }
/* ---------------------------------------------------------------------------
À PROPOS — un titre, un texte, rien d'autre.
Le titre est CENTRÉ et large ; le texte est dans une colonne centrée, mais
ses lignes restent alignées à gauche. Onze paragraphes centrés ligne à ligne
seraient illisibles : les deux bords deviennent irréguliers et l'œil ne
retrouve plus le début de la ligne suivante.
La colonne de lecture réutilise « .sec-body », qui portait déjà la voix
éditoriale du site : même corps, même interligne, même gris pour les
paragraphes de chute.
--------------------------------------------------------------------------- */
.apropos{ padding-block: var(--section-y); }
.apropos__titre{
margin: 0 auto;
max-width: 24ch;
font-size: var(--fs-1);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-align: center;
text-wrap: balance;
}
/* L'ecart sous le titre suit le titre : il va de 36 a 84 px selon l'ecran, et
96 px fixes en dessous le collaient de plus en plus. Meme raisonnement que
« --space-tete », a une autre echelle — ici le titre est un h1, pas un h2. */
.apropos__texte{ margin: clamp(96px, 7.5vw, 128px) auto 0; }
.editorial{
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: var(--space-8) var(--space-10);
}
/* Le titre reste visible pendant qu'on lit le paragraphe. */
.sec-title{
position: sticky;
top: 128px;
align-self: start;
margin: 0;
max-width: 14ch;
font-size: var(--fs-3);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
}
/* C'ETAIT « 58ch », et c'etait un piege : « ch » se calcule sur la police de
CETTE boite, qui herite du corps courant a 17 px fixes — alors que les
paragraphes a l'interieur sont ecrits en « --fs-lede », qui va de 18 a 21 px.
La colonne restait donc bloquee a 622 px pendant que son texte grossissait.
Mesure a 2560 : 622 px de colonne pour un texte de 21 px, soit 50 signes par
ligne au lieu des 58 voulus. La valeur ci-dessous part du meme 622 et suit
l'ecran jusqu'a 760, ce qui redonne les 58 signes a toutes les tailles. */
.sec-body{ max-width: clamp(622px, 33vw, 760px); }
.sec-body p{
margin: 0 0 var(--space-5);
/* Voir la note « LES DEUX POLICES ONT ECHANGE LEUR ROLE ». */
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
letter-spacing: var(--ls-tight);
text-wrap: pretty;
}
.sec-body p:last-child{ margin-bottom: 0; }
/* LES TROIS PHRASES-CLES DU MANIFESTE (page A propos). Elles etaient en GRIS
CLAIR, et un lecteur exterieur les a lues comme du « texte desactive » —
soit l'inverse de leur role : ce sont les trois sentences de la maison
(« Choisir, c'est renoncer », « Notre metier n'est pas de remplir une
scene », et l'invitation finale).
Elles gardent leur distinction, mais dans l'autre sens : meme noir que le
reste, et le SERIF, la police que ce site reserve a ce qui se lit comme une
voix — les chapos, les lignes de fonction. Une phrase mise en avant ne doit
pas etre plus pale que celles qu'elle resume.
POUR REVENIR EN ARRIERE : remettre « color: var(--ink-secondary) » et
supprimer la ligne « font-family ». */
/* ⚠️ CE MARQUEUR A CHANGE DEUX FOIS, ET C'EST LA MEME HISTOIRE.
Ces trois phrases etaient en gris pale : elles se lisaient comme du texte
desactive, alors que ce sont les trois sentences de la maison. On les a
passees en noir et en serif — elles ressortaient alors nettement sur un
manifeste en sans.
Depuis que TOUT le manifeste est en serif, ce marqueur ne marque plus rien.
L'italique prend le relais : c'est la facon classique de detacher un
aphorisme dans un texte suivi, et elle survivra au prochain changement de
police, contrairement a un contraste de familles. */
.sec-body p.muted{ color: var(--ink); font-style: italic; }
/* Citation détachée : la phrase qui porte la maison. */
.pullquote{ padding-block: var(--space-11); border-top: 1px solid var(--hairline); }
.pullquote p{
margin: 0;
max-width: 16ch;
font-size: var(--fs-1);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
/* Sélecteur volontairement précis : sans cela, la règle ci-dessus
s'appliquerait aussi à ce paragraphe et l'afficherait en énorme. */
.pullquote p.pullquote__attr{
margin: var(--space-6) 0 0;
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: var(--ls-none);
max-width: 46ch;
color: var(--ink-secondary);
}
/* ---- 5.7e Page légale ------------------------------------------------------
Texte long, lecture confortable, aucune fioriture. */
/* Meme prudence que « .column » : un plafond bas, ce sont des textes longs. */
.legal{ max-width: clamp(720px, 38vw, 840px); padding-bottom: var(--section-y); }
.legal h2{
margin: var(--space-10) 0 var(--space-5);
font-size: var(--fs-5);
font-weight: 600;
letter-spacing: var(--ls-tight);
}
.legal h2:first-of-type{ margin-top: var(--space-8); }
.legal p, .legal li{
font-size: var(--fs-body);
line-height: var(--lh-read);
color: var(--ink-secondary);
}
.legal p{ margin: 0 0 var(--space-5); }
.legal ul{ margin: 0 0 var(--space-5); padding-left: var(--space-4); }
.legal li{ margin-bottom: var(--space-2); }
.legal strong{ color: var(--ink); font-weight: 600; }
/* Champ à compléter : volontairement visible, pour qu'on ne l'oublie pas. */
.todo{
background: var(--bg-subtle);
padding: var(--space-1) var(--space-2);
font-weight: 600;
color: var(--ink);
}
/* ---- 5.8 Confirmation ------------------------------------------------------
Sobre = sérieux. Pas de couleur, pas de check vert, pas de confettis :
la confirmation se dit par le texte. */
.confirm{
max-width: 600px;
padding-block: var(--space-11) var(--section-y);
}
/* Glyphe de validation : trait fin, cercle fin, noir. Jamais plein, jamais gros. */
.check{
display: grid;
place-items: center;
width: 46px; height: 46px;
margin-bottom: var(--space-8);
border: 1px solid var(--ink);
border-radius: 50%;
}
.confirm__next{
margin: var(--space-6) 0 0;
font-size: var(--fs-lede);
max-width: 40ch;
}
.confirm__mail{
margin: var(--space-5) 0 0;
max-width: 46ch;
color: var(--ink-secondary);
}
.recap{
margin-top: var(--space-10);
border-top: 1px solid var(--hairline);
}
.recap__row{
display: flex;
gap: var(--space-5);
padding-block: var(--space-5);
border-bottom: 1px solid var(--hairline);
font-size: var(--fs-sm);
}
.recap__key{
flex: none;
width: 150px;
color: var(--ink-secondary);
}
.confirm__exits{
display: flex;
align-items: center;
gap: var(--space-5) var(--space-8);
flex-wrap: wrap;
margin-top: var(--space-10);
}
/* ---- 5.9 Page 404 --------------------------------------------------------- */
.page-404{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 60vh;
padding-block: var(--section-y);
}
.page-404 .display{ max-width: 18ch; }
.page-404__exits{
display: flex;
align-items: center;
gap: var(--space-8);
margin-top: var(--space-9);
flex-wrap: wrap;
}
/* =============================================================================
6. RESPONSIVE
-----------------------------------------------------------------------------
Le mobile n'invente rien : mêmes composants, mêmes tokens, tout s'empile.
============================================================================= */
@media (max-width: 1024px){
/* La navigation passe dans le menu hamburger. */
.site-nav{ display: none; }
.site-header .btn{ display: none; }
.nav-toggle{ display: grid; } /* grid + place-items : le dessin est centré dans la case de 44 px */
/* L'alternance gauche/droite disparaît : vidéo au-dessus, texte en dessous. */
.speaker{ grid-template-columns: 1fr; gap: var(--space-6); }
.speaker--reverse .speaker__media{ order: 0; }
.speaker__media .player,
.speaker__media .portrait{ max-width: none; }
.speaker__bio{ max-width: none; }
/* L'ouverture du profil s'empile comme une entrée de la collection. */
.opening__grid{ grid-template-columns: 1fr; gap: var(--space-6); }
.opening__media .player{ max-width: none; }
/* Rangées empilées : on resserre l'écart, sinon la page devient interminable. */
.roster .speaker + .speaker{ margin-top: var(--space-10); }
/* Blocs à deux colonnes → une seule colonne empilée. */
.cta-band__inner{ flex-direction: column; align-items: flex-start; }
/* Page À propos : le titre passe au-dessus de son texte. */
.editorial{ grid-template-columns: 1fr; gap: var(--space-5); }
.sec-title{ position: static; max-width: none; }
/* Sur téléphone, la citation prend TOUTE la largeur, et ce sont les tirets,
en dessous, qui disent qu'il y en a d'autres.
C'était 78 %, pour laisser dépasser 40 px de la citation suivante. Une
citation coupée au milieu d'un mot se lit comme un défaut d'affichage
plutôt que comme une invitation à faire glisser — et sur une colonne
étroite, ces 40 px étaient pris sur le texte qu'on veut lire.
Les tirets disent la même chose, et en plus COMBIEN il y en a. */
.quotes{ gap: var(--space-7); }
.quote{ flex: 0 0 100%; }
.psection .etagere__tirets{ display: flex; }
.extracts{ grid-template-columns: 1fr 1fr; gap: var(--space-5); }
/* Le format de keynote passe sous le titre plutôt qu'à sa droite. */
.talk{ grid-template-columns: 1fr; }
.talk__format{ grid-column: 1; grid-row: auto; margin-top: var(--space-3); }
.site-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
/* Sur écran étroit, le titre héros utilise toute la largeur disponible :
sans cela il se couperait en trois lignes au lieu de deux. */
.hero__title{ max-width: none; }
/* Hero vidéo sur téléphone : la liste des noms ne tient pas, on garde la
pagination et les flèches — le glissement du doigt fait le reste. */
/* Sur un écran étroit, une colonne à droite n'a pas de sens : le texte
reprend toute la largeur, en bas. */
.vscreen{ justify-content: flex-end; }
.vscreen__inner{ padding-inline: var(--margin-video); }
.vscreen__moitie{ width: 100%; margin-left: 0; display: block; padding-inline: 0; }
.vscreen__bloc{ width: 100%; }
/* Sur téléphone, le NOM descend d'un cran — pas la punchline. Sans ça les
deux se retrouvent à la même hauteur (30 px contre 28) et le nom passe
devant la phrase, ce qui inverse la hiérarchie de l'écran : c'est la
punchline qu'on vient lire, le nom ne fait que la signer. */
.vscreen__nom{ font-size: var(--fs-4); }
/* La fonction se rapproche du nom : 2 px au lieu de 8. Les deux lignes ne
sont pas deux informations, c'est une signature en deux temps — elles se
lisent d'un seul regard.
⚠️ Les fiches gardent leurs 8 px : leur règle porte deux classes
(« .vhero--bande .vscreen__role »), celle-ci n'en porte qu'une. */
.vscreen__role{ font-size: var(--fs-sm); margin-top: 2px; }
/* Sur téléphone, le bas de l'écran est pris par le texte : les commandes
remontent sous le header, dans la seule zone libre. */
/* Les commandes se rangent SOUS LE MOT-SYMBOLE, sur sa marge à lui.
Elles étaient calées sur la marge du hero (--margin-video, 64 px sur
téléphone), donc 40 px plus à droite que CHAPITRE : elles flottaient au
milieu de l'image, sans rapport avec quoi que ce soit.
Sur la marge du site, elles forment une colonne avec le mot-symbole —
CHAPITRE, puis les commandes juste en dessous.
Elles restent en haut (et non en bas comme sur ordinateur) parce que le
bas de l'écran est occupé par le nom, la question et le bouton. */
.vscreen__cmds{
top: calc(var(--header-h) + var(--space-3));
bottom: auto;
left: var(--margin-x);
}
/* ⚠️ LES FICHES ONT BESOIN DE LEUR PROPRE RÈGLE, ET VOICI POURQUOI.
Sur les fiches, « .vhero--bande .vscreen__cmds » cale les commandes en bas
à droite. Cette règle a DEUX classes, la mienne au-dessus n'en a qu'une :
elle gagne donc, quel que soit l'ordre d'écriture. Résultat, mon « top »
s'appliquait mais pas mon « bottom: auto » — la boîte se retrouvait tenue
par le haut ET par le bas, donc étirée sur 287 px de haut, avec les
boutons centrés au milieu, pile sur le nom du conférencier.
On réécrit donc les quatre côtés avec la même spécificité. */
.vhero--bande .vscreen__cmds{
top: calc(var(--header-h) + var(--space-3));
bottom: auto;
left: var(--margin-x);
right: auto;
}
/* ⚠️ LA MARGE ÉTAIT APPLIQUÉE DEUX FOIS SUR LES FICHES.
« .vscreen__inner » pose --margin-video, et « .vhero--bande
.vscreen__moitie » la reposait par-dessus : le nom et la fonction se
retrouvaient à 48 px du bord quand le texte de la page, juste en dessous,
est à 24. Avant que la marge du hero ne passe à 24 px sur téléphone,
c'était pire encore : 64 + 64 = 128 px sur un écran de 412.
La règle générale « .vscreen__moitie { padding-inline: 0 } » de ce même
bloc ne suffisait pas : une seule classe contre deux. */
.vhero--bande .vscreen__moitie{ padding-inline: 0; }
/* La flèche gardait 40 px sur téléphone — l'appareil où l'on vise avec un
doigt, et le seul où elle passait sous la cible minimale. Elle garde donc
ses 44 px ; seul le chiffre du dessin descend d'un cran. */
/* ═══ LE BAS DU HERO D'ACCUEIL ═══════════════════════════════════════════
Il n'y reste que les traits de position : les commandes sont remontées
sous le mot-symbole et la flèche a disparu. Le jeton --hero-bas, qui
servait à caler les trois ensemble, n'a donc plus personne à caler ; il a
été retiré. La distance des traits au bas de l'écran est maintenant portée
par le rembourrage bas du bloc, plus loin dans ce même bloc. */
/* LES COMMANDES REMONTENT SOUS LE MOT-SYMBOLE, comme sur les fiches. Elles
étaient en bas à gauche, au-dessus des traits ; le bas de l'écran porte
déjà le nom, la question et le bouton, et il finissait par tout accueillir.
En haut, elles sont seules et le bas respire.
Les deux boutons se rapprochent : 8 px au lieu de 24. À cette place ils ne
se disputent plus la lecture avec un texte, et une paire serrée se lit
comme un jeu de commandes plutôt que comme deux objets sans rapport. */
.vhero:not(.vhero--bande) .vscreen__cmds{
top: calc(var(--header-h) + var(--space-3));
bottom: auto;
left: var(--margin-x);
right: auto;
gap: var(--space-2);
}
/* La flèche du balayage disparaît sur téléphone : les traits disent déjà
qu'il y a plusieurs écrans, et le geste — faire glisser du doigt — n'a
jamais eu besoin d'un bouton. Il reste actif, c'est le JavaScript qui
l'écoute, pas la flèche. Sur ordinateur elle reste : là, il n'y a pas de
doigt à faire glisser. */
.vhero:not(.vhero--bande) .vhero__fleche{ display: none; }
/* Plus de pilule ni de libellé : deux icônes nues, comme la pause. Un mot
posé sur une image mobile se lit mal ; une icône se reconnaît. */
.vscreen__son{
position: relative;
width: 44px; height: 44px;
display: grid; place-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--on-media-2);
filter: drop-shadow(0 1px 6px rgba(0,0,0,.55));
}
.vscreen__son span{ display: none; }
.vscreen__son:hover{ background: transparent; color: #fff; }
/* IL Y AVAIT ICI UNE PASTILLE BORDEAUX sur le coin de l'icone du haut-parleur
(un « ::after » de 6 px, cercle d'un anneau blanc), censee lever
l'ambiguite du haut-parleur barre sans libelle. Retiree a la demande : un
lecteur exterieur l'avait prise pour un defaut d'affichage, et c'est le
risque de tout signe qu'on ne s'explique pas. L'icone reste seule, comme
la pause a cote d'elle. */
/* Les traits de position, à la place du compteur « 01 / 04 ». */
.vscreen__pagin__nb{ display: none; }
.vscreen__pagin{
/* Les 44 px du bouton de commande n'ont plus à être réservés ici : les
commandes sont remontées en haut de l'écran. Le bloc raccourcit d'autant,
et comme il est calé par le bas, tout le texte descend. */
margin-top: var(--space-7);
line-height: 0;
color: var(--on-media);
}
/* « max-content » et non toute la largeur : sans ça, la boîte des traits
court jusqu'au bord droit et passe sous la flèche. Rien ne se voit — ils
ne font que 2 px de haut — mais deux boîtes qui se recouvrent finissent
toujours par se disputer un clic. */
.vscreen__traits{
display: flex;
width: max-content;
gap: var(--space-2);
}
.vhero__fleche{ font-size: 17px; }
/* Ce rembourrage est la distance entre les traits et le bas de l'écran, et
c'est lui qui décide de la hauteur de tout le bloc : celui-ci est calé par
le bas, donc le réduire fait DESCENDRE le texte d'autant.
Mesuré à 390 × 844 : 59 px avant, 44 après — le nom, la question et le lien
descendent de 15 px, et les traits restent à bonne distance du bord. */
.vscreen__inner{ padding-bottom: clamp(36px, 5.2vh, 68px); }
/* 20 caractères et non 16 : le plafond de 16 avait été réglé quand le bloc
de texte ne faisait que 284 px de large (marge du hero à 64 px). Avec la
marge à 24 px le bloc en fait 364, et un plafond de 16 laissait 68 px
inutilisés — la question continuait de se casser en quatre lignes alors
que la place était là. Mesuré à 412 px : deux des quatre écrans y gagnent
une ligne. Le texte reste équilibré tout seul (text-wrap: balance). */
/* ⚠️ TAILLE HORS ÉCHELLE, comme sur l'écran de la page À propos, et pour la
même raison : sur téléphone, --fs-3 vaut 28 px et le cran suivant tombe
d'un coup à 22. Il fallait descendre d'un cheveu, pas d'une marche.
Mesuré : 25,7 px à 390 px de large, 23,8 à 360, 23 à 320.
Pour revenir dans l'échelle, c'est var(--fs-4). */
.vscreen__punch{ font-size: clamp(23px, 6.6vw, 28px); max-width: 20ch; }
/* ═══ LE BOUTON DEVIENT UN LIEN SOULIGNÉ ═══════════════════════════════════
Un bouton encadré de 54 px de haut pesait autant que la question qu'il
suit, et il occupait le tiers de la largeur de l'écran. En lien souligné il
dit la même chose et ne dispute plus la vedette.
Le rembourrage vertical est conservé : il ne se voit pas — le fond est
transparent — mais il porte la zone tactile à 44 px, la cible minimale
pour un doigt. Le soulignement, lui, ne souligne que le texte. */
.vhero:not(.vhero--bande) .vscreen__cta .btn{
display: inline-block;
min-height: 0;
padding: 10px 0;
border: 0;
background: transparent;
color: #fff;
font-size: var(--fs-body);
/* Graisse normale : en 500 il pesait encore comme un bouton. */
font-weight: 400;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.vhero:not(.vhero--bande) .vscreen__cta .btn:hover{
background: transparent;
text-decoration-thickness: 2px;
}
/* Deux liens soulignes sur la meme ligne : un ecart franc entre eux. */
.vhero:not(.vhero--bande) .vscreen__cta .btn + .btn{ margin-left: var(--space-6); }
/* ⚠️ L'EN-TÊTE DES PAGES SUJETS / FORMATS / CONFÉRENCIERS.
Le blanc entre le sous-titre et la section suivante valait 160 px : 96 px
de bas d'en-tête plus 64 px de haut de section. Sur un téléphone, c'était
un cinquième de l'écran d'arrivée pour ne rien dire, et sur la page
Formats le premier bloc gris commençait au-delà de la moitié de l'écran.
Le bas de l'en-tête passe à 32 px. Le blanc AU-DESSUS du titre ne bouge
pas : il est bon.
⚠️ CETTE RÈGLE DOIT RESTER ICI, EN FIN DE FICHIER.
Écrite dans le bloc mobile du HAUT du fichier, elle n'avait aucun effet :
la règle de base « .intro { padding-block: 64px 96px } » se trouve trois
mille lignes plus bas, et à spécificité égale c'est la dernière écrite qui
gagne — même quand la première est dans une requête de média. */
.intro{ padding-block: var(--space-9) var(--space-6); }
/* ⚠️ SUR TÉLÉPHONE, ET LÀ SEULEMENT, LA LIGNE REPASSE SOUS LE MOT-SYMBOLE.
Côte à côte, les deux ne rentrent pas. Le calcul, à 390 px : la barre offre
342 px entre ses marges, le hamburger en prend 44 et son écart 32, il reste
donc 266 px pour le bloc de marque. Or « CHAPITRE » en Bebas Neue fait
environ 115 px à 34 px de corps, l'écart 16, et « Agence de conférenciers »
151 px : 282 px demandés pour 266 px offerts. À 360 px, le manque est de
40 px.
Empilés, les deux tiennent sans effort : 52 px de haut dans une barre qui
en fait 76. C'est le seul endroit du site où le bloc de marque passe en
colonne. Au-dessus de 640 px, il repasse sur une ligne (voir le bloc
« max-width: 1024px »), où la place ne manque jamais. */
.brand-bloc{
flex-direction: column;
align-items: flex-start;
gap: 0;
}
/* La phrase-titre de l'écran 01 fait trois fois la longueur d'une punchline :
sur téléphone, elle descend encore d'un cran pour tenir sans bousculer le
bouton. */
.vscreen__punch--titre{ font-size: var(--fs-2); max-width: 19ch; }
/* Les paires de champs s'empilent : un champ par ligne, pleine largeur. */
.field-pair{ grid-template-columns: 1fr; gap: var(--space-6); }
/* Sur écran étroit, les longs textes d'exemple ont besoin de place. */
.field textarea{ min-height: 8.5em; }
/* Sur téléphone : deux cartes par ligne, toujours. Une seule ferait perdre
la moitié de la largeur, trois rendraient les visages illisibles. */
.minis{ grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
/* Les arguments passent en une colonne : la photo sous le texte. */
.argument{ grid-template-columns: 1fr; gap: var(--space-8); }
.argument + .argument{ margin-top: var(--space-11); }
/* On annule l'inversion : sur une colonne, la photo doit toujours suivre son
texte, sinon on lit une image sans savoir de quoi elle parle. */
.argument--inverse .argument__media{ order: 0; }
.podcast__liens{ gap: var(--space-5) var(--space-6); }
.mini__nom{ font-size: var(--fs-sm); }
.mini__bio{ font-size: var(--fs-meta); }
.extracts{ grid-template-columns: 1fr; gap: var(--space-7); }
.pub-covers{ gap: var(--space-6); }
.pub-cover{ width: 150px; }
.form-submit .btn{ width: 100%; justify-content: center; }
.banner{ flex-direction: column; align-items: flex-start; }
.recap__row{ flex-direction: column; gap: var(--space-1); }
.recap__key{ width: auto; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.site-footer__top{ grid-template-columns: 1fr; gap: var(--space-8); }
.site-footer__bottom{ flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.logos{ gap: var(--space-5) var(--space-6); }
.wordmark{ font-size: 19px; }
}
/* ---------------------------------------------------------------------------
PAGE CONFERENCIERS SUR TELEPHONE : LE VISAGE ET LE NOM ENSEMBLE
---------------------------------------------------------------------------
Avant, sur telephone, le portrait prenait toute la largeur et presque tout
l'ecran ; le nom n'arrivait qu'en dessous, hors ecran. On voyait un visage
sans savoir qui c'etait.
Nouvelle disposition, pour chaque bloc :
- une premiere rangee a deux colonnes : le portrait a gauche (150 px de
large, cadre 4/5 donc ~188 px de haut, image calee en HAUT pour garder
les yeux), et a droite le nom puis la fonction, alignes par le HAUT
avec la photo — le nom se pose au niveau des yeux ;
- en dessous, en pleine largeur : la bio puis le lien « Voir le profil ».
COMMENT, SANS TOUCHER AU HTML : la bio et le lien sont dans le meme
conteneur que le nom (« .speaker__body »). « display: contents » fait
disparaitre ce conteneur du rendu : ses enfants deviennent directement des
cases de la grille du bloc, et chacun recoit sa colonne et sa rangee.
LA TROISIEME RANGEE EST EN « 1fr », les autres en « auto ». Le nom occupe la
rangee 1, la fonction la rangee 2, et la rangee 3 — vide — absorbe tout
l'excedent quand le texte est moins haut que le portrait : le nom et la
fonction restent ainsi coll es en HAUT, au niveau du visage, et le blanc
tombe en dessous d'eux, la ou l'oeil ne s'arrete pas. Quand le texte est
PLUS haut qu'un portrait (une fonction longue), c'est lui qui deborde vers
le bas et le portrait reste cale en haut. (Une premiere version alignait
tout par le bas : elle laissait un trou en haut a droite, a cote du visage,
des que la fonction etait courte.)
PAGE CONFERENCIERS (« .index-noms--fiches ») ET PAGES DE SUJET
(« .bandeau-page ») : depuis le 9 septembre, les deux ont la meme
disposition. Avant, les pages de sujet gardaient la photo pleine largeur.
Seuil 640 px : le meme que partout ailleurs dans ce fichier.
--------------------------------------------------------------------------- */
@media (max-width: 1024px){ /* 640 px jusqu'au 30 septembre : voir « TABLETTE » plus bas */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker{
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto auto;
column-gap: var(--space-4);
row-gap: 0;
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__body{ display: contents; }
/* Le portrait : colonne 1, sur les trois rangees du texte, cale en haut.
L'ordre « reverse » n'a plus d'effet : la place est donnee explicitement,
la photo est toujours a gauche. */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media{
grid-column: 1;
grid-row: 1 / 4;
align-self: start;
width: 150px;
display: block;
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media .portrait{
width: 150px;
max-width: 150px;
aspect-ratio: 4 / 5;
/* En haut et non au centre : si l'image doit etre recadree, on garde les
yeux, pas le col. */
background-position: center top;
}
/* Sur les pages de sujet, la photo est un lecteur video (bouton « .player »)
et non un simple portrait : meme largeur, meme cadrage par le haut. */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media .player{
width: 150px;
max-width: 150px;
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media .player__thumb{
background-position: center top;
}
/* IL Y AVAIT ICI l'etiquette de discipline (« .speaker__enjeu »), affichee
sur telephone seulement, en petites capitales bordeaux au-dessus du nom.
Retiree a la demande : elle reste masquee partout, comme sur ordinateur.
(Depuis, la rangee vide qui absorbe la hauteur en trop est la TROISIEME :
voir la note en tete de ce bloc.) */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__name{
grid-column: 2;
grid-row: 1;
align-self: start;
/* Un cran plus petit que sur ordinateur : la colonne ne fait que 176 px a
390 de large (146 a 360). « Philippe Grandcolas » tient alors sur deux
lignes propres, sans coupure dans un mot. Suit la largeur de l'ecran. */
font-size: clamp(22px, 6.2vw, 28px);
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__role{
grid-column: 2;
grid-row: 2;
align-self: start;
margin-top: var(--space-1);
/* 15 px et non 17 : sous un nom de 24 px, dans une colonne de 176 px, la
fonction a 17 px faisait presque la taille du nom et s'etalait sur sept
lignes. 15 px, c'est aussi sa taille sous les cartes de l'accueil sur
telephone. */
font-size: var(--fs-sm);
}
/* La bio et le lien reprennent toute la largeur, SOUS la rangee photo + nom.
La bio ne s'enroule jamais a cote de la photo : elle a sa propre rangee. */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__bio{
grid-column: 1 / -1;
grid-row: 4;
margin-top: var(--space-5);
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__links{
grid-column: 1 / -1;
grid-row: 5;
margin-top: var(--space-5);
}
/* Entre deux conferenciers : un filet fin et deux fois 32 px, au lieu des
96 px de blanc herites de la regle tablette. Un conferencier tient ainsi a
peu pres dans un ecran de 844 px de haut. */
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker + .speaker{
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--hairline);
}
}
/* ---------------------------------------------------------------------------
PAGES CONFERENCIERS ET SUJETS SUR TELEPHONE : L'INDEX SUR UNE LIGNE, COLLE
---------------------------------------------------------------------------
Sur telephone, l'index etait un sommaire de quatre lignes en haut de page,
qui disparaissait des qu'on descendait. Une ancienne version le gardait
colle, mais sur quatre lignes il mangeait 8 % de l'ecran — d'ou le
decollage. Troisieme voie : UNE SEULE LIGNE qui defile au doigt, collee
sous le bandeau, 44 px de haut.
Le collage reprend exactement le mecanisme d'ordinateur : « position:
sticky » sous le bandeau, et la regle « body.entete-cachee .index-noms »
(plus haut, hors media query) qui remonte la barre de la hauteur du bandeau
quand celui-ci s'escamote. Rien n'est recree ici : on rend seulement a la
barre les deux proprietes que la regle telephone generale lui retire
(« position » et le prolongement du fond).
Le defilement du nom actif vers le centre est fait par le script
(« initBarreNoms », fonction « centrer »).
LES DEUX PAGES QUI ONT UN INDEX SONT CONCERNEES : Conferenciers (neuf noms)
et Sujets (six sujets, une page de six ecrans sur telephone). C'est le meme
composant, il se comporte de la meme facon. (Une premiere version ne
touchait que Conferenciers.)
--------------------------------------------------------------------------- */
@media (max-width: 640px){
.index-noms{
position: sticky;
top: var(--header-h);
z-index: 40;
padding: 0;
background: var(--bg);
/* Le prolongement du fond vers le haut, comme sur ordinateur : il comble
l'espace pendant que le bandeau glisse. */
box-shadow: 0 calc(-1 * var(--header-h)) 0 var(--bg);
}
/* Le conteneur garde sa marge a gauche (le premier nom s'aligne sur le
contenu), mais la ligne doit pouvoir filer jusqu'au bord droit de l'ecran :
la liste deborde du conteneur de la largeur de la marge, et remet cette
marge en rembourrage interne. Le filet, lui, court d'un bord a l'autre. */
.index-noms__liste{
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 44px;
margin: 0 calc(-1 * var(--margin-x));
padding: 0 0 0 calc(var(--margin-x) - var(--space-2));
text-align: left;
text-wrap: initial;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Pas de barre de defilement visible : c'est un objet editorial, le pouce
sait quoi faire. */
scrollbar-width: none;
}
.index-noms__liste::-webkit-scrollbar{ display: none; }
/* De l'air apres le dernier nom, pour qu'on sente que la ligne se termine.
En pseudo-element et non en « padding-right » : Safari ignore le
rembourrage de fin d'une zone qui defile. */
.index-noms__liste::after{
content: "";
flex: 0 0 var(--margin-x);
}
.index-noms__liste li{
flex: 0 0 auto;
margin: 0 var(--space-2);
}
.index-noms__liste a{
white-space: nowrap;
padding: 0;
}
/* Le saut vers une fiche s'arrete sous le bandeau ET sous la ligne collee.
« --index-h » est mesuree par le script — ici environ 45 px. */
.speaker[id],
.enjeu[id]{
scroll-margin-top: calc(var(--header-h) + var(--index-h, 44px) + var(--space-5));
}
}
/* ===========================================================================
LE SERIF NE RESTE QUE DANS LES TEXTES QUI SE LISENT
===========================================================================
Histoire courte. Un essai a mis le serif (Source Serif 4) sur tous les
titres, puis seulement sur les grands, puis seulement sur les titres de
page. Vu en ligne a chaque etape, et tranche par le client : TOUT EN SANS,
sauf les textes longs. Les titres, les noms, les questions, le heros, les
titres de page : Inter, avec leurs regles d'origine (600, resserre).
Le serif garde ce qui se lit : les bios, le manifeste, les reponses de la
FAQ, les chapos de section, les definitions des formats, la phrase du menu
mobile. C'est la ou il travaille.
Il n'y a donc PLUS DE REGLE DE TITRE ICI : ce bloc n'est qu'une note. Pour
remettre le serif sur les titres de page, ajouter :
body h1:not(.vscreen__nom){ font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
=========================================================================== */
/* ===========================================================================
LES TITRES D'AFFICHE
===========================================================================
« Nos conferenciers » en Inter demi-grasse a 58 px manquait de caractere :
Inter est dessinee pour etre neutre, et a cette graisse elle ne prend
position sur rien. Le titre etait a peine plus grand que les portraits
qu'il annonce.
Le caractere vient ici de trois reglages, pas d'une autre police :
- la GRAISSE 700 (chargee depuis la ligne Google Fonts de chaque page ;
sans elle le navigateur fabriquerait un faux gras, empate) ;
- un RESSERREMENT franc (-0,04 em) : c'est la tension entre les lettres qui
fait « affiche » ;
- un INTERLIGNE serre (1,0), et pour les titres de section un cran de
TAILLE en plus (« --fs-1 », celle des titres de page).
La question du heros garde sa taille (elle est posee sur une video, dans une
colonne etroite) mais prend la graisse et le resserrement.
Ce bloc est en fin de fichier : il gagne sur les regles ecrites plus haut.
POUR TOUT ANNULER : supprimer ce bloc, et remettre « 400;500;600 » a la
place de « 400;500;600;700 » dans la ligne Google Fonts des pages (ce
dernier point n'est pas obligatoire, la graisse ne coute que si on s'en
sert).
=========================================================================== */
/* ⚠️ 29 septembre : graisse et serrage remplacés par « UN SEUL RÉGLAGE POUR
LES GRANDS TITRES » en fin de fichier ; seul l'interligne reste ici. La
question du héros est passée en serif (même endroit). */
body :is(.tete-section__titre h2, .enjeu__titre, .intro h1, .bandeau-page h1,
.intro--theme h1, .page-title, .apropos__titre, .display,
.fgroupe__label){
line-height: 1.0;
}
/* Les titres de section de l'ACCUEIL montent d'un cran : la taille des titres
de page. PAS ceux de la page Sujets : a 71 px, avec le chapo, le titre
repoussait les visages sous le pli et cassait la regle « un sujet par
ecran ». Ils gardent leur taille (« --fs-2 ») avec la graisse et le
resserrement d'affiche. */
body .tete-section__titre h2:not(.enjeu__titre){ font-size: var(--fs-1); }
/* Les titres de la page Sujets ont leur propre classe (« .enjeu__titre ») et
leur propre taille : un cran SOUS leur ancienne taille (« --fs-3 », 28 a
48 px), parce qu'ils ouvrent un ecran qui doit aussi contenir un chapo et
une rangee de visages. Deux crans sous ceux de l'accueil, qui n'ont que
ca a faire. */
/* ⚠️ Ecrit avec cette lourdeur parce que le titre d'un sujet est AUSSI un h2
dans une « .tete-section__titre » : la regle de l'accueil juste au-dessus
le rattrapait, et les deux precedents essais de le reduire n'avaient rien
change (mesure : 70,56 px dans les deux cas). */
body .tete-section__titre h2.enjeu__titre{ font-size: var(--fs-3); }
/* Meme taille pour « Les ecouter sur ce sujet » sur les pages de chaque sujet
(classe « titre-moyen » posee sur le h2) : c'est un intertitre sous une
rangee de conferenciers, pas le titre de la page. */
body .tete-section__titre h2.titre-moyen{ font-size: var(--fs-3); }
/* Un titre d'affiche appelle un peu plus d'air dessous : le chapo ne colle pas. */
body .tete-section__titre h2:not(.enjeu__titre) + *{ margin-top: var(--space-5); }
/* Sur telephone, un mot long (« environnementaux ») a 36 px en 700 depasse la
largeur de l'ecran (359 px pour 312 disponibles a 360). On autorise la
cesure — le navigateur coupe au bon endroit, la page etant en francais —
et, a defaut, la coupe forcee. */
@media (max-width: 640px){
body :is(.tete-section__titre h2, .enjeu__titre, .intro h1, .bandeau-page h1,
.intro--theme h1, .page-title, .apropos__titre, .display){
hyphens: auto;
overflow-wrap: anywhere;
}
}
/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce){
*{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
html{ scroll-behavior: auto; }
}
/* ===========================================================================
LES PORTRAITS SONT DE VRAIES IMAGES (9 septembre)
Avant, chaque portrait etait un fond CSS pose par le JavaScript : le
navigateur ne le decouvrait qu'apres avoir charge la feuille de style et le
script, puis les avoir executes. Maintenant c'est une balise ![]()
ecrite
dans la page : le navigateur la demande des la lecture du HTML, plusieurs
centaines de millisecondes plus tot, avant meme le style.
Le cadre (.portrait, .mini__photo, .player__thumb) garde son role : ses
proportions, son fond gris, ses initiales tant que « photo-vide » est la.
L'image le remplit en absolu et se rogne comme le faisait le fond
(« cover »). Elle apparait en 200 ms quand elle est prete (classe
« est-la », posee par le script) ; si le fichier manque, le script la
retire et les initiales restent.
Le bandeau du heros des fiches (.vscreen__thumb) n'est pas concerne.
=========================================================================== */
.portrait,
.mini__photo{ position: relative; }
.portrait > img,
.mini__photo > img,
.player__thumb > img{
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity .2s ease;
}
.portrait > img.est-la,
.mini__photo > img.est-la,
.player__thumb > img.est-la{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
.portrait > img, .mini__photo > img, .player__thumb > img{ transition: none; }
}
/* Sur telephone, dans les fiches compactes des pages de sujet, le cadrage
garde les yeux plutot que le col — comme le fond qu'il remplace. */
@media (max-width: 640px){
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media .player__thumb > img{
object-position: center top;
}
}
/* ===========================================================================
LE MOT DE THEODORE, EN HAUT DE LA PAGE FORMATS (17 septembre)
CALE SUR LA GRILLE DES FORMATS EN DESSOUS : memes deux colonnes que les
lignes « Conference », « Debat » (« .format »). La photo, ronde, est
centree dans la colonne de gauche, celle des noms ; le texte commence
exactement la ou commencent les definitions, dans la colonne de droite.
(Une premiere version avait sa propre colonne de 130 px : la photo et le
texte flottaient entre les deux grilles, ni sur l'une ni sur l'autre.)
Texte en serif : c'est une adresse directe, un texte qui se lit, pas un
titre. Le numero, en dessous, en sans, comme le numero du bandeau.
Le portrait reutilise « .portrait » : meme fond, memes initiales si le
fichier manque, meme apparition quand il est pret ; seule la forme change.
=========================================================================== */
.mot{
display: grid;
grid-template-columns: clamp(240px, 22vw, 300px) minmax(0, 1fr);
column-gap: clamp(24px, 2.6vw, 48px); /* le meme ecart que « .format » */
align-items: center;
padding-block: var(--space-9) var(--space-4);
}
@media (min-width: 1025px){
.mot{ max-width: calc(var(--rail-max) + var(--margin-x) * 2); }
}
.mot__photo{
justify-self: center;
width: clamp(160px, 14vw, 200px);
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
}
.mot__photo > img{ object-position: center 30%; } /* le visage plutot que le col */
.mot__texte{ max-width: var(--reading-max); }
.mot__texte p{
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-lede);
line-height: var(--lh-read);
color: var(--ink);
text-wrap: pretty;
}
.mot__lien{
color: inherit;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.mot__lien:hover{ text-decoration-thickness: 2px; }
/* Son propre style, et non « .tel-lien » : cette classe-la est celle du
numero du bandeau, qu'une regle masque partout ailleurs que sur grand
ecran — le numero disparaissait avec. */
.mot__tel{
display: inline-block;
margin-top: var(--space-5);
font-size: var(--fs-body);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--ink);
white-space: nowrap;
text-decoration: none;
}
.mot__tel:hover{ text-decoration: underline; text-underline-offset: 4px; }
/* Telephone : la grille des formats passe elle aussi sur une colonne. La
photo, plus petite, a gauche, puis le texte en dessous. */
@media (max-width: 640px){
.mot{
grid-template-columns: 1fr;
row-gap: var(--space-5);
padding-top: var(--space-7);
}
.mot__photo{ justify-self: start; width: 128px; }
}
/* ===========================================================================
BANDEAU DU BAS DE LA PAGE FORMATS : LE NUMERO A COTE DU BOUTON (17 sept.)
Deux issues cote a cote : appeler (lien texte, meme style que le numero
sous le mot de Theodore) ou ecrire (le bouton). Sur telephone, l'un sous
l'autre, le numero d'abord : c'est l'action la plus directe avec un
telephone en main.
=========================================================================== */
.cta-band__action--double{
display: flex;
align-items: center;
gap: var(--space-6);
}
.cta-band__tel{
font-size: var(--fs-body);
font-weight: 500;
letter-spacing: var(--ls-tight);
color: var(--ink);
white-space: nowrap;
text-decoration: none;
}
.cta-band__tel:hover{ text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px){
.cta-band__action--double{
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
}
/* Un lien dans une phrase d'ouverture (pages Demande et Prendre rendez-vous,
vers les questions frequentes) : souligne, meme couleur que le texte. */
.lede-lien{ color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lede-lien:hover{ text-decoration-thickness: 2px; }
/* ===========================================================================
ACCUEIL : LE BLOC DU HEROS UN PEU AU-DESSUS DU CENTRE (17 septembre)
Le bloc etait centre au millimetre sur la hauteur de l'ecran, et l'oeil le
voyait bas : le centre optique est toujours au-dessus du centre geometrique,
et le bandeau du haut pese sur l'image. Depuis que le paragraphe de
presentation est parti, le bloc est plus court et ca se voyait davantage.
Un rembourrage bas de 8 % de la hauteur remonte le bloc de 4 % : le centre
du bloc tombe vers 46 % de l'ecran au lieu de 50. Ordinateur seulement ;
sur telephone le bloc est cale en bas, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
.vhero--accueil .vscreen__inner{ padding-bottom: 8vh; }
}
/* Page A propos : le nom en signature SOUS la citation du heros, en gris comme
une fonction, avec un peu d'air. */
.vscreen__signature{ margin-top: var(--space-4); }
/* ===========================================================================
FICHE SANS BOUCLE VIDEO : L'OUVERTURE CLAIRE (piste A, 17 septembre)
Cyrus et Vera n'ont pas de boucle. Leur fiche s'ouvre sur fond clair,
avec EXACTEMENT LA STRUCTURE D'UNE CARTE DE LA PAGE CONFERENCIERS
(« .speaker ») : memes colonnes (le portrait jusqu'a --player-max, le texte
sur 34rem), meme ecart, l'ensemble centre, le texte centre en hauteur sur
le portrait. Seule difference : le nom est le titre de la page, un cran
plus grand et plus gras.
(Une premiere version posait un portrait de 400 px cale en haut a cote d'un
texte deux fois plus haut : le portrait flottait.)
Sur telephone : la fiche compacte de la page Conferenciers — portrait de
150 px en haut a gauche, nom et fonction a cote, bio et bouton dessous.
=========================================================================== */
.ouv{ padding-block: var(--space-9) var(--space-10); }
.ouv__grid{
display: grid;
grid-template-columns: minmax(0, var(--player-max)) minmax(0, 34rem);
justify-content: center;
gap: clamp(56px, 4.6vw, 112px);
align-items: center;
}
.ouv__media{ display: flex; }
.ouv__media .portrait{ max-width: var(--player-max); }
.ouv__body{ max-width: 34rem; }
.ouv__nom{
margin: 0;
font-size: var(--fs-2);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.0;
}
.ouv__role{ margin: var(--space-3) 0 0; font-size: var(--fs-body); color: var(--ink-secondary); }
.ouv__bio{ margin-top: var(--space-6); }
.ouv__bio .bio-detail{ font-size: var(--fs-suite); color: var(--ink-secondary); }
.ouv .cta-row{ margin-top: var(--space-7); }
@media (max-width: 640px){
.ouv{ padding-top: var(--space-7); }
.ouv__grid{
grid-template-columns: 150px minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto auto;
column-gap: var(--space-4);
row-gap: 0;
justify-content: stretch;
align-items: start;
}
.ouv__body{ display: contents; }
.ouv__media{ grid-column: 1; grid-row: 1 / 4; width: 150px; }
.ouv__media .portrait{ width: 150px; }
.ouv__media .portrait > img{ object-position: center top; }
.ouv__nom{ grid-column: 2; grid-row: 1; font-size: clamp(22px, 6.2vw, 28px); }
.ouv__role{ grid-column: 2; grid-row: 2; margin-top: var(--space-1); font-size: var(--fs-sm); }
.ouv__bio{ grid-column: 1 / -1; grid-row: 4; margin-top: var(--space-5); }
.ouv .cta-row{ grid-column: 1 / -1; grid-row: 5; margin-top: var(--space-5); }
}
/* ===========================================================================
HEROS DE L'ACCUEIL : COMPOSITION REVUE (22 septembre)
Trois choses, decidees sur maquette.
1. UN SEUL BOUTON. « Ecouter l'extrait » reste un bouton ; « Voir Untel »
devient un lien souligne avec une fleche, a cote. Deux boutons de meme
poids sous la question, c'etait la signature des modeles tout faits.
2. LE BLOC PART DU MILIEU DE L'ECRAN, et non du centre de la moitie droite.
Il etait a 60 % de la largeur, dans le noir, loin du visage cadre a
gauche : deux compositions cote a cote. Rapproche, la photo et le texte
redeviennent une seule image. Reglage par ecran possible si une boucle
est cadree plus au centre : « --recul » sur l'article.
3. LES TAILLES SUIVENT LA HAUTEUR DE L'ECRAN, pas seulement sa largeur.
Avant, tout etait en « vw » avec un plafond : sur un ecran de 1080 px de
haut, le bloc n'occupait que 40 % de la hauteur, et 30 % sur un 1440.
Chaque taille est maintenant le plus petit de deux calculs, l'un en
largeur, l'autre en hauteur (« min(vw, vh) »), avec plancher et plafond.
Le nom, la fonction, la question, le bouton, le lien, les ecarts entre
eux : tout grandit avec la fenetre et retrecit sur une fenetre basse.
Cibles a 1920 x 1080 : nom 42 px, question 78 px sur quatre lignes,
bouton 60 px de haut, bloc a peu pres a 55 % de la hauteur.
Telephone : rien ne change ici (regles a 1025 px et plus).
=========================================================================== */
.vscreen__voir{
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-weight: 500;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid rgba(255,255,255,.55);
white-space: nowrap;
}
.vscreen__voir span{ transition: transform var(--t-fast) var(--ease); }
.vscreen__voir:hover span{ transform: translateX(4px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta{ display: flex; align-items: center; flex-wrap: wrap; }
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta .btn + .vscreen__voir{ margin-left: var(--space-6); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta .vscreen__pagin{ flex-basis: 100%; }
@media (min-width: 1025px){
.vhero--accueil .vscreen{ --recul: clamp(24px, 3vw, 56px); }
.vhero--accueil .vscreen__moitie{
justify-content: flex-start;
padding-inline: var(--recul) clamp(72px, 5.5vw, 96px);
}
/* La colonne de texte peut etre plus large : elle a maintenant toute la
moitie droite devant elle. */
.vhero--accueil .vscreen{ --texte-largeur: clamp(480px, 36vw, 760px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__nom{ font-size: clamp(26px, min(2.3vw, 3.9vh), 46px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__role{ font-size: clamp(16px, min(1.15vw, 2vh), 24px); margin-top: clamp(4px, .7vh, 10px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__punch{
font-size: clamp(32px, min(4.1vw, 7.2vh), 86px);
line-height: 1.02;
margin-top: clamp(18px, 3vh, 40px);
max-width: 22ch;
}
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta{ padding-top: clamp(24px, 4vh, 52px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta .btn{
min-height: clamp(48px, 5.6vh, 64px);
padding-inline: clamp(24px, 2.6vh, 34px);
font-size: clamp(15px, 1.7vh, 19px);
}
:is(.vhero--accueil, .vhero--apropos) .vscreen__voir{ font-size: clamp(15px, 1.7vh, 19px); }
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta .vscreen__pagin{ margin-top: clamp(16px, 2.6vh, 32px); }
}
/* Telephone : le bouton « Ecouter » est cache sur l'accueil, le lien ne doit
pas garder l'ecart prevu pour se placer a sa droite. */
@media (max-width: 640px){
:is(.vhero--accueil, .vhero--apropos) .vscreen__cta .btn + .vscreen__voir{ margin-left: 0; }
}
/* ===========================================================================
A PROPOS : L'ECRAN VIDEO DEVIENT LA PAGE DE CONTACT (22 septembre)
Memes tailles suivant la hauteur que l'accueil (regles ci-dessus, etendues
a « .vhero--apropos »). Le bloc reste a gauche, le visage est a droite.
Le bouton et le numero suivent la question, la signature suit le bouton.
=========================================================================== */
.vhero--apropos .vscreen__cta{ margin-top: 0; }
.vhero--apropos .vscreen__signature{ margin-top: clamp(20px, 3.4vh, 40px); }
.vhero--apropos .vscreen__punch--titre{ max-width: 22ch; }
/* La colonne de texte s'elargit : la question est une phrase entiere, et le
visage est a droite. A 30vw elle tombait sur six lignes courtes. */
@media (min-width: 1025px){
.vhero--apropos .vscreen{ --texte-largeur: clamp(480px, 42vw, 860px); }
/* La moitie gauche devient 60 % : c'est elle qui bridait la colonne, pas la
variable. Le visage est cadre a droite, il reste hors du texte. */
.vhero--apropos .vscreen__moitie{ width: 60%; }
/* C'est « .vscreen__bloc--large » qui fixe la largeur reelle du bloc (sa
propre variable l'emporte sur celle de l'ecran) : on la regle ici. */
.vhero--apropos .vscreen__bloc--large{ --texte-largeur: clamp(600px, 44vw, 900px); }
}
/* Telephone : « Appelez-moi » compose deja l'appel, le numero en double
passait a la ligne avec un retrait. On ne garde que le lien. */
@media (max-width: 640px){
.vhero--apropos .vscreen__voir{ display: none; }
}
/* ===========================================================================
LA BARRE DU HAUT, SYMÉTRIQUE (29 septembre)
Avant : le mot-symbole était posé dans la marge gauche, presque au bord de
l'écran, alors que le numéro et le bouton s'arrêtaient à la limite du
contenu, soit jusqu'à 240 px avant le bord droit. La barre penchait à gauche.
Maintenant, sur ordinateur, la barre prend toute la largeur avec le même
blanc des deux côtés (--bord-barre) : le mot-symbole au bord gauche, la paire
numéro + bouton au bord droit, le menu centré dans l'espace libre entre les
deux (ses marges automatiques n'ont pas changé).
Le mot-symbole revient DANS LE FLUX, suivi de « Agence de conférenciers » :
les deux ne peuvent plus se chevaucher, quelle que soit la largeur.
Sous 1025 px (tablette, téléphone), rien ne change.
=========================================================================== */
@media (min-width: 1025px){
.site-header{ --bord-barre: clamp(24px, 1.8vw, 44px); }
.site-header__inner{
max-width: none;
padding-inline: var(--bord-barre);
}
.site-header .brand{
position: static;
transform: none;
left: auto;
right: auto;
}
.brand-bloc{ gap: var(--space-5); }
.brand-texte{ display: block; }
}
/* Entre 1025 et 1280 px, la ligne « Agence de conférenciers » ne laisse pas
assez de place au menu : elle s'efface (elle reste en pied de page). */
/* (Ancienne règle qui masquait « Agence de conférenciers » entre 1025 et
1280 px : retirée le 29 septembre, la colonne à 64 px de marge laisse
maintenant assez de place à toutes les largeurs.) */
/* LOGO ET « AGENCE DE CONFÉRENCIERS » SUR LA MÊME LIGNE DE BASE (29 sept.)
Les deux étaient centrés l'un sur l'autre. Avec le serif, plus haut et
dont le « p » descend, le petit texte flottait 4 à 7 px au-dessus de la
ligne où repose « Chapitre ». Aligner les lignes de base, c'est poser les
deux textes sur la même ligne, comme dans une phrase.
Au-dessus de 640 px seulement : en dessous, les deux sont empilés. */
@media (min-width: 641px){
.brand-bloc{ align-items: baseline; }
}
/* ===========================================================================
LA BARRE DU HAUT ALIGNÉE SUR LA COLONNE DES PAGES (29 septembre)
Remplace « LA BARRE DU HAUT, SYMÉTRIQUE » : la barre n'est plus calée sur
les bords de l'écran mais sur la colonne de lecture du site, celle de la
FAQ, des profils, de Formats et des sections de l'accueil
(--rail-max + --margin-x). Le logo commence là où commence le texte, le
bouton finit là où il finit. C'est le principe du site d'Anthropic.
Le menu n'est plus centré : il est groupé à droite, contre le bouton.
À gauche l'identité, à droite tout ce qui se clique.
Le numéro de téléphone quitte la barre sur ordinateur : la colonne est
trop étroite pour lui (mesuré). Il reste dans le menu mobile, le pied de
page et la page « Prendre rendez-vous ».
Sous 1025 px, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
.site-header__inner{
max-width: calc(var(--rail-max) + var(--margin-x) * 2);
padding-inline: var(--margin-x);
}
.site-nav{
margin-left: auto;
margin-right: var(--space-4);
}
.site-header .tel-lien{ display: none; }
}
/* ===========================================================================
BARRE PLUS AÉRÉE, MENU PLUS LÉGER, BOUTONS ARRONDIS (29 septembre)
- La barre gagne 12 px de haut sur ordinateur (76 → 88) : plus d'air
au-dessus et au-dessous des textes. Tout ce qui dépend de sa hauteur
(héros, index collant, ancres) suit la variable --header-h.
- Le menu passe de 15 px demi-gras à 14 px en graisse normale, avec 28 px
entre les liens au lieu de 32 : il se lit comme une ligne de liens, pas
comme une rangée de titres.
- Les boutons perdent leurs angles vifs : 6 px d'arrondi, sur TOUS les
boutons du site pour qu'ils restent de la même famille.
=========================================================================== */
@media (min-width: 1025px){
:root{ --header-h: 88px; }
.site-nav{ gap: 28px; }
.site-nav a{ font-size: 14px; font-weight: 400; }
}
.btn{ border-radius: 6px; }
/* ===========================================================================
LES MARGES D'ANTHROPIC, SUR TOUT LE SITE (29 septembre)
Mesuré sur anthropic.com : une seule colonne, 1 272 px au plus, centrée,
avec 64 px de marge au minimum de chaque côté. De 1025 à 1400 px, la marge
reste à 64 px ; au-delà, la colonne s'arrête à 1 272 px et les marges
grandissent.
Chapitre avait deux colonnes : une étroite (--rail-max, 1 000 à 1 120 px :
FAQ, profils, Formats, accueil) et une large (--content-max : pages
Conférenciers et Sujets). Les deux prennent maintenant la même mesure.
Sous 1025 px (tablette, téléphone), rien ne change.
=========================================================================== */
@media (min-width: 1025px){
:root{
--margin-x: 64px;
--rail-max: 1272px;
--content-max: 1272px;
}
}
/* Largeur de lecture. La colonne fait jusqu'à 1 272 px : un paragraphe qui la
remplirait dépasserait 140 caractères par ligne, bien au-delà du confort de
lecture (70 à 90). Les textes longs gardent donc leur propre mesure, calée
à gauche dans la colonne — comme sur anthropic.com, où aucun paragraphe ne
court sur toute la largeur.
FAQ : 1 000 px, la largeur qu'elle avait avant (validée le 17 septembre). */
@media (min-width: 1025px){
.qa__q, .qa__r{ max-width: 1000px; }
.sec-body, .muted, .legal p, .legal li{ max-width: 72ch; }
}
/* ===========================================================================
OUVERTURE DES PAGES DE SUJET, FAÇON ANTHROPIC (29 septembre)
Fond clair. Moitié gauche : « ← Tous les sujets » puis le titre. Moitié
droite : le chapeau en serif, puis « Autres sujets ». Un filet ferme
l'ouverture. Plus de photo d'illustration.
=========================================================================== */
.sujet-ouv.bandeau-page{
padding-block: clamp(40px, 5vw, 88px) 0;
background: none;
color: var(--ink);
}
.sujet-ouv__retour{
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: clamp(24px, 2.4vw, 40px);
font-size: 14px; color: var(--ink-secondary);
}
.sujet-ouv__retour:hover{ color: var(--ink); }
/* Les deux moitiés, et le même écart (48 px) que les cartes en dessous :
le chapeau et les bios commencent sur la même verticale. */
.sujet-ouv__grille{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
.sujet-ouv .sujet-ouv__titre{
margin: 0;
max-width: 15ch;
font-size: clamp(36px, 3.3vw, 56px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: balance;
}
.sujet-ouv__chapo{
margin: 0;
font-family: var(--font-serif);
font-size: clamp(19px, 1.3vw, 23px);
line-height: 1.45;
color: var(--ink);
}
.sujet-ouv__autres{
margin: var(--space-5) 0 0;
display: flex; flex-wrap: wrap; gap: 6px 14px;
font-size: 14px; line-height: 1.6;
}
.sujet-ouv__autres-titre{ font-weight: 600; color: var(--ink); }
.sujet-ouv__autres a{
color: var(--ink-secondary);
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.sujet-ouv__autres a:hover{ color: var(--ink); }
.sujet-ouv__filet{
margin: clamp(40px, 4.5vw, 72px) 0 0;
border: 0; border-top: 1px solid var(--hairline);
}
@media (max-width: 800px){
.sujet-ouv__grille{ grid-template-columns: 1fr; gap: var(--space-5); }
.sujet-ouv .sujet-ouv__titre{ font-size: clamp(30px, 8vw, 40px); }
}
/* ===========================================================================
LES CARTES DES CONFÉRENCIERS CALÉES SUR LA COLONNE (29 septembre)
Page Conférenciers et pages de sujet, sur ordinateur. La carte occupe
toute la colonne, coupée en deux moitiés avec 48 px d'écart — les mêmes
moitiés que l'ouverture des pages de sujet.
- Carte normale : la photo part du bord gauche de la colonne, le nom et
la bio partent de la ligne du milieu.
- Carte inversée : le texte part du bord gauche, la photo finit sur le
bord droit.
La photo garde sa taille (--player-max) ; le texte prend toute sa moitié.
Sous 1025 px, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
.roster .speaker,
.roster .speaker--reverse{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
justify-content: stretch;
gap: var(--space-8);
}
.roster .speaker__media{ justify-content: flex-start; }
.roster .speaker--reverse .speaker__media{ justify-content: flex-end; }
.roster .speaker__body{ max-width: none; }
}
/* Entre 1025 et 1099 px, « Agence de conférenciers » ne laisse que 36 px au
menu avec les vraies polices, et déborde de 18 px avec les polices de
secours (si Google Fonts ne répond pas). Elle s'efface donc sur cette
seule plage ; elle reste dans le pied de page. */
@media (min-width: 1025px) and (max-width: 1099px){
.brand-texte{ display: none; }
}
/* ===========================================================================
LA BARRE DES NOMS SUR LES PAGES DE SUJET (29 septembre)
- La barre prolonge son fond vers le haut d'une hauteur de menu (voir
« box-shadow » sur .index-noms) pour éviter un clignotement quand elle
glisse. Sur Conférenciers, ce prolongement est caché par le menu. Ici,
l'ouverture est juste au-dessus : il la recouvrait. L'ouverture passe
donc DEVANT la barre (41 contre 40), mais toujours DERRIÈRE le menu (50)
et son panneau (49). Le prolongement ayant la couleur de la page, il
redevient invisible.
- Le filet de la barre suit maintenant la colonne, comme les fiches.
=========================================================================== */
.sujet-ouv{ position: relative; z-index: 41; }
@media (min-width: 1025px){
.index-noms--fiches > .container{
max-width: calc(var(--content-max) + var(--margin-x) * 2);
}
.sujet-ouv.bandeau-page{ padding-bottom: clamp(32px, 3.5vw, 56px); }
}
@media (max-width: 1024px){
.sujet-ouv.bandeau-page{ padding-bottom: var(--space-6); }
}
/* ===========================================================================
BARRE FINE, SANS FILET — ET FIN DE PAGE EN NOIR MAT (29 septembre)
Sur le modèle d'anthropic.com.
=========================================================================== */
/* ---- La barre : 64 px sur ordinateur (au lieu de 88), sans filet ---------
Le logo redescend à 32 px au plus pour rester dans les proportions. Sur
téléphone la barre garde ses 76 px : le logo et « Agence de
conférenciers » y sont empilés. */
.site-header{ border-bottom: 0; }
@media (min-width: 1025px){
:root{ --header-h: 64px; }
.brand-titre{ font-size: 14px; }
}
/* ---- La barre des noms se décolle après la dernière fiche ----------------
Elle est collante DANS son bloc (.index-zone), qui s'arrête avec les
fiches : arrivée au bas du bloc, elle remonte avec la page au lieu de
recouvrir « Les écouter sur ce sujet » ou le bandeau de fin. */
.index-zone{ position: relative; }
/* ---- La fin de page : un seul bloc noir ----------------------------------
Le bandeau d'appel (« Pas sûr que ce soit le bon angle ? », « Programmer
Kevan Gafaïti. »…) et le pied de page passent en noir mat, le même que
derrière les vidéos. Le bandeau est centré, avec un bouton blanc ; un
filet fin, dans la colonne, le sépare du pied de page. */
:root{ --noir-fin: #141413; --noir-filet: rgba(255,255,255,.14); }
.cta-band,
.cta-final{
margin-top: 0;
border: 0;
background: var(--noir-fin);
color: #fff;
}
.cta-band__inner{
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
padding-block: clamp(64px, 7vw, 120px) clamp(56px, 6vw, 96px);
text-align: center;
}
.cta-band h2,
.cta-final h2{
margin-left: auto; margin-right: auto;
max-width: 24ch;
font-size: clamp(30px, 2.6vw, 44px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
text-wrap: balance;
}
.cta-band p{
margin: var(--space-3) auto 0;
max-width: 52ch;
color: rgba(255,255,255,.66);
}
.cta-band__action--double{ justify-content: center; }
.cta-band__tel{ color: #fff; }
.cta-final .rail{
padding-block: clamp(64px, 7vw, 120px) clamp(56px, 6vw, 96px);
text-align: center;
}
.cta-final h2{ margin-bottom: var(--space-6); }
.cta-final .cta-row{ justify-content: center; }
.cta-final .reassure{ color: rgba(255,255,255,.55); }
/* Les boutons sur le noir : blancs, texte noir. */
:is(.cta-band, .cta-final) .btn{
border-color: #fff;
background: #fff;
color: var(--ink);
}
:is(.cta-band, .cta-final) .btn:hover{
background: transparent;
color: #fff;
}
/* Le pied de page. */
.site-footer{
border-top: 0;
background: var(--noir-fin);
color: rgba(255,255,255,.72);
}
/* Le filet qui sépare le bandeau du pied de page, dans la colonne. Sur les
pages sans bandeau (formulaires, mentions), il marque simplement le haut
du bloc noir. */
.site-footer__top{
padding-top: var(--space-8);
border-top: 1px solid var(--noir-filet);
border-bottom-color: var(--noir-filet);
}
.site-footer .brand{ color: #fff; }
.site-footer__titre{ color: #fff; }
.site-footer__blurb{ color: rgba(255,255,255,.6); }
.site-footer h2{ color: #fff; }
.site-footer a{ color: rgba(255,255,255,.72); }
.site-footer a:hover{ color: #fff; }
.site-footer__tel a{ color: #fff; }
.site-footer__tel span,
.site-footer__bottom,
.site-footer__legal a{ color: rgba(255,255,255,.5); }
/* Après un bandeau noir, le pied de page commence directement par son filet
(le bandeau a déjà son air en bas). Sans bandeau, le noir commence au pied
de page : il garde son espace en haut. */
.site-footer{ padding-top: var(--space-9); }
body:has(:is(.cta-band, .cta-final)) .site-footer{ padding-top: 0; }
/* ===========================================================================
LE HAUT DES PROFILS (29 septembre)
- Sur ordinateur, le nom et le métier posés sur la vidéo rejoignent la
colonne du site (ils étaient collés au bord gauche de l'écran), et les
commandes (pause, « Écouter ») s'alignent sur son bord droit.
=========================================================================== */
@media (min-width: 1025px){
.vhero--bande .vscreen__moitie{
padding-inline: max(var(--margin-x), calc((100% - var(--content-max)) / 2));
}
.vhero--bande .vscreen__cmds{
right: max(var(--margin-x), calc((100% - var(--content-max)) / 2));
}
}
/* Les fiches à fond clair (Cyrus, Véra, Pierre) suivent la colonne en deux
moitiés, comme les cartes : le portrait part du bord gauche, le nom et la
bio de la ligne du milieu. */
@media (min-width: 1025px){
.ouv__grid{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
justify-content: stretch;
gap: var(--space-8);
}
.ouv__media{ justify-content: flex-start; }
.ouv__body{ max-width: none; }
}
/* La barre des noms s'efface quand le bandeau de fin entre dans l'écran
(voir « initFinBarreNoms » dans site.js). */
.index-zone .index-noms{
transition: transform var(--t-entree) var(--ease), opacity .25s var(--ease), visibility .25s;
}
body.fin-en-vue .index-zone .index-noms{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ===========================================================================
« ÉCOUTER » DEVIENT LA CROIX (29 septembre) — fiches à bande vidéo
Au clic, la bande s'agrandit en plein écran (460 ms). Dans le même temps,
la pastille « Écouter » perd son mot, se resserre en rond avec une croix,
et glisse du bord de la colonne jusqu'au coin bas droit de l'écran — hors
des marges : c'est une commande du média, pas du texte. À la fermeture,
le mouvement se fait à l'envers. (Logique : « ecouter » / « quitterSon »
dans site.js.)
=========================================================================== */
.vhero--bande .vscreen__cmds{
transition: right 460ms var(--ease), bottom 460ms var(--ease);
}
.vhero--bande.is-plein .vscreen__cmds{
right: 32px;
bottom: 32px;
}
/* Le mot « Écouter » se replie (ordinateur et tablette seulement : sur
téléphone, la pastille n'est déjà qu'une icône). */
@media (min-width: 641px){
.vscreen__son > span{
display: inline-block;
max-width: 8em;
overflow: hidden;
transition: max-width 300ms var(--ease), opacity 200ms var(--ease);
}
}
.vscreen__son{
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
padding 300ms var(--ease), gap 300ms var(--ease);
}
.vscreen__son.is-fermer{
position: relative;
min-width: 44px; height: 44px;
padding: 0; gap: 0;
justify-content: center;
}
.vscreen__son.is-fermer > span{ max-width: 0; opacity: 0; }
.vscreen__son.is-fermer > svg{ display: none; }
.vscreen__son.is-fermer::before{
content: "✕";
font-size: 16px;
line-height: 1;
}
/* Sur téléphone, les commandes sont en haut à gauche de la bande : en plein
écran, la croix se pose directement dans le coin bas droit (un glissement
en diagonale sur tout l'écran serait plus gênant qu'utile). */
@media (max-width: 640px){
.vhero--bande.is-plein .vscreen__cmds{
top: auto; left: auto;
right: 20px; bottom: 20px;
transition: none;
}
/* Sur téléphone, la pastille n'a ni fond ni bordure : la croix en reçoit
pour rester visible sur n'importe quelle image. */
.vhero--bande .vscreen__son.is-fermer{
border: 1px solid var(--on-media-line);
border-radius: 999px;
background: var(--veil-soft);
}
}
@media (prefers-reduced-motion: reduce){
.vhero--bande .vscreen__cmds,
.vscreen__son, .vscreen__son > span{ transition: none; }
}
/* ===========================================================================
LA BARRE DU HAUT EST TOUJOURS OPAQUE (29 septembre)
Comme sur anthropic.com : même fond clair et même texte noir sur toutes les
pages. Les vidéos (accueil, À propos, profils) ne passent plus SOUS la
barre : elles commencent juste en dessous. Le visage n'est plus découpé par
une rangée de liens, et la barre ne change plus de couleur d'une page à
l'autre.
- La classe « site-header--sur-video » est retirée du HTML : le JavaScript
qui la basculait (« initHeaderVideo ») ne fait donc plus rien.
- Les écrans vidéo mesurent la hauteur de la fenêtre MOINS la barre.
- Le voile sombre posé en haut des vidéos pour lire la barre est retiré.
=========================================================================== */
.vhero,
.vhero--bande{ margin-top: 0; }
.vscreen{
height: calc(100vh - var(--header-h));
height: calc(100svh - var(--header-h));
}
.vscreen--long{
padding-top: 0;
min-height: calc(100svh - var(--header-h));
}
.vhero--bande.is-plein{ --bande-h: calc(100svh - var(--header-h)); }
.vscreen__media::after{ display: none; }
/* Sur téléphone, les petites commandes (pause, son) étaient placées à
« hauteur de la barre + 12 px » depuis le haut de l'écran, pour passer sous
la barre transparente. La vidéo commence maintenant sous la barre : elles
se posent à 12 px du haut de la vidéo. */
@media (max-width: 640px){
.vhero .vscreen__cmds,
.vhero--bande .vscreen__cmds,
.vhero:not(.vhero--bande) .vscreen__cmds{ top: var(--space-3); }
.vhero--bande.is-plein .vscreen__cmds{ top: auto; }
}
/* ===========================================================================
PENDANT L'ÉCOUTE, LA BARRE S'EN VA (29 septembre)
Au clic sur « Écouter » (accueil et profils), la barre du haut glisse vers
le haut pendant que la vidéo remonte prendre sa place et occupe tout
l'écran — un seul mouvement, 460 ms, la même courbe que l'agrandissement.
À la fermeture (croix ou Échap), tout revient. La classe est posée par
« ecouter » et retirée par « quitterSon » dans site.js.
=========================================================================== */
.vhero{ transition: margin-top 460ms var(--ease); }
.vhero--bande{ transition: height 460ms var(--ease), margin-top 460ms var(--ease); }
.vscreen{ transition: height 460ms var(--ease); }
body.ecoute-barre-cachee .site-header{
transform: translateY(-100%);
transition: transform 460ms var(--ease);
}
body.ecoute-en-grand .vhero{ margin-top: calc(-1 * var(--header-h)); }
body.ecoute-en-grand .vhero--bande.is-plein{ --bande-h: 100svh; }
body.ecoute-en-grand .vhero:not(.vhero--bande) .vscreen{ height: 100vh; height: 100svh; }
@media (prefers-reduced-motion: reduce){
.vhero, .vhero--bande, .vscreen,
body.ecoute-barre-cachee .site-header{ transition: none; }
}
/* LE LECTEUR NE CHANGE JAMAIS DE TAILLE (29 septembre).
Sur l'accueil (et À propos), le cadre de la vidéo suivait la hauteur de
l'écran : pendant l'agrandissement de l'écoute, le lecteur Vimeo était
redimensionné à chaque image et se redessinait, parfois en noir. Le cadre
garde maintenant la hauteur d'un écran ENTIER, calé en bas : hors écoute,
ses 64 px du haut sont rognés (c'est le cadrage d'avant, quand la barre
transparente les recouvrait) ; pendant l'écoute, l'écran s'agrandit vers le
haut et les révèle, sans que rien ne soit redimensionné. Sur les profils,
c'était déjà le cas (cadre d'un écran entier, calé en haut). */
.vhero:not(.vhero--bande) .vscreen__media{
inset: auto 0 0 0;
height: 100vh;
height: 100svh;
}
/* ===========================================================================
L'ACCUEIL GARDE SON PLEIN ÉCRAN (29 septembre)
Sur l'accueil seulement, la barre redevient transparente sur la vidéo
(classe « site-header--sur-video » dans index.html) : la vidéo occupe tout
l'écran et passe sous la barre. Tant qu'on est sur la vidéo, la barre ne se
cache pas ; une fois la vidéo passée, elle redevient opaque et suit les
règles des autres pages (« initHeaderVideo » et « initHeaderAuto » dans
site.js). Pendant l'écoute, elle glisse hors de l'écran — la vidéo, déjà
plein écran, ne bouge plus du tout.
Les autres pages (profils, À propos…) gardent la barre opaque.
=========================================================================== */
.vhero--accueil{ margin-top: calc(-1 * var(--header-h)); }
.vhero--accueil .vscreen{ height: 100vh; height: 100svh; }
/* Le voile léger en haut de la vidéo, qui rend les liens blancs lisibles. */
.vhero--accueil .vscreen__media::after{ display: block; }
@media (max-width: 640px){
/* Sur téléphone, les commandes repassent sous le logo, sous la barre. */
.vhero.vhero--accueil:not(.vhero--bande) .vscreen__cmds{ top: calc(var(--header-h) + var(--space-3)); }
}
/* SUR L'ACCUEIL, LA BARRE FAIT PARTIE DE L'IMAGE (voir « initHeaderAccueil »).
Elle est posée en haut du document (absolute) et défile avec la vidéo ;
une fois la vidéo passée, elle devient fixe en haut de l'écran. Dans les
deux cas elle est hors du flux : la vidéo commence donc tout en haut, sans
marge négative. */
body.accueil-plein .site-header{
position: absolute;
top: 0; left: 0; right: 0;
}
body.accueil-plein .site-header.site-header--fixe{ position: fixed; }
.vhero--accueil,
body.ecoute-en-grand .vhero--accueil{ margin-top: 0; }
/* ===========================================================================
LE LOGO DESSINÉ (29 septembre)
« CHAPITRE » n'est plus du texte mais un dessin : images/logo/chapitre.svg.
Le dessin sert de POCHOIR (mask) et la couleur vient de « color » : le logo
prend donc tout seul le blanc sur la vidéo, l'encre ailleurs, l'encre quand
le menu est ouvert — les règles de couleur existantes n'ont pas changé.
Le mot « Chapitre » reste dans le lien, invisible (.sr-only), pour les
lecteurs d'écran et Google.
Proportions du dessin : 5473 × 838, soit 6,53 pour 1 (dessin du 30 sept.).
Le I descend sous les autres lettres (c'est un signet) : centrer la boîte
ferait paraître le mot trop haut. On centre les CAPITALES : la boîte
descend de 8 % de sa hauteur.
Pour changer la taille : les deux largeurs ci-dessous, rien d'autre.
=========================================================================== */
.site-header .brand,
.site-footer .brand{
display: block;
position: relative;
flex: 0 0 auto;
width: 150px;
aspect-ratio: 5473 / 838;
background-color: currentColor;
-webkit-mask: url("../images/logo/chapitre.svg") center / contain no-repeat;
mask: url("../images/logo/chapitre.svg") center / contain no-repeat;
transform: translateY(8%);
/* Neutralise l'ancien calage du mot en texte (left: 28px ; top: 50%). */
inset: auto;
}
@media (max-width: 1024px){
.site-header .brand{ width: 120px; }
}
/* Le logo est centré par ses capitales (ci-dessus) : le bloc ne s'aligne
plus sur une ligne de base, qu'un dessin n'a pas. */
@media (min-width: 641px){
.site-header .brand-bloc{ align-items: center; }
/* … et « Agence de conférenciers » descend pour poser sa ligne de base
sur celle des capitales du logo (mesuré avec Inter). */
.site-header .brand-titre{ position: relative; top: 3px; }
}
@media (min-width: 1025px){
.site-header .brand-titre{ top: 4.5px; }
}
/* Sur téléphone, « Agence de conférenciers » passe sous le logo : un peu
d'air pour que la pointe du signet ne touche pas le texte. */
@media (max-width: 640px){
.site-header .brand-bloc{ gap: 5px; }
}
/* Dans le pied de page, le logo signe la page : un peu plus grand que dans
la barre, sans décalage (il n'y a rien à centrer). */
.site-footer .brand{ width: 170px; transform: none; }
@media (max-width: 1024px){
.site-footer .brand{ width: 140px; }
}
/* ===========================================================================
UN SEUL RÉGLAGE POUR LES GRANDS TITRES (29 septembre)
Tous les titres sont en Inter, mais ils avaient trois réglages : 700 et
très serrés (-0.04em), 700 et serrés (-0.02em), 600 et -0.025em. Le même
titre « Pour une IA porteuse d'espoir » semblait écrit dans deux polices
selon la page. Désormais : graisse 600, serrage léger (-0.02em), le
réglage le plus proche d'anthropic.com — des titres qui respirent au lieu
de faire bloc.
=========================================================================== */
body :is(h1.display, .page-title, .ouv__nom, .sujet-ouv__titre, .vscreen__nom,
.tete-section__titre h2, .enjeu__titre, .fgroupe__label, .podcast__titre,
.titre-moyen, .speaker__name, .cta-final h2, .cta-band h2, .intro h1,
.bandeau-page h1, .intro--theme h1, .apropos__titre){
font-weight: 600;
letter-spacing: -0.02em;
}
/* Les titres moyens (conférences, questions de la FAQ) passent eux aussi à
600 : le gras 700 ne reste nulle part dans les titres. */
body :is(.qa__q, .talk__title, .format__nom, .sujet__titre){ font-weight: 600; }
/* LA QUESTION SUR LA VIDÉO suit le même réglage que les autres grands
titres. (Essayée en serif le 29 septembre, abandonnée le jour même.) */
body .vscreen__punch{
font-weight: 600;
letter-spacing: -0.02em;
}
/* ===========================================================================
MENU DU HAUT EN NOIR, SOULIGNÉ AU SURVOL (29 septembre)
Sur le modèle d'anthropic.com : les liens sont un peu plus grands (15 px),
en noir et non plus en gris. Au survol, un trait fin apparaît sous le mot ;
il reste sous la page où l'on se trouve — le gris ne faisant plus la
différence, c'est le trait qui dit « vous êtes ici ».
Le trait est un soulignement de texte dont seule la couleur change : le
menu ne bouge pas d'un pixel quand il apparaît.
Sur la vidéo de l'accueil, les liens sont en blanc plein.
=========================================================================== */
@media (min-width: 1025px){
.site-nav a{
font-size: 15px;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ text-decoration-color: currentColor; }
.site-header--sur-video .site-nav a{ color: #fff; }
}
/* ===========================================================================
LES TEXTES À LIRE EN NOIR (29 septembre)
Les bios, les chapeaux et les textes d'introduction étaient en gris
(#6B6B6B). Un gris est fait pour ce qu'on survole — métier sous un nom,
légende, date, mention — pas pour ce qu'on lit en entier. Comme sur
anthropic.com, tout texte fait pour être lu passe en noir d'encre. Le gris
reste pour les métiers, les légendes, les dates, le pied de page et les
mentions.
=========================================================================== */
body :is(.bio-detail, .ouv__bio .bio-detail, .tete-section__soustitre,
.sujet__chapo, .fgroupe__quoi, .cadrage p, .intro__manifesto,
.manifesto__lede, .page-head__lede, .podcast__chapo,
.argument__texte p, .appel__intro, .temoignage__texte,
.talk__angle, .legal p, .legal li){
color: var(--ink);
}
/* ===========================================================================
LES TITRES EN SORA (29 septembre)
Inter est faite pour les textes et les menus : en grand, elle reste étroite
et neutre. Les titres passent en Sora, une grotesque large et ronde, plus
proche de l'esprit d'anthropic.com (dont la police, dessinée pour eux,
n'est pas disponible). Textes, menus et boutons restent en Inter.
Une seule graisse chargée : 600.
=========================================================================== */
body :is(h1.display, .page-title, .ouv__nom, .sujet-ouv__titre, .vscreen__nom,
.vscreen__punch, .tete-section__titre h2, .enjeu__titre, .fgroupe__label,
.podcast__titre, .titre-moyen, .speaker__name, .cta-final h2, .cta-band h2,
.intro h1, .bandeau-page h1, .intro--theme h1, .apropos__titre){
font-family: var(--font-titre);
font-weight: 600;
letter-spacing: -0.03em;
}
body :is(.sujet__titre, .talk__title, .format__nom, .qa__q){
font-family: var(--font-titre);
font-weight: 600;
letter-spacing: -0.02em;
}
/* Sora a des minuscules plus hautes qu'Inter : à interligne égal, deux lignes
de titre se touchaient presque. On desserre d'un cran. */
body :is(h1.display, .page-title, .ouv__nom, .sujet-ouv__titre, .vscreen__punch,
.tete-section__titre h2, .enjeu__titre, .fgroupe__label, .titre-moyen,
.intro h1, .bandeau-page h1, .intro--theme h1, .apropos__titre){
line-height: 1.1;
}
body :is(.vhero--accueil, .vhero--apropos) .vscreen__punch{ line-height: 1.1; }
/* ===========================================================================
ACCUEIL : LES TITRES SONT LES LIENS (30 septembre)
Plus de « Voir tous les conférenciers », « Voir les sujets » ni « Voir les
conférenciers » : le titre lui-même mène à la page (Nos conférenciers →
Conférenciers, Nos sujets → Sujets, chaque sujet → sa page). Au survol,
il se souligne, comme le menu et les noms sous les portraits : sur tout
le site, ce qui se souligne se clique. Les vidéos ne sont pas des liens :
elles se lisent sur place.
=========================================================================== */
.titre-lien{
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.05em;
text-underline-offset: 0.14em;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
.titre-lien:hover,
.titre-lien:focus-visible{ text-decoration-color: currentColor; }
/* ===========================================================================
FLÈCHES DES RANGÉES : NUES, EN NOIR, JUSTE AU-DESSUS DES CARTES (30 sept.)
- Place : au bout de la phrase d'introduction, à droite, donc au coin haut
droit de la rangée qu'elles font défiler (elles étaient à hauteur du
titre, loin des cartes). Sur l'accueil, les sujets rangent leur phrase et
leurs flèches dans « .sujet__bas ».
- Dessin : une flèche nue (une tige et une pointe), sans cadre ni rond, en
noir. Au bout de la rangée, la flèche de ce côté passe en gris clair.
- Les flèches de la vidéo de l'accueil (à côté de « 01 / 05 ») perdent
aussi leur rond : un seul modèle de flèche sur le site.
=========================================================================== */
.tete-section--avec-lien > .etagere__nav{ margin-bottom: 0; }
.sujet__bas{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
}
.sujet__bas .sujet__chapo{ flex: 1 1 auto; }
.sujet__bas .etagere__nav{ flex: 0 0 auto; }
.arrow-bare{
color: var(--ink);
display: inline-grid;
place-items: center;
}
.arrow-bare[disabled]{ color: var(--ink-disabled); }
.arrow-bare::before,
.arrow-bare::after{ grid-area: 1 / 1; content: ""; }
/* La pointe */
.arrow-bare::before{
width: 8px;
height: 8px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translateX(5px) rotate(45deg);
}
.arrow-bare[data-etagere-prec]::before{
transform: translateX(-5px) rotate(-135deg);
}
/* La tige */
.arrow-bare::after{
width: 18px;
height: 1.5px;
background: currentColor;
}
/* La vidéo de l'accueil : mêmes flèches nues, en blanc. */
.vscreen__pagin__fleche{
border: 0;
border-radius: 0;
width: 36px;
color: #fff;
font-size: 20px;
}
.vscreen__pagin__fleche:hover{ background: transparent; opacity: .75; }
/* ===========================================================================
HARMONISATION SUR LE STYLE DU MENU (30 septembre)
Référence : les liens du menu du haut — Inter, graisse normale (400), noir,
un trait fin qui n'apparaît qu'au survol. Tout ce qui s'en écartait sans
raison datait d'une version antérieure du site.
=========================================================================== */
/* ---- 1. Liens seuls : un seul style --------------------------------------
« Voir Antoine Buéno → » (vidéo), « Voir le profil → », « Voir les
conférenciers en… → » (page Sujets), « ← Tous les sujets », « Retour à
l'accueil ». Graisse 400, pas de trait au repos, trait fin au survol ; la
flèche → quand le lien mène ailleurs. */
body :is(.vscreen__voir, .link-arrow, .tete-voir, .sujet-ouv__retour){
font-family: var(--font);
font-weight: 400;
letter-spacing: 0;
color: var(--ink);
border-bottom: 0;
padding-bottom: 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
body :is(.vscreen__voir, .link-arrow, .tete-voir, .sujet-ouv__retour):hover{
text-decoration-color: currentColor;
}
body .vscreen__voir{ color: #fff; }
body :is(.link-arrow, .tete-voir){ font-size: 15px; }
body .link-arrow--quiet{ color: var(--ink); }
body :is(.link-arrow:not(.link-arrow--quiet), .tete-voir)::after{
content: "→";
margin-left: 8px;
display: inline-block;
transition: transform var(--t-fast) var(--ease);
}
body :is(.link-arrow, .tete-voir):hover::after{ transform: translateX(3px); }
body .sujet-ouv__retour{ font-size: 15px; }
/* ---- 2. Liens dans le texte : un seul trait fin, noir, décollé ---------- */
body :is(.lede-lien, .mot__lien, .lien-plateforme){
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
text-decoration-color: currentColor;
}
body :is(.lede-lien, .mot__lien, .lien-plateforme):hover{ text-decoration-color: var(--ink-secondary); }
/* ---- 3. Fin des petites capitales espacées ------------------------------
Toutes les étiquettes passent en minuscules, 14 px, graisse 500, sans
interlettrage — comme les étiquettes d'anthropic.com. */
body :is(.label-info, .mini__enjeu, .format__ref, .psection h2, .sujet__qui,
.temoignage__source, .tribune__genre, .pub-soustitre, .field__label,
.recap__key){
text-transform: none;
letter-spacing: 0;
font-size: 14px;
font-weight: 500;
}
/* Les têtes de rubrique des profils (« Exemples de conférences »,
« Publications »…) sont en noir : ce sont des titres, pas des mentions. */
body .psection h2{ color: var(--ink); font-size: 15px; }
body .field__label{ color: var(--ink); }
/* Pied de page : mêmes étiquettes, en blanc. */
body .footer-col h2{
text-transform: none;
letter-spacing: 0;
font-size: 14px;
font-weight: 500;
color: #fff;
}
/* ---- 4. Plus de rouge bordeaux -------------------------------------------
Le dernier reste de l'ancienne identité : les noms au-dessus des vidéos,
le nom actif de la barre des noms, l'onglet actif de la page Sujets. Le
site est noir et blanc ; le repère devient un trait, comme dans le menu. */
body :is(.sujet__qui, .mini__enjeu, .format__ref){ color: var(--ink); }
body .bandeau{ --accent: var(--ink); }
/* ---- 6. Barre des noms et onglets : le style du menu --------------------- */
body .index-noms__liste a{
font-size: 14px;
font-weight: 400;
color: var(--ink);
}
body .index-noms__liste a .index-noms__nom{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
body .index-noms__liste a:hover .index-noms__nom,
body .index-noms__liste a.est-actif .index-noms__nom{ text-decoration-color: currentColor; }
body .index-noms__liste a.est-actif{ color: var(--ink); }
/* ---- 5. Boutons : deux tailles, graisse 500 ------------------------------
Normal 15 px (dont « Prendre rendez-vous »), grand 16 px. Le bouton
« Écouter » des profils perd sa forme de pilule : mêmes angles (6 px) que
tous les autres. */
body .btn{ font-size: 15px; font-weight: 500; }
body .btn.btn--lg{ font-size: 16px; }
body .vscreen__son:not(.is-fermer){ border-radius: 6px; }
/* ---- 7. Derniers titres en Inter : passent en Sora ----------------------- */
body :is(.form-section__title, .legal h2){
font-family: var(--font-titre);
font-weight: 600;
letter-spacing: -0.02em;
}
/* ===========================================================================
ACCUEIL : SUJETS EN TROIS CARTES, PUIS LES CONFÉRENCES (30 septembre)
Deux écrans sous les portraits.
- Sujets : trois cartes grises côte à côte (titre-lien, phrase, un extrait,
les noms). Sur téléphone, elles défilent au doigt comme les portraits.
- Conférences : une phrase à gauche, un titre de conférence par
conférencier à droite, chaque ligne menant au profil.
=========================================================================== */
.sujets-cartes{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: clamp(28px, 3vw, 48px);
}
.sujet-carte{
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px;
border-radius: 6px;
background: var(--bg-subtle);
}
.sujet-carte__titre{
margin: 0;
font-family: var(--font-titre);
font-weight: 600;
letter-spacing: -0.02em;
font-size: 24px;
line-height: 1.15;
}
.sujet-carte__phrase{
margin: 0 0 6px;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.45;
color: var(--ink);
min-height: 4.35em; /* trois lignes : les vidéos s'alignent d'une carte à l'autre */
}
.sujet-carte__extrait{ list-style: none; margin: 0; padding: 0; }
body .sujet-carte__extrait .sujet__carte{ width: auto; min-width: 0; max-width: none; flex: none; margin: 0; }
.sujet-carte__noms{
margin: auto 0 0;
padding-top: 14px;
border-top: 1px solid #DADAD6;
font-size: 14px;
color: var(--ink-secondary);
}
.confs-accueil__grille{
display: grid;
/* Même grille que les cartes des sujets (trois colonnes, 24 px) : la
phrase prend la place de la première carte, la liste celle des deux
autres. Le bord gauche de la liste tombe sous celui de « Géopolitique ». */
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
align-items: start;
}
.confs-accueil__phrase{
margin: 0;
font-family: var(--font-titre);
font-weight: 600;
letter-spacing: -0.02em;
font-size: clamp(26px, 2.3vw, 36px);
line-height: 1.2;
}
.confs-accueil__liste{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.confs-accueil__liste li{ border-bottom: 1px solid var(--hairline); }
.conf-ligne{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 16px 0;
color: var(--ink);
text-decoration: none;
}
.conf-ligne__titre{
font-size: 17px;
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
.conf-ligne:hover .conf-ligne__titre{ text-decoration-color: currentColor; }
.conf-ligne__qui{ font-size: 15px; color: var(--ink-secondary); white-space: nowrap; }
@media (max-width: 1024px){
.confs-accueil__grille{ grid-template-columns: 1fr; }
}
@media (max-width: 1024px){
.sujets-cartes{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--margin-x);
gap: 16px;
margin-inline: calc(var(--margin-x) * -1);
padding-inline: var(--margin-x);
scrollbar-width: none;
}
.sujets-cartes::-webkit-scrollbar{ display: none; }
.sujet-carte{ flex: 0 0 min(84%, 420px); scroll-snap-align: start; padding: 22px; }
.sujet-carte__phrase{ min-height: 0; }
}
@media (max-width: 760px){
.conf-ligne{ flex-direction: column; gap: 4px; }
}
/* Sujets et conférences dans le MÊME encart (30 septembre) : la liste suit
les cartes après un simple blanc, comme sur anthropic.com. L'encart dépasse
un écran sur un portable — exception assumée à la règle « un écran par
encart ». */
.sujets-accueil .confs-accueil{ margin-top: clamp(72px, 8vw, 128px); }
/* Le chapeau du bandeau noir « Parlons de votre événement » suit la règle
des chapeaux du site : en serif, en blanc légèrement atténué (30 sept.). */
body .cta-band p{
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.45;
color: rgba(255, 255, 255, .82);
text-wrap: balance;
}
/* ===========================================================================
UNE ÉCHELLE DE TITRES FIXE (30 septembre)
Reprise du PRINCIPE d'anthropic.com : quatre tailles de titres, qui
grandissent un peu entre un téléphone (375 px) et un écran de 1600 px, puis
plus du tout. Plus rien ne dépend de la hauteur de l'écran.
--titre-xl : la question sur la vidéo 28 → 64 px
--titre-l : titres de page, noms, bandeaux 32 → 48 px
--titre-m : titres de section de l'accueil 28 → 32 px
--titre-s : titres de cartes, de conférences 20 → 24 px
Pour tout agrandir ou réduire d'un coup : changer ces quatre lignes.
(« html body » en tête des règles : elles doivent passer devant les
anciennes tailles écrites plus haut, parfois très précises.)
=========================================================================== */
:root{
--titre-xl: clamp(28px, 15.7px + 3.14vw, 64px);
--titre-l: clamp(32px, 1.6939rem + 1.3061vw, 48px);
--titre-m: clamp(28px, 1.6735rem + 0.3265vw, 32px);
--titre-s: clamp(20px, 1.1735rem + 0.3265vw, 24px);
}
html body .vhero .vscreen__punch{ font-size: var(--titre-xl); line-height: 1.1; }
html body :is(.sujet-ouv__titre, .enjeu__titre, .speaker__name, .ouv__nom,
.vhero--bande .vscreen__nom, .fgroupe__label, .podcast__titre,
.apropos__titre, .page-title, .intro h1, .bandeau-page h1, h1.display,
.manifesto h1, .cta-band h2, .cta-final h2){
font-size: var(--titre-l);
line-height: 1.1;
}
html body .vhero--accueil .vscreen__nom{
font-size: var(--titre-m);
line-height: 1.2;
}
/* Titres de section et phrase des conférences : la plus petite taille de
titre, celle des cartes — comme « Latest releases » et « At Anthropic, we
build… » sur anthropic.com (30 septembre). */
html body :is(.tete-section__titre h2:not(.enjeu__titre), .titre-moyen,
.confs-accueil__phrase){
font-size: var(--titre-s);
line-height: 1.25;
}
html body :is(.sujet-carte__titre, .sujet__titre, .talk__title, .qa__q,
.format__nom, .form-section__title, .legal h2){
font-size: var(--titre-s);
line-height: 1.2;
}
/* Sur téléphone, le nom au-dessus de la question de l'accueil reste plus
petit qu'elle. */
@media (max-width: 640px){
html body .vhero.vhero--accueil .vscreen__nom{ font-size: 20px; }
}
@media (min-width: 1025px){
.confs-accueil__liste{ grid-column: 2 / 4; }
}
/* ---- Titres de page courts : le cran du haut (30 septembre) --------------
Anthropic a trois niveaux : titre de page (« Policy »), titre de chapitre
(« Philosophy & approach »), étiquette. Nos titres de page COURTS prennent
le cran du haut : le nom en tête de chaque profil, les titres des pages
de formulaire, de confirmation et des pages légales, la page 404.
Les titres LONGS des pages de sujet restent en taille chapitre : à cette
taille, ils tomberaient sur cinq lignes.
Même taille que la question de l'accueil sur ordinateur (61 → 64 px),
mais 36 px sur téléphone au lieu de 28 : un nom seul peut être plus gros
qu'une question de trois lignes posée sur une vidéo. */
:root{ --titre-page: clamp(36px, 26.7px + 2.38vw, 64px); }
html body :is(.vhero--bande .vscreen__nom, .ouv__nom, .page-title, h1.display){
font-size: var(--titre-page);
line-height: 1.05;
}
/* « Conférenciers » et « Sujets » sur l'accueil : taille chapitre (46 → 48 px),
comme « Philosophy & approach » sur anthropic.com. Chaque encart fait un
écran : un titre de chapitre le remplit mieux qu'une étiquette. La phrase
des conférences reste petite (30 septembre). */
html body:has(.vhero--accueil) .tete-section__titre h2:not(.enjeu__titre){
font-size: var(--titre-l);
line-height: 1.1;
}
/* Sur téléphone, la question de la vidéo fait 28 px : les titres d'encart
restent un cran en dessous. */
@media (max-width: 640px){
html body:has(.vhero--accueil) .tete-section__titre h2:not(.enjeu__titre){ font-size: 24px; }
}
/* ===========================================================================
L'ACCUEIL SANS « UN ÉCRAN PAR ENCART » (30 septembre)
Seule la vidéo d'ouverture occupe l'écran entier. Les encarts suivants
prennent la hauteur de leur contenu, séparés par un blanc généreux mais
FIXE — plus de grands vides qui varient avec la hauteur de l'écran.
Pour revenir à un écran par encart : supprimer ce bloc.
=========================================================================== */
html body .section.section--plein,
html body .vhero + .section--plein{
min-height: 0;
display: block;
/* UN SEUL blanc entre deux blocs, porté par le HAUT de chaque encart :
avec du blanc en haut ET en bas, il se comptait deux fois entre deux
encarts (173 px) et une seule fois sous la vidéo (86 px). Le dernier
encart garde aussi son blanc du bas, avant le bandeau noir.
≈ 120 px sur portable, 150 px au plus, 64 px sur téléphone. */
padding-top: var(--ecart-encarts);
padding-bottom: 0;
}
html body .section.section--plein:has(+ .cta-band),
html body .section.section--plein:last-of-type{ padding-bottom: var(--ecart-encarts); }
:root{ --ecart-encarts: clamp(64px, 8.3vw, 150px); }
/* ===========================================================================
BOUTONS PLUS COMPACTS (30 septembre)
Sur le modèle d'anthropic.com : des boutons qui s'alignent sur la hauteur
du texte au lieu de faire bloc. Deux tailles :
- normal : 36 px de haut (barre du haut, bandeaux, formulaires) ;
- grand : 40 px (« Faire une demande », « Écouter l'extrait »).
Sur écran tactile, ils gardent 44 px de haut au minimum : c'est la taille
sous laquelle un doigt rate sa cible.
=========================================================================== */
html body .btn{
padding: 8px 16px;
min-height: 36px;
line-height: 1.2;
}
html body .btn.btn--lg,
html body :is(.vhero--accueil, .vhero--apropos) .vscreen__cta .btn{
padding: 10px 20px;
min-height: 40px;
font-size: 15px;
}
@media (hover: none){
html body .btn,
html body .btn.btn--lg,
html body :is(.vhero--accueil, .vhero--apropos) .vscreen__cta .btn{ min-height: 44px; }
}
/* ===========================================================================
OUVERTURE DES PAGES DE LISTE (30 septembre)
Conférenciers, Sujets et Questions fréquentes s'ouvrent comme les
pages de sujet et comme « Policy » sur anthropic.com : titre à gauche,
chapeau à droite. Titres courts : taille « titre de page ».
(Formats garde son ouverture propre : le mot de Théodore avec sa photo.)
=========================================================================== */
html body .ouv-page .sujet-ouv__titre{
font-size: var(--titre-page);
line-height: 1.05;
}
/* Le chapeau des ouvertures pèse un cran de plus face au titre de page :
22 px sur portable, 24 px au plus (19 px sur téléphone). Même taille sur les
pages de sujet, qui utilisent la même ouverture. */
html body .sujet-ouv__chapo{ font-size: clamp(19px, 1.53vw, 24px); }
/* ===========================================================================
LOGO QUI SE REPLIE — « CHAP|TRE » devient « C| » quand on défile
---------------------------------------------------------------------------
Dans la barre du haut, le logo est fait de trois morceaux superposés,
découpés dans le dessin d'origine sans rien redessiner (même cadre, donc
le mot complet est identique au pixel près) :
- brand__c : le C (images/logo/chapitre-c.svg)
- brand__reste : HAP et TRE (images/logo/chapitre-reste.svg)
- brand__barre : le signet | (images/logo/chapitre-barre.svg)
Quand on entre dans le contenu (js : initLogoReplie — après la vidéo
d'ouverture sur l'accueil et les profils, presque tout de suite
ailleurs), les lettres du milieu s'effacent et le signet glisse se coller au C. On remonte : le mot
revient. « Agence de conférenciers » s'efface en même temps.
Le 41.92 % : le chemin du signet jusqu'à sa place après le C
(3159 − 865) / 5473 unités du dessin. Le pied de page garde le mot entier.
=========================================================================== */
.site-header .brand{
background: none;
-webkit-mask: none;
mask: none;
}
.site-header .brand > .brand__c,
.site-header .brand > .brand__reste,
.site-header .brand > .brand__barre{
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask: var(--morceau) center / contain no-repeat;
mask: var(--morceau) center / contain no-repeat;
transition: opacity 300ms var(--ease), transform 450ms var(--ease);
}
.site-header .brand > .brand__c { --morceau: url("../images/logo/chapitre-c.svg"); }
.site-header .brand > .brand__reste{ --morceau: url("../images/logo/chapitre-reste.svg"); }
.site-header .brand > .brand__barre{ --morceau: url("../images/logo/chapitre-barre.svg"); }
.site-header .brand-texte{ transition: opacity 300ms var(--ease); }
.site-header--replie .brand > .brand__reste{ opacity: 0; }
.site-header--replie .brand > .brand__barre{ transform: translateX(-41.92%); transition-delay: 60ms; }
.site-header--replie .brand-texte{ opacity: 0; }
/* Menu ouvert sur téléphone : le mot entier revient. */
body.menu-ouvert .site-header--replie .brand > .brand__reste{ opacity: 1; }
body.menu-ouvert .site-header--replie .brand > .brand__barre{ transform: none; }
@media (prefers-reduced-motion: reduce){
.site-header .brand > .brand__reste,
.site-header .brand > .brand__barre,
.site-header .brand-texte{ transition: none; }
}
/* ===========================================================================
À PROPOS — LA LETTRE (30 septembre)
Comme la page « Constitution » d'Anthropic : le titre centré en haut,
puis une seule colonne de lecture centrée (environ 70 signes par ligne),
dans la serif. La photo au micro s'insère dans le texte, sur la largeur
de la colonne. La page n'a plus de vidéo d'ouverture.
=========================================================================== */
.apropos-lettre{ padding-block: clamp(56px, 7vw, 120px) var(--ecart-encarts); }
html body .apropos-lettre__titre{
margin: 0 auto;
max-width: 18ch;
font-family: var(--font-titre);
font-size: var(--titre-page);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
text-align: center;
text-wrap: balance;
color: var(--ink);
}
.apropos-lettre__texte{
max-width: 36rem;
margin: clamp(48px, 5vw, 88px) auto 0;
}
.apropos-lettre__texte p{
margin: 0 0 1em;
font-family: var(--font-serif);
font-size: clamp(18px, 1.25vw, 20px);
line-height: 1.55;
color: var(--ink);
}
.apropos-lettre__liste{
margin: 0 0 1em;
padding: 0;
list-style: none;
font-family: var(--font-serif);
font-size: clamp(18px, 1.25vw, 20px);
line-height: 1.55;
}
.apropos-lettre__liste li{
position: relative;
padding-left: 1.4em;
margin-bottom: .6em;
}
.apropos-lettre__liste li::before{
content: "—";
position: absolute;
left: 0;
}
/* La photo, façon photo d'article de journal : elle flotte à droite du
paragraphe sur la méthode. Sans coins arrondis ni ombre, comme les
portraits du site.
- Grand écran (≥ 1100 px) : 320 px, et elle déborde de 130 px dans la
marge droite, pour laisser au texte d'à côté une largeur confortable.
- Écrans moyens (700 à 1099 px) : 280 px, sans débordement.
- Téléphone (< 700 px) : 40 % de la colonne, 150 px au plus. */
.apropos-lettre__photo{
float: right;
width: 280px;
margin: .35em 0 var(--space-4) var(--space-6);
}
.apropos-lettre__photo img{
display: block;
width: 100%;
height: auto;
}
.apropos-lettre__photo figcaption{
margin-top: var(--space-2);
font-family: 'Inter', system-ui, sans-serif;
font-size: var(--fs-meta);
line-height: 1.4;
color: var(--ink-secondary);
}
@media (min-width: 1100px){
.apropos-lettre__photo{ width: 320px; margin-right: -130px; }
}
@media (max-width: 699px){
.apropos-lettre__photo{
width: 40%;
max-width: 150px;
margin: .3em 0 10px 14px;
}
}
/* Rien ne remonte à côté de la photo après la liste : la signature
repart sous elle si besoin. */
.apropos-lettre__signature{ clear: both; }
html body .apropos-lettre__texte p.apropos-lettre__signature{
margin-top: 1.6em;
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
}
/* ===========================================================================
PLUS DE FLÈCHE SUR LES LIENS (30 septembre)
« Voir … », « explorez la collection » : le verbe dit déjà qu'on peut
cliquer. Plus de flèche derrière ces liens, ni dans le menu du téléphone.
Seul « ← Tous les sujets » garde la sienne : elle indique le retour.
=========================================================================== */
html body :is(.link-arrow:not(.link-arrow--quiet), .tete-voir)::after,
html body .mobile-menu ul a::after{ content: none; }
/* « ← Tous les sujets » : seul le texte se souligne au survol, pas la
flèche ni l'espace entre les deux (comme « Read more → » chez Anthropic). */
html body .sujet-ouv__retour,
html body .sujet-ouv__retour:hover{ text-decoration: none; }
.sujet-ouv__retour-texte{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
text-decoration-color: transparent;
transition: text-decoration-color var(--t-fast) var(--ease);
}
.sujet-ouv__retour:hover .sujet-ouv__retour-texte,
.sujet-ouv__retour:focus-visible .sujet-ouv__retour-texte{ text-decoration-color: currentColor; }
/* ===========================================================================
PORTRAITS DES FICHES SUR LES ÉCRANS PEU HAUTS (30 septembre)
Page Conférenciers et pages de sujet, sur ordinateur : chaque fiche remplit
l'écran sous la barre et la barre des noms. Sur un petit portable (MacBook
11 pouces, environ 640 px de haut utiles), le portrait (4:5) était plus
haut que cette place : son bas sortait de l'écran. Sa largeur est donc
plafonnée pour que sa hauteur tienne, avec 24 px d'air en haut et en bas.
Sur un écran assez haut, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
body:has(.roster) .roster .speaker__media :is(.portrait, .player){
max-width: min(var(--player-max, 440px),
calc((100svh - var(--header-h) - var(--index-h, 0px) - 2 * var(--space-5)) * 0.8));
}
}
/* ===========================================================================
FICHES SUR TABLETTE ET PETITE FENÊTRE (641 à 1024 px) — 30 septembre
Entre le téléphone et l'ordinateur, la fiche passait sur une seule colonne
avec le portrait en PLEINE LARGEUR : 760 px de large sur une fenêtre de
820, près de 1 000 px de haut, le visage remplissait tout l'écran.
Elle prend maintenant la disposition du téléphone (portrait à gauche, nom
et fonction à droite, bio en dessous), avec un portrait de 240 px.
=========================================================================== */
@media (min-width: 641px) and (max-width: 1024px){
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker{
grid-template-columns: 240px minmax(0, 1fr);
column-gap: var(--space-6);
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media,
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__media :is(.portrait, .player){
width: 240px;
max-width: 240px;
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__name{
font-size: clamp(28px, 3.6vw, 36px);
}
body:has(:is(.index-noms--fiches, .bandeau-page)) .roster .speaker__role{
font-size: 17px;
}
}
/* ===========================================================================
FORMATS, LE MOT DE THÉODORE SUR TÉLÉPHONE : LE TEXTE COULE AUTOUR DE LA
PHOTO (30 septembre)
La photo était seule au-dessus du texte. Elle flotte maintenant à gauche
des premières lignes, comme dans un magazine, et le texte épouse la courbe
du rond (shape-outside). Tablette et ordinateur ne changent pas.
=========================================================================== */
@media (max-width: 640px){
.mot{ display: block; }
.mot__photo{
float: left;
width: 96px;
margin: 6px var(--space-4) var(--space-2) 0;
shape-outside: circle(50%);
shape-margin: 12px;
}
.mot__texte{ max-width: none; }
.mot::after{ content: ""; display: block; clear: both; }
}
/* ===========================================================================
MENU DU TÉLÉPHONE, FAÇON ANTHROPIC (30 septembre)
- Le bouton : trois traits FINS (1 px), celui du bas plus court. Ouvert,
il devient une croix aux mêmes traits fins.
- Le panneau GLISSE DU HAUT, de derrière le bandeau, en 480 ms, et remonte
à la fermeture (voir initMenu dans site.js, qui attend la fin de la
remontée pour le cacher). Plus de fondu ni d'entrées en cascade : tout
le panneau bouge d'un bloc.
- La composition : un filet sous le bandeau, les quatre entrées en grand
(police des titres), séparées par des filets, sans flèche ; en bas, le
bouton « Prendre rendez-vous » et, dessous, le numéro en bouton au trait.
Le lien SMS et la ligne d'horaires ne s'affichent plus dans le menu (ils
restent sur la page Prendre rendez-vous).
=========================================================================== */
html body .nav-toggle__bars,
html body .nav-toggle__bars::before,
html body .nav-toggle__bars::after{ height: 1px; width: 22px; }
html body .nav-toggle__bars::before{ top: -7px; }
html body .nav-toggle__bars::after{ top: 7px; width: 14px; }
html body .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
html body .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ top: 0; width: 22px; }
html body .nav-toggle__bars::after{
transition: transform 160ms var(--ease), top 160ms var(--ease),
width 160ms var(--ease), background 120ms var(--ease);
}
html body .mobile-menu{
opacity: 1;
transform: translateY(-100%);
/* La REMONTÉE : accélère puis ralentit (ease-in-out), 420 ms. */
transition: transform 420ms cubic-bezier(.65, 0, .35, 1);
padding-top: calc(var(--header-h) + 4px);
padding-bottom: var(--space-6);
}
/* La DESCENTE : part vite et se pose en douceur, 480 ms. */
html body .mobile-menu.is-ouvert{
transform: none;
transition: transform 480ms cubic-bezier(.32, .72, 0, 1);
}
/* Le filet sous le bandeau, quand le menu est ouvert. */
html body.menu-ouvert .site-header{ border-bottom: 1px solid var(--hairline); }
/* Les entrées bougent avec le panneau : plus de cascade. */
html body .mobile-menu ul li,
html body .mobile-menu > .btn,
html body .mobile-menu .menu-tel{ opacity: 1; transform: none; transition: none; }
html body .mobile-menu ul a{
padding: 22px 0;
font-family: var(--font-titre);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
}
/* En bas : le bouton, puis le numéro en bouton au trait, pleine largeur. */
html body .mobile-menu > .btn{ margin-top: auto; }
html body .mobile-menu .menu-tel{ margin-top: var(--space-3); display: block; }
html body .mobile-menu .menu-tel .tel-bloc:not(.tel-bloc--sms){
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 44px;
border: 1px solid var(--hairline);
border-radius: 6px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
}
html body .mobile-menu .menu-tel .tel-bloc--sms,
html body .mobile-menu .menu-tel .tel-heures{ display: none; }
@media (prefers-reduced-motion: reduce){
html body .mobile-menu{ transition: none; }
}
/* ===========================================================================
PAGES DE FORMULAIRE (Prendre rendez-vous, Votre demande) — 1er octobre
Mises au diapason des autres pages :
- L'ouverture est celle de Conférenciers, Sujets et FAQ : le titre à
gauche, calé sur le logo, le chapeau en serif à droite. Le formulaire
et l'appel direct suivent dans la colonne de droite (comme le texte sur
la page « Policy » d'Anthropic). Sous 1025 px, tout reste empilé.
- Champs et choix aux coins arrondis de 6 px, comme les boutons et cartes.
- Intertitres sans filet dessous.
- Le numéro, en bas, devient un bouton au trait, comme dans le menu.
=========================================================================== */
html body main:has(> .container > form.form) .page-head__lede{
font-family: var(--font-serif);
font-size: clamp(19px, 1.53vw, 24px);
line-height: 1.45;
color: var(--ink);
max-width: none;
}
@media (min-width: 1025px){
html body main:has(> .container > form.form) > .container{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: start;
}
html body main:has(> .container > form.form) .page-head{ display: contents; }
html body main:has(> .container > form.form) .page-title{
grid-column: 1;
grid-row: 1;
margin: 0;
padding-top: clamp(40px, 5vw, 88px);
font-size: var(--titre-page);
line-height: 1.05;
}
html body main:has(> .container > form.form) .page-head__lede{
grid-column: 2;
grid-row: 1;
margin: 0;
padding-top: clamp(40px, 5vw, 88px);
}
html body main:has(> .container > form.form) :is(form.form, .appel){
grid-column: 2;
max-width: none;
margin-inline: 0;
}
html body main:has(> .container > form.form) form.form{ margin-top: var(--space-9); }
}
html body .field input,
html body .field textarea,
html body .chip{ border-radius: 6px; }
html body .form-section__title{ border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-6); }
html body .appel .appel__actions{ gap: var(--space-3); }
/* (« display » n'est posé que sur le numéro : le lien SMS garde sa règle,
qui ne l'affiche que sur téléphone.) */
html body .appel .tel-bloc:not(.tel-bloc--sms){ display: inline-flex; }
html body .appel .tel-bloc{
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 20px;
border: 1px solid var(--hairline);
border-radius: 6px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
}
html body .appel .tel-bloc:hover{ border-color: var(--ink); }
/* Pages de formulaire, sur ordinateur : le formulaire s'étale sur les deux
colonnes de la page. Premier groupe de questions à gauche (sous le
titre), second groupe et bouton à droite (sous le chapeau), alignés en
haut. L'appel direct suit, sous la colonne de droite. */
@media (min-width: 1025px){
html body main:has(> .container > form.form) form.form{
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: start;
}
html body main:has(> .container > form.form) form.form > :not(.form-col){ grid-column: 1 / -1; }
html body main:has(> .container > form.form) .form-col--a{ grid-column: 1; }
html body main:has(> .container > form.form) .form-col--b{ grid-column: 2; }
html body main:has(> .container > form.form) .form-col--b > .form-section:first-child{ margin-top: 0; }
/* L'appel direct reste dans la colonne de droite, juste sous le
formulaire, sans le grand blanc de fin de formulaire entre les deux. */
html body main:has(> .container > .appel) form.form{ padding-bottom: 0; }
html body main:has(> .container > form.form) > .container > .appel{ margin-bottom: var(--section-y); }
}
/* Prendre rendez-vous : plus d'intertitre visible au-dessus des coordonnées
(il reste pour les lecteurs d'écran), et l'appel direct est rangé dans la
colonne de droite, sous le bouton. Les deux colonnes forment un seul
bloc, alignées en haut. */
html body .form-col--b .appel{ margin-top: var(--space-7); padding-top: var(--space-6); }
html body .form-section:has(> .form-section__title.sr-only){ margin-top: var(--space-8); }
@media (min-width: 1025px){
html body .form-col--b > .form-section:first-child{ margin-top: 0; }
}
/* Le bloc « Votre rendez-vous concerne… » est caché quand on n'arrive pas
d'un profil : la question qui le suit ne doit pas garder l'écart prévu
pour lui, sinon la colonne de gauche commence plus bas que la droite. */
html body .form-col > [hidden]:first-child + *{ margin-top: 0; }
/* ===========================================================================
À PROPOS : LA LETTRE PUIS LE PODCAST (1er octobre)
- Moins de blanc entre la signature et le bloc du podcast : 64 px de
chaque côté du filet, au lieu de 150 + 96.
- Sur ordinateur, les trois liens (YouTube, Spotify, Apple Podcasts) se
rangent à droite du texte de présentation au lieu de passer dessous :
le texte est un peu moins large pour leur laisser la place.
=========================================================================== */
html body .apropos-lettre{ padding-bottom: var(--space-9); }
html body .apropos-lettre + .section.section--ruled{ padding-top: var(--space-9); }
@media (min-width: 1025px){
html body .podcast{ flex-wrap: nowrap; gap: var(--space-8); }
html body .podcast__chapo{ max-width: 520px; }
html body .podcast__liens{ flex: 0 0 auto; }
}
/* ===========================================================================
BAS DES FORMULAIRES : LES ACTIONS PUIS DES NOTES AU MÊME STYLE (1er oct.)
Prendre rendez-vous : le bouton d'envoi et le numéro (bouton au trait)
côte à côte, à la même hauteur ; « Écrire un SMS » s'y ajoute sur
téléphone. Dessous, les lignes d'information ont toutes le même style :
15 px, gris, même interligne — sur les deux pages de formulaire.
=========================================================================== */
html body .form-submit__actions{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
html body .form-submit__actions .tel-bloc:not(.tel-bloc--sms){ display: inline-flex; }
html body .form-submit__actions .tel-bloc{
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border: 1px solid var(--hairline);
border-radius: 6px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
html body .form-submit__actions .tel-bloc:hover{ border-color: var(--ink); }
@media (hover: none){
html body .form-submit__actions .tel-bloc{ height: 44px; }
}
html body :is(.form-submit__note, .form-submit .form-legal){
margin: var(--space-4) 0 0;
max-width: 34rem;
font-size: 15px;
line-height: 1.5;
color: var(--ink-secondary);
}
html body .form-submit__note + .form-submit__note{ margin-top: var(--space-2); }
html body .form-submit__actions + .form-submit__note{ margin-top: var(--space-5); }
@media (max-width: 640px){
html body .form-submit__actions > *{ width: 100%; }
}
/* Même hauteur pour les deux (ou trois) boutons : 40 px, 44 au doigt. */
html body .form-submit__actions > :is(.btn, .tel-bloc){
box-sizing: border-box;
height: 40px;
min-height: 0;
padding-block: 0;
line-height: 1;
}
@media (hover: none){
html body .form-submit__actions > :is(.btn, .tel-bloc){ height: 44px; }
}
html body .form-submit > .btn + .form-submit__note{ margin-top: var(--space-5); }
/* ===========================================================================
FORMATS SUR LA GRILLE DES AUTRES PAGES (1er octobre)
Sur ordinateur, la page suit la même grille que Conférenciers, Sujets, la
FAQ et les formulaires : deux moitiés, 48 px entre elles.
- Le mot de Théodore : la photo calée sur la marge gauche (elle tient la
place du titre des autres pages), le texte et le numéro dans la moitié
droite.
- Chaque groupe : « Sur scène » à gauche, sa phrase à droite.
- Chaque format : le nom et la durée à gauche, la description à droite,
calée sur la phrase du groupe.
Sous 1025 px, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
html body .mot{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: center;
}
html body .mot__photo{ justify-self: start; }
html body .mot__texte{ max-width: none; }
html body .fgroupe__tete{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: baseline;
}
html body .fgroupe__quoi{ margin: 0; max-width: none; }
html body .format{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
}
html body .format__def{ max-width: none; }
}
@media (min-width: 1025px){
/* Un peu plus d'air entre le mot et le premier groupe. */
html body .mot{ padding-bottom: var(--space-9); }
}
/* ===========================================================================
FORMATS : LE TITRE À LA PLACE DE LA PHOTO (1er octobre)
La page s'ouvre comme les autres : « Formats » à gauche, en titre de page,
et le mot de Théodore en chapeau à droite (même taille de serif que les
chapeaux des autres pages). Sur tablette et téléphone : le titre, puis le
texte en dessous.
=========================================================================== */
html body .mot__titre{
margin: 0;
font-family: var(--font-titre);
font-size: var(--titre-page);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
}
html body .mot__texte p{ font-size: clamp(19px, 1.53vw, 24px); line-height: 1.45; }
@media (min-width: 1025px){
html body .mot{
align-items: start;
padding-top: clamp(40px, 5vw, 88px);
}
}
@media (max-width: 1024px){
html body .mot{ display: block; }
html body .mot__titre{ margin-bottom: var(--space-5); }
}
/* ===========================================================================
FORMATS : LES GROUPES DANS UNE COLONNE CENTRÉE, RESSERRÉE (1er octobre)
L'ouverture (« Formats » + le mot de Théodore) reste sur la grille du site.
Les trois groupes, eux, passent dans une colonne centrée de 880 px, aux
marges plus larges que le reste du site (comme la lettre de l'À propos) :
le nom et la durée (260 px) et la description juste à côté, à 48 px — le
nom et sa définition se lisent ensemble. « Sur scène » et sa phrase sont
empilés en tête de colonne. Sous 1025 px, rien ne change.
=========================================================================== */
@media (min-width: 1025px){
html body .fgroupe{ max-width: 880px; margin-inline: auto; }
html body .fgroupe__tete{ display: block; }
html body .fgroupe__quoi{ margin: var(--space-tete) 0 0; }
html body .format{ grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--space-8); }
}
/* ===========================================================================
PAGE SUJETS : UN SOMMAIRE, FAÇON « POLICY » (1er octobre)
- Un seul fond (plus de bandes grises une sur deux) et un filet fin entre
deux sujets.
- Sur ordinateur : le titre (cliquable) dans la moitié gauche, le texte
dans la moitié droite, et dessous, à droite, les conférenciers en petites
vignettes (104 px) qui mènent chacune au profil. Chaque sujet tient en
un demi-écran : plus de « un sujet par écran » ni de grands portraits,
qui restent sur la page de chaque sujet.
- Tablette et téléphone : fond unique et filets aussi ; la disposition
empilée ne change pas.
=========================================================================== */
html body .enjeu,
html body .enjeu--gris{ background: none; }
/* Le filet entre deux sujets s'arrête aux marges, comme partout ailleurs. */
html body .enjeu + .enjeu{ position: relative; }
html body .enjeu + .enjeu::before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(100% - var(--margin-x) * 2, var(--rail-max));
border-top: 1px solid var(--hairline);
}
@media (min-width: 1025px){
html body .enjeu{
min-height: 0;
display: block;
padding-block: var(--space-9);
}
html body .enjeu > .container{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: start;
}
html body .enjeu .tete-section,
html body .enjeu .tete-section__titre{ display: contents; }
html body .enjeu .enjeu__titre{ grid-column: 1; grid-row: 1 / span 2; margin: 0; }
html body .enjeu .tete-section__soustitre{ grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
html body .enjeu .etagere__nav{ display: none !important; }
html body .enjeu .etagere{ grid-column: 2; grid-row: 2; margin-top: var(--space-6); overflow: visible; }
html body .enjeu .minis--rangee{
--carte-l: 104px;
flex-wrap: wrap;
gap: var(--space-5) var(--space-5);
}
html body .enjeu .minis--rangee > .mini,
html body .enjeu .minis--rangee > .mini + .mini{
flex: 0 0 104px;
width: 104px;
padding-left: 0;
}
html body .enjeu .mini__nom{ font-size: 14px; line-height: 1.3; margin-top: var(--space-2); }
html body .enjeu .mini__role{ font-size: 13px; line-height: 1.35; }
}
/* Page Sujets : la liste des conférenciers de chaque sujet (1er octobre).
Même objet que la liste des conférences de l'accueil. Sur ordinateur,
elle se range sous le texte, dans la moitié droite ; ailleurs, sous le
texte, sur toute la largeur. */
html body .enjeu .enjeu__noms{ margin-top: var(--space-6); }
@media (min-width: 1025px){
html body .enjeu .enjeu__noms{ grid-column: 2; grid-row: 2; }
}
@media (max-width: 1024px){
html body .enjeu .enjeu__noms{ margin-top: var(--space-5); }
}
/* ===========================================================================
ACCUEIL SUR TÉLÉPHONE : LES MÊMES ACTIONS QUE SUR ORDINATEUR (1er octobre)
- Sous la question : le bouton blanc « Écouter l'extrait », puis
« Voir … » juste dessous. La pastille de son, qui flottait en haut à
gauche sous le logo, disparaît.
- La pause quitte le haut de l'écran : discrète, en bas à droite, à la
hauteur des petits traits de pagination.
- Composition : le bloc de texte est calé en bas, avec des écarts
réguliers (nom, question, actions, traits) et la même marge en bas
que sur les côtés.
=========================================================================== */
@media (max-width: 640px){
html body .vhero--accueil:not(.vhero--bande) .vscreen__cmds .vscreen__son{ display: none; }
html body .vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son]{
display: inline-flex;
margin: 0;
}
/* Le bouton et « Voir … » côte à côte, sur une seule ligne : une ligne de
gagnée, pour que le nom reste dans la bande sombre de la vidéo même quand
la question tient sur trois lignes. */
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta{
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-5);
}
html body .vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son] + .vscreen__voir{
margin: 0;
}
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta .vscreen__pagin{ flex-basis: 100%; }
html body .vhero--accueil:not(.vhero--bande) .vscreen__cta .vscreen__pagin{
margin-top: auto;
padding-top: var(--space-6);
}
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cmds{
top: auto;
left: auto;
right: calc(var(--margin-x) - 12px);
bottom: var(--pause-bas, 18px);
}
}
@media (max-width: 640px){
/* Le bouton « Écouter l'extrait » reste un vrai bouton blanc (une ancienne
règle le changeait en lien souligné sur téléphone). */
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son]{
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
border-radius: 6px;
background: #fff;
color: var(--ink);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son]:hover{ background: var(--on-media); }
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__voir{ font-size: 15px; }
}
@media (max-width: 640px){
/* Pour que « Écouter l'extrait » et « Voir Nadia Guerouaou » (le nom le
plus long) tiennent sur la même ligne, même sur un petit téléphone. */
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta{ column-gap: var(--space-4); }
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__cta .btn[data-son]{ padding: 0 16px; }
html body .vhero.vhero--accueil:not(.vhero--bande) .vscreen__voir{ font-size: 14px; white-space: nowrap; }
}
/* Accueil, cartes Sujets (1er octobre) : les vidéos s'alignent d'une carte à
l'autre QUELLE QUE SOIT la longueur de la phrase. La hauteur minimale de
trois lignes ne suffisait pas (la phrase Géopolitique en fait quatre).
Les cartes partagent maintenant les mêmes rangées (subgrid) : titre,
phrase, extrait, noms — chaque rangée prend la hauteur de la plus haute. */
@media (min-width: 1025px){
html body .sujets-cartes{ grid-template-rows: repeat(4, auto); row-gap: 0; }
html body .sujet-carte{
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 14px;
}
html body .sujet-carte__phrase{ min-height: 0; }
html body .sujet-carte__noms{ margin-top: 0; align-self: start; }
}
/* ===========================================================================
PROFILS : LA BARRE POSÉE SUR LA VIDÉO, COMME SUR L'ACCUEIL (1er octobre)
Sur les profils qui ouvrent sur une vidéo, la bande remonte derrière la
barre (elle gagne la hauteur de la barre, son cadrage ne change pas). La
barre y est transparente, logo et liens en blanc, bouton blanc ; un voile
léger en haut de l'image les rend lisibles. Dès que la vidéo est passée
sous la barre, celle-ci redevient ivoire et opaque (initHeaderVideo, qui
bascule la classe « site-header--sur-video » posée dans le HTML).
Les profils sans vidéo (Cyrus, Véra, Pierre) gardent la barre opaque.
=========================================================================== */
html body:has(.vhero--bande) .vhero--bande{
margin-top: calc(-1 * var(--header-h));
height: calc(var(--bande-h) + var(--header-h));
}
html body:has(.vhero--bande) .vhero--bande .vscreen__media::after{ display: block; }
html body:has(.vhero--bande) .site-header{
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (max-width: 640px){
html body:has(.vhero--bande) .vhero--bande .vscreen__cmds{ top: calc(var(--header-h) + var(--space-3)); }
html body:has(.vhero--bande) .vhero--bande.is-plein .vscreen__cmds{ top: auto; }
}
/* Pendant l'écoute, la vidéo occupe exactement l'écran (sans la hauteur de
barre ajoutée ci-dessus), pour que les commandes du lecteur restent
visibles en bas. */
html body.ecoute-en-grand:has(.vhero--bande) .vhero--bande.is-plein{ height: 100vh; height: 100svh; }
/* ===========================================================================
PROFILS : PLUS DE FILET ENTRE LES ENCARTS (1er octobre)
« Exemples de conférences », « L'écouter avant… », « Publications »… sont
séparés par le blanc et par leur intitulé : le trait au-dessus de chaque
encart faisait double emploi et se confondait avec ceux de la liste des
conférences. Les filets ENTRE les conférences restent.
=========================================================================== */
html body .psection > .rail{ border-top: 0; }
/* Aucune liste du site n'a de filet AU-DESSUS de sa première ligne
(1er octobre) : les filets ne séparent que les lignes entre elles, et le
dernier ferme la liste. Accueil (conférences) et page Sujets (noms). */
html body .confs-accueil__liste{ border-top: 0; }
/* Ni filet au-dessus de la première ligne, ni filet sous la dernière : dans
toutes les listes, les filets ne font que SÉPARER les lignes (1er oct.).
Accueil et Sujets (.confs-accueil__liste), récapitulatif des pages de
confirmation (.recap, dont certaines lignes peuvent être masquées). Les
conférences des profils (.talk + .talk) et les formats suivaient déjà
cette règle. */
html body .confs-accueil__liste li:last-child{ border-bottom: 0; }
html body .recap{ border-top: 0; }
html body .recap__row{ border-bottom: 0; }
html body .recap__row:not([hidden]) ~ .recap__row:not([hidden]){ border-top: 1px solid var(--hairline); }
/* ===========================================================================
NOM LONG DANS L'OUVERTURE SANS VIDÉO (1er octobre)
Sur téléphone, le nom tient dans la colonne à droite du portrait (environ
150 px). « Grandcolas » à 36 px n'y entre pas et ferait défiler la page de
côté : ce nom-là descend juste ce qu'il faut. Les autres gardent 36 px.
=========================================================================== */
@media (max-width: 640px){
html body .ouv h1.ouv__nom--long{ font-size: min(36px, 6.4vw); }
}
/* ===========================================================================
MARGES DES ORDINATEURS PORTABLES (2 octobre, revu)
Avant : la colonne de contenu faisait 1 272 px dès que l'écran le
permettait. Sur un grand écran (2 300 px), c'est 55 % de la largeur : le
contenu est resserré au milieu. Sur un MacBook 13 pouces réglé en
« plus d'espace » (1 710 px), c'est 74 % : le contenu paraît écarté, les
marges maigres. Plus l'écran est petit, plus c'était marqué.
Maintenant, la colonne fait la moitié de l'écran plus 280 px, plafonnée à
1 272 px :
écran de 2 300 px et plus : 1 272 px (inchangé)
MacBook 13" « plus d'espace » (1 710) : 1 135 px, marges de 287 px
MacBook 13" par défaut (1 470) : 1 015 px, marges de 227 px
écran de 1 280 px (11-12") : 920 px, marges de 180 px
Jamais moins de 64 px de marge. Sous 1025 px (tablette, téléphone), rien
ne change. Le bandeau du haut suit la même marge.
=========================================================================== */
@media (min-width: 1025px){
:root{ --margin-x: max(64px, calc(25vw - 140px)); }
}
/* Avec ces marges, le bandeau du haut n'a plus la place pour « Agence de
conférenciers » sous 1 400 px de large : le bouton « Prendre rendez-vous »
sortait de la colonne. La ligne s'efface sur cette plage, comme elle le
faisait déjà sous 1 100 px ; elle reste dans le pied de page. */
@media (min-width: 1025px) and (max-width: 1399px){
html body .site-header .brand-texte{ display: none; }
}
/* La rangée des noms (page Conférenciers, page Sujets) a besoin d'environ
1 060 px pour tenir sur une ligne. Avec les marges ci-dessus, la colonne
n'en offre que 1 000 sur un MacBook 13" : la rangée tombait sur deux lignes.
Les NOMS seuls peuvent donc déborder dans la marge, jusqu'à 64 px du bord
(comme avant) ; le filet en dessous, lui, s'arrête toujours aux bords de
la colonne, dessiné en fond au lieu d'une bordure. */
@media (min-width: 1025px){
html body .index-noms__liste{
--deborde: max(0px, calc(var(--margin-x) - 64px));
margin-inline: calc(-1 * var(--deborde));
border-bottom: 0;
background: linear-gradient(var(--hairline), var(--hairline))
center bottom / calc(100% - 2 * var(--deborde)) 1px no-repeat;
}
}
/* ===========================================================================
PAGE SUJETS, TÉLÉPHONE ET TABLETTE : LA LISTE SUIT LE TEXTE (2 octobre)
Chaque texte de sujet se termine par « Nos conférenciers… » : la liste des
noms en est la suite. Entre la fin du texte et le premier nom, il y avait
64 px (24 de marge + 16 de rembourrage de la ligne + l'interligne) : la
liste semblait ouvrir une autre partie. L'écart tombe à 32 px. Le premier
nom n'a pas de filet au-dessus, retirer son rembourrage ne se voit pas.
Sur ordinateur, rien ne change.
=========================================================================== */
@media (max-width: 1024px){
html body .enjeux .enjeu__noms{ margin-top: 0; }
html body .enjeux .enjeu__noms > li:first-child > .conf-ligne{ padding-top: 8px; }
}