/*
Theme Name: Garage des Dunes
Theme URI: https://garage-des-dunes.fr
Description: Theme enfant GeneratePress pour Garage des Dunes, media automobile independant. Direction artistique Asphalte Signal.
Author: Garage des Dunes
Template: generatepress
Version: 1.0.0
Text Domain: garage-des-dunes
*/

/* ==========================================================================
   1. Jetons de design (Asphalte Signal)
   ========================================================================== */

:root {
	--gdd-bg: #F5F6F7;
	--gdd-surface: #FFFFFF;
	--gdd-ink: #202124;
	--gdd-title: #12233F;
	--gdd-muted: #58606B;
	--gdd-accent: #D92D20;
	--gdd-accent-ink: #B8241A;
	--gdd-accent-lite: #EF5F52;
	--gdd-deep: #12233F;
	--gdd-deep-raised: #182D4F;
	--gdd-line: #DDE1E6;
	--gdd-line-deep: #26385C;
	--gdd-on-deep: #FFFFFF;
	--gdd-on-deep-muted: #A8B4C6;
	--gdd-on-deep-link: #C9D3E0;

	/* Serif editoriale a optique adaptative : elle porte le registre media,
	   la qu'une grotesque restait neutre. Le corps garde une sans, c'est le
	   contraste des deux qui fait la difference. */
	--gdd-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
	--gdd-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gdd-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

	--gdd-max: 1240px;
	--gdd-gap: 24px;
	--gdd-xs: 6px;
	--gdd-sm: 12px;
	--gdd-md: 24px;
	--gdd-lg: 48px;
	--gdd-xl: 88px;

	--gdd-radius: 0px;
	--gdd-radius-field: 2px;
	--gdd-radius-btn: 10px;
	--gdd-radius-panel: 12px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body,
body.wp-singular,
.wp-site-blocks {
	background-color: var(--gdd-bg);
	color: var(--gdd-ink);
	font-family: var(--gdd-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.site-content,
.site.grid-container,
.site-content .content-area {
	background-color: transparent;
}

/* GeneratePress applique .one-container .site-content { padding: 40px } :
   il faut la meme specificite pour rendre les sections pleine largeur. */
.one-container .site-content,
.separate-containers .site-content,
.site-content {
	display: block;
	padding: 0;
}

.site-content .content-area,
.site-main,
.site-main > article,
.site-main > article > .inside-article {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
	background: transparent;
	border: 0;
	box-shadow: none;
}

::selection {
	background: var(--gdd-accent);
	color: #fff;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gdd-radius);
}

a {
	color: var(--gdd-accent-ink);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	color: var(--gdd-ink);
}

:focus-visible {
	outline: 2px solid var(--gdd-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.gdd-display {
	font-family: var(--gdd-font-head);
	font-weight: 800;
	font-stretch: 112%;
	color: var(--gdd-title);
	letter-spacing: -0.015em;
	margin: 0 0 var(--gdd-sm);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	line-height: 1.02;
}

h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.06;
}

h3 {
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	line-height: 1.12;
	font-weight: 700;
}

h4 {
	font-size: 1.15rem;
	line-height: 1.2;
	font-weight: 700;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

strong { font-weight: 600; }

/* Micro-label mono facon fiche technique */
.gdd-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-accent-ink);
	margin: 0 0 var(--gdd-md);
}

.gdd-label::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--gdd-accent);
	flex: none;
}

.gdd-label--plain::before { display: none; }

.gdd-on-deep .gdd-label,
.gdd-deep .gdd-label {
	color: var(--gdd-accent-lite);
}

.gdd-lede {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.55;
	color: var(--gdd-muted);
	max-width: 28em; /* environ 62 signes */
}

/* ==========================================================================
   4. Structure
   ========================================================================== */

.gdd-wrap {
	width: 100%;
	max-width: var(--gdd-max);
	margin: 0 auto;
	padding: 0 var(--gdd-gap);
}

.gdd-section {
	padding: var(--gdd-xl) 0;
}

.gdd-section--tight { padding: var(--gdd-lg) 0; }

.gdd-deep {
	background: var(--gdd-deep);
	color: var(--gdd-on-deep);
}

.gdd-deep h1,
.gdd-deep h2,
.gdd-deep h3,
.gdd-deep h4 {
	color: var(--gdd-on-deep);
}

.gdd-deep .gdd-lede {
	color: var(--gdd-on-deep-muted);
}

.gdd-deep a { color: var(--gdd-accent-lite); }
.gdd-deep a:hover { color: #fff; }

.gdd-surface { background: var(--gdd-surface); }

.gdd-rule {
	border: 0;
	border-top: 1px solid var(--gdd-line);
	margin: 0;
}

.gdd-deep .gdd-rule { border-top-color: var(--gdd-line-deep); }

/* Tete de section : filet + titre, famille reutilisable */
.gdd-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gdd-md);
	padding-bottom: var(--gdd-md);
	border-bottom: 2px solid var(--gdd-title);
	margin-bottom: var(--gdd-lg);
}

.gdd-deep .gdd-sechead { border-bottom-color: var(--gdd-on-deep); }

.gdd-sechead h2 { margin: 0; }

.gdd-sechead__link {
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 3px;
}

/* ==========================================================================
   5. Boutons
   ========================================================================== */

.gdd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--gdd-accent);
	color: #fff;
	font-family: var(--gdd-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 17px 26px;
	border: 1px solid var(--gdd-accent);
	border-radius: var(--gdd-radius-btn);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease, border-color .15s ease;
}

.gdd-btn:hover,
.gdd-btn:focus {
	background: var(--gdd-accent-ink);
	border-color: var(--gdd-accent-ink);
	color: #fff;
}

.gdd-btn:active { transform: translateY(1px); }

.gdd-btn--ghost {
	background: transparent;
	color: var(--gdd-title);
	border-color: var(--gdd-title);
}

.gdd-btn--ghost:hover,
.gdd-btn--ghost:focus {
	background: var(--gdd-title);
	border-color: var(--gdd-title);
	color: #fff;
}

/* .gdd-deep a repeint tous les liens de la section en accent clair, et sa
   specificite (0,1,1) l'emporte sur .gdd-btn (0,1,0) : le libelle du bouton
   plein virait au rouge clair sur rouge, soit 1,48:1. La variante fantome y
   echappait deja par la regle suivante. */
.gdd-deep .gdd-btn {
	color: #fff;
}

.gdd-deep .gdd-btn--ghost {
	color: #fff;
	border-color: rgba(255,255,255,.5);
}

.gdd-deep .gdd-btn--ghost:hover,
.gdd-deep .gdd-btn--ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--gdd-ink);
}

/* ==========================================================================
   6. En-tete et navigation
   ========================================================================== */

/* Entre le seuil du menu deroulant et le confort du grand ecran, la barre
   complete demandait 767 px a elle seule et sortait de la bulle. Plutot que
   de basculer en bouton burger des 1050 px, ce qui priverait les tablettes
   d'une navigation directe, la bulle se resserre : entrees plus compactes,
   logo reduit, gouttieres rognees. */
