/* Thème Cnawak — la plongée.
   Deux températures : cyan glacial pour les données, lanterne pour l'action.
   Le rouge datura est réservé aux alertes. */

/* ---------- Polices auto-hébergées ---------- */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("../fonts/spectral-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("../fonts/spectral-300italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("../fonts/spectral-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("../fonts/spectral-400italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("../fonts/spectral-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
	--abysse: #04101F;
	--nuit: #071B30;
	--panneau: #0A2438;
	--trait: rgba(99, 207, 242, 0.14);
	--glace: #DDEFF8;
	--lecture: #C6DCE9;
	--brume: #86A5BD;
	--cyan: #63CFF2;
	--lanterne: #F0A44C;
	--datura: #E5484D;
	--display: "Bricolage Grotesque", sans-serif;
	--serif: "Spectral", Georgia, serif;
	--mono-famille: "IBM Plex Mono", monospace;
}

/* ---------- Base ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--abysse);
	color: var(--glace);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--lanterne);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.mono {
	font-family: var(--mono-famille);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lien-evitement {
	position: absolute;
	left: -9999px;
	z-index: 100;
	background: var(--lanterne);
	color: var(--abysse);
	padding: 12px 22px;
	border-radius: 0 0 8px 0;
	font-family: var(--mono-famille);
	font-size: 13px;
}

.lien-evitement:focus {
	left: 0;
	top: 0;
}

/* ---------- En-tête ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(4, 16, 31, 0.78);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--trait);
}

.admin-bar .site-header { top: 32px; }

.site-header .conteneur {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 74px;
}

.marque {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
}

.marque img,
.marque .custom-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.marque span {
	font-family: var(--display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.01em;
}

.site-nav { display: flex; align-items: center; gap: 26px; }

.site-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
}

.site-menu a {
	font-family: var(--mono-famille);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--brume);
	transition: color 0.2s;
}

.site-menu a:hover,
.site-menu .current-menu-item > a { color: var(--glace); }

/* Sous-menu : les expéditions se déplient */
.site-menu li { position: relative; }

.site-menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: -18px;
	min-width: 240px;
	list-style: none;
	background: var(--nuit);
	border: 1px solid var(--trait);
	border-radius: 12px;
	padding: 10px;
	display: none;
	box-shadow: 0 18px 44px rgba(2, 8, 16, 0.6);
}

.site-menu li:hover > .sub-menu,
.site-menu li:focus-within > .sub-menu { display: block; }

/* Pont invisible sous l'élément survolé : sans lui, traverser l'écart
   de 14px ferme le sous-menu avant qu'on puisse l'atteindre. */
.site-menu li:hover::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -18px;
	right: -18px;
	height: 18px;
}

.site-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
}

.site-menu .sub-menu a:hover { background: rgba(99, 207, 242, 0.08); }

.btn-abonner {
	font-family: var(--mono-famille);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--abysse);
	background: var(--lanterne);
	padding: 10px 22px;
	border-radius: 999px;
	transition: box-shadow 0.25s, transform 0.2s;
	white-space: nowrap;
}

.btn-abonner:hover {
	box-shadow: 0 0 24px rgba(240, 164, 76, 0.45);
	transform: translateY(-1px);
}

/* ---------- Hero de l'accueil : la surface ---------- */

.hero {
	position: relative;
	min-height: calc(92vh - 74px);
	display: flex;
	align-items: center;
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(221, 239, 248, 0.5), transparent),
		radial-gradient(1px 1px at 38% 8%, rgba(221, 239, 248, 0.4), transparent),
		radial-gradient(1px 1px at 61% 24%, rgba(221, 239, 248, 0.35), transparent),
		radial-gradient(1.5px 1.5px at 78% 12%, rgba(221, 239, 248, 0.45), transparent),
		radial-gradient(1px 1px at 89% 32%, rgba(221, 239, 248, 0.3), transparent),
		radial-gradient(1px 1px at 24% 38%, rgba(221, 239, 248, 0.25), transparent),
		radial-gradient(1.5px 1.5px at 52% 42%, rgba(221, 239, 248, 0.2), transparent),
		linear-gradient(180deg, #030B16 0%, var(--nuit) 78%, #0A2A44 100%);
	overflow: hidden;
}

