/* ============================================================
   Leadsoon — feuille de style unique.
   Trois contextes : site vitrine (.mode-site), application
   connectée (.mode-app), page imprimable (.mode-print).
   ============================================================ */

:root{
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  /* Contour des boutons sans fond : --line suffit a separer deux surfaces,
     pas a dessiner un bouton sur le fond de page (1,48 de contraste). */
  --line-btn:#7c8aa3;
  --line:#e2e8f0;
  --line-2:#f1f5f9;
  --bg:#ffffff;
  --surface:#ffffff;            /* cartes, panneaux, champs */
  --surface-flou:rgba(255,255,255,.9); /* barres collantes translucides */
  --bg-2:#f8fafc;
  --brand:#4f46e5;
  --brand-2:#6366f1;
  --brand-soft:#eef2ff;
  --lien:#4f46e5;               /* couleur des liens : distincte du fond de bouton */
  --sky:#0ea5e9;
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -24px rgba(15,23,42,.28);
  /* Teintes d'ECRITURE : les tons 500 de la palette portent bien un
     aplat, pas un texte sur fond clair. Ces trois-la sont assombris
     pour ca, et la feuille sombre les rouvre dans l'autre sens. */
  --accent-txt:#4338ca;         /* texte ou icone sur --brand-soft */
  --ok-txt:#047857;             /* petite variation positive */
  /* Les deux traits du graphique. */
  --g1:#6366f1; --g2:#0284c7;
  /* Quatre parts d'anneau, ecartees deux a deux. */
  --d1:#4338ca; --d2:#0284c7; --d3:#9333ea; --d4:#db2777;
  --crayon:#16a34a;             /* trait de crayon autour du prix */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* La barre de navigation est collante : sans ce retrait, un saut d'ancre
   pose la cible a zero et la barre recouvre son titre. Vaut pour les liens
   internes comme pour scrollIntoView(). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--lien);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:2rem;font-weight:800}
h2{font-size:1.5rem;font-weight:750}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.warn{color:#b45309;font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.mark{display:block;flex:0 0 auto}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  padding:.62em 1.05em;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.94rem;
  cursor:pointer;white-space:nowrap;transition:.15s ease;min-height:42px}
.btn:hover{text-decoration:none;border-color:#cbd5e1;background:var(--bg-2)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:#4338ca;border-color:#4338ca}
/* Un bouton sans contour ne se lit pas comme un bouton : « Retour » passait
   pour du texte inerte à côté de « Continuer ». Le filet le rend cliquable à
   l'œil, sans lui donner le poids de l'action principale. */
.btn-ghost{background:transparent;border-color:var(--line-btn);color:var(--ink-2)}
.btn-ghost:hover{background:var(--line-2);border-color:var(--muted);color:var(--ink)}
.btn-sm{padding:.42em .8em;font-size:.86rem;min-height:36px;border-radius:9px}
.btn-danger{color:var(--bad);border-color:#fecaca}
.btn-danger:hover{background:#fef2f2;border-color:#fca5a5}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Formulaires ---------- */
label{display:block;font-weight:600;font-size:.88rem;margin:0 0 .35em;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;padding:.62em .8em;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);min-height:44px}
textarea{min-height:110px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand-2)}
input:disabled{background:var(--bg-2);color:var(--muted)}
.field{margin-bottom:1.15rem}
.hint{font-size:.83rem;color:var(--muted);margin-top:.35em;line-height:1.5}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.input-unit{display:flex;align-items:stretch}
.input-unit input{border-radius:10px 0 0 10px}
.input-unit span{display:flex;align-items:center;padding:0 .8em;border:1px solid var(--line);
  border-left:0;border-radius:0 10px 10px 0;background:var(--bg-2);color:var(--muted);
  font-size:.88rem;font-weight:600;white-space:nowrap}


/* ---------- Éléments communs ---------- */
.tag{display:inline-flex;align-items:center;gap:.3em;padding:.2em .6em;border-radius:999px;
  background:var(--line-2);color:var(--ink-2);font-size:.79rem;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{display:inline-block;padding:.14em .6em;border-radius:999px;font-size:.76rem;font-weight:700;
  color:var(--c,#64748b);background:color-mix(in srgb,var(--c,#64748b) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c,#64748b) 25%,var(--surface))}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;font-weight:700;font-size:.78rem;flex:0 0 auto}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.35rem}
.card + .card{margin-top:1rem}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.card-h h2,.card-h h3{margin:0}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.95rem 1.05rem}
.stat b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.stat span{color:var(--muted);font-size:.83rem;font-weight:600;line-height:1.4;display:block;margin-top:.15rem}
.stat-fort{border-color:var(--brand);background:var(--brand-soft)}
.stat-fort b{color:var(--brand)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.8rem;margin-bottom:1.25rem}

.note{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:10px;padding:.85rem 1rem;font-size:.92rem;color:var(--ink-2);margin:1rem 0}
.note-warn{border-left-color:var(--warn);background:#fffbeb;border-color:#fde68a;color:#78350f}

.flash{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:1160px;margin:1rem auto 0;padding:.7em 1em;border-radius:10px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-weight:600;font-size:.92rem}
/* FILET ORANGE sur les messages d'ALERTE (22/08), comme .st-message et
   .st-reinit-conf : l'orange signale « il manque quelque chose », partout
   dans l'application. */
.flash-err{background:#fff7ed;border:2px solid #fb923c;color:#9a3412}
.flash-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.flash button{background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:inherit}

.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty h3{color:var(--ink)}

.puces{list-style:none;padding:0;margin:0 0 1rem}
.puces li{position:relative;padding:.3em 0 .3em 1.2em;font-size:.93rem;color:var(--ink-2)}
.puces li::before{content:"—";position:absolute;left:0;color:var(--muted)}
/* Variante « titre puis explication » : la description passe à la ligne. */
.puces-detail li{padding:.5em 0 .5em 1.2em}
.puces-detail li b{display:block;color:var(--ink)}
.puces-detail li span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;margin-top:.1rem}
.phases{margin:0 0 1rem;padding-left:1.3em}
.phases li{padding:.3em 0;font-size:.93rem;color:var(--ink-2)}
.check{list-style:none;padding:0;margin:0}
.check li{position:relative;padding:.35em 0 .35em 1.7em;font-size:.93rem;color:var(--ink-2)}
.check li::before{content:"☐";position:absolute;left:0;color:var(--brand);font-size:1.05em}
.croix{list-style:none;padding:0;margin:0}
.croix li{position:relative;padding:.35em 0 .35em 1.7em;font-size:.93rem;color:var(--ink-2)}
.croix li::before{content:"✕";position:absolute;left:.15em;color:var(--bad);font-weight:800;font-size:.85em}

/* ⚠ `.tbl` N'ÉTAIT DÉFINIE NULLE PART (01/09). Sept tableaux la portaient
   — portefeuille, résultats, pilotage, résultats des campagnes — et
   s'affichaient donc BRUTS : colonnes non alignées sur leurs entêtes,
   sans marge intérieure, larges de leur seul contenu. Rien ne le
   signalait : un tableau non stylé reste un tableau valide.
   `.res-tbl`, qui les rattrapait sur `resultats.php`, vit dans studio.css
   — une feuille que les pages client ne chargent pas. */
table.data,table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.tbl th{text-align:left;font-size:.77rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.5em .6em;border-bottom:1px solid var(--line);font-weight:700}
table.data td,table.tbl td{padding:.65em .6em;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data tr:last-child td,table.tbl tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.recap th{text-transform:none;font-size:.88rem;color:var(--ink-2);width:34%;border-bottom:1px solid var(--line-2)}
table.compare tr.ecart td{background:#fffbeb}
table.compare .verdict{font-weight:800;color:var(--ok)}
table.compare tr.ecart .verdict{color:var(--warn)}

.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.86rem}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:.4rem}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--sky));border-radius:99px}

/* ============================================================
   SITE VITRINE
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.08rem;color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-name span{color:var(--brand)}

.site-nav{position:sticky;top:0;z-index:30;background:var(--surface-flou);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:1.5rem;height:64px}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{color:var(--ink-2);font-weight:600;font-size:.93rem}
.nav-links a:hover{color:var(--brand);text-decoration:none}
.nav-cta{display:flex;gap:.5rem}
.nav-auth-mob{display:none}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;background:none;border:0;padding:8px;cursor:pointer;
  min-width:44px;min-height:44px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

.hero{padding:4.5rem 0 4rem;background:
  radial-gradient(60rem 30rem at 80% -10%, #eef2ff 0%, transparent 60%),
  radial-gradient(50rem 26rem at 5% 0%, #ecfeff 0%, transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{font-size:2.85rem;letter-spacing:-.035em;margin-bottom:.4em}
.hero .lead{font-size:1.1rem;color:var(--ink-2);max-width:34em}
/* Accroche courte : elle doit peser autant que le titre, sinon le hero sonne creux. */
.hero .lead-punch{font-size:1.3rem;line-height:1.5;color:var(--ink-2);max-width:26em}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;padding:.34em .85em;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.82rem;margin-bottom:1.1rem}
.eyebrow svg{width:16px;height:16px;flex:0 0 auto}

/* Les trois promesses. Une icone cerclee remplace le retour a la ligne :
   trois affirmations distinctes, et non une phrase de trois lignes. */
.hero-points{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:.75rem;max-width:26em}
.hero-points li{display:flex;align-items:center;gap:.7rem;
  font-size:1.02rem;line-height:1.4;color:var(--ink-2)}
.hero-pt-ico{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--surface);color:var(--brand-2)}
.hero-pt-ico svg{width:16px;height:16px}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.6rem 0 1rem}
.hero-cta .btn svg{width:17px;height:17px;flex:0 0 auto}

/* ---------- Carrousel de démonstration du hero ----------
   Trois cartes qui se construisent étape par étape. Sans JavaScript,
   la première reste affichée entièrement validée : le message passe
   quand même. */
.demo{position:relative}
/* Les cartes sont superposées mais gardent leur hauteur propre :
   sinon le bloc de résultat, tout en bas, se fait rogner. */
.demo-cards{position:relative;min-height:515px}
.demo-card{
  position:absolute;top:0;left:0;right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1);
}
.demo-card.on{opacity:1;transform:none;pointer-events:auto}
.demo-card.sortie{opacity:0;transform:translateY(-14px) scale(.985)}

.demo-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.demo-bar i{width:9px;height:9px;border-radius:50%;background:#e2e8f0;display:block}
.demo-body{padding:1.1rem 1.2rem 1.2rem}

.demo-champ{padding:.5rem 0;border-bottom:1px solid var(--line-2)}
.demo-champ span{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.demo-champ b{font-size:1rem;line-height:1.35;display:block;margin-top:.1rem}
/* L'offre tient sur une ligne ou sur deux selon l'exemple : on reserve les
   deux, sinon la carte grandit d'une ligne d'un exemple a l'autre. Seul le
   premier champ est concerne — le budget, lui, tient toujours sur une. */
.demo-gauche .demo-champ:first-child b{min-height:2.7em}

.demo-t{margin:.9rem 0 .5rem;font-size:.8rem;font-weight:700;color:var(--brand)}
.demo-etapes{list-style:none;padding:0;margin:0}
/* État par défaut = tout validé : si le JavaScript ne s'exécute pas,
   la carte reste lisible et complète. La classe .anime, posée par le
   script, active l'apparition progressive. */
.demo-etapes li{
  display:flex;align-items:center;gap:.55rem;padding:.32rem 0;font-size:.9rem;color:var(--ink);
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
}
.demo.anime .demo-etapes li:not(.ok){opacity:.4;transform:translateX(-4px);color:var(--muted)}
.coche{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  background:#dcfce7;color:#15803d;font-size:.72rem;font-weight:800;
  transition:background .35s ease, color .35s ease, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.demo.anime .demo-etapes li:not(.ok) .coche{background:var(--line-2);color:#94a3b8}
.demo.anime .demo-etapes li.ok .coche{transform:scale(1.12)}

.demo-res{
  padding:.85rem .7rem;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-2);text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .5s ease, transform .5s ease;
}
/* Avant sa revelation, le resultat n'est plus efface mais estompe : un cadre
   vide pendant deux secondes se lit comme un chargement en panne.
   Le degrade cede la place a un gris — on devine les chiffres sans pouvoir
   les prendre pour le resultat, qui arrive lui en couleur. Un simple
   `grayscale` ne suffisait pas : desaturer un violet sur un fond sombre
   donne un gris qui se confond avec ce fond (1,2:1). C'est donc la couleur
   du texte qu'on remplace, pas sa saturation. */
.demo.anime .demo-res:not(.vu){opacity:.6;transform:translateY(8px)}
.demo.anime .demo-res:not(.vu) b{background-image:none;color:var(--muted)}
.demo.anime .demo-res:not(.vu) em{background:var(--line-2);color:var(--muted)}
.demo-res b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.035em;line-height:1.05;
  background:linear-gradient(135deg,var(--brand),var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.demo-res span{display:block;font-size:.82rem;color:var(--ink-2);margin-top:.15rem}
.demo-res em{display:inline-block;margin-top:.5rem;font-style:normal;font-size:.78rem;
  font-weight:700;color:var(--accent-txt);background:var(--brand-soft);
  padding:.28em .8em;border-radius:999px}

.demo-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.3rem}
/* Le trait fait 26 x 5, la cible fait 38 x 33 : `content-box` peint le fond
   sur le seul contenu, la marge interieure ne sert qu'a attraper le pouce. */
.demo-dots button{width:26px;height:5px;border:0;padding:14px 6px;box-sizing:content-box;
  border-radius:99px;background:var(--line);background-clip:content-box;
  cursor:pointer;transition:background .3s ease}
.demo-dots button.on{background:var(--brand)}
.demo-dots button:hover{background:#c7d2fe}

@media (prefers-reduced-motion:reduce){
  .demo-card,.demo-etapes li,.demo-res,.coche{transition:none}
}


.section{padding:4.2rem 0}
.section-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:46rem;margin:0 auto 2.4rem;text-align:center}
.section-head h2{font-size:1.9rem}
.section-head p{color:var(--ink-2);font-size:1.02rem}

/* Une parole rapportée, donc de vrais guillemets — dessinés, pas tapés. Les
   chevrons « » se perdaient dans le texte à la même taille que lui ; ceux-ci
   encadrent le propos et disent d'un coup d'œil que quelqu'un parle.
   Ils sont purement décoratifs : `aria-hidden` n'existe pas sur un pseudo-
   élément, mais un lecteur d'écran ne lit pas le contenu généré des ::before
   dans la plupart des cas, et le sens du texte n'en dépend pas. */
/* Le retrait latéral suit la taille des guillemets : les agrandir sans le
   creuser les ferait mordre sur la première et la dernière ligne. */
.citation{position:relative;max-width:44rem;margin:0 auto;padding:0 4rem}
.citation p{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.citation::before,.citation::after{position:absolute;font-size:5rem;line-height:1;
  font-family:Georgia,"Times New Roman",serif;color:var(--brand);opacity:.42;
  pointer-events:none}
/* Guillemets ecrits en clair plutot qu'en echappement : la feuille est
   servie en UTF-8, et l'echappement hexadecimal a ete relu en route comme
   une sequence octale, ce qui affichait un C et un D a la place. */
.citation::before{content:"“";left:0;top:-.22em}
.citation::after{content:"”";right:0;bottom:-.42em}
@media(max-width:560px){
  .citation{padding:0 2.4rem}
  .citation::before,.citation::after{font-size:3.2rem}
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem;display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:1.3rem;align-items:center}
.feature-txt{min-width:0}
.feature-illu{color:var(--brand)}
.feature-illu svg{display:block;width:100%;height:auto}
@media(max-width:520px){
  .feature{grid-template-columns:1fr}
  .feature-illu{display:none}
}
.feature .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:1.25rem;margin-bottom:.9rem;font-weight:800}
.feature h3{margin-bottom:.35em}
.feature p{color:var(--muted);font-size:.93rem;margin:0}

.cta-line{margin-top:2rem;text-align:center;font-size:1.02rem;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem}

/* Chaîne du parcours : la campagne, le formulaire, le CRM, la relance, la mesure.
   Un fil relie les étapes pour qu'on lise une suite, pas une liste. */
.flux{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.flux::before{content:"";position:absolute;top:19px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--sky));opacity:.25}
.flux li{position:relative;text-align:center;padding-top:0}
.flux-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  margin:0 auto .7rem;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem;
  box-shadow:0 0 0 5px var(--bg)}
.section-alt .flux-n{box-shadow:0 0 0 5px var(--bg-2)}
.flux li b{display:block;font-size:.97rem;line-height:1.35;margin-bottom:.25rem}
.flux li span:not(.flux-n){display:block;font-size:.88rem;color:var(--muted);line-height:1.5}


.exemple{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.exemple-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem;display:flex;flex-direction:column}

/* Les deux colonnes ont la même hauteur — la grille l'impose — mais pas le même
   volume de texte : celle de gauche laissait 124 px de vide en bas contre 41 à
   droite. La liste prend la hauteur restante et répartit ses éléments dessus.
   Aucune taille de police ne change : c'est l'espacement qui absorbe l'écart. */
.exemple-col .ex-prep,.exemple-col .ex-suite{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:space-between;margin:0;padding:0;list-style:none}

/* Un mot du titre passe au degrade : c'est lui, desormais, qui distingue les
   deux cartes l'une de l'autre — « prepare » d'un cote, « ensuite » de
   l'autre. Le titre redevient une ligne simple. */
.exemple-col h3{margin-bottom:1.1rem;font-size:1.15rem}

/* Colonne de gauche : une liste de réglages, donc des coches. Le même signe
   que dans les vignettes du haut de page — la coche verte y valide déjà
   chaque étape préparée. */
.ex-prep li{display:grid;grid-template-columns:20px auto 1fr;gap:.1rem .6rem;
  align-items:baseline;font-size:.93rem;color:var(--ink-2)}
.ex-coche{grid-row:1;font-style:normal;font-size:.68rem;font-weight:800;
  width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(16,185,129,.14);color:#047857;transform:translateY(2px)}
/* Le vert vif de --ok tombe à 2,22:1 sur ce fond très pâle : on fonce
   pour le thème clair, et sombre.css remonte la teinte de l'autre côté. */
.ex-prep li b{color:var(--ink);font-weight:700}
.ex-prep li span{color:var(--muted)}

/* Colonne de droite : une suite d'événements, donc une chronologie. Le trait
   qui relie les pastilles est ce qui distingue « quatre points » de
   « quatre moments ». */
.ex-suite li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:.7rem;
  padding-bottom:.2rem}
.ex-suite li::before{content:"";position:absolute;left:12px;top:26px;bottom:-14px;width:2px;
  background:linear-gradient(var(--brand),rgba(79,70,229,.12))}
.ex-suite li.ex-fin::before{display:none}
.ex-num{grid-row:1;font-style:normal;font-size:.76rem;font-weight:800;
  width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);border:1.5px solid #c7d2fe}
.ex-fin .ex-num{background:var(--brand);color:#fff;border-color:var(--brand)}
.ex-suite li b{display:block;color:var(--ink);font-size:.93rem}
.ex-suite li span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;margin-top:.12rem}
.ex-fin b{color:var(--brand)}

/* Apparition échelonnée quand la section entre dans l'écran. La classe
   `anim` est posée par le script : sans script, tout est visible d'emblée. */
.exemple.anim li{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.exemple.anim.vu li{opacity:1;transform:none}
.exemple.anim.vu li:nth-child(1){transition-delay:.04s}
.exemple.anim.vu li:nth-child(2){transition-delay:.12s}
.exemple.anim.vu li:nth-child(3){transition-delay:.2s}
.exemple.anim.vu li:nth-child(4){transition-delay:.28s}
.exemple.anim.vu li:nth-child(5){transition-delay:.36s}
.exemple.anim.vu li:nth-child(6){transition-delay:.44s}
.exemple.anim.vu li:nth-child(7){transition-delay:.52s}
@media (prefers-reduced-motion: reduce){
  .exemple.anim li{opacity:1;transform:none;transition:none}
}

/* ---------- Estimateur : deux panneaux numerotes ----------
   Le choix se fait par tuiles plutot que par liste deroulante : huit
   activites visibles d'un coup valent mieux qu'un menu de vingt-deux entrees
   qu'il faut ouvrir pour decouvrir. Les quatorze autres restent accessibles
   derriere une neuvieme tuile. */
.estim2{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  gap:1.2rem;align-items:stretch;max-width:1000px;margin:0 auto}
/* Hauteur figee tant que les deux panneaux se font face : sans elle, le bloc
   passait de 439 a 516 px a la premiere selection, et les tuiles sautaient
   sous le curseur au moment meme du clic. La valeur correspond au contenu le
   plus haut, mesure sur les vingt-deux thematiques.
   Depuis la quatrieme rangee de tuiles, c'est le panneau de gauche qui fixe
   la hauteur (531 px) : ce plancher ne sert donc plus qu'a garantir la
   stabilite si l'on retirait des tuiles. On le laisse pour cette raison. */
.estim2-col{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.4rem;display:flex;flex-direction:column;
  min-height:32.25rem}
.estim2-col h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-size:1.05rem}
.estim2-num{color:var(--brand)}

.estim2-fleche{display:grid;place-items:center;color:var(--brand)}
.estim2-fleche svg{background:var(--surface);border:1px solid var(--line);
  border-radius:50%;padding:9px;width:20px;height:20px;box-sizing:content-box}

.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  border:0;padding:0;margin:0 0 1rem}
.tuile{position:relative;margin:0;cursor:pointer;display:block;
  background:none;border:0;padding:0;font:inherit;text-align:center;color:inherit}
.tuile input{position:absolute;opacity:0;width:0;height:0}
.tuile-in{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;height:100%;min-height:82px;padding:.7rem .4rem;
  border:1.5px solid var(--line);border-radius:14px;background:var(--bg-2);
  transition:.14s ease}
