/*
 * Latelier — feuille de styles du thème.
 *
 * Les valeurs de la charte (couleurs, tailles, espacements) font foi dans
 * theme.json : ce fichier les lit via les variables --wp--preset--* et les
 * alias ci-dessous, il ne les redéfinit pas en dur.
 *
 * Sommaire :
 *   1. Alias de jetons
 *   2. Base (accessibilité, titres, liens, focus)
 *   3. Gabarit (gouttières, largeurs, alignements)
 *   4. En-tête de site
 *   5. Pied de page
 *   6. Motifs (surtitre, logotype, scie)
 *   7. Blocs natifs (boutons, images, groupes « carte »)
 *   8. Compositions du thème
 *   9. Gabarits de page
 *  10. Petits écrans
 *  11. Préférences de l'utilisateur (mouvement réduit, impression)
 */

/* ============================================================
   1. ALIAS DE JETONS — lus depuis theme.json
   ============================================================ */

:root {
	--encre: var(--wp--preset--color--encre);
	--papier: var(--wp--preset--color--papier);
	--blanc: var(--wp--preset--color--blanc);
	--terre: var(--wp--preset--color--terre);
	--terre-700: var(--wp--preset--color--terre-700);
	--foret: var(--wp--preset--color--foret);
	--braise: var(--wp--preset--color--braise);
	--sable: var(--wp--preset--color--sable);
	--sauge: var(--wp--preset--color--sauge);
	--schiste: var(--wp--preset--color--schiste);

	--police-titres: var(--wp--preset--font-family--titres);
	--police-texte: var(--wp--preset--font-family--texte);

	--rayon-petit: var(--wp--custom--rayon--petit);
	--rayon-carte: var(--wp--custom--rayon--carte);
	--rayon-grand: var(--wp--custom--rayon--grand);
	--rayon-pilule: var(--wp--custom--rayon--pilule);

	--duree-rapide: var(--wp--custom--mouvement--rapide);
	--duree-base: var(--wp--custom--mouvement--base);
	--ease-out: var(--wp--custom--mouvement--ease-out);

	--gouttiere: clamp(1.25rem, 4vw, 3rem);
	--largeur-contenu: var(--wp--style--global--content-size, 720px);
	--largeur-large: var(--wp--style--global--wide-size, 1200px);
	--section: var(--wp--preset--spacing--80);

	--filet: color-mix(in oklab, var(--encre) 14%, transparent);
	/* Contour unique des blocs, filets et séparateurs (flat) : bleu nuit plein. */
	--contour: var(--encre);
	/* DA « carte » : liseret épais pour le contour des blocs, filet fin et
	   clair pour les séparations intérieures (comme les limites des
	   départements), repère carré rouge, aplat ciel. */
	--trait: 2.5px;
	--filet-fin: color-mix(in oklab, var(--encre) 22%, var(--blanc));
	--repere: 0.625rem;
	--anneau-focus: var(--terre);
}

/* ============================================================
   2. BASE
   ============================================================ */

html {
	scroll-padding-top: 6rem; /* l'en-tête collant ne masque pas les ancres */
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	margin-block: 0 0.5em;
}

p {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--duree-rapide) var(--ease-out);
}

/* Focus visible partout, au clavier (RGAA 10.7). */
:focus-visible {
	outline: 3px solid var(--anneau-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Le <main> reçoit le focus via le lien d'évitement : pas d'anneau sur tout le bloc. */
main:focus {
	outline: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.lien-evitement {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--encre);
	color: var(--papier);
	font-weight: 600;
	border-radius: var(--rayon-petit);
	transform: translateY(-200%);
}
.lien-evitement:focus {
	transform: none;
}

/* ============================================================
   3. GABARIT — gouttières, largeurs, alignements
   Le contenu de l'éditeur est rendu directement dans <main> :
   chaque bloc de premier niveau est centré à la largeur de
   contenu ; .alignwide et .alignfull s'élargissent.
   ============================================================ */

.site-contenu {
	padding-inline: var(--gouttiere);
	padding-block-end: var(--section);
}

.site-contenu > *,
.page-gabarit__contenu > *,
.page-gabarit__entete {
	max-width: var(--largeur-contenu);
	margin-inline: auto;
}

/* L'article des gabarits de page est un simple conteneur : ce sont ses
   enfants (en-tête, blocs) qui portent les largeurs. */
.site-contenu > .page-gabarit:not(.page-404) {
	max-width: none;
}

.site-contenu > .alignwide,
.page-gabarit__contenu > .alignwide {
	max-width: var(--largeur-large);
}

.site-contenu > .alignfull,
.page-gabarit__contenu > .alignfull {
	max-width: none;
	margin-inline: calc(-1 * var(--gouttiere));
}

/* Les sections pleine largeur reprennent la gouttière à l'intérieur. */
.alignfull.has-background,
.alignfull.wp-block-cover {
	padding-inline: var(--gouttiere);
}

.site-contenu--accueil {
	padding-block-end: 0;
}

/* Espacement vertical entre sections : géré par les compositions
   (classe .lam-section), pas par un margin global imprévisible. */
.lam-section {
	padding-block: var(--section);
	margin-block: 0;
}
/* Deux sections sans fond se suivent : leurs marges s'additionneraient. Après
   une section à fond (aplat marine…), la suivante garde son espace, sinon son
   contenu vient se coller contre l'aplat. */
.site-contenu > .lam-section:not(.has-background) + .lam-section:not(.has-background) {
	padding-block-start: 0;
}

/* ============================================================
   4. EN-TÊTE DE SITE — collant, sobre, filet au défilement
   ============================================================ */

.site-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--papier) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--contour);
}

.admin-bar .site-entete {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-entete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--largeur-large);
	margin-inline: auto;
	padding: 1rem var(--gouttiere);
}

.site-entete__marque {
	color: var(--encre);
	text-decoration: none;
	flex-shrink: 0;
}

.site-entete__menu,
.site-entete__nav > div > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-entete__nav a {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--encre);
	font-family: var(--police-titres);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(var(--terre), var(--terre)) no-repeat left bottom / 0 2px;
	transition: background-size var(--duree-base) var(--ease-out), color var(--duree-rapide);
}

.site-entete__nav a:hover,
.site-entete__nav .current-menu-item > a,
.site-entete__nav .current_page_item > a {
	background-size: 100% 2px;
}

.site-entete__nav .current-menu-item > a,
.site-entete__nav .current_page_item > a {
	font-weight: 700;
}

/* Dernier élément du menu = appel à l'action (classe CSS « bouton » sur
   l'élément de menu, champ « Classes CSS » des menus). */
.site-entete__nav .bouton > a {
	padding: 0.6rem 1.2rem;
	background: var(--encre);
	color: var(--papier);
	border-radius: var(--rayon-pilule);
}
.site-entete__nav .bouton > a:hover {
	background: var(--terre);
	color: var(--blanc);
}

.site-entete__bascule {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--encre);
	border-radius: var(--rayon-pilule);
	background: transparent;
	color: var(--encre);
	font: 600 1rem/1 var(--police-titres);
	cursor: pointer;
}

/* Icône hamburger dessinée en CSS : deux traits qui se croisent à l'ouverture. */
.site-entete__bascule-icone,
.site-entete__bascule-icone::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	transition: transform var(--duree-base) var(--ease-out);
}
.site-entete__bascule-icone {
	position: relative;
	transform: translateY(-3px);
}
.site-entete__bascule-icone::after {
	content: "";
	position: absolute;
	top: 6px;
}
.est-ouvert .site-entete__bascule-icone {
	transform: translateY(0) rotate(45deg);
}
.est-ouvert .site-entete__bascule-icone::after {
	transform: translateY(-6px) rotate(-90deg);
}

/* ============================================================
   5. PIED DE PAGE — aplat forêt
   ============================================================ */

.site-pied {
	background: var(--foret);
	color: var(--sable);
	padding: var(--section) var(--gouttiere) 2rem;
	margin-top: 0;
}

.site-pied a {
	color: var(--papier);
	text-decoration-color: color-mix(in oklab, var(--papier) 40%, transparent);
}
.site-pied a:hover {
	color: var(--braise);
}
.site-pied :focus-visible {
	outline-color: var(--braise);
}

.site-pied__grille {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 3rem;
	max-width: var(--largeur-large);
	margin-inline: auto;
}

.site-pied__mission {
	max-width: 32ch;
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--courant);
	color: var(--sable);
}

.site-pied__titre {
	margin-bottom: 1rem;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--braise);
}

.site-pied ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-pied li + li {
	margin-top: 0.5rem;
}

.site-pied address {
	font-style: normal;
	line-height: 1.8;
}

.site-pied__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 2rem;
	max-width: var(--largeur-large);
	margin: 4rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in oklab, var(--papier) 18%, transparent);
	font-size: var(--wp--preset--font-size--petit);
}

.site-pied__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
.site-pied__legal li + li {
	margin-top: 0;
}

.site-pied__copyright {
	margin: 0;
}

/* ============================================================
   6. MOTIFS
   ============================================================ */

/* Logotype : logo officiel en image SVG (un fichier par fond). */
.latelier-logo {
	display: block;
	width: auto;
	height: 3.6rem;
}
.site-pied .latelier-logo {
	height: 4.5rem;
}

/* Surtitre : petite capitale terre cuite, précédée d'un trait. */
.surtitre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	font-family: var(--police-titres);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--terre);
}
.surtitre::before {
	content: "";
	width: 2rem;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}
.has-text-align-center.surtitre {
	justify-content: center;
}
.has-foret-background-color .surtitre,
.wp-block-cover .surtitre {
	color: var(--braise);
}

