/* ========================================================================== DESIGN SYSTEM LA SULTANE — implémentation du relevé IDML « La Sultane #101 » Source de vérité : kiosque/gabarits/DESIGN_SYSTEM.md (M29). Toutes les valeurs ci-dessous sont RELEVÉES dans le fichier InDesign du magazine (polices, corps, interlignes, approches, couleurs, marges) et transposées à l'écran selon les règles consignées dans le document. HTML/CSS natif · zéro dépendance · zéro requête externe (polices woff2 auto-hébergées dans ./fonts/, licences OFL dans ./fonts/licences/). ========================================================================== */ /* --- Polices auto-hébergées (chemins relatifs à CE fichier) --------------- Chaque famille sert un RÔLE du #101 ; le tableau de correspondance print → web est dans DESIGN_SYSTEM.md §4. */ /* Corps de texte — la voix du magazine (identique au print) */ @font-face { font-family:"Alegreya Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/alegreya-sans-400.woff2") format("woff2"); } @font-face { font-family:"Alegreya Sans"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/alegreya-sans-400-italic.woff2") format("woff2"); } @font-face { font-family:"Alegreya Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/alegreya-sans-700.woff2") format("woff2"); } /* Titres d'article — substitut OFL de Scotch Display / IvyPresto Display */ @font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/playfair-display-400.woff2") format("woff2"); } @font-face { font-family:"Playfair Display"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/playfair-display-400-italic.woff2") format("woff2"); } @font-face { font-family:"Playfair Display"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/playfair-display-700.woff2") format("woff2"); } /* H2 « Titre 1 » — substitut OFL de Kepler Std */ @font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/source-serif-4-400.woff2") format("woff2"); } @font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/source-serif-4-600.woff2") format("woff2"); } /* Rubriques, nom du rédacteur, notes (identique au print) */ @font-face { font-family:"Montserrat"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/montserrat-300.woff2") format("woff2"); } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/montserrat-400.woff2") format("woff2"); } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/montserrat-500.woff2") format("woff2"); } @font-face { font-family:"Montserrat"; font-style:italic; font-weight:500; font-display:swap; src:url("fonts/montserrat-500-italic.woff2") format("woff2"); } @font-face { font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/montserrat-700.woff2") format("woff2"); } /* Édito (Muli du print) + substitut d'Avenir */ @font-face { font-family:"Mulish"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/mulish-400.woff2") format("woff2"); } @font-face { font-family:"Mulish"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/mulish-400-italic.woff2") format("woff2"); } @font-face { font-family:"Mulish"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/mulish-600.woff2") format("woff2"); } /* Lettrine — substitut OFL de Blenny Black (fichier local = trial) */ @font-face { font-family:"Abril Fatface"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/abril-fatface-400.woff2") format("woff2"); } /* Marque / logo — Loverica, achetée par Houda (licence web validée M7) */ @font-face { font-family:"Loverica"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/loverica-400.woff2") format("woff2"); } @font-face { font-family:"Loverica"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/loverica-400-italic.woff2") format("woff2"); } @font-face { font-family:"Loverica"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/loverica-700.woff2") format("woff2"); } @font-face { font-family:"Loverica"; font-style:italic; font-weight:700; font-display:swap; src:url("fonts/loverica-700-italic.woff2") format("woff2"); } :root { /* --- Piles de polices par rôle -------------------------------------- */ --f-corps: "Alegreya Sans", Optima, Candara, "Gill Sans", sans-serif; --f-titre: "Playfair Display", "Times New Roman", Georgia, serif; /* H1, chapô */ --f-h2: "Source Serif 4", Georgia, "Times New Roman", serif; /* H2 */ --f-rubrique: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* rubriques, rédacteur, notes */ --f-edito: "Mulish", "Helvetica Neue", Arial, sans-serif; /* édito, sommaire */ --f-lettrine: "Abril Fatface", "Playfair Display", Georgia, serif; --f-marque: "Loverica", "Playfair Display", Georgia, serif; /* --- Couleurs (nuancier réellement posé dans le #101) ---------------- */ --encre: #50403A; /* brun graphite — texte courant */ --encre-fort: #222222; /* gris anthracite — édito, chapô */ --encre-2: #3C3C3C; /* gris ardoise — texte secondaire */ --bordeaux: #7B1D35; /* ACCENT SIGNATURE */ --grenat-clair: #A03550; /* H4 */ --rose-titre: #C95C5F; /* H3 */ --rose-boise: #C1848E; /* accent doux */ --brun-doux: #674D4D; /* interview */ --taupe: #7D7268; --taupe-clair: #8B7E76; /* notes */ --taupe-sombre: #6C605C; /* sommaire */ --gris-sommaire: #5A5A5A; --ours: #46403C; --champagne: #F1E6D2; --rouge-vif: #A30209; --papier: #FBF9F4; /* transposition écran du Paper du print (cf. §3) */ --papier-pur: #FFFFFF; --brume: #EFE7DC; /* fond d'attente d'image */ --sombre: #1C1714; /* fond des pages qui tranchent (sommaire, respiration) */ --or: #B08D57; /* couronne du logo — filet RARE, jamais du texte courant */ /* Variante ÉCLAIRCIE de l'or, pour du texte posé SUR UNE PHOTO (surtitres de couverture). Décidée en M30 — « une accroche de couverture doit se lire en rayon » — et restée jusqu'ici dans la seule feuille de démonstration : elle est repliée ici, à la source. L'or de marque `--or` ne bouge pas ; c'est un rôle d'écran distinct, pas une couleur de plus. */ --or-clair: #E8C88F; /* --- LA FEUILLE EST DE TAILLE FIXE, puis mise à l'échelle ------------ La feuille se composait jusqu'ici en pourcentages, donc elle se RECOMPOSAIT à chaque largeur de fenêtre : le nombre de signes par ligne changeait, une troisième colonne apparaissait hors cadre, et aucune pagination ne pouvait être exacte (constaté par Houda le 2026-07-19). Un magazine ne se recompose pas : il a des dimensions, et on le regarde plus ou moins grand. La feuille a donc une taille FIXE en pixels, aux proportions du gabarit maître B du #101, et `--k` (posé par motion.js) la met à l'échelle de l'écran. 900 × 1273 = le format A4 (210/297), décision produit Houda 2026-07-24 — supersède le 4:5 (M30). À cette taille, 1 mm = 4,2857 px dans les DEUX sens : les mesures de l'IDML #101 (un vrai A4) s'y reportent exactement. */ --feuille-l: 900px; --feuille-h: 1273px; /* --- LA GRILLE, RELEVÉE DANS « La Sultane #101.idml » -------------------- Valeurs lues dans le fichier de Houda (`MarginPreference` du gabarit courant, 112 occurrences sur 116 — les 4 autres sont les pages denses à 3 colonnes), en POINTS PostScript, converties en % de la page A4 (595,28 × 841,89 pt) puis reportées sur notre feuille A4 de 900 × 1273 px : Top = 56,6929 pt = 20 mm = 6,735 % de la hauteur -> 86 px Bottom = 62,3622 pt = 22 mm = 7,408 % de la hauteur -> 94 px Left = 56,6929 pt = 20 mm = 9,524 % de la largeur -> 86 px Right = 56,6929 pt = 20 mm (les deux fonds sont SYMÉTRIQUES dans le #101) Gutter = 19,8425 pt = 7 mm = 3,333 % de la largeur -> 30 px Colonne = 231,0236 pt = 81,5 mm -> 349 px ⚠ Elles étaient écrites en POURCENTAGES : or un pourcentage de `padding` se calcule toujours sur la LARGEUR, jamais sur la hauteur. La tête et le pied valaient donc 6,7 % et 7,4 % de la LARGEUR — soit 5,4 % et 5,9 % de la hauteur au lieu des valeurs du magazine. En pixels sur une feuille fixe, la grille du #101 est reproduite exactement. */ --marge-tete: 86px; /* Top 56,6929 pt — 20 mm */ --marge-pied: 94px; /* Bottom 62,3622 pt — 22 mm */ --petit-fond: 86px; /* Left 56,6929 pt — 20 mm (côté reliure) */ --grand-fond: 86px; /* Right 56,6929 pt — 20 mm (côté extérieur) */ --gouttiere: 30px; /* ColumnGutter 19,8425 pt — 7 mm */ --colonnes: 2; /* ColumnCount */ --gouttiere-dense: 26px; /* les 4 pages à 3 colonnes : 17,5748 pt — 6,2 mm */ --colonnes-dense: 3; /* Alias conservés : tout le code existant les utilise. */ --marge-haut: var(--marge-tete); --marge-bas: var(--marge-pied); --marge-cote: var(--grand-fond); /* --- Échelle typographique -------------------------------------------- Corps exprimé en % de la LARGEUR DE FEUILLE (unités cqw, conteneur = la feuille) : le texte garde sa proportion print à toute taille d'affichage. Le clamp() pose un plancher de lisibilité à l'écran (une feuille à 390 px rendrait le corps 17 pt à 11 px) et un plafond sur très grand écran. `--fit` est le facteur d'AJUSTEMENT de la feuille (copyfitting, ajuster.js) : il vaut 1 par défaut et se resserre jusqu'à 0,72 quand un article déborde, avant tout renvoi de la fin sur la feuille suivante. M31 — DEUX DETTES REPLIÉES ICI (signalées par M30, restées ouvertes deux jours) : (1) `--fit` ANNULAIT LES PLANCHERS. `calc(clamp(15px, …) * var(--fit))` applique le facteur APRÈS le clamp : à --fit 0,72, le corps tombait à 10,8 px, sous le plancher de 15 px que le clamp était censé garantir. Le copyfitting pouvait donc rendre un article illisible sans que rien ne l'arrête. Corrigé par un `max()` qui RÉIMPOSE le plancher après ajustement : le copyfitting resserre jusqu'au plancher, puis rend la main au renvoi de fin d'article (c'est son rôle). (2) `--t-note` À 11 px SERVAIT DEUX CHOSES INCOMPATIBLES : les étiquettes de CONTENU (kickers, légendes, surtitres de rubrique — qui doivent tenir le plancher de 13 px arrêté en M21-v3) et le MOBILIER de page (le folio, qui est un repère d'imprimeur, pas du texte à lire). D'où l'aller-retour de M30 : monté à 13 px il devenait gros, ramené à 11 px il faisait retomber les étiquettes. Les deux rôles sont désormais SÉPARÉS. */ --fit: 1; /* ⚠ TRANSPOSITION D'ÉCRAN, pas une trahison du relevé (correction Houda 2026-07-19 : « les polices du corps de texte sont trop grandes par rapport aux pages »). Le 2,86cqw venait du 17 pt sur A4 du #101. Reporté tel quel sur une feuille 4:5 en DEUX colonnes, il ne donne que 28 signes par ligne : à cette largeur, un texte justifié SANS césure s'ouvre en lézardes blanches. À 2cqw la colonne tient ~39 signes, la justification redevient propre et la page respire. Le corps du print reste la référence documentée ; ceci est sa valeur d'écran. */ --t-corps: max(14px, calc(clamp(14px, 2.00cqw, 18px) * var(--fit))); --t-chapo: max(16px, calc(clamp(17px, 3.36cqw, 26px) * var(--fit))); --t-h1: calc(clamp(34px, 8.40cqw, 66px) * var(--fit)); --t-h1s: calc(clamp(24px, 5.38cqw, 42px) * var(--fit)); --t-h2: calc(clamp(19px, 4.03cqw, 32px) * var(--fit)); /* Intertitre DANS une colonne : le H2 pleine largeur y déborde en quatre lignes. Il descend au rang du H3, qui est sa place dans une colonne. */ --t-h2-col: calc(clamp(15px, 2.60cqw, 22px) * var(--fit)); --t-h3: max(15px, calc(clamp(17px, 3.36cqw, 26px) * var(--fit))); --t-h4: max(14px, calc(clamp(15px, 2.69cqw, 21px) * var(--fit))); --t-rubrique: calc(clamp(22px, 5.71cqw, 45px) * var(--fit)); /* Étiquettes de CONTENU (kicker, légende, surtitre, méta) — plancher 13 px (M21-v3). */ --t-note: clamp(13px, 1.85cqw, 15px); /* MOBILIER de page (folio). Exception assumée au plancher de 13 px : un folio est un repère de navigation discret, pas une étiquette à lire. Décision M30, confirmée. */ --t-mobilier: 11px; /* Interlignes relevés : corps 24/17 = 1,41 · chapô 26/20 = 1,30 · rubrique 38/34 = 1,12 */ /* GRILLE DE LIGNES DE PIED (« justification en hauteur », exigence Houda 2026-07-19 : « tout doit être aligné, c'est chirurgical »). Pour que les lignes des deux colonnes tombent EXACTEMENT en face les unes des autres, l'interligne doit être une valeur FIXE, et TOUT espacement vertical un multiple de cette valeur. Un interligne en facteur (1,41) donne des fractions de pixel qui décalent la seconde colonne dès le premier paragraphe. 18 px × 1,41 = 25,38 -> la grille est à 26 px, et rien ne s'en écarte. */ --grille: 26px; --i-corps: var(--grille); --i-chapo: 1.30; --i-titre: 1.06; /* Approche relevée : « Tracking 5 » d'InDesign = 5/1000 em */ --approche: 0.005em; --approche-large: 0.14em; /* petites capitales / étiquettes (décision d'écran) */ /* --- Mouvement (repris de M20, réglé en M30) ------------------------- */ --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1); --dur: 720ms; } /* Le jour où les licences WEB des polices achetées par Houda sont confirmées (Kepler Std, Scotch Display, IvyPresto Display, Scandia, Harmony), la substitution se fait ICI et nulle part ailleurs : convertir ses .otf en .woff2 dans ./fonts/, ajouter les @font-face, et remplacer la première famille de --f-titre / --f-h2. Les gabarits ne bougent pas d'une ligne. */