/* =========================================================
   Index LD — styles des animations du site
   ---------------------------------------------------------
   Fichier unique. Les valeurs partagées sont déclarées une
   seule fois dans :root, sous le préfixe --ild-. Chaque bloc
   les reprend sous un nom court et n ajoute que ses propres
   mesures.

   Toutes les classes sont préfixées « ild_ » et tous les
   sélecteurs descendent de la racine de leur bloc : aucun
   conflit possible avec les styles existants du site, ni
   entre les blocs eux-mêmes.

   1. Variables communes
   2. .ild_etape_ia        — scénario automatisé en 5 étapes
   3. .ild_carte_agent_ia  — carte animée Gard & Hérault
   4. .ild_atout            — carte d argument animée (x3)
   5. .ild_verrou_ia        — principes de précaution appliqués un par un
   6. .ild_habil_ia         — droits d accès d une IA (blocs indépendants)
   7. .ild_valeur_ia        — carte de valeur, dessin animé à droite
   8. .ild_multi_ia         — trois entrées dont le son, une IA, trois sorties
   9. .ild_maquette_web     — la maquette qui s enrichit (site web)
  10. .ild_cent_sites       — la mosaïque des sites en ligne
   ========================================================= */

:root {
  /* ---------- Couleur de marque ---------- */
  --ild-accent:      #00d2bc;
  --ild-accent-dim:  rgba(0, 210, 188, 0.45);   /* traits et bordures adoucis */
  --ild-accent-soft: rgba(0, 210, 188, 0.12);   /* aplats et halos discrets   */
  --ild-accent-glow: rgba(0, 210, 188, 0.55);   /* lueurs portées             */
  --ild-danger:      #d501d5;
  /* Les deux suivantes DÉRIVENT de --ild-danger : si vous changez la
     couleur ci-dessus, reportez la nouvelle valeur rgb() ici aussi. */
  --ild-danger-dim:  rgba(213, 1, 213, 0.40);   /* liserés d alerte */
  --ild-danger-soft: rgba(213, 1, 213, 0.10);   /* aplats d alerte  */

  /* ---------- Fond et surfaces ---------- */
  --ild-bg:      #0a0f1c;
  --ild-surface: rgba(255, 255, 255, 0.035);
  --ild-border:  rgba(255, 255, 255, 0.09);

  /* ---------- Texte ---------- */
  --ild-text:      #e9eef7;
  /*--ild-text-soft: #93a0b8;*/
  --ild-text-soft: #fff;
  --ild-text-dim:  #5d6a83;

  /* ---------- Fond clair (blocs posés sur du blanc) ---------- */
  --ild-clair:           #ffffff;
  --ild-clair-border:    rgba(10, 25, 44, 0.10);
  --ild-clair-trait:     rgba(10, 25, 44, 0.12);   /* rails, traits neutres */
  --ild-clair-text:      #10192c;
  --ild-clair-text-soft: #5c6a85;
  --ild-clair-ombre:     rgba(10, 25, 44, 0.55);   /* ombres portées */

  /* ---------- Mesures ---------- */
  --ild-radius: 16px;
}

/* =========================================================
   2. BLOC — .ild_etape_ia
   Scénario automatisé en 5 étapes
   ========================================================= */

/* ---------- Racine et variables ---------- */
.ild_etape_ia {
  /* Reprise du jeu commun déclaré en section 1 */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --danger:      var(--ild-danger);
  --surface:     var(--ild-surface);
  --border:      var(--ild-border);
  --text:        var(--ild-text);
  --text-soft:   var(--ild-text-soft);
  --text-dim:    var(--ild-text-dim);
  --radius:      var(--ild-radius);

  /* Propre à ce bloc */
  --card-pad:  22px;
  --connector: 42px;   /* longueur du trait entre deux étapes */

  box-sizing: border-box;
  max-width: 760px;
  margin-inline: auto;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.ild_etape_ia *,
.ild_etape_ia *::before,
.ild_etape_ia *::after { box-sizing: border-box; }

/* ---------- En-tête ---------- */
.ild_etape_ia .ild_header { margin-bottom: clamp(28px, 5vw, 44px); }

.ild_etape_ia .ild_eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.ild_etape_ia .ild_title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ild_etape_ia .ild_lede {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 1.6;
  color: var(--text-soft);
}

/* ---------- Déroulé ---------- */
.ild_etape_ia .ild_flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ild_etape_ia .ild_step {
  position: relative;
  margin: 0;
}
.ild_etape_ia .ild_step::marker { content: none; }

/* Trait de liaison entre deux étapes, rempli par le JS */
.ild_etape_ia .ild_connector {
  position: relative;
  width: 2px;
  height: var(--connector);
  margin-left: 43px;              /* aligné sur le centre de l'icône */
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.ild_etape_ia .ild_connector_fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-dim);
  transition: height .5s ease;
}
.ild_etape_ia .ild_step.is-linked .ild_connector_fill { height: 100%; }

/* ---------- Carte d'étape ---------- */
.ild_etape_ia .ild_card {
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}

/* L'étape apparaît */
.ild_etape_ia .ild_step.is-visible .ild_card {
  opacity: 1;
  transform: none;
}

/* L'étape est en cours de traitement */
.ild_etape_ia .ild_step.is-running .ild_card {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 40px -18px var(--accent);
}

/* L'étape est terminée */
.ild_etape_ia .ild_step.is-done .ild_card {
  border-color: var(--accent-dim);
}

