/*
Theme Name:   Clana Célébrations
Theme URI:    https://clanacelebrations.com
Description:  Thème enfant Divi de Clana Célébrations (base AZULII). Présentation, animations et shortcodes d'affichage ; la logique métier est dans le plugin clana-core.
Author:       AZULII
Author URI:   https://azulii.ca
Template:     Divi
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  th_clana
*/

/* ==========================================================================
   TYPOGRAPHIES — assets/fonts/ (Instrument Serif + HK Gothic)
   ========================================================================== */
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/HK-Gothic-Light.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/HK-Gothic-Regular.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/HK-Gothic-Italic.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/HK-Gothic-Medium.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/HK-Gothic-Medium-Italic.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/HK-Gothic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/HK-Gothic-SemiBold-Italic.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/HK-Gothic-Bold.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 700; font-display: swap; src: url("assets/fonts/HK-Gothic-Bold-Italic.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/HK-Gothic-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 800; font-display: swap; src: url("assets/fonts/HK-Gothic-ExtraBold-Italic.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/HK-Gothic-Black.woff2") format("woff2"); }
@font-face { font-family: "HK Gothic"; font-style: italic; font-weight: 900; font-display: swap; src: url("assets/fonts/HK-Gothic-Black-Italic.woff2") format("woff2"); }
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
}

/* ==========================================================================
   VARIABLES — mise en page (les couleurs et polices viennent des variables globales Divi)
   ========================================================================== */
:root {
	--radius: 10px;
	--radius-lg: 18px;
	--shadow-soft: 0 18px 40px -24px color-mix(in srgb, var(--gcid-heading-color) 35%, transparent);
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-inout: cubic-bezier(.7, 0, .2, 1);

	/*
	 * Espacements de la maquette (gabarit 1920 px) : marges latérales 96 px,
	 * contenu 1728 px, sections 180 px. Proportionnels à l'écran, plafonnés à 1920 px.
	 * Utilisables dans Divi : var(--gutter), var(--section-padding)…
	 */
	--content-max: 1728px;
	--gutter: clamp(20px, 5vw, 96px);
	--container: min(var(--content-max), 100% - 2 * var(--gutter));
	--section-padding: clamp(64px, 9.4vw, 180px);
	--section-padding-loose: clamp(80px, 12.5vw, 240px);
	--section-padding-tight: clamp(40px, 5vw, 96px);
	--section: var(--section-padding);
	--gap: clamp(18px, 2.1vw, 40px);
	--gap-lg: clamp(32px, 2.6vw, 50px);
	--header-h: 96px;

	/*
	 * Tailles de texte fluides de 390 px (mobile) à 1920 px.
	 * HK Gothic a un grand œil : ses tailles sont un cran sous la maquette (×0,875), 12 px minimum.
	 * Dans Divi : taille de police = var(--fs-h1), interligne = var(--lh-heading)…
	 */
	--fs-h1: clamp(1.75rem, .4375rem + 2.275vw, 3.0625rem);     /* 28 → 49 px, proportionnel dès ~920 px */
	--fs-h1-serif: clamp(2.5rem, 1.8469rem + 2.68vw, 5.0625rem); /* 40 → 81 px (Instrument Serif), proportionnel dès ~1000 px */
	--fs-h2: clamp(2.125rem, .5rem + 2.7vw, 3.75rem);           /* 34 → 60 px (Instrument Serif, très condensée), proportionnel dès ~960 px */
	--fs-h3: clamp(1.125rem, .4375rem + .875vw, 1.4375rem);     /* 18 → 23 px, proportionnel dès ~1260 px */
	--fs-h4: clamp(1rem, .9522rem + .1961vw, 1.1875rem);        /* 16 → 19 px */
	--fs-h5: clamp(.9375rem, .9056rem + .1307vw, 1.0625rem);    /* 15 → 17 px */
	--fs-h6: clamp(.75rem, .7181rem + .1307vw, .875rem);        /* 12 → 14 px */
	--fs-body: clamp(.875rem, .8591rem + .0654vw, .9375rem);    /* 14 → 15 px */
	--fs-small: clamp(.75rem, .7341rem + .0654vw, .8125rem);    /* 12 → 13 px */
	--fs-button: clamp(.75rem, .6863rem + .2614vw, 1rem);       /* 12 → 16 px : boutons, menu */
	--fs-eyebrow: clamp(.75rem, .7341rem + .0654vw, .8125rem);  /* 12 → 13 px : surtitres, badges */
	--lh-heading: 1.2;
	--lh-body: 1.2;
}

h1, h2, h3, h4, h5, h6 {
	padding-bottom:0!important;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
	margin-top:2em!important;
}

/* ==========================================================================
   BASE
   ========================================================================== */
.et_pb_bg_layout_dark, .et_pb_bg_layout_dark h1, .et_pb_bg_layout_dark h2, .et_pb_bg_layout_dark h3, .et_pb_bg_layout_dark h4, .et_pb_bg_layout_dark h5, .et_pb_bg_layout_dark h6 {
	color:var(--gcid-uihz1ci5s4)!important;
}
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.clana-site { font-size: var(--fs-body); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }

