/* ============================================================================
   ia-theme.css — THÈME DE LA PARTIE IA DU SITE PUBLIC (dossier /ai/)
   ============================================================================
   CONVENTION COULEURS DU SITE :
     - partie MOBILE / site historique : GRIS (css/theme-moderne.css)
     - partie IA (ce dossier /ai/)     : VIOLETS — nuit violette, violet
       néon, rose néon (maquette : screenshot « BIENVENUE / HY… » du
       04/07/2026 — ciel violet étoilé, titres néon, traînées magenta)
   Ce fichier est chargé PAR-DESSUS le thème gris via le crochet $css_extra
   du header commun (voir navig-axxa/header-niveau1-5684232.php) : le menu et
   le pied de page restent aux couleurs du site, le CONTENU passe en violet.

   Toutes les classes sont préfixées « ia- » pour ne jamais entrer en
   conflit avec le reste du site.
   Historique : palette BLEUE à la création (04/07/2026 matin), basculée en
   VIOLETS le même jour à la demande du propriétaire. Les anciennes
   variables --ia-cyan / --ia-bleu / --ia-bleu-clair ont été renommées
   --ia-neon / --ia-violet / --ia-lavande.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap');

/* ---- LA PALETTE DE VIOLETS (référence unique de la partie IA) ---- */
:root{
  --ia-nuit:#1c1c22;              /* fond le plus profond (nuit violette)    */
  --ia-panel:#24242a;             /* fond des panneaux (nuit +1)             */
  --ia-panel2:#2a2a32;            /* fond des cartes au survol / éléments    */
  --ia-piste:#3a3a44;             /* piste des curseurs (violet sombre)      */
  --ia-border:rgba(255,255,255,.18); /* bordures violet translucide          */
  --ia-neon:#e5484d;              /* ACCENT PRINCIPAL : rose néon (curseurs) */
  --ia-violet:#f07478;            /* accent secondaire : titres, liens       */
  --ia-lavande:#f0f0f0;           /* texte mis en avant (lavande claire)     */
  --ia-texte:#c0c0c8;             /* texte courant                           */
  --ia-sourdine:#8888a0;          /* texte secondaire / libellés             */
  --ia-vert:#00c853;              /* score haut / API oui                    */
  --ia-jaune:#ffc107;             /* score moyen                             */
  --ia-rouge:#f44336;             /* score bas / API non                     */
}

/* ---- CORRECTIF LAYOUT (04/07/2026) ----
   css.css (l.600) flotte #texte à gauche (layout 2 colonnes du site
   historique : texte + sidebar). Les pages IA occupent toute la largeur
   sans sidebar ni élément .textefin (clear) : le float sortait #texte du
   flux -> le <footer> remontait se peindre PAR-DESSUS les cartes (gros
   bloc vide au milieu de la page). On neutralise le float ici, portée
   limitée aux pages IA puisque cette feuille n'est chargée que par elles. */
#texte{float:none;}

/* ---- ENVELOPPE DE LA PARTIE IA ----
   Tout le contenu IA vit dans .ia-page : on y pose le fond nuit violette
   pour que la section se distingue du reste du site (gris). */
