, le
* balisage réel n'emploie que des (contenu valide à l'intérieur d'un ). Un
* « display » de bloc (block, flex ou inline-flex) est donc posé partout où la maquette
* comptait sur un élément de bloc ;
* • 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 ;
* • ne sont pas reprises de la feuille de la maquette : le @font-face d'Anton (global), le
* box-sizing global (scopé ici), « html { scroll-behavior } » et les barres de défilement
* masquées sur « html/body » (hors de la page — la page n'a pas d'ancre interne), la
* section de don vidée par la maquette (« .mg-don », « .don-card »), « .eyebrow » et
* « .hr3 » (jamais posés par le balisage), la hauteur en dur du chapeau
* (« .mg-lead { height: 150px } », style de l'outil de maquettage) et le filtre de la
* flèche des boutons (l'asset du thème est déjà blanc).
*
* Ajouts par rapport à la maquette (elle ne prévoyait pas ces cas, le gabarit les rend) :
* • « .cbt-act-card--urgent » : la maquette ne marquait une urgence que par la couleur de la
* pastille. La carte reçoit ici la marque d'urgence du thème — « border: 2px solid #bd1118 »,
* comme « .country-card.urgent » dans actions.css ;
* • les liens écrits dans le texte riche de « Notre position » sont soulignés en bleu clair :
* le reset « color: inherit » les rendrait invisibles sur le bandeau marine ;
* • une ligne de publication sans année ne réserve plus la colonne de 96 px qui lui était
* destinée, sinon le titre y glisserait ;
* • la mosaïque de la galerie (première colonne double, grande cellule sur deux rangées) ne
* s'applique qu'à partir de trois cartes : à une ou deux, elle laisserait un trou.
*
* @package medecins-du-monde
*/
/* ============================================================================
* Base
* ========================================================================= */
.cbt-page,
.cbt-page *,
.cbt-page *::before,
.cbt-page *::after {
box-sizing: border-box;
}
.cbt-page {
font-family: 'Open Sans', sans-serif;
color: #1d1a55;
background: #fff;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.cbt-page h1,
.cbt-page h2 {
margin: 0;
}
.cbt-page p {
margin: 0;
}
.cbt-page a {
text-decoration: none;
color: inherit;
}
/* Boutons pleins : leur libellé garde sa couleur au survol. Un « a:hover » global (le thème en
pose plusieurs, par section) repeindrait sinon le texte en orange sur fond orange. */
.cbt-page .btn-orange,
.cbt-page .btn-orange:hover {
color: #fff;
}
/* Gouttières calquées sur celles de la barre de navigation (voir « nav » dans style.css) :
26 px, 20 px sous 640 px. Les sections s'alignent ainsi sur le logo et le bouton « Faire un
don ». La maquette était en pleine largeur : aucune largeur maximale n'est ajoutée. */
.cbt-page .wrap {
padding: 0 26px;
}
/* --- Titres et éléments partagés --- */
.cbt-page .sec-title {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.18;
letter-spacing: -.01em;
color: #1d1a55;
}
/* Dans un titre de section, « .hl » est le surligneur bleu clair ; dans le titre du bandeau,
c'est une simple couleur de texte (voir « .cbt-hero h1 .hl » plus bas). Les deux viennent de
la maquette, et le balisage pose la même classe dans les deux cas (mdm_cbt_title_html()). */
.cbt-page .sec-title .hl {
background: linear-gradient(#bddfec, #bddfec) no-repeat;
background-size: 100% 1.36em;
background-position: 0 0.07em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.cbt-page .kick {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: .08em;
color: #e9511c;
}
.cbt-page .kick::before {
content: '';
width: 22px;
height: 2px;
background: #e9511c;
border-radius: 2px;
}
.cbt-page .see-all {
display: inline-block;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: .05em;
color: #055da8;
border-bottom: 2px solid #055da8;
padding-bottom: 3px;
white-space: nowrap;
transition: color .25s, border-color .25s;
}
.cbt-page .see-all:hover {
color: #e9511c;
border-color: #e9511c;
}
/* --- Boutons --- */
.cbt-page .btn-orange {
display: inline-flex;
align-items: center;
gap: 12px;
background: #e9511c;
border: 1px solid #e9511c;
border-radius: 5px;
padding: 14px 26px;
font-size: 16px;
font-weight: 600;
transition: background-color .3s;
}
.cbt-page .btn-orange:hover {
background: #d1440f;
}
/* La flèche du thème (assets/svgs/common-arrows/arrows-long-right.svg) est déjà blanche : le
« filter: brightness(0) invert(1) » de la maquette, qui blanchissait sa propre flèche noire,
n'a plus d'objet. */
.cbt-page .btn-orange img {
width: 14px;
transition: transform .3s;
}
.cbt-page .btn-orange:hover img {
transform: translateX(4px);
}
/* Le bouton fantôme n'existe que dans le bandeau, sur fond blanc : la maquette en donnait
d'abord la variante claire (pour fond sombre) avant de la surcharger pour ce bandeau. Une
seule règle suffit donc, sans déclaration morte. */
.cbt-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 .3s, color .3s, border-color .3s;
}
.cbt-page .btn-ghost-line:hover {
background: #1d1a55;
color: #fff;
border-color: #1d1a55;
}
/* ============================================================================
* Animations d'entrée (la classe « in » est posée par assets/js/combat.js)
* ========================================================================= */
@keyframes cbt-rise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: none;
}
}
.cbt-page .hr {
animation: cbt-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
.cbt-page .hr2 {
animation-delay: .12s;
}
.cbt-page .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.cbt-page .reveal.in {
opacity: 1;
transform: none;
}
/* ============================================================================
* 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, quelle qu'elle
* soit : le bandeau d'ordinaire, la section suivante si le bandeau est entièrement vidé au
* back-office.
*
* Ici la première section porte une photo pleine largeur, qui doit commencer JUSTE SOUS la
* barre de navigation : le retrait est donc posé sur la section, pas sur la photo. Il tient
* aussi quand le bandeau est rendu sans photo (le enfants. */
.cbt-page .cbt-pos-body p {
font-size: 16px;
line-height: 1.85;
color: #c4cde3;
margin-top: 16px;
}
.cbt-page .cbt-pos-body p strong {
color: #fff;
}
/* Un lien écrit dans l'éditeur : le reset « color: inherit » le rendrait indiscernable du
texte sur ce fond marine. */
/* « display: inline » n'est pas cosmétique : style.css pose « a { display: block } » pour tout
le site, et un lien écrit au fil du texte dans l'éditeur casserait la phrase en trois. */
.cbt-page .cbt-pos-body a {
display: inline;
color: #bddfec;
text-decoration: underline;
}
/* Listes du même champ : « ul, ol { list-style: none; padding-inline-start: 0 } » (style.css)
les aplatit en suite de lignes sans puce. Tiret orange, lisible sur le fond marine. */
.cbt-page .cbt-pos-body ul,
.cbt-page .cbt-pos-body ol {
margin: 16px 0 0;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 9px;
list-style: none;
}
.cbt-page .cbt-pos-body ol {
counter-reset: mdm-pos-ol;
}
.cbt-page .cbt-pos-body li {
position: relative;
padding-left: 26px;
font-size: 16px;
line-height: 1.85;
color: #c4cde3;
list-style: none;
}
.cbt-page .cbt-pos-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 12px;
height: 2px;
background: #e9511c;
}
.cbt-page .cbt-pos-body ol li {
counter-increment: mdm-pos-ol;
}
.cbt-page .cbt-pos-body ol li::before {
content: counter(mdm-pos-ol);
position: absolute;
left: 0;
top: 1px;
font-family: 'Anton', sans-serif;
font-size: 14px;
color: #bddfec;
}
.cbt-page .cbt-pos-body li strong {
color: #fff;
}
.cbt-page .cbt-stats {
display: grid;
grid-template-columns: repeat(var(--cbt-stats-cols, 2), 1fr);
gap: 14px;
}
.cbt-page .cbt-stat {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
padding: 26px 24px;
transition: transform .35s cubic-bezier(.22, .61, .36, 1), background-color .3s;
}
.cbt-page .cbt-stat:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, .14);
}
.cbt-page .cbt-stat-num {
font-family: 'Anton', sans-serif;
font-size: clamp(32px, 3.4vw, 46px);
line-height: 1;
color: #bddfec;
margin-bottom: 8px;
}
.cbt-page .cbt-stat-label {
font-size: 14px;
line-height: 1.5;
color: #c4cde3;
font-weight: 600;
}
.cbt-page .cbt-pos-cta {
margin-top: 16px;
}
/* ============================================================================
* Galerie de cartes de régions
*
* La galerie n'est pas dans un « .wrap » : elle porte elle-même les gouttières du thème. Les
* paddings sont déclarés côté par côté, jamais en raccourci, pour ne pas effacer le retrait
* d'en-tête si la galerie se retrouve première section (bandeau et position vidés).
* ========================================================================= */
.cbt-page .cbt-gal {
display: grid;
/* Une ou deux cartes : autant de colonnes que de cartes (variable posée par le gabarit). */
grid-template-columns: repeat(var(--cbt-gal-cols, 3), 1fr);
gap: 14px;
padding-right: 26px;
padding-bottom: 80px;
padding-left: 26px;
}
/* Trois cartes ou plus : la mosaïque de la maquette — première colonne double, grande cellule
sur deux rangées. « repeat() » n'accepte qu'un entier littéral, jamais un calcul : une
répartition INÉGALE ne peut pas se déduire de --cbt-gal-cols, elle est donc déclenchée par le
nombre réel de cellules, qui vaut exactement --cbt-gal-cols dès trois cartes. Si le
navigateur ignore « :has() », la grille reste en colonnes égales — jamais cassée. */
.cbt-page .cbt-gal:has(.cbt-gal-cell:nth-child(3)) {
grid-template-columns: 2fr 1fr 1fr;
}
.cbt-page .cbt-gal:has(.cbt-gal-cell:nth-child(3)) .cbt-gal-cell--big {
grid-row: span 2;
}
/* La cellule est un quand la carte a un lien, un