::selection { background: var(--gcid-primary-color); color: #fff; }
::-moz-selection { background: var(--gcid-primary-color); color: #fff; }

:focus-visible { outline: 2px solid color-mix(in srgb, var(--gcid-primary-color) 80%, #000); outline-offset: 3px; border-radius: 4px; }

.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;
}
.clana-skip-link {
	position: fixed; top: 12px; left: 12px; z-index: 100000;
	padding: 10px 16px; border-radius: 6px;
	background: var(--gcid-heading-color); color: #fff; font-size: 13px; text-decoration: none;
	transform: translateY(-160%); transition: transform .2s;
}
.clana-skip-link:focus { transform: none; color: #fff; }

/*
 * Barre de défilement du document masquée (CSS seulement).
 * Souris, trackpad, clavier et lecteurs d'écran fonctionnent normalement ; seul le rail disparaît.
 */
html,
body,
#page-container {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#page-container::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */
.clana-container { width: var(--container); margin-inline: auto; }
.clana-main { padding-bottom: var(--section); }
.clana-main--builder { padding-bottom: 0; }
body.home .clana-main { padding-bottom: 0; }
.clana-prose { max-width: 760px; }
.clana-prose > * + * { margin-top: 1em; }
.clana-prose h2 { margin-top: 1.6em; }
.clana-prose h3 { margin-top: 1.4em; }
.clana-prose ul, .clana-prose ol { padding-left: 1.2em; }
.clana-prose li + li { margin-top: .35em; }
.entry-content.clana-container.clana-prose { max-width: none; }
.entry-content.clana-container.clana-prose > .clana-legal,
.entry-content.clana-container.clana-prose > p { max-width: 760px; }

/* ==========================================================================
   TITRES DE PAGE ET SECTIONS
   ========================================================================== */
.clana-page-head { padding: clamp(40px, 7vw, 90px) 0 clamp(28px, 4vw, 48px); max-width: 820px; }
.clana-page-head__title strong { font-weight: 400; font-style: italic; }
.clana-page-head__text { margin-top: 18px; max-width: 640px; font-size: 16px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.clana-page-head--404 { padding-bottom: clamp(60px, 10vw, 140px); }

.clana-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	margin: 0 0 clamp(18px, 2vw, 38px);
	font-family: var(--et_global_body_font); font-size: var(--fs-eyebrow); font-weight: 600;
	text-transform: uppercase;
}
.clana-eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--gcid-primary-color);
}

.clana-section-head { margin-bottom: clamp(28px, 3.4vw, 64px); max-width: 860px; }
.clana-section-head.is-center { margin-inline: auto; text-align: center; }
.clana-section-head__text { margin-top: 12px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-section-head.is-center .clana-section-head__text { color: inherit; font-size: 14px; }

.clana-underline { position: relative; display: inline-block; white-space: nowrap; }
.clana-underline::after {
	content: ""; position: absolute; left: -2%; right: -6%; bottom: -.12em; height: .32em;
	background: var(--gcid-primary-color);
	-webkit-mask: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-6 70-7 116-2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-6 70-7 116-2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   BOUTONS ET LIENS
   ========================================================================== */
.clana-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	min-height: 46px; padding: 10px 14px 10px 18px;
	border: 1px solid currentColor; border-radius: 8px;
	background: transparent; color: var(--gcid-body-color);
	font-family: var(--et_global_body_font); font-size: var(--fs-button); font-weight: 700; text-transform: uppercase;
	line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.clana-btn .clana-icon { width: 20px; height: 20px; flex: none; transition: transform .3s var(--ease-out); }
.clana-btn:hover .clana-icon { transform: rotate(45deg); }
.clana-btn:hover { background: var(--gcid-body-color); border-color: var(--gcid-body-color); color: var(--gcid-uihz1ci5s4); }
.clana-btn--solid { background: var(--gcid-primary-color); border-color: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); }
.clana-btn--solid:hover { background: var(--gcid-heading-color); border-color: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
/* La case est plus grande que la flèche visible (place pour l'animation) : les marges négatives la ramènent au texte et au bord */
:is(.clana-btn, .clana-card__add, .clana-text-link, .clana-event-photo) .clana-btn__arrow {
	--arrow-btn-size: 2em;
	--arrow-btn-icon-size: 56%;
	position: relative; flex: none; width: var(--arrow-btn-size); height: var(--arrow-btn-size); margin: 0 -.45em 0 -.3em;
}
.clana-btn__arrow::before,
.clana-btn__arrow::after {
	content: ""; position: absolute; inset: 0;
	background: currentColor;
	-webkit-mask: var(--arrow-btn-icon) no-repeat 50% 50% / var(--arrow-btn-icon-size) auto;
	mask: var(--arrow-btn-icon) no-repeat 50% 50% / var(--arrow-btn-icon-size) auto;
	transform: translate(0, 0); clip-path: inset(0);
	will-change: transform;
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
.clana-btn__arrow::after {
	transform: translate(calc(var(--arrow-btn-shift) * -1), var(--arrow-btn-shift));
	clip-path: inset(0 0 var(--arrow-btn-shift) var(--arrow-btn-shift));
	transition: transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
:is(.clana-btn, .clana-card__add, .clana-text-link, .clana-event-photo):is(:hover, :focus-visible) .clana-btn__arrow::before {
	transform: translate(var(--arrow-btn-shift), calc(var(--arrow-btn-shift) * -1));
	clip-path: inset(var(--arrow-btn-shift) var(--arrow-btn-shift) 0 0);
	transition: transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
:is(.clana-btn, .clana-card__add, .clana-text-link, .clana-event-photo):is(:hover, :focus-visible) .clana-btn__arrow::after {
	transform: translate(0, 0); clip-path: inset(0);
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
.clana-btn__plus {
	position: relative; flex: none; width: 2em; height: 2em; margin: 0 -.45em 0 -.3em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 51.4 51.4'%3E%3Cpath d='M42.7 22.7h-40m20 20v-40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='7.2'/%3E%3C/svg%3E") no-repeat 50% 50% / 50% auto;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 51.4 51.4'%3E%3Cpath d='M42.7 22.7h-40m20 20v-40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='7.2'/%3E%3C/svg%3E") no-repeat 50% 50% / 50% auto;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
:is(.clana-btn, .clana-card__add, .clana-text-link, .clana-event-photo):is(:hover, :focus-visible) .clana-btn__plus { transform: rotate(90deg); }
/* Flèche droite des galeries (même trait que la flèche des boutons) : sort par la droite, revient par la gauche */
.clana-arrow-h {
	--arrow-h-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 58 58'%3E%3Cpath d='M3 23h40M23 3l20 20-20 20' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='7'/%3E%3C/svg%3E");
	position: relative; display: block; flex: none; width: 20px; height: 20px; overflow: hidden;
}
.clana-arrow-h--prev { transform: scaleX(-1); }
.clana-arrow-h::before,
.clana-arrow-h::after {
	content: ""; position: absolute; inset: 0;
	background: currentColor;
	-webkit-mask: var(--arrow-h-icon) no-repeat 50% 50% / contain;
	mask: var(--arrow-h-icon) no-repeat 50% 50% / contain;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1) .1s;
}
.clana-arrow-h::after { transform: translateX(-100%); transition: transform .3s cubic-bezier(.5, 0, .75, 0); }
:is(button, a):is(:hover, :focus-visible) > .clana-arrow-h::before { transform: translateX(100%); transition: transform .3s cubic-bezier(.5, 0, .75, 0); }
:is(button, a):is(:hover, :focus-visible) > .clana-arrow-h::after { transform: translateX(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1) .1s; }

/* Lien texte souligné + petite flèche (« Voir tous les termes et conditions ») */
.clana-text-link { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 11px; line-height: 1.3; text-decoration: none; color: var(--gcid-body-color); transition: color .25s; }
.clana-text-link:hover { color: var(--gcid-primary-color); }
.clana-text-link .clana-btn__arrow { --arrow-btn-size: 1.6em; margin: -.3em -.35em -.3em -.15em; }

@media (prefers-reduced-motion: reduce) {
	.clana-btn__arrow::before, .clana-btn__arrow::after, .clana-btn__plus, .clana-arrow-h::before, .clana-arrow-h::after { transition: none !important; }
}
.clana-btn--light { color: var(--gcid-uihz1ci5s4); border-color: color-mix(in srgb, var(--gcid-uihz1ci5s4) 80%, transparent); }
.clana-btn--light:hover { background: var(--gcid-uihz1ci5s4); border-color: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color); }
.clana-btn--ghost { border-color: transparent; padding-inline: 12px; text-decoration: underline; text-underline-offset: 4px; }
.clana-btn--ghost:hover { background: transparent; color: color-mix(in srgb, var(--gcid-primary-color) 80%, #000); border-color: transparent; }
.clana-btn[disabled], .clana-btn.is-loading { opacity: .6; pointer-events: none; }

.clana-link-arrow {
	display: inline-flex; align-items: center; gap: 18px;
	font-size: var(--fs-button); font-weight: 700; text-transform: uppercase; text-decoration: none;
	color: inherit;
}
.clana-link-arrow__icon {
	display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 5px;
	background: var(--gcid-secondary-color); color: var(--gcid-uihz1ci5s4);
	transition: background-color .25s, transform .3s var(--ease-out);
}
.clana-link-arrow__icon .clana-icon { width: 16px; height: 16px; color: #fff; }
.clana-link-arrow:hover .clana-link-arrow__icon { background: var(--gcid-primary-color); transform: rotate(45deg); }
.clana-link-arrow--small { font-size: 10px; gap: 10px; }
.clana-link-arrow--small .clana-link-arrow__icon { width: 22px; height: 22px; }
.clana-link-arrow--back::before { content: "←"; font-size: 14px; }

/* Boutons flèche : ajouter la classe « clana-arrow-btn » à un module Texte Divi (flèche dans un carré),
 * ou « clana-arrow-btn-add » à un module Bouton Divi (flèche seule, dans l'espace du padding droit),
 * ou « clana-arrow-btn-text » à un module Bouton Divi : le padding droit suit la flèche (voir plus bas).
 * Au survol, la flèche sort en haut à droite et une nouvelle arrive d'en bas à gauche. Le déplacement
 * passe par transform (fluide au sous-pixel) et le clip-path, animé en même temps, la cache hors de sa case. */
.clana-arrow-btn,
.clana-arrow-btn-add,
.clana-arrow-btn-text,
.clana-card__arrow,
.clana-btn__arrow,
.clana-svc-panel {
	--arrow-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 58 58'%3E%3Cpath d='M43 3v40M43 3H3m40 0L3 43' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='9'/%3E%3C/svg%3E");
	--arrow-btn-icon-size: 46%;
	--arrow-btn-shift: calc(var(--arrow-btn-size) * .75);
	--arrow-btn-out: .3s cubic-bezier(.5, 0, .75, 0);
	--arrow-btn-in: .6s cubic-bezier(.22, 1, .36, 1) .1s;
	cursor: pointer;
}
.clana-arrow-btn {
	--arrow-btn-size: clamp(32px, 2.3vw, 44px);
	--arrow-btn-radius: clamp(6px, .45vw, 9px);
	--arrow-btn-gap: clamp(12px, 1vw, 20px);
	--arrow-btn-bg: var(--gcid-secondary-color);
	--arrow-btn-bg-hover: var(--gcid-primary-color);
	--arrow-btn-color: var(--gcid-uihz1ci5s4);
}
.clana-arrow-btn--link {
	display: inline-flex; min-width: clamp(240px, 24vw, 475px); white-space: nowrap;
	font-family: var(--et_global_body_font); font-size: var(--fs-button); font-weight: 700; line-height: 1.26;
	text-transform: uppercase; text-decoration: none; color: inherit;
}
.clana-arrow-btn-add,
.clana-arrow-btn-text {
	--arrow-btn-size: 2em;
	--arrow-btn-icon-ratio: .56;
	--arrow-btn-icon-size: calc(var(--arrow-btn-icon-ratio) * 100%);
	--arrow-btn-right: .5em;
	--arrow-btn-color: currentColor;
	position: relative;
}
/* « clana-arrow-btn-text » : flèche collée au bord droit par défaut. Réglable dans le CSS personnalisé du bouton :
 * --arrow-btn-right (bord droit → flèche, ex. 1em) et --arrow-btn-gap (texte → flèche). Le padding droit
 * se calcule tout seul ; le haut, le bas et la gauche se règlent dans Divi, la flèche reste centrée. */
.clana-arrow-btn-text {
	--arrow-btn-right: 0em;
	--arrow-btn-gap: .6em;
}
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module.clana-arrow-btn-text,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module.clana-arrow-btn-text:hover {
	padding-right: calc(var(--arrow-btn-right) + var(--arrow-btn-size) * var(--arrow-btn-icon-ratio) + var(--arrow-btn-gap)) !important;
}
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner) { position: relative; display: flex; align-items: center; gap: var(--arrow-btn-gap); width: 100%; }
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner) > * { flex: 1 1 auto; margin: 0; padding-bottom: 0; }
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner)::after {
	content: ""; flex: none; order: 99;
	width: var(--arrow-btn-size); height: var(--arrow-btn-size); border-radius: var(--arrow-btn-radius);
	background: var(--arrow-btn-bg);
	transition: background-color .25s ease;
}

/* Divi masque les ::before/::after du Bouton en display:none!important et leur remet son icône au survol :
 * les deux id et la classe doublée passent devant ses sélecteurs, y compris ceux du Theme Builder (body.et-db #page-container #et-boc) */
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner)::before,
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner) > :last-child::after,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::before,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::after {
	content: ""; display: block !important; position: absolute; z-index: 1; top: 50%; right: 0; left: auto;
	width: var(--arrow-btn-size); height: var(--arrow-btn-size); margin: calc(var(--arrow-btn-size) / -2) 0 0;
	background: var(--arrow-btn-color); opacity: 1; pointer-events: none;
	-webkit-mask: var(--arrow-btn-icon) no-repeat 50% 50% / var(--arrow-btn-icon-size) auto;
	mask: var(--arrow-btn-icon) no-repeat 50% 50% / var(--arrow-btn-icon-size) auto;
	transform: translate(0, 0); clip-path: inset(0);
	will-change: transform;
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::before,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::after {
	/* --arrow-btn-right se mesure du bord droit à la flèche visible, pas à sa case (plus grande pour l'animation) */
	right: calc(var(--arrow-btn-right) - var(--arrow-btn-size) * (1 - var(--arrow-btn-icon-ratio)) / 2);
	font-size: inherit; line-height: 1;
}

/* Au repos, la flèche d'entrée attend en bas à gauche, hors de sa case */
.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner) > :last-child::after,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::after {
	transform: translate(calc(var(--arrow-btn-shift) * -1), var(--arrow-btn-shift));
	clip-path: inset(0 0 var(--arrow-btn-shift) var(--arrow-btn-shift));
	transition: transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
.clana-arrow-btn:is(:hover, :focus-within) :is(.et_pb_text_inner, .clana-arrow-btn__inner)::after { background: var(--arrow-btn-bg-hover); }
.clana-arrow-btn:is(:hover, :focus-within) :is(.et_pb_text_inner, .clana-arrow-btn__inner)::before,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text):is(:hover, :focus-visible)::before {
	transform: translate(var(--arrow-btn-shift), calc(var(--arrow-btn-shift) * -1));
	clip-path: inset(var(--arrow-btn-shift) var(--arrow-btn-shift) 0 0);
	transition: transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
.clana-arrow-btn:is(:hover, :focus-within) :is(.et_pb_text_inner, .clana-arrow-btn__inner) > :last-child::after,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text):is(:hover, :focus-visible)::after {
	transform: translate(0, 0);
	clip-path: inset(0);
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
/* « Ajouter tout ce look » (classe clana-look-add-all) : le plus de assets/svg/plus-regular.svg, qui pivote au survol */
.clana-arrow-btn-add.clana-look-add-all {
	--arrow-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 51.4 51.4'%3E%3Cpath d='M42.7 22.7h-40m20 20v-40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='7.2'/%3E%3C/svg%3E");
}
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text).clana-look-add-all::before,
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text).clana-look-add-all:is(:hover, :focus-visible)::before {
	clip-path: none; transition: transform .5s var(--ease-out);
}
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text).clana-look-add-all::before { transform: rotate(0); }
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text).clana-look-add-all:is(:hover, :focus-visible)::before { transform: rotate(90deg); }
:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text).clana-look-add-all::after { display: none !important; }
@media (prefers-reduced-motion: reduce) {
	.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner)::before,
	.clana-arrow-btn :is(.et_pb_text_inner, .clana-arrow-btn__inner) > :last-child::after,
	:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::before,
	:is(#page-container, body) :is(#et-boc, .et-l) .et_pb_button.et_pb_module.et_pb_module:is(.clana-arrow-btn-add, .clana-arrow-btn-text)::after { transition: none !important; }
}

