/* Pages simples (page.php) + éléments communs aux pages Newsletter, légales et 404 (chargé avant leur CSS).
   Échelle : cote maquette × 1,47. */

/* ---------- Page simple ---------- */
.pg { max-width: calc(880px + 2 * var(--gutter)); padding-block: 28px 8px; }
.pg-head { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.pg-head__title { position: relative; margin-top: 18px; padding-left: 20px; font: 700 44px/1.12 var(--serif); }
.pg-head__title::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 6px; border-radius: 1px; background: var(--red); }
.pg-media { margin-bottom: 30px; }
.pg-media img { width: 100%; border-radius: var(--radius-lg); }
.pg-content > .nl-signup { max-width: 560px; margin-bottom: 20px; }

/* Thème classique : WordPress enveloppe le contenu des Groupes ; on rend leurs blocs enfants directs (grilles). */
.pg-hero .wp-block-group__inner-container, .nl-content .wp-block-group__inner-container, .legal-content .wp-block-group__inner-container { display: contents; }

/* ---------- En-tête image des pages Newsletter et légales ---------- */
.pg-hero { background: radial-gradient(60% 120% at 88% 50%, rgb(227 6 19 / .32), transparent 70%), linear-gradient(90deg, #0b0c0f 0%, #17191e 55%, #2a1416 100%); }
.pg-hero .page-hero__media::after { background: linear-gradient(90deg, rgb(0 0 0 / .95) 0%, rgb(0 0 0 / .78) 32%, rgb(0 0 0 / .1) 62%); }
/* Le texte de l’en-tête est en retrait d’environ 15 px sur le logo dans les maquettes 19 et 20. */
.pg-hero__inner { justify-content: flex-start; gap: 0; min-height: 0; padding-block: 12px 19px; }
.pg-hero__inner > * { margin-left: 15px; }
.pg-hero .breadcrumb { margin-bottom: 21px; }
.pg-hero .breadcrumb ol { font-size: 14.5px; }
.pg-hero .page-intro { max-width: 660px; }
.pg-hero .page-intro :is(p, h1) { margin: 0; }
.pg-hero__badge { display: inline-block; padding: 4px 13px; border-radius: 4px; background: var(--red); color: var(--white); font-size: 16px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; }
/* Roboto Slab grasse (700) comme les maquettes 19 à 21 */
.pg-hero h1 { margin-top: 12px !important; color: var(--white); font: 700 61px/.97 var(--serif); }
.pg-hero h1 + p { max-width: 610px; margin-top: 16px !important; font-size: 22px; line-height: 1.38; color: rgb(255 255 255 / .95); }
.pg-hero h1 + p strong { font-weight: 700; }

/* ---------- Titre de section slab à barre rouge (+ sous-titre, lien à droite) ---------- */
.pg-sechead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pg-title, .nl-head h2 { position: relative; padding-left: 20px; font: 700 23px/1.2 var(--serif); letter-spacing: .01em; color: var(--ink); }
.pg-title::before, .nl-head h2::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 0; width: 7px; background: var(--red); }
.pg-sechead p, .nl-head p { margin: 4px 0 0 2px; font-size: 17.5px; color: #555; }
.nl-head p { font-size: 15px; color: #666; }
.pg-sechead .section-header__link { font-size: 15px; font-weight: 700; }

/* ---------- Icône en ligne ([lecri24_icone]) ---------- */
.cp-ico { display: inline-flex; color: var(--red); }

/* ---------- Formulaire newsletter ([lecri24_newsletter_formulaire]) ---------- */
.nl-signup__label { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.nl-signup__field { position: relative; display: flex; }
.nl-signup__field input { flex: 1; min-width: 0; }
.nl-signup__icon { position: absolute; left: 18px; top: 50%; z-index: 1; margin-top: -10px; font-size: 20px; color: #777; pointer-events: none; }
.nl-signup .nl-form input { min-height: 48px; padding-left: 58px; }
/* Texte indicatif de la maquette avec l'astérisque rouge (span du shortcode) : un placeholder n'a qu'une couleur */
.nl-signup__field input::placeholder { color: transparent; }
.nl-signup__ph { position: absolute; left: 59px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #808080; pointer-events: none; }
.nl-signup__ph b { font-weight: inherit; color: var(--red); }
.nl-signup__field input:not(:placeholder-shown) + .nl-signup__ph { display: none; }
.nl-signup .nl-form .btn { min-height: 54px; font-size: 18px; gap: 16px; }
.nl-signup .nl-form .btn .icon { font-size: 23px; }

/* ---------- Bandeau newsletter du bas : le compact partagé, recalé sur les maquettes 19 à 21 ---------- */
/* Enveloppe pleine (maquettes) : le sprite n'a que l'enveloppe au trait */
:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner__icon .icon { background: currentColor; -webkit-mask: var(--pg-mail) center / contain no-repeat; mask: var(--pg-mail) center / contain no-repeat; }
:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner__icon .icon use { display: none; }
:is(.tpl-newsletter, .tpl-legal, .tpl-404) { --pg-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
@media (min-width: 1025px) {
	:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner__inner { padding: 10px 15px 10px 18px; }
	:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner__icon .icon { font-size: 33px; }
	:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner__title { font-size: 21.5px; }
	:is(.tpl-newsletter, .tpl-legal, .tpl-404) .nl-banner p { font-size: 15px; color: #222; }
	:is(.tpl-legal, .tpl-404) .nl-banner__inner { grid-template-columns: auto 1fr minmax(320px, 500px); }
}

@media (max-width: 760px) {
	.pg-head__title { font-size: 34px; }
	.pg-hero__inner { min-height: 0; padding-block: 16px 28px; }
	.pg-hero__inner > * { margin-left: 0; }
	.pg-hero h1 { font-size: 40px; }
	.pg-hero h1 + p { font-size: 17px; line-height: 1.45; }
	.pg-hero__badge { font-size: 13px; }
	.pg-sechead { flex-direction: column; align-items: flex-start; gap: 8px; }
	.pg-title, .nl-head h2 { font-size: 22px; }
	.pg-sechead p, .nl-head p { font-size: 15px; }
}
@media (max-width: 420px) {
	.pg-hero h1 { font-size: 34px; }
	.pg-head__title { font-size: 30px; }
}