/* =============================================================
   GESTION WEB FRANCE — BLOG
   Chargé uniquement sur le blog, les archives et les articles.
   Les variables et la grille viennent de base.css.
   ============================================================= */

/* -------------------------------------------------------------
   EMPLACEMENT D'IMAGE RÉSERVÉ
   Tant qu'une image n'est pas déposée, la place est tenue — au
   bon format. Le jour où elle arrive, rien ne bouge dans la page.
   Dessiné en CSS : aucune requête, aucun fichier à gérer.
   ------------------------------------------------------------- */
.gw-visuel-vide{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	aspect-ratio:720/460;
	background:
		linear-gradient(135deg,rgba(194,118,44,.055),transparent 58%),
		var(--gw-creme);
	border-radius:var(--gw-rayon);
	overflow:hidden;
}
/* Fines diagonales : la surface se lit comme « à remplir »,
   sans le gris sale des blocs de réservation habituels. */
.gw-visuel-vide::before{
	content:"";
	position:absolute;inset:0;
	background-image:repeating-linear-gradient(
		135deg,
		rgba(16,23,31,.045) 0 1px,
		transparent 1px 11px
	);
}
.gw-visuel-vide__marque{
	position:relative;
	width:44px;height:3px;
	border-radius:2px;
	background:var(--gw-cuivre);
	opacity:.55;
}
/* Repère de travail : visible en local seulement.
   Posé au centre, sous la marque : il ne peut pas croiser
   l'étiquette de catégorie, qui occupe le coin bas gauche. */
.gw-visuel-vide__note{
	position:relative;
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:600;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--gw-gris);
	white-space:nowrap;
}
.gw-visuel-vide--large{aspect-ratio:16/9;border-radius:var(--gw-rayon-large);}

/* -------------------------------------------------------------
   DISPOSITION DU BLOG : colonne de navigation + articles
   À dix-neuf articles, une grille seule ne suffit plus. La colonne
   reste à gauche, à portée de regard, et passe au-dessus des
   articles dès que l'écran se resserre.
   ------------------------------------------------------------- */
.gw-blog__disposition{
	display:grid;
	grid-template-columns:270px minmax(0,1fr);
	gap:clamp(28px,3.6vw,52px);
	align-items:start;
}
.gw-blog__contenu{min-width:0;}

.gw-nav-blog{
	position:sticky;
	top:24px;
	display:flex;
	flex-direction:column;
	gap:30px;
}
.gw-nav-blog__bloc{
	padding-bottom:24px;
	border-bottom:1px solid var(--gw-ligne);
}
.gw-nav-blog__bloc:last-child{border-bottom:0;padding-bottom:0;}
.gw .gw-nav-blog__titre{
	margin:0 0 14px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--gw-cuivre-sombre);
}

/* --- Recherche : une seule ligne, discrète ---
   OceanWP applique sa propre couleur bleue aux boutons de formulaire
   avec une spécificité élevée : d'où les !important, qui sont ici
   nécessaires et non un raccourci. */
.gw-nav-blog__bloc--recherche{padding-bottom:20px;}
.gw-recherche{
	display:flex;
	align-items:stretch;
	border:1px solid var(--gw-ligne);
	border-radius:6px;
	overflow:hidden;
	background:var(--gw-blanc);
	transition:border-color var(--gw-transition),box-shadow var(--gw-transition);
}
.gw-recherche:focus-within{
	border-color:var(--gw-cuivre);
	box-shadow:0 0 0 3px rgba(194,118,44,.14);
}
.gw .gw-recherche__champ{
	flex:1;
	min-width:0;
	padding:10px 12px;
	border:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	font-family:var(--gw-corps);
	font-size:var(--t-second);
	color:var(--gw-texte);
}
.gw .gw-recherche__champ:focus{outline:none;box-shadow:none !important;}
.gw .gw-recherche__bouton{
	flex:0 0 auto;
	width:42px;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:var(--gw-encre) !important;
	color:#fff !important;
	font-size:var(--t-corps);
	line-height:1;
	cursor:pointer;
	transition:background var(--gw-transition);
}
.gw .gw-recherche__bouton:hover{background:var(--gw-cuivre-sombre) !important;}

