/* ============================================================================= LODGE-SUITE PANORAMIQUE — base.css [FONDATION] ----------------------------------------------------------------------------- Reset, typographie, grille, et TOUS les composants partagés par les 7 pages. Ces classes sont un CONTRAT : ne pas les renommer, ne pas les modifier. Une page qui a besoin d'autre chose écrit dans assets/css/pages/.css et ne touche jamais ce fichier. Ordre du fichier 00 Reset et fondation 01 Grille et conteneurs 02 Typographie 03 Signes éditoriaux (sur-titre, filet, folio, romain, fleuron, totem) 04 Liens et boutons 05 En-tête, navigation, menu 06 Planches (image + légende deux lignes) et grille asymétrique 07 Listes (principes, éditoriale, puces, portes, étapes) 08 Tableau, fil d'Ariane 09 Section nocturne 10 Pied de page 11 Mouvement (§8) — l'état masqué n'existe que sous .js 12 Mobile 13 prefers-reduced-motion 14 Impression ============================================================================= */ /* ═════════════════════════════════════════════ 00 · RESET ET FONDATION ═════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Pas de scroll-behavior: smooth. Un défilement détourné est proscrit (§8) et il casse tout défilement programmatique (outils de capture, ancres JS). */ scroll-padding-top: calc(var(--entete-h) + 24px); } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--serif); font-weight: var(--poids-corps); font-size: var(--t-corps); line-height: var(--lh-corps); letter-spacing: var(--ls-corps); font-kerning: normal; font-variant-numeric: oldstyle-num; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* garde-fou : rien ne doit déborder de 320 px à 1920 px */ overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--poids-display); } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; border: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } hr { border: 0; margin: 0; } ::selection { background: var(--selection); color: var(--texte-fort); } :focus-visible { outline: var(--filet-e-fort) solid var(--accent); outline-offset: 3px; } /* lien d'évitement — premier élément du de chaque page */ .saut { position: absolute; left: -9999px; top: 0; z-index: var(--z-saut); padding: 13px 20px; background: var(--encre); color: var(--parchemin); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; } .saut:focus { left: 0; } /* accessible aux lecteurs d'écran seulement */ .hors-ecran { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ══════════════════════════════════════ 01 · GRILLE ET CONTENEURS ═════════ */ /* .zone — LA marge du site. Tout ce qui doit s'aligner sur le bord gauche de la page vit dans une .zone : texte, filets ET images. C'est la discipline qui a fait gagner la direction ; ne pas la contourner. */ .zone { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--marge); } .zone--large { max-width: none; } /* pleine fenêtre, marge conservée */ .zone--etroite { max-width: 1080px; } /* .section — le rythme vertical d'une page. Une section = un sujet. */ .section { padding-top: var(--sp-section); } .section--serree { padding-top: var(--sp-bloc); } .section--ample { padding-top: calc(var(--sp-section) * 1.22); } .section--fin { padding-bottom: var(--sp-section); } /* grille de 12 colonnes — pour les mises en page qui sortent des gabarits */ .grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); row-gap: var(--sp-bloc); align-items: start; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } .col-fin-6 { grid-column: 7 / -1; } /* seconde moitié, ferrée à droite */ .col-fin-5 { grid-column: 8 / -1; } .col-fin-7 { grid-column: 6 / -1; } /* .duo — le gabarit à deux colonnes inégales, texte et image. Bases alignées : les deux colonnes se referment sur la même ligne. */ .duo { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: clamp(36px, 5.6vw, 88px); align-items: end; } .duo--egal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* .duo--texte : titre à gauche, texte à droite. Les PREMIÈRES LIGNES DE BASE des deux colonnes tombent au même pixel — la discipline d'alignement volée à la barre. */ .duo--texte { grid-template-columns: minmax(0, calc(var(--axe) - var(--gouttiere) / 2)) minmax(0, 1fr); gap: var(--gouttiere); align-items: baseline; } .duo--inverse > :first-child { order: 2; } .duo--haut { align-items: start; } /* .colonne-texte — une colonne de texte courant, mesure tenue */ .colonne-texte { max-width: var(--mesure); } .colonne-texte > * + * { margin-top: var(--e-3); } /* respiration explicite entre deux blocs d'une même section */ .respiration { height: var(--sp-bloc); } /* ════════════════════════════════════════════════ 02 · TYPOGRAPHIE ═════════ */ /* Titre d'affichage : le h1 du seuil. Un seul par page.

……

*/ .titre-affiche { font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-affiche); line-height: var(--lh-affiche); letter-spacing: var(--ls-affiche); color: var(--texte-fort); max-width: var(--mesure-titre); text-wrap: balance; } /* .ligne — enveloppe d'une ligne de titre, pour l'arrivée ligne par ligne */ .ligne { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .ligne > span { display: block; } /* Titres de section */ .titre-section { font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-2); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); color: var(--texte-fort); max-width: 18em; text-wrap: balance; } .titre-section--grand { font-size: var(--t-titre-1); line-height: 1.1; } .titre-section--petit { font-size: var(--t-titre-3); line-height: var(--lh-titre-s); } /* Titre d'item (principe, plaque, porte, note) */ .titre-item { text-wrap: balance; font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-3); line-height: var(--lh-titre-s); letter-spacing: var(--ls-titre); color: var(--texte-fort); } .titre-item--petit { font-size: var(--t-titre-4); } /* Chapô — ferré à gauche, dans la colonne du titre. Ne jamais le rejeter à droite ni le laisser flotter : c'est le défaut que le jury a nommé trois fois. Quatre lignes à mesure pleine valent mieux que deux lignes suspendues. */ .chapo { max-width: 30em; font-size: var(--t-chapo); line-height: var(--lh-chapo); color: var(--texte); } /* Texte courant */ .texte { max-width: var(--mesure); } .texte + .texte { margin-top: var(--e-3); } .texte--court { max-width: var(--mesure-courte); } .texte--doux { color: var(--texte-doux); } .texte--petit { font-size: var(--t-petit); line-height: 1.75; } /* Note : italique, petit, gris — la mention obligatoire sous une liste */ .note { font-style: italic; font-size: var(--t-petit); line-height: 1.72; color: var(--texte-doux); max-width: var(--mesure); } em, i { font-style: italic; } strong, b { font-weight: var(--poids-corps); font-style: italic; color: var(--texte-fort); } abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--trait); } /* ═════════════════════════════════════ 03 · SIGNES ÉDITORIAUX ═════════════ */ /* Sur-titre mono tracké — TOUJOURS avant le filet, qui précède le titre. */ .surtitre { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); line-height: 1.4; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--texte-meta); } .surtitre--pale { color: var(--texte-pale); } .surtitre--or { color: var(--accent); } /* le point médian d'un sur-titre : · */ .pt { display: inline-block; padding: 0 .62em; color: var(--texte-pale); } /* Filet — le hairline.
*/ .filet { height: var(--filet-e); background: var(--trait); } .filet--or { background: var(--accent); opacity: .55; } .filet--court { width: clamp(48px, 6vw, 90px); } /* Folio — la ligne de chapitre : rubrique à gauche, pagination à droite, filet dessous. C'est l'ouverture de chaque section.

I·Le seuil

01 — 06

*/ .folio { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: var(--filet-e) solid var(--trait); } .folio > :last-child { white-space: nowrap; } .folio--nu { border-bottom: 0; padding-bottom: 0; } /* Tête de section = folio + titre + chapô éventuel. */ .tete { margin-bottom: var(--sp-bloc); } .tete .titre-section, .tete .titre-affiche { margin-top: var(--sp-tete); } .tete .chapo { margin-top: var(--e-4); } /* Numérotation romaine — en mono, or, calée sur la ligne de base du titre. */ .romain { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); color: var(--accent); font-variant-numeric: normal; } .romain--pale { color: var(--texte-pale); } /* Fleuron : deux filets d'or encadrant un losange, centré. */ .fleuron { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--accent); font-size: 12px; line-height: 1; } .fleuron::before, .fleuron::after { content: ""; display: block; width: var(--filet-or-l); height: var(--filet-e); background: var(--accent); opacity: .55; } /* Phrase-totem entre filets d'or — une par page au maximum.

« … »

Dossier d'intention

*/ .totem { text-align: center; } .totem__phrase { margin-top: clamp(30px, 3.8vw, 50px); } .totem__phrase p { font-family: var(--display); font-weight: var(--poids-display); font-style: italic; font-size: var(--t-totem); line-height: var(--lh-totem); letter-spacing: -.005em; color: var(--texte-fort); max-width: var(--mesure-totem); margin-inline: auto; text-wrap: balance; } .totem__source { margin-top: clamp(26px, 3.2vw, 42px); } /* Le seuil — l'ouverture d'une page. Séquence identique sur les sept pages : folio pleine largeur, titre d'affichage, puis une rangée où le chapô est ferré à gauche et la porte à pousser ferrée à droite, tous deux sur la même ligne de base et sur les bords exacts de la planche qui suit. Cette rangée est le correctif du seul défaut que les trois juges ont nommé : un chapô suspendu qui laissait un rectangle vide sous le titre.
…

…

…

…

…
*/ .seuil { padding-top: clamp(32px, 3.4vw, 46px); } .seuil__titre { margin-top: var(--sp-seuil-1); } .seuil__mots { display: grid; grid-template-columns: minmax(0, var(--mesure-chapo)) minmax(0, 1fr); gap: clamp(22px, 3vw, 48px); align-items: end; margin-top: var(--sp-seuil-2); } .seuil__mots .chapo { max-width: none; } .seuil__porte { justify-self: end; } .seuil__planche { margin-top: var(--sp-seuil-4); } /* ══════════════════════════════════════════ 04 · LIENS ET BOUTONS ═════════ */ /* .lien — souligné qui se dessine de gauche à droite, en or. Pour le texte. */ .lien { position: relative; display: inline; color: inherit; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 var(--filet-e); padding-bottom: .12em; transition: background-size var(--d-souligne) var(--courbe); } .lien:hover, .lien:focus-visible { background-size: 100% var(--filet-e); } /* .lien-mono — LE traitement de lien du site : libellé mono tracké, filet fin dessous, flèche facultative. Répété à l'identique partout : c'est ce que le jury appelle « un seul traitement de lien ». Lire le concept */ .lien-mono { display: inline-flex; align-items: baseline; gap: .75em; position: relative; padding-bottom: 9px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--texte-fort); } .lien-mono::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--filet-e); background: var(--trait); } .lien-mono::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--filet-e); background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-souligne) var(--courbe); } .lien-mono:hover::after, .lien-mono:focus-visible::after { transform: scaleX(1); } .lien-mono em { font-style: normal; color: var(--accent); transition: transform var(--d-souligne) var(--courbe); } .lien-mono:hover em { transform: translateX(4px); } /* .bouton — un seul par page, en registre sombre. */ .bouton { display: inline-block; padding: 15px 30px 14px; background: var(--bouton-fond); color: var(--bouton-texte); font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; transition: background var(--d-souligne) var(--courbe), color var(--d-souligne) var(--courbe); } .bouton:hover, .bouton:focus-visible { background: var(--accent); color: var(--parchemin); } /* variante contour, sur fond nuit ou quand le bouton plein serait trop fort */ .bouton--contour { background: none; color: var(--texte-fort); box-shadow: inset 0 0 0 var(--filet-e) var(--trait); } .bouton--contour:hover, .bouton--contour:focus-visible { background: none; color: var(--accent); box-shadow: inset 0 0 0 var(--filet-e) var(--accent); } /* ═══════════════════════════════ 05 · EN-TÊTE, NAVIGATION, MENU ═══════════ */ .entete { position: sticky; top: 0; z-index: var(--z-entete); padding-block: var(--entete-pad); background: transparent; transition: padding var(--d-court) var(--courbe), background var(--d-court) var(--courbe), transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe); } /* posées par site.js */ .entete--fixee { padding-block: var(--entete-pad-min); background: var(--entete-fond); backdrop-filter: blur(7px); box-shadow: 0 var(--filet-e) 0 var(--trait); } .entete--masquee { transform: translateY(-102%); } .entete__interieur { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(24px, 3vw, 44px); } /* logotype : le sceau LSP posé devant le nom */ .marque { display: flex; align-items: center; gap: clamp(11px, 1.1vw, 17px); } .marque__sceau { flex: none; display: block; width: auto; height: clamp(32px, 3.2vw, 46px); transition: height var(--d-court) var(--courbe); } .entete--fixee .marque__sceau { height: clamp(27px, 2.5vw, 34px); } .marque__mots { display: block; } .marque__nom { display: block; font-family: var(--display); font-weight: var(--poids-display); font-size: clamp(12.5px, 1.3vw, 19px); letter-spacing: var(--ls-mono-l); text-transform: uppercase; color: var(--texte-fort); white-space: nowrap; } .marque__mention { display: block; margin-top: 8px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-pale); } .entete--fixee .marque__mention { opacity: 0; } /* navigation principale */ .nav__liste { display: flex; align-items: baseline; gap: clamp(18px, 2.1vw, 34px); } .nav a { position: relative; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte); padding-bottom: 5px; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--filet-e); background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-souligne) var(--courbe); } .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); } /* page courante : */ .nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--texte-fort); } .menu__liste a[aria-current="page"] { position: relative; } .menu__liste a[aria-current="page"] .menu__num { color: var(--texte-fort); } .menu__liste a[aria-current="page"]::before { content: "\25C6"; position: absolute; left: -.9em; top: .42em; font-size: .28em; color: var(--accent); } .pied__colonne a[aria-current="page"] { color: var(--texte-fort); } /* bouton menu (mobile) */ .menu-bouton { display: none; align-items: center; gap: 11px; padding: 4px 0; color: var(--texte-fort); } .menu-bouton__traits { display: block; width: 22px; height: 9px; position: relative; } .menu-bouton__traits i { position: absolute; left: 0; width: 22px; height: var(--filet-e); background: currentColor; transition: transform var(--d-souligne) var(--courbe), top var(--d-souligne) var(--courbe); } .menu-bouton__traits i:first-child { top: 0; } .menu-bouton__traits i:last-child { top: 8px; } .menu-bouton[aria-expanded="true"] .menu-bouton__traits i:first-child { top: 4px; transform: rotate(45deg); } .menu-bouton[aria-expanded="true"] .menu-bouton__traits i:last-child { top: 4px; transform: rotate(-45deg); } .menu-bouton__mot { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono-s); text-transform: uppercase; min-width: 46px; text-align: left; } /* menu plein écran */ .menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--fond); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--d-court) var(--courbe), visibility 0s linear var(--d-court); } .menu.est-ouvert { opacity: 1; visibility: visible; transition: opacity var(--d-court) var(--courbe), visibility 0s; } .menu__interieur { padding: calc(var(--marge) + 70px) var(--marge) var(--marge); } .menu__surtitre { margin-bottom: 26px; } .menu__liste li { border-top: var(--filet-e) solid var(--trait); } .menu__liste li:last-child { border-bottom: var(--filet-e) solid var(--trait); } .menu__liste a { display: flex; align-items: baseline; gap: 20px; padding: 19px 0; font-family: var(--display); font-weight: var(--poids-display); font-size: clamp(32px, 9vw, 46px); line-height: 1.1; color: var(--texte-fort); } .menu__num { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono-s); color: var(--texte-pale); min-width: 28px; } .menu__pied { margin-top: 40px; font-size: var(--t-petit); color: var(--texte-doux); } /* ═══════════════════════════════════════════════════ 06 · PLANCHES ════════ */ /* Bloc de planche : image + légende deux lignes.
…
Planche I Lodge-Suite Panoramique · Lisière
Lumière du soir
*/ .planche { display: block; } .planche__cadre { overflow: hidden; background: var(--fond-planche); } .planche__cadre picture { display: block; width: 100%; height: 100%; } .planche__cadre img { width: 100%; height: auto; } /* rapports de cadre — l'image est recadrée, jamais déformée */ .planche--bandeau .planche__cadre { aspect-ratio: 1308 / 470; } .planche--bandeau .planche__cadre img { height: 100%; object-fit: cover; object-position: 50% 66%; } .planche--large .planche__cadre { aspect-ratio: 16 / 9; } .planche--large .planche__cadre img { height: 100%; object-fit: cover; } .planche--carre .planche__cadre { aspect-ratio: 1 / 1; } .planche--carre .planche__cadre img { height: 100%; object-fit: cover; } .planche--portrait .planche__cadre { aspect-ratio: 3 / 4; } .planche--portrait .planche__cadre img { height: 100%; object-fit: cover; } /* légende de planche : mono tracké, deux lignes, jamais en surimpression */ .legende { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 15px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); line-height: var(--lh-mono); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-meta); } .legende__g { color: var(--texte-pale); white-space: nowrap; } .legende__d { text-align: right; } .legende--gauche { justify-content: flex-start; } .legende--gauche .legende__d { text-align: left; } /* Grille asymétrique de plaques — deux photographies de largeurs inégales dont les BAS TOMBENT AU MÊME PIXEL, chacune légendée dessous par sur-titre / titre / deux lignes / le même lien mono.
…
*/ .plaques { display: grid; /* 1,66 : 1 — la large tient ~62 % de la colonne, l'étroite ~38 %. Ce rapport est aussi ce qui fait tomber la large sur la source 800 w. */ grid-template-columns: minmax(0, 1.66fr) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 38px); align-items: start; } .plaques--egales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .plaques--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.66fr); } /* hauteur commune : c'est elle qui aligne les bas au pixel et pose les légendes sur une ligne de base commune. */ .plaques .planche__cadre img { object-position: 50% 62%; } .plaques .planche__cadre { height: var(--h-plaque, clamp(210px, 24.5vw, 356px)); aspect-ratio: auto; } .plaques .planche__cadre img { height: 100%; object-fit: cover; } .plaque { display: block; } .plaque__corps { padding-top: clamp(18px, 2vw, 26px); } .plaque__corps > .surtitre + .plaque__titre { margin-top: 12px; } .plaque__titre { text-wrap: balance; font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-4); line-height: var(--lh-titre-s); letter-spacing: var(--ls-titre); color: var(--texte-fort); } .plaque__texte { margin-top: 10px; max-width: 30em; font-size: var(--t-petit); line-height: 1.72; color: var(--texte); } .plaque__corps .lien-mono { margin-top: clamp(18px, 2vw, 26px); } /* ═══════════════════════════════════════════════════════ 07 · LISTES ══════ */ /* Liste de principes numérotés — rail de numéros romains, titre, texte.

  1. I

    …

    …

*/ .principes { border-top: var(--filet-e) solid var(--trait); } .principe { display: grid; grid-template-columns: var(--rail-num) minmax(0, calc(var(--axe) - var(--rail-num) - var(--gouttiere) * 1.5)) minmax(0, 1fr); gap: var(--gouttiere); align-items: baseline; padding: var(--sp-item) 0; border-bottom: var(--filet-e) solid var(--trait); } .principe__num { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); color: var(--accent); position: relative; top: -.15em; } .principe__titre { text-wrap: balance; font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-3); line-height: var(--lh-titre-s); letter-spacing: var(--ls-titre); color: var(--texte-fort); } .principe__texte { font-size: var(--t-petit); line-height: 1.78; color: var(--texte); max-width: 34em; } /* variante à deux colonnes (numéro + bloc), pour les étapes d'un parcours */ .principes--etroit .principe { grid-template-columns: var(--rail-num) minmax(0, 1fr); } .principes--etroit .principe__texte { grid-column: 2; margin-top: 10px; } /* Liste éditoriale — un terme fort, puis sa ligne. Sans puce, sur filets. */ .liste-edito { border-top: var(--filet-e) solid var(--trait); } .liste-edito__item { display: grid; grid-template-columns: minmax(0, calc(var(--axe) - var(--gouttiere) / 2)) minmax(0, 1fr); gap: var(--gouttiere); align-items: baseline; padding: var(--sp-item) 0; border-bottom: var(--filet-e) solid var(--trait); } .liste-edito__terme { text-wrap: balance; font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-4); line-height: var(--lh-titre-s); letter-spacing: var(--ls-titre); color: var(--texte-fort); } .liste-edito__texte { font-size: var(--t-petit); line-height: 1.72; color: var(--texte); max-width: 34em; } .liste-edito__meta { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-pale); } /* Liste à losanges — pour les énumérations courtes dans le corps du texte. */ .liste-puces { max-width: var(--mesure); } .liste-puces li { position: relative; padding-left: 1.55em; margin-top: var(--e-2); } .liste-puces li::before { content: "◆"; position: absolute; left: 0; top: .06em; font-size: .52em; line-height: 2.4; color: var(--accent); } /* Cartes de porte vers une section — la table des matières du site. */ .portes { border-top: var(--filet-e) solid var(--trait); } .porte { border-bottom: var(--filet-e) solid var(--trait); } .porte__lien { display: grid; grid-template-columns: var(--rail-num) minmax(0, calc(var(--axe) - var(--rail-num) - var(--gouttiere) * 1.5)) minmax(0, 1fr) 40px; gap: var(--gouttiere); align-items: baseline; padding: var(--sp-item) 0; transition: padding-left var(--d-court) var(--courbe); } .porte__num { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); color: var(--accent); position: relative; top: -.15em; } .porte__titre { text-wrap: balance; font-family: var(--display); font-weight: var(--poids-display); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: var(--ls-titre); color: var(--texte-fort); transition: color var(--d-souligne) var(--courbe); } .porte__texte { font-size: var(--t-petit); line-height: 1.75; color: var(--texte); max-width: 34em; } .porte__fleche { justify-self: end; color: var(--texte-pale); transition: transform var(--d-court) var(--courbe), color var(--d-court) var(--courbe); } .porte__lien:hover, .porte__lien:focus-visible { padding-left: 14px; } .porte__lien:hover .porte__titre, .porte__lien:focus-visible .porte__titre { color: var(--accent); } .porte__lien:hover .porte__fleche, .porte__lien:focus-visible .porte__fleche { color: var(--accent); transform: translateX(6px); } /* ══════════════════════════════════ 08 · TABLEAU, FIL D'ARIANE ════════════ */ /* Tableau simple — filets seulement, pas de fond, pas de bordure extérieure. */ .tableau { width: 100%; border-collapse: collapse; text-align: left; } .tableau caption { text-align: left; padding-bottom: 16px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--texte-meta); } .tableau th, .tableau td { padding: 16px 24px 15px 0; border-bottom: var(--filet-e) solid var(--trait); vertical-align: baseline; } .tableau thead th { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-pale); } .tableau tbody th { font-family: var(--display); font-weight: var(--poids-display); font-size: var(--t-titre-4); color: var(--texte-fort); } .tableau td { font-size: var(--t-petit); line-height: 1.7; color: var(--texte); } .tableau tr:last-child th, .tableau tr:last-child td { border-bottom: 0; } /* un tableau ne doit jamais faire déborder la page */ .tableau-boite { overflow-x: auto; position: relative; } /* Fil d'Ariane. */ .ariane ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; } .ariane li { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-meta); } .ariane li + li::before { content: "·"; padding: 0 .85em; color: var(--texte-pale); } .ariane a { color: var(--texte-meta); } .ariane a:hover { color: var(--accent); } .ariane [aria-current="page"] { color: var(--texte-pale); } /* ══════════════════════════════════════════ 09 · SECTION NOCTURNE ═════════ */ /* .nuit — un seul bloc sombre par page, en clôture. Il réassigne les RÔLES : tout composant placé à l'intérieur bascule sans une règle de plus. */ .nuit { --fond: var(--nuit); --fond-alt: var(--nuit-2); --fond-planche: var(--nuit-2); --texte: var(--nuit-encre-2); --texte-fort: var(--nuit-encre); --texte-doux: var(--nuit-encre-2); --texte-meta: var(--nuit-plume); --texte-pale: var(--nuit-pale); --trait: var(--nuit-filet); --accent: var(--or-clair); --accent-clair: var(--or); /* jamais de bouton or plein (§2 du brief) : sur fond nuit, le plein est clair */ --bouton-fond: var(--nuit-encre); --bouton-texte: var(--nuit); --entete-fond: color-mix(in srgb, var(--nuit) 94%, transparent); background: var(--nuit); color: var(--nuit-encre-2); } .nuit .bouton--contour { color: var(--nuit-encre); } /* mot de clôture d'un bloc nocturne */ .nuit__mot { max-width: 12.5em; font-family: var(--display); font-weight: var(--poids-display); font-size: clamp(26px, 3vw, 42px); line-height: 1.22; letter-spacing: var(--ls-titre); color: var(--nuit-encre); text-wrap: balance; } /* ═══════════════════════════════════════════════ 10 · PIED DE PAGE ════════ */ .pied { padding-top: clamp(66px, 6.9vw, 100px); padding-bottom: clamp(32px, 3.6vw, 52px); } .pied__interieur { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 60px); padding-bottom: clamp(44px, 5.4vw, 76px); border-bottom: var(--filet-e) solid var(--trait); } .pied__marque .marque__sceau--pied { height: clamp(46px, 4.6vw, 60px); margin-bottom: 22px; } .pied__marque .marque__nom { color: var(--texte-fort); } .pied__marque .marque__mention { color: var(--texte-pale); } .pied__colonne .surtitre { margin-bottom: 16px; } .pied__colonne p, .pied__colonne li { font-size: var(--t-petit); line-height: 1.95; color: var(--texte); } .pied__colonne a:hover { color: var(--accent); } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px; padding-top: 24px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--texte-pale); } .pied__mentions { display: flex; flex-wrap: wrap; gap: 12px 26px; } .pied__mentions a:hover { color: var(--accent); } /* ═══════════════════════════════════════════════════ 11 · MOUVEMENT ══════ */ /* L'état masqué n'existe QUE sous .js — posé par le script en ligne de . Sans JavaScript, tout le contenu reste visible. Le script de secours retire la classe .js si site.js ne s'est pas exécuté. */ .js .rv { opacity: 0; transform: translateY(var(--leve)); transition: opacity var(--d-reveal) var(--courbe) var(--d, 0ms), transform var(--d-reveal) var(--courbe) var(--d, 0ms); } .js .rv.est-visible { opacity: 1; transform: none; } /* arrivée d'un titre ligne par ligne */ .js .rv-lignes .ligne > span { opacity: 0; transform: translateY(112%); transition: opacity var(--d-reveal) var(--courbe) var(--d, 0ms), transform var(--d-reveal) var(--courbe) var(--d, 0ms); } .js .rv-lignes.est-visible .ligne > span { opacity: 1; transform: none; } .js .rv-lignes .ligne:nth-child(2) > span { transition-delay: calc(var(--d, 0ms) + var(--decalage)); } .js .rv-lignes .ligne:nth-child(3) > span { transition-delay: calc(var(--d, 0ms) + var(--decalage) * 2); } /* entrée d'une planche : échelle 1.06 → 1.00, portée par l'image seule */ .js .planche__cadre.rv-planche img { opacity: 0; transform: scale(var(--leve-image)); transition: opacity var(--d-image) var(--courbe) var(--d, 0ms), transform var(--d-image) var(--courbe) var(--d, 0ms); } .js .planche__cadre.rv-planche.est-visible img { opacity: 1; transform: none; } /* le corps ne défile pas derrière le menu ouvert */ .menu-ouvert { overflow: hidden; } /* ═══════════════════════════════════════════════════════ 12 · MOBILE ══════ */ @media (max-width: 1080px) { .duo, .duo--texte { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 44px); align-items: start; } .duo--inverse > :first-child { order: 0; } .plaques, .plaques--egales, .plaques--inverse { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 5vw, 52px); } .plaques .planche__cadre { height: auto; aspect-ratio: 16 / 9; } .pied__interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); } .col-3, .col-4, .col-5 { grid-column: span 6; } .col-7, .col-8, .col-9, .col-fin-5, .col-fin-6, .col-fin-7 { grid-column: span 12; } } @media (max-width: 900px) { .nav { display: none; } .menu-bouton { display: flex; } .marque__mention { display: none; } .marque__sceau { height: 29px; } .pied__marque .marque__mention { display: block; } .titre-affiche { max-width: none; } .chapo { max-width: none; } .seuil__mots { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 38px); align-items: start; } .seuil__porte { justify-self: start; } .planche--bandeau .planche__cadre { aspect-ratio: 4 / 3; } .planche--bandeau .planche__cadre img { object-position: 50% 56%; } .principe { grid-template-columns: var(--rail-num-s) minmax(0, 1fr); gap: 0 20px; padding: 24px 0; } .principe__num { grid-row: span 2; } .principe__texte { grid-column: 2; margin-top: 11px; } .porte__lien { grid-template-columns: var(--rail-num-s) minmax(0, 1fr) 30px; gap: 0 20px; padding: 21px 0; } .porte__num { grid-row: span 2; } .porte__texte { grid-column: 2; margin-top: 10px; } .porte__fleche { grid-column: 3; grid-row: 1; } .liste-edito__item { grid-template-columns: minmax(0, 1fr); gap: 9px; } .totem__phrase p { max-width: 14em; } .nuit__mot { max-width: 12em; } .legende { font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); } } /* Sous 430 px, le logotype accepte de se plier en deux lignes plutôt que de pousser l'en-tête hors de la fenêtre. Au-dessus, il reste sur une ligne. */ @media (max-width: 430px) { .marque__nom { white-space: normal; line-height: 1.34; letter-spacing: .21em; } .entete__interieur { gap: 14px; } .menu-bouton { gap: 8px; } .menu-bouton__mot { min-width: 0; } } @media (max-width: 620px) { .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; } .pied__interieur { grid-template-columns: minmax(0, 1fr); gap: 32px; } .legende { flex-direction: column; gap: 7px; } .legende__d { text-align: left; } .legende__g { white-space: normal; } .tableau th, .tableau td { padding-right: 16px; } } /* ══════════════════════════════════════ 13 · MOUVEMENT RÉDUIT (§8) ═══════ */ @media (prefers-reduced-motion: reduce) { .js .rv, .js .rv.est-visible, .js .rv-lignes .ligne > span, .js .planche__cadre.rv-planche img, .js .planche__cadre.rv-planche.est-visible img { opacity: 1; transform: none; transition: none; } .entete, .menu, .lien, .lien-mono::after, .lien-mono em, .porte__lien, .porte__titre, .porte__fleche, .nav a::after, .bouton, .menu-bouton__traits i { transition: none; } .entete--masquee { transform: none; } .porte__lien:hover, .porte__lien:focus-visible { padding-left: 0; } .lien { background-size: 0 var(--filet-e); } .lien:hover, .lien:focus-visible { background-size: 100% var(--filet-e); } } /* ═══════════════════════════════════════════════════ 14 · IMPRESSION ═════ */ @media print { .entete, .menu, .menu-bouton, .saut { display: none; } body { background: #fff; color: #000; } .nuit { background: #fff; color: #000; } .js .rv, .js .rv-lignes .ligne > span { opacity: 1; transform: none; } } /* ═══════════════════════════════ COMPLÉMENTS DE GABARIT (pages intérieures) ═ Variantes du seuil pour les pages sans planche d'ouverture, listes de définitions et marquage des champs à compléter par le client. ═════════════════════════════════════════════════════════════════════════ */ /* ── Seuil sans planche : le titre porte seul, l'air est repris dessous ──── */ .seuil--court { padding-bottom: var(--sp-seuil-3); } .seuil--centre { min-height: min(72vh, 620px); display: flex; flex-direction: column; justify-content: center; } .seuil--centre .seuil__mots { grid-template-columns: minmax(0, 1fr); } .seuil--centre .seuil__porte { justify-self: start; margin-top: var(--e-3); } /* ── Un cran typographique sous le titre d'affiche, pour les pages annexes ─ */ .titre-affiche--moyen { font-size: clamp(34px, 4.4vw, 62px); } /* ── Liste de définitions : terme mono à gauche, valeur serif à droite ───── */ .definitions { margin: 0; border-top: var(--filet-e) solid var(--trait); } .definitions > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 0 var(--gouttiere); align-items: baseline; padding: var(--e-2) 0; border-bottom: var(--filet-e) solid var(--trait); } .definitions dt { font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono-s); text-transform: uppercase; color: var(--texte-meta); } .definitions dd { margin: 0; font-family: var(--serif); font-size: var(--t-corps); line-height: var(--lh-corps); color: var(--texte); word-break: break-word; } .definitions .a-completer { color: var(--texte-pale); font-style: italic; } @media (max-width: 720px) { .definitions > div { grid-template-columns: minmax(0, 1fr); gap: var(--e-1) 0; } } /* ═══════════════════════════ CORRECTIONS DE GABARIT (passe de relecture) ═══ Chaque règle répond à un défaut relevé par la critique d'ensemble. ═════════════════════════════════════════════════════════════════════════ */ /* Le fil d'Ariane et le folio se lisaient comme un seul paragraphe (écart 0 px). */ .ariane { margin-bottom: var(--sp-bloc); } /* Le nom de la page courante dans le fil d'Ariane portait le gris le plus pâle. */ .ariane [aria-current="page"] { color: var(--texte-pale); } /* La note est une note, pas la dernière ligne de la liste qui la précède. */ .note { margin-top: var(--e-4); } /* Une section qui se termine par une tête ne laisse pas pendre sa marge. */ .section > .tete:last-child { margin-bottom: 0; } /* .cloture — la phrase qui referme une page, sans les filets du totem. Composant unique : remplace les copies de concept.css et contact.css. */ .cloture { margin: var(--sp-bloc) 0 0; color: var(--texte-fort); max-width: var(--mesure-totem); font-family: var(--display); font-weight: var(--poids-display); font-style: italic; font-size: var(--t-totem); line-height: var(--lh-totem); letter-spacing: var(--ls-titre); text-wrap: balance; } .cloture p { margin: 0; } /* Les en-têtes de tableau portaient le gris décoratif. */ .tableau thead th { color: var(--texte-meta); } /* Le folio se disloquait sous 620 px : la pagination restait accrochée à la première ligne d'un libellé qui en prenait trois. */ @media (max-width: 620px) { .folio { align-items: flex-start; } } /* Sous 900 px, la planche d'ouverture passait en carré et coupait le sujet, qui se trouve aux deux tiers droits de l'image. */ @media (max-width: 900px) { .seuil__planche .planche__cadre img { object-position: 66% 50%; } } /* Le tableau des étapes débordait sans le dire. On borde le débordement d'un dégradé, et on l'annonce. */ /* La liste de noms nus : pas de glose, donc pas de colonne de droite vide. */ .liste-edito--noms .liste-edito__item { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); padding: var(--e-2) 0; } /* Le tableau se replie en blocs sous 860 px : plus rien ne sort du cadre. */ @media (max-width: 620px) { .tableau-boite { overflow: visible; } .tableau, .tableau tbody, .tableau tr, .tableau th, .tableau td { display: block; width: auto; } .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .tableau tr { padding: var(--e-3) 0; border-bottom: var(--filet-e) solid var(--trait); } .tableau tr:last-child { border-bottom: 0; } .tableau th[scope="row"] { padding: 0 0 var(--e-1); border: 0; } .tableau td { padding: 0 0 var(--e-1); border: 0; } .tableau td:last-child { padding-bottom: 0; } .tableau td::before { content: attr(data-libelle); display: block; margin-bottom: 4px; font-family: var(--mono); font-weight: var(--poids-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--texte-meta); } }