/* ==========================================================================
   SDE : en-tête et pied de page
   Reprend la barre « pilule » posée sur le héros et le pied de page bleu du
   template Framer. Le rendu vient d'ici ; le contenu vient des menus
   WordPress et de l'outil de personnalisation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.sde-header {
	z-index: 20;
	padding: 25px 50px;
	transition: padding 0.3s var(--sde-ease);
}

/* Posé par-dessus le visuel quand la page ouvre sur un héros sombre, et
   accroché en haut de l'écran : `fixed` plutôt que `sticky`, car il n'occupe
   aucune place dans le flux : le héros a déjà la marge intérieure qu'il faut. */
.sde-header--over {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* Sinon il occupe sa place, sur fond blanc, et se colle en haut au défilement. */
.sde-header--solid {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--sde-hairline);
}

/* Une fois la page défilée, la barre se compacte et passe sur fond blanc :
   sans cela le texte clair se retrouverait sur le contenu clair de la page. */
.sde-header.is-stuck { padding-top: 12px; padding-bottom: 12px; }

.sde-header--over.is-stuck .sde-header__bar {
	height: 64px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

.sde-header--solid.is-stuck {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.sde-header--solid.is-stuck .sde-header__bar { height: 64px; }

/* --------------------------------------------------------------------------
   Barre claire
   Deux situations la produisent : une page qui n'ouvre pas sur un visuel
   sombre, et la barre compactée au défilement. Même traitement dans les deux
   cas, regroupé ici pour qu'il ne puisse pas diverger.
   -------------------------------------------------------------------------- */
.sde-header--solid .sde-header__name,
.sde-header--over.is-stuck .sde-header__name { color: var(--sde-ink); }

/* Le logo est monochrome blanc : sur fond clair il faut le passer en noir,
   sinon il disparaît. À remplacer le jour où le client fournit une version
   sombre : il suffira de retirer ces deux lignes. */
.sde-header--solid .sde-header__logo,
.sde-header--over.is-stuck .sde-header__logo { filter: brightness(0); }

.sde-header--solid .sde-header__nav .sde-menu a,
.sde-header--over.is-stuck .sde-header__nav .sde-menu a { color: var(--sde-body); }

.sde-header--solid .sde-header__nav .sde-menu a:hover,
.sde-header--over.is-stuck .sde-header__nav .sde-menu a:hover { color: var(--sde-brand); }

/* Le bouton fantôme, pensé pour un fond sombre, serait illisible ici. */
.sde-header--solid .sde-btn--ghost,
.sde-header--over.is-stuck .sde-btn--ghost {
	color: var(--sde-ink);
	border-color: rgba(0, 0, 0, 0.15);
}

.sde-header--solid .sde-btn--ghost:hover,
.sde-header--over.is-stuck .sde-btn--ghost:hover {
	background: var(--sde-surface);
	color: var(--sde-ink);
}

.sde-header--solid .sde-header__burger,
.sde-header--over.is-stuck .sde-header__burger {
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--sde-ink);
}

.sde-header--solid .sde-header__mobile,
.sde-header--over.is-stuck .sde-header__mobile {
	background: #fff;
	border: 1px solid var(--sde-hairline);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.sde-header--solid .sde-header__mobile .sde-menu a,
.sde-header--over.is-stuck .sde-header__mobile .sde-menu a { color: var(--sde-body); }

/* Les ancres (#services, #reservation) ne doivent pas atterrir sous la barre. */
html { scroll-padding-top: 120px; }

@media (prefers-reduced-motion: reduce) {
	.sde-header,
	.sde-header__bar { transition: none; }
}

.sde-header__inner {
	max-width: var(--sde-container);
	margin: 0 auto;
	width: 100%;
}

.sde-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 76px;
	padding: 0 15px 0 30px;
	border-radius: 999px;
	transition:
		height 0.3s var(--sde-ease),
		background-color 0.3s var(--sde-ease),
		box-shadow 0.3s var(--sde-ease);
}

.sde-header--over .sde-header__bar {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Marque */
.sde-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: 0 1 auto;
	min-width: 0;
	/* Trois enfants dans la barre depuis que le sélecteur de langue en est
	   sorti : la marge automatique garde navigation et actions groupées à
	   droite, là où `space-between` seul centrerait la navigation. */
	margin-inline-end: auto;
}

.sde-header__logo {
	width: 42px;
	height: 40px;
	object-fit: contain;
	flex: 0 0 auto;
	transition: filter 0.3s var(--sde-ease);
}

.sde-header__name {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.2;
}

.sde-header--over .sde-header__name { color: #fff; }

/* Navigation */
.sde-header__nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.sde-header__nav .sde-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sde-header__nav .sde-menu a {
	font-size: 16px;
	text-decoration: none;
	transition: color 0.3s var(--sde-ease);
}

.sde-header--over .sde-header__nav .sde-menu a { color: var(--sde-ondark); }
.sde-header--over .sde-header__nav .sde-menu a:hover { color: #fff; }

/* Sélecteur de langue et bouton menu, groupés en bout de barre : visibles en
   permanence, le sélecteur seul sur ordinateur, les deux côte à côte sur
   téléphone. Le même écart que la navigation, pour que la barre bureau garde
   son rythme d'avant. */
.sde-header__actions {
	display: flex;
	align-items: center;
	gap: 30px;
	flex: 0 0 auto;
	margin-inline-start: 10px;
}


/* Bouton menu */
.sde-header__burger {
	display: none;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	cursor: pointer;
	padding: 0;
}


.sde-header__burger-icon {
	position: relative;
	display: block;
	width: 18px;
	height: 10px;
}

.sde-header__burger-icon span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.3s var(--sde-ease), top 0.3s var(--sde-ease);
}

.sde-header__burger-icon span:first-child { top: 0; }
.sde-header__burger-icon span:last-child { top: 100%; }

.sde-header__burger[aria-expanded="true"] .sde-header__burger-icon span {
	top: 50%;
}
.sde-header__burger[aria-expanded="true"] .sde-header__burger-icon span:first-child {
	transform: rotate(45deg);
}
.sde-header__burger[aria-expanded="true"] .sde-header__burger-icon span:last-child {
	transform: rotate(-45deg);
}

/* Pas de rouge au toucher. `reset.css` du thème parent Hello Elementor peint
   tout `button:hover` et `button:focus` en #c36, et sur téléphone le bouton
   garde le focus une fois touché : il restait rouge tant que le menu était
   ouvert. Mesuré le 25/09/2026. Même vaut pour la pastille de langue, un
   `<button>` elle aussi. Le préfixe `.sde-header` passe devant le
   `[type="button"]:focus` du parent sans `!important`. */
.sde-header .sde-header__burger:is(:hover, :focus, :active) {
	background-color: transparent;
	color: #fff;
}
.sde-header--solid .sde-header__burger:is(:hover, :focus, :active),
.sde-header--over.is-stuck .sde-header__burger:is(:hover, :focus, :active) {
	color: var(--sde-ink);
}

/* Sélecteur de langue : pastille de la langue courante, menu déroulant des
   trois autres. Refait le 03/09/2026 : la version d'origine, une simple
   liste `<ul>` sans aucune règle CSS, s'empilait à la verticale dans le coin
   de l'en-tête. Même vocabulaire que `.sde-btn--ghost`, dont il reprend la
   bordure et la couleur de texte selon que l'en-tête est posé sur le visuel
   ou en barre blanche. */
.sde-lang-switcher {
	position: relative;
}

.sde-lang-switcher__current {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 50px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--sde-ondark);
	font-size: 14.4px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.3s var(--sde-ease), border-color 0.3s var(--sde-ease), background 0.3s var(--sde-ease);
}
.sde-header .sde-lang-switcher__current:is(:focus, :active) {
	background: transparent;
	color: var(--sde-ondark);
}
.sde-header .sde-lang-switcher__current:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.sde-header--solid .sde-lang-switcher__current,
.sde-header--over.is-stuck .sde-lang-switcher__current,
.sde-header--solid .sde-lang-switcher__current:is(:focus, :active),
.sde-header--over.is-stuck .sde-lang-switcher__current:is(:focus, :active) {
	background: transparent;
	color: var(--sde-ink);
	border-color: rgba(0, 0, 0, 0.15);
}
.sde-header--solid .sde-lang-switcher__current:hover,
.sde-header--over.is-stuck .sde-lang-switcher__current:hover {
	background: var(--sde-surface);
	color: var(--sde-ink);
}

.sde-lang-switcher__chevron {
	transition: transform 0.3s var(--sde-ease);
}
.sde-lang-switcher__current[aria-expanded="true"] .sde-lang-switcher__chevron {
	transform: rotate(180deg);
}

/* Le menu est un carton blanc quel que soit l'état de l'en-tête : la pastille
   change de couleur selon le fond, le menu déroulé, lui, retombe toujours
   sur du blanc, jamais sur le visuel ou le panneau mobile sombre. */
.sde-lang-switcher__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	min-width: 160px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.sde-lang-switcher__menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--sde-body);
	font-size: 14.4px;
	text-decoration: none;
	transition: background 0.2s var(--sde-ease), color 0.2s var(--sde-ease);
}
.sde-lang-switcher__menu a:hover {
	background: var(--sde-surface);
	color: var(--sde-ink);
}

