/* ============================================================
   Cinq sur Cinq : Tableau de bord client
   Repris de dash.reviewharvest.com/business/dashboard :
   fond #f9fafb, cartes blanches 10px bordees #d1d6d1, barre laterale de
   288 px, elements de menu de 36 px, tuiles de stats #edf1ed, Inter.
   Feuille distincte du site vitrine : ce n'est pas la meme interface.
   ============================================================ */

:root{
  --page:#f9fafb;
  --carte:#fff;
  --bord:#d1d6d1;
  --encre:#09090b;
  --gris:#505851;
  --gris-2:#6b7280;
  --vert:#01b859;
  --vert-actif:#e0f0e3;
  --vert-pale:#edf1ee;
  --tuile:#edf1ed;
  --or:#fdc700;
  --r:10px;
  --r-sm:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* hidden doit gagner contre les display:flex/grid poses plus bas */
[hidden]{display:none !important}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--page);color:var(--encre);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{flex:0 0 auto}

/* ---------- ossature ---------- */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.side{
  width:288px;flex:0 0 288px;padding:16px 12px;
  display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100%;overflow-y:auto
}
.main{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:16px 24px 20px 12px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
@media(max-width:1200px){.cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- barre laterale ---------- */
.switch{
  display:flex;align-items:center;gap:10px;width:100%;height:56px;
  border-radius:var(--r-sm);padding:8px;text-align:left
}
.switch:hover{background:var(--vert-pale)}
.av{
  width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-sm);
  background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600
}
.av.gris{background:#e5e7eb;color:var(--gris)}
.switch-t{min-width:0;flex:1}
.switch-t b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch-t span{display:block;font-size:12px;color:var(--gris-2)}
.chev{width:14px;height:14px;color:var(--gris-2)}

/* Notifications est un encadre a part, avec la cloche dans sa pastille :
   c'est ce qui la distingue des liens de navigation en dessous. */
.notif{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;
  border:1px solid rgba(0,35,21,.10);border-radius:var(--r-sm);
  background:rgba(237,241,238,.55);margin:2px 0 6px;
  font-size:14px;font-weight:500;color:var(--gris)
}
.notif:hover{background:var(--vert-pale);border-color:var(--bord)}
.notif-ic{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 32px;border-radius:6px;
  background:var(--tuile);color:var(--gris)
}
.notif-ic svg{width:16px;height:16px}

.side-trait{border:0;border-top:1px solid var(--bord);margin:8px 4px}

.snav{display:flex;flex-direction:column;gap:2px}
.snav a{
  display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;
  border-radius:var(--r-sm);font-size:14px;color:var(--encre)
}
.snav a:hover{background:var(--vert-pale)}
.snav a.on{background:var(--vert-actif);font-weight:500}
.snav svg{width:17px;height:17px}
.badge-new{
  margin-left:auto;background:var(--vert-actif);color:var(--vert);
  border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600
}

.refer{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  background:var(--vert-pale);border:1px solid rgba(1,184,89,.22);
  border-radius:var(--r-sm);padding:12px 10px
}
.refer:hover{border-color:rgba(1,184,89,.42)}
.refer .ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);
  background:rgba(1,184,89,.14);
  display:flex;align-items:center;justify-content:center;color:var(--vert)
}
.refer b{display:block;font-size:13px;font-weight:500}
.refer span{display:block;font-size:12px;color:var(--gris-2)}
.refer .chev{margin-left:auto}

/* ---------- cartes ---------- */
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:20px}
.carte + .carte{margin-top:24px}

.ent-nom{
  display:inline-flex;align-items:center;gap:10px;
  font-size:26px;font-weight:600;letter-spacing:-.02em;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px
}
.ent-nom svg{width:16px;height:16px;color:var(--gris-2)}
.ent-adr{display:flex;align-items:center;gap:6px;color:var(--gris);margin-top:8px;font-size:14px}
.ent-adr svg{width:15px;height:15px}

.sep{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:var(--gris-2);font-size:12px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--bord)}

/* Memes paliers que la reference : 1 colonne, puis 2 a 640 px, 3 a 768 px
   et 5 a 1280 px.
   Les requetes de conteneur qui suivent sont un garde-fou : a 1280 px le
   panneau Google est encore a cote, la carte ne fait que ~450 px, et cinq
   colonnes y donneraient des tuiles de 80 px ou « DEMANDES » deborde tout
   seul. Les libelles francais sont plus longs que les anglais, la
   reference n'a pas ce probleme. On retombe donc au nombre de colonnes que
   la carte peut vraiment tenir. */
.carte-perf{container-type:inline-size}
.tuiles{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:640px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:768px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.tuiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container (max-width:779px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:479px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:329px){.tuiles{grid-template-columns:minmax(0,1fr)}}
/* space-between : le libelle reste en haut et le chiffre colle en bas, si
   bien que les chiffres restent alignes d'une tuile a l'autre meme quand
   un libelle passe sur deux lignes. Tailles reduites sur mobile, comme la
   reference. */
.tuile{
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--tuile);border-radius:var(--r-sm);padding:12px;min-height:80px
}
.tuile-h{display:flex;align-items:flex-start;gap:8px}
.tuile-h span{
  flex:1;min-width:0;
  font-size:9px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)
}
.tuile-h svg{width:14px;height:14px;flex:0 0 14px;color:var(--gris)}
.tuile b{display:block;margin-top:4px;font-size:20px;font-weight:700;letter-spacing:-.02em}
@media(min-width:640px){
  .tuile{padding:16px;min-height:90px}
  .tuile-h span{font-size:11px}
  .tuile-h svg{width:16px;height:16px;flex-basis:16px}
  .tuile b{margin-top:8px;font-size:24px}
}

.carte-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.carte-h h2{font-size:16px;font-weight:600}
.seg{display:inline-flex;gap:2px}
.seg button{border-radius:var(--r-sm);padding:5px 11px;font-size:12px;font-weight:500;color:var(--gris)}
.seg button.on{background:var(--vert);color:#fff}

/* graphique */
.graph{height:210px;display:flex;align-items:flex-end;gap:6px;padding-top:8px}
.barre{flex:1;background:var(--vert);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.barre:hover{background:#0d6626}
.graph-x{display:flex;gap:6px;margin-top:8px;font-size:11px;color:var(--gris-2)}
.graph-x span{flex:1;text-align:center}
.vide{
  height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--gris-2)
}
.vide .rond{
  width:46px;height:46px;border-radius:999px;background:var(--tuile);
  display:flex;align-items:center;justify-content:center;color:var(--gris);margin-bottom:6px
}
.vide b{font-size:14px;font-weight:400;color:var(--gris)}
.vide small{font-size:12px}

/* ---------- panneau Google ---------- */
.g-titre{font-size:16px;font-weight:600;margin-bottom:16px}
.g-note{text-align:center}
.g-rond{
  width:52px;height:52px;border-radius:999px;background:#fff;border:1px solid var(--bord);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px
}
.g-chiffre{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.g-chiffre small{font-size:14px;font-weight:400;color:var(--gris-2);letter-spacing:0}
.etoiles{color:var(--or);font-size:17px;letter-spacing:3px;margin-top:8px}
.etoiles .off{color:#d8dbd8}
.g-nb{font-size:13px;color:var(--gris);margin-top:8px}

.bloc{border-top:1px solid var(--bord);margin-top:16px;padding-top:20px}
.bloc h3{font-size:14px;font-weight:600}
.bloc p{font-size:12px;color:var(--gris-2);margin-top:2px}

.proj-in{display:flex;align-items:center;gap:8px;margin:16px 0 12px;font-size:13px}
.proj-in b{font-size:16px;font-weight:500;color:var(--gris)}
.proj-in input[type=number]{
  width:72px;border:1px solid var(--bord);border-radius:var(--r-sm);padding:7px 9px;
  font:inherit;font-size:14px;background:#fff;color:var(--encre)
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;
  background:var(--bord);outline:0
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:999px;
  background:#fff;border:2px solid var(--vert);cursor:pointer
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:999px;background:#fff;border:2px solid var(--vert);cursor:pointer
}
.proj-out{
  border:1px solid var(--bord);border-radius:var(--r-sm);padding:20px;margin-top:16px;
  text-align:center;color:var(--gris-2);font-size:13px;height:90px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px
}
.proj-out.actif{color:var(--encre)}
.proj-out .val{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--vert)}

.palier{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px}
.palier .lv{width:42px;flex:0 0 42px;color:var(--gris)}
.palier .piste{flex:1;height:7px;border-radius:999px;background:var(--tuile);overflow:hidden}
/* display:block obligatoire : .piste n'est pas un conteneur flex, la
   jauge restait donc en ligne et ignorait sa largeur, ce qui affichait
   toutes les barres vides. */
.palier .jauge{display:block;height:100%;background:var(--vert);border-radius:999px}
.palier .nb{width:72px;flex:0 0 72px;text-align:right;color:var(--gris)}

.g-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:1px solid var(--bord);border-radius:var(--r-sm);padding:10px;margin-top:10px;
  font-size:13px;font-weight:500;background:#fff;cursor:pointer;
  transition:background .15s,border-color .15s
}
.g-btn:hover{background:rgba(1,184,89,.10);border-color:rgba(1,184,89,.28)}
.g-btn svg{width:14px;height:14px;color:var(--gris)}

/* ---------- mobile ---------- */
/* ---------- barre et tiroir sur mobile ----------
   Sous 768 px la barre laterale sort du flux et glisse par-dessus le
   contenu derriere un voile sombre, comme la reference. Avant, elle
   s'inserait dans le flux et repoussait toute la page vers le bas. */
.barre-mobile{display:none}
.side-voile{display:none}

@media(max-width:767px){
  .app{flex-direction:column;height:auto;min-height:100vh;overflow:visible}
  .main{padding:16px;overflow:visible}

  .barre-mobile{
    display:flex;align-items:center;gap:8px;
    flex:0 0 56px;height:56px;padding:0 16px;
    background:var(--carte);border-bottom:1px solid var(--bord)
  }
  .barre-mobile-btn{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;flex:0 0 28px;margin-left:-4px;
    border-radius:6px;color:var(--encre);cursor:pointer
  }
  .barre-mobile-btn:hover{background:var(--tuile)}
  .barre-mobile-btn svg{width:16px;height:16px}
  .barre-mobile-trait{
    width:1px;height:16px;flex:0 0 1px;margin-right:8px;background:var(--bord)
  }
  .barre-mobile-nom{
    min-width:0;font-size:14px;font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }

  /* `.app > .side` et non `.side` : une regle `.side{position:relative}`
     plus bas dans la feuille l'emportait a egalite de specificite et le
     tiroir restait dans le flux. */
  .app > .side{
    position:fixed;top:0;left:0;bottom:0;z-index:50;
    width:320px;max-width:85vw;flex:none;height:100%;
    background:var(--page);border-right:1px solid var(--bord);
    transform:translateX(-100%);transition:transform .3s ease;
    overflow-y:auto
  }
  .app > .side.on{transform:none}
  .app > .side:focus{outline:none}

  .side-voile{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5)}
  .side-voile[hidden]{display:none}
  body.menu-ouvert{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.side{transition:none}}

/* ============================================================
   Connexion : repris de dash.reviewharvest.com
   Carte centree de 448 px sur fond menthe, logo, titre 24 px,
   champ de 36 px, bouton pleine largeur desactive tant que la
   saisie n'est pas valide.
   ============================================================ */
.conn-ecran{
  min-height:100vh;background:#e8efeb;
  display:flex;align-items:center;justify-content:center;padding:16px
}
.conn-carte{
  width:100%;max-width:448px;background:#f9fafb;border-radius:12px;padding:32px;
  box-shadow:0 10px 15px -3px rgba(0,35,21,.1),0 4px 6px -4px rgba(0,35,21,.1)
}

/* Pas de hauteur fixe : les 64 px pour une image de 52 ajoutaient 6 px
   sous le logo, qui s'additionnaient a la marge et creusaient l'ecart
   avec le titre. */
.marque{display:flex;align-items:center;justify-content:center;margin-bottom:20px}
/* Centrage optique : la boite de l'image est bien centree, mais sa
   matiere ne l'est pas. Le bloc CINQ/CINQ est dense a gauche et
   l'etoile est une forme isolee a droite, ce qui place le centre de
   gravite 7 px a gauche du milieu. On rattrape la moitie de l'ecart :
   corriger tout ferait basculer l'etoile trop loin. */
.marque img{display:block;position:relative;left:4px;width:auto;height:52px}

.etape{display:none}
.etape.on{display:block}
.conn-haut{text-align:center;margin-bottom:32px}
.conn-haut h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.conn-haut p{color:var(--gris-2)}

.champ{margin-bottom:24px}
.champ label{display:block;font-size:14px;font-weight:500}
.champ input{
  display:block;width:100%;height:36px;margin-top:4px;
  border:1px solid var(--bord);border-radius:6px;background:transparent;
  padding:4px 12px;font:inherit;font-size:14px;color:var(--encre);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s ease,box-shadow .15s ease
}
.champ input::placeholder{color:var(--gris-2)}
.champ input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.5)}
.champ-code{
  height:44px !important;text-align:center;font-size:24px !important;
  letter-spacing:.15em;font-weight:500
}

.conn-carte button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:36px;border-radius:6px;
  background:var(--vert);color:#fff;font-size:14px;font-weight:500;
  transition:background .15s ease,opacity .15s ease
}
.conn-carte button[type=submit]:hover:not(:disabled){background:#019e4c}
.conn-carte button[type=submit]:disabled{opacity:.5;pointer-events:none}
.tourne{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:999px;animation:tourne .7s linear infinite
}
@keyframes tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tourne{animation:none}}

.conn-legal,.conn-aide{
  text-align:center;font-size:14px;color:var(--gris-2);margin-top:16px;line-height:1.55
}
.conn-legal a,.conn-aide a{color:var(--vert)}
.conn-legal a:hover,.conn-aide a:hover{text-decoration:underline}
.center{text-align:center}
.lien-btn{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;
  border-radius:6px;color:var(--vert);font-size:14px;font-weight:500;margin-top:8px
}
.lien-btn:hover{text-decoration:underline;text-underline-offset:4px}
.lien-btn:disabled{opacity:.5;pointer-events:none}

/* message d'erreur de connexion */
.conn-err{
  background:#fdecea;border:1px solid #f5c6c0;color:#a4231a;
  border-radius:6px;padding:9px 12px;margin-bottom:14px;font-size:13px
}

/* « aucun compte pour cette adresse » : une orientation, pas une erreur.
   Le rouge accuserait la personne d'une faute de frappe alors qu'elle est
   simplement a la mauvaise porte. */