.ia-page{
  background:linear-gradient(180deg, var(--ia-nuit) 0%, #1c1c22 55%, var(--ia-nuit) 100%);
  border:1px solid var(--ia-border);
  border-radius:16px;
  padding:22px 24px 30px;
  font-family:'Space Grotesk',Arial,sans-serif;
}

/* titre : lavande claire avec halo violet/rose, comme le grand titre de
   la maquette (sélecteur #texte .ia-titre : il faut battre la règle
   « #texte h1 » du thème gris, plus spécifique qu'une simple classe) */
#texte .ia-titre,
.ia-titre{
  color:var(--m-red-soft, #f07478) !important; /* H1 en ROUGE DOUX partout (13/07/2026, demande Nicolas — même couleur que les H1 du thème gris) */
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:1px;font-size:22px;margin:4px 0 10px;
  text-shadow:none;
}
/* page BONS PLANS uniquement (.titre-bp, 12/07/2026, demande Nicolas) :
   même taille de police que le H1 des bons plans mobiles (30px) */
#texte .ia-titre.titre-bp,
.ia-titre.titre-bp{ font-size:30px; }
.ia-intro{color:var(--ia-texte);font-size:13px;line-height:1.6;margin:0 0 20px;}

/* ============================================================
   BLOC FILTRES (la maquette du screenshot)
   ============================================================ */
.ia-filtres-bloc{
  background:var(--ia-panel);
  border:1px solid var(--ia-border);
  border-radius:14px;
  padding:20px 22px 16px;
  margin:0 0 20px;
}
/* titre « >_ FILTRES » façon terminal */
.ia-filtres-titre{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ia-neon);
  margin:0 0 14px;
  display:flex;align-items:center;gap:6px;
}
.ia-filtres-titre::before{content:">_";opacity:.6;}

/* pastilles à cocher des types d'IA */
.ia-types{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.ia-types label{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;
  border:1px solid var(--ia-border);
  border-radius:20px;
  background:rgba(255,255,255,.05);
  color:#f0f0f0;font-size:12px;cursor:pointer;
  transition:all .15s;
}
.ia-types label:hover{border-color:var(--ia-neon);color:#fff;background:rgba(229,72,77,.08);}
.ia-types input[type=checkbox]{accent-color:var(--ia-neon);width:14px;height:14px;cursor:pointer;}
/* pastille allumée quand cochée */
.ia-types label:has(input:checked){border-color:var(--ia-neon);background:rgba(229,72,77,.12);color:#fff;}

/* selects éditeur / famille + bouton réinitialiser */
.ia-selects{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px;}
.ia-selects select{
  padding:7px 12px;
  border:1px solid var(--ia-border);
  border-radius:8px;
  background:var(--ia-nuit);
  color:#f0f0f0;font-size:13px;cursor:pointer;
  transition:border-color .15s;
}
.ia-selects select:hover,.ia-selects select:focus{border-color:var(--ia-neon);outline:none;color:#fff;}
.ia-selects option{background:var(--ia-nuit);}
.ia-reset{
  padding:7px 14px;color:var(--ia-violet);font-size:12px;
  border:1px solid var(--ia-border);border-radius:8px;
  background:transparent;cursor:pointer;
  text-decoration:none;transition:all .15s;font-family:inherit;
}
.ia-reset:hover{background:rgba(229,72,77,.10);border-color:var(--ia-neon);color:var(--ia-neon);}

/* ============================================================
   DOUBLE-CURSEURS (budget / contexte / score) — sans dépendance :
   deux <input type=range> superposés sur une piste dessinée.
   La partie sélectionnée (entre les 2 poignées) est peinte en rose
   néon par le JS de la page (variables --a/--b en %).
   ============================================================ */
.ia-sliders{
  display:flex;flex-wrap:wrap;gap:26px;
  padding:16px 2px 6px;
  border-top:1px solid var(--ia-border);
}
.ia-slider-grp{flex:1;min-width:200px;}
.ia-slider-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ia-sourdine);margin-bottom:6px;display:block;font-family:'Space Grotesk',sans-serif;}
.ia-slider-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--ia-sourdine);margin-bottom:8px;}
.ia-slider-vals b{color:var(--ia-neon);font-family:monospace;font-weight:700;}

.ia-range{position:relative;height:22px;}
/* la piste + la zone sélectionnée (peinte via --a et --b posés par le JS) */
.ia-range .piste{
  position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;
  background:linear-gradient(to right,
    var(--ia-piste) 0%, var(--ia-piste) var(--a,0%),
    var(--ia-neon) var(--a,0%), var(--ia-neon) var(--b,100%),
    var(--ia-piste) var(--b,100%), var(--ia-piste) 100%);
}
/* les 2 inputs range superposés : invisibles sauf leur poignée */
.ia-range input[type=range]{
  position:absolute;left:0;right:0;top:0;width:100%;height:22px;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;margin:0;
}
.ia-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:17px;height:17px;border-radius:50%;
  background:var(--ia-nuit);
  border:2.5px solid var(--ia-neon);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;margin-top:3px;
}
.ia-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;
  width:13px;height:13px;border-radius:50%;
  background:var(--ia-nuit);
  border:2.5px solid var(--ia-neon);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;
}
.ia-range input[type=range]:focus{outline:none;}
.ia-range input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(229,72,77,.2);}

/* compteur de résultats */
/* compteur de résultats : même échelle que le bouton « voir les X offres »
   du comparateur mobile (#recherchefinal : mots 25px, nombre 40px, blanc
   gras sur pastille arrondie + halo) — version violette de la partie IA */
