/* ========== Attentes et transitions (dessin du 2 novembre 2026, artefact « Attentes et transitions ») ==========
   Feuille dédiée, chargée par les pages qui attendent (diagnostic.html, espace-agence.html, retrouver-mon-rapport,
   mon-partage-agence, mon-appel-architecte, partenaire-fiche, l'onglet du PDF) après dt.css, dont elle lit les jetons :
   aucune couleur en dur. Le JavaScript commun est dans attentes.js.
   Priorité 1 du brief « Attentes du site » : bouton et enveloppe de l'étape 5, arrivée du rapport, onglet du PDF,
   squelette de l'espace agence. Priorité 2 : boutons d'envoi et tampon « Envoyé », lien des entreprises partenaires,
   recherches de l'étape 1. */

/* ---------- Écran à étapes : frise, étapes, pastilles, feuille ----------
   Déplacés de diagnostic.css sans changement : l'écran de préparation du rapport (diagnostic.css) et l'écran à étapes
   court (.at-etapes, plus bas) les partagent, et la feuille du formulaire est coupée quand le rapport s'affiche. */
.dg-prep-frise { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
.dg-prep-frise span { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dt-surface-alt-2); }
.dg-prep-frise span[data-etat="fait"] { background: var(--dt-ink); }
.dg-prep-frise span[data-etat="encours"]::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 4px; background: var(--dt-accent); animation: dg-prep-glisse 1.1s var(--ease) infinite; }
@keyframes dg-prep-glisse { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.dg-prep-etapes { list-style: none; margin: 20px 0 0; padding: 0; }
.dg-prep-etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 12px 0; transition: opacity 240ms var(--ease); }
.dg-prep-etapes li + li { border-top: 2px dotted var(--dt-surface-alt-2); }
.dg-prep-pastille { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px 14px 11px 15px; background: var(--dt-surface-alt); color: var(--dt-ink-3); font: 800 18px/1 var(--display); }
.dg-prep-pastille svg { width: 24px; height: 24px; }
.dg-prep-etapes h2 { font: 800 19px/1.2 var(--display); letter-spacing: -0.015em; }
.dg-prep-etapes p { margin-top: 2px; font-size: 15px; color: var(--dt-ink-2); }
.dg-prep-etapes li[data-etat="attente"] { opacity: 0.55; }
.dg-prep-etapes li[data-etat="attente"] p { visibility: hidden; }
.dg-prep-etapes li[data-etat="encours"] .dg-prep-pastille { background: var(--dt-paper); color: var(--dt-accent); box-shadow: 0 0 0 2px var(--dt-ink), 3px 3px 0 var(--dt-shadow); }
.dg-prep-etapes li[data-etat="encours"] .dg-prep-pastille svg { animation: dg-tourne 1s linear infinite; }
.dg-prep-etapes li[data-etat="fait"] .dg-prep-pastille { background: var(--dt-ink); color: var(--dt-paper); animation: dg-prep-tampon 260ms var(--ease); }
@keyframes dg-prep-tampon { 0% { transform: scale(0.7); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.dg-prep-feuille [data-phase] { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.dg-prep-feuille [data-phase].vu { opacity: 1; transform: none; }
.dg-prep-barre { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 700ms var(--ease); }
.dg-prep-feuille .vu .dg-prep-barre { transform: scaleX(1); }
.dg-prep-colonne { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); transition: transform 700ms var(--ease) 120ms; }
.dg-prep-feuille .vu .dg-prep-colonne { transform: scaleY(1); }

/* Classes préfixées at-. Chaque animation part d'un état final lisible : en mouvement réduit, tout s'arrête et se
   comprend. Paliers : rien sous 0,4 s ; de 0,4 à 1 s, l'état du bouton seul ; au-delà de 1 s, un élément qui raconte,
   affiché au moins 600 ms ; au-delà de 7 s, une phrase de patience. */

/* ---------- Commun : phrase de patience, apparition posée ---------- */
.at-patience { margin-top: var(--esp-4); padding: 14px 16px; border-radius: var(--r-control); background: var(--dt-surface-alt); font-size: 16px; line-height: 1.45; color: var(--dt-ink); }
@keyframes at-pose { from { opacity: 0; transform: translateY(-10px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .at-patience { animation: at-pose 280ms var(--ease) both; }
}
/* Un bloc caché par l'attribut hidden le reste, quel que soit son display */
.at-patience[hidden], .at-envoi[hidden], .at-echec[hidden], .at-confirme[hidden], .at-tampon[hidden], .at-pdf-actions[hidden] { display: none; }

/* ---------- 1. Bouton en attente ----------
   Les deux libellés sont empilés dans la même case : la largeur est celle du plus long, elle ne bouge jamais.
   Bloqué dès le clic (aria-disabled), visible en attente à 0,4 s (aria-busy), au moins 400 ms une fois visible. */
.at-bouton-pile { display: grid; }
.at-bouton-pile > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.at-bouton-attente { visibility: hidden; }
.at-bouton[aria-busy="true"] .at-bouton-repos { visibility: hidden; }
.at-bouton[aria-busy="true"] .at-bouton-attente { visibility: visible; }
.at-bouton[aria-disabled="true"] { cursor: progress; }
.btn.at-bouton[aria-busy="true"], .btn.at-bouton[aria-busy="true"]:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--dt-action-shadow); }
.btn-2.at-bouton[aria-busy="true"] { background: var(--dt-surface-alt); }
/* Troisième couche, facultative : le délai avant un nouvel envoi (« Nouvel envoi possible dans 30 s »), data-at-delai */
.at-bouton-delai { visibility: hidden; font-variant-numeric: tabular-nums; }
.at-bouton[data-at-delai]:not([aria-busy="true"]) .at-bouton-repos { visibility: hidden; }
.at-bouton[data-at-delai]:not([aria-busy="true"]) .at-bouton-delai { visibility: visible; }
/* Le signe : trois languettes de papier qui sautent tour à tour (la languette du logo) */
.at-signe { display: inline-flex; align-items: flex-end; gap: 4px; height: 16px; }
.at-signe i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .at-signe i { animation: at-saute 900ms var(--ease) infinite; }
  .at-signe i:nth-child(2) { animation-delay: 150ms; }
  .at-signe i:nth-child(3) { animation-delay: 300ms; }
  @keyframes at-saute { 0%, 60%, 100% { transform: translateY(0) rotate(-6deg); } 30% { transform: translateY(-7px) rotate(8deg); } }
}

/* ---------- 1 bis. L'envoi de la demande (étape 5) : l'enveloppe ----------
   data-etat="attend" : enveloppe ouverte, la feuille du rapport attend au-dessus (montrée à 1 s si le serveur n'a pas
   répondu). data-etat="part" : la réponse est arrivée, la feuille entre, le rabat se ferme, l'enveloppe s'envole. */
.at-envoi { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--esp-5); align-items: center; margin-top: var(--esp-5); }
.at-envoi svg { display: block; width: 168px; height: auto; overflow: visible; }
.at-envoi-dessin { filter: drop-shadow(5px 5px 0 var(--dt-shadow)); }
.at-envoi-texte { font-size: 16px; line-height: 1.45; color: var(--dt-ink-2); }
.at-envoi-texte b { display: block; margin-bottom: 2px; font: 800 19px/1.2 var(--display); letter-spacing: -0.015em; color: var(--dt-ink); }
.at-env-feuille { transform: translateY(-40px); transition: transform 300ms var(--ease); }
.at-env-rabat { transform-box: view-box; transform-origin: 180px 134px; transform: scaleY(0); transition: transform 260ms var(--ease) 300ms; }
.at-envoi[data-etat="part"] .at-env-feuille { transform: translateY(72px); }
.at-envoi[data-etat="part"] .at-env-rabat { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  .at-envoi { animation: at-pose 280ms var(--ease) both; }
  .at-envoi[data-etat="attend"] .at-env-feuille { animation: at-flotte 1.4s var(--ease) infinite alternate; }
  .at-envoi[data-etat="part"] svg { animation: at-envole 480ms cubic-bezier(0.7, 0, 0.2, 1) 600ms both; }
  .at-envoi[data-etat="part"] .at-envoi-texte { animation: at-efface 300ms ease 600ms both; }
  @keyframes at-flotte { from { transform: translateY(-40px); } to { transform: translateY(-30px); } }
  @keyframes at-envole { to { transform: translate(160%, -70%) rotate(12deg); opacity: 0; } }
  @keyframes at-efface { to { opacity: 0; } }
}
@media (max-width: 759px) {
  .at-envoi { grid-template-columns: 112px minmax(0, 1fr); gap: var(--esp-4); }
  .at-envoi svg { width: 112px; }
}

