/*
 * Cocobolo — styles du site.
 * Référence : XD landing_page_2_def, plans de travail 1920 px, grille 4 colonnes,
 * marges et gouttières de 20 px. Les tailles fluides viennent de theme.json.
 */

:root {
	--cc-marge: 20px;
	--cc-gouttiere: 20px;
	--cc-colonne: calc((100vw - 2 * var(--cc-marge) - 3 * var(--cc-gouttiere)) / 4);
	--cc-espace-bloc: clamp(20px, 2.3vw, 44px);
	--cc-bleu: var(--wp--preset--color--bleu);
	--cc-rouge: var(--wp--preset--color--rouge);
	--cc-creme: var(--wp--preset--color--creme);
	--cc-noir: var(--wp--preset--color--noir);
	--cc-review: var(--wp--preset--font-family--review);
	--cc-haffer: var(--wp--preset--font-family--haffer);
	--cc-affiche: var(--wp--preset--font-size--affiche);
	--cc-titre: var(--wp--preset--font-size--titre);
	--cc-chapo: var(--wp--preset--font-size--chapo);
	--cc-texte: var(--wp--preset--font-size--texte);
}

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

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
/* Les logos du pack touchent le bord de leur viewBox : sans ça, le dernier pixel est rogné à petite taille. */
svg[aria-hidden="true"] { overflow: visible; }
figure, blockquote { margin: 0; }
p { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Typographies maison -------------------------------------------------- */

.cc-affiche,
.cc-titre,
.cc-projet-nav__sens,
.cc-menu__liste,
.cc-pied__liste {
	font-family: var(--cc-review);
	font-weight: 700;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	line-height: 0.8;
	margin: 0;
}
.cc-affiche {
	font-size: var(--cc-affiche);
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: manual;
}
.cc-titre { font-size: var(--cc-titre); }

.cc-legende {
	font-size: var(--cc-texte);
	line-height: 1;
}

/* Couleurs de texte appliquées par les blocs */
.has-bleu-color { color: var(--cc-bleu); }
.has-creme-color { color: var(--cc-creme); }
.has-noir-color { color: var(--cc-noir); }

/*
 * En-tête fixe, toujours transparent. menu.js lui donne la couleur du texte de la
 * section qui passe dessous (bleu, crème, noir) et la classe sur-photo quand c'est
 * une photo : un léger dégradé noir garde alors le logo et le burger lisibles.
 */

.cc-entete {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--cc-marge);
	background: transparent;
	transition: color 0.25s ease;
}
.cc-entete::before {
	content: "";
	position: absolute;
	inset: 0 0 -40px;
	z-index: -1;
	/* Légère ombre (demande de Bastien du 14/10 : le dégradé de la couleur du fond était trop marqué). */
	background: linear-gradient(rgb(0 0 0 / 0.12), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.cc-entete.est-defile::before { opacity: 1; }
.cc-entete.sur-photo::before { background: linear-gradient(rgb(0 0 0 / 0.2), transparent); opacity: 1; }
/* Couleur de départ, avant que menu.js ne lise la section dessous (pas de classe has-*-color : WordPress la force en !important). */
.cc-entete--bleu { color: var(--cc-bleu); }
.cc-entete--creme { color: var(--cc-creme); }
.cc-entete--noir { color: var(--cc-noir); }
.admin-bar .cc-entete { top: var(--wp-admin--admin-bar--height, 32px); }
.cc-entete__logo {
	display: flex;
	align-items: center;
	gap: clamp(6px, 0.6vw, 12px);
	color: inherit;
}
.cc-entete__ccc { width: clamp(44px, 3.3vw, 64px); height: auto; }
.cc-entete__nom {
	width: clamp(72px, 5.4vw, 104px);
	height: auto;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
/* En haut de page on ne voit que les trois C ; le nom apparaît au défilement et dans le menu ouvert. */
.cc-entete.est-defile .cc-entete__nom,
.cc-menu-ouvert .cc-entete__nom { opacity: 1; transform: none; }
/* Accueil : en haut de page, le logo animé occupe le premier écran ; celui de l'en-tête n'apparaît qu'au défilement. */
.home .cc-entete__logo { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.home .cc-entete.est-defile .cc-entete__logo,
.home.cc-menu-ouvert .cc-entete__logo,
.cc-menu-ouvert .home .cc-entete__logo { opacity: 1; pointer-events: auto; }
.cc-entete__burger {
	/* Burger de la maquette XD_4 : trois barres de 29 × 4 px à 4 px d'écart (bloc de 29 × 20 px),
	   bouts droits, calé sur le haut du logo (voir menu.js et --cc-burger-haut). */
	align-self: flex-start;
	width: 29px;
	height: 20px;
	padding: 0;
	border: 0;
	background:
		linear-gradient(currentColor 0 0) top / 100% 4px no-repeat,
		linear-gradient(currentColor 0 0) center / 100% 4px no-repeat,
		linear-gradient(currentColor 0 0) bottom / 100% 4px no-repeat;
	color: inherit;
	cursor: pointer;
}

/* Menu plein écran (plan de travail 5 : fond noir, items bleus en 250 px centrés, croix fine) */
.cc-menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--cc-marge);
	background: var(--cc-noir);
	color: var(--cc-bleu);
	overflow-y: auto;
}
/* Menu ouvert : l'en-tête passe au-dessus du menu, en bleu, sans dégradé ni burger. */
.cc-menu-ouvert .cc-entete {
	z-index: 60;
	color: var(--cc-bleu) !important;
	pointer-events: none;
}
.cc-menu-ouvert .cc-entete::before { opacity: 0; }
.cc-menu-ouvert .cc-entete__logo { pointer-events: auto; }
.cc-menu-ouvert .cc-entete__burger { visibility: hidden; }
/* Volet : le menu descend du haut de l'écran (classe est-ouvert posée par menu.js). */
.cc-menu {
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.55s;
}
.cc-menu.est-ouvert {
	visibility: visible;
	transform: none;
	transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s;
}
/* Les entrées arrivent l'une après l'autre, une fois le volet presque en place. */
.cc-menu__liste li,
.cc-menu__langues {
	opacity: 0;
	transform: translateY(0.15em);
	transition: opacity 0.3s ease, transform 0.4s ease;
}
.cc-menu.est-ouvert .cc-menu__liste li,
.cc-menu.est-ouvert .cc-menu__langues { opacity: 1; transform: none; }
.cc-menu.est-ouvert .cc-menu__liste li:nth-child(1) { transition-delay: 0.3s; }
.cc-menu.est-ouvert .cc-menu__liste li:nth-child(2) { transition-delay: 0.36s; }
.cc-menu.est-ouvert .cc-menu__liste li:nth-child(3) { transition-delay: 0.42s; }
.cc-menu.est-ouvert .cc-menu__liste li:nth-child(4) { transition-delay: 0.48s; }
.cc-menu.est-ouvert .cc-menu__liste li:nth-child(n+5),
.cc-menu.est-ouvert .cc-menu__langues { transition-delay: 0.54s; }
@media (prefers-reduced-motion: reduce) {
	.cc-menu,
	.cc-menu.est-ouvert,
	.cc-menu__liste li,
	.cc-menu__langues { transition: none !important; }
}
.cc-menu__liste {
	list-style: none;
	padding: 0;
	font-size: var(--cc-affiche);
	text-align: center;
}
.cc-menu__liste a { color: inherit; transition: color 0.2s ease; }
.cc-menu__liste li { white-space: nowrap; } /* une entrée = une ligne ; affiche.js réduit la taille sur mobile */
.cc-menu__liste a:hover,
.cc-menu__liste a:focus-visible,
.cc-menu__liste .current-menu-item a { color: var(--cc-creme); }
.cc-menu__fermer {
	position: absolute;
	top: var(--cc-marge);
	right: var(--cc-marge);
	width: 29px;
	height: 20px; /* même boîte que le burger : menu.js la pose à sa place */
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.admin-bar .cc-menu__fermer { top: calc(var(--cc-marge) + var(--wp-admin--admin-bar--height, 32px)); }
/* Deux barres de 4 px, l'épaisseur de celles du burger, croisées au centre de sa boîte de 29 × 20 px. */
.cc-menu__fermer::before,
.cc-menu__fermer::after {
	content: "";
	position: absolute;
	left: 0.5px;
	top: 8px;
	width: 28px;
	height: 4px;
	background: currentColor;
	transform: rotate(45deg);
}
.cc-menu__fermer::after { transform: rotate(-45deg); }
.cc-menu__langues {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin: var(--cc-espace-bloc) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--cc-chapo);
}
.cc-menu__langues a { color: var(--cc-creme); opacity: 0.5; }
.cc-menu__langues a[aria-current] { opacity: 1; }
html.cc-menu-ouvert { overflow: hidden; }

/* Accueil : projets à la une (sections de 1080 px sur 1920) ------------- */

.cc-une {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 100svh;
	padding: 0 var(--cc-marge);
	overflow: hidden;
	text-align: center;
	isolation: isolate;
	z-index: 0;
}
.cc-une--bleu { background: var(--cc-bleu); }
.cc-une--rouge { background: var(--cc-rouge); }
.cc-une--photo { justify-content: center; gap: clamp(24px, 4vw, 80px); }
.cc-une__photo { position: absolute; inset: 0; z-index: -1; }
.cc-une__photo img,
.cc-une__photo video { width: 100%; height: 100%; object-fit: cover; }
.cc-une__titre { width: 100%; }
/*
 * Même espace visuel entre le bord de la section et les capitales, en haut
 * comme en bas. Review officielle, interligne de 0,8 : le haut des capitales est 0,025 em sous le haut
 * de la ligne et la ligne de base 0,025 em au-dessus du bas : on compense des deux côtés.
 */
/* L'espace vaut la distance entre le haut de l'écran et le haut du burger (mesurée par menu.js) :
   en haut de la section collée, les capitales sont pile au niveau du burger. */
.cc-une__titre:not(.cc-une__titre--bas) { padding-top: calc(var(--cc-burger-haut, 20px) - 0.025em); }
.cc-une__titre--bas { margin-bottom: calc(var(--cc-burger-haut, 20px) - 0.025em); }
.cc-une__milieu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 1.6vw, 30px);
	max-width: calc(2 * var(--cc-colonne) + var(--cc-gouttiere));
}
.cc-une__logo { width: clamp(56px, 4.2vw, 80px); height: auto; }
.cc-une__vignette { position: relative; width: clamp(180px, 20.3vw, 390px); aspect-ratio: 390 / 220; }
/* Logo au centre de la petite image (puis de l'image qui grandit), en crème pour se lire sur la photo. */
.cc-une__vignette .cc-une__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	color: var(--cc-creme);
	filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.35));
}
.cc-une__vignette img { width: 100%; height: 100%; object-fit: cover; }
.cc-une__sous-titre { font-size: var(--cc-chapo); line-height: 1; }
.cc-une__texte { font-size: var(--cc-texte); line-height: 1.2; }
.cc-une__lien { position: absolute; inset: 0; z-index: 1; }