@media (max-width: 1240px) and (min-width: 841px) {
	.site-header .inside-header {
		gap: 10px;
		padding: 0 14px;
		min-height: 74px;
	}

	.site-header .header-image { height: 46px; }

	.main-navigation .main-nav ul li a {
		font-size: 13px;
		padding: 10px 6px;
	}

	.main-navigation .main-nav ul li.nav-cta { margin-left: 2px; }
	.main-navigation .main-nav ul li.nav-cta > a { padding: 10px 12px; }
}

/* Sous le seuil de bascule, la bulle ne contient plus que le logo et le
   bouton menu. Reduite a son contenu, elle flotterait perdue au milieu de
   l'ecran : on lui rend la largeur disponible. */


/* L'ilot etant colle, une ancre atterrirait sous lui sans cette reserve.
   Hauteur totale de l'en-tete plus une respiration. */
html {
	scroll-padding-top: 150px;
}

@media (max-width: 900px) {
	html { scroll-padding-top: 104px; }
}

/* Menu flottant et collant. L'ilot reste a portee pendant toute la lecture
   tout en restant detache des bords : le fond, la bordure et l'ombre sont
   portes par .inside-header, .site-header ne servant qu'a menager la marge.
   Le contenu defile autour de l'ilot, d'ou une ombre en deux couches qui
   le detache aussi bien du bleu nuit du hero que des sections claires. */
/* L'en-tete etant hors flux, le contenu passerait dessous. On reserve sa
   hauteur ici par palier, et un script la corrige au pixel apres rendu. */
body {
	padding-top: var(--gdd-entete-h, 126px);
}

:root { --gdd-entete-h: 126px; }

@media (max-width: 1240px) and (min-width: 841px) {
	:root { --gdd-entete-h: 108px; }
}

@media (max-width: 768px) {
	:root { --gdd-entete-h: 96px; }
}

.site-header {
	/* fixed et non sticky : sticky depend du contexte de ses parents et
	   echoue en silence des qu'un ancetre porte un overflow, une hauteur
	   contrainte ou un contexte de flux particulier. fixed ne depend de rien.
	   Contrepartie : l'en-tete sort du flux, d'ou la compensation de hauteur
	   appliquee au body juste en dessous. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	/* Bande dans la meme teinte que le hero et les surfaces sombres : elle se
	   fond avec ce qui suit au lieu de trancher en clair. */
	background: var(--gdd-deep);
	border-bottom: 0;
	padding: clamp(12px, 1.5vw, 20px) var(--gdd-gap);
}

/* La barre d'administration n'est fixe qu'au-dessus de 782 px ; en dessous
   elle defile, et compenser sa hauteur creerait un trou. */
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 0; }
}

.site-header .inside-header {
	max-width: var(--gdd-max);
	margin: 0 auto;
	padding: 0 clamp(22px, 2.6vw, 36px);
	/* Un cran au-dessus de la bande. Sur fond sombre l'ecart de teinte ne
	   suffit pas : mesure a 1,14:1, la bulle s'y dissolvait. C'est le contour
	   clair qui porte le relief, pas le remplissage. */
	background: var(--gdd-deep-raised);
	border: 1px solid rgba(255, 255, 255, .16);
	/* Bulle pleine. Le lisere rouge des cartes ne survit pas a ce rayon :
	   il dessinerait un arc sur toute la moitie haute, ce qui se lit comme un
	   defaut. L'accent de marque reste porte par le bouton Contact, lui-meme
	   en bulle a l'interieur. */
	border-radius: 999px;
	/* Deux couches : la large pose l'ilot au-dessus du contenu, la courte
	   dessine son arete quand il passe sur une section de teinte proche. */
	/* Sur fond sombre, une ombre portee ne se voit plus. C'est un lisere
	   clair en haut qui donne le relief, double d'une ombre courte en bas. */
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, .07),
		0 10px 26px -14px rgba(4, 8, 16, .75);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 56px);
	min-height: 88px;
	width: fit-content;
}

.site-branding { padding: 0; }

.site-header .site-title {
	font-family: var(--gdd-font-head);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.site-header .site-title a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.site-header .site-title a::before {
	content: "";
	width: 4px;
	height: 21px;
	background: var(--gdd-accent);
	flex: none;
}

.site-header .site-description {
	font-family: var(--gdd-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gdd-on-deep-muted);
	margin: 5px 0 0 13px;
}

/* Navigation principale, une seule ligne au desktop */
.main-navigation,
.main-navigation.toggled .main-nav > ul {
	background: transparent;
}

.main-navigation .inside-navigation { padding: 0; }

.main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation .main-nav ul li a {
	font-family: var(--gdd-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--gdd-on-deep-link);
	line-height: 1;
	padding: 11px 15px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	position: relative;
	transition: color .15s ease, background-color .15s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
	color: #fff;
	background: rgba(255, 255, 255, .10);
}

/* La rubrique courante garde sa bulle en permanence : elle remplace le
   filet qui la soulignait, devenu incoherent au milieu de formes rondes. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
	color: #fff;
	background: rgba(255, 255, 255, .15);
}

/* Bouton contact dans la navigation */
.main-navigation .main-nav ul li.nav-cta {
	margin-left: 10px;
}

.main-navigation .main-nav ul li.nav-cta > a {
	background: var(--gdd-accent);
	color: #fff;
	line-height: 1;
	padding: 13px 21px;
	border-radius: 999px;
	font-weight: 600;
	transition: background-color .15s ease;
}

.main-navigation .main-nav ul li.nav-cta > a:hover,
.main-navigation .main-nav ul li.nav-cta > a:focus {
	background: var(--gdd-accent-ink);
	color: #fff;
}

.main-navigation .main-nav ul li.nav-cta > a::after { display: none; }

/* Bouton menu mobile */
.main-navigation .menu-toggle {
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	background: transparent;
	padding: 12px 10px;
	line-height: 1;
	border-radius: 999px;
}

.main-navigation .menu-toggle:hover { color: var(--gdd-accent-lite); }

/* ==========================================================================
   7. Pied de page
   ========================================================================== */

.site-footer,
.gdd-footer {
	background: var(--gdd-deep);
	color: var(--gdd-on-deep-muted);
}

.gdd-footer a {
	color: var(--gdd-on-deep-link);
	text-decoration: none;
}

.gdd-footer a:hover,
.gdd-footer a:focus {
	color: var(--gdd-accent-lite);
	text-decoration: underline;
}

.gdd-footer__top {
	display: grid;
	grid-template-columns: 2.1fr 1fr 1fr 1fr;
	gap: var(--gdd-lg);
	padding: var(--gdd-xl) 0 var(--gdd-lg);
}

.gdd-footer__brand .site-title,
.gdd-footer__brand strong {
	display: block;
	font-family: var(--gdd-font-head);
	font-size: 20px;
	font-weight: 800;
	font-stretch: 112%;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: var(--gdd-sm);
}

.gdd-footer__brand p {
	font-size: 15px;
	line-height: 1.6;
	max-width: 20em; /* environ 44 signes */
}

.gdd-footer__col h3 {
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--gdd-accent-lite);
	margin-bottom: var(--gdd-md);
}

