/* Accueil — maquette 01 (cotes de la maquette × 1,47).
   Cette feuille est imprimée après base.css et components/*.css ; les surcharges de composants partagés sont préfixées par .tpl-home.
   Attention : une surcharge de taille l'emporte aussi sur les media queries partagées, d'où les blocs (min-width) ci-dessous. */

.tpl-home { background: #fafaf8; }
.tpl-home .site-main { padding-top: 15px; }
/* En-têtes de section : lien aligné sur la ligne de base du titre, en-tête plus serré que le composant. */
.tpl-home .section-header { align-items: baseline; margin-bottom: 10px; }
/* Espacements inégaux de la maquette entre blocs (rubriques › régions › dossiers › TV › newsletter). */
.home-block { margin-bottom: 26px; }
@media (min-width: 901px) {
	.home-block.home-regions { margin-bottom: 22px; }
	.home-block.home-duo { margin-bottom: 12px; }
}

/* ---------- Une : diaporama + 4 cartes latérales ---------- */
.home-une { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 10px; }
.home-une--solo { grid-template-columns: minmax(0, 1fr); }
.home-une__slider { position: relative; min-width: 0; }
.home-une__track { display: grid; height: 100%; }
.home-une__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
/* Sans JS (ou une seule diapositive) : la première reste visible. */
.home-une__slide.is-active, .home-une__slide:first-child:not([aria-hidden]) { opacity: 1; visibility: visible; }
.home-une__slide .card-hero { height: 100%; }
.tpl-home .home-une .card-hero__label { top: 16px; left: 15px; gap: 8px; padding: 6px 15px 6px 11px; font-size: 14.5px; font-weight: 700; }
/* Éclair plein du sprite, affiné et grandi comme celui de la maquette (« À la une », « Fil info »). */
.tpl-home .home-une .card-hero__label .icon, .tpl-home .ticker__label .icon { font-size: 1.25em; transform: scaleX(.68); }
.tpl-home .home-une .card-hero__body { max-width: 720px; padding: 0 28px 18px; }
.tpl-home .home-une .card-hero__meta { margin-bottom: 15px; font-size: 13.5px; }
.tpl-home .home-une .card-hero__title { line-height: 1.03; font-weight: 700; }
.tpl-home .home-une .card-hero__excerpt { margin: 14px 0 12px; line-height: 1.38; }
.tpl-home .home-une .card-hero__cta { background: var(--red-dark); }
.tpl-home .home-une .card-hero__cta:hover { background: #9e040d; }
.home-une__dots { position: absolute; left: 50%; bottom: 8px; z-index: 2; display: flex; transform: translateX(-50%); }
.home-une__dots button { box-sizing: content-box; width: 22px; height: 5px; padding: 10px 5.5px; border-radius: 3px; background: rgb(255 255 255 / .5); background-clip: content-box; }
.home-une__dots button:hover, .home-une__dots button[aria-current="true"] + button { background-color: var(--white); }
.home-une__dots button[aria-current="true"] { background-color: var(--red); }

.home-une__side { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.tpl-home .home-une__side .card-side { min-height: 0; grid-template-columns: 52% 1fr; }
.tpl-home .home-une__side .card-side__media { border-radius: var(--radius); }
.tpl-home .home-une__side .card-side__body { gap: 4px; padding: 12px 26px 12px 21px; }
.tpl-home .home-une__side .card-side__meta .badge { font-size: 13px; }
.tpl-home .home-une__side .card-side__title { font-size: 17.5px; line-height: 1.18; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-home .home-une__side .card-side__chevron { right: 9px; }

/* ---------- Fil info : étiquette arrondie, bande blanche, flèches séparées ---------- */
.home-ticker { margin-block: 18px 16px; }
.tpl-home .ticker { min-height: 38px; border: 0; background: none; overflow: visible; }
.tpl-home .ticker__label { border-radius: var(--radius); background: linear-gradient(90deg, var(--red), var(--red-dark)); font-weight: 700; }
.tpl-home .ticker__track { background: var(--white); border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
/* Fondu blanc du texte avant les flèches (maquette) : collé au bord visible de la piste qui défile. */
.tpl-home .ticker__track::after { content: ""; position: sticky; right: 0; flex: none; align-self: stretch; width: 22px; margin-left: -22px; background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--white)); pointer-events: none; }
.tpl-home .ticker__item { gap: 18px; font-size: 14.5px; font-weight: 500; }
.tpl-home .ticker__item + .ticker__item::before { margin: 0 14px 0 28px; }
.tpl-home .ticker__item time { font-weight: 500; }
.tpl-home .ticker__item strong { font-weight: 700; }
.tpl-home .ticker__nav { gap: 2px; margin-left: 12px; }
.tpl-home .ticker__nav button { width: 37px; border: 0; border-radius: 4px; background: #ececec; color: var(--ink); }
.tpl-home .ticker__nav button:hover { background: var(--ink); color: var(--white); }
@media (min-width: 601px) { .tpl-home .ticker__label { gap: 9px; padding: 0 18px 0 14px; font-size: 15px; } }

/* ---------- Portails ---------- */
.home-portals { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 30px; }
.home-portal { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 171px; padding: 16px 20px 12px 26px; overflow: hidden; border-radius: var(--radius); background: #0c1016; color: var(--white); }
.home-portal > img, .home-portal > .img-fallback { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.home-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 9 14 / .86) 0%, rgb(6 9 14 / .55) 60%, rgb(6 9 14 / .35) 100%), linear-gradient(0deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 70%); }
.home-portal:hover > img { transform: scale(1.05); }
.home-portal > .home-portal__default { object-position: left center; transform-origin: left center; } /* visuel du thème : la carte de la Guinée reste visible */
.home-portal:has(> .home-portal__default)::before { background: linear-gradient(90deg, rgb(6 9 14 / .5) 0%, rgb(6 9 14 / .15) 60%, rgb(6 9 14 / 0) 100%), linear-gradient(0deg, rgb(0 0 0 / .65), rgb(0 0 0 / 0) 70%); }
.home-portal:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.home-portal__title { color: var(--white); font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; }
.home-portal__title a:hover { color: var(--white); }
.home-portal__title a:focus-visible { outline: 0; }
.home-portal__play { width: .86em; height: .86em; margin-right: .04em; vertical-align: -.07em; color: var(--yellow); }
.home-portal__sub { max-width: 8.8em; margin: 1px 0 0; font-size: 18.5px; line-height: 1.12; color: rgb(255 255 255 / .92); }
.home-portal__go { position: absolute; right: 20px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f9e1bd; color: var(--ink); font-size: 22px; transition: background-color .2s; }
.home-portal:hover .home-portal__go { background: var(--white); }

/* ---------- Colonnes Politique / Économie / Société ---------- */
.home-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; }
.home-col { position: relative; min-width: 0; }
.home-col + .home-col::before, .home-duo > * + *::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; width: 1px; background: #ececea; }
.tpl-home .home-col .list-stack > * { padding-block: 5px 8px; }
.tpl-home .home-col .list-stack > :first-child { padding-top: 0; padding-bottom: 3px; }
.tpl-home .home-col .list-stack > :last-child { padding-bottom: 0; }
.tpl-home .home-col .card-medium { gap: 5px; }
.tpl-home .home-col .card-medium__body { gap: 4px; }
.tpl-home .home-col .card-medium__title { font-size: 20px; line-height: 1.1; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-home .home-col .card-medium__excerpt { font-size: 15.5px; line-height: 1.23; }
.tpl-home .home-col .meta { font-size: 14.5px; }
.tpl-home .home-col .card-medium .meta { padding-top: 4px; }
.tpl-home .home-col .card-list { grid-template-columns: 125px 1fr; gap: 15px; align-items: center; }
.tpl-home .home-col .card-list__media { aspect-ratio: 1.8; }
.tpl-home .home-col .card-list__title { font-size: 16px; line-height: 1.22; -webkit-line-clamp: 2; }

/* ---------- Régions (carrousel horizontal) ---------- */
.home-regions__viewport { position: relative; }
.home-regions__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-regions__track::-webkit-scrollbar { display: none; }
.home-regions__track > li { flex: 1 0 150px; scroll-snap-align: start; }
.tpl-home .home-regions .card-overlay { aspect-ratio: 1.35; }
.tpl-home .home-regions .card-overlay__body { gap: 0; padding: 10px 15px 7px; }
.tpl-home .home-regions .card-overlay__title { font-size: 18.5px; line-height: 1.15; font-weight: 700; }
.tpl-home .home-regions .card-overlay__sub { font-size: 14px; line-height: 1.3; font-weight: 500; }
.home-regions__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 2px 10px rgb(0 0 0 / .25); font-size: 22px; }
.home-regions__nav:hover { background: var(--red); color: var(--white); }
.home-regions__nav[hidden], .home-regions__more { display: none; }
/* Tout est visible (ou fin de piste) : la flèche de la maquette mène à toutes les régions. */
.js-next[hidden] + .home-regions__more { display: grid; }
.home-regions__nav--prev { left: -10px; }
.home-regions__nav--next { right: -10px; }

/* ---------- Dossiers spéciaux + Tribunes & Opinions ---------- */
.home-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.home-duo > * { position: relative; min-width: 0; }
.home-duo > :only-child { grid-column: 1 / -1; }
.home-dossiers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tpl-home .home-dossiers .card-overlay__body { gap: 4px; padding: 14px 16px 11px; }
.tpl-home .home-dossiers .card-overlay__title { font-size: 18px; line-height: 1.1; font-weight: 700; }
.tpl-home .home-dossiers .badge--pill { padding: 6px 13px; border-radius: 999px; font-size: 11px; }
.tpl-home .home-tribunes .section-header { flex-wrap: wrap; row-gap: 4px; }
@media (min-width: 601px) {
	.tpl-home .home-tribunes .section-header__title { font-size: 20px; white-space: nowrap; }
	.tpl-home .home-tribunes .section-header__link { font-size: 13px; }
}
.home-tribunes__list { display: grid; gap: 8px; }
.tpl-home .home-tribunes .card-tribune { gap: 14px; }
.tpl-home .home-tribunes .card-tribune__body { gap: 0; }
.tpl-home .home-tribunes .card-tribune__title { font-size: 16px; line-height: 1.1; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-home .home-tribunes .byline { font-size: 14px; }
.tpl-home .home-tribunes .byline a, .tpl-home .home-tribunes .byline span { font-weight: 500; }
.tpl-home .home-tribunes .meta { padding-top: 1px; font-size: 13.5px; }

/* ---------- Le Cri TV ---------- */
.home-tv__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 16px; }
.tpl-home .home-tv .card-video { gap: 6px; }
.tpl-home .home-tv .card-video--small .ratio { aspect-ratio: 2.05; }
.tpl-home .home-tv .card-video--small .card-video__title { font-size: 12.5px; line-height: 1.12; }
.tpl-home .home-tv .play { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgb(0 0 0 / .6); color: var(--white); box-shadow: none; }
.tpl-home .home-tv .play .icon { font-size: 21px; }
.tpl-home .home-tv .card-video--large .play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.tpl-home .home-tv .card-video--large .play .icon { font-size: 28px; }
.tpl-home .home-tv .duration { right: 7px; bottom: 4px; padding: 1px 5px; border-radius: 3px; line-height: 1.4; background: rgb(30 30 30 / .8); }
.tpl-home .home-tv .card-video--large .duration { right: 8px; bottom: 5px; }
.tpl-home .home-tv .card-video__overlay-title { left: 16px; right: 40%; bottom: 11px; font-size: 15.5px; line-height: 1.18; font-weight: 700; }
.tpl-home .home-tv .card-video--large:only-child .card-video__media { height: auto; aspect-ratio: 16 / 9; }

/* ---------- Newsletter et pied de page ---------- */
/* Bandeau plus bas que le composant (69 px) et formulaire plus large ; pied de page à 14 px (maquette). */
@media (min-width: 1025px) {
	.tpl-home .nl-banner__inner { grid-template-columns: auto 1fr minmax(320px, 600px); gap: 20px; padding: 6.5px 28px 6.5px 26px; }
}
/* Formulaire : champ arrondi recouvert par le bouton arrondi (maquette) ; corps 13 px seulement au-delà du mobile (iOS zoome sous 16 px). */
@media (min-width: 601px) {
	.tpl-home .nl-banner .nl-form input { padding-left: 20px; font-size: 13px; }
	.tpl-home .nl-banner .nl-form .btn { position: relative; min-width: 160px; margin-left: -6px; border-radius: var(--radius); }
}
.tpl-home .nl-banner__inner { background: #fbeced; }
/* Rond rouge cerclé de blanc */
.tpl-home .nl-banner__icon { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--white); font-size: 31px; }
.tpl-home .nl-banner__title { color: var(--red-dark); font-size: 17px; }
.tpl-home .nl-banner p { font-size: 12px; font-weight: 500; }
.tpl-home .nl-banner .nl-form input, .tpl-home .nl-banner .nl-form .btn { min-height: 44px; }
.tpl-home .nl-banner .nl-form .btn { gap: 14px; background: #b20212; }
.tpl-home .nl-banner .nl-form .btn .icon { font-size: 1.3em; }
.tpl-home .nl-banner .nl-form .btn:hover { background: #8f010e; }
.tpl-home .site-main:has(> .nl-banner:last-child) ~ .site-footer { margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.home-une { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.home-portal__title { font-size: 19px; }
	.home-portal__sub { font-size: 16px; }
	.home-portal { padding-left: 20px; }
}
@media (max-width: 1024px) {
	.home-une { grid-template-columns: minmax(0, 1fr); }
	.home-une__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.tpl-home .home-une__side .card-side { min-height: 116px; grid-template-columns: 40% 1fr; }
	.home-portals { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-portal__sub { max-width: none; }
	.home-tv__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-tv__grid > :first-child { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 900px) {
	.home-cols, .home-duo { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.home-col + .home-col::before, .home-duo > * + *::before { display: none; }
}
@media (max-width: 600px) {
	.home-une__side { grid-template-columns: minmax(0, 1fr); }
	.tpl-home .home-une .card-hero__body { padding: 58px 18px 40px; } /* haut : place de la pastille quand le texte remplit la carte */
	/* Le mobile reprend la une du web : chapô (3 lignes au plus) et bouton « Lire l'article », que la carte partagée masque. */
	.tpl-home .home-une .card-hero__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 0 14px; font-size: 15px; }
	.tpl-home .home-une .card-hero__cta { display: inline-flex; min-height: 38px; font-size: 14px; }
	/* En-têtes de section sur une ligne, même les plus longs (« Dossiers spéciaux », « Tribunes & Opinions »). */
	.tpl-home .section-header { gap: 10px; }
	.tpl-home .section-header__title { font-size: 16px; }
	.tpl-home .section-header__link { font-size: 12.5px; }
	.home-une__dots { bottom: 6px; }
	.tpl-home .home-une__side .card-side__title { font-size: 15.5px; }
	/* Rubrique et date sur une ligne : corps 12 px, marge réduite ; la date passe entière à la ligne au besoin. */
	.tpl-home .home-une__side .card-side__body { padding: 10px 26px 10px 14px; }
	.tpl-home .home-une__side .card-side__meta { flex-wrap: wrap; row-gap: 0; font-size: 12px; }
	.tpl-home .home-une__side .card-side__meta .badge { font-size: 12px; }
	.tpl-home .home-une__side .card-side__meta > * { white-space: nowrap; }
	.home-portals { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.home-portal { min-height: 118px; }
	.home-dossiers__grid { grid-template-columns: minmax(0, 1fr); }
	.tpl-home .home-dossiers .card-overlay { aspect-ratio: 2; }
	.home-tv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.home-tv__grid > :first-child { grid-column: 1 / -1; grid-row: auto; }
	.tpl-home .home-tv .card-video--large .card-video__media { height: auto; aspect-ratio: 16 / 9; }
	.home-regions__track > li { flex-basis: 140px; }
	.tpl-home .home-regions .card-overlay__title { font-size: 17px; }
	.home-regions__nav--prev { left: -6px; }
	.home-regions__nav--next { right: -6px; }
	.tpl-home .nl-banner__icon { width: 44px; height: 44px; font-size: 24px; }
}