/* Panneau mobile */
.sde-header__mobile {
	margin-top: 12px;
	padding: 24px;
	border-radius: 24px;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


.sde-header__mobile nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.sde-header__mobile .sde-menu {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.sde-header__mobile .sde-menu a {
	font-size: 18px;
	text-decoration: none;
	color: var(--sde-ondark);
}


@media (max-width: 1024px) {
	.sde-header { padding: 20px; }
	.sde-header__bar { height: 68px; padding: 0 12px 0 24px; }
	.sde-header.is-stuck { padding-top: 10px; padding-bottom: 10px; }
	.sde-header--over.is-stuck .sde-header__bar,
	.sde-header--solid.is-stuck .sde-header__bar { height: 60px; }
	html { scroll-padding-top: 100px; }
	.sde-header__nav { display: none; }
	.sde-header__actions { gap: 10px; margin-inline-start: 0; }
	.sde-header__burger { display: flex; }
}

@media (max-width: 480px) {
	.sde-header__name { display: none; }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
/* Noir plutôt que le platine de la marque, demande du client le 03/09/2026 :
   un choix délibéré pour le pied de page, distinct de `--sde-brand`, qui
   reste la teinte des boutons et des bandeaux ailleurs sur le site. */
.sde-footer {
	background: #000;
	color: #fff;
	padding: 100px 50px;
}

.sde-footer__inner {
	max-width: var(--sde-container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 75px;
}

.sde-footer__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	flex-wrap: wrap;
}

.sde-footer__title {
	font-size: clamp(32px, 3.5vw, 50px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: #fff;
	max-width: 720px;
	margin: 0;
}

.sde-footer__grid {
	display: grid;
	grid-template-columns: 300px repeat(4, 1fr);
	gap: 50px 10px;
}

.sde-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 300px;
}

.sde-footer__logo {
	width: 46px;
	height: 44px;
	object-fit: contain;
}

.sde-footer__baseline {
	font-size: 14.4px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.sde-footer__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.sde-footer__heading {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: #fff;
	margin: 0;
}

/* L'écart passe de 10 à 4 px pour compenser le remplissage ajouté aux liens
   juste en dessous : l'espacement visuel du pied ne bouge donc pas. */
.sde-footer .sde-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* `inline-block` et remplissage vertical, pour la taille de la cible.

   Un lien en ligne ne donne à cliquer que la hauteur de ses caractères, pas
   celle de son interligne : mesuré le 24/09/2026 sur les 13 pages, les 14
   liens du pied faisaient 17 px de haut alors que leurs lignes en occupaient
   26. C'est sous le minimum de 24 px de la règle AA sur la taille des cibles.

   `inline-block` est préféré à `block` parce que la même liste sert en
   colonne dans le pied et en ligne dans la barre du bas.

   Les liens placés dans une phrase (téléphone et e-mail du texte courant) ne
   sont pas touchés : la règle les exclut explicitement, et les grossir
   casserait le rythme du paragraphe. */
.sde-footer .sde-menu a,
.sde-footer .sde-menu span {
	display: inline-block;
	padding: 5px 0;
	font-size: 14.4px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.3s var(--sde-ease);
}

.sde-footer .sde-menu a:hover { color: #fff; }

/* Une adresse e-mail longue ne doit pas élargir sa colonne. */
.sde-footer__mail { overflow-wrap: anywhere; }

.sde-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sde-footer__bottom p {
	font-size: 14.4px;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.sde-footer__bottom .sde-menu {
	flex-direction: row;
	gap: 24px;
}

@media (max-width: 1024px) {
	.sde-footer { padding: 80px 20px; }
	.sde-footer__inner { gap: 50px; }
	.sde-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.sde-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.sde-footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Bouton WhatsApp flottant

   Posé en bas à droite sur toutes les pages. Le coin était libre : seul
   l'en-tête est en position fixe, en z-index 20. Le bouton reste dessous,
   pour qu'un menu déplié le recouvre plutôt que l'inverse.

   La couleur est en variable. `#128C7E`, le vert foncé de la marque WhatsApp,
   a été retenu par le client le 01/09/2026. Mesuré : le pictogramme blanc y
   atteint **4,14:1**, contre 2:1 sur le `#25D366` clair.

   Second gain, celui-là non anticipé : le bouton se détache aussi du fond de
   page. Sur blanc il passe de 1,98:1 à 4,14:1. Sur le bleu de marque du pied
   de page il tombe à 2,58:1, mais l'ombre portée l'y détache, et c'est une
   grande surface pleine, pas un détail à distinguer.

   Les deux verts sont des couleurs officielles de la marque : revenir au
   clair ne demande que de changer cette ligne.
   -------------------------------------------------------------------------- */
.sde-whatsapp {
	--sde-whatsapp: #128c7e;

	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 19;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--sde-whatsapp);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	transition:
		transform 0.3s var(--sde-ease, ease),
		box-shadow 0.3s var(--sde-ease, ease);
}

.sde-whatsapp:hover,
.sde-whatsapp:focus-visible {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

/* Le contour du navigateur disparaîtrait dans le vert : on le double d'un
   liseré blanc, lisible sur n'importe quel fond de page. */
.sde-whatsapp:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 5px var(--sde-whatsapp), 0 16px 36px rgba(0, 0, 0, 0.34);
}

.sde-whatsapp__icon {
	display: block;
}

@media (max-width: 767px) {
	.sde-whatsapp {
		width: 52px;
		height: 52px;
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sde-whatsapp,
	.sde-whatsapp:hover,
	.sde-whatsapp:focus-visible {
		transition: none;
		transform: none;
	}
}

@media print {
	.sde-whatsapp { display: none; }
}