/**
 * Clana Célébrations — composants.
 * Sommaire : accueil · cartes · carrousel · archive · fiche article · projet ·
 * liste (tiroir, page) · offres · pages · pied de page · lightbox · utilitaires.
 */

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */
.clana-img-placeholder {
	display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px;
	background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); color: var(--gcid-secondary-color);
}
.clana-img-placeholder svg { width: 32%; max-width: 90px; height: auto; }
.clana-badge {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	padding: 5px 10px; border-radius: 5px;
	background: color-mix(in srgb, var(--gcid-primary-color) 92%, transparent); color: var(--gcid-uihz1ci5s4);
	font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; line-height: 1.2;
}
.clana-spinner {
	display: inline-block; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-top-color: var(--gcid-primary-color);
	animation: clanaSpin .8s linear infinite; vertical-align: middle;
}
@keyframes clanaSpin { to { transform: rotate(360deg); } }
.clana-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.4; text-transform: uppercase; color: var(--gcid-primary-color); }
.clana-breadcrumb li { list-style: none; margin: 0; padding: 0; font-weight:600;}
.clana-breadcrumb li + li::before { content: "/"; margin-right: 4px; }
:is(#page-container, body) .clana-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
:is(#page-container, body) .clana-breadcrumb a:hover { color: var(--gcid-heading-color); }
.clana-main--article .clana-breadcrumb { padding-top: calc(var(--header-h) + 12px); }
.clana-main--article .clana-product { padding-top: 18px; }
.clana-container > :is(.clana-hero, .clana-services, .clana-story, .clana-projets-carousel, .clana-partners) { margin: 0 calc(50% - 50vw); }
.clana-container > p:empty { display: none; }
.clana-container > :is(.clana-services, .clana-story) { padding-inline: max(var(--gutter), calc(50vw - var(--content-max) / 2)); }
.clana-container > .clana-hero .clana-hero__left { padding-left: max(var(--gutter), calc(50vw - var(--content-max) / 2)); }
:is(.clana-services--dark, .clana-story) :is(h1, h2, h3) { color: inherit; }

/* ==========================================================================
   CARTES
   ========================================================================== */
.clana-card { position: relative; }
.clana-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }

/* Article */
.clana-card--article { display: flex; flex-direction: column; }
.clana-card--article .clana-card__media { aspect-ratio: 1; isolation: isolate; }
.clana-card--article:hover .clana-card__media img { transform: scale(1.04); }
.clana-card--article .clana-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 2px 0; }
.clana-card--article .clana-card__title { font-family: var(--et_global_body_font); font-size: clamp(14px, .9vw, 16px); font-weight: 700; line-height: 1.3; margin: 0 0 4px; padding: 0; }
:is(#page-container, body) .clana-card.clana-card--article .clana-card__title a { color: var(--gcid-heading-color); text-decoration: none; }
.clana-card--article .clana-card__title a::after { content: ""; position: absolute; inset: 0 0 48px; z-index: 1; }
.clana-card__price { font-size: 13px; color: var(--gcid-body-color); }
.clana-price__amount { font-weight: 700; color: var(--gcid-heading-color); }
.clana-price__from, .clana-price__unit { font-size: .92em; }
.clana-card__price .clana-price__amount { font-size: clamp(15px, 1vw, 17px); color: var(--gcid-primary-color); }
.clana-price--request { font-style: italic; }
/* Rangée d'options sous le prix, calée en bas du texte : alignée d'une carte à l'autre même si un titre passe sur deux lignes */
.clana-card .clana-card__options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; box-sizing: border-box; min-height: 32px; list-style: none; margin: auto 0 0; padding: 10px 0 0; }
.clana-card .clana-card__options li { list-style: none; margin: 0; padding: 0; line-height: 1; }
.clana-card__dot { display: block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.clana-card__swatch.is-more { font-size: 11px; color: var(--gcid-body-color); }
.clana-card .clana-card__options .clana-card__chip {
	display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
	background: color-mix(in srgb, var(--gcid-secondary-color) 28%, transparent);
	font-size: 11px; line-height: 1; color: var(--gcid-body-color); white-space: nowrap;
}
.clana-card__chip .clana-card__dot { width: 11px; height: 11px; margin-left: -4px; }
.clana-card__chip--qty { font-weight: 700; }
.clana-card__actions { position: relative; z-index: 2; padding-top: 12px; }
.clana-card__add {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
	border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer;
	font-size: 10.5px; font-weight: 700; line-height: 1.2; text-transform: uppercase; text-decoration: none; color: var(--gcid-primary-color);
	transition: color .25s;
}
.clana-card__add:is(:hover, :focus-visible) { color: var(--gcid-heading-color); }
.clana-card__add.is-added { color: #5f7a5b; }

/* Projet */
.clana-card--projet .clana-card__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: var(--gcid-uihz1ci5s4); text-decoration: none; isolation: isolate; }
.clana-card--projet .clana-card__media { aspect-ratio: 4 / 3; border-radius: 0; }
.clana-card--projet .clana-card__link:hover .clana-card__media img { transform: scale(1.05); }
.clana-card__overlay {
	position: absolute; inset: auto 0 0; z-index: 1;
	display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
	padding: 60px 20px 18px;
	background: linear-gradient(to top, color-mix(in srgb, var(--gcid-primary-color) 85%, transparent), transparent);
	opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.clana-card--projet .clana-card__link:hover .clana-card__overlay,
.clana-card--projet .clana-card__link:focus-visible .clana-card__overlay,
.clana-archive .clana-card__overlay { opacity: 1; transform: none; }
@media (hover: none) { .clana-card__overlay { opacity: 1; transform: none; } }
.clana-card--projet .clana-card__title { grid-column: 1; font-family: var(--et_global_body_font); font-size: 15px; font-weight: 700; margin: 0; color: var(--gcid-uihz1ci5s4); }
.clana-card__date { grid-column: 1; font-size: 12px; text-transform: uppercase; opacity:1;font-weight:600;}
/* Carré flèche : même flèche et même animation que les boutons « clana-arrow-btn » (variables dans style.css) */
.clana-card__arrow {
	--arrow-btn-size: clamp(30px, 2.4vw, 46px);
	--arrow-btn-icon-size: 47%;
	position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: end; box-sizing: border-box;
	width: var(--arrow-btn-size); height: var(--arrow-btn-size); border-radius: clamp(6px, .45vw, 9px);
	border: 2px solid color-mix(in srgb, var(--gcid-secondary-color) 75%, var(--gcid-uihz1ci5s4));
	background: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color);
}
.clana-card__arrow::before,
.clana-card__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-card__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);
}
.clana-card__link:is(:hover, :focus-visible) .clana-card__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);
}
.clana-card__link:is(:hover, :focus-visible) .clana-card__arrow::after {
	transform: translate(0, 0); clip-path: inset(0);
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
@media (prefers-reduced-motion: reduce) {
	.clana-card__arrow::before, .clana-card__arrow::after { transition: none !important; }
}

/* Projet « produit » (archive) : titre et type sous l'image, flèche sur l'image au survol */
.clana-card--produit .clana-card__link { overflow: visible; border-radius: 0; color: var(--gcid-heading-color); }
.clana-card--produit .clana-card__media { aspect-ratio: 4 / 3.1; border-radius: var(--radius); isolation: isolate; }
/* Même flèche au survol sur les cartes d'articles de l'archive */
:is(.clana-card--produit, .clana-card--article) .clana-card__arrow {
	position: absolute; right: clamp(12px, 1.2vw, 22px); bottom: clamp(12px, 1.2vw, 22px); z-index: 1;
	opacity: 0; transition: opacity .35s var(--ease-out);
}
/* Le carré apparaît puis la flèche entre par le bas à gauche (sans ressortir par le haut) */
:is(.clana-card--produit, .clana-card--article) .clana-card__arrow::after { display: none; }
:is(.clana-card--produit, .clana-card--article) .clana-card__arrow::before {
	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-card--produit .clana-card__link:is(:hover, :focus-visible) .clana-card__arrow,
.clana-card--article:is(:hover, :has(:focus-visible)):not(:has(button.clana-card__add:is(:hover, :focus-visible))) .clana-card__arrow { opacity: 1; }
.clana-card--produit .clana-card__link:is(:hover, :focus-visible) .clana-card__arrow::before,
.clana-card--article:is(:hover, :has(:focus-visible)):not(:has(button.clana-card__add:is(:hover, :focus-visible))) .clana-card__arrow::before {
	transform: translate(0, 0); clip-path: inset(0);
	transition: transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
@media (hover: none) {
	:is(.clana-card--produit, .clana-card--article) .clana-card__arrow { opacity: 1; }
	:is(.clana-card--produit, .clana-card--article) .clana-card__arrow::before { transform: none; clip-path: none; }
}
.clana-card--produit .clana-card__body { display: block; padding: 14px 2px 0; }
.clana-card--produit .clana-card__title { font-size: clamp(15px, 1vw, 19px); line-height: 1.3; color: var(--gcid-heading-color); }
.clana-card--produit .clana-card__date { display: block; margin-top: 5px; font-size: 10.5px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }

/* ==========================================================================
   CARROUSEL
   ========================================================================== */
.clana-carousel-section { padding: var(--section) 0; }
/* Projets : pleine largeur de l'écran même dans une colonne Divi ; curseurs et bouton à 5vw des bords */
.clana-projets-carousel { --carousel-edge: 5vw; width: 100vw; margin-inline: calc(50% - 50vw); padding-block: 0; overflow: hidden; }
.clana-projets-carousel .clana-section-head { width: auto; max-width: none; margin-inline: var(--carousel-edge); }
/* Articles similaires : même principe, cartes plus petites */
.clana-similaires { --carousel-edge: 5vw; width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; }
.clana-similaires .clana-section-head { width: auto; max-width: none; margin-inline: var(--carousel-edge); }
.clana-similaires .clana-carousel__track { gap: clamp(18px, 1.7vw, 33px); padding-inline: var(--carousel-edge); scroll-padding-inline: var(--carousel-edge); }
.clana-similaires .clana-carousel__slide { flex-basis: clamp(240px, 21vw, 400px); }
@media (max-width: 767px) { .clana-similaires .clana-carousel__slide { flex-basis: 72%; } }
.clana-similaires .clana-carousel__controls { margin-inline: var(--carousel-edge); }
.clana-carousel { position: relative; }
.clana-carousel__track {
	display: flex; gap: 18px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; overscroll-behavior-x: contain;
	padding: 4px 0;
}
.clana-carousel__track::-webkit-scrollbar { display: none; }
.clana-carousel__track:focus-visible { outline-offset: 6px; }
.clana-carousel__slide { flex: 0 0 min(80%, 360px); scroll-snap-align: start; }
.clana-projets-carousel .clana-carousel__track { gap: clamp(18px, 1.7vw, 33px); padding-inline: var(--carousel-edge); scroll-padding-inline: var(--carousel-edge); }
.clana-projets-carousel .clana-carousel__slide { flex-basis: clamp(280px, 37.6vw, 722px); scroll-snap-align: center; }
@media (max-width: 767px) { .clana-projets-carousel .clana-carousel__slide { flex-basis: 82%; } }
.clana-projets-carousel .clana-card--projet .clana-card__media { aspect-ratio: 4 / 3.1; }
.clana-projets-carousel .clana-card--projet .clana-card__title { font-size: var(--fs-h3); }
.clana-projets-carousel .clana-card__date { font-size: var(--fs-small); }
.clana-projets-carousel .clana-card__overlay { padding: clamp(90px, 10vw, 190px) clamp(20px, 1.7vw, 32px) clamp(18px, 1.7vw, 32px); }
.clana-carousel__controls { display: flex; align-items: center; gap: 20px; margin-top: clamp(26px, 2.6vw, 50px); }
.clana-projets-carousel .clana-carousel__controls { margin-inline: var(--carousel-edge); }
.clana-carousel__controls .clana-carousel__link { margin-left: auto; }
.clana-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.clana-carousel__track.is-dragging a { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .clana-carousel__track { cursor: grab; } }
.clana-carousel__dots {
	display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px;
	border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 6px; background: var(--gcid-uihz1ci5s4);
}
.clana-carousel__dots:empty { display: none; }
.clana-carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--gcid-secondary-color); cursor: pointer; transition: width .35s var(--ease-out), background-color .3s; }
.clana-carousel__dot.is-active { width: 28px; background: var(--gcid-primary-color); }
.clana-carousel__arrows { display: inline-flex; gap: 6px; }
.clana-carousel__arrow {
	display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
	border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 50%; background: transparent; color: var(--gcid-body-color); cursor: pointer;
	transition: background-color .2s, opacity .2s;
}
.clana-carousel__arrow .clana-icon { width: 16px; height: 16px; }
.clana-carousel__arrow:hover { background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-carousel__arrow[disabled] { opacity: .35; cursor: default; }
.clana-carousel.is-static .clana-carousel__arrows,
.clana-carousel.is-static .clana-carousel__dots { display: none; }
@media (max-width: 767px) { .clana-carousel__arrows { display: none; } }

/* ==========================================================================
   PARTENAIRES + CTA
   ========================================================================== */
.clana-partners { --scroll-gap: clamp(25px, 3.1vw, 60px); padding: var(--section) 0 calc(var(--section) * 1.35); }
.clana-partners .clana-section-head { width: var(--container); }
.clana-partners__marquee { margin-top: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clana-partners__item { display: flex; align-items: center; }
.clana-partner { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.clana-partners .clana-partner__logo { display: block; width: auto; height: clamp(36px, 4.3vw, 82px); max-width: clamp(140px, 12.5vw, 240px); object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .85; transition: opacity .3s, filter .3s; }
.clana-partners .clana-partner:hover .clana-partner__logo { opacity: 1; filter: none; }

/* Logos en boucle : classe « clana-logos-loop » sur un Groupe Divi qui ne contient que des modules Image.
 * Chaque logo tient dans une boîte --logo-h × --logo-w : les logos très allongés sont réduits en largeur.
 * Dans le Visual Builder, ils restent alignés sans défiler. */
.clana-logos-loop {
	--logo-h: clamp(40px, 4.5vw, 86px);
	--logo-w: calc(var(--logo-h) * 2.6);
	--logo-gap: 5vw;
	display: block !important; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.clana-logos-loop .et_pb_image { flex: none; width: auto !important; max-width: none !important; margin-bottom: 0 !important; }
.clana-logos-loop .et_pb_image img { display: block; width: auto; height: var(--logo-h); max-width: var(--logo-w) !important; object-fit: contain; }
.clana-logos-loop .infinite-scroll-set { --scroll-gap: var(--logo-gap) !important; }
.clana-vb .clana-logos-loop { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px var(--logo-gap); -webkit-mask-image: none; mask-image: none; }
.clana-partner__name { font-family: var(--et_global_heading_font); font-size: 26px; white-space: nowrap; }

.clana-cta {
	position: relative; overflow: hidden; isolation: isolate;
	width: var(--container); max-width: 1540px; margin: 0 auto var(--section);
	padding: clamp(56px, 6.9vw, 133px) clamp(24px, 5vw, 96px);
	border-radius: clamp(18px, 2vw, 40px); text-align: center; color: var(--gcid-uihz1ci5s4);
	background: color-mix(in srgb, var(--gcid-primary-color) 80%, #000);
}
.clana-cta__bg { position: absolute; inset: -30px; z-index: -1; }
.clana-cta__bg img, .clana-cta__bg .clana-img-placeholder { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(.9); transform: scale(1.05); }
.clana-cta__bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--gcid-heading-color) 38%, transparent); }
.clana-cta__title { color: var(--gcid-uihz1ci5s4); }
.clana-cta__text { max-width: 860px; margin: clamp(14px, 2.1vw, 40px) auto clamp(32px, 2.8vw, 54px); font-size: var(--fs-body); line-height: var(--lh-body); }
.clana-main .clana-cta { margin-top: var(--section); margin-bottom: 0; }

/* ==========================================================================
   ARCHIVE + FILTRES
   ========================================================================== */
.clana-archive__bar {
	position: sticky; top: calc(var(--clana-sticky-top, 0px) + 10px); z-index: 20;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 10px; margin-bottom: 26px;
	border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 12px;
	background: color-mix(in srgb, var(--gcid-uihz1ci5s4) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.clana-archive__search { position: relative; flex: 1 1 280px; }
.clana-archive__search .clana-icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); pointer-events: none; }
.clana-archive__search input {
	width: 100%; min-height: 44px; padding: 10px 14px 10px 42px;
	border: 1px solid transparent; border-radius: 8px; background: var(--gcid-uihz1ci5s4); color: var(--gcid-body-color); font-size: 14px;
}
.clana-archive__search input:focus { outline: none; border-color: var(--gcid-primary-color); }
.clana-archive__tools { display: flex; align-items: center; gap: 10px; }
.clana-archive__filters-btn,
.clana-archive__sort select {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 8px; background: var(--gcid-uihz1ci5s4); color: var(--gcid-body-color);
	font-size: 12px; font-weight: 600; cursor: pointer;
}
.clana-archive__filters-btn .clana-icon { width: 18px; height: 18px; }
.clana-archive__filters-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gcid-primary-color); color: #fff; font-size: 10px; }
.clana-archive__sort select { padding-right: 34px; appearance: none; -webkit-appearance: none; background: var(--gcid-uihz1ci5s4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%233A3531' stroke-width='1.6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }

/* Barre discrète (projets) : une simple ligne au-dessus de la grille */
.clana-archive__bar--compact {
	position: static; justify-content: space-between; gap: 8px 24px; padding: 0 0 6px; margin-bottom: 14px;
	border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 0;
	background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
	transition: border-color .3s;
}
.clana-archive__bar--compact:has([data-filter-search]:focus) { border-bottom-color: var(--gcid-primary-color); }
.clana-archive__bar--compact .clana-archive__search { flex: 0 1 320px; }
.clana-archive__bar--compact .clana-archive__search .clana-icon { left: 0; width: 16px; height: 16px; }
.clana-archive__bar--compact .clana-archive__search input { min-height: 36px; padding: 6px 0 6px 26px; border: 0; border-radius: 0; background: none; font-size: 13px; }
.clana-archive__bar--compact :is(.clana-archive__filters-btn, .clana-archive__sort select) { min-height: 36px; border-color: transparent; background-color: transparent; }
.clana-archive__bar--compact .clana-archive__filters-btn { padding: 0 4px; }
.clana-archive__bar--compact .clana-archive__sort select { padding-left: 4px; padding-right: 26px; background-position: right 0 center; }

.clana-archive__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.clana-archive:not(.has-filters) .clana-archive__layout { grid-template-columns: minmax(0, 1fr); }
.clana-archive__filters { position: sticky; top: calc(var(--clana-sticky-top, 0px) + 96px); max-height: calc(100vh - var(--clana-sticky-top, 0px) - 120px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.clana-archive__filters-head, .clana-archive__filters-foot { display: none; }
.clana-archive--articles .clana-archive__filters-foot { display: flex; }
.clana-archive__filters-foot { gap: 8px; padding-top: 16px; }
.clana-archive__filters-foot .clana-btn--solid { display: none; }

.clana-filter { margin: 0 0 8px; padding: 0 0 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); min-width: 0; }
.clana-filter__legend { width: 100%; padding: 0; }
.clana-filter__toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0;
	border: 0; background: none; cursor: pointer; color: var(--gcid-body-color);
	font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.clana-filter__toggle .clana-icon { width: 16px; height: 16px; transition: transform .3s; transform: rotate(45deg); }
.clana-filter.is-collapsed .clana-filter__toggle .clana-icon { transform: none; }
.clana-filter.is-collapsed .clana-filter__options { display: none; }
.clana-filter__options { display: flex; flex-wrap: wrap; gap: 6px; }
.clana-filter--list .clana-filter__options { flex-direction: column; gap: 2px; }
.clana-filter__option { position: relative; display: inline-flex; cursor: pointer; }
.clana-filter__option input { position: absolute; opacity: 0; pointer-events: none; }
.clana-filter__option .clana-filter__label {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
	border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 20px; background: #fff;
	font-size: 12px; line-height: 1.3; transition: all .2s;
}
.clana-filter__option.is-child .clana-filter__label { font-size: 11.5px; }
.clana-filter--chips .clana-filter__option.is-child { margin-left: 10px; }
.clana-filter--list .clana-filter__option .clana-filter__label { border-radius: 6px; border-color: transparent; background: none; padding-left: 28px; position: relative; }
.clana-filter--list .clana-filter__option .clana-filter__label::before {
	content: ""; position: absolute; left: 6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
	border: 1px solid var(--gcid-primary-color); border-radius: 3px; background: #fff;
}
.clana-filter--list .clana-filter__option input:checked + .clana-filter__label::before { background: var(--gcid-primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / 11px no-repeat; }
.clana-filter__option:hover .clana-filter__label { border-color: var(--gcid-primary-color); }
.clana-filter__option input:checked + .clana-filter__label { background: var(--gcid-heading-color); border-color: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
.clana-filter--list .clana-filter__option input:checked + .clana-filter__label { background: none; color: var(--gcid-body-color); font-weight: 600; }
.clana-filter__option input:focus-visible + .clana-filter__label { outline: 2px solid color-mix(in srgb, var(--gcid-primary-color) 80%, #000); outline-offset: 2px; }
.clana-filter__swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.clana-filter__count { margin-left: -2px; font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; }
.clana-filter__count:empty { display: none; }
.clana-filter--list .clana-filter__label { width: 100%; }
.clana-filter--list .clana-filter__count { margin-left: auto; font-size: 11px; }
.clana-filter__option.is-empty { opacity: .4; }
.clana-filter__option.is-empty input:not(:checked) + .clana-filter__label { pointer-events: none; }

.clana-archive__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; min-height: 28px; }
.clana-archive__count { font-size: 12px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-archive__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.clana-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
	border: 0; border-radius: 14px; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); color: var(--gcid-body-color);
	font-size: 11.5px; cursor: pointer;
}
.clana-chip .clana-icon { width: 14px; height: 14px; }
.clana-chip:hover { background: var(--gcid-secondary-color); }
.clana-chip--reset { background: none; text-decoration: underline; padding-left: 4px; }

.clana-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 36px 20px; }
.clana-archive--projets .clana-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 56px) clamp(16px, 1.4vw, 26px); }
@media (min-width: 981px) and (max-width: 1200px) { .clana-archive--projets .clana-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clana-archive--articles .clana-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3vw, 56px) clamp(16px, 1.4vw, 26px); }
@media (min-width: 981px) and (max-width: 1200px) { .clana-archive--articles .clana-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clana-archive__grid > [data-item].is-hidden { display: none; }
.clana-archive__grid > [data-item].is-entering { animation: clanaCardIn .5s var(--ease-out) both; animation-delay: var(--enter-delay, 0ms); }
@keyframes clanaCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.clana-archive__empty { padding: 60px 20px; text-align: center; border: 1px dashed color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: var(--radius); }
.clana-archive__empty p { margin-bottom: 18px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-archive__more { display: flex; justify-content: center; margin-top: 44px; }

@media (max-width: 980px) {
	.clana-archive__layout { grid-template-columns: minmax(0, 1fr); }
	.clana-archive__filters {
		position: fixed; inset: 0 0 0 auto; z-index: 10020; top: 0;
		display: flex; flex-direction: column;
		width: min(400px, 92vw); max-height: none; padding: 0;
		background: var(--gcid-uihz1ci5s4); box-shadow: -20px 0 50px -20px color-mix(in srgb, var(--gcid-heading-color) 40%, transparent);
		transform: translateX(105%); transition: transform .4s var(--ease-inout); visibility: hidden;
	}
	.clana-archive.is-filters-open .clana-archive__filters { transform: none; visibility: visible; }
	.clana-archive__filters-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); }
	.clana-archive__filters-title { font-family: var(--et_global_heading_font); font-size: 26px; }
	.clana-archive__filters-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); cursor: pointer; }
	.clana-archive__filters-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
	.clana-archive__filters-foot { display: flex; padding: 14px 20px; border-top: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); }
	.clana-archive__filters-foot .clana-btn--solid { display: inline-flex; flex: 1; }
	.clana-archive.is-filters-open::before { content: ""; position: fixed; inset: 0; z-index: 10019; background: color-mix(in srgb, var(--gcid-heading-color) 45%, transparent); }
	.clana-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
	.clana-archive--projets .clana-archive__grid { grid-template-columns: minmax(0, 1fr); }
	.clana-archive--articles .clana-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}