/* FAQ : classe « clana-faq » sur un module Accordéon Divi (ou sur des modules Bascule).
 * Le plus dans un cercle pivote au survol et devient un × plein à l'ouverture ; l'état ouvert vient de
 * .clana-is-open (faq.js), posé dès le clic, alors que Divi ne change ses classes qu'après l'animation.
 * Typo et couleurs des titres/textes : réglages Divi du module. Taille du cercle : --faq-icon. */
.clana-faq.et_pb_accordion { --vertical-gap: 0; }
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) {
	--faq-icon: 36px;
	--faq-icon: round(clamp(30px, 2vw, 38px), 2px);
	--faq-cross: 14px;
	--faq-line: color-mix(in srgb, var(--gcid-secondary-color) 65%, transparent);
	margin: 0 !important; padding: 0; border: 0; border-top: 1px solid var(--faq-line); border-radius: 0; background: none;
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq):not(:has(+ .et_pb_toggle)) { border-bottom: 1px solid var(--faq-line); }
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title.et_pb_toggle_title {
	padding: clamp(18px, 1.6vw, 28px) calc(var(--faq-icon) + 24px) 0 0;
	padding-bottom: clamp(18px, 1.6vw, 28px) !important;
	color: var(--gcid-heading-color);
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title::before {
	content: "" !important; display: block !important; box-sizing: border-box;
	position: absolute; top: 50%; right: 0; left: auto;
	width: var(--faq-icon); height: var(--faq-icon); margin-top: calc(var(--faq-icon) / -2);
	border: 1px solid var(--faq-line); border-radius: 50%; background: transparent;
	font-size: 0 !important;
	transition: background-color .3s, border-color .3s;
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title::after {
	content: ""; position: absolute; top: 50%;
	right: calc((var(--faq-icon) - var(--faq-cross)) / 2);
	width: var(--faq-cross); height: var(--faq-cross); margin-top: calc(var(--faq-cross) / -2);
	background: currentColor; color: var(--gcid-heading-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .3s;
	pointer-events: none;
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title:hover::before { border-color: var(--gcid-primary-color); }
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title:hover::after { transform: rotate(90deg); }
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq).clana-is-open .et_pb_toggle_title::before {
	background-color: var(--gcid-heading-color); border-color: var(--gcid-heading-color);
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq).clana-is-open .et_pb_toggle_title::after {
	transform: rotate(135deg); color: var(--gcid-uihz1ci5s4);
}
:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_content {
	max-width: 720px; padding: 0 calc(var(--faq-icon) + 24px) clamp(20px, 1.8vw, 30px) 0;
}
@media (prefers-reduced-motion: reduce) {
	:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title::before,
	:is(.clana-faq .et_pb_toggle, .et_pb_toggle.clana-faq) .et_pb_toggle_title::after { transition: none; }
}

.clana-icon { display: inline-block; vertical-align: middle; flex: none; }

[hidden] { display: none !important; }

/* Bouton « Ma liste » */
.clana-list-toggle {
	position: relative; display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 4px; border: 0; background: none; cursor: pointer;
	color: var(--gcid-body-color); font-size: var(--fs-button); font-weight: 600; text-transform: uppercase;
}
.clana-list-toggle .clana-icon { width: 24px; height: 24px; }
.clana-list-toggle__count {
	position: absolute; top: -2px; left: 18px;
	min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
	display: grid; place-items: center;
	background: var(--gcid-primary-color); color: #fff; font-size: 10px; letter-spacing: 0;
	transform: scale(0); transition: transform .3s var(--ease-out);
}
.clana-list-toggle.has-items .clana-list-toggle__count { transform: scale(1); }
.clana-list-toggle.is-bump .clana-list-toggle__count { animation: clanaBump .5s var(--ease-out); }
@keyframes clanaBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (max-width: 980px) {
	.clana-list-toggle__label { display: none; }
}

/* ==========================================================================
   EN-TÊTE EN DEUX TEMPS — hero fixe, menu compact, menu plein écran
   Classes Divi : clana-hero-fixe (page), clana-menu-compact (Theme Builder)
   ========================================================================== */
:root {
	--clana-cover-radius: clamp(20px, 2vw, 40px);
	--clana-cover-shade: .5;
	--ease-expo: cubic-bezier(.16, 1, .3, 1);
}

/* Les animations Divi posent overflow-y: hidden (en ligne) sur #page-container dès qu'un module est animé,
   ce qui annule tous les position: sticky (hero fixe, option des forfaits, filtres, galerie produit).
   clip coupe toujours le débordement sans créer de zone de défilement. */
#page-container { overflow: clip !important; }

/* Hero fixe : les sections suivantes passent par-dessus */
.et_pb_section.clana-hero-fixe { position: sticky; top: var(--clana-hero-top, 0px); z-index: 0; }
.clana-hero-fixe ~ .et_pb_section,
.clana-has-hero .et-l--footer { position: relative; z-index: 2; }
.clana-hero-fixe + .et_pb_section {
	box-shadow: 0 -40px 80px -40px rgba(0, 0, 0, calc(.45 * min(1, var(--clana-cover, 0) * 4)));
}

/* Menu compact : apparaît quand le hero est recouvert */
.et-l--header .et_pb_section.clana-menu-compact {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 1000;
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px) - 2px)); visibility: hidden;
	transition: transform .8s var(--ease-expo), visibility 0s linear .8s;
}
body:not(.clana-vb) .et-l--header .clana-menu-compact .et_pb_module { opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .6s var(--ease-expo); }
.clana-is-covered .et-l--header .et_pb_section.clana-menu-compact { transform: none; visibility: visible; transition: transform .8s var(--ease-expo); }
body.clana-is-covered:not(.clana-vb) .et-l--header .clana-menu-compact .et_pb_module { opacity: 1; transform: none; transition-delay: .15s; }
.clana-vb .et-l--header .et_pb_section.clana-menu-compact { position: relative; top: 0; transform: none; visibility: visible; }
.clana-menu-compact .et_pb_code { flex-shrink: 0; }
.clana-menu-compact .et_pb_code_inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }

