/* ============================================================
   BOUTIQUE B — feuille de style
   Palette vive : rose, violet, turquoise, orange, jaune
   ============================================================ */

:root{
  --c1:#ff2e88;            /* couleur principale du client */
  --c2:#7b2ff7;            /* couleur secondaire du client */
  --rose:#ff2e88;
  --violet:#7b2ff7;
  --turquoise:#00c2a8;
  --orange:#ff6b00;
  --jaune:#ffd400;
  --bleu:#0066ff;
  --encre:#1b1436;
  --gris:#6b6785;
  --ligne:#ece9f6;
  --fond:#f6f4ff;
  --blanc:#fff;
  --r:18px;
  --ombre:0 10px 30px rgba(27,20,54,.10);
  --ombre-forte:0 18px 45px rgba(27,20,54,.20);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--encre); background:var(--fond); -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .4em;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(26px,4vw,40px)}
h2{font-size:clamp(21px,2.6vw,28px)}
input,select,textarea,button{font:inherit;color:inherit}

/* ---------- Rubans décoratifs ---------- */
.ruban{
  height:6px;
  background:linear-gradient(90deg,var(--rose),var(--orange),var(--jaune),var(--turquoise),var(--bleu),var(--violet));
}

/* ============================================================
   PAGES DE CONNEXION
   ============================================================ */
