/*!
 * Atlas — gestionnaire immobilier. Version 1.85.0.
 * Copyright (c) 2026 Systegon. Tous droits reserves.
 *
 * Ce fichier et son contenu sont protégés par le droit d'auteur
 * (code de la propriété intellectuelle, art. L112-2 et L122-6).
 * Leur reproduction, adaptation ou réutilisation, même partielle,
 * est interdite sans autorisation écrite de Systegon.
 *
 * https://atlas.systegon.com — contact-atlas@systegon.com
 */
/* L'ATELIER DU GÉNÉRATEUR GRATUIT.
 *
 * Une seule idée de mise en page : la personne voit le document se remplir
 * pendant qu'elle tape. C'est ce qui distingue cet outil des dizaines de
 * « modèles de quittance » téléchargeables — ici on ne promet pas le
 * résultat, on le montre.
 *
 * Le style s'appuie entièrement sur les variables de `vitrine.css`, donc sur
 * la même lumière que le reste du site.
 */

.gratuit-tete{padding-bottom:26px;}
.gratuit-tete h1{font-size:clamp(30px,4.4vw,52px);}

/* ── Le choix du document ─────────────────────────────────────────────── */
/* SIX ACTES, PAS DEUX. La grille tenait sur 760 px quand il n'y avait qu'une
   rangée ; à six, cela faisait trois rangées de deux — une colonne étroite et
   haute, qu'on prend pour une liste à lire plutôt que pour un choix à faire.
   Élargie, elle se pose en deux rangées de trois sur un écran d'ordinateur,
   deux de deux sur une tablette, et s'empile sur un téléphone. */
.g-choix{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:1000px;margin:0 auto 40px;
}
@media (max-width:900px){ .g-choix{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .g-choix{grid-template-columns:1fr;} }
.g-choix-btn{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 16px;border-radius:var(--r-md,16px);cursor:pointer;
  font-family:inherit;color:var(--encre);
  background:rgba(255,255,255,.035);border:var(--filet,1px) solid var(--trait);
  transition:border-color .2s, background .2s, transform .2s;
}
.g-choix-btn:hover{transform:translateY(-2px);border-color:var(--accent-ombre);}
.g-choix-btn.actif{
  border-color:var(--accent);background:var(--accent-sourd);
}
.g-choix-btn svg{
  width:24px;height:24px;flex-shrink:0;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.g-choix-btn b{display:block;font-size:15px;font-weight:600;margin-bottom:2px;}
.g-choix-btn small{display:block;font-size:12.5px;color:var(--encre-douce);}

/* ── L'atelier ────────────────────────────────────────────────────────── */
.g-atelier{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;align-items:start;
}
@media (max-width:940px){
  .g-atelier{grid-template-columns:minmax(0,1fr);}
  /* Sur téléphone l'aperçu passe DEVANT le formulaire : il faut voir ce
     qu'on fabrique avant de se lancer dans quinze champs. */
  .g-apercu-col{order:-1;}
}

/* Le formulaire. Les classes `form-group`, `gen-groupe`… viennent du
   générateur de l'application ; elles sont restylées ici parce que la
   vitrine est sombre et n'embarque pas `app.css`. */
.gen-groupe{
  border:var(--filet,1px) solid var(--trait);border-radius:var(--r-md,16px);
  padding:20px 22px 6px;margin:0 0 18px;
  background:rgba(255,255,255,.025);
}
.gen-groupe legend{
  padding:0 10px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.form-group{margin-bottom:16px;}
.form-group > label{
  display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--encre-douce);
}
.form-group > label i{color:var(--accent);font-style:normal;margin-left:3px;}
.gen-repris{display:none;}   /* rien n'est repris d'une fiche : il n'y en a pas */

#g-form input,#g-form select,#g-form textarea{
  width:100%;padding:10px 13px;border-radius:var(--r-sm,10px);
  /* 16 px : le générateur gratuit est l'écran d'entrée d'un inconnu, et sous ce
     seuil iOS zoome à chaque champ (voir base.css). */
  font-family:inherit;font-size:16px;color:var(--encre);
  background:rgba(255,255,255,.05);border:var(--filet,1px) solid var(--trait);
  transition:border-color .18s, background .18s;
}
#g-form input:focus,#g-form select:focus,#g-form textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.08);
}
#g-form textarea{resize:vertical;min-height:70px;}
#g-form select option{background:#101828;color:#fff;}

