/*
 * chokenami.css
 *
 * Complement de theme.json. Ne contient que ce que theme.json ne sait pas
 * exprimer : en-tete fixe, curseur personnalise, transitions de page, reveal
 * au defilement, menu plein ecran, grilles editoriales et fiches produit.
 * Aucune valeur de couleur, de typo ou d'espacement en dur : tout passe par
 * les variables generees par theme.json.
 */

/* ---------------------------------------------------------------- Socle */

/* WordPress ne pose pas de box-sizing global, le template Design si.
   Sans cette regle, toute hauteur calculee ignore les marges internes. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
}

/* Focus clavier visible partout, exigence du quality floor. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--vague-claire);
	outline-offset: 3px;
}

.cn-lien-evitement {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 14px 20px;
	background: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	transform: translateY(-120%);
	transition: transform 0.2s;
}

.cn-lien-evitement:focus {
	transform: translateY(0);
}

/* Utilitaires repris du template Design. */

.cn-surtitre {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: var(--wp--custom--lettrage--capitale-large);
	text-transform: uppercase;
	color: var(--wp--preset--color--ardoise);
}

.cn-kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vague-claire);
}

.cn-jp {
	font-family: var(--wp--preset--font-family--japonais);
	letter-spacing: var(--wp--custom--lettrage--capitale-large);
}

/* Enveloppe neutre pour les sorties de codes courts, que wpautop laisse tranquille. */
.cn-hote {
	display: contents;
}

.cn-trame {
	background-image: repeating-linear-gradient(135deg, #12384c 0 14px, #0e2e3f 14px 28px);
}

/* --------------------------------------------------------------- Entete */

.cn-entete {
	position: fixed;
	inset: 0 0 auto;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 20px var(--wp--custom--traverse);
	background: linear-gradient(180deg, rgba(8, 32, 45, 0.92), rgba(8, 32, 45, 0.55));
	border-bottom: var(--wp--custom--trait);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.cn-entete__logo img {
	display: block;
	height: 26px;
	width: auto;
}

/* WordPress pose un ecart de bloc en marge sur les enfants directs des groupes
   en disposition « flux ». Les conteneurs mis en page par le theme gerent leur
   propre espacement : ces marges les decaleraient. */
.cn-entete > *,
.cn-entete__actions > *,
.cn-entete-section > *,
.cn-hero__actions > *,
.cn-manifeste > *,
.cn-grille > *,
.cn-liste-actu > *,
.cn-ligne-actu > *,
.cn-collections > *,
.cn-frise__jalons > *,
.cn-produit > *,
.cn-carte-article > *,
.cn-carte-produit > *,
.cn-carte-produit__pied > *,
.cn-planche > *,
.cn-pied__colonnes > *,
.cn-pied__liens > * {
	margin-block: 0;
}

.cn-entete__nav {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	padding: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cn-entete__nav a {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
}

.cn-entete__nav a:hover,
.cn-entete__nav a:focus-visible,
.cn-entete__nav .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
}

/*
 * Sous-menu de l'entree Articles. WordPress le sert par defaut en blanc sur
 * fond blanc borde de gris, et le dispose en rangee sous overflow cache, si
 * bien que les entrees debordent et disparaissent. On le repeint aux couleurs
 * du theme, on le remet en colonne, et on lui rend un focus clavier visible.
 *
 * Les selecteurs sont volontairement longs : les styles du bloc de navigation
 * du noyau sont plus specifiques que ceux d'un theme.
 */
.cn-entete__nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	flex-direction: column;
	height: auto;
	min-width: 240px;
	padding: 10px 0;
	overflow: visible;
	border: var(--wp--custom--trait-doux);
	background: var(--wp--preset--color--nuit);
	color: var(--wp--preset--color--brume);
	box-shadow: 0 18px 44px rgba(3, 14, 20, 0.55);
}

.cn-entete__nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container li {
	width: 100%;
}

.cn-entete__nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 10px 22px;
	border-bottom: 0;
	color: var(--wp--preset--color--brume);
	letter-spacing: 0.12em;
}

