/* =============================================================
   GESTION WEB FRANCE — COMPOSANTS
   Chaque bloc correspond à un template-part réutilisable.
   ============================================================= */

/* -------------------------------------------------------------
   NAVIGATION — le soulignement des liens ne doit jamais
   déborder sur l'en-tête, les menus ni les cartes.
   (base.css souligne les liens de contenu : c'est voulu pour
   la lisibilité des textes, pas pour la navigation.)
   ------------------------------------------------------------- */
.gw #site-header a,
.gw #site-navigation a,
.gw .site-branding a,
.gw .site-logo a,
.gw #mobile-menu a,
.gw .gw-pied a,
.gw .gw-carte a,
.gw .gw-btn{
	text-decoration:none;
}
.gw #site-header a:hover,
.gw .site-branding a:hover{
	color:var(--gw-cuivre);
}

/* -------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------- */
.gw-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	/* Le libellé était en --t-label, soit 14,5 px : la taille des
	   étiquettes. Un bouton qui porte l'action principale de la page
	   ne peut pas être écrit plus petit que le texte qui l'entoure. */
	padding:15px 34px;
	/* 6 px se lisait comme un angle vif à peine adouci. --gw-rayon (10 px)
	   est le rayon déjà utilisé par les cartes du site : les boutons
	   cessent d'être la seule forme à part. */
	border-radius:var(--gw-rayon);
	border:1.5px solid transparent;
	font-family:var(--gw-titre);
	font-weight:600;
	font-size:var(--t-second);
	letter-spacing:.01em;
	text-decoration:none !important;
	cursor:pointer;
	transition:background var(--gw-transition),border-color var(--gw-transition),
	           color var(--gw-transition),transform var(--gw-transition);
}


/* ☠️ LE BOUTON PLEIN N'EST PLUS CUIVRE.
   Sur fond blanc ou crème, --gw-cuivre-action (#a35f1e) donne un aplat
   brun terne — il a été assombri exprès pour porter du texte blanc, ce
   qui lui retire précisément l'éclat qu'on attend d'un bouton.
   L'encre tranche franchement sur le clair, monte à 16:1 de contraste,
   et s'accorde au bouton « Contact » de l'en-tête. Le cuivre reste ce
   qu'il fait de mieux : les surtitres, les liens, les filets, le survol. */
