/*
 * baliturismo.com — assets/css/site.css
 * Habillage propre au site (DIRECTION-ARTISTIQUE.md du 05/10/2026). Chargé en dernier
 * (functions.php §7) : peut surcharger les replis des blocs figés (theme/blocs/*.css)
 * puisque ceux-ci consomment les variables --sb-* déjà déclarées dans style.css.
 */

/* ==========================================================================
   0. UTILITAIRES
   ========================================================================== */
.bt-doux{ color: var(--bt-basalte); }
.bt-section--sombre .bt-doux, .bt-section--profond .bt-doux, .bt-section--abysse .bt-doux{ color: var(--bt-basalte-clair); }

/* ==========================================================================
   1. EN-TÊTE
   ========================================================================== */
.bt-header{
	position: sticky; top: 0; z-index: 60; height: 72px;
	background: rgba(15,52,64,.92); backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255,241,228,.08);
}
.bt-page-sans-hero .bt-header{ background: rgba(15,52,64,.97); }
.bt-header__conteneur{
	max-width: var(--sb-conteneur); margin-inline: auto; padding-inline: 16px; height: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
@media (min-width: 640px){ .bt-header__conteneur{ padding-inline: 24px; } }

.bt-logo{ display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.bt-logo__tete{ width: 40px; height: 40px; border-radius: 50%; }
.bt-logo__texte{ font-family: var(--sb-titre); font-size: 1.25rem; color: var(--bt-frangipanier); white-space: nowrap; }
@media (max-width: 420px){ .bt-logo__texte{ font-size: 1.0625rem; } .bt-header__cta{ padding: 0 14px; font-size: .75rem; } }

.bt-nav{ display: flex; align-items: center; gap: 28px; list-style: none; flex: 1; justify-content: center; }
.bt-nav li{ list-style: none; }
.bt-nav a{
	color: var(--bt-frangipanier); text-decoration: none; font-family: var(--sb-texte); font-weight: 600; font-size: .9375rem;
	position: relative; padding-bottom: 6px; white-space: nowrap;
}
.bt-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--bt-lave); transition: right .2s ease; }
.bt-nav a:hover::after, .bt-nav a.current-menu-item::after{ right: 0; }