.gdd-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdd-footer__col li { margin-bottom: 9px; }

.gdd-footer__col a { font-size: 15px; }

.gdd-footer__bottom {
	border-top: 1px solid var(--gdd-line-deep);
	padding: var(--gdd-md) 0 var(--gdd-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gdd-sm) var(--gdd-md);
	align-items: center;
	justify-content: space-between;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
/* ==========================================================================
   8. Accueil : la une
   ========================================================================== */

.gdd-hero {
	background: var(--gdd-surface);
	color: var(--gdd-ink);
	border-bottom: 1px solid var(--gdd-line);
	padding: clamp(52px, 7vw, 92px) 0 clamp(56px, 7vw, 96px);
	overflow: hidden;
}

.gdd-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.gdd-hero h1 {
	color: var(--gdd-title);
	margin-bottom: var(--gdd-md);
}

.gdd-hero h1 em {
	font-style: italic;
	font-weight: 800;
	color: var(--gdd-accent);
	line-height: 1.12;
	padding-bottom: 0.04em;
	display: inline-block;
}

.gdd-hero .gdd-lede {
	color: var(--gdd-muted);
	max-width: 23em; /* environ 52 signes */
}

.gdd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gdd-sm);
	margin-top: var(--gdd-lg);
}

/* Planche technique : deborde legerement de sa colonne */
.gdd-hero__plate {
	position: relative;
	margin-right: calc(var(--gdd-gap) * -1);
}

.gdd-hero__plate img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(217, 45, 32, .45);
	background: var(--gdd-surface);
	/* Neon retenu : un filet d'accent, un halo proche et une diffusion bleu
	   nuit plus large. Trois couches faibles valent mieux qu'une lueur forte. */
	box-shadow:
		0 0 0 4px rgba(217, 45, 32, .07),
		0 0 22px -4px rgba(217, 45, 32, .34),
		0 0 64px -12px rgba(18, 35, 63, .30);
}

.gdd-hero__plate figcaption {
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin-top: 10px;
}

/* Bandeau de reperes sous la une */
.gdd-strip {
	background: var(--gdd-bg);
	border-bottom: 1px solid var(--gdd-line);
}

.gdd-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.gdd-strip__item {
	padding: 26px var(--gdd-md) 26px 0;
	border-left: 1px solid var(--gdd-line);
	padding-left: var(--gdd-md);
}

.gdd-strip__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.gdd-strip__item h3 {
	font-size: 15px;
	font-weight: 700;
	font-stretch: 100%;
	letter-spacing: 0;
	color: var(--gdd-title);
	margin-bottom: 5px;
}

.gdd-strip__item p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gdd-muted);
}

/* ==========================================================================
   9. Accueil : bloc auteur
   ========================================================================== */

.gdd-persona {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	box-shadow: inset 0 3px 0 0 var(--gdd-accent);
	padding: clamp(28px, 3.4vw, 46px);
}

.gdd-persona__portrait {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	border: 1px solid var(--gdd-line);
	background: var(--gdd-bg);
}

.gdd-persona__name {
	font-family: var(--gdd-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--gdd-title);
	margin: var(--gdd-md) 0 7px;
}

.gdd-persona__role {
	display: block;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-accent-ink);
}

.gdd-persona__style {
	margin-top: var(--gdd-md);
	padding-top: var(--gdd-md);
	border-top: 1px solid var(--gdd-line);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gdd-muted);
}

.gdd-persona__bio p {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--gdd-muted);
	max-width: 30em; /* environ 66 signes */
}

.gdd-persona__bio strong {
	color: var(--gdd-ink);
	font-weight: 600;
}

/* La citation porte la voix de l'auteur : italique de la meme famille, avec
   une reserve basse pour que les jambages ne soient pas coupes. */
.gdd-persona__quote {
	margin: var(--gdd-lg) 0 0;
	padding: 2px 0 5px 22px;
	border-left: 3px solid var(--gdd-accent);
	font-family: var(--gdd-font-head);
	font-style: italic;
	font-weight: 700;
	font-stretch: 112%;
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.28;
	color: var(--gdd-title);
}

.gdd-persona__topics-label {
	display: block;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin: var(--gdd-lg) 0 var(--gdd-sm);
	padding-top: var(--gdd-md);
	border-top: 1px solid var(--gdd-line);
}

.gdd-persona__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.gdd-persona__topics li {
	list-style: none;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gdd-title);
	border: 1px solid var(--gdd-line);
	padding: 7px 11px;
}
/* ==========================================================================
   10. Etat d'attente d'une rubrique
   ========================================================================== */

/* Etat d'attente d'une rubrique : il cede la place a la liste des le
   premier article publie, sans intervention. */
.gdd-empty {
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-top: 3px solid var(--gdd-accent);
	padding: clamp(28px, 4vw, 48px);
}

.gdd-empty__label {
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-accent-ink);
	margin: 0 0 var(--gdd-sm);
}

.gdd-empty__text {
	font-size: 17px;
	line-height: 1.6;
	color: var(--gdd-muted);
	max-width: 28em;
	margin: 0 0 var(--gdd-md);
}

/* ==========================================================================
   11. Ligne editoriale
   ========================================================================== */

.gdd-charter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.gdd-charter__list { margin: 0; padding: 0; list-style: none; }

.gdd-charter__list > li {
	border-top: 1px solid var(--gdd-line);
	padding: var(--gdd-md) 0;
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--gdd-md);
}

.gdd-charter__list > li:last-child { padding-bottom: 0; }

.gdd-charter__list dt,
.gdd-charter__term {
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-accent-ink);
	padding-top: 3px;
}

.gdd-charter__list p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gdd-muted);
}

.gdd-charter__list strong { color: var(--gdd-ink); font-weight: 600; }

/* ==========================================================================
   12. Formulaires
   ========================================================================== */

.gdd-field {
	display: block;
	margin-bottom: var(--gdd-md);
}

.gdd-field > span,
.gdd-field__label {
	display: block;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin-bottom: 8px;
}

.gdd-input,
.gdd-form input[type="text"],
.gdd-form input[type="email"],
.gdd-form textarea {
	width: 100%;
	font-family: var(--gdd-font-body);
	font-size: 16px;
	color: var(--gdd-ink);
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-radius: var(--gdd-radius-field);
	padding: 14px 15px;
	transition: border-color .15s ease;
}

.gdd-input:focus,
.gdd-form input:focus,
.gdd-form textarea:focus {
	border-color: var(--gdd-ink);
	outline: 2px solid var(--gdd-accent);
	outline-offset: 1px;
}

.gdd-input::placeholder { color: #8A9298; }

.gdd-form textarea { min-height: 190px; resize: vertical; }

.gdd-consent {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--gdd-muted);
	margin-bottom: var(--gdd-md);
}

.gdd-consent input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--gdd-accent); }