@media (min-width: 981px) { .clana-archive__filters-btn { display: none; } }
@media (min-width: 600px) and (max-width: 980px) { .clana-archive--projets .clana-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   FICHE ARTICLE
   ========================================================================== */
.clana-product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: 28px 0 var(--section); align-items: start; }
.clana-product__gallery { position: sticky; top: calc(var(--clana-sticky-top, 0px) + 20px); }
.clana-product__title { margin-bottom: 14px; }
.clana-article-price { font-size: 17px; margin-bottom: 20px; }
.clana-product__excerpt { color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); margin-bottom: 28px; max-width: 520px; }
.clana-product__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-bottom: var(--section); }
.clana-product__more > :only-child { grid-column: 1 / -1; max-width: 820px; }
.clana-product__description h2, .clana-conditions__title { margin-bottom: 18px; }
@media (max-width: 980px) {
	.clana-product, .clana-product__more { grid-template-columns: minmax(0, 1fr); }
	.clana-product__gallery { position: static; }
}

/* Galerie */
.clana-gallery__main { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius); background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-gallery__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; cursor: zoom-in; }
.clana-gallery__slide.is-active { opacity: 1; visibility: visible; }
.clana-gallery__slide img, .clana-gallery__variant img { width: 100%; height: 100%; object-fit: cover; }
.clana-gallery__variant { position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); animation: clanaFade .4s ease; }
@keyframes clanaFade { from { opacity: 0; } }
.clana-gallery__nav {
	position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 8px; background: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color); cursor: pointer;
	transform: translateY(-50%); opacity: 0; transition: opacity .25s, background-color .25s, color .25s;
}
.clana-gallery__nav:hover { background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
.clana-gallery__nav .clana-arrow-h { width: 18px; height: 18px; }
.clana-gallery__nav.is-prev { left: 14px; }
.clana-gallery__nav.is-next { right: 14px; }
.clana-gallery__main:hover .clana-gallery__nav, .clana-gallery__nav:focus-visible { opacity: 1; }
@media (hover: none) { .clana-gallery__nav { opacity: 1; } }
.clana-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.clana-gallery__thumbs::-webkit-scrollbar { display: none; }
.clana-gallery__thumb { position: relative; flex: 0 0 clamp(56px, 5.6vw, 76px); aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.clana-gallery__thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; transition: border-color .2s; }
.clana-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clana-gallery__thumb:hover::after { border-color: var(--gcid-secondary-color); }
.clana-gallery__thumb.is-active::after { border: 2px solid var(--gcid-heading-color); }

/* Configurateur : encadré des choix ([clana_article_options]) */
.clana-config--options { display: grid; gap: 22px; margin: 0 0 22px; padding: clamp(16px, 1.6vw, 22px); border: 1px solid var(--gcid-secondary-color); border-radius: 8px; background: none; }
.clana-config__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--gcid-heading-color); }
.clana-config__selected { font-weight: 400; text-transform: none; font-size: 13px; color: var(--gcid-body-color); }
.clana-config fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.clana-config legend { float: left; width: 100%; }
.clana-config legend + * { clear: both; }
.clana-config__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.clana-config__choices:has(.clana-config__swatch) { gap: 18px; padding: 5px; }
.clana-config__choice { position: relative; margin: 0; cursor: pointer; }
.clana-config__choice input { position: absolute; opacity: 0; pointer-events: none; }
.clana-config__choice-text {
	display: inline-flex; align-items: baseline; gap: 4px; min-width: 48px; padding: 6px 11px;
	border: 1px solid var(--gcid-secondary-color); border-radius: 4px; background: transparent; font-size: 13px; line-height: 1.2; text-align: center; color: var(--gcid-heading-color);
	transition: background-color .2s, border-color .2s, color .2s;
}
.clana-config__choice-text small { font-size: 12px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-config__choice:hover .clana-config__choice-text { border-color: var(--gcid-heading-color); }
.clana-config__choice input:checked + .clana-config__choice-text { border-color: var(--gcid-heading-color); background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
.clana-config__choice input:checked + .clana-config__choice-text small { color: color-mix(in srgb, var(--gcid-uihz1ci5s4) 75%, transparent); }
.clana-config__choice.is-unavailable { cursor: not-allowed; opacity: .45; }
.clana-config__choice.is-unavailable .clana-config__choice-text { border-style: dashed; }
.clana-config__choice.is-unavailable:hover .clana-config__choice-text { border-color: var(--gcid-secondary-color); }
.clana-config__choice input:focus-visible + * { outline: 2px solid color-mix(in srgb, var(--gcid-primary-color) 80%, #000); outline-offset: 2px; }
.clana-config__swatch { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--swatch, #ddd); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); transition: box-shadow .2s; }
.clana-config__choice input:checked + .clana-config__swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px #fff, 0 0 0 5px var(--gcid-heading-color); }
.clana-config select, .clana-config__text { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 8px; background: #fff; font-size: 14px; color: var(--gcid-body-color); }
.clana-config__error { margin-top: 8px; font-size: 12px; color: #b4432f; }
.clana-config__attr.has-error .clana-config__choice-text, .clana-config__attr.has-error select, .clana-config__attr.has-error .clana-config__text { border-color: #b4432f; }
.clana-config input.clana-config__text { padding: 0 14px; }
.clana-config__text::placeholder { color: color-mix(in srgb, var(--gcid-body-color) 55%, transparent); }
.clana-config__optional { font-size: 12px; font-weight: 400; text-transform: none; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-config__attr.has-error { animation: clanaShake .4s; }
@keyframes clanaShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.clana-config__options { display: grid; gap: 12px; }
.clana-config__options > legend { margin-bottom: 0; }
.clana-config__check { display: flex; align-items: flex-start; gap: 9px; margin: 0; cursor: pointer; }
.clana-config__check input { position: absolute; opacity: 0; pointer-events: none; }
.clana-config__check-box { flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border: 1px solid var(--gcid-heading-color); border-radius: 3px; background: transparent; color: transparent; transition: background-color .2s, color .2s; }
.clana-config__check-box .clana-icon { width: 13px; height: 13px; }
.clana-config__check input:checked + .clana-config__check-box { background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
.clana-config__check input:focus-visible + .clana-config__check-box { outline: 2px solid color-mix(in srgb, var(--gcid-primary-color) 80%, #000); outline-offset: 2px; }
.clana-config__check-text { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; }
.clana-config__check-text strong { font-weight: 700; color: var(--gcid-heading-color); }
.clana-config__check-text small { color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); font-size: 12px; }
.clana-config__option-price { font-size: 12px; color: var(--gcid-primary-color);font-weight:600; }
.clana-config__option-text { margin: 12px 0 0 26px; }
.clana-config__option-text label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--gcid-body-color); }
.clana-config__option-text input, .clana-config__note textarea {
	width: 100%; padding: 9px 12px; border: 1px solid var(--gcid-secondary-color); border-radius: 4px; background: #fff; font-size: 14px; color: var(--gcid-body-color);
}
.clana-stepper { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: 8px; background: #fff; }
.clana-stepper button { display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; background: none; color: var(--gcid-body-color); cursor: pointer; }
.clana-stepper button .clana-icon { width: 16px; height: 16px; }
.clana-stepper button:disabled { opacity: .3; cursor: default; }
.clana-stepper input { width: 46px; height: 44px; padding: 0; border: 0; background: none; text-align: center; font-size: 15px; font-weight: 600; color: var(--gcid-body-color); -moz-appearance: textfield; }
.clana-stepper input::-webkit-outer-spin-button, .clana-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clana-stepper--small button { width: 32px; height: 34px; }
.clana-stepper--small input { width: 36px; height: 34px; font-size: 14px; }
/* Configurateur : quantité, estimation et bouton ([clana_article_achat]) */
.clana-buy { container-type: inline-size; }
.clana-buy__grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
.clana-buy__summary { display: grid; gap: 22px; }
.clana-buy-part .clana-stepper, .clana-buy .clana-stepper { border-color: var(--gcid-secondary-color); border-radius: 6px; background: transparent; }
.clana-buy .clana-stepper button, .clana-buy-part .clana-stepper button { width: 32px; height: 40px; color: var(--gcid-secondary-color); transition: color .2s; }
.clana-buy-part .clana-stepper button:not(:disabled):hover, .clana-buy .clana-stepper button:not(:disabled):hover { color: var(--gcid-heading-color); }
.clana-buy .clana-stepper button .clana-icon, .clana-buy-part .clana-stepper button .clana-icon { width: 12px; height: 12px; }
.clana-buy .clana-stepper input, .clana-buy-part .clana-stepper input { width: 32px; height: 40px; font-size: 14px; font-weight: 500; color: var(--gcid-heading-color); }
.clana-buy__estimate .clana-config__label { margin-bottom: 6px; }
.clana-buy__price { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(48px, 4.4vw, 68px); font-weight: 400; line-height: 1; color: var(--gcid-heading-color); }
.clana-buy__price .clana-price__amount { font-weight: 400; color: inherit; }
.clana-buy__price .clana-price__from { display: block; margin-bottom: 4px; font-family: var(--et_global_body_font); font-size: 12px; line-height: 1.3; }
.clana-buy__price .clana-price--request { font-size: .45em; font-style: normal; }
.clana-buy__unit { display: block; margin-top: 6px; font-size: 12px; color: var(--gcid-body-color); }
.clana-buy__detail { display: block; width: 0; min-width: 100%; margin-top: 2px; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-buy__detail span { display: block; }
.clana-buy__stock { display: block; margin-top: 6px; font-size: 12px; color: var(--gcid-primary-color); }
.clana-buy__action { display: grid; gap: 12px; }
.clana-config__note summary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding-bottom: 2px; border-bottom: 1px solid currentColor; list-style: none; cursor: pointer; font-size: 12px; line-height: 1.4; color: var(--gcid-heading-color); transition: color .2s; }
.clana-config__note summary::-webkit-details-marker { display: none; }
.clana-config__note summary .clana-icon { flex: none; width: 12px; height: 12px; transition: transform .35s var(--ease-out); }
.clana-config__note summary:hover .clana-icon { transform: rotate(90deg); }
.clana-config__note[open]:not(.is-closing) summary .clana-icon { transform: rotate(135deg); }
.clana-config__note[open]:not(.is-closing) summary:hover .clana-icon { transform: rotate(225deg); }
.clana-config__note summary:hover { color: var(--gcid-primary-color); }
.clana-config__note-body { overflow: hidden; padding-top: 10px; }
.clana-config__note textarea { display: block; margin: 0; resize: vertical; }
.clana-config__submit { justify-content: space-between; width: 100%; min-height: 54px; padding-inline: 18px 16px; font-size: clamp(12px, .95vw, 15px); white-space: nowrap; }
.clana-config__submit .clana-btn__plus { font-size: 1.15em; }
.clana-config__submit.is-added { background: #5f7a5b; border-color: #5f7a5b; }
.clana-config__help { margin: 0; padding: 0; font-size: 12px; line-height: 1.45; color: var(--gcid-body-color); }
.clana-config-all > .clana-config--options { margin-bottom: 22px; }
/* Colonne étroite (selon la largeur du bloc, pas de l'écran) : quantité et estimation côte à côte, bouton dessous. */
@container (max-width: 520px) {
	.clana-buy__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.clana-buy__summary { grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 16px 24px; }
	.clana-buy__estimate { text-align: right; }
	.clana-buy__estimate .clana-config__label { justify-content: flex-end; }
	.clana-buy__price .clana-price__from { margin-bottom: 2px; }
}

/* Détails, conditions */
.clana-details { display: grid; margin: 28px 0 0; padding: 4px clamp(14px, 1.4vw, 18px); border: 1px solid var(--gcid-secondary-color); border-radius: 8px; }
.clana-details > div { display: grid; gap: 3px; padding: 14px 0; }
.clana-details > div + div { border-top: 1px solid var(--gcid-secondary-color); }
.clana-details dt { margin: 0; padding: 0; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--gcid-heading-color); }
.clana-details dd { margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--gcid-body-color); }
.clana-accordion { display: grid; gap: 6px; }
.clana-accordion__item { padding: 0 clamp(12px, 1.2vw, 16px); border: 1px solid var(--gcid-secondary-color); border-radius: 6px; background: none; }
.clana-accordion__item summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--gcid-heading-color); }
.clana-accordion__item summary::-webkit-details-marker { display: none; }
.clana-accordion__badge { flex: none; padding: 3px 8px; border-radius: 3px; background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.clana-accordion__item summary .clana-icon { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--gcid-primary-color); transition: transform .3s var(--ease-out); }
.clana-accordion__item[open]:not(.is-closing) summary .clana-icon { transform: rotate(45deg); }
.clana-accordion__content { overflow: hidden; padding: 0; font-size: 13px; line-height: 1.5; color: var(--gcid-body-color); }
.clana-accordion__content > :last-child { margin-bottom: 0; padding-bottom: 0; }
.clana-accordion__content::after { content: ""; display: block; height: 14px; }
.clana-conditions__more { margin: 10px 0 0; padding: 0; }
.clana-product__about .clana-details { margin-top: clamp(20px, 2vw, 32px); }
.clana-article-events, .clana-similaires { padding: 0 0 var(--section); }

/* En situation */
.clana-situation { padding-bottom: var(--section); }
.clana-situation__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.clana-situation__grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.clana-situation__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.clana-situation__grid--2 .clana-situation__item a[data-lightbox] { aspect-ratio: 1; }
.clana-situation__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clana-situation__item { margin: 0; }
.clana-situation__item a[data-lightbox] { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); cursor: zoom-in; }
.clana-situation__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.clana-situation__item a:hover img { transform: scale(1.04); }
.clana-situation__item figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 10px; font-size: 12.5px; }
@media (max-width: 767px) { .clana-situation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clana-vu-projets, .clana-similaires { padding: 0 0 var(--section); }

/* ==========================================================================
   FICHE PROJET
   ========================================================================== */
.clana-projet-hero { position: relative; display: flex; align-items: flex-end; min-height: min(86svh, 760px); color: #fff; isolation: isolate; }
.clana-projet-hero__media { position: absolute; inset: 0; z-index: -1; }
.clana-projet-hero__media img, .clana-projet-hero__media .clana-img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.clana-projet-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--gcid-heading-color) 82%, transparent), color-mix(in srgb, var(--gcid-heading-color) 10%, transparent) 60%, color-mix(in srgb, var(--gcid-heading-color) 20%, transparent)); }
.clana-projet-hero__content { padding: 140px 0 clamp(36px, 6vw, 64px); }
.clana-projet-hero__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #fff; }
.clana-projet-hero__back:hover { color: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-projet-hero__back .clana-icon { width: 16px; height: 16px; }
.clana-projet-hero__title { color: #fff; max-width: 900px; margin-bottom: 26px; }
.clana-projet-meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; }
.clana-projet-meta__item dt { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; opacity: .75; }
.clana-projet-meta__item dt .clana-icon { width: 14px; height: 14px; }
.clana-projet-meta__item dd { margin: 4px 0 0; font-size: 14px; }
.clana-projet-story { max-width: 760px; padding: var(--section) 0 calc(var(--section) * .6); }
.clana-projet-intro { margin-bottom: 28px; }
.clana-projet-description > :last-child { margin-bottom: 0; padding-bottom: 0; }
.clana-projet-story .clana-eyebrow { margin-bottom: 16px; }
.clana-projet-story * + .clana-eyebrow { margin-top: clamp(32px, 4vw, 56px); }
.clana-fournisseurs { display: grid; grid-template-columns: max-content 1fr; gap: 3px clamp(24px, 3vw, 48px); margin: 0; font-size: 12.5px; line-height: 1.35; }
.clana-fournisseurs__row { display: contents; }
.clana-fournisseurs dt { color: var(--gcid-body-color); font-weight: 400; }
.clana-fournisseurs dd { margin: 0; color: var(--gcid-heading-color); font-weight: 700; }
.clana-fournisseurs a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
.clana-fournisseurs a:hover { background-size: 100% 1px; }

/* Hotspots */
.clana-main--projet .clana-hotspots { padding-bottom: calc(var(--section) * .6); }
.clana-hotspots__help {
	position: absolute; z-index: 3; left: clamp(12px, 1.4vw, 24px); bottom: clamp(12px, 1.4vw, 24px);
	display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); margin: 0; padding: 10px !important;
	border-radius: 999px; background: color-mix(in srgb, var(--gcid-uihz1ci5s4) 82%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px -14px rgba(82, 76, 70, .35);
	font-size: 10px; font-weight: 500; line-height: 1.25; color: var(--gcid-heading-color);
	pointer-events: none; transition: opacity .5s ease, transform .6s var(--ease-out);
}
.clana-hotspots-seen .clana-hotspots__help { opacity: 0; transform: translateY(8px); }
.clana-hotspots__help-touch { display: none; }
@media (hover: none) { .clana-hotspots__help-hover { display: none; } .clana-hotspots__help-touch { display: inline; } }
.clana-hotspots__pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gcid-primary-color); }
.clana-hotspots__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gcid-primary-color); animation: clanaPulse 2s infinite; }
.clana-hotspots__figure { margin: 0 0 32px; }
.clana-hotspots__figure:last-child { margin-bottom: 0; }
.clana-hotspots__stage { position: relative; overflow: hidden; border-radius: var(--radius); }
.clana-hotspots__stage > img { display: block; width: 100%; height: auto; }
.clana-hotspots__figure figcaption { padding-top: 10px; font-size: 12.5px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-hotspot {
	position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; margin: -22px 0 0 -22px;
	border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.clana-hotspot__dot { position: absolute; inset: 11px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .3s var(--ease-out), background-color .3s; }
.clana-hotspot__dot::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--gcid-primary-color); }
.clana-hotspot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); animation: clanaPulse 2.2s infinite; pointer-events: none; }
.clana-hotspot:hover .clana-hotspot__dot, .clana-hotspot[aria-expanded="true"] .clana-hotspot__dot { transform: scale(1.2); }
.clana-hotspot[aria-expanded="true"] .clana-hotspot__dot::before { background: var(--gcid-heading-color); }
@keyframes clanaPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
/* Carte d'un point : la carte d'article de « Les articles de cette fête », dans une bulle crème */
.clana-hotspot-card {
	position: absolute; z-index: 5; width: 240px; padding: 10px 10px 14px; box-sizing: border-box;
	border-radius: calc(var(--radius) + 4px); background: var(--gcid-uihz1ci5s4); color: var(--gcid-body-color);
	box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--gcid-heading-color) 55%, transparent);
	animation: clanaPop .3s var(--ease-out);
}
@keyframes clanaPop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.clana-hotspot-card__close {
	position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
	border: 0; border-radius: 50%; background: color-mix(in srgb, var(--gcid-uihz1ci5s4) 92%, transparent); color: var(--gcid-heading-color); cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(82, 76, 70, .4);
}
.clana-hotspot-card__close .clana-icon { width: 14px; height: 14px; }
.clana-hotspot-card .clana-card--article .clana-card__body { padding-inline: 4px; }
.clana-hotspot-card .clana-card--article .clana-card__title { font-size: 15px; padding-right: 0; }
.clana-hotspot-card .clana-card__actions { padding-inline: 4px; }
@media (max-width: 600px) {
	.clana-hotspot-card { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; padding: 10px; z-index: 10030; }
	.clana-hotspot-card .clana-card--article { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: 1fr auto; column-gap: 14px; }
	.clana-hotspot-card .clana-card--article .clana-card__media { grid-row: 1 / span 2; align-self: start; }
	.clana-hotspot-card .clana-card--article .clana-card__body { padding: 2px 34px 0 0; }
	.clana-hotspot-card .clana-card--article .clana-card__title a::after { inset: 0 0 40px; }
	.clana-hotspot-card .clana-card__actions { grid-column: 2; padding: 6px 0 0; }
	.clana-hotspot-card .clana-card__arrow { display: none; }
	.clana-hotspot-card__close { top: 8px; right: 8px; }
}

