/* ==========================================================================
   Refonte 2026 : accueil, prestations, réalisations
   Chargé uniquement sur ces trois pages (body.sumo-refonte).
   Couleurs, polices et formes = charte existante (voir style.css :root).
   ========================================================================== */

.sumo-refonte {
	--sumo-red: var(--color-accent, #ed1c24);      /* surfaces, traits, flèches */
	--sumo-red-text: #d9171f;                       /* texte rouge sur blanc : 5,1:1 (le #ed1c24 plafonne à 4,4:1) */
	--sumo-red-hover: #c4141b;                      /* survol des boutons, déjà utilisé sur le formulaire */
	--sumo-black: #000;
	--sumo-ink: #111;
	--sumo-grey: #555;                              /* textes secondaires : 7,5:1 sur blanc */
	--sumo-line: #e3e3e3;
	--sumo-max: 1280px;
	--sumo-gap: clamp(20px, 2.4vw, 32px);
	--sumo-section: clamp(64px, 7vw, 104px);
	--sumo-header-offset: 110px;                    /* recalculé en JS si l'en-tête est collant */
	--sumo-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   Neutralise les règles globales du thème qui ne collent pas aux maquettes
   -------------------------------------------------------------------------- */
.sumo-refonte .entry-content h1,
.sumo-refonte .entry-content h2,
.sumo-refonte .entry-content h3 {
	text-transform: none;
	letter-spacing: -.01em;
	color: var(--sumo-ink);
}
.sumo-refonte .entry-content h1::before,
.sumo-refonte .entry-content h2::after { display: none; }
.sumo-refonte .entry-content p { max-width: none; }
.sumo-refonte .entry-content > * { margin-block: 0; }
.sumo-refonte .entry-content .wp-block-group,
.sumo-refonte .entry-content .wp-block-columns { margin-block: 0; }
/* Astra ajoute un rembourrage aux groupes : on garde la maîtrise des espacements */
.sumo-refonte .entry-content .wp-block-group:not(.sumo-band) { padding: 0; }
.sumo-refonte .site-content > .ast-container { display: block; }
/* Le bandeau noir du pied de page fait doublon avec le contact de chaque page */
.sumo-refonte .site-footer .footer-top,
.sumo-refonte .site-above-footer-wrap { display: none; }

/* Largeur de lecture : on garde la grille du thème mais on borne l'étalement */
.sumo-refonte .entry-content > .wp-block-group {
	max-width: var(--sumo-max);
	margin-inline: auto;
}
.sumo-refonte .entry-content > .wp-block-group + .wp-block-group { margin-top: var(--sumo-section); }
.sumo-refonte .entry-content > .wp-block-group.sumo-band + .wp-block-group,
.sumo-refonte .entry-content > .wp-block-group + .wp-block-group.sumo-band { margin-top: var(--sumo-section); }

/* Ancrages : le titre ne passe pas sous l'en-tête */
.sumo-refonte [id] { scroll-margin-top: calc(var(--sumo-header-offset) + 24px); }
@media (prefers-reduced-motion: no-preference) {
	html:has(body.sumo-refonte) { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   Typo et petits éléments de charte
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-kicker {
	font-family: var(--font-body);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sumo-ink);
	margin: 0 0 18px;
}
/* Le petit trait rouge de la charte, au-dessus des intitulés */
.sumo-refonte .sumo-kicker::before,
.sumo-refonte .sumo-barre::before {
	content: "";
	display: block;
	width: 40px;
	height: 7px;
	background: var(--sumo-red);
	margin: 0 0 18px;
	transform-origin: left center;
}
.sumo-refonte .sumo-h1 {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(3rem, 6.4vw, 6rem);
	line-height: 1;
	letter-spacing: -.025em;
	margin: 0 0 28px;
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
.sumo-refonte .sumo-h1--long { font-size: clamp(2.4rem, 5.6vw, 5.25rem); }
.sumo-refonte h2.wp-block-heading {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.05;
	margin: 0 0 20px;
}
.sumo-refonte h3.wp-block-heading {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	line-height: 1.15;
	margin: 0 0 10px;
}
.sumo-refonte .sumo-lead {
	font-size: clamp(1.15rem, 1.35vw, 1.3rem);
	line-height: 1.55;
	color: var(--sumo-ink);
	font-weight: 400;
	margin: 0 0 12px;
	max-width: 36em;
}
.sumo-refonte .sumo-sub {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sumo-grey);
	font-weight: 400;
	margin: 0 0 24px;
	max-width: 36em;
}
.sumo-refonte .sumo-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: -1px; padding: 0; border: 0;
}

/* Focus clavier : visible partout, aux couleurs du site */
.sumo-refonte .entry-content a:focus-visible,
.sumo-refonte .entry-content button:focus-visible {
	outline: 3px solid var(--sumo-red);
	outline-offset: 3px;
}
.sumo-refonte .sumo-band a:focus-visible,
.sumo-refonte .sumo-band button:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Boutons et liens fléchés
   -------------------------------------------------------------------------- */
.sumo-refonte .wp-block-buttons { gap: 14px 28px; align-items: center; }
.sumo-refonte .wp-block-button .wp-block-button__link,
.sumo-refonte .sumo-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	border-radius: 0;
	padding: 17px 30px;
	background: var(--sumo-red);
	color: #fff;
	font-family: var(--font-body);
	/* 19 px gras = « grand texte » WCAG : le blanc sur #ed1c24 (4,4:1) passe */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var(--sumo-red);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sumo-refonte .wp-block-button .wp-block-button__link::after,
.sumo-refonte .sumo-lien::after {
	content: "";
	width: 20px;
	height: 12px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--sumo-ease);
}
.sumo-refonte .wp-block-button .wp-block-button__link:hover,
.sumo-refonte .sumo-btn:hover {
	background: var(--sumo-red-hover);
	border-color: var(--sumo-red-hover);
	color: #fff;
}
.sumo-refonte .wp-block-button .wp-block-button__link:hover::after,
.sumo-refonte .sumo-lien:hover::after { transform: translateX(5px); }

/* Variante « lien souligné » du hero (bouton secondaire) */
.sumo-refonte .wp-block-button.is-style-sumo-lien .wp-block-button__link {
	background: none;
	border: 0;
	padding: 6px 0;
	color: var(--sumo-ink);
	font-size: 1.0625rem;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.sumo-refonte .wp-block-button.is-style-sumo-lien .wp-block-button__link:hover { color: var(--sumo-red-text); background: none; }

.sumo-refonte .sumo-btn--outline {
	background: transparent;
	color: var(--sumo-ink);
	border-color: var(--sumo-ink);
	font-size: 1.0625rem;
	padding: 14px 28px;
}
.sumo-refonte .sumo-btn--outline:hover { background: var(--sumo-ink); border-color: var(--sumo-ink); }
.sumo-refonte .sumo-btn--outline svg { transition: transform .25s var(--sumo-ease); }
.sumo-refonte .sumo-btn--outline:hover svg { transform: translateY(3px); }

/* Lien texte fléché rouge (« Toutes les réalisations », « Discuter de votre identité »…) */
.sumo-refonte .sumo-lien,
.sumo-refonte p.sumo-lien-p a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sumo-red-text);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
}
.sumo-refonte p.sumo-lien-p { margin: 24px 0 0; }
.sumo-refonte p.sumo-lien-p a::after {
	content: "";
	width: 20px; height: 12px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--sumo-ease);
}
.sumo-refonte p.sumo-lien-p a:hover { color: var(--sumo-red-hover); }
.sumo-refonte p.sumo-lien-p a:hover::after { transform: translateX(5px); }
.sumo-refonte .sumo-band p.sumo-lien-p a { color: var(--sumo-red); }       /* sur noir : 4,8:1 */
.sumo-refonte .sumo-band p.sumo-lien-p a:hover { color: #fff; }

/* En-tête de section : titre à gauche, lien à droite */
/* Thème classique : WordPress enveloppe le contenu des groupes dans .wp-block-group__inner-container */
.sumo-refonte .sumo-section-head > .wp-block-group__inner-container,
.sumo-refonte .sumo-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 28px;
}
.sumo-refonte .sumo-section-head > .wp-block-group__inner-container { width: 100%; margin: 0; }
.sumo-refonte .sumo-section-head .wp-block-group__inner-container > * { margin: 0 !important; }
.sumo-refonte .sumo-section-head p.sumo-lien-p { padding-bottom: 6px; }