/* En-tête de carte */
.ild_etape_ia .ild_head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.ild_etape_ia .ild_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.ild_etape_ia .ild_icon svg {
  width: 21px;
  height: 21px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_etape_ia .ild_step.is-running .ild_icon,
.ild_etape_ia .ild_step.is-done .ild_icon {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.ild_etape_ia .ild_id { flex: 1; min-width: 0; }

.ild_etape_ia .ild_num {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /*color: var(--text-dim);*/
  color: #fff;
}

.ild_etape_ia .ild_step_title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Pastille de validation */
.ild_etape_ia .ild_status {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ild-bg);
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.ild_etape_ia .ild_status svg {
  width: 13px;
  height: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_etape_ia .ild_step.is-done .ild_status {
  opacity: 1;
  transform: none;
}

.ild_etape_ia .ild_text {
  margin: 0 0 16px;
  padding-left: 58px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---------- Zone de résultat ---------- */
.ild_etape_ia .ild_result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-height: 34px;
  margin-left: 58px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
}

.ild_etape_ia .ild_tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  flex: 1;
}

.ild_etape_ia .ild_badge {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity .4s ease;
}
.ild_etape_ia .ild_step.is-running .ild_badge,
.ild_etape_ia .ild_step.is-done .ild_badge { opacity: 1; }

.ild_etape_ia .ild_badge b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* ---------- Blocs ---------- */
.ild_etape_ia .ild_blk {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 10px -2px var(--accent-dim);
  opacity: 0;
  transform: translateY(6px) scale(.55);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.3, .4, 1),
              background .35s ease, box-shadow .35s ease;
}

/* Bloc entré dans la zone */
.ild_etape_ia .ild_blk.is-in {
  opacity: 1;
  transform: none;
}

/* Bloc retiré à l'étape de filtrage */
.ild_etape_ia .ild_blk.is-out {
  background: var(--danger);
  box-shadow: none;
  opacity: 0;
  transform: translateY(10px) scale(.4);
}

/* Bloc envoyé à l'étape finale */
.ild_etape_ia .ild_blk.is-sent {
  opacity: 0;
  transform: translate(14px, -16px) scale(.6);
}

/* Signal du déclencheur */
.ild_etape_ia .ild_signal {
  position: relative;
  width: 12px;
  height: 12px;
  margin: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.ild_etape_ia .ild_signal::before,
.ild_etape_ia .ild_signal::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  animation: ild-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.ild_etape_ia .ild_signal::after { animation-delay: .8s; }

@keyframes ild-ping {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Fin ---------- */
.ild_etape_ia .ild_outro {
  margin: 26px 0 0;
  padding-left: 58px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.ild_etape_ia .ild_outro.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   2.1 — Version ordinateur : étapes alignées en ligne
   Au-delà de 1024px, le déroulé vertical bascule en rangée :
   les cartes se placent côte à côte et les traits de liaison
   deviennent horizontaux.
   ========================================================= */
@media (min-width: 1024px) {

  .ild_etape_ia {
    --connector: clamp(18px, 2.2vw, 40px);
    max-width: 1280px;
  }

  /* Le déroulé devient une rangée, l'écart accueille les traits */
  .ild_etape_ia .ild_flow {
    display: flex;
    align-items: stretch;
    gap: var(--connector);
  }

  .ild_etape_ia .ild_step {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Trait de liaison horizontal, placé dans l'écart entre deux cartes
     pour que toutes les cartes gardent la même largeur */
  .ild_etape_ia .ild_connector {
    position: absolute;
    top: 43px;
    left: calc(var(--connector) * -1);
    width: var(--connector);
    height: 2px;
    margin: 0;
  }
  .ild_etape_ia .ild_connector_fill {
    inset: 0 auto 0 0;
    width: 0;
    height: 100%;
    transition: width .5s ease;
  }
  .ild_etape_ia .ild_step.is-linked .ild_connector_fill { width: 100%; }

  /* Cartes de hauteur égale, résultat calé en bas */
  .ild_etape_ia .ild_card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    transform: translateX(-14px);
  }
  .ild_etape_ia .ild_step.is-visible .ild_card { transform: none; }

  /* En-tête sur deux lignes : icône + validation, puis le titre */
  .ild_etape_ia .ild_head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
  }
  .ild_etape_ia .ild_icon   { order: 0; }
  .ild_etape_ia .ild_status { order: 1; margin-left: auto; }
  .ild_etape_ia .ild_id     { order: 2; flex: 1 0 100%; }

  .ild_etape_ia .ild_step_title { font-size: 15.5px; }

  /* Plus de retrait : la carte est étroite */
  .ild_etape_ia .ild_text {
    padding-left: 0;
    margin-bottom: 14px;
    font-size: 13px;
  }

  .ild_etape_ia .ild_result {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    margin-left: 0;
    margin-top: auto;
    min-height: 84px;
  }

  .ild_etape_ia .ild_tray {
    flex: none;
    width: 100%;
    gap: 5px;
  }

  .ild_etape_ia .ild_blk {
    width: 13px;
    height: 13px;
    border-radius: 3px;
  }

  .ild_etape_ia .ild_outro { padding-left: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .ild_etape_ia {
    --card-pad: 18px;
    --connector: 34px;
  }
  .ild_etape_ia .ild_connector { margin-left: 39px; }
  .ild_etape_ia .ild_text,
  .ild_etape_ia .ild_result,
  .ild_etape_ia .ild_outro {
    margin-left: 0;
    padding-left: 0;
  }
  .ild_etape_ia .ild_result { padding: 10px 12px; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_etape_ia .ild_card,
  .ild_etape_ia .ild_status,
  .ild_etape_ia .ild_connector_fill,
  .ild_etape_ia .ild_blk,
  .ild_etape_ia .ild_outro { transition-duration: .01ms; }
  .ild_etape_ia .ild_signal::before,
  .ild_etape_ia .ild_signal::after { animation: none; opacity: 0; }
}


/* =========================================================
   3. BLOC — .ild_carte_agent_ia
   Carte animée du Gard et de l Hérault
   ========================================================= */

/* ---------- Racine et variables ---------- */
.ild_carte_agent_ia {
  /* Reprise du jeu commun déclaré en section 1 */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --accent-glow: var(--ild-accent-glow);
  --text:        var(--ild-text);
  --text-soft:   var(--ild-text-soft);

  /* Propre à ce bloc */
  --terre:       rgba(0, 210, 188, 0.07);  /* remplissage des départements    */
  --accent-ring: rgba(0, 210, 188, 0.18);  /* anneau autour du point de ville */

  position: relative;   /* repère de l en-tête posé sur la carte */
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.ild_carte_agent_ia *,
.ild_carte_agent_ia *::before,
.ild_carte_agent_ia *::after { box-sizing: border-box; }

/* ---------- Titre et texte posés sur la carte ---------- */
/* Le calque couvre toute la carte ; sans décalage top/left, le titre
   se place naturellement en haut à gauche. La racine est en
   position: relative, c est elle qui sert de repère. */
.ild_carte_agent_ia .ild_titre_texte_carte {
  position: absolute;
  height: 100%;
  width: 100%;
}
.ild_carte_agent_ia .ild_titre_texte_carte h3 {
  color: var(--accent);
}
.ild_carte_agent_ia .ild_titre_texte_carte p {
  color: #333;
}

/* ---------- Cadre ---------- */
.ild_carte_agent_ia .ild_carte_cadre {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 1000 / 757);
}

.ild_carte_agent_ia .ild_carte_svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Départements ---------- */
.ild_carte_agent_ia .ild_dep {
  fill: var(--terre);
  fill-opacity: 0;
  stroke: var(--accent);
  stroke-width: 1.8px;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent-soft));
  transition: fill-opacity .9s ease .75s;
}

/* Le tracé se dessine : dasharray/dashoffset sont posés par le JS */
.ild_carte_agent_ia.is-drawn .ild_dep {
  stroke-dashoffset: 0 !important;
  fill-opacity: 1;
}
.ild_carte_agent_ia .ild_dep_herault { transition-delay: .75s; }
.ild_carte_agent_ia .ild_dep_gard    { transition-delay: 1.05s; }

/* Étiquettes de départements */
.ild_carte_agent_ia .ild_dep_label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) scale(.9);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /*color: var(--text-soft);*/
  color: #000;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.ild_carte_agent_ia.is-labelled .ild_dep_label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ild_carte_agent_ia .ild_dep_label b {
  padding: 2px 6px;
  border: 1px solid var(--accent-dim);
  border-radius: 5px;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Villes ---------- */
.ild_carte_agent_ia .ild_carte_villes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Point d'ancrage de dimension nulle, posé aux coordonnées de la ville */
.ild_carte_agent_ia .ild_ville {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

.ild_carte_agent_ia .ild_ville_point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), 0 0 14px var(--accent-glow);
  opacity: 0;
  transform: scale(.2);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1);
}
.ild_carte_agent_ia .ild_ville.is-visible .ild_ville_point {
  opacity: 1;
  transform: scale(1);
}

/* Onde qui se propage depuis la ville */
.ild_carte_agent_ia .ild_ville_halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.ild_carte_agent_ia .ild_ville.is-visible .ild_ville_halo {
  animation: ild-carte-onde 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}

/* Un jeu d images-clés a toujours une portée globale : son nom
   porte donc celui du bloc, faute de pouvoir être restreint. */
