/* ia-annuaire.css — genere par generate_ia_pages.py, ne pas editer a la main */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
:root{
      --bg:        #FFFFFF;
      --bg2:       #F5F7FF;
      --bg3:       #EEF2FF;
      --primary:   #1A3CFF;
      --primary-h: #2d4fff;
      --accent:    #10B981;
      --accent-h:  #0ea372;
      --text:      #0A0F2C;
      --muted:     #525880;
      --border:    rgba(10,15,44,0.10);
      --card:      rgba(10,15,44,0.04);
      --radius:    14px;
      --shadow:    0 8px 40px rgba(0,0,0,0.10);
    }
html{ scroll-behavior: smooth; }
body{
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
      max-width: 100vw;
    }
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
.container{
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }
.btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
      border: none;
    }
.btn-primary{
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 24px rgba(26,60,255,0.4);
    }
.btn-primary:hover{
      background: var(--primary-h);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(26,60,255,0.55);
    }
.btn-accent{
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 24px rgba(16,185,129,0.35);
    }
.btn-accent:hover{
      background: var(--accent-h);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(16,185,129,0.5);
    }
.btn-outline{
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--border);
    }
.btn-outline:hover{
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-2px);
    }
.btn-linkedin{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 26px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.93rem;
      background: #0A66C2;
      color: #fff;
      box-shadow: 0 4px 20px rgba(10,102,194,0.35);
      transition: transform 0.2s, box-shadow 0.2s;
      border: none;
    }
.btn-linkedin:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(10,102,194,0.5);
    }
header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
      border-bottom: 1px solid transparent;
    }
header.scrolled{
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-color: var(--border);
      box-shadow: 0 2px 24px rgba(10,15,44,0.08);
    }
.header-inner{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 70px;
      gap: 16px;
    }
.header-inner nav{ margin-left: auto; }
.logo{
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      flex-shrink: 0;
      line-height: 1.2;
    }
.logo span{ color: var(--accent); }
nav{ display: flex; align-items: center; gap: 6px; }
nav a{
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      transition: color 0.2s, background 0.2s;
      white-space: nowrap;
    }
nav a:hover{ color: var(--text); background: var(--card); }
.nav-cta{
      padding: 8px 18px;
      background:var(--accent)!important;
      color: #fff !important;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.84rem;
      box-shadow: 0 3px 16px rgba(26,60,255,0.4);
      transition: transform 0.2s, box-shadow 0.2s !important;
      white-space: nowrap;
    }
.nav-cta:hover{
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(26,60,255,0.55) !important;
      background: var(--primary) !important;
    }
.hamburger{
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }
.hamburger span{
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
    }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.mobile-menu{
      display: none;
      flex-direction: column;
      gap: 4px;
      padding: 16px 24px 20px;
      background: rgba(255,255,255,0.98);
      border-top: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(10,15,44,0.08);
    }
.mobile-menu.open{ display: flex; }
.mobile-menu a{
      padding: 12px 16px;
      border-radius: var(--radius);
      font-weight: 600;
      color: var(--muted);
      transition: color 0.2s, background 0.2s;
    }
.mobile-menu a:hover{ color: var(--text); background: var(--card); }
.btn-blog{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary);
      transition: gap 0.2s;
    }
.btn-blog:hover{ gap: 10px; }
footer{
      padding: 48px 0;
      border-top: 1px solid var(--border);
    }
.footer-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }
.footer-logo{
      font-size: 1.1rem;
      font-weight: 800;
    }
