/* Aperçu du simulateur : une base commune, puis une vraie identité par métier (data-metier) */
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url(fonts/archivo-black.woff2) format("woff2"); font-display: swap; }

.phone-screen {
  --fond: #f6f6f6; --carte: #fff; --texte: #222; --doux: #666;
  --accent: #333; --sur-accent: #fff;
  --titre: Inter, sans-serif; --titre-poids: 700; --titre-style: normal; --titre-casse: none; --titre-taille: 26px;
  --bouton-rayon: 999px; --carte-rayon: 16px; --logo-rayon: 50%;
  /* Proportions d'un vrai téléphone, quelle que soit la largeur */
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fond);
  border-radius: 34px;
  color: var(--texte);
  font: 400 13px/1.45 Inter, sans-serif;
  transition: background .3s;
}
.phone-screen p { margin: 0; }
.p-bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 22px 20px 12px; font: var(--titre-style) var(--titre-poids) 13px var(--titre); text-transform: var(--titre-casse); }
.p-bar-nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; }
.p-menu { display: grid; gap: 3px; }
.p-menu i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.p-hero { flex: 0 1 auto; min-height: 0; overflow: hidden; margin: 0 12px; padding: 22px 18px; text-align: center; background: var(--carte); border-radius: var(--carte-rayon); }
.p-logo {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--logo-rayon); background: var(--accent); color: var(--sur-accent);
  font: var(--titre-style) var(--titre-poids) 24px var(--titre);
}
.p-logo .icon { width: 26px; height: 26px; }
.p-surtitre { margin-top: 10px !important; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.p-titre {
  margin-top: 4px !important; overflow-wrap: anywhere; color: var(--accent);
  font: var(--titre-style) var(--titre-poids) var(--titre-taille)/1.1 var(--titre); text-transform: var(--titre-casse);
}
.p-accroche { margin-top: 8px !important; color: var(--doux); }
.p-bouton {
  display: inline-block; margin-top: 14px; padding: 10px 16px; white-space: nowrap;
  border-radius: var(--bouton-rayon); background: var(--accent); color: var(--sur-accent); font-weight: 600;
}
.p-bloc { flex: none; margin: 10px 12px 0; padding: 12px 16px; background: var(--carte); border-radius: var(--carte-rayon); }
.p-label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px !important; font-weight: 700; color: var(--accent); }
.p-bloc ul { margin: 0; padding: 0 0 0 18px; }
/* Barre du bas toujours visible : si la place manque, c'est la liste des services qui est coupée */
.p-services { flex: 0 100 auto; min-height: 0; overflow: hidden; }
.p-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 12px 0; padding: 10px 0 16px; }
.p-actions span {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px;
  border-radius: var(--bouton-rayon); background: var(--accent); color: var(--sur-accent); font-weight: 600;
}

