/* =====================================================================
   ALTERNOTE — PAGE D'AUTHENTIFICATION  (v37)
   ---------------------------------------------------------------------
   Feuille autonome : cette page ne charge PAS style.css. Elle n'a ni
   en-tête, ni tiroir, ni rien du mobilier de l'application, et elle
   pose des règles globales (box-sizing, body) qui n'ont pas à fuir
   dans le reste.

   LE VOLET GAUCHE
   ---------------
   Une PHOTOGRAPHIE de façade si le cabinet en dépose une sous
   `static/accueil.jpg` ; à défaut, la façade dessinée, qui ne dépend
   d'aucun fichier et tient hors ligne. Dans les deux cas, les repères
   numérotés et la cote se posent par-dessus, en pourcentages, et se
   règlent en haut du gabarit.

   DEUX THÈMES, UNE SEULE PAGE
   ---------------------------
   « Atelier » (clair) et « Ardoise » (sombre) ne sont pas deux pages :
   c'est un seul jeu de valeurs posé deux fois. Le thème change la
   VALEUR et la COULEUR ; il ne change ni la typographie, ni la
   composition, ni le dessin. Par défaut la page suit le réglage du
   système ; un choix explicite est gardé dans le navigateur.

   TYPOGRAPHIE
   -----------
   Source Serif 4 pour l'affichage — le slogan et « Bonjour » — et
   Inter Tight pour l'interface. Un sérif qui a du corps porte mieux
   une accroche qu'un grotesque maigre ; un grotesque sert mieux un
   formulaire qu'un sérif.
   ===================================================================== */

