/* Qonnect — feuille de style principale */

/* Variables  */
:root {
	color-scheme: light only;

	--encre: #15161A;
	--blanc: #FFFFFF;
	--voile: #F7F8FA;
	--nuit: #1E3A6E;
	--nuit-vif: #2B54A0;
	--nuit-voile: #EEF2F9;
	--gris: #71737C;
	--trait: #E7E9EE;

	--display: 'Archivo', system-ui, sans-serif;
	--body: 'Instrument Sans', system-ui, sans-serif;
	--grave: system-ui, -apple-system, sans-serif;

	--gut: clamp(20px, 5vw, 48px);
	--sect: clamp(86px, 12vw, 152px);
}

/* Réinitialisation */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	background: var(--blanc);
}

body {
	font-family: var(--body);
	color: var(--encre);
	background: var(--blanc);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

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

body.locked {
	overflow: hidden;
}

/* Retour tactile : on neutralise le voile gris natif sur mobile. */
* {
	-webkit-tap-highlight-color: transparent;
}

/* Conteneurs */
.shell {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--gut);
}

.shell-wide {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--gut);
}

.read {
	max-width: 34rem;
	margin-inline: auto;
	padding-inline: var(--gut);
	text-align: center;
}

/* Accessibilité */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--blanc);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	clip-path: none;
}

/* Animations d'apparition */
.rise {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity .9s cubic-bezier(.2, .6, .3, 1),
		transform .9s cubic-bezier(.2, .6, .3, 1);
}

.rise.seen {
	opacity: 1;
	transform: none;
}

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }

/* En-tête*/
.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--trait);
}

.nav-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 58px;
}

.brand {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--display);
	font-weight: 700;
	font-size: 18.5px;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.brand-nom {
	transition: opacity .2s;
}

.brand-nom span {
	color: var(--nuit-vif);
}

.brand:hover .brand-nom {
	opacity: .68;
}

.brand:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 4px;
	border-radius: 5px;
}

.brand-slogan {
	max-width: 0;
	overflow: hidden;
	font-family: var(--body);
	font-weight: 500;
	font-size: 11.5px;
	font-style: italic;
	letter-spacing: 0;
	color: var(--gris);
	opacity: 0;
	transition:
		max-width .34s cubic-bezier(.2, .7, .3, 1),
		padding-left .34s cubic-bezier(.2, .7, .3, 1),
		opacity .28s ease;
}


.brand:hover .brand-slogan,
.brand:focus-visible .brand-slogan {
	max-width: 26ch;
	padding-left: 12px;
	opacity: 1;
}

@media (max-width: 700px) {
	.brand-slogan {
		display: none;
	}
}

.brand span {
	color: var(--nuit-vif);
}

.brand:hover {
	opacity: .68;
}

.brand:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 4px;
	border-radius: 5px;
}

.nav-act {
	display: flex;
	align-items: center;
	gap: 4px;
}

.iconbtn {
	position: relative;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	transition: background .18s;
}

.iconbtn:hover {
	background: var(--voile);
}

.iconbtn:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 2px;
}

.iconbtn svg {
	width: 18px;
	height: 18px;
	stroke: var(--encre);
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.count-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	color: var(--blanc);
	background: var(--nuit-vif);
	border-radius: 8px;
}

.secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--gris);
}

.secure svg {
	width: 16px;
	height: 16px;
	stroke: var(--gris);
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Fil d'Ariane */
.crumb {
	padding-top: 22px;
	font-size: 12.5px;
	color: var(--gris);
}

.crumb a:hover {
	color: var(--encre);
}

.crumb i {
	font-style: normal;
	margin-inline: 7px;
	color: #C3C6CD;
}

/* Menu plein écran */
.menu {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s;
}

/* Verre dépoli, uniquement si le flou est pris en charge. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.menu {
		background: linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(246, 247, 250, .70) 100%);
		-webkit-backdrop-filter: saturate(180%) blur(30px);
		backdrop-filter: saturate(180%) blur(30px);
	}
}

.menu.on {
	opacity: 1;
	visibility: visible;
}

.menu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1140px;
	height: 58px;
	margin-inline: auto;
	padding-inline: var(--gut);
	border-bottom: 1px solid rgba(21, 22, 26, .07);
}

.menu-body {
	flex: 1;
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	overflow-y: auto;
	padding-inline: var(--gut);
	padding-block: clamp(30px, 6vw, 64px);
}

.menu nav {
	display: grid;
	gap: clamp(4px, 1vw, 10px);
}

.m-link,
.m-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding-block: 6px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(27px, 5.4vw, 46px);
	line-height: 1.16;
	letter-spacing: -.032em;
	text-align: left;
	transition: color .2s;
}

.m-link:hover,
.m-toggle:hover,
.m-group.open > .m-toggle {
	color: var(--nuit-vif);
}

.m-toggle .chev {
	flex: 0 0 auto;
	width: clamp(16px, 3vw, 24px);
	height: clamp(16px, 3vw, 24px);
	transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}

.m-toggle .chev svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 2.2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.m-group.open .chev {
	transform: rotate(180deg);
}

/* La transition sur grid-template-rows évite de figer une hauteur en dur. */
.m-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .38s cubic-bezier(.2, .7, .3, 1);
}

.m-group.open .m-sub {
	grid-template-rows: 1fr;
}

.m-sub > div {
	overflow: hidden;
}

.m-sub ul {
	list-style: none;
	display: grid;
	gap: 2px;
	padding: 8px 0 12px 2px;
}

.m-sub a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 5px;
	font-size: clamp(15px, 2.4vw, 18px);
	font-weight: 500;
	color: var(--gris);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity .34s ease,
		transform .34s cubic-bezier(.2, .7, .3, 1),
		color .2s;
}

.m-group.open .m-sub a {
	opacity: 1;
	transform: none;
}

.m-group.open .m-sub li:nth-child(1) a { transition-delay: .08s; }
.m-group.open .m-sub li:nth-child(2) a { transition-delay: .15s; }
.m-group.open .m-sub li:nth-child(3) a { transition-delay: .22s; }

.m-sub a::before {
	content: "";
	width: 16px;
	height: 1px;
	background: #C9CDD6;
	transition: width .2s, background .2s;
}

.m-sub a:hover {
	color: var(--encre);
}

.m-sub a:hover::before {
	width: 26px;
	background: var(--nuit-vif);
}

.menu-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--gut);
	padding-block: 18px;
	font-size: 12.5px;
	color: var(--gris);
	border-top: 1px solid rgba(21, 22, 26, .07);
}

.menu-foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.menu-foot a:hover {
	color: var(--encre);
}

/* Boutons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	font-family: var(--body);
	font-weight: 600;
	font-size: 14px;
	color: var(--blanc);
	background: var(--encre);
	border-radius: 999px;
	transition:
		background .28s cubic-bezier(.4, 0, .2, 1),
		color .28s cubic-bezier(.4, 0, .2, 1),
		box-shadow .28s cubic-bezier(.4, 0, .2, 1),
		transform .2s;
}

.btn:hover {
	background: var(--nuit);
}

.btn:active {
	transform: translateY(1px);
}

.btn:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}

.btn svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s;
}

.btn:hover svg {
	transform: translateX(3px);
}

.btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.btn-ghost {
	color: var(--encre);
	background: transparent;
	box-shadow: inset 0 0 0 1.4px var(--trait);
}

.btn-ghost:hover {
	color: var(--blanc);
	background: var(--encre);
	box-shadow: inset 0 0 0 1.4px var(--encre);
}

.btn:has(svg):hover {
	background: var(--encre);
}

/* Le bouton fantome fleche garde aussi son apparence au repos. */
.btn-ghost:has(svg):hover {
	color: var(--encre);
	background: transparent;
	box-shadow: inset 0 0 0 1.4px var(--trait);
}

