/* Boutique de la créatrice, piste A « Jardin et kraft » (Watt, chantier maman_site_v1, 16/10/2026 ; reprise des
   maquettes du chantier maman_etude). Couleurs (m) : mesurées sur ses photos (charte/palette_mesuree.json).
   Polices : celles du système pour l'instant ; Fraunces, Nunito et Caveat (OFL) pourront être copiées dans
   assets/polices/ plus tard (rien n'est appelé chez Google). */
:root {
  --creme: #fbf6ef;
  --papier: #f4ebe0;
  --kraft: #c59f7c;        /* (m) cartons des boucles */
  --kraft-clair: #ead8c4;
  --encre: #4a3428;
  --encre-douce: #6b5143;
  --rose: #d87b87;         /* (m) */
  --rose-pale: #f7e3e3;
  --camelia: #c92a47;      /* #dc3151 (m) assombri pour un texte blanc lisible */
  --or: #d2bf60;           /* (m) */
  --or-fonce: #9c7a22;
  --turquoise: #367691;    /* (m) */
  --prune: #9e4d75;        /* (m) */
  --feuille: #3f6b3a;
  --ombre: 0 6px 18px rgba(74, 52, 40, .12);
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --main: "Caveat", "Segoe Print", "Ink Free", cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--texte); font-size: 18px; line-height: 1.5; color: var(--encre);
  background: var(--creme);
  background-image: radial-gradient(rgba(197, 159, 124, .10) 1px, transparent 1.4px);
  background-size: 7px 7px;
}
img { max-width: 100%; display: block; }
a { color: var(--camelia); }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; }
.main { font-family: var(--main); font-size: 1.5em; color: var(--prune); }
.cache { display: none !important; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -60px; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 10; }
.evitement:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* Bandeau « démonstration » (seulement en ouvrant les fichiers sans serveur) */
.demo { background: var(--encre); color: #fff; font-size: 14px; text-align: center; padding: 4px 8px; }

/* En-tête */
.entete { background: var(--papier); border-bottom: 3px dashed var(--kraft); }
.entete .dedans { max-width: 1100px; margin: auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { text-decoration: none; color: var(--encre); display: flex; align-items: center; gap: 10px; min-height: 44px; }
.logo .rond { width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff8 0 18%, transparent 19%), conic-gradient(#d87b87, #f1892b, #d2bf60, #367691, #b8a3d6, #d87b87);
  box-shadow: inset 0 0 0 3px #fff6; }
.logo b { font-family: var(--titre); font-size: 1.35rem; display: block; line-height: 1; }
.logo small { font-family: var(--main); font-size: 1.15rem; color: var(--prune); }
.menu { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.menu a { text-decoration: none; color: var(--encre); padding: 10px 14px; border-radius: 999px; font-weight: 700; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.menu a[aria-current=page], .menu a:hover { background: var(--rose-pale); color: var(--camelia); }
@media (max-width: 640px) {
  .menu { width: 100%; margin: 0; justify-content: space-between; }
  .menu a { padding: 8px 8px; font-size: 15px; }
}

.page { max-width: 1100px; margin: auto; padding: 18px 16px 40px; }
.texte-long { max-width: 760px; }
.texte-long h2 { margin-top: 1.4em; }
.a-remplir { background: #fff3c4; border: 1px dashed var(--or-fonce); padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px;
  border-radius: 999px; border: 0; font: 700 18px var(--texte); text-decoration: none; cursor: pointer; text-align: center;
  background: var(--camelia); color: #fff; box-shadow: var(--ombre); }
.bouton.doux { background: #fff; color: var(--encre); border: 2px solid var(--kraft); box-shadow: none; }
.bouton.vert { background: var(--feuille); }
.bouton.large { width: 100%; }
.bouton[disabled] { opacity: .55; cursor: wait; }

.carton { background: var(--kraft-clair); border-radius: 14px; padding: 14px; position: relative; box-shadow: var(--ombre); }
.carton::before { content: ""; position: absolute; top: 8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--creme); box-shadow: inset 0 1px 2px #0003; }

/* Accueil */
.heros { display: grid; gap: 18px; align-items: center; }
.heros .photo { border-radius: 22px; overflow: hidden; box-shadow: var(--ombre); max-height: 460px; }
.heros .photo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; object-position: 50% 40%; }
.heros h1 { font-size: 2.1rem; }
.heros p { font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 760px) { .heros { grid-template-columns: 1.1fr 1fr; } .heros h1 { font-size: 2.8rem; } }
.page > section { margin-top: 34px; }
.titre-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.titre-sec a { min-height: 44px; display: inline-flex; align-items: center; }
.sm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 760px) { .sm { grid-template-columns: repeat(4, 1fr); } }
.sm a { position: relative; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--ombre); }
.sm img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.sm span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-weight: 800; font-size: 18px;
  background: linear-gradient(transparent, rgba(60, 35, 25, .88)); }
.sm small { display: block; font-weight: 600; font-size: 14px; }
.etapes3 { display: grid; gap: 12px; }
@media (min-width: 760px) { .etapes3 { grid-template-columns: repeat(3, 1fr); } }
.etapes3 .carton { padding-top: 30px; }
.etapes3 b { font-family: var(--titre); font-size: 1.3rem; display: block; }

/* Grille d'annonces */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.grille > .erreur, .grille > .vide { grid-column: 1 / -1; }   /* un message dans la grille prend toute la largeur (constaté en essai : colonne étroite) */
.fiche { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); text-decoration: none; color: var(--encre); display: flex; flex-direction: column; position: relative; }
.fiche img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.fiche .txt { padding: 10px 12px 12px; }
.fiche .t { font-weight: 700; font-size: 16px; line-height: 1.25; display: block; overflow-wrap: anywhere; }
.fiche .p { font-family: var(--titre); font-size: 20px; color: var(--camelia); margin-top: 4px; display: block; }
.fiche.vendue img { filter: grayscale(.6) opacity(.7); }
.etiquette { position: absolute; top: 10px; left: 10px; background: var(--encre); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
.vide { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--ombre); }

.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.filtres button { flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--kraft); background: #fff; font: 700 16px var(--texte); color: var(--encre); cursor: pointer; }
.filtres button[aria-pressed=true] { background: var(--encre); border-color: var(--encre); color: #fff; }

/* Fiche d'une annonce */
.annonce { display: grid; gap: 20px; }
@media (min-width: 760px) { .annonce { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.galerie .grande img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; box-shadow: var(--ombre); }
.vignettes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vignettes button { padding: 0; border: 3px solid transparent; border-radius: 12px; background: none; cursor: pointer; width: 72px; }
.vignettes button[aria-pressed=true] { border-color: var(--encre); }
.vignettes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.prix-grand { font-family: var(--titre); font-size: 2rem; color: var(--camelia); margin: 4px 0 10px; }
.description { white-space: pre-line; overflow-wrap: anywhere; }

/* Pied */
.pied { background: var(--papier); border-top: 3px dashed var(--kraft); text-align: center; padding: 20px 16px; font-size: 15px; }
.pied a { margin: 0 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* Formulaires */
label.q, .q { display: block; font-weight: 800; font-size: 20px; margin: 18px 0 8px; }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select {
  width: 100%; font: 20px var(--texte); padding: 14px 16px; border-radius: 14px; border: 2px solid var(--kraft); background: #fff; color: var(--encre); min-height: 56px; }
textarea { min-height: 130px; }
.aide { color: var(--encre-douce); font-size: 16px; font-weight: 400; }
.note { background: var(--rose-pale); border-left: 5px solid var(--rose); padding: 10px 14px; border-radius: 10px; font-size: 16px; }
.erreur { background: #fde3e3; border-left: 5px solid var(--camelia); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.reussi { background: #e3f0df; border-left: 5px solid var(--feuille); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.delai { display: inline-block; background: var(--feuille); color: #fff; font-weight: 800; padding: 6px 12px; border-radius: 999px; font-size: 15px; }
.radio { display: flex; flex-direction: column; gap: 10px; }
.radio label { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--kraft); border-radius: 14px; padding: 12px 14px; min-height: 56px; cursor: pointer; }
.radio input, .case input { width: 26px; height: 26px; flex: none; accent-color: var(--camelia); }
.case { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 16px; }
.piege { display: none; }
.form { max-width: 620px; }
.recap { display: flex; gap: 14px; align-items: center; }
.recap img { width: 90px; height: 110px; object-fit: cover; border-radius: 12px; flex: none; }
.recap .pp { font-family: var(--titre); font-size: 1.4rem; color: var(--camelia); }
fieldset { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
legend { font-weight: 800; font-size: 20px; margin: 18px 0 8px; padding: 0; }

/* Sur mesure */
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
@media (min-width: 760px) { .onglets { grid-template-columns: repeat(4, 1fr); } }
.onglets button { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; background: #fff; border: 2px solid var(--kraft); color: var(--encre); font: 800 17px var(--texte); text-align: center; padding: 6px; cursor: pointer; }
.onglets button[aria-selected=true] { background: var(--encre); color: #fff; border-color: var(--encre); }
.config { margin-top: 18px; display: grid; gap: 18px; }
@media (min-width: 760px) { .config { grid-template-columns: 1fr 1.1fr; align-items: start; } .apercu { position: sticky; top: 12px; } }
.apercu { background: var(--kraft-clair); border-radius: 22px; padding: 18px; text-align: center; box-shadow: var(--ombre); min-width: 0; }
.apercu .scene { min-height: 230px; display: grid; place-items: center; }
.apercu .resume { font-size: 16px; margin: 8px 0; overflow-wrap: anywhere; }
.apercu .prixsm { font-family: var(--titre); font-size: 1.6rem; color: var(--camelia); }
.lettres-ap { font-family: "Arial Black", "Segoe UI Black", var(--texte); font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: 2px; word-break: break-all; max-width: 100%; }
.lettres-ap span { -webkit-text-stroke: 2px rgba(255,255,255,.7); text-shadow: 0 4px 10px rgba(0,0,0,.18); }
.damier { display: grid; grid-template-columns: repeat(8, 1fr); border: 8px solid var(--encre); border-radius: 6px; box-shadow: var(--ombre); }
.damier i { aspect-ratio: 1; }
.legende { font-size: 15px; color: var(--encre-douce); }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--kraft); cursor: pointer; position: relative; padding: 0; }
.pastille[aria-pressed=true] { box-shadow: 0 0 0 4px var(--encre); }
.pastille[aria-pressed=true]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 900; text-shadow: 0 1px 3px #000a; }
.pastille.clair[aria-pressed=true]::after { color: var(--encre); text-shadow: none; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix button { min-height: 52px; min-width: 52px; padding: 8px 16px; border-radius: 14px; border: 2px solid var(--kraft); background: #fff; font: 700 18px var(--texte); color: var(--encre); cursor: pointer; }
.choix button[aria-pressed=true] { background: var(--encre); color: #fff; border-color: var(--encre); }
.bientot { background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--ombre); margin-top: 18px; }

/* ===== Espace créatrice : très gros, une chose par écran ===== */
body.vendeuse { background: #fffaf4; font-size: 20px; }
.v-entete { background: var(--encre); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-entete a { color: #fff; font-weight: 800; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 12px; border: 2px solid #fff7; border-radius: 12px; font-size: 18px; }
.v-entete b { font-size: 20px; margin-right: auto; }
.v-page { max-width: 640px; margin: auto; padding: 20px 16px 40px; }
.v-page h1 { font-size: 1.9rem; }
.tuiles { display: grid; gap: 16px; }
@media (min-width: 760px) { .tuiles { grid-template-columns: 1fr 1fr; } }
.tuile { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 20px; text-decoration: none; color: #fff; font-size: 24px; font-weight: 800; min-height: 100px; box-shadow: var(--ombre); position: relative; }
.tuile .ico { font-size: 40px; width: 56px; text-align: center; flex: none; }
.tuile .badge { position: absolute; top: 10px; right: 12px; background: #fff; color: var(--camelia); border-radius: 999px; padding: 2px 12px; font-size: 18px; }
.tuile.t1 { background: var(--camelia); } .tuile.t2 { background: var(--turquoise); } .tuile.t3 { background: var(--feuille); } .tuile.t4 { background: var(--prune); }
.etapes { display: flex; gap: 6px; margin: 4px 0 16px; }
.etapes span { flex: 1; height: 10px; border-radius: 10px; background: var(--kraft-clair); }
.etapes span.fait { background: var(--feuille); }
.grosbouton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 150px; border: 3px dashed var(--kraft); border-radius: 20px; background: #fff; font: 800 22px var(--texte); color: var(--encre); cursor: pointer; }
.grosbouton .ico { font-size: 46px; }
label.grosbouton { position: relative; }
label.grosbouton:focus-within { outline: 3px solid var(--rose); outline-offset: 2px; }
.fichier-cache { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bas { display: flex; gap: 12px; margin-top: 24px; }
.bas .bouton { flex: 1; min-height: 64px; font-size: 20px; }
.vignettes-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.vignettes-v figure { margin: 0; position: relative; }
.vignettes-v img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.vignettes-v .x { position: absolute; top: 6px; right: 6px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; font-weight: 900; color: var(--camelia); box-shadow: var(--ombre); cursor: pointer; }
.vignettes-v .une { position: absolute; left: 6px; bottom: 6px; background: var(--encre); color: #fff; font-size: 14px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cats button { min-height: 90px; border-radius: 18px; border: 3px solid var(--kraft); background: #fff; font: 800 20px var(--texte); color: var(--encre); cursor: pointer; padding: 8px; }
.cats button[aria-pressed=true] { background: var(--encre); color: #fff; border-color: var(--encre); }
.euros { position: relative; } .euros input { font-size: 40px; font-weight: 800; padding-right: 60px; text-align: center; }
.euros span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 34px; font-weight: 800; }
.verif { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--ombre); }
.verif img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.ligne { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--kraft); align-items: center; }
.ligne button { font: 800 18px var(--texte); min-height: 48px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--kraft); background: #fff; color: var(--camelia); cursor: pointer; flex: none; }
.carte-v { background: #fff; border-radius: 18px; box-shadow: var(--ombre); padding: 14px; margin-bottom: 16px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.carte-v img, .carte-v .sansphoto { width: 96px; height: 120px; object-fit: cover; border-radius: 12px; background: var(--kraft-clair); }
.carte-v b { font-size: 21px; display: block; overflow-wrap: anywhere; }
.carte-v .boutons, .carte-v .confirmer { grid-column: 1 / -1; }
.boutons { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 500px) { .boutons { grid-template-columns: 1fr 1fr; } }
.boutons .bouton { min-height: 56px; font-size: 18px; }
.et { font-size: 15px; font-weight: 800; padding: 3px 12px; border-radius: 999px; background: var(--rose-pale); color: var(--camelia); display: inline-block; }
.et.attente, .et.cachee { background: #fff3d6; color: #7a4f00; } .et.payee, .et.disponible { background: #e3f0df; color: var(--feuille); }
.et.vendue, .et.terminee, .et.annulee { background: #ece6e1; color: var(--encre); }
.cmd { background: #fff; border-radius: 18px; box-shadow: var(--ombre); padding: 16px; margin-bottom: 16px; border-left: 8px solid var(--kraft); }
.cmd.nouvelle { border-left-color: var(--camelia); }
.cmd .tete { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmd b { font-size: 21px; overflow-wrap: anywhere; }
.cmd p { margin: 8px 0; overflow-wrap: anywhere; }
.pastille-mini { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--kraft); }
details.bloc { background: #fff; border-radius: 18px; box-shadow: var(--ombre); margin-bottom: 14px; overflow: hidden; }
details.bloc summary { list-style: none; cursor: pointer; padding: 18px; font-size: 22px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 10px; }
details.bloc summary::-webkit-details-marker { display: none; }
details.bloc summary::after { content: "▼"; font-size: 18px; color: var(--kraft); }
details.bloc[open] summary::after { content: "▲"; }
.corps { padding: 0 18px 18px; }
.px { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--kraft); }
.px label { font-size: 19px; }
.px .champ { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 20px; flex: none; }
.px input[type=text] { width: 110px; text-align: center; font-weight: 800; }
.px.del { flex-wrap: wrap; } .px.del input { width: 100%; text-align: left; }
.interrupteur { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; }
.interrupteur input { width: 30px; height: 30px; accent-color: var(--feuille); flex: none; }
.confirmer { background: #fff3d6; border-radius: 14px; padding: 14px; margin-top: 12px; }
.attente { text-align: center; padding: 30px 0; font-size: 22px; }

/* ===== v2 (18/10/2026) : catalogue vide, images d'exemple, couleur par lettre, savoir-faire, espace créatrice ===== */
.fond-heros { position: relative; min-height: 150px; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre);
  background: linear-gradient(135deg, var(--rose-pale), var(--kraft-clair)); }
.fond-heros span { position: absolute; border-radius: 50%; opacity: .75; }
.fond-heros .b1 { width: 120px; height: 120px; left: 12%; top: 18%; background: radial-gradient(circle at 35% 35%, #fff9, var(--rose)); }
.fond-heros .b2 { width: 90px; height: 90px; left: 48%; top: 46%; background: radial-gradient(circle at 35% 35%, #fff9, var(--turquoise)); }
.fond-heros .b3 { width: 70px; height: 70px; left: 70%; top: 12%; background: radial-gradient(circle at 35% 35%, #fff9, var(--or)); }
@media (min-width: 760px) { .fond-heros { min-height: 320px; } }
.sansphoto { display: block; aspect-ratio: 1; width: 100%; background: linear-gradient(135deg, var(--rose-pale), var(--kraft-clair)); }
.fiche .sansphoto { aspect-ratio: 3 / 4; }
.sm span.sansphoto { position: static; padding: 0; background: linear-gradient(135deg, var(--rose-pale), var(--kraft-clair)); }
.demo button { margin-left: 8px; min-height: 30px; padding: 2px 12px; border-radius: 999px; border: 0; background: #fff; color: var(--encre); font: 700 14px var(--texte); cursor: pointer; }
.demo { line-height: 1.5; }
.demo button { margin-top: 2px; margin-bottom: 2px; }
.ou-adresse { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; width: 100%; }
.ou-adresse input { flex: 1 1 200px; min-width: 0; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.puce { width: 52px; height: 52px; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--kraft); cursor: pointer; padding: 0;
  font: 800 26px var(--titre); color: #fff; text-shadow: 0 1px 3px #0008; }
.puce.clair { color: var(--encre); text-shadow: none; }
.puce[aria-pressed=true] { box-shadow: 0 0 0 4px var(--encre); }
.vide-ap { color: var(--encre-douce); font-size: 28px; opacity: .6; }
.lien { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 700 16px var(--texte); color: var(--turquoise); text-decoration: underline; cursor: pointer; }
.choix button .mini { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
.exemple { margin: 14px 0 0; }
.exemple img { width: 100%; max-height: 190px; object-fit: cover; border-radius: 14px; box-shadow: var(--ombre); }
.exemple figcaption { font-size: 14px; color: var(--encre-douce); margin-top: 4px; }
.savoir-faire { background: #fff; border-radius: 16px; padding: 14px 16px; margin-top: 16px; box-shadow: var(--ombre); }
.savoir-faire h2 { font-size: 1.2rem; margin: 0 0 6px; }
.savoir-faire p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Espace créatrice : offres (nom, prix, image), couleurs, savoir-faire */
.corps .sous-titre { font: 800 19px var(--texte); margin: 20px 0 4px; }
.offre { padding: 12px 0; border-bottom: 1px dashed var(--kraft); display: grid; gap: 8px; }
.offre .ligne-nom { display: flex; gap: 10px; align-items: center; }
.offre .ligne-nom input[type=text] { flex: 1; min-width: 0; }
.offre .ligne-prix { display: flex; align-items: center; gap: 8px; font-weight: 800; flex-wrap: wrap; }
.offre .ligne-prix input[type=text] { width: 100px; text-align: center; }
.offre .ligne-image { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vignette-ex { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--kraft-clair); flex: none; }
.vignette-ex.vide { display: grid; place-items: center; font-size: 12px; color: var(--encre-douce); text-align: center; padding: 4px; }
.petit { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 2px solid var(--kraft); background: #fff; font: 700 16px var(--texte); color: var(--encre); cursor: pointer; position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.petit.danger { border-color: var(--camelia); color: var(--camelia); }
.petit input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ajout { background: var(--kraft-clair); border-radius: 14px; padding: 12px; margin-top: 12px; display: grid; gap: 8px; }
.ajout label { font-weight: 800; }
.ajout input[type=color], .couleur-ligne input[type=color] { width: 56px; height: 46px; padding: 2px; border: 2px solid var(--kraft); border-radius: 10px; background: #fff; }
.couleur-ligne { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--kraft); }
.couleur-ligne .ligne2 { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.couleur-ligne select, .ajout select { min-height: 44px; font: 600 16px var(--texte); border-radius: 10px; border: 2px solid var(--kraft); padding: 4px 8px; background: #fff; }
.vide-v { background: var(--rose-pale); border-radius: 14px; padding: 14px; font-size: 18px; }
textarea.grand { width: 100%; min-height: 130px; }

/* ===== v4 (18/10/2026) : ce que la créatrice crée apparaît partout, et elle le voit ===== */
.demo a { color: #fff; font-weight: 800; margin-left: 8px; display: inline-flex; align-items: center; min-height: 30px; padding: 2px 6px; }
.etiquette.surmesure { background: var(--prune); }
.tuile .badge { position: static; display: inline-block; margin-left: 8px; vertical-align: middle; }
.fiche .a-vous { display: block; font-size: 14px; color: var(--encre-douce); font-weight: 700; }
.vitrine { background: #fff; border-radius: 18px; box-shadow: var(--ombre); padding: 14px 16px; margin: 0 0 18px; border-top: 6px solid var(--feuille); }
.vitrine h2 { font: 800 21px var(--texte); margin: 0 0 10px; }
.vitrine-cartes { display: grid; gap: 10px; }
.v-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px;
  background: #fff3d6; color: var(--encre); text-decoration: none; }
.v-carte.ok { background: #e3f0df; }
.v-carte img, .v-carte .sansphoto { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; aspect-ratio: 1; }
.v-carte b { display: block; font-size: 19px; overflow-wrap: anywhere; }
.v-carte .p { font-family: var(--titre); color: var(--camelia); font-size: 18px; display: block; }
.v-carte .vu { color: var(--feuille); font-weight: 800; font-size: 16px; display: block; }
.v-carte .manque { display: block; font-size: 16px; margin: 2px 0 6px; }
.v-liens { margin: 6px 0 0; font-size: 16px; }
.statut-produit { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #fff3d6; font-size: 17px; font-weight: 700; }
.statut-produit.ok { background: #e3f0df; color: var(--feuille); }
.offre.sans-prix .ligne-prix input { border-color: var(--or-fonce); background: #fffaf0; }
.sauve { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 18px; border-radius: 999px;
  background: #fff; box-shadow: var(--ombre); font-weight: 800; font-size: 17px; color: var(--encre-douce); opacity: 0;
  transition: opacity .3s; pointer-events: none; z-index: 30; white-space: nowrap; }
.sauve.visible { opacity: 1; }
.sauve.ok { color: var(--feuille); }
/* v4 ter : couleurs sur une ligne, grande palette, adresse d'image rangée derrière un lien */
.couleur-ligne { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "teinte nom suppr" "aspect aspect proposee";
  gap: 6px 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--kraft); }
.couleur-ligne [data-chex] { grid-area: teinte; width: 52px; height: 46px; padding: 2px; border: 2px solid var(--kraft); border-radius: 10px; background: #fff; }
.couleur-ligne [data-cnom] { grid-area: nom; min-width: 0; }
.couleur-ligne select { grid-area: aspect; }
.couleur-ligne .interrupteur { grid-area: proposee; padding: 0; font-size: 17px; }
.couleur-ligne .danger { grid-area: suppr; justify-content: center; padding: 6px; justify-self: end; width: 48px; }
@media (min-width: 620px) { .couleur-ligne { grid-template-columns: 52px minmax(0, 1fr) 150px auto 48px; grid-template-areas: "teinte nom aspect proposee suppr"; } }
.palette { margin: 14px 0 4px; }
.palette-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.pal { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid var(--kraft);
  background: #fff; font: 700 15px var(--texte); color: var(--encre); cursor: pointer; text-align: left; }
.pal.deja { opacity: .55; cursor: default; }
.pastille-pal { width: 32px; height: 32px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px #0002; }
button.lien[data-montrer-url] { font-size: 15px; padding: 6px 0; }
.resume-v { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--ombre); font-size: 18px; }
.tuile small { display: block; font-size: 16px; font-weight: 600; opacity: .92; margin-top: 2px; }
/* 19/10/2026 : moyens de paiement de la créatrice et message « prix + paiement » */
.et.attente { padding: 3px 12px; font-size: 15px; text-align: left; }   /* « .attente » (écran de chargement) la gonflait en grosse pastille */
.carte-paiement { border-left-color: var(--turquoise); }
.carte-paiement .lien { padding: 0; min-height: 44px; font-size: 18px; }
.reg-champ { display: block; font-weight: 800; font-size: 19px; margin: 14px 0 6px; }
.a-faire { margin-top: 12px; border-left: 5px solid var(--camelia); }
.cmd-prix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.cmd-prix label { font-weight: 800; font-size: 17px; }
.cmd-prix input { text-align: center; font-weight: 800; font-size: 22px; margin-top: 4px; }
.cmd-total { font-size: 20px; margin: 8px 0; }
.cmd-prix-bloc { border-top: 1px dashed var(--kraft); margin-top: 8px; padding-top: 4px; }
/* 19/10/2026 : paiement par carte ou PayPal (Stripe) — page « Payer » et lignes de l'espace créatrice */
.paiement-choix { border: 0; padding: 0; margin: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#element-paiement { margin-top: 18px; min-height: 40px; }
.cmd-paye { color: var(--feuille); font-weight: 800; }
.carte-paiement .aide b { font-size: inherit; }
.cmd-lien-carte { font-size: 16px; }
/* 19/10/2026 : couleurs proposées produit par produit (« Mes couleurs » : 4 gros boutons, un par produit) */
.coul-produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.coul-onglet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 10px; border-radius: 16px;
  border: 2px solid var(--kraft); background: #fff; color: var(--encre); font: 600 16px var(--texte); cursor: pointer; text-align: center; }
.coul-onglet b { font-size: 18px; }
.coul-onglet.actif { background: var(--feuille); border-color: var(--feuille); color: #fff; }
.coul-panneau { background: var(--creme); border: 2px solid var(--kraft); border-radius: 16px; padding: 12px; margin-bottom: 8px; }
.coul-panneau .q { font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.coul-outils { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.coul-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.coul-case { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--kraft); background: #fff; font-weight: 700; cursor: pointer; }
.coul-case input { width: 28px; height: 28px; accent-color: var(--feuille); flex: none; }
.coul-case:has(input:checked) { border-color: var(--feuille); box-shadow: inset 0 0 0 1px var(--feuille); }
.coul-nom { min-width: 0; overflow-wrap: anywhere; }
.coul-ligne { margin: 6px 0 10px; font-size: 17px; }
.coul-ligne .lien { padding: 0 0 0 4px; }

/* Paillettes (19/10/2026) : espace créatrice (liste, palette, produits avec prix) et page « Sur mesure » */
.pa-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.pa-case { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 56px; padding: 4px 10px 4px 10px; border-radius: 18px; border: 2px solid var(--kraft); background: #fff; opacity: .8; }
.pa-case.coche { opacity: 1; border-color: var(--feuille); box-shadow: inset 0 0 0 1px var(--feuille); }
.pa-propose { display: flex; align-items: center; gap: 10px; flex: 1 1 190px; min-width: 0; font-weight: 700; cursor: pointer; }
.pa-propose input { width: 28px; height: 28px; accent-color: var(--feuille); flex: none; }
.pa-prix { display: flex; align-items: center; gap: 6px; font-weight: 800; flex: none; }
.pa-prix { flex-basis: 100%; }
.pa-prix input { width: 92px; min-height: 44px; }
/* 20/10/2026 (maman_espace_simple) : couleurs, paillettes et finitions DANS le bloc de chaque produit */
.jetons { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jeton { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 4px 4px 6px; border-radius: 999px; border: 2px solid var(--kraft); background: #fff; font-weight: 700; max-width: 100%; }
.jeton-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--camelia); font: 800 18px var(--texte); cursor: pointer; }
.jeton-x:hover, .jeton-x:focus-visible { background: #fbe9ec; }
.corps > .bouton.doux { margin: 4px 0 8px; }
.corps .palette .palette-grille { max-height: 300px; overflow-y: auto; padding: 2px; }   /* liste de palette courte à l'écran : elle défile dedans */
.famille { font: 800 17px var(--texte); margin: 12px 0 2px; }
.pa-case .pa-propose { cursor: default; }
.pa-case .pa-note { margin: 0; }
.pa-case.manque .pa-prix input { border-color: var(--camelia); background: #fff3f3; }
.pa-note { flex-basis: 100%; margin: 0 0 4px; font-size: 15px; color: var(--camelia); font-weight: 700; }
.pa-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pa-ligne input[type=text] { flex: 1 1 140px; min-width: 0; }
.pa-ligne input[type=color] { width: 52px; height: 52px; padding: 2px; flex: none; }
.pa-mini { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: -5px; margin-right: 8px; box-shadow: inset 0 0 0 1px #0003; }
.scene { position: relative; }
.scene.pailletee::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 16px;
  background: radial-gradient(circle, #fff 0 1px, transparent 1.7px) 4px 6px/15px 15px, radial-gradient(circle, var(--pa, #d2bf60) 0 1.8px, transparent 2.6px) 0 0/11px 11px;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 78%); mask-image: radial-gradient(circle at center, #000 30%, transparent 78%); }
/* 19/10/2026 (maman_apercu_finitions) : la finition choisie est dessinée sur l'aperçu de l'échiquier */
.damier-cadre { position: relative; }
.damier-cadre .fx-damier { position: absolute; inset: 8px; pointer-events: none; opacity: .85; }
.damier-cadre .fx-damier[data-fx="brillant"] { opacity: 1; }
.scene.pailletee.holo::after { background: radial-gradient(circle, #fff 0 1px, transparent 1.7px) 3px 5px/12px 12px,
  conic-gradient(from 0deg at 50% 50%, #ff9ad5aa, #ffe08aaa, #9affc8aa, #8ec5ffaa, #d3a5ffaa, #ff9ad5aa); background-blend-mode: normal; opacity: .55;
  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 75%); mask-image: radial-gradient(circle at center, #000 25%, transparent 75%); }

/* 20/10/2026 (maman_suivi_commande) : page « Ma commande », les étapes cochées */
.suivi-etapes { list-style: none; margin: 22px 0 0; padding: 0; }
.suivi-etapes li { position: relative; display: flex; gap: 14px; padding: 0 0 22px; }
.suivi-etapes li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 3px; background: var(--kraft-clair); }
.suivi-etapes li.fait:not(:last-child)::before { background: var(--feuille); }
.suivi-etapes .rond-etape { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px;
  background: #fff; color: var(--encre-douce); border: 3px solid var(--kraft-clair); }
.suivi-etapes li.fait .rond-etape { background: var(--feuille); border-color: var(--feuille); color: #fff; }
.suivi-etapes li.ici .rond-etape { background: var(--camelia); border-color: var(--camelia); color: #fff; box-shadow: 0 0 0 5px var(--rose-pale); }
.suivi-etapes .corps-etape { min-width: 0; padding-top: 3px; }
.suivi-etapes .nom-etape { font-weight: 800; font-size: 19px; line-height: 1.25; }
.suivi-etapes li.venir .nom-etape { color: var(--encre-douce); font-weight: 700; }
.suivi-etapes .detail-etape { color: var(--encre); font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.suivi-etapes .date-etape { color: var(--encre-douce); font-size: 15px; margin-top: 2px; }
.suivi-etapes .suivi-colis { display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 8px; background: var(--kraft-clair); font-weight: 800; letter-spacing: .02em; overflow-wrap: anywhere; }
#suivi .ligne-resume { margin-top: 4px; overflow-wrap: anywhere; }