.cn-entete__nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:hover,
.cn-entete__nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container li > a.wp-block-navigation-item__content:focus-visible {
	border-bottom: 0;
	background: var(--wp--preset--color--recif);
	color: var(--wp--preset--color--blanc);
}

/* La fleche du sous-menu doit suivre la couleur du texte, pas le noir par defaut. */
.cn-entete__nav .wp-block-navigation__submenu-icon svg {
	fill: currentColor;
}

.cn-entete__nav .wp-block-navigation-submenu > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cn-entete__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.cn-panier {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cn-panier__compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
}

/* Bouton burger et menu plein ecran. */

.cn-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0;
	background: none;
	border: var(--wp--custom--trait-fort);
	cursor: pointer;
}

.cn-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wp--preset--color--ecume);
	transition: transform 0.25s var(--wp--custom--sortie), opacity 0.2s;
}

.cn-burger[aria-expanded='true'] span:first-child {
	transform: translateY(4px) rotate(45deg);
}

.cn-burger[aria-expanded='true'] span:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

.cn-menu-plein {
	position: fixed;
	inset: 0;
	z-index: 490;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 100px var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: rgba(5, 22, 32, 0.97);
}

.cn-menu-plein[hidden] {
	display: none;
}

.cn-menu-plein a {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 12vw;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--lettrage--titre);
}

/* --------------------------------------------------- Curseur et calques */

.cn-curseur {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid rgba(234, 241, 244, 0.55);
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: difference;
	opacity: 0;
	transition: width 0.25s, height 0.25s, margin 0.25s, background 0.25s, border-color 0.25s, opacity 0.2s;
}

.cn-curseur.est-actif {
	opacity: 1;
}

.cn-curseur.sur-lien {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	background: rgba(234, 241, 244, 0.14);
	border-color: transparent;
}

.cn-voile-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--wp--preset--color--vague);
	pointer-events: none;
	transform: scaleY(0);
	transform-origin: bottom;
}

.cn-voile-transition.est-actif {
	animation: cn-balayage 900ms var(--wp--custom--sortie-nette) forwards;
}

/* ------------------------------------------------------ Haut de page */

.cn-haut-de-page {
	position: fixed;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 480;
	width: 62px;
	height: 62px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.cn-haut-de-page.est-visible {
	opacity: 1;
	visibility: visible;
}

.cn-enso {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cn-enso__trace {
	animation: cn-enso 3.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

/* ----------------------------------------------------------------- Hero */

.cn-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
	padding: 140px var(--wp--custom--traverse) 90px;
}

.cn-hero__fond {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--wp--preset--color--abysse);
}

.cn-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	transform: translate(-50%, -50%);
	filter: saturate(0.55) contrast(1.08) brightness(0.85);
}

.cn-hero__teinte {
	position: absolute;
	inset: 0;
	background: #0b2e40;
	mix-blend-mode: color;
	opacity: 0.72;
}

.cn-hero__voile {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 85% at 45% 45%, rgba(5, 22, 32, 0) 35%, rgba(5, 22, 32, 0.65) 100%),
		linear-gradient(180deg, rgba(5, 22, 32, 0.62) 0%, rgba(5, 22, 32, 0.2) 45%, rgba(8, 32, 45, 0.9) 100%);
}

.cn-hero__contenu {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.cn-hero__surtitre {
	margin: 0 0 34px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #dce8ed;
}

.cn-hero__titre {
	margin: 0;
	max-width: 16ch;
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.cn-hero__wordmark {
	display: block;
	width: min(68vw, 640px);
	height: auto;
	margin: 0 0 0.34em -0.02em;
}

.cn-hero__accroche {
	display: block;
	margin-top: 0.28em;
	font-size: min(0.4em, 6.2vw);
	line-height: 1.04;
	letter-spacing: var(--wp--custom--lettrage--titre);
	white-space: nowrap;
}

.cn-hero__jp {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--japonais);
	font-size: var(--wp--preset--font-size--moyen);
	letter-spacing: var(--wp--custom--lettrage--capitale-large);
	color: var(--wp--preset--color--brume);
}

.cn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 46px;
}

