/* Copie de marketing-home.css (thème enfant d’Arthur, branche migration/sortie-divi), chargée par l’extension yutec-pages sur les pages de ce type. */
/* GENERATED by tools/build-marketing-css.cjs from main.css for page-templates/home.php. Do not edit. */
/* ==========================================================================
   Yutec — styles du thème enfant
   Chargé sur tout le site, mais ne stylise que NOS classes (.yutec-*).

   Toutes les valeurs (typo, couleurs, espacements) sont MESURÉES sur le rendu
   d'origine yutec.fr (objectif pixel-perfect), puis documentées au plus près de
   chaque règle :
   - Pages légales (chrome maison) : voir bloc « Contenu (prose) » plus bas
     (contenu 955px à x≈449, H1 33px, H2 25px, P 17px/1.5, liens #0044C3 sans soulignement).
   - Home (chrome maison) : valeurs par section, commentées au fil des règles
     (interlignes, paddings et gaps inter-sections calés sur les bords VISIBLES de prod).
   ========================================================================== */

:root {
	--yutec-color-heading: var(--yutec-marine);
	--yutec-color-text: var(--yutec-texte);
	--yutec-color-accent: #0c1659;
	--yutec-color-link: var(--yutec-bleu);
	--yutec-color-muted: #8a8fa3;
	--yutec-color-border: #e3e5f0;
	--yutec-color-soft-bg: var(--yutec-fond-clair);
	--yutec-font: var(--yutec-police-titres); /* comme en ligne : « Inter, sans-serif » (Inter n'est pas chargée : Arial sous Windows) */
}

/* Le Theme Builder public superpose son header au hero. Cette variante
   retrouve ses deux hauteurs réelles sans modifier le chrome des autres pages. */
body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar { height: 35px; }
body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar__inner {
	width: min(1100px, 90%);
	height: 35px;
	padding: 0;
}
body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-tab {
	min-height: 35px;
	padding: 6px 32px;
}
body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header {
	position: absolute;
	top: 35px;
	left: 0;
	width: 100%;
	height: 90px;
	background: transparent;
	box-shadow: none;
}
body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header__inner {
	width: min(1100px, 90%);
	height: 90px;
	padding: 14px 0;
}

.yutec-tjm-salary {
	height: 111px;
	margin-bottom: 30px;
}
.yutec-tjm-salary label { display: block; height: 34px; font-size: 17px; line-height: 34px; }
.yutec-tjm-salary input[type="range"] {
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background: linear-gradient(to right, var(--yutec-bleu) var(--tjm-progress, 22.22%), rgba(0, 68, 195, .07) var(--tjm-progress, 22.22%));
	appearance: none;
	cursor: pointer;
}
.yutec-tjm-salary input[type="range"]::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	border: 3px solid var(--yutec-bleu);
	border-radius: 50%;
	background: #fff;
	appearance: none;
}
.yutec-tjm-salary input[type="range"]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 3px solid var(--yutec-bleu);
	border-radius: 50%;
	background: #fff;
}
.yutec-tjm-salary p { height: 34px; margin: 0; line-height: 34px; }
.yutec-tjm-salary output { font-weight: 500; }

.yutec-tjm-advanced {
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fafafa;
}

@media (min-width: 981px) and (max-width: 1215px) {
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header__inner,
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar__inner {
		width: 90%;
		padding-left: 25px;
	}
}

@media (max-width: 980px) {
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar { height: 40px; }
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar__inner {
		width: 100%;
		height: 40px;
		padding-inline: 10px;
	}
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-tab {
		min-height: 40px;
		padding: 6px 14px;
	}
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header {
		top: 40px;
		height: 80px;
	}
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header__inner {
		width: 95%;
		height: 80px;
		padding: 10px 0;
	}
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-logo__text { font-size: 0; }
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-logo__text small { font-size: 13px; }
}

@media (max-width: 767px) {
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar__inner { padding-inline: 2.5%; }
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-tab { padding-inline: 10px; }
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-header__inner { width: 95%; }
	.yutec-tjm-salary label { font-size: 17px; }
}

@media (max-width: 340px) {
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-topbar__inner { padding-inline: 2px; gap: 2px; }
	body:is(.page-template-simulateur-tjm, .page-template-simulateur-salaire, .page-template-comparateur-statuts) .yutec-tab { min-width: 0; padding-inline: 5px; font-size: 14px; }
}
.yutec-solution-profiles {
	display: grid;
	grid-template-columns: 396px minmax(0, 1fr);
	min-height: 390px;
	margin-top: 31px;
	border: 1px solid #dfe3eb;
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}
.yutec-solution-profiles button {
	width: 100%;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.yutec-solution-profiles__categories {
	display: grid;
	grid-template-rows: repeat(3, 50px);
	align-content: start;
	gap: 5px;
	padding: 18px 30px 0;
	border-right: 1px solid #e0e4ec;
	background: #fff;
}
.yutec-solution-profiles__categories button {
	padding: 8px 12px;
	border-radius: 8px;
	background: transparent;
	font-size: 18px;
	font-weight: 700;
	line-height: 34px;
	color: var(--yutec-marine);
}
.yutec-solution-profiles__categories button[aria-selected="true"] {
	background: rgba(0, 68, 195, 0.08);
	color: var(--yutec-bleu);
}
.yutec-solution-profiles__category {
	display: grid;
	grid-template-columns: 396px minmax(0, 1fr);
	min-height: 390px;
}
.yutec-solution-profiles__category[hidden],
.yutec-solution-profiles__details > [hidden] { display: none; }
.yutec-solution-profiles__details { padding: 28px 17px; }
.yutec-solution-profiles__details article {
	min-height: 292px;
	padding: 18px;
	border-radius: 8px;
	background: #f5f6f3;
}
.yutec-solution-profiles__details h3 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	color: var(--yutec-titre);
}
.yutec-solution-profiles__details ul {
	margin: 0;
	padding-left: 16px;
	list-style: disc;
}
.yutec-solution-profiles__details li {
	padding-left: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 25.6px;
}

@media (min-width: 981px) and (max-width: 1215px) {
	.yutec-solution-profiles { grid-template-columns: 30% minmax(0, 1fr); }
	.yutec-solution-profiles__category { grid-template-columns: 37% minmax(0, 1fr); }
}

@media (min-width: 768px) and (max-width: 980px) {
	.yutec-solution-profiles {
		display: block;
		min-height: 0;
		margin-top: 31px;
		overflow: hidden;
	}
	.yutec-solution-profiles__categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: 50px;
		gap: 0;
		padding: 18px 0 0;
		border-right: 0;
	}
	.yutec-solution-profiles__categories button {
		padding: 8px 3.125vw;
		border-radius: 0;
		font-size: 16px;
		white-space: nowrap;
	}
	.yutec-solution-profiles__category { display: block; min-height: 0; }
	.yutec-solution-profiles__details { display: none; }
}

@media (max-width: 767px) {
	.yutec-solution-profiles {
		display: block;
		min-height: 0;
		width: min(375px, 100%);
		margin-top: 43.6px;
		margin-left: 0;
		padding: 3px 4px;
		border: 1px solid #e0e4ec;
		border-radius: 7px;
		overflow: visible;
		background: transparent;
	}
	.yutec-solution-profiles__categories { display: grid; gap: 8px; padding: 0; border: 0; background: transparent; }
	.yutec-solution-profiles__categories button { min-height: 49px; padding: 7.5px 28px; border-radius: 5px; background: #fff; font-size: 16px; line-height: 34px; }
	.yutec-solution-profiles__category { display: block; min-height: 0; margin-top: 12px; }
	.yutec-solution-profiles__details { display: none; }
	.yutec-solution-profiles__details h3 { font-size: 21px; line-height: 29.4px; }
	.yutec-solution-profiles__details li { font-size: 15px; line-height: 21px; }
}
.yutec-plan-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 90px;
	font-family: var(--yutec-police-texte);
}
.yutec-plan-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 194px;
	height: 52px;
	padding-right: 26px;
	border-right: 2px solid rgba(10, 0, 0, .34);
	color: var(--yutec-marine);
	text-decoration: none;
}
.yutec-plan-header__logo img { width: 40px; height: 40px; }
.yutec-plan-header__logo span { display: flex; flex-direction: column; line-height: 1; }
.yutec-plan-header__logo strong { font-size: 20px; line-height: 18px; }
.yutec-plan-header__logo small { font-size: 13px; font-weight: 600; line-height: 14.3px; color: var(--yutec-texte); }

@media (max-width: 980px) {
	.yutec-plan-header { height: 80px; }
	.yutec-plan-header__logo { min-width: auto; height: 44px; padding: 0; border: 0; gap: 7px; }
	.yutec-plan-header__logo img { width: 26px; height: 26px; }
	.yutec-plan-header__logo small { font-size: 11px; line-height: 13px; }
}

/* ==========================================================================
   RESET MINIMAL — UNIQUEMENT sur les pages « chrome maison » (body.yutec-chrome).
   Objectif : ne plus dépendre du reset de Divi une fois ses assets retirés
   (box-sizing, marges par défaut). Scopé → aucun effet sur les pages encore
   sous Divi, qui gardent le reset de Divi.
   ========================================================================== */