/* Intro marque : nom du Club, présentation, écusson, sur photo voilée */
.cc-intro { background: var(--cc-noir); gap: 0; }
.cc-intro .cc-une__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--cc-voile, 0.25);
}
.cc-intro__titre { width: 100%; }
/* Logotype en arc en grand : limité par la hauteur de l'écran pour laisser la place au texte. */
.cc-intro__marque { margin: 0; line-height: 0; }
.cc-intro__logotype {
	width: min(44vw, 52svh * 1.177, 900px);
	height: auto;
	margin-inline: auto;
}
.cc-intro__texte {
	max-width: 50em;
	margin-top: clamp(20px, 2.4vw, 46px);
	font-size: var(--cc-texte);
	line-height: 1.1;
}
.cc-intro__logo {
	width: clamp(72px, 6.2vw, 120px);
	height: auto;
	margin-top: clamp(32px, 3.3vw, 64px);
}

/*
 * Accueil : chaque section reste collée en haut de l'écran pendant que la
 * suivante monte et la recouvre, comme une pile de cartes. L'ombre portée en
 * haut de la section qui arrive marque la superposition ; la photo d'une
 * section photo glisse un peu moins vite que la section (parallaxe).
 */
/* Seulement quand des sections à la une se suivent : une section seule (maquette XD_4) défile normalement. */
.cc-main--accueil .cc-une:is(:has(+ .cc-une), .cc-une + .cc-une) {
	position: sticky;
	top: 0;
	z-index: auto;
	box-shadow: 0 -24px 60px rgb(0 0 0 / 0.35);
}
.cc-main--accueil .cc-une:first-child { box-shadow: none; }
.admin-bar .cc-main--accueil .cc-une:is(:has(+ .cc-une), .cc-une + .cc-une) {
	top: var(--wp-admin--admin-bar--height, 32px);
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cc-main--accueil .cc-une__photo img {
			animation: cc-parallaxe linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}
}
@keyframes cc-parallaxe {
	from { transform: translateY(-12%) scale(1.15); }
	to { transform: translateY(0) scale(1.15); }
}

/*
 * Vignette qui grandit jusqu'au plein écran (sections sur aplat avec vignette).
 * Activé seulement quand accueil.js tourne (classe cc-deploiement sur html) : la
 * section devient plus haute, sa scène reste collée à l'écran et le calque
 * .cc-une__deploiement passe du cadre de la vignette à tout l'écran.
 */
.cc-une__deploiement { display: none; }
.cc-deploiement .cc-main--accueil .cc-une--deploie {
	display: block;
	height: 220svh;
	padding: 0;
	overflow: clip; /* hidden créerait un conteneur de défilement et casserait la scène collée */
}
.cc-deploiement .cc-une--deploie .cc-une__scene {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100svh;
	padding: 0 var(--cc-marge);
	overflow: hidden;
	isolation: isolate; /* la photo qui grandit passe derrière les textes */
}
.admin-bar.cc-deploiement .cc-une--deploie .cc-une__scene,
.cc-deploiement .admin-bar .cc-une--deploie .cc-une__scene { top: var(--wp-admin--admin-bar--height, 32px); height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)); }
.cc-deploiement .cc-une__deploiement {
	display: block;
	position: absolute;
	z-index: -1;
	overflow: hidden;
}
.cc-une__deploiement img { width: 100%; height: 100%; object-fit: cover; }
/* Voile qui monte avec l'agrandissement (--cc-deploie de 0 à 1, posé par accueil.js). */
.cc-une__deploiement::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: calc(var(--cc-deploie, 0) * 0.3);
}
/* La petite photo d'origine garde sa place mais c'est le calque qui s'affiche. */
.cc-deploiement .cc-une--deploie .cc-une__vignette img { visibility: hidden; }
/* Texte noir illisible sur photo : il passe en crème quand la photo couvre l'écran. */
.cc-une--deploie { transition: color 0.3s ease; }
.cc-une--deploie.est-deploye.has-noir-color { color: var(--cc-creme) !important; }

/* La section recouverte s'assombrit pendant que la suivante monte (--cc-recouvert posé par accueil.js, de 0 à 1). */
.cc-main--accueil .cc-une::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
	pointer-events: none;
	opacity: calc(var(--cc-recouvert, 0) * 0.45);
}

/* Page projet ---------------------------------------------------------- */

body.cc-ambiance--creme { background: var(--cc-creme); color: var(--cc-noir); }
body.cc-ambiance--noir { background: var(--cc-noir); color: var(--cc-creme); }
body.cc-ambiance--bleu { background: var(--cc-bleu); color: var(--cc-creme); }
body.cc-ambiance--creme-bleu { background: var(--cc-creme); color: var(--cc-bleu); }
body.cc-ambiance--rouge { background: var(--cc-rouge); color: var(--cc-noir); }

.cc-projet-entete {
	position: relative;
	height: 100svh;
	min-height: 480px;
	color: var(--cc-creme);
}
.admin-bar .cc-projet-entete { height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)); }
/* Couleur du titre choisie dans le panneau Projet (bleu, rouge, noir, blanc). */
.cc-projet-entete--bleu { color: var(--cc-bleu); }
.cc-projet-entete--rouge { color: var(--cc-rouge); }
.cc-projet-entete--noir { color: var(--cc-noir); }
.cc-projet-entete--creme { color: var(--cc-creme); }
.cc-projet-entete--sans-photo { height: 30vh; color: inherit; }
.cc-projet-entete__photo,
.cc-projet-entete__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/*
 * Client en titre affiche, centré exactement dans la photo (hauteur et largeur) ;
 * la mission se place dessous sans décaler le titre.
 */
.cc-projet-entete__infos {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0 var(--cc-marge);
	text-align: center;
}
.cc-projet-entete__centre { position: relative; width: 100%; max-width: 1600px; }
/* Titre 20 % sous la taille affiche, sans sous-titre. Review officielle, interligne 0,8 : capitales centrées dans leur boîte. */
.cc-projet-entete__client { font-size: calc(var(--cc-affiche) * 0.8); }
/* Sous-titre sous le grand titre (28/10) : une phrase courte, une ou deux lignes, posé sous le titre sans le décaler. */
.cc-projet-entete__sous-titre {
	position: absolute;
	top: 100%;
	left: 50%;
	width: min(100%, 30em);
	margin: clamp(12px, 1.4vw, 26px) 0 0;
	transform: translateX(-50%);
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1.15;
	text-wrap: balance;
}

.cc-contenu--projet {
	display: flex;
	flex-direction: column;
	gap: var(--cc-espace-bloc);
	padding: var(--cc-espace-bloc) var(--cc-marge);
}
/* Deux blocs de médias qui se suivent (galerie, photo pleine largeur, vidéo) : le même espace qu'entre
   deux photos d'une galerie, la gouttière, pour que les images forment un seul ensemble. */
.cc-contenu--projet > :is(.cc-galerie, .cc-image-pleine, .cc-video) + :is(.cc-galerie, .cc-image-pleine, .cc-video) {
	margin-top: calc(var(--cc-gouttiere) - var(--cc-espace-bloc));
}

/* Dans un projet, l'image pleine largeur va de bord à bord, sans marge blanche (maquette XD_4, 27/10/2026). */
.cc-contenu--projet > .cc-image-pleine { margin-inline: calc(-1 * var(--cc-marge)); }
/* Image pleine largeur : 1880 × 1058 */
.cc-image-pleine { position: relative; color: var(--cc-creme); } /* en-tête crème quand il passe sur la photo */
.cc-image-pleine img,
.cc-image-pleine .cc-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 1880 / 1058; object-fit: cover; }

/*
 * Lecteur vidéo (téléversée ou YouTube / Vimeo) : recadré comme une photo, la
 * miniature dessous le temps du chargement, boutons lecture et son du site.
 */
/* Format « bandeau » (16:7) : le média garde ses proportions et il est recadré dans une bande plus aplatie, un peu au-dessus du centre. */
.cc-image-pleine--bandeau img,
.cc-image-pleine--bandeau .cc-lecteur { aspect-ratio: 16 / 7; object-position: 50% 45%; }
.cc-image-pleine--bandeau .cc-lecteur > video { object-position: 50% 45%; }
/* Accueil : un bloc photo ou vidéo après les sections empilées passe par-dessus la dernière, bord à bord, comme une carte de plus. */
.cc-main--accueil .cc-image-pleine { position: relative; z-index: 3; background: var(--cc-noir); }
.cc-lecteur { position: relative; overflow: hidden; container-type: size; background: var(--cc-noir); }
.cc-lecteur > video,
.cc-lecteur .cc-lecteur__attente { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.cc-lecteur iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	border: 0;
	transform: translate(-50%, -50%);
}
/* Miniature YouTube d'un Short : l'image verticale nette (9:16) est au centre d'une vignette 16:9 aux bords flous ;
   un léger zoom remplit le cadre portrait (2:3) sans laisser voir ces bords. */
.cc-lecteur--vertical .cc-lecteur__attente[src*="ytimg"] { transform: scale(1.2); }
/* Vidéo verticale (9:16, ex. YouTube Shorts) : elle remplit toute la largeur, quitte à couper le haut et le bas. */
.cc-lecteur--vertical iframe {
	width: max(100cqw, 56.25cqh);
	height: max(100cqh, 177.78cqw);
}
.cc-lecteur[data-auto="1"] iframe { pointer-events: none; }
.cc-lecteur.est-lance .cc-lecteur__attente { display: none; }
.cc-lecteur__lecture {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: clamp(56px, 5vw, 96px);
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: rgb(252 251 244 / 0.92);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.2s ease;
}
.cc-lecteur__lecture::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 0.6em 0 0.6em 1em;
	border-color: transparent transparent transparent var(--cc-noir);
	font-size: clamp(12px, 1vw, 20px);
	transform: translate(-50%, -50%);
}
.cc-lecteur__lecture:hover,
.cc-lecteur__lecture:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.cc-lecteur__lecture[hidden] { display: none; }
.cc-lecteur__son {
	position: absolute;
	z-index: 2;
	top: var(--cc-marge);
	right: var(--cc-marge);
	padding: 0.45em 0.9em;
	border: 0;
	border-radius: 2em;
	background: rgb(0 0 0 / 0.55);
	color: var(--cc-creme);
	font: 500 clamp(11px, 0.75vw, 14px) / 1 var(--cc-haffer);
	cursor: pointer;
}
.cc-lecteur__son[aria-pressed="true"] { background: rgb(252 251 244 / 0.92); color: var(--cc-noir); }