.cn-defiler {
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 6;
	width: 68px;
	height: 68px;
	margin-left: -34px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	animation: cn-flottement 3.4s ease-in-out infinite;
}

/* Boutons repris du Design, hors bouton Gutenberg. */

.cn-bouton,
.cn-bouton-fantome {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 30px;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.cn-bouton {
	background: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
}

.cn-bouton:hover,
.cn-bouton:focus-visible {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
}

.cn-bouton-fantome {
	border: var(--wp--custom--trait-fort);
}

.cn-bouton-fantome:hover,
.cn-bouton-fantome:focus-visible {
	background: rgba(234, 241, 244, 0.07);
	border-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--blanc);
}

/* ------------------------------------------------------------ Sections */

.cn-section {
	padding-block: var(--wp--preset--spacing--80);
}

.cn-section--filet {
	border-top: var(--wp--custom--trait);
}

.cn-section--nuit {
	background: var(--wp--preset--color--nuit);
	border-block: var(--wp--custom--trait);
}

.cn-entete-section {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.cn-entete-section h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--titre);
}

.cn-lien-suite {
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	color: #7fa9bc;
	white-space: nowrap;
}

/* Manifeste. */

/* L'etiquette occupe sa propre ligne : sans cela elle poussait le visuel vers
   le bas et son sommet ne tombait plus en face de la premiere ligne de texte. */
.cn-manifeste {
	display: grid;
	grid-template-columns: 1fr 1.55fr;
	grid-template-areas:
		"etiquette ."
		"visuel    texte";
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.cn-manifeste__etiquette { grid-area: etiquette; }
.cn-manifeste__visuel    { grid-area: visuel; }
.cn-manifeste__texte     { grid-area: texte; }

/* La colonne de gauche du manifeste portait un simple surtitre et laissait un
   grand vide. Un visuel en portrait l'occupe, sans concurrencer le texte. */
.cn-manifeste__visuel {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--recif);
	border: var(--wp--custom--trait-doux);
}

.cn-manifeste__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--wp--custom--sortie);
}

.cn-manifeste:hover .cn-manifeste__visuel img {
	transform: scale(1.03);
}

.cn-manifeste__phrase {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 40px);
	line-height: 1.35;
	font-weight: 500;
	text-wrap: pretty;
}

.cn-manifeste__suite {
	margin: 30px 0 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--lecture);
	line-height: 1.8;
	color: var(--wp--preset--color--brume);
}

/* Le second paragraphe et les suivants portent la doctrine du site, en retrait
   du premier qui reste la promesse. */
.cn-manifeste__suite + .cn-manifeste__suite {
	color: var(--wp--preset--color--ardoise);
}

/* Une signature ferme la colonne et l'equilibre avec la hauteur du visuel. */
.cn-manifeste__signature {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--trait-doux);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	color: var(--wp--preset--color--ardoise);
}

.cn-manifeste__signature span {
	font-family: var(--wp--preset--font-family--japonais);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: normal;
	color: var(--wp--preset--color--vague-claire);
}

/* Grilles. */

