/* Calculateur de la page d'accueil : coût mensuel total, MeshLite face à une plateforme au compteur.
   Mêmes couleurs et typographie que le site, qui n'existe qu'en clair. */
:root{
  --canvas:#f7f6f2;--card:#fff;--ink:#1c1b19;--muted:#6b6860;--faint:#9b978d;--line:#e6e3dc;--line-soft:#eeece6;--pill:#eeece6;
  --blue:#2b44c4;--blue-deep:#1439a6;
  --dark:#1c1b19;--on-dark:#f7f6f2;--on-dark-muted:#a8a49b;--on-dark-line:#3a3833;--on-dark-field:#2a2925;
  --ours:#7da2f8;--theirs:#b0603a;--tile-line:#d9a88b;--tile-fill:#f1d9cb;
  --radius:16px
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.5 Archivo,system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;color:inherit}
a{color:var(--blue)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.cx{display:flex;justify-content:center;padding:0}
.cx-box{width:100%;max-width:1180px;background:var(--canvas);border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:20px}
html[data-embedded="true"] .cx-box{background:var(--canvas);max-width:none;padding-inline:0}

.cx-head{display:flex;flex-direction:column;gap:8px}
.cx-kicker{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--blue);text-transform:uppercase}
.cx h2{margin:0;font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}

