/**
* globale.css — Charte graphique du site Click Digital.
* =============================================================================
* SOURCE UNIQUE DE VÉRITÉ pour les couleurs, la typographie, les espacements,
* les rayons, les ombres et la mise en page générale.
*
* Principe : on ne met JAMAIS une couleur ou une taille en dur dans les autres
* fichiers CSS (header.css, home.css, ...). On utilise les variables ci-dessous :
*
* color: var(--pcd-primary);
* padding: var(--pcd-space-6);
*
* Pour changer l'apparence du site, on modifie UNE variable ici et tout suit.
*
* Ne sont conservées que les variables réellement utilisées. Pour en ajouter
* une (nouvelle nuance, nouveau palier d'espacement...), l'ajouter ici puis
* l'utiliser via var(--pcd-...).
*
* Chargé après GeneratePress et avant les autres feuilles du thème enfant
* (voir functions.php).
* =============================================================================
*/
/* =============================================================================
0. POLICES (fichiers dans assets/typo/, chemins relatifs à ce fichier)
========================================================================== */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 600; /* SemiBold : h2, h3, h4, h5, h6 */
font-display: swap;
src: url("../typo/SpaceGrotesk-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 700; /* Bold : h1 */
font-display: swap;
src: url("../typo/SpaceGrotesk-Bold.ttf") format("truetype");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400; /* Regular : texte courant */
font-display: swap;
src: url("../typo/IBMPlexSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500; /* Medium : éléments d'interface (menu, boutons) */
font-display: swap;
src: url("../typo/IBMPlexSans-Medium.ttf") format("truetype");
}
/* =============================================================================
1. VARIABLES (design tokens)
========================================================================== */
:root {
/* ---------------------------------------------------------------------
1.1 Palette de base (alimente uniquement les couleurs sémantiques 1.2)
------------------------------------------------------------------ */
--pcd-orange-500: #2563EB; /* couleur principale Click Digital */
--pcd-orange-600: #1F2937; /* survol / état actif */
--pcd-fond: #F9FAFB; /* fond de page alternatif (section, carte) */
--pcd-white: #ffffff;
--pcd-gray-50: #f7f8fa;
--pcd-gray-200: #ececf1;
--pcd-gray-600: #273549;
--pcd-gray-900: #1a1a1a;
/* ---------------------------------------------------------------------
1.2 Couleurs sémantiques (À UTILISER dans les composants)
------------------------------------------------------------------ */
--pcd-primary: var(--pcd-orange-500);
--pcd-primary-hover: var(--pcd-orange-600);
--pcd-primary-contrast: var(--pcd-white); /* texte sur fond primaire */
/* Bleu marine de l'identité : couleur STRUCTURELLE (formes, cadrages,
motifs graphiques). Même valeur que --pcd-primary-hover, mais à ne
jamais utiliser pour un état interactif (hover/focus) — l'inverse non
plus, pour ne pas coupler un accent visuel à un état d'interaction. */
--pcd-navy: var(--pcd-orange-600);
--pcd-text: var(--pcd-gray-900); /* texte courant */
--pcd-text-muted: var(--pcd-gray-600); /* texte secondaire */
--pcd-heading: var(--pcd-gray-900); /* titres */
--pcd-bg: var(--pcd-white); /* fond de page */
--pcd-bg-alt: var(--pcd-gray-50); /* fond de section alternée */
--pcd-surface: var(--pcd-white); /* cartes, menus, panneaux */
--pcd-surface-2: var(--pcd-gray-50); /* survol léger */
--pcd-border: var(--pcd-gray-200);
--pcd-link: var(--pcd-primary);
--pcd-link-hover: var(--pcd-primary-hover);
--pcd-focus-ring: var(--pcd-primary);
/* ---------------------------------------------------------------------
1.3 Typographie
------------------------------------------------------------------ */
--pcd-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--pcd-font-heading: "Space Grotesk", "IBM Plex Sans", -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--pcd-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas,
"Liberation Mono", Menlo, monospace;
/* Échelle de tailles — SEULE référence pour les font-size du site
(base 16px = 1rem). Aucun px en dur ailleurs.
Progression : 11 · 12 · 14 · 15 · 16 · 20 · 24 · 30 · 36 · 40-48 */
--pcd-text-2xs: 0.75rem; /* 12px — micro-libellés (majuscules) */
--pcd-text-xs: 0.75rem; /* 12px — légendes, descriptions courtes */
--pcd-text-sm: 0.875rem; /* 14px — texte secondaire */
--pcd-text-md: 0.9375rem; /* 15px — navigation, boutons */
--pcd-text-base: 1rem; /* 16px — texte courant */
--pcd-text-lg: 1.25rem; /* 20px — petit titre de carte */
--pcd-text-xl: 1.5rem; /* 24px — gros titre de carte, H4 */
--pcd-text-2xl: 1.875rem; /* 30px — H3 */
--pcd-text-3xl: 2.25rem; /* 36px — H2 */
--pcd-text-4xl: clamp(42px, 4vw, 60px); /* 42 → 60px — H1 (fluide) */
/* Graisses (limitées aux fichiers de police disponibles) */
--pcd-weight-medium: 500; /* IBM Plex Sans Medium (menu, boutons) */
--pcd-weight-semibold: 600; /* Space Grotesk SemiBold (h2–h6) */
--pcd-weight-bold: 700; /* Space Grotesk Bold (h1) */
/* Interlignage */
--pcd-leading-heading: 1.25;
--pcd-leading-normal: 1.6;
/* Interlettrage (letter-spacing) — règle unique appliquée sur tout le site :
· titres (h1–h5, logo) → resserré --pcd-tracking-tight
· texte courant / navigation / boutons → neutre --pcd-tracking-normal
(hérité depuis body, rien à écrire dans les composants)
· libellés en MAJUSCULES (h6, mini-titres) → aéré --pcd-tracking-wide */
--pcd-tracking-tight: -0.02em;
--pcd-tracking-normal: 0em;
--pcd-tracking-wide: 0.08em;
/* ---------------------------------------------------------------------
1.4 Espacement — ÉCHELLE UNIQUE du site (trame 8px, 4px pour le micro).
À utiliser pour tout margin / padding / gap. Progression :
1·2·3·4 → micro-relations (éléments très liés)
5·6 → titre ↔ texte ↔ CTA, entre paragraphes
7·8·9 → entre groupes de contenu / colonnes
10·11 → grandes respirations entre sections
------------------------------------------------------------------ */
--pcd-space-1: 0.25rem; /* 4 — micro-ajustement */
--pcd-space-2: 0.5rem; /* 8 */
--pcd-space-3: 0.75rem; /* 12 */
--pcd-space-4: 1rem; /* 16 */
--pcd-space-5: 1.5rem; /* 24 */
--pcd-space-6: 2rem; /* 32 */
--pcd-space-7: 3rem; /* 48 */
--pcd-space-8: 4rem; /* 64 */
--pcd-space-9: 5rem; /* 80 */
--pcd-space-10: 6rem; /* 96 */
--pcd-space-11: 8rem; /* 128 */
/* Rythme vertical des sections (fluide 48 → 96px ; utilisée par .pcd-section) */
--pcd-section-y: clamp(2rem, 1rem + 4vw, 4rem);
/* ---------------------------------------------------------------------
1.5 Rayons
------------------------------------------------------------------ */
--pcd-radius-sm: 6px;
--pcd-radius-md: 12px;
--pcd-radius-pill: 12px;
/* ---------------------------------------------------------------------
1.6 Ombres
------------------------------------------------------------------ */
--pcd-shadow-lg: 0 12px 26px rgba(0, 0, 0, .05),
0 47px 47px rgba(0, 0, 0, .04),
0 107px 64px rgba(0, 0, 0, .02);
/* ---------------------------------------------------------------------
1.7 Mise en page
------------------------------------------------------------------ */
--pcd-container: 1600px; /* largeur max du contenu */
--pcd-container-narrow: 820px; /* articles, formulaires */
--pcd-container-wide: 1400px;
--pcd-gutter: clamp(1rem, 0.5rem + 4vw, 3.5rem);
/* ---------------------------------------------------------------------
1.8 Transitions
------------------------------------------------------------------ */
--pcd-ease: cubic-bezier(.4, 0, .2, 1);
--pcd-transition-fast: 120ms var(--pcd-ease);
/* ---------------------------------------------------------------------
1.9 Empilement (z-index)
------------------------------------------------------------------ */
--pcd-z-dropdown: 20;
--pcd-z-header: 100;
/* ---------------------------------------------------------------------
1.10 Points de rupture (RAPPEL — non utilisables dans @media,
à recopier manuellement dans les media queries)
mobile : jusqu'à 600px
tablette : jusqu'à 992px
desktop : à partir de 993px
------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
1.11 Header (variables propres au composant — utilisées dans header.css)
------------------------------------------------------------------ */
--pcd-header-gap: var(--pcd-space-3); /* barre ↔ bord d'écran + barre ↔ méga-menu */
--pcd-header-max: 1240px; /* largeur max de la barre */
/* ---------------------------------------------------------------------
1.12 Hero animé « CD Hero » (variables propres au composant — utilisées
dans cd-hero.css et le SVG du logo dans template-parts/cd-hero.php).
Overrides responsive ≤1024px : juste après la fermeture de :root.
------------------------------------------------------------------ */
/* Couleurs (placeholders — à remplacer par le Brand Book) */
--cd-primary: #1d1d1b;
--cd-secondary: #2b6ef2; /* accent unique, parcimonieux */
--cd-background: #ffffff;
--cd-surface: #f4f4f2;
--cd-surface-2: #ececea;
--cd-text: #17170f;
--cd-muted: #6d6d66;
--cd-border: rgba(20, 20, 15, .12);
--cd-border-strong: rgba(20, 20, 15, .22);
--cd-grid: rgba(20, 20, 15, .06);
--cd-wood: #b98255; /* accent bois du faux site « L'Atelier » (logo uniquement) */
/* Typographie */
--cd-font-title: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
--cd-font-text: "IBM Plex Sans", system-ui, sans-serif;
/* Dimensions / rythme */
--cd-visual-max: 605px; /* +12 % de présence sur desktop (>1024px) */
--cd-builder-ratio: 1 / 1;
--cd-radius: 6px;
--cd-radius-screen: 8px; /* cadre du faux site : arrondi très léger, presque architectural */
--cd-screen-stroke: color-mix(in srgb, var(--cd-primary) 34%, transparent);
--cd-gap: clamp(2rem, 4.5vw, 5.5rem); /* ~80-90px sur grand écran */
--cd-content-max: 42rem; /* ~640px : la description respire davantage */
--cd-content-rise: 4.50rem; /* desktop : décalage du contenu gauche sous le haut de la zone utile (ancrage éditorial, ~60px plus haut qu'un centrage) */
/* Timing du morph filaire → fini (transitions CSS) */
--cd-morph: 400ms;
--cd-ease: cubic-bezier(.22, .61, .36, 1);
/* ---------------------------------------------------------------------
1.13 Liste éditoriale à index « pcd-index-list » (voir section 2) —
variable propre à ce motif : la couleur du grand numéro discret.
------------------------------------------------------------------ */
--pcd-index-color: color-mix(in srgb, var(--pcd-text) 18%, transparent);
}
/* Overrides responsive du hero animé « CD Hero » — valeurs par défaut : section 1.12.
Tablette ≤1024px : on resserre, les gains desktop ne s'appliquent pas. */
@media (max-width: 1024px) {
.cd-hero {
--cd-visual-max: 440px;
--cd-gap: clamp(2rem, 4vw, 3rem);
--cd-content-rise: 0px;
--cd-content-max: 34rem;
}
}
/* =============================================================================
2. APPLICATION DE LA CHARTE AUX PAGES
(base commune — surcharge volontairement certains styles de GeneratePress ;
garder les réglages "Personnaliser" de GeneratePress sur leurs valeurs par
défaut pour éviter les conflits)
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: var(--pcd-font-sans);
font-size: var(--pcd-text-base);
line-height: var(--pcd-leading-normal);
letter-spacing: var(--pcd-tracking-normal);
color: var(--pcd-text);
background-color: var(--pcd-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--pcd-font-heading);
line-height: var(--pcd-leading-heading);
letter-spacing: var(--pcd-tracking-tight);
color: var(--pcd-heading);
}
/* h1 : Space Grotesk Bold — h2 à h6 : Space Grotesk SemiBold */
h1 { font-size: var(--pcd-text-4xl); font-weight: var(--pcd-weight-bold); }
h2 { font-size: var(--pcd-text-3xl); font-weight: var(--pcd-weight-semibold); }
h3 { font-size: var(--pcd-text-2xl); font-weight: var(--pcd-weight-semibold); }
h4 { font-size: var(--pcd-text-xl); font-weight: var(--pcd-weight-semibold); }
h5 { font-size: var(--pcd-text-lg); font-weight: var(--pcd-weight-semibold); }
h6 {
font-size: var(--pcd-text-sm);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
}
p,
ul, ol,
blockquote,
figure,
table {
margin-top: 0;
margin-bottom: var(--pcd-space-4);
}
a {
color: var(--pcd-link);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color var(--pcd-transition-fast);
}
a:hover,
a:focus {
color: var(--pcd-link-hover);
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--pcd-focus-ring);
outline-offset: 2px;
border-radius: var(--pcd-radius-sm);
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
hr {
border: 0;
border-top: 1px solid var(--pcd-border);
margin: var(--pcd-space-6) 0;
}
code,
kbd,
pre,
samp {
font-family: var(--pcd-font-mono);
font-size: 0.9em;
}
::selection {
background: var(--pcd-primary);
color: var(--pcd-primary-contrast);
}
/* --- Bouton principal du site -------------------------------------------
.pcd-btn = LE bouton d'action de Click Digital (identité, ombrage flottant,
états de survol). Sert aussi de base aux boutons de GeneratePress et de
l'éditeur de blocs.
Les variantes propres à UNE page ou UN composant se définissent dans le
CSS de cette page (exemple : .pcd-header__cta--call dans header.css). */
.pcd-btn,
.button,
button.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pcd-space-3);
padding: var(--pcd-space-3) var(--pcd-space-5);
border: 0;
border-radius: var(--pcd-radius-pill);
background: var(--pcd-primary);
color: var(--pcd-primary-contrast);
font-family: var(--pcd-font-sans);
font-size: var(--pcd-text-md);
font-weight: var(--pcd-weight-medium);
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
/* Léger ombrage : le bouton paraît flotter au-dessus de la page. */
box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
transition:
background-color var(--pcd-transition-fast),
transform var(--pcd-transition-fast),
box-shadow var(--pcd-transition-fast);
}
.pcd-btn:hover,
.pcd-btn:focus-visible,
.button:hover,
.button:focus,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
background: var(--pcd-primary-hover);
color: var(--pcd-primary-contrast);
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
/* Variante secondaire : contour + texte FONCÉS au repos, qui passent au
BLEU de marque au survol (le bouton principal reste bleu plein : les deux
se distinguent bien). Fond clair, même ombrage flottant. */
.pcd-btn--secondary {
background: var(--pcd-surface);
color: var(--pcd-primary-hover);
box-shadow:
inset 0 0 0 1.5px var(--pcd-primary-hover),
0 6px 16px rgba(0, 0, 0, .10);
}
.pcd-btn--secondary:hover,
.pcd-btn--secondary:focus-visible {
background: var(--pcd-surface);
color: var(--pcd-primary);
box-shadow:
inset 0 0 0 1.5px var(--pcd-primary),
0 10px 22px rgba(0, 0, 0, .14);
}
/* --- Conteneur générique -------------------------------------------------- */
.pcd-container {
width: 100%;
max-width: var(--pcd-container);
margin-inline: auto;
padding-inline: var(--pcd-gutter);
}
.pcd-container--narrow { max-width: var(--pcd-container-narrow); }
.pcd-container--wide { max-width: var(--pcd-container-wide); }
/* --- Rythme vertical des sections --------------------------------------- */
.pcd-section {
padding-block: var(--pcd-section-y);
}
.pcd-section--alt {
background-color: var(--pcd-bg-alt);
}
/* --- Formes et cadrages — Blocs modulaires --------------------------------
Famille graphique « Formes et cadrages » : les cadrages techniques (voir
cd-hero.css : .cd-hero__frame-edge, .cd-builder__screen-edge) restent le
langage structurant principal ; les blocs modulaires ci-dessous en sont le
motif secondaire — petits carrés géométriques bleu / bleu marine, 3 tailles
fixes, contraste inversement proportionnel à la taille (plus un bloc est
grand, plus sa teinte est adoucie). Utilisés dans le hero (cd-hero.css :
.cd-hero__modules, [data-cd-mod]) mais entièrement génériques : aucune
dépendance à la structure du hero, réutilisables dans n'importe quelle
section.
Usage :
(le positionnement du groupe — top/left/right/bottom — reste à la charge
de l'appelant, comme dans cd-hero.css).
------------------------------------------------------------------ */
/* Groupe : conteneur positionné par l'appelant. */
.pcd-modgroup {
position: absolute;
}
/* Module de base : un seul carré, radius léger. Taille ET couleur pilotées
par les 2 modificateurs ci-dessous (jamais combinées à la main). */
.pcd-modblock {
display: block;
width: var(--pcd-mod-size);
height: var(--pcd-mod-size);
background: var(--pcd-mod-color);
border-radius: var(--pcd-mod-radius);
}
/* 3 tailles fixes, écart volontairement marqué (pas de palier intermédiaire). */
.pcd-modblock--sm { --pcd-mod-size: 12px; --pcd-mod-radius: 4px; } /* petit : accent, contraste fort */
.pcd-modblock--md { --pcd-mod-size: 25px; --pcd-mod-radius: 5px; } /* moyen : transition */
.pcd-modblock--lg { --pcd-mod-size: 50px; --pcd-mod-radius: 6px; } /* grand : masse discrète, très doux */
/* Règle de contraste : plus le bloc est grand, plus la teinte est adoucie
(mélange progressif vers le blanc via color-mix — même technique que
--cd-screen-stroke ci-dessus). Petit : légèrement adouci (pas la couleur
de marque pure) pour rester lisible sans devenir tape-à-l'œil.
Couleur STRUCTURELLE : --pcd-navy (identité), jamais --pcd-primary-hover
(état interactif) — les deux valent la même chose mais n'ont pas le même
rôle. */
.pcd-modblock--blue.pcd-modblock--sm { --pcd-mod-color: color-mix(in srgb, var(--pcd-primary) 82%, white); }
.pcd-modblock--blue.pcd-modblock--md { --pcd-mod-color: color-mix(in srgb, var(--pcd-primary) 55%, white); }
.pcd-modblock--blue.pcd-modblock--lg { --pcd-mod-color: color-mix(in srgb, var(--pcd-primary) 18%, white); }
.pcd-modblock--navy.pcd-modblock--sm { --pcd-mod-color: color-mix(in srgb, var(--pcd-navy) 82%, white); }
.pcd-modblock--navy.pcd-modblock--md { --pcd-mod-color: color-mix(in srgb, var(--pcd-navy) 55%, white); }
.pcd-modblock--navy.pcd-modblock--lg { --pcd-mod-color: color-mix(in srgb, var(--pcd-navy) 16%, white); }
/* Assemblages autorisés. Le 1er module (en flux) donne sa taille au groupe ;
les suivants sont positionnés en absolu par rapport à lui — fonctionne
aussi bien pour 2 modules de même taille que pour une paire grand/petit. */
.pcd-modgroup > .pcd-modblock:first-child { position: relative; }
.pcd-modgroup > .pcd-modblock ~ .pcd-modblock { position: absolute; }
/* Duo vertical (2 blocs empilés, même taille) */
.pcd-modgroup--stack > .pcd-modblock:last-child { top: calc(100% + 4px); left: 0; }
/* Duo décalé (haut-droit / bas-gauche, même taille) */
.pcd-modgroup--offset > .pcd-modblock:last-child { top: calc(100% + 4px); right: calc(100% + 4px); }
/* Composition en L (1 bloc + 2 blocs en bas, même taille — petits blocs uniquement) */
.pcd-modgroup--l > .pcd-modblock:nth-child(2) { top: calc(100% + 4px); left: 0; }
.pcd-modgroup--l > .pcd-modblock:nth-child(3) { top: calc(100% + 4px); left: 16px; }
/* Paire grand+petit ou moyen+petit : le petit bloc vient s'accrocher en
« badge » au coin bas-gauche du grand/moyen, avec léger débord. */
.pcd-modgroup--pair > .pcd-modblock:last-child { top: calc(100% - 0px); left: -20px; }
/* --- Liste éditoriale à index « pcd-index-list » --------------------------
Motif générique, volontairement différent du cadrage technique (Hero) et
des cartes (Services) : une liste sobre, filet horizontal + grand numéro
discret, pensée pour une présentation éditoriale (arguments, étapes,
secteurs d'activité...). Réutilisable dans n'importe quelle section.
Usage :
La largeur de la colonne d'index (--pcd-index-list-col, 72px par défaut)
peut être redéfinie par l'appelant si besoin, comme --pcd-mod-size pour
.pcd-modblock ci-dessus. ------------------------------------------------ */
.pcd-index-list {
list-style: none;
margin: 0;
padding: 0;
}
.pcd-index-list__item {
display: grid;
grid-template-columns: var(--pcd-index-list-col, 72px) 1fr;
gap: var(--pcd-space-5);
padding-block: var(--pcd-space-6);
border-top: 1px solid var(--pcd-border);
}
.pcd-index-list__item:last-child {
border-bottom: 1px solid var(--pcd-border);
}
.pcd-index-list__index {
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-3xl);
font-weight: var(--pcd-weight-semibold);
line-height: 1;
color: var(--pcd-index-color);
}
.pcd-index-list__title {
margin: 0 0 var(--pcd-space-2);
}
.pcd-index-list__text {
margin: 0;
color: var(--pcd-text-muted);
}
/* --- Processus en étapes ------------------------------------------------
Composant générique : liste ordonnée d'étapes reliées par une ligne de
progression. Desktop : horizontal (4 colonnes). ≤ 980px : vertical avec
ligne sur le côté gauche. */
.pcd-process {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--pcd-space-7);
position: relative;
}
.pcd-process::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--pcd-border);
}
.pcd-process__item {
position: relative;
padding-top: var(--pcd-space-5);
}
.pcd-process__item::before {
content: "";
position: absolute;
top: -5px;
left: var(--pcd-space-5);
width: 2px;
height: 11px;
background: var(--pcd-primary);
}
.pcd-process__index {
display: block;
margin-bottom: var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-2xl);
font-weight: var(--pcd-weight-semibold);
color: var(--pcd-primary);
}
.pcd-process__title {
margin: 0 0 var(--pcd-space-2);
font-family: var(--pcd-font-heading);
font-weight: var(--pcd-weight-semibold);
}
.pcd-process__text {
margin: 0;
font-size: var(--pcd-text-sm);
color: var(--pcd-text-muted);
}
@media (max-width: 980px) {
.pcd-process {
grid-template-columns: 1fr;
gap: 0;
padding-left: var(--pcd-space-7);
}
.pcd-process::before {
top: 0;
bottom: 0;
left: 0;
right: auto;
width: 1px;
height: auto;
}
.pcd-process__item {
padding-top: 0;
padding-bottom: var(--pcd-space-7);
}
.pcd-process__item:last-child {
padding-bottom: 0;
}
.pcd-process__item::before {
top: var(--pcd-space-1);
left: calc(-1 * var(--pcd-space-7) - 4px);
width: 9px;
height: 2px;
}
}
/* --- Accessibilité : réduire les animations si demandé ------------------ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* --- Suppression des paramètres default generatepress--- */
.one-container .site-content {
padding: 0;
}