/*
 * WPTechnology : la mise en forme que `theme.json` ne sait pas porter.
 *
 * **La règle de partage entre les deux fichiers, et elle n'est pas
 * décorative.** Tout ce qui est un *jeton* — une couleur, une taille, un
 * espacement, un rayon, une ombre — vit dans `theme.json`, où l'éditeur le
 * montre et où l'école peut le changer. Tout ce qui est une *forme* — un
 * masque en diagonale, une jauge, un accordéon — vit ici, parce qu'aucun
 * réglage d'éditeur ne sait le décrire.
 *
 * Cette feuille ne pose donc **aucune valeur en dur** : elle lit les variables
 * que `theme.json` publie. Changer l'accent du site se fait à un seul endroit,
 * et ce fichier suit.
 *
 * Elle est enfilée pour le site **et** pour l'éditeur (voir `functions.php`) :
 * ce qu'on compose est ce qu'on publie.
 */

/* ------------------------------------------------------------------ *
 * 1. Le bandeau : une photo qui s'efface vers la gauche
 * ------------------------------------------------------------------ */

/*
 * Le motif structurant du site, présent sur sept pages sur huit. Trois couches
 * font disparaître la photo pour que le titre reste lisible sur blanc, sans
 * jamais assombrir l'image ni poser un voile uniforme dessus.
 *
 * **Le tiers gauche de la photo doit être visuellement calme**, puisqu'il passe
 * sous le voile. Les images fournies sont cadrées pour cela : les recadrer en
 * carré ou en 16:9 centré casse le motif.
 */
.wpt-bandeau {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--custom--filet--entete);
	min-height: var(--wpt-bandeau-hauteur, var(--wp--custom--bandeau--page));
}

/* Les cinq hauteurs du handoff, en variations d'une seule règle. */
.wpt-bandeau.is-accueil { --wpt-bandeau-hauteur: var(--wp--custom--bandeau--accueil); }
.wpt-bandeau.is-gamme   { --wpt-bandeau-hauteur: var(--wp--custom--bandeau--gamme); }
.wpt-bandeau.is-plugin  { --wpt-bandeau-hauteur: var(--wp--custom--bandeau--plugin); }
.wpt-bandeau.is-contact { --wpt-bandeau-hauteur: var(--wp--custom--bandeau--contact); }

/*
 * La photo, masquée en diagonale. `mask-image` et non un dégradé posé
 * par-dessus : un voile blanc opaque aurait grisé la photo là où elle reste
 * visible, alors qu'un masque la rend réellement transparente.
 */
.wpt-bandeau__image {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(95deg, transparent 4%, rgba(0, 0, 0, .4) 26%, #000 58%);
	mask-image: linear-gradient(95deg, transparent 4%, rgba(0, 0, 0, .4) 26%, #000 58%);
}

.wpt-bandeau__image img,
.wpt-bandeau__image .wp-block-image,
.wpt-bandeau__image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.wpt-bandeau__image img {
	display: block;
	object-fit: cover;
}

/* Le fondu vers le blanc en pied de bandeau, pour souder la section à la suite. */
.wpt-bandeau::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(to top, #fff 6%, rgba(255, 255, 255, 0));
	pointer-events: none;
}

/* Le voile blanc sur la moitié gauche, sous le texte. */
.wpt-bandeau::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #fff 0 42%, rgba(255, 255, 255, .8) 56%, rgba(255, 255, 255, 0) 74%);
	pointer-events: none;
}

/*
 * Deux boîtes et non une : le conteneur porte la largeur du site et le
 * rembourrage, le contenu porte la largeur de lecture et l'animation. Les
 * fondre aurait fait démarrer l'animation sur toute la largeur de l'écran, et
 * le texte serait monté depuis le bord droit de la photo.
 */
.wpt-bandeau__conteneur {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1220px;
	margin-inline: auto;
	padding: 88px 32px 80px;
}

/*
 * **La largeur est posée ici et non par une disposition « contrainte » de
 * l'éditeur.** La disposition contrainte de WordPress centre ses enfants en
 * leur posant `margin-inline: auto` ; le contenu du bandeau, large de 560 px,
 * se retrouvait donc au milieu de l'écran alors que la maquette le colle à
 * gauche, contre le voile blanc. On lui laisse la disposition par défaut, et
 * c'est la feuille qui donne la largeur.
 */

.wpt-bandeau__contenu {
	max-width: 560px;
	animation: wpt-rise .6s cubic-bezier(.2, .7, .3, 1) both;
}

/*
 * La pastille du bandeau : un point coloré et une phrase, sur un blanc à 80 %
 * pour laisser deviner la photo derrière. Elle n'est pas une pastille de
 * statut — celles-là sont pleines et colorées — et ne partage donc pas leur
 * classe.
 */
.wpt-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* Aucune marge basse : l'écart avec le titre est porté par le titre
	   lui-même, comme dans la maquette, et un seul des deux doit le porter. */
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--wp--custom--filet--champ);
	border-radius: var(--wp--custom--rayon--pastille);
	background: rgba(255, 255, 255, .8);
	font-size: 13.5px;
	color: var(--wp--preset--color--encre-douce);
}