/* --------------------------------------------------------------------------
   HERO (accueil) et composition de projets
   -------------------------------------------------------------------------- */
.sumo-refonte .entry-content .wp-block-group.sumo-hero { padding-top: clamp(24px, 4vw, 56px); }
.sumo-refonte .sumo-hero__cols {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.sumo-refonte .sumo-hero__cols > .wp-block-column { margin: 0 !important; flex: none !important; width: auto !important; }
.sumo-refonte .sumo-hero .wp-block-buttons { margin-top: 32px; }

/* Composition : 3 vrais projets (identité, web, édition) superposés.
   C'est l'image fixe par défaut ; refonte.js l'anime sur grand écran. */
.sumo-refonte .sumo-collage {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 100 / 84;
	width: 100%;
	isolation: isolate;
}
.sumo-refonte .sumo-collage::before {           /* cadre rouge de la charte */
	content: "";
	position: absolute;
	left: 13%; top: 0; width: 58%; height: 44%;
	border: 5px solid var(--sumo-red);
	z-index: 0;
	transition: opacity .6s ease, transform .9s var(--sumo-ease);
}
.sumo-refonte .sumo-collage > * { margin: 0 !important; }
.sumo-refonte .sumo-collage .sumo-layer {
	position: absolute;
	left: var(--l); top: var(--t); width: var(--w);
	transform-origin: 0 0;
	transition: transform .9s var(--sumo-ease), opacity .6s ease;
	z-index: var(--z, 1);
}
.sumo-refonte .sumo-collage .sumo-layer img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45);
}
.sumo-refonte .sumo-collage figcaption { display: none; }
.sumo-refonte .sumo-hero .sumo-layer > a { display: block; color: inherit; }
.sumo-refonte .sumo-hero .sumo-layer > a:focus-visible { outline: 3px solid var(--sumo-red); outline-offset: 4px; }
/* Hero : le nom du projet apparaît sur le visuel survolé ou mis en avant (petit trait rouge de la charte) */
.sumo-refonte .sumo-hero .sumo-collage figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	left: 0; bottom: 0;
	margin: 0;
	padding: 9px 14px 9px 0;
	background: #fff;
	color: var(--sumo-ink);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
}
.sumo-refonte .sumo-hero .sumo-collage figcaption::before { content: ""; width: 24px; height: 3px; background: var(--sumo-red); }
.sumo-refonte .sumo-hero .sumo-layer:is(:hover, :focus-within) figcaption,
.sumo-refonte .sumo-hero .sumo-collage[data-focus="identite"] .sumo-layer-cartes figcaption,
.sumo-refonte .sumo-hero .sumo-collage[data-focus="web"] .sumo-layer-web figcaption,
.sumo-refonte .sumo-hero .sumo-collage[data-focus="edition"] .sumo-layer-edition figcaption { opacity: 1; }
/* Géométrie de la composition d'ensemble (en % de la largeur) */
/* le site au fond, le packaging et la brochure devant : chevauchements limités aux coins */
.sumo-refonte .sumo-layer-web     { --l: 23%; --t: 5%;  --w: 72%; --z: 1; }   /* 3:2  → bas à 53 % */
.sumo-refonte .sumo-layer-cartes  { --l: 2%;  --t: 38%; --w: 40%; --z: 2; }   /* 1:1  → bas à 78 % */
.sumo-refonte .sumo-layer-edition { --l: 48%; --t: 47%; --w: 50%; --z: 3; }   /* 4:3  → bas à 84 % */
/* --------------------------------------------------------------------------
   Cartes de réalisations (accueil, réalisations)
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(36px, 4vw, 56px) var(--sumo-gap);
}
.sumo-refonte .sumo-cards--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sumo-refonte .sumo-cards--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sumo-refonte .sumo-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	column-gap: 16px;
	margin: 0;
}
.sumo-refonte .sumo-card[hidden] { display: none; }
.sumo-refonte .sumo-card__media {
	grid-column: 1 / -1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
	margin-bottom: 18px;
}
.sumo-refonte .sumo-cards--grille .sumo-card__media { aspect-ratio: 3 / 2; }
.sumo-refonte .sumo-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease-out;
}
.sumo-refonte .sumo-card:hover .sumo-card__img,
.sumo-refonte .sumo-card:focus-within .sumo-card__img { transform: scale(1.035); }
.sumo-refonte .sumo-card__body { min-width: 0; }
.sumo-refonte .entry-content .sumo-card__title {
	font-family: var(--font-title);
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 6px;
}
.sumo-refonte .sumo-card__title a { color: var(--sumo-ink); text-decoration: none; }
/* Toute la carte est cliquable, mais un seul lien pour le clavier et les lecteurs d'écran */
.sumo-refonte .sumo-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sumo-refonte .entry-content .sumo-card__title a:focus-visible { outline: none; }
.sumo-refonte .sumo-card:has(a:focus-visible) { outline: 3px solid var(--sumo-red); outline-offset: 6px; }
.sumo-refonte .sumo-card__mission {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sumo-grey);
	font-weight: 400;
	margin: 0;
}
.sumo-refonte .sumo-card__cat {
	font-size: .875rem;
	color: var(--sumo-grey);
	margin: 10px 0 0;
	font-weight: 400;
}
.sumo-refonte .sumo-card__arrow {
	transition: transform .25s ease-out !important;
	align-self: start;
	margin-top: 8px;
	color: var(--sumo-red);
	transition: transform .25s var(--sumo-ease);
}
.sumo-refonte .sumo-card:hover .sumo-card__arrow,
.sumo-refonte .sumo-card:focus-within .sumo-card__arrow { transform: translateX(5px); }
/* le nom du projet se souligne d'un trait rouge qui se déploie */
.sumo-refonte .sumo-card__title a {
	background: linear-gradient(var(--sumo-red), var(--sumo-red)) 0 100% / 0 2px no-repeat;
	padding-bottom: 3px;
	transition: background-size .25s ease-out;
}
.sumo-refonte .sumo-card:hover .sumo-card__title a,
.sumo-refonte .sumo-card:focus-within .sumo-card__title a { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   Ce que nous faisons : 4 tuiles noir / rouge
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-tuiles {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 !important;
	margin-top: 8px !important;
}
.sumo-refonte .sumo-tuiles > .wp-block-column {
	position: relative;
	margin: 0 !important;
	width: auto !important;
	flex: none !important;
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: 30px 28px 26px;
	background: var(--sumo-black);
	color: #fff;
}
.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even) { background: var(--sumo-red); }
.sumo-refonte .entry-content .sumo-tuiles h3 {
	color: #fff;
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	margin: 0 0 12px;
}
.sumo-refonte .sumo-tuiles h3 a { color: inherit; text-decoration: none; }
.sumo-refonte .sumo-tuiles h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sumo-refonte .entry-content .sumo-tuiles h3 a:focus-visible { outline: none; }
.sumo-refonte .sumo-tuiles > .wp-block-column:has(a:focus-visible) { outline: 3px solid var(--sumo-ink); outline-offset: 3px; z-index: 2; }
.sumo-refonte .sumo-tuiles p {
	color: #fff;
	/* 19 px gras : lisible en blanc sur le rouge de la charte (grand texte WCAG) */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}
