/* ================================================================
   CamiBijoux – Modes de livraison
   ================================================================ */

.cbin {
    --cbin-dark:   #3A2317;
    --cbin-text:   #4A3C33;
    --cbin-muted:  #8A7A6C;
    --cbin-card:   #FBF7F3;
    --cbin-border: #E9E1D9;
    --cbin-radius: 14px;

    /* Teintes propres au mode survolé, écrasées en ligne par le PHP */
    --cbin-bg:       #EFEBE7;
    --cbin-ink:      #7A6E64;
    --cbin-chip:     #E7E1DB;
    --cbin-chip-ink: #64594F;

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

    /* Le bloc devient sa propre référence de largeur : les règles
       @container plus bas réagissent à SA taille, et non à celle de la
       fenêtre. Indispensable dans une colonne Elementor étroite, où
       aucune media query ne se déclencherait. */
    container-type: inline-size !important;
    container-name: cbin !important;

    /* Contrepartie de la ligne du dessus, et elle est indispensable.
       « container-type: inline-size » signifie : calcule ma largeur SANS
       regarder mon contenu. Quand un ancêtre demande une largeur
       max-content — ce que fait tout conteneur Elementor réglé sur
       « Wrap » en colonne — cette largeur tombe donc à zéro, le texte
       s'empile lettre par lettre, et le bloc annonce plusieurs milliers
       de pixels de haut. Le conteneur réserve la place, d'où un vide
       immense sous le bloc.

       Cette valeur est la largeur à supposer dans ce cas précis. Elle ne
       change rien à l'affichage normal, où la largeur réelle est
       connue. */
    contain-intrinsic-inline-size: 900px !important;
}
.cbin *, .cbin *::before, .cbin *::after { box-sizing: border-box !important; }

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

/* Une colonne de grille prend par défaut la largeur de son contenu le
   plus large : sans cela, un intitulé long ferait déborder le bloc. */
.cbin-grid > * { min-width: 0 !important; }

.cbin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

/* ── Liste des modes ─────────────────────────────────── */
.cbin-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.cbin-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: var(--cbin-card) !important;
    /* Bordure présente en permanence : sans elle, les cartes
       « sautaient » d'un pixel en apparaissant au survol. */
    border: 1px solid var(--cbin-border) !important;
    border-radius: var(--cbin-radius) !important;
    font-family: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s, border-color .18s !important;
}

/* Les cartes sont des <button> : beaucoup de thèmes leur imposent
   « white-space: nowrap », ce qui empêcherait les textes de revenir à
   la ligne et les ferait déborder. */
.cbin-item, .cbin-item * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (hover: hover) {
    .cbin-item:hover { background: #FDFAF7 !important; }
}

.cbin-item.is-active {
    background: #FFFFFF !important;
    /* La teinte du mode marque la sélection ; la bordure beige reste
       la règle partout ailleurs. */
    border-color: var(--cbin-ink) !important;
}

.cbin-item__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: var(--cbin-bg) !important;
    color: var(--cbin-ink) !important;
}
.cbin-item__icon svg { width: 21px !important; height: 21px !important; }

.cbin-item__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.cbin-item__head {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

.cbin-item__name {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--cbin-dark) !important;
    line-height: 1.3 !important;
}

.cbin-item__badge {
    display: inline-block !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    background: var(--cbin-chip) !important;
    color: var(--cbin-chip-ink) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    line-height: 1.5 !important;
}

.cbin-item__sub {
    font-size: 13.5px !important;
    color: var(--cbin-muted) !important;
    line-height: 1.45 !important;
}

.cbin-item__meta {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    text-align: right !important;
}

.cbin-item__price {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--cbin-dark) !important;
    white-space: nowrap !important;
}

.cbin-item__delay {
    font-size: 12.5px !important;
    color: var(--cbin-muted) !important;
    line-height: 1.4 !important;
}

/* ── Panneau de détail ───────────────────────────────── */
/* Le panneau suit le défilement pendant qu'on parcourt la liste.
   « align-items: start » sur la grille est indispensable : sans lui,
   la colonne s'étirerait sur toute la hauteur et le collant n'aurait
   aucune marge de manœuvre.

   --cbin-sticky-top se règle si un en-tête fixe recouvre le haut de
   la page. */
.cbin-panels {
    position: sticky !important;
    top: var(--cbin-sticky-top, 24px) !important;
}

