/* ==========================================================================
   INSTAR — styles (maquette Figma « SITE INSTAR », V1 validée)

   Rendu proportionnel : chaque cote de la maquette est exprimée en « u »,
   1 u = 1 px de maquette, mis à l'échelle de la largeur de l'écran.
   - Desktop (≥ 1200 px) : maquette 1440 px → 1 u = largeur / 1440
   - Mobile  (< 768 px)  : maquette 360 px  → 1 u = largeur / 360 (max 1,25 px)
   - Tablette            : 1 u = 1 px (mise en page adaptée)
   ========================================================================== */

/* ---- Polices (auto-hébergées, aucun appel à Google) ---- */
@font-face { font-family: "Akshar"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/akshar-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Akshar"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/akshar-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Akshar"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/akshar-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Akshar"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/akshar-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist";  font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/geist-latin-700-normal.woff2") format("woff2"); }

:root {
	--vert: #CEF192;
	--violet: #5C248E;
	--blanc: #FFFFFF;
	--anthracite: #111111;
	--akshar: "Akshar", "Arial Narrow", sans-serif;
	--geist: "Geist", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	/* La largeur du body sert de référence (sans la barre de défilement). */
	container-type: inline-size;
	--u: 1px;
	margin: 0;
	background: var(--vert);
	color: var(--anthracite);
	font-family: var(--akshar);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "liga" 1, "clig" 1;
	font-variant-ligatures: common-ligatures contextual;
}
@media (min-width: 1200px) {
	body * { --u: min(calc(100cqw / 1440), 1px); }
}
@media (max-width: 767px) {
	body * { --u: min(calc(100cqw / 360), 1.25px); }
}

img, svg, video { display: block; }
a { color: inherit; }
address { font-style: normal; }
p { margin: 0; }

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

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ==========================================================================
   Hero vidéo
   Desktop : comme la maquette 1440 × 964, vidéo + pied de page = un écran.
   La zone vidéo de la maquette fait 857 u de haut, le pied de page la recouvre
   à partir de 774 u : la vidéo est cadrée de la même façon.
   ========================================================================== */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 420px;
	overflow: hidden;
	background: #5b4a86 url("../img/poster.jpg") center / cover no-repeat;
}
@media (min-width: 1200px) {
	.hero {
		height: calc(100vh - var(--pied-h, 151px));
		height: calc(100svh - var(--pied-h, 151px));
		background-position: center top;
	}
	.hero .hero__video { height: calc(100% + 83 * var(--u)); }
}
.hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	pointer-events: none; /* aucun clic, double-clic ni menu sur la vidéo */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.hero__logo {
	position: absolute;
	z-index: 1;
	top: calc(52 * var(--u));
	left: calc(40 * var(--u));
	margin: 0;
	line-height: 0;
}
.hero__logo img { width: calc(186.5 * var(--u)); height: auto; }

/* ==========================================================================
   Pied de page — DESKTOP (cotes de la maquette 1440 px)
   ========================================================================== */
.pied {
	display: grid;
	grid-template-columns: minmax(calc(133 * var(--u)), 133fr) minmax(calc(389 * var(--u)), 389fr) minmax(calc(287 * var(--u)), 287fr) calc(490 * var(--u));
	grid-template-rows: calc(52 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)) auto;
	grid-template-areas:
		"picto adresse contact  form"
		"picto itin    linkedin form"
		"picto .       .        form"
		"legal legal   legal    form";
	padding: calc(22 * var(--u)) calc(40 * var(--u)) calc(14 * var(--u));
	min-height: 0;
	background: var(--vert);
}

.pied__picto { grid-area: picto; width: calc(85 * var(--u)); height: calc(83 * var(--u)); margin-top: calc(1 * var(--u)); }

/* Adresse */
.pied__adresse {
	grid-area: adresse;
	font-weight: 600;
	font-size: calc(16 * var(--u));
	line-height: calc(18 * var(--u));
	letter-spacing: calc(0.48 * var(--u));
	white-space: nowrap;
}
.pied__nom { display: block; font-weight: 700; line-height: calc(30 * var(--u)); margin-bottom: calc(-2 * var(--u)); }

/* Contact */
.pied__contact {
	grid-area: contact;
	font-weight: 600;
	font-size: calc(16 * var(--u));
	line-height: calc(22 * var(--u));
	letter-spacing: calc(0.48 * var(--u));
	white-space: nowrap;
}
.pied__contact a { display: block; width: max-content; }
.pied__email { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: calc(2 * var(--u)); text-decoration-thickness: max(1px, calc(1 * var(--u))); }
.pied__tel { text-decoration: none; }