/* Divi règle la barre carrée (fond, hauteur, typo, bouton). Le thème la transforme en capsule après 40px
 * de défilement, et dès l'arrivée sur l'accueil. La classe « clana-menu-compact--pill » sur la section
 * affiche la capsule dans le builder. Réglages de la capsule, dans CSS personnalisé > Élément principal
 * de la section : --cm-inset (marge autour), --cm-radius, --cm-h (hauteur), --cm-pad (retrait à gauche),
 * --cm-logo (largeur du logo), --cm-shadow, --cm-btn-inset, --cm-btn-radius. */
.clana-menu-compact {
	--cm-inset: clamp(8px, .75vw, 14px);
	--cm-radius: clamp(12px, 1vw, 18px);
	--cm-h: clamp(54px, 4vw, 72px);
	--cm-pad: clamp(18px, 1.8vw, 34px);
	--cm-logo: clamp(84px, 6.4vw, 116px);
	--cm-shadow: 0 10px 30px -14px rgba(82, 76, 70, .35);
	--cm-btn-inset: 7px;
	--cm-btn-radius: clamp(8px, .7vw, 12px);
	--cm-line: color-mix(in srgb, var(--gcid-secondary-color) 55%, transparent);
	--cm-ease: .7s var(--ease-expo);
}
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_row.et_pb_row {
	box-sizing: border-box;
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
	transition: width var(--cm-ease), margin var(--cm-ease), padding var(--cm-ease), min-height var(--cm-ease), border-radius var(--cm-ease), border-color var(--cm-ease), box-shadow var(--cm-ease);
}
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_image.et_pb_image { flex: none; transition: width var(--cm-ease), opacity .5s ease, transform .6s var(--ease-expo); }
.clana-menu-compact .et_pb_image img { display: block; width: 100%; height: auto; }
.clana-menu-compact .et_pb_column > .et_pb_module { margin-bottom: 0 !important; }