/*
 * Légende de toutes les photos et vidéos : posée dans le média, en bas, centrée,
 * en petit (75 % du texte courant). Rien n'est affiché si le champ est vide.
 */
.cc-image-pleine .cc-legende,
.cc-galerie .cc-legende,
.cc-video .cc-legende {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: var(--cc-marge);
	margin: 0;
	padding: 0 var(--cc-marge);
	color: var(--cc-creme);
	font-size: calc(var(--cc-texte) * 0.75);
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 0 14px rgb(0 0 0 / 0.35);
	pointer-events: none;
}

/*
 * Titre + texte : tout le bloc tient dans une colonne centrée de 1 600 px (comme le
 * site Braconnier). Titre et chapô dans la moitié gauche, logo centré dans le 2e
 * quart, textes dans la moitié droite.
 */
.cc-titre-texte {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--cc-gouttiere);
	align-items: start;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}
.cc-titre-texte {
	--titre: var(--cc-titre);
	--texte-colonnes: clamp(0.875rem, 0.83vw, 1rem); /* 16 px en 1920 */
}
.cc-titre-texte__tete { grid-column: 1 / span 2; grid-row: 1; }
/* Avec un badge : titre et chapô s'arrêtent avant lui (largeur du badge + une gouttière). */
.cc-titre-texte:has(> .cc-titre-texte__logo) .cc-titre-texte__tete { padding-right: calc(clamp(51.3px, 3.852vw, 73.8px) + var(--cc-gouttiere)); }
/*
 * Le haut des capitales du titre, le haut du badge et le haut des lettres de la
 * première ligne de texte sont sur la même ligne. Haffer (interligne 1,2) : le haut
 * des capitales est 0,257 du corps sous la boîte ; Review (0,8) : 0,025 sous la boîte.
 */
.cc-titre-texte__titre {
	margin: calc(0.257 * var(--texte-colonnes) - 0.025 * var(--titre)) 0 0;
	font-size: var(--titre);
}
.cc-titre-texte__chapo {
	max-width: 22em;
	margin-top: clamp(24px, 3.6vw, 70px);
	font-size: var(--cc-chapo);
	line-height: 1;
}
.cc-titre-texte__logo {
	grid-column: 2;
	grid-row: 1;
	justify-self: end; /* collé à droite de la moitié gauche, juste avant les colonnes */
	margin-top: calc(0.257 * var(--texte-colonnes));
	width: clamp(51.3px, 3.852vw, 73.8px); /* +20 % puis -15 % (23/10), puis -10 % (27/10) */
	height: auto;
}
.cc-titre-texte__textes {
	grid-column: 3 / span 2;
	grid-row: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--cc-gouttiere);
	font-size: var(--texte-colonnes, clamp(0.875rem, 0.83vw, 1rem));
	line-height: 1.2;
}
.cc-titre-texte--1 .cc-titre-texte__textes { grid-template-columns: 1fr; }

/* Texte seul (bloc Texte à gauche / à droite) : mêmes colonnes, dans une moitié de la colonne de 1 600 px. */
.cc-texte {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--cc-gouttiere);
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}
.cc-texte--gauche .cc-titre-texte__textes { grid-column: 1 / span 2; }
.cc-texte--droite .cc-titre-texte__textes { grid-column: 3 / span 2; }
.cc-texte--1 .cc-titre-texte__textes { grid-template-columns: 1fr; }
/* Projets : espace doublé sous le bloc Titre + texte (pas au-dessus), demande du 27/10. */
.cc-contenu--projet > .cc-titre-texte { margin-bottom: var(--cc-espace-bloc); }
/* Projets, sur ordinateur : texte des colonnes à 16 px fixes (au lieu de 14 px dès 1 600 px de large et moins), demande du 27/10. */
@media (min-width: 900px) {
	.cc-contenu--projet :is(.cc-titre-texte, .cc-texte) { --texte-colonnes: 16px; }
}
/* Paragraphes sans alinéa (demande de Bastien du 19/10, abandon de la règle du 11/10), 10 px entre eux. */
.cc-titre-texte__colonne p { margin: 0; }
.cc-titre-texte__colonne p + p { margin-top: 10px; }

/* Galerie : 4 portraits 455 × 684 ou 2 paysages 930 × 617 */
.cc-galerie {
	display: grid;
	grid-template-columns: repeat(var(--cc-galerie-colonnes, 4), 1fr);
	gap: var(--cc-gouttiere);
}
.cc-galerie--2 { --cc-galerie-colonnes: 2; }
.cc-galerie--3 { --cc-galerie-colonnes: 3; }
.cc-galerie__item { position: relative; }
/* height: auto, sinon l'attribut height de WordPress écrase le format */
.cc-galerie--portrait img,
.cc-galerie--portrait .cc-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 455 / 684; object-fit: cover; }
.cc-galerie--paysage img,
.cc-galerie--paysage .cc-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 930 / 617; object-fit: cover; }
/* Anciennes galeries sans classe de format. */
.cc-galerie--4:not(.cc-galerie--paysage) img,
.cc-galerie--4:not(.cc-galerie--paysage) .cc-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 455 / 684; object-fit: cover; }
.cc-galerie--2:not(.cc-galerie--portrait) img,
.cc-galerie--2:not(.cc-galerie--portrait) .cc-lecteur { display: block; width: 100%; height: auto; aspect-ratio: 930 / 617; object-fit: cover; }

/* Grand titre affiche */
.cc-grand-titre { text-wrap: balance; }
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* Citation : 33 px, colonnes 3 et 4 par défaut */
.cc-citation {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--cc-gouttiere);
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	font-size: var(--cc-chapo);
	line-height: 1;
}
.cc-citation p { grid-column: 3 / span 2; }
.cc-citation--gauche p { grid-column: 1 / span 2; }
.cc-citation--centre p { grid-column: 2 / span 2; text-align: center; }

/*
 * Équipe : noms centrés en Review Condensed (130 px en 1920), rôle en petit
 * à gauche ou à droite du nom, le haut de ses lettres aligné sur le haut des
 * capitales du nom. Le chef de projet est souligné.
 */
.cc-equipe {
	--nom: clamp(2.5rem, 6.8vw, 8.125rem);
	--role: clamp(14px, 1.2vw, 23px);
	color: var(--cc-bleu);
	margin-block: clamp(40px, 6vw, 120px);
}
.cc-ambiance--bleu .cc-equipe { color: var(--cc-creme); }
/*
 * Équipe d'un projet : même règle que l'équipe de la page Contact. Espace visuel identique
 * au-dessus du premier nom et sous le dernier (P + 0,025 em), en tenant compte de l'espace
 * entre blocs (--cc-espace-bloc) que la mise en page du projet ajoute déjà.
 */
.cc-contenu--projet > .cc-equipe {
	--espace-equipe: clamp(40px, 6vw, 120px);
	margin-block: calc(var(--espace-equipe) - var(--cc-espace-bloc)) calc(var(--espace-equipe) - var(--cc-espace-bloc));
}
/* Rôles 20 % plus petits dans un projet (27/10), sauf sur mobile (11 px gardés) ; la page L'équipe garde la taille d'origine. */
.cc-contenu--projet .cc-equipe { --role: clamp(11.2px, 0.96vw, 18.4px); }
/* Équipe d'un projet : même couleur que le titre de l'en-tête (classe posée par inc/projets.php). */
.cc-equipe-couleur--creme .cc-equipe { color: var(--cc-creme); }
.cc-equipe-couleur--noir .cc-equipe { color: var(--cc-noir); }
.cc-equipe-couleur--bleu .cc-equipe { color: var(--cc-bleu); }
.cc-equipe-couleur--rouge .cc-equipe { color: var(--cc-rouge); }
.cc-equipe__liste { margin: 0; padding: 0; list-style: none; }
.cc-equipe__membre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: clamp(5px, 0.5vw, 10px); /* réduit de moitié le 14/10 */
	align-items: start;
}
.cc-equipe__nom {
	grid-column: 2;
	font-family: var(--cc-review);
	font-weight: 700;
	font-size: var(--nom);
	line-height: 0.8;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}
.cc-equipe__role {
	grid-row: 1;
	width: min-content; /* un mot par ligne */
	font-size: var(--role);
	line-height: 1.05;
	/*
	 * Haut des lettres du rôle = haut des capitales du nom.
	 * Review (interligne 0,8) : le haut des capitales est 0,025 du corps sous la boîte.
	 * Haffer (interligne 1,05) : le haut des capitales est 0,182 du corps sous la boîte.
	 */
	margin-top: calc(0.025 * var(--nom) - 0.182 * var(--role));
}
.cc-equipe__membre--gauche .cc-equipe__role { grid-column: 1; justify-self: end; text-align: right; }
.cc-equipe__membre--droite .cc-equipe__role { grid-column: 3; justify-self: start; text-align: left; }
.cc-equipe__membre--chef .cc-equipe__nom {
	text-decoration: underline;
	text-decoration-thickness: max(2px, 0.022em);
	text-underline-offset: 0.06em;
}
/* Avec l'interligne serré, la ligne suivante cacherait le trait : on lui laisse sa place. */
.cc-equipe__membre--chef { margin-bottom: calc(0.13 * var(--nom)); }
.cc-equipe__membre--chef:last-child { margin-bottom: 0; } /* en dernière ligne, pas d'espace en plus : l'équilibre haut / bas reste juste */

/*
 * Moodboard de l'agence (esprit Bureau Borsche) : plein bord, sans aucun espace
 * entre les images, au format 800 × 1200 (2:3) par 4, carrées par 2.
 * L'effet patchwork vient justement de l'absence de bord blanc.
 */