.tuile-ico svg{width:24px;height:24px;display:block;color:var(--ink-2)}
.tuile b{font-size:.86rem;font-weight:600;line-height:1.25;color:var(--ink)}
.tuile:hover .tuile-in{border-color:#c7d2fe;background:var(--brand-soft)}
.tuile input:checked + .tuile-in,.tuile.on .tuile-in{
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 1px var(--brand) inset}
.tuile input:checked + .tuile-in .tuile-ico svg,
.tuile.on .tuile-in .tuile-ico svg{color:var(--brand)}
.tuile input:focus-visible + .tuile-in,.tuile:focus-visible .tuile-in{
  outline:2px solid var(--brand-2);outline-offset:2px}
/* La pastille de validation n'apparait que sur la tuile choisie. */
.tuile-ok{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;
  display:none;place-items:center;font-size:.6rem;font-weight:800;
  background:var(--brand);color:#fff}
.tuile input:checked + .tuile-in .tuile-ok{display:grid}

.estim2-autres{margin:0 0 1rem}
.estim2-autres label{font-size:.86rem}

.estim2-info{display:flex;gap:.6rem;align-items:flex-start;margin:auto 0 0;
  padding:.75rem .85rem;border-radius:12px;background:var(--bg-2);
  border:1px solid var(--line);font-size:.86rem;line-height:1.5;color:var(--muted)}
.estim2-info-i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  background:var(--brand-soft);color:var(--brand)}

.estim2-apartir{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
/* Le panneau de droite est plus court que celui de gauche, qui fixe la
   hauteur : le prix prend la place laissee libre plutot que de la laisser en
   blanc sous le contenu. Pas de retour a la ligne a craindre — le montant le
   plus large de la base tient sur trois chiffres. */
/* Le prix est legerement rentre : le trait de crayon deborde a gauche, il
   lui faut la place de tourner sans mordre sur le bord du panneau. */
.estim2-prix{display:flex;align-items:baseline;gap:1.5rem;margin:.35rem 0 .3rem;
  flex-wrap:wrap;padding-left:1.35rem}
/* `position:relative` + `z-index:0` ouvrent un contexte d'empilement : le
   trait, en z-index negatif, reste derriere le chiffre sans passer sous le
   fond du panneau. */
.estim2-prix b{position:relative;z-index:0;font-size:5.5rem;font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--brand);
  padding:.06em .3em .04em .16em}
/* Le trait est un masque, pas une image coloree : une meme forme sert aux
   deux themes, et c'est la variable qui donne la teinte. Deux calques par
   trace : la boucle se dessine, les eclats arrivent ensuite.

   Trois series (a, b, c) tournent a tour de role. Chacune part d'un point
   different, deborde de son point de depart et repasse une fois sur une
   portion — c'est ce second passage, plus fin, qui donne le feutre plutot
   que l'ellipse. Sans elles, la meme courbe parfaite se rejouait a
   l'identique a chaque estimation, et l'effet main levee tombait. */
.estim2-prix b::before,.estim2-prix b::after{content:"";position:absolute;z-index:-1;
  inset:-.2em -.26em -.17em -.19em;background:var(--crayon);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.estim2-prix b::before{animation:crayon-trace .9s cubic-bezier(.35,.9,.4,1) both}
.estim2-prix b::after{transform-origin:88% 30%;
  animation:crayon-eclat .35s ease-out .8s both}

.crayon-a b::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='5.5' d='M196 18C152 4 88 4 50 22 12 40 2 74 20 99c18 25 72 37 124 33 50-4 92-26 102-55 8-23-9-43-40-53'/%3E%3Cpath stroke-width='3' d='M186 26c25 13 36 31 30 48-7 20-33 35-68 42'/%3E%3Cpath stroke-width='1.8' stroke-dasharray='16 9 26 7 12 10' d='M58 28C94 13 145 10 184 20'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='5.5' d='M196 18C152 4 88 4 50 22 12 40 2 74 20 99c18 25 72 37 124 33 50-4 92-26 102-55 8-23-9-43-40-53'/%3E%3Cpath stroke-width='3' d='M186 26c25 13 36 31 30 48-7 20-33 35-68 42'/%3E%3Cpath stroke-width='1.8' stroke-dasharray='16 9 26 7 12 10' d='M58 28C94 13 145 10 184 20'/%3E%3C/svg%3E")}
.crayon-a b::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M248 18 262 1M264 38 280 32M254 58 268 63'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M248 18 262 1M264 38 280 32M254 58 268 63'/%3E%3C/svg%3E")}
.crayon-b b::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='6' d='M52 106C28 87 24 57 48 36 72 15 128 4 176 9c47 5 79 28 81 56'/%3E%3Cpath stroke-width='3.8' d='M258 66c0 27-37 50-87 57-44 6-91-3-114-21'/%3E%3Cpath stroke-width='1.8' stroke-dasharray='12 8 28 6 18 9' d='M72 112c37 14 86 16 126 8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='6' d='M52 106C28 87 24 57 48 36 72 15 128 4 176 9c47 5 79 28 81 56'/%3E%3Cpath stroke-width='3.8' d='M258 66c0 27-37 50-87 57-44 6-91-3-114-21'/%3E%3Cpath stroke-width='1.8' stroke-dasharray='12 8 28 6 18 9' d='M72 112c37 14 86 16 126 8'/%3E%3C/svg%3E")}
.crayon-b b::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M262 14 272 0M268 42 280 37M258 62 270 67'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M262 14 272 0M268 42 280 37M258 62 270 67'/%3E%3C/svg%3E")}
.crayon-c b::before,.crayon-c b::after{inset:-.26em -.3em -.3em -.34em}
.crayon-c b::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='5.5' d='M36 24c58-8 126-9 208-4'/%3E%3Cpath stroke-width='5.5' d='M248 14c6 30 7 62 3 92'/%3E%3Cpath stroke-width='5.5' d='M254 108c-68 8-140 9-214 3'/%3E%3Cpath stroke-width='5.5' d='M34 112C28 84 28 52 32 18'/%3E%3Cpath stroke-width='2.6' d='M40 34c1-9 1-15 0-21'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='5.5' d='M36 24c58-8 126-9 208-4'/%3E%3Cpath stroke-width='5.5' d='M248 14c6 30 7 62 3 92'/%3E%3Cpath stroke-width='5.5' d='M254 108c-68 8-140 9-214 3'/%3E%3Cpath stroke-width='5.5' d='M34 112C28 84 28 52 32 18'/%3E%3Cpath stroke-width='2.6' d='M40 34c1-9 1-15 0-21'/%3E%3C/svg%3E")}
.crayon-c b::after{transform-origin:50% 60%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M24 14 12 0M14 32 2 26M28 44 16 50'/%3E%3Cpath stroke-width='4' d='M56 126c50-8 106-9 158-3'/%3E%3Cpath stroke-width='3' stroke-dasharray='22 8 34 7' d='M68 133c42-6 88-7 128-2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 140' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='3.6' d='M24 14 12 0M14 32 2 26M28 44 16 50'/%3E%3Cpath stroke-width='4' d='M56 126c50-8 106-9 158-3'/%3E%3Cpath stroke-width='3' stroke-dasharray='22 8 34 7' d='M68 133c42-6 88-7 128-2'/%3E%3C/svg%3E")}

/* Le trace est un devoilement de gauche a droite : `clip-path` s'anime
   partout, la ou un `stroke-dashoffset` demanderait un vrai SVG dans la page
   — donc le meme dessin ecrit deux fois, cote serveur et cote script. */
@keyframes crayon-trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes crayon-eclat{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .estim2-prix b::before,.estim2-prix b::after{animation:none;clip-path:none;opacity:1;transform:none}
}

.estim2-prix span{font-size:1.15rem;color:var(--muted)}
.estim2-quoi{margin:0 0 1.35rem;font-size:.86rem;line-height:1.45;
  color:var(--muted);min-height:2.9em}

.estim2-crit{padding:.9rem 1rem;border-radius:14px;background:var(--bg-2);
  border:1px solid var(--line)}
.estim2-crit b{display:block;font-size:.86rem;font-weight:700;margin-bottom:.55rem}
.estim2-crit ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.estim2-crit li{display:flex;align-items:flex-start;gap:.5rem;
  font-size:.86rem;color:var(--ink-2);line-height:1.45}
.estim2-crit i{flex:0 0 auto;font-style:normal;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:.6rem;font-weight:800;
  background:rgba(16,185,129,.14);color:#047857;margin-top:.1rem}

/* `margin-top:auto` colle cette ligne au bas du panneau : le peu d'espace
   qui reste apres l'agrandissement du prix se loge au-dessus d'elle, plutot
   que de s'accumuler sous le dernier element. */
.estim2-maj{margin:auto 0 0;padding-top:.9rem;font-size:.86rem;line-height:1.5;
  color:var(--muted);min-height:3em}
/* Le conteneur de resultat doit lui-meme s'etirer et distribuer : sans cela
   le `margin-top:auto` de la derniere ligne ne s'applique a rien, puisqu'elle
   n'est pas fille directe du panneau. */
.estim2-res #estimRes{flex:1 1 auto;display:flex;flex-direction:column}
/* L'appel a l'action ferme le simulateur : il occupe toute la largeur des
   deux panneaux, centre, hors de la grille. */
.estim2-cta{margin-top:1.5rem;text-align:center}
.estim2-cta .btn{padding:.75em 1.5em;font-size:1rem;min-height:48px}
.estim2-cta .btn svg{width:17px;height:17px;flex:0 0 auto}

.estim2-res .estim-vide,.estim2-res .estim-attente{margin:auto 0;text-align:center;
  color:var(--muted);font-size:.92rem}

@media(max-width:900px){
  .estim2{grid-template-columns:1fr;gap:1rem}
  /* Empiles, les panneaux n'ont plus a s'egaler : une hauteur reservee ne
     ferait qu'un grand vide sous le panneau de droite. */
  .estim2-col{min-height:0}
  /* La fleche marque un passage de gauche a droite : a la verticale, elle
     doit pointer vers le bas. */
  .estim2-fleche{transform:rotate(90deg)}
}
@media(max-width:560px){
  /* Empilee, la mention se centre et passe a 80 % de sa taille — elle
     explique le prix, elle ne le porte pas. La pastille reste sur la LIGNE
     du texte : posee au-dessus, elle se lisait comme un titre. */
  .estim2-info{align-items:center;justify-content:center;text-align:center;
    gap:.5rem;font-size:.688rem;line-height:1.55}
}
@media(max-width:460px){
  .tuiles{grid-template-columns:repeat(2,1fr)}
  .estim2-prix b{font-size:3.2rem}
}


/* ---------- Simulateur de tarif au prospect ---------- */
.simu{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow)}
/* Les étapes se dévoilent l'une après l'autre : le visiteur ne voit
   jamais un champ dont il ne comprend pas encore la question. */
.simu-etape{display:grid;grid-template-columns:32px 1fr;gap:.9rem;align-items:start}
.simu-etape + .simu-etape{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line-2)}
.simu-etape .field{margin:0}
/* ⚠ TOUT CE QUI N'EST PAS LA PASTILLE VA EN COLONNE 2 (01/09).
   La grille a deux colonnes — la pastille, puis le contenu — et
   l'étape 1 n'a justement que ces deux enfants. Mais l'étape 2 en a
   QUATRE : la pastille, le budget, l'objectif, le bouton. Le placement
   automatique les distribue alors en alternance, et l'objectif se
   retrouvait dans la colonne de 32 px de la pastille — son libellé
   replié un mot par ligne, son champ réduit à rien.
   Nommé par la NÉGATIVE exprès : un cinquième enfant ajouté demain
   tombera au bon endroit sans qu'on ait à y penser. */
.simu-etape > :not(.simu-n){grid-column:2}
.simu-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:800;font-size:.9rem;margin-top:1.7rem}
.simu-etape[hidden]{display:none}
.simu-res{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;
  padding-top:1.4rem;border-top:1px solid var(--line-2)}
.simu-prix,.simu-total{text-align:center}
.simu-prix span,.simu-total span{display:block;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.simu-prix b,.simu-total b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:.15rem 0}
.simu-prix b{background-image:linear-gradient(135deg,var(--brand),var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.simu-prix em,.simu-total em{display:block;font-style:normal;font-size:.84rem;color:var(--muted)}
.simu-prix em{color:var(--ok);font-weight:600}
.simu-cta{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-2)}
.simu-cta .muted{font-size:.86rem}
.simu-affinage{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  padding-top:1.2rem;margin-top:1.3rem;border-top:1px solid var(--line-2)}
.simu-affinage .field{margin:0}

.simu-sortie{max-width:820px;margin:1.25rem auto 0}
.simu-bloc{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.2rem 1.35rem;margin-top:1rem}
.simu-bloc h3{margin-bottom:.8rem}
.simu-sortie .simu-res{margin-top:0;padding-top:0;border-top:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem}
.simu-total b.fourchette{font-size:1.8rem;letter-spacing:-.02em}
table.data tr.ok td{background:var(--brand-soft)}

/* La provenance n'est pas une note de bas de page : c'est ce qui
   sépare une estimation d'une invention. */
.provenance{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.2rem 1.35rem;margin-top:1rem}
.provenance p{font-size:.92rem;color:var(--ink-2)}
.sources{list-style:none;padding:0;margin:0;font-size:.88rem}
.sources li{padding:.28em 0;border-top:1px solid var(--line-2);color:var(--ink-2)}
.sources li:first-child{border-top:0}

.inclus{max-width:820px;margin:1.5rem auto 0;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.3rem 1.5rem}
.inclus h3{margin-bottom:.8rem}
.inclus ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.4rem 1.5rem}
.inclus li{position:relative;padding:.25em 0 .25em 1.6em;font-size:.94rem;color:var(--ink-2)}
.inclus li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;position:relative}
.plan.pop{border-color:var(--brand);box-shadow:var(--shadow)}
.plan .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:.74rem;font-weight:700;
  padding:.25em .8em;border-radius:999px;white-space:nowrap}
.plan .price{font-size:2.3rem;font-weight:800;letter-spacing:-.03em}
.plan .price small{font-size:.95rem;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:1.2rem 0}
.plan li{padding:.4em 0 .4em 1.6em;position:relative;font-size:.93rem;color:var(--ink-2)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

.site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding:3rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot-grid h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.foot-grid a:not(.brand){display:block;color:var(--ink-2);font-size:.91rem;padding:.18em 0}
.foot-grid p{font-size:.91rem;margin-top:.8rem}
/* Sélecteur de thème : deux positions, la courante en surbrillance. */
.theme-switch{display:inline-flex;padding:2px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface)}
.theme-switch a{padding:.25em .75em;border-radius:999px;font-size:.8rem;font-weight:600;
  color:var(--muted);line-height:1.5}
.theme-switch a:hover{color:var(--ink);text-decoration:none}
.theme-switch a.on{background:var(--brand);color:#fff}

.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem;font-size:.84rem;color:var(--muted)}

.auth{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;
  background:radial-gradient(50rem 30rem at 50% -10%, #eef2ff, transparent 60%)}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow)}
.auth-card .brand{margin-bottom:1.5rem}
.auth-alt{text-align:center;font-size:.9rem;color:var(--muted);margin-top:1.2rem}

/* ============================================================
   APPLICATION
   ============================================================ */
.mode-app{background:var(--bg-2)}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:25}
.side-top{padding:1.05rem 1.1rem;border-bottom:1px solid var(--line-2)}
.side-nav{padding:.8rem .7rem;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
/* ⚠ CES REGLES NE VISENT PLUS QUE LE PIED DU TIROIR. La nav est faite de
   briques depuis le 23/09 ; en la gardant dans le selecteur, `.side-nav a.on`
   (0,2,1) battait `.brique.on` (0,2,0) et repeignait la page courante en
   blanc — la couleur, qui EST l'identite de l'entree, disparaissait sur la
   seule entree qu'on regarde. */
.side-bottom a{display:flex;align-items:center;gap:.7rem;padding:.62em .75em;border-radius:9px;
  color:var(--ink-2);font-weight:600;font-size:.92rem}
.side-bottom a:hover{background:var(--line-2);text-decoration:none;color:var(--ink)}
.side-bottom{padding:.7rem;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px}
.side-bottom .muted-link{font-size:.84rem;color:var(--muted);padding:.35em .75em}

.app-main{min-width:0;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.4rem;background:var(--surface-flou);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);min-height:60px}
.top-title{font-size:.9rem;color:var(--muted);font-weight:600}
.top-right{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.app-body{padding:1.6rem 1.4rem 4rem;max-width:1160px;width:100%}
.side-scrim{display:none}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:1.4rem;flex-wrap:wrap}
.page-head h1{font-size:1.6rem;margin:0}
.page-head .sub{color:var(--muted);margin:.25rem 0 0;font-size:.94rem}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}


/* Lignes de campagne */
.row{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:.7rem}
.card .row{border:0;border-bottom:1px solid var(--line-2);border-radius:0;margin:0;padding:.9rem 0}
.card .row:last-child{border-bottom:0}
.card[style*="padding:0"] .row{padding:1rem 1.1rem 0}
.row-main{display:flex;gap:.85rem;min-width:0;flex:1}
.row-ico{font-size:1.5rem;line-height:1.3;flex:0 0 auto}
.row-id{min-width:0}
.row-name{font-weight:700;font-size:1.02rem;color:var(--ink)}
.row-name:hover{color:var(--brand)}
.row-meta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;font-size:.84rem;color:var(--muted);margin-top:.25rem}
.row-side{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.row-est{text-align:right}
.row-est b{display:block;font-weight:800;font-size:1rem}
.row-est span{font-size:.76rem;color:var(--muted)}
.parcours-head .sub{color:var(--muted);margin:.25rem 0 0;font-size:.94rem}
.etapes{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.2rem}
.etapes a{display:flex;align-items:center;gap:.4rem;padding:.35em .7em;border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.etapes a span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--line-2);font-size:.7rem;font-weight:800}
.etapes a:hover{text-decoration:none;border-color:#c7d2fe}
.etapes a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.etapes a.on span{background:rgba(255,255,255,.25)}
.etapes a.done{color:var(--brand);border-color:#c7d2fe}
.etapes a.done span{background:var(--brand-soft);color:var(--brand)}
.etape-card{padding:1.6rem}
.assist-ico.tourne{display:inline-block;animation:tourne 1.1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}


.props{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.5rem}
.prop{border:1px dashed #c7d2fe;background:var(--surface);color:var(--brand);border-radius:999px;
  padding:.32em .75em;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  text-align:left;max-width:100%}
.prop:hover{background:var(--brand-soft);border-style:solid}
.prop.on{background:var(--brand);border-color:var(--brand);color:#fff}
.props-offre .prop{white-space:normal;line-height:1.45}

/* Champ rempli par une proposition : signalé, puis neutre dès qu'on y touche */
select.propose,input.propose{border-color:var(--brand);background:var(--brand-soft)}
select.propose:focus,input.propose:focus{background:var(--surface)}
.aide-champs .puces{margin:.7rem 0 0}

/* ---------- Fiche de campagne ---------- */
.alertes{margin-bottom:1.4rem}
.alerte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;margin-bottom:.7rem;border-left:4px solid var(--line)}
.alerte-bloquant{border-left-color:var(--bad)}
.alerte-attention{border-left-color:var(--warn)}
.alerte-conseil{border-left-color:var(--sky)}
.alerte-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.alerte-h b{font-size:1rem}
.alerte-tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--surface));padding:.2em .6em;border-radius:999px;white-space:nowrap}
.alerte p{margin:0 0 .4em;font-size:.93rem;color:var(--ink-2)}
.alerte-action{color:var(--ink)!important}