.cn-grille {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cn-grille--2 { grid-template-columns: repeat(2, 1fr); }
.cn-grille--3 { grid-template-columns: repeat(3, 1fr); }
.cn-grille--4 { grid-template-columns: repeat(4, 1fr); }

.cn-grille--filets {
	gap: 1px;
	background: rgba(234, 241, 244, 0.12);
}

/* Portes de la page d'accueil. */

.cn-porte {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #0d2e3e;
}

.cn-porte__media {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.8s var(--wp--custom--sortie);
}

.cn-porte:hover .cn-porte__media,
.cn-porte:focus-visible .cn-porte__media {
	transform: scale(1.06);
}

/*
 * Encyclopedie des clans : une armure en portrait a cote du texte
 * d'introduction, puis la meme grille de fiches que les disciplines.
 */
.cn-clans__intro {
	display: grid;
	grid-template-columns: 0.75fr 1.45fr;
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--40);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--70);
}

.cn-clans__visuel {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #0d2e3e;
}

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

@media (max-width: 900px) {
	.cn-clans__intro {
		grid-template-columns: 1fr;
	}

	.cn-clans__visuel {
		aspect-ratio: 16 / 9;
		max-height: 320px;
	}
}

/*
 * Les visuels des portes reposent en noir et blanc et reprennent leurs
 * couleurs au survol ou au focus clavier. Sur un ecran tactile, ou le survol
 * n'existe pas, chokenami.js pose cn-porte--vue quand la carte traverse le
 * centre de l'ecran. La trame diagonale, elle, n'est pas touchee : elle n'a
 * pas de couleur a rendre.
 */
img.cn-porte__media {
	filter: grayscale(1) contrast(1.06) brightness(0.94);
	transition: transform 0.8s var(--wp--custom--sortie),
		filter 0.55s var(--wp--custom--sortie);
}

.cn-porte:hover img.cn-porte__media,
.cn-porte:focus-visible img.cn-porte__media,
.cn-porte--vue img.cn-porte__media {
	filter: grayscale(0) contrast(1) brightness(1);
}

.cn-porte::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 22, 32, 0) 40%, rgba(5, 22, 32, 0.9) 100%);
}

.cn-porte__texte {
	position: absolute;
	right: 26px;
	bottom: 26px;
	left: 26px;
	z-index: 1;
}

.cn-porte__texte h3 {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 400;
}

.cn-porte__jp {
	font-family: var(--wp--preset--font-family--japonais);
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: var(--wp--custom--lettrage--capitale);
	color: var(--wp--preset--color--vague-claire);
}

/* Le bloc Titre d'article est en Archivo Black par theme.json, ce qui convient
   aux grands titres. Dans les listes et les cartes, le template Design demande
   de l'Archivo en graisse 600. */
.cn-carte-article__titre,
.cn-ligne-actu h3,
.cn-carte-produit__pied h3,
.cn-fiche-discipline h3,
.cn-jalon h3,
.cn-produit__resume p {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	letter-spacing: normal;
}

.cn-produit__resume p {
	font-weight: 400;
}

/* --------------------------------------------------- Listes d'articles */

.cn-carte-article__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.cn-carte-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--wp--custom--sortie);
}

.cn-carte-article:hover .cn-carte-article__media img {
	transform: scale(1.05);
}

.cn-carte-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 10px !important;
}

.cn-carte-article__media + * {
	margin-top: 20px !important;
}

.cn-carte-article__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--chapo);
	line-height: 1.3;
	font-weight: 600;
}

/* Liste en lignes de la page Actualite. */

.cn-liste-actu {
	display: grid;
	gap: 1px;
	background: rgba(234, 241, 244, 0.12);
}

.cn-ligne-actu {
	display: grid;
	grid-template-columns: 200px 1fr 130px;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: 30px var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--encre);
	transition: background 0.3s;
}

.cn-ligne-actu:hover,
.cn-ligne-actu:focus-within {
	background: var(--wp--preset--color--recif);
}

.cn-ligne-actu__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.cn-ligne-actu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cn-ligne-actu h3 {
	margin: 0 0 10px;
	font-size: 25px;
	line-height: 1.25;
	font-weight: 600;
}

.cn-ligne-actu__extrait {
	margin: 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	color: #8fb2c2;
}

