/* =========================================================
     IA d’aide à la décision
     ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap");

  :root{
    /* Palette (héritée du site culturel) */
    --paper: rgb(250, 235, 215);     /* var(--color2) */
    --ink: #31698a;
    --ink2: rgba(31, 36, 48, 0.70);
    --blue: #31698a;                /* var(--color3) */
    --gold: #fddb3a;                /* accent nav du site culturel */

    /* UI IA */
    --bg: var(--paper);
    --text: var(--ink);
    --muted: rgba(31,36,48,.72);

    --card: rgba(255,255,255,.70);
    --card2: rgba(255,255,255,.52);
    --border: rgba(49,105,138,.22);
    --border2: rgba(0,0,0,.12);

    --accent: var(--blue);
    --accentHover: #25536e;
    --focus: rgba(49,105,138,.22);

    --shadow: 0 10px 25px rgba(0,0,0,.10);
    --shadow2: 0 16px 40px rgba(0,0,0,.14);

    --radius: 14px;
    --radius2: 18px;
    --max: 1100px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    font-family: Montserrat, Arial, sans-serif;
    color: var(--text);
    background:
      radial-gradient(900px 520px at 15% 5%, rgba(49,105,138,.14), transparent 55%),
      radial-gradient(800px 520px at 85% 0%, rgba(253,219,58,.10), transparent 60%),
      radial-gradient(900px 620px at 60% 95%, rgba(49,105,138,.08), transparent 55%),
      var(--bg);
    line-height:1.55;
  }

  a{ color: inherit; text-decoration: none; }
  a:hover{ text-decoration: underline; text-decoration-color: rgba(49,105,138,.45); text-underline-offset: 3px; }

  .container{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

  /* =========================================================
     Micro-composants
     ========================================================= */

  .muted{
    color: var(--muted);
    font-family: Montserrat, Arial, sans-serif;

  }
  .pill{
    display:inline-flex; gap:8px; align-items:center;
    padding:8px 12px;
    border:1px solid rgba(49,105,138,.18);
    border-radius:999px;
    background: rgba(255,255,255,.55);
    font-size: 14px;
    color: rgba(31,36,48,.78);
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
  }

  .badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:6px;
    background: rgba(49,105,138,.12);
    color: var(--accent);
    border:1px solid rgba(49,105,138,.22);
    font-weight:700;
    font-size:12px;
  }

  /* =========================================================
     Header / navigation (conserve structure existante)
     ========================================================= */

  header{
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(250,235,215,.78);
    border-bottom: 1px solid rgba(49,105,138,.18);
  }

  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 0;
  }

  .logo{
    display:flex; align-items:center; gap:10px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
  }

  .logo .mark{
    width:34px; height:34px; border-radius:12px;
    background: linear-gradient(135deg, rgba(49,105,138,.95), rgba(253,219,58,.65));
    box-shadow: 0 10px 25px rgba(49,105,138,.18);
    border: 1px solid rgba(49,105,138,.22);
  }
  .logo {
    align-items: center;
    gap: 10px;
    display: inline-flex;
  }

  .logo__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;        /* coins doux comme hybrid design */
    overflow: hidden;
    /*box-shadow: 0 4px 14px rgba(49,105,138,.28);*/
  }
  .logo__text {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.3px;
    font-family: Montserrat, Arial, sans-serif;
    color: var(--text);
  }
  .logo__arabic {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--blue);
    opacity: .75;
    margin-left: 5px;
  }

  nav ul{
    list-style:none; margin:0; padding:0;
    display:flex; gap:18px; align-items:center;
  }

  nav a{
    color: rgba(31,36,48,.78);
    padding: 10px 10px;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
    font-size: 14px;
    font-family: Montserrat, Arial, sans-serif;

  }

  nav a:hover{
    color: var(--text);
    background: rgba(49,105,138,.10);
    text-decoration: none;
  }

  .menuBtn{
    display:none;
    border:1px solid rgba(49,105,138,.20);
    background: rgba(255,255,255,.55);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
  }

  .cta{
    display:inline-flex; gap:10px; align-items:center; justify-content:center;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(49,105,138,.95), rgba(49,105,138,.70));
    color: #fff;
    font-weight: 800;
    border: 1px solid rgba(49,105,138,.25);
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  .cta:hover{ background: linear-gradient(135deg, rgba(37,83,110,.95), rgba(37,83,110,.72)); }
  .cta:active{ transform: translateY(1px); }

  /* =========================================================
     Sections / titres
     ========================================================= */

  section{ padding: 40px 0; }

  /* Sections accordion : espace minimal */
  section[id]:not(#hero) { padding: 4px 0; }

  h2{
    color: #1f2430;
    font-weight: 700;
    margin: 0;
    font-size: 24px;
    letter-spacing: -.3px;
    font-family: Montserrat, Arial, sans-serif;
    background: linear-gradient(90deg, #D4AF37, #F4D03F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 6px rgba(212,175,55,0.25);
  }

  .sub{
    color: rgba(31,36,48,.70);
    margin: 0;
    font-size: 14px;
    max-width: 70ch;
  }

  /* =========================================================
     Hero
     ========================================================= */

  .hero{ padding: 56px 0 24px; }

  .heroGrid{
    display:grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 22px;
    align-items: stretch;
  }

  .h1{
    font-family: Montserrat, Arial, sans-serif;
    font-size: clamp(25px, 2.8vw, 40px);
    line-height: 1.05;
    margin: 14px 0 12px;
    letter-spacing: -0.5px;
    color: var(--text);
  }

  .lead{
    color: rgba(31,36,48,.74);
    max-width: 60ch;
    margin: 0 0 18px;
    font-size: 16px;
  }

  .heroActions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }

  /* Boutons “liens” dans le hero */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1.3px solid rgba(212, 175, 55,.70);
    font-family: Montserrat, Arial, sans-serif;
    background: rgba(255,255,255,.55);
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
    transition: background .2s ease, transform .1s ease, border-color .2s ease;
  }
  .btn:hover{
    background: rgba(49,105,138,.10);
    border-color: rgba(49,105,138,.28);
    text-decoration: none;
  }
  .btn:active{ transform: translateY(1px); }
  .btn.secondary{ color: rgba(31,36,48,.70); }

  .headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 14px;
  }

  .headline__logo {
    width: 75px;
    height: 76px;
    flex: 0 0 auto;
  }


  /* =========================================================
     Cartes / boxes
     ========================================================= */

  .card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    box-shadow: var(--shadow);
  }

  #demo .card, .card{
    padding: 4px 0px;
    margin: 10px 0px 30px;
  }

  .box{ padding: 16px; }
  .box h3{
    margin: 0 0 6px;
    font-size: 16px;
    font-family: Montserrat, Arial, sans-serif;
  }
  .box p{ margin: 0; color: rgba(31,36,48,.74); font-size: 14px; }

  .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .tag{
    font-size:12px;
    color: rgba(31,36,48,.72);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(49,105,138,.18);
    background: rgba(255,255,255,.52);
  }

  /* ── Titres de sous-sections (Surveiller / Détecter / Décider / Synthétiser) ── */
  .modeBlock {
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .modeTitleRow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }

  .modeTitleRow h3 {
    margin: 0;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--blue);
    opacity: .85;
  }

  /* Icône info */
  .infoIcon{
    font-size: 12px;
    color: #D4AF37;
    line-height: 1;
  }

  /* Icônes d'action (SVG inline dans les titres de mode) */
  .mode-icon {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
  }

  /* Icônes dans les boutons hero */
  .btn-icon {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
  }

  /* Texte d’aide (caché par défaut) */
  .modeHelp{
    display: none;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
    padding-right: 8px;
    max-width: min(72ch, 90vw);
    font-family: Montserrat, Arial, sans-serif;
    color: var(--text);
  }

  /* Apparition au survol ou focus clavier */
  .modeTitleRow:hover + .modeHelp,
  .modeTitleRow:focus-within + .modeHelp{
    display: block;
  }


  /* =========================================================
     Démo IA — Grille de recherche + champs
     ========================================================= */

  .search-grid{
    display: grid;
    grid-template-columns: 1fr 220px 140px 140px;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
  }

  /* Inputs / selects / textarea (global) */
  input, select, textarea{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(49,105,138,.22);
    background: rgba(255,255,255,.62);
    color: var(--text);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
  }

  .select-topic {
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 500;
    background:
      linear-gradient(90deg, rgba(253,219,58,.10), rgba(49,105,138,.06)),
      rgba(255,255,255,.65);
  }

  textarea{ min-height: 110px; resize: vertical; }

  input:focus, select:focus, textarea:focus{
    border-color: rgba(49,105,138,.45);
    box-shadow: 0 0 0 3px var(--focus);
    background: rgba(255,255,255,.75);
  }

  /* Harmonisation hauteur dans la search-grid */
  .search-grid input,
  .search-grid select,
  .search-grid button{
    height: 44px;
    border-radius: 12px;
  }

    .resultLink {
      display: -webkit-box;
      -webkit-line-clamp: 2;       /* max 2 lignes */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
      font-size: 13px;
      opacity: 0.8;
      max-height: calc(1.4em * 2);
      word-break: break-word;
    }

    .results li {
      overflow-wrap: anywhere;
    }


  /* =========================================================
     Boutons principaux (Rechercher / Détecter / Générer / Copier)
     ========================================================= */

  .btn-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(49,105,138,.25);
    background: linear-gradient(135deg, rgba(49,105,138,.95), rgba(49,105,138,.72));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(49,105,138,.18);
    transition: transform .1s ease, filter .2s ease, background .2s ease;
  }

  .btn-primary:hover{
    filter: brightness(1.03);
    background: linear-gradient(135deg, rgba(37,83,110,.95), rgba(37,83,110,.72));
  }

  .btn-primary:active{ transform: translateY(1px); }

  .btn-primary:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Ligne de boutons (briefing) */
  .button-row{
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* =========================================================
     Résultats (Search / Signals)
     ========================================================= */

  .results{
    margin-top: 12px;
    padding-left: 18px;
  }

  .results li{
    margin: 10px 0;
    line-height: 1.3;
  }

  .resultsSplit{
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 14px;
    align-items: start;
  }

  .resultsCol{ min-width: 0; }

  .metricsCard{
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.03);
  }

  .metricRow{
    display:flex;
    justify-content:space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .metricRow:last-child{ border-bottom: none; }

  /* --- Metrics: animation fluide (collapse) --- */
  .metricsContent{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 240ms ease, opacity 180ms ease, transform 180ms ease;
    will-change: max-height, opacity, transform;
  }

  .metricsContent.open{
    max-height: 1000px; /* suffisamment grand pour contenir le bloc */
    opacity: 1;
    transform: translateY(0);
  }

  /* =========================================================
     Signals — Chart lift
     ========================================================= */

  .sigChartHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
  }

  .sigChartKpis {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Groupe = cadre + description côte à côte */
  .sigKpiGroup {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sigKpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(49,105,138,.14);
    min-width: 68px;
    flex-shrink: 0;
    transition: border-color 180ms ease, background 180ms ease;
  }

  .sigKpi__val {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.1;
  }

  .sigKpi__lbl {
    font-size: 10px;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(31,36,48,.45);
    margin-top: 3px;
  }

  /* Description à droite du cadre */
  .sigKpi__desc {
    margin: 0;
    font-size: 11px;
    font-family: Montserrat, Arial, sans-serif;
    color: rgba(31,36,48,.55);
    line-height: 1.55;
    max-width: 130px;
  }
  .sigKpi__desc strong {
    color: rgba(31,36,48,.80);
    font-weight: 700;
  }

  /* KPI lift coloré selon intensité */
  #kpiLift.lift-low  { border-color: rgba(49,185,100,.35); background: rgba(49,185,100,.06); }
  #kpiLift.lift-low  .sigKpi__val { color: #1e8a4a; }
  #kpiLift.lift-mid  { border-color: rgba(245,185,66,.45); background: rgba(245,185,66,.08); }
  #kpiLift.lift-mid  .sigKpi__val { color: #b07800; }
  #kpiLift.lift-high { border-color: rgba(220,60,60,.40); background: rgba(220,60,60,.07); }
  #kpiLift.lift-high .sigKpi__val { color: #c03030; }

  /* ── Bandeau verdict ──────────────────────────────────── */
  .sigVerdict {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 14px;
    margin-bottom: 14px;
    font-family: Montserrat, Arial, sans-serif;
    border: 1.5px solid;
  }
  .sigVerdict.rupture { background: rgba(220,50,50,.08); border-color: rgba(220,50,50,.32); color: #b83030; }
  .sigVerdict.signal  { background: rgba(200,130,0,.08); border-color: rgba(200,130,0,.32); color: #8a5c00; }
  .sigVerdict.stable  { background: rgba(30,140,70,.07); border-color: rgba(30,140,70,.28); color: #1a6b35; }
  .sigVerdict__icon  { font-size: 24px; flex-shrink: 0; }
  .sigVerdict__text  { flex: 1; }
  .sigVerdict__title { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
  .sigVerdict__sub   { display: block; font-size: 12px; font-weight: 500; opacity: .75; margin-top: 3px; line-height: 1.45; }
  .sigVerdict__lift  { font-size: 26px; font-weight: 900; font-family: Montserrat, Arial, sans-serif; flex-shrink: 0; letter-spacing: -.5px; }

  /* ── KPIs décideur ─────────────────────────────────────── */
  .sigKpiRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .sigKpiCard {
    flex: 1;
    min-width: 110px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(49,105,138,.14);
    transition: border-color .2s, background .2s;
  }
  .sigKpiCard__val  { font-family: Montserrat, Arial, sans-serif; font-size: 22px; font-weight: 900; color: var(--blue); line-height: 1; }
  .sigKpiCard__lbl  { font-family: Montserrat, Arial, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(31,36,48,.55); margin-top: 5px; }
  .sigKpiCard__desc { font-family: Montserrat, Arial, sans-serif; font-size: 10.5px; color: rgba(31,36,48,.40); margin-top: 3px; line-height: 1.4; }
  #kpiLift.lift-low  { border-color: rgba(30,140,70,.35);  background: rgba(30,140,70,.06);  }
  #kpiLift.lift-low  .sigKpiCard__val { color: #1a6b35; }
  #kpiLift.lift-mid  { border-color: rgba(200,130,0,.40);  background: rgba(200,130,0,.07);  }
  #kpiLift.lift-mid  .sigKpiCard__val { color: #8a5c00; }
  #kpiLift.lift-high { border-color: rgba(220,50,50,.38);  background: rgba(220,50,50,.07);  }
  #kpiLift.lift-high .sigKpiCard__val { color: #b83030; }

  /* ── Légende graphe ────────────────────────────────────── */
  .sigChartLegend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(248,248,252,.80);
    border: 1px solid rgba(49,105,138,.10);
  }
  .sigLegend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 500;
    color: rgba(31,36,48,.70);
  }
  .sigLegend__item--note {
    font-size: 11px;
    font-style: italic;
    color: rgba(31,36,48,.45);
    margin-left: auto;
  }
  /* Carré de couleur */
  .sigLegend__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .sigLegend__swatch--hist { background: rgba(100,115,135,.35); border: 1px solid rgba(100,115,135,.30); }
  .sigLegend__swatch--win  { background: rgba(200,130,0,.55);   border: 1px solid rgba(200,130,0,.40); }
  /* Ligne pointillée */
  .sigLegend__dash {
    display: inline-block;
    width: 22px;
    height: 2px;
    border-top: 2.5px dashed rgba(49,105,138,.65);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .sigChartBox {
    position: relative;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(49,105,138,.14);
    border-radius: 16px;
    padding: 18px 20px 12px;
    overflow: hidden;
  }

  #sigChart {
    width: 100%;
    display: block;
    cursor: crosshair;
  }

  /* Tooltip survol */
  .sigTooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: rgba(20,30,48,.88);
    color: #fff;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transform: translateX(-50%);
  }
  .sigTooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom: none;
    border-top-color: rgba(20,30,48,.88);
  }

  #metricsToggle{
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }


  /* =========================================================
     Contexte décisionnel (formulaire)
     ========================================================= */

  .demoWrap{ padding: 16px; }

  .demoGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  label{
    display:block;
    font-size:12px;
    color: rgba(31,36,48,.72);
    margin: 10px 0 6px;
    font-family: Montserrat, Arial, sans-serif;
  }

  /* Range custom (piste + valeur + thumb) */
  #priority{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:10px;
    border-radius:999px;
    outline:none;
    background:transparent; /* important : on dessine la track via pseudo-éléments */
  }

  /* Track Chrome/Safari */
  #priority::-webkit-slider-runnable-track{
    height:10px;
    border-radius:999px;
    background: linear-gradient(
      to right,
      #D4AF37 0%,
      #D4AF37 var(--pct, 50%),
      #E9EEF3 var(--pct, 50%),
      #E9EEF3 100%
    );
  }

  /* Thumb Chrome/Safari */
  #priority::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#D4AF37;
    border:2px solid #fff;
    margin-top:-4px; /* centre le thumb sur une track de 10px */
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }

  /* Firefox: track + filled part */
  #priority::-moz-range-track{
    height:10px;
    border-radius:999px;
    background:#E9EEF3;
  }
  #priority::-moz-range-progress{
    height:10px;
    border-radius:999px;
    background:#D4AF37;
  }
  #priority::-moz-range-thumb{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#D4AF37;
    border:2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }

  .help{
    color: rgba(31,36,48,.66);
    font-size: 12px;
    margin-top: 8px;
  }

  .result{
    border-radius: 16px;
    border: 1px solid rgba(49,105,138,.18);
    background: rgba(255,255,255,.55);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: 10px;
    min-height: 230px;
    box-shadow: var(--shadow);
  }

  .score{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .score .num{
    font-size: 34px;
    font-weight: 900;
    color: var(--accent);
    font-family: Montserrat, Arial, sans-serif;
  }
  .score .lbl{ color: rgba(31,36,48,.70); font-size: 13px; }

  .meter{
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(49,105,138,.18);
    background: rgba(49,105,138,.08);
    overflow: hidden;
  }
  .meter > div{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(49,105,138,.95), rgba(253,219,58,.70));
    transition: width .4s ease;
  }

  .factorsCard{
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.03);
  }

  .toggleTitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
  }

  /* Conteneur animé (même principe que métriques) */
  .toggleContent{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 250ms ease, opacity 200ms ease;
  }

  .toggleContent.open{
    max-height: 1000px;
    opacity: 1;
  }


  .recommendation{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;           /* garde une hauteur cohérente */
    padding: 12px 16px;
  }

  .recommendation > *{
    padding: 14px 18px;
  }

  /* Séparateurs entre sections */
  .recommendation > * + *{
    border-top: 1px solid rgba(49,105,138,.22);
  }

  /* Titres internes : Focus / Décision / À surveiller */
  .recommendation h4{
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    font-family: Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #31698a;
  }

  /* Contenu textuel */
  .recommendation p{
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #1f2430;
  }

  /* Listes internes */
  .recommendation ul{
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 14px;
    color: #1f2430;
  }

  .recommendation li{
    margin-bottom: 6px;
  }

  .list{
    margin:0;
    padding-left:18px;
    color: rgba(31,36,48,.72);
    font-size: 13px;
  }

  .rowBtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }



  .dot {
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    margin-right:8px;
  }

  .dot.crit { background:#b00020; }
  .dot.high { background:#e67e22; }
  .dot.med  { background:#d4af37; }
  .dot.low  { background:#2e7d32; }

  .badgeUrgency {
    margin-left:10px;
    padding:2px 8px;
    border-radius:12px;
    font-size:12px;
    background:#f2f2f2;
  }


  /* =========================================================
     Footer
     ========================================================= */

  footer {
    padding: 48px 0 32px;
    border-top: 1px solid rgba(49,105,138,.18);
    color: rgba(31,36,48,.72);
    font-size: 13px;
  }

  /* Nouveau layout footer centré */
  .foot-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  /* Logo + wordmark */
  .footer-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
  }
  .footer-logo svg {
    filter: drop-shadow(0 6px 18px rgba(49,105,138,.22));
    transition: transform 200ms ease, filter 200ms ease;
  }
  .footer-logo:hover svg {
    transform: translateY(-3px);
    filter: drop-shadow(0 10px 24px rgba(49,105,138,.32));
  }
  .footer-logo:hover { text-decoration: none; }

  .footer-wordmark {
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.2px;
    color: var(--text);
  }
  .footer-arabic {
    font-size: 15px;
    font-weight: 400;
    opacity: .65;
    margin-left: 6px;
  }

  /* Mail */
  .footer-mail {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
    color: var(--blue);
    letter-spacing: .01em;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(49,105,138,.22);
    background: rgba(255,255,255,.55);
    transition: background 180ms ease, border-color 180ms ease;
  }
  .footer-mail:hover {
    background: rgba(49,105,138,.08);
    border-color: rgba(49,105,138,.38);
    text-decoration: none;
  }

  /* Ligne basse */
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(49,105,138,.10);
    width: 100%;
    color: rgba(31,36,48,.50);
    font-size: 12px;
  }

  .tinyLinks { display: flex; gap: 12px; flex-wrap: wrap; }
  .tinyLinks a { color: rgba(31,36,48,.55); }
  .tinyLinks a:hover { color: var(--text); text-decoration: underline; }


  /* Styles additionnels pour les sélects (amélioration visuelle) */
  #urgency, #dataQuality, #risk, #impact {
    font-weight: 500;
  }

  /* Grid 2 colonnes responsive */
  .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* =========================================================
     Responsive
     ========================================================= */


/* =========================
   Sélecteur décideur
   ========================= */
#strategy-selector .selectorGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}

.selectorField{
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}

.selectorLabel{
  display:block;
  font-size: 12px;
  letter-spacing: .3px;
  margin-bottom: 6px;
  opacity: .85;
}

.toggleBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 64px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(49,105,138,.35);
  background: rgba(49,105,138,.12);
  color: rgba(49,105,138,.95);
  font-weight: 700;
  cursor: pointer;
}