/* Uniquement le vertical : l'horizontal appartient au .conteneur */
.hero-interieur {
	position: relative;
	z-index: 2;
	padding-top: 90px;
	padding-bottom: 140px;
}

.hero .sourcil {
	color: var(--cyan);
	margin-bottom: 26px;
	animation: fondu 0.9s ease both;
}

.hero h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(46px, 7.2vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 11ch;
	animation: fondu 0.9s 0.15s ease both;
}

.hero h1 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	color: var(--cyan);
	letter-spacing: 0;
}

.hero .promesse {
	margin-top: 30px;
	max-width: 46ch;
	font-size: 20px;
	font-style: italic;
	color: var(--brume);
	animation: fondu 0.9s 0.3s ease both;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 44px;
	flex-wrap: wrap;
	animation: fondu 0.9s 0.45s ease both;
}

.btn-plonger {
	display: inline-block;
	font-family: var(--mono-famille);
	font-size: 14px;
	letter-spacing: 0.08em;
	background: var(--lanterne);
	color: var(--abysse);
	padding: 15px 30px;
	border-radius: 999px;
	transition: box-shadow 0.25s, transform 0.2s;
}

.btn-plonger:hover {
	box-shadow: 0 0 32px rgba(240, 164, 76, 0.5);
	transform: translateY(-2px);
}

.lien-chaine {
	font-family: var(--mono-famille);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--cyan);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}

.lien-chaine:hover { border-color: var(--cyan); }

.berg-pointe {
	position: absolute;
	right: 9%;
	bottom: 0;
	width: 240px;
	height: 150px;
	clip-path: polygon(42% 0, 78% 62%, 100% 100%, 0 100%, 18% 48%);
	background: linear-gradient(180deg, rgba(99, 207, 242, 0.30), rgba(99, 207, 242, 0.06));
	z-index: 1;
}

/* ---------- Ligne de flottaison ---------- */

.flottaison {
	position: relative;
	height: 46px;
	background: linear-gradient(180deg, #0A2A44 0%, #062036 100%);
}

.flottaison svg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 24px;
	transform: translateY(-50%);
	overflow: visible;
}

.flottaison .vague { animation: houle 13s linear infinite; }

.flottaison .repere {
	position: absolute;
	top: 50%;
	left: 32px;
	transform: translateY(-160%);
	color: var(--cyan);
	opacity: 0.85;
}

@keyframes houle {
	from { transform: translateX(0); }
	to { transform: translateX(-390px); }
}

@keyframes fondu {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sous l'eau ---------- */

.sous-eau {
	position: relative;
	background: linear-gradient(180deg, #062036 0%, var(--abysse) 26%, #030C18 100%);
	overflow: hidden;
}

.berg-masse {
	position: absolute;
	top: 0;
	right: -6%;
	width: 780px;
	height: 1150px;
	clip-path: polygon(38% 0, 62% 0, 88% 22%, 100% 58%, 72% 100%, 22% 88%, 0 42%, 16% 12%);
	background: linear-gradient(200deg, rgba(99, 207, 242, 0.10), rgba(99, 207, 242, 0.0) 68%);
	pointer-events: none;
}

.section { position: relative; padding: 110px 0 30px; }

.tete-section { margin-bottom: 54px; }

.tete-section .sourcil { color: var(--cyan); display: block; margin-bottom: 14px; }

.tete-section h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -0.01em;
}

.tete-section p {
	margin-top: 14px;
	color: var(--brume);
	max-width: 54ch;
	font-size: 18px;
}

.palier {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 60px 0 0;
	color: rgba(134, 165, 189, 0.55);
}

.palier::before, .palier::after { content: ""; flex: 1; height: 1px; }
.palier::before { background: linear-gradient(90deg, transparent, var(--trait)); }
.palier::after { background: linear-gradient(90deg, var(--trait), transparent); }

/* ---------- Expéditions ---------- */

.expeditions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.expedition {
	position: relative;
	display: block;
	background: linear-gradient(180deg, rgba(10, 36, 56, 0.75), rgba(10, 36, 56, 0.35));
	border: 1px solid var(--trait);
	border-radius: 14px;
	padding: 34px 34px 30px;
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

a.expedition:hover {
	border-color: rgba(240, 164, 76, 0.55);
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(2, 8, 16, 0.55);
}

.expedition .profondeur {
	position: absolute;
	top: 34px;
	right: 34px;
	color: var(--cyan);
	opacity: 0.75;
}

.expedition h3 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 12px;
	padding-right: 90px;
}

.expedition p { color: var(--brume); font-size: 16.5px; max-width: 52ch; }

.expedition .voir {
	display: inline-block;
	margin-top: 20px;
	font-family: var(--mono-famille);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	color: var(--brume);
	opacity: 0.6;
	transition: opacity 0.25s, color 0.25s, transform 0.25s;
}

.expedition:hover .voir { opacity: 1; color: var(--lanterne); transform: translateX(4px); }

/* ---------- Grilles de plongées ---------- */

.plongees {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.plongee { display: block; }

.plongee .vignette {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--trait);
	background: var(--panneau);
	transition: border-color 0.25s, box-shadow 0.25s;
}

.plongee .vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.plongee:hover .vignette {
	border-color: rgba(240, 164, 76, 0.6);
	box-shadow: 0 14px 40px rgba(2, 8, 16, 0.6), 0 0 0 1px rgba(240, 164, 76, 0.2);
}

.plongee:hover .vignette img { transform: scale(1.04); }

.plongee .meta {
	display: flex;
	gap: 10px;
	margin: 16px 0 8px;
	color: var(--cyan);
	opacity: 0.85;
}

.plongee h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.005em;
	transition: color 0.2s;
}

