/*
 * Pages expertise (modèle « Expertise », pattern laligneweb/expertise-site-internet).
 *
 * Mise en page « dossier » : ouverture colorée avec sommaire, colonne fixe numérotée à gauche,
 * chapitres en bandes pleine largeur bordées d'encre, appel final. Le vocabulaire (stickers,
 * sections bordées, ombres décalées, ligne, personnage) vient de base.css.
 *
 * Couleur d'accent : classe du groupe racine « service service--vert » (ou --orange, --jaune,
 * --bleu, --violet). Elle colore le fond de l'ouverture, la bande d'avis, les stickers de
 * chapitre, le sommaire actif et les questions ouvertes.
 */

.service {
	--accent: var(--wp--preset--color--vert);
	--accent-clair: var(--wp--preset--color--menthe);
	--encre: var(--wp--preset--color--encre);
	--marge: 280px;                        /* largeur de la colonne fixe */
	--ecart: clamp(40px, 5vw, 80px);       /* espace entre la colonne et le contenu */
	--rebond: cubic-bezier(.3, 1.6, .5, 1);
	margin-block: 0;
}
/* Le groupe racine n'est qu'un conteneur : pas la marge des sections pleine largeur sur mobile (base.css). */
.contenu-blocs > .alignfull.service:not(.accueil-hero):not(.page-hero) { padding-block: 0 !important; }
.service--orange { --accent: var(--wp--preset--color--orange); --accent-clair: var(--wp--preset--color--orange-clair); }
.service--jaune { --accent: var(--wp--preset--color--jaune); --accent-clair: var(--wp--preset--color--jaune-clair); }
.service--bleu { --accent: var(--wp--preset--color--bleu); --accent-clair: var(--wp--preset--color--bleu-clair); }
.service--violet { --accent: var(--wp--preset--color--violet); --accent-clair: var(--wp--preset--color--violet-clair); }

.service > *, .service-dossier > * { margin-block: 0; }
/* Les bandes ne forment pas de contexte d'empilement : la ligne (z-index 1) passe sur leur fond,
   sous leur contenu, comme sur l'accueil. */
.service > *, .service-dossier > *:not(.service-marge) { z-index: auto; }
.service :where(h1, h2) em { display: block; }

/* ---------- Ouverture ---------- */
.service-ouverture {
	padding-block: clamp(140px, 13vw, 180px) clamp(70px, 8vw, 110px);
	background: var(--accent-clair);
}
.service-ouverture__grille { gap: clamp(40px, 6vw, 100px); }
.service-stickers { gap: 12px; }
.service-ouverture h1 { margin-top: 28px; font-size: clamp(42px, 6.4vw, 100px); line-height: .95; letter-spacing: -.04em; }
.service-chapo { margin-top: 26px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.45; }
.service-ouverture .wp-block-buttons { margin-top: 32px; }
.service-preuve { gap: 12px 18px; margin-top: 28px; font-weight: 600; }
.service-preuve p { margin: 0; }

/* Carte « Au sommaire » */
.service-sommaire {
	padding: 34px 32px 26px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 28px; box-shadow: var(--wp--preset--shadow--decale);
	transform: rotate(1.5deg);
}
.service-sommaire > .bloc-mascotte { position: absolute; right: -26px; top: -58px; z-index: 3; transform: rotate(8deg); }
.service-sommaire__titre { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-sommaire ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: c; }
.service-sommaire li { counter-increment: c; border-top: 2px solid var(--encre); }
.service-sommaire li a {
	position: relative; display: block; padding: 16px 0 16px 58px; color: inherit; text-decoration: none;
	font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
	transition: padding .35s cubic-bezier(.22, 1, .36, 1);
}
.service-sommaire li a::before {
	content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 50%; margin-top: -20px;
	display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--wp--preset--color--blanc); font-size: 14px; transition: background-color .2s;
}
.service-sommaire li a:hover { padding-left: 66px; }
.service-sommaire li a:hover::before { background: var(--accent); }
.service-sommaire em { font-style: normal; font-weight: 400; }

/* ---------- Dossier : colonne fixe en calque, bandes pleine largeur dessous ---------- */
.service-dossier { position: relative; }
.service-marge {
	position: absolute; inset: 0; z-index: 6; pointer-events: none;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
.service-marge__carte {
	position: sticky; top: 24px; width: var(--marge); pointer-events: auto;
	margin: clamp(60px, 7vw, 100px) 0 0 max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
	padding: 22px 22px 24px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 24px; box-shadow: 6px 6px 0 var(--encre);
}
.service-marge__carte > * { margin-block: 0; }
.service-marge__titre { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.service-marge__titre::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--encre); border-radius: 50%; background: var(--accent); }
.service-marge__titre em { font-style: normal; font-weight: 400; }
.service-marge__sommaire { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.service-marge__sommaire li { counter-increment: s; border-top: 2px solid var(--encre); }
.service-marge__sommaire a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.service-marge__sommaire a::before {
	content: counter(s, decimal-leading-zero); flex: none; display: grid; place-items: center;
	width: 32px; height: 32px; border: 2px solid var(--encre); border-radius: 50%; font-size: 12px; font-weight: 800;
	transition: background-color .25s, transform .35s var(--rebond);
}
.service-marge__sommaire a:hover::before { background: var(--accent-clair); }
.service-marge__sommaire a.est-actif { font-weight: 800; }
.service-marge__sommaire a.est-actif::before { background: var(--accent); transform: rotate(-12deg) scale(1.08); }
.service-progression { height: 10px; margin: 6px 0 18px !important; overflow: hidden; border: 2px solid var(--encre); border-radius: 99px; }
.service-progression span { display: block; width: 0; height: 100%; background: var(--accent); }
.service-marge__carte .wp-block-button, .service-marge__carte .wp-block-button__link { width: 100%; text-align: center; }
.service-marge__tel { margin-top: 12px !important; font-size: 14px; font-weight: 600; text-align: center; }
.service-marge__tel a { color: inherit; font-weight: 800; text-decoration: none; }

/* Bandes : le contenu commence après la colonne fixe. La marge est une bordure transparente,
   pour que les points de ligne (left: -36px) se placent dans la gouttière. */
.service-bande { padding-block: clamp(80px, 9vw, 130px); }
.service-bande--accent { background: var(--accent); }
.service-corps { border-left: calc(var(--marge) + var(--ecart)) solid transparent; }
.service-corps > * { margin-block: 0; }
.service-corps > * + * { margin-top: 24px; }
.service p.is-style-sticker.service-chapitre { background: var(--accent); }
.service-bande h2 { margin-top: 22px !important; max-width: 16em; font-size: clamp(36px, 4.4vw, 68px); line-height: .98; letter-spacing: -.035em; }
.service-bande h2 + * { margin-top: clamp(30px, 3.6vw, 52px) !important; }
.service-lead { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.5; }

/* Cartes (style commun aux 3 offres et aux 4 « inclus ») */
.service-carte {
	--ombre: var(--accent);
	position: relative; padding: 30px 26px 28px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--ombre);
	transition: transform .4s var(--rebond), box-shadow .4s;
}
.service-carte:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--ombre); }
.service-carte--orange { --ombre: var(--wp--preset--color--orange); }
.service-carte--bleu { --ombre: var(--wp--preset--color--bleu); }
.service-carte--violet { --ombre: var(--wp--preset--color--violet); }
.service-carte--jaune { --ombre: var(--wp--preset--color--jaune); }
/* Carte dont le titre est un lien (ex. sous-pages du Référencement) : toute la carte est cliquable. */
.service-carte h3 a { color: inherit; text-decoration: none; }
.service-carte h3 a::after { content: " →"; opacity: .5; }
.service-carte h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-carte > * { margin-block: 0; }
.service-carte h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.025em; }
.service-carte h3 + p { margin-top: 10px; color: var(--wp--preset--color--texte-doux); }
.service-carte__num { margin-bottom: 18px !important; font-size: 56px; font-weight: 300; line-height: .8; letter-spacing: -.05em; }

