/* ================================================================
   CamiBijoux – Guide des tailles
   Palette commune : marron #3A2317, beiges, touche de rose.
   ================================================================ */

.cbsz {
    --cbsz-dark:   #3A2317;
    --cbsz-text:   #4A3C33;
    --cbsz-muted:  #8A7A6C;
    --cbsz-card:   #FBF7F3;
    --cbsz-border: #E3D9CE;
    --cbsz-rose:   #C97891;
    --cbsz-rose-d: #B96685;
    --cbsz-radius: 14px;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: inherit !important;
    color: var(--cbsz-text) !important;
    box-sizing: border-box !important;

    /* Déclare le bloc comme conteneur de référence : les règles
       @container plus bas réagissent alors à SA largeur réelle, et non
       à celle de la fenêtre. C'est indispensable ici — placé dans une
       colonne Elementor étroite sur un grand écran, aucune media query
       ne se serait déclenchée et la mise en page à deux colonnes aurait
       débordé. */
    container-type: inline-size !important;
    container-name: cbsz !important;

    /* Contrepartie indispensable de la ligne du dessus : « inline-size »
       veut dire « calcule ma largeur sans regarder mon contenu ». Un
       ancêtre qui demande une largeur max-content — tout conteneur
       Elementor réglé sur « Wrap » en colonne le fait — obtiendrait donc
       zéro, le texte s'empilerait lettre par lettre et le bloc se
       déclarerait haut de plusieurs milliers de pixels, laissant un vide
       immense en dessous. Voici la largeur à supposer dans ce cas. */
    contain-intrinsic-inline-size: 960px !important;
}
.cbsz *, .cbsz *::before, .cbsz *::after { box-sizing: border-box !important; }

/* Aucun élément ne doit pouvoir élargir le bloc : les grilles CSS
   donnent par défaut à leurs colonnes la largeur de leur contenu le
   plus large, ce qui fait déborder un tableau ou un mot long. */
.cbsz-grid > *,
.cbsz-cards > * { min-width: 0 !important; }
.cbsz img, .cbsz svg, .cbsz table { max-width: 100% !important; }

.cbsz [hidden] { display: none !important; }

/* ── Onglets ─────────────────────────────────────────── */
.cbsz-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

.cbsz-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    background: #FFFDFB !important;
    border: 1px solid var(--cbsz-border) !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    color: var(--cbsz-text) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s, border-color .18s, color .18s !important;
}
.cbsz-tab svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; }

@media (hover: hover) {
    .cbsz-tab:hover { border-color: var(--cbsz-rose) !important; color: var(--cbsz-rose-d) !important; }
}

.cbsz-tab.is-active {
    background: var(--cbsz-rose) !important;
    border-color: var(--cbsz-rose) !important;
    color: #fff !important;
}

/* ── Grilles ─────────────────────────────────────────── */
.cbsz-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
    align-items: start !important;
}
.cbsz-grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
.cbsz-grid--list    { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr) !important; }

.cbsz-card {
    padding: 30px 32px !important;
    background: var(--cbsz-card) !important;
    border: 1px solid var(--cbsz-border) !important;
    border-radius: var(--cbsz-radius) !important;
}

/* Teintes par famille, reprises des maquettes */
.cbsz-card--rose  { background: #FCEFF3 !important; border-color: #F3DCE3 !important; }
.cbsz-card--mint  { background: #E4F1EC !important; border-color: #CFE4DC !important; }
.cbsz-card--blue  { background: #DEEBF2 !important; border-color: #C9DEE9 !important; }
.cbsz-card--cream { background: #FAF3E8 !important; border-color: #ECDFCB !important; }
.cbsz-card--plain { background: #FBF9F7 !important; padding: 14px !important; }

.cbsz-card__title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--cbsz-dark) !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cbsz-card__title--spaced { margin-top: 28px !important; }

.cbsz-card__text {
    margin: 0 0 20px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: var(--cbsz-muted) !important;
}

.cbsz-eyebrow {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--cbsz-muted) !important;
}

/* ── Étapes numérotées ───────────────────────────────── */
.cbsz-steps {
    margin: 0 0 22px !important;
    padding: 0 0 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
.cbsz-steps li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--cbsz-text) !important;
}
.cbsz-steps li::marker { color: var(--cbsz-rose) !important; font-weight: 700 !important; }

/* ── Curseur ─────────────────────────────────────────── */
.cbsz-slider { margin: 0 0 24px !important; }

.cbsz-slider__head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
}
.cbsz-slider__label { font-size: 14.5px !important; color: var(--cbsz-text) !important; }
.cbsz-slider__value {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--cbsz-dark) !important;
    white-space: nowrap !important;
}