/* Liens « Voir l'itinéraire » / « Nous suivre sur Linkedin » */
.pied__lien {
	display: inline-flex;
	align-items: center;
	gap: calc(4 * var(--u));
	width: max-content;
	height: calc(16 * var(--u));
	font-family: var(--geist);
	font-weight: 700;
	font-size: calc(12 * var(--u));
	line-height: calc(16 * var(--u));
	letter-spacing: calc(0.36 * var(--u));
	color: var(--violet);
	text-decoration: none;
}
.pied__lien .fleche { width: calc(9 * var(--u)); height: calc(9 * var(--u)); flex: none; transition: transform .2s ease; }
.pied__lien:hover .fleche, .pied__lien:focus-visible .fleche { transform: translate(calc(2 * var(--u)), calc(-2 * var(--u))); }
.pied__lien:hover { text-decoration: underline; }
.pied__lien--itineraire { grid-area: itin; }
.pied__lien--linkedin  { grid-area: linkedin; }

/* Mentions */
.pied__legal {
	grid-area: legal;
	font-size: calc(12 * var(--u));
	line-height: calc(17 * var(--u));
	letter-spacing: calc(0.36 * var(--u));
	white-space: nowrap;
}
.pied__legal a { text-decoration: none; }
.pied__legal a:hover { text-decoration: underline; }
.pied__point { white-space: pre; }
.pied__copy--mobile { display: none; }

