/*
 * baliturismo.com — PAGES.CSS (passe 4, LOT B : article, circuit, à propos, rubrique)
 * Charge APRÈS assets/css/site.css (functions.php, filemtime). Ne redéclare jamais une
 * propriété déjà correcte ailleurs : surcharge ciblée des défauts du jugement du
 * 05/10/2026 (CORRECTIONS-V4-B.md). Variables consommées depuis style.css (--bt-*, --sb-*),
 * aucune couleur en dur hors de ces jetons.
 */

/* --------------------------------------------------------------------------
 * 1. Signature de page (bt_signature_page) — vraie photo au lieu des initiales
 * -------------------------------------------------------------------------- */
img.bt-signature-avatar{ object-fit: cover; }

/* --------------------------------------------------------------------------
 * 2. En-tête d'article — différenciation du jumeau pansemiotique/paroisse
 *    (pt.1 et pt.9 du juge) : photo en HUBLOT (oval, cadre, ombre dure) au lieu
 *    d'un rectangle incliné, + tracé d'étape qui relie le fil d'Ariane au H1.
 * -------------------------------------------------------------------------- */
.bt-article-entete-crete__hublot{
	width: min(360px, 90%);
	aspect-ratio: 1 / 1.05;
	margin-left: auto;
	border-radius: 48% 52% 53% 47% / 52% 48% 52% 48%;
	border: 7px solid var(--bt-lagon-profond);
	outline: 2px solid var(--bt-jade);
	outline-offset: -9px;
	box-shadow: var(--sb-ombre-forte);
	transform: rotate(4deg);
}
@media (max-width: 960px){
	.bt-article-entete-crete__hublot{ width: min(260px, 70%); margin-inline: auto; }
}

.bt-article-entete-crete__trace{
	display: block; width: 2px; height: 26px; margin: 10px 0 10px 6px;
	background: repeating-linear-gradient(to bottom, var(--bt-jade) 0 4px, transparent 4px 9px);
	position: relative;
}
.bt-article-entete-crete__trace::before,
.bt-article-entete-crete__trace::after{
	content: ""; position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--bt-jade);
}
.bt-article-entete-crete__trace::before{ top: -2px; }
.bt-article-entete-crete__trace::after{ bottom: -2px; }

/* --------------------------------------------------------------------------
 * 3. « Le saviez-vous » — vrai encadré (pt.2/pt.6 du juge), pas une icône posée
 *    à côté d'un paragraphe : carte frangipanier, filet jade, icône pleine,
 *    ombre dure (bloc figé partial-encadres.php, habillage seulement).
 * -------------------------------------------------------------------------- */
.sbt-encadre--saviez{
	background: var(--bt-fond-carte, var(--sb-fond-carte));
	border: 1.5px solid var(--bt-jade);
	border-radius: var(--sb-rayon-grand);
	box-shadow: var(--sb-ombre-forte);
	padding: 24px 26px;
}
.sbt-encadre--saviez::before{
	content: "";
	background: var(--bt-lave)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFF1E4' d='M24 6a12 12 0 0 0-12 12h5a7 7 0 1 1 11.6 5.3c-2.4 2.1-4.6 4-4.6 7.7v1h5v-.6c0-1.8 1.2-2.9 3.3-4.8A11.9 11.9 0 0 0 36 18 12 12 0 0 0 24 6zm-2.6 30h5.2v5h-5.2z'/%3E%3C/svg%3E") center / 24px no-repeat;
	border-radius: 14px;
	box-shadow: 3px 3px 0 var(--bt-abysse);
}
.sbt-encadre--saviez .sbt-encadre-titre{ color: var(--bt-lave-sombre); font-size: .8125rem; }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ color: var(--bt-encre); }

/* --------------------------------------------------------------------------
 * 4. Mur de texte → rythme visuel (pt.2 du juge) : repère numéroté devant
 *    chaque intertitre réel, réservé au corps d'article et de circuit (jamais
 *    à la page À propos, qui garde des H2 simples). Paragraphes plus aérés.
 * -------------------------------------------------------------------------- */
