/* ------------------------------------------------------------------ base */
:root {
  --violet:   #7B3FD3;
  --violet-c: #9B5DE5;
  --rose:     #D9487E;
  /* Le rose de la charte, éclairci, pour le survol — comme --violet-c l'est
     pour le violet. Il ne remplace jamais --rose, il l'accompagne. */
  --rose-c:   #E86395;
  --jaune:    #FFD166;
  --fond:     #FFF8F0;
  --encre:    #3A3440;
  --encre-d:  #6B6474;
  --blanc:    #FFFFFF;
  --trait:    #E8DFD4;
  --ombre:    0 2px 8px rgba(58, 52, 64, .10);
  --ombre-f:  0 6px 24px rgba(58, 52, 64, .16);
  --r:        14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  /* Hauteur « petite » du navigateur : elle ignore la barre d'adresse qui se
     rétracte au défilement. Sans ça, sur téléphone, la page change de hauteur
     en cours de route et le dessin est recalculé, donc il saute. */
  height: 100svh;
  background: var(--fond);
  color: var(--encre);
  font-family: Nunito, "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
  /* LA PAGE ELLE-MÊME NE DÉFILE JAMAIS. C'est une application qui occupe
     l'écran, pas un document qu'on parcourt : une barre de défilement sur la
     page ne peut être qu'un accident.

     Et l'accident arrivait. Sur un écran réglé à 150 %, la hauteur de fenêtre
     tombe entre deux pixels ; toute boîte calée sur cette hauteur est arrondie
     vers le haut, dépasse d'un pixel, et une barre verticale apparaît — qui,
     en mangeant sa largeur, en fait surgir une horizontale à sa suite. Deux
     barres pour un pixel.

     Le défilement dont l'application a vraiment besoin — la galerie sur un
     téléphone, quand les cartes passent à trois rangées — se produit dans
     #racine, juste en dessous. */
  overflow: hidden;
}

h1, h2, h3, .titre {
  font-family: "Luckiest Guy", Nunito, sans-serif;
  font-weight: 400;
  letter-spacing: .4px;
  line-height: 1.15;
  margin: 0;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { cursor: default; }

#racine { height: 100%; overflow-y: auto; }

/* --------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.35em; border-radius: 999px;
  font-weight: 800; font-size: 1rem;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primaire { background: var(--violet); color: #fff; box-shadow: var(--ombre); }
.btn-primaire:hover { background: var(--violet-c); }
.btn-secondaire { background: var(--blanc); color: var(--violet); box-shadow: var(--ombre); }
.btn-secondaire:hover { background: #F6F0FF; }
.btn-rose { background: var(--rose); color: #fff; box-shadow: var(--ombre); }
.btn-rose:hover { background: var(--rose-c); }
.btn-fantome { color: var(--encre-d); }
.btn-fantome:hover { color: var(--violet); }
.btn:disabled { opacity: .35; }

/* --------------------------------------------------------------- ecran 1 */
.accueil {
  /* Deux pixels de moins que son cadre, pour la même raison que la galerie :
     voir la note sur l'arrondi, en haut de ce fichier. */
  min-height: calc(100% - 2px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4rem;
  text-align: center; padding: 2rem 1.4rem;
  background: radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--fond) 60%);
}
/* Le logo complet est bien plus haut que l'ancien lettrage (800 × 321 au lieu
   de 10:1) : à 440 px de large il mangeait la moitié de l'écran d'accueil. On
   le pose plus petit, et on lui donne aussi une limite en HAUTEUR, pour que
   sur une fenêtre courte il cède la place au titre et au bouton. */
.accueil img.logo {
  width: min(340px, 72vw); max-height: 26vh; height: auto;
  object-fit: contain;
}
/* 20 em : juste assez pour que le titre tienne sur UNE ligne quand l'écran est
   large. En dessous il passe à deux, en se coupant à l'endroit prévu (voir la
   note sur les espaces insécables dans donnees.js). */