.ia-total{
  display:table;               /* pastille ajustée au contenu, centrée */
  margin:0 auto 18px;
  padding:8px 36px;
  text-align:center;
  background:linear-gradient(135deg,var(--ia-neon) 0%,var(--ia-violet) 100%);
  color:#fff;
  border-radius:12px;
  font-size:25px;font-weight:800;
  font-family:'Space Grotesk',Arial,sans-serif;
  letter-spacing:.5px;
  box-shadow:0 4px 18px -6px rgba(229,72,77,.55);
}
.ia-total b{font-size:40px;color:#fff;vertical-align:-2px;padding-right:4px;}

/* ============================================================
   CARTES MODÈLES (une ligne-grille par modèle)
   ============================================================ */
.ia-carte{
  background:var(--ia-panel);
  border:1px solid var(--ia-border);
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 8px;
  display:grid;
  grid-template-columns: 42px 100px 1fr 160px 80px 90px 55px 120px;
  grid-template-rows:auto auto;
  gap:0 12px;
  align-items:center;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.ia-carte:hover{border-color:rgba(229,72,77,.4);box-shadow:0 4px 22px rgba(229,72,77,.10);background:var(--ia-panel2);}
.ia-carte .c-logo{grid-column:1;}
.ia-carte .c-editeur{grid-column:2;font-weight:700;color:var(--ia-violet);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.ia-carte .c-nom{grid-column:3;}
.ia-carte .c-nom strong{color:#fff;font-size:14px;display:block;line-height:1.3;}
.ia-carte .c-nom small{color:var(--ia-sourdine);font-size:11px;}
.ia-carte .c-type{grid-column:4;text-align:center;}
.ia-carte .c-prix{grid-column:5;font-family:monospace;font-size:11px;color:var(--ia-texte);text-align:right;}
.ia-carte .c-prix .pl{font-size:9px;text-transform:uppercase;color:var(--ia-sourdine);letter-spacing:.5px;display:block;}
.ia-carte .c-prix b{color:var(--ia-lavande);}
.ia-carte .c-ctx{grid-column:6;text-align:center;font-family:monospace;font-size:13px;color:var(--ia-lavande);}
.ia-carte .c-ctx small{display:block;font-size:9px;text-transform:uppercase;color:var(--ia-sourdine);letter-spacing:.5px;}
.ia-carte .c-api{grid-column:7;text-align:center;}
.ia-carte .c-abo{grid-column:8;text-align:right;font-size:12px;}
.ia-carte .c-abo strong{color:var(--ia-neon);font-size:13px;display:block;}
.ia-carte .c-abo small{color:var(--ia-sourdine);font-size:11px;}
.ia-carte .c-desc{
  grid-column:1/-1;
  font-size:12px;color:var(--ia-sourdine);
  padding-top:10px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.10);
  line-height:1.6;
}
.ia-carte .c-desc a{color:var(--ia-neon);text-decoration:none;font-size:11px;}
.ia-carte .c-desc a:hover{color:#fff;}

/* pastille logo (initiales si pas d'image) */
.ia-logo-ph{
  width:34px;height:34px;border-radius:7px;
  background:rgba(229,72,77,.07);
  border:1px solid var(--ia-border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--ia-neon);
  font-family:'Space Grotesk',sans-serif;
}
.ia-logo-img{width:34px;height:34px;border-radius:7px;object-fit:contain;background:#fff;}

/* badges type d'IA (couleur par type, lisible sur nuit violette) */
.ia-badge-type{display:inline-block;padding:3px 9px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap;}
.ia-badge-type.llm{background:rgba(229,72,77,.14);color:var(--ia-neon);}
.ia-badge-type.multimodal{background:rgba(255,215,0,.12);color:#ffd700;}
.ia-badge-type.raisonnement{background:rgba(255,255,255,.16);color:var(--ia-violet);}
.ia-badge-type.code{background:rgba(0,200,83,.12);color:var(--ia-vert);}
.ia-badge-type.abonnement{background:rgba(255,152,0,.12);color:#ff9800;}
.ia-badge-type.image{background:rgba(233,30,99,.15);color:#f06292;}
.ia-badge-type.video{background:rgba(156,39,176,.15);color:#ce93d8;}
.ia-badge-type.audio{background:rgba(0,188,212,.15);color:#00bcd4;}
.ia-badge-type.troisd{background:rgba(139,195,74,.15);color:#8bc34a;}
.ia-badge-type.plateforme{background:rgba(255,87,34,.15);color:#ff8a65;}

/* badge score (vert >=85, jaune >=70, rouge sinon) */
.ia-badge-score{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:700;font-family:monospace;}
.ia-badge-score.high{background:rgba(0,200,83,.15);color:var(--ia-vert);}
.ia-badge-score.mid{background:rgba(255,193,7,.15);color:var(--ia-jaune);}
.ia-badge-score.low{background:rgba(244,67,54,.12);color:var(--ia-rouge);}
.ia-api-badge{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:600;}
.ia-api-badge.oui{background:rgba(0,200,83,.12);color:var(--ia-vert);}
.ia-api-badge.non{background:rgba(244,67,54,.1);color:var(--ia-rouge);}

/* aucun résultat */
.ia-vide{text-align:center;color:var(--ia-sourdine);padding:60px 0;font-size:13px;letter-spacing:1px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .ia-carte{grid-template-columns:42px 1fr 120px 55px;grid-template-rows:auto auto auto;}
  .ia-carte .c-logo{grid-column:1;grid-row:1;}
  .ia-carte .c-editeur{display:none;}
  .ia-carte .c-nom{grid-column:2;grid-row:1;}
  .ia-carte .c-type{grid-column:3;grid-row:1;text-align:left;}
  .ia-carte .c-prix{grid-column:1/-1;grid-row:2;text-align:left;display:flex;gap:16px;}
  .ia-carte .c-ctx,.ia-carte .c-api,.ia-carte .c-abo{grid-column:auto;grid-row:2;text-align:left;}
  .ia-carte .c-desc{grid-row:3;}
}
@media(max-width:600px){
  .ia-page{padding:14px 12px 20px;}
  .ia-carte{grid-template-columns:1fr 1fr;}
  .ia-carte .c-logo{display:none;}
  .ia-sliders{flex-direction:column;gap:18px;}
}

/* ============================================================
   BONS PLANS IA (ai/bons-plans-ia.php, 06/07/2026)
   Cartes des modèles/abonnements IA en promotion — gabarit
   inspiré des .cadpro de bonsplansforfaits.php, aux couleurs
   de la section (nuit violette / rose néon).
   ============================================================ */
.bpia-grille{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0;}
.bpia-carte{
  flex:1 1 280px;max-width:340px;min-width:250px;
  background:var(--ia-panel);border:1px solid var(--ia-border);
  border-radius:14px;padding:18px;text-align:center;
  transition:border-color .15s, transform .15s;
}
.bpia-carte:hover{border-color:var(--ia-neon);transform:translateY(-3px);}
/* CHAPEAU ROUGE (09/07/2026, harmonisation site) : le titre devient le bandeau
   rouge en capitales en tête de carte (même gabarit que le .forti des bons
   plans mobiles et le .bpbox-titre des bons plans box). Marges négatives =
   bord à bord malgré le padding:18px ; le PHP place ce div en PREMIER dans
   la carte (avant le badge BON PLAN). */
.bpia-titre{
  margin:-18px -18px 12px;
  padding:8px 14px;
  min-height:40px;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--ia-neon);
  color:#fff;
  font-size:16px;font-weight:800;line-height:1.3;
  letter-spacing:.5px;text-transform:uppercase;
  border-radius:13px 13px 0 0;
}
.bpia-editeur{color:var(--ia-sourdine);font-size:12px;margin-bottom:10px;}
.bpia-badge{display:inline-block;background:var(--ia-neon);color:#fff;font-size:11px;
  font-weight:800;border-radius:20px;padding:2px 10px;margin-bottom:8px;letter-spacing:.5px;}
.bpia-type{display:inline-block;border:1px solid var(--ia-border);color:var(--ia-violet);
  font-size:11px;border-radius:20px;padding:2px 10px;margin-bottom:8px;}
.bpia-prix{color:var(--ia-neon);font-size:34px;font-weight:800;line-height:1;}
.bpia-prix small{font-size:13px;color:var(--ia-texte);font-weight:400;}
.bpia-barre{color:var(--ia-rouge);text-decoration:line-through;font-size:14px;margin-left:8px;}
/* tokens (contexte + inclus/mois) — pills discrets (10/07/2026) */
.bpia-tokrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;}
.bpia-tokens{display:inline-block;color:var(--ia-violet);font-size:12px;font-weight:600;
  border:1px solid var(--ia-border);border-radius:20px;padding:3px 11px;}
/* offres incluses dans l'abonnement (points_forts) */
.bpia-offres{list-style:none;margin:8px 0 2px;padding:0;}
.bpia-offres li{color:var(--ia-texte);font-size:12.5px;line-height:1.5;padding-left:16px;position:relative;}
.bpia-offres li::before{content:"\2713";position:absolute;left:0;color:var(--ia-neon);font-weight:700;}
.bpia-info{color:var(--ia-texte);font-size:12.5px;line-height:1.5;margin:10px 0;}
.bpia-fin{color:var(--ia-sourdine);font-size:11.5px;margin-bottom:12px;}
.bpia-btn{display:inline-block;background:var(--ia-neon);color:#fff !important;
  font-weight:800;font-size:13px;border-radius:10px;padding:9px 18px;text-decoration:none;}
.bpia-btn:hover{filter:brightness(1.15);color:#fff !important;}
.bpia-vide{color:var(--ia-texte);background:var(--ia-panel);border:1px dashed var(--ia-border);
  border-radius:14px;padding:26px;text-align:center;margin:22px 0;}

/* ============================================================================
   IA TESTÉE EN IMAGE (06/07/2026) — galerie de tests de modèles
   Page ai/ia-testee-en-image.php (données : table ia_test_image).
   Une carte = l'image du résultat (le mode vedette) + un texte. Grille
   responsive : cartes larges (l'image doit être lisible), 1 à 2 colonnes.
   ============================================================================ */
.iatest-grille{
  display:grid; gap:22px; margin:8px 0 4px;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
}
.iatest-carte{
  display:flex; flex-direction:column;
  background:var(--ia-panel); border:1px solid var(--ia-border);
  border-radius:16px; overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.iatest-carte:hover{ border-color:var(--ia-neon); transform:translateY(-3px); }
.iatest-imgwrap{
  background:var(--ia-nuit); border-bottom:1px solid var(--ia-border);
  line-height:0; text-align:center;
}
/* !important : les règles génériques du site « … img{max-width:100%;height:auto} »
   suffisent ici, mais on force l'affichage plein cadre et le radius interne. */
.iatest-img{
  width:100% !important; height:auto !important; max-width:100% !important;
  display:block; margin:0 auto;
}
.iatest-corps{ padding:16px 18px 18px; }
.iatest-titre{
  color:var(--ia-lavande) !important; font-family:'Space Grotesk',sans-serif;
  font-size:16px; letter-spacing:.5px; margin:0 0 8px;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.iatest-type{
  display:inline-block; border:1px solid var(--ia-border); color:var(--ia-violet);
  font-family:'Space Grotesk',Arial,sans-serif; font-size:11px; font-weight:500;
  border-radius:20px; padding:2px 10px; letter-spacing:.3px;
}
.iatest-prompt{
  color:var(--ia-sourdine); font-size:12.5px; line-height:1.5;
  font-style:italic; margin:0 0 10px;
  border-left:2px solid var(--ia-border); padding-left:10px;
}
.iatest-prompt-lbl{ color:var(--ia-violet); font-style:normal; font-weight:600; }
.iatest-texte{ color:var(--ia-texte); font-size:13.5px; line-height:1.6; }
@media (max-width:640px){
  .iatest-grille{ grid-template-columns:1fr; }
}

/* ============================================================================
   VISIONNEUSE « cliquer pour agrandir » (06/07/2026) — ai/ia-testee-en-image.php
   Overlay plein écran : fond sombre, image centrée, flèches, téléchargement, titre, compteur.
   ============================================================================ */
#iatest-lightbox{ display:none; position:fixed; z-index:9999; inset:0; }
#iatest-lightbox.iatest-lb-ouverte{ display:block; }
.iatest-lb-bg{ position:absolute; inset:0; background:rgba(0,0,0,.82); cursor:pointer; }
.iatest-lb-conteneur{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:30px; pointer-events:none;
}
/* conteneur image + titre */
.iatest-lb-visuel{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:90vw; max-height:90vh; pointer-events:auto;
  position:relative;
}
.iatest-lb-img{
  max-width:100% !important; max-height:80vh !important; width:auto !important; height:auto !important;
  border-radius:10px; box-shadow:0 0 50px rgba(0,0,0,.55); display:block;
}
.iatest-lb-titre{
  color:#e0e0e0; font-size:14px; text-align:center; line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.7); max-width:600px;
}
/* compteur */
.iatest-lb-compteur{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:13px; letter-spacing:1px; pointer-events:none;
}
/* bouton fermer × */
.iatest-lb-fermer{
  position:absolute; top:14px; right:18px; z-index:2;
  background:rgba(0,0,0,.45); border:none; color:#fff; font-size:28px;
  width:42px; height:42px; border-radius:50%; cursor:pointer; line-height:42px; text-align:center;
  transition:background .15s; pointer-events:auto;
}
.iatest-lb-fermer:hover{ background:rgba(229,72,77,.55); }
/* flèches latérales */
.iatest-lb-prev,
.iatest-lb-next{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  background:rgba(0,0,0,.4); border:none; color:#fff; font-size:40px;
  width:50px; height:80px; cursor:pointer; line-height:80px; text-align:center;
  transition:background .15s; pointer-events:auto; border-radius:6px; user-select:none;
}
.iatest-lb-prev{ left:12px; }
.iatest-lb-next{ right:12px; }
.iatest-lb-prev:hover,
.iatest-lb-next:hover{ background:rgba(229,72,77,.5); }
/* téléchargement (dans .iatest-lb-visuel position:relative) */
.iatest-lb-dl{
  position:absolute; top:10px; right:10px; z-index:3;
  background:rgba(0,0,0,.5); border:none; color:#fff; cursor:pointer; padding:10px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .15s; pointer-events:auto; text-decoration:none;
  width:48px; height:48px;
}
.iatest-lb-dl:hover{ background:rgba(229,72,77,.55); }
/* survol de l'image = indice cliquable */
.iatest-imgwrap{ cursor:pointer; }
.iatest-imgwrap:hover .iatest-img{ opacity:.85; transition:opacity .2s; }

/* ============================================================
   FORMATION IA (ai/formation-ia.php, 07/07/2026)
   Page vitrine des formations : 3 cartes programmes, bande
   « comment ça se passe », appel à l'action. Classes .fia-*.
   ============================================================ */
.fia-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0;}
.fia-carte{
  position:relative;background:var(--ia-panel);border:1px solid var(--ia-border);
  border-radius:14px;padding:22px 20px;
}
.fia-carte.fia-phare{border-color:rgba(229,72,77,.45);box-shadow:0 0 22px rgba(229,72,77,.12);}
.fia-niveau{
  position:absolute;top:14px;right:14px;padding:3px 10px;border-radius:12px;
  font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid var(--ia-border);color:var(--ia-lavande);
}
.fia-ico{font-size:30px;margin:0 0 10px;}
.fia-carte h2{
  margin:0 0 10px;font-family:'Space Grotesk',sans-serif;font-size:15px;
  color:var(--ia-lavande);letter-spacing:.5px;
}
.fia-carte p{color:var(--ia-texte);font-size:13px;line-height:1.6;margin:0 0 12px;}
.fia-carte ul{margin:0;padding:0;list-style:none;}
.fia-carte li{padding:3px 0;font-size:12.5px;color:var(--ia-texte);}
.fia-carte li::before{content:"\2713";color:var(--ia-vert);margin-right:8px;}

.fia-h2{
  margin:26px 0 12px;font-family:'Space Grotesk',sans-serif;font-size:16px;
  color:var(--ia-lavande) !important;letter-spacing:.5px;
}
.fia-bande{background:var(--ia-panel);border:1px solid var(--ia-border);border-radius:14px;padding:18px 20px;margin:20px 0;}
.fia-bande .fia-h2{margin-top:0;}
.fia-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.fia-etape b{display:block;color:var(--ia-neon);font-size:13px;margin:0 0 4px;}
.fia-etape span{font-size:12.5px;color:var(--ia-texte);line-height:1.55;}

.fia-cta{
  margin:24px 0 6px;padding:20px 22px;border-radius:14px;text-align:center;
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(229,72,77,.10));
  border:1px solid var(--ia-border);color:var(--ia-lavande);font-size:14px;
}
.fia-cta-btns{margin-top:14px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
#texte .fia-btn, .fia-btn{
  display:inline-block;padding:11px 22px;border-radius:10px;text-decoration:none;
  background:linear-gradient(45deg,#c0393e,var(--ia-neon));color:#fff !important;
  font-weight:600;font-size:13px;box-shadow:0 4px 14px rgba(229,72,77,.3);
}
#texte .fia-btn2, .fia-btn2{background:var(--ia-panel2);border:1px solid var(--ia-border);box-shadow:none;}
.fia-btn:hover{filter:brightness(1.12);}