.gen-aide{margin:6px 0 0;font-size:12.5px;color:var(--encre-douce);opacity:.85;}

/* Cases à cocher : la cible tactile fait 40 px de haut au minimum. */
.form-case{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 0;min-height:40px;cursor:pointer;
}
.form-case input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--accent);}
.form-case strong{font-size:14px;font-weight:500;color:var(--encre);}
.form-case small{display:block;font-size:12.5px;color:var(--encre-douce);margin-top:2px;}

/* Le rappel légal sous le type de bail : c'est ce qui rend l'outil sérieux. */
.gen-loi{
  margin-top:10px;padding:11px 14px;border-radius:var(--r-sm,10px);
  font-size:12.5px;line-height:1.55;color:var(--encre-douce);
  background:var(--accent-sourd);border:var(--filet,1px) solid var(--accent-sourd);
}
.gen-loi b{color:var(--accent);}
.gen-loi em{display:block;margin-top:4px;font-style:normal;opacity:.9;}

/* ── L'aperçu ─────────────────────────────────────────────────────────── */
.g-apercu-col{position:sticky;top:24px;min-width:0;}
.g-apercu-boite{
  border-radius:var(--r-md,16px);overflow:hidden;min-width:0;
  border:var(--filet,1px) solid var(--trait);background:rgba(255,255,255,.03);
}
.g-apercu-barre{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-bottom:var(--filet,1px) solid var(--trait);
}
.g-apercu-titre{
  font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-douce);
}
.g-apercu-etat{font-size:12.5px;color:var(--encre-douce);text-align:right;max-width:60%;}
.g-apercu-etat.ok{color:var(--accent);}
.g-apercu-etat.attente{color:#e8a06a;}
/* L'APERÇU EST MIS À L'ÉCHELLE, JAMAIS RÉAGENCÉ.
   Le document fait une largeur A4 (210 mm ≈ 794 px). Laissé libre dans une
   iframe étroite, il se réagence : l'en-tête casse sur quatre lignes et
   l'aperçu ne ressemble plus au PDF qu'on va télécharger — soit exactement
   le contraire de sa raison d'être. On garde donc la largeur du papier et
   on réduit l'ensemble, comme le fait n'importe quel aperçu avant impression. */
.g-apercu-cadre{
  position:relative;overflow:hidden;background:#fff;width:100%;
  /* `max-height` et non `height` : le script pose la hauteur réelle du papier
     réduit et lit ce plafond pour savoir quand le document doit défiler. */
  max-height:min(74vh,760px);
  height:min(74vh,760px);
}
#g-apercu{
  display:block;border:0;background:#fff;
  width:794px;height:1123px;          /* A4 à 96 ppp */
  transform-origin:top left;
  /* Repli si le JavaScript ne s'exécute pas : mieux vaut un document un peu
     grand qu'un cadre vide. */
  transform:scale(1);
}
@media (max-width:940px){ .g-apercu-cadre{max-height:62vh;height:62vh;} .g-apercu-col{position:static;} }

.g-telecharger{width:100%;justify-content:center;margin-top:16px;}
.g-telecharger:disabled{opacity:.45;cursor:not-allowed;transform:none;}
/* ── Recevoir le document par courriel ─────────────────────────────────
   Sous le téléchargement, et visiblement second : un trait, un « ou », un
   champ. Celui qui voulait juste son PDF a déjà cliqué au-dessus ; celui qui
   lit jusqu'ici cherche autre chose. */