body.yutec-chrome {
	margin: 0;
	color: var(--yutec-color-text);
	/* Réplique la BASE ambiante de Divi/prod (mesurée sur yutec.fr) pour que le
	   chrome maison (header/footer, hors sections) garde le même rendu qu'avant
	   le retrait de Divi : Arial 17px, lissage antialiased. Les sections forcent
	   déjà Arial et les titres Inter de leur côté. */
	font-family: var(--yutec-police-texte);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Articles historiques encore rendus par Divi.
   Le sticky JS de Divi passe le sommaire en position:fixed puis recalcule de
   grandes marges en bas de ligne, ce qui crée le CLS observé dans CrUX. Le
   filtre PHP le désactive dans les shortcodes ; ce sticky CSS reste dans le
   flux et est naturellement borné par la ligne de l'article. */
@media (min-width: 1216px) {
	body.single-post .molti-article:has(.yutec-legacy-toc-sticky),
	body.single-post .molti-article .et_pb_section:has(.yutec-legacy-toc-sticky) {
		overflow: visible !important; /* un overflow Divi non visible bloque position:sticky */
	}
}

.yutec-chrome *,
.yutec-chrome *::before,
.yutec-chrome *::after {
	box-sizing: border-box;
}
.yutec-chrome img,
.yutec-chrome svg {
	max-width: 100%;
}
/* Reset des marges par défaut — enveloppé dans :where() pour une spécificité
   NULLE (0,0,0). Sans ça, ce sélecteur (0,1,1) écrasait TOUTES les marges que
   nos composants posent en classe simple (.yutec-solution__heading, .yutec-hero__trust…
   = 0,1,0) → titres et paragraphes collés à leur contenu. Avec :where(), chaque
   règle de composant l'emporte ; ce reset ne sert que de défaut. */
:where(.yutec-chrome h1, .yutec-chrome h2, .yutec-chrome h3, .yutec-chrome h4, .yutec-chrome p, .yutec-chrome figure, .yutec-chrome ul) {
	margin: 0;
}

/* Focus clavier visible (a11y) — anneau net sur tous les éléments interactifs.
   :focus-visible → ne s'affiche qu'au clavier, jamais au clic souris. Les onglets
   (border:0; background:none) n'avaient sinon qu'un contour navigateur peu lisible. */
.yutec-chrome a:focus-visible,
.yutec-chrome button:focus-visible {
	outline: 2px solid var(--yutec-color-link);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Conteneur générique des pages custom --- */
.yutec-page {
	color: var(--yutec-color-text);
	background: transparent;
	font-family: var(--yutec-font);
}

/* ==========================================================================
   Header Divi — parité prod ↔ local (logo « Yutec / Légal »)
   Le module blurb du logo (et_pb_blurb_0_tb_header) n'a AUCUN style typo dans
   la base Divi : en prod, son rendu (titre navy 20/700, sous-titre 13/600) vient
   d'un CSS optimisé absent en local, où le titre retombe sur le global h4
   (#224ab0, 18px/500). On restitue ici les valeurs EXACTES mesurées sur yutec.fr
   pour que le miroir local soit fidèle (et au déploiement, simplement redondant).
   ========================================================================== */
.et_pb_blurb_0_tb_header {
	/* séparateur vertical « | » entre logo et menu (classe et_pb_with_border en prod,
	   absente du snapshot DB local) */
	border-right: 2px solid rgba(10, 0, 0, 0.34);
}

/* La section header est haute de 90px (max-height) et contient la rangée nav +
   la rangée fil d'Ariane (124px au total). En prod elle est en overflow:visible
   (le fil d'Ariane déborde sous la nav, normal). En local, un drift CSS la met en
   overflow-y:auto → une scrollbar INTERNE apparaît dans la navbar. On rétablit
   le comportement prod. */
.et_pb_section_1_tb_header {
	overflow: visible !important;
}

.et_pb_blurb_0_tb_header .et_pb_module_header {
	font-size: 20px;
	font-weight: 700;
	line-height: 18px; /* serré comme prod : sinon le global line-height:2em gonfle le bloc */
	color: var(--yutec-marine); /* navy, comme la prod (et non le bleu global #224ab0) */
}

.et_pb_blurb_0_tb_header .et_pb_blurb_description,
.et_pb_blurb_0_tb_header .et_pb_blurb_description p {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1; /* compact comme prod → le bloc texte < icône, module = 40px */
	color: var(--yutec-texte);
}

/* --- Sommaire numéroté + scrollspy ---
   Calé au pixel sur le module Divi d'origine :
   - liens bleus 15px / line-height 26px, normaux (pas de gras)
   - numéro gris foncé, texte bleu
   - barre gauche bleu clair uniforme (3px), légèrement indenté
   - état courant = barre bleue pleine (seule différence au scroll) */
.yutec-toc {
	padding-top: 24px; /* le sommaire démarre ~24px sous le H1, comme l'original */
}

.yutec-toc ol {
	list-style: none;
	margin: 0 0 0 21px; /* léger retrait, comme le module Divi d'origine */
	padding: 0 0 15px;
	counter-reset: yutec-toc;
}

.yutec-toc li {
	counter-increment: yutec-toc;
	margin: 0;
}

.yutec-toc a {
	display: block;
	font-size: 15px;
	line-height: 26px;
	color: var(--yutec-color-link);
	font-weight: 400;
	text-decoration: none;
	padding: 5px 0 5px 15px;
	border-left: 3px solid rgba(0, 68, 195, 0.15);
	transition: border-color 0.15s ease;
}

.yutec-toc a::before {
	content: counter(yutec-toc) ".\00a0";
	color: var(--yutec-color-text); /* numéro gris foncé comme l'original */
}

.yutec-toc a:hover {
	border-left-color: rgba(0, 68, 195, 0.5);
}

.yutec-toc a.is-active {
	border-left-color: var(--yutec-color-link); /* barre bleue pleine = section courante */
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {

	.yutec-toc ol {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.5rem;
	}

	.yutec-toc a {
		border-left: 0;
		padding: 0.3rem 0;
	}

	.yutec-toc a.is-active {
		border-left: 0;
	}
}

/* ==========================================================================
   HOME — Section 0 : Hero (valeurs mesurées sur yutec.fr)
   ========================================================================== */
.yutec-hero {
	background: #fff;
	padding: 100px 0 6px;
	text-align: center;
	font-family: var(--yutec-police-texte); /* prod : le hero est en Arial (défaut Divi), pas Inter */
}

.yutec-hero__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-hero__badge {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(12, 22, 89, 0.08);
	color: #0c1659;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4; /* sinon le line-height:2em de Divi gonfle le badge */
}

.yutec-hero__title {
	margin: 0 auto;
	max-width: 1100px;
	font-family: var(--yutec-police-texte); /* force Arial (sinon la règle Divi h1{Inter} l'emporte) */
	font-size: 56px;
	line-height: 70px;
	font-weight: 700;
	color: var(--yutec-titre);
}

/* Surlignage « marqueur » sur une partie du H1 (comme prod) */
.yutec-hl {
	background-image: linear-gradient(transparent 67%, #bacaf1 69%, #bacaf1 90%, transparent 90%);
}

.yutec-hero__subtitle {
	margin: 1.5rem auto 0;
	padding-bottom: 0; /* neutralise le padding-bottom des <p> hérité de Divi */
	max-width: 800px;
	font-size: 21px;
	line-height: 1.5;
	color: var(--yutec-marine);
}

.yutec-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 3.25rem;
}

/* CTA du hero : plus charnus, et bouton « soft » au padding réduit pour
   équilibrer la largeur des 2 boutons (comme prod). */
.yutec-hero__cta .yutec-btn {
	padding-block: 12px;
	line-height: 1.8; /* hauteur de bouton ≈ 55px comme prod */
	min-width: 260px; /* prod : les 2 boutons font 260px (largeurs égales) */
	text-align: center;
}
.yutec-hero__cta .yutec-btn--soft {
	padding-inline: 17px;
}

/* Boutons pilule réutilisables (home) */
.yutec-btn {
	display: inline-block;
	padding: 12px 36px;
	border-radius: 28px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2; /* sinon le global line-height:2em de Divi gonfle les boutons */
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.yutec-btn--primary {
	background: var(--yutec-bleu);
	color: #fff;
	/* Prod : le bouton primaire ne change PAS au survol (vérifié). Pas de :hover. */
}

.yutec-btn--soft {
	background: #f8f8fc;
	color: var(--yutec-titre);
	border: 1px solid rgba(10, 0, 0, 0.08);
}

.yutec-btn--soft:hover {
	background: #fcfcfc; /* prod : léger éclaircissement du fond au survol (248,248,252 → 252) */
}

.yutec-hero__trust {
	margin: 3.5rem 0 1.75rem;
	font-size: 20px;
	font-weight: 700;
	color: var(--yutec-texte);
}

/* Carrousel de logos partenaires — marquee CSS, sans dépendance */
.yutec-marquee {
	margin-bottom: 34px; /* prod : gap visible logos → cartes ≈ 113 */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.yutec-marquee__track {
	display: flex;
	align-items: center;
	gap: 60px; /* prod : swiper spaceBetween = 60 */
	width: max-content;
	animation: yutec-marquee 45s linear infinite; /* défilement lent comme prod */
	animation-play-state: paused; /* Repli statique tant que le contrôle n'est pas prêt. */
}

.yutec-marquee.is-controlled { position: relative; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.yutec-marquee__viewport { width: calc(100% - 56px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.yutec-marquee.is-controlled:not(.is-paused) .yutec-marquee__track { animation-play-state: running; }
.yutec-marquee__control { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--yutec-bleu); border-radius: 50%; background: #fff; color: var(--yutec-bleu); cursor: pointer; }
.yutec-marquee__control::before { content: ''; box-sizing: border-box; width: 12px; height: 16px; border: 0; border-inline: 4px solid currentColor; }
.yutec-marquee__control[data-paused="true"]::before { width: 0; height: 0; border: 8px solid transparent; border-left: 12px solid currentColor; border-right: 0; margin-left: 3px; }
.yutec-marquee__control:hover:not(:disabled) { background: #e8edf5; }
.yutec-marquee__control:focus-visible { outline: 3px solid var(--yutec-bleu); outline-offset: 3px; }
.yutec-marquee__control:disabled { color: #596273; border-color: currentColor; cursor: default; }

/* Prod re-mesuré sur le carrousel VISIBLE (les 1ères mesures avaient chopé un
   carrousel dupliqué caché de Divi) : Swiper 840px, 5 slides/vue, space 60 →
   chaque logo vit dans une case de 120px et est réduit par max-width:100%
   (GK : canvas 330×127 → 120px de large, glyphe visible ~36px, comme prod). */
.yutec-marquee__item {
	flex: 0 0 auto;
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yutec-marquee__item img {
	display: block;
	max-width: 100%;
	height: auto;
}

@keyframes yutec-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.yutec-marquee__track { animation: none; }
}

@media (max-width: 768px) {
	.yutec-hero { padding: 60px 0 6px; }
	.yutec-hero__title { font-size: 34px; line-height: 1.15; }
	.yutec-hero__subtitle { font-size: 18px; }
}

/* Téléphone (≤767px) : alignements spécifiques relevés sur prod.
   - Badge du hero masqué (encore visible en tablette à 768px).
   - « Pourquoi choisir Yutec ? » et « Comment ça marche ? » : centrés en
     desktop/tablette, mais alignés à GAUCHE sur téléphone (comme prod). */
@media (max-width: 767px) {
	.yutec-hero__badge { display: none; }
	/* Accueil uniquement : mesures publiques du 16/09/2026, contenu inchangé. */
	.yutec-home .yutec-hero { padding-top: 30px; }
	.yutec-home .yutec-hero__inner { padding-inline: 2%; }
	.yutec-home .yutec-hero__title { line-height: 46px; letter-spacing: -0.5px; padding-bottom: 10px; }
	.yutec-home .yutec-hero__subtitle { width: 97%; margin-top: 15px; font-size: 17px; font-weight: 500; line-height: 28.9px; }
	.yutec-home .yutec-hero__cta { margin-top: 26px; gap: 20px; }
	.yutec-home .yutec-hero__cta .yutec-btn { width: 80%; min-width: 0; line-height: 28.9px; }
	.yutec-home .yutec-hero__cta .yutec-btn--primary { border: 1px solid rgba(10, 0, 0, 0.1); }
	.yutec-home .yutec-hero__cta .yutec-btn--soft { background: transparent; border: 0; text-decoration: underline; }
	.yutec-home .yutec-hero__trust { margin-top: 63px; font-size: 18px; font-weight: 700; line-height: 27px; }
	body.page-template-home .yutec-header .yutec-logo { flex-direction: column; gap: 3px; }
	body.page-template-home .yutec-header .yutec-logo__img { width: 32px; height: 32px; }
	body.page-template-home .yutec-header .yutec-logo__text { font-size: 0; }
	body.page-template-home .yutec-header__inner { height: 72px; padding-block: 10px; }
	/* Sélecteur scopé (0,2,0) pour battre les règles de base text-align:center
	   définies plus bas dans le fichier (les media queries n'ajoutent pas de
	   spécificité). Ne touche pas le .yutec-steps__heading de l'entreprise. */
	.yutec-why .yutec-why__heading,
	.yutec-steps .yutec-steps__heading { text-align: left; }
}

/* ==========================================================================
   HOME — Section 1 : « Notre solution » (valeurs mesurées sur yutec.fr)
   Layout prod : row 1200px → grille de 4 cartes (gauche) + bloc accroche (droite),
   alignés verticalement au centre. Section en Arial (défaut Divi), H2 en Inter.
   ========================================================================== */
.yutec-solution {
	background: #fff;
	padding: 73px 0 50px; /* gap visible cartes → « Nos expertises » ≈ 108 (prod) */
	font-family: var(--yutec-police-texte);
}

.yutec-solution__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 475px);
	gap: 71px; /* écart bloc-cartes → accroche, mesuré */
	align-items: center;
}

/* Placement explicite : cartes à gauche, accroche à droite — indépendant de
   l'ordre DOM (le H2 est volontairement avant les cartes pour la hiérarchie). */
.yutec-solution__cards {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.yutec-solution__intro {
	grid-column: 2;
	grid-row: 1;
}

.yutec-card {
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.17); /* ombre fine prod (statique, outline diffus) */
	padding: 30px 25px;
	/* Prod : AUCUNE animation au survol sur ces cartes (vérifié). Pas de :hover. */
}

.yutec-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(0, 68, 195, 0.3); /* cercle bleu clair, mesuré */
	color: var(--yutec-bleu);
	margin-bottom: 18px;
}

.yutec-card__icon svg {
	width: 23px;
	height: 23px;
}

.yutec-card__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--yutec-titre);
}

.yutec-card__text {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.875; /* prod : 30px (Divi gonflait l'interligne ; restitué après retrait de Divi) */
	color: #475467; /* gris ardoise, mesuré */
}

/* Bloc accroche (droite) */
.yutec-solution__heading {
	margin: 0 0 18px;
	font-family: var(--yutec-font); /* prod : ce H2 est en Inter (≠ Arial du reste) */
	font-size: 38px;
	font-weight: 600;
	line-height: 1.4; /* prod : 53px (Divi gonflait l'interligne des H2) */
	color: var(--yutec-titre);
}

.yutec-solution__text {
	margin: 0 0 28px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.65; /* prod : 28px */
	color: var(--yutec-texte);
}

/* Repli en 1 colonne calé sur le breakpoint « tablette » de prod (Divi = 980px),
   pour un comportement responsive identique. En dessous, la grille asymétrique
   (cartes 2×2 + accroche 475px) devenait trop étroite. */
@media (max-width: 980px) {
	.yutec-solution__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	/* En 1 colonne, on annule le placement explicite : l'ordre DOM reprend
	   (accroche en premier, puis cartes). L'accroche reste alignée à GAUCHE,
	   comme prod (qui n'a jamais centré ce bloc, à aucune largeur). */
	.yutec-solution__cards,
	.yutec-solution__intro {
		grid-column: auto;
		grid-row: auto;
	}
}
.yutec-gif-control-host { position: relative; }
.yutec-single { font: 500 17px/1.4 var(--yutec-police-titres); color: var(--yutec-texte); }
.yutec-post { padding-top: 60px; padding-bottom: 89px; }
.yutec-post h1 { width: 75%; margin: 0 0 20px; padding: 0 0 10px; font: 600 27px/1.3 var(--yutec-police-titres); color: var(--yutec-titre); }
.yutec-post-table { max-width: 100%; overflow-x: auto; }
.yutec-post-toc { border-left: 2px solid #ddd; padding: 5px 0 2px; margin: 8px 0 -2px; }
.yutec-post-toc a { display: block; padding: 4px 0 4px 12px; color: var(--yutec-texte); font-size: 15px; line-height: 24px; text-decoration: none; }
.yutec-post-toc a:hover, .yutec-post-toc a[aria-current] { color: var(--yutec-bleu); }
.yutec-post-copy-check { position: absolute; right: -16px; }
.yutec-single :is(a,button,[tabindex]):focus-visible { outline: 2px solid var(--yutec-bleu); outline-offset: 3px; }
@media (min-width: 768px) and (max-width: 980px) {
	.yutec-post { padding-top: 60px; }
	.yutec-post h1 { width: 85%; }
}
@media (max-width: 767px) {
	.yutec-single { font-size: 16px; }
	.yutec-post { padding-top: 25px; padding-bottom: 97px; }
	.yutec-post h1 { width: 100%; margin-bottom: 5px; }
}
.yutec-linked-module { position: relative; }
.yutec-module-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.yutec-linked-module > :not(.yutec-module-link) { position: relative; z-index: 1; }
.yutec-linked-module.is-linked-module-ready { cursor: pointer; }
.yutec-linked-module a:not(.yutec-module-link) { position: relative; z-index: 2; }
:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button,.yutec-automation-button) { position: relative; transition: all .2s ease; }
:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button,.yutec-automation-button):focus-visible { border-radius: 12px; }
:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button--aside,.yutec-automation-button)::after { content: ''; display: block; position: absolute; top: 8px; left: calc(100% - 13px); right: auto; width: 26.8125px; height: 27.2031px; margin-left: -27.2px; opacity: 0; transform: none; background: #fff; mask: url('../images/resource-icons/chevron.svg') center/100% 100% no-repeat; transition: all .2s ease; }
:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button--aside,.yutec-automation-button):hover::after { opacity: 1; margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
	:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button,.yutec-automation-button),
	:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) :is(.yutec-post-button,.yutec-automation-button)::after,
	:is(.postid-336278,.postid-341725,.postid-341454,.postid-341308,.postid-340382,.postid-341491,.postid-340427,.postid-340247,.postid-340305,.postid-339370,.postid-337405,.postid-336082,.postid-335380) .yutec-post-cta .yutec-post-button::after { transition: none; }
}
:is(.postid-325027,.postid-325143) .yutec-post { padding-bottom: 119px; }
:is(.postid-325268,.postid-318516) .yutec-post { padding-bottom: 112px; }
@media (min-width: 768px) and (max-width: 980px) {
	:is(.postid-325020,.postid-325027,.postid-325268,.postid-325004,.postid-325186) .yutec-post { padding-bottom: 62px; }
}
@media (max-width: 767px) {
	:is(.postid-325020,.postid-325027,.postid-325268,.postid-325004,.postid-325186) .yutec-post { padding-bottom: 50px; }
}
/* These five public templates use the shorter gap below the final CTA. */
:is(.postid-339367,.postid-339285,.postid-339147,.postid-339127,.postid-336278) .yutec-post { padding-bottom: 32px; }
@media (max-width: 767px) {
	:is(.postid-339367,.postid-339285,.postid-339147,.postid-339127,.postid-336278) .yutec-post { padding-bottom: 40px; }
}
.yutec-profinet-faq { margin-top: 28px; }
.yutec-profinet-faq:empty { margin-top: 10px; }
.yutec-profinet-faq-item { padding: 20px; border: 1px solid #d9d9d9; border-radius: 10px; background: #fff; margin-bottom: 10px; transition: border-bottom-width .2s ease; }
.yutec-profinet-faq-item:last-child { margin-bottom: 0; }
.yutec-profinet-faq-item.is-open { border-bottom-width: 4px; }
.yutec-profinet-faq h5 { margin: 0; padding: 0; color: var(--yutec-titre); font: 600 19px/19px var(--yutec-police-titres); }
.yutec-profinet-faq button { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.yutec-profinet-faq button:disabled { cursor: default; opacity: 1; }
.yutec-profinet-faq-answer { margin-top: 20px; }
.yutec-profinet-faq-answer[hidden] { display: none; }
.yutec-profinet-faq-answer p { font: 500 17px/32.3px var(--yutec-police-texte); padding: 0; }
.yutec-profinet-faq-answer p:empty { display: none; }
.yutec-profinet-faq button:focus-visible, .yutec-profinet-image:focus-visible { outline: 2px solid var(--yutec-bleu); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.yutec-profinet-faq-item { transition: none; }
}
@media (max-width: 767px) {
	.yutec-profinet-faq h5 { line-height: 24.7px; }
}
.yutec-resource-header .yutec-plan-header__logo { min-width: 190px; }
.yutec-resource-header .yutec-plan-header__logo img { width: 38px; height: 38px; }
.yutec-blog-carousel {
	position: relative;
	width: 100%;
}
.yutec-blog-carousel:nth-of-type(1) { margin-bottom: 57px; }
.yutec-blog-carousel:nth-of-type(2) { margin-bottom: 47px; }

@media (min-width: 768px) and (max-width: 980px) {
	.yutec-blog-carousel:nth-of-type(1) { margin-bottom: 64px; }
	.yutec-blog-carousel:nth-of-type(2) { margin-bottom: 54px; }
}

@media (max-width: 767px) {
	.yutec-resource-header { height: 80px; }
	.yutec-resource-header .yutec-plan-header__logo { min-width: auto; height: 50px; gap: 7px; }
	.yutec-resource-header .yutec-plan-header__logo img { width: 32px; height: 32px; }
	.yutec-resource-header .yutec-plan-header__logo small { font-size: 13px; line-height: 14px; }
	.yutec-blog-carousel:nth-of-type(1) { margin-bottom: 64px; }
	.yutec-blog-carousel:nth-of-type(2) { margin-bottom: 54px; }
}

@media (max-width: 560px) {
	.yutec-solution__cards {
		grid-template-columns: 1fr;
	}
	.yutec-solution__heading {
		font-size: 30px;
	}
}

/* ==========================================================================
   HOME — Section 2 : « Nos expertises » (onglets 2 niveaux, valeurs mesurées)
   Layout prod : H2 + intro, puis boîte = rail catégories (gauche) │ rail
   sous-domaines + panneau détail gris (droite). Section Arial, H2 Inter.
   ========================================================================== */
.yutec-expertise {
	background: #fff;
	padding: 54px 0 114px; /* gaps visibles : ↑ ≈108, ↓ vers « Pourquoi » ≈195 (prod) */
	font-family: var(--yutec-police-texte);
}

.yutec-expertise__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-expertise__heading {
	margin: 0 0 12px;
	font-family: var(--yutec-font); /* Inter, comme prod */
	font-size: 38px;
	font-weight: 600;
	line-height: 1.4; /* prod : 53px */
	color: var(--yutec-titre);
}

.yutec-expertise__intro {
	margin: 0 0 30px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.65; /* prod : 28px */
	color: var(--yutec-texte);
}

/* Boîte : rail catégories (396px) │ zone droite (sous-domaines + détail) */
.yutec-expertise__box {
	display: grid;
	grid-template-columns: 396px minmax(0, 1fr);
	border: 1px solid rgba(10, 0, 0, 0.12);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

/* --- Niveau 1 : rail catégories --- */
.yutec-exp-cats {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 30px 20px 30px 31px;
	border-right: 1px solid rgba(10, 0, 0, 0.12);
}

.yutec-exp-cat {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 10px;
	padding: 11px;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--yutec-texte);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.yutec-exp-cat:hover {
	background: rgba(0, 68, 195, 0.05);
}

.yutec-exp-cat.is-active {
	background: rgba(0, 68, 195, 0.07);
	color: var(--yutec-bleu);
}

/* --- Zone droite : un panneau par catégorie --- */
.yutec-exp-panel {
	display: none;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 20px;
	padding: 30px 20px;
}

.yutec-exp-panel.is-active {
	display: grid;
}

/* Niveau 2 : rail sous-domaines */
.yutec-exp-subs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.yutec-exp-sub {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 10px;
	padding: 9px 10px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--yutec-texte);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.yutec-exp-sub:hover {
	background: rgba(0, 68, 195, 0.05);
}

.yutec-exp-sub.is-active {
	background: rgba(0, 68, 195, 0.07);
	color: var(--yutec-bleu);
}

/* Niveau 3 : panneau détail (compétences) */
.yutec-exp-detail {
	display: none;
	background: #f5f6f4;
	border-radius: 11px;
	padding: 20px 17px;
}

.yutec-exp-detail.is-active {
	display: block;
	animation: yutec-exp-fade 0.3s ease; /* fade-in du contenu, comme prod (animate.css) */
}

@keyframes yutec-exp-fade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.yutec-exp-detail.is-active { animation: none; }
}

.yutec-exp-detail__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--yutec-titre);
}

.yutec-exp-detail__list {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
}

.yutec-exp-detail__list li {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--yutec-texte);
}

