/* Pages publiques de MagicPropal — même charte que la page client : nuit, citron, Archivo + Plex Mono. */
body.public { background: var(--canvas-subtle); }
.barre-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px;
  background: var(--nuit); color: var(--blanc-casse); border-bottom: 1px solid var(--filet-nuit); }
.marque-mp { color: var(--blanc-casse); text-decoration: none; font-size: 18px; letter-spacing: -0.01em; }
.marque-mp strong { font-weight: 900; font-stretch: 125%; }
.etincelle { color: var(--lilas); }
.barre-haut nav { display: flex; gap: 20px; font-size: 14px; }
.barre-haut nav a { color: var(--mp-gris-sur-nuit); text-decoration: none; }
.barre-haut nav a:hover { color: var(--lilas); }
.avis { list-style: none; margin: 0; padding: 0; }
.avis li { padding: 12px 24px; font-size: 14px; background: var(--lilas); color: var(--nuit); }
.avis .avis-error { background: var(--mp-danger-fond); color: var(--mp-danger); }

.hero-public { background: var(--nuit); color: var(--blanc-casse); padding: 64px 20px 72px; text-align: center; }
.hero-public h1 { margin: 0 auto 16px; max-width: 18ch; font: 900 clamp(34px, 6vw, 62px)/0.98 var(--font); font-stretch: 125%; letter-spacing: -0.045em; }
.hero-public .surtitre { margin-bottom: 14px; }
.promesse { max-width: 56ch; margin: 0 auto 32px; color: var(--mp-gris-sur-nuit); font-size: 18px; }
.hero-centre { padding: 72px 20px 80px; }
.hero-centre .promesse { margin-bottom: 24px; }
.rassurance { margin: 12px auto 0; max-width: 56ch; font-size: 13px; color: var(--fg-muted); }
.hero-public .rassurance { color: var(--mp-legende-sur-nuit); }

.depot { max-width: 560px; margin: 0 auto; }
.champ-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zone-depot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px; margin-bottom: 14px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--mp-legende-sur-nuit) 60%, var(--mp-surface-nuit)); border-radius: var(--mp-r-4); background: var(--mp-surface-nuit); color: var(--mp-gris-sur-nuit); text-align: center; transition: border-color .15s, background .15s; }
.zone-depot strong { color: var(--blanc-casse); font: 900 20px var(--font); font-stretch: 125%; letter-spacing: -0.02em; }
.zone-depot:hover, .zone-depot.survol, .champ-fichier:focus-visible + .zone-depot { border-color: var(--lilas); background: color-mix(in srgb, var(--mp-surface-nuit), var(--mp-accent) 6%); }
.zone-icone { font-size: 30px; color: var(--lilas); line-height: 1; }
.formats { margin-top: 8px; font: 400 12px var(--mono); color: var(--mp-legende-sur-nuit); }
.zone-nom { margin-top: 8px; padding: 4px 12px; border-radius: var(--mp-r-2); background: var(--lilas); color: var(--nuit); font: 600 13px var(--mono); }
.depot .btn-large { margin-bottom: 0; }
.depot.envoi .btn-large { opacity: .6; pointer-events: none; }

.etapes, .tarifs, .atouts { max-width: 1040px; margin: 0 auto; padding: 56px 20px 8px; }
.titre-section { margin: 0 0 8px; font: 900 clamp(24px, 3.4vw, 34px)/1.1 var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.titre-sous-section { margin: 32px 0 8px; font: 900 18px var(--font); font-stretch: 125%; letter-spacing: -0.02em; }
.sous-titre { margin: 0 0 20px; color: var(--fg-muted); max-width: 64ch; }
.etapes ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.etapes li { display: flex; gap: 14px; padding: 18px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-4); }
.etapes li p { margin: 4px 0 0; color: var(--fg-muted); font-size: 14px; }
.etape-num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mp-r-3); background: var(--nuit); color: var(--lilas); font: 600 15px var(--mono); }

.grille-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin-bottom: 20px; }
.grille-abos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.offre { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-4); }
.offre-vedette { border-color: var(--lilas-fonce); outline: 1px solid var(--lilas-fonce); outline-offset: -1px; }
.offre-nom { font: 600 12px var(--mono); color: var(--fg-muted); text-transform: lowercase; }
.offre-prix { font: 900 26px/1.1 var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.offre-prix small { font: 400 13px var(--mono); color: var(--fg-muted); }
.offre-detail { font-size: 14px; }
.offre small { color: var(--fg-muted); font-size: 12px; }
.offre-choix { cursor: pointer; }
.offre-choix input { position: absolute; opacity: 0; }
.offre-choix:has(input:checked) { border-color: var(--nuit); background: var(--option); outline: 2px solid var(--nuit); outline-offset: -1px; }
.offre-choix:has(input:focus-visible) { outline: var(--mp-focus); outline-offset: 2px; }
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-bottom: 56px; }
.atouts > div { padding: 18px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-4); }
.atouts p { margin: 4px 0 0; color: var(--fg-muted); font-size: 14px; }