:is(.clana-scrolled, .clana-has-hero) :is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_row.et_pb_row,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact--pill .et_pb_row.et_pb_row {
	width: calc(100% - 2 * var(--cm-inset)) !important; max-width: none !important;
	min-height: var(--cm-h) !important;
	margin: var(--cm-inset) auto 0 !important; padding-left: var(--cm-pad) !important;
	border-radius: var(--cm-radius) !important; border-color: transparent !important;
	box-shadow: var(--cm-shadow) !important;
}
:is(.clana-scrolled, .clana-has-hero) :is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_image.et_pb_image,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact--pill .et_pb_image.et_pb_image { width: var(--cm-logo) !important; }

/* Liens : ligne au survol et sur la page active (en capsule, la page active n'a que sa couleur) */
.clana-menu-compact .et-menu > li { margin-top: 0 !important; padding: 0 clamp(10px, 1.1vw, 24px); }
.clana-menu-compact .et-menu > li:first-child { padding-left: 0; }
.clana-menu-compact .et-menu > li > a { position: relative; padding: 6px 0 !important; }
.clana-menu-compact .et-menu > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
	background: var(--gcid-primary-color); transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--ease-expo);
}
.clana-menu-compact .et-menu > li > a:is(:hover, :focus-visible)::after,
.clana-menu-compact .et-menu > .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
:is(.clana-scrolled, .clana-has-hero) .clana-menu-compact .et-menu > .current-menu-item > a:not(:hover)::after,
.clana-menu-compact--pill .et-menu > .current-menu-item > a:not(:hover)::after { transform: scaleX(0); }

