/* ============================================================
   Concorda - charte v3 (identite de marque LegalTech premium)
   Surcouche chargee APRES style.css et style_v2.css : elle
   redefinit les jetons de couleur et de typographie, et ajoute
   le langage graphique propre (cercle ouvert, degrade bleu ->
   turquoise, loader rotatif). Purement esthetique : aucune
   modification de structure ni de contenu.

   Lecture des consignes de marque :
   - fond blanc pur, texte navy profond (#13294B), beaucoup d'air ;
   - couleur principale : degrade bleu -> turquoise ;
   - typographie sans-serif moderne (Inter + Plus Jakarta Sans) ;
   - le cercle ouvert du logo devient un motif recurrent ;
   - animations tres legeres uniquement.

   Note : le rouge / vert / ambre subsistent UNIQUEMENT comme codes
   d'etat fonctionnels (admis / conteste, delais, danger). Tout le
   chrome de marque (hero, boutons, nav, cartes vitrine) n'utilise
   que le navy et le degrade bleu -> turquoise. Conventions projet
   respectees : pas de cadratin.
   ============================================================ */

/* ---------- Jetons de marque ---------- */
body[data-ui="v2"]{
  /* Bleu -> turquoise : la couleur principale de Concorda. */
  --blue:#2563EB; --blue-2:#1D4ED8; --teal:#14B8A6; --teal-d:#0E9C8C;
  --grad: linear-gradient(120deg, #2563EB 0%, #1D4ED8 46%, #14B8A6 100%);
  --grad-soft: linear-gradient(120deg, #eef4ff 0%, #eafcf8 100%);

  /* Texte : navy profond. Le taupe/beige disparait, remplace par le turquoise. */
  --navy:#13294B; --navy-d:#0D1D38;
  --taupe:#14B8A6; --taupe-d:#0E9C8C;
  --ink:#13294B; --muted:#5B6B82;

  /* Surfaces : blanc pur, lignes tres douces. */
  --bg:#ffffff; --card:#ffffff;
  --line:#e7ebf2; --line-2:#f1f4f9;

  /* Accent de validation (fonctionnel) harmonise vers le vert-turquoise. */
  --accent:#0E9C8C; --accent-tint:#e7faf6;

  /* Rayons plus genereux, ombres plus discretes : le design respire. */
  --radius:16px;
  --shadow:0 1px 2px rgba(19,41,75,.04), 0 12px 32px rgba(19,41,75,.07);
  --sh-soft:0 1px 2px rgba(19,41,75,.04), 0 10px 30px rgba(19,41,75,.06);
  --sh-lift:0 18px 44px rgba(19,41,75,.13);

  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  /* Les titres passent en sans-serif moderne et gras (le var --serif est
     reutilise partout ou un titre etait dessine ; l'editeur de sentence
     garde son Georgia, defini en dur). */
  --serif:'Plus Jakarta Sans','Inter',sans-serif;

  background:
    radial-gradient(1100px 460px at 50% -160px, rgba(37,99,235,.06), transparent 70%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Titres : gras marque, interlettrage resserre. Corps : lisible, aere.
   Pas de couleur imposee ici : les titres heritent de --navy (redefini plus
   haut) via les regles de base, ce qui laisse les fonds fonces (.cta-band)
   repasser leurs titres en blanc. */
body[data-ui="v2"] h1,
body[data-ui="v2"] h2,
body[data-ui="v2"] h3{font-family:var(--serif);letter-spacing:-.3px}
body[data-ui="v2"] h1{font-weight:800}
body[data-ui="v2"] h2,body[data-ui="v2"] h3{font-weight:700}
body[data-ui="v2"]{line-height:1.6}

/* ---------- En-tete : verre clair, marque nette ---------- */
body[data-ui="v2"] .topbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
body[data-ui="v2"] .brand{gap:12px}
body[data-ui="v2"] .brand .mark{width:34px;height:34px}
body[data-ui="v2"] .brand .word{
  letter-spacing:3.5px;font-size:18px;font-weight:800;
  font-family:var(--serif);color:var(--navy);
}

/* ---------- Boutons : le primaire porte le degrade + halo discret ---------- */
body[data-ui="v2"] .btn{border-radius:12px;font-weight:600;font-family:var(--sans)}
body[data-ui="v2"] .btn-primary{
  background:var(--grad);border:none;color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.24);
  transition:transform .12s var(--ease,ease), box-shadow .2s ease, filter .2s ease;
}
body[data-ui="v2"] .btn-primary:hover{
  filter:brightness(1.04);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.20), 0 14px 34px rgba(20,184,166,.28);
}
/* Halo respirant autour du bouton principal (tres discret). */
body[data-ui="v2"] .hero-cta .btn-primary,
body[data-ui="v2"] .cta-band .btn-primary,
body[data-ui="v2"] .softband .btn-primary{position:relative}
body[data-ui="v2"] .hero-cta .btn-primary::after,
body[data-ui="v2"] .cta-band .btn-primary::after,
body[data-ui="v2"] .softband .btn-primary::after{
  content:"";position:absolute;inset:-4px;border-radius:16px;z-index:-1;
  background:var(--grad);opacity:.28;filter:blur(12px);
  animation:conc-halo 3.4s ease-in-out infinite;
}
@keyframes conc-halo{0%,100%{opacity:.20}50%{opacity:.42}}
body[data-ui="v2"] .btn-ghost{
  border:1px solid #d6def0;color:var(--navy);background:#fff;
}
body[data-ui="v2"] .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
/* Contours de boutons secondaires : ligne douce (le primaire garde son degrade). */
body[data-ui="v2"] .btn:not(.btn-primary){border-color:#d6def0}

/* ---------- Cartes : coins arrondis, ombres discretes, survol leger ---------- */
body[data-ui="v2"] .card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--sh-soft)}
body[data-ui="v2"] .card:hover{border-color:#dbe3f0;box-shadow:var(--sh-lift)}

/* Micro-zoom des cartes vitrine au survol (tres leger, jamais gadget). */
body[data-ui="v2"] .atout,
body[data-ui="v2"] .icard,
body[data-ui="v2"] .trust-item,
body[data-ui="v2"] .domcard,
body[data-ui="v2"] .dossier-card{
  border-radius:var(--radius);
  transition:transform .22s var(--ease,ease), box-shadow .22s ease, border-color .22s ease;
}
body[data-ui="v2"] .atout:hover,
body[data-ui="v2"] .icard:hover,
body[data-ui="v2"] .trust-item:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--sh-lift)}