.accueil h1 { font-size: clamp(1.55rem, 5vw, 2.7rem); color: var(--violet); max-width: 20em; }
/* Assez large pour que chacune des deux phrases tienne sur SA ligne quand
   l'écran le permet : le retour du milieu sépare alors les deux idées, au lieu
   de se perdre au milieu de quatre lignes coupées n'importe où. Sur un écran
   plus étroit elles se replient normalement, et la coupure du milieu tient
   toujours. */
.accueil p { font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--encre-d); max-width: 50em; line-height: 1.6; margin: 0; }
/* Au survol, le bouton se soulève comme les cartes de visages de l'écran
   suivant : c'est le même geste qu'on annonce, autant le montrer pareil. Le
   clic reprend la main juste après, d'où la règle `:active` qui suit. */
.accueil .btn { font-size: 1.15rem; padding: .9em 2em; }
.accueil .btn:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.accueil .btn:active { transform: translateY(1px) scale(.985); }
.accueil .credit { font-size: .85rem; color: var(--encre-d); opacity: .8; margin-top: -.4rem; }

/* ------------------------------------------------------- galerie visages */
/* La rangée de visages descend au milieu de la page. Tant que les six cartes
   tiennent sur une seule ligne, il reste beaucoup de vide en bas et la page
   paraissait collée en haut.

   À REVOIR le jour où elles ne tiendront plus sur une ligne : à deux rangées,
   le centrage se justifie moins, et il vaudra mieux revenir en haut. Le `safe`
   est là pour ce jour-là — il empêche le centrage de manger le haut de la
   page quand le contenu devient plus grand que l'écran. */
.galerie {
  padding: 1.2rem 1.2rem 1.6rem; max-width: 1100px; margin: 0 auto;
  /* DEUX PIXELS DE MOINS que la fenêtre, et ce n'est pas un caprice.
     Sur un écran réglé à 150 %, la hauteur de fenêtre tombe entre deux pixels
     (570,4 par exemple). Une boîte exactement aussi haute est alors arrondie
     vers le haut par le navigateur, elle dépasse d'un pixel, et une barre de
     défilement verticale apparaît — laquelle rétrécit la largeur et fait
     surgir une barre horizontale à sa suite. Deux pixels de marge suffisent à
     absorber l'arrondi, et personne ne les voit. */
  min-height: calc(100% - 2px);
  display: flex; flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}
.galerie h2 { font-size: clamp(1.2rem, 3.2vw, 1.8rem); color: var(--violet); text-align: center; margin-bottom: .9rem; }
/* en flex plutôt qu'en grille : les cartes restent centrées, même à deux */
/* Toutes les cartes prennent la MÊME hauteur. Elles montrent toutes le même
   cadre, aux mêmes proportions ; seuls leurs pieds diffèrent — un prénom d'un
   côté, une rangée de teintes de l'autre. Sans cet alignement, la carte de la
   toile vierge finissait huit points plus courte que ses voisines, et ça se
   voyait. C'est le pied qui absorbe la différence, pas l'image. */
.grille-visages {
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: center; align-items: stretch;
}
.carte-visage .pied { flex: 1 1 auto; }
/* Les cartes s'ÉTIRENT au lieu d'avoir une largeur figée : dès que la place le
   permet, les six tiennent sur une seule rangée et se partagent la largeur, au
   lieu d'en remplir cinq et d'en renvoyer une seule à la ligne. Une rangée
   plutôt que deux, c'est la moitié de la hauteur — c'est ce qui fait tenir
   l'écran sur une fenêtre courte.

   `flex-basis` petit et `max-width` à 180 : en dessous de la place nécessaire
   elles repassent à la ligne d'elles-mêmes, et jamais elles ne grossissent
   au-delà de leur taille de confort. */