@media (max-width: 980px) {
	.yutec-expertise__box {
		grid-template-columns: 1fr;
	}
	.yutec-exp-cats {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid rgba(10, 0, 0, 0.12);
	}
	.yutec-exp-cat {
		width: auto;
	}
}

@media (max-width: 600px) {
	.yutec-exp-panel.is-active {
		grid-template-columns: 1fr;
	}
	.yutec-expertise__heading {
		font-size: 30px;
	}

	/* Rendu « cartes » de prod sur téléphone : catégories en cartes bordées
	   empilées (≠ rail vertical du desktop), sous-domaines en grille 2 colonnes
	   de pills bordées, puis panneau détail en dessous. La logique d'onglets (JS)
	   reste identique : on ne change que l'apparence. */
	.yutec-exp-cats {
		flex-direction: column;
		gap: 10px;
		padding: 16px;
	}
	.yutec-exp-cat {
		width: 100%;
		border: 1px solid rgba(10, 0, 0, 0.12);
		border-radius: 10px;
		padding: 13px 16px;
	}
	.yutec-exp-cat.is-active {
		border-color: var(--yutec-bleu);
	}
	.yutec-exp-subs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-bottom: 16px;
	}
	.yutec-exp-sub {
		border: 1px solid rgba(10, 0, 0, 0.12);
		border-radius: 10px;
		padding: 12px 13px;
		font-size: 15px;
	}
	.yutec-exp-sub.is-active {
		border-color: var(--yutec-bleu);
	}
}

