/* stylesV3.css : nouveaux styles du site (début : tunnel de commande en une page, checkout.php)
   Les règles sont préfixées par .ck : le site applique des styles globaux
   (h2 sur fond noir, label flottant, champs gris...) qu'il faut neutraliser ici. */

.ck {
  --ck-red: #BE1622;
  --ck-red-dark: #8E1019;
  --ck-red-bg: #FDF3F4;
  --ck-text: #222;
  --ck-text2: #333;
  --ck-muted: #666;
  --ck-border: #D9D9D9;
  --ck-input: #CCC;
  --ck-bg: #F3F3F3;
  --ck-ok: #2F6B3F;
  font-family: Roboto, system-ui, sans-serif;
  color: var(--ck-text);
  font-size: 15px;
  line-height: 1.45;
}
.ck *, .ck *::before, .ck *::after { box-sizing: border-box }
.ck [hidden] { display: none !important }
.ck a { color: var(--ck-red) }
.ck a:hover { color: var(--ck-red-dark); text-decoration: underline }
.ck a:visited { color: var(--ck-red) }
.ck p { margin: 0 }
.ck h2 { font-family: 'Roboto Slab', serif; color: var(--ck-text); background: none; padding: 0 }
.ck h2 { font-size: 19px; font-weight: 500; margin: 0 0 18px; display: flex; align-items: center; gap: 10px }
.ck label { float: none; width: auto; padding: 0; text-align: left }
.ck input, .ck textarea, .ck button { font-family: inherit; margin: 0 }
.ck input[type="checkbox"], .ck input[type="radio"] { margin: 0; accent-color: var(--ck-red) }
.ck input[type="text"], .ck input[type="number"], .ck textarea {
  border: 1px solid var(--ck-input); border-radius: 4px; color: var(--ck-text); font-size: 15px; background: #fff;
}
.ck input[type="text"]:focus, .ck input[type="number"]:focus, .ck textarea:focus { border-color: var(--ck-text) }
.ck :focus-visible { outline: 2px solid var(--ck-red); outline-offset: 2px }
.ck .ck-num-t { font-variant-numeric: tabular-nums }

.ck-ico { width: 16px; height: 16px; flex: none }

