/* ==========================================================================
   Boros Esthetic — charte « Le Trait », partie restante (29 octobre 2026)
   Les pages sont en éléments Elementor natifs (boros-natif.css). Cette feuille ne sert
   plus qu'aux widgets maison (formulaires, pastilles, curseur avant/après, plan), à la
   boutique Karaja et aux CGV, encore en ancienne construction.
   Source : canvas Design claude.ai (planches CouleursTypo, KitUI, Desktop*, Mobile*).
   Une seule famille, Jost : 300 titres, 400 texte, 500 capitales (repères, boutons).
   Boutons pilule, photos arrondies d'un seul côté, aucune ombre.
   Le laiton #B4915A ne sert JAMAIS de texte sur fond clair (2,66:1) : il trace.
   Spécificité : tout passe par .bo (0,2,0 et plus) pour battre le kit Elementor
   (.elementor-kit-N a, 0,1,1) et le thème Hello (input[type=text], button…).
   ========================================================================== */

:root {
  --bo-ivoire: #F7F3EE;
  --bo-travertin: #ECE4D8;
  --bo-blanc: #FFFFFF;
  --bo-encre: #1D1A17;
  --bo-encre-2: #3A342E;      /* survol du bouton principal */
  --bo-laiton: #B4915A;       /* trait, filets, pictos ; texte uniquement sur encre */
  --bo-laiton-f: #7A5E33;     /* repères sur fond clair (5,5:1 ivoire, 4,8:1 travertin) */
  --bo-laiton-c: #D9C29A;     /* repères sur encre (10:1) */
  --bo-taupe: #5E554C;        /* texte secondaire sur clair */
  --bo-sable: #BDB2A4;        /* texte secondaire sur encre */
  --bo-filet: #DDD3C5;
  --bo-filet-trav: #C9BDAC;
  --bo-filet-champ: #9C8F7F;
  --bo-filet-sombre: #4A433C;
  --bo-succes: #2F6B4F;
  --bo-erreur: #A3352B;
  --bo-trou: #F3E2B8;         /* surlignage des informations à fournir par l'institut */
  --bo-police: 'Jost', 'Futura', 'Avenir Next', sans-serif;
  --bo-gouttiere: clamp(20px, 4vw, 40px);
}