.cc-moodboard { display: flex; flex-direction: column; gap: 2px; margin-inline: calc(-1 * var(--cc-marge)); } /* fin liseré entre les images, comme le feed Instagram */
.cc-moodboard__rangee { display: grid; gap: 2px; }
.cc-moodboard__rangee--4 { grid-template-columns: repeat(4, 1fr); }
.cc-moodboard__rangee--2 { grid-template-columns: repeat(2, 1fr); }
.cc-moodboard__item { margin: 0; overflow: hidden; aspect-ratio: 2 / 3; background: rgb(0 0 0 / 0.06); }
.cc-moodboard__rangee--2 .cc-moodboard__item { aspect-ratio: 1; } /* rangées de 2 : carrées */
.cc-moodboard__item img,
.cc-moodboard__item video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Moodboard en fin de page : il descend jusqu'au pied de page, sans marge. */
.cc-main--page:has(.cc-contenu--page > .cc-moodboard:last-child) { padding-bottom: 0; }
/* Photo en ouverture de page : plein bord, collée en haut (l'en-tête transparent passe dessus). */
.cc-main--page:has(.cc-contenu--page > .cc-image-pleine:first-child) { padding-top: 0; }
.cc-contenu--page > .cc-image-pleine:first-child { margin-inline: calc(-1 * var(--cc-marge)); max-width: none; }
.cc-contenu--page > .cc-image-pleine:first-child img,
.cc-contenu--page > .cc-image-pleine:first-child .cc-lecteur { aspect-ratio: var(--ratio, 16 / 9); object-fit: fill; } /* média entier, bord à bord, sans zoom */
/*
 * Vidéo d'ouverture : la couleur de la page plutôt qu'un cadre noir pendant le chargement,
 * et fondu « éclaircir » : le noir de la vidéo laisse voir le fond de la page au pixel près
 * (logo en trame sur fond noir posé sur le bleu de la page Contact).
 */
.cc-contenu--page > .cc-image-pleine:first-child .cc-lecteur { background: transparent; }
.cc-contenu--page > .cc-image-pleine:first-child .cc-lecteur video { mix-blend-mode: lighten; }
/* Vidéo superposée à une photo : la photo en fond, un voile pour faire ressortir les points, la vidéo en « éclaircir ». */
.cc-image-pleine--superpose { isolation: isolate; }
.cc-image-pleine--superpose > img.cc-image-pleine__fond { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; z-index: -2; }
.cc-image-pleine--superpose::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.35); pointer-events: none; }
.cc-image-pleine--superpose .cc-lecteur { background: transparent; }
.cc-image-pleine--superpose .cc-lecteur video { mix-blend-mode: lighten; }

/* Vidéo */
.cc-video { position: relative; }
.cc-video__cadre { aspect-ratio: 16 / 9; background: var(--cc-noir); }
.cc-video__cadre .cc-lecteur { width: 100%; height: 100%; }


/* Précédent / suivant */
/* Projets : écart entre le dernier bloc et Précédent / Suivant divisé par deux (27/10). Il vaut la marge basse du
   contenu (espace entre blocs) plus --nav-haut : on réduit --nav-haut pour que la somme soit deux fois plus petite. */
.single-cc_projet .cc-projet-nav { --nav-haut: calc((clamp(60px, 8vw, 160px) - var(--cc-espace-bloc)) / 2); }
.cc-projet-nav {
	--nav-haut: clamp(60px, 8vw, 160px);
	--sens: clamp(22px, 2.53vw, 48.5px); /* moitié de « PROJETS » de la page Projets (27/10) : 40 px sur 1 600 */
	--logo: var(--cc-titre); /* le C garde sa taille d'origine (capitales d'un titre de 100 px sur 1 920) */
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--cc-gouttiere);
	padding: var(--nav-haut) var(--cc-marge) clamp(40px, 5vw, 100px);
}
/*
 * C en spirale centré sur la page, à sa taille d'origine (0,75 de --logo), plus grand que « Précédent » /
 * « Suivant » depuis leur réduction du 27/10 : centré en hauteur sur leurs capitales
 * (haut des lettres 0,025 sous la boîte avec l'interligne 0,8, hauteur 0,75 du corps).
 */
.cc-projet-nav__logo {
	position: absolute;
	top: calc(var(--nav-haut) + 0.4 * var(--sens) - 0.375 * var(--logo));
	left: 50%;
	height: calc(0.75 * var(--logo));
	width: auto;
	transform: translateX(-50%);
}
.cc-projet-nav__logo { display: block; color: inherit; }
.cc-projet-nav__logo svg { display: block; height: 100%; width: auto; }
.cc-projet-nav__lien { display: flex; flex-direction: column; gap: 0.6em; color: inherit; }
.cc-projet-nav__lien--precedent { grid-column: 1 / span 2; }
.cc-projet-nav__lien--suivant { grid-column: 3 / span 2; align-items: flex-end; text-align: right; }
.cc-projet-nav__sens { font-size: var(--sens); }
.cc-projet-nav__nom { font-size: clamp(15px, 1.25vw, 24px); line-height: 1.1; } /* comme les noms des cartes de la page Projets */
.cc-projet-nav__lien:hover .cc-projet-nav__sens,
.cc-projet-nav__lien:focus-visible .cc-projet-nav__sens { color: var(--cc-bleu); }

/* Page Projets : grille de trois colonnes ------------------------------ */

/* Page claire : fond blanc cassé, texte noir, filtres bleus au survol et une fois choisis. */
body:has(.cc-main--projets) { background: var(--cc-creme); }
.cc-main--projets {
	background: var(--cc-creme);
	color: var(--cc-noir);
	padding: clamp(120px, 19vw, 364px) var(--cc-marge) calc(var(--cc-marge) + clamp(50px, 5vw, 100px)); /* +50 à 100 px avant le pied de page (27/10) */
}
/* Le filtre occupe le bas de l'espace du haut : la première rangée de cartes reste à 364 px. */
.cc-main--projets:has(.cc-filtres) { padding-top: clamp(100px, 13vw, 250px); }
/*
 * Grille de trois colonnes (maquette XD_4) : cartes identiques au format 4:5, puis sous la photo
 * le nom, la phrase en gris et les métiers ; 30 px avant la rangée suivante sur 1 600.
 */
.cc-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 1.9vw, 36px) var(--cc-gouttiere);
}
.cc-carte { display: flex; flex-direction: column; color: inherit; }
.cc-carte__visuel { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: rgb(0 0 0 / 0.06); }
.cc-carte :is(img, .cc-fond-video) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
/* Survol : le même léger zoom que les cartes du carrousel de l'accueil (maquette XD_4, 27/10). */
@media (hover: hover) {
	.cc-carte:is(:hover, :focus-visible) :is(img, .cc-fond-video) { transform: scale(1.03); }
}
/*
 * Sous la photo (maquette XD_4) : le client en noir, la phrase en gris dessous, toutes deux en 16 px,
 * puis les métiers en étiquettes grises, toujours visibles.
 */