/* Chapô : paragraphe d'introduction plus grand. */
.chapo,
.page-gabarit__chapo {
	font-size: var(--wp--preset--font-size--chapo);
	line-height: 1.5;
	color: var(--schiste);
	max-width: 60ch;
}
.has-foret-background-color .chapo,
.wp-block-cover .chapo {
	color: var(--sable);
}

/* Scie : rangée de toits en sheds, décor de transition entre sections. */
.lam-scie {
	height: 14px;
	margin-block: 0;
	background: var(--terre);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M0 14 28 0v14z'/%3E%3C/svg%3E") repeat-x left bottom / 28px 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M0 14 28 0v14z'/%3E%3C/svg%3E") repeat-x left bottom / 28px 14px;
}

/* ============================================================
   7. BLOCS NATIFS
   ============================================================ */

/* Boutons : pilule terre cuite (theme.json), variantes contour et clair. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border-radius: var(--rayon-pilule);
	text-decoration: none;
	transition: background-color var(--duree-rapide) var(--ease-out), color var(--duree-rapide) var(--ease-out), transform var(--duree-base) var(--ease-out);
}
.wp-block-button__link::after {
	content: "→";
	transition: transform var(--duree-base) var(--ease-out);
}
.wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.wp-block-button.is-style-contour .wp-block-button__link {
	background: transparent;
	color: var(--encre);
	box-shadow: inset 0 0 0 1.5px var(--encre);
}
.wp-block-button.is-style-contour .wp-block-button__link:hover {
	background: var(--encre);
	color: var(--papier);
}

.wp-block-button.is-style-clair .wp-block-button__link {
	background: var(--papier);
	color: var(--encre);
}
.wp-block-button.is-style-clair .wp-block-button__link:hover {
	background: var(--braise);
	color: var(--encre);
}

/* Sur fond sombre, le contour passe en clair. */
.has-foret-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.has-encre-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-contour .wp-block-button__link {
	color: var(--papier);
	box-shadow: inset 0 0 0 1.5px var(--papier);
}
.has-foret-background-color .wp-block-button.is-style-contour .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-contour .wp-block-button__link:hover {
	background: var(--papier);
	color: var(--encre);
}

/* Liens sur fond sombre. */
.has-foret-background-color a:not(.wp-block-button__link),
.has-encre-background-color a:not(.wp-block-button__link) {
	color: var(--papier);
}
.has-foret-background-color :focus-visible,
.has-encre-background-color :focus-visible,
.wp-block-cover :focus-visible {
	outline-color: var(--braise);
}

/* Images. */
.wp-block-image.is-style-arrondie img,
.wp-block-image.is-style-arrondie {
	border-radius: var(--rayon-grand);
	overflow: hidden;
}
.wp-block-image figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--schiste);
}

/* Groupe « carte » : surface blanche, filet léger, coins arrondis. */
.wp-block-group.is-style-carte {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--blanc);
	border: 1px solid var(--contour);
	border-radius: var(--rayon-carte);
}
.wp-block-group.is-style-carte > :last-child {
	margin-bottom: 0;
}

/* Listes et séparateurs. */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--contour);
	margin-block: var(--wp--preset--spacing--70);
}

/* Cover : texte clair, voile forêt par défaut. */
.wp-block-cover {
	color: var(--papier);
}
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
	color: var(--papier);
}

/* ============================================================
   8. COMPOSITIONS DU THÈME
   ============================================================ */

/* — Héro d'accueil (cover pleine largeur) — */
.lam-hero.wp-block-cover {
	min-height: min(88vh, 760px);
	align-items: flex-end;
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
}
.lam-hero .wp-block-cover__inner-container {
	max-width: var(--largeur-large);
	margin-inline: auto;
	width: 100%;
}
/* La mise en page « contrainte » centre chaque enfant séparément (avec
   !important) : dans le héro, tout s'aligne à gauche sur la même ligne. */
.lam-hero .wp-block-cover__inner-container > * {
	max-width: none;
	margin-inline: 0 !important;
}
.lam-hero h1 {
	max-width: 24ch;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
}
.lam-hero h1 em {
	font-style: normal;
	color: var(--braise);
}
.lam-hero .chapo {
	max-width: 46ch;
}

/* Film de présentation pleine largeur (main.js) : vignette hébergée sur le
   site, remplacée en fondu par le lecteur YouTube quand il joue. */
.lam-film {
	position: relative;
	overflow: hidden;
	/* Le film est tourné en format cinéma (bandes noires incrustées dans
	   l'image 16/9) : le bloc prend ce format et le lecteur, plus haut, est
	   recadré par le débordement masqué. */
	aspect-ratio: 2.4 / 1;
	background: var(--encre);
	container-type: size;
}
.lam-film > a,
.lam-film > a img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.lam-film > a img {
	object-fit: cover;
}
.lam-film iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Toujours 16/9 (sinon YouTube ajoute ses propres bandes), aussi large que
	   le bloc : ses bandes noires haute et basse sortent du cadre. */
	width: 100cqw;
	height: 56.25cqw;
	translate: -50% -50%;
	border: 0;
	opacity: 0;
	transition: opacity 1.2s var(--ease-out);
}
.lam-film.est-prete iframe {
	opacity: 1;
}
/* Pas de lecture automatique (ordinateur comme mobile) : vignette du film
   (format cinéma) avec un bouton lecture ; le clic lance la vidéo avec le son
   dans le bloc. Une fois lancée, l'iframe recouvre la vignette. */
.lam-film {
	cursor: pointer;
}
.lam-film.est-prete > a::after {
	display: none;
}
.lam-film:not(.est-prete) > a::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: clamp(3.5rem, 6vw, 5rem);
	height: clamp(3.5rem, 6vw, 5rem);
	border-radius: 0;
	background: rgb(255 255 255 / 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a1c55'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 42% no-repeat;
	transition: background-color var(--duree-base) var(--ease-out);
}
.lam-film:not(.est-prete) > a:hover::after,
.lam-film:not(.est-prete) > a:focus-visible::after {
	background-color: var(--blanc);
}
.lam-film:not(.est-prete) > a:focus-visible {
	outline: 3px solid var(--anneau-focus);
	outline-offset: -3px;
}

/* — Chiffres clés : cartes douces, contenu centré — */
.lam-chiffres .lam-chiffre {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	text-align: center;
	padding: 1.75rem 1.25rem;
	background: var(--blanc);
	border: 1px solid var(--contour);
	border-radius: var(--rayon-carte);
}
.lam-chiffre__valeur {
	font-variant-numeric: tabular-nums; /* le compteur ne fait pas bouger la mise en page */
	margin: 0;
	font-family: var(--police-titres);
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--terre);
}
.lam-chiffre__libelle {
	margin: 0;
	max-width: 22ch;
	color: var(--schiste);
}

/* — Grille des marques — */
.lam-marques .lam-marque {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 15rem;
	border-width: 1.5px;
	transition: transform var(--duree-base) var(--ease-out), box-shadow var(--duree-base) var(--ease-out), border-color var(--duree-base);
}
.lam-marques .lam-marque:hover,
.lam-marques .lam-marque:focus-within {
	border-color: var(--marque-contour, var(--terre));
	box-shadow: inset 0 0 0 1px var(--marque-contour, var(--terre));
}
.lam-marques .lam-marque:hover .lam-marque__domaine,
.lam-marques .lam-marque:focus-within .lam-marque__domaine {
	color: var(--marque-texte, var(--terre-700));
}

/* Couleur principale de chaque marque au survol (contour + lien), reconnue
   par son logo. Contour : la couleur de la marque ; lien : la même, ou sa
   version foncée quand la couleur claire ne serait pas lisible (AA). */
