:root{
  --ink:#F2EFFA;
  --dim:#9B96B0;
  --paper:#0B0A12;
  --surface:#15122A;
  --iris:#7B5CFF;
  --iris-2:#C86DD7;
  --amber:#E8A93D;
  --line:rgba(242,239,250,.10);

  /* ---- Couleurs de statut — formalisées ici pour remplacer les
     nombreuses variantes codées en dur dans /pro (au moins 3 verts
     différents pour "succès", casse incohérente sur le rouge). Une
     seule valeur par intention, réutilisable partout. ---- */
  --success:#4CE68C;
  --danger:#FF5A6E;
  --warn:var(--amber);
  --font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4{font-family:var(--font-display)}

/* Grain — casse la platitude des dégradés sombres, donne une texture
   presque photographique plutôt que le lissé typique d'un fond IA.
   Un seul calque, discret, appliqué une fois pour tout le site. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lueur d'ambiance, rappel de l'AuroraBackground de l'app */
.aurora{
  position:fixed; inset:0 0 auto 0; height:560px; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 90% at 20% 0%, rgba(123,92,255,.28), transparent 65%),
    radial-gradient(55% 80% at 82% 8%, rgba(200,109,215,.20), transparent 62%);
  filter:blur(4px);
  animation:auroraBreathe 14s ease-in-out infinite;
}
@keyframes auroraBreathe{
  0%,100%{opacity:1; transform:translateY(0)}
  50%{opacity:.78; transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
  .aurora{animation:none}
}

/* ---- Barre de navigation ---- */
.nav{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:22px;
  max-width:1000px; margin:0 auto; padding:22px 24px;
  flex-wrap:wrap;
}
.nav .brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  font-family:var(--font-display);
  font-weight:800; letter-spacing:-.03em; font-size:22px;
  margin-right:auto;
}
.nav .brand svg{width:30px; height:30px; border-radius:8px}
.nav a.link{
  color:var(--dim); text-decoration:none; font-size:15px; font-weight:500;
}
.nav a.link:hover{color:var(--ink)}
.nav a.cta{
  background:linear-gradient(135deg,var(--iris),var(--iris-2));
  color:#fff; text-decoration:none; font-size:15px; font-weight:650;
  padding:9px 18px; border-radius:11px;
}

/* Lien "Espace gérant" — un simple lien texte perdu au milieu des
   pages légales ne donne aucune envie de cliquer. Un contour dégradé
   + une pastille d'offre le rendent visibles au premier coup d'œil,
   sans pour autant concurrencer le vrai bouton principal (.cta,
   destiné au grand public qui télécharge l'app). */
.nav a.cta-manager{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg,var(--iris),var(--iris-2)) border-box;
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:650;
  padding:7px 13px 7px 14px; border-radius:10px;
}
.nav a.cta-manager:hover{ color:#fff }

.wrap{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:34px 24px 96px}

.btn{
  display:inline-block; text-decoration:none; font-weight:650; font-size:16px;
  padding:14px 26px; border-radius:13px;
}
.btn.primary{background:linear-gradient(135deg,var(--iris),var(--iris-2)); color:#fff}
.btn.ghost{border:1px solid var(--line); color:var(--ink)}

/* ---- Pages légales ---- */
.back{display:inline-block; color:var(--dim); text-decoration:none; font-size:15px; margin-bottom:34px}
.back:hover{color:var(--ink)}
.doc h1{font-size:clamp(32px,6.5vw,44px); line-height:1.08; margin:0 0 12px; letter-spacing:-.03em; font-weight:800}
.lede{color:var(--dim); margin:0; font-size:17px}
.stamp{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); font-size:14px}
.doc header{margin-bottom:54px}
.doc .logo{width:56px; height:56px; display:block; margin-bottom:22px; border-radius:15px;
  box-shadow:0 12px 34px rgba(123,92,255,.34)}
section{margin:0 0 44px}
h2{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--iris-2); font-weight:700; margin:0 0 14px}
h3{font-size:18px; margin:26px 0 8px; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:22px}
li{margin-bottom:9px}
li::marker{color:var(--iris)}
strong{font-weight:650}
a{color:var(--iris-2)}
.callout{
  border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  background:rgba(123,92,255,.06); margin:0 0 44px;
}
.callout h2{color:var(--ink); margin-bottom:12px}
.callout ul{margin-bottom:0}
.contact{border-top:1px solid var(--line); padding-top:28px; margin-top:8px; color:var(--dim); font-size:15px}
.contact a{color:var(--ink)}

/* ---- Pied de page ---- */
.foot{
  border-top:1px solid var(--line); position:relative; z-index:1;
  max-width:1000px; margin:0 auto; padding:36px 24px 70px;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  color:var(--dim); font-size:14px;
}
.foot a{color:var(--dim); text-decoration:none; transition:color .15s}
.foot a:hover{color:var(--ink)}
.foot .spacer{margin-left:auto}
/* Réseaux sociaux du pied de page (Instagram, LinkedIn…) */
.social-links{display:inline-flex; gap:8px; align-items:center}
.social-links a{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); transition:background .15s, border-color .15s, transform .15s}
.social-links a:hover{background:linear-gradient(135deg,var(--iris),var(--iris-2)); border-color:transparent; color:#fff; transform:translateY(-1px)}

@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:26px 20px 72px}
  .nav{gap:16px; padding:18px 20px}
}

/* ============================================================
   COMPOSANTS D'APPLICATION — espace gérant et espace admin
   ============================================================ */

/* z-index 2 (au-dessus du pied de page .foot, z-index 1) : les fenêtres et la barre d'onglets du bas, posées dans .app, passaient sous le pied de page. */
.app{position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:20px 24px 80px}
.app.narrow{max-width:560px}
.hidden{display:none !important}

