/* Page Région (maquette 04), communes et hub « Le Cri Local ».
   Maquette à 895 px de large : cote × 1,564 = cote CSS.
   Imprimé après base.css et components/*.css : à spécificité égale, ces règles l'emportent. */

.tpl-region { background: #fcfcfc; }

/* Bandeau */
.region-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 435px; padding-block: 30px 64px; }
.region-hero__crumb { margin-bottom: auto; padding: 0 0 24px 5px; }
.region-hero__crumb ol { font-size: 14px; }
.region-hero__crumb, .region-hero__crumb ol, .region-hero__crumb [aria-current] { color: var(--white); text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
/* Sur la maquette, pastille, titre et textes sont en retrait du fil d'Ariane. */
.region-hero__inner > :not(.region-hero__crumb) { margin-left: 15px; }
.region-hero__label { margin-bottom: 6px; padding: 7px 21px; border-radius: 999px; font-size: 14px; letter-spacing: .03em; }
.region-hero__title { font: 800 82px/1 var(--serif); letter-spacing: -.01em; }
.region-hero__subtitle { margin: 9px 0 0; font: 600 29px/1.2 var(--serif); color: var(--white); }
.region-hero__text { max-width: 660px; margin: 7px 0 0; font-size: 19px; line-height: 1.35; color: rgb(255 255 255 / .94); }
.region-hero .page-hero__media::after { background: linear-gradient(90deg, rgb(10 12 16 / .8) 0%, rgb(10 12 16 / .5) 45%, rgb(10 12 16 / .1) 100%), linear-gradient(180deg, rgb(10 12 16 / .45), transparent 22%); }

/* Onglets : une seule ligne (la barre défile si les libellés débordent) */
.region-tabs { position: relative; z-index: 5; margin-top: -31px; }
.region-tabs__bar { position: relative; padding: 9px 16px; background: linear-gradient(#f6f6f6, #f9f9f9 40%, #f2f2f2); border-radius: 8px; box-shadow: 0 6px 22px rgb(0 0 0 / .09); }
.region-tabs__list { display: flex; align-items: center; gap: 10px; margin-block: -3px; padding-block: 3px; overflow-x: auto; scrollbar-width: none; }
.region-tabs__list::-webkit-scrollbar { display: none; }
.region-tabs__bar.is-clipped::after { content: ""; position: absolute; top: 9px; right: 16px; bottom: 9px; width: 48px; background: linear-gradient(90deg, rgb(246 246 246 / 0), #f6f6f6 85%); pointer-events: none; }
.region-tabs__list:has(> li:nth-child(7)) { justify-content: space-between; gap: 4px; }
.region-tabs__list > li { flex: none; }
.region-tabs__tab { display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 14px; border-radius: 5px; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer; list-style: none; }
.region-tabs__tab::-webkit-details-marker { display: none; }
.region-tabs__tab:hover { color: var(--red); }
.region-tabs__tab:focus-visible { outline-offset: -2px; }
.region-tabs__tab.is-active { padding-inline: 20px; background: var(--red-dark); color: var(--white); }
.region-tabs__tab .icon { font-size: 15px; transform: rotate(90deg); transition: transform .2s var(--ease); }
.region-tabs__dd[open] .icon { transform: rotate(-90deg); }
.region-tabs__menu { position: absolute; top: calc(100% - 4px); z-index: 30; min-width: 210px; padding: 8px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.region-tabs__menu a { display: block; padding: 9px 12px; border-radius: 4px; font-size: 14px; font-weight: 600; }
.region-tabs__menu a:hover, .region-tabs__menu a[aria-current] { background: var(--red-soft); color: var(--red); }

/* À la une : carrousel + cartes latérales */
.region-une { display: grid; grid-template-columns: 60.6% minmax(0, 1fr); gap: 14px; min-height: 527px; margin-top: 14px; }
.region-une--solo { grid-template-columns: 1fr; }
.region-une__main { position: relative; min-width: 0; }
.region-une__slides { display: grid; height: 100%; }
.region-une__slides > .js-slide { grid-area: 1 / 1; min-width: 0; transition: opacity .5s var(--ease), visibility .5s; }
.region-une__slides > .js-slide + .js-slide, .region-une__slides:has(.is-active) > .js-slide:not(.is-active) { opacity: 0; visibility: hidden; }
.region-une__slides > .js-slide.is-active { opacity: 1; visibility: visible; }
.region-une .card-hero { height: 100%; min-height: 0; border-radius: var(--radius); }
.region-une .card-hero__label { top: 14px; left: 15px; gap: 8px; padding: 7px 16px 7px 14px; font-size: 14.5px; }
/* Éclair de la maquette 04 : un seul trait en zigzag (celui du sprite est plein). */
.region-une .card-hero__label .icon { font-size: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 1.5 6.5 12h11l-9 10.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.region-une .card-hero__label .icon use { visibility: hidden; }
.region-une .card-hero__body { padding: 0 26px 31px; max-width: 700px; }
.region-une .card-hero__meta { font-size: 16px; }
.region-une .card-hero__meta .badge { font-size: 14px; }
.region-une .card-hero__title { font-size: 37px; line-height: 1.12; font-weight: 700; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.region-une .card-hero__excerpt { margin: 10px 0 13px; font-size: 18px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.region-une .card-hero__cta { min-height: 37px; background: var(--red-dark); }
.region-une .card-hero__cta:hover { background: #9f040e; }
/* Pagination du carrousel : tirets arrondis (actif rouge, suivant blanc, dernier gris) */
.region-une__dots { position: absolute; left: 50%; bottom: 20px; z-index: 2; display: flex; gap: 2px; transform: translateX(-50%); }
.region-une__dots button { position: relative; width: 32px; height: 24px; }
.region-une__dots button::before { content: ""; position: absolute; inset: 9px 5px; border-radius: 3px; background: var(--white); }
.region-une__dots button:last-child::before { background: rgb(255 255 255 / .45); }
.region-une__dots button[aria-current="true"]::before { background: var(--red); }
.region-une__side { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; min-width: 0; }
.region-une .card-side { grid-template-columns: 50% 1fr; min-height: 0; }
.region-une .card-side__media { border-radius: var(--radius); }
.region-une .card-side__body { gap: 3px; padding: 11px 30px 10px 17px; } /* 4 lignes de titre tiennent dans le quart de la une (122 px) */
.region-une .card-side__meta { line-height: 1.3; }
.region-une .card-side__sep { margin-left: 5px; }
.region-une .card-side__title { font-size: 17px; line-height: 1.2; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Corps : colonne principale + barre latérale (maquette : 565 + 20 + 227) */
.region-body { grid-template-columns: minmax(0, 1fr) 356px; gap: 31px; margin-top: 24px; }
.region-main { padding-top: 3px; } /* titre principal centré sur le bandeau gris du premier bloc latéral */
.region-body.region-body--solo { grid-template-columns: 1fr; }
.region-section { margin-bottom: 34px; }
.region-main > .region-section:last-child, .region-main.region-section { margin-bottom: 0; }
.region-main .empty a { color: var(--red); font-weight: 600; text-decoration: underline; }
.region-grid { display: grid; gap: 14px; }
.region-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.region-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.region-section .section-header { margin-bottom: 14px; }
.region-section .section-header__title { padding-left: 19px; font-size: 19px; }
.region-section .section-header__title::before { top: 0; }
.region-section .section-header__link { font-size: 14px; font-weight: 500; }

/* Cartes d'articles de la page */
.region-section .card-medium { gap: 8px; }
.region-section .card-medium__title { font-size: 16.5px; line-height: 1.22; font-weight: 700; }
.region-section .card-medium__media { border-radius: 5px; }
.region-section .card-medium .stat .icon { font-size: 17px; }
.region-latest .card-medium__media { aspect-ratio: 1.75; }
.region-latest .card-medium .meta { row-gap: 10px; padding-top: 1px; }
.region-latest .card-medium .stats { flex-basis: 100%; margin-left: 0; gap: 24px; }
.region-latest .card-medium .stat { gap: 8px; }
.region-latest .card-medium .stat .icon { font-size: 19px; }
.region-latest .card-medium__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.region-section.region-reportages { margin-bottom: 23px; } /* maquette : les dossiers suivent de plus près (ligne de stats plus haute que la date) */
.region-reportages .card-medium__media { aspect-ratio: 2.2; }
.region-reportages .card-medium .meta { padding-top: 4px; }
.region-reportages .card-medium__badge { left: 10px; bottom: 10px; }
.region-reportages .badge--pill { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; }
.region-reportages .card-medium__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Actualités par thématique */
.region-themes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.region-theme { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: center; transition: border-color .2s, box-shadow .2s; }
.region-theme:hover { border-color: var(--red-line); box-shadow: var(--shadow); color: inherit; }
.region-theme__media.ratio { border-radius: 0; }
.region-theme__media img { transition: transform .5s var(--ease); }
.region-theme:hover .region-theme__media img { transform: scale(1.04); }
.region-theme__name { padding: 8px 8px 0; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.region-theme:hover .region-theme__name { color: var(--red); }
.region-theme__count { padding: 3px 8px 12px; font-size: 13.5px; color: var(--muted); }

/* Dossiers */
.region-section .card-overlay { aspect-ratio: 1.66; }
.region-section .card-overlay__body { gap: 6px; padding: 12px 14px; }
.region-section .card-overlay__title { font-size: 16.5px; line-height: 21px; font-weight: 700; }
.region-section .card-overlay__sub { margin-top: -2px; font-size: 12.5px; }
.region-section .card-overlay .badge--pill { padding: 4px 13px; border-radius: 999px; }

/* Barre latérale */
.region-sidebar { gap: 32px; }
.region-sidebar .section-header--boxed { margin-bottom: 8px; padding: 7px 14px 7px 2px; }
.region-sidebar .section-header__title { padding-left: 19px; }
.region-sidebar .section-header__title::before { top: -3px; bottom: -3px; }
.region-sidebar .ranked-list { gap: 20px; }
.region-sidebar .card-ranked { grid-template-columns: auto 88px 1fr; column-gap: 15px; }
.region-sidebar .card-ranked__media { aspect-ratio: 1.3; }
.region-sidebar .card-ranked__rank { width: 33px; height: 33px; background: #fdd5d9; font-size: 20px; }
.region-sidebar .card-ranked__title { -webkit-line-clamp: 2; }
.region-sidebar .card-ranked .meta { gap: 8px; font-size: 13px; }
.region-sidebar .card-ranked .stat .icon { font-size: 16px; }
.region-sidebar .card-ranked__sep { margin-inline: 6px 4px; }
.region-communes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.region-communes__item { display: flex; align-items: center; gap: 10px; min-height: 44px; height: 100%; padding: 8px 12px 8px 19px; border: 1px solid #ececec; border-radius: 5px; background: #f5f6f5; font-size: 15px; font-weight: 500; color: var(--ink); }
.region-communes__item .icon { font-size: 16px; color: #3a3a3a; }
.region-communes__item:hover, .region-communes__item[aria-current] { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }
.region-communes__item--all { justify-content: center; gap: 6px; padding-inline: 8px; background: var(--white); border-color: var(--line); color: var(--red); font-size: 12.5px; white-space: nowrap; }
.region-communes__item--all .icon { color: var(--red); font-size: 14px; }
.region-gallery { margin-top: 5px; }
.region-gallery .section-header { gap: 10px; margin-bottom: 12px; }
.region-gallery .section-header__title { font-size: 15px; letter-spacing: 0; }
.region-gallery .section-header__link { font-size: 14px; }
.region-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.region-gallery__grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; box-shadow: 0 1px 3px rgb(0 0 0 / .14); transition: opacity .2s; }
.region-gallery__grid:hover img { opacity: .9; }
/* Mosaïque de la maquette : 3 colonnes de hauteurs inégales (8 photos : 2 + 3 + 3), hauteurs mesurées
   sur la maquette, en pas de 5 px (l'espace entre photos est pris sur chaque case). */
.region-gallery__grid--mosaic { grid-template-columns: 1fr 1.27fr 1fr; grid-template-rows: repeat(58, 5px); row-gap: 0; grid-auto-flow: column; }
.region-gallery__grid--mosaic img { height: calc(100% - 5px); aspect-ratio: auto; }
.region-gallery__grid--mosaic img:nth-child(1), .region-gallery__grid--mosaic img:nth-child(6) { grid-row: span 25; }
.region-gallery__grid--mosaic img:nth-child(2) { grid-row: span 33; }
.region-gallery__grid--mosaic img:nth-child(3), .region-gallery__grid--mosaic img:nth-child(7) { grid-row: span 19; }
.region-gallery__grid--mosaic img:nth-child(4) { grid-row: span 23; }
.region-gallery__grid--mosaic img:nth-child(5) { grid-row: span 16; }
.region-gallery__grid--mosaic img:nth-child(8) { grid-row: span 14; }

/* Hub « Le Cri Local » : grille des régions */
.region-hub { margin-top: 30px; }
.region-hub__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.region-hub .card-overlay { aspect-ratio: 1.5; }
.region-hub .card-overlay__title { font-size: 22px; }

/* Bandeau newsletter (maquette : 47 px de haut, un peu plus compact que le composant) */
.tpl-region .nl-banner { margin-block: 31px 12px; }
.tpl-region .site-footer { margin-top: 0; }
.tpl-region .nl-banner__inner { gap: 18px; padding: 8px 31px 8px 34px; background: #fdebee; border-radius: 7px; }
/* Enveloppe pleine de la maquette (le pictogramme du sprite est au trait). */
.tpl-region .nl-banner__icon { width: 56px; height: 56px; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 21'%3E%3Crect width='28' height='21' rx='2.5' fill='%23fff'/%3E%3Cpath d='M3 3.5l11 8 11-8' fill='none' stroke='%23e30613' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 50% auto no-repeat; }
.tpl-region .nl-banner__icon .icon { visibility: hidden; }
.tpl-region .nl-banner__title { margin-bottom: 1px; font-size: 17.5px; }
.tpl-region .nl-banner p { font-size: 12.3px; color: #222; }
.tpl-region .nl-form input, .tpl-region .nl-form .btn { min-height: 45px; }
.tpl-region .nl-form input { font-size: 13px; }
.tpl-region .nl-form .btn { min-width: 164px; padding-inline: 30px; background: var(--red-dark); font-size: 15px; }
.tpl-region .nl-form .btn:hover { background: #9f040e; }

/* Responsive */
@media (max-width: 1240px) {
	.region-tabs__tab { padding-inline: 11px; }
	.region-une .card-hero__title { font-size: 32px; }
}
@media (max-width: 1100px) {
	.region-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
	.region-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.region-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.region-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.region-sidebar .card-ranked { grid-template-columns: auto 76px 1fr; column-gap: 12px; }
}
@media (max-width: 1024px) {
	.tpl-region .nl-banner__inner { padding-block: 16px; }
}
@media (max-width: 900px) {
	.region-body { grid-template-columns: 1fr; }
	.region-une { grid-template-columns: 1fr; height: auto; }
	.region-une__slides { height: 460px; }
	.region-une__side { grid-auto-rows: auto; grid-template-columns: 1fr 1fr; }
	.region-une .card-side { grid-template-columns: 40% 1fr; min-height: 120px; }
	.region-une .card-side__meta time { white-space: nowrap; }
	.region-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.region-sidebar .card-ranked { grid-template-columns: auto 88px 1fr; }
}
@media (max-width: 760px) {
	.region-hero__inner { min-height: 330px; padding-block: 18px 52px; }
	.region-hero__inner > :not(.region-hero__crumb) { margin-left: 0; }
	.region-hero__crumb { padding-left: 0; }
	.region-hero__title { font-size: 54px; }
	.region-hero__subtitle { font-size: 22px; }
	.region-hero__text { font-size: 16px; }
	.region-tabs { margin-top: -24px; }
	.region-tabs__bar { padding: 8px; }
	.region-tabs__bar.is-clipped::after { top: 8px; right: 8px; bottom: 8px; }
	.region-tabs__list, .region-tabs__list:has(> li:nth-child(7)) { justify-content: flex-start; gap: 4px; }
	.region-une__side { grid-template-columns: 1fr; }
	.region-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.region-une__slides { height: 400px; }
	.region-une .card-hero__title { font-size: 24px; }
	.region-une .card-hero__body { padding: 0 18px 46px; }
	.region-une .card-hero__excerpt { display: none; }
	.region-une .card-hero__cta { display: inline-flex; min-height: 34px; padding-inline: 16px; font-size: 14px; } /* le composant le masque sur mobile : seul appel à l'action de la carte */
	.region-une .card-side { grid-template-columns: 38% 1fr; }
	.region-une .card-side__meta { overflow: hidden; white-space: nowrap; }
	.region-une .card-side__meta time { overflow: hidden; text-overflow: ellipsis; }
	/* « Voir tous les dossiers » écrit « Voir tout » : le titre garde sa place (le nom complet reste celui du lien). */
	.region-dossiers .section-header__link { font-size: 0; gap: 0; }
	.region-dossiers .section-header__link::before { content: "Voir tout"; content: "Voir tout" / ""; margin-right: 6px; font-size: 13.5px; }
	.region-dossiers .section-header__link .icon { font-size: 13.5px; }
	.tpl-region .nl-banner__icon { width: 44px; height: 44px; }
	.region-grid--3, .region-grid--4 { grid-template-columns: 1fr; }
	.region-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.region-hub__grid { gap: 10px; }
	.region-hub .card-overlay { aspect-ratio: 1.15; }
	.region-hub .card-overlay__body { padding: 12px; }
	.region-hub .card-overlay__title { font-size: 17px; }
	.tpl-region .nl-banner__inner { padding: 20px; }
}
@media (max-width: 420px) {
	.region-hero__title { font-size: 44px; }
}