.service-cartes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(44px, 5vw, 64px) !important; }
.service-cartes > .service-carte:nth-child(2) { margin-top: 28px; }
/* Variante 2 × 2 (4 cartes) */
.service-cartes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-cartes--deux > .service-carte:nth-child(n) { margin-top: 0; }
.service-cartes--deux > .service-carte:nth-child(even) { margin-top: 28px; }

.service-exergue { gap: 18px 26px; margin-top: clamp(56px, 6vw, 88px) !important; }
.service-exergue > * { margin: 0; }
.service-exergue__texte { font-size: clamp(32px, 4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.service-exergue__texte em { font-style: normal; font-weight: 400; }

.service-inclus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; margin-top: 52px !important; }
.service-inclus .service-carte { padding-top: 40px; box-shadow: var(--wp--preset--shadow--decale); }
.service-inclus .service-carte:hover { box-shadow: 12px 12px 0 var(--encre); }
.service-inclus .is-style-sticker { position: absolute; left: 22px; top: -20px; }
.service-note { max-width: 60ch; margin-top: 44px !important; padding: 18px 24px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 22px; font-weight: 600; }
.service-note a, .service-faq a { color: inherit; font-weight: 800; }

/* Grande citation (bloc Citation en exergue) */
.service .service-citation { margin: 22px 0 0 !important; padding: 0; border: 0; text-align: left; font-size: inherit; }
.service-citation blockquote { margin: 0; padding: 0; border: 0; }
.service-citation blockquote p { max-width: 22em; margin: 0; font-size: clamp(28px, 3.6vw, 56px); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; }
.service-citation blockquote p strong { font-weight: 800; }
.service-citation cite {
	display: inline-flex; margin-top: 30px; padding: 10px 16px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 999px; box-shadow: 3px 3px 0 var(--encre);
	font-size: 16px; font-style: normal; font-weight: 800; line-height: 1; text-transform: none; transform: rotate(3deg);
}

/* Méthode : 4 étapes, la ligne passe par les pastilles */
.service-etapes { display: grid; gap: 22px; }
.service-etapes > *, .service-inclus > * { margin-block: 0; }
.service-etape {
	display: grid; grid-template-columns: 92px 1fr; gap: 28px; align-items: start;
	padding: 26px 30px 26px 26px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 24px;
}
.service-etape:nth-child(even) { margin-left: clamp(0px, 6vw, 90px); } 
.service-etape > * { margin: 0; }
.service-etape__num {
	display: grid; place-items: center; width: 92px; height: 92px; padding: 0 !important;
	border: 2px solid var(--encre); border-radius: 50%; box-shadow: 4px 4px 0 var(--encre);
	font-size: 34px; font-weight: 800; letter-spacing: -.04em; transform: rotate(-6deg);
}
.service-etape:nth-child(even) .service-etape__num { transform: rotate(6deg); }
.service-etape h3 { padding-top: 12px; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.035em; }
.service-etape h3 + p { margin-top: 10px; max-width: 52ch; color: var(--wp--preset--color--texte-doux); }
.service-corps > .service-apres-etapes { margin-top: 64px; }

/* Études de cas (Boucle de requête) : le premier projet en grand, les suivants par deux.
   La couleur (classe projet-mini--… posée par le thème) vient de la fiche projet. */
.service-cas { margin-top: 56px !important; }
.service-cas .wp-block-post-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 36px; margin: 0; }
.service-cas .wp-block-post { margin: 0; }
.service-cas .wp-block-post:first-child { grid-column: 1 / -1; }
.service-cas .wp-block-post:nth-child(odd):not(:first-child) { margin-top: 56px; }
.service-projet {
	--ombre: var(--wp--preset--color--vert); --clair: var(--wp--preset--color--menthe);
	display: flex; flex-direction: column; gap: 22px; margin: 0;
}
.service-projet.projet-mini--orange { --ombre: var(--wp--preset--color--orange); --clair: var(--wp--preset--color--orange-clair); }
.service-projet.projet-mini--bleu { --ombre: var(--wp--preset--color--bleu); --clair: var(--wp--preset--color--bleu-clair); }
.service-projet.projet-mini--violet { --ombre: var(--wp--preset--color--violet); --clair: var(--wp--preset--color--violet-clair); }
.service-projet.projet-mini--jaune { --ombre: var(--wp--preset--color--jaune); --clair: var(--wp--preset--color--jaune-clair); }
.service-projet > * { margin: 0; }
.service-ecran {
	overflow: hidden; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 22px; box-shadow: 8px 8px 0 var(--ombre);
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.service-projet:hover .service-ecran { transform: rotate(-1deg) scale(.99); }
.service-ecran > p { /* barre du navigateur, avec le domaine du site (texte, sans lien sortant) */
	position: relative; max-width: none; height: 34px; margin: 0; padding-left: 56px; overflow: hidden;
	background: var(--clair); border-bottom: 2px solid var(--encre);
	font-size: 13px; font-weight: 600; line-height: 30px; white-space: nowrap;
}
.service-ecran > p::before, .service-ecran > p::after { content: ""; position: absolute; top: 10px; width: 10px; height: 10px; border: 2px solid var(--encre); border-radius: 50%; }
.service-ecran > p::before { left: 14px; }
.service-ecran > p::after { left: 31px; }
.service-ecran .wp-block-post-featured-image { margin: 0; }
/* Les captures des projets sont au format 1280 × 1120 : on les montre en entier. */
.service-ecran img { display: block; width: 100%; aspect-ratio: 8 / 7; object-fit: cover; object-position: top; }
.service-projet__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.service-projet__texte > * { margin: 0 !important; }
.service-projet .is-style-sticker { background: var(--ombre); font-size: 14px; padding: 8px 12px; }
.service-projet .wp-block-post-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -.03em; }
.service-projet .wp-block-post-title a { color: inherit; text-decoration: none; }
.service-projet .wp-block-post-title a::after { content: " →"; opacity: .5; }
.service-projet .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--texte-doux); }
.service-projet .wp-block-post-excerpt__more-text { display: none; }
.service-projet__techs { font-size: 14px; font-weight: 700; }
.service-projet p:empty { display: none; }
.service-cas .wp-block-post:first-child .service-projet { display: grid; grid-template-columns: 8fr 4fr; gap: 36px; align-items: center; }
.service-cas .wp-block-post:first-child .service-ecran { box-shadow: 10px 10px 0 var(--ombre); }
.service-cas .wp-block-post:first-child .wp-block-post-title { font-size: clamp(32px, 3.4vw, 50px); }

