/*
Theme Name: Urbexe
Description: Le site d'urbexe.com sans Elementor : même direction artistique, mêmes contenus, servis par un thème léger.
Version: 1.0.0
Author: Clément Quatravaux
Text Domain: urbexe
Requires PHP: 8.1
*/

/* ═════ 1 · POLICES (servies par le thème) ═════ */

@font-face { font-family: "Livvic"; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/livvic-600.woff2) format("woff2"); }
@font-face { font-family: "Livvic"; font-style: normal; font-weight: 700; font-display: swap; src: url(polices/livvic-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(polices/plus-jakarta-sans.woff2) format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(polices/raleway.woff2) format("woff2"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(polices/raleway-italique.woff2) format("woff2"); }

/* ═════ 2 · LES COULEURS ET LES MESURES (kit Elementor d'origine) ═════ */

:root {
	--encre: #424242;
	--jaune: #FFCE73;
	--blanc: #fff;
	--gris: #EDEDED;          /* rgba(66,66,66,.09) sur blanc : les grands blocs gris */
	--gris-clair: #F9F9F9;    /* rgba(66,66,66,.03) : les petites cases */
	--filet: #DADADA;
	--doux: #6b6b6b;
	--titre: "Plus Jakarta Sans", "Raleway", sans-serif;
	--texte: "Raleway", sans-serif;
	--rayon: 5px;
	--pilule: 30px;
	--marge: 5vw;
}

/* ═════ 3 · BASE ═════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--encre); font: 400 16px/1.5 var(--texte); }
img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; color: var(--encre); }
h1 { font-size: 36px; font-weight: 700; }
h2 { font-size: 28px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
.fiche-titre { font-size: 27px; line-height: 1.18; font-weight: 700; }
.bandeau h2, .voisines h2 { font-size: 22px; }
ins { text-decoration: none; }
del { font-size: 14px; opacity: .7; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 24px 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 1000; padding: 10px 16px; background: var(--blanc); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Les titres : Plus Jakarta Sans, sans-sérif nette (plus de point jaune final). */
h1, h2, h3, h4 { letter-spacing: -.02em; }

.enveloppe { width: 90%; max-width: 1600px; margin-inline: auto; }
.contenu { min-height: 50vh; }
.page-simple { padding: 24px 0 64px; }
.texte > *:first-child { margin-top: 0; }
.texte h2 { margin-top: 1.4em; }
.el-texte h2, .el-texte h3 { margin-top: 1.3em; }
.el-texte > :first-child { margin-top: 0; }
.texte ul, .texte ol { padding-left: 1.2em; }
.texte a, .el-texte a { text-decoration: underline; }
.petit { font-size: 12px; }

/* ═════ 4 · BOUTONS ET PASTILLES ═════ */

.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 10px 20px; border: 2px solid var(--encre); border-radius: var(--pilule);
	background: var(--encre); color: var(--blanc);
	font: 500 14px/1 var(--texte); letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color .2s, color .2s, transform .2s;
}
.bouton .icone { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.bouton:hover .icone { transform: translateX(3px); }
.bouton-blanc { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.bouton-jaune { background: var(--jaune); color: var(--encre); border-color: var(--jaune); }
.bouton-liseré { background: var(--blanc); color: var(--encre); font-weight: 700; font-size: 13px; padding: 14px 30px; width: 100%; }
.bouton-liseré:hover { background: var(--encre); color: var(--blanc); }
.bouton[disabled] { opacity: .6; cursor: wait; }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pastille {
	display: inline-block; padding: 3px 10px; border: 1px solid var(--encre); border-radius: var(--pilule);
	font-size: 10px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; background: var(--blanc);
}
.pastille-jaune { background: var(--jaune); border-color: var(--jaune); font-weight: 600; }

.lire-plus { display: flex; align-items: center; gap: 5px; margin: 4px 0 0 auto; padding: 0; border: 0; background: none; font-weight: 700; text-decoration: underline; cursor: pointer; }
.lire-plus::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.lire-plus.lire-moins::after { transform: rotate(180deg); }
.lire-plus[hidden] { display: none; }
.replie > :first-child, .description-courte.replie { max-height: 3em; line-height: 1.5em; overflow: hidden; }
.replie > :first-child > *, .description-courte.replie > * { line-height: 1.5em; }
.replie.court > :first-child, .description-courte.replie.court { max-height: none; }
/* Replié, la dernière ligne s'efface doucement : on voit que le texte continue. */
.replie:not(.court) > :first-child, .description-courte.replie:not(.court) { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
.lire-plus { transition: opacity .2s; }
.lire-plus:hover { opacity: .7; }
.description-courte + .lire-plus { margin-top: -18px; }

/* ═════ 5 · EN-TÊTE ═════ */

.barre-lecture { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; background: var(--jaune); transform: scaleX(0); transform-origin: 0 50%; z-index: 200; pointer-events: none; }
.entete { position: sticky; top: 0; z-index: 100; background: var(--blanc); border-bottom: 1px solid var(--gris); }
.entete-avis { background: var(--encre); color: var(--blanc); font-size: 13px; }
.entete-avis .enveloppe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 32px; gap: 12px; }
.entete-avis p { margin: 0; }
.entete-note { display: flex; align-items: center; gap: 6px; }
.entete-note .icone { width: 15px; height: 15px; color: var(--jaune); }
.entete-promo { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.entete-barre .enveloppe { display: flex; align-items: center; justify-content: space-between; min-height: 51px; gap: 24px; }
.entete-logo img { width: 130px; height: auto; }
.entete-burger { display: none; padding: 6px; border: 0; background: none; cursor: pointer; }
.entete-actions { display: flex; align-items: center; gap: 16px; }
.entete-loupe { display: grid; place-items: center; padding: 4px; border: 0; background: none; cursor: pointer; }
.entete-loupe .icone { width: 22px; height: 22px; }
.entete-panier { position: relative; display: flex; align-items: center; color: var(--encre); text-decoration: none; }
.panier-nombre { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--jaune); font-size: 10px; line-height: 16px; text-align: center; }

.menu-ordi > ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu-entree {
	display: flex; align-items: center; gap: 4px; padding: 14px 8px; border: 0; background: none; cursor: pointer;
	font: 400 14px/1.5 var(--texte); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--encre);
}
.menu-entree .icone { width: 12px; height: 12px; transition: transform .2s; }
.a-panneau.ouvert .menu-entree .icone { transform: rotate(180deg); }
.menu-panneau {
	position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc); border-top: 1px solid var(--gris);
	box-shadow: 0 18px 30px rgba(0, 0, 0, .08); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s;
}
.a-panneau.ouvert .menu-panneau { visibility: visible; opacity: 1; }
.menu-panneau-int { width: 90%; max-width: 1600px; margin: 0 auto; padding: 28px 0 32px; display: grid; gap: 8px 32px; grid-template-columns: repeat(var(--col, 4), minmax(0, 1fr)); max-height: 70vh; overflow: auto; }
.colonnes-1 { --col: 1; } .colonnes-2 { --col: 2; } .colonnes-3 { --col: 3; } .colonnes-4 { --col: 4; } .colonnes-5 { --col: 5; } .colonnes-6 { --col: 6; }
.menu-panneau-int.colonnes-1 { --col: 4; }
.menu-panneau-int.colonnes-1 .menu-liens { grid-column: 1 / -1; columns: 4; column-gap: 32px; }
.menu-liens { margin: 0; padding: 0; list-style: none; }
.menu-liens li { padding: 0 0 3px; break-inside: avoid; }
.menu-liens a { display: block; padding: 4px 0 4px 18px; position: relative; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.menu-liens a::before { content: "→"; position: absolute; left: 0; color: var(--encre); opacity: .6; }
.menu-liens a:hover { text-decoration: underline; }

/* Les fenêtres : menu du téléphone, filtres, recherche, vidéo, newsletter. */
dialog { padding: 0; border: 0; color: var(--encre); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.tiroir { margin: 0; width: min(420px, 92vw); height: 100dvh; max-height: none; }
.tiroir-int { padding: 56px 24px 32px; }
.tiroir-fermer, .fenetre-fermer { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; z-index: 2; }
.tiroir .accordeon summary { font-size: 14px; }
.tiroir .menu-liens a { font-size: 13px; }
.tiroir .bouton { width: 100%; margin-top: 20px; }
.filtres-recherche input { width: 100%; padding: 12px 14px; border: 1px solid var(--filet); border-radius: var(--rayon); font: inherit; margin-bottom: 12px; }

.fenetre-recherche { width: min(720px, 94vw); margin: 10vh auto auto; border-radius: var(--rayon); }
.fenetre-recherche form { display: flex; align-items: center; gap: 8px; padding: 12px 56px 12px 16px; border-bottom: 1px solid var(--gris); }
.fenetre-recherche input { flex: 1; min-width: 0; padding: 10px 4px; border: 0; font: 16px var(--texte); outline: none; }
.fenetre-recherche button[type=submit] { border: 0; background: none; padding: 6px; cursor: pointer; }
.suggestions { margin: 0; padding: 6px 0; list-style: none; max-height: 60vh; overflow: auto; }
.suggestions a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; }
.suggestions a:hover { background: var(--gris-clair); }
.suggestions img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.suggestions span { flex: 1; display: flex; flex-direction: column; }
.suggestions b { font-weight: 600; font-size: 14px; }
.suggestions small { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); }
.suggestions em { font-style: normal; font-weight: 700; font-size: 13px; }
.suggestions .vide { padding: 12px 16px; font-size: 14px; }

.fenetre-video { width: min(960px, 94vw); background: #000; }
.video-cadre { aspect-ratio: 16 / 9; position: relative; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fenetre-video .fenetre-fermer { color: var(--blanc); top: -44px; right: 0; }
.fenetre-video[open] { overflow: visible; }

.fenetre-lettre[open] { position: fixed; inset: auto 20px 20px auto; margin: 0; width: min(600px, calc(100vw - 40px)); display: grid; grid-template-columns: 1fr 1.2fr; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); z-index: 150; }
.fenetre-lettre-image img { width: 100%; height: 100%; object-fit: cover; }
.fenetre-lettre-texte { padding: 36px 28px 28px; }
.fenetre-lettre-titre { margin: 0 0 12px; font: 600 20px/1.25 var(--titre); letter-spacing: -.02em; color: var(--encre); }

/* ═════ 6 · ACCORDÉONS, FIL D'ARIANE ═════ */

.accordeon { border-top: 1px solid var(--filet); }
.accordeon:last-child { border-bottom: 1px solid var(--filet); }
.accordeon summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none;
	font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon-titre { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.accordeon-titre::after { content: none !important; }
.accordeon summary .icone { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.accordeon[open]:not(.accordeon-ferme) > summary .icone { transform: rotate(90deg); }
.tiroir .accordeon[open]:not(.accordeon-ferme) > summary .icone, .filtre-deroulant[open] > summary .icone { transform: rotate(180deg); }
.accordeon summary .icone { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.accordeon[open] > .accordeon-corps { animation: apparait .35s ease-out; }
.accordeon-ferme > .accordeon-corps { opacity: 0; transition: opacity .2s; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }
.accordeon-corps { padding: 4px 0 16px; font-size: 14px; }
.accordeon-corps .accordeon { margin-left: 8px; }

/* Le fil d'Ariane : un seul, toujours au même endroit, juste sous l'en-tête (urx_haut_de_page). */
.ariane-haut { padding-top: 14px; padding-bottom: 4px; }
.ariane-haut:empty { display: none; }
.ariane-haut .ariane p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--doux); }
.ariane-haut .ariane a { color: var(--encre); }

/* Le motif « carte » du haut des fiches et des listes : derrière le contenu, sans rien décaler. */
.contenu { position: relative; isolation: isolate; }
.motif-carte { position: absolute; top: 0; left: 0; right: 0; height: 340px; z-index: -1; overflow: hidden; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.motif-carte::before { content: ""; position: absolute; inset: 0; background: url(images/motif-carte.svg) center top / 1600px auto repeat-x; opacity: .14; }
.motif-point { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--jaune); opacity: .55; }
.motif-point::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--jaune); animation: motif-onde 5s ease-out infinite; animation-delay: var(--d); opacity: 0; }
@keyframes motif-onde { 0% { transform: scale(1); opacity: .7; } 60%, 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .motif-point::after { animation: none; } }

.ariane { font-size: 11px; line-height: 1.5; }
.ariane p { margin: 0; }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }
.ariane .separator { color: var(--jaune); padding: 0 4px; }

