/* Palette relevee sur bonjoursoleil.fr le 14/09/2026 */
:root{
  --creme:#FDFAF2;
  --jaune:#FFC805;
  --ambre:#E8A020;
  --terracotta:#8F513A;
  --brun-clair:#AB7A67;
  --encre:#3A2A20;
  --blanc:#FFFFFF;
  --trait:#F1E7D8;
  --rouge:#C0392B;
  --titre:"Proza Libre", Georgia, serif;
  --texte:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--creme);
  color:var(--encre);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.page{max-width:560px;margin:0 auto;padding:18px 16px 56px}

.marque{
  font-family:var(--texte);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ambre);
  margin:4px 0 22px;
}

h1{font-family:var(--titre);font-size:27px;line-height:1.25;margin:0 0 6px}
h2{font-family:var(--titre);font-size:21px;line-height:1.3;margin:0 0 12px}
p{margin:0 0 12px}
.aide{font-size:14px;color:var(--brun-clair);margin:-4px 0 14px}

.bloc{
  background:var(--blanc);
  border-radius:16px;
  padding:18px 16px;
  margin:0 0 16px;
}

label{display:block;font-size:14px;font-weight:500;margin:0 0 6px;color:var(--terracotta)}

input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  font-family:var(--texte);
  font-size:17px;
  color:var(--encre);
  background:var(--creme);
  border:1.5px solid var(--trait);
  border-radius:10px;
}
input:focus,textarea:focus{outline:none;border-color:var(--jaune)}
textarea{min-height:74px;resize:vertical}

.mug{border-top:1px solid var(--trait);padding-top:16px;margin-top:16px}
.mug:first-of-type{border-top:0;padding-top:0;margin-top:0}
.mug-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.mug-num{font-size:14px;font-weight:500;color:var(--terracotta)}
.supprimer{
  background:none;border:0;padding:4px 0;
  font-family:var(--texte);font-size:14px;color:var(--brun-clair);
  text-decoration:underline;cursor:pointer;
}
.phrase{text-transform:uppercase}
.compteur{font-size:13px;color:var(--brun-clair);text-align:right;margin-top:4px}
.compteur.plein{color:var(--rouge)}
.apercu{
  margin-top:10px;padding:12px 14px;border-radius:10px;background:var(--creme);
  font-family:var(--titre);font-size:18px;letter-spacing:.06em;
  min-height:46px;word-break:break-word;
}
.apercu:empty::before{content:"VOTRE PHRASE APPARAIT ICI";color:#CFC3B0}

.pastilles{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pastille{
  width:74px;display:block;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--texte);text-align:center;
}
.rond{
  display:block;
  width:48px;height:48px;border-radius:50%;margin:0 auto 5px;
  border:2px solid var(--trait);box-shadow:inset 0 -6px 10px rgba(0,0,0,.06);
}
.pastille[aria-pressed=true] .rond{border-color:var(--encre);transform:scale(1.06)}
.nom-couleur{display:block;font-size:12px;line-height:1.25;color:var(--terracotta)}
.pastille[aria-pressed=true] .nom-couleur{font-weight:700;color:var(--encre)}

.bloc-ajouter{padding:12px}
.erreur-champ{
  margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--rouge);
}
.erreur-champ:empty{display:none}
input.faux{border-color:var(--rouge);background:#FCEBE8}

.ajouter{
  width:100%;min-height:50px;margin-top:0;
  background:var(--creme);border:1.5px dashed var(--ambre);border-radius:10px;
  font-family:var(--texte);font-size:16px;color:var(--terracotta);cursor:pointer;
}

.choix{display:grid;gap:10px}
.carte-choix{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--creme);border:1.5px solid var(--trait);border-radius:12px;
  padding:14px;font-family:var(--texte);font-size:16px;color:var(--encre);
}
.carte-choix[aria-pressed=true]{border-color:var(--jaune);background:#FFF8E0}
.carte-choix .detail{display:block;font-size:14px;color:var(--brun-clair);margin-top:3px}

.champs-relais{margin-top:14px;display:grid;gap:12px}
.champs-relais[hidden]{display:none}
.duo{display:grid;grid-template-columns:1fr 1.6fr;gap:12px}

.recap-ligne{display:flex;justify-content:space-between;padding:7px 0;font-size:16px}
.recap-total{
  display:flex;justify-content:space-between;
  border-top:1.5px solid var(--trait);margin-top:8px;padding-top:12px;
  font-family:var(--titre);font-size:21px;
}
.offert{color:var(--ambre);font-weight:500}

.case{display:flex;gap:12px;align-items:flex-start;margin:16px 0 4px;cursor:pointer}
.case input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ambre)}
.case span{font-size:15px;line-height:1.45}