/* Autres sites : 2e Boucle de requête, titres liés en stickers */
.service-clients__titre { margin-top: 80px !important; font-weight: 800; }
.service-clients { margin-top: 18px !important; }
.service-clients .wp-block-post-template { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 0; }
.service-clients .wp-block-post { margin: 0; }
.service-clients .wp-block-post-title { font-size: 16px; letter-spacing: 0; }
.service-clients .wp-block-post:nth-child(even) .is-style-sticker { transform: rotate(3deg); }
.service-clients .wp-block-post:nth-child(3n + 2) .is-style-sticker { background: var(--wp--preset--color--violet-clair); }
.service-clients .wp-block-post:nth-child(3n) .is-style-sticker { background: var(--wp--preset--color--jaune-clair); }
.service-clients .is-style-sticker { transition: transform .3s var(--rebond); }
.service-clients .is-style-sticker:hover { transform: rotate(0) translateY(-3px); }
.service-cas__liens { margin-top: 30px !important; }

/* FAQ (blocs Détails) */
.service-faq { display: grid; gap: 14px; }
.service-faq > * { margin: 0; }
.service-faq details { background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 22px; transition: box-shadow .3s, background-color .3s; }
.service-faq details[open] { background: var(--accent-clair); box-shadow: 6px 6px 0 var(--encre); }
.service-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px;
	cursor: pointer; list-style: none; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em;
}
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary::after {
	content: "+"; flex: none; display: grid; place-items: center; width: 38px; height: 38px;
	border: 2px solid var(--encre); border-radius: 50%; background: var(--wp--preset--color--blanc);
	font-size: 24px; font-weight: 500; line-height: 1; transition: transform .35s var(--rebond), background-color .2s;
}
.service-faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); }
.service-faq details > p { margin: 0; padding: 0 24px 24px; max-width: 96ch; }
.service-faq__fin { gap: 14px 20px; margin-top: 36px !important; font-size: 18px; font-weight: 600; }
.service-faq__fin > * { margin: 0; }
/* Résultats chiffrés (Search Console) dans les études de cas */
.service-preuves { margin-block: 22px 32px !important; padding: 18px 22px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 18px; }
.service-preuves > * { margin: 0; }
.service-preuves ul { display: grid; gap: 10px; padding-left: 20px; }
.service-preuves li { font-size: 18px; }
.service-preuves a { color: inherit; font-weight: 800; }
.service-preuves__source { margin-top: 12px !important; font-size: 14px; opacity: .75; }
/* Pour aller plus loin : deux articles du blog liés au service */
.service-lectures { margin-top: 36px !important; padding-top: 22px; border-top: 2px solid var(--encre); }
.service-lectures > * { margin: 0; }
.service-lectures__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-lectures ul { display: grid; gap: 10px; margin-top: 12px !important; padding: 0; list-style: none; }
.service-lectures li { padding-left: 26px; position: relative; font-size: 18px; font-weight: 600; }
.service-lectures li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.service-lectures a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.service-lectures a:hover { color: var(--accent); }

/* ---------- Fin ---------- */
.service-fin { padding-block: clamp(90px, 10vw, 150px); }
.service-fin .wp-block-columns { gap: 40px; }
.service-fin h2 { font-size: clamp(48px, 8vw, 128px); line-height: .9; letter-spacing: -.045em; }
.service-fin__texte { margin-top: 26px !important; max-width: 40ch; font-size: 19px; font-weight: 600; }
.service-fin .wp-block-buttons { margin-top: 32px !important; }
/* Sticker au-dessus du personnage, sans chevauchement */
.service-fin__mascotte { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.service-fin__mascotte > * { margin: 0 !important; }
.service-fin__mascotte .bloc-mascotte { transform: rotate(-6deg); }

/* Apparitions (classe posée par service.js, donc rien n'est masqué sans JavaScript) */
.service .apparait { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.service .apparait.est-visible { opacity: 1; transform: none; }

/* Barre de chapitre mobile (créée par service.js à partir du sommaire) */
.service-chapitre-mobile { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
	.service { --marge: 250px; }
	.service-cartes { grid-template-columns: 1fr; }
	.service-cartes > .service-carte:nth-child(2) { margin-top: 0; }
	.service-cartes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-cas .wp-block-post:first-child .service-projet { grid-template-columns: 1fr; }
	.service-sommaire { padding: 30px 24px 20px; }
}
@media (max-width: 960px) {
	.service-marge { display: none; }
	.service-corps { border-left: 0; }
	.service-chapitre-mobile {
		position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; margin: 0;
		padding: 10px var(--wp--style--root--padding-left); background: var(--wp--preset--color--blanc);
		border-bottom: 3px solid var(--encre); font-size: 14px; font-weight: 800;
	}
	.service-chapitre-mobile__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--encre); border-radius: 50%; background: var(--accent); font-size: 12px; transform: rotate(-8deg); }
	.service-chapitre-mobile__titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.service-chapitre-mobile__progression { position: absolute; left: 0; bottom: -3px; width: 0; height: 3px; background: var(--accent); }
	.service-chapitre-mobile a { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--encre); color: var(--wp--preset--color--blanc); font-size: 13px; text-decoration: none; }
	.service-bande { scroll-margin-top: 54px; }
}
@media (max-width: 781px) {
	.service-ouverture__grille { gap: 48px; }
	.service-sommaire { transform: rotate(1deg); margin-top: 20px; }
	.service-sommaire li a { padding-block: 12px; font-size: 19px; }
	.service-sommaire > .bloc-mascotte { right: -6px; top: -48px; }
	.service-sommaire > .bloc-mascotte svg { width: 72px; height: 72px; }
	.service-ouverture .wp-block-button, .service-ouverture .wp-block-button__link { width: 100%; text-align: center; }
	.service-inclus { grid-template-columns: 1fr; }
	.service-cartes--deux { grid-template-columns: 1fr; }
	.service-cartes--deux > .service-carte:nth-child(even) { margin-top: 0; }
	.service-etape { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
	.service-etape:nth-child(even) { margin-left: 0; }
	.service-etape__num { width: 64px; height: 64px; font-size: 24px; }
	.service-etape h3 { padding-top: 0; }
	.service-cas .wp-block-post-template { grid-template-columns: 1fr; gap: 48px; }
	.service-cas .wp-block-post:nth-child(odd):not(:first-child) { margin-top: 0; }
	.service-ecran, .service-cas .wp-block-post:first-child .service-ecran { box-shadow: 6px 6px 0 var(--ombre); }
	.service-faq summary { padding: 16px 18px; }
	.service-faq details > p { padding: 0 18px 20px; }
	.service-fin__mascotte .bloc-mascotte svg { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
	.service .apparait { opacity: 1; transform: none; }
}

/* Mobile : un sticker trop long passe à la ligne au lieu de sortir de l'écran. */
@media (max-width: 781px) {
	.service p.is-style-sticker { max-width: 100%; white-space: normal; line-height: 1.25; }
}

/* La carte de sommaire est le premier enfant de sa colonne : WordPress lui retire sa marge haute
   (règle des mises en page « flow »), on la rétablit pour qu'elle ne colle pas au haut de la section. */
.service-marge > .service-marge__carte { margin-top: clamp(60px, 7vw, 100px) !important; }

/* Titre principal sur mobile : assez petit pour que le mot le plus long tienne sur une ligne
   (« Référencement »), sans coupure au milieu d'un mot. */
.service-ouverture h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* « à Aix-en-Provence » reste groupé : jamais de « à » seul en fin de ligne. */
.service-ouverture h1 em { white-space: nowrap; }
@media (max-width: 781px) {
	.service-ouverture h1 { font-size: clamp(30px, 9.6vw, 42px); }
}

/* Sous-pages : fil d'Ariane au-dessus des stickers, lien retour dans la carte de marge. */
.service-fil { margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--texte-doux); }
.service-fil ul { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.service-fil li + li::before { content: "/"; margin-right: 8px; }
.service-fil li:last-child { color: var(--encre); }
.service-fil a { color: inherit; text-decoration: none; }
.service-fil a:hover { color: var(--encre); text-decoration: underline; }
.service-marge__retour { margin-top: 14px !important; padding-top: 14px; border-top: 2px solid var(--encre); font-size: 14px; font-weight: 700; }
.service-marge__retour a { color: inherit; text-decoration: none; }
.service-marge__retour a:hover { text-decoration: underline; }

/* Checklist d'audit : une carte, des cases cochées à l'accent de la page. */
.service-checklist { margin-top: clamp(40px, 4.6vw, 60px) !important; padding: 34px 32px 30px; box-shadow: var(--wp--preset--shadow--decale); }
.service-checklist:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-checklist__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.service-checklist li { display: flex; align-items: flex-start; gap: 14px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.service-checklist li::before {
	content: ""; flex: none; width: 26px; height: 26px; margin-top: -1px;
	border: 2px solid var(--encre); border-radius: 8px;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230D1A11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.service-checklist li:nth-child(even)::before { transform: rotate(-6deg); }

/* Frise des délais : 4 jalons sur un trait d'encre vertical, une pastille par jalon. */
.service-frise { position: relative; display: grid; gap: 34px; margin-top: clamp(44px, 5vw, 64px) !important; padding-left: 44px; }
.service-frise::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 3px; background: var(--encre); }
.service-frise > * { margin: 0; }
.service-frise__etape { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.service-frise__etape::before { content: ""; position: absolute; left: -44px; top: 6px; width: 18px; height: 18px; border: 2px solid var(--encre); border-radius: 50%; background: var(--accent); }
.service-frise__etape > * { margin: 0 !important; }
.service-frise__etape .is-style-sticker { grid-row: 1 / span 2; justify-self: start; }
.service-frise__etape:nth-child(even) .is-style-sticker { transform: rotate(3deg); }
.service-frise__etape h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.025em; }
.service-frise__etape p:not(.is-style-sticker) { max-width: 52ch; color: var(--wp--preset--color--texte-doux); }
@media (max-width: 781px) {
	.service-checklist { padding: 28px 22px 24px; }
	.service-checklist ul { grid-template-columns: 1fr; }
	.service-checklist li { font-size: 17px; }
	.service-frise { padding-left: 36px; gap: 30px; }
	.service-frise::before { left: 7px; }
	.service-frise__etape { grid-template-columns: 1fr; gap: 10px; }
	.service-frise__etape::before { left: -36px; }
	.service-frise__etape .is-style-sticker { grid-row: auto; }
}

/* Page GEO : schéma « ce que lit une IA », 3 cartes reliées par un trait d'encre. */
.service-lead a { color: inherit; font-weight: 800; }
.service-lecture { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(44px, 5vw, 64px) !important; }
.service-lecture::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 3px; background: var(--encre); }
.service-lecture > * { margin: 0; }
.service-lecture__etape {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 26px 24px 24px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--accent);
}
.service-lecture__etape > * { margin: 0 !important; }
.service-lecture__etape:nth-child(2) { transform: translateY(22px) rotate(1deg); }
.service-lecture__etape:last-child { background: var(--accent-clair); }
.service-lecture__etape h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -.025em; }
.service-lecture__etape p:not(.is-style-sticker) { color: var(--wp--preset--color--texte-doux); }