.gw-btn--plein{background:var(--gw-encre);color:#fff !important;}
.gw-btn--plein:hover{background:var(--gw-cuivre-action);color:#fff !important;}

/* -------------------------------------------------------------
   LE BOUTON SECONDAIRE PORTE LA COULEUR DÈS LE REPOS
   -------------------------------------------------------------
   Il avait un contour gris et un texte encre, et ne prenait la
   couleur de la charte qu'au survol. À côté d'un bouton cuivre
   plein, il passait pour un bouton « noir » — et sur un écran
   tactile, où rien ne se survole, il ne devenait jamais coloré.

   Contour cuivre et libellé cuivre dès le premier regard ; au
   survol, il se remplit. Les deux boutons appartiennent enfin à la
   même famille, l'un plein, l'autre en contour.
   ------------------------------------------------------------- */
/* Le secondaire suit la même famille : même forme, même couleur, vide
   au lieu de plein. La hiérarchie se lit au remplissage. */
.gw-btn--ligne{
	border-color:var(--gw-encre);
	color:var(--gw-encre) !important;
	background:transparent;
}
.gw-btn--ligne:hover{
	border-color:var(--gw-encre);
	background:var(--gw-encre);
	color:#ffffff !important;
}

/* Version un cran en dessous, pour le pied de page. Elle était à
   14,5 px — la taille des étiquettes — dans un pied dont le texte
   courant est à 17 : le bouton paraissait plus petit que ce qui
   l'entourait, alors que c'est la seule action de la zone. */
.gw-btn--petit{padding:13px 28px;font-size:var(--t-second);}

/* Sur fond encre, le libellé passe en blanc — le cuivre sombre y
   serait illisible — mais le contour reste cuivre : c'est lui qui
   rattache le bouton à la charte, et il se voit franchement, là où
   un blanc à 30 % d'opacité disparaissait. */
/* ☠️ 26/08 — LE HÉROS A ÉTÉ RETIRÉ DE CETTE RÈGLE.
   Elle éclaircit le bouton en contour pour qu'il tienne sur un fond
   SOMBRE. Le héros étant passé en crème, elle y posait du texte blanc
   sur du crème : le bouton « Mon site est en panne » devenait invisible.
   Elle ne vaut plus que pour les vraies sections en encre. */
.gw-section--encre .gw-btn--ligne{
	border-color:var(--gw-cuivre);
	color:#ffffff !important;
}
.gw-section--encre .gw-btn--ligne:hover{
	border-color:var(--gw-cuivre-action);
	background:var(--gw-cuivre-action);
	color:#ffffff !important;
}

/* -------------------------------------------------------------
   TITRE DE SECTION
   ------------------------------------------------------------- */
.gw-titre-section{
	max-width:700px;
	margin:0 auto clamp(36px,4vw,56px);
	text-align:center;
}
/* Le chapô d'une section est du texte de lecture, pas une légende :
   il se lit en encre pleine. */
.gw-titre-section p{
	margin:0;
	text-wrap:balance;      /* jamais un mot seul sur la dernière ligne */
	font-size:var(--t-corps);
	line-height:1.65;
	color:var(--gw-texte);
}
.gw-section--encre .gw-titre-section p{color:#ffffff;}

/* -------------------------------------------------------------
   HÉROS
   ------------------------------------------------------------- */
.gw-hero{
	position:relative;
	background:var(--gw-encre);
	color:#ffffff;
	padding-block:clamp(68px,8vw,104px) clamp(60px,7vw,88px);
	overflow:hidden;
}
/* Voile de lumière discret : pas de dégradé criard. */
.gw-hero::before{
	content:"";
	position:absolute;inset:0;
	background:
		radial-gradient(760px 400px at 12% -8%,rgba(194,118,44,.20),transparent 62%),
		radial-gradient(680px 380px at 92% 6%,rgba(255,255,255,.05),transparent 60%);
	pointer-events:none;
}
.gw-hero > *{position:relative;}
/* Le bloc part du bord gauche du conteneur : un texte aligné à gauche
   dans une boîte centrée donne l'impression de flotter. */
.gw-hero__inner{max-width:720px;margin-inline:0;}
.gw .gw-hero h1{color:#fff;margin-bottom:22px;}
.gw .gw-hero__texte{
	font-size:clamp(18px,2.1vw,21px);
	line-height:1.75;
	color:#ffffff;
	max-width:600px;
	margin-bottom:36px;
	text-wrap:balance;
}
.gw-hero__actions{display:flex;gap:12px;flex-wrap:wrap;}
.gw .gw-hero__note{
	margin:38px 0 0;
	font-size:var(--t-label);
	font-weight:500;
	color:#ffffff;
}

/* -------------------------------------------------------------
   BARRE DE TECHNOLOGIES
   Tous les termes au même niveau : aucune hiérarchie inventée.
   ------------------------------------------------------------- */
.gw-technos{
	background:var(--gw-encre-clair);
	padding-block:24px;
}
.gw-technos .gw-conteneur{
	display:flex;
	align-items:center;
	gap:14px 30px;
	flex-wrap:wrap;
}
.gw-technos__intitule{
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#ffffff;
	white-space:nowrap;
	line-height:20px;
}
.gw .gw-technos__liste{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px 26px;
	list-style:none;
	margin:0;
	padding:0;
}
.gw-technos__liste li{
	margin:0;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:600;
	color:#ffffff;
	line-height:20px;
	position:relative;
}
/* Séparateur discret entre les entrées, sauf après la dernière. */
.gw-technos__liste li:not(:last-child)::after{
	content:"";
	position:absolute;
	right:-14px;top:calc(50% + 1px);
	width:3px;height:3px;
	border-radius:50%;
	background:#7c8792;
	transform:translateY(-50%);
}

/* -------------------------------------------------------------
   CARTES
   ------------------------------------------------------------- */
/* Pas de cadre, pas de fond, pas de survol : les cartes sont
   séparées par le blanc et par le trait cuivre. Rien d'autre. */
.gw-carte{
	background:transparent;
	border:0;
	padding:0;
}
.gw-carte h3{margin-bottom:9px;}
.gw-carte p{
	color:var(--gw-texte-doux);
	font-size:var(--t-label);
	text-wrap:pretty;
	max-width:26ch;          /* largeur de lecture confortable */
}
.gw-carte__marque{
	width:42px;height:3px;
	background:var(--gw-cuivre);
	border-radius:2px;
	margin-bottom:18px;
}

/* -------------------------------------------------------------
   ACCUEIL : les quatre façons, devenues cliquables
   Elles étaient de simples cartes : quatre promesses sans
   destination, sur la page la plus visitée du site.
   ------------------------------------------------------------- */
.gw .gw-facon{
	display:flex;
	flex-direction:column;
	height:100%;
	padding:26px 24px 22px;
	background:var(--gw-blanc);
	border:1px solid var(--gw-ligne);
	border-radius:var(--gw-rayon);
	text-decoration:none !important;
	color:inherit;
	transition:border-color var(--gw-transition),box-shadow var(--gw-transition),transform var(--gw-transition);
}
.gw .gw-facon:hover{
	border-color:var(--gw-cuivre);
	box-shadow:var(--gw-ombre);
	transform:translateY(-2px);
}
.gw .gw-facon h3{margin-bottom:9px;color:var(--gw-encre);}
.gw .gw-facon p{
	color:var(--gw-texte-doux);
	font-size:var(--t-second);
	line-height:1.6;
	margin-bottom:16px;
	max-width:none;
}
.gw-facon__lien{
	margin-top:auto;
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	color:var(--gw-cuivre-sombre);
}
.gw .gw-facon:hover .gw-facon__lien{color:var(--gw-cuivre);}

/* Les domaines en étiquettes : servent sur A.S.I. ET sur l'accueil,
   donc la règle vit ici plutôt que dans la feuille d'une seule page. */
.gw .gw-outils__liste{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 12px;
	list-style:none;
	margin:0 auto;
	padding:0;
	max-width:900px;
}
.gw .gw-outils__liste li{margin:0;}
.gw .gw-outils__liste a{
	display:inline-block;
	padding:11px 20px;
	background:var(--gw-blanc);
	border:1px solid var(--gw-ligne);
	border-radius:999px;
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	color:var(--gw-encre);
	text-decoration:none !important;
	transition:border-color var(--gw-transition),color var(--gw-transition),transform var(--gw-transition);
}
.gw .gw-outils__liste a:hover{
	border-color:var(--gw-cuivre);
	color:var(--gw-cuivre-sombre);
	transform:translateY(-2px);
}

/* --- Le socle A.S.I. sur l'accueil --- */
.gw-accueil-asi{text-align:center;}
.gw .gw-accueil-asi h2{
	max-width:22ch;
	margin-inline:auto;
	margin-bottom:20px;
	text-wrap:balance;
}
.gw .gw-accueil-asi__texte{
	max-width:62ch;
	margin:0 auto 28px;
	font-size:var(--t-accroche);
	line-height:1.7;
	color:var(--gw-texte);
	text-wrap:pretty;
}

/* --- Les quatre urgences --- */
.gw .gw-urgence{
	display:block;
	height:100%;
	padding:24px 22px;
	background:var(--gw-blanc);
	border:1px solid var(--gw-ligne);
	border-left:3px solid var(--gw-cuivre);
	border-radius:0 var(--gw-rayon) var(--gw-rayon) 0;
	text-decoration:none !important;
	color:inherit;
	transition:border-color var(--gw-transition),box-shadow var(--gw-transition);
}
.gw .gw-urgence:hover{box-shadow:var(--gw-ombre);}
.gw .gw-urgence h3{
	font-size:var(--t-carte);
	line-height:1.28;
	margin-bottom:10px;
	color:var(--gw-encre);
}
.gw .gw-urgence:hover h3{color:var(--gw-cuivre-sombre);}
.gw .gw-urgence p{
	font-size:var(--t-second);
	line-height:1.55;
	color:var(--gw-texte-doux);
	margin:0;
	max-width:none;
}

/* -------------------------------------------------------------
   ÉTAPES DE MÉTHODE
   ------------------------------------------------------------- */
/* ☠️ Ce bloc était bâti pour un fond encre : filet blanc translucide,
   texte blanc. La section est passée en crème, et ces couleurs sont
   devenues invisibles — du blanc sur du crème donne un contraste de
   1,1 sur 21. Tout est repassé en encre sur clair. */
.gw-etape{
	border-left:2px solid var(--gw-ligne);
	padding:4px 0 4px 24px;
}
/* Un numéro d'étape est un repère, pas un titre : à 38 px il avait
   exactement le poids d'un h2 de section et écrasait le texte qu'il
   annonçait. */
.gw-etape__num{
	display:block;
	font-family:var(--gw-titre);
	font-size:34px;
	font-weight:800;
	line-height:1;
	letter-spacing:-.03em;
	/* Cuivre SOMBRE : sur crème, le cuivre clair descend à 3,3 de
	   contraste, sous le seuil de lisibilité. */
	color:var(--gw-cuivre-sombre);
	margin-bottom:14px;
}
.gw-etape h3{font-size:var(--t-sous-titre);margin-bottom:9px;color:var(--gw-encre);}
.gw-etape p{color:var(--gw-texte-doux);font-size:var(--t-second);}

/* -------------------------------------------------------------
   APPEL À L'ACTION
   ------------------------------------------------------------- */
/* Le bloc était en encre, comme le pied de page qui le suit : les
   deux ne formaient qu'un seul aplat sombre de près de mille pixels,
   séparé par un simple filet. La page se terminait sur un mur noir.

   Il passe en crème : le contenu blanc, l'appel crème et le pied
   encre se distinguent enfin les uns des autres, et le bouton cuivre
   ressort bien mieux sur un fond clair que sur un fond sombre. */
.gw-cta{
	background:var(--gw-creme);
	color:var(--gw-texte);
	text-align:center;
	border-top:1px solid var(--gw-ligne);
	/* Un bloc de quatre lignes n'a pas besoin d'autant de
	   rembourrage qu'une section de contenu : il flottait dans le
	   vide. Un cran en dessous des autres sections. */
	padding-block:clamp(44px,5.2vw,72px);
}
.gw .gw-cta h2{color:var(--gw-encre);}
.gw-cta__inner{max-width:660px;}
/* Ce texte était coupé par un <br> écrit en dur, qui ne tombait
   juste qu'à une seule largeur. « balance » répartit les lignes
   à toutes les tailles d'écran. */
.gw .gw-cta p{font-size:var(--t-accroche);line-height:1.8;text-wrap:balance;}
.gw-cta__actions{margin-top:28px;}
.gw .gw-cta__mention{
	margin:26px 0 0;
	font-size:var(--t-second);
	font-weight:500;
	color:var(--gw-gris);
}
/* L'adresse reste accessible pour qui préfère sa propre messagerie,
   mais en second rang : le chemin principal est le formulaire. */
.gw .gw-cta__mention a{
	color:var(--gw-gris);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1px;
}
.gw .gw-cta__mention a:hover{color:var(--gw-cuivre-sombre);}

/* =============================================================
   PIED DE PAGE
   ============================================================= */
/* Tout y était du même blanc, à la même taille : les intitulés de
   colonne, les liens, la signature et la baseline pesaient pareil.
   Un pied de page se parcourt des yeux, il lui faut trois niveaux
   nets — l'intitulé en cuivre, les liens en blanc, les mentions en
   gris. Le cuivre est la seule couleur de la charte : c'est lui qui
   structure, pas une deuxième teinte. */
.gw-pied{
	background:var(--gw-encre);
	/* Blanc franc, pas un blanc atténué : sur l'encre, la moindre
	   transparence vire au gris. */
	color:#ffffff;
	font-size:var(--t-second);
	border-top:3px solid var(--gw-cuivre);
}
.gw-pied__haut{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr;
	gap:clamp(28px,4vw,56px);
	padding-block:clamp(44px,5vw,64px);
}
.gw .gw-pied__titre{
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--gw-cuivre-clair);
	margin-bottom:18px;
	padding-bottom:12px;
	border-bottom:1px solid rgba(255,255,255,.14);
}
.gw-pied__marque{
	font-family:var(--gw-titre);
	font-size:var(--t-sous-titre);
	font-weight:700;
	color:#fff;
	letter-spacing:-.015em;
	margin-bottom:12px;
	display:block;
}
/* La baseline dit ce que fait la maison : c'est la phrase la plus
   lue du pied de page, elle était écrite plus petit que les liens
   de navigation qui l'entourent. */
.gw .gw-pied__baseline{
	color:#ffffff;
	font-family:var(--gw-titre);
	font-size:var(--t-accroche);
	font-weight:500;
	max-width:340px;
	margin-bottom:20px;
	line-height:1.55;
}
.gw-pied ul{list-style:none;margin:0;padding:0;}

/* La ligne des technologies a été retirée du pied de page : elle
   répétait mot pour mot la colonne « Expertise » voisine.

   La portée d'intervention la remplace. Elle se lit sous la baseline
   sans lui disputer la première place : même blanc plein (sur
   l'encre, on ne hiérarchise jamais en affaiblissant la couleur),
   mais un cran plus petit et sans graisse. */
.gw .gw-pied__portee{
	color:#ffffff;
	font-size:var(--t-second);
	font-weight:400;
	line-height:1.65;
	max-width:340px;
	margin:0 0 22px !important;
}
.gw-pied li{margin-bottom:9px;}
.gw-pied a,
.gw-pied a:hover,
.gw-pied a:focus,
.gw-pied a:visited{
	color:#ffffff;
	text-decoration:none !important;
	border:0 !important;
	box-shadow:none !important;
	transition:color var(--gw-transition);
}
.gw-pied a:hover{color:var(--gw-cuivre-clair);}

/* ☠️ La règle générale du pied pose « color » et « border:0 » avec
   !important pour effacer les soulignements d'OceanWP. Elle écrase
   donc aussi l'habillage du bouton, qui redevenait du simple texte.
   On le rétablit après elle, avec la même force. */
.gw .gw-pied .gw-btn--plein{
	background:var(--gw-cuivre-action) !important;
	color:#ffffff !important;
	border:0 !important;
	font-weight:600;
}
.gw .gw-pied .gw-btn--plein:hover{
	background:var(--gw-cuivre-sombre) !important;
	color:#ffffff !important;
}

.gw-pied__contact a{
	color:#fff;
	font-weight:500;
	text-decoration:none !important;
	box-shadow:none !important;
}

.gw-pied__bas{
	border-top:1px solid rgba(255,255,255,.09);
	padding-block:22px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
	font-size:13px;
	color:#ffffff;
}
.gw-pied__legal{display:flex;gap:20px;flex-wrap:wrap;}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width:900px){
	.gw-pied__haut{grid-template-columns:1fr 1fr;}
	.gw-pied__marque-col{grid-column:1 / -1;}
}
@media (max-width:660px){
	.gw-hero__actions{flex-direction:column;align-items:stretch;}
	.gw-hero__actions .gw-btn{width:100%;}
	.gw-pied__haut{grid-template-columns:1fr;gap:32px;}
	.gw-pied__bas{flex-direction:column;align-items:flex-start;}
	.gw-etape{border-left:none;border-top:2px solid var(--gw-ligne);padding:20px 0 0;}
}

/* -------------------------------------------------------------
   AUCUN SOULIGNEMENT SUR LES BOUTONS NI SUR LES BLOCS SOMBRES
   OceanWP souligne les liens de contenu par un border-bottom :
   ces regles le neutralisent une bonne fois, y compris au survol.
   ------------------------------------------------------------- */
.gw .gw-pied a,
.gw .gw-pied a:hover,
.gw .gw-pied a:focus,
.gw .gw-cta a,
.gw .gw-cta a:hover,
.gw .gw-hero a,
.gw .gw-hero a:hover{
	text-decoration:none !important;
	text-decoration-line:none !important;
	box-shadow:none !important;
	background-image:none !important;
}

/* Les boutons : jamais de soulignement, mais leur contour reste entier. */
.gw a.gw-btn,
.gw a.gw-btn:hover,
.gw a.gw-btn:focus,
.gw a.gw-btn:visited{
	text-decoration:none !important;
	text-decoration-line:none !important;
	box-shadow:none !important;
	background-image:none !important;
}

/* =============================================================
   FIL D'ARIANE + ENTÊTE DE PAGE
   Les deux partagent le fond encre : ils forment un seul bloc.
   ============================================================= */
/* Le fil surmonte l'en-tête et partage son fond : il reçoit donc le
   même voile, sinon la bande sombre se coupe en deux à l'œil. */
.gw-ariane{
	position:relative;
	background:var(--gw-encre);
	padding-top:clamp(20px,2.4vw,28px);
	/* Il était à 14,5 px, dans la police du corps, et chacun de ses
	   maillons était d'un blanc identique : « Accueil », « Expertise »
	   et le titre de la page pesaient pareil. Un fil d'Ariane n'a
	   d'intérêt que s'il se lit en diagonale, donc il lui faut une
	   hiérarchie.

	   Il passe dans la police des titres, monte à 17 px, et la page
	   en cours prend la couleur d'accent : le lecteur voit d'un coup
	   d'œil où il se trouve, et le chemin qu'il a parcouru. */
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	letter-spacing:-.005em;
	overflow:hidden;
}
.gw-ariane::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(720px 420px at 6% -120%,rgba(194,118,44,.26),transparent 64%);
	pointer-events:none;
}
.gw-ariane > *{position:relative;}
.gw-ariane ol{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0 8px;
	list-style:none;
	margin:0;
	padding:0;
}
.gw-ariane li{margin:0;display:flex;align-items:center;gap:8px;}
.gw-ariane li:not(:last-child)::after{
	content:"›";
	/* Le chevron était à #8a95a1 : sur fond encre, il disparaissait. */
	color:#b6c0cb;
	font-size:var(--t-corps);
	line-height:1;
}
/* Le fil respire un peu plus, maintenant qu'il est lisible. */
.gw-ariane ol{gap:2px 10px;}
.gw-ariane li{gap:10px;}
/* Sur fond encre, un blanc à 78 % d'opacité vire au gris et devient
   pénible à lire. Le fil sert à se repérer : il doit être franc.
   Règle générale du site : rien en dessous de 90 % sur fond sombre. */
.gw .gw-ariane a{
	color:#ffffff;
	text-decoration:none !important;
	border:0 !important;
	font-weight:500;
	opacity:.94;
	transition:opacity var(--gw-transition),color var(--gw-transition);
}
.gw .gw-ariane a:hover{opacity:1;color:var(--gw-cuivre-clair);}

/* La page en cours prend la couleur d'accent plutôt qu'un blanc gras :
   c'est le seul maillon sur lequel on ne peut pas cliquer, il doit se
   distinguer par autre chose que la graisse. */
.gw-ariane [aria-current]{color:var(--gw-cuivre-clair);font-weight:600;}

/* Le rembourrage était asymétrique : 48 px au-dessus du titre, 68 en
   dessous du chapô. Le bloc paraissait donc mal calé dans son propre
   fond, et l'aplat noir s'étirait sans raison.

   Il est maintenant égal des deux côtés, et plus court : entre le
   bandeau du menu et l'image de tête, la zone sombre perd une
   quarantaine de pixels sans que rien ne se resserre à l'intérieur. */
.gw-page__entete{
	position:relative;
	background:var(--gw-encre);
	color:#ffffff;
	padding-block:clamp(26px,3vw,38px) clamp(30px,3.4vw,44px);
	overflow:hidden;
	border-bottom:3px solid var(--gw-cuivre);
}

/* L'en-tête n'était qu'un aplat noir avec du texte blanc dessus :
   aucun relief, aucune couleur. Le hero de l'accueil, lui, portait
   déjà un voile de lumière — il n'y a aucune raison que les autres
   pages en soient privées.

   Deux dégradés très doux : un cuivre en haut à gauche, qui réchauffe
   l'encre du côté où commence la lecture, et un blanc à peine visible
   à droite pour éviter que le bloc paraisse plat. Rien de criard :
   c'est un éclairage, pas un aplat de couleur. Le filet cuivre en bas
   tranche la limite avec le blanc du corps. */
.gw-page__entete::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(720px 340px at 6% -30%,rgba(194,118,44,.26),transparent 64%),
		radial-gradient(600px 280px at 96% 4%,rgba(255,255,255,.05),transparent 62%);
	pointer-events:none;
}
.gw-page__entete > *{position:relative;}