.cn-ligne-actu__date {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.08em;
	text-align: right;
	color: var(--wp--preset--color--ardoise);
}

/* Filtres de categorie. */

.cn-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cn-filtre {
	padding: 11px 18px;
	background: none;
	border: var(--wp--custom--trait-fort);
	color: var(--wp--preset--color--ecume);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.cn-filtre:hover,
.cn-filtre:focus-visible {
	border-color: var(--wp--preset--color--vague);
}

.cn-filtre[aria-current='page'],
.cn-filtre.est-actif {
	background: var(--wp--preset--color--vague);
	border-color: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
}

/* -------------------------------------------------------------- Article */

.cn-article-entete {
	position: relative;
	overflow: hidden;
	padding: 200px var(--wp--custom--traverse) 90px;
}

.cn-article-entete__fond {
	position: absolute;
	inset: 0;
}

.cn-article-entete__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.cn-article-entete__fond::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 32, 45, 0.7), var(--wp--preset--color--encre));
}

.cn-article-entete__contenu {
	position: relative;
	max-width: 900px;
	margin-inline: auto;
}

.cn-article-entete h1 {
	margin: 0;
	font-size: clamp(36px, 4.6vw, 68px);
	line-height: 1.03;
}

.cn-signature {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 34px 0 0;
	font-size: var(--wp--preset--font-size--petit);
	color: #7fa9bc;
}

/* Corps redactionnel : chapo, intertitres, figures. */

.cn-corps > p:first-of-type {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: 22px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--wp--preset--color--ecume);
}

.cn-corps p {
	color: var(--wp--preset--color--sel);
	line-height: 1.85;
}

.cn-corps h2 {
	margin: 54px 0 22px;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.2;
}

.cn-corps figure {
	margin-block: var(--wp--preset--spacing--50);
}

.cn-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 54px;
}

.cn-etiquettes a {
	padding: 9px 15px;
	border: var(--wp--custom--trait-fort);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brume);
}

/* --------------------------------------------------------------- Frise */

.cn-frise-piste {
	overflow-x: auto;
	padding: 0 var(--wp--custom--traverse) var(--wp--preset--spacing--50);
	scrollbar-color: rgba(234, 241, 244, 0.3) transparent;
}

.cn-frise {
	/* La largeur mini et le nombre de colonnes viennent du nombre de jalons,
	   poses en style en ligne par la composition. */
	min-width: 1300px;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.cn-frise__ligne {
	height: 1px;
	background: linear-gradient(90deg, rgba(234, 241, 244, 0.06), rgba(234, 241, 244, 0.35), rgba(234, 241, 244, 0.06));
}

.cn-frise__jalons {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px;
}

/* La frise defile deja lateralement : inutile de la casser en petites colonnes. */

.cn-jalon {
	padding-top: 26px;
	border-top: 3px solid transparent;
	transition: border-color 0.3s;
}

.cn-jalon:hover,
.cn-jalon:focus-within {
	border-top-color: var(--wp--preset--color--vague);
}

.cn-jalon::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	margin: -32px 0 26px;
	background: var(--wp--preset--color--vague);
}

.cn-jalon__annee {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 22px;
}

/* ------------------------------------------------------- Encyclopedie */

.cn-fiche-discipline {
	display: block;
	padding: 30px 26px 34px;
	background: var(--wp--preset--color--nuit);
	transition: background 0.3s;
}

.cn-fiche-discipline:hover,
.cn-fiche-discipline:focus-visible {
	background: var(--wp--preset--color--recif);
}

/*
 * Porte vers la rubrique Samourais, posee dans les cases laissees vides par
 * les neuf disciplines. Elle occupe trois colonnes sur quatre et porte son
 * propre visuel, ce qui la distingue des fiches sans la sortir de la grille.
 */
.cn-fiche-samourais {
	display: grid;
	grid-column: span 3;
	grid-template-columns: 1.35fr 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 34px 30px;
}