/* --- Socle ---------------------------------------------------------------- */
body.bo-site { background: var(--bo-ivoire); color: var(--bo-encre); font-family: var(--bo-police); }
body.bo-site .site-main, body.bo-site .page-content { max-width: none; padding: 0; margin: 0; }
.bo { font-family: var(--bo-police); font-size: 17px; line-height: 1.65; color: var(--bo-encre); -webkit-font-smoothing: antialiased; }
.bo *, .bo *::before, .bo *::after { box-sizing: border-box; }
.bo img { display: block; max-width: 100%; }
.bo h1, .bo h2, .bo h3, .bo h4, .bo p, .bo ul, .bo ol, .bo dl, .bo dd, .bo figure, .bo blockquote { margin: 0; }
.bo ul.bo-nu, .bo ol.bo-nu { list-style: none; padding: 0; }
.bo a { color: inherit; text-decoration: none; }
.bo a:focus-visible, .bo button:focus-visible, .bo summary:focus-visible, .bo input:focus-visible, .bo textarea:focus-visible {
  outline: 2px solid var(--bo-laiton); outline-offset: 4px;
}
.bo strong { font-weight: 500; }
.bo .bo-trou { background: var(--bo-trou); color: var(--bo-encre); padding: 0 .25em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bo-sombre .bo-trou { background: var(--bo-trou); color: var(--bo-encre); }
.bo .bo-ecran { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Sections et enveloppe ------------------------------------------------ */
.bo-s { padding: 112px 0; background: transparent; }
.bo-s--h120 { padding-top: 120px; }
.bo-s--b120 { padding-bottom: 120px; }
.bo-s--compact { padding: 96px 0; }
.bo-s--104 { padding: 104px 0; }
.bo-s--h96 { padding-top: 96px; }
.bo-s--blanc { background: var(--bo-blanc); }
.bo-s--travertin { background: var(--bo-travertin); }
.bo-s--encre { background: var(--bo-encre); }
/* 1 200 px de contenu + les gouttières, comme la maquette (boîte de contenu) */
.bo-wrap { max-width: calc(1200px + 2 * var(--bo-gouttiere)); margin: 0 auto; padding: 0 var(--bo-gouttiere); }
.bo-pile { display: flex; flex-direction: column; }
.bo-g16 { gap: 16px; } .bo-g20 { gap: 20px; } .bo-g22 { gap: 22px; } .bo-g24 { gap: 24px; } .bo-g26 { gap: 26px; } .bo-g28 { gap: 28px; } .bo-g40 { gap: 40px; } .bo-g44 { gap: 44px; } .bo-g48 { gap: 48px; } .bo-g56 { gap: 56px; }
.bo-duo { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.bo-duo > .bo-duo__a { flex: 1 1 380px; min-width: 0; }
.bo-duo > .bo-duo__b { flex: 1 1 520px; min-width: 0; }
.bo-duo--etroit > .bo-duo__a { flex-basis: 320px; }
.bo-duo--etroit > .bo-duo__b { flex-basis: 560px; }
.bo-duo--centre { align-items: center; }

/* Fond sombre : le bloc connaît son fond */
.bo-sombre { color: var(--bo-ivoire); }
.bo-sombre .bo-second, .bo .bo-sombre .bo-second, .bo.bo-sombre .bo-second { color: var(--bo-sable); }

/* --- Typographie ---------------------------------------------------------- */
.bo .bo-rep { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--bo-laiton-f); }
.bo .bo-rep::before { content: ""; width: 32px; height: 1.5px; background: var(--bo-laiton); flex: none; }
.bo .bo-rep--nu::before { display: none; }
.bo-sombre .bo-rep { color: var(--bo-laiton-c); }
.bo .bo-lb { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--bo-laiton-f); }
.bo-sombre .bo-lb { color: var(--bo-laiton-c); }
.bo .bo-h1 { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.06; font-weight: 300; letter-spacing: -0.01em; text-wrap: balance; }
.bo .bo-h1 em, .bo .bo-h2 em { font-style: italic; font-weight: 300; }
.bo .bo-h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.12; font-weight: 300; }
.bo .bo-h2--moyen { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
.bo .bo-h3 { font-size: 26px; line-height: 1.25; font-weight: 400; }
.bo .bo-chapo { font-size: 20px; line-height: 1.6; color: var(--bo-taupe); max-width: 540px; }
.bo .bo-intro { font-size: 16px; color: var(--bo-taupe); max-width: 460px; }
.bo .bo-intro--440 { max-width: 440px; }
.bo .bo-15 { font-size: 15px; }
.bo .bo-texte { font-size: 18px; color: var(--bo-taupe); }
.bo .bo-second { color: var(--bo-taupe); }
.bo .bo-petit { font-size: 14px; color: var(--bo-taupe); }
.bo-sombre .bo-chapo, .bo-sombre .bo-intro, .bo-sombre .bo-texte, .bo-sombre .bo-petit { color: var(--bo-sable); }
.bo .bo-lien { color: var(--bo-encre); text-decoration: underline; text-decoration-color: var(--bo-laiton); text-underline-offset: 6px; text-decoration-thickness: 1.5px; align-self: flex-start; transition: color .15s; }
.bo .bo-lien:hover { color: var(--bo-laiton-f); text-decoration-color: var(--bo-laiton-f); }
.bo-sombre .bo-lien { color: var(--bo-ivoire); }
.bo-sombre .bo-lien:hover { color: var(--bo-laiton-c); }

/* Tête de section : titre à gauche, intro ou lien à droite */
.bo-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.bo-tete__titres { display: flex; flex-direction: column; gap: 16px; }

/* --- Boutons -------------------------------------------------------------- */
.bo .bo-bt, .bo button.bo-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent; font-family: var(--bo-police); font-size: 13px; font-weight: 500; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent; transition: background-color .15s, color .15s, border-color .15s; }
.bo .bo-bt--principal, .bo button.bo-bt--principal { background: var(--bo-encre); border-color: var(--bo-encre); color: var(--bo-ivoire); }
.bo .bo-bt--principal:hover, .bo button.bo-bt--principal:hover { background: var(--bo-encre-2); border-color: var(--bo-encre-2); color: var(--bo-ivoire); }
.bo .bo-bt--secondaire, .bo button.bo-bt--secondaire { border-color: var(--bo-encre); color: var(--bo-encre); background: transparent; }
.bo .bo-bt--secondaire:hover, .bo button.bo-bt--secondaire:hover { background: var(--bo-encre); color: var(--bo-ivoire); }
.bo .bo-bt--laiton { background: var(--bo-laiton); border-color: var(--bo-laiton); color: var(--bo-encre); }
.bo .bo-bt--laiton:hover { background: var(--bo-laiton-c); border-color: var(--bo-laiton-c); color: var(--bo-encre); }
.bo .bo-bt--clair { border-color: var(--bo-ivoire); color: var(--bo-ivoire); }
.bo .bo-bt--clair:hover { background: var(--bo-ivoire); color: var(--bo-encre); }
.bo .bo-bt--petit { min-height: 48px; padding: 0 22px; }
.bo .bo-bt--h48 { min-height: 48px; }
.bo .bo-bt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bo-ivoire), 0 0 0 5px var(--bo-laiton); }
.bo .bo-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bo .bo-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bo .bo-fl { transition: transform .15s; }
.bo a:hover .bo-fl { transform: translateX(4px); }