.toggleBtn[aria-pressed="false"]{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
}

.selectorFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}

.btn-secondary{
  border: 1px solid rgba(49,105,138,.35);
  background: rgba(49,105,138,.12);
  color: rgba(49,105,138,.95);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

.simGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.simField label{
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  opacity: 0.8;
}

.simField select{
  width: 100%;
}

.simAction{
  display: flex;
  align-items: flex-end;
}

.simAction .btn-primary{
  height: 46px;
  padding: 0 22px;
}

/* =========================================================
   Accordion sections — design épuré
   ========================================================= */

/* Compteur auto */
main { counter-reset: section-counter; }

/* Espace entre sections */
section[id] { margin-bottom: 6px; }

/* ── Bandeau cliquable ─────────────────────────────────── */
.sectionTitle {
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin-bottom: 0;
  border-radius: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* Zone intérieure — elle porte le style visuel */
.sectionTitle > div {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 15px 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(49,105,138,.14);
  transition: background 180ms ease, border-color 180ms ease;
}

.sectionTitle:hover > div {
  background: rgba(255,255,255,.82);
  border-color: rgba(49,105,138,.26);
}

.sectionTitle.open > div {
  background: rgba(255,255,255,.82);
  border-color: rgba(49,105,138,.28);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

/* Barre verticale or */
.sectionTitle > div::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D4AF37 0%, rgba(212,175,55,.3) 100%);
  transition: height 200ms ease;
}
.sectionTitle.open > div::before,
.sectionTitle:hover > div::before { height: 30px; }

/* Numéro discret à droite */
.sectionTitle::after {
  counter-increment: section-counter;
  content: counter(section-counter, decimal-leading-zero);
  position: absolute;
  right: 28px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(49,105,138,.20);
  pointer-events: none;
  transition: color 180ms ease;
}
.sectionTitle:hover::after,
.sectionTitle.open::after { color: rgba(49,105,138,.40); }

/* ── Titre h2 ──────────────────────────────────────────── */
.sectionTitle h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  letter-spacing: .01em;
}