.gw .gw-page__entete h1{color:#fff;margin-bottom:18px;}
.gw .gw-page__entete .gw-chapo{
	color:#ffffff;
	max-width:60ch;
}

/* =============================================================
   CORPS DE TEXTE DES PAGES
   Un rythme vertical unique : les titres respirent avant, pas après.
   ============================================================= */
/* -------------------------------------------------------------
   L'IMAGE DE TÊTE D'UNE PAGE
   -------------------------------------------------------------
   Même traitement que sur un article : l'image est posée sur le
   fond clair, sous l'en-tête encre, et non à cheval sur les deux.
   Près de la moitié des vignettes sont dessinées sur fond encre :
   à cheval, elles se fondaient dans l'en-tête et perdaient leur
   contour.

   Le corps perd une partie de son espace haut, sinon l'image flotte
   au milieu d'un grand vide. */
.gw-page__visuel{
	background:var(--gw-blanc);
	padding-top:clamp(24px,2.6vw,34px);
}
/* Le liseré n'est pas décoratif : une vignette sur fond sombre se
   confondait avec l'en-tête encre, et l'image n'avait plus de bord
   visible dans sa moitié haute. Ce gris moyen se détache aussi bien
   sur l'encre que sur le blanc du corps. */
.gw-page__figure{
	margin:0;
	border:1px solid rgba(194,118,44,.42);
	border-radius:var(--gw-rayon-large);
	overflow:hidden;
	box-shadow:0 14px 34px rgba(16,23,31,.09);
}
/* Le rapport d'origine des vignettes : ni recadrage, ni hauteur
   inutile. Voir la note de blog.css. */
.gw-page__figure img{
	display:block;
	width:100%;
	aspect-ratio:1200/630;
	object-fit:cover;
}
.gw-page__visuel + .gw-page__corps{padding-top:clamp(34px,4vw,52px);}

@media (max-width:640px){
	.gw-page__visuel{background:var(--gw-blanc);}
}

.gw-page__corps{padding-block:clamp(50px,6.2vw,80px);}

/* -------------------------------------------------------------
   DEUX APLATS DE MÊME COULEUR NE SE TOUCHENT JAMAIS
   -------------------------------------------------------------
   Sur une page d'expertise, trois blocs crème se suivaient : la
   section de fin, le rappel A.S.I. et l'appel à l'action. À l'œil
   cela ne faisait qu'un seul pavé de 1 900 px, et les frontières
   entre les trois disparaissaient.

   La règle bascule le second en blanc. La troisième règle rattrape
   le cas à trois blocs : si le rappel est déjà passé en blanc,
   l'appel peut reprendre le crème sans rien toucher.
   ------------------------------------------------------------- */
.gw-section--creme + .gw-asi-rappel--creme,
.gw-asi-rappel--creme + .gw-cta,
.gw-section--creme + .gw-cta{
	background:var(--gw-blanc);
}
.gw-section--creme + .gw-asi-rappel--creme + .gw-cta{
	background:var(--gw-creme);
}

.gw-prose > *:first-child{margin-top:0;}
/* J'avais ramené l'espace au-dessus des h2 de 80 à 58 px pour
   raccourcir les pages : le texte s'en est trouvé étouffé. Un titre
   de section a besoin d'air AVANT lui — c'est cet air qui signale au
   lecteur qu'un sujet se termine et qu'un autre commence. */
.gw .gw-prose h2{
	margin:clamp(42px,4.8vw,66px) 0 18px;
	padding-top:26px;
	border-top:1px solid var(--gw-ligne);
	font-size:var(--t-titre-bloc);
}
/* Le h3 était à 19 px pour un corps à 17,5 : deux points d'écart ne
   font pas un niveau de titre, ils font un paragraphe en gras. Il lui
   faut assez d'air pour qu'on le lise comme une sous-partie, sans
   pour autant rivaliser avec le h2. */
.gw .gw-prose h3{
	margin:clamp(34px,3.8vw,46px) 0 13px;
	font-size:var(--t-sous-titre);
	line-height:1.3;
	color:var(--gw-encre);
}
.gw-prose p{font-size:var(--t-corps);line-height:1.78;}
.gw-prose ul{
	list-style:none;
	margin:0 0 1.3em;
	padding:0;
}
.gw-prose ul li{
	position:relative;
	padding-left:26px;
	margin-bottom:.62em;
	font-size:var(--t-corps);
	line-height:1.7;
}
/* Une puce dessinée plutôt qu'un caractère : elle reste alignée
   même quand la ligne fait trois lignes de haut. */
.gw-prose ul li::before{
	content:"";
	position:absolute;
	left:2px;top:.72em;
	width:7px;height:2px;
	background:var(--gw-cuivre);
	border-radius:2px;
}

/* =============================================================
   CARTES DE DOMAINE — page pilier /expertise/
   ============================================================= */
.gw-domaines{margin-top:8px;}
.gw .gw-domaine{
	display:block;
	background:#fff;
	border:1px solid var(--gw-ligne);
	border-radius:var(--gw-rayon);
	padding:26px 26px 24px;
	text-decoration:none !important;
	color:inherit;
	transition:border-color var(--gw-transition),box-shadow var(--gw-transition);
}
.gw .gw-domaine:hover{
	border-color:var(--gw-cuivre);
	box-shadow:var(--gw-ombre);
}
.gw-domaine__marque{
	display:block;
	width:34px;height:3px;
	background:var(--gw-cuivre);
	border-radius:2px;
	margin-bottom:16px;
}
.gw .gw-domaine h3{
	margin-bottom:8px;
	font-size:var(--t-carte);
	color:var(--gw-encre);
}
.gw .gw-domaine p{
	color:var(--gw-texte-doux);
	font-size:var(--t-label);
	margin-bottom:16px;
}
.gw-domaine__lien{
	font-family:var(--gw-titre);
	font-weight:600;
	font-size:var(--t-label);
	color:var(--gw-cuivre-sombre);
}
.gw .gw-domaine:hover .gw-domaine__lien{color:var(--gw-cuivre);}

/* =============================================================
   RAPPEL A.S.I.
   Une passerelle, pas une réclame : le sigle, une phrase, un lien.
   Il doit se remarquer sans interrompre la lecture de la page
   sur laquelle il est posé.
   ============================================================= */
.gw-asi-rappel{
	padding-block:clamp(26px,3.2vw,38px);
	background:var(--gw-blanc);
	border-top:1px solid var(--gw-ligne);
	border-bottom:1px solid var(--gw-ligne);
}
.gw-asi-rappel--creme{background:var(--gw-creme);}

.gw-asi-rappel__inner{
	display:flex;
	align-items:center;
	gap:20px 26px;
	flex-wrap:wrap;
}

/* Le sigle est traité comme une marque : il doit s'imprimer. */
.gw-asi-rappel__sigle{
	flex:0 0 auto;
	font-family:var(--gw-titre);
	font-size:26px;
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1;
	/* Cuivre sombre : l'encart est sur fond crème, où le cuivre vif
	   ne donne que 3,3 de contraste. */
	color:var(--gw-cuivre-sombre);
	padding-right:24px;
	border-right:1px solid var(--gw-ligne);
}

.gw-asi-rappel__texte{flex:1;min-width:240px;}
.gw .gw-asi-rappel__intitule{
	margin:0 0 6px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--gw-cuivre-sombre);
}
/* Ce texte est lu, pas survolé : il prend l'encre pleine et le
   cran « corps », comme n'importe quel paragraphe du site. */