.plongee:hover h3 { color: var(--lanterne); }

.toutes-plongees {
	display: inline-block;
	margin-top: 48px;
	font-family: var(--mono-famille);
	font-size: 13.5px;
	letter-spacing: 0.1em;
	color: var(--cyan);
	border: 1px solid var(--trait);
	padding: 13px 26px;
	border-radius: 999px;
	transition: border-color 0.25s, color 0.25s;
}

.toutes-plongees:hover { border-color: var(--lanterne); color: var(--lanterne); }

/* ---------- Plateformes ---------- */

.plateformes { display: flex; flex-wrap: wrap; gap: 14px; }

.plateforme {
	font-family: var(--mono-famille);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--brume);
	border: 1px solid var(--trait);
	border-radius: 999px;
	padding: 12px 24px;
	transition: color 0.2s, border-color 0.2s, box-shadow 0.25s;
}

.plateforme:hover {
	color: var(--glace);
	border-color: rgba(240, 164, 76, 0.55);
	box-shadow: 0 0 18px rgba(240, 164, 76, 0.18);
}

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

.jauge {
	position: fixed;
	top: 74px;
	bottom: 0;
	left: 34px;
	width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 40;
}

.admin-bar .jauge { top: 106px; }

.jauge .ligne {
	flex: 1;
	width: 1px;
	background: var(--trait);
	position: relative;
}

.jauge .ligne::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--descente, 0%);
	background: linear-gradient(180deg, var(--cyan), var(--lanterne));
}

.jauge .valeur {
	font-family: var(--mono-famille);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--cyan);
	padding: 18px 0;
	white-space: nowrap;
}

.article-hero {
	background: linear-gradient(180deg, #030B16, var(--nuit));
	border-bottom: 1px solid var(--trait);
	padding: 84px 32px 60px;
}

.article-hero .interieur { max-width: 760px; margin: 0 auto; }

.fil {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--cyan);
	margin-bottom: 26px;
}

.fil .sep { opacity: 0.4; }

.article-hero h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.standfirst {
	margin-top: 26px;
	font-size: 21px;
	line-height: 1.55;
	font-style: italic;
	font-weight: 300;
	color: var(--brume);
}

/* Le corps de l'article : la prose du conteur */

.corps {
	max-width: 700px;
	margin: 0 auto;
	padding: 56px 32px 40px;
}

.corps > * { margin-bottom: 28px; }

.corps p {
	font-size: 19px;
	line-height: 1.78;
	color: var(--lecture);
}

.corps p strong, .corps li strong { color: var(--glace); font-weight: 600; }

.corps a {
	color: var(--cyan);
	border-bottom: 1px solid rgba(99, 207, 242, 0.35);
	transition: color 0.2s, border-color 0.2s;
}