/* La flèche du bouton, tracée au trait plutôt qu'écrite en
   caractère : « → » n'existe ni dans Manrope ni dans Inter, il
   arrivait donc d'une police de secours, dans un dessin étranger à
   la charte. Deux traits suffisent, et ils suivent la couleur du
   bouton. */
.gw-fleche{
	display:inline-block;
	position:relative;
	width:15px;
	height:2px;
	background:currentColor;
	border-radius:1px;
}
.gw-fleche::after{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	width:7px;
	height:7px;
	border-top:2px solid currentColor;
	border-right:2px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
	transform-origin:center;
	border-radius:1px;
}

/* --- Sujets, avec le nombre d'articles --- */
.gw .gw-nav-blog__sujets{list-style:none;margin:0;padding:0;}
.gw-nav-blog__sujets li{margin:0 0 3px;}
.gw .gw-sujet{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:9px 12px;
	border-radius:6px;
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	color:var(--gw-texte);
	text-decoration:none !important;
	transition:background var(--gw-transition),color var(--gw-transition);
}
.gw .gw-sujet:hover{background:var(--gw-creme);color:var(--gw-cuivre-sombre);}
.gw .gw-sujet--actif{background:var(--gw-encre);color:#fff;}
.gw-sujet__compte{
	flex:0 0 auto;
	min-width:24px;
	padding:2px 7px;
	border-radius:999px;
	background:var(--gw-creme);
	font-size:13px;
	font-weight:700;
	text-align:center;
	color:var(--gw-texte-doux);
}
.gw .gw-sujet--actif .gw-sujet__compte{
	background:rgba(255,255,255,.18);
	color:#fff;
}

/* --- Derniers publiés --- */
.gw .gw-nav-blog__recents{list-style:none;margin:0;padding:0;}
.gw-nav-blog__recents li{
	margin:0;
	padding:10px 0;
	border-bottom:1px solid var(--gw-ligne);
}
.gw-nav-blog__recents li:last-child{border-bottom:0;padding-bottom:0;}
.gw .gw-nav-blog__recents a{
	font-size:var(--t-second);
	line-height:1.4;
	color:var(--gw-texte);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:color var(--gw-transition),border-color var(--gw-transition);
}
.gw .gw-nav-blog__recents a:hover{
	color:var(--gw-cuivre-sombre);
	border-bottom-color:var(--gw-cuivre);
}

@media (max-width:1000px){
	.gw-blog__disposition{grid-template-columns:1fr;}
	.gw-nav-blog{
		position:static;
		flex-direction:row;
		flex-wrap:wrap;
		gap:24px 40px;
	}
	.gw-nav-blog__bloc{
		flex:1 1 280px;
		border-bottom:0;
		padding-bottom:0;
	}
	/* Les derniers articles n'apportent rien en tête de page sur
	   mobile : la liste complète est juste en dessous. */
	.gw-nav-blog__bloc:last-child{display:none;}
}

/* -------------------------------------------------------------
   CARTE D'ARTICLE
   ------------------------------------------------------------- */
.gw-liste-articles{margin-top:4px;}

.gw-carte-art{height:100%;}
.gw .gw-carte-art__lien{
	display:flex;
	flex-direction:column;
	height:100%;
	color:inherit;
	text-decoration:none !important;
	border:0 !important;
	box-shadow:none !important;
}

/* Même liseré cuivre que sur l'image de tête : dans la grille du
   blog, une vignette crème sur fond blanc n'a aucun contour naturel,
   et les cartes se confondent les unes avec les autres. */
.gw-carte-art__visuel{
	position:relative;
	border:1px solid rgba(194,118,44,.38);
	border-radius:var(--gw-rayon);
	overflow:hidden;
	background:var(--gw-creme);
	margin-bottom:18px;
	transition:border-color var(--gw-transition),box-shadow var(--gw-transition);
}
.gw .gw-carte-art__lien:hover .gw-carte-art__visuel{
	border-color:var(--gw-cuivre);
	box-shadow:0 10px 26px rgba(194,118,44,.16);
}
.gw-carte-art__visuel img{
	width:100%;
	aspect-ratio:720/460;
	object-fit:cover;
	transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.gw .gw-carte-art__lien:hover .gw-carte-art__visuel img{transform:scale(1.035);}

/* L'étiquette est posée SUR le visuel : elle qualifie l'image
   autant que le texte, et libère une ligne dans la colonne. */
.gw-carte-art__etiquette{
	position:absolute;
	left:12px;bottom:12px;
	padding:6px 12px;
	border-radius:4px;
	background:rgba(16,23,31,.88);
	backdrop-filter:blur(3px);
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:700;
	letter-spacing:.05em;
	color:#fff;
	line-height:1.5;
}
.gw-carte-art--etude .gw-carte-art__etiquette{background:var(--gw-cuivre-sombre);}

.gw-carte-art__texte{
	display:flex;
	flex-direction:column;
	flex:1;
}
/* Le titre de carte peut être un h2 ou un h3 selon le contexte :
   on le style par sa classe, pas par sa balise, pour que les deux
   se ressemblent exactement. */
.gw .gw-carte-art__titre,
.gw h2.gw-carte-art__titre,
.gw h3.gw-carte-art__titre{
	font-size:var(--t-carte);
	line-height:1.28;
	margin:0 0 10px;
	padding:0;
	border:0;
	color:var(--gw-encre);
	transition:color var(--gw-transition);
}
.gw .gw-carte-art__lien:hover .gw-carte-art__titre{color:var(--gw-cuivre-sombre);}

/* Chapô de carte : c'est du texte qu'on lit, pas une étiquette.
   Il lui faut le cran « secondaire », pas le cran « label ». */
/* Le chapô d'une carte fait trois à cinq lignes dans une colonne
   étroite : sans équilibrage, la dernière n'en occupait qu'un tiers
   et la carte paraissait coupée en plein milieu d'une phrase. */
.gw .gw-carte-art__chapo{
	color:var(--gw-texte-doux);
	font-size:var(--t-second);
	line-height:1.62;
	margin:0 0 16px;
	max-width:none;
	text-wrap:balance;
}

/* Le pied reste collé en bas : les cartes d'une même rangée
   alignent leur dernière ligne, quelle que soit la hauteur du titre. */
.gw-carte-art__pied{
	margin-top:auto;
	padding-top:12px;
	border-top:1px solid var(--gw-ligne);
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--gw-gris);
}

/* Version compacte — blocs « à lire ensuite ». */
.gw-carte-art--compacte .gw-carte-art__visuel{margin-bottom:14px;}
.gw-carte-art--compacte .gw-carte-art__titre{font-size:var(--t-corps);}

/* Le lien de secours, quand aucune expression du texte n'a permis
   de poser un lien contextuel. Discret : c'est un filet, pas un
   argument de vente. */
.gw .gw-lien-silo{
	margin-top:clamp(30px,3.4vw,40px);
	padding-top:20px;
	border-top:1px solid var(--gw-ligne);
	font-size:var(--t-second);
	color:var(--gw-texte-doux);
}
.gw .gw-lien-silo a{font-weight:600;}

/* -------------------------------------------------------------
   ARTICLES LIÉS À UNE EXPERTISE — la descente du cocon
   ------------------------------------------------------------- */
/* ⚠ La règle d'origine ne portait pas le préfixe .gw : une règle
   d'OceanWP sur les paragraphes, plus spécifique, ramenait la marge
   à zéro et le bouton venait coller les vignettes. */
.gw .gw-articles-lies__suite,
.gw p.gw-articles-lies__suite{
	margin:clamp(38px,4.2vw,54px) 0 0 !important;
	text-align:center;
}
.gw .gw-articles-lies__suite a{
	display:inline-block;
	padding:12px 26px;
	border:1.5px solid var(--gw-ligne);
	border-radius:6px;
	background:var(--gw-blanc);
	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);
}
.gw .gw-articles-lies__suite a:hover{
	border-color:var(--gw-cuivre);
	color:var(--gw-cuivre-sombre);
}