/* ---------- 2. Écran à étapes court ----------
   Reprend la frise, les étapes et la feuille de l'écran de préparation (.dg-prep-*, à déplacer de diagnostic.css vers
   dt.css pour servir aussi hors du diagnostic). Ici : une feuille de papier centrée, plus petite, 2 à 3 étapes. */
.at-etapes { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--esp-6); align-items: start; width: min(100%, 660px); margin: 0 auto; padding: var(--esp-6); background: var(--dt-paper); border-radius: var(--r-panel); box-shadow: 0 0 0 2px var(--dt-ink), 8px 8px 0 var(--dt-shadow); transform: rotate(-0.6deg); }
.at-etapes > * { transform: rotate(0.6deg); }
.at-etapes .dg-prep-feuille svg { display: block; width: 132px; height: auto; overflow: visible; }
.at-etapes h1 { font: 800 34px/1 var(--display); letter-spacing: -0.03em; }
.at-etapes-chapo { margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--dt-ink-2); }
.at-etapes .dg-prep-frise { margin-top: var(--esp-5); grid-template-columns: repeat(var(--at-n, 3), minmax(0, 1fr)); }
.at-etapes .dg-prep-etapes { margin-top: var(--esp-3); }
.at-etapes .dg-prep-etapes li { grid-template-columns: 36px minmax(0, 1fr); padding: 9px 0; }
.at-etapes .dg-prep-pastille { width: 36px; height: 36px; font-size: 15px; }
.at-etapes .dg-prep-pastille svg { width: 20px; height: 20px; }
.at-etapes .dg-prep-etapes h2 { font-size: 17px; }
/* La pastille porte ses trois signes ; data-etat de la ligne choisit lequel se voit (aucun innerHTML) */
.at-etapes .dg-prep-pastille > * { display: none; }
.at-etapes li[data-etat="attente"] .at-p-num, .at-etapes li[data-etat="encours"] .at-p-tourne, .at-etapes li[data-etat="fait"] .at-p-fait { display: block; }
.at-etapes .at-tampon { position: absolute; right: -18px; bottom: 10px; font-size: 20px; padding: 4px 10px; border-width: 3px; }
.at-etapes .dg-prep-feuille { position: relative; }
.at-sortie { transition: opacity 160ms ease; }
.at-sortie[data-sort="1"] { opacity: 0; }
/* L'arrivée du rapport (diagnostic.html) : la feuille couvre la page le temps de l'habillage, sur le fond du site. */
.at-arrivee { position: fixed; inset: 0; z-index: 9999; display: grid; align-content: safe center; overflow-y: auto; padding: 56px 32px; background: var(--dt-surface); pointer-events: none; }
@media (max-width: 759px) {
  .at-arrivee { align-content: start; padding: 28px 16px; }
}
@media (max-width: 759px) {
  .at-etapes { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-5); transform: none; }
  .at-etapes > * { transform: none; }
  .at-etapes .dg-prep-feuille svg { width: 96px; margin: 0 auto; }
  .at-etapes .at-tampon { right: calc(50% - 74px); }
  .at-etapes h1 { font-size: 28px; }
}