@keyframes ild-carte-onde {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { opacity: 0; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* Nom de la ville, placé à gauche ou à droite du point */
.ild_carte_agent_ia .ild_ville_nom {
  position: absolute;
  top: 50%;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 600;
  letter-spacing: -0.01em;
  /*color: var(--text);*/
  color: #666;
  /*text-shadow: 0 1px 6px rgba(0, 0, 0, .75);*/
  white-space: nowrap;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}
.ild_carte_agent_ia .ild_ville[data-cote="droite"] .ild_ville_nom {
  left: 15px;
  transform: translate(-6px, -50%);
}
.ild_carte_agent_ia .ild_ville[data-cote="gauche"] .ild_ville_nom {
  right: 15px;
  transform: translate(6px, -50%);
}
.ild_carte_agent_ia .ild_ville.is-visible .ild_ville_nom {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  .ild_carte_agent_ia .ild_ville_point,
  .ild_carte_agent_ia .ild_ville_halo {
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
  }
  .ild_carte_agent_ia .ild_ville[data-cote="droite"] .ild_ville_nom { left: 11px; }
  .ild_carte_agent_ia .ild_ville[data-cote="gauche"] .ild_ville_nom { right: 11px; }

  .ild_carte_agent_ia .ild_dep { stroke-width: 1.3px; }
  .ild_carte_agent_ia .ild_dep_label { letter-spacing: 0.1em; gap: 5px; }
  .ild_carte_agent_ia .ild_dep_label b { padding: 1px 4px; }

  .ild_carte_agent_ia .ild_titre_texte_carte {
    position: relative;
    height: auto;
  }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_carte_agent_ia .ild_dep,
  .ild_carte_agent_ia .ild_dep_label,
  .ild_carte_agent_ia .ild_ville_point,
  .ild_carte_agent_ia .ild_ville_nom { transition-duration: .01ms; }
  .ild_carte_agent_ia .ild_ville_halo { animation: none; }
}


/* =========================================================
   4. BLOC — .ild_atout
   Carte d'argument sur fond blanc : titre et texte à gauche,
   petit dessin animé à droite
   ---------------------------------------------------------
   La racine est la CARTE elle-même, pas un conteneur : chaque
   <article class="ild_atout"> est autonome et peut être collé
   seul dans un bloc Code Divi. La mise en colonnes est laissée
   à Divi.

   Principe d'animation : l'état au repos est l'état FINAL
   (tout est visible et tracé). Les images-clés partent du
   vide, font apparaître, puis reviennent au vide pour boucler.
   Si les animations sont coupées — réglage système ou JS
   absent — les dessins restent donc lisibles.

   Le rang d'apparition des éléments décalés est porté par
   --i dans le HTML : pas de :nth-of-type, dont le comptage
   porte sur le type de balise et se décale dès qu'on ajoute
   un élément dans le SVG.
   ========================================================= */

/* ---------- Conteneur FACULTATIF (démo hors Divi) ---------- */
.ild_atouts_rangee {
  display: flex;
  gap: 18px;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .ild_atouts_rangee {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---------- La carte ---------- */
.ild_atout {
  /* Reprise du jeu commun déclaré en section 1.
     Cette carte est posée sur du blanc : elle puise dans le jeu clair. */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --fond:        var(--ild-clair);
  --border:      var(--ild-clair-border);
  --trait:       var(--ild-clair-trait);
  --text:        var(--ild-clair-text);
  --text-soft:   var(--ild-clair-text-soft);
  --radius:      var(--ild-radius);

  /* Propre à ce bloc */
  --cycle:  4.2s;                      /* durée d'un tour d'animation */
  --pas:    .07;                       /* écart entre deux éléments décalés */
  --visuel: 64px;                      /* côté du dessin animé */
  --ombre:  var(--ild-clair-ombre);    /* teinte de l'ombre portée */

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;            /* cartes d'égale hauteur si la colonne en impose une */
  /*padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);*/
  background: var(--fond);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.ild_atout *,
.ild_atout *::before,
.ild_atout *::after { box-sizing: border-box; }

.ild_atout.is-active {
  /*border-color: var(--accent-dim);
  box-shadow: 0 10px 30px -20px var(--ombre);*/
}

.ild_atout .ild_atout_contenu {
  flex: 1;
  min-width: 0;
}

.ild_atout .ild_atout_titre {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ild_atout .ild_atout_texte {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

.ild_atout .ild_atout_visuel {
  flex: none;
  width: var(--visuel);
  height: var(--visuel);
  color: var(--accent);
}
.ild_atout .ild_atout_visuel svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* =========================================================
   4.1 — Confidentialité des données
   Le bouclier se trace, le boîtier paraît, l'anse descend
   et se verrouille, la serrure bat une fois.
   ========================================================= */
.ild_atout .ild_atout_bouclier {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  fill: var(--accent-soft);
}
.ild_atout.is-active .ild_atout_bouclier {
  animation: ild-atout-tracer var(--cycle) ease-in-out infinite;
}

.ild_atout .ild_atout_corps {
  fill: var(--accent-soft);
  transform-box: fill-box;
  transform-origin: center;
}
.ild_atout.is-active .ild_atout_corps {
  animation: ild-atout-surgir var(--cycle) ease-out infinite;
  animation-delay: calc(var(--cycle) * .18);
}

.ild_atout .ild_atout_anse {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.ild_atout.is-active .ild_atout_anse {
  animation: ild-atout-verrouiller var(--cycle) cubic-bezier(.3, 1.4, .4, 1) infinite;
  animation-delay: calc(var(--cycle) * .26);
}

.ild_atout .ild_atout_serrure {
  fill: var(--accent);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}
.ild_atout.is-active .ild_atout_serrure {
  animation: ild-atout-battre var(--cycle) ease-out infinite;
  animation-delay: calc(var(--cycle) * .38);
}

/* Le tracé se dessine puis s'efface */
@keyframes ild-atout-tracer {
  0%        { stroke-dashoffset: 1; }
  30%, 82%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 1; }
}

/* Apparition par mise à l'échelle */
@keyframes ild-atout-surgir {
  0%        { opacity: 0; transform: scale(.5); }
  22%, 76%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(.5); }
}

/* L'anse glisse vers le bas : le cadenas se ferme */
@keyframes ild-atout-verrouiller {
  0%        { opacity: 0; transform: translateY(-7px); }
  24%, 72%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-7px); }
}

/* Un battement bref pour signaler le verrouillage */
@keyframes ild-atout-battre {
  0%, 6%    { opacity: 0; transform: scale(0); }
  16%       { opacity: 1; transform: scale(1.6); }
  24%, 70%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(0); }
}

/* =========================================================
   4.2 — Solutions sur mesure
   Trois curseurs se règlent chacun à sa propre valeur (--v),
   dans l'ordre donné par --i.
   ========================================================= */
.ild_atout .ild_atout_rail {
  stroke: var(--trait);
  stroke-width: 3;
}

.ild_atout .ild_atout_jauge {
  stroke: var(--accent);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(var(--v));
}
.ild_atout.is-active .ild_atout_jauge {
  animation: ild-atout-regler var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--cycle) * var(--pas) * var(--i, 0));
}

.ild_atout .ild_atout_curseur {
  fill: var(--accent);
  stroke: var(--fond);
  stroke-width: 2;
  transform: translateX(calc(40px * var(--v)));
}
.ild_atout.is-active .ild_atout_curseur {
  animation: ild-atout-glisser var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--cycle) * var(--pas) * var(--i, 0));
}

@keyframes ild-atout-regler {
  0%, 8%    { transform: scaleX(0); }
  40%, 80%  { transform: scaleX(var(--v)); }
  100%      { transform: scaleX(0); }
}

@keyframes ild-atout-glisser {
  0%, 8%    { transform: translateX(0); }
  40%, 80%  { transform: translateX(calc(40px * var(--v))); }
  100%      { transform: translateX(0); }
}

/* =========================================================
   4.3 — Déploiement maîtrisé
   Les trois liens se tracent l'un après l'autre, chaque
   cible s'allume à son tour, puis la validation se dessine.
   ========================================================= */
.ild_atout .ild_atout_source {
  fill: var(--accent-soft);
}

.ild_atout .ild_atout_lien {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-width: 1.5;
  opacity: .75;
}
.ild_atout.is-active .ild_atout_lien {
  animation: ild-atout-tracer var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--cycle) * var(--pas) * var(--i, 0));
}

.ild_atout .ild_atout_cible {
  fill: var(--accent-soft);
  transform-box: fill-box;
  transform-origin: center;
}
.ild_atout.is-active .ild_atout_cible {
  animation: ild-atout-surgir var(--cycle) cubic-bezier(.3, 1.5, .4, 1) infinite;
  animation-delay: calc(var(--cycle) * .20 + var(--cycle) * var(--pas) * var(--i, 0));
}

/* La coche de validation, dessinée en dernier */
.ild_atout .ild_atout_check {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-width: 2.2;
}
.ild_atout.is-active .ild_atout_check {
  animation: ild-atout-tracer var(--cycle) ease-out infinite;
  animation-delay: calc(var(--cycle) * .42);
}

/* ---------- Petits écrans ---------- */
@media (max-width: 420px) {
  .ild_atout {
    --visuel: 52px;
    gap: 14px;
    padding: 18px;
  }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_atout,
  .ild_atout .ild_atout_bouclier,
  .ild_atout .ild_atout_corps,
  .ild_atout .ild_atout_anse,
  .ild_atout .ild_atout_serrure,
  .ild_atout .ild_atout_jauge,
  .ild_atout .ild_atout_curseur,
  .ild_atout .ild_atout_lien,
  .ild_atout .ild_atout_cible,
  .ild_atout .ild_atout_check { animation: none !important; }
}


/* =========================================================
   5. BLOC — .ild_verrou_ia
   Les principes de précaution appliqués un par un
   Les trois principes de précaution appliqués l'un après
   l'autre : une étape n'apparaît qu'une fois la précédente
   terminée, puis le cycle recommence.

   Racine autonome : ce bloc ne dépend pas de la section qui
   le porte. Famille de classes ild_vrr_, images-clés
   ild-vrr- : rien ne peut entrer en conflit.
   ========================================================= */

