/**
 * Page d'accueil 2026 (maquette Claude Design « Accessite Accueil v4 »).
 * Toutes les sections sont préfixées .h26-* : aucune interaction avec l'ancien sections.css.
 * Couleurs et typos : theme.json + charte-2026.css.
 */

/* ==========================================================================
 * Socle des sections
 * ========================================================================== */
.h26 {
	padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 56px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
.h26__inner { max-width: 1400px; margin: 0 auto; }
.h26 p { margin: 0; }
.h26 h2 {
	margin: 0;
	font-size: clamp(36px, 4.4vw, 68px);
	line-height: 1.05;
	color: var(--wp--preset--color--navy);
	text-transform: none;
}
.h26 .is-overtitle { margin: 0 0 28px; }
.h26 .is-lead { max-width: 640px; }
.h26 .is-lien-fleche { margin-top: 32px; }
.h26 .is-lien-fleche a { border-bottom: 0; }

/* En-tête de section : titre à gauche, texte à droite */
.h26-tete {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 80px;
}

/* ==========================================================================
 * 1. Hero : visuel plein fond + voile marine
 * ========================================================================== */
.wp-block-cover.h26-hero {
	min-height: 100vh;
	padding: 140px clamp(20px, 4vw, 56px) 88px;
	align-items: flex-end;
}
/* Voile du hero : réglé dans l'éditeur (bloc Couverture > Superposition). */
.h26-hero .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; color: #fff; }
.h26-hero .is-overtitle,
.h26-hero .is-overtitle * { color: #fff; }
.h26-hero .is-overtitle::before { display: none; }
.h26-hero .is-overtitle { margin-bottom: 32px; }
.h26-hero__title:not(#_){
	margin: 0;
	font-size: clamp(48px, 7vw, 120px);
	line-height: 1.02;
	color: var(--wp--preset--color--navy);
	text-transform: none;
}
.h26-hero__chapo:not(#_) { margin-top: 28px; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; }
.h26-hero__texte:not(#_) { max-width: 600px; margin: 20px 0 0; font-size: 17px; line-height: 1.6; font-weight: 300; color: color-mix(in srgb, #fff 88%, transparent); }
.h26-hero__baseline:not(#_) { margin: 20px 0 32px; max-width: 600px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 75%, transparent); }
.h26-hero .wp-block-button__link { padding: 16px 30px; font-size: 15px; }
.h26-hero .wp-block-button__link:hover:not(#_) { background: #fff; border-color: #fff; color: var(--wp--preset--color--betterave); }

/* ==========================================================================
 * 2. Logos
 * ========================================================================== */
.h26-logos:not(#_) { padding-top: 48px; padding-bottom: 48px; background: var(--wp--preset--color--white); }
.h26-logos .besoins-logos__surtitre:not(#_){ color: var(--wp--preset--color--betterave); letter-spacing: .16em; margin-bottom: 28px; }
.h26-logos .logos-slider__item img { filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.h26-logos .logos-slider__item img:hover { filter: none; opacity: 1; }

/* ==========================================================================
 * 3. Cinq leviers : liste typographique, apparition depuis la gauche
 * ========================================================================== */
.h26-levier {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 48px;
	padding: 48px 0;
	align-items: start;
}
.h26-levier + .h26-levier { border-top: 1px solid var(--wp--preset--color--gray); }
.h26-levier__num { font-family: var(--wp--preset--font-family--accroche); font-size: clamp(44px, 5vw, 80px); line-height: .9; color: var(--wp--preset--color--betterave); }
.h26-levier__nom { font-family: var(--wp--preset--font-family--accroche); font-size: clamp(28px, 3vw, 44px); line-height: 1; }
.h26-levier__titre { margin: 0 0 12px; font-size: 24px; line-height: 1.2; text-transform: none; }
.h26-levier__texte { max-width: 640px; font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--wp--preset--color--encre); }
.h26-levier .is-lien-fleche { margin-top: 18px; font-size: 14px; }

/* ==========================================================================
 * 4. Chiffres clés : une seule ligne, sans bloc de couleur
 * ========================================================================== */
.h26-chiffres { background: var(--wp--preset--color--beige); }
.h26-chiffres h2 { margin-bottom: 72px; }
.h26-chiffres__ligne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.h26-chiffre__valeur { line-height: 1; color: var(--wp--preset--color--betterave); white-space: nowrap; }
.h26 .is-chiffre { font-family: var(--wp--preset--font-family--accroche); font-weight: 400; font-size: clamp(34px, 4vw, 64px); }
.h26-chiffre__unite { font-family: var(--wp--preset--font-family--accroche); font-size: clamp(16px, 1.8vw, 29px); margin-left: 5px; color: var(--wp--preset--color--betterave); }
.h26-chiffre__label:not(#_) { margin-top: 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; color: var(--wp--preset--color--encre); }

/* ==========================================================================
 * 5. Carte des actifs
 * ========================================================================== */
.h26-carte__grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 96px; align-items: center; }
.h26-carte__img { margin: 0; }
.h26-carte__img img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.h26-carte h2 { margin-bottom: 56px; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.h26-carte__ligne { display: flex; align-items: baseline; gap: 24px; padding: 22px 0; }
.h26-carte__ligne .is-chiffre { min-width: 130px; font-size: 56px; }
.h26-carte__label { font-size: 18px; }

/* ==========================================================================
 * 6. Citation éditoriale (sans photo)
 * ========================================================================== */
.h26-citation { background: var(--wp--preset--color--beige); }
.h26-citation .wp-block-quote { margin: 0; padding-top: 0; padding-bottom: 0; border: 0; }
.h26-citation .wp-block-quote p { font-size: inherit; line-height: inherit; color: var(--wp--preset--color--navy); }
.h26-citation cite {
	display: block;
	margin-top: 36px;
	font-family: var(--wp--preset--font-family--accessite);
	font-style: normal;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
}
.h26-citation__org { font-weight: 300; }
.h26-citation__org::before { content: " · "; }

/* ==========================================================================
 * 7. Promeo Groupe
 * ========================================================================== */
.h26-promeo__haut { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; }
.h26-promeo h2 { margin-bottom: 40px; font-size: clamp(38px, 4.6vw, 72px); line-height: 1.02; }
.h26-promeo .is-lead { font-size: 18px; }
.h26-promeo .is-lead a { font-weight: 500; }
.h26-promeo__chiffres { display: grid; grid-template-columns: 1fr 1fr; }
.h26-promeo__chiffres .h26-chiffre { padding: 32px 16px 32px 0; }
.h26-promeo__chiffres .is-chiffre { font-size: clamp(34px, 3.6vw, 54px); }
.h26-promeo__chiffres .h26-chiffre__unite { margin-left: 0; font-size: clamp(34px, 3.6vw, 54px); }
.h26-promeo__chiffres .h26-chiffre__label:not(#_) { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--navy); margin-top: 10px; }
.h26-ecosysteme { margin-top: 96px; }
.h26-ecosysteme h3 { margin: 0 0 12px; font-size: 32px; text-transform: none; }
.h26-ecosysteme > .is-lead { margin-bottom: 48px; font-size: 17px; }
.h26-ecosysteme__poles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.h26-pole { padding-top: 24px; }
.h26-pole__titre { margin: 0 0 14px; font-size: 26px; text-transform: none; }
.h26-pole__texte:not(#_) { margin-bottom: 16px; font-size: 16px; line-height: 1.55; font-weight: 300; }
.h26-pole__chiffres { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--wp--preset--color--betterave); }

/* ==========================================================================
 * 8. (Appel à l'action : géré entièrement dans l'éditeur, aucune règle ici)
 * ========================================================================== */

/* ==========================================================================
 * 9. Valeurs
 * ========================================================================== */
.h26-valeurs__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.h26-valeurs h2 { margin-bottom: 32px; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.h26-valeurs .is-lead { max-width: 480px; font-size: 18px; }
.h26-valeur:not(#_){
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 22px 0;
	font-size: clamp(32px, 3.4vw, 52px);
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	color: var(--wp--preset--color--navy);
}
.h26-valeurs__num { font-size: 12px; letter-spacing: .1em; color: var(--wp--preset--color--betterave); }

/* ==========================================================================
 * Responsive
 * ========================================================================== */
@media (max-width: 1024px) {
	.h26-tete,
	.h26-carte__grille,
	.h26-promeo__haut,
	.h26-valeurs__grille { grid-template-columns: 1fr; gap: 48px; }
	.h26-chiffres__ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
	.h26-levier { grid-template-columns: 80px 1fr; gap: 16px 32px; }
	.h26-levier__corps { grid-column: 2; }
}
@media (max-width: 600px) {
	.h26-chiffres__ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.h26-ecosysteme__poles { grid-template-columns: 1fr; gap: 32px; }
	.h26-levier { grid-template-columns: 1fr; }
	.h26-levier__corps { grid-column: 1; }
	.h26-carte__ligne .is-chiffre { min-width: 90px; font-size: 44px; }
}

/* ==========================================================================
 * Ajustements : flèches en CSS (le texte des liens reste celui de la page),
 * citation sur fond blanc cassé
 * ========================================================================== */
.h26-hero__cta .wp-block-button__link::after,
.h26 .is-lien-fleche a::after { content: "\00a0\2192"; }
.h26-citation__org { color: inherit; font-weight: 300; text-decoration: none; }
.h26-citation__org:hover { text-decoration: underline; }
.h26.h26 .is-lead a { color: var(--wp--preset--color--betterave); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Citation avec photo d'Olivier Ganivenq et Alexandre Séjourné */
.h26-citation__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.h26-citation__photo { margin: 0; overflow: hidden; }
.h26-citation__photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 28%; }
.h26-citation__grille .is-citation { font-size: clamp(26px, 3vw, 46px); }
@media (max-width: 1024px) {
	.h26-citation__grille { grid-template-columns: 1fr; }
	.h26-citation__photo img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
 * Alignement : le contenu des sections .h26 s'aligne sur le logo (gauche)
 * et le bouton « Prendre contact » (droite), comme les autres pages
 * (gouttières --accessite-gutter-left / -right de mise-en-page.css).
 * ========================================================================== */
.h26:not(#_),
.wp-block-cover.h26-hero:not(#_) {
	padding-left: var(--accessite-gutter-left);
	padding-right: var(--accessite-gutter-right);
}
.h26__inner:not(#_),
.h26-hero .wp-block-cover__inner-container:not(#_) { max-width: none; margin-left: 0; margin-right: 0; }

/* H1 : toute la phrase en Abril, en grand, deux couleurs */
.h26-hero__title:not(#_){ font-size: clamp(44px, 5.6vw, 92px); line-height: 1.04; }

/* Leviers : simple apparition en fondu au scroll */
.has-anim .anim-fondu {
	opacity: 0;
	transition: opacity 1.2s var(--accessite-ease) var(--anim-delay, 0ms);
}
.has-anim .anim-fondu.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .has-anim .anim-fondu:not(#_) { opacity: 1; transition: none; } }

/* Carte et groupe Promeo (mise en page reprise de la préprod) : titres en Abril, sans capitales */
.couverture-figma__title:not(#_),
.couverture-figma__title strong:not(#_),
.promeo-intro .accessite-section-title:not(#_),
.promeo-intro .accessite-section-title strong:not(#_){
	font-family: var(--wp--preset--font-family--accroche);
	font-weight: 400;
	text-transform: none;
}
.promeo-cover__quote:not(#_){ text-transform: none; }

/* Leviers : fondu plus marqué. Chaque levier apparaît lentement, puis ses éléments
 * (numéro, nom, texte) se révèlent l'un après l'autre. */
.has-anim .anim-fondu { transition: opacity 1.4s ease-out var(--anim-delay, 0ms); }
.has-anim .anim-fondu > * { opacity: 0; transition: opacity 1.6s ease-out; }
.has-anim .anim-fondu.is-visible > * { opacity: 1; }
.has-anim .anim-fondu.is-visible > *:nth-child(1) { transition-delay: .15s; }
.has-anim .anim-fondu.is-visible > *:nth-child(2) { transition-delay: .45s; }
.has-anim .anim-fondu.is-visible > *:nth-child(3) { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) { .has-anim .anim-fondu > *:not(#_) { opacity: 1; transition: none; } }

/* ==========================================================================
 * Ajustements du 27/10
 * ========================================================================== */

/* Couverture nationale : fond blanc cassé */
.couverture-figma,
.couverture-figma.ac-i-e36f6410 { background: var(--wp--preset--color--beige); }


/* Valeurs : texte | liste | photo */
.h26-valeurs__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); }
.h26-valeurs__photo { margin: 0; align-self: stretch; overflow: hidden; }
.h26-valeurs__photo img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
@media (max-width: 1024px) {
	.h26-valeurs__grille { grid-template-columns: 1fr; }
	.h26-valeurs__photo img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Titres repassés en blocs Titre */
h2.couverture-figma__title { margin: 0; }
.h26-hero__title mark.has-inline-color { color: inherit; }
.h26-hero__title mark.has-betterave-color { color: var(--wp--preset--color--betterave); }

/* Valeurs : texte + liste (sans numéros) à gauche, photo à droite */
.h26-valeurs__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.h26-valeurs__liste { margin-top: 40px; }
.h26-valeur { padding: 16px 0; }

/* Valeurs : apparition par le bas, plus marquée, une par une */
.has-anim .anim-bas.anim-cascade > * { transform: translateY(48px); transition-duration: 1s; }
.has-anim .anim-bas.anim-cascade.is-visible > * { transform: none; }

/* Valeurs : point betterave devant chaque valeur */
.h26-valeur { display: flex; align-items: center; gap: 16px; }
.h26-valeur::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--betterave);
}

/* ==========================================================================
 * Hero « texte + image » (Notre approche) : texte aligné sur le logo à gauche,
 * image sur la moitié droite, collée au bord de l'écran, grand arrondi en haut
 * à gauche uniquement (arrondi réglé dans l'éditeur : Image > Styles > Bordure).
 * ========================================================================== */
.h26-split-hero { padding: 0; margin: 0; }
.h26-split-hero__cols { margin: 0; gap: 0; min-height: min(82vh, 820px); }
.h26-split-hero__texte {
	padding: clamp(48px, 7vw, 120px) clamp(32px, 5vw, 80px) clamp(48px, 7vw, 120px) var(--accessite-gutter-left);
}
.h26-split-hero__texte .accessite-section-overtitle { margin: 0 0 24px; }
.h26-split-hero__texte .approche-hero__title { margin: 0 0 28px; }
.h26-split-hero__texte .approche-hero__paragraph { margin: 0 0 36px; max-width: 560px; }
.h26-split-hero__media { display: flex; padding: 0; }
.h26-split-hero__img { flex: 1; margin: 0; display: flex; }
.h26-split-hero__img img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
@media (max-width: 781px) {
	.h26-split-hero__texte { padding: 48px var(--accessite-gutter-right) 40px var(--accessite-gutter-left); }
	.h26-split-hero__img img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
 * Notre ADN (Nos métiers) : 4 engagements en ligne, point betterave, apparition en fondu
 * ========================================================================== */
.h26-adn .is-lead { margin-top: 20px; }
.h26-adn__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: 64px; }
.h26-adn__item { border-top: 1px solid var(--wp--preset--color--gray, #D9D4D0); padding-top: 28px; }
.h26-adn__titre { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 20px; line-height: 1.25; }
.h26-adn__titre::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--betterave); }
.h26-adn__texte { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 300; }
@media (max-width: 1024px) { .h26-adn__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .h26-adn__grille { grid-template-columns: 1fr; } }

/* Nos valeurs en mobile : la liste repasse sous le titre et l'intro */
@media (max-width: 900px) {
	.h26-valeurs__grille { grid-template-columns: 1fr; gap: 0; }
}