/*
* Page « Détail article » — styles.
*
* Extrait de la maquette (maquettes/Detail_article.html), chargé UNIQUEMENT sur
* le gabarit template-detail-article.php (voir inc/enqueue.php). Le reset
* box-sizing + typographie est scopé à « .article-page » pour ne pas altérer
* l'en-tête / le pied de page globaux. La police « Anton » est fournie
* globalement par style.css (@font-face) → non redéclarée ici.
*
* @package medecins-du-monde
*/
.article-page,
.article-page *,
.article-page *::before,
.article-page *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.article-page {
margin: 0;
font-family: 'Open Sans', sans-serif;
color: #1d1a55;
background: #fff;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.article-page p {
margin: 0;
}
.article-page a {
text-decoration: none;
color: inherit;
}
.article-page ul {
margin: 0;
padding: 0;
list-style: none;
}
.article-page button,
.article-page input {
font-family: inherit;
}
.wrap {
max-width: 1700px;
margin: 0 auto;
padding: 0 15px 0 26px;
}
/* ===== ARTICLE HEADER ===== */
.art-head {
background: #055da8;
color: #fff;
padding: 64px 0 52px;
position: relative;
overflow: hidden;
}
.art-head-deco {
position: absolute;
top: -120px;
right: -70px;
width: 360px;
height: 360px;
border-radius: 64px;
background: rgba(189, 223, 236, 0.14);
transform: rotate(16deg);
z-index: 0;
pointer-events: none;
}
.art-head .wrap {
position: relative;
z-index: 1;
}
.art-head .art-breadcrumb {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 26px;
padding: 0;
}
.art-head .back-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
color: #1d1a55;
background: #bddfec;
padding: 10px 18px;
border-radius: 50px;
border: 1px solid #bddfec;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.art-head .back-btn:hover {
background: #fff;
color: #1d1a55;
}
.back-arrow {
width: 16px;
transform: rotate(90deg);
transition: transform 0.3s ease;
filter: brightness(0) saturate(100%) invert(11%) sepia(38%)
saturate(2712%) hue-rotate(232deg) brightness(94%) contrast(96%);
}
.back-btn:hover .back-arrow {
transform: rotate(90deg) translateX(-3px);
}
.art-meta-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cat-tag {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.04em;
padding: 6px 14px;
border-radius: 5px;
}
.cat-nat {
background: #e9511c;
color: #fff;
}
.cat-int {
background: #00af9c;
color: #fff;
}
.cat-camp {
background: #bddfec;
color: #1d1a55;
}
.cat-evt {
background: #1d1a55;
color: #fff;
}
.art-date {
font-size: 14px;
color: #bddfec;
letter-spacing: 0.02em;
}
.art-reading {
font-size: 14px;
color: #bddfec;
padding-left: 14px;
border-left: 1px solid rgba(189, 223, 236, 0.4);
}
.art-head h1 {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.08;
letter-spacing: -0.01em;
max-width: none;
margin-bottom: 24px;
}
.art-chapeau {
font-size: 19px;
line-height: 1.6;
color: #e7ecf5;
max-width: none;
}
.article-page .art-cta-press {
display: inline-flex;
align-items: center;
gap: 11px;
margin-top: 28px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
color: #fff;
background: #e9511c;
padding: 13px 22px;
border-radius: 50px;
border: 1px solid #e9511c;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.article-page .art-cta-press:hover {
background: #d1440f;
border-color: #d1440f;
color: #fff;
transform: translateY(-2px);
}
.art-cta-press svg {
flex-shrink: 0;
}
.art-byline {
display: flex;
align-items: center;
gap: 14px;
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.byline-avatar {
width: 46px;
height: 46px;
border-radius: 100%;
background: #e9511c;
display: grid;
place-items: center;
font-family: 'Anton', sans-serif;
font-size: 15px;
color: #fff;
flex-shrink: 0;
overflow: hidden;
}
.byline-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 100%;
}
.byline-name {
font-size: 15px;
font-weight: 700;
color: #fff;
}
.byline-role {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.05em;
color: #bddfec;
margin-top: 3px;
}
/* ===== BODY LAYOUT ===== */
.art-body {
padding: 56px 0 72px;
}
.art-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 48px;
align-items: start;
}
.art-cover .photo-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 21/9;
border-radius: 10px;
overflow: hidden;
background: #1d1a55;
}
.art-cover .cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 32%;
opacity: 1;
}
.prose-figure .photo-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16/9;
border-radius: 10px;
overflow: hidden;
background: #055da8;
}
.prose-figure .cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
}
.photo-ph img {
width: 120px;
height: auto;
opacity: 0.9;
}
.prose-figure {
margin: 40px 0;
}
.prose-figure img {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: center;
border-radius: 10px;
overflow: hidden;
background: #eef3f8;
}
.prose-figure figcaption {
font-size: 13px;
color: #8a8fa6;
letter-spacing: 0.02em;
margin-top: 12px;
}
.cover-caption {
font-size: 12px;
color: #8a8fa6;
letter-spacing: 0.02em;
margin: 14px 0 44px;
padding-bottom: 18px;
border-bottom: 1px solid #e5e9f2;
}
/* Prose */
.prose {
max-width: none;
}
.art-cover + .prose,
.cover-caption + .prose {
margin-top: 44px;
}
.prose > *:first-child {
margin-top: 0;
}
.prose p {
font-size: 17px;
line-height: 1.85;
color: #3a3a52;
margin-bottom: 24px;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
line-height: 1.18;
color: #055da8;
margin: 44px 0 20px;
scroll-margin-top: 120px;
}
.prose h1 {
font-size: clamp(30px, 3.4vw, 40px);
color: #1d1a55;
}
.prose h2 {
font-size: clamp(27px, 2.9vw, 34px);
}
.prose h3 {
font-size: clamp(25px, 2.4vw, 28px);
margin-top: 36px;
}
.prose h4 {
font-size: clamp(23.5px, 2.1vw, 25px);
margin-top: 32px;
}
.prose h5 {
font-size: clamp(22px, 1.9vw, 23px);
margin-top: 28px;
}
.prose h6 {
font-size: clamp(21px, 1.8vw, 22px);
margin-top: 26px;
}
.prose blockquote {
margin: 34px 0;
padding: 4px 0 4px 24px;
border-left: 4px solid #e9511c;
}
.prose blockquote p {
font-size: 20px;
font-style: italic;
color: #1d1a55;
line-height: 1.5;
margin: 0;
}
.prose blockquote cite {
display: block;
margin-top: 14px;
font-family: 'Anton', sans-serif;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.05em;
color: #055da8;
}
/* Listes et liens saisis dans le champ WYSIWYG « Contenu » (et dans l'encadré « À savoir »).
style.css applique au site entier « ul, ol { list-style: none; padding-inline-start: 0 } »
et « a { color: inherit; text-decoration: none; display: block } » — resets pensés pour les
listes de mise en page et les liens-blocs (cartes, boutons). Sans les règles ci-dessous,
une liste écrite au back-office s'affiche sans puce ni retrait, et un lien au fil du texte
est invisible ET passe à la ligne (display: block). Puce = tiret orange, comme sur les
autres pages de contenu du site (offre d'emploi, action, politique de confidentialité). */
.prose ul,
.prose ol,
.highlight-box ul,
.highlight-box ol {
margin: 0 0 24px;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.prose li,
.highlight-box li {
display: flex;
align-items: center;
gap: 16px;
font-size: 17px;
line-height: 1.85;
color: #3a3a52;
list-style: none;
}
.prose li::before,
.highlight-box li::before {
content: '';
flex: 0 0 auto;
width: 14px;
height: 2px;
background: #e9511c;
}
.prose li strong,
.highlight-box li 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. */
.prose a,
.highlight-box a {
display: inline;
color: #055da8;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease;
}
.prose a:hover,
.highlight-box a:hover {
color: #e9511c;
}
/* Lien seul dans son paragraphe (« En savoir plus », « Lire le rapport »…) : c'est un
appel à l'action, pas un lien de phrase. Même bouton que le CTA communiqué, en bleu —
la classe est posée au rendu par mdm_actu_prose() (inc/acf-actualite.php). */
.prose p.prose-cta {
margin-bottom: 24px;
}
.prose p.prose-cta > a {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1.4; /* Celle du corps : sans elle, le 1.85 de « .prose p » gonfle la pastille. */
color: #fff;
background: #055da8;
padding: 13px 22px;
border-radius: 50px;
border: 1px solid #055da8;
text-decoration: none;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.prose p.prose-cta > a:hover {
background: #1d1a55;
border-color: #1d1a55;
color: #fff;
transform: translateY(-2px);
}
.highlight-box {
margin: 24px 0;
}
.highlight-box .hb-label {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.06em;
color: #e9511c;
margin-bottom: 8px;
}
.highlight-box p {
font-size: 17px;
line-height: 1.85;
color: #3a3a52;
margin: 0;
}
/* Médias insérés dans l'encadré (images / vidéos / embeds) : responsives. */
.highlight-box img,
.highlight-box video {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 12px 0;
}
.highlight-box iframe {
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: 8px;
margin: 12px 0;
}
.highlight-box p:not(:last-child) {
margin-bottom: 14px;
}
/* Signatory logos — galerie simple */
.prose-logos {
margin: 44px 0 0;
}
/* Titre « Avec le soutien de » : même thème que les titres .prose h2. */
.prose-logos .hb-label {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.1;
letter-spacing: normal;
color: #055da8;
margin-bottom: 22px;
}
.prose-logos-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 36px 44px;
}
.prose-logo-item {
display: inline-flex;
align-items: center;
color: #1d1a55;
}
.prose-logo-item svg {
width: 120px;
height: 46px;
}
.prose-logo-item:hover {
color: #055da8;
}
.prose-logo-item svg {
width: 120px;
height: 46px;
}
/* Keywords */
.art-kw-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 48px;
padding-top: 30px;
border-top: 1px solid #e5e9f2;
}
.art-kw-label {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.05em;
color: #8a8fa6;
margin-right: 4px;
}
.art-kw {
font-size: 14px;
padding: 7px 14px;
border: 1px solid #cfd8e8;
border-radius: 50px;
color: #055da8;
cursor: pointer;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.art-kw:hover {
background: #055da8;
color: #fff;
border-color: #055da8;
}
/* Sidebar */
.art-sidebar {
position: sticky;
top: 150px;
display: flex;
flex-direction: column;
gap: 36px;
}
.sb-section {
padding-bottom: 32px;
border-bottom: 1px solid #e5e9f2;
}
.sb-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sb-label {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 0.05em;
color: #055da8;
margin-bottom: 18px;
}
.sb-related {
display: flex;
flex-direction: column;
gap: 12px;
}
.sb-related a {
display: block;
padding: 18px 20px;
background: #f3f6fb;
border: 1px solid #e5e9f2;
border-radius: 10px;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.sb-related a:hover {
background: #eef4fb;
border-color: #cfe0ef;
transform: translateY(-2px);
}
.sb-rel-meta {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
color: #8a8fa6;
margin-bottom: 8px;
}
.sb-rel-title {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: #1d1a55;
}
.sb-rel-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
color: #055da8;
}
.sb-rel-cta img {
width: 14px;
transition: transform 0.3s ease;
}
.sb-related a:hover .sb-rel-cta {
color: #e9511c;
}
.sb-related a:hover .sb-rel-cta img {
transform: translateX(4px);
}
.share-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.share-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1.5px solid #cfd8e8;
border-radius: 8px;
background: #fff;
color: #1d1a55;
cursor: pointer;
font-size: 14px;
font-weight: 600;
text-align: left;
width: 100%;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.share-item:hover {
background: #1d1a55;
color: #fff;
border-color: #1d1a55;
}
.share-item .si-icon {
font-family: 'Anton', sans-serif;
font-size: 18px;
width: 26px;
flex-shrink: 0;
text-align: center;
}
.si-circle {
width: 38px;
height: 38px;
border-radius: 100%;
background: #e9511c;
display: grid;
place-items: center;
flex-shrink: 0;
}
.si-circle svg {
display: block;
}
/* Toast */
.toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%) translateY(90px);
background: #1d1a55;
color: #fff;
padding: 13px 26px;
border-radius: 50px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.05em;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 999;
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
/* Reveal */
.reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.in {
opacity: 1;
transform: none;
transition: none;
}
}
/* Responsive */
@media (max-width: 1000px) {
.art-grid {
grid-template-columns: minmax(0, 1fr) 260px;
gap: 40px;
}
.art-sidebar {
top: 110px;
}
}
@media (max-width: 860px) {
.art-grid {
grid-template-columns: 1fr;
gap: 0;
}
.art-sidebar {
position: static;
margin-top: 52px;
padding-top: 40px;
border-top: 1px solid #e5e9f2;
}
.prose {
max-width: none;
}
}
@media (max-width: 760px) {
.art-head {
padding: 48px 0 40px;
}
.art-body {
padding: 40px 0 56px;
}
.art-head-deco {
width: 240px;
height: 240px;
top: -90px;
right: -60px;
}
.art-meta-top {
gap: 10px;
margin-bottom: 18px;
}
.art-chapeau {
font-size: 17px;
}
.art-byline {
margin-top: 26px;
padding-top: 20px;
}
.art-cover .photo-ph {
aspect-ratio: 4/3;
}
.cover-caption {
margin: 12px 0 32px;
}
.prose p,
.highlight-box p {
font-size: 16px;
line-height: 1.75;
}
.prose blockquote p {
font-size: 18px;
}
.prose-logos-grid {
gap: 26px 32px;
}
}
@media (max-width: 560px) {
.wrap {
padding: 0 15px 0 18px;
}
.art-head {
padding: 38px 0 34px;
}
.art-reading {
padding-left: 0;
border-left: none;
}
.art-meta-top {
gap: 8px;
}
.art-cover .photo-ph {
aspect-ratio: 3/4;
}
.art-cover .cover-img {
object-position: 50% 24%;
}
.prose-figure .photo-ph {
aspect-ratio: 4/3;
}
.share-item {
font-size: 13px;
}
}
/* Ajouts intégration : regroupement date + temps de lecture, et calibrage des
* logos partenaires (rendus en ![]()
et non en