/* Ma liste : filet vertical en barre carrée */
.clana-menu-compact .et_pb_code { display: flex; align-self: stretch; margin-left: auto; }
.clana-menu-compact .et_pb_code_inner { align-self: stretch; }
.clana-menu-compact .clana-list-toggle {
	align-self: stretch; padding: 0 clamp(18px, 2vw, 36px);
	border-left: 1px solid var(--cm-line); color: var(--gcid-heading-color);
	font-size: clamp(.75rem, .7rem + .15vw, .875rem); letter-spacing: 0;
	transition: border-color var(--cm-ease);
}
:is(.clana-scrolled, .clana-has-hero) .clana-menu-compact .clana-list-toggle,
.clana-menu-compact--pill .clana-list-toggle { border-left-color: transparent; }
.clana-menu-compact .clana-list-toggle__count { top: 50%; left: auto; margin: -21px 0 0 12px; }

/* Demande de service : bloc plein en barre carrée, bouton arrondi fléché en capsule */
.clana-menu-compact .et_pb_button_module_wrapper { display: flex; align-self: stretch; margin: 0 !important; }
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add {
	--arrow-btn-right: .8em;
	display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin: 0; line-height: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='%23fff' fill-opacity='.22'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .4em center; background-size: 0 0;
	transition: background-color .3s, background-size var(--cm-ease), padding var(--cm-ease), margin var(--cm-ease), border-radius var(--cm-ease), opacity .5s ease, transform .6s var(--ease-expo);
}
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::before,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::after {
	content: "" !important; display: block !important; margin: calc(var(--arrow-btn-size) / -2) 0 0 !important;
	opacity: 0; transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in), opacity .3s;
}
:is(.clana-scrolled, .clana-has-hero) :is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact--pill .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add {
	margin: var(--cm-btn-inset) !important; padding: 0 calc(var(--arrow-btn-size) + .9em) 0 1.4em !important;
	border-radius: var(--cm-btn-radius) !important; background-size: 1.9em 1.9em;
}
:is(.clana-scrolled, .clana-has-hero) :is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::before,
:is(.clana-scrolled, .clana-has-hero) :is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::after,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact--pill .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::before,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-menu-compact--pill .et_pb_button.et_pb_module.clana-arrow-btn-add.clana-arrow-btn-add::after { opacity: 1; }

