/* ==========================================================================
   Générateur de cartes — mise en forme propre à la page.

   Elle vient APRÈS site.css et n'en redéfinit rien : les couleurs, l'en-tête,
   le pied et le bouton principal restent ceux du site. Ici il n'y a que ce que
   site.css ne connaît pas : l'atelier, le châssis de l'aperçu, et le
   formulaire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Les trois promesses
   -------------------------------------------------------------------------- */
.promesses{
  list-style:none;padding:0;margin:22px 0 30px;
  display:grid;gap:9px;
}
.promesses li{
  position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;
  color:var(--doux);
}
.promesses li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--vert-clair);
  border:2px solid var(--vert);
}
.promesses strong{color:var(--texte)}

/* --------------------------------------------------------------------------
   L'ATELIER — formulaire à gauche, aperçu à droite

   Une seule colonne jusqu'à 900 px, et l'APERÇU PASSE EN PREMIER sur
   téléphone (order:-1). Raison : sur un écran étroit, un aperçu placé sous six
   champs se trouve à un écran et demi de la frappe — le commerçant ne le voit
   jamais bouger, et l'argument principal de la page disparaît.
   -------------------------------------------------------------------------- */
.atelier{
  display:grid;grid-template-columns:1fr;gap:26px;
  align-items:start;margin-bottom:44px;
}
@media(min-width:900px){
  .atelier{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:38px}
  .cote-apercu{position:sticky;top:92px}   /* 78px de barre + une respiration */
}
@media(max-width:899px){
  /* Le renversement annonce plus haut. Sur telephone, l'apercu passe AVANT le
     formulaire : sinon il se trouve a un ecran et demi sous la frappe et le
     commercant ne le voit jamais reagir. */
  .cote-apercu{order:-1}
}

/* --------------------------------------------------------------------------
   Le formulaire
   -------------------------------------------------------------------------- */
.formulaire{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:24px 22px 26px;box-shadow:var(--ombre-douce);
}
.formulaire h2{font-size:19px;margin:0 0 4px}
.cote-apercu .titre-apercu{font-size:19px;margin:0 0 14px}

.formulaire label{
  display:block;margin-top:17px;font-size:14px;font-weight:700;color:var(--texte);
}

.formulaire input[type=text],
.formulaire input[type=tel],
.formulaire input[type=email]{
  display:block;width:100%;margin-top:6px;
  /* 16px minimum : en dessous, Safari sur iPhone ZOOME automatiquement sur le
     champ actif et le commerçant se retrouve avec une page décalée qu'il doit
     repincer. Ce n'est pas un choix esthétique. */
  font:inherit;font-size:16px;font-weight:400;
  min-height:52px;padding:13px 14px;
  color:var(--texte);background:var(--fond);
  border:1.5px solid var(--trait);border-radius:10px;
}
.formulaire input:focus{
  outline:none;border-color:var(--vert);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vert) 22%,transparent);
}
.formulaire input::placeholder{color:var(--pale);opacity:.75}

.formulaire input[type=color]{
  display:block;width:100%;margin-top:6px;height:56px;padding:5px;
  background:var(--fond);border:1.5px solid var(--trait);border-radius:10px;
  cursor:pointer;
}

.formulaire small{
  display:block;margin-top:6px;font-size:12.5px;font-weight:400;
  line-height:1.45;color:var(--doux);
}

.formulaire .bouton{width:100%;margin-top:24px;min-height:56px;font-size:16.5px}

/* .piege et .oblig ne sont PAS redefinis ici : site.css les porte deja, a
   l'identique (lignes 912 et 931). Les recopier aurait cree deux verites pour
   la meme regle, et c'est ainsi qu'elles finissent par diverger. */

.etat{margin:12px 0 0;font-size:14px;font-weight:700;min-height:20px;line-height:1.45}
.etat.ok{color:var(--vert)}
.etat.ko{color:var(--rouge)}

.lien-magique{
  display:inline-block;margin-left:2px;padding:8px 2px;min-height:44px;
  background:none;border:none;font:inherit;font-weight:700;cursor:pointer;
  color:var(--vert);text-decoration:underline;text-underline-offset:3px;
}