.conn-avis{
  background:#fff;border:1px solid var(--bord);color:var(--gris);
  border-radius:6px;padding:11px 13px;margin-bottom:14px;font-size:13px;
  line-height:1.5
}
.conn-avis a{color:var(--vert);font-weight:600;text-decoration:none}
.conn-avis a:hover{text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   Inscription : deux colonnes : argumentaire a gauche, formulaire a droite.
   Repris de l'ecran d'ouverture de compte de Review Harvest, avec deux
   ecarts assumes : le panneau de gauche reste visible sur mobile (le cacher
   supprime tout l'argumentaire sur la moitie du trafic) et la case a cocher
   est une vraie case, pas un bouton deguise.
   ============================================================ */
.insc{display:flex;flex-direction:column;min-height:100vh;width:100%;overflow-x:hidden}
@media(min-width:900px){
  .insc{flex-direction:row;height:100vh;height:100dvh;min-height:0;overflow:hidden}
  /* chacune defile de son cote, la page reste immobile */
  .insc-gauche,.insc-droite{overflow-y:auto}
}

.insc-gauche{display:none;background:#e8efeb;padding:24px 20px}
@media(min-width:900px){.insc-gauche{display:block;width:42%;max-width:520px;padding:36px}}
@media(min-width:1280px){.insc-gauche{width:36%}}
.marque-gauche{margin-bottom:28px}
@media(min-width:900px){.marque-gauche{margin-bottom:44px}}

.insc-carte{background:#fff;border:2px solid rgba(0,35,21,.10);border-radius:12px;padding:24px}
.insc-titre{text-align:center;margin-bottom:24px}
.insc-titre span{position:relative;display:inline-block;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.insc-titre .trait{position:absolute;left:0;bottom:-6px;width:100%;height:6px;color:var(--vert)}

.avantages{list-style:none;display:flex;flex-direction:column;gap:18px}
.avantages li{display:flex;align-items:flex-start;gap:14px}
.avantages .emo{font-size:1.4rem;min-width:2rem;text-align:center;line-height:1.3}
.avantages h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.avantages p{font-size:.86rem;color:var(--gris-2);margin-top:2px;line-height:1.5}

.insc-droite{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 16px 48px}
@media(min-width:900px){.insc-droite{padding:24px 36px}}
.insc-form-carte{
  width:100%;max-width:640px;margin:auto 0;flex-shrink:0;
  background:#fff;border:1px solid var(--bord);border-radius:12px;
  padding:32px 24px;box-shadow:0 20px 40px -24px rgba(0,35,21,.35)
}
@media(min-width:640px){.insc-form-carte{padding:32px 40px}}
.insc-form-carte h1{font-size:clamp(1.7rem,4vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.insc-sous{color:var(--gris-2);margin-top:10px;margin-bottom:28px;font-size:.98rem;line-height:1.55}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:359px){.duo{grid-template-columns:1fr}}
.insc-form-carte .champ input,
.insc-form-carte .champ select{
  height:46px;font-size:1rem;background:#fff;border:1px solid var(--bord)
}
.insc-form-carte .champ select{
  width:100%;margin-top:4px;border-radius:6px;padding:4px 12px;font:inherit;font-size:1rem;
  color:var(--encre);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23505851' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  transition:border-color .15s ease,box-shadow .15s ease
}
.insc-form-carte .champ select:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.5)}
.champ input[aria-invalid=true],.champ select[aria-invalid=true]{border-color:#c5221f}
.champ-err{display:block;margin-top:5px;font-size:.8rem;color:#c5221f}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.accord{
  display:flex;align-items:flex-start;gap:12px;margin:6px 0 20px;padding:14px 16px;
  border:1px solid rgba(0,35,21,.10);border-radius:8px;background:rgba(237,241,238,.5);
  font-size:.9rem;line-height:1.55;cursor:pointer
}
.accord input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--vert);cursor:pointer}
.accord a{color:var(--vert);text-decoration:underline;text-underline-offset:2px;font-weight:500}

#btn-insc{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;
  border-radius:8px;background:var(--vert);color:#fff;font-size:1rem;font-weight:600;
  box-shadow:0 10px 20px -10px rgba(1,184,89,.6);
  transition:background .15s ease,opacity .15s ease,box-shadow .15s ease
}
#btn-insc:hover:not(:disabled){background:#019e4c;box-shadow:0 14px 26px -10px rgba(1,184,89,.7)}
#btn-insc:disabled{opacity:.5;pointer-events:none;box-shadow:none}

.insc-aide{margin-top:26px;text-align:center}
.insc-aide p{font-size:.9rem;color:var(--gris-2);margin-bottom:12px}
.btn-second{
  display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;
  border:1px solid var(--bord);border-radius:8px;background:#fff;
  font-size:.92rem;font-weight:500;color:var(--encre)
}
.btn-second:hover{background:var(--vert-pale)}

/* confirmation */
.fini{text-align:center}
.fini-rond{
  width:56px;height:56px;border-radius:999px;background:var(--vert-actif);color:var(--vert);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 18px
}
.fini-etapes{display:flex;flex-direction:column;gap:14px;margin:26px 0 20px;text-align:left}
.fini-etapes > div{display:flex;align-items:flex-start;gap:14px}
.fini-etapes span{
  width:26px;height:26px;flex:0 0 26px;border-radius:999px;background:var(--vert);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700
}
.fini-etapes b{font-size:.98rem}
.fini-etapes p{font-size:.86rem;color:var(--gris-2);margin-top:2px}
.note-douce{
  background:#fbf5e4;border-radius:8px;padding:16px 18px;font-size:.88rem;
  color:var(--gris);text-align:left;line-height:1.6
}

/* ---------- panneau de gauche interchangeable ---------- */
.panneau{display:none}
.panneau.on{display:block}
.inclus{list-style:none;display:flex;flex-direction:column;gap:11px}
.inclus li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;line-height:1.45}
.inclus li::before{
  content:"";flex:0 0 19px;width:19px;height:19px;margin-top:1px;border-radius:999px;
  background:var(--vert-actif) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301b859' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat
}
.insc-note{
  margin-top:20px;padding:14px 16px;background:var(--vert-pale);border-radius:8px;
  font-size:.85rem;color:var(--gris-2);line-height:1.55
}
.insc-note a{color:var(--vert);font-weight:500}

/* ---------- six cases du code ---------- */
.cases{display:flex;gap:10px;justify-content:center;padding:22px 0 6px}
.cases input{
  width:52px;height:62px;text-align:center;font-size:1.55rem;font-weight:700;
  border:2px solid var(--bord);border-radius:12px;background:#fff;color:var(--encre);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s ease,box-shadow .15s ease
}
.cases input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 4px rgba(1,184,89,.15)}
.cases input:hover:not(:focus){border-color:var(--gris-2)}
@media(max-width:420px){
  .cases{gap:7px}
  .cases input{width:44px;height:54px;font-size:1.3rem}
}
#btn-code{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;
  margin-top:18px;border-radius:8px;background:var(--vert);color:#fff;font-size:1rem;font-weight:600;
  box-shadow:0 10px 20px -10px rgba(1,184,89,.6);transition:background .15s ease,opacity .15s ease
}
#btn-code:hover:not(:disabled){background:#019e4c}
#btn-code:disabled{opacity:.5;pointer-events:none;box-shadow:none}
.lien-large{
  display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin-top:12px;
  border-radius:8px;font-size:.98rem;font-weight:500;color:var(--gris)
}
.lien-large:hover{background:var(--vert-pale);color:var(--encre)}
.insc-aide-min{margin-top:16px;text-align:center;font-size:.86rem;color:var(--gris-2);line-height:1.6}
.insc-aide-min a{color:var(--vert);font-weight:500}
.insc-aide-min .lien-btn{height:auto;padding:0;font-size:.86rem;color:var(--vert);font-weight:500}
.insc-aide-min .lien-btn:hover{text-decoration:underline}