.corps a:hover { color: var(--lanterne); border-color: rgba(240, 164, 76, 0.5); }

.corps h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -0.01em;
	margin-top: 56px;
}

.corps h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 24px;
	margin-top: 44px;
}

.corps ul, .corps ol {
	padding-left: 26px;
	font-size: 19px;
	line-height: 1.78;
	color: var(--lecture);
}

.corps li { margin-bottom: 10px; }

.corps li::marker { color: var(--cyan); }

.corps hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--trait), transparent);
	margin: 56px 0;
}

.corps figure { margin: 38px 0; }

.corps img { border-radius: 10px; }

.corps figcaption,
.corps .wp-element-caption {
	font-family: var(--mono-famille);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(134, 165, 189, 0.7);
	margin-top: 12px;
}

.corps .wp-block-embed { margin: 38px 0; }

.corps .wp-block-embed__wrapper {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--trait);
}

.corps .wp-block-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.corps pre, .corps code {
	font-family: var(--mono-famille);
	font-size: 15px;
	background: var(--panneau);
	border-radius: 6px;
}

.corps code { padding: 2px 7px; }

.corps pre { padding: 20px 24px; overflow-x: auto; border: 1px solid var(--trait); }

.corps table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	color: var(--lecture);
}

.corps th, .corps td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--trait);
	text-align: left;
}

.corps th {
	font-family: var(--mono-famille);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan);
}

/* Citations : les témoignages sont intouchables, donc mis en scène */

.corps blockquote {
	border-left: 2px solid var(--cyan);
	padding: 6px 0 6px 28px;
	margin: 38px 0;
}

.corps blockquote p {
	font-size: 21px;
	line-height: 1.6;
	font-style: italic;
	font-weight: 300;
	color: var(--glace);
	margin-bottom: 12px;
}

.corps blockquote cite {
	font-family: var(--mono-famille);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyan);
}

/* Alerte : le seul endroit où le rouge a le droit de parler */

.corps .is-style-alerte {
	border: 1px solid rgba(229, 72, 77, 0.4);
	background: rgba(229, 72, 77, 0.06);
	border-radius: 12px;
	padding: 26px 30px;
	margin: 44px 0;
}

.corps .is-style-alerte p { font-size: 17px; }

.corps .is-style-alerte h2,
.corps .is-style-alerte h3 {
	font-family: var(--mono-famille);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--datura);
	margin: 0 0 12px;
}

/* Remontée : le bloc CTA de fin de descente */

.corps .is-style-remontee {
	text-align: center;
	border: 1px solid var(--trait);
	border-radius: 14px;
	padding: 46px 34px;
	margin: 70px 0 0;
	background: linear-gradient(180deg, rgba(10, 36, 56, 0.6), rgba(10, 36, 56, 0.2));
}

.corps .wp-block-buttons { justify-content: center; }

.corps .wp-block-button__link {
	font-family: var(--mono-famille);
	font-size: 14px;
	letter-spacing: 0.08em;
	background: var(--lanterne);
	color: var(--abysse);
	padding: 15px 30px;
	border-radius: 999px;
	border: none;
	transition: box-shadow 0.25s, transform 0.2s;
}

.corps .wp-block-button__link:hover {
	box-shadow: 0 0 32px rgba(240, 164, 76, 0.5);
	transform: translateY(-2px);
	color: var(--abysse);
}

.alignwide { max-width: 1180px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }

/* ---------- Formulaires (contact, WPForms, commentaires) ---------- */

.corps input[type="text"],
.corps input[type="email"],
.corps input[type="url"],
.corps input[type="tel"],
.corps input[type="number"],
.corps textarea,
.corps select {
	width: 100%;
	font-family: var(--serif);
	font-size: 17px;
	color: var(--glace);
	background: var(--panneau);
	border: 1px solid var(--trait);
	border-radius: 10px;
	padding: 13px 18px;
	transition: border-color 0.2s, box-shadow 0.25s;
}

.corps textarea { min-height: 180px; }

.corps input[type="text"]:focus,
.corps input[type="email"]:focus,
.corps input[type="url"]:focus,
.corps input[type="tel"]:focus,
.corps input[type="number"]:focus,
.corps textarea:focus,
.corps select:focus {
	outline: none;
	border-color: rgba(240, 164, 76, 0.6);
	box-shadow: 0 0 14px rgba(240, 164, 76, 0.15);
}