/* --- Héros scindé : texte + photo arrondie à gauche ---------------------- */
.bo-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--bo-taupe); }
.bo .bo-ariane a { color: var(--bo-taupe); text-decoration: underline; text-underline-offset: 3px; }
.bo .bo-ariane a:hover { color: var(--bo-encre); }
.bo .bo-ariane [aria-current] { color: var(--bo-encre); }

/* --- Cartes de soins et liste ---------------------------------------------- */
.bo-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.bo .bo-vert { color: var(--bo-succes); }

/* --- Listes (formations, tarifs) ------------------------------------------- */

/* --- Avant / après --------------------------------------------------------- */
.bo-aa { position: relative; height: 420px; overflow: hidden; border-radius: 0 210px 210px 0; background: var(--bo-filet); --pos: 50%; touch-action: pan-y; }
.bo-aa__cote { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bo-taupe); font-size: 15px; }
.bo-aa__avant { background: var(--bo-travertin); clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.bo-aa__apres { background: var(--bo-filet); }
.bo-aa__cote span.bo-trou { position: absolute; top: 50%; transform: translateY(-50%); }
.bo-aa__avant span.bo-trou { left: 18%; }
.bo-aa__apres span.bo-trou { right: 22%; }
.bo-aa__barre { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--bo-laiton); z-index: 2; pointer-events: none; }
.bo-aa__poignee { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--bo-encre); color: var(--bo-ivoire); display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }
.bo .bo-aa__poignee .bo-ic { width: 22px; height: 22px; }
.bo .bo-aa input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.bo .bo-aa input[type="range"]:focus-visible ~ .bo-aa__poignee { box-shadow: 0 0 0 3px var(--bo-ivoire), 0 0 0 5px var(--bo-laiton); }
.bo-aa__etq { position: absolute; top: 20px; z-index: 3; background: var(--bo-ivoire); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--bo-encre); }
.bo-aa__etq--avant { left: 20px; } .bo-aa__etq--apres { right: 48px; }
.bo-pastilles { display: flex; gap: 10px; flex-wrap: wrap; }
.bo .bo-pastilles button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--bo-filet-champ); background: transparent; color: var(--bo-encre); font: inherit; font-size: 14px; cursor: pointer; }
.bo .bo-pastilles button[aria-pressed="true"] { background: var(--bo-encre); border-color: var(--bo-encre); color: var(--bo-ivoire); }
.bo .bo-pastilles button:hover { border-color: var(--bo-encre); background: transparent; color: var(--bo-encre); }
.bo .bo-pastilles button[aria-pressed="true"]:hover { background: var(--bo-encre-2); color: var(--bo-ivoire); }

