/* =========================================================================
   consent.css — bandeau de consentement (Insight Tag LinkedIn) + état de
   chargement des liens Calendly. Chargé sur tout le site (inc/consent.php).

   Direction « Étiquette d'atelier » : une carte claire ancrée en bas à
   droite (le bouton de rendez-vous des heros est à gauche : on ne le
   recouvre pas), comme une étiquette d'expédition collée sur la page — filet rouge
   sur le bord gauche (rayon serré de ce côté, large ailleurs), Sora 700 pour
   le titre, Inter 400 pour le texte. Claire pour trancher aussi bien sur le
   hero navy de l'accueil que sur les fonds clairs. « Refuser » et « Accepter » ont exactement le même poids (CNIL).

   Couleurs : la charte du site (navy #15294F, rouge #e2392e,
   bleus #2B6CB0 / #4D9DE0) exprimée en OKLCH à partir d'une seule teinte
   de marque (--sip-hue). Valeurs hex en repli pour les anciens navigateurs.
   Espacements sur une grille de 4 px.
   ========================================================================= */

.sip-consent{
	--c-bg: #FBFCFE;
	--c-ink: #15294F;
	--c-muted: #4A5A76;
	--c-line: #DCE4EF;
	--c-rule: #e2392e;
	--c-link: #2B6CB0;
	--c-btn: #15294F;
	--c-btn-ink: #FBFCFE;
	--c-btn-hover: #2B6CB0;
	--c-focus: #4D9DE0;
	--c-shadow: rgba(6,12,28,.38);
	--c-shadow-near: rgba(6,12,28,.16);
}
@supports (color: oklch(0% 0 0)){
	.sip-consent{
		--sip-hue: 262;
		--c-bg: oklch(99% 0.003 var(--sip-hue));
		--c-ink: oklch(28.7% 0.074 var(--sip-hue));
		--c-muted: oklch(45% 0.045 var(--sip-hue));
		--c-line: oklch(91.5% 0.015 var(--sip-hue));
		--c-rule: oklch(60.2% 0.207 calc(var(--sip-hue) + 127));
		--c-link: oklch(52.4% 0.126 calc(var(--sip-hue) - 10));
		--c-btn: oklch(28.7% 0.074 var(--sip-hue));
		--c-btn-ink: oklch(99% 0.003 var(--sip-hue));
		--c-btn-hover: oklch(52.4% 0.126 calc(var(--sip-hue) - 10));
		--c-focus: oklch(67.5% 0.127 calc(var(--sip-hue) - 15));
		--c-shadow: oklch(12% 0.04 var(--sip-hue) / .38);
		--c-shadow-near: oklch(12% 0.04 var(--sip-hue) / .16);
	}
}

.sip-consent{
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99990;
	box-sizing: border-box;
	width: min(400px, calc(100vw - 32px));
	margin: 0;
	padding: 20px 24px 24px 20px;
	background: var(--c-bg);
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-rule);
	border-radius: 4px 16px 16px 4px;
	box-shadow: 0 24px 48px -16px var(--c-shadow), 0 4px 12px var(--c-shadow-near);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .24s ease, transform .24s ease;
}
.sip-consent[hidden]{ display: none; }
.sip-consent.is-open{
	opacity: 1;
	transform: none;
}
.sip-consent *{ box-sizing: border-box; }

.sip-consent .sip-consent__eyebrow{
	margin: 0 0 8px;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-link);
}
.sip-consent .sip-consent__title{
	margin: 0 0 8px;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--c-ink);
}
.sip-consent .sip-consent__text{
	margin: 0;
	font-weight: 400;
	color: var(--c-muted);
}
.sip-consent .sip-consent__text a{
	color: var(--c-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.sip-consent .sip-consent__text a:hover{ color: var(--c-ink); }

.sip-consent .sip-consent__actions{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}
.sip-consent .sip-consent__btn{
	appearance: none;
	min-height: 44px;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--c-btn);
	color: var(--c-btn-ink);
	box-shadow: none;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.sip-consent .sip-consent__btn:hover{
	background: var(--c-btn-hover);
	color: var(--c-btn-ink);
}
/* Pas de changement de fond au focus : le bouton focalisé à l'ouverture ne
   doit pas avoir l'air présélectionné. Le focus clavier a son contour. */
.sip-consent .sip-consent__btn:focus{
	background: var(--c-btn);
	color: var(--c-btn-ink);
}
.sip-consent .sip-consent__btn:focus:hover{ background: var(--c-btn-hover); }
.sip-consent .sip-consent__btn:active{ transform: translateY(1px); }
.sip-consent .sip-consent__btn:focus-visible,
.sip-consent .sip-consent__text a:focus-visible{
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

/* Mobile : version compacte (≈ 190 px de haut) pour laisser visible le bouton
   « Prendre rendez-vous » du hero, qui tombe vers 540-590 px sur un écran
   de 812 px. L'intitulé « Vos choix » disparaît, le reste est conservé. */
@media (max-width: 480px){
	.sip-consent{
		left: 16px;
		width: auto;
		padding: 12px 16px 16px 12px;
	}
	.sip-consent .sip-consent__eyebrow{ display: none; }
	.sip-consent .sip-consent__title{
		margin-bottom: 4px;
		font-size: 15px;
	}
	.sip-consent .sip-consent__text{
		font-size: 13px;
		line-height: 1.45;
	}
	.sip-consent .sip-consent__actions{
		gap: 8px;
		margin-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce){
	.sip-consent{
		transition: none;
		transform: none;
	}
	.sip-consent .sip-consent__btn{ transition: none; }
}

/* État « ouverture en cours » d'un lien Calendly (script chargé au premier clic). */
.sip-cal-loading{
	cursor: progress !important;
	opacity: .72;
	transition: opacity .18s ease;
}