.corps ::placeholder { color: rgba(134, 165, 189, 0.55); opacity: 1; }

.corps .wpforms-field-label,
.corps form label {
	font-family: var(--mono-famille);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan);
}

.corps .wpforms-field-sublabel,
.corps .wpforms-field-description {
	font-family: var(--mono-famille);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(134, 165, 189, 0.6);
}

.corps .wpforms-required-label { color: var(--datura); }

.corps input[type="submit"],
.corps button[type="submit"],
.corps .wpforms-submit {
	font-family: var(--mono-famille);
	font-size: 14px;
	letter-spacing: 0.08em;
	background: var(--lanterne);
	color: var(--abysse);
	border: none;
	border-radius: 999px;
	padding: 15px 30px;
	cursor: pointer;
	transition: box-shadow 0.25s, transform 0.2s;
}

.corps input[type="submit"]:hover,
.corps button[type="submit"]:hover,
.corps .wpforms-submit:hover {
	box-shadow: 0 0 32px rgba(240, 164, 76, 0.5);
	transform: translateY(-2px);
}

/* ---------- Continuer la descente ---------- */

.suite {
	max-width: 1180px;
	margin: 0 auto;
	padding: 90px 32px 100px;
}

.suite .sourcil { color: var(--cyan); display: block; margin-bottom: 14px; }

.suite h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 32px;
	margin-bottom: 40px;
}

.suite-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

/* ---------- Archives ---------- */

.bandeau-archive {
	background: linear-gradient(180deg, #030B16, var(--nuit));
	border-bottom: 1px solid var(--trait);
	padding: 76px 0 56px;
	margin-bottom: 64px;
}

.bandeau-archive .sourcil { color: var(--cyan); display: block; margin-bottom: 14px; }

.bandeau-archive h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 56px);
	letter-spacing: -0.015em;
}

.bandeau-archive p {
	margin-top: 14px;
	color: var(--brume);
	max-width: 60ch;
	font-size: 18px;
}

.archive-grille { margin-bottom: 70px; }

.pagination {
	margin: 0 0 90px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.pagination .page-numbers {
	font-family: var(--mono-famille);
	font-size: 13px;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--trait);
	color: var(--brume);
	transition: color 0.2s, border-color 0.2s;
}

.pagination .page-numbers.current {
	color: var(--abysse);
	background: var(--lanterne);
	border-color: var(--lanterne);
}

.pagination a.page-numbers:hover { color: var(--lanterne); border-color: rgba(240, 164, 76, 0.5); }

.aucun-resultat { color: var(--brume); font-size: 19px; padding: 40px 0 90px; }

/* ---------- Recherche ---------- */

.search-form {
	display: flex;
	gap: 12px;
	max-width: 460px;
	margin-top: 34px;
}

.search-form label { flex: 1; }

.search-form .search-field {
	width: 100%;
	font-family: var(--mono-famille);
	font-size: 14px;
	color: var(--glace);
	background: var(--panneau);
	border: 1px solid var(--trait);
	border-radius: 999px;
	padding: 13px 22px;
}

.search-form .search-field::placeholder { color: var(--brume); }

.search-form .search-submit {
	font-family: var(--mono-famille);
	font-size: 13px;
	letter-spacing: 0.08em;
	background: var(--lanterne);
	color: var(--abysse);
	border: none;
	border-radius: 999px;
	padding: 0 24px;
	cursor: pointer;
}

/* ---------- 404 ---------- */

.page-404 {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 760px;
	margin: 0 auto;
	padding: 90px 32px;
}

.page-404 .sourcil { color: var(--cyan); margin-bottom: 22px; }

.page-404 h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin-bottom: 20px;
}

.page-404 p { color: var(--brume); font-size: 19px; margin-bottom: 20px; }

/* ---------- Page Icebergs ---------- */