/* Plaques Qonnect */

/* container-type pour le texte gravé reste proportionnel */
.plate,
.cplate {
	container-type: inline-size;
	position: relative;
	display: flex;
	align-items: center;
	gap: 5%;
	padding: 5%;
	aspect-ratio: 225 / 100;
	border-radius: 4.44% / 10%;
	overflow: hidden;
	text-align: left;
}

.plate {
	color: #FCFCFD;
	background: linear-gradient(158deg, #2A2C33 0%, #191B21 46%, #101218 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .36) inset,
		0 -1px 0 rgba(0, 0, 0, .24) inset,
		0 20px 40px -20px rgba(21, 22, 26, .4);
}

.plate::after,
.cplate::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(112deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .07) 26%, transparent 52%);
	pointer-events: none;
}

/* Reflet balayant, joué une fois au chargement. */
.sweep {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
	transform: translateX(-120%);
	animation: sweep 2s cubic-bezier(.22, .61, .36, 1) .7s 1 forwards;
}

@keyframes sweep {
	to { transform: translateX(120%); }
}

.plate-txt,
.cp-txt {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .34em;
	overflow: hidden;
	text-align: center;
}

.plate-name,
.plate-role,
.cp-name,
.cp-role {
	width: 100%;
	font-family: var(--grave);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.028em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.plate-name,
.plate-role {
	font-size: 6.5cqw;
}

.cp-name,
.cp-role {
	font-size: 5.6cqw;
}

/* order:-1 place le code à gauche du texte */
.plate-code {
	order: -1;
	flex: 0 0 auto;
	width: 40%;
	aspect-ratio: 1;
	align-self: center;
}

.cp-code {
	flex: 0 0 auto;
	width: 40%;
	margin-left: auto;
	aspect-ratio: 1;
	align-self: center;
}

.plate-code svg,
.cp-code svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.cp-wave,
.plate-wave {
	flex: 0 0 auto;
	align-self: center;
	width: 20%;
	aspect-ratio: 1;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: url("../img/nfc-logo.png") center / contain no-repeat;
	mask: url("../img/nfc-logo.png") center / contain no-repeat;
}

.cplate {
	width: 100%;
	max-width: 400px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .36) inset,
		0 -1px 0 rgba(0, 0, 0, .24) inset,
		0 18px 34px -18px rgba(0, 0, 0, .5);
}

.cplate.ecru {
	color: var(--encre);
	background: linear-gradient(158deg, #F4EEE1 0%, #EBE3D2 52%, #DFD5C0 100%);
}

.cplate.blanc {
	color: #A8822A;
	background: linear-gradient(158deg, #FFF 0%, #F2F2F4 50%, #E4E5E9 100%);
}


.hero {
	padding-block: clamp(52px, 8vw, 96px) clamp(80px, 10vw, 120px);
	text-align: center;
	background: linear-gradient(180deg, #FFF 0%, #FFF 58%, var(--voile) 100%);
}


.hero .rise { transition-delay: 1.2s; }
.hero .rise.d1 { transition-delay: 1.32s; }
.hero .rise.d2 { transition-delay: 1.44s; }
.hero .rise.d3 { transition-delay: 1.56s; }

.h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(38px, 7.2vw, 72px);
	line-height: 1.03;
	letter-spacing: -.035em;
}

.hero-sub {
	max-width: 31ch;
	margin-top: 16px;
	margin-inline: auto;
	font-size: clamp(16px, 2.05vw, 19.5px);
	color: var(--gris);
}

.stage {
	max-width: 500px;
	margin: clamp(38px, 5.5vw, 58px) auto clamp(30px, 4vw, 42px);
}


.pont {
	padding-block: var(--sect);
	text-align: center;
	background: linear-gradient(180deg, var(--voile) 0%, var(--voile) 62%, #FFF 100%);
}

.pont h2 {
	max-width: 19ch;
	margin-inline: auto;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(25px, 4.2vw, 43px);
	line-height: 1.15;
	letter-spacing: -.028em;
}

.pont p {
	margin-top: 18px;
	font-size: clamp(16px, 2.05vw, 19.5px);
	font-weight: 600;
	color: var(--nuit-vif);
}

/* Accueil — choix des technologies */
.choix {
	padding-block: 0 var(--sect);
	background: var(--blanc);
}

.eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-align: center;
	color: var(--nuit-vif);
}

.choix h2 {
	max-width: 20ch;
	margin-top: 14px;
	margin-inline: auto;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(25px, 4.2vw, 43px);
	line-height: 1.15;
	letter-spacing: -.028em;
	text-align: center;
}

.choix .lede {
	max-width: 44ch;
	margin-top: 14px;
	margin-inline: auto;
	font-size: clamp(15px, 1.85vw, 16.5px);
	color: var(--gris);
	text-align: center;
}

/* Le conteneur porte les flèches de part et d'autre du rail. */
.rail-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: clamp(34px, 4.6vw, 52px);
}

/* Carrousel horizontal avec accroche magnétique. */
.rail {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 20px;
	padding-bottom: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rail::-webkit-scrollbar {
	display: none;
}


.card {
	flex: 0 0 min(84%, 740px);
	scroll-snap-align: center;
	padding: clamp(22px, 3.4vw, 40px);
	background: var(--voile);
	border: 1px solid var(--trait);
	border-radius: 18px;
}

.card h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.4vw, 25px);
	letter-spacing: -.02em;
}

.shot {
	display: grid;
	place-items: center;
	margin-top: 20px;
	padding: clamp(16px, 3vw, 28px);
	aspect-ratio: 16 / 9;
	background: radial-gradient(120% 90% at 50% 18%, #FFF 0%, #F1F2F5 62%, #E8EAEF 100%);
	border: 1px solid var(--trait);
	border-radius: 12px;
}

.card-act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	margin-top: 22px;
}

.dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 24px;
}


.dot {
	position: relative;
	width: 24px;
	height: 24px;
	background: none;
	border-radius: 50%;
}

.dot::after {
	content: "";
	position: absolute;
	inset: 9px;
	background: #D3D6DD;
	border-radius: 50%;
	transition: background .25s;
}

.dot.on::after {
	background: var(--nuit-vif);
}

.dot:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 1px;
}

/*Accueil — arguments */
.args {
	padding-block: var(--sect);
	background: linear-gradient(180deg, #FFF 0%, var(--nuit-voile) 38%, var(--nuit-voile) 62%, #FFF 100%);
}

.args ul {
	list-style: none;
	display: grid;
	gap: clamp(32px, 4vw, 40px);
	max-width: 960px;
	margin-inline: auto;
}

.args li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.args .ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	background: var(--blanc);
	border-radius: 14px;
	box-shadow:
		0 1px 3px rgba(30, 58, 110, .1),
		inset 0 0 0 1px rgba(30, 58, 110, .09);
}

.args .ico svg {
	width: 20px;
	height: 20px;
	stroke: var(--nuit-vif);
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.args h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.012em;
}

.args p {
	max-width: 30ch;
	margin-top: 6px;
	font-size: 14.5px;
	color: var(--gris);
}