/* Chevron carré animé */
.sectionTitle h2::after {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: rgba(49,105,138,.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5l4 3.5-4 3.5' stroke='%2331698a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  transition: transform 240ms cubic-bezier(.4,0,.2,1), background-color 180ms ease;
}
.sectionTitle.open  h2::after { transform: rotate(90deg); background-color: rgba(49,105,138,.16); }
.sectionTitle:hover h2::after { background-color: rgba(49,105,138,.12); }

/* ── Section body ──────────────────────────────────────── */
.section-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 360ms cubic-bezier(.4,0,.2,1),
              opacity 240ms ease,
              transform 240ms ease;
  will-change: max-height, opacity, transform;
}

.section-body.open {
  max-height: 8000px;
  opacity: 1;
  transform: translateY(0);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(49,105,138,.28);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 24px 32px 32px;
}

/* Supprimer ombres/bordures parasites sur les cards enfants */
.section-body .card,
.section-body .demoWrap,
.section-body section.card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 5px 5px 12px;
  margin: 0;
}

/* Séparateurs entre sous-blocs */
.section-body > .card + .card,
.section-body > section + section,
.section-body > section + div,
.section-body > div + section {
  border-top: 3.5px solid rgba(212,175,55,.45);
  padding-top: 40px;
  margin-top: 40px;
}