.g-envoi{
  margin-top:18px;padding-top:18px;
  border-top:var(--filet,1px) solid var(--trait);
}
.g-envoi-ou{
  display:block;text-align:center;margin-bottom:12px;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-douce);
}
.g-envoi-ligne{display:flex;gap:10px;}
.g-envoi-ligne input{
  flex:1;min-width:0;
  padding:11px 14px;border-radius:var(--r-sm,12px);
  font-family:inherit;font-size:15px;color:var(--encre);
  background:rgba(255,255,255,.04);border:var(--filet,1px) solid var(--trait);
  transition:border-color .2s;
}
.g-envoi-ligne input:focus{outline:none;border-color:var(--accent);}
.g-envoi-ligne input::placeholder{color:var(--encre-douce);opacity:.7;}
.g-envoi-ligne .bouton{flex-shrink:0;}
.g-envoi-dit{
  margin:10px 0 0;font-size:13px;line-height:1.5;min-height:1px;
  color:var(--encre-douce);
}
.g-envoi-dit.ok{color:var(--accent);}
.g-envoi-dit.attente{color:#e0a06a;}
/* Sur un écran étroit le bouton passe sous le champ : côte à côte, il ne
   reste au champ que la place d'écrire « a@b.fr ». */
@media (max-width:420px){
  .g-envoi-ligne{flex-direction:column;}
  .g-envoi-ligne .bouton{justify-content:center;}
}

.g-note{
  margin:14px 2px 0;font-size:12.5px;line-height:1.6;color:var(--encre-douce);
}

/* ── La bascule commerciale ───────────────────────────────────────────── */
.franchise-zone{padding-top:20px;}
.g-limite{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:44px;align-items:center;
  padding:38px;border-radius:var(--r-lg,24px);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:var(--filet,1px) solid var(--trait);
}
@media (max-width:860px){ .g-limite{grid-template-columns:1fr;gap:28px;padding:26px;} }

.g-compare{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.g-compare li{
  display:flex;align-items:baseline;gap:11px;
  font-size:14.5px;line-height:1.55;color:var(--encre-douce);
}
.g-compare span{
  flex-shrink:0;min-width:52px;padding:3px 9px;border-radius:var(--r-pill,99px);
  font-size:11.5px;font-weight:600;text-align:center;
}
.g-non{background:rgba(255,255,255,.07);color:var(--encre-douce);}
.g-oui{background:var(--accent-sourd);color:var(--accent);}

/* Le choix du destinataire. Il change le texte du courriel, pas seulement
   l'adresse — d'où une case à cocher explicite plutôt qu'un réglage caché. */
.g-envoi-choix{
  display:flex;align-items:flex-start;gap:0;margin-top:4px;cursor:pointer;
}
.g-envoi-choix input{
  /* LA ZONE DE TOUCHE FAIT 40 px, LA CASE EN FAIT 18. Au doigt, une case de
     17 px se manque une fois sur trois ; la grossir à 40 la rendrait énorme à
     l'écran. On garde donc sa taille visuelle et on étend sa surface sensible
     par un débordement transparent — le label entier reste cliquable, mais la
     case l'est aussi pour de bon. */
  /* LA CASE EST DESSINÉE, PAS NATIVE — et c'est la seule façon d'obtenir une
     vraie zone de touche. Les navigateurs ignorent `padding` sur une case
     native : elle reste à 17 px quoi qu'on écrive, et au doigt elle se manque
     une fois sur trois. En reprenant son dessin, l'élément peut faire 40 px
     de surface sensible tout en n'en montrant que 18.
     Le label entier restait cliquable, mais viser la case elle-même est un
     geste que les gens font — il doit marcher. */
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:40px;height:40px;margin:0;padding:0;
  display:grid;place-content:center;cursor:pointer;
  background:none;border:0;
}
.g-envoi-choix input::before{
  content:'';display:block;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--trait-vif, rgba(255,255,255,.28));
  background:rgba(0,0,0,.2);
  transition:background .15s, border-color .15s;
}
.g-envoi-choix input:checked::before{
  background:var(--accent);border-color:var(--accent);
  /* La coche, en SVG inline : pas d'image à charger pour dix pixels. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308131f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.g-envoi-choix input:focus-visible::before{outline:2px solid var(--accent);outline-offset:2px;}
.g-envoi-choix:hover input::before{border-color:var(--accent);}
.g-envoi-choix span{
  font-size:13px;line-height:1.55;color:var(--encre-tenue);
  padding:11px 0;
}
.g-envoi-choix:hover span{color:var(--encre-douce);}

/* ══════════════════════════════════════════════════════════════════════════
   LE TABLEAU DE MOBILIER, LE MODE ET LE CONTRÔLE
   ══════════════════════════════════════════════════════════════════════════
   Restylés ici comme le reste du formulaire, et pour la même raison qu'en
   tête de ce fichier : la vitrine est sombre et n'embarque pas `app.css`. Ce
   qui est dupliqué, c'est l'APPARENCE ; la structure et les libellés viennent
   d'un seul module (generateur-champs.js), et c'est là qu'est le vrai risque
   de divergence — un bail dont la mention légale change d'un côté sans
   l'autre. Une bordure qui diverge se voit ; une clause, non.
   ══════════════════════════════════════════════════════════════════════════ */
.gen-tab-entete,.gen-tab-ligne{
  display:grid;gap:6px;align-items:center;
  grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)) 32px;
}
.gen-tab-entete{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mist-dim);font-weight:700;margin:8px 0 5px;
}
.gen-tab-ligne{margin-bottom:5px;}
.gen-tab-ligne datalist{display:none;}
.gen-tab-ligne input,.gen-tab-ligne select{
  width:100%;min-width:0;padding:7px 8px;font-size:16px;
  background:var(--fond-champ,rgba(255,255,255,.04));
  border:var(--filet,1px) solid var(--trait);border-radius:var(--r-xs,7px);color:var(--encre,#eef2f8);
}
.gen-tab-ligne input:focus,.gen-tab-ligne select:focus{border-color:var(--accent);outline:none;}
.gen-tab-x{
  display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-xs,7px);
  background:transparent;border:var(--filet,1px) solid var(--trait);color:var(--mist-dim);cursor:pointer;
}
.gen-tab-x:hover{border-color:#e2574c;color:#e2574c;}
.gen-tab-x svg{width:14px;height:14px;}

.gen-mode{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 18px;padding:10px 12px;border-radius:var(--r-sm,12px);
  background:rgba(255,255,255,.03);border:var(--filet,1px) solid var(--trait);
}
.gen-mode-b{
  /* 40px de haut : c'est le minimum d'une cible tactile. Ces deux boutons
     faisaient 31px — assez pour la souris, trop peu pour un pouce, et le banc
     mobile les relevait sur les deux écrans du générateur. */
  display:inline-flex;align-items:center;min-height:40px;
  padding:6px 16px;border-radius:var(--r-pill,99px);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--mist);
  background:transparent;border:var(--filet,1px) solid transparent;
}
.gen-mode-b.actif{
  color:var(--encre,#eef2f8);border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.gen-mode-note{flex:1 1 240px;font-size:12px;line-height:1.45;color:var(--mist-dim);}

/* ── LES ACTIONS, SOUS LE QUESTIONNAIRE ─────────────────────────────────── */
/* Elles vivaient dans la colonne de l'aperçu, donc AVANT les champs à remplir
   dès que les deux colonnes s'empilaient — c'est-à-dire sur tout téléphone. */
.g-actions{
  display:flex;flex-direction:column;gap:14px;margin-top:22px;
  padding-top:20px;border-top:var(--filet,1px) solid var(--trait);
}
.g-actions .g-telecharger{width:100%;justify-content:center;}
/* Une case qu'on ne peut pas cocher doit se voir comme telle : sans cela on
   clique, il ne se passe rien, et on cherche la panne. */
.g-envoi-choix.inactif{opacity:.55;cursor:default;}
.g-envoi-choix.inactif input{cursor:default;}

.gen-controle{
  margin:18px 0 0;padding:13px 15px;border-radius:var(--r-sm,12px);font-size:13px;line-height:1.55;
  background:rgba(255,255,255,.03);border:var(--filet,1px) solid var(--trait);
}
.gen-controle b{display:block;color:var(--encre,#eef2f8);margin-bottom:4px;}
.gen-controle p{margin:0;color:var(--mist);}
.gen-controle.incomplet{border-color:color-mix(in srgb, #e2a04c 45%, var(--trait));}
.gen-controle.complet{border-color:color-mix(in srgb, #43d17c 40%, var(--trait));}
.gen-controle-val{margin-top:6px !important;color:var(--mist-dim) !important;}

@media (max-width: 720px){
  .gen-tab-entete{display:none;}
  .gen-tab-ligne{grid-template-columns:1fr 32px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   VOTRE IDENTITÉ SUR LE DOCUMENT
   ══════════════════════════════════════════════════════════════════════════
   Logo et signature, déposés dans le navigateur. Le bloc se range entre le
   questionnaire et les actions : c'est l'ordre du geste — on décrit l'acte,
   on dit qui l'émet, on le produit.
   ══════════════════════════════════════════════════════════════════════════ */
.g-marque{
  margin-top:22px;padding-top:20px;border-top:var(--filet,1px) solid var(--trait);
  display:flex;flex-direction:column;gap:16px;
}
.gm-tete h2{margin:0 0 4px;font-size:15px;letter-spacing:-.01em;}
.gm-tete p{margin:0;font-size:12.5px;line-height:1.5;color:var(--mist-dim);}
.gm-bloc{display:flex;flex-direction:column;gap:9px;}
.gm-titre{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);}
.gm-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.gm-apercu{
  width:120px;height:64px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--trait);border-radius:var(--r-xs,8px);overflow:hidden;
  background:rgba(255,255,255,.03);
}
/* La signature est un trait sombre sur fond transparent : sur le fond sombre
   de la page, elle serait invisible. On lui donne le papier du document. */
.gm-apercu.clair{background:#f4f6fa;}
.gm-apercu img{max-width:100%;max-height:100%;object-fit:contain;}
/* 11,5 px est le plancher de lisibilité retenu pour tout Atlas — en dessous,
   le banc mobile le relève, et il a raison : cette mention est la seule chose
   que voit quelqu'un qui n'a pas encore déposé son logo. */
.gm-vide{font-size:11.5px;color:var(--mist-dim);text-align:center;}
.gm-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gm-aide{margin:0;font-size:11.5px;line-height:1.5;color:var(--mist-dim);}
.gm-dit{margin:0;font-size:12px;color:var(--mist);min-height:1em;}
.gm-dit.souci{color:var(--ambre,#e0a03a);}

.gm-manieres{display:flex;gap:6px;flex-wrap:wrap;}
.gm-maniere{
  display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;
  border-radius:var(--r-pill,99px);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--mist);background:transparent;border:var(--filet,1px) solid var(--trait);
}
.gm-maniere.actif{color:var(--encre,#eef2f8);border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);}

.gm-ecrire{display:flex;flex-direction:column;gap:10px;}
.gm-ecrire input{
  width:100%;min-height:42px;padding:9px 12px;border-radius:var(--r-sm,9px);
  border:var(--filet,1px) solid var(--trait);background:rgba(255,255,255,.04);
  color:var(--encre,#eef2f8);font-family:inherit;font-size:14px;
}
.gm-ecritures{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.gm-ecriture{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;
  border-radius:var(--r-sm,9px);border:var(--filet,1px) solid var(--trait);background:#f4f6fa;cursor:pointer;
}
.gm-ecriture.actif{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.gm-ecriture canvas{width:100%;height:auto;display:block;}
.gm-ecriture span{font-size:11.5px;color:#4a5568;font-family:inherit;}

/* Le canevas de signature porte le papier du document, pas le fond de la
   page : on signe sur ce qu'on verra imprimé. */
.gm-tracer{display:flex;flex-direction:column;gap:8px;}
.gm-tracer canvas{
  width:100%;height:auto;aspect-ratio:3/1;display:block;
  border:var(--filet,1px) solid var(--trait);border-radius:var(--r-sm,9px);background:#f4f6fa;
  touch-action:none;cursor:crosshair;
}