/* -------------------------------------------------------------
   ARTICLE — en-tête
   ------------------------------------------------------------- */
/* L'étiquette était blanche, cerclée de blanc, sur un fond noir :
   elle se fondait dans un en-tête déjà entièrement en noir et blanc.
   En cuivre, elle donne un point de couleur au premier regard et
   annonce le silo auquel l'article appartient. */
.gw .gw-article__categorie{
	display:inline-block;
	margin-bottom:16px;
	padding:6px 14px;
	border:1px solid rgba(194,118,44,.55);
	background:rgba(194,118,44,.14);
	border-radius:999px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none !important;
	transition:border-color var(--gw-transition),background var(--gw-transition);
}
.gw .gw-article__categorie:hover{
	border-color:var(--gw-cuivre);
	background:var(--gw-cuivre);
	color:#fff;
}
.gw .gw-article__meta{
	margin:22px 0 0;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:600;
	letter-spacing:.02em;
	/* était à 72 % : sur fond encre, cela virait au gris. */
	color:rgba(255,255,255,.92);
	display:flex;
	align-items:center;
	gap:9px;
	flex-wrap:wrap;
}

/* L'IMAGE NE CHEVAUCHE PLUS L'EN-TÊTE SOMBRE.
   -------------------------------------------------------------
   Elle le chevauchait, pour relier l'en-tête au corps. Mais 43 des
   91 vignettes du site sont dessinées sur fond encre : posées sur
   un en-tête encre, elles n'avaient plus de contour visible et le
   dessin semblait flotter dans le noir. Un liseré ne suffisait pas.

   L'image est donc entièrement descendue sur le fond clair : une
   vignette sombre y tranche nettement, et une vignette claire garde
   son liseré et son ombre portée. Les deux familles ressortent, sans
   avoir à renoncer à l'alternance qui distingue les articles entre
   eux. */