.principal{
  width:100%;min-height:58px;margin-top:16px;
  background:var(--jaune);color:var(--encre);
  border:0;border-radius:12px;
  font-family:var(--texte);font-size:19px;font-weight:700;cursor:pointer;
}
.principal:disabled{opacity:.45;cursor:not-allowed}

.erreur{
  background:#FCEBE8;color:var(--rouge);border-radius:10px;
  padding:12px 14px;margin:12px 0 0;font-size:15px;
}
.erreur:empty{display:none}

/* Ecran de confirmation */
.code-geant{
  background:var(--jaune);border-radius:18px;text-align:center;
  padding:26px 16px;margin:0 0 18px;
}
.code-geant .valeur{
  font-family:var(--titre);font-size:96px;line-height:1;font-weight:700;
  letter-spacing:.04em;display:block;
}
.code-geant .consigne{display:block;margin-top:12px;font-size:17px;font-weight:500}
.montant{font-family:var(--titre);font-size:30px;margin:0 0 6px}

/* Ecran liste */
.onglets{display:flex;gap:6px;margin:0 0 16px;overflow-x:auto;padding-bottom:2px}
.onglet{
  flex:0 0 auto;min-height:44px;padding:9px 14px;cursor:pointer;
  background:var(--blanc);border:1.5px solid var(--trait);border-radius:999px;
  font-family:var(--texte);font-size:15px;color:var(--terracotta);white-space:nowrap;
}
.onglet[aria-pressed=true]{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.onglet .n{font-weight:700}

.commande{background:var(--blanc);border-radius:14px;padding:14px;margin:0 0 12px}
.commande.attente{background:#FFF4CC}
.commande-tete{display:flex;align-items:center;gap:12px}
.code{
  font-family:var(--titre);font-size:32px;font-weight:700;line-height:1;
  letter-spacing:.03em;flex:0 0 auto;
}
.qui{flex:1 1 auto;min-width:0}
.qui .nom{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qui .meta{font-size:14px;color:var(--brun-clair)}
.somme{font-family:var(--titre);font-size:22px;flex:0 0 auto}

.mugs-liste{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.mugs-liste li{display:flex;align-items:center;gap:10px;font-size:16px}
.puce{display:block;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--trait);flex:0 0 auto}

.action{
  width:100%;min-height:52px;margin-top:12px;cursor:pointer;
  background:var(--encre);color:var(--creme);border:0;border-radius:11px;
  font-family:var(--texte);font-size:17px;font-weight:700;
}
.action.jaune{background:var(--jaune);color:var(--encre)}
.action.douce{background:var(--creme);color:var(--terracotta);border:1.5px solid var(--trait);font-weight:500;font-size:15px;min-height:46px}

.replis{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
summary{cursor:pointer;font-size:15px;color:var(--terracotta);min-height:32px}
.replis a{color:var(--terracotta)}
.adresse{background:var(--creme);border-radius:10px;padding:12px;margin:12px 0 0;font-size:15px;line-height:1.5}
.vide{text-align:center;color:var(--brun-clair);padding:40px 10px}
.recherche{width:100%;margin-bottom:12px}