/* ---------- 3. Onglet d'attente du PDF ----------
   La feuille du rapport sort d'une fente, l'une après l'autre, sans compter de pages. */
.at-pdf { display: grid; justify-items: center; gap: var(--esp-5); width: min(100%, 620px); margin: 0 auto; padding: var(--esp-7) var(--esp-4) var(--esp-8); text-align: center; }
.at-pdf h1 { font: 800 44px/1 var(--display); letter-spacing: -0.03em; }
.at-pdf-chapo { margin-top: var(--esp-3); font-size: 19px; line-height: 1.45; color: var(--dt-ink-2); }
.at-pdf .at-patience, .at-pdf .at-echec { text-align: left; }
.at-pdf-dessin { position: relative; width: 240px; }
.at-pdf-dessin svg { display: block; width: 240px; height: auto; overflow: visible; }
.at-pdf-feuille { filter: drop-shadow(4px 4px 0 var(--dt-shadow)); }
.at-pdf-dessin .at-tampon { position: absolute; right: 18px; top: 34px; }
.at-pdf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); margin-top: var(--esp-4); }
/* .btn n'a pas de taille par défaut dans dt.css : « Réessayer » prend celle de « Revenir au rapport » (.btn-2). */
.at-pdf-actions .btn { min-height: 52px; padding: 0 24px; }
@media (prefers-reduced-motion: no-preference) {
  .at-pdf[aria-busy="true"] .at-pdf-feuille { animation: at-sort 2.4s var(--ease) infinite; }
  .at-pdf[aria-busy="true"] .at-pdf-feuille-2 { animation-delay: 1.2s; }
  @keyframes at-sort { 0% { transform: translateY(150px); opacity: 1; } 55% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(-26px); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
}
.at-pdf:not([aria-busy="true"]) .at-pdf-feuille-2, .at-pdf[data-etat="echec"] .at-pdf-feuille { display: none; }
@media (max-width: 759px) {
  .at-pdf { padding-top: var(--esp-6); }
  .at-pdf h1 { font-size: 32px; }
  .at-pdf-chapo { font-size: 17px; }
  .at-pdf-actions .btn, .at-pdf-actions .btn-2 { width: 100%; }
}

/* ---------- 4. Squelette des espaces ----------
   Le squelette se pose dans la vraie coque de l'espace (.app-tete, .app-grille, .app-colonne, .app-bloc,
   .app-compteurs de dt.css) : seules les barres sont nouvelles, le vrai contenu prend exactement la même place.
   Le titre de la vue est réel dès le départ. Les barres respirent après 0,4 s, par vagues de haut en bas. */
.at-sq { display: block; height: 14px; border-radius: 7px; background: var(--dt-surface-alt-2); }
.at-sq-bouton { width: 168px; height: 44px; border-radius: 999px; }
.at-sq-h2 { width: 44%; height: 24px; border-radius: 8px; }
.at-sq-chiffre { width: 56px; height: 38px; border-radius: 9px; }
.at-sq-texte { width: 86%; }
.at-sq-court { width: 52%; }
.at-sq-compteurs > div { --c: var(--dt-surface-alt-2); min-height: 132px; }
.at-sq-ligne { display: grid; grid-template-columns: 3fr 2fr 3fr 2fr; gap: var(--esp-4); align-items: center; min-height: 62px; border-top: 2px solid var(--dt-surface-alt-2); }
.at-sq-ligne .at-sq:nth-child(2) { width: 70%; } .at-sq-ligne .at-sq:nth-child(3) { width: 84%; }
.at-sq-ligne .at-sq:last-child { width: 96px; height: 26px; border-radius: 999px; justify-self: end; }
.at-sq-rang { display: flex; align-items: center; gap: var(--esp-3); min-height: 52px; }
.at-sq-rang + .at-sq-rang { border-top: 2px solid var(--dt-surface-alt); }
.at-sq-rang .at-sq:first-child { flex: none; width: 24px; height: 24px; border-radius: 7px; }
.at-squelette-etat { min-height: 24px; }
/* Dans le squelette, la patience et l'échec se posent entre l'en-tête et la grille (planche 4). */
.at-squelette > .at-patience { margin: 0 0 var(--esp-5); }
.at-squelette > .at-echec { max-width: 720px; margin: 0 0 var(--esp-5); }
/* Le titre de la vue reçoit le focus à l'arrivée du contenu, pour être lu : ce n'est pas une commande, pas d'anneau. */
.app-tete h1[tabindex="-1"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .at-squelette[aria-busy="true"] .at-sq { animation: at-respire 1.6s ease-in-out 400ms infinite alternate; }
  .at-squelette[aria-busy="true"] .app-compteurs .at-sq { animation-delay: 520ms; }
  .at-squelette[aria-busy="true"] .at-sq-ligne .at-sq { animation-delay: 640ms; }
  .at-squelette[aria-busy="true"] .at-sq-ligne:nth-of-type(n+4) .at-sq { animation-delay: 760ms; }
  @keyframes at-respire { to { opacity: 0.45; } }
  .at-arrive { animation: at-arrive 200ms ease both; }
  @keyframes at-arrive { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 899px) {
  .at-sq-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .at-sq-ligne .at-sq:nth-child(2), .at-sq-ligne .at-sq:nth-child(3) { display: none; }
  .at-sq-bouton { width: 150px; }
}

/* ---------- 5. Indicateur de champ et résultat trouvé ----------
   .at-champ se pose sur la zone du champ (.dg-combo-zone). La roue existante (.dg-tourne) n'apparaît qu'après 0,4 s
   (un fondu, pas un mouvement : il reste en mouvement réduit). La ligne d'état (.dg-etab-ligne) ne prend son texte
   qu'à 1 s (JavaScript). Un résultat qui arrive (liste, établissement repris, DPE retrouvé) prend .at-pose. */
.at-champ .dg-tourne { animation: at-apparait 120ms linear 400ms both; }
@keyframes at-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .at-pose { animation: at-pose 320ms var(--ease) both; }
}

/* ---------- 6. Confirmation et échec ----------
   Le tampon « Envoyé » reprend le tampon « Prêt ». L'échec se dit dans la page, jamais dans une boîte d'alerte. */
.at-tampon { display: inline-block; padding: 6px 16px; border: 4px solid var(--dt-accent); border-radius: 10px; background: var(--dt-paper); color: var(--dt-accent); font: 800 26px/1 var(--display); letter-spacing: -0.02em; transform: rotate(-8deg); }
.at-confirme { position: relative; padding: var(--esp-6) var(--esp-6) var(--esp-5); background: var(--dt-paper); border-radius: var(--r-panel); box-shadow: var(--ombre-decoupe); }
.at-confirme .at-tampon { position: absolute; right: 22px; top: -18px; }
.at-confirme h2 { padding-right: 140px; font: 800 26px/1.1 var(--display); letter-spacing: -0.02em; }
.at-confirme p { margin-top: var(--esp-2); color: var(--dt-ink-2); }
.at-echec { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--esp-3); margin-top: var(--esp-5); padding: var(--esp-4) var(--esp-5); background: var(--dt-paper); border-radius: var(--r-control); box-shadow: 0 0 0 2px var(--dt-ink), 4px 4px 0 var(--dt-shadow); text-align: left; }
.at-echec > svg { width: 28px; height: 28px; color: var(--dt-erreur); }
.at-echec p { margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--dt-ink-2); }
/* Après .at-echec p, et aussi précis qu'elle : sinon le titre prendrait la taille et la couleur du texte. */
.at-echec .at-echec-titre { margin-top: 0; font: 800 19px/1.25 var(--display); letter-spacing: -0.015em; color: var(--dt-ink); }
.at-echec .btn-2 { margin-top: var(--esp-3); min-height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .at-tampon { animation: at-frappe 420ms var(--ease) both; }
  .at-confirme, .at-echec { animation: at-pose 280ms var(--ease) both; }
  @keyframes at-frappe { 0% { opacity: 0; transform: scale(1.6) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
}
@media (max-width: 759px) {
  .at-confirme { padding: var(--esp-6) var(--esp-5) var(--esp-5); }
  .at-confirme h2 { padding-right: 0; padding-top: var(--esp-4); font-size: 22px; }
  .at-confirme .at-tampon { right: 16px; top: -20px; font-size: 22px; }
}

/* ---------- 7. L'écran « Vérifiez votre boîte mail » : la page veille ----------
   Aucune étape, aucune durée, aucun pourcentage. L'enveloppe de l'étape 5 se pose une fois (elle vient de partir),
   puis respire très lentement ; les papiers autour dérivent ; une veilleuse framboise accompagne la phrase qui dit
   que la page attend le clic sur le lien. Sur .dg-fin-art (le dessin .dg-enveloppe existant) et .dg-fin-texte. */
.at-veille { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--esp-4); font-size: 16px; line-height: 1.45; color: var(--dt-ink); }
.at-veilleuse { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 4px 5px 4px 5px; background: var(--dt-accent); transform: rotate(-6deg); }
.at-veille-art { position: relative; }
.at-veille-art .at-tampon { position: absolute; right: 6%; top: 2%; }
.at-veille-enveloppe, .at-veille-papier > * { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .at-veille-enveloppe { animation: at-pose-env 560ms var(--ease) 120ms both, at-respire-env 4.8s ease-in-out 700ms infinite alternate; }
  .at-veille-papier > * { animation: at-derive 7s ease-in-out infinite alternate; }
  .at-veille-papier > :nth-child(2) { animation-delay: -2s; }
  .at-veille-papier > :nth-child(3) { animation-delay: -4s; }
  .at-veille-papier > :nth-child(4) { animation-delay: -5.5s; }
  .at-veilleuse { animation: at-veille 2.4s ease-in-out infinite alternate; }
  @keyframes at-pose-env { from { opacity: 0; transform: translate(-28px, 22px) rotate(-6deg); } to { opacity: 1; transform: none; } }
  @keyframes at-respire-env { to { transform: translateY(-5px); } }
  @keyframes at-derive { to { transform: translate(3px, -6px) rotate(8deg); } }
  @keyframes at-veille { to { opacity: 0.35; } }
}
@media (max-width: 759px) {
  .at-veille-art .at-tampon { font-size: 20px; padding: 4px 10px; border-width: 3px; right: -12px; }
}