@media (min-width: 860px) {
	.args ul {
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
	}
}


.news {
	padding-block: 0 var(--sect);
	text-align: center;
	background: var(--blanc);
}

.news h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(24px, 3.8vw, 38px);
	letter-spacing: -.028em;
}

.news p {
	margin-top: 12px;
	font-size: 15px;
	color: var(--gris);
}

.news-note {
	margin-top: 12px;
	font-size: 13px;
	font-style: italic;
}

.form {
	display: flex;
	gap: 8px;
	max-width: 376px;
	margin-top: 26px;
	margin-inline: auto;
}

.form input {
	flex: 1;
	min-width: 0;
	padding: 10px 15px;
	font: inherit;
	font-size: 14px;
	color: var(--encre);
	background: var(--blanc);
	border: 1.4px solid var(--trait);
	border-radius: 999px;
	transition: border-color .2s;
}

.form input::placeholder {
	color: #A9ACB5;
}

.form input:focus {
	outline: none;
	border-color: var(--nuit-vif);
}

.form input[disabled] {
	background: var(--voile);
	cursor: not-allowed;
}

.form .btn {
	padding: 10px 20px;
	font-size: 13.5px;
}


.foot {
	padding-block: 38px;
	font-size: 13px;
	color: var(--gris);
	background: var(--blanc);
	border-top: 1px solid var(--trait);
}

.foot-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.foot-in nav {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.foot-in a:hover {
	color: var(--encre);
}

.foot-marque {
	display: grid;
	gap: 2px;
}

/* Reprend le traitement du slogan de l'en-tete : italique, discret. */
.foot-slogan {
	font-size: 12px;
	font-style: italic;
	color: #A9ACB5;
}

.foot-min {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	text-align: center;
}

.foot-min nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.top {
	padding-block: clamp(34px, 5vw, 58px) clamp(24px, 3.4vw, 36px);
	border-bottom: 1px solid var(--trait);
}

.top h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(29px, 4.8vw, 48px);
	line-height: 1.05;
	letter-spacing: -.036em;
}

.top .maj {
	margin-top: 10px;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: #A9ACB5;
}

.layout {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	padding-block: clamp(34px, 5vw, 56px) clamp(70px, 10vw, 120px);
}

.toc-wrap {
	min-width: 0;
}

/* Le sommaire suit le défilement ; l'offset compense la hauteur de
   l'en-tête collant. */
.toc {
	position: sticky;
	top: 76px;
}

.toc p {
	margin-bottom: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gris);
}

.toc ol {
	list-style: none;
	display: grid;
	gap: 2px;
}

.toc a {
	display: block;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--gris);
	border-left: 2px solid transparent;
	border-radius: 8px;
	transition: color .2s, background .2s, border-color .2s;
}

.toc a:hover {
	color: var(--encre);
	background: var(--voile);
}

.toc a.on {
	font-weight: 600;
	color: var(--nuit-vif);
	background: var(--nuit-voile);
	border-left-color: var(--nuit-vif);
}

.doc {
	min-width: 0;
	max-width: 44rem;
}

/* Décale l'ancre pour que le titre ne passe pas sous l'en-tête collant
   quand on clique dans le sommaire. */
.doc h2 {
	scroll-margin-top: 88px;
	margin-top: clamp(34px, 4.6vw, 52px);
	margin-bottom: 16px;
	padding-bottom: 10px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(17px, 2.2vw, 21px);
	letter-spacing: -.018em;
	border-bottom: 1px solid var(--trait);
}

.doc h2:first-child {
	margin-top: 0;
}

.doc h3 {
	margin: 18px 0 6px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 14.5px;
}

.doc p {
	margin-bottom: 12px;
	font-size: 15px;
	color: #3E4046;
}

.doc ul,
.doc ol {
	margin: 0 0 12px 20px;
	font-size: 15px;
	color: #3E4046;
}

.doc li {
	margin-bottom: 5px;
}

.doc table {
	width: 100%;
	margin-bottom: 12px;
	font-size: 14.5px;
	border-collapse: collapse;
}

.doc table tr {
	border-bottom: 1px solid var(--trait);
}

.doc table tr:last-child {
	border: none;
}

.doc table th {
	width: 44%;
	padding: 9px 14px 9px 0;
	font-weight: 500;
	text-align: left;
	vertical-align: top;
	color: var(--gris);
}

.doc table td {
	padding: 9px 0;
	vertical-align: top;
}


.ph {
	display: inline-block;
	padding: 1px 8px;
	font-size: 13px;
	font-weight: 600;
	color: #8A6100;
	background: #FDF6E6;
	border: 1px dashed #E3D3A8;
	border-radius: 5px;
}

.todo {
	margin-top: 10px;
	padding: 13px 15px;
	font-size: 13px;
	line-height: 1.55;
	color: #6B5A2E;
	background: #FDFAF2;
	border: 1px solid #E6DCC4;
	border-radius: 11px;
}

.todo strong {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.avis {
	margin-bottom: clamp(26px, 3.4vw, 36px);
	padding: 15px 17px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--nuit);
	background: var(--nuit-voile);
	border: 1px solid var(--trait);
	border-radius: 12px;
}

.avis strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--display);
	font-size: 13px;
}

@media (max-width: 860px) {
	.layout {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.toc {
		position: static;
		padding: 14px;
		border: 1px solid var(--trait);
		border-radius: 12px;
	}

	.doc {
		max-width: none;
	}
}

/* Pages récit: gabarit des pages éditoriales à lecture centrée  */
.recit {
	padding-bottom: 0;
}

.recit .open {
	padding-block: clamp(44px, 7vw, 84px) clamp(30px, 4vw, 44px);
}

.recit .open h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(32px, 5.4vw, 56px);
	line-height: 1.04;
	letter-spacing: -.038em;
}

.recit .lead {
	margin-top: 18px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.6vw, 27px);
	line-height: 1.32;
	letter-spacing: -.022em;
}

.recit .sub {
	margin-top: 18px;
	font-size: clamp(16.5px, 2vw, 19px);
	line-height: 1.62;
	color: var(--gris);
}

/* Corps du récit : interlignage large, la lecture prime sur la densité. */
.recit .story p,
.recit .how p {
	margin-bottom: 26px;
	font-size: clamp(16.5px, 1.95vw, 18px);
	line-height: 1.82;
	color: #2E3036;
}

.recit .story p:last-child,
.recit .how p:last-child {
	margin-bottom: 0;
}

/* Phrase de bascule : rupture de rythme au milieu du récit. */
.recit .pivot {
	margin-block: clamp(34px, 5vw, 48px) !important;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.5vw, 25px) !important;
	line-height: 1.42 !important;
	letter-spacing: -.02em;
	color: var(--encre) !important;
}

.recit .birth {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 21px);
	line-height: 1.5;
	letter-spacing: -.018em;
	color: var(--encre);
}

/* Filet de séparation entre les mouvements du texte. */
.recit .rule {
	width: min(100%, 17rem);
	height: 1px;
	margin: clamp(40px, 6vw, 64px) auto;
	background: var(--trait);
	border: 0;
}

/* Mise en évidence à l'intérieur du texte. */
.recit .hl {
	font-weight: 600;
	color: var(--nuit-vif);
}