/* Nom et phrase à la taille du nom des cartes du carrousel de l'accueil (20 px sur 1 600). */
.cc-carte__legende { display: flex; flex-direction: column; margin-top: 11px; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.1; gap: 1px; } /* nom et phrase rapprochés de 5 px (27/10) */
.cc-carte__titre { color: var(--cc-noir); }
.cc-carte__phrase { color: #9a9a98; }
.cc-carte .cc-carte__metiers { margin-top: 15px; } /* +5 px (27/10) */
/* Métiers : seulement au survol de la carte, à leur place sous la phrase (la place est gardée, rien ne bouge) ;
   ils descendent un à un comme sur l'accueil. Au doigt, sans survol, ils restent affichés. */
@media (hover: hover) {
	.cc-carte__metiers > * {
		transform: translateY(-60%);
		opacity: 0;
		transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
	}
	.cc-carte__metiers > :nth-child(2) { transition-delay: 45ms; }
	.cc-carte__metiers > :nth-child(3) { transition-delay: 90ms; }
	.cc-carte__metiers > :nth-child(4) { transition-delay: 135ms; }
	.cc-carte__metiers > :nth-child(5) { transition-delay: 180ms; }
	.cc-carte__metiers > :nth-child(n+6) { transition-delay: 225ms; }
	.cc-carte:is(:hover, :focus-visible) .cc-carte__metiers > * { transform: none; opacity: 1; }
}
.cc-carte[hidden] { display: none; }
.cc-carte.vient-d-apparaitre { animation: cc-apparition 0.45s ease both; }
@keyframes cc-apparition { from { opacity: 0; transform: translateY(12px); } }

/*
 * Filtre en trois colonnes, alignées sur la grille des cartes (maquette XD_4) : à gauche le titre de la
 * sélection, puis « Secteur » et « Service », chacun au-dessus de sa liste, au même interligne.
 * Intitulés et choix en noir, le reste en gris, en retrait si la combinaison ne donnerait aucun projet.
 * Casse et couleurs gardées (première lettre en capitale), pas les capitales du PDF.
 */
.cc-filtres {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--cc-gouttiere);
	align-items: start;
	margin: 0 0 var(--cc-gouttiere); /* 116 px du bas des listes aux cartes sur 1 600, puces de choix comprises */
	font-family: var(--cc-haffer);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.cc-filtres__titre { margin: 0; font-size: clamp(44px, 5.06vw, 97px); } /* « PROJETS » en Review, 81 px sur 1 600 (maquette XD_4) */
.cc-filtres__colonne { display: flex; flex-direction: column; font-size: clamp(14px, 1vw, 18px); line-height: 1.1; }
.cc-filtres__intitule { margin: 0; color: var(--cc-noir); }
.cc-filtres__liste { margin: 0; padding: 0; list-style: none; }
.cc-filtres__lien { color: #a3a3a0; transition: color 0.2s ease, opacity 0.2s ease; }
.cc-filtres__lien:hover,
.cc-filtres__lien:focus-visible,
.cc-filtres__lien[aria-current] { color: var(--cc-noir); }
.cc-filtres__lien.est-vide:not([aria-current]) { opacity: 0.35; }
/*
 * Choix en cours (référence envoyée par Bastien) : puces gris pâle en bas à gauche, juste au-dessus des cartes,
 * avec une croix qui retire le filtre. La ligne garde sa hauteur même vide : rien ne bouge quand on choisit.
 */
.cc-filtres__choix {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 1.9em;
	margin-top: clamp(24px, calc(7.25vw - 54px), 86px);
	font-size: clamp(14px, 1vw, 18px);
	line-height: 1;
}
.cc-filtres__puce {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0.55em 0.4em 0.6em;
	border-radius: 0.25em;
	background: #ededeb;
	color: #848482;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cc-filtres__croix { font-size: 0.85em; }
.cc-filtres__puce:hover,
.cc-filtres__puce:focus-visible { background: #e2e2df; color: var(--cc-noir); }

/* News : liste --------------------------------------------------------- */

/* Page News sur fond noir, texte crème (27/10) : l'en-tête suit (menu.js lit la couleur de .cc-main). */
body:has(.cc-main--news) { background: var(--cc-noir); }
.cc-main--news { background: var(--cc-noir); color: var(--cc-creme); }
/* Filtre de la page News (même dessin que la page Projets) : intitulé et choix en crème sur le noir. */
.cc-main--news:has(.cc-filtres) { padding-top: clamp(100px, 13vw, 250px); }
.cc-main--news .cc-filtres__intitule,
.cc-main--news .cc-filtres__lien:hover,
.cc-main--news .cc-filtres__lien:focus-visible,
.cc-main--news .cc-filtres__lien[aria-current] { color: var(--cc-creme); }
.cc-news-accueil__news[hidden] { display: none; }
.cc-main--news .cc-news-accueil__lire:hover,
.cc-main--news .cc-news-accueil__lire:focus-visible { background: var(--cc-creme); color: var(--cc-noir); }
/* Page News en grille de 4 (27/10) : cartes du bloc « Dernières news » de l'accueil, photo carrée au-dessus. */
.cc-news-grille__liste { row-gap: clamp(40px, 4vw, 80px); }
.cc-news-grille__photo { display: block; width: 100%; margin-bottom: clamp(14px, 1.25vw, 24px); overflow: hidden; aspect-ratio: 1; background: rgb(0 0 0 / 0.06); }
.cc-news-grille__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
	.cc-news-accueil__news:has(a:hover) .cc-news-grille__photo img { transform: scale(1.03); }
}

.cc-main--news { padding: clamp(100px, 13vw, 250px) var(--cc-marge) clamp(60px, 6vw, 120px); }
.cc-news__une { position: relative; display: block; overflow: hidden; color: var(--cc-creme); background: var(--cc-noir); }
.cc-news__une img { display: block; width: 100%; height: auto; aspect-ratio: 1880 / 1058; object-fit: cover; transition: transform 0.6s ease; }
.cc-news__une:hover img,
.cc-news__une:focus-visible img { transform: scale(1.02); }
.cc-news__une::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 45%, rgb(0 0 0 / 0.55));
	pointer-events: none;
}
.cc-news__une-texte {
	position: absolute;
	z-index: 1;
	left: var(--cc-marge);
	right: var(--cc-marge);
	bottom: var(--cc-marge);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 22px);
}
.cc-news__infos { font-size: var(--cc-texte); line-height: 1; }
.cc-news__une-titre {
	max-width: 14em;
	font-family: var(--cc-review);
	font-weight: 700;
	font-size: var(--cc-titre);
	line-height: 0.8;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Liste typographique : date | titre | catégorie, comme l'équipe (grand nom, petit rôle). */
.cc-news__liste { margin: clamp(40px, 5vw, 100px) 0 0; padding: 0; list-style: none; }
.cc-news__lien {
	display: grid;
	grid-template-columns: 1fr minmax(0, 3fr) 1fr;
	column-gap: var(--cc-gouttiere);
	align-items: start;
	padding: clamp(10px, 1vw, 18px) 0;
	color: var(--cc-noir);
}
.cc-news__vignette { display: none; }
.cc-news__date,
.cc-news__categorie {
	font-size: var(--cc-texte);
	line-height: 1;
	/* haut des lettres aligné sur le haut des capitales du titre */
	margin-top: calc(0.025 * var(--titre-news) + 0.04em);
}
.cc-news__categorie { text-align: right; }
.cc-news__titre {
	font-family: var(--cc-review);
	font-weight: 700;
	font-size: var(--titre-news);
	line-height: 0.8;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.cc-news__lien { --titre-news: clamp(2rem, 4.2vw, 5rem); }
.cc-news__lien:hover .cc-news__titre,
.cc-news__lien:focus-visible .cc-news__titre { color: var(--cc-bleu); }
.cc-news__apercu {
	position: fixed;
	z-index: 15;
	top: 0;
	left: 0;
	width: clamp(200px, 18vw, 340px);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	pointer-events: none;
}
.cc-news__apercu[hidden] { display: none; }

/* News : détail --------------------------------------------------------- */

.cc-main--une-news { padding-top: clamp(100px, 10vw, 200px); }
/*
 * Détail d'une news (maquette du 28/10) : blanc sur fond noir. Date + catégorie en petit, titre en grandes
 * capitales sur les deux tiers de la colonne de 1 600 px, photo en bandeau 16:6 à une gouttière des bords,
 * texte centré sur deux colonnes, puis Précédent / Suivant comme sur les projets.
 */
.cc-news-entete__texte {
	width: calc(100% - 2 * var(--cc-marge));
	max-width: var(--cc-news-largeur);
	margin: 0 auto var(--cc-espace-bloc);
}
.cc-news-entete__infos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 clamp(14px, 1.4vw, 26px);
	font-size: clamp(13px, 0.85vw, 15px);
	line-height: 1;
}
/* Catégorie : même étiquette grise que les métiers des projets. */
.cc-news-entete__tag {
	padding: 0.41em calc(0.38em + 3px) 0.37em;
	border-radius: 0.25em;
	background: #ededeb;
	color: #848482;
	font-size: clamp(10px, 0.75vw, 12px);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cc-news-entete__tag:hover,
.cc-news-entete__tag:focus-visible { background: var(--cc-creme); color: var(--cc-noir); }
.cc-news-entete__titre {
	max-width: 66.666%;
	margin: 0;
	font-family: var(--cc-review);
	font-weight: 700;
	font-size: var(--cc-titre);
	line-height: calc(0.8em + 2px); /* +2 px (demande du 28/10) */
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
}
.cc-news-entete__photo { width: calc(100% - 2 * var(--cc-gouttiere)); max-width: var(--cc-news-largeur); margin: 0 auto var(--cc-espace-bloc); }
.cc-news-entete__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; }
/*
 * Texte de la news, comme sur braconnier.agency (28/10) : deux colonnes sur toute la largeur de la page.
 * Colonne 1 = chapô, à gauche, 20 % plus gros ; colonne 2 = corps de l'article, à droite.
 * Un bloc d'une seule colonne se place à droite, comme un corps de texte.
 */
.cc-main--une-news .cc-texte .cc-titre-texte__textes { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; --texte-colonnes: 16px; }
.cc-main--une-news .cc-texte--2 .cc-titre-texte__colonne:first-child { font-size: 1.2em; line-height: 1.15; }
.cc-main--une-news .cc-texte--1 .cc-titre-texte__colonne { grid-column: 2; }
/* Largeur de page des news : 1 140 px, comme les news du site Braconnier (demande du 28/10). Tout le contenu s'y tient. */
.cc-main--une-news { --cc-news-largeur: 1140px; }
.cc-main--une-news .cc-contenu > * { width: 100%; max-width: var(--cc-news-largeur); margin-inline: auto; }
@media (max-width: 899px) {
	.cc-news-entete__titre { max-width: 100%; }
	.cc-news-entete__photo img { aspect-ratio: 16 / 9; }
	.cc-main--une-news .cc-texte .cc-titre-texte__textes { grid-column: 1 / -1; }
	.cc-main--une-news .cc-texte .cc-titre-texte__textes { grid-template-columns: 1fr; row-gap: 20px; }
	.cc-main--une-news .cc-texte--1 .cc-titre-texte__colonne { grid-column: 1; }
}

/* Pages simples (Services, Who's who?, Contact) ------------------------- */

.cc-main--page { padding: clamp(100px, 8vw, 160px) var(--cc-marge) clamp(60px, 6vw, 120px); }
.cc-page__titre { margin-bottom: var(--cc-espace-bloc); }
.cc-contenu--page { font-size: var(--cc-chapo); line-height: 1.1; }
/* Texte courant limité à deux colonnes ; les blocs maison (équipe, moodboard…) prennent toute la largeur. */
.cc-contenu--page > :not(.cc-bloc) { max-width: calc(2 * var(--cc-colonne) + var(--cc-gouttiere)); }
.cc-contenu--page > * + * { margin-top: 1em; }
.cc-contenu--page > .cc-bloc + .cc-bloc,
.cc-contenu--page > * + .cc-bloc,
.cc-contenu--page > .cc-bloc + * { margin-top: var(--cc-espace-bloc); }
/*
 * Section texte + adresse sur une grille de trois colonnes (50 %, 25 %, 25 %) :
 * le texte dans la première (50 %), la deuxième vide, l'adresse dans la dernière.
 */
body .cc-deux-colonnes.is-layout-flex { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--cc-gouttiere); max-width: 1600px; margin-inline: auto; margin-bottom: 0; } /* 1600 px centrés, comme les textes des projets */
.cc-deux-colonnes > .wp-block-column:last-child { grid-column: 3; }
/* Adresse à la taille de celle du pied de page (texte courant), pour le contraste avec le texte de gauche. */
.cc-deux-colonnes > .wp-block-column:last-child p { font-size: var(--cc-texte); line-height: 1; }
.cc-deux-colonnes > .wp-block-column { min-width: 0; }
/* Bande noire pleine largeur, texte blanc cassé. */
body .cc-deux-colonnes.is-layout-flex {
	/* Le fond noir de la page prolonge la bande au-dessus (espace entre blocs) : on ajoute le même espace en dessous. */
	padding-block: clamp(40px, 5vw, 96px) calc(clamp(40px, 5vw, 96px) + var(--cc-espace-bloc));
	color: var(--cc-creme);
	border-image: linear-gradient(var(--cc-noir), var(--cc-noir)) fill 0 / / 0 100vmax; /* fond qui déborde jusqu'aux bords de l'écran */
}
.cc-contenu--page > .cc-deux-colonnes.cc-bloc + .cc-moodboard.cc-bloc { margin-top: 0; }
/*
 * Équipe avec une couleur de fond (réglage du bloc) : bande pleine largeur.
 * Même espace visuel au-dessus du premier nom qu'en dessous du dernier :
 * Review officielle : 0,025 em entre la ligne de base et le bas de la boîte, comme entre le haut de la boîte et les capitales,
 * donc le même retrait en haut et en bas suffit.
 */
.cc-bloc.cc-equipe.cc-equipe--fond {
	padding-block: clamp(40px, 6vw, 120px);
	border-image: linear-gradient(var(--fond-equipe), var(--fond-equipe)) fill 0 / / 0 100vmax;
}
.cc-equipe--fond-creme { --fond-equipe: var(--cc-creme); }
.cc-equipe--fond-bleu { --fond-equipe: var(--cc-bleu); }
.cc-equipe--fond-rouge { --fond-equipe: var(--cc-rouge); }
.cc-equipe--fond-noir { --fond-equipe: var(--cc-noir); }
/* Dans une page, la bande touche les blocs voisins. */
.cc-contenu--page > .cc-bloc.cc-equipe.cc-equipe--fond { margin-block: 0; }
/*
 * Dans un projet aussi (27/10) : la couleur remplit tout l'espace entre les deux images (en-tête et image
 * pleine largeur). La bande mange l'espace entre blocs au-dessus et en dessous, et le rend en marge intérieure :
 * les noms gardent leur place, seul le blanc autour devient de la couleur du fond.
 */