.gdd-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gdd-notice {
	border-left: 3px solid var(--gdd-accent);
	background: var(--gdd-surface);
	padding: 15px 18px;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: var(--gdd-md);
}

.gdd-notice--ok { border-left-color: #1F7A4D; }

.gdd-deep .gdd-notice {
	background: var(--gdd-deep-raised);
	color: #fff;
}

/* Bloc newsletter : sol clair, signale par un filet d'accent plein. */
.gdd-news {
	background: var(--gdd-surface);
	border-top: 3px solid var(--gdd-accent);
}

.gdd-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.gdd-news h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.gdd-news__form { display: flex; gap: 10px; flex-wrap: wrap; }

.gdd-news__form .gdd-input {
	flex: 1 1 260px;
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-radius: var(--gdd-radius-field);
	color: var(--gdd-ink);
}

.gdd-news__form .gdd-input:focus { border-color: var(--gdd-title); }
.gdd-news .gdd-consent { color: var(--gdd-muted); margin: var(--gdd-sm) 0 0; }
.gdd-news .gdd-consent a { color: var(--gdd-accent-ink); }
/* ==========================================================================
   13. Conteneur GeneratePress : on libere la pleine largeur
   ========================================================================== */

.site.grid-container {
	max-width: 100%;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.site-content .content-area { width: 100%; max-width: 100%; }
.site-main { padding: 0; }
.site-main .wp-block-group__inner-container { padding: 0; }

/* ==========================================================================
   14. Masthead de page (archives, articles, pages)
   ========================================================================== */

.gdd-masthead {
	background: var(--gdd-bg);
	color: var(--gdd-ink);
	border-bottom: 1px solid var(--gdd-line);
	padding: clamp(38px, 5vw, 64px) 0 clamp(32px, 4vw, 52px);
}

.gdd-masthead h1 {
	color: var(--gdd-title);
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
	max-width: 12em;
}

.gdd-masthead .gdd-lede {
	color: var(--gdd-muted);
	margin-top: var(--gdd-md);
}

.gdd-masthead--article h1 { max-width: 14em; }

.gdd-crumbs {
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin-bottom: var(--gdd-md);
}

.gdd-crumbs a { color: var(--gdd-muted); text-decoration: none; }
.gdd-crumbs a:hover { color: var(--gdd-accent-ink); text-decoration: underline; }
.gdd-crumbs span[aria-hidden] { padding: 0 8px; color: #AEB6C0; }

.gdd-artmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: var(--gdd-md);
	padding-top: var(--gdd-md);
	border-top: 1px solid var(--gdd-line);
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdd-muted);
}

.gdd-artmeta a { color: var(--gdd-accent-ink); text-decoration: none; }

/* ==========================================================================
   15. Corps d'article
   ========================================================================== */

.gdd-entry {
	max-width: 31em; /* environ 68 signes, la mesure de lecture visee */
	margin-left: auto;
	margin-right: auto;
	font-size: 18px;
	line-height: 1.68;
	color: var(--gdd-ink);
}

.gdd-entry > *:first-child { margin-top: 0; }

.gdd-entry h2 {
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	margin: 2.1em 0 .55em;
}

.gdd-entry h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	margin: 1.7em 0 .5em;
}

.gdd-entry ul,
.gdd-entry ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.gdd-entry li { margin-bottom: .5em; }

.gdd-entry a { color: var(--gdd-accent-ink); text-decoration: underline; }
.gdd-entry a:hover { color: var(--gdd-ink); }

.gdd-entry blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--gdd-accent);
	font-size: 1.1em;
	line-height: 1.5;
	color: var(--gdd-ink);
}

.gdd-entry figure { margin: 1.9em 0; }

.gdd-entry figcaption {
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin-top: 9px;
}

/* Tableaux : un objet a part entiere dans la colonne de texte, cadre et filet
   d'accent comme le sommaire et l'encadre d'auteur. Le defilement horizontal
   est prefere a l'ecrasement : une cellule de comparaison compressee devient
   illisible. */
.gdd-entry .wp-block-table {
	margin: 2.2em 0;
	overflow-x: auto;
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-top: 3px solid var(--gdd-accent);
}

.gdd-entry table {
	width: 100%;
	min-width: 30em;
	border-collapse: collapse;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.gdd-entry thead th {
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	text-align: left;
	vertical-align: bottom;
	background: var(--gdd-bg);
	padding: 14px 18px;
	border-bottom: 2px solid var(--gdd-title);
}

.gdd-entry tbody td {
	padding: 15px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--gdd-line);
}

/* Bande alternee : ce tableau se lit ligne par ligne et non colonne par
   colonne. Le fond alterne guide l'oeil d'un bout a l'autre de la ligne. */
.gdd-entry tbody tr:nth-child(even) { background: var(--gdd-bg); }

/* La premiere colonne sert d'entree de lecture : elle porte le libelle. */
.gdd-entry tbody td:first-child {
	font-family: var(--gdd-font-head);
	font-weight: 700;
	font-stretch: 112%;
	font-size: 15.5px;
	color: var(--gdd-title);
	white-space: nowrap;
}

.gdd-entry tbody tr:last-child td { border-bottom: 0; }
.gdd-entry table caption {
	caption-side: bottom;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	text-align: left;
	padding-top: var(--gdd-sm);
}

/* ==========================================================================
   16. Pagination
   ========================================================================== */

.gdd-pagination {
	margin-top: var(--gdd-xl);
	padding-top: var(--gdd-md);
	border-top: 1px solid var(--gdd-line);
	display: flex;
	flex-wrap: wrap;
	/* La pagination ferme la liste par la droite, dans le sens de lecture. */
	justify-content: flex-end;
	gap: 8px;
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
}

.gdd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--gdd-line);
	color: var(--gdd-ink);
	text-decoration: none;
}

.gdd-pagination .page-numbers:hover { border-color: var(--gdd-ink); }

.gdd-pagination .page-numbers.current {
	background: var(--gdd-title);
	border-color: var(--gdd-title);
	color: #fff;
}

/* ==========================================================================
   17. Utilitaires
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.gdd-editor-note {
	border: 1px dashed var(--gdd-accent);
	background: rgba(217, 45, 32, .05);
	padding: 18px 20px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gdd-ink);
}

/* ==========================================================================
   18. Repli responsive (declare pour chaque grille)
   ========================================================================== */

@media (max-width: 1080px) {
	.gdd-hero__grid { grid-template-columns: 1fr; gap: var(--gdd-lg); }
	.gdd-hero__plate { margin-right: 0; max-width: 520px; }
	.gdd-footer__top { grid-template-columns: 1fr 1fr 1fr; }
	.gdd-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.gdd-persona { grid-template-columns: 1fr; gap: var(--gdd-lg); }
	.gdd-persona__id {
		display: grid;
		grid-template-columns: 148px minmax(0, 1fr);
		gap: var(--gdd-md);
		align-items: center;
	}
	.gdd-persona__name { margin-top: 0; }
	.gdd-persona__style { border-top: 0; padding-top: 0; margin-top: 10px; }
	.gdd-charter { grid-template-columns: 1fr; }
	.gdd-news__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	:root { --gdd-xl: 60px; --gdd-lg: 36px; }
	.one-container .site-content,
	.separate-containers .site-content { padding: 0; }
	.site-main .wp-block-group__inner-container { padding: 0; }
	.gdd-strip__grid { grid-template-columns: 1fr; }
	.gdd-strip__item { border-left: 0; border-top: 1px solid var(--gdd-line); padding-left: 0; }
	.gdd-strip__item:first-child { border-top: 0; }
	.gdd-sechead { flex-direction: column; align-items: flex-start; gap: var(--gdd-sm); }
}