.lam-marque:has(img[src*="aerocap"]) { --marque-contour: #ec1d24; --marque-texte: #c8151c; }
.lam-marque:has(img[src*="serres-la-francaise"]) { --marque-contour: #3fae4f; --marque-texte: #2e7031; }
.lam-marque:has(img[src*="c2m-chapiteaux"]) { --marque-contour: #8f3c85; --marque-texte: #8f3c85; }
.lam-marque:has(img[src*="mosqity"]) { --marque-contour: #e3d900; --marque-texte: #14283c; }
.lam-marque:has(img[src*="cheminarte"]) { --marque-contour: #d53236; --marque-texte: #d53236; }
.lam-marque:has(img[src*="ofresh"]) { --marque-contour: #7fc6da; --marque-texte: #1f7a92; }
.lam-marque > * {
	margin-block: 0;
}
/* Logo de la marque, centré. Taille uniformisée à surface égale : un logo
   large serait sinon écrasé par un logo carré de même hauteur. Hauteur =
   4,8rem / √(largeur/hauteur), réglée par logo ; décoratif (alt vide), le nom
   suit dans le titre. Hauteur fixe : pas de saut de mise en page. */
.lam-marque__logo {
	margin: 0 0 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 3.4rem;
}
.lam-marque__logo img {
	display: block;
	height: 2.4rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
/* Logos en couleur (demande de Guillaume, 06/10 : plus de noir et blanc au repos).
   Les logos d'une seule couleur (C2M Chapiteaux, Mosqity, Chemin'arte, O'Fresh) sont
   publiés en blanc ou en gris par les marques : on les repeint dans la couleur de la
   marque par un masque CSS sur ::after, l'image restant en place, transparente, pour
   le texte de remplacement et la mise en page. */
.lam-marque__logo {
	position: relative;
}
.lam-marque:has(img[src*="c2m-chapiteaux"]) .lam-marque__logo::after,
.lam-marque:has(img[src*="mosqity"]) .lam-marque__logo::after,
.lam-marque:has(img[src*="cheminarte"]) .lam-marque__logo::after,
.lam-marque:has(img[src*="ofresh"]) .lam-marque__logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--logo-couleur, var(--marque-contour));
	-webkit-mask: var(--logo-masque) center / auto var(--logo-hauteur) no-repeat;
	mask: var(--logo-masque) center / auto var(--logo-hauteur) no-repeat;
	pointer-events: none;
}
.lam-marque:has(img[src*="c2m-chapiteaux"]) { --logo-masque: url("../img/marques/c2m-chapiteaux.svg"); --logo-hauteur: 2.09rem; }
/* Jaune Mosqity illisible sur fond clair : le logo prend le bleu nuit de la marque. */
.lam-marque:has(img[src*="mosqity"]) { --logo-masque: url("../img/marques/mosqity.svg"); --logo-hauteur: 3.26rem; --logo-couleur: #14283c; }
.lam-marque:has(img[src*="cheminarte"]) { --logo-masque: url("../img/marques/cheminarte.svg"); --logo-hauteur: 1.92rem; }
.lam-marque:has(img[src*="ofresh"]) { --logo-masque: url("../img/marques/ofresh.svg"); --logo-hauteur: 2.39rem; --logo-couleur: #1f8fb3; }
/* Même liste dans :has() que la règle de base : spécificité supérieure. */
.lam-marque:has(img[src*="c2m-chapiteaux"], img[src*="mosqity"], img[src*="cheminarte"], img[src*="ofresh"]) .lam-marque__logo img {
	opacity: 0;
}
@media (forced-colors: active) {
	.lam-marque__logo::after {
		display: none;
	}
	.lam-marque__logo img {
		opacity: 1 !important;
	}
}
.lam-marque__logo img[src*="aerocap"] { height: 1.92rem; }
.lam-marque__logo img[src*="serres-la-francaise"] { height: 2.12rem; }
.lam-marque__logo img[src*="c2m-chapiteaux"] { height: 2.09rem; }
.lam-marque__logo img[src*="mosqity"] { height: 3.26rem; }
.lam-marque__logo img[src*="cheminarte"] { height: 1.92rem; }
.lam-marque__logo img[src*="ofresh"] { height: 2.39rem; }
.lam-marque__metier {
	margin: 0;
	font-family: var(--police-titres);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--schiste);
}
.lam-marque h3 {
	margin: 0.25rem 0 0;
}
.lam-marque h3 a {
	color: var(--encre);
	text-decoration: none;
}
/* Toute la carte est cliquable : le lien du titre s'étend sur la carte. */
.lam-marque h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.lam-marque h3 a:focus-visible {
	outline: none;
}
.lam-marque:has(h3 a:focus-visible) {
	outline: 3px solid var(--anneau-focus);
	outline-offset: 3px;
}
.lam-marque__domaine {
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--terre);
	font-weight: 600;
	transition: color var(--duree-base);
}
.lam-marque__domaine::after {
	content: " ↗";
}
.lam-marques__societe {
	margin-top: var(--wp--preset--spacing--70);
}

/* — Valeurs — */
.lam-valeur__numero {
	margin: 0 0 1.5rem;
	font-family: var(--police-titres);
	font-weight: 700;
	color: var(--terre);
}

/* — Frise chronologique — */
.lam-frise {
	position: relative;
	padding-left: 2rem;
	border-left: 2px solid var(--contour);
}
.lam-frise > .wp-block-group {
	position: relative;
	padding-bottom: 2.5rem;
}
.lam-frise > .wp-block-group:last-child {
	padding-bottom: 0;
}
.lam-frise > .wp-block-group::before {
	content: "";
	position: absolute;
	left: calc(-2rem - 7px);
	top: 0.35rem;
	width: 12px;
	height: 12px;
	border-radius: 0;
	background: var(--terre);
	box-shadow: 0 0 0 4px var(--papier);
}
.lam-frise__annee {
	margin: 0 0 0.25rem;
	font-family: var(--police-titres);
	font-size: var(--wp--preset--font-size--titre-carte);
	font-weight: 800;
	color: var(--terre);
}

/* — Offres d'emploi — */
.lam-offres {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--contour);
}
.lam-offres li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 2rem;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--contour);
}
.lam-offres strong {
	font-family: var(--police-titres);
	font-size: var(--wp--preset--font-size--titre-carte);
	font-weight: 700;
	line-height: 1.2;
}
.lam-offres em {
	font-style: normal;
	padding: 0.3rem 0.8rem;
	background: var(--sauge);
	border-radius: var(--rayon-pilule);
	font-size: var(--wp--preset--font-size--petit);
	white-space: nowrap;
}

/* — Bandeau d'appel (forêt) — */
.lam-bandeau {
	border-radius: var(--rayon-grand);
	padding: clamp(2rem, 6vw, 4.5rem);
	overflow: hidden;
}
.lam-bandeau.alignfull {
	border-radius: 0;
}

/* — Photo + texte — */
.lam-duo .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* ============================================================
   9. GABARITS DE PAGE
   ============================================================ */

.page-gabarit__entete {
	max-width: var(--largeur-large);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}
.page-gabarit__titre {
	max-width: 18ch;
	font-weight: 800;
	letter-spacing: -0.025em;
}
.page-gabarit__chapo {
	margin-top: 1.5rem;
}

/* Les .lam-section gèrent leur espacement par leur padding : on ne leur ajoute
   pas la marge inter-blocs (sinon padding + marge se cumulent entre sections). */
.page-gabarit__contenu > .alignwide:not(.lam-section),
.page-gabarit__contenu > .alignfull:not(.lam-section) {
	margin-block: var(--wp--preset--spacing--70);
}

/* ------------------------------------------------------------
   Harmonisation des gabarits de page.
   1) Une seule respiration sous le titre : le padding-bas de l'en-tête
      suffit ; le premier bloc de contenu ne rajoute PAS son espacement de
      section (sauf s'il a un fond, où il garde son padding interne).
   2) Même bord gauche (conteneur large 1200) pour le titre et le contenu
      d'une page à l'autre.
   ------------------------------------------------------------ */
.page-gabarit__entete {
	padding-block-end: var(--wp--preset--spacing--60);
}
.page-gabarit__contenu > :first-child {
	margin-top: 0;
}
.page-gabarit__contenu > .lam-section:not(.has-background):first-child {
	padding-block-start: 0;
}
/* Deux sections qui se suivent dans une page : la 2e ne rajoute pas son
   padding-haut (comme sous .site-contenu) → un seul espace inter-sections. */
.page-gabarit__contenu > .lam-section:not(.has-background) + .lam-section:not(.has-background) {
	padding-block-start: 0;
}

/* Page Actualités (gabarit index) : chapô, grille et pagination calés sur la
   largeur large, comme le titre — au lieu de la pleine largeur. */
.site-contenu > .page-gabarit > .chapo,
.site-contenu > .page-gabarit > .lam-actus-grille,
.site-contenu > .page-gabarit > .navigation {
	max-width: var(--largeur-large);
	margin-inline: auto;
}

/* Pages de texte (mentions légales, confidentialité) : la colonne de lecture
   (720) s'aligne à gauche SOUS le titre large (même bord gauche que partout),
   au lieu d'être centrée au milieu de la page. */
.page-id-10 .page-gabarit__contenu,
.page-id-11 .page-gabarit__contenu {
	max-width: var(--largeur-large);
	margin-inline: auto;
}
.page-id-10 .page-gabarit__contenu > *,
.page-id-11 .page-gabarit__contenu > * {
	margin-inline: 0;
}

.page-404 {
	max-width: var(--largeur-contenu);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--90);
}

.liste-contenus {
	max-width: var(--largeur-contenu);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.liste-contenus li {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--contour);
}

/* ============================================================
   10. PETITS ÉCRANS
   ============================================================ */

@media (max-width: 960px) {
	.site-pied__grille {
		grid-template-columns: 1fr 1fr;
	}
	.site-pied__identite {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	.site-entete__bascule {
		display: inline-flex;
	}

	.site-entete__nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto;
		padding: 1rem var(--gouttiere) 2rem;
		background: var(--papier);
		border-bottom: 1px solid var(--contour);
	}
	.est-ouvert .site-entete__nav {
		display: block;
	}
	.site-entete__menu,
	.site-entete__nav > div > ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.site-entete__nav li {
		width: 100%;
		border-bottom: 1px solid var(--contour);
	}
	.site-entete__nav a {
		display: block;
		padding-block: 0.9rem;
		font-size: 1.25rem;
	}
	.site-entete__nav .bouton {
		border-bottom: 0;
		margin-top: 1rem;
	}
	.site-entete__nav .bouton > a {
		display: inline-block;
	}

	.lam-hero.wp-block-cover {
		min-height: 80vh;
	}
}

@media (max-width: 560px) {
	.site-pied__grille {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   10 bis. ACTUALITÉS — carrousel (accueil) et grille (page Actualités)
   ============================================================ */

/* Carte d'actualité : même carte en bloc (composition) et en PHP (index.php). */
.lam-actu {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--blanc);
	border: 1px solid var(--contour);
	border-radius: var(--rayon-carte);
	overflow: hidden;
}
.lam-actu > * {
	margin-block: 0;
	padding-inline: 1.5rem;
}
.lam-actu > .lam-actu__image,
.lam-actu > .wp-block-post-featured-image {
	padding-inline: 0;
	margin-bottom: 1.25rem;
}
.lam-actu__image img,
.lam-actu .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center top; /* cadrage haut : ne coupe pas les visages */
}
.lam-actu > :first-child:not(.lam-actu__image, .wp-block-post-featured-image) {
	padding-top: 1.5rem;
}
.lam-actu__date {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--schiste);
}
.lam-actu__titre,
.lam-actu .wp-block-post-title {
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--titre-carte);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.lam-actu__titre a,
.lam-actu .wp-block-post-title a {
	color: var(--encre);
	text-decoration: none;
}
.lam-actu__titre a:hover,
.lam-actu .wp-block-post-title a:hover {
	color: var(--terre);
}
.lam-actu__extrait,
.lam-actu .wp-block-post-excerpt {
	margin-top: 0.75rem;
	color: var(--schiste);
}
.lam-actu .wp-block-post-excerpt__excerpt {
	margin: 0;
}
/* Actualité sans image : logo du groupe sur fond sombre. */
.lam-actu__vignette {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--encre);
}
.lam-actu__vignette img,
.lam-actu .lam-actu__vignette img {
	width: 45%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}