/* mise en page */
.ck-main { padding: 4px 0 32px }
.ck-main > h1 { text-align: center }
.ck-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start }
.ck-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.ck-sec { background: #fff; border: 1px solid var(--ck-border); border-radius: 4px; padding: 24px; transition: opacity .15s }
.ck-sec.is-busy { opacity: .6 }
.ck-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ck-red); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: Roboto, sans-serif }
.ck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px }
.ck-head h2 { margin: 0 }
.ck-link { font-size: 14px }
.ck-sub { font-size: 13.5px; color: var(--ck-muted) }
.ck-indent { margin: -12px 0 16px 38px !important }
.ck-msg { border-radius: 4px; padding: 10px 12px; font-size: 14px; margin: 0 0 16px !important }
.ck-msg-error { background: var(--ck-red-bg); color: var(--ck-red-dark); border: 1px solid #F0C9CD }
.ck-msg-ok { color: var(--ck-ok); padding: 6px 0 0; margin: 0 !important; background: none }
.ck-msg-info { background: #FFF8E1; border: 1px solid #F3E0A0 }
.ck-field { display: block; font-size: 13px; color: var(--ck-muted); margin: 18px 0 6px }
.ck textarea { width: 100%; padding: 10px 12px; resize: vertical; min-height: 64px }
.ck-btn-outline { height: 44px; padding: 0 16px; border: 1px solid var(--ck-text); background: #fff; color: var(--ck-text); border-radius: 4px; font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap }
.ck-btn-outline:hover { background: var(--ck-bg) }

/* panier */
.ck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 100px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid #E6E6E6 }
.ck-item:first-of-type { margin-top: 12px }
/* articles au-delà des 10 premiers : affichés par le bouton "Afficher les X articles" */
.ck-item.is-extra { display: none }
#ck-sec-cart.is-all .ck-item.is-extra { display: grid }
.ck-item-desc { position: relative; min-width: 0; min-height: 56px; padding-left: 88px }
.ck .cartProds { list-style: none; margin: 0; padding: 0; position: static; font-size: 13px; line-height: 1.4; color: var(--ck-muted) }
.ck .cartProds li { padding: 0 0 1px; margin: 0; float: none }
.ck .cartProds li strong { font-weight: 500; font-size: 14.5px; color: var(--ck-text); padding: 0 0 3px }
.ck .cartProds li.imgt { position: absolute; left: 0; top: 0; width: 74px; height: 56px; margin: 0; padding: 0; float: none; display: flex; align-items: center; justify-content: center; background: #EEE; border: 1px solid var(--ck-border); border-radius: 4px; overflow: hidden }
.ck .cartProds li.imgt img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block }
.ck .cartProds > img { position: absolute; left: 0; top: 0; max-width: 74px; max-height: 56px }
.ck-item-price { text-align: right; white-space: nowrap }
.ck-item-total { font-weight: 500; font-size: 15px }
.ck-item-total em, .ck-item-unit em { display: block; font-size: 12px; color: var(--ck-muted); font-style: normal }
.ck-item-unit { font-size: 12px; color: var(--ck-muted) }
.ck-item .ck-qty { justify-self: start }
.ck-qty { display: inline-flex; align-items: center; border: 1px solid var(--ck-input); border-radius: 4px; overflow: hidden; background: #fff }
.ck-qty button { width: 34px; height: 34px; border: 0; background: #fff; font-size: 17px; cursor: pointer; color: var(--ck-text); padding: 0 }
.ck-qty button:disabled { color: #BBB; cursor: default }
.ck .ck-qty input { width: 38px; height: 34px; border: 0; border-radius: 0; text-align: center; font-weight: 500; padding: 0; margin: 0; font-size: 14px }
.ck-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; font-size: 12.5px; line-height: 20px }
.ck .ck-item-actions a, .ck .ck-remove { display: inline-flex; align-items: center; min-height: 24px; font-size: 12.5px; line-height: 20px; padding: 0; margin: 0 }
.ck .ck-remove { background: none; border: 0; color: var(--ck-red); cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none }
.ck .ck-remove:hover { text-decoration: underline }
/* bouton rouge du site (.imageSubmit) */
.ck .imageSubmit.ec-btn.ck-more { display: flex; width: fit-content; margin: 14px auto 24px }
.ck-shipdate { padding: 14px 0 !important; border-top: 1px solid #E6E6E6; font-size: 14px; color: var(--ck-text2) }
/* coupon et commentaire labo côte à côte sous le panier */
.ck-extras { display: flex; flex-wrap: wrap; gap: 0 20px; border-top: 1px solid #E6E6E6; padding-top: 4px }
.ck-extras > div { flex: 1 1 260px; min-width: 0 }
.ck-extras .ck-field { margin-top: 14px }
.ck .ck-comments textarea { min-height: 84px; height: 84px }
.ck-coupon-row { display: flex; gap: 8px; align-items: center }
.ck .ck-coupon-row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px }

/* adresses */
.ck-addr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.ck-card { border: 1px solid var(--ck-border); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5 }
.ck-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ck-muted) }
.ck-card-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 13.5px }
.ck-hours { font-size: 13px; color: var(--ck-muted) }
.ck-addr-editor { position: relative; margin-top: 16px; border: 1px solid var(--ck-border); border-radius: 4px; padding: 20px; background: #fff; scroll-margin-top: 16px }
.ck .ck-addr-close { position: absolute; right: 12px; top: 12px; z-index: 1 }
/* éditeur d'adresse (carnet, modification, nouvelle adresse) : composants .ca-* de create_account.php */
.ck .ck-addr-title { font-family: 'Roboto Slab', serif; font-size: 18px; font-weight: 400; color: var(--ck-text); margin: 0 90px 4px 0; padding: 0 }
.ca-addr-form { display: flex; flex-direction: column; gap: 16px }
.ckad-primary { margin-top: 2px }
.ckad-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; border-top: 1px solid #E6E6E6; padding-top: 16px }
.ckad-book { display: flex; flex-direction: column; gap: 14px }
.ckad-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.ckad-item { border: 1px solid var(--ck-input); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5 }
.ckad-item.is-current { border: 2px solid var(--ck-red); background: var(--ck-red-bg); padding: 13px 15px }
.ckad-item-badges { display: flex; flex-wrap: wrap; gap: 6px }
.ckad-item-badges:empty { display: none }
.ckad-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--ck-bg); color: var(--ck-text2) }
.ckad-badge-current { background: var(--ck-red); color: #fff }
.ckad-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto }
.ck .ckad-choose[aria-busy="true"], .ck .ckad-save[aria-busy="true"] { opacity: .7; cursor: progress }

/* options (conditionnement, livraison, paiement) */
.ck-opts { display: flex; flex-direction: column; gap: 10px }
.ck-opt-wrap { border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; margin: 1px }
.ck-opt-wrap.is-sel { border: 2px solid var(--ck-red); background: var(--ck-red-bg); margin: 0 }
.ck .ck-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; cursor: pointer; width: 100% }
.ck .ck-opt input[type="radio"] { width: 20px; height: 20px; flex: none }
.ck-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.ck-opt-name { font-weight: 500; font-size: 15px }
.ck-opt-desc { font-size: 13px; color: var(--ck-muted) }
.ck-opt-desc p { margin: 0 }
.ck-opt-logo { width: 100px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ck-red) }
.ck-opt-logo img { max-width: 90px; max-height: 40px }
.ck-opt-logo .ck-ico { width: 30px; height: 30px }
.ck-opt-price { font-weight: 500; font-size: 15px; white-space: nowrap; min-width: 64px; text-align: right }
.ck-opt-logos { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; color: var(--ck-text2) }
.ck-opt-logos img { height: 28px; width: auto }
.ck-opt-logos img.ck-l-axepta, .ck-opt-logos img.ck-l-paypal { height: 22px }
.ck-opt-logos .ck-ico { width: 28px; height: 28px }
.ck-relay { margin: 0 16px 16px 50px; padding: 12px 14px; background: var(--ck-bg); border-radius: 4px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px }
.ck-ship-error { margin-top: 10px !important }
.ck-gw { border: 0; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid #E6E6E6 }
.ck-gw legend { font-weight: 500; font-size: 15px; padding: 0; margin-bottom: 2px }
.ck-gw .ck-sub { margin-bottom: 10px !important }
.ck-gw-opts { display: flex; flex-wrap: wrap; gap: 10px }
.ck .ck-opt-sm { flex: 1 1 200px; border: 1px solid var(--ck-input); border-radius: 4px; min-height: 52px; padding: 10px 14px; margin: 1px; width: auto }
.ck .ck-opt-sm.is-sel { border: 2px solid var(--ck-red); background: var(--ck-red-bg); margin: 0 }
.ck .ck-opt-sm .ck-opt-name { flex: 1 }
.ck-eco { margin-top: 14px; display: flex; gap: 12px; align-items: flex-start; background: var(--ck-bg); border-radius: 4px; padding: 12px 14px; font-size: 13.5px; color: var(--ck-text2) }
.ck-eco .ck-ico { width: 22px; height: 22px; color: var(--ck-ok); margin-top: 1px }
.ck-eco strong { font-weight: 500 }

/* récapitulatif */
.ck-summary { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px }
.ck-summary h2 { margin: 0 }
.ck-tot-rows { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px }
.ck-tot-rows > div { display: flex; justify-content: space-between; gap: 12px }
.ck-tot-rows > div span:last-child { white-space: nowrap }
.ck-tot-rows .ck-discount { color: var(--ck-ok) }
.ck-sep { height: 1px; background: var(--ck-border); margin: 14px 0 }
.ck-tot-main { display: flex; justify-content: space-between; align-items: baseline }
.ck-tot-main span { font-weight: 500; font-size: 16px }
.ck-tot-main strong { font-weight: 700; font-size: 26px }
.ck-tot-small { font-size: 12.5px; color: var(--ck-muted); margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px }
.ck-franco { background: var(--ck-bg); border-radius: 4px; padding: 10px 12px; font-size: 13px; color: var(--ck-text2); margin-top: 14px }
.ck-franco:empty { display: none }
.ck-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer }
.ck-agree input { width: 20px; height: 20px; flex: none; margin-top: 1px !important }
.ck-cta { height: 56px; width: 100%; border: 0; border-radius: 4px; font-size: 17px; font-weight: 500; cursor: pointer; color: #fff; background: var(--ck-red) }
.ck-cta:hover { background: var(--ck-red-dark) }
.ck-cta.is-off { background: #999 }
.ck-cta[aria-busy="true"] { cursor: progress; opacity: .8 }
#ck-paypal .ck-sub { margin-bottom: 10px !important }
#paypal-checkout-buttons { max-width: none !important }
.ck-reassure { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ck-muted) }
.ck-reassure li { display: flex; gap: 8px; align-items: center; padding: 0; margin: 0; background: none }
.ck-reassure li::before { content: none !important; display: none !important }

/* barre mobile */
.ck-mobilebar { display: none }

/* fenêtre des points relais (le site style déjà #checkoutShippingPRCt : on l'écrase) */
.ck #checkoutShippingPRCt.ck-modal { position: fixed; inset: 0; top: 0; left: 0; width: auto; height: auto; z-index: 10000; background: rgba(0,0,0,.55); box-shadow: none; display: flex; align-items: center; justify-content: center; padding: 16px }
.ck-modal-box { position: relative; background: url(../../images/ajax-loader4.gif) no-repeat center #fff; border-radius: 6px; width: 1000px; max-width: 100%; height: 600px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,.3) }
.ck-modal-close { position: absolute; right: 8px; top: 6px; z-index: 2; width: 44px; height: 44px; border: 0; background: #fff; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ck-text) }
#checkoutShippingPR { height: 100% }

@media (max-width: 900px) {
  .ck-summary { position: static }
}

@media (max-width: 640px) {
  .ck-main { padding-bottom: 90px }
  .ck-sec { padding: 18px 16px }
  .ck-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px }
  #ck-sec-cart.is-all .ck-item.is-extra { display: grid }
  .ck-item-desc { grid-column: 1 / -1; padding-left: 82px }
  .ck .cartProds li.imgt { width: 70px; height: 54px }
  .ck .ck-opt { gap: 10px; padding: 12px; flex-wrap: wrap }
  .ck-opt-text { flex-basis: calc(100% - 140px) }
  .ck-opt-logo { width: auto }
  .ck-opt-logo img { max-width: 60px; max-height: 28px }
  .ck-opt-logos { width: 100%; justify-content: flex-start; padding-left: 30px }
  .ck-opt-logos img { height: 22px }
  .ck-relay { margin: 0 12px 12px }
  .ck-indent { margin-left: 0 !important }
  .ck-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border-top: 1px solid var(--ck-border); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 14px; align-items: center }
  .ck-mobilebar > div { display: flex; flex-direction: column; line-height: 1.2 }
  .ck-mobilebar span { font-size: 12px; color: var(--ck-muted) }
  .ck-mobilebar strong { font-size: 20px; font-variant-numeric: tabular-nums }
  .ck-mobilebar .ck-cta { flex: 1; height: 50px; font-size: 16px }
  .ck-mobilebar.is-hidden { display: none }
  .ck #checkoutShippingPRCt.ck-modal { padding: 0 }
  .ck-modal-box { height: 100%; max-height: none; border-radius: 0 }
}

/* =====================================================================================
   Création de compte (create_account.php) : .ck .ca
   Reprend les variables et composants du tunnel de commande (.ck, .ck-sec, .ck-num,
   .ck-opt, .ck-cta) ; champs de 48 px, cibles de 44 px minimum.
   ===================================================================================== */

.ca { padding: 4px 0 40px }
.ca .ck-ico { width: 18px; height: 18px }

/* étapes */
.ca-steps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; font-size: 14px; color: var(--ck-muted) }
.ca-steps li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 }
.ca-steps li::before { content: none !important }
.ca-steps li[aria-current="step"] { color: var(--ck-text); font-weight: 500 }
.ca-step-n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #9C9C9C; display: inline-flex; align-items: center; justify-content: center; font-size: 13px }
.ca-steps li[aria-current="step"] .ca-step-n { background: var(--ck-red); border-color: var(--ck-red); color: #fff }
.ca-steps .ca-step-sep { width: 40px; height: 1px; background: var(--ck-input) }

/* titre (h1 de base du site) */
.ca-head { text-align: center; margin-bottom: 24px }
.ca-head h1 { margin-bottom: 8px }
.ca-lead { color: var(--ck-muted); font-size: 15px }
.ca-links { margin-top: 6px !important; font-size: 14px }
.ca-links a { font-weight: 500 }

.ca-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start }
.ca-form { flex: 999 1 600px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 32px }
.ca-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px }

.ca-block { display: flex; flex-direction: column; gap: 18px }
.ca-block + .ca-block { border-top: 1px solid #E6E6E6; padding-top: 28px }
.ca-block h2 { margin: 0 }
.ca-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; align-items: start }
.ca-row-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.ca-field { min-width: 0 }
.ca-fieldset { border: 0; margin: 0; padding: 0; min-width: 0 }