/* Les pastilles d'icones vitrine adoptent le degrade / turquoise. */
body[data-ui="v2"] .atouts .atout:nth-child(1){border-top-color:var(--blue)}
body[data-ui="v2"] .atouts .atout:nth-child(1) .ic{color:var(--blue)}
body[data-ui="v2"] .atouts .atout:nth-child(2){border-top-color:var(--teal)}
body[data-ui="v2"] .atouts .atout:nth-child(2) .ic{color:var(--teal)}
body[data-ui="v2"] .atouts .atout:nth-child(3){border-top-color:var(--teal-d)}
body[data-ui="v2"] .atouts .atout:nth-child(3) .ic{color:var(--teal-d)}
body[data-ui="v2"] .icard .ic{background:var(--grad-soft);color:var(--blue)}
body[data-ui="v2"] .icard .ic.t-taupe{background:var(--accent-tint);color:var(--teal-d)}
body[data-ui="v2"] .icard .ic.t-green{background:var(--accent-tint);color:var(--accent)}
body[data-ui="v2"] .icard .ic.t-amber{background:#eef4ff;color:var(--blue)}
body[data-ui="v2"] .icard .ic.t-navy{background:#e9eefb;color:var(--navy)}
body[data-ui="v2"] .trust-item .ic{background:var(--grad-soft);color:var(--blue)}
body[data-ui="v2"] .trust-item .ic.t-navy{background:#e9eefb;color:var(--navy)}
body[data-ui="v2"] .trust-item .ic.t-green{background:var(--accent-tint);color:var(--accent)}

/* ---------- Hero : blanc lumineux, motif cercle ouvert, colonne photo ---------- */
body[data-ui="v2"] .hero{
  border:1px solid var(--line);border-radius:26px;
  background:
    radial-gradient(120% 130% at 88% -20%, #eef5ff 0%, rgba(238,245,255,0) 55%),
    radial-gradient(120% 130% at -10% 120%, #eafbf7 0%, rgba(234,251,247,0) 55%),
    #ffffff;
}
/* Les deux halos ronds du hero passent au bleu et au turquoise (motif marque). */
body[data-ui="v2"] .hero::before{
  background:radial-gradient(circle, rgba(20,184,166,.22), rgba(20,184,166,0) 70%);
}
body[data-ui="v2"] .hero::after{
  background:radial-gradient(circle, rgba(37,99,235,.16), rgba(37,99,235,0) 70%);
}
body[data-ui="v2"] .eyebrow{color:var(--blue);letter-spacing:1.8px}
body[data-ui="v2"] .hero-title{color:var(--navy);letter-spacing:-1px;font-weight:800}
body[data-ui="v2"] .hero-trust .lic{color:var(--teal-d)}

/* Colonne droite du hero : cadre photo de marque. Depose une vraie photo
   dans /static/img/hero.jpg (shooting reel : deux personnes discutant
   calmement autour d'un ordinateur, lumiere naturelle) : elle s'affiche
   ici. Sans photo, un cadre degrade + cercle ouvert tient l'espace. */
body[data-ui="v2"] .hero-art{width:100%}
body[data-ui="v2"] .hero-photo{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  background:
    url("/static/img/hero.jpg") center/cover no-repeat,
    var(--grad);
  box-shadow:0 30px 60px rgba(19,41,75,.16);
  border:1px solid rgba(255,255,255,.6);
}
/* Cercle ouvert filigrane, visible seulement tant qu'aucune photo ne recouvre. */
body[data-ui="v2"] .hero-photo::before{
  content:"";position:absolute;width:62%;aspect-ratio:1;right:-10%;top:12%;
  border:14px solid rgba(255,255,255,.42);border-right-color:transparent;
  border-radius:50%;transform:rotate(-18deg);pointer-events:none;
}
body[data-ui="v2"] .hero-photo::after{
  content:"Emplacement photo";position:absolute;left:0;right:0;bottom:16px;
  text-align:center;color:rgba(255,255,255,.78);font-size:12px;font-weight:600;
  letter-spacing:.4px;font-family:var(--sans);pointer-events:none;
}
/* Des qu'une vraie image de fond est fournie, le repere disparait proprement :
   on masque le libelle si l'auteur ajoute la classe .has-photo. */
body[data-ui="v2"] .hero-photo.has-photo::before,
body[data-ui="v2"] .hero-photo.has-photo::after{display:none}

/* ---------- Motif de marque : le cercle ouvert, recurrent ---------- */
/* Element decoratif reutilisable : <span class="conc-ring"></span>. */
body[data-ui="v2"] .conc-ring{
  display:block;border-radius:50%;pointer-events:none;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
  border-width:6px;-webkit-mask:none;
}
/* Filigranes de cercle ouvert en fond des grandes bandes (langage de marque). */
body[data-ui="v2"] .softband,
body[data-ui="v2"] .cta-band,
body[data-ui="v2"] .psection--spot{position:relative;overflow:hidden}
body[data-ui="v2"] .softband::after,
body[data-ui="v2"] .psection--spot::after{
  content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;
  border-radius:50%;border:26px solid rgba(37,99,235,.06);border-right-color:transparent;
  transform:rotate(-20deg);pointer-events:none;
}
body[data-ui="v2"] .cta-band::after{
  content:"";position:absolute;width:300px;height:300px;left:-110px;bottom:-120px;
  border-radius:50%;border:30px solid rgba(255,255,255,.10);border-right-color:transparent;
  transform:rotate(24deg);pointer-events:none;
}

/* Bandes marketing : fonds froids (bleu/turquoise) au lieu du beige. */
body[data-ui="v2"] .softband{
  background:var(--grad-soft);border:1px solid #e3ecfb;border-radius:24px;
}
body[data-ui="v2"] .softband p{color:var(--muted)}
body[data-ui="v2"] .cta-band{background:linear-gradient(125deg,#13294B 0%,#1D4ED8 62%,#14B8A6 130%)}
body[data-ui="v2"] .psection--spot{background:var(--grad-soft);border:1px solid #e3ecfb}

/* Puces de domaines : degrade froid. */
body[data-ui="v2"] .dom-ic{background:var(--grad-soft);color:var(--blue)}
body[data-ui="v2"] .dtag:hover{border-color:var(--blue);color:var(--blue)}

/* Barre de progression et divers accents bleus. */
body[data-ui="v2"] .bar .fill{background:var(--grad)}

/* ---------- Loader : le logo tourne lentement ---------- */
/* Composant reutilisable : <img class="conc-loader" src="/static/logo.svg">.
   Egalement applique au petit spinner .spin existant, repeint aux couleurs
   de marque. */
@keyframes conc-rotate{to{transform:rotate(360deg)}}
body[data-ui="v2"] .conc-loader{
  width:44px;height:44px;display:inline-block;
  animation:conc-rotate 1.6s linear infinite;transform-origin:50% 50%;
}
body[data-ui="v2"] .conc-loader-lg{width:76px;height:76px}
body[data-ui="v2"] .spin{
  border-color:#d6def0;border-top-color:var(--blue);
}

/* ---------- Aeration generale : les sections respirent davantage ---------- */
body[data-ui="v2"] .psection{margin:64px 0}
body[data-ui="v2"] .atouts,
body[data-ui="v2"] .icongrid,
body[data-ui="v2"] .trust-grid{gap:20px}
body[data-ui="v2"] .softband{padding:44px 30px}

/* ---------- Liens : bleu de marque ---------- */
body[data-ui="v2"] a{color:var(--blue)}
body[data-ui="v2"] .navlink{color:var(--navy)}
body[data-ui="v2"] .navlink:hover{color:var(--blue)}
body[data-ui="v2"] .brand{color:var(--navy)}
body[data-ui="v2"] .foot a{color:var(--navy)}
body[data-ui="v2"] .foot a:hover{color:var(--blue)}

/* ---------- Cartes photo « types de litiges » (landing) ---------- */
/* Bandeau de cartes illustrees : photo en haut, libelle navy souligne d'un
   trait degrade. Reprend le langage du visuel de marque. */
body[data-ui="v2"] .litige-cards{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:8px 0 0;
}
body[data-ui="v2"] .litige-card{
  display:flex;flex-direction:column;background:#fff;text-decoration:none;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-soft);
  transition:transform .22s var(--ease,ease), box-shadow .22s ease, border-color .22s ease;
}
body[data-ui="v2"] .litige-card:hover{
  transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:#dbe3f0;
}
body[data-ui="v2"] .lc-photo{
  display:block;width:100%;aspect-ratio:3/4;
  background-size:cover;background-position:center;
  transition:transform .4s var(--ease,ease);
}
body[data-ui="v2"] .litige-card:hover .lc-photo{transform:scale(1.04)}
body[data-ui="v2"] .lc-label{
  padding:15px 16px 18px;font-family:var(--serif);font-weight:700;
  color:var(--navy);font-size:15px;line-height:1.25;
}
body[data-ui="v2"] .lc-label::after{
  content:"";display:block;width:34px;height:3px;border-radius:3px;
  background:var(--grad);margin-top:9px;
}
@media (max-width:980px){
  body[data-ui="v2"] .litige-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  body[data-ui="v2"] .litige-cards{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ============================================================
   HARMONISATION 3 COULEURS (marine / turquoise / gris)
   Direction artistique : SaaS B2B premium (Stripe/Linear). Toute
   l'app ne parle plus que 3 couleurs : navy #13294B, turquoise
   #14B8A6, gris. Le bleu #1E3A8A porte les accents solides ; le
   degrade #2563EB -> #14B8A6 le CTA. Vert, orange, ambre et bleus
   divers sont elimines. Le ROUGE subsiste en UNE seule valeur
   (#E5484D / texte #B42318) pour le danger reel uniquement
   (suppression, delai depasse, urgence) : il n'est pas dans la
   liste des couleurs a retirer. Etats non-critiques (conteste,
   hors champ, comparaison) : navy ou gris, jamais rouge.
   Cette section, chargee en dernier, l'emporte sur le reste.
   ============================================================ */
body[data-ui="v2"]{
  --navy:#13294B; --navy-d:#0D1D38;
  --blue:#1E3A8A; --blue-2:#2563EB; --teal:#14B8A6; --teal-d:#0E9C8C;
  --green:#14B8A6;          /* tout var(--green) -> turquoise */
  --amber:#64748B;          /* tout var(--amber) -> gris ardoise */
  --red:#E5484D;            /* danger, valeur unique */
  --accent:#14B8A6; --accent-tint:#e7faf6;
  --muted:#64748B;
  --line:#E8EDF3; --line-2:#F4F7FA;
  --bg:#ffffff; --card:#ffffff;
  --radius:18px;
  --grad:linear-gradient(120deg,#2563EB 0%,#14B8A6 100%);
  --grad-soft:linear-gradient(120deg,#eef3ff 0%,#e7faf6 100%);
  --shadow:0 1px 2px rgba(19,41,75,.04), 0 10px 30px rgba(19,41,75,.06);
  --sh-soft:0 1px 2px rgba(19,41,75,.04), 0 10px 30px rgba(19,41,75,.06);
  --sh-lift:0 2px 10px rgba(19,41,75,.05), 0 28px 56px rgba(19,41,75,.10);
}
/* tons utilitaires reutilises : bleu clair (info), rouge clair (danger) */

/* ---------- Navigation : plus d'air, separateurs presque invisibles ---------- */
body[data-ui="v2"] .topbar{padding:16px 34px;border-bottom-color:#F0F3F8}
body[data-ui="v2"] .nav{gap:26px}
body[data-ui="v2"] .navlink{padding:8px 2px}
body[data-ui="v2"] .foot{border-top-color:#F0F3F8}

/* ---------- Boutons : exactement deux styles (+ danger reserve) ---------- */
/* Primaire : degrade, tres arrondi, ombre legere (defini plus haut ; on cale
   seulement le rayon). Secondaire : blanc, contour navy, texte navy. */
body[data-ui="v2"] .btn{border-radius:14px}
body[data-ui="v2"] .btn-primary{border-radius:14px}
body[data-ui="v2"] .btn:not(.btn-primary):not(.btn-danger),
body[data-ui="v2"] .btn-ghost{
  background:#fff;border:1.5px solid var(--navy);color:var(--navy);
}
body[data-ui="v2"] .btn:not(.btn-primary):not(.btn-danger):hover,
body[data-ui="v2"] .btn-ghost:hover{background:#F4F7FA;border-color:var(--navy);color:var(--navy)}
/* Exception : sur fond fonce (bande CTA), le secondaire reste en contour blanc. */
body[data-ui="v2"] .cta-band .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
body[data-ui="v2"] .cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
/* Danger : contour rouge unique, reserve aux actions destructrices. */
body[data-ui="v2"] .btn-danger{background:#fff;border:1.5px solid var(--red);color:#B42318}
body[data-ui="v2"] .btn-danger:hover{background:#FDECEC;border-color:var(--red)}

/* Champs : focus bleu de marque (fini le bleu #2e6fb7). */
body[data-ui="v2"] .inp:focus,
body[data-ui="v2"] .ta:focus,
body[data-ui="v2"] .editor:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,138,.12)}
body[data-ui="v2"] .bar .fill{background:var(--grad)}

/* ---------- Etats de workflow : Termine (turquoise) / En cours (navy) / A venir (gris) ---------- */
body[data-ui="v2"] .phase-chip{background:#F4F7FA;border-color:var(--line);color:var(--muted)}
body[data-ui="v2"] .phase-chip .dot{background:#CBD5E1}
body[data-ui="v2"] .phase-chip.is-done{background:var(--accent-tint);color:var(--navy);border-color:#bfeee7}
body[data-ui="v2"] .phase-chip.is-done .dot{background:var(--teal)}
body[data-ui="v2"] .phase-chip.is-current{background:var(--navy);color:#fff;border-color:var(--navy)}
body[data-ui="v2"] .phase-chip.is-current .dot{background:#fff}
body[data-ui="v2"] .step.on{background:var(--accent-tint);border-color:#bfeee7}
body[data-ui="v2"] .step.on .dot{background:var(--teal)}
body[data-ui="v2"] .timeline li::before{color:var(--teal)}
body[data-ui="v2"] .timeline li.current,
body[data-ui="v2"] .timeline li.current::before{color:var(--navy)}

/* Points « action attendue » : turquoise (fini l'orange), meme pulsation. */
body[data-ui="v2"] .dc-dot,
body[data-ui="v2"] .tab-dot,
body[data-ui="v2"] .tab-btn .tab-dot{background:var(--teal)}
body[data-ui="v2"] .dc-attente{border-color:#bfeee7}
@keyframes tabdot-pulse{
  0%{box-shadow:0 0 0 0 rgba(20,184,166,.5)}
  70%{box-shadow:0 0 0 6px rgba(20,184,166,0)}
  100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}
}

/* ---------- Matrice admis / conteste : turquoise vs navy (pas de rouge) ---------- */
body[data-ui="v2"] .pos-admis{background:var(--accent-tint);color:var(--teal-d)}
body[data-ui="v2"] .pos-contesté,
body[data-ui="v2"] .pos-conteste{background:#EEF1F6;color:var(--navy)}

/* ---------- Badges ---------- */
body[data-ui="v2"] .badge-ok,
body[data-ui="v2"] .badge-ia{background:var(--accent-tint);color:var(--teal-d);border-color:#bfeee7}
body[data-ui="v2"] .badge-demo{background:#F4F7FA;color:var(--muted)}
body[data-ui="v2"] .who-role{background:#EEF3FF;color:var(--navy)}
body[data-ui="v2"] .fab-chat .badge-n{background:var(--teal)}

/* ---------- Delais : ok (turquoise) / warn (bleu info) / late (rouge danger) ---------- */
body[data-ui="v2"] .delai-card.delai-ok{border-left-color:var(--teal)}
body[data-ui="v2"] .delai-card.delai-warn{border-left-color:var(--blue-2);background:#EEF3FF}
body[data-ui="v2"] .delai-card.delai-late{border-left-color:var(--red);background:#FDECEC}
body[data-ui="v2"] .dl-line.ok{color:var(--teal-d)}
body[data-ui="v2"] .dl-line.err{color:#B42318}
body[data-ui="v2"] .prolong-demande{background:#EEF3FF;border-color:#dbe4f5}

/* ---------- Alertes ---------- */
body[data-ui="v2"] .alert{background:#FDECEC;border-color:#F5C6C6;color:#B42318}
body[data-ui="v2"] .alert b{color:#B42318}
body[data-ui="v2"] .alert-hint{color:#8a5a58}
body[data-ui="v2"] .alert-ok{background:var(--accent-tint);border-color:#bfeee7;color:var(--teal-d)}
body[data-ui="v2"] .alert-card{background:#EEF3FF;border-color:#dbe4f5;border-left-color:var(--blue-2)}
body[data-ui="v2"] .alert-card.urgent{background:#FDECEC;border-color:#F5C6C6;border-left-color:var(--red)}

/* ---------- Blason d'identite : gris -> bleu -> turquoise ---------- */
body[data-ui="v2"] .blason-none{color:#94A3B8}
body[data-ui="v2"] .blason-email{color:var(--blue)}
body[data-ui="v2"] .blason-fort{color:var(--teal)}

/* ---------- Messagerie coloree : navy / bleu / turquoise / gris ---------- */
body[data-ui="v2"] .msg-demandeur{border-left-color:var(--blue)}
body[data-ui="v2"] .msg-demandeur .msg-role{color:var(--blue)}
body[data-ui="v2"] .msg-defendeur{border-left-color:var(--navy)}
body[data-ui="v2"] .msg-defendeur .msg-role{color:var(--navy)}
body[data-ui="v2"] .msg-arbitre{border-left-color:var(--teal);background:var(--accent-tint)}
body[data-ui="v2"] .msg-arbitre .msg-role{color:var(--teal-d)}
body[data-ui="v2"] .msg-admin{border-left-color:#94A3B8}

/* ---------- Consorite / champs verrouilles : turquoise ---------- */
body[data-ui="v2"] .loquet-multi{background:var(--accent-tint);color:var(--teal-d);box-shadow:inset 0 0 0 1px #bfeee7}
body[data-ui="v2"] .field-locked .lock{background:var(--accent-tint);color:var(--teal-d)}
body[data-ui="v2"] .consort-builder .cb-del{color:var(--red)}
body[data-ui="v2"] .decline-box summary{color:#B42318}

/* ---------- Domaines : adapte (turquoise) / conditionnel (bleu) / hors champ (rouge) ---------- */
body[data-ui="v2"] .dom-h .tag.ok{background:var(--accent-tint);color:var(--teal-d)}
body[data-ui="v2"] .dom-h .tag.cond{background:#EEF3FF;color:var(--blue)}
body[data-ui="v2"] .dom-h .tag.no{background:#FDECEC;color:#B42318}
body[data-ui="v2"] .domcard.ok{border-left-color:var(--teal)}
body[data-ui="v2"] .domcard.cond{border-left-color:var(--blue-2);background:#fff}
body[data-ui="v2"] .domcard.cond .dom-ic{background:#EEF3FF;color:var(--blue)}
body[data-ui="v2"] .domcard.no{border-left-color:var(--red);background:#fff}
body[data-ui="v2"] .domcard.no .dom-ic{background:#FDECEC;color:#B42318}
body[data-ui="v2"] .dom-ic{background:var(--grad-soft);color:var(--blue)}
body[data-ui="v2"] .eligi-result.adapte{background:var(--accent-tint);border-color:#bfeee7}
body[data-ui="v2"] .eligi-result.adapte strong{color:var(--teal-d)}
body[data-ui="v2"] .eligi-result.condition{background:#EEF3FF;border-color:#dbe4f5}
body[data-ui="v2"] .eligi-result.condition strong{color:var(--blue)}
body[data-ui="v2"] .eligi-result.exclu{background:#FDECEC;border-color:#F5C6C6}
body[data-ui="v2"] .eligi-result.exclu strong{color:#B42318}

/* ---------- Comparaison landing (probsol) : Concorda turquoise, ancien monde gris ---------- */
body[data-ui="v2"] .ps-col.good{background:var(--accent-tint);border-color:#bfeee7}
body[data-ui="v2"] .ps-col.good h3{color:var(--teal-d)}
body[data-ui="v2"] .ps-col.good .ps-list li::before{color:var(--teal)}
body[data-ui="v2"] .ps-col.bad{background:#F4F7FA;border-color:var(--line)}
body[data-ui="v2"] .ps-col.bad h3{color:var(--navy)}
body[data-ui="v2"] .ps-col.bad .ps-list li::before{color:#94A3B8}

/* ---------- Pages avantages / comment : icones et pastilles hors palette ---------- */
body[data-ui="v2"] .feature:nth-child(1){background:#EEF3FF;border-color:#dbe4f5}
body[data-ui="v2"] .feature:nth-child(1) .feat-ic{color:var(--blue)}
body[data-ui="v2"] .feature:nth-child(2){background:#F4F7FA;border-color:var(--line)}
body[data-ui="v2"] .feature:nth-child(2) .feat-ic{color:var(--teal-d)}
body[data-ui="v2"] .steps3 .step3:nth-child(1) .step3-n{background:var(--blue)}
body[data-ui="v2"] .steps3 .step3:nth-child(1){border-top-color:var(--blue)}
body[data-ui="v2"] .steps3 .step3:nth-child(2) .step3-n{background:var(--teal)}
body[data-ui="v2"] .steps3 .step3:nth-child(2){border-top-color:var(--teal)}

/* ---------- Bandeau de test : navy (fini l'orange) ---------- */
body[data-ui="v2"] .testbar{background:var(--navy);color:#fff}

/* ---------- Cartes facon Stripe : plus arrondies, ombre douce et large ---------- */
body[data-ui="v2"] .card{border-radius:20px;padding:24px 26px}
body[data-ui="v2"] .atout,
body[data-ui="v2"] .icard,
body[data-ui="v2"] .trust-item,
body[data-ui="v2"] .domcard,
body[data-ui="v2"] .dossier-card,
body[data-ui="v2"] .litige-card{border-radius:20px}

/* ---------- Respiration : titres et sections un peu plus aeres ---------- */
body[data-ui="v2"] h1{margin:.1em 0 .55em}
body[data-ui="v2"] h2{margin:.1em 0 .6em}
body[data-ui="v2"] .psection{margin:72px 0}

/* ---------- Chargement IA : le cercle ouvert Concorda tourne lentement ---------- */
/* Composant : <span class="conc-spin"></span> (cercle ouvert en degrade). */
body[data-ui="v2"] .conc-spin{
  display:inline-block;width:20px;height:20px;vertical-align:-4px;border-radius:50%;
  background:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0) content-box,
    conic-gradient(from 0deg, rgba(37,99,235,0), #2563EB 200deg, #14B8A6 320deg, rgba(20,184,166,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation:conc-rotate 1.5s linear infinite;
}
body[data-ui="v2"] .conc-spin-lg{width:40px;height:40px}
/* Le petit spinner existant adopte le bleu de marque. */
body[data-ui="v2"] .spin{border-color:#E8EDF3;border-top-color:var(--blue)}

/* ---------- Mobile prioritaire : zones tactiles genereuses ---------- */
@media (max-width:560px){
  body[data-ui="v2"] .topbar{padding:12px 18px}
  body[data-ui="v2"] .btn{padding:12px 18px}
  body[data-ui="v2"] .btn-small{padding:9px 14px;font-size:13.5px}
  body[data-ui="v2"] .btn-lg{padding:14px 22px}
  body[data-ui="v2"] .card{padding:20px}
  body[data-ui="v2"] .psection{margin:52px 0}
  body[data-ui="v2"] .navlink{padding:11px 4px}
}

/* Le mouvement reduit desactive halo et rotation. */
@media (prefers-reduced-motion: reduce){
  body[data-ui="v2"] .conc-loader,
  body[data-ui="v2"] .conc-spin,
  body[data-ui="v2"] .dc-dot,
  body[data-ui="v2"] .tab-dot,
  body[data-ui="v2"] .hero-cta .btn-primary::after,
  body[data-ui="v2"] .cta-band .btn-primary::after,
  body[data-ui="v2"] .softband .btn-primary::after{animation:none}
}