/* Fleuriste : rose poudré et vert feuillage, serif italique, tout en rondeur */
[data-metier="fleuriste"] {
  --fond: #fbeff0; --doux: #7d6266; --accent: #b2475f; --titre: "Playfair Display", serif; --titre-style: italic; --titre-taille: 28px;
  --carte-rayon: 24px;
}
[data-metier="fleuriste"] .p-logo { background: #e7efe3; color: #5f7f58; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #c7d8c1; }
[data-metier="fleuriste"] .p-hero { background: linear-gradient(180deg, #fff, #fdf5f6); }
[data-metier="fleuriste"] .p-actions span:last-child { background: #5f7f58; }

/* Restaurant : bistrot sombre, or et crème, boutons carrés à liseré */
[data-metier="restaurant"] {
  --fond: #1d1916; --carte: #29231f; --texte: #f1e7d8; --doux: #bfae97; --accent: #d1a650; --sur-accent: #1d1916;
  --titre: Fraunces, serif; --titre-taille: 28px; --bouton-rayon: 2px; --carte-rayon: 4px; --logo-rayon: 50%;
}
[data-metier="restaurant"] .p-logo { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--carte), inset 0 0 0 6px var(--accent); }
[data-metier="restaurant"] .p-hero { border: 1px solid #3a322b; }
[data-metier="restaurant"] .p-surtitre::before, [data-metier="restaurant"] .p-surtitre::after { content: " — "; color: var(--accent); }
[data-metier="restaurant"] .p-bouton { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
[data-metier="restaurant"] .p-bloc { border: 1px solid #3a322b; }

/* Boulangerie : blé doré et brun, ardoise écrite à la craie */
[data-metier="boulangerie"] {
  --fond: #f4e6cc; --carte: #fffaf0; --doux: #7a5a3a; --accent: #8b4a1f; --titre: Caveat, cursive; --titre-taille: 38px;
  --bouton-rayon: 10px; --carte-rayon: 12px;
}
[data-metier="boulangerie"] .p-bar { font-size: 22px; }
[data-metier="boulangerie"] .p-logo { background: #e9b949; color: #6b3812; }
[data-metier="boulangerie"] .p-services { background: #2e3436; color: #f4f1ea; font: 700 18px/1.25 Caveat, cursive; }
[data-metier="boulangerie"] .p-services .p-label { color: #f4f1ea; font: 700 20px Caveat, cursive; }
[data-metier="boulangerie"] .p-services ul { list-style: "– "; }

/* Coiffeur : noir et blanc, capitales espacées, boutons rectangulaires */
[data-metier="coiffeur"] {
  --fond: #fff; --carte: #f4f4f4; --texte: #111; --doux: #6b6b6b; --accent: #111;
  --titre-poids: 800; --titre-casse: uppercase; --titre-taille: 24px; --bouton-rayon: 0; --carte-rayon: 0; --logo-rayon: 0;
}
[data-metier="coiffeur"] .p-titre { letter-spacing: .08em; }
[data-metier="coiffeur"] .p-hero { background: #111; color: #fff; }
[data-metier="coiffeur"] .p-hero .p-titre { color: #fff; }
[data-metier="coiffeur"] .p-hero .p-surtitre, [data-metier="coiffeur"] .p-hero .p-accroche { color: #bdbdbd; }
[data-metier="coiffeur"] .p-logo { background: #fff; color: #111; }
[data-metier="coiffeur"] .p-hero .p-bouton { background: #d4b483; color: #111; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
[data-metier="coiffeur"] .p-label { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* Institut : nude et rosé, élégance, boutons à contour */
[data-metier="institut"] {
  --fond: #f5ebe6; --carte: #fffaf7; --texte: #4a3b36; --doux: #8c7469; --accent: #a5705f;
  --titre: "Playfair Display", serif; --titre-style: italic; --titre-taille: 28px; --carte-rayon: 30px;
}
[data-metier="institut"] .p-logo { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-metier="institut"] .p-bouton, [data-metier="institut"] .p-actions span { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-metier="institut"] .p-hero { padding: 26px 18px; }

/* Artisan du bâtiment : anthracite et jaune chantier, capitales grasses, angles droits */
[data-metier="artisan"] {
  --fond: #e9e9e6; --carte: #fff; --texte: #1f2328; --doux: #5b6168; --accent: #1f2328; --sur-accent: #f5b301;
  --titre: "Archivo Black", sans-serif; --titre-poids: 400; --titre-casse: uppercase; --titre-taille: 23px;
  --bouton-rayon: 4px; --carte-rayon: 4px; --logo-rayon: 4px;
}
[data-metier="artisan"] .p-hero { position: relative; overflow: hidden; background: #1f2328; color: #fff; padding-bottom: 30px; }
[data-metier="artisan"] .p-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(-45deg, #f5b301 0 10px, #1f2328 10px 20px);
}
[data-metier="artisan"] .p-hero .p-titre { color: #fff; }
[data-metier="artisan"] .p-hero .p-surtitre, [data-metier="artisan"] .p-hero .p-accroche { color: #c3c7cc; }
[data-metier="artisan"] .p-logo { background: #f5b301; color: #1f2328; }
[data-metier="artisan"] .p-bouton { background: #f5b301; color: #1f2328; text-transform: uppercase; font-weight: 800; letter-spacing: .04em; }
[data-metier="artisan"] .p-label { color: #1f2328; text-transform: uppercase; }
[data-metier="artisan"] .p-label .icon { color: #f5b301; }

/* Thérapeute : sauge et blanc, calme et aéré */
[data-metier="therapeute"] {
  --fond: #edf3f0; --carte: #fff; --texte: #2d3b38; --doux: #6b7d78; --accent: #4f7f74;
  --titre: Fraunces, serif; --titre-poids: 600; --titre-taille: 26px; --carte-rayon: 20px; --logo-rayon: 40% 60% 55% 45%;
}
[data-metier="therapeute"] .p-logo { background: #dbe8e3; color: var(--accent); }
[data-metier="therapeute"] .p-hero { text-align: left; }

/* Boutique / épicerie fine : papier kraft, tampon, vert bouteille */
[data-metier="boutique"] {
  --fond: #e9dcc6; --carte: #f8f1e4; --texte: #2f2a22; --doux: #6e604c; --accent: #2f4a3a;
  --titre: Fraunces, serif; --titre-taille: 27px; --bouton-rayon: 6px; --carte-rayon: 6px;
}
[data-metier="boutique"] .p-logo { background: transparent; color: var(--accent); border: 2px dashed var(--accent); transform: rotate(-8deg); }
[data-metier="boutique"] .p-hero { border: 1px solid #d6c5a8; }
[data-metier="boutique"] .p-actions span:last-child { background: #a0522d; }

/* Petits écrans : en-tête plus compact pour que tout tienne */
@media (max-width: 600px) {
  .phone-screen { font-size: 12px; }
  .p-bar { padding: 18px 18px 10px; }
  .p-hero { padding: 16px 14px !important; }
  .p-logo { width: 44px; height: 44px; font-size: 20px; }
  .p-logo .icon { width: 22px; height: 22px; }
  .p-titre { font-size: calc(var(--titre-taille) * .85); }
  .p-bouton { margin-top: 10px; padding: 8px 14px; }
  .p-bloc { padding: 10px 14px; }
}