/**
 * Méthode ACCESS (page Notre approche) : le mot ACCESS se construit au fil du scroll.
 * Ces règles ne s'appliquent que lorsque le script methode-access.js a activé l'effet
 * (classe .acc-scroll, desktop ≥ 1024px, animations autorisées). Sinon, mise en page actuelle.
 * Couleurs : marine et betterave de la palette (theme.json).
 */

.acc-scroll .acc-scene {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(40px, 6vw, 120px);
	width: 100%;
	align-items: start;
}

/* --- Mot ACCESS fixe à l'écran --- */
.acc-mot {
	position: sticky;
	top: calc(50vh - 0.6em);
	display: flex;
	font-family: var(--wp--preset--font-family--accroche);
	font-size: clamp(80px, 9vw, 168px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
	user-select: none;
}
.acc-mot__lettre {
	opacity: 0.12;
	transition: color 0.6s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.acc-mot__lettre.is-allumee {
	opacity: 1;
	color: var(--wp--preset--color--betterave);
}
.acc-mot__lettre.is-active { transform: translateY(-0.06em); }
.acc-scroll.is-complete .acc-mot__lettre { transform: none; }

/* --- Étapes : une par « écran », celle en cours au premier plan --- */
.acc-scroll .acc-etapes {
	position: relative;
	width: 100%;
	padding-left: 40px;
}
.acc-scroll .methode-figma__row {
	min-height: 62vh;
	display: flex;
	align-items: center;
	border-bottom: 0;
	opacity: 0.18;
	transition: opacity 0.7s ease;
}
.acc-scroll .methode-figma__row:first-of-type { min-height: 50vh; }
.acc-scroll .methode-figma__row.is-active,
.acc-scroll .methode-figma__row.is-passee { opacity: 1; }
.acc-scroll .methode-figma__row.is-passee { opacity: 0.45; }

/* Lettre de l'étape (déjà présente dans le bloc) : betterave quand l'étape est atteinte */
.acc-scroll .methode-figma__row > :first-child {
	color: var(--wp--preset--color--navy);
	transition: color 0.6s ease;
}
.acc-scroll .methode-figma__row.is-active > :first-child,
.acc-scroll .methode-figma__row.is-passee > :first-child { color: var(--wp--preset--color--betterave); }

/* Description : léger décalage à l'apparition */
.acc-scroll .methode-figma__row > :last-child > :last-child {
	transform: translateY(12px);
	transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.acc-scroll .methode-figma__row.is-active > :last-child > :last-child,
.acc-scroll .methode-figma__row.is-passee > :last-child > :last-child { transform: none; }

/* --- Ligne de progression --- */
.acc-ligne {
	position: absolute;
	left: 0;
	top: 25vh;
	bottom: 31vh;
	width: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--navy) 12%, transparent);
}
.acc-ligne__remplissage {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--betterave);
	transform-origin: top;
	transform: scaleY(0);
}

/* Le conteneur des étapes avait une largeur fixe (1355px) : on le laisse occuper sa colonne. */
.acc-scroll .acc-etapes.acc-etapes { width: 100%; max-width: none; }

/* La section coupait son contenu (overflow: hidden) et le bloc avait une hauteur fixe :
 * le mot ACCESS ne pouvait pas rester fixe à l'écran. « clip » coupe sans bloquer le sticky. */
.section:has(.acc-scroll) { overflow: clip; }
.approche-methode-figma.acc-scroll { height: auto; }