.cn-fiche-samourais__media {
	display: block;
	height: 100%;
	min-height: 190px;
	background-position: center 22%;
	background-size: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.55s var(--wp--custom--sortie);
}

.cn-fiche-samourais:hover .cn-fiche-samourais__media,
.cn-fiche-samourais:focus-visible .cn-fiche-samourais__media {
	filter: grayscale(0) contrast(1);
}

@media (max-width: 1100px) {
	.cn-fiche-samourais {
		grid-column: span 2;
		grid-template-columns: 1fr;
	}

	.cn-fiche-samourais__media {
		min-height: 150px;
	}
}

@media (max-width: 620px) {
	.cn-fiche-samourais {
		grid-column: span 1;
	}
}

.cn-fiche-discipline__jp {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--japonais);
	font-size: 22px;
	color: var(--wp--preset--color--vague-claire);
}

/* -------------------------------------------------------------- Boutique */

.cn-carte-produit__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--recif);
}

.cn-carte-produit__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--wp--custom--sortie);
}

.cn-carte-produit:hover .cn-carte-produit__media img {
	transform: scale(1.07);
}

.cn-carte-produit__etiquette {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 10px;
	background: var(--wp--preset--color--vague);
	color: var(--wp--preset--color--blanc);
	font-size: 10px;
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
}

.cn-carte-produit__pied {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-top: 18px;
}

.cn-carte-produit__pied h3 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
}

.cn-carte-produit__gamme {
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.1em;
	color: #7fa9bc;
}

.cn-carte-produit__prix {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--brume);
	white-space: nowrap;
}

/* Bannieres collection. */

.cn-collections {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 20px;
}

.cn-collection {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--wp--preset--color--recif);
}

.cn-collection img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--wp--custom--sortie);
}

.cn-collection:hover img {
	transform: scale(1.05);
}

.cn-collection::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 22, 32, 0) 45%, rgba(5, 22, 32, 0.88));
}

.cn-collection__texte {
	position: absolute;
	bottom: 34px;
	left: 34px;
	z-index: 1;
}

.cn-collection__texte h2 {
	margin: 0;
	font-size: 40px;
}

/* Fiche produit. */

.cn-produit {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.cn-produit__achat {
	position: sticky;
	top: 120px;
}

.cn-produit__prix,
.cn-produit .price {
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--chapo);
	font-weight: 500;
	color: var(--wp--preset--color--ecume);
}

.cn-produit .price del { opacity: 0.5; }
.cn-produit .price ins { text-decoration: none; }

.cn-produit__resume {
	margin: 26px 0 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
	color: var(--wp--preset--color--brume);
}

.cn-tailles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cn-taille {
	min-width: 54px;
	padding: 13px 8px;
	background: none;
	border: var(--wp--custom--trait-fort);
	color: var(--wp--preset--color--ecume);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.1em;
	cursor: pointer;
}

.cn-taille[aria-pressed='true'] {
	background: var(--wp--preset--color--ecume);
	border-color: var(--wp--preset--color--ecume);
	color: var(--wp--preset--color--encre);
}