/* Clôture : appel à l'action sur fond dégradé. */
.end {
	padding-block: clamp(54px, 8vw, 96px) clamp(80px, 11vw, 132px);
	text-align: center;
	background: linear-gradient(180deg, #FFF 0%, var(--nuit-voile) 100%);
}

.end .btn {
	padding: 13px 30px;
}

/* FAQ quater. Questions fréquentes */
.top--faq {
	text-align: center;
	border-bottom: 0;
}

.top--faq p {
	margin-top: 13px;
	font-size: clamp(15px, 1.9vw, 17px);
	color: var(--gris);
}

/* Barre de catégories, collante sous l'en-tête principal. */
.chips {
	position: sticky;
	top: 58px;
	z-index: 55;
	padding-block: 12px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--trait);
}

.chips-in {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
}

.chip {
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--gris);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.3px var(--trait);
	transition: color .2s, box-shadow .2s, background .2s;
}

.chip:hover {
	color: var(--encre);
	box-shadow: inset 0 0 0 1.3px #C9CDD6;
}

.chip.on {
	color: var(--blanc);
	background: var(--encre);
	box-shadow: inset 0 0 0 1.3px var(--encre);
}

.chip:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}

.faq {
	padding-block: clamp(34px, 5vw, 58px) var(--sect);
}

/* Décalage d'ancre : l'en-tête et la barre de puces se cumulent. */
.cat {
	scroll-margin-top: 118px;
}

.cat + .cat {
	margin-top: clamp(40px, 5.5vw, 64px);
}

.cat-title {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--nuit-vif);
}

.qa {
	border-bottom: 1px solid var(--trait);
}

.qa-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 19px 2px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.35;
	letter-spacing: -.012em;
	text-align: left;
	transition: color .18s;
}

.qa-head:hover {
	color: var(--nuit-vif);
}

.qa-head:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Signe plus qui devient moins : la barre verticale pivote et s'efface. */
.sign {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.sign::before,
.sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--nuit-vif);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .28s;
}

.sign::before {
	width: 12px;
	height: 1.6px;
}

.sign::after {
	width: 1.6px;
	height: 12px;
}

.qa.open .sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.qa-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .38s cubic-bezier(.2, .7, .3, 1);
}

.qa.open .qa-body {
	grid-template-rows: 1fr;
}

.qa-body > div {
	overflow: hidden;
}

.qa-body p {
	padding: 0 44px 22px 2px;
	font-size: 15px;
	line-height: 1.68;
	color: var(--gris);
}

/* Bloc de clôture. */
.contact {
	padding-block: clamp(52px, 7vw, 84px);
	text-align: center;
	background: linear-gradient(180deg, #FFF 0%, var(--nuit-voile) 100%);
}

.contact h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(22px, 3.2vw, 32px);
	letter-spacing: -.026em;
}

.contact p {
	margin-top: 11px;
	font-size: 15px;
	color: var(--gris);
}

.contact .btn {
	margin-top: 22px;
}

/* partie Boutique */

.pick {
	padding-block: clamp(30px, 4vw, 44px) var(--sect);
	background: linear-gradient(180deg, var(--voile) 0%, var(--voile) 74%, #FFF 100%);
}

.toggle {
	display: flex;
	gap: 7px;
	justify-content: center;
	flex-wrap: nowrap;
	padding-bottom: 12px;
}

.tbtn {
	position: relative;
	padding: 6px 14px;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--trait);
	font-family: var(--body);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .01em;
	color: var(--encre);
	transition: background .22s, color .22s, box-shadow .22s;
}

.tbtn:hover {
	box-shadow: inset 0 0 0 1.5px #C9CDD6;
}

.tbtn.on {
	background: var(--encre);
	color: #FFF;
	box-shadow: inset 0 0 0 1.5px var(--encre);
}

.tbtn:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}

.panels {
	display: grid;
	margin-top: clamp(28px, 4vw, 44px);
}

.panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity .48s cubic-bezier(.2, .6, .3, 1),
		transform .48s cubic-bezier(.2, .6, .3, 1),
		visibility .48s;
}

.panel.on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.panel-in {
	padding: clamp(26px, 4vw, 52px);
	border: 1px solid var(--trait);
	border-radius: 20px;
	background: #FFF;
	text-align: center;
	box-shadow:
		0 1px 2px rgba(21, 22, 26, .03),
		0 14px 34px -22px rgba(21, 22, 26, .16);
}

.panel-txt {
	max-width: 52ch;
	margin: clamp(26px, 3.4vw, 38px) auto 0;
	color: var(--gris);
	font-size: clamp(15px, 1.9vw, 16.5px);
}

.panel-in .btn {
	margin-top: 24px;
	padding: 9px 18px;
	gap: 7px;
	font-size: 13px;
}

.panel-in .btn svg {
	width: 12px;
	height: 12px;
}


.top--boutique {
	padding-block: clamp(40px, 6vw, 72px) clamp(30px, 4vw, 44px);
	border-bottom: 0;
	text-align: center;
	background: linear-gradient(180deg, #FFF 0%, #FFF 72%, var(--voile) 100%);
}

.top--boutique h1 {
	font-size: clamp(36px, 6.6vw, 66px);
	line-height: 1.02;
	letter-spacing: -.038em;
}

.top--boutique p {
	max-width: 38ch;
	margin: 16px auto 0;
	color: var(--gris);
	font-size: clamp(15.5px, 2vw, 19px);
}

.plate.nfc {
	justify-content: flex-start;
}

.plate.nfc {
	justify-content: flex-start;
}

/* Boutique — comment ca marche */

.how {
	padding-block: 0 var(--sect);
	background: #FFF;
}

.how h2 {
	margin-top: 14px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(25px, 4.2vw, 43px);
	line-height: 1.15;
	letter-spacing: -.028em;
	text-align: center;
}

.how .eyebrow {
	text-align: center;
}

.how .rail {
	margin-top: clamp(30px, 4vw, 44px);
}

.step {
	flex: 0 0 min(84%, 740px);
	scroll-snap-align: center;
	padding: clamp(24px, 3.6vw, 44px);
	border: 1px solid var(--trait);
	border-radius: 18px;
	background: var(--voile);
	text-align: center;
}

.num {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	border-radius: 999px;
	background: #FFF;
	box-shadow: inset 0 0 0 1px rgba(30, 58, 110, .16);
	font-family: var(--display);
	font-weight: 700;
	font-size: 17px;
	color: var(--nuit-vif);
}

.step h3 {
	margin-top: 26px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.4vw, 25px);
	letter-spacing: -.02em;
}

.step p {
	margin-top: 6px;
	color: var(--gris);
	font-size: 15px;
}

/* Encart d'explication du geste NFC, en remplacement de l'invitation au scan. */
.scan-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--nuit-voile);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--nuit);
}

.scan-tip svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	stroke: var(--nuit-vif);
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* partie WooCommerce */


/*  Conteneurs */

.wc-zone {
	padding-top: 20px;
	padding-bottom: clamp(60px, 8vw, 100px);
}


.woocommerce-cart #contenu,
.woocommerce-checkout #contenu {
	max-width: 1060px;
	margin-inline: auto;
	padding-inline: var(--gut);
	padding-top: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(60px, 8vw, 100px);
}

/* Titres */

.woocommerce-page :where(.product_title, .entry-title, #contenu h1) {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.034em;
	color: var(--encre);
	margin: 0 0 clamp(22px, 3vw, 32px);
}

.woocommerce-page :where(#contenu) :where(h2, h3) {
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.014em;
	color: var(--encre);
	margin: 0 0 14px;
}

/* Boutons */

