/*
Theme Name: Groupe Écho
Theme URI: https://groupe-echo.fr/
Author: Groupe Écho
Description: Thème de blocs sur mesure de groupe-echo.fr (noir et or). Design repris de l'archive cliente.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: groupe-echo
*/

/*
 * Couleurs, polices, tailles et espacements : theme.json (variables --wp--preset--*).
 * Ce fichier ne contient que ce que theme.json ne sait pas exprimer : mises en page des
 * composants de l'archive, contours de texte, masques, compteurs, survols, points de rupture.
 * Source : reference/archive/groupe-echo-site/assets/style.css, adapté au balisage des blocs.
 */

:root {
	/* Jetons du pack de design (22/10/2026). Les anciens noms sont conservés comme alias pour ne pas réécrire tout le fichier :
	   --or-vif = or clair, --or-sombre = filet sombre (les ombres dures sont supprimées), --ivoire = blanc, --gris = gris doux (texte secondaire sur noir). */
	--noir: var(--wp--preset--color--noir);
	--charbon: var(--wp--preset--color--charbon);
	--trait: var(--wp--preset--color--trait);
	--or: var(--wp--preset--color--or);
	--or-vif: var(--wp--preset--color--or-clair);
	--or-sombre: var(--wp--preset--color--trait);
	--ivoire: var(--wp--preset--color--blanc);
	--gris: var(--wp--preset--color--gris-doux);
	--or-texte: var(--wp--preset--color--or-texte); /* or lisible sur fond clair */
	--encre: var(--wp--preset--color--encre);
	--sable: var(--wp--preset--color--sable);
	--titre: var(--wp--preset--font-family--titre);
	--texte: var(--wp--preset--font-family--texte);
	--italique: var(--wp--preset--font-family--italique);
	--bande: var(--wp--preset--spacing--bande);
	--colonnes: var(--wp--preset--spacing--colonnes);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Pages du paquet : décalage des ancres sous l'en-tête fixe de 80 px, comme l'artefact (html { scroll-padding-top: 80px }) ; les autres pages gardent le scroll-margin de 88 px ci-dessous */
html:has(main .ge) { scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--or-vif); outline-offset: 3px; }
/* Mot d'accent en italique doré : Cormorant Garamond italique 500 (seule graisse chargée), 1,1 fois la taille du titre */
.skip { position: absolute; left: -999px; top: 0; background: var(--or); color: var(--noir); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.muted { color: var(--gris); }

/* Bandes claires (sable, blanc) : texte en encre, texte secondaire en gris (6,84:1), liens et accents en or de texte (5,53:1 sur blanc,
   4,90:1 sur sable), focus en encre. L'or et le gris clair du pack ne passent pas l'AA sur fond clair (docs/design-pack.md, section 1.2). */

/* Boutons : bloc Bouton (theme.json), à plat (le pack n'a pas d'ombre) ; les transitions sont dans assets/effets.css */
.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ivoire); border-color: rgba(255, 255, 255, .45); }
.is-style-ghost .wp-block-button__link:hover { background: transparent; color: var(--or-vif); border-color: var(--or-vif); }
.wp-block-button .wp-block-button__link { display: block; } /* comme le lien .btn de l'archive, élément flex : pas d'espace sous la ligne de base */
.wp-block-buttons.actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: var(--wp--preset--spacing--actions); }