@font-face { font-family: 'SSerif'; font-weight: 400; font-style: normal;
  src: url('polices/serif-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'SSerif'; font-weight: 600; font-style: normal;
  src: url('polices/serif-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'SSerif'; font-weight: 700; font-style: normal;
  src: url('polices/serif-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; font-weight: 300; font-style: normal;
  src: url('polices/inter-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; font-weight: 400; font-style: normal;
  src: url('polices/inter-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-style: normal;
  src: url('polices/inter-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; font-weight: 600; font-style: normal;
  src: url('polices/inter-600.woff2') format('woff2'); font-display: swap; }

/* ---------------------------------------------------------------------
   ATELIER — thème clair, et base de tous les jetons.

   Chaque couleur du dessin veut dire quelque chose, ce qui est la seule
   façon d'en mettre sans décorer :

     rouge brique  les fissures — c'est au rouge qu'on les marque sur
                   site, et c'est ce qui ouvre un suivi ;
     rouille       les aciers corrodés, qui sont de cette couleur ;
     bleu-vert     l'eau, donc l'auréole d'infiltration ;
     marine        l'appareil de lecture : repères, cotes, bouton.
   --------------------------------------------------------------------- */
:root {
  --sans: 'Inter Tight', system-ui, 'Segoe UI', sans-serif;
  --affiche: 'SSerif', Georgia, 'Times New Roman', serif;

  --acces-fond: #FFFFFF;
  --volet-bord: #E6E0D4;
  --voile: linear-gradient(to top, rgba(10, 26, 36, .94) 0%,
           rgba(10, 26, 36, .90) 42%, rgba(10, 26, 36, .52) 70%,
           rgba(10, 26, 36, 0) 95%);

  --ciel-haut: #F3EEE4;
  --ciel-bas:  #E4DCCC;
  --lumiere:   rgba(255, 252, 244, .85);
  --vignette:  rgba(84, 72, 52, .16);
  --grain:     .055;

  --mur-haut:  #FBF8F2;
  --mur-bas:   #E8E1D4;
  --retour:    #CFC6B6;
  --retour-bas:#BEB4A2;
  --bande:     #FDFBF6;
  --arete:     rgba(255, 255, 255, .95);
  --tableau:   #C6BCAA;
  --verre-haut:#7E8E97;
  --verre-bas: #5C6B74;
  --reflet:    rgba(255, 255, 255, .55);
  --meneau:    rgba(255, 255, 255, .22);
  --sol:       #DED5C4;
  --ombre:     rgba(92, 79, 58, .22);

  --titre: #10384C;
  --courant: #4E6473;
  --discret: #6E8491;
  --tenu: #9FAFB9;

  --accent: #10556F;
  --accent-haut: #0C4257;
  --accent-texte: #FFFFFF;
  --accent-voile: rgba(16, 85, 111, .15);

  --champ-fond: #FFFFFF;
  --champ-bord: #D6DEE3;
  --champ-texte: #10384C;
  --champ-icone: #8DA0AC;

  --alerte-fond: #FCEDE9;
  --alerte-bord: #EFC6BC;
  --alerte-texte: #9A3520;

  --de-trait: #D1482B;
  --de-acier: #B2561F;
  --de-humide: #16807F;
  --de-tache: rgba(22, 128, 127, .14);
  --de-repere: #10556F;

  /* La légende se pose toujours sur une image sombrée par le voile :
     elle est claire dans les deux thèmes. */
  --legende: #FFFFFF;
  --legende-tenu: rgba(255, 255, 255, .78);
  --legende-barre: #7FC4DD;
}

/* ---------------------------------------------------------------------
   ARDOISE — thème sombre. La même page de nuit.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --acces-fond: #0C1A23;
    --volet-bord: rgba(255, 255, 255, .07);
    --voile: linear-gradient(to top, rgba(4, 12, 18, .95) 0%,
             rgba(4, 12, 18, .91) 42%, rgba(4, 12, 18, .54) 70%,
             rgba(4, 12, 18, 0) 95%);

    --ciel-haut: #0A1A25;
    --ciel-bas:  #16313F;
    --lumiere:   rgba(150, 196, 220, .22);
    --vignette:  rgba(0, 0, 0, .46);
    --grain:     .07;

    --mur-haut:  #2B3C48;
    --mur-bas:   #16242E;
    --retour:    #16242E;
    --retour-bas:#0F1C25;
    --bande:     #3C505E;
    --arete:     rgba(190, 216, 232, .5);
    --tableau:   #0E1A22;
    --verre-haut:#16303E;
    --verre-bas: #0B1A24;
    --reflet:    rgba(150, 196, 220, .3);
    --meneau:    rgba(190, 216, 232, .14);
    --sol:       #0A151C;
    --ombre:     rgba(0, 0, 0, .5);

    --titre: #EAF2F7;
    --courant: #93AABA;
    --discret: #7E97A6;
    --tenu: #5A7284;

    --accent: #6FC0E0;
    --accent-haut: #8DD1EB;
    --accent-texte: #06202C;
    --accent-voile: rgba(111, 192, 224, .18);

    --champ-fond: #132430;
    --champ-bord: #273C4A;
    --champ-texte: #EAF2F7;
    --champ-icone: #6D8899;

    --alerte-fond: #2E1A17;
    --alerte-bord: #6A382C;
    --alerte-texte: #F6B49C;

    --de-trait: #F08A5F;
    --de-acier: #CE7E4C;
    --de-humide: #58C2C2;
    --de-tache: rgba(88, 194, 194, .12);
    --de-repere: #6FC0E0;

    --legende: #FFFFFF;
    --legende-tenu: rgba(255, 255, 255, .72);
    --legende-barre: #6FC0E0;
  }
}

:root[data-theme="sombre"] {
  --acces-fond: #0C1A23;
  --volet-bord: rgba(255, 255, 255, .07);
  --voile: linear-gradient(to top, rgba(4, 12, 18, .95) 0%,
           rgba(4, 12, 18, .91) 42%, rgba(4, 12, 18, .54) 70%,
           rgba(4, 12, 18, 0) 95%);

  --ciel-haut: #0A1A25;
  --ciel-bas:  #16313F;
  --lumiere:   rgba(150, 196, 220, .22);
  --vignette:  rgba(0, 0, 0, .46);
  --grain:     .07;

  --mur-haut:  #2B3C48;
  --mur-bas:   #16242E;
  --retour:    #16242E;
  --retour-bas:#0F1C25;
  --bande:     #3C505E;
  --arete:     rgba(190, 216, 232, .5);
  --tableau:   #0E1A22;
  --verre-haut:#16303E;
  --verre-bas: #0B1A24;
  --reflet:    rgba(150, 196, 220, .3);
  --meneau:    rgba(190, 216, 232, .14);
  --sol:       #0A151C;
  --ombre:     rgba(0, 0, 0, .5);

  --titre: #EAF2F7;
  --courant: #93AABA;
  --discret: #7E97A6;
  --tenu: #5A7284;

  --accent: #6FC0E0;
  --accent-haut: #8DD1EB;
  --accent-texte: #06202C;
  --accent-voile: rgba(111, 192, 224, .18);

  --champ-fond: #132430;
  --champ-bord: #273C4A;
  --champ-texte: #EAF2F7;
  --champ-icone: #6D8899;

  --alerte-fond: #2E1A17;
  --alerte-bord: #6A382C;
  --alerte-texte: #F6B49C;

  --de-trait: #F08A5F;
  --de-acier: #CE7E4C;
  --de-humide: #58C2C2;
  --de-tache: rgba(88, 194, 194, .12);
  --de-repere: #6FC0E0;

  --legende: #FFFFFF;
  --legende-tenu: rgba(255, 255, 255, .72);
  --legende-barre: #6FC0E0;
}

/* =====================================================================
   STRUCTURE
   ===================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--titre);
  background: var(--acces-fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lg {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

/* ---------- Volet gauche ---------- */
.lg-volet {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--ciel-haut);
  border-right: 1px solid var(--volet-bord);
}
.lg-photo, .lg-dessin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lg-photo { object-fit: cover; object-position: center; }

/* Vignettage : l'image se tient au centre et les bords s'éteignent. */
.lg-volet::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(118% 92% at 50% 40%, transparent 50%, var(--vignette) 100%);
}

.lg-legende {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 190px clamp(34px, 4.4vw, 70px) clamp(40px, 4.6vw, 64px);
  background: var(--voile);
}
.lg-barre {
  width: 54px; height: 3px; border-radius: 2px;
  background: var(--legende-barre);
  margin: 0 0 26px;
}
.lg-slogan {
  margin: 0;
  font-family: var(--affiche);
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.016em;
  color: var(--legende);
  max-width: 17ch;
  /* Sur une photographie, le voile seul ne suffit pas toujours : un ciel
     clair derrière une lettre fine la mange. */
  text-shadow: 0 1px 20px rgba(0, 0, 0, .35);
}
.lg-domaines {
  margin: 22px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--legende-tenu);
}

/* ---------- Les repères posés sur l'image ----------
   En pourcentages, pour tenir quel que soit le recadrage. Chaque repère
   porte ses deux coordonnées en ligne dans le gabarit : c'est le seul
   endroit à retoucher quand la photographie change. */
.lg-reperes {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.lg-repere {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center;
}
.lg-repere b {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--de-repere);
  color: var(--accent-texte);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.lg-repere i {
  height: 1.5px;
  background: var(--de-repere);
  width: var(--trait, 70px);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.lg-repere.a-gauche { flex-direction: row-reverse; }

.lg-cote {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px;
  border-radius: 7px;
  background: var(--de-repere);
  color: var(--accent-texte);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.lg-cote svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Volet droit : l'accès ---------- */
.lg-acces {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--acces-fond);
  padding: clamp(40px, 4vw, 72px);
  padding-top: max(clamp(40px, 4vw, 72px), env(safe-area-inset-top));
  padding-bottom: max(clamp(40px, 4vw, 72px), env(safe-area-inset-bottom));
}
.lg-bloc {
  margin: auto;
  width: 100%;
  max-width: 372px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lg-marque { display: flex; align-items: center; gap: 16px; }
.lg-marque img { display: block; width: 46px; height: 46px; }
.lg-marque__nom {
  font-size: 22px; font-weight: 600; letter-spacing: .22em;
  color: var(--titre);
}
.lg-marque__soc {
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; margin-top: 4px;
  color: var(--discret);
}

.lg-acces h1 {
  margin: 0;
  font-family: var(--affiche);
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--titre);
}
.lg-intro { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--courant); }

/* L'erreur nomme la cause : un accès expiré n'appelle pas la même
   réaction qu'un mot de passe erroné, et un blocage pour tentatives
   répétées annonce sa durée. */
.lg-alerte {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 13px 15px;
  border-radius: 8px; font-size: 13.5px; line-height: 1.5;
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-bord);
  color: var(--alerte-texte);
}
.lg-alerte svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }

.lg-form { display: flex; flex-direction: column; gap: 18px; }
.lg-champ { display: flex; flex-direction: column; gap: 8px; }
.lg-champ label { font-size: 14px; font-weight: 500; color: var(--titre); }
.lg-boite { position: relative; display: flex; align-items: center; }
.lg-boite > svg {
  position: absolute; left: 15px; width: 19px; height: 19px;
  fill: none; stroke: var(--champ-icone); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.lg-champ input {
  width: 100%; height: 54px; padding: 0 16px 0 46px;
  background: var(--champ-fond);
  border: 1px solid var(--champ-bord);
  border-radius: 8px;
  font: inherit;
  /* 17px : au-dessus du seuil de 16px sous lequel iOS zoome à la mise
     au point, et assez gros pour une saisie au pouce sur chantier. */
  font-size: 17px; font-weight: 400;
  color: var(--champ-texte);
  transition: border-color .15s, box-shadow .15s;
}
.lg-champ input::placeholder { color: var(--tenu); }
.lg-champ input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-voile);
}

.lg-mdp input { padding-right: 52px; }
.lg-oeil {
  position: absolute; right: 5px; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--champ-icone); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.lg-oeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
               stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-oeil[aria-pressed="true"] { color: var(--accent); }
.lg-oeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lg-case {
  display: flex; align-items: center; gap: 11px; min-height: 40px;
  font-size: 14px; color: var(--courant); cursor: pointer;
}
.lg-case input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }

.lg-bouton {
  height: 56px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: var(--accent-texte);
  font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s;
}
.lg-bouton svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
                 stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-bouton:hover { background: var(--accent-haut); }
.lg-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lg-aide { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--discret); }

.lg-signature {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--tenu);
}

/* ---------- La bascule de thème ----------
   Discrète, en haut à droite du volet d'accès : on la cherche une fois,
   on n'y revient jamais. Elle porte son état en toutes lettres, pour
   qu'un lecteur d'écran dise ce qu'elle fait. */
.lg-theme {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--champ-bord);
  border-radius: 8px;
  background: transparent;
  color: var(--courant);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.lg-theme:hover { color: var(--titre); border-color: var(--accent); }
.lg-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-theme svg { width: 16px; height: 16px; fill: none;
                stroke: currentColor; stroke-width: 1.7;
                stroke-linecap: round; stroke-linejoin: round; }
.lg-theme .ico-nuit { display: none; }
.lg-theme[data-etat="sombre"] .ico-jour { display: none; }
.lg-theme[data-etat="sombre"] .ico-nuit { display: block; }

/* =====================================================================
   LA FAÇADE DESSINÉE — affichée tant qu'aucune photographie n'est
   déposée. Béton en dégradé, verre avec son reflet, nez de plancher qui
   accrochent la lumière, et un grain fin : sans lui, tout dégradé reste
   du plastique.

   Ses repères à elle ne sont pas tracés : ce sont ceux de la couche
   `lg-reperes`, communs à l'image et au dessin.
   ===================================================================== */