.page-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:28px 18px;
  background:
    radial-gradient(1100px 700px at 8% -5%, #ff2e88 0%, transparent 58%),
    radial-gradient(900px 700px at 98% 10%, #00c2a8 0%, transparent 55%),
    radial-gradient(900px 800px at 40% 110%, #ffd400 0%, transparent 55%),
    linear-gradient(140deg,#7b2ff7,#0066ff 60%,#00c2a8);
  background-attachment:fixed;
}
.carte-auth{
  width:100%; max-width:430px; background:var(--blanc);
  border-radius:26px; padding:34px 30px; text-align:center;
  box-shadow:0 30px 70px rgba(20,10,60,.35);
  animation:monte .5s ease;
}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.logo-boutique{
  width:78px;height:78px;margin:0 auto 16px;border-radius:24px;
  display:grid;place-items:center;font-size:38px;
  background:linear-gradient(135deg,var(--rose),var(--violet));
  box-shadow:0 12px 28px rgba(123,47,247,.4);
}
.carte-auth h1{font-size:27px;margin-bottom:6px}
.sous-titre{color:var(--gris);margin:0 0 22px}

.champ{text-align:left;margin-bottom:14px}
.champ label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.champ input,.champ select,.champ textarea{
  width:100%;padding:13px 15px;border:2px solid var(--ligne);border-radius:14px;background:#fbfaff;
  transition:border-color .15s,box-shadow .15s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 18%,transparent);background:#fff;
}
.champ textarea{min-height:90px;resize:vertical}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:0;border-radius:999px;cursor:pointer;
  font-weight:800;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;
  box-shadow:0 10px 24px color-mix(in srgb,var(--c1) 35%,transparent);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb,var(--c1) 45%,transparent)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-gros{width:100%;padding:16px 22px;font-size:17px;margin-top:6px}
.btn-clair{background:#fff;color:var(--encre);border:2px solid var(--ligne);box-shadow:none}
.btn-clair:hover{border-color:var(--c1);color:var(--c1);box-shadow:none}
.btn-petit{padding:8px 14px;font-size:14px}
.btn-danger{background:linear-gradient(135deg,#ff4d4d,#e11d2e);box-shadow:0 10px 24px rgba(225,29,46,.3)}
.lien-discret{display:inline-block;margin-top:18px;color:var(--gris);font-size:14px;border-bottom:1px dashed currentColor}
.lien-discret:hover{color:var(--c1)}

/* ============================================================
   EN-TÊTE BOUTIQUE
   ============================================================ */
.entete{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(120deg,var(--c1),var(--c2));
  color:#fff;box-shadow:0 6px 24px rgba(27,20,54,.18);
}
.entete-in{
  max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.marque{display:flex;align-items:center;gap:12px;font-weight:900;font-size:19px;letter-spacing:-.01em}
.marque .pastille{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:21px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px);
}
.marque small{display:block;font-size:12px;font-weight:600;opacity:.85;letter-spacing:0}
.entete nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.entete nav a{
  padding:9px 15px;border-radius:999px;font-weight:700;font-size:15px;
  background:rgba(255,255,255,.16);transition:background .15s,transform .12s;
}
.entete nav a:hover{background:rgba(255,255,255,.32);transform:translateY(-1px)}
.entete nav a.actif{background:#fff;color:var(--c2)}
.pastille-nb{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--jaune);color:#3b2c00;font-size:12px;font-weight:900;margin-left:6px;
}

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.conteneur{max-width:1180px;margin:0 auto;padding:26px 20px 70px}
.banniere{
  border-radius:24px;padding:30px 28px;color:#fff;margin-bottom:26px;
  background:linear-gradient(120deg,var(--c1),var(--c2));
  box-shadow:var(--ombre-forte);position:relative;overflow:hidden;
}
.banniere:after{
  content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.16);
}
.banniere h1{margin-bottom:6px}
.banniere p{margin:0;opacity:.92;max-width:60ch}

.filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.filtres a{
  padding:9px 17px;border-radius:999px;background:#fff;border:2px solid var(--ligne);
  font-weight:700;font-size:14px;transition:.15s;
}
.filtres a:hover{border-color:var(--c1);color:var(--c1)}
.filtres a.actif{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border-color:transparent}

/* ---------- Grille de produits ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.produit{
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);
  transition:transform .18s ease, box-shadow .18s ease;display:flex;flex-direction:column;
}
.produit:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.produit .visuel{
  aspect-ratio:3/4;display:grid;place-items:center;font-size:74px;position:relative;
  background:linear-gradient(135deg,#fff0f7,#efe9ff 55%,#e2fbf6);
}
.produit .visuel img{width:100%;height:100%;object-fit:contain}
.badge{
  position:absolute;bottom:12px;left:12px;max-width:calc(100% - 24px);
  padding:6px 13px;border-radius:999px;line-height:1.25;
  background:linear-gradient(135deg,var(--orange),var(--rose));color:#fff;
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:0 6px 16px rgba(255,46,136,.35);
}
.produit-lien{display:flex;flex-direction:column;flex:1}
.produit .corps{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.categorie{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--c1);margin-bottom:5px}
.produit h3{font-size:18px;margin-bottom:6px}
.produit .desc{color:var(--gris);font-size:14px;margin:0 0 12px;flex:1}
.pastilles{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pt{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ligne)}
.pt-plus{font-size:12px;color:var(--gris);font-weight:700;align-self:center}
.pied-produit{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pied-produit .btn{flex:0 1 auto;justify-content:center;text-align:center;white-space:nowrap}
.prix{font-size:21px;font-weight:900;white-space:nowrap}
.prix small{white-space:normal}
.prix small{font-size:12px;font-weight:700;color:var(--gris);display:block;margin-top:-2px}

/* Fiche technique sous la vignette, dans la liste des vêtements */
.pied-fiche{
  border-top:1px solid var(--ligne);padding:10px 17px 12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.matiere-carte{font-size:12.5px;font-weight:700;color:var(--gris);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#voileFiche .fenetre{max-width:720px}
.fiche-tech-fenetre h3{font-size:19px;margin:0 0 12px}
.fiche-tech-fenetre h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c1);margin:16px 0 6px}

/* ============================================================
   FICHE PRODUIT
   ============================================================ */
.fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:start}
.fiche-visuel{
  border-radius:24px;aspect-ratio:1/1;display:grid;place-items:center;font-size:150px;
  background:linear-gradient(135deg,#fff0f7,#efe9ff 55%,#e2fbf6);
  box-shadow:var(--ombre);position:sticky;top:96px;overflow:hidden;
}
.fiche-visuel img{width:100%;height:100%;object-fit:cover}
.panneau{background:#fff;border-radius:22px;padding:24px;box-shadow:var(--ombre)}
.bloc{margin-bottom:24px}
.bloc:last-child{margin-bottom:0}
.titre-bloc{
  display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--gris);
}
.titre-bloc .oblig{color:var(--rose)}
.aide{font-size:13px;color:var(--gris);margin:-6px 0 10px}

/* choix grandeurs */
.choix-grille{display:flex;gap:9px;flex-wrap:wrap}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix{position:relative;display:inline-block}
.choix span{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 17px;border-radius:14px;border:2px solid var(--ligne);background:#fbfaff;
  font-weight:800;cursor:pointer;transition:.15s;
}
.choix span:hover{border-color:var(--c1)}
.choix input:checked + span{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 20px color-mix(in srgb,var(--c1) 35%,transparent);
}
.choix .sup{font-size:12px;opacity:.75;font-weight:700}

/* choix couleurs */
.couleurs{display:flex;gap:12px;flex-wrap:wrap}
.couleur span{
  width:44px;height:44px;border-radius:50%;display:block;cursor:pointer;
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--ligne);transition:.15s;
}
.couleur span:hover{transform:scale(1.08)}
.couleur input:checked + span{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--c1);transform:scale(1.08)}
.nom-couleur{margin-top:10px;font-weight:800;color:var(--c1)}

/* options */
.option{
  border:2px solid var(--ligne);border-radius:16px;padding:15px 16px;margin-bottom:12px;background:#fbfaff;
  transition:border-color .15s,background .15s;
}
.option.active{border-color:var(--c1);background:#fff}
.option h4{margin:0 0 3px;font-size:16px}
.ligne-option{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prix-option{font-weight:900;color:var(--turquoise);white-space:nowrap}
.prix-option.zero{color:var(--gris)}
.interrupteur{position:relative;width:52px;height:30px;flex:0 0 auto}
.interrupteur input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.interrupteur .piste{
  position:absolute;inset:0;border-radius:999px;background:#dcd7ee;transition:.2s;
}
.interrupteur .piste:after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.interrupteur input:checked + .piste{background:linear-gradient(135deg,var(--c1),var(--c2))}
.interrupteur input:checked + .piste:after{transform:translateX(22px)}

.zone-nom{margin-top:12px;display:none}
.zone-nom.visible{display:block}

/* barre total */
.barre-total{
  position:sticky;bottom:0;background:#fff;border-radius:20px;padding:18px;margin-top:22px;
  box-shadow:0 -8px 30px rgba(27,20,54,.12);border:2px solid var(--ligne);
}
.ligne-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:var(--gris);font-size:14px}
.ligne-total.grand{font-size:24px;font-weight:900;color:var(--encre);margin:8px 0 14px}
.qte{display:flex;align-items:center;gap:0;border:2px solid var(--ligne);border-radius:14px;overflow:hidden;width:fit-content}
.qte button{width:42px;height:42px;border:0;background:#fbfaff;font-size:20px;font-weight:900;cursor:pointer;color:var(--c1)}
.qte button:hover{background:var(--ligne)}
.qte input{width:56px;height:42px;border:0;text-align:center;font-weight:900;font-size:17px;background:#fff}

/* ============================================================
   PANIER / TABLEAUX
   ============================================================ */
.carte{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--ombre);margin-bottom:20px}
.ligne-panier{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--ligne)}
.ligne-panier:last-child{border-bottom:0}
.vignette{
  width:76px;height:76px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(135deg,#fff0f7,#efe9ff);overflow:hidden;
}
.vignette img{width:100%;height:100%;object-fit:cover}
.detail-options{font-size:14px;color:var(--gris);margin:6px 0 0}
.detail-options li{margin-bottom:2px}
.detail-options ul{margin:4px 0 0;padding-left:18px}

table{width:100%;border-collapse:collapse}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--ligne);font-size:15px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);font-weight:800}
tr:last-child td{border-bottom:0}
.etat{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:900;background:#eef7ff;color:var(--bleu)}
.etat.recue{background:#fff3d6;color:#a06a00}
.etat.production{background:#e7f9f5;color:#00806e}
.etat.prete{background:#e9f0ff;color:var(--bleu)}
.etat.livree{background:#e9fbe9;color:#1a7f2e}
.etat.annulee{background:#ffe9ec;color:#c01027}

.alerte{padding:13px 16px;border-radius:14px;margin-bottom:16px;font-weight:700}
.alerte.ok{background:#e7f9ef;color:#14713a;border:2px solid #bde9cd}
.alerte.err{background:#ffe9ec;color:#b30d22;border:2px solid #ffc6cf}
.note{font-size:14px;color:var(--gris);margin:8px 0}
.note.avertissement{background:#fff6e0;color:#8a5a00;padding:11px 14px;border-radius:12px}
.vide{text-align:center;padding:56px 20px;color:var(--gris)}
.vide .emo{font-size:62px;margin-bottom:12px}

/* ============================================================
   ADMIN
   ============================================================ */
.admin .entete{background:linear-gradient(120deg,#1b1436,#3a2d6b)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:24px}
.stat{background:#fff;border-radius:18px;padding:20px;box-shadow:var(--ombre);border-left:6px solid var(--c1)}
.stat:nth-child(2){border-left-color:var(--turquoise)}
.stat:nth-child(3){border-left-color:var(--orange)}
.stat:nth-child(4){border-left-color:var(--bleu)}
.stat .n{font-size:32px;font-weight:900;line-height:1}
.stat .l{font-size:13px;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.barre-outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.barre-outils h2{margin:0;flex:1}
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.rangee-opt{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.rangee-opt input[type=text]{flex:1;min-width:130px;padding:9px 12px;border:2px solid var(--ligne);border-radius:11px}
.rangee-opt input[type=number]{width:92px;padding:9px 12px;border:2px solid var(--ligne);border-radius:11px}
.rangee-opt input[type=color]{width:46px;height:38px;padding:2px;border:2px solid var(--ligne);border-radius:11px;background:#fff}
.sup-ligne{background:#ffe9ec;color:#c01027;border:0;width:34px;height:34px;border-radius:10px;cursor:pointer;font-weight:900}
/* En-tête de colonnes au-dessus des rangées (Grandeurs) */
.entete-opt{
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris);margin-bottom:4px;
}
.entete-opt .col-nom{flex:1;min-width:130px}
.entete-opt .col-montant{width:92px;text-align:center;font-size:15px;color:var(--c1)}
.entete-opt .col-vide{width:34px}

/* Aide au prix : le prix avec taxes, et le calcul inverse */
.aide-taxes{margin-top:7px}
.viser-rond{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.viser-rond input{width:100px;padding:7px 10px;border:2px solid var(--ligne);border-radius:10px}
.etiq-taxes{font-size:13px;font-weight:800;color:var(--gris)}

/* Les modes de paiement enregistrés chez le fournisseur */
.liste-profils{display:grid;gap:7px;margin-top:4px}
.profil-ss{display:flex;gap:9px;align-items:center;padding:9px 12px;font-weight:700;
  border:2px solid var(--ligne);border-radius:12px;cursor:pointer;font-size:14px}
.profil-ss:hover{border-color:var(--c1)}
.profil-ss:has(input:checked){border-color:var(--c1);background:#f7f3ff}

/* Tout cocher / tout décocher une liste de choix */
.barre-cases{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.lien-cases{
  border:2px solid var(--ligne);background:#fff;border-radius:999px;
  padding:5px 13px;font:inherit;font-size:12px;font-weight:800;color:var(--gris);cursor:pointer;
}
.lien-cases:hover{border-color:var(--c1);color:var(--c1)}
.compte-cases{margin-left:4px !important;font-size:12px;font-weight:700}

/* Le détail du prix d'une ligne du panier, avec ses pointillés */
.detail-prix{list-style:none;margin:12px 0 0;padding:0;max-width:600px}
.detail-prix li{display:flex;align-items:baseline;gap:6px;font-size:14px;padding:3px 0}
.detail-prix li span{color:var(--gris);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-prix li i{flex:1 1 30px;min-width:24px;border-bottom:2px dotted #b9b4d0;transform:translateY(-4px)}
.detail-prix li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.detail-prix li.sous-total{margin-top:4px;padding-top:7px;border-top:2px solid var(--ligne)}
.detail-prix li.sous-total span{color:var(--encre);font-weight:800}
.detail-prix li.sous-total b{font-size:15px}

/* Chercher dans une longue liste de couleurs */
.chercher-couleur{margin-left:auto}
.chercher-couleur input{
  padding:7px 12px;border:2px solid var(--ligne);border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;min-width:170px;background:#fff;
  text-transform:none;letter-spacing:0;
}
.chercher-couleur input:focus{outline:none;border-color:var(--c1)}
/* Ce que le fournisseur n'a plus */
.epuise-etiq{display:none}
.choix.epuisee{opacity:.45}
.choix.epuisee span{text-decoration:line-through;text-decoration-color:rgba(179,13,34,.7)}
.choix.epuisee .epuise-etiq{
  display:block;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;color:#b30d22;text-decoration:none;margin-top:2px;
}
.tuile-couleur.epuisee{opacity:.42;cursor:not-allowed}
.tuile-couleur.epuisee .tuile{filter:grayscale(.6)}
.etiq-epuise{
  position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;
  background:#b30d22;color:#fff;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}

/* Quoi descendre du catalogue */
.filtre-photos{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filtre-photos label{display:flex;gap:7px;align-items:center;font-weight:700;font-size:14px}

/* Barre d'avancement d'une longue importation */
.barre-marche{
  height:12px;border-radius:999px;background:#eceaf6;overflow:hidden;
  border:2px solid var(--ligne);
}
.barre-marche span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  transition:width .25s ease;
}

/* L'inventaire du fournisseur */
.tableau-stock{width:100%;border-collapse:collapse;font-size:14px}
.tableau-stock th,.tableau-stock td{padding:7px 10px;text-align:center;border-bottom:1px solid var(--ligne)}
.tableau-stock th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--c1)}
.tableau-stock td:first-child,.tableau-stock th:first-child{text-align:left;font-weight:800}
.tableau-stock td.rupture{background:#ffe9ec;color:#b30d22;font-weight:900}
.tableau-stock td.bas{background:#fff6e0;color:#8a5a00;font-weight:900}
.tableau-stock tr.pas-chez-moi{opacity:.55}
.tableau-stock tr.pas-chez-moi em{font-style:normal;font-size:12px;font-weight:600;color:var(--gris)}
.rupture-p{color:#b30d22;font-weight:800}
.bas-p{color:#8a5a00;font-weight:800}

/* Les photos d'une couleur, vues depuis la fiche du vêtement */
.pastille-photos{border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:800}
.pastille-photos:hover{filter:brightness(.94)}
.grille-photos-couleur{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grille-photos-couleur figure{margin:0}
.grille-photos-couleur img{
  width:100%;aspect-ratio:4/5;object-fit:contain;display:block;background:#fff;
  border:2px solid var(--ligne);border-radius:12px;
}
.grille-photos-couleur figcaption{
  font-size:12px;font-weight:700;color:var(--gris);text-align:center;margin-top:6px;
}

/* Importation d'un modèle S&S */
.rangee-ss{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:8px;
  border:2px solid var(--ligne);border-radius:12px;cursor:pointer}
.rangee-ss:hover{border-color:var(--c1)}
.rangee-ss span{display:flex;flex-direction:column;gap:2px}
.rangee-ss em{font-style:normal;font-size:13px;color:var(--gris)}

/* Vignette actuelle à côté du champ de téléversement */
.rangee-vignette{display:flex;gap:11px;align-items:flex-start}
.vignette-actuelle{
  flex:0 0 auto;width:62px;height:62px;border-radius:12px;overflow:hidden;
  border:2px solid var(--ligne);background:linear-gradient(135deg,#fff0f7,#efe9ff 55%,#e2fbf6);
  display:grid;place-items:center;font-size:27px;
}
.vignette-actuelle img{width:100%;height:100%;object-fit:cover;display:block}

/* Réglage de l'étiquette dans la fiche d'un vêtement */
.rangee-badge{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px}
.rangee-badge input[type=color]{width:46px;height:34px;padding:2px;border:2px solid var(--ligne);border-radius:10px;background:#fff}
.rangee-badge input[type=color]:disabled{opacity:.4;cursor:not-allowed}
.mini-coche{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700;
  color:var(--gris);text-transform:none;letter-spacing:0}
.apercu-badge{position:static;box-shadow:none}
.apercu-badge.vide{background:#eceaf6;color:var(--gris);text-transform:none;font-weight:700}
fieldset{border:2px solid var(--ligne);border-radius:16px;padding:16px;margin:0 0 18px}
legend{font-weight:900;padding:0 8px;color:var(--c1);text-transform:uppercase;font-size:13px;letter-spacing:.05em}

/* Sections repliables d'un formulaire */
fieldset.pliable > legend{cursor:pointer;user-select:none;display:flex;align-items:center;gap:7px;border-radius:8px}
fieldset.pliable > legend:hover{background:#f2f0ff}
fieldset.pliable > legend:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.fleche-section{
  display:inline-block;width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:rotate(90deg);transition:transform .15s ease;
}
fieldset.replie .fleche-section{transform:rotate(0deg)}
fieldset.replie{padding-top:10px;padding-bottom:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .fiche{grid-template-columns:1fr}
  .fiche-visuel{position:static;aspect-ratio:16/10;font-size:100px}
  .scenes{position:static}
}
@media (max-width:460px){
  .scenes.duo{gap:8px}
  .etiquette-vue{font-size:10px;padding:3px 8px}
}
@media (max-width:560px){
  .conteneur{padding:18px 14px 60px}
  .entete-in{padding:12px 14px}
  .entete nav a{padding:8px 12px;font-size:14px}
  .marque{font-size:17px}
  .banniere{padding:22px 20px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
  .produit .visuel{font-size:50px}
  .table-defile{overflow-x:auto}
  /* Deux colonnes : le prix et le bouton ne tiennent plus côte à côte */
  .pied-produit{flex-direction:column;align-items:stretch;gap:9px}
  .pied-produit .btn{flex:0 0 auto;width:100%;padding:11px 16px;font-size:15px;
                     justify-content:center;text-align:center}
  .prix{font-size:19px;white-space:nowrap}
  .prix small{white-space:normal}
}
@media print{
  .entete,.btn,.filtres{display:none}
  body{background:#fff}
}

/* Séparateur « ou » sur la page de connexion */
.separateur{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--gris);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.separateur:before,.separateur:after{content:"";flex:1;height:2px;background:var(--ligne)}

/* Page « mon compte » : inscription + connexion côte à côte */
.grille-comptes{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}
@media (max-width:820px){ .grille-comptes{grid-template-columns:1fr} }

/* Bandeau « compte requis » sur la fiche produit */
.avis-compte{
  border-radius:16px;padding:15px 17px;margin-bottom:18px;
  background:linear-gradient(135deg,#fff6e0,#ffe9f2);
  border:2px solid #ffd9a8;display:flex;gap:13px;align-items:center;
}
.avis-compte .ico{font-size:27px;flex:0 0 auto}
.avis-compte b{display:block;margin-bottom:2px}
.avis-compte p{margin:0;font-size:14px;color:var(--gris)}

/* ============================================================
   APERÇU VIVANT DU VÊTEMENT
   ============================================================ */
/* Une ou deux vues côte à côte */
.scenes{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;position:sticky;top:96px}
.scenes.duo{grid-template-columns:1fr 1fr}
.scene-vue{
  position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--ombre);
  background:linear-gradient(135deg,#fdfbff,#f2eeff 55%,#e6fbf6);
  display:grid;place-items:center;line-height:0;
}
.scene-vue:not(.avec-photo){aspect-ratio:1/1;padding:18px}
.scenes.duo .scene-vue:not(.avec-photo){padding:10px}
.etiquette-vue{
  position:absolute;left:10px;top:10px;padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.88);color:var(--encre);
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;line-height:1.4;
}

.mannequin{width:100%;height:100%;overflow:visible;--tissu:#cccccc;--tissu2:#bbb;--contour:#888;--couture:#777}
.mannequin .tissu{fill:var(--tissu);stroke:var(--contour);stroke-width:3;stroke-linejoin:round}
.mannequin .capuchon,.mannequin .visiere{fill:var(--tissu2);stroke:var(--contour);stroke-width:3;stroke-linejoin:round}
.mannequin .traits{fill:none;stroke:var(--couture);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.mannequin .traits .gros{stroke-width:3.5}
.mannequin .traits .plein{fill:var(--couture);stroke:none}
.mannequin .broderies text{paint-order:stroke;dominant-baseline:auto}

.vues{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.vue-btn{
  padding:8px 16px;border-radius:999px;border:2px solid var(--ligne);background:#fff;
  font-weight:800;font-size:14px;cursor:pointer;transition:.15s;
}
.vue-btn:hover{border-color:var(--c1);color:var(--c1)}
.vue-btn.actif{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
.legende-vue{font-size:13px;color:var(--gris);margin-left:4px}
.photo-reelle{padding:0}
.photo-reelle img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){ .vues{justify-content:center} }

/* ============================================================
   PHOTOS DU FOURNISSEUR (admin)
   ============================================================ */
.depose{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:38px 20px;border:3px dashed var(--ligne);border-radius:20px;cursor:pointer;
  background:#fbfaff;transition:.15s;
}
.depose:hover,.depose.survol{border-color:var(--c1);background:#fff}
.depose.survol{transform:scale(1.01)}
.depose-ico{font-size:40px}
.depose b{font-size:17px}

.rangee-couleur{display:flex;gap:18px;align-items:flex-start}
.rangee-couleur .grille-photos{flex:1;min-width:0}
.stock-couleur{
  flex:0 0 190px;border:2px solid var(--ligne);border-radius:16px;
  padding:13px 15px;background:#fbfaff;
}
.stock-couleur h4{
  margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c1);
}
.liste-stock{list-style:none;margin:0;padding:0}
.liste-stock li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 9px;border-radius:9px;font-size:14px;font-weight:700;
}
.liste-stock li + li{margin-top:3px}
.liste-stock li b{font-variant-numeric:tabular-nums}
.liste-stock li.rupture{background:#ffe9ec;color:#b30d22}
.liste-stock li.bas{background:#fff6e0;color:#8a5a00}
.liste-stock li.inconnu{color:var(--gris);opacity:.7}
@media (max-width:820px){
  .rangee-couleur{flex-direction:column}
  .stock-couleur{flex:1 1 auto;width:100%}
}

.grille-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px}
.carte-photo{border:2px solid var(--ligne);border-radius:16px;overflow:hidden;background:#fff}
.apercu-photo{aspect-ratio:4/5;background:#fff;position:relative}
.apercu-photo img{width:100%;height:100%;object-fit:contain}
.reglages-photo{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid var(--ligne);align-items:center}
.reglages-photo select{flex:1;min-width:84px;padding:6px 8px;border:2px solid var(--ligne);border-radius:9px;font-size:13px}
.reglages-photo .mini{display:flex;gap:5px;align-items:center;font-size:13px;font-weight:700}
.actions-photo{display:flex;gap:8px;padding:0 10px 10px;align-items:center;flex-wrap:wrap}
.actions-photo form{margin:0}
/* Les boutons gardent leur largeur naturelle et passent à la ligne
   plutôt que de se faire couper. */
.actions-photo .btn{flex:0 1 auto;white-space:nowrap}

/* Fenêtre de réglage des emplacements */
.voile{
  position:fixed;inset:0;z-index:90;background:rgba(20,12,45,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);
}
.fenetre{
  background:#fff;border-radius:22px;padding:22px;max-width:980px;width:100%;
  max-height:92vh;overflow:auto;box-shadow:var(--ombre-forte);
}
.editeur{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:start}
.scene{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:2px solid var(--ligne);user-select:none;touch-action:none}
.scene img{width:100%;display:block}
.zone{
  position:absolute;border:2.5px dashed var(--c1);border-radius:6px;cursor:move;
  background:color-mix(in srgb,var(--c1) 12%,transparent);touch-action:none;
}
.zone .etiquette{
  position:absolute;top:-11px;left:-2px;font-size:10px;font-weight:900;white-space:nowrap;
  background:var(--c1);color:#fff;padding:2px 6px;border-radius:999px;
}
.zone .poignee{
  position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;border-radius:50%;
  background:var(--c1);border:2px solid #fff;cursor:nwse-resize;
}
.liste-zones{display:flex;flex-direction:column;gap:7px}
.ligne-zone{border:2px solid var(--ligne);border-radius:11px;padding:8px 10px;font-size:13px}
.ligne-zone code{display:block;color:var(--gris);font-size:11px}
@media (max-width:820px){ .editeur{grid-template-columns:1fr} }

/* Photo réelle du vêtement dans l'aperçu client */
.scene-vue.avec-photo{display:block;padding:0}
.scene-vue.avec-photo>img{width:100%;height:auto;display:block}
.calque{position:absolute;inset:0;pointer-events:none}
.broderie{position:absolute;display:flex;align-items:center;justify-content:center}
.broderie img{width:100%;height:100%;object-fit:contain}
.broderie-texte{
  font-weight:700;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.broderie-vide{
  border:2.5px dashed currentColor;border-radius:8px;font-size:12px;font-weight:900;opacity:.85;
}
.bascule-porte{margin-left:4px}

/* Fiche technique du vêtement (côté client) */
.fiche-tech{
  border:2px solid var(--ligne);border-radius:16px;padding:0 15px;margin-bottom:22px;background:#fbfaff;
}
.fiche-tech summary{
  cursor:pointer;padding:13px 0;font-weight:800;list-style:none;display:flex;align-items:center;gap:8px;
}
.fiche-tech summary::-webkit-details-marker{display:none}
.fiche-tech summary:after{content:"▾";margin-left:auto;color:var(--gris);transition:transform .15s}
.fiche-tech[open] summary:after{transform:rotate(180deg)}
.fiche-tech[open]{background:#fff;padding-bottom:14px}
.fiche-tech h4{margin:12px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--c1)}
.fiche-tech .note{margin:0}
.liste-carac{padding-left:18px}
.liste-carac li{margin-bottom:3px}
table.mesures th,table.mesures td{padding:7px 9px;font-size:14px;text-align:center;white-space:nowrap}
table.mesures tr td:first-child,table.mesures tr th:first-child{text-align:left;font-weight:700}
table.mesures tr:nth-child(even){background:#fbfaff}

/* Pastilles de couleur de fil */
.couleurs.fils span{width:36px;height:36px}
.couleurs.fils{margin-top:4px}

/* Broderie comprise dans le modèle du client */
.base-incluse{
  border:2px solid #bde9cd;background:#f2fbf6;border-radius:16px;padding:14px 16px;margin:0 0 20px;
}
.base-incluse b{color:#14713a}
.base-incluse ul{margin:7px 0 6px;padding-left:20px;font-size:15px}
.base-incluse li{margin-bottom:3px}
.base-incluse .note{font-size:13px;margin:0}
.badge-modele{background:linear-gradient(135deg,#0f7b4f,#00c2a8);box-shadow:0 6px 16px rgba(0,194,168,.35)}

/* Technique de décoration (broderie, transfert…) */
.etiquette-tech{
  display:inline-block;padding:2px 9px;border-radius:999px;vertical-align:1px;
  background:#efe9ff;color:#4b2a9c;font-size:11px;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;margin-left:5px;
}

/* Choix du style de caractère */
.polices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.police span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:12px 10px;border-radius:14px;border:2px solid var(--ligne);background:#fbfaff;
  cursor:pointer;transition:.15s;text-align:center;
}
.police span em{font-style:normal;font-size:19px;line-height:1.25;color:var(--encre)}
.police span small{font-size:11px;font-weight:800;color:var(--gris)}
.police span:hover{border-color:var(--c1)}
.police input:checked + span{
  border-color:transparent;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 20px color-mix(in srgb,var(--c1) 35%,transparent);
}
.police input:checked + span em,.police input:checked + span small{color:#fff}

/* Réglage d'une option dans un modèle de client */
.reglage{margin-bottom:14px}
.reglage.eteint{opacity:.55}
.entete-reglage{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.entete-reglage>div:first-child{flex:1;min-width:180px}
.trois-modes{display:flex;gap:6px;flex-wrap:wrap}
.trois-modes .choix span{padding:7px 13px;border-radius:11px;font-size:13px;font-weight:800}
.reglage .zone-base,.reglage .zone-option,.reglage .zone-tech{margin-top:10px}
.cases-valeurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px;margin-top:6px}
.case-valeur{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border:2px solid var(--ligne);
  border-radius:11px;background:#fff;font-size:14px;font-weight:700;cursor:pointer;
}
.case-valeur:has(input:checked){border-color:var(--c1);background:#fbfaff}
.case-valeur small{margin-left:auto;font-size:12px;color:var(--gris)}
.case-valeur em{font-style:normal;font-size:16px}
.case-valeur .pt{flex:0 0 auto;width:18px;height:18px}

/* Palette de fils */
.grille-fils{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.carte-fil{
  display:flex;gap:10px;align-items:center;padding:10px;border:2px solid var(--ligne);
  border-radius:14px;background:#fff;
}
.carte-fil.eteint{opacity:.5}
.carte-fil>input[type=color]{width:46px;height:46px;flex:0 0 auto;padding:2px;border:2px solid var(--ligne);border-radius:12px;background:#fff}
.infos-fil{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.infos-fil input{width:100%;padding:6px 9px;border:2px solid var(--ligne);border-radius:9px;font-size:14px}
.infos-fil input:last-child{font-size:12px;color:var(--gris)}
.pied-fil{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.pied-fil label{display:flex;gap:5px;align-items:center;font-size:12px;font-weight:700;white-space:nowrap}
.pied-fil input[type=number]{width:52px;padding:4px 6px;border:2px solid var(--ligne);border-radius:8px;font-size:12px}
.ordre-fil{color:var(--gris);font-weight:700}

/* Achat : chez qui, quelle bobine, commandée quand */
.carte-fil{flex-wrap:wrap}
.achat-fil{
  flex:1 0 100%;display:flex;gap:6px;flex-wrap:wrap;
  padding-top:8px;border-top:1px dashed var(--ligne);
}
.achat-fil select,.achat-fil input{
  padding:5px 7px;border:2px solid var(--ligne);border-radius:9px;
  font-size:12px;color:var(--gris);background:#fff;min-width:0;
}
.achat-fil select{flex:1 1 96px}
.achat-fil input[type=text]{flex:1 1 66px}
.achat-fil input[type=date]{flex:1 1 118px}

/* Bandeau d'aperçu administrateur */
.bandeau-apercu{
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  border-radius:16px;padding:13px 17px;margin-bottom:18px;
  background:#efe9ff;border:2px solid #cdbcff;
}
.bandeau-apercu .ico{font-size:24px}
.bandeau-apercu div{flex:1;min-width:200px}
.bandeau-apercu b{display:block;color:#4b2a9c}
.bandeau-apercu p{margin:2px 0 0;font-size:13px;color:var(--gris)}

/* ============================================================
   ADMIN — MENU EN COLONNE, À GAUCHE
   Aucune page n'est modifiée : la barre du haut est simplement
   repositionnée en colonne sur le côté.
   ============================================================ */
@media (min-width:901px){
  .admin{padding-left:238px}
  .admin .ruban{
    position:fixed;left:0;top:0;width:238px;height:6px;z-index:42;
  }
  .admin .entete{
    position:fixed;left:0;top:0;bottom:0;width:238px;z-index:41;
    overflow-y:auto;border-radius:0;box-shadow:4px 0 22px rgba(27,20,54,.18);
    background:linear-gradient(170deg,#1b1436,#3a2d6b 60%,#2a2150);
  }
  .admin .entete-in{
    flex-direction:column;align-items:stretch;gap:6px;
    padding:22px 14px 18px;max-width:none;margin:0;min-height:100%;
  }
  .admin .marque{
    margin-bottom:14px;padding:0 6px;gap:11px;
  }
  .admin .entete nav{
    margin-left:0;flex-direction:column;align-items:stretch;gap:4px;width:100%;
  }
  .admin .entete nav a{
    border-radius:12px;padding:11px 14px;text-align:left;font-size:15px;
  }
  .admin .entete nav a.actif{background:#fff;color:#2a2150}

  /* Les deux dernières entrées se détachent du reste */
  .admin .entete nav a:nth-last-child(2){margin-top:14px}
}

/* Sur petit écran, le menu redevient une barre en haut */
@media (max-width:900px){
  .admin{padding-left:0}
}

/* Les inscrits dépliés sous la ligne d'un client */
.bouton-membres{border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.bouton-membres[disabled]{opacity:.55;cursor:default}
.bouton-membres .fleche{transition:transform .15s;font-size:10px}
.bouton-membres.ouvert .fleche{transform:rotate(180deg)}
.rangee-membres>td{background:#fbfaff;padding:0}
.bloc-membres{padding:14px 16px;border-left:4px solid var(--c1)}
.table-membres{width:100%}
.table-membres th{font-size:11px}
.table-membres td,.table-membres th{padding:8px 10px;border-bottom:1px solid var(--ligne)}
.table-membres tr:last-child td{border-bottom:0}

/* Fiche d'un inscrit, modifiable dans le dépliant */
.fiche-membre{
  border:2px solid var(--ligne);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:#fff;
}
.fiche-membre .champ{margin-bottom:8px}
.fiche-membre .champ label{font-size:11px}
.fiche-membre .champ input{padding:8px 11px;font-size:14px}
.pied-membre{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:4px}
.pied-membre .mini{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700}
.pied-membre .retirer{margin-left:auto;color:#c01027}

/* ============================================================
   COULEURS EN TUILES — le vêtement teinté et son nom
   ============================================================ */
.tuiles-couleurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.tuile-couleur{position:relative;display:block}
.tuile-couleur input{position:absolute;opacity:0;pointer-events:none}
.tuile-couleur .tuile{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:2px solid var(--ligne);border-radius:14px;background:#fff;
  cursor:pointer;transition:border-color .15s, box-shadow .15s, transform .12s;
}
.tuile-couleur .tuile:hover{border-color:var(--c1);transform:translateY(-1px)}
.tuile-couleur .mini-vetement,
.tuile-couleur .tuile img{
  width:34px;height:38px;flex:0 0 auto;object-fit:cover;border-radius:7px;background:#fff;
}
.tuile-couleur .tuile em{
  font-style:normal;font-size:13.5px;font-weight:700;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tuile-couleur .coche{
  margin-left:auto;flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#fff;background:var(--c1);
  opacity:0;transform:scale(.6);transition:.15s;
}
.tuile-couleur input:checked + .tuile{
  border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent);
}
.tuile-couleur input:checked + .tuile .coche{opacity:1;transform:scale(1)}
@media (max-width:560px){
  .tuiles-couleurs{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px}
  .tuile-couleur .tuile{padding:7px 9px;gap:8px}
  .tuile-couleur .tuile em{font-size:12.5px}
}

/* ============================================================
   CE QUE LE MEMBRE AJOUTE
   ============================================================ */
.ajouts{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
/* un display: sur une classe l'emporterait sur l'attribut hidden */
[hidden]{display:none !important}
.carte-ajout{
  display:flex;gap:11px;align-items:flex-start;
  border:2px solid var(--ligne);border-radius:16px;padding:12px 13px;background:#fff;
}
.carte-ajout.verrouille{background:#f2fbf6;border-color:#bde9cd}
.carte-ajout .genre{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:#efe9ff;color:#4b2a9c;font-weight:900;font-size:14px;
}
.carte-ajout.verrouille .genre{background:#dff3e6;color:#14713a}
.corps-ajout{flex:1;min-width:0}
.corps-ajout b{display:block;font-size:15px;margin-bottom:2px}
.corps-ajout .aide{margin:0 0 7px}
.corps-ajout .choix-grille{margin-top:4px}
.valeur-ajout{font-size:14px;color:var(--gris);font-weight:700}
.champ-ajout{
  width:100%;padding:10px 13px;border:2px solid var(--ligne);border-radius:12px;
  font-weight:700;margin-top:2px;
}
.champ-ajout:focus{outline:none;border-color:var(--c1)}
.prix-ajout{display:inline-block;margin-top:5px;font-size:13px;font-weight:900;color:var(--turquoise)}
.cote-ajout{
  flex:0 0 auto;align-self:center;font-size:10px;font-weight:900;letter-spacing:.07em;
  color:var(--gris);white-space:nowrap;
}
.retirer-ajout{
  flex:0 0 auto;align-self:center;border:0;background:none;cursor:pointer;
  font-size:16px;opacity:.5;padding:4px;border-radius:8px;
}
.retirer-ajout:hover{opacity:1;background:#ffe9ec}

.boutons-ajout{display:flex;gap:8px;flex-wrap:wrap}
.boutons-ajout .bouton-ajout{font-weight:800}
.boutons-ajout .sup{font-size:12px;opacity:.7;font-style:normal;margin-left:3px}

/* Ce que le membre peut ajouter : une invitation, pas un bouton timide */
.offres-deco{margin-top:14px}
.titre-offres{
  margin:0 0 9px;font-size:12px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c2);
}
.liste-offres{display:grid;gap:9px}
.offre-deco{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;border-radius:16px;cursor:pointer;font:inherit;
  border:2px dashed var(--c2);
  background:linear-gradient(135deg,#f7f3ff,#fff5fb);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.offre-deco:hover{
  transform:translateY(-2px);border-style:solid;border-color:var(--c1);
  box-shadow:0 10px 24px rgba(123,47,247,.18);
}
.offre-plus{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c2),var(--c1));color:#fff;
  font-size:20px;font-weight:900;line-height:1;
}
.offre-corps{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.offre-corps b{font-size:15px;color:var(--encre,#1b1436)}
.offre-corps em{font-style:normal;font-size:12.5px;color:var(--gris)}
.offre-prix{
  flex:0 0 auto;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:900;
  background:#fff;border:2px solid var(--c2);color:var(--c2);white-space:nowrap;
}

/* Bibliothèque d'images d'un client */
.grille-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}
.carte-image{border:2px solid var(--ligne);border-radius:14px;padding:10px;text-align:center;background:#fff}
.apercu-image{
  height:88px;display:grid;place-items:center;background:
    linear-gradient(45deg,#f2f2f6 25%,transparent 25%,transparent 75%,#f2f2f6 75%) 0 0/16px 16px,
    linear-gradient(45deg,#f2f2f6 25%,#fff 25%,#fff 75%,#f2f2f6 75%) 8px 8px/16px 16px;
  border-radius:10px;margin-bottom:8px;
}
.apercu-image img{max-width:100%;max-height:82px;object-fit:contain}
.carte-image b{display:block;font-size:13px;margin-bottom:7px;word-break:break-word}

/* Constructeur de décoration */
.deux-choix,.trois-modes{display:flex;gap:8px;flex-wrap:wrap}
.deux-choix .choix span{
  display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:14px;
  border:2px solid var(--ligne);background:#fbfaff;font-weight:800;cursor:pointer;transition:.15s;
}
.deux-choix .choix span em{font-style:normal;font-size:12px;font-weight:600;color:var(--gris)}
.deux-choix .choix span:hover{border-color:var(--c1)}
.deux-choix .choix input:checked + span{
  border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));
}
.deux-choix .choix input:checked + span em{color:rgba(255,255,255,.8)}
.choix-image{position:relative;cursor:pointer;transition:.15s}
.choix-image input{position:absolute;opacity:0;pointer-events:none}
.choix-image:hover{border-color:var(--c1)}
.choix-image:has(input:checked){
  border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent);
}
.si-image,.si-texte,.si-payant{margin-top:12px}
.carte .mini{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}

/* Décorations sur la fiche produit */
.carte-ajout.deco .sous-titre-deco{
  margin:10px 0 5px;font-size:11px;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris);
}
.carte-ajout.deco .apercu-deco{
  max-height:52px;max-width:110px;object-fit:contain;margin:4px 0;
  border-radius:8px;background:#fff;
}
.carte-ajout.deco .note{font-weight:600;font-size:12px}

/* Texte imposé par l'atelier : montré, jamais demandé */
.texte-impose{
  margin:4px 0 0;font-size:20px;font-weight:700;line-height:1.2;
  padding:7px 12px;border-radius:10px;background:#f2fbf6;display:inline-block;
}

/* Compris dans le prix : vert plus soutenu, et toujours en tête */
.carte-ajout.compris{
  background:#e4f6ec;border-color:#9fd9b7;
}
.carte-ajout.compris .genre{background:#c6ebd5;color:#0f5d31}
.carte-ajout.compris > .corps-ajout > b{color:#0f5d31}
.carte-ajout.compris .note{color:#2f7a52}
.carte-ajout.compris .texte-impose{background:rgba(255,255,255,.7)}
.carte-ajout.compris .sous-titre-deco{color:#3d8a63}

/* En option : teinte mauve, pour qu'on les distingue d'un coup d'œil */
.carte-ajout.en-option{
  background:#f6f3ff;border-color:#cfc0f5;
}
.carte-ajout.en-option .genre{background:#e2d8fb;color:#4b2a9c}

/* Compteur de caractères sous le champ de texte */
.compteur-car{
  margin:5px 0 0;font-size:12px;font-weight:700;color:var(--gris);text-align:right;
}
.compteur-car.plein{color:#c01027}

/* Champ de montant avec son signe de dollar */
.champ-montant{position:relative;display:inline-block}
.champ-montant input{padding-right:24px !important;width:104px}
.champ-montant em{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-style:normal;font-weight:800;color:var(--gris);pointer-events:none;font-size:13px;
}
.effet-prix{font-size:12px;font-weight:700;color:var(--turquoise)}

/* Texte sur plusieurs lignes */
.lignes-texte{display:flex;flex-direction:column;gap:7px}
.une-ligne .compteur-car{margin-top:3px}
.broderie-texte{text-align:center}

/* Guide des emplacements */
.lien-guide{
  margin-left:auto;border:0;background:none;cursor:pointer;font:inherit;
  font-size:12px;font-weight:800;color:var(--c1);text-transform:none;letter-spacing:0;
}
.lien-guide:hover{text-decoration:underline}
.fenetre-guide{max-width:1200px}
.image-guide{width:100%;height:auto;border-radius:12px;border:2px solid var(--ligne);background:#fff}
.code-zone{
  display:inline-block;min-width:34px;padding:1px 6px;border-radius:6px;margin-right:5px;
  background:#e0f0f1;color:#0e6e76;font-size:11px;font-weight:900;text-align:center;
}

/* La corbeille monte au niveau du titre de la décoration */
.carte-ajout .retirer-ajout{align-self:flex-start;margin-top:-2px}
/* Le lien du guide se range à droite de « Emplacement » */
.sous-titre-deco{display:flex;align-items:center;gap:10px}
.sous-titre-deco .lien-guide{margin-left:auto}

/* --- Les clients en cartes : un carré par client, plus le carré d'ajout --- */
.grille-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:6px}
.carte-client{
  display:flex;flex-direction:column;background:#fff;border:2px solid var(--ligne);
  border-radius:20px;padding:16px;position:relative;overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.carte-client:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,20,54,.10)}
.carte-client .bande{position:absolute;inset:0 0 auto 0;height:6px}
.carte-client .tete{display:flex;gap:11px;align-items:center;margin:6px 0 10px}
.carte-client .ecusson{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#fff;border:2px solid var(--ligne);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;font-size:19px;color:#fff;
}
.carte-client .ecusson img{width:100%;height:100%;object-fit:contain;padding:4px}
.carte-client h3{margin:0;font-size:17px;line-height:1.25;word-break:break-word}
.carte-client .chiffres{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--gris);font-weight:600}
.carte-client .chiffres b{color:var(--encre);font-size:15px;display:block;line-height:1.1}
.carte-client .liens{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.carte-client .liens .btn{width:100%;justify-content:center;text-align:center}
.carte-client .rangee-liens{display:flex;gap:7px}
.carte-client .rangee-liens .btn{flex:1}
.carte-ajout{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:190px;border:3px dashed var(--ligne);border-radius:20px;background:#fff;
  color:var(--gris);font-weight:800;font-size:16px;text-decoration:none;
  transition:border-color .12s ease, color .12s ease, transform .12s ease;
}
.carte-ajout:hover{border-color:var(--rose);color:var(--rose);transform:translateY(-2px)}
.carte-ajout .plus{font-size:38px;line-height:1}
.bulle{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;margin-left:5px;border-radius:999px;font-size:12px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--rose),var(--violet));color:#fff;
}
.btn-clair .bulle{box-shadow:0 0 0 2px #fff}
.bulle.vide{background:var(--ligne);color:var(--gris)}

/* --- La répartition du stock par entrepôt, sous la quantité --- */
.entrepots{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.entrepot{
  display:inline-flex;gap:4px;align-items:baseline;padding:2px 8px;border-radius:999px;
  background:var(--fond);border:1px solid var(--ligne);font-size:12px;font-weight:700;color:var(--gris);
}
.entrepot b{color:var(--encre)}
.entrepot.assez{background:#eaf9f2;border-color:#bfe9d5;color:#1c7a4f}
.entrepot.assez b{color:#14603c}

/* --- Franco de port : où en est la commande au fournisseur --- */
.franco{margin-top:18px;padding:14px 16px;border:2px solid #ffd9a8;background:#fff6e0;border-radius:16px}
.franco.atteint{border-color:#bfe9d5;background:#eaf9f2}
.franco p{margin:0;font-size:15px}
.franco .jauge{height:10px;border-radius:999px;background:#fff;border:1px solid var(--ligne);overflow:hidden;margin-bottom:10px}
.franco .jauge span{display:block;height:100%;background:linear-gradient(90deg,var(--orange,#ff9f1c),var(--rose))}
.franco.atteint .jauge span{background:linear-gradient(90deg,#39c98a,#1c7a4f)}

/* --- Ajouter un article au bon de commande du fournisseur --- */
.ajout-libre{margin-top:18px;padding:14px 16px;border:2px solid var(--ligne);border-radius:16px;background:#fbfaff}
.ajout-libre summary{cursor:pointer;font-weight:800;font-size:16px}
.ajout-libre .note{margin:8px 0 0}
.form-libre{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.form-libre .champ{margin:0;min-width:150px}
.form-libre select,.form-libre input{min-width:150px}
.trouvaille{margin-top:14px;padding:13px 15px;border:2px solid #bfe9d5;background:#eaf9f2;border-radius:14px}
.trouvaille code{background:#fff;padding:2px 7px;border-radius:7px;border:1px solid var(--ligne)}

/* --- Le nuancier d'un article cherché chez le fournisseur --- */
.nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-bottom:14px}
.pastille-coul{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 7px;cursor:pointer;
  background:#fff;border:2px solid var(--ligne);border-radius:14px;font:inherit;color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.pastille-coul:hover{transform:translateY(-2px)}
.pastille-coul.choisie{border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,46,136,.14)}
.pastille-coul img{width:62px;height:62px;object-fit:contain}
.pastille-coul .teinte{width:46px;height:46px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pastille-coul b{font-size:12.5px;line-height:1.2;text-align:center;word-break:break-word}
.pastille-coul .note{margin:0;font-size:11.5px}

.grandeurs-coul{background:#fff;border:2px solid var(--ligne);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.tete-coul{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tete-coul .teinte{width:26px;height:26px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.grandeurs-coul table{width:auto;min-width:100%}
.grandeurs-coul th{white-space:nowrap}
.grandeurs-coul td{text-align:center}
.grandeurs-coul td.maigre{color:var(--rose);font-weight:800}
.grandeurs-coul input[type=number]{width:74px;padding:8px 9px;text-align:center}
.pied-coul{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.total-coul{margin:0 0 10px;font-size:15px}

/* --- Atelier : la case de scan et les étiquettes de technique --- */
.scan{display:flex;gap:9px;align-items:center;flex:1;min-width:240px;max-width:460px}
.scan input{
  width:100%;padding:12px 15px;border:2px solid var(--ligne);border-radius:14px;background:#fff;
  font:inherit;font-weight:600;
}
.scan input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,46,136,.14)}
.filtres .bulle{margin-left:6px}

/* --- La personnalisation, une information par étiquette --- */
.deco-ligne{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 6px;font-size:13.5px;color:var(--encre)}
.deco-ligne:last-child{margin-bottom:0}
.deco-ligne b{font-weight:700}
.deco-ou{color:var(--gris)}
.deco-prix{
  padding:1px 8px;border-radius:999px;font-size:12px;font-weight:800;
  background:#fff0f6;color:#a3005c;
}
.deco-prix.compris{background:var(--fond);color:var(--gris)}

/* --- Le choix du mode de livraison, côté client --- */
.modes-livraison{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mode{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;cursor:pointer;
  border:2px solid var(--ligne);border-radius:16px;background:#fff;
  transition:border-color .12s ease, background .12s ease;
}
.mode:hover{border-color:var(--c1,var(--rose))}
.mode.choisi{border-color:var(--c1,var(--rose));background:#fffafd}
.mode input{margin-top:3px;flex:0 0 auto;width:19px;height:19px;accent-color:var(--c1,var(--rose))}
.mode > span{display:block;flex:1;min-width:0}
.mode .haut{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.mode b{font-size:16px}
.mode .cout{font-weight:800;font-size:16px;white-space:nowrap}
.mode em{display:block;font-style:normal;color:var(--gris);font-size:13.5px;margin-top:3px;line-height:1.5}

/* --- Les modes de livraison dans l'admin --- */
.rangee-liv{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:12px 0;border-bottom:1px solid var(--ligne)}
.rangee-liv .champ{margin:0}
.rangee-liv .champ.large{flex:1;min-width:190px}

/* --- Les logos de marque : discrets sur la vignette, nets sur la fiche --- */
.tete-vignette{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
.logo-marque{width:auto;max-width:112px;object-fit:contain;flex:0 0 auto;display:block}
.grille-marques{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.carte-marque{border:2px solid var(--ligne);border-radius:18px;padding:14px;background:#fff}
.cadre-logo{
  display:flex;align-items:center;justify-content:center;height:78px;margin-bottom:12px;
  background:#fbfaff;border:1px solid var(--ligne);border-radius:13px;padding:10px;
}
.cadre-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pied-marque{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:10px;
             padding-top:10px;border-top:1px solid var(--ligne)}
/* Le cadre du logo dans la fiche d'un vêtement, à côté de la vignette */
.rangee-vignette .cadre-logo{width:104px;height:74px;flex:0 0 104px;margin:0}

/* --- Le bandeau de marque, pleine largeur au-dessus de la photo --- */
.bandeau-marque{
  display:flex;align-items:center;justify-content:center;
  padding:11px 14px;background:#fff;border-bottom:1px solid var(--ligne);
}
.bandeau-marque .logo-marque{width:100%;max-width:230px;max-height:64px;height:auto}
.bandeau-marque.grand{padding:22px 20px;border-bottom:0;border-radius:18px;
                      background:#fbfaff;border:1px solid var(--ligne);margin-bottom:14px}
.bandeau-marque.grand .logo-marque{max-width:320px;max-height:88px}

/* --- La calculette du prix de vente d'un modèle --- */
.calculette{border:2px solid var(--ligne);border-radius:16px;padding:14px 16px;background:#fbfaff}
.calculette summary{cursor:pointer;font-weight:800;font-size:16px}
.table-calcul{width:100%;border-collapse:collapse;margin-top:12px}
.table-calcul th{text-align:left;font-weight:700;font-size:14px;padding:7px 10px 7px 0;
                 white-space:nowrap;text-transform:none;letter-spacing:0;background:none}
.table-calcul td{padding:5px 10px 5px 0;vertical-align:middle}
.table-calcul td.note{margin:0;font-size:12.5px;color:var(--gris);white-space:normal}
.table-calcul input{width:104px;padding:9px 11px;text-align:right}
.table-calcul .montant{font-weight:800;font-size:17px;white-space:nowrap}
.table-calcul .somme th,.table-calcul .somme td{border-top:2px solid var(--ligne);padding-top:11px}
.table-calcul .resultat th,.table-calcul .resultat td{border-top:2px solid var(--encre);padding-top:12px}
.table-calcul .resultat .montant{font-size:23px;color:var(--rose)}

/* Les décorations posées sur la vignette : une boîte en pourcentages,
   la même que celle réglée à l'atelier. Broderie ou transfert, c'est
   la même mécanique — ce qui paraît ici est ce qui sera produit. */
.deco-pose{
  position:absolute;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden;
}
.deco-pose img{width:100%;height:100%;object-fit:contain;
               filter:drop-shadow(0 1px 3px rgba(0,0,0,.28))}
.deco-pose b{font-size:clamp(6px,1.6vw,13px);line-height:1;text-align:center;
             /* Un liseré sombre : le texte reste lisible sur un vêtement
                pâle comme sur un foncé, sans savoir la couleur du fil. */
             color:#fff;text-shadow:0 0 2px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.6);
             white-space:nowrap;overflow:hidden}

/* --- Toutes les couleurs pendant qu'on place une décoration --- */
.placer-couleurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;
                 max-height:330px;overflow-y:auto;padding:2px}
.vig-couleur{
  position:relative;display:block;padding:0 0 22px;cursor:pointer;background:#fff;
  border:2px solid var(--ligne);border-radius:12px;overflow:hidden;font:inherit;color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.vig-couleur:hover{transform:translateY(-2px)}
.vig-couleur.active{border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,46,136,.16)}
.vig-couleur .fond{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#faf9ff}
.vig-couleur b{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;font-size:10.5px;
               line-height:1.2;background:#fff;border-top:1px solid var(--ligne);
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vig-deco{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vig-deco img{width:100%;height:100%;object-fit:contain}
.vig-deco span{font-size:7px;line-height:1;text-align:center;color:#fff;
               text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* --- Les modèles d'un client, vus d'un coup avec leur logo --- */
.grille-modeles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:14px}
.carte-modele{border:2px solid var(--ligne);border-radius:18px;overflow:hidden;background:#fff;
              display:flex;flex-direction:column}
.carte-modele.retire{opacity:.62}
.visuel-modele{position:relative;aspect-ratio:3/4;display:grid;place-items:center;font-size:54px;
               background:linear-gradient(135deg,#fff0f7,#efe9ff 55%,#e2fbf6)}
.visuel-modele > img:first-of-type{width:100%;height:100%;object-fit:contain}
.voile-retire{position:absolute;top:10px;left:10px;padding:4px 11px;border-radius:999px;
              background:var(--encre);color:#fff;font-size:11.5px;font-weight:800;text-transform:uppercase}
.corps-modele{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1;gap:3px}
.corps-modele > b{font-size:14.5px;line-height:1.3}
.puces-deco{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.puce-deco{padding:2px 8px;border-radius:999px;background:var(--fond);border:1px solid var(--ligne);
           font-size:11.5px;font-weight:700;color:var(--gris)}
.puce-deco b{color:var(--encre)}
.puce-deco.morte{opacity:.5;text-decoration:line-through}
.liens-modele{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:11px}

/* --- Les coloris d'un modèle, en grand, avec la décoration posée --- */
.grille-coloris{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-top:12px}
.coloris{padding:0 0 26px;position:relative;cursor:pointer;background:#fff;font:inherit;color:inherit;
         border:2px solid var(--ligne);border-radius:16px;overflow:hidden;
         transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease}
.coloris:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(27,20,54,.12);border-color:var(--rose)}
.coloris.ajuste{border-color:#39c98a}
.scene-coloris{position:relative;display:block}
.scene-coloris .fond{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#faf9ff}
.deco-posee{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.deco-posee img{width:100%;height:100%;object-fit:contain}
.deco-posee em{font-style:normal;font-size:9px;line-height:1;text-align:center;color:#fff;
               text-shadow:0 1px 2px rgba(0,0,0,.55)}
.marque-ajuste{position:absolute;top:7px;right:7px;padding:2px 8px;border-radius:999px;
               background:#39c98a;color:#fff;font-size:10.5px;font-weight:800}
.coloris b{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:12px;line-height:1.2;
           background:#fff;border-top:1px solid var(--ligne);
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* La fenêtre d'ajustement d'une couleur */
.ajust-corps{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.ajust-scene{position:relative;flex:1;min-width:260px;max-width:380px;aspect-ratio:3/4;
             border:2px solid var(--ligne);border-radius:16px;overflow:hidden;background:#faf9ff;
             user-select:none}
.ajust-scene .fond{width:100%;height:100%;object-fit:contain;display:block}
.ajust-boite{position:absolute;cursor:grab;display:flex;align-items:center;justify-content:center;
             outline:2px dashed rgba(255,46,136,.85);outline-offset:2px}
.ajust-boite:active{cursor:grabbing}
.ajust-boite img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.ajust-boite span{font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ajust-cotes{flex:1;min-width:210px}
.choix-deco a .note{display:block;font-size:11px;margin:0;opacity:.75}
.choix-deco a.actif .note{color:rgba(255,255,255,.8)}
/* Un emplacement laissé au choix du membre se distingue d'un emplacement imposé */
.deco-posee.offerte{outline:1.5px dashed rgba(123,47,247,.75);outline-offset:1px}
.code-pose{position:absolute;top:-8px;left:-3px;padding:0 4px;border-radius:5px;
           background:var(--violet);color:#fff;font:700 8.5px/1.5 ui-monospace,Menlo,monospace;
           font-style:normal;letter-spacing:.03em}
.deco-posee:not(.offerte) .code-pose{background:var(--encre)}
/* Les quatre nombres du cadre, sous les réglages */
.chiffres-cadre{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.chiffres-cadre label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
                      color:var(--gris);white-space:nowrap}
.chiffres-cadre input{width:100%;min-width:0;padding:7px 8px;text-align:right;font-size:13px}
.scene-coloris .fond.miroir{transform:scaleX(-1)}
.ajust-scene .fond.miroir{transform:scaleX(-1)}

/* --- Les sections repliables de la fiche d'un vêtement --- */
.bloc.repliable > .titre-bloc,
.bloc.repliable .tete-bloc > .titre-bloc{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;padding:0 0 10px;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.bloc.repliable .tete-bloc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bloc.repliable .tete-bloc > .titre-bloc{width:auto;flex:1;min-width:170px}
.fleche-bloc{margin-left:auto;font-size:13px;color:var(--gris);transition:transform .16s ease;flex:0 0 auto}
.bloc.ferme .fleche-bloc{transform:rotate(-90deg)}
.resume-bloc{font-size:13px;font-weight:700;color:var(--c1,var(--rose));
             text-transform:none;letter-spacing:0;white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis;max-width:170px}
.bloc.ferme > *:not(.titre-bloc):not(.tete-bloc){display:none}
.bloc.ferme .tete-bloc .chercher-couleur{display:none}
.bloc.repliable > .titre-bloc:hover,
.bloc.repliable .tete-bloc > .titre-bloc:hover{color:var(--c1,var(--rose))}

/* --- Voir ce que donne une hauteur de lettres --- */
.rangee-taille{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px}
.rangee-taille > .champ{flex:0 0 250px}
.taille-avec-fleches{display:flex;align-items:stretch;gap:0}
.taille-avec-fleches input{border-radius:0;text-align:center;flex:1;min-width:0}
/* Les flèches du navigateur montaient d'un centimètre d'un coup :
   on ne garde que les nôtres, qui vont par quart de centimètre. */
.taille-avec-fleches input::-webkit-outer-spin-button,
.taille-avec-fleches input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.taille-avec-fleches input[type=number]{-moz-appearance:textfield;appearance:textfield}
.pas-taille{
  width:40px;flex:0 0 40px;border:2px solid var(--ligne);background:#fff;cursor:pointer;
  font-size:15px;font-weight:900;color:var(--encre);
}
.pas-taille:first-child{border-radius:14px 0 0 14px;border-right:0}
.pas-taille:last-child{border-radius:0 14px 14px 0;border-left:0}
.pas-taille:hover{background:var(--fond);color:var(--rose)}
.apercu-taille{flex:1 1 420px;min-width:300px;max-width:560px}
.scene-taille{
  position:relative;width:100%;aspect-ratio:3/4;border:2px solid var(--ligne);border-radius:16px;
  overflow:hidden;background:#faf9ff;display:grid;place-items:center;
}
.scene-taille img{width:100%;height:100%;object-fit:contain}
.scene-taille .sans-photo{font-size:80px}
.texte-essai{
  position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);
  color:#fff;line-height:1;white-space:nowrap;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;
}
.vues-taille{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.vues-taille button{
  padding:6px 13px;border-radius:999px;border:2px solid var(--ligne);background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--encre);cursor:pointer;
}
.vues-taille button:hover{border-color:var(--rose)}
.vues-taille button.actif{background:linear-gradient(135deg,var(--rose),var(--violet));
                          color:#fff;border-color:transparent}
.texte-essai{display:flex;flex-direction:column;align-items:center;gap:.12em}
.texte-essai span{display:block}
.chiffres-cadre label input[type=range]{padding:0}

/* --- Les chiffres : quatre blocs de lecture rapide --- */
.grille-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.grille-chiffres .carte{margin:0}
.bloc-chiffre .gros{margin:4px 0 0;font-size:30px;font-weight:900;line-height:1.1;color:var(--encre)}
.bloc-chiffre > .note{margin:2px 0 12px}
.bloc-chiffre table{margin-top:4px;font-size:13.5px}
.bloc-chiffre table td,.bloc-chiffre table th{padding:5px 0}

/* --- Trouver le fil le plus proche d'une couleur --- */
.trouve-fil{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-top:14px}
.pf-cote{flex:0 0 320px;max-width:100%}
.pf-rangee{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pf-rangee input[type=color]{height:46px;width:58px;flex:0 0 58px;padding:2px;
  border:2px solid var(--ligne);border-radius:12px;background:#fff;cursor:pointer}
.pf-rangee input[type=text]{padding:11px 12px;border:2px solid var(--ligne);border-radius:12px;
  font:inherit;font-weight:700}
.pf-zone{border:2px dashed var(--ligne);border-radius:16px;background:#faf9ff;
  min-height:180px;display:grid;place-items:center;padding:12px;transition:border-color .12s ease}
.pf-zone.pf-survol{border-color:var(--rose);background:#fff5fa}
.pf-zone canvas{max-width:100%;height:auto;border-radius:10px;cursor:crosshair;display:block}
.pf-vide{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.pf-vide .note{margin:0;max-width:240px}
.pf-case{display:flex;gap:8px;align-items:center;margin-top:12px;font-weight:700;font-size:14px}

.pf-res{flex:1;min-width:290px}
.pf-titre{margin:0 0 10px;font-size:15.5px;display:flex;align-items:center;gap:8px}
.pf-titre code{font-size:13px;color:var(--gris);font-weight:700}
.pf-pastille{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:inline-block;
  border:2px solid rgba(20,12,45,.16)}
.pf-liste{display:flex;flex-direction:column;gap:7px}
.pf-ligne{display:flex;align-items:center;gap:11px;padding:8px 11px;background:#fff;
  border:2px solid var(--ligne);border-radius:13px}
.pf-nom{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pf-nom .note{margin:0;font-size:11.5px}
.pf-ecart{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;
  font-weight:800;white-space:nowrap;line-height:1.25}
.pf-ecart .note{margin:0;font-size:11px;font-weight:700}
.pf-bon{color:#14713a}
.pf-moyen{color:#9a6b00}
.pf-loin{color:var(--gris)}
.carte-fil.pf-vise{border-color:var(--rose);box-shadow:0 0 0 4px rgba(255,46,136,.20)}
@media (max-width:640px){ .pf-cote{flex:1 1 100%} }

/* --- La liste de couleurs d'un logo --- */
.pf-lot{flex:1 1 100%;border-top:2px solid var(--ligne);margin-top:18px;padding-top:16px}
.pf-lot textarea{width:100%;padding:11px 13px;border:2px solid var(--ligne);border-radius:13px;
  font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;background:#fff}
.pf-tab{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
.pf-tab th,.pf-tab td{padding:8px 9px;border-bottom:1px solid var(--ligne);
  text-align:left;vertical-align:middle}
.pf-tab thead th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);border-bottom:2px solid var(--ligne)}
.pf-tab td{white-space:nowrap}
.pf-tab .pf-pastille{vertical-align:middle;margin-right:8px}
.pf-cel{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.25}
.pf-cel .note{margin:0;font-size:11.5px}
.pf-num{color:var(--gris);font-weight:800;width:26px}
/* La dernière colonne peut être longue : on laisse glisser plutôt
   que de la couper. */
.pf-defile{overflow-x:auto;margin-top:14px}
.pf-tab{margin-top:0;min-width:560px}
.pf-tab td:last-child{white-space:normal;line-height:1.45;min-width:150px}
/* Une teinte qui ne se commande plus : visible, mais signalée */
.carte-fil[data-hors]{border-style:dashed}
.carte-fil[data-hors]::after{content:"plus au catalogue";position:absolute;top:6px;right:8px;
  font-size:10px;font-weight:800;color:var(--gris);letter-spacing:.03em}
.carte-fil{position:relative}

/* --- Les jauges d'une campagne de commande --- */
.jauges{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.jauge{flex:1 1 240px;min-width:0}
.jauge-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:14px;margin-bottom:6px}
.jauge-tete b{font-size:19px}
.jauge-tete span{font-weight:800;color:var(--gris);font-size:13px}
.jauge-fond{height:12px;border-radius:999px;background:var(--fond);
  border:2px solid var(--ligne);overflow:hidden}
.jauge-fond i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--c1,#7b2ff7),var(--c2,#0066ff));transition:width .3s ease}

/* Le bandeau de campagne, côté membre */
.bandeau-campagne{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  padding:15px 18px;border-radius:18px;margin-bottom:20px;
  border:2px solid var(--ligne);background:#fff}
.bandeau-campagne.ouverte{background:#e7f9ef;border-color:#bde9cd}
.bandeau-campagne.fermee{background:#fff6e6;border-color:#ffdca8}
.bandeau-campagne .ico{font-size:26px;flex:0 0 auto;line-height:1}
.bandeau-campagne .corps{flex:1;min-width:200px}
.bandeau-campagne b{display:block;margin-bottom:2px;font-size:15.5px}
.bandeau-campagne p{margin:0;font-size:14px;color:var(--gris);line-height:1.5}
.bandeau-campagne .jauges{margin-top:12px;width:100%}
.form-attente{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.form-attente input{padding:11px 13px;border:2px solid var(--ligne);border-radius:12px;
  font:inherit;min-width:0;flex:1 1 180px;background:#fff}

/* ============================================================
   LA VITRINE — l'accueil de Fil & Forme
   Toute la page sur le fond du logo. Les trois couleurs en
   viennent : l'encre du fond, la crème du lettrage, le corail
   de l'esperluette.
   ============================================================ */
body.page-vitrine{
  --ff-encre:#2b2a33; --ff-creme:#f4efe6; --ff-corail:#e08a6a;
  --ff-carte:#34323d; --ff-bord:rgba(244,239,230,.14);
  --ff-doux:rgba(244,239,230,.66);
  margin:0;background:var(--ff-encre);color:var(--ff-creme)
}
body.page-vitrine ::selection{background:var(--ff-corail);color:var(--ff-encre)}

.vitrine-tete{position:sticky;top:0;z-index:20;background:rgba(43,42,51,.93);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ff-bord)}
.vitrine-in{max-width:1120px;margin:0 auto;padding:12px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marque-vitrine{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ff-creme)}
.marque-mono{height:42px;width:auto;border-radius:9px;display:block}
.marque-vitrine b{display:block;font-size:19px;letter-spacing:-.01em;line-height:1.1}
.marque-vitrine small{display:block;font-size:11px;color:var(--ff-corail);font-weight:800;
  text-transform:uppercase;letter-spacing:.22em}
.vitrine-tete nav{display:flex;align-items:center;gap:18px}
.vitrine-tete nav a:not(.btn){color:var(--ff-creme);opacity:.78;text-decoration:none;
  font-weight:700;font-size:14.5px}
.vitrine-tete nav a:not(.btn):hover{opacity:1}

.heros{padding:52px 22px 0}
/* Une seule colonne depuis qu'il n'y a plus les trois encadrés :
   le texte n'a pas à rester coincé dans une demi-largeur. */
.heros-in{max-width:760px;margin:0 auto;padding-bottom:52px}
/* Le PNG est recadré sur l'encre : il lui faut son air, sinon le
   titre lui colle dessous. */
.heros-logo{display:block;width:min(100%,430px);height:auto;margin:0 0 34px}
.heros h1{margin:0 0 16px;font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.025em}
.heros-mot > p{margin:0 0 26px;font-size:17px;line-height:1.65;color:var(--ff-doux);max-width:31em}
.heros-boutons{display:flex;gap:11px;flex-wrap:wrap}

/* La couture du monogramme, reprise en séparateur */
.couture{display:block;width:100%;height:36px;color:var(--ff-corail);opacity:.75}

.section{padding:50px 22px}
.section-in{max-width:1120px;margin:0 auto}
.section-in.etroit{max-width:470px}
.section h2{margin:0 0 6px;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em}
.section-note{margin:0 0 26px;color:var(--ff-doux);font-size:15px;line-height:1.6}

.grille-vitrine{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.carte-vitrine{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 20px 20px;background:var(--ff-carte);border:1px solid var(--ff-bord);
  border-radius:20px;cursor:pointer;font:inherit;color:var(--ff-creme);text-align:center;
  overflow:hidden;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.carte-vitrine:hover{transform:translateY(-3px);border-color:var(--ff-corail);
  box-shadow:0 16px 36px rgba(0,0,0,.34)}
.carte-bande{display:block;width:calc(100% + 40px);height:7px;margin:0 -20px 18px;
  background:linear-gradient(90deg,var(--b1),var(--b2))}
.carte-ecu{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.carte-ecu img{width:100%;height:100%;object-fit:contain;background:var(--ff-creme);padding:5px}
.carte-ecu i{font-style:normal;font-weight:900;font-size:26px;letter-spacing:.02em}
.carte-nom{font-weight:800;font-size:16.5px;line-height:1.3}
.carte-etat{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 11px;border-radius:999px;display:flex;flex-direction:column;align-items:center;gap:1px}
.carte-etat small{font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;opacity:.8}
.carte-etat.ouvert{background:rgba(126,217,161,.16);color:#8fdcb0}
.carte-etat.ferme{background:rgba(224,138,106,.18);color:var(--ff-corail)}
.carte-entrer{margin-top:3px;font-weight:800;font-size:14px;color:var(--ff-corail)}

/* Le formulaire sur fond sombre : champs foncés, étiquettes claires */
.carte-entree{background:var(--ff-carte);border:1px solid var(--ff-bord);border-radius:22px;
  padding:26px 24px;box-shadow:0 18px 44px rgba(0,0,0,.30)}
.carte-entree .champ{margin-bottom:14px}
.carte-entree label{color:var(--ff-doux)}
.carte-entree input{background:rgba(0,0,0,.24);border:2px solid var(--ff-bord);
  color:var(--ff-creme);border-radius:12px}
.carte-entree input::placeholder{color:rgba(244,239,230,.34)}
.carte-entree input:focus{background-color:rgba(0,0,0,.30);border-color:var(--ff-corail);
  outline:none;box-shadow:0 0 0 3px rgba(224,138,106,.18)}
.carte-entree .btn{width:100%}
.carte-entree .note{margin:14px 0 0;text-align:center;color:var(--ff-doux)}
.carte-entree .alerte.err{background:rgba(224,106,106,.14);border:1px solid rgba(224,106,106,.4);
  color:#f0b4b4}

.vitrine-pied{border-top:1px solid var(--ff-bord);color:var(--ff-doux);padding:16px 0}
.vitrine-pied .vitrine-in{font-size:13.5px}
.vitrine-pied a{color:var(--ff-creme);opacity:.8}
.vitrine-pied a:hover{opacity:1}

/* Les boutons portent les couleurs de la marque, pas le dégradé
   rose de l'application. */
body.page-vitrine .btn{background:var(--ff-corail);border:2px solid var(--ff-corail);
  color:var(--ff-encre);box-shadow:none;font-weight:800}
body.page-vitrine .btn:hover{background:#eb9c7d;border-color:#eb9c7d;color:var(--ff-encre);
  box-shadow:0 12px 26px rgba(224,138,106,.28)}
body.page-vitrine .heros-boutons .btn-clair{background:transparent;color:var(--ff-creme);
  border:2px solid rgba(244,239,230,.34);box-shadow:none}
body.page-vitrine .heros-boutons .btn-clair:hover{background:rgba(244,239,230,.09);
  border-color:var(--ff-creme);color:var(--ff-creme);box-shadow:none}

@media (max-width:860px){
  .heros-in{padding-bottom:40px}
  .heros{padding-top:34px}
  .heros-logo{width:min(100%,300px);margin-bottom:24px}
}

/* --- Les formulaires publics de la vitrine --- */
.deux-colonnes{display:grid;gap:36px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start}
.colonne-mot h2{margin-top:0}
.liste-puces{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.liste-puces li{position:relative;padding-left:26px;color:var(--ff-doux);font-size:14.5px;
  line-height:1.55}
.liste-puces li:before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:3px;background:var(--ff-corail)}

.carte-formulaire{background:var(--ff-carte);border:1px solid var(--ff-bord);border-radius:22px;
  padding:24px 22px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.carte-formulaire .champ{margin-bottom:13px}
.carte-formulaire label{color:var(--ff-doux)}
.carte-formulaire input,.carte-formulaire select,.carte-formulaire textarea{
  width:100%;background:rgba(0,0,0,.24);border:2px solid var(--ff-bord);color:var(--ff-creme);
  border-radius:12px;padding:11px 13px;font:inherit}
.carte-formulaire textarea{resize:vertical;line-height:1.5}
.carte-formulaire input::placeholder,.carte-formulaire textarea::placeholder{
  color:rgba(244,239,230,.32)}
.carte-formulaire input:focus,.carte-formulaire select:focus,.carte-formulaire textarea:focus{
  background-color:rgba(0,0,0,.30);border-color:var(--ff-corail);outline:none;
  box-shadow:0 0 0 3px rgba(224,138,106,.18)}
.carte-formulaire select option{background:var(--ff-carte);color:var(--ff-creme)}
.carte-formulaire .btn{width:100%;margin-top:4px}
.carte-formulaire .note{margin:12px 0 0;text-align:center;color:var(--ff-doux)}
.carte-formulaire .alerte{margin-bottom:16px}
.carte-formulaire .alerte.ok{background:rgba(126,217,161,.14);border:1px solid rgba(126,217,161,.38);
  color:#9fe3bb}
.carte-formulaire .alerte.err{background:rgba(224,106,106,.14);border:1px solid rgba(224,106,106,.4);
  color:#f0b4b4}
.rangee-champs{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.rangee-champs .champ{margin-bottom:13px}

/* Le champ que seuls les robots remplissent */
.pot-a-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:860px){
  .deux-colonnes{grid-template-columns:1fr;gap:24px}
  .rangee-champs{grid-template-columns:1fr;gap:0}
}

/* --- La boîte des demandes --- */
.pastille-compte{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  margin-left:6px;border-radius:999px;background:var(--rose);color:#fff;
  font-size:11px;font-weight:900;vertical-align:1px}
.grille-demande{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.grille-demande > div:first-child{min-width:190px;line-height:1.5}
.citation-demande{margin:14px 0 0;padding:12px 15px;border-left:3px solid var(--rose);
  background:var(--fond);border-radius:0 12px 12px 0;line-height:1.55;font-size:14.5px}

/* Un menu déroulant « natif » se repeint tout seul dès qu'une valeur
   est choisie — fond blanc du système, quoi qu'on demande. On le
   dessine donc au complet, chevron compris. */
.carte-formulaire select{
  -webkit-appearance:none;appearance:none;
  background-color:rgba(0,0,0,.24);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4efe6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
  padding-right:38px;cursor:pointer
}
.carte-formulaire select:focus{background-color:rgba(0,0,0,.30)}

/* --- Les deux grands choix de la vitrine --- */
.deux-boutons{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.gros-choix{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:26px 26px 22px;background:var(--ff-carte);border:2px solid var(--ff-bord);
  border-radius:22px;cursor:pointer;font:inherit;color:var(--ff-creme);text-align:left;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.gros-choix:hover{transform:translateY(-3px);border-color:var(--ff-corail);
  box-shadow:0 16px 36px rgba(0,0,0,.34)}
.gros-choix.choisi{border-color:var(--ff-corail);
  box-shadow:0 0 0 4px rgba(224,138,106,.16)}
.choix-ico{font-size:30px;line-height:1;margin-bottom:3px}
.gros-choix b{font-size:19px;line-height:1.25;letter-spacing:-.01em}
.gros-choix > span:not(.choix-ico):not(.choix-fleche){color:var(--ff-doux);font-size:14.5px;
  line-height:1.55}
.choix-fleche{margin-top:6px;color:var(--ff-corail);font-weight:800;font-size:14.5px}

@media (max-width:760px){ .deux-boutons{grid-template-columns:1fr} }

/* Le remplissage automatique du navigateur repeint la case avec son
   propre fond clair, et `background-color` n'y peut rien. La seule
   prise, c'est une ombre intérieure qui recouvre tout le champ. */
.carte-formulaire input:-webkit-autofill,
.carte-formulaire input:-webkit-autofill:hover,
.carte-formulaire input:-webkit-autofill:focus,
.carte-formulaire input:-webkit-autofill:active,
.carte-formulaire textarea:-webkit-autofill,
.carte-formulaire select:-webkit-autofill,
.carte-entree input:-webkit-autofill,
.carte-entree input:-webkit-autofill:hover,
.carte-entree input:-webkit-autofill:focus,
.carte-entree input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ff-creme);
  -webkit-box-shadow:0 0 0 1000px #1e1d24 inset;
          box-shadow:0 0 0 1000px #1e1d24 inset;
  caret-color:var(--ff-creme);
}

/* --- Ranger les photos d'une couleur à la souris --- */
.carte-photo{position:relative}
.poignee{position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;
  display:grid;place-items:center;border:2px solid var(--ligne);border-radius:9px;
  background:#fff;color:var(--gris);font-size:15px;line-height:1;cursor:grab;
  box-shadow:0 2px 6px rgba(20,12,45,.10)}
.poignee:hover{border-color:var(--c1);color:var(--c1)}
.poignee:active{cursor:grabbing}
.carte-photo.en-vol{opacity:.4;outline:2px dashed var(--c1);outline-offset:3px}
.grille-photos.rangeable.en-cours{opacity:.6;pointer-events:none}

/* --- La vue d'ensemble des campagnes --- */
.grille-campagnes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.carte-campagne{margin:0;display:flex;flex-direction:column}
.carte-campagne .liens-modele{margin-top:auto;padding-top:14px;align-items:center}

/* --- Le cadeau à l'achat --- */
.rangee-cadeau{display:grid;gap:9px;grid-template-columns:120px 1fr 120px}
.rangee-cadeau input{width:100%}
.avis-cadeau{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:16px;
  padding:12px 15px;border-radius:14px;background:#fff6e0;border:2px solid #ffd9a8;
  font-size:14.5px}

.bandeau-cadeau{display:flex;gap:13px;align-items:flex-start;margin:16px 0;
  padding:14px 16px;border-radius:16px;background:#fff6e0;border:2px solid #ffd9a8}
.bandeau-cadeau.gagne{background:#e7f9ef;border-color:#bde9cd}
.bandeau-cadeau .ico{font-size:24px;line-height:1.1;flex:0 0 auto}
.bandeau-cadeau .corps{flex:1;min-width:0}
.bandeau-cadeau b{display:block;font-size:15px;line-height:1.35}
.bandeau-cadeau p{margin:3px 0 0;font-size:13.5px;color:var(--gris);line-height:1.5}
.bandeau-cadeau .jauge-fond{height:9px}

@media (max-width:560px){ .rangee-cadeau{grid-template-columns:1fr} }

/* Une puce de décoration mène à son placement : c'est en cliquant
   sur la décoration qu'on veut bouger qu'on s'attend à la bouger. */
.puce-lien{text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  transition:border-color .12s ease,background .12s ease}
.puce-lien:hover{border-color:var(--c1);background:#fff}
.puce-viser{opacity:0;font-size:11px;transition:opacity .12s ease}
.puce-lien:hover .puce-viser{opacity:1}

/* La photo de ce qu'on offre : on voit le cadeau, pas juste son nom */
.photo-cadeau{width:72px;height:72px;flex:0 0 72px;object-fit:contain;border-radius:12px;
  background:#fff;border:2px solid rgba(20,12,45,.10);padding:4px}
.rangee-cadeau-photo{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.vignette-cadeau{width:64px;height:64px;flex:0 0 64px;border-radius:12px;background:#fff;
  border:2px solid var(--ligne);display:grid;place-items:center;overflow:hidden}
.vignette-cadeau img{width:100%;height:100%;object-fit:contain;padding:4px}
@media (max-width:560px){ .photo-cadeau{width:56px;height:56px;flex-basis:56px} }

/* --- Le menu d'administration : le nom, puis ce qu'on y fait --- */
.admin .entete nav a b{display:block;font-weight:800;line-height:1.25}
.admin .entete nav a small{display:block;margin-top:2px;font-size:11.5px;font-weight:600;
  line-height:1.35;opacity:.62}
.admin .entete nav a.actif small{opacity:.72}
@media (min-width:901px){
  .admin .entete nav a{padding:9px 13px;font-size:14.5px}
}
/* Sur la barre horizontale des petits écrans, la deuxième ligne
   ferait déborder : le nom suffit. */
@media (max-width:900px){
  .admin .entete nav a small{display:none}
}
/* Quinze entrées sur deux lignes, ça monte vite : on resserre pour
   que Réglages reste atteignable sans faire défiler. */
@media (min-width:901px){
  .admin .entete nav a{padding:7px 12px}
  .admin .entete nav{gap:4px}
}

/* --- Le sous-menu d'une section ouverte --- */
@media (min-width:901px){
  .admin .entete nav .sous-menu{display:flex;flex-direction:column;gap:2px;
    margin:2px 0 6px 12px;padding-left:10px;border-left:2px solid rgba(255,255,255,.16)}
  .admin .entete nav .sous-menu a{padding:6px 10px;font-size:13.5px;font-weight:700;
    border-radius:9px;opacity:.72}
  .admin .entete nav .sous-menu a:hover{opacity:1;background:rgba(255,255,255,.08)}
  .admin .entete nav .sous-menu a.actif{background:rgba(255,255,255,.14);color:#fff;opacity:1}
}
/* Sur la barre horizontale des petits écrans, le sous-menu se déplie
   à la suite plutôt qu'en retrait. */
@media (max-width:900px){
  .admin .entete nav .sous-menu{display:contents}
  .admin .entete nav .sous-menu a{font-size:13.5px;opacity:.8}
}
/* La pièce justificative d'une dépense */
.rangee-piece{display:flex;gap:12px;align-items:center;flex-wrap:wrap}