/* « Relayé · CCI Ardèche » à côté de la date. */
.lam-actu__relai {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--rayon-pilule);
	background: var(--filet);
	color: var(--encre);
	font-size: 0.8125rem;
	white-space: nowrap;
}
/* Extrait cité d'un post relayé. */
.wp-block-quote.lam-relai {
	margin-block: 1.5rem;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--terre);
	background: var(--wp--preset--color--sable, #f4f1ea);
	border-radius: 0;
}
.wp-block-quote.lam-relai cite {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--petit);
	font-style: normal;
	color: var(--schiste);
}

.lam-actu__lien,
.lam-actu__boutons {
	margin-top: auto;
	padding-top: 1.25rem;
	padding-bottom: 1.5rem;
}
.lam-actu__lien a {
	font-weight: 600;
}
.lam-actu__lien a::after {
	content: " ↗";
}

/* Cartes d'actualité (page Actualités ET carrousel de l'accueil) : carte
   entièrement cliquable via le lien du titre étiré, avec léger soulèvement et
   zoom de l'image au survol / focus clavier. Les liens « Voir sur LinkedIn »
   (externes) passent au-dessus de l'overlay pour rester cliquables. */
.lam-actu {
	position: relative;
	cursor: pointer;
	transition: transform var(--duree-base) var(--ease-out), box-shadow var(--duree-base) var(--ease-out), border-color var(--duree-base) var(--ease-out);
}
.lam-actu__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.lam-actu__lien,
.lam-actu__boutons {
	position: relative;
	z-index: 1;
}
.lam-actu__image img,
.lam-actu .wp-block-post-featured-image img {
	transition: transform var(--duree-base) var(--ease-out);
}
.lam-actu:hover,
.lam-actu:focus-within {
	border-color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--encre);
}
.lam-actu:hover .lam-actu__image img,
.lam-actu:focus-within .lam-actu__image img,
.lam-actu:hover .wp-block-post-featured-image img,
.lam-actu:focus-within .wp-block-post-featured-image img {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.lam-actu,
	.lam-actu__image img,
	.lam-actu .wp-block-post-featured-image img {
		transition: none;
	}
	.lam-actu:hover,
	.lam-actu:focus-within {
		transform: none;
	}
	.lam-actu:hover .lam-actu__image img,
	.lam-actu:focus-within .lam-actu__image img,
	.lam-actu:hover .wp-block-post-featured-image img,
	.lam-actu:focus-within .wp-block-post-featured-image img {
		transform: none;
	}
}

/* Carrousel : défilement horizontal natif avec aimantation (souris, doigt,
   clavier) ; les boutons précédent/suivant sont ajoutés par main.js. Sans
   JavaScript, la liste reste entièrement accessible au défilement. */
.lam-actus__liste {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	/* padding vertical : laisse respirer le soulèvement + l'ombre au survol
	   (overflow-x:auto force overflow-y:auto, qui rognerait sinon le haut). */
	padding: 0.75rem 0 1.25rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(17rem, calc((100% - 3rem) / 3));
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}
.lam-actus__liste > li {
	display: flex;
	margin: 0; /* annule l'espacement « flow » entre éléments : sinon les cartes se décalent */
	scroll-snap-align: start;
}
.lam-actus__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
}
.lam-actus__nav[hidden] {
	display: none;
}
.lam-actus__nav button {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--encre);
	border-radius: var(--rayon-pilule);
	background: transparent;
	color: var(--encre);
	font: inherit;
	font-size: 1.1rem;
	cursor: pointer;
}
.lam-actus__nav button:hover:not(:disabled) {
	background: var(--encre);
	color: var(--papier);
}
.lam-actus__nav button:disabled {
	opacity: 0.35;
	cursor: default;
}
.lam-actualites__suite {
	margin-top: var(--wp--preset--spacing--50);
}

/* Carrousel de l'accueil : cartes compactes et de même hauteur (la ligne de
   la grille étire chaque carte ; titre et extrait coupés à un nombre de
   lignes fixe, lien LinkedIn discret en pied de carte). */
.lam-actus .lam-actu > * {
	padding-inline: 1.25rem;
}
.lam-actus .lam-actu .wp-block-post-featured-image {
	padding-inline: 0;
	margin-bottom: 1rem;
}
/* Le bloc écrit aspect-ratio en style en ligne : !important nécessaire. */
.lam-actus .lam-actu .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9 !important;
}
.lam-actus .lam-actu .lam-actu__vignette {
	aspect-ratio: 16 / 9;
	margin-bottom: 1rem;
}
.lam-actus .lam-actu .lam-actu__vignette img {
	width: 38%;
	aspect-ratio: auto !important;
}
.lam-actus .lam-actu .wp-block-post-title {
	font-size: 1.125rem;
	min-height: 2.4em; /* deux lignes réservées : les cartes restent alignées */
}
/* Coupe à deux lignes portée par le lien (le titre reçoit un display du cœur). */
.lam-actus .lam-actu .wp-block-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.lam-actus .lam-actu .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}
.lam-actus .lam-actu__boutons {
	padding-top: 0.75rem;
	padding-bottom: 1.1rem;
}
.lam-actus .lam-actu__linkedin .wp-block-button__link {
	display: inline;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	color: var(--terre);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.lam-actus .lam-actu__linkedin .wp-block-button__link::after {
	content: " ↗";
	transform: none;
}
.lam-actus .lam-actu__linkedin .wp-block-button__link:hover {
	background: none;
	color: var(--terre-700);
}

/* Page Actualités : grille. */
.lam-actus-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--60);
}
/* Article seul : l'en-tête suit la colonne de texte (sur les pages, il est
   large) ; titre un cran plus petit, les titres d'actualité sont longs. */
.single-post .page-gabarit__entete {
	max-width: var(--largeur-contenu);
}
.single-post .page-gabarit__titre {
	max-width: none;
	font-size: var(--wp--preset--font-size--titre-section);
}

/* Article seul : image dans la colonne de texte, hauteur plafonnée (les
   photos LinkedIn sont souvent en portrait), boutons côte à côte. */
.page-gabarit__contenu > .lam-actu-seule__image {
	margin: 0 auto var(--wp--preset--spacing--60);
	text-align: center;
}
.lam-actu-seule__image img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: min(75vh, 40rem);
	height: auto;
	border-radius: var(--rayon-carte);
}
.page-gabarit__contenu > .lam-actu-seule__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 782px) {
	.lam-actus__liste {
		grid-auto-columns: 82%;
	}
}

/* ============================================================
   10 ter. ÉQUIPE — portraits à égalité (page Le groupe)
   ============================================================ */

/* Pas de hiérarchie : mêmes tailles, ordre alphabétique, une seule ligne
   sur grand écran. Photos LinkedIn hétérogènes (fonds, lumière) : passées en
   noir et blanc pour les harmoniser, couleur au survol ou au focus. */
.lam-equipe .lam-equipe__grille {
	/* Rangées centrées (5 puis 4…) plutôt qu'une grille : la dernière rangée
	   ne reste pas calée à gauche, aucune place n'est « en tête ». */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 1.5rem;
	margin-top: var(--wp--preset--spacing--60);
}
.lam-equipe .lam-membre {
	flex: 0 1 15rem;
	min-width: 9rem;
}
@media (max-width: 782px) {
	.lam-equipe .lam-membre {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}
/* Apparition au défilement (classes posées par main.js : sans JS, tout est
   visible d'emblée). */
.lam-equipe__grille.est-anime .lam-membre {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.lam-equipe__grille.est-anime .lam-membre.est-visible {
	opacity: 1;
	transform: none;
}
.lam-membre {
	display: flex;
	flex-direction: column;
}
.lam-membre > * {
	margin-block: 0;
}
.lam-membre__photo {
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: var(--rayon-carte);
	background: var(--sable);
}
.lam-membre__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--duree-base) var(--ease-out), transform var(--duree-base) var(--ease-out);
}
.lam-membre:hover .lam-membre__photo img,
.lam-membre:focus-within .lam-membre__photo img {
	filter: none;
	transform: scale(1.03);
}
.lam-membre__nom {
	margin-top: 0;
	font-size: 1.125rem;
	line-height: 1.2;
}
.lam-membre__poste {
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--schiste);
}
.lam-membre__lien {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
}
.lam-membre__lien a::after {
	content: " ↗";
}

/* Mission, écrite en entier (demande de Guillaume, 06/10). */
.lam-mission__texte {
	max-width: 52rem;
	margin-inline: auto;
	font-family: var(--police-titres);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);
	font-style: italic; /* vraie italique (fichier dédié, graisse 700), pas une inclinaison simulée */
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--encre);
}
.lam-mission__vision {
	margin-top: 1.25rem;
	color: var(--schiste);
}