/* Mobile : un seul menu, la barre compacte est là dès l'arrivée (le logo du hero est masqué dans Divi) */
@media (max-width: 980px) {
	.clana-menu-compact .et_pb_button_module_wrapper { display: none; }
	.clana-menu-compact .et_pb_code_inner { padding-right: var(--cm-pad); }
	.clana-has-hero .et-l--header .et_pb_section.clana-menu-compact { transform: none; visibility: visible; transition: none; }
	.clana-has-hero:not(.clana-vb) .et-l--header .clana-menu-compact .et_pb_module { opacity: 1; transform: none; transition: none; }
	.clana-has-hero:not(.clana-vb) #et-main-area { padding-top: var(--clana-compact-h, 0px); }
}

/* Bouton « Menu » (mobile) */
.clana-menu-toggle {
	display: none; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; cursor: pointer;
	color: inherit; font-size: var(--fs-button); font-weight: 600; text-transform: uppercase;
}
.clana-menu-toggle__lines { display: grid; gap: 5px; width: 24px; }
.clana-menu-toggle__lines::before,
.clana-menu-toggle__lines::after { content: ""; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-expo); }
.clana-menu-toggle__lines::after { width: 70%; justify-self: end; }
.clana-menu-toggle.is-close .clana-menu-toggle__lines::before { transform: translateY(3.25px) rotate(45deg); }
.clana-menu-toggle.is-close .clana-menu-toggle__lines::after { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 980px) {
	.clana-menu-toggle { display: inline-flex; }
	.et_pb_section:has(.clana-menu-toggle) .et_pb_menu { display: none; }
}

/* Menu plein écran */
.clana-menu-open, .clana-menu-open body { overflow: hidden; }
.clana-menu-overlay {
	position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
	padding: clamp(20px, 4vw, 40px) var(--gutter) clamp(28px, 5vw, 48px);
	background: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color); overflow-y: auto;
	clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-expo);
}
.clana-menu-overlay.is-open { clip-path: inset(0); }
.clana-menu-overlay__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.clana-menu-overlay__logo { display: block; width: clamp(110px, 30vw, 150px); color: var(--gcid-primary-color); }
.clana-menu-overlay__logo svg { display: block; width: 100%; height: auto; }
.clana-menu-overlay .clana-menu-toggle { display: inline-flex; }
.clana-menu-overlay__nav { margin: auto 0; padding: 40px 0; }
.clana-menu-overlay__links { margin: 0; padding: 0; list-style: none; counter-reset: clana-menu; }
.clana-menu-overlay__links > li { counter-increment: clana-menu; }
.clana-menu-overlay__links > li > :is(a, button) {
	display: flex; align-items: baseline; gap: 18px; padding: 6px 0; border: 0; background: none; cursor: pointer;
	font-family: "Instrument Serif", serif; font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem); line-height: 1.05;
	color: inherit; text-decoration: none; text-align: left;
	opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .9s var(--ease-expo), color .3s;
}
.clana-menu-overlay__links > li > :is(a, button)::before {
	content: counter(clana-menu, decimal-leading-zero);
	font-family: var(--et_global_body_font); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--gcid-primary-color);
}
.clana-menu-overlay__links > li > :is(a, button):hover,
.clana-menu-overlay__links > li > [aria-expanded="true"],
.clana-menu-overlay__links .current-menu-item > a { color: var(--gcid-primary-color); }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li > :is(a, button) { opacity: 1; transform: none; }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li:nth-child(1) > * { transition-delay: .25s; }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li:nth-child(2) > * { transition-delay: .31s; }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li:nth-child(3) > * { transition-delay: .37s; }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li:nth-child(4) > * { transition-delay: .43s; }
.clana-menu-overlay.is-open .clana-menu-overlay__links > li:nth-child(n+5) > * { transition-delay: .49s; }

/* Menu plein écran : « Services » déroule la liste des services (menu « Pied de page — Services ») */
.clana-menu-overlay__toggle .clana-caret { align-self: center; width: .32em; height: .32em; margin-left: -4px; }
.clana-menu-overlay__sub {
	display: grid; grid-template-rows: 0fr; padding-left: calc(var(--fs-eyebrow) * 1.6 + 18px);
	transition: grid-template-rows .6s var(--ease-expo);
}
.clana-menu-overlay__sub > div { min-height: 0; overflow: hidden; }
.clana-menu-overlay__sub ul { margin: 0; padding: 0 0 12px; list-style: none; }
.clana-menu-overlay__toggle[aria-expanded="true"] + .clana-menu-overlay__sub { grid-template-rows: 1fr; }
.clana-menu-overlay__sub a {
	display: block; padding: 6px 0;
	font-family: "Instrument Serif", serif; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.1;
	color: inherit; text-decoration: none; transition: color .3s;
}
.clana-menu-overlay__sub a:hover,
.clana-menu-overlay__sub .current-menu-item > a { color: var(--gcid-primary-color); }

/* Chevron du « Services » du menu plein écran */
.clana-caret {
	display: inline-block; flex: none; width: 7px; height: 7px; margin: 0 2px 0 7px; vertical-align: .2em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .5s var(--ease-expo);
}
[aria-expanded="true"] > .clana-caret { transform: translateY(.2em) rotate(-135deg); }