/* libellés, champs, aides, erreurs */
.ck .ca-label { display: block; font-size: 14px; font-weight: 500; color: var(--ck-text); margin: 0 0 6px; padding: 0 }
.ca-opt-tag { font-weight: 400; color: var(--ck-muted) }
.ck .ca-input { display: block; width: 100% !important; max-width: none; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; color: var(--ck-text); font: 16px Roboto, system-ui, sans-serif; box-shadow: none }
.ck textarea.ca-input { padding: 12px 14px; min-height: 76px; resize: vertical }
.ck select.ca-input { padding: 0 10px; cursor: pointer }
.ck .ca-input:focus { outline: none; border-color: var(--ck-text); box-shadow: 0 0 0 3px #E6E6E6 }
/* le site ajoute une coche ou un halo rouge sur les champs obligatoires : retirés ici */
.ck .ca-input:required:focus:valid, .ck .ca-input:required:focus:invalid { background-image: none; background-color: #fff; box-shadow: 0 0 0 3px #E6E6E6 }
.ck .ca-input[aria-invalid="true"] { border-color: var(--ck-red); box-shadow: 0 0 0 1px var(--ck-red) }
.ca-hint { font-size: 13px; color: var(--ck-muted); line-height: 1.45; margin-top: 6px !important }
.ca-err { font-size: 13px; color: var(--ck-red-dark); margin-top: 6px !important; line-height: 1.4 }
.ca-err a { color: var(--ck-red-dark); text-decoration: underline }
.ca-summary { margin: 0 !important }

/* mot de passe */
.ca-pw { position: relative }
.ck .ca-pw .ca-input { padding-right: 112px }
.ck .ca-pw-toggle { position: absolute; right: 4px; top: 2px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ck-text2); font: 500 14px Roboto, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.ca-meter { display: flex; align-items: center; gap: 12px; margin-top: 10px }
.ca-meter-bar { flex: 1; display: flex; gap: 4px }
.ca-meter-bar span { flex: 1; height: 4px; border-radius: 2px; background: #E2E2E2 }
.ca-meter[data-score="1"] .ca-meter-bar span:nth-child(-n+1) { background: var(--ck-red) }
.ca-meter[data-score="2"] .ca-meter-bar span:nth-child(-n+2) { background: #B4690E }
.ca-meter[data-score="3"] .ca-meter-bar span { background: var(--ck-ok) }
.ca-meter-label { min-width: 56px; text-align: right; font-size: 13px; font-weight: 500 }
.ca-meter[data-score="1"] .ca-meter-label { color: var(--ck-red) }
.ca-meter[data-score="2"] .ca-meter-label { color: #B4690E }
.ca-meter[data-score="3"] .ca-meter-label { color: var(--ck-ok) }
.ca-crit { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px }
.ca-crit li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 13px; color: var(--ck-muted) }
.ca-crit li::before { content: none !important }
.ca-crit .ck-ico { width: 16px; height: 16px }
.ca-crit .ca-ico-check, .ca-crit li.is-ok .ca-ico-circle { display: none }
.ca-crit li.is-ok { color: var(--ck-ok) }
.ca-crit li.is-ok .ca-ico-check { display: block }

/* Particulier / Professionnel (options du tunnel de commande) */
.ca-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.ck .ca-type { cursor: pointer; margin: 1px }
.ck .ca-type .ck-opt { min-height: 52px }
.ck .ca-type input[type="radio"] { width: 20px; height: 20px; flex: none }

/* civilité en pastilles */
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px }
.ck .ca-chip { position: relative; display: inline-flex; cursor: pointer }
.ck .ca-chip input { position: absolute; opacity: 0; width: 1px; height: 1px }
.ca-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ck-input); border-radius: 999px; background: #fff; font-size: 15px; color: var(--ck-text) }
.ca-chip.is-sel span, .ca-chip input:checked + span { background: var(--ck-text); border-color: var(--ck-text); color: #fff }
.ca-chip input:focus-visible + span { outline: 2px solid var(--ck-red); outline-offset: 2px }

/* téléphone */
.ca-tel { display: flex; gap: 8px }
.ck .ca-tel .ca-tel-prefix { width: 112px !important; flex: none }

/* bloc Pro */
.ca-pro { background: var(--ck-bg); border-radius: 4px; padding: 18px; display: flex; flex-direction: column; gap: 16px }
.ca-pro .ca-hint { margin-top: 0 !important }

/* adresse */
.ca-addr-input { position: relative }
.ca-addr-input > .ca-ico-search { position: absolute; left: 14px; top: 15px; color: var(--ck-muted); pointer-events: none }
.ck .ca-addr-input .ca-input { padding-left: 42px }
/* suggestions Google Places (liste ajoutée par Google en fin de page) */
.pac-container { font-family: Roboto, system-ui, sans-serif; border-radius: 4px; margin-top: 4px }
.pac-item { padding: 6px 12px; font-size: 14px; cursor: pointer }
.ck .ca-linkbtn { background: none; border: 0; padding: 0; min-height: 44px; text-align: left; font: 500 14px Roboto, sans-serif; color: var(--ck-red); cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.ck .ca-linkbtn:hover { text-decoration: underline }
.ca-more-fields { display: flex; flex-direction: column; gap: 16px }
.ca-row-city { display: flex; flex-wrap: wrap; gap: 16px 20px }
.ca-f-cp { flex: 1 1 120px }
.ca-f-city { flex: 2 1 200px }
.ca-f-country { flex: 1.5 1 180px }

/* envoi */
.ca-submit { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #E6E6E6; padding-top: 24px }
.ca-submit .cf-turnstile:empty { display: none }
.ck .ca-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px }
.ca-cta[aria-busy="true"] { opacity: .8; cursor: progress }
.ca-err-submit { text-align: center }
.ca-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13px; color: var(--ck-muted); line-height: 1.45 }
.ca-antibot { display: inline-flex; align-items: center; gap: 8px }

/* colonne d'avantages */
.ca-welcome { background: #222; color: #fff; border-radius: 4px; padding: 24px }
.ca-welcome-kicker { font-size: 14px; color: #CFCFCF }
.ca-welcome-title { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 26px; line-height: 1.25; margin-top: 6px }
.ca-code { margin-top: 18px; display: flex; align-items: center; gap: 10px; border: 1.5px dashed #777; border-radius: 4px; padding: 6px 6px 6px 16px }
.ca-code > span { flex: 1; font: 500 20px Roboto, monospace; letter-spacing: 2px }
.ck .ca-copy { min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: #fff; color: var(--ck-text); font: 500 14px Roboto, sans-serif; cursor: pointer }
.ca-welcome-where { font-size: 13px; color: #CFCFCF; margin-top: 10px }
.ca-benefits { padding: 22px 24px }
.ca-benefits h2 { font-size: 19px; margin: 0 0 16px }
.ca-benefits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px }
.ca-benefits li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 0; font-size: 14px; line-height: 1.45 }
.ca-benefits li::before { content: none !important }
.ca-benefits li strong { display: block; font-weight: 500; font-size: 15px }
.ca-benefits li div span { color: var(--ck-muted) }
.ca-benefit-ico { width: 40px; height: 40px; flex: none; border-radius: 4px; background: var(--ck-bg); display: inline-flex; align-items: center; justify-content: center }
.ca-benefit-ico .ck-ico { width: 20px; height: 20px }
.ca-reassure { padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; font-size: 14px }
.ca-reassure p { display: flex; align-items: center; gap: 10px }
.ca-reassure .ca-ico-check { color: var(--ck-ok) }
.ca-reassure .ca-question { color: var(--ck-muted); border-top: 1px solid #E6E6E6; padding-top: 10px; display: block }
.ca-reassure .ca-question a { font-weight: 500; color: var(--ck-text) }

/* code de bienvenue en haut de page : mobile seulement */
.ca-welcome-m { display: none }

@media (max-width: 640px) {
  .ca-steps .ca-step-sep { width: 16px }
  .ca-form { padding: 20px 16px; gap: 28px }
  .ca-welcome-m { display: flex; align-items: center; gap: 12px; background: #222; color: #fff; border-radius: 4px; padding: 14px 14px 14px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.4 }
  .ca-welcome-m > div { flex: 1 }
  .ca-welcome-m strong { font-weight: 500; color: #fff }
  .ca-welcome-m span { color: #CFCFCF }
  .ca-welcome-m b { color: #fff; letter-spacing: 1px; font-weight: 500 }
  .ca-aside .ca-welcome { display: none }
  .ca-row-city > .ca-field { flex-basis: 100% }
  .ca-legal { justify-content: center; text-align: center }
}

/* =====================================================================================
   Connexion (login.php) : .ck .ca .lg
   Reprend les composants de la création de compte (.ca-*) ci-dessus.
   ===================================================================================== */

.lg-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.lg .lg-form { flex: none; gap: 24px }
.lg .ca-block h2 { margin: 0 }
.lg-pw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px }
.lg-pw-head .ca-label { margin-bottom: 6px }
.lg-forgot-link { font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; min-height: 32px }
.lg .ca-legal { justify-content: center }

.lg-forgot { padding: 24px }
.lg-forgot h2 { margin: 0 0 6px }
.lg-forgot iframe { display: block; width: 100%; height: 260px; border: 0; margin-top: 12px; background: transparent }

.lg-new { padding: 24px; display: flex; flex-direction: column; gap: 16px }
.lg-new h2 { margin: 0 }
.lg-new .ca-lead { font-size: 14.5px }
.ck .lg-new-cta, .ck .lg-new-cta:visited { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; color: #fff; text-decoration: none }
.ck .lg-new-cta:hover { color: #fff; text-decoration: none }
.lg-benefits { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid #E6E6E6; display: flex; flex-direction: column; gap: 16px }
.lg-benefits li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 0; font-size: 14px; line-height: 1.45 }
.lg-benefits li::before { content: none !important }
.lg-benefits li strong { display: block; font-weight: 500; font-size: 15px }
.lg-benefits li div span { color: var(--ck-muted) }

/* ===== Espace client (refonte 2026) : espace_client.php, espace_client_commandes.php =====
   Préfixe .ec, variables .ck. Navigation latérale (desktop), au-dessus du contenu (tablette),
   barre d'onglets en bas (mobile). */
.ec { --ec-blue-bg: #E6EEF8; --ec-blue: #1F4F8A; --ec-grey-bg: #EFEDEA; --ec-grey: #55524E;
      --ec-amber-bg: #FFF3D6; --ec-amber: #7A4B00; --ec-green-bg: #E5F2E8; --ec-green: #2A5E37 }
.ec ul, .ec ol { list-style: none; margin: 0; padding: 0 }
.ec li { margin: 0; padding: 0; background: none }
.ec li::before { content: none !important }
.ec h2 { margin: 0 }
.ec h3 { font-family: 'Roboto Slab', serif; font-size: 15px; font-weight: 500; margin: 0 0 10px; color: var(--ck-text); background: none; padding: 0; text-transform: none }
.ec-ico { width: 18px; height: 18px; flex: none; vertical-align: middle }
.ec-sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ec-muted { color: var(--ck-muted); font-size: 14px }
.ec-empty { color: var(--ck-muted); padding: 8px 0 }
.ec-link { font-size: 14px; font-weight: 500 }

.ec-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; padding: 8px 0 40px }
.ec-main { display: flex; flex-direction: column; gap: 20px; min-width: 0 }

/* navigation */
.ec-nav { position: sticky; top: 12px; background: #fff; border: 1px solid var(--ck-border); border-radius: 4px; padding: 8px }
.ec-nav a, .ec-nav a:visited { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 4px; color: var(--ck-text); text-decoration: none; font-size: 14.5px }
.ec-nav a:hover { background: var(--ck-bg); color: var(--ck-text); text-decoration: none }
.ec-nav a[aria-current="page"] { background: var(--ck-red-bg); color: var(--ck-red-dark); font-weight: 500; box-shadow: inset 3px 0 0 var(--ck-red) }
.ec-nav .ec-ico { color: var(--ck-muted) }
.ec-nav a[aria-current="page"] .ec-ico { color: var(--ck-red) }
.ec-nav-sep { border-top: 1px solid #E6E6E6; margin-top: 6px !important; padding-top: 6px !important }
.ec-pill { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ck-red); color: #fff; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center }
.ec-tabs { display: none }

/* en-tête de page */
.ec-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px }
.ck .ec-hello h1 { text-align: left; margin: 0 0 4px }
.ec-lead { font-size: 16px; color: var(--ck-text2) }
.ec-hello-actions { display: flex; flex-wrap: wrap; gap: 10px }
.ec-crumbs { font-size: 13.5px; color: var(--ck-muted) }

/* boutons */
/* bouton rouge du site : classe .imageSubmit de stylesheet.css (fond rouge, survol blanc à coins).
   Ici seulement la mise en page (icône + texte, hauteur d'origine du site) et le neutre des liens .ck */
.ck .imageSubmit.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; margin: 0; font-size: 15px; line-height: normal; text-decoration: none }
.ck .imageSubmit.ec-btn, .ck .imageSubmit.ec-btn:visited { color: #fff }
.ck .imageSubmit.ec-btn:hover, .ck .imageSubmit.ec-btn:focus-visible { color: var(--ck-red); text-decoration: none }
/* bouton secondaire (Annuler, Modifier...) : mêmes dimensions que .imageSubmit, fond blanc et contour gris */
.ck .ec-btn-sec, .ck .ec-btn-sec:visited { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; margin: 0; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px #999; background: #fff; color: var(--ck-text2); font-family: var(--fS), Roboto, sans-serif; font-size: 15px; line-height: normal; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-appearance: none }
.ck .ec-btn-sec:hover, .ck .ec-btn-sec:focus-visible { box-shadow: inset 0 0 0 1px var(--ck-red); color: var(--ck-red); text-decoration: none }
.ck .ec-btn-sec[disabled] { opacity: .45; cursor: default; box-shadow: inset 0 0 0 1px #999; color: var(--ck-text2) }
.ck .imageSubmit.ec-btn .ec-ico, .ck .ec-btn-sec .ec-ico { width: 15px; height: 15px }
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px }
.ec-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px !important; font-size: 14px }

/* sections */
.ec-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px }
.ec-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.ec-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.ec-card h2 { margin-bottom: 12px; font-size: 17px }
.ec-card h2 .ec-ico { color: var(--ck-red) }
.ec-card .ec-muted { display: flex; align-items: center; gap: 8px; margin-top: 4px !important }

/* badges (contrastes AA) */
.ec-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; vertical-align: middle }
.ec-badge-progress { background: var(--ec-blue-bg); color: var(--ec-blue) }
.ec-badge-closed { background: var(--ec-grey-bg); color: var(--ec-grey) }
.ec-badge-pending { background: var(--ec-amber-bg); color: var(--ec-amber) }
.ec-badge-done { background: var(--ec-green-bg); color: var(--ec-green) }

/* commande en cours */
.ec-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px }
.ec-order-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px }
.ec-total { font-weight: 500; color: var(--ck-text); font-variant-numeric: tabular-nums }

/* frise horizontale */
.ec-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 16px !important }
.ec-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13.5px; color: var(--ck-muted) }
.ec-step::after { content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: #E0E0E0 }
.ec-step:last-child::after { content: none }
.ec-step.is-done::after { background: var(--ck-red) }
.ec-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #CFCFCF; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff }
.ec-step-dot .ec-ico { width: 15px; height: 15px }
.ec-step.is-done .ec-step-dot { background: var(--ck-red); border-color: var(--ck-red) }
.ec-step.is-current .ec-step-dot { border-color: var(--ck-red); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 14px var(--ck-red) }
.ec-step.is-done, .ec-step.is-current { color: var(--ck-text) }
.ec-step.is-current .ec-step-label { font-weight: 500 }
.ec-step-date { font-size: 12.5px; color: var(--ck-muted) }

/* frise verticale (détail) */
.ec-steps-v { display: flex; flex-direction: column }
.ec-steps-v .ec-step { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; row-gap: 0; align-items: center; text-align: left; padding-bottom: 16px }
.ec-steps-v .ec-step-dot { grid-row: 1 / span 2; align-self: start }
.ec-steps-v .ec-step::after { top: 30px; bottom: 0; left: 13px; right: auto; width: 2px; height: auto }
.ec-steps-v .ec-step-date { grid-column: 2 }

.ec-track { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 6px !important }
.ec-track .ec-ico { color: var(--ck-muted) }
.ec-mini-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px !important }
.ec-mini-products li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; min-width: 0 }
.ec-mini-products strong { display: block; font-weight: 500 }
.ec-mini-products span span { display: block; color: var(--ck-muted) }
.ec-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--ck-bg); flex: none }
.ec-thumb-none { display: inline-flex; align-items: center; justify-content: center; color: #999 }

/* albums */
.ec-album-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.ec-album-list a, .ec-album-list a:visited { display: flex; flex-direction: column; gap: 2px; color: var(--ck-text); text-decoration: none; font-size: 13.5px }
.ec-album-list a:hover strong { text-decoration: underline }
.ec-album-list img, .ec-album-list .ec-thumb-none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--ck-bg); margin-bottom: 4px }
.ec-album-list strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ec-album-list span { color: var(--ck-muted); font-size: 12.5px }
.ck .ec-drop, .ck .ec-drop:visited { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 2px dashed var(--ck-border); border-radius: 4px; color: var(--ck-text); text-decoration: none; font-size: 14px }
.ck .ec-drop:hover { border-color: var(--ck-red); color: var(--ck-text); text-decoration: none }
.ec-drop .ec-ico { width: 24px; height: 24px; color: var(--ck-red) }
.ec-drop strong { display: block; font-weight: 500 }
.ec-drop span span { color: var(--ck-muted); font-size: 13px }

/* panier */
.ec-cart-sum { font-size: 15px; font-weight: 500 }
.ec-gauge { margin-top: 12px; font-size: 14px }
.ec-gauge-bar { display: block; height: 8px; border-radius: 4px; background: #EBEBEB; overflow: hidden; margin-top: 6px }
.ec-gauge-bar span { display: block; height: 100%; background: var(--ck-ok) }

/* tableaux (défilement dans leur propre boîte) */
.ec-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch }
.ec-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px }
.ec-table th, .ec-table td { padding: 10px 8px; border: 0; border-top: 1px solid #E6E6E6; text-align: left; vertical-align: middle; background: none }
.ec-table thead th { border-top: 0; font-size: 12.5px; font-weight: 500; color: var(--ck-muted); text-transform: none }
.ec-table tbody th { font-weight: 500 }
.ec-table .ec-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ec-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px }

/* cartes de profil */
.ec-label { display: block; font-size: 13px; color: var(--ck-muted); margin-bottom: 6px }
.ec select { width: 100% !important; max-width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; font-size: 14.5px; color: var(--ck-text); font-family: inherit }
.ec-dl { margin: 0; font-size: 14px }
.ec-dl dt { font-size: 12.5px; color: var(--ck-muted); margin-top: 8px }
.ec-dl dt:first-child { margin-top: 0 }
.ec-dl dd { margin: 2px 0 0; overflow-wrap: anywhere }
.ec-newsletter { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E6E6E6 }
.ec-check { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer }
.ec-check input { width: 18px; height: 18px }
.ec-status { font-size: 13px; min-height: 18px }
.ec-ok { color: var(--ck-ok) }
.ec-err { color: var(--ck-red-dark) }
.ec-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ec-amber); margin-top: 4px !important }
.ec-note .ec-ico { width: 16px; height: 16px; margin-top: 1px }