.cc-contenu--projet > .cc-bloc.cc-equipe.cc-equipe--fond {
	margin-block: calc(-1 * var(--cc-espace-bloc));
	padding-block: calc(clamp(40px, 6vw, 120px) + var(--cc-espace-bloc));
}
.cc-contenu--page > .cc-equipe--fond + .cc-bloc.cc-bloc { margin-top: 0; }
/* Couleur des noms choisie dans le bloc (prioritaire sur la couleur du titre du projet). */
.cc-bloc.cc-equipe.cc-equipe--creme { color: var(--cc-creme); }
.cc-bloc.cc-equipe.cc-equipe--bleu { color: var(--cc-bleu); }
.cc-bloc.cc-equipe.cc-equipe--rouge { color: var(--cc-rouge); }
.cc-bloc.cc-equipe.cc-equipe--noir { color: var(--cc-noir); }
.cc-deux-colonnes p { margin: 0; }
.cc-deux-colonnes a { color: inherit; }

/* Pied de page : bande noire de 248 px ---------------------------------- */

.cc-pied {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"menu reseaux logo adresse"
		"email groupe . cookies";
	column-gap: var(--cc-gouttiere);
	row-gap: 40px;
	align-items: start;
	/* En bas, la place du bouton Contact fixe (hauteur du bouton + sa marge), pour qu'il ne couvre rien en fin de page. */
	padding: 50px var(--cc-marge) calc(2 * var(--cc-marge) + 1.2 * clamp(16.8px, 1.26vw, 24px));
	background: var(--cc-noir);
	color: var(--cc-creme);
	font-size: var(--cc-texte);
	line-height: 1;
}
.cc-pied a { color: inherit; }
.cc-pied__menu { grid-area: menu; }
.cc-pied__liste { list-style: none; padding: 0; font-size: var(--wp--preset--font-size--menu); line-height: 1; }
.cc-pied__reseaux { grid-area: reseaux; display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cc-pied__reseaux svg { width: 22px; height: 22px; }
.cc-pied__logo { grid-area: logo; justify-self: start; }
.cc-pied__logo svg { width: clamp(90px, 6.5vw, 125px); height: auto; }
.cc-pied__adresse { grid-area: adresse; }
.cc-pied__email { grid-area: email; align-self: end; }
.cc-pied__groupe { grid-area: groupe; align-self: end; }
.cc-pied__cookies { grid-area: cookies; align-self: end; }

/* Tablette et mobile : déduits du desktop -------------------------------- */

@media (max-width: 899px) {
	.cc-titre-texte,
	.cc-texte { grid-template-columns: 1fr; row-gap: 28px; }
	.cc-texte--gauche .cc-titre-texte__textes,
	.cc-texte--droite .cc-titre-texte__textes { grid-column: 1; }
	.cc-titre-texte__tete,
	.cc-titre-texte__logo,
	.cc-titre-texte__textes { grid-column: 1; grid-row: auto; }
	.cc-titre-texte__logo { justify-self: start; }
	.cc-titre-texte:has(> .cc-titre-texte__logo) .cc-titre-texte__tete { padding-right: 0; } /* le badge passe dessous */
	.cc-titre-texte__textes { grid-template-columns: 1fr; row-gap: 10px; }
	.cc-titre-texte__titre { max-width: 70%; } /* titre sur 70 % de la largeur en mobile (demande de Bastien du 19/10) */

	.cc-galerie--4 { --cc-galerie-colonnes: 2; }
	.cc-galerie--3 { --cc-galerie-colonnes: 3; }

	/* News sur mobile : petite photo, titre, puis date et catégorie dessous. */
	.cc-news__lien { grid-template-columns: 88px 1fr; grid-template-areas: "vignette titre" "vignette infos"; row-gap: 8px; --titre-news: min(8vw, 2.25rem); }
	.cc-news__vignette { display: block; grid-area: vignette; }
	.cc-news__vignette img { width: 88px; height: 66px; object-fit: cover; }
	.cc-news__titre { grid-area: titre; }
	.cc-news__date { grid-area: infos; justify-self: start; margin: 0; }
	.cc-news__categorie { grid-area: infos; justify-self: end; margin: 0; }
	.cc-news__une-titre { font-size: min(9vw, 2.75rem); }
	.cc-news__une img { aspect-ratio: 4 / 5; }

	/*
	 * Équipe sur mobile : une ligne par personne (nom + rôle à droite), retrait
	 * irrégulier réglable, taille commune calculée par affiche.js (--nom).
	 */
	.cc-equipe { --nom: 11vw; --role: 11px; }
	.cc-equipe__membre { display: flex; align-items: flex-start; gap: 3px; padding-left: calc(var(--retrait, 0) * 6vw); }
	.cc-equipe__membre + .cc-equipe__membre { margin-top: 0.06em; }
	.cc-equipe__nom { text-align: left; }
	.cc-equipe__membre--gauche .cc-equipe__role,
	.cc-equipe__membre--droite .cc-equipe__role { order: 2; justify-self: auto; text-align: left; }
	/* Côté du rôle tiré au hasard par personne (27/10) : à gauche, il passe devant le nom, aligné à droite. */
	.cc-equipe__membre--mobile-gauche .cc-equipe__role { order: -1; text-align: right; }

	.cc-moodboard__rangee--4 { grid-template-columns: repeat(2, 1fr); }
	.cc-moodboard__rangee--2 { grid-template-columns: repeat(2, 1fr); }
	.cc-contenu--page > :not(.cc-bloc) { max-width: none; }
	body .cc-deux-colonnes.is-layout-flex { grid-template-columns: 1fr; row-gap: 1em; }
	.cc-deux-colonnes > .wp-block-column:last-child { grid-column: auto; }

	.cc-citation p,
	.cc-citation--gauche p,
	.cc-citation--centre p { grid-column: 1 / -1; }

	.cc-une__milieu { max-width: 100%; }
	.cc-intro__logotype { width: min(72vw, 46svh * 1.177); }
	/* Les retours à la ligne du texte de présentation sont pensés pour le desktop. */
	.cc-intro__texte br { display: none; }

	/* Filtre : le titre au-dessus, les deux listes côte à côte. */
	.cc-filtres { grid-template-columns: 1fr 1fr; row-gap: 24px; }
	.cc-filtres__titre { grid-column: 1 / -1; }
	/* Tablette et mobile : deux colonnes. */
	.cc-grille { grid-template-columns: repeat(2, 1fr); }

	.cc-pied {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"menu logo"
			"adresse reseaux"
			"email email"
			"groupe groupe"
			"cookies cookies";
		row-gap: 28px;
	}
	.cc-pied__logo { justify-self: end; }
	.cc-pied__reseaux { justify-self: end; }
}

@media (max-width: 599px) {
	.cc-grille { grid-template-columns: 1fr; } /* téléphone : une colonne */
	.cc-galerie--2 { --cc-galerie-colonnes: 1; }
	.cc-galerie--2.cc-galerie--portrait { --cc-galerie-colonnes: 2; }
	.cc-galerie--3 { --cc-galerie-colonnes: 1; }
	.cc-image-pleine img,
	.cc-image-pleine .cc-lecteur { aspect-ratio: 4 / 3; }
	.cc-galerie .cc-legende,
	.cc-image-pleine .cc-legende,
	.cc-video .cc-legende { bottom: 12px; padding: 0 12px; }
	.cc-projet-nav { grid-template-columns: 1fr 1fr; }
	.cc-projet-nav { column-gap: var(--cc-gouttiere); }
	.cc-projet-nav { --sens: min(5vw, 1.375rem); --logo: min(10vw, 2.75rem); } /* mots réduits de moitié (27/10), le C garde sa taille */
	.cc-projet-nav__lien--precedent { grid-column: 1; }
	.cc-projet-nav__lien--suivant { grid-column: 2; }
	/* Sur mobile, le C passe au-dessus de Précédent / Suivant au lieu de les chevaucher. */
	.cc-projet-nav__logo { position: static; grid-column: 1 / -1; grid-row: 1; justify-self: center; transform: none; margin-bottom: var(--cc-gouttiere); }
	.cc-projet-nav__lien { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-carte img { transition: none; }
}

/* Bandeau contact : bas du premier écran (accueil, Contact). Mentions | métiers | bouton Contact. */
.cc-bandeau {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "mentions tags bouton";
	align-items: end;
	gap: 12px var(--cc-gouttiere);
	padding: 0 var(--cc-marge) var(--cc-marge);
	color: var(--cc-creme);
	text-align: left;
	font-size: clamp(12px, 0.8vw, 16px); /* maquette : 15 px sur 2 000 px */
	line-height: 1;
}
.cc-bandeau__mentions { grid-area: mentions; white-space: nowrap; }
.cc-bandeau__tags {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(10px, 0.75vw, 12px);
	font-weight: 600;
}
/* Services principaux : mêmes étiquettes grises que l'accueil, la page Projets et les projets (27/10).
   Simples étiquettes, pas de liens. L'ancien arrondi au hasard (affiche.js) n'a plus d'effet. */
.cc-bandeau__tags > * {
	padding: 0.41em calc(0.38em + 3px) 0.37em;
	border-radius: 0.25em;
	background: #ededeb;
	color: #848482;
	white-space: nowrap;
	cursor: default;
}
/* Métiers d'un projet : mêmes tags, en bas au centre de l'en-tête, dans la couleur du titre. */
/*
 * Métiers centrés en bas de la photo, à 20 px du bord (essai sous le titre abandonné le 27/10).
 * Au survol de l'en-tête ils descendent un à un, comme sur l'accueil ; au doigt, toujours affichés.
 */
.cc-projet-entete__metiers {
	position: absolute;
	left: var(--cc-marge);
	right: var(--cc-marge);
	bottom: var(--cc-marge);
	z-index: 2;
}
.cc-projet-entete__metiers .cc-etiquettes { justify-content: center; margin: 0; padding: 0; list-style: none; }
@media (hover: hover) {
	.cc-projet-entete__metiers .cc-etiquettes > * {
		transform: translateY(-60%);
		opacity: 0;
		transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
		transition-delay: calc(var(--i, 0) * 45ms);
	}
	.cc-projet-entete:is(:hover, :focus-within) .cc-projet-entete__metiers .cc-etiquettes > * { transform: none; opacity: 1; }
}
/*
 * Bouton Contact fixe en bas à droite (il reste au défilement). Au clic, il s'allonge vers la gauche
 * et laisse apparaître l'adresse email + l'icône copier ; au survol de l'icône, « Copier » arrive de
 * la droite. Largeurs posées par contact.js. Sur une section bleue, il s'inverse (crème, texte bleu).
 */
.cc-contact {
	--taille: clamp(16.8px, 1.26vw, 24px); /* deux fois plus petit, puis +20 % (27/10) */
	position: fixed;
	right: var(--cc-marge);
	bottom: var(--cc-marge);
	z-index: 40; /* sous le menu plein écran (50) */
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* colonne = largeur du cadre ; le contenu plus large déborde vers la gauche */
	justify-items: end;
	align-items: center;
	overflow: hidden;
	background: var(--cc-bleu);
	color: var(--cc-creme);
	transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1), background-color 0.2s, color 0.2s;
}
.cc-contact > * { grid-area: 1 / 1; width: max-content; } /* jamais comprimé à la largeur du cadre */
.cc-contact.est-sur-bleu { background: var(--cc-creme); color: var(--cc-bleu); }
.cc-contact__bouton,
.cc-contact__email {
	font: 700 var(--taille) / 0.8 var(--cc-review);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cc-contact__bouton {
	padding: 0.2em 0.3em;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.15s;
}
/* Pas de changement de couleur au survol (27/10) : seul le clic anime le bouton. Au clavier, un simple contour. */
.cc-contact__bouton:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.cc-contact__adresse {
	display: flex;
	align-items: center;
	gap: calc(0.3 * var(--taille));
	padding: 0.2em 0.3em;
	font-size: var(--taille);
	color: var(--cc-noir);
	opacity: 0;
	transition: opacity 0.2s;
}
.cc-contact.est-sur-bleu .cc-contact__adresse { color: var(--cc-bleu); }
.cc-contact.est-ouvert .cc-contact__bouton { opacity: 0; pointer-events: none; }
.cc-contact.est-ouvert .cc-contact__adresse { opacity: 1; transition: opacity 0.25s 0.3s; } /* l'adresse arrive en fin d'allongement */
.cc-contact__email { color: inherit; text-decoration: none; }
.cc-contact__copier {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 4px 0;
	border: 0;
	background: none;
	color: inherit;
	font: 600 clamp(12px, 0.85vw, 16px) / 1 var(--cc-haffer);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}
.cc-contact__icone { flex: none; width: clamp(14.4px, 0.96vw, 19.2px); height: auto; overflow: visible; }
/* « Copier » sort de derrière l'icône : il glisse de la droite, masqué par son cadre. */
.cc-contact__libelle { display: block; min-width: 4.2em; overflow: hidden; text-align: right; }
.cc-contact__libelle span {
	display: block;
	transform: translateX(105%);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s;
}
.cc-contact__copier:hover .cc-contact__libelle span,
.cc-contact__copier:focus-visible .cc-contact__libelle span,
.cc-contact__copier.est-copie .cc-contact__libelle span { transform: none; opacity: 1; }
.cc-contact__copier:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 899px) {
	.cc-bandeau { grid-template-columns: 1fr; grid-template-areas: "tags" "mentions"; gap: 8px; font-size: 11px; }
	/* Toujours sur deux lignes (3 + 2) : au-delà de 27 em, le 4e tag passe à la ligne. */
	.cc-bandeau__tags { max-width: 30em; }
	/* Place laissée au bouton Contact fixe : à droite des mentions, et une ligne de mentions au moins aussi
	   haute que le bouton, pour que les tags restent au-dessus de lui. */
	.cc-bandeau__mentions { display: flex; align-items: flex-end; min-height: 24px; white-space: normal; padding-right: 105px; }
	.cc-bandeau__tags { justify-content: flex-start; }
	/* Pas de survol au doigt : pas de place réservée au mot « Copier » ; « Copié » remplace l'adresse un instant (contact.js). */
	.cc-contact__libelle { display: none; }
}
/*
 * Ouverture de page avec bandeau (Contact) : jamais plus haute que l'écran, pour voir la photo entière
 * en hauteur et le bandeau dès l'arrivée. Sur mobile, plein écran : la photo est recadrée, le logo en
 * trame reste entier (contain ; le noir autour disparaît grâce au fondu « éclaircir »).
 */
.cc-contenu--page > .cc-image-pleine:first-child:has(.cc-bandeau) .cc-lecteur {
	aspect-ratio: auto;
	height: min(calc(100vw / (var(--ratio, 16 / 9))), calc(100svh - var(--wp-admin--admin-bar--height, 0px)));
}
.cc-contenu--page > .cc-image-pleine:first-child:has(.cc-bandeau) .cc-lecteur video { width: 100%; height: 100%; object-fit: cover; }
/* La photo de fond est recadrée, jamais déformée (la règle « média entier » des ouvertures l'étirerait). */
.cc-contenu--page > .cc-image-pleine--superpose:first-child > img.cc-image-pleine__fond { aspect-ratio: auto; object-fit: cover; }
@media (max-width: 899px) {
	.cc-contenu--page > .cc-image-pleine:first-child:has(.cc-bandeau) .cc-lecteur { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
	.cc-contenu--page > .cc-image-pleine:first-child:has(.cc-bandeau) .cc-lecteur video { object-fit: contain; transform: scale(1.7); }
}

/*
 * Accueil, maquette XD_4 (27/10/2026) ---------------------------------------
 * Premier écran photo avec les trois C au centre, bande crème « manifeste », projet à la une sur sa photo,
 * carrousel des derniers projets sur blanc, vidéo du drapeau, dernières news sur crème.
 */
.cc-intro--monogramme .cc-intro__logotype { width: clamp(160px, 24.4vw, 470px); }
/* Logo 3D (logo-3d.js) : le rendu couvre la photo ; le logo plat s'efface une fois la première image dessinée. */
.cc-intro__3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-intro--verre.est-verre .cc-intro__logotype { visibility: hidden; }

/* Projet à la une sur photo : titre de l'en-tête du projet (affiche × 0,8) centré, petit sous-titre dessous. */
.cc-main--accueil .cc-une--photo:not(.cc-intro) { gap: clamp(14px, 1.4vw, 26px); }
.cc-main--accueil .cc-une--photo:not(.cc-intro) .cc-une__titre {
	max-width: 1600px;
	padding-top: 0;
	font-size: calc(var(--cc-affiche) * 0.8);
}
.cc-main--accueil .cc-une--photo:not(.cc-intro) .cc-une__sous-titre { font-size: clamp(13px, 1vw, 18px); line-height: 1.2; }

/*
 * Manifeste : 600 px de haut sur 1600. Contenu limité à 1 600 px centrés, comme les textes du reste du site ;
 * logo et métiers à 60 px du bord de ces 1 600 px, texte à 40 % de leur largeur.
 */
.cc-manifeste {
	display: grid;
	/* 40 % de la largeur du cadre (contenu + marges), moins la marge de gauche et la gouttière. */
	grid-template-columns: calc(40% - 0.2 * var(--cc-marge) - var(--cc-gouttiere)) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	column-gap: var(--cc-gouttiere);
	padding-block: clamp(48px, 7.5vw, 120px) clamp(56px, 9.4vw, 150px);
	padding-inline: max(var(--cc-marge), calc(50% - 800px + var(--cc-marge)));
	background: var(--cc-creme);
	color: var(--cc-noir);
}
.cc-manifeste__marque,
.cc-manifeste__metiers,
.cc-manifeste__adresse { margin-left: clamp(0px, 2.5vw, 40px); }
.cc-manifeste__marque { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.cc-manifeste__ccc { width: clamp(56px, 5.6vw, 90px); height: auto; } /* tailles de 1 600 px au maximum, comme le cadre */
.cc-manifeste__nom { width: clamp(110px, 13.1vw, 210px); height: auto; }
.cc-manifeste__texte {
	grid-column: 2;
	grid-row: 1 / 4;
	/* Maquette : environ 50 px sur 1 600, interligne 1 ; à 18,3 em, les lignes se coupent comme dans le PDF. */
	max-width: 18.3em;
	font-size: clamp(22px, 3.1vw, 50px);
	line-height: 1;
}
.cc-manifeste__metiers,
.cc-manifeste__adresse {
	grid-row: 3;
	margin-block: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(11px, 0.875vw, 14px);
	line-height: 1.25;
	text-transform: uppercase;
}
/*
 * Manifeste dans une page (L'équipe) : bord à bord, collé à la photo d'ouverture et au bloc suivant,
 * comme sur l'accueil. Le pourcentage de la marge intérieure se calcule ici sur la largeur moins les deux
 * marges de la page : on les rajoute pour garder le même cadre de 1 600 px centré.
 */
.cc-contenu--page > .cc-manifeste.cc-manifeste {
	max-width: none;
	margin: 0 calc(-1 * var(--cc-marge));
	padding-inline: max(var(--cc-marge), calc(50% - 800px + 2 * var(--cc-marge)));
	line-height: normal;
}
.cc-contenu--page > .cc-manifeste + * { margin-top: 0; }
/* Adresse (page L'équipe) : même place et même taille que les métiers, sans capitales. */
.cc-manifeste__adresse { text-transform: none; font-size: 16px; line-height: 1.15; } /* 16 px, interligne un peu plus serré (27/10) */
.cc-manifeste__adresse a { color: inherit; }

/* Carrousel : cartes 4:5 de 492 px de large sur 1600, 20 px d'écart (la gouttière du site), sur blanc ; au départ, la première carte touche le bord gauche.
   Dessous, le bouton « Tous les projets » puis un grand espace avant le bloc suivant. */
.cc-carrousel {
	--carte: 30.75vw;
	--ecart: var(--cc-gouttiere); /* 20 px, comme entre les photos d'une page projet (27/10) */
	padding-block: var(--ecart) clamp(73px, 8.125vw, 156px); /* +30 % le 27/10 : 130 px sous le bouton sur 1 600 */
	background: #fff;
	color: var(--cc-noir);
}
.cc-carrousel__piste {
	display: flex;
	gap: var(--ecart);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}
.cc-carrousel__piste::-webkit-scrollbar { display: none; }
.cc-carrousel.est-tire .cc-carrousel__piste { cursor: grabbing; }
.cc-carrousel.est-tire .cc-carrousel__lien { pointer-events: none; }
.cc-carrousel__carte { flex: 0 0 var(--carte); }
.cc-carrousel__lien { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; -webkit-user-drag: none; }
.cc-carrousel__lien img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); -webkit-user-drag: none; user-select: none; }
.cc-carrousel__lien::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.35)); pointer-events: none; }
/* Même écart du bord gauche au texte et du bas de l'image à la ligne de base : Haffer à interligne 1,2,
   la ligne de base est 0,245 em au-dessus du bas de la ligne, on la retire de l'écart du bas. */