.cbsz-slider input[type="range"] {
    --cbsz-progress: 50%;
    width: 100% !important;
    height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    /* La portion parcourue n'a pas de sélecteur dédié : elle est peinte
       par un dégradé dont la césure est mise à jour en JavaScript. */
    background: linear-gradient(to right,
        var(--cbsz-rose) 0 var(--cbsz-progress),
        #E5DED6 var(--cbsz-progress) 100%) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

.cbsz-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--cbsz-border) !important;
    box-shadow: 0 2px 6px rgba(58, 35, 23, .18) !important;
    cursor: grab !important;
}
.cbsz-slider input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--cbsz-border) !important;
    box-shadow: 0 2px 6px rgba(58, 35, 23, .18) !important;
    cursor: grab !important;
}
.cbsz-slider input[type="range"]:focus-visible {
    outline: 2px solid var(--cbsz-dark) !important;
    outline-offset: 4px !important;
}

.cbsz-slider__scale {
    display: flex !important;
    justify-content: space-between !important;
    margin: 8px 0 0 !important;
    font-size: 12.5px !important;
    color: var(--cbsz-muted) !important;
}

/* ── Résultat ────────────────────────────────────────── */
.cbsz-result {
    margin: 0 0 14px !important;
    padding: 18px 22px !important;
    background: #FFFDFB !important;
    border: 1px solid var(--cbsz-border) !important;
    border-radius: 12px !important;
}
.cbsz-result:last-child { margin-bottom: 0 !important; }

.cbsz-result__label {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--cbsz-muted) !important;
}
.cbsz-result__value {
    display: block !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--cbsz-rose-d) !important;
    line-height: 1.2 !important;
}
.cbsz-result__value--big { font-size: 34px !important; }
.cbsz-result__note {
    display: block !important;
    margin: 6px 0 0 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--cbsz-muted) !important;
}

.cbsz-flag {
    margin: 14px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}
.cbsz-flag--ok   { background: #EAF6EE !important; color: #24694A !important; }
.cbsz-flag--warn { background: #FDF3E7 !important; color: #8A5A1E !important; }

/* ── Tableaux ────────────────────────────────────────── */
.cbsz-scroll { overflow-x: auto !important; }

.cbsz-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
}
.cbsz-table th {
    padding: 0 14px 10px !important;
    border: none !important;
    border-bottom: 1px solid var(--cbsz-border) !important;
    background: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--cbsz-muted) !important;
    text-align: left !important;
}
.cbsz-table td {
    padding: 13px 14px !important;
    border: none !important;
    border-bottom: 1px solid #EFE7DF !important;
    color: var(--cbsz-text) !important;
    vertical-align: middle !important;
}
.cbsz-table tbody tr:last-child td { border-bottom: none !important; }
.cbsz-table td strong { color: var(--cbsz-dark) !important; }

/* Ligne correspondant à la mesure en cours */
.cbsz-table tbody tr.is-active td {
    background: #FAF0E4 !important;
    color: var(--cbsz-dark) !important;
}
.cbsz-table tbody tr.is-active td:first-child { border-radius: 8px 0 0 8px !important; }
.cbsz-table tbody tr.is-active td:last-child  { border-radius: 0 8px 8px 0 !important; }

/* ── Cartes de taille (joncs) ────────────────────────── */
.cbsz-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.cbsz-size {
    padding: 20px 22px !important;
    background: #FFFDFB !important;
    border: 1px solid var(--cbsz-border) !important;
    border-radius: 12px !important;
    transition: border-color .18s, background .18s !important;
}
.cbsz-size.is-active {
    border-color: var(--cbsz-rose) !important;
    background: #FCEFF3 !important;
}

.cbsz-size__name {
    display: block !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 25px !important;
    font-weight: 600 !important;
    color: var(--cbsz-dark) !important;
    line-height: 1.1 !important;
}
.cbsz-size__value {
    display: block !important;
    margin: 8px 0 4px !important;
    font-size: 14.5px !important;
    color: var(--cbsz-rose-d) !important;
}
.cbsz-size__note {
    display: block !important;
    font-size: 13.5px !important;
    color: var(--cbsz-muted) !important;
}