.gw .gw-asi-rappel__texte p:last-child{
	margin:0;
	font-size:var(--t-corps);
	line-height:1.6;
	color:var(--gw-texte);
	text-wrap:pretty;
}

/* C'est l'action du bloc : elle ne peut pas être plus petite que
   le texte qui l'annonce. */
.gw .gw-asi-rappel__lien{
	flex:0 0 auto;
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	color:var(--gw-cuivre-sombre);
	text-decoration:none !important;
	border-bottom:1px solid transparent !important;
	white-space:nowrap;
	transition:color var(--gw-transition),border-color var(--gw-transition);
}
.gw .gw-asi-rappel__lien:hover{
	color:var(--gw-cuivre);
	border-bottom-color:var(--gw-cuivre) !important;
}

@media (max-width:660px){
	.gw-asi-rappel__inner{gap:14px;}
	.gw-asi-rappel__sigle{
		padding-right:0;
		border-right:0;
		font-size:var(--t-sous-titre);
	}
	.gw-asi-rappel__texte{flex:0 0 100%;min-width:0;}
}

/* =============================================================
   MENU PRINCIPAL
   La navigation d'OceanWP est réglée pour des menus de dix entrées.
   Nous en avons cinq : elles ont la place d'être lisibles.
   ============================================================= */