.cbin-panel {
    padding: 34px 36px !important;
    border-radius: var(--cbin-radius) !important;
    /* Fond blanc, réveillé par un voile teinté aux couleurs du mode qui
       s'estompe en diagonale depuis le coin haut droit. */
    background:
        radial-gradient(120% 90% at 100% 0%, var(--cbin-bg) 0%, rgba(255, 255, 255, 0) 62%),
        #FFFFFF !important;
    border: 1px solid var(--cbin-border) !important;
}

.cbin-panel__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 22px !important;
    border-radius: 14px !important;
    background: var(--cbin-bg) !important;
    color: var(--cbin-ink) !important;
}
.cbin-panel__icon svg { width: 25px !important; height: 25px !important; }

.cbin-panel__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    color: var(--cbin-dark) !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cbin-panel__sub {
    margin: 0 0 24px !important;
    font-size: 15px !important;
    color: var(--cbin-muted) !important;
    line-height: 1.5 !important;
}

/* ── Délai et tarif ──────────────────────────────────── */
.cbin-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 0 26px !important;
}

.cbin-fact {
    padding: 16px 20px !important;
    /* Le panneau étant blanc, un voile blanc n'y ressortirait plus :
       les encadrés prennent un beige très clair pour se détacher. */
    background: #F6F2ED !important;
    border-radius: 12px !important;
}

.cbin-fact__label {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--cbin-muted) !important;
}

.cbin-fact__value {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cbin-dark) !important;
    line-height: 1.4 !important;
}

/* ── Points détaillés ────────────────────────────────── */
.cbin-points {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.cbin-points li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--cbin-text) !important;
}

.cbin-points svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    margin-top: 2px !important;
    color: var(--cbin-ink) !important;
}

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

   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.
   ══════════════════════════════════════════════════════ */

@container cbin (max-width: 900px) {
    .cbin-grid   { grid-template-columns: 1fr !important; gap: 18px !important; }
    /* En pile, le panneau passe sous la liste : le rendre collant
       le figerait au milieu du défilement. */
    .cbin-panels { position: static !important; }
    .cbin-panel  { padding: 28px 24px !important; }
    .cbin-panel__title { font-size: 26px !important; }
}

@container cbin (max-width: 520px) {
    .cbin-item { flex-wrap: wrap !important; padding: 14px 16px !important; }
    .cbin-item__meta {
        flex-basis: 100% !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 4px !important;
        text-align: left !important;
    }
    .cbin-facts { grid-template-columns: 1fr !important; gap: 12px !important; }
    .cbin-panel { padding: 24px 18px !important; }
    .cbin-panel__title { font-size: 23px !important; }
}

@media (max-width: 900px) {
    .cbin-grid   { grid-template-columns: 1fr !important; gap: 18px !important; }
    /* En pile, le panneau passe sous la liste : le rendre collant
       le figerait au milieu du défilement. */
    .cbin-panels { position: static !important; }
    .cbin-panel  { padding: 28px 24px !important; }
    .cbin-panel__title { font-size: 26px !important; }
}

@media (max-width: 520px) {
    .cbin-item { flex-wrap: wrap !important; padding: 14px 16px !important; }
    .cbin-item__meta {
        flex-basis: 100% !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 4px !important;
        text-align: left !important;
    }
    .cbin-facts { grid-template-columns: 1fr !important; gap: 12px !important; }
    .cbin-panel { padding: 24px 18px !important; }
    .cbin-panel__title { font-size: 23px !important; }
}

/* ══════════════════════════════════════════════════════════════
   PARCOURS D'UNE COMMANDE  [camibijoux_etapes]
   ══════════════════════════════════════════════════════════════ */
.cbtl {
    --cbtl-icon: 54px;   /* côté du carré de l'icône */
    --cbtl-gap:  40px;   /* espace entre deux étapes */
    --cbtl-slot: 14px;   /* respiration entre l'icône et le trait */
    --cbtl-dark: #3A2317;
    --cbtl-text: #4A3C33;
    --cbtl-muted:#8A7A6C;
    --cbtl-line: #DCD3C9;
    --cbtl-num:  #C97891;

    --cbtl-bg:  #EFEBE7;
    --cbtl-ink: #7A6E64;

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

    container-type: inline-size !important;
    container-name: cbtl !important;

    /* Même parade que pour .cbin : sans elle, un ancêtre qui demande une
       largeur max-content obtient zéro, et le bloc se déclare
       démesurément haut. */
    contain-intrinsic-inline-size: 900px !important;
}
.cbtl *, .cbtl *::before, .cbtl *::after { box-sizing: border-box !important; }

.cbtl-title {
    margin: 0 0 26px !important;
    padding: 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--cbtl-dark) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cbtl-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--cbtl-gap) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cbtl-step {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
}
.cbtl-step::marker { content: none !important; }