.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt,
.woocommerce-page #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--encre);
	color: #FFF;
	font-family: var(--body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transition: background 0.2s, transform 0.2s, opacity 0.2s;
}

.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce-page #place_order:hover {
	background: var(--nuit);
	color: #FFF;
}

.woocommerce-page a.button:active,
.woocommerce-page button.button:active,
.woocommerce-page input.button:active {
	transform: translateY(1px);
}

.woocommerce-page a.button:focus-visible,
.woocommerce-page button.button:focus-visible,
.woocommerce-page input.button:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}

.woocommerce-page .button:disabled,
.woocommerce-page .button[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

/* Actions secondaires : retour boutique, mise a jour du panier. */
.woocommerce-page a.button.wc-backward,
.woocommerce-page .cart .button[name="update_cart"] {
	background: transparent;
	border: 1.4px solid var(--trait);
	color: var(--encre);
}

.woocommerce-page a.button.wc-backward:hover,
.woocommerce-page .cart .button[name="update_cart"]:hover {
	background: var(--voile);
	color: var(--encre);
}

/* Plaque personnalisee en vignette de panier. */

.cart-plate {
	width: 160px;
	max-width: 100%;
}

.cart-plate .plate {
	width: 100%;
}

/* La gravure doree de la gamme Pro, comme sur la fiche produit. */
.cart-plate.pro .plate.noir { color: #E3C878; }
.cart-plate.pro .plate.blanc { color: #A8822A; }
.cart-plate.pro .plate.noir-argent { color: #C7CCD6; }


.cart-plate .plate-code canvas {
	display: none;
}

.woocommerce-page table.shop_table .product-thumbnail .cart-plate img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
}

/*Messages  */

.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-page .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--trait);
	border-left-width: 3px;
	border-radius: 14px;
	background: var(--voile);
	font-family: var(--body);
	font-size: 13.5px;
	color: var(--encre);
	list-style: none;
}

.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before,
.woocommerce-page .wc-block-components-notice-banner > svg {
	content: none;
	display: none;
}

.woocommerce-page .woocommerce-message,
.woocommerce-page .wc-block-components-notice-banner.is-success {
	border-left-color: var(--nuit-vif);
}

.woocommerce-page .woocommerce-info,
.woocommerce-page .wc-block-components-notice-banner.is-info {
	border-left-color: var(--gris);
}

.woocommerce-page .woocommerce-error,
.woocommerce-page .wc-block-components-notice-banner.is-error {
	border-left-color: var(--alerte);
	background: #FDF4F3;
}

/* Prix */

.woocommerce-page .price,
.woocommerce-page .amount {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--encre);
}

.woocommerce-page .summary > .price {
	display: block;
	font-size: clamp(20px, 2.4vw, 26px);
	margin: 12px 0 18px;
}

/* Champs */

.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page textarea,
.woocommerce-page select,
.woocommerce-page .select2-container .select2-selection--single {
	width: 100%;
	padding: 10px 13px;
	border: 1.4px solid var(--trait);
	border-radius: 9px;
	background: #FFF;
	font-family: var(--body);
	font-size: 14px;
	color: var(--encre);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.woocommerce-page input::placeholder,
.woocommerce-page textarea::placeholder {
	color: #B4B7BF;
}

.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus {
	outline: none;
	border-color: var(--nuit-vif);
	box-shadow: 0 0 0 3px rgba(43, 84, 160, 0.1);
}

.woocommerce-page .form-row label,
.woocommerce-page .woocommerce-billing-fields label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--encre);
}

.woocommerce-page .required {
	color: var(--alerte);
	text-decoration: none;
}

.woocommerce-page .form-row {
	margin-bottom: 12px;
	padding: 0;
}

.woocommerce-page .quantity input.qty {
	width: 74px;
	text-align: center;
}

/* Fiche produit  */

/*
 * La galerie etant retiree, .summary flotte a 48 % dans la feuille du plugin
 * et laisserait la moitie droite vide. On annule le flottement.
 */
.woocommerce-page div.product .summary {
	float: none;
	width: 100%;
	max-width: 680px;
	margin: 0;
}

.woocommerce-page div.product .woocommerce-product-details__short-description {
	color: var(--gris);
	font-size: 14.5px;
	margin-bottom: 20px;
}

.woocommerce-page div.product form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 0;
}

.woocommerce-page div.product .woocommerce-tabs {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--trait);
}

.woocommerce-page div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-page div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.014em;
	color: var(--encre);
}

/* Panier */

/* Agrandissement de la plaque depuis le panier */

.plate-zoom {
	position: fixed;
	z-index: 100;
	width: min(620px, 92vw);
	max-width: none;
	padding: clamp(24px, 4vw, 36px);
	border: 1px solid var(--trait);
	border-radius: 20px;
	background: var(--blanc);
}

/*
 * Le reset global met margin: 0 sur tous les elements, ce qui ecrase le
 * margin: auto que le navigateur applique au dialog ouvert. Sans cette
 * regle la boite se colle en haut a gauche de l'ecran.
 */
.plate-zoom[open] {
	margin: auto;
}

.plate-zoom:not([open]) {
	display: none;
}

.plate-zoom::backdrop {
	background: rgba(21, 22, 26, .55);
}

/* Le contenu est injecte au clic : sans hauteur minimale, la boite n'aurait
   aucune dimension au premier rendu. */
.plate-zoom__in {
	min-height: 0;
}

.plate-zoom__in .plate {
	width: 100%;
}

.plate-zoom__in .plate-txt {
	flex: 1 1 55%;
}

/*
 * La regle qui dimensionne le code QR est ancree sur le tableau du panier.
 * La copie vivant en pied de page, elle ne s'y applique plus : l'image
 * reprendrait sa taille intrinseque de 512 px.
 */
.plate-zoom__in .plate-code img {
	display: block;
	width: 100%;
	height: auto;
}

.plate-zoom__in .plate-code canvas {
	display: none;
}

.plate-zoom__close {
	display: block;
	margin: 22px auto 0;
	padding: 10px 24px;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--encre);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.4px var(--trait);
	transition: background .2s;
}

.plate-zoom__close:hover {
	background: var(--voile);
}


@media (min-width: 821px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 62fr) minmax(0, 34fr);
		gap: clamp(20px, 3vw, 40px);
		align-items: stretch;
	}

	.woocommerce-cart .woocommerce::before,
	.woocommerce-cart .woocommerce::after {
		content: none;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		float: none;
		width: auto;
		min-width: 0;
		margin-bottom: 0;
	}

	.woocommerce-cart .cart-collaterals {
		float: none;
		width: auto;
		min-width: 0;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		float: none;
		width: 100%;
	}
}

.woocommerce-page table.shop_table {
	border: 1px solid var(--trait);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--body);
	font-size: 14px;
	background: #FFF;
}

.woocommerce-page table.shop_table th {
	font-family: var(--display);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--gris);
	letter-spacing: 0.02em;
}

.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
	padding: 16px;
	border-color: var(--trait);
}

.woocommerce-page table.shop_table .product-name a {
	font-family: var(--display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.018em;
	color: var(--encre);
}

.woocommerce-page table.shop_table .product-thumbnail img {
	width: 68px;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--trait);
}

/* Metadonnees du formulaire custom, affichees sous le nom du produit. */
.woocommerce-page table.shop_table .variation,
.woocommerce-page .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--gris);
}