.wpt-chip::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--bleu);
}

.wpt-chip.is-ambre::before { background: var(--wp--preset--color--ambre); }

.wpt-bandeau.is-accueil .wpt-bandeau__contenu { animation-duration: .7s; }

@keyframes wpt-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

/*
 * Une seule animation sur tout le site, et elle se tait pour qui l'a demandé.
 * Le réglage système « réduire les animations » n'est pas une préférence
 * esthétique : c'est une demande de personnes que le mouvement met mal à
 * l'aise.
 */
@media (prefers-reduced-motion: reduce) {
	.wpt-bandeau__contenu { animation: none; }
	* { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ *
 * 2. Les cartes
 * ------------------------------------------------------------------ */

.wpt-carte,
.is-style-carte,
.is-style-carte-aero,
.is-style-carte-generale {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon--carte);
	box-shadow: var(--wp--preset--shadow--carte);
	overflow: hidden;
}

.is-style-carte-aero,
.is-style-carte-generale {
	/* Vingt-deux pixels et aucune ombre : ces deux cartes-là sont des blocs de
	   contenu, pas des vignettes de grille. La maquette les distingue ainsi. */
	border-radius: var(--wp--custom--rayon--article);
	box-shadow: none;
}

.is-style-carte-aero {
	border-color: var(--wp--custom--bleu--filet);
	background: linear-gradient(180deg, #F0F8FC, #FFFFFF 72%);
}

.is-style-carte-generale {
	border-color: var(--wp--custom--ambre--filet);
	background: linear-gradient(180deg, #FFF9EE, #FFFFFF 72%);
}

/*
 * Le survol ne s'applique qu'à ce qui mène quelque part. Une carte inerte qui
 * se soulève sous le curseur promet un clic qui n'existe pas, et c'est le
 * genre de mensonge qu'on remarque sans savoir le nommer.
 */
.wpt-carte:has(a):hover,
.is-style-carte:has(a):hover,
.is-style-carte-aero:has(a):hover,
.is-style-carte-generale:has(a):hover {
	box-shadow: var(--wp--preset--shadow--carte-survol);
	transform: translateY(-3px);
}

.wpt-carte,
.is-style-carte,
.is-style-carte-aero,
.is-style-carte-generale {
	transition: box-shadow .22s, transform .22s;
}

/* La carte pointillée d'un plugin qui n'est pas encore là. */
.wpt-carte.is-a-venir {
	border-style: dashed;
	border-color: var(--wp--custom--bleu--pointille);
	background: var(--wp--preset--color--fond-bleute);
	box-shadow: none;
}

.wpt-carte.is-a-venir.is-generale {
	border-color: var(--wp--custom--ambre--filet-fonce);
	background: var(--wp--preset--color--fond-ambre);
}

/* ------------------------------------------------------------------ *
 * 3. Pastilles, surtitres, métadonnées
 * ------------------------------------------------------------------ */

.is-style-pastille-bleue,
.is-style-pastille-ambre,
.is-style-pastille-verte,
.is-style-pastille-neutre {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--wp--custom--rayon--pastille);
	font-size: var(--wp--preset--font-size--pastille);
	font-weight: 500;
	line-height: 1.5;
}

.is-style-pastille-bleue  { color: var(--wp--preset--color--bleu);        background: var(--wp--custom--bleu--halo); }
.is-style-pastille-ambre  { color: var(--wp--preset--color--ambre);       background: var(--wp--custom--ambre--halo); }
.is-style-pastille-verte  { color: var(--wp--preset--color--vert);        background: var(--wp--custom--vert--fond); }
.is-style-pastille-neutre { color: var(--wp--preset--color--encre-douce); background: var(--wp--preset--color--fond-neutre); }

/*
 * Le surtitre coloré au-dessus d'un titre de section.
 *
 * **Écart volontaire avec la maquette, arbitré par le client le 2026-09-03.**
 * Elle le pose en DM Sans 13 px demi-gras, en casse normale. Il est ici en DM
 * Mono, en capitales espacées : Laurent préfère cette forme, qui rime avec les
 * métadonnées techniques du reste du site. Ce n'est donc pas un oubli de
 * relevé, et il ne faut pas le « corriger » vers la maquette.
 */
.is-style-surtitre {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu);
}

.is-style-surtitre.has-ambre-color { color: var(--wp--preset--color--ambre); }

/* La métadonnée technique : version, tarif, provenance. */
.is-style-mono {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	color: var(--wp--custom--encre--discret);
}

/* ------------------------------------------------------------------ *
 * 4. Encarts et bandeau d'appel à l'action
 * ------------------------------------------------------------------ */

.is-style-encart-bleute {
	background: var(--wp--preset--color--fond-bleute);
	border: 1px solid var(--wp--custom--bleu--filet);
	border-radius: var(--wp--custom--rayon--encart);
	padding: var(--wp--preset--spacing--40);
}

.is-style-encart-ambre {
	background: var(--wp--preset--color--fond-ambre);
	border: 1px solid var(--wp--custom--ambre--filet);
	border-radius: var(--wp--custom--rayon--encart);
	padding: var(--wp--preset--spacing--40);
}

/*
 * Le bandeau ardoise de fin de page. Les deux halos sont posés en pseudo
 * éléments plutôt qu'en blocs : ils sont décoratifs, et un lecteur d'écran n'a
 * rien à en dire.
 */
.is-style-bandeau-ardoise {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--rayon--bandeau);
	padding: 44px;
}