/* Page GEO : extrait du llms.txt du site, annoté. */
.service-llms { margin-top: clamp(56px, 6vw, 80px) !important; box-shadow: var(--wp--preset--shadow--decale); }
.service-llms:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-llms > * + * { margin-top: 18px !important; }
.service-llms__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-llms .wp-block-code {
	margin: 0; padding: 22px 24px; overflow-x: auto; background: var(--wp--preset--color--encre); color: var(--wp--preset--color--menthe);
	border: 0; border-radius: 16px; font-size: 15px; line-height: 1.6;
}
.service-llms .wp-block-code code { white-space: pre-wrap; overflow-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.service-llms__notes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-left: 0; padding: 0; list-style: none; font-weight: 600; }
.service-llms__notes li::before { content: "↑ "; color: var(--wp--preset--color--vert-fonce); font-weight: 800; }
.service-llms__fin { color: var(--wp--preset--color--texte-doux); }
@media (max-width: 1279px) {
	.service-lecture { grid-template-columns: 1fr; gap: 22px; }
	.service-lecture::before { left: 32px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
	.service-lecture__etape:nth-child(2) { transform: none; margin-left: clamp(0px, 4vw, 48px); }
}
@media (max-width: 781px) {
	.service-lecture__etape:nth-child(2) { margin-left: 0; }
	.service-llms .wp-block-code { padding: 18px; font-size: 13px; }
}

/* Page Google Ads : annonce stylisée (exemple fictif), chaque partie numérotée et expliquée dessous. */
.service-annonce { margin-top: clamp(44px, 5vw, 64px) !important; box-shadow: var(--wp--preset--shadow--decale); counter-reset: annonce; }
.service-annonce:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-annonce > * + * { margin-top: 20px !important; }
.service-annonce__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-annonce__pub { padding: 22px 64px 22px 24px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 16px; }
.service-annonce__pub > * { position: relative; max-width: none !important; margin: 0 !important; counter-increment: annonce; }
.service-annonce__pub > *::after {
	content: counter(annonce); position: absolute; right: -48px; top: 50%; translate: 0 -50%;
	display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--accent); font-size: 13px; font-weight: 800; line-height: 1;
}
.service-annonce__etiquette { font-size: 14px; font-weight: 800; }
.service-annonce__url { margin-top: 8px !important; white-space: nowrap; font-size: 15px; color: var(--wp--preset--color--texte-doux); }
.service-annonce__lien { margin-top: 6px !important; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.service-annonce__desc { margin-top: 10px !important; color: var(--wp--preset--color--texte-doux); }
.service-annonce__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; counter-reset: note; }
.service-annonce__notes li { position: relative; padding-left: 40px; counter-increment: note; }
.service-annonce__notes li::before {
	content: counter(note); position: absolute; left: 0; top: -1px;
	display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--accent); font-size: 13px; font-weight: 800; line-height: 1;
}
@media (max-width: 781px) {
	/* Mobile : les pastilles chevauchent le bord gauche de l'annonce pour laisser toute la largeur au texte. */
	.service-annonce__pub { padding: 18px 16px 18px 30px; }
	.service-annonce__pub > *::after { right: auto; left: -45px; width: 26px; height: 26px; }
	.service-annonce__notes { grid-template-columns: 1fr; }
	.service-annonce__url { font-size: 13px; }
}