/* ---------- cartes de forfait ---------- */
.ruban{
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;
  background:var(--vert-actif);color:var(--vert);border-radius:999px;
  padding:9px 18px;font-size:.88rem;font-weight:600
}
.ruban svg{width:17px;height:17px}
.forfaits{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media(max-width:760px){.forfaits{grid-template-columns:1fr;gap:28px}}
.forfait{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--bord);border-radius:16px;background:#fff;padding:24px 20px;
  box-shadow:0 10px 24px -18px rgba(0,35,21,.45);transition:box-shadow .2s ease
}
.forfait:hover{box-shadow:0 16px 32px -18px rgba(0,35,21,.5)}
.forfait.pop{border:2px solid var(--vert);background:var(--vert);color:#fff}
.ff-ruban{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--vert);border:2px solid var(--vert);border-radius:999px;
  padding:5px 16px;font-size:.8rem;font-weight:600;white-space:nowrap
}
.forfait h2{text-align:center;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.forfait.pop h2{color:#fff}
.ff-volume{text-align:center;font-size:.86rem;color:var(--gris-2);margin-top:6px}
.forfait.pop .ff-volume{color:rgba(255,255,255,.8)}
.ff-prix{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:16px;white-space:nowrap;flex-wrap:nowrap}
.ff-prix b{font-size:clamp(2rem,4.4vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:var(--vert);white-space:nowrap}
.forfait.pop .ff-prix b{color:#fff}
.ff-prix span{font-size:1.05rem;color:var(--gris-2)}
.forfait.pop .ff-prix span{color:rgba(255,255,255,.75)}
.ff-note{text-align:center;font-size:.8rem;font-weight:500;color:var(--vert);margin-top:8px}
.forfait.pop .ff-note{color:rgba(255,255,255,.9)}
.ff-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin:18px 0}
.ff-liste li{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--gris)}
.forfait.pop .ff-liste li{color:rgba(255,255,255,.92)}
.ff-liste li::before{
  content:"";flex:0 0 19px;width:19px;height:19px;margin-top:1px;border-radius:999px;
  background:var(--vert-actif) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301b859' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat
}
.forfait.pop .ff-liste li::before{
  background:rgba(255,255,255,.22) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat
}
.ff-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;width:100%;height:46px;border-radius:8px;
  border:1px solid var(--bord);background:#fff;color:var(--encre);
  font-size:.98rem;font-weight:600;transition:background .15s ease,color .15s ease
}
.ff-btn:hover:not(:disabled){background:var(--vert);color:#fff;border-color:var(--vert)}
.forfait.pop .ff-btn{background:#fff;color:var(--vert);border-color:#fff}
.forfait.pop .ff-btn:hover:not(:disabled){background:rgba(255,255,255,.9)}
.ff-btn:disabled{opacity:.6;pointer-events:none}
.ff-bas{text-align:center;font-size:.76rem;color:var(--gris-2);margin-top:12px}
.forfait.pop .ff-bas{color:rgba(255,255,255,.7)}

/* ---------- compte deja ouvert ---------- */
.fini-rond.alerte{background:#fdeee0;color:#c2410c;font-weight:700}
.duo-btn{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.btn-plein{
  display:flex;align-items:center;justify-content:center;width:100%;height:48px;
  border-radius:8px;background:var(--vert);color:#fff;font-size:1rem;font-weight:600;
  transition:background .15s ease
}
.btn-plein:hover{background:#019e4c}
.btn-second.large{width:100%;height:48px}

/* ---------- FAQ du panneau de gauche ---------- */
.insc-intro{font-size:.86rem;color:var(--gris-2);line-height:1.55;margin-bottom:18px}
.faq-insc details{border-bottom:1px solid var(--bord)}
.faq-insc details:last-child{border-bottom:0}
.faq-insc summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:14px 0;font-size:.88rem;font-weight:600;line-height:1.4
}
.faq-insc summary::-webkit-details-marker{display:none}
.faq-insc summary::after{
  content:"";flex:0 0 15px;width:15px;height:15px;margin-top:2px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .2s ease
}
.faq-insc details[open] summary::after{transform:rotate(180deg)}
.faq-insc summary:hover{text-decoration:underline}
.faq-insc details p{font-size:.84rem;color:var(--gris-2);line-height:1.6}

/* ---------- etape paiement ---------- */
.recap-forfait{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--vert-pale);border-radius:10px;padding:16px 18px;margin-bottom:22px
}
.recap-forfait b{display:block;font-size:1rem;font-weight:600}
.recap-forfait span{display:block;font-size:.84rem;color:var(--gris-2);margin-top:2px}
.recap-prix{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.recap-prix b{font-size:1.5rem;font-weight:700;color:var(--vert)}
.recap-prix span{font-size:.86rem;color:var(--gris-2);margin:0}
#stripe-carte:not(:empty){margin-bottom:20px}
#btn-paiement{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;
  border-radius:8px;background:var(--vert);color:#fff;font-size:1rem;font-weight:600;
  box-shadow:0 10px 20px -10px rgba(1,184,89,.6);transition:background .15s ease
}
#btn-paiement:hover:not(:disabled){background:#019e4c}
#btn-paiement:disabled{opacity:.6;pointer-events:none}

/* ---------- elements Stripe ---------- */
#etape-paiement h1{margin-bottom:26px}
.titre-trait span{position:relative;display:inline-block}
.titre-trait .trait{position:absolute;left:0;bottom:-7px;width:100%;height:6px;color:var(--vert)}
#stripe-adresse:not(:empty){margin-bottom:20px}
#stripe-carte:not(:empty){margin-bottom:16px}
.mention-carte{
  font-size:.82rem;color:var(--gris-2);line-height:1.55;margin-bottom:18px
}

/* ---------- ouverture animee de la FAQ ----------
   La grille passe de 0fr a 1fr : ca s'anime tout seul, sans hauteur fixe a
   calculer, donc sans casser quand une reponse fait deux lignes de plus. */
.faq-insc .rep{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)
}
.faq-insc details.ouvre .rep{grid-template-rows:1fr}
/* l'enfant porte le debordement, le rembourrage vit a l'interieur */
.faq-insc .rep-in{overflow:hidden;min-height:0}
.faq-insc .rep-in p{padding:0 0 14px}
@media(prefers-reduced-motion:reduce){
  .faq-insc .rep{transition:none}
}

/* ---------- etape « connectez votre fiche Google » ----------
   Reprend la carte des autres etapes ; seuls la liste a coches, le bouton
   Google et les deux encadres du bas sont propres a cet ecran. */
.goo-liste{list-style:none;display:flex;flex-direction:column;gap:12px;margin:24px 0 0}
.goo-liste li{display:flex;align-items:flex-start;gap:12px}
.goo-liste p{font-size:.9rem;line-height:1.5}
.goo-coche{
  flex-shrink:0;margin-top:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(1,184,89,.10);color:var(--vert);
  display:flex;align-items:center;justify-content:center
}
.goo-coche svg{width:12px;height:12px}

.goo-action{
  margin-top:24px;padding:24px;border-radius:10px;
  background:rgba(1,184,89,.05);border:1px solid rgba(1,184,89,.20);
  display:flex;justify-content:center
}
.btn-google{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:100%;height:40px;padding:0 24px;border:0;border-radius:8px;
  background:var(--vert);color:#fff;font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:opacity .15s
}
@media(min-width:640px){.btn-google{width:auto}}
.btn-google:hover{opacity:.9}
.goo-g{width:20px;height:20px;flex-shrink:0;background:#fff;border-radius:3px;padding:2px}

.goo-bas{margin-top:24px;padding-top:24px;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:16px}
.goo-info{
  display:flex;gap:12px;padding:12px 16px;border-radius:8px;
  background:rgba(0,35,21,.03);border:1px solid rgba(0,35,21,.07)
}
.goo-info svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--gris-2)}
.goo-info b{display:block;font-size:.88rem;font-weight:600}
.goo-info p{font-size:.84rem;color:var(--gris-2);line-height:1.55;margin-top:2px}
.goo-info a{color:var(--vert);font-weight:500;text-decoration:underline;text-underline-offset:2px}

.goo-aide{padding:16px;border-radius:8px;background:rgba(0,35,21,.02)}
.goo-aide h4{font-size:.88rem;font-weight:600}
.goo-aide p{font-size:.84rem;color:var(--gris-2);line-height:1.55;margin:6px 0 14px}
.goo-aide .btn-second{width:100%}
@media(min-width:640px){.goo-aide .btn-second{width:auto}}

/* ---------- panneau « plus d'avis = plus de revenus » ---------- */
.rev-stat{margin-top:20px;font-size:.86rem;color:var(--gris-2);line-height:1.6}
.rev-chiffre{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--vert);font-size:1.05rem;font-weight:700;letter-spacing:-.01em
}
.rev-chiffre svg{width:15px;height:15px}

.rev-comp{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.rev-ligne{padding:11px 13px;border-radius:9px;border:1px solid transparent}
.rev-ligne b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.rev-ligne > div{margin-top:3px;display:flex;align-items:center;gap:7px;font-size:.82rem}
.rev-note{font-weight:700;color:#202124}
.rev-et{color:#fbbc04;letter-spacing:1px}
.rev-et .et-vide{color:#dadce0}
.rev-nb{color:var(--gris-2)}
.rev-ligne.gagnant{background:rgba(1,184,89,.16);border-color:rgba(1,184,89,.30)}
.rev-ligne.perdant{background:rgba(234,67,53,.07);border-color:rgba(234,67,53,.18)}
.rev-ligne.perdant b,.rev-ligne.perdant .rev-note{color:var(--gris-2)}

.rev-source{margin-top:14px;font-size:.72rem;color:var(--gris-2);text-align:center}
.rev-source a{color:var(--vert);text-decoration:underline;text-underline-offset:2px}

/* ---------- etablissements Google ---------- */
.lieux-vue[hidden]{display:none !important}

.lieux-attente{
  min-height:220px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;color:var(--gris-2)
}
.lieux-attente p{font-size:.92rem}
/* Le spinner par defaut est blanc, pour les boutons pleins. */
.tourne.vert{width:26px;height:26px;border-width:3px;
  border-color:rgba(1,184,89,.20);border-top-color:var(--vert)}

.lieux-centre{display:flex;justify-content:center;margin-top:24px}
.lieux-centre .btn-plein{width:auto;padding:0 22px}
.titre-err{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;letter-spacing:-.02em;color:#c5221f}

.lieux-rech{
  position:relative;display:flex;align-items:center;margin-top:22px
}
.lieux-rech svg{position:absolute;left:13px;width:16px;height:16px;color:var(--gris-2);pointer-events:none}
.lieux-rech input{
  width:100%;height:42px;padding:0 14px 0 38px;font:inherit;font-size:.9rem;
  border:1px solid var(--bord);border-radius:9px;background:#fff;color:inherit
}
.lieux-rech input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.12)}

#lieux-resultats{margin-top:14px;display:flex;flex-direction:column;gap:10px;max-height:330px;overflow-y:auto}
.lieu{
  display:flex;align-items:flex-start;gap:13px;width:100%;padding:14px;
  border:1px solid var(--bord);border-radius:10px;background:#fff;
  font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s
}
.lieu:hover{border-color:var(--vert);background:rgba(1,184,89,.03)}
.lieu:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.lieu-epingle{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(0,35,21,.05);
  display:flex;align-items:center;justify-content:center;color:var(--gris-2)
}
.lieu-epingle svg{width:17px;height:17px}
.lieu-nom{font-size:.94rem;font-weight:700;letter-spacing:-.01em}
.lieu-adr{font-size:.82rem;color:var(--gris-2);margin-top:2px}
.lieu-avis{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:.8rem;color:var(--vert)}
.lieu-avis svg{width:13px;height:13px}
.lieux-rien{margin-top:16px;text-align:center;font-size:.86rem;color:var(--gris-2)}
.lieux-pied{margin-top:20px;padding-top:18px;border-top:1px solid var(--bord);text-align:center}

.lieu-choisi{
  margin-top:20px;margin-bottom:24px;padding:18px;border-radius:10px;
  background:rgba(1,184,89,.05);border:1px solid rgba(1,184,89,.20);
  display:flex;align-items:flex-start;gap:13px
}
.lieu-fiche{display:flex;align-items:flex-start;gap:13px;width:100%}
.lieu-choisi .lieu-epingle{background:rgba(1,184,89,.12);color:var(--vert)}
.lieu-choisi a{color:var(--vert);text-decoration:underline;text-underline-offset:2px}

/* ---------- boite de dialogue ---------- */
.modale[hidden],.volet[hidden]{display:none !important}
.modale{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modale-fond{position:absolute;inset:0;background:rgba(0,20,12,.45)}
.modale-boite{
  position:relative;width:100%;max-width:430px;background:#fff;border-radius:12px;
  padding:22px;box-shadow:0 24px 60px -20px rgba(0,35,21,.45);
  animation:modale-entre .18s cubic-bezier(.2,.8,.3,1)
}
@keyframes modale-entre{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modale-boite{animation:none}}
.modale-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.modale-tete h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.modale-x,.volet-x,.volet-icone{
  border:0;background:none;padding:4px;cursor:pointer;color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;border-radius:6px
}
.modale-x svg,.volet-x svg{width:17px;height:17px}
.modale-x:hover,.volet-x:hover,.volet-icone:hover{background:rgba(0,35,21,.06);color:inherit}
#modale-champ{
  width:100%;height:42px;padding:0 13px;font:inherit;font-size:.92rem;
  border:2px solid var(--vert);border-radius:8px;background:#fff;color:inherit
}
#modale-champ:focus{outline:none;box-shadow:0 0 0 3px rgba(1,184,89,.15)}
.modale-pied{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modale-pied .btn-second,.modale-pied .btn-plein{width:auto;padding:0 20px;height:38px}

/* ---------- volet de notifications ---------- */
.volet{position:fixed;inset:0;z-index:60}
.volet-fond{position:absolute;inset:0;background:rgba(0,20,12,.35)}
.volet-boite{
  position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
  background:#fff;display:flex;flex-direction:column;
  box-shadow:-16px 0 40px -20px rgba(0,35,21,.45);
  animation:volet-entre .22s cubic-bezier(.2,.8,.3,1)
}
@keyframes volet-entre{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.volet-boite{animation:none}}
.volet-tete{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--bord)}
.volet-tete h2{flex:1;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.volet-icone svg{width:16px;height:16px}
.volet-icone.tourne-1 svg{animation:tourne .6s linear}
.volet-corps{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.volet-vide{color:var(--gris-2);font-size:.9rem}

/* ---------- bouton « copie » ---------- */
#copier.copie{background:rgba(1,184,89,.10);border-color:var(--vert);color:var(--vert);font-weight:600}
#copier.copie svg{color:var(--vert)}

/* ---------- page Contacts ---------- */
.page-tete{margin-bottom:20px}
.page-tete h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.page-tete p{color:var(--gris-2);font-size:.9rem;margin-top:4px}
.ct-barre{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.ct-rech{position:relative;display:flex;align-items:center;flex:1;min-width:220px}
.ct-rech svg{position:absolute;left:12px;width:15px;height:15px;color:var(--gris-2);pointer-events:none}
.ct-rech input{
  width:100%;height:38px;padding:0 12px 0 34px;font:inherit;font-size:.88rem;
  border:1px solid var(--bord);border-radius:8px;background:#fff;color:inherit
}
.ct-rech input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.12)}
.ct-statut{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:.84rem}
.ct-etiq{display:inline-flex;align-items:center;gap:6px;padding:0 12px;height:38px;
  border:1px solid var(--bord);border-radius:8px;background:#fff;font-weight:600}
.ct-etiq svg{width:14px;height:14px;color:var(--gris-2)}
.ct-statut label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ct-statut input{width:15px;height:15px;accent-color:var(--vert);cursor:pointer}
.ct-compte{color:var(--gris-2);font-size:.84rem;margin-left:auto}
.ct-boite{background:#fff;border:1px solid var(--bord);border-radius:8px;
  display:flex;flex-direction:column;justify-content:center}
.ct-vide{display:flex;flex-direction:column;align-items:center;padding:80px 24px;text-align:center}
.ct-vide[hidden]{display:none !important}
.ct-rond{width:56px;height:56px;border-radius:50%;background:rgba(0,35,21,.05);
  display:flex;align-items:center;justify-content:center;color:var(--gris-2);margin-bottom:20px}
.ct-rond svg{width:28px;height:28px}
.ct-vide h3{font-size:1rem;font-weight:600;margin-bottom:6px}
.ct-vide p{color:var(--gris-2);font-size:.875rem;max-width:280px;line-height:1.625}
.ct-ligne{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--bord)}
.ct-ligne:last-child{border-bottom:0}
.ct-ligne b{font-size:.92rem}
.ct-ligne span{color:var(--gris-2);font-size:.85rem}


/* En dessous de 900 px la coquille s'empile : la hauteur figee n'a plus de
   sens, on rend le defilement a la page. */
/* Repris dans le bloc « barre et tiroir sur mobile » ci-dessus. */

/* ---------- Contacts : menu de statut, pastilles, tout effacer ---------- */
.ct-pop{position:relative}
button.ct-etiq{font:inherit;cursor:pointer;color:inherit}
button.ct-etiq:hover{background:rgba(0,35,21,.03)}
button.ct-etiq[aria-expanded=true]{border-color:var(--vert);background:rgba(1,184,89,.06)}
.ct-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:212px;
  background:#fff;border:1px solid var(--bord);border-radius:10px;padding:6px;
  box-shadow:0 16px 36px -18px rgba(0,35,21,.40);
  display:flex;flex-direction:column
}
.ct-menu[hidden]{display:none !important}
.ct-menu label{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  font-size:.86rem;cursor:pointer
}
.ct-menu label:hover{background:rgba(0,35,21,.05)}

.ct-effacer{
  border:0;background:none;padding:0 4px;font:inherit;font-size:.84rem;font-weight:600;
  color:var(--encre);cursor:pointer
}
.ct-effacer:hover{text-decoration:underline;text-underline-offset:3px}
.ct-effacer[hidden]{display:none !important}

.ct-actifs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:.8rem}
.ct-actifs[hidden]{display:none !important}
.ct-actifs-titre{color:var(--gris-2)}
.ct-pastille{
  display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:6px;
  background:rgba(1,184,89,.10);color:var(--encre);font-weight:500
}
.ct-pastille button{
  border:0;background:none;padding:0;line-height:1;cursor:pointer;color:var(--gris-2);
  font-size:.95rem
}
.ct-pastille button:hover{color:var(--encre)}

/* Rubriques pas encore construites : le curseur dit qu'il n'y a rien a
   cliquer, plutot que de laisser croire a un clic rate. */
.snav a.bientot{cursor:default;opacity:.55}
.snav a.bientot:hover{background:none}

/* ---------- menu des entreprises ----------
   Il sort a droite de l'entete, pas en dessous : la barre laterale est
   etroite et un menu de 288 px y deborderait. */
.side{position:relative}
.switch{cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%}
.switch[aria-expanded=true]{background:var(--vert-pale)}

.ent-menu{
  position:fixed;z-index:40;
  width:288px;background:#fff;border:1px solid var(--bord);border-radius:12px;
  padding:4px;box-shadow:0 18px 42px -18px rgba(0,35,21,.42)
}
.ent-menu[hidden]{display:none !important}
.ent-menu-titre{padding:8px 12px;font-size:.82rem;font-weight:500;color:var(--gris-2)}
.ent-menu-liste{max-height:256px;overflow-y:auto}
.ent-menu-trait{border:0;border-top:1px solid var(--bord);margin:4px -4px}

.ent-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px;
  border:0;background:none;border-radius:6px;font:inherit;color:inherit;
  text-align:left;cursor:pointer
}
.ent-item:hover,.ent-item:focus-visible{background:rgba(1,184,89,.10);outline:none}
.ent-item-t{flex:1;min-width:0}
.ent-item-t b{display:block;font-size:.94rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-item-t span{display:block;font-size:.76rem;color:var(--gris-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-pale{background:rgba(1,184,89,.10);color:var(--vert)}
.ent-coche{width:20px;height:20px;flex-shrink:0;color:var(--vert)}

.ent-plus{
  width:32px;height:32px;flex-shrink:0;border:1px solid var(--bord);border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:#fff
}
.ent-plus svg{width:20px;height:20px}
.ent-ajout .ent-item-t b{font-weight:500;color:var(--gris-2)}

@media(max-width:767px){
  .ent-menu{width:min(288px,calc(100vw - 24px))}
}

/* ---------- page « Ajouter une entreprise » ---------- */
.page-retour{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.page-retour h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.page-retour p{color:var(--gris-2);font-size:.9rem;margin-top:2px}
.fleche{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  margin-top:2px;border-radius:8px;color:var(--gris-2);flex-shrink:0
}
.fleche:hover{background:rgba(0,35,21,.06);color:inherit}
.fleche svg{width:18px;height:18px}

.carte-etroite{max-width:560px;margin:0 auto}
.ae-tete{margin-bottom:22px}
.ae-tete b{display:block;font-size:.98rem;font-weight:700}
.ae-tete span{display:block;font-size:.86rem;color:var(--gris-2);margin-top:2px}

.ae-jalons{list-style:none;display:flex;align-items:flex-start;margin-bottom:26px}
.ae-jalons li{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.ae-jalons li:not(:last-child)::after{
  content:"";position:absolute;top:15px;left:calc(50% + 20px);right:calc(-50% + 20px);
  height:2px;background:var(--bord)
}
.ae-jalons li.faite:not(:last-child)::after{background:var(--vert)}
.ae-rond{
  width:30px;height:30px;border-radius:50%;background:var(--bord);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;font-size:.84rem;font-weight:600;
  position:relative;z-index:1
}
.ae-jalons li.on .ae-rond,.ae-jalons li.faite .ae-rond{background:var(--vert);color:#fff}
.ae-rond svg{width:15px;height:15px}
.ae-nom{margin-top:8px;font-size:.78rem;color:var(--gris-2)}
.ae-jalons li.on .ae-nom{color:var(--encre);font-weight:600}

.ae-vue[hidden]{display:none !important}
.ae-corps{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 8px}
.ae-corps-serre{padding:0 0 16px}
.ae-corps h2{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.ae-corps p{color:var(--gris-2);font-size:.88rem;line-height:1.6;max-width:400px;margin-top:6px}
.ae-corps .btn-google{margin-top:22px}
.ae-logo{
  width:64px;height:64px;border-radius:50%;background:rgba(0,35,21,.04);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px
}
.ae-logo svg{width:32px;height:32px}
.ae-coche-rond{
  width:56px;height:56px;border-radius:50%;background:rgba(1,184,89,.12);color:var(--vert);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px
}
.ae-coche-rond svg{width:28px;height:28px}

.ae-groupe{margin:18px 0 10px;font-size:.84rem;font-weight:600}
.ae-lieu{
  display:flex;align-items:center;gap:12px;padding:16px;
  border:1px solid var(--bord);border-radius:10px;margin-bottom:10px
}
.ae-lieu.pris{background:rgba(0,35,21,.02)}
.ae-lieu-icone{
  width:32px;height:32px;border-radius:8px;background:rgba(0,35,21,.05);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.ae-lieu-icone svg{width:17px;height:17px}
.ae-lieu-t{flex:1;min-width:0}
.ae-lieu-t b{display:block;font-size:.95rem;font-weight:600}
.ae-lieu-t span{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--gris-2);margin-top:3px}
.ae-lieu-t span svg{width:13px;height:13px;flex-shrink:0}
.ae-lieu .btn-second{width:auto;padding:0 18px;height:34px;flex-shrink:0}
.ae-deja{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--vert);flex-shrink:0}
.ae-deja svg{width:14px;height:14px}
.ae-maps{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--gris-2)}
.ae-maps:hover{color:var(--vert);text-decoration:underline;text-underline-offset:2px}
.ae-maps svg{width:12px;height:12px}

.ae-forfaits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.ae-forfaits{grid-template-columns:1fr}}
.ae-forfait{
  border:1px solid var(--bord);border-radius:10px;padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center
}
.ae-forfait b{font-size:1rem;font-weight:700}
.ae-prix{margin:10px 0 8px;white-space:nowrap}
.ae-prix span{font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.ae-prix small{font-size:.8rem;color:var(--gris-2)}
.ae-forfait p{font-size:.82rem;color:var(--gris-2);line-height:1.5;margin-bottom:16px;flex:1}
.ae-forfait .btn-second{width:100%}
.ae-note{margin-top:16px;text-align:center;font-size:.8rem;color:var(--gris-2)}

.ae-bloc{border:1px solid var(--bord);border-radius:10px;padding:18px;margin-bottom:14px}
.ae-bloc-titre{font-size:.8rem;color:var(--gris-2);margin-bottom:12px}
.ae-bloc-lieu{display:flex;align-items:center;gap:12px}
.ae-ligne-fact{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ae-ligne-fact b{display:block;font-size:.94rem;font-weight:600}
.ae-ligne-fact span{display:block;font-size:.82rem;color:var(--gris-2);margin-top:2px}
.ae-fact-prix{white-space:nowrap}
.ae-mention{font-size:.78rem;color:var(--gris-2);text-align:center;line-height:1.6;margin-top:4px}

.ae-trait{border:0;border-top:1px solid var(--bord);margin:22px 0 16px}
.ae-pied{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ae-retour{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  border:1px solid var(--bord);border-radius:8px;background:#fff;
  font:inherit;font-size:.88rem;font-weight:500;color:inherit;cursor:pointer
}
.ae-retour:hover{background:rgba(0,35,21,.04)}
.ae-retour svg{width:15px;height:15px}
.ae-valider{width:auto;padding:0 20px;height:38px;gap:8px}
.ae-valider:disabled,.btn-plein:disabled{opacity:.5;pointer-events:none}
.ae-valider svg,.btn-plein svg{width:15px;height:15px;flex-shrink:0}
.ae-valider[hidden]{display:none !important}

/* retour de Google, plein ecran */
.ae-inter{position:fixed;inset:0;z-index:70;background:var(--fond,#f7f9f8);
  display:flex;align-items:center;justify-content:center;padding:24px}
.ae-inter[hidden]{display:none !important}
.ae-inter-carte{
  background:#fff;border:1px solid var(--bord);border-radius:12px;
  padding:48px 40px;text-align:center;max-width:450px;width:100%;
  display:flex;flex-direction:column;align-items:center
}
.ae-inter-rond{
  width:64px;height:64px;border-radius:50%;background:rgba(1,184,89,.12);color:var(--vert);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px
}
.ae-inter-rond svg{width:32px;height:32px}
.ae-inter-carte h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.ae-inter-carte p{color:var(--gris-2);font-size:.9rem;margin-top:8px}
.ae-inter-suite{font-size:.82rem !important;margin-top:14px !important}

/* ---------- page « Ajouter des contacts » ---------- */
.onglets{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;max-width:420px;
  background:rgba(0,35,21,.05);border-radius:9px;padding:3px;margin-bottom:22px
}
.onglets button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;
  border:1px solid transparent;border-radius:7px;background:none;
  font:inherit;font-size:.86rem;font-weight:500;color:var(--gris-2);cursor:pointer
}
.onglets button svg{width:15px;height:15px}
.onglets button[aria-selected=true]{
  background:#fff;color:var(--encre);border-color:var(--bord);
  box-shadow:0 1px 2px rgba(0,35,21,.06)
}

.ac-tete{margin-bottom:20px}
.ac-tete b{display:block;font-size:.98rem;font-weight:600}
.ac-tete span{display:block;font-size:.86rem;color:var(--gris-2);margin-top:3px}

.ac-bascule{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px;border:1px solid var(--bord);border-radius:9px;
  background:rgba(0,35,21,.02);margin-bottom:22px
}
.ac-bascule label{font-size:.88rem;font-weight:500;cursor:pointer}
.ac-bascule p{font-size:.84rem;color:var(--gris-2);margin-top:2px}
.bascule{
  flex-shrink:0;width:34px;height:20px;border-radius:999px;border:0;padding:2px;
  background:var(--bord);cursor:pointer;transition:background .15s
}
.bascule span{display:block;width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bascule[aria-checked=true]{background:var(--vert)}
.bascule[aria-checked=true] span{transform:translateX(14px)}

.ac-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.ac-duo{grid-template-columns:1fr}}
.ac-champ{margin-bottom:18px}
.ac-champ label{display:block;font-size:.86rem;font-weight:500;margin-bottom:7px}
.ac-requis{color:#c5221f}
.ac-champ input{
  width:100%;height:38px;padding:0 12px;font:inherit;font-size:.9rem;
  border:1px solid var(--bord);border-radius:8px;background:#fff;color:inherit
}
.ac-champ input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.12)}
.ac-aide{font-size:.78rem;color:var(--gris-2);margin-top:6px}

.ac-consent{
  display:flex;align-items:flex-start;gap:12px;padding:16px;margin-bottom:20px;
  border:1px solid var(--bord);border-radius:9px;background:rgba(0,35,21,.02);cursor:pointer
}
.ac-consent input{width:16px;height:16px;margin-top:1px;accent-color:var(--vert);flex-shrink:0;cursor:pointer}
.ac-consent span{font-size:.86rem;line-height:1.55}
.ac-valider{width:100%;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ac-valider svg{width:15px;height:15px}
.ac-valider:disabled{opacity:.5;pointer-events:none}

/* onglet CSV */
/* wrap + une base de 240 px sur le bloc de texte : le bouton ne rétrécit
   pas, et sans ça il ne restait qu'une centaine de pixels au texte sur
   mobile, ou chaque ligne se cassait mot par mot. Trop etroit pour les
   deux, le bouton passe simplement dessous. */
.csv-format{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 20px;
  padding:16px;border:1px solid var(--bord);border-radius:10px;
  background:rgba(0,35,21,.02);margin-bottom:18px
}
.csv-format > div{flex:1 1 240px;min-width:0}
.csv-format h3{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;margin-bottom:8px}
.csv-format h3 svg{width:15px;height:15px}
.csv-format > div > p{font-size:.84rem;color:var(--gris-2);margin-bottom:8px}
.csv-cols{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--gris-2)}
.csv-cols b{color:var(--encre);font-weight:500}
.csv-gabarit{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;height:32px;padding:0 12px;
  border:1px solid var(--bord);border-radius:7px;background:#fff;
  font:inherit;font-size:.82rem;font-weight:500;color:inherit;cursor:pointer
}
.csv-gabarit:hover{background:rgba(1,184,89,.08);border-color:rgba(1,184,89,.28)}
.csv-gabarit svg{width:14px;height:14px}

.csv-depot{
  border:2px dashed var(--bord);border-radius:10px;padding:48px 24px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s
}
.csv-depot:hover,.csv-depot:focus-visible,.csv-depot.survol{
  border-color:var(--vert);background:rgba(1,184,89,.03);outline:none
}
.csv-fleche{width:46px;height:46px;color:var(--gris-2);margin:0 auto 16px;display:block}
.csv-depot p{font-size:.86rem;color:var(--gris-2)}
.csv-depot p b{color:var(--encre);font-weight:600}
.csv-limite{font-size:.78rem !important;margin-top:5px}
.csv-choisi{margin-top:12px;font-size:.85rem;font-weight:500;text-align:center}
.csv-choisi[hidden]{display:none !important}
.csv-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.csv-pied .ae-retour:disabled{opacity:.5;pointer-events:none}
.csv-pied .ae-valider{width:auto;padding:0 18px}

/* ---------- import CSV : association et suite ---------- */
.csv-vue[hidden]{display:none !important}
.csv-sous-tete{margin-bottom:20px}
.csv-sous-tete b{display:block;font-size:.98rem;font-weight:600}
.csv-sous-tete span{display:block;font-size:.86rem;color:var(--gris-2);margin-top:3px}

.csv-apercu-tete,.csv-map-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.csv-apercu-tete h3{font-size:.86rem;font-weight:500}
.csv-map-tete h3{font-size:.95rem;font-weight:600}
.csv-apercu-tete p,.csv-map-tete p{font-size:.78rem;color:var(--gris-2)}
.csv-map-tete{margin-top:26px}

.csv-apercu{border:1px solid var(--bord);border-radius:9px;overflow-x:auto}
.csv-apercu table{width:100%;border-collapse:collapse;font-size:.85rem}
.csv-apercu th,.csv-apercu td{padding:8px 10px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--bord)}
.csv-apercu th{background:rgba(0,35,21,.03);font-weight:500;min-width:120px}
.csv-apercu tr:last-child td{border-bottom:0}
.csv-apercu .csv-num{width:44px;min-width:44px;color:var(--gris-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}
.csv-apercu td{max-width:200px;overflow:hidden;text-overflow:ellipsis}

.csv-groupe{
  border-left:4px solid var(--bord);border-radius:0 9px 9px 0;
  padding:12px 16px;margin-bottom:14px;background:rgba(0,35,21,.02)
}
.csv-groupe.ok{border-left-color:var(--vert);background:rgba(1,184,89,.06)}
.csv-groupe.libre{border-left-color:transparent;background:none;padding-left:0}
.csv-groupe-titre{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:500;margin-bottom:10px}
.csv-groupe.libre .csv-groupe-titre{color:var(--gris-2)}
.csv-ok{display:inline-flex;color:var(--vert);flex-shrink:0}
.csv-ok svg{width:16px;height:16px}

.csv-assoc{display:flex;align-items:center;gap:12px;padding:5px 0;flex-wrap:wrap}
.csv-assoc-nom{width:128px;flex-shrink:0;display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:500}
.csv-badge{
  font-size:.68rem;font-weight:500;padding:2px 7px;border-radius:5px;
  background:rgba(0,35,21,.07);color:var(--gris-2)
}
.csv-fleche-a{display:inline-flex;color:var(--gris-2);flex-shrink:0}
.csv-fleche-a svg{width:15px;height:15px}
.csv-assoc select{
  width:190px;height:36px;padding:0 10px;font:inherit;font-size:.85rem;
  border:1px solid var(--bord);border-radius:7px;background:#fff;color:inherit;cursor:pointer
}
.csv-assoc select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.12)}
.csv-retirer{
  width:30px;height:30px;border:0;background:none;border-radius:6px;cursor:pointer;
  color:var(--gris-2);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.csv-retirer:hover{background:rgba(0,35,21,.06);color:inherit}
.csv-retirer svg{width:15px;height:15px}

.csv-resume{background:rgba(0,35,21,.04);border-radius:9px;padding:16px;margin-bottom:16px}
.csv-resume h3{font-size:.9rem;font-weight:500;margin-bottom:8px}
.csv-resume p{font-size:.86rem;color:var(--gris-2);line-height:1.5}
.csv-resume b{color:var(--encre);font-weight:500}
.csv-resume-cols{margin-top:6px}

.csv-nepas{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px;border:2px solid var(--bord);border-radius:9px;
  background:rgba(0,35,21,.02);margin-bottom:16px
}
.csv-nepas-g{display:flex;align-items:flex-start;gap:12px}
.csv-nepas-icone{
  width:36px;height:36px;border-radius:8px;background:rgba(0,35,21,.06);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.csv-nepas-icone svg{width:19px;height:19px}
.csv-nepas label{font-size:.94rem;font-weight:600;cursor:pointer}
.csv-nepas p{font-size:.84rem;color:var(--gris-2);margin-top:3px}

.csv-envoi{display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 0}
.csv-jauge{width:100%;height:8px;border-radius:999px;background:rgba(1,184,89,.15);overflow:hidden}
.csv-jauge span{display:block;height:100%;background:var(--vert);width:0;
  border-radius:999px;transition:width .2s linear}
.csv-envoi p{font-size:.86rem;color:var(--gris-2)}

.csv-fini{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 0}
/* Pas de pastille derriere : la coche cerclee se suffit, comme la maquette. */
.csv-fini-rond{display:flex;color:var(--vert);margin-bottom:16px}
.csv-fini-rond svg{width:64px;height:64px}
.csv-fini h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.csv-fini p{font-size:.9rem;color:var(--gris-2)}
.csv-fini-btns{margin-top:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;justify-content:center}
.csv-fini-btns .btn-plein,.csv-fini-btns .btn-second{width:auto;padding:0 20px;height:38px}
.csv-pied[hidden]{display:none !important}

/* Pages de formulaire : le contenu se borne et se centre, sinon les champs
   s'etirent sur toute la largeur de l'ecran. */
.main-borne > *{max-width:896px;margin-left:auto;margin-right:auto}

/* Liste d'exclusion active : la carte vire au rouge, parce que le geste
   n'est plus le meme. */
.csv-nepas.actif{border-color:rgba(197,34,31,.45);background:rgba(197,34,31,.05)}
.csv-nepas.actif .csv-nepas-icone{background:rgba(197,34,31,.12);color:#c5221f}
.ac-consent[hidden]{display:none !important}

/* ---------- tableau des contacts ---------- */
.ct-boite.pleine{padding:0;display:block}
.ct-defile{overflow-x:auto}
.ct-table{width:100%;border-collapse:collapse}
.ct-table thead tr{background:rgba(0,35,21,.03);border-bottom:1px solid var(--bord)}
.ct-table th{
  height:44px;padding:0 16px;text-align:left;vertical-align:middle;
  font-size:.7rem;font-weight:500;color:var(--gris-2);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap
}
.ct-table td{padding:14px 16px;vertical-align:middle;font-size:.875rem}
.ct-table tbody tr{border-bottom:1px solid rgba(0,35,21,.06);cursor:pointer;transition:background .12s}
.ct-table tbody tr:last-child{border-bottom:0}
.ct-table tbody tr:nth-child(even){background:rgba(0,35,21,.015)}
.ct-table tbody tr:hover{background:rgba(0,35,21,.045)}
.ct-case{width:48px}
.ct-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--vert);cursor:pointer}
.ct-nom{font-weight:500}
.ct-gris{color:var(--gris-2)}
.ct-courriel{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gris-2)}

.ct-badge{
  display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;
  border-radius:6px;font-size:.72rem;font-weight:500;white-space:nowrap;border:1px solid
}
.ct-badge.initial{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.ct-badge.relance{background:#fefce8;color:#a16207;border-color:#fde68a}
.ct-badge.attente{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.ct-badge.avis{background:rgba(1,184,89,.10);color:var(--vert);border-color:rgba(1,184,89,.28)}
.ct-badge.echec{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.ct-nepas-pastille{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa
}
.ct-nepas-pastille svg{width:14px;height:14px}

.ct-menu-btn{
  width:32px;height:32px;border:0;background:none;border-radius:6px;cursor:pointer;
  color:var(--gris-2);display:inline-flex;align-items:center;justify-content:center
}
.ct-menu-btn:hover{background:rgba(0,35,21,.06);color:inherit}
.ct-menu-btn svg{width:16px;height:16px}

.ct-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 0;font-size:.85rem}
.ct-pagination[hidden]{display:none !important}
.ct-parpage{display:flex;align-items:center;gap:8px;color:var(--gris-2)}
.ct-parpage select{
  height:32px;padding:0 8px;font:inherit;font-size:.85rem;border:1px solid var(--bord);
  border-radius:7px;background:#fff;color:inherit;cursor:pointer
}
/* Ni l'anneau noir du navigateur, ni un halo colore : au clavier, la bordure
   fonce, c'est tout. Assez pour savoir ou on est, assez discret pour ne pas
   se voir a l'usage normal. */
.ct-parpage select:focus{outline:none}
.ct-parpage select:focus-visible{outline:none;border-color:var(--encre)}
.ct-nav{display:flex;align-items:center;gap:16px}
.ct-nav > span{color:var(--gris-2)}
.ct-fleches{display:flex;align-items:center;gap:4px}
.ct-fleches button{
  width:32px;height:32px;border:1px solid var(--bord);border-radius:7px;background:#fff;
  cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center
}
.ct-fleches button:hover:not(:disabled){background:rgba(0,35,21,.05)}
.ct-fleches button:disabled{opacity:.4;pointer-events:none}
.ct-fleches button svg{width:15px;height:15px}
.ct-fleches > span{padding:0 8px;min-width:88px;text-align:center}

/* ---------- fiche d'un contact ---------- */
.volet-boite.fiche{width:min(512px,100%)}
.fiche-tete{display:flex;align-items:flex-start;gap:12px;padding:24px 24px 0}
.fiche-avatar{
  width:38px;height:38px;border-radius:50%;background:rgba(0,35,21,.05);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.fiche-avatar svg{width:20px;height:20px}
.fiche-titre{flex:1;min-width:0}
.fiche-titre h2{font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.fiche-titre p{font-size:.84rem;color:var(--gris-2);margin-top:2px}

.fiche-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px;border-bottom:1px solid var(--bord)}
.fiche-btn{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border:1px solid var(--bord);border-radius:7px;background:#fff;
  font:inherit;font-size:.82rem;font-weight:500;color:inherit;cursor:pointer
}
.fiche-btn:hover{background:rgba(0,35,21,.05)}
.fiche-btn svg{width:15px;height:15px;flex-shrink:0}
.fiche-btn.danger{color:#c5221f}
.fiche-btn.danger:hover{background:rgba(197,34,31,.07)}

.fiche-statut{display:flex;align-items:center;gap:10px;padding:12px 24px;
  border-bottom:1px solid var(--bord);font-size:.85rem;color:var(--gris-2)}
.fiche-corps{flex:1;overflow-y:auto;padding:20px 24px 24px}
.fiche-ligne{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.fiche-icone{
  width:34px;height:34px;border-radius:7px;background:rgba(0,35,21,.05);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.fiche-icone svg{width:16px;height:16px}
.fiche-ligne b{display:block;font-size:.85rem;font-weight:500}
/* Ne vise que les span de texte. « .fiche-ligne span » attrapait aussi la
   tuile d'icone, qui est un span : avec sa specificite plus forte il lui
   imposait display:block, l'icone se collait donc en haut a gauche au lieu
   d'etre centree, et la marge de 2px la poussait encore plus bas. */
.fiche-ligne-t span{display:block;font-size:.85rem;color:var(--gris-2);margin-top:2px}

.fiche-etat{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:9px;
  font-size:.85rem;font-weight:500;margin-top:20px}
.fiche-etat.pret{background:rgba(1,184,89,.07);border:1px solid rgba(1,184,89,.25);color:var(--vert)}
.fiche-etat.bloque{background:#fff7ed;border:1px solid #fed7aa;color:#c2410c}
.fiche-etat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}

.fiche-trait{border:0;border-top:1px solid var(--bord);margin:20px 0}
.fiche-corps h4{font-size:.9rem;font-weight:600;margin-bottom:14px}
.fiche-histo{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 0}
.fiche-histo-rond{
  width:44px;height:44px;border-radius:50%;background:rgba(0,35,21,.05);color:var(--gris-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px
}
.fiche-histo-rond svg{width:22px;height:22px}
.fiche-histo p{font-size:.85rem;color:var(--gris-2)}

/* ---------- fiche : crayon, canal, onglets d'historique ---------- */
.fiche-nom-l{display:flex;align-items:center;gap:8px;min-width:0}
.fiche-nom-l h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fiche-crayon{
  width:28px;height:28px;flex-shrink:0;border:0;background:none;border-radius:6px;
  cursor:pointer;color:inherit;opacity:.5;
  display:inline-flex;align-items:center;justify-content:center
}
.fiche-crayon:hover{opacity:1;background:rgba(0,35,21,.06)}
.fiche-crayon svg{width:14px;height:14px}

/* Les libelles francais sont plus longs qu'en anglais : on resserre pour que
   les trois actions tiennent sur une ligne. */
.fiche-actions{gap:6px}
.fiche-btn{gap:6px;padding:0 10px;font-size:.8rem}

.fiche-ligne-t{flex:1;min-width:0}
.fiche-prochaine{font-size:.76rem;color:var(--gris-2);margin-top:4px}
.fiche-prochaine[hidden]{display:none !important}
#fiche-badge-tel:empty{display:none}

.fiche-onglets{max-width:none;margin-bottom:16px}
.fiche-onglets button[aria-selected=false][disabled]{opacity:.5;cursor:default}

/* ============================================================
   Planification des envois
   ============================================================ */
/* wrap : le bouton ne retrecit pas, sans quoi le texte est ecrase sur
   mobile. Trop etroit pour les deux, le bouton passe dessous. */
.pl-etat{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:16px}
.pl-etat-rond{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:var(--vert-pale);color:var(--vert)
}

/* En pause : la carte entiere passe a l'ambre et le bouton devient plein,
   pour que la reprise soit l'action evidente. */
.pl-etat.arrete{border-color:rgba(245,158,11,.3);background:#fffbeb}
.pl-etat.arrete .pl-etat-rond{background:rgba(245,158,11,.2);color:#d97706}
.pl-etat.arrete .pl-etat-t b{color:#92400e;font-weight:600}
.pl-etat.arrete .pl-etat-t span{color:rgba(180,83,9,.85)}
.pl-etat.arrete .pl-etat-btn{background:var(--vert);border-color:var(--vert);color:#fff}
.pl-etat.arrete .pl-etat-btn:hover{background:#019e4c;border-color:#019e4c}
.pl-etat-rond svg{width:18px;height:18px}
.pl-etat-t{display:flex;flex-direction:column;min-width:0;flex:1 1 190px}
.pl-etat-t b{font-weight:500}
.pl-etat-t span{font-size:.9rem;color:var(--gris)}
.pl-etat-btn{flex:0 0 auto;gap:8px}
.pl-etat-btn svg{width:14px;height:14px}

.pl-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}
@media(min-width:1100px){.pl-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-cols .carte{padding:24px}

.pl-titre{
  position:relative;display:inline-block;
  font-size:1.7rem;font-weight:700;letter-spacing:-.02em
}
.pl-trait{position:absolute;left:0;bottom:-3px;width:100%;height:6px;color:var(--vert)}
.pl-sous{margin-top:10px;color:var(--gris)}

.pl-valeur{
  margin:26px 0 18px;text-align:center;
  font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--vert)
}

/* Un input range ne colore pas sa piste tout seul : la portion remplie
   est un degrade dont la largeur suit --rempli, pose par le script. */
.pl-glissiere{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:16px;background:transparent;cursor:pointer
}
.pl-glissiere::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:
    linear-gradient(var(--vert),var(--vert)) left/var(--rempli,0%) 100% no-repeat,
    var(--tuile)
}
.pl-glissiere::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-5px;border-radius:50%;
  background:#fff;border:1px solid var(--vert);box-shadow:0 1px 2px rgba(0,0,0,.14)
}
.pl-glissiere::-moz-range-track{height:6px;border-radius:999px;background:var(--tuile)}
.pl-glissiere::-moz-range-progress{height:6px;border-radius:999px;background:var(--vert)}
.pl-glissiere::-moz-range-thumb{
  width:16px;height:16px;border:1px solid var(--vert);border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14)
}
.pl-glissiere:focus-visible{outline:none}
.pl-glissiere:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(1,184,89,.2)}
.pl-glissiere:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(1,184,89,.2)}

.pl-notes{margin-top:26px;background:var(--tuile);border-radius:10px;padding:16px}
.pl-notes-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pl-notes-h svg{width:20px;height:20px;flex:0 0 20px;color:var(--vert)}
.pl-notes-h h3{font-size:.95rem;font-weight:600}
.pl-notes ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.pl-notes li{color:var(--gris);font-size:.92rem}
.pl-notes li b{color:var(--encre);font-weight:600}
.pl-courriel{color:var(--vert);font-weight:600}

/* ============================================================
   Messagerie
   ============================================================ */
.msg-entete{margin-bottom:22px}
.msg-entete h1,.msg-h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.msg-entete p{color:var(--gris);margin-top:4px}

/* Deux colonnes egales dans une largeur bornee : sinon la colonne des
   reglages s'etire sur 700 px et les onglets partent en longueur. */
.msg-entete,.msg-cols,.msg-trait{max-width:1152px;margin-left:auto;margin-right:auto}
.msg-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:1000px){.msg-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.msg-reglages{display:flex;flex-direction:column;gap:18px;min-width:0}
.msg-apercu{display:flex;flex-direction:column;align-items:center;gap:14px}
@media(min-width:1000px){.msg-apercu{position:sticky;top:16px;align-self:start}}

/* --- telephone d'apercu --- */
.msg-tel{
  position:relative;width:280px;height:560px;flex:none;
  background:#000;border-radius:40px;padding:11px;box-shadow:0 18px 40px -18px rgba(0,35,21,.5)
}
/* Ile dynamique plutot qu'encoche : une pastille detachee du bord haut,
   arrondie sur ses quatre cotes. Les proportions sont celles d'un
   iPhone recent ramenees a la largeur de l'ecran ici (258 px) :
   125/393 de large, 36/393 de haut, 11/393 sous le bord. */
.msg-encoche{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:82px;height:24px;background:#000;border-radius:999px;z-index:2
}
.msg-ecran{
  width:100%;height:100%;background:#f2f2f7;border-radius:31px;overflow:hidden;
  display:flex;flex-direction:column
}
.msg-barre{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px 6px;font-size:12px;font-weight:600;color:#111
}
.msg-pile{
  width:22px;height:11px;border:1px solid #333;border-radius:3px;position:relative
}
.msg-pile::before{content:"";position:absolute;inset:1.5px;background:#333;border-radius:1px}
.msg-pile::after{
  content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;
  background:#333;border-radius:0 2px 2px 0
}
.msg-fil{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}

.msg-sortant,.msg-entrant{display:flex;flex-direction:column;gap:3px;max-width:88%}
.msg-sortant{align-self:flex-end;align-items:flex-end}
.msg-entrant{align-self:flex-start;align-items:flex-start}
.msg-bulle{
  padding:8px 12px;border-radius:18px;font-size:13px;line-height:1.5;
  background:#e9e9eb;color:#111;word-break:break-word
}
.msg-sortant .msg-bulle{background:#0b93f6;color:#fff;border-bottom-right-radius:5px}
.msg-entrant .msg-bulle{border-bottom-left-radius:5px}
.msg-heure{font-size:10px;color:#8e8e93;padding:0 4px}

/* container-type : le prenom se mesure en pourcentage de la largeur de
   la photo, donc il garde ses proportions quelle que soit la taille
   d'affichage. */
.msg-photo{
  align-self:flex-end;position:relative;margin:0;
  /* largeur explicite : avec container-type la boite ne peut plus se
     dimensionner sur son contenu, et align-self:flex-end la ferait tomber
     a zero. */
  width:78%;container-type:inline-size
}
.msg-photo img{display:block;width:100%;border-radius:16px}
/* Le prenom est ecrit sur le carton, pas pose dans une etiquette. La
   vraie ecriture vient de app/renderer.py : Ink Free, lettre par lettre,
   avec tremblement et fondu en multiplication.

   Sa position vient d'app/detection.py, qui trouve le carton dans la
   photo. Le navigateur ne peut lancer ni l'un ni l'autre : le centre de
   la photo n'est presque jamais le centre du carton, alors on laisse le
   proprietaire deplacer le prenom. Ce qu'il pose ici est exactement le
   `center` que le rendu attend. */
.msg-photo figcaption{
  position:absolute;left:var(--x,50%);top:var(--y,60%);
  transform:translate(-50%,-50%) rotate(-2.5deg);
  font-family:Caveat,'Segoe Script','Bradley Hand',cursive;
  font-size:20px;font-weight:700;line-height:1.05;text-align:center;color:#1c223c;
  white-space:nowrap;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none
}
.msg-photo figcaption:active{cursor:grabbing}
.msg-photo.reglage figcaption{outline:2px dashed rgba(1,184,89,.7);outline-offset:6px}
.msg-photo-aide{font-size:12px;color:var(--gris);line-height:1.5}

/* Prenom d'essai : sert uniquement a voir le message et la photo avec
   un vrai prenom. Ce n'est pas un reglage du produit. */
.msg-nom-essai{display:flex;flex-direction:column;gap:5px;width:100%;max-width:280px}
.msg-nom-essai label{font-size:12px;color:var(--gris)}
.msg-nom-essai input{
  width:100%;height:34px;padding:0 11px;
  border:1px solid var(--bord);border-radius:8px;background:#fff;
  font:inherit;font-size:.9rem;color:var(--encre)
}
.msg-nom-essai input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.18)}
.msg-essai{gap:8px;height:38px;padding:0 16px}
.msg-essai svg{width:15px;height:15px}
.msg-essai:disabled{opacity:.5;cursor:not-allowed}
.msg-note{font-size:12px;color:var(--gris);text-align:center;max-width:280px;line-height:1.5}

/* --- bandeau de mode --- */
.msg-mode{display:flex;align-items:flex-start;gap:12px;background:var(--vert-pale);border-color:rgba(1,184,89,.28)}
.msg-mode-ic{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;border-radius:8px;background:#fff;color:var(--vert)
}
.msg-mode-ic svg{width:18px;height:18px}
.msg-mode-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-mode-sur{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.msg-mode-t b{font-weight:600}
.msg-mode-t span{font-size:.9rem;color:var(--gris)}
.msg-badge{
  flex:0 0 auto;background:var(--vert);color:#fff;border-radius:6px;
  padding:3px 9px;font-size:12px;font-weight:600
}

/* --- onglets --- */
.msg-onglets{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--tuile);border-radius:9px;padding:3px}
.msg-onglet{
  border-radius:7px;padding:7px 10px;font:inherit;font-size:.9rem;font-weight:500;
  color:var(--gris);cursor:pointer
}
.msg-onglet.on{background:#fff;color:var(--encre);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.msg-h2{font-size:1rem;font-weight:600}
.msg-desc{color:var(--gris);font-size:.9rem;margin-top:4px}

.msg-encart{background:var(--tuile);border-radius:10px;padding:14px 16px;margin:18px 0}
.msg-encart-t{font-size:.9rem;font-weight:600;margin-bottom:8px}
.msg-encart ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.msg-encart li{font-size:.88rem;color:var(--gris);line-height:1.5}

/* --- variables du message --- */
.msg-vars{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.msg-var{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--bord);border-radius:8px;background:#fff;
  padding:6px 11px;font:inherit;font-size:.82rem;font-weight:500;
  color:var(--encre);cursor:pointer
}
.msg-var:hover{border-color:var(--vert);background:rgba(1,184,89,.06)}
.msg-oblig{background:var(--vert-actif);color:var(--vert);border-radius:5px;padding:1px 6px;font-size:11px}

.msg-cols textarea{
  display:block;width:100%;margin-top:4px;padding:10px 12px;resize:vertical;
  border:1px solid var(--bord);border-radius:8px;background:transparent;
  font:inherit;font-size:.92rem;line-height:1.55;color:var(--encre)
}
.msg-cols textarea:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.18)}

.msg-compte{font-size:.82rem;color:var(--gris);margin-top:8px;line-height:1.5}
.msg-compte.cher{color:#92400e}
.msg-err{
  font-size:.86rem;color:#b42318;background:#fef3f2;border:1px solid #fecdc9;
  border-radius:8px;padding:9px 12px;margin-top:10px
}
.msg-enr{margin-top:16px}
.msg-enr:disabled{opacity:.5;cursor:not-allowed}

/* --- bascules --- */
.msg-bascule-carte,.msg-photo-carte{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.msg-bascule-t{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.msg-bascule-t b{font-weight:600}
.msg-bascule-t span{font-size:.88rem;color:var(--gris);line-height:1.5}

.msg-photo-zone{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px}
.msg-photo-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:220px;aspect-ratio:1;border:2px dashed var(--bord);border-radius:10px;
  color:var(--gris)
}
.msg-photo-vide svg{width:26px;height:26px}
.msg-photo-vide p{font-size:.85rem}
#msg-photo-img{display:block;max-width:220px;border-radius:10px;border:1px solid var(--bord)}

.msg-trait{border:0;border-top:1px solid var(--bord);margin:40px 0 28px}

.msg-liste{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.msg-liste li{display:flex;align-items:flex-start;gap:12px}
.msg-li-ic{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 30px;border-radius:7px;background:var(--tuile);color:var(--gris)
}
.msg-li-ic svg{width:15px;height:15px}
.msg-liste b{display:block;font-size:.92rem;font-weight:600;margin-bottom:2px}
.msg-liste span span,.msg-liste li > span:last-child{font-size:.88rem;color:var(--gris);line-height:1.5}
.msg-liste a{color:var(--vert);font-weight:600;text-decoration:underline}

/* --- relances : l'explication ne s'affiche que si elles sont actives --- */
.msg-relance-ic{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  background:var(--vert-actif);color:var(--vert)
}
.msg-relance-ic svg{width:17px;height:17px}
.msg-relance-note{
  flex:1 1 100%;display:flex;align-items:flex-start;gap:11px;
  margin-top:4px;padding:13px 15px;border-radius:10px;
  background:var(--vert-pale);border:1px solid rgba(1,184,89,.28)
}
.msg-relance-note[hidden]{display:none}
.msg-relance-note svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--vert)}
.msg-relance-note b{display:block;font-size:.9rem;font-weight:600;color:#14532d}
.msg-relance-note span{display:block;font-size:.88rem;line-height:1.5;color:#166534;margin-top:2px}

/* ============ AVIS ============
   La collecte demarre a l'ouverture du compte : la page ne demande donc
   jamais d'activer quoi que ce soit, elle dit seulement qu'il n'y a rien
   a montrer encore. */
.av-tete{margin-bottom:24px}
.av-tete h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
.av-tete p{margin-top:4px;color:var(--gris-2)}

.av-ia-tete{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.av-ia-rond{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:8px;background:rgba(1,184,89,.10);color:var(--vert)
}
.av-ia-rond svg{width:20px;height:20px}
.av-ia-tete h2{font-size:15px;font-weight:600}
.av-ia-tete p{font-size:13px;color:var(--gris-2)}

.av-reglage{display:flex;align-items:center;justify-content:space-between;gap:16px}
.av-reglage + .av-reglage{margin-top:18px;padding-top:18px;border-top:1px solid var(--bord)}
.av-reglage-t{min-width:0}
.av-reglage-t label{display:block;font-size:14px;font-weight:500}
.av-reglage-t p{margin-top:2px;font-size:12px;color:var(--gris-2)}
.av-champ{margin-top:8px;margin-bottom:0}
.av-reglage-bas{display:block}
.av-reglage-bas + .av-champ{margin-top:8px}

.av-note-neg{
  margin-top:18px;padding:12px 14px;border-radius:8px;
  background:rgba(1,184,89,.07);font-size:13px;color:var(--encre)
}

.av-barre{margin-top:24px}
.av-cherche{position:relative}
.av-cherche svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gris-2);pointer-events:none
}
.av-cherche input{
  width:100%;height:38px;padding:0 12px 0 36px;
  border:1px solid var(--bord);border-radius:8px;background:transparent;
  font:inherit;font-size:14px;color:var(--encre)
}
.av-cherche input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.5)}

.av-filtres{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px
}
.av-notes{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:9px;background:var(--fond-2,rgba(0,0,0,.04))}
.av-note{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;
  border:0;border-radius:6px;background:transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--encre)
}
.av-note:hover{background:rgba(0,0,0,.05)}
.av-note.on{background:var(--carte);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.av-note svg{width:13px;height:13px;color:#f5b301}
.av-compte{font-size:13px;color:var(--gris-2)}

.av-vide{margin-top:24px;display:flex;flex-direction:column;align-items:center;
  padding:80px 24px;text-align:center}
.av-vide-rond{
  display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;
  border-radius:50%;background:rgba(0,0,0,.05);color:var(--gris-2)
}
.av-vide-rond svg{width:32px;height:32px}
.av-vide b{margin-bottom:4px;font-size:18px;font-weight:500;color:var(--gris-2)}
.av-vide p{max-width:384px;font-size:14px;line-height:1.5;color:var(--gris-2)}

/* ============ WIDGETS ============
   Un editeur, trois formats. Les onglets remplacent les trois blocs
   empiles de la reference : l'apercu reste sous les yeux pendant qu'on
   regle les couleurs, au lieu d'etre a deux ecrans de defilement. */
.wg-onglets{
  display:flex;gap:4px;margin-bottom:20px;padding:4px;
  border-radius:11px;background:rgba(0,0,0,.04)
}
.wg-onglet{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:14px;font-weight:500;color:var(--gris-2);cursor:pointer;
  transition:background .15s,color .15s
}
.wg-onglet svg{width:17px;height:17px;flex:none}
.wg-onglet span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-onglet:hover{color:var(--encre)}
.wg-onglet.on{background:var(--carte);color:var(--encre);box-shadow:0 1px 3px rgba(0,0,0,.1)}
@media(max-width:560px){
  .wg-onglet span{display:none}
  .wg-onglet{flex:1}
}

.wg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.wg-h h2{font-size:16px;font-weight:600}
.wg-h p{margin-top:2px;font-size:13px;color:var(--gris-2)}
.wg-etiquette{
  flex:none;padding:3px 10px;border-radius:999px;
  background:rgba(1,184,89,.10);color:var(--vert);font-size:12px;font-weight:600
}
.wg-carte{overflow:hidden}
.wg-exemple{margin-top:12px;font-size:12px;color:var(--gris-2);text-align:center}

/* La scene imite une page web, pour que l'apercu se lise comme un rendu
   plutot que comme un formulaire de plus. */
.wg-scene{
  position:relative;display:grid;place-items:center;padding:28px;
  min-height:230px;border-radius:10px;
  background:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px) 0 0/100% 28px,
    repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 8px,transparent 8px 16px),
    var(--fond)
}
.wg-scene-fenetre{align-items:end;justify-items:stretch}

.wg-etoiles{display:inline-flex;gap:1px}
.wg-etoiles svg{width:14px;height:14px}
.wg-marque{display:block;margin-top:8px;font-size:11px;color:rgba(0,0,0,.42)}
.wg-marque b{font-weight:600}

/* fenetre surgissante */
/* La bulle se taille sur son contenu : « Sophie T. » n'a pas besoin de la
   meme largeur que « Jean-François B. ». Le plancher evite qu'un nom court
   la reduise a une pastille, le plafond declenche la coupure du titre. */
.wg-bulle{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  width:max-content;min-width:238px;max-width:min(320px,100%);
  padding:15px 18px;border-radius:12px;
  text-align:center;box-shadow:0 8px 26px -8px rgba(0,0,0,.28)
}
.wg-bulle.wg-gauche{justify-self:start}
.wg-bulle.wg-droite{justify-self:end}
.wg-bulle-h{display:flex;align-items:center;gap:10px;text-align:left;max-width:100%}
.wg-bulle-t{min-width:0}
/* Une seule ligne, toujours. « Jean-François B. a laissé un avis » retombait
   sinon sur deux lignes avec « avis » tout seul en dessous, ce qui casse la
   bulle. Un nom trop long se coupe proprement plutot que de replier. */
.wg-bulle-t b{
  display:block;font-size:13.5px;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* Souligner avec text-decoration, pas une bordure : sur un element de bloc
   la bordure prend toute la largeur de la carte et se pose sous la ligne,
   loin du texte. Le soulignement, lui, suit les lettres. */
.wg-lien-avis{
  display:block;margin-top:1px;font-size:12.5px;color:inherit;opacity:.82;
  text-decoration:none
}
.wg-lien-avis b{display:inline;font-weight:700}
.wg-lien-avis:hover{opacity:1;text-decoration:underline;text-underline-offset:2px}
/* Les etoiles portent la bulle : petites, elles se perdent dans un coin
   d'ecran, ou personne ne s'arrete plus d'une seconde. */
.wg-bulle .wg-etoiles svg{width:23px;height:23px}
.wg-g{flex:none;width:28px;height:28px}

/* carrousel */
.wg-ruban{width:100%;padding:18px;border-radius:12px;box-shadow:0 2px 14px -4px rgba(0,0,0,.16)}
.wg-ruban-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(0,0,0,.08);
  font-size:14px
}
.wg-btn{flex:none;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600}
.wg-ruban-nom{display:inline-flex;align-items:center;gap:9px}
.wg-ruban-nom .wg-g{width:20px;height:20px}
.wg-ruban-c{display:flex;align-items:center;gap:14px}
.wg-ruban-c blockquote{flex:1;min-width:0;text-align:center}
.wg-ruban-c p{margin:8px 0 6px;font-size:14px;line-height:1.5}
.wg-ruban-c cite{font-style:normal;font-size:12px;opacity:.62}
.wg-fleche{
  flex:none;display:grid;place-items:center;width:28px;height:28px;
  border:0;border-radius:50%;background:rgba(0,0,0,.05);color:inherit;
  font:inherit;font-size:17px;line-height:1;opacity:.55;cursor:pointer;
  transition:opacity .15s,background .15s
}
.wg-fleche:hover:not(:disabled){opacity:1;background:rgba(0,0,0,.10)}
.wg-fleche:disabled{opacity:.22;cursor:default}
.wg-fleche:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* grille */
.wg-grille{width:100%;padding:18px;border-radius:12px}
.wg-grille-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:760px){.wg-grille-c{grid-template-columns:1fr}}
.wg-grille article{padding:14px;border-radius:10px;box-shadow:0 1px 6px -2px rgba(0,0,0,.18)}
.wg-grille p{margin:8px 0 6px;font-size:13px;line-height:1.5}
.wg-grille cite{font-style:normal;font-size:12px;opacity:.62}

/* panneau de reglages */
.wg-t2{font-size:16px;font-weight:600;margin-bottom:6px}
.wg-sous2{font-size:13px;color:var(--gris-2);margin-bottom:16px}
.wg-groupe + .wg-groupe{margin-top:22px;padding-top:22px;border-top:1px solid var(--bord)}
.wg-groupe h3{
  margin-bottom:12px;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gris-2)
}
.wg-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.wg-reglage{padding:13px 14px;border:1px solid var(--bord);border-radius:10px}
.wg-reglage-large{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px
}
.wg-reglage label,.wg-lab{display:block;font-size:13px;font-weight:500}
.wg-bascule-t p{margin-top:2px;font-size:12px;color:var(--gris-2)}

.wg-couleur{display:flex;align-items:center;gap:9px;margin-top:9px}
.wg-couleur input[type=color]{
  flex:none;width:34px;height:34px;padding:0;border:1px solid var(--bord);
  border-radius:7px;background:none;cursor:pointer
}
.wg-couleur input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.wg-couleur input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.wg-hex{
  flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--bord);
  border-radius:7px;background:transparent;color:var(--encre);
  font:inherit;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}
.wg-hex:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.35)}

.wg-segments{display:flex;gap:4px;margin-top:9px;padding:3px;border-radius:9px;background:rgba(0,0,0,.04)}
.wg-segment{
  flex:1;height:32px;border:0;border-radius:6px;background:transparent;
  font:inherit;font-size:13px;font-weight:500;color:var(--gris-2);cursor:pointer
}
.wg-segment.on{background:var(--carte);color:var(--encre);box-shadow:0 1px 2px rgba(0,0,0,.09)}

.wg-pied{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--bord)
}
.wg-pied-d{display:flex;gap:10px}
.wg-pied .btn-second,.wg-pied .btn-plein{width:auto;padding:0 18px;height:38px}
.wg-pied .btn-second svg{width:15px;height:15px;margin-right:7px}
.wg-champ{max-width:420px}
.wg-etat{margin-top:12px;font-size:13px;color:var(--gris-2)}
#wg-envoyer{width:auto;padding:0 20px;height:38px}
#wg-envoyer:disabled{opacity:.5;cursor:not-allowed}

/* guide d'installation */
.wg-voile{position:fixed;inset:0;z-index:60;background:rgba(0,20,12,.42)}
.wg-modale{
  position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,calc(100vw - 32px));max-height:min(86vh,760px);
  display:flex;flex-direction:column;
  background:var(--carte);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,20,12,.5)
}
.wg-modale[hidden],.wg-voile[hidden]{display:none}
.wg-modale:focus{outline:none}
.wg-modale-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--bord)
}
.wg-modale-h h2{font-size:16px;font-weight:600}
.wg-fermer{
  display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:7px;
  background:transparent;color:var(--gris-2);cursor:pointer
}
.wg-fermer:hover{background:rgba(0,0,0,.05);color:var(--encre)}
.wg-fermer svg{width:17px;height:17px}
.wg-modale-c{padding:20px;overflow-y:auto}
.wg-intro{margin-bottom:22px;font-size:14px;color:var(--gris-2)}
.wg-etapes{list-style:none;counter-reset:etape;display:flex;flex-direction:column;gap:18px}
.wg-etapes > li{position:relative;padding-left:38px}
.wg-etapes > li[hidden]{display:none}
.wg-etapes > li::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;left:0;top:0;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--vert);color:#fff;font-size:13px;font-weight:600
}
.wg-etapes b{display:block;font-size:14px;font-weight:600}
.wg-etapes > li > p{margin:4px 0 12px;font-size:13px;line-height:1.5;color:var(--gris-2)}
.wg-etapes code{
  padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.06);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px
}
/* Le bouton Copier vivait par-dessus le code et mordait la premiere ligne.
   Il a maintenant sa barre, qui sert aussi a dire de quoi il s'agit. */