.page-hero {
	position: relative;
	background: linear-gradient(180deg, #030B16 0%, var(--nuit) 100%);
	border-bottom: 1px solid var(--trait);
	overflow: hidden;
	padding: 96px 0 84px;
}

.berg-decor {
	position: absolute;
	top: -120px;
	right: -8%;
	width: 700px;
	height: 900px;
	clip-path: polygon(38% 0, 62% 0, 88% 22%, 100% 58%, 72% 100%, 22% 88%, 0 42%, 16% 12%);
	background: linear-gradient(200deg, rgba(99, 207, 242, 0.10), rgba(99, 207, 242, 0.0) 68%);
	pointer-events: none;
}

.page-hero .sourcil { color: var(--cyan); display: block; margin-bottom: 20px; }

.page-hero h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(46px, 6.5vw, 78px);
	letter-spacing: -0.02em;
	line-height: 1;
	text-shadow: 0 0 46px rgba(99, 207, 242, 0.3);
}

.page-hero .standfirst { max-width: 58ch; font-size: 20px; }

.legende-ressources {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin-top: 38px;
}

.legende-ressources span {
	font-family: var(--mono-famille);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	color: var(--brume);
}

.legende-ressources b { font-weight: 500; color: var(--glace); }
.legende-ressources .puce-chart { color: var(--cyan); }
.legende-ressources .puce-video { color: var(--lanterne); }

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

.btn-ressource {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono-famille);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--trait);
	color: var(--brume);
	transition: color 0.2s, border-color 0.2s, box-shadow 0.25s;
}

.btn-ressource.chart { color: var(--cyan); border-color: rgba(99, 207, 242, 0.35); }
.btn-ressource.video { color: var(--lanterne); border-color: rgba(240, 164, 76, 0.4); }

.btn-ressource:hover {
	color: var(--glace);
	border-color: var(--glace);
	box-shadow: 0 0 16px rgba(99, 207, 242, 0.15);
}

.btn-ressource.video:hover {
	border-color: var(--lanterne);
	color: var(--lanterne);
	box-shadow: 0 0 16px rgba(240, 164, 76, 0.25);
}

.parties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.parties .label {
	font-family: var(--mono-famille);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(134, 165, 189, 0.65);
	margin-right: 4px;
}

.partie {
	font-family: var(--mono-famille);
	font-size: 12.5px;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--trait);
	color: var(--brume);
	transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

.partie:hover {
	color: var(--lanterne);
	border-color: rgba(240, 164, 76, 0.5);
	transform: translateY(-2px);
}

.partie.compil { color: var(--lanterne); border-color: rgba(240, 164, 76, 0.4); }

/* La partie des irracontables vit hors de YouTube */
.partie.irracontable { color: var(--datura); border-color: rgba(229, 72, 77, 0.4); }

.partie.irracontable:hover {
	color: var(--datura);
	border-color: var(--datura);
	box-shadow: 0 0 14px rgba(229, 72, 77, 0.25);
}

.grande-expedition {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	border: 1px solid var(--trait);
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(10, 36, 56, 0.75), rgba(10, 36, 56, 0.3));
	transition: border-color 0.25s, box-shadow 0.25s;
}

.grande-expedition:hover {
	border-color: rgba(240, 164, 76, 0.45);
	box-shadow: 0 18px 60px rgba(2, 8, 16, 0.6);
}

.grande-expedition .visuel {
	position: relative;
	min-height: 320px;
	display: block;
}

.grande-expedition .visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grande-expedition .visuel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 55%, rgba(7, 27, 48, 0.9));
}

.grande-expedition .contenu-carte { padding: 44px 44px 40px; }

.grande-expedition .badge {
	display: inline-block;
	color: var(--lanterne);
	border: 1px solid rgba(240, 164, 76, 0.4);
	border-radius: 999px;
	padding: 7px 16px;
	margin-bottom: 22px;
}

.grande-expedition h3 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.1;
	margin-bottom: 14px;
}

.grande-expedition p { color: var(--brume); font-size: 16.5px; margin-bottom: 24px; }