.is-style-bandeau-ardoise::before,
.is-style-bandeau-ardoise::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	pointer-events: none;
}

.is-style-bandeau-ardoise::before {
	top: -220px;
	right: -120px;
	background: radial-gradient(circle, rgba(41, 171, 226, .28), transparent 62%);
}

.is-style-bandeau-ardoise::after {
	bottom: -260px;
	left: 22%;
	background: radial-gradient(circle, rgba(247, 168, 27, .22), transparent 62%);
}

.is-style-bandeau-ardoise > * { position: relative; z-index: 1; }
.is-style-bandeau-ardoise :where(h1, h2, h3, h4) { color: var(--wp--preset--color--blanc); }
.is-style-bandeau-ardoise p { color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------------------------ *
 * 5. Boutons : les trois variantes du handoff
 * ------------------------------------------------------------------ */

/* Le bouton bordé, qui prend la couleur de sa gamme au survol. */
.wp-block-button.is-style-bordé .wp-block-button__link,
.wp-block-button.is-style-borde .wp-block-button__link {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--custom--filet--champ);
	box-shadow: none;
}

.wp-block-button.is-style-borde .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--bleu);
}

.wpt-gamme-generale .wp-block-button.is-style-borde .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ambre);
	color: var(--wp--preset--color--ambre);
}

/* Le bouton plein de chaque gamme porte son ombre colorée. */
.wp-block-button .wp-block-button__link.has-bleu-background-color { box-shadow: var(--wp--preset--shadow--bouton-bleu); }
.wp-block-button .wp-block-button__link.has-ambre-background-color { box-shadow: var(--wp--preset--shadow--bouton-ambre); }

/* ------------------------------------------------------------------ *
 * 6. L'illustration « WP » de la page À propos
 * ------------------------------------------------------------------ */

/*
 * Aucune image : la forme d'onde est faite de quatorze barres, et c'est ce qui
 * lui permet de rester nette à toutes les tailles et de suivre les couleurs du
 * site. Les huit premières barres sont bleues, les six dernières ambrées : les
 * deux époques que raconte le texte, 1999 et aujourd'hui.
 */
.wpt-wp-signature {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon--encart);
	padding: 30px 28px 26px;
}

.wpt-wp-signature__onde {
	position: absolute;
	inset: 30px 28px 26px;
	display: flex;
	align-items: flex-end;
	gap: 5px;
	opacity: .3;
	pointer-events: none;
}

.wpt-wp-signature__onde i {
	flex: 1;
	display: block;
	border-radius: 3px;
	background: var(--wp--preset--color--bleu-clair);
}

.wpt-wp-signature__onde i:nth-child(n+9) { background: var(--wp--preset--color--ambre-clair); }