/* Page Google Ads : jauge du budget, deux parts sans chiffre (budget pub à gauche, frais à droite). */
.service-budget { display: flex; margin-top: clamp(44px, 5vw, 64px) !important; overflow: hidden; border: 2px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--encre); }
.service-budget > * { margin: 0 !important; }
.service-budget__pub, .service-budget__frais { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 26px; }
.service-budget__pub > *, .service-budget__frais > * { margin: 0 !important; }
.service-budget__pub { flex: 1; background: var(--accent); }
.service-budget__frais {
	flex: 0 0 clamp(210px, 26%, 250px); border-left: 2px dashed var(--encre); /* petite part : nos frais restent légers face au budget pub */
	background: repeating-linear-gradient(-45deg, var(--accent-clair) 0 12px, var(--wp--preset--color--blanc) 12px 24px);
}
.service-budget p:not(.is-style-sticker) { font-weight: 600; }
@media (max-width: 781px) {
	.service-budget { flex-direction: column; box-shadow: 6px 6px 0 var(--encre); }
	.service-budget__frais { flex: none; border-left: 0; border-top: 2px dashed var(--encre); padding-block: 18px; }
}

/* Page Référencement local : carte « mêmes coordonnées partout », trois supports identiques. */
.service-nap { margin-top: clamp(44px, 5vw, 64px) !important; box-shadow: var(--wp--preset--shadow--decale); }
.service-nap:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-nap > * + * { margin-top: 22px !important; }
.service-nap__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-nap__supports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-nap__supports > * { margin: 0 !important; }
.service-nap__support { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px 18px; border: 2px solid var(--encre); border-radius: 16px; }
.service-nap__support > * { margin: 0 !important; }
.service-nap__support .is-style-sticker { margin-bottom: 6px !important; font-size: 14px; }
.service-nap__nom { font-size: 20px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 5px; text-underline-offset: 4px; }
.service-nap__tel { white-space: nowrap; font-weight: 700; }
.service-nap__support::after {
	content: "✓  Identique"; white-space: pre; display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 800;
}
.service-nap__fin { color: var(--wp--preset--color--texte-doux); font-weight: 600; }
.service-preuve-titre { margin-top: clamp(56px, 6vw, 80px) !important; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -.03em; }
.service-preuve-titre em { display: block; font-style: normal; font-weight: 400; }
.service-corps > .avis-google { margin-top: 28px; }
@media (max-width: 1279px) {
	.service-nap__supports { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.service-nap { box-shadow: 6px 6px 0 var(--encre); }
}

/* Page Maintenance : le carnet d'entretien, un tableau natif sobre (filets fins, pas de fond). */
.service-carnet { margin: clamp(44px, 5vw, 64px) 0 0 !important; padding: 8px 28px 18px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 24px; box-shadow: var(--wp--preset--shadow--decale); }
.service-carnet table { width: 100%; border-collapse: collapse; }
.service-carnet th, .service-carnet td { padding: 16px 14px 16px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); text-align: left; vertical-align: top; }
.service-carnet th { padding-top: 20px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--encre); }
.service-carnet td:first-child { font-weight: 800; }
.service-carnet td:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border: 2px solid var(--encre); border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.service-carnet td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.service-carnet td:last-child { color: var(--wp--preset--color--texte-doux); }
.service-carnet tbody tr:last-child td { border-bottom: 0; }
.service-carnet figcaption { margin: 6px 0 0; font-size: 13px; font-weight: 600; text-align: left; color: var(--wp--preset--color--texte-doux); }
@media (max-width: 781px) {
	/* Mobile : chaque ligne devient une petite fiche (libellé, rythme, bénéfice empilés). */
	.service-carnet { padding: 6px 20px 14px; box-shadow: 6px 6px 0 var(--encre); }
	.service-carnet thead { display: none; }
	.service-carnet tr, .service-carnet td { display: block; }
	.service-carnet tr { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); }
	.service-carnet tbody tr:last-child { border-bottom: 0; }
	.service-carnet td { padding: 2px 0; border: 0; white-space: normal !important; }
	.service-carnet td:nth-child(2) { font-size: 14px; }
}

/* Page Agence WordPress : « La coupe », le site en couches, ce que vous gérez et ce qu'on gère. */
.service-coupe { margin-top: clamp(44px, 5vw, 64px) !important; box-shadow: var(--wp--preset--shadow--decale); }
.service-coupe:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-coupe > * + * { margin-top: 18px !important; }
.service-coupe__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-coupe__bloc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.service-coupe__bloc + .service-coupe__bloc { padding-top: 18px; border-top: 2px solid var(--encre); }
.service-coupe__bloc > * { margin: 0 !important; }
.service-coupe__bloc > .is-style-sticker { justify-self: start; }
.service-coupe__strates { display: grid; }
.service-coupe__strates > p { margin: 0; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); color: var(--wp--preset--color--texte-doux); }
.service-coupe__strates > p:first-child { padding-top: 4px; }
.service-coupe__strates > p:last-child { border-bottom: 0; }
.service-coupe__strates strong { display: block; color: var(--encre); font-size: 18px; }
@media (max-width: 781px) {
	.service-coupe { box-shadow: 6px 6px 0 var(--encre); }
	.service-coupe__bloc { grid-template-columns: 1fr; gap: 10px; }
}

/* Page Agence PrestaShop : « Les branchements », la boutique au centre et cinq prises reliées par des traits fins. */
.service-branchements { margin-top: clamp(44px, 5vw, 64px) !important; box-shadow: var(--wp--preset--shadow--decale); }
.service-branchements:hover { transform: none; box-shadow: var(--wp--preset--shadow--decale); }
.service-branchements > * { margin: 0 !important; }
.service-branchements__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-branchements__centre { position: relative; width: fit-content; max-width: 100%; margin: 26px auto 0 !important; padding: 14px 22px; border: 2px solid var(--encre); border-radius: 16px; text-align: center; }
.service-branchements__centre > * { margin: 0 !important; }
.service-branchements__centre strong { display: block; font-size: 22px; }
.service-branchements__centre p { color: var(--wp--preset--color--texte-doux); font-size: 15px; }
.service-branchements__centre::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px; translate: -1px 2px; background: var(--encre); }
.service-branchements__prises { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 28px 0 0 !important; padding: 26px 0 0; list-style: none; }
.service-branchements__prises::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--encre); }
.service-branchements__prises li { position: relative; padding-top: 18px; text-align: center; font-size: 15px; line-height: 1.45; color: var(--wp--preset--color--texte-doux); }
.service-branchements__prises li::before { content: ""; position: absolute; left: 50%; top: -26px; width: 2px; height: 26px; translate: -1px 0; background: var(--encre); }
.service-branchements__prises li::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; translate: -7px 0; border: 2px solid var(--encre); border-radius: 50%; background: var(--accent); }
.service-branchements__prises strong { display: block; margin-bottom: 4px; color: var(--encre); font-size: 17px; }
@media (max-width: 1279px) {
	/* Arborescence verticale : un tronc à gauche, un trait vers chaque prise. */
	.service-branchements__centre { margin: 22px 0 0 !important; text-align: left; }
	.service-branchements__centre::after { left: 18px; }
	.service-branchements__prises { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 0 18px !important; padding: 0 0 0 40px; }
	.service-branchements__prises::before { left: 0; right: auto; top: -26px; bottom: 12px; width: 2px; height: auto; }
	.service-branchements__prises li { padding-top: 0; text-align: left; }
	.service-branchements__prises li::before { left: -40px; top: 11px; width: 24px; height: 2px; translate: 0 0; }
	.service-branchements__prises li::after { left: -20px; top: 6px; translate: 0 0; }
	.service-branchements__prises li:last-child::before { box-shadow: 0 0 0 0; }
}
@media (max-width: 781px) {
	.service-branchements { box-shadow: 6px 6px 0 var(--encre); }
}