/* Marques regroupées par société. */
.lam-marques__societe-titre {
	margin-top: var(--wp--preset--spacing--60);
	font-size: 1.25rem;
}
.lam-marques__societe-titre span {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--police-texte);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 400;
	color: var(--schiste);
}
.lam-marques__societe-titre + .lam-marques__grille {
	margin-top: 1.25rem;
}
/* Label Service France Garanti « à cheval » sur le coin HAUT-DROIT de la photo
   de la section « Nos engagements » (toiture de l'atelier), façon macaron OFG.
   La photo reste arrondie (border-radius porté par l'img) mais la figure ne rogne
   plus (overflow visible) pour laisser le label déborder du coin. Texte de
   remplacement pour les lecteurs d'écran. */
.wp-block-image.lam-sfg {
	position: relative;
	overflow: visible;
}
.wp-block-image.lam-sfg::after {
	content: "" / "Label Service France Garanti";
	position: absolute;
	top: -2.25rem;
	right: -1.5rem;
	z-index: 2;
	width: clamp(4rem, 7vw, 6rem);
	aspect-ratio: 228 / 278;
	background: url("../img/service-france-garanti.webp") center / contain no-repeat;
	pointer-events: none;
}
@supports not (content: "" / "") {
	.wp-block-image.lam-sfg::after {
		content: "";
	}
}
/* Mobile : le macaron SFG rentre DANS la photo (plus de débord → plus de scroll
   horizontal) et réduit un peu. */
@media (max-width: 600px) {
	.wp-block-image.lam-sfg::after {
		top: auto;
		bottom: 0.6rem;
		right: 0.6rem;
		width: clamp(3.25rem, 13vw, 4.5rem);
	}
}

/* Label Origine France Garantie « à cheval » sur le coin haut-gauche des
   cartes certifiées (Aerocap, Serres La Française) : pastille en débord posée
   sur l'angle (la carte ne rogne pas, pas d'overflow). Texte de remplacement
   pour les lecteurs d'écran. */
.lam-marques .lam-marque:has(img[src*="aerocap"])::before,
.lam-marques .lam-marque:has(img[src*="serres-la-francaise"])::before {
	content: "" / "Label Origine France Garantie";
	position: absolute;
	top: -1.25rem;
	left: 1.75rem;
	z-index: 2;
	width: 3.5rem;
	aspect-ratio: 150 / 143;
	background: url("../img/origine-france-garantie.webp") center / contain no-repeat;
	pointer-events: none;
}
@supports not (content: "" / "") {
	.lam-marques .lam-marque:has(img[src*="aerocap"])::before,
	.lam-marques .lam-marque:has(img[src*="serres-la-francaise"])::before {
		content: "";
	}
}
/* Zone de survol réelle posée sur le macaron OFG (ajoutée en JS) : affiche
   l'infobulle « Origine France Garantie » (title natif) au survol. Même
   emplacement que le macaron, au-dessus du lien de carte (z-index 3). */
.lam-marque .lam-ofg {
	position: absolute;
	top: -1.25rem;
	left: 1.75rem;
	z-index: 3;
	width: 3.5rem;
	aspect-ratio: 150 / 143;
	cursor: default;
}
/* Infobulle instantanée « Origine France Garantie » au-dessus du macaron. */
.lam-marque .lam-ofg::after {
	content: "Origine France Garantie";
	position: absolute;
	bottom: calc(100% + 0.45rem);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--encre);
	color: var(--blanc);
	padding: 0.35rem 0.6rem;
	border-radius: var(--rayon-petit);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
}
.lam-marque .lam-ofg:hover::after,
.lam-marque .lam-ofg:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* Cartes de même largeur, rangées centrées : les 4 marques de L'Atelier Maison
   tiennent sur une ligne sur grand écran, les 2 d'Efydis gardent la même taille,
   centrées dessous. La grille de l'éditeur est remplacée par un flex. */
.lam-marques .lam-marques__grille.is-layout-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}
.lam-marques .lam-marques__grille > .lam-marque {
	flex: 0 1 calc((100% - 3 * 1.25rem) / 4);
	min-width: 0;
	margin: 0;
}
@media (max-width: 1024px) {
	.lam-marques .lam-marques__grille > .lam-marque {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}
@media (max-width: 600px) {
	.lam-marques .lam-marques__grille > .lam-marque {
		flex-basis: 100%;
	}
}
.lam-marques .lam-marques__societe-titre {
	text-align: center;
}

/* Pages légales : lecture confortable. */
.lam-legal h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: 1.375rem;
}
.lam-legal h2:first-child {
	margin-top: 0;
}

/* Partenaires institutionnels : logos en couleur, à hauteur égale. */
.lam-partenaires__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 3rem;
	margin-top: var(--wp--preset--spacing--60);
}
.lam-partenaires__logos .wp-block-image {
	margin: 0;
}
.lam-partenaires .chapo {
	margin-inline: auto;
}
.lam-partenaires__logos img {
	/* Les logos fournis en JPG ont un fond blanc : on le fond dans celui de la page. */
	mix-blend-mode: multiply;
	display: block;
	width: auto;
	height: 3.5rem;
	max-width: 11rem;
	object-fit: contain;
}

/* Vidéos des valeurs : vignette hébergée sur le site, le lecteur YouTube
   (youtube-nocookie) ne se charge qu'au clic (main.js). Sans JS, le lien
   ouvre la vidéo sur YouTube. */
.lam-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--60);
}
.lam-video {
	margin: 0;
}
.lam-video__lien,
.lam-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--rayon-carte);
	overflow: hidden;
	background: var(--encre);
}
.lam-video__lien {
	position: relative;
}
.lam-video__lien img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duree-base) var(--ease-out);
}
.lam-video__lecture {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 3.5rem;
	height: 3.5rem;
	translate: -50% -50%;
	border-radius: 0;
	background: var(--terre);
	transition: transform var(--duree-base) var(--ease-out);
}
.lam-video__lecture::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 0.6rem 0 0.6rem 1rem;
	border-color: transparent transparent transparent #fff;
}
.lam-video__lien:hover img,
.lam-video__lien:focus-visible img {
	transform: scale(1.04);
}
.lam-video__lien:hover .lam-video__lecture,
.lam-video__lien:focus-visible .lam-video__lecture {
	transform: scale(1.1);
}
.lam-video figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--schiste);
}
.lam-video figcaption strong {
	display: block;
	font-family: var(--police-titres);
	font-size: 1.0625rem;
	color: var(--encre);
}

/* Fenêtre surgissante des vidéos (main.js). */
.lam-lightbox {
	width: min(90vw, calc(80vh * 16 / 9), 72rem);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.lam-lightbox::backdrop {
	background: rgb(10 14 24 / 0.85);
	backdrop-filter: blur(3px);
}
.lam-lightbox[open] {
	animation: lam-lightbox-entree 0.25s ease-out;
}
@keyframes lam-lightbox-entree {
	from { opacity: 0; transform: scale(0.96); }
}
.lam-lightbox__cadre {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 0;
	overflow: hidden;
}
.lam-lightbox__cadre iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.lam-lightbox__fermer {
	position: absolute;
	top: -2.75rem;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 0;
	background: rgb(255 255 255 / 0.15);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.lam-lightbox__fermer:hover,
.lam-lightbox__fermer:focus-visible {
	background: rgb(255 255 255 / 0.3);
}
@media (prefers-reduced-motion: reduce) {
	.lam-lightbox[open] { animation: none; }
}

/* La presse en parle : une carte par article. */
.lam-presse {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.25rem;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}
.lam-presse li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--contour);
	border-radius: var(--rayon-carte);
	background: #fff;
}
.lam-presse__media {
	font-family: var(--police-titres);
	font-weight: 700;
	font-size: 1.0625rem;
}
.lam-presse__date {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--schiste);
}
.lam-presse p {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}
.lam-presse p.lam-presse__titre {
	margin: 0.25rem 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}
.lam-presse a,
.lam-presse audio {
	margin-top: auto;
}
.lam-presse audio {
	width: 100%;
}

/* ------------------------------------------------------------
   Page « La presse en parle » (page-id-115) : coupures de presse
   façon journal — blocs à angles droits (non arrondis), typographie
   serif « presse papier », texte justifié en colonnes, fond papier.
   ------------------------------------------------------------ */
.page-id-115 .lam-presse li {
	position: relative;
	border-radius: 0;
	border: 1px solid var(--encre);
	background: #fbf8f1;
	padding: 1.5rem 1.5rem 1.375rem;
	cursor: pointer;
	transition: transform var(--duree-base) var(--ease-out), box-shadow var(--duree-base) var(--ease-out);
}
/* Carte entièrement cliquable : le lien « Lire l'article » s'étire sur toute la
   coupure (lien fantôme). Léger soulèvement au survol / focus clavier. */
.page-id-115 .lam-presse a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.page-id-115 .lam-presse li:hover,
.page-id-115 .lam-presse li:focus-within {
	box-shadow: inset 0 0 0 1px var(--encre);
}
@media (prefers-reduced-motion: reduce) {
	.page-id-115 .lam-presse li {
		transition: none;
	}
	.page-id-115 .lam-presse li:hover,
	.page-id-115 .lam-presse li:focus-within {
		transform: none;
	}
}
.page-id-115 .lam-presse li > * {
	font-family: Georgia, "Times New Roman", "Nimbus Roman No9 L", serif;
}
.page-id-115 .lam-presse__media {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--encre);
}
.page-id-115 .lam-presse__date {
	font-style: italic;
}
.page-id-115 .lam-presse p.lam-presse__titre {
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 0.35rem;
}
.page-id-115 .lam-presse p:not(.lam-presse__titre) {
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: justify;
	hyphens: auto;
}
.page-id-115 .lam-presse p:not(.lam-presse__titre)::first-letter {
	float: left;
	font-size: 2.4em;
	line-height: 0.82;
	font-weight: 700;
	padding: 0.04em 0.1em 0 0;
}
.page-id-115 .lam-presse a {
	font-variant: small-caps;
	letter-spacing: 0.03em;
	font-weight: 700;
}