/* Galerie projet (maçonnerie) */
.clana-main--projet .clana-projet-galerie { padding-bottom: var(--section); }
.clana-masonry { columns: 3 280px; column-gap: 16px; }
.clana-masonry__item { display: block; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius); break-inside: avoid; cursor: zoom-in; }
.clana-masonry__item img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease-out); }
.clana-masonry__item:hover img { transform: scale(1.03); }
/* Photos d'événements de la fiche article : le clic mène au projet */
.clana-masonry__item.clana-event-photo { position: relative; cursor: pointer; text-decoration: none; }
.clana-event-photo__overlay {
	position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 48px clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 18px);
	background: linear-gradient(to top, color-mix(in srgb, var(--gcid-heading-color) 75%, transparent), transparent);
	color: var(--gcid-uihz1ci5s4); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s var(--ease-out);
}
.clana-event-photo:is(:hover, :focus-visible) .clana-event-photo__overlay { opacity: 1; transform: none; }
.clana-event-photo__title { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; }
.clana-event-photo__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
@media (hover: none) { .clana-event-photo__overlay { opacity: 1; transform: none; } }
.clana-hotspots__figure[id] { scroll-margin-top: calc(var(--clana-sticky-top, 0px) + 100px); }

/* Tout le look */
.clana-main--projet .clana-look { padding-bottom: var(--section); }
.clana-look__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.clana-look__intro { flex: 1 1 420px; max-width: 620px; }
.clana-look__title { margin: 0 0 12px; padding: 0; font-family: "Instrument Serif", serif; font-size: var(--fs-h2); font-weight: 400; line-height: 1.05; color: var(--gcid-heading-color); }
.clana-look__text { margin: 0; padding: 0; max-width: 460px; color: var(--gcid-body-color); }
.clana-look__cta { display: grid; gap: 10px; width: max-content; max-width: 100%; }
.clana-look__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	min-height: 52px; padding: 0 20px; border: 1px solid var(--gcid-secondary-color); border-radius: var(--radius);
	background: transparent; color: var(--gcid-heading-color); cursor: pointer;
	font-family: var(--et_global_body_font); font-size: clamp(.75rem, .7rem + .15vw, .875rem); font-weight: 700; letter-spacing: 0; line-height: 1.2; text-align: left; text-transform: uppercase; text-decoration: none;
	transition: background-color .25s, border-color .25s, color .25s;
}
.clana-look__btn .clana-icon { flex: none; width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.clana-look__btn:hover { border-color: var(--gcid-heading-color); }
.clana-look__btn:hover .clana-icon { transform: translate(2px, -2px); }
.clana-look__btn--solid { border-color: var(--gcid-primary-color); background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); }
.clana-look__btn--solid:hover { border-color: var(--gcid-heading-color); background: var(--gcid-heading-color); }
.clana-look__btn--solid:hover .clana-icon { transform: rotate(90deg); }
.clana-look__note { margin: 0; padding: 0; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-look__cta .clana-look__note { width: 0; min-width: 100%; text-align: right; }
.clana-look__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.4vw, 24px); }
.clana-look__item { display: flex; flex-direction: column; }
.clana-look__item > .clana-card { flex: 1; }
@media (max-width: 1200px) { .clana-look__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .clana-look__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .clana-look__cta { width: 100%; } .clana-look__cta .clana-look__note { text-align: left; } .clana-look__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Partenaires d'un projet */
.clana-projet-partenaires { padding-bottom: var(--section); }
.clana-projet-partenaires .clana-section-head__title { margin-bottom: 24px; }
.clana-partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.clana-partner-grid li { list-style: none; }
.clana-partner-grid .clana-partner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 20px; border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: var(--radius); background: #fff; transition: border-color .2s, transform .3s var(--ease-out); }
.clana-partner-grid a.clana-partner:hover { border-color: var(--gcid-primary-color); transform: translateY(-3px); }
.clana-partner-grid .clana-partner__logo { height: 44px; width: auto; max-width: 150px; object-fit: contain; }
.clana-partner__meta { display: grid; gap: 2px; font-size: 13px; }
.clana-partner__meta small { color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); font-size: 11.5px; }