.gw-article__visuel{
	background:var(--gw-blanc);
	padding-top:clamp(24px,2.6vw,34px);
	padding-bottom:0;
}
/* Les vignettes sont toutes en crème, sur un corps de page blanc :
   sans bord, elles flottent. Un liseré cuivre discret les détache,
   et c'est la seule couleur de la charte — il ne jure avec rien. */
.gw-article__figure,
.gw-article__visuel .gw-visuel-vide{
	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);
}
/* Les vignettes sont dessinées en 1200 × 630, soit un rapport de
   1,9. En les affichant en 16/9 (1,78) on les recadrait ET on leur
   donnait 470 px de hauteur, pour un dessin très aéré. Au rapport
   d'origine, l'image ne perd plus rien sur les côtés et la page
   raccourcit d'une cinquantaine de pixels. */
.gw-article__figure img{
	width:100%;
	aspect-ratio:1200/630;
	object-fit:cover;
}
.gw .gw-article__figure figcaption{
	padding:11px 4px 0;
	font-size:var(--t-label);
	color:var(--gw-texte-doux);
	text-align:center;
}

/* -------------------------------------------------------------
   SOMMAIRE DES QUESTIONS
   Le cœur du parti pris éditorial : le lecteur voit d'emblée si
   sa question est traitée, et saute directement à la réponse.
   ------------------------------------------------------------- */