/* --- Formations ------------------------------------------------------------ */
.bo-formations { display: flex; flex-direction: column; }

/* --- Formulaires ----------------------------------------------------------- */
.bo-panneau { background: var(--bo-blanc); padding: 40px; }
.bo-form { display: flex; flex-direction: column; gap: 22px; }
.bo-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bo .bo-form legend, .bo .bo-form label.bo-etq { font-size: 15px; font-weight: 500; padding: 0; line-height: 1.65; display: block; color: var(--bo-encre); }
.bo .bo-form legend { margin-bottom: 10px; }
.bo-form__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bo-champ-g { display: flex; flex-direction: column; gap: 8px; }
.bo .bo-facult { font-weight: 400; color: var(--bo-taupe); }
.bo .bo-form input.bo-champ, .bo .bo-form textarea.bo-champ { width: 100%; height: 52px; border: 1px solid var(--bo-filet-champ); background: var(--bo-blanc); padding: 0 16px; font-family: var(--bo-police); font-size: 17px; color: var(--bo-encre); border-radius: 0; box-shadow: none; }
.bo .bo-form textarea.bo-champ { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.65; }
.bo .bo-form input.bo-champ:focus, .bo .bo-form textarea.bo-champ:focus { border: 2px solid var(--bo-encre); padding-left: 15px; outline: none; box-shadow: 0 0 0 4px var(--bo-travertin); }
.bo .bo-form .bo-champ[aria-invalid="true"] { border: 2px solid var(--bo-erreur); padding-left: 15px; }
.bo .bo-err { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bo-erreur); }
.bo .bo-err[hidden] { display: none; }
.bo .bo-err .bo-ic { width: 16px; height: 16px; }
.bo-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bo .bo-pills button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--bo-filet-champ); background: var(--bo-blanc); color: var(--bo-encre); font-family: var(--bo-police); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.bo .bo-pills button:hover { border-color: var(--bo-encre); background: var(--bo-blanc); color: var(--bo-encre); }
.bo .bo-pills button[aria-pressed="true"] { background: var(--bo-encre); border-color: var(--bo-encre); color: var(--bo-ivoire); }
.bo .bo-pills button .bo-ic { width: 16px; height: 16px; display: none; }
.bo .bo-pills button[aria-pressed="true"] .bo-ic { display: block; }
.bo .bo-case { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--bo-taupe); cursor: pointer; }
.bo .bo-case input { width: 24px; height: 24px; accent-color: var(--bo-encre); margin: 1px 0 0; flex: none; }
.bo-form__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bo .bo-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bo .bo-pot input { border: 0; color: var(--bo-encre); background: transparent; }
.bo .bo-aa input[type="range"] { color: var(--bo-encre); }
.bo-statut { display: flex; gap: 14px; align-items: flex-start; background: var(--bo-blanc); border: 1px solid var(--bo-succes); padding: 20px; }
.bo-statut[hidden] { display: none; }
.bo .bo-rond-ok { width: 32px; height: 32px; border-radius: 50%; background: var(--bo-succes); color: var(--bo-blanc); display: flex; align-items: center; justify-content: center; flex: none; }
.bo .bo-rond-ok .bo-ic { width: 18px; height: 18px; }
.bo-statut--grand { flex-direction: column; border: 0; padding: 24px 0; gap: 16px; }
.bo-statut--grand .bo-rond-ok { width: 52px; height: 52px; }
.bo-statut--grand .bo-rond-ok .bo-ic { width: 24px; height: 24px; }
.bo .bo-statut--grand h3 { font-size: 28px; font-weight: 300; }
.bo-statut--erreur { border-color: var(--bo-erreur); }