/* =========================================================
   Responsive — Media queries
   (regroupées par breakpoint, du plus large au plus étroit)
   ========================================================= */

/* — 920px : navigation mobile + grilles layout — */
@media (max-width: 920px){

    .heroGrid{ grid-template-columns: 1fr; }
    .demoGrid{ grid-template-columns: 1fr; }
    .search-grid{ grid-template-columns: 1fr; }

    nav ul{ display:none; }
    .menuBtn{ display:inline-flex; }

    nav ul.open{
      display:flex;
      position:absolute;
      left:20px; right:20px; top:66px;
      flex-direction:column;
      gap:8px;
      padding:12px;
      border-radius:16px;
      background: rgba(250,235,215,.92);
      border: 1px solid rgba(49,105,138,.18);
      box-shadow: var(--shadow2);
    }
    nav ul.open a{
      width: 100%;
      color: rgba(31,36,48,.82);
    }
    nav ul.open a:hover{
      background: rgba(49,105,138,.10);
      text-decoration: none;
    }
}

/* — 900px : colonnes adaptatives — */
@media (max-width: 900px) {
  .resultsSplit        { grid-template-columns: 1fr; }
  #strategy-selector .selectorGrid { grid-template-columns: 1fr; }
  .simGrid             { grid-template-columns: 1fr; }
  .simAction           { justify-content: flex-end; }
}

