/* Page Notre équipe (maquette 16) — templates/page-equipe.php + motif patterns/page-notre-equipe.php.
   Maquette à 948 px : cote × 1,477 = cote CSS.
   Bandeau (.equipe-hero), cartes de membres (.equipe-member) et chiffres (.equipe-stat) servent aussi à la page
   À propos, qui charge ce fichier : ces règles-là ne sont pas préfixées par .tpl-equipe.
   Ce fichier est chargé avant la feuille des blocs WordPress : les règles visant les blocs sont préfixées par .tpl-*. */

:root {
	--equipe-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	/* Flèche longue des liens « Voir toute la rédaction → » et « Voir tous les partenaires → » des maquettes. */
	--equipe-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6h18M14.5 1.5 19.5 6l-5 4.5'/%3E%3C/svg%3E");
}

/* ---------- Bandeau (règles doublement qualifiées : components/blocks.css, chargé après, règle .page-hero__*) ---------- */
.equipe-hero { background: #0b0b0d; }
.equipe-hero .page-hero__media::after { background: linear-gradient(90deg, rgb(4 4 6 / .96) 0%, rgb(14 3 5 / .9) 28%, rgb(70 2 9 / .55) 50%, rgb(0 0 0 / 0) 72%); }
.equipe-hero--plain { background: radial-gradient(90% 160% at 92% 20%, #8a0611 0%, #3b0207 38%, #120305 62%, #070708 82%); }
.equipe-hero--plain::after { content: "LECRI24"; position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: -.16em; z-index: -1; font: 900 clamp(90px, 15vw, 230px)/1 var(--font); letter-spacing: -.04em; color: rgb(255 255 255 / .05); pointer-events: none; }
.equipe-hero .equipe-hero__inner { align-items: flex-start; justify-content: flex-start; gap: 0; min-height: 326px; padding-block: 20px 25px; }
/* Maquette 16 : textes du bandeau en retrait d'environ 15 px sur le bord du conteneur. */
.tpl-equipe .equipe-hero__inner { padding-left: calc(var(--gutter) + 15px); }
.tpl-equipe :is(.equipe-hero__title, .equipe-hero__intro) { margin-left: 7px; }
.equipe-hero .breadcrumb ol { font-size: 14px; }
.equipe-hero .equipe-hero__badge { margin-top: 15px; padding: 7px 14px; border-radius: 3px; font-size: 14px; letter-spacing: .02em; }
.equipe-hero__badge:hover { background: var(--red); }
/* Maquette 16 : « Une rédaction engagée / à vos côtés » (pas d’équilibrage des lignes). */
.equipe-hero .equipe-hero__title { max-width: 11.4em; margin-top: 10px; font-family: var(--slab); font-size: 54px; font-weight: 800; line-height: 1.04; letter-spacing: .005em; text-wrap: wrap; }
.equipe-hero__tagline { margin: 4px 0 0; font: 500 29px/1.2 var(--slab); color: var(--white); }
.equipe-hero .equipe-hero__intro { max-width: 575px; margin-top: 11px; font-size: 19.5px; line-height: 1.4; color: var(--white); }

/* ---------- Chiffres (éléments du shortcode [lecri24_chiffres] et blocs du motif) ---------- */
.equipe-stats { display: contents; }
.equipe-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.equipe-stat .icon { font-size: 28px; color: var(--red); }
.equipe-stat p { margin: 0; }
.equipe-stat__num { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.equipe-stat__label { font-size: 15px; line-height: 1.3; color: #333; }

/* ---------- Cartes de membres (template-parts/apropos-equipe/member.php) ---------- */
.equipe-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 20px; }
.equipe-grid--4 { --cols: 4; gap: 20px; }
.equipe-grid--2 { --cols: 2; }
.equipe-grid.is-collapsed > .equipe-member--extra { display: none; }
.equipe-member { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid #ececec; border-radius: 5px; box-shadow: 0 1px 6px rgb(0 0 0 / .05); }
.equipe-member__photo { display: block; aspect-ratio: 133 / 81; overflow: hidden; background: #ececec; }
.equipe-grid--large .equipe-member__photo { aspect-ratio: 303 / 160; }
.equipe-member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .4s var(--ease); }
.equipe-member:hover .equipe-member__photo img { transform: scale(1.04); }
.equipe-member__photo .img-fallback .logo-text { font-size: 26px; }
.equipe-member__body { display: flex; flex: 1; flex-direction: column; padding: 6px 12px 8px; }
.equipe-grid--large .equipe-member__body { padding: 12px 16px 12px; }
.equipe-member__name { font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.equipe-grid--large .equipe-member__name { font-size: 16px; }
.equipe-member__name a:hover { color: var(--red); }
.equipe-member__role, .equipe-member__topics { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.equipe-member__topics { overflow: hidden; color: #333; white-space: nowrap; text-overflow: ellipsis; }
.equipe-grid--large .equipe-member__role { font-size: 14.5px; font-weight: 500; color: #333; }
.equipe-grid--large .equipe-member__topics { font-size: 14px; color: var(--muted); }
.equipe-member__btn { border-color: #f17179; min-height: 29px; margin-top: auto; padding: 0 8px; border-radius: 3px; font-size: 12.5px; font-weight: 800; gap: 7px; }
.equipe-member__btn:hover { border-color: var(--red); }
.equipe-member__body:has(> .equipe-member__btn) > :nth-last-child(2) { margin-bottom: 10px; }
.equipe-grid--large .equipe-member__btn { min-height: 32px; }

/* ---------- Page Notre équipe ---------- */
.equipe-content { overflow-x: clip; }
/* Thème classique : WordPress ajoute .wp-block-group__inner-container dans chaque groupe ; il ne doit pas compter dans la mise en page. */
.equipe-content .wp-block-group__inner-container, .apropos-content .wp-block-group__inner-container { display: contents; }
:where(.equipe-content, .apropos-content) p { margin: 0; }
.tpl-equipe .equipe-content > * { width: min(100% - 2 * var(--gutter), var(--container)); margin: 19px auto 0; }

/* Bandeau de chiffres (6 colonnes, fond rose) */
.tpl-equipe .equipe-content > .equipe-chiffres { margin-top: 13px; }
/* Maquette : colonnes de largeurs inégales. */
.tpl-equipe .equipe-chiffres { display: grid; grid-template-columns: 165fr 146fr 150fr 128fr 154fr 165fr; overflow: hidden; background: var(--red-soft); border-radius: 6px; }
.tpl-equipe .equipe-chiffres .equipe-stat { justify-content: center; min-height: 118px; padding: 12px 8px; position: relative; }
/* Filet à gauche de chaque colonne ; celui de la première colonne de chaque ligne sort du cadre (overflow: hidden). */
.tpl-equipe .equipe-chiffres .equipe-stat::before { content: ""; position: absolute; left: -1px; top: 19px; bottom: 19px; width: 1px; background: #f1d3d8; }
.tpl-equipe .equipe-chiffres .equipe-stat .icon { margin-bottom: 4px; font-size: 39px; }
.tpl-equipe .equipe-chiffres .wp-block-group .equipe-stat__num { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.35; }
/* Maquette : seules les colonnes 4 et 5 ont leur première ligne en gras. */
.tpl-equipe .equipe-chiffres .wp-block-group.equipe-stat:last-child .equipe-stat__num { font-weight: 400; }


/* Sections par pôle */
.tpl-equipe .equipe-section { position: relative; }
.tpl-equipe .equipe-section:not(:has(.equipe-member)) { display: none; }
.tpl-equipe .equipe-section__title { position: relative; padding-left: 21px; font-size: 18.9px; font-weight: 800; line-height: 1.3; }
.tpl-equipe .equipe-section__title::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 1px; background: var(--red); }
.tpl-equipe .equipe-section__intro { margin-top: 3px; font-size: 16px; line-height: 1.45; color: #4a4a4a; }
.tpl-equipe .equipe-section .equipe-grid { margin-top: 12px; }
.equipe-more { position: absolute; top: 10px; right: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; color: var(--red); }
.equipe-more:hover { text-decoration: underline; }
.equipe-more::after { content: ""; flex: none; width: 16px; height: 9px; background: currentColor; -webkit-mask: var(--equipe-arrow-long) center / contain no-repeat; mask: var(--equipe-arrow-long) center / contain no-repeat; }
.tpl-equipe .equipe-content > .equipe-section:has(.equipe-more:not([hidden])) .equipe-section__intro { padding-right: 300px; }

/* Télévision (2/3) et photographie (1/3) côte à côte */
.tpl-equipe .equipe-duo { display: flex; gap: 46px; }
.tpl-equipe .equipe-duo .equipe-section { flex: 573 1 0; min-width: 0; }
.tpl-equipe .equipe-duo .equipe-section + .equipe-section { flex-grow: 260; }
/* Colonnes étroites : le titre se replie avant le lien « Voir tous… » plutôt que de passer dessous. */
.tpl-equipe .equipe-duo .equipe-section:has(.equipe-more:not([hidden])) .equipe-section__title { padding-right: 210px; }
.tpl-equipe .equipe-duo:not(:has(.equipe-member)) { display: none; }
/* Maquette : photos des photographes aussi hautes que celles de la télévision (cartes plus étroites). */
.tpl-equipe .equipe-duo .equipe-grid--2 .equipe-member__photo { aspect-ratio: 181 / 119; }

/* Appel « Rejoignez notre rédaction » */
.tpl-equipe .equipe-content > .equipe-recrutement { margin-top: 12px; }
.tpl-equipe .equipe-recrutement { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; border-radius: 6px; background: linear-gradient(90deg, #e50a12 0%, #d0060f 45%, #8e020b 72%, #2a0406 100%); box-shadow: var(--shadow); }
.tpl-equipe .equipe-recrutement .wp-block-buttons { margin: 0; }
.tpl-equipe :is(.equipe-recrutement, .equipe-recrutement > .wp-block-group__inner-container) > .icon { display: block; box-sizing: content-box; width: 42px; height: 42px; margin: 10px 0 10px 32px; padding: 19px; border-radius: 50%; background: var(--white); color: var(--red); }
.tpl-equipe .equipe-recrutement__text { padding-block: 12px; color: var(--white); }
.tpl-equipe .equipe-recrutement h2 { font-size: 27.5px; font-weight: 700; line-height: 1.2; color: var(--white); }
.tpl-equipe .equipe-recrutement p { margin-top: 5px; max-width: 600px; font-size: 16px; line-height: 1.4; color: rgb(255 255 255 / .95); }
.tpl-equipe .equipe-recrutement .wp-block-buttons { margin-right: 26px; }
.tpl-equipe .equipe-recrutement .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 26px; border: 2px solid var(--white); border-radius: 5px; background: var(--red); color: var(--white); font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.tpl-equipe .equipe-recrutement .wp-block-button__link::after { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--equipe-arrow) center / contain no-repeat; mask: var(--equipe-arrow) center / contain no-repeat; }
.tpl-equipe .equipe-recrutement .wp-block-button__link:hover { background: var(--white); color: var(--red); }

.tpl-equipe .nl-banner { margin-top: 15px; }
/* Maquettes 15 et 16 : titre, texte et champ du bandeau newsletter un peu plus grands que le défaut commun. */
:is(.tpl-equipe, .tpl-a-propos) .nl-banner__title { font-size: 20.3px; }
:is(.tpl-equipe, .tpl-a-propos) .nl-banner p { font-size: 15px; }
:is(.tpl-equipe, .tpl-a-propos) .nl-banner .nl-form :is(input, .btn) { min-height: 50px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.equipe-grid { --cols: 4; }
	.equipe-grid--2 { --cols: 2; }
	.tpl-equipe .equipe-duo { flex-direction: column; gap: 26px; }
	.tpl-equipe .equipe-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tpl-equipe .equipe-duo .equipe-grid--2 .equipe-member__photo { aspect-ratio: 133 / 81; }
}
@media (max-width: 900px) {
	.equipe-hero .equipe-hero__title { font-size: 40px; }
	.equipe-hero__tagline { font-size: 26px; }
	.equipe-hero .equipe-hero__intro { font-size: 18px; }
	.equipe-grid { --cols: 3; }
	.equipe-grid--4 { --cols: 4; }
	.tpl-equipe .equipe-hero__inner { padding-left: var(--gutter); }
	.tpl-equipe :is(.equipe-hero__title, .equipe-hero__intro) { margin-left: 0; }
	.equipe-more { position: static; margin-top: 14px; }
	.tpl-equipe .equipe-content > .equipe-section:has(.equipe-more:not([hidden])) .equipe-section__intro { padding-right: 0; }
	.tpl-equipe .equipe-recrutement { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; }
	.tpl-equipe .equipe-recrutement .wp-block-buttons { grid-column: 2; margin: 0 26px 20px 0; }
}
@media (max-width: 600px) {
	.equipe-hero .equipe-hero__inner { min-height: 0; padding-block: 18px 26px; }
	.equipe-hero--plain::after { display: none; }
	.equipe-hero .equipe-hero__title { font-size: 32px; }
	.equipe-hero__tagline { font-size: 21px; }
	.equipe-hero .equipe-hero__intro { margin-top: 12px; font-size: 16px; }
	.equipe-grid, .equipe-grid--4 { --cols: 2; gap: 14px 12px; }
	.equipe-member__body, .equipe-grid--large .equipe-member__body { padding: 11px 10px 12px; }
	.equipe-member__name, .equipe-grid--large .equipe-member__name { font-size: 14.5px; }
	.equipe-member__role, .equipe-member__topics, .equipe-grid--large .equipe-member__role, .equipe-grid--large .equipe-member__topics { font-size: 13px; }
	.equipe-member__btn { white-space: normal; text-align: center; }
	.tpl-equipe .equipe-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpl-equipe .equipe-chiffres .equipe-stat { min-height: 104px; }
	.tpl-equipe .equipe-section__title { font-size: 19px; }
	.tpl-equipe .equipe-section__intro { font-size: 14.5px; }
	.tpl-equipe .equipe-recrutement { grid-template-columns: 1fr; }
	.tpl-equipe :is(.equipe-recrutement, .equipe-recrutement > .wp-block-group__inner-container) > .icon { width: 34px; height: 34px; margin: 22px 0 0 22px; padding: 14px; }
	.tpl-equipe .equipe-recrutement__text { padding: 12px 22px 14px; }
	.tpl-equipe .equipe-recrutement h2 { font-size: 23px; }
	.tpl-equipe .equipe-recrutement .wp-block-buttons { grid-column: 1; margin: 0 22px 22px; }
	.tpl-equipe .equipe-recrutement .wp-block-button__link { white-space: normal; text-align: left; }
}