/* -------------------------------------------------------------
   LA BARRE SUPÉRIEURE D'OCEANWP EST RETIRÉE
   -------------------------------------------------------------
   OceanWP pose au-dessus de l'en-tête une barre annexe, prévue pour
   un numéro de téléphone ou des liens de réseaux sociaux. Elle est
   vide ici — le thème lui met lui-même la classe « has-no-content »
   — mais il la rend quand même : 17 px de blanc au-dessus du
   bandeau, avec son propre rembourrage de 8 px.

   À l'écran cela faisait DEUX bandes blanches superposées. Le menu
   avait beau être centré dans la seconde, l'ensemble paraissait
   décalé, puisque la première ne contenait rien.
   ------------------------------------------------------------- */
.gw #top-bar-wrap{display:none;}

/* -------------------------------------------------------------
   LE MENU EST CENTRÉ VERTICALEMENT DANS LE BANDEAU
   -------------------------------------------------------------
   Il ne l'était pas : les entrées touchaient le haut du bandeau et
   laissaient 8,6 px de vide en dessous. Le bouton « Contact »,
   qui porte un fond cuivre, rendait le décalage visible.

   La cause : les <li> du menu héritent d'un margin-bottom de 7,6 px
   d'OceanWP, qui vient de son style des listes de contenu. Le vide
   se trouve donc SOUS les entrées, et rien ne le compense au-dessus.

   On retire cette marge, et on rend le rembourrage symétrique sur le
   conteneur pour garder la hauteur du bandeau inchangée : la barre
   ne bouge pas, seul son contenu se recentre.

   Le passage en flex fixe la même hauteur à toutes les entrées, quel
   que soit leur nombre de lignes. Les sous-menus ne bougent pas :
   ils restent positionnés par rapport à leur <li>.
   ------------------------------------------------------------- */
