/* Portail public des démos : accueil, formulaire « Voir la démo », pages simples (connexion, politique, désabonnement).
   La marque vient de /commun/marque.css. */
.portail .hero h1{max-width:20ch}
.cartes-services{display:grid;grid-template-columns:minmax(0,640px);gap:20px;margin-top:1.75rem}
.carte-service{background:var(--blanc);border:1px solid var(--ligne);border-radius:2px;padding:1.5rem;display:grid;gap:.75rem;align-content:start}
.carte-service p{color:var(--ardoise)}
.actions-carte{display:flex;gap:1rem 1.75rem;flex-wrap:wrap;align-items:center;margin-top:.25rem}
.autres-demos{margin-top:1rem;font-size:.95rem;color:var(--doux)}

/* Formulaire : même mise en page que le contact du site. */
.formulaire-cadre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:760px){.formulaire-cadre{grid-template-columns:1fr;gap:1.5rem}}
.formulaire-intro p:not(.surtitre){margin-top:1rem;color:var(--ardoise)}
#formulaire{display:grid;gap:1rem;min-width:0}
#formulaire [aria-invalid="true"]{border-color:var(--erreur)!important}
#formulaire .btn{justify-self:start}
.consentement{display:grid;gap:.35rem}
.consentement .petit{margin-left:1.6rem;font-size:var(--s-1)}

/* Pages simples */
.page-simple{min-height:60vh;padding-block:clamp(3rem,7vw,5rem)}
.page-simple .enveloppe{max-width:46rem}
.page-simple .enveloppe > * + *{margin-top:1rem}
.page-simple .enveloppe > .pont{margin-top:1.25rem}
.politique h2{font-size:var(--s2);margin-top:2rem}
.politique ul{padding-left:1.25rem;color:var(--ardoise);display:grid;gap:.4rem}
.politique p{color:var(--ardoise)}
.politique .adresse{white-space:pre-wrap;color:var(--marine)}
.brouillon{border-left:2px solid var(--glace);background:var(--blanc);padding:.6rem 1rem;color:var(--marine);font-weight:600}
form.connexion{display:grid;gap:1rem;max-width:26rem;margin-top:1.5rem}
form.connexion .btn{justify-self:start}
/* « J'ai déjà un code » : un seul champ, XXXX-XXXX. */
.champ-code{font-variant-numeric:tabular-nums;letter-spacing:.18em;text-transform:uppercase;font-size:1.25rem;max-width:14rem}
.champ-code::placeholder{letter-spacing:.18em}

/* « Quelle démo voulez-vous voir ? » : une case par service (services.json). Service à venir : grisé, « Bientôt ». */
.choix-demos{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.35rem}
.choix-demos > legend{padding:0;margin:0 0 .35rem;font-size:var(--s-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
.cases-demos{display:grid;gap:0}
/* Cible tactile d'au moins 44 px ; le texte passe à la ligne au besoin (rien ne déborde à 360 px). */
.choix-demos label.case{min-height:44px;align-items:center;padding-block:.35rem;min-width:0}
.choix-demos label.case input{margin:0;width:1.15rem;height:1.15rem}
.choix-demos label.case > span{min-width:0;overflow-wrap:anywhere}
.choix-demos label.case:has(input:focus-visible){outline:2px solid var(--glace);outline-offset:3px;border-radius:2px}
.choix-demos label.grisee{color:var(--texte-doux);cursor:not-allowed}
.choix-demos label.grisee input{cursor:not-allowed}
.choix-demos .bientot{display:inline-block;margin-left:.4rem;font-size:var(--s-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texte-doux);border:1px solid var(--ligne);border-radius:999px;padding:.05rem .55rem;line-height:1.4}
.choix-demos[aria-invalid="true"] > legend{color:var(--erreur)}
.erreur-services{color:var(--erreur);font-size:var(--s-1);margin:0;border-left:2px solid var(--glace);padding-left:.75rem;font-weight:600}
.erreur-services:empty{display:none}