.sumo-refonte .sumo-tuiles > .wp-block-column::before,
.sumo-refonte .sumo-tuiles > .wp-block-column::after { content: ""; position: absolute; bottom: 30px; }
.sumo-refonte .sumo-tuiles > .wp-block-column::before {                     /* trait de charte */
	left: 28px; width: 40px; height: 7px;
	background: var(--sumo-red);
	transition: width .35s var(--sumo-ease);
}
.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even)::before { background: var(--sumo-black); }
.sumo-refonte .sumo-tuiles > .wp-block-column::after {                      /* flèche */
	right: 28px; width: 22px; height: 14px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--sumo-ease);
}
.sumo-refonte .sumo-tuiles > .wp-block-column:is(:hover, :focus-within)::before { width: 72px; }
.sumo-refonte .sumo-tuiles > .wp-block-column:is(:hover, :focus-within)::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Derrière Sumotori : texte + portraits de l'équipe
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-split {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}
.sumo-refonte .sumo-split > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .sumo-equipe {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	background: #fff;
}
.sumo-refonte .sumo-equipe li { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; position: relative; }
.sumo-refonte .sumo-equipe li > a:not(.sumo-equipe__lien a) { display: block; height: 100%; color: inherit; }
.sumo-refonte .sumo-equipe__info {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 8px 10px 9px;
	background: var(--sumo-black);
	color: #fff;
	font-size: .8125rem;
	line-height: 1.25;
	opacity: 0;
	translate: 0 100%;
	transition: opacity .25s ease-out, translate .25s ease-out;
}
.sumo-refonte .sumo-equipe__info b { display: block; font-family: var(--font-title); font-size: .9375rem; }
.sumo-refonte .sumo-equipe__info span { display: block; color: #d6d6d6; }
.sumo-refonte .sumo-equipe li:is(:hover, :focus-within) .sumo-equipe__info { opacity: 1; translate: 0 0; }
.sumo-refonte .sumo-equipe li > a:focus-visible { outline: 3px solid var(--sumo-red); outline-offset: -3px; }
/* écran tactile : pas de survol, prénom et métier toujours visibles */
@media (hover: none) {
	.sumo-refonte .sumo-equipe__info { opacity: 1; translate: 0 0; background: rgba(0, 0, 0, .78); font-size: .75rem; }
	.sumo-refonte .sumo-equipe__info span { display: none; }
}
.sumo-refonte .sumo-equipe img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
	transition: transform .3s ease-out;
}
.sumo-refonte .sumo-equipe li:is(:hover, :focus-within) img { transform: scale(1.035); }
.sumo-refonte .sumo-equipe__lien { background: var(--sumo-red) !important; }
.sumo-refonte .sumo-equipe__lien a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	height: 100%;
	padding: 14px;
	color: #fff;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.1;
	text-decoration: none;
}
.sumo-refonte .sumo-equipe__lien svg { transition: transform .25s var(--sumo-ease); }
.sumo-refonte .sumo-equipe__lien a:hover svg { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Bandeau de contact (noir) et variante claire
   -------------------------------------------------------------------------- */
.sumo-refonte .entry-content > .wp-block-group.sumo-band,
.sumo-refonte .sumo-band {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding: clamp(48px, 6vw, 84px) max(calc(50vw - var(--sumo-max) / 2), 6vw);
	background: var(--sumo-black);
	color: #fff;
}
.sumo-refonte .sumo-cta {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px 48px;
}
.sumo-refonte .sumo-cta > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .entry-content .sumo-band h2,
.sumo-refonte .entry-content .sumo-band h3 { color: #fff; }
.sumo-refonte .sumo-band p { color: #fff; }
.sumo-refonte .sumo-cta h2.wp-block-heading { margin-bottom: 12px; }
.sumo-refonte .sumo-cta p { font-size: 1.1875rem; margin: 0; font-weight: 400; }
.sumo-refonte .sumo-cta--clair { border-top: 1px solid var(--sumo-line); padding-top: clamp(40px, 5vw, 64px); }
.sumo-refonte .sumo-cta--clair p { color: var(--sumo-grey); }
/* Le dernier bloc de la page touche le pied de page */
.sumo-refonte .entry-content > .sumo-band:last-child { margin-bottom: 0; }
.sumo-refonte.page .site-main > article { margin-bottom: 0; }
.sumo-refonte .site-content .ast-container > #primary { margin-bottom: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   PRESTATIONS
   -------------------------------------------------------------------------- */
.sumo-refonte .entry-content .wp-block-group.sumo-head { padding-top: clamp(24px, 4vw, 56px); }
.sumo-refonte .sumo-intro {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}
.sumo-refonte .sumo-intro > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }

/* Sommaire numéroté */
.sumo-refonte .sumo-sommaire {
	list-style: none;
	counter-reset: sumo-som;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 28px;
}
.sumo-refonte .sumo-sommaire li { counter-increment: sumo-som; margin: 0; position: relative; }
.sumo-refonte .sumo-sommaire a {
	display: block;
	padding: 18px 0 14px;
	border-bottom: 1px solid var(--sumo-line);
	color: var(--sumo-ink);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
	position: relative;
}
.sumo-refonte .sumo-sommaire a::before {   /* le petit trait rouge à la place du numéro */
	content: "";
	display: block;
	width: 24px; height: 4px;
	background: var(--sumo-red);
	margin-bottom: 12px;
	transition: width .3s cubic-bezier(.2, .8, .2, 1);
}
.sumo-refonte .sumo-sommaire a:hover::before,
.sumo-refonte .sumo-sommaire a:focus-visible::before { width: 40px; }
.sumo-refonte .sumo-sommaire a::after {
	content: "";
	position: absolute; left: 0; bottom: -1px;
	width: 100%; height: 3px;
	background: var(--sumo-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--sumo-ease);
}
.sumo-refonte .sumo-sommaire a:hover::after,
.sumo-refonte .sumo-sommaire a:focus-visible::after { transform: none; }

/* Familles 01 à 03 : texte / image en alternance */
.sumo-refonte .sumo-famille {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}
.sumo-refonte .sumo-famille > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
@media (min-width: 900px) {
	.sumo-refonte .sumo-famille.is-inverse > .wp-block-column:first-child { order: 2; }
}
.sumo-refonte .sumo-num {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sumo-ink);
	margin: 0 0 6px;
}
.sumo-refonte .sumo-num::before {
	content: "";
	display: block;
	width: 40px; height: 7px;
	background: var(--sumo-red);
	margin-bottom: 18px;
	transform-origin: left center;
}
.sumo-refonte .sumo-famille h2.wp-block-heading { font-size: clamp(1.9rem, 3vw, 2.75rem); margin-bottom: 18px; }
.sumo-refonte .sumo-famille p.sumo-sub { margin-bottom: 20px; }
.sumo-refonte ul.sumo-liste {
	list-style: none;
	margin: 0 0 20px !important;
	padding: 0 !important;
}
.sumo-refonte ul.sumo-liste li {
	position: relative;
	padding-left: 32px;
	margin: 0 0 8px;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sumo-ink);
	font-weight: 400;
}
.sumo-refonte ul.sumo-liste li::before {
	content: "";
	position: absolute;
	left: 0; top: .68em;
	width: 18px; height: 4px;
	background: var(--sumo-red);
}
/* Prestations : la liste mène directement aux fiches détaillées */
.sumo-refonte ul.sumo-liste--liens li { font-weight: 700; }
.sumo-refonte ul.sumo-liste--liens a { color: var(--sumo-ink); text-decoration: none; }
/* flèche collée au dernier mot (espace insécable), même quand le lien passe sur deux lignes */
.sumo-refonte ul.sumo-liste--liens a::after { content: "\00a0\2192"; color: var(--sumo-red-text); }
.sumo-refonte ul.sumo-liste--liens a:hover { color: var(--sumo-red-text); }
.sumo-refonte ul.sumo-liste--liens a:focus-visible { outline: 3px solid var(--sumo-red); outline-offset: 3px; }
.sumo-refonte .sumo-band ul.sumo-liste--liens li { font-size: 1rem; }
.sumo-refonte .sumo-band ul.sumo-liste--liens a { color: #fff; }
.sumo-refonte .sumo-band ul.sumo-liste--liens a::after { color: var(--sumo-red); }
.sumo-refonte .sumo-band ul.sumo-liste--liens a:hover { color: var(--sumo-red); }
.sumo-refonte .sumo-accomp-items ul.sumo-liste--liens li { padding-left: 0; }
.sumo-refonte .sumo-accomp-items ul.sumo-liste--liens li::before { display: none; }
/* Pages détaillées existantes : liens discrets sous la liste */
.sumo-refonte .sumo-details {
	font-size: .9375rem;
	color: var(--sumo-grey);
	line-height: 1.7;
	margin: 0 0 4px;
	font-weight: 400;
}
.sumo-refonte .sumo-details a {
	color: var(--sumo-ink);
	text-decoration: underline;
	text-decoration-color: var(--sumo-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.sumo-refonte .sumo-details a:hover { color: var(--sumo-red-text); }
.sumo-refonte .sumo-band .sumo-details { color: #bdbdbd; }
.sumo-refonte .sumo-band .sumo-details a { color: #fff; }

/* Réalisation associée : l'image et sa légende ne font qu'un lien */
.sumo-refonte .sumo-projet { position: relative; margin: 0 !important; }
.sumo-refonte .sumo-projet img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	transition: transform .7s var(--sumo-ease);
}
.sumo-refonte .sumo-projet { overflow: hidden; }
.sumo-refonte .sumo-projet > a, .sumo-refonte .sumo-projet > img { display: block; overflow: hidden; }
.sumo-refonte .sumo-projet:hover img { transform: scale(1.03); }
.sumo-refonte .sumo-projet figcaption {
	margin: 12px 0 0;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--sumo-ink);
}
.sumo-refonte .sumo-projet figcaption a { color: inherit; text-decoration: none; }
.sumo-refonte .sumo-projet figcaption a::after { content: ""; position: absolute; inset: 0; }
.sumo-refonte .sumo-projet figcaption a:focus-visible { outline: none; }
.sumo-refonte .sumo-projet:has(a:focus-visible) { outline: 3px solid var(--sumo-red); outline-offset: 4px; }

/* 04 Accompagnement : bandeau noir */
.sumo-refonte .sumo-accomp {
	display: grid !important;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 64px);
}
.sumo-refonte .sumo-accomp > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .sumo-band .sumo-num { color: #fff; }
.sumo-refonte .sumo-band .sumo-lead { color: #fff; }
.sumo-refonte .sumo-band .sumo-sub { color: #cfcfcf; }
.sumo-refonte .sumo-band .sumo-sub a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--sumo-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.sumo-refonte .sumo-band .sumo-sub a:hover { color: var(--sumo-red); }
.sumo-refonte .sumo-accomp-items {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 !important;
}
.sumo-refonte .sumo-accomp-items > .wp-block-column {
	margin: 0 !important;
	width: auto !important;
	flex: none !important;
	padding: 4px 24px 0;
	border-left: 1px solid #3a3a3a;
}
.sumo-refonte .entry-content .sumo-accomp-items h3 { color: #fff; font-size: 1.3rem; }
.sumo-refonte .entry-content .sumo-accomp-items h3::before {
	content: "";
	display: block;
	width: 28px; height: 5px;
	background: var(--sumo-red);
	margin-bottom: 16px;
}
.sumo-refonte .sumo-accomp-items p { color: #d6d6d6; font-size: 1rem; line-height: 1.55; margin: 0 0 12px; font-weight: 400; }

/* --------------------------------------------------------------------------
   RÉALISATIONS
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-head-real {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 16px 48px;
}
.sumo-refonte .sumo-head-real > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .sumo-head-real .sumo-sub { margin-bottom: 0; }
.sumo-refonte .sumo-head-real p.sumo-lien-p { margin: 0 0 4px; }

.sumo-refonte .sumo-une { position: relative; }
.sumo-refonte .sumo-une__media {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: #111;
}
.sumo-refonte .sumo-une__img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s var(--sumo-ease);
}
.sumo-refonte .sumo-une:hover .sumo-une__img { transform: scale(1.025); }
.sumo-refonte .sumo-une__badge {
	position: absolute;
	left: 0; top: 0;   /* en haut : le crédit photo des visuels est souvent en bas à gauche */
	background: var(--sumo-red);
	color: #fff;
	font-weight: 700;
	font-size: 1.1875rem;
	padding: 10px 18px;
}
.sumo-refonte .sumo-une__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 32px;
	padding-top: 20px;
}
.sumo-refonte .entry-content .sumo-une__title {
	font-family: var(--font-title);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.05;
	margin: 0 0 6px;
}
.sumo-refonte .sumo-une__mission { font-size: 1.1875rem; color: var(--sumo-grey); margin: 0; font-weight: 400; }
.sumo-refonte .sumo-une__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sumo-red-text);
	font-weight: 700;
	font-size: 1.1875rem;
	text-decoration: none;
	padding-bottom: 6px;
}
.sumo-refonte .sumo-une__link::after { content: ""; position: absolute; inset: 0; }
.sumo-refonte .sumo-une__link svg { transition: transform .25s var(--sumo-ease); }
.sumo-refonte .sumo-une:hover .sumo-une__link svg { transform: translateX(6px); }
.sumo-refonte .entry-content .sumo-une__link:focus-visible { outline: none; }
.sumo-refonte .sumo-une:has(a:focus-visible) { outline: 3px solid var(--sumo-red); outline-offset: 6px; }

/* Filtres textuels */
.sumo-refonte .sumo-filtres { border-bottom: 1px solid var(--sumo-line); margin: 0 0 clamp(28px, 3vw, 40px); }
.sumo-refonte .sumo-filtres ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(18px, 3vw, 40px);
}
.sumo-refonte .sumo-filtres li { margin: 0; }
.sumo-refonte .sumo-filtres a {
	position: relative;
	display: block;
	padding: 12px 2px 14px;
	color: var(--sumo-grey);
	font-size: 1.0625rem;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}
.sumo-refonte .sumo-filtres a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 3px;
	background: var(--sumo-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--sumo-ease);
}
.sumo-refonte .sumo-filtres a:hover { color: var(--sumo-ink); }
.sumo-refonte .sumo-filtres a[aria-current="true"] { color: var(--sumo-ink); font-weight: 700; }
.sumo-refonte .sumo-filtres a[aria-current="true"]::after { transform: none; }
.sumo-refonte .sumo-filtres a:focus-visible { outline-offset: -3px; }

.sumo-refonte .sumo-vide { font-size: 1.125rem; color: var(--sumo-grey); padding: 24px 0; margin: 0; }
.sumo-refonte .sumo-plus-wrap { text-align: center; margin: clamp(40px, 4vw, 56px) 0 0; }
.sumo-refonte .sumo-plus-wrap:not(:has(button:not([hidden]))) { display: none; }
.sumo-refonte .sumo-cards--grille.is-swapping { opacity: 0; transform: translateY(6px); }
.sumo-refonte .sumo-cards--grille { transition: opacity .18s ease, transform .18s ease; }

/* --------------------------------------------------------------------------
   Apparitions discrètes (classes posées par refonte.js uniquement)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.sumo-js .sumo-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .7s ease, transform .8s var(--sumo-ease);
		transition-delay: var(--sumo-delay, 0s);
	}
	.sumo-js .sumo-reveal.is-in { opacity: 1; transform: none; }
	.sumo-js .sumo-reveal .sumo-kicker::before,
	.sumo-js .sumo-reveal .sumo-barre::before,
	.sumo-js .sumo-reveal .sumo-num::before {
		transform: scaleX(0);
		transition: transform .6s var(--sumo-ease) .2s;
	}
	.sumo-js .sumo-reveal.is-in .sumo-kicker::before,
	.sumo-js .sumo-reveal.is-in .sumo-barre::before,
	.sumo-js .sumo-reveal.is-in .sumo-num::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sumo-refonte *,
	.sumo-refonte *::before,
	.sumo-refonte *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.sumo-refonte .sumo-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* en 2×2, on garde un damier noir / rouge */
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even) { background: var(--sumo-black); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even)::before { background: var(--sumo-red); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(2),
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(3) { background: var(--sumo-red); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(2)::before,
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(3)::before { background: var(--sumo-black); }
	.sumo-refonte .sumo-accomp { grid-template-columns: 1fr; }
	.sumo-refonte .sumo-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.sumo-refonte .sumo-hero__cols,
	.sumo-refonte .sumo-intro,
	.sumo-refonte .sumo-split,
	.sumo-refonte .sumo-famille { grid-template-columns: 1fr; }
	.sumo-refonte .sumo-hero__visuel { max-width: 620px; }
}
@media (max-width: 781px) {
	.sumo-refonte .sumo-cards--grille,
	.sumo-refonte .sumo-cards--trois { grid-template-columns: 1fr; }
	.sumo-refonte .sumo-cta,
	.sumo-refonte .sumo-head-real { grid-template-columns: 1fr; }
	.sumo-refonte .sumo-accomp-items { grid-template-columns: 1fr; gap: 28px !important; }
	.sumo-refonte .sumo-accomp-items > .wp-block-column { border-left: 0; padding: 0; }
	.sumo-refonte .sumo-equipe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sumo-refonte .sumo-une__media { aspect-ratio: 4 / 3; }
	.sumo-refonte .sumo-filtres { margin-inline: -6vw; padding-inline: 6vw; overflow-x: auto; scrollbar-width: none; }
	.sumo-refonte .sumo-filtres ul { flex-wrap: nowrap; }
	.sumo-refonte .sumo-filtres::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
	.sumo-refonte .sumo-tuiles { grid-template-columns: 1fr; }
	.sumo-refonte .sumo-tuiles > .wp-block-column { min-height: 200px; }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(n) { background: var(--sumo-black); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(n)::before { background: var(--sumo-red); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even) { background: var(--sumo-red); }
	.sumo-refonte .sumo-tuiles > .wp-block-column:nth-child(even)::before { background: var(--sumo-black); }
	.sumo-refonte .sumo-sommaire { grid-template-columns: 1fr 1fr; gap: 0 18px; }
	.sumo-refonte .sumo-sommaire a { font-size: 1.0625rem; }
	.sumo-refonte .sumo-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sumo-refonte .sumo-equipe .sumo-equipe__lien { display: none; }   /* le lien texte « Découvrir le dojo » est juste au-dessus */
	.sumo-refonte .wp-block-button .wp-block-button__link { width: 100%; justify-content: space-between; text-align: left; }
	.sumo-refonte .wp-block-button.is-style-sumo-lien .wp-block-button__link { width: auto; }
	.sumo-refonte .wp-block-buttons > .wp-block-button { width: 100%; }
	.sumo-refonte .wp-block-buttons > .wp-block-button.is-style-sumo-lien { width: auto; }
}

/* Compléments de mise en page */
.sumo-refonte .sumo-head .sumo-sommaire { margin-top: clamp(48px, 6vw, 88px) !important; }
.sumo-refonte .sumo-head .sumo-une { margin-top: clamp(36px, 4vw, 56px); }
.sumo-refonte .entry-content h2.sumo-h2-petit {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 8px;
}
.sumo-refonte .sumo-h2-petit::before { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Le sumo de la charte, posé sur le noir (bandeau contact, panneau du formulaire)
   Ajouter la classe « sumo-mascotte » à un groupe noir dans l'éditeur.
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-mascotte { position: relative; overflow: visible; }
.sumo-refonte .sumo-mascotte::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 1px);
	left: 58%;
	width: var(--sumo-mascotte-w, 180px);
	aspect-ratio: 630 / 453;
	background: url("../images/sumo.svg") center bottom / contain no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
}
/* plus spécifique que les règles d'enchaînement des sections plus haut */
/* écart resserré : le sumo occupe lui-même l'espace au-dessus du bandeau (180 px de large = 129 px de haut) */
.sumo-refonte .entry-content > .wp-block-group + .wp-block-group.sumo-mascotte { margin-top: calc(clamp(28px, 3vw, 44px) + 129px); }
@media (prefers-reduced-motion: no-preference) {
	/* le sumo se lève quand le bandeau apparaît */
}
@media (max-width: 781px) {
	.sumo-refonte .sumo-mascotte::before { width: 140px; left: 72%; }
	.sumo-refonte .entry-content > .wp-block-group + .wp-block-group.sumo-mascotte { margin-top: calc(28px + 101px); }
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.sumo-refonte .sumo-contact {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.sumo-refonte .sumo-contact > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .sumo-contact .sumo-sub { margin-bottom: 32px; }
.sumo-refonte .sumo-contact .sumo-details a { font-weight: 700; }
.sumo-refonte .entry-content .wp-block-group.sumo-form-panel {
	background: var(--sumo-black);
	color: #fff;
	padding: clamp(28px, 3.5vw, 48px);
	margin-top: 129px;
}
.sumo-refonte .sumo-form-panel.sumo-mascotte::before { left: 50%; }
.sumo-refonte .sumo-form-panel .gform_wrapper { margin: 0; }
.sumo-refonte .sumo-form-panel .gform_wrapper.gravity-theme .gform_button { font-size: 1.1875rem; } /* blanc sur rouge : grand texte */
.sumo-refonte .sumo-form-panel .gfield_required { color: #ff6b70; } /* astérisque lisible sur noir */
.sumo-refonte .sumo-form-panel .gform_confirmation_message { color: #fff; font-size: 1.1875rem; }
.sumo-refonte .sumo-contact-fin { margin-bottom: var(--sumo-section) !important; }
@media (min-width: 901px) {
	/* le texte reste à hauteur du formulaire, sous le sumo */
	.sumo-refonte .sumo-contact > .wp-block-column:first-child { padding-top: 129px; }
}
@media (max-width: 900px) {
	.sumo-refonte .sumo-contact { grid-template-columns: 1fr; }
	.sumo-refonte .entry-content .wp-block-group.sumo-form-panel { margin-top: 110px; }
}
@media (max-width: 781px) {
	.sumo-refonte .entry-content .wp-block-group.sumo-form-panel { margin-top: 101px; }
}

/* Liste « Votre message concerne » : l'invite « Choisissez un sujet » en gris, comme les autres champs vides */
.sumo-refonte .gform_wrapper.gravity-theme select:has(option.gf_placeholder:checked) { color: #767676; }

/* Légende « * champs obligatoires » : le thème masquait tout l'en-tête du formulaire, on la rend visible */
.sumo-refonte .sumo-form-panel .gform_heading {
	position: static;
	width: auto; height: auto;
	margin: 0 0 22px;
	clip-path: none; clip: auto;
	overflow: visible;
	white-space: normal;
}
.sumo-refonte .sumo-form-panel .gform_required_legend { color: #d6d6d6; font-size: .9375rem; margin: 0; }
.sumo-refonte .sumo-form-panel .gform_required_legend .gfield_required { color: #ff6b70; }
.sumo-refonte .gform_wrapper.gravity-theme select option { color: #111; }

/* ==========================================================================
   Motion v2 : chorégraphie du hero, listes en cascade, sumo vivant
   Tout est sous prefers-reduced-motion: no-preference ; sans JS, rien ne bouge.
   ========================================================================== */

/* ==========================================================================
   Motion v3 : hero à trois plans, portraits à l'encre, fil rouge
   Grand écran + pas de réduction des animations. Ailleurs : statique.
   ========================================================================== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

	/* --- Hero : entrée unique (~800 ms) en CSS pur ------------------------
	   le cadre rouge se dessine, puis les trois visuels prennent leur place */
	.sumo-hero .sumo-collage::before { animation: sumo-cadre .45s cubic-bezier(.65, 0, .35, 1) .05s backwards; }
	.sumo-hero .sumo-layer { animation: sumo-plan .5s cubic-bezier(.2, .7, .2, 1) backwards; }
	.sumo-hero .sumo-layer-cartes  { animation-delay: .2s; }
	.sumo-hero .sumo-layer-web     { animation-delay: .28s; }
	.sumo-hero .sumo-layer-edition { animation-delay: .36s; }
	@keyframes sumo-cadre { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
	@keyframes sumo-plan  { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
	/* le visuel web est l'élément principal (LCP) : il glisse sans fondu, pour être compté dès le premier affichage */
	.sumo-hero .sumo-layer-web { animation-name: sumo-plan-glisse; }
	@keyframes sumo-plan-glisse { from { translate: 0 14px; } to { translate: 0 0; } }

	/* --- Hero : un plan mis en avant, les deux autres reculent ------------ */
	.sumo-hero .sumo-collage .sumo-layer {
		transform-origin: 50% 50%;
		transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .6s cubic-bezier(.4, 0, .2, 1), filter .6s cubic-bezier(.4, 0, .2, 1);
	}
	.sumo-hero .sumo-collage .sumo-layer img { transition: box-shadow .6s cubic-bezier(.4, 0, .2, 1); }
	.sumo-hero .sumo-collage[data-focus] .sumo-layer { transform: scale(.96); filter: grayscale(1) contrast(.92) brightness(1.04); }   /* en retrait : noir et blanc, pas de voile */
	.sumo-hero .sumo-collage[data-focus="identite"] .sumo-layer-cartes,
	.sumo-hero .sumo-collage[data-focus="web"] .sumo-layer-web,
	.sumo-hero .sumo-collage[data-focus="edition"] .sumo-layer-edition {
		transform: scale(1.07);
		opacity: 1;
		filter: none;
		z-index: 6;
	}
	.sumo-hero .sumo-collage[data-focus="identite"] .sumo-layer-cartes img,
	.sumo-hero .sumo-collage[data-focus="web"] .sumo-layer-web img,
	.sumo-hero .sumo-collage[data-focus="edition"] .sumo-layer-edition img { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); }
	.sumo-hero .sumo-collage::before { transition: opacity .6s cubic-bezier(.4, 0, .2, 1); }

	.sumo-hero .sumo-collage figcaption { translate: 0 6px; transition: opacity .35s ease, translate .45s cubic-bezier(.2, .7, .2, 1); }
	.sumo-hero .sumo-layer:is(:hover, :focus-within) figcaption,
	.sumo-hero .sumo-collage[data-focus="identite"] .sumo-layer-cartes figcaption,
	.sumo-hero .sumo-collage[data-focus="web"] .sumo-layer-web figcaption,
	.sumo-hero .sumo-collage[data-focus="edition"] .sumo-layer-edition figcaption { translate: 0 0; transition-delay: .12s; }
	.sumo-hero .sumo-mot { cursor: default; }

	/* le mot correspondant du titre passe en rouge (grand texte : 4,4:1 suffit) */
	.sumo-hero .sumo-mot { transition: color .5s cubic-bezier(.4, 0, .2, 1); }
	.sumo-hero .sumo-mot.is-on { color: var(--sumo-red); }

	/* --- Fil rouge : remontée de 14 px max (déjà sur les sections) ------- */
	.sumo-js .sumo-reveal .sumo-stagger > * {
		opacity: 0;
		translate: 0 14px;
		transition: opacity .5s ease-out, translate .6s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--i, 0) * 60ms + .1s);
	}
	.sumo-js .sumo-reveal.is-in .sumo-stagger > * { opacity: 1; translate: 0 0; }

	/* --- Portraits : l'encre se répand sur le papier, puis les sceaux rouges */
	.sumo-js .sumo-reveal .sumo-equipe.sumo-stagger > li { translate: 0 0; transition: opacity .3s ease-out; transition-delay: calc(var(--i, 0) * 90ms); }
	.sumo-js .sumo-reveal .sumo-equipe.sumo-stagger > li img {
		-webkit-mask: url("../images/encre.png") center / 0% 0% no-repeat;
		        mask: url("../images/encre.png") center / 0% 0% no-repeat;
		filter: grayscale(1);
		transition:
			-webkit-mask-size 1.1s cubic-bezier(.3, .6, .2, 1) calc(var(--i, 0) * 90ms + .15s),
			mask-size 1.1s cubic-bezier(.3, .6, .2, 1) calc(var(--i, 0) * 90ms + .15s),
			filter .45s ease-out calc(var(--i, 0) * 90ms + 1.1s),
			transform .3s ease-out;
	}
	.sumo-js .sumo-reveal.is-in .sumo-equipe.sumo-stagger > li img {
		-webkit-mask-size: 340% 340%;
		        mask-size: 340% 340%;
		filter: none;
	}
	.sumo-js .sumo-reveal .sumo-equipe.sumo-stagger > .sumo-equipe__lien { translate: 0 14px; transition: opacity .4s ease-out, translate .5s ease-out; transition-delay: 1.3s; }
	.sumo-js .sumo-reveal.is-in .sumo-equipe.sumo-stagger > .sumo-equipe__lien { translate: 0 0; }
}

/* Prestations : le sommaire suit le hero (repris de l'accueil) dans sa propre section */
.sumo-refonte .entry-content .wp-block-group.sumo-head--sommaire { padding-top: 0; }
.sumo-refonte .sumo-head--sommaire .sumo-sommaire { margin-top: clamp(8px, 2vw, 24px) !important; }