/* sldive.suboceana.fr — feuille de style unique. Couleurs reprises du logo subOceana (marine et turquoise). */

:root {
	--marine: #1f2c52;
	--marine-fonce: #121a33;
	--abysse: #0b1226;
	--turquoise: #3d8793;
	--turquoise-vif: #4fb3bf;
	--ecume: #e8f3f5;
	--sable: #f6f8fa;
	--texte: #1b2334;
	--texte-doux: #56627a;
	--bord: #d9e2ea;
	--blanc: #ffffff;
	--rayon: 16px;
	--ombre: 0 1px 2px rgba(18, 26, 51, .06), 0 8px 24px rgba(18, 26, 51, .08);
	--ombre-forte: 0 2px 4px rgba(18, 26, 51, .08), 0 18px 40px rgba(18, 26, 51, .16);
	--largeur: 1120px;
	--police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--police-titres: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--police-code: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
	margin: 0;
	background: var(--blanc);
	color: var(--texte);
	font: 17px/1.65 var(--police);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--turquoise); text-underline-offset: 3px; }
a:hover { color: var(--marine); }
:focus-visible { outline: 3px solid var(--turquoise-vif); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--police-titres); color: var(--marine); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; margin-top: 1.6em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: .3em; }

.dedans { width: min(var(--largeur), 100% - 32px); margin-inline: auto; }

.sauter { position: absolute; left: -999px; top: 8px; background: var(--marine); color: var(--blanc); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.sauter:focus { left: 8px; }

/* ---- En-tête ---- */
.entete {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid rgba(31, 44, 82, .08);
}
.entete-dedans { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.marque img { width: 88px; height: auto; }
.navigation { display: flex; align-items: center; gap: 8px; }
.navigation ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.navigation li { margin: 0; }
.navigation a {
	display: block; padding: 8px 12px; border-radius: 999px;
	color: var(--marine); font-weight: 550; font-size: .95rem; text-decoration: none;
	transition: background-color .15s, color .15s;
}
.navigation a:hover { background: var(--ecume); color: var(--marine); }
.navigation a[aria-current="page"] { background: var(--marine); color: var(--blanc); }
.navigation .langue {
	margin-left: 8px; border: 1.5px solid var(--turquoise); color: var(--turquoise);
	font-size: .85rem; font-weight: 700; letter-spacing: .06em; padding: 6px 12px;
}
.navigation .langue:hover { background: var(--turquoise); color: var(--blanc); }

.menu-bouton {
	display: none; align-items: center; gap: 10px;
	font: 600 .95rem var(--police); color: var(--marine);
	background: none; border: 1.5px solid var(--bord); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -6px; }
.menu-icone::after { top: 6px; }
.menu-bouton[aria-expanded="true"] .menu-icone { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-icone::before { transform: translateY(6px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-icone::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.js .menu-bouton { display: inline-flex; }
	.js .navigation {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 12px;
		background: var(--blanc); padding: 12px 16px 20px; border-bottom: 1px solid var(--bord); box-shadow: var(--ombre);
	}
	.js .navigation.ouverte { display: flex; }
	.js .navigation ul { flex-direction: column; }
	.js .navigation a { padding: 12px 14px; border-radius: 10px; font-size: 1.05rem; }
	.js .navigation .langue { align-self: flex-start; margin-left: 0; }
	.entete-dedans { position: static; }
	.navigation ul { justify-content: center; }
}

/* ---- Accueil : grand visuel ---- */
.heros {
	position: relative; color: var(--blanc); isolation: isolate; overflow: hidden;
	min-height: min(82vh, 720px); display: flex; align-items: flex-end;
	background: var(--abysse) url("/images/fond-sous-marin.jpg") center 35% / cover no-repeat;
}
.heros::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(11, 18, 38, .15) 0%, rgba(11, 18, 38, .35) 45%, rgba(11, 18, 38, .92) 100%),
		linear-gradient(90deg, rgba(11, 18, 38, .55) 0%, rgba(11, 18, 38, 0) 65%);
}
.heros-dedans { padding: 120px 0 64px; max-width: 760px; }
.heros h1 { color: var(--blanc); font-size: clamp(2.3rem, 6vw, 4rem); margin-bottom: .35em; text-wrap: balance; }
.heros p { font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255, 255, 255, .88); max-width: 620px; }
.surtitre {
	display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--turquoise-vif); margin-bottom: 14px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.bouton {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--turquoise); color: var(--blanc); text-decoration: none;
	font-weight: 650; padding: 13px 24px; border-radius: 999px;
	box-shadow: 0 6px 18px rgba(61, 135, 147, .35); transition: transform .15s, background-color .15s;
}
.bouton:hover { background: var(--turquoise-vif); color: var(--blanc); transform: translateY(-1px); }
.bouton--clair { background: rgba(255, 255, 255, .12); box-shadow: none; border: 1.5px solid rgba(255, 255, 255, .55); }
.bouton--clair:hover { background: rgba(255, 255, 255, .22); }
.bouton--contour { background: none; color: var(--marine); border: 1.5px solid var(--marine); box-shadow: none; }
.bouton--contour:hover { background: var(--marine); color: var(--blanc); }
.fleche::after { content: "→"; display: inline-block; transition: transform .15s; }
a:hover .fleche::after, .fleche:hover::after { transform: translateX(3px); }