.woocommerce-cart .cart_totals {
	padding: clamp(18px, 2.4vw, 24px);
	border: 1px solid var(--trait);
	border-radius: 16px;
	background: var(--voile);
	position: sticky;
	top: 74px;
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 7px 0;
	border: 0;
}

.woocommerce-cart .cart_totals .order-total .amount {
	font-size: 22px;
	font-weight: 700;
}

.woocommerce-cart .cart_totals .checkout-button {
	width: 100%;
	margin-top: 18px;
}

.woocommerce-page .cross-sells,
.woocommerce-page .coupon,
.woocommerce-page .shipping-calculator-button {
	display: none;
}

/* Commande  */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	padding: clamp(18px, 2.4vw, 24px);
	border: 1px solid var(--trait);
	border-radius: 16px;
	background: #FFF;
	margin-bottom: 14px;
}

.woocommerce-checkout #payment {
	border: 1px solid var(--trait);
	border-radius: 16px;
	background: var(--voile);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--trait);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: 11px;
	background: var(--nuit-voile);
	color: var(--encre);
	font-size: 13px;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--nuit-voile);
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
}

/* Actions du panier : le bouton de mise a jour ne doit pas se casser. */
.woocommerce-cart .cart .actions {
	text-align: right;
}

.woocommerce-cart .cart .actions .button {
	white-space: nowrap;
}

.cart-retour {
	margin: 16px 0 0;
}

.woocommerce-cart td.product-remove a.remove {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	font-size: 18px;
	line-height: 1;
	color: var(--gris);
	background: var(--voile);
	border-radius: 9px;
	box-shadow: inset 0 0 0 1px var(--trait);
	transition: color .18s, background .18s, box-shadow .18s;
}

.woocommerce-cart td.product-remove a.remove:hover {
	color: var(--encre);
	background: var(--blanc);
	box-shadow: inset 0 0 0 1px #C9CDD6;
}

.woocommerce-cart td.product-remove a.remove:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 2px;
}

/* Panier : deux colonnes seulement quand le tableau a la place. En dessous,
   le recapitulatif passe sous la liste plutot que de l'ecraser. */
@media (min-width: 1024px) {

	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		gap: clamp(20px, 3vw, 40px);
		align-items: stretch;
	}

	/*
	 * Le clearfix du plugin n'a plus d'objet sans flottants, et dans une
	 * grille ses pseudo-elements deviendraient des elements a part entiere.
	 */
	.woocommerce-cart .woocommerce::before,
	.woocommerce-cart .woocommerce::after {
		content: none;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		float: none;
		width: auto;
		min-width: 0;
		margin-bottom: 0;
	}

	.woocommerce-cart .cart-collaterals {
		float: none;
		width: auto;
		min-width: 0;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		float: none;
		width: 100%;
	}
}

/* Le tableau du panier est dense : on resserre pour lui laisser de la place. */
.woocommerce-cart table.shop_table td.product-remove {
	width: 1%;
	padding-right: 0;
}

.woocommerce-cart table.shop_table td.product-thumbnail {
	width: 1%;
	padding-left: 10px;
}

.woocommerce-cart table.shop_table .product-name a,
.woocommerce-cart table.shop_table .product-name {
	word-break: normal;
}

/*
 * Mentions legales du tunnel : la maquette leur donne un traitement propre
 * (fond creme, texte brun). C'est le support visuel de la case de
 * retractation, point dur juridique du bloc 4 : elle doit se distinguer du
 * reste du formulaire.
 */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	padding: 14px 16px;
	border: 1px solid #E6DCC4;
	border-radius: 12px;
	background: #FDFAF2;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6B5A2E;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: #6B5A2E;
	text-decoration: underline;
}

/* Pages technologie */

.top--techno {
	padding-block: clamp(34px, 5vw, 58px) clamp(24px, 3.4vw, 36px);
	border-bottom: 0;
	text-align: center;
}

.top--techno p {
	margin-top: 13px;
	color: var(--gris);
	font-size: clamp(15px, 1.9vw, 17px);
}

.range {
	padding-block: clamp(28px, 4vw, 44px) var(--sect);
	background: linear-gradient(180deg, var(--voile) 0%, var(--voile) 76%, #FFF 100%);
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
	align-items: stretch;
}

.pcard {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid var(--trait);
	border-radius: 20px;
	background: #FFF;
	box-shadow:
		0 1px 2px rgba(21, 22, 26, .03),
		0 14px 34px -24px rgba(21, 22, 26, .16);
}

.pname {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(17px, 2.1vw, 22px);
	letter-spacing: -.02em;
}

.price {
	margin-top: 4px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.4vw, 25px);
	letter-spacing: -.02em;
}

.price small {
	display: block;
	margin-top: 2px;
	font-family: var(--body);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0;
	color: #A9ACB5;
}

.frame {
	position: relative;
	display: grid;
	place-items: center;
	margin-top: 20px;
	padding: 10%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--trait);
	border-radius: 13px;
	background: radial-gradient(120% 90% at 50% 16%, #FFF 0%, #F2F3F6 62%, #E9EBF0 100%);
}

.frame .plate {
	width: 100%;
}

.plate.sm {
	width: 88%;
	background: linear-gradient(158deg, #26282E 0%, #1A1C21 52%, #131418 100%);
	color: #FCFCFD;
}

.plate.pro {
	background: linear-gradient(158deg, #EBD79A 0%, #C9A94F 48%, #A98A34 100%);
	color: #241C06;
}

.specs {
	display: grid;
	gap: 9px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
}

.specs li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gris);
}

.specs svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	stroke: var(--nuit-vif);
	stroke-width: 1.9;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pcard .btn {
	margin-block: auto 0;
	margin-inline: auto;
	align-self: center;
}

.pcard .specs {
	margin-bottom: 26px;
}

/* E-book */

.ebook {
	padding-block: 0 var(--sect);
	background: #FFF;
}

.ebook-in {
	padding: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--trait);
	border-radius: 20px;
	background: linear-gradient(180deg, #FFF 0%, var(--nuit-voile) 100%);
}

.ebook h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.5vw, 27px);
	letter-spacing: -.024em;
}

.ebook-row {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 32px);
	margin-top: 22px;
}

.cover {
	flex: 0 0 auto;
	width: clamp(78px, 11vw, 116px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 12px 26px -14px rgba(21, 22, 26, .5);
}

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

.ebook-txt {
	flex: 1;
	color: var(--gris);
	font-size: clamp(14.5px, 1.8vw, 16px);
}

.ebook-act {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-top: 26px;
}

.solo {
	font-size: 13px;
	color: var(--gris);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.solo:hover {
	color: var(--encre);
}

@media (max-width: 760px) {

	.grid {
		grid-template-columns: 1fr;
	}

	.ebook-row {
		flex-direction: column;
		text-align: center;
	}

	.ebook-act {
		justify-content: center;
	}
}

/* Fiche produit */

.head {
	padding-block: clamp(26px, 4vw, 42px) clamp(20px, 3vw, 30px);
}

.head h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.05;
	letter-spacing: -.034em;
}

.head .tag {
	margin-top: 6px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(16px, 2vw, 21px);
	letter-spacing: -.018em;
	color: var(--nuit-vif);
}

.head .price {
	margin-top: 12px;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -.02em;
}

.body {
	padding-bottom: clamp(60px, 8vw, 100px);
}

.split {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 52px);
}

/* Aperçu  */

.preview {
	min-width: 0;
}

.preview-in {
	position: sticky;
	top: 74px;
}

