/* =========================================================
MADYGOOD — typography.css
Hiérarchie typographique du site madygood.com — v1
À importer avant toute autre feuille de style.
Référence complète : MADYGOOD-hierarchie-typo.html
========================================================= */
/* ---------------------------------------------------------
1. FONTES
Convertir les .otf en .woff2 avant mise en ligne
(gain ≈ 60 % du poids). Chemins à adapter au projet.
--------------------------------------------------------- */
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-Extralight.woff2') format('woff2');
font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-ExtralightItalic.woff2') format('woff2');
font-weight:200; font-style:italic; font-display:swap;
}
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-Regular.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-RegularItalic.woff2') format('woff2');
font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-SemiBold.woff2') format('woff2');
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:'PP Mori';
src:url('../fonts/PPMori-SemiBoldItalic.woff2') format('woff2');
font-weight:600; font-style:italic; font-display:swap;
}
@font-face{
font-family:'IvyPresto Headline';
src:url('../fonts/IvyPrestoHeadline-Thin.woff2') format('woff2');
font-weight:100; font-style:normal; font-display:swap;
}
/* Préchargement — à ajouter dans le du document :
*/
/* ---------------------------------------------------------
2. TOKENS
--------------------------------------------------------- */
:root{
/* familles */
--font-sans:'PP Mori',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
--font-display:'IvyPresto Headline',Georgia,'Times New Roman',serif;
/* graisses — ne jamais en inventer d'autres */
--w-light:200;
--w-regular:400;
--w-semi:600;
--w-thin:100; /* IvyPresto uniquement */
/* D1 — accroche hero */
--fs-d1:clamp(52px,10vw,170px); --lh-d1:1.02; --ls-d1:-.04em;
/* 1.02 et non 0.85 : voir règle 05 en bas de fichier */
/* D2 — manifeste (IvyPresto) */
--fs-d2:clamp(34px,5vw,68px); --lh-d2:1.1; --ls-d2:-.015em;
/* D3 — noms de projets */
--fs-d3:clamp(32px,3.5vw,52px); --lh-d3:1.15; --ls-d3:-.02em;
/* Signature de pied de page */
--fs-mark:clamp(48px,12vw,160px); --lh-mark:.9; --ls-mark:-.05em;
/* Citation client (IvyPresto) */
--fs-quote:clamp(28px,3vw,42px); --lh-quote:1.3; --ls-quote:-.01em;
/* échelle fixe */
--fs-h4:18px;
--fs-body:17px;
--fs-ui:13px;
--fs-label:12px;
--fs-eyebrow:11px;
/* --- ÉCHELLE D'ESPACEMENT ---------------------------------
Toutes les distances du site sortent de cette échelle.
Aucune valeur en dur dans les feuilles de page.
Progression proche d'une base 8, resserrée en mobile.
Règle d'usage, du plus serré au plus large :
sp-2 lien interne à un même objet (label ↔ sa valeur)
sp-4 titre ↔ son paragraphe
sp-5 label de section ↔ premier contenu
sp-6 entre deux objets d'une même liste
sp-7 padding intérieur d'un panneau
sp-8 entre deux groupes d'une même section
sp-9 bas de section
sp-10 respiration majeure entre deux sections
---------------------------------------------------------- */
--sp-2:8px;
--sp-3:12px;
--sp-4:16px;
--sp-5:24px;
--sp-6:clamp(24px,2.4vw,32px);
--sp-7:clamp(24px,3.2vw,48px);
--sp-8:clamp(32px,4.6vw,64px);
--sp-9:clamp(48px,6.5vw,96px);
--sp-10:clamp(64px,9vw,128px);
/* boutons — gabarit unique, voir la section Boutons plus bas */
--btn-h:52px; /* hauteur de tous les boutons pastille */
--btn-pad:28px; /* retrait horizontal */
--btn-pad-icon:9px; /* retrait droit quand le bouton porte une pastille ronde */
--btn-badge:34px; /* diamètre de la pastille ronde */
--btn-gap:14px;
/* approches */
--ls-wide:.14em; /* labels et eyebrows */
--ls-ui:.08em; /* nav et boutons */
--ls-tag:.04em; /* pastilles et légendes */
}
/* ---------------------------------------------------------
3. BASE
--------------------------------------------------------- */
html{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
body{
font-family:var(--font-sans);
font-weight:var(--w-regular);
font-size:var(--fs-body);
line-height:1.55;
font-feature-settings:"kern" 1,"liga" 1;
}
/* ---------------------------------------------------------
4. NIVEAUX
--------------------------------------------------------- */
/* D1 — une seule occurrence par page */
h1{
font-family:var(--font-sans);
font-weight:var(--w-semi);
font-size:var(--fs-d1);
line-height:var(--lh-d1);
letter-spacing:var(--ls-d1);
text-transform:uppercase;
}
/* D2 — manifeste. IvyPresto, occurrence unique sur le site */
.manifesto{
font-family:var(--font-display);
font-weight:var(--w-thin);
font-size:var(--fs-d2);
line-height:var(--lh-d2);
letter-spacing:var(--ls-d2);
max-width:17ch;
}
/* D3 — noms de projets */
h3{
font-family:var(--font-sans);
font-weight:var(--w-light);
font-size:var(--fs-d3);
line-height:var(--lh-d3);
letter-spacing:var(--ls-d3);
}
/* Label de section — h2 sémantique, rendu visuel minimal.
Le poids visuel ne suit pas le niveau sémantique : c'est voulu. */
h2{
font-family:var(--font-sans);
font-weight:var(--w-semi);
font-size:var(--fs-label);
line-height:1;
letter-spacing:var(--ls-wide);
text-transform:uppercase;
}
/* Sous-titre — questions FAQ, noms de clients, titres de cartes */
h4{
font-family:var(--font-sans);
font-weight:var(--w-regular);
font-size:var(--fs-h4);
line-height:1.4;
letter-spacing:0;
}
/* Corps */
p{
font-family:var(--font-sans);
font-weight:var(--w-regular);
font-size:var(--fs-body);
line-height:1.55;
letter-spacing:0;
max-width:62ch;
}
/* Citation client — IvyPresto, deuxième et dernière occurrence */
blockquote{
font-family:var(--font-display);
font-weight:var(--w-thin);
font-size:var(--fs-quote);
line-height:var(--lh-quote);
letter-spacing:var(--ls-quote);
max-width:24ch;
}
/* Signature de pied de page */
.wordmark{
font-family:var(--font-sans);
font-weight:var(--w-semi);
font-size:var(--fs-mark);
line-height:var(--lh-mark);
letter-spacing:var(--ls-mark);
text-transform:uppercase;
}
/* Boutons — niveau typographique.
Le sélecteur porte sur .btn et .burger, PAS sur `nav a`
ni sur `button`, qui étaient trop larges :
- `nav a` attrapait aussi le fil d'ariane (11 px, pas 13)
- `button` attrapait aussi les questions de la FAQ,
qui sont en 18 px bas de casse.
Les liens de navigation sont stylés par `.menu a`. */
.btn,
.burger{
font-family:var(--font-sans);
font-weight:var(--w-semi);
font-size:var(--fs-ui);
line-height:1;
letter-spacing:var(--ls-ui);
text-transform:uppercase;
}
/* ---------------------------------------------------------
4 bis. BOUTONS — gabarit unique
Tous les boutons pastille du site partagent EXACTEMENT
la même boîte : hauteur 52 px, retrait 28 px, rayon plein.
Seules les couleurs changent d'un contexte à l'autre.
La hauteur est portée par min-height et non par un padding
vertical : un bouton qui porte une pastille ronde (34 px)
et un bouton de texte seul font ainsi la même hauteur.
La navigation d'en-tête est volontairement HORS de ce
gabarit : elle est plus dense (35 px) parce qu'elle aligne
sept éléments sur une seule ligne.
--------------------------------------------------------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--btn-gap);
min-height:var(--btn-h);
padding:0 var(--btn-pad);
border:1px solid transparent;
border-radius:999px;
cursor:pointer;
text-align:center;
white-space:nowrap;
transition:background .2s,color .2s,border-color .2s;
}
/* Le bouton porte une pastille ronde à droite */
.btn--icon{padding-right:var(--btn-pad-icon)}
.btn__badge{
flex:0 0 auto;
width:var(--btn-badge);height:var(--btn-badge);
border-radius:50%;
display:grid;place-items:center;
font-size:13px;font-style:normal;
transition:background .2s,color .2s;
}
/* Eyebrow — Based in Marseille, Established 2018, fonctions… */
.eyebrow{
font-family:var(--font-sans);
font-weight:var(--w-semi);
font-size:var(--fs-eyebrow);
line-height:1;
letter-spacing:var(--ls-wide);
text-transform:uppercase;
}
/* Pastilles et légendes */
.tag,
figcaption{
font-family:var(--font-sans);
font-weight:var(--w-regular);
font-size:12px;
line-height:1.3;
letter-spacing:var(--ls-tag);
}
/* Chiffres alignés partout où ils sont comparés */
table,
.s-list,
[data-numeric]{
font-variant-numeric:tabular-nums;
}
/* ---------------------------------------------------------
5. GARDE-FOUS
--------------------------------------------------------- */
/* Règle 02 — Extralight jamais sous 32px.
En mobile, --fs-d3 descend à 32px : on repasse en Regular
pour conserver le contraste sur fond crème. */
@media (max-width:640px){
h3{ font-weight:var(--w-regular); }
}
/* Règle 05 — Capitales accentuées.
À, É, È, Ê, Ç en capitales sont rognés par la ligne précédente
si l'interligne est trop serré. Deux seuils :
- titre court, 1 à 3 lignes -> 1.02 minimum
- paragraphe, 4 lignes et + -> 1.15 minimum
0.94 ne suffit que si une seule ligne porte un accent.
Dès que deux lignes consécutives en portent, il y a
collision : voir « BRANDING À MARSEILLE / LA STRATÉGIE ».
1.02 est donc la valeur de sécurité. */
h1{ line-height:1.02; }
/* Règle 04 — PP Mori n'a pas de Bold, IvyPresto n'a pas d'italique.
Ces déclarations empêchent le navigateur de les synthétiser. */
strong,b{ font-weight:var(--w-semi); }
.manifesto em,
.manifesto i,
blockquote em,
blockquote i{ font-style:normal; }
/* Accessibilité — le focus doit rester visible */
a:focus-visible,
button:focus-visible{
outline:2px solid currentColor;
outline-offset:3px;
}