.panel{
  border:1px solid var(--line); border-radius:20px; padding:28px;
  background:rgba(123,92,255,.05); margin-bottom:18px;
}
.panel h2.title{
  font-size:20px; text-transform:none; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 6px; font-weight:700;
}
.panel .sub{color:var(--dim); font-size:15px; margin:0 0 22px}

.pagehead{margin:14px 0 26px}
.pagehead h1{font-size:clamp(30px,6vw,42px); margin:0 0 8px; letter-spacing:-.035em; font-weight:850}
.pagehead p{color:var(--dim); margin:0}

/* ---- Onglets ---- */
.tabs{display:flex; gap:6px; background:rgba(11,10,18,.5); padding:5px; border-radius:13px; margin-bottom:24px}
.tab{
  flex:1; text-align:center; padding:10px; border-radius:9px; cursor:pointer;
  color:var(--dim); font-size:15px; font-weight:600; user-select:none;
  transition:background .15s, color .15s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:linear-gradient(135deg,var(--iris),var(--iris-2)); color:#fff}

/* ---- Formulaires ---- */
.field{margin-bottom:18px}
.field > label, .flabel{
  display:block; font-size:13px; font-weight:650; color:var(--dim);
  margin-bottom:7px; letter-spacing:.01em;
}
.hint{font-size:13px; color:var(--dim); margin-top:6px; opacity:.85}

/* ---- Regroupement visuel de champs apparentés — sépare "ce qui
   identifie l'établissement" de "liens facultatifs" au lieu d'une
   longue liste plate de champs sans hiérarchie. ---- */
.field-group{
  border:1px solid var(--line); border-radius:18px; padding:20px 18px 2px;
  margin-bottom:20px; background:rgba(255,255,255,.015);
}
.field-group-title{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); margin:0 0 16px;
}
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=tel],input[type=time],input[type=date],input[type=number],textarea,select{
  width:100%; padding:13px 15px; font-size:16px; font-family:inherit;
  color:var(--ink); background:rgba(11,10,18,.6);
  border:1px solid var(--line); border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
  /* Sans ça, un champ date/heure côte à côte dans une rangée flex garde
     sa largeur native sur iPhone et fait déborder toute la page. */
  min-width:0; max-width:100%;
}
input[type=time],input[type=date]{ -webkit-appearance:none; appearance:none; min-height:48px }
/* Le champ lui-même hérite déjà du thème sombre via color/background
   ci-dessus, mais le popup du calendrier natif (et l'icône) restait en
   clair par défaut — color-scheme dit au navigateur de rendre ses
   propres contrôles natifs (date/heure) en sombre. */