/* ---- Bandeau des pages intérieures ---- */
.bandeau {
	position: relative; overflow: hidden; color: var(--blanc);
	background: linear-gradient(120deg, var(--marine-fonce) 0%, var(--marine) 45%, var(--turquoise) 120%);
	padding: 72px 0 64px;
}
.bandeau::after {
	/* bulles du logo */
	content: ""; position: absolute; right: -40px; top: -20px; width: 420px; height: 260px; opacity: .22; pointer-events: none;
	background:
		radial-gradient(circle at 20% 70%, #fff 0 18px, transparent 19px),
		radial-gradient(circle at 36% 40%, #fff 0 26px, transparent 27px),
		radial-gradient(circle at 52% 62%, #fff 0 14px, transparent 15px),
		radial-gradient(circle at 64% 30%, #fff 0 30px, transparent 31px),
		radial-gradient(circle at 80% 50%, #fff 0 20px, transparent 21px),
		radial-gradient(circle at 90% 20%, #fff 0 12px, transparent 13px);
}
.bandeau h1 { color: var(--blanc); margin-bottom: .25em; }
.bandeau-texte { font-size: 1.15rem; color: rgba(255, 255, 255, .85); max-width: 680px; margin: 0; }

/* ---- Sections ---- */
.section { padding: 72px 0; }
.section--ecume { background: var(--sable); }
.section--sombre { background: var(--marine-fonce); color: rgba(255, 255, 255, .86); }
.section--sombre h2, .section--sombre h3 { color: var(--blanc); }
.section-tete { max-width: 720px; margin-bottom: 40px; }
.section-tete p { color: var(--texte-doux); font-size: 1.1rem; }
.section--sombre .section-tete p { color: rgba(255, 255, 255, .75); }
.chapo { font-size: 1.2rem; color: var(--texte-doux); max-width: 760px; }

.citation {
	font-family: var(--police-titres); font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.45; color: var(--marine);
	max-width: 860px; margin: 0 auto; text-align: center; font-weight: 500; text-wrap: balance;
}

/* Fiche produit : image + texte */
.fiche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.fiche + .fiche { margin-top: 88px; }
.fiche--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fiche--inverse .fiche-visuel { order: 2; }
.fiche-visuel { position: sticky; top: 100px; }
.fiche-visuel img { border-radius: var(--rayon); box-shadow: var(--ombre-forte); width: 100%; }
.fiche h2 { margin-top: 0; }
.fiche .surtitre { color: var(--turquoise); }
@media (max-width: 860px) {
	.fiche, .fiche--inverse { grid-template-columns: 1fr; gap: 28px; }
	.fiche--inverse .fiche-visuel { order: 0; }
	.fiche-visuel { position: static; max-width: 460px; }
}

.illustration { margin: 48px 0 0; }
.illustration img { border-radius: var(--rayon); box-shadow: var(--ombre-forte); width: 100%; }
.illustration figcaption { color: var(--texte-doux); font-size: .92rem; margin-top: 12px; text-align: center; }

/* Listes */
.coches { list-style: none; padding: 0; }
.coches li { position: relative; padding-left: 30px; margin-bottom: .55em; }
.coches li::before {
	content: ""; position: absolute; left: 2px; top: .55em; width: 14px; height: 14px; border-radius: 50%;
	background: var(--ecume); box-shadow: inset 0 0 0 4px var(--turquoise);
}
.etapes { list-style: none; padding: 0; counter-reset: etape; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 0 0 52px; margin-bottom: 1.2em; }
.etapes > li::before {
	content: counter(etape); position: absolute; left: 0; top: -2px;
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--marine); color: var(--blanc); font-weight: 700; font-size: .95rem;
}

/* Encadrés */
.encart {
	background: var(--ecume); border-left: 4px solid var(--turquoise); border-radius: 0 12px 12px 0;
	padding: 16px 20px; margin: 1.4em 0;
}
.encart > :last-child { margin-bottom: 0; }
.encart--alerte { background: #fff6e8; border-left-color: #d98a1c; }
.encart strong:first-child { color: var(--marine); }

.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 1.5em 0; }
.case { background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 20px 22px; }
.case h3 { margin-top: 0; font-size: 1.05rem; }
.case p:last-child { margin-bottom: 0; }
.section--sombre .case { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.chiffre { font-family: var(--police-titres); font-size: 2rem; font-weight: 700; color: var(--turquoise-vif); line-height: 1.1; margin-bottom: 6px; }

kbd {
	font: 600 .85em var(--police-code); background: var(--blanc); border: 1px solid var(--bord); border-bottom-width: 2px;
	border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
code { font: .92em var(--police-code); background: var(--ecume); border-radius: 5px; padding: 1px 6px; color: var(--marine); }
pre {
	font: .88rem/1.6 var(--police-code); background: var(--marine-fonce); color: #d7e6ee;
	border-radius: 12px; padding: 20px 22px; overflow-x: auto; margin: 1.2em 0;
}
pre code { background: none; color: inherit; padding: 0; }

/* Cartes de l'accueil */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.cartes li { margin: 0; }
.carte {
	display: flex; flex-direction: column; height: 100%;
	background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
	color: var(--texte); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); color: var(--texte); }
.carte img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.carte-texte { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.carte h3 { margin: 0 0 .35em; font-size: 1.2rem; }
.carte p { color: var(--texte-doux); font-size: .97rem; margin: 0 0 1em; }
.carte .fleche { margin-top: auto; color: var(--turquoise); font-weight: 650; font-size: .95rem; display: inline-flex; gap: 6px; }

/* Magasins et terminaux */
.grille-magasins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.grille-magasins li { margin: 0; }
.magasin a {
	display: flex; flex-direction: column; gap: 4px; height: 100%;
	padding: 18px 20px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--bord);
	color: var(--texte); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.magasin a:hover { border-color: var(--turquoise); box-shadow: var(--ombre); transform: translateY(-2px); }
.magasin-region { font-family: var(--police-titres); font-weight: 700; color: var(--marine); font-size: 1.08rem; }
.magasin-region::after { content: " ↗"; color: var(--turquoise); font-size: .85em; }
.magasin-nom { color: var(--texte-doux); font-size: .95rem; }
.magasin-date { color: var(--texte-doux); font-size: .82rem; margin-top: auto; padding-top: 6px; }
.magasin--principal a { background: var(--marine); border-color: var(--marine); }
.magasin--principal .magasin-region { color: var(--blanc); }
.magasin--principal .magasin-region::after { color: var(--turquoise-vif); }
.magasin--formation a { border-color: var(--turquoise); background: var(--ecume); }
.magasin--nouveau a { border-style: dashed; }
.etiquette {
	align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--marine); background: var(--ecume); border-radius: 8px; padding: 3px 10px; margin-top: 2px; line-height: 1.4;
}
.magasin--principal .etiquette { background: var(--turquoise); color: var(--blanc); }
.total { color: var(--texte-doux); font-size: .92rem; margin-top: 18px; }

/* Sommaire (manuel du requin) */
.sommaire { background: var(--sable); border: 1px solid var(--bord); border-radius: 14px; padding: 20px 24px; margin: 2em 0; }
.sommaire h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); margin-bottom: .6em; }
.sommaire ol { margin: 0; padding-left: 1.3em; }
.sommaire li { margin: .25em 0; }
.manuel { max-width: 800px; }
.manuel h2 { margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--bord); }
.manuel h3 { color: var(--turquoise); font-size: 1.1rem; }
.reglage { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 1em 0; }
.reglage dt { font: 600 .9rem var(--police-code); color: var(--marine); }
.reglage dd { margin: 0; color: var(--texte-doux); }
@media (max-width: 600px) { .reglage { grid-template-columns: 1fr; } .reglage dd { margin-bottom: 8px; } }

.video {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch;
	background: var(--marine); color: var(--blanc); border-radius: var(--rayon); overflow: hidden; text-decoration: none;
	box-shadow: var(--ombre-forte); transition: transform .2s;
}
.video:hover { color: var(--blanc); transform: translateY(-3px); }
.video-vignette { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--abysse); }
.video-vignette img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.video:hover .video-vignette img { filter: brightness(.85); }
.video-lecture {
	position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
	background: rgba(11, 18, 38, .72); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
	display: grid; place-items: center; transition: transform .2s, background-color .2s;
}
.video-lecture::before { content: ""; border-left: 24px solid var(--blanc); border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 6px; }
.video:hover .video-lecture { transform: scale(1.08); background: var(--turquoise); }
.video-texte { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 32px; }
.video-texte strong { font-family: var(--police-titres); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.25; }
.video-chaine { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-vif); }
.video .fleche { color: rgba(255, 255, 255, .85); font-weight: 650; display: inline-flex; gap: 6px; }
@media (max-width: 760px) { .video { grid-template-columns: 1fr; } .video-texte { padding: 20px 22px 24px; } }

/* ---- Pied de page ---- */
.pied { background: var(--abysse); color: rgba(255, 255, 255, .7); padding: 56px 0 24px; font-size: .95rem; }
.pied a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.pied a:hover { color: var(--turquoise-vif); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pied-logo { width: 88px; margin-bottom: 14px; background: var(--blanc); border-radius: 12px; padding: 6px 8px; }
.pied-liens { list-style: none; padding: 0; margin: 0; }
.pied-liens li { margin-bottom: .5em; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 20px; font-size: .82rem; color: rgba(255, 255, 255, .5); }
.pied-bas p { margin: 0 0 .4em; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-grille > div:first-child { grid-column: 1 / -1; } }

/* ---- Page introuvable ---- */
.introuvable { padding: 72px 0; }
.section--sombre .illustration figcaption { color: rgba(255, 255, 255, .7); }
.section--sombre .case h3 { margin-top: 0; }