.page-etroite { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }
.fil { font-size: 14px; margin: 0 0 12px; }
.formulaire-offres fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.formulaire-offres legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.formulaire-offres legend small { color: var(--fg-muted); font-weight: 400; }
.champ-email { display: block; margin: 20px 0 6px; font-weight: 500; font-size: 14px; }
.champ-email small { color: var(--fg-muted); font-weight: 400; }
.champ-texte { width: 100%; padding: 11px 14px; margin-bottom: 18px; font: inherit; font-size: 16px; color: var(--fg); background: var(--canvas);
  border: 1px solid var(--border); border-radius: var(--mp-r-3); }
.champ-texte:focus { outline: var(--mp-focus); outline-offset: -1px; }
.avis-simulation { padding: 10px 14px; margin: 0 0 20px; border-radius: var(--mp-r-3); background: var(--lilas); color: var(--nuit); font: 500 13px var(--mono); }
.carte-info { padding: 18px; margin: 0 0 18px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-4); }
.carte-info p { margin: 6px 0 0; }
.carte-alertes { border-color: var(--mp-alerte); background: var(--mp-alerte-fond); }
.carte-alertes ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.copie { display: flex; gap: 8px; margin: 10px 0 8px; }
.copie input { flex: 1; min-width: 0; padding: 10px 12px; font: 13px var(--mono); color: var(--fg); background: var(--canvas-subtle); border: 1px solid var(--border); border-radius: var(--mp-r-3); }
.copie .btn { height: auto; white-space: nowrap; }
.btn.copie-ok { background: var(--lilas); border-color: var(--lilas); color: var(--nuit); }
.solde { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.solde > div { flex: 1; min-width: 180px; padding: 16px; background: var(--nuit); color: var(--blanc-casse); border-radius: var(--mp-r-4); }
.solde span { display: block; font: 600 12px var(--mono); color: var(--lilas); }
.solde strong { font: 900 28px/1.2 var(--font); font-stretch: 125%; letter-spacing: -0.03em; }
.ligne-proposition { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--border); }
.en-ligne { display: inline; margin-left: 8px; }
.btn-invisible { background: none; border-color: transparent; color: var(--fg-muted); }

.progression { height: 6px; max-width: 320px; margin: 0 auto 16px; border-radius: var(--mp-r-1); background: var(--mp-filet-nuit); overflow: hidden; }
.progression-barre { display: block; height: 100%; width: 40%; border-radius: var(--mp-r-1); background: var(--lilas); animation: va-et-vient 1.4s ease-in-out infinite; }
@keyframes va-et-vient { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.bloc-erreur { margin-top: 24px; padding: 16px; max-width: 480px; margin-left: auto; margin-right: auto; border-radius: var(--mp-r-4); background: var(--mp-danger-fond); color: var(--mp-danger); }

.pied-public { text-align: center; padding: 28px 16px 40px; font-size: 13px; color: var(--fg-muted); border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .progression-barre { animation: none; width: 100%; } }
@media (max-width: 640px) { .barre-haut { padding: 12px 16px; } .hero-public { padding: 44px 16px 52px; } .copie { flex-direction: column; } }

a.btn { text-decoration: none; }
.page-etroite { max-width: 820px; }
.grille-offres .offre-prix { font-size: 24px; }

/* Accueil : deux façons de commencer. Un seul plein citron par écran : le dépôt est l'action principale, la saisie est secondaire. */
.choix-depart { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-e-4); max-width: 980px; margin: 0 auto; text-align: left; }
.choix { display: flex; flex-direction: column; padding: var(--mp-e-4); border: 1px solid var(--filet-nuit); border-radius: var(--mp-r-4); background: var(--mp-surface-nuit); }
.choix h2 { margin: 0 0 var(--mp-e-2); color: var(--blanc-casse); font: 900 var(--mp-t-7)/1.15 var(--font); font-stretch: var(--mp-largeur-titre); letter-spacing: -0.02em; }
.choix-texte { margin: 0 0 var(--mp-e-4); color: var(--mp-gris-sur-nuit); font-size: var(--mp-t-5); }
.choix .depot { display: flex; flex-direction: column; flex: 1; max-width: none; margin: 0; }
.choix .zone-depot { flex: 1; justify-content: center; }
.choix-points { list-style: none; flex: 1; margin: 0 0 var(--mp-e-4); padding: 0; color: var(--mp-gris-sur-nuit); font-size: var(--mp-t-5); }
.choix-points li { position: relative; padding: var(--mp-e-3) 0 var(--mp-e-3) var(--mp-e-5); border-bottom: 1px solid var(--filet-nuit); }
.choix-points li::before { content: '✦'; position: absolute; left: var(--mp-e-1); color: var(--lilas); }
.btn-secondaire-nuit { background: transparent; border-color: var(--mp-legende-sur-nuit); color: var(--blanc-casse); }
.btn-secondaire-nuit:hover { border-color: var(--lilas); color: var(--lilas); }
.btn-secondaire-nuit:focus-visible { outline: var(--mp-focus-sur-nuit); outline-offset: 2px; }
.choix-depart + .rassurance { margin-top: var(--mp-e-4); }