/* Mes commandes */
.ec-toolbar { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.ec-filters { min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 6px }
.ck .ec-filters a, .ck .ec-filters a:visited { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ck-border); border-radius: 22px; color: var(--ck-text); text-decoration: none; font-size: 14px; background: #fff }
.ck .ec-filters a:hover { border-color: var(--ck-text); text-decoration: none; color: var(--ck-text) }
.ck .ec-filters a[aria-current="true"] { background: var(--ck-text); border-color: var(--ck-text); color: #fff }
.ec-count { font-size: 12px; opacity: .85 }
.ec-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.ec-search-field { position: relative; display: inline-flex; align-items: center }
.ec-search-field .ec-ico { position: absolute; left: 10px; color: var(--ck-muted); pointer-events: none }
.ck .ec-search input[type="search"] { height: 44px; width: 230px; padding: 0 10px 0 36px; border: 1px solid var(--ck-input); border-radius: 4px; font-size: 14.5px; font-family: inherit; background: #fff; margin: 0 }
.ck .ec-search select { width: auto !important }
.ec-results { margin-top: -6px !important }
.ec-orders { display: flex; flex-direction: column; gap: 12px }
.ck .ec-order { padding: 16px 20px }
.ec-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }
.ec-order-info { flex: 1 1 260px; min-width: 0 }
.ec-order-info .ec-muted { margin-top: 2px !important }
.ec-order-row .ec-total { margin-left: auto; font-size: 16px }
.ec-stack { display: flex; flex: none; width: 92px }
.ec-stack-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; background: var(--ck-bg); box-shadow: 0 0 0 1px var(--ck-border) }
.ec-stack-img + .ec-stack-img { margin-left: -26px }
.ec-btn .ec-ico { width: 15px; height: 15px }
.ec-toggle .ec-ico { transition: transform .15s }
.ec-toggle[aria-expanded="true"] .ec-ico { transform: rotate(180deg) }
.ec-detail { border-top: 1px solid #E6E6E6; margin-top: 20px; padding-top: 24px }
.ec-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px }
.ec-detail h3 { margin-bottom: 16px }
.ec-detail-side h3:not(:first-child) { margin-top: 28px }
.ec-detail-side .ec-track { margin-top: 10px !important }
.ec-detail .ec-steps-v .ec-step { padding-bottom: 22px }
.ec-detail .ec-actions { margin-top: 28px; padding-top: 20px; border-top: 1px solid #EEE }
.ec-products { display: flex; flex-direction: column }
.ec .ec-product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-top: 1px solid #EEE }
.ec .ec-product:first-child { border-top: 0; padding-top: 0 }
#pageMiddle .ec .ec-product { padding-bottom: 16px }
#pageMiddle .ec .ec-product:last-child { padding-bottom: 0 }
.ec-product-name { font-weight: 500; font-size: 14.5px }
.ec-product-opts { font-size: 13px; color: var(--ck-muted) }
.ec-product-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px }
.ec-price { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap }
.ec-address { font-style: normal; font-size: 14px; margin-bottom: 8px }
.ec-pager { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px }

@media (prefers-reduced-motion: reduce) {
  .ec *, .ec *::before, .ec *::after { transition: none !important; animation: none !important }
}

@media (max-width: 989px) {
  .ec-layout { grid-template-columns: minmax(0, 1fr) }
  .ec-nav { position: static; padding: 6px; overflow-x: auto }
  .ec-nav ul { display: flex; gap: 4px; width: max-content }
  .ec-nav a, .ec-nav a:visited { white-space: nowrap; padding: 8px 10px }
  .ec-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ck-red) }
  .ec-nav-sep { border-top: 0; border-left: 1px solid #E6E6E6; margin: 0 !important; padding: 0 0 0 4px !important }
  .ec-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ec-detail-grid { grid-template-columns: minmax(0, 1fr) }
}