/* ==========================================================================
   HOME — Sections 3-5 : « Pourquoi choisir Yutec ? » + lignes « feature »
   Section 3 = H2 centré surligné + 1re ligne feature. Sections 4-5 = lignes
   feature seules. Une ligne = illustration SVG sur panneau bleu clair + contenu
   (H3 + paragraphes + checklist), alternées gauche/droite. Valeurs mesurées.
   ========================================================================== */
.yutec-why {
	background: #fff;
	padding: 77px 0 2px; /* gap visible vers « Pourquoi » ≈195 (prod) */
	font-family: var(--yutec-police-texte);
}

.yutec-why__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-why__heading {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--yutec-font); /* Inter, comme prod */
	font-size: 38px;
	font-weight: 600;
	line-height: 1.4; /* prod : 53px */
	color: var(--yutec-titre);
}

/* --- Composant générique « feature row » (réutilisé par sections 3, 4, 5) --- */
.yutec-feature {
	background: #fff;
	padding: 83px 0; /* prod : section « Ne ratez plus une opportunité » = 83/83 */
	font-family: var(--yutec-police-texte);
}

/* « Fixez vos conditions » : prod = 0/45 (le gap au-dessus vient du 83px bas de
   la section précédente). Ciblé par son aria-labelledby, sans toucher au HTML. */
.yutec-feature[aria-labelledby="yutec-feature-conditions"] {
	padding: 0 0 74px; /* gap visible vers « Comment ça marche » ≈134 (prod) */
}

.yutec-feature__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-feature__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
	align-items: center;
}

/* Ordre DOM : contenu d'abord (SEO) ; ce modificateur place le média à gauche. */
.yutec-feature__row--media-left .yutec-feature__media {
	order: -1;
}

.yutec-feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef6ff;
	border-radius: 13px;
	padding: 30px;
}

.yutec-feature__media img {
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* Variante média « collage » (section 5) : 1 grande carte + 2 empilées */
.yutec-feature__media--collage {
	padding: 30px;
}
.yutec-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: start;
	width: 100%;
}
.yutec-collage img {
	width: 100%;
	max-width: none;
	height: auto;
	display: block;
}
.yutec-collage__stack {
	display: flex;
	flex-direction: column;
	gap: 19px;
}

.yutec-feature__title {
	margin: 0 0 16px;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--yutec-titre);
}

.yutec-feature__content p {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--yutec-texte);
}

/* Checklist (coche bleue dans pastille claire) */
.yutec-feature__checks {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.yutec-feature__checks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	color: var(--yutec-marine);
}

.yutec-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 6px;
	background: rgba(0, 68, 195, 0.1);
	color: var(--yutec-bleu);
}

.yutec-check svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 980px) {
	.yutec-feature__row {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	/* Sur mobile : le média repasse au-dessus du contenu, quelle que soit la variante. */
	.yutec-feature__row--media-left .yutec-feature__media {
		order: 0;
	}
	/* « Ne ratez plus une opportunité » : prod masque l'illustration sur les petits
	   écrans (en tablette il ne reste qu'une boîte bleue vide — on fait plus propre
	   en retirant tout le bloc média). Seule cette section est ciblée. */
	.yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__media {
		display: none;
	}
	.yutec-why__heading {
		font-size: 30px;
	}
}

/* ==========================================================================
   HOME — Section 6 : « Comment ça marche ? » (3 étapes, valeurs mesurées)
   H2 centré surligné + 3 colonnes : illustration sur panneau gris + H3 + texte.
   ========================================================================== */
.yutec-steps {
	background: #fff;
	padding: 56px 0 86px; /* gaps visibles : ↑ ≈134, ↓ vers CTA ≈172 (prod) */
	font-family: var(--yutec-police-texte);
}

.yutec-steps__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-steps__heading {
	margin: 0 0 90px; /* prod : grand espace titre→cartes (gap mesuré ≈ 314 avec le panneau) */
	text-align: center;
	font-family: var(--yutec-font); /* Inter, comme prod */
	font-size: 38px;
	font-weight: 600;
	line-height: 1.4; /* prod : 53px */
	color: var(--yutec-titre);
}

.yutec-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
	align-items: start;
}

.yutec-step__media {
	margin-bottom: 20px;
	background: #f5f6f4;
	border-radius: 10px;
	padding: 30px 20px;
}

.yutec-step__media img {
	width: 100%;
	height: auto;
	display: block;
}

.yutec-step__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--yutec-titre);
}

.yutec-step__text {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--yutec-texte);
}

@media (max-width: 980px) {
	.yutec-steps__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 460px;
		margin-inline: auto;
	}
	.yutec-steps__heading {
		font-size: 30px;
	}
}

/* ==========================================================================
   HOME — Section 7 : CTA final (valeurs mesurées)
   Panneau bleu clair : titre + bouton (gauche) + grande flèche (droite).
   ========================================================================== */
.yutec-cta {
	background: #fff;
	padding: 86px 0 60px; /* gap visible « Comment ça marche » → CTA ≈172 (prod) */
	font-family: var(--yutec-police-texte);
}

.yutec-cta__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
}

.yutec-cta__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	background: rgba(0, 68, 195, 0.07);
	border-radius: 11px;
	padding: 48px 40px; /* prod : panneau plus haut (padding vertical ≈ 48px) */
}

.yutec-cta__title {
	margin: 0 0 20px;
	max-width: 520px; /* prod : le titre passe à la ligne après « plateforme » */
	font-family: var(--yutec-font); /* Inter, comme prod */
	font-size: 34px;
	font-weight: 600;
	line-height: 1.4; /* prod : 47.6px */
	color: var(--yutec-titre);
}

.yutec-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.yutec-cta__btn svg {
	width: 18px;
	height: 18px;
}

.yutec-cta__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--yutec-titre);
}

.yutec-cta__arrow svg {
	width: 46px;
	height: 46px;
}

@media (max-width: 768px) {
	.yutec-cta__title {
		font-size: 26px;
	}
	.yutec-cta__arrow {
		display: none; /* la flèche décorative passe à la trappe sur mobile */
	}
}

/* Home freelance — les SVG chargés conservent leur ratio naturel. Les anciens
   carrés provenaient des placeholders différés, pas des illustrations finales. */
.yutec-home .yutec-card__title { font: 600 18.4px/1.2 var(--yutec-police-titres); padding-bottom: 10px; margin: 0; }
.yutec-home .yutec-card__icon { margin-bottom: 16px; }
/* Même chaîne de repli que la référence : ne pas substituer la police système
   macOS à sans-serif lorsque Inter n'est pas disponible. */
.yutec-home { container-type: inline-size; }
.yutec-home h2 { font-family: var(--yutec-police-titres); }
.yutec-home-copy--tablet { display: none; }
.yutec-home-card-column { display: contents; }
.yutec-home-reveal { transition: opacity .35s ease-out, transform .2s ease-out; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.yutec-home-reveal--desktop.is-pending,
	.yutec-home-reveal--all.is-pending { opacity: 0; transform: translateY(50px); }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	.yutec-home-reveal--mobile.is-pending,
	.yutec-home-reveal--all.is-pending { opacity: 0; transform: translateY(38px); }
}
@media (prefers-reduced-motion: reduce) {
	.yutec-home-reveal { transition: none; }
}
.yutec-home h2 .yutec-hl { background-image: linear-gradient(transparent 70%,#bacaf1 72%,#bacaf1 90%,transparent 92%,transparent); }
.yutec-home .yutec-step__media img { width: auto; margin-inline: auto; }
.yutec-home .yutec-feature__title { padding-bottom: 10px; margin-bottom: 15px; }
.yutec-home .yutec-feature__content p { max-width: 550px; line-height: 28px; margin-bottom: 17px; }
.yutec-home .yutec-feature__content p:last-of-type { margin-bottom: 15px; }
.yutec-home .yutec-feature__checks { margin: 0; gap: 0; }
.yutec-home .yutec-feature__checks li { align-items: start; gap: 15px; padding-bottom: 10px; font: 500 16px/27.2px var(--yutec-police-titres); }
.yutec-home .yutec-check { width: 29px; height: 29px; flex-basis: 29px; }
.yutec-home .yutec-step__title { font: 600 20px/20px var(--yutec-police-titres); padding-bottom: 10px; margin: 0; }
.yutec-home .yutec-step:nth-child(2) .yutec-step__media { padding-block: 42px; }
.yutec-home .yutec-step:nth-child(3) .yutec-step__media { padding-block: 28px; }
.yutec-home .yutec-exp-detail__title { font-family: var(--yutec-police-titres); line-height: 1; padding-bottom: 10px; margin: 0; }
.yutec-home .yutec-exp-detail__list { padding-left: 16px; padding-bottom: 38px; }
.yutec-home .yutec-exp-detail__list li { line-height: 26px; }
@media (min-width: 981px) {
	.yutec-home .yutec-hero {
		padding-top: 78.4px;
		padding-bottom: 37.8px;
	}
	.yutec-home .yutec-hero__badge { width: 85px; padding: 0; line-height: 28.5px; margin-bottom: 13px; }
	.yutec-home .yutec-hero__inner { width: 90%; max-width: 1100px; padding-inline: 0; }
	.yutec-home .yutec-hero__title { padding-bottom: 10px; }
	.yutec-home .yutec-hero__subtitle { margin-top: 18px; }
	.yutec-home .yutec-hero__cta { margin-top: 44px; gap: 20px; }
	.yutec-home .yutec-hero__cta .yutec-btn { line-height: 1.7; }
	.yutec-home .yutec-hero__trust { margin-top: 82px; margin-bottom: 19px; }
	.yutec-home .yutec-marquee { width: min(900px,100%); margin: 0 auto; }
	.yutec-home .yutec-marquee__viewport { padding-bottom: 8px; }
	.yutec-home .yutec-marquee__item { width: 172px; }
	.yutec-home .yutec-marquee__item img { max-height: none; width: auto; max-width: 100%; }
	.yutec-home .yutec-marquee__track { gap: 10px; }

	.yutec-home .yutec-solution { padding: calc(107px + min(27px,2cqw)) 0 60px; }
	.yutec-home .yutec-solution__inner {
		width: 90%;
		max-width: 1200px;
		padding-inline: 0;
		grid-template-columns: minmax(0, 51.444%) minmax(0, 39.556%);
		gap: 6%;
	}
	.yutec-home .yutec-solution__cards {
		gap: 14px 3.8877%;
		align-items: center;
	}
	.yutec-home-card-column { display: block; min-width: 0; }
	.yutec-home-card-column > .yutec-card:first-child { margin-bottom: 4.787%; }
	.yutec-home .yutec-solution__heading { margin-bottom: 1px; }
	.yutec-home .yutec-solution__intro { padding-bottom: 7px; }
	.yutec-home .yutec-solution__text { width: 95%; line-height: 28px; margin-bottom: 30px; }
	.yutec-home .yutec-solution__intro > .yutec-btn { line-height: 28.9px; }
	.yutec-home .yutec-card {
		min-height: 294px;
		padding-top: 30px;
	}
	.yutec-home .yutec-expertise { padding: calc(51px + min(27px,2cqw)) 0 117px; }
	.yutec-home .yutec-expertise__inner,
	.yutec-home .yutec-steps__inner,
	.yutec-home .yutec-cta__inner { width: 90%; max-width: 1200px; padding-inline: 0; }
	.yutec-home .yutec-expertise__box {
		min-height: 383px;
		width: 99%;
		grid-template-columns: 33.3333% minmax(0,1fr);
	}
	.yutec-home .yutec-expertise__heading { width: 60%; margin: 0; }
	.yutec-home .yutec-expertise__intro { width: 60%; font-size: 16px; line-height: 28px; margin-bottom: 15px; }
	.yutec-home .yutec-exp-cats { padding: 37px 36px 30px 31px; }
	.yutec-home .yutec-exp-cat { font-size: 18px; line-height: 34px; padding: 7px 0 7px 11px; }
	.yutec-home .yutec-exp-panel { margin: 30px 6.5% 30px 5.4%; padding: 0; grid-template-columns: 1fr 1fr; gap: 0; }
	.yutec-home .yutec-exp-subs { padding: 6px 19px 6px 5px; }
	.yutec-home .yutec-exp-sub { padding: 5px 5px 5px 10px; font: 700 18px/34px var(--yutec-police-texte); }
	.yutec-home .yutec-exp-detail { margin-left: 30px; min-height: 300px; padding: 20px 10px 20px 17px; }

	.yutec-home .yutec-solution__heading,
	.yutec-home .yutec-expertise__heading,
	.yutec-home .yutec-why__heading,
	.yutec-home .yutec-steps__heading,
	.yutec-home .yutec-cta__title,
	.yutec-home .yutec-card__title,
	.yutec-home .yutec-feature__title,
	.yutec-home .yutec-step__title { padding-bottom: 10px; }

	.yutec-home .yutec-why { padding: 74px 0 4px; }
	.yutec-home .yutec-why__inner,
	.yutec-home .yutec-feature__inner {
		width: 90%; max-width: 1200px; padding-inline: 0;
	}
	.yutec-home .yutec-feature__row { width: 100%; grid-template-columns: calc(94% - max(47%,min(50%,550px))) max(47%,min(50%,550px)); gap: 3%; }
	.yutec-home .yutec-why__heading { margin-bottom: 73px; }
	.yutec-home .yutec-why .yutec-feature__media { padding: 30px 0; }
	.yutec-home .yutec-feature__checks .yutec-check { margin-bottom: -1.8px; }
	.yutec-home .yutec-why .yutec-feature__media img {
		height: auto;
	}

	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] {
		padding: 101px 0 calc(83px + min(27px,2cqw));
	}
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__media { padding: 50px 0; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__row {
		width: 100%;
		grid-template-columns: 50% 47%;
	}
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__media img {
		width: 350px;
		height: auto;
	}
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] {
		padding: 0 0 67px;
		margin-top: 1px;
	}
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] .yutec-feature__inner { width: 92%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] .yutec-feature__row { grid-template-columns: calc(94% - max(46.842%,min(50%,550px))) max(46.842%,min(50%,550px)); }
	.yutec-home .yutec-collage { padding-top: 58px; padding-bottom: 11px; }
	.yutec-home .yutec-collage img {
		width: 100%;
		height: auto;
	}

	.yutec-home .yutec-steps { padding: 63px 0 min(81px,6cqw); }
	.yutec-home .yutec-steps__heading { margin-bottom: 98px; }
	.yutec-home .yutec-steps__grid { gap: 3%; }
	.yutec-home .yutec-step__media { margin-bottom: min(18px,1.35cqw); }
	.yutec-home .yutec-step__media img {
		aspect-ratio: auto;
	}
	.yutec-home .yutec-cta { padding: 91px 0 115px; }
	.yutec-home .yutec-cta__inner { width: 95%; }
	.yutec-home .yutec-cta__panel { padding: 25px 40px 48px; }
	.yutec-home .yutec-cta__title { max-width: 650px; margin-bottom: 9px; }
	.yutec-home .yutec-cta__btn { line-height: 28.9px; padding: 9px 35px; }
}