/* Menu déroulant Services (bureau) : section « clana-services-panel » du Theme Builder d'en-tête, ouverte au survol
 * ou au clic des liens « #services » (menu, module Lien) ou portant la classe « clana-services-trigger » ; voir header.js.
 * Colonne « clana-dd-services » : modules Texte « clana-dd-item » (titre h3 lié + phrase), toute la ligne est cliquable.
 * Colonne « clana-dd-loc » : carte Location, cliquable en entier, bouton sans flèche. Bordure, coins et couleurs : réglages Divi.
 * Fond : crème translucide flouté, comme la barre compacte en capsule.
 * Carte détachée sous la barre (ou sous le lien, hors barre) : écart --sp-gap.
 * Sous 980px, le menu est masqué et la liste des services se déroule dans le menu plein écran. */
.et-l--header > .et_builder_inner_content { z-index: 3; }
.clana-services-panel { --sp-gap: 10px; }
body:not(.clana-vb) .et-l--header .et_pb_section.clana-services-panel {
	position: fixed; z-index: 1001; top: var(--sp-top, 80px); left: var(--sp-left, 200px);
	width: max-content !important; max-width: calc(100vw - 2 * var(--cm-inset, 12px)) !important; margin: 0 !important; overflow: visible;
	visibility: hidden; opacity: 0; transform: translateY(-8px); transform-origin: 0 0;
	transition: opacity .25s ease, transform .4s var(--ease-expo), visibility 0s linear .4s;
}
body:not(.clana-vb) .et-l--header .et_pb_section.clana-services-panel.is-open {
	visibility: visible; opacity: 1; transform: none;
	transition: opacity .3s ease, transform .6s var(--ease-expo);
}
body:not(.clana-vb) .et-l--header .et_pb_section.clana-services-panel {
	background-color: color-mix(in srgb, var(--gcid-uihz1ci5s4) 80%, transparent) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.clana-services-panel .clana-dd-loc { cursor: pointer; }
:is(#page-container, body) :is(#et-boc, .et-l) .clana-services-panel .et_pb_button.et_pb_module.et_pb_module.clana-arrow-btn-text { padding-right: 0 !important; }
:is(#page-container, body) :is(#et-boc, .et-l) .clana-services-panel .et_pb_button.et_pb_module.et_pb_module.clana-arrow-btn-text::before,
:is(#page-container, body) :is(#et-boc, .et-l) .clana-services-panel .et_pb_button.et_pb_module.et_pb_module.clana-arrow-btn-text::after { display: none !important; }
.clana-services-panel .et_pb_row.et_pb_row { display: flex; gap: 10px; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.clana-services-panel .et_pb_column.clana-dd-services { position: relative; flex: none !important; width: clamp(350px, 20vw, 380px) !important; margin: 0 !important; }
.clana-services-panel .et_pb_column.clana-dd-loc { flex: none !important; width: clamp(230px, 13.5vw, 260px) !important; margin: 0 !important; }
body:not(.clana-vb) .clana-services-panel .et_pb_column {
	opacity: 0; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
}
body:not(.clana-vb) .clana-services-panel.is-open .et_pb_column {
	opacity: 1; transform: none;
	transition: opacity .5s ease .08s, transform .6s var(--ease-expo) .08s;
}
body:not(.clana-vb) .clana-services-panel.is-open .et_pb_column + .et_pb_column { transition-delay: .16s; }

/* Survol : les autres entrées (services, carte Location) s'estompent, celle survolée reste nette */
.clana-dd-item.clana-dd-item { position: relative; margin: 0 !important; padding: 14px; }
.clana-dd-item + .clana-dd-item::before {
	content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
	background: color-mix(in srgb, var(--gcid-secondary-color) 65%, transparent);
}
.clana-dd-item h3 + p { margin-top: 3px !important; }
.clana-dd-item a { color: inherit; }
.clana-dd-item a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.clana-dd-loc h3 a { color: inherit; }
.clana-dd-item { transition: opacity .3s ease; }
body:not(.clana-vb) .clana-services-panel.is-open .et_pb_row:hover > .et_pb_column { transition: opacity .3s ease, transform .6s var(--ease-expo); }
.clana-services-panel .et_pb_row:has(:is(.clana-dd-item, .clana-dd-loc):is(:hover, :focus-within)) :is(.clana-dd-item, .clana-dd-loc):not(:hover, :focus-within) { opacity: .45 !important; }
.clana-dd-loc h3 + p { margin-top: .6em !important; }
.clana-menu-compact .et-menu > li > a[aria-expanded="true"]::after { transform: scaleX(1) !important; transform-origin: left; }
@media (max-width: 980px) {
	body:not(.clana-vb) .et-l--header .et_pb_section.clana-services-panel { display: none !important; }
}
.clana-menu-overlay__foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
	padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4));
}
.clana-menu-overlay__cta {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--fs-button); font-weight: 700; text-transform: uppercase; color: inherit; text-decoration: none;
}
.clana-menu-overlay__cta .clana-icon { width: 18px; height: 18px; }
.clana-menu-overlay .clana-list-toggle__label { display: inline; }
.clana-menu-overlay .clana-social:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.clana-menu-compact, .clana-menu-compact .et_pb_module,
	.clana-menu-overlay, .clana-menu-overlay__links > li > *, .clana-menu-overlay__sub,
	.clana-services-panel, .clana-services-panel .et_pb_column, .clana-dd-item { transition-duration: .01ms !important; transition-delay: 0s !important; }
}