/* Contacts des services. */
.lam-services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem 2rem;
	margin: var(--wp--preset--spacing--50) 0 0;
}
.lam-services div {
	padding-top: 0.75rem;
	border-top: 2px solid var(--contour);
}
.lam-services dt {
	font-weight: 700;
}
.lam-services dd {
	margin: 0.2rem 0 0;
}

/* ============================================================
   11. PRÉFÉRENCES DE L'UTILISATEUR
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.lam-marques .lam-marque:hover {
		transform: none;
	}
}

@media print {
	.site-entete,
	.site-pied,
	.lien-evitement,
	.wp-block-buttons {
		display: none;
	}
	body {
		background: #fff;
		color: #000;
	}
}

/* Cartes de contact : l'e-mail est un « mot » insécable qui déborde des cartes
   étroites (3 colonnes) — on autorise la coupure (un <wbr> après le @ donne un
   point de césure propre dans le contenu). */
.is-style-carte h3 a[href^="mailto:"] {
	overflow-wrap: anywhere;
}
/* Les 3 cartes occupent toute la largeur : auto-fit étire les colonnes
   existantes, là où la grille WordPress (auto-fill) réservait une 4ᵉ colonne
   vide à droite. Reste responsive (passe à moins de colonnes si ça ne tient pas). */
.lam-contact-cartes.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ============================================================
   Formulaire de contact (Contact Form 7) — page Contact
   ============================================================ */
.lam-contact-form .wpcf7 { margin-top: 1.25rem; }
.lam-form { display: flex; flex-direction: column; gap: 1.1rem; }
.lam-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lam-contact-form .lam-champ { margin: 0; }
.lam-contact-form label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--encre); }
.lam-contact-form .lam-req { color: var(--terre); }
.lam-contact-form .lam-opt { color: var(--schiste); font-weight: 400; }
.lam-contact-form input[type="text"],
.lam-contact-form input[type="email"],
.lam-contact-form input[type="tel"],
.lam-contact-form select,
.lam-contact-form textarea {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--encre);
	background: var(--blanc);
	border: 1.5px solid var(--contour);
	border-radius: var(--rayon-petit);
	transition: border-color var(--duree-rapide) var(--ease-out), box-shadow var(--duree-rapide) var(--ease-out);
}
.lam-contact-form textarea { min-height: 9rem; resize: vertical; }
.lam-contact-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--schiste) 50%), linear-gradient(135deg, var(--schiste) 50%, transparent 50%);
	background-position: right 1.1rem center, right 0.85rem center; background-size: 0.4rem 0.4rem, 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.lam-contact-form input:focus,
.lam-contact-form select:focus,
.lam-contact-form textarea:focus {
	outline: none; border-color: var(--terre);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--terre) 20%, transparent);
}
.lam-champ--submit { margin-top: 0.25rem; }
.lam-contact-form .wpcf7-submit {
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1.8rem; border: 0; cursor: pointer;
	font: inherit; font-weight: 700;
	color: var(--papier); background: var(--terre);
	border-radius: var(--rayon-pilule);
	transition: background-color var(--duree-rapide) var(--ease-out), transform var(--duree-base) var(--ease-out);
}
.lam-contact-form .wpcf7-submit:hover { background: var(--terre-700); }
.lam-contact-form .wpcf7-submit:active { transform: translateY(1px); }
.lam-contact-form .wpcf7-spinner { margin-left: 0.6rem; }
/* Validation + réponses CF7 */
.lam-contact-form .wpcf7-not-valid-tip { color: var(--terre-700); font-size: 0.85rem; font-weight: 600; margin-top: 0.3rem; }
.lam-contact-form .wpcf7-not-valid { border-color: var(--terre); }
.lam-contact-form .wpcf7-response-output {
	margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: var(--rayon-petit);
	border: 1.5px solid var(--contour); font-size: 0.95rem;
}
.lam-contact-form form.sent .wpcf7-response-output { border-color: #2a9d5f; background: color-mix(in oklab, #2a9d5f 10%, transparent); }
.lam-contact-form form.invalid .wpcf7-response-output,
.lam-contact-form form.failed .wpcf7-response-output { border-color: var(--terre); background: color-mix(in oklab, var(--terre) 8%, transparent); }
@media (max-width: 600px) { .lam-form__duo { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Marques en carrousel défilant (accueil) : les 6 marques sur une
   rangée qui défile seule vers la gauche, en boucle. Pause au survol,
   au focus clavier et par le bouton « Pause » (WCAG 2.2.2). Le JS
   duplique la rangée (copie aria-hidden, hors tabulation, mais survolable
   et cliquable) et pose .est-anime.
   Sans JS ou mouvement réduit : rangée immobile, défilement horizontal
   à la main (scroll-snap).
   ------------------------------------------------------------ */
.lam-marques .lam-marques__defile.is-layout-grid,
.lam-marques .lam-marques__defile {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	margin-top: var(--wp--preset--spacing--60);
	/* Place pour les macarons OFG en débord et l'anneau de focus. */
	padding-block: 1.75rem 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.lam-marques .lam-marques__defile > .lam-marque,
.lam-marques .lam-defile__piste > .lam-marque {
	flex: 0 0 clamp(15rem, 22vw, 17.5rem);
	margin: 0 1.25rem 0 0;
	scroll-snap-align: start;
}
.lam-defile__piste {
	display: flex;
	width: max-content;
}
.lam-marques .lam-marques__defile.est-anime {
	overflow: hidden;
	scroll-snap-type: none;
	/* Fondu sur les bords : les cartes entrent et sortent en douceur. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.lam-marques__defile.est-anime .lam-defile__piste {
	animation: lam-defile var(--duree-defile, 45s) linear infinite;
}
.lam-marques__defile.est-anime:hover .lam-defile__piste,
.lam-marques__defile.est-anime:focus-within .lam-defile__piste,
.lam-marques__defile.est-en-pause .lam-defile__piste {
	animation-play-state: paused;
}
@media (max-width: 600px) {
	.lam-marques .lam-marques__defile.est-anime {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
	}
}
@keyframes lam-defile {
	to { transform: translateX(-50%); }
}
.lam-defile__commande {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--30);
}
.lam-defile__commande button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1.5px solid var(--encre);
	border-radius: var(--rayon-pilule);
	background: transparent;
	color: var(--encre);
	font: inherit;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	cursor: pointer;
}
.lam-defile__commande button:hover {
	background: var(--encre);
	color: var(--papier);
}
@media (prefers-reduced-motion: reduce) {
	.lam-marques__defile.est-anime .lam-defile__piste {
		animation: none;
	}
}

/* ------------------------------------------------------------
   Nos implantations : texte + fiches des 2 sites, carte de la région
   Auvergne-Rhône-Alpes (SVG en ligne, liseret de la région, Ardèche et
   Isère mises en avant). Survoler une fiche met son site en valeur sur
   la carte (et inversement, rien à faire au clavier : la carte est
   décorative, l'information est dans les fiches).
   ------------------------------------------------------------ */
.lam-implantations {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}
@media (max-width: 900px) {
	.lam-implantations {
		grid-template-columns: 1fr;
	}
}
.lam-implantations > * {
	margin-block: 0;
}
.lam-sites {
	display: grid;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--50);
}
.lam-site {
	padding: 1.25rem 1.5rem 1.25rem 1.25rem;
	border: 1px solid var(--contour);
	border-left: 4px solid var(--terre);
	background: var(--blanc);
	transition: border-color var(--duree-base) var(--ease-out), box-shadow var(--duree-base) var(--ease-out);
}
.lam-site > * {
	margin-block: 0;
}
.lam-site h3 {
	font-size: 1.25rem;
}
.lam-site__lieu {
	margin-top: 0.15rem !important;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	color: var(--terre-700);
}
.lam-site__marques {
	margin-top: 0.6rem !important;
	color: var(--schiste);
}
.lam-site:hover {
	border-color: var(--encre);
	border-left-color: var(--terre);
	box-shadow: inset 0 0 0 1px var(--encre);
}

.lam-carte-cadre {
	margin: 0;
}
.lam-carte {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.lam-carte__liseret use {
	fill: none;
	stroke: var(--encre);
	stroke-width: 5;
	stroke-linejoin: round;
}
.lam-carte__dep {
	fill: var(--blanc);
	stroke: color-mix(in oklab, var(--encre) 22%, var(--blanc));
	stroke-width: 0.8;
	stroke-linejoin: round;
	transition: fill var(--duree-base) var(--ease-out);
}
.lam-carte__dep.est-site {
	fill: var(--sauge);
}
.lam-carte__dep-nom {
	font-family: var(--police-titres);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	fill: var(--foret);
}
.lam-carte__ville {
	fill: var(--schiste);
}
.lam-carte__ville-nom {
	font-family: var(--police-texte);
	font-size: 15px;
	fill: var(--schiste);
}
/* Halo blanc sous les textes de la carte : lisibles par-dessus les limites. */
.lam-carte text {
	paint-order: stroke;
	stroke: var(--blanc);
	stroke-width: 5;
	stroke-linejoin: round;
}
.lam-carte__dep-nom {
	stroke: var(--sauge);
}
.lam-carte__point {
	fill: var(--terre);
	stroke: none;
	transition: transform var(--duree-base) var(--ease-out);
	transform-box: fill-box;
	transform-origin: center;
}
/* Contour de l'Ardèche et de l'Isère redessiné au-dessus de tous les
   départements (sinon le filet gris des voisins, dessinés après, mange une
   partie de leur bordure). Masqué à l'intérieur du département : seule la
   moitié extérieure du trait (1,6) se voit ; le long de la région, elle se
   fond dans le liseret, qui garde la même épaisseur partout. */
.lam-carte__contour-sites use {
	fill: none;
	stroke: var(--foret);
	stroke-width: 3.2;
	stroke-linejoin: round;
	pointer-events: none;
}
.lam-carte__site-nom {
	font-family: var(--police-titres);
	font-size: 19px;
	font-weight: 800;
	fill: var(--encre);
	paint-order: stroke;
	stroke: var(--blanc);
	stroke-width: 5;
	stroke-linejoin: round;
}
.lam-carte__site-soc {
	font-family: var(--police-texte);
	font-size: 15px;
	font-weight: 600;
	fill: var(--terre-700);
	paint-order: stroke;
	stroke: var(--blanc);
	stroke-width: 5;
	stroke-linejoin: round;
}
/* Fiche survolée → son site et son département ressortent sur la carte. */
.lam-implantations:has(.lam-site--lavilledieu:hover) .lam-carte__dep[data-site="lavilledieu"],
.lam-implantations:has(.lam-site--la-frette:hover) .lam-carte__dep[data-site="la-frette"] {
	fill: color-mix(in oklab, var(--terre) 22%, var(--blanc));
}
.lam-implantations:has(.lam-site--lavilledieu:hover) .lam-carte__site[data-site="lavilledieu"] .lam-carte__point,
.lam-implantations:has(.lam-site--la-frette:hover) .lam-carte__site[data-site="la-frette"] .lam-carte__point {
	transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
	.lam-carte__point,
	.lam-carte__dep {
		transition: none;
	}
}
@media (forced-colors: active) {
	.lam-carte__dep.est-site { fill: Highlight; }
	.lam-carte__point { fill: CanvasText; }
}

/* ------------------------------------------------------------
   Nos distinctions (accueil, à la place des chiffres clés) : bandeau
   bleu nuit pleine largeur, 3 colonnes centrées, sans cadre ni contour.
   Les logos (versions pour fond sombre) sont posés directement sur le
   fond, à hauteur visuelle égale ; dessous, rang, une ligne et date.
   ------------------------------------------------------------ */
.lam-distinctions__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--70) !important;
}
@media (max-width: 900px) {
	.lam-distinctions__grille {
		grid-template-columns: minmax(0, 1fr);
		max-width: 26rem;
		margin-inline: auto !important;
	}
}
.lam-distinction {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.lam-distinction > * {
	margin: 0;
}
.lam-distinction__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 7.5rem;
	margin-bottom: 1.75rem !important;
}
.lam-distinction__logo {
	width: 100%;
}
/* Taille posée (le SVG n'a pas de dimensions propres) ; contain garde les
   proportions de chaque logo dans la même boîte. */
.lam-distinction__logo img {
	display: block;
	width: 100%;
	max-width: 17rem;
	height: 7rem;
	object-fit: contain;
}
.lam-distinction__rang {
	font-family: var(--police-titres);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--braise); /* texte large (19 px gras) : 3:1 suffit, ≈ 4,4:1 sur marine */
}
.lam-distinction__texte {
	max-width: 30ch;
	margin-top: 0.6rem !important;
	color: color-mix(in oklab, var(--sable) 82%, transparent);
}
.lam-distinction__texte a {
	white-space: nowrap;
	font-weight: 600;
}
.lam-distinction__date {
	margin-top: 0.9rem !important;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blanc);
}
/* L'espacement de flux de WordPress (marge haute entre frères) décalerait
   les colonnes 2 et 3 : on l'annule dans la grille. */
.lam-distinctions__grille > * {
	margin-block: 0 !important;
}

/* ============================================================
   DA « carte AURA », étendue à tout le site (19/10/2026)
   1. Liseret épais bleu nuit sur le contour des blocs et des photos,
      filets fins et clairs pour les séparations intérieures.
   2. Repères carrés rouges (surtitres, puces, fiches des sites).
   3. Aplats ciel : survol des blocs, citations.
   4. Étiquettes en capitales espacées (dates, métiers, lieux).
   ============================================================ */

/* 1. Liserets : contour des blocs */
.wp-block-group.is-style-carte,
.lam-chiffres .lam-chiffre,
.lam-actu,
.lam-presse li,
.page-id-115 .lam-presse li,
.lam-site {
	border: var(--trait) solid var(--contour);
}
.lam-marques .lam-marque {
	border-width: var(--trait);
	border-color: var(--contour);
}
.site-entete {
	border-bottom: var(--trait) solid var(--contour);
}
.lam-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.lam-contact-form select,
.lam-contact-form textarea {
	border-width: var(--trait);
}
/* Boutons à contour : même liseret. */
.wp-block-button.is-style-contour .wp-block-button__link {
	box-shadow: inset 0 0 0 var(--trait) var(--encre);
}
.has-foret-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.has-encre-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-contour .wp-block-button__link {
	box-shadow: inset 0 0 0 var(--trait) var(--papier);
}
.lam-actus__nav button,
.lam-defile__commande button {
	border-width: var(--trait);
}
/* Photos de contenu cerclées du liseret (pas les logos ni les icônes). */
.wp-block-image.is-style-arrondie img,
.lam-duo .wp-block-image img,
.lam-actu-seule__image img {
	border: var(--trait) solid var(--contour);
}
.has-foret-background-color .wp-block-image.is-style-arrondie img {
	border-color: var(--papier);
}

/* 1 bis. Filets fins et clairs : séparations intérieures */
.wp-block-separator,
.lam-offres,
.lam-offres li,
.liste-contenus li {
	border-color: var(--filet-fin);
}
.lam-frise {
	border-left: var(--trait) solid var(--contour);
}
@media (max-width: 1024px) {
	.site-entete__nav li {
		border-bottom-color: var(--filet-fin);
	}
}

/* 2. Repères carrés rouges */
.surtitre::before {
	width: var(--repere);
	height: var(--repere);
	background: currentColor;
	box-shadow: 0 0 0 2px var(--papier);
}
.has-foret-background-color .surtitre::before,
.wp-block-cover .surtitre::before {
	box-shadow: none;
}
.wp-block-post-content ul:not([class]) > li::marker,
.wp-block-post-content ul.wp-block-list > li::marker,
.lam-section ul.wp-block-list > li::marker {
	content: "■  ";
	color: var(--terre);
	font-size: 0.8em;
}
/* Fiches des sites : le point rouge de la carte remplace la barre latérale. */
.lam-site {
	position: relative;
	padding-left: 3rem;
	border-left-width: var(--trait);
	border-left-color: var(--contour);
}
.lam-site::before {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 1.6rem;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--terre);
}
.lam-site:hover {
	border-left-color: var(--contour);
}