.wpt-wp-signature__onde i:nth-child(1)  { height: 14%; }
.wpt-wp-signature__onde i:nth-child(2)  { height: 34%; }
.wpt-wp-signature__onde i:nth-child(3)  { height: 62%; }
.wpt-wp-signature__onde i:nth-child(4)  { height: 88%; }
.wpt-wp-signature__onde i:nth-child(5)  { height: 52%; }
.wpt-wp-signature__onde i:nth-child(6)  { height: 74%; }
.wpt-wp-signature__onde i:nth-child(7)  { height: 26%; }
.wpt-wp-signature__onde i:nth-child(8)  { height: 46%; }
.wpt-wp-signature__onde i:nth-child(9)  { height: 92%; }
.wpt-wp-signature__onde i:nth-child(10) { height: 58%; }
.wpt-wp-signature__onde i:nth-child(11) { height: 30%; }
.wpt-wp-signature__onde i:nth-child(12) { height: 68%; }
.wpt-wp-signature__onde i:nth-child(13) { height: 20%; }
.wpt-wp-signature__onde i:nth-child(14) { height: 44%; }

.wpt-wp-signature__sigle {
	position: relative;
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 800;
	font-size: clamp(56px, 7vw, 88px);
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--wp--preset--color--blanc);
}

.wpt-wp-signature__legende {
	position: relative;
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
}

/* La chronologie sous le panneau. */
.wpt-chrono { margin: 0; }
.wpt-chrono > div { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--filet); }
.wpt-chrono > div:first-child { border-top: 0; }
.wpt-chrono dt { flex: none; width: 52px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); color: var(--wp--custom--encre--discret); }
.wpt-chrono dd { margin: 0; }
.wpt-chrono b { color: var(--wp--custom--encre--appuye); }

/* Les initiales mises en couleur dans le texte, W et P. */
.wpt-initiale-bleue  { color: var(--wp--preset--color--bleu); }
.wpt-initiale-ambre  { color: var(--wp--preset--color--ambre); }

/* ------------------------------------------------------------------ *
 * 7. Chiffres clés et étapes numérotées
 * ------------------------------------------------------------------ */

.wpt-chiffre {
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon--chiffre);
	padding: 20px 22px;
}

.wpt-chiffre b {
	display: block;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--chiffre);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--encre);
}

.wpt-chiffre span {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--custom--encre--tertiaire);
}

/* Les quatre étapes de « Comment ça se passe », séparées par un filet épais. */
.wpt-etape { border-top: 2px solid var(--wp--preset--color--bleu); padding-top: 16px; }
.wpt-etape .wpt-etape__no { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); color: var(--wp--preset--color--bleu); }

/* L'étape numérotée d'une installation, avec sa pastille ronde. */
.wpt-pas { display: flex; gap: 12px; align-items: flex-start; }
.wpt-pas__no {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--custom--bleu--halo);
	color: var(--wp--preset--color--bleu);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 13px;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 8. Listes à puces du handoff
 * ------------------------------------------------------------------ */

/*
 * Aucune bibliothèque d'icônes sur ce site : les seuls signes graphiques sont
 * des caractères. C'est une décision de design, pas une économie, et elle
 * évite 40 Ko de police d'icônes pour six glyphes.
 */
.wpt-liste-check,
.wpt-liste-point { list-style: none; padding: 0; margin: 0; }

.wpt-liste-check li,
.wpt-liste-point li { position: relative; padding-left: 22px; margin-bottom: 8px; }

.wpt-liste-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--bleu);
	font-weight: 700;
}