.bt-article-mise-en-page .sbt-article-corps,
.bt-devis-contenu{ counter-reset: bt-intertitre; }
.bt-article-mise-en-page .sbt-article-corps h2,
.bt-devis-contenu h2{
	display: flex; align-items: center; gap: 14px; margin-top: 1.6em;
}
.bt-article-mise-en-page .sbt-article-corps h2::before,
.bt-devis-contenu h2::before{
	counter-increment: bt-intertitre; content: counter(bt-intertitre, decimal-leading-zero);
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
	background: var(--bt-jade); color: var(--bt-abysse);
	font-family: var(--sb-texte); font-weight: 700; font-size: .9375rem;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 3px 3px 0 var(--bt-abysse);
}
.bt-article-mise-en-page .sbt-article-corps p,
.bt-devis-contenu p{ margin-bottom: 1.4em; line-height: 1.75; }

/* --------------------------------------------------------------------------
 * 5. Sommaire — « 01 »/« 02 » débordaient de leur rond (mineur 19).
 * -------------------------------------------------------------------------- */
.bt-sommaire-parcours .sbt-sommaire-num{ width: 25px; height: 25px; font-size: .6875rem; }

/* --------------------------------------------------------------------------
 * 6. Page circuit — frise [sbs_frise] du contenu devient LA frise unique
 *    (pt.13 du juge : plus de doublon pictos/texte), numérotée, reliée, avec
 *    Wayan en bout de ligne. « Source : Baliturismo » masquée (auto-citation).
 * -------------------------------------------------------------------------- */
.bt-devis-contenu .sbs_frise{
	counter-reset: bt-frise;
	display: grid; gap: 26px; margin: 2.2em 0 2.6em; padding: 30px 110px 30px 10px;
	position: relative;
}
.bt-devis-contenu .sbs_frise_titre{
	font-family: var(--sb-titre); font-size: 1.1875rem; color: var(--bt-encre); margin-bottom: 4px;
}
.bt-devis-contenu .sbs_etape{ position: relative; padding-left: 54px; }
.bt-devis-contenu .sbs_etape::before{
	counter-increment: bt-frise; content: counter(bt-frise);
	position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
	background: var(--bt-jade); color: var(--bt-abysse); font-family: var(--sb-texte); font-weight: 700;
	display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--bt-abysse);
}
.bt-devis-contenu .sbs_etape::after{
	content: ""; position: absolute; left: 17px; top: 40px; bottom: -26px; width: 2px;
	background: var(--bt-jade); opacity: .55;
}
.bt-devis-contenu .sbs_etape:last-child::after{ display: none; }
.bt-devis-contenu .sbs_etape_date{
	display: block; font-family: var(--sb-texte); font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .07em; color: var(--bt-lave-sombre);
}
.bt-devis-contenu .sbs_etape_titre{ display: block; font-family: var(--sb-titre); font-size: 1.0625rem; margin: .2em 0; color: var(--bt-encre); }
.bt-devis-contenu .sbs_etape_desc{ display: block; color: var(--bt-basalte); font-size: .9375rem; }
.bt-devis-contenu .sbs_frise::after{
	content: ""; position: absolute; right: 8px; bottom: 6px; width: 86px; height: 140px;
	background: url("../img/mascotte/mascotte-pointe.webp") bottom / contain no-repeat;
}
@media (max-width: 760px){
	.bt-devis-contenu .sbs_frise{ padding-right: 10px; }
	.bt-devis-contenu .sbs_frise::after{ display: none; }
}
.bt-devis-contenu .sbs_frise .sbs_source{ display: none; }

/* --------------------------------------------------------------------------
 * 7. Rubrique — faute d'article déjà corrigée en PHP. Bande « circuit sur
 *    mesure » : moitié droite vide (mineur 16) comblée par 3 garanties réelles,
 *    jamais une 2e mascotte (DA §3.1, une seule par page).
 * -------------------------------------------------------------------------- */