/* Création sur mesure */
.page-creer { max-width: 900px; }
.sr-seulement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carte-erreurs { border-color: var(--mp-danger); background: var(--mp-danger-fond); color: var(--mp-danger); }
.carte-erreurs ul { margin: var(--mp-e-2) 0 0; padding-left: var(--mp-e-4); font-size: var(--mp-t-4); }
.formulaire-creation .titre-sous-section small { font: 400 var(--mp-t-3) var(--mono); color: var(--fg-muted); }
.bloc-saisie { min-width: 0; margin: 0 0 var(--mp-e-3); padding: var(--mp-e-4); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--mp-r-4); }
.bloc-saisie legend { padding: 0 var(--mp-e-2); font: 900 var(--mp-t-5) var(--font); font-stretch: var(--mp-largeur-titre); letter-spacing: -0.02em; }
.bloc-saisie > .champ-email:first-of-type { margin-top: var(--mp-e-1); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--mp-e-3); }
.entete-section { display: flex; gap: var(--mp-e-2); align-items: flex-start; margin-bottom: var(--mp-e-3); }
.entete-section .champ-texte { margin-bottom: 0; font-weight: 600; }
.lignes-saisie { display: flex; flex-direction: column; gap: var(--mp-e-3); margin-bottom: var(--mp-e-3); }
.ligne-saisie { display: flex; flex-direction: column; gap: var(--mp-e-2); padding: var(--mp-e-3); background: var(--canvas-subtle); border-radius: var(--mp-r-3); }
.ligne-champs { display: flex; flex-wrap: wrap; gap: var(--mp-e-2); align-items: flex-end; }
.mini-champ { display: flex; flex-direction: column; gap: var(--mp-e-1); min-width: 0; font: 400 var(--mp-t-2) var(--mono); color: var(--fg-muted); }
.mini-intitule { flex: 1 1 160px; }
.mini-nombre { flex: 0 0 104px; }
.mini-type { flex: 0 0 120px; }
.mini-champ .champ-texte { width: 100%; font-family: var(--font); font-weight: 400; color: var(--fg); }
.mini-nombre .champ-texte { text-align: right; }
.ligne-saisie .champ-texte { width: auto; margin: 0; padding: var(--mp-e-2) var(--mp-e-3); font-size: var(--mp-t-5); }
.ligne-saisie textarea.champ-texte, .ligne-saisie .champ-groupe { width: 100%; }
.ligne-saisie .champ-groupe[hidden] { display: none; }
.ligne-saisie .champ-texte:not(textarea) { min-height: var(--mp-cible-tactile); }
.formulaire-creation .btn-ajouter { height: var(--mp-cible-tactile); padding: 0 var(--mp-e-3); }
.ligne-saisie .champ-texte:disabled { opacity: .45; }
.btn-retirer { flex: none; min-width: var(--mp-cible-tactile); height: var(--mp-cible-tactile); padding: 0 var(--mp-e-3); font: 500 var(--mp-t-3) var(--font); color: var(--fg-muted);
  background: none; border: 1px solid transparent; border-radius: var(--mp-r-3); cursor: pointer; }
.btn-retirer:hover { color: var(--danger); border-color: var(--border); }
.btn-retirer:focus-visible { outline: var(--mp-focus); outline-offset: 2px; }
.entete-section .btn-retirer { white-space: nowrap; }
.btn-ajouter-large { width: 100%; margin-bottom: var(--mp-e-2); border-style: dashed; color: var(--fg-muted); background: none; cursor: pointer; }
.btn-ajouter-large:hover { color: var(--fg); border-color: var(--fg-muted); }
.formulaire-creation.envoi .btn-large { opacity: .6; pointer-events: none; }
.formulaire-creation .btn-primaire { margin-top: var(--mp-e-4); }
@media (max-width: 820px) { .choix-depart { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .mini-nombre, .mini-type { flex: 1 1 96px; }
  .entete-section { flex-direction: column; align-items: stretch; }
  .entete-section .btn-retirer { align-self: flex-end; }
}