.finement{
  margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--doux);
}
.finement a{color:var(--doux);text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   LE CHÂSSIS DE L'APERÇU

   Volontairement sombre dans les DEUX thèmes du site, comme le châssis de
   téléphone de la page d'accueil : la carte produite est sombre, et l'aperçu
   doit montrer la carte, pas le thème de la page qui l'entoure.
   -------------------------------------------------------------------------- */
/* NOMS PREFIXES, ET C'EST UNE CORRECTION.
   La premiere version appelait ce bloc `.ecran`. Or site.css definit deja un
   `.ecran` — le cadre du diaporama de la page d'accueil — avec
   `aspect-ratio:16/10` et `overflow:hidden`. L'apercu heritait donc d'une
   hauteur fixe : ses 370 px de contenu etaient rognes a 203, et la moitie
   basse de la carte disparaissait. Sans erreur, sans avertissement.
   Toute classe posee sur une page qui charge site.css doit etre prefixee. */
.apercu-chassis{
  background:var(--chassis);border-radius:26px;padding:11px;
  box-shadow:var(--ombre-forte);
}
.apercu-ecran{
  --marque:#C2410C;--sur-marque:#FFFFFF;
  background:#06080D;border-radius:18px;padding:13px 12px 15px;
  color:#FAF8F5;
}

.ap-bandeau{
  background:var(--marque);color:var(--sur-marque);
  border-radius:14px;padding:17px 13px 15px;text-align:center;
}
.ap-jeton{
  width:48px;height:48px;margin:0 auto 9px;border-radius:14px;
  background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;letter-spacing:.5px;
}
.ap-commerce{font-size:16px;font-weight:800;line-height:1.2;margin:0;
  overflow-wrap:break-word}
.ap-contact{font-size:12.5px;font-weight:700;margin:5px 0 0}
.ap-titre{font-size:11px;font-weight:600;margin:2px 0 0;opacity:.87}

.ap-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.ap-tuile{
  background:#0E121C;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  min-height:38px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#94A3B8;
}

.ap-principal{
  margin-top:7px;min-height:40px;border-radius:11px;
  background:var(--marque);color:var(--sur-marque);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;text-align:center;padding:9px;
}

/* Les trois boutons de l'apercu. En contour, comme sur la vraie carte : le
   plein est reserve au bouton « Enregistrer dans mes Contacts ». */
.ap-actions{display:grid;gap:5px;margin-top:6px}
.ap-actions:empty{display:none}
.ap-action{min-height:30px;display:flex;align-items:center;padding:7px 10px;
  border-radius:9px;background:#0E121C;border:1px solid var(--marque);
  font-size:10px;font-weight:700;color:#E8EAF0}
.ap-action[hidden]{display:none}
.ap-tuile[hidden]{display:none}

.ap-bloc{
  margin-top:9px;background:#0E121C;border:1px solid rgba(255,255,255,.08);
  border-radius:13px;padding:11px 12px;
}
.ap-ligne{display:flex;flex-direction:column;gap:2px;margin:0;padding:6px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.ap-ligne:first-child{border-top:none;padding-top:0}
.ap-ligne[hidden]{display:none}
.ap-etiq{font-size:8.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#94A3B8}
.ap-ligne span:last-child{font-size:12px;font-weight:700;overflow-wrap:anywhere}

.ap-pied{
  margin:12px 0 0;text-align:center;font-size:9.5px;color:#94A3B8;line-height:1.5;
}

.note-apercu{
  margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--doux);
}

/* --------------------------------------------------------------------------
   Ce qui vient après
   -------------------------------------------------------------------------- */
.apres{margin:0 0 34px}
.apres h2{font-size:22px;margin:0 0 16px}
.apres-grille{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.apres-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.apres-grille>div{
  background:var(--fond-alt);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:17px 16px;
}
.apres-grille h3{font-size:15.5px;margin:0 0 6px}
.apres-grille p{font-size:13.5px;line-height:1.55;color:var(--doux);margin:0}
.apres-grille code{
  font-size:12.5px;background:var(--carte);border:1px solid var(--trait);
  border-radius:5px;padding:1px 5px;overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Le dépliant « pourquoi c'est gratuit »

   Classe `depliant` et NON `rev` : `.rev` part à opacity:0 et n'est révélé que
   par js/page.js, qui ne tourne que sur la page d'accueil. Sur cette page-ci,
   qui charge js/pages.js, un `.rev` resterait invisible pour toujours — sans
   la moindre erreur en console.
   -------------------------------------------------------------------------- */
.depliant{
  background:var(--fond-alt);border:1px solid var(--trait);
  border-radius:var(--rayon);margin-bottom:34px;
}
.depliant>summary{
  cursor:pointer;list-style:none;padding:16px 18px;min-height:52px;
  display:flex;align-items:center;gap:10px;
  font-size:15.5px;font-weight:700;color:var(--texte);
}
.depliant>summary::-webkit-details-marker{display:none}
.depliant>summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--doux);border-bottom:2px solid var(--doux);
  transform:rotate(45deg);transition:transform .2s ease;
}
.depliant[open]>summary::after{transform:rotate(-135deg)}
.depliant>summary:focus-visible{outline:2px solid var(--vert);outline-offset:-2px}
.rev-corps{padding:0 18px 18px}
.rev-corps p{font-size:14px;line-height:1.6;color:var(--doux);margin:0 0 11px}
.rev-corps p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Le dépliant qui contient des CHAMPS, et non du texte.

   `.depliant` a été écrit pour la section « pourquoi c'est gratuit » : son
   corps est de la prose. Ici il enferme trois champs de saisie, qui ont
   besoin de leurs propres marges — sans quoi le premier `label` colle au
   résumé et le dernier champ déborde du cadre.
   -------------------------------------------------------------------------- */
.depliant-champs{margin:17px 0 0}
.depliant-champs>summary{font-size:14.5px;padding:15px 16px;min-height:50px}
.depliant-champs .rev-corps{padding:0 16px 16px}
.depliant-champs label:first-of-type{margin-top:6px}
.depliant-champs .finement{margin:0 0 4px}
.depliant-champs code{
  font-size:12px;background:var(--carte);border:1px solid var(--trait);
  border-radius:4px;padding:1px 5px;
}

/* --------------------------------------------------------------------------
   Palettes métiers et sélection de couleur
   -------------------------------------------------------------------------- */
.groupe-couleur{margin-top:17px}
.palettes-metiers{
  display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px;
}
.pastille{
  width:36px;height:36px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  box-shadow:0 2px 5px rgba(0,0,0,.15);flex-shrink:0;
}
.pastille:hover{transform:scale(1.12)}
.pastille.active{
  border-color:#FFFFFF;box-shadow:0 0 0 3px var(--vert),0 2px 8px rgba(0,0,0,.3);
  transform:scale(1.08);
}
.pastille:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

.ligne-couleur-perso{
  display:flex;align-items:center;gap:12px;margin-top:6px;
}
.ligne-couleur-perso input[type=color]{
  width:46px;height:38px;padding:2px;margin:0;
}
.texte-couleur-perso{font-size:13px;color:var(--doux)}

/* --------------------------------------------------------------------------
   Vitrine des modules Pro (Pass Fidélité, IA, Fond d'écran)
   -------------------------------------------------------------------------- */
.apres-pro{
  margin-top:28px;padding:24px 20px 26px;background:var(--fond-alt);
  border:1.5px solid var(--vert);border-radius:var(--rayon);
}
.apres-pro h3{font-size:17px;margin:0 0 16px;color:var(--texte)}
.pro-grille{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width:700px){
  .pro-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pro-carte{
  background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  padding:16px 15px;display:flex;flex-direction:column;gap:6px;
}
.pro-icone{font-size:24px;margin-bottom:2px}
.pro-carte h4{font-size:14.5px;font-weight:700;margin:0;color:var(--texte)}
.pro-carte p{font-size:12.5px;line-height:1.45;color:var(--doux);margin:0}