/* Audience */
.cx-seg{display:flex;flex-wrap:wrap;gap:2px;padding:4px;background:var(--pill);border:1px solid var(--line);border-radius:999px;align-self:flex-start;max-width:100%}
.cx-seg button{border:0;min-height:44px;padding:0 20px;border-radius:999px;background:transparent;color:var(--muted);font:500 15px/1.2 Archivo,sans-serif;cursor:pointer}
.cx-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.cx-for{margin:-8px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* Contrôles */
.cx-controls{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:end}
.cx-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.cx-field-row{display:flex;justify-content:space-between;align-items:baseline;line-height:24px}
.cx-label{font-size:15px;font-weight:600;color:var(--ink);line-height:24px}
.cx-out{font-size:18px;font-weight:600}
.cx-select-wrap{position:relative;display:flex;min-width:0}
.cx-select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cx-select{width:100%;appearance:none;-webkit-appearance:none;background:var(--canvas);color:var(--ink);font:500 18px/1.2 Archivo,sans-serif;min-height:48px;border:1px solid var(--line);border-radius:999px;padding:0 40px 0 20px;cursor:pointer;text-overflow:ellipsis}
.cx-range{width:100%;height:48px;margin:0;accent-color:var(--ink);cursor:pointer}
.cx-lengths{display:flex;gap:2px;padding:4px;background:var(--pill);border-radius:999px}
.cx-lengths button{flex:1;min-width:0;border:0;min-height:40px;border-radius:999px;background:transparent;color:var(--muted);font:500 18px/1 Archivo,sans-serif;cursor:pointer}
.cx-lengths button[aria-pressed="true"]{background:var(--dark);color:var(--on-dark);font-weight:600}
.cx-equiv{margin:0;font-size:14px;color:var(--muted)}

/* Cartes */
.cx-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-card{border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cx-card.is-ours{background:var(--dark);color:var(--on-dark)}
.cx-card.is-theirs{background:var(--card);border:1px solid var(--line)}
/* Pastille "with us / with a competitor" resting on each card's top edge: it names the side without adding a row. */
.cx-cards{margin-top:6px}
.cx-card{position:relative}
.cx-tag{position:absolute;top:-11px;left:22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:5px 10px;border-radius:999px;white-space:nowrap}
.is-ours .cx-tag{background:var(--blue);color:#fff}
.is-theirs .cx-tag{background:var(--tile-fill);color:var(--theirs);border:1px solid var(--tile-line)}
.cx-card-head{display:flex;align-items:center;gap:12px;min-height:44px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.is-ours .cx-card-head{border-bottom-color:var(--on-dark-line)}
.cx-brand{font-size:22px;font-weight:600;letter-spacing:-.02em}
.cx-plus{font-size:18px;font-weight:600;color:var(--muted)}
.is-ours .cx-plus{color:var(--on-dark-muted)}
.cx-select-wrap.is-pill{flex:1;max-width:330px;min-width:180px}
.cx-select-wrap.is-pill::after{right:16px}
.cx-select.is-pill{font-size:15px;min-height:44px;padding:0 34px 0 16px}
.is-ours .cx-select.is-pill{background:var(--on-dark-field);color:var(--on-dark);border-color:var(--on-dark-line)}
.cx-select-wrap.is-bare::after{right:3px}
.cx-select.is-bare{background:transparent;border:0;font-size:22px;font-weight:600;letter-spacing:-.02em;padding:0 22px 0 0;min-height:44px;width:auto}
.cx-included{font-size:15px;color:var(--muted)}

.cx-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 8px;padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.is-ours .cx-row{border-bottom-color:var(--on-dark-line)}
.cx-sign{font-size:16px;font-weight:600;color:var(--faint)}
.is-ours .cx-sign{color:var(--on-dark-muted)}
.cx-row-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-row-k{font-size:16px;font-weight:500}
.cx-row-d{font-size:14px;color:var(--muted)}
.is-ours .cx-row-d{color:var(--on-dark-muted)}
.cx-row-v{font-size:16px;font-weight:600;line-height:1;white-space:nowrap;text-align:right}
.cx-row.is-big .cx-row-v{font-size:48px;letter-spacing:-.03em}
.is-ours .cx-row.is-accent .cx-row-v{color:var(--ours)}
.is-theirs .cx-row.is-accent .cx-row-v{color:var(--theirs)}

.cx-total{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:8px}
.cx-total-label{font-size:14px;font-weight:600;color:var(--muted)}
.is-ours .cx-total-label{color:var(--on-dark-muted)}
.cx-total-value{font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1}
.is-ours .cx-total-value{color:var(--ours)}
.is-theirs .cx-total-value{color:var(--theirs)}
/* Quand les lignes portent déjà les montants forts, le total redevient sobre. */
.cx-card.is-subtotal .cx-total-value{font-size:28px;color:inherit}
.cx-also{font-size:14px;line-height:1.45;color:var(--muted)}
.is-ours .cx-also{color:var(--on-dark-muted)}

/* Méthode : un lien discret sous le bandeau, sans fond ; ouvert, le détail prend toute la largeur. */
.cx-basis{grid-column:1/-1;min-width:0}
.cx-basis summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);cursor:pointer;list-style:none;transition:color 160ms cubic-bezier(.23,1,.32,1)}
.cx-basis summary::-webkit-details-marker{display:none}
.cx-basis summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.cx-basis[open] summary::after{transform:translateY(1px) rotate(-135deg)}
@media(hover:hover) and (pointer:fine){.cx-basis summary:hover{color:var(--ink)}}
.cx-basis summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.cx-basis-list{columns:2 360px;column-gap:48px;margin:6px 4px 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--muted)}
.cx-basis-list p{margin:0 0 10px;break-inside:avoid}
@media(prefers-reduced-motion:reduce){.cx-basis summary,.cx-basis summary::after{transition:none}}

/* Bandeau de résultat */
.cx-band{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:20px}
.cx-band-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cx-band-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-head-value{font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--blue)}
.cx-band-sub{font-size:16px;color:var(--ink)}
.cx-keep{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.cx-keep-label{font-size:15px;font-weight:600}
.cx-keep-value{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.cx-tiles-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.cx-tiles{display:flex;flex-wrap:wrap;gap:6px}
.cx-tiles i{display:block;width:44px;height:28px;border-radius:6px;position:relative;overflow:hidden;background:var(--card);border:1.5px solid var(--tile-line)}
.cx-tiles i b{position:absolute;inset:0 auto 0 0;background:var(--tile-fill)}
.cx-tiles i.is-ours{border-color:var(--dark)}
.cx-tiles i.is-ours b{background:var(--dark)}
.cx-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--dark);color:var(--on-dark);font-size:16px;font-weight:600;white-space:nowrap;text-decoration:none;margin-left:auto}
.cx-cta:hover{background:#000;color:var(--on-dark);text-decoration:none}

/* Tablette : contrôles sur deux rangées, cartes côte à côte. */
@media(max-width:960px){
  .cx-box{padding:32px 28px}
  .cx-controls{grid-template-columns:1fr 1fr;gap:24px}
  .cx-controls .cx-field:first-child{grid-column:1/-1}
  .cx-row.is-big .cx-row-v,.cx-total-value{font-size:40px}
}
/* Téléphone : tout empilé, montants réduits, aucun débordement horizontal. */
@media(max-width:720px){
  .cx-box{padding:24px 18px;gap:16px;border-radius:16px}
  .cx h2{font-size:28px}
  .cx-seg{align-self:stretch}
  .cx-seg button{flex:1;padding:0 10px;font-size:14px;min-height:44px}
  .cx-controls{grid-template-columns:1fr;gap:20px;padding:20px}
  .cx-controls .cx-field:first-child{grid-column:auto}
  .cx-select{font-size:16px}
  .cx-lengths button{font-size:16px}
  .cx-cards{grid-template-columns:1fr;row-gap:26px;margin-top:8px}
  .cx-card{padding:22px 20px}
  .cx-select-wrap.is-pill{max-width:none;flex-basis:100%;min-width:0}
  .cx-plus{display:none}
  .cx-row.is-big .cx-row-v{font-size:34px}
  .cx-total-value{font-size:36px}
  .cx-band{padding:22px 20px}
  .cx-band-row{flex-direction:column;align-items:stretch;gap:16px}
  .cx-keep{align-items:flex-start}
  .cx-head-value{font-size:24px;letter-spacing:-.02em}
  .cx-tiles i{width:34px;height:22px}
  .cx-cta{margin-left:0;justify-content:center}
}
@media(max-width:720px){html[data-embedded="true"] .cx-box{padding-inline:0}}
@media(max-width:360px){
  .cx-box{padding:20px 14px}
  .cx-seg button{font-size:13px}
  .cx-row.is-big .cx-row-v{font-size:28px}
}

/* Homepage v2 (Claude Design proposal): heading and audience left, inputs right, the two bills, then a one-row result. */
.cx-intro{display:flex;flex-direction:column;min-width:0}
.cx-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;font-size:13px;line-height:15px}
.cx-meta .cx-equiv{font-size:13px;line-height:15px}
.cx-also:empty{display:none}
@media(min-width:961px){
  html[data-embedded="true"] .cx-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0}
  html[data-embedded="true"] .cx-intro{padding-right:24px}
  html[data-embedded="true"] .cx-head{gap:12px}
  html[data-embedded="true"] .cx-kicker{font-size:12px;line-height:normal;letter-spacing:.14em}
  html[data-embedded="true"] .cx h2{font-size:clamp(26px,2.4vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.025em}
  html[data-embedded="true"] .cx-seg{margin-top:16px;gap:4px;padding:4px;border:0;background:#E6E3DC}
  html[data-embedded="true"] .cx-seg button{min-height:38px;height:38px;padding:0 14px;font-size:13px;font-weight:400}
  html[data-embedded="true"] .cx-seg button[aria-pressed="true"]{box-shadow:0 1px 2px rgba(37,35,28,.12)}
  html[data-embedded="true"] .cx-for{margin:12px 0 0;font-size:14px;line-height:1.5}
  html[data-embedded="true"] .cx-controls{grid-template-columns:1fr 1fr;gap:14px 24px;padding:18px 22px;align-self:start;align-content:start;border-radius:20px;border-color:#EAE8E2}
  html[data-embedded="true"] .cx-field{gap:8px}
  html[data-embedded="true"] .cx-label,html[data-embedded="true"] .cx-field-row{font-size:14px;font-weight:500;line-height:16px}
  html[data-embedded="true"] .cx-out{font-size:14px;font-weight:500;line-height:16px}
  html[data-embedded="true"] .cx-field:nth-child(2){gap:4px}
  html[data-embedded="true"] .cx-controls .cx-field:nth-child(3){grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px}
  html[data-embedded="true"] .cx-controls .cx-field:nth-child(3) .cx-lengths{flex:1 1 240px;background:#F3F1EC}
  html[data-embedded="true"] .cx-controls .cx-select,html[data-embedded="true"] .cx-range{min-height:42px;height:42px;font-size:15px}
  html[data-embedded="true"] .cx-controls .cx-select{background:#fff;border-color:#DCD9D2}
  html[data-embedded="true"] .cx-lengths{gap:4px}
  html[data-embedded="true"] .cx-lengths button{min-height:34px;height:34px;font-size:14px;font-weight:400}
  html[data-embedded="true"] :is(.cx-cards,.cx-band){grid-column:1/-1}
  html[data-embedded="true"] .cx-card{gap:0;padding:20px 24px;border-radius:20px}
  html[data-embedded="true"] .cx-card-head{min-height:0;padding-bottom:12px;gap:10px}
  html[data-embedded="true"] .cx-brand,html[data-embedded="true"] .cx-select.is-bare{font-size:22px;min-height:0;height:auto}
  html[data-embedded="true"] .cx-select.is-pill{min-height:31px;height:31px;font-size:13px;padding:0 30px 0 14px}
  html[data-embedded="true"] .cx-row{padding:12px 0;gap:2px 8px}
  html[data-embedded="true"] .cx-row-k{font-size:16px;line-height:1.2}
  html[data-embedded="true"] .cx-row-d{font-size:14px;line-height:1.2}
  html[data-embedded="true"] .cx-row.is-big .cx-row-v{font-size:42px;line-height:1}
  html[data-embedded="true"] .cx-row.is-big .cx-row-k{font-size:17px}
  html[data-embedded="true"] .cx-row-v{font-size:17px}
  html[data-embedded="true"] .cx-total{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding-top:12px;margin-top:0}
  html[data-embedded="true"] .cx-total-label{font-size:15px;font-weight:400}
  html[data-embedded="true"] .cx-total-value{font-size:32px;line-height:1.1;letter-spacing:-.02em}
  html[data-embedded="true"] .cx-total .cx-also{flex-basis:100%}
  html[data-embedded="true"] .cx-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px 28px;padding:18px 24px;border-radius:20px}
  html[data-embedded="true"] .cx-band-row{display:contents}
  html[data-embedded="true"] .cx-band-head{grid-column:1;grid-row:1}
  html[data-embedded="true"] .cx-band-sub{display:none}
  html[data-embedded="true"] .cx-head-value{font-size:24px;line-height:1.1;letter-spacing:-.02em}
  html[data-embedded="true"] .cx-tiles-wrap{grid-column:2;grid-row:1;gap:8px}
  html[data-embedded="true"] .cx-tiles{gap:6px}
  html[data-embedded="true"] .cx-tiles i{width:40px;height:24px;border-width:1px}
  html[data-embedded="true"] .cx-keep{grid-column:3;grid-row:1;flex-direction:row;align-items:baseline;gap:6px}
  html[data-embedded="true"] .cx-keep-label{font-size:15px;font-weight:400;color:var(--muted)}
  html[data-embedded="true"] .cx-cta{grid-column:4;grid-row:1;min-height:46px;height:46px;margin:0;font-size:15px}
}

/* Homepage polish: same blue, label and small-text sizes as the page around the calculator. */
:root{--blue:#254ebc;--blue-deep:#1439a6}
.cx-kicker,html[data-embedded="true"] .cx-kicker{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.1em}
.cx-meta,.cx-meta .cx-equiv{font-size:14px;line-height:1.4}
@media(min-width:361px){.cx-seg button{font-size:14px}}
.cx-lengths button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.cx-cta{background:var(--blue);color:#fff;transition:background-color 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1)}
.cx-cta:hover{background:var(--blue-deep);color:#fff}
.cx-cta:active{transform:scale(.97)}
@media(min-width:961px){
  html[data-embedded="true"] .cx h2{font-size:clamp(30px,2.8vw,40px)}
  html[data-embedded="true"] .cx-seg button{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.cx-cta:active{transform:none}}
/* Phone: the audience switch breathes between the title and its note, and two-line labels keep their padding. */
@media(max-width:960px){.cx-seg{margin:16px 0 12px}}
@media(max-width:720px){
  .cx-seg{border-radius:28px}
  .cx-seg button{min-height:48px;padding:6px 12px;line-height:1.25}
}
/* Stable boxes: the frame never shows a scrollbar while it catches up with its content, the result band
   glides inside its shell, and on wide screens both totals sit at the foot of their cards. */
html[data-embedded="true"],html[data-embedded="true"] body{overflow:hidden}
.cx-band-shell{min-width:0;overflow:hidden}
@media(min-width:961px){
  html[data-embedded="true"] .cx-band-shell{grid-column:1/-1}
  html[data-embedded="true"] .cx-total{margin-top:auto}
}
/* Wide screens, compact: tighter boxes, and the result band holds on a single line with smaller bill tiles. */
@media(min-width:961px){
  html[data-embedded="true"] .cx-box{gap:14px}
  html[data-embedded="true"] .cx-controls{gap:12px 24px;padding:16px 22px}
  html[data-embedded="true"] .cx-meta{gap:4px 16px}
  html[data-embedded="true"] .cx-card{padding:18px 24px}
  html[data-embedded="true"] .cx-card-head{padding-bottom:10px}
  html[data-embedded="true"] .cx-row{padding:10px 0}
  html[data-embedded="true"] .cx-total{padding-top:10px}
  html[data-embedded="true"] .cx-band{gap:12px 24px;padding:14px 24px}
  html[data-embedded="true"] .cx-head-value{font-size:22px}
  html[data-embedded="true"] .cx-tiles{flex-wrap:nowrap;gap:4px}
  html[data-embedded="true"] .cx-tiles i{flex:0 1 26px;min-width:2px;width:auto;height:18px;border-radius:4px}
  html[data-embedded="true"] .cx-cta{min-height:44px;height:44px}
}
/* Conversations simultanées : même pictogramme de personnes sous le forfait et dans le bandeau. */
.cx-cap::before,.cx-band-cap::before{content:"";background:currentColor;-webkit-mask:var(--people) center/contain no-repeat;mask:var(--people) center/contain no-repeat}
:root{--people:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Ccircle cx='7' cy='4.5' r='3'/%3E%3Cpath d='M1 15c0-3.3 2.7-6 6-6s6 2.7 6 6z'/%3E%3Ccircle cx='14.5' cy='5' r='2.5'/%3E%3Cpath d='M14.5 9c2.8 0 4.5 2.4 4.5 6h-4.2c0-2.3-.6-4.2-1.8-5.6.5-.3 1-.4 1.5-.4z'/%3E%3C/svg%3E")}
/* Sous-ligne du forfait. */
.cx-row-d.cx-cap{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--ink)}
.cx-cap::before{flex:none;width:18px;height:14px}
.is-ours .cx-row-d.cx-cap{color:var(--ours)}
.cx-row-d.cx-cap.is-low{color:var(--theirs)}
/* Bandeau : phrase de capacité quand le concurrent est moins cher. */
.cx-band-cap{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.cx-band-cap::before{flex:none;width:22px;height:18px;color:var(--blue)}
@media(min-width:961px){
  html[data-embedded="true"] .cx-band-cap{grid-column:2/4;grid-row:1}
}
@media(max-width:720px){
  .cx-band-cap{font-size:14px}
}

/* Listes déroulantes dessinées aux couleurs du calculateur, sans script, là où le navigateur
   le permet (Chrome et Edge récents) ; les autres gardent leur liste native. */
@supports (appearance:base-select){
  :root{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.3 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .cx-select,.cx-select::picker(select){appearance:base-select}
  .cx-select{display:flex;align-items:center;white-space:nowrap;overflow:hidden}
  .cx-select::picker-icon{display:none}
  .cx-select>button{display:contents}
  .cx-select selectedcontent{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cx-select::picker(select){position-try-order:normal;margin:6px 0;padding:6px;min-width:max(anchor-size(width),240px);max-width:min(440px,calc(100vw - 32px));max-height:min(340px,70vh);border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 14px 34px rgba(28,27,25,.14),0 2px 6px rgba(28,27,25,.06);opacity:0;translate:0 -4px;transition:opacity .14s ease-out,translate .14s ease-out,display .14s allow-discrete,overlay .14s allow-discrete}
  .cx-select:open::picker(select){opacity:1;translate:0}
  @starting-style{.cx-select:open::picker(select){opacity:0;translate:0 -4px}}
  .cx-select option{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:9px;font:400 15px/1.3 Archivo,system-ui,sans-serif;letter-spacing:0;color:inherit;white-space:normal;cursor:pointer}
  .cx-select option:hover,.cx-select option:focus-visible{background:var(--canvas);outline:0}
  .cx-select option:checked{font-weight:600}
  .cx-select option::checkmark{order:1;margin-left:auto;content:"";flex:none;width:14px;height:14px;background:var(--blue);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
  /* Carte MeshLite sombre : liste sombre assortie. */
  .is-ours .cx-select::picker(select){border-color:var(--on-dark-line);background:var(--on-dark-field);color:var(--on-dark);box-shadow:0 14px 34px rgba(0,0,0,.32)}
  .is-ours .cx-select option:hover,.is-ours .cx-select option:focus-visible{background:#37352f}
  .is-ours .cx-select option::checkmark{background:var(--ours)}
  /* Le chevron se retourne à l'ouverture. */
  .cx-select-wrap::after{transition:transform .14s ease-out}
  .cx-select-wrap:has(.cx-select:open)::after{transform:translateY(-25%) rotate(-135deg)}
  @media(max-width:720px){.cx-select option{padding:8px 10px;font-size:14px;text-wrap:pretty}}
}
@media(prefers-reduced-motion:reduce){
  .cx-select::picker(select),.cx-select-wrap::after{transition:none}
}