@media (max-width: 620px) {
	.gdd-persona__id { grid-template-columns: 104px minmax(0, 1fr); gap: var(--gdd-sm); }
	.gdd-persona__name { font-size: 1.25rem; }
	.gdd-persona__topics li { padding: 6px 9px; }
	.gdd-charter__list > li { grid-template-columns: 1fr; gap: 6px; }
	.gdd-footer__top { grid-template-columns: 1fr 1fr; }
	.gdd-news__form { flex-direction: column; }
	.gdd-news__form .gdd-btn { width: 100%; }
	.gdd-entry { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}
/* ==========================================================================
   19. Corrections mobiles constatees sur appareil
   ========================================================================== */



@media (max-width: 620px) {
	/* En colonne, l'axe principal devient vertical : un flex-basis de 260px
	   s'appliquait a la hauteur du champ et non a sa largeur. */
	.gdd-news__form .gdd-input {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Le titre de une doit tenir sur deux lignes, y compris avec le mot
	   accentue en inline-block qui ne peut pas se couper. */
	.gdd-hero h1 { font-size: 2.2rem; }
	.gdd-masthead h1 { font-size: 1.95rem; }
}
/* ==========================================================================
   20. Logo d'en-tete et figure centree
   ========================================================================== */

.site-header .site-logo,
.site-header .site-branding-container {
	display: flex;
	align-items: center;
	padding: 0;
}

.site-header .site-logo a { display: block; line-height: 0; }

.site-header .header-image {
	display: block;
	height: 72px;
	width: auto;
	max-width: none;
	border-radius: 0;
	/* Le logo est dessine sur fond noir avec une lueur. La fusion screen fait
	   disparaitre ce noir dans le bleu nuit de l'en-tete et ne conserve que le
	   trace lumineux, sans avoir a retoucher le fichier source.
	   Son bleu d'origine est presque celui de l'en-tete : sans eclaircissement
	   le trace se confond avec le fond et le nom devient illisible. */
	filter: brightness(3);
	mix-blend-mode: screen;
}

/* Figure autonome, centree dans la colonne de contenu. */
.gdd-figure-center {
	margin: 0 auto;
	max-width: 920px;
}

.gdd-figure-center img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(217, 45, 32, .45);
	/* Meme neon retenu que le cadre de la une : filet d'accent, halo proche,
	   diffusion bleu nuit plus large. */
	box-shadow:
		0 0 0 4px rgba(217, 45, 32, .07),
		0 0 22px -4px rgba(217, 45, 32, .34),
		0 0 64px -12px rgba(18, 35, 63, .30);
}

.gdd-figure-center figcaption {
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	text-align: center;
	margin-top: 14px;
}


/* ==========================================================================
   21. Une de l'accueil, titre en couverture et encadre d'auteur
   ========================================================================== */

/* Masthead en couverture : le titre est pose sur l'image mise en avant. */
.gdd-masthead--cover {
	position: relative;
	background: var(--gdd-deep);
	border-bottom: 0;
	padding: clamp(72px, 8vw, 124px) 0 clamp(36px, 4vw, 52px);
	overflow: hidden;
}

.gdd-masthead__media {
	position: absolute;
	inset: 0;
}

.gdd-masthead__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile degrade : sans lui le titre blanc devient illisible des que la photo
   comporte une zone claire. Il monte de bas en haut pour garder du ciel. */
.gdd-masthead__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(18, 35, 63, .95) 0%,
		rgba(18, 35, 63, .82) 42%,
		rgba(18, 35, 63, .48) 100%
	);
}

.gdd-masthead__inner {
	position: relative;
	z-index: 1;
}

.gdd-masthead--cover h1 { color: #fff; }
.gdd-masthead--cover .gdd-lede { color: var(--gdd-on-deep-link); }

.gdd-masthead--cover .gdd-crumbs,
.gdd-masthead--cover .gdd-crumbs a { color: var(--gdd-on-deep-link); }
.gdd-masthead--cover .gdd-crumbs a:hover { color: #fff; }
.gdd-masthead--cover .gdd-crumbs span[aria-hidden] { color: #7C8CA5; }

.gdd-masthead--cover .gdd-artmeta {
	border-top-color: rgba(255, 255, 255, .22);
	color: var(--gdd-on-deep-link);
}

.gdd-masthead--cover .gdd-artmeta a { color: var(--gdd-accent-lite); }

/* Encadre de fin d'article : signature et partage, a la mesure du texte. */
.gdd-authorbox {
	font-size: 18px;
	max-width: 31em; /* meme mesure que le corps d'article */
	margin: var(--gdd-xl) auto 0;
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	box-shadow: inset 0 3px 0 0 var(--gdd-accent);
	padding: clamp(22px, 2.6vw, 30px);
}

.gdd-authorbox__who {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: var(--gdd-md);
	align-items: start;
}

.gdd-authorbox__avatar {
	display: block;
	width: 84px;
	height: 105px;
	object-fit: cover;
	object-position: center 20%;
	border: 1px solid var(--gdd-line);
}

.gdd-authorbox__label {
	display: block;
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-muted);
}

.gdd-authorbox__name {
	font-family: var(--gdd-font-head);
	font-size: 1.2rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--gdd-title);
	margin: 6px 0 8px;
}

.gdd-authorbox__bio {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--gdd-muted);
	margin: 0;
}

.gdd-authorbox__share {
	margin-top: var(--gdd-md);
	padding-top: var(--gdd-md);
	border-top: 1px solid var(--gdd-line);
}

.gdd-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.gdd-share a {
	display: inline-block;
	font-family: var(--gdd-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gdd-title);
	border: 1px solid var(--gdd-line);
	padding: 9px 13px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gdd-share a:hover,
.gdd-share a:focus {
	background: var(--gdd-accent);
	border-color: var(--gdd-accent);
	color: #fff;
}

@media (max-width: 900px) {
}

@media (max-width: 620px) {
	.gdd-authorbox__who { grid-template-columns: 64px minmax(0, 1fr); }
	.gdd-authorbox__avatar { width: 64px; height: 80px; }
	.gdd-share a { padding: 8px 10px; }
}
/* ==========================================================================
   22. Sommaire (Easy Table of Contents) et ancrage des titres
   ========================================================================== */

/* Easy Table of Contents pose ses ancres sur des spans vides places au debut
   des titres : la reserve pour l'en-tete fixe doit donc porter sur eux aussi,
   sans quoi le titre vise se retrouve sous l'en-tete apres un saut. */
.gdd-entry h2,
.gdd-entry h3,
.gdd-entry .ez-toc-section { scroll-margin-top: 104px; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (max-width: 768px) {
	.gdd-entry h2,
	.gdd-entry h3,
	.gdd-entry .ez-toc-section { scroll-margin-top: 76px; }
}
/* Habillage du sommaire genere par Easy Table of Contents. La feuille du
   plugin est desactivee dans ses reglages : tout passe par les jetons du
   theme, ce qui evite d'avoir a surcharger ses styles. */
#ez-toc-container {
	margin: 2.2em 0;
	padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 28px);
	background: var(--gdd-bg);
	border-left: 3px solid var(--gdd-accent);
}