.wpt-liste-point li::before {
	content: "·";
	position: absolute;
	left: 6px;
	color: var(--wp--preset--color--bleu);
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 9. Largeur de lecture
 * ------------------------------------------------------------------ */

/*
 * Jamais de paragraphe pleine largeur : au-delà d'une certaine longueur de
 * ligne, l'œil perd le début de la ligne suivante. Le handoff fixe la borne
 * entre 56 et 72 caractères.
 */
/*
 * **Le `!important` est ici inévitable, et il vaut d'être expliqué.**
 *
 * La disposition contrainte de WordPress pose `margin-left: auto !important`
 * à tout enfant plus étroit que la largeur du contenu. Un paragraphe borné à
 * soixante-douze caractères s'en trouvait centré, alors que la maquette le
 * cale à gauche sous son titre. Sans `!important`, aucune règle ne peut
 * reprendre la main : c'est le seul endroit de cette feuille où il apparaît.
 */
.wpt-lecture {
	max-width: var(--wp--custom--lecture--large);
	margin-inline-start: 0 !important;
}

.wpt-lecture-etroite {
	max-width: var(--wp--custom--lecture--etroite);
	margin-inline-start: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 10. Le mobile, que la maquette n'a pas traité
 * ------------------------------------------------------------------ */

/*
 * **Le masque en diagonale n'a pas de sens en portrait.** Sur un écran étroit,
 * la photo n'a plus de moitié droite à montrer : elle passerait entièrement
 * sous le voile, et l'on paierait le chargement d'une image que personne ne
 * voit. Le bandeau devient donc un fond uni, et la photo remonte au-dessus du
 * titre pour ceux qui la veulent.
 */
@media (max-width: 900px) {
	.wpt-bandeau {
		min-height: 0;
		display: block;
		padding-block: 36px;
		background: linear-gradient(180deg, var(--wp--preset--color--fond-bleute), var(--wp--preset--color--blanc));
	}

	.wpt-bandeau::before,
	.wpt-bandeau::after { display: none; }

	.wpt-bandeau__image {
		position: relative;
		inset: auto;
		height: 220px;
		margin-bottom: 24px;
		border-radius: var(--wp--custom--rayon--carte);
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.wpt-bandeau__conteneur { padding-block: 0; }
	.wpt-bandeau__contenu { max-width: none; }

	/* Les colonnes asymétriques se déplient. */
	.wpt-colonnes-asymetriques { display: block; }
	.wpt-colonnes-asymetriques > * + * { margin-top: 28px; }
}

/* ------------------------------------------------------------------ *
 * 11. L'en-tête et le pied de page
 * ------------------------------------------------------------------ */

/*
 * L'en-tête colle en haut et laisse deviner la page qui glisse dessous. Le
 * `backdrop-filter` plutôt qu'un fond opaque : c'est ce qui donne au bandeau
 * l'impression de passer derrière, et non de s'arrêter net.
 */
/*
 * **L'enveloppe de la partie de gabarit s'efface.**
 *
 * WordPress enferme chaque partie de gabarit dans un élément à elle, ici un
 * `<header class="wp-block-template-part">` haut de 73 px, soit exactement la
 * hauteur de la barre. Un élément collant ne peut pas sortir de son parent :
 * la barre était bien en `position: sticky`, et n'avait nulle part où coller.
 *
 * `display: contents` retire cette enveloppe de la mise en page sans la
 * retirer du document : la barre devient alors, pour le calcul, un enfant
 * direct de la page, et colle sur toute sa hauteur.
 */
.wp-site-blocks > header.wp-block-template-part { display: contents; }

/*
 * **Et la page ne laisse pas de blanc sous elle.**
 *
 * WordPress espace les enfants de la page de sa gouttière, vingt pixels ici :
 * il y avait donc une bande blanche entre le bas de la barre et le haut du
 * bandeau. Les trois enfants de la page — barre, contenu, pied — se touchent,
 * chacun portant ses propres marges intérieures.
 */
body .wp-site-blocks > * + * { margin-block-start: 0; }

.wpt-entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--custom--filet--entete);
	padding-block: 15px;
}

/* La barre d'administration de WordPress décale la page de 32 px : sans cela,
   l'en-tête collant se glisse dessous et le logo disparaît à moitié. */
body.admin-bar .wpt-entete { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .wpt-entete { top: 46px; }
}

.wpt-entete__barre { gap: 32px; }

/*
 * **Le logo tient dans une boîte de 162 sur 42**, et non dans sa proportion
 * naturelle. Réglé par la seule largeur, il faisait 50 px de haut et l'en-tête
 * passait de 73 à 83 px : dix pixels de plus sur toutes les pages du site.
 */
.wpt-entete .wp-block-site-logo img {
	height: 42px;
	width: auto;
	max-width: 162px;
	object-fit: contain;
}

.wpt-pied .wp-block-site-logo img {
	height: 38px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* La navigation est poussée à droite, le logo reste à gauche. */
.wpt-entete .wpt-nav { margin-left: auto; }

.wpt-entete .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre-douce);
	text-decoration: none;
}

.wpt-entete .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--encre);
}

/*
 * L'entrée active porte un soulignement épais et translucide, posé en ombre
 * intérieure plutôt qu'en bordure : une bordure aurait décalé le texte d'un
 * pixel au survol, et la barre entière aurait tressauté.
 */
.wpt-entete .current-menu-item > .wp-block-navigation-item__content,
.wpt-entete .current-menu-ancestor > .wp-block-navigation-item__content,
.wpt-entete .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre);
	font-weight: 500;
	box-shadow: inset 0 -8px 0 rgba(41, 171, 226, .22);
}