/* ═════ 7 · FICHES (lieu, pack) ═════ */

.fiche-tete { display: grid; grid-template-columns: 45% 1fr; gap: 5%; padding: 0 var(--marge) 60px 0; align-items: start; }
.fiche-visuel { --bord: max(5vw, calc((100vw - 1600px) / 2)); position: relative; aspect-ratio: 1; background: var(--gris); }
.fiche-image { width: 100%; height: 100%; object-fit: cover; }
.diapo { position: absolute; inset: 0; }
.diapo-piste { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.diapo-piste::-webkit-scrollbar { display: none; }
.diapo-vue { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.diapo-vue img { width: 100%; height: 100%; object-fit: cover; }
.diapo-fleche { position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--encre); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); cursor: pointer; opacity: 0; transition: opacity .25s, transform .2s; }
.diapo-prec { left: 16px; } .diapo-suiv { right: 16px; }
.diapo:hover .diapo-fleche, .diapo-fleche:focus-visible { opacity: 1; }
.diapo-fleche:hover { transform: scale(1.08); }
.diapo-fleche[disabled] { opacity: 0 !important; pointer-events: none; }
.diapo-points { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; margin: 0; }
.diapo-points button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: rgba(66, 66, 66, .35); cursor: pointer; transition: width .25s, background-color .25s; }
.diapo-points button[aria-current="true"] { width: 26px; background: var(--encre); }
@media (hover: none) { .diapo-fleche { display: none; } }
/* Sur la photo, le fil d'Ariane et la ville sont calés sur le bord gauche de l'en-tête (celui de .enveloppe). */
.ariane-sur-image { position: absolute; top: 14px; left: var(--bord); max-width: calc(100% - var(--bord) - 14px); padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .85); z-index: 2; }
.ariane-sur-image p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-info, .fiche-ref {
	position: absolute; margin: 0; padding: 2px 10px; border: 1px solid var(--blanc); border-radius: var(--pilule);
	color: var(--blanc); background: rgba(66, 66, 66, .45); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.fiche-info { top: 13%; left: var(--bord); white-space: nowrap; max-width: calc(100% - var(--bord) - 14px); overflow: hidden; text-overflow: ellipsis; }
.fiche-ref { bottom: 12%; right: 10%; font-size: 10px; }
.fiche-colonne { padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1101px) { .fiche-tete > .fiche-visuel { position: sticky; top: 84px; } }
.fiche-surtitre { margin: 0 0 -10px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--doux); }
.confiance { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -4px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--gris); font-size: 13px; }
.confiance li { display: inline-flex; align-items: center; gap: 7px; }
.confiance svg { flex: none; color: var(--encre); }
.offre-compacte { display: flex; align-items: center; gap: 14px; padding: 10px 12px; }
.offre-compacte .offre-image { width: 58px; height: 58px; }
.offre-compacte .offre-image span { font-size: 9px; padding: 2px 0; }
.offre-compacte .offre-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; }
.offre-compacte .offre-nom span { font: 400 12px/1.3 var(--texte); color: var(--doux); }
.offre-compacte .offre-prix { font: 700 17px/1 var(--titre); white-space: nowrap; }
.lieu-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 0; padding: 0; list-style: none; }
.lieu-puces li, .lieu-puces a { display: inline-flex; align-items: center; gap: 6px; }
.lieu-puces li { padding: 5px 11px 5px 9px; border-radius: var(--pilule); background: var(--gris-clair); border: 1px solid var(--gris); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; line-height: 1.2; transition: border-color .2s, background-color .2s; }
.lieu-puces a { text-decoration: none; }
.lieu-puces .puce-forte { background: #fff3d6; border-color: var(--jaune); font-weight: 600; }
/* « Ce que contient le pack », à côté du texte des fiches pack. */
.pack-contenu { padding: 22px 22px 18px; border: 1px solid var(--gris); border-radius: 16px; background: var(--blanc); }
/* Fiches pack : le texte en entier, puis la carte et la liste côte à côte. */
.fiche-pack .fiche-recit-carte { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.fiche-pack .fiche-recit-carte .fiche-recit-texte { max-width: 820px; }
.fiche-pack .fiche-recit-cote { position: static; }
.fiche-pack .pack-contenu { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 16px 32px 16px 16px; }
.fiche-pack .pack-carte { margin: 0; }
.pack-carte { position: relative; margin: -8px -8px 20px; border-radius: 12px; overflow: hidden; background: #fff; }
.pack-carte img { display: block; width: 100%; height: auto; }
.pack-carte figcaption { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: 11.5px; color: var(--doux); }
.pack-carte figcaption::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 1.5px var(--encre); }
.pack-contenu-titre { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--doux); }
.pack-contenu ul { margin: 0; padding: 0; list-style: none; }
.pack-contenu li + li { border-top: 1px solid var(--gris); }
.pack-contenu li a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; text-decoration: none; font-size: 15px; transition: background-color .15s; }
.pack-contenu li a:hover { background: var(--gris-clair); }
.pack-contenu li svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fff6e3; }
.pack-contenu li span { flex: 1; }
.pack-contenu li small { font-size: 13px; color: var(--doux); }
.pack-contenu li small b { font-weight: 600; color: var(--encre); }
.pack-contenu-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; }
.pack-contenu-lien .icone { width: 15px; height: 15px; }
.lieu-puces li:has(a):hover { border-color: var(--encre); background: var(--blanc); }
.lieu-puces svg { flex: none; color: var(--encre); }
.fiche-titre { margin: 0; }
.fiche-chapeau { font-size: 16px; }
.fiche-chapeau p { margin: 0; }
.fiche-prix { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fiche-rassure { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--doux); }
.fiche-rassure .icone, .fiche-rassure svg { color: var(--encre); }
.fiche-prix .price { margin: 0; font: 700 20px/1.5 var(--titre); }
.fiche-achat form.cart { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fiche-achat .quantity, .quantite-cachee { display: none !important; }
.bouton-deja { width: 100%; padding: 18px 30px; font-size: 14px; font-weight: 700; background: #2E7D4F; border-color: #2E7D4F; }
.fiche-achat .single_add_to_cart_button, .fiche-achat button[type=submit] {
	width: 100%; padding: 18px 30px; border: 0; border-radius: var(--pilule); background: var(--encre); color: var(--blanc);
	font: 700 15px/1 var(--texte); letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.fiche-achat .single_add_to_cart_button:hover { background: #2e2e2e; }
.remises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.remises p { margin: 0; padding: 8px 0 10px; border-radius: 8px; background: var(--gris-clair); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.remises mark { padding: 0 3px; background: var(--jaune); border: 1px solid #e9b85a; font-size: 11px; color: var(--encre); }
.fiche-pack { margin: 0; }
.offre { padding: 14px 16px; border-radius: 8px; background: var(--gris-clair); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); font-size: 14px; }
.offre mark { padding: 0 4px; background: var(--jaune); color: var(--encre); }
.offre-pack { display: flex; align-items: center; gap: 16px; }
.offre-image { position: relative; flex: none; width: 84px; height: 84px; border-radius: var(--rayon); overflow: hidden; background: var(--gris); }
.offre-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.offre-image:hover img { transform: scale(1.05); }
.offre-image span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: rgba(66, 66, 66, .85); color: var(--blanc); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.offre-liste .offre-image { width: 96px; height: 96px; }
.offre-texte { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.offre-texte strong { font: 600 16px/1.3 var(--titre); }
.offre-nom { margin: 0; font: 600 18px/1.2 var(--titre); }
.offre-nom a { text-decoration: none; }
.offre-nom a:hover { text-decoration: underline; }
.offre-detail { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; }
.offre-detail strong { font: 700 16px/1 var(--titre); }
.offre-detail mark { padding: 2px 7px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.offre-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: none; }
.bouton-petit { gap: 7px; padding: 10px 18px; font-size: 12px; font-weight: 700; border: 0; color: var(--blanc); }
.bouton-petit svg { width: 16px; height: 16px; }
.offre-lien { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; color: var(--doux); }
.offre-lien:hover { color: var(--encre); }
.offre-lien .icone { width: 13px; height: 13px; }
.offre-liste .bouton { flex: none; padding: 13px 24px; font-size: 12px; font-weight: 700; }
.offre-sur { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--doux); }
.offre-sur mark { padding: 2px 7px; border-radius: 20px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.duo { display: flex; align-items: center; gap: 14px; }
.duo-vignettes { display: flex; align-items: center; gap: 4px; margin: 0; flex: none; }
.duo-vignettes img { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; }
.duo-vignettes span { font-weight: 700; color: var(--doux); }
.duo-nom { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.duo-nom a { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duo-nom a:hover { text-decoration: underline; }
.duo-nom span { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--doux); }
.duo-prix { margin: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: none; }
.duo-prix strong { font: 700 17px/1.1 var(--titre); }
.duo-prix del { font-size: 12px; }
.recu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.recu li { display: flex; gap: 8px; align-items: flex-start; }
.recu svg { flex: none; margin-top: 3px; }
.fiche-video { margin: 0; }
.fiche-video button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--gris); border-radius: 60px; background: var(--blanc); color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.fiche-video button:hover { border-color: var(--encre); box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }
.fiche-video-rond { position: relative; flex: none; width: 62px; height: 62px; border: 3px solid var(--jaune); border-radius: 50%; background: var(--gris); }
.fiche-video-rond::before, .fiche-video-rond::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--jaune); animation: onde 2.4s cubic-bezier(.2, .6, .4, 1) infinite; pointer-events: none; }
.fiche-video-rond::after { animation-delay: 1.2s; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.fiche-video-rond img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.fiche-video-rond .icone { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; padding: 4px 3px 4px 5px; border-radius: 50%; background: rgba(66, 66, 66, .55); color: var(--blanc); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background-color .3s; }
.fiche-video button:hover .fiche-video-rond img { transform: scale(1.08); }
.fiche-video button:hover .fiche-video-rond .icone { transform: scale(1.18); background: var(--encre); }
.fiche-video-texte { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--doux); }
.fiche-video-texte strong { font: 600 15px/1.2 var(--titre); color: var(--encre); }
.rond { width: 95px; height: 95px; border-radius: 50%; object-fit: cover; }
.rond-grand { width: 150px; height: 150px; }

/*
 * Le récit du lieu puis « Urbex à <ville> » : un seul fil de lecture, aligné
 * sur la page, texte en colonne confortable, la carte en pleine largeur.
 */
.fiche-recit { width: 90%; max-width: 1600px; margin: 0 auto; padding: 72px 0 8px; border-top: 1px solid var(--gris); }
.fiche-recit-texte { max-width: 760px; }
.fiche-recit-texte h2 { margin: 0 0 20px; font-size: 28px; line-height: 1.25; }
.fiche-recit-texte .texte { font-size: 17px; line-height: 1.8; }
.fiche-recit-texte .texte p { margin: 0 0 1.1em; }
.fiche-recit-texte .texte + h2 { margin-top: 40px; }
.fiche-recit-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 56px; }
.fiche-recit-carte .fiche-recit-texte { max-width: 720px; }
.fiche-recit-cote { position: sticky; top: 100px; }
.fiche-memo { margin: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--gris-clair); }
.fiche-memo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recit-reperes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -6px 0 26px; padding: 0; list-style: none; font-size: 13px; color: var(--doux); }
.recit-reperes li { display: inline-flex; align-items: center; gap: 6px; }
.recit-reperes svg { color: var(--encre); opacity: .7; }

/* « Urbex à <ville> » : la carte de la commune, ses repères numérotés, la ville en bref. */
.ville-carte { margin: 0; }
.ville-carte-cadre { position: relative; overflow: hidden; border-radius: 14px; background: var(--gris); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.ville-carte-cadre img { display: block; width: 100%; height: auto; }
.ville-carte figcaption { margin-top: 10px; font-size: 12px; color: var(--doux); }
.ville-etiquette { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--pilule); background: var(--blanc); color: var(--encre); font: 600 12px/1 var(--titre); white-space: nowrap; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background-color .2s, color .2s; }
.ville-etiquette span { padding: 3px 7px; border-radius: var(--pilule); background: var(--jaune); font-weight: 700; font-size: 11px; }
.ville-etiquette:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--encre); color: var(--blanc); }
.ville-etiquette-ici { background: var(--encre); color: var(--jaune); }
.ville-etiquette-ici span { color: var(--encre); }
#lieux-proches { scroll-margin-top: 100px; }