/* ==========================================================================
   LISTE — TIROIR, POPUP, TOAST
   ========================================================================== */
.clana-drawer { position: fixed; inset: 0; z-index: 10040; }
.clana-drawer[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.clana-drawer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--gcid-heading-color) 45%, transparent); opacity: 0; transition: opacity .35s; }
.clana-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
	width: min(440px, 100%); background: var(--gcid-uihz1ci5s4); box-shadow: -30px 0 60px -30px color-mix(in srgb, var(--gcid-heading-color) 50%, transparent);
	transform: translateX(100%); transition: transform .45s var(--ease-inout); outline: none;
}
.clana-drawer.is-open .clana-drawer__backdrop { opacity: 1; }
.clana-drawer.is-open .clana-drawer__panel { transform: none; }
.admin-bar .clana-drawer__panel { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 980px) { .admin-bar .clana-archive__filters { top: var(--wp-admin--admin-bar--height, 0px); } }
.clana-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid var(--gcid-secondary-color); }
.clana-drawer__title { margin: 0; padding: 0; font-size: var(--fs-h2); font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1; color: var(--gcid-heading-color); }
.clana-drawer__count { font-family: var(--et_global_body_font); font-size: 13px; color: var(--gcid-primary-color); }
.clana-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--gcid-secondary-color); border-radius: 6px; background: transparent; cursor: pointer; color: var(--gcid-heading-color); transition: border-color .2s, background-color .2s, color .2s; }
.clana-drawer__close:hover { border-color: var(--gcid-heading-color); background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); }
.clana-drawer__close .clana-icon { width: 16px; height: 16px; }
.clana-drawer__body { flex: 1; overflow-y: auto; padding: 4px 24px; overscroll-behavior: contain; }
.clana-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; text-align: center; font-size: 14px; color: var(--gcid-body-color); }
.clana-drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--gcid-secondary-color); background: none; }
.clana-drawer__foot .clana-btn { width: 100%; }
.clana-drawer__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 0; }
.clana-drawer__total span { font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--gcid-heading-color); }
.clana-drawer__total strong { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(36px, 3vw, 44px); font-weight: 400; line-height: 1; color: var(--gcid-heading-color); }
.clana-drawer__note { margin: 8px 0 16px; padding: 0; font-size: 12px; line-height: 1.45; color: var(--gcid-body-color); }