/*
 * Le pied de page.
 *
 * **Deux écarts avec la maquette, tous deux demandés par le client le
 * 2026-09-03.** Elle le pose en gris clair sur blanc, sans fond : il
 * disparaissait, et il ne tenait pas le rapport de contraste de 4,5 exigé
 * par les règles d'accessibilité. Il s'assoit donc sur le fond neutre du
 * site, et son texte passe à l'encre douce.
 *
 * Et ses liens sont **poussés à droite, sous la mention d'éditeur**, plutôt
 * qu'étalés sur toute la ligne à côté du logo. Alignés à gauche, ils ne
 * tombaient sous rien et la ligne paraissait bancale.
 */
.wpt-pied {
	border-top: 1px solid var(--wp--preset--color--filet);
	background: var(--wp--preset--color--fond-neutre);
	padding-block: 28px 24px;
	font-size: 13.5px;
	color: var(--wp--preset--color--encre-douce);
}

.wpt-pied__barre { gap: 24px; align-items: center; }
.wpt-pied p { margin: 0; }

/* Les liens et les mentions légales, en une colonne alignée à droite. */
.wpt-pied__droite {
	margin-left: auto;
	justify-content: flex-end;
	gap: 20px;
	row-gap: 8px;
}

.wpt-pied .wp-block-navigation { gap: 20px; }

.wpt-pied a {
	color: var(--wp--preset--color--encre-douce);
	text-decoration: none;
}

.wpt-pied a:hover { color: var(--wp--preset--color--encre); }

.wpt-pied__legal { display: flex; gap: 20px; }

/*
 * La mention d'éditeur ferme le pied, alignée à droite sous les liens : c'est
 * elle qui donne le bord sur lequel tout le reste se cale.
 */
.wpt-pied__mention {
	margin-top: 14px !important;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--filet);
	text-align: right;
	color: var(--wp--preset--color--encre-discrete);
}

@media (max-width: 900px) {
	.wpt-pied__barre { flex-wrap: wrap; }
	.wpt-pied__droite { margin-left: 0; justify-content: flex-start; }
	.wpt-pied__mention { text-align: left; }
}
}

/* ------------------------------------------------------------------ *
 * 12. La grille du catalogue
 * ------------------------------------------------------------------ */

/* Le titre de la section, puis la description et le décompte sur une ligne. */
.wpt-catalogue__titre-section {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--encre);
}

.wpt-catalogue__entete {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 22px;
}

.wpt-catalogue__chapeau {
	margin: 0;
	max-width: var(--wp--custom--lecture--large);
	color: var(--wp--preset--color--encre-douce);
}

.wpt-catalogue__entete .is-style-mono { margin-left: auto; flex: none; }

@media (max-width: 700px) {
	.wpt-catalogue__entete { flex-wrap: wrap; }
	.wpt-catalogue__entete .is-style-mono { margin-left: 0; }
}

/*
 * `auto-fill` et non `auto-fit` : avec `auto-fit`, deux cartes seules
 * s'étireraient sur toute la largeur et feraient deux pavés de six cents
 * pixels. `auto-fill` garde la trame, et la grille reste lisible même quand
 * une gamme n'a qu'un plugin.
 */
.wpt-catalogue {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --wpt-colonnes, 300px ), 1fr ) );
	gap: var(--wp--preset--spacing--20);
}

.wpt-catalogue__carte {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
}

.wpt-catalogue__image {
	height: 150px;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--filet);
}

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

.wpt-catalogue__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}

.wpt-catalogue__marques {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
}

.wpt-catalogue__titre {
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--encre);
}

.wpt-catalogue__texte {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--encre-douce);
}

/*
 * Le pied est poussé en bas de la carte par `margin-top: auto` : sans lui, une
 * description courte et une longue auraient placé leurs boutons à deux
 * hauteurs différentes dans la même rangée.
 */
.wpt-catalogue__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
}

.wpt-catalogue__pied .is-style-mono { margin-right: auto; }