/* ── Trait de liaison ─────────────────────────────────
   Deux segments par étape, à gauche et à droite de l'icône. Chacun
   se prolonge d'une demi-gouttière au-delà de sa colonne : bout à
   bout, ils forment une ligne continue d'un bord à l'autre de la
   frise, interrompue proprement autour de chaque icône.

   Ce découpage évite d'avoir à connaître la position exacte des
   icônes : chaque segment se cale sur le centre de SA colonne. */
.cbtl-step::before,
.cbtl-step::after {
    content: '' !important;
    position: absolute !important;
    top: calc(var(--cbtl-icon) / 2) !important;
    height: 1px !important;
    background: var(--cbtl-line) !important;
}

.cbtl-step::before {
    left: calc(var(--cbtl-gap) / -2) !important;
    right: calc(50% + var(--cbtl-icon) / 2 + var(--cbtl-slot)) !important;
}

.cbtl-step::after {
    left: calc(50% + var(--cbtl-icon) / 2 + var(--cbtl-slot)) !important;
    right: calc(var(--cbtl-gap) / -2) !important;
}

.cbtl-icon {
    position: relative !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--cbtl-icon) !important;
    height: var(--cbtl-icon) !important;
    border-radius: 14px !important;
    background: var(--cbtl-bg) !important;
    color: var(--cbtl-ink) !important;
    /* Au-dessus des segments, pour qu'aucun trait ne la traverse */
    z-index: 1 !important;
}
.cbtl-icon svg { width: 23px !important; height: 23px !important; }

.cbtl-num {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--cbtl-num) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.cbtl-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
}

.cbtl-step__title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--cbtl-dark) !important;
    line-height: 1.25 !important;
}

.cbtl-step__desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--cbtl-muted) !important;
}

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

   Sous 760 px, la frise bascule à la verticale : quatre colonnes
   sur un écran de téléphone donneraient des colonnes de 60 px et
   des titres coupés. L'icône passe à gauche, le texte à droite,
   et le trait devient vertical d'une étape à la suivante.
   ══════════════════════════════════════════════════════ */
@container cbtl (max-width: 760px) {
    .cbtl-steps { grid-template-columns: 1fr !important; gap: 0 !important; }

    .cbtl-step {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 18px !important;
        align-items: start !important;
        padding-bottom: 26px !important;
        text-align: left !important;
    }
    .cbtl-step.is-last { padding-bottom: 0 !important; }

    .cbtl-body { align-items: flex-start !important; padding-top: 4px !important; }

    /* Le segment de gauche n'a plus de sens à la verticale. */
    .cbtl-step::before { display: none !important; }

    .cbtl-step::after {
        top: calc(var(--cbtl-icon) + 10px) !important;
        bottom: 6px !important;
        left: calc(var(--cbtl-icon) / 2) !important;
        right: auto !important;
        width: 1px !important;
        height: auto !important;
    }
    /* Rien à relier après la dernière étape. */
    .cbtl-step.is-last::after { display: none !important; }
}

@container cbtl (max-width: 420px) {
    .cbtl { --cbtl-icon: 46px !important; }
    .cbtl-icon svg { width: 20px !important; height: 20px !important; }
    .cbtl-title { font-size: 22px !important; }
    .cbtl-step__title { font-size: 17px !important; }
    .cbtl-step__desc  { font-size: 13.5px !important; }
}

/* ── Repli sur la largeur de fenêtre ─────────────────── */
@media (max-width: 760px) {
    .cbtl-steps { grid-template-columns: 1fr !important; gap: 0 !important; }

    .cbtl-step {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 18px !important;
        align-items: start !important;
        padding-bottom: 26px !important;
        text-align: left !important;
    }
    .cbtl-step.is-last { padding-bottom: 0 !important; }

    .cbtl-body { align-items: flex-start !important; padding-top: 4px !important; }

    .cbtl-step::before { display: none !important; }

    .cbtl-step::after {
        top: calc(var(--cbtl-icon) + 10px) !important;
        bottom: 6px !important;
        left: calc(var(--cbtl-icon) / 2) !important;
        right: auto !important;
        width: 1px !important;
        height: auto !important;
    }
    .cbtl-step.is-last::after { display: none !important; }
}

@media (max-width: 420px) {
    .cbtl { --cbtl-icon: 46px !important; }
    .cbtl-icon svg { width: 20px !important; height: 20px !important; }
    .cbtl-title { font-size: 22px !important; }
    .cbtl-step__title { font-size: 17px !important; }
    .cbtl-step__desc  { font-size: 13.5px !important; }
}