.ild_verrou_ia {
  /* Reprise du jeu commun */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --danger:      var(--ild-danger);
  --surface:     var(--ild-surface);
  --border:      var(--ild-border);
  --text:        var(--ild-text);
  --text-soft:   var(--ild-text-soft);
  --text-dim:    var(--ild-text-dim);
  --radius:      var(--ild-radius);

  /* Propre à ce bloc */
  --danger-soft: var(--ild-danger-soft);
  --danger-dim:  var(--ild-danger-dim);
  --lien:        38px;   /* longueur du trait entre deux étapes */

  box-sizing: border-box;
  width: 100%;
  margin: 0 0 36px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.ild_verrou_ia *,
.ild_verrou_ia *::before,
.ild_verrou_ia *::after { box-sizing: border-box; }

/* ---------- Le déroulé ---------- */
.ild_verrou_ia .ild_vrr_suite {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ild_verrou_ia .ild_vrr_etape {
  position: relative;
  margin: 0;
}
.ild_verrou_ia .ild_vrr_etape::marker { content: none; }

/* Trait de liaison, rempli par le JS */
.ild_verrou_ia .ild_vrr_lien {
  position: relative;
  width: 2px;
  height: var(--lien);
  margin-left: 40px;          /* aligné sur le centre de l'icône */
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.ild_verrou_ia .ild_vrr_lien_fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-dim);
  transition: height .45s ease;
}
.ild_verrou_ia .ild_vrr_etape.is-linked .ild_vrr_lien_fill { height: 100%; }

/* ---------- La carte d'étape ---------- */
.ild_verrou_ia .ild_vrr_carte {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}
.ild_verrou_ia .ild_vrr_etape.is-visible .ild_vrr_carte {
  opacity: 1;
  transform: none;
}
.ild_verrou_ia .ild_vrr_etape.is-running .ild_vrr_carte {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 40px -18px var(--accent);
}
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_carte {
  border-color: var(--accent-dim);
}

/* En-tête */
.ild_verrou_ia .ild_vrr_tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.ild_verrou_ia .ild_vrr_icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-dim);
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.ild_verrou_ia .ild_vrr_icone svg {
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_verrou_ia .ild_vrr_etape.is-running .ild_vrr_icone,
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_icone {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.ild_verrou_ia .ild_vrr_id { flex: 1; min-width: 0; }

.ild_verrou_ia .ild_vrr_num {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /*color: var(--text-dim);*/
  color: #fff;
}

.ild_verrou_ia .ild_vrr_titre {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ild_verrou_ia .ild_vrr_coche {
  flex: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #0a0f1c;
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.ild_verrou_ia .ild_vrr_coche svg {
  width: 12px;
  height: 12px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_coche {
  opacity: 1;
  transform: none;
}

.ild_verrou_ia .ild_vrr_texte {
  margin: 0 0 14px;
  padding-left: 54px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---------- La zone de résultat ---------- */
.ild_verrou_ia .ild_vrr_zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-height: 38px;
  margin-left: 54px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
}

.ild_verrou_ia .ild_vrr_plateau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  flex: 1;
}
.ild_verrou_ia .ild_vrr_plateau_large { min-width: 100%; }

.ild_verrou_ia .ild_vrr_note {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity .4s ease;
}
.ild_verrou_ia .ild_vrr_etape.is-running .ild_vrr_note,
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_note { opacity: 1; }

.ild_verrou_ia .ild_vrr_note b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* ---------- Étapes 01 et 02 : les accès ---------- */
/* Un accès ouvert vers l'extérieur : il est rouge tant qu'il subsiste */
.ild_verrou_ia .ild_vrr_acces {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: var(--danger);
  box-shadow: 0 0 10px -2px var(--danger);
  opacity: 0;
  transform: translateY(6px) scale(.55);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.3, .4, 1),
              background .35s ease, box-shadow .35s ease;
}
.ild_verrou_ia .ild_vrr_acces.is-in {
  opacity: 1;
  transform: none;
}
/* Accès coupé : il s'éteint et se retire */
.ild_verrou_ia .ild_vrr_acces.is-off {
  background: var(--text-dim);
  box-shadow: none;
  opacity: .25;
  transform: scale(.55);
}
/* L'accès conservé bascule au turquoise : il est sous contrôle */
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_acces.is-in:not(.is-off) {
  background: var(--accent);
  box-shadow: 0 0 10px -2px var(--accent-dim);
}

/* ---------- Étape 03 : le moteur rapatrié ---------- */
.ild_verrou_ia .ild_vrr_cadre {
  position: relative;
  display: block;
  width: 100%;
  height: 46px;
  border: 1px dashed var(--accent-dim);
  border-radius: 9px;
  background: var(--accent-soft);
}

.ild_verrou_ia .ild_vrr_cadre_nom {
  position: absolute;
  top: 5px;
  left: 9px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /*color: var(--text-dim);*/
  color: #fff;
}

/* Le moteur part de l'extérieur (à droite, hors cadre) */
.ild_verrou_ia .ild_vrr_moteur {
  position: absolute;
  top: 50%;
  left: 100%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 22px;
  margin-top: -8px;
  margin-left: 12px;
  border-radius: 6px;
  background: var(--danger);
  color: #0a0f1c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .35s ease, left .7s cubic-bezier(.4, 0, .2, 1),
              margin-left .7s cubic-bezier(.4, 0, .2, 1),
              background .5s ease .3s;
}
.ild_verrou_ia .ild_vrr_etape.is-running .ild_vrr_moteur,
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_moteur { opacity: 1; }

/* Une fois rapatrié, il se cale à l'intérieur du cadre */
.ild_verrou_ia .ild_vrr_moteur.is-dedans {
  left: 50%;
  margin-left: -16px;
  background: var(--accent);
}

/* ---------- Étape 04 : la base isolée ---------- */
.ild_verrou_ia .ild_vrr_doc {
  width: 13px;
  height: 17px;
  flex: none;
  border-radius: 2px 4px 4px 2px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(6px) scale(.6);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.3, .4, 1);
}
.ild_verrou_ia .ild_vrr_doc.is-in {
  opacity: 1;
  transform: none;
}

/* Cadenas dessiné en CSS, pas d'image ni de police externe */
.ild_verrou_ia .ild_vrr_cadenas {
  position: relative;
  width: 20px;
  height: 24px;
  flex: none;
  margin-left: 5px;
  opacity: 0;
  transition: opacity .35s ease;
}
.ild_verrou_ia .ild_vrr_etape.is-running .ild_vrr_cadenas,
.ild_verrou_ia .ild_vrr_etape.is-done .ild_vrr_cadenas { opacity: 1; }

.ild_verrou_ia .ild_vrr_corps {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent);
}

/* L'anse descend et se ferme */
.ild_verrou_ia .ild_vrr_anse {
  position: absolute;
  top: 0;
  left: 4px;
  width: 12px;
  height: 13px;
  border: 2px solid var(--accent);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  transform: translateY(-5px);
  transition: transform .45s cubic-bezier(.3, 1.5, .4, 1);
}
.ild_verrou_ia .ild_vrr_cadenas.is-ferme .ild_vrr_anse {
  transform: translateY(0);
}

/* ---------- La fin ---------- */
.ild_verrou_ia .ild_vrr_fin {
  margin: 22px 0 0;
  padding-left: 54px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.ild_verrou_ia .ild_vrr_fin.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   5.1 — Version ordinateur : les étapes passent en rangée
   ========================================================= */
@media (min-width: 900px) {
  .ild_verrou_ia {
    --lien: clamp(16px, 2vw, 34px);
  }

  .ild_verrou_ia .ild_vrr_suite {
    display: flex;
    align-items: stretch;
    gap: var(--lien);
  }

  .ild_verrou_ia .ild_vrr_etape {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Le trait se loge dans l'écart : toutes les cartes gardent
     ainsi la même largeur */
  .ild_verrou_ia .ild_vrr_lien {
    position: absolute;
    top: 40px;
    left: calc(var(--lien) * -1);
    width: var(--lien);
    height: 2px;
    margin: 0;
  }
  .ild_verrou_ia .ild_vrr_lien_fill {
    inset: 0 auto 0 0;
    width: 0;
    height: 100%;
    transition: width .45s ease;
  }
  .ild_verrou_ia .ild_vrr_etape.is-linked .ild_vrr_lien_fill { width: 100%; }

  .ild_verrou_ia .ild_vrr_carte {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    transform: translateX(-12px);
  }
  .ild_verrou_ia .ild_vrr_etape.is-visible .ild_vrr_carte { transform: none; }

  /* En-tête sur deux lignes : icône et coche, puis le titre */
  .ild_verrou_ia .ild_vrr_tete {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ild_verrou_ia .ild_vrr_icone { order: 0; }
  .ild_verrou_ia .ild_vrr_coche { order: 1; margin-left: auto; }
  .ild_verrou_ia .ild_vrr_id    { order: 2; flex: 1 0 100%; }

  .ild_verrou_ia .ild_vrr_titre { font-size: 14.5px; }

  /* Carte étroite : plus de retrait */
  .ild_verrou_ia .ild_vrr_texte {
    padding-left: 0;
    font-size: 12.5px;
  }
  .ild_verrou_ia .ild_vrr_zone {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 9px;
    margin-left: 0;
    margin-top: auto;
    min-height: 86px;
  }
  .ild_verrou_ia .ild_vrr_plateau {
    flex: none;
    width: 100%;
    gap: 6px;
  }
  .ild_verrou_ia .ild_vrr_acces { width: 15px; height: 15px; }

  .ild_verrou_ia .ild_vrr_fin { padding-left: 0; }
}

/* ---------- 5.2 Mobile ---------- */
@media (max-width: 560px) {
  .ild_verrou_ia { --lien: 30px; }
  .ild_verrou_ia .ild_vrr_lien { margin-left: 36px; }
  .ild_verrou_ia .ild_vrr_carte { padding: 16px; }
  .ild_verrou_ia .ild_vrr_texte,
  .ild_verrou_ia .ild_vrr_zone,
  .ild_verrou_ia .ild_vrr_fin {
    margin-left: 0;
    padding-left: 0;
  }
  .ild_verrou_ia .ild_vrr_zone { padding: 10px 12px; }
}

/* ---------- 5.3 Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_verrou_ia .ild_vrr_carte,
  .ild_verrou_ia .ild_vrr_coche,
  .ild_verrou_ia .ild_vrr_lien_fill,
  .ild_verrou_ia .ild_vrr_acces,
  .ild_verrou_ia .ild_vrr_doc,
  .ild_verrou_ia .ild_vrr_moteur,
  .ild_verrou_ia .ild_vrr_anse,
  .ild_verrou_ia .ild_vrr_fin { transition-duration: .01ms; }
}


/* =========================================================
   6. BLOC — .ild_habil_ia
   Les droits d'accès d'une IA
   ---------------------------------------------------------
   La racine est la CARTE elle-même : elle occupe toute la
   largeur de son conteneur et ne suppose rien autour d elle.
   Aucun parent en flex, aucun trait de liaison, aucune ligne
   de bilan : des blocs indépendants, qui s animent chacun de
   leur côté quand ils entrent dans l écran.

   Même grammaire visuelle que le scénario : la carte paraît,
   l'icône s'allume, les droits se posent un par un, la coche
   valide.
   ========================================================= */

/* ---------- La carte ---------- */
.ild_habil_ia {
  /* Reprise du jeu commun */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --danger:      var(--ild-danger);
  --danger-dim:  var(--ild-danger-dim);
  --danger-soft: var(--ild-danger-soft);
  --surface:     var(--ild-surface);
  --border:      var(--ild-border);
  --text:        var(--ild-text);
  --text-soft:   var(--ild-text-soft);
  --text-dim:    var(--ild-text-dim);
  --radius:      var(--ild-radius);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;     /* suit la colonne si celle-ci impose une hauteur */
  margin: 0 0 18px; /* écart sous le bloc — à retirer si Divi le gère */
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}

.ild_habil_ia *,
.ild_habil_ia *::before,
.ild_habil_ia *::after { box-sizing: border-box; }

/* Les trois états, portés par la carte elle-même */
.ild_habil_ia.is-visible {
  opacity: 1;
  transform: none;
}
.ild_habil_ia.is-running {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 40px -18px var(--accent);
}
.ild_habil_ia.is-done {
  border-color: var(--accent-dim);
}

/* ---------- En-tête ---------- */
.ild_habil_ia .ild_hab_tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.ild_habil_ia .ild_hab_icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-dim);
  transition: color .4s ease, border-color .4s ease, background .4s ease;
}
.ild_habil_ia .ild_hab_icone svg {
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_habil_ia.is-running .ild_hab_icone,
.ild_habil_ia.is-done .ild_hab_icone {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.ild_habil_ia .ild_hab_id { flex: 1; min-width: 0; }

.ild_habil_ia .ild_hab_num {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /*color: var(--text-dim);*/
  color: #fff;
}

.ild_habil_ia .ild_hab_titre {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ild_habil_ia .ild_hab_coche {
  flex: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #0a0f1c;
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.ild_habil_ia .ild_hab_coche svg {
  width: 12px;
  height: 12px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_habil_ia.is-done .ild_hab_coche {
  opacity: 1;
  transform: none;
}

.ild_habil_ia .ild_hab_texte {
  margin: 0 0 14px;
  padding-left: 54px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---------- Les habilitations ---------- */
.ild_habil_ia .ild_hab_zone {
  margin-left: 54px;
  margin-top: auto;      /* les droits se calent en bas de la carte */
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
}

.ild_habil_ia .ild_hab_droits {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une ligne de droit : base à gauche, verdict à droite */
.ild_habil_ia .ild_hab_droit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease;
}
.ild_habil_ia .ild_hab_droit + .ild_hab_droit {
  border-top: 1px solid var(--border);
}
.ild_habil_ia .ild_hab_droit.is-in {
  opacity: 1;
  transform: none;
}

/* La marque : coche ou croix, dessinée en CSS */
.ild_habil_ia .ild_hab_marque {
  position: relative;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  transform: scale(.4);
  transition: transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.ild_habil_ia .ild_hab_droit.is-in .ild_hab_marque { transform: none; }

.ild_habil_ia .ild_hab_droit[data-verdict="autorise"] .ild_hab_marque {
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
}
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_marque {
  border: 1px solid var(--danger-dim);
  background: var(--danger-soft);
}

/* La coche */
.ild_habil_ia .ild_hab_droit[data-verdict="autorise"] .ild_hab_marque::before {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 5.5px;
  width: 8px;
  height: 4px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

/* La croix */
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_marque::before,
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_marque::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 1.8px;
  border-radius: 1px;
  background: var(--danger);
}
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_marque::before {
  transform: rotate(45deg);
}
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_marque::after {
  transform: rotate(-45deg);
}

.ild_habil_ia .ild_hab_base {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}

.ild_habil_ia .ild_hab_verdict {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ild_habil_ia .ild_hab_droit[data-verdict="autorise"] .ild_hab_verdict {
  color: var(--accent);
  background: var(--accent-soft);
}
.ild_habil_ia .ild_hab_droit[data-verdict="interdit"] .ild_hab_verdict {
  color: var(--danger);
  background: var(--danger-soft);
}

/* ---------- 6.1 Mobile ---------- */
@media (max-width: 620px) {
  .ild_habil_ia { padding: 16px; }
  .ild_habil_ia .ild_hab_texte,
  .ild_habil_ia .ild_hab_zone {
    margin-left: 0;
    padding-left: 0;
  }
  .ild_habil_ia .ild_hab_zone { padding: 8px 12px; }

  /* Le verdict passe sous le nom de la base : sinon les deux
     se serrent et le nom se casse sur trois lignes */
  .ild_habil_ia .ild_hab_droit {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .ild_habil_ia .ild_hab_base { flex: 1 0 calc(100% - 29px); }
  .ild_habil_ia .ild_hab_verdict { margin-left: 29px; }
}

/* ---------- 6.2 Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_habil_ia,
  .ild_habil_ia .ild_hab_coche,
  .ild_habil_ia .ild_hab_droit,
  .ild_habil_ia .ild_hab_marque { transition-duration: .01ms; }
}


/* =========================================================
   7. BLOC — .ild_valeur_ia
   Une carte de valeur, dessin animé à droite du texte
   Chaque carte est autonome : elle occupe toute la largeur
   de son conteneur et ne suppose rien autour d'elle.
   ========================================================= */
.ild_valeur_ia {
  /* Reprise du jeu commun, versant clair */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --accent-glow: var(--ild-accent-glow);
  --blanc:       var(--ild-clair);
  --border:      var(--ild-clair-border);
  --trait:       var(--ild-clair-trait);
  --text:        var(--ild-clair-text);
  --text-soft:   var(--ild-clair-text-soft);
  --radius:      var(--ild-radius);
  --ombre:  var(--ild-clair-ombre);
  --panneau: rgba(10, 25, 44, 0.03);  /* fond du cadre de dessin */

  /* Propre à ce bloc */
  --cycle:  4.4s;    /* durée d'un tour de dessin */
  --visuel: 150px;   /* largeur du dessin, à droite du texte */

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  margin: 0 0 14px;   /* écart sous le bloc — à retirer si Divi le gère */
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--blanc);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}

.ild_valeur_ia *,
.ild_valeur_ia *::before,
.ild_valeur_ia *::after { box-sizing: border-box; }

.ild_valeur_ia.is-visible {
  opacity: 1;
  transform: none;
}
.ild_valeur_ia.is-active {
  border-color: var(--accent-dim);
  /*box-shadow: 0 10px 30px -22px var(--ombre);*/
  box-shadow: 2px 2px 50px rgba(0,174,157,0.3);
}

/* Le texte occupe la place restante */
.ild_valeur_ia .ild_val_contenu {
  flex: 1;
  min-width: 0;
}

/* Le cadre du dessin, à droite, de largeur fixe */
.ild_valeur_ia .ild_val_visuel {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--visuel);
  height: 96px;
  border-radius: 12px;
  background: var(--panneau);
}

.ild_valeur_ia .ild_val_titre {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ild_valeur_ia .ild_val_texte {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ---------------------------------------------------------
   7.a — Confidentialité vérifiable
   Une enceinte fermée, quatre données à l'intérieur, et un
   balayage qui les contrôle une à une sans que rien ne sorte.
   --------------------------------------------------------- */
.ild_valeur_ia[data-jeu="perimetre"] .ild_val_enceinte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: calc(100% - 18px);
  max-width: 132px;
  height: 62px;
  border: 1.5px solid var(--accent-dim);
  border-radius: 11px;
  background: var(--blanc);
  overflow: hidden;
}

.ild_valeur_ia .ild_val_donnee {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--trait);
  transition: background .3s ease, box-shadow .3s ease;
}
.ild_valeur_ia.is-active .ild_val_donnee {
  animation: ild-val-controle var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--cycle) * .09);
}

/* Le balayage de contrôle */
.ild_valeur_ia .ild_val_scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  opacity: 0;
}
.ild_valeur_ia.is-active .ild_val_scan {
  animation: ild-val-scan var(--cycle) ease-in-out infinite;
}

@keyframes ild-val-scan {
  0%        { transform: translateY(0);    opacity: 0; }
  8%        { opacity: .9; }
  46%       { transform: translateY(60px); opacity: .9; }
  56%       { transform: translateY(60px); opacity: 0; }
  100%      { transform: translateY(0);    opacity: 0; }
}

@keyframes ild-val-controle {
  0%, 12%   { background: var(--trait);  box-shadow: none; }
  30%, 74%  { background: var(--accent); box-shadow: 0 0 9px -1px var(--accent-glow); }
  100%      { background: var(--trait);  box-shadow: none; }
}

/* ---------------------------------------------------------
   7.b — Souveraineté des données
   Le lien vers le nuage lointain se coupe, le serveur qui
   reste chez vous s'allume.
   --------------------------------------------------------- */
.ild_valeur_ia[data-jeu="souverainete"] .ild_val_visuel {
  flex-direction: column;
  gap: 0;
}

.ild_valeur_ia .ild_val_nuage {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  color: var(--trait);
  transition: color .5s ease, opacity .5s ease;
}
.ild_valeur_ia .ild_val_nuage svg,
.ild_valeur_ia .ild_val_serveur svg {
  width: 100%;
  height: 100%;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ild_valeur_ia.is-active .ild_val_nuage {
  animation: ild-val-eloigne var(--cycle) ease-in-out infinite;
}

/* La liaison coupée */
.ild_valeur_ia .ild_val_liaison {
  position: relative;
  display: block;
  width: 2px;
  height: 24px;
  margin: 3px 0;
  background: linear-gradient(var(--trait) 0 55%, transparent 55% 100%);
  background-size: 2px 7px;
  background-repeat: repeat-y;
}

.ild_valeur_ia .ild_val_croix {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: var(--blanc);
  opacity: 0;
  transform: scale(.3);
}
.ild_valeur_ia.is-active .ild_val_croix {
  animation: ild-val-coupe var(--cycle) cubic-bezier(.2, 1.5, .4, 1) infinite;
}
.ild_valeur_ia .ild_val_croix::before,
.ild_valeur_ia .ild_val_croix::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 7.6px;
  width: 10px;
  height: 1.8px;
  border-radius: 1px;
  background: var(--text-soft);
}
.ild_valeur_ia .ild_val_croix::before { transform: rotate(45deg); }
.ild_valeur_ia .ild_val_croix::after  { transform: rotate(-45deg); }

.ild_valeur_ia .ild_val_serveur {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  color: var(--trait);
  transition: color .5s ease;
}
.ild_valeur_ia.is-active .ild_val_serveur {
  animation: ild-val-local var(--cycle) ease-in-out infinite;
}

@keyframes ild-val-eloigne {
  0%, 18%   { color: var(--text-soft); opacity: 1; }
  46%, 100% { color: var(--trait);     opacity: .45; }
}

@keyframes ild-val-coupe {
  0%, 22%   { opacity: 0; transform: scale(.3); }
  34%, 88%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(.3); }
}

@keyframes ild-val-local {
  0%, 34%   { color: var(--trait); }
  52%, 100% { color: var(--accent); }
}

/* ---------------------------------------------------------
   7.c — Sobriété des ressources
   La jauge ne monte que jusqu'au besoin réel et s'arrête :
   le reste de la capacité n'est pas consommé.
   --------------------------------------------------------- */
.ild_valeur_ia .ild_val_jauge {
  width: calc(100% - 16px);
  max-width: 128px;
  height: auto;
}

.ild_valeur_ia .ild_val_arc_fond,
.ild_valeur_ia .ild_val_arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.ild_valeur_ia .ild_val_arc_fond { stroke: var(--trait); }

.ild_valeur_ia .ild_val_arc {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;         /* rien de consommé au départ */
}
.ild_valeur_ia.is-active .ild_val_arc {
  animation: ild-val-jauge var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite;
}

/* L'aiguille se cale au niveau atteint */
.ild_valeur_ia .ild_val_aiguille {
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 2px;
  height: 30px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--text);
  transform-origin: 50% 100%;
  transform: rotate(-90deg);
  opacity: .75;
}
.ild_valeur_ia.is-active .ild_val_aiguille {
  animation: ild-val-aiguille var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite;
}

/* 0.55 d'offset = 45 % de l'arc tracé */
@keyframes ild-val-jauge {
  0%, 10%   { stroke-dashoffset: 1; }
  48%, 86%  { stroke-dashoffset: .55; }
  100%      { stroke-dashoffset: 1; }
}

/* -90deg = à gauche, 0deg = en haut : 45 % de la course */
@keyframes ild-val-aiguille {
  0%, 10%   { transform: rotate(-90deg); }
  48%, 86%  { transform: rotate(-9deg); }
  100%      { transform: rotate(-90deg); }
}

/* ---------- 7.1 Mobile ---------- */
@media (max-width: 560px) {
  .ild_valeur_ia {
    --visuel: 108px;
    gap: 14px;
    padding: 16px 18px;
    flex-direction: column;
  }
  .ild_valeur_ia > div {
    width: 100% !important;
  }
  .ild_valeur_ia .ild_val_visuel { height: 88px; }
  .ild_valeur_ia .ild_val_texte { font-size: 13px; }
}

/* ---------- 7.2 Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_valeur_ia { transition-duration: .01ms; }

  .ild_valeur_ia .ild_val_donnee,
  .ild_valeur_ia .ild_val_scan,
  .ild_valeur_ia .ild_val_nuage,
  .ild_valeur_ia .ild_val_croix,
  .ild_valeur_ia .ild_val_serveur,
  .ild_valeur_ia .ild_val_arc,
  .ild_valeur_ia .ild_val_aiguille { animation: none !important; }

  /* Sans mouvement, les dessins gardent un état lisible */
  .ild_valeur_ia .ild_val_arc      { stroke-dashoffset: .55; }
  .ild_valeur_ia .ild_val_aiguille { transform: rotate(-9deg); }
  .ild_valeur_ia .ild_val_croix    { opacity: 1; transform: scale(1); }
  .ild_valeur_ia .ild_val_serveur  { color: var(--accent); }
}


/* =========================================================
   8. BLOC — .ild_multi_ia
   Trois entrées dont le son, une IA, trois sorties
   Trois entrées dont le son, une IA, trois sorties.

   Toutes les liaisons sont horizontales sur ordinateur et
   verticales sur mobile : aucune diagonale, donc aucun SVG
   à recalculer, et les libellés restent du vrai texte.
   ========================================================= */
.ild_multi_ia {
  /* Reprise du jeu commun, versant clair */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --accent-glow: var(--ild-accent-glow);
  --blanc:       var(--ild-clair);
  --border:      var(--ild-clair-border);
  --trait:       var(--ild-clair-trait);
  --text:        var(--ild-clair-text);
  --text-soft:   var(--ild-clair-text-soft);
  --radius:      var(--ild-radius);

  --ombre:       var(--ild-clair-ombre);

  /* Propre à ce bloc */
  --pas: 90ms;   /* décalage entre deux médias */

  box-sizing: border-box;
  width: 100%;
  margin: 0 0 34px;
  padding: 26px 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--blanc);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: border-color .45s ease, box-shadow .45s ease;
}

/* La bordure s allume tant que l animation tourne : même traitement
   que les cartes de valeur et que les autres blocs du site. */
.ild_multi_ia.is-active {
  border-color: var(--accent-dim);
  /*box-shadow: 0 10px 30px -22px var(--ombre);*/
  box-shadow: 2px 2px 50px rgba(0,174,157,0.3);
}

.ild_multi_ia *,
.ild_multi_ia *::before,
.ild_multi_ia *::after { box-sizing: border-box; }

/* ---------- La scène ---------- */
/* Mobile d'abord : le flux descend */
.ild_multi_ia .ild_mul_scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ild_multi_ia .ild_mul_groupe {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* ---------- Un média ---------- */
.ild_multi_ia .ild_mul_media {
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--blanc);
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, 1.3, .4, 1),
              border-color .4s ease, box-shadow .4s ease;
}
.ild_multi_ia .ild_mul_media.is-in {
  opacity: 1;
  transform: none;
  border-color: var(--accent-dim);
  box-shadow: 0 6px 18px -14px var(--accent);
}

.ild_multi_ia .ild_mul_icone {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.ild_multi_ia .ild_mul_icone svg {
  width: 100%;
  height: 100%;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ild_multi_ia .ild_mul_nom {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---------- L'onde sonore ---------- */
/* Elle vit en permanence : c'est la signature du son */
.ild_multi_ia .ild_mul_onde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  height: 26px;
}
.ild_multi_ia .ild_mul_onde i {
  display: block;
  width: 2.5px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.ild_multi_ia.is-active .ild_mul_onde i {
  animation: ild-mul-onde 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 110ms);
}

@keyframes ild-mul-onde {
  0%, 100% { height: 6px; }
  50%      { height: 20px; }
}

/* ---------- Les liaisons ---------- */
.ild_multi_ia .ild_mul_traits {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 6px 0;
}

.ild_multi_ia .ild_mul_trait {
  position: relative;
  flex: 1 1 0;
  max-width: 110px;
  height: 26px;
  display: flex;
  justify-content: center;
}
/* Le rail */
.ild_multi_ia .ild_mul_trait::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--trait);
  border-radius: 2px;
}
/* Le remplissage, posé par le JS */
.ild_multi_ia .ild_mul_fill {
  position: absolute;
  top: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: height .4s ease;
}
.ild_multi_ia .ild_mul_trait.is-fill .ild_mul_fill { height: 100%; }

/* ---------- Le noyau ---------- */
.ild_multi_ia .ild_mul_noyau {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 4px 0;
  flex: none;
}

.ild_multi_ia .ild_mul_coeur {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--accent-dim);
  border-radius: 18px;
  background: var(--accent-soft);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), box-shadow .4s ease;
}
.ild_multi_ia .ild_mul_noyau.is-running .ild_mul_coeur {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 10px 30px -16px var(--accent);
}

