/*
 * Ce qui n'existe que pour la maquette : la barre du haut, l'adresse du portail, les fenêtres imitées (Windows,
 * le téléphone, la messagerie), le QR code simulé. Rien de ceci ne passe dans le produit. Le reste vient de
 * web/style.css, la feuille de l'application.
 */

/* ── les couleurs de chaque portail (comme web/theme.js le ferait) ── */
html[data-portail="ait"] { --principale: #4f4a9e; --principale-fonce: #3f3a86; }
html[data-portail="dupont"] { --principale: #2f7389; --principale-fonce: #235a6c; }
html[data-portail="pilote"] { --principale: #8a5a2b; --principale-fonce: #6e4520; }
@media (prefers-color-scheme: dark) {
  html[data-portail] { --principale-fonce: var(--principale); }
  html[data-portail="ait"] { --principale: #9d97e6; }
  html[data-portail="dupont"] { --principale: #6cb8cf; }
  html[data-portail="pilote"] { --principale: #d39a63; }
}

/* ── la barre de la maquette ── */
#barre-maquette {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 12px; background: #1b2130; color: #e9ecf3; font-size: .85rem;
}
#barre-maquette .maq-titre { font-weight: 700; letter-spacing: .02em; }
#barre-maquette .maq-titre span { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 999px; background: #f2b33d; color: #1b2130; }
#barre-maquette select { min-height: 34px; max-width: 100%; border-radius: 8px; border: 1px solid #3a4258; background: #262e40; color: #e9ecf3; padding: 0 8px; }
#barre-maquette .maq-pas { display: inline-flex; align-items: center; gap: 6px; }
#barre-maquette .maq-pas button { min-height: 34px; min-width: 40px; border-radius: 8px; border: 1px solid #3a4258; background: #262e40; color: #e9ecf3; cursor: pointer; font-weight: 700; }
#barre-maquette .maq-pas button:disabled { opacity: .35; cursor: default; }
#barre-maquette .maq-ou { flex-basis: 100%; color: #b9c0d3; }
#barre-maquette .maq-ou b { color: #fff; }
html.capture #barre-maquette { display: none; }

/* ── l'adresse du portail, comme la barre d'adresse du navigateur ── */
.maq-adresse {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--carte); border-bottom: 1px solid var(--ligne);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; color: var(--doux); overflow-wrap: anywhere;
}
.maq-adresse::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vert); flex: none; }

/* ── une note de la maquette (ce qui serait fait par le système, ou hors de la maquette) ── */
.maq-note { margin-top: 12px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed #c9a23a; color: var(--texte); font-size: .85rem; background: color-mix(in srgb, #f2b33d 10%, var(--carte)); }
.maq-note b { color: #9a7413; }
@media (prefers-color-scheme: dark) { .maq-note b { color: #f2c76a; } }

/* ── les fenêtres imitées (Windows, téléphone, messagerie) ── */
.maq-scene { min-height: calc(100dvh - 60px); display: grid; place-items: center; padding: 24px 16px; background: color-mix(in srgb, var(--texte) 6%, var(--fond)); }
.maq-fenetre { width: min(560px, 100%); background: var(--carte); border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .22); overflow: hidden; border: 1px solid var(--ligne); }
.maq-fenetre.large { width: min(760px, 100%); }
.maq-fenetre-tete { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--texte) 8%, var(--carte)); font-size: .85rem; font-weight: 700; }
.maq-fenetre-tete .maq-boutons { margin-left: auto; display: flex; gap: 14px; color: var(--doux); font-weight: 400; }
.maq-fenetre-corps { padding: 20px; display: grid; gap: 14px; }
.maq-fenetre-corps h2 { font-size: 1.2rem; }
.maq-fenetre-pied { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--ligne); }
.maq-systeme { font-family: "Segoe UI", system-ui, sans-serif; }
.maq-systeme .bouton { border-radius: 6px; }
.maq-telephone { width: min(380px, 100%); border-radius: 26px; border: 10px solid #20242c; background: var(--carte); overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.maq-telephone .maq-fenetre-corps { padding: 18px; }

/* ── le programme du PC (cabinet pilote) ── */
.maq-programme .maq-fenetre-tete { background: #2b3445; color: #fff; }
.maq-programme .maq-fenetre-tete .maq-boutons { color: #c5ccdb; }
.maq-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2.2rem; font-weight: 700; letter-spacing: .12em; text-align: center; }
.maq-etapes { display: flex; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--doux); }
.maq-etapes span { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--texte) 7%, var(--carte)); }
.maq-etapes span.actif { background: var(--principale-fonce); color: #fff; }
.maq-etapes span.fait { background: var(--vert-doux); color: var(--vert); }
.maq-dossier-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.maq-dossier-ligne:last-of-type { border-bottom: 0; }
.maq-dossier-ligne .chemin { grid-column: 1; color: var(--doux); }

/* ── le QR code simulé ── */
.maq-qr { display: grid; justify-items: center; gap: 6px; }
.maq-qr svg { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 8px; }
.maq-qr .maq-qr-adresse { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; color: var(--doux); text-align: center; overflow-wrap: anywhere; }

/* ── divers éléments des écrans maquettés ── */
.maq-prochaine { border-left: 5px solid var(--principale); }
.maq-prochaine h2 { display: flex; align-items: center; gap: 8px; }
.maq-etiquette { display: inline-block; font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--principale) 16%, var(--carte)); color: var(--principale-fonce); }
.maq-etiquette.vert { background: var(--vert-doux); color: var(--vert); }
.maq-etiquette.ambre { background: var(--ambre-doux); color: var(--ambre); }
.maq-mail { display: grid; gap: 8px; font-size: .95rem; }
.maq-mail .maq-mail-champ { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.maq-mail .maq-mail-champ span:first-child { color: var(--doux); }
.maq-mail .maq-mail-texte { white-space: pre-line; line-height: 1.5; }
.maq-mail a { overflow-wrap: anywhere; }
.maq-signature { background: #fff; color: #222; border-radius: 8px; padding: 14px 18px; border: 1px solid var(--ligne); display: grid; gap: 4px; }
.maq-signature img { width: 180px; height: auto; }
.maq-partage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; font-size: .8rem; }
.maq-partage a, .maq-partage span { display: grid; justify-items: center; gap: 6px; color: inherit; text-decoration: none; }
.maq-partage i { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--texte) 9%, var(--carte)); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.maq-partage a i { background: #25a35a; color: #fff; }
.maq-bulle { background: #dcf8c6; color: #1b1b1b; border-radius: 10px; padding: 10px 12px; justify-self: end; max-width: 90%; }
.maq-bulle a { color: #0b6bcb; overflow-wrap: anywhere; }
.maq-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.maq-liste-cabinets .ligne-personne { align-items: center; }

/* ══ Tour 1 de revue : corrections à reporter dans web/style.css au moment du code ══ */

/* Le mode sombre lisible : texte foncé sur les boutons pleins quand la couleur devient claire ; rouges, ambres et
   verts éclaircis. (Dans le produit : la couleur du texte se calcule d'après celle du cabinet.) */
@media (prefers-color-scheme: dark) {
  html[data-portail] .bouton:not(.second):not(.danger) { color: #12161c; }
  :root { --rouge: #f08a74; --ambre: #e3a640; --vert: #6cc6a2; }
  .alerte svg { color: var(--ambre); }
}

/* Les étapes faites ne sont pas barrées : coche et date ; l'étape en cours en gras. */
.liste-pas li.fait .pas-texte { text-decoration: none; color: var(--texte); }
.liste-pas li.en-cours .pas-texte { font-weight: 700; }
.liste-pas li.en-cours .pas-marque { border-color: var(--principale-fonce); }
.liste-pas li.en-cours .pas-marque:empty::before { color: var(--principale-fonce); }
.liste-pas li:not(.fait):not(.en-cours) .pas-texte { color: var(--doux); }
.pas-date { color: var(--doux); font-size: .85rem; font-weight: 400; }
.liste-pas .bouton.petit { min-height: 40px; }

/* Au téléphone : boutons sur toute la largeur, le principal (le dernier dans le code) en premier. */
@media (max-width: 600px) {
  .actions:not(.pied) { flex-direction: column-reverse; align-items: stretch; }
  .actions:not(.pied) > .bouton { width: 100%; }
  .actions:not(.pied) > .lien-bouton { align-self: center; }
}

/* Le bandeau d'AIT dans le portail d'un cabinet : toujours aux couleurs d'AIT. */
.bandeau.maq-ait { background: #4f4a9e; color: #fff; }
.bandeau.maq-ait .bouton { background: #fff; color: #2e2a6b; border-color: #fff; }

/* Le nom du cabinet en haut, au téléphone aussi. */
@media (max-width: 899px) { .entete-droite .marque-cabinet .nom-cabinet { display: inline; } }

/* La fenêtre du programme du PC garde la même taille à chaque étape. */
.maq-fenetre.maq-programme { width: min(720px, 100%); }

/* Une adresse à ouvrir, en gros. */
.maq-adresse-grande { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.1rem; font-weight: 700; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--principale) 10%, var(--carte)); overflow-wrap: anywhere; }
.maq-qr-bloc { display: grid; gap: 4px; justify-items: center; }
.maq-ligne-etat { color: var(--doux); font-size: .9rem; }
.alerte.maq-confirmation { background: var(--vert-doux); }
.alerte.maq-confirmation svg { color: var(--vert); }
/* Tour 2 : un lien secondaire discret, un bouton de suppression rouge, une alerte sans gras, les coches lisibles en
   sombre, un code court lisible. */
.lien-bouton.maq-discret { font-weight: 400; text-decoration: underline; color: var(--doux); }
.bouton.second.maq-danger { color: var(--rouge); border-color: var(--rouge); }
.alerte.maq-legere { font-weight: 400; font-size: .92rem; }
@media (prefers-color-scheme: dark) { .liste-pas li.fait .pas-marque { color: #0f1a15; } }
.maq-code-court { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
.maq-supprimer { border: 1.5px solid color-mix(in srgb, var(--rouge) 40%, var(--ligne)); box-shadow: none; }
.maq-menu { list-style: none; margin: 0; padding: 0; display: grid; }
.maq-menu li { border-bottom: 1px solid var(--ligne); }
.maq-menu li:last-child { border-bottom: 0; }
.maq-menu a, .maq-menu button { display: block; width: 100%; text-align: left; padding: 12px 4px; }
.maq-message { white-space: pre-line; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--texte) 5%, var(--carte)); font-size: .92rem; }
.maq-depot { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; border: 2px dashed var(--ligne); border-radius: var(--rayon); text-align: center; }

/* Pour les captures seulement : la barre du bas du téléphone remise dans le flux, sinon elle recouvre la fin de la
   page dans une capture en page entière (Anne a cru un bouton caché au tour 1). */
@media (max-width: 899px) {
  html.capture .coque { display: flex; flex-direction: column; }
  html.capture .navigation { position: static; order: 2; }
  html.capture .contenu { order: 1; padding-bottom: 24px; }
}
/* À reporter dans web/style.css : sur un écran étroit, les actions d'une ligne passent sous son texte. */
@media (max-width: 600px) {
  .ligne-personne { flex-wrap: wrap; }
  .ligne-personne .actions-ligne { width: 100%; flex-wrap: wrap; gap: 4px 14px; }
}
.maq-mini-coches { font-size: .85rem; color: var(--doux); }