/* APIA — Single Article (S5c) — node Figma 785:25554. Contenu rail 1052 (l-rail), rythme 96 entre groupes.
   Reutilise apia-enjeu.css : l-rail, c-rcard, c-resgrid, c-renforcer, c-enjeu-btn. Couleurs = tokens apia-*.
   #1c1c1c = greys/900 (H1 + titre « Ressources recommandees ») : pas de token dedie -> valeur node en dur. */

.apia-article{padding-top:48px;padding-bottom:96px;padding-inline:16px}

/* Sections : 96 par defaut entre groupes ; overrides hero/media/back */
.apia-article .s-art{margin-top:96px}
.apia-article .s-art--media{margin-top:32px}
.apia-article .s-art--back{margin-top:48px}

/* 1. Fil d'ariane */
.c-art-crumb .l-rail{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.c-art-crumb a{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);text-decoration:none}
.c-art-crumb a:hover{color:var(--apia-bleu-apia,#0d58c9)}
.c-art-crumb__sep{display:inline-flex;color:var(--apia-gris-bleu)}
.c-art-crumb__sep svg{width:16px;height:16px;display:block}

/* 2-4. Hero */
.s-art--hero{margin-top:32px}
.c-art-h1{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:#1c1c1c;margin:0}
.c-art-sub{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-gris-bleu);margin:16px 0 0}
.c-art-date{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:32px 0 0}

/* 5. Image a la une 1052×381 r28 */
.c-art-media{display:block;width:100%;max-width:1052px;aspect-ratio:1052/381;object-fit:cover;border-radius:28px;margin:0 auto}

/* 6. Corps prose (the_content). Intertitres H3 28/38 Regular bleu-nuit ; texte 16/23 gris-bleu ; puces fleche. */
.c-art-body{max-width:1052px;margin-inline:auto}
.c-art-body>:first-child{margin-top:0}
.c-art-body p{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0 0 16px}
.c-art-body h2,.c-art-body h3{font-family:var(--apia-font);font-weight:400;font-size:28px;line-height:38px;color:var(--apia-bleu-nuit);margin:32px 0 16px}
.c-art-body h4{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:32px 0 12px}
.c-art-body a{color:var(--apia-bleu-apia,#0d58c9);text-decoration:underline}
.c-art-body img{max-width:100%;height:auto;border-radius:16px;margin:16px 0}
.c-art-body strong{font-weight:600;color:var(--apia-bleu-nuit)}
.c-art-body blockquote{border-left:3px solid var(--apia-bleu-ciel);padding-left:24px;margin:24px 0;font-style:italic}
/* Puces fleche (decision A) */
.c-art-body ul{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.c-art-body ul li{position:relative;padding-left:34px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu)}
.c-art-body ul li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;background-color:var(--apia-bleu-apia,#0d58c9);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M10.5 8l4 4-4 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M10.5 8l4 4-4 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.c-art-body ol{margin:8px 0 16px;padding-left:22px}
.c-art-body ol li{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin-bottom:12px}
/* Notes de bas (utilitaire, applicable en editeur) */
.c-art-body .c-art-note,.c-art-body .has-small-font-size{font-size:14px;line-height:18px}

/* 7. Carte auteur */
.c-art-byline{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:16px 0 0}
.c-art-author{background:var(--apia-bleu-clair);border-radius:28px;padding:32px;margin-top:16px;display:flex;gap:16px;align-items:flex-start}
.c-art-author__avatar{flex:0 0 78px;width:78px;height:78px;border-radius:999px;overflow:hidden;background:var(--apia-bleu-ciel-15)}
.c-art-author__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.c-art-author__col{display:flex;flex-direction:column;gap:8px}
.c-art-author__name{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-nuit);margin:0}
.c-art-author__role{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}
.c-art-author__li{display:inline-flex;width:16px;height:16px;color:var(--apia-gris-bleu)}
.c-art-author__li:hover{color:var(--apia-bleu-apia,#0d58c9)}
.c-art-author__li svg{width:16px;height:16px;display:block}

/* 8. Retour aux articles */
.c-art-back{display:inline-flex;align-items:center;gap:4px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);text-decoration:none}
.c-art-back:hover{color:var(--apia-bleu-apia,#0d58c9)}
.c-art-back svg{width:16px;height:16px;display:block}

/* 9. Ressources recommandees (titre 48/52 #1c1c1c + c-resgrid/c-rcard reutilises) */
.c-art-reco-title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:#1c1c1c;margin:0 0 48px}
.s-art--reco .c-resgrid{margin-top:0}

/* CTA — variante article : titre blanc + sous-titre bleu ciel (node) */
.c-renforcer--article .c-renforcer__title{color:var(--apia-blanc)}
.c-renforcer--article .c-renforcer__text{color:var(--apia-bleu-ciel)}

/* Responsive */
@media(max-width:991px){
	.c-art-h1,.c-art-reco-title{font-size:36px;line-height:42px}
	.c-art-sub{font-size:20px;line-height:26px}
	.c-art-body h2,.c-art-body h3{font-size:24px;line-height:32px}
	.c-art-media{aspect-ratio:16/9}
	.apia-article .s-art{margin-top:64px}
}
@media(max-width:600px){
	.c-art-h1,.c-art-reco-title{font-size:30px;line-height:36px}
	.c-art-author{flex-direction:column}
	.apia-article{padding-top:24px;padding-bottom:64px}
}

/* Bloc video temoignage (click-to-load RGPD) — meme rail 1052, 16/9 r28, a la place de l'image a la une */
.c-art-video{position:relative;max-width:1052px;margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:var(--apia-bleu-nuit,#051d2e)}
.c-art-video__ph{position:absolute;inset:0}
.c-art-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-art-video__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,29,46,.55),rgba(5,29,46,.15))}
.c-art-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:84px;height:84px;padding:0;border:0;border-radius:999px;background:var(--apia-bleu-apia,#0d58c9);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background .2s ease}
.c-art-video__play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--apia-bleu-marine,#001f5f)}
.c-art-video__play svg{width:34px;height:34px;margin-left:4px}
.c-art-video__note{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:12px 16px;font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:#fff;background:rgba(5,29,46,.55);text-align:center}
.c-art-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:600px){.c-art-video__play{width:64px;height:64px}.c-art-video__play svg{width:26px;height:26px}}

/* Retour 10/07 — featured migrees non calibrees (mediane r 1,39) : biais haut du cover par defaut ; r<1,3 (37/125, portraits/carres) = c-art-media--contain posee par apia_article_media() : image entiere, fond bleu clair, cadre 2:1 (16/9 <=991 pour suivre la regle mobile de base). */
.c-art-media{object-position:50% 30%}
.c-art-media--contain{aspect-ratio:2/1;object-fit:contain;background:var(--apia-bleu-clair,#ecf2fb)}
@media(max-width:991px){
	.c-art-media--contain{aspect-ratio:16/9}
}