/* ---------- Page /expertises/ : sommaire éditorial des prestations ---------- */
.service-hub .service-corps { border-left: 0; }
.service-hub__mascotte { display: flex; justify-content: center; }
.service-hub__mascotte .bloc-mascotte { transform: rotate(-6deg); }

.service-index { display: grid; gap: clamp(56px, 7vw, 96px); }
.service-index > * { margin: 0; }
.service-index__famille { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.service-index__famille > * { margin: 0; }
.service .service-index__titre {
	position: sticky; top: 32px; margin: 0 !important; max-width: none;
	font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.03em;
}
.service .service-index__titre em { margin-top: 6px; font-size: .5em; font-weight: 500; letter-spacing: -.01em; }
.service-index__lignes { border-bottom: 2px solid var(--encre); }
.service-index__lignes > * { margin: 0; }

.service-index__ligne {
	position: relative; display: grid; grid-template-columns: 96px 1fr auto; column-gap: 28px; row-gap: 10px; align-items: baseline;
	padding: 30px 20px 30px 0; border-top: 2px solid var(--encre); isolation: isolate;
}
.service-index__ligne > * { margin: 0 !important; grid-column: 2; }
.service-index__ligne::before {
	content: ""; position: absolute; inset: 0 0 0 -20px; z-index: -1; background: var(--accent-clair);
	transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.service-index__ligne:hover::before, .service-index__ligne:focus-within::before { transform: scaleY(1); }
.service-index__num {
	grid-column: 1 !important; grid-row: 1 / span 3; display: flex; align-items: center; gap: 12px;
	font-size: clamp(44px, 4.4vw, 64px); font-weight: 300; line-height: .8; letter-spacing: -.05em;
}
.service-index__num::after {
	content: ""; flex: none; width: 14px; height: 14px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--accent); transition: transform .35s var(--rebond);
}
.service-index__ligne:hover .service-index__num::after { transform: scale(1.35); }
.service-index__ligne h3 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: -.03em; }
.service-index__ligne h3 em { display: inline; font-style: normal; font-weight: 400; }
.service-index__ligne h3 a { color: inherit; text-decoration: none; }
/* Toute la ligne est cliquable ; les liens secondaires passent au-dessus. */
.service-index__ligne h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-index__ligne h3 a::after { content: "→"; display: inline-block; margin-left: 14px; font-weight: 400; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.service-index__ligne:hover h3 a::after { transform: translateX(8px); }
.service-index__ligne > p:not([class]) { max-width: 46ch; font-size: 18px; line-height: 1.5; }
.service-index__tag { grid-column: 3 !important; grid-row: 1; align-self: center; justify-self: end; white-space: nowrap; }
.service-index__sous { position: relative; z-index: 2; font-size: 15px; font-weight: 600; color: var(--wp--preset--color--texte-doux); }
.service-index__sous::before { content: "↳ "; }
.service-index__sous a { color: var(--encre); font-weight: 800; text-underline-offset: 3px; }
.service-index__sous a:hover { text-decoration-thickness: 2px; }

/* « Par où commencer ? » : une ligne par situation */
.service-choix { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--encre); }
.service-choix li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 20px 0; border-top: 2px solid var(--encre); }
.service-choix strong { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.01em; }
.service-choix a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border: 2px solid var(--encre); border-radius: 999px; background: var(--wp--preset--color--blanc);
	color: var(--encre); font-weight: 800; text-decoration: none; box-shadow: 3px 3px 0 var(--encre);
	transition: transform .2s, box-shadow .2s;
}
.service-choix a::after { content: "→"; }
.service-choix a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--encre); }

@media (max-width: 960px) {
	.service-index__famille { grid-template-columns: 1fr; }
	.service .service-index__titre { position: static; }
}
@media (max-width: 781px) {
	.service-hub__mascotte { display: none; }
	.service-index__ligne { grid-template-columns: 1fr auto; padding: 24px 0; column-gap: 16px; }
	.service-index__ligne::before { inset: 0 -12px; }
	.service-index__ligne > * { grid-column: 1 / -1; }
	.service-index__num { grid-column: 1 !important; grid-row: 1; font-size: 40px; }
	.service-index__tag { grid-column: 2 !important; grid-row: 1; }
	.service-index__ligne > p:not([class]) { font-size: 17px; }
	.service-index__sous { line-height: 2; }
	.service-index__sous a { display: inline-block; padding-block: 4px; }
	.service-choix li { flex-direction: column; align-items: flex-start; }
}
@media (hover: none) {
	.service-index__ligne::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.service-index__ligne::before, .service-index__num::after, .service-index__ligne h3 a::after { transition: none; }
}
.service-index__titre + .service-index__lignes { margin-top: 0 !important; }