/* Étape : lettre + mot sur une ligne, description dessous (plus lisible dans la colonne) */
.acc-scroll .methode-figma__row { min-height: 50vh; align-items: center; gap: 4px; }
.acc-scroll .methode-figma__row > :last-child {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.acc-scroll .methode-figma__word { width: auto; font-size: clamp(24px, 2.2vw, 34px); }
.acc-scroll .methode-figma__row > :last-child > :last-child { max-width: 460px; font-size: 18px; line-height: 1.5; }
.acc-scroll .methode-figma__row > :last-child > :last-child br:first-child { display: none; }
.acc-scroll .methode-figma__row > :first-child { font-size: clamp(40px, 3.4vw, 56px); width: auto; min-width: 49px; align-self: flex-start; }

/* Lettre collée au mot, alignée sur sa ligne de base (on lit « CADRER ») */
.acc-scroll .methode-figma__row { align-items: baseline; padding-top: 20vh; padding-bottom: 0; padding-left: 0; }
.acc-scroll .methode-figma__row > :first-child { align-self: baseline; width: auto; min-width: 0; text-align: right; margin: 0; text-box-trim: none; }
.acc-scroll .methode-figma__row > :last-child { padding-left: 0; margin-left: 0; }
.acc-scroll .methode-figma__word { text-box-trim: none; }

/* Alignement fin lettre / mot (les groupes d'origine ont des réglages hérités de la maquette) */
.acc-scroll .methode-figma__row.methode-figma__row { align-items: flex-start; }
.acc-scroll .methode-figma__row > :last-child.wp-block-group { padding: 0; margin: 0; align-items: flex-start; justify-content: flex-start; }
.acc-scroll .methode-figma__row > :first-child { line-height: 1; margin-top: calc(-0.18em); }
.acc-scroll .methode-figma__word { line-height: 1.2; margin: 0; padding: 0; }

/* L'ancien CSS de la section est renforcé (:not(#_)) : on applique le même renfort ici. */
.acc-scroll .methode-figma__row:not(#_) { align-items: flex-start; }
.acc-scroll .methode-figma__row > :last-child:not(#_) { flex-direction: column; align-items: flex-start; gap: 14px; flex-wrap: nowrap; }
.acc-scroll .methode-figma__row > :last-child > :not(#_) { margin: 0; padding: 0; width: auto; }

/* ==========================================================================
 * Équipe qui pilote (page Notre approche)
 * ========================================================================== */
/* Texte d'intro sous le titre, aligné à gauche (même harmonie que les autres sections) */
.approche-equipe__header.section__header--split:not(#_) { display: block; }
.approche-equipe__header .approche-equipe__intro:not(#_) {
	width: auto;
	min-height: 0;
	margin: 28px 0 0;
	justify-content: flex-start;
}
.approche-equipe__header .approche-equipe__paragraph:not(#_) { max-width: 640px; text-align: left; }

/* Portraits : se retournent comme une carte au scroll, un par un.
 * Face cachée betterave, puis la photo apparaît à mi-rotation. */
.has-anim .anim-flip .equipe-card__photo {
	transform: perspective(600px) rotateY(180deg);
	background: var(--wp--preset--color--betterave);
	border-color: var(--wp--preset--color--betterave);
}
.has-anim .anim-flip .equipe-card__photo img { opacity: 0; }
.has-anim .anim-flip.is-visible .equipe-card__photo {
	animation: acc-flip 0.9s cubic-bezier(.3,.7,.2,1) var(--anim-delay, 0ms) both;
}
.has-anim .anim-flip.is-visible .equipe-card__photo img {
	animation: acc-flip-photo 0.9s linear var(--anim-delay, 0ms) both;
}
/* Nom et fonction : fondu léger juste après le retournement */
.has-anim .anim-flip .equipe-card > :not(.equipe-card__photo) { opacity: 0; transition: opacity 0.6s ease calc(var(--anim-delay, 0ms) + 0.5s); }
.has-anim .anim-flip.is-visible .equipe-card > :not(.equipe-card__photo) { opacity: 1; }

@keyframes acc-flip {
	0%   { transform: perspective(600px) rotateY(180deg); background: var(--wp--preset--color--betterave); border-color: var(--wp--preset--color--betterave); }
	49%  { background: var(--wp--preset--color--betterave); }
	50%  { background: transparent; border-color: var(--wp--preset--color--betterave); }
	100% { transform: perspective(600px) rotateY(0deg); background: transparent; }
}
@keyframes acc-flip-photo {
	0%, 49.9% { opacity: 0; }
	50%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.has-anim .anim-flip .equipe-card__photo,
	.has-anim .anim-flip .equipe-card__photo img,
	.has-anim .anim-flip .equipe-card > * { animation: none; transform: none; opacity: 1; transition: none; }
}

/* ==========================================================================
 * Méthode ACCESS : mise en page de base (mobile, ou sans animation)
 * Structure en blocs natifs : .methode-figma__row > lettre + (mot, description)
 * ========================================================================== */
.approche-methode__header { margin-bottom: 56px; }
.approche-methode__header .approche-methode__sub { text-align: left; max-width: 560px; margin-top: 16px; }
.methode-figma__liste { display: flex; flex-direction: column; }
.methode-figma__row { display: flex; align-items: baseline; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--wp--preset--color--gray, #D9D4D0); margin: 0; }
.methode-figma__lettre {
	margin: 0;
	font-family: var(--wp--preset--font-family--accroche);
	font-size: clamp(40px, 3.4vw, 56px);
	line-height: 1;
	color: var(--wp--preset--color--betterave);
}
.methode-figma__corps { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.methode-figma__word { margin: 0; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; line-height: 1.2; }
.methode-figma__desc { margin: 0; font-size: 17px; line-height: 1.55; max-width: 460px; }
.acc-scroll .methode-figma__row { border-bottom: 0; }

/* ==========================================================================
 * Mot du DG : traitement éditorial, sans photo
 * ========================================================================== */
.h26-dg .is-overtitle { margin-bottom: 40px; }
.h26-dg__citation { margin: 0; max-width: 1100px; }
.h26-dg__citation p { margin: 0; font-size: inherit; line-height: inherit; }
.h26-dg__citation cite {
	display: block;
	margin-top: 36px;
	font-family: var(--wp--preset--font-family--accessite);
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Équipe : autant de colonnes que de membres sur une ligne (desktop) */
@media (min-width: 1101px) {
	.section--approche-equipe .equipe-grid:not(#_) { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
/* Citation du DG : grande mais pas écrasante */
.h26-dg .h26-dg__citation.is-citation { font-size: clamp(26px, 3vw, 46px); line-height: 1.2; }

/* ==========================================================================
 * Mot du DG : traitement éditorial (sans photo)
 * Colonne gauche : sur-titre + grand guillemet betterave.
 * Colonne droite : la citation en grand, une expression clé en betterave,
 * puis une signature séparée par un filet.
 * ========================================================================== */
.h26-dg2__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.h26-dg2__gauche .is-overtitle { margin: 0; }
.h26-dg2__guillemet {
	margin: .35em 0 0; /* le glyphe dépasse vers le haut : on le décale pour ne pas toucher le sur-titre */
	font-family: var(--wp--preset--font-family--accroche);
	font-size: clamp(140px, 16vw, 260px);
	line-height: .7;
	color: var(--wp--preset--color--betterave);
}
.h26-dg2__citation {
	margin: 0;
	max-width: 900px;
	font-size: clamp(26px, 2.6vw, 42px);
	line-height: 1.32;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
}
.h26-dg2__signature {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 20%, transparent);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 20px;
	max-width: 900px;
}
.h26-dg2__nom { margin: 0; font-family: var(--wp--preset--font-family--accroche); font-size: clamp(24px, 2vw, 32px); line-height: 1.1; }
.h26-dg2__fonction { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--wp--preset--color--gray-700, #59627F); }
@media (max-width: 900px) {
	.h26-dg2__grille { grid-template-columns: 1fr; gap: 8px; }
	.h26-dg2__guillemet { margin-top: 16px; font-size: 120px; }
}
/* .h26 p remet les marges à 0 : on précise pour garder l'espace sous le sur-titre */
.h26-dg2 p.h26-dg2__guillemet { margin-top: .4em; }
.h26-dg2 .h26-dg2__signature { margin-top: 48px; }

/* Mobile / tablette (classe .acc-mobile posée par methode-access.js) :
 * chaque étape s'allume à son arrivée, comme en desktop mais sans mot fixe. */
.acc-mobile .methode-figma__row > :first-child { transition: color .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); transform: scale(.85); transform-origin: left center; }
.acc-mobile .methode-figma__row > :last-child { opacity: 0; transform: translateY(28px); transition: opacity .8s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s; }
.acc-mobile .methode-figma__row.is-active > :first-child { color: var(--wp--preset--color--betterave); transform: none; }
.acc-mobile .methode-figma__row.is-active > :last-child { opacity: 1; transform: none; }