/* Premier écran des classiques (lot 5 « onboard », audit du 08/10) : carte de départ (un prénom, une photo), modèles prêts de la
   landing, et gestes « Remplir la boule » / « Voir l'image en entier » de la photo. Placement et tailles seulement : l'apparence
   des boutons vient des familles de 80-composants.css (vignettes = choix, « Créer ma boule » = principal, liens = lien).
   Règles plus précises que « .atelier-empty button » (40-panneau.css) : l'ordre de chargement ne les départage pas. */
.mp-studio.atelier .atelier-empty .atelier-start-text-foot{display:grid;gap:var(--atelier-space-1);margin-top:var(--atelier-space-3)}
.mp-studio.atelier .atelier-empty .atelier-start-text-foot .atelier-start-names-go{width:100%}
.mp-studio.atelier .atelier-empty .atelier-start-text-foot .atelier-start-more{justify-self:center;min-height:44px;padding:var(--atelier-space-2) 0;font-size:var(--atelier-text-sm)}
/* Modèles prêts : onze vignettes rondes (l'illustration du modèle), le libellé dessous ; au repos sans cadre. Parcours guidé, lot B (09/10) :
   les quatre modèles de la landing sont onze. Une seule rangée qui défile de côté, partout : la carte de départ reste entière, sans rien à
   faire défiler dedans (recette distill-browser.py), et la quatrième vignette est coupée par le bord (3,5 cellules visibles : assez larges pour que « Village d'antan » tienne
   sur une ligne, la carte garde sa hauteur) pour dire qu'on peut faire défiler, comme les décors et les formes de 40-panneau.css. */
.mp-studio.atelier .atelier-empty .atelier-start-models{margin:var(--atelier-space-1) 0 0;text-align:left}
.mp-studio.atelier .atelier-empty .atelier-start-models h3{margin:0 0 var(--atelier-space-1);color:var(--atelier-muted);font-size:var(--atelier-text-sm);font-weight:600;line-height:1.4;text-align:center}
.mp-studio.atelier .atelier-empty .atelier-start-model-list{display:flex;gap:0;margin:0 -16px;padding:0 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
.mp-studio.atelier .atelier-empty .atelier-start-model-list::-webkit-scrollbar{display:none}
.mp-studio.atelier .atelier-empty .atelier-start-model-list button{flex:0 0 calc(100% / 3.5);scroll-snap-align:start;display:grid;justify-items:center;align-content:start;gap:var(--atelier-space-1);min-width:0;min-height:44px;padding:var(--atelier-space-1) 0;font-size:var(--atelier-text-xs);line-height:1.3;text-align:center;white-space:nowrap}
.atelier-model-thumb{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden}
.atelier-model-thumb img{position:absolute;inset:0;width:100%;height:100%}
.atelier-model-thumb span{position:relative;max-width:52px;overflow:hidden;font-size:var(--atelier-text-sm);font-weight:400;line-height:1.1;white-space:nowrap}
.mp-studio.atelier .atelier-empty .atelier-start-model-form{margin-top:var(--atelier-space-3);text-align:left}
.mp-studio.atelier .atelier-empty .atelier-start-model-form[hidden]{display:none}
/* Le formulaire reçoit le focus de la carte quand la landing l'ouvre (?exemple=) : un conteneur, ses champs gardent leur focus. */
.mp-studio.atelier .atelier-empty .atelier-start-model-form:focus{outline:none}
.mp-studio.atelier .atelier-empty .atelier-start-model-intro{margin:0 0 var(--atelier-space-3);color:var(--atelier-muted);font-size:var(--atelier-text-sm);line-height:1.45}
.mp-studio.atelier .atelier-empty .atelier-start-model-form .atelier-start-text{margin:0 0 var(--atelier-space-3);font-size:var(--atelier-text-xs)}
.mp-studio.atelier .atelier-empty .atelier-start-model-foot .atelier-start-names-go{width:100%}
/* « Mon logo et un prénom par boule » : option secondaire, en lien au pied de la carte. */
.mp-studio.atelier .atelier-empty .atelier-start-other{margin:var(--atelier-space-1) 0 0}
.mp-studio.atelier .atelier-empty details.atelier-start-other>summary{min-height:44px;padding:var(--atelier-space-2) 0;font-size:var(--atelier-text-sm)}
/* Photo des classiques : « Remplir la boule » (principal tant que la photo ne couvre pas la boule), « Voir l'image en entier ». */
.atelier-fill-actions{display:grid;gap:var(--atelier-space-1);margin:var(--atelier-space-3) 0}
.atelier-fill-actions .atelier-fill-link{justify-self:start}
.atelier-fill-actions>p{margin:0}
/* Saisie refusée au départ (prénom trop long, liste illisible, champ du modèle) : la phrase sous le champ, dans la charte, à la place
   de la bulle du navigateur. Texte seulement, sans cadre ; le champ marqué invalide prend le bord rouge encre (80-composants.css).
   Placée ici pour garder l’ordre de la cascade (responsabilité : 40-panneau). */
.atelier-field-problem{margin:var(--atelier-space-2) 0 0;color:var(--atelier-danger);font-size:var(--atelier-text-sm);line-height:1.45;text-align:left}