/* La référence réserve 85vh au hero entre 980 et 1400px, puis 690px.
   Le header natif est dans le flux : on conserve le même centrage du contenu. */
@media (min-width: 981px) and (max-width: 1400px) {
	.yutec-home .yutec-hero { min-height: calc(85vh + 14.6px); display: flex; align-items: center; padding: 40.6px 0 0; }
}

/* Accueil téléphone : hero et solution comparés après les révélations publiques.
   Largeurs fluides et hauteurs minimales : ne pas tronquer les textes à 320px. */
@media (max-width: 767px) {
	.yutec-home .yutec-hero { padding-bottom: 2px; }
	.yutec-home .yutec-hero__title { min-height: 150px; }
	.yutec-home .yutec-hero__subtitle { margin-top: 13px; }
	.yutec-home .yutec-hero__trust { margin-bottom: 10px; }
	.yutec-home .yutec-marquee { container-type: inline-size; width: 95%; min-height: 44px; margin: 0 auto; }
	.yutec-home .yutec-marquee__viewport { padding-bottom: 8px; }
	.yutec-home .yutec-marquee__track { gap: 0; }
	.yutec-home .yutec-marquee__item { width: 50cqw; }
	.yutec-home .yutec-solution { padding: 50px 0 20px; }
	.yutec-home .yutec-solution__inner { width: 90%; padding-inline: 0; gap: 45px; }
	.yutec-home .yutec-solution__heading { font-size: 32px; line-height: 1.4; padding-bottom: 10px; margin-bottom: 1px; }
	.yutec-home .yutec-solution__text { font-size: 16px; line-height: 30px; margin: 0; }
	.yutec-home .yutec-solution__intro > .yutec-btn { display: none; }
	.yutec-home .yutec-solution__cards { grid-template-columns: 1fr; gap: 30px; }
	.yutec-home .yutec-card { min-height: 220px; padding: 10px 25px; margin-left: 3px; width: 100%; }
	.yutec-home .yutec-card[data-home-card="0"] { order: 2; }
	.yutec-home .yutec-card[data-home-card="1"] { order: 1; padding-top: 15px; margin-bottom: 25px; }
	.yutec-home .yutec-card[data-home-card="2"] { order: 3; }
	.yutec-home .yutec-card[data-home-card="3"] { order: 4; display: none; }
	.yutec-home .yutec-card__icon { display: flex; }
	.yutec-home .yutec-card__text { line-height: 27.2px; }
	.yutec-home .yutec-expertise { padding: 58px 0 45px; }
	.yutec-home .yutec-expertise__inner,
	.yutec-home .yutec-why__inner,
	.yutec-home .yutec-steps__inner { width: 90%; padding-inline: 0; }
	.yutec-home .yutec-expertise__heading { font-size: 32px; line-height: 44.8px; padding-bottom: 10px; margin: 0; }
	.yutec-home .yutec-expertise__intro { font-size: 16px; line-height: 28px; margin-bottom: 15px; }
	.yutec-home .yutec-expertise__box { grid-template-columns: 1fr; }
	.yutec-home .yutec-exp-cats { flex-direction: column; gap: 7px; padding: 27px 2% 20px; margin-bottom: 0; border: 0; }
	.yutec-home .yutec-exp-cat { width: 100%; border: 1px solid rgba(10,0,0,.12); padding: 7px 0 7px 11px; font: 700 16px/34px var(--yutec-police-texte); }
	.yutec-home .yutec-exp-panel { padding: 15px 0 20px; margin-inline: 3%; grid-template-columns: 1fr; gap: 18px; }
	.yutec-home .yutec-exp-subs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 6px 5px; margin: 0; }
	.yutec-home .yutec-exp-sub { width: 48%; flex: 0 1 auto; margin-right: .5%; padding: 6px 11px; border: 1px solid rgba(10,0,0,.15); font: 700 16px/34px var(--yutec-police-texte); }
	.yutec-home .yutec-exp-panel:first-child .yutec-exp-sub:nth-child(3) { width: 55%; }
	.yutec-home .yutec-exp-panel:first-child .yutec-exp-sub:nth-child(4) { width: 41%; }
	.yutec-home .yutec-exp-sub.is-active { border-color: rgba(10,0,0,.15); }
	.yutec-home .yutec-exp-detail { min-height: 240px; padding: 20px 5px 25px 15px; }
	.yutec-home .yutec-exp-detail__title { font-size: 17px; }
	.yutec-home .yutec-why { padding: 64px 0 27px; }
	.yutec-home .yutec-why__heading { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; margin-bottom: 21px; }
	.yutec-home .yutec-feature__row { gap: 30px; }
	.yutec-home .yutec-feature__title { font-size: 22px; line-height: 26.4px; }
	.yutec-home .yutec-feature__content p { line-height: 30px; max-width: none; }
	.yutec-home .yutec-feature__content p:last-of-type { margin-bottom: 20px; }
	.yutec-home .yutec-feature__checks li { font-size: 17px; line-height: 30.6px; }
	.yutec-home .yutec-check { width: 26px; height: 26px; flex-basis: 26px; }
	.yutec-home .yutec-why .yutec-feature__media { padding: 30px 0; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] { padding: 38px 0 1px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__inner { width: 91%; padding: 0; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__media { display: flex; padding: 20px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] img { width: 90%; max-width: 350px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] { padding: 30px 0 42px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] .yutec-feature__inner { width: 92%; padding: 0; }
	.yutec-home .yutec-feature__media--collage { padding: 4px 20px 20px; }
	.yutec-home .yutec-collage { padding-top: 58px; padding-bottom: 11px; }
	.yutec-home .yutec-collage__stack { gap: 14.4px; }
	.yutec-home .yutec-steps { padding: 53px 0 30px; }
	.yutec-home .yutec-steps__heading { font-size: 31px; line-height: 43.4px; padding-bottom: 10px; margin-bottom: 21px; }
	.yutec-home .yutec-steps__grid { max-width: none; gap: 30px; }
	.yutec-home .yutec-step__media { margin-bottom: 30px; }
	.yutec-home .yutec-cta { padding: 20px 0 22px; }
	.yutec-home .yutec-cta__inner { width: 95%; padding: 0; }
	.yutec-home .yutec-cta__panel { padding: 20px 12px 38px; }
	.yutec-home .yutec-cta__title { font-size: 27px; line-height: 35.1px; padding-bottom: 10px; margin-bottom: 8px; max-width: none; }
	.yutec-home .yutec-cta__btn { line-height: 28.9px; padding: 9px 35px; }
}

/* Accueil tablette : la référence garde deux colonnes pour les avantages et
   deux étapes puis la troisième centrée, contrairement au téléphone. */
@media (min-width: 768px) and (max-width: 980px) {
	.yutec-home .yutec-home-copy--standard { display: none; }
	.yutec-home .yutec-home-copy--tablet { display: inline; }
	.yutec-home .yutec-hero { min-height: 859.6px; display: flex; align-items: center; padding: 48px 0 0; }
	.yutec-home .yutec-hero__inner { width: 88%; padding: 0; margin-inline: auto; }
	.yutec-home .yutec-hero__badge { display: inline-block; width: 85px; padding: 0; line-height: 28.5px; margin-bottom: 13px; }
	.yutec-home .yutec-hero__title { font-size: 44px; line-height: 60.8px; letter-spacing: -1.5px; padding-bottom: 10px; }
	.yutec-home .yutec-hero__subtitle { width: 90%; font-size: 18px; line-height: 27px; margin-top: 18px; }
	.yutec-home .yutec-hero__subtitle::after { content: "\00a0"; }
	.yutec-home .yutec-hero__cta { margin-top: 41px; gap: 20px; }
	.yutec-home .yutec-hero__cta .yutec-btn { line-height: 28.9px; }
	.yutec-home .yutec-hero__trust { margin: 82px 0 10px; }
	.yutec-home .yutec-marquee { container-type: inline-size; width: 95%; margin: 0 auto; }
	.yutec-home .yutec-marquee__track { gap: 10px; }
	.yutec-home .yutec-marquee__viewport { padding-bottom: 8px; }
	.yutec-home .yutec-marquee__item { width: calc((100cqw - 20px) / 3); }
	.yutec-home .yutec-marquee__item img { max-height: none; width: auto; max-width: 100%; }
	.yutec-home .yutec-solution { padding: 61px 0 67px; }
	.yutec-home .yutec-solution__inner,
	.yutec-home .yutec-expertise__inner,
	.yutec-home .yutec-why__inner,
	.yutec-home .yutec-feature__inner,
	.yutec-home .yutec-steps__inner { width: 90%; padding: 0; }
	.yutec-home .yutec-solution__inner { gap: 64px; }
	.yutec-home .yutec-solution__heading { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; margin-bottom: 1px; }
	.yutec-home .yutec-solution__text { width: 70%; font-size: 16px; line-height: 27px; margin: 0; }
	.yutec-home .yutec-solution__intro > .yutec-btn { display: none; }
	.yutec-home .yutec-solution__cards { grid-template-columns: repeat(2,minmax(0,45%)); gap: 30px 5%; }
	.yutec-home .yutec-card { min-height: 228px; padding: 10px 25px; }
	.yutec-home .yutec-card__icon { display: flex; }
	.yutec-home .yutec-card__text { line-height: 27.2px; }
	.yutec-home .yutec-card[data-home-card="1"] { order: 1; }
	.yutec-home .yutec-card[data-home-card="0"] { order: 2; }
	.yutec-home .yutec-card[data-home-card="3"] { order: 3; }
	.yutec-home .yutec-card[data-home-card="2"] { order: 4; }
	.yutec-home .yutec-expertise { padding: 57px 0 44px; }
	.yutec-home .yutec-expertise__heading { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; margin: 0; }
	.yutec-home .yutec-expertise__intro { font-size: 16px; line-height: 28px; margin-bottom: 15px; }
	.yutec-home .yutec-exp-cats { gap: 1%; padding: 27px 2% 30px; flex-wrap: nowrap; }
	.yutec-home .yutec-exp-cat { width: 32%; border: 1px solid rgba(10,0,0,.12); padding: 7px 0 7px 11px; font: 700 16px/34px var(--yutec-police-texte); }
	.yutec-home .yutec-exp-panel { padding: 30px 0; margin: 0 2.6% 0 1.5%; grid-template-columns: 1fr; gap: 13px; }
	.yutec-home .yutec-exp-subs { flex-direction: row; flex-wrap: wrap; padding: 6px 5px; gap: 8px; }
	.yutec-home .yutec-exp-sub { width: 24%; border: 1px solid rgba(10,0,0,.15); padding: 4px 0 4px 5px; font: 700 16px/34px var(--yutec-police-texte); }
	.yutec-home .yutec-exp-detail { width: 50%; min-height: 300px; padding: 30px 20px 25px; }
	.yutec-home .yutec-exp-detail__title { font-size: 21px; }
	.yutec-home .yutec-why { padding: 38px 0 33px; }
	.yutec-home .yutec-why__heading { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; margin-bottom: 60px; }
	.yutec-home .yutec-feature__row { grid-template-columns: 45% 50%; gap: 3%; }
	.yutec-home .yutec-feature__row--media-left .yutec-feature__media { order: -1; }
	.yutec-home .yutec-feature__title { font-size: 22px; line-height: 26.4px; }
	.yutec-home .yutec-feature__content p { line-height: 27px; max-width: none; }
	.yutec-home .yutec-feature__checks li { font-size: 16px; line-height: 28.8px; }
	.yutec-home .yutec-check { width: 26px; height: 26px; flex-basis: 26px; }
	.yutec-home .yutec-why .yutec-feature__content { padding-top: 20px; }
	.yutec-home .yutec-why .yutec-feature__media { padding: 30px 0; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] { padding: 34px 0 35px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__row { grid-template-columns: 50% 45%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__content { padding-top: 20px; padding-bottom: 30px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] .yutec-feature__media { display: flex; padding: 50px 0; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] img { width: min(70%, calc(350px - 20%)); }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] p { width: 90%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-opportunite"] p:last-of-type { margin-bottom: 5px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] { padding: 0 0 52px; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] .yutec-feature__inner { width: 92%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] .yutec-feature__row { grid-template-columns: 50.5% 46.5%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] p { width: 95%; }
	.yutec-home .yutec-feature[aria-labelledby="yutec-feature-conditions"] p:last-of-type { margin-bottom: 30px; }
	.yutec-home .yutec-collage { padding: 58px 0 11px; }
	.yutec-home .yutec-steps { padding: 63px 0 80px; }
	.yutec-home .yutec-steps__heading { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; margin-bottom: 98px; }
	.yutec-home .yutec-steps__grid { grid-template-columns: repeat(2,minmax(0,45%)); gap: 30px 10%; max-width: none; }
	.yutec-home .yutec-step:last-child { grid-column: 1 / -1; width: 45%; margin-left: 30%; }
	.yutec-home .yutec-step__media { margin-bottom: 30px; }
	.yutec-home .yutec-cta { padding: 19px 0 26px; }
	.yutec-home .yutec-cta__inner { width: 95%; padding: 0; }
	.yutec-home .yutec-cta__panel { padding: 33px 40px 36px; }
	.yutec-home .yutec-cta__title { font-size: 28px; line-height: 39.2px; padding-bottom: 10px; max-width: none; margin-bottom: 2px; }
	.yutec-home .yutec-cta__btn { line-height: 28.9px; padding: 9px 35px; }
	.yutec-home .yutec-cta__arrow { display: none; }
}
@media (min-width: 768px) and (max-width: 979px) {
	.yutec-home .yutec-hero { min-height: 0; padding: 73px 0 31px; }
}
@media (min-width: 901px) and (max-width: 979px) {
	.yutec-home .yutec-hero { padding-top: 78.6px; }
}
@media (width: 768px) {
	.yutec-home .yutec-hero__cta .yutec-btn--soft { margin-top: 20px; }
	.yutec-home .yutec-hero__cta { align-items: start; }
	.yutec-home .yutec-exp-subs { gap: 8px; }
	.yutec-home .yutec-exp-sub { width: 48%; }
	.yutec-home .yutec-exp-panel:first-child .yutec-exp-sub:nth-child(3) { width: 55%; }
	.yutec-home .yutec-exp-panel:first-child .yutec-exp-sub:nth-child(4) { width: 41%; }
	.yutec-home .yutec-exp-detail { min-height: 240px; width: 100%; padding-bottom: 11px; }
}

/* Footer marketing partagé : mesures publiques après chargement du badge externe.
   Portée volontairement limitée : les gabarits Ressource ont leur propre cascade. */
:is(.page-template-home,.yutec-business-chrome) .yutec-footer { background: #f5f6f4; color: var(--yutec-titre); font: 500 17px/34px var(--yutec-police-texte); }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-footer__inner { width: min(1200px,95%); height: auto; padding: 55px 0 21px 14px; grid-template-columns: 33% 18% 18% 25%; column-gap: 2%; row-gap: 27px; align-items: start; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-logo { display: flex; align-items: flex-start; gap: 15px; height: 43px; padding: 0; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-logo__img { width: 35px; height: 35px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-logo__text { color: var(--yutec-marine); font: 700 22px/33px var(--yutec-police-titres); letter-spacing: .7px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__desc { max-width: none; margin: 8px 0 20px; font: 500 15px/24px var(--yutec-police-texte); }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__social { height: 30px; gap: 15px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #000; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__social svg { width: 30px; height: 30px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__social [aria-label="Instagram"] svg { padding: 5px; border-radius: 5px; background: currentColor; fill: #fff; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__plan { margin-top: 3px; color: #000; font: 500 14px/34px var(--yutec-police-texte); }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__head { margin: 0 0 23px; color: var(--yutec-titre); font: 700 16px/34px var(--yutec-police-texte); letter-spacing: 1px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__col ul { gap: 0; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__col li { min-height: 0; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__col a { display: inline-block; color: #000; font: 500 16px/34px var(--yutec-police-texte); }
:is(.page-template-home,.yutec-business-chrome) nav.yutec-footer__col a { display: block; }
:is(.page-template-home,.yutec-business-chrome) nav.yutec-footer__col li:not(:last-child) { padding-bottom: 16px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__inner > .yutec-footer__col:last-child { padding-top: 3px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__inner > .yutec-footer__col:last-child .yutec-footer__head { margin-bottom: 15px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li { min-height: 48px; gap: 12px; align-items: flex-start; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li:last-child { min-height: 34px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact a { font-size: 15px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact svg { width: 15px; height: 15px; color: var(--yutec-titre); margin-top: 10px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li:nth-child(n+2) svg { fill: currentColor; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li:nth-child(3) svg path { stroke: #f5f6f4; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li:last-child svg circle { fill: #f5f6f4; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact span { font-size: 14px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact sup { font-size: inherit; vertical-align: baseline; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__bar-inner { position: relative; width: 100%; max-width: none; height: auto; padding: 6px 0 57px; border: 0; gap: 44px; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__bar-inner::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; width: min(840px,72%); height: 1px; background: #ddd; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__legal { display: grid; width: 680px; max-width: 100%; grid-template-columns: 30% 31% 32%; gap: 2%; text-align: center; }
:is(.page-template-home,.yutec-business-chrome) .yutec-footer__legal a { height: auto; color: var(--yutec-texte); font: 500 15px/34px var(--yutec-police-texte); white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1215px) {
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-footer__inner { width: 90%; }
}
@media (min-width: 768px) and (max-width: 980px) {
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-footer__inner { grid-template-columns: repeat(3,32%); }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__brand { grid-column: 1 / -1; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__desc { max-width: 400px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__bar-inner { gap: 80px; padding-bottom: 60px; }
}
@media (max-width: 767px) {
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer .yutec-footer__inner { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 0; padding-bottom: 20px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__brand,
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__inner > .yutec-footer__col:last-child { grid-column: 1 / -1; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__inner > .yutec-footer__col:last-child .yutec-footer__head { margin-bottom: 19px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__col a { font-size: 15px; }
	:is(.page-template-home,.yutec-business-chrome) nav.yutec-footer__col li:not(:last-child) { padding-bottom: 15px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li { min-height: 40px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__contact li:nth-child(3) { min-height: 39px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__legal { display: flex; flex-direction: column; align-items: center; gap: 5px; }
	:is(.page-template-home,.yutec-business-chrome) .yutec-footer__bar-inner { gap: 50px; padding-bottom: 60px; }
}

/* Section 5 « Comment ça marche ? » — étapes verticales (gauche) + accroche (droite). */
.yutec-vsteps {
	background: #fff;
	padding: 83px 0 42px; /* gaps visibles calés sur prod (↑163, ↓128 vers CTA) */
	font-family: var(--yutec-police-texte);
}
.yutec-vsteps__list {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

/* Timeline verticale (repro DSM « Content Timeline ») : un rail gris #eee et,
   par-dessus, une progression bleue #0044c3 pilotée au scroll (hauteur via la
   variable --yutec-vsteps-progress, posée par main.js). Le rail passe au centre
   des pastilles (44px → centre à 22px) ; les pastilles, opaques, le masquent. */
.yutec-vsteps__list::before,
.yutec-vsteps__list::after {
	content: '';
	position: absolute;
	left: 20px;
	top: 22px;
	width: 3px;
	border-radius: 3px;
	z-index: 0;
}
.yutec-vsteps__list::before {
	height: var(--yutec-vsteps-track, 0px);
	background: #eee;
}
.yutec-vsteps__list::after {
	height: var(--yutec-vsteps-progress, 0px);
	background: var(--yutec-bleu);
	transition: height 0.1s linear;
}
.yutec-vstep {
	display: flex;
	gap: 18px;
}
.yutec-vstep__icon {
	position: relative;
	z-index: 1;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #d1ddf4; /* opaque (équiv. rgba(0,68,195,.18) sur blanc) — masque le rail */
	color: var(--yutec-bleu);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* Étape atteinte au scroll : la pastille s'active en bleu plein (repro DSM
   .dsm-pointer-active). Classe posée par main.js. */
.yutec-vstep.is-active .yutec-vstep__icon {
	background: var(--yutec-bleu);
	color: #fff;
}
.yutec-vstep__icon svg {
	width: 22px;
	height: 22px;
}

/* Repli en 1 colonne calé sur prod (Divi = 980px), comme la home.
   `minmax(0, 1fr)` (et non `1fr` = `minmax(auto,1fr)`) : le plancher `auto`
   prenait le min-content de la colonne, or celle de « Une diversité » contient
   le marquee d'outils (piste ~3774px) → la colonne gonflait à 1200px et créait
   un énorme débordement horizontal sur mobile. Plancher à 0 = la colonne suit
   la largeur de l'écran, le marquee (overflow:hidden) clippe sa piste. */
@media (max-width: 980px) {
	/* On annule AUSSI grid-row (pas seulement grid-column) : sans ça, le
	   `grid-row: 1` des listes (expcards/vsteps) les maintient en première
	   ligne → cartes affichées AVANT l'accroche/titre sur mobile. On rétablit
	   l'ordre du DOM (titre puis cartes), comme prod. */
	.yutec-solution--reverse .yutec-solution__intro,
	.yutec-solution--reverse .yutec-solution__cards,
	.yutec-expcards__intro,
	.yutec-expcards__list,
	.yutec-vsteps__intro,
	.yutec-vsteps__list {
		grid-column: auto;
		grid-row: auto;
	}
}
.yutec-business-menu nav { gap: 20px; }
.yutec-business-menu svg { width: 22px; height: 22px; }
@media (min-width: 981px) {
	.yutec-business-menu { display: none; }
}

/* Accueil : le panneau public flotte sous le header, jusqu'à 980 px.
   Conserver la hauteur du header évite de décaler le corps déjà comparé. */
.yutec-home-phone { display: none; }
.page-template-home .yutec-home-menu {
	position: absolute;
	top: calc(100% - 6px);
	left: 2.5%;
	width: 95%;
	padding: 28px 9px 20px;
	border: 1px solid #e5e5e5;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
	max-height: calc(100dvh - 130px);
	overflow-y: auto;
}
.yutec-home-menu nav { gap: 23px; }
.page-template-home .yutec-home-menu nav a, .yutec-home-menu summary {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #d3d3d3;
	border-radius: 10px;
	color: var(--yutec-texte);
	font: 500 16px/24px var(--yutec-police-texte);
	text-align: center;
}
.page-template-home .yutec-home-menu nav .yutec-home-menu__signup {
	min-height: 51.2px;
	border: 0;
	background: var(--yutec-bleu);
	color: #fff;
}
.yutec-home-menu svg { width: 22px; height: 22px; flex-shrink: 0; }
.yutec-home-menu summary { list-style: none; cursor: pointer; border: 0; min-height: 47px; color: #000; font-weight: 600; }
.yutec-home-menu__resources { border: 1px solid #d3d3d3; border-radius: 10px; }
.yutec-home-menu__resources[open] { padding-bottom: 10px; }
.yutec-home-menu summary::-webkit-details-marker { display: none; }
.yutec-home-menu__resources[open] summary svg { transform: rotate(180deg); }
.yutec-home-menu__resources a { margin: 10px 9px 0; }
.yutec-home-menu :is(a, summary):focus-visible,
.page-template-home .yutec-burger:focus-visible,
.yutec-home-phone:focus-visible { outline: 3px solid var(--yutec-marine); outline-offset: 3px; }
@media (min-width: 981px) { .yutec-home-menu { display: none; } }
@media (max-width: 980px) {
	.page-template-home .yutec-header__inner { gap: 12px; }
	.page-template-home .yutec-header :is(.yutec-nav, .yutec-header__actions) { display: none; }
	.page-template-home .yutec-burger { display: flex; margin-left: 0; flex-shrink: 0; border-radius: 7px; }
	.page-template-home .yutec-burger[aria-expanded="true"] { background: var(--yutec-bleu); }
	.page-template-home .yutec-burger[aria-expanded="true"] span { background: #fff; }
	.page-template-home .yutec-burger[aria-expanded="true"] span:nth-child(n) { transform: none; opacity: 1; }
	.yutec-home-phone { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--yutec-bleu); font: 500 14px/1.5 var(--yutec-police-titres); white-space: nowrap; text-decoration: none; }
	.yutec-home-phone svg { width: 17px; height: 17px; }
	.page-template-home .yutec-header:not(.is-scrolled) .yutec-home-phone { visibility: hidden; }
}
@media (min-width: 901px) and (max-width: 980px) {
	.page-template-home .yutec-header__inner { height: 66.4px; }
}
@media (max-width: 360px) {
	.page-template-home .yutec-header__inner { gap: 6px; }
	.yutec-home-phone { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.page-template-home .yutec-burger span { transition: none; }
}

/* ==========================================================================
   CHROME MAISON — header + footer (chargés via get_header/get_footer 'yutec')
   ========================================================================== */

/* Lien d'évitement (a11y) */
.yutec-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--yutec-bleu);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 8px 0;
}
.yutec-skip:focus {
	left: 0;
}

/* --- Barre d'onglets audience --- */
.yutec-topbar {
	background: var(--yutec-bleu-fonce);
}
.yutec-topbar__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	gap: 4px;
}
.yutec-tab {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
	border-radius: 6px 6px 0 0;
}
.yutec-tab.is-active {
	background: #fff;
	color: var(--yutec-marine);
	font-weight: 400; /* prod : l'onglet actif est en graisse normale (pas gras) */
}

/* Téléphone : sur prod, les 2 onglets « Je suis un freelance / une entreprise »
   tiennent sur UNE ligne. Chez nous le padding horizontal (16px) faisait wrapper
   le texte à ~375px (onglets sur 2-3 lignes). On réduit padding + marges et on
   force le non-retour à la ligne pour reproduire la topbar compacte de prod. */
@media (max-width: 480px) {
	.yutec-topbar__inner {
		padding-inline: 0.5rem;
		gap: 2px;
	}
	.yutec-tab {
		padding: 6px 9px;
		white-space: nowrap;
	}
}

/* Garder les deux libellés entiers, y compris avec une barre de défilement. */
@media (max-width: 340px) {
	.yutec-topbar__inner {
		padding-inline: 0.125rem;
	}
	.yutec-tab {
		padding-inline: 5px;
		font-size: 14px;
	}
}

/* --- Barre principale (sticky) --- */
.yutec-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	box-shadow: 0 1px 0 rgba(10, 0, 0, 0.06);
}
.yutec-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 14px 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Logo Yutec / Freelance */
.yutec-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.yutec-logo__img {
	width: 38px;
	height: 38px;
	display: block;
}
.yutec-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-weight: 700;
	font-size: 20px;
	color: var(--yutec-marine);
}
.yutec-logo__text small {
	font-size: 13px;
	font-weight: 600;
	color: var(--yutec-texte);
}

/* Nav + séparateur vertical */
.yutec-nav {
	display: flex;
	align-items: center;
	padding-left: 1.5rem;
	border-left: 1px solid #e3e5f0;
}

.yutec-nav__dd {
	position: relative;
}
.yutec-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #000;
	padding: 8px 4px;
}
.yutec-nav__chevron {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}
.yutec-nav__dd.is-open .yutec-nav__chevron {
	transform: rotate(180deg);
}
.yutec-nav__dd.is-open .yutec-nav__toggle,
.yutec-nav__dd:hover .yutec-nav__toggle {
	background: var(--yutec-color-soft-bg);
	border-radius: 8px;
}
.yutec-nav__menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 380px;
	background: #fff;
	border: 1px solid #e3e5f0;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(12, 22, 89, 0.12);
	padding: 12px;
	display: none;
	flex-direction: column;
	gap: 8px;
}
.yutec-nav__dd.is-open .yutec-nav__menu,
.yutec-nav__dd:hover .yutec-nav__menu {
	display: flex;
}
/* Cartes du mega-menu (titre + description), comme prod */
.yutec-nav__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid rgba(10, 0, 0, 0.08);
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.yutec-nav__card:hover {
	background: var(--yutec-color-soft-bg);
	border-color: #c2c8ec;
}
.yutec-nav__card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--yutec-marine);
}
.yutec-nav__card-desc {
	font-size: 14px;
	line-height: 1.4;
	color: #6b7080;
}

/* Nav entreprise : espace entre « Expertises » (dd) et « Solution » (lien). */
.yutec-nav {
	gap: 0.25rem;
}

/* Actions (boutons) poussées à droite */
.yutec-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.yutec-btn--sm {
	padding: 9px 25px;
	font-size: 15px;
}

/* Boutons du header : « S'inscrire » (primaire) un peu plus large, comme prod */
.yutec-header__actions .yutec-btn--primary {
	padding-inline: 36px;
}

/* Burger (mobile uniquement) */
.yutec-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	margin-left: auto;
}
.yutec-burger span {
	display: block;
	height: 2px;
	width: 24px;
	margin-inline: auto;
	background: var(--yutec-marine);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.yutec-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.yutec-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yutec-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau mobile */
.yutec-mobile {
	border-top: 1px solid #e3e5f0;
	padding: 1rem 1.25rem 1.5rem;
}
.yutec-mobile[hidden] {
	display: none;
}
.yutec-mobile nav {
	display: flex;
	flex-direction: column;
}
.yutec-mobile nav a {
	padding: 12px 4px;
	color: var(--yutec-marine);
	text-decoration: none;
	font-size: 17px;
	border-bottom: 1px solid #f0f1f6;
}

/* --- Footer maison --- */
.yutec-footer {
	background: #f5f5f7;
	color: var(--yutec-texte);
	margin-top: 0;
}
.yutec-footer__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding: 3.5rem 1.25rem 2.5rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 2.5rem;
}
.yutec-footer__desc {
	margin: 1rem 0 1.25rem;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.55;
}
/* Icônes sociales : glyphes noirs nus ~26px (prod mesuré : ETmodules 30px, sans cercle). */
.yutec-footer__social {
	display: flex;
	align-items: center;
	gap: 14px;
}
.yutec-footer__social a {
	display: inline-flex;
	color: #000;
	transition: color 0.15s ease, transform 0.15s ease;
}
.yutec-footer__social a:hover {
	color: var(--yutec-bleu);
	transform: translateY(-1px);
}
@media (max-width: 980px) {
	.yutec-footer__social { gap: 8px; }
	.yutec-footer__social a {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
}
/* « Voir le plan de site » sous les icônes (prod : ~30px dessous, même colonne). */
.yutec-footer__plan {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	color: var(--yutec-texte);
	text-decoration: none;
}
.yutec-footer__plan:hover { color: var(--yutec-bleu); }
.yutec-footer__head {
	margin: 0 0 1.1rem;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yutec-marine);
}
.yutec-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.yutec-footer__col a {
	color: var(--yutec-texte);
	text-decoration: none;
	font-size: 16px;
}
.yutec-footer__col a:hover {
	color: var(--yutec-bleu);
}
.yutec-footer__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--yutec-texte);
	font-size: 16px;
}
.yutec-footer__contact svg {
	flex: 0 0 auto;
	color: var(--yutec-bleu-fonce);
}
/* Barre basse prod : filet centré (pas pleine largeur), liens légaux centrés,
   badge carbone centré dessous. */
.yutec-footer__bar-inner {
	max-width: 780px;
	margin-inline: auto;
	padding: 1.1rem 1.25rem 1.4rem;
	border-top: 1px solid #e3e5f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	font-size: 14px;
}
.yutec-footer__bar a {
	color: #6b7080;
	text-decoration: none;
}
.yutec-footer__bar a:hover {
	color: var(--yutec-bleu);
}
.yutec-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
}

/* Divi bascule son footer sur une géométrie dédiée entre 768 et 1215px :
   conteneur à 90%, colonnes plus serrées puis, jusqu'à 980px, marque sur une
   première rangée et trois colonnes sur la seconde. */
@media (min-width: 981px) and (max-width: 1215px) {
	.yutec-footer__inner {
		width: 90%;
		height: 292px;
		padding: 55px 0 12px 14px;
		grid-template-columns: 33% 18% 18% 25%;
		gap: 2%;
	}
	.yutec-footer__bar-inner { height: 122.9px; }
}

@media (min-width: 768px) and (max-width: 980px) {
	.yutec-footer .yutec-footer__inner {
		width: 90%;
		height: 507px;
		padding: 55px 0 10px 14px;
		grid-template-columns: repeat(3, 32%);
		column-gap: 2%;
		row-gap: 20.4px;
	}
	.yutec-footer__brand { grid-column: 1 / -1; }
	.yutec-footer__desc { max-width: 400px; line-height: 24px; }
	.yutec-footer__bar-inner { height: 191.5px; }
	.yutec-footer__head { margin-bottom: 23px; font-size: 16px; line-height: 34px; }
	.yutec-footer__col ul { gap: 0; }
	.yutec-footer__col li { min-height: 50px; }
	.yutec-footer__contact li { min-height: 47.5px; }
}

@media (min-width: 768px) and (max-width: 1215px) {
	.yutec-footer { overflow: hidden; }
	.yutec-footer .yutec-logo__img { width: 35px; height: 35px; }
	.yutec-footer__social { gap: 0; }
	.yutec-footer__social a { width: 45px; height: 19px; }
	.yutec-footer__social a:last-child { width: 30px; }
	.yutec-footer__plan { margin-top: 14px; line-height: 34px; }
	.yutec-footer__bar-inner { padding-top: 16.4px; padding-inline: 20px; }
	.yutec-footer__legal {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 680px;
		max-width: 100%;
		gap: 0;
		font-size: 15px;
		line-height: 34px;
		text-align: center;
	}
	.yutec-footer__legal a { height: 34px; line-height: 34px; }
}

@media (max-width: 960px) {
	.yutec-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.yutec-nav,
	.yutec-header__actions {
		display: none;
	}
	.yutec-burger {
		display: flex;
	}
}

@media (max-width: 360px) {
	.yutec-header__inner { gap: 8px; padding-inline: 8px; }
}

@media (max-width: 560px) {
	.yutec-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
		padding-top: 55px;
	}
	.yutec-footer__brand,
	.yutec-footer__inner > .yutec-footer__col:last-child { grid-column: 1 / -1; }
	.yutec-footer__bar-inner { padding-top: 10.8px; padding-bottom: 36px; }
	.yutec-footer__legal {
		flex-direction: column;
		align-items: center;
		gap: 5px;
		font-size: 15px;
		line-height: 34px;
	}
	.yutec-footer__legal a { height: 34px; line-height: 34px; }
}
.yutec-family,
.yutec-metier {
	/* Même pile que la référence : éviter le repli system-ui qui modifie
	   les retours à la ligne lorsque Inter n'est pas disponible. */
	--yutec-font: "Inter", sans-serif;
}

/* Section 3 — « Des profils disponibles partout en France » (carrousel de
   profils live via iframe Bubble, comme prod — mesures : section pad 26/65 +
   row margin-top 48 ; viewport 500px marges 87.5 ; flèches 90×92 grises). */
.yutec-mmap {
	background: #fff;
	padding: 74px 0 65px;
	font-family: var(--yutec-police-texte);
}
.yutec-mmap__carousel { position: relative; }
.yutec-mmap__viewport {
	height: 500px;
	margin: 0 87.5px;
	padding-left: 12.5px;
	overflow: hidden;
}
.yutec-mmap__iframe {
	display: block;
	width: 1850px;
	max-width: none;
	height: 500px;
	border: 0;
}
.yutec-mmap__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 90px;
	height: 92px;
	padding: 10px;
	margin: 0;
	border: 0;
	background: transparent;
	color: #808080;
	cursor: pointer;
}
.yutec-mmap__arrow--prev { left: 0; }
.yutec-mmap__arrow--next { right: 0; }
.yutec-mmap__arrow:disabled { color: #d3d3d3; cursor: default; }
.yutec-mmap__arrow svg { display: block; }

/* Section 8 — Article SEO (contenu WordPress).
   Prod : fond de section très légèrement teinté + contenu découpé en CARDS
   blanches bordées (une par chapitre), largeur ~1080. */
.yutec-article {
	background: #f9fafb; /* prod : rgba(249,250,251,.5) — teinte légère */
	padding: 56px 0 64px;
	font-family: var(--yutec-police-texte);
}

/* --------------------------------------------------------------------------
   Recalage typographique DESKTOP des pages métier (mesuré le 2026-08-04 sur
   les 4 pages prod — Mécanique, SolidWorks, CATIA, Inventor — écarts rigoureu-
   sement identiques partout, donc un seul correctif).
   Scopé `min-width: 981px` À DESSEIN : tout le calage mobile (≤767) et la bande
   tablette ont leurs propres valeurs déjà validées ; on n'y touche pas.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.yutec-metier .yutec-mmap { min-height: var(--map-min-h-d, 0); }
}
/* « Trouvez un profil en 48h » : Inter + un cran plus grand (prod = Inter 28). */
.yutec-metier .yutec-feature__title,
.yutec-family--extended .yutec-feature__title { font-family: var(--yutec-font); font-size: 28px; }
.yutec-metier .yutec-feature__checks li,
.yutec-family--extended .yutec-feature__checks li { color: var(--yutec-texte); }
.yutec-metier .yutec-vsteps__list,
.yutec-family--extended .yutec-vsteps__list {
	grid-column: auto;
	grid-row: auto;
	gap: 68px;
}
.yutec-metier .yutec-vsteps__list::before,
.yutec-metier .yutec-vsteps__list::after,
.yutec-family--extended .yutec-vsteps__list::before,
.yutec-family--extended .yutec-vsteps__list::after { left: 19px; top: 20px; }
.yutec-metier .yutec-vstep__icon,
.yutec-family--extended .yutec-vstep__icon {
	flex-basis: 41px;
	width: 41px;
	height: 41px;
	padding: 5px;
	border: 5px solid rgba(255, 255, 255, 0.28);
	/* fond opaque (translucide prod aplati sur le fond de section) : masque le rail */
	background: linear-gradient(rgba(0, 68, 195, 0.3), rgba(0, 68, 195, 0.3)) #fafbfe;
	color: var(--yutec-bleu);
}
.yutec-metier .yutec-vstep.is-active .yutec-vstep__icon,
.yutec-family--extended .yutec-vstep.is-active .yutec-vstep__icon {
	/* prod métier : la pastille ne change PAS quand l'étape est atteinte */
	background: linear-gradient(rgba(0, 68, 195, 0.3), rgba(0, 68, 195, 0.3)) #fafbfe;
	color: var(--yutec-bleu);
}
.yutec-metier .yutec-vstep__icon svg,
.yutec-family--extended .yutec-vstep__icon svg { width: 14px; height: 14px; }
/* CTA final métier : panneau blanc bordé (prod mesuré), titre sur une ligne. */
.yutec-metier .yutec-cta__panel {
	background: #fff;
	border: 1px solid rgba(10, 0, 0, 0.14);
	padding: 30px 40px;
}
.yutec-metier .yutec-cta__title { max-width: none; }

/* Responsive métier */
@media (max-width: 980px) {
	/* Carrousel profils : marges latérales réduites (prod mobile = 7.5px). */
	.yutec-mmap__viewport { margin: 0 7.5px; }
}
@media (max-width: 767px) {
	/* Marquee logos : cases plus larges sur mobile (prod : logo 140px). */
	.yutec-marquee__item { width: 140px; }
	.yutec-marquee__track { gap: 28px; }
	/* Bloc 48h AVANT le widget (prod mobile inverse les colonnes). */
	.yutec-metier .yutec-feature__row,
	.yutec-family--extended .yutec-feature__row { display: flex; flex-direction: column; }
	.yutec-metier .yutec-feature__media,
	.yutec-family--extended .yutec-feature__media { order: 2; }

	/* Variante publique explicite : pas de déplacement global des 26 métiers.
	   Le JS aligne l'ordre de lecture/clavier ; CSS couvre le repli sans JS. */
	.yutec-metier--mobile-cta-first {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.yutec-metier--mobile-cta-first > .yutec-cta { order: 1; }
	.yutec-metier--mobile-cta-first > .yutec-article { order: 2; }
}

/* Variante métier historique : géométrie mobile relevée sur les pages
   publiques. Les variantes Consultant, EIA et Maintenance restent isolées. */
@media (max-width: 767px) {
	:is(.yutec-metier--mobile-cta-first, .yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-vstep { grid-template-columns: 47px minmax(0, 1fr); gap: 20px; }
	.yutec-metier--mobile-cta-first > .yutec-cta { padding: 10px 0 30px; }
	.yutec-metier--mobile-cta-first .yutec-cta__inner { width: 95%; padding: 0; }
	.yutec-metier--mobile-cta-first .yutec-cta__panel { padding: 20px 12px 10px; }
	.yutec-metier--mobile-cta-first .yutec-cta__title { font-size: 27px; line-height: 1.3; margin: 0; padding-bottom: 10px; }
}

/* AutoCAD / Supply Chain : rythme des sections en amont, relevé public 18/09.
   Hauteurs pilotées par le contenu ; les contrôles du finder restent à 44 px,
   sans reprendre la réduction à 70 % du formulaire public sur téléphone. */
@media (min-width: 1216px) {
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-mmap { padding-top: 89px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-mmap__carousel { padding-bottom: 35.75px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-vsteps__list { gap: 72px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-vstep { gap: 69px; }
}
@media (max-width: 767px) {
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-mmap { padding: 51px 0 20px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-why { padding: 50px 0 27px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-why__inner { width: 90%; padding: 0; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-feature__title { font-size: 24px; line-height: 1.2; padding-bottom: 24px; margin-bottom: 1px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-feature__content > p { line-height: 30px; margin-bottom: 20px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-feature__checks { gap: 10px; }
	:is(.yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain) .yutec-feature__checks li { font-size: 17px; line-height: 30.6px; }
}

/* Articles longs : quatre variantes relevées sur le site public le 17/09/2026.
   Les cartes adjacentes restent éditables séparément, sans inventer de coupure
   visuelle lorsque la référence les regroupe dans un seul panneau. */
:is(.yutec-metier--redacteur-technique-freelance, .yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain, .yutec-metier--developpeur-scada) {
	--article-panel-width: 90%;
	--article-panel-border: 1px solid rgba(10, 0, 0, .13);
	--article-panel-background: #fff;
	--article-paragraph-leading: 1.8;
	--article-copy-gap: 17px;
	--article-panel-gap: 45px;
	--article-first-gap: 54px;
	--article-panel-inline: 20px;
	--article-small-heading: 19px;
}
:is(.yutec-metier--redacteur-technique-freelance, .yutec-metier--developpeur-scada) {
	--article-panel-width: 80%;
	--article-panel-border: 0;
	--article-panel-background: rgba(0, 68, 195, .07);
}
@media (max-width: 980px) {
	:is(.yutec-metier--redacteur-technique-freelance, .yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain, .yutec-metier--developpeur-scada) { --article-panel-width: 100%; }
}
@media (max-width: 767px) {
	:is(.yutec-metier--redacteur-technique-freelance, .yutec-metier--freelance-autocad, .yutec-metier--freelance-supply-chain, .yutec-metier--developpeur-scada) {
		--article-copy-gap: 16px; --article-panel-gap: 48px; --article-first-gap: 60px; --article-panel-inline: 13px;
	}
}

/* ==========================================================================
   CIBLES TACTILES — écart volontaire vs prod (arbitrage du 2026-08-04)
   Mesuré : prod = « Acceuil » 39×14, « Etude » 31×14, « Blog » 30×17 ;
   nous = « Etude » 37×21, « Blog » 32×17. La prod est donc en dessous du
   minimum WCAG 2.2 (SC 2.5.8 : 24×24 CSS px, niveau AA) sur ces éléments.
   Scopé aux pointeurs GROSSIERS : le rendu desktop reste calé au pixel sur
   prod, seuls les appareils tactiles bénéficient de l'agrandissement.
   ========================================================================== */
@media (pointer: coarse) {

	/* Liens des colonnes du footer (dont « Blog ») — ici la place ne manque
	   pas, on va donc jusqu'aux 44px de la recommandation Apple/WCAG 2.5.5.
	   Le gap de la liste est absorbé dans la hauteur du lien pour que la
	   colonne ne s'allonge que de ~13px par lien. */
	.yutec-footer__col ul { gap: 0; }
	.yutec-footer__col a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ==========================================================================
   BANDE TABLETTE (768–980px) — pages métier
   Mesuré le 2026-08-04 sur les 4 pages prod, à 768, 834 ET 980px : la prod
   n'a qu'UN palier tablette (valeurs identiques aux trois largeurs), pas trois.
   Nos règles mobiles s'arrêtant à 767px, cette bande héritait jusqu'ici des
   valeurs desktop — d'où des titres jusqu'à 8px trop gros.
   ⚠️ Écart volontaire NON repris ici : à cette largeur la prod fait remonter la
   colonne de contenu AU-DESSUS du titre de section (on lit « Dépose de projet »
   puis « Comment ça marche ? »). Accident de repli Divi — la prod elle-même met
   le titre en premier sur mobile et sur desktop. On garde notre ordre.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 980px) {
	.yutec-metier .yutec-cta__title { font-size: 28px; line-height: 1.4; }
}