.wg-code{border-radius:10px;background:#0d1f18;overflow:hidden}
.wg-code-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 8px 7px 14px;background:rgba(255,255,255,.05)
}
.wg-code-h span{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(214,245,228,.55)
}
.wg-code pre{
  margin:0;padding:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.75;
  color:#cfe8dc;white-space:pre-wrap;
  /* anywhere plutot que break-all : la coupure se fait d'abord aux endroits
     naturels de l'URL, au lieu de trancher au milieu d'un mot. */
  overflow-wrap:anywhere;word-break:normal
}
.wg-code i{font-style:normal}
.wg-code .c-t{color:#7ee2a8}   /* balise */
.wg-code .c-a{color:#e8c37a}   /* attribut */
.wg-code .c-s{color:#9dd0ff}   /* valeur */
.wg-copier{
  flex:none;height:28px;padding:0 13px;border:0;border-radius:6px;
  background:var(--vert);color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer
}
.wg-copier:hover{background:#019e4c}
.wg-copier:focus-visible{outline:2px solid #7ee2a8;outline-offset:2px}
.wg-aide{margin-top:20px;padding:14px 16px;border-radius:10px;background:rgba(1,184,89,.07)}
.wg-aide b{font-size:13px;font-weight:600}
.wg-aide p{margin-top:5px;font-size:13px;line-height:1.55;color:var(--gris-2)}
.wg-marque a{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.wg-marque a:hover{color:var(--vert);border-color:var(--vert)}
.wg-lien-mort{cursor:default}
.wg-lien-mort:hover{opacity:.82;text-decoration:none}

/* Duree entre deux avis de la bulle. */
.wg-duree-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px;width:190px}
.wg-duree-r output{font-size:13px;font-weight:600;color:var(--vert)}
.wg-duree-r input[type=range]{
  width:100%;height:4px;-webkit-appearance:none;appearance:none;
  border-radius:999px;background:var(--bord);cursor:pointer
}
.wg-duree-r input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--vert);border:2px solid var(--carte);box-shadow:0 1px 3px rgba(0,0,0,.3)
}
.wg-duree-r input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--vert);
  border:2px solid var(--carte);box-shadow:0 1px 3px rgba(0,0,0,.3)
}
.wg-duree-r input[type=range]:focus{outline:0}
.wg-duree-r input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(1,184,89,.45)}
@media(max-width:620px){
  .wg-duree{flex-direction:column;align-items:stretch}
  .wg-duree-r{width:auto;align-items:stretch}
  .wg-duree-r output{text-align:left}
}

