/*
 * Café 92 degrés — feuille de style principale
 * XL Création Web
 *
 * Les polices sont servies depuis le thème : aucune requête ne part vers un
 * domaine externe, ce qui évite aussi le décalage de mise en page au chargement.
 */

/* ─────────────────────────────────────────────────────────
   Polices auto-hébergées
   Archivo est une police variable : un seul fichier couvre
   les graisses 400 à 800, d'où l'absence de fichiers séparés.
   ───────────────────────────────────────────────────────── */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Yellowtail';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/yellowtail-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Yellowtail';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/yellowtail-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────
   Jetons de design
   ───────────────────────────────────────────────────────── */
:root {
	/* Un noir à peine chaud plutôt qu'un gris neutre : il s'accorde à l'ambre
	   et aux photographies de café sans que personne puisse nommer la
	   différence. */
	--c92-noir: #0B0A09;
	--c92-blanc: #FFFFFF;
	--c92-gris: #9A9086;
	/* Couleur d'accent : la crema d'un espresso, pas l'orange d'une enseigne.
	   Même chaleur que l'ancien ambre, moins de jaune et moins de cri.
	   Contraste de 7,1:1 sur le noir du site, donc lisible jusqu'en petit
	   corps pour les prix de la carte.
	   Le nom de la variable reste « ambre » : il est employé dans des
	   classes de gabarits, et le renommer ferait courir un risque pour rien. */
	/* Sable sourd, pris dans la palette de la cliente (teinte 37°) et remonté en
	   luminosité jusqu'à 9,6:1 sur le noir. La palette d'origine tourne autour de
	   22 % de luminosité : superbe en aplat, mais 2:1 de contraste, donc illisible
	   en texte. Le nom « ambre » reste, il sert dans des noms de classes. */
	--c92-ambre: #CEB182;
	--c92-filet: rgba(255, 255, 255, .16);
	--c92-filet-fin: rgba(255, 255, 255, .10);
	/* Surface d'une coque : à peine détachée du fond, jamais une boîte. */
	--c92-coque: rgba(255, 255, 255, .035);

	--c92-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--c92-script: 'Yellowtail', 'Brush Script MT', cursive;

	--c92-marge: clamp(1.25rem, 3.4vw, 2.6rem);
	--c92-section: clamp(5rem, 8vw, 8rem);
	--c92-large: 1340px;
	--c92-texte: 68ch;

	/* Hauteur de la bande d'en-tête. Une valeur, deux usages : la bande
	   elle-même, et la marge négative qui fait remonter le héros dessous. */
	--c92-entete-h: 72px;

	/* Un seul système de rayons pour toute la page : les conteneurs à 16 px,
	   les boutons en pastille, tout le reste à angles vifs. Un bouton rond
	   dans une page carrée se voit immédiatement. */
	--c92-rayon: 16px;
	--c92-rayon-interne: 8px;
	--c92-pastille: 999px;

	--c92-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ─────────────────────────────────────────────────────────
   Grain
   Un noir pur derrière des photographies, c'est numérique. Un
   voile de bruit à 3,5 % suffit à donner une sensation de
   papier. Il est posé sur un pseudo-élément fixe : attaché à un
   conteneur qui défile, il forcerait le processeur graphique à
   repeindre en continu et ferait tomber la fluidité sur
   téléphone.
   ───────────────────────────────────────────────────────── */
body::after {
	content: "";
	position: fixed; inset: 0; z-index: 90;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
	/* iOS gonfle les caractères en mode paysage sans cette ligne. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c92-noir);
	color: var(--c92-blanc);
	font-family: var(--c92-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video, iframe { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c92-ambre); color: var(--c92-noir); }

/* Les surfaces que l'on ne dessine pas soi-même portent quand même le design. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--c92-noir); }
::-webkit-scrollbar-thumb { background: #2B2B2B; border: 3px solid var(--c92-noir); }
::-webkit-scrollbar-thumb:hover { background: #3D3D3D; }

:focus-visible { outline: 2px solid var(--c92-ambre); outline-offset: 3px; }

/* Classe standard WordPress : visible au clavier seulement. */
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
}
.skip-link:focus {
	clip-path: none; height: auto; width: auto; margin: 0;
	position: fixed; top: 12px; left: 12px; z-index: 100;
	background: var(--c92-ambre); color: var(--c92-noir);
	padding: .75rem 1.25rem; font-weight: 700;
}

.c92-large { max-width: var(--c92-large); margin: 0 auto; padding: 0 var(--c92-marge); }

/* Petites étiquettes en capitales : jamais en dessous de 11 px. */
.c92-etiquette {
	font-size: .6875rem; font-weight: 600;
	letter-spacing: .19em; text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────
   En-tête
   Une bande pleine largeur, qui reste en haut de l'écran
   pendant tout le défilement : la navigation et le bouton de
   commande doivent rester à portée de pouce où qu'on soit dans
   la page.
   Sur l'accueil, une marge négative égale à sa hauteur fait
   remonter la photographie derrière elle : la bande se pose sur
   l'image au lieu de la repousser vers le bas.
   ───────────────────────────────────────────────────────── */
.c92-entete {
	position: sticky; top: 0; z-index: 30;
	background: rgba(11, 10, 9, .88);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--c92-filet-fin);
}
.c92-entete:not(.c92-entete--plein) { margin-bottom: calc(var(--c92-entete-h) * -1); }

.c92-entete__corps {
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(.9rem, 2.4vw, 2rem);
	height: var(--c92-entete-h);
	max-width: var(--c92-large); margin: 0 auto;
	padding: 0 var(--c92-marge);
}

/* Le flou n'est posé que sur cette bande, le seul élément fixe de la page.
   Deux replis pour ceux qui ne l'auront pas : un fond plein, sans
   transparence. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.c92-entete { background: rgba(11, 10, 9, .95); }
}
@media (prefers-reduced-transparency: reduce) {
	.c92-entete {
		background: var(--c92-noir);
		backdrop-filter: none; -webkit-backdrop-filter: none;
	}
}

.c92-marque {
	font-family: var(--c92-script);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	color: var(--c92-ambre);
	line-height: 1;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* Le logo posé dans « Identité du site ». L'ombre portée le détache de la
   photographie du héros sans qu'on ait à assombrir l'image. */
/* flex-shrink à 0 : quand la navigation passe sur deux lignes, le logo ne
   doit pas se faire réduire à néant pour lui faire de la place. */
.c92-marque--image { display: flex; align-items: center; flex: 0 0 auto; }
.c92-marque img,
.c92-marque .custom-logo {
	max-height: 46px; width: auto; max-width: 100%;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .55));
}
/* Le logo est un lien : il lui faut la même hauteur touchable que le reste. */
.c92-marque a,
.c92-marque .custom-logo-link { display: flex; align-items: center; min-height: 44px; }

.c92-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); min-width: 0; }
.c92-nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.c92-nav a { transition: opacity .3s var(--c92-ease); padding: .35rem 0; display: inline-block; }
.c92-nav a:hover { opacity: .6; }
.c92-nav .current-menu-item > a { color: var(--c92-ambre); }

/* Sélecteur de langue.
   Deux codes séparés d'une barre oblique, c'était deux liens de plus dans la
   barre : à côté d'« Accueil, À propos, Artisans, Contact », l'œil les lisait
   comme la suite du menu. On en fait un commutateur — un seul boîtier, la
   langue courante en plein, l'autre en creux — qui ne ressemble plus à rien
   d'autre sur la page.
   La barre oblique disparaît : le boîtier sépare déjà les deux. */
.c92-langue {
	display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
	padding: 3px;
	border: 1px solid var(--c92-filet); border-radius: var(--c92-pastille);
}
.c92-langue .sep { display: none; }
.c92-nav .c92-langue a,
.c92-langue a, .c92-langue span {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 32px; min-width: 34px; padding: 0 .35rem;
	border-radius: var(--c92-pastille);
	opacity: .5;
	transition: opacity .3s var(--c92-ease), background .3s var(--c92-ease);
}
.c92-nav .c92-langue a:hover,
.c92-langue a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.c92-langue .est-active {
	opacity: 1; color: var(--c92-noir);
	background: var(--c92-ambre);
}

/* Bouton de commande : la seule note ambre de l'en-tête, pour qu'elle reste
   la première chose que l'œil y trouve. */
/* Sélecteur doublé : sans cela, la règle générale « .c92-nav a » l'emporte
   et le bouton perd son rembourrage horizontal. */
.c92-nav .c92-commande {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px;
	background: var(--c92-ambre); color: var(--c92-noir);
	padding: 0 1.35rem;
	border: 1px solid var(--c92-ambre);
	border-radius: var(--c92-pastille);
	white-space: nowrap;
	transition: background .3s var(--c92-ease), color .3s var(--c92-ease), transform .18s var(--c92-ease);
}
.c92-nav a.c92-commande:hover { background: transparent; color: var(--c92-ambre); opacity: 1; }
/* Le clic s'enfonce : c'est le seul retour d'action que la page puisse
   donner avant que la page suivante n'arrive. */
.c92-nav a.c92-commande:active { transform: scale(.97); }

/* Bouton du menu mobile */
.c92-bascule {
	display: none; width: 44px; height: 44px; flex: 0 0 auto;
	background: none; border: 1px solid var(--c92-filet); cursor: pointer;
	border-radius: var(--c92-pastille);
	position: relative; padding: 0;
}
.c92-bascule span {
	position: absolute; left: 12px; width: 18px; height: 2px;
	background: var(--c92-blanc);
	transition: transform .45s var(--c92-ease), opacity .25s var(--c92-ease);
}
.c92-bascule span:nth-child(1) { top: 16px; }
.c92-bascule span:nth-child(2) { top: 25px; }
.c92-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.c92-bascule[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────────
   Héros de l'accueil
   ───────────────────────────────────────────────────────── */
/* svh plutôt que vh : sur iOS la barre d'adresse fait varier vh en cours de
   défilement, ce qui faisait sauter la hauteur du héros. */
.c92-heros { position: relative; height: min(92vh, 860px); height: min(92svh, 860px); min-height: 520px; overflow: hidden; }
.c92-heros__image {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 52%;
	filter: saturate(1.06) contrast(1.04);
	/* 4,5 % de zoom sur une minute : on doit le sentir sans le voir. À 7 %
	   sur 46 secondes, le déplacement devenait visible. */
	animation: c92-panoramique 60s ease-in-out infinite alternate;
}
@keyframes c92-panoramique { from { scale: 1; } to { scale: 1.045; } }

.c92-heros::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.08) 32%, rgba(10,10,10,.82) 100%);
}
.c92-heros__titre {
	position: absolute; z-index: 2;
	/* Borné à droite aussi : sans cela, un mot long et insécable — « Notre-
	   Dame-de-Grâce » — vient toucher le bord sur un écran étroit. */
	left: var(--c92-marge); right: var(--c92-marge);
	bottom: clamp(2rem, 5vw, 3.4rem);
	margin: 0; max-width: 15ch;
	font-size: clamp(2.35rem, 7vw, 6.5rem); font-weight: 800;
	line-height: .95; letter-spacing: -.04em; text-wrap: balance;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}