.grille-visages .carte-visage { flex: 1 1 130px; max-width: 180px; }
/* La galerie n'est pas close : on le dit discrètement, sous les cartes. */
.galerie .a-venir {
  margin: 1rem 0 0; text-align: center;
  font-size: .8rem; font-style: italic; color: var(--encre-d); opacity: .85;
}
.carte-visage {
  background: var(--blanc); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform .14s ease, box-shadow .14s ease;
  display: flex; flex-direction: column; padding: 0;
}
.carte-visage:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.carte-visage .choix { display: block; width: 100%; padding: 0; }
/* Les proportions viennent du cadrage du visage, posées par `cadrageFond`. */
.carte-visage .vignette { width: 100%; display: block; background: #fff; }
.carte-visage .pied {
  padding: .55rem .5rem .7rem; font-weight: 700; text-align: center;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .3rem;
  border-top: 1px solid var(--trait);
}
/* Le crayon reste discret tant qu'on ne s'y intéresse pas : la carte doit
   d'abord donner envie de choisir le visage. */
.carte-visage .pied svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--violet); opacity: .45; }
.carte-visage .pied:hover { color: var(--violet); }
.carte-visage .pied:hover svg { opacity: 1; }
.carte-visage .prenom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.carte-visage .renomme { padding: .45rem .45rem .6rem; gap: .25rem; }
.carte-visage .renomme input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-weight: 700; text-align: center;
  color: var(--encre); background: var(--blanc);
  border: 2px solid var(--violet); border-radius: 9px; padding: .25rem .3rem;
  /* 16 px au moins : en deçà, le téléphone zoome tout seul sur le champ. */
  font-size: 16px;
}
.carte-visage .renomme input:focus { outline: none; box-shadow: 0 0 0 3px #EDE2FF; }
.carte-visage .renomme .ok {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet); color: #fff;
}
.carte-visage .renomme .ok svg { width: 17px; height: 17px; color: #fff; opacity: 1; }

/* --- la toile vierge -------------------------------------------- */
/* Sa vignette est un aplat : le nom s'y pose au centre, dans une pastille
   blanche pour rester lisible aussi bien sur le blanc que sur l'ébène. */
.carte-peau .vignette {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* Le nom, et sous lui sa petite phrase. Les deux sont là en permanence : au
   survol seulement, la phrase surgissait au moindre effleurement du doigt
   pendant qu'on faisait défiler la page. */
.carte-peau .etiquette-peau {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  text-align: center; line-height: 1.2;
  background: rgba(255, 255, 255, .92); border-radius: 14px;
  padding: .45em .7em; box-shadow: var(--ombre);
  max-width: 92%;
}
.carte-peau .nom-peau {
  font-family: "Luckiest Guy", Nunito, sans-serif;
  font-size: .92rem; letter-spacing: .3px; color: var(--violet);
}
.carte-peau .sous-peau {
  font-size: .62rem; font-style: italic; font-weight: 700; line-height: 1.25;
  color: var(--encre-d);
}
.carte-peau .peaux {
  flex-wrap: wrap; gap: .25rem; padding: .5rem .35rem .6rem;
}
/* 16 px et un écart serré : c'est ce qui laisse tenir les sept teintes sur un
   seul rang, y compris quand les cartes se resserrent pour rentrer à six sur
   une rangée. Sur une fenêtre vraiment étroite elles passent à la ligne, et
   c'est très bien ainsi — rien ne casse. Le contour intérieur sert au blanc,
   qui disparaîtrait sinon dans la carte. */
.carte-peau .teinte {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(58, 52, 64, .22);
  transition: transform .12s ease;
}
.carte-peau .teinte:hover { transform: scale(1.15); }
.carte-peau .teinte.actif {
  box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px var(--violet);
}

/* --------------------------------------------------------------- atelier */
.atelier { height: 100%; display: flex; flex-direction: column; }

/* Bandeau volontairement mince : chaque pixel qu'il ne prend pas revient au
   visage, qui est le seul contenu qui compte vraiment. */
.entete {
  display: flex; align-items: center; gap: .35rem;
  padding: .25rem .5rem; background: var(--blanc);
  border-bottom: 1px solid var(--trait); flex: 0 0 auto;
}
.entete .titre-mini { font-family: "Luckiest Guy", sans-serif; color: var(--violet); font-size: .95rem; }
/* Le prénom se rebaptise ici comme sur sa carte. Le crayon reste effacé tant
   qu'on ne s'y intéresse pas : le bandeau doit rester calme.

   `line-height: 1` n'est pas cosmétique. Luckiest Guy réserve beaucoup de
   place au-dessus et en dessous de ses lettres ; sans ça, la boîte du texte
   est bien plus haute que les lettres visibles, et le crayon — centré sur la
   boîte — se retrouve nettement plus bas que le prénom. */
.entete .titre-mini.modifiable {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .35rem; border-radius: 8px;
  line-height: 1;
}
.entete .titre-mini.modifiable span { line-height: 1; }
.entete .titre-mini.modifiable svg { width: 13px; height: 13px; opacity: .35; }
.entete .titre-mini.modifiable:hover { background: #F3EDFB; }
.entete .titre-mini.modifiable:hover svg { opacity: 1; }
/* Le champ prend la place qui reste, il n'en réclame pas une fixe : sur un
   téléphone, une largeur figée poussait « Ma fiche récap » hors de l'écran. */
.entete .titre-renomme {
  display: flex; align-items: center; gap: .25rem;
  flex: 1 1 6em; min-width: 0; max-width: 11em;
}
.entete .titre-renomme input {
  font: inherit; font-weight: 700; color: var(--encre); background: var(--blanc);
  border: 2px solid var(--violet); border-radius: 8px; padding: .1rem .3rem;
  flex: 1 1 auto; width: auto; min-width: 4.5em;
  /* 16 px au moins : en deçà, le téléphone zoome tout seul sur le champ. */
  font-size: 16px;
}
.entete .titre-renomme input:focus { outline: none; box-shadow: 0 0 0 3px #EDE2FF; }
.entete .titre-renomme .ok {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet); color: #fff;
}
.entete .titre-renomme .ok svg { width: 15px; height: 15px; }
.entete .espace { flex: 1; }
/* le libellé tient sur une ligne : plus large, mais bien moins haut */
.entete .btn { white-space: nowrap; }
/* Annuler et Rétablir forment un couple : collés l'un à l'autre, puis mis à
   distance du bouton de la fiche, qui n'a rien à voir avec eux. */
.entete .histoire { display: flex; align-items: center; margin-right: .5rem; }

.icone-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--encre); background: transparent;
}
.icone-btn:hover:not(:disabled) { background: #F3EDFB; color: var(--violet); }
.icone-btn:disabled { opacity: .3; }
.icone-btn svg { width: 22px; height: 22px; }

.corps { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* Le dessin occupe 45 % de la zone disponible, ni plus ni moins : une base
   FIGÉE, pas extensible. Sinon, changer d'outil change la hauteur du tiroir,
   donc celle du dessin, qui est alors redessiné à une autre échelle — c'est
   ce qui donnait l'impression qu'il sautait. */
.scene {
  flex: 0 0 56%; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .6rem; touch-action: none;
}
.scene canvas {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r); box-shadow: var(--ombre-f); background: #fff;
  touch-action: none; display: block;
  /* iOS ouvre sinon sa propre loupe et son menu « copier l'image » sur un
     appui long, par-dessus la nôtre, qui suit tout le geste au lieu de son
     seul début. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* -------------------------------------------------------- barre outils */
.outils {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--blanc); border-top: 1px solid var(--trait);
}

/* La palette ferme la barre, après les formes : on choisit donc son pochoir
   d'abord, sa couleur ensuite. Dans l'autre sens, on repeignait sans le
   vouloir la forme encore sélectionnée. */
.palette { padding: .2rem .7rem .3rem; border-top: 1px solid var(--trait); }

/* Compacts : ces cinq boutons ne changent pas souvent, ils ne doivent pas
   manger la place du dessin ni celle de la planche de pochoirs. */
.rangee-outils { display: flex; gap: .25rem; padding: .3rem .5rem; justify-content: center; }
.outil {
  flex: 1 1 0; max-width: 84px; border-radius: 10px; padding: .3rem .15rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  font-size: .63rem; font-weight: 700; color: var(--encre-d); line-height: 1.2;
}
.outil svg { width: 19px; height: 19px; }
.outil.actif { background: #F3EDFB; color: var(--violet); }
.outil:hover:not(.actif):not(:disabled) { background: #FAF7F2; }
.outil-danger { color: var(--rose); }
.outil-danger:hover:not(:disabled) { background: #FDF0F5; }
.outil:disabled { opacity: .35; }

.aide { margin: 0 0 .6rem; font-size: .82rem; line-height: 1.45; color: var(--encre-d); }
.btn-petit { padding: .42em .9em; font-size: .85rem; }

/* aperçu du diamètre réel du pinceau ou de la gomme, posé à même le fond.
   Centré dans les deux sens à l'intérieur de la place qui lui est réservée,
   juste sous le libellé et son curseur. */
.reglage-bloc { margin-top: .2rem; }
.apercu-taille {
  display: flex; align-items: center; justify-content: center;
  margin-top: .3rem;
}
.apercu-taille span {
  display: block; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(58, 52, 64, .18);
  transition: width .08s ease, height .08s ease;
}
/* la gomme n'ajoute rien : son aperçu est un cercle vide, comme sur le visage */
.apercu-taille span.creux {
  box-shadow: none;
  border: 1.5px solid var(--encre);
  outline: 1px solid rgba(255, 255, 255, .9);
}

.tiroir {
  border-top: 1px solid var(--trait); padding: .25rem .7rem .35rem;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
.rangee-outils { flex: 0 0 auto; }
/* la palette est poussée tout en bas, même quand le tiroir est presque vide */
.palette { flex: 0 0 auto; margin-top: auto; }
.tiroir-titre { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-d); margin: 0 0 .5rem; }

/* Deux familles seulement : les fards mats, et les nacrés, qui ne s'emploient
   pas de la même manière. */
.rangs { display: flex; flex-direction: column; gap: .1rem; }
/* les couleurs aussi tiennent sur une ligne, qui défile si besoin */
.groupe {
  display: flex; gap: .28rem; overflow-x: auto;
  /* de quoi laisser respirer le halo de la pastille choisie, sur les quatre
     côtés : sans cette marge il serait rogné par le rognage latéral */
  /* 11 points en bas, comme pour les pochoirs : de quoi loger la barre de
     défilement de Firefox si jamais la rangée devient trop longue. */
  padding: 7px 6px 11px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #D8CEC2 transparent;
}
.groupe .pastille { flex: 0 0 auto; }
.groupe-apart { display: flex; align-items: center; gap: .55rem; min-width: 0; }
/* Largeur calée sur le mot le plus long — « Nacrées » — sinon il chevauche la
   première pastille : la boîte est fixe et le texte ne se coupe pas. */
.etiquette-groupe {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--encre-d); white-space: nowrap;
  width: 5.2em; flex: 0 0 auto;
}

/* Assez petites pour que les neuf tiennent d'un coup dans la colonne de
   droite, sans avoir à faire défiler pour trouver une couleur. */
.pastille {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--blanc); box-shadow: 0 0 0 1px var(--trait), var(--ombre);
  transition: box-shadow .12s ease;
}
/* Pas d'agrandissement au survol ni à la sélection : une transformation
   déborde de la boîte, et ce débordement compte comme zone défilable — d'où
   une barre de défilement sous deux pastilles, et un halo rogné. On marque
   donc la sélection par le seul halo, qui lui ne perturbe pas la mise en page. */
.pastille:hover { box-shadow: 0 0 0 2px var(--violet-c), var(--ombre); }
.pastille.actif,
.pastille.nacre.actif { box-shadow: 0 0 0 3px var(--violet), var(--ombre); }
.pastille.nacre { box-shadow: 0 0 0 1px #C9AE72, var(--ombre); }

.set-titre {
  font-weight: 800; font-size: .68rem; color: var(--violet);
  text-transform: uppercase; letter-spacing: .04em;
  margin: .15rem 0 .1rem;
}
.tiroir > div + div .set-titre { margin-top: .35rem; }

/* Une seule ligne qui défile sur le côté : sur un téléphone, chaque rangée
   gagnée est de la place rendue au visage. */
.grille-formes {
  display: flex; gap: .45rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* La barre de défilement se loge DANS la boîte, tout en bas : il faut donc
     lui réserver sa hauteur sous les vignettes, sinon elle leur mord dessus.
     Les règles `::-webkit-scrollbar` plus bas ne valent que pour Chrome et
     Safari ; Firefox les ignore et dessinait ici une barre épaisse, à
     flèches, en travers de la rangée. `scrollbar-width` est le réglage qu'il
     comprend, et 11 points suffisent à l'accueillir. */
  scrollbar-width: thin;
  scrollbar-color: #D8CEC2 transparent;
  padding-bottom: 11px;
  -webkit-overflow-scrolling: touch;
}
.case-forme {
  background: #FAF7F2; border-radius: 10px; padding: .25rem .2rem .2rem;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  border: 2px solid transparent; font-size: .57rem; font-weight: 700;
  line-height: 1.1; color: var(--encre-d);
  flex: 0 0 68px; scroll-snap-align: start;
}

/* barre de défilement discrète, mais visible : elle signale qu'il y a la suite */
.grille-formes::-webkit-scrollbar, .pastilles-rang::-webkit-scrollbar { height: 5px; }
.grille-formes::-webkit-scrollbar-thumb, .pastilles-rang::-webkit-scrollbar-thumb {
  background: #D8CEC2; border-radius: 3px;
}
.grille-formes::-webkit-scrollbar-track, .pastilles-rang::-webkit-scrollbar-track {
  background: transparent;
}
.case-forme svg { width: 100%; height: 40px; }
.case-forme.actif { border-color: var(--violet); background: #F3EDFB; color: var(--violet); }
.case-forme .nom { text-align: center; line-height: 1.15; }

.reglage { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.reglage label { font-size: .74rem; font-weight: 800; color: var(--encre-d); white-space: nowrap; }
.reglage input[type=range] { flex: 1; accent-color: var(--violet); }

/* Commandes de vue : elles n'apparaissent qu'une fois la loupe engagée, pour
   ne pas encombrer l'écran le reste du temps. */
.cmd-vue {
  position: absolute; top: 1rem; right: 1rem; z-index: 4;
  display: flex; align-items: center; gap: .25rem;
  background: rgba(255, 255, 255, .94); border-radius: 999px;
  padding: .25rem .3rem; box-shadow: var(--ombre-f);
}
.cmd {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--encre); background: transparent;
}
.cmd svg { width: 19px; height: 19px; }
.cmd:hover { background: #F3EDFB; color: var(--violet); }
.cmd.actif { background: var(--violet); color: #fff; }
.cmd-taux {
  font-size: .72rem; font-weight: 800; color: var(--encre-d);
  padding-right: .45rem; min-width: 3.1em; text-align: center;
}

/* --------------------------------------------------------------- messages */
.rappel {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .45rem; z-index: 5;
  background: var(--encre); color: #fff; border-radius: 999px;
  padding: .38em .9em; font-size: .74rem; font-weight: 700;
  box-shadow: var(--ombre-f); display: flex; align-items: center; gap: .5rem;
  max-width: calc(100% - 1rem); white-space: nowrap;
}
/* Le mot « fiche » EST le lien : même taille, même graisse que la phrase qui
   le porte, seulement souligné et en jaune. */
.rappel button {
  font: inherit; font-weight: 800; padding: 0;
  color: var(--jaune); text-decoration: underline;
}
.rappel button:hover { color: #fff; }

.voile {
  position: fixed; inset: 0; background: rgba(58, 52, 64, .45);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 50;
  /* Sur un petit écran, la fenêtre du récapitulatif est plus haute que ce
     qu'on a : on la laisse défiler plutôt que de la laisser déborder. `safe`
     empêche alors le centrage d'en couper le haut, qu'on ne pourrait plus
     atteindre. */
  overflow-y: auto;
  align-items: safe center;
}
.boite {
  position: relative;
  background: var(--blanc); border-radius: var(--r); padding: 1.5rem;
  max-width: 460px; width: 100%; box-shadow: var(--ombre-f);
  /* Ceinture et bretelles : la boîte elle-même ne dépasse jamais l'écran, et
     c'est son contenu qui défile. */
  max-height: calc(100svh - 2.4rem); overflow-y: auto;
}
/* La croix de fermeture, dans le coin. `position: absolute` sur la boîte, donc
   elle ne prend aucune place dans le flux et le titre garde toute sa largeur. */
.boite .croix {
  position: absolute; top: .55rem; right: .55rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--encre-d);
}
.boite .croix:hover { background: #F3EDFB; color: var(--violet); }
.boite .croix svg { width: 17px; height: 17px; }
/* Le titre s'arrête avant la croix, pour ne pas passer dessous. */
.boite .croix + h3 { padding-right: 2.2rem; }
/* Une question courte n'a pas besoin de la largeur prévue pour la liste du
   matériel : plus étroite, la phrase se replie plus tôt et se lit d'un coup. */
.boite.etroite { max-width: 350px; }
.boite h3 { font-size: 1.3rem; color: var(--violet); margin-bottom: .6rem; }
.boite p { color: var(--encre-d); line-height: 1.55; margin: 0 0 1.2rem; }
.boite .actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
/* Quand la croix se charge de fermer, il ne reste que les deux vraies actions :
   elles se mettent côte à côte, au milieu. */
.boite .actions.centrees { justify-content: center; }

/* ---------------------------------------------------- récapitulatif */
/* Les commandes de la forme choisie : de vrais boutons, sous la barre d'outils,
   plutôt que des pastilles à viser sur la forme elle-même. */
.boutons-forme {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .7rem 0; flex: 0 0 auto;
}
.boutons-forme .btn svg { width: 16px; height: 16px; }
.boutons-forme .btn-fantome { color: var(--rose); }
.boutons-forme .btn-fantome:hover { color: var(--rose); background: #FCEAF1; }

.recap { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.recap-bloc { flex: 1 1 160px; min-width: 0; }
.recap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.recap li { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; font-weight: 700; line-height: 1.25; }
.recap .puce {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; margin-top: .1rem;
  box-shadow: 0 0 0 1px var(--trait);
}
.recap .puce-forme { width: 22px; height: 22px; flex: 0 0 22px; color: var(--encre); }
.recap .puce-forme svg { width: 100%; height: 100%; }
/* Le kit ou la planche titre son groupe : il passe devant ce qu'il contient,
   au lieu de se répéter en petit sous chaque ligne. */
.recap-groupe + .recap-groupe { margin-top: .8rem; }
.recap .ou {
  display: block; font-size: .8rem; font-weight: 800; color: var(--violet);
  text-decoration: none; margin-bottom: .35rem;
}
.recap .ou:hover { text-decoration: underline; }
.recap-vide { font-style: italic; }

/* Ce qu'il faut acheter pour refaire le maquillage, sous la liste : une ligne
   par kit ou flacon, avec son lien « Découvrir », puis un seul bouton pour
   tout mettre au panier. */
.recap-kits { margin: 0 0 1.2rem; }
.recap-kit {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; border-radius: 12px; background: #F8F3FF;
}
.recap-kit + .recap-kit { margin-top: .4rem; }
.recap-kit .puce {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  box-shadow: 0 0 0 1px var(--trait);
}
.recap-kit-nom { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: .9rem; color: var(--encre); }
.recap-kit-voir { flex: 0 0 auto; font-size: .82rem; font-weight: 800; color: var(--violet); }
.recap-panier { display: flex; width: 100%; margin-top: .7rem; text-decoration: none; box-sizing: border-box; }

/* Sur un écran court, le dessin cède un peu de place : sinon la planche de
   pochoirs se réduit à une bande et devient pénible à parcourir. */
@media (max-height: 720px) {
  .scene { flex: 0 0 52%; }
  .case-forme { flex-basis: 62px; }
  .case-forme svg { height: 30px; }
  .pastille { width: 31px; height: 31px; }
  .outil { font-size: .6rem; }
  .outil svg { width: 17px; height: 17px; }
}

/* ----------------------------------------------------------- grand ecran */
@media (min-width: 900px) {
  .corps { flex-direction: row; }
  .scene { flex: 1 1 auto; }
  .outils {
    width: 352px; flex: 0 0 352px; max-height: none;
    border-top: 0; border-left: 1px solid var(--trait);
    order: 2; overflow-y: auto;
  }
  /* les neuf couleurs doivent tenir d'un coup dans cette colonne */
  .pastille { width: 31px; height: 31px; }
  .rangee-outils { flex-wrap: wrap; }
  .outil { flex: 1 1 28%; max-width: none; }
  .tiroir { max-height: none; flex: 1; }
  .scene { order: 1; padding: 1.2rem; }
}

/* ------------------------------------- commandes de la forme, dans le beige */
/* Sur un écran d'ordinateur assez large, les commandes de la forme choisie
   quittent la colonne des outils pour venir se poser dans le beige, à gauche
   de celle-ci.

   Deux raisons. Elles apparaissent et disparaissent au gré de la sélection :
   tant qu'elles étaient DANS la colonne, chaque clic sur une forme poussait
   toute la planche de pochoirs vers le bas. Et elles agissent sur la forme
   qu'on vient de toucher : les rapprocher du dessin, c'est les mettre là où
   l'œil est déjà.

   La scène leur RÉSERVE leur bande, au lieu de les laisser flotter par dessus.
   Sans cette réserve, elles recouvrent le bord droit du dessin dès que la
   fenêtre est haute : le dessin s'étale alors jusqu'au bord et il ne reste
   plus de beige pour les accueillir. La bande est là en permanence, qu'une
   forme soit choisie ou non — c'est ce qui fait que le dessin ne change JAMAIS
   de taille en cours de route.

   La bande est réservée DES DEUX CÔTÉS, alors qu'on ne se sert que de la
   droite. C'est ce qui garde le visage au milieu du beige : une réserve d'un
   seul côté le pousserait vers la gauche. La bande de gauche n'est pas perdue
   pour autant, le taux de zoom vient s'y loger.

   POURQUOI 1180 px et non 900 : en deçà, la réserve se paie sur le dessin, qui
   est alors limité par sa largeur. Au-delà, sur les formats d'écran courants
   (1280×800, 1440×900, 1536×864, 1920×1080), le dessin est limité par la
   HAUTEUR et les deux bandes ne lui coûtent rien du tout — c'est pour ça que
   la carte est étroite. Entre 900 et 1180, les deux boutons restent dans la
   colonne, comme sur tablette. */
@media (min-width: 1180px) {
  /* `--commandes` est la largeur de la carte : elle sert DEUX fois, à la carte
     et aux bandes que la scène réserve. D'où le réglage unique. */
  .corps { position: relative; --commandes: 4.6rem; }
  .scene {
    padding-left: calc(2.4rem + var(--commandes));
    padding-right: calc(2.4rem + var(--commandes));
  }

  /* En haut, à hauteur des premiers outils : c'est là que le regard va quand
     il quitte la forme qu'il vient de poser.

     `right` part du bord droit du corps : il faut donc franchir la colonne des
     outils. Si tu changes ses 352 px plus haut, change aussi ce nombre-ci. */
  .boutons-forme {
    position: absolute; z-index: 3;
    right: calc(352px + 1.2rem); top: 1.2rem;
    flex-direction: column; align-items: stretch; width: var(--commandes);
    padding: .3rem; gap: .25rem;
    background: rgba(255, 255, 255, .94); border-radius: var(--r);
    box-shadow: var(--ombre-f);
  }
  /* Taillés comme les boutons d'outils, icône au-dessus du mot : c'est le même
     geste, ça se lit sans effort, et ça tient dans une bande étroite. */
  .boutons-forme .btn {
    flex-direction: column; gap: .1rem; padding: .4rem .15rem;
    border-radius: 10px; font-size: .63rem; line-height: 1.2; text-align: center;
  }
  .boutons-forme .btn svg { width: 19px; height: 19px; }

  /* Le taux de zoom passe à gauche : à droite, il se cognerait à la carte
     ci-dessus, qui occupe désormais ce coin-là. */
  .cmd-vue { left: 1rem; right: auto; }
}