/* Va-et-vient de la bulle entre deux avis.
   Deux animations plutot que des transitions : la bulle est refaite a chaque
   tour, et une transition posee sur un element tout neuf n'a pas d'etat de
   depart a quitter, donc elle saute. Une animation, elle, joue toujours. */
.wg-bulle.wg-sort{animation:wg-sort .24s ease both}
.wg-bulle.wg-entre{animation:wg-entre .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes wg-sort{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(8px) scale(.97)}
}
@keyframes wg-entre{
  from{opacity:0;transform:translateY(-8px) scale(.97)}
  to{opacity:1;transform:none}
}
/* Qui a demande moins de mouvement voit quand meme l'avis changer : on garde
   le fondu, on retire le deplacement. */
@media(prefers-reduced-motion:reduce){
  @keyframes wg-sort{from{opacity:1}to{opacity:0}}
  @keyframes wg-entre{from{opacity:0}to{opacity:1}}
  .wg-bulle.wg-sort{animation-duration:.12s}
  .wg-bulle.wg-entre{animation-duration:.12s}
}

/* Barre d'actions groupees des contacts. */
.ct-lot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:12px;padding:10px 14px;border-radius:9px;
  background:rgba(1,184,89,.07);border:1px solid rgba(1,184,89,.18)
}
.ct-lot[hidden]{display:none !important}
.ct-lot-n{font-size:.86rem;font-weight:600;color:var(--encre)}
.ct-lot-btn{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px solid var(--bord);border-radius:7px;background:var(--carte);
  font:inherit;font-size:.85rem;font-weight:500;color:var(--encre);cursor:pointer
}
.ct-lot-btn svg{width:15px;height:15px}
.ct-lot-btn:hover{border-color:var(--gris-2)}
.ct-lot-sup{color:#c5221f}
.ct-lot-sup:hover{border-color:rgba(197,34,31,.45);background:rgba(197,34,31,.05)}
.ct-lot-vider{
  margin-left:auto;border:0;background:none;font:inherit;font-size:.85rem;
  color:var(--gris-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px
}
.ct-lot-vider:hover{color:var(--encre)}
@media(max-width:560px){
  .ct-lot-vider{margin-left:0}
}

/* Glissement du carrousel. Le sens suit la fleche cliquee : la citation part
   du cote ou l'on va, la suivante arrive de l'autre. */
.wg-ruban-c blockquote.wg-part-g{animation:wg-part-g .24s ease both}
.wg-ruban-c blockquote.wg-part-d{animation:wg-part-d .24s ease both}
.wg-ruban-c blockquote.wg-vient-g{animation:wg-vient-g .3s cubic-bezier(.2,.7,.3,1) both}
.wg-ruban-c blockquote.wg-vient-d{animation:wg-vient-d .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes wg-part-g{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-18px)}}
@keyframes wg-part-d{from{opacity:1;transform:none}to{opacity:0;transform:translateX(18px)}}
@keyframes wg-vient-g{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wg-vient-d{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  @keyframes wg-part-g{from{opacity:1}to{opacity:0}}
  @keyframes wg-part-d{from{opacity:1}to{opacity:0}}
  @keyframes wg-vient-g{from{opacity:0}to{opacity:1}}
  @keyframes wg-vient-d{from{opacity:0}to{opacity:1}}
}

/* Depuis quand l'avis a ete laisse. Discret : c'est un reperage, pas le
   contenu. */
.wg-quand{display:block;margin-top:1px;font-size:11.5px;opacity:.62}
.wg-bulle .wg-quand{margin-top:2px}
.wg-ruban-c cite .wg-quand,.wg-grille cite .wg-quand{font-size:11px}

/* ---------- Pastille et fenetre des avis ---------- */
.wg-pastille{
  display:inline-flex;align-items:center;
  border:0;font:inherit;color:inherit;cursor:pointer;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.26);
  transition:transform .15s,box-shadow .15s
}
.wg-pastille:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(0,0,0,.3)}
.wg-pastille-t{display:flex;flex-direction:column;align-items:center;min-width:0}
.wg-pastille-b{display:flex;align-items:center}
.wg-pastille-b b{font-weight:700;line-height:1}
.wg-pastille-n{font-weight:600;opacity:.78;white-space:nowrap}