.gw #site-navigation .main-menu{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
}
.gw #site-navigation .main-menu > li{
	float:none;
	margin-bottom:0;
	vertical-align:middle;
}
.gw #site-header-inner{
	padding-block:3.8px;
}

/* Même remarque que pour le menu mobile : une entrée à sous-menu est
   un <button>, pas un <a>. On vise .menu-link, qui couvre les deux. */
.gw #site-navigation .main-menu > li > .menu-link,
.gw #site-navigation .main-menu > li > a,
.gw #site-navigation .main-menu > li > button,
.gw #site-navigation .dropdown-menu > li > a,
.gw #site-header .navigation li .menu-link{
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	letter-spacing:-.005em;
	color:var(--gw-encre);
	background:none;
	border:0;
}
.gw #site-navigation .main-menu > li > .menu-link:hover,
.gw #site-header .navigation li .menu-link:hover{color:var(--gw-cuivre-sombre);}

/* La page en cours se distingue : un simple changement de couleur,
   pas de soulignement qui alourdirait la barre. */
.gw #site-navigation .current-menu-item > a,
.gw #site-navigation .current_page_item > a,
.gw #site-navigation .current-menu-ancestor > a{
	color:var(--gw-cuivre-sombre);
}

/* Le sous-menu des sept expertises : un cran en dessous du premier
   niveau, mais nettement plus lisible que le réglage d'origine.

   OceanWP fixe une largeur de sous-menu calculée pour des libellés
   courts. « Conversion et e-commerce » y passait sur deux lignes.
   On élargit, et on interdit la coupure : un intitulé de menu qui
   se casse en deux ne se lit plus comme une entrée unique. */
/* ☠️ OceanWP coiffe le sous-menu d'un filet de 3 px dans SON bleu
   d'origine (#13aff0), une couleur qui n'existe nulle part dans la
   charte. Il ne se voit qu'une fois le menu ouvert, c'est pourquoi
   il avait échappé aux relectures. */
.gw #site-navigation .sub-menu{
	min-width:284px !important;
	width:auto !important;
	border-top:3px solid var(--gw-cuivre) !important;
	border-radius:0 0 var(--gw-rayon) var(--gw-rayon);
	box-shadow:0 10px 26px rgba(16,23,31,.14);
}
.gw #site-navigation .sub-menu li{width:auto !important;}
.gw #site-navigation .sub-menu li a{
	font-size:var(--t-label);
	font-weight:500;
	letter-spacing:0;
	white-space:nowrap;
	line-height:1.5;
}

/* Le bouton « Contact » — la seule action que l'on veut vraiment.
   Le sélecteur vise le dernier lien du PREMIER niveau : sans le
   « > », le dernier lien du sous-menu Expertise deviendrait lui
   aussi un bouton cuivre. */
.gw #site-navigation .gw-menu-bouton > a,
.gw #site-navigation .main-menu > li:last-child > a{
	/* 26/08 : encre et non cuivre. Le héros porte désormais un bouton
	   cuivre vif ; deux oranges à trente centimètres l'un de l'autre se
	   disputent le regard au lieu de le guider. L'encre pose l'action du
	   menu comme secondaire, et le cuivre revient au survol. */
	background:var(--gw-encre);
	color:#fff !important;
	border-radius:var(--gw-rayon);
	padding-inline:22px !important;
	margin-left:18px;
	/* OceanWP donne aux liens du menu une hauteur de ligne égale à
	   celle de l'en-tête : le fond du bouton s'étirait alors du haut
	   au bas de la barre, bord à bord. On lui rend une hauteur propre
	   et on le centre — c'est ce qui le fait ressembler à un bouton
	   plutôt qu'à une colonne colorée. */
	height:44px;
	line-height:44px !important;
	display:inline-flex;
	align-items:center;
}
.gw #site-navigation .gw-menu-bouton,
.gw #site-navigation .main-menu > li:last-child{
	display:flex;
	align-items:center;
}
.gw #site-navigation .gw-menu-bouton > a:hover,
.gw #site-navigation .main-menu > li:last-child > a:hover{
	background:var(--gw-cuivre-action);
	color:#fff !important;
}

/* La loupe est retirée dans cleanup.php ; cette règle couvre le cas
   où une version d'OceanWP l'imposerait malgré le réglage. */
.gw #site-header .search-toggle-li,
.gw #site-header .oceanwp-mobile-menu-icon .search-toggle{
	display:none !important;
}

/* -------------------------------------------------------------
   MENU MOBILE
   Le bouton d'OceanWP arrive en petit et dans son bleu d'origine :
   il ne fait partie d'aucune charte, et sur un écran tactile il
   demande une cible d'au moins 44 px de côté.
   ------------------------------------------------------------- */
/* OceanWP en fait un <button>, pas un lien : le sélecteur doit viser
   les deux. Il arrivait en 13 px et en gris #555, hors charte et
   difficile à voir. */
.gw button.mobile-menu,
.gw a.mobile-menu,
.gw .oceanwp-mobile-menu-icon a,
.gw .oceanwp-mobile-menu-icon button{
	display:inline-flex !important;
	align-items:center;
	gap:9px;
	min-height:48px;
	padding:6px 10px !important;
	background:none !important;
	border:0 !important;
	font-family:var(--gw-titre) !important;
	font-size:var(--t-second) !important;
	font-weight:600 !important;
	color:var(--gw-encre) !important;
	text-decoration:none !important;
	cursor:pointer;
}
.gw button.mobile-menu:hover,
.gw a.mobile-menu:hover{color:var(--gw-cuivre-sombre) !important;}

/* -------------------------------------------------------------
   LES DEUX ICÔNES, DESSINÉES EN CSS
   -------------------------------------------------------------
   Le site n'utilisait Font Awesome que pour DEUX symboles : les
   trois barres du menu mobile et le chevron des sous-menus.
   La police pesait 154 Ko, soit plus que Manrope et Inter réunies.

   On les dessine donc, et la police entière est retirée dans
   cleanup.php. Aucune requête, aucun fichier, un rendu net à
   toutes les tailles.
   ------------------------------------------------------------- */

/* Les trois barres : trois traits, dont deux en pseudo-éléments. */
.gw button.mobile-menu i,
.gw a.mobile-menu i,
.gw .oceanwp-mobile-menu-icon i,
.gw .fa-bars,
.gw .hamburger-menu{
	position:relative;
	display:inline-block;
	width:24px;
	height:2px;
	background:var(--gw-encre);
	border-radius:2px;
	font-size:0 !important;      /* neutralise le glyphe s'il subsiste */
	vertical-align:middle;
	transition:background var(--gw-transition);
}
.gw button.mobile-menu i::before,
.gw button.mobile-menu i::after,
.gw a.mobile-menu i::before,
.gw a.mobile-menu i::after,
.gw .fa-bars::before,
.gw .fa-bars::after{
	content:"" !important;
	position:absolute;
	left:0;
	width:24px;
	height:2px;
	background:inherit;
	border-radius:2px;
}
.gw button.mobile-menu i::before,
.gw a.mobile-menu i::before,
.gw .fa-bars::before{top:-8px;}
.gw button.mobile-menu i::after,
.gw a.mobile-menu i::after,
.gw .fa-bars::after{top:8px;}

