/* ============================================================
   Espace client (compte, retours, réclamation, suivi, avis,
   parrainage, transfert de carnet) — compléments au langage 111.
   Composants à mutualiser ensuite dans carlyto-111.css :
   .tog (interrupteur), .modal, #toast, .ocard (commande), .tline
   (frise de suivi), .addr (carte adresse), .kv (lignes clé/valeur),
   .ilist (ligne d'article), .pay-row, .snav responsive.
   ============================================================ */
[hidden]{display:none!important}
.acct{padding-bottom:36px}
.acct .cols{grid-template-columns:240px minmax(0,1fr)}
.acct-in{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.acct-sec[hidden]{display:none}
.snav a{cursor:pointer}
.snav .sep{height:1px;background:var(--c-line);margin:6px 8px}
.snav .out{color:var(--c-ink)}

/* --- en-tête de section : titre + action à droite --- */
.sec-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sec-top .ptitle{flex:1;min-width:240px;margin-bottom:8px}
.sec-top .btn{margin-top:6px}

/* --- cartes de chiffres : grille + lien --- */
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.stat .v{font-size:26px}

/* --- profil (aside) --- */
.prof{display:flex;align-items:center;gap:16px}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--c-page);border:1px solid var(--c-line);display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--c-ink);flex:none}
.prof b{display:block;font-size:16px;color:var(--c-ink);word-break:break-word}
.prof small{display:block;font-size:12.5px;color:var(--c-muted);margin-top:2px;word-break:break-all}
.credit{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--c-text)}
.credit .ico{width:16px;height:16px;color:var(--c-brand)}
.credit b{color:var(--c-ink)}

/* --- véhicules (aperçu) --- */
.vrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vit{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--c-line);border-radius:10px;background:#fff;min-width:0}
.vit .vi{width:46px;height:46px;border-radius:10px;background:var(--c-page);display:grid;place-items:center;flex:none}
.vit .vi .ico{width:24px;height:24px;color:var(--c-ink)}
.vit b{display:block;font-size:14px;color:var(--c-ink)}
.vit small{display:block;font-size:12px;color:var(--c-muted)}
.vit .go{margin-left:auto;width:16px;height:16px}
.vit.add{border-style:dashed;justify-content:center;color:var(--c-ink)}
.plate{display:inline-flex;align-items:center;gap:6px;margin-top:5px;height:22px;padding:0 8px;border:1px solid var(--c-line);border-radius:4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--c-ink);background:#fff}
.plate::before{content:"";width:6px;height:14px;border-radius:1px;background:#2B2E31}

/* --- lignes clé / valeur --- */
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;color:var(--c-text)}
.kv b{color:var(--c-ink);font-variant-numeric:tabular-nums}
.kv.tot{border-top:1px solid var(--c-line);margin-top:6px;padding-top:12px;font-size:15px}
.kv.tot b{font-size:20px}