/* ---------- Page /agence/ : l'équipe ---------- */
/* Fiche « en bref » de l'ouverture */
.agence-fiche {
	padding: 34px 32px 28px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 28px; box-shadow: var(--wp--preset--shadow--decale);
	transform: rotate(1.5deg);
}
.agence-fiche > * { margin-block: 0; }
.agence-fiche > .bloc-mascotte { position: absolute; right: -26px; top: -58px; z-index: 3; transform: rotate(8deg); }
.agence-fiche__titre { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agence-fiche__liste { margin: 14px 0 18px !important; padding: 0; list-style: none; }
.agence-fiche__liste li { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 2px solid var(--encre); font-weight: 600; line-height: 1.3; }
.agence-fiche__liste strong { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* Qui fait quoi : une ligne par personne, prénom en très gros */
.agence-equipe { border-bottom: 2px solid var(--encre); }
.agence-equipe > * { margin: 0 !important; }
.agence-personne {
	display: grid; grid-template-columns: minmax(220px, 1.1fr) 2fr; column-gap: clamp(24px, 4vw, 64px); row-gap: 6px;
	align-items: baseline; padding: 30px 0; border-top: 2px solid var(--encre);
}
.agence-personne > * { margin: 0 !important; grid-column: 2; }
.agence-personne h3 {
	grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; gap: 14px;
	font-size: clamp(44px, 5.4vw, 84px); line-height: .9; letter-spacing: -.05em;
}
.agence-personne h3::after {
	content: ""; flex: none; width: 16px; height: 16px; border: 2px solid var(--encre); border-radius: 50%;
	background: var(--accent); transition: transform .35s var(--rebond);
}
.agence-personne:hover h3::after { transform: scale(1.35); }
.agence-personne__role { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.agence-personne p:not([class]) { max-width: 52ch; font-size: 18px; line-height: 1.5; }
.agence-personne a { color: inherit; font-weight: 800; text-underline-offset: 3px; }

/* Nous trouver */
.agence-lieu { gap: clamp(32px, 5vw, 72px); margin-top: clamp(30px, 3.6vw, 52px) !important; }
.agence-adresse {
	padding: 28px 30px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--encre); transform: rotate(-1deg);
}
.agence-adresse > * { margin-block: 0; }
.agence-adresse > * + * { margin-top: 14px; }
.agence-adresse p { font-size: 18px; font-weight: 600; line-height: 1.45; }
.agence-adresse__nom { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em; }
.agence-lieu .wp-block-buttons { margin-top: 28px; }

@media (max-width: 781px) {
	.agence-fiche { transform: rotate(1deg); margin-top: 20px; padding: 30px 22px 22px; }
	.agence-fiche > .bloc-mascotte { right: -6px; top: -48px; }
	.agence-fiche > .bloc-mascotte svg { width: 72px; height: 72px; }
	.agence-personne { grid-template-columns: 1fr; padding: 24px 0; }
	.agence-personne h3 { grid-row: auto; margin-bottom: 8px !important; }
	.agence-personne > * { grid-column: 1; }
	.agence-adresse { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.agence-personne h3::after { transition: none; }
}
/* Agence : le titre peut passer à la ligne, pour ne pas toucher la fiche « en bref ». */
.agence .service-ouverture h1 { font-size: clamp(42px, 5.6vw, 88px); }
.agence .service-ouverture h1 em { white-space: normal; }
.agence-adresse a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.agence-adresse a:hover { text-decoration-color: var(--wp--preset--color--vert); }

/* ---------- Formulaire de devis (laligneweb-core) aux couleurs du site ---------- */
.service .laligneweb-form-container {
	display: block; max-width: none; margin: 0; padding: clamp(24px, 3vw, 40px);
	background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 28px;
	box-shadow: var(--wp--preset--shadow--decale);
}
.service .laligneweb-form-container .progress-bar { margin-bottom: clamp(28px, 3vw, 40px); }
.service .laligneweb-form-container .progress-steps {
	position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0;
}
/* La ligne qui relie les étapes */
.service .laligneweb-form-container .progress-steps::before {
	content: ""; position: absolute; left: 20px; right: 20px; top: 18px; height: 4px; border-radius: 4px;
	background: var(--wp--preset--color--menthe);
}
.service .laligneweb-form-container .step { flex-direction: column; align-items: flex-start; gap: 10px; }
.service .laligneweb-form-container .step::after { display: none; }
.service .laligneweb-form-container .step-number {
	width: 40px; height: 40px; background: var(--wp--preset--color--blanc); border: 2px solid var(--encre);
	color: var(--encre); font-weight: 800; font-size: 15px;
}
.service .laligneweb-form-container .step-label { color: var(--wp--preset--color--texte-doux); font-size: 14px; font-weight: 600; }
.service .laligneweb-form-container .step.active .step-number { background: var(--wp--preset--color--vert); border-color: var(--encre); color: var(--encre); transform: rotate(-8deg); }
.service .laligneweb-form-container .step.active .step-label { color: var(--encre); font-weight: 800; }
.service .laligneweb-form-container .step.completed .step-number { background: var(--wp--preset--color--menthe); border-color: var(--encre); color: var(--encre); }
.service .laligneweb-form-container .step.completed .step-label { color: var(--encre); }

.service .laligneweb-form-container .form-step h3 { margin: 0 0 22px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.03em; color: var(--encre); }
.service .laligneweb-form-container .options-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.service .laligneweb-form-container .option-card {
	min-height: 48px; padding: 10px 20px; background: var(--wp--preset--color--blanc);
	border: 2px solid var(--encre); border-radius: 999px; box-shadow: none; text-align: left;
	transition: transform .2s, box-shadow .2s, background-color .2s;
}
.service .laligneweb-form-container .option-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--encre); border-color: var(--encre); }
.service .laligneweb-form-container .option-card:has(input:checked) { background: var(--wp--preset--color--vert); box-shadow: 4px 4px 0 var(--encre); border-color: var(--encre); }
.service .laligneweb-form-container .option-card:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--bleu); outline-offset: 3px; }
.service .laligneweb-form-container .option-content, .service .laligneweb-form-container .option-card input:checked + .option-content { color: var(--encre); font-weight: 700; }

.service .laligneweb-form-container .field-group label { color: var(--encre); font-weight: 700; }
.service .laligneweb-form-container .field-aide { font-weight: 500; color: var(--wp--preset--color--texte-doux); }
.service .laligneweb-form-container :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%; padding: 14px 16px; background: var(--wp--preset--color--blanc); color: var(--encre);
	border: 2px solid var(--encre); border-radius: 14px; font: inherit; box-shadow: none;
}
.service .laligneweb-form-container :is(input, textarea):focus { outline: none; border-color: var(--encre); box-shadow: 4px 4px 0 var(--wp--preset--color--vert); }
.service .laligneweb-form-container .checkbox-label { color: var(--encre); font-size: 15px; }
.service .laligneweb-form-container .checkmark { border: 2px solid var(--encre); border-radius: 6px; }
.service .laligneweb-form-container .checkbox-label input:checked + .checkmark { background: var(--wp--preset--color--vert); border-color: var(--encre); }

.service .laligneweb-form-container .form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.service .laligneweb-form-container .btn {
	min-height: 48px; padding: 0 26px; border: 2px solid var(--encre); border-radius: 999px;
	font: inherit; font-weight: 800; cursor: pointer; box-shadow: none; transition: transform .2s, box-shadow .2s;
}
.service .laligneweb-form-container :is(.btn-primary, .btn-success) { background: var(--encre); color: var(--wp--preset--color--blanc); }
.service .laligneweb-form-container .btn-secondary { background: var(--wp--preset--color--blanc); color: var(--encre); }
.service .laligneweb-form-container .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wp--preset--color--vert); }
.service .laligneweb-form-container .error-message { color: #b42318; font-weight: 700; }

@media (max-width: 781px) {
	.service .laligneweb-form-container { padding: 22px 18px; border-radius: 22px; box-shadow: 6px 6px 0 var(--encre); }
	.service .laligneweb-form-container .step-label { display: none; }
	.service .laligneweb-form-container .progress-steps { grid-template-columns: repeat(4, 40px); justify-content: space-between; }
	.service .laligneweb-form-container .field-row { grid-template-columns: 1fr; display: grid; gap: 16px; }
	.service .laligneweb-form-container .form-actions .btn { flex: 1; }
}

/* ---------- Page Devis (/votre-projet-web/) ---------- */
.devis .service-ouverture { padding-bottom: clamp(70px, 8vw, 110px); }
.devis-grille { align-items: flex-start !important; }
.devis .service-ouverture h1 { margin-top: 24px; font-size: clamp(40px, 4.2vw, 64px); }
.devis .service-ouverture h1 em { white-space: normal; }
.devis-texte > * { margin-block: 0; }
.devis-texte > .service-chapo { margin-top: 22px; }
.devis-promesses { margin: 28px 0 0 !important; padding: 0; list-style: none; font-weight: 700; }
.devis-promesses li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 2px solid var(--encre); }
.devis-promesses li:last-child { border-bottom: 2px solid var(--encre); }
.devis-promesses li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--encre); border-radius: 50%; background: var(--wp--preset--color--vert); font-size: 13px; font-weight: 800; transform: translateY(4px); }
.devis-tel { margin-top: 28px !important; }
.devis-tel > * { margin: 0; }
.devis-tel p:first-child { font-weight: 600; }
.devis-tel__numero a { color: var(--encre); font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.devis-tel__numero a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--vert); }
.devis-texte > .avis-google { margin-top: 24px !important; }

