/* ============================================================
SYSTÈME TYPOGRAPHIQUE — source unique de vérité
------------------------------------------------------------
Toutes les tailles, graisses et interlignages du site sont
déclarés ICI, une seule fois. Les autres feuilles ne gèrent
plus que la couleur, les marges et la mise en page.
Pour modifier une taille partout sur le site : changer la
variable dans :root ci-dessous. Rien d'autre à toucher.
Cette feuille est chargée APRÈS les CSS de page et AVANT
responsive.css : elle a donc le dernier mot sur la typo, et
responsive.css garde le dernier mot sur les points de rupture.
============================================================ */
:root {
/* ---- Familles ---- */
--ldk-font-titre: 'Philosopher', sans-serif;
--ldk-font-texte: 'Sono', sans-serif;
/* ---- Échelle des titres ----
Quatre niveaux visuels, pas trois : le titre de section des
prestations (.ldk-service-title) est nettement plus grand
qu'un titre de carte. Le nier reviendrait à casser une
hiérarchie qui fonctionne. */
--ldk-fs-titre-page: clamp(3rem, 5vw, 4rem);
--ldk-fs-titre-large: clamp(2rem, 3vw, 2.2rem);
--ldk-fs-titre-projet: 1.8rem;
--ldk-fs-titre-section: 1.2rem;
--ldk-fs-titre-bloc: 0.9rem;
/* Hors échelle, volontairement : le grand nombre des écrans d'état
(404, accès refusé) n'est pas un titre. Le ranger dans l'échelle
des titres la ferait exploser pour un usage unique. */
--ldk-fs-etat: clamp(7rem, 30vw, 18rem);
/* ---- Échelle des textes ---- */
--ldk-fs-exergue: 2rem;
--ldk-fs-intro: 1.2rem;
--ldk-fs-texte: 0.9rem;
--ldk-fs-surtitre: 0.85rem;
/* ---- Interlignages ---- */
--ldk-lh-titre: 1.1;
--ldk-lh-serre: 1.2;
--ldk-lh-exergue: 1.4;
--ldk-lh-intro: 1.75;
--ldk-lh-texte: 1.8;
--ldk-lh-surtitre: 1.65;
/* ---- Interlettrages ---- */
--ldk-ls-titre: 2px;
--ldk-ls-projet: 1px;
--ldk-ls-bouton: 2px;
/* ---- Graisses ---- */
--ldk-fw-normal: 400;
--ldk-fw-leger: 300;
--ldk-fw-gras: 700;
/* ---- Rythme vertical ---- */
--ldk-mb-titre-section: 25px;
--ldk-mb-exergue: 100px;
}
/* ============================================================
RÔLE 1 — TITRE DE PAGE (niveau H1)
Un seul par page. C'est le titre que les moteurs lisent en
premier pour comprendre de quoi parle la page.
============================================================ */
.ldk-titre-page,
.ldk-work-page-title,
.ldk-about-title,
h1.wp-block-heading {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-titre-page);
font-weight: var(--ldk-fw-normal);
line-height: var(--ldk-lh-titre);
letter-spacing: var(--ldk-ls-titre);
text-transform: uppercase;
}
/* ============================================================
RÔLE 2 — TITRE LARGE
Le grand titre des sections de prestations. Sert à ouvrir un
bloc majeur à l'intérieur d'une page, sous le titre de page.
============================================================ */
.ldk-titre-large,
.ldk-service-title {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-titre-large);
font-weight: var(--ldk-fw-normal);
line-height: var(--ldk-lh-titre);
letter-spacing: 1px;
text-transform: uppercase;
}
/* ============================================================
RÔLE 3 — TITRE DE SECTION (niveau H2)
============================================================ */
.ldk-titre-section,
.ldk-about-label,
.ldk-card-title,
h2.wp-block-heading {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-titre-section);
font-weight: var(--ldk-fw-gras);
line-height: var(--ldk-lh-serre);
letter-spacing: var(--ldk-ls-titre);
text-transform: uppercase;
margin-bottom: var(--ldk-mb-titre-section);
padding-bottom: 10px;
}
/* align-self a été retiré de ce rôle le 24/08/2026. C'est une propriété
de MISE EN PAGE, pas de typographie : elle n'a rien à faire dans un
rôle partagé. Elle venait du style d'origine de .ldk-about-label et
se propageait à .ldk-card-title, où elle écrasait le centrage du
header de carte sur mobile — un bug à deux pages de distance.
Elle est désormais posée sur .ldk-about-label seul, dans about.css. */
/* Le titre de carte vit dans une ligne composée (titre — sous-titre) :
les marges verticales du rôle n'ont pas de sens à cet endroit. */
.ldk-card-title {
margin: 0;
padding-bottom: 0;
}
/* ============================================================
RÔLE 4 — TITRE DE BLOC (niveau H3)
Les petites étiquettes de contenu : « Idéal pour », « Tarifs ».
============================================================ */
.ldk-titre-bloc,
.ldk-info-title,
h3.wp-block-heading {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-titre-bloc);
font-weight: var(--ldk-fw-gras);
line-height: var(--ldk-lh-serre);
letter-spacing: var(--ldk-ls-titre);
text-transform: uppercase;
}
/* ============================================================
RÔLE 5 — SURTITRE (overline)
La petite ligne en capitales posée AU-DESSUS d'un titre ou
d'un bloc, pour annoncer ce qui suit.
============================================================ */
.ldk-surtitre,
.ldk-work-intro-label,
.ldk-services-label {
font-family: var(--ldk-font-texte) !important;
font-size: var(--ldk-fs-surtitre);
font-weight: var(--ldk-fw-normal);
line-height: var(--ldk-lh-surtitre);
letter-spacing: normal;
text-transform: uppercase;
}
/* ============================================================
RÔLE 6 — EXERGUE
Le paragraphe mis en avant, façon manifeste. À utiliser avec
parcimonie : un par page, sinon il ne met plus rien en avant.
============================================================ */
.ldk-exergue {
font-family: var(--ldk-font-texte) !important;
font-size: var(--ldk-fs-exergue);
font-weight: var(--ldk-fw-leger);
line-height: var(--ldk-lh-exergue);
margin-bottom: var(--ldk-mb-exergue);
}
/* ============================================================
RÔLE 7 — TEXTE D'INTRODUCTION
Le premier paragraphe d'une page ou d'une grande section.
Un cran au-dessus du texte courant, sans être un exergue.
============================================================ */
.ldk-intro,
.ldk-about-intro,
.ldk-about-intro p,
.ldk-work-intro-text p {
font-family: var(--ldk-font-texte) !important;
font-size: var(--ldk-fs-intro);
font-weight: var(--ldk-fw-leger);
line-height: var(--ldk-lh-intro);
}
/* ============================================================
RÔLE 8 — TEXTE COURANT
============================================================ */
.ldk-texte,
.ldk-service-desc {
font-family: var(--ldk-font-texte) !important;
font-size: var(--ldk-fs-texte);
font-weight: var(--ldk-fw-leger);
line-height: var(--ldk-lh-texte);
}
/* ============================================================
RÔLE 9 — CODE D'ÉTAT
Le grand nombre des écrans 404 et accès refusé (etat.php).
Il ne porte aucune information que le titre ne porte déjà :
il donne le ton, et il est masqué aux lecteurs d'écran.
D'où sa propre variable, hors de l'échelle des titres.
============================================================ */
.ldk-etat-code {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-etat);
font-weight: var(--ldk-fw-gras);
line-height: .82;
letter-spacing: -.02em;
}
/* ============================================================
RÔLE 10 — BOUTON
Tous les boutons du site parlent d'une seule voix : Sono,
capitales, graisse 500. Aucun bouton en Philosopher — elle
est réservée aux titres.
Interlettrage et rembourrage y sont entrés le 11/09/2026 :
ils valaient 1 à 2,5px et 10-15px sur 24-28px selon
l'endroit, sans qu'aucune de ces valeurs ait été choisie
pour une raison. Ce rôle décrit donc le bouton entier, et
déborde du strict domaine de cette feuille — c'est assumé :
mieux vaut un composant complet à un seul endroit que sa
moitié ici et sa moitié dans cinq fichiers.
ATTENTION, sélecteur multiple : il ne doit porter QUE ce qui
fait qu'un bouton est un bouton. Les couleurs et la taille
du texte restent chez chacun — elles diffèrent légitimement
d'un contexte à l'autre, et les mélanger ici ferait voyager
des réglages d'une page à l'autre.
Le !important sur la famille est nécessaire : main.css force
Sono en !important sur « a », et .ldk-etat-lien est un lien.
Les styles en ligne des gabarits (espace-client,
lien-questionnaire, etat) ne redéclarent plus ces quatre
propriétés, sinon ils gagneraient — ils sont écrits plus bas
dans le document.
============================================================ */
#ldk-mini-form .submit-btn,
.ldk-ec-cta,
.ldk-ec-cnx button,
.ldk-lq button,
.ldk-etat-lien,
#save-layout-btn {
font-family: var(--ldk-font-texte) !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--ldk-ls-bouton);
padding: var(--ldk-padding-bouton);
border-radius: var(--ldk-radius-pilule);
}
/* ============================================================
PAGES PROJET — rôles spécifiques
Le titre d'un projet a sa propre taille : il cohabite avec un
visuel plein écran, pas avec du texte courant.
============================================================ */
#lb-title {
font-family: var(--ldk-font-titre) !important;
font-size: var(--ldk-fs-titre-projet);
line-height: var(--ldk-lh-serre);
letter-spacing: var(--ldk-ls-projet);
text-transform: uppercase;
margin: 0 0 10px 0;
}
/* the_excerpt() enveloppe toujours le texte dans un . Styler
uniquement #lb-excerpt ne suffit donc pas : le
hérite des
règles du thème et écrase la graisse. On cible les deux. */
#lb-excerpt {
margin-top: 20px;
}
#lb-excerpt,
#lb-excerpt p {
font-family: var(--ldk-font-texte) !important;
font-size: var(--ldk-fs-texte);
font-weight: var(--ldk-fw-normal);
line-height: 1.5;
}