.clana-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 60%, transparent); }
.clana-line:last-child { border-bottom: 0; }
.clana-line__media { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-line__media img { width: 100%; height: 100%; object-fit: cover; }
.clana-line__title { margin: 0; font-family: var(--et_global_body_font); font-size: 14px; font-weight: 600; line-height: 1.3; }
.clana-line__title a { color: var(--gcid-heading-color); text-decoration: none; transition: color .2s; }
.clana-line__title a:hover { color: var(--gcid-primary-color); }
.clana-line__meta { margin: 3px 0 0; font-size: 12px; color: var(--gcid-body-color); line-height: 1.45; }
.clana-line__controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.clana-line__remove { display: inline-flex; align-items: center; gap: 4px; padding: 0 0 1px; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: 12px; line-height: 1.3; color: var(--gcid-body-color); cursor: pointer; transition: color .2s; }
.clana-line__remove:hover { color: var(--gcid-primary-color); }
.clana-line__price { font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; color: var(--gcid-heading-color); }
.clana-line__price small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--gcid-body-color); }
.clana-line .clana-stepper { border-color: var(--gcid-secondary-color); border-radius: 6px; background: transparent; }
.clana-line .clana-stepper button { color: var(--gcid-secondary-color); transition: color .2s; }
.clana-line .clana-stepper button:not(:disabled):hover { color: var(--gcid-heading-color); }
.clana-line .clana-stepper button .clana-icon { width: 12px; height: 12px; }
.clana-line .clana-stepper input { font-weight: 500; color: var(--gcid-heading-color); }

.clana-added-popup { text-align: center; }
.clana-added-popup__check { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); color: color-mix(in srgb, var(--gcid-primary-color) 80%, #000); }
.clana-added-popup__check .clana-icon { width: 26px; height: 26px; }
.clana-added-popup__title { font-size: 34px; margin-bottom: 18px; }
.clana-added-popup__item { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 22px; border-radius: 10px; background: var(--gcid-uihz1ci5s4); text-align: left; }
.clana-added-popup__item img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; flex: none; }
.clana-added-popup__item strong { display: block; font-size: 14px; }
.clana-added-popup__item span { font-size: 12px; color: var(--gcid-body-color); }
.clana-added-popup__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clana-added-popup__actions .clana-btn { padding-inline: 12px; }
@media (max-width: 480px) { .clana-added-popup__actions { grid-template-columns: 1fr; } }

.clana-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 10050;
	max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px;
	background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4); font-size: 13px;
	transform: translate(-50%, 140%); opacity: 0; transition: transform .4s var(--ease-out), opacity .4s;
	pointer-events: none;
}
.clana-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   PAGE « MA LISTE »
   ========================================================================== */
.clana-liste { width: 100%; }
.clana-liste__notice { margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: #FFF4E5; color: #7A4B12; font-size: 13px; }
.clana-liste__loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--gcid-body-color); font-size: 13px; }
.clana-liste__table { border-top: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); }
.clana-liste .clana-line { grid-template-columns: 96px minmax(0, 1fr) 130px; gap: 20px; padding: 20px 0; }
.clana-liste .clana-line__media { width: 96px; height: 118px; }
.clana-liste .clana-line__title { font-size: 16px; }
.clana-liste .clana-line .clana-line__meta { margin: 2px 0 0 !important; padding: 0; }
.clana-liste .clana-line__controls { gap: 14px; margin-top: 12px; }
.clana-liste .clana-stepper--small button { width: 26px; height: 30px; }
.clana-liste .clana-stepper--small input { width: 26px; height: 30px; font-size: 13px; }
.clana-line__note { max-width: 560px; margin-top: 12px; }
.clana-line.is-invalid { opacity: .55; }
.clana-liste__empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px 24px; text-align: center; border: 1px dashed color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: var(--radius-lg); color: var(--gcid-body-color); }
.clana-liste__empty p { max-width: 460px; }
.clana-liste__foot { padding-top: 22px; }
.clana-liste__total { display: flex; justify-content: space-between; align-items: baseline; }
.clana-liste__total-label { display: flex; flex-direction: column; gap: 2px; }
.clana-liste__total-label span { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.clana-liste__total-label small { font-size: 13px; color: var(--gcid-body-color); }
.clana-liste__total strong { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(44px, 4vw, 60px); font-weight: 400; line-height: 1; color: var(--gcid-heading-color); }
.clana-liste__disclaimer { margin: 6px 0 18px; font-size: 12px; color: var(--gcid-body-color); max-width: 620px; }
.clana-liste__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.clana-liste__back { padding: 10px 18px 10px 14px; }
.clana-liste__back .clana-arrow-h { width: 16px; height: 16px; }
.clana-liste__clear { gap: 8px; padding-right: 0; }
.clana-liste__clear .clana-icon { width: 16px; height: 16px; }
.clana-liste__clear:hover .clana-icon { transform: rotate(90deg); }
@media (max-width: 600px) {
	.clana-liste .clana-line { grid-template-columns: 76px minmax(0, 1fr); }
	.clana-liste .clana-line__media { width: 76px; height: 94px; }
	.clana-liste .clana-line__price { grid-column: 2; text-align: left; }
}

/* ==========================================================================
   OFFRES ET FORFAITS
   ========================================================================== */
.clana-offres { padding: calc(var(--section) * .5) 0; }
.clana-services-list { display: grid; gap: clamp(40px, 6vw, 80px); }
.clana-offre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); padding-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); }
.clana-offre:last-child { border-bottom: 0; }
.clana-offre__subtitle { margin-top: 8px; font-size: 14px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-offre__price, .clana-forfait__price { display: flex; flex-direction: column; margin-top: 22px; }
.clana-offre__price span, .clana-forfait__price span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-offre__price strong, .clana-forfait__price strong { font-family: var(--et_global_heading_font); font-size: clamp(40px, 5vw, 56px); font-weight: 400; line-height: 1; }
.clana-offre__media { margin-top: 26px; overflow: hidden; border-radius: var(--radius); }
.clana-offre__content { font-size: 15px; }
.clana-offre__content p + p { margin-top: .9em; }
.clana-offre__body .clana-btn { margin-top: 28px; }
.clana-offre__notes { margin: 22px 0 0; padding: 0; list-style: none; font-size: 12px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-offre__notes li { position: relative; padding-left: 14px; list-style: none; }
.clana-offre__notes li + li { margin-top: 4px; }
.clana-offre__notes li::before { content: "*"; position: absolute; left: 0; color: var(--gcid-primary-color); }
@media (min-width: 981px) { .clana-offre__aside { position: sticky; top: calc(var(--clana-sticky-top, 0px) + 30px); align-self: start; } }
@media (max-width: 980px) { .clana-offre { grid-template-columns: minmax(0, 1fr); } }

.clana-forfaits { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.clana-forfait { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); border: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); border-radius: var(--radius-lg); background: var(--gcid-4ol5s8yce5); transition: transform .4s var(--ease-out), box-shadow .4s; }
.clana-forfait:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.clana-forfait__head { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 50%, var(--gcid-uihz1ci5s4)); }
.clana-forfait__eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: color-mix(in srgb, var(--gcid-primary-color) 80%, #000); margin-bottom: 8px; }
.clana-forfait__title { font-size: 30px; }
.clana-forfait__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.clana-forfait__list li { display: flex; gap: 10px; list-style: none; line-height: 1.4; }
.clana-forfait__list .clana-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--gcid-primary-color); }
.clana-forfait .clana-offre__notes { margin-top: auto; padding-top: 22px; }
.clana-forfait > .clana-btn { margin-top: 22px; width: 100%; }
@media (max-width: 980px) { .clana-forfait { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .clana-forfait { flex-basis: 100%; } }

/* Forfait + options à activer ([clana_forfait_option]) : .is-on sur l'option et ses inclusions, .has-pins sur la carte */
.clana-fo {
	--fo-r: clamp(10px, .9vw, 18px);
	--fo-pad: clamp(28px, 3.4vw, 64px);
	--fo-title: clamp(2rem, 1.4rem + 1.4vw, 2.875rem);
	--fo-line: color-mix(in srgb, var(--gcid-secondary-color) 35%, transparent);
	--fo-soft: color-mix(in srgb, var(--gcid-body-color) 74%, transparent);
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden;
	border-radius: calc(var(--fo-r) + 6px); background: var(--gcid-uihz1ci5s4); box-shadow: var(--shadow-soft);
	color: var(--gcid-heading-color);
}
/* En-tête : nom et sous-titre à gauche, prix (mis à jour selon les options) à droite du groupe */
.clana-fo__body { display: flex; flex-direction: column; padding: var(--fo-pad); }
.clana-fo__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 2vw, 32px); }
.clana-fo p { margin: 0; padding: 0; }
.clana-fo .clana-fo__name { grid-column: 1; padding: 0; font-family: "Instrument Serif", Georgia, serif; font-size: var(--fo-title); font-weight: 400; line-height: 1; color: var(--gcid-heading-color); }
.clana-fo__sub { grid-column: 1; margin-top: 6px !important; color: var(--fo-soft); }
.clana-fo__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 !important; text-align: right; }
.clana-fo__price > span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--fo-soft); }
.clana-fo__price strong { display: block; overflow: hidden; font-family: "Instrument Serif", Georgia, serif; font-size: var(--fo-title); font-weight: 400; line-height: 1; }
.clana-fo__price [data-clana-fo-total] { display: inline-block; }
.clana-fo__price .is-bump { animation: clanaFoBump .5s var(--ease-out); }
.clana-fo__label {
	margin: clamp(16px, 1.4vw, 24px) 0 8px !important; padding-top: clamp(16px, 1.4vw, 24px) !important;
	border-top: 1px solid color-mix(in srgb, var(--gcid-secondary-color) 65%, transparent);
	font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
}