.icebergs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.iceberg {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--trait);
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(10, 36, 56, 0.6), rgba(10, 36, 56, 0.25));
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.iceberg:hover {
	border-color: rgba(240, 164, 76, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 16px 44px rgba(2, 8, 16, 0.55);
}

.iceberg .vignette { aspect-ratio: 16 / 9; overflow: hidden; }

.iceberg .vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.iceberg:hover .vignette img { transform: scale(1.04); }

.iceberg .contenu-carte {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.iceberg .embleme {
	color: var(--cyan);
	opacity: 0.85;
	display: block;
	margin-bottom: 10px;
}

.iceberg h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.25;
	margin-bottom: 10px;
}

.iceberg p {
	color: var(--brume);
	font-size: 15.5px;
	margin-bottom: 20px;
	flex: 1;
}

.miniberg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 34px;
	border: 1px solid var(--trait);
	border-radius: 14px;
	padding: 26px 32px;
	background: linear-gradient(90deg, rgba(10, 36, 56, 0.55), rgba(10, 36, 56, 0.15));
}

.miniberg .embleme { font-size: 26px; }

.miniberg .texte { flex: 1; min-width: 260px; }

.miniberg h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 4px;
}

.miniberg p { color: var(--brume); font-size: 15px; }

.credit { margin-top: 56px; color: rgba(134, 165, 189, 0.5); }

.credit a {
	color: rgba(134, 165, 189, 0.75);
	border-bottom: 1px solid rgba(134, 165, 189, 0.3);
}

.credit a:hover { color: var(--cyan); border-color: var(--cyan); }

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

.site-footer {
	text-align: center;
	padding: 130px 32px 56px;
	background: linear-gradient(180deg, #030C18, #02070F);
	border-top: 1px solid var(--trait);
}

.site-footer .avatar-fond {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(240, 164, 76, 0.5), 0 0 34px rgba(240, 164, 76, 0.28);
}

.site-footer .rituel {
	margin: 26px auto 0;
	max-width: 42ch;
	font-style: italic;
	font-size: 19px;
	color: var(--brume);
}

.site-footer .rituel strong { color: var(--glace); font-weight: 400; }

.menu-pied {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 36px;
	list-style: none;
}

.menu-pied a {
	font-family: var(--mono-famille);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	color: var(--brume);
	transition: color 0.2s;
}

.menu-pied a:hover { color: var(--lanterne); }

.site-footer .fond {
	margin-top: 64px;
	color: rgba(134, 165, 189, 0.35);
}

.copyright {
	margin-top: 14px;
	font-family: var(--mono-famille);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: rgba(134, 165, 189, 0.45);
}

/* ---------- Révélations ----------
   La classe js est posée très tôt sur <html> ; sans JavaScript,
   rien n'est masqué. */

.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.vu { opacity: 1; transform: none; }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero .sourcil, .hero h1, .hero .promesse, .hero-actions { animation: none; }
	.flottaison .vague { animation: none; }
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.plongee .vignette img,
	.iceberg .vignette img,
	.expedition,
	.partie,
	.btn-plonger,
	.btn-abonner { transition: none; }
}

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

@media (max-width: 1120px) {
	.jauge { display: none; }
}

@media (max-width: 980px) {
	.plongees, .suite-grille { grid-template-columns: repeat(2, 1fr); }
	.icebergs { grid-template-columns: repeat(2, 1fr); }
	.expeditions { grid-template-columns: 1fr; }
	.berg-masse { width: 480px; opacity: 0.6; }
	.berg-decor { width: 420px; opacity: 0.6; }
	.grande-expedition { grid-template-columns: 1fr; }
	.grande-expedition .visuel { min-height: 220px; }
	.grande-expedition .visuel::after {
		background: linear-gradient(180deg, transparent 55%, rgba(7, 27, 48, 0.9));
	}
}

@media (max-width: 640px) {
	.conteneur { padding: 0 22px; }
	.site-menu { display: none; }
	.plongees, .suite-grille, .icebergs { grid-template-columns: 1fr; }
	.hero { min-height: auto; }
	.hero-interieur { padding-top: 64px; padding-bottom: 110px; }
	.berg-pointe { width: 150px; height: 96px; right: 4%; }
	.flottaison .repere { left: 22px; }
	.section { padding: 80px 0 20px; }
	.article-hero { padding: 56px 22px 44px; }
	.corps { padding: 44px 22px 30px; }
	.corps p, .corps ul, .corps ol { font-size: 18px; }
	.grande-expedition .contenu-carte { padding: 30px 26px; }
	.page-hero { padding: 64px 0 56px; }
	.suite { padding: 70px 22px 80px; }
}