.bt-rubrique-chauffeur{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px){ .bt-rubrique-chauffeur{ grid-template-columns: 1fr; } }
.bt-rubrique-chauffeur__garanties{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bt-rubrique-chauffeur__garanties li{
	display: flex; align-items: center; gap: 14px; font-size: 1rem; color: var(--bt-frangipanier);
}
.bt-rubrique-chauffeur__garanties .bt-icone{ color: var(--bt-jade); flex-shrink: 0; }

/* « Les autres rubriques » : grille de 5 avec 4 cases → grille de 4 (mineur 17). */
.bt-mosaique{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .bt-mosaique{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .bt-mosaique{ grid-template-columns: repeat(2,1fr); } }

/* --------------------------------------------------------------------------
 * 8. À propos — colonne de lecture plafonnée, cartes auteurs côte à côte
 *    (pt.11 du juge, passe 4). Le petit écusson-logo au-dessus du titre a été
 *    retiré du gabarit en passe 5 (deuxième mascotte) : plus de règle à garder ici.
 * -------------------------------------------------------------------------- */
.bt-apropos-auteurs{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 760px){ .bt-apropos-auteurs{ grid-template-columns: 1fr; } }
.bt-apropos-auteur{
	display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start;
	background: var(--bt-fond-carte, var(--sb-fond-carte)); border-radius: var(--sb-rayon-grand);
	padding: 24px; box-shadow: var(--sb-ombre);
}
@media (max-width: 620px){ .bt-apropos-auteur{ grid-template-columns: 1fr; text-align: center; } }
.bt-apropos-auteur__photo img{ width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; box-shadow: var(--sb-ombre-forte); }
.bt-apropos-auteur h3{ margin-bottom: 2px; }
.bt-apropos-wayan-mention{ margin-top: 28px; text-align: center; }

.bt-colonne-lecture{ max-width: 760px; }
.bt-colonne-lecture .sbt-article-corps{ max-width: none; }

/* « 37 guides publiés » laissait les deux tiers droits vides dans la bande
 * sombre (pt.5 du juge n°2) : tuiles sur toute la largeur plutôt qu'une ligne
 * de texte perdue dans l'espace. */
.bt-apropos-compteurs{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px; margin: 28px 0;
}
.bt-apropos-compteurs span{
	display: block; background: var(--bt-lagon-profond); border-radius: var(--sb-rayon-grand);
	padding: 18px 22px; color: var(--bt-frangipanier); box-shadow: var(--sb-ombre);
}
.bt-apropos-compteurs strong{
	display: block; font-family: var(--sb-titre); font-size: 2rem; line-height: 1;
	color: var(--bt-jade); margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
 * 9. À propos — photos entre les paragraphes du corps éditorial (pt.3 du
 *    juge n°2), insérées par bt_apropos_photos_entre_paragraphes (functions.php).
 * -------------------------------------------------------------------------- */
.bt-apropos-photo{ margin: 1.8em 0; }
.bt-apropos-photo img{
	width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
	border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre);
}

/* --------------------------------------------------------------------------
 * 10. Rythme visuel automatique (bt_rythme_mur_de_texte, functions.php) —
 *     article et circuit : carte « repère » (chiffre déjà présent dans le
 *     texte) ou citation en exergue, sur les passages sans visuel (pt.1 et
 *     pt.4 du juge n°2).
 * -------------------------------------------------------------------------- */
.bt-repere{
	background: var(--bt-fond-carte, var(--sb-fond-carte)); border-left: 6px solid var(--bt-lave);
	border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte); padding: 22px 26px; margin: 1.8em 0;
}
.bt-repere__chiffre{
	font-family: var(--sb-titre); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	color: var(--bt-lave-sombre); margin: 0 0 6px; line-height: 1;
}
.bt-repere__phrase{ font-family: var(--sb-texte); font-size: .9375rem; color: var(--bt-basalte); margin: 0; }
.bt-exergue{ border: 0; border-left: 4px solid var(--bt-jade); margin: 1.8em 0; padding: 4px 0 4px 24px; }
.bt-exergue p{
	font-family: var(--sb-titre); font-size: clamp(1.125rem, 1rem + 1vw, 1.375rem);
	color: var(--bt-encre); line-height: 1.4; margin: 0;
}

/* --------------------------------------------------------------------------
 * 11. Circuit — pastille retirée du hero (pt.2 du juge n°2), garanties
 *     réelles sous la carte formulaire, bouton gardé au-dessus du pli mobile.
 * -------------------------------------------------------------------------- */
.bt-devis-hero__carte-bloc{ display: grid; gap: 14px; }
.bt-devis-garanties{
	list-style: none; margin: 0; padding: 18px 22px; display: grid; gap: 10px;
	background: var(--bt-fond-carte, var(--sb-fond-carte)); border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre);
}
.bt-devis-garanties li{ display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--bt-encre); }
.bt-devis-garanties .bt-icone{ color: var(--bt-lave-sombre); flex-shrink: 0; }
@media (max-width: 640px){
	/* CORRECTION pt.1 (juge n°2) : bouton sous le pli sur le circuit mobile — on
	 * raccourcit l'intro et on masque la liste de garanties sous le pli pour
	 * garder la carte + le bouton visibles en premier écran ; les garanties
	 * restent lisibles juste après, au premier défilement. */
	.bt-devis-hero__chapo{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.bt-devis-garanties{ padding: 14px 18px; }
}

/* Le titre de la carte formulaire compacte, dans le rail de l'article, passait
 * sur 4 lignes énormes (pt.12 du juge n°2) : taille réduite, propre au rail. */
.sbt-rail .bt-carte-formulaire__titre{ font-size: 1.375rem; line-height: 1.25; }

/* Ligne auteur de l'article : le point séparateur se détachait du texte
 * suivant au retour à la ligne mobile, orphelin en fin de ligne (mineur 15). */
.bt-meta-groupe{ white-space: nowrap; }

/* Orchestrateur 05/10 — porte de sortie : contrastes mesurés < 4,5 sur fonds clairs + panneau mobile fermé qui élargissait la page à 900 px. */
.bt-nav-mobile:not(.est-ouvert){ display: none; }
:is(.bt-section--creme, .bt-section--brume, .bt-carte-formulaire, .bt-rail-carte, .sbt-rail) .bt-eyebrow{ color: #0B6B4A; }
:is(.bt-section--creme, .bt-section--brume) .bt-ton-2{ color: var(--bt-lave-sombre); }
.sbt-auteur-role{ color: var(--bt-lave-sombre); }
.sbt-btn:not(.sbt-btn--fantome){ color: var(--bt-abysse); }
@media (max-width: 699px){
	.bt-page-annexe-hero--contact{ padding-top: 22px; padding-bottom: 22px; }
	.bt-page-annexe-hero--contact .bt-doux{ display: none; }
	.bt-contact-grille{ padding-top: 0; }
	.bt-section--brume:has(.bt-contact-grille){ padding-top: 16px; }
	.bt-contact__carte > .bt-doux{ display: none; }
	.bt-contact-form textarea{ min-height: 88px; height: 88px; }
	.bt-contact-form .bt-champ{ margin-bottom: 10px; }
}

/* Orchestrateur 05/10 — porte de sortie n°2 : en-tête du site trop large entre 900 et 1199 px (+7 px), et
   formulaire de la barre latérale d'article sous le pli à 1920×950 (bouton à 1087 px) : en-tête d'article resserré. */
@media (max-width: 1199px){
	.bt-header .bt-nav{ display: none !important; }
	.bt-burger{ display: flex !important; }
}
.bt-crete--article{ height: 54px !important; }
@media (min-width: 1000px){
	.bt-article-entete-crete__grille{ padding-top: 18px !important; padding-bottom: 28px !important; }
	.bt-article-entete-crete__hublot{ width: clamp(220px, 18vw, 290px) !important; }
	.bt-article-entete-crete__texte .bt-article-entete-crete__trace{ display: none; }
}

/* Orchestrateur 05/10 — porte de sortie n°3 : formulaire de la barre latérale d'article au-dessus du pli (bouton mesuré à 995 px à 1440×780). */
@media (min-width: 1000px){
	.bt-crete--article{ height: 40px !important; }
	.bt-article-entete-crete__grille{ padding-top: 0 !important; padding-bottom: 18px !important; }
	.bt-article-entete-crete__hublot{ width: clamp(200px, 15vw, 240px) !important; }
	.bt-article-entete-crete h1{ font-size: clamp(2rem, 2.6vw, 2.6rem); }
	.sbt-rail-carte--devis{ padding-top: 18px !important; padding-bottom: 18px !important; }
	.sbt-rail-carte--devis .bt-eyebrow, .sbt-rail-carte--devis > .bt-doux{ display: none; }
	.sbt-rail-carte--devis .bt-carte-formulaire__titre{ font-size: 1.35rem; margin-bottom: 10px; }
	.sbt-rail-carte--devis label{ margin-bottom: 2px; }
}
@media (min-width: 1000px){
	.sbt-rail-carte--devis .bt-champ:first-of-type{ display: none; }
	.sbt-rail{ margin-top: -14px; }
	.bt-article-entete-crete__grille{ padding-bottom: 8px !important; }
}