#ez-toc-container .ez-toc-title-container { margin: 0 0 var(--gdd-sm); }

#ez-toc-container .ez-toc-title {
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-muted);
	margin: 0;
}

#ez-toc-container ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.45;
}

#ez-toc-container > nav > ul > li { margin: 0 0 10px; }
#ez-toc-container > nav > ul > li:last-child { margin-bottom: 0; }

#ez-toc-container .ez-toc-list-level-3 {
	margin: 10px 0 0;
	padding-left: 20px;
	font-size: 15px;
}

#ez-toc-container .ez-toc-list-level-3 li { margin: 0 0 8px; }
#ez-toc-container .ez-toc-list-level-3 li:last-child { margin-bottom: 0; }

#ez-toc-container a.ez-toc-link {
	color: var(--gdd-title);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

#ez-toc-container a.ez-toc-link:hover,
#ez-toc-container a.ez-toc-link:focus {
	color: var(--gdd-accent-ink);
	border-bottom-color: var(--gdd-accent);
}

#ez-toc-container .ez-toc-heading-level-3 a.ez-toc-link { color: var(--gdd-muted); }
/* ==========================================================================
   23. Rangee de cartes : les derniers articles sur l'accueil
   ========================================================================== */

/* auto-fit plutot que trois colonnes figees : avec un ou deux articles
   publies la rangee reste pleine au lieu de laisser un trou. */
.gdd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--gdd-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdd-cards > li { display: flex; }

/* auto-fit fait occuper toute la rangee a un element isole : une rubrique qui
   ne contient qu'un article afficherait une carte de 1192px de large. On lui
   rend la largeur qu'elle aurait dans une rangee de deux. */
@media (min-width: 621px) {
	.gdd-cards > li:only-child { max-width: calc(50% - (var(--gdd-gap) / 2)); }
}

.gdd-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-top: 3px solid var(--gdd-accent);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease;
}

.gdd-card:hover,
.gdd-card:focus-within {
	border-right-color: var(--gdd-title);
	border-bottom-color: var(--gdd-title);
	border-left-color: var(--gdd-title);
}

.gdd-card__thumb {
	display: block;
	background: var(--gdd-line);
	overflow: hidden;
}

.gdd-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Le corps s'etire pour que les cartes d'une meme rangee alignent leur bas. */
.gdd-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}

.gdd-card__meta {
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdd-muted);
}

.gdd-card__title {
	font-family: var(--gdd-font-head);
	font-size: 1.2rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--gdd-title);
	margin: 10px 0 11px;
	transition: color .15s ease;
}

.gdd-card:hover .gdd-card__title,
.gdd-card:focus .gdd-card__title { color: var(--gdd-accent-ink); }

.gdd-card__excerpt {
	flex: 1;
	font-size: 15px;
	line-height: 1.55;
	color: var(--gdd-muted);
}

.gdd-card__more {
	align-self: flex-start;
	margin-top: var(--gdd-md);
	font-family: var(--gdd-font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gdd-accent-ink);
	border-bottom: 2px solid var(--gdd-accent);
	padding-bottom: 3px;
}

@media (max-width: 620px) {
	.gdd-card__body { padding: 20px 20px 22px; }
}
/* Le bouton ferme la rangee et constitue le seul chemin vers le journal :
   le lien de tete de section a ete retire pour ne pas doubler l'intention. */
.gdd-cards__more {
	display: flex;
	justify-content: center;
	margin-top: var(--gdd-lg);
}

/* ==========================================================================
   24. Bandeau newsletter du pied de page
   ========================================================================== */

.gdd-footer__news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding: var(--gdd-lg) 0;
	border-bottom: 1px solid var(--gdd-line-deep);
}

.gdd-footer__news-title {
	font-family: var(--gdd-font-head);
	font-size: 1.3rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 7px;
}

.gdd-footer__news p {
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

/* Le formulaire est partage avec les sections claires : sur le sol bleu nuit
   il faut inverser le champ et les mentions. */
.gdd-footer__news .gdd-input {
	background: transparent;
	border-color: var(--gdd-line-deep);
	color: #fff;
}

.gdd-footer__news .gdd-input::placeholder { color: #7E8CA5; }
.gdd-footer__news .gdd-input:focus { border-color: #fff; }

.gdd-footer__news .gdd-consent { color: var(--gdd-on-deep-muted); }
.gdd-footer__news .gdd-consent a { color: var(--gdd-on-deep-link); }

.gdd-footer__news .gdd-notice {
	background: var(--gdd-deep-raised);
	color: #fff;
}

@media (max-width: 900px) {
	.gdd-footer__news { grid-template-columns: 1fr; gap: var(--gdd-md); }
}
/* Chapeau de section centre au-dessus d'une figure autonome. */
.gdd-intro {
	max-width: 920px;
	margin: 0 auto var(--gdd-lg);
	text-align: center;
}

.gdd-intro h2 {
	max-width: 16em;
	margin: 0 auto var(--gdd-sm);
}

.gdd-intro p {
	max-width: 34em;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
	color: var(--gdd-muted);
}

/* ==================================================================
 * 25. Hero video
 *
 * Le premier conteneur passe en surface sombre : la classe gdd-deep
 * fournit deja titres blancs, lede attenuee et variante claire du bouton
 * fantome. Les regles ci-dessous ne font que ce que gdd-deep ne couvre
 * pas, et arrivent en fin de feuille pour l'emporter a specificite egale
 * sur .gdd-hero, qui reste declaree plus haut pour la version claire.
 * ================================================================== */

.gdd-hero--video {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 64vh, 660px);
	padding: clamp(56px, 8vw, 104px) 0;
	background: var(--gdd-deep);
	border-bottom: 0;
	overflow: hidden;
}

.gdd-hero__media {
	position: absolute;
	inset: 0;
	/* L'affiche est portee par le conteneur et non par le seul attribut
	   poster : elle reste visible quand la video est ecartee, en mouvement
	   reduit comme sur mobile. */
	background-color: var(--gdd-deep);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.gdd-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile bleu nuit, plus dense a gauche ou vit le texte. Le contraste du
   titre ne doit dependre d'aucune image du plan. */
.gdd-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(18, 35, 63, .92) 0%, rgba(18, 35, 63, .72) 44%, rgba(18, 35, 63, .34) 100%),
		linear-gradient(to top, rgba(8, 15, 28, .60) 0%, rgba(8, 15, 28, 0) 50%);
}

.gdd-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.gdd-hero--video h1 {
	color: #fff;
	font-size: clamp(2.5rem, 5.6vw, 4.2rem);
	line-height: 1.05;
	margin-bottom: var(--gdd-sm);
}

.gdd-hero__tagline {
	color: #fff;
	font-size: clamp(1.12rem, 2.1vw, 1.5rem);
	font-weight: 600;
	line-height: 1.32;
	max-width: 18em;
	margin-bottom: var(--gdd-md);
}

.gdd-hero--video .gdd-lede {
	color: var(--gdd-on-deep-muted);
	max-width: 32em;
}

@media (max-width: 900px) {
	.gdd-hero--video { min-height: clamp(360px, 54vh, 460px); }
	.gdd-hero__tagline { max-width: none; }
}

/* ==================================================================
 * 26. Questions frequentes
 *
 * Accordeons natifs details/summary : aucune extension, aucun script.
 * ================================================================== */

.gdd-faq__list {
	display: grid;
	gap: 10px;
	max-width: 48em;
	margin-left: auto;
	margin-right: auto;
}

.gdd-faq .gdd-sechead {
	max-width: 48em;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

.gdd-faq__item {
	background: var(--gdd-surface);
	border: 1px solid var(--gdd-line);
	border-left: 3px solid var(--gdd-accent);
	border-radius: var(--gdd-radius-panel);
	overflow: hidden;
}

.gdd-faq__item > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gdd-md);
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
}

