/* Formation à l'IA : texte, encart animé et formulaire de prise de contact.
   Reprend les couleurs, la police, les boutons et les champs du site (epure.css, decouverte.css) ; aucune règle métier. */

/* ---------- Texte de présentation ---------- */
body.epure .ia-accroche { margin: 0 0 1.1rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; line-height: 1.35; color: var(--bleu); max-width: 40ch; }
body.epure .ia-formation-grille { align-items: start; }
body.epure .ia-formation-grille .ia-accroche { margin: 0; }

/* ---------- Encart (carte de type flyer) ---------- */
.formation-carte { margin-top: 2.2rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.6rem clamp(1.6rem, 4vw, 3rem); padding: clamp(1.4rem, 3.2vw, 2.4rem);
  background: var(--beige-clair); border: 1px solid var(--filet-fort); border-radius: 14px; transition: border-color .25s var(--elan); }
.formation-carte:hover { border-color: var(--bleu); }
.fc-badge { display: inline-block; width: fit-content; margin: 0 0 .9rem; padding: .35rem .8rem; border: 1px solid var(--filet-fort); border-radius: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
.fc-texte h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.15; color: var(--bleu); max-width: 20ch; }
.fc-texte p { margin: 0; color: var(--doux); max-width: 38ch; }
.fc-texte .fc-badge { margin: 0 0 .9rem; color: var(--bleu); max-width: none; }
.fc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.fc-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--filet-fort); }
.fc-points li:first-child { border-top: 0; padding-top: 0; }
.fc-points li:last-child { padding-bottom: 0; }
.fc-points .icone { grid-row: span 2; display: block; color: var(--bleu); }
.fc-points .icone svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-points b { font-size: 1.08rem; font-weight: 600; color: var(--bleu); }
.fc-points li > span:last-child { color: var(--doux); }
.fc-action { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; padding-top: 1.4rem; border-top: 1px solid var(--filet-fort); }
html:not(.js) .js-formation { display: none; }
.fc-sansjs { margin: 0; color: var(--doux); font-size: .95rem; }
html.js .fc-sansjs { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Icônes dessinées à l'arrivée de la carte, puis halo périodique du bouton : mêmes mouvements que la démonstration */
  body.trace .formation-carte:not(.vu) .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  body.trace .formation-carte.vu .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace-icone .8s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .14s + .25s) both; }
  .formation-carte .fc-action .btn { animation: appel-halo 10s ease-out 3s infinite; }
  .formation-carte .fc-action .btn::after { animation: appel-fleche 10s ease-in-out 3s infinite; }
  .formation-carte .fc-action .btn:hover, .formation-carte .fc-action .btn:focus-visible { animation: none; }
  .fc-points li .icone svg { transition: transform .3s var(--elan); }
  .fc-points li:hover .icone svg { transform: translateY(-2px); }
}

/* ---------- Formulaire (fenêtre modale) ---------- */
html.dialogue-ouverte { overflow: hidden; }
.formation-dialogue { width: min(700px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--filet-fort); border-radius: 14px; background: var(--beige-clair); color: var(--texte); overflow: hidden; }
.formation-dialogue[open] { display: flex; flex-direction: column; }
.formation-dialogue::backdrop { background: rgb(48 73 111 / .55); }
.fd-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem clamp(1.1rem, 3vw, 1.8rem) 1rem; border-bottom: 1px solid var(--filet); }
.fd-entete h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.15; color: var(--bleu); max-width: none; }
.fd-entete h2:focus { outline: none; }
.fd-fermer { flex: none; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--filet-fort); border-radius: 50%; background: var(--beige-clair); color: var(--bleu); cursor: pointer; }
.fd-fermer:hover { border-color: var(--bleu); }
.fd-fermer svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fd-corps { overflow-y: auto; padding: 1.2rem clamp(1.1rem, 3vw, 1.8rem) 1.6rem; overscroll-behavior: contain; }
.fd-intro { margin: 0 0 1rem; color: var(--doux); max-width: 60ch; }
.fd-legende { margin: 0 0 1.2rem; color: var(--doux); font-size: .9rem; }
.fd-legende abbr, .formation-dialogue .champ abbr { color: var(--erreur); text-decoration: none; }
.formation-dialogue fieldset.groupe { margin: 0 0 .4rem; padding: 0; border: 0; min-width: 0; }
.formation-dialogue fieldset.groupe > legend { padding: 0; margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 600; color: var(--bleu); }
.fd-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.fd-grille .plein { grid-column: 1 / -1; }
.formation-dialogue .champ input, .formation-dialogue .champ select, .formation-dialogue .champ textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; font: 400 1rem/1.45 var(--police); color: var(--encre); background: var(--beige-clair);
  border: 1.5px solid var(--trait-fort); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.formation-dialogue .champ textarea { resize: vertical; min-height: 6rem; }
.formation-dialogue .champ input:hover, .formation-dialogue .champ select:hover, .formation-dialogue .champ textarea:hover { border-color: var(--doux); }
.formation-dialogue .champ input:focus, .formation-dialogue .champ select:focus, .formation-dialogue .champ textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent); }
.formation-dialogue .champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ-erreur { margin: .35rem 0 0; font-size: .9rem; font-weight: 500; color: var(--erreur); }
.champ-erreur[hidden], .fd-avis[hidden], .fd-merci[hidden], .formation-dialogue form[hidden] { display: none; }
.fd-avis { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border: 1px solid var(--filet-fort); border-radius: 12px; background: var(--beige-2); color: var(--texte); font-size: .96rem; }
.fd-avis.erreur { border-color: var(--erreur); }
.fd-avis b { display: block; margin-bottom: .15rem; color: var(--bleu); }
.fd-donnees { margin: .4rem 0 1.2rem; color: var(--doux); font-size: .88rem; max-width: 62ch; }
.fd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.formation-dialogue .btn[disabled], .formation-dialogue .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.fd-merci { padding: 1rem 0 .4rem; }
.fd-merci h2 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--bleu); max-width: none; }
.fd-merci h2:focus { outline: none; }
.fd-merci p { margin: 0 0 1.2rem; color: var(--doux); max-width: 54ch; }
.fd-coche { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 50%; border: 1.5px solid var(--bleu); color: var(--bleu); }
.fd-coche svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .formation-dialogue[open] { animation: fd-entre .28s var(--elan); }
  .formation-dialogue[open]::backdrop { animation: fd-voile .28s ease-out; }
  .fd-merci:not([hidden]) .fd-coche svg path { stroke-dasharray: 1; animation: trace-icone .6s cubic-bezier(.4, 0, .2, 1) .1s both; }
  @keyframes fd-entre { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes fd-voile { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 900px) {
  .formation-carte { grid-template-columns: 1fr; }
  .fc-texte h3, .fc-texte p { max-width: none; }
}
@media (max-width: 640px) {
  .fd-grille { grid-template-columns: 1fr; }
  .formation-dialogue { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .fd-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Demandes Agent IA et Formation IA : options à cocher et champ anti-robot */
.dm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; margin-top: .3rem }
.dm-option { display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; border: 1.5px solid var(--trait); border-radius: 12px; cursor: pointer; font-weight: 500; margin: 0 }
.dm-option:hover { border-color: var(--doux) } .dm-option:has(input:checked) { border-color: var(--cadran-texte); background: color-mix(in srgb, var(--cadran) 10%, transparent) }
.dm-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px } .dm-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--cadran-texte); flex: none }
.dm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
fieldset.champ.plein legend { font-weight: 650 }