.wpt-catalogue__bouton {
	flex: none;
	padding: 10px 16px;
	border-radius: 9px;
	background: var(--wp--custom--bleu--fond-bouton);
	color: var(--wp--preset--color--bleu);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.wpt-catalogue__bouton:hover {
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

/* La carte d'un plugin à l'étude n'a pas d'image : une bande pointillée tient
   sa place, pour que la rangée garde sa hauteur. */
.wpt-catalogue__carte.is-a-venir .wpt-catalogue__image { border-bottom-style: dashed; }

/* ------------------------------------------------------------------ *
 * 13. Les interlignes que theme.json ne sait pas porter
 * ------------------------------------------------------------------ */

/*
 * Une taille de police déclarée dans `theme.json` n'emporte pas son
 * interligne : le corps du site impose alors le sien, 1.62, à toutes les
 * tailles. Le chapô s'en trouvait à 30.78 px là où la maquette le pose à 30.4,
 * et le bandeau gagnait un pixel. Chaque taille qui a son interligne propre
 * le déclare donc ici.
 */
.has-chapo-font-size   { line-height: 1.6; }
.has-petit-font-size   { line-height: 1.6; }
.has-mono-font-size,
.is-style-mono         { line-height: 1.5; }

/* ------------------------------------------------------------------ *
 * 14. La grille des réalisations
 * ------------------------------------------------------------------ */

.wpt-refs {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --wpt-colonnes, 300px ), 1fr ) );
	gap: var(--wp--preset--spacing--20);
}

.wpt-refs__carte { display: flex; flex-direction: column; }

.wpt-refs__image {
	height: 165px;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--filet);
}

.wpt-refs__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.wpt-refs__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.wpt-refs__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 17.5px;
	font-weight: 700;
	color: var(--wp--preset--color--encre);
}

.wpt-refs__texte {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--encre-douce);
}

/* Poussé en bas de carte : sans cela, une rangée de trois cartes montre ses
   trois liens à trois hauteurs différentes. */
.wpt-refs__lien {
	margin-top: auto;
	padding-top: 14px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--wp--preset--color--bleu);
	text-decoration: none;
}

.wpt-refs__lien:hover { color: var(--wp--custom--bleu--survol); }

/* ------------------------------------------------------------------ *
 * 15. Les sections de l'accueil
 * ------------------------------------------------------------------ */

/*
 * **Une grille posée sur un groupe que WordPress croit en flux.**
 *
 * L'éditeur ne sait pas faire de grille à deux colonnes de largeur minimale ;
 * le bloc reste donc un groupe en flux, et la feuille le passe en grille. Mais
 * WordPress a déjà écrit sa règle de gouttière verticale, `> * + *`, et le
 * deuxième enfant se retrouvait poussé de vingt pixels **dans sa cellule** :
 * les deux cartes ne commençaient pas à la même hauteur.
 *
 * Le sélecteur commence par `body` pour passer devant celui de WordPress, qui
 * a la même spécificité. Toutes les grilles de cette feuille posées sur un
 * groupe portent la même précaution.
 */
body .wpt-duo > * + *,
body .wpt-surmesure > * + *,
body .wpt-appel > * + *,
body .wpt-surmesure__refs > * + * { margin-block-start: 0; }

/* Les deux cartes de gamme, côte à côte puis l'une sous l'autre. */
.wpt-duo {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 400px, 1fr ) );
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

/*
 * Les cartes s'étirent sur la hauteur de la rangée et poussent leur bouton en
 * bas : deux descriptions de longueurs différentes donnaient sinon deux
 * boutons à deux hauteurs.
 */
.wpt-duo > * { display: flex; flex-direction: column; }
.wpt-duo .wpt-gamme__corps { flex: 1; }
.wpt-duo .wp-block-buttons { margin-top: auto !important; padding-top: 20px; }

.wpt-gamme__image { margin: 0 !important; height: 180px; }

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

.wpt-gamme__corps { padding: 26px; }

.wpt-gamme__corps h3 {
	margin: 4px 0 10px;
	font-size: 23px;
	letter-spacing: -.025em;
}

.wpt-gamme__corps p { margin: 0; font-size: 16px; line-height: 1.6; }

/*
 * Le bouton d'une carte de gamme n'a pas d'ombre : elle est réservée aux deux
 * boutons du bandeau d'accueil, où elle détache l'appel principal de la photo.
 * Posée partout, elle aurait fait flotter chaque bouton du site.
 */
.wpt-gamme__corps .wp-block-button__link {
	box-shadow: none !important;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 10px;
}

/*
 * Le développement sur mesure : le texte à gauche, trois références à droite.
 * Colonnes asymétriques, qui se déplient sous 900 px comme tout le reste.
 */
.wpt-surmesure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: var(--wp--preset--spacing--50);
	padding: 34px;
}

.wpt-mini { padding: 16px 18px; }

.wpt-mini__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--encre);
}

.wpt-mini__client {
	margin: 0;
	font-size: 14px;
	color: var(--wp--custom--encre--tertiaire);
}