/* 3. Aplats ciel : survol des blocs et citations */
.wp-block-group.is-style-carte,
.lam-actu,
.lam-site,
.lam-marques .lam-marque,
.lam-presse li {
	transition: background-color var(--duree-base) var(--ease-out), border-color var(--duree-base) var(--ease-out), box-shadow var(--duree-base) var(--ease-out);
}
.lam-actu:hover,
.lam-actu:focus-within,
.lam-site:hover,
.lam-marques .lam-marque:hover,
.lam-marques .lam-marque:focus-within,
.page-id-115 .lam-presse li:hover,
.page-id-115 .lam-presse li:focus-within {
	background-color: var(--sauge);
}
.lam-chiffres .lam-chiffre {
	background: var(--sauge);
}
.wp-block-quote.lam-relai,
.wp-block-post-content .wp-block-quote {
	background: var(--sauge);
	border-left: var(--trait) solid var(--contour);
}
.lam-actu__relai {
	background: var(--sauge);
	box-shadow: inset 0 0 0 1px var(--contour);
}

/* 4. Étiquettes en capitales espacées (style des noms de départements) */
.lam-actu__date,
.lam-presse__date,
.lam-site__lieu,
.lam-marque__metier,
.site-pied__titre {
	font-family: var(--police-titres);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.lam-actu__date,
.lam-presse__date,
.lam-marque__metier {
	color: var(--foret);
}
.lam-site__lieu {
	color: var(--terre-700);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-carte,
	.lam-actu,
	.lam-site,
	.lam-marques .lam-marque,
	.lam-presse li {
		transition: none;
	}
}
@media (forced-colors: active) {
	.surtitre::before,
	.lam-site::before {
		background: CanvasText;
		box-shadow: none;
	}
}

/* Héro de l'accueil : dégradé qui finit en bleu marine plein en bas, pour se
   fondre sans couture dans le bandeau « Nos distinctions » (même --foret). */
.lam-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 45%;
	background: linear-gradient(to bottom, transparent, var(--foret));
	pointer-events: none;
}
.lam-hero .wp-block-cover__inner-container {
	z-index: 1;
}
/* Champs du formulaire : la bordure et le rembourrage comptent dans la
   largeur (sinon E-mail et Téléphone se chevauchent dans la grille). */
.lam-contact-form input,
.lam-contact-form select,
.lam-contact-form textarea {
	box-sizing: border-box;
	max-width: 100%;
}

/* Héro de l'accueil : voile bleu par-dessus la photo en noir et blanc ; le
   dégradé du bas assure la lisibilité du texte. */
/* Cadrage : le haut de la photo compte (la perspective de l'atelier, la
   charpente) ; voile plus léger et contraste adouci pour garder la matière. */
.lam-hero .wp-block-cover__image-background {
	object-position: 50% 0% !important;
	filter: grayscale(1);
}
/* Voile en dégradé : bleu léger en haut (on voit la charpente et la
   perspective de l'atelier), de plus en plus soutenu vers le texte, marine
   plein en bas pour le raccord avec les distinctions. Pas de multiplication
   (effet négatif). */