.cn-taille[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* La liste native reste dans le flux pour les lecteurs d'ecran et le POST du
   formulaire, mais s'efface visuellement des que les pastilles la doublent. */
.cn-liste-doublee {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Formulaire de variation WooCommerce, mis a la charte du template Design. */
.cn-produit .variations {
	margin: 40px 0 0;
	border: none;
}

.cn-produit .variations th,
.cn-produit .variations td {
	display: block;
	padding: 0;
	text-align: left;
}

.cn-produit .variations label {
	display: block;
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	color: #7fa9bc;
}

.cn-produit .reset_variations {
	display: inline-block;
	margin-top: 14px;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ardoise);
}

.cn-produit .woocommerce-variation-add-to-cart,
.cn-produit form.cart:not(.variations_form) {
	display: flex;
	gap: 12px;
	margin-top: 34px;
}

.cn-produit .quantity input {
	width: 72px;
	height: 100%;
	padding: 17px 10px;
	background: var(--wp--custom--voile);
	border: var(--wp--custom--trait-fort);
	color: var(--wp--preset--color--ecume);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	text-align: center;
}

.cn-produit button.single_add_to_cart_button {
	flex: 1;
	padding: 19px 26px;
	background: var(--wp--preset--color--vague);
	border: none;
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: var(--wp--custom--lettrage--capitale);
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}

.cn-produit button.single_add_to_cart_button:hover:not(.disabled),
.cn-produit button.single_add_to_cart_button:focus-visible:not(.disabled) {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
}

.cn-produit button.single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cn-produit .woocommerce-variation-price {
	margin-bottom: 18px;
}

.cn-produit .woocommerce-variation-availability p {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--mini);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ardoise);
}

.cn-accordeon {
	margin-top: 44px;
	border-top: var(--wp--custom--trait-doux);
}

.cn-accordeon details {
	border-bottom: var(--wp--custom--trait-doux);
}

.cn-accordeon summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.cn-accordeon summary::-webkit-details-marker { display: none; }

.cn-accordeon summary::after {
	content: '+';
	color: var(--wp--preset--color--vague-claire);
	font-size: 18px;
}

.cn-accordeon details[open] summary::after {
	content: '\2212';
}

.cn-accordeon p {
	margin: 0 0 22px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.8;
	color: var(--wp--preset--color--brume);
}

/* Mention d'exoneration de TVA, association en franchise d'impots. */

.cn-mention-tva {
	margin: 18px 0 0;
	font-size: var(--wp--preset--font-size--mini);
	line-height: 1.6;
	color: var(--wp--preset--color--ardoise);
}

/* ---------------------------------------------------------- Pied de page */

.cn-pied {
	position: relative;
	overflow: hidden;
	border-top: var(--wp--custom--trait-doux);
}

.cn-pied__fond {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	filter: saturate(0.7);
}

.cn-pied__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 28, 39, 0.9), rgba(5, 22, 32, 0.98));
}

.cn-pied__contenu {
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--custom--traverse) var(--wp--preset--spacing--50);
}

.cn-pied__colonnes {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
}

.cn-pied__colonnes h2 {
	margin: 0 0 20px;
	font-size: 34px;
	line-height: 1.1;
}

.cn-pied__liens {
	display: grid;
	gap: 12px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--sel);
}

.cn-lettre {
	display: flex;
	gap: 10px;
	max-width: 400px;
}

.cn-lettre input {
	flex: 1;
	padding: 15px 16px;
	background: var(--wp--custom--voile);
	border: var(--wp--custom--trait-fort);
	color: var(--wp--preset--color--ecume);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.cn-lettre input::placeholder {
	color: var(--wp--preset--color--ardoise);
}

.cn-lettre button {
	padding: 0 22px;
	background: var(--wp--preset--color--vague);
	border: none;
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.cn-pied__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-top: 80px;
	padding-top: 28px;
	border-top: var(--wp--custom--trait-doux);
	font-size: var(--wp--preset--font-size--mini);
	color: var(--wp--preset--color--ardoise);
}

/* -------------------------------------------------------------- Manga */

.cn-planche {
	display: block;
}

.cn-planche__media {
	overflow: hidden;
	background: var(--wp--preset--color--recif);
	border: var(--wp--custom--trait-doux);
}

.cn-planche__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.8s var(--wp--custom--sortie);
}

.cn-planche:hover .cn-planche__media img,
.cn-planche:focus-within .cn-planche__media img {
	transform: scale(1.03);
}

.cn-planche__valeur {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 18px 0 8px !important;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vague-claire);
}

.cn-planche__valeur .cn-jp {
	font-size: var(--wp--preset--font-size--petit);
	text-transform: none;
}