/* Les deux bandeaux photo, en pleine largeur comme avant : le texte à gauche sur le noir, la photo s'approche au survol. */
.bandeau { position: relative; isolation: isolate; overflow: hidden; width: 90%; max-width: 1600px; min-height: 480px; margin: 0 auto 72px; display: flex; align-items: center; padding: 56px 6%; border-radius: 16px; background: var(--encre); color: var(--blanc); }
.bandeau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo) center / cover no-repeat; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.bandeau::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .08) 75%); }
.bandeau:hover::before { transform: scale(1.04); }
.bandeau-trouver { --photo: url(/wp-content/uploads/2024/08/trouver-un-spot-scaled.jpg); }
.bandeau-equipement { --photo: url(/wp-content/uploads/2024/08/equipement-urbex-scaled.jpg); }
.bandeau-texte { max-width: 620px; }
.bandeau h2 { color: var(--blanc); font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.bandeau p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.bandeau-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.bandeau-boutons .bouton { padding: 12px 20px; font-size: 12px; font-weight: 600; }

.voisines { margin: 0 auto 40px; }
.voisines-tete { width: 90%; margin: 0 auto 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.voisines-tete h2 { margin-bottom: 6px; }
.voisines-tete p { margin: 0; }
.voisines .grille { width: 90%; margin: 0 auto; }

/* Le carrousel des lieux voisins : une seule ligne, cinq cartes visibles, des flèches sur ordinateur. */
.grille.carrousel-piste { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste > * { scroll-snap-align: start; }
.carrousel-fleches { display: flex; gap: 10px; flex: none; }
.carrousel-fleches button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--gris); border-radius: 50%; background: var(--blanc); color: var(--encre); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
.carrousel-fleches button:hover:not([disabled]) { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.carrousel-fleches button[disabled] { opacity: .3; cursor: default; }
.carrousel-fleches .icone { width: 18px; height: 18px; }
.carrousel-fleches [data-carrousel-prec] .icone { transform: rotate(180deg); }
.voisines:not(.carrousel-actif) .carrousel-fleches { display: none; }

/* Le paiement express (Apple Pay, Google Pay) des fiches : sa place est gardée dès l'affichage, sinon tout ce qui
   suit descend d'environ 80 px quand Stripe l'insère. js/urbexe.js libère la place si aucun bouton ne vient. */
.fiche-achat .cart > .fkwcs_stripe_smart_button_wrapper { min-height: 134px; }
.fiche-achat .cart > .fkwcs_stripe_smart_button_wrapper.sans-express { min-height: 0; }
/* Le bandeau d'achat des fiches : il suit le défilement une fois le bouton d'achat dépassé. */
.barre-achat { position: fixed; left: 50%; bottom: 14px; z-index: 90; width: min(980px, calc(100vw - 24px)); transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.barre-achat.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.barre-achat-int { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; border: 1px solid var(--gris); border-radius: 999px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0, 0, 0, .14); }
.barre-achat-image { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gris); }
.barre-achat-image img { width: 100%; height: 100%; object-fit: cover; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barre-achat-texte strong { font: 600 15px/1.25 var(--titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat-texte small { font-size: 12px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat-prix { flex: none; font: 700 17px/1 var(--titre); }
.barre-achat .bouton { flex: none; padding: 14px 24px; }
.barre-achat-commande .bouton { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }

/* ═════ 8 · CARTES ET GRILLES ═════ */

.grille { display: grid; gap: 30px 10px; grid-template-columns: repeat(var(--col, 4), minmax(0, 1fr)); }
.grille-defilante { --col: 5; }
.carte { min-width: 0; }
.carte-visuel { position: relative; overflow: hidden; border-radius: var(--rayon); }
.carte-visuel > a:not(.carte-panier) { display: block; aspect-ratio: 1; background: var(--gris); }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.carte-visuel:hover img { transform: scale(1.04); }
.carte-info { position: absolute; top: 10px; left: 10px; z-index: 1; margin: 0; padding: 2px 10px; border: 1px solid var(--blanc); border-radius: var(--pilule); background: rgba(40, 40, 40, .4); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); color: var(--blanc); font-size: 10px; font-weight: 500; letter-spacing: .5px; line-height: 15px; text-transform: uppercase; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-panier { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 0 0 var(--rayon) var(--rayon); background: var(--encre); color: var(--blanc); font: 600 11px/1 var(--texte); letter-spacing: .5px; text-transform: uppercase; text-decoration: none; transition: background-color .2s; }
.carte-panier:hover { background: #2b2b2b; }
.carte-panier .icone { width: 14px; height: 14px; }
a.added_to_cart { display: none !important; }
.carte-type { position: absolute; top: 9px; right: 9px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--blanc); border-radius: 50%; background: rgba(40, 40, 40, .4); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); color: var(--blanc); }
.carte-type svg { width: 14px; height: 14px; }
.carte-info { max-width: calc(100% - 56px); }
.carte-titre { margin: 8px 2px 0; font: 400 12px/1.5 var(--texte); letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-titre a { text-decoration: none; }
.carte-prix { margin: 0 2px; font-size: 11px; font-weight: 600; }
.carte-prix p, .carte-prix .price { margin: 0; }
.carte-large { grid-column: span 2; }
.carte-large .carte-visuel > a { aspect-ratio: auto; height: calc(100% - 0px); }
.carte-encart .carte-visuel { height: calc(100% - 44px); }
.carte-encart .carte-visuel > a { height: 100%; aspect-ratio: auto; min-height: 100%; }
.carte-amazon .carte-panier b { font-weight: 800; letter-spacing: 0; text-transform: lowercase; }
/* Le matériel : le nom du produit compte, il tient sur deux lignes. */
.carte-amazon .carte-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 3em; white-space: normal; }
.liste-vide { padding: 40px 0; text-align: center; }
.voir-plus { text-align: center; margin: 40px 0 0; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 20px; }
.tuile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.tuile img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; transition: transform .3s; }
.tuile:hover img { transform: scale(1.05); }

.grille-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
.carte-article-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); background: var(--gris); }
.carte-article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.carte-article-image:hover img { transform: scale(1.03); }
.carte-article-meta { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 0; font-size: 12px; }
.carte-article-meta span { display: inline-flex; align-items: center; gap: 5px; }
.author-profile-pic { border-radius: 30px; }
.carte-article-titre { margin: 12px 0 6px; font-size: 18px; }
.carte-article-titre a, .carte-article-extrait a { text-decoration: none; }
.carte-article-extrait { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Les catégories de lieux */
.liste-lieux .ariane { padding-top: 14px; }
.liste-tete { padding: 18px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.liste-titre { display: flex; align-items: center; gap: 18px; }
.liste-titre .rond { width: 84px; height: 84px; flex: none; }
.liste-titre h1 { margin: 0; font-size: 30px; }
.liste-compte { margin: 4px 0 0; font-size: 14px; color: var(--doux); }
.offre-liste { margin: 8px 0 4px; }
.offre-liste .bouton { flex: none; padding: 13px 24px; font-size: 12px; font-weight: 700; }
.filtres-types { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 18px 0 26px; }
/* La rangée de filtres reste sous l'en-tête au défilement (fond blanc étendu à toute la largeur). */
.liste-lieux .filtres-types { position: sticky; top: var(--haut-entete, 56px); z-index: 60; background: var(--blanc); box-shadow: 0 0 0 100vmax var(--blanc); clip-path: inset(0 -100vmax); transition: padding .2s; }
.liste-lieux .filtres-types.colle { padding-top: 10px; padding-bottom: 10px; clip-path: inset(0 -100vmax -12px); box-shadow: 0 0 0 100vmax var(--blanc), 0 10px 12px -10px rgba(0, 0, 0, .12); }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--encre); border-radius: var(--pilule); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.puce b { font-weight: 600; opacity: .6; }
.puce-active { background: var(--encre); color: var(--blanc); }
.filtres-ouvrir button { white-space: nowrap; }
/* « Voir plus de lieux » : la suite chargée sur place, avec ce qu'il reste à voir. */
.pagination-liste { display: flex; justify-content: center; margin: 40px 0 50px; }
.voir-plus-lieux { position: relative; width: auto; min-width: 260px; flex-direction: column; gap: 4px; padding: 14px 34px; }
.voir-plus-lieux small { font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: none; opacity: .65; }
.voir-plus-lieux.charge { pointer-events: none; color: transparent; }
.voir-plus-lieux.charge::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--encre); border-right-color: transparent; border-radius: 50%; animation: tourne .6s linear infinite; }
.carte-arrivee { animation: arrivee .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes arrivee { from { opacity: 0; transform: translateY(12px); } }

/* La barre du panier des listes : lieux au panier, remise en cours et palier suivant, commande. */
.barre-panier { position: fixed; left: 50%; bottom: 16px; z-index: 95; width: min(980px, calc(100vw - 32px)); display: flex; align-items: center; gap: 18px; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--encre); color: var(--blanc); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); transform: translate(-50%, 130%); transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.barre-panier.visible { transform: translate(-50%, 0); }
.barre-panier-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.barre-panier-info > .icone { flex: none; width: 22px; height: 22px; color: var(--jaune); }
.barre-panier-info p { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.barre-panier-info strong { font: 600 15px/1.2 var(--titre); }
.barre-panier-info span { font-size: 13px; color: var(--jaune); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-panier-info span:empty { display: none; }
.barre-panier-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.barre-panier-commander { padding: 12px 20px; font-size: 13px; font-weight: 700; }
.barre-panier-fermer { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--blanc); cursor: pointer; }
.barre-panier-fermer .icone { width: 14px; height: 14px; }
.barre-panier-fermer:hover { background: rgba(255, 255, 255, .18); }
body.avec-barre-panier { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .barre-panier { transition: none; } }

/* Le bandeau du pack sur les listes : une seule ligne fine. */
.bandeau-pack { display: flex; align-items: center; gap: 16px; margin: 22px 0 10px; padding: 10px 12px 10px 10px; border: 1px solid var(--gris); border-radius: 12px; background: var(--blanc); transition: border-color .2s, box-shadow .2s; }
.bandeau-pack:hover { border-color: #cfcfcf; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); }
.bandeau-pack-image { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 8px; background: var(--gris); }
.bandeau-pack-image img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-pack-texte { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.bandeau-pack-texte a { font: 600 15px/1.3 var(--titre); text-decoration: none; }
.bandeau-pack-texte a:hover { text-decoration: underline; }
.bandeau-pack-texte span { font-size: 13px; color: var(--doux); }
.bandeau-pack-texte strong { font: 700 14px/1 var(--titre); color: var(--encre); }
.bandeau-pack-lien { flex: none; }
.bandeau-pack .bouton-petit { flex: none; }
.puce svg { flex: none; width: 14px; height: 14px; }
button.puce { background: var(--blanc); color: var(--encre); font-family: var(--texte); cursor: pointer; transition: background-color .2s, color .2s; }
button.puce:hover:not(.puce-active) { background: var(--gris-clair); }
button.puce.puce-active { background: var(--encre); color: var(--blanc); }
.filtres-outils { display: flex; gap: 8px; margin-left: auto; }
.puce-outil { border-style: solid; }
.puce-attente { animation: attente 1s ease-in-out infinite; }
@keyframes attente { 50% { opacity: .45; } }
.puce-refus { animation: refus .4s; border-color: #c0392b !important; color: #c0392b; }
@keyframes refus { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* La carte du département, sous la rangée de filtres : une pastille par commune qui a des spots. */
.dep-carte { margin: 0 0 26px; }
.dep-carte figure { max-width: min(1000px, calc((100vh - 220px) * 1600 / 1120)); margin: 0 auto; }
.dep-carte-cadre { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--gris); background: var(--gris-clair); }
.dep-carte-cadre img { display: block; width: 100%; height: auto; }
.dep-carte figcaption { margin-top: 8px; font-size: 12px; color: var(--doux); }
.dep-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; margin: 14px auto 0; }
.dep-liste .puce { text-transform: none; letter-spacing: 0; font-size: 12px; }
.dep-commune { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; }
.dep-commune > span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 2px solid var(--blanc); border-radius: 13px; background: var(--encre); color: var(--jaune); font: 700 12px/1 var(--titre); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background-color .2s, color .2s; }
.dep-commune em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 6px; background: var(--encre); color: var(--blanc); font: 600 12px/1.2 var(--texte); font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.dep-commune:hover, .dep-commune:focus-visible { z-index: 3; }
.dep-commune:hover > span, .dep-commune:focus-visible > span { transform: scale(1.15); background: var(--jaune); color: var(--encre); }
.dep-commune:hover em, .dep-commune:focus-visible em { opacity: 1; transform: translate(-50%, 0); }

/* « 3 spots à Pont-Saint-Esprit » après un clic sur la carte, avec le retour à toutes les communes. */
.liste-filtre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 18px; padding: 10px 12px 10px 16px; border-radius: 10px; background: var(--gris-clair); font-size: 14px; }
.liste-filtre-tout { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--encre); border-radius: var(--pilule); background: var(--blanc); font: 600 12px var(--texte); cursor: pointer; }
.liste-filtre-tout .icone { width: 12px; height: 12px; }
.liste-filtre-tout:hover { background: var(--encre); color: var(--blanc); }
.liste-resultats { transition: opacity .2s; }
.liste-resultats.resultats-charge { opacity: .35; pointer-events: none; }

/* ═════ 9 · PIED DE PAGE ═════ */

.pied { margin-top: 40px; font-size: 14px; }
.pied-garanties { background: var(--jaune); padding: 50px 0; }
.pied-garanties .enveloppe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.garantie-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 15px/1 var(--texte); letter-spacing: 1px; text-transform: uppercase; }
.garantie-titre img { width: 30px; height: 30px; }
.pied-confiance { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 50px 0; font-size: 16px; }
.pied-confiance img { width: 130px; height: auto; }
.pied-confiance p { margin: 0; }
.pied-principal { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px 48px; padding: 64px 0 56px; border-top: 1px solid var(--gris); }
.pied-titre { margin: 0 0 18px; font: 600 12px/1 var(--texte); letter-spacing: 1.4px; text-transform: uppercase; color: var(--encre); }
.pied-col > * + .pied-titre { margin-top: 36px; }
.pied-col p, .pied-lettre p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--doux); }
.pied-lettre { max-width: 460px; }
.pied-promesse { font-size: 12.5px; color: #8a8a8a; }   /* pas d'italique : la police italique (50 Ko) n'est plus chargée sur chaque page pour une ligne */
.pied-menu { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.4; }
.pied-menu li { margin-bottom: 10px; }
.pied-menu a { color: var(--doux); text-decoration: none; transition: color .15s; }
.pied-menu a:hover, .pied-col p a:hover { color: var(--encre); text-decoration: underline; }
.pied-col p a { color: var(--encre); }
.pied-reseaux { display: flex; gap: 8px; margin-top: 4px; }
.pied-reseaux a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--gris); border-radius: 50%; color: var(--encre); transition: background-color .2s, color .2s, border-color .2s; }
.pied-reseaux a:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.pied-reseaux .icone { width: 17px; height: 17px; }
.pied-bas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 18px 0 22px; border-top: 1px solid var(--gris); font-size: 12px; color: var(--doux); }
.pied-bas p { margin: 0; }
.pied-bas a { color: var(--doux); }
.pied-bas > a img { width: 26px; display: block; }
.pied-paiement { width: 260px; height: auto; justify-self: end; }