.bt-header__actions{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* CORRECTION passe 1 (05/10) : à 390 px, logo + CTA + burger dépassaient (x=421) — le
   bouton circuit se replie dans le panneau mobile (il y est déjà, cf. header.php) et
   l'en-tête mobile ne garde que logo + burger, conforme à DA §9.8 « logo + bouton
   circuit compact + menu » une fois la largeur suffisante (>=700px). */
.bt-header__cta{ display: none; }
@media (min-width: 700px){ .bt-header__cta{ display: inline-flex; } }
.bt-burger{ background: none; border: 0; color: var(--bt-frangipanier); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
@media (min-width: 900px){ .bt-burger{ display: none; } }
.bt-nav{ display: none; }
@media (min-width: 900px){ .bt-nav{ display: flex; } }

.bt-nav-mobile{
	position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: var(--bt-lagon-nuit); color: var(--bt-frangipanier);
	z-index: 100; padding: 20px; display: flex; flex-direction: column; gap: 24px;
	transform: translateX(100%); transition: transform .3s ease, visibility .3s ease; overflow-y: auto;
	visibility: hidden;
}
/* CORRECTION passe 1 : panneau fermé mesuré hors écran (x jusqu'à 1760 même à 1440) —
   un élément position:fixed + transform continue d'étendre le scrollWidth du document
   dans certains moteurs tant qu'il reste visible ; visibility:hidden le retire vraiment. */
.bt-nav-mobile.est-ouvert{ transform: translateX(0); visibility: visible; }
.bt-nav-mobile__tete{ display: flex; align-items: center; justify-content: space-between; }
.bt-nav-mobile__fermer{ background: none; border: 0; color: inherit; width: 44px; height: 44px; cursor: pointer; }
.bt-nav-mobile__liste{ list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bt-nav-mobile__liste a{ display: block; padding: 14px 4px; color: inherit; text-decoration: none; font-size: 1.125rem; font-family: var(--sb-texte); font-weight: 600; border-bottom: 1px solid rgba(255,241,228,.08); }

.bt-main{ overflow-x: hidden; }

/* ==========================================================================
   2. SECTIONS — rythme et alternance (DA §7)
   ========================================================================== */
.bt-section{ position: relative; padding-block: clamp(40px, 6vw, 64px); }
.bt-section--sombre{ background: var(--bt-lagon-nuit); color: var(--bt-frangipanier); }
.bt-section--profond{ background: var(--bt-lagon-profond); color: var(--bt-frangipanier); }
.bt-section--abysse{ background: var(--bt-abysse); color: var(--bt-frangipanier); }
.bt-section--brume{ background: var(--bt-brume); color: var(--bt-encre); }
.bt-section--creme{ background: var(--bt-frangipanier); color: var(--bt-encre); }
.bt-section--halo-lave{ background-image: radial-gradient(60% 50% at 85% 20%, rgba(255,107,74,.16), transparent 70%); }
:is(.bt-section--sombre,.bt-section--profond,.bt-section--abysse) h2{ color: var(--bt-frangipanier); }
.bt-section--sombre h2, .bt-section--profond h2{ text-shadow: 0 0.06em 0 rgba(8,32,42,.6); }
.bt-section--creme h2, .bt-section--brume h2{ color: var(--bt-encre); text-shadow: 0 0.05em 0 #BFE9D6; }

.bt-section__tete{ margin-bottom: clamp(24px,4vw,40px); max-width: 640px; }
.bt-section__tete h2{ margin: 0; }
.bt-section__cta{ margin-top: 28px; }

.bt-crete{ display: block; width: 100%; height: auto; position: relative; }
.bt-crete--haut{ margin-bottom: -2px; }
.bt-crete-fermeture{ margin-bottom: -2px; }
.bt-crete-fermeture svg{ display: block; width: 100%; }

/* ==========================================================================
   3. HERO ACCUEIL (DA §9.1, §3.2) — CORRECTION passe 1 (05/10) :
   hauteur = écran (header 72px compris, plafond 860px) ; 2 zones strictes,
   Wayan dimensionné en HAUTEUR (pas en largeur) pour rester entièrement dans
   la colonne droite (>=52% de la largeur) et ne jamais passer sous le texte.
   ⚠️ Les sélecteurs Wayan sont COMPOSÉS (.bt-hero .bt-hero__wayan) : seuls,
   ils perdaient face à la règle générique .bt-mascotte{width:100%} plus bas
   dans ce même fichier (même spécificité, ordre de cascade) — c'est la cause
   du Wayan géant mesuré en passe 1.
   ========================================================================== */
.bt-hero{
	position: relative; background: var(--bt-lagon-nuit); overflow: hidden;
	height: min(calc(100vh - 72px), 788px); min-height: 540px;
	display: flex; align-items: flex-start;
}
.bt-hero__scene{ position: absolute; inset: 0; z-index: 0; }
.bt-hero__scene picture, .bt-hero__scene img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bt-hero__scene .bt-crete--hero{ position: absolute; left: 0; right: 0; bottom: -2px; height: auto; }
.bt-hero .bt-hero__wayan{
	position: absolute; left: auto; right: clamp(16px, 4vw, 72px); bottom: 0;
	width: auto; height: 75%; max-width: 46%; object-fit: contain; z-index: 2;
	animation: bt-respire 5s ease-in-out infinite;
}
@keyframes bt-respire{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.012); } }

/* CORRECTION passe 2 : avec align-items:flex-start, ce padding-top fixe l'air sous
   l'en-tête (surtitre caché, titre collé au header) — déterministe, indépendant de la
   hauteur de la carte. */
.bt-hero__corps{ position: relative; z-index: 3; padding-block: 40px 24px; width: 100%; }
.bt-hero__texte{ max-width: 50%; }
/* CORRECTION passe 4 (juge, erreur 3) : le clamp basé sur vw continuait de grandir
   au-delà de 1280px (largeur réelle de la colonne, plafonnée par --sb-conteneur) —
   le titre rendait donc PLUS grand à 1920 qu'à 1440 pour la MÊME largeur de colonne,
   d'où 5 lignes à 1920 contre 4 à 1440. Plafond abaissé et atteint dès ~1300px : la
   taille n'augmente plus au-delà, 1920 et 1440 affichent désormais le même nombre de
   lignes (≤ 4). */
.bt-hero__titre{
	font-size: clamp(2.125rem, 1.4rem + 2vw, 3.375rem); color: var(--bt-frangipanier); line-height: 1.05;
	text-shadow: 0 0.07em 0 var(--bt-abysse); margin-bottom: 8px;
}
.bt-hero__chapo{
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--bt-basalte-clair); max-width: 46ch; margin-bottom: 10px;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* CORRECTION passe 4 (juge, erreur 3) : les compteurs sont maintenant APPELÉS avant
   la carte dans le gabarit (sous le titre, comme demandé) — marge basse au lieu de
   marge haute. */
.bt-hero__compteurs{ display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; color: var(--bt-frangipanier); font-size: .8125rem; }
.bt-hero__compteurs strong{ font-family: var(--sb-titre); font-size: 1.5rem; display: block; color: var(--bt-jade); }
/* Carte formulaire du hero : version compacte pour tenir sous le pli (DA « carte ≤330px
   à 1440x780 ») — n'affecte pas la carte pleine page de page-devis.php. */
.bt-hero__carte.bt-carte-formulaire{ padding: 18px; }
.bt-hero__carte .bt-devis-etapes{ margin-bottom: 10px; }
.bt-hero__carte .bt-devis-etape legend{ margin-bottom: 8px; }
.bt-hero__carte .bt-ligne-2{ margin-bottom: 8px; }
.bt-hero__carte .bt-champ{ margin-bottom: 8px; }
.bt-hero__carte .bt-duree-pills{ gap: 6px; }
.bt-hero__carte .bt-duree-pills span{ min-height: 36px; padding: 0 12px; }
@media (max-width: 700px){
	/* CORRECTION passe 4 (juge, erreurs 2 et 4) : .bt-hero__scene était en
	   position:absolute dans un .bt-hero en hauteur:auto — hauteur indéfinie, l'image
	   ne se rendait jamais (premier écran mobile sans aucun visuel). La scène devient
	   un bandeau en flux normal, à hauteur FIXE, au-dessus du texte : paysage ET
	   mascotte redeviennent visibles, sans jamais recouvrir le titre ni la carte. */
	.bt-hero{ height: auto; min-height: 0; display: block; }
	.bt-hero__scene{
		position: relative; inset: auto; height: 42vw; min-height: 160px; max-height: 220px;
		overflow: hidden;
	}
	.bt-hero .bt-hero__wayan{
		display: block; position: absolute; right: 10px; bottom: 6px; left: auto; top: auto;
		height: auto; width: 34%; max-width: 140px; max-height: none; animation: none;
	}
	.bt-hero__corps{ padding-block: 16px 20px; position: relative; z-index: 3; }
	.bt-hero__texte{ max-width: none; }
	.bt-hero__titre{ font-size: clamp(1.625rem, 1.2rem + 3vw, 1.875rem); margin-bottom: 6px; }
	.bt-hero__chapo{ -webkit-line-clamp: 1; margin-bottom: 8px; }
	/* CORRECTION passe 5 (juge passe 2, défaut bloquant n°1) : bouton sous le pli
	   (~855 px) sur l'accueil mobile. Compteurs ramenés sur une ligne, carte et
	   pastilles de durée compactées, bandeau paysage abaissé à 120-140 px. */
	.bt-hero__compteurs{ margin-bottom: 8px; gap: 14px; }
	.bt-hero__compteurs strong{ display: inline; font-size: 1.0625rem; margin-right: 4px; }
	.bt-hero__carte.bt-carte-formulaire{ padding: 14px; }
	.bt-hero__carte .bt-devis-etapes{ margin-bottom: 8px; }
	.bt-hero__carte .bt-devis-etape legend{ margin-bottom: 6px; font-size: .9375rem; }
	.bt-hero__carte .bt-ligne-2{ margin-bottom: 0; gap: 6px; }
	.bt-hero__carte .bt-champ{ margin-bottom: 6px; }
	/* Les 4 durées sur UNE rangée, jamais 2 (juge passe 5, défaut n°1). */
	.bt-hero__carte .bt-duree-pills{ flex-wrap: nowrap; gap: 4px; }
	.bt-hero__carte .bt-duree-pills label{ flex: 1; min-width: 0; }
	.bt-hero__carte .bt-duree-pills span{
		min-height: 34px; padding: 0 2px; font-size: .6875rem; width: 100%;
		justify-content: center; white-space: nowrap;
	}
	/* Champ dates déplacé en étape 2 par assets/js/site.js (data-bt-dates-mobile). */
	.bt-hero__carte [data-bt-dates-mobile]{ margin-bottom: 12px; }
}

@media (max-width: 700px){
	/* Bandeau paysage + Wayan abaissé à 120-140 px (juge passe 5, défaut IMPORTANT n°8) :
	   était presque noir et minuscule à 160-220 px avec recadrage « top ». */
	.bt-hero__scene{ height: 34vw; min-height: 120px; max-height: 140px; }
	.bt-hero__scene img{ object-position: center 68%; }
	.bt-hero .bt-hero__wayan{ width: auto; height: 100%; max-width: 200px; right: 10px; bottom: 0; }
}

/* Carte formulaire flottante — « bulle » (DA §9.1) */
.bt-carte-formulaire{
	background: var(--bt-frangipanier); color: var(--bt-encre); border-radius: var(--sb-rayon-grand);
	padding: 26px; max-width: 520px; box-shadow: var(--sb-ombre), var(--sb-ombre-forte); position: relative;
}
.bt-carte-formulaire--compacte{ max-width: 480px; padding: 22px; }
.bt-hero__carte{ margin-top: 4px; }
.bt-carte-formulaire__wayan{ display: none; }

/* CORRECTION passe 5 (juge passe 2, défaut n°2) : les <ol> ont un padding-left:40px
   natif que list-style:none ne retire pas — les ronds « 1 2 3 4 » flottaient donc
   40 px à droite du titre de la carte au lieu de s'aligner sur lui. */
.bt-devis-etapes{ list-style: none; display: flex; align-items: center; gap: 6px; margin: 0 0 18px; padding-left: 0; }
.bt-devis-etapes li{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bt-brume); color: var(--bt-basalte); flex-shrink: 0; position: relative; }
.bt-devis-etapes li:not(:last-child)::after{ content:""; position:absolute; left: 100%; top: 50%; width: 14px; height: 2px; background: var(--bt-filet); }
.bt-devis-etapes li.est-actif, .bt-devis-etapes li.est-fait{ background: var(--bt-jade); color: var(--bt-abysse); }
/* CORRECTION passe 2 (règle 2) : 4 glyphes d'icône identiques (« etape ») étaient
   illisibles en 16px — numéro visible à la place, même pastille/ligne reliée. */
.bt-devis-etapes__num{ font-family: var(--sb-titre); font-size: .875rem; line-height: 1; }

/* CORRECTION passe 2 (règle 2) : le <fieldset> garde son cadre natif du navigateur
   (border groove) en plus de la carte frangipanier → double cadre. Reset générique,
   couvre la carte du hero ET celle de page-devis.php (même composant). */
.bt-devis-etape{ border: 0; margin: 0; padding: 0; min-width: 0; }
.bt-devis-etape legend{ font-family: var(--sb-titre); font-size: 1.0625rem; padding: 0; margin-bottom: 14px; color: var(--bt-encre); }
.bt-ligne-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 480px){ .bt-ligne-2{ grid-template-columns: 1fr; } }
.bt-champ{ margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.bt-champ label{ font-size: .8125rem; font-weight: 600; color: var(--bt-basalte); }
.bt-champ input, .bt-champ select, .bt-champ textarea{
	border: 1.5px solid var(--bt-filet); border-radius: 10px; padding: 11px 13px; font-size: .9375rem;
	font-family: var(--sb-texte); background: #fff; color: var(--bt-encre); min-height: 44px;
}
.bt-champ input:focus, .bt-champ select:focus, .bt-champ textarea:focus{ outline: 2px solid var(--bt-lave); outline-offset: 1px; }

.bt-duree-pills{ display: flex; flex-wrap: wrap; gap: 8px; }
.bt-duree-pills label{ position: relative; }
.bt-duree-pills input{ position: absolute; opacity: 0; }
.bt-duree-pills span{
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
	border: 1.5px solid var(--bt-filet); font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.bt-duree-pills input:checked + span{ background: var(--bt-jade); border-color: var(--bt-jade); color: var(--bt-abysse); }

.bt-devis-envies{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.bt-devis-envie{ position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bt-filet); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: .875rem; }
.bt-devis-envie input{ position: absolute; opacity: 0; }
.bt-devis-envie__icone{ color: var(--bt-lave-sombre); display: flex; flex-shrink: 0; }
.bt-devis-envie input:checked ~ *, .bt-devis-envie:has(input:checked){ background: var(--bt-brume); border-color: var(--bt-jade); }

.bt-devis-nav{ display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.bt-btn--large{ width: 100%; margin-top: 8px; }
.bt-devis-consentement{ display: block; font-size: .8125rem; color: var(--bt-basalte); margin: 10px 0 16px; }
.bt-devis-consentement a{ color: var(--bt-lave-sombre); }
.bt-devis-delai{ font-size: .8125rem; color: var(--bt-basalte); margin-top: 10px; text-align: center; }

.bt-devis-confirmation{ text-align: center; }
.bt-devis-confirmation .bt-mascotte{ width: 110px; margin: 0 auto 12px; }
.bt-devis-recap{ list-style: none; text-align: left; background: var(--bt-brume); border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: .875rem; display: grid; gap: 6px; }

.bt-form-court{ display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.bt-form-court .bt-champ{ flex: 1; min-width: 160px; margin-bottom: 0; }
.bt-form-court .bt-btn{ flex-shrink: 0; }

/* ==========================================================================
   4. MASCOTTE — générique
   ========================================================================== */
.bt-mascotte{ width: 100%; height: auto; display: block; }

/* ==========================================================================
   5. ARGUMENTS
   ========================================================================== */
.bt-arguments__liste{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px){ .bt-arguments__liste{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .bt-arguments__liste{ grid-template-columns: 1fr; } }
.bt-arguments__item{ display: flex; align-items: center; gap: 14px; font-family: var(--sb-texte); font-weight: 600; font-size: .9375rem; }
.bt-arguments__item .bt-icone{ color: var(--bt-jade); flex-shrink: 0; }

/* ==========================================================================
   6. CARTE DE L'ARCHIPEL — passe 1 : remplacée par 5 cartes de région photo
   (grille 3+2) le temps de dessiner de vraies îles ; la carte archipel garde
   son nom de fonction/d'appel, seul le rendu change (CORRECTIONS-V1 §3).
   ========================================================================== */
/* CORRECTION passe 2 (règle 3) : 5 cartes sur 3 colonnes laissaient une case vide
   (3+2) et portaient la section à 993 px à 1440 — 5 colonnes dès 1200 px (1 seule
   ligne, cartes plus étroites donc section plus basse). */
.bt-regions-grille{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1199px){ .bt-regions-grille{ grid-template-columns: repeat(3,1fr); gap: 20px; } }
@media (max-width: 760px){ .bt-regions-grille{ grid-template-columns: repeat(2,1fr); } }
/* CORRECTION passe 4 (juge, erreur 22) : 5 cartes empilées en 1 colonne faisaient
   ~1500px de haut sur mobile — 2 colonnes conservées, cartes deux fois moins hautes. */
@media (max-width: 480px){
	.bt-regions-grille{ grid-template-columns: repeat(2,1fr); gap: 12px; }
	/* MINEUR n°19 : Lombok (5e carte, impaire) seule sur sa ligne — pleine largeur. */
	.bt-regions-grille > :nth-child(5){ grid-column: 1 / -1; }
}
.bt-regions-carte{
	position: relative; display: block; border-radius: var(--sb-rayon); overflow: hidden;
	aspect-ratio: 4/3; text-decoration: none; box-shadow: var(--sb-ombre);
}
.bt-regions-carte img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.bt-regions-carte:hover img{ transform: scale(1.04); }
.bt-regions-carte__nom{
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
	background: linear-gradient(0deg, rgba(8,32,42,.88), transparent); color: var(--bt-frangipanier);
	font-family: var(--sb-texte); font-weight: 700; font-size: .9375rem;
}
.bt-regions-carte__nom i{ display: block; font-style: normal; font-weight: 600; font-size: .75rem; color: var(--bt-basalte-clair); margin-top: 2px; }

/* Ancien rendu « points sur carte SVG » — gardé au cas où la fonction y revienne,
   inutilisé tant que bt_carte_archipel() rend la grille de régions ci-dessus. */
.bt-archipel{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .bt-archipel{ grid-template-columns: 1fr; } }
.bt-archipel__carte{ width: 100%; height: auto; }
.bt-archipel__carte text{ font-family: var(--sb-texte); font-size: 3.4px; fill: var(--bt-frangipanier); font-weight: 600; text-anchor: middle; }
.bt-archipel__ile circle{ fill: var(--bt-jade); cursor: pointer; transition: r .15s ease; }
.bt-archipel__ile.est-bali circle{ fill: var(--bt-lave); }
.bt-archipel__ile:hover circle, .bt-archipel__ile:focus circle{ fill: var(--bt-frangipanier); }
.bt-archipel__panneau{ background: var(--bt-lagon-profond); border-radius: var(--sb-rayon-grand); padding: 24px; color: var(--bt-frangipanier); }
.bt-archipel__panneau h3{ font-size: 1.25rem; margin-bottom: 14px; }
.bt-archipel__cartes{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.bt-archipel__mini{ display: block; text-decoration: none; color: inherit; font-size: .75rem; }
.bt-archipel__mini img{ border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 6px; }

/* ==========================================================================
   7. GRILLES DE CARTES DE COLLECTION (DA §8.6)
   ========================================================================== */
.bt-grille-collection{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px){ .bt-grille-collection{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .bt-grille-collection{ grid-template-columns: 1fr; } }
/* CORRECTION passe 1 : la version grid (grande carte sur 2 colonnes x 2 rangées) forçait
   une 2e rangée presque vide et portait la section « Pour commencer » à 953 px à 1440.
   Passage en flex, UNE seule rangée : la grande carte prend plus de place, les 3 autres
   se partagent le reste, la hauteur de la section suit la carte la plus haute. */
.bt-grille-collection--asymetrique{ display: flex; gap: 24px; align-items: stretch; }
.bt-grille-collection--asymetrique .bt-carte-collection{ flex: 1 1 0; min-width: 0; }
.bt-grille-collection--asymetrique .bt-carte-collection--grande{ flex: 1.7 1 0; }
@media (max-width: 860px){
	.bt-grille-collection--asymetrique{ flex-wrap: wrap; }
	.bt-grille-collection--asymetrique .bt-carte-collection{ flex: 1 1 calc(50% - 12px); }
	.bt-grille-collection--asymetrique .bt-carte-collection--grande{ flex: 1 1 100%; }
}
.bt-carte-collection{
	display: block; text-decoration: none; color: inherit; background: var(--bt-frangipanier);
	border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre);
	transition: transform .2s ease, box-shadow .2s ease;
}
.bt-carte-collection:hover{ transform: translateY(-5px); }
.bt-carte-collection__media{ position: relative; aspect-ratio: 4/3; overflow: hidden; }
.bt-carte-collection--grande .bt-carte-collection__media{ aspect-ratio: 16/10; }
.bt-carte-collection__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.bt-carte-collection:hover .bt-carte-collection__media img{ transform: scale(1.04); }
.bt-carte-collection__rubrique{
	position: absolute; left: 12px; bottom: 12px; background: rgba(8,32,42,.78); color: var(--bt-frangipanier);
	font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px;
}
.bt-carte-collection__corps{ padding: 16px 18px 18px; }
.bt-carte-collection__corps h3{ margin: 0 0 10px; font-size: 1.0625rem; position: relative; padding-bottom: 8px; }
.bt-carte-collection__corps h3::after{ content:""; position:absolute; left:0; bottom:0; width: 28px; height: 2px; background: var(--bt-jade); transition: width .2s ease; }
.bt-carte-collection:hover .bt-carte-collection__corps h3::after{ width: 56px; }
.bt-carte-collection__corps p{
	font-size: .875rem; color: var(--bt-basalte); margin: 0 0 10px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bt-carte-collection__reperes{ display: flex; gap: 14px; flex-wrap: wrap; font-size: .75rem; color: var(--bt-basalte); }
.bt-carte-collection__reperes span{ display: inline-flex; align-items: center; gap: 5px; }
.bt-carte-collection__reperes .bt-icone{ color: var(--bt-lave-sombre); }

.bt-rubrique-voir-plus{ text-align: center; margin-top: 32px; }
.bt-rubrique-vide{ text-align: center; color: var(--bt-basalte); padding: 40px 0; }

/* ==========================================================================
   8. CALENDRIER (DA §8.7)
   ========================================================================== */
.bt-calendrier__legende{ display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; font-size: .875rem; }
.bt-pastille-legende{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bt-pastille-legende--pluie{ background: var(--bt-mousson-sombre); }
.bt-pastille-legende--seche{ background: var(--bt-jade); }
.bt-calendrier__grille{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-bottom: 24px; }
@media (max-width: 860px){ .bt-calendrier__grille{ grid-template-columns: repeat(6,1fr); } }
@media (max-width: 480px){ .bt-calendrier__grille{ grid-template-columns: repeat(4,1fr); } }
.bt-calendrier__mois{
	position: relative; border: 0; border-radius: 14px; padding: 12px 6px 10px; cursor: pointer;
	background: linear-gradient(180deg, rgba(94,219,168,.22), rgba(94,219,168,.06)); color: var(--bt-frangipanier);
	display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 92px;
}
.bt-calendrier__mois--pluie{ background: linear-gradient(180deg, rgba(141,184,255,.26), rgba(141,184,255,.08)); }
.bt-calendrier__mois[aria-expanded="true"]{ outline: 2px solid var(--bt-jade); }
/* CORRECTION passe 4 (juge, erreur 16) : la pastille texte « Nyepi » posée en
   top:-8px débordait au-dessus de la case (sur la rangée du dessus). Remplacée par
   un simple point DANS la case, en haut à droite — aucun débordement possible. */
.bt-calendrier__mois.est-nyepi::before{
	content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px;
	border-radius: 50%; background: var(--bt-lave); box-shadow: 0 0 0 2px rgba(8,32,42,.35);
}
/* CORRECTION passe 4 (juge, erreur 12) : « Aujourd'hui » était une pastille-texte en
   premier enfant flex, ce qui décalait l'initiale du mois vers le bas. Remplacée par
   un simple contour lumineux de la case entière — ne touche plus à la mise en page
   interne du bouton. */
.bt-calendrier__mois.est-aujourdhui{ outline: 2px solid var(--bt-frangipanier); outline-offset: 2px; }
.bt-calendrier__mois.est-aujourdhui[aria-expanded="true"]{ outline-color: var(--bt-jade); }
.bt-calendrier__initiale{ font-family: var(--sb-titre); font-size: 1.125rem; }
.bt-calendrier__barre{ width: 10px; height: 36px; background: rgba(255,255,255,.15); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.bt-calendrier__barre i{ display: block; width: 100%; background: var(--bt-mousson-sombre); border-radius: 6px; }
.bt-calendrier__mois--seche .bt-calendrier__barre i{ background: var(--bt-jade); }
.bt-calendrier__fiche-mois{ background: var(--bt-lagon-profond); border-radius: var(--sb-rayon-grand); padding: 24px; color: var(--bt-frangipanier); }
.bt-calendrier__fiche-mois h4{ font-family: var(--sb-titre); font-size: 1.25rem; margin-bottom: 10px; }
.bt-calendrier__fiche-mois p{ color: var(--bt-basalte-clair); margin-bottom: 14px; }

/* ==========================================================================
   9. MOSAÏQUE RUBRIQUES
   ========================================================================== */
.bt-mosaique{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1080px){ .bt-mosaique{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .bt-mosaique{ grid-template-columns: repeat(2,1fr); } }
.bt-mosaique__tuile{ position: relative; display: block; border-radius: var(--sb-rayon); overflow: hidden; aspect-ratio: 3/4; text-decoration: none; }
.bt-mosaique__tuile img{ width: 100%; height: 100%; object-fit: cover; }
.bt-mosaique__tuile .bt-pastille{ position: absolute; top: 10px; right: 10px; }
.bt-mosaique__legende{ position: absolute; left: 0; bottom: 0; right: 0; padding: 14px; background: linear-gradient(0deg, rgba(8,32,42,.86), transparent); }
.bt-mosaique__legende h3{ color: var(--bt-frangipanier); margin: 0; font-size: 1rem; }

/* ==========================================================================
   10. FIL D'ACTUALITÉS
   ========================================================================== */
.bt-fil-actu{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 860px){ .bt-fil-actu{ grid-template-columns: 1fr; } }
.bt-fil-actu__une{ display: block; text-decoration: none; color: inherit; border-radius: var(--sb-rayon); overflow: hidden; background: var(--bt-frangipanier); box-shadow: var(--sb-ombre); }
/* CORRECTION passe 2 (règle 4) : section mesurée à 933 px à 1440 — la photo de une
   suivait la hauteur de sa colonne (proportion 16/9 d'une large colonne = encore
   trop haute) ; plafond dur à 360 px conforme DA §9.1. */
.bt-fil-actu__une img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; max-height: 360px; }
.bt-fil-actu__une-corps{ padding: 18px 20px; }
.bt-fil-actu__une-corps h3{ margin: 6px 0 0; font-size: 1.125rem; }
.bt-fil-actu__breves{ display: flex; flex-direction: column; gap: 14px; }
.bt-fil-actu__breve{ display: flex; gap: 12px; text-decoration: none; color: inherit; align-items: center; }
.bt-fil-actu__breve img{ width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.bt-fil-actu__breve span{ font-size: .875rem; line-height: 1.4; }

/* ==========================================================================
   11. QUI ÉCRIT — CORRECTION passe 1 : FAQ à côté du bloc auteur en 2 colonnes
   (au lieu d'empilé en dessous) pour sortir cette section de 992 px à 1440.
   ========================================================================== */
.bt-qui-ecrit-grille{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
@media (max-width: 860px){ .bt-qui-ecrit-grille{ grid-template-columns: 1fr; gap: 28px; } }
.bt-qui-ecrit{ display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.bt-qui-ecrit__photo img{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: var(--sb-ombre); }
.bt-qui-ecrit__texte h2{ margin: 6px 0 10px; }
.bt-qui-ecrit-grille .sbt-faq{ margin: 0; }

/* ==========================================================================
   12. PARCOURS CONSEILLÉ
   ========================================================================== */
.bt-parcours-conseille{ margin-bottom: 32px; }
.bt-parcours-conseille__liste{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.bt-parcours-conseille__etape{ display: flex; align-items: center; gap: 10px; background: rgba(255,241,228,.07); border-radius: 999px; padding: 8px 16px 8px 8px; text-decoration: none; color: var(--bt-frangipanier); font-size: .875rem; }
.bt-parcours-conseille__numero{ width: 26px; height: 26px; border-radius: 50%; background: var(--bt-jade); color: var(--bt-abysse); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; flex-shrink: 0; }

/* ==========================================================================
   13. EN-TÊTE DE RUBRIQUE
   ========================================================================== */
.bt-rubrique-hero{ position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.bt-rubrique-hero__media{ position: absolute; inset: 0; z-index: 0; }
.bt-rubrique-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.bt-rubrique-hero__voile{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,32,42,.88) 0%, rgba(8,32,42,.5) 55%, transparent 90%); }
.bt-rubrique-hero > .bt-crete{ position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; height: auto; }
.bt-rubrique-hero__corps{ position: relative; z-index: 2; padding-block: 48px; color: var(--bt-frangipanier); max-width: 640px; }
.bt-rubrique-hero__fil{ color: var(--bt-basalte-clair); }
.bt-rubrique-hero__fil a{ color: var(--bt-basalte-clair); }
.bt-rubrique-hero__titre{ font-size: clamp(2.125rem,1.7rem + 2vw,3.625rem); color: var(--bt-frangipanier); text-shadow: 0 0.06em 0 var(--bt-abysse); margin: 10px 0; }
.bt-rubrique-hero__chapo{ font-size: 1.125rem; color: var(--bt-basalte-clair); margin-bottom: 14px; max-width: 48ch; }
.bt-rubrique-hero__compteurs{ display: flex; gap: 18px; font-size: .9375rem; }
.bt-rubrique-hero__compteurs strong{ color: var(--bt-jade); }
.bt-rubrique-hero__wayan{ position: absolute; right: 2%; bottom: 0; height: 85%; width: auto; max-width: 30%; z-index: 1; }
@media (max-width: 900px){ .bt-rubrique-hero__wayan{ display: none; } .bt-rubrique-hero{ min-height: 360px; } }

.bt-rubrique-filtres{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.bt-rubrique-filtre{ padding: 8px 16px; border-radius: 999px; background: rgba(255,241,228,.08); color: var(--bt-frangipanier); text-decoration: none; font-size: .8125rem; font-weight: 600; }
.bt-rubrique-filtre.est-actif{ background: var(--bt-jade); color: var(--bt-abysse); }

/* ==========================================================================
   14. EN-TÊTE D'ARTICLE « crête volcanique trois plans + photo-hublot »
   ========================================================================== */
.bt-article-entete-crete{ background: var(--bt-lagon-nuit); color: var(--bt-frangipanier); padding-top: 20px; padding-bottom: 60px; position: relative; }
.bt-article-entete-crete__grille{ display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: start; }
@media (max-width: 960px){ .bt-article-entete-crete__grille{ grid-template-columns: 1fr; } }
.bt-article-entete-crete__texte h1{ font-size: clamp(1.75rem,1.4rem + 1.8vw,2.625rem); color: var(--bt-frangipanier); text-shadow: 0 0.06em 0 var(--bt-abysse); margin: 10px 0; }
.bt-article-entete-crete .sbt-fil-ariane, .bt-article-entete-crete .sbt-fil-ariane a{ color: var(--bt-basalte-clair); }
.bt-article-entete-crete__chapo{ font-size: 1.1875rem; color: var(--bt-basalte-clair); font-style: italic; margin-bottom: 14px; }
.bt-article-entete-crete__meta{ color: var(--bt-basalte-clair); }
.bt-article-entete-crete__meta .sbt-article-meta-auteur{ color: var(--bt-frangipanier); }
.bt-article-entete-crete__hublot{
	border-radius: 28px; overflow: hidden; transform: rotate(-2deg); box-shadow: var(--sb-ombre), var(--sb-ombre-forte);
	aspect-ratio: 4/3; margin-bottom: -76px; align-self: start;
}
.bt-article-entete-crete__hublot img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px){ .bt-article-entete-crete__hublot{ margin-bottom: 0; transform: none; margin-top: 20px; } }

.bt-rail-progression{ position: sticky; top: 72px; z-index: 40; height: 4px; background: rgba(94,219,168,.18); }
.bt-rail-progression__piste{ position: absolute; inset: 0; }
.bt-rail-progression__piste i{ display: block; height: 100%; width: 0%; background: var(--bt-jade); transition: width .1s linear; }
.bt-rail-progression__jukung{ position: absolute; top: -9px; left: 0%; color: var(--bt-jade); transition: left .1s linear; }

.bt-fin-guide{ text-align: center; background: var(--bt-lagon-profond); color: var(--bt-frangipanier); border-radius: var(--sb-rayon-grand); padding: 36px 24px; margin-top: 48px; }
.bt-fin-guide__jukung{ color: var(--bt-jade); margin-bottom: 10px; }
.bt-fin-guide h2{ color: var(--bt-frangipanier); margin-bottom: 8px; }
/* CORRECTION passe 1 : .bt-doux vaut var(--bt-basalte) par défaut (texte pensé pour fond
   clair) ; .bt-fin-guide est sur fond sombre sans porter de classe .bt-section--profond,
   donc le repli « sombre » de .bt-doux (règle 0) ne s'appliquait pas — contraste illisible. */
.bt-fin-guide .bt-doux{ color: var(--bt-basalte-clair); }
.bt-fin-guide [data-bt-imprimer]{ margin-top: 16px; }
.bt-fin-guide__cta{ margin-top: 20px; }

/* Carte de parcours (sommaire) en tête de corps d'article — CORRECTION passe 1 règle 25 :
   le bloc figé .sbt-sommaire-mobile est caché au-delà de 1080px (blocs/single-article.css,
   intouché) ; single.php rend donc le même HTML sommaire dans CE conteneur, toujours
   visible, et la barre latérale ne garde que la carte formulaire. */
.bt-sommaire-parcours{ margin-bottom: 28px; display: block; }
.bt-sommaire-parcours .sbt-sommaire{
	background: var(--bt-lagon-profond); border: 0; border-left: 4px solid var(--bt-jade);
	border-radius: var(--sb-rayon); color: var(--bt-frangipanier); padding: 18px 22px;
}
.bt-sommaire-parcours .sbt-sommaire-titre{ color: var(--bt-frangipanier); }
.bt-sommaire-parcours .sbt-sommaire li a{ color: var(--bt-basalte-clair); }
.bt-sommaire-parcours .sbt-sommaire li a:hover{ color: var(--bt-frangipanier); }
.bt-sommaire-parcours .sbt-sommaire-num{ background: var(--bt-jade); color: var(--bt-abysse); }

/* Classes posées par les rédacteurs dans le corps d'article (CONTRAT-TECHNIQUE-THEME §2) */
.sbt-article-corps .bt-figure{ margin: 1.8em 0; }
.sbt-article-corps .bt-figure img{ border-radius: var(--sb-rayon); width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.sbt-article-corps .bt-credit, .sbt-article-corps .bt-source{ display: block; font-size: .8125rem; color: var(--bt-basalte); margin-top: 8px; }

/* Listes « Sources » / « À lire aussi » écrites dans le contenu (texte réel, non touché) :
   remplace les puces du navigateur par un habillage propre (CORRECTIONS-V1 §8). */
.sbt-article-corps ul:not(.sbt-retenir-liste){ list-style: none; margin: 0 0 1.3em; padding: 0; display: grid; gap: 10px; }
.sbt-article-corps ul:not(.sbt-retenir-liste) li{ position: relative; padding-left: 24px; }
.sbt-article-corps ul:not(.sbt-retenir-liste) li::before{
	content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%;
	background: var(--bt-jade);
}

/* CORRECTION passe 2 (règle 6) : « Sources » en petite carte discrète ; « À lire aussi »
   (un seul lien « Toute la rubrique », redondant avec « La suite de votre préparation »)
   devient un bouton — transformation DOM en site.js §13, habillage ici. */
.bt-sources-carte{
	background: #fff; border: 1px solid var(--bt-filet); border-radius: var(--sb-rayon);
	padding: 16px 18px; margin: 1.6em 0; font-size: .8125rem;
}
.bt-sources-carte__titre{ font-family: var(--sb-texte); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bt-basalte); margin: 0 0 8px; }
.bt-sources-carte ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bt-sources-carte ul li{ padding-left: 0; color: var(--bt-basalte); }
.bt-sources-carte ul li::before{ display: none; }
.bt-a-lire-aussi{ margin: 1.6em 0; }

/* « La suite de votre préparation » (fin de guide) : le bloc figé single-article.css
   met ses titres de carte en --sb-titre (Alfa Slab, tassé à cette taille) — Sarabun
   gras ici, conforme DA §5. */
.sbt-a-lire .sbt-carte-corps h3{ font-family: var(--sb-texte); font-weight: 700; font-size: 1.125rem; line-height: 1.3; }

/* ==========================================================================
   15. PAGE DEVIS
   ========================================================================== */
.bt-devis-hero{ position: relative; min-height: 640px; overflow: hidden; display: flex; align-items: center; }
.bt-devis-hero__media{ position: absolute; inset: 0; z-index: 0; }
.bt-devis-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.bt-devis-hero__voile{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,32,42,.85), rgba(8,32,42,.35) 60%, rgba(8,32,42,.6)); }
.bt-devis-hero > .bt-crete{ position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; height: auto; }
.bt-devis-hero__grille{ position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 480px; gap: 32px; align-items: center; padding-block: 60px; }
@media (max-width: 960px){ .bt-devis-hero__grille{ grid-template-columns: 1fr; } }
.bt-devis-hero__texte{ position: relative; color: var(--bt-frangipanier); }
.bt-devis-hero__texte h1{ font-size: clamp(2rem,1.6rem + 2vw,3.125rem); color: var(--bt-frangipanier); text-shadow: 0 0.06em 0 var(--bt-abysse); margin: 14px 0; }
.bt-devis-hero__chapo{ color: var(--bt-basalte-clair); font-size: 1.125rem; max-width: 46ch; }
.bt-devis-hero__wayan{ width: 34%; margin-top: 20px; }
@media (max-width: 640px){ .bt-devis-hero__wayan{ display: none; } }
.bt-devis-contenu{ max-width: 720px; margin-inline: auto; }

.bt-etapes-illustrees{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 860px){ .bt-etapes-illustrees{ grid-template-columns: repeat(2,1fr); } }
.bt-etapes-illustrees__item{ text-align: center; padding: 20px; }
.bt-etapes-illustrees__item .bt-icone{ color: var(--bt-jade); margin: 0 auto 12px; }
:is(.bt-section--creme,.bt-section--brume) .bt-etapes-illustrees__item .bt-icone{ color: var(--bt-lave-sombre); }
.bt-devis-faq{ max-width: 760px; margin-inline: auto; }

/* ==========================================================================
   16. CONTACT
   ========================================================================== */
.bt-contact-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .bt-contact-grille{ grid-template-columns: 1fr; } }
/* CORRECTION passe 4 (juge, erreur 1) : le singe était posé en position:absolute
   PAR-DESSUS la carte du formulaire (il cachait « Prénom », « Sujet »). Il est
   maintenant un élément normal de la colonne de droite, jamais au-dessus du
   formulaire. */
/* CORRECTION passe 5 (juge, défaut bloquant n°6) : Wayan regardait vers le vide à
   droite ; miroir CSS pour qu'il pointe vers le formulaire, posé à gauche. */
.bt-contact__wayan{ width: 140px; height: auto; margin-bottom: 16px; transform: scaleX(-1); }
.bt-contact-form textarea{ min-height: 120px; resize: vertical; }
.bt-contact__infos{ padding-top: 24px; }
.bt-contact__infos h2{ margin-bottom: 10px; }
.bt-contact__infos-liens{ display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.bt-contact__infos-liens a{ font-size: .875rem; font-weight: 700; color: var(--bt-lave-sombre); text-decoration: underline; }

/* En-tête Contact : bandeau photo (juge, défaut bloquant n°6 — bandeau vide). */
.bt-page-annexe-hero--contact{
	position: relative; padding-block: 72px 56px; background-size: cover; background-position: center;
	background-image: linear-gradient(100deg, rgba(8,32,42,.86) 0%, rgba(8,32,42,.52) 60%, rgba(8,32,42,.3) 100%),
		url('../img/photos/contact-route.jpg');
}

/* ==========================================================================
   17. À PROPOS
   ========================================================================== */
.bt-apropos-hero__grille{ display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: center; }
@media (max-width: 860px){ .bt-apropos-hero__grille{ grid-template-columns: 1fr; } }
.bt-apropos-hero__logo .bt-logo__texte{ font-size: 2rem; }
.bt-apropos-hero__texte h1{ color: var(--bt-frangipanier); margin: 14px 0; font-size: clamp(1.75rem,1.4rem + 1.6vw,2.5rem); }
.bt-apropos-hero__chapo{ color: var(--bt-basalte-clair); font-size: 1.125rem; }
.bt-apropos-hero__wayan{ width: 100%; max-width: 280px; }
.bt-apropos-auteur{ display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
@media (max-width: 760px){ .bt-apropos-auteur{ grid-template-columns: 1fr; text-align: center; } }
.bt-apropos-auteur__photo img{ border-radius: 50%; object-fit: cover; box-shadow: var(--sb-ombre); }
.bt-apropos-compteurs{ display: flex; gap: 24px; margin: 24px 0; flex-wrap: wrap; }
.bt-apropos-compteurs strong{ font-family: var(--sb-titre); font-size: 1.75rem; color: var(--bt-jade); display: block; }

/* ==========================================================================
   18. PAGES ANNEXES / GÉNÉRIQUES
   ========================================================================== */
.bt-page-annexe-hero{ padding-block: 48px; }
.bt-page-annexe-hero h1{ color: var(--bt-frangipanier); font-size: clamp(1.75rem,1.5rem + 1vw,2.25rem); }
.bt-page-generique__corps, .bt-devis-contenu{ font-size: 1.0625rem; line-height: 1.75; }
.bt-page-generique__corps table{ width: 100%; }

.bt-auteur-page__tete{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bt-auteur-page__photo{ border-radius: 50%; object-fit: cover; }
.bt-auteur-page__tete h1{ color: var(--bt-frangipanier); margin-bottom: 6px; }

/* ==========================================================================
   19. 404 / RECHERCHE
   ========================================================================== */
.bt-404{ display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: center; padding-block: 20px; }
@media (max-width: 760px){ .bt-404{ grid-template-columns: 1fr; } }
.bt-404 h1, .bt-404 h2{ color: var(--bt-frangipanier); margin-bottom: 16px; }
.bt-404__wayan{ width: 100%; max-width: 220px; }
.bt-404__rubriques{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.bt-recherche-form{ display: flex; gap: 10px; max-width: 420px; margin-top: 16px; }
.bt-recherche-form input{ flex: 1; border-radius: 999px; border: 1.5px solid rgba(255,241,228,.3); background: rgba(255,241,228,.08); color: var(--bt-frangipanier); padding: 0 18px; min-height: 48px; }
.bt-recherche-form button{ width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--bt-lave); color: var(--bt-abysse); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

/* ==========================================================================
   20. ICÔNES WAYANG (DA §6) — silhouette pleine + ombre dure décalée
   ========================================================================== */
.bt-icone{ fill: currentColor; filter: drop-shadow(2px 2px 0 var(--bt-abysse)); flex-shrink: 0; }
:is(.bt-section--creme,.bt-section--brume) .bt-icone:not([class*="__icone"]){ color: var(--bt-lave-sombre); }

/* ==========================================================================
   21. PARALLAXE & RÉDUCTION DE MOUVEMENT
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
	.bt-hero__wayan{ animation: none; }
	[data-bt-parallax]{ transform: none !important; }
}

/* ==========================================================================
   22. INFOGRAPHIES DU SOCLE (sbs_*) — habillage uniquement, balisage figé
   dans theme/socle/socle-infographies.php. Rendu dans le corps d'article
   (fond clair) : palette --sb-*/--bt-* déjà utilisées pour sbt-faq/encadrés.
   ========================================================================== */

/* -- commun -- */
.sbs_source{ display: block; margin-top: 14px; font-size: .75rem; font-style: italic; color: var(--sb-doux); }

/* -- [sbs_frise] : étapes numérotées reliées -- */
.sbs_frise{ display: block; margin: 2em 0; counter-reset: sbsetape; }
.sbs_frise_titre{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 1.1875rem; color: var(--sb-encre); margin-bottom: 22px; }
.sbs_etape{
	display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto;
	gap: 4px 16px; position: relative; padding-bottom: 26px; counter-increment: sbsetape;
}
.sbs_etape::before{
	content: counter(sbsetape); grid-column: 1; grid-row: 1 / span 3; align-self: start;
	width: 34px; height: 34px; border-radius: 50%; background: var(--bt-jade); color: var(--bt-abysse);
	display: flex; align-items: center; justify-content: center; z-index: 1;
	font-family: var(--sb-titre); font-weight: 400; font-size: .9375rem;
}
.sbs_etape::after{
	content: ""; grid-column: 1; grid-row: 1 / span 3; justify-self: center;
	width: 2px; margin-top: 34px; background: var(--sb-filet);
}
.sbs_etape:last-of-type::after{ display: none; }
.sbs_etape_date{ grid-column: 2; grid-row: 1; display: block; font-family: var(--sb-texte); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bt-lave-sombre); }
.sbs_etape_titre{ grid-column: 2; grid-row: 2; display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 1.0625rem; color: var(--sb-encre); margin: 2px 0; }
.sbs_etape_desc{ grid-column: 2; grid-row: 3; display: block; font-family: var(--sb-texte); font-size: .9375rem; line-height: 1.6; color: var(--sb-doux); }
.sbs_frise > .sbs_source{ padding-left: 50px; }

/* -- [sbs_jauges] : chiffres-clés, barre jade au pied d'une piste sombre -- */
.sbs_jauges{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 2em 0; }
.sbs_jauges_titre{ grid-column: 1 / -1; font-family: var(--sb-titre); font-weight: 400; font-size: 1.1875rem; color: var(--sb-encre); margin: 0; }
.sbs_jauge{
	display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
	background: var(--bt-lagon-nuit); border-radius: var(--sb-rayon); padding: 18px 20px 22px;
}
.sbs_jauge::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--bt-jade); }
.sbs_jauge_libelle{ font-family: var(--sb-texte); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bt-basalte-clair); }
.sbs_jauge_valeur{ font-family: var(--sb-titre); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--bt-jade); }
.sbs_jauge_unite{ font-family: var(--sb-texte); font-size: .8125rem; color: var(--bt-basalte-clair); }
.sbs_jauges > .sbs_source{ grid-column: 1 / -1; }

/* -- [sbs_tarifs] : cartes, barre jade proportionnelle -- */
.sbs_tarifs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 2em 0; }
.sbs_tarifs_titre{ grid-column: 1 / -1; font-family: var(--sb-titre); font-weight: 400; font-size: 1.1875rem; color: var(--sb-encre); margin: 0; }
.sbs_tarif{ display: flex; flex-direction: column; gap: 10px; background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); padding: 18px 20px; }
.sbs_tarif_libelle{ font-family: var(--sb-texte); font-weight: 700; font-size: .9375rem; color: var(--sb-encre); }
.sbs_tarif_barre{ appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: none; background: none; }
.sbs_tarif_barre::-webkit-meter-bar{ background: var(--sb-surf); border: none; border-radius: 999px; height: 10px; }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--bt-jade); border-radius: 999px; }
.sbs_tarif_barre::-moz-meter-bar{ background: var(--sb-surf); border: none; border-radius: 999px; height: 10px; }
.sbs_tarif_barre::-moz-meter-optimum-value{ background: var(--bt-jade); border-radius: 999px; }
.sbs_tarif_barre::after{ content: attr(value); display: block; margin-top: 2px; font-family: var(--sb-titre); font-weight: 400; font-size: 1.25rem; color: var(--bt-lave-sombre); }
.sbs_tarifs_notes{ grid-column: 1 / -1; font-size: .8125rem; color: var(--sb-doux); }
.sbs_tarifs > .sbs_source{ grid-column: 1 / -1; }

/* -- [sbs_lieu] : fiche-lieu en carte -- */
.sbs_lieu{ display: block; margin: 2em 0; background: var(--sb-surf); border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); padding: 22px 24px; }
.sbs_lieu_nom{ display: block; font-family: var(--sb-titre); font-weight: 400; font-size: 1.125rem; color: var(--sb-encre); margin-bottom: 6px; }
.sbs_lieu_adresse{ display: block; font-style: normal; font-family: var(--sb-texte); font-size: .9375rem; color: var(--sb-doux); margin-bottom: 4px; }
.sbs_lieu_acces{ display: block; font-family: var(--sb-texte); font-size: .875rem; color: var(--sb-doux); margin-bottom: 14px; }
.sbs_lieu_carte{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--sb-texte); font-weight: 700; font-size: .875rem; color: var(--bt-lave-sombre); text-decoration: none; }
.sbs_lieu_carte:hover{ text-decoration: underline; }
.sbs_icone_repere{ width: 20px; height: 20px; fill: var(--bt-lave-sombre); flex-shrink: 0; }

@media (max-width: 480px){
	.sbs_jauges, .sbs_tarifs{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   23. PIED DE PAGE (habillage du bloc figé theme/blocs/footer.php — INTOUCHÉ) ;
   corrections juge, erreurs 7 (liseré, voir theme/footer.php) et 8 (pied maigre).
   ========================================================================== */
/* Le bloc figé pose `opacity:.78` sur TOUT lien du pied (y compris les boutons) et
   `opacity:.8` sur TOUT <p> de la bande CTA (y compris le titre .sbt-t3) — d'où le
   bouton « Nous écrire » et « Une question ? » délavés. On neutralise ces opacités
   ici (chargé après blocs/footer.css) sans toucher au fichier figé. */
.bt-footer .sbt-footer-cta .sbt-t3{ opacity: 1; color: var(--bt-frangipanier); }
.bt-footer .sbt-footer-cta p:not(.sbt-t3){ opacity: 1; color: var(--bt-basalte-clair); }
.bt-footer .sbt-footer-cta .sbt-btn{ opacity: 1; background: linear-gradient(180deg, #FF8A5C, #FF5A3A); color: var(--bt-abysse); }
.bt-footer .sbt-footer-colonne ul a{ opacity: .88; }
.bt-footer .sbt-footer-colonne ul a:hover{ opacity: 1; }

/* Pied dense sur 5 colonnes (logo, rubriques, guides les plus lus, circuit, le site) —
   les 2 colonnes du milieu sont injectées via l'action sbt_footer_colonnes (footer.php). */
.bt-footer .sbt-footer-grille{ grid-template-columns: 1.1fr repeat(4, 1fr); gap: 28px; }
@media (max-width: 1180px){ .bt-footer .sbt-footer-grille{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .bt-footer .sbt-footer-grille{ grid-template-columns: 1fr; } }

/* Tête de Wayan en logo du pied (le bloc figé n'affiche que du texte) — image déjà
   fournie par le thème (assets/img/logo-wayan-64.png), posée en fond de l'étiquette. */
.bt-footer .sbt-footer-logo{
	display: flex; align-items: center; gap: 10px; font-family: var(--sb-titre);
}
.bt-footer .sbt-footer-logo::before{
	content: ""; display: block; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
	background: var(--bt-lagon-profond) url('../img/logo-wayan-64.png') center/cover no-repeat;
	box-shadow: 0 0 0 2px rgba(255,241,228,.18);
}

.bt-footer .sbt-footer-bas{ border-top: 1px solid rgba(255,241,228,.1); margin-top: 4px; }

/* CORRECTION passe 5 (juge, défaut bloquant n°3) : le bloc figé pose jusqu'à 64 px de
   padding-top avant « Une question ? » — cumulé à la crête (theme/footer.php), ça
   fabriquait un vide sombre d'environ 130 px. Resserré sans toucher au fichier figé. */
.bt-footer{ padding-top: clamp(16px, 2.2vw, 28px); }

/* -- signature de page (bt_signature_page, inc/plomberie.php) : écusson rond initiales -- */
.bt-signature-page{ display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: .875rem; color: var(--sb-doux); }
.bt-signature-avatar{
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 48px; height: 48px; border-radius: 50%; background: var(--bt-jade); color: var(--bt-abysse);
	font-family: var(--sb-titre); font-weight: 400; font-size: 1rem;
}
.bt-signature-auteur{ color: var(--sb-encre); font-weight: 700; text-decoration: none; }
.bt-signature-auteur:hover{ text-decoration: underline; }

/* Remplace l'ancien bloc « Orchestrateur 05/10 » : son flex-wrap:nowrap forçait les
   4 pastilles de durée sur une seule rangée dans une colonne de ~215 px — « 21 jours »
   dépassait le bord droit de la carte (juge passe 5, défaut bloquant n°2). Les pastilles
   reprennent leur flex-wrap naturel (2 rangées de 2, comme sur le circuit) ; la carte est
   compactée pour garder le bouton ≤ 700 px à 1440×780 malgré la rangée en plus. */
@media (min-width: 1000px){
	.bt-hero__compteurs{ gap: 22px; margin: 0 0 10px; align-items: baseline; }
	.bt-hero__compteurs strong{ display: inline; font-size: 1.25rem; margin-right: 6px; }
	.bt-hero__corps{ padding-block: 26px 20px; }
	.bt-hero__carte.bt-carte-formulaire{ padding: 16px 18px; }
	.bt-hero__carte .bt-devis-etapes{ margin-bottom: 8px; }
	.bt-hero__carte .bt-devis-etape legend{ margin-bottom: 6px; }
	.bt-hero__carte .bt-ligne-2{ margin-bottom: 6px; gap: 10px; }
	.bt-hero__carte .bt-champ{ margin-bottom: 6px; }
	.bt-hero__carte .bt-duree-pills{ gap: 5px; }
	.bt-hero__carte .bt-duree-pills span{ min-height: 32px; padding: 0 10px; font-size: .75rem; }
}