.canvas {
	padding: clamp(22px, 3.4vw, 40px);
	border: 1px solid var(--trait);
	border-radius: 18px;
	background: radial-gradient(120% 92% at 50% 14%, #FFF 0%, #F1F2F5 60%, #E8EAEF 100%);
}

.canvas .plate {
	width: 100%;
	transition: background .3s ease, color .3s ease;
}


.canvas .plate-code {
	order: -1;
	width: 40%;
}

.canvas .plate-txt {
	flex: 1 1 45%;
	text-align: center;
	align-items: center;
}

/* Gravure claire sur la gamme Start, doree sur la gamme Pro. */
.plate.noir,
.plate.noir-argent {
	background: linear-gradient(158deg, #26282E 0%, #1A1C21 52%, #131418 100%);
	color: #FCFCFD;
}

.plate.ecru {
	background: linear-gradient(158deg, #F4EEE1 0%, #EBE3D2 52%, #DFD5C0 100%);
	color: #15161A;
}

.plate.blanc {
	background: linear-gradient(158deg, #FBFBFC 0%, #F2F2F3 52%, #E7E7E9 100%);
	color: #15161A;
}

.plate.or {
	background: linear-gradient(158deg, #EBD79A 0%, #C9A94F 48%, #A98A34 100%);
	color: #241C06;
}

.canvas.pro .plate.noir {
	color: #E3C878;
}

.canvas.pro .plate.blanc {
	color: #A8822A;
}

.canvas.pro .plate.noir-argent {
	color: #C7CCD6;
}

.shotnote {
	margin-top: 14px;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	color: #A9ACB5;
}

.scan-invite {
	max-width: 34ch;
	margin: 6px auto 0;
	font-size: 11px;
	text-align: center;
	color: var(--gris);
}

.stylise {
	margin-top: 5px;
	font-size: 10px;
	text-align: center;
	color: #B4B7BF;
}

/*Options  */

.opt {
	display: grid;
	gap: 8px;
}

.opt-t {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
}

.opts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 18px;
	margin-top: 18px;
}

.swatches {
	display: flex;
	gap: 8px;
}

.sw {
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(21, 22, 26, .12);
	transition: box-shadow .2s, transform .2s;
}

.sw:hover {
	transform: scale(1.08);
}

.sw.on {
	box-shadow:
		0 0 0 1.6px var(--nuit-vif),
		inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.sw:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}


.sw--noir        { background: #1A1C21; }
.sw--ecru        { background: linear-gradient(150deg, #F4EEE1, #E3DAC7); }
.sw--blanc       { background: #F6F6F7; }
.sw--or          { background: linear-gradient(150deg, #EBD79A, #C9A94F); }
.sw--noir-argent { background: linear-gradient(150deg, #26282E 50%, #C7CCD6 50%); }

.pills {
	display: flex;
	gap: 7px;
}

.pill {
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--body);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--gris);
	cursor: pointer;
	box-shadow: inset 0 0 0 1.4px var(--trait);
	transition: color .2s, background .2s, box-shadow .2s;
}

.pill:hover {
	color: var(--encre);
	box-shadow: inset 0 0 0 1.4px #C9CDD6;
}

.pill.on {
	background: var(--nuit-vif);
	color: #FFF;
	box-shadow: inset 0 0 0 1.4px var(--nuit-vif);
}

.pill:focus-visible {
	outline: 2px solid var(--nuit-vif);
	outline-offset: 3px;
}

/* Formulaire  */

.formwrap {
	min-width: 0;
}

.sect-t {
	margin-bottom: 14px;
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -.014em;
}

.grp {
	margin-bottom: 14px;
	padding: clamp(16px, 2.2vw, 22px);
	border: 1px solid var(--trait);
	border-radius: 14px;
	background: var(--voile);
}

.grp.grave {
	border-left: 3px solid var(--nuit-vif);
}

.grp-t {
	margin-bottom: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
}

.field {
	margin-bottom: 15px;
}

.field:last-child {
	margin-bottom: 0;
}

.lab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 0;
	font-size: 13px;
	font-weight: 600;
}

.req {
	color: var(--alerte);
}

.lim {
	font-size: 10.5px;
	font-weight: 500;
	white-space: nowrap;
	color: #A9ACB5;
}

.hint {
	margin: 3px 0 6px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--gris);
}

.field input,
.field textarea {
	width: 100%;
	padding: 10px 13px;
	border: 1.4px solid var(--trait);
	border-radius: 9px;
	background: #FFF;
	font-family: var(--body);
	font-size: 14px;
	color: var(--encre);
	transition: border-color .2s, box-shadow .2s;
}

.field textarea {
	min-height: 72px;
	line-height: 1.5;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: #B4B7BF;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--nuit-vif);
	box-shadow: 0 0 0 3px rgba(43, 84, 160, .1);
}

.count {
	margin-top: 3px;
	font-size: 10.5px;
	text-align: right;
	color: #A9ACB5;
}

.count.over {
	font-weight: 600;
	color: var(--alerte);
}

.legal {
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid #E6DCC4;
	border-radius: 12px;
	background: #FDFAF2;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6B5A2E;
}

.buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--trait);
}

.buy .price {
	font-family: var(--display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -.02em;
}

/* Caractéristiques  */

.details {
	padding-block: clamp(56px, 8vw, 92px);
	background: linear-gradient(180deg, #FFF 0%, var(--voile) 100%);
}

.details h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(20px, 2.8vw, 28px);
	letter-spacing: -.024em;
	text-align: center;
}


.details .specs {
	display: block;
	max-width: 560px;
	margin: clamp(24px, 3.4vw, 36px) auto 0;
	gap: 0;
}

.details .spec {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 2px;
	border-bottom: 1px solid var(--trait);
	font-size: 14px;
}

.details .spec:last-child {
	border-bottom: 0;
}

.details .spec dt {
	color: var(--gris);
}

.details .spec dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/*Réassurance */

.trust {
	padding-block: clamp(56px, 8vw, 92px);
	background: var(--voile);
}

.trust ul {
	display: grid;
	gap: 24px;
	max-width: 540px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.trust li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.trust h3 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -.012em;
}

.trust p {
	margin-top: 2px;
	font-size: 14px;
	color: var(--gris);
}

@media (max-width: 900px) {

	.split {
		grid-template-columns: 1fr;
	}

	.preview-in {
		position: static;
	}
}

.canvas .plate-code canvas {
	display: none;
}

.canvas .plate-code img,
.canvas .plate-code svg {
	display: block;
	width: 100%;
	height: auto;
}

.trust .ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: #FFF;
	box-shadow: inset 0 0 0 1px rgba(30, 58, 110, .14);
}

.trust .ico svg {
	width: 19px;
	height: 19px;
	stroke: var(--nuit-vif);
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Renonciation au droit de rétractation */

.qonnect-retractation {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid #E6DCC4;
	border-radius: 12px;
	background: #FDFAF2;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6B5A2E;
}

.qonnect-retractation__texte {
	margin: 0 0 12px;
}

.qonnect-retractation__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--encre);
	cursor: pointer;
}

.qonnect-retractation__label input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	accent-color: var(--nuit-vif);
	cursor: pointer;
}

.qonnect-retractation__label .required {
	color: var(--alerte);
	text-decoration: none;
}

.qonnect-retractation__lien {
	margin: 10px 0 0;
}

.qonnect-retractation__lien a {
	color: #6B5A2E;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Page contact */

.col {
	max-width: 34rem;
	margin-inline: auto;
	padding-inline: var(--gut);
}

.form-sect {
	padding-bottom: clamp(30px, 4vw, 44px);
}

.form-sect .lab {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
}

.form-sect .field {
	margin-bottom: 17px;
}

.form-sect .field input,
.form-sect .field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.4px solid var(--trait);
	border-radius: 10px;
	background: #FFF;
	font-family: var(--body);
	font-size: 14.5px;
	color: var(--encre);
	transition: border-color .2s, box-shadow .2s;
}

.form-sect .field textarea {
	min-height: 140px;
	line-height: 1.55;
	resize: vertical;
}

.form-sect .field input:focus,
.form-sect .field textarea:focus {
	outline: none;
	border-color: var(--nuit-vif);
	box-shadow: 0 0 0 3px rgba(43, 84, 160, .1);
}

.form-sect .btn {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Renvoi vers la FAQ */

.deflect {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: clamp(28px, 4vw, 40px);
	padding: 16px 18px;
	border: 1px solid var(--trait);
	border-radius: 14px;
	background: var(--nuit-voile);
}

.deflect .ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #FFF;
	box-shadow: inset 0 0 0 1px rgba(30, 58, 110, .1);
}

.deflect .ico svg {
	width: 16px;
	height: 16px;
	stroke: var(--nuit-vif);
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.deflect h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: -.012em;
}

.deflect p {
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--gris);
}

.deflect a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nuit-vif);
}

.deflect a svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	stroke-width: 2.2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s;
}

