/*
* Page générique (modulaire) — styles.
*
* Repris de la maquette « Page modulaire », chargés UNIQUEMENT sur le gabarit
* template-generique.php (voir inc/enqueue.php). Tout est scopé sous « .pm-page » : plusieurs
* classes (.wrap, .sec-title, .sec-head, .kick, .hl, .hr, .reveal, .btn-orange) sont partagées
* avec d'autres gabarits et ne doivent fuir ni vers l'en-tête, ni vers le pied de page. Les
* polices « Anton » et « Open Sans » sont fournies globalement par style.css (@font-face +
* enqueue) → non redéclarées ici.
*
* Écarts assumés par rapport à la maquette (rendu identique, feuille sans code mort) :
* • la maquette scopait ses styles sous « .contact-page » (sa feuille avait été copiée depuis
* la page Contact) : le gabarit pose « .pm-page », qui porte le même habillage ;
* • la PREMIÈRE section de la page reçoit le retrait haut qui dégage l'en-tête fixe du site.
* La maquette s'affichait sans en-tête : son contenu partait du haut de la page, et se
* retrouverait caché derrière la barre de navigation, qui est opaque. Le retrait est posé
* sur la première section EN FLUX, quelle qu'elle soit — sur cette page plus qu'ailleurs,
* l'éditeur décide de ce qui vient en premier (voir « Dégagement de l'en-tête » plus bas) ;
* • les cadres « image-slot » de la maquette (attente de l'outil de maquettage) sont de vraies
* balises alimentées par la médiathèque. Sans image choisie, le gabarit ne rend pas
* l'élément du tout : il n'y a donc aucun cadre d'attente à styler ;
* • les COULEURS posées par le RANG (:nth-child) le sont par une CLASSE : filets des cartes de
* témoignage (.temoi-card--…) et fonds des cartes de renvoi (.mcard--…). Ces blocs viennent
* de répéteurs dont une ligne vide n'est pas rendue — un :nth-child décalerait les couleurs.
* La couleur d'une ligne de publication, elle, vient de son TYPE : la feuille ne connaît pas
* la liste des types, elle lit « --publi-color », posé au rendu (comme sur la page
* « Publications & ressources ») ;
* • les trois grilles s'adaptent au NOMBRE d'éléments saisis (--team-cols, --temoi-cols,
* --cards-cols) : la maquette figeait 4, 3 et 3 colonnes. Deux cartes occupent donc la
* largeur au lieu de laisser une colonne vide à droite ;
* • l'habillage du texte riche (.wys-body) couvre ce que produit réellement l'éditeur : les
* boutons « citation » et « ajouter un média » donnent un
et une
* (ou un .wp-caption sur un contenu plus ancien), là où la maquette écrivait à la main
* .wys-quote et .wys-fig. Les listes ORDONNÉES, absentes de la maquette, sont habillées
* comme partout ailleurs sur le site : numéro en Anton bleu. L'image insérée dans le texte
* garde son PROPORTION D'ORIGINE, là où la maquette imposait un 16/9 recadré : c'est
* l'éditeur qui choisit le média, le gabarit n'a pas à en rogner le haut et le bas ;
* • sans JavaScript, les blocs « .reveal » sont visibles d'office (@media scripting: none) ;
* l'apparition est aussi neutralisée en « mouvement réduit ». Aucun contenu ne peut rester
* invisible ;
* • les classes que le balisage n'utilise pas ne sont pas reprises : .eyebrow, .hr3, .temoi-img
* et .temoi-av (aucun portrait dans ce module) ;
* • TROIS points où la maquette ne montre pas ce que son propre CSS demande, et où c'est le CSS
* qui fait foi (arbitré avec le PM le 2026-09-14 — ne pas « recorriger » vers l'image) :
* le lien « voir tout » (.see-all) et l'enveloppe d'une tuile d'équipe (.tm-mail) sont en
* BLEU #055da8, et le chapeau du bandeau (.md-lead) garde ses 28 px de marge basse. Dans le
* bundle de la maquette, « .contact-page a { color: inherit } » et « .contact-page p {
* margin-bottom: 0 } » l'emportent en spécificité sur « .see-all », « .tm-mail » et
* « .md-lead » — l'image affiche donc du marine et un chapeau collé aux boutons, alors que
* la feuille écrit bien #055da8 et 28 px. Le scope « .pm-page X » de cette feuille est plus
* précis que le reset : l'intention passe.
*
* @package medecins-du-monde
*/
/* ============================================================================
* Base
* ========================================================================= */
.pm-page {
--pm-gutter: 26px;
--pm-space: 80px;
font-family: 'Open Sans', sans-serif;
color: #1d1a55;
background: #fff;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.pm-page p {
margin: 0;
}
.pm-page a {
text-decoration: none;
color: inherit;
}
.pm-page .wrap {
max-width: none;
margin: 0;
padding: 0 var(--pm-gutter);
}
/* ----------------------------------------------------------------------------
* Dégagement de l'en-tête — l'en-tête du thème est en position:fixed et opaque : sans retrait,
* il recouvrirait le haut de la première section.
*
* Le retrait est porté par la première section EN FLUX : il suit donc la page telle qu'elle est
* composée au back-office — une bannière d'ordinaire, n'importe quelle autre section sinon.
*
* L'en-tête n'a pas une hauteur unique : la bande d'alerte qui le surmonte s'affiche ou non
* selon un interrupteur du back-office (« alert_show »). Les deux états sont traités, au lieu de
* réserver toujours la hauteur maximale : sinon un ruban blanc s'intercalerait entre la barre de
* navigation et la section dès que la bande d'alerte est masquée.
*
* Hauteurs mesurées, en pixels :
*
* sans la bande avec la bande
* ≥ 1280 px 104 146
* ≤ 1279 px 59 101
* ------------------------------------------------------------------------- */
.pm-page > :first-child {
padding-top: 104px;
}
body:has(.alert-section) .pm-page > :first-child {
padding-top: 146px;
}
/* ============================================================================
* Éléments partagés par plusieurs sections
* ========================================================================= */
.pm-page .sec-title {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.18;
letter-spacing: -0.01em;
color: #1d1a55;
}
.pm-page .sec-title .hl {
background: linear-gradient(#bddfec, #bddfec) no-repeat;
background-size: 100% 1.19em;
background-position: 0 0.12em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.pm-page .kick {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.08em;
color: #e9511c;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.pm-page .kick::before {
content: '';
width: 22px;
height: 2px;
background: #e9511c;
border-radius: 2px;
}
.pm-page .sec-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.pm-page .see-all {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
color: #055da8;
border-bottom: 2px solid #055da8;
padding-bottom: 3px;
white-space: nowrap;
transition: color 0.25s, border-color 0.25s;
}
.pm-page .see-all:hover {
color: #e9511c;
border-color: #e9511c;
}
/* Boutons. */
.pm-page .btn-orange {
display: inline-flex;
align-items: center;
gap: 12px;
background: #e9511c;
color: #fff;
border: 1px solid #e9511c;
border-radius: 5px;
padding: 14px 26px;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s;
}
.pm-page .btn-orange:hover {
background: #d1440f;
color: #fff;
}
.pm-page .btn-orange img {
width: 14px;
transition: transform 0.3s;
}
.pm-page .btn-orange:hover img {
transform: translateX(4px);
}
.pm-page .btn-ghost-line {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: #1d1a55;
border: 1px solid #cfd9e8;
border-radius: 5px;
padding: 14px 26px;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.pm-page .btn-ghost-line:hover {
background: #1d1a55;
color: #fff;
border-color: #1d1a55;
}
/* Apparitions. */
@keyframes pm-rise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: none;
}
}
.pm-page .hr {
animation: pm-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pm-page .hr2 {
animation-delay: 0.12s;
}
.pm-page .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pm-page .reveal.in {
opacity: 1;
transform: none;
}
/* ============================================================================
* Section « Bannière »
* ========================================================================= */
.pm-page .md-hero {
position: relative;
overflow: hidden;
background: #fff;
color: #1d1a55;
}
.pm-page .md-hero .hero-media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 21 / 8;
background: #12305a;
overflow: hidden;
}
.pm-page .md-hero .hero-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pm-page .md-hero .hero-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(29, 26, 85, 0.78) 100%);
}
.pm-page .md-hero .hero-tag {
position: absolute;
left: 48px;
bottom: 34px;
z-index: 2;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.08em;
color: #fff;
background: #e9511c;
border-radius: 5px;
padding: 8px 16px;
}
/* Sans photo, la pastille perd son support : elle repasse dans le flux, au-dessus du titre,
plutôt que de disparaître avec la bande image. */
.pm-page .md-hero .hero-tag--inline {
position: static;
display: inline-block;
margin-bottom: 22px;
}
.pm-page .md-hero .wrap {
position: relative;
z-index: 1;
padding-top: 72px;
padding-bottom: var(--pm-space);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: end;
}
/* Sans chapeau ni bouton, le titre occupe toute la largeur. */
.pm-page .md-hero .md-hero-wrap--solo {
grid-template-columns: 1fr;
}
.pm-page .md-hero h1,
.pm-page .md-hero h2 {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(48px, 7vw, 110px);
line-height: 1.18;
letter-spacing: -0.02em;
color: #1d1a55;
margin: 0;
padding-bottom: 12px;
}
.pm-page .md-hero h1 .hl,
.pm-page .md-hero h2 .hl {
color: #055da8;
background: none;
}
.pm-page .md-lead {
font-size: 17px;
line-height: 1.85;
color: #5b6172;
max-width: 620px;
margin-bottom: 28px;
}
.pm-page .md-lead:last-child {
margin-bottom: 0;
}
.pm-page .md-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-start;
}
/* ============================================================================
* Section « Contenu riche »
* ========================================================================= */
.pm-page .md-wys {
padding: 0 0 var(--pm-space);
}
.pm-page .wys-grid {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 56px;
align-items: start;
}
.pm-page .wys-grid--solo {
grid-template-columns: 1fr;
}
.pm-page .wys-aside {
position: sticky;
top: 110px;
}
.pm-page .wys-aside .sec-title {
line-height: 1.18;
}
.pm-page .wys-body {
max-width: 820px;
}
.pm-page .wys-body h2 {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(22px, 2.3vw, 30px);
line-height: 1.18;
color: #1d1a55;
margin: 40px 0 18px;
}
.pm-page .wys-body h2:first-child,
.pm-page .wys-body h3:first-child,
.pm-page .wys-body p:first-child {
margin-top: 0;
}
.pm-page .wys-body h3 {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 19px;
line-height: 1.15;
color: #055da8;
margin: 32px 0 14px;
}
.pm-page .wys-body p {
font-size: 16px;
line-height: 1.9;
color: #5b6172;
margin-bottom: 20px;
}
.pm-page .wys-body p strong {
color: #1d1a55;
}
/* « display: inline » n'est pas cosmétique : sans lui, le « a { display: block } » de style.css
casse la phrase en trois autour de chaque lien. */
.pm-page .wys-body a {
display: inline;
color: #055da8;
font-weight: 600;
border-bottom: 1px solid #bddfec;
transition: color 0.2s, border-color 0.2s;
}
.pm-page .wys-body a:hover {
color: #e9511c;
border-color: #e9511c;
}
/* Bouton posé dans le texte depuis le menu « Formats » de l'éditeur (« Bouton — lien » ou
« Bouton — document PDF », habillés dans style.css). Les deux règles ci-dessus sont plus
précises que la classe seule : sans ce rappel, le bouton reprendrait la couleur bleue du
lien de phrase et son filet bleu clair remplacerait le bas de son cadre. */
.pm-page .wys-body a.mdm-button,
.pm-page .wys-body a.mdm-pdf-button {
display: inline-flex;
border: 1px solid #e9511c;
color: #fff;
}
.pm-page .wys-body a.mdm-button:hover {
border-color: #d1440f;
color: #fff;
}
.pm-page .wys-body a.mdm-pdf-button:hover {
border-color: #e9511c;
color: #e9511c;
}
/* Listes : style.css applique au site entier « ul, ol { list-style: none; padding-inline-start:
0 } » — reset pensé pour les listes de mise en page (menus, grilles de cartes). Sans les règles
ci-dessous, une liste écrite au back-office s'affiche sans puce ni retrait. Puce = tiret
orange, numéro = compteur Anton bleu, comme sur les autres pages de contenu du site. */
.pm-page .wys-body ul,
.pm-page .wys-body ol {
margin: 0 0 24px;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 14px;
list-style: none;
}
.pm-page .wys-body ol {
counter-reset: pm-li;
}
.pm-page .wys-body li {
position: relative;
padding-left: 26px;
font-size: 16px;
line-height: 1.8;
color: #5b6172;
list-style: none;
}
.pm-page .wys-body ul > li::before {
content: '';
position: absolute;
left: 0;
top: 13px;
width: 11px;
height: 3px;
border-radius: 2px;
background: #e9511c;
}
.pm-page .wys-body ol > li {
padding-left: 34px;
counter-increment: pm-li;
}
.pm-page .wys-body ol > li::before {
content: counter(pm-li);
position: absolute;
left: 0;
top: 0;
font-family: 'Anton', sans-serif;
font-size: 17px;
line-height: 1.7;
color: #055da8;
}
.pm-page .wys-body li strong {
color: #1d1a55;
}
/* Citation : le bouton « citation » de la barre d'outils produit un