/* ─────────────────────────────────────────────────────────
   Annonce du mois
   Bande ambre juste sous la photographie : le premier bloc de
   texte de la page, donc impossible à manquer, et retirée du
   document dès que le café vide le titre.
   ───────────────────────────────────────────────────────── */
.c92-annonce {
	background: var(--c92-ambre); color: var(--c92-noir);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: clamp(1.2rem, 3vw, 2.5rem);
	max-width: var(--c92-large); margin: 0 auto;
	padding: clamp(1.6rem, 3.4vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
}
.c92-annonce__corps { flex: 1 1 26ch; min-width: 0; }
.c92-annonce .c92-etiquette { display: block; opacity: .62; margin-bottom: .55rem; }
.c92-annonce h2 {
	margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 800;
	letter-spacing: -.025em; line-height: 1.15; text-wrap: balance;
}
.c92-annonce p {
	margin: .6rem 0 0; max-width: 62ch;
	font-size: .98rem; line-height: 1.6; color: rgba(10, 10, 10, .78);
}

/* Le bandeau est déjà ambre : son bouton doit être noir pour exister. */
.c92-bouton--sombre {
	margin-top: 0;
	background: var(--c92-noir); color: var(--c92-blanc);
	border-color: var(--c92-noir);
}
.c92-bouton--sombre:hover { background: transparent; color: var(--c92-noir); border-color: var(--c92-noir); }
.c92-bouton--sombre::after { background: rgba(255, 255, 255, .13); }
.c92-bouton--sombre:hover::after { background: rgba(11, 10, 9, .1); }

/* Un téléchargement ne part pas ailleurs : la flèche pointe vers le bas. */
.c92-bouton[download]::after { content: "↓"; }

/* ─────────────────────────────────────────────────────────
   Credo
   ───────────────────────────────────────────────────────── */
/* La phrase qui suit immédiatement la photographie.
   Sans image ni bloc à côté d'elle, elle flottait au milieu d'un grand noir
   vide. Deux corrections : l'espace au-dessus est resserré, puisque le héros
   se termine déjà en noir et fait office de respiration ; et un halo très
   doux, dans la teinte de la crema, donne à la section une matière au lieu
   d'un aplat. Ce halo attend la photographie de la salle, qui viendra le
   remplacer. */
.c92-credo {
	position: relative; isolation: isolate; overflow: hidden;
	text-align: center;
	padding: clamp(3rem, 6vw, 5rem) var(--c92-marge) clamp(4rem, 7vw, 7rem);
}
.c92-credo::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(58% 70% at 50% 34%, rgba(206, 177, 130, .15), rgba(206, 177, 130, 0) 72%);
}
/* La phrase du café : c'est le deuxième échelon de la page, donc elle doit
   peser nettement plus que les titres de section qui la suivent. */