@media (max-width: 781px) {
	/* Mobile : le formulaire d'abord, juste après le titre. */
	.devis-grille { display: flex !important; flex-direction: column; }
	.devis-tel, .devis-texte > .avis-google { display: none; }
}
.service .laligneweb-form-container .form-step { min-height: 0; }

/* ---------- Page Contact ---------- */
.contact-fiche .agence-fiche__liste li { grid-template-columns: 96px 1fr; }
.contact-fiche .agence-fiche__liste strong { font-size: 15px; letter-spacing: 0; text-transform: uppercase; }
.contact-fiche .agence-fiche__liste a { color: var(--encre); font-weight: 800; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-plan { margin: 0; }
.contact-plan img { display: block; width: 100% !important; height: auto !important; border: 2px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--encre); }
.contact-plan figcaption { margin-top: 12px; font-size: 13px; color: var(--wp--preset--color--texte-doux); text-align: right; }
.contact-plan figcaption a { color: inherit; }
.contact-formulaire {
	max-width: 760px; margin-top: clamp(30px, 3.6vw, 52px) !important; padding: clamp(24px, 3vw, 40px);
	background: var(--wp--preset--color--blanc); border: 2px solid var(--encre); border-radius: 28px; box-shadow: var(--wp--preset--shadow--decale);
}
/* Forminator aux couleurs du site */
.contact-formulaire .forminator-ui.forminator-custom-form { margin: 0 !important; }
.contact-formulaire .forminator-label { color: var(--encre) !important; font-weight: 700 !important; font-size: 15px !important; }
.contact-formulaire :is(.forminator-input, .forminator-textarea) {
	padding: 14px 16px !important; background: var(--wp--preset--color--blanc) !important; color: var(--encre) !important;
	border: 2px solid var(--encre) !important; border-radius: 14px !important; box-shadow: none !important; font: inherit !important;
}
.contact-formulaire :is(.forminator-input, .forminator-textarea):focus { box-shadow: 4px 4px 0 var(--wp--preset--color--vert) !important; outline: none !important; }
.contact-formulaire .forminator-field--label { display: none !important; }
.contact-formulaire .forminator-button-submit, .contact-formulaire .forminator-button-upload {
	min-height: 48px !important; padding: 0 26px !important; border: 2px solid var(--encre) !important; border-radius: 999px !important;
	font: inherit !important; font-weight: 800 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
.contact-formulaire .forminator-button-submit { background: var(--encre) !important; color: var(--wp--preset--color--blanc) !important; }
.contact-formulaire .forminator-button-upload { background: var(--wp--preset--color--blanc) !important; color: var(--encre) !important; }
.contact-formulaire :is(.forminator-button-submit, .forminator-button-upload):hover { box-shadow: 4px 4px 0 var(--wp--preset--color--vert) !important; }
.contact-formulaire .forminator-error-message { color: #b42318 !important; background: none !important; padding: 4px 0 0 !important; font-weight: 700; }
@media (max-width: 781px) {
	.contact-formulaire { padding: 22px 18px; box-shadow: 6px 6px 0 var(--encre); }
	.contact-plan img { box-shadow: 6px 6px 0 var(--encre); }
}
/* Forminator « material » : libellés au-dessus du champ, pas flottants. */
.contact-formulaire .forminator-design--material .forminator-label {
	position: static !important; display: block !important; margin: 0 0 8px !important; padding: 0 !important;
	transform: none !important; background: none !important; height: auto !important; line-height: 1.3 !important;
}
.contact-formulaire .forminator-design--material .forminator-input--wrap,
.contact-formulaire .forminator-design--material .forminator-textarea--wrap { padding: 0 !important; border: 0 !important; background: none !important; }
.contact-formulaire .forminator-design--material :is(.forminator-input--wrap, .forminator-textarea--wrap)::before,
.contact-formulaire .forminator-design--material :is(.forminator-input--wrap, .forminator-textarea--wrap)::after { display: none !important; }
.contact-formulaire .forminator-row { margin-bottom: 20px !important; }
.service .laligneweb-form-container .form-content { padding: 0; max-width: none; }
.service .laligneweb-form-container .form-step { padding: 0; }
/* Devis : les promesses passent sous le formulaire, en ligne, pour équilibrer les colonnes. */
.devis-formulaire > .devis-promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0 !important; font-size: 15px; }
.devis-formulaire > .devis-promesses li, .devis-formulaire > .devis-promesses li:last-child { padding: 12px 0 0; border-top: 2px solid var(--encre); border-bottom: 0; }
@media (max-width: 781px) {
	.devis-formulaire > .devis-promesses { display: grid; grid-template-columns: 1fr; gap: 0; }
	.devis-formulaire > .devis-promesses li { padding-bottom: 12px; }
}
.devis-texte > .service-stickers { margin-top: 20px; }
/* Contact : texte à gauche, formulaire à droite ; champs courts côte à côte. */
.contact-ecrire { gap: clamp(32px, 5vw, 80px) !important; align-items: flex-start !important; }
.contact-ecrire__texte > * { margin-block: 0; }
.contact-ecrire__texte > * + * { margin-top: 22px; }
.contact-ecrire__texte h2 { margin-top: 22px !important; font-size: clamp(36px, 4.4vw, 68px); line-height: .98; letter-spacing: -.035em; }
.contact-ecrire__texte a { color: inherit; font-weight: 800; }
.contact-formulaire { max-width: none; margin-top: 0 !important; }
.contact-formulaire .forminator-label { text-transform: none !important; letter-spacing: 0 !important; }
@media (min-width: 782px) {
	.contact-formulaire form.forminator-custom-form { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.contact-formulaire form.forminator-custom-form > * { grid-column: 1 / -1; }
	.contact-formulaire form.forminator-custom-form > .forminator-row:has(#email-1),
	.contact-formulaire form.forminator-custom-form > .forminator-row:has(#phone-1) { grid-column: auto; }
}

/* ---------- Pages légales ---------- */
.legal .service-ouverture { padding-bottom: clamp(50px, 6vw, 80px); }
.legal .service-ouverture > * { max-width: 900px; }
.legal-texte { max-width: 760px; }
.legal-texte > * { margin-block: 0; }
.legal-texte > * + * { margin-top: 16px; }
.legal-texte h2 { margin-top: 48px !important; padding-top: 18px; border-top: 2px solid var(--encre); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.legal-texte > h2:first-child { margin-top: 0 !important; }
.legal-texte h3 { margin-top: 28px !important; font-size: 19px; letter-spacing: -.01em; }
.legal-texte p, .legal-texte li { font-size: 17px; line-height: 1.65; }
.legal-texte ul { padding-left: 1.2em; }
.legal-texte a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.legal-maj { margin-top: 48px !important; font-size: 14px !important; color: var(--wp--preset--color--texte-doux); }
.service .legal-texte h2 { max-width: none; }
.contact-plan img { aspect-ratio: 2 / 1; object-fit: cover; }