/* La newsletter (WPForms 29) : champ souligné et bouton à côté, comme avant. */
#wpforms-form-29 { display: flex; align-items: center; }
#wpforms-form-29 .wpforms-field-container { width: 100%; }
#wpforms-form-29 .wpforms-field { padding: 0 !important; }
#wpforms-form-29 input[type=email] { width: 100%; max-width: none; padding: 8px 2px; border: 0; border-bottom: 1px solid #101835; border-radius: 0; background: transparent; font: inherit; }
#wpforms-form-29 .wpforms-submit-container { flex: none; margin: 0 0 0 15px !important; padding: 0 !important; }
#wpforms-form-29 button[type=submit] { padding: 10px 20px; border: 1px solid var(--encre); border-radius: var(--pilule); background: var(--encre); color: var(--blanc); font: 600 13px var(--texte); white-space: nowrap; cursor: pointer; transition: transform .25s, box-shadow .25s; }
#wpforms-form-29 button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(66, 66, 66, .25); }
.wpforms-container { margin: 12px 0 !important; }
.el-formulaire .wpforms-submit, .el-formulaire button[type=submit] { padding: 12px 28px !important; border: 0 !important; border-radius: 30px !important; background: var(--encre) !important; color: #fff !important; font: 600 14px var(--texte) !important; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.el-formulaire input:not([type=checkbox]):not([type=radio]), .el-formulaire textarea, .el-formulaire select { border: 1px solid rgba(0, 0, 0, .25) !important; border-radius: 3px !important; font: 15px var(--texte) !important; }

/* ═════ 10 · PAGES RENDUES DEPUIS ELEMENTOR ═════ */

.el-c { display: flex; flex-direction: column; gap: 20px; padding: 10px; width: var(--larg, 100%); flex: 0 1 auto; min-width: 0; text-decoration: none; color: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; }
.el-boite { display: flex; flex-direction: column; }
.el-boite > .el-in { flex: 1 1 auto; }
.el-texte p { margin: 0; }
.el-icone-bloc img.el-icone { width: auto; }
.el-in { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1140px; margin-inline: auto; }
.el > .el-c { margin-inline: auto; }
.el-c > .el-boite { width: 100%; }
.el-texte > :last-child { margin-bottom: 0; }
.el-image img { border-radius: var(--rayon); }
.el-image { margin: 0; }
.el-bouton { margin: 0; }
.el-liste { margin: 0; padding: 0; list-style: none; }
.el-liste a { text-decoration: none; }
.el-liste a:hover { text-decoration: underline; }
.el-icone { width: 24px; height: 24px; }
.el-defilant { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.el-defilant > * { scroll-snap-align: start; }
.el-video { border-radius: var(--rayon); overflow: hidden; background: #000; }
.el-video button { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: none; }
.el-video button img { width: 100%; height: 100%; object-fit: cover; }
.el-video .icone { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; color: var(--blanc); }
.el-lien { margin: 0; }
.el-lien .bouton { background: var(--blanc); color: var(--encre); width: 100%; font-weight: 700; font-size: 13px; padding: 14px 30px; }
.el-lien .bouton:hover { background: var(--encre); color: var(--blanc); }
.el-champ { margin: 0; }
@media (min-width: 1025px) { .cache-ordi { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .cache-tablette { display: none !important; } }
.el-accordeons { width: 100%; }

.filtres-ouvrir { margin: 0; }
.filtres-ouvrir button, a[data-ouvrir="fenetre-filtres"] { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.filtre { position: relative; margin: 0; }
.filtre-deroulant summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--filet); border-radius: var(--rayon); cursor: pointer; list-style: none; font-size: 14px; background: var(--blanc); }
.filtre-deroulant summary::-webkit-details-marker { display: none; }
.filtre-deroulant summary .icone { width: 14px; height: 14px; }
.filtre-options { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 340px; overflow: auto; padding: 10px 14px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 12px 30px rgba(0, 0, 0, .1); }
.filtre-options label { display: block; padding: 4px 0; font-size: 14px; cursor: pointer; }
.filtre-options .niveau-0 { font-weight: 700; margin-top: 6px; }
.filtre-options .niveau-1 { padding-left: 18px; }
.filtre-texte input { width: 100%; padding: 12px 16px; border: 1px solid var(--filet); border-radius: var(--rayon); font: 14px var(--texte); }

.sommaire { padding: 16px 20px; border-radius: var(--rayon); background: var(--gris-clair); border: 1px solid var(--gris); }
.sommaire summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-weight: 700; }
.sommaire summary .icone { width: 14px; height: 14px; }
.sommaire ol { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }
.sommaire li { margin: 4px 0; }
.sommaire .sommaire-h3 { margin-left: 14px; list-style: circle; }
.sommaire a { text-decoration: none; }
.partage { display: flex; flex-wrap: wrap; gap: 8px; }
.partage a { padding: 6px 12px; border-radius: var(--rayon); background: var(--encre); color: var(--blanc); font-size: 12px; text-decoration: none; }

/* « Trouver un spot » : se localiser ou chercher une ville, puis les régions. */
/* L'en-tête de « Trouver un spot » : centré, sur le motif carte. */
.trouver-tete { position: relative; isolation: isolate; padding: 36px 5% 8px; text-align: center; }
.trouver-tete .motif-carte { height: 100%; }
.trouver-titre { margin: 0 0 14px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; }
.trouver-intro { max-width: 660px; margin: 0 auto 30px; font-size: 17px; line-height: 1.6; color: var(--doux); }
.localisateur { max-width: 860px; margin: 0 auto; }
/* Les sections de la page : régions, derniers spots. */
.trouver-section { margin-top: 72px; }
.trouver-section-titre { margin: 0 0 22px; font-size: 26px; }
.trouver-tuiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.trouver-tuiles-pays { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.trouver-tuile { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 14px 16px 15px; border: 1px solid var(--gris); border-radius: 14px; background: var(--blanc); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.trouver-tuile-picto { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff6e3; color: var(--encre); }
.trouver-tuile-picto svg { width: 17px; height: 17px; }
.trouver-tuile-picto img { width: 24px; height: 24px; object-fit: contain; }
.trouver-tuile-texte { display: flex; flex-direction: column; gap: 3px; }
.trouver-tuile-texte > span { font: 600 15px/1.25 var(--titre); letter-spacing: -.01em; color: var(--encre); }
.trouver-tuile small { font-size: 12px; color: var(--doux); }
.trouver-tuile-fleche { position: absolute; top: 16px; right: 14px; color: var(--encre); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.trouver-tuile:hover { border-color: var(--encre); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(66, 66, 66, .08); }
.trouver-tuile:hover .trouver-tuile-fleche { opacity: 1; transform: none; }
.trouver-tuile:hover .trouver-tuile-picto { background: var(--jaune); }
.trouver-tuiles-regions li:first-child .trouver-tuile { background: var(--encre); border-color: var(--encre); }
.trouver-tuiles-regions li:first-child .trouver-tuile-texte > span, .trouver-tuiles-regions li:first-child .trouver-tuile-fleche { color: var(--blanc); }
.trouver-tuiles-regions li:first-child .trouver-tuile small { color: rgba(255, 255, 255, .7); }
.trouver-tuiles-regions li:first-child .trouver-tuile-picto { background: rgba(255, 255, 255, .12); }
.trouver-tuiles-pays .trouver-tuile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.trouver-tuiles-pays .trouver-tuile-picto { width: 30px; height: 30px; background: none; }
.trouver-tuiles-pays .trouver-tuile-fleche { display: none; }
.trouver-tuiles-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trouver-tuiles-types .trouver-tuile { flex-direction: row; align-items: center; padding: 16px 18px; }
.trouver-tuiles-types .trouver-tuile-picto { width: 44px; height: 44px; }
.trouver-tuiles-types .trouver-tuile-picto svg { width: 20px; height: 20px; }
.trouver-tuiles-types .trouver-tuile-fleche { top: 50%; margin-top: -8px; right: 18px; }
.trouver-section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.trouver-section-tete .trouver-section-titre { margin: 0; }
.trouver-section-tete p { margin: 0; font-size: 14px; color: var(--doux); }
.trouver-atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 30px auto 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--doux); }
.trouver-atouts li { display: inline-flex; align-items: center; gap: 9px; }
.trouver-atouts strong { color: var(--encre); font-weight: 600; }
.trouver-atout-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff6e3; color: var(--encre); }
.trouver-pays-titre { margin: 28px 0 12px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--doux); }
.trouver-section + .el-195c0bf { margin-top: -6px; }
/* Le long texte de la page : la même colonne de lecture que le bas des listes. */
.el-c2636f6 { width: 90%; max-width: 1600px !important; margin: 72px auto 72px !important; padding: 64px 0 0 !important; border-top: 1px solid var(--gris); }
.el-c2636f6 > * { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; }
.el-c2636f6 h2 { font-size: 26px !important; line-height: 1.25 !important; margin: 1.6em 0 .5em !important; }
.el-c2636f6 p { font-size: 16.5px !important; line-height: 1.75 !important; }
.localisateur-carte { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--gris); border-radius: 999px; background: var(--blanc); box-shadow: 0 10px 34px rgba(66, 66, 66, .08); }
.localisateur-moi { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; background: var(--jaune); color: var(--encre); font: 600 14px/1 var(--texte); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.localisateur-moi:hover { box-shadow: 0 6px 18px rgba(255, 206, 115, .55); }
.localisateur-moi:active { transform: scale(.97); }
.localisateur-attente .localisateur-moi svg, .localisateur-moi.localisateur-attente svg { animation: localiser 1.1s linear infinite; }
@keyframes localiser { to { transform: rotate(360deg); } }
.localisateur-ou { flex: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--doux); }
.localisateur-recherche { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-right: 18px; }
.localisateur-recherche .icone { flex: none; width: 19px; height: 19px; color: var(--doux); }
.localisateur-recherche input[type="search"] { flex: 1; min-width: 0; height: 54px; padding: 0; border: 0; background: none; font: 400 16px/1.2 var(--texte); color: var(--encre); outline: none; }
.localisateur-recherche input::placeholder { color: #9a9a9a; }
.localisateur-recherche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.localisateur-suggestions { position: absolute; top: calc(100% + 16px); left: -40px; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; text-align: left; border: 1px solid var(--gris); border-radius: 16px; background: var(--blanc); box-shadow: 0 18px 44px rgba(0, 0, 0, .12); }
.localisateur-suggestions li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 14px; border-radius: 10px; cursor: pointer; }
.localisateur-suggestions li span { font-weight: 600; }
.localisateur-suggestions li small { flex: none; font-size: 12px; color: var(--doux); }
.localisateur-suggestions li:hover, .localisateur-suggestions .suggestion-choisie { background: var(--gris-clair); }
.localisateur-suggestions .suggestion-departement span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--jaune); }
.localisateur-suggestions .suggestion-vide { color: var(--doux); cursor: default; }
.localisateur-note { margin: 14px 0 0; font-size: 12.5px; color: var(--doux); }