/* --- carte commande (liste) --- */
.olist{display:flex;flex-direction:column;gap:10px}
.ocard{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:16px 18px;box-shadow:inset 4px 0 0 var(--c-brand)}
.ocard.sel{border-color:#BDBDBD;box-shadow:inset 4px 0 0 var(--c-brand),0 0 0 3px rgba(96,100,106,.10)}
.ocard h3{margin:0;font-size:15px;color:var(--c-ink)}
.ocard .d{font-size:12.5px;color:var(--c-muted);margin-top:2px}
.ocard .its{font-size:12.5px;color:var(--c-text);margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard .amt{text-align:right}
.ocard .amt b{display:block;font-size:16px;color:var(--c-ink);font-variant-numeric:tabular-nums}
.ocard .amt small{font-size:12px;color:var(--c-muted)}
.ocard .act{display:flex;flex-direction:column;gap:8px;align-items:stretch}

/* --- frise de suivi --- */
.tline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:14px 0 4px;position:relative}
.tline .tp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;font-size:12px;color:var(--c-muted)}
.tline .tp::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:#E1E1E1;z-index:0}
.tline .tp:first-child::before{display:none}
.tline .tp.done::before{background:var(--c-brand)}
.tline .dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:#EDEDED;display:grid;place-items:center;color:var(--c-muted)}
.tline .dot .ico{width:16px;height:16px}
.tline .tp.done .dot{background:var(--c-brand);color:var(--c-ink)}
.tline .tp b{font-size:12.5px;color:var(--c-ink);font-weight:600}
.tline .tp.ko .dot{background:#F9E5E4;color:#A23A35}

/* --- ligne d'article --- */
.ilist{display:flex;flex-direction:column}
.irow{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #EFEFEF}
.irow:last-child{border-bottom:none}
.irow .ii{width:44px;height:44px;border-radius:8px;background:var(--c-page);display:grid;place-items:center;flex:none}
.irow .ii .ico{width:20px;height:20px;color:var(--c-ink)}
.irow .tx{flex:1;min-width:0}
.irow .br{font-size:11.5px;font-weight:800;text-transform:uppercase;color:var(--c-ink)}
.irow .nm{font-size:13px;color:var(--c-text)}
.irow .px{font-size:13px;font-weight:700;color:var(--c-ink);margin-top:2px}
.irow .q{font-size:12px;color:var(--c-muted);white-space:nowrap}

/* --- adresses --- */
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.addr{display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:18px 20px}
.addr.def{border-color:#CFCFCF;box-shadow:inset 0 3px 0 var(--c-brand)}
.addr .ah{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.addr .ah .ico{width:24px;height:24px;color:var(--c-ink)}
.addr .nm{font-size:15px;font-weight:700;color:var(--c-ink)}
.addr .dt{font-size:13px;line-height:1.6;color:var(--c-text);margin-top:4px;word-break:break-word}
.addr .aa{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--c-line)}
.addr .aa{margin-top:14px}
.tbtn{display:inline-flex;align-items:center;gap:7px;border:none;background:none;padding:4px 0;font-size:13px;color:var(--c-ink)}
.tbtn .ico{width:16px;height:16px}
.tbtn:hover{text-decoration:underline;text-underline-offset:2px}
.addr-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;border:1px dashed #C9C9C9;border-radius:var(--r-card);background:#fff;color:var(--c-ink);font-size:13.5px;font-weight:600}
.addr-new .ico{width:26px;height:26px}
.addr-new:hover{border-color:var(--c-btn)}
ul.dots{margin:6px 0 0;padding-left:18px;color:var(--c-text);font-size:13px;line-height:1.7}

/* --- moyens de paiement --- */
.pay-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.pay-row:last-of-type{border-bottom:none}
.pay-row .pi{width:46px;height:46px;border-radius:10px;background:var(--c-page);display:grid;place-items:center;flex:none}
.pay-row .pi .ico{width:22px;height:22px;color:var(--c-ink)}
.pay-row b{display:block;font-size:14px;color:var(--c-ink)}
.pay-row small{display:block;font-size:12.5px;color:var(--c-muted)}
.pay-row .logos{margin-left:auto;display:flex;gap:8px;align-items:center}
.pay-row .logos img{height:22px;width:auto}

/* --- lignes de réglage (sécurité, préférences) --- */
.srow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #EFEFEF}
.srow:last-child{border-bottom:none}
.srow > .ico{width:20px;height:20px;color:var(--c-ink)}
.srow .t{flex:1;min-width:0}
.srow .t b{display:block;font-size:13.5px;color:var(--c-ink)}
.srow .t small{display:block;font-size:12px;color:var(--c-muted)}
.danger{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#FBF3F2;border:1px solid #EFC9C6;border-radius:var(--r-card);padding:18px 20px}
.danger > .ico{width:26px;height:26px;color:#A23A35}
.danger .t{flex:1;min-width:200px}
.danger b{display:block;color:#A23A35;font-size:15px}
.danger small{display:block;color:var(--c-text);font-size:12.5px;margin-top:2px}
.btn.ko{background:#fff;color:#A23A35;border:1px solid #D99A95}
.btn.ko:hover{background:#FBF3F2}

/* --- interrupteur --- */
.tog{position:relative;display:inline-block;width:42px;height:24px;flex:none;cursor:pointer}
.tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tog i{position:absolute;inset:0;border-radius:999px;background:#D6D6D6;transition:background .15s}
.tog i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.tog input:checked + i{background:var(--c-btn)}
.tog input:checked + i::after{transform:translateX(18px)}
.tog input:focus-visible + i{outline:2px solid var(--c-brand);outline-offset:2px}

/* --- parrainage --- */
.refcode{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:52px;padding:0 22px;border:1px dashed #BDBDBD;border-radius:10px;background:var(--c-page);font-size:22px;font-weight:800;letter-spacing:.12em;color:var(--c-ink)}

/* --- modale --- */
.modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(20,22,24,.5);align-items:center;justify-content:center;padding:16px}
.modal .box{background:#fff;border-radius:var(--r-card);max-width:500px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-line)}
.modal .mh h3{margin:0;font-size:16px;color:var(--c-ink)}
.modal .mb{padding:18px 20px}
.modal .mg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .mg .full{grid-column:1/-1}
.modal .mf{display:flex;gap:10px;margin-top:18px}
.modal .mf .btn{flex:1}

/* --- message flottant --- */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);z-index:10000;background:var(--c-dark);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);transition:transform .28s ease;max-width:calc(100vw - 32px)}
#toast{visibility:hidden}
#toast.show{transform:translate(-50%,0);visibility:visible}

@media (max-width:1280px){
  .acct-in{grid-template-columns:minmax(0,1fr)}
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .acct .cols{grid-template-columns:minmax(0,1fr)}
  .snav.acct-nav{display:flex;overflow-x:auto;gap:2px;padding:6px;scrollbar-width:thin}
  .snav.acct-nav a{width:auto;white-space:nowrap;flex:none;padding:8px 12px}
  .snav.acct-nav .sep{display:none}
  .stats4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .vrow,.agrid{grid-template-columns:minmax(0,1fr)}
  .ocard{grid-template-columns:minmax(0,1fr) auto}
  .ocard .act{grid-column:1/-1;flex-direction:row}
  .ocard .act .btn{flex:1}
  .modal .mg{grid-template-columns:1fr}
  .pay-row{flex-wrap:wrap}
  .pay-row .logos{margin-left:62px}
  .tline .tp{font-size:11px}
}
.sec-h3 h2,.sec-h3 a{white-space:nowrap}

/* --- options à choix (radio / case) en lignes --- */
.opts{display:flex;flex-direction:column;border:1px solid var(--c-line);border-radius:10px;overflow:hidden;background:#fff}
.opt{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid #EFEFEF;cursor:pointer;color:var(--c-text)}
.opt:last-child{border-bottom:none}
.opt:hover{background:#FAFAFA}
.opt .radio{width:18px;height:18px;border-radius:50%;border:2px solid #BDBDBD;flex:none;display:grid;place-items:center}
.opt.sel .radio{border-color:var(--c-brand)}
.opt.sel .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-brand)}
.opt .oic .ico,.opt .oic svg{width:22px;height:22px;color:var(--c-ink)}
.opt .otxt{flex:1;min-width:0}
.opt .otxt b{display:block;font-size:13.5px;font-weight:600;color:var(--c-ink)}
.opt .otxt small{display:block;font-size:12px;color:var(--c-muted)}
.opt .oprice{font-weight:700;color:var(--c-ink);white-space:nowrap}
.opt.sel{background:var(--c-brand-soft)}
.optgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.optgrid .opt{border:1px solid var(--c-line);border-radius:10px}
.optgrid .opt:last-child{border-bottom:1px solid var(--c-line)}
.optgrid .opt.sel{border-color:var(--c-brand)}

/* --- titre de bloc numéroté --- */
.nh{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:15px;font-weight:700;color:var(--c-ink)}
.nh .n{width:26px;height:26px;border-radius:50%;background:var(--c-brand);color:var(--c-ink);display:grid;place-items:center;font-size:12.5px;flex:none}
.nh small{display:block;font-size:12.5px;font-weight:400;color:var(--c-muted)}

/* --- zone de dépôt de fichiers --- */
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border:1px dashed #C9C9C9;border-radius:10px;background:#FAFAFA;cursor:pointer;text-align:center;color:var(--c-muted);font-size:12.5px}
.drop:hover{border-color:var(--c-btn)}
.drop .ico{width:26px;height:26px;color:var(--c-ink)}
.drop b{color:var(--c-ink);font-size:13.5px}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.photo-thumb{display:inline-flex;align-items:center;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:5px 10px;border:1px solid var(--c-line);border-radius:6px;background:#fff;font-size:11.5px;color:var(--c-text)}

/* --- message d'erreur de formulaire --- */
.au-err{display:none;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#FBECEB;border:1px solid #EFC9C6;color:#A23A35;font-size:12.5px}
.au-err.show{display:flex}
.au-err svg,.au-err .ico{width:15px;height:15px;flex:none}
@media (max-width:640px){.optgrid{grid-template-columns:minmax(0,1fr)}}

/* --- page de compte à 3 colonnes : menu | contenu | récapitulatif --- */
.acct3{display:grid;grid-template-columns:240px minmax(0,1fr) 340px;gap:24px;align-items:start}
.ret-empty{padding:22px 16px;text-align:center;font-size:13px;color:var(--c-muted);line-height:1.6}
@media (max-width:1280px){.acct3{grid-template-columns:240px minmax(0,1fr)}.acct3 > aside{grid-column:2}}
@media (max-width:1100px){.acct3{grid-template-columns:minmax(0,1fr)}.acct3 > aside{grid-column:auto}}

/* La classe d'état « .sel » (posée par les scripts) entre en conflit avec le
   champ de sélection .sel de carlyto-111.css : on neutralise ce dernier ici. */
.opt.sel,.ocard.sel,.ret-art.sel,.rec-chip.sel{height:auto;width:auto;font-size:inherit;color:inherit}
.opt.sel{padding:12px 16px;border:0;border-bottom:1px solid #EFEFEF;border-radius:0}
.opts .opt.sel:last-child{border-bottom:none}
.optgrid .opt.sel{border:1px solid var(--c-brand);border-radius:10px}
.ocard.sel{padding:16px 18px;border-radius:var(--r-card);background:#fff}
.ret-art.sel{padding:12px 14px;border-radius:10px}
.rec-chip.sel{padding:12px 14px;border-radius:10px;color:var(--c-ink)}
.srow .t small b{display:inline;font-size:inherit}