/* — 640px : grid2 colonnes — */
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* — touch : aide contextuelle toujours visible — */
@media (hover: none) {
  .modeHelp {
    display: block;
    opacity: 0.85;
  }
}



/* ═══════════════════════════════════════════════════════════
   Profils prédéfinis décideur
   ═══════════════════════════════════════════════════════════ */

.profiles-strip {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(49,105,138,.10);
}

.profiles-strip__label {
  font-family: Montserrat, Arial, sans-serif; /* fallback avant le @import Bricolage */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(31,36,48,.38);
  margin-bottom: 9px;
}

.profiles-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Chip de profil ──────────────────────────────────────── */
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(49,105,138,.18);
  background: rgba(255,255,255,.52);
  color: rgba(31,36,48,.68);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 100ms ease,
    box-shadow 150ms ease;
}

.profile-chip:hover {
  background: rgba(49,105,138,.08);
  border-color: rgba(49,105,138,.28);
  color: var(--blue, #31698a);
  box-shadow: 0 3px 10px rgba(49,105,138,.10);
}

.profile-chip.active {
  background: linear-gradient(135deg,
    rgba(49,105,138,.12),
    rgba(212,175,55,.12));
  border-color: rgba(49,105,138,.38);
  color: var(--blue, #31698a);
  font-weight: 700;
  box-shadow: 0 3px 14px rgba(49,105,138,.14);
}

.profile-chip:active { transform: scale(.96); }

/* ── Bandeau de confirmation ─────────────────────────────── */
.profile-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(49,105,138,.06);
  border: 1px solid rgba(49,105,138,.16);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue, #31698a);
  animation: profileAppliedIn .2s ease;
}

@keyframes profileAppliedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-applied__clear {
  margin-left: auto;
  border: none;
  background: none;
  color: rgba(49,105,138,.45);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.profile-applied__clear:hover { color: var(--blue, #31698a); }

/* ── Flash animation sur les champs modifiés ─────────────── */
@keyframes fieldFlash {
  0%   {
    background: rgba(212,175,55,.22);
    border-color: rgba(212,175,55,.50);
    box-shadow: 0 0 0 3px rgba(212,175,55,.15);
  }
  70%  {
    background: rgba(212,175,55,.08);
    border-color: rgba(212,175,55,.22);
  }
  100% {
    background: rgba(255,255,255,.62);
    border-color: rgba(49,105,138,.22);
    box-shadow: none;
  }
}

.field-flash {
  animation: fieldFlash .8s ease forwards;
}

/* — impression / PDF — */
@media print {
  @page {
    size: A4 landscape;
    margin: 8mm 10mm;
  }

  /* Masquer absolument tout */
  body > *                { display: none !important; }

  /* Afficher uniquement le wrapper principal contenant le brief */
  body > .page-wrapper,
  body > main,
  body > #root,
  body > div              { display: block !important; }

  /* Masquer tout à l'intérieur sauf briefGeoMap */
  body > * > *,
  body > * > * > *        { display: none !important; }

  /* Remonter briefGeoMap */
  #briefGeoMap            {
    display: block !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    page-break-inside: avoid;
  }

  /* Rendre visible tout ce qui est dans briefGeoMap */
  #briefGeoMap,
  #briefGeoMap *          {
    visibility: visible !important;
    display: revert !important;
  }

  /* Masquer les boutons d'action */
  #btnExportPdf,
  #btnCopyBrief,
  #btnPrintBrief          { display: none !important; }
}
  /* ═══════════════════════════════════════════════════════════
     BRIEF CARD — rendu JSON structuré
     ═══════════════════════════════════════════════════════════ */

  .brief-card {
    font-family: Montserrat, Arial, sans-serif;
    border: 1.5px solid var(--bc, #2563eb);
    border-radius: 16px;
    background: var(--bb, #eff6ff);
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0,0,0,.10);
    margin-top: 14px;
  }

  .bc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    background: rgba(255,255,255,.70);
    border-bottom: 1px solid rgba(0,0,0,.07);
    gap: 12px;
    flex-wrap: wrap;
  }

  .bc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .bc-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.8);
  }

  .bc-niv {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
  }

  .bc-titre {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2430;
    letter-spacing: -.2px;
    line-height: 1.3;
  }

  .bc-date {
    font-size: 11px;
    color: rgba(31,36,48,.40);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .bc-alerte {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 20px;
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2430;
    line-height: 1.45;
  }

  .bc-alerte-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

  .bc-body { padding: 6px 0; }

  .bc-block {
    padding: 13px 20px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .bc-block:last-child { border-bottom: none; }

  .bc-block--france {
    background: rgba(0,35,149,.03);
    border-left: 3px solid rgba(0,35,149,.20);
  }

  .bc-block--action {
    background: rgba(31,36,48,.025);
  }

  .bc-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(31,36,48,.40);
    margin-bottom: 6px;
  }

  .bc-text {
    font-size: 13.5px;
    color: #1f2430;
    line-height: 1.65;
  }

  .bc-text--action {
    font-weight: 600;
    color: #111827;
  }

  /* Signaux */
  .bc-sigs { display: flex; flex-direction: column; gap: 8px; }

  .bc-sig {
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 9px 12px;
  }

  .bc-sig-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .bc-sig-src {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--blue, #31698a);
    background: rgba(49,105,138,.08);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(49,105,138,.18);
  }

  .bc-sig-date {
    font-size: 10.5px;
    color: rgba(31,36,48,.45);
  }

  .bc-sig-obs {
    font-size: 12.5px;
    color: #1f2430;
    line-height: 1.5;
    font-weight: 500;
  }

  .bc-sig-why {
    font-size: 12px;
    color: rgba(31,36,48,.60);
    line-height: 1.45;
    margin-top: 3px;
    font-style: italic;
  }

  /* Loading */
  .bc-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px;
    color: rgba(31,36,48,.45);
    font-size: 14px;
    font-family: Montserrat, Arial, sans-serif;
  }

  .bc-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(49,105,138,.20);
    border-top-color: rgba(49,105,138,.80);
    border-radius: 50%;
    animation: bc-spin .7s linear infinite;
    flex-shrink: 0;
  }

  @keyframes bc-spin { to { transform: rotate(360deg); } }

  /* Carte */
  #briefGeoMap .geo-node { cursor: default; }
  #briefGeoMap .geo-node:hover circle:nth-child(2) {
    stroke: rgba(49,105,138,.85);
    stroke-width: 2.5px;
  }

  @media print {
    .brief-card { border: 1px solid #ccc !important; background: #fff !important; }
    #briefGeoMap { display: block !important; page-break-inside: avoid; }
  }

  /* =========================================================
     Bloc secondaire (Sources / Indicateurs / Tech / Impact)
     ========================================================= */

  .secondary-bloc {
    margin: 8px auto 32px;
    max-width: var(--max, 1100px);
    padding: 0 20px;
  }

  .secondary-bloc__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid rgba(49,105,138,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.38);
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, border-color .2s ease;
  }

  .secondary-bloc__toggle:hover {
    background: rgba(255,255,255,.58);
    border-color: rgba(49,105,138,.26);
  }

  .secondary-bloc__toggle[aria-expanded="true"] {
    border-radius: 14px 14px 0 0;
    border-bottom-color: transparent;
    background: rgba(255,255,255,.52);
  }

  .secondary-bloc__label {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(31,36,48,.55);
  }

  .secondary-bloc__sub {
    font-size: 11px;
    color: rgba(31,36,48,.35);
    font-family: Montserrat, Arial, sans-serif;
    letter-spacing: .04em;
  }

  .secondary-bloc__chevron {
    margin-left: auto;
    font-size: 18px;
    color: rgba(49,105,138,.40);
    font-weight: 300;
    line-height: 1;
    transition: transform .25s ease;
    transform: rotate(0deg);
    flex-shrink: 0;
  }

  .secondary-bloc__toggle[aria-expanded="true"] .secondary-bloc__chevron {
    transform: rotate(90deg);
  }

  .secondary-bloc__body {
    display: none;
    border: 1px solid rgba(49,105,138,.16);
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: rgba(255,255,255,.18);
    padding: 8px 0 4px;
  }

  .secondary-bloc__body.open {
    display: block;
  }

  /* Atténuation visuelle des sections secondaires */
  .secondary-bloc__body section {
    padding: 22px 0 14px;
  }

  .secondary-bloc__body h2 {
    font-size: 16px !important;
    opacity: .78;
  }

  .secondary-bloc__body .card {
    background: rgba(255,255,255,.42) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.05) !important;
  }

  .secondary-bloc__body .card h3 {
    font-size: 13.5px;
    color: rgba(31,36,48,.65);
  }

  .secondary-bloc__body .card p,
  .secondary-bloc__body .card li {
    font-size: 12.5px;
    color: rgba(31,36,48,.58);
    line-height: 1.55;
  }

  .secondary-bloc__body .tag {
    font-size: 10.5px;
    opacity: .70;
  }


  /* ═══════════════════════════════════════════════════════════
   EN SAVOIR PLUS — Réseau de neurones
   ═══════════════════════════════════════════════════════════ */