.lg-dessin .st-ciel-h  { stop-color: var(--ciel-haut); }
.lg-dessin .st-ciel-b  { stop-color: var(--ciel-bas); }
.lg-dessin .st-mur-h   { stop-color: var(--mur-haut); }
.lg-dessin .st-mur-b   { stop-color: var(--mur-bas); }
.lg-dessin .st-ret-h   { stop-color: var(--retour); }
.lg-dessin .st-ret-b   { stop-color: var(--retour-bas); }
.lg-dessin .st-verre-h { stop-color: var(--verre-haut); }
.lg-dessin .st-verre-b { stop-color: var(--verre-bas); }
.lg-dessin .st-lum-d   { stop-color: var(--lumiere); }
.lg-dessin .st-lum-f   { stop-color: var(--lumiere); stop-opacity: 0; }

.lg-dessin .fa-ciel     { fill: url(#g-ciel); }
.lg-dessin .fa-lumiere  { fill: url(#g-lumiere); }
.lg-dessin .fa-ombre    { fill: var(--ombre); filter: url(#f-flou); }
.lg-dessin .fa-mur      { fill: url(#g-mur); }
.lg-dessin .fa-retour   { fill: url(#g-retour); }
.lg-dessin .fa-acrotere { fill: url(#g-mur); }
.lg-dessin .fa-acrotere-r { fill: url(#g-retour); }
.lg-dessin .fa-couvertine { fill: var(--bande); }
.lg-dessin .fa-bande    { fill: var(--bande); }
.lg-dessin .fa-bande-r  { fill: var(--retour); }
.lg-dessin .fa-arete    { fill: none; stroke: var(--arete); stroke-width: 1.2; }
.lg-dessin .fa-tableau  { fill: var(--tableau); }
.lg-dessin .fa-verre    { fill: url(#g-verre); }
.lg-dessin .fa-verre-r  { fill: var(--verre-bas); opacity: .8; }
.lg-dessin .fa-reflet   { fill: var(--reflet); }
.lg-dessin .fa-meneau   { fill: none; stroke: var(--meneau); stroke-width: 1.4; }
.lg-dessin .fa-sol      { fill: var(--sol); }
.lg-dessin .fa-grain    { opacity: var(--grain); mix-blend-mode: overlay;
                          pointer-events: none; }

.lg-dessin .de-trait    { fill: none; stroke: var(--de-trait); stroke-width: 2.6;
                          stroke-linecap: round; stroke-linejoin: round; }
.lg-dessin .de-fin      { fill: none; stroke: var(--de-trait); stroke-width: 1.3;
                          opacity: .6; stroke-linecap: round; }
.lg-dessin .de-acier    { fill: none; stroke: var(--de-acier); stroke-width: 3;
                          stroke-linecap: round; }
.lg-dessin .de-acier-fin{ fill: none; stroke: var(--de-acier); stroke-width: 1.5;
                          opacity: .8; stroke-linecap: round; }
.lg-dessin .de-tache    { fill: var(--de-tache); filter: url(#f-flou-s); }
.lg-dessin .de-humide   { fill: none; stroke: var(--de-humide); stroke-width: 1.6;
                          stroke-dasharray: 8 8; opacity: .85; }
.lg-dessin .de-cote,
.lg-dessin .de-mesure,
.lg-dessin .de-ligne,
.lg-dessin .de-pastille,
.lg-dessin .de-numero { display: none; }

/* =====================================================================
   ÉCRANS INTERMÉDIAIRES, TABLETTE, TÉLÉPHONE
   ===================================================================== */
@media (max-width: 1240px) and (min-width: 901px) {
  .lg { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .lg-legende { padding: 150px 40px 48px; }
  .lg-slogan { font-size: 36px; }
  .lg-acces { padding: 44px 48px; }
}

@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg-volet {
    min-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid var(--volet-bord);
  }
  .lg-legende { padding: 120px 24px 26px; }
  .lg-slogan { font-size: clamp(27px, 7vw, 40px); max-width: 18ch; }
  .lg-domaines { margin-top: 14px; font-size: 10px; line-height: 1.9; }
  .lg-barre { margin-bottom: 18px; width: 44px; }
  /* Réduits de moitié, les repères ne se lisent plus et ne sont que du
     bruit sur l'image. */
  .lg-reperes { display: none; }

  .lg-acces { padding: 32px 24px 26px; }
  .lg-bloc { margin: 0 auto; gap: 24px; }
  .lg-theme { top: 16px; right: 16px; height: 34px; padding: 0 12px; }
  .lg-signature { margin-top: 28px; flex-direction: column;
                  align-items: center; text-align: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-bouton, .lg-champ input, .lg-theme { transition: none; }
}