/* =========================================================================
EAFPS — Page "Procedure" / contenu long-form
À intégrer via le thème (theme.json -> "styles.custom" ou style.css enfant)
========================================================================= */
/* ---------- Fontes ----------
Butler n'est pas sur Google Fonts → auto-hébergement requis.
Téléchargez Butler chez Fontesk / FontShare (license OFL) et déposez
les .woff2 dans /assets/fonts/ du thème. Décommentez ci-dessous.
@font-face {
font-family: "Butler";
src: url("./fonts/butler-medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Butler";
src: url("./fonts/butler-semibold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
Inter est sur Google Fonts → ajoutez dans le du thème :
------------------------------------------------------------------------- */
/* ---------- Design tokens — calibrés Figma EAFPS ---------- */
:root {
/* Palette principale — valeurs Figma confirmées */
--eafps-turquoise: #4bc1d0;
--eafps-turquoise-dark: #3aa7b5;
--eafps-turquoise-50: #eaf7f9;
/* Palette secondaire — valeurs Figma confirmées */
--eafps-navy: #272e47;
--eafps-navy-light: #3a4263;
--eafps-canard: #128aa2;
--eafps-parme-light: #f6f7ff;
/* Neutres */
--eafps-ink: #272e47;
--eafps-text: #3a4250;
--eafps-muted: #6b7280;
--eafps-border: #e5e7eb;
--eafps-bg: #ffffff;
--eafps-bg-alt: #f6f8fb;
/* États sémantiques (callouts) */
--eafps-warning: #b45309;
--eafps-warning-bg: #fdf4e3;
--eafps-success: #047857;
--eafps-success-bg: #ecfdf5;
--eafps-danger: #b91c1c;
--eafps-danger-bg: #fef2f2;
/* Alias sémantiques */
--eafps-primary: var(--eafps-turquoise);
--eafps-primary-dark: var(--eafps-turquoise-dark);
--eafps-primary-50: var(--eafps-turquoise-50);
--eafps-accent: var(--eafps-canard);
/* Typographie */
--eafps-font-display: "Butler", "Playfair Display", Georgia, serif;
--eafps-font-sans:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Layout */
--eafps-container: 1520px;
--eafps-content: 720px;
--eafps-toc-width: 260px;
--eafps-gutter: clamp(1.25rem, 5vw, 200px);
/* Radius */
--eafps-radius-pill: 50px;
--eafps-radius: 10px;
--eafps-radius-sm: 6px;
/* Rythme */
--eafps-space-section: 3.5rem;
}
/* ---------- Article wrapper + safety net overflow ---------- */
.eafps-article {
font-family: var(--eafps-font-sans);
color: var(--eafps-text);
line-height: 1.65;
font-size: 1.0625rem;
/* Safety net : empêche les longs mots de déborder horizontalement */
overflow-wrap: break-word;
word-wrap: break-word;
}
.eafps-article *::selection {
background: var(--eafps-primary);
color: #fff;
}
.eafps-article img,
.eafps-article iframe,
.eafps-article video {
max-width: 100%;
height: auto;
}
/* ---------- Header ---------- */
.eafps-article__header {
/* Padding-top à 0 — Salient gère l'espace au-dessus via son header */
padding: 0 1.25rem 2.5rem;
border-bottom: 1px solid var(--eafps-border);
margin-bottom: 3rem;
}
.eafps-article__header>* {
max-width: 880px;
margin-inline: auto;
}
.eafps-eyebrow {
font-family: var(--eafps-font-sans);
color: var(--eafps-canard);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.8125rem;
font-weight: 600;
margin: 0 auto 1rem;
}
.eafps-title {
font-family: var(--eafps-font-display);
color: var(--eafps-ink);
/* Min réduit à 1.5rem pour les petits écrans */
font-size: clamp(1.5rem, 1rem + 2vw, 3.5rem);
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 auto 1.5rem;
}
.eafps-lede {
font-family: var(--eafps-font-sans);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.3125rem);
line-height: 1.55;
color: var(--eafps-ink);
margin: 0 auto 1rem;
font-weight: 400;
}
/* ---------- Body : 2 colonnes (TOC + contenu) ---------- */
.eafps-article__body {
max-width: var(--eafps-container);
margin-inline: auto;
padding: 0 1.25rem var(--eafps-space-section);
display: grid;
grid-template-columns: var(--eafps-toc-width) minmax(0, 1fr);
gap: 4rem;
align-items: start;
}
@media (max-width: 999px) {
.eafps-article__body {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ---------- Table of contents (sommaire) ---------- */
.eafps-toc {
position: relative;
align-self: start;
overflow-y: auto;
padding: 0;
font-family: var(--eafps-font-sans);
will-change: transform, opacity;
transition: opacity 0.2s ease;
scrollbar-width: thin;
scrollbar-color: var(--eafps-border) transparent;
}
.eafps-toc::-webkit-scrollbar {
width: 4px;
}
.eafps-toc::-webkit-scrollbar-track {
background: transparent;
}
.eafps-toc::-webkit-scrollbar-thumb {
background: var(--eafps-border);
border-radius: 2px;
}
.eafps-toc::-webkit-scrollbar-thumb:hover {
background: var(--eafps-muted);
}
.eafps-toc__title {
font-family: var(--eafps-font-sans);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--eafps-muted);
margin: 0 0 1rem;
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--eafps-border);
}
.eafps-toc__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.eafps-toc__list li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.eafps-toc__list li::marker {
content: none;
}
.eafps-toc__list a {
display: block;
position: relative;
padding: 0.5rem 0 0.5rem 1rem;
margin-left: -1rem;
border-left: 2px solid transparent;
color: var(--eafps-muted);
font-size: 0.9rem;
font-weight: 400;
line-height: 1.45;
text-decoration: none;
transition:
color 0.18s ease,
border-color 0.18s ease;
}
.eafps-toc__list a:hover {
color: var(--eafps-ink);
}
.eafps-toc__list a.is-current {
color: var(--eafps-navy);
font-weight: 600;
border-left-color: var(--eafps-turquoise);
}
@media (max-width: 999px) {
.eafps-toc {
position: static;
max-height: none;
overflow: visible;
background: var(--eafps-parme-light);
border-radius: var(--eafps-radius);
padding: 1.5rem 1.75rem;
margin-bottom: 2rem;
}
.eafps-toc__title {
margin-bottom: 1rem;
padding-bottom: 0.875rem;
border-bottom-color: rgba(39, 46, 71, 0.12);
}
.eafps-toc__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 0.125rem;
}
.eafps-toc__list a {
padding: 0.5rem 0 0.5rem 0.875rem;
margin-left: -0.875rem;
font-size: 0.9375rem;
}
}
@media (max-width: 690px) {
.eafps-toc {
padding: 1.25rem 1.25rem;
}
.eafps-toc__list {
grid-template-columns: 1fr;
column-gap: 0;
}
.eafps-toc__list a {
padding: 0.625rem 0 0.625rem 0.875rem;
font-size: 0.9375rem;
}
}
@media (max-width: 450px) {
.eafps-toc {
padding: 1rem 1rem;
margin-bottom: 1.5rem;
}
.eafps-toc__title {
font-size: 0.6875rem;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
letter-spacing: 0.12em;
}
.eafps-toc__list a {
padding: 0.5rem 0 0.5rem 0.75rem;
margin-left: -0.75rem;
font-size: 0.875rem;
}
}
/* ---------- Contenu principal : typographie ---------- */
.eafps-content {
max-width: var(--eafps-content);
}
.eafps-content>*+* {
margin-top: 1rem;
}
.eafps-content h2 {
font-family: var(--eafps-font-display);
color: var(--eafps-ink);
/* Min réduit pour mieux descendre sur mobile */
font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.015em;
margin: var(--eafps-space-section) 0 1.25rem;
padding-top: 2rem;
border-top: 1px solid var(--eafps-border);
scroll-margin-top: 1.5rem;
}
.eafps-content h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.eafps-content h3 {
font-family: var(--eafps-font-sans);
color: var(--eafps-ink);
font-size: 1.25rem;
font-weight: 600;
margin: 2.25rem 0 0.75rem;
scroll-margin-top: 1.5rem;
}
.eafps-content h4 {
font-family: var(--eafps-font-sans);
color: var(--eafps-ink);
font-size: 1.0625rem;
font-weight: 600;
margin: 1.5rem 0 0.5rem;
}
.eafps-content p {
margin: 0 0 1rem;
}
.eafps-content ul,
.eafps-content ol {
padding-left: 1.25rem;
margin: 0 0 1.25rem;
}
.eafps-content li {
margin-bottom: 0.5rem;
}
.eafps-content li::marker {
color: var(--eafps-accent);
}
.eafps-content strong {
color: var(--eafps-ink);
font-weight: 600;
}
.eafps-content a {
color: var(--eafps-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.eafps-content a:hover {
color: var(--eafps-primary-dark);
}
/* ---------- Composant : Callout ---------- */
.eafps-callout {
background: var(--eafps-parme-light);
border-left: 4px solid var(--eafps-turquoise);
border-radius: var(--eafps-radius);
padding: 1.5rem 1.75rem;
margin: 2rem 0;
}
.eafps-callout> :first-child {
margin-top: 0;
}
.eafps-callout> :last-child {
margin-bottom: 0;
}
.eafps-callout h3,
.eafps-callout h4 {
margin-top: 0;
color: var(--eafps-navy);
}
.eafps-callout--warning {
background: var(--eafps-warning-bg);
border-left-color: var(--eafps-warning);
}
.eafps-callout--warning h3,
.eafps-callout--warning h4 {
color: var(--eafps-warning);
}
.eafps-callout--success {
background: var(--eafps-success-bg);
border-left-color: var(--eafps-success);
}
.eafps-callout--success h3,
.eafps-callout--success h4 {
color: var(--eafps-success);
}
.eafps-callout--danger {
background: var(--eafps-danger-bg);
border-left-color: var(--eafps-danger);
}
.eafps-callout--danger h3,
.eafps-callout--danger h4 {
color: var(--eafps-danger);
}
.eafps-callout--canard {
background: var(--eafps-parme-light);
border-left-color: var(--eafps-canard);
}
.eafps-callout--canard h3,
.eafps-callout--canard h4 {
color: var(--eafps-canard);
}
/* ---------- Composant : Liste règle (ABCDE) ---------- */
.eafps-rule-list {
list-style: none !important;
padding-left: 0 !important;
margin: 1rem 0 !important;
}
.eafps-rule-list li {
display: grid;
grid-template-columns: 2.25rem 1fr;
gap: 0.875rem;
align-items: baseline;
padding: 0.75rem 0;
border-bottom: 1px dashed var(--eafps-border);
}
.eafps-rule-list li:last-child {
border-bottom: 0;
}
.eafps-rule-list li>strong:first-child {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--eafps-turquoise);
color: #fff !important;
font-family: var(--eafps-font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
}
/* ---------- Composant : Grille de cartes ---------- */
.eafps-card-grid {
display: grid !important;
/* min(100%, 240px) : la colonne shrinke en-dessous de 240px si l'écran
est trop étroit (au lieu de overflow horizontal) */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 1rem;
margin: 1.5rem 0 2rem;
}
.eafps-card-grid>.wp-block-column {
background: var(--eafps-bg);
border: 1px solid var(--eafps-border);
border-radius: var(--eafps-radius);
padding: 1.5rem;
margin: 0;
}
.eafps-card {
background: var(--eafps-bg);
border: 1px solid var(--eafps-border);
border-radius: var(--eafps-radius);
padding: 1.5rem;
}
.eafps-card-grid>.wp-block-column h3,
.eafps-card-grid>.wp-block-column h4,
.eafps-card h3,
.eafps-card h4 {
margin-top: 0;
color: var(--eafps-navy);
}
.eafps-card ul:last-child {
margin-bottom: 0;
}
.eafps-card__tag {
display: inline-block;
font-family: var(--eafps-font-sans);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--eafps-canard);
margin-bottom: 0.5rem;
}
/* ---------- Composant : Do / Don't ---------- */
.eafps-do-dont {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 2rem 0;
}
/* ---------- Composant : Timeline ---------- */
.eafps-timeline {
position: relative;
padding-left: 2rem;
margin: 2rem 0;
border-left: 2px solid var(--eafps-border);
}
.eafps-timeline>.wp-block-group,
.eafps-timeline>.eafps-timeline__item {
position: relative;
padding-bottom: 2rem;
margin: 0;
}
.eafps-timeline>.wp-block-group:last-child,
.eafps-timeline>.eafps-timeline__item:last-child {
padding-bottom: 0;
}
.eafps-timeline>.wp-block-group::before,
.eafps-timeline>.eafps-timeline__item::before {
content: "";
position: absolute;
left: -2.4rem;
top: 0.65rem;
width: 0.75rem;
height: 0.75rem;
background: var(--eafps-primary);
border-radius: 50%;
box-shadow:
0 0 0 3px var(--eafps-bg),
0 0 0 4px var(--eafps-primary);
}
.eafps-timeline h3 {
margin-top: 0 !important;
color: var(--eafps-navy);
font-size: 1.0625rem;
}
/* ---------- CTA en bas de page ---------- */
.eafps-cta {
background: var(--eafps-navy);
color: #fff;
border-radius: var(--eafps-radius);
padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
margin: 4rem auto;
max-width: var(--eafps-container);
text-align: center;
}
.eafps-cta h2 {
color: #fff !important;
border-top: 0 !important;
padding-top: 0 !important;
margin: 0 auto 1rem !important;
font-family: var(--eafps-font-display);
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.015em;
}
.eafps-cta p {
font-family: var(--eafps-font-sans);
color: rgba(255, 255, 255, 0.85);
max-width: 60ch;
margin: 0 auto 1.75rem;
font-size: 1.0625rem;
line-height: 1.55;
}
.eafps-cta .wp-block-button__link {
background: var(--eafps-turquoise);
color: #fff;
padding: 12px 20px;
border-radius: var(--eafps-radius-pill);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition:
transform 0.15s ease,
background 0.15s ease;
}
.eafps-cta .wp-block-button__link:hover {
background: var(--eafps-turquoise-dark);
transform: translateY(-1px);
}
/* ---------- Variants bouton ---------- */
.wp-block-button.is-style-eafps-pill .wp-block-button__link {
background: var(--eafps-turquoise);
color: #fff;
padding: 12px 20px;
border-radius: var(--eafps-radius-pill);
font-weight: 600;
font-size: 0.9375rem;
display: inline-flex;
align-items: center;
gap: 5px;
}
.wp-block-button.is-style-eafps-pill .wp-block-button__link:hover {
background: var(--eafps-turquoise-dark);
}
.wp-block-button.is-style-eafps-pill-outline .wp-block-button__link {
background: transparent;
color: var(--eafps-turquoise);
border: 1.5px solid var(--eafps-turquoise);
padding: 10.5px 18.5px;
border-radius: var(--eafps-radius-pill);
font-weight: 600;
font-size: 0.9375rem;
}
.wp-block-button.is-style-eafps-pill-outline .wp-block-button__link:hover {
background: var(--eafps-turquoise);
color: #fff;
}
/* =========================================================================
RESPONSIVE — ≤ 690px (mobile)
Corrections pour éviter les débordements horizontaux et adapter les
tailles/paddings aux petits écrans.
========================================================================= */
@media (max-width: 690px) {
/* Header : padding réduit */
.eafps-article__header {
padding: 0 1rem 1.75rem;
margin-bottom: 2rem;
}
.eafps-title {
line-height: 1.15;
margin-bottom: 1rem;
}
.eafps-lede {
font-size: 1rem;
line-height: 1.55;
}
/* Body : padding réduit pour gagner de la place */
.eafps-article__body {
padding: 0 1rem var(--eafps-space-section);
}
/* Section spacing réduit */
.eafps-content>*+* {
margin-top: 0.875rem;
}
.eafps-content h2 {
line-height: 1.2;
margin: 2.5rem 0 1rem;
padding-top: 1.75rem;
}
.eafps-content h3 {
font-size: 1.125rem;
margin: 1.75rem 0 0.625rem;
}
.eafps-content h4 {
font-size: 1rem;
margin: 1.25rem 0 0.5rem;
}
/* Cards : 1 colonne pleine largeur */
.eafps-card-grid {
grid-template-columns: 1fr;
gap: 0.875rem;
margin: 1.25rem 0 1.5rem;
}
.eafps-card-grid>.wp-block-column,
.eafps-card {
padding: 1.25rem;
}
/* Callouts : padding réduit */
.eafps-callout {
padding: 1.25rem 1.25rem;
margin: 1.5rem 0;
}
/* Rule list (ABCDE) : pastilles + gaps plus petits */
.eafps-rule-list li {
grid-template-columns: 1.875rem 1fr;
gap: 0.625rem;
padding: 0.625rem 0;
}
.eafps-rule-list li>strong:first-child {
width: 1.75rem;
height: 1.75rem;
font-size: 1rem;
}
/* Timeline : padding-left réduit */
.eafps-timeline {
padding-left: 1.25rem;
margin: 1.5rem 0;
}
.eafps-timeline>.wp-block-group,
.eafps-timeline>.eafps-timeline__item {
padding-bottom: 1.5rem;
}
.eafps-timeline>.wp-block-group::before,
.eafps-timeline>.eafps-timeline__item::before {
left: -1.65rem;
width: 0.625rem;
height: 0.625rem;
box-shadow:
0 0 0 3px var(--eafps-bg),
0 0 0 4px var(--eafps-primary);
}
/* Do/Don't : 1 colonne */
.eafps-do-dont {
grid-template-columns: 1fr;
gap: 0.875rem;
margin: 1.5rem 0;
}
/* CTA : pleine largeur (zéro marge horizontale) + padding réduit */
.eafps-cta {
padding: 2rem 1.25rem;
margin: 2.5rem 0;
border-radius: var(--eafps-radius);
}
.eafps-cta h2 {
font-size: clamp(1.375rem, 4.5vw, 1.875rem);
line-height: 1.2;
margin-bottom: 0.875rem !important;
}
.eafps-cta p {
font-size: 1rem;
margin-bottom: 1.5rem;
line-height: 1.55;
}
}
/* =========================================================================
RESPONSIVE — ≤ 450px (très petit écran)
Densification fine pour iPhone SE, anciens Android, etc.
========================================================================= */
@media (max-width: 450px) {
/* Article : texte body légèrement réduit */
.eafps-article {
font-size: 1rem;
}
/* Header : padding minimal */
.eafps-article__header {
padding: 0 0.875rem 1.5rem;
margin-bottom: 1.5rem;
}
.eafps-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.12em;
}
.eafps-title {
font-size: 1.5rem;
line-height: 1.2;
}
.eafps-lede {
font-size: 0.9375rem;
}
/* Body */
.eafps-article__body {
padding: 0 0.875rem var(--eafps-space-section);
gap: 1.5rem;
}
/* Content typo compactée */
.eafps-content h2 {
font-size: 1.25rem;
padding-top: 1.25rem;
margin: 2rem 0 0.875rem;
}
.eafps-content h3 {
font-size: 1.0625rem;
}
.eafps-content h4 {
font-size: 0.9375rem;
}
/* Cards : padding minimal */
.eafps-card-grid>.wp-block-column,
.eafps-card {
padding: 1rem;
}
/* Callouts : padding compact */
.eafps-callout {
padding: 1rem 1rem;
margin: 1.25rem 0;
}
/* Timeline : compact */
.eafps-timeline {
padding-left: 1rem;
}
.eafps-timeline>.wp-block-group::before,
.eafps-timeline>.eafps-timeline__item::before {
left: -1.4rem;
}
/* CTA : encore plus compact */
.eafps-cta {
padding: 1.5rem 1rem;
margin: 2rem 0;
}
.eafps-cta h2 {
font-size: 1.375rem;
}
.eafps-cta p {
font-size: 0.9375rem;
}
}
/* ---------- Print ---------- */
@media print {
.eafps-toc,
.eafps-cta {
display: none;
}
.eafps-article__body {
grid-template-columns: 1fr;
}
.eafps-content {
max-width: 100%;
}
.eafps-callout {
break-inside: avoid;
}
}
/* =========================================================================
Theme overrides — Salient compatibility
========================================================================= */
/* Salient ajoute padding-bottom: 1.5em à TOUS les */
.eafps-article p {
padding-bottom: 0;
}
/* Salient reset enlève margin-bottom sur ul/ol */
.eafps-content ul,
.eafps-content ol {
margin: 0 0 1.25rem !important;
padding-left: 1.25rem !important;
}
/* Salient impose font-size: 18px et line-height: 32px sur h4 */
.eafps-content h4 {
font-size: 1.0625rem;
line-height: 1.4;
font-weight: 600;
}
/* Force la couleur des titres */
.eafps-article h1,
.eafps-article h2,
.eafps-article h3,
.eafps-article h4 {
color: var(--eafps-ink);
}
.eafps-cta h2 {
color: #fff;
}
/* Dernier
de la liste-règle (ABCDE) */
.eafps-rule-list li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
/* Dernier enfant d'un callout */
.eafps-callout> :last-child,
.eafps-callout> :last-child> :last-child,
.eafps-callout p:last-child,
.eafps-callout ul:last-child,
.eafps-callout ol:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Dernier enfant d'une carte */
.eafps-card> :last-child,
.eafps-card-grid>.wp-block-column> :last-child,
.eafps-card-grid>.wp-block-column> :last-child> :last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Dernier enfant d'un item de timeline */
.eafps-timeline>.wp-block-group> :last-child,
.eafps-timeline>.eafps-timeline__item> :last-child,
.eafps-timeline>.wp-block-group> :last-child> :last-child,
.eafps-timeline>.eafps-timeline__item> :last-child> :last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Tag de carte */
.eafps-card__tag {
margin-bottom: 0.25rem;
}
/* CTA : centrer titre et paragraphe, sentence case */
.eafps-cta h2,
.eafps-cta p {
text-align: center;
}
.eafps-cta h2 {
text-transform: none;
}
.eafps-cta p:last-of-type {
padding-bottom: 0;
}