/* Empilee : le logo au-dessus de la note. Sur une ligne : tout de front,
   pour une pastille qui tient dans la hauteur d'une barre de site. */
.wg-pastille.wg-p-empilee{flex-direction:column}
.wg-pastille.wg-p-ligne{flex-direction:row}
.wg-pastille.wg-p-ligne .wg-pastille-t{align-items:flex-start}

/* Les trois tailles font varier la meme grille de valeurs d'un coup, plutot
   qu'un facteur d'echelle : une transformation rendrait les textes flous et
   les ombres disproportionnees. */
.wg-pastille.wg-p-petite{gap:5px;padding:10px 14px;border-radius:11px}
.wg-pastille.wg-p-petite .wg-g{width:19px;height:19px}
.wg-pastille.wg-p-petite .wg-pastille-b{gap:6px}
.wg-pastille.wg-p-petite .wg-pastille-b b{font-size:17px}
.wg-pastille.wg-p-petite .wg-etoiles svg{width:14px;height:14px}
.wg-pastille.wg-p-petite .wg-pastille-n{font-size:11px}

.wg-pastille.wg-p-moyenne{gap:7px;padding:16px 22px;border-radius:14px}
.wg-pastille.wg-p-moyenne .wg-g{width:26px;height:26px}
.wg-pastille.wg-p-moyenne .wg-pastille-b{gap:8px}
.wg-pastille.wg-p-moyenne .wg-pastille-b b{font-size:23px}
.wg-pastille.wg-p-moyenne .wg-etoiles svg{width:19px;height:19px}
.wg-pastille.wg-p-moyenne .wg-pastille-n{font-size:12.5px}