.lam-hero .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	/* Deux dégradés superposés : de gauche à droite (plus foncé sous le texte,
	   la droite libère la photo) et de haut en bas (raccord marine plein). */
	background:
		linear-gradient(to right, rgb(10 28 85 / 0.6) 0%, rgb(10 28 85 / 0.35) 45%, rgb(10 28 85 / 0) 80%),
		linear-gradient(to bottom, rgb(10 28 85 / 0.22) 0%, rgb(10 28 85 / 0.45) 35%, rgb(10 28 85 / 0.72) 65%, rgb(10 28 85) 100%) !important;
}

/* Tirage façon polaroïd : UNIQUEMENT sur l'accueil (.home), photos des blocs
   (style d'image « arrondie ») : large cadre blanc, plus haut en bas,
   inclinaison marquée et alternée. Ailleurs (pages, articles d'actualité),
   les photos gardent le liseret. Sur fond clair, un filet fin dessine le bord
   du tirage ; sur marine, le blanc suffit. Pas d'inclinaison sur téléphone
   (pas de débord horizontal). */
.home .wp-block-image.is-style-arrondie img,
.home .has-foret-background-color .wp-block-image.is-style-arrondie img {
	box-sizing: border-box;
	padding: 14px 14px 52px;
	background: var(--blanc);
	border: 1px solid var(--filet-fin);
}
.home .has-foret-background-color .wp-block-image.is-style-arrondie img {
	border-color: var(--blanc);
}
.home .wp-block-image.is-style-arrondie {
	transform: rotate(-3.5deg);
}
/* Deuxième colonne : inclinaison inverse, comme des tirages posés à la main. */
.home .wp-block-column + .wp-block-column .wp-block-image.is-style-arrondie {
	transform: rotate(3deg);
}
@media (max-width: 600px) {
	.home .wp-block-image.is-style-arrondie img,
	.home .has-foret-background-color .wp-block-image.is-style-arrondie img {
		padding: 10px 10px 36px;
	}
	.home .wp-block-image.is-style-arrondie,
	.home .wp-block-column + .wp-block-column .wp-block-image.is-style-arrondie {
		transform: none;
	}
}

/* Film de présentation : sous les implantations, en largeur de contenu (plus
   en pleine largeur), cerné du liseret comme les photos ; format cinéma gardé. */
.lam-section-film .lam-film {
	box-sizing: border-box;
	border: var(--trait) solid var(--contour);
}

/* Logos ronds ou carrés (CCE, Émerveillés par l'Ardèche, Réseau Entreprendre) :
   un peu plus hauts que les logos en longueur, pour un poids visuel égal. */
.lam-partenaires__logos img[src*="ccef"],
.lam-partenaires__logos img[src*="emerveilles"],
.lam-partenaires__logos img[src*="reseau-entreprendre"] {
	height: 4.75rem;
}

/* Héro → distinctions : le dégradé fond les deux blocs en un seul aplat
   marine ; leurs marges s'additionnaient (160 px vides). On resserre à
   ~90 px entre les boutons du héro et le surtitre des distinctions. */
.lam-hero.wp-block-cover {
	padding-bottom: 3.5rem;
}
.lam-hero + .lam-distinctions {
	padding-top: 2rem;
}

/* Cartes d'actualités : harmonisation des traits.
   1. Lien « Voir sur LinkedIn » : lien texte discret, pas de liseret de
      bouton (la règle générale des boutons à contour l'avait encadré).
   2. Badge « Relayé · … » posé sur le coin haut gauche du visuel : la date
      et le titre retrouvent la même ligne d'une carte à l'autre.
   3. Visuels recadrés en haut (visages) ; le visuel du webinaire, sur son titre. */
.lam-actu .lam-actu__linkedin .wp-block-button__link,
.lam-actu .wp-block-button.is-style-contour .wp-block-button__link {
	box-shadow: none;
	padding: 0;
	background: none;
	color: var(--terre);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.lam-actu .lam-actu__linkedin .wp-block-button__link:hover {
	color: var(--terre-700);
	background: none;
}
.lam-actu .lam-actu__linkedin .wp-block-button__link::after {
	content: none;
}
.lam-actu .lam-actu__relai {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	margin: 0;
}
.lam-actu img[src*="webinaire-greentomarket"] {
	object-position: 50% 62% !important; /* le titre et les logos, pas le bouton lecture incrusté */
}

/* Cartes d'actualités au survol : contour inchangé (le trait intérieur de
   1 px était masqué par le visuel en haut de carte : épaisseur inégale).
   Le survol se lit par l'aplat ciel, le titre en rouge et le zoom du visuel. */
.lam-actu:hover,
.lam-actu:focus-within {
	box-shadow: none;
}

/* ============================================================
   DA ALLÉGÉE (19/10/2026) — le liseret redevient une signature.
   Il reste sur la carte AURA, les boutons à contour et les champs
   (2 px) ; il disparaît des photos, de la vidéo et des cartes, qui
   deviennent des blocs blancs sans contour sur le fond papier.
   Au survol : aplat ciel (et contour à la couleur de la marque pour
   les cartes de marques). Pour revenir en arrière : retirer ce bloc.
   ============================================================ */

/* Photos et vidéo : plus de trait (hors polaroïds de l'accueil). */
.wp-block-image.is-style-arrondie img,
.has-foret-background-color .wp-block-image.is-style-arrondie img,
.lam-duo .wp-block-image img,
.lam-actu-seule__image img,
.lam-section-film .lam-film {
	border: 0;
}
.home .wp-block-image.is-style-arrondie img {
	border: 1px solid var(--filet-fin);
}
.home .has-foret-background-color .wp-block-image.is-style-arrondie img {
	border-color: var(--blanc);
}

/* Cartes : blocs blancs sans contour (bordure transparente : la mise en
   page ne bouge pas). */
.wp-block-group.is-style-carte,
.lam-chiffres .lam-chiffre,
.lam-actu,
.lam-site,
.lam-presse li,
.page-id-115 .lam-presse li,
.lam-marques .lam-marque {
	border-color: transparent;
}
.lam-actu:hover,
.lam-actu:focus-within,
.lam-site:hover {
	border-color: transparent;
	box-shadow: none;
}
.page-id-115 .lam-presse li:hover,
.page-id-115 .lam-presse li:focus-within {
	box-shadow: none;
}

/* Boutons à contour et champs : 2 px. */
.wp-block-button.is-style-contour .wp-block-button__link {
	box-shadow: inset 0 0 0 2px var(--encre);
}
.has-foret-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.has-encre-background-color .wp-block-button.is-style-contour .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-contour .wp-block-button__link {
	box-shadow: inset 0 0 0 2px var(--papier);
}
.lam-actus__nav button,
.lam-defile__commande button,
.lam-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.lam-contact-form select,
.lam-contact-form textarea {
	border-width: 2px;
}

/* En-tête : filet fin au lieu du liseret. */
.site-entete {
	border-bottom: 1px solid var(--filet-fin);
}

/* Page Presse : logo officiel de chaque média en tête de coupure (à la place
   du nom en texte), dans une boîte de hauteur fixe : dates et titres
   s'alignent d'une coupure à l'autre. */
.page-id-115 .lam-presse__logo {
	display: block;
	width: 100%;
	max-width: 11rem;
	height: 2.75rem;
	margin: 0 0 0.9rem;
	object-fit: contain;
	object-position: left center;
}
/* Poids visuel égal entre logos de proportions différentes. */
.page-id-115 .lam-presse__logo[src*="echo-drome-ardeche"] {
	height: 3.6rem;
	margin-top: -0.4rem;
	margin-bottom: 0.5rem;
}
.page-id-115 .lam-presse__logo[src*="rustica"] {
	max-width: 8rem;
}

/* Page Actualités : chapô dans l'en-tête (comme les pages intérieures) ; la
   grille suit directement l'en-tête, sans marge supplémentaire. */
.blog .page-gabarit__entete + .lam-actus-grille {
	margin-top: 0;
}
.blog .page-gabarit__chapo a {
	white-space: nowrap;
}

/* Distinctions : apparition au défilement, colonne par colonne (main.js pose
   .est-anime sur la grille, puis .est-visible et --decal sur chaque colonne).
   Cascade interne : logo, rang, texte, date. Sans JS : tout est visible. */
/* Masquage immédiat (sans transition : pas de fondu sortant au chargement) ;
   seule l'apparition est animée. */
.lam-distinctions__grille.est-anime .lam-distinction > * {
	opacity: 0;
	transform: translateY(1.1rem);
}
.lam-distinctions__grille.est-anime .lam-distinction > .lam-distinction__logo {
	transform: translateY(1.6rem) scale(0.9);
}
.lam-distinction > :nth-child(2) { --cran: 2; }
.lam-distinction > :nth-child(3) { --cran: 3; }
.lam-distinction > :nth-child(4) { --cran: 4; }
.lam-distinctions__grille.est-anime .lam-distinction.est-visible > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	transition-delay: calc(var(--decal, 0ms) + var(--cran, 0) * 90ms);
}
.lam-distinctions__grille.est-anime .lam-distinction.est-visible > .lam-distinction__logo {
	transition-duration: 0.9s;
}

/* Partenaires (13 logos depuis l'ajout des banques, 20/10) : espacement et
   largeur resserrés pour deux lignes équilibrées (7 + 6) au lieu de 6 + 6 + 1 ;
   les logos très allongés (Banque Marze, Banque Populaire) gardent un peu plus
   de largeur pour un poids visuel égal. */
.lam-partenaires__logos {
	column-gap: 2.5rem;
}
.lam-partenaires__logos img {
	max-width: 10rem;
}
.lam-partenaires__logos img[src*="banque-marze"],
.lam-partenaires__logos img[src*="banque-populaire"] {
	max-width: 12rem;
}