/* L'onde qui se propage pendant le traitement */
.ild_multi_ia .ild_mul_halo {
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  opacity: 0;
}
.ild_multi_ia .ild_mul_noyau.is-running .ild_mul_halo {
  animation: ild-mul-halo 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ild-mul-halo {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- La légende ---------- */
.ild_multi_ia .ild_mul_legende {
  margin: 18px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .5s ease, transform .5s ease;
}
.ild_multi_ia .ild_mul_legende.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   8.1 — Version ordinateur : le flux passe à l'horizontale
   ========================================================= */
@media (min-width: 720px) {
  .ild_multi_ia .ild_mul_scene {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .ild_multi_ia .ild_mul_groupe {
    flex-direction: column;
    gap: 12px;
    width: auto;
    flex: 0 1 150px;
  }

  .ild_multi_ia .ild_mul_media {
    flex: none;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 14px;
  }
  .ild_multi_ia .ild_mul_groupe[data-role="sorties"] .ild_mul_media {
    flex-direction: row-reverse;
  }

  /* Les liaisons deviennent horizontales */
  .ild_multi_ia .ild_mul_traits {
    flex-direction: column;
    gap: 12px;
    width: auto;
    flex: 0 1 64px;
    padding: 0;
  }

  .ild_multi_ia .ild_mul_trait {
    flex: none;
    max-width: none;
    width: 100%;
    height: 50px;           /* la hauteur d'un média */
    align-items: center;
    justify-content: flex-start;
  }
  .ild_multi_ia .ild_mul_trait::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    margin-top: -1px;
  }
  .ild_multi_ia .ild_mul_fill {
    top: 50%;
    left: 0;
    width: 0;
    height: 2px;
    margin-top: -1px;
    transition: width .4s ease;
  }
  .ild_multi_ia .ild_mul_trait.is-fill .ild_mul_fill {
    width: 100%;
    height: 2px;
  }
  /* À la sortie, le trait part du noyau : même sens, rien à inverser */

  .ild_multi_ia .ild_mul_noyau {
    margin: 0;
  }
}

/* ---------- 8.2 Mobile ---------- */
@media (max-width: 560px) {
  .ild_multi_ia { padding: 20px 14px 16px; }
  .ild_multi_ia .ild_mul_media { padding: 10px 6px; }
  .ild_multi_ia .ild_mul_nom { font-size: 11px; }
}

/* ---------- 8.3 Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .ild_multi_ia,
  .ild_multi_ia .ild_mul_media,
  .ild_multi_ia .ild_mul_fill,
  .ild_multi_ia .ild_mul_coeur,
  .ild_multi_ia .ild_mul_legende { transition-duration: .01ms; }

  .ild_multi_ia .ild_mul_onde i,
  .ild_multi_ia .ild_mul_halo { animation: none !important; }
}


/* =========================================================
   9. BLOC — .ild_maquette_web
   La maquette qui s'enrichit
   ---------------------------------------------------------
   Une fenêtre de navigateur où la MÊME page se construit en
   quatre temps. Chaque strate s'ajoute sans effacer les
   précédentes : on voit le site grandir, du site d'une page
   à la boutique en ligne.

   Une strate apparaît en turquoise — c'est ce qui vient
   d'être ajouté — puis se fond dans le gris de la maquette.
   Seul l'ajout du moment est donc mis en avant.
   ========================================================= */
.ild_maquette_web {
  /* Reprise du jeu commun, versant clair */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --blanc:       var(--ild-clair);
  --border:      var(--ild-clair-border);
  --trait:       var(--ild-clair-trait);
  --text:        var(--ild-clair-text);
  --text-soft:   var(--ild-clair-text-soft);
  --radius:      var(--ild-radius);

  /* Propre à ce bloc */
  --lueur:   rgba(0, 174, 157, 0.30);  /* lueur du bloc actif, comme ailleurs */
  --gris:    #d8dde5;   /* les éléments de maquette une fois posés */
  --papier:  #fafbfc;   /* le fond de la page dessinée            */
  --pose:    .55s;      /* délai avant qu'une strate vire au gris */

  box-sizing: border-box;
  width: 100%;
  margin: 0 0 24px;
  padding: 20px 20px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--blanc);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: border-color .45s ease, box-shadow .45s ease;
}

.ild_maquette_web *,
.ild_maquette_web *::before,
.ild_maquette_web *::after { box-sizing: border-box; }

.ild_maquette_web.is-active {
  border-color: var(--accent-dim);
  box-shadow: 2px 2px 50px var(--lueur);
}

/* ---------- La fenêtre de navigateur ---------- */
.ild_maquette_web .ild_maq_fenetre {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ild_maquette_web .ild_maq_barre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--papier);
}