.cc-carrousel__nom {
	position: absolute;
	left: var(--retrait);
	right: var(--retrait);
	bottom: calc(var(--retrait) - 0.245em);
	z-index: 1;
	max-width: 12em;
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1.2;
}
@media (hover: hover) {
	.cc-carrousel__lien:hover :is(img, .cc-fond-video) { transform: scale(1.03); }
}

/* Dernières news : quatre colonnes, 60 px au-dessus des dates. */
.cc-news-accueil {
	padding: clamp(40px, 3.75vw, 72px) var(--cc-marge) clamp(40px, 3.75vw, 72px);
	background: var(--cc-creme);
	color: var(--cc-noir);
}
.cc-news-accueil__liste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(32px, 3vw, 56px) var(--cc-gouttiere);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cc-news-accueil__news { display: flex; flex-direction: column; align-items: flex-start; }
.cc-news-accueil__date { font-size: clamp(12px, 1vw, 18px); line-height: 1.2; }
/* Maquette : 30 px du haut des chiffres de la date au haut du titre (date 16 px, titre 22 px sur 1 600). */
/* Écarts date / titre / bouton divisés par deux le 27/10 ; le bouton suit le titre au lieu d'être poussé en bas. */
.cc-news-accueil__titre {
	max-width: 17em;
	margin: clamp(3px, 0.35vw, 6px) 0 clamp(10px, 0.95vw, 18px);
	font-size: clamp(16px, 1.375vw, 24px);
	line-height: 1.1;
}
.cc-news-accueil__lire,
.cc-news-accueil__toutes,
.cc-carrousel__tous {
	display: inline-block;
	font-size: clamp(11px, 0.875vw, 17px);
	line-height: 1;
	text-transform: uppercase;
	border-radius: 0.55em;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cc-news-accueil__lire { min-width: 7.5em; padding: 0.6em 0.75em 0.5em; background: #e0e0de; color: #a2a0a0; }
.cc-news-accueil__lire:hover,
.cc-news-accueil__lire:focus-visible { background: var(--cc-noir); color: var(--cc-creme); }
.cc-news-accueil__toutes,
.cc-carrousel__tous {
	width: calc((100% - 3 * var(--cc-gouttiere)) / 4);
	margin-top: clamp(28px, 2.9vw, 56px);
	padding: 0.45em 0.75em 0.35em;
	border: 1px solid currentColor;
	color: inherit;
}
.cc-news-accueil__toutes:hover,
.cc-news-accueil__toutes:focus-visible,
.cc-carrousel__tous:hover,
.cc-carrousel__tous:focus-visible { background: var(--cc-noir); color: var(--cc-creme); }
/* Même bouton que « + de news », sous les cartes, aligné sur la marge du site. */
/* « Plus de projets » centré sous le slider, texte centré dans le bouton, écart réduit de moitié (28/10). */
.cc-carrousel__tous {
	display: block;
	width: calc((100% - 2 * var(--cc-marge) - 3 * var(--cc-gouttiere)) / 4);
	margin: clamp(14px, 1.45vw, 28px) auto 0;
	text-align: center;
}

@media (max-width: 899px) {
	.cc-manifeste { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 40px; padding-inline: var(--cc-marge); }
	.cc-manifeste__marque,
	.cc-manifeste__metiers,
	.cc-manifeste__adresse { margin-left: 0; }
	.cc-manifeste__texte { grid-column: auto; grid-row: auto; font-size: clamp(22px, 5.6vw, 34px); line-height: 1.05; }
	.cc-manifeste__metiers,
	.cc-manifeste__adresse { grid-row: auto; }
	.cc-carrousel { --carte: 72vw; }
	.cc-carrousel__piste { scroll-snap-type: x mandatory; }
	.cc-carrousel__carte { scroll-snap-align: start; }
	.cc-carrousel.est-auto .cc-carrousel__piste { scroll-snap-type: none; } /* défilement automatique (carrousel.js) */
	.cc-news-accueil__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cc-news-accueil__toutes { width: auto; }
	.cc-carrousel__tous { width: fit-content; padding-inline: 1.5em; }
}
@media (max-width: 599px) {
	.cc-news-accueil__liste { grid-template-columns: 1fr; }
}

/*
 * Métiers au survol (accueil : carrousel et projet à la une) : petites étiquettes grises en Haffer SemiBold,
 * texte gris moyen sur gris pâle, en haut à gauche ; elles descendent une à une depuis le haut.
 * Retouche du 27/10 : texte d'un point plus petit (13 px sur 1 600), étiquette 15 % plus petite, gris plus clair.
 */
.cc-metiers-survol {
	position: absolute;
	top: var(--retrait, clamp(14px, 1.8vw, 34px));
	left: var(--retrait, clamp(14px, 1.8vw, 34px));
	right: var(--retrait, clamp(14px, 1.8vw, 34px));
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	font-size: clamp(10px, 0.75vw, 12px); /* 12 px sur 1 600 (27/10) */
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}
.cc-metiers-survol > *,
.cc-etiquettes > * {
	padding: 0.41em calc(0.38em + 3px) 0.37em; /* 15 % plus petite qu'au départ, puis 3 px de plus à gauche et à droite (27/10) */
	border-radius: 0.25em;
	background: #ededeb;
	color: #848482; /* #6e6e6c éclairci de 15 % (27/10) */
}
.cc-metiers-survol > * {
	transform: translateY(-60%);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
	transition-delay: calc(var(--i, 0) * 45ms);
}
:is(.cc-carrousel__lien, .cc-une):is(:hover, :focus-within) .cc-metiers-survol > * { transform: none; opacity: 1; }
/* Carrousel : retrait divisé par deux le 27/10 (14,5 px sur 1 600), pour les métiers en haut comme pour le nom en bas. */
.cc-carrousel__lien { --retrait: clamp(8px, 0.9vw, 17px); }
/* Projet à la une : métiers centrés, à 14,5 px du haut de la photo sur 1 600 (demande du 27/10). */
.cc-une { --retrait: clamp(8px, 0.9vw, 17px); }
.cc-une .cc-metiers-survol { justify-content: center; }
@media (hover: none) { .cc-metiers-survol { display: none; } }

/* Étiquettes fixes (page Projets, sous la légende) : même dessin que les métiers au survol, sans animation. */
.cc-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	font-size: clamp(10px, 0.75vw, 12px);
	font-weight: 600;
	line-height: 1;
}

/*
 * Vidéo d'en-tête d'un projet (28/10) : par-dessus la photo, qui sert d'image d'attente,
 * dans l'en-tête du projet, le projet à la une et les cartes du carrousel de l'accueil.
 */
.cc-fond-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
/* Visible seulement une fois lancée (lecteur.js) : pas d'image figée ni d'à-coups au chargement. */
.cc-fond-video.est-prete { opacity: 1; }
.cc-carrousel__lien .cc-fond-video.est-prete,
.cc-carte .cc-fond-video.est-prete { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.cc-carrousel__lien .cc-fond-video { transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }

/*
 * Projet à la une en carrousel (28/10) : les projets se superposent et passent en fondu
 * toutes les 6 secondes (une.js), points en bas pour choisir.
 */
.cc-une--diapos { display: grid; grid-template-columns: 100%; padding: 0; }
.cc-une__diapo {
	grid-area: 1 / 1;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: inherit;
	min-height: inherit;
	padding: 0 var(--cc-marge);
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}
.cc-une__diapo.est-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.cc-une__points {
	position: absolute;
	left: 50%;
	bottom: calc(var(--cc-burger-haut, 20px) + 4px);
	z-index: 3;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}
.cc-une__point {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.cc-une__point[aria-current="true"] { background: currentColor; }
@media (prefers-reduced-motion: reduce) {
	.cc-une__diapo, .cc-une__diapo.est-active { transition: none; }
}
/* Flèches du carrousel de la une : un simple chevron fin, crème, à la marge du site. */
.cc-une__fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 64px;
	margin-top: -32px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.cc-une__fleche--precedent { left: calc(var(--cc-marge) - 12px); }
.cc-une__fleche--suivant { right: calc(var(--cc-marge) - 12px); }
.cc-une__fleche svg { width: clamp(11px, 0.9vw, 16px); height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.3)); }
.cc-une__fleche:hover, .cc-une__fleche:focus-visible { opacity: 1; }
.cc-une__fleche--precedent:hover { transform: translateX(-3px); }
.cc-une__fleche--suivant:hover { transform: translateX(3px); }

/*
 * Infos de prise de vue (28/10, option du projet) : sur deux lignes, centrées en bas de la photo,
 * en Haffer Regular (référence envoyée par Bastien). Toujours visibles ; très petites sur mobile (info secondaire).
 */
.cc-image-pleine { position: relative; }
.cc-exif {
	--retrait: clamp(10px, 1.1vw, 20px);
	position: absolute;
	left: 50%;
	bottom: var(--retrait);
	z-index: 1;
	width: max-content;
	max-width: calc(100% - 2 * var(--retrait));
	color: #fff;
	font-size: clamp(8px, 0.85vw, 15px); /* 8 px sur mobile */
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 0 8px rgb(0 0 0 / 0.35);
	pointer-events: none;
	transform: translateX(-50%);
}
@media (max-width: 899px) { .cc-exif { --retrait: 6px; line-height: 1.15; } }

/*
 * Bandeau cookies (inc/consentement.php, 28/10) : petit encart en bas à gauche, crème sur noir,
 * mêmes boutons que « Plus de projets ». Au-dessus de tout, sauf le menu ouvert.
 */
.cc-cookies {
	position: fixed;
	left: var(--cc-marge);
	bottom: var(--cc-marge);
	z-index: 90;
	width: min(420px, calc(100% - 2 * var(--cc-marge)));
	padding: 18px 18px 16px;
	border-radius: 6px;
	background: var(--cc-noir);
	color: var(--cc-creme);
	font-size: 13px;
	line-height: 1.3;
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
.cc-cookies[hidden] { display: none; }
.cc-cookies__texte { margin: 0 0 14px; }
.cc-cookies__texte a { text-decoration: underline; text-underline-offset: 0.2em; }
.cc-cookies__boutons { display: flex; gap: 8px; }
.cc-cookies__bouton {
	flex: 1;
	padding: 0.6em 0.75em 0.5em;
	border: 1px solid currentColor;
	border-radius: 0.55em;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cc-cookies__bouton:hover,
.cc-cookies__bouton:focus-visible,
.cc-cookies__bouton--oui { background: var(--cc-creme); color: var(--cc-noir); }
.cc-cookies__bouton--oui:hover,
.cc-cookies__bouton--oui:focus-visible { background: var(--cc-bleu); border-color: var(--cc-bleu); color: #fff; }
.cc-menu-ouvert .cc-cookies { display: none; }
.cc-pied__gerer { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cc-pied__gerer:hover { text-decoration: underline; }