/* ── Longueurs de collier ────────────────────────────── */
.cbsz-lengths {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.cbsz-length {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    background: none !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s !important;
}
@media (hover: hover) {
    .cbsz-length:hover { background: #F4EFE9 !important; }
}
.cbsz-length.is-active { background: #DEEBF2 !important; }

.cbsz-length__name {
    font-size: 15px !important;
    color: var(--cbsz-dark) !important;
}
.cbsz-length__cm {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 15px !important;
    color: var(--cbsz-muted) !important;
    white-space: nowrap !important;
}

.cbsz-preview__title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--cbsz-dark) !important;
    line-height: 1.2 !important;
}

.cbsz-figure {
    display: flex !important;
    justify-content: center !important;
    margin: 10px 0 18px !important;
    color: var(--cbsz-muted) !important;
}
.cbsz-figure svg {
    width: 100% !important;
    max-width: 210px !important;
    height: auto !important;
}

/* ── Mentions ────────────────────────────────────────── */
.cbsz-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 18px 0 0 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--cbsz-muted) !important;
}
.cbsz-note svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin-top: 2px !important;
    color: var(--cbsz-rose) !important;
}

/* ══════════════════════════════════════════════════════
   ADAPTATION

   Deux jeux de règles identiques. Les @container pilotent le cas
   réel — la largeur du bloc dans sa colonne Elementor — et les
   @media servent de repli sur les navigateurs qui ne les
   comprennent pas encore, où la largeur de fenêtre reste une
   approximation raisonnable.
   ══════════════════════════════════════════════════════ */

@container cbsz (max-width: 940px) {
    .cbsz-grid,
    .cbsz-grid--sidebar,
    .cbsz-grid--list { grid-template-columns: 1fr !important; gap: 18px !important; }

    .cbsz-card { padding: 26px 22px !important; }
    .cbsz-tab  { padding: 11px 18px !important; font-size: 14px !important; }
}

@container cbsz (max-width: 560px) {
    .cbsz-tabs { gap: 8px !important; }
    .cbsz-tab  { flex: 1 1 auto !important; justify-content: center !important; padding: 11px 14px !important; }
    .cbsz-tab span { font-size: 13.5px !important; }

    .cbsz-card  { padding: 22px 18px !important; }
    .cbsz-cards { grid-template-columns: 1fr !important; }

    .cbsz-slider__value  { font-size: 21px !important; }
    .cbsz-result__value--big { font-size: 30px !important; }
    .cbsz-preview__title { font-size: 23px !important; }
    .cbsz-table          { font-size: 13.5px !important; }
    .cbsz-table td       { padding: 11px 10px !important; }
    .cbsz-table th       { padding: 0 10px 9px !important; }
}

@container cbsz (max-width: 380px) {
    /* Colonne très étroite : les intitulés d'onglet passent sous
       l'icône plutôt que de forcer un défilement horizontal. */
    .cbsz-tab { padding: 10px 12px !important; }
    .cbsz-tab span { font-size: 12.5px !important; }
    .cbsz-card { padding: 18px 14px !important; }
    .cbsz-length { padding: 13px 12px !important; }
}

/* ── Repli sur la largeur de fenêtre ─────────────────── */
@media (max-width: 940px) {
    .cbsz-grid,
    .cbsz-grid--sidebar,
    .cbsz-grid--list { grid-template-columns: 1fr !important; gap: 18px !important; }

    .cbsz-card { padding: 26px 22px !important; }
    .cbsz-tab  { padding: 11px 18px !important; font-size: 14px !important; }
}

@media (max-width: 560px) {
    .cbsz-tabs { gap: 8px !important; }
    .cbsz-tab  { flex: 1 1 auto !important; justify-content: center !important; padding: 11px 14px !important; }
    .cbsz-tab span { font-size: 13.5px !important; }

    .cbsz-card  { padding: 22px 18px !important; }
    .cbsz-cards { grid-template-columns: 1fr !important; }

    .cbsz-slider__value  { font-size: 21px !important; }
    .cbsz-result__value--big { font-size: 30px !important; }
    .cbsz-preview__title { font-size: 23px !important; }
    .cbsz-table          { font-size: 13.5px !important; }
    .cbsz-table td       { padding: 11px 10px !important; }
    .cbsz-table th       { padding: 0 10px 9px !important; }
}