.esplus-wrapper {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.esplus-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.esplus-hdrline {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.4));
}
.esplus-hdrline--rev {
  background: linear-gradient(270deg, transparent, rgba(212,175,55,.4));
}
.esplus-hdrpill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(49,105,138,.07);
  border: 1px solid rgba(49,105,138,.18);
  border-radius: 999px;
  padding: 7px 18px 7px 12px;
  white-space: nowrap;
}
.esplus-hdrdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 8px #D4AF37;
  animation: esplus-dp 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes esplus-dp {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.5); }
}
.esplus-hdrtitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #31698a;
  font-family: Montserrat, Arial, sans-serif;
}

/* Canvas */
.esplus-canvas {
  position: relative;
}
.esplus-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* Hub central */
.esplus-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f3c4e, #31698a);
  border: 3px solid #f5f0e8;
  box-shadow: 0 0 0 7px rgba(49,105,138,.12), 0 0 28px rgba(49,105,138,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: esplus-hp 3s ease-in-out infinite;
}
@keyframes esplus-hp {
  0%,100% { box-shadow: 0 0 0 7px rgba(49,105,138,.12), 0 0 28px rgba(49,105,138,.4); }
  50%      { box-shadow: 0 0 0 13px rgba(49,105,138,.06), 0 0 44px rgba(49,105,138,.65); }
}
.esplus-hub svg {
  width: 20px; height: 20px;
  stroke: #fff; fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}

/* Grille */
.esplus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* Carte */
.esplus-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(49,105,138,.14);
  border-radius: 20px;
  padding: 26px 26px 22px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s, border-color .28s;
  backdrop-filter: blur(6px);
}
.esplus-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(212,175,55,.05), rgba(49,105,138,.04));
  opacity: 0;
  transition: opacity .28s;
}
.esplus-card:hover::before,
.esplus-card.open::before { opacity: 1; }