.clana-fo__list { margin: 0; padding: 0!important; list-style: none; }
.clana-fo__list li { position: relative; padding: 7px 0 7px 30px; border-bottom: 1px solid var(--fo-line); list-style: none; }
.clana-fo__list li::before {
	content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--gcid-secondary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fcf2e7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.clana-fo__list li.is-extra {
	display: grid; grid-template-rows: 0fr; padding-block: 0; border-bottom-color: transparent; opacity: 0; visibility: hidden;
	transition: grid-template-rows .5s var(--ease-out), padding .5s var(--ease-out), opacity .4s, border-color .4s, visibility 0s linear .5s;
}
.clana-fo__list li.is-extra > span { overflow: hidden; }
.clana-fo__list li.is-extra::before { background-color: var(--gcid-primary-color); }
.clana-fo__list li.is-extra em {
	margin-left: 8px; padding: 2px 8px; border-radius: 99px;
	background: color-mix(in srgb, var(--gcid-primary-color) 18%, transparent);
	font-size: 11px; font-style: normal; font-weight: 600; text-transform: uppercase; color: var(--gcid-primary-color);
}
.clana-fo__list li.is-extra.is-on {
	grid-template-rows: 1fr; padding-block: 7px; border-bottom-color: var(--fo-line); opacity: 1; visibility: visible;
	transition: grid-template-rows .5s var(--ease-out), padding .5s var(--ease-out), opacity .4s, border-color .4s;
}

/* Options côte à côte : interrupteur et prix en haut, texte dessous sur toute la largeur */
.clana-fo__addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: clamp(16px, 1.4vw, 24px); }
.clana-fo__addon {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "switch price" "text text"; gap: 14px 16px; align-content: start; align-items: center;
	padding: clamp(16px, 1.4vw, 24px);
	border: 1px dashed var(--gcid-secondary-color); border-radius: var(--fo-r); cursor: pointer;
	transition: border-color .3s, background-color .3s;
}
.clana-fo__addon:hover { border-color: var(--gcid-primary-color); }
.clana-fo__addon.is-on { border-style: solid; border-color: var(--gcid-primary-color); background: color-mix(in srgb, var(--gcid-primary-color) 7%, var(--gcid-uihz1ci5s4)); }
.clana-fo__addon input { position: absolute; opacity: 0; pointer-events: none; }
.clana-fo__switch { grid-area: switch; position: relative; width: 42px; height: 24px; border-radius: 99px; background: var(--gcid-secondary-color); transition: background-color .3s; }
.clana-fo__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gcid-uihz1ci5s4); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .4s var(--ease-out); }
.clana-fo__addon.is-on .clana-fo__switch { background: var(--gcid-primary-color); }
.clana-fo__addon.is-on .clana-fo__switch::after { transform: translateX(18px); }
.clana-fo__addon input:focus-visible + .clana-fo__switch { outline: 2px solid var(--gcid-primary-color); outline-offset: 3px; }
.clana-fo__addon-over { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--gcid-primary-color); }
.clana-fo__addon-title { display: block; margin-top: 2px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; }
.clana-fo__addon-desc { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--fo-soft); }
.clana-fo__addon-text { grid-area: text; }
.clana-fo__addon-price { grid-area: price; justify-self: end; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.5rem, 1.2rem + .8vw, 2.125rem); line-height: 1; white-space: nowrap; }
/* Notes propres à l'option : dépliées seulement quand l'option est activée */
.clana-fo__addon-notes { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-out), opacity .4s; }
.clana-fo__addon-notes > span { overflow: hidden; }
.clana-fo__addon-notes small { display: block; padding-top: 6px; font-size: 12px; line-height: 1.45; color: var(--fo-soft); }
.clana-fo__addon-notes small:first-child { padding-top: 10px; }
.clana-fo__addon.is-on .clana-fo__addon-notes { grid-template-rows: 1fr; opacity: 1; }

.clana-fo__notes { margin: clamp(14px, 1.2vw, 20px) 0 0 !important; padding: 0 !important; list-style: none; }
.clana-fo__notes li { padding: 0; font-size: var(--fs-small); line-height: 1.45; list-style: none; color: var(--fo-soft); }
.clana-fo__notes li::before { content: "*"; margin-right: 4px; color: var(--gcid-primary-color); }
.clana-fo__notes li + li { margin-top: 4px; }
.clana-fo__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: clamp(18px, 1.6vw, 28px); }
.clana-fo--media-left { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.clana-fo--media-left .clana-fo__media { order: -1; }
/* Plusieurs cartes à la suite : côte à côte, image entière au-dessus (contain, sur le fond crème), boutons alignés en bas.
   Le cadre prend la taille réelle de l'image pour que les pastilles restent sur leurs objets. */
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(12px, 1vw, 20px); }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo { --fo-pad: clamp(18px, 1.6vw, 30px); display: flex; flex-direction: column; }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__media { order: -1; flex: none; display: grid; place-items: center; aspect-ratio: 1.38; min-height: 0; margin: var(--fo-pad) var(--fo-pad) 0; background: none; }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__frame { position: relative; inset: auto; display: block; width: 100%; }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__frame > img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__body { flex: 1; padding-top: clamp(14px, 1.2vw, 22px); }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__foot { margin-top: auto; padding-top: clamp(18px, 1.6vw, 28px); }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__notes { margin-top: auto !important; padding-top: clamp(14px, 1.2vw, 20px) !important; }
:has(> .clana-fo:not(.clana-fo--stack) + .clana-fo) > .clana-fo .clana-fo__notes + .clana-fo__foot { margin-top: 0; }
@keyframes clanaFoBump { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-40%); opacity: 0; } 55% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }

.clana-fo__media { position: relative; min-height: 100%; background: color-mix(in srgb, var(--gcid-secondary-color) 25%, var(--gcid-uihz1ci5s4)); }
.clana-fo__frame { position: absolute; inset: 0; }
.clana-fo__frame > img, .clana-fo__frame > .clana-img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.clana-fo__media:has(.clana-fo__caption)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--gcid-heading-color) 55%, transparent)); pointer-events: none; }
.clana-fo__caption { position: absolute; z-index: 2; left: clamp(18px, 2vw, 36px); right: clamp(18px, 2vw, 36px); bottom: clamp(18px, 2vw, 36px); color: var(--gcid-uihz1ci5s4); }
.clana-fo__caption b { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.375rem, 1.1rem + .8vw, 2rem); font-weight: 400; line-height: 1.1; }
.clana-fo__caption span { display: block; margin-top: 6px; font-size: var(--fs-small); opacity: .85; }
.clana-fo__when-on, .clana-fo.has-pins .clana-fo__when-off { display: none !important; }
.clana-fo.has-pins .clana-fo__when-on { display: block !important; }
.clana-fo__pin {
	position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px;
	padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--gcid-uihz1ci5s4);
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--gcid-heading-color) 60%, transparent);
	font-size: 12px; font-weight: 600; white-space: nowrap;
	opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .4s, transform .6s var(--ease-out);
}
/* Palette de couleurs fixe, imprimée dans l'image (aucune interaction) */
.clana-fo__palette {
	position: absolute; z-index: 3; right: 3vw; bottom: 3vw; display: flex;
	padding: 8px 10px; border-radius: 10px; background: #fff; pointer-events: none;
	box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--gcid-heading-color) 45%, transparent);
}
.clana-fo__palette.is-placed { right: auto; bottom: auto; left:7vw; top:2vw;}
.clana-fo__palette i { width: clamp(20px, 1.5vw, 28px); aspect-ratio: 1; margin-right: -5px; border: 2px solid #fff; border-radius: 50%; background: var(--c); }
.clana-fo__palette i:last-child { margin-right: 0; }
.clana-fo__pin i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); font-size: 13px; font-style: normal; }
.clana-fo__pin small { font-size: inherit; font-weight: 400; color: var(--fo-soft); }
.clana-fo.has-pins .clana-fo__pin { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

@media (max-width: 980px) {
	.clana-fo, .clana-fo--media-left { grid-template-columns: minmax(0, 1fr); }
	.clana-fo__media { min-height: 380px; order: -1; }
}
@media (max-width: 640px) {
	.clana-fo__pin small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.clana-fo *, .clana-fo *::before, .clana-fo *::after { transition: none !important; animation: none !important; }
}

/* Forfaits empilés + option commune collante ([clana_forfaits_liste]) : mêmes cartes que [clana_forfait_option],
   image à gauche et contenu à droite. L'option (hors des cartes) s'applique à tous les forfaits. */
.clana-ff {
	--fo-r: clamp(10px, .9vw, 18px);
	--fo-soft: color-mix(in srgb, var(--gcid-body-color) 74%, transparent);
	color: var(--gcid-heading-color);
}
.clana-ff__layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 440px); gap: clamp(20px, 2vw, 40px); align-items: start; }
.clana-ff__aside { position: sticky; z-index: 5; top: calc(var(--clana-sticky-top, 0px) + var(--header-h, 96px) + 24px); }
.clana-ff__aside .clana-fo__addon:not(.is-on) { background: var(--gcid-uihz1ci5s4); }
/* Option à gauche : seulement l'ordre visuel, l'option reste après les forfaits dans le HTML (barre du bas sur mobile) */
.clana-ff--option-left .clana-ff__layout { grid-template-columns: clamp(300px, 24vw, 440px) minmax(0, 1fr); }
.clana-ff--option-left .clana-ff__aside { order: -1; }
.clana-fo__addon-price { text-align: right; }
.clana-fo__addon-price small { display: block; font-family: var(--et_global_body_font); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--fo-soft); }
.clana-ff__cards { display: grid; gap: clamp(12px, 1vw, 20px); }
/* Intertitre (forfaits thématiques) : h6 avec pastille, comme les surtitres du site */
.clana-ff .clana-ff__group { margin: clamp(40px, 4vw, 72px) 0 clamp(18px, 1.6vw, 28px); padding: 0; text-transform: uppercase; }
.clana-ff__group::before { content: ""; display: inline-block; width: .7em; height: .7em; margin: -.15em 1em 0 0; border-radius: 50%; background: var(--gcid-primary-color); vertical-align: middle; }