.ild_maquette_web .ild_maq_pastille {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--gris);
}

.ild_maquette_web .ild_maq_url {
  flex: 1;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: .01em;
  color: var(--text-soft);
}

/* ---------- La page dessinée ---------- */
.ild_maquette_web .ild_maq_page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  padding: 14px;
  background: var(--papier);
}

/* ---------- Le comportement commun des strates ---------- */
/* Une strate invisible garde sa place : la hauteur de la
   maquette ne bouge pas pendant les quatre temps. */
.ild_maquette_web .ild_maq_strate {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.ild_maquette_web .ild_maq_strate.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Temps 1 : l'en-tête ---------- */
.ild_maquette_web .ild_maq_entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ild_maquette_web .ild_maq_logo {
  width: 42px;
  height: 12px;
  border-radius: 3px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
.ild_maquette_web .ild_maq_entete.is-pose .ild_maq_logo { background: var(--gris); }

.ild_maquette_web .ild_maq_menu {
  display: flex;
  gap: 7px;
  margin-left: auto;
}
.ild_maquette_web .ild_maq_menu i {
  display: block;
  width: 22px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
.ild_maquette_web .ild_maq_entete.is-pose .ild_maq_menu i { background: var(--gris); }

/* ---------- Temps 1 : l'accroche ---------- */
.ild_maquette_web .ild_maq_accroche {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ild_maquette_web .ild_maq_ligne {
  width: var(--l, 60%);
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
.ild_maquette_web .ild_maq_accroche.is-pose .ild_maq_ligne { background: var(--gris); }

.ild_maquette_web .ild_maq_bouton {
  width: 64px;
  height: 17px;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
/* Le bouton d'appel reste turquoise : c'est l'action de la page */
.ild_maquette_web .ild_maq_accroche.is-pose .ild_maq_bouton { background: var(--accent-dim); }

/* ---------- Temps 2 : les sections ---------- */
.ild_maquette_web .ild_maq_sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ild_maquette_web .ild_maq_section {
  height: 40px;
  border-radius: 5px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
.ild_maquette_web .ild_maq_sections.is-pose .ild_maq_section { background: var(--gris); }

/* ---------- Temps 3 : la grille du catalogue ---------- */
.ild_maquette_web .ild_maq_grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: auto;
}

.ild_maquette_web .ild_maq_vignette {
  position: relative;
  display: block;
  height: 52px;
  border-radius: 5px;
  background: var(--accent);
  transition: background var(--pose) ease var(--pose);
}
.ild_maquette_web .ild_maq_grille.is-pose .ild_maq_vignette { background: var(--gris); }

/* ---------- Temps 4 : la boutique se greffe ---------- */
/* Le panier arrive dans l'en-tête déjà posé, et chaque vignette
   reçoit son étiquette de prix : la même page devient boutique. */
.ild_maquette_web .ild_maq_panier {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  color: var(--accent);
}
.ild_maquette_web .ild_maq_panier svg {
  width: 100%;
  height: 100%;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ild_maquette_web .ild_maq_prix {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 7px;
  border-radius: 2px;
  background: var(--blanc);
}

/* ---------- L'échelle des paliers ---------- */
.ild_maquette_web .ild_maq_paliers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Le rail qui relie les quatre puces */
.ild_maquette_web .ild_maq_paliers::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--trait);
  border-radius: 2px;
}

.ild_maquette_web .ild_maq_palier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
}
.ild_maquette_web .ild_maq_palier::marker { content: none; }

.ild_maquette_web .ild_maq_puce {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--trait);
  border-radius: 50%;
  background: var(--blanc);
  transition: border-color .35s ease, background .35s ease,
              box-shadow .35s ease, transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.ild_maquette_web .ild_maq_palier.is-in .ild_maq_puce {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 10px var(--lueur);
  transform: scale(1.15);
}

.ild_maquette_web .ild_maq_nom {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  transition: color .35s ease;
}
.ild_maquette_web .ild_maq_palier.is-in .ild_maq_nom { color: var(--text); }

/* =========================================================
   9.1 Mobile
   ========================================================= */
@media (max-width: 560px) {
  .ild_maquette_web {
    padding: 14px 14px 12px;
  }
  .ild_maquette_web .ild_maq_page {
    min-height: 210px;
    gap: 11px;
    padding: 11px;
  }
  .ild_maquette_web .ild_maq_url { font-size: 9.5px; }
  .ild_maquette_web .ild_maq_section { height: 32px; }
  .ild_maquette_web .ild_maq_vignette { height: 40px; }
  .ild_maquette_web .ild_maq_nom { font-size: 10.5px; }
  .ild_maquette_web .ild_maq_menu i { width: 16px; }
}

/* =========================================================
   9.2 Accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ild_maquette_web,
  .ild_maquette_web .ild_maq_strate,
  .ild_maquette_web .ild_maq_puce,
  .ild_maquette_web .ild_maq_nom { transition-duration: .01ms; }

  /* Sans mouvement, la maquette reste complète et grise */
  .ild_maquette_web .ild_maq_logo,
  .ild_maquette_web .ild_maq_menu i,
  .ild_maquette_web .ild_maq_ligne,
  .ild_maquette_web .ild_maq_section,
  .ild_maquette_web .ild_maq_vignette {
    background: var(--gris);
    transition: none;
  }
}


/* =========================================================
   10. BLOC — .ild_cent_sites
   La mosaïque des sites en ligne
   ---------------------------------------------------------
   Cent vignettes de site qui s'allument l'une après l'autre
   pendant que le compteur monte. Une fois la mosaïque pleine,
   les vignettes continuent de scintiller doucement, chacune à
   son rythme : c'est ce qui dit « actuellement en ligne »
   plutôt que simplement « réalisés ».

   Le bloc est posé sur un fond SOMBRE. Il puise dans le jeu
   commun versant sombre, dont les surfaces sont des blancs
   très transparents : il s'accommode donc de n'importe quelle
   teinte de fond, vert foncé compris.
   ========================================================= */
.ild_cent_sites {
  /* Reprise du jeu commun, versant sombre */
  --accent:      var(--ild-accent);
  --accent-dim:  var(--ild-accent-dim);
  --accent-soft: var(--ild-accent-soft);
  --accent-glow: var(--ild-accent-glow);
  --surface:     var(--ild-surface);
  --border:      var(--ild-border);
  --text:        var(--ild-text);
  --text-soft:   var(--ild-text-soft);

  /* Propre à ce bloc */
  --colonnes: 20;     /* 20 × 5 = 100 vignettes */
  --ecart:    6px;

  /* Ni largeur ni marge : c est le conteneur qui les porte. */
  box-sizing: border-box;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.ild_cent_sites *,
.ild_cent_sites *::before,
.ild_cent_sites *::after { box-sizing: border-box; }

/* ---------- L'en-tête chiffré ---------- */
.ild_cent_sites .ild_cent_tete {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}

.ild_cent_sites .ild_cent_compteur {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: clamp(44px, 7vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* Le « + » n'arrive qu'une fois les cent vignettes posées */
.ild_cent_sites .ild_cent_plus {
  margin-left: 4px;
  font-size: .62em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1);
}
.ild_cent_sites.is-complet .ild_cent_plus {
  opacity: 1;
  transform: none;
}

.ild_cent_sites .ild_cent_dire {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ild_cent_sites .ild_cent_libelle {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ild_cent_sites .ild_cent_statut {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity .5s ease;
}
.ild_cent_sites.is-complet .ild_cent_statut { opacity: 1; }

/* Le voyant bat en continu : le signe que ça tourne */
.ild_cent_sites .ild_cent_voyant {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.ild_cent_sites.is-complet .ild_cent_voyant::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  animation: ild-cent-battre 2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ild-cent-battre {
  0%   { transform: scale(.7); opacity: .8; }
  70%  { opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- La mosaïque ---------- */
.ild_cent_sites .ild_cent_grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  gap: var(--ecart);
}

/* Une vignette : un mini-site, barre de titre comprise */
.ild_cent_sites .ild_cent_site {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.5, .4, 1),
              border-color .3s ease, background .3s ease;
}
.ild_cent_sites .ild_cent_site i {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--border);
  transition: background .3s ease;
}

/* La vignette s'allume : le site est en ligne */
.ild_cent_sites .ild_cent_site.is-in {
  opacity: 1;
  transform: none;
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}
.ild_cent_sites .ild_cent_site.is-in i { background: var(--accent); }

/* Une fois la mosaïque pleine, chaque vignette respire à son
   propre rythme. Le décalage vient de --i, posé par le JS :
   un multiplicateur premier évite que des colonnes entières
   ne clignotent ensemble. */
.ild_cent_sites.is-vivant .ild_cent_site.is-in {
  animation: ild-cent-vie 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 137ms);
}

@keyframes ild-cent-vie {
  0%, 88%, 100% { box-shadow: none; }
  94%           { box-shadow: 0 0 9px -1px var(--accent-glow); }
}

/* =========================================================
   10.1 Mobile
   ========================================================= */
@media (max-width: 620px) {
  .ild_cent_sites {
    --colonnes: 10;   /* 10 × 10 = 100 */
    --ecart: 5px;
  }
  .ild_cent_sites .ild_cent_tete {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 18px;
  }
}

/* =========================================================
   10.2 Accessibilité
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ild_cent_sites .ild_cent_site,
  .ild_cent_sites .ild_cent_plus,
  .ild_cent_sites .ild_cent_statut { transition-duration: .01ms; }

  .ild_cent_sites .ild_cent_site,
  .ild_cent_sites .ild_cent_voyant::after { animation: none !important; }
}