.esplus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 48px rgba(49,105,138,.16), 0 4px 16px rgba(0,0,0,.06);
  border-color: rgba(49,105,138,.30);
}
.esplus-card.open {
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 12px 36px rgba(212,175,55,.14), 0 2px 12px rgba(0,0,0,.05);
}

/* Nœud coin */
.esplus-node {
  position: absolute;
  top: -10px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #31698a;
  border: 3px solid #f5f0e8;
  box-shadow: 0 0 10px rgba(49,105,138,.5);
  z-index: 2;
  transition: background .25s, box-shadow .25s;
}
.esplus-card.open .esplus-node,
.esplus-card:hover .esplus-node {
  background: #D4AF37;
  box-shadow: 0 0 18px rgba(212,175,55,.8);
}

/* Numéro déco */
.esplus-num {
  position: absolute;
  bottom: 16px; right: 20px;
  font-size: 36px;
  font-weight: 900;
  color: rgba(49,105,138,.06);
  line-height: 1;
  user-select: none;
  transition: color .25s;
  letter-spacing: -.02em;
  font-family: Montserrat, Arial, sans-serif;
}
.esplus-card:hover .esplus-num,
.esplus-card.open .esplus-num { color: rgba(212,175,55,.11); }

/* Icône */
.esplus-ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #31698a, #4a8dae);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(49,105,138,.28);
  transition: box-shadow .25s;
}
.esplus-card:hover .esplus-ico,
.esplus-card.open .esplus-ico {
  box-shadow: 0 6px 22px rgba(49,105,138,.45);
}
.esplus-ico svg {
  width: 22px; height: 22px;
  stroke: #fff; fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* En-tête carte */
.esplus-chead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.esplus-ctitle {
  font-size: 15px;
  font-weight: 800;
  color: #31698a;
  font-family: Montserrat, Arial, sans-serif;
  letter-spacing: -.01em;
}
.esplus-arr {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(49,105,138,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  flex-shrink: 0;
}
.esplus-card:hover .esplus-arr,
.esplus-card.open .esplus-arr {
  background: #D4AF37;
  border-color: #D4AF37;
}
.esplus-arr svg {
  width: 11px; height: 11px;
  stroke: #31698a; fill: none;
  stroke-width: 2.5; stroke-linecap: round;
  transition: stroke .25s, transform .25s;
}
.esplus-card:hover .esplus-arr svg,
.esplus-card.open .esplus-arr svg { stroke: #fff; }
.esplus-card.open .esplus-arr svg { transform: rotate(90deg); }

/* Sous-titre */
.esplus-csub {
  font-size: 11.5px;
  color: #5a6070;
  margin-bottom: 12px;
  line-height: 1.45;
}

/* Tags */
.esplus-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.esplus-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(49,105,138,.20);
  color: #31698a;
  background: rgba(49,105,138,.06);
  transition: all .2s;
  font-family: Montserrat, Arial, sans-serif;
}
.esplus-card:hover .esplus-tag,
.esplus-card.open .esplus-tag {
  border-color: rgba(212,175,55,.45);
  color: #7a5e00;
  background: rgba(212,175,55,.08);
}

/* Body accordéon */
.esplus-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s;
  opacity: 0;
}
.esplus-card.open .esplus-body {
  max-height: 380px;
  opacity: 1;
}
.esplus-body-inner {
  padding-top: 14px;
  border-top: 1px solid rgba(49,105,138,.10);
  margin-top: 14px;
}

/* Items 2 colonnes */
.esplus-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.esplus-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  background: rgba(49,105,138,.04);
  border-radius: 9px;
  border: 1px solid rgba(49,105,138,.07);
}
.esplus-idot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4AF37;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 5px rgba(212,175,55,.5);
}
.esplus-itxt {
  font-size: 11.5px;
  line-height: 1.4;
  color: #1f2430;
}
.esplus-itxt strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #31698a;
  margin-bottom: 1px;
}