.cn-planche__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
}

/* Lecteur d'une planche. */

.cn-lecteur-entete .cn-planche__valeur {
	margin: 34px 0 16px !important;
	font-size: var(--wp--preset--font-size--mini);
}

.cn-lecteur {
	padding: 0 var(--wp--custom--traverse);
}

.cn-lecteur__cadre {
	max-width: 1100px;
	margin-inline: auto;
	background: var(--wp--preset--color--blanc);
	border: var(--wp--custom--trait-doux);
}

.cn-planche__page {
	display: block;
	width: 100%;
	height: auto;
}

.cn-lecteur__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: 1100px;
	margin: var(--wp--preset--spacing--40) auto 0;
}

.cn-lecteur__poids {
	margin-left: 4px;
	opacity: 0.7;
	font-weight: 400;
}

.cn-lecteur__mention {
	flex: 1;
	min-width: 24ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--mini);
	line-height: 1.6;
	color: var(--wp--preset--color--ardoise);
}

@media (max-width: 560px) {
	.cn-lecteur {
		padding-inline: 0;
	}

	.cn-lecteur__cadre {
		border-inline: none;
	}

	.cn-lecteur__actions {
		padding-inline: var(--wp--custom--traverse);
	}
}

/* --------------------------------------------------------- Animations */

@keyframes cn-flottement {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@keyframes cn-balayage {
	0% { transform: scaleY(0); transform-origin: bottom; }
	45% { transform: scaleY(1); transform-origin: bottom; }
	55% { transform: scaleY(1); transform-origin: top; }
	100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes cn-enso {
	0% { stroke-dasharray: 0 201; stroke-dashoffset: 0; opacity: 1; }
	55% { stroke-dasharray: 201 201; stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dasharray: 201 201; stroke-dashoffset: -201; opacity: 0.25; }
}

/* Apparition au defilement, pilotee par assets/js/chokenami.js. */

.cn-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--wp--custom--sortie), transform 0.9s var(--wp--custom--sortie);
	transition-delay: calc(var(--cn-reveal-rang, 0) * 90ms);
}

.cn-reveal.est-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.cn-grille--4 { grid-template-columns: repeat(2, 1fr); }
	.cn-produit { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.cn-manifeste {
		grid-template-columns: 1fr;
		grid-template-areas: "etiquette" "texte";
		gap: var(--wp--preset--spacing--40);
	}
	/* En colonne unique, le visuel repousserait le texte trop bas. */
	.cn-manifeste__visuel { display: none; }
	.cn-produit__achat { position: static; }
	.cn-ligne-actu { grid-template-columns: 130px 1fr; gap: var(--wp--preset--spacing--30); }
	.cn-ligne-actu__date { display: none; }
}

@media (max-width: 900px) {
	.cn-entete > nav.cn-entete__nav { display: none !important; }
	.cn-panier span:first-child { display: none; }
	.cn-burger { display: flex; }
	.cn-curseur { display: none; }
}

@media (max-width: 860px) {
	.cn-grille--3 { grid-template-columns: repeat(2, 1fr); }
	.cn-collections { grid-template-columns: 1fr; }
	.cn-pied__colonnes { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--50); }
	.cn-article-entete { padding-top: 150px; }
}

@media (max-width: 560px) {
	.cn-grille--3,
	.cn-grille--4 { grid-template-columns: 1fr; }
	.cn-ligne-actu { grid-template-columns: 1fr; }
	.cn-ligne-actu__media { aspect-ratio: 16 / 9; }
	.cn-pied__colonnes { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.cn-pied__barre { flex-direction: column; align-items: flex-start; gap: 12px; }
	.cn-hero__accroche { white-space: normal; }
}

/* ------------------------------------------------- Mouvement reduit */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cn-reveal {
		opacity: 1;
		transform: none;
	}

	.cn-curseur,
	.cn-voile-transition {
		display: none;
	}
}