/* ---- Formulaire d'inscription (bloc violet 490 × 100) ---- */
.nl {
	grid-area: form;
	position: relative;
	width: calc(490 * var(--u));
	min-height: calc(100 * var(--u));
	margin-top: 0;
	padding: calc(25 * var(--u)) calc(31 * var(--u)) calc(14 * var(--u)) calc(34 * var(--u));
	background: var(--violet);
	align-self: start;
}
.nl__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl__ligne { display: flex; gap: calc(20 * var(--u)); }
.nl__email {
	flex: 0 0 calc(303 * var(--u));
	width: calc(303 * var(--u));
	height: calc(25 * var(--u));
	margin: 0;
	padding: 0 calc(17 * var(--u));
	border: 0;
	border-radius: 0;
	background: var(--blanc);
	color: var(--anthracite);
	font-family: var(--akshar);
	font-size: calc(10 * var(--u));
	letter-spacing: calc(0.3 * var(--u));
	-webkit-appearance: none;
	appearance: none;
}
.nl__email::placeholder { color: var(--anthracite); opacity: 1; }
.nl__email:focus { outline: 2px solid var(--vert); outline-offset: 0; }
.nl__bouton {
	flex: 0 0 calc(102 * var(--u));
	width: calc(102 * var(--u));
	height: calc(25 * var(--u));
	margin: 0;
	padding: calc(2 * var(--u)) 0 0 calc(15 * var(--u));
	text-align: left;
	border: 0;
	border-radius: 0;
	background: var(--vert);
	color: var(--violet);
	font-family: var(--akshar);
	font-weight: 600;
	font-size: calc(14 * var(--u));
	line-height: 1;
	letter-spacing: calc(0.42 * var(--u));
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.nl__bouton:hover, .nl__bouton:focus-visible { background: var(--blanc); }
.nl__bouton:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.is-envoi .nl__bouton { opacity: .6; cursor: progress; }

/* Case de consentement 5 × 5 + mention RGPD */
.nl__rgpd {
	display: flex;
	align-items: flex-start;
	gap: calc(8 * var(--u));
	margin-top: calc(12 * var(--u));
	cursor: pointer;
}
.nl__case {
	flex: none;
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	margin: calc(1 * var(--u)) 0 0;
	border: 0;
	border-radius: 0;
	background: var(--blanc) center / 80% no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.nl__case:checked { background-color: var(--vert); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='%235C248E' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E"); }
.nl__case:focus-visible { outline: 1px solid var(--vert); outline-offset: 1px; }
.nl__rgpd span {
	display: block;
	width: calc(405 * var(--u));
	font-weight: 400;
	font-size: max(10px, calc(10 * var(--u)));
	line-height: max(13px, calc(13 * var(--u)));
	letter-spacing: calc(0.2 * var(--u));
	color: rgba(255, 255, 255, .92);
}
.nl__rgpd a { text-decoration: underline; text-decoration-skip-ink: none; }

.nl__message {
	position: absolute;
	top: calc(7 * var(--u));
	left: calc(34 * var(--u));
	right: calc(31 * var(--u));
	font-size: calc(11 * var(--u));
	line-height: calc(14 * var(--u));
	letter-spacing: calc(0.3 * var(--u));
	color: var(--vert);
}
.nl__message.is-erreur { color: #FFD3D3; }

/* ==========================================================================
   Tablette (768 – 1199 px) : le formulaire passe sous les coordonnées
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 768px) {
	.hero__logo { left: 40px; }
	.pied {
		grid-template-columns: 133px auto 1fr;
		grid-template-rows: 52px 16px auto auto;
		grid-template-areas:
			"picto adresse contact"
			"picto itin    linkedin"
			"form  form    form"
			"legal legal   legal";
		column-gap: 0;
		padding: 32px 40px 20px;
	}
	.pied__adresse, .pied__lien--itineraire { margin-right: 60px; }
	.nl { margin: 32px 0 20px; }
}

/* ==========================================================================
   MOBILE (< 768 px), cotes de la maquette 360 px
   ========================================================================== */
@media (max-width: 767px) {
	.hero { background-image: url("../img/poster-mobile.jpg"); }
	.hero__logo { top: calc(22 * var(--u)); left: calc(20 * var(--u)); }
	.hero__logo img { width: calc(125 * var(--u)); }

	.pied {
		grid-template-columns: calc(165 * var(--u)) 1fr;
		grid-template-rows: none;
		grid-template-areas:
			"picto    picto"
			"form     form"
			"linkedin linkedin"
			"adresse  contact"
			"itin     itin"
			"legal    legal";
		min-height: 0;
		padding: calc(29 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
	}

	.pied__picto { width: calc(39 * var(--u)); height: calc(38 * var(--u)); margin: 0 0 0 calc(1 * var(--u)); }

	.nl {
		width: auto;
		height: auto;
		margin: calc(20 * var(--u)) 0 0;
		padding: 0;
		background: none;
	}
	.nl__ligne { flex-direction: column; gap: calc(8 * var(--u)); }
	.nl__email {
		flex: none;
		width: 100%;
		height: calc(49 * var(--u));
		padding: 0 calc(11 * var(--u));
		font-size: calc(12 * var(--u));
		letter-spacing: calc(0.36 * var(--u));
		color: #000;
	}
	.nl__email::placeholder { color: #000; }
	.nl__email:focus { outline: 2px solid var(--violet); }
	.nl__bouton {
		flex: none;
		width: calc(100% - 1 * var(--u));
		height: calc(49 * var(--u));
		margin-left: calc(1 * var(--u));
		padding: 0;
		text-align: center;
		background: var(--violet);
		color: var(--vert);
	}
	.nl__bouton:hover, .nl__bouton:focus-visible { background: var(--anthracite); }
	.nl__rgpd { gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
	.nl__case {
		width: calc(16 * var(--u));
		height: calc(16 * var(--u));
		margin-top: 0;
		background-color: var(--blanc);
		border: 1px solid var(--violet);
	}
	.nl__case:checked { background-color: var(--violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.5' fill='none' stroke='%23CEF192' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E"); }
	.nl__rgpd span {
		width: auto;
		max-width: none;
		font-size: calc(11 * var(--u));
		line-height: calc(15 * var(--u));
		color: rgba(0, 0, 0, .85);
	}
	.nl__message {
		position: static;
		margin-top: calc(10 * var(--u));
		font-size: calc(12 * var(--u));
		line-height: calc(16 * var(--u));
		color: var(--violet);
	}
	.nl__message.is-erreur { color: #B00020; }

	.pied__lien--linkedin { margin: calc(22 * var(--u)) 0 0 calc(-1 * var(--u)); }

	.pied__adresse, .pied__contact {
		margin-top: calc(22 * var(--u));
		font-size: calc(12 * var(--u));
		line-height: calc(20 * var(--u));
		letter-spacing: calc(0.6 * var(--u));
		white-space: normal;
	}
	.pied--linkedin .pied__adresse,
	.pied--linkedin .pied__contact { margin-top: calc(14 * var(--u)); }
	.pied__adresse { margin-left: calc(1 * var(--u)); }
	.pied__nom { line-height: calc(20 * var(--u)); margin-bottom: 0; text-transform: capitalize; }
	.pied__sep { display: block; height: 0; overflow: hidden; }

	.pied__lien--itineraire { margin: calc(4 * var(--u)) 0 0 calc(-1 * var(--u)); }

	.pied__legal {
		margin-top: calc(14 * var(--u));
		font-size: calc(10 * var(--u));
		line-height: calc(14 * var(--u));
		letter-spacing: calc(0.3 * var(--u));
	}
	.pied__copy--desktop, .pied__point--desktop { display: none; }
	.pied__copy--mobile { display: block; }
}

/* ==========================================================================
   Pages de contenu (mentions légales, confidentialité)
   ========================================================================== */
.bandeau { background: var(--violet); padding: calc(52 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u)); }
.bandeau__logo { display: inline-block; line-height: 0; }
.bandeau__logo img { width: calc(186.5 * var(--u)); height: auto; }
.page-contenu {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 24px 80px;
	background: var(--vert);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.3px;
}
.page-contenu h1 { margin: 0 0 32px; font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--violet); }
.page-contenu h2 { margin: 40px 0 12px; font-weight: 600; font-size: 20px; color: var(--violet); }
.page-contenu p { margin: 0 0 1em; }
.page .pied { border-top: 1px solid rgba(92, 36, 142, .2); }
@media (max-width: 767px) {
	.bandeau { padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); }
	.bandeau__logo img { width: calc(125 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ==========================================================================
   Bandeau / module cookies (couleurs Instar, discret, ne masque pas le logo)
   ========================================================================== */
.ck {
	position: fixed;
	z-index: 100;
	left: 20px;
	bottom: 20px;
	width: min(440px, calc(100vw - 40px));
	font-family: var(--akshar);
	color: var(--blanc);
}
.ck[hidden] { display: none; }
.ck__boite {
	position: relative;
	padding: 22px 24px 20px;
	background: var(--violet);
	box-shadow: 0 10px 40px rgba(17, 17, 17, .25);
}
.ck__fermer {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .8);
	font: 400 12px/1 var(--akshar);
	letter-spacing: .3px;
	cursor: pointer;
}
.ck__fermer span { font-size: 16px; margin-left: 4px; }
.ck__fermer:hover { color: var(--blanc); text-decoration: underline; }
.ck__titre { margin: 0 0 8px; font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--vert); }
.ck__texte, .ck__desc { margin: 0; font-size: 13px; line-height: 18px; letter-spacing: .2px; color: rgba(255, 255, 255, .92); }
.ck__texte a, .ck__desc a { color: var(--vert); }
.ck__details { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); }
.ck__ligne { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 8px 0; }
.ck__nom { margin: 0 0 3px; font-weight: 600; font-size: 14px; }
.ck__toujours { flex: none; font-size: 12px; color: var(--vert); white-space: nowrap; padding-top: 2px; }
.ck__switch { position: relative; flex: none; width: 40px; height: 22px; margin-top: 2px; cursor: pointer; }
.ck__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck__switch span[aria-hidden] { position: absolute; inset: 0; background: rgba(255, 255, 255, .3); transition: background .2s; }
.ck__switch span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--blanc); transition: transform .2s; }
.ck__switch input:checked + span { background: var(--vert); }
.ck__switch input:checked + span::after { transform: translateX(18px); background: var(--violet); }
.ck__switch input:focus-visible + span { outline: 2px solid var(--vert); outline-offset: 2px; }
.ck__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ck__btn {
	flex: 1 1 auto;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--vert);
	border-radius: 0;
	background: var(--vert);
	color: var(--violet);
	font: 600 14px/1 var(--akshar);
	letter-spacing: .4px;
	cursor: pointer;
}
.ck__btn:hover, .ck__btn:focus-visible { background: var(--blanc); border-color: var(--blanc); }
.ck__btn--perso, .ck__btn--enreg { background: transparent; color: var(--vert); }
.ck__btn--perso:hover, .ck__btn--enreg:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); border-color: var(--blanc); }
.ck__btn[hidden] { display: none; }
@media (max-width: 767px) {
	.ck { left: 0; right: 0; bottom: 0; width: 100%; }
	.ck__boite { padding: 18px 18px 16px; }
	.ck__fermer { top: 8px; right: 8px; }
	.ck__btn { flex-basis: calc(50% - 4px); }
}
.instar-cookies-ouvrir { cursor: pointer; }