/* ── Le style de l'app. Pensé pour un téléphone, en premier. ───────────────
   Direction : moderne, aéré, dynamique — sur les couleurs de Klipo (encre
   profonde + menthe). Beaucoup d'air, de grands rayons, du verre dépoli, et
   des titres qui portent. Aucune ressource extérieure : les polices sont
   servies par l'app elle-même (sans Internet, tout marche pareil). */

/* ── Polices, installées dans l'app ───────────────────────────────────────
   Bricolage Grotesque pour les titres (du caractère, pas une police d'usine),
   Outfit pour le texte courant (rond, très lisible en petit). Deux fichiers
   variables : une seule requête chacun, toutes les graisses dedans.
   `unicode-range` : le fichier « latin-ext » n'est téléchargé que si un texte
   en a besoin — le français n'y touche jamais. */
@font-face{
  font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/polices/bricolage-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/polices/bricolage-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/polices/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/polices/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Les 6 polices proposées au commerçant pour ses vidéos. Elles ne servent
   qu'à l'aperçu de l'écran « Ma boutique » : un nom de police écrit dans la
   police elle-même. On ne prend que le gras latin — c'est ce qui s'affiche
   dans les vidéos — et rien ne se télécharge tant qu'on n'ouvre pas l'écran. */
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;
  src:url(/polices/apercu-archivo.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-display:swap;
  src:url(/polices/apercu-montserrat.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;
  src:url(/polices/apercu-poppins.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;
  src:url(/polices/apercu-inter.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-weight:700;font-display:swap;
  src:url(/polices/apercu-oswald.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-display:swap;
  src:url(/polices/apercu-playfair.woff2) format('woff2')}

:root{
  --fond:#0A0D13; --fond2:#0E1219;
  --carte:rgba(255,255,255,.045); --carte2:rgba(255,255,255,.075);
  --trait:rgba(255,255,255,.10);
  --texte:#F3F7FA; --gris:#93A1B5;
  --accent:#19E3B1; --accent2:#3BC9FF; --accent-sombre:#04150F;
  --rouge:#FF6B6B; --vert:#3DDC84;
  --rayon:22px; --rayon-s:16px;
  --titre:'Bricolage','Outfit',-apple-system,sans-serif;
  --ombre:0 18px 44px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* `display:flex` d'un bloc gagne sur le `hidden` du navigateur : on le rétablit */
[hidden]{display:none !important}
body{
  background:var(--fond); color:var(--texte);
  font:16px/1.55 'Outfit',-apple-system,'SF Pro Text',Segoe UI,Roboto,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* L'atmosphère : deux halos très doux, posés une fois pour toutes derrière la
   page. `fixed` = ils ne bougent pas au défilement et ne coûtent rien. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(25,227,177,.16), transparent 62%),
    radial-gradient(720px 520px at 100% 2%, rgba(59,201,255,.11), transparent 60%),
    linear-gradient(180deg, var(--fond2), var(--fond) 42%);
}

/* place laissée en bas pour la barre de navigation.
   `overflow-x:clip` : pendant le passage d'un écran à l'autre les blocs
   glissent de quelques dizaines de pixels sur le côté — sans ça, une barre de
   défilement horizontale apparaîtrait le temps de l'animation. « clip » coupe
   sans créer de zone défilante (contrairement à « hidden »). */
main{
  max-width:640px;margin:0 auto;
  overflow-x:clip;overflow-clip-margin:22px;   /* laisse respirer les ombres */
  padding:14px 18px calc(112px + env(safe-area-inset-bottom));
}

h1{
  font-family:var(--titre);font-weight:800;
  font-size:clamp(30px,8.5vw,38px);line-height:1.04;letter-spacing:-1.4px;
  margin:6px 0 8px;text-wrap:balance;
}
h2{font-family:var(--titre);font-weight:700;font-size:21px;letter-spacing:-.5px;margin:30px 0 12px}
p{margin:6px 0}
.sous{color:var(--gris);font-size:15.5px;margin:0 0 24px;max-width:34em}
strong{font-weight:600}

/* ── en-tête ──────────────────────────────────────────────────────────────
   `env(safe-area-inset-*)` = la place que le téléphone se réserve : l'encoche
   ou la pastille noire en haut. Sans ce calage, le haut de la page se retrouve
   SOUS la pastille de l'iPhone et ne se touche plus. */
header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:640px;margin:0 auto;
  padding:max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 0
          max(18px, env(safe-area-inset-left));
}
.marque{
  font-family:var(--titre);font-weight:800;font-size:20px;letter-spacing:-.6px;
  color:var(--texte);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.marque::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 14px rgba(25,227,177,.75);
}
header nav{display:flex;gap:8px;align-items:center}
.lien-discret{
  background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--gris);text-decoration:none;cursor:pointer;
}
.lien-discret:hover{color:var(--texte)}
/* « Se déconnecter » : une pastille de verre, assez large pour un doigt */
#btn-deconnexion{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  background:var(--carte);border:1px solid var(--trait);border-radius:999px;
  font-size:13.5px;color:var(--gris);
}
#btn-deconnexion:active{background:var(--carte2)}

/* ── barre de navigation du bas ───────────────────────────────────────────
   Trois destinations, toujours sous le pouce. Elle remplace les onglets du
   haut : quatre libellés côte à côte ne tenaient pas sur un iPhone. */
.nav-basse{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;gap:6px;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:rgba(10,13,19,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--trait);
}
.nav-basse a{
  flex:1;max-width:150px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 7px;border-radius:16px;
  color:var(--gris);text-decoration:none;font-size:11.5px;font-weight:500;
  transition:color .18s,background .18s;
}
.nav-basse a svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .26s cubic-bezier(.2,.85,.25,1)}
.nav-basse a.actif{color:var(--accent);background:rgba(25,227,177,.10)}
/* le pictogramme de la destination active se soulève d'un cheveu */
.nav-basse a.actif svg{transform:translateY(-2px) scale(1.08)}
.nav-basse a:active{background:var(--carte2)}

/* ── blocs ────────────────────────────────────────────────────────────────*/
.carte{
  background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:18px;margin-bottom:14px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.carte-lien{display:block;color:inherit;text-decoration:none;transition:transform .16s,background .16s}
.carte-lien:active{background:var(--carte2);transform:scale(.985)}
.ligne{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chargement{color:var(--gris);padding:44px 0;text-align:center}
.vide{
  color:var(--gris);text-align:center;padding:34px 18px;
  border:1px dashed var(--trait);border-radius:var(--rayon);
}

/* ── écrans d'entrée (connexion, code, accès suspendu) ────────────────────
   Pas d'en-tête ici : la marque est dans la page, et le bloc descend un peu
   pour ne pas coller au bord haut du téléphone. */
.portail{padding-top:9vh}
.portail .marque-grande{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:34px;
  font-family:var(--titre);font-weight:800;font-size:22px;letter-spacing:-.6px;
}
.portail .marque-grande .pastille-marque{
  width:40px;height:40px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--accent-sombre);box-shadow:0 10px 26px rgba(25,227,177,.32);
}
.portail .marque-grande svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ── la porte : premier écran à chaque ouverture de l'app ─────────────────
   Le contraire d'un tableau de bord : la marque au milieu, un seul bouton,
   rien à lire. Le bouton reste bas, sous le pouce. */
/* La barre du bas est cachée sur cet écran : les 112px qu'on lui réserve
   d'habitude tomberaient en vide sous le bouton et décentreraient tout. */
main:has(.porte){padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.porte{
  position:relative;                 /* le pied de page légal s'accroche ici */
  min-height:calc(100dvh - 56px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;
}
.porte-marque{display:flex;flex-direction:column;align-items:center;gap:18px}
.porte-pastille{
  width:88px;height:88px;border-radius:27px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--accent-sombre);box-shadow:0 22px 54px rgba(25,227,177,.30);
}
.porte-pastille svg{width:34px;height:34px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.porte-nom{
  font-family:var(--titre);font-weight:800;font-size:44px;letter-spacing:-2px;
  line-height:1;
}
.porte-bouton{max-width:340px;margin-top:30px}
/* La promesse de la marque, sous le bouton : c'est la dernière chose lue
   avant d'entrer, et la seule fois où elle est écrite. Elle était avant
   au-dessus du bouton, en deux phrases — la même promesse dite deux fois
   n'en vaut pas une. */
.porte-slogan{color:var(--gris);font-size:15px;margin:0;max-width:22em}
/* Les pages légales : obligatoires, donc accessibles — mais posées tout en
   bas, petites et grises. Elles doivent se trouver quand on les cherche, et
   ne rien voler au bouton quand on ne les cherche pas. */
.porte-legal{
  position:absolute;bottom:26px;left:0;right:0;
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:0 18px;
}
.porte-legal a{color:var(--gris);opacity:.62;font-size:12px;text-decoration:none}
.porte-legal a:hover{opacity:1;color:var(--accent)}
/* L'entrée en scène : la marque monte doucement, le bouton suit. Rien de
   spectaculaire — l'app doit paraître posée, pas bavarde. */
@media (prefers-reduced-motion:no-preference){
  .porte-marque{animation:porte-monte .5s ease both}
  .porte-bouton{animation:porte-monte .5s .08s ease both}
  .porte-slogan{animation:porte-monte .5s .16s ease both}
  .porte-legal{animation:porte-monte .5s .24s ease both}
}
@keyframes porte-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── page d'accueil ───────────────────────────────────────────────────────*/
.salut{color:var(--gris);font-size:15px;margin:0;letter-spacing:.2px}
.titre-accueil{margin-top:2px}
/* le mot « Klipo » du titre porte le dégradé de la marque */
.titre-accueil em{
  font-style:normal;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* la hauteur minimale sert au filigrane : sans elle il collerait aux cartes */
.accueil{position:relative;min-height:calc(100dvh - 300px)}
.accueil .sous{margin:0 0 26px}

/* Le nom de la marque, en très grand et en creux, posé dans le vide sous les
   cartes : il signe la page sans rien réclamer à la lecture — aucune place
   dans le flux, aucun doigt attrapé. */
.filigrane{
  position:absolute;bottom:0;left:-10px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--titre);font-weight:800;font-size:118px;line-height:.9;letter-spacing:-6px;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);
}
@media (max-width:380px){.filigrane{font-size:96px}}

/* les trois destinations, écrites comme des titres */
.destinations{display:flex;flex-direction:column;gap:10px;margin:0 0 24px;position:relative;z-index:1}
.destination{
  display:flex;align-items:center;gap:14px;
  padding:17px 18px;color:inherit;text-decoration:none;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  transition:transform .16s,border-color .16s;
}
.destination:active{transform:scale(.985);border-color:rgba(25,227,177,.35)}
.destination .texte{flex:1;min-width:0}
.destination-titre{
  display:block;font-family:var(--titre);font-weight:700;
  font-size:22px;line-height:1.15;letter-spacing:-.7px;
}
/* la pastille d'icône en tête de carte */
.destination .rond{
  width:46px;height:46px;flex:0 0 46px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--carte2);border:1px solid var(--trait);color:var(--accent);
}
.destination .rond svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* la première destination est ce qu'on vient faire ici : elle porte la couleur */
.destination.phare{
  background:linear-gradient(135deg,rgba(25,227,177,.18),rgba(59,201,255,.10));
  border-color:rgba(25,227,177,.34);
  box-shadow:0 16px 40px rgba(25,227,177,.10);
}
.destination.phare .destination-titre{font-size:24px}
.destination.phare .rond{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;color:var(--accent-sombre);
  box-shadow:0 8px 22px rgba(25,227,177,.32);
}
.destination.phare .rond svg{stroke-width:2.3}
.destination.phare .fleche{border-color:rgba(25,227,177,.3)}
.destination-sous{display:block;color:var(--gris);font-size:13.5px;margin-top:2px}
.destination .fleche{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--carte2);border:1px solid var(--trait);color:var(--accent);
}
.destination .fleche svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* compteur de montages du jour */
.jauge-carte .aide{margin:12px 0 0}
.compteur{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.jauge{height:9px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-top:14px}
.jauge span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .35s ease;
}

/* ── un lien écrit DANS une phrase ────────────────────────────────────────*/
/* C'était un trou : jusqu'ici tous les liens de l'app étaient des boutons, des
   onglets ou des cartes, donc tous portaient une classe. Le premier lien posé
   au milieu d'un texte est ressorti en BLEU SOULIGNÉ de navigateur, hors
   charte. On habille donc les liens sans classe — et seulement ceux-là, pour
   ne rien voler aux boutons. Un lien doit se voir, pas crier. */
main a:not([class]){
  color:var(--accent);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(25,227,177,.42);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
}
main a:not([class]):hover{text-decoration-color:var(--accent)}

/* ── boutons ──────────────────────────────────────────────────────────────*/
button,.bouton{
  font:inherit;font-weight:600;cursor:pointer;letter-spacing:-.1px;
  border-radius:var(--rayon-s);border:1px solid transparent;padding:16px 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:transform .14s,opacity .14s;
}
button:active,.bouton:active{transform:scale(.98)}
.principal{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--accent-sombre);width:100%;
  box-shadow:0 14px 32px rgba(25,227,177,.22);
}
/* Un bouton bloqué doit SE VOIR bloqué. Attention : l'opacité ne suffit pas —
   les écrans arrivent avec l'animation `venir` en `both`, qui fige `opacity:1`
   sur les enfants directs de `main`, et une animation gagne sur une règle
   normale. Le bouton principal désactivé garde donc son dégradé et paraît
   cliquable. On change donc ce que l'animation ne touche pas : le fond et la
   couleur du texte. */