.wg-pastille.wg-p-grande{gap:10px;padding:21px 28px;border-radius:17px}
.wg-pastille.wg-p-grande .wg-g{width:33px;height:33px}
.wg-pastille.wg-p-grande .wg-pastille-b{gap:10px}
.wg-pastille.wg-p-grande .wg-pastille-b b{font-size:30px}
.wg-pastille.wg-p-grande .wg-etoiles svg{width:25px;height:25px}
.wg-pastille.wg-p-grande .wg-pastille-n{font-size:14px}

/* Sur une ligne, l'ecart entre le logo et le texte remplace l'ecart vertical. */
.wg-pastille.wg-p-ligne.wg-p-petite{gap:9px}
.wg-pastille.wg-p-ligne.wg-p-moyenne{gap:12px}
.wg-pastille.wg-p-ligne.wg-p-grande{gap:15px}

/* La scene devient une fenetre de navigateur : le faux site defile a
   l'interieur, la pastille est posee sur le cadre et ne bouge donc pas. Un
   simple coin fixe ne montrait pas ce comportement, qui est tout l'interet
   du reglage. */
/* Selecteur double pour passer devant la grille de .wg-scene sans discussion
   de specificite : en grille, le faux site etait dimensionne a son contenu et
   se reduisait a la largeur de ses marges. */
.wg-scene.wg-scene-coin{
  position:relative;display:block;overflow:hidden;
  height:270px;min-height:0;padding:0
}
.wg-faux{width:100%;height:100%;overflow-y:auto;padding:20px 22px}
/* La barre de defilement du faux site reste cachee : c'est un decor, pas un
   element avec lequel on interagit. */
.wg-faux{scrollbar-width:none}
.wg-faux::-webkit-scrollbar{width:0;height:0}
.wg-faux span{display:block;border-radius:4px;background:rgba(0,0,0,.13)}
.wg-faux-l{height:9px;margin-bottom:11px}
.wg-faux-t{width:52%;height:15px;margin:22px 0 15px;background:rgba(0,0,0,.22)}
.wg-faux span:first-child{margin-top:0}
.wg-scene-coin .wg-pastille{position:absolute;z-index:2;bottom:18px;right:18px}
.wg-scene-coin.wg-coin-bas-gauche .wg-pastille{right:auto;left:18px}

.wg-liste-voile{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.5);animation:wg-voile .2s ease both
}
@keyframes wg-voile{from{opacity:0}to{opacity:1}}
.wg-liste{
  width:min(680px,100%);max-height:min(86vh,820px);
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55);
  animation:wg-liste-entre .26s cubic-bezier(.2,.7,.3,1) both
}
@keyframes wg-liste-entre{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.wg-liste:focus{outline:none}

/* En-tete centre, comme la reference. Le bouton de fermeture est en position
   absolue, donc il ne compte pas dans le centrage : la note reste au milieu
   de la fenetre et non decalee vers la gauche. */
.wg-liste-h{
  display:flex;align-items:center;justify-content:center;gap:11px;flex:none;
  padding:24px 26px;border-bottom:1px solid rgba(0,0,0,.09)
}
.wg-liste-h .wg-g{width:26px;height:26px}
.wg-liste-h b{font-size:27px;font-weight:700;line-height:1}
/* 23px : rapport de 1,15 avec le texte de 20px, contre 1,18 dans la
   reference. A 25 elles depassaient trop la ligne du mot et du chiffre. */
.wg-liste-h .wg-etoiles svg{width:23px;height:23px}
/* line-height a 1 : sinon la boite du texte est plus haute que les lettres et
   « align-items:center » centre la boite, pas ce qu'on voit. */
/* Deux corrections optiques, pas geometriques.
   Horizontal : la marge negative rattrape le vide que la case de l'etoile
   laisse a droite de son trace, pour un ecart reel de 5px.
   Vertical : une etoile a cinq branches porte sa masse sous le centre de sa
   boite, le haut n'etant qu'une pointe. Aligner sur le centre exact fait
   paraitre le compte trop haut, d'ou le pixel de descente. */
.wg-liste-n{
  font-size:13px;opacity:.45;line-height:1;align-self:center;
  margin-left:-7px;transform:translateY(1px)
}
/* Le glyphe seul, sans cercle ni fond. La couleur suit celle du texte choisi
   par le proprietaire, donc il reste lisible sur une fenetre sombre. La zone
   cliquable garde ses 36px : c'est le minimum confortable au doigt, meme si
   le dessin n'en occupe que 15. */
.wg-liste-x{
  position:absolute;top:13px;right:13px;z-index:3;
  display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;
  background:transparent;color:inherit;opacity:.5;cursor:pointer;
  transition:opacity .15s
}
.wg-liste-x:hover{opacity:1}
.wg-liste-x svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.wg-liste-x{transition:none}}
.wg-liste{position:relative}
/* Meme reserve des deux cotes : sinon le contenu centre glisse vers la
   gauche de la moitie de la largeur du bouton. */
.wg-liste-h{padding-left:64px;padding-right:64px}
@media(max-width:560px){.wg-liste-h{padding-left:20px;padding-right:56px;justify-content:flex-start}}
.wg-av-t{min-width:0}

.wg-liste-c{list-style:none;margin:0;padding:0 26px;overflow-y:auto;flex:1}
.wg-liste-c > li{padding:24px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.wg-liste-c > li:last-child{border-bottom:0}
.wg-av-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.wg-av-qui{
  display:inline-flex;align-items:center;gap:10px;min-width:0;
  color:inherit;text-decoration:none
}
a.wg-av-qui:hover .wg-av-nom{text-decoration:underline;text-underline-offset:2px}
.wg-av-photo{position:relative;flex:none;width:44px;height:44px}
.wg-av-photo img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.wg-av-init{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#5b6b7a;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em
}
/* Le petit G dit d'ou vient l'avis. En bas a GAUCHE, debordant du cadre,
   comme la reference : a droite il se cognait contre le nom. L'anneau blanc
   suffit a le detacher, un contour de couleur le rendait criard. */
.wg-av-g{
  position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;background:#fff;
  /* En bas a DROITE de l'avatar. Anneau blanc plutot qu'une ombre : la
     pastille chevauche le coin, et c'est le lisere blanc qui la detache d'une
     photo, pas une ombre portee qui la ferait flotter a cote. */
  box-shadow:0 0 0 2px #fff
}
.wg-av-g .wg-g{width:16px;height:16px}
.wg-av-nom{font-size:16.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* width:fit-content, sinon la boite du bloc prend toute la largeur de la
   colonne : l'infobulle se declenchait a cote du texte et se centrait sur la
   rangee entiere au lieu de la date. */
.wg-av-quand{
  display:block;width:fit-content;margin-top:1px;
  font-size:13px;opacity:.5;white-space:nowrap
}
.wg-liste-c .wg-etoiles svg{width:19px;height:19px}
.wg-av-txt{margin-top:11px;font-size:15.5px;line-height:1.55}
.wg-av-coupe{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden
}
.wg-av-plus{
  margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:15px;
  color:inherit;opacity:.7;cursor:pointer;text-decoration:underline;text-underline-offset:2px
}
.wg-av-plus:hover{opacity:1}

.wg-av-rep{margin-top:16px;padding:16px 18px;border-radius:10px;background:rgba(0,0,0,.045)}
.wg-av-rep-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.wg-av-rep-h b{font-size:15px;font-weight:700}
.wg-av-tag{
  padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.09);
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.7
}
.wg-av-rep p{margin-top:6px;font-size:13.5px;line-height:1.55;opacity:.88}

@media(max-width:560px){
  .wg-liste-voile{padding:0;place-items:end stretch}
  .wg-liste{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .wg-liste{animation-duration:.12s}
  .wg-pastille{transition:none}
}

/* En-tete de liste : mot-symbole Google, coche de verification, avatar de
   reponse. Reprend la disposition de la reference. */
/* Le rapport largeur du mot sur largeur du chiffre vaut environ 1,9 dans la
   reference, mesure sur capture donc approximatif. 33px donne 78/41 = 1,9.
   En dessous, « Google » cesse de porter l'en-tete et le chiffre prend toute
   l'attention. */
.wg-mot{height:33px;width:auto;flex:none}
.wg-liste-h .wg-g{display:none}
.wg-verif{width:14px;height:14px;flex:none;margin-left:5px}
.wg-av-nom{display:inline-flex;align-items:center}
/* ---------- Infobulle ----------
   Fond et encre fixes, pas les couleurs du proprietaire : la bulle se pose
   au-dessus de la fenetre et doit rester lisible meme sur un fond sombre. */
.wg-info{
  position:fixed;left:0;top:0;z-index:80;
  padding:9px 13px;border-radius:8px;
  background:#fff;color:#1d1d1f;
  font-size:13.5px;line-height:1.3;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.07);
  pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .13s ease,transform .13s ease
}
.wg-info.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wg-info{transition:none}}

/* La pastille est dans le lien de l'avis : le curseur doit le dire. */
.wg-verif{cursor:pointer}

.wg-av-qui{align-items:center}
.wg-av-rep-ph{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.09);color:rgba(0,0,0,.32)
}
.wg-av-rep-ph svg{width:17px;height:17px}
.wg-av-rep-txt{margin-top:10px;font-size:15px;line-height:1.6;opacity:.9}

/* La coche de verification suit le rendu de la reference : foncee, pas bleue.
   Leur balisage la declare en #197BFF mais elle s'affiche sombre sur la page,
   et c'est ce rendu-la qui sert de comparaison. Le bleu tirait l'oeil plus que
   le nom qu'il accompagne. */
.wg-verif path:first-child{fill:#1b1b1b}
.wg-verif{width:15px;height:15px;margin-left:6px}

/* Note et etoiles collees, avec un ecart plus grand vers le mot Google et le
   compte. Un ecart identique partout brise la lecture : « 4,7 » et les etoiles
   disent une seule chose. */
.wg-liste-note{display:inline-flex;align-items:center;gap:9px}
.wg-liste-h .wg-etoiles{gap:0}

/* Barre de defilement de la liste. La barre native de Windows est large, grise
   et carree : elle vient buter contre le coin arrondi de la fenetre. Celle-ci
   se retire quand on ne defile pas et suit la couleur du texte, donc elle
   reste lisible quel que soit le fond choisi par le proprietaire. */
/* Pas de scrollbar-width ici : des que la propriete standard est posee,
   Chrome dessine la barre lui-meme et ignore les pseudo-elements webkit,
   qui sont les seuls a savoir rentrer le curseur vers l'interieur. C'est ce
   qui faisait une piste de 10px collee au bord alors que j'en demandais 14. */
.wg-liste-c::-webkit-scrollbar{width:16px}
.wg-liste-c::-webkit-scrollbar-track{background:transparent}
/* La bordure transparente est le retrait : 16 moins deux fois 5 laisse un
   curseur de 6px, a 5px du bord arrondi de la fenetre. */
.wg-liste-c::-webkit-scrollbar-thumb{
  border:5px solid transparent;border-radius:999px;
  background:rgba(0,0,0,.26);background-clip:content-box
}
.wg-liste-c::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4);background-clip:content-box}
/* Firefox n'a pas les pseudo-elements : il recoit la barre fine standard,
   sans retrait possible, ce qui reste correct faute de mieux. */
@supports (-moz-appearance:none){
  .wg-liste-c{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.3) transparent}
}
/* La place de la barre est reservee en permanence : sans cela le contenu
   saute de quelques pixels des qu'un avis de plus la fait apparaitre. */
.wg-liste-c{scrollbar-gutter:stable}

/* Pied de la fenetre des avis. Il porte la mention, en dehors du conteneur
   qui defile pour qu'elle reste visible quel que soit l'avis affiche. */
.wg-liste-p{
  flex:none;padding:12px 26px 14px;
  border-top:1px solid rgba(0,0,0,.09);text-align:center
}
.wg-liste-p .wg-marque{margin-top:0;font-size:12px;color:inherit;opacity:.5}
.wg-liste-p .wg-marque a{color:inherit;text-decoration:none;font-weight:600}
.wg-liste-p .wg-marque a:hover{text-decoration:underline;text-underline-offset:2px}
/* La piste de 16px s'ajoute a la marge au lieu de la remplacer : sans cette
   reprise le texte s'arretait a 42px du bord droit contre 26 a gauche. */
.wg-liste-c{padding-right:10px}


/* ============ PUBLICATION SOCIALE ============ */

.ps-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.ps-h h2{font-size:16px;font-weight:600}
.ps-h p{margin-top:2px;font-size:13px;color:var(--gris-2)}
.ps-btn{width:auto;padding:0 16px;height:38px;flex:none}
.ps-btn svg{width:15px;height:15px;margin-right:7px}

.ps-vide{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:9px;padding:34px 24px;border:1px dashed var(--bord);border-radius:11px
}
.ps-vide-ic{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.05);color:var(--gris-2)
}
.ps-vide-ic svg{width:21px;height:21px}
.ps-vide b{font-size:14.5px;font-weight:600}
.ps-vide p{max-width:44ch;font-size:13px;line-height:1.55;color:var(--gris-2)}

.ps-onglets{max-width:340px}

/* La scene pose la carte a cote de sa legende plutot qu'au-dessus : en story
   la carte est haute, et un texte sous elle tombait hors de l'ecran. */
.ps-scene{
  display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;
  padding:26px;border-radius:11px;background:var(--fond)
}
.ps-cadre{
  flex:none;overflow:hidden;border-radius:14px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.45)
}
.ps-cadre-story{width:270px;height:480px}
.ps-cadre-carre{width:340px;height:340px}

/* La carte est dessinee a sa taille reelle puis reduite : les proportions et
   les epaisseurs de trait restent celles du fichier qui sera publie, au lieu
   d'etre approchees a l'ecran. */
.ps-carte-v{transform-origin:0 0}
.ps-story{width:1080px;height:1920px;transform:scale(.25)}
.ps-carre{width:1080px;height:1080px;transform:scale(.3148)}

.ps-cote{flex:1;min-width:210px}
.ps-cote-b{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ps-cote-l{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2)}
.ps-nav{display:flex;align-items:center;gap:8px}
.ps-nav output{font-size:13px;color:var(--gris-2);min-width:44px;text-align:center}
.ps-fleche{
  display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--bord);
  border-radius:8px;background:var(--carte);color:var(--encre);cursor:pointer
}
.ps-fleche:hover{background:rgba(0,0,0,.05)}
.ps-fleche svg{width:15px;height:15px}
.ps-cote-n{margin-top:10px;font-size:13px;line-height:1.55;color:var(--gris-2)}