.bloc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;margin-bottom:1rem}
.bloc-h{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.bloc-h h2{margin:0;font-size:1.15rem}
.bloc-n{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  background:var(--brand);color:#fff;font-size:.85rem;font-weight:800}
.bloc-why{color:var(--muted);font-size:.91rem;margin:0 0 1rem;max-width:60em}
.bloc h3{font-size:.83rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:1.1rem 0 .4rem}
.bloc h3:first-child{margin-top:0}
.grand{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;color:var(--brand);margin-bottom:.3rem}
.why{font-size:.93rem;color:var(--ink-2);border-left:2px solid var(--brand-soft);padding-left:.9rem;margin:.5rem 0}
.duo{display:grid;grid-template-columns:1fr 260px;gap:1.5rem;align-items:start}
.etiq{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:.3rem}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cols > div > p{font-size:.93rem}

/* Aperçus de publicités */
.annonces{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.annonce{border:1px solid var(--line);border-radius:14px;padding:1rem;background:var(--bg-2)}
.annonce .why{font-size:.86rem;border-left-color:#c7d2fe;margin-bottom:.8rem}
.apercu{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lecture-bandeau .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.constat{border-bottom:1px solid var(--line-2);padding:.8rem 0}
.constat:last-child{border-bottom:0;padding-bottom:0}
.constat b{font-size:.98rem}
.constat p{margin:.2rem 0 0;font-size:.92rem;color:var(--ink-2)}
.releve-form .field{margin:0}

/* ---------- Version imprimable ---------- */
.mode-print{background:var(--bg-2);padding:1.5rem}
.feuille{max-width:820px;margin:0 auto;background:var(--surface);padding:2.5rem;border-radius:8px;box-shadow:var(--shadow)}
.feuille section{margin-bottom:1.6rem;page-break-inside:avoid}
.feuille h2{font-size:1.02rem;border-bottom:1px solid var(--line);padding-bottom:.3rem;margin-bottom:.6rem}
.feuille p,.feuille li{font-size:.9rem;line-height:1.6}
.feuille ul,.feuille ol{padding-left:1.3em;margin:0 0 .8em}

@media print{
  body{background:#fff;padding:0}
  .feuille{max-width:none;box-shadow:none;padding:0;border-radius:0}
  .feuille section{margin-bottom:1.1rem}
  a{color:inherit;text-decoration:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero h1{font-size:2.2rem}
  /* La chaîne se redresse à la verticale : le numéro à gauche, le texte à droite. */
  .flux{grid-template-columns:1fr;gap:1rem}
  .flux::before{display:none}
  .flux li{display:grid;grid-template-columns:38px 1fr;column-gap:.9rem;text-align:left}
  .flux-n{grid-row:span 2;margin:0;box-shadow:none}
  .flux li b,.flux li span:not(.flux-n){grid-column:2}
  .duo{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr 1fr}
  .annonces{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:264px;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  body.side-open .side{transform:none}
  body.side-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:24}
  :is(.app-top,.st-haut) .burger{display:flex}
  .top-title{display:none}
  .app-body{padding:1.1rem 1rem 4rem}
  .bloc{padding:1.15rem}
}
@media (max-width:820px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem 20px 1rem}
  body.menu-open .nav-links{display:flex}
  .nav-links a{padding:.6em 0;border-bottom:1px solid var(--line-2)}
  .nav-auth-mob{display:block;color:var(--brand)!important;font-weight:700}
  /* La barre est pleine à cette largeur : la bascule descend dans le menu,
     comme « Connexion » avant elle. */
  .nav-cta .bascule-theme{display:none}
  /* Sélecteur descendant volontaire : la règle de base `.bascule-texte
     {display:none}` est déclarée plus bas dans le fichier et l'emporterait
     à spécificité égale. */
  .nav-links .bascule-texte{display:flex;align-items:center;gap:.55rem;
    width:auto;height:auto;border:0;background:none;border-radius:0;padding:.6em 0}
  .nav-links .bascule-texte span{font-weight:600;font-size:.93rem}
  .nav-links .bascule-texte:hover{background:none;color:var(--brand)}
  /* La barre ne garde que la marque, le bouton principal et le menu. */
  .nav-cta .btn-ghost{display:none}
  .nav-inner{gap:.6rem}
  .site-nav .burger{display:flex;order:3}
  .grid-2,.grid-3,.plans,.foot-grid,.exemple,.cols,.apercu-prix{grid-template-columns:1fr}
    .simu-etape{grid-template-columns:1fr;gap:.3rem}
  /* ⚠ ET ON LE DEFAIT ICI. Sur une grille à UNE colonne, `grid-column:2`
     ne place pas en deuxième colonne : il en CRÉE une implicite, et la
     pastille se retrouve seule à gauche d'un rail invisible. */
  .simu-etape > :not(.simu-n){grid-column:1}
  .simu-n{margin-top:0}
  .simu-res{grid-template-columns:1fr;gap:1.2rem}
  .simu-prix b,.simu-total b{font-size:2.2rem}
  .simu-affinage{grid-template-columns:1fr}
  .foot-grid{gap:1.5rem}
  .row-2{grid-template-columns:1fr}
  .section{padding:2.8rem 0}
  .hero{padding:2.5rem 0}
  .hero h1{font-size:1.9rem}
  .row{flex-direction:column}
  .row-side{width:100%;justify-content:space-between}
  .feuille{padding:1.25rem}
}
@media (max-width:520px){
  /* Sous 520 px, le bouton principal doit céder de la place à la marque. */
  .nav-cta .btn{padding:.45em .7em;font-size:.85rem;min-height:44px}
  .brand-name{font-size:.98rem}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .top-right .btn{display:none}
  h1{font-size:1.5rem}
  .etape-card{padding:1.1rem}
}


/* ---------- Illustration des vignettes d'accueil ----------
   Une colonne étroite à droite du formulaire, en portrait. Le dessin prend
   la couleur de la marque par currentColor, donc il suit le thème sans
   second fichier. Il est décoratif : aucune information n'y est portée qui
   ne soit pas déjà écrite à côté. */
.demo-haut{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:1rem;align-items:stretch}
/* Le resultat prend la hauteur qui reste : sans quoi la colonne de droite
   s'arrete a mi-carte et laisse un vide sous le prix. */
.demo-droite{display:grid;grid-template-rows:auto 1fr;gap:.7rem;min-width:0}
.demo-gauche{min-width:0}
.demo-illu{color:var(--brand);border:1px solid var(--line);border-radius:14px;
  background:var(--bg-2);padding:.8rem;display:grid;place-items:center}
/* Le dessin est en portrait (120 × 250) : dans un cadre large, c'est sa
   HAUTEUR qu'on fixe. Ni `width:100%` ni `height:100%` ne conviennent — la
   seconde rend meme la mesure circulaire, et le carrousel relevait alors
   1000 px pour des cartes de 509. */
.demo-illu svg{display:block;width:auto;height:118px}
@media(max-width:640px){
  .demo-haut{grid-template-columns:minmax(0,1fr) 170px;gap:.7rem}
}
/* Sous 520 px, la colonne de texte tombe sous 200 px : les libellés se
   replient sur trois lignes et la carte gagne 110 px de hauteur. Un décor
   qui coûte ça se retire. */
@media(max-width:520px){
  .demo-haut{grid-template-columns:1fr}
  .demo-illu{display:none}
}

/* ---------- Retour en haut ----------
   Coin bas-droit, au-dessus de tout sauf des barres collantes. La cible fait
   46 px : au-dessous, on la manque au pouce. `hidden` suffit à le masquer —
   le script ne le montre qu'une fois la page réellement descendue. */
.haut{position:fixed;right:1.1rem;bottom:1.1rem;z-index:35;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--brand);
  box-shadow:var(--shadow);cursor:pointer;padding:0;
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.haut:hover{transform:translateY(-2px);background:var(--brand-soft);border-color:#c7d2fe}
.haut:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}
.haut[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  .haut{transition:none}
  .haut:hover{transform:none}
}

/* Texte reserve aux lecteurs d'ecran : la legende du groupe de tuiles ne
   doit pas s'afficher, mais elle doit exister. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Bascule de thème (barre du haut) ----------
   Cible de 38 px, alignée avec les boutons voisins. L'icône montre la
   destination, pas l'état courant : lune quand on est en clair. */
.bascule-theme{display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);flex:0 0 auto;transition:.14s ease}
.bascule-theme:hover{color:var(--brand);border-color:#c7d2fe;
  background:var(--brand-soft);text-decoration:none}
.bascule-theme:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
/* La copie du menu déroulant ne sert que sur petit écran ; sur grand,
   c'est celle de la barre qui s'affiche. */
.bascule-texte{display:none}

/* ---------- Libellés longs / courts ----------
   Deux intitulés dans le même bouton, l'un masqué selon la largeur. Ce n'est
   pas du contenu dupliqué pour le référencement : c'est le même appel à
   l'action, dit plus court quand la place manque. */
.lbl-court{display:none}
@media(max-width:560px){
  .lbl-large{display:none}
  .lbl-court{display:inline}
}

/* ---------- Mot accentue dans un titre ----------
   Un seul mot du titre passe au degrade de marque. Il ne change ni de
   fonte ni de graisse : c'est la meme phrase, avec un mot souligne par
   la couleur. Les variables font le reste — indigo vers cyan en clair,
   violet vers rose en sombre — donc le motif suit le theme sans etre
   redecrit. */
.accent{background-image:linear-gradient(100deg,var(--accent-txt),var(--g2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Repli : si la decoupe du texte n'est pas geree, le mot reste lisible. */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .accent{color:var(--accent-txt);background-image:none}
}

/* ---------- Bloc de pilotage (bas de page d'accueil) ----------
   Deux colonnes : les promesses a gauche, un apercu d'interface a droite ;
   puis un bandeau de benefices et l'appel a l'action, sur toute la largeur.
   Tout est ecrit en variables : le bloc prend les couleurs du site, indigo
   en clair et violet en sombre, au lieu d'imposer les siennes. */
.pilotage{position:relative;border-radius:26px;padding:2.4rem;overflow:hidden;
  background:radial-gradient(60rem 32rem at 88% -20%, var(--brand-soft) 0%, transparent 62%),
             var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:2rem 2.4rem;align-items:start}

.pilotage-txt h2{font-size:1.9rem;margin:0 0 .6rem}
.pilotage-sous{margin:0 0 1.6rem;font-size:1.02rem;line-height:1.6;
  color:var(--ink-2);max-width:34em}

.pilotage-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pilotage-liste li,.pilotage-benef li{display:flex;gap:.9rem;align-items:flex-start}
.pilotage-liste li > span:last-child b,.pilotage-benef li > span:last-child b{
  display:block;color:var(--ink);font-size:.98rem;font-weight:700;line-height:1.3}
.pilotage-liste li > span:last-child > span,.pilotage-benef li > span:last-child > span{
  display:block;margin-top:.15rem;font-size:.89rem;line-height:1.45;color:var(--muted)}
.pilotage-ico{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;
  place-items:center;background:var(--brand-soft);border:1px solid var(--line);
  color:var(--accent-txt)}
.pilotage-ico svg{width:21px;height:21px}

/* --- Apercu d'interface --- */
.pilotage-vue{margin:0}

/* Les quatre ecrans sont empiles dans une grille, tous en 1/1 : le plus haut
   fixe la hauteur, les autres s'y logent. Pas de position absolue, donc pas
   de hauteur a mesurer en JavaScript ni de saut au changement d'ecran. */
.pv-scene{display:grid}
.pv-scene > .pv-cadre{grid-area:1/1;opacity:0;transform:translateY(10px) scale(.99);
  pointer-events:none;transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1)}
.pv-scene > .pv-cadre.on{opacity:1;transform:none;pointer-events:auto}

.pv-puces{display:flex;justify-content:center;gap:.4rem;margin-top:.3rem}
.pv-puces button{width:26px;height:5px;border:0;padding:14px 6px;box-sizing:content-box;
  border-radius:99px;background:var(--line);background-clip:content-box;
  cursor:pointer;transition:background .3s ease}
.pv-puces button.on{background:var(--brand-2)}
.pv-puces button:hover{background:var(--brand)}

.pv-cadre{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
.pv-bar{display:flex;gap:.4rem;padding:.7rem .9rem;background:var(--line-2);
  border-bottom:1px solid var(--line)}
.pv-bar i{width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.45}
.pv-corps{padding:1rem}
.pv-titre{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.8rem}

.pv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.7rem}
.pv-kpi{padding:.6rem .55rem;border-radius:11px;background:var(--surface);
  border:1px solid var(--line)}
.pv-kpi span{display:block;font-size:.7rem;color:var(--muted);line-height:1.3}
.pv-kpi b{display:block;margin-top:.2rem;font-size:1.05rem;color:var(--ink);letter-spacing:-.02em}
.pv-delta{font-style:normal;font-size:.62rem;font-weight:700;color:var(--ok-txt);margin-left:.25rem}

.pv-bas{display:grid;grid-template-columns:1.55fr 1fr;gap:.55rem}
.pv-carte{padding:.7rem;border-radius:11px;background:var(--surface);
  border:1px solid var(--line)}
.pv-carte b{font-size:.76rem;color:var(--ink)}
.pv-carte-h{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.3rem}
.pv-carte-h span{font-size:.66rem;color:var(--accent-txt);padding:.16rem .4rem;border-radius:6px;
  background:var(--brand-soft)}
.pv-courbe{display:block;width:100%;height:86px}
.pv-courbe .pv-aire-h{stop-color:var(--g1);stop-opacity:.32}
.pv-courbe .pv-aire-b{stop-color:var(--g1);stop-opacity:0}
.pv-courbe .pv-trait{stroke:var(--g1)}
.pv-courbe .pv-trait-2{stroke:var(--g2)}
.pv-axe{display:flex;justify-content:space-between;font-size:.64rem;color:var(--muted);margin-top:.2rem}
.pv-statuts{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.pv-donut{width:74px;height:74px;transform:rotate(-90deg)}
/* Quatre teintes distinctes dans les deux themes : marque, ciel, ambre, vert. */
.pv-c1{stroke:var(--d1)} .pv-legende .pv-c1{background:var(--d1)}
.pv-c2{stroke:var(--d2)} .pv-legende .pv-c2{background:var(--d2)}
.pv-c3{stroke:var(--d3)} .pv-legende .pv-c3{background:var(--d3)}
.pv-c4{stroke:var(--d4)} .pv-legende .pv-c4{background:var(--d4)}
.pv-legende{list-style:none;margin:0;padding:0;display:grid;gap:.22rem;width:100%}
.pv-legende li{display:flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--ink-2)}
.pv-legende i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pilotage-vue figcaption{margin-top:.6rem;font-size:.76rem;line-height:1.45;
  color:var(--muted);text-align:center}

/* --- Ecran CRM --- */
.pv-kpis-3{grid-template-columns:repeat(3,1fr)}
.pv-leads,.pv-canaux,.pv-sequence{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
/* Un element de grille a `min-width:auto` : il refuse de descendre sous la
   largeur de son contenu. Le titre du message ne se coupait donc pas, et
   c'est la mesure de droite qui sortait de la carte — de 49 px sur un
   ecran de 375. On rend la ligne compressible, l'ellipse fait le reste. */
.pv-leads li,.pv-sequence li,.pv-canaux li{min-width:0}
.pv-leads li{display:flex;align-items:center;gap:.5rem}
.pv-ini{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.6rem;font-weight:800;letter-spacing:.02em;
  background:var(--brand-soft);color:var(--accent-txt)}
.pv-qui{flex:1 1 auto;min-width:0}
.pv-qui b{display:block;font-size:.72rem;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-qui > span{display:block;font-size:.62rem;color:var(--muted);line-height:1.3}
.pv-etat{flex:0 0 auto;font-size:.6rem;font-weight:700;padding:.2rem .45rem;border-radius:999px;
  border:1px solid;white-space:nowrap}
/* La couleur du statut est portee par une pastille, pas par le mot : ecrit
   en teinte pleine a 9,6 px, « Contacte » tombait sous le seuil de lisibilite
   en clair. Le point, lui, n'est qu'un element graphique — 3:1 lui suffit, et
   il rappelle exactement la teinte de l'anneau. */
.pv-etat{color:var(--ink-2);border-color:var(--line);background:var(--bg-2)}
.pv-etat::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:.32em;vertical-align:.05em}
.pv-etat.pv-c1::before{background:var(--d1)}
.pv-etat.pv-c2::before{background:var(--d2)}
.pv-etat.pv-c3::before{background:var(--d3)}
.pv-etat.pv-c4::before{background:var(--d4)}

/* --- Ecran depenses --- */
.pv-canaux li{display:grid;gap:.25rem}
.pv-canal-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.pv-canal-h b{font-size:.7rem;color:var(--ink)}
.pv-canal-h > span{font-size:.62rem;color:var(--muted);white-space:nowrap}
.pv-jauge{display:block;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.pv-jauge i{display:block;height:100%;border-radius:99px}
.pv-g1{background:var(--d1)} .pv-g2{background:var(--d2)}
.pv-g3{background:var(--d3)} .pv-g4{background:var(--d4)}

/* --- Ecran emailing --- */
.pv-sequence li{display:flex;align-items:center;gap:.55rem}
/* La mesure a droite, comme le statut sur une fiche de prospect : meme
   position, meme forme. Neutre volontairement — un taux colore par paliers
   inventerait une echelle que rien ne definit. */
.pv-taux{flex:0 0 auto;margin-left:auto;font-size:.6rem;font-weight:700;
  padding:.2rem .45rem;border-radius:999px;white-space:nowrap;
  color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line)}
.pv-jour{flex:0 0 auto;font-size:.6rem;font-weight:800;padding:.22rem .45rem;border-radius:7px;
  background:var(--brand-soft);color:var(--accent-txt)}
.pv-mail{flex:1 1 auto;min-width:0}
.pv-mail b{display:block;font-size:.72rem;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-mail > span{display:block;font-size:.62rem;color:var(--muted);line-height:1.3}

/* --- Bandeau de benefices et appel a l'action --- */
.pilotage-benef{grid-column:1 / -1;list-style:none;margin:.4rem 0 0;padding:1.1rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  border-radius:16px;background:var(--bg-2);border:1px solid var(--line)}
.pilotage-cta{grid-column:1 / -1;text-align:center}
.pilotage-btn{padding:.8em 1.6em;font-size:1rem;border-radius:12px;gap:.6em;min-height:50px}

@media(max-width:980px){
  .pilotage{grid-template-columns:1fr;padding:1.8rem;gap:1.6rem}
  /* Carte large : empiler titre, anneau puis legende laissait l'anneau seul
     sur sa ligne et la moitie droite vide. Les deux se mettent cote a cote,
     centres l'un sur l'autre — l'anneau est alors au niveau de sa legende,
     et le titre les coiffe sur toute la largeur. */
  .pv-statuts{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"titre titre" "anneau legende";
    align-items:center;justify-items:start;gap:.55rem 2.2rem}
  /* La legende se decale vers la droite : collee a l'anneau, elle laissait
     tout le vide du cote oppose. Elle se centre dans la place restante. */
  .pv-statuts .pv-legende{justify-self:center}
  .pv-statuts > b{grid-area:titre}
  .pv-statuts .pv-donut{grid-area:anneau}
  .pv-statuts .pv-legende{grid-area:legende;width:auto}
  .pilotage-benef{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pilotage{padding:1.3rem;border-radius:20px}
  .pilotage-txt h2{font-size:1.6rem}
  .pv-kpis{grid-template-columns:repeat(2,1fr)}
  .pv-kpis-3 > :last-child{grid-column:span 2}
  .pv-bas{grid-template-columns:1fr}
  .pilotage-benef{grid-template-columns:1fr}
}

/* ============================================================
   Assistant public « Construisons votre campagne »
   Plein écran, une question par vue. Pas de barre de navigation
   du site : à ce moment-là, le visiteur fait une seule chose.
   ============================================================ */
.onb{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(60rem 32rem at 50% -12%, var(--brand-soft) 0%, transparent 62%),var(--bg)}
.onb-lieu-l li:hover,.onb-lieu-l li.vise{background:var(--brand-soft)}
/* La commune saisie a la main : proposee en dernier, detachee du referentiel. */
.onb-lieu-l li.libre{border-top:1px solid var(--line);margin-top:.2rem;
  padding-top:.65rem;border-radius:0 0 9px 9px}
.onb-lieu-l li.libre span{font-style:italic}
body.theme-sombre .fin-avert{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4)}
body.theme-sombre .fin-avert b{color:#fcd34d}
body.theme-sombre .fin-avert span,body.theme-sombre .fin-avert i{color:#fde68a}
@media(max-width:560px){  .fin-budget-f .btn{width:100%;margin-top:.7rem;min-height:46px}
}
.fin-excl-l i.ok{color:var(--ok-txt)}
.onb-lieu-l li.vise{box-shadow:0 0 0 1px var(--brand) inset}
body.theme-sombre .onb-lieu-l{box-shadow:0 12px 28px rgba(0,0,0,.5)}
@media(max-width:560px){  .chg-b .btn,.chg-b form,.chg-b button{width:100%}
}

/* ---------- Finalisation : identité de la campagne ---------- */
.idn-analyse{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 1rem;padding:.9rem 1rem;border-radius:12px;
  border:1px solid var(--line);background:var(--brand-soft)}
.idn-analyse b{display:block;font-size:.94rem;color:var(--ink)}
.idn-analyse span{display:block;font-size:.84rem;line-height:1.5;color:var(--ink-2);max-width:34em}
.idn-sugg{margin:0 0 1.2rem;padding:.85rem 1rem;border-radius:12px;font-size:.88rem;
  line-height:1.6;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.idn-sugg ul{margin:.3rem 0 0 1.1rem;padding:0}
.idn-pastille{display:inline-block;width:14px;height:14px;border-radius:4px;
  vertical-align:-2px;border:1px solid var(--line)}
.idn-opt{font-weight:400;font-size:.82rem;color:var(--muted)}
.idn-lab{display:block;margin-bottom:.45rem;font-weight:650}
.idn-couleurs{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.idn-couleurs input[type=color]{width:52px;height:36px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);cursor:pointer}
.idn-couleurs input[type=color]:disabled{opacity:.35;cursor:not-allowed}
.idn-sans{display:flex;gap:.5rem;align-items:center;margin:0;font-size:.88rem;
  color:var(--ink-2);cursor:pointer}
.idn-sans input{width:16px;height:16px;accent-color:var(--brand)}
.idn-radio{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 .45rem;cursor:pointer;
  font-size:.92rem;color:var(--ink-2)}
.idn-radio input{margin-top:.2rem;accent-color:var(--brand)}
.idn-fichier{display:flex;gap:.8rem;align-items:center;margin:0 0 .6rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.idn-fichier img{border-radius:8px;object-fit:contain;background:#fff}
.idn-fichier span{flex:1 1 auto;font-size:.88rem;color:var(--ink-2)}
.idn-medias{list-style:none;margin:0 0 .7rem;padding:0;display:flex;gap:.6rem;flex-wrap:wrap}
.idn-medias li{position:relative}
.idn-medias img{width:84px;height:84px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line)}
.idn-x{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--bad);cursor:pointer;
  font-size:1rem;line-height:1}
.idn-x:hover{border-color:var(--bad)}
/* ---------- Écran 6 « Votre entreprise » : la maquette ---------- */
/* Le badge du titre. */
.onb-q-ico{display:flex;align-items:center;gap:.7rem}
.onb-q-badge{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:var(--accent-txt);
  background:var(--brand-soft);border:1px solid var(--line)}
/* Le champ et sa coche verte quand la saisie tient debout. */
.ent-input{position:relative}
.ent-input input{width:100%;padding-right:2.7rem}
.ent-ok{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:#10b981;border:1.5px solid #10b981;font-style:normal}
.ent-ok[hidden]{display:none}
/* La marque : deux lignes pleine largeur, cercle de choix à gauche.
   L'état choisi se dit par le cadre violet, pas par le remplissage plein
   des pilules ordinaires. */
.ent-marque{display:grid;gap:.5rem}
.ent-marque .onb-puce,.ent-ident .onb-puce{margin:0;width:100%;border-radius:12px;
  min-height:44px;padding:.45rem .8rem;font-size:.92rem}
.ent-marque .onb-puce > span,.ent-ident .onb-puce > span{
  display:flex;align-items:center;gap:.6rem;min-width:0}
.ent-marque .onb-puce > span::before,.ent-ident .onb-puce > span::before{
  content:'';width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--line);flex:0 0 auto;transition:.14s ease}
.ent-marque .onb-puce.on,.ent-ident .onb-puce.on{
  background:var(--brand-soft);border-color:var(--brand);color:var(--ink);font-weight:600}
.ent-marque .onb-puce.on > span::before,.ent-ident .onb-puce.on > span::before{
  border-color:var(--brand);
  background:radial-gradient(circle, var(--brand) 0 40%, transparent 46%)}
.ent-ident .onb-puce{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ent-ident .onb-puce.on .ent-ico{color:var(--accent-txt)}
/* Le bouton d'avance porte un léger halo, comme la maquette. */
.onb-pied .btn-primary{box-shadow:0 0 22px rgba(124,58,237,.35)}
.proj-t.on{background:var(--brand-soft);border-color:var(--brand);
  color:var(--accent-txt);font-weight:700}
.proj-saisie .onb-champ label{margin-bottom:.3em}
.proj-saisie .onb-champ{margin-bottom:.5rem}

.proj{border:1px solid var(--line);border-radius:16px;padding:.65rem 1rem;
  background:var(--surface);margin-bottom:.45rem}
.sup{position:relative;display:flex;align-items:center;gap:.8rem;margin:0;cursor:pointer;
  border:1.5px solid var(--line);border-radius:14px;padding:.75rem .9rem;
  background:var(--surface);transition:.14s ease}
.sup:hover{border-color:#c7d2fe;background:var(--brand-soft)}
.sup.on{border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 1px var(--brand) inset}
.sup input{position:absolute;opacity:0;width:0;height:0}
.sup input:focus-visible + .sup-logo{outline:2px solid var(--brand-2);outline-offset:3px}
/* Le « ? » pedagogique : comprendre le reseau avant de le cocher. */
.sup-aide{flex:0 0 auto;margin-left:auto;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;transition:.14s ease}
.sup-aide:hover,.sup-aide[aria-expanded=true]{border-color:var(--brand);color:var(--accent-txt);
  background:var(--brand-soft)}
/* La bulle prend toute la largeur de la grille, sous son support. */
.sup-bulle{grid-column:1/-1;border:1.5px solid var(--brand);border-radius:12px;
  background:var(--brand-soft);padding:.7rem .9rem;margin:-.2rem 0 .2rem}
.sup-bulle p{margin:.3rem 0;font-size:.85rem;line-height:1.5;color:var(--ink)}
.sup-bulle p b{color:var(--ink)}
/* Le meme « ? » sur les cartes d'objectif (ecran 2) : pose en haut a droite
   de la carte, et la carte reserve la place pour ne pas passer dessous. */
.onb-carte .sup-aide{position:absolute;top:.5rem;right:.5rem;z-index:1}
.onb-carte .onb-carte-in{padding-right:2.4rem}
.onb-conseil-budget .sup-aide{position:absolute;top:.5rem;right:.6rem}
.onb-intro .sup-aide{margin-left:.3rem;vertical-align:-.2em}
.proj-chaine .sup-aide{margin-left:.3rem;vertical-align:-.25em;width:20px;height:20px;
  font-size:.72rem}
.proj-chaine .sup-bulle,.proj .sup-bulle{flex:1 1 100%;margin:.35rem 0 .15rem}
/* Ecran zone : « ? » dans les intitules (label, legende, resume du details)
   et dans la case France entiere ; les bulles coulent en bloc sous chaque
   section. */
.geo .sup-aide{margin-left:.3rem;vertical-align:-.2em;width:20px;height:20px;font-size:.72rem}
.geo .sup-bulle{margin:.5rem 0 .6rem}
.geo-nat .sup-aide{margin-left:.25rem}
/* Quand Leadsoon decide, les quatre cases n'ont plus de sens : on les eteint. */
.sup-l.sup-off{opacity:.4;pointer-events:none}

/* ---------- Ciblage géographique (écran 3) ----------
   Une liste de zones, pas un choix unique. Chaque carte porte sa précision :
   le rayon pour une ville, les départements pour une région. */
.geo{display:grid;gap:1.1rem}
.geo-off{opacity:.4;pointer-events:none}
.geo-l > .geo-z{flex:1 1 100%}
.geo-l > .geo-z-departement{flex:0 1 auto;min-width:9rem}
.geo-z-ville{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.geo-z-ville .geo-z-t{display:contents}
.geo-z-ville .geo-z-t b{order:1;flex:1 1 auto;min-width:8rem}
.geo-z-ville .geo-r{order:2;margin-top:0;flex:0 0 auto}
.geo-z-ville .geo-z-t .geo-x{order:3}

/* La ville affichée sur la carte : son cadre le dit, et TOUTE la carte de la
   ville se clique ou se survole pour basculer — pas seulement le nom. */
.geo-z-clic{cursor:pointer}
.geo-z-clic:hover{border-color:var(--brand)}
.geo-z-vue,.geo-z-vue:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gc-map-x{display:flex;align-items:center;gap:.25rem;pointer-events:none}
.gc-map-x i{font-style:normal;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:#dc2626;color:#fff;
  font-size:.72rem;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.gc-map-x span{font-size:.74rem;font-weight:700;color:#7f1d1d;
  background:rgba(255,255,255,.85);padding:.05rem .3rem;border-radius:6px}
.gc-anneau{fill:none;stroke:var(--line);stroke-dasharray:2 5}
.gc-rayon{fill:rgba(124,58,237,.09);stroke:var(--brand);stroke-width:1.6;stroke-dasharray:6 5}
.gc-km{font-size:11px;font-weight:700;fill:var(--accent-txt);text-anchor:middle}
.gc-com circle{fill:var(--muted)}
.gc-com.gc-dans circle{fill:var(--brand)}
.gc-com text{font-size:10.5px;fill:var(--ink-2)}
.gc-exclu circle{fill:#dc2626}
.gc-exclu line{stroke:#dc2626;stroke-width:1.6}
.gc-exclu text{fill:#b91c1c}
.gc-centre > circle{fill:var(--brand);opacity:.25}
.gc-centre .gc-centre-pt{fill:var(--brand);opacity:1}
.gc-centre-nom{font-size:11.5px;font-weight:800;fill:var(--ink)}
.geo-z{border:1px solid var(--line);border-radius:12px;padding:.42rem .7rem;
  background:var(--surface)}
.geo-z-t{display:flex;align-items:center;gap:.7rem}
.geo-z-t b{flex:1 1 auto;min-width:0;font-size:.96rem;font-weight:650;color:var(--ink)}
.geo-x{flex:0 0 auto;width:30px;height:30px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:1.2rem;line-height:1;transition:.14s ease}
.geo-x:hover{border-color:var(--bad);color:var(--bad);background:var(--surface)}
/* Le rayon : une ville sans rayon ne cible qu'un point. */
.geo-r{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.geo-r > span{font-size:.8rem;color:var(--muted);margin-right:.2rem}
.geo-km{padding:.3rem .6rem;border-radius:99px;cursor:pointer;font:inherit;
  font-size:.82rem;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);transition:.14s ease}
.geo-km:hover{border-color:var(--brand)}
.geo-km.on{border-color:var(--brand);background:var(--brand-soft);
  color:var(--accent-txt);font-weight:650}
/* Les départements d'une région, à décocher plutôt qu'à cocher. */
.geo-deps{margin-top:.6rem}
.geo-deps summary{cursor:pointer;font-size:.85rem;color:var(--accent-txt)}
.geo-deps-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:.3rem .8rem;margin-top:.6rem}
.geo-deps-l label{display:flex;align-items:center;gap:.45rem;font-size:.86rem;
  color:var(--ink-2);cursor:pointer;margin:0}
.geo-deps-l input{width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto}
.geo-l-excl > .geo-z{flex:0 1 auto}
.geo-z-x{display:flex;align-items:center;gap:.5rem;padding:.3rem .55rem}
.geo-x-txt{display:flex;align-items:center;gap:.4rem;min-width:0}
.geo-z-x b{display:inline;font-weight:600;font-size:.88rem;white-space:nowrap}
/* Ce que vaut l'exclusion : verte si elle sert, grise si elle ne change rien. */
.geo-etat{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;
  line-height:1.2;color:var(--muted)}
.geo-etat::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--line);flex:0 0 auto}
.geo-etat.ok::before{background:#10b981}
.geo-etat.inutile::before{background:#f59e0b}
.geo-etat.inutile{color:#b45309}
.geo-nat.on{border-color:var(--brand);background:var(--brand-soft)}
@media(max-width:560px){
  .geo-deps-l{grid-template-columns:1fr}
  .geo-km{padding:.42rem .7rem}
  .geo-x{width:36px;height:36px}
}

/* L'en-tete collant : la barre et, sous elle, le bandeau de puces du mobile.
   Un seul element colle — les deux ensemble, sans jeu entre eux. */
.onb-haut{position:sticky;top:0;z-index:10}
.onb-bar{display:flex;align-items:center;gap:1rem;padding:.5rem 1.2rem;
  border-bottom:1px solid var(--line);background:var(--surface-flou);
  backdrop-filter:blur(10px)}
.onb-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;
  color:var(--ink);letter-spacing:-.02em}
.onb-logo:hover{text-decoration:none}
.onb-jauge{flex:1 1 auto;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;
  max-width:520px;margin:0 auto}
.onb-jauge i{display:block;height:100%;border-radius:99px;
  background-image:linear-gradient(90deg,var(--brand),var(--sky));
  transition:width .45s cubic-bezier(.3,.9,.4,1)}
.onb-compte{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--muted)}

.onb-corps{flex:1 1 auto;width:100%;max-width:760px;margin:0 auto;
  padding:.7rem 1.2rem 1.6rem}
.onb-intro{margin:0 0 .55rem;font-size:1rem;color:var(--ink-2);max-width:40em}
/* L'activité reprise dans la phrase : c'est l'écho de ce que le visiteur
   vient de valider, il doit se détacher du reste de la phrase. */
.onb-intro b{font-weight:700;color:var(--ink)}
.onb-puce{position:relative;display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem 1rem;border-radius:99px;cursor:pointer;font-size:.92rem;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:.14s ease}
.onb-puce input{position:absolute;opacity:0;width:1px;height:1px}
.onb-puce:hover{border-color:var(--brand)}
.onb-puce.on{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:650}
.onb-puce input:focus-visible+span{outline:2px solid var(--brand);outline-offset:4px;border-radius:4px}
body.theme-sombre .onb-canal{border-color:rgba(167,139,250,.35)}
/* Au pointeur fin, des puces plus basses ; au doigt, les 44 px restent. */
@media(hover:hover) and (pointer:fine){
  .onb-sous .onb-puce{min-height:34px;padding:.3rem .85rem;font-size:.88rem}
}

.onb-fil{position:sticky;top:5.2rem;padding:1.6rem 1.45rem 1.45rem;border-radius:16px;
  border:1px solid var(--line);background:var(--surface)}
.onb-fil h2{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.onb-fil ol{margin:0;padding:0 0 0 1.35rem;list-style:none;display:grid;gap:1.05rem;
  position:relative}
/* Le trait, derrière les pastilles. */
.onb-fil ol::before{content:'';position:absolute;left:5px;top:.5rem;bottom:.5rem;
  width:2px;border-radius:2px;background:var(--line)}
.onb-fil li{position:relative;font-size:.92rem;line-height:1.4;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem}
/* « Modifier » vit a droite du LIBELLE, la valeur en dessous sur toute la
   largeur — la lecture de la maquette. */
.onb-fil li > .onb-fil-k{grid-column:1;grid-row:1}
.onb-fil li > .onb-fil-mod{grid-column:2;grid-row:1;justify-self:end;align-self:center}
.onb-fil li > a:not(.onb-fil-mod),.onb-fil li > .onb-fil-v{grid-column:1 / -1}
.onb-fil li::before{content:'';position:absolute;left:-1.35rem;top:.28rem;
  width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  background:var(--surface);border:2px solid var(--line);transition:.15s ease}
.onb-fil li.fait::before{background:var(--brand);border-color:var(--brand)}
.onb-fil li.ici::before{border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 4px var(--brand-soft)}
.onb-fil li.ici .onb-fil-k{color:var(--accent-txt)}
.onb-fil-v{color:var(--ink)}
.onb-fil li.fait .onb-fil-v,.onb-fil li.fait a{color:var(--ink);font-weight:650}
.onb-fil a{display:inline-block;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:.14s ease}
.onb-fil a:hover{border-bottom-color:var(--brand);color:var(--accent-txt)}
/* « à venir » ne doit pas se lire comme une réponse. */
.onb-fil-vide{color:var(--muted);font-style:italic;font-weight:400;font-size:.88rem}

/* Le récapitulatif dépliable de la FINALISATION : mêmes lignes, mais visible
   à toutes les largeurs — cette page n'a pas de colonne de droite. Lecture
   seule, hors budget et identité. */
/* ---------- La chaine creative (creations.php) ---------- */
.crea-corps{max-width:1060px}
.crea-note{margin:.2rem 0 .8rem;font-size:.85rem;color:var(--accent-txt);font-weight:600}
.crea-planche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
@media(max-width:900px){ .crea-planche{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .crea-planche{grid-template-columns:1fr} }
.crea-carte{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);transition:.14s ease}
.crea-carte:hover{border-color:var(--brand)}
.crea-apercu svg{display:block;width:100%;height:auto}
.crea-carte-pied{display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .7rem;font-size:.85rem;color:var(--ink-2)}
.crea-variantes-t .crea-outils-t{margin:0}

.crea-editeur{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.1rem;
  align-items:start}
@media(max-width:860px){ .crea-editeur{grid-template-columns:1fr} }
.crea-grand{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.crea-outils{display:grid;gap:1rem}
.crea-outils-t{margin:0 0 .55rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-txt)}
.crea-champs,.crea-ia{border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:.85rem .95rem}
.crea-ia input[type=text]{width:100%;margin-bottom:.5rem}
.crea-ia-b{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
/* L'ecran de la demande (parcours v4) : une phrase, l'IA accompagne. */
.crea-demande{max-width:640px}
.crea-demande textarea{width:100%;resize:vertical;font-size:1rem;line-height:1.5}
.crea-aide{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:.75rem .9rem;margin:.9rem 0 0}
.crea-aide ul{margin:.3rem 0 .4rem;padding-left:1.2rem}
.crea-aide li{margin:.25rem 0;font-size:.9rem}
.crea-aide-q{border-color:var(--brand)}
.crea-demande-rappel{margin:.2rem 0 .5rem;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.crea-grand-s{max-width:380px}
.crea-texte textarea{width:100%;resize:vertical;font-size:.92rem;line-height:1.55;
  margin-bottom:.6rem}
/* Les images generees remplissent leur cadre comme les SVG d'avant. */
.crea-apercu img{display:block;width:100%;height:auto}
/* L'ecran d'attente : une ligne par travail, coche quand il aboutit. */
.crea-attente{max-width:420px}
.crea-att-liste{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.45rem}
.crea-att-liste li{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.9rem}
.crea-att-liste li i{font-style:normal;width:1.2em;text-align:center;color:var(--muted)}
.crea-att-liste li:not(.ok):not(.ko) i::before{content:'';display:inline-block;width:.75em;
  height:.75em;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;
  animation:crea-tourne .9s linear infinite}
.crea-att-liste li.ok{border-color:#10b981}
.crea-att-liste li.ok i{color:#10b981;font-weight:700}
.crea-att-liste li.ko{border-color:#ef4444;opacity:.75}
.crea-att-liste li.ko i{color:#ef4444;font-weight:700}
@keyframes crea-tourne{to{transform:rotate(360deg)}}
.crea-att-annuler{margin-top:.4rem}

/* ---------- Portefeuille (Full gestion) ---------- */
.pf-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:760px){ .pf-tuiles{grid-template-columns:1fr} }
.pf-k{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.pf-v{margin:.25rem 0 .2rem;font-size:1.6rem;font-weight:800;color:var(--ink);
  letter-spacing:-.02em}
.pf-v span{font-size:.9rem;font-weight:600;color:var(--muted)}
.pf-s{margin:0;font-size:.84rem;color:var(--muted)}
.pf-verser{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.pf-verser .input-unit{max-width:12rem}
.pf-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-plus{color:#059669;font-weight:650}
.pf-moins{color:var(--ink)}
body.theme-sombre .pf-plus{color:#34d399}
.pf-note{display:block;font-size:.78rem;color:var(--muted)}
.pf-tag{display:inline-block;padding:.05rem .45rem;border-radius:99px;
  font-size:.72rem;font-weight:700;border:1px solid var(--line);color:var(--muted)}
.pf-admin-saisie{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}
.pf-admin-saisie .input-unit{max-width:9rem}
.pf-reglages-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1rem}
@media(max-width:760px){ .pf-reglages-l{grid-template-columns:1fr} }

/* Le halo des CTA de la page d'accueil, comme le bouton d'avancee du
   parcours. */
.hero .btn-primary,.estim2-cta-t ~ .btn-primary,#ctaCampagne,.pilotage-btn{
  box-shadow:0 0 22px rgba(124,58,237,.35)}

/* Les pictos des titres de cartes de la finalisation. */
.fin-h2-ico{vertical-align:-3px;margin-right:.3rem;color:var(--accent-txt)}
.onb-fil li.fait .onb-fil-mod{color:var(--accent-txt)}
@media(max-width:900px){  .onb-fil{display:none}
  .onb-puce-fil{flex:0 0 auto;max-width:14rem;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.78rem;padding:.28rem .7rem;border-radius:99px;
    border:1px solid var(--line);color:var(--muted);background:var(--surface)}
  .onb-puce-fil.fait{border-color:transparent;background:var(--brand-soft);
    color:var(--accent-txt);font-weight:650}
  .onb-puce-fil.ici{border-color:var(--brand);color:var(--accent-txt);font-weight:650}
}
.onb-q{font-size:1.6rem;line-height:1.2;margin:0 0 .35rem}
.onb-ia-err{color:#b45309}
.onb-carte{position:relative;margin:0;cursor:pointer;display:block}
.onb-carte input{position:absolute;opacity:0;width:0;height:0}
.onb-carte:hover .onb-carte-in{border-color:#c7d2fe;background:var(--brand-soft)}
.onb-carte input:checked + .onb-carte-in,.onb-carte.on .onb-carte-in{
  border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.onb-carte input:checked + .onb-carte-in .onb-ico svg,
.onb-carte.on .onb-carte-in .onb-ico svg{color:var(--brand-2)}
.onb-carte input:focus-visible + .onb-carte-in{outline:2px solid var(--brand-2);outline-offset:2px}
.onb-champ{margin:0 0 .7rem;max-width:26rem}

.onb-pied{display:flex;gap:.7rem;align-items:center;justify-content:space-between;
  margin-top:.4rem;padding-top:.45rem;border-top:1px solid var(--line)}
.btn-lg{padding:.85em 1.7em;font-size:1.05rem;min-height:52px;border-radius:13px}

.onb-rassure{margin:.9rem 0 0;text-align:center;font-size:.86rem;color:var(--muted)}

@media(max-width:720px){
  .onb-corps{padding:1.8rem 1rem 2.4rem}
  .onb-q{font-size:1.5rem}
  .onb-pied .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- Création d'espace : la carte s'élargit quand elle porte
   un récapitulatif de campagne, et les connexions déléguées ---------- */
.auth-card-large{max-width:34rem}
.auth-t{font-size:1.35rem;line-height:1.3;margin:0 0 .35em}
.auth-sous{margin:0 0 1.2rem;font-size:.94rem;color:var(--ink-2)}
.auth-recap{display:grid;gap:.35rem;margin:0 0 1.4rem;padding:.9rem 1rem;
  border-radius:12px;background:var(--bg-2);border:1px solid var(--line);
  font-size:.9rem;line-height:1.5;color:var(--ink-2);text-align:left}
.auth-recap b{color:var(--ink)}
.auth-delegues{display:grid;gap:.5rem}
/* Désactivé et qui le dit : le curseur, l'opacité et la note sous les
   boutons disent la même chose de trois façons. */
.auth-delegue{opacity:.55}
.auth-note{margin:.2rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);text-align:center}
.auth-ou{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0;color:var(--muted);font-size:.85rem}
.auth-ou::before,.auth-ou::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

/* L'appel à l'action du simulateur ne se contente plus d'un bouton : il dit
   ce que le visiteur peut faire de l'estimation qu'il vient d'obtenir. */
.estim2-cta-t{margin:0 0 .2rem;font-size:1.15rem;font-weight:750;color:var(--ink)}
.estim2-cta-s{margin:0 0 1rem;font-size:.95rem;color:var(--ink-2)}

/* ---------- Premier écran du tableau de bord ----------
   Ce que le client vient de renseigner, et ce qu'il lui reste à faire.
   Rien d'autre : un compte neuf n'a pas de statistiques à montrer. */
.demarrage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.25rem;
  margin-bottom:1.5rem}
.projet{margin:0;display:grid;gap:.75rem}
.projet div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.6rem;
  align-items:baseline;padding-bottom:.7rem;border-bottom:1px solid var(--line-2)}
.projet div:last-child{border-bottom:0;padding-bottom:0}
.projet dt{font-size:.86rem;color:var(--muted)}
.projet dd{margin:0;font-size:.98rem;font-weight:600;color:var(--ink)}

.prog-barre{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:0 0 1rem}
.prog-barre i{display:block;height:100%;border-radius:99px;
  background-image:linear-gradient(90deg,var(--brand),var(--sky));
  transition:width .5s cubic-bezier(.3,.9,.4,1)}
.prog-liste{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem}
.prog-liste li{display:flex;align-items:center;gap:.6rem;font-size:.94rem;color:var(--muted)}
.prog-liste li.fait{color:var(--ink)}
.prog-liste i{flex:0 0 auto;font-style:normal;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:.68rem;font-weight:800;
  background:var(--line-2);color:var(--muted)}
.prog-liste li.fait i{background:rgba(16,185,129,.14);color:#047857}

@media(max-width:900px){
  .demarrage{grid-template-columns:1fr}
  .projet div{grid-template-columns:1fr;gap:.15rem;padding-bottom:.6rem}
}
.fin-etape.on{border-color:var(--brand);color:var(--ink);box-shadow:0 0 0 1px var(--brand) inset}
.fin-etape.on i{background:var(--brand);color:#fff}
.fin-etape.fait{color:var(--ink)}
.fin-etape.fait i{background:rgba(16,185,129,.14);color:#047857}

/* --- Ce que la publicité dit, jamais à quoi elle ressemble --- */
.pubs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 1.5rem}
.pub{padding:1.1rem;border-radius:var(--radius-lg);background:var(--bg-2);
  border:1px solid var(--line)}
.pub-h{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.9rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.pub-n{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-2)}
.pub-h b{font-size:1rem;color:var(--ink);line-height:1.3}
.pub-l{margin:0;display:grid;gap:.8rem}
.pub-l div{display:grid;gap:.15rem}
.pub-l dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.pub-l dd{margin:0;font-size:.94rem;line-height:1.45;color:var(--ink)}
.pub-pourquoi{font-size:.86rem !important;color:var(--ink-2) !important;line-height:1.5 !important}
.pub-form{padding-top:1.2rem;border-top:1px solid var(--line)}

@media(max-width:900px){
  .pubs{grid-template-columns:1fr}
}

/* Campagne en diffusion : le même écran continue, il ne repart pas de zéro. */
.diffusion .card-h{align-items:center}
/* ⚠ UNE FAMILLE, PAS DEUX MOITIÉS (01/09). `.etat-lancee` existait sans
   que personne ne la porte, pendant que le tableau de bord affichait
   `class="etat etat-brouillon"` — deux classes sans une seule règle. Le
   badge « À finaliser » sortait donc en texte nu, à côté de valeurs
   alignées : rien ne le signalait, un texte sans style reste lisible.
   La forme est désormais portée par `.etat`, la couleur par la variante. */
.etat{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:.24rem .6rem;border-radius:999px;white-space:nowrap;
  background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
/* « À finaliser » : de l'ambre, pas du rouge — c'est une étape du
   parcours, pas une panne. */
.etat-brouillon{background:rgba(245,158,11,.12);color:#b45309;border-color:#fde68a}
body.theme-sombre .etat-brouillon{background:rgba(245,158,11,.16);color:#fcd34d;
  border-color:rgba(245,158,11,.42)}
body.theme-sombre .etat-lancee{background:rgba(16,185,129,.16);color:#6ee7b7;
  border-color:rgba(16,185,129,.42)}
.empty-plat{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  background:none;border-left:0;border-right:0;border-bottom:0;border-radius:0}

/* ============================================================
   CRM — liste des prospects et suivi
   ============================================================ */
.stat-grid-6{grid-template-columns:repeat(6,1fr)}
.stat-urgent b{color:#b45309}

.crm-filtres{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.25rem}
.crm-f{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:.88rem;font-weight:600;
  color:var(--ink-2);white-space:nowrap}
.crm-f:hover{text-decoration:none;border-color:#c7d2fe;background:var(--brand-soft)}
.crm-f.on{border-color:var(--brand);color:var(--ink);box-shadow:0 0 0 1px var(--brand) inset}
.crm-f i{font-style:normal;font-size:.74rem;font-weight:800;padding:.1rem .4rem;border-radius:999px;
  background:var(--bg-2);color:var(--muted)}
.crm-f.on i{background:var(--brand);color:#fff}

.crm-rech input{min-height:38px;font-size:.88rem;max-width:15rem}

/* `min-width:0` sur la ligne : element de grille, elle refuse sinon de
   descendre sous la largeur de son contenu — un objet d'e-mail suffisait a
   pousser la page 325 px au-dela de l'ecran. */
.crm-liste{list-style:none;margin:0;padding:0;display:grid}
.crm-liste li{min-width:0}
.crm-liste li + li{border-top:1px solid var(--line-2)}
.crm-l{display:flex;align-items:center;gap:.8rem;padding:.8rem .2rem;color:inherit}
.crm-l:hover{text-decoration:none;background:var(--bg-2)}
.crm-ini{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-size:.9rem;font-weight:800;background:var(--brand-soft);color:var(--accent-txt)}
.crm-qui{flex:1 1 auto;min-width:0}
/* Coupe plutot que pousse : le titre passe en bloc pour pouvoir porter
   une ellipse — l'etiquette « demo » reste dans le flux. */
.crm-qui b{display:block;font-size:.98rem;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-qui b .crm-demo{margin-left:.4rem;vertical-align:.08em}
.crm-qui > span{display:block;font-size:.85rem;color:var(--muted);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-demo{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:999px;background:var(--bg-2);color:var(--muted);
  border:1px solid var(--line)}
.crm-et{flex:0 0 auto;font-size:.74rem;font-weight:700;padding:.24rem .6rem;border-radius:999px;
  white-space:nowrap;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2)}

/* Une couleur par état, la même sur la liste, le détail et l'anneau. */
.crm-st-nouveau{border-color:#c7d2fe;background:var(--brand-soft);color:var(--accent-txt)}
.crm-st-contacte{border-color:#bae6fd;background:#f0f9ff;color:#075985}
.crm-st-qualifie{border-color:#fbcfe8;background:#fdf2f8;color:#9d174d}
.crm-st-rdv{border-color:#fde68a;background:#fffbeb;color:#92400e}
.crm-st-client{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.crm-st-perdu{border-color:var(--line);background:var(--bg-2);color:var(--muted)}

.crm-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem}
.crm-contact{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.2rem;
  border-top:1px solid var(--line)}
.crm-statuts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1.4rem}
.crm-st{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .5rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  font:inherit;text-align:left;transition:.14s ease}
.crm-st b{font-size:.88rem;color:var(--ink)}
.crm-st span{font-size:.74rem;color:var(--muted);line-height:1.3}
.crm-st:hover{border-color:#c7d2fe;background:var(--brand-soft)}
.crm-st.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;background:var(--brand-soft)}
.crm-note{padding-top:1.2rem;border-top:1px solid var(--line)}

.crm-histo{list-style:none;margin:0;padding:0;display:grid;gap:0}
.crm-histo li{position:relative;display:flex;gap:.8rem;padding:0 0 1rem 0}
.crm-histo li i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:.35rem;
  background:var(--brand);position:relative}
.crm-histo li:not(:last-child) i::after{content:"";position:absolute;left:50%;top:14px;
  bottom:-14px;width:2px;transform:translateX(-50%);background:var(--line)}
.crm-histo li.ev-note i{background:var(--muted)}
.crm-histo li.ev-arrivee i{background:var(--ok)}
.crm-histo b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.4}
.crm-histo span{display:block;font-size:.8rem;color:var(--muted)}

.crm-outils{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.crm-outils-b{display:flex;gap:.5rem;flex-wrap:wrap}

@media(max-width:1100px){ .stat-grid-6{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){
  .crm-detail{grid-template-columns:1fr}
  .crm-statuts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .stat-grid-6{grid-template-columns:repeat(2,1fr)}
  .crm-rech input{max-width:100%}
}

/* ---------- Emailing et séquences ---------- */
.stat-grid-4{grid-template-columns:repeat(4,1fr)}
.seqs{display:grid;gap:.7rem}
.seq{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-2);
  overflow:hidden}
.seq > summary{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;cursor:pointer;
  list-style:none}
.seq > summary::-webkit-details-marker{display:none}
.seq-j{flex:0 0 auto;font-size:.74rem;font-weight:800;padding:.24rem .55rem;border-radius:8px;
  background:var(--brand-soft);color:var(--accent-txt)}
.seq > summary b{flex:1 1 auto;min-width:0;font-size:.96rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seq-mod{flex:0 0 auto;font-size:.82rem;font-weight:600;color:var(--lien)}
.seq[open] .seq-mod{color:var(--muted)}
.seq-form{padding:0 1rem 1.1rem;border-top:1px solid var(--line)}
.seq-form .field:first-child{margin-top:1.1rem}
.seq-form textarea{font-size:.92rem;line-height:1.6}

.crm-env-envoye{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.crm-env-planifie{border-color:#c7d2fe;background:var(--brand-soft);color:var(--accent-txt)}
.crm-env-annule,.crm-env-echec{border-color:var(--line);background:var(--bg-2);color:var(--muted)}

@media(max-width:900px){ .stat-grid-4{grid-template-columns:repeat(2,1fr)} }

/* ---------- Console d'administration ---------- */
.adm-alertes{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
/* CE QU'UNE CAUSE PRODUIT, en retrait sous elle (29/08). Le filet a gauche
   dit « ceci decoule de la ligne du dessus » sans qu'on ait a l'ecrire :
   ce ne sont pas des taches de plus, c'est ce qu'on debloquera. */
.adm-a-suites{margin:.45rem 0 0;padding:0 0 0 .9rem;list-style:none;
  border-left:2px solid currentColor;opacity:.72}
.adm-a-suites li{font-size:.86rem;margin:.2rem 0}
.adm-a-suites li::before{content:'92';margin-right:.4rem;opacity:.7}
.adm-a{display:grid;gap:.15rem;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-2)}
.adm-a b{font-size:.96rem;color:var(--ink)}
.adm-a span{font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.adm-a-err{border-color:#fca5a5;background:#fef2f2}
.adm-a-err b{color:#b91c1c}
.adm-a-warn{border-color:#fde68a;background:#fffbeb}
.adm-a-warn b{color:#92400e}
/* Nature d'une source de coûts : la teinte dit le groupe de calcul. */
.nat{font-size:.76rem;font-weight:600}
.nat-vente{color:#0f766e}
.nat-agence{color:#a16207}
.nat-media{color:#4338ca}
.nat-interne{color:#6b7280}
.adm-det{margin-top:.9rem}
.adm-det summary{cursor:pointer;font-size:.88rem;color:var(--lien);font-weight:600}

.adm-liste{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem}
.adm-liste li{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-size:.92rem;padding:.3rem 0;border-bottom:1px solid var(--line-2)}
.adm-liste li:last-child{border-bottom:0}

.adm-per{display:inline-flex;gap:.3rem}
.adm-per a{font-size:.82rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2)}
.adm-per a:hover{text-decoration:none;background:var(--bg-2)}
.adm-per a.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* L'entonnoir : le libellé, la barre, le nombre, et la perte de l'étape. */
.adm-ent{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.adm-ent li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) 5.5rem 4rem;
  gap:.8rem;align-items:center}
.adm-ent-l{font-size:.92rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-ent-b{display:block;height:12px;border-radius:99px;background:var(--line-2);overflow:hidden}
.adm-ent-b i{display:block;height:100%;border-radius:99px;
  background-image:linear-gradient(90deg,var(--brand),var(--sky))}
.adm-ent-n{display:flex;align-items:baseline;gap:.4rem;justify-content:flex-end}
.adm-ent-n b{font-size:1rem;color:var(--ink)}
.adm-ent-n span{font-size:.8rem;color:var(--muted)}
.adm-ent-p{font-size:.84rem;color:var(--muted);text-align:right}

@media(max-width:820px){
  .adm-ent li{grid-template-columns:minmax(0,1fr) 4.5rem;gap:.3rem .6rem}
  .adm-ent-b{grid-column:1 / -1;order:3}
  .adm-ent-p{order:2}
}
.adm-outils{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ---------- Réception des prospects ---------- */
.recep{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.5rem}
.recep-c label{margin-top:.6rem}
.recep-url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;background:var(--bg-2)}
.recep-et{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;white-space:nowrap;border:1px solid}
.recep-et.ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.recep-et.ko{background:#fffbeb;color:#92400e;border-color:#fde68a}
.recep-manque{margin:0 0 .6rem;font-size:.88rem;line-height:1.5;color:#92400e;
  padding:.6rem .8rem;border-radius:10px;background:#fffbeb;border:1px solid #fde68a}
.recep-accepte{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.recep-refuse{border-color:#fde68a;background:#fffbeb;color:#92400e}
.recep-erreur{border-color:#fca5a5;background:#fef2f2;color:#b91c1c}

@media(max-width:980px){ .recep{grid-template-columns:1fr} }

/* ============================================================
   Page publique de qualification (destination des publicités)
   Une colonne, une action. Aucun lien sortant, aucun menu.
   ============================================================ */
.lp{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;
  background:radial-gradient(55rem 30rem at 50% -10%, var(--brand-soft) 0%, transparent 60%),var(--bg)}
.lp-carte{width:100%;max-width:34rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem}
.lp-accroche{margin:0 0 .5rem;font-size:.86rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand-2)}
.lp-carte h1{font-size:1.75rem;line-height:1.2;margin:0 0 .6rem}
.lp-carte h1 span{color:var(--brand)}
.lp-offre{margin:0 0 .6rem;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}
.lp-avantage{display:inline-block;margin:0 0 1.4rem;padding:.4rem .8rem;border-radius:999px;
  font-size:.9rem;font-weight:700;background:var(--brand-soft);color:var(--accent-txt)}
.lp-form{margin-top:.4rem}
.lp-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-consent{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 1.2rem;
  font-weight:400;font-size:.86rem;line-height:1.55;color:var(--ink-2)}
/* La case fait 22 px, mais c'est tout le libelle qui la commute : le
   <label> englobe l'entree, donc la cible reelle fait la largeur du bloc. */
.lp-consent{padding:.5rem;margin-left:-.5rem;border-radius:10px;cursor:pointer}
.lp-consent:hover{background:var(--bg-2)}
.lp-consent input{flex:0 0 auto;width:22px;height:22px;margin-top:.1rem}
.lp-err{margin:0 0 1.2rem;padding:.8rem 1rem;border-radius:12px;
  background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;font-size:.9rem}
.lp-err p{margin:0 0 .3rem;line-height:1.5}
.lp-err p:last-child{margin:0}
.lp-petit{margin:.8rem 0 0;text-align:center;font-size:.84rem;color:var(--muted)}
.lp-merci{text-align:center}
.lp-coche{width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  font-size:1.6rem;font-weight:800;background:rgba(16,185,129,.14);color:#047857}
.lp-sous{margin:0 0 .6rem;font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.recep-q{border-top:1px solid var(--line);margin-top:1.2rem}

@media(max-width:560px){
  .lp{padding:0}
  .lp-carte{border:0;border-radius:0;box-shadow:none;min-height:100vh;padding:1.6rem 1.2rem}
  .lp-carte h1{font-size:1.5rem}
}

.crm-suppr{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.crm-suppr .muted{font-size:.82rem;line-height:1.4}

/* ---------- Statistiques de campagne ---------- */
.st-barre{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 1.25rem}
.st-choix select{min-height:38px;font-size:.88rem;max-width:16rem}

.st-courbe{display:block;width:100%;height:130px}
.st-aire{fill:var(--brand);opacity:.12}
.st-ligne{stroke:var(--brand-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.st-axe{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);
  margin-top:.4rem}

.st-rep{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.st-rep li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) 2.5rem;
  gap:.7rem;align-items:center}
.st-rep-l{font-size:.9rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-rep-b{display:block;height:10px;border-radius:99px;background:var(--line-2);overflow:hidden}
.st-rep-b i{display:block;height:100%;border-radius:99px;background:var(--brand-2);
  border:0 !important}
.st-rep-n{font-size:.92rem;font-weight:700;color:var(--ink);text-align:right}

.st-note{margin:-.4rem 0 1.25rem;padding:.8rem 1rem;border-radius:12px;font-size:.9rem;
  line-height:1.55;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}

@media(max-width:640px){
  .st-rep li{grid-template-columns:minmax(0,1fr) 2.5rem}
  .st-rep-b{grid-column:1 / -1;order:3}
}
/* Trace laissée par la machine : elle se lit, mais elle ne compte pas
   comme un geste commercial. */
.crm-histo li.ev-auto i{background:var(--line);border:2px solid var(--muted)}
.crm-histo li.ev-auto b{color:var(--muted);font-weight:500}
.st-releves .muted{font-size:.84rem;margin-left:.4rem}
/* Évolution d'une période à l'autre, dans la tuile même. */
.ast-ev{font-style:normal;font-weight:800;font-size:.76rem;margin-left:.35rem}
.ast-ev.up{color:#047857}
.ast-ev.down{color:#b45309}
.onb-piste{display:block;width:100%;text-align:left;margin-bottom:.4rem;
  padding:.55rem .75rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.9rem;transition:.14s ease}
.onb-piste:hover{border-color:var(--brand);background:var(--surface)}
.onb-piste:last-child{margin-bottom:0}
.onb-reco-obj .btn{flex:0 0 auto}
@media(max-width:560px){  .onb-reco-obj .btn{width:100%;min-height:46px;margin-top:1rem}
}

body.theme-sombre .onb-reco{border-color:rgba(167,139,250,.35)}
body.theme-sombre .onb-reco-autres{border-top-color:rgba(167,139,250,.35)}
.onb-stop-refus{background:#fef2f2;border-color:#fca5a5}
.onb-stop-refus .onb-stop-t{color:#991b1b}
.onb-stop-refus .onb-stop-m{color:#7f1d1d}
/* Vigilance : l'activité passe, il y a juste une règle à connaître. Le bleu
   dit « information » là où l'ambre dirait « attention » — un tatoueur n'a
   pas à recevoir le même signal qu'un site de paris. */
.onb-stop-info{background:#eff6ff;border-color:#93c5fd}
.onb-stop-info .onb-stop-t{color:#1e40af}
.onb-stop-info .onb-stop-m{color:#1e3a8a}
body.theme-sombre .onb-stop{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4)}
body.theme-sombre .onb-stop-t{color:#fcd34d}
body.theme-sombre .onb-stop-m{color:#fde68a}
body.theme-sombre .onb-stop-refus{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.42)}
body.theme-sombre .onb-stop-refus .onb-stop-t{color:#fca5a5}
body.theme-sombre .onb-stop-refus .onb-stop-m{color:#fecaca}
/* Citation des reconnaissances dans les conditions d'utilisation. */
.cgu-cite{margin:.9rem 0;padding:.75rem 1rem;border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;background:var(--brand-soft);
  font-style:normal;line-height:1.6}

body.theme-sombre .onb-stop-info{background:rgba(59,130,246,.14);border-color:rgba(96,165,250,.42)}
body.theme-sombre .onb-stop-info .onb-stop-t{color:#93c5fd}
body.theme-sombre .onb-stop-info .onb-stop-m{color:#bfdbfe}
/* « Oui, c'est ça » est l'action principale de l'écran : au doigt, elle ne
   peut pas faire 36 px de haut. */
@media(max-width:560px){
  .onb-reco-b .btn{flex:1 1 auto;justify-content:center;min-height:44px;font-size:.94rem}
}


/* ============================================================
   CRM — qualification, tâches, pipeline (31/08)
   ============================================================ */

/* ---------- La barre : deux vues, une recherche ---------- */
.crm-barre{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 1.1rem}
.crm-vues{display:inline-flex;padding:3px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-2)}
.crm-v{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .95rem;border-radius:999px;
  font-size:.88rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.crm-v:hover{text-decoration:none;color:var(--ink)}
.crm-v.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.crm-v svg{flex:0 0 auto;opacity:.75}
/* Elle prend la largeur qui reste et s'aligne à droite : sans `flex:1`,
   elle se repliait sur deux lignes alors que la place était libre. */
.crm-rech{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;
  flex:1 1 22rem;min-width:0;flex-wrap:wrap}
.crm-rech input[type=search]{flex:0 1 15rem;min-width:0}
.crm-rech select{min-height:38px;font-size:.86rem;max-width:12rem}
.crm-raz{font-size:.84rem;color:var(--muted);white-space:nowrap}

/* ---------- À faire ---------- */
.crm-af .card-h .muted{font-size:.84rem}
.crm-af-r{color:var(--bad)}
.crm-tl{list-style:none;margin:0;padding:0;display:grid}
.crm-tl li{display:flex;align-items:flex-start;gap:.65rem;padding:.55rem 0;min-width:0}
.crm-tl li + li{border-top:1px solid var(--line-2)}
.crm-tl form{display:contents}
/* La coche : une vraie cible au doigt, pas une case de 13 px. */
.crm-coche{flex:0 0 auto;width:26px;height:26px;margin-top:.05rem;padding:0;cursor:pointer;
  border:1.5px solid var(--line-btn);border-radius:8px;background:var(--surface);
  display:grid;place-items:center;font-size:.9rem;line-height:1;color:transparent;transition:.14s ease}
.crm-coche:hover{border-color:var(--ok);color:rgba(16,185,129,.45)}
.crm-tt{flex:1 1 auto;min-width:0;font-size:.94rem;line-height:1.45;color:var(--ink)}
.crm-tt i{display:block;font-style:normal;font-size:.82rem;color:var(--muted)}
.crm-tt i a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.crm-tl li.faite .crm-tt{color:var(--muted);text-decoration:line-through}
.crm-tl li.faite .crm-coche{border-color:var(--ok);background:var(--ok);color:#fff}
.crm-tl li.retard .crm-tt i{color:var(--bad);font-weight:600}
.crm-tl li.retard .crm-coche{border-color:var(--bad)}
.crm-tx{flex:0 0 auto;width:26px;height:26px;padding:0;cursor:pointer;border:0;border-radius:8px;
  background:none;color:var(--muted);font-size:.8rem;line-height:1;opacity:.55}
.crm-tx:hover{opacity:1;color:var(--bad);background:var(--bg-2)}
.crm-tvide{font-size:.86rem;line-height:1.5;margin:0 0 .8rem}
.crm-tadd{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.crm-tadd input[type=text]{flex:1 1 12rem;min-width:0;min-height:38px;font-size:.88rem}
/* ⚠ DEUX CHOSES, ET LES DEUX SONT NÉCESSAIRES.
   1. `input[type=date]` NE FIGURE PAS dans la liste des champs habillés en
      tête de feuille : sans ces lignes, il sort avec l'habillage du
      navigateur, gris et bordé de gris, à côté d'un champ texte bleu nuit.
   2. `color-scheme` et pas seulement une couleur de fond : le calendrier
      et les flèches sont dessinés par le navigateur, qui ignore
      `background`. Mesuré : sans elle, fond #3b3b3b sur feuille sombre. */
.crm-tadd input[type=date]{flex:0 0 auto;min-height:38px;font-size:.88rem;
  padding:0 .6rem;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;color:var(--ink);background:var(--surface)}
body.theme-sombre .crm-tadd input[type=date]{color-scheme:dark}

/* ---------- Ce qu'on en pense ---------- */
.crm-sst{margin:0 0 .6rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.crm-qualif,.crm-taches{padding-top:1.2rem;border-top:1px solid var(--line)}
.crm-qualif-l{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start;margin-bottom:.8rem}
.crm-chaleurs{display:flex;gap:.4rem;flex-wrap:wrap}
.crm-ch{display:flex;flex-direction:column;gap:.05rem;padding:.45rem .7rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface);
  min-width:5.6rem;transition:.14s ease}
.crm-ch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.crm-ch b{font-size:.86rem;color:var(--ink)}
.crm-ch i{font-style:normal;font-size:.72rem;line-height:1.3;color:var(--muted)}
.crm-ch:hover{border-color:var(--line-btn)}
.crm-ch input:focus-visible ~ b{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
.crm-ch.on,.crm-ch:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.crm-ch-chaud.on,.crm-ch-chaud:has(input:checked){border-color:#dc2626;box-shadow:0 0 0 1px #dc2626 inset;
  background:rgba(239,68,68,.07)}
.crm-ch-tiede.on,.crm-ch-tiede:has(input:checked){border-color:#d97706;box-shadow:0 0 0 1px #d97706 inset;
  background:rgba(245,158,11,.09)}
.crm-ch-froid.on,.crm-ch-froid:has(input:checked){border-color:#0284c7;box-shadow:0 0 0 1px #0284c7 inset;
  background:rgba(14,165,233,.08)}
.crm-valeur{display:flex;flex-direction:column;gap:.25rem}
.crm-valeur > label{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.crm-valeur-c{display:flex;align-items:center;gap:.35rem}
.crm-valeur-c input{width:8rem;min-height:38px;font-size:.9rem}
.crm-valeur-c i{font-style:normal;font-size:.9rem;font-weight:700;color:var(--muted)}

/* La température sur une ligne de liste : elle passe avant le statut. */
.crm-pt{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;
  white-space:nowrap;border:1px solid var(--line)}
.crm-ch-chaud.crm-pt{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.crm-ch-tiede.crm-pt{border-color:#fde68a;background:#fffbeb;color:#b45309}
.crm-ch-froid.crm-pt{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}

/* ---------- Le pipeline ----------
   Six colonnes qui défilent latéralement : le défilement est DANS la
   bande, jamais dans la page — sinon l'écran entier part de travers. */
/* 168 px : à 190, les six colonnes dépassaient de la carte sur un écran
   de 1440 et la dernière — « Perdu » — était coupée par le bord. */
.crm-pipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:.7rem;overflow-x:auto;padding-bottom:.5rem;margin:0 -.2rem;padding-left:.2rem;padding-right:.2rem}
.crm-col{display:flex;flex-direction:column;min-width:0}
.crm-col-h{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  padding:.42rem .65rem;border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:0}
.crm-col-h b{font-size:.84rem;font-weight:700}
.crm-col-h i{font-style:normal;font-size:.74rem;font-weight:800;padding:.08rem .4rem;
  border-radius:999px;background:rgba(255,255,255,.65);color:inherit}
.crm-col-s{margin:0;padding:.35rem .65rem;font-size:.76rem;font-weight:700;color:var(--ink-2);
  border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg-2)}
.crm-col-s .muted{font-weight:400}
.crm-col-v{margin:0;padding:.9rem .65rem;font-size:.8rem;color:var(--muted);
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px}
.crm-cartes{list-style:none;margin:0;padding:.45rem;display:grid;gap:.45rem;
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  max-height:min(60vh,520px);overflow-y:auto}
.crm-carte{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;
  background:var(--surface);padding:.5rem .55rem}
.crm-carte > a{display:block;color:inherit;min-width:0}
.crm-carte > a:hover{text-decoration:none}
.crm-carte b{display:block;font-size:.86rem;line-height:1.3;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-carte > a:hover b{color:var(--lien)}
.crm-carte span{display:block;font-size:.75rem;line-height:1.35;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-carte em{display:block;font-style:normal;font-size:.76rem;font-weight:700;color:var(--ink-2)}
.crm-b-chaud{border-left-color:#dc2626}
.crm-b-tiede{border-left-color:#d97706}
.crm-b-froid{border-left-color:#0284c7}
.crm-mv{display:flex;gap:.3rem;justify-content:flex-end;margin-top:.4rem}
/* 28 px : sous cette taille, une flèche de pipeline se rate au doigt. */
.crm-mvb{min-width:28px;height:28px;padding:0 .5rem;cursor:pointer;font:inherit;font-size:.95rem;
  line-height:1;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink-2);transition:.14s ease}
.crm-mvb:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--accent-txt)}
.crm-mvb-p{font-weight:800}
.crm-mvb-l{font-size:.76rem;font-weight:600;padding:0 .6rem}
.crm-pipe-c .card-h .muted{font-size:.82rem}

@media(max-width:900px){
  .crm-barre{align-items:stretch}
  /* ⚠ `flex-end` EST FAIT POUR LE GRAND ÉCRAN, où la recherche se range à
     droite de la barre. À 375 px les trois champs passent à la ligne, et
     alignés à droite ils dessinaient un escalier. */
  .crm-rech{width:100%;justify-content:flex-start}
  .crm-rech input[type=search]{flex:1 1 100%;max-width:none}
  .crm-rech select{flex:1 1 8rem;max-width:none}
  .crm-qualif-l{flex-direction:column;gap:.8rem}
  .crm-chaleurs{width:100%}
  .crm-ch{flex:1 1 6rem}
  .crm-pipe{grid-auto-columns:minmax(168px,78vw)}
}
/* À 375 px, deux pastilles à droite d'une ligne ne laissaient que 90 px au
   nom : « Camille Moreau » devenait « Camille M… ». Elles descendent d'une
   ligne, alignées sous le texte plutôt que sous la vignette. */
@media(max-width:560px){
  .crm-l{flex-wrap:wrap;row-gap:.35rem}
  .crm-qui{flex:1 1 calc(100% - 36px - .8rem)}
  .crm-pt,.crm-qui + .crm-et{margin-left:calc(36px + .8rem)}
}

/* ---------- Le même CRM, feuille sombre ---------- */
body.theme-sombre .crm-vues{background:var(--bg-2);border-color:var(--line)}
body.theme-sombre .crm-v.on{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.45)}
body.theme-sombre .crm-coche:hover{border-color:#34d399;color:rgba(52,211,153,.5)}
body.theme-sombre .crm-tl li.faite .crm-coche{background:#059669;border-color:#059669}
body.theme-sombre .crm-tl li.retard .crm-tt i{color:#fca5a5}
body.theme-sombre .crm-tl li.retard .crm-coche{border-color:rgba(248,113,113,.6)}
body.theme-sombre .crm-ch-chaud.on,body.theme-sombre .crm-ch-chaud:has(input:checked){
  border-color:#f87171;box-shadow:0 0 0 1px #f87171 inset;background:rgba(248,113,113,.12)}
body.theme-sombre .crm-ch-tiede.on,body.theme-sombre .crm-ch-tiede:has(input:checked){
  border-color:#fbbf24;box-shadow:0 0 0 1px #fbbf24 inset;background:rgba(251,191,36,.12)}
body.theme-sombre .crm-ch-froid.on,body.theme-sombre .crm-ch-froid:has(input:checked){
  border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf8 inset;background:rgba(56,189,248,.12)}
body.theme-sombre .crm-ch-chaud.crm-pt{border-color:rgba(248,113,113,.45);
  background:rgba(248,113,113,.14);color:#fca5a5}
body.theme-sombre .crm-ch-tiede.crm-pt{border-color:rgba(251,191,36,.45);
  background:rgba(251,191,36,.14);color:#fcd34d}
body.theme-sombre .crm-ch-froid.crm-pt{border-color:rgba(56,189,248,.45);
  background:rgba(56,189,248,.14);color:#7dd3fc}
body.theme-sombre .crm-b-chaud{border-left-color:#f87171}
body.theme-sombre .crm-b-tiede{border-left-color:#fbbf24}
body.theme-sombre .crm-b-froid{border-left-color:#38bdf8}
body.theme-sombre .crm-col-h i{background:rgba(0,0,0,.28)}


/* ============================================================
   Identité de marque — rebranchée sur le studio (31/08)
   ============================================================ */
.idm-choix{display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem}
.idm-choix label{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.idm-choix select{min-height:38px;font-size:.9rem;max-width:22rem}

.idm .card{margin-bottom:1.1rem}
.idm-t{margin:0 0 .45rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}

/* Les deux modes : une vraie carte cliquable, pas une puce de 13 px. */
.idm-mode{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  margin-bottom:.6rem;transition:.14s ease}
.idm-mode:hover{border-color:var(--line-btn)}
.idm-mode.on,.idm-mode:has(input:checked){border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand) inset;background:var(--brand-soft)}
.idm-mode input{margin-top:.25rem;flex:0 0 auto;accent-color:var(--brand)}
.idm-mode span{display:block;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.idm-mode b{display:block;font-size:.96rem;color:var(--ink);margin-bottom:.1rem}

.idm-kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;
  margin:1.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.idm-coul-l{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* Un sélecteur de couleur natif est miné. Sans hauteur ni bordure
   explicites, il sort en 23 px gris à côté de champs de 44. */
.idm-coul-l input[type=color]{width:48px;height:40px;padding:2px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.idm-sans{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--ink-2)}
.idm-sans input{accent-color:var(--brand)}
.idm-ton input{max-width:18rem}

.idm-avert{margin:1rem 0 0;padding:.7rem .85rem;border-radius:10px;
  border:1px solid rgba(245,158,11,.42);background:rgba(245,158,11,.10);
  font-size:.86rem;line-height:1.55;color:var(--ink-2)}
.idm-avert b{color:var(--ink)}

.idm-logo{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.idm-logo-vue,.idm-logo-vide{flex:0 0 auto;width:150px;height:110px;margin:0;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2)}
.idm-logo-vue img{max-width:80%;max-height:80%;object-fit:contain}
.idm-logo-vide{font-size:.82rem;color:var(--muted)}
.idm-logo-a{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column;
  gap:.6rem;align-items:flex-start}
.idm-logo-a input[type=file]{font-size:.86rem;max-width:100%}
.idm-logo-a .muted{margin:0;font-size:.84rem;line-height:1.55}

.idm-pied{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1.4rem}
.idm-pied .muted{font-size:.84rem}

.idm-refaire{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap}
.idm-refaire b{display:block;font-size:.98rem;color:var(--ink)}
.idm-refaire .muted{margin:.2rem 0 0;font-size:.84rem;line-height:1.5;max-width:46rem}

@media(max-width:760px){
  .idm-kit{grid-template-columns:1fr;gap:1rem}
  .idm-logo{gap:.9rem}
}

body.theme-sombre .idm-avert{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}
body.theme-sombre .idm-coul-l input[type=color]{background:var(--bg-2)}


/* ---------- Consommation : où en est la journée (31/08) ---------- */
.cns-jour{border-left:3px solid var(--brand)}
.cns-jour-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.cns-jour-t{margin:0 0 .2rem;font-size:.76rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.cns-jour-n{margin:0;font-size:1.5rem;font-weight:800;line-height:1.15;color:var(--ink)}
.cns-jour-s{margin:.2rem 0 0;font-size:.82rem;line-height:1.45;color:var(--muted)}
.cns-jour-m{margin:1rem 0 0;padding:.7rem .85rem;border-radius:10px;
  border:1px solid rgba(245,158,11,.42);background:rgba(245,158,11,.10);
  font-size:.86rem;line-height:1.55;color:var(--ink-2)}
/* Le dépassement se voit AVANT d'être lu : la carte change de bord. */
.cns-jour-alerte{border-left-color:var(--bad)}
.cns-jour-alerte .cns-jour-n{color:var(--bad)}
@media(max-width:760px){ .cns-jour-l{grid-template-columns:1fr;gap:.9rem} }
body.theme-sombre .cns-jour-m{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}


/* ---------- Envoi des e-mails (01/09) ---------- */
.env-etat{border-left:3px solid var(--line)}
.env-ok{border-left-color:var(--ok)}
.env-ko{border-left-color:var(--bad)}
.env-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.env-t{margin:0 0 .2rem;font-size:.76rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.env-n{margin:0;font-size:1.35rem;font-weight:800;line-height:1.15;color:var(--ink)}
.env-ko .env-l > div:first-child .env-n{color:var(--bad)}
.env-ok .env-l > div:first-child .env-n{color:var(--ok-txt)}
.env-s{margin:.2rem 0 0;font-size:.82rem;line-height:1.45;color:var(--muted)}
.env-m{margin:1rem 0 0;padding:.7rem .85rem;border-radius:10px;
  border:1px solid rgba(245,158,11,.42);background:rgba(245,158,11,.10);
  font-size:.86rem;line-height:1.55;color:var(--ink-2)}
.env-eff{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  font-size:.86rem;color:var(--ink-2)}
.env-eff input{accent-color:var(--bad)}
/* La commande se copie : elle doit être sélectionnable d'un trait, donc
   sur une seule ligne qui défile plutôt que repliée en trois. */
.env-cmd{margin:0 0 .8rem;padding:.75rem .9rem;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-2);overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  color:var(--ink);white-space:pre}
@media(max-width:760px){ .env-l{grid-template-columns:1fr;gap:.9rem} }
body.theme-sombre .env-m{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}


/* ============================================================
   ZONE D'ADMINISTRATION — on doit le voir sans le chercher (01/09)
   ============================================================
   Trois signaux, parce qu'un seul se rate : un bandeau en haut de
   l'écran, un mot dans la barre, et le titre de l'onglet. La teinte est
   AMBRÉE et non rouge — l'administration n'est pas une alerte, c'est un
   autre endroit. Le rouge, gardé pour ce qui ne va pas, s'use vite. */
:root{ --adm:#f59e0b; --adm-fond:rgba(245,158,11,.10); }

/* Le trait du haut est FIXE : il reste visible quand la page défile, et
   il ne pousse rien — il se pose par-dessus, sur 3 px. */
body.zone-admin::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--adm),#fbbf24,var(--adm));z-index:2000;
  pointer-events:none}

.zone-admin .app-top{background:var(--adm-fond);border-bottom-color:rgba(245,158,11,.35)}
.zone-admin .side{border-right:1px solid rgba(245,158,11,.28)}

.top-adm{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem .3rem .55rem;
  border-radius:999px;border:1px solid rgba(245,158,11,.5);background:var(--adm-fond);
  color:var(--ink);white-space:nowrap;line-height:1.2}
.top-adm:hover{text-decoration:none;border-color:var(--adm);background:rgba(245,158,11,.18)}
.top-adm b{font-size:.84rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.top-adm-p{color:var(--adm);font-size:.7rem}
/* « quitter » reste discret : c'est une sortie, pas une invitation. */
.top-adm-s{font-size:.78rem;color:var(--muted);padding-left:.45rem;
  border-left:1px solid rgba(245,158,11,.35)}
@media(max-width:560px){ .top-adm-s{display:none} }

/* ⚠ `body.theme-sombre.zone-admin` — SANS ESPACE. Les deux classes sont
   sur le MÊME élément : écrit avec un espace, le sélecteur cherche un
   descendant qui n'existe pas et la règle ne s'applique jamais.
   Et la teinte monte à .16 : sur un fond déjà sombre, 10 % d'ambre ne se
   voit pas — mesuré à l'écran, pas supposé. */
body.theme-sombre.zone-admin .app-top{background:rgba(245,158,11,.16);
  border-bottom-color:rgba(245,158,11,.42)}
body.theme-sombre.zone-admin .top-adm{background:rgba(245,158,11,.16)}
body.theme-sombre.zone-admin .top-adm:hover{background:rgba(245,158,11,.26)}


/* ---------- Coût d'une production (01/09) ---------- */
.cu-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-bottom:.2rem}
.cu-b{padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.cu-t{margin:0 0 .25rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.cu-n{margin:0;font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--ink)}
.cu-s{margin:.35rem 0 0;font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.cu-d{margin:.3rem 0 0;font-size:.78rem;color:var(--muted)}
.cu-m{margin:1rem 0 0;padding:.7rem .85rem;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-2);
  font-size:.85rem;line-height:1.55;color:var(--ink-2)}
@media(max-width:760px){ .cu-l{grid-template-columns:1fr;gap:.8rem} }

.cu-avert{border-color:rgba(245,158,11,.42);background:rgba(245,158,11,.10)}
body.theme-sombre .cu-avert{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}

/* ---------- Historique du portefeuille (01/09) ---------- */
/* La date et le montant ne se coupent jamais ; c'est la colonne
   « Opération » qui absorbe la largeur restante. Sans ça, un libellé long
   pousse le montant hors de vue sur un écran étroit. */
.pf-tbl td:first-child,.pf-tbl th:first-child{white-space:nowrap;width:1%}
.pf-tbl td:nth-child(3),.pf-tbl th:nth-child(3){width:1%;white-space:nowrap}
.pf-tbl td:last-child,.pf-tbl th:last-child{width:1%}
.pf-note{margin-top:.15rem}

/* Les campagnes du studio sur le tableau de bord (01/09). Une ligne
   cliquable, pas une carte : le tableau de bord annonce, la bibliothèque
   détaille. */
.tdb-camp{display:grid;gap:.2rem;padding:.7rem .2rem;text-decoration:none;
  border-bottom:1px solid var(--line-2)}
.tdb-camp:last-of-type{border-bottom:0}
.tdb-camp:hover{background:var(--surface-2)}
.tdb-camp-t{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tdb-camp-t b{color:var(--text);font-size:.98rem}
.tdb-camp-m{font-size:.85rem;color:var(--muted)}

/* ======================================================================
   CARTES REPLIABLES (01/09) — <details>/<summary>, sans une ligne de JS.

   Natif : ça marche au clavier, ça marche si un script est différé, et
   l'état ouvert/fermé est porté par le HTML lui-même. Une bascule
   maison aurait demandé un script — celui-là même que Rocket Loader
   diffère, laissant les cartes fermées et inertes le temps du réveil.
   ====================================================================== */
.carte-pli > summary{cursor:pointer;list-style:none;user-select:none}
/* Le triangle natif de Safari/Chrome part : on pose le nôtre, orientable. */
.carte-pli > summary::-webkit-details-marker{display:none}
.carte-pli > summary::marker{content:''}
.carte-pli > summary::after{
  content:'';margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);   /* chevron vers le bas */
  transition:transform .16s ease}
.carte-pli[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.carte-pli > summary:hover::after{border-color:var(--text)}
.carte-pli > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
/* Refermée, la carte n'a plus à réserver la place de son contenu. */
.carte-pli:not([open]){padding-bottom:.9rem}

/* ======================================================================
   AFFICHER LE MOT DE PASSE (01/09) — un œil dans le champ.

   Le bouton est POSÉ SUR le champ, pas à côté : le champ garde sa
   largeur pleine, et l'œil ne décale rien quand il apparaît. La marge
   à droite de l'input lui réserve sa place, sinon le texte passerait
   dessous sur un mot de passe long.
   ====================================================================== */
.champ-oeil{position:relative;display:block}
.champ-oeil input{width:100%;padding-right:2.9rem}
.oeil{position:absolute;top:50%;right:.35rem;transform:translateY(-50%);
  display:grid;place-items:center;width:2.1rem;height:2.1rem;padding:0;
  border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;
  transition:color .14s ease,background .14s ease}
.oeil:hover{color:var(--text);background:var(--surface-2)}
.oeil:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Barre cachée tant que le mot de passe l'est : l'œil ouvert dit
   « cliquez pour voir », l'œil barré « cliquez pour masquer ». */
.oeil .oeil-f{opacity:0;transition:opacity .12s ease}
.oeil[aria-pressed="true"] .oeil-f{opacity:1}
.oeil[aria-pressed="true"]{color:var(--brand)}


/* ==================================================================
   LE MENU EN TIROIR (23/09/2026, demande client)
   ==================================================================
   Jusqu'ici la barre laterale occupait 250 px en permanence sur grand
   ecran, et ne devenait un tiroir que sous 900 px. Elle se comporte
   desormais PARTOUT comme sur telephone : un bouton en haut l'ouvre,
   elle se referme d'elle-meme.

   Pourquoi : les ecrans de creation ont besoin de toute la largeur —
   une affiche a cote de sa conversation, un visuel a cote de ses
   reglages. Une colonne de navigation permanente, qu'on ne regarde
   qu'une fois par session, leur prenait un cinquieme de la place.

   ⚠ LES REGLES SOUS @media (max-width:900px) RESTENT, et c'est voulu :
   elles disent la meme chose, elles ne se contredisent pas. Les retirer
   obligerait a verifier 900 px de CSS pour rien.
*/
.app{grid-template-columns:1fr}
.side{position:fixed;left:0;top:0;width:264px;height:100vh;transform:translateX(-100%);
  transition:transform .18s ease;box-shadow:var(--shadow-lg);z-index:25}
body.side-open .side{transform:none}
body.side-open .side-scrim{display:block;position:fixed;inset:0;
  background:rgba(15,23,42,.35);z-index:24}
:is(.app-top,.st-haut) .burger{display:flex}
/* ⚠ LE BOUTON DU MENU PARLE LA LANGUE DE L'ACCUEIL (23/09). Trois traits
   gris ressemblaient à un bouton désactivé ; l'accueil, lui, est fait de
   briques de couleur, et c'est ce que le client reconnaît. Le bouton
   reprend donc quatre de ces briques — bleu, violet, vert, ambre — dans
   l'ordre des tuiles.

   ⚠ ET IL FAUT NEUTRALISER `.burger span`, qui peint des barres grises de
   20 × 2 px sur TOUS les <span> du bouton, y compris ceux qu'on ajoute. */
:is(.app-top,.st-haut) .burger{flex-direction:row;align-items:center;width:auto;height:auto;
  padding:.4rem .75rem .4rem .5rem;gap:.55rem;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);box-shadow:0 2px 6px rgba(15,23,42,.06);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
:is(.app-top,.st-haut) .burger:hover{border-color:transparent;transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.14)}
:is(.app-top,.st-haut) .burger span{width:auto;height:auto;background:none;border-radius:0}
/* ⚠ LA SPÉCIFICITÉ COMPTE ICI, ET ELLE M'A EU. `.burger span` vaut plus
   que `.burger-briques` : mes briques héritaient de son `display:block`
   et sortaient à zéro pixel. Vu à l'écran, pas au lint. */
:is(.app-top,.st-haut) .burger .burger-briques{display:grid;grid-template-columns:repeat(2,9px);
  grid-auto-rows:9px;gap:3px;flex:0 0 auto}
:is(.app-top,.st-haut) .burger .burger-briques i{display:block;width:9px;height:9px;border-radius:3px}
:is(.app-top,.st-haut) .burger .burger-briques i:nth-child(1){background:linear-gradient(135deg,#0877ff,#0a5fd6)}
:is(.app-top,.st-haut) .burger .burger-briques i:nth-child(2){background:linear-gradient(135deg,#7c3aed,#6d28d9)}
:is(.app-top,.st-haut) .burger .burger-briques i:nth-child(3){background:linear-gradient(135deg,#16a34a,#15803d)}
:is(.app-top,.st-haut) .burger .burger-briques i:nth-child(4){background:linear-gradient(135deg,#f59e0b,#d97706)}
/* Ouvert, les briques se rapprochent : le bouton montre son état sans
   changer de forme ni de place. */
body.side-open :is(.app-top,.st-haut) .burger .burger-briques{gap:2px}
body.side-open :is(.app-top,.st-haut) .burger{border-color:var(--brand-2)}
:is(.app-top,.st-haut) .burger .burger-mot{font-size:.88rem;font-weight:700;color:var(--ink);letter-spacing:-.1px}
@media (max-width:560px){ :is(.app-top,.st-haut) .burger .burger-mot{display:none} }
.app-body{margin-inline:auto}


/* ==================================================================
   LE MENU EN BRIQUES (23/09/2026, demande client)
   ==================================================================
   Le bouton est fait de quatre briques de couleur ; ce qu'il ouvre l'est
   aussi. Une liste de liens gris ne se reconnait pas ; une grille de
   couleurs, si — c'est deja ce qui fait marcher l'accueil.

   ⚠ LES TEINTES SONT CELLES DE L'ACCUEIL, aux memes valeurs. Deux palettes
   pour la meme application, et le client apprend deux fois. */
.side{width:300px}
.side-nav{padding:.75rem;display:grid;grid-template-columns:1fr 1fr;gap:7px;
  align-content:start;overflow-y:auto}
.brique{display:flex;flex-direction:column;gap:.35rem;padding:.6rem .62rem;
  border-radius:13px;color:#fff;text-decoration:none;min-height:72px;
  justify-content:space-between;
  box-shadow:0 6px 16px -8px rgba(15,23,42,.5);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.brique:hover{color:#fff;text-decoration:none;transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(15,23,42,.6);filter:saturate(1.08)}
.brique:focus-visible{outline:3px solid #fff;outline-offset:2px}
.brique-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.2);flex:0 0 auto}
.brique-ico svg{width:17px;height:17px}
.brique-txt{font-size:.77rem;font-weight:700;line-height:1.2;text-wrap:balance}
/* La page courante se signale par un liseré blanc, pas par une couleur
   différente : la couleur, elle, dit QUELLE entrée c'est. */
.brique.on{outline:2px solid #fff;outline-offset:-2px}

.bq-bleu{background:linear-gradient(135deg,#0877ff,#0a5fd6)}
.bq-indigo{background:linear-gradient(135deg,#6366f1,#4338ca)}
.bq-violet{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.bq-cyan{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.bq-ambre{background:linear-gradient(135deg,#f59e0b,#d97706)}
.bq-vert{background:linear-gradient(135deg,#16a34a,#15803d)}
.bq-rose{background:linear-gradient(135deg,#db2777,#be185d)}
.bq-sable{background:linear-gradient(135deg,#a8763e,#8a5a2b)}
.bq-menthe{background:linear-gradient(135deg,#0d9488,#0f766e)}
.bq-prune{background:linear-gradient(135deg,#9333ea,#7e22ce)}

/* Le bas du tiroir se fait discret : le compte et la sortie doivent rester
   atteignables, mais ce ne sont pas des destinations de travail. */
.side-bottom{padding:.5rem .6rem .7rem;gap:0}
.side-bottom a{font-size:.84rem;padding:.4em .6em}
.side-bottom .muted-link{padding:.25em .6em}

@media (max-width:560px){ .side{width:min(300px,88vw)} }

/* ══ HIÉRARCHIE DES BOUTONS (24/09/2026, demande client) ═════════════════
   Un seul violet plein par écran : l'action qui fait avancer (créer,
   valider, continuer, enregistrer le formulaire de la page). Les actions
   répétées dans une liste, les doublons et les gestes d'entretien passent
   en .btn-second : contour violet, fond à peine teinté, texte violet —
   cliquables d'évidence, sans disputer le regard au bouton principal.
   ⚠ Les teintes sont MÉLANGÉES aux jetons (color-mix) : la même règle sert
   le thème clair et le sombre (où --brand vaut #7c3aed et --accent-txt
   #a78bfa). */
.btn-second{background:color-mix(in srgb,var(--brand) 7%,transparent);
  border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--accent-txt)}
.btn-second:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--accent-txt)}
body.theme-sombre .btn-second{box-shadow:none}

/* ══ UNIVERS DE COULEUR (24/09/2026, demande client) ══════════════════════
   La page reprend la couleur de sa brique d'accueil : ses boutons
   principaux, ses états choisis, ses dégradés. La classe `univers-<c>` est
   posée sur <body> par ls_head() d'après LS_UNIVERS (inc/layout.php).
   ⚠ PORTÉE : le CONTENU (.app-body ; toute la page pour les écrans « bare »,
     qui n'ont ni menu ni barre), plus le bouton d'action de la barre du haut
     quand il appartient à la page (« Nouveau visuel », « Créer une page
     web »…). Le menu, la barre elle-même et « Nouvelle campagne » (creer.php,
     l'univers violet) restent à la couleur de la marque — c'est ce qui tient
     l'homogénéité du site.
   ⚠ ON REDÉFINIT DES JETONS, PAS DES BOUTONS : les feuilles des pages
     (bibliotheque, atelier, page-web, studio-photo, budget-pub…) peignent
     déjà leurs boutons avec --brand / --brand-2 / --brand-soft /
     --accent-txt / --d3. Une nouvelle page suit donc son univers sans une
     ligne de plus, à condition de ne pas écrire le violet en dur.
   ⚠ --brand porte du texte BLANC : chaque teinte est choisie à 4,5:1 au
     moins (l'ambre est un ambre profond pour cette raison). */
.univers-bleu .app-body,.univers-bleu.mode-bare,.univers-bleu .top-right .btn-second:not([href^="creer"]){--brand:#2563eb;--brand-2:#3b82f6;--brand-soft:#dbeafe;--accent-txt:#1d4ed8;--d3:#1e40af}
.univers-vert .app-body,.univers-vert.mode-bare,.univers-vert .top-right .btn-second:not([href^="creer"]){--brand:#15803d;--brand-2:#16a34a;--brand-soft:#dcfce7;--accent-txt:#166534;--d3:#0f766e}
.univers-rose .app-body,.univers-rose.mode-bare,.univers-rose .top-right .btn-second:not([href^="creer"]){--brand:#db2777;--brand-2:#ec4899;--brand-soft:#fce7f3;--accent-txt:#be185d;--d3:#a21caf}
.univers-cyan .app-body,.univers-cyan.mode-bare,.univers-cyan .top-right .btn-second:not([href^="creer"]){--brand:#0e7490;--brand-2:#0891b2;--brand-soft:#cffafe;--accent-txt:#155e75;--d3:#0369a1}
.univers-orange .app-body,.univers-orange.mode-bare,.univers-orange .top-right .btn-second:not([href^="creer"]){--brand:#c2410c;--brand-2:#ea580c;--brand-soft:#ffedd5;--accent-txt:#9a3412;--d3:#dc2626}
.univers-ambre .app-body,.univers-ambre.mode-bare,.univers-ambre .top-right .btn-second:not([href^="creer"]){--brand:#b45309;--brand-2:#d97706;--brand-soft:#fef3c7;--accent-txt:#92400e;--d3:#d97706}
/* Thème sombre : --brand-2 et --accent-txt ÉCRIVENT sur fond sombre, ils
   s'éclaircissent ; le fond de bouton (--brand) ne change pas. */
.theme-sombre.univers-bleu .app-body,.theme-sombre.univers-bleu.mode-bare,.theme-sombre.univers-bleu .top-right .btn-second:not([href^="creer"]){--brand-2:#60a5fa;--brand-soft:rgba(59,130,246,.18);--accent-txt:#93c5fd;--d3:#0ea5e9}
.theme-sombre.univers-vert .app-body,.theme-sombre.univers-vert.mode-bare,.theme-sombre.univers-vert .top-right .btn-second:not([href^="creer"]){--brand:#16a34a;--brand-2:#4ade80;--brand-soft:rgba(34,197,94,.16);--accent-txt:#86efac;--d3:#14b8a6}
.theme-sombre.univers-rose .app-body,.theme-sombre.univers-rose.mode-bare,.theme-sombre.univers-rose .top-right .btn-second:not([href^="creer"]){--brand-2:#f472b6;--brand-soft:rgba(236,72,153,.18);--accent-txt:#f9a8d4;--d3:#c026d3}
.theme-sombre.univers-cyan .app-body,.theme-sombre.univers-cyan.mode-bare,.theme-sombre.univers-cyan .top-right .btn-second:not([href^="creer"]){--brand-2:#22d3ee;--brand-soft:rgba(6,182,212,.17);--accent-txt:#67e8f9;--d3:#0284c7}
.theme-sombre.univers-orange .app-body,.theme-sombre.univers-orange.mode-bare,.theme-sombre.univers-orange .top-right .btn-second:not([href^="creer"]){--brand:#ea580c;--brand-2:#fb923c;--brand-soft:rgba(249,115,22,.18);--accent-txt:#fdba74;--d3:#dc2626}
.theme-sombre.univers-ambre .app-body,.theme-sombre.univers-ambre.mode-bare,.theme-sombre.univers-ambre .top-right .btn-second:not([href^="creer"]){--brand-2:#fbbf24;--brand-soft:rgba(245,158,11,.17);--accent-txt:#fcd34d;--d3:#d97706}
/* Les écrans du studio (.st : portefeuille-verser, campagne-prete) ont leurs
   propres jetons violets : ils suivent les mêmes — dans le CORPS de l'écran
   seulement (.st-corps). Sa barre du haut (logo « Leadsoon », « Vos
   réponses ») garde le violet de la marque, comme le menu des autres pages. */
body[class*="univers-"] .st-corps{--stv:var(--brand);--stv2:var(--brand-2);--st-teinte:var(--brand-soft);
  --st-teinte-bord:color-mix(in srgb,var(--brand-2) 55%,transparent);--st-bord:color-mix(in srgb,var(--brand) 16%,transparent)}
/* L'espace « Modifier une campagne » (campagne-prete.php depuis la
   bibliothèque) : la carte « Télécharger le pack » porte l'action principale,
   à la couleur de l'univers ; la carte du tutoriel passe en second plan —
   son bleu plein aurait fait un deuxième bouton fort, et le bleu est déjà
   la couleur d'un autre univers. */
body[class*="univers-"] .st .cp-act-a{border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 18%,transparent),transparent 62%),var(--stp2)}
body[class*="univers-"] .st .cp-act-a .cp-act-i,body[class*="univers-"] .st .cp-act-a .cp-act-b{background:var(--brand)}
body[class*="univers-"] .st .cp-act-b2{border-color:var(--stl2);background:var(--stp2)}
body[class*="univers-"] .st .cp-act-b2 .cp-act-i{background:color-mix(in srgb,var(--brand) 30%,var(--stl2))}
body[class*="univers-"] .st .cp-act-b2 .cp-act-b{background:transparent;border:1.5px solid var(--stl2);color:var(--stt)}
body[class*="univers-"] .st .cp-act-b2 .cp-act-b:hover{border-color:var(--brand-2)}
/* Trois pastilles de l'espace « Modifier » teintées en violet en dur
   (studio.css) : elles suivent l'univers. */
body[class*="univers-"] .st-corps .cp-badge,body[class*="univers-"] .st-corps .cp-g-etiq,
body[class*="univers-"] .st-corps .cp-g-fort{background:var(--brand-soft)}
/* LE MENU ET LE RETOUR DE LA BARRE DU STUDIO (25/09/2026, demande client).
   Le bouton Menu reprend celui de l'application (:is(.app-top,.st-haut)
   plus haut) ; le Retour est un bouton discret du même gabarit. */
.st-nav{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.st-retour{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:0 .8rem 0 .6rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);
  font-size:.88rem;font-weight:700;text-decoration:none;box-shadow:0 2px 6px rgba(15,23,42,.06);
  transition:transform .14s ease,box-shadow .14s ease}
.st-retour:hover{text-decoration:none;color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.14)}
.st-retour:focus-visible,.st-haut .burger:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.st-haut .burger{min-height:38px}
@media (max-width:560px){ .st-retour{font-size:0;gap:0;padding:0 .6rem} .st-retour svg{width:18px;height:18px} }
/* Le tiroir posé dans un écran du studio : `.st a{color:var(--stv2)}`
   (studio.css) repeignait en violet le texte des briques, leurs icônes et le
   nom de la marque. On rend à chaque lien la couleur qu'il a dans l'application. */
.st .side a{color:var(--ink)}
.st .side a.brique,.st .side a.brique:hover{color:#fff}
.st .side .brand-name span{color:var(--brand)}
.st .side .muted-link{color:var(--muted)}
/* Sur un téléphone, Menu et Retour prennent la place du NOM de la marque (le
   logo reste) : sans cela, « Vos réponses » passait sur deux lignes. */
@media (max-width:560px){
  .st-haut-in:has(.st-nav){gap:.6rem}
  .st-haut-in:has(.st-nav) .st-logo span{display:none}
  .st-haut-in:has(.st-nav) .st-haut-rep{white-space:nowrap}
}

/* LE MENU REPREND L'ACCUEIL (25/09/2026) : deux rubriques, les couleurs des
   tuiles d'accueil (l'orange de l'Atelier compris), l'administration à part. */
.side-rub{grid-column:1/-1;margin:.35rem .1rem 0;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted,#8b8fa8)}
.side-rub:first-child{margin-top:0}
.bq-orange{background:linear-gradient(135deg,#fb7a2c,#d9360b)}
.bq-admin{background:linear-gradient(135deg,#334155,#1e293b)}

/* ══ LE MENU, AU PIXEL (25/09/2026, demande client) ═══════════════════════
   — une HAUTEUR FIXE (50 px, 20 % de moins que les 62 d'avant) : une brique
     sur deux lignes ne grandit plus, toutes s'alignent ;
   — l'icône À GAUCHE du libellé : deux lignes tiennent dans 50 px ;
   — Accueil sur toute la largeur : c'est le retour, pas une destination ;
   — la page en cours garde son texte BLANC (sombre.css le repeignait en
     violet, illisible sur une brique bleue). */
.side-nav{gap:6px}
.side-nav .brique{flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;
  height:50px;min-height:0;padding:0 10px;border-radius:12px;overflow:hidden}
.side-nav .brique-ico{width:26px;height:26px;border-radius:8px}
.side-nav .brique-ico svg{width:15px;height:15px}
.side-nav .brique-txt{font-size:.74rem;line-height:1.18;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0}
.side-nav .brique-large{grid-column:1/-1}
.side-nav .brique:hover{transform:translateY(-1px)}
body.theme-sombre .side-nav a.brique.on,.side-nav a.brique.on{color:#fff}
.side-rub{margin:.45rem .1rem .05rem}

/* LE VERROU DES API (26/09/2026) : le bandeau des écrans de travail. */
.api-verrou-bandeau{margin:0;padding:.55rem 1.2rem;text-align:center;font-size:.86rem;line-height:1.4;
  background:#7c2d12;color:#fff7ed;border-bottom:1px solid #9a3412}
.api-verrou-bandeau b{font-weight:800}
/* La carte du verrou, en tête de l'administration. */
.adm-verrou{margin:0 0 1.2rem;border-left:4px solid #16a34a}
.adm-verrou-on{border-left-color:#dc2626}
.adm-verrou-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.adm-verrou-tete h2{margin:0;font-size:1.05rem}
.adm-verrou-etat{font-weight:800;font-size:.85rem;color:#16a34a}
.adm-verrou-on .adm-verrou-etat{color:#dc2626}
.adm-verrou-txt{margin:.4rem 0 .8rem;color:var(--muted)}
.adm-verrou-f{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.2rem 0 .6rem}
.adm-verrou-f input{min-width:12rem;flex:0 1 14rem}
.adm-verrou-sous{flex-basis:100%;font-size:.88rem}
.adm-verrou-bloquer{background:#dc2626;border-color:#dc2626;color:#fff}
.adm-verrou-bloquer:hover{background:#b91c1c;border-color:#b91c1c}
.adm-verrou-ouvrir{background:#16a34a;border-color:#16a34a;color:#fff}
.adm-verrou-note{font-size:.84rem;color:var(--muted);margin:.4rem 0 0}
/* Les avis « page prête » : l'état des canaux (07/10/2026). */
.adm-avis{margin:0 0 1.2rem}
.adm-avis-etat{list-style:none;margin:.5rem 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.88rem}
.adm-avis-etat li::before{content:'●';margin-right:.35rem}
.adm-avis-etat li.ok::before{color:#16a34a}
.adm-avis-etat li.ko::before{color:#dc2626}
.adm-avis-etat li.ko{color:var(--muted)}
.adm-avis select{flex:0 0 auto;width:auto;min-width:8rem;min-height:38px}
/* Le compteur du CRM dans le menu (11/10/2026). */
.brique{position:relative}
.brique-pastille{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ef4444;color:#fff;font-size:.75rem;font-weight:700;display:inline-grid;place-items:center;line-height:1}
/* Le bouton CRM de la barre du haut, à côté de « Menu » (11/10/2026). */
.top-crm{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:0 2px 6px rgba(15,23,42,.06);margin-left:.6rem;transition:transform .14s ease,border-color .14s ease}
.top-crm svg{color:#0d9488}
.top-crm:hover{text-decoration:none;color:var(--ink);transform:translateY(-1px);border-color:#0d9488}
.top-crm.on{border-color:#0d9488;background:color-mix(in srgb,#0d9488 12%,var(--surface))}
.top-crm-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ef4444;color:#fff;font-size:.72rem;display:inline-grid;place-items:center;line-height:1}
@media(max-width:640px){.top-crm{margin-left:.4rem;padding:.4rem .6rem}}
/* Le bouton CRM dans la barre du studio (11/10/2026) : même hauteur que « Menu » ; le mot se replie quand la barre se resserre. */
.st-haut .st-crm{margin-left:0;min-height:38px;color:var(--stt,var(--ink))}
@media(max-width:1180px){.st-haut .st-crm span{display:none}}
/* ── IMPRIMER / PDF (12/10/2026) : ls_bouton_pdf(). Portée par html:has(.ls-pdf) :
   seules les pages qui ont le bouton changent d'allure à l'impression. ── */
.ls-impr-tete{display:none}
.bp-tete-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media print{
  @page{margin:14mm 12mm}
  html:has(.ls-pdf) body{background:#fff!important;color:#0f172a;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html:has(.ls-pdf) :is(.side,.side-scrim,.app-top,.burger,.top-crm,#btnHaut,.ls-pdf,.ls-impr-cache,.bp-aide-btn,.res-periodes,.res-retour,.flash,.api-verrou-bandeau,dialog,select,.page-actions select){display:none!important}
  html:has(.ls-pdf) :is(.btn,button){display:none!important}
  html:has(.ls-pdf) .app,html:has(.ls-pdf) .app-main{display:block!important}
  html:has(.ls-pdf) .app-body{max-width:none!important;padding:0!important;margin:0!important}
  html:has(.ls-pdf) .ls-impr-tete{display:flex!important;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid #4f46e5;padding:0 0 8px;margin:0 0 14px;width:100%;order:-1}
  html:has(.ls-pdf) .ls-impr-tete b{font-size:18px;color:#4f46e5}
  html:has(.ls-pdf) .ls-impr-tete span{font-weight:700;font-size:15px;color:#0f172a}
  html:has(.ls-pdf) .ls-impr-tete small{margin-left:auto;color:#64748b;font-size:11px}
  /* ⚠ PAS de break-inside:avoid sur les grandes cartes : une carte plus haute qu'une
     page partait seule sur une nouvelle page et laissait une page presque blanche. */
  html:has(.ls-pdf) :is(.stat,.bp-kpi,tr,figure,li){break-inside:avoid}
  html:has(.ls-pdf) :is(h1,h2,h3){break-after:avoid}
  /* Ce qui ne sert qu'à l'écran : périodes, recherche, tri, filtres, menus d'actions. */
  html:has(.ls-pdf) :is(.bp-per,.bp-dates-f,.bp-kpi-lien,.bp-outils,.bp-actions,.pf2-plus,.pf2-menu,input,.bp-exemple a){display:none!important}
  html:has(.ls-pdf) :is(.card,.bp-carte,.stat,.bp-kpi){box-shadow:none!important}
  html:has(.ls-pdf) a{color:inherit!important;text-decoration:none!important}
  /* L'en-tête d'impression vit dans la zone des boutons : à l'impression, cette zone
     passe AU-DESSUS du titre et prend toute la largeur. */
  html:has(.ls-pdf) :is(.page-head,.bp-tete){display:flex!important;flex-direction:column!important;align-items:stretch!important}
  html:has(.ls-pdf) :is(.page-actions,.bp-tete-b){order:-1;width:100%;display:flex!important;flex-direction:column;align-items:stretch}
  html:has(.ls-pdf) .bp-solde{align-self:flex-start}
  html:has(.ls-pdf) .bp-solde span{display:none}
  /* La plage de dates reste : sans elle, les montants imprimés ne disent pas sur quelle période. */
  html:has(.ls-pdf) .bp-dates summary{list-style:none;pointer-events:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════
   L'APPLICATION HARMONISÉE (19/10/2026, décisions du client : « tout recommandé »)
   ══════════════════════════════════════════════════════════════════════════════════
   LA HIÉRARCHIE DES ACTIONS, la même que le parcours de campagne :
     1. principale : UN SEUL bouton plein par zone, toujours violet (--action) ;
     2. secondaire : contour violet, fond transparent ;
     3. tertiaire  : lien souligné ;
     danger        : lien rouge discret + confirmation, jamais un bouton plein.
   Les couleurs de rubrique (bleu, rose, cyan, orange, ambre…) ne servent plus qu'en
   ACCENT : pastille-icône, choix sélectionnés, badges, tuile de l'accueil.
   États : vert = fait · jaune = à compléter, en retard · rouge = danger, erreur. */
:root{--action:#7c3aed;--action-2:#6d28d9;--action-doux:rgba(124,58,237,.10);--action-txt:#6d28d9;--action-bord:rgba(124,58,237,.55);
  --alerte-txt:#b45309;--alerte-fond:rgba(245,158,11,.12);--alerte-bord:rgba(245,158,11,.5)}
body.theme-sombre{--action-2:#8b5cf6;--action-doux:rgba(139,92,246,.16);--action-txt:#c4b5fd;--action-bord:rgba(167,139,250,.6);
  --alerte-txt:#fbbf24;--alerte-fond:rgba(245,158,11,.12)}

/* ── Une seule largeur : 1 130 px de contenu (1 180 avec les marges). ── */
.app-body{max-width:1180px!important;margin-inline:auto!important}
.app-body :is(.acc-grille,.acc-reprise,.acc-radar){max-width:none}

/* ── Le bloc titre : 1,55 rem, aligné à gauche, comme le parcours. ── */
.app-body h1{font-size:1.55rem!important;line-height:1.16!important;letter-spacing:-.01em}
.app-body .page-head{margin-bottom:1.1rem}

/* ── 1. L'action principale : violet, partout. ── */
:is(.app-body,.mode-bare) :is(.btn-primary,.bbl-nouvelle,.pwg-creer,.atg-creer,.sp2-generer,.cpt-btn-plus,.acc-reprise-btn,.sv-lancer,.onb-avance,.pf2-go){
  background:var(--action)!important;background-image:none!important;border-color:var(--action)!important;color:#fff!important;
  box-shadow:0 8px 20px -10px rgba(124,58,237,.75)!important}
:is(.app-body,.mode-bare) :is(.btn-primary,.bbl-nouvelle,.pwg-creer,.atg-creer,.sp2-generer,.cpt-btn-plus,.acc-reprise-btn,.sv-lancer,.onb-avance,.pf2-go):hover:not(:disabled){
  background:var(--action-2)!important;filter:none!important}
/* Le bouton de la barre du haut : secondaire, violet sur toutes les pages. */
body[class] .top-right a.btn-second:not(#x){--brand:#7c3aed;--brand-2:#8b5cf6;--brand-soft:rgba(124,58,237,.12);
  --accent-txt:var(--action-txt);color:var(--action-txt);border-color:var(--action-bord)}
/* L'aide et les crédits de la barre du haut. */
.top-right{gap:.6rem}
.top-aide,.top-credits{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.top-aide:hover,.top-credits:hover{color:var(--action-txt);text-decoration:none}
.top-credits span{color:var(--action-txt)}
@media (max-width:860px){.top-aide span,.top-credits{display:none}}

/* ── 2. Le secondaire : contour violet. ── */
.app-body :is(.btn-second,.bbl-btn-contour,.pwg-btn-fort,.atg-btn-fort,.mv-dl-b){
  background:transparent!important;background-image:none!important;color:var(--action-txt)!important;
  border:1px solid var(--action-bord)!important;box-shadow:none!important}
.app-body :is(.btn-second,.bbl-btn-contour,.pwg-btn-fort,.atg-btn-fort,.mv-dl-b):hover{background:var(--action-doux)!important}

/* ── Danger : un lien rouge discret. ── */
.app-body .atg-btn-doux[data-at-abandonner-brouillon]{background:none!important;border:0!important;box-shadow:none!important;
  color:#ef4444!important;text-decoration:underline;text-underline-offset:3px;padding-inline:.3rem}

/* ── Les onglets ne ressemblent pas à des boutons (CRM : « Suivi », « Liste »…). ── */
.app-body .cr-vues a.on{background:var(--action-doux)!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--action)}

/* ── Les alertes en jaune, comme le parcours (rappels en retard du CRM). ── */
.app-body :is(.cr-rouge,.cr-carte-t.retard){color:var(--alerte-txt)!important}
.app-body .cr-taches li.retard .cr-t-txt i{color:var(--alerte-txt)!important}

/* ── Les petits textes utiles : 13 px au moins, plus clairs. ── */
body.theme-sombre .app-body :is(.hint,.bp-muet,.mv-date,.bbl-etape small,.bbl-budget small){color:#a3abc8}

/* ══ ACCUEIL : UNE SEULE ACTION MISE EN AVANT, DES TUILES CALMES ══════════════════
   La reprise d'une campagne (s'il y en a une), sinon « Créer une nouvelle campagne ».
   Les autres tuiles : fond de carte, pastille dans la couleur de leur rubrique. */
.app-body .acc-btn:not(.acc-btn-phare){background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;box-shadow:none!important;min-height:118px;padding:1.15rem 1.25rem}
.app-body .acc-btn:not(.acc-btn-phare):hover{color:var(--ink)!important;border-color:var(--action-bord)!important;filter:none;transform:translateY(-1px)}
.app-body .acc-btn:not(.acc-btn-phare) .acc-txt{text-shadow:none}
.app-body .acc-btn:not(.acc-btn-phare) .acc-txt b{font-size:1.08rem}
.app-body .acc-btn:not(.acc-btn-phare) .acc-txt > span{color:var(--ink-2);opacity:1;font-size:.9rem}
.app-body .acc-btn:not(.acc-btn-phare) .acc-txt small{background:var(--bg-2,rgba(128,128,128,.12));color:var(--ink-2)}
.app-body .acc-btn:not(.acc-btn-phare) .acc-fleche{color:var(--ink-2)}
.app-body .acc-btn:not(.acc-btn-phare) .acc-ico{width:52px;height:52px;border-radius:15px;color:#fff}
.app-body .acc-btn:not(.acc-btn-phare) .acc-ico svg{width:26px;height:26px}
.app-body .acc-violet:not(.acc-btn-phare) .acc-ico{background:#7c3aed}
.app-body .acc-vert .acc-ico{background:#16a34a}
.app-body .acc-bleu .acc-ico{background:#2563eb}
.app-body .acc-menthe .acc-ico{background:#0d9488}
.app-body .acc-rose .acc-ico{background:#db2777}
.app-body .acc-cyan .acc-ico{background:#0891b2}
.app-body .acc-orange .acc-ico{background:#ea580c}
.app-body .acc-ambre .acc-ico{background:#d97706}
/* La tuile mise en avant, quand aucune campagne n'attend : violet plein. */
.app-body .acc-btn-phare{background:linear-gradient(135deg,#8b5cf6,#6d28d9)!important;color:#fff!important}
/* Le Radar : une carte comme les autres, avec un bouton secondaire. */
.app-body .acc-radar{background:var(--surface)!important;background-image:none!important;color:var(--ink)!important;
  border:1px solid var(--line);box-shadow:none!important;padding:1.1rem 1.25rem}
.app-body .acc-radar:hover{color:var(--ink)!important;border-color:var(--action-bord);transform:none}
.app-body .acc-radar-ico{background:#9333ea;color:#fff;width:52px;height:52px;border-radius:15px}
.app-body .acc-radar-txt > span{color:var(--ink-2);opacity:1;font-size:.9rem}
.app-body .acc-radar-txt b{font-size:1.08rem}
.app-body .acc-radar-go{background:transparent;color:var(--action-txt);border:1px solid var(--action-bord);font-weight:700}
.app-body .acc-reprise{background:var(--surface);border-color:var(--action-bord)}

/* ══ GRANDS BANDEAUX : SEULEMENT QUAND LA PAGE EST VIDE ════════════════════════════
   Pages web, atelier : une fois le premier élément créé, le bandeau se réduit au titre et
   au bouton (les arguments de vente et l'illustration s'effacent). */
.app-body .pwg:has(.pwg-carte) :is(.pwg-atouts,.pwg-illu),
.app-body .atg:has(.atg-carte) :is(.atg-atouts,.atg-illu){display:none!important}
.app-body .pwg:has(.pwg-carte) .pwg-hero,.app-body .atg:has(.atg-carte) .atg-hero{min-height:0!important;padding-block:1rem!important;
  grid-template-columns:minmax(0,1fr)!important;background:none!important;border:0!important;box-shadow:none!important;padding-inline:0!important}
.app-body .pwg:has(.pwg-carte) .pwg-hero-txt,.app-body .atg:has(.atg-carte) .atg-hero-txt{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.app-body .pwg:has(.pwg-carte) .pwg-hero-bas,.app-body .atg:has(.atg-carte) .atg-hero-bas{margin:0}
/* Mon compte : le fil d'Ariane, seul de son espèce, disparaît. */
.app-body .cpt-fil > :not(.cpt-retour){display:none}
.app-body .cpt-fil:not(:has(.cpt-retour)){display:none}
.app-body .cpt-addition{margin:.35rem 0 0;font-size:.9rem;color:var(--ink-2)}

/* ══ RADAR ══════════════════════════════════════════════════════════════════════
   Le bouton « Lancer mon Radar » inactif se lit comme inactif ; les étiquettes du
   dessin ne ressemblent plus à des boutons ; « Reprendre les informations » si. */
.app-body .rds-go:disabled,.st .rds-go:disabled{background:var(--stp2,#1b2036)!important;background-image:none!important;
  color:var(--stm,#9aa3c0)!important;border:1px solid var(--stl,#2a3150)!important;box-shadow:none!important;opacity:1!important}
.st .rds-art-label{display:none}
.st a.rds-reprise{border:1px solid var(--action-bord)!important;cursor:pointer}
.st a.rds-reprise b::after{content:"  →";color:var(--action-txt)}
.st .st-pied:has(.rds-go:not(:disabled)) .rds-go-aide{display:none}
.st .rds-go-aide{margin-right:auto}

/* ══ MES VIDÉOS : un seul « Télécharger » par carte, plus aucun débordement ══════ */
.mv-dl{position:relative}
.mv-dl > summary{list-style:none;justify-content:center;width:100%;min-height:38px;cursor:pointer}
.mv-dl > summary::-webkit-details-marker{display:none}
.mv-dl-liste{display:grid;gap:4px;margin-top:6px}
.mv-dl-liste .mv-fmt{flex:none;min-width:0;background:var(--bg-2,rgba(128,128,128,.12))!important;color:var(--ink)!important;
  border:1px solid var(--line);text-align:left;font-weight:600}
.mv-dl-liste .mv-fmt:hover{border-color:var(--action-bord)}
.mv-actions{grid-template-columns:minmax(0,1fr)!important}
.mv-actions .btn{white-space:normal;text-align:center}
.mv-tete h1{font-size:1.55rem!important}

/* Radar : l'illustration décorative du haut, à la première visite seulement (le formulaire d'abord). */
#stEcranRadar:not(:has(.rds-benefits)) .rds-hero-art{display:none}

/* ══ STUDIO VIDÉO : « Générer ma vidéo » toujours visible (19/10/2026) ═══════════════
   Il n'arrivait qu'après deux écrans de défilement : la zone se colle au bas de la fenêtre. */
@media (min-width:861px){
  .sv-gauche .sv-lancer-zone{position:sticky;bottom:10px;z-index:6;background:var(--surface);
    box-shadow:0 -14px 30px -12px rgba(0,0,0,.45)}
}
/* ══ creations.php : la colonne au centre, comme les autres assistants ══════════════ */
.onb-corps{margin-inline:auto!important}

/* ══ STUDIO PHOTO : tout l'outil dans la fenêtre (19/10/2026) ══════════════════════
   À 768 px de haut, la colonne des styles poussait la page de 180 px : une rangée de
   styles à la fois (les flèches font défiler), l'aperçu un peu moins haut. */
@media (min-width:1181px) and (max-height:940px){
  .app-body .sp2-defil{max-height:142px!important}
  .app-body .sp2-col-c .sp2-scene{min-height:240px}
  .app-body .sp2-col{gap:10px}
  .app-body .sp2-carte{padding-block:12px}
  .app-body .sp2-col-d .sp2-atouts{display:none}
  .app-body .sp2-tete{padding-bottom:.4rem}
  .app-body .sp-depot,.app-body .sp2-depot{min-height:0;padding-block:.7rem}
}
@media (min-width:1181px) and (max-height:800px){
  .app-body:has(.sp2){padding-top:1rem!important}
  .app-body .sp2{gap:12px}
}
/* Téléphone : la barre du haut garde l'essentiel ; rien ne déborde (19/10/2026). */
@media (max-width:560px){
  .top-title,.top-aide{display:none!important}
  .app-body > *,.app-body .cr,.app-body .cr > *{min-width:0;max-width:100%}
  .app-body .cr-tete,.app-body .cr-tete > div{min-width:0}
  .app-body .cr-tete-b{flex-wrap:wrap}
  .app-body .cr-filtres{min-width:0;width:100%}
  .app-body .cr-filtres :is(input,select){min-width:0;flex:1 1 100%;max-width:100%}
  .app-top .vs-mes-btn{padding:6px 9px;font-size:12.5px}
  .top-right{gap:.4rem}
}

/* ══════════════════════════════════════════════════════════════════════════════════
   AU-DESSUS DE LA LIGNE DE FLOTTAISON (19/10/2026, demande client)
   Écrans d'action : la page ne défile pas. Listes : le titre, les filtres, l'action
   principale et le premier élément sont visibles sans défiler ; la suite défile.
   ══════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1081px){
  /* ── ACCUEIL : huit tuiles sur deux rangées de quatre. ── */
  .app-body .acc-grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .app-body .acc-grille > :last-child:nth-child(odd){grid-column:auto;min-height:0}
  .app-body .acc-btn{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;gap:.55rem .6rem;
    min-height:0!important;padding:.9rem 1rem!important}
  .app-body .acc-btn .acc-ico{grid-row:1;grid-column:1;width:40px!important;height:40px!important;border-radius:12px!important}
  .app-body .acc-btn .acc-ico svg{width:21px;height:21px}
  .app-body .acc-btn .acc-fleche{grid-row:1;grid-column:2;align-self:center}
  .app-body .acc-btn .acc-txt{grid-row:2;grid-column:1/-1;gap:.2rem}
  .app-body .acc-btn .acc-txt b{font-size:1rem!important;line-height:1.25}
  .app-body .acc-btn .acc-txt > span{font-size:.84rem!important;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .app-body .acc-btn .acc-txt small{font-size:.72rem;margin-top:.15rem}
  .app-body .acc-reprise{padding:.9rem 1.2rem;margin-bottom:.9rem}
  .app-body .acc-radar{padding:.75rem 1.1rem!important;margin-bottom:.9rem}
  .app-body .acc-radar-ico{width:44px!important;height:44px!important}

  /* ── MON COMPTE : le héros resserré, les deux cartes côte à côte et compactes. ── */
  .app-body .cpt-hero{min-height:0}
  .app-body .cpt-hero-txt{padding:22px 24px 20px 30px}
  .app-body .cpt-hero h1{margin:10px 0 6px}
  .app-body .cpt-jauge{min-height:0;padding:12px 24px 12px 6px}
  .app-body .cpt-anneau{width:184px;height:184px}
  .app-body .cpt-nombre{font-size:44px}
  .app-body .cpt-actions{margin-top:10px}
  .app-body .cpt-garanties{margin-top:10px}
  .app-body .cpt-avis{margin-top:10px;padding:9px 16px}
  .app-body .cpt-grille{margin-top:10px;gap:12px}
  .app-body .cpt-carte{padding:14px 18px}
  .app-body .cpt-couts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app-body .cpt-inclus{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .app-body .cpt-reglages{margin-top:10px}

  /* ── PORTEFEUILLE : l'action et le premier mouvement de l'historique au-dessus de la ligne. ── */
  .app-body .bp{gap:12px}
  .app-body .bp-kpi{padding:12px 16px;gap:3px}
  .app-body .pf2-montants{flex-wrap:nowrap}
  .app-body .pf2-m,.app-body .pf2-autre{flex:1 1 0;min-width:0}
  .app-body .pf2-form{gap:10px}
  .app-body .pf2-go{min-height:44px}
  .app-body .pf2-totaux{margin-bottom:8px}
  .app-body .bp-carte{padding:14px 18px}
  .app-body .bp-carte-h{margin-bottom:10px}
  /* ── BUDGET : les graphiques moins hauts, la liste des campagnes remonte. ── */
  .app-body .bp-graphe{grid-template-rows:150px auto}
  .app-body .bp-graphe-vide{min-height:130px;padding:12px}
  .app-body .bp-donut{width:min(120px,60%);margin:2px auto 10px}

  /* ── CRM : le premier contact entier au-dessus de la ligne. ── */
  .app-body .cr-exemples{padding-block:8px}
  .app-body .cr-afaire{padding-block:10px}
  .app-body .cr > *{margin-block:0}
  .app-body .cr{gap:12px}

  /* ── MES VIDÉOS : la première rangée entière, vidéo comprise. ── */
  .app-body .mv-video{aspect-ratio:auto;height:clamp(220px,calc(100vh - 440px),430px)}

  /* ── STUDIO VIDÉO : l'atelier dans la fenêtre ; « Mes vidéos » en onglet. ── */
  .app-body .sv-biblio:not(:target){display:none}
  .app-body:has(.sv-biblio:target) .sv-atelier{display:none}
  .app-body .sv-biblio:target{border-top:0;padding-top:0}
  .app-body .sv-onglet-retour{margin-bottom:10px}
  .app-body .sv-atelier{height:calc(100vh - 236px);min-height:420px;align-items:stretch;margin-bottom:0}
  .app-body .sv-gauche{min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:6px;align-content:start}
  .app-body .sv-droite{position:static;align-self:stretch;overflow:hidden}
  .app-body .sv-gauche .sv-lancer-zone{bottom:0}
}
/* Les écrans courts (≤ 800 px de haut) : encore un peu de place. */
@media (min-width:1081px) and (max-height:800px){
  .app-body:not(:has(> .st)){padding-top:1rem!important;padding-bottom:1rem!important}
  .app-body .page-head{margin-bottom:.7rem}
  .app-body .cpt-hero h1{font-size:30px}
  .app-body .cpt-sous{margin-bottom:0}
  .app-body .bp-tete{gap:8px 20px}
}
/* Mon compte : les sections repliables, et le héros plus serré. */
.app-body .cpt-pli > summary{list-style:none;cursor:pointer;margin-bottom:0;padding:6px 0}
.app-body .cpt-pli > summary::-webkit-details-marker{display:none}
.app-body .cpt-pli > summary:hover h3{color:var(--action-txt)}
.app-body .cpt-pli[open] > summary{margin-bottom:10px}
.app-body .cpt-offre .cpt-pli{margin-top:12px}
@media (min-width:1081px){
  .app-body .cpt .cpt-hero-txt{padding:18px 22px 16px 28px}
  .app-body .cpt .cpt-anneau{width:160px;height:160px}
  .app-body .cpt .cpt-nombre{font-size:38px}
  .app-body .cpt .cpt-hero h1{font-size:30px;margin:8px 0 4px}
  .app-body .cpt .cpt-filet{margin:10px 0}
}
@media (min-width:1081px) and (max-height:820px){
  /* Mon compte, écran court : l'étiquette d'état et les trois garanties (répétées dans la
     carte de la formule et dans l'avis) cèdent leur place ; tout le reste tient. */
  .app-body .cpt .cpt-statut,.app-body .cpt .cpt-garanties{display:none}
  .app-body .cpt .cpt-anneau{width:140px;height:140px}
  .app-body .cpt .cpt-nombre{font-size:32px}
  .app-body .cpt .cpt-avis{padding:7px 14px}
  .app-body .cpt .cpt-carte{padding:12px 16px}
  .app-body .cpt .cpt-promo{margin-top:8px;padding:.35rem .6rem}
  .app-body .cpt .cpt-reglages > summary{padding-block:10px}
  .app-body .cpt .cpt-carte-tete,.app-body .cpt .cpt-offre-tete{margin-bottom:4px}
  /* Portefeuille, écran court : chiffres et choix plus serrés. */
  .app-body .pf2 .bp-kpi{padding:9px 14px}
  .app-body .pf2 .pf2-mo > span{grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:8px 10px}
  .app-body .pf2 .pf2-mo > span > svg{grid-row:1 / span 2}
  .app-body .pf2 .bp-kpi b{font-size:22px}
  .app-body .pf2-evol .bp-graphe{grid-template-rows:140px auto}
}
@media (min-width:1081px){
  /* Mon compte : « Offre active » rejoint le coin de sa carte au lieu d'occuper une ligne. */
  .app-body .cpt .cpt-offre{position:relative}
  .app-body .cpt .cpt-offre-tete{position:absolute;top:12px;right:14px;margin:0}
  .app-body .cpt .cpt-offre-tete .cpt-offre-ico{display:none}
}
@media (min-width:1081px) and (max-height:960px){
  .app-body .cpt .cpt-statut,.app-body .cpt .cpt-garanties{display:none}
  .app-body .cpt .cpt-anneau{width:150px;height:150px}
  .app-body .cpt .cpt-nombre{font-size:34px}
  /* Portefeuille : montants et moyens de paiement sur une seule hauteur de bouton. */
  .app-body .pf2 .pf2-m > span{padding-block:7px;min-height:0}
  .app-body .pf2 .pf2-m small{display:inline;margin-left:4px}
  .app-body .pf2 .pf2-mo > span{padding:7px 10px;gap:1px}
  .app-body .pf2 .pf2-mo svg{width:16px;height:16px}
  .app-body .pf2 .bp-kpi{padding:9px 14px}
  .app-body .pf2 .bp-kpi b{font-size:22px}
  .app-body .pf2-histo .bp-carte-h{margin-bottom:4px}
}
@media (min-width:1081px){
  .app-body:has(> .cpt){padding-bottom:14px!important}
}
@media (min-width:1081px) and (max-height:820px){
  .app-body .cpt .cpt-avis{padding:5px 14px;margin-top:8px}
  .app-body .cpt .cpt-avis p{margin:0}
  .app-body .cpt .cpt-reglages > summary{padding-block:7px!important}
  .app-body .cpt .cpt-reglages summary b,.app-body .cpt .cpt-reglages summary small{display:inline;margin:0 8px 0 0}
  .app-body .cpt .cpt-reglages summary{padding-block:9px!important}
  .app-body .cpt .cpt-grille{margin-top:8px}
  .app-body .cpt .cpt-hero-txt{padding-block:14px 12px}
  .app-body:has(> .cpt){padding-top:6px!important}
  .app-body .cpt .cpt-filet{margin:6px 0}
}

/* ══ LA PASTILLE DE TITRE, SUR TOUTES LES PAGES (19/10/2026, demande client) ═════════════
   Modèles : « Pages web dédiées » et « Studio photo IA ». Un carré arrondi de 54 px dans la
   couleur de la rubrique (celle du menu), l'icône blanche, 14 px puis le titre. Les icônes
   qui existaient déjà prennent exactement les mêmes mesures. */
.ls-titre{display:flex;align-items:center;gap:14px;min-width:0}
.ls-titre > div{min-width:0}
.ls-titre h1{margin:0}
.ls-titre :is(p,.sub,.mv-sous){margin:3px 0 0}
.ls-pastille{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:15px;color:#fff;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.ls-pastille svg{width:26px;height:26px}
.app-body :is(.pwg-logo,.atg-logo,.sp2-logo){width:54px!important;height:54px!important;border-radius:15px!important}
.app-body :is(.pwg-titre,.atg-titre,.sp2-titre){gap:14px!important}
/* Créer une vidéo : le titre redevient visible, à gauche de l'en-tête. */
.vs-entete .ls-titre{margin-right:auto}
.vs-entete .vs-titre-page{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
  font-size:1.55rem;line-height:1.16}
.vs-entete .ls-titre .sub{font-size:.92rem;color:var(--ink-2)}
/* Mon compte : le titre au-dessus du héros. */
.app-body .cpt .cpt-titre{margin:0 0 12px}
.app-body .cpt .cpt-titre .sub{color:var(--cpt-muet,var(--ink-2));font-size:.92rem}
/* Radar : son icône aux mêmes mesures. */
.st .st-titre:has(> .st-titre-ico){align-items:center;gap:14px}
#stEcranRadar.st .st-titre{gap:14px!important;align-items:center}
#stEcranRadar.st .st-titre .st-titre-ico{width:54px!important;height:54px!important;border-radius:15px!important;
  background:linear-gradient(135deg,#9333ea,#7e22ce)!important;color:#fff!important;box-shadow:0 10px 22px -12px rgba(0,0,0,.55)!important;border:0!important}
#stEcranRadar.st .st-titre .st-titre-ico svg{width:26px;height:26px}
#stEcranRadar.st .st-titre .st-titre-ico{flex:0 0 54px!important}
#stEcranRadar.st .st-titre .st-titre-ico{display:grid!important}   /* la pastille reste aussi sur téléphone */
@media (max-width:560px){ #stEcranRadar.st .st-titre .st-titre-ico{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:12px!important} }
/* Créer une vidéo : l'en-tête (titre et pastille) reste affiché à l'étape 1 aussi. */
.vs:has(.vs-etape-1:not([hidden])) .vs-entete:has(.ls-titre){display:flex}
.vs:has(.vs-etape-1:not([hidden])) .vs-entete > :not(.ls-titre){display:none}   /* quota et campagne : déjà dans la colonne de droite */
/* Le titre au même endroit que la page défile ou non : la place de la barre est toujours réservée. */
html:has(body .app-body){scrollbar-gutter:stable}
/* Mon compte : le titre est sorti du héros ; le héros se resserre d'autant. */
@media (min-width:1081px){
  .app-body .cpt .cpt-titre{margin-bottom:8px}
  .app-body .cpt .cpt-hero-txt{padding-top:12px!important}
}
@media (min-width:1081px) and (max-height:820px){
  .app-body .cpt .cpt-titre{margin-bottom:6px}
  .app-body .cpt .cpt-avis{margin-top:6px!important}
  .app-body .cpt .cpt-grille{margin-top:6px!important}
  .app-body .cpt .cpt-reglages{margin-top:6px!important}
  .app-body .cpt .cpt-sous{line-height:1.45;margin-bottom:0}
  .app-body:has(> .cpt){padding-bottom:4px!important}
  .app-body .cpt .cpt-addition{margin-top:2px}
  .app-body .cpt .cpt-actions{margin-top:6px!important}
  .app-body .cpt .cpt-hero-txt{padding-block:8px 8px!important}
  .app-body .cpt .cpt-anneau{width:128px;height:128px}
  .app-body .cpt .cpt-nombre{font-size:28px}
}
@media (max-width:560px){
  .ls-pastille,.app-body :is(.pwg-logo,.atg-logo,.sp2-logo){width:44px!important;height:44px!important;border-radius:12px!important}
  .ls-pastille svg{width:22px;height:22px}
}

/* ══ « VOIR PLUS » COMMUN (19/10/2026) — même vocabulaire que « Mes campagnes » ══════════ */
.vp-plie{display:none!important}
.vp-plus{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:10px;
  border:1px dashed var(--action-bord);border-radius:14px;background:transparent;color:var(--action-txt);
  font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.vp-plus:hover{background:var(--action-doux);border-style:solid}
.vp-plus:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.vp-plus small{font-size:.82rem;font-weight:600;opacity:.85}
.vp-plus[hidden]{display:none}
/* Dans une colonne du CRM : plus discret, à la largeur de la colonne. */
.cr-colonne .vp-plus{min-height:40px;margin:6px 0 0;font-size:.86rem;border-radius:11px}
/* Le grand tableau du budget : le bouton prend la largeur du cadre. */
.bp-tbl-cadre + .vp-plus{margin-top:8px}

/* ══ LES TROIS ÉCARTS VALIDÉS PAR LE CLIENT (19/10/2026) ═══════════════════════════════════
   CRM : l'onglet actif est un onglet (souligné, fond léger), pas un bouton plein. */
.app-body .cr-vues a.on,.app-body .cr-vues a.on:hover{background:var(--action-doux)!important;color:var(--ink)!important;
  box-shadow:inset 0 -2px 0 var(--action)!important;border-radius:9px 9px 4px 4px}

/* Radar (écart validé) : le cadre sombre s'arrête aux mêmes bords que le contenu des autres
   pages — 1 135 px à 1366 au lieu de 1 180. */
@media (min-width:1081px){
  .app-body:has(> #stEcranRadar){padding-left:1.4rem!important;padding-right:1.4rem!important}
}
/* Mon compte (écart validé) : pas de défilement dans une fenêtre 1366×768 réelle. */
@media (min-width:1081px){ .app-body .cpt{padding-bottom:0!important} }
@media (min-width:1081px) and (max-height:760px){
  .app-body .cpt .cpt-titre{margin-bottom:4px}
  .app-body .cpt .cpt-hero-txt{padding-block:6px!important}
  .app-body .cpt .cpt-jauge{padding-block:6px!important}
  .app-body .cpt .cpt-anneau{width:112px;height:112px}
  .app-body .cpt .cpt-actions{margin-top:4px!important}
  .app-body .cpt .cpt-avis{padding-block:2px!important;margin-top:5px!important}
  .app-body .cpt .cpt-avis strong{margin-bottom:0!important}
  .app-body .cpt .cpt-grille{margin-top:5px!important}
  .app-body .cpt .cpt-carte{padding-block:9px!important}
  .app-body .cpt .cpt-promo{margin-top:5px!important;padding-block:3px!important}
  .app-body .cpt .cpt-offre .cpt-pli{margin-top:6px!important}
  .app-body .cpt .cpt-offre-liens{margin-top:4px!important}
  .app-body .cpt .cpt-util{margin-top:8px!important}
  .app-body .cpt .cpt-reglages{margin-top:5px!important}
  .app-body .cpt .cpt-reglages summary{padding-block:6px!important}
}

/* « Voir plus » dans la grille (data-vp-dans) : une case de la grille, à la hauteur des cartes. */
[data-vp-dans] > .vp-plus{margin:0;height:auto;align-self:stretch;flex-direction:column;gap:6px;padding:14px;text-align:center}
[data-vp-dans] > .vp-plus span{font-size:1.3rem;line-height:1}

/* ══ REVUE MOBILE (19/10/2026, demande client) ═════════════════════════════════════════════
   Un seul bloc pour toutes les pages : téléphones (360 à 390 px), tablette (768 px) et tout
   écran tactile. */
/* Le texte réservé aux lecteurs d'écran ne doit jamais élargir la page (tableau du budget). */
.sr-only{top:0;left:0}
@media (max-width:820px), (pointer:coarse){
  /* Champs : 16 px au moins, sinon l'iPhone agrandit la page à la saisie. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]),
  select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]),
  select{min-height:44px}
  /* Boutons et onglets : 44 px de haut au moins. */
  :is(button,.btn,.st-btn,[role=button],summary):not(.st4-point):not(.vp-plie){min-height:44px}
  a.btn,a.st-btn{align-content:center}
  :is(.bp-filtre,.bp-per-btn,.pwg-btn,.atg-btn,.cp-ong,.cp-act-b,.st-ok-deduit,.st-prec-passer,.st-corrige,
      .st-compris-tete,.fmt-modifier,.st4-relire,.st4-densite-b,.rep-tete,.cpt-couts-tete,.mv-fmt,.mv-dl > summary,
      .cr-vues a,.cr-onglets-st a,.cp-copier){min-height:44px!important}
  /* Boutons-icônes (ils portent un aria-label) : 44 × 44. */
  :is(button,a,summary)[aria-label]:not(.st4-point):not(.sp2-aide):not(.sp2-style-x):not(.rds-aide):not(.st-logo):not(.st-credits),
  .bascule-theme,.burger,.top-crm,.st-haut-rep,.st-pause,.st-retour,.cr-coche,.cr-fleches button,.cr-reglage,
  .pwg-plus,.atg-plus,.oeil,.sp2-defil-btn,.st4-fleche,.st5-loupe{min-width:44px!important;min-height:44px!important}
  .cr-fleches button,.cr-coche{display:inline-grid;place-items:center}
  /* Liens seuls sur leur ligne : 44 px de haut, le texte centré. */
  :is(.acc-reprise-lien,.bp-kpi-lien,.cpt-lien,.cpt-avis-lien,.pwg-lien,.muted-link,.brand,.cr-raz,.bp-vide-lien){
    display:inline-flex!important;align-items:center;min-height:44px}
  /* Petites icônes dans une phrase ou une barre serrée : la zone de toucher grandit
     (12 px de chaque côté), la mise en page ne bouge pas. */
  :is(.sp2-aide,.sp2-style-x,.rds-aide){box-sizing:content-box!important;padding:12px!important;margin:-12px!important;
    background-clip:content-box!important}
  .st-logo{box-sizing:content-box!important;padding:8px!important;margin:-8px!important}
  .st-credits{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;min-width:44px;
    padding-block:12px!important;margin-block:-12px!important}
  /* Liens seuls sur leur ligne, suite : menu du compte, menus « … », en-têtes de carte. */
  :is(.side-bottom a,.bp-graphe-vide a,.pf2-menu a,.card-h > a){display:inline-flex!important;align-items:center;min-height:44px!important}
  select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]){min-height:44px!important}
  .cp-copier{width:max-content!important;min-width:44px!important;flex:none!important}
  /* Fil des étapes de « Créer une vidéo » : des pastilles de 44 px. */
  .vs-fil button{min-width:44px!important}
  /* Parcours : « Modifier » des publicités prêtes, adresse de la page web, boutons du panneau. */
  :is(.fin-modifier,.st6lp-url){display:inline-flex!important;align-items:center;min-height:44px!important}
  .st4-pan-btn{min-height:44px!important}
  :is(.top-aide,.st-aide-haut){justify-content:center;min-width:44px!important;min-height:44px!important}
  .rd-utiliser{min-height:44px!important;align-items:center}
  .e6-rendu-btns button{min-width:44px!important}
  /* Les points du carrousel (écran 4) : la pastille reste petite, la zone fait 44 px. */
  .st4-point{width:44px!important;height:44px!important;padding:17px!important;background-clip:content-box!important;
    box-sizing:border-box!important}
  .st4-point.on{padding:16px!important;transform:none!important}
  .st4-points,.st4-nav{gap:2px!important}
}
@media (max-width:820px){
  /* Accueil : le texte des tuiles reste dans sa colonne (il passait sous la flèche). */
  .acc-txt{grid-template-columns:minmax(0,1fr)}
  .acc-txt small{white-space:normal;width:auto!important}
  /* Barre du parcours : des boutons de 44 px tiennent à 360 px. */
  .st-haut .st-haut-in,.st-haut{column-gap:6px}
}
@media (max-width:420px){
  /* Sur téléphone, le raccourci CRM quitte la barre du parcours (il reste dans le menu) :
     les boutons de 44 px n'y tenaient plus. */
  .st-haut .st-crm{display:none!important}
  /* Barre de l'application : quand la page y ajoute un bouton (« Mes vidéos (24) »), le
     raccourci CRM garde son icône seule (son icône était écrasée à 6 px). */
  .app-top .top-crm svg{flex:none}
  .app-top:has(.top-right > .btn) .top-crm > span{display:none}
  .app-top:has(.top-right > .btn) .top-crm{justify-content:center;padding-inline:0;width:44px}
}
@media (max-width:820px){
  /* Parcours : de la place sous le pied de page, pour que la bulle d'aide ne recouvre
     jamais le bouton principal. */
  body:has(.st-chat-bulle) .st{padding-bottom:84px!important}
}
@media (max-width:560px){
  .ins-carte{grid-template-columns:48px minmax(0,1fr)!important;column-gap:12px!important}
  .ins-carte .ins-logo{width:48px!important;height:48px!important;border-radius:13px!important}
  .ins-carte .ins-etapes{grid-column:1/-1!important}
  .ins-carte .ins-go{grid-column:1/-1!important;grid-auto-flow:column;justify-content:end;align-items:center}
  .ins-carte .ins-tag{display:inline-block;white-space:nowrap}
  /* Un tableau dans une carte défile dans sa carte au lieu d'écraser ses colonnes (Relevé). */
  .app-body div[style*="overflow-x:auto"] > table{min-width:460px}
}
@media (max-width:820px){
  /* CRM : les filtres passent à la ligne au lieu de pousser « Chercher » hors de l'écran. */
  .app-body .cr-filtres{flex-wrap:wrap}
  .app-body .cr-filtres > .btn{flex:1 1 auto}
}
@media (max-width:560px){
  /* Écran 6 : les vignettes « Ordinateur / Mobile » de la carte « Vérifiez le rendu », écrasées
     à 11 px, chevauchaient le texte ; le choix de la vue reste juste sous l'aperçu. */
  .e6-rendu-btns{display:none!important}
}
@media (max-width:700px){
  /* Écrans 4 à 6 : l'aperçu tient dans l'écran (son plancher de 360 px le faisait déborder). */
  #stEcran4 .st4-carrousel .st4-carte,#stEcran5 .st5-apercu,#stEcran6 .st6-pages,
  #stEcran5 .st5-colvisuel .st5-agrandir-haut{min-width:0!important}
  .st4-carrousel .st4-galerie{overflow-x:visible!important}
}