.gdd-faq__item > summary::-webkit-details-marker { display: none; }

.gdd-faq__item > summary:focus-visible {
	outline: 2px solid var(--gdd-accent);
	outline-offset: -3px;
}

.gdd-faq__item h3 {
	color: var(--gdd-title);
	font-size: 1.02rem;
	line-height: 1.42;
	margin: 0;
}

/* Chevron trace en bordures : pas d'icone a charger pour sept lignes. */
.gdd-faq__sign {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-right: 2px solid var(--gdd-accent);
	border-bottom: 2px solid var(--gdd-accent);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.gdd-faq__item[open] { background: var(--gdd-bg); }
.gdd-faq__item[open] .gdd-faq__sign { margin-top: 9px; transform: rotate(-135deg); }

.gdd-faq__a {
	padding: 0 22px 20px;
}

.gdd-faq__a p {
	color: var(--gdd-muted);
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 620px) {
	.gdd-faq__item > summary { padding: 15px 16px; gap: var(--gdd-sm); }
	.gdd-faq__a { padding: 0 16px 17px; }
	.gdd-faq__item h3 { font-size: 0.98rem; }
}

/* ==================================================================
 * 27. Dunes de separation
 *
 * Chaque section porte sa propre dune, dessinee au-dessus d'elle : la
 * couleur qui arrive monte en cretes dans celle qui part. Le trace passe
 * par un masque et non par une image coloree, pour que la teinte reste
 * pilotee par les jetons et suive automatiquement le fond de la section.
 *
 * Deux cretes superposees, la plus lointaine a 42 % d'alpha : un masque
 * partiellement transparent laisse filtrer le fond, ce qui donne la
 * profondeur sans avoir a empiler deux elements.
 * ================================================================== */

.gdd-dune {
	position: relative;
}

.gdd-dune::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(34px, 4.5vw, 68px);
	transform: translateY(-100%);
	pointer-events: none;
	background-color: var(--gdd-bg);
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23fff' fill-opacity='.42' d='M0,100 H1440 V26 C1330,42 1246,16 1150,28 C1042,42 984,74 884,70 C784,66 726,28 626,32 C526,36 466,72 366,68 C266,64 186,32 86,40 L0,48 Z'/><path fill='%23fff' d='M0,100 H1440 V54 C1332,44 1246,72 1136,70 C1026,68 958,40 848,44 C738,48 668,80 558,76 C448,72 380,44 270,50 C178,55 92,72 0,66 Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23fff' fill-opacity='.42' d='M0,100 H1440 V26 C1330,42 1246,16 1150,28 C1042,42 984,74 884,70 C784,66 726,28 626,32 C526,36 466,72 366,68 C266,64 186,32 86,40 L0,48 Z'/><path fill='%23fff' d='M0,100 H1440 V54 C1332,44 1246,72 1136,70 C1026,68 958,40 848,44 C738,48 668,80 558,76 C448,72 380,44 270,50 C178,55 92,72 0,66 Z'/></svg>");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Declare apres la variante grise : a specificite egale, c'est la derniere
   qui l'emporte, et toute section en surface porte aussi .gdd-section. */
.gdd-surface.gdd-dune::before {
	background-color: var(--gdd-surface);
}

/* Entre #F5F6F7 et #FFFFFF il n'y a que deux pour cent d'ecart : la dune
   seule ne se lit pas. On souligne la crete d'un filet au ton de
   --gdd-line. Meme technique : le masque donne la forme, background-color
   donne la teinte, qui reste donc un jeton. vector-effect garde le trait
   d'epaisseur constante malgre l'etirement vertical du masque. */
.gdd-dune::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(34px, 4.5vw, 68px);
	transform: translateY(-100%);
	pointer-events: none;
	background-color: var(--gdd-line);
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' d='M0,66 C92,72 178,55 270,50 C380,44 448,72 558,76 C668,80 738,48 848,44 C958,40 1026,68 1136,70 C1246,72 1332,44 1440,54'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' d='M0,66 C92,72 178,55 270,50 C380,44 448,72 558,76 C668,80 738,48 848,44 C958,40 1026,68 1136,70 C1246,72 1332,44 1440,54'/></svg>");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* La crete mange le haut de la section : on lui rend sa respiration. */
.gdd-dune {
	padding-top: calc(var(--gdd-xl) + clamp(10px, 1.5vw, 24px));
}

@supports not (mask-size: 100% 100%) {
	.gdd-dune::before,
	.gdd-dune::after { display: none; }
}

/* ==================================================================
 * 28. Verticale Garages d'occasion
 *
 * Le gros du rendu de la carte appartient a WP Store Locator. On ne
 * reecrit pas sa logique : on lui donne un cadre, une hauteur maitrisee
 * et les jetons du site. A revoir une fois l'extension reellement
 * installee, son balisage exact ne pouvant pas etre devine.
 * ================================================================== */

.gdd-carte {
	--gdd-carte-h: clamp(360px, 52vh, 560px);
	position: relative;
	border: 1px solid var(--gdd-line);
	border-top: 3px solid var(--gdd-accent);
	background: var(--gdd-surface);
	border-radius: var(--gdd-radius-panel);
	overflow: hidden;
}

.gdd-carte--attente p {
	margin: 0;
	padding: clamp(20px, 3vw, 32px);
	color: var(--gdd-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Titre et chapeau centres sur les landings ville : la bulle du menu l'est
   aussi, et un bandeau pleine largeur supporte mal un texte cale a gauche
   sur un tiers de sa surface. Les articles gardent leur alignement a
   gauche, qui sert la lecture suivie. */
.page-template-template-landing-ville .gdd-masthead__inner {
	text-align: center;
}

.page-template-template-landing-ville .gdd-masthead h1 {
	max-width: 15em;
	margin-left: auto;
	margin-right: auto;
}

.page-template-template-landing-ville .gdd-masthead .gdd-lede {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

/* Bandeau des landings ville : hauteur plancher pour que la couverture
   tienne son role quel que soit la longueur du chapeau, d'une ville a
   l'autre. Le contenu reste cale en bas, au-dessus du voile le plus dense. */
.page-template-template-landing-ville .gdd-masthead--cover {
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 42vh, 440px);
}

.page-template-template-landing-ville .gdd-masthead__inner {
	width: 100%;
}
/* --- Plan statique -------------------------------------------------- */

.gdd-plan {
	position: relative;
	line-height: 0;
}

.gdd-plan__svg {
	display: block;
	width: 100%;
	height: auto;
}

.gdd-plan__bascule {
	position: absolute;
	right: 14px;
	bottom: 14px;
	font-family: var(--gdd-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--gdd-accent);
	border: 1px solid var(--gdd-accent);
	border-radius: var(--gdd-radius-btn);
	padding: 13px 18px;
	cursor: pointer;
}

.gdd-plan__bascule:hover,
.gdd-plan__bascule:focus-visible {
	background: var(--gdd-accent-ink);
	border-color: var(--gdd-accent-ink);
}

.gdd-plan__carte {
	height: clamp(340px, 52vh, 540px);
	width: 100%;
	background: var(--gdd-deep);
}

.gdd-carte__compte {
	margin: 0;
	padding: 15px 20px;
	border-top: 1px solid var(--gdd-line);
	border-bottom: 1px solid var(--gdd-line);
	background: var(--gdd-bg);
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gdd-muted);
}

/* --- Regroupement par commune -------------------------------------- */

.gdd-groupes {
	display: grid;
	gap: 10px;
	padding: 20px;
	background: var(--gdd-bg);
}

/* .gdd-groupe reprend .gdd-faq__item : cadre, rayon, chevron. On ne
   redefinit ici que ce qui differe. */
.gdd-groupe > summary h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.gdd-groupe__compte {
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gdd-muted);
}

/* L'etat ouvert de la FAQ passe le fond en gris, ce qui annulerait le
   zebrage des entrees. Le groupe garde donc sa surface blanche. */
.gdd-groupe[open] { background: var(--gdd-surface); }

.gdd-groupe > .gdd-garages {
	border-top: 1px solid var(--gdd-line);
}

@media (max-width: 620px) {
	.gdd-groupes { padding: 14px; }
}
/* --- Liste des etablissements --------------------------------------- */

.gdd-garages {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gdd-garage;
}

.gdd-garage {
	padding: 18px 20px;
	border-bottom: 1px solid var(--gdd-line);
}

.gdd-garage:last-child { border-bottom: 0; }
.gdd-garage:nth-child(even) { background: var(--gdd-bg); }

.gdd-garage__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gdd-sm);
}

