/* ============================================================
   OPTERIA : pages d'application « Bobby × [outil] » (18/10/2026, demande Axel). Première page : /connexions/digiforma.
   Déroulé de la visite guidée Dia × Google (diabrowser.com/apps/google), en DA OpterIA (Switzer, orange #FB4D17, cartes grises,
   peintures OpterIA, animations façon gleap.ai). Classes préfixées ia-… : réutilisables telles quelles pour les prochaines applications.
   Aucune ombre portée : filets de 1 px seulement (règle du 10/10/2026). Mode nuit par les variables de da-theme.css ;
   les résultats restent des fiches blanches posées sur les peintures, dans les deux modes (comme ailleurs sur le site).
   Animations (integration-app.js) : transform et opacity seulement ; rien ne bouge si l'utilisateur réduit les animations.
   ============================================================ */

.page-app { --ia-orange: #FB4D17; --ia-orange-fond: rgba(251,77,23,.1); --ia-doc: #fff; --ia-doc-encre: #1c1c1a; --ia-doc-2: #6b6b66; --ia-doc-ligne: rgba(0,0,0,.09); --ia-doux: cubic-bezier(.22,1,.36,1); }
.page-app main { display: block; }
.ia-wrap { position: relative; width: min(100% - 48px, 1000px); margin: 0 auto; }
.ia-wrap--etroit { width: min(100% - 48px, 760px); }

/* ---------- En-tête : bandeau peint qui se fond dans la page, logos côte à côte, grand titre, sous-titre orange, chapeau, trait ---------- */
.ia-hero { position: relative; margin-top: -64px; padding: 236px 0 40px; text-align: center; overflow: hidden; isolation: isolate; }
.ia-hero__ciel { position: absolute; inset: 0 0 auto; height: 300px; z-index: -1; background: url("/assets/connexions/digiforma/peinture-bandeau-creme.webp") 50% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.85) 40%, transparent 100%); mask-image: linear-gradient(#000 0%, rgba(0,0,0,.85) 40%, transparent 100%); opacity: .9; }
.ia-ariane { display: flex; width: fit-content; margin: 0 auto 34px; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.06); font-size: 13px; color: #6f6f6c; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ia-ariane a { color: #353535; text-decoration: none; }
.ia-ariane [aria-current] { color: #191919; font-weight: 500; }
.ia-ariane a:hover { color: #191919; text-decoration: underline; text-underline-offset: 3px; }
.ia-duo { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.ia-duo__logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ia-duo__logo img { display: block; width: 40px; height: 40px; object-fit: contain; }
.ia-duo__logo--bobby { background: transparent; border: 0; }
.ia-duo__logo--bobby img { width: 64px; height: 64px; border-radius: 18px; }
.ia-duo__x { font-size: 18px; color: var(--ink-3); }
.ia-titre { margin: 0 auto; font-family: var(--font); font-size: clamp(52px, 8.2vw, 112px); font-weight: 500; letter-spacing: -.045em; line-height: .96; color: var(--ink); }
.ia-ligne { display: block; overflow: hidden; padding: 0 .04em .08em; }   /* chaque ligne monte depuis sa propre fenêtre */
.ia-ligne > span { display: inline-block; }
.ia-sous { margin: 22px 0 0; font-family: var(--font); font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ia-orange); }
.ia-chapeau { max-width: 600px; margin: 26px auto 0; font-size: 18.5px; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.ia-trait { display: block; width: 64px; height: 1px; margin: 44px auto 0; background: var(--ink); transform-origin: 50% 50%; }

/* ---------- Navigation par points, fixée à gauche (un point par scène, le point lu est plein) ---------- */
.ia-points { position: fixed; left: 30px; top: 50%; z-index: 40; display: flex; flex-direction: column; gap: 4px; transform: translateY(-50%); }
.ia-point { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.ia-point span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .2; transition: opacity .3s ease, transform .4s var(--ia-doux); }
.ia-point:hover span { opacity: .5; }
.ia-point.is-actif span { opacity: 1; transform: scale(1.5); }
.ia-point:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
html.js .ia-points { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
html.js .ia-points.is-visible { opacity: 1; pointer-events: auto; }
html.js .ia-points.is-visible.is-fini { opacity: 0; pointer-events: none; }   /* plus de points une fois les scènes passées */

/* ---------- Scènes ---------- */
.ia-scene { padding: 104px 0 40px; scroll-margin-top: 40px; text-align: center; }
.ia-pastille { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 15px 6px 6px; border-radius: 999px; background: var(--paper-2); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ia-pastille__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ia-scene__titre { margin: 20px auto 0; font-family: var(--font); font-size: clamp(30px, 3.8vw, 48px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); text-wrap: balance; }

/* la carte : la peinture arrondie, la fiche blanche posée dessus (rognée en bas, comme une page qui continue), la bulle de demande qui déborde */
.ia-carte { position: relative; margin: 48px auto 0; text-align: left; }
.ia-toile { position: relative; height: 570px; border-radius: 32px; overflow: hidden; isolation: isolate; padding: 52px 64px 0; background: var(--g-150, #dbdbd2); }
.ia-peinture { position: absolute; inset: -6%; z-index: -1; background: var(--peint) var(--pos, center) / cover no-repeat; will-change: transform; }
.ia-doc { position: relative; display: grid; grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; border-radius: 14px; background: var(--ia-doc); color: var(--ia-doc-encre); border: 1px solid rgba(0,0,0,.06); }
.ia-doc--duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); max-width: none; }
.ia-doc--duo .ia-doc__titre { font-size: clamp(26px, 2.6vw, 33px); }
.ia-doc--duo .ia-doc__page { padding-right: 32px; }
.ia-doc__page { padding: 34px 38px 120px; }
.ia-doc__tete { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 26px; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b8b85; }
.ia-doc__titre { margin: 0; font-family: var(--font); font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; color: var(--ia-doc-encre); text-wrap: balance; }
.ia-doc__texte { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ia-doc-2); }
.ia-doc__texte b { font-weight: 600; color: var(--ia-doc-encre); }
.ia-doc__note { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: #8b8b85; }

/* chiffres en quatre cases, filets fins */
.ia-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 0; border: 1px solid var(--ia-doc-ligne); border-radius: 10px; }
.ia-chiffres div { padding: 11px 12px; }
.ia-chiffres div + div { border-left: 1px solid var(--ia-doc-ligne); }
.ia-chiffres dt { order: 2; font-size: 11px; color: var(--ia-doc-2); }
.ia-chiffres dd { margin: 0 0 2px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--ia-doc-encre); font-variant-numeric: tabular-nums; }
.ia-chiffres dd small { font-size: 13px; font-weight: 500; color: var(--ia-doc-2); }
.ia-chiffres div { display: flex; flex-direction: column-reverse; }

/* états : orange pour ce qui attend votre accord, encre pour ce qui est fait */
.ia-etat { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ia-etat--attente { background: var(--ia-orange-fond); color: #c2370c; }
.ia-etat--attente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ia-orange); }
.ia-etat--fait { background: #f1f1ed; color: #3a3a37; }
.ia-etat--fait::before { content: "✓"; font-size: 11px; color: #3a3a37; }

/* lignes (relances) */
.ia-lignes, .ia-etapes, .ia-pile, .ia-indic { list-style: none; margin: 20px 0 0; padding: 0; }
.ia-lignes li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--ia-doc-ligne); font-size: 13.5px; }
.ia-lignes__nom { font-weight: 600; }
.ia-lignes__info { color: var(--ia-doc-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* étapes cochées (inscription) */
.ia-etapes li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ia-doc-ligne); }
.ia-etapes__coche { width: 20px; height: 20px; border-radius: 50%; background: var(--ia-doc-encre); position: relative; }
.ia-etapes__coche::after { content: ""; position: absolute; left: 6.5px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.ia-etapes li:has(.ia-etat--attente) .ia-etapes__coche { background: var(--ia-orange); }
.ia-etapes li:has(.ia-etat--attente) .ia-etapes__coche::after { left: 5px; top: 9px; width: 10px; height: 0; border-width: 0 0 1.8px; transform: none; }
.ia-etapes__txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ia-etapes__txt b { font-weight: 600; }
.ia-etapes__txt small { font-size: 12px; color: var(--ia-doc-2); }

/* pile de stagiaires (convocations) */
.ia-pile li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ia-doc-ligne); font-size: 14px; font-weight: 500; }
.ia-pile li .ia-etat { margin-left: auto; }
.ia-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f1f1ed; font-size: 11px; font-weight: 600; color: #55554f; }
.ia-pile__plus { color: var(--ia-doc-2); font-weight: 400 !important; font-size: 13px !important; }

/* indicateurs Qualiopi (audit) */
.ia-indic li { display: grid; grid-template-columns: 34px 1fr 90px auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--ia-doc-ligne); font-size: 13.5px; }
.ia-indic__n { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; background: #f1f1ed; font-family: var(--font); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #55554f; }
.ia-indic__txt { display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.ia-indic__txt small { font-weight: 400; font-size: 12px; color: #c2370c; }
.ia-jauge { position: relative; height: 4px; border-radius: 4px; background: #ececE7; overflow: hidden; }
.ia-jauge i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--ia-doc-encre); transform-origin: 0 50%; }
.is-manque .ia-jauge i { background: var(--ia-orange); }

/* volet de droite : le brouillon, sur un gris très clair (comme une seconde feuille) */
.ia-doc__volet { padding: 34px 30px 120px; border-left: 1px solid var(--ia-doc-ligne); background: #fafaf8; border-radius: 0 14px 14px 0; }
.ia-volet__lab { margin: 0 0 14px; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b8b85; }
.ia-mail { padding: 18px 20px; border-radius: 12px; background: #fff; border: 1px solid var(--ia-doc-ligne); font-size: 13.5px; line-height: 1.55; color: #3a3a37; }
.ia-mail p { margin: 0 0 9px; }
.ia-mail p:last-child { margin: 0; }
.ia-mail__objet { padding-bottom: 10px; margin-bottom: 12px !important; border-bottom: 1px solid var(--ia-doc-ligne); font-weight: 600; color: var(--ia-doc-encre); }
.ia-volet__actions { display: flex; gap: 8px; margin: 16px 0 0; }
.ia-bouton { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; background: #191919; color: #fff; font-size: 13px; }
.ia-bouton--clair { background: #ececE7; color: #191919; }
.ia-pj { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.ia-pj span { padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--ia-doc-ligne); font-size: 12px; color: #55554f; }
.ia-pj span::before { content: "📎"; display: none; }

/* la bulle : votre demande en langage naturel, posée en bas de la carte et qui déborde */
.ia-demande { position: absolute; left: 50%; bottom: -56px; z-index: 2; width: min(100% - 96px, 780px); padding: 20px 22px 14px; border-radius: 18px; background: #fff; color: #191919; border: 1px solid rgba(0,0,0,.1); transform: translateX(-50%); }
.ia-demande__txt { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; min-height: 1.45em; }
.ia-demande__outils { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); font-size: 14px; color: #6b6b66; }
.ia-demande__logos { flex: none; display: inline-flex; gap: 6px; }
.ia-demande__logos img { width: 20px; height: 20px; object-fit: contain; }
.ia-curseur { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--ia-orange); animation: ia-clignote 1s steps(1) infinite; }
@keyframes ia-clignote { 50% { opacity: 0; } }

.ia-explique { max-width: 560px; margin: 104px auto 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }

/* ---------- Questions ---------- */
.ia-faq { padding: 140px 0 20px; }
.ia-faq__titre { margin: 0 0 22px; text-align: center; font-family: var(--font); font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -.035em; color: var(--ink); }
.ia-faq .faq__item:first-child { border-top: 1px solid var(--line); }
.ia-faq .faq__a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fin : encadré gris, Bobby qui salue, bouton, liens de retour, mention de marque ---------- */
.ia-fin { padding: 120px 0 120px; text-align: center; }
.ia-fin__encadre { position: relative; padding: 40px 32px 38px; border-radius: 24px; background: var(--paper-2); }
.ia-fin__bobby { display: block; width: 92px; height: auto; margin: -96px auto 10px; }
.ia-fin__titre { margin: 0; font-family: var(--font); font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -.035em; color: var(--ink); }
.ia-fin__txt { margin: 10px 0 0; font-size: 16px; color: var(--ink-2); }
.btn.ia-fin__cta { margin-top: 56px; height: 56px !important; padding: 0 44px !important; font-size: 17px !important; }
.ia-fin__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 28px 0 0; font-size: 15px; color: var(--ink-3); }
.ia-fin__liens a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.ia-fin__liens a:hover { text-decoration-color: currentColor; }
.ia-fin__mention { max-width: 520px; margin: 34px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ---------- Une seule police sur ces pages, celle du site (demande Axel, 18/10/2026) : même le bandeau cookies et les numéros du menu, partagés, passent en Switzer ici ---------- */
.page-app :is(.mesure__eyebrow, .pil__badge-no) { font-family: var(--font); font-weight: 500; }

/* ---------- Mode nuit : la page passe en gris superposés, les fiches et la bulle restent blanches sur les peintures ---------- */
html[data-theme="nuit"] .ia-hero__ciel { opacity: .55; }
html[data-theme="nuit"] .ia-duo__logo { background: #fff; border-color: transparent; }
html[data-theme="nuit"] .ia-duo__logo--bobby { background: transparent; }
html[data-theme="nuit"] .ia-trait { background: rgba(255,255,255,.6); }
html[data-theme="nuit"] .ia-point span { background: #fff; }
html[data-theme="nuit"] .ia-pastille__n { background: #fff; color: #141414; }
html[data-theme="nuit"] .ia-toile { background: #2a2a2a; }
html[data-theme="nuit"] .ia-sous { color: #FF8A5C; }
html[data-theme="nuit"] .ia-fin__liens a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }

/* ---------- Animations d'apparition (integration-app.js ajoute .is-in) : seulement si le JS tourne et que les animations sont permises ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .ia-a { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ia-doux), transform 1.1s var(--ia-doux); transition-delay: calc(var(--i, 0) * 110ms + 80ms); }
  html.js .ia-ligne > .ia-a { transform: translateY(105%); opacity: 1; }
  html.js .ia-trait.ia-a { transform: scaleX(0); opacity: 1; }
  html.js .ia-hero.is-in .ia-a { opacity: 1; transform: none; }

  html.js .ia-scene .ia-pastille, html.js .ia-scene .ia-scene__titre, html.js .ia-scene .ia-explique { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ia-doux), transform 1s var(--ia-doux); }
  html.js .ia-scene .ia-scene__titre { transition-delay: .08s; }
  html.js .ia-scene .ia-toile { clip-path: inset(6% 4% 0 4% round 32px); transition: clip-path 1.2s var(--ia-doux); }
  html.js .ia-scene .ia-doc { opacity: 0; transform: translateY(70px); transition: opacity .9s var(--ia-doux) .25s, transform 1.2s var(--ia-doux) .25s; }
  html.js .ia-scene .ia-demande { opacity: 0; transform: translate(-50%, 24px) scale(.97); transition: opacity .7s var(--ia-doux) .1s, transform .9s var(--ia-doux) .1s; }
  html.js .ia-scene .ia-demande__outils { opacity: 0; transition: opacity .5s ease; }
  html.js .ia-scene.is-in .ia-pastille, html.js .ia-scene.is-in .ia-scene__titre { opacity: 1; transform: none; }
  html.js .ia-scene.is-in .ia-toile { clip-path: inset(0 0 0 0 round 32px); }
  html.js .ia-scene.is-in .ia-demande { opacity: 1; transform: translate(-50%, 0); }
  html.js .ia-scene.is-tape .ia-demande__outils { opacity: 1; }
  html.js .ia-scene.is-tape .ia-doc { opacity: 1; transform: none; }
  html.js .ia-scene.is-tape .ia-explique { opacity: 1; transform: none; transition-delay: .5s; }
  /* le résultat se remplit ligne après ligne une fois la demande tapée */
  html.js .ia-scene :is(.ia-chiffres > div, .ia-lignes li, .ia-etapes li, .ia-pile li, .ia-indic li, .ia-mail, .ia-volet__actions, .ia-pj) { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ia-doux), transform .7s var(--ia-doux); transition-delay: calc(var(--k, 0) * 90ms + .55s); }
  html.js .ia-scene.is-tape :is(.ia-chiffres > div, .ia-lignes li, .ia-etapes li, .ia-pile li, .ia-indic li, .ia-mail, .ia-volet__actions, .ia-pj) { opacity: 1; transform: none; }
  html.js .ia-scene .ia-jauge i { transform: scaleX(0); transition: transform 1.1s var(--ia-doux); transition-delay: calc(var(--k, 0) * 90ms + .8s); }
  html.js .ia-scene.is-tape .ia-jauge i { transform: none; }

  html.js .ia-faq .ia-faq__titre, html.js .ia-faq .faq, html.js .ia-fin .ia-wrap > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ia-doux), transform 1s var(--ia-doux); }
  html.js .ia-fin .ia-wrap > :nth-child(2) { transition-delay: .12s; } html.js .ia-fin .ia-wrap > :nth-child(n+3) { transition-delay: .22s; }
  html.js .ia-faq.is-in .ia-faq__titre, html.js .ia-faq.is-in .faq, html.js .ia-fin.is-in .ia-wrap > * { opacity: 1; transform: none; }
  html.js .ia-faq .faq { transition-delay: .1s; }
  html.js .ia-fin .ia-fin__bobby { transform: translateY(16px) rotate(-6deg); transition: transform 1s cubic-bezier(.3,1.5,.5,1) .3s; }
  html.js .ia-fin.is-in .ia-fin__bobby { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-curseur { animation: none; display: none; }
  .ia-point span, .ia-points { transition: none !important; }
}

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1100px) { .ia-points { left: 14px; } }
@media (max-width: 900px) {
  .ia-points { display: none; }
  .ia-toile { padding: 40px 32px 0; }
  .ia-doc--duo { grid-template-columns: 1fr; }
  .ia-doc--duo .ia-doc__volet { display: none; }
  .ia-doc--duo { max-width: 640px; }
}
@media (max-width: 640px) {
  .ia-wrap, .ia-wrap--etroit { width: calc(100% - 32px); }
  .ia-hero { padding: 172px 0 16px; }
  .ia-hero__ciel { height: 220px; }
  .ia-ariane { margin-bottom: 28px; }
  .ia-duo { gap: 14px; margin-bottom: 24px; }
  .ia-duo__logo { width: 54px; height: 54px; border-radius: 15px; }
  .ia-duo__logo img { width: 34px; height: 34px; }
  .ia-duo__logo--bobby img { width: 54px; height: 54px; border-radius: 15px; }
  .ia-titre { font-size: clamp(46px, 13.5vw, 64px); }
  .ia-sous { font-size: 21px; margin-top: 16px; }
  .ia-chapeau { font-size: 16.5px; margin-top: 18px; }
  .ia-trait { margin-top: 34px; }
  .ia-scene { padding: 76px 0 24px; }
  .ia-pastille { font-size: 11px; letter-spacing: .1em; }
  .ia-scene__titre { font-size: 31px; margin-top: 16px; }
  .ia-carte { margin-top: 30px; }
  /* téléphone : la fiche n'est plus rognée, la bulle la chevauche juste en dessous */
  .ia-toile { height: auto; padding: 24px 14px 74px; border-radius: 24px; }
  html.js .ia-scene .ia-toile { clip-path: inset(3% 3% 0 3% round 24px); }
  html.js .ia-scene.is-in .ia-toile { clip-path: inset(0 0 0 0 round 24px); }
  .ia-doc__page { padding: 22px 20px 22px; }
  .ia-doc__tete { font-size: 9.5px; margin-bottom: 18px; }
  .ia-doc__tete span:last-child { display: none; }
  .ia-doc__titre { font-size: 26px; }
  .ia-doc__texte { font-size: 13.5px; }
  .ia-cache-mobile { display: none !important; }
  .ia-chiffres { grid-template-columns: repeat(2, 1fr); }
  .ia-chiffres div:nth-child(3) { border-left: 0; }
  .ia-chiffres div:nth-child(n+3) { border-top: 1px solid var(--ia-doc-ligne); }
  .ia-lignes li { grid-template-columns: 1fr auto; }
  .ia-lignes__info { grid-column: 1; grid-row: 2; white-space: normal; }
  .ia-lignes .ia-etat { grid-column: 2; grid-row: 1 / span 2; }
  .ia-indic li { grid-template-columns: 30px 1fr auto; gap: 10px; }
  .ia-indic .ia-jauge { display: none; }
  .ia-demande { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 12px 0; padding: 16px 16px 12px; border-radius: 16px; transform: none; }
  html.js .ia-scene .ia-demande { transform: translateY(20px) scale(.97); }
  html.js .ia-scene.is-in .ia-demande { transform: none; }
  .ia-demande__txt { font-size: 16.5px; }
  .ia-demande__outils { font-size: 12.5px; gap: 8px; }
  .ia-explique { margin-top: 36px; font-size: 15.5px; }
  .ia-faq { padding-top: 96px; }
  .ia-fin { padding: 110px 0 90px; }
  .ia-fin__encadre { padding: 34px 20px 30px; }
  .btn.ia-fin__cta { margin-top: 40px; }
  .ia-fin__liens { flex-direction: column; align-items: center; }
  .ia-fin__liens > span { display: none; }
}

/* ---------- Fin de page façon Dia (demande Axel 18/10) : tuiles inclinées, grand titre, bouton pilule ---------- */
.ia-fin { padding: 140px 0 120px; }
.ia-fin__tuiles { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 56px; }
.ia-tuile { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
.ia-tuile img { width: 40px; height: 40px; object-fit: contain; }
.ia-tuile--encre { background: #1A1813; --r: -12deg; --y: 14px; }
.ia-tuile--ciel { background: #8fdcfb; --r: 6deg; --y: -18px; }
.ia-tuile--lilas { background: #ebc8fb; --r: -5deg; --y: -6px; }
.ia-tuile--peche { background: #fdd2a6; --r: 9deg; --y: 10px; }
.ia-fin .ia-fin__titre { max-width: 860px; margin: 0 auto; font-size: clamp(40px, 6.4vw, 84px); font-weight: 500; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.ia-fin .ia-fin__txt { margin: 22px 0 0; font-size: 17px; }
.btn.ia-fin__cta { margin-top: 36px; }
html[data-theme="nuit"] .ia-fin .ia-fin__titre { color: #fff; }
html[data-theme="nuit"] .ia-tuile--encre { background: #fff; }
html[data-theme="nuit"] .ia-tuile--encre img { filter: invert(1); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ia-fin .ia-tuile { opacity: 0; transform: rotate(0deg) translateY(30px) scale(.7); transition: opacity .6s var(--ia-doux), transform .9s cubic-bezier(.3,1.5,.5,1); }
  html.js .ia-fin .ia-tuile:nth-child(2) { transition-delay: .08s; } html.js .ia-fin .ia-tuile:nth-child(3) { transition-delay: .16s; } html.js .ia-fin .ia-tuile:nth-child(4) { transition-delay: .24s; }
  html.js .ia-fin.is-in .ia-tuile { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)); }
  .ia-tuile:hover { transform: rotate(0deg) translateY(calc(var(--y) - 6px)) !important; transition: transform .35s var(--ia-doux) !important; }
}
@media (max-width: 720px) {
  .ia-fin { padding: 100px 0 90px; }
  .ia-fin__tuiles { gap: 10px; margin-bottom: 40px; }
  .ia-tuile { width: 54px; height: 54px; border-radius: 15px; }
  .ia-tuile img { width: 32px; height: 32px; }
}