.gw-sommaire{
	margin:0 0 clamp(38px,4.5vw,54px);
	padding:26px 28px 24px;
	background:var(--gw-creme);
	border-left:3px solid var(--gw-cuivre);
	border-radius:0 var(--gw-rayon) var(--gw-rayon) 0;
}
.gw .gw-sommaire__titre{
	margin:0 0 16px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--gw-cuivre-sombre);
	border:0;
	padding:0;
}
.gw .gw-sommaire__liste{
	list-style:none;
	margin:0;
	padding:0;
	counter-reset:gw-q;
}
.gw .gw-sommaire__liste li{
	counter-increment:gw-q;
	position:relative;
	margin:0 0 9px;
	padding-left:32px;
	font-size:var(--t-second);
	line-height:1.55;
}
.gw .gw-sommaire__liste li:last-child{margin-bottom:0;}
.gw .gw-sommaire__liste li::before{
	content:counter(gw-q);
	position:absolute;
	left:0;top:2px;
	width:21px;height:21px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--gw-cuivre);
	color:#fff;
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:700;
	line-height:1;
}
.gw .gw-sommaire__liste a{
	color:var(--gw-encre);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:border-color var(--gw-transition),color var(--gw-transition);
}
.gw .gw-sommaire__liste a:hover{
	color:var(--gw-cuivre-sombre);
	border-bottom-color:var(--gw-cuivre);
}

/* -------------------------------------------------------------
   CORPS DE L'ARTICLE
   ------------------------------------------------------------- */
/* Les titres de niveau 2 SONT les questions : ils se voient. */
.gw .gw-article__corps h2{
	position:relative;
	scroll-margin-top:90px;   /* l'ancre ne colle pas au bord haut */
}

/* (Le lien d'ancre visible « # » a été retiré : les identifiants
   restent posés sur les titres pour le sommaire, mais rien ne
   s'affiche au survol.) */

/* Les images posées dans l'éditeur : même traitement que l'image
   de tête, sans rien avoir à régler au moment de la rédaction. */
.gw .gw-article__corps figure,
.gw .gw-article__corps .wp-block-image{
	margin:clamp(30px,3.6vw,44px) 0;
}
.gw .gw-article__corps figure img,
.gw .gw-article__corps .wp-block-image img{
	border-radius:var(--gw-rayon);
	box-shadow:var(--gw-ombre);
}
.gw .gw-article__corps figcaption{
	margin-top:10px;
	font-size:var(--t-label);
	line-height:1.55;
	color:var(--gw-texte-doux);
	text-align:center;
}

/* Citation : sert à porter la phrase du client, pas à décorer.
   -------------------------------------------------------------
   ☠️ Le bloc citation de WordPress arrive avec un margin-left de
   66 px que ma règle ne suffisait pas à annuler. Le filet cuivre se
   retrouvait donc décalé de 66 px à droite du texte du corps, alors
   que tous les autres filets du site s'alignent sur la colonne.

   Le retrait visuel de la citation est porté par son rembourrage,
   pas par une marge : le filet reste au bord, le texte respire. */
.gw .gw-article__corps blockquote,
.gw .gw-article__corps .wp-block-quote{
	margin-block:clamp(28px,3.4vw,40px);
	margin-inline:0 !important;
	padding:4px 0 4px 26px;
	border-left:3px solid var(--gw-cuivre);
	font-size:var(--t-accroche);
	line-height:1.65;
	color:var(--gw-encre);
	font-style:normal;
}
.gw .gw-article__corps blockquote p:last-child{margin-bottom:0;}

/* Tableaux : lisibles, et qui ne débordent jamais sur mobile. */
.gw .gw-article__corps table{
	width:100%;
	border-collapse:collapse;
	margin:clamp(26px,3vw,36px) 0;
	font-size:var(--t-label);
}
.gw .gw-article__corps th,
.gw .gw-article__corps td{
	padding:11px 14px;
	border-bottom:1px solid var(--gw-ligne);
	text-align:left;
	vertical-align:top;
}
.gw .gw-article__corps th{
	font-family:var(--gw-titre);
	font-size:13px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--gw-encre);
	border-bottom-width:2px;
}
.gw .gw-article__corps .wp-block-table{overflow-x:auto;}