.clana-fo--stack { --fo-pad: clamp(18px, 1.6vw, 30px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fo-pad); padding: var(--fo-pad); }
.clana-fo--stack .clana-fo__body { padding: 0; }
.clana-fo--stack .clana-fo__media { overflow: hidden; border-radius: var(--fo-r); }
.clana-fo--stack .clana-fo__frame > img { object-position: 50% var(--y, 50%); }
.clana-fo--stack .clana-fo__foot { margin-top: auto; padding-top: clamp(18px, 1.6vw, 28px); }
/* Forfait mis de l'avant : fond foncé */
.clana-fo--dark {
	--fo-soft: color-mix(in srgb, var(--gcid-uihz1ci5s4) 70%, transparent);
	--fo-line: color-mix(in srgb, var(--gcid-uihz1ci5s4) 16%, transparent);
	background: var(--gcid-heading-color); color: var(--gcid-uihz1ci5s4);
}
.clana-fo--dark .clana-fo__name { color: var(--gcid-uihz1ci5s4); }
.clana-fo--dark .clana-fo__label { border-top-color: var(--fo-line); }
.clana-fo--dark .clana-fo__list li::before { background-color: var(--gcid-primary-color); }
.clana-fo--dark .clana-fo__list li.is-extra em { background: color-mix(in srgb, var(--gcid-secondary-color) 22%, transparent); color: var(--gcid-secondary-color); }

.clana-ff__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: clamp(28px, 2.6vw, 48px) 0 0 !important; padding: 0 !important; list-style: none; font-size: var(--fs-small); text-align: center; color: var(--fo-soft); }
.clana-ff__notes li { padding: 0; list-style: none; }
.clana-ff__notes li::before { content: "*"; margin-right: 6px; color: var(--gcid-primary-color); }

@media (max-width: 980px) {
	/* L'option devient une barre compacte collée au bas de l'écran pendant le défilement des forfaits */
	.clana-ff__layout, .clana-ff--option-left .clana-ff__layout { grid-template-columns: minmax(0, 1fr); }
	.clana-ff__aside, .clana-ff--option-left .clana-ff__aside { order: 0; top: auto; bottom: 12px; }
	.clana-ff__aside .clana-fo__addon { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "switch text price"; padding: 12px 16px; box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--gcid-heading-color) 55%, transparent); }
	.clana-ff__aside :is(.clana-fo__addon-over, .clana-fo__addon-desc, .clana-fo__addon-notes) { display: none; }
	.clana-ff__aside .clana-fo__addon-price { font-size: 1.5rem; }
	.clana-fo.clana-fo--stack { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.clana-fo--stack .clana-fo__media { min-height: 100%; }
}
@media (max-width: 680px) {
	.clana-fo.clana-fo--stack { grid-template-columns: minmax(0, 1fr); }
	.clana-fo--stack .clana-fo__media { aspect-ratio: 4 / 3; min-height: 0; }
	.clana-ff__aside .clana-fo__addon-price small { display: none; }
}

/* Éléments du décor : photo avec repères ([clana_elements_photo]) et liste liée au survol ([clana_elements_liste]).
   .is-focus sur les deux blocs du groupe, .is-on sur le repère et la ligne du même numéro. */
.clana-el-photo { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: clamp(10px, .9vw, 18px); }
.clana-el-photo > img, .clana-el-photo > .clana-img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clana-el-photo::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--gcid-heading-color) 0%, transparent); transition: background-color .5s; pointer-events: none; }
/* Bureau : la photo reste à l'écran pendant qu'on parcourt la liste de la colonne voisine. Le sticky est posé
   sur la colonne Divi (calée en haut) : la rangée, à la hauteur de la liste, est le seul parent assez haut. */
@media (min-width: 981px) {
	.et_pb_row > .et_pb_column:has(.clana-el-photo) { position: sticky; top: calc(var(--clana-sticky-top, 0px) + var(--header-h, 96px) + 24px); align-self: flex-start; }
}
.clana-el-photo.is-focus::after { background: color-mix(in srgb, var(--gcid-heading-color) 25%, transparent); }
.clana-el-spot {
	position: absolute; z-index: 2; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 12px 4px 4px; translate: -15px -50%; border: 0; border-radius: 99px;
	background: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color);
	font-size: var(--fs-small); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--gcid-heading-color) 80%, transparent);
	transform-origin: 15px 50%; transition: transform .4s var(--ease-out), background-color .3s, color .3s, opacity .4s;
}
.clana-el-spot b { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); font-size: 11px; transition: background-color .3s, color .3s; }
/* Chiffres centrés sur leur hauteur réelle (HK Gothic les place un peu haut dans sa boîte de ligne) */
.clana-el-spot b, .clana-el-list__item > b { line-height: 1; text-box: trim-both cap alphabetic; }
.clana-el-spot b::before { content: ""; position: absolute; inset: -5px; border: 1px solid var(--gcid-primary-color); border-radius: 50%; animation: clanaElPulse 2.4s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes clanaElPulse { 0% { transform: scale(.7); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* Entrée en cascade par animation (pas de transition-delay) : le survol reste instantané une fois les repères affichés */
html.js-reveal .clana-el-photo:not(.revealed) .clana-el-spot { opacity: 0; }
html.js-reveal .clana-el-photo.revealed .clana-el-spot { animation: clanaElSpotIn .6s var(--ease-out) var(--d, 0s) backwards; }
@keyframes clanaElSpotIn { from { opacity: 0; transform: scale(.85); } }
.clana-el-photo.is-focus .clana-el-spot { opacity: .45; }
.clana-el-photo.is-focus .clana-el-spot.is-on { opacity: 1; transform: scale(1.08); background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); }
.clana-el-photo.is-focus .clana-el-spot.is-on b { background: var(--gcid-uihz1ci5s4); color: var(--gcid-primary-color); }

.clana-el-list { --el-line: color-mix(in srgb, currentColor 22%, transparent); margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--el-line); list-style: none; }
.clana-el-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: clamp(14px, 1.2vw, 20px) 0; border-bottom: 1px solid var(--el-line); list-style: none; transition: opacity .3s; }
.clana-el-list__item > b { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--el-line); border-radius: 50%; font-size: 11px; transition: background-color .3s, border-color .3s, color .3s; }
.clana-el-list .clana-el-list__title { margin: 0; padding: 0; font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; color: inherit; }
.clana-el-list .clana-el-list__text { margin: 0 !important; padding: 0; font-size: var(--fs-small); color: color-mix(in srgb, currentColor 72%, transparent); }
.clana-el-list.is-focus .clana-el-list__item { opacity: .45; }
.clana-el-list.is-focus .clana-el-list__item.is-on { opacity: 1; }
.clana-el-list.is-focus .clana-el-list__item.is-on > b { background: var(--gcid-primary-color); border-color: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); }

/* Mode placement (?placer=1, connecté) */
.clana-el-photo.is-placing .clana-el-spot { opacity: 1 !important; cursor: grab; touch-action: none; animation: none; }
.clana-el-photo.is-placing .clana-el-spot.is-dragging { cursor: grabbing; background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); }
.clana-el-placer { margin-top: 12px; padding: 14px; border: 1px dashed var(--gcid-primary-color); border-radius: 10px; background: var(--gcid-uihz1ci5s4); color: var(--gcid-heading-color); font-size: 12px; }
.clana-el-placer p { margin: 0 0 8px !important; padding: 0; }
.clana-el-placer textarea { display: block; width: 100%; padding: 8px; border: 1px solid var(--gcid-secondary-color); border-radius: 6px; background: transparent; color: inherit; font: 12px/1.4 ui-monospace, monospace; resize: vertical; }
.clana-el-placer button { margin-top: 8px; padding: 6px 14px; border: 0; border-radius: 99px; background: var(--gcid-primary-color); color: var(--gcid-uihz1ci5s4); font-size: 12px; font-weight: 600; cursor: pointer; }

@media (max-width: 680px) {
	/* Petite photo : numéros seulement, la liste donne les noms */
	.clana-el-spot { padding: 4px; translate: -50% -50%; }
	.clana-el-spot span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.clana-el-spot b::before { animation: none; }
}

/* ==========================================================================
   PAGES : légal, plan du site
   ========================================================================== */
.clana-legal__section + .clana-legal__section { margin-top: 56px; }
.clana-legal__section h2 { margin-bottom: 20px; }
.clana-legal__list { margin: 0; padding-left: 1.2em; }
.clana-legal__list li + li { margin-top: 18px; }
.clana-legal__list h3 { font-family: var(--et_global_body_font); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.clana-legal__note { margin-top: 20px; font-size: 13px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); }
.clana-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.clana-sitemap h2 { margin-bottom: 12px; }
.clana-sitemap ul { margin: 0; padding: 0; list-style: none; }
.clana-sitemap li { list-style: none; padding: 4px 0; font-size: 14px; }

/* Formulaire de service sur la page Demande */
.clana-page .clana-form { margin-bottom: 40px; }

/* ==========================================================================
   RÉSEAUX SOCIAUX — [clana_social]
   ========================================================================== */