.ps-reglage-t{flex-direction:column;align-items:stretch;gap:10px}
.ps-champ{
  width:100%;height:38px;padding:0 12px;border:1px solid var(--bord);border-radius:8px;
  background:transparent;color:var(--encre);font:inherit;font-size:14px
}
.ps-champ:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.35)}
.ps-aide{margin-top:5px;font-size:12px;line-height:1.5;color:var(--gris-2)}
.ps-pied-t{font-size:13px;color:var(--vert);font-weight:500}

.ps-bascule-h{display:flex;align-items:center;gap:10px;flex:none}
.ps-bascule-h span{font-size:13px;font-weight:500}

.ps-jours{display:flex;flex-direction:column;gap:8px}
.ps-jours.ps-eteint{opacity:.45;pointer-events:none}
.ps-jour{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 16px;border:1px solid var(--bord);border-radius:9px
}
.ps-jour.on{border-color:rgba(1,184,89,.4);background:rgba(1,184,89,.05)}
.ps-jour-n{flex:1;min-width:110px;font-size:14px;font-weight:500}
.ps-case{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gris-2);cursor:pointer}
.ps-case input{position:absolute;opacity:0;width:0;height:0}
.ps-case span{
  display:grid;place-items:center;width:18px;height:18px;flex:none;
  border:1.5px solid var(--bord);border-radius:5px;transition:background .15s,border-color .15s
}
.ps-case input:checked + span{background:var(--vert);border-color:var(--vert)}
.ps-case input:checked + span::after{
  content:'';width:9px;height:5px;margin-top:-2px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)
}
.ps-case input:focus-visible + span{box-shadow:0 0 0 3px rgba(1,184,89,.35)}
.ps-note-bas{margin-top:12px;font-size:13px;color:var(--gris-2)}

/* ---------- La carte elle-meme ----------
   Toutes les mesures sont en pixels du fichier final, jamais en unites
   relatives : la carte doit rendre pareil ici et sur le serveur, sans
   dependre de la taille de police du navigateur qui l'affiche. */
.pc{
  position:relative;width:100%;height:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:110px 96px;font-family:Inter,system-ui,sans-serif
}
.ps-carre .pc{padding:74px 84px}
.pc-lueur{position:absolute;inset:0;pointer-events:none}
.pc-haut{position:relative;text-align:center;width:100%}
.pc-logo{font-size:76px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.ps-carre .pc-logo{font-size:62px}
.pc-etoiles{display:flex;justify-content:center;gap:14px;margin-top:44px}
.pc-etoiles svg{width:56px;height:56px}
.ps-carre .pc-etoiles{gap:11px;margin-top:32px}
.ps-carre .pc-etoiles svg{width:46px;height:46px}
.pc-mention{
  margin-top:26px;font-size:28px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase
}
.ps-carre .pc-mention{margin-top:20px;font-size:23px}
.pc-titre{
  margin-top:52px;font-size:76px;font-weight:700;line-height:1.16;letter-spacing:-.02em
}
.ps-carre .pc-titre{margin-top:38px;font-size:62px}
.pc-titre em{font-style:italic;color:inherit;opacity:.92}

/* La bulle imite une conversation : c'est ce qui fait lire l'avis comme une
   parole recue plutot que comme une affiche publicitaire. */
.pc-bulle{
  position:relative;width:100%;margin-top:auto;margin-bottom:auto;
  padding:44px 46px;border-radius:34px;background:#fff;color:#111
}
.ps-carre .pc-bulle{padding:34px 38px;border-radius:28px}
.pc-bulle-h{display:flex;align-items:center;gap:22px;padding-bottom:26px;border-bottom:2px solid rgba(0,0,0,.08)}
.ps-carre .pc-bulle-h{gap:18px;padding-bottom:20px}
.pc-av{
  flex:none;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;
  font-size:36px;font-weight:700
}
.ps-carre .pc-av{width:66px;height:66px;font-size:30px}
.pc-qui{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pc-qui b{font-size:34px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-qui span{font-size:26px;color:rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-carre .pc-qui b{font-size:29px}
.ps-carre .pc-qui span{font-size:22px}
.pc-heure{flex:none;font-size:26px;color:rgba(0,0,0,.4)}
.ps-carre .pc-heure{font-size:22px}
.pc-texte{margin-top:26px;padding:26px 30px;border-radius:22px;background:rgba(0,0,0,.06)}
.ps-carre .pc-texte{margin-top:20px;padding:21px 24px;border-radius:18px}
.pc-texte p{font-size:32px;line-height:1.42}
.ps-carre .pc-texte p{font-size:27px}
.pc-pied{
  position:relative;display:flex;align-items:center;justify-content:center;gap:20px;
  width:100%;font-size:28px;color:rgba(255,255,255,.72)
}
.ps-carre .pc-pied{font-size:24px;gap:16px}
.pc-pied b{font-weight:700;color:inherit}
.pc-point{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.pc-rien{padding:60px;font-size:34px;text-align:center;color:var(--gris-2)}

@media(max-width:760px){
  .ps-scene{flex-direction:column;align-items:center;padding:18px}
  .ps-cote{width:100%}
}

/* ============ TABLEAU DES PLAQUES ============ */

.pl-periodes{max-width:520px;margin-bottom:20px}

/* Deux sur deux par defaut, quatre de front quand la carte est assez large.
   La bascule regarde la largeur de la CARTE, pas celle de la fenetre : le
   tableau de bord a une colonne de droite et les autres pages non, donc a
   fenetre egale la place disponible n'est pas la meme. Un point de rupture
   sur la fenetre donnait quatre cases de 155px, avec les libelles replies.

   Les rangees sont egales pour qu'un libelle sur deux lignes ne fasse pas
   depasser sa case au-dessus de ses voisines. */
.pl-col > .carte,
.main > .carte{container-type:inline-size}
.pl-mesures{
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:12px
}
@container (min-width: 820px){
  .pl-mesures{grid-template-columns:repeat(4,1fr)}
}
/* Deux colonnes a toutes les largeurs, y compris sur telephone : sur une
   seule colonne, quatre chiffres prennent tout l'ecran et il faut defiler
   pour voir le quatrieme. */
.pl-mesure{
  display:flex;flex-direction:column;justify-content:center;
  padding:16px 14px;border:1px solid var(--bord);border-radius:11px;min-height:88px
}
@media(max-width:560px){
  .pl-mesures{gap:10px}
  .pl-mesure{padding:13px 12px;min-height:78px}
  .pl-mesure span{font-size:11.5px;line-height:1.35}
  .pl-mesure b{font-size:24px}
}
.pl-mesure span{display:block;font-size:12.5px;color:var(--gris-2)}
.pl-mesure b{display:block;margin-top:5px;font-size:28px;font-weight:700;line-height:1.1}

.pl-note{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--gris-2)}
.pl-note-fine{margin-top:10px;font-size:12.5px}

/* Une barre par etoile : la moyenne seule ne distingue pas dix avis tiedes
   de deux mauvais noyes dans du bon. */
.pl-barre{display:flex;align-items:center;gap:12px;margin-top:9px}
.pl-barre-e{width:14px;font-size:13px;font-weight:600;text-align:right;color:var(--gris-2)}
.pl-barre-p{flex:1;height:9px;border-radius:999px;background:rgba(0,0,0,.06);overflow:hidden}
.pl-barre-p i{display:block;height:100%;border-radius:999px;background:var(--vert)}
.pl-barre-n{width:34px;font-size:13px;text-align:right;color:var(--gris-2)}

.pl-com{padding:16px 0;border-top:1px solid var(--bord)}
.pl-com:first-child{border-top:0;padding-top:0}
.pl-com-neuf{position:relative;padding-left:14px}
/* Un trait vert, pas une pastille : il marque la rangee entiere sans ajouter
   un objet de plus a regarder. */
.pl-com-neuf::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;
  width:3px;border-radius:999px;background:var(--vert)
}
.pl-com:first-child.pl-com-neuf::before{top:0}
.pl-com-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.pl-com-h b{font-size:14.5px;font-weight:600}
.pl-etoiles svg{width:15px;height:15px}
.pl-quand{margin-left:auto;font-size:12.5px;color:var(--gris-2)}
.pl-com-t{margin-top:9px;font-size:14.5px;line-height:1.6}
.pl-com-p{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:10px}
.pl-contact{font-size:13px;color:var(--vert);text-underline-offset:2px}
.pl-sans{font-size:13px;color:var(--gris-2)}
.pl-lu{
  margin-left:auto;padding:0;border:0;background:none;
  font:inherit;font-size:13px;color:var(--gris-2);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px
}
.pl-lu:hover{color:var(--encre)}
.pl-lu:disabled{opacity:.5;cursor:default}

.pl-copie{margin-top:14px}
.snav-pastille{
  margin-left:auto;min-width:19px;height:19px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--vert);color:#fff;font-size:11px;font-weight:700
}
.snav-pastille[hidden]{display:none}

/* ---------- disposition en deux colonnes ----------
   La colonne de droite tient le resume et les reglages, ce qui laisse la
   colonne principale aux chiffres et aux commentaires. Elle colle en haut :
   le commercant garde l'adresse de sa plaque sous les yeux pendant qu'il lit. */
.pl-grille{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.pl-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.pl-cote{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px}
@media(max-width:960px){
  .pl-grille{grid-template-columns:1fr}
  .pl-cote{position:static}
}

.pl-nom{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pl-adresse{margin-top:6px;font-size:13.5px;color:var(--gris-2)}
.pl-adresse[hidden]{display:none}

/* Le separateur porte la periode au centre, comme une legende de section. */
.pl-separateur{display:flex;align-items:center;gap:14px;margin:22px 0 18px}
.pl-separateur::before,.pl-separateur::after{
  content:'';flex:1;height:1px;background:var(--bord)
}
.pl-separateur span{font-size:12.5px;color:var(--gris-2)}

.pl-carte-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.pl-carte-h h2{font-size:16px;font-weight:600}
.pl-sous{font-size:13px;color:var(--gris-2);margin-bottom:14px}

.pl-periodes{display:flex;gap:3px;padding:3px;border-radius:9px;background:rgba(0,0,0,.04)}
.pl-p{
  height:28px;padding:0 11px;border:0;border-radius:6px;background:transparent;
  font:inherit;font-size:12.5px;font-weight:500;color:var(--gris-2);cursor:pointer
}
.pl-p.on{background:var(--vert);color:#fff}

/* ---------- colonne de droite ---------- */
.pl-resume{text-align:center}
.pl-resume h2{font-size:16px;font-weight:600;text-align:left}
.pl-rond{
  display:grid;place-items:center;width:52px;height:52px;margin:18px auto 12px;
  border-radius:50%;background:rgba(1,184,89,.10);color:var(--vert)
}
.pl-rond svg{width:24px;height:24px}
.pl-grand{font-size:38px;font-weight:700;line-height:1}
.pl-resume .wg-etoiles{justify-content:center;margin-top:8px}
.pl-petit{margin-top:8px;font-size:13px;color:var(--gris-2)}
/* Le trait a disparu du balisage : l'espacement qu'il apportait passe sur la
   premiere ligne de compte. Vise par le voisin direct et non par
   :first-of-type, qui compte parmi tous les div de la carte et designait donc
   le mauvais element. */
.pl-petit + .pl-ligne{margin-top:22px}
.pl-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.pl-ligne + .pl-ligne{margin-top:10px}
.pl-ligne span{font-size:13.5px;color:var(--gris-2)}
.pl-ligne b{font-size:16px;font-weight:700}
.pl-lab{font-size:12.5px;font-weight:500;text-align:left;margin-bottom:8px}
.pl-fine{margin-top:9px;font-size:12px;line-height:1.5;color:var(--gris-2);text-align:left}

.pl-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:40px;margin-top:18px;border:0;border-radius:9px;
  background:var(--vert);color:#fff;font:inherit;font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer
}
.pl-btn:hover{background:#019e4c}
.pl-btn svg{width:15px;height:15px}
.pl-btn-second{background:transparent;color:var(--encre);border:1px solid var(--bord)}
.pl-btn-second:hover{background:rgba(0,0,0,.04)}

.pl-copie code{font-size:11.5px}

/* La meme grille sur les pages secondaires, sans exception : deux mises en
   page differentes pour quatre memes chiffres n'aideraient personne. */
.pl-btn-large{max-width:300px;margin-top:18px}
.pl-segments{max-width:340px}

/* ---------- le lien de la plaque ----------
   Ses propres styles plutot que ceux du panneau operateur : admin.css n'est
   pas charge ici, et les classes empruntees rendaient un bouton sans forme. */
.pl-boite{
  display:flex;align-items:center;gap:12px;
  margin-top:8px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--bord);background:rgba(0,0,0,.02)
}
.pl-boite code{
  flex:1;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.5;color:var(--gris-2);word-break:break-all
}
.pl-copier{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px;border:1px solid var(--bord);border-radius:8px;
  background:var(--carte);color:var(--encre);
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s
}
.pl-copier:hover{background:rgba(0,0,0,.04);border-color:var(--gris-2)}
.pl-copier svg{width:14px;height:14px}

/* ---------- volet des notifications ---------- */
.nt{
  display:flex;gap:12px;padding:14px 4px;
  border-bottom:1px solid var(--bord);color:inherit;text-decoration:none
}
.nt:last-child{border-bottom:0}
.nt:hover{background:rgba(0,0,0,.02)}
.nt-ic{
  flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:rgba(0,0,0,.05)
}
.nt-ic svg{width:16px;height:16px}
.nt-attention .nt-ic{background:rgba(200,120,0,.12);color:#9a6a00}
.nt-bon .nt-ic{background:rgba(1,184,89,.12);color:var(--vert)}
.nt-neutre .nt-ic{background:rgba(0,0,0,.06);color:var(--gris-2)}
.nt-t{flex:1;min-width:0}
.nt-t b{display:block;font-size:14px;font-weight:600}
.nt-t > span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--gris-2)}
.nt-t time{display:block;margin-top:5px;font-size:12px;color:var(--gris-2);opacity:.8}

/* ---------- menu du compte ---------- */
.pl-menu{padding:0}
.pl-menu-tete{display:flex;align-items:center;gap:11px;padding:14px 14px 12px}
.pl-menu-qui{min-width:0}
.pl-menu-qui b{display:block;font-size:14px;font-weight:600}
.pl-menu-qui span{display:block;font-size:12.5px;color:var(--gris-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-menu-item{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.pl-menu-item:hover{background:rgba(0,0,0,.04)}
/* Sans cette taille, l'icone herite du viewBox et remplit le menu. */
.pl-menu-item svg{width:17px;height:17px;flex:none}
.pl-menu-item{display:flex;align-items:center;gap:11px;padding:12px 14px}

/* .volet-corps est un conteneur flex centre, prevu pour la seule phrase
   « Aucune notification ». Des qu'il porte une liste, il doit empiler et
   defiler, pas centrer. */
.volet-corps:has(.nt){
  display:block;align-items:stretch;justify-content:flex-start;
  padding:8px 16px 20px;overflow-y:auto
}

/* ---------- reglage du seuil ----------
   Quatre choix montres avec leurs etoiles plutot qu'un segment minuscule :
   c'est la seule decision que le proprietaire prend, elle merite de la place. */
.rg-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-top:18px}
.rg-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:16px;border:1px solid var(--bord);border-radius:12px;
  background:var(--carte);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s
}
.rg-opt:hover{border-color:var(--gris-2)}
.rg-opt.on{border-color:var(--vert);box-shadow:0 0 0 3px rgba(1,184,89,.16)}
.rg-opt b{font-size:14.5px;font-weight:600}
.rg-d{font-size:12.5px;color:var(--gris-2)}
.rg-et{display:inline-flex;gap:2px}
.rg-et svg{width:17px;height:17px}

.rg-effet{
  margin-top:18px;padding:15px 17px;border-radius:11px;
  background:rgba(1,184,89,.07);font-size:14px;line-height:1.6
}
.rg-effet b{font-weight:600}
.rg-note h2{font-size:15px;font-weight:600}
.rg-note p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--gris-2)}
.pl-lab-moy{font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:6px}