/* Bloc de code : rare ici, mais il ne doit jamais casser la colonne. */
.gw .gw-article__corps pre{
	overflow-x:auto;
	padding:18px 20px;
	background:var(--gw-encre);
	border-radius:var(--gw-rayon);
	font-family:var(--gw-mono);
	font-size:var(--t-label);
	line-height:1.6;
	color:#e8ecf1;
}
.gw .gw-article__corps code{
	font-family:var(--gw-mono);
	font-size:.92em;
	padding:2px 6px;
	background:var(--gw-creme);
	border-radius:4px;
}
.gw .gw-article__corps pre code{background:none;padding:0;}

/* -------------------------------------------------------------
   LE CROISEMENT — savoir-faire + preuve
   ------------------------------------------------------------- */
.gw-croisement__paire{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:clamp(18px,2.4vw,26px);
}
/* Tant qu'aucune étude de cas n'est publiée, la passerelle est seule :
   elle prend alors toute la largeur au lieu de laisser un vide à droite.
   Le jour où une étude existe, les deux se placent côte à côte — sans
   rien changer au code. */
.gw-croisement__paire > .gw-passerelle:only-child{
	grid-column:1 / -1;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	gap:0 28px;
	padding:24px 28px;
}
.gw-croisement__paire > .gw-passerelle:only-child .gw-passerelle__intitule{
	flex:0 0 100%;
	margin-bottom:8px;
}
.gw-croisement__paire > .gw-passerelle:only-child .gw-passerelle__titre{
	flex:0 0 auto;
	margin-bottom:0;
}
.gw-croisement__paire > .gw-passerelle:only-child .gw-passerelle__texte{
	flex:1;
	min-width:260px;
	margin-bottom:0;
}
.gw-croisement__paire > .gw-passerelle:only-child .gw-passerelle__lien{
	margin-top:0;
	white-space:nowrap;
}
.gw .gw-passerelle{
	display:flex;
	flex-direction:column;
	padding:26px 26px 24px;
	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-passerelle:hover{
	border-color:var(--gw-cuivre);
	box-shadow:var(--gw-ombre);
	transform:translateY(-2px);
}
/* « Le savoir-faire » / « Un cas réel » annoncent ce que le lecteur
   va trouver derrière le lien : à 14,5 px ils passaient inaperçus
   au-dessus d'un titre de 25 px. Ils se lisent maintenant sans
   effort, sans pour autant concurrencer ce titre. */
.gw-passerelle__intitule{
	font-family:var(--gw-titre);
	font-size:16.5px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--gw-cuivre-sombre);
	margin-bottom:12px;
}
/* Ce titre est le nom d'une expertise ou d'une étude de cas : c'est
   l'élément que l'œil doit accrocher dans tout le bloc. */
.gw-passerelle__titre{
	font-family:var(--gw-titre);
	font-size:clamp(21px,2.2vw,25px);
	font-weight:700;
	line-height:1.22;
	letter-spacing:-.018em;
	color:var(--gw-encre);
	margin-bottom:10px;
}
.gw-passerelle__texte{
	font-size:var(--t-second);
	line-height:1.6;
	color:var(--gw-texte-doux);
	margin-bottom:18px;
}
.gw-passerelle__lien{
	margin-top:auto;
	font-family:var(--gw-titre);
	font-size:var(--t-second);
	font-weight:600;
	color:var(--gw-cuivre-sombre);
}
.gw .gw-passerelle:hover .gw-passerelle__lien{color:var(--gw-cuivre);}