.footer-logo span{ color: var(--accent); }
.footer-center{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
.footer-links{
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
.footer-links a{
      font-size: 0.85rem;
      color: var(--muted);
      transition: color 0.2s;
    }
.footer-links a:hover{ color: var(--text); }
.footer-linkedin{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      color: var(--muted);
      transition: color 0.2s;
    }
.footer-linkedin:hover{ color: #0A66C2; }
.footer-linkedin svg{ flex-shrink: 0; }
.footer-right{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
.footer-copy{
      font-size: 0.82rem;
      color: var(--muted);
    }
.footer-tagline{
      font-size: 0.75rem;
      color: rgba(138,145,180,0.5);
    }
@media (max-width: 768px){nav{ display: none; }.hamburger{ display: flex; }.footer-inner{ flex-direction: column; align-items: flex-start; }.footer-right{ align-items: flex-start; }}
@media (max-width: 768px){.container{ padding: 0 16px; max-width: 100%; box-sizing: border-box; }.footer-inner{ flex-direction: column; gap: 20px; }.footer-links{ flex-wrap: wrap; gap: 12px; }}
@media (max-width: 480px){.container{ padding: 0 12px; }.btn-primary, .btn-accent, .btn-outline{ 
        width: 100% !important; 
        text-align: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
      }}
    .nav-tel { display:flex; align-items:center; gap:5px; }
    .ia-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:50px; background:rgba(26,60,255,0.08); color:var(--primary); font-weight:700; font-size:0.76rem; margin-bottom:18px; }
    .ia-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:24px; }
    .ia-stats div b { display:block; font-size:1.5rem; font-weight:800; color:var(--text); line-height:1.2; }
    .ia-stats div span { font-size:0.8rem; color:var(--muted); }

    .ia-reset { border:0; background:transparent; color:var(--muted); cursor:pointer; font-family:inherit; font-size:1.1rem; line-height:1; padding:2px 4px; }
    /* Zone tactile portee a 44px sans changer la taille visible ni la mise en
       page : la croix mesurait 22x21, intouchable au pouce. */
    .ia-reset { position:relative; }
    .ia-reset::after { content:''; position:absolute; inset:-12px; }
    .ia-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
    .ia-filters select { font-family:inherit; font-size:0.8rem; padding:7px 12px; border-radius:50px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; }
    .ia-filters select:focus { outline:0; border-color:var(--primary); }
    .ia-count { font-size:0.8rem; color:var(--muted); font-weight:600; margin-left:auto; }

    #annuaire { scroll-margin-top: 190px; }
    /* ── La conversation ─────────────────────────────────────────────── */
    .ia-chat { padding:110px 0 44px; background:var(--bg2); }
    .ia-chat h1 { font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.15; letter-spacing:-0.02em; margin-bottom:14px; }
    .ia-chat p.lead { font-size:1.02rem; color:var(--muted); max-width:640px; margin-bottom:26px; }

    .ia-marque { color:var(--primary); }
    .ia-avertissement { font-size:0.78rem; color:var(--muted); line-height:1.55; margin-top:14px; max-width:700px; }
    .ia-avertissement b { color:var(--text); font-weight:700; }
    .ia-avertissement a { color:var(--primary); font-weight:700; text-decoration:none; }
    .ia-puce { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; font-size:0.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }

    .ia-fil { display:flex; flex-direction:column; gap:18px; margin-bottom:18px; }
    .ia-msg-moi { align-self:flex-end; max-width:min(560px,88%); padding:12px 18px; border-radius:18px 18px 4px 18px; background:var(--primary); color:#fff; font-size:0.94rem; line-height:1.5; }
    .ia-msg-ia { align-self:flex-start; position:relative; margin-left:36px; max-width:min(780px,100%); padding:18px 22px; border-radius:4px 18px 18px 18px; background:var(--bg); border:1px solid var(--border); box-shadow:0 2px 14px rgba(10,15,44,0.05); }
    .ia-msg-ia::before { content:"F"; position:absolute; left:-36px; top:0; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:0.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:0.02em; }
    .ia-msg-ia .ia-etape { border-top:0; border-left:2px solid var(--border); padding:6px 0 6px 16px; margin-bottom:10px; }
    .ia-msg-ia .ia-etape:hover { border-left-color:var(--primary); }
    .ia-msg-ia > h3 { font-size:1.02rem; line-height:1.45; margin-bottom:2px; }
    .ia-msg-ia .ia-conseil-source { font-size:0.7rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:8px; }
    .ia-reflexion { display:flex; align-items:center; gap:5px; padding:2px 0; }
    .ia-reflexion i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:ia-ecrit 1.3s ease-in-out infinite; }
    .ia-reflexion i:nth-child(2) { animation-delay:0.18s; }
    .ia-reflexion i:nth-child(3) { animation-delay:0.36s; }
    .ia-attente-texte { font-size:0.82rem; color:var(--muted); margin-top:8px; }
    .ia-reprise { align-self:center; font-size:0.78rem; color:var(--muted); }
    .ia-reprise button { border:0; background:transparent; color:var(--primary); font-family:inherit; font-size:0.78rem; font-weight:700; cursor:pointer; text-decoration:underline; padding:6px; }
    @keyframes ia-ecrit { 0%,80%,100% { opacity:0.28; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }

    .ia-saisie { display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 20px; border:1.5px solid var(--border); border-radius:26px; background:var(--bg); box-shadow:0 4px 22px rgba(10,15,44,0.07); }
    .ia-saisie:focus-within { border-color:var(--primary); box-shadow:0 6px 26px rgba(26,60,255,0.14); }
    .ia-saisie textarea { flex:1; border:0; outline:0; resize:none; background:transparent; font-family:inherit; font-size:0.98rem; line-height:1.5; color:var(--text); padding:9px 0; max-height:160px; }
    .ia-saisie button { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, opacity .15s; }
    .ia-saisie button:hover { background:var(--primary-h); }
    .ia-saisie button[disabled] { opacity:0.45; cursor:progress; }

    .ia-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .ia-suggestions button { min-height:44px; padding:11px 16px; border-radius:50px; border:1.5px solid var(--border); background:var(--bg); color:var(--muted); font-family:inherit; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all .15s; }
    .ia-suggestions button:hover { border-color:var(--primary); color:var(--primary); background:rgba(26,60,255,0.04); }
    .ia-chat-note { font-size:0.78rem; color:var(--muted); margin-top:16px; }
    .ia-chat-note a { color:var(--primary); font-weight:700; text-decoration:none; }

    .ia-filtre-texte { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:50px; border:1.5px solid var(--border); background:var(--bg); min-width:230px; }
    .ia-filtre-texte:focus-within { border-color:var(--primary); }
    .ia-filtre-texte svg { flex-shrink:0; color:var(--muted); }
    .ia-filtre-texte input { border:0; outline:0; background:transparent; font-family:inherit; font-size:0.8rem; color:var(--text); width:100%; min-width:0; }

    .ia-questions { margin:10px 0 4px; padding-left:2px; }
    .ia-questions li { position:relative; padding-left:20px; margin-bottom:8px; font-size:0.92rem; line-height:1.55; color:var(--text); list-style:none; }
    .ia-questions li::before { content:"?"; position:absolute; left:0; top:1px; width:14px; height:14px; border-radius:50%; background:rgba(26,60,255,0.12); color:var(--primary); font-size:0.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
    .ia-questions-note { font-size:0.83rem; color:var(--muted); margin-top:10px; }

    /* Restaurees : un nettoyage de CSS trop large les avait emportees alors
       qu'elles habillent toujours l'offre et l'avertissement. */
    .ia-msg-ia .ia-conseil-source { font-size:0.7rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:8px; }
    .ia-conseil-offre { margin-top:16px; padding:16px 18px; border-radius:12px; background:rgba(16,185,129,0.07); border-left:4px solid var(--accent); }
    .ia-conseil-offre b { display:block; font-size:0.92rem; margin-bottom:4px; }
    .ia-conseil-offre p { font-size:0.86rem; color:var(--muted); line-height:1.55; margin-bottom:10px; }
    .ia-conseil-offre .ia-conseil-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .ia-conseil-offre a { display:inline-flex; align-items:center; min-height:44px; padding:11px 20px; border-radius:50px; font-size:0.82rem; font-weight:700; text-decoration:none; }
    .ia-conseil-offre a.principal { background:var(--accent); color:#fff; }
    .ia-conseil-offre a.secondaire { border:1.5px solid var(--border); color:var(--muted); }
    .ia-conseil-vigilance { margin-top:14px; font-size:0.85rem; color:var(--muted); padding-left:22px; position:relative; line-height:1.55; }
    .ia-conseil-vigilance::before { content:"!"; position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%; background:#EF4444; color:#fff; font-size:0.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

    /* Recevoir le plan par email. Volontairement discret, et placé APRES la
       réponse complète : le plan est déjà lisible en entier à l'écran. C'est
       une commodité offerte, jamais un péage — le site vend « sans
       inscription » partout ailleurs, on ne se contredit pas ici. */
    .ia-recap { margin-top:14px; padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
    .ia-recap b { display:block; font-size:0.88rem; margin-bottom:3px; }
    .ia-recap > p { font-size:0.82rem; color:var(--muted); line-height:1.5; margin-bottom:11px; }
    .ia-recap-champs { display:flex; flex-wrap:wrap; gap:8px; }
    .ia-recap input[type="email"] { flex:1 1 190px; min-width:0; min-height:44px; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-family:inherit; font-size:0.88rem; color:var(--text); background:#fff; }
    .ia-recap input[type="email"]:focus { outline:none; border-color:var(--primary); }
    .ia-recap-envoi { min-height:44px; padding:11px 20px; border:none; border-radius:50px; background:var(--primary); color:#fff; font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; }
    .ia-recap-envoi:disabled { opacity:0.55; cursor:default; }
    .ia-recap-consent { display:flex; gap:9px; align-items:flex-start; margin-top:11px; font-size:0.78rem; color:var(--muted); line-height:1.5; cursor:pointer; }
    .ia-recap-consent input { width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--primary); cursor:pointer; }
    .ia-recap-note { font-size:0.74rem; color:var(--muted); margin-top:9px; line-height:1.5; }
    .ia-recap-note a { color:var(--primary); font-weight:600; }
    .ia-recap-etat { font-size:0.84rem; font-weight:600; line-height:1.5; margin-top:2px; }
    .ia-recap-etat.ok { color:var(--accent); }
    .ia-recap-etat.ko { color:#EF4444; }
    /* Pot de miel : hors de l'ecran pour l'oeil, hors du parcours clavier et
       hors de la vocalisation pour un lecteur d'ecran. Seul un robot le voit. */
    .ia-piege { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

    /* Trois façons de faire, côte à côte : le visiteur se situe sans qu'on
       lui ait demandé son budget. */
    .ia-voies { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 6px; }
    .ia-voie { padding:14px 15px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
    .ia-voie.est-recommandee { border-color:var(--primary); background:rgba(26,60,255,0.04); box-shadow:0 4px 18px rgba(26,60,255,0.08); }
    .ia-voie b { display:block; font-size:0.88rem; }
    .ia-voie.est-recommandee b { color:var(--primary); }
    .ia-voie em { display:block; font-style:normal; font-size:0.7rem; color:var(--muted); margin-bottom:9px; }
    .ia-voie-outils { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
    .ia-voie-outils a { padding:3px 9px; border-radius:50px; background:var(--card); font-size:0.73rem; font-weight:700; color:var(--text); text-decoration:none; }
    .ia-voie-outils a:hover { background:rgba(26,60,255,0.10); color:var(--primary); }
    .ia-voie p { font-size:0.78rem; color:var(--muted); line-height:1.5; }
    .ia-voies-detail { font-size:0.78rem; font-weight:700; color:var(--muted); margin:14px 0 2px; }

    .ia-suivis { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
    .ia-suivis span { font-size:0.78rem; color:var(--muted); font-weight:700; width:100%; margin-bottom:2px; }
    /* 44px de haut : en dessous, la cible est trop petite pour un pouce.
       Recommandation d'accessibilité WCAG 2.5.8, et bon sens sur mobile. */
    .ia-suivis button { min-height:44px; padding:11px 16px; border-radius:50px; border:1px solid var(--border); background:var(--bg2); color:var(--primary); font-family:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; text-align:left; line-height:1.35; }
    .ia-suivis button:hover { border-color:var(--primary); }


    .ia-etape { display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--border); }
    .ia-etape .num { flex:0 0 24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:0.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
    .ia-etape b a { color:var(--text); text-decoration:none; border-bottom:2px solid rgba(26,60,255,0.25); }
    .ia-etape b a:hover { color:var(--primary); }
    .ia-etape .role { font-size:0.78rem; color:var(--primary); font-weight:700; }
    .ia-etape p { font-size:0.88rem; color:var(--muted); line-height:1.55; margin:4px 0 6px; }


    .ia-actifs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:0.78rem; }
    .ia-actifs > span:first-child { color:var(--muted); font-weight:600; }
    .ia-actif { display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 12px; border-radius:50px; background:rgba(26,60,255,0.08); color:var(--primary); font-weight:600; }
    .ia-actif button { border:0; background:transparent; color:inherit; cursor:pointer; font-family:inherit; font-size:0.95rem; line-height:1; padding:0 2px; opacity:0.65; }
    .ia-actif button:hover { opacity:1; }
    #ia-tout-effacer { border:0; background:transparent; color:var(--muted); text-decoration:underline; cursor:pointer; font-family:inherit; font-size:0.76rem; }
    #ia-tout-effacer:hover { color:var(--primary); }


    .ia-chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }
    .ia-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:50px; border:1.5px solid var(--border); background:var(--bg); font-size:0.79rem; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; transition:all .18s; text-decoration:none; }
    .ia-chip:hover { border-color:var(--primary); color:var(--primary); }
    .ia-chip.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }

    .ia-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(275px,1fr)); gap:16px; margin:26px 0 10px; }
    /* Regle de securite : tout element porteur de l'attribut hidden doit
       disparaitre, meme si sa classe lui donne un display. C'est ce piege qui
       avait rendu les filtres sans effet visible. */
    [hidden] { display:none !important; }
    .ia-item { position:relative; display:flex; }
    .ia-card { position:relative; flex:1; display:flex; flex-direction:column; gap:10px; padding:20px 46px 20px 20px; border:1px solid var(--border); border-left:4px solid var(--tool); border-radius:var(--radius); background:var(--bg); text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s, border-color .18s; }
    .ia-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(10,15,44,0.10); }
    .ia-fav { position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--muted); font-size:1.15rem; line-height:1; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, transform .15s; }
    /* Meme principe pour l'etoile des favoris : 32x32 a l'oeil, 44x44 au doigt. */
    .ia-fav::after { content:''; position:absolute; inset:-6px; border-radius:50%; }
    .ia-fav:hover { background:var(--card); color:var(--primary); transform:scale(1.12); }
    .ia-fav.is-on { color:#F59E0B; }
    .ia-fav-long { position:static; width:100%; height:auto; border-radius:50px; border:1.5px solid var(--border); padding:11px 18px; font-size:0.84rem; font-weight:700; }
    .ia-fav-long:hover { transform:none; }
    .ia-toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); z-index:9999; padding:12px 22px; border-radius:50px; background:var(--text); color:#fff; font-size:0.85rem; font-weight:600; box-shadow:0 10px 30px rgba(10,15,44,0.28); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
    .ia-toast.is-on { opacity:1; transform:translate(-50%, 0); }
    .ia-card-top { display:flex; align-items:center; gap:12px; }
    .ia-logo { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; color:#fff; background:var(--tool); flex-shrink:0; }
    .ia-card-top strong { display:block; font-size:1rem; font-weight:800; line-height:1.25; }
    .ia-card-top small { display:block; font-size:0.72rem; color:var(--muted); margin-top:2px; }
    .ia-card p { font-size:0.85rem; color:var(--muted); line-height:1.55; flex:1; }
    .ia-pills { display:flex; flex-wrap:wrap; gap:6px; }
    .ia-pill { font-size:0.68rem; font-weight:700; padding:4px 10px; border-radius:50px; background:var(--card); color:var(--muted); }
    .ia-pill.fr { background:rgba(16,185,129,0.12); color:#047857; }
    .ia-pill.note { background:rgba(26,60,255,0.09); color:var(--primary); }
    .ia-empty { grid-column:1/-1; padding:48px 20px; text-align:center; color:var(--muted); border:1.5px dashed var(--border); border-radius:var(--radius); }

    .ia-section { padding:56px 0; }
    .ia-section h2 { font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:10px; letter-spacing:-0.01em; }
    .ia-section > .container > p.intro { color:var(--muted); max-width:760px; margin-bottom:22px; }
    .ia-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
    .ia-cat { display:block; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s; }
    .ia-cat:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(10,15,44,0.08); }
    .ia-cat .emo { font-size:1.5rem; }
    .ia-cat b { display:block; margin:8px 0 5px; font-size:0.98rem; }
    .ia-cat span { font-size:0.82rem; color:var(--muted); line-height:1.5; }
    .ia-cat em { display:block; margin-top:9px; font-size:0.74rem; font-weight:700; color:var(--primary); font-style:normal; }

    .ia-selector { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:28px; }
    .ia-q { margin-bottom:18px; }
    .ia-q > label { display:block; font-size:0.84rem; font-weight:800; margin-bottom:9px; }
    .ia-choices { display:flex; flex-wrap:wrap; gap:7px; }
    .ia-choice { padding:7px 14px; border-radius:50px; border:1.5px solid var(--border); background:var(--bg); font-family:inherit; font-size:0.79rem; font-weight:600; color:var(--muted); cursor:pointer; transition:all .18s; }
    .ia-choice:hover { border-color:var(--primary); color:var(--primary); }
    .ia-choice[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
    .ia-reco { margin-top:20px; display:grid; gap:10px; }
    .ia-reco a { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-left:4px solid var(--tool); border-radius:12px; background:var(--bg); text-decoration:none; color:inherit; }
    .ia-reco a:hover { box-shadow:0 6px 20px rgba(10,15,44,0.08); }
    .ia-reco b { font-size:0.92rem; }
    .ia-reco small { display:block; color:var(--muted); font-size:0.78rem; margin-top:2px; }

    .ia-crumb { font-size:0.78rem; color:var(--muted); padding-top:100px; }
    .ia-crumb a { color:var(--muted); text-decoration:none; }
    .ia-crumb a:hover { color:var(--primary); }

    .ia-tool-head { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin:18px 0 14px; }
    .ia-tool-head .ia-logo { width:64px; height:64px; border-radius:16px; font-size:1.5rem; }
    .ia-tool-head h1 { font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.2; letter-spacing:-0.02em; }
    .ia-tool-head .sub { color:var(--muted); font-size:0.88rem; margin-top:4px; }
    .ia-layout { display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start; padding-bottom:56px; }
    .ia-body h2 { font-size:1.15rem; margin:28px 0 10px; letter-spacing:-0.01em; }
    .ia-body h2:first-child { margin-top:0; }
    .ia-body p { color:var(--text); line-height:1.7; margin-bottom:12px; }
    .ia-body ul { margin:0 0 12px 0; padding-left:0; list-style:none; }
    .ia-body ul li { position:relative; padding-left:26px; margin-bottom:9px; color:var(--text); line-height:1.6; }
    .ia-body ul.plus li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800; }
    .ia-body ul.moins li::before { content:"—"; position:absolute; left:0; color:#EF4444; font-weight:800; }
    .ia-body ul.cas li::before { content:"→"; position:absolute; left:0; color:var(--primary); font-weight:800; }
    .ia-note { padding:16px 18px; border-radius:12px; background:rgba(16,185,129,0.07); border-left:4px solid var(--accent); font-size:0.9rem; line-height:1.6; }
    .ia-note.warn { background:rgba(239,68,68,0.06); border-left-color:#EF4444; }
    .ia-note b { display:block; margin-bottom:4px; }
    .ia-aside { position:sticky; top:92px; display:grid; gap:14px; }
    .ia-box { border:1px solid var(--border); border-radius:var(--radius); padding:18px; background:var(--bg); }
    .ia-box h3 { font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:12px; }
    .ia-kv { display:flex; justify-content:space-between; gap:12px; font-size:0.85rem; padding:7px 0; border-bottom:1px solid var(--border); }
    .ia-kv:last-child { border-bottom:0; }
    .ia-kv span { color:var(--muted); }
    .ia-kv b { text-align:right; }
    .ia-box .btn { width:100%; justify-content:center; }
    .ia-alts { display:flex; flex-wrap:wrap; gap:7px; }
    .ia-alts a { padding:6px 13px; border-radius:50px; border:1.5px solid var(--border); font-size:0.78rem; font-weight:600; text-decoration:none; color:var(--muted); }
    .ia-alts a:hover { border-color:var(--primary); color:var(--primary); }

    .ia-faq { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
    .ia-faq details { border-bottom:1px solid var(--border); }
    .ia-faq details:last-child { border-bottom:0; }
    .ia-faq summary { cursor:pointer; padding:16px 20px; font-weight:700; font-size:0.93rem; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; }
    .ia-faq summary::-webkit-details-marker { display:none; }
    .ia-faq summary::after { content:"+"; color:var(--primary); font-size:1.3rem; font-weight:400; line-height:1; }
    .ia-faq details[open] summary::after { content:"–"; }
    .ia-faq .answer { padding:0 20px 18px; color:var(--muted); font-size:0.9rem; line-height:1.65; }

    .ia-cta { background:var(--primary); color:#fff; border-radius:20px; padding:38px; text-align:center; }
    .ia-cta h2 { color:#fff; margin-bottom:10px; }
    .ia-cta p { color:rgba(255,255,255,0.9); max-width:620px; margin:0 auto 22px; }
    .ia-cta .btn { background:#fff; color:var(--primary); }
    .ia-cta .btn:hover { background:#F1F4FF; }
    .ia-cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .ia-cta .btn.ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.5); }

    .ia-maj { font-size:0.76rem; color:var(--muted); margin-top:24px; }
    .ia-prev-next { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }

    @media (max-width: 1024px) {
      .ia-layout { grid-template-columns:1fr; gap:26px; }
      .ia-aside { position:static; }
    }
    @media (max-width: 900px) {
    }
    @media (max-width: 768px) {
      /* Objectif : la barre de recherche visible sans faire defiler, sur un
         ecran de 390x844. On resserre le hero et on met de cote ce qui peut
         se lire plus bas. */
      .ia-lead-suite { display:none; }
      .ia-badge { margin-bottom:12px; padding:5px 12px; font-size:0.7rem; }
      .ia-stats { gap:18px 26px; margin-bottom:6px; }
      .ia-stats div b { font-size:1.25rem; }
      .ia-grid { grid-template-columns:1fr; gap:12px; }
      .ia-cats { grid-template-columns:1fr; }
      .ia-count { margin-left:0; width:100%; }
      .ia-chat { padding:88px 0 30px; }
      .ia-chat h1 { font-size:1.55rem; }
      .ia-chat p.lead { font-size:0.92rem; margin-bottom:18px; }
      /* Sur 390px, la pastille « IA » en marge volait 34px de largeur au
         texte : elle passe au-dessus. Et le rôle de chaque outil prend sa
         propre ligne, au lieu de se couper en plein milieu. */
      .ia-msg-ia { margin-left:0; padding:16px 18px; }
      .ia-msg-ia::before { position:static; margin-bottom:10px; }
      .ia-msg-ia .ia-etape { padding-left:12px; }
      /* Trois colonnes sur 390px seraient illisibles : elles s'empilent, la
         recommandée en premier pour qu'on la voie sans faire défiler. */
      .ia-voies { grid-template-columns:1fr; gap:8px; }
      .ia-voie.est-recommandee { order:-1; }
      .ia-etape { gap:10px; }
      .ia-etape .role { display:block; margin-top:3px; }
      .ia-msg-moi { max-width:92%; }
      /* Sur 390px, champ et bouton cote a cote laissaient 90px au champ :
         on ne voyait pas son adresse en la tapant. Ils s'empilent. */
      .ia-recap-champs { flex-direction:column; }
      /* En colonne, l'axe principal devient la verticale : le flex-basis de
         190px prevu pour la largeur s'appliquait a la HAUTEUR, et le champ
         email faisait 190px de haut. On le neutralise. */
      .ia-recap input[type="email"] { flex:0 0 auto; width:100%; }
      .ia-recap-envoi { width:100%; }
      .ia-questions li { font-size:0.9rem; }
      .ia-suggestions { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
      .ia-suggestions button { flex:0 0 auto; }
      /* Seize catégories empilées mangeaient un écran entier : on les fait
         défiler sur une ligne, comme les filtres d'une application mobile. */
      .ia-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
      .ia-chips::-webkit-scrollbar { display:none; }
      .ia-chip { flex:0 0 auto; min-height:40px; }
      /* Les vingt boutons de reponse du selecteur mesuraient 32 px de haut.
         C'est le parcours en quatre questions : on les tape, il faut pouvoir
         les viser. */
      .ia-choice { min-height:40px; }
      /* Mesure sur 390 et 360 px : le texte des trois colonnes budgetaires et
         la mention de consentement tombaient a 12,5 px. Ce sont deux contenus
         qu'on lit vraiment — l'un pour choisir sa voie, l'autre parce qu'il
         engage. Le reste de la reponse etait deja a 14 px et ne bouge pas. */
      .ia-voie p { font-size:0.84rem; }
      .ia-recap-consent { font-size:0.84rem; }
      .ia-toast { bottom:86px; }
      #annuaire { scroll-margin-top: 80px; }
      .ia-filters select { flex:1 1 calc(50% - 4px); min-width:0; }
      .ia-selector, .ia-cta { padding:22px; border-radius:16px; }
      .ia-section { padding:38px 0; }
      .ia-crumb { padding-top:88px; }
      .ia-tool-head .ia-logo { width:52px; height:52px; font-size:1.2rem; }
      .ia-cta-actions .btn { width:100%; justify-content:center; }
    }