/* mobile : barre d'onglets fixe en bas */
@media (max-width: 640px) {
  .ec-page, body:has(.ec-tabs) { padding-bottom: 68px }
  .ec-nav { display: none }
  .ec-tabs { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border-top: 1px solid var(--ck-border); padding-bottom: env(safe-area-inset-bottom) }
  .ec-tabs ul { display: grid; grid-template-columns: repeat(4, 1fr) }
  .ec-tabs a, .ec-tabs a:visited { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--ck-muted); text-decoration: none; font-size: 12px }
  .ec-tabs a[aria-current="page"] { color: var(--ck-red) }
  .ec-tabs .ec-ico { width: 22px; height: 22px }
  .ec-tab-dot { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ck-red); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center }
  .ec-layout { padding-top: 0; gap: 16px }
  .ec-hello-actions, .ec-hello-actions .ec-btn { width: 100% }
  .ec-grid-2, .ec-grid-3 { grid-template-columns: minmax(0, 1fr) }
  .ck.ec .ck-sec { padding: 16px }
  .ec-step { font-size: 12px }
  .ec-step-date { font-size: 11px }
  .ec-album-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 4px }
  .ec-album-list li { flex: 0 0 42%; scroll-snap-align: start }
  .ec-toolbar, .ec-search { flex-direction: column; align-items: stretch }
  .ck .ec-search input[type="search"], .ck .ec-search select, .ec-search-field { width: 100% !important }
  .ec-filters { flex-wrap: nowrap; overflow-x: auto }
  .ck .ec-filters a { white-space: nowrap }
  .ec-order-row .ec-total { margin-left: 0 }
  .ec-toggle { width: 100% }
  .ec .ec-product { grid-template-columns: 48px minmax(0, 1fr) }
  .ec-product-side { grid-column: 2; align-items: flex-start }
}

/* navigation commune dans la colonne de gauche des pages existantes du compte
   (includes/modules/espace_client_column.php) : profil, adresses, tickets, albums... */
#pageLeft:has(.ec-side) { background: none; padding: 0 }
.ec-side { font-size: 15px }
.ec-side .ec-nav ul { margin: 0 }
.ec-side ~ .boxLeft { margin-top: 16px }
@media only screen and (max-width: 989px) {
  #pageContent:has(.ec-side) { flex-wrap: wrap }
  #pageLeft:has(.ec-side) { display: block; width: 100%; margin: 0 0 8px; padding: 0; border-radius: 0 }
  #pageLeft:has(.ec-side) > :not(.ec-side) { display: none }
}