/* Barres stats */
.esplus-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(49,105,138,.06);
}
.esplus-stat:last-child { border-bottom: none; }
.esplus-slbl { flex: 1; font-size: 11.5px; color: #5a6070; }
.esplus-sbar {
  width: 68px; height: 4px;
  background: rgba(49,105,138,.10);
  border-radius: 999px;
  overflow: hidden;
}
.esplus-sfill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #31698a, #4a8dae);
}
.esplus-sval {
  font-size: 11px;
  font-weight: 700;
  color: #31698a;
  width: 28px;
  text-align: right;
  font-family: Montserrat, Arial, sans-serif;
}

/* Connexions SVG */
.esplus-conn {
  fill: none;
  stroke-dasharray: 6 4;
  animation: esplus-flow 3s linear infinite;
}
@keyframes esplus-flow { to { stroke-dashoffset: -20; } }

/* Footer */
.esplus-footer {
  text-align: center;
  margin-top: 26px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(49,105,138,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Montserrat, Arial, sans-serif;
}
.esplus-footer::before,
.esplus-footer::after {
  content: '';
  flex: 1;
  max-width: 160px;
  height: 1px;
}
.esplus-footer::before {
  background: linear-gradient(90deg, transparent, rgba(49,105,138,.20));
}
.esplus-footer::after {
  background: linear-gradient(270deg, transparent, rgba(49,105,138,.20));
}

/* Responsive */
@media (max-width: 640px) {
  .esplus-grid { grid-template-columns: 1fr; }
  .esplus-items { grid-template-columns: 1fr; }
  .esplus-hub { display: none; }
}