.deflect a:hover svg {
	transform: translateX(3px);
}

/* États du formulaire */

.form-msg {
	margin-bottom: 18px;
	padding: 13px 16px;
	border: 1px solid var(--trait);
	border-left-width: 3px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
}

.form-msg--erreur {
	border-left-color: var(--alerte);
	background: #FDF4F3;
	color: var(--encre);
}

.form-rgpd {
	margin: 0 0 18px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #A9ACB5;
}

.form-rgpd a {
	color: var(--gris);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.done {
	display: none;
	padding-block: clamp(30px, 5vw, 52px);
	text-align: center;
}

.done.on {
	display: block;
}

.done .mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	border-radius: 999px;
	background: var(--nuit-voile);
}

.done .mark svg {
	width: 24px;
	height: 24px;
	stroke: var(--nuit-vif);
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.done h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(19px, 2.4vw, 24px);
	letter-spacing: -.02em;
}

.done p {
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--gris);
}

/* Contact direct */

.direct {
	padding-block: clamp(48px, 7vw, 80px);
	border-top: 1px solid var(--trait);
	background: var(--voile);
	text-align: center;
}

.direct p {
	font-size: 15px;
	color: var(--gris);
}

.direct a.mail {
	display: inline-block;
	margin-top: 10px;
	padding-bottom: 3px;
	border-bottom: 1.5px solid var(--trait);
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(17px, 2.2vw, 22px);
	letter-spacing: -.018em;
	color: var(--encre);
	transition: border-color .2s;
}

.direct a.mail:hover {
	border-color: var(--nuit-vif);
}

.direct .note {
	margin-top: 14px;
	font-size: 12.5px;
	color: #A9ACB5;
}

/* mobiles */
@media (max-width: 640px) {
	.card {
		flex-basis: 88%;
	}

	.form {
		flex-direction: column;
	}

	.form .btn {
		justify-content: center;
	}

}

/* Le survol est dédié aux appareils dotés d'un vrai pointeur */
@media (hover: none) {
	.btn:hover,
	.btn-ghost:hover,
	.m-link:hover,
	.m-toggle:hover,
	.m-sub a:hover,
	.iconbtn:hover,
	.dot:hover,
	.foot-in a:hover,
	.crumb a:hover,
	.menu-foot a:hover,
	.brand:hover {
		color: inherit;
		background: inherit;
		opacity: inherit;
		box-shadow: inherit;
		transform: none;
	}

	.btn:hover {
		color: var(--blanc);
		background: var(--encre);
	}

	.btn-ghost:hover {
		color: var(--encre);
		background: transparent;
	}
}

/* Réponse au contact, brève et discrète. */
.btn:active,
.iconbtn:active,
.dot:active {
	opacity: .72;
	transition: opacity .06s ease;
}

/* Préférences système */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	html {
		scroll-behavior: auto;
	}

	.rise,
	.m-sub a {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Verrou anti mode sombre : la maquette est conçue en clair uniquement. */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: light only;
	}

	html,
	body {
		color: var(--encre) !important;
		background: var(--blanc) !important;
	}
}

/* Page de confirmation de commande */

.qc-confirm {
	max-width: 620px;
	margin-inline: auto;
	padding-block: clamp(28px, 4vw, 48px);
	text-align: center;
}

.qc-confirm__mark {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 999px;
	background: var(--nuit-voile);
}

.qc-confirm__mark svg {
	width: 28px;
	height: 28px;
	stroke: var(--nuit-vif);
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qc-confirm__titre {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(25px, 3.8vw, 38px);
	letter-spacing: -.03em;
	margin-bottom: 6px;
}

.qc-confirm__note {
	color: var(--gris);
	font-size: 14.5px;
}

.qc-confirm__num {
	display: inline-block;
	margin-top: 14px;
	padding: 7px 15px;
	border: 1px solid var(--trait);
	border-radius: 999px;
	background: var(--voile);
	font-family: var(--display);
	font-weight: 600;
	font-size: 13.5px;
}

.qc-confirm__echec {
	margin-top: 22px;
	padding: 14px 16px;
	border: 1px solid #E8CE9A;
	border-radius: 12px;
	background: #FDF0D5;
	color: #6B5A2E;
	font-size: 13.5px;
	line-height: 1.55;
}

.qc-confirm__actions {
	margin-top: 16px;
}

.qc-suite {
	margin-top: clamp(26px, 3.4vw, 38px);
	padding: clamp(18px, 2.4vw, 24px);
	border: 1px solid var(--trait);
	border-radius: 16px;
	background: #FFF;
	text-align: left;
}

.qc-suite h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -.014em;
	margin-bottom: 12px;
}

.qc-suite ol {
	margin: 0;
	padding-left: 20px;
	list-style: decimal;
}

.qc-suite li {
	font-size: 14px;
	line-height: 1.6;
	padding-block: 3px;
}

.qc-suite li::marker {
	color: var(--nuit-vif);
	font-weight: 600;
}

.qc-confirm__retour {
	margin-top: 22px;
}

.qc-confirm__retour a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--gris);
	transition: color .2s;
}

.qc-confirm__retour a:hover {
	color: var(--encre);
}

.qc-confirm__retour svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qc-confirm__retour a {
	border: none;
	background: none;
	padding: 0;
}


/* ---------- Newsletter ---------- */
.news-form {
	display: contents;
}

/* Piege a robots : hors flux, invisible, mais present dans le DOM. */
.news-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.news-msg {
	margin: 0 0 1rem;
	font-family: var(--body);
	font-size: .9rem;
}

.news-msg--ok { color: var(--nuit-vif); }
.news-msg--ko { color: var(--encre); }

.news-consent {
	max-width: 30rem;
	margin: .9rem auto 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--gris);
	text-align: left;
}

.news-consent label {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	cursor: pointer;
}

.news-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: .15rem 0 0;
	accent-color: var(--encre);
}

.news-consent a {
	color: var(--encre);
	text-decoration: underline;
	text-underline-offset: 2px;
}