/* carnet d'adresses (address_book.php, address_book_process.php) : style des adresses du checkout */
.ec-ab { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px }
#pageMiddle .ec-ab ul { margin: 0; padding: 0; list-style: none }
#pageMiddle .ec-ab li.ec-ab-new { padding: 0 }
#pageMiddle .ec-ab li.ckad-item { padding: 14px 16px }
#pageMiddle .ec-ab li::before { content: none }
.ec-ab .ckad-item.is-primary { border-color: var(--ck-text) }
.ec-ab .ck-addr { flex: 1 }
.ec-ab .ckad-item-actions { gap: 6px 18px }
.ck .ck-addr strong, .ck .ec-address strong { font-weight: 700; color: var(--ck-text) }
.ck .ec-ab-delete, .ck .ec-ab-delete:visited { font-size: 14px; color: var(--ck-muted) }
.ck .ec-ab-delete:hover { color: var(--ck-red) }
.ck .ec-ab-new a, .ck .ec-ab-new a:visited { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 150px; padding: 16px; border: 2px dashed var(--ck-border); border-radius: 4px; color: var(--ck-text); font-weight: 500; text-decoration: none }
.ck .ec-ab-new a:hover { border-color: var(--ck-red); color: var(--ck-red); text-decoration: none }
.ec-ab .ck-sec { display: flex; flex-direction: column; gap: 18px; max-width: 760px }
.ec-ab-delete-box .ckad-item { max-width: 360px }

/* mon profil (account_edit.php) : style de create_account.php */
.ec-pf { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px }
.ec-pf .ec-pf-form { max-width: 760px; flex: none }
.ec-pf-pro { display: flex; flex-direction: column; gap: 16px; margin-top: 16px }
.ec-pf-errors p { margin-bottom: 6px !important }
.ec-pf-errors table, .ec-pf-errors tr, .ec-pf-errors td, .ec-pf-errors .messageStackError { background: none !important; border: 0; margin: 0; padding: 2px 0 !important; color: var(--ck-red-dark) !important; font-size: 14px }

/* service client / SAV (ticket_view.php) : liste des demandes et fil de discussion */
.ec-tk { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px }
.ec-tk .ck-sec { display: flex; flex-direction: column; gap: 12px }
#pageMiddle .ec-tk ul, #pageMiddle .ec-tk ol { margin: 0; padding: 0; list-style: none }
#pageMiddle .ec-tk li { padding: 0 }
#pageMiddle .ec-tk li::before { content: none }
.ec-tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 !important; border-top: 1px solid #E6E6E6 }
.ec-tk-row:first-child { border-top: 0; padding-top: 0 !important }
.ec-tk-main { min-width: 0 }
.ck .ec-tk-subject, .ck .ec-tk-subject:visited { font-weight: 700; font-size: 16px; color: var(--ck-red); text-decoration: none }
.ck .ec-tk-subject:hover { color: var(--ck-red-dark); text-decoration: underline }
.ec-tk-pages { font-size: 13px }
.ec-tk-find { max-width: 520px }
.ec-tk-find-row { display: flex; gap: 8px; align-items: center }
.ec-tk-find-row .ca-input { flex: 1 }
.ec-tk-back { font-size: 14px }
.ec-tk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.ec-tk-msgs { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 !important }
.ec-tk-msg-item { display: flex; flex-direction: column; gap: 4px; max-width: 80% }
.ec-tk-msg-item.is-me { align-self: flex-end; align-items: flex-end }
.ec-tk-meta { font-size: 12.5px; color: var(--ck-muted) }
.ec-tk-meta strong { color: var(--ck-text); font-weight: 500 }
.ec-tk-bubble { padding: 12px 14px; border-radius: 8px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere }
.is-shop .ec-tk-bubble { background: var(--ck-bg); border-top-left-radius: 2px }
.is-me .ec-tk-bubble { background: var(--ec-blue-bg); color: #16365F; border-top-right-radius: 2px }
.ec-tk-reply { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #E6E6E6; padding-top: 18px }
.ec-tk-reply-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px }
.ec-tk-priority { min-width: 180px }
@media (max-width: 640px) {
  .ec-tk-msg-item { max-width: 92% }
  .ck .ec-tk-reply-foot .imageSubmit.ec-btn, .ec-tk-priority { width: 100% }
}

/* mes albums (galeries.php) : cartes d'albums, grille d'images, fiche image */
.al { display: flex; flex-direction: column; gap: 18px; margin: 0 0 28px }
#pageMiddle .al ul { margin: 0; padding: 0; list-style: none }
#pageMiddle .al li { padding: 0 }
#pageMiddle .al li::before { content: none }
.al .ec-hello { align-items: flex-end }
.al .ec-hello h1 { margin: 0 0 2px }
.al .ec-ico { width: 17px; height: 17px }
.al-search input { height: 36px; width: 220px; padding: 0 10px 0 34px; border: 1px solid var(--ck-input); border-radius: 4px; font-size: 14px; margin: 0 }
.al-msg .messageStackSuccess, .al-msg .messageStackWarning, .al-msg .messageStackError { border-radius: 4px }

/* cartes d'albums */
.al-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px }
.al-album { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ck-border); border-radius: 6px; overflow: hidden }
.al-album:hover { border-color: var(--ck-text) }
.al-album-cover { display: block; aspect-ratio: 4 / 3; background: var(--ck-bg) }
.al-album-cover img, .al-album-cover .ec-thumb-none { width: 100%; height: 100%; object-fit: contain; display: flex }
.al-album-cover .ec-thumb-none .ec-ico { width: 32px; height: 32px; margin: auto }
.al-album-body { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 2px }
.ck .al-album-name, .ck .al-album-name:visited { font-weight: 700; font-size: 15px; color: var(--ck-red); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ck .al-album-name:hover { color: var(--ck-red-dark); text-decoration: underline }
.al-album-actions { display: flex; align-items: center; gap: 2px; margin: 6px -6px 0 }
.ck .al-album-actions a, .al-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px; color: var(--ck-muted); background: none; border: 0; cursor: pointer; padding: 0 }
.ck .al-album-actions a:hover, .al-icon-btn:hover { background: var(--ck-bg); color: var(--ck-text) }
.al-album-actions form { margin: 0 0 0 auto }
.al-album-actions .al-icon-btn:hover { color: var(--ck-red) }
.al-album-new { border-style: dashed; border-width: 2px; background: none }
.ck .al-album-new a, .ck .al-album-new a:visited { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; color: var(--ck-text); font-weight: 500; text-decoration: none }
.ck .al-album-new:hover a { color: var(--ck-red) }

/* barre d'outils de l'album */
.al-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 0; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6 }
.al-toolbar-sel, .al-toolbar-sort { display: flex; align-items: center; gap: 12px }
.al-toolbar .ec-check { min-height: 36px; font-size: 14px }
.al-toolbar-sort .ec-label { margin: 0 }
.ck .al-toolbar select { width: auto !important; height: 36px; font-size: 14px }

/* grille d'images */
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.al-tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ck-border); border-radius: 6px; overflow: hidden }
.al-tile.is-sel { border-color: var(--ck-red); box-shadow: 0 0 0 1px var(--ck-red) }
.al-tile-img { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--ck-bg); cursor: zoom-in }
.al-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block }
.ck .al-check { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); border-radius: 4px; cursor: pointer }
.al-check input { width: 18px; height: 18px; margin: 0 }
.al-lock { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: var(--ec-grey-bg); color: var(--ec-grey); font-size: 12px; font-weight: 500 }
.al-lock .ec-ico { width: 13px; height: 13px }
.al-tag { position: absolute; top: 6px; right: 6px; padding: 3px 8px; border-radius: 12px; background: var(--ec-blue-bg); color: var(--ec-blue); font-size: 12px }
.al-tile-foot { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px 8px; flex: 1 }
.al-tile-name { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ck-text2); overflow-wrap: anywhere }
.ck .al-buy.imageSubmit.ec-btn { flex: none; font-size: 13px; padding: 6px 10px }
.al-tile-add { border-style: dashed; border-width: 2px; background: none }
.ck .al-tile-add a, .ck .al-tile-add a:visited { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; color: var(--ck-text); font-size: 13.5px; font-weight: 500; text-decoration: none; text-align: center; padding: 8px }
.ck .al-tile-add:hover a { color: var(--ck-red) }
.al-more { display: flex; align-items: center; justify-content: center; gap: 14px }