.gdd-garage__nom {
	margin: 0;
	font-family: var(--gdd-font-title, inherit);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--gdd-title);
}

.gdd-garage__km {
	flex: 0 0 auto;
	font-family: var(--gdd-font-mono);
	font-size: 12px;
	color: var(--gdd-muted);
	white-space: nowrap;
}

.gdd-garage__adresse {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--gdd-muted);
}

.gdd-garage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Cibles tactiles d'au moins 40 px de haut : la liste se consulte au doigt. */
.gdd-garage__lien {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--gdd-line);
	border-radius: var(--gdd-radius-btn);
	background: var(--gdd-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--gdd-title);
	text-decoration: none;
}

.gdd-garage__lien:hover,
.gdd-garage__lien:focus-visible {
	border-color: var(--gdd-title);
	color: var(--gdd-title);
}

.gdd-garage__lien--go {
	border-color: var(--gdd-accent);
	color: var(--gdd-accent-ink);
}

.gdd-garage__lien--go:hover,
.gdd-garage__lien--go:focus-visible {
	background: var(--gdd-accent);
	border-color: var(--gdd-accent);
	color: #fff;
}

.gdd-carte__source {
	margin: 0;
	padding: 14px 20px;
	border-top: 1px solid var(--gdd-line);
	background: var(--gdd-bg);
	font-size: 13px;
	line-height: 1.55;
	color: var(--gdd-muted);
}

.gdd-carte__source a { color: var(--gdd-muted); }

@media (max-width: 620px) {
	.gdd-garage { padding: 16px; }
	.gdd-garage__tete { flex-direction: column; gap: 2px; }
	.gdd-plan__bascule { right: 10px; bottom: 10px; padding: 12px 14px; font-size: 13px; }
	.gdd-carte__compte,
	.gdd-carte__source { padding-left: 16px; padding-right: 16px; }
}
/* Rappel du statut du media : ni vendeur, ni prescripteur. */
.gdd-avertissement {
	max-width: 48em;
	margin: var(--gdd-md) auto 0;
	padding: 14px 18px;
	border-left: 3px solid var(--gdd-line-deep);
	background: var(--gdd-bg);
	border-radius: 0 var(--gdd-radius-panel) var(--gdd-radius-panel) 0;
	color: var(--gdd-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.gdd-avertissement p { margin: 0; }

/* Palier du menu deroulant, remonte a 840 px : avec huit entrees la barre
   horizontale ne tient plus en dessous, mesure faite. Ces regles vivaient
   au palier 768 et l'ont suivi. */
@media (max-width: 840px) {

	.site-header .inside-header { width: auto; }

	.site-header .inside-header { flex-wrap: wrap; min-height: 60px; }

	.main-navigation .main-nav > ul { flex-wrap: wrap; }

	.main-navigation .main-nav ul li a { line-height: 48px; padding: 0 0 0 0; width: 100%; }

	.main-navigation.toggled .main-nav > ul {
		display: block;
		background: var(--gdd-deep-raised);
		border-top: 1px solid var(--gdd-line-deep);
		padding: var(--gdd-sm) var(--gdd-gap) var(--gdd-md);
		margin: 0 calc(var(--gdd-gap) * -1);
	}

	.main-navigation .main-nav ul li.nav-cta { margin: var(--gdd-sm) 0 0; }

	.main-navigation .main-nav ul li.nav-cta > a { display: inline-flex; width: auto; }

	.main-navigation .main-nav ul li.current-menu-item > a::after { display: none; }

	/* La signature du site tient dans le titre : le sous-titre doublait la
	   hauteur de l'en-tete fixe sur un ecran de telephone. */
	.site-header .site-description { display: none; }


	/* Le retour a la ligne flex heritait du gap de 24px en gouttiere de rangee,
	   ce qui ajoutait 24px de hauteur a un en-tete fixe deja charge. */
	.site-header .inside-header {
		min-height: 62px;
		row-gap: 0;
	}


	.main-navigation .menu-toggle { line-height: 62px; }

	.site-header .header-image { height: 48px; }
}