/* La description en tête des listes : une largeur de lecture, pas tout l'écran. */
.liste-tete .description { max-width: 860px; }
.liste-tete .description-texte p { margin: 0 0 .8em; }

/* Le long texte du bas des listes : une colonne de lecture, centrée, et des tableaux nets. */
.texte-bas { width: 90%; max-width: 1600px; margin: 24px auto 72px; padding-top: 64px; border-top: 1px solid var(--gris); }
.texte-bas .texte { max-width: 780px; margin: 0 auto; font-size: 16.5px; line-height: 1.75; }
.texte-bas .texte h2 { margin: 2.2em 0 .6em; font-size: 26px; line-height: 1.25; }
.texte-bas .texte h3 { margin: 1.8em 0 .5em; font-size: 20px; }
.texte-bas .texte > h2:first-child { margin-top: 0; }
.texte-bas .texte p { margin: 0 0 1.1em; }
.texte table { width: 100%; margin: 1.6em 0 2em; border: 1px solid var(--gris); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; line-height: 1.45; }
.texte th, .texte td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gris); }
.texte thead th, .texte tr:first-child th { background: var(--gris-clair); font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--doux); }
.texte tbody tr:last-child td { border-bottom: 0; }
.texte tbody tr:nth-child(even) td { background: #fcfcfc; }
.texte td:first-child { font-weight: 600; color: var(--encre); white-space: nowrap; }

/* ═════ 10 bis · LE TUNNEL (commande, remerciement) ═════ */

/* Le tunnel : mêmes mesures que la page Elementor d'origine (le style du formulaire est dans css/tunnel.css). */
.tunnel-entete { display: flex; justify-content: center; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.tunnel-entete img { width: 120px; height: auto; }
.tunnel { display: grid; grid-template-columns: minmax(0, 719fr) minmax(0, 441fr); max-width: 1160px; margin: 0 auto; min-height: calc(100vh - 54px); }
.tunnel-formulaire { padding: 0 10px 40px; }
.tunnel-cote { padding: 0 16px; border-left: 1px solid rgba(13, 13, 13, .2); }
.tunnel-panier { padding: 24px; background: var(--blanc); }
.tunnel-cote .el > .el-c { width: 100%; }
/* Le formulaire intégré ajoute un cadre et des marges que la page Elementor n'avait pas. */
html body.page-tunnel #wfacp-e-form .wfacp-inner-form-detail-wrap { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
html body.page-tunnel .tunnel-panier .wfacp_form_cart { padding: 0 !important; }
/* L'en-tête du formulaire intégré (« Obtenez votre exemplaire… ») et le lien de code promo : absents de la page d'origine (le code promo est dans le panier). */
html body.page-tunnel #wfacp-e-form .wfacp-order2StepHeaderText, html body.page-tunnel #wfacp-e-form .wfacp-woocom-coupon, html body.page-tunnel .wfacp-payment-tab-wrapper { display: none !important; }
/* Les avis : un à la fois, comme le carrousel d'origine. */
.tunnel-cote .el-defilant { grid-auto-columns: 100%; scrollbar-width: none; }
html body.page-tunnel .tunnel-panier input, html body.page-tunnel .tunnel-panier button { font-family: "IBM Plex Sans", sans-serif !important; }
/* Le résumé repliable : ouvert et sans titre sur ordinateur, replié sur téléphone. */
.tunnel-resume-titre { display: none; width: 100%; align-items: center; gap: 10px; padding: 14px 15px; border: 0; background: none; cursor: pointer; text-align: left; font: 500 14px/1.2 "IBM Plex Sans", sans-serif; color: var(--encre); }
.tunnel-resume-fleche { transition: transform .25s; }
.tunnel-resume.ouvert .tunnel-resume-fleche { transform: rotate(180deg); }
.tunnel-resume-total { margin-left: auto; font: 600 15px/1 "IBM Plex Sans", sans-serif; }
/* L'en-tête FunnelKit du même résumé ne sort que sur les téléphones qu'il reconnaît : le nôtre le remplace partout. */
html body.page-tunnel .wfacp_collapsible_order_summary_wrap { display: none !important; }
.tunnel-entete a { display: block; line-height: 0; }
html body.page-tunnel #wfacp-e-form .wfacp-payment-dec img { margin: 0 auto; }
/* Ce que l'on reçoit, sous le panier ; l'aide et la correction de l'e-mail. */
.tunnel-recu { margin: 0 0 24px; padding: 18px 24px; list-style: none; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--gris); font: 400 13px/1.45 "IBM Plex Sans", sans-serif; color: var(--doux); }
.tunnel-recu li { display: flex; align-items: flex-start; gap: 12px; }
.tunnel-recu strong { font-weight: 600; color: var(--encre); }
.tunnel-recu svg { flex: none; margin-top: 1px; color: var(--encre); }
html body.page-tunnel #wfacp-e-form .tunnel-email-aide { display: block; margin: 6px 0 0 2px; font: 400 12px/1.4 "IBM Plex Sans", sans-serif; color: var(--doux); }
html body.page-tunnel #wfacp-e-form .tunnel-email-correction { display: block; margin: 6px 0 0; padding: 8px 12px; border-radius: 4px; background: #FFF6E3; font: 400 13px/1.4 "IBM Plex Sans", sans-serif; color: var(--encre); }
html body.page-tunnel #wfacp-e-form .tunnel-email-correction[hidden] { display: none; }
html body.page-tunnel .tunnel-panier .wfacp_showcoupon, html body.page-tunnel .tunnel-panier .woocommerce-info a { color: var(--encre) !important; font-size: 13px !important; text-decoration: underline; }
html body.page-tunnel .tunnel-panier .woocommerce-info { font-size: 13px !important; color: var(--doux) !important; }
html body.page-tunnel .tunnel-panier [class*=saving], html body.page-tunnel .wfacp_collapsible_order_summary_wrap [class*=saving] { color: #2E7D4F !important; }
html body.page-tunnel #wfacp-e-form #place_order .tunnel-total { white-space: nowrap; }
@media (max-width: 480px) {
	html body.page-tunnel #wfacp-e-form #place_order { flex-wrap: wrap; row-gap: 2px; line-height: 1.2; }
	html body.page-tunnel #wfacp-e-form #place_order .tunnel-total { flex-basis: 100%; font-size: 13px; letter-spacing: .5px; opacity: .85; }
	html body.page-tunnel #wfacp-e-form #place_order .tunnel-sep { display: none; }
}
html body.page-tunnel #wfacp-e-form .tunnel-email-correction button { padding: 0; border: 0; background: none; font: 600 13px "IBM Plex Sans", sans-serif; color: var(--encre); text-decoration: underline; cursor: pointer; }
.merci { padding: 0 0 60px; }
.el-section { flex-direction: row; }
.el-section > .el-colonne { flex: 0 1 var(--larg, 100%); }
.merci .wfty_title, .merci .wfty-order-details-heading { font: 600 22px/1.2 var(--titre); margin-bottom: 14px; }
.merci .wfty_download_btn, .merci .woocommerce-MyAccount-downloads-file, .merci a.button { display: inline-block; padding: 8px 18px; border-radius: 30px; background: var(--encre) !important; color: #fff !important; text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 767px) { .el-section { flex-direction: column; } .el-section > .el-colonne { flex-basis: auto; } }

/* ═════ 11 · TÉLÉPHONE ET TABLETTE ═════ */

@media (max-width: 1100px) {
	.menu-ordi { display: none; }
	.entete-burger { display: block; }
	.entete-barre .enveloppe { display: grid; grid-template-columns: 1fr auto 1fr; }
	.entete-logo { justify-self: center; }
	.entete-actions { justify-self: end; }
	.entete-note { display: none; }
	.entete-avis .enveloppe { grid-template-columns: minmax(0, 1fr); }
	.grille { --col: 3; }
	.grille-defilante { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
	.grille-defilante > * { scroll-snap-align: start; }
	.grille.carrousel-piste { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; }
	.fiche-tete { grid-template-columns: minmax(0, 1fr); padding: 0 0 60px; gap: 18px; }   /* minmax(0, …) : rien (bouton Stripe, fil d'Ariane, mot long) ne peut élargir la fiche au-delà de l'écran */
	.fiche-tete > *, .fiche-colonne > *, .fiche-achat form { min-width: 0; max-width: 100%; }
	.fiche-achat iframe, .fiche-achat .__PrivateStripeElement { max-width: 100% !important; }
	.fiche-colonne, .fiche-recit-texte { overflow-wrap: anywhere; }
	.fiche-visuel { aspect-ratio: 16 / 10; }
	.fiche-diapo { aspect-ratio: 1; }
	.fiche-info { display: none; }
	.fiche-titre { font-size: 22px; }
	.fiche-colonne { gap: 14px; }
	.fiche-surtitre { display: none; }
	.fiche-colonne > * { order: 2; }
	.fiche-colonne > .fiche-titre, .fiche-colonne > .lieu-puces, .fiche-colonne > .fiche-chapeau, .fiche-colonne > .fiche-prix, .fiche-colonne > .fiche-achat { order: 1; }
	.confiance { margin: 0; padding: 0; border: 0; gap: 6px 16px; font-size: 12px; }
	.offre-pack { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px 14px; }
	.offre-compacte { grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto; gap: 0 12px; }
	.offre-pack.offre-compacte .offre-image { grid-row: 1 / 3; width: 52px; height: 52px; }
	.offre-compacte .offre-nom { grid-column: 2; align-self: end; font-size: 15px; }
	.offre-compacte .offre-nom span { display: none; }
	.offre-compacte .offre-prix { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; }
	.offre-compacte .bouton-petit { grid-column: 3; grid-row: 1 / 3; max-width: none; }
	.offre-pack .offre-image, .offre-liste .offre-image { width: 72px; height: 72px; }
	.offre-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.offre-actions .bouton-petit { flex: 1; max-width: 60%; }
	.duo { flex-wrap: wrap; }
	.duo-nom { flex-basis: calc(100% - 120px); }
	.duo-prix { flex-direction: row; align-items: baseline; gap: 8px; margin-right: auto; }
	.duo .bouton-petit { flex: none; }
	.liste-titre .rond { width: 56px; height: 56px; }
	.liste-titre h1 { font-size: 24px; }
	.filtres-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 14px 0 20px; }
	.bandeau-pack { gap: 12px; }
	.filtres-outils { order: -1; margin-left: 0; }
	.bandeau-pack-lien { display: none; }
	.fiche-achat .single_add_to_cart_button { padding: 17px 24px; }
	.tunnel { grid-template-columns: minmax(0, 1fr); }
	.tunnel-cote { order: -1; padding: 0; border-left: 0; }
	.tunnel-cote .el { display: none; }
	.fiche-colonne { width: 90%; margin: 0 auto; padding-top: 0; }
	.fiche-recit { padding: 48px 0 40px; }
	.fiche-recit-texte h2 { font-size: 22px; }
	.fiche-recit-texte .texte { font-size: 16px; }
	.fiche-recit-carte { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fiche-recit-cote { position: static; }
	.fiche-pack .pack-contenu { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px 16px 16px; }
	.bandeau { min-height: 420px; align-items: flex-end; padding: 36px 28px; }
	.bandeau::after { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .82) 70%); }
	.bandeau h2 { font-size: 24px; }
	.bandeau p { font-size: 15px; }
	.bandeau-boutons { margin-top: 20px; }
	.pied-principal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pied-lettre { grid-column: 1 / -1; max-width: 560px; }
	.grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.trouver-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.trouver-tuiles-pays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	.ariane-sur-image { max-width: none; right: var(--bord); }   /* les mêmes 20 px à gauche et à droite que le reste de la fiche */
	.ariane-sur-image p { text-align: left; }
	/* Comme Elementor sur téléphone : les colonnes prennent toute la largeur et passent les unes sous les autres
	   (une largeur réglée pour le mobile dans Elementor, écrite plus loin dans la page, reste prioritaire). */
	.el-c { --larg: 100%; }
	.el-c, .el-c > .el-in { flex-wrap: wrap; }
	/* Les grands blocs Elementor : leur contenu (90 %) donne déjà la marge du site ; leurs 20 px de plus la doublaient. */
	.el > .el-c.el-boite { padding-left: 0 !important; padding-right: 0 !important; }
	.el > .el-c.el-boite > .el-in { max-width: 90% !important; }   /* même marge partout, y compris les blocs réglés en pixels (1140 px) */
	.el > .el-c:not(.el-boite) { padding-left: 5% !important; padding-right: 5% !important; }   /* les blocs pleine largeur : même marge (ex. « Voir le prix » des fiches d'équipement) */
	.el-c .el-c.el-boite > .el-in { max-width: none !important; }   /* un bloc à 90 % dans un bloc à 90 % : le texte rétrécissait encore */
	.el-89c06a6 { width: 100% !important; }   /* l'introduction des catégories de matériel */
	.el-e572d16, .el-20c365b { --larg: 100% !important; }
	.el-c:has(> h1), .el-c:has(> h2) { --larg: 100% !important; }   /* en-têtes et bandeaux réglés à 40-50 % sur mobile : le texte prend toute la largeur */
	.el-c > *, .el-in > * { min-width: 0; max-width: 100%; }   /* un tableau large ne pousse plus tout son bloc hors de l'écran */
	.wp-block-table, .el-texte table { display: block; max-width: 100%; overflow-x: auto; }
	/* Les blocs Elementor imbriqués sans fond n'ajoutent plus leur marge intérieure (10 à 20 px chacun) à celle du site,
	   tout tombe à 20 px des bords (les textes réglés en % prennent la largeur : inc/elementor-css.php). */
	.el-c .el-c:not(.el-fond) { padding-left: 0 !important; padding-right: 0 !important; }
	.el-c:has(> .el-defilant) { --larg: 100% !important; }   /* les avis de l'accueil : toute la largeur, un avis par écran */
	.el-defilant { grid-auto-columns: 100%; scrollbar-width: none; }
	.el-defilant::-webkit-scrollbar { display: none; }
   /* les en-têtes (blog, articles…) réglés à 50 % sur mobile : le titre prend toute la largeur */   /* les deux phrases d'accroche des fiches d'équipement (35 % chacune sur mobile) */
	.carte-amazon .carte-panier { gap: 4px; padding: 10px 4px; font-size: 9.5px; letter-spacing: .2px; }
	.carte-amazon .carte-titre { font-size: 11px; }
	.barre-achat { bottom: 10px; }
	.barre-achat-int { gap: 10px; padding: 6px 6px 6px 8px; }
	.barre-achat-image { width: 38px; height: 38px; }
	.barre-achat-texte { display: none; }
	.barre-achat-prix { font-size: 15px; }
	.barre-achat-prix { margin-right: auto; }
	.barre-achat .bouton { flex: 1; justify-content: center; padding: 13px 14px; font-size: 11.5px; }
	.barre-achat .bouton span { white-space: nowrap; }
	.single-product .motif-carte { display: none; }   /* presque caché par la photo, et l'élément le plus lent à paraître */
	.trouver-tete { padding-top: 20px; }
	.trouver-intro { font-size: 15.5px; margin-bottom: 22px; }
	.trouver-section { margin-top: 52px; }
	.trouver-section-titre { font-size: 22px; }
	.trouver-tuiles, .trouver-tuiles-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.trouver-tuile { flex-direction: row; align-items: center; gap: 10px; padding: 11px 12px; }
	.trouver-tuile-picto { flex: none; width: 32px; height: 32px; }
	.trouver-tuile-picto svg { width: 15px; height: 15px; }
	.trouver-tuiles-regions li:not(:first-child) .trouver-tuile-picto { display: none; }
	.trouver-tuiles-regions .trouver-tuile { min-height: 64px; padding: 10px 14px; }
	.trouver-tuile-texte > span { font-size: 14px; }
	.trouver-tuiles-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trouver-tuiles-types .trouver-tuile { padding: 12px; gap: 10px; }
	.trouver-tuiles-types .trouver-tuile-picto { width: 36px; height: 36px; }
	.trouver-tuile-fleche { display: none; }
	.trouver-atouts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; text-align: left; font-size: 12.5px; }
	.el-c2636f6 { margin: 48px auto !important; padding-top: 44px !important; }
	.el-c2636f6 h2 { font-size: 22px !important; }
	.el-c2636f6 p { font-size: 15.5px !important; }
	.localisateur-carte { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 22px; }
	.localisateur-moi { justify-content: center; height: 50px; }
	.localisateur-ou { display: none; }
	.localisateur-recherche { padding: 0 12px; border-top: 1px solid var(--gris); }
	.localisateur-recherche input[type="search"] { height: 50px; }
	.localisateur-suggestions { left: -8px; right: -8px; top: calc(100% + 10px); }

	.texte-bas { padding-top: 44px; margin-bottom: 48px; }
	.texte-bas .texte { font-size: 15.5px; }
	.texte-bas .texte h2 { font-size: 22px; }
	.texte table { display: block; overflow-x: auto; font-size: 14px; }
	.texte th, .texte td { padding: 10px 12px; }
	/* Sur téléphone, le carrousel va jusqu'au bord et laisse voir la carte suivante. */
	.voisines .grille.carrousel-piste { width: auto; margin: 0; padding: 0 5%; scroll-padding: 0 5%; grid-auto-columns: 62%; }
	.carrousel-fleches { display: none; }
	.bandeau-pack { padding: 8px 8px 8px 8px; }
	.bandeau-pack-image { width: 42px; height: 42px; }
	.bandeau-pack-texte { flex-direction: column; gap: 2px; }
	.bandeau-pack-texte a { font-size: 14px; }
	.bandeau-pack-texte span { font-size: 12px; }
	.bandeau-pack .bouton-petit { padding: 10px 14px; }
	.voir-plus-lieux { width: 100%; }
	.dep-commune > span { min-width: 20px; height: 20px; padding: 0 4px; border-width: 1.5px; font-size: 10px; }
	.dep-commune em { display: none; }
	.dep-liste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-right: -5vw; padding-right: 5vw; }
	.barre-panier { bottom: 10px; width: calc(100vw - 20px); flex-wrap: wrap; gap: 10px; padding: 12px 12px 12px 14px; }
	.barre-panier-info { flex-basis: calc(100% - 44px); }
	.barre-panier-info span { white-space: normal; font-size: 12px; }
	.barre-panier-actions { flex: 1; }
	.barre-panier-commander { flex: 1; justify-content: center; padding: 13px 16px; }
	.barre-panier-fermer { position: absolute; top: 10px; right: 10px; }
	body.avec-barre-panier { padding-bottom: 130px; }
	.ville-etiquette { gap: 4px; padding: 4px 8px; font-size: 10px; }
	.ville-etiquette span { padding: 2px 5px; font-size: 9px; }
	/*
	 * Le tunnel comme sur la page d'origine : le panier replié en « Résumé de
	 * la commande » au-dessus du formulaire, l'avis en bas. La colonne de côté
	 * s'efface (display: contents) pour que ses blocs se rangent autour du formulaire.
	 */
	.tunnel-formulaire { order: 1; padding: 0 20px 24px; }
	/* Deux lignes de gagnées sous la ligne de flottaison : prénom et nom, code postal et ville côte à côte. */
	html body.page-tunnel #wfacp-e-form #billing_first_name_field, html body.page-tunnel #wfacp-e-form #billing_last_name_field { width: 50% !important; }
	html body.page-tunnel #wfacp-e-form #billing_postcode_field { width: 38% !important; }
	html body.page-tunnel #wfacp-e-form #billing_city_field { width: 62% !important; }
	.tunnel-cote { display: contents; }
	.tunnel-resume { order: 0; margin: 16px 20px 0; border: 1px solid var(--gris); border-radius: 5px; }
	.tunnel-resume-titre { display: flex; }
	.tunnel-resume .tunnel-panier { display: none; padding: 12px 15px; border-top: 1px solid var(--gris); }
	.tunnel-resume.ouvert .tunnel-panier { display: block; animation: apparait .3s ease-out; }
	.tunnel-resume .wfacp-order-summary-label { display: none !important; }
	.tunnel-recu { order: 2; margin: 0 20px 24px; padding: 18px 0 0; }
	.tunnel-cote > .el { order: 3; display: block; margin: 0 20px 40px; }
	.entete-promo { font-size: 10px; }
	.grille { --col: 2; gap: 24px 10px; }
	.grille-defilante { grid-auto-columns: 70%; }
	.carte-large { grid-column: span 2; }
	.remises { gap: 8px; }
	.remises p { font-size: 12px; }
	.fiche-info { top: 18%; font-size: 10px; }
	.bandeau { min-height: 300px; padding: 28px 22px; }
	.pied-garanties .enveloppe { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.pied-principal { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 48px 0 40px; }
	.pied-confiance { flex-direction: column; text-align: center; }
	.pied-paiement { width: 220px; }
	.pied-bas { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
	.pied-bas .pied-paiement { justify-self: center; }
	.grille-articles { grid-template-columns: 1fr; }
	.fenetre-lettre[open] { grid-template-columns: 1fr; inset: auto 12px 12px; width: auto; border-radius: 16px; }
	.fenetre-lettre-texte { padding: 26px 22px 22px; }
	.fenetre-lettre-titre { padding-right: 44px; font-size: 19px; }
	.fenetre-lettre-image { display: none; }
	.cache-mobile { display: none !important; }
}

/* ═════ 12 · AJOUT AU PANIER ANIMÉ ═════ */

.vol-panier { position: fixed; z-index: 300; border-radius: 8px; object-fit: cover; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .7s cubic-bezier(.5, -.25, .25, 1), opacity .7s ease-in; }
.entete-panier.rebond { animation: rebond .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rebond { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1); } }
/* Pendant l'envoi, le texte s'efface et une roue tourne à sa place : rien ne bouge autour. */
.ajout-en-cours, .single_add_to_cart_button.loading { position: relative; pointer-events: none; color: transparent !important; }
.ajout-en-cours > *, .single_add_to_cart_button.loading::before { visibility: hidden; }
.ajout-en-cours::after, .single_add_to_cart_button.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: tourne .6s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.ajout-fait { background: #2E7D4F !important; color: #fff !important; }
.ajout-fait .icone { animation: coche .4s ease-out; }
@keyframes coche { from { transform: scale(0); } to { transform: scale(1); } }

/*
 * Les boutons d'ajout : un petit sac dont le « + » tourne et qui saute au
 * survol, un reflet qui traverse le bouton, un léger soulèvement (transform
 * seulement, sans rien pousser autour). Le bouton de la fiche, rendu par
 * WooCommerce, reçoit le même sac en masque.
 */
.icone .sac-plus { transform-box: view-box; transform-origin: 12px 14px; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
[data-ajout-anime]:hover .icone, [data-ajouter]:hover .icone { animation: sac-saut .55s cubic-bezier(.3, 1.4, .5, 1); }
[data-ajout-anime]:hover .sac-plus, [data-ajouter]:hover .sac-plus { transform: rotate(90deg); }
/* Le cadenas : l'anse se soulève au survol, comme pour s'ouvrir. */
.icone .cadenas-anse { transform-box: view-box; transform-origin: 8.5px 10.5px; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
[data-ajout-anime]:hover .cadenas-anse, [data-ajouter]:hover .cadenas-anse { transform: translateY(-1.6px) rotate(-14deg); }
@keyframes sac-saut { 0% { transform: none; } 35% { transform: translateY(-3px) rotate(-10deg); } 65% { transform: translateY(0) rotate(6deg); } 100% { transform: none; } }
.bouton[data-ajout-anime], .bouton[data-ajouter], .carte-panier[data-ajout-anime], .fiche-achat .single_add_to_cart_button { position: relative; overflow: hidden; isolation: isolate; }
.bouton[data-ajout-anime]::before, .bouton[data-ajouter]::before, .carte-panier[data-ajout-anime]::before, .fiche-achat .single_add_to_cart_button::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; z-index: -1; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none;
}
.bouton[data-ajout-anime]:hover::before, .bouton[data-ajouter]:hover::before, .carte-panier[data-ajout-anime]:hover::before, .fiche-achat .single_add_to_cart_button:hover::after { left: 130%; }
.bouton[data-ajout-anime]:hover, .bouton[data-ajouter]:hover, .fiche-achat .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(66, 66, 66, .28); }
.bouton[data-ajout-anime]:active, .bouton[data-ajouter]:active, .fiche-achat .single_add_to_cart_button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.bouton[data-ajout-anime]:hover .icone, .bouton[data-ajouter]:hover .icone { transform: none; }
.fiche-achat .single_add_to_cart_button.loading::after { left: 0; right: 0; width: 16px; z-index: 1; background: none; transform: none; transition: none; }
.bouton-petit[data-ajout-anime], .bouton-petit[data-ajouter] { transition: background-color .2s, transform .25s, box-shadow .25s; }
.fiche-achat .single_add_to_cart_button { display: flex; align-items: center; justify-content: center; gap: 12px; transition: background-color .2s, transform .25s, box-shadow .25s; }
.fiche-achat .single_add_to_cart_button::before {
	content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 016.8-1.2M12 14.3v2.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 016.8-1.2M12 14.3v2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fiche-achat .single_add_to_cart_button:hover::before { animation: sac-saut .55s cubic-bezier(.3, 1.4, .5, 1); }
.fiche-achat .single_add_to_cart_button.ajout-fait::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	animation: coche .4s ease-out;
}
@media (hover: none) { .bouton[data-ajout-anime]:hover, .bouton[data-ajouter]:hover, .fiche-achat .single_add_to_cart_button:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
	.vol-panier, .entete-panier.rebond, .ajout-fait .icone, .fiche-video-rond::before, .fiche-video-rond::after, [data-ajout-anime]:hover .icone, [data-ajouter]:hover .icone, .fiche-achat .single_add_to_cart_button::before, .accordeon[open] > .accordeon-corps { animation: none !important; transition: none !important; }
	.fiche-video-rond::before, .fiche-video-rond::after { display: none; }
}