/* fiche d'une image */
.al-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 8px; color: var(--ck-text) }
.al-dialog::backdrop { background: rgba(0, 0, 0, .55) }
.al-info { padding: 18px 20px 20px }
.al-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.ck .al-info-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere }
.al-close { font-size: 26px; line-height: 1 }
.al-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px }
.al-info-view { position: relative; display: flex; align-items: center; justify-content: center; background: var(--ck-bg); border-radius: 6px; min-height: 280px }
.al-info-view img { max-width: 100%; max-height: 62vh; display: block }
.al-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .9); font-size: 30px; line-height: 1; cursor: pointer; color: var(--ck-text) }
.al-prev { left: 8px }
.al-next { right: 8px }
.al-exif { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px }
.ck .al-exif dt, .ck .al-exif dt:first-child { margin: 0 }
.ck .al-exif dd { margin: 0 }
.al-info .ec-actions { flex-direction: column; align-items: stretch }
.al-info .ec-actions form { margin: 0 }
.ck .al-info .ec-actions .imageSubmit.ec-btn, .ck .al-info .ec-actions .ec-btn-sec { width: 100%; justify-content: center }

@media (max-width: 640px) {
  .al-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .al-search input { width: 100% }
  .al .ec-hello-actions .ec-btn-sec { flex: 1 }
  .al-info-grid { grid-template-columns: minmax(0, 1fr) }
  .al-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0 }
}
.al-missing { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; background: var(--ck-bg) }
.al-missing .ec-ico { width: 32px; height: 32px }

/* créer / modifier un album (galeries_edit.php) */
.ec-ged { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px }
.ec-ged .ec-ged-form { max-width: 640px; gap: 20px; flex: none }
@media (max-width: 640px) {
  .ck .ckad-actions .imageSubmit.ec-btn, .ck .ckad-actions .ec-btn-sec { flex: 1 }
}

/* panier (shopping_cart.php) : panier vide et panier d'un visiteur non connecté */
.sc { padding: 4px 0 32px }
.sc > h1 { text-align: center }
.sc-empty { max-width: 600px; margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 36px 28px }
.sc-empty h2 { margin: 0; justify-content: center }
.sc-empty-ico { width: 48px; height: 48px; color: var(--ck-muted) }
.sc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px }
.sc-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start }
.sc-items { flex: 999 1 560px; min-width: 0 }
.sc-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px }
.sc-qty { font-size: 14px; color: var(--ck-muted); white-space: nowrap }
.sc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px }
.sc-total strong { font-size: 22px; font-weight: 500 }
.sc-guest { font-size: 14.5px; border-top: 1px solid #E6E6E6; padding-top: 12px }
.ck .sc-login.imageSubmit.ec-btn { width: 100% }
.sc-create { font-size: 14px; text-align: center }

/* mot de passe (account_password.php) : bouton œil, barré quand le mot de passe est visible */
.ck .pw-eye-btn { padding: 0 12px; color: var(--ck-muted) }
.ck .pw-eye-btn:hover { color: var(--ck-text) }
.ck .pw-eye-btn .ck-ico { width: 20px; height: 20px }
.ck .pw-eye-btn .pw-eye-off, .ck .pw-eye-btn[aria-pressed="true"] .pw-eye { display: none }
.ck .pw-eye-btn[aria-pressed="true"] .pw-eye-off { display: block }
.ck .ca-pw .ca-input#pw_new, .ck .ca-pw .ca-input#pw_confirm { padding-right: 52px }

/* checkout : bouton Devis (compte n° 1) sous le bouton Payer */
.ck .ec-btn-sec.ck-devis { display: flex; width: 100%; margin-top: 10px }

/* détail d'une commande (account_history_info.php) */
.ec-oi { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px }
#pageMiddle .ec-oi ul, #pageMiddle .ec-oi ol { margin: 0; padding: 0; list-style: none }
#pageMiddle .ec-oi li::before { content: none }
.ec-oi-back { font-size: 14px }
.ec-oi-head { display: flex; flex-direction: column; gap: 22px }
.ec-oi-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px }
.ec-oi-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px }
.ck .ec-oi-title h1 { margin: 0; padding: 0; text-align: left; font-size: 24px }
.ec-oi-meta { flex-basis: 100%; font-size: 14px; color: var(--ck-muted) }
.ec-oi-actions { display: flex; flex-wrap: wrap; gap: 10px }
.ec-oi-head .ec-steps { margin: 0 !important }
.ec-oi-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start }
.ec-oi-main, .ec-oi-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.ec-oi .ck-sec h2 { font-size: 17px; margin-bottom: 14px }
.ec-oi .ck-sec h2 .ec-ico { width: 18px; height: 18px; color: var(--ck-red) }
/* articles : même présentation que le panier du checkout */
#pageMiddle .ec-oi li.ec-oi-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-top: 1px solid #E6E6E6 }
#pageMiddle .ec-oi li.ec-oi-item:first-child { border-top: 0; padding-top: 0 }
.ec-oi-thumb { width: 74px; height: 56px; display: flex; align-items: center; justify-content: center; background: #EEE; border: 1px solid var(--ck-border); border-radius: 4px; overflow: hidden }
.ec-oi-thumb a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; cursor: zoom-in }
.ec-oi-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block }
.ec-oi-thumb .ec-thumb-none { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999 }
.ec-oi-desc { min-width: 0 }
#pageMiddle .ec-oi .cartProds li { padding: 0 0 1px }
.ec-oi-name { font-weight: 500; font-size: 14.5px }
.ec-oi-legacy { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; font-size: 13px; color: var(--ck-muted); margin: 2px 0 0 }
.ec-oi-legacy dd { margin: 0 }
.ec-oi-cert { font-size: 13px; font-weight: 500; color: var(--ck-text); margin-top: 2px !important }
.ec-oi-files { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; font-size: 13.5px }
.ec-oi-files a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500 }
.ec-oi-files .ec-ico { width: 16px; height: 16px }
.ec-oi-ref { font-size: 12px; color: var(--ck-muted); margin-top: 4px !important }
.ec-oi-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.ec-oi-price { font-weight: 500; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums }
.ec-oi-tax { font-size: 12px; color: var(--ck-muted) }
.ck .ec-oi-side .imageSubmit.ec-btn { white-space: nowrap }
/* totaux */
.ec-oi-totals { margin: 16px 0 0 auto; padding-top: 14px; border-top: 1px solid #E6E6E6; max-width: 360px; font-size: 14px }
.ec-oi-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0 }
.ec-oi-totals dt { color: var(--ck-text2) }
.ec-oi-totals dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums }
.ec-oi-totals .is-total { margin-top: 6px; padding-top: 9px; border-top: 1px solid #E6E6E6; font-weight: 700; font-size: 16px }
.ec-oi-totals .is-total dt { color: var(--ck-text) }
/* colonne de droite */
.ec-oi-aside .ec-address { margin-bottom: 6px }
.ec-oi-muted { font-size: 13.5px; color: var(--ck-muted); margin-top: 2px !important }
.ck .ec-oi-sub { font-size: 14px; font-weight: 500; margin: 14px 0 6px; padding: 0 }
.ec-oi-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; font-size: 13px; margin: 0 }
.ec-oi-hours dd { margin: 0; color: var(--ck-text2) }
.ec-oi-aside .ec-track { margin-top: 10px !important }
#pageMiddle .ec-oi-history li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid #E6E6E6; margin-left: 4px }
#pageMiddle .ec-oi-history li:last-child { padding-bottom: 0; border-left-color: transparent }
#pageMiddle .ec-oi-history li::after { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #CFCFCF }
#pageMiddle .ec-oi-history li:first-child::after { background: var(--ck-red) }
.ec-oi-h-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; line-height: 1.4 }
.ec-oi-h-head strong { font-weight: 500 }
.ec-oi-h-head span { font-size: 12.5px; color: var(--ck-muted) }
.ec-oi-h-msg { margin-top: 6px !important; padding: 8px 10px; border-radius: 6px; background: var(--ck-bg); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere }
@media (max-width: 989px) {
  .ec-oi-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .ec-oi-actions, .ck .ec-oi-actions .imageSubmit.ec-btn, .ck .ec-oi-actions .ec-btn-sec { width: 100% }
  .ck .ec-oi-title h1 { font-size: 20px }
  #pageMiddle .ec-oi li.ec-oi-item { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px }
  .ec-oi-thumb { width: 64px; height: 50px }
  .ec-oi-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between }
  .ec-oi-totals { max-width: none }
}