input[type=date],input[type=time]{ color-scheme:dark }
input:focus,textarea:focus,select:focus{
  border-color:var(--iris); box-shadow:0 0 0 3px rgba(123,92,255,.22);
}
input::placeholder{color:rgba(155,150,176,.55)}
.duo{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.duo .sep{color:var(--dim); font-size:14px}
.split{display:grid; grid-template-columns:2fr 1fr; gap:10px}

button.btn{border:none; cursor:pointer; font-family:inherit}
.btn.block{display:block; width:100%; text-align:center}
.btn.small{padding:9px 15px; font-size:14px; border-radius:10px}
.btn.secondary{background:rgba(242,239,250,.07); color:var(--ink); border:1px solid var(--line)}
.btn.apple{
  background:#000; color:#fff; border:1px solid #000;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn.apple:hover{ background:#1a1a1a }
.btn.google{
  background:#fff; color:#1F1F1F; border:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:10px;
}
.btn.google:hover{ background:#f5f5f5 }

/* ---- Bandeau cookies — un seul message d'acquittement, pas de faux
   choix accepter/refuser puisqu'aucun cookie non essentiel n'est
   utilisé à ce jour (voir /cookies). ---- */
/* Petite carte compacte ancrée en HAUT de l'écran, sans fond plein
   écran ni flou. Deux essais précédents ont buté sur les
   particularités du BAS d'écran sous Safari (safe-area, barre
   d'outils, visualViewport) et un plein écran flouté jugé trop
   intrusif — le haut est une zone beaucoup plus stable (juste
   l'encoche/île dynamique à gérer, bien couverte par
   env(safe-area-inset-top)), et une petite carte reste discrète. */
.cookie-banner{
  position:fixed; left:16px; right:16px;
  top:calc(14px + env(safe-area-inset-top, 0px)); z-index:80;
  max-width:400px; margin:0 auto;
  background:linear-gradient(180deg,#1A1730,#120F24);
  border:1px solid rgba(242,239,250,.14); border-radius:18px;
  padding:16px 18px 18px; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(123,92,255,.08);
  transform:translateY(-160%);
  transition:transform .35s ease;
  pointer-events:none;
}
.cookie-banner.visible{
  transform:translateY(0);
  pointer-events:auto;
}
.cookie-banner-close{
  position:absolute; top:12px; right:12px; z-index:1;
  width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(242,239,250,.08); color:var(--dim);
  font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cookie-banner-close:hover{ background:rgba(242,239,250,.16); color:var(--ink) }
.cookie-banner-top{ display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; padding-right:22px }
.cookie-banner-icon{
  flex:none; width:34px; height:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:linear-gradient(135deg,var(--iris),var(--iris-2));
  box-shadow:0 8px 18px -4px rgba(123,92,255,.5);
}
.cookie-banner-title{ margin:0 0 3px; font-size:13.5px; font-weight:750; color:#F2EFFA }
.cookie-banner p{ margin:0; font-size:12px; color:var(--dim); line-height:1.45 }
.cookie-banner p a{ color:#C9BEFF; text-decoration:underline }
.cookie-banner-actions{ display:flex; gap:8px }
/* Les deux boutons ont volontairement le même poids visuel — pas de
   gros bouton "Accepter" en dégradé à côté d'un petit lien "Refuser"
   discret, pour que ça se lise vraiment comme un choix et pas comme
   une case à cocher qu'on pousse à valider. */
.cookie-banner-actions button{
  flex:1; border:none; padding:9px 16px; border-radius:10px;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
.cookie-banner-actions button:active{ transform:scale(.97) }
.cookie-btn-refuse{
  background:rgba(242,239,250,.06); color:#C9BEFF;
  border:1.5px solid rgba(155,150,176,.35) !important;
}
.cookie-btn-refuse:hover{ background:rgba(242,239,250,.11); border-color:rgba(155,150,176,.55) !important }
.cookie-btn-accept{
  background:linear-gradient(135deg,var(--iris),var(--iris-2)); color:#fff;
  box-shadow:0 10px 22px -6px rgba(123,92,255,.55);
}
.cookie-btn-accept:hover{ filter:brightness(1.08) }
.or-divider{ display:flex; align-items:center; gap:12px; margin:16px 0 }

/* ---- Modal "taper SUPPRIMER pour confirmer" — suppression de compte,
   la seule action du site qui mérite plus de friction qu'une simple
   confirmation en un clic. ---- */
.danger-confirm-overlay{
  position:fixed; inset:0; z-index:95;
  background:rgba(5,4,10,.7); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.danger-confirm-overlay.visible{ opacity:1; pointer-events:auto }
.danger-confirm-card{
  max-width:400px; width:100%;
  background:linear-gradient(180deg,#1A1730,#120F24);
  border:1px solid rgba(255,90,110,.3); border-radius:20px;
  padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:scale(.95); transition:transform .2s ease;
}
.danger-confirm-overlay.visible .danger-confirm-card{ transform:scale(1) }
.danger-confirm-title{ margin:0 0 10px; font-size:17px; font-weight:800; color:#FF8095 }
.danger-confirm-body{ margin:0 0 14px; font-size:13px; color:var(--dim); line-height:1.55 }
.danger-confirm-input{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--ink); font-family:inherit; font-size:14px;
  margin-bottom:16px; box-sizing:border-box; text-transform:uppercase;
}
.danger-confirm-actions{ display:flex; gap:10px }
.danger-confirm-actions button{ flex:1 }
.danger-confirm-yes{ background:linear-gradient(135deg,#FF5A6E,#FF8095); color:#fff; border:none }

/* ---- Signaler un changement — panneau complet plutôt qu'une boîte
   de dialogue native, avec les raisons présentées comme de vraies
   options qu'on choisit, pas un numéro à taper. ---- */
.report-overlay{
  position:fixed; inset:0; z-index:95;
  background:rgba(5,4,10,.7); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.report-overlay.visible{ opacity:1; pointer-events:auto }
.report-card{
  max-width:440px; width:100%; max-height:90vh; max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg,#1A1730,#120F24);
  border:1px solid var(--line); border-radius:20px;
  padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:scale(.95); transition:transform .2s ease;
}
.report-overlay.visible .report-card{ transform:scale(1) }
.report-title{ margin:0 0 4px; font-size:17px; font-weight:800; color:#fff }
.report-subtitle{ margin:0 0 20px; font-size:13px; color:var(--dim); line-height:1.5 }
.report-reason{
  display:flex; align-items:flex-start; gap:12px; width:100%;
  padding:14px 16px; margin-bottom:8px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s, background .15s;
}
.report-reason:hover{ background:rgba(255,255,255,.04) }
.report-reason.selected{ border-color:var(--iris); background:rgba(123,92,255,.1) }
.report-reason .emoji{ font-size:20px; line-height:1.3 }
.report-reason .txt strong{ display:block; font-size:14px; color:var(--ink); margin-bottom:2px }
.report-reason .txt span{ font-size:12px; color:var(--dim) }
.report-note{
  width:100%; margin-top:14px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--ink); font-family:inherit; font-size:13.5px; resize:vertical; box-sizing:border-box;
}
.report-actions{ display:flex; gap:10px; margin-top:18px }
.report-actions button{ flex:1 }
.or-divider span{ flex:1; height:1px; background:var(--line) }
.or-divider em{ font-style:normal; font-size:12.5px; color:var(--dim); white-space:nowrap }
.btn.gold{background:linear-gradient(135deg,#E8A93D,#F5D67B); color:#2B1B04}
.btn.blue{background:linear-gradient(135deg,#6BADFA,#808CF2); color:#fff}
.btn.danger{background:rgba(255,90,110,.13); color:#FF8095; border:1px solid rgba(255,90,110,.3)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- Pastilles de jours ---- */
.days{display:flex; gap:8px; flex-wrap:wrap}
.day{
  position:relative; cursor:pointer; user-select:none;
  padding:10px 16px; border-radius:11px; font-size:15px; font-weight:600;
  border:1px solid var(--line); background:rgba(11,10,18,.5); color:var(--dim);
  transition:all .15s;
}
.day input{position:absolute; opacity:0; pointer-events:none}
.day:hover{color:var(--ink); border-color:rgba(123,92,255,.5)}
.day:has(input:checked){
  background:linear-gradient(135deg,var(--iris),var(--iris-2));
  color:#fff; border-color:transparent;
}

/* ---- Zone de dépôt d'image ---- */
.drop{
  position:relative; display:flex; align-items:center; gap:16px;
  border:1.5px dashed rgba(242,239,250,.22); border-radius:16px; padding:16px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover{border-color:var(--iris); background:rgba(123,92,255,.06)}
.drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.drop .thumb{
  width:64px; height:64px; border-radius:13px; flex:none;
  background:rgba(11,10,18,.6) center/cover no-repeat;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.drop .thumb.wide{width:104px; height:64px}
.drop .dt{display:block; font-size:15px; font-weight:600; margin:0 0 2px}
.drop .dd{display:block; font-size:13px; color:var(--dim); margin:0}

/* ---- Étapes — pastilles numérotées reliées par un trait, plutôt
   qu'une simple barre de progression plate : on voit d'un coup d'œil
   où on en est (étape courante qui respire, étapes passées cochées)
   au lieu d'un indicateur qui ne dit que "avancé à X%". ---- */
.steps{display:flex; align-items:flex-start; margin-bottom:28px}
.stepdot{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  position:relative; background:none; height:auto;
}
.stepdot:not(:last-child)::after{
  content:''; position:absolute; top:16px; left:calc(50% + 23px); right:calc(-50% + 23px);
  height:2px; background:rgba(242,239,250,.12); z-index:0; transition:background .3s;
}
.stepdot.on:not(:last-child)::after{background:linear-gradient(90deg,var(--iris),var(--iris-2))}
.stepdot-circle{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--dim); background:rgba(242,239,250,.06);
  border:1.5px solid rgba(242,239,250,.16); position:relative; z-index:1;
  transition:background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.stepdot.on .stepdot-circle{
  background:linear-gradient(135deg,var(--iris),var(--iris-2)); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px -2px rgba(123,92,255,.5);
}
.stepdot.current .stepdot-circle{animation:stepPulse 2.2s ease-in-out infinite}
@keyframes stepPulse{
  0%,100%{box-shadow:0 4px 14px -2px rgba(123,92,255,.5)}
  50%{box-shadow:0 4px 20px 3px rgba(123,92,255,.8)}
}
.stepdot-label{font-size:10.5px; color:var(--dim); text-align:center; font-weight:650; max-width:84px; line-height:1.25; transition:color .25s}
.stepdot.on .stepdot-label{color:var(--ink)}
.steplabel{font-size:13px; color:var(--iris-2); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:10px}
.stepnav{display:flex; gap:10px; margin-top:26px}
.stepnav .btn{flex:1}

/* ---- Aperçu en direct ---- */
.preview{position:sticky; top:20px}
.preview-live-badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 10px; border-radius:999px;
  background:rgba(123,92,255,.12); border:1px solid rgba(123,92,255,.3);
  font-size:11px; font-weight:700; color:#C9BEFF; letter-spacing:.02em; margin-bottom:12px;
}
.preview-live-dot{
  width:6px; height:6px; border-radius:50%; background:#4CE68C; flex:none;
  animation:previewLiveDot 1.8s ease-out infinite;
}
@keyframes previewLiveDot{
  0%{box-shadow:0 0 0 0 rgba(76,230,140,.55)}
  70%{box-shadow:0 0 0 6px rgba(76,230,140,0)}
  100%{box-shadow:0 0 0 0 rgba(76,230,140,0)}
}
.previewcard{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:rgba(11,10,18,.7);
  box-shadow:0 0 0 1px rgba(123,92,255,.06), 0 24px 60px -28px rgba(123,92,255,.45);
}
.previewcard .cover{
  height:132px; background:linear-gradient(135deg,rgba(123,92,255,.5),rgba(200,109,215,.35));
  background-size:cover; background-position:center; position:relative;
}
.previewcard .cover .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(242,239,250,.5); font-size:13px;
}
.previewcard .body{padding:16px 18px 20px; position:relative}
.previewcard .logo{
  width:54px; height:54px; border-radius:14px; margin-top:-44px; margin-bottom:12px;
  background:rgba(11,10,18,.9) center/cover no-repeat;
  border:2px solid rgba(11,10,18,.9);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.previewcard .pname{font-size:19px; font-weight:750; letter-spacing:-.02em; margin:0 0 3px}
.previewcard .pcity{font-size:14px; color:var(--dim); margin:0 0 12px}
.previewcard .prow{font-size:14px; color:var(--dim); margin:0 0 10px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  font-size:12px; font-weight:650; padding:5px 10px; border-radius:8px;
  background:rgba(123,92,255,.16); color:#C9BEFF; border:1px solid rgba(123,92,255,.25);
}
.chip.soft{background:rgba(120,220,190,.13); color:#8FE3C8; border-color:rgba(120,220,190,.25)}
.previewnote{font-size:13px; color:var(--dim); text-align:center; margin:12px 0 0}

.grid2{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}
@media (max-width:860px){
  .grid2{grid-template-columns:1fr}
  .preview{position:static; order:-1}
}

/* ---- Listes (soumissions, boîtes) ---- */
.item{
  border:1px solid var(--line); border-radius:15px; padding:16px 18px;
  background:rgba(11,10,18,.45); margin-bottom:12px;
}
.item:last-child{margin-bottom:0}
.item .top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.item .top .grow{flex:1; min-width:0}
.item strong{display:block; font-size:16px; letter-spacing:-.01em}
.item .meta{font-size:14px; color:var(--dim); margin-top:2px}
.item .ilogo{width:44px; height:44px; border-radius:11px; flex:none;
  background:rgba(123,92,255,.14) center/cover no-repeat; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px}
.actions{display:flex; gap:8px; flex-wrap:wrap}

.badge{
  display:inline-block; font-size:12px; font-weight:700; padding:5px 11px;
  border-radius:8px; letter-spacing:.02em;
}
.badge-pending{background:rgba(255,190,90,.14); color:#FFCE7A; border:1px solid rgba(255,190,90,.28)}
.badge-validated{background:rgba(120,220,160,.14); color:#8FE0AE; border:1px solid rgba(120,220,160,.28)}
.badge-rejected{background:rgba(255,90,110,.14); color:#FF8095; border:1px solid rgba(255,90,110,.28)}
.badge-info{background:rgba(123,92,255,.16); color:#C9BEFF; border:1px solid rgba(123,92,255,.28)}

.msg{font-size:14px; margin:14px 0 0; min-height:1px}
.msg.error{color:#FF8095}
.msg.ok{color:#8FE0AE}
.empty{color:var(--dim); font-size:15px; margin:0; text-align:center; padding:22px 0}

.userbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:15px; padding:13px 18px;
  background:rgba(11,10,18,.45); margin-bottom:18px; font-size:15px;
}
.userbar .grow{flex:1; min-width:0; color:var(--dim); overflow:hidden; text-overflow:ellipsis}

/* ---- Badge de quota de boost — doré à 2 ou plus restants, violet à
   1, rouge à 0. Cliquable, ouvre la page de détail. ---- */
.boost-quota-badge{
  display:flex; align-items:center; gap:6px; flex:none;
  font-family:inherit; cursor:pointer; border:none;
  padding:8px 14px; border-radius:100px; font-size:13.5px; font-weight:750;
  background:rgba(123,92,255,.16); color:#C9BEFF;
  transition:transform .15s ease;
}
.boost-quota-badge:hover{ transform:translateY(-1px) }
.boost-quota-icon{ font-size:13px }
.boost-quota-badge.boost-quota-gold{ background:linear-gradient(135deg,#E8A93D,#F5D67B); color:#2B1B04 }
.boost-quota-badge.boost-quota-empty{ background:rgba(255,90,110,.16); color:#FF8095 }

/* ---- Lien admin discret ---- */
.adminlink{
  font-size:13px; color:rgba(155,150,176,.6); text-decoration:none;
  border:1px solid rgba(242,239,250,.08); border-radius:8px; padding:5px 11px;
}
.adminlink:hover{color:var(--ink); border-color:var(--line)}

/* ---- Groupes de villes pliables (admin, liste des fiches) ---- */
.city-group{ margin-bottom:10px }
.city-group:last-child{ margin-bottom:0 }
.city-toggle{
  display:flex; align-items:center; gap:10px; width:100%;
  background:rgba(11,10,18,.45); border:1px solid var(--line); border-radius:15px;
  padding:14px 18px; cursor:pointer; text-align:left; font-size:16px; color:var(--ink);
  font-family:inherit;
}
.city-toggle:hover{ border-color:rgba(123,92,255,.35) }
.city-toggle .meta{ margin-left:auto; color:var(--dim); font-size:13.5px }
.city-arrow{ color:var(--iris-2); font-size:13px; width:12px; flex:none }
.city-body{ padding:12px 4px 2px 14px }

/* ---- Aperçu notification push, façon écran verrouillé iPhone ---- */
.push-layout{ display:grid; grid-template-columns:1fr 240px; gap:28px; align-items:start }
@media (max-width:760px){ .push-layout{ grid-template-columns:1fr } }

.phone-mockup{
  width:240px; height:490px; border-radius:44px; background:#0B0A18;
  border:6px solid #1C1930; position:relative; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5); margin:0 auto;
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:110px; height:22px; background:#1C1930; border-radius:0 0 16px 16px; z-index:2;
}
.phone-time{
  text-align:center; color:var(--ink); font-size:38px; font-weight:300;
  padding-top:56px; margin-bottom:20px;
}
.phone-notif{
  margin:0 12px; background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
  border-radius:16px; padding:11px 13px; display:flex; gap:9px;
}
.phone-notif-icon{ flex:none; width:20px; height:20px; border-radius:6px; overflow:hidden }
.phone-notif-text{ flex:1; min-width:0 }
.phone-notif-top{
  display:flex; justify-content:space-between; font-size:11px;
  color:rgba(242,239,250,.55); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;
}
.phone-notif-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:1px; word-break:break-word }
.phone-notif-body{ font-size:13px; color:rgba(242,239,250,.85); line-height:1.35; word-break:break-word }
/* ---- Grande image jointe (attachment_url) sous la carte de
   notification — élément à part de .phone-notif plutôt qu'un enfant,
   pour ne pas changer son display:flex existant (partagé avec l'aperçu
   admin, qui n'a pas d'image jointe à afficher). ---- */
.phone-notif-attachment{
  display:block; width:calc(100% - 24px); max-height:140px; object-fit:cover;
  border-radius:12px; margin:6px 12px 0;
}

/* ---- Campagne email — aperçu téléphone + ordinateur, même esprit
   que l'aperçu push mais sur les deux formats puisqu'un mail se lit
   sur les deux. ---- */
.email-preview-row{ display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; margin-top:26px }
@media (max-width:900px){ .email-preview-row{ justify-content:center } }

.mail-phone-inner{ padding:42px 16px 16px; height:100%; overflow:hidden }
.mail-phone-status{ text-align:center; font-size:11.5px; color:var(--dim); margin-bottom:16px }
.mail-phone-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.mail-avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--iris),var(--iris-2));
  color:#fff; font-weight:750; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.mail-phone-fromto{ display:flex; flex-direction:column; font-size:12px; line-height:1.35 }
.mail-phone-fromto b{ color:var(--ink); font-size:14px; font-weight:700 }
.mail-phone-fromto span{ color:var(--dim) }
.mail-subject{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:10px; line-height:1.35; word-break:break-word }
.mail-body{ font-size:13px; color:rgba(242,239,250,.82); line-height:1.55; white-space:pre-wrap; word-break:break-word }

.laptop-mockup{ width:100%; max-width:440px; flex:1; min-width:280px }
.laptop-screen{
  background:#0B0A18; border:7px solid #1C1930; border-radius:14px 14px 3px 3px;
  overflow:hidden; box-shadow:0 24px 55px rgba(0,0,0,.45);
}
.laptop-bar{ display:flex; gap:6px; padding:10px 14px; background:#15121F }
.laptop-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(242,239,250,.15) }
.laptop-bar span:nth-child(1){ background:#FF5F57 }
.laptop-bar span:nth-child(2){ background:#FEBC2E }
.laptop-bar span:nth-child(3){ background:#28C840 }
.laptop-mailhead{ padding:16px 20px 14px; border-bottom:1px solid rgba(242,239,250,.08) }
.laptop-mailhead-row{ display:flex; gap:8px; font-size:12.5px; color:var(--dim); margin-bottom:4px; word-break:break-word }
.laptop-mailhead-label{ width:24px; flex:none; color:rgba(155,150,176,.65) }
.laptop-subject{ font-size:17px; font-weight:750; color:var(--ink); margin-top:8px; word-break:break-word }
.laptop-body{
  padding:18px 20px 26px; font-size:13.5px; color:rgba(242,239,250,.82);
  line-height:1.6; white-space:pre-wrap; word-break:break-word; min-height:150px;
}
.laptop-base{
  width:112%; margin-left:-6%; height:13px;
  background:linear-gradient(180deg,#1C1930,#100D1A); border-radius:0 0 9px 9px;
  position:relative;
}
.laptop-base::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:86px; height:4px; background:#2A2540; border-radius:0 0 4px 4px;
}

/* ---- Carte d'abonnement, portail pro — mêmes couleurs que dans l'app ---- */
.sub-card{
  border-radius:20px; overflow:hidden; margin-bottom:20px;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.sub-card-head{ padding:24px; transition:background .2s }
.sub-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.sub-card-eyebrow{ font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.85); font-weight:750 }
.sub-card-status{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:650; color:rgba(255,255,255,.9); white-space:nowrap }
.sub-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none }
.sub-dot-on{ background:#4ce68c }
.sub-dot-off{ background:#ff5a6e }
.sub-card-name{ margin:0; font-size:34px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.1 }
.sub-card-body{ background:rgba(255,255,255,.03) }

.sub-feature{
  display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:14px;
  border-top:1px solid var(--line);
}
.sub-feature-icon{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:750;
}
.sub-feature-icon.on{ background:rgba(76,230,140,.15); color:#4ce68c }
.sub-feature-icon.off{ background:rgba(155,150,176,.12); color:var(--dim) }

@media (max-width:640px){
  .sub-card-head{ padding:20px }
  .sub-card-name{ font-size:28px }
  .sub-card-top{ flex-wrap:wrap; gap:8px }
  .sub-feature{ padding:13px 18px; font-size:13.5px }
}

/* ---- Tableau comparatif des paliers gérant — Pro mis en avant ---- */
.plans-grid3{
  max-width:1080px; margin:0 auto; padding:10px 24px 14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  align-items:stretch; position:relative; z-index:1;
}
/* Sur téléphone, empiler les 3 cartes obligeait à descendre toute la
   page pour comparer. À la place : un carrousel horizontal, une carte
   large à la fois, qu'on compare en swipant plutôt qu'en scrollant. */
@media (max-width:860px){
  .plans-grid3{
    display:flex; grid-template-columns:none; max-width:none;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:16px;
    padding:10px 24px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .plans-grid3::-webkit-scrollbar{ display:none }
  .plans-grid3 .plan-col{ flex:0 0 82%; max-width:340px; scroll-snap-align:center }
}

.plans-dots{ display:none; align-items:center; justify-content:center; gap:8px; margin:0 0 26px }
@media (max-width:860px){ .plans-dots{ display:flex } }
.plans-dot{
  width:7px; height:7px; border-radius:50%; background:rgba(242,239,250,.18);
  transition:background .2s, transform .2s; padding:0; border:none;
}
.plans-dot.active{ background:linear-gradient(135deg,var(--iris),var(--iris-2)); transform:scale(1.35) }

/* ---- Tableau comparatif — une ligne par fonctionnalité, une colonne
   par palier. Colonne des libellés fixée à gauche (position:sticky) en
   défilant horizontalement sur mobile, pour toujours savoir quelle
   ligne on regarde même une fois les paliers scrollés hors champ. ---- */
.comparison-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.012);
  padding-top:4px;
}
.comparison-table{ width:100%; border-collapse:collapse; min-width:600px }
/* Téléphone : plus de défilement sur le côté. Chaque fonctionnalité
   prend toute la largeur, les paliers s'alignent en dessous. */
@media (max-width:640px){
  .comparison-wrap{ overflow-x:visible; border-radius:16px }
  .comparison-table, .comparison-table thead, .comparison-table tbody{ display:block; min-width:0 }
  .comparison-table tr{ display:grid; grid-template-columns:repeat(var(--plan-count,4),minmax(0,1fr)) }
  .comparison-table thead th.comparison-feat-col, .comparison-cta-row td.comparison-feat-col{ display:none }
  .comparison-table thead th{ padding:30px 3px 12px; display:block }
  .comparison-table td{ padding:7px 3px 12px; font-size:11.5px; overflow-wrap:anywhere; display:block }
  .comparison-table td.comparison-feat-col{
    grid-column:1 / -1; position:static; min-width:0; max-width:none; box-shadow:none;
    background:rgba(255,255,255,.035); padding:10px 12px 8px; border-bottom:none; font-size:13px;
  }
  .comparison-table thead th .plan-tag, .comparison-table thead th .plan-tag-gold{
    white-space:normal; font-size:9.5px; padding:4px 6px; margin:0 0 8px; line-height:1.2; max-width:100%;
  }
  .comparison-th-name{ font-size:12.5px }
  .comparison-th-price{ font-size:14px; white-space:nowrap }
  .comparison-th-price span{ display:block; font-size:10px }
  .comparison-table thead th .plan-tag, .comparison-table thead th .plan-tag-gold{ border-radius:9px }
  .comparison-cta-btn{ padding:8px 4px !important; font-size:11.5px !important; white-space:normal; width:100% }
}
.comparison-table th, .comparison-table td{
  padding:13px 10px; text-align:center; border-bottom:1px solid var(--line); font-size:12.5px;
}
.comparison-table tbody tr:last-child td{ border-bottom:none }
.comparison-feat-col{
  position:sticky; left:0; z-index:2;
  text-align:left !important; font-weight:650; font-size:12.5px; color:var(--ink);
  background:var(--paper); min-width:150px; max-width:150px;
  box-shadow:1px 0 0 var(--line);
}
.comparison-table thead th{
  padding:34px 12px 16px; position:relative; border-bottom:2px solid var(--line); vertical-align:bottom;
}
.comparison-th-name{ font-size:14.5px; font-weight:750; margin-bottom:2px; color:var(--ink) }
.comparison-th-price{ font-size:17px; font-weight:800; color:var(--ink) }
.comparison-th-price span{ font-size:11px; font-weight:500; color:var(--dim) }

/* ---- Pro et Premium ressortent comme de vrais blocs surélevés au
   sein du tableau — bordure colorée sur toute la hauteur de la
   colonne (pas juste un fond teinté), arrondie en haut et en bas
   exactement là où le tableau lui-même a ses coins arrondis. ---- */
.comparison-col-highlight{
  background:rgba(123,92,255,.08);
  border-left:1.5px solid rgba(123,92,255,.45); border-right:1.5px solid rgba(123,92,255,.45);
}
.comparison-col-premium{
  background:rgba(232,169,61,.07);
  border-left:1.5px solid rgba(232,169,61,.45); border-right:1.5px solid rgba(232,169,61,.45);
}
.comparison-col-essentiel{ background:rgba(107,173,250,.055) }
thead .comparison-col-highlight{ border-top:1.5px solid rgba(123,92,255,.45); border-radius:16px 16px 0 0 }
thead .comparison-col-premium{ border-top:1.5px solid rgba(232,169,61,.45); border-radius:16px 16px 0 0 }
.comparison-cta-row .comparison-col-highlight{ border-bottom:1.5px solid rgba(123,92,255,.45); border-radius:0 0 16px 16px }
.comparison-cta-row .comparison-col-premium{ border-bottom:1.5px solid rgba(232,169,61,.45); border-radius:0 0 16px 16px }

.comparison-icon{ display:inline-block; margin-right:3px; font-weight:800; font-size:12px }
.comparison-icon.on{ color:#4ce68c }
.comparison-icon.off{ color:#ff5a6e }
.comparison-value{ color:var(--ink) }
.comparison-value.off{ color:var(--dim) }
.comparison-cta-row td{ border-bottom:none !important; padding:18px 10px 20px; vertical-align:middle }
.comparison-cta-row .comparison-feat-col{ background:var(--paper) }
.comparison-cta-btn{ width:100%; white-space:nowrap; box-sizing:border-box; display:block }

/* Étiquette "Meilleur rapport qualité-prix" / "Le plus complet" — la
   version .plan-tag de base est pensée pour déborder au-dessus d'une
   carte (position absolute, top négatif) ; dans un tableau, ça se
   fait couper par l'arrondi du conteneur. Ici, on la remet dans le
   flux normal, posée proprement en haut de la cellule d'en-tête. */
.comparison-table thead th .plan-tag,
.comparison-table thead th .plan-tag-gold{
  position:static; transform:none; display:inline-block; margin:0 0 12px;
}

/* ---- Info-bulle par ligne — clic/tap plutôt que survol (fiable sur
   mobile aussi), une seule ouverte à la fois. ---- */
.comparison-feat-label{ cursor:pointer; display:inline-flex; align-items:center; gap:5px; user-select:none }
.comparison-feat-label:hover{ color:#fff }
.comparison-info-icon{ font-size:11px; color:var(--dim); opacity:.65; flex:none }
.comparison-feat-desc{
  margin-top:7px; font-size:11.5px; font-weight:400; color:var(--dim); line-height:1.5;
  max-width:220px;
}
.comparison-feat-desc.hidden{ display:none }
@media (max-width:640px){
  .comparison-feat-col{ min-width:120px; max-width:120px; font-size:11.5px }
  .comparison-table th, .comparison-table td{ padding:11px 8px; font-size:11.5px }
  .comparison-th-name{ font-size:13px }
  .comparison-th-price{ font-size:15px }
}

.plan-col{
  border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.015);
  display:flex; flex-direction:column; overflow:visible; position:relative;
}
.plan-col-highlight{
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg,#7B5CFF,#C86DD7) border-box;
  box-shadow:0 20px 45px rgba(123,92,255,.25);
}

/* Premium : traitement doré distinct du violet de Pro — pas surélevé
   (Pro reste le choix visuellement dominant), mais assez marqué pour
   qu'on comprenne au premier coup d'œil que c'est le palier du dessus,
   et pour que ça reste désirable plutôt que juste "plus cher". */
.plan-col-premium{
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg,#E8A93D,#F5D67B) border-box;
  box-shadow:0 14px 34px rgba(232,169,61,.16);
}

.plan-tag-gold{
  background:linear-gradient(135deg,#E8A93D,#F5D67B); color:#2B1B04;
  box-shadow:0 6px 16px rgba(232,169,61,.4);
}

.plan-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#7B5CFF,#C86DD7); color:#fff;
  font-size:11.5px; font-weight:750; padding:6px 16px; border-radius:100px;
  white-space:nowrap; box-shadow:0 6px 16px rgba(123,92,255,.4);
}

.plan-col-head{ padding:24px 22px 18px; text-align:center }
.plan-col-name{ margin:0 0 6px; font-size:19px; font-weight:750; letter-spacing:-.01em }
.plan-col-price{ margin:0; font-size:32px; font-weight:800 }
.plan-col-price span{ font-size:13px; font-weight:500; color:var(--dim) }

.plan-col-rows{ padding:4px 22px; flex:1 }

/* ---- Chiffres clés en avant — nombre de fiches et boosts, les deux
   vrais déclencheurs de montée en gamme, avant même les lignes de
   détail. Poids visuel qui grandit avec le palier : petit et sobre
   sur Essentiel, marqué sur Pro, doré et animé sur Premium. ---- */
.plan-hero-stats{
  display:flex; gap:10px; padding:0 22px 18px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.plan-hero-stat{
  flex:1; text-align:center; padding:14px 8px; border-radius:14px;
  background:rgba(255,255,255,.025);
}
.plan-hero-stat-value{
  display:block; font-family:var(--font-display); font-size:26px; font-weight:800;
  letter-spacing:-.01em; line-height:1.1; margin-bottom:3px; color:var(--ink);
}
.plan-hero-stat-value.off{ color:var(--dim); font-size:20px }
.plan-hero-stat-label{ display:block; font-size:11px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.03em }

/* Pro : la valeur ressort dans le violet de la carte */
.plan-col-highlight .plan-hero-stat-value{ color:#C9BEFF }

/* Premium : "Illimité" en particulier mérite de vraiment se voir —
   dégradé doré + petit effet de brillance qui balaie le texte en
   boucle, pour que ce soit LE chiffre qu'on retient de toute la grille. */
.plan-col-premium .plan-hero-stat-value{
  background:linear-gradient(90deg,#E8A93D,#F5D67B,#E8A93D);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:plan-shine 3s linear infinite;
}
@keyframes plan-shine{
  to{ background-position:-200% center }
}
@media (prefers-reduced-motion: reduce){
  .plan-col-premium .plan-hero-stat-value{ animation:none; background-position:0 center }
}

/* ---- Palier Gratuit — bande horizontale à part, sous les 3 offres
   payantes plutôt qu'une 4e colonne. C'est un choix différent (pas
   un cran en dessous d'Essentiel), donc mérite un traitement visuel
   distinct plutôt que de rentrer dans la même grille de comparaison. ---- */
.plan-free-strip{
  max-width:1080px; margin:18px auto 0; padding:22px 26px;
  border:1px dashed var(--line); border-radius:18px;
  background:rgba(255,255,255,.012);
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.plan-free-head{ flex:none; min-width:110px }
.plan-free-name{ margin:0 0 2px; font-size:16px; font-weight:750 }
.plan-free-price{ margin:0; font-size:20px; font-weight:800; color:var(--dim) }
.plan-free-feats{ flex:1; min-width:260px; display:flex; flex-wrap:wrap; gap:16px 30px }
.plan-free-feat{ display:flex; flex-direction:column; gap:2px }
.plan-free-feat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim) }
.plan-free-feat-value{ font-size:13.5px; font-weight:650 }
.plan-free-feat-value.off{ color:var(--dim); font-weight:500 }
.plan-free-btn{ flex:none; white-space:nowrap; padding:11px 22px; font-size:14px }

@media (max-width:760px){
  .plan-free-strip{ flex-direction:column; align-items:stretch; text-align:center; padding:22px 20px }
  .plan-free-head{ text-align:center }
  .plan-free-feats{ justify-content:center; gap:14px 22px; text-align:center }
  .plan-free-feat{ align-items:center }
  .plan-free-btn{ width:100% }
}
.plan-row{
  display:flex; flex-direction:column; gap:2px; padding:11px 0;
  border-top:1px solid var(--line);
}
.plan-row:first-child{ border-top:none }
.plan-row-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim) }
.plan-row-value{ font-size:14px; font-weight:600; word-break:break-word }
.plan-row-value.off{ color:var(--dim); font-weight:500 }

/* Accordéon des lignes supplémentaires — replié par défaut sur mobile
   pour ne pas transformer 3 cartes empilées en mur de scroll interminable. */
.plan-rows-collapsible{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.plan-rows-collapsible-inner{ overflow:hidden; min-height:0 }
.plan-rows-collapsible.expanded{ grid-template-rows:1fr }

.plan-toggle{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:2px; padding:12px 0 4px; border:none; background:none;
  color:var(--iris); font-size:13px; font-weight:650; cursor:pointer;
  font-family:inherit;
}
.plan-toggle:hover{ color:var(--iris-2) }
.plan-toggle-chevron{ transition:transform .3s ease; flex:none }
.plan-toggle[aria-expanded="true"] .plan-toggle-chevron{ transform:rotate(180deg) }

/* Sur desktop, les 3 colonnes ont largement la place : tout reste
   visible en permanence et le bouton disparaît. */
@media (min-width:861px){
  .plan-rows-collapsible{ grid-template-rows:1fr !important }
  .plan-toggle{ display:none }
}

/* Sélecteur à deux classes, pour l'emporter sur .btn.block (width:100%)
   déjà défini ailleurs sur le site — sans ça le bouton déborde de sa
   carte au lieu de rester bien contenu dedans. */
.btn.plan-col-btn{
  display:block; box-sizing:border-box;
  margin:18px 22px 22px; width:calc(100% - 44px);
  text-align:center;
}