.gw button.mobile-menu:hover i,
.gw a.mobile-menu:hover i{background:var(--gw-cuivre-sombre);}

/* Le chevron des sous-menus : un carré tourné à 45 degrés, dont
   on ne garde que deux côtés. */
.gw .fa-angle-down,
.gw .nav-arrow,
.gw #site-navigation .dropdown-toggle .fa{
	display:inline-block;
	width:7px;
	height:7px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg) translate(-2px,-2px);
	font-size:0 !important;
	vertical-align:middle;
	margin-left:7px;
}
.gw .fa-angle-down::before,
.gw .nav-arrow::before{content:"" !important;}

/* Le mot « Menu » à côté de l'icône. */
.gw .oceanwp-text{
	font-family:var(--gw-titre) !important;
	font-size:var(--t-second) !important;
	font-weight:600 !important;
	color:var(--gw-encre) !important;
}

/* Le panneau déroulant.
   OceanWP traite différemment les entrées qui portent un sous-menu :
   « Expertise » sortait plus petite et moins grasse que « A.S.I. ».
   Toutes les entrées de premier niveau sont ici identiques, et le
   sous-menu se distingue par le retrait, pas par la taille. */
/* ⚠ Une entrée qui porte un sous-menu n'est PAS un lien : OceanWP en
   fait un <button class="menu-link dropdown-toggle">. « Expertise »
   échappait donc à toute règle visant « a », et ressortait plus petite
   et plus fine que ses voisines.
   La classe .menu-link est commune aux deux : c'est elle qu'il faut
   viser, jamais la balise. */
.gw #mobile-dropdown ul li > .menu-link,
.gw #mobile-dropdown ul li > a,
.gw #mobile-dropdown ul li > button,
.gw .sidr-class-dropdown-menu li > .menu-link,
.gw #sidr .sidr-class-menu-item > .menu-link{
	font-family:var(--gw-titre) !important;
	font-size:var(--t-accroche) !important;
	font-weight:600 !important;
	line-height:1.4 !important;
	color:var(--gw-encre) !important;
	padding-block:15px !important;
	text-transform:none !important;
	letter-spacing:-.005em !important;
	background:none !important;
	border:0 !important;
	text-align:left !important;
	width:100% !important;
}
.gw #mobile-dropdown ul li > .menu-link:hover,
.gw #sidr .sidr-class-menu-item > .menu-link:hover{color:var(--gw-cuivre-sombre) !important;}

/* Les sept expertises : un cran plus discret, mais toujours lisible. */
.gw #mobile-dropdown ul .sub-menu li > .menu-link,
.gw #mobile-dropdown ul .sub-menu li > a,
.gw .sidr-class-dropdown-menu .sidr-class-sub-menu li > .menu-link{
	font-size:var(--t-second) !important;
	font-weight:500 !important;
	padding-left:22px !important;
	padding-block:12px !important;
	width:100% !important;
}

/* La flèche d'ouverture d'un sous-menu doit être attrapable au doigt. */
.gw #mobile-dropdown .dropdown-toggle,
.gw .sidr-class-dropdown-toggle{
	min-width:48px;
	min-height:48px;
	color:var(--gw-encre) !important;
}

/* Le champ de recherche du menu mobile : retiré dans cleanup.php,
   cette règle couvre les versions qui l'imposeraient malgré tout. */
.gw #mobile-menu-search,
.gw #mobile-dropdown .mobile-searchform,
.gw .sidr-class-mobile-searchform,
.gw #sidr .sidr-class-searchform,
.gw #mobile-dropdown form[role="search"]{
	display:none !important;
}

/* Le fil suit la colonne de texte, jamais le bord de l'ecran :
   sinon il flotte a gauche du titre auquel il se rapporte. */
.gw-ariane .gw-conteneur{max-width:var(--gw-etroit);}

/* Le filet des h2 separe deux sections. Au-dessus du PREMIER titre,
   il ne separe rien : il flotte. On le retire la, et seulement la. */
.gw-prose > h2:first-child{
	border-top:0;
	padding-top:0;
	margin-top:0;
}

/* =============================================================
   EN-TÊTE ET HÉROS — 26/08/2026, deuxième passe
   -------------------------------------------------------------
   PREMIÈRE TENTATIVE : garder l'aplat encre en lui donnant de la
   matière (trame, dégradé, bouton cuivre vif, carte claire posée
   dessus). Verdict, sans détour : « c'est du noir, de l'orange, tout
   ça, ça va pas », et la carte claire sur le noir était « assez
   choquante ».

   ☠️ LA LEÇON, qui vaut pour la suite : un aplat sombre pleine largeur
   OBLIGE à durcir tout ce qu'on y pose. Le bouton doit crier pour
   exister, la carte doit trancher pour se voir, le texte doit être
   blanc pur. Chaque correction rendait l'ensemble plus dur — le
   problème n'était pas le réglage, c'était le fond.

   ➜ LE HÉROS PASSE EN CRÈME. Le sombre redevient ce que le thème
   disait de lui dès l'origine, dans front-page.php : « le sombre est
   réservé aux limites de la page » — c'est-à-dire au seul pied de page.
   Plus rien n'a besoin de crier : les boutons reprennent la charte
   normale du site, celle des sections claires.
   ============================================================= */

/* -------------------------------------------------------------
   LA MARQUE
   ------------------------------------------------------------- */
/* Le titre texte d'OceanWP sort du champ visuel mais RESTE lisible
   par les moteurs et les lecteurs d'écran (il porte le schema.org de
   la marque, et sert de repli si inc/marque.php ne tourne plus). Un
   display:none l'aurait supprimé pour tout le monde. */
#site-logo .site-logo-text{
	position:absolute !important;
	width:1px;height:1px;
	margin:-1px;padding:0;border:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}
/* ☠️ OceanWP rend son bloc logo en `display:table`. La marque est
   greffée sur `ocean_before_logo_inner`, donc À L'INTÉRIEUR de
   #site-logo : ce passage en flex la centre sur la même ligne que le
   menu. Mesuré : centre à 41 px, comme le menu et le bouton.
   (Le hook `ocean_before_logo`, lui, dépose le HTML AVANT #site-logo —
   la marque flottait alors 16 px trop haut, et aucun réglage de
   #site-logo ne pouvait la rattraper.) */