.clana-social { display: flex; gap: 12px; }
.clana-social a { display: grid; place-items: center; width: 28px; height: 28px; color: color-mix(in srgb, var(--gcid-primary-color) 80%, #000); transition: color .2s, transform .3s var(--ease-out); }
.clana-social a:hover { color: var(--gcid-heading-color); transform: translateY(-2px); }
.clana-social .clana-icon { width: 20px; height: 20px; }

/* ==========================================================================
   PANNEAUX SERVICES (accueil)
   Rangée Divi « clana-svc-panels » : une colonne « clana-svc-head » (surtitre, titre, introduction) puis des
   colonnes cliquables « clana-svc-panel » (arrière-plan photo ou texture, module Image facultatif pour une
   illustration, module Texte : h3 + description). Bureau : le panneau ouvert (.is-open, géré par
   svc-panels.js) s'élargit, son image se pose, son texte monte et le carré flèche apparaît en bas à droite.
   Mobile et écrans tactiles : panneaux empilés, tout visible.
   ========================================================================== */
@property --svc-veil { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.clana-svc-panels {
	--svc-gap: clamp(10px, .8vw, 16px);
	--svc-pad: 2vw;
	--svc-icon: clamp(40px, 2.8vw, 54px);
	--svc-width: .95s cubic-bezier(.5, 0, .15, 1);
	--svc-out: cubic-bezier(.16, 1, .3, 1);
	row-gap: clamp(30px, 3vw, 60px) !important; column-gap: var(--svc-gap) !important;
}

/* En-tête : titre à gauche, introduction à droite, alignés sur la ligne du bas */
.et_pb_column.clana-svc-head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38ch); align-items: end; gap: clamp(14px, 1vw, 20px) 40px;
	flex: 0 0 100% !important; width: 100% !important; max-width: none !important;
}
.clana-svc-head > .et_pb_module { grid-column: 1; margin: 0 !important; }
.clana-svc-head > .et_pb_module:last-child:not(:nth-child(-n+2)) { grid-column: 2; grid-row: 1 / span 2; }
.clana-svc-head > .et_pb_module:last-child:not(:nth-child(-n+2)) p { font-size: clamp(14px, .85vw, 16px); line-height: 1.55; color: color-mix(in srgb, var(--gcid-uihz1ci5s4) 80%, transparent); }

/* Panneau : copie du fond (::before) qui peut grossir, voile + dégradé (::after) qui gardent le texte lisible */
.et_pb_column.clana-svc-panel { position: relative; isolation: isolate; overflow: hidden; cursor: pointer; padding: var(--svc-pad) !important; }
.clana-svc-panel::before,
.clana-svc-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.clana-svc-panel::before { background: inherit; }
.clana-svc-panel::after {
	background:
		linear-gradient(color-mix(in srgb, var(--gcid-heading-color) var(--svc-veil), transparent) 0 0),
		linear-gradient(to top,
			color-mix(in srgb, var(--gcid-heading-color) 88%, transparent) 0%,
			color-mix(in srgb, var(--gcid-heading-color) 30%, transparent) 45%,
			transparent 70%);
}
/* Illustration (module Image) : centrée dans le haut du panneau, entière */
.clana-svc-panel .et_pb_image {
	position: absolute !important; inset: var(--svc-pad) var(--svc-pad) 36%; z-index: -1;
	width: auto !important; max-width: none !important; margin: 0 !important; pointer-events: none;
}
.clana-svc-panel .et_pb_image :is(.et_pb_image_wrap, img) { display: block; width: 100% !important; height: 100% !important; }
.clana-svc-panel .et_pb_image img { object-fit: contain !important; }

.clana-svc-panel .et_pb_text,
.clana-svc-panel .et_pb_text_inner { position: static; }
.clana-svc-panel .et_pb_text_inner > h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.clana-svc-panel .et_pb_text_inner > p { max-width: 44ch; margin: clamp(10px, .8vw, 14px) 0 0 !important; padding: 0; font-size: clamp(14px, .85vw, 16px); line-height: 1.55; }
/* Carré flèche en bas à droite, même animation que l'icône des cartes du carrousel de projets (.clana-card__arrow,
   variables dans style.css) : au survol, le carré apparaît en montant (comme l'overlay des cartes), la flèche du
   texte (::after) sort en haut à droite et celle du module (::after) arrive d'en bas à gauche. À la sortie, le
   carré s'efface pendant que les flèches reviennent. Le carré est le ::before du texte ; les trois se placent
   sur le panneau. --svc-icon-fade porte le fondu (sur ordinateur seulement).
   Sans bordure, la case des flèches couvre tout le carré : leur découpe reprend l'arrondi du carré, sinon la
   pointe déborde des coins en sortant en haut à droite et en entrant en bas à gauche. */
.et_pb_column.clana-svc-panel { --arrow-btn-size: var(--svc-icon); --arrow-btn-icon-size: 46%; --svc-icon-radius: clamp(6px, .45vw, 9px); --svc-icon-fade: opacity 0s; }
.clana-svc-panel .et_pb_text_inner::before,
.clana-svc-panel .et_pb_text_inner::after,
.clana-svc-panel .et_pb_text:has(> .et_pb_text_inner > h3)::after {
	content: ""; position: absolute; right: var(--svc-pad); bottom: var(--svc-pad);
	width: var(--arrow-btn-size); height: var(--arrow-btn-size); pointer-events: none;
}
.clana-svc-panel .et_pb_text_inner::before {
	border-radius: var(--svc-icon-radius); background: var(--gcid-primary-color);
	transition: var(--svc-icon-fade);
}
.clana-svc-panel .et_pb_text_inner::after,
.clana-svc-panel .et_pb_text:has(> .et_pb_text_inner > h3)::after {
	display: block; clear: none;
	background: var(--gcid-uihz1ci5s4);
	-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 round var(--svc-icon-radius));
	will-change: transform;
	transition: var(--svc-icon-fade), transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}
.clana-svc-panel .et_pb_text:has(> .et_pb_text_inner > h3)::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) round var(--svc-icon-radius));
	transition: var(--svc-icon-fade), transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
.clana-svc-panel:is(:hover, :focus-within) .et_pb_text_inner::after {
	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 round var(--svc-icon-radius));
	transition: var(--svc-icon-fade), transform var(--arrow-btn-out), clip-path var(--arrow-btn-out);
}
.clana-svc-panel:is(:hover, :focus-within) .et_pb_text:has(> .et_pb_text_inner > h3)::after {
	transform: translate(0, 0); clip-path: inset(0 round var(--svc-icon-radius));
	transition: var(--svc-icon-fade), transform var(--arrow-btn-in), clip-path var(--arrow-btn-in);
}

@media (min-width: 981px) and (hover: hover) {
	.et_pb_column.clana-svc-panel {
		--svc-veil: 28%;
		flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0;
		height: clamp(460px, 32vw, 620px);
	}
	.clana-svc-panel::before,
	.clana-svc-panel .et_pb_image { transform: scale(1.08); transform-origin: 50% 60%; }
	.clana-svc-panel .et_pb_text_inner > h3 { transform: translateY(var(--svc-desc-h, 0px)); }
	/* Description à largeur fixe : elle ne se recompose pas pendant que le panneau s'élargit */
	.clana-svc-panel .et_pb_text_inner > p { width: clamp(300px, 29vw, 560px); max-width: none; opacity: 0; transform: translateY(calc(var(--svc-desc-h, 0px) * .5 + 12px)); }
	/* Carré flèche visible seulement au survol, avec le fondu de l'overlay des cartes du carrousel */
	.et_pb_column.clana-svc-panel { --svc-icon-fade: opacity .45s var(--ease-out), translate .45s var(--ease-out); }
	.clana-svc-panel .et_pb_text_inner::before,
	.clana-svc-panel .et_pb_text_inner::after,
	.clana-svc-panel .et_pb_text:has(> .et_pb_text_inner > h3)::after { opacity: 0; translate: 0 10px; }
	.clana-svc-panel:is(:hover, :focus-within) .et_pb_text_inner::before,
	.clana-svc-panel:is(:hover, :focus-within) .et_pb_text_inner::after,
	.clana-svc-panel:is(:hover, :focus-within) .et_pb_text:has(> .et_pb_text_inner > h3)::after { opacity: 1; translate: none; }

	/* Panneau ouvert (sans JavaScript : le premier) */
	.clana-svc-panel.is-open,
	.clana-svc-panels:not(:has(.is-open)) .clana-svc-panel:nth-child(1 of .clana-svc-panel) { --svc-veil: 0%; flex-grow: 2.4 !important; }
	:is(.clana-svc-panel.is-open, .clana-svc-panels:not(:has(.is-open)) .clana-svc-panel:nth-child(1 of .clana-svc-panel)) :is(.et_pb_text_inner > h3, .et_pb_text_inner > p),
	.clana-svc-panel.is-open::before,
	.clana-svc-panel.is-open .et_pb_image { opacity: 1; transform: none; }

	/* Mouvements (après la mise en place, pour ne rien animer au chargement) */
	.clana-svc-panels.is-ready .clana-svc-panel { transition: flex-grow var(--svc-width), --svc-veil .9s; }
	.clana-svc-panels.is-ready .clana-svc-panel::before,
	.clana-svc-panels.is-ready .clana-svc-panel .et_pb_image { transition: transform 1.6s var(--svc-out); }
	.clana-svc-panels.is-ready .clana-svc-panel .et_pb_text_inner > h3 { transition: transform .8s var(--svc-out); }
	.clana-svc-panels.is-ready .clana-svc-panel .et_pb_text_inner > p { transition: opacity .2s, transform .5s var(--svc-out); }
	.clana-svc-panels.is-ready .clana-svc-panel.is-open .et_pb_text_inner > h3 { transition: transform 1s var(--svc-out) .15s; }
	.clana-svc-panels.is-ready .clana-svc-panel.is-open .et_pb_text_inner > p { transition: opacity .6s .45s, transform 1s var(--svc-out) .4s; }
}
@media (max-width: 980px), (hover: none) {
	.clana-svc-panels { --svc-pad: clamp(20px, 4vw, 32px); }
	.et_pb_column.clana-svc-head { grid-template-columns: minmax(0, 1fr); }
	.clana-svc-head > .et_pb_module:last-child:not(:nth-child(-n+2)) { grid-column: 1; grid-row: auto; margin-top: 16px !important; }
	.et_pb_column.clana-svc-panel { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-height: clamp(460px, 120vw, 620px); }
	.clana-svc-panel .et_pb_image { bottom: 45%; }
	.clana-svc-panel .et_pb_text_inner { padding-right: calc(var(--svc-icon) + 12px); }
	.clana-svc-panel::after {
		background: linear-gradient(to top,
			color-mix(in srgb, var(--gcid-heading-color) 92%, transparent) 0%,
			color-mix(in srgb, var(--gcid-heading-color) 55%, transparent) 55%,
			transparent 85%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.clana-svc-panels .clana-svc-panel, .clana-svc-panel::before, .clana-svc-panel .et_pb_image,
	.clana-svc-panel .et_pb_text_inner > *, .clana-svc-panel .et_pb_text_inner::before, .clana-svc-panel .et_pb_text_inner::after,
	.clana-svc-panel .et_pb_text::after { transition: none !important; }
}

/* ==========================================================================
   POPUP MARKETING
   ========================================================================== */
.clana-marketing-popup { padding: 0; width: min(760px, calc(100% - 32px)); }
.clana-marketing-popup.has-image { display: grid; grid-template-columns: 1fr 1.1fr; }
.clana-marketing-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.clana-marketing-popup__body { padding: clamp(28px, 4vw, 48px); align-self: center; }
.clana-marketing-popup__title { margin-bottom: 12px; }
.clana-marketing-popup__text { font-size: 14px; color: color-mix(in srgb, var(--gcid-body-color) 75%, transparent); margin-bottom: 22px; }
@media (max-width: 600px) { .clana-marketing-popup.has-image { grid-template-columns: 1fr; } .clana-marketing-popup__media { max-height: 200px; overflow: hidden; } }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.clana-lightbox { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; background: rgba(34, 31, 29, .94); opacity: 0; transition: opacity .3s; }
.clana-lightbox.is-open { opacity: 1; }
.clana-lightbox__figure { position: relative; margin: 0; max-width: min(92vw, 1400px); max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.clana-lightbox__img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; transition: opacity .25s; }
.clana-lightbox__img.is-loading { opacity: .3; }
.clana-lightbox__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--gcid-uihz1ci5s4); text-align: center; }
.clana-lightbox__caption a { color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.clana-lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s; }
.clana-lightbox__btn:hover { background: rgba(255, 255, 255, .25); }
.clana-lightbox__btn .clana-icon { width: 20px; height: 20px; }
.clana-lightbox__close { top: 18px; right: 18px; }
.clana-lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.clana-lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.clana-lightbox__counter { position: absolute; top: 30px; left: 24px; font-size: 12px; color: rgba(255, 255, 255, .7); }
@media (max-width: 600px) { .clana-lightbox__prev, .clana-lightbox__next { top: auto; bottom: 18px; transform: none; } }