/* Images décoratives : <img> qui remplit son cadre (remplace les fonds CSS de l'archive) */
.wp-block-image:is(.hero-visuel, .carte-img, .chemin-img, .fond, .ia-img, .visuel-carre) { margin: 0; overflow: hidden; background-color: #0a0a0a; }
.wp-block-image:is(.hero-visuel, .carte-img, .chemin-img, .fond, .ia-img, .visuel-carre) img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Bande or */
.band.or .wp-block-button__link { background: var(--noir); color: var(--or-vif); border-color: var(--noir); box-shadow: none; }
.band.or .wp-block-button__link:hover { background: var(--noir); color: #fff; }
.band.or .is-style-blanc .wp-block-button__link { background: #fff; color: var(--noir); border-color: #fff; }
.band.or .is-style-blanc .wp-block-button__link:hover { background: var(--noir); color: #fff; border-color: var(--noir); }

/* En-tête : fixe, 72 px, fond noir à 92 % avec flou (pack). Le menu est le bloc Navigation du cœur, en superposition plein écran. */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; }
/* Fond et flou sur un pseudo-élément : un backdrop-filter sur l'en-tête lui-même piégerait la superposition du menu (position: fixed) dans les 72 px de l'en-tête */
.site-header::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; box-sizing: border-box; border-bottom: 1px solid rgba(201, 169, 101, .15); background: rgba(11, 10, 9, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
/* Largeur, centrage et marge latérale propres à l'en-tête : la règle générale .wrap est dans theme-hors-paquet.css, non chargée sur l'accueil ni sur les pages du paquet */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
/* Marque de la démo : monogramme et texte en Cinzel (sous-ensemble « GROUPE ÉCHO », 1,9 Ko) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cinzel-600-groupe-echo.woff2") format("woff2"); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; color: inherit; }
.brand img { width: 32px; height: auto; }
.brand span { font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 18px; letter-spacing: .06em; white-space: nowrap; color: #fff; }
.pied-marque .brand { margin-bottom: 1rem; }
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 48px; width: auto; }
.en-tete-droite { display: flex; align-items: center; gap: 14px; margin: 0; }
.en-tete-droite > * { margin: 0; }
.tels { display: flex; gap: 22px; margin: 0; max-width: none; }
.tels a { color: var(--ivoire); text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.tels a span { display: block; font-family: var(--texte); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; color: var(--or-vif); }
.tels a:hover { color: var(--or-vif); }
.site-header .en-tete-droite .wp-block-button__link { background: transparent; color: #e4d3ae; border-color: var(--or); padding: 11px 18px; font-size: 13.5px; line-height: 1.6; white-space: nowrap; }
.site-header .en-tete-droite .wp-block-button__link:hover { background: var(--or); border-color: var(--or-vif); color: var(--noir); }
/* Bouton « Menu » et menu plein écran : calqués sur l'artefact du 26/10/2026 (HTML dans patterns/en-tete.php, script dans assets/menu-ecran.js imprimé en ligne par functions.php).
   Bouton doré 48 px : trois barres et mot « Menu » sous 1180 px ; à partir de 1180 px (navigation rapide visible) le mot reste dans le HTML, masqué visuellement, et donne son nom au bouton. */
.ge-burger { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px 0 18px; background: var(--or); border: 0; color: var(--noir); cursor: pointer; font-family: var(--titre); font-weight: 700; font-size: .9375rem; letter-spacing: .02em; position: relative; overflow: hidden; transition: background .25s; }
.ge-burger:hover { background: var(--or-vif); }
.ge-burger:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ge-bars { display: grid; gap: 5px; width: 22px; }
.ge-bars i { display: block; height: 2px; background: currentColor; transition: width .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); }
.ge-bars i:nth-child(2) { width: 16px; }
.ge-bars i:nth-child(3) { width: 10px; }
.ge-burger:hover .ge-bars i { width: 22px; }
@media (min-width: 1180px) {
	.ge-bl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Superposition */
html.ge-ov-lock { overflow: hidden; }
.ge-ov { position: fixed; inset: 0; z-index: 80; background: #0b0a09; color: #fff; overflow-y: auto; overscroll-behavior: contain; isolation: isolate; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.ge-ov[hidden] { display: none; }
.ge-ov-media { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ge-ov-media div { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); }
.ge-ov-media div.on { opacity: .38; transform: scale(1); }
.ge-ov::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b0a09 30%, rgba(11, 10, 9, .5) 75%, rgba(11, 10, 9, .75)); pointer-events: none; }
.ge-ov-in { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.ge-ov-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.ge-ov-close { height: 44px; padding: 0 18px; background: none; border: 1px solid #3a352e; color: #fff; font-family: var(--titre); font-weight: 600; font-size: .84375rem; cursor: pointer; }
.ge-ov-close:hover { border-color: var(--or); }
.ge-ov-main { list-style: none; margin: clamp(24px, 5vh, 56px) 0 0; padding: 0; max-width: 720px; }
.ge-ov-main li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.ge-ov-main a { display: flex; align-items: baseline; gap: 18px; text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: clamp(28px, 4.4vw, 52px); letter-spacing: -.025em; line-height: 1.18; padding: 8px 0; color: #fff; }
.ge-ov-main .ge-fl { align-self: center; width: .6em; height: .6em; flex: none; color: #c9a965; opacity: 0; transform: translateX(-14px); }
.ge-ov-main:hover a { color: #6f695f; }
.ge-ov-main a:hover, .ge-ov-main a:focus-visible { color: #fff; transform: translateX(12px); }
.ge-ov-main a:hover .ge-fl, .ge-ov-main a:focus-visible .ge-fl { opacity: 1; transform: none; }
.ge-ov-main a.actuel { color: #c9a965; }
.ge-ov-n { font-style: normal; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: #c9a965; min-width: 2.2em; transform: translateY(-.9em); }
.ge-ov-t { display: flex; flex-direction: column; }
.ge-ov-t small { font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; color: #a39c90; line-height: 1.3; max-height: 0; opacity: 0; overflow: hidden; }
.ge-ov-main a:hover .ge-ov-t small, .ge-ov-main a:focus-visible .ge-ov-t small, .ge-ov-main a.actuel .ge-ov-t small { max-height: 1.6em; opacity: 1; margin-top: 2px; }
.ge-ov-tv { position: relative; overflow: hidden; text-align: center; line-height: 1.6; display: inline-block; margin-top: 22px; padding: 16px 28px; border: 1.5px solid var(--or); background: var(--or); color: var(--noir); font-family: var(--titre); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.ge-ov-tv:hover { background: var(--or-vif); border-color: var(--or-vif); }
@media (max-width: 600px) { .ge-ov-tv, .barre .btn { line-height: 1.3; } } /* comme `.btn` de l'artefact sous 600 px : la barre mobile fait 67 px et non 71 px */
.ge-ovb { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-top: clamp(28px, 5vh, 56px); padding-top: 26px; border-top: 1px solid #2b2722; }
.ge-ovb b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c9a965; margin-bottom: 12px; }
.ge-ovb-dom div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ge-ovb-dom a { display: block; padding: 11px 14px; border: 1px solid #2b2722; text-decoration: none; color: #e6e0d4; font-size: 14.5px; }
.ge-ovb-dom a:hover { border-color: var(--or); color: #c9a965; }
.ge-ovb-ag span { display: block; color: #cfc9bf; font-size: 14.5px; line-height: 1.55; }
.ge-ovb-ag a { display: block; text-decoration: none; color: #fff; font-family: var(--titre); font-weight: 600; font-size: 17px; margin-top: 8px; }
.ge-ovb-ag a.ge-ovb-l { font-family: inherit; font-weight: 400; font-size: 13.5px; color: #c9a965; margin-top: 6px; }
.ge-ov-rs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ge-ov-rs a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #2b2722; color: #e6e0d4; }
.ge-ov-rs a:hover { color: var(--noir); background: var(--or); border-color: var(--or); }
.ge-ov-rs svg { width: 18px; height: 18px; }
.ge-ov :is(a, button):focus-visible { outline: 3px solid #c9a965; outline-offset: 3px; }
@media (max-width: 760px) { .ge-ovb { grid-template-columns: 1fr 1fr; gap: 22px 16px; } .ge-ovb-dom { grid-column: 1 / -1; } }
/* Ordinateur : liste à gauche, grand panneau photo encadré à droite (l'image change au survol et au focus des entrées) */
@media (min-width: 1001px) {
	.ge-ov-media { inset: 96px max(32px, calc((100vw - 1160px) / 2)) 32px auto; width: min(38vw, 520px); border: 1px solid rgba(201, 167, 106, .45); box-shadow: 0 40px 90px -40px #000; }
	.ge-ov-media div { inset: 0; }
	.ge-ov-media div.on { opacity: 1; }
	.ge-ov-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 10, 9, .55), transparent 45%); }
	.ge-ov::after { display: none; }
	.ge-ov-main, .ge-ovb, .ge-ov-rs, .ge-ov-tv { max-width: calc(100% - min(38vw, 520px) - 56px); }
	.ge-ovb-dom { grid-column: 1 / -1; }
	.ge-ovb { grid-template-columns: 1fr 1fr; }
	.ge-ov-main a { font-size: clamp(30px, 3.6vw, 48px); }
}
@media (prefers-reduced-motion: no-preference) {
	.ge-ov-main a { transition: color .3s, transform .45s cubic-bezier(.2, .7, .2, 1); }
	.ge-ov-main .ge-fl { transition: opacity .3s, transform .45s cubic-bezier(.2, .7, .2, 1); }
	.ge-ov-t small { transition: max-height .4s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
	.ge-ov-media div { transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
	.ge-ov-tv, .ge-ovb-dom a, .ge-ov-rs a, .ge-ov-close { transition: background .25s, color .25s, border-color .25s; }
}

/* Navigation rapide de l'en-tête (ordinateur, 1180 px et plus), comme la démo du 26/10/2026 : liens principaux, menus déroulants au survol et au clavier. Sous 1180 px, seul le menu plein écran reste. */
.nav-site { display: none; align-items: center; gap: 2px; margin: 0 8px 0 auto; }
.nav-site .nv { position: relative; }
.nav-site .nv > a { display: block; padding: 24px 12px; font-family: var(--titre); font-weight: 600; font-size: .875rem; color: var(--sable, #f3f1ec); text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav-site .nv > a:hover, .nav-site .nv.ouvert > a, .nav-site:not(.js) .nv:focus-within > a { color: var(--or-vif); }
.nav-site .nv-d { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 10px 0; background: var(--noir); border: 1px solid #2b2722; border-top: 2px solid var(--or); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
/* Sans JavaScript : survol et focus. Avec le script (assets/nav-site.js) : classe .ouvert (survol retardé, clavier, tactile) */
.nav-site:not(.js) .nv:hover .nv-d, .nav-site:not(.js) .nv:focus-within .nv-d, .nav-site.js .nv.ouvert .nv-d { opacity: 1; visibility: visible; transform: none; }
.nav-site .nv-d a { display: block; padding: 9px 18px; font-size: .875rem; color: #e6e0d4; text-decoration: none; }
.nav-site .nv-d a:hover { background: #1e1b17; color: var(--or-vif); }
.nav-site .nv-d .nv-all { margin-top: 6px; border-top: 1px solid #2b2722; color: var(--or-vif); font-weight: 600; }
@media (min-width: 1180px) { .nav-site { display: flex; } }
@media (min-width: 1180px) and (max-width: 1499px) { .tels { display: none; } }
/* Ouverture au clavier : sans transition, pour que le focus puisse entrer tout de suite dans le menu (un élément encore invisible ne reçoit pas le focus) */
.nav-site .nv.instant .nv-d { transition: none; }
@media (prefers-reduced-motion: reduce) { .nav-site .nv-d { transition: none; } }

/* Hero */
.hero-visuel { position: absolute; top: 0; right: 0; bottom: 0; width: 47%; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
.hero-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%); }

/* Énoncé */
.enonce-texte { font-family: var(--titre); font-weight: 600; font-size: var(--wp--preset--font-size--enonce); line-height: .98; max-width: 17em; margin: 0 0 1.6rem; }
.enonce-suite { font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 500; max-width: 48ch; }

/* Cartes objectifs */
.surtitre { font-family: var(--titre); font-weight: 600; letter-spacing: .02em; color: var(--or-vif); font-size: var(--wp--preset--font-size--petit); margin: 0 0 1.1rem; }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3.5rem; border: 1px solid var(--or-sombre); }
.carte-img { position: absolute; inset: 0; z-index: 0; }
.carte-corps { position: relative; z-index: 2; padding: 2rem 2rem 2.2rem; }
.carte .wp-block-button__link { padding: .85rem 1.3rem; }

/* Quatre étapes du contact */
.chemin { display: grid; grid-template-columns: 4fr 8fr; gap: var(--colonnes); align-items: stretch; }
.chemin-img { position: relative; min-height: 620px; border: 1px solid var(--or-sombre); }
.chemin-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .5)); }
.etapes-lead { margin-top: 2.5rem; counter-reset: l; }
.etapes-lead .etape { counter-increment: l; padding: 1.6rem 0; border-top: 2px solid var(--or-sombre); }
.etapes-lead .etape:last-child { border-bottom: 2px solid var(--or-sombre); }
.etapes-lead .etape p { margin: 0; }
.etape-titre strong { font-family: var(--titre); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; color: var(--ivoire); }
.etape-titre { line-height: 1; }
.etape-titre strong::before { content: counter(l); display: inline-block; min-width: 1.4em; color: var(--or); font-style: italic; }
.etapes-lead .etape-titre + p { margin: .5rem 0 .2rem; font-size: 1.2rem; font-weight: 500; max-width: 46ch; }
.etape-outils { color: var(--gris); font-size: var(--wp--preset--font-size--petit); }

/* Méthode */
.methode-band { position: relative; overflow: hidden; }
.methode-band .fond, .cta-final .fond { position: absolute; inset: 0; z-index: 0; }
.methode-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0, rgba(0, 0, 0, .84) 60%, rgba(0, 0, 0, .7)); }
.etapes { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--colonnes); margin-top: 3rem; counter-reset: m; }
.etapes .etape { counter-increment: m; display: grid; grid-template-columns: 4rem 1fr; padding: 1.3rem 0; border-top: 1px solid var(--or-sombre); }
.etapes .etape::before { content: counter(m, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--titre); font-weight: 700; font-size: 2rem; color: var(--or); line-height: 1; }
.etapes .etape > * { grid-column: 2; }
.etapes h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.etapes p { margin: 0; color: var(--gris); font-size: 1rem; }

/* Visibilité IA, études de cas, actualités, formation */
.ia { display: grid; grid-template-columns: 7fr 5fr; gap: var(--colonnes); align-items: center; }
.ia-img, .visuel-carre { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--or-sombre); }
.wp-block-image:is(.ia-img, .visuel-carre) { overflow: visible; }
.duo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--colonnes); align-items: start; }
.duo-img { display: grid; grid-template-columns: 6fr 6fr; gap: var(--colonnes); align-items: center; }

/* Offres */
.offres { margin-top: 2.5rem; border-bottom: 2px solid var(--or-sombre); }
.offre { display: grid; grid-template-columns: 4fr 6fr 2.5fr; gap: 1.5rem 2rem; padding: 1.7rem 1rem; border-top: 2px solid var(--or-sombre); align-items: center; }
.offre:hover { background: var(--or); }
.offre:hover :is(h3, p, .prix a) { color: var(--noir); }
.offre:hover .prix a { border-bottom-color: var(--noir); }
.offre h3 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.7rem); }
.offre p { margin: 0; color: var(--gris); }
.offre .prix { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; line-height: 1.5; text-align: right; max-width: none; }
.offre .prix a { color: var(--or); text-decoration: none; border-bottom: 2px solid var(--or-sombre); }
.offre .prix a:hover { color: var(--or-vif); }

/* Secteurs */
.secteurs { list-style: none; }
.secteurs li { font-family: var(--titre); font-weight: 700; font-size: var(--wp--preset--font-size--geant); line-height: .98; color: transparent; -webkit-text-stroke: 2px var(--or); letter-spacing: -.01em; }
.secteurs li:nth-child(odd) { padding-left: clamp(0rem, 6vw, 5rem); }

/* Actualités (boucle de requête) */
.articles { list-style: none; margin: 0; padding: 0; }
.articles li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--or-sombre); }
.articles .wp-block-post-date { color: var(--gris); }
.articles .wp-block-post-title { margin: 0; max-width: none; font-family: var(--titre); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.articles .wp-block-post-title a { color: var(--ivoire); text-decoration: none; }
.articles .wp-block-post-title a:hover { color: var(--or); }

/* Appel à l'action final */
.cta-final { position: relative; overflow: hidden; border-top: 4px solid var(--or); }
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .95) 0, rgba(0, 0, 0, .75) 55%, rgba(0, 0, 0, .35)); }
.cta-final h2 { font-size: clamp(1.9rem, 5.8vw, 5.4rem); max-width: 12em; overflow-wrap: break-word; }

/* En-tête de page intérieure (gabarit page, à compléter en Phase 4) */
.pagehead { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 4px solid var(--or); }
.pagehead h1 { font-size: clamp(1.9rem, 5vw, 4.4rem); max-width: 12em; line-height: .96; overflow-wrap: break-word; }

/* Pages légales (gabarit page-legale) : colonne de lecture, intertitres à l'échelle d'un texte long */
.texte-legal .wp-block-post-content > * { max-width: 860px; margin-inline: 0; }
.texte-legal .wp-block-post-content > * + * { margin-top: 1rem; }
.texte-legal p, .texte-legal li { font-size: 1rem; line-height: 1.7; max-width: 72ch; }
.texte-legal .wp-block-post-content > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet, rgba(255, 255, 255, .14)); }
.texte-legal .wp-block-post-content > h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; margin-top: 2rem; }
.texte-legal .wp-block-post-content > h4, .texte-legal .wp-block-post-content > h5 { font-size: 1.05rem; line-height: 1.3; margin-top: 1.5rem; }
.texte-legal .wp-block-post-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texte-legal ul, .texte-legal ol { padding-left: 1.4rem; }
.texte-legal li + li { margin-top: .35rem; }
.texte-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Pages intérieures : fil d'Ariane, étape, listes, rubriques, bureaux (archive) */
.fil { font-size: .92rem; color: var(--gris); margin-bottom: 1.5rem; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--or); }
.stage { display: inline-block; background: var(--or); color: var(--noir); padding: .3rem .8rem; font-size: .9rem; font-weight: 700; margin-bottom: 1.25rem; }
.pagehead-img { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: 0; margin: 0; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60%); mask-image: linear-gradient(to right, transparent 0, #000 60%); opacity: .6; }
.pagehead-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.liste { list-style: none; margin: 1.5rem 0 0; }
.liste li { padding: 1rem 0 1rem 2rem; border-top: 1px solid var(--or-sombre); position: relative; font-size: 1.08rem; }
.liste li::before { content: ""; position: absolute; left: 0; top: 1.65rem; width: 1.1rem; height: 3px; background: var(--or); }
.liste li:last-child { border-bottom: 1px solid var(--or-sombre); }
.groupe-titre { margin-top: 3rem; }
.liens .wp-block-pages-list__item__link { color: var(--or); }
.agences { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; margin-top: 2rem; }
.agences h3 { color: var(--or); }
.agences.une-colonne { grid-template-columns: 1fr; } /* page contact : agences empilées à côté du formulaire */
.adresse { color: var(--ivoire); margin-bottom: 0; } /* <address> de l'archive : sans la marge des paragraphes */

/* Composants des pages intérieures de l'archive : méthode détaillée, études de cas, équipe, preuves, visuels */
.detail-etapes { list-style: none; counter-reset: d; margin: 2rem 0 0; padding: 0; }
.detail-etapes > li { counter-increment: d; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 2.4rem 0; border-top: 2px solid var(--or-sombre); }
.detail-etapes > li::before { content: counter(d, decimal-leading-zero); font-family: var(--titre); font-weight: 700; font-size: 3rem; color: var(--or); line-height: 1; }
.detail-etapes dl { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1.5rem; }
.detail-etapes dt { color: var(--or); font-weight: 700; }
.detail-etapes dd { margin: 0; }
.specs { font-family: var(--titre); font-weight: 600; letter-spacing: .02em; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.15; color: var(--ivoire); max-width: 24ch; }
.visuel-haut { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--or-sombre); }
.side-img { margin-top: 2rem; }
.preuves { background: var(--charbon); border-bottom: 1px solid var(--trait); }
.preuves ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; }
.preuves li { padding: 1.9rem 1.5rem 1.9rem 0; border-right: 1px solid var(--trait); margin-right: 1.5rem; }
.preuves li:last-child { border-right: 0; margin-right: 0; }
.preuves strong { display: block; font-family: var(--titre); font-weight: 600; font-size: var(--wp--preset--font-size--chiffre); letter-spacing: -.02em; color: var(--or-vif); line-height: 1.1; }
.preuves span { color: var(--gris); font-size: .95rem; }
.cas-vide { border: 2px solid var(--or); padding: 2.2rem; max-width: 760px; margin-top: 2rem; }
.equipe { list-style: none; margin: 2rem 0 0; padding: 0; }
.equipe li { display: grid; grid-template-columns: 1fr 3fr; gap: 1.5rem; padding: 1.2rem 0; border-top: 1px solid var(--or-sombre); }
.equipe strong { font-family: var(--titre); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; }
.equipe span { color: var(--gris); }
.wp-block-image.visuel-haut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Articles : en-tête, contenu, pagination */
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--gris); }
.article-meta .wp-block-post-terms a { color: var(--or); }
.article-image { margin: 0 0 2.5rem; }
.contenu-article { max-width: none; }
.contenu-article > :is(h2, h3) { margin-top: 2.5rem; } /* titres du texte seulement : ceux des encadrés suivent leur style de bloc */
.contenu-article > h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.contenu-article :is(ul, ol) { margin: 0 0 1rem; padding-left: 1.4rem; }
.contenu-article li { margin-bottom: .4rem; }
.contenu-article img { height: auto; }
/* Articles du blog, rendu V2 (30/10/2026) : corps de lecture clair (gabarit single.html : band blanc), pleine largeur du conteneur (.wrap), titres et encadrés
   dans l'esprit des pages du paquet. L'en-tête (.pagehead), le bandeau « Actualités » et le pied restent noirs et or. */ /* titres coupés en deux h2 dans d'anciens articles : lus comme un seul titre */
.band.article .contenu-article :is(.is-style-carte, blockquote) { margin-block: 2rem; padding: 1.6rem clamp(1.2rem, 4vw, 2rem); border: 0; border-left: 4px solid var(--or); background: #f3f1ed; color: var(--encre); }
.band.article .contenu-article .is-style-carte :is(h2, h3, h4) { margin-top: 0; font-family: var(--titre); font-size: 1.3rem; color: var(--encre); }
.band.article .contenu-article .is-style-carte :is(ul, ol, p, li) { color: var(--encre); }
.band.article .contenu-article .wp-block-button__link { border-radius: 0; }
.band.article .contenu-article .wp-block-buttons:not(.is-style-ghost) .wp-block-button:not(.is-style-ghost) .wp-block-button__link { background: var(--or); color: var(--noir); border-color: var(--or); }
.band.article .contenu-article .is-style-ghost .wp-block-button__link { background: transparent; color: var(--encre); border-color: var(--encre); }
.band.article .contenu-article .is-style-ghost .wp-block-button__link:hover { background: var(--encre); color: var(--or-vif); }
.pagination { margin-top: 2.5rem; gap: 1rem; }
.pagination a, .pagination .page-numbers { color: var(--or); }
.pagination .current { color: var(--ivoire); font-weight: 700; }
.home .articles .wp-block-post-title, .archive .articles .wp-block-post-title { margin: 0; }

/* Landing pages : en-tête et pied réduits */
.site-header.landing .wrap { justify-content: flex-start; }
.site-footer.landing { padding: 2rem 0; border-top: 1px solid var(--trait); font-size: var(--wp--preset--font-size--petit); color: var(--gris); }
.site-footer.landing .bas { margin-top: 0; border-top: 0; padding-top: 0; }

/* Pied de page (pack) : marque, 3 colonnes de liens, ligne de mentions. Liens en gris doux (9,83:1), mentions en gris légal (5,33:1). */
.site-footer { background: var(--noir); } /* le cadre (fond, retrait, filet) est celui du bloc .pied de patterns/pied.php, comme l'artefact */
.pied-formations h2 { font-family: var(--titre); font-weight: 600; font-size: .9375rem; letter-spacing: 0; margin: 0 0 .9rem; color: var(--ivoire); line-height: 1.2; }
.pied-formations ul { list-style: none; margin: 0; padding: 0; }
.pied-formations li { padding: 0; margin-bottom: .5rem; }
.pied-formations a, .pied-formations .ge-sans-lien { color: var(--gris); text-decoration: none; }
.pied-formations a:hover { color: var(--or-vif); }
.pied-marque .logo { margin-bottom: 1rem; }
.pied-marque p { margin: 0 0 .75rem; max-width: 34ch; line-height: 1.7; }
.pied-marque .villes { display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1rem; }
.pied-marque .villes a { color: var(--ivoire); }
.pied-marque .suivre { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.pied .wp-block-image { margin: 0 0 1rem; }
.pied .wp-block-image img { width: 203px; height: auto; aspect-ratio: 406 / 96; }
.bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; color: var(--ge-legal, #7d776d); font-size: .8125rem; }
.bas p { margin: 0; }
.bas a { color: var(--ge-legal, #7d776d); margin-left: 1.25rem; text-decoration: none; }
.bas a:hover { color: var(--or-vif); }
.bas a:first-child { margin-left: 0; }

/* Barre fixe mobile « Appeler / Besoin de clients ? » (pack) : visible jusqu'à 700 px, à tester avec le bandeau de consentement */
.barre { display: none; }
.barre .btn.ghost { background: transparent; color: var(--ivoire); border-color: rgba(255, 255, 255, .45); }

/* Points de rupture (à ramener à 3 ou 4 valeurs au fil des patterns : 560, 860, 1060, 980 aujourd'hui) */
@media (max-width: 700px) {
	.barre { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; gap: 8px; background: var(--noir); border-top: 1px solid var(--trait); padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
	.barre .btn { flex: 1; text-align: center; padding: 13px 10px; font-size: .875rem; }
	.barre .btn:first-child { flex: .6; }
	body { padding-bottom: 76px; }
	html:has(main .ge) body { padding-bottom: 76px; } /* le style global de WordPress remet body à 0 : dans le paquet, la place de la barre reste sous le pied, comme dans l'artefact */
}
@media (max-width: 1060px) {
	.tels { display: none; }
}
@media (max-width: 980px) {
	.pied-marque { grid-column: 1 / -1; }
	.hero-visuel { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: .55; }
	.cartes { grid-template-columns: 1fr; }
	.chemin, .ia, .duo, .duo-img { grid-template-columns: 1fr; }
	.chemin-img { min-height: 380px; }
	.ia-img { max-width: 480px; }
	.etapes { grid-template-columns: 1fr; }
	.offre { grid-template-columns: 1fr; padding: 1.5rem 0; }
	.offre .prix { text-align: left; }
	.pagehead-img { width: 100%; opacity: .3; -webkit-mask-image: none; mask-image: none; }
	.preuves ul { grid-template-columns: 1fr 1fr; }
	.preuves li { border-right: 0; border-bottom: 1px solid var(--trait); margin-right: 0; }
	.detail-etapes dl { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.agences { grid-template-columns: 1fr; columns: 1; }
	.preuves ul { grid-template-columns: 1fr; }
	.preuves li { padding: 1.1rem 0; }
	.equipe li { grid-template-columns: 1fr; gap: .3rem; }
	.detail-etapes > li { grid-template-columns: 3.5rem 1fr; }
	.articles li { grid-template-columns: 1fr; gap: .3rem; }
	.logo img { height: 38px; }
	.secteurs li:nth-child(odd) { padding-left: 0; }
	.wp-block-button .wp-block-button__link { padding: .95rem 1.3rem; }
}
@media (max-width: 560px) {
	.en-tete-droite .wp-block-buttons { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Formulaires Forminator (style « Aucun ») : rendu du formulaire de l'archive (.formulaire) */
/* Visible dès le HTML : Forminator masque le formulaire par un style en ligne (display: none) jusqu'à
   l'exécution de son script, ce qui décale la page (CLS 0,5 mesuré sur la landing). Seul !important l'emporte. */
form.forminator-ui { display: block !important; max-width: 640px; margin-top: 2rem; }
.forminator-ui .forminator-row { margin-bottom: 1.2rem; }
.forminator-ui .forminator-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.forminator-ui .forminator-required { color: var(--or); }
.forminator-ui input:not([type=checkbox]):not([type=radio]), .forminator-ui select, .forminator-ui textarea { font: inherit; color: var(--ivoire); background: var(--charbon); border: 1.5px solid var(--wp--preset--color--contour); padding: .9rem 1rem; border-radius: 0; width: 100%; box-sizing: border-box; }
.forminator-ui input:focus, .forminator-ui select:focus, .forminator-ui textarea:focus { border-color: var(--or); outline: 3px solid var(--or-vif); outline-offset: 3px; }
.forminator-ui textarea { min-height: 150px; resize: vertical; }
.forminator-ui .rgpd { font-size: .88rem; color: var(--gris); margin: 0; }
.forminator-ui .forminator-error-message { display: block; color: #ff8a80; font-size: .9rem; margin-top: .3rem; }
.forminator-ui .forminator-description { color: var(--gris); font-size: .9rem; }
.forminator-ui .forminator-button-submit { font-family: var(--titre); font-size: .9375rem; cursor: pointer; display: inline-block; background: var(--or); color: var(--noir); font-weight: 600; padding: 1rem 1.75rem; border: 1.5px solid var(--or); border-radius: 0; }
.forminator-ui .forminator-button-submit:hover { background: var(--or-vif); border-color: var(--or-vif); }
.forminator-ui .forminator-response-message:not(:empty) { border: 2px solid var(--or); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.forminator-ui .forminator-response-message p { margin: 0; }

/* FAQ de la page (bloc groupe-echo/faq) : <details> natifs, sans JavaScript */
.faq-liste { margin-top: 2rem; max-width: 820px; border-top: 1px solid var(--trait); }
.faq-item { border-bottom: 1px solid var(--trait); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--or); font-size: 1.4rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--gris); margin: 0 0 1.2rem; }

/* Offre d'emploi (bloc groupe-echo/offre) : texte à gauche, fiche à droite, une colonne en mobile */
.emploi-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.emploi-texte h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 2rem 0 .8rem; }
.emploi-texte h2:first-child { margin-top: 0; }
.emploi-texte ul { padding-left: 1.2rem; }
.emploi-fiche { border: 2px solid var(--or); padding: 1.5rem; }
.emploi-fiche h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.emploi-fiche dl { margin: 0 0 1.5rem; }
.emploi-fiche dl > div { padding-block: .6rem; border-top: 1px solid var(--trait); }
.emploi-fiche dt { color: var(--gris); font-size: .9rem; }
.emploi-fiche dd { margin: 0; font-weight: 700; }
.emploi-fin { border: 2px solid var(--or); padding: 1rem 1.2rem; margin: 0 0 2rem; font-weight: 700; }
@media (max-width: 980px) {
	.emploi-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Lien de secours sous un formulaire Forminator chargé en différé (inc/forminator.php) */
.ge-form-secours { margin: 1rem 0 0; max-width: none; font-size: var(--wp--preset--font-size--petit); color: var(--gris); }

/* Mentions légales : gris de la démo (#7d776d sur noir, 4,46:1) ; valeur corrigée (#8a847a, 5,33:1) avec l'interrupteur « contrastes corrigés » */
body.ge-contrastes { --ge-legal: #8a847a; }


/* Pages de la démo : fond blanc (comme body de la démo) ; l'en-tête rgba(11,10,9,.92) prend ainsi la même teinte que dans la démo */
body.ge-demo { background: #fff; }

/* Pied de page de la démo : texte et liens en blanc (la démo force color: blanc sur .pied), survol or clair, marque empilée (le lien .pied a de la démo passe .brand en display: block), mentions alignées à gauche */
.pied-formations a, .pied-formations .ge-sans-lien { color: #fff; }
.pied-formations a:hover { color: #c9a965; }
.pied-marque .brand { display: block; }
.pied-marque .brand img { display: block; }
.pied-marque .brand span { display: block; margin-top: 12px; font-size: 20px; }
.bas { justify-content: flex-start; gap: .5rem 1.5rem; }
.bas a { margin-left: 0; }

/* Police de secours de l'italique d'accent (Cormorant Garamond) : Georgia italique ajustée aux mesures de Cormorant (largeur moyenne mesurée à 78,8 % de celle de Georgia, ascendante et
   descendante recalées), pour que les titres ne changent pas de nombre de lignes quand la vraie police arrive (CLS de Com'promis : 0,27 avant, voir docs/decisions.md du 23/10/2026). */
@font-face { font-family: "Cormorant Fallback"; font-style: italic; font-weight: 500; src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia"); size-adjust: 78.8%; ascent-override: 116.8%; descent-override: 36.8%; line-gap-override: 0%; }
/* Police de secours de Montserrat (mesures dans Chrome le 26/10/2026 : Montserrat 600 est 1,075 fois plus large qu'Arial ; ascendante 96,8 %, descendante 25,1 %, divisées par le facteur) : même largeur de texte avant et après le chargement de la police, donc aucun décalage des liens de la navigation des tarifs */
@font-face { font-family: "Montserrat Fallback"; font-weight: 400 800; src: local("Arial"), local("Helvetica"); size-adjust: 107.5%; ascent-override: 90%; descent-override: 23.3%; line-gap-override: 0%; }
/* Police de secours d'Open Sans (mesures dans Chrome le 29/10/2026 sur 3 400 caractères du texte de l'accueil : 1,0216 fois plus large qu'Arial en graisse 400 ; ascendante 106,9 %, descendante 29,3 %, divisées par le facteur). Avec l'ancien facteur (1,044) le paragraphe du bandeau de l'accueil passait de 4 lignes à 3 à l'arrivée de la police (décalage de 28 px, CLS 0,031 sur mobile) */
@font-face { font-family: "Open Sans Fallback"; font-weight: 300 800; src: local("Arial"), local("Helvetica"); size-adjust: 102.2%; ascent-override: 104.6%; descent-override: 28.7%; line-gap-override: 0%; }

/* Logo du site (image choisie dans Réglages Groupe Écho > Organisation > Logo du site) */
/* Logo des Réglages (médiathèque, fichier 1200 x 335 px) : même dessin que le logo de l'artefact (960 x 227 px), mais entouré de marges transparentes (dessin visible : 1109 x 263 px, soit 13,7 % de marge en haut et en bas, 17,3 % de la hauteur visible de chaque côté).
   --h est la hauteur visible voulue (celle du logo de l'artefact : 40 px en-tête et menu, 56 px pied de page, 30 px sous 560 px) ; l'image est agrandie des marges et les marges sont annulées : le dessin occupe exactement la même place que dans l'artefact. */
.brand .logo-site { --h: 40px; display: block; width: auto; height: calc(var(--h) * 1.2738); margin: calc(var(--h) * -.1369) calc(var(--h) * -.173); max-width: none; }
.pied-b .brand .logo-site { --h: 56px; }
@media (max-width: 560px) { .brand .logo-site { --h: 30px; } .pied-b .brand .logo-site { --h: 56px; } }
.bas a + a { margin-left: 1rem; }

/* Réseaux sociaux du pied de page : pictogrammes (le nom reste dans aria-label et title) */
.pied-marque .suivre { gap: .6rem; }
.pied-marque .suivre a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: color .2s, border-color .2s, background-color .2s; }
.pied-marque .suivre a:hover, .pied-marque .suivre a:focus-visible { color: var(--or-vif, #c9a965); border-color: var(--or-vif, #c9a965); }
.pied-marque .suivre svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Menu ouvert : la barre mobile « Appeler / Besoin de clients ? » passe sous la superposition (z-index 80 dans l'artefact) */
html.ge-ov-lock .barre { display: none; }
/* Reflet du bouton « Tester ma visibilité » au survol : comme .btn de l'artefact (animation dans effets.css, interrupteur « reflet ») */
.ge-ov-tv::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-20deg); pointer-events: none; }

/* Gabarits clairs V2 (liste du blog, catégories, pages légales et pages titre) : corps sur fond blanc (band blanc), en-tête et pied restent noirs et or. */
.band.blanc .articles .wp-block-post-date { color: var(--wp--preset--color--gris); }
.band.blanc .articles .wp-block-post-title a { color: var(--encre); }
.band.blanc .articles .wp-block-post-title a:hover { color: #80602f; }
.band.blanc .texte-legal > .wp-block-post-content > h2 { border-top-color: #e2ddd3; }

/* Pages de prestation, de ville et de contact (anciens gabarits), rendu V2 (29/10/2026) : bandes de contenu claires (blanc, FAQ en sable), en-tête et bandeau final restent noirs et or. */
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) { background: #fff; color: var(--encre); }
:is(.page-prestation, .page-ville, .page-contact) .band.faq { background: var(--sable); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) :is(h2, h3, h4, strong, dt) { color: var(--encre); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) :is(.lead, .muted, .etape-outils, .etapes p, .faq-item p) { color: var(--wp--preset--color--gris); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) :is(p, li, dd) a { color: #80602f; text-decoration: underline; text-underline-offset: 3px; }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) em { color: #80602f; }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) :focus-visible { outline-color: var(--encre); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) :is(.liens li, .etapes .etape, .etapes-lead .etape, .cas, .faq-liste, .faq-item) { border-color: #e2ddd3; }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .liens a { color: var(--encre); text-decoration: none; }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .liens a:hover { color: #80602f; }

/* Boutons et formulaires dans les bandes claires (404, pages de prestation, de ville et de contact) : texte noir sur le bouton doré, bouton fantôme sombre, champs clairs. */
.band.blanc .wp-block-button:not(.is-style-ghost) .wp-block-button__link { color: var(--noir); }
.band.blanc .is-style-ghost .wp-block-button__link { background: transparent; color: var(--encre); border-color: var(--encre); }
.band.blanc .is-style-ghost .wp-block-button__link:hover { background: var(--encre); color: var(--or-vif); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .forminator-ui :is(.forminator-label, legend, .forminator-description, .forminator-radio-label, .forminator-checkbox-label) { color: var(--encre); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .forminator-ui :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { background: var(--sable); color: var(--encre); border-color: #d3c7b5; }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .forminator-ui :is(input, select, textarea):focus { background: #fff; border-color: var(--or); outline-color: var(--encre); }
:is(.page-prestation, .page-ville, .page-contact) .band:not(.charbon) .forminator-ui .forminator-button-submit { color: var(--noir); }