#site-logo,
#site-logo-inner{
	display:flex !important;
	align-items:center;
}
.gw-marque{
	display:inline-flex;
	align-items:center;
	gap:12px;
	text-decoration:none !important;
	box-shadow:none !important;
}
.gw-marque__signe{display:flex;flex:0 0 auto;}
.gw-marque__signe svg{display:block;}
.gw-marque__texte{
	font-family:var(--gw-titre);
	line-height:1.05;
	letter-spacing:-.015em;
}
.gw-marque__l1,
.gw-marque__l2{display:block;font-size:22px;}
.gw-marque__l1{font-weight:800;color:var(--gw-encre);}
.gw-marque__l2{font-weight:500;color:var(--gw-cuivre-action);}
.gw-marque:hover .gw-marque__l1{color:var(--gw-encre);}

/* -------------------------------------------------------------
   LE HÉROS, EN CRÈME
   ------------------------------------------------------------- */
.gw .gw-hero{
	background:var(--gw-creme);
	color:var(--gw-texte);
}
/* Un seul halo cuivre très dilué en haut à droite : de quoi éviter
   l'aplat parfaitement plat, rien de plus. Pas de trame, pas de
   dégradé marqué — c'est ce qui alourdissait la version sombre. */
.gw .gw-hero::before{
	content:"";
	position:absolute;inset:0;
	background:radial-gradient(620px 420px at 88% -10%,rgba(194,118,44,.13),transparent 64%);
	pointer-events:none;
}
.gw .gw-hero::after{display:none;}
.gw-hero .gw-conteneur{position:relative;z-index:1;}

.gw-hero__grille{
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
	gap:clamp(32px,4vw,56px);
	align-items:center;
}
.gw .gw-hero h1{color:var(--gw-encre);}
.gw .gw-hero .gw-surtitre{color:var(--gw-cuivre-action);}
.gw .gw-hero__texte{color:var(--gw-texte);}

/* -------------------------------------------------------------
   LES BOUTONS reprennent la charte du site
   -------------------------------------------------------------
   Plus rien à inventer : sur fond clair, --gw-cuivre-action porte du
   blanc à 4,98 de contraste (c'est précisément pour cela qu'il a été
   calculé), et le bouton en contour est déjà défini plus haut. Les
   deux sont de la même famille, l'un plein, l'autre vide — la
   hiérarchie se lit au remplissage, pas à la couleur.
   ------------------------------------------------------------- */
/* Le héros n'a plus rien de particulier à faire : les boutons du site
   conviennent tels quels sur le crème. Une exception de moins. */

/* -------------------------------------------------------------
   LES DEUX GAGES — en encre. ⚠ RÈGLE DU PROJET : pas de gris.
   ------------------------------------------------------------- */
.gw .gw-hero__gages{
	list-style:none;
	display:flex;flex-wrap:wrap;
	gap:8px 24px;
	margin:26px 0 0;padding:0;
	font-size:var(--t-second);
	color:var(--gw-texte);
}
.gw-hero__gages li{display:inline-flex;align-items:center;gap:9px;}
.gw-hero__gages li::before{
	content:"";
	flex:0 0 auto;
	width:6px;height:6px;
	border-radius:50%;
	background:var(--gw-cuivre-action);
}

/* -------------------------------------------------------------
   LA CARTE — blanche sur crème, donc posée et non plaquée
   -------------------------------------------------------------
   Sur l'encre, la même carte faisait un trou de lumière. Sur le crème,
   l'écart entre les deux blancs suffit à la détacher : un filet et une
   ombre douce, pas un contraste.
   ------------------------------------------------------------- */
.gw-hero__carte{
	background:var(--gw-blanc);
	border:1px solid var(--gw-ligne);
	border-radius:var(--gw-rayon-large);
	padding:clamp(26px,2.8vw,32px);
	box-shadow:var(--gw-ombre);
}
.gw .gw-hero__carte-titre{
	margin:0 0 20px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--gw-cuivre-action);
}
.gw .gw-hero__carte-liste{
	list-style:none;
	margin:0;padding:0;
	display:flex;flex-direction:column;
	gap:15px;
}
.gw-hero__carte-liste li{
	display:flex;
	gap:13px;
	font-size:var(--t-second);
	line-height:1.5;
	color:var(--gw-texte);
}
.gw-hero__carte-liste li::before{
	content:"✓";
	flex:0 0 22px;
	height:22px;margin-top:1px;
	border-radius:50%;
	background:rgba(194,118,44,.12);
	border:1px solid rgba(194,118,44,.42);
	color:var(--gw-cuivre-action);
	font-size:12px;font-weight:700;
	display:inline-flex;align-items:center;justify-content:center;
}

/* -------------------------------------------------------------
   LA BARRE DE TECHNOLOGIES SUIT
   -------------------------------------------------------------
   Elle était en encre-clair : juste sous un héros devenu crème, elle
   aurait fait une bande sombre isolée entre deux zones claires — la
   coupure que le thème s'interdit ailleurs. Elle passe en blanc, tenue
   par deux filets.
   ------------------------------------------------------------- */
.gw .gw-technos{
	background:var(--gw-blanc);
	border-top:1px solid var(--gw-ligne);
	border-bottom:1px solid var(--gw-ligne);
}
.gw .gw-technos__intitule{color:var(--gw-cuivre-action);}
.gw .gw-technos__liste{color:var(--gw-texte);}
.gw .gw-technos__liste li{color:var(--gw-texte);}

/* -------------------------------------------------------------
   ADAPTATIONS
   ------------------------------------------------------------- */
@media (max-width:980px){
	/* Sous cette largeur, deux colonnes serrées valent moins qu'une
	   seule lisible. La carte passe SOUS le texte : l'argument
	   principal reste le premier lu. */
	.gw-hero__grille{grid-template-columns:1fr;gap:36px;}
	.gw-hero__inner{max-width:none;}
}
@media (max-width:520px){
	.gw-marque__l1,.gw-marque__l2{font-size:18px;}
	.gw-marque__signe svg{width:42px;height:42px;}
	#site-navigation .gw-menu-bouton{margin-left:0;}
}

/* -------------------------------------------------------------
   L'ANCIENNETÉ, DANS LE HÉROS ET PLUS BAS — 26/08/2026
   -------------------------------------------------------------
   Aucun composant neuf : un filet cuivre et l'échelle typographique
   existante. Le but est que ces deux ajouts passent pour avoir
   toujours été là.
   ------------------------------------------------------------- */
.gw .gw-hero__experience{
	margin:26px 0 0;
	padding-left:16px;
	border-left:2px solid var(--gw-cuivre);
	max-width:54ch;
	font-size:var(--t-second);
	line-height:1.6;
	color:var(--gw-texte);
}
.gw .gw-hero__experience strong{font-weight:700;color:var(--gw-encre);}

.gw-accueil-parcours .gw-surtitre{display:block;margin-bottom:12px;}
.gw .gw-accueil-parcours h2{margin-bottom:22px;}
.gw .gw-accueil-parcours p{margin-bottom:1.1em;}
.gw .gw-accueil-parcours__suite{margin:26px 0 0;font-size:var(--t-second);font-weight:600;}

@media (max-width:980px){
	.gw .gw-hero__experience{max-width:none;}
}