/* La preuve se distingue du savoir-faire : fond encre, contraste fort. */
.gw .gw-passerelle--preuve{
	background:var(--gw-encre);
	border-color:var(--gw-encre);
}
.gw .gw-passerelle--preuve .gw-passerelle__intitule{color:var(--gw-cuivre-clair);}
.gw .gw-passerelle--preuve .gw-passerelle__titre{color:#fff;}
/* 80 % d'opacité, c'était encore sous le seuil : sur l'encre, ce
   blanc atténué se lisait comme du gris. */
.gw .gw-passerelle--preuve .gw-passerelle__texte{color:#ffffff;}
.gw .gw-passerelle--preuve .gw-passerelle__lien{color:var(--gw-cuivre-clair);}

.gw-croisement__suite{margin-top:clamp(40px,4.6vw,58px);}
.gw-croisement__suite .gw-surtitre{margin-bottom:22px;}

/* -------------------------------------------------------------
   RAPPEL D'EXPERTISE — en tête des archives de domaine
   ------------------------------------------------------------- */
.gw-rappel-expertise{
	background:var(--gw-creme);
	border-bottom:1px solid var(--gw-ligne);
	padding-block:18px;
}
.gw .gw-rappel-expertise__lien{
	display:flex;
	align-items:baseline;
	gap:12px;
	flex-wrap:wrap;
	text-decoration:none !important;
	color:inherit;
}
/* L'intitulé était à 11,5 px face à un titre de 17 : l'écart faisait
   passer le premier pour une note de bas de page. Les deux se lisent
   maintenant du même coup d'œil, la couleur suffisant à les
   hiérarchiser. */
.gw-rappel-expertise__intitule{
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:600;
	letter-spacing:.02em;
	color:var(--gw-texte-doux);
}
.gw-rappel-expertise__titre{
	font-family:var(--gw-titre);
	font-size:var(--t-accroche);
	font-weight:700;
	color:var(--gw-cuivre-sombre);
}
.gw .gw-rappel-expertise__lien:hover .gw-rappel-expertise__titre{color:var(--gw-cuivre);}

/* -------------------------------------------------------------
   PAGINATION ET PAGE VIDE
   ------------------------------------------------------------- */
/* WordPress REMPLACE la classe passée à the_posts_pagination() au
   lieu de l'ajouter : le sélecteur « .navigation.pagination » ne
   trouvait plus rien, et la pagination venait coller les vignettes.
   On vise donc les deux formes. */
.gw .navigation.pagination,
.gw .gw-pagination,
.gw nav.gw-pagination{
	margin-top:clamp(44px,5vw,64px) !important;
	padding-top:clamp(20px,2.4vw,28px);
	border-top:1px solid var(--gw-ligne);
}
.gw .nav-links{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}
.gw .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;height:40px;
	padding:0 13px;
	border:1px solid var(--gw-ligne);
	border-radius:6px;
	font-family:var(--gw-titre);
	font-size:var(--t-label);
	font-weight:600;
	color:var(--gw-texte-doux);
	text-decoration:none !important;
	transition:border-color var(--gw-transition),color var(--gw-transition);
}
.gw a.page-numbers:hover{border-color:var(--gw-cuivre);color:var(--gw-cuivre-sombre);}
.gw .page-numbers.current{
	background:var(--gw-encre);
	border-color:var(--gw-encre);
	color:#fff;
}

.gw-vide{
	margin-inline:auto;
	padding-block:clamp(30px,4vw,48px);
	text-align:center;
	font-size:var(--t-corps);
	color:var(--gw-texte-doux);
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width:900px){
	.gw-croisement__paire{grid-template-columns:1fr;}
}
@media (max-width:660px){
	.gw-sommaire{padding:22px 20px 20px;}
	.gw .gw-article__meta{font-size:13px;}
	/* Même règle qu'en grand écran : l'image reste sur le fond clair,
	   sinon une vignette sombre disparaît dans l'en-tête encre. */
	.gw-article__visuel{background:var(--gw-blanc);padding-bottom:0;}
	.gw-visuel-vide--large,
	.gw-article__figure{border-radius:var(--gw-rayon);}
	/* Le lien d'ancre est inutile au doigt : il ne se survole pas. */
	.gw .gw-ancre{display:none;}
}