.principal:disabled{
  opacity:.4;cursor:not-allowed;box-shadow:none;
  background:var(--carte2);color:var(--gris);border-color:var(--trait);
}
.secondaire{
  background:var(--carte);color:var(--texte);border-color:var(--trait);width:100%;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.danger{background:none;color:var(--rouge);border-color:transparent;padding:10px 0}

/* ── le bloc d'aide, tout en bas de l'accueil ─────────────────────────────*/
/* Il est volontairement discret et volontairement TOUJOURS là : un commerçant
   bloqué ne doit pas avoir à chercher comment joindre quelqu'un. WhatsApp
   d'abord — il écrit un message, il n'ouvre pas sa boîte mail. */
.aide-bas{
  margin:34px 0 8px;padding-top:22px;
  border-top:1px solid var(--trait);
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
}
.aide-titre{
  margin:0;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gris);
}
.aide-liens{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
/* le bouton WhatsApp ne prend pas toute la largeur : ce n'est pas l'action
   principale de l'écran, et il ne doit pas concurrencer « Nouvelle publication » */
.aide-liens .bouton{width:auto;padding:12px 18px;font-size:14.5px}
.mini{padding:10px 14px;font-size:14px;border-radius:12px;width:auto;box-shadow:none}

/* ── formulaires ──────────────────────────────────────────────────────────*/
/* Un libellé n'est pas une étiquette discrète : c'est LA QUESTION à laquelle le
   champ répond, écrite en gros. Bilal, en testant le parcours : « au lieu de
   mettre une petite phrase en gris qui ne sert à rien, mets QUEL EST TON
   PRODUIT en gros, c'est clair, visible, et ça va droit au but ». */
label{display:block;font-size:19px;color:var(--texte);margin:26px 0 10px;
      font-weight:700;letter-spacing:-.2px;line-height:1.25}
/* « facultatif » ne se met pas entre parenthèses dans la question : il se dit à
   côté, en petit, pour que la question reste lisible d'un coup d'œil. */
.facultatif{font-size:12px;font-weight:600;color:var(--gris);letter-spacing:.4px;
  text-transform:uppercase;vertical-align:middle;margin-left:8px}
input,select,textarea{
  font:inherit;width:100%;padding:15px 16px;color:var(--texte);
  background:rgba(255,255,255,.05);border:1px solid var(--trait);border-radius:var(--rayon-s);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
input::placeholder,textarea::placeholder{color:#6C7A8D}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(25,227,177,.65);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(25,227,177,.13);
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),
                   linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
input[type=color]{padding:5px;height:54px;cursor:pointer}
/* champ avec une icône à gauche (connexion, code) */
.champ{position:relative}
.champ svg{
  position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:var(--gris);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.champ input{padding-left:48px}
.champ input:focus + svg{stroke:var(--accent)}
/* le code à 6 chiffres : gros, espacé, lisible sans lunettes */
input.code{
  font-family:var(--titre);font-size:32px;font-weight:700;letter-spacing:12px;
  text-align:center;font-variant-numeric:tabular-nums;padding:16px 0 16px 12px;
}
.aide{font-size:13px;color:var(--gris);margin-top:8px;line-height:1.5}
form .principal{margin-top:26px}

/* ── les points d'un carrousel : autant de blocs que le commerçant en veut ─*/
.point-bloc{
  border:1px solid var(--trait);border-radius:var(--rayon-s);
  padding:14px;margin-top:12px;background:rgba(255,255,255,.025);
}
.point-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.point-tete .numero{font-size:13.5px;font-weight:600;color:var(--gris)}
.point-bloc .retirer{
  width:auto;padding:6px 12px;font-size:13px;border-radius:999px;box-shadow:none;
  background:none;border:1px solid var(--trait);color:var(--gris);
}
.point-bloc .retirer:active{background:var(--carte2)}
.point-bloc textarea{margin-top:8px}
/* le bouton « ajouter » n'est pas une action principale : il reste discret */
#ajouter-point{width:auto}

/* ── choix de la police, avec aperçu ──────────────────────────────────────*/
.polices{display:grid;gap:10px;margin-top:10px}
.police{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:16px 18px;text-align:left;box-shadow:none;
  background:rgba(255,255,255,.05);border:1px solid var(--trait);
  border-radius:var(--rayon-s);color:var(--texte);
  transition:border-color .16s,background .16s,transform .16s;
}
.police:active{transform:scale(.99)}
.police .nom{font-size:23px;font-weight:700;line-height:1.15}
.police .coche{color:var(--accent);font-weight:700;opacity:0}
.police.choisie{border-color:rgba(25,227,177,.65);background:rgba(25,227,177,.09)}
.police.choisie .coche{opacity:1}

/* ── choix du style, avec un vrai montage en aperçu ───────────────────────*/
/* Trois vignettes côte à côte, jamais empilées : c'est une comparaison, on
   doit voir les trois d'un seul coup d'œil sans faire défiler. */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.style-vignette{
  display:block;width:100%;padding:0;text-align:center;box-shadow:none;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid var(--trait);
  border-radius:var(--rayon-s);color:var(--texte);
  transition:border-color .16s,background .16s,transform .16s;
}
.style-vignette:active{transform:scale(.98)}
/* l'image garde sa place AVANT d'être chargée : rien ne saute sous le doigt */
.style-vignette .style-image{display:block;aspect-ratio:9/16;background:var(--fond2)}
.styles.carre .style-vignette .style-image{aspect-ratio:1/1}
.style-vignette .style-image img{width:100%;height:100%;object-fit:cover;display:block}
/* aperçu introuvable : le cadre reste, la vignette continue de servir */
.style-vignette .style-image.vide{background:repeating-linear-gradient(
  45deg,var(--fond2),var(--fond2) 8px,rgba(255,255,255,.03) 8px,rgba(255,255,255,.03) 16px)}
.style-vignette .nom{display:block;padding:9px 4px;font-size:13.5px;font-weight:700;line-height:1.2}
.style-vignette.choisie{border-color:rgba(25,227,177,.65);background:rgba(25,227,177,.09)}
.style-vignette.choisie .nom{color:var(--accent)}

/* ── signature de fin : le logo déposé ────────────────────────────────────*/
/* un titre de section dans un formulaire : marge du haut plus généreuse que
   celle d'un simple label, pour qu'on voie qu'on change de sujet */
.titre-section{margin:36px 0 6px}
.logo-zone{display:flex;align-items:center;gap:14px;margin-top:10px}
.logo-vue{
  flex:0 0 108px;height:88px;display:flex;align-items:center;justify-content:center;
  padding:10px;border:1px solid var(--trait);border-radius:var(--rayon-s);
  background:var(--carte2);overflow:hidden;text-align:center;
}
.logo-vue img{max-width:100%;max-height:100%;object-fit:contain}
.logo-vue .aide{margin:0;font-size:12.5px;line-height:1.25}
.logo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.logo-actions .danger{padding:6px 0}

/* la publication commencée qu'on retrouve en revenant */
.carte.reprise{border-color:rgba(25,227,177,.4);background:rgba(25,227,177,.06)}
.centre{text-align:center}

/* ── le parcours guidé : une question par écran ───────────────────────────*/
/* En haut de chaque étape : par où sortir (à gauche), et où on en est (à
   droite). Toujours au même endroit, pour qu'on n'ait pas à le chercher. */
.parcours-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.retour{
  background:none;border:0;box-shadow:none;width:auto;
  padding:8px 10px 8px 0;                      /* la zone du doigt, sans décaler le texte */
  font-size:15px;font-weight:600;color:var(--gris);gap:5px;
}
.retour:hover{color:var(--texte)}
.parcours-compte{font-size:13px;color:var(--gris);font-variant-numeric:tabular-nums}
/* la barre qui se remplit : on voit qu'il reste peu, on ne s'arrête pas en route */
.parcours-jauge{height:4px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:0 0 22px}
.parcours-jauge span{display:block;height:100%;transition:width .28s ease;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* Les grands boutons de choix : un par ligne, gros, avec l'image de ce que ça
   donne. Toucher choisit ET avance — il n'y a pas de bouton à valider. */
.grands-choix{display:grid;gap:12px;margin-top:4px}
.grand-choix{
  display:flex;align-items:center;gap:14px;width:100%;padding:12px;
  text-align:left;justify-content:flex-start;box-shadow:none;
  background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);color:var(--texte);
  transition:border-color .16s,background .16s,transform .14s;
}
.grand-choix:active{transform:scale(.985);background:var(--carte2)}
.grand-choix.choisi{border-color:rgba(25,227,177,.55);background:rgba(25,227,177,.07)}
/* l'aperçu garde sa place avant d'être chargé : rien ne saute sous le doigt */
.choix-image{flex:0 0 72px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:var(--fond2);display:block}
.choix-image.carre{aspect-ratio:1/1}
.choix-image img{width:100%;height:100%;object-fit:cover;display:block}
.choix-image.vide{background:repeating-linear-gradient(
  45deg,var(--fond2),var(--fond2) 8px,rgba(255,255,255,.03) 8px,rgba(255,255,255,.03) 16px)}
.choix-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.choix-titre{font-family:var(--titre);font-weight:700;font-size:17px;letter-spacing:-.3px}
.choix-aide{font-size:13.5px;line-height:1.35;color:var(--gris)}
.grand-choix .fleche{flex:0 0 auto;display:flex;color:var(--gris)}
/* sans aperçu (la musique), le bouton respire à la place de l'image */
.grands-choix.simples .grand-choix{padding:17px 15px}

/* ── le mur d'avis ────────────────────────────────────────────────────────*/
/* Sur l'accueil, les bulles occupent le vide sous les trois destinations. C'est
   ce vide que remplissait le filigrane : quand le mur est là, il s'efface —
   deux décors superposés ne feraient qu'un fouillis. */
.accueil.avec-mur{min-height:0}
.accueil.avec-mur .filigrane{display:none}

.mur{margin:30px 0 8px}
.mur-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.mur-tete h2{
  margin:0;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gris);font-family:inherit;
}
.bulles{display:flex;flex-direction:column;gap:12px}

/* Une bulle de parole : le coin bas décroché du côté de son auteur, comme une
   bulle de bande dessinée. Elle n'est pas cliquable — rien à attraper, aucun
   doigt détourné des trois vrais boutons de l'accueil. */
.bulle{
  position:relative;padding:15px 17px 13px;
  background:var(--carte);border:1px solid var(--trait);
  border-radius:20px 20px 20px 6px;
  backdrop-filter:blur(8px);
}
/* une bulle sur deux part de la droite : le mur respire, il ne fait pas colonne */
.bulle:nth-child(even){
  border-radius:20px 20px 6px 20px;margin-left:26px;
  background:linear-gradient(135deg,rgba(25,227,177,.10),rgba(59,201,255,.05));
  border-color:rgba(25,227,177,.22);
}
.bulle:nth-child(odd){margin-right:26px}
.bulle-texte{margin:0;font-size:15px;line-height:1.5}
.bulle-texte::before{content:'\201C'}
.bulle-texte::after{content:'\201D'}
.bulle-pied{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.bulle-qui{font-size:12.5px;color:var(--gris);font-weight:600}
/* l'initiale du commerce, en pastille : un visage sans photo à réclamer */
.pastille-avis{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--accent-sombre);
  background:linear-gradient(135deg,var(--accent),var(--accent2));text-transform:uppercase;
}
/* « toi » : la bulle est bien la sienne. Discret — c'est une précision, pas une
   décoration, et le mur doit rester celui des commerçants, pas le sien. */
.bulle-toi{
  font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;color:var(--accent);
  background:rgba(25,227,177,.12);border:1px solid rgba(25,227,177,.28);
}
.etoiles{margin-left:auto;font-size:12.5px;color:var(--accent);letter-spacing:1px;white-space:nowrap}
.etoiles .creuses{color:rgba(255,255,255,.16)}

/* Le flottement : quelques pixels, très lentement. Chaque bulle a son propre
   retard et sa propre durée (donnés par l'app) pour qu'elles ne montent pas
   toutes en même temps, ce qui ferait « bloc qui tremble » au lieu de bulles. */
@media (prefers-reduced-motion:no-preference){
  .bulle{animation:flotter var(--duree,6s) ease-in-out var(--retard,0s) infinite}
}
@keyframes flotter{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* l'invitation à écrire le premier avis : discrète, et honnête — on ne meuble
   jamais le mur avec de faux témoignages en attendant les vrais */
.invite-avis{margin-top:26px}
.invite-avis strong{display:block;margin-bottom:4px}
.invite-avis .aide{margin:0}

/* l'écran des avis : la liste en pleine largeur, lisible d'un bout à l'autre */
.avis-liste{display:flex;flex-direction:column;gap:12px}
.avis-carte{margin:0}
.avis-texte{margin:0;font-size:15px;line-height:1.55}
.avis-texte::before{content:'\201C'}
.avis-texte::after{content:'\201D'}
.etat-en-ligne{color:var(--vert)}

/* les cinq étoiles à toucher : assez grandes pour un pouce, sans cadre */
.notes{display:flex;gap:6px;margin-top:8px}
.note-etoile{
  width:auto;padding:6px 8px;font-size:27px;line-height:1;
  background:none;border:none;box-shadow:none;color:rgba(255,255,255,.18);
}
.note-etoile.pleine{color:var(--accent)}

/* ── étiquettes d'état ────────────────────────────────────────────────────*/
.etat{
  font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  white-space:nowrap;border:1px solid transparent;
}
.etat-brouillon{background:rgba(255,255,255,.07);color:#C3CAD6;border-color:var(--trait)}
.etat-attente{background:rgba(232,212,122,.12);color:#E8D47A;border-color:rgba(232,212,122,.26)}
.etat-montage{background:rgba(126,194,255,.13);color:#7EC2FF;border-color:rgba(126,194,255,.28)}
.etat-prete{background:rgba(61,220,132,.13);color:var(--vert);border-color:rgba(61,220,132,.3)}
.etat-echec{background:rgba(255,107,107,.13);color:var(--rouge);border-color:rgba(255,107,107,.3)}

/* ── emplacements de plans ────────────────────────────────────────────────*/
.plans{display:grid;gap:12px}
.plan{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;
}
.plan.rempli{border-color:rgba(25,227,177,.34);background:rgba(25,227,177,.06)}
.pastille{
  width:46px;height:46px;flex:0 0 46px;border-radius:15px;
  background:rgba(255,255,255,.06);color:var(--gris);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:700;font-size:17px;
}
.plan.rempli .pastille{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-sombre);
}
.plan .infos{flex:1;min-width:0}
.plan .titre{font-weight:600}
.plan .detail{font-size:13px;color:var(--gris)}
/* ce qu'on lui propose de filmer pour ce plan */
.plan .consigne{font-size:14px;color:var(--texte);opacity:.9;margin:2px 0 4px}
.plan input[type=file]{display:none}
/* Le geste qu'on veut : la pellicule, en grand, sur toute la largeur. Filmer
   depuis la page donne du 480p refusé — ce bouton-là n'existe donc plus. */
.plan .pellicule{flex:0 0 100%;margin-top:2px}
/* ce qu'on a remarqué sur le plan : un avertissement, jamais un refus.
   Toute la largeur, sous la ligne du plan : la phrase doit se lire d'un trait. */
.plan .remarque{
  flex:0 0 100%;padding:9px 11px;border-radius:12px;
  background:rgba(232,212,122,.10);border:1px solid rgba(232,212,122,.26);
  color:#E8D47A;font-size:13.5px;line-height:1.35;
}
.plan .remarque::before{content:'⚠︎ '}
/* supprimer n'est pas une étape du parcours : tout en bas, discret, centré */
.discret{text-align:center;margin:24px 0 4px}
.discret .lien-discret{padding:10px 8px}
.barre{height:5px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:9px}
.barre span{display:block;height:100%;width:0;transition:width .2s;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ── vidéo finie ──────────────────────────────────────────────────────────*/
video{width:100%;border-radius:var(--rayon);background:#000;display:block;border:1px solid var(--trait)}

/* carrousel fini : les images à enregistrer, dans l'ordre */
.diapos{display:flex;flex-direction:column;gap:14px}
.diapo{
  margin:0;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);overflow:hidden;
}
.diapo img{width:100%;display:block;background:#000}
.diapo figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.diapo figcaption span{color:var(--gris);font-size:14px}

/* ── message flottant ─────────────────────────────────────────────────────*/
#alerte{
  position:fixed;left:16px;right:16px;z-index:50;
  bottom:calc(96px + env(safe-area-inset-bottom));
  max-width:608px;margin:0 auto;
  background:rgba(22,27,36,.92);border:1px solid var(--trait);border-radius:18px;
  padding:15px 17px;box-shadow:var(--ombre);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s,visibility 0s .28s;
}
#alerte.visible{transform:translateY(0);opacity:1;visibility:visible;transition-delay:0s}
#alerte.erreur{border-color:rgba(255,107,107,.4);background:rgba(46,24,24,.94)}

/* ── mise en scène à l'arrivée ────────────────────────────────────────────
   Les blocs montent l'un après l'autre. Très court : on veut de la vie, pas
   une attente. Coupé net si le téléphone demande moins d'animations. */
@keyframes venir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
main > *{animation:venir .42s cubic-bezier(.2,.8,.2,1) both}
main > *:nth-child(2){animation-delay:.05s}
main > *:nth-child(3){animation-delay:.10s}
main > *:nth-child(4){animation-delay:.14s}
main > *:nth-child(5){animation-delay:.18s}
main > *:nth-child(n+6){animation-delay:.22s}
.accueil > *,.portail > *{animation:venir .42s cubic-bezier(.2,.8,.2,1) both}
.accueil > *:nth-child(2),.portail > *:nth-child(2){animation-delay:.06s}
.accueil > *:nth-child(3),.portail > *:nth-child(3){animation-delay:.12s}
.accueil > *:nth-child(4),.portail > *:nth-child(4){animation-delay:.18s}
.accueil > *:nth-child(5),.portail > *:nth-child(5){animation-delay:.24s}
.accueil > *:nth-child(n+6),.portail > *:nth-child(n+6){animation-delay:.3s}
/* la marque des écrans d'entrée arrive la première, sans attendre */
.portail .marque-grande{animation-delay:0s !important}

/* ── passage d'un écran à l'autre ─────────────────────────────────────────
   Le nouvel écran entre du côté d'où il vient, l'ancien s'en va de l'autre.
   Les deux se croisent : c'est ça qui donne le mouvement.
   Seul le NOM de l'animation change ici. L'ancien écran doit s'effacer VITE
   (opacité à zéro à mi-parcours) : sinon les deux textes se superposent au
   milieu du passage et c'est illisible. */
@keyframes venir-droite{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes venir-gauche{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes partir-gauche{0%{opacity:1;transform:none}55%{opacity:0}100%{opacity:0;transform:translateX(-26px)}}
@keyframes partir-droite{0%{opacity:1;transform:none}55%{opacity:0}100%{opacity:0;transform:translateX(26px)}}
.vient-avant > *,
.vient-avant > .accueil > *,.vient-avant > .portail > *{animation-name:venir-droite}
.vient-arriere > *,
.vient-arriere > .accueil > *,.vient-arriere > .portail > *{animation-name:venir-gauche}

/* Sur un changement d'écran, le contenu arrive d'un seul bloc : la cascade
   bloc par bloc est réservée au tout premier affichage, sinon le nouvel écran
   met 300 ms de plus à se poser et croise l'ancien trop longtemps.
   `:nth-child(n)` sert uniquement à passer devant les retards posés plus haut. */
main.vient-avant > *:nth-child(n),main.vient-arriere > *:nth-child(n),
main.vient-avant > .accueil > *:nth-child(n),main.vient-arriere > .accueil > *:nth-child(n),
main.vient-avant > .portail > *:nth-child(n),main.vient-arriere > .portail > *:nth-child(n){
  animation-delay:0s;animation-duration:.3s;
}

/* La photocopie de l'écran qu'on quitte. Elle ne gêne personne : pas de clic
   possible, posée sous la barre du bas, retirée dès qu'elle a fini. */
.fantome{
  position:fixed;left:0;right:0;z-index:5;pointer-events:none;
  will-change:transform,opacity;
}
/* courbe à démarrage rapide : l'ancien écran doit disparaître tout de suite,
   pas s'attarder derrière le nouveau */
.fantome.part-avant{animation:partir-gauche .22s cubic-bezier(.25,.9,.35,1) both}
.fantome.part-arriere{animation:partir-droite .22s cubic-bezier(.25,.9,.35,1) both}
/* ses blocs ne rejouent pas leur arrivée : elle est en train de partir */
.fantome > *,.fantome > * > *{animation:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}