/* --- Contact : coordonnées, réservation, plan ------------------------------ */
.bo a.bo-souligne { text-decoration: underline; text-decoration-color: var(--bo-laiton); text-underline-offset: 4px; }
.bo-ouvert { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--bo-succes); }
.bo-ouvert::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bo-ouvert.est-ferme { color: var(--bo-taupe); }
.bo-plan { position: relative; min-height: 400px; background: var(--bo-ivoire); overflow: hidden; border-radius: 0 200px 200px 0; }
.bo .bo-plan > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-plan__repere { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bo-plan__nom { background: var(--bo-encre); color: var(--bo-ivoire); padding: 10px 16px; font-size: 14px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.bo .bo-plan__nom .bo-ic { width: 16px; height: 16px; color: var(--bo-laiton-c); }
.bo-plan__point { width: 14px; height: 14px; border-radius: 50%; background: var(--bo-laiton); outline: 6px solid rgba(180, 145, 90, .25); }
.bo-plan__note { position: absolute; left: 20px; bottom: 16px; font-size: 12px; color: var(--bo-taupe); }

/* --- Pied de page et barre d'action ---------------------------------------- */
/* Pied compact des pages intérieures (planches DesktopSoin, Formations, Contact) */

/* --- Pages légales --------------------------------------------------------- */
.bo-legal { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.bo .bo-legal h2 { font-size: 26px; font-weight: 400; margin-top: 24px; }
.bo .bo-legal p, .bo .bo-legal li { color: var(--bo-taupe); font-size: 17px; }
.bo .bo-legal ul { padding-left: 20px; }

/* ==========================================================================
   Responsive — repris des planches Mobile* (390 px)
   ========================================================================== */
@media (max-width: 767px) {
  .bo { font-size: 16px; line-height: 1.6; }
  .bo-s, .bo-s--compact { padding: 64px 0; }
  .bo-wrap { padding: 0 20px; }
  .bo .bo-rep { font-size: 11px; gap: 12px; }
  .bo .bo-rep::before { width: 24px; }
  .bo .bo-h1 { font-size: 36px; line-height: 1.1; }
  .bo .bo-h2, .bo .bo-h2--moyen { font-size: 32px; line-height: 1.15; }
  .bo .bo-h3 { font-size: 23px; }
  .bo .bo-chapo { font-size: 18px; }
  .bo-duo { gap: 40px; }
  .bo .bo-actions { flex-direction: column; align-items: stretch; }
  .bo .bo-actions .bo-bt { width: 100%; }
  .bo .bo-masque-mobile { display: none; }
  .bo .bo-lb { font-size: 11px; }
  .bo .bo-texte { font-size: 16px; }
  .bo .bo-chapo { font-size: 17px; }
  .bo .bo-h1 { font-size: 38px; line-height: 1.08; }
  .bo-aa { height: 300px; border-radius: 0 150px 150px 0; }
  .bo-aa__etq--apres { right: 36px; }
  .bo-panneau { padding: 24px 20px; }
  .bo-form__2 { grid-template-columns: 1fr; }
  .bo .bo-form__pied .bo-bt { width: 100%; }
  .bo-plan { min-height: 300px; border-radius: 0 150px 150px 0; }

}

@media (prefers-reduced-motion: reduce) {
  .bo *, .bo *::before, .bo *::after { transition: none !important; scroll-behavior: auto !important; }
}