/* fiche produit : lien « Voir tous les formats & tarifs » et prix « À partir de » (lien invisible) */
#tousT .pr-tt-ico { width: 15px; height: 15px; margin: 0 5px -3px 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
#productPrice .pr-price-link, #productPrice .pr-price-link:visited, #productPrice .pr-price-link:hover { color: inherit; text-decoration: none; font: inherit; cursor: pointer }

/* fenêtre des formats & tarifs (includes/javascript/tarifs_dialog.js) */
.ui-dialog.tt-dialog { padding: 0; border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); font-family: Roboto, system-ui, sans-serif }
.tt-dialog .ui-dialog-titlebar { background: #fff; border: 0; border-bottom: 1px solid #E6E6E6; border-radius: 0; padding: 16px 56px 14px 24px; color: #222 }
.tt-dialog .ui-dialog-title { font-family: 'Roboto Slab', serif; font-size: 19px; font-weight: 500; line-height: 1.3; white-space: normal; float: none; width: auto; margin: 0 }
.tt-dialog .ui-dialog-titlebar-close { right: 16px; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; background: #F3F3F3 }
.tt-dialog .ui-dialog-titlebar-close:hover { background: #E6E6E6 }
.tt-dialog .ui-dialog-content { padding: 0 !important; background: #fff }
.tt { padding: 18px 24px 0; font-size: 14px }
.tt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px }
.tt-intro { color: var(--ck-text2) }
.tt-search { position: relative; display: block; flex: 0 1 300px }
.tt-search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: #888; stroke-width: 2; stroke-linecap: round }
.ck .tt-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; font-size: 14px; color: var(--ck-text) }
.ck .tt-search input:focus { outline: 0; border-color: var(--ck-text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-items: start }
.tt-card { border: 1px solid var(--ck-border); border-radius: 6px; overflow: hidden; background: #fff }
.ck .tt-card h4 { margin: 0; padding: 9px 12px; background: var(--ck-bg); font-family: 'Roboto Slab', serif; font-size: 14px; font-weight: 500; color: var(--ck-text) }
.ck .tt-card ul { margin: 0; padding: 4px 0; list-style: none }
.ck .tt-card li { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 4px 12px; font-size: 13.5px; line-height: 1.45; background: none }
.ck .tt-card li::before { content: none }
.ck .tt-card li:nth-child(even) { background: #FAFAFA }
.ck .tt-card li:hover { background: var(--ck-red-bg) }
.tt-card li span { color: var(--ck-text2); white-space: nowrap }
.tt-card li strong { font-weight: 500; color: var(--ck-text); white-space: nowrap; font-variant-numeric: tabular-nums }
.tt-none { padding: 18px 0 4px; color: var(--ck-muted) }
.tt-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; margin: 18px -24px 0; padding: 12px 24px; background: #fff; border-top: 1px solid #E6E6E6 }
.tt-foot:not(:has(a)) { display: none }
@media (max-width: 640px) {
  .tt-dialog .ui-dialog-titlebar { padding: 14px 52px 12px 16px }
  .tt-dialog .ui-dialog-title { font-size: 17px }
  .tt { padding: 14px 16px 0 }
  .tt-search { flex-basis: 100% }
  .tt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .ck .tt-card li { padding: 4px 8px; font-size: 13px }
  .tt-foot { margin: 14px -16px 0; padding: 10px 16px }
  .ck .tt-foot .imageSubmit.ec-btn { width: 100% }
}
.tt-dialog .ui-dialog-titlebar-close .ui-icon, .tt-dialog .ui-dialog-titlebar-close .ui-button-text { display: none }
.tt-dialog .ui-dialog-titlebar-close::before { content: "\00D7"; display: block; font: 400 24px/32px Roboto, sans-serif; color: #333; text-align: center; text-indent: 0 }
@media (max-width: 460px) {
  .tt-grid { grid-template-columns: minmax(0, 1fr) }
}

/* indicatif téléphonique avec drapeau (includes/javascript/tel_prefix.js) : carnet d'adresses, checkout */
.ck .tp { position: relative; display: flex; gap: 8px }
.ck .tp > .ca-input { flex: 1; min-width: 0 }
.ck .tp-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 10px 0 12px; border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; color: var(--ck-text); font: 15px Roboto, system-ui, sans-serif; cursor: pointer }
.ck .tp-btn:hover, .ck .tp-btn[aria-expanded="true"] { border-color: var(--ck-text) }
.ck .tp-btn:focus-visible { outline: 2px solid var(--ck-text); outline-offset: 1px }
.ck .tp-btn svg { width: 14px; height: 14px; fill: none; stroke: #666; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.tp-flag { width: 16px; height: 12px; flex: none; display: block; object-fit: cover }
.ck .tp-pop { position: absolute; z-index: 1000; top: calc(100% + 4px); left: 0; width: min(320px, 100%); background: #fff; border: 1px solid var(--ck-border); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); overflow: hidden }
.ck .tp-search { display: block; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid #E6E6E6; font: 14px Roboto, system-ui, sans-serif; color: var(--ck-text); background: #fff }
.ck .tp-search:focus { outline: 0; background: #FAFAFA }
.ck .tp-list { max-height: 260px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none }
.ck .tp-list li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; font-size: 14px; line-height: 1.3; cursor: pointer; background: none }
.ck .tp-list li::before { content: none }
.ck .tp-list li.tp-sep { border-bottom: 1px solid #E6E6E6; padding-bottom: 9px; margin-bottom: 4px }
.ck .tp-list li.is-active, .ck .tp-list li:hover { background: var(--ck-red-bg) }
.ck .tp-list li[aria-selected="true"] .tp-name { font-weight: 500 }
.tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tp-dial { color: var(--ck-muted); font-variant-numeric: tabular-nums }
.ck .tp-list .tp-empty { color: var(--ck-muted); cursor: default }
.ck .ca-tel > .tp { flex: 1; min-width: 0 }

/* colonne de gauche des pages du site : estimation, espace client (includes/modules/column_estimation.php) */
.ck.est { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 14px }
.est-card { background: #fff; border: 1px solid var(--ck-border); border-radius: 6px; padding: 16px }
.est-card[aria-busy="true"] { opacity: .6 }
.ck .est-h { font-family: 'Roboto Slab', serif; font-size: 16px; font-weight: 500; margin: 0 0 12px; padding: 0; color: var(--ck-text) }
.ck .est-h a, .ck .est-h a:visited { color: var(--ck-text); text-decoration: none }
.ck .est-h a:hover { color: var(--ck-red) }
.ck .est-label { display: block; margin: 0 0 4px; font-size: 12.5px; color: var(--ck-muted) }
.ck .est-select { display: block; width: 100%; height: 38px; margin: 0 0 10px; padding: 0 8px; border: 1px solid var(--ck-input); border-radius: 4px; background: #fff; color: var(--ck-text); font: 14px Roboto, system-ui, sans-serif; cursor: pointer }
.ck .est-select:focus { outline: 2px solid var(--ck-text); outline-offset: 1px }
.est-price { margin: 4px 0 0 !important; font-size: 24px; font-weight: 500; color: var(--ck-text); font-variant-numeric: tabular-nums; line-height: 1.2 }
.est-price small { font-size: 12px; font-weight: 400; color: var(--ck-muted) }
.est-note { margin: 2px 0 0 !important; font-size: 12px; color: var(--ck-muted) }
.ck .est-more, .ck .est-more:visited { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--ck-red); text-decoration: none }
.ck .est-more:hover { text-decoration: underline }
.ck .est-cta, .ck .est-cta:visited { display: block; margin-top: 14px; padding: 9px 10px; border-radius: 4px; background: var(--ck-red); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none }
.ck .est-cta:hover, .ck .est-cta:focus-visible { background: var(--ck-red-dark); color: #fff; text-decoration: none }
#pageMiddle .est ul, #pageLeft .est ul { margin: 0; padding: 0; list-style: none }
.ck .est-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px !important; padding: 0 !important; list-style: none }
.ck .est-albums li { margin: 0; padding: 0; background: none }
.ck .est-albums li::before { content: none }
.ck .est-albums a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--ck-bg); font-size: 11px; line-height: 1.2; color: var(--ck-muted); text-align: center; text-decoration: none }
.ck .est-albums img { width: 100%; height: 100%; object-fit: cover; display: block }
.ck .est-albums span { padding: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.est-line { margin: 4px 0 0 !important; font-size: 13.5px; color: var(--ck-text2) }
.est-muted { color: var(--ck-muted) }
.ck .est-line a, .ck .est-line a:visited { color: var(--ck-text); text-decoration: none }
.ck .est-line a:hover { color: var(--ck-red); text-decoration: underline }
.est-login { margin: 0 !important; font-size: 13.5px; text-align: center }