/* Le bandeau d'appel : texte à gauche, bouton à droite, aligné au centre. */
.wpt-appel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.wpt-appel__texte { flex: 1 1 460px; }
.wpt-appel__bouton { flex: none; margin-left: auto; }

/* Le bouton blanc du bandeau ardoise vire au bleu sous le curseur. */
.is-style-blanc .wp-block-button__link:hover {
	background: var(--wp--preset--color--bleu) !important;
	color: var(--wp--preset--color--blanc) !important;
}

/* Le bouton ardoise du sur-mesure vire au bleu, comme la maquette. */
.is-style-ardoise .wp-block-button__link:hover {
	background: var(--wp--preset--color--bleu) !important;
}

@media (max-width: 900px) {
	.wpt-surmesure { grid-template-columns: minmax(0, 1fr); }
	.wpt-appel__bouton { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * 16. L'article d'un plugin, sur la page de sa gamme
 * ------------------------------------------------------------------ */

.wpt-article-plugin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	border: 1px solid var(--wp--custom--bleu--filet);
	border-radius: var(--wp--custom--rayon--article);
	overflow: hidden;
	background: var(--wp--preset--color--blanc);
}

/*
 * L'alternance se fait par l'ordre des colonnes et non par un second bloc :
 * le balisage reste le même, et le texte garde sa place dans l'ordre de
 * lecture pour qui parcourt la page au clavier ou au lecteur d'écran.
 */
.wpt-article-plugin.is-image-gauche { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.wpt-article-plugin.is-image-gauche .wpt-article-plugin__image { order: -1; }

.wpt-article-plugin__texte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 32px;
}

.wpt-article-plugin__marques {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.wpt-article-plugin__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--encre);
}

.wpt-article-plugin__pitch {
	margin: 0;
	max-width: var(--wp--custom--lecture--large);
	font-size: 16px;
	line-height: 1.65;
}

.wpt-article-plugin__points { margin: 2px 0 0; font-size: 15.5px; }
.wpt-article-plugin__tarif  { margin: 4px 0 0; }

.wpt-article-plugin__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/*
 * L'image ne se répète pas et remplit sa colonne, avec le filet qui sépare les
 * deux moitiés. `min-height` plutôt qu'une hauteur fixe : c'est la colonne de
 * texte qui décide de la hauteur de l'article, et l'image la suit.
 */
.wpt-article-plugin__image {
	position: relative;
	min-height: 320px;
	border-left: 1px solid var(--wp--custom--bleu--filet);
}

.wpt-article-plugin.is-image-gauche .wpt-article-plugin__image {
	border-left: 0;
	border-right: 1px solid var(--wp--custom--bleu--filet);
}

.wpt-article-plugin__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Les deux boutons de l'article, hors du système de blocs. */
.wpt-bouton-plein,
.wpt-bouton-borde {
	display: inline-block;
	padding: 12px 20px;
	border-radius: var(--wp--custom--rayon--champ);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.wpt-bouton-plein {
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

.wpt-bouton-plein:hover {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc);
}

.wpt-bouton-borde {
	border: 1px solid var(--wp--custom--filet--champ);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
}

.wpt-bouton-borde:hover {
	border-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--bleu);
}

@media (max-width: 900px) {
	.wpt-article-plugin,
	.wpt-article-plugin.is-image-gauche { grid-template-columns: minmax(0, 1fr); }

	/* En une colonne, l'image passe **sous** le texte dans les deux sens : au
	   téléphone, on veut lire de quoi il s'agit avant de voir la photo. */
	.wpt-article-plugin.is-image-gauche .wpt-article-plugin__image { order: 0; }

	.wpt-article-plugin__image {
		min-height: 220px;
		border-left: 0;
		border-right: 0;
		border-top: 1px solid var(--wp--custom--bleu--filet);
	}
}

/* L'encart de fin de page de gamme : un texte et un bouton, sur une ligne. */
.wpt-encart-fin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.wpt-encart-fin p { margin: 0; flex: 1 1 420px; }
.wpt-encart-fin .wp-block-buttons { flex: none; margin-left: auto; }

@media (max-width: 700px) {
	.wpt-encart-fin .wp-block-buttons { margin-left: 0; }
}

/* La gamme générale décline le bandeau en ambre. */
.wpt-gamme-generale .wpt-article-plugin,
.wpt-gamme-generale .wpt-article-plugin__image { border-color: var(--wp--custom--ambre--filet); }

body .wpt-encart-fin > * + * { margin-block-start: 0; }