.c92-credo p {
	margin: 0 auto; max-width: 22ch;
	font-size: clamp(1.6rem, 4.2vw, 3.2rem); font-weight: 700;
	line-height: 1.12; letter-spacing: -.03em; text-wrap: balance;
}
.c92-credo span {
	display: block; margin-top: 1.6rem; color: var(--c92-gris);
	font-size: clamp(.95rem, 1.5vw, 1.15rem); font-weight: 500; letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────
   La carte, en bref
   Trois colonnes de lignes pointillées plutôt qu'un tableau :
   l'aperçu doit se lire d'un coup d'œil, pas se consulter.
   ───────────────────────────────────────────────────────── */
.c92-menu {
	max-width: var(--c92-large); margin: 0 auto;
	padding: 0 var(--c92-marge) var(--c92-section);
}
.c92-menu__entete { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
/* Volontairement plus petit que le credo : c'est l'écart entre les deux qui
   fait la hiérarchie, pas la taille absolue de l'un ou de l'autre. */
.c92-menu__entete h2 {
	margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
	letter-spacing: -.025em; line-height: 1.1; text-wrap: balance;
}
.c92-menu__entete p {
	margin: 1rem 0 0; max-width: 58ch;
	color: var(--c92-gris); line-height: 1.7; font-weight: 400;
}

.c92-menu__colonnes {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
}
/* Les trois seules étiquettes en capitales que garde l'accueil : elles
   nomment de vraies catégories, ce que le titre ne dit pas à leur place. */
.c92-menu__colonne h3 {
	margin: 0 0 1.4rem; padding-bottom: 1.1rem;
	color: var(--c92-gris);
	border-bottom: 1px solid var(--c92-filet);
}
.c92-menu__colonne ul { list-style: none; margin: 0; padding: 0; }
.c92-menu__colonne li {
	display: flex; align-items: baseline; gap: .75rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--c92-filet-fin);
}
.c92-menu__colonne li:last-child { border-bottom: 0; }
.c92-menu__nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Le prix en ambre plutôt qu'en gris : c'est lui qu'on cherche dans cette
   liste, et il y était jusqu'ici l'élément le plus effacé. Le contraste sur
   le noir passe au passage de 6,3:1 à 9,3:1. */
.c92-menu__prix {
	flex: 0 0 auto; color: var(--c92-ambre);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.c92-menu__actions {
	display: flex; flex-wrap: wrap; gap: 1rem;
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.c92-menu__actions .c92-bouton { margin-top: 0; }
.c92-menu__note { margin: 1.4rem 0 0; color: var(--c92-gris); font-size: .85rem; }

/* ─────────────────────────────────────────────────────────
   Heures, adresse, contact
   Partage asymétrique plutôt que trois colonnes égales : sur le
   site d'un café, ce qu'on vient chercher ce sont les heures,
   pas le courriel. La mise en page doit le dire.
   ───────────────────────────────────────────────────────── */
/*
 * Cette section est écrite à l'envers des autres : la colonne unique du
 * téléphone est l'état de base, et la mise en page en trois colonnes n'arrive
 * qu'au-dessus de 820 px, dans sa propre requête média.
 *
 * Ce n'est pas une coquetterie. Le placement en grand écran a besoin de
 * « :nth-child », qui pèse une classe, une pseudo-classe et un élément.
 * Écrite en base puis défaite dans une requête pour petits écrans, cette
 * pesanteur battait la règle qui devait l'annuler, et le bloc restait en trois
 * colonnes enchevêtrées sur un téléphone. Mis à l'endroit, le problème
 * n'existe plus : sur petit écran, aucune de ces règles n'est seulement lue.
 */
.c92-faits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
	max-width: var(--c92-large); margin: 0 auto;
	padding: 0 var(--c92-marge) var(--c92-section);
}

/* Le plan, à côté de l'adresse plutôt qu'en bande pleine largeur. */
.c92-faits__plan {
	position: relative; overflow: hidden;
	min-height: 280px;
	border: 1px solid var(--c92-filet-fin);
	border-radius: var(--c92-rayon);
}

@media (min-width: 821px) {
	/* Une seule rangée : trois blocs de même rang, puis le plan. L'ancienne
	   grille en zones nommées empilait l'adresse et le contact dans la même
	   colonne, ce qui les faisait lire comme deux rangs différents. */
	.c92-faits {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(190px, .95fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	/* Le plan ferme la rangée, calé en haut et carré. Étiré sur deux rangées,
	   il les gonflait toutes les deux et creusait un trou chez ses voisins. */
	.c92-faits__plan {
		align-self: start;
		aspect-ratio: 1 / 1;
		min-height: 240px;
	}

	/* Tant qu'aucune carte n'est configurée, la quatrième colonne n'a pas lieu
	   d'être et laisserait un vide à droite. */
	.c92-faits:not(:has(.c92-faits__plan)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.c92-faits__plan iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
	/* Une légère baisse de luminosité pose la carte dans la page. On
	   n'inverse pas ses couleurs : illisible au soleil sur un téléphone, et
	   ça travestirait la signature de Google. */
	filter: brightness(.92);
}
.c92-faits > div { text-align: left; }
/* Les trois blocs sont de même rang : même étiquette en capitales coiffée d'un
   pictogramme, même corps de texte en dessous. Aucun n'est un titre par rapport
   aux autres — c'est ce qui les fait lire comme une seule fiche de coordonnées
   plutôt que comme trois sections empilées. */
.c92-faits .c92-etiquette {
	display: flex; align-items: center; gap: .55rem;
	margin: 0 0 1.1rem;
	font-size: .95rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--c92-blanc);
}
/* Le pictogramme est dessiné au trait dans la couleur du texte : il suit
   l'étiquette partout où elle va, sans fichier ni requête de plus. */
.c92-faits .c92-etiquette svg {
	width: 1.15em; height: 1.15em; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.c92-faits p {
	margin: 0; line-height: 1.95;
	color: #D3CDC5; font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
/* Téléphone et courriel soulignés : un lien qui ne se distingue que par sa
   couleur n'existe pas pour qui ne la voit pas. */
.c92-faits p a {
	color: var(--c92-blanc);
	text-decoration: underline;
	text-decoration-color: var(--c92-filet);
	text-underline-offset: .25em;
}
.c92-faits p a:hover { text-decoration-color: var(--c92-ambre); }
.c92-faits a:hover { color: var(--c92-blanc); }

/* ─────────────────────────────────────────────────────────
   Bouton
   Pastille, avec la flèche dans son propre cercle collé au bord
   intérieur droit. Le cercle se décale en diagonale au survol :
   c'est ce décalage, et l'enfoncement au clic, qui donnent au
   bouton une épaisseur physique.
   ───────────────────────────────────────────────────────── */
.c92-bouton {
	display: inline-flex; align-items: center; gap: .85rem;
	margin-top: 1.7rem;
	background: var(--c92-blanc); color: var(--c92-noir);
	padding: .7rem .7rem .7rem 1.6rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
	border: 1px solid var(--c92-blanc);
	border-radius: var(--c92-pastille);
	white-space: nowrap;
	transition: background .3s var(--c92-ease), border-color .3s var(--c92-ease),
		color .3s var(--c92-ease), transform .18s var(--c92-ease);
}
.c92-bouton::after {
	content: "↗";
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; flex: 0 0 auto;
	border-radius: var(--c92-pastille);
	background: rgba(11, 10, 9, .09);
	font-size: .8rem; letter-spacing: 0; line-height: 1;
	transition: transform .35s var(--c92-ease), background .3s var(--c92-ease);
}
.c92-bouton:hover { background: var(--c92-ambre); border-color: var(--c92-ambre); color: var(--c92-noir); }
.c92-bouton:hover::after { transform: translate(2px, -2px) scale(1.06); }
.c92-bouton:active { transform: scale(.98); }
/* L'anneau de focus doit rester visible malgré le rayon : pas d'overflow
   caché sur la pastille, et un décalage suffisant pour qu'il se détache. */
.c92-bouton:focus-visible { outline: 2px solid var(--c92-ambre); outline-offset: 3px; }

.c92-bouton--ambre { background: var(--c92-ambre); border-color: var(--c92-ambre); }
.c92-bouton--ambre:hover { background: transparent; color: var(--c92-ambre); border-color: var(--c92-ambre); }
.c92-bouton--ambre:hover::after { background: rgba(201, 143, 91, .18); }

/* ─────────────────────────────────────────────────────────
   Bande de photographies, bord à bord
   Une grande image et deux petites empilées plutôt que trois
   vignettes de même taille : c'est la troisième rangée de trois
   colonnes égales de la page, et celle qu'on remarque le moins
   si on la laisse.
   ───────────────────────────────────────────────────────── */
.c92-bande {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	/* Deux pixels de noir : les images se touchent sans se confondre. */
	gap: 2px;
	height: clamp(420px, 56vw, 760px);
}
.c92-bande figure { margin: 0; position: relative; overflow: hidden; min-height: 0; }
.c92-bande figure:first-child { grid-row: span 2; }
.c92-bande img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--c92-ease);
}
.c92-bande figure:hover img { transform: scale(1.05); }

/* La bande pleine largeur du plan a été retirée : la carte vit désormais dans
   la colonne des faits, à côté de l'adresse (voir « .c92-faits__plan »). Elle
   passe toujours par l'adresse publique de Google Maps, sans clé d'API, donc
   rien qui puisse expirer sans prévenir. */

/* ─────────────────────────────────────────────────────────
   Artisans — le volet communautaire
   ───────────────────────────────────────────────────────── */
.c92-artisans {
	/* min() dans le minmax : sans lui, une colonne de 290 px déborde d'un
	   écran de 320 px au lieu de se réduire. */
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	gap: clamp(2rem, 4vw, 3.2rem);
	max-width: var(--c92-large); margin: 0 auto;
	padding: 0 var(--c92-marge) var(--c92-section);
}
/* Le double liseré, et le seul endroit de tout le site qui le porte : chaque
   fiche est un objet distinct, fait par quelqu'un, qu'on peut acheter — donc
   l'élévation dit vraiment quelque chose. Une coque extérieure, un contenu
   dedans, et deux rayons concentriques (16 puis 8) pour que les courbes
   s'emboîtent au lieu de se contrarier. */
.c92-artisan {
	display: flex; flex-direction: column;
	padding: 6px;
	background: var(--c92-coque);
	border: 1px solid var(--c92-filet-fin);
	border-radius: var(--c92-rayon);
}
.c92-artisan__corps {
	display: flex; flex-direction: column; flex: 1 1 auto;
	padding: 6px 6px 1.5rem;
	background: var(--c92-noir);
	border-radius: var(--c92-rayon-interne);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.c92-artisan__texte { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 1rem; }
.c92-artisan__photo {
	overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 1.5rem;
	border-radius: calc(var(--c92-rayon-interne) - 2px);
}
.c92-artisan__photo img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--c92-ease);
}
.c92-artisan:hover .c92-artisan__photo img { transform: scale(1.04); }
.c92-artisan .c92-etiquette { display: block; color: var(--c92-ambre); margin-bottom: .7rem; }
.c92-artisan h2 {
	margin: 0 0 .8rem;
	font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em;
}
.c92-artisan p { margin: 0 0 1.2rem; color: #D8D2CB; line-height: 1.7; font-size: .95rem; }
.c92-lien-artisan {
	margin-top: auto; align-self: flex-start;
	font-size: .6875rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--c92-filet);
	transition: color .3s var(--c92-ease), border-color .3s var(--c92-ease);
}
.c92-lien-artisan:hover { color: var(--c92-ambre); border-bottom-color: var(--c92-ambre); }

/* Appel aux artisans, au bas de leur page */
.c92-appel {
	max-width: var(--c92-large); margin: 0 auto;
	padding: clamp(2.6rem, 5vw, 4rem) var(--c92-marge) var(--c92-section);
	border-top: 1px solid var(--c92-filet-fin);
	text-align: center;
}
.c92-appel .c92-etiquette { display: block; color: var(--c92-gris); margin-bottom: 1rem; }
.c92-appel h2 {
	margin: 0 auto; max-width: 22ch;
	font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800;
	letter-spacing: -.03em; line-height: 1.15; text-wrap: balance;
}
.c92-appel p {
	margin: 1.1rem auto 0; max-width: 54ch;
	color: var(--c92-gris); line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────
   Pages intérieures
   ───────────────────────────────────────────────────────── */
.c92-titre-page {
	padding: clamp(3.5rem, 8vw, 6rem) var(--c92-marge) clamp(2rem, 4vw, 3rem);
	max-width: var(--c92-large); margin: 0 auto;
}
/* Même échelle que le héros : les pages intérieures n'ont pas de photographie
   pour porter le titre, c'est donc au titre de le faire. */
.c92-titre-page h1 {
	margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800;
	line-height: .98; letter-spacing: -.04em; text-wrap: balance;
}
.c92-titre-page .c92-etiquette { color: var(--c92-gris); display: block; margin-bottom: 1.1rem; }

.c92-contenu {
	max-width: var(--c92-large); margin: 0 auto;
	padding: 0 var(--c92-marge) var(--c92-section);
}

/* Rendu des blocs Gutenberg : le client écrit dans l'éditeur, pas dans le PHP. */
.c92-contenu > * { max-width: var(--c92-texte); }
.c92-contenu > .alignwide,
.c92-contenu > .alignfull,
.c92-contenu > .wp-block-columns,
.c92-contenu > .wp-block-table,
.c92-contenu > .wp-block-gallery,
.c92-contenu > .wp-block-image,
.c92-contenu > .wp-block-separator,
.c92-contenu > .c92-banniere { max-width: none; }

/* Bandeau d'en-tête d'une page intérieure : l'image mise en avant, posée
   au-dessus du texte. Même rayon que les fiches d'artisans, pour que la page
   n'invente pas une forme de plus. */
.c92-banniere {
	margin: 0 0 clamp(2.2rem, 4vw, 3.4rem);
	overflow: hidden;
	border-radius: var(--c92-rayon);
	border: 1px solid var(--c92-filet-fin);
	aspect-ratio: 21 / 9;
}
.c92-banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
	/* Une bande de 21:9 sur un téléphone ne montre plus rien : on ouvre le
	   cadrage. */
	.c92-banniere { aspect-ratio: 3 / 2; }
}

.c92-contenu p { margin: 0 0 1.4rem; line-height: 1.75; color: #D8D2CB; }
.c92-contenu h2 {
	margin: clamp(2.6rem, 5vw, 4rem) 0 1.2rem;
	font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.03em;
}
.c92-contenu h3 {
	margin: 2.2rem 0 .8rem;
	font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em;
}
.c92-contenu a { color: var(--c92-ambre); border-bottom: 1px solid transparent; }
.c92-contenu a:hover { border-bottom-color: var(--c92-ambre); }
.c92-contenu ul, .c92-contenu ol { margin: 0 0 1.4rem; padding-left: 1.2rem; color: #D8D2CB; }
.c92-contenu li { margin-bottom: .5rem; }
.c92-contenu strong { color: var(--c92-blanc); }
.c92-contenu .wp-block-separator {
	border: 0; border-top: 1px solid var(--c92-filet); margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.c92-contenu figure { margin: clamp(2rem, 4vw, 3rem) 0; }
.c92-contenu figcaption {
	margin-top: .7rem; font-size: .8rem; color: var(--c92-gris);
}

/* La carte : un bloc « tableau » de Gutenberg, pour que le café
   puisse ajouter ou retirer une ligne sans toucher au code. */
.c92-contenu .wp-block-table.carte table { width: 100%; border-collapse: collapse; }
.c92-contenu .wp-block-table.carte td {
	border: 0; border-bottom: 1px solid var(--c92-filet-fin);
	padding: .85rem 0; vertical-align: baseline;
}
.c92-contenu .wp-block-table.carte tr:last-child td { border-bottom: 0; }
.c92-contenu .wp-block-table.carte td:last-child {
	text-align: right; white-space: nowrap; padding-left: 1.5rem;
	color: var(--c92-gris); font-variant-numeric: tabular-nums;
}
.c92-contenu .wp-block-table.carte { margin-bottom: 2.5rem; }
.c92-contenu .wp-block-table.carte figcaption { display: none; }

/* Deux colonnes pour la carte sur grand écran */
.c92-contenu .wp-block-columns { display: flex; gap: clamp(2rem, 5vw, 4.5rem); flex-wrap: wrap; }
.c92-contenu .wp-block-column { flex: 1 1 320px; min-width: 0; }

/* ─────────────────────────────────────────────────────────
   Pied de page
   ───────────────────────────────────────────────────────── */
.c92-pied { padding: clamp(3rem, 6vw, 4.5rem) var(--c92-marge); border-top: 1px solid var(--c92-filet-fin); }
.c92-pied__haut {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem; max-width: var(--c92-large); margin: 0 auto;
}
.c92-pied .c92-marque { font-size: 1.6rem; text-shadow: none; }
.c92-pied .c92-marque img { max-height: 40px; filter: none; }
.c92-pied ul { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.c92-pied ul a { display: inline-flex; align-items: center; min-height: 44px; }
.c92-pied a { color: var(--c92-gris); transition: color .3s var(--c92-ease); }
.c92-pied a:hover { color: var(--c92-blanc); }

.c92-mention {
	max-width: var(--c92-large); margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
	padding-top: 1.6rem; border-top: 1px solid var(--c92-filet-fin);
	color: #6E6660; font-size: .78rem; line-height: 1.7;
}
.c92-mention strong { color: var(--c92-ambre); font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   Adaptation aux écrans intermédiaires
   ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.c92-menu__colonnes { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────
   Adaptation aux petits écrans
   ───────────────────────────────────────────────────────── */
@media (max-width: 820px) {
	:root { --c92-entete-h: 62px; }
	/* Rien à défaire pour le bloc des faits : sa colonne unique est l'état de
	   base, et les trois colonnes ne sont écrites que plus haut, dans une
	   requête « min-width ». Les blocs s'empilent donc dans l'ordre du
	   document — heures, adresse, contact, plan — sans qu'on ait à annuler
	   quoi que ce soit. */
	/* La mosaïque se défait en colonne unique : un pavé asymétrique sur un
	   écran de téléphone ne raconte plus rien et coupe les images. */
	.c92-bande { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
	.c92-bande figure { aspect-ratio: 3 / 2; }
	.c92-bande figure:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
	.c92-menu__colonnes { grid-template-columns: 1fr; gap: 2.4rem; }
	.c92-menu__actions .c92-bouton { flex: 1 1 100%; text-align: center; }
	.c92-annonce { flex-direction: column; align-items: flex-start; }

	.c92-bascule { display: block; }
	/* Le menu déroulant descend du bas de la bande, sur toute sa largeur.
	   Il se positionne par rapport à l'en-tête, qui est collant donc
	   positionné. */
	.c92-nav ul {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; gap: 0;
		background: rgba(11, 10, 9, .97);
		border-bottom: 1px solid var(--c92-filet-fin);
		padding: .25rem var(--c92-marge) 1rem;
	}
	.c92-nav.est-ouvert ul { display: flex; }
	.c92-nav ul li { border-bottom: 1px solid var(--c92-filet-fin); }
	.c92-nav ul li:last-child { border-bottom: 0; }
	.c92-nav ul a { display: block; padding: 1rem 0; font-size: .95rem; }

	/* Le bouton de commande reste dans la barre, mais resserré. */
	.c92-nav .c92-commande { padding: 0 .85rem; font-size: .625rem; letter-spacing: .12em; }
	.c92-marque img, .c92-marque .custom-logo { max-height: 38px; }

	/* Les coordonnées de l'accueil sont des liens qu'on touche du pouce. */
	.c92-faits h2 a,
	.c92-faits p a { display: inline-flex; align-items: center; min-height: 44px; }

	/* Les liens dans le texte — téléphone, itinéraire, courriel — gagnent de
	   la surface tactile sans que la ligne bouge : un rembourrage vertical
	   sur un élément en ligne agrandit la cible, pas la mise en page. */
	.c92-contenu p a,
	.c92-contenu li a { padding: .4rem 0; }

	/* La bande reste collée en haut sur téléphone aussi — c'est là qu'elle
	   sert le plus — mais elle cesse de chevaucher la photographie : le titre
	   du héros n'a pas la place de passer dessous sur un écran étroit. */
	.c92-entete:not(.c92-entete--plein) { margin-bottom: 0; }
	.c92-heros { height: min(78vh, 620px); height: min(78svh, 620px); }
	.c92-pied__haut { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────
   Téléphones étroits
   L'en-tête porte quatre choses — logo, menu, langue, commande.
   En dessous de 430 px on resserre les espaces avant de rogner
   quoi que ce soit, et le logo cède la place en dernier.
   ───────────────────────────────────────────────────────── */
@media (max-width: 430px) {
	.c92-entete__corps { gap: .6rem; padding-left: 1rem; padding-right: 1rem; }
	.c92-nav { gap: .55rem; }
	.c92-langue { padding: 2px; }
	.c92-nav .c92-langue a,
	.c92-langue a, .c92-langue span { padding: 0 .3rem; min-width: 30px; min-height: 30px; }
	.c92-nav .c92-commande { padding: 0 .65rem; font-size: .6rem; letter-spacing: .08em; }
	.c92-marque img, .c92-marque .custom-logo { max-height: 32px; }
	.c92-bascule { width: 40px; height: 40px; }
	.c92-bascule span { left: 10px; }
	.c92-bascule span:nth-child(1) { top: 14px; }
	.c92-bascule span:nth-child(2) { top: 23px; }
}

/* Sous 375 px, les quatre éléments ne tiennent plus sur une ligne sans que
   le bouton du menu touche le bord. Plutôt que de tout rapetisser jusqu'à
   l'illisible, « Commander » passe sur sa propre ligne, pleine largeur :
   le geste le plus utile de la page devient aussi le plus facile à viser. */
@media (max-width: 374px) {
	.c92-entete__corps {
		gap: .5rem; padding-left: .85rem; padding-right: .85rem;
		/* La bande grandit d'une ligne : sa hauteur n'est plus fixe. */
		height: auto; padding-top: .6rem; padding-bottom: .6rem;
	}
	.c92-nav { flex-wrap: wrap; row-gap: .7rem; justify-content: flex-end; }
	.c92-langue { order: 1; }
	.c92-bascule { order: 2; }
	.c92-nav .c92-commande {
		order: 3; flex: 1 0 100%; width: 100%;
		font-size: .625rem; letter-spacing: .12em;
	}
	.c92-marque img, .c92-marque .custom-logo { max-height: 30px; }

	/* La bande a grandi d'une ligne ; le menu déroulant la suit tout seul,
	   puisqu'il part de son bas. */
}

/* Sans JavaScript le menu reste accessible : il s'affiche en permanence. */
.no-js .c92-bascule { display: none; }
@media (max-width: 820px) {
	.no-js .c92-nav ul { display: flex; position: static; background: none; border-top: 0; padding: 0; }
}

/* ─────────────────────────────────────────────────────────
   Apparitions au défilement
   L'état de départ est enfermé derrière « c92-anime », drapeau
   que le document ne reçoit que si le navigateur sait observer
   l'entrée d'un élément et que le visiteur n'a pas demandé
   moins de mouvement. Écrite sans ce garde-fou, l'opacité à
   zéro rendrait la page entièrement blanche pour ces
   visiteurs : la règle plus bas coupe justement la transition
   qui devait la lever.
   ───────────────────────────────────────────────────────── */
.c92-anime .c92-annonce,
.c92-anime .c92-credo,
.c92-anime .c92-menu,
.c92-anime .c92-faits > div,
.c92-anime .c92-bande figure,
.c92-anime .c92-artisan,
.c92-anime .c92-appel,
.c92-anime .c92-titre-page,
.c92-anime .c92-contenu {
	opacity: 0;
	/* Seulement transform et opacity : tout le reste ferait recalculer la
	   mise en page à chaque image. */
	transform: translateY(40px);
	transition: opacity .8s var(--c92-ease), transform .8s var(--c92-ease);
}
/*
 * La classe est doublée exprès, et ce n'est pas une coquetterie.
 *
 * Deux sélecteurs de la liste ci-dessus visent un élément et non une classe :
 * « .c92-anime .c92-bande figure » et « .c92-anime .c92-faits > div ». Ils
 * pèsent deux classes et un élément ; « .c92-anime .est-visible » n'en pesait
 * que deux classes. La règle qui cache l'emportait donc sur celle qui révèle,
 * et la bande photo comme le bloc des heures restaient invisibles pour
 * toujours.
 *
 * Répéter « .c92-anime » fait passer cette règle à trois classes. Le nombre de
 * classes se compare avant le nombre d'éléments, donc elle l'emporte sur
 * n'importe quel sélecteur de la liste — y compris ceux qu'on ajoutera plus
 * tard sans y penser. Le garde-fou tient tout seul.
 */
.c92-anime.c92-anime .est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	/* Ceinture et bretelles : même si le drapeau avait été posé, rien ne
	   reste caché. */
	.c92-anime .c92-annonce,
	.c92-anime .c92-credo,
	.c92-anime .c92-menu,
	.c92-anime .c92-faits > div,
	.c92-anime .c92-bande figure,
	.c92-anime .c92-artisan,
	.c92-anime .c92-appel,
	.c92-anime .c92-titre-page,
	.c92-anime .c92-contenu { opacity: 1; transform: none; }
}

/* Photographie carrée ou verticale : le cadre ne lui impose aucune forme.
   Elle garde ses proportions et s'arrête à 460 px, soit bien moins que ses
   1081 px réels — elle n'est donc jamais agrandie, même sur un écran à double
   densité, et reste nette. */
.c92-banniere.c92-banniere--portrait,
.c92-contenu > .c92-banniere.c92-banniere--portrait {
	aspect-ratio: auto;
	max-width: 460px;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}
.c92-banniere.c92-banniere--portrait img { height: auto; object-fit: contain; }

/* La photographie occupe une colonne de droite qui part tout en haut de la
   page, à hauteur du titre — et non sous lui, ce qui laissait un grand vide
   dans le quart supérieur droit.

   C'est pour cela que page.php la sort du contenu et en fait un enfant direct
   de <main> : la grille est posée sur <main>, le titre et le contenu vont en
   colonne 1, l'image en colonne 2 sur toute la hauteur.

   <main> reprend ici la largeur maximale et les marges latérales que ses deux
   enfants portaient chacun de leur côté ; ceux-ci les perdent, sinon ils se
   recentreraient à l'intérieur de leur propre colonne. La marge basse du
   contenu, elle, est conservée.

   La colonne de texte est bornée à 560 px : les deux colonnes se tiennent
   ainsi à gauche au lieu de s'écarter aux deux bords de l'écran. */
@media (min-width: 1101px) {
	main:has(> .c92-banniere--portrait) {
		display: grid;
		/* Le texte à gauche, la photographie à droite, chacun calé sur sa marge :
		   le titre centré au-dessus tient la composition, ce qu'un titre aligné à
		   gauche ne faisait pas. */
		grid-template-columns: minmax(0, 620px) minmax(0, 540px);
		column-gap: clamp(1.8rem, 3vw, 3rem);
		justify-content: space-between;
		align-items: start;
		max-width: var(--c92-large);
		margin-inline: auto;
		padding-inline: var(--c92-marge);
	}
	main:has(> .c92-banniere--portrait) > * {
		grid-column: 1;
		min-width: 0;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}
	/* Le titre coiffe les deux colonnes et se centre : c'est lui qui relie le
	   texte à gauche et la photographie à droite.

	   Sa petite étiquette disparaît. Sur Contact elle disait « Nous trouver »,
	   mot pour mot le premier titre du contenu trois lignes plus bas. */
	main:has(> .c92-banniere--portrait) > .c92-titre-page {
		grid-column: 1 / -1;
		grid-row: 1;
		text-align: center;
	}
	main:has(> .c92-banniere--portrait) > .c92-titre-page .c92-etiquette { display: none; }

	main:has(> .c92-banniere--portrait) > .c92-contenu { grid-row: 2; }

	main:has(> .c92-banniere--portrait) > .c92-banniere--portrait {
		grid-column: 2;
		grid-row: 2 / span 60;
		max-width: 540px;
		/* La même respiration que le titre se donne au-dessus de lui : sans elle,
		   la photographie viendrait toucher la bande d'en-tête. L'expression est
		   reprise telle quelle du padding de .c92-titre-page, pour que les deux
		   colonnes démarrent toujours sur la même ligne. */
		margin: 0;
	}
}

/* ─────────────────────────────────────────────────────────
   L'ardoise des événements
   Une vraie écriture manuscrite, sous licence libre (SIL OFL),
   hébergée avec les autres : 18 Ko, un seul fichier latin.
   ───────────────────────────────────────────────────────── */
@font-face {
	font-family: 'Gloria Hallelujah';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gloria-hallelujah-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dès qu'il y a une ardoise, l'accroche cesse d'être centrée : les deux blocs
   se partagent la largeur, le mot du café à gauche, le tableau à droite.

   Les sélecteurs doublent la classe pour passer devant « .c92-credo p », qui
   pèse déjà une classe et un élément. */
.c92-credo--ardoise {
	max-width: var(--c92-large);
	margin: 0 auto;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	text-align: left;
}
@media (min-width: 901px) {
	.c92-credo--ardoise { grid-template-columns: 1.1fr .9fr; }
}
.c92-credo.c92-credo--ardoise p { margin: 0; max-width: 17ch; }

.c92-ardoise {
	position: relative;
	padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.7rem, 3vw, 2.4rem);
	border-radius: 10px;
	background: #171B19;
	/* Le cadre de bois, en un seul trait plutôt qu'une image. */
	border: 10px solid #2C231A;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 60px rgba(0, 0, 0, .55);
	/* Une ardoise accrochée par un humain n'est jamais tout à fait d'aplomb. */
	transform: rotate(-.75deg);
}
/* La poussière de craie : deux voiles très pâles, jamais une image. */
.c92-ardoise::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(70% 50% at 22% 18%, rgba(255, 255, 255, .05), transparent 70%),
		radial-gradient(60% 45% at 80% 85%, rgba(255, 255, 255, .035), transparent 70%);
}
.c92-ardoise__titre {
	margin: 0 0 1.1rem;
	font-family: 'Gloria Hallelujah', 'Archivo', sans-serif;
	font-size: clamp(1.2rem, 2.1vw, 1.55rem);
	font-weight: 400; letter-spacing: 0; line-height: 1.25;
	color: var(--c92-ambre);
}
.c92-ardoise ul { margin: 0; padding: 0; list-style: none; }
.c92-ardoise li {
	font-family: 'Gloria Hallelujah', 'Archivo', sans-serif;
	font-size: clamp(.92rem, 1.5vw, 1.05rem);
	line-height: 1.7;
	color: #E6E3DA;
	/* La craie ne laisse jamais une arête nette. */
	text-shadow: 0 0 1px rgba(255, 255, 255, .35);
}
.c92-ardoise li + li { margin-top: .6rem; }

@media (max-width: 560px) {
	/* Sur un téléphone, l'inclinaison ne se lit plus comme un parti pris ;
	   elle se lit comme un défaut. */
	.c92-ardoise { transform: none; border-width: 7px; }
}

/* ─────────────────────────────────────────────────────────
   La bande d'appel à l'action
   Posée hors de <main> par page.php, donc hors de la grille :
   elle touche les deux bords de l'écran sans aucune marge
   négative, et vient se coller au pied de page.
   ───────────────────────────────────────────────────────── */
.c92-appel-bande {
	background: var(--c92-ambre);
	padding: clamp(3rem, 6vw, 5rem) var(--c92-marge) clamp(3.5rem, 7vw, 5.5rem);
}
.c92-appel-bande__corps {
	max-width: var(--c92-large);
	margin: 0 auto;
}

/* Sur ce fond clair, tout repasse en noir. C'est le seul endroit du site où la
   polarité s'inverse, et c'est précisément ce qui fait que la bande s'impose
   comme un appel à l'action plutôt que comme une section de plus. */
.c92-appel-bande h2 {
	margin: 0 0 1rem;
	color: var(--c92-noir);
	font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
}
.c92-appel-bande h2 + h2 { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.c92-appel-bande p,
.c92-appel-bande li {
	color: rgba(11, 10, 9, .8);
	line-height: 1.8;
}
.c92-appel-bande p { margin: 0 0 clamp(2.2rem, 4vw, 3.2rem); max-width: 56ch; }
.c92-appel-bande ul { margin: 0; padding-left: 1.2rem; max-width: 56ch; }
.c92-appel-bande li { margin-bottom: .5rem; }
.c92-appel-bande li::marker { color: rgba(11, 10, 9, .45); }
.c92-appel-bande a {
	color: var(--c92-noir);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(11, 10, 9, .45);
	text-underline-offset: .25em;
	border-bottom: 0;
}
.c92-appel-bande a:hover { text-decoration-color: var(--c92-noir); }

/* La photographie garde ses proportions, toujours.

   J'ai essayé de l'étirer sur la hauteur de la colonne de texte pour que les
   deux se terminent sur la même ligne. À 540 × 874 dans un fichier qui fait
   1060 × 1000, le « cover » coupait 42 % de la largeur : l'auvent et la vitrine
   partaient hors cadre. Une égalité de hauteur ne vaut pas qu'on charcute la
   seule photographie du café. */
@media (min-width: 1101px) {
	main:has(> .c92-banniere--portrait) > .c92-banniere--portrait {
		align-self: start;
		grid-row: 2;
	}
	main:has(> .c92-banniere--portrait) > .c92-banniere--portrait img {
		height: auto;
		object-fit: contain;
	}

	/* Quand la bande suit, le contenu perd sa marge basse : elle ajoutait 128 px
	   de vide sous le dernier paragraphe, et comme la photographie s'étire sur
	   la hauteur de la colonne, c'est elle qui payait ce vide en recadrage. */
	body:has(.c92-appel-bande) main > .c92-contenu { padding-bottom: 0; }

	/* Le rythme vertical se resserre dans cette colonne. Les écarts du contenu
	   courant — 64 px au-dessus de chaque titre, 48 autour du tableau — sont
	   calibrés pour une page qui se lit seule, en pleine largeur. Ici la colonne
	   a une voisine : c'est la photographie qui donne la mesure, et 323 px de
	   marges la faisaient dépasser du simple au double. */
	body:has(.c92-appel-bande) main > .c92-contenu > h2 { margin-top: 2.1rem; margin-bottom: .7rem; }
	body:has(.c92-appel-bande) main > .c92-contenu > h2:first-child { margin-top: 0; }
	body:has(.c92-appel-bande) main > .c92-contenu > p { margin-bottom: .9rem; }
	body:has(.c92-appel-bande) main > .c92-contenu > figure { margin: 1.1rem 0 .6rem; }

	/* L'adresse et les coordonnées se partagent la première rangée : à elle
	   seule, l'adresse laissait un grand vide à sa droite, et « Nous joindre »
	   allait chercher trois lignes tout en bas de la colonne pour rien.

	   Les deux blocs sont des groupes posés dans l'éditeur, repérés par leur
	   classe — pas par leur rang. Le reste du contenu occupe les deux colonnes
	   et s'empile dessous, dans l'ordre où il est écrit. */
	body:has(.c92-appel-bande) main > .c92-contenu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(1.5rem, 3vw, 2.6rem);
		align-items: start;
	}
	body:has(.c92-appel-bande) main > .c92-contenu > * { grid-column: 1 / -1; }
	body:has(.c92-appel-bande) main > .c92-contenu > .c92-bloc-adresse { grid-column: 1; grid-row: 1; }
	body:has(.c92-appel-bande) main > .c92-contenu > .c92-bloc-joindre { grid-column: 2; grid-row: 1; }
	body:has(.c92-appel-bande) main > .c92-contenu > .c92-bloc-adresse > :first-child,
	body:has(.c92-appel-bande) main > .c92-contenu > .c92-bloc-joindre > :first-child { margin-top: 0; }

	/* La bande beige ne colle plus au bas de la photographie. */
	body:has(.c92-appel-bande) main { padding-bottom: clamp(3rem, 6vw, 5rem); }
}

/* ─────────────────────────────────────────────────────────
   La page « Notre histoire » : chapitres en alternance
   Un chapitre = texte d'un côté, photographie de l'autre. Le premier a la
   photo à droite ; --gauche l'inverse ; --large pose la photo sur toute la
   largeur, texte centré dessous. Repérés par leur classe, jamais par leur rang.
   ───────────────────────────────────────────────────────── */

body:has(.c92-chapitre) .c92-contenu > * { max-width: none; }

.c92-chapitre { margin: 0 0 clamp(2.6rem, 6vw, 4.6rem); }

.c92-chapitre__surtitre { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--c92-ambre); }
.c92-chapitre h2 { margin: 0 0 .9rem; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.c92-chapitre p:not(.c92-chapitre__surtitre) { margin: 0 0 1rem; line-height: 1.7; }
.c92-chapitre p:last-of-type { margin-bottom: 0; }
.c92-chapitre > .wp-block-group__inner-container > figure { margin: 1.4rem 0 0; }
.c92-chapitre figure img { display: block; width: 100%; height: auto; border-radius: var(--c92-rayon); }

.c92-intro-page { margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); max-width: 62ch; text-align: center; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.7; color: #D8D2CB; }
.c92-fin-page { text-align: center; }

@media (min-width: 861px) {
	.c92-chapitre > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
	.c92-chapitre > .wp-block-group__inner-container > * { grid-column: 1; }
	.c92-chapitre > .wp-block-group__inner-container > figure { grid-column: 2; grid-row: 1 / -1; margin: 0; }
	.c92-chapitre--gauche > .wp-block-group__inner-container > * { grid-column: 2; }
	.c92-chapitre--gauche > .wp-block-group__inner-container > figure { grid-column: 1; }
	.c92-chapitre--large > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; text-align: center; }
	.c92-chapitre--large > .wp-block-group__inner-container > * { grid-column: 1; justify-self: center; width: min(100%, 62ch); margin-inline: 0; }
	.c92-chapitre--large > .wp-block-group__inner-container > figure { grid-column: 1; grid-row: auto; order: -1; justify-self: stretch; width: 100%; max-width: none; margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem); }
	.c92-chapitre--large > .wp-block-group__inner-container > figure.c92-emplacement { aspect-ratio: 21 / 9; }
}

/* Emplacement de photographie. Un cadre vide, au bon format, qui dit ce qu'on attend de lui.
   Le café remplace le bloc par une vraie image dans l'éditeur, et l'emplacement disparaît
   avec lui — rien à nettoyer dans le thème. */
.c92-emplacement { display: flex; align-items: center; justify-content: center; padding: 1.2rem; aspect-ratio: 4 / 3; border: 1px dashed var(--c92-filet); border-radius: var(--c92-rayon); background: rgba(255, 255, 255, .025); text-align: center; }
.c92-emplacement span { max-width: 26ch; font-size: .82rem; line-height: 1.6; color: var(--c92-gris); }

/* Le titre de la page est centré, couleur d'accent. */
body:has(.c92-chapitre) .c92-titre-page { text-align: center; padding-bottom: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 0; }
body:has(.c92-chapitre) .c92-titre-page h1 { color: var(--c92-ambre); text-transform: uppercase; letter-spacing: -.02em; }

/* ─────────────────────────────────────────────────────────
   Bande beige : « Commander » et « Sur place » côte à côte
   Deux colonnes de même hauteur, titres alignés sur la même
   ligne. Sous 761 px, tout reste empilé comme avant.
   ───────────────────────────────────────────────────────── */
@media (min-width: 761px) {
	.c92-appel-bande__corps > .c92-appel-bande__corps-grille,
	.c92-appel-bande__corps > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 6rem);
		align-items: start;
	}
	.c92-appel-bande__corps > .wp-block-group__inner-container > h2 { margin: 0 0 1rem; grid-row: 1; }
	.c92-appel-bande__corps > .wp-block-group__inner-container > p,
	.c92-appel-bande__corps > .wp-block-group__inner-container > ul { margin: 0; grid-row: 2; max-width: 46ch; }
	.c92-appel-bande__corps > .wp-block-group__inner-container > h2:nth-of-type(1),
	.c92-appel-bande__corps > .wp-block-group__inner-container > p { grid-column: 1; }
	.c92-appel-bande__corps > .wp-block-group__inner-container > h2:nth-of-type(2),
	.c92-appel-bande__corps > .wp-block-group__inner-container > ul { grid-column: 2; }
	.c92-appel-bande { padding-block: clamp(2.6rem, 5vw, 4rem); }
}

/* ─────────────────────────────────────────────────────────
   L'accroche en serif (Fraunces, graisse 500, romain + italique)
   Deux fichiers de 18 et 23 Ko, hébergés avec le thème (licence SIL OFL
   à côté, dans assets/fonts). Les mots entre astérisques dans le
   Personnalisateur passent en italique doré.
   ───────────────────────────────────────────────────────── */
@font-face {
	font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("../fonts/fraunces-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap;
	src: url("../fonts/fraunces-500-italic.woff2") format("woff2");
}
.c92-credo p {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
}
.c92-credo p em { font-style: italic; color: var(--c92-ambre); }
/* La ligne sous l'accroche reste dans la police du site. */
.c92-credo p span { font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; }
.c92-credo.c92-credo--ardoise p { max-width: 18ch; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }

/* ─────────────────────────────────────────────────────────
   Texte libre + diaporama, sur une même rangée
   La colonne de droite reprend les proportions de l'accroche, donc le
   diaporama tombe pile sous le tableau noir.

   Une seule photo à la fois, au centre, dans son format : le cadre a une
   hauteur fixe et la largeur suit l'image, rien n'est recadré ni déformé.
   La précédente et la suivante restent derrière, inclinées en perspective :
   seul un coin dépasse du bord de la photo centrale. Le défilement est
   sans fin (la dernière photo ramène à la première) et se met en pause au
   survol, au clavier, hors écran, ou au bouton prévu à cet effet.
   ───────────────────────────────────────────────────────── */
.c92-duo { max-width: var(--c92-large); margin: 0 auto; padding: 0 var(--c92-marge) var(--c92-section); }
.c92-duo > .c92-contenu { max-width: none; margin: 0; padding: 0; }
.c92-duo > .c92-contenu > :last-child { margin-bottom: 0; }

.c92-diaporama { position: relative; min-width: 0; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.c92-duo > .c92-diaporama:first-child { margin-top: 0; }

.c92-diaporama__scene {
	position: relative;
	height: clamp(320px, 78vw, 440px);
	perspective: 1200px;
	touch-action: pan-y;
	/* Les voisines dépassent de la scène : on les coupe, sinon la page défile en largeur sur téléphone. */
	overflow: hidden; overflow: clip;
	}
.c92-diaporama__vue {
	position: absolute; top: 0; left: 50%;
	height: 100%; margin: 0;
	overflow: hidden; border-radius: var(--c92-rayon);
	opacity: 0; pointer-events: none;
	transform: translateX(-50%) scale(.7);
	transition: transform .9s cubic-bezier(.22, .7, .2, 1), opacity .9s ease, filter .9s ease;
	will-change: transform;
}
.c92-diaporama__vue img { display: block; height: 100%; width: auto; max-width: none; }

.c92-diaporama__vue[data-off="0"] { opacity: 1; z-index: 3; transform: translateX(-50%); pointer-events: auto; }
.c92-diaporama__vue[data-off="-1"] { opacity: .92; z-index: 2; filter: brightness(.55); transform: translateX(calc(-50% - 45%)) rotateY(68deg) scale(.9); }
.c92-diaporama__vue[data-off="1"] { opacity: .92; z-index: 2; filter: brightness(.55); transform: translateX(calc(-50% + 45%)) rotateY(-68deg) scale(.9); }
.c92-diaporama__vue[data-off="-2"] { z-index: 1; transform: translateX(calc(-50% - 60%)) rotateY(68deg) scale(.8); }
.c92-diaporama__vue[data-off="2"] { z-index: 1; transform: translateX(calc(-50% + 60%)) rotateY(-68deg) scale(.8); }

/* Deux flèches seules, sans cercle : le geste suffit. */
.c92-diaporama__commandes { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: .9rem; }
.c92-diaporama__fleche { display: grid; place-items: center; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--c92-blanc); cursor: pointer; transition: color .25s, transform .25s var(--c92-ease); }
.c92-diaporama__fleche:hover { color: var(--c92-ambre); }
.c92-diaporama__fleche--prec:hover { transform: translateX(-3px); }
.c92-diaporama__fleche--suiv:hover { transform: translateX(3px); }
.c92-diaporama__fleche:focus-visible { outline: 2px solid var(--c92-ambre); outline-offset: 2px; }
.c92-diaporama__fleche svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
	.c92-diaporama__vue { transition: none; }
}

@media (min-width: 901px) {
	.c92-duo--double {
		display: grid; grid-template-columns: 1.1fr .9fr;
		gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
	}
	.c92-duo--double > .c92-diaporama { margin-top: 0; }
	.c92-diaporama__scene { height: clamp(340px, 30vw, 440px); }
}


/* Pied de page compact : à gauche logo + horaires, au centre le contact, à droite le plan et l’adresse en petit. */
.c92-pied { padding-block: clamp(2rem, 4vw, 3rem); }
.c92-pied__grille { display: grid; grid-template-columns: 1fr; gap: 1.8rem; max-width: var(--c92-large); margin: 0 auto; }
.c92-pied__marque { margin-bottom: 1.4rem; }
.c92-pied__titre { margin: 0 0 .55rem; font-size: .6875rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--c92-blanc); }
.c92-pied__bloc p, .c92-pied__adresse { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--c92-gris); }
.c92-pied__adresse { margin-top: .7rem; font-size: .8125rem; }
.c92-pied .c92-pied__bloc p a { color: var(--c92-blanc); text-decoration: none; }
.c92-pied .c92-pied__bloc p a:hover { color: var(--c92-ambre); }
.c92-pied .c92-pied__lien { display: inline-flex; align-items: center; min-height: 36px; color: var(--c92-ambre); }
.c92-pied .c92-pied__lien:hover { color: var(--c92-blanc); }
.c92-pied__plan { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--c92-filet-fin); border-radius: var(--c92-rayon); }
.c92-pied__plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: brightness(.92); }
.c92-pied .c92-pied__reseaux { margin-top: .5rem; gap: .2rem 1.2rem; font-size: .8125rem; }
.c92-pied .c92-pied__reseaux a { color: var(--c92-gris); }
.c92-pied .c92-pied__reseaux a:hover { color: var(--c92-blanc); }
.c92-pied__grille + .c92-mention { max-width: var(--c92-large); margin: 1.6rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--c92-filet-fin); }
@media (min-width: 561px) { .c92-pied__plan { max-width: 360px; } }
@media (min-width: 861px) { .c92-pied__grille { grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) minmax(220px, 290px); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .c92-pied__plan { max-width: none; } }
/* Tablette du pied : logo + horaires et contact côte à côte, plan et adresse dessous. */
@media (min-width: 561px) and (max-width: 860px) { .c92-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c92-pied__lieu { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 1.4rem; align-items: start; } .c92-pied__lieu .c92-pied__adresse { margin-top: 0; } }

/* Pied de page, version resserrée : moins haut, titres Horaires et Contact sur la même ligne. */
.c92-pied { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.c92-pied__marque { margin-bottom: 1rem; }
.c92-pied__bloc p { line-height: 1.55; }
.c92-pied__plan { aspect-ratio: 2 / 1; }
.c92-pied__adresse { margin-top: .55rem; }
@media (min-width: 861px) {
	.c92-pied__grille { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "marque marque lieu" "horaires contact lieu"; column-gap: clamp(3rem, 7vw, 7rem); row-gap: 0; align-items: start; }
	.c92-pied__gauche { display: contents; }
	.c92-pied__marque { grid-area: marque; }
	.c92-pied__gauche .c92-pied__bloc { grid-area: horaires; }
	.c92-pied__contact { grid-area: contact; }
	.c92-pied__lieu { grid-area: lieu; justify-self: end; width: min(100%, 290px); }
}

/* Pied de page : contact sous le plan, plus d’adresse écrite. */
.c92-pied__plan { aspect-ratio: 5 / 2; }
.c92-pied__lieu .c92-pied__contact { margin-top: .75rem; }
@media (min-width: 861px) { .c92-pied__grille { grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "marque lieu" "horaires lieu"; } }
@media (min-width: 561px) and (max-width: 860px) { .c92-pied__lieu { grid-column: auto; display: block; } }

/* ─────────────────────────────────────────────────────────
   Finitions du 2 octobre (revue Emil Kowalski)
   ───────────────────────────────────────────────────────── */
.c92-insecable { white-space: nowrap; }

/* Apparitions : plus vives (0,5 s), décalées de quelques dizaines de ms. */
.c92-anime .c92-annonce, .c92-anime .c92-credo, .c92-anime .c92-menu, .c92-anime .c92-artisan, .c92-anime .c92-appel, .c92-anime .c92-titre-page, .c92-anime .c92-contenu { transition: opacity .5s var(--c92-ease), transform .55s var(--c92-ease); }
.c92-anime .c92-credo { transition-delay: 40ms; }
.c92-anime .c92-contenu { transition-delay: 60ms; }
.c92-anime .c92-annonce { transition-delay: 100ms; }
.c92-artisan__photo img { transition: transform .6s var(--c92-ease); }

/* Retour au toucher sur les flèches du carrousel. */
.c92-diaporama__fleche:active { transform: scale(.9); }

/* Écrans tactiles : un tap ne doit pas laisser un effet de survol collé. */
@media (hover: none) {
	.c92-bouton:hover::after { transform: none; }
	.c92-artisan:hover .c92-artisan__photo img { transform: none; }
	.c92-diaporama__fleche--prec:hover, .c92-diaporama__fleche--suiv:hover { transform: none; }
}

/* Intitulés de la carte : un cran plus grands, plus contrastés. */
.c92-menu__colonne .c92-etiquette { font-size: .75rem; color: #C9C0B4; }

/* Téléphone : le nom du quartier reste d'un seul tenant, donc le titre rétrécit un peu au lieu de déborder. */
@media (max-width: 560px) { .c92-heros__titre { font-size: min(2.35rem, 8vw); } }

/* ─────────────────────────────────────────────────────────
   Finitions visuelles du 2 octobre (revue « haut de gamme »)
   Cadre double, surtitres en pastille, accroche agrandie,
   flèches en verre, apparition avec léger flou.
   ───────────────────────────────────────────────────────── */
/* Surtitres en pastille (titres de page + en-tête de la carte) */
.c92-titre-page .c92-etiquette, .c92-menu__entete .c92-etiquette { display: inline-block; vertical-align: top; padding: .55rem 1rem; line-height: 1; color: #C9C0B4; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; }
.c92-menu__entete .c92-etiquette { margin-bottom: 1.2rem; }

/* Phrase à côté du carrousel : devient une vraie accroche, alignée sur le haut de la photo */
.c92-duo.c92-duo--double { align-items: start; }
.c92-duo > .c92-contenu p { max-width: 24ch; margin-top: .4rem; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; letter-spacing: -.015em; color: var(--c92-blanc); text-wrap: balance; }

/* Cadre double du carrousel : coque translucide + filet, concentrique à la photo (box-shadow = aucune dimension changée) */
.c92-diaporama__vue { top: 7px; height: calc(100% - 14px); box-shadow: 0 0 0 6px rgba(255, 255, 255, .05), 0 0 0 7px rgba(255, 255, 255, .13); }

/* Flèches : ronds en verre de 44 px */
.c92-diaporama__fleche { width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 1px rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) { .c92-diaporama__fleche:hover { background: rgba(255, 255, 255, .12); } }

/* La carte : cadre double (coque + noyau), même langage que le carrousel */
.c92-menu__colonnes { padding: clamp(1.5rem, 3.4vw, 2.6rem); background: rgba(255, 255, 255, .025); border-radius: calc(var(--c92-rayon) + 8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 6px rgba(255, 255, 255, .03), 0 0 0 7px rgba(255, 255, 255, .09); }

/* Apparition : fondu + montée + flou qui se dissipe */
.c92-anime .c92-annonce, .c92-anime .c92-credo, .c92-anime .c92-menu, .c92-anime .c92-artisan, .c92-anime .c92-appel, .c92-anime .c92-titre-page, .c92-anime .c92-contenu { filter: blur(6px); transition: opacity .5s var(--c92-ease), transform .55s var(--c92-ease), filter .5s var(--c92-ease); }
.c92-anime.c92-anime .est-visible { filter: none; }
@media (prefers-reduced-motion: reduce) { .c92-anime .c92-annonce, .c92-anime .c92-credo, .c92-anime .c92-menu, .c92-anime .c92-artisan, .c92-anime .c92-appel, .c92-anime .c92-titre-page, .c92-anime .c92-contenu { filter: none; } }

/* ─────────────────────────────────────────────────────────
   Rythme de l'accueil (2 octobre) : bande ambre « 92° », carrousel centré,
   carte sur papier clair (effet menu imprimé).
   ───────────────────────────────────────────────────────── */
/* 1. Le texte libre devient une bande ambre pleine largeur, placée avant le carrousel */
.c92-duo { max-width: none; padding: 0 0 var(--c92-section); }
.c92-duo.c92-duo--double { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.c92-duo > .c92-contenu { order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(1.4rem, 6vw, 6rem); padding: clamp(3.4rem, 8vw, 7rem) max(1.9rem, calc((100% - var(--c92-large)) / 2 + var(--c92-marge))); background: var(--c92-ambre); color: var(--c92-noir); }
.c92-duo > .c92-contenu::before { content: "92°"; content: "92°" / ""; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; font-style: italic; font-size: clamp(4.6rem, 19vw, 17rem); line-height: .8; letter-spacing: -.05em; }
.c92-duo > .c92-contenu p { margin: 0; max-width: 20ch; color: var(--c92-noir); font-size: clamp(1.3rem, 3vw, 2.6rem); line-height: 1.15; }
@media (max-width: 600px) { .c92-duo > .c92-contenu { grid-template-columns: 1fr; row-gap: 1.2rem; } .c92-duo > .c92-contenu::before { font-size: 5.6rem; } }

/* 2. Carrousel centré, seul */
.c92-duo .c92-diaporama { width: 100%; max-width: var(--c92-large); margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.6rem) var(--c92-marge) 0; box-sizing: border-box; }
@media (min-width: 901px) { .c92-duo .c92-diaporama__scene { height: clamp(400px, 38vw, 520px); } }

/* La bande et la carte apparaissent en fondu seulement (pleine largeur : pas de montée ni de flou) */
.c92-anime .c92-duo > .c92-contenu, .c92-anime .c92-menu { transform: none; filter: none; }

/* 3. La carte : le titre reste sur le fond sombre, les listes sont dans un encadré brun pâle (effet menu imprimé) */
.c92-menu { max-width: none; margin: 0; padding: clamp(4.4rem, 8vw, 7.5rem) max(1.9rem, calc((100% - var(--c92-large)) / 2 + var(--c92-marge))); }
.c92-menu .c92-menu__entete h2 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -.02em; line-height: 1.05; }
.c92-menu__colonnes { position: relative; display: block; padding: clamp(1.8rem, 3.6vw, 3rem); color: #1E1812; background-color: #E1CFB0; background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .3), transparent 60%), radial-gradient(90% 70% at 50% 100%, rgba(120, 84, 32, .14), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); border-radius: 6px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04); }
.c92-menu__colonnes::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(30, 24, 18, .42); outline: 1px solid rgba(30, 24, 18, .42); outline-offset: 4px; border-radius: 2px; pointer-events: none; }
.c92-menu .c92-menu__colonne { margin-bottom: 2.4rem; }
.c92-menu .c92-menu__colonne:last-child { margin-bottom: 0; }
.c92-menu .c92-menu__colonne .c92-etiquette { font-size: .8rem; color: #6B4616; border-bottom: 1px solid rgba(30, 24, 18, .28); }
.c92-menu__colonne li { padding: .8rem 0; border-bottom: 0; }
.c92-menu__nom { display: flex; align-items: baseline; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.2rem; color: #1E1812; }
.c92-menu__nom::after { content: ""; flex: 1 1 auto; min-width: 1.4rem; margin-left: .7rem; border-bottom: 1px dotted rgba(30, 24, 18, .45); transform: translateY(-.3em); }
.c92-menu__prix { color: #6B4616; font-weight: 600; }
@media (min-width: 861px) {
	.c92-menu { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
	.c92-menu__entete { grid-column: 1; grid-row: 1; margin-bottom: 0; }
	.c92-menu__actions { grid-column: 1; grid-row: 2; margin-top: 2rem; }
	.c92-menu__note { grid-column: 1; grid-row: 3; }
	.c92-menu__colonnes { grid-column: 2; grid-row: 1 / -1; }
}
@media (max-width: 860px) { .c92-menu__actions { margin-top: 2rem; } }

/* Onglets de la carte (Chaud / Froid / Cuisine) */
.c92-menu__onglets{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0 0 1.3rem;border-bottom:1px solid rgba(30,24,18,.28)}
.c92-menu__onglet{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:44px;padding:.5rem 1.35rem;border-radius:999px;border:1px solid rgba(30,24,18,.34);background:transparent;color:#1E1812;font:600 .78rem/1 var(--c92-police-texte, Archivo, sans-serif);letter-spacing:.14em;text-transform:uppercase;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s ease}
.c92-menu__onglet[aria-selected="true"]{background:#1E1812;border-color:#1E1812;color:#E8D8BB}
.c92-menu__onglet:active{transform:scale(.97)}
.c92-menu__onglet:focus-visible{outline:2px solid #6B4616;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.c92-menu__onglet[aria-selected="false"]:hover{background:rgba(30,24,18,.08);border-color:rgba(30,24,18,.6)}}
.c92-menu__colonnes--onglets .c92-menu__colonne{margin-bottom:0}
.c92-menu__colonnes--onglets .c92-menu__colonne[hidden]{display:none}
.c92-menu__colonnes--onglets .c92-menu__colonne > .c92-etiquette{display:none}
.c92-menu__colonnes--onglets .c92-menu__colonne:not([hidden]){animation:c92-panneau .3s var(--c92-ease, ease) both}
@keyframes c92-panneau{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.c92-menu__colonnes--onglets .c92-menu__colonne:not([hidden]){animation:none}.c92-menu__onglet{transition:none}}
@media (max-width:480px){.c92-menu__onglets{flex-wrap:nowrap;gap:.4rem}.c92-menu__onglet{flex:1 1 0;min-width:0;padding:.5rem .4rem;letter-spacing:.08em;font-size:.72rem;text-align:center}}


/* ═══════════════════════════════════════════════════════════
   Ajouts — 3 octobre 2026
   ═══════════════════════════════════════════════════════════ */

/* Le lieu passe sous l'accroche, dans la calligraphie du credo :
   italique et ambre, comme « culture », « art » et « latine ».
   Taille en retrait pour que le slogan garde le premier rôle. */
.c92-credo__lieu {
	margin: 1.5rem auto 0;
	max-width: 24ch;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.05rem, 2.2vw, 1.55rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--c92-ambre);
	text-wrap: balance;
}

/* Accent de la cliente. Contraste de 3,9:1 sur le noir : bon pour
   les aplats et les grands caractères, insuffisant pour du texte
   courant — qui reste sur --c92-ambre (9,6:1). */
:root { --c92-accent: #856e49; }

/* Aplats : le fond porte la couleur, le texte passe en blanc
   pour remonter à 4,9:1. */
.c92-nav .c92-commande {
	background: var(--c92-accent);
	border-color: var(--c92-accent);
	color: var(--c92-blanc);
}
.c92-annonce { background: var(--c92-accent); color: var(--c92-blanc); }
.c92-annonce p { color: rgba(255, 255, 255, .82); }

/* Halo décoratif derrière l'accroche. */
.c92-credo::before {
	background: radial-gradient(58% 70% at 50% 34%, rgba(133, 110, 73, .26), rgba(133, 110, 73, 0) 72%);
}
/* Quand l'ardoise est là, la section passe en deux colonnes :
   on force le lieu dans la première, sous l'accroche, plutôt que
   de le laisser filer dans la colonne de l'ardoise. */
.c92-credo--ardoise .c92-credo__lieu {
	grid-column: 1;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
/* ─────────────────────────────────────────────────────────
   Rappel de la semaine, en forme de verre
   Entrée en fondu + légère montée d'échelle : jamais depuis
   scale(0), rien n'apparaît de nulle part. Sortie plus courte
   que l'entrée, parce que le système répond plus vite qu'il
   ne se présente.
   ───────────────────────────────────────────────────────── */
.c92-verre {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: var(--c92-marge);
}
.c92-verre[hidden] { display: none; }

.c92-verre__fond {
	position: absolute; inset: 0;
	background: rgba(6, 5, 5, .62);
	opacity: 0;
	transition: opacity 260ms var(--c92-ease);
}
.c92-verre.est-ouvert .c92-verre__fond { opacity: 1; }

.c92-verre__boite {
	position: relative;
	width: min(330px, 100%);
	padding: clamp(2rem, 5vw, 2.5rem) clamp(1.5rem, 4vw, 1.9rem) clamp(2.8rem, 6vw, 3.4rem);
	color: var(--c92-blanc);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 14px 14px 46px 46px / 14px 14px 76px 76px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 44%),
		linear-gradient(180deg, rgba(133,110,73,0) 44%, var(--c92-accent) 100%),
		rgba(18, 15, 13, .82);
	box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3);
	opacity: 0;
	transform: scale(.96);
	transition: opacity 260ms var(--c92-ease), transform 260ms var(--c92-ease);
}
.c92-verre.est-ouvert .c92-verre__boite { opacity: 1; transform: scale(1); }

.c92-verre__fermer {
	position: absolute; top: .5rem; right: .5rem;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer;
	color: rgba(255, 255, 255, .72);
	font-size: 1.5rem; line-height: 1;
	border-radius: var(--c92-pastille);
	transition: color 160ms var(--c92-ease), transform 160ms var(--c92-ease);
}
.c92-verre__fermer:hover { color: var(--c92-blanc); }
.c92-verre__fermer:active { transform: scale(.94); }

.c92-verre__sur {
	margin: 0 0 .35rem;
	font-size: .72rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--c92-ambre);
}
.c92-verre__titre {
	margin: 0 0 1.1rem;
	font-family: var(--c92-script);
	font-size: clamp(1.7rem, 5vw, 2.1rem);
	font-weight: 400; letter-spacing: 0; line-height: 1.1;
}
.c92-verre__liste {
	margin: 0; padding: 0; list-style: none;
	display: grid; gap: .7rem;
}
.c92-verre__liste li {
	font-size: .95rem; line-height: 1.45;
	padding-left: 1rem; position: relative;
	color: rgba(255, 255, 255, .92);
}
.c92-verre__liste li::before {
	content: ""; position: absolute; left: 0; top: .6em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--c92-ambre);
}

/* Mouvement réduit : on garde le fondu, on retire le déplacement. */
@media ( prefers-reduced-motion: reduce ) {
	.c92-verre__boite { transform: none; transition: opacity 200ms linear; }
	.c92-verre.est-ouvert .c92-verre__boite { transform: none; }
	.c92-verre__fermer:active { transform: none; }
}


/* ─────────────────────────────────────────────────────────
   Artistes — page Expositions
   Même coque à double liseré que les artisans. La photo garde son format
   d'origine (jamais recadrée) : en bureau, photo et texte en alternance.
   ───────────────────────────────────────────────────────── */
.c92-artistes {
	display: grid;
	gap: clamp(1.4rem, 3vw, 2.2rem);
	margin: clamp(2rem, 4vw, 3rem) 0 clamp(2.4rem, 5vw, 4rem);
}

.c92-artistes__titre {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
}

.c92-artiste {
	padding: 6px;
	background: var(--c92-coque);
	border: 1px solid var(--c92-filet-fin);
	border-radius: var(--c92-rayon);
}

.c92-artiste__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	padding: 6px 6px 1.5rem;
	background: var(--c92-noir);
	border-radius: var(--c92-rayon-interne);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.c92-artiste__photo {
	overflow: hidden;
	border-radius: calc(var(--c92-rayon-interne) - 2px);
}

.c92-artiste__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.c92-artiste__texte {
	padding: 0 1rem;
}

.c92-artiste .c92-etiquette {
	display: block;
	color: var(--c92-ambre);
	margin-bottom: .7rem;
}

.c92-artiste h3 {
	margin: 0 0 .8rem;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

.c92-artiste p {
	max-width: 62ch;
	margin: 0 0 1.2rem;
	color: #D8D2CB;
	font-size: .95rem;
	line-height: 1.7;
}

.c92-artiste__liens {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c92-artiste .c92-lien-artisan {
	margin-top: 0;
}

@media (min-width: 800px) {
	.c92-artiste__corps {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 2.2rem;
		padding: 6px 1.8rem 6px 6px;
	}

	.c92-artiste:nth-of-type(even) .c92-artiste__corps {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		padding: 6px 6px 6px 1.8rem;
	}

	.c92-artiste:nth-of-type(even) .c92-artiste__photo {
		order: 2;
	}

	.c92-artiste__texte {
		padding: 0;
	}
}

/* La section des artistes sort de la colonne de texte (max-width des enfants directs de .c92-contenu). */
.c92-contenu > .c92-artistes {
	max-width: none;
}

/* Intertitres de la page Expositions (FR 105, EN 106) : alignés à gauche comme les paragraphes. La règle générale des intertitres centre la boîte (marge auto, 1180 px, !important) ; ici le texte est en colonne étroite, d'où un retrait d'environ 38 px en bureau. */
.page-id-105 .c92-contenu > .wp-block-heading,
.page-id-106 .c92-contenu > .wp-block-heading {
	margin-inline: 0 !important;
}


/* ─────────────────────────────────────────────────────────
   Téléphone (≤ 600 px) — revue générale du 25 octobre
   Tout est resserré d'un cran : espacement entre sections, en-tête, boutons,
   fiches d'artisans sur deux colonnes. Le bureau ne change pas.
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	:root {
		--c92-section: clamp(2.75rem, 11vw, 3.75rem);
		--c92-entete-h: 54px;
	}

	/* En-tête : même contenu, plus compact */
	.c92-entete__corps {
		gap: .55rem;
	}

	.c92-marque a,
	.c92-marque .custom-logo-link {
		min-height: 40px;
	}

	.c92-marque img,
	.c92-marque .custom-logo {
		max-height: 28px;
	}

	.c92-entete .c92-langue {
		padding: 2px;
	}

	.c92-entete .c92-langue span,
	.c92-entete .c92-langue a {
		width: 26px;
		height: 26px;
		font-size: .625rem;
	}

	.c92-entete a.c92-commande {
		min-height: 36px;
		height: 36px;
		padding-inline: .8rem;
		font-size: .58rem;
	}

	.c92-entete button.c92-bascule {
		width: 38px;
		height: 38px;
	}

	/* Boutons « Commander » du corps de page */
	.c92-bouton {
		gap: .7rem;
		padding: .4rem .4rem .4rem 1.25rem;
		font-size: .625rem;
	}

	.c92-bouton::after {
		width: 1.65rem;
		height: 1.65rem;
		font-size: .7rem;
	}

	/* Artisans : deux colonnes, fiches plus petites */
	.c92-artisans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .9rem;
	}

	.c92-artisan {
		padding: 4px;
	}

	.c92-artisan__corps {
		padding: 4px 4px 1rem;
	}

	.c92-artisan__photo {
		margin-bottom: .9rem;
	}

	.c92-artisan__texte {
		padding: 0 .5rem;
	}

	.c92-artisan h2 {
		margin-bottom: .45rem;
		font-size: 1rem;
	}

	.c92-artisan p {
		margin-bottom: .8rem;
		font-size: .8rem;
		line-height: 1.55;
	}

	.c92-artisan .c92-lien-artisan {
		font-size: .58rem;
		letter-spacing: .14em;
	}

	/* Artistes (page Expositions) */
	.c92-artiste__corps {
		gap: 1.1rem;
		padding-bottom: 1.2rem;
	}

	.c92-artiste__texte {
		padding: 0 .55rem;
	}

	.c92-artiste p {
		font-size: .9rem;
		line-height: 1.6;
	}
}

@media (max-width: 359px) {
	.c92-artisans {
		grid-template-columns: minmax(0, 1fr);
	}
}


@media (max-width: 600px) {
	/* Photo portrait de Contact : plus petite, centrée, jamais déformée */
	.c92-banniere.c92-banniere--portrait {
		max-width: 300px;
		margin-inline: auto;
	}

	/* Logo du pied de page */
	.c92-pied__marque img,
	.c92-pied__marque .custom-logo {
		max-height: 72px;
		width: auto;
	}
}

/* À propos — espace entre l'introduction et le premier chapitre */
.c92-intro-page + .c92-chapitre{margin-top:clamp(2.25rem,6vw,4rem)}