/* Aurora : composants de la page d'accueil.
   Couleurs, espaces, rayons et styles de texte viennent de tokens.json (var(--…) et classes .h2, .corps…).
   Ce fichier ne porte que la mise en forme, les couples fond / texte et le mouvement. */

:root {
  --au-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --au-duree-survol: 0.3s;
  --au-duree-carte: 0.35s;
  --au-duree: 0.6s;
  --au-decalage-carte: 80ms;
  --au-decalage-mot: 40ms;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--noir); color: var(--texte-secondaire); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* Styles de texte : le desktop vient des classes de tokens.json ; tablette et mobile reprennent les styles *-tablette et *-mobile. */
@media (max-width: 1199px) {
  .display { font-size: 64px; }
  .h2 { font-size: 48px; }
  .h3 { font-size: 24px; }
  .chiffre { font-size: 96px; }
  .corps-l { font-size: 19px; }
}
@media (max-width: 809px) {
  .display { font-size: 44px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 22px; }
  .chiffre { font-size: 72px; }
  .surtitre { font-size: 13px; }
  .corps-l { font-size: 18px; }
  .corps { font-size: 16px; }
}

/* ---------- Couples fond / texte ---------- */
.au-sur-noir, .au-sur-nuit, .au-sur-violet, .au-sur-bleu, .au-sur-blanc { background-color: var(--au-fond); color: var(--au-texte); }
.au-sur-noir   { --au-fond: var(--noir);   --au-titre: var(--blanc); --au-accent: var(--violet); --au-texte: var(--texte-secondaire);       --au-forme: var(--violet); --au-surtitre: var(--violet); --au-lien: var(--violet); --au-ligne: var(--ligne);      --au-focus: var(--focus); }
.au-sur-nuit   { --au-fond: var(--nuit);   --au-titre: var(--blanc); --au-accent: var(--violet); --au-texte: var(--texte-secondaire);       --au-forme: var(--violet); --au-surtitre: var(--violet); --au-lien: var(--violet); --au-ligne: var(--ligne-nuit); --au-focus: var(--focus); }
.au-sur-violet { --au-fond: var(--violet); --au-titre: var(--nuit);  --au-accent: var(--nuit);   --au-texte: var(--nuit);                   --au-forme: var(--nuit);   --au-surtitre: var(--nuit);   --au-lien: var(--nuit);   --au-ligne: var(--nuit);       --au-focus: var(--nuit); }
.au-sur-bleu   { --au-fond: var(--bleu);   --au-titre: var(--blanc); --au-accent: var(--blanc);  --au-texte: var(--blanc);                  --au-forme: var(--nuit);   --au-surtitre: var(--blanc);  --au-lien: var(--blanc);  --au-ligne: var(--nuit);       --au-focus: var(--blanc); }
.au-sur-blanc  { --au-fond: var(--blanc);  --au-titre: var(--noir);  --au-accent: var(--violet); --au-texte: var(--texte-secondaire-clair); --au-forme: var(--violet); --au-surtitre: var(--nuit);   --au-lien: var(--nuit);   --au-ligne: var(--texte-secondaire-clair); --au-focus: var(--focus); }
.au-titre { color: var(--au-titre, var(--blanc)); }
.au-accent { color: var(--au-accent, var(--violet)); }

:focus-visible { outline: 2px solid var(--au-focus, var(--focus)); outline-offset: 3px; }

/* ---------- Mise en page ---------- */
.au-conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--marge-desktop)); margin: 0 auto; padding: 0 var(--marge-desktop); }
.au-section { padding: var(--section-desktop) 0; }
.au-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); }
@media (max-width: 1199px) {
  .au-conteneur { padding: 0 var(--marge-tablette); }
  .au-section { padding: var(--section-tablette) 0; }
}
@media (max-width: 809px) {
  .au-conteneur { padding: 0 var(--marge-mobile); }
  .au-section { padding: var(--section-mobile) 0; }
}

/* ---------- Logo « aurora. » ---------- */
.au-logo { display: inline-flex; align-items: baseline; padding-block: calc((var(--cible-tactile) - 1em) / 2); font-family: var(--font-sans); font-weight: 700; font-size: 35px; line-height: 1; letter-spacing: -0.025em; color: var(--au-titre, var(--blanc)); text-decoration: none; white-space: nowrap; }
.au-logo__point { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; background: var(--au-forme, var(--violet)); }
@media (max-width: 809px) { .au-logo { font-size: 24px; } }

/* ---------- Surtitre ---------- */
.au-surtitre { display: inline-flex; align-items: center; gap: var(--espace-1); color: var(--au-surtitre, var(--violet)); }
.au-surtitre::before { content: ""; flex: none; width: var(--carre); height: var(--carre); background: var(--au-forme, var(--violet)); }
.au-entete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-2); max-width: 820px; }
.au-entete--centre { align-items: center; text-align: center; margin: 0 auto; }
.au-entete .h2 { color: var(--au-titre, var(--blanc)); }
.au-entete .corps-l { color: var(--au-texte, var(--texte-secondaire)); max-width: 640px; }

/* ---------- Bouton ---------- */
.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-1); height: var(--bouton-hauteur); padding: 0 var(--espace-4); border: 1px solid transparent; border-radius: var(--rayon-pilule); background: transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--au-duree-survol) var(--au-ease), color var(--au-duree-survol) var(--au-ease), border-color var(--au-duree-survol) var(--au-ease), transform 0.15s var(--au-ease); }
.au-btn:active, .au-btn.est-appui { transform: scale(0.97); }
.au-btn__fleche { flex: none; width: 20px; height: 20px; transition: transform var(--au-duree-survol) var(--au-ease); }
.au-btn:hover .au-btn__fleche, .au-btn.est-survol .au-btn__fleche { transform: translateX(4px); }
.au-btn--primaire { background: var(--violet); color: var(--nuit); }
.au-btn--primaire:hover, .au-btn--primaire.est-survol { background: var(--blanc); }
.au-btn--secondaire { border-color: var(--contour-bouton); color: var(--blanc); }
.au-btn--secondaire:hover, .au-btn--secondaire.est-survol { border-color: var(--violet); color: var(--violet); }
.au-btn--inverse { background: var(--nuit); color: var(--violet); }
.au-btn--inverse:hover, .au-btn--inverse.est-survol { background: var(--blanc); color: var(--nuit); }
.au-btn--clair { background: var(--blanc); color: var(--nuit); }
.au-btn--clair:hover, .au-btn--clair.est-survol { background: var(--nuit); color: var(--blanc); }
@media (max-width: 809px) { .au-btn { height: var(--bouton-hauteur-mobile); padding: 0 var(--espace-3); } }

/* ---------- Lien de carte ---------- */
.au-lien { display: inline-flex; align-items: center; gap: var(--espace-1); min-height: var(--cible-tactile); color: var(--au-lien, var(--violet)); text-decoration: none; }
.au-lien__fleche { flex: none; width: 18px; height: 18px; transition: transform var(--au-duree-survol) var(--au-ease); }
.au-lien:hover .au-lien__fleche, .au-carte--lien:hover .au-lien__fleche { transform: translateX(4px); }

/* ---------- Liste à puces carrées ---------- */
.au-liste { display: flex; flex-direction: column; gap: var(--espace-1); }
.au-liste li { display: grid; grid-template-columns: var(--carre) 1fr; column-gap: 12px; color: var(--au-texte, var(--texte-secondaire)); }
.au-liste li::before { content: ""; width: var(--carre); height: var(--carre); margin-top: calc(0.8em - 4px); background: var(--au-forme, var(--violet)); }

/* ---------- Carte (base bento) ---------- */
.au-carte { position: relative; display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-4); border-radius: var(--rayon-carte); border: 1px solid transparent; text-decoration: none;
  transition: transform var(--au-duree-survol) var(--au-ease), background-color var(--au-duree-carte) var(--au-ease), color var(--au-duree-carte) var(--au-ease), border-color var(--au-duree-carte) var(--au-ease); }
.au-carte.au-sur-noir { border-color: var(--ligne); }
.au-carte--lien:hover, .au-carte--lien.est-survol { transform: translateY(-6px); }
.au-carte__titre { color: var(--au-titre); }
.au-carte__num { color: var(--au-surtitre); font-variant-numeric: tabular-nums; }
.au-carte__pied { margin-top: auto; }
@media (max-width: 809px) { .au-carte { padding: var(--espace-3); border-radius: var(--rayon-carte-mobile); } }

/* ---------- Carte problème ---------- */
.au-icone { flex: none; width: 32px; height: 32px; color: var(--au-forme, var(--violet)); }
.au-probleme:hover, .au-probleme.est-survol { --au-fond: var(--violet); --au-titre: var(--nuit); --au-texte: var(--nuit); --au-forme: var(--nuit); border-color: var(--violet); }

/* ---------- Carte service ---------- */
.au-service--grande { padding: var(--espace-5); }
.au-service--grande .au-carte__pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espace-3); }
.au-service__geant { color: var(--au-titre); font-variant-numeric: tabular-nums; margin-bottom: -0.12em; }
@media (max-width: 809px) { .au-service--grande { padding: var(--espace-3); } }

/* ---------- Grille bento ---------- */
.au-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); }
.au-bento__large { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1199px) { .au-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) { .au-bento { grid-template-columns: minmax(0, 1fr); } .au-bento__large { grid-column: auto; grid-row: auto; } }

/* ---------- Bandes (motif) ---------- */
.au-bandes { display: grid; grid-template-rows: repeat(4, 1fr); min-height: 240px; border-radius: var(--rayon-carte); overflow: hidden; }
.au-bandes > i:nth-child(1) { background: var(--violet); }
.au-bandes > i:nth-child(2) { background: var(--bleu); }
.au-bandes > i:nth-child(4) { background: var(--nuit); }
@media (max-width: 809px) { .au-bandes { border-radius: var(--rayon-carte-mobile); min-height: 160px; } }

/* ---------- Damier (motif) ---------- */
.au-damier { display: grid; grid-template-columns: repeat(var(--au-colonnes, 8), var(--damier-pas)); grid-auto-rows: var(--damier-pas); }
.au-damier > i { display: block; background: var(--au-case, var(--nuit)); }
.au-damier > i.est-vide { background: transparent; }
.au-transition { display: grid; grid-template-columns: repeat(auto-fill, var(--damier-pas)); grid-auto-rows: var(--damier-pas); overflow: hidden; }
.au-transition > i { display: block; background: var(--au-case, var(--violet)); transform: scale(0); transition: transform 0.4s var(--au-ease); }
.au-transition > i.est-plein { transform: scale(1); }

/* ---------- Bloc chiffre ---------- */
.au-chiffre { display: flex; flex-direction: column; gap: var(--espace-2); }
.au-chiffre__valeur { color: var(--au-titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-chiffre__libelle { color: var(--au-titre); }
.au-chiffre__phrase { color: var(--au-texte); }

/* ---------- Carte réalisation ---------- */
.au-real { display: flex; flex-direction: column; gap: var(--espace-3); text-decoration: none; color: var(--au-texte, var(--texte-secondaire)); }
.au-real__cadre { position: relative; aspect-ratio: 16 / 10; border-radius: var(--rayon-image); overflow: hidden; background: var(--nuit); }
.au-real__cadre img, .au-real__vide { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--au-duree) var(--au-ease); }
.au-real__cadre img { object-fit: cover; }
.au-real:hover .au-real__cadre img, .au-real:hover .au-real__vide, .au-real.est-survol .au-real__vide { transform: scale(1.03); }
.au-real__vide { display: grid; place-items: center; align-content: center; gap: var(--espace-1); text-align: center; color: var(--texte-secondaire); border: 1px dashed var(--ligne-nuit); border-radius: inherit; }
.au-real__cat { position: absolute; top: var(--espace-2); left: var(--espace-2); z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--rayon-pilule); background: var(--noir); color: var(--blanc); }
.au-real__texte { display: flex; flex-direction: column; gap: var(--espace-1); }
.au-real__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); color: var(--au-titre, var(--blanc)); }
.au-real--large { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gouttiere); align-items: center; }
.au-real--large .au-real__texte { padding: var(--espace-4); }
@media (max-width: 809px) { .au-real--large { grid-template-columns: minmax(0, 1fr); } .au-real--large .au-real__texte { padding: 0; } }

/* ---------- Pastille client ---------- */
.au-pastilles { display: flex; flex-wrap: wrap; gap: 12px; }
.au-pastille { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--espace-2); border: 1px solid var(--au-ligne, var(--ligne)); border-radius: var(--rayon-pilule); color: var(--au-titre, var(--blanc)); white-space: nowrap; }
.au-pastille--autre { border-color: transparent; background: var(--nuit); color: var(--violet); }

/* ---------- Carte avis ---------- */
.au-avis { width: 380px; flex: none; }
.au-avis__etoiles { display: flex; gap: 2px; color: var(--etoile); }
.au-avis__etoiles svg { width: 18px; height: 18px; fill: currentColor; }
.au-avis__texte { color: var(--au-texte); }
.au-avis__auteur { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.au-avis__nom { color: var(--au-titre); }
.au-avis__source { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--au-ligne); border-radius: var(--rayon-pilule); color: var(--au-texte); }
.au-vide { color: var(--au-lien, var(--violet)); }
.au-defile { display: flex; gap: var(--gouttiere); width: max-content; animation: au-defile 60s linear infinite; }
.au-defile--inverse { animation-direction: reverse; }
.au-defile:hover { animation-play-state: paused; }
@keyframes au-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 809px) { .au-avis { width: 300px; } }

/* ---------- Accordéon FAQ ---------- */
.au-faq { display: flex; flex-direction: column; gap: 12px; }
.au-faq__item { border-radius: var(--rayon-carte); background: var(--blanc); color: var(--texte-secondaire-clair); }
.au-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); width: 100%; min-height: var(--cible-tactile); margin: 0; padding: var(--espace-3) var(--espace-4); border: 0; border-radius: var(--rayon-carte); background: transparent; color: var(--noir); font-weight: 600; text-align: left; cursor: pointer; --au-focus: var(--focus); }
.au-faq__question:focus-visible { outline-offset: -6px; }
.au-faq__plus { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon-pilule); background: var(--nuit); color: var(--violet); transition: transform var(--au-duree-survol) var(--au-ease); }
.au-faq__plus svg { width: 20px; height: 20px; }
.au-faq__item.est-ouvert .au-faq__plus { transform: rotate(45deg); }
.au-faq__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--au-duree-survol) var(--au-ease); }
.au-faq__item.est-ouvert .au-faq__panneau { grid-template-rows: 1fr; }
.au-faq__reponse { overflow: hidden; opacity: 0; transition: opacity var(--au-duree-survol) var(--au-ease); }
.au-faq__item.est-ouvert .au-faq__reponse { opacity: 1; }
.au-faq__reponse p { padding: 0 var(--espace-4) var(--espace-4); max-width: 680px; }
@media (max-width: 809px) { .au-faq__item, .au-faq__question { border-radius: var(--rayon-carte-mobile); } .au-faq__question { padding: var(--espace-2) var(--espace-3); } .au-faq__reponse p { padding: 0 var(--espace-3) var(--espace-3); } }

/* ---------- Navigation ---------- */
.au-nav { position: relative; z-index: 10; transition: background-color var(--au-duree-survol) var(--au-ease), transform 0.4s var(--au-ease); }
.au-nav.est-defilee { background: var(--voile-nav); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.au-nav.est-cachee { transform: translateY(-100%); }
.au-nav__barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 88px; }
.au-nav__barre .au-logo { justify-self: start; }
.au-nav__liens { display: flex; gap: var(--espace-4); }
.au-nav__liens a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); color: var(--texte-secondaire); text-decoration: none; transition: color var(--au-duree-survol) var(--au-ease); }
.au-nav__liens a:hover { color: var(--blanc); }
.au-nav__droite { display: flex; justify-content: flex-end; align-items: center; gap: var(--espace-2); }
.au-nav__menu { display: none; place-items: center; width: var(--cible-tactile); height: var(--cible-tactile); border: 1px solid var(--contour-bouton); border-radius: var(--rayon-pilule); background: transparent; color: var(--blanc); cursor: pointer; }
.au-nav__menu svg { width: 22px; height: 22px; }
@media (max-width: 1199px) { .au-nav__liens { gap: var(--espace-3); } }
@media (max-width: 809px) {
  .au-nav__barre { grid-template-columns: 1fr auto; height: 72px; }
  .au-nav__liens, .au-nav__droite .au-btn { display: none; }
  .au-nav__menu { display: grid; }
}
.au-menu { display: flex; flex-direction: column; gap: var(--espace-6); padding: 0 var(--marge-mobile) var(--espace-5); background: var(--nuit); }
.au-menu[hidden] { display: none; }
.au-menu__haut { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.au-menu__liens { display: flex; flex-direction: column; gap: var(--espace-1); }
.au-menu__liens a { color: var(--blanc); text-decoration: none; }
.au-menu .au-btn { align-self: stretch; }

/* ---------- Pied de page ---------- */
.au-pied { padding-top: var(--espace-12); overflow: hidden; }
.au-pied__grille { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: var(--espace-4) var(--gouttiere); padding-bottom: var(--espace-8); }
.au-pied__marque { display: flex; flex-direction: column; gap: var(--espace-2); max-width: 300px; }
.au-pied__col { display: flex; flex-direction: column; gap: var(--espace-1); }
.au-pied__titre { color: var(--blanc); margin-bottom: var(--espace-1); }
.au-pied__col a, .au-pied__col span { color: var(--texte-secondaire); text-decoration: none; transition: color var(--au-duree-survol) var(--au-ease); }
.au-pied__col a:hover { color: var(--violet); }
.au-pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2); padding: var(--espace-3) 0; border-top: 1px solid var(--ligne); color: var(--texte-secondaire); }
.au-pied__mentions { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.au-pied__mentions a { color: var(--texte-secondaire); text-decoration: none; }
.au-pied__mentions a:hover { color: var(--violet); }
.au-pied__icones { display: flex; gap: 12px; }
.au-pied__icone { display: grid; place-items: center; width: var(--cible-tactile); height: var(--cible-tactile); border-radius: var(--rayon-petit); background: var(--nuit); color: var(--blanc); transition: background-color var(--au-duree-survol) var(--au-ease), color var(--au-duree-survol) var(--au-ease); }
.au-pied__icone:hover { background: var(--violet); color: var(--nuit); }
.au-pied__icone svg { width: 18px; height: 18px; fill: currentColor; }
.au-pied__geant { display: flex; align-items: baseline; margin: var(--espace-2) 0 -0.14em; font-weight: 700; font-size: 25vw; line-height: 0.72; letter-spacing: -0.05em; color: var(--nuit); white-space: nowrap; user-select: none; }
.au-pied__geant > span { display: inline-block; }
.au-pied__geant .au-logo__point { width: 0.2em; height: 0.2em; margin-left: 0.04em; background: var(--nuit); }
@media (max-width: 1199px) { .au-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au-pied__marque { grid-column: 1 / -1; } }
@media (max-width: 1199px), (pointer: coarse) { .au-pied__col { gap: 0; } .au-pied__col a, .au-pied__mentions a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); } }
@media (max-width: 809px) { .au-pied__grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Carte projet : capture dans une fenêtre de navigateur, version mobile par-dessus ---------- */
.projet { display: flex; flex-direction: column; gap: var(--espace-3); color: var(--texte-secondaire); text-decoration: none; }
.projet--large { display: grid; grid-template-columns: 7fr 5fr; gap: var(--espace-3) var(--espace-6); align-items: center; }
.projet__scene { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--rayon-carte); overflow: hidden; isolation: isolate; }
.projet--large .projet__scene { aspect-ratio: 16 / 11; }
.projet__fenetre { position: absolute; top: 9%; left: 7%; right: 7%; bottom: 0; display: flex; flex-direction: column; border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; overflow: hidden; background: var(--noir); will-change: transform; }
.projet__barre { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--noir); border-bottom: 1px solid var(--ligne); }
.projet__barre i { width: var(--carre); height: var(--carre); }
.projet__barre i:nth-child(1) { background: var(--violet); }
.projet__barre i:nth-child(2) { background: var(--bleu); }
.projet__barre i:nth-child(3) { background: var(--blanc); }
.projet__barre span { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 12px; border-radius: var(--rayon-pilule); background: var(--ligne); color: var(--texte-secondaire); font-size: 12px; line-height: 1.4; }
.projet__ecran { position: relative; flex: 1; overflow: hidden; background: var(--blanc); }
.projet__ecran img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1); }
.projet__tel { position: absolute; right: 5%; bottom: -12%; width: 22%; aspect-ratio: 390 / 844; border: 5px solid var(--noir); border-radius: 26px; overflow: hidden; background: var(--noir); will-change: transform; }
.projet__tel .projet__ecran { position: absolute; inset: 0; }
.projet--large .projet__tel { width: 19%; }
.projet__texte { display: flex; flex-direction: column; gap: var(--espace-1); }
.projet__texte .au-surtitre { margin-bottom: 4px; }
.projet__texte .au-real__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); color: var(--blanc); }
.projet:hover .real__fleche, .projet:focus-visible .real__fleche { transform: translateX(4px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .projet:hover .projet__ecran img, .projet:focus-visible .projet__ecran img { transform: translateY(var(--defil, 0px)); }
}
@media (max-width: 1199px) { .projet__barre span { font-size: 11px; } }
@media (max-width: 809px) {
  .projet--large { grid-template-columns: minmax(0, 1fr); }
  .projet--large .projet__scene { aspect-ratio: 4 / 3; }
  .projet__scene { border-radius: var(--rayon-carte-mobile); }
  .projet__fenetre { top: 8%; left: 6%; right: 6%; }
  .projet__barre { height: 24px; gap: 4px; padding: 0 8px; }
  .projet__barre i { width: 6px; height: 6px; }
  .projet__barre span { font-size: 10px; padding: 1px 8px; }
  .projet__tel, .projet--large .projet__tel { width: 24%; border-width: 3px; border-radius: 16px; }
}
.au-real__titre .real__fleche { flex: none; width: 24px; height: 24px; color: var(--violet); transition: transform var(--au-duree-survol) var(--au-ease); }
.projet:hover .real__fleche, .projet:focus-visible .real__fleche { transform: translateX(4px); }

/* ---------- Champs de formulaire ---------- */
.au-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3) var(--gouttiere); }
.champ { display: flex; flex-direction: column; gap: var(--espace-1); min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label { color: var(--blanc); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--contour-bouton); border-radius: var(--rayon-petit); background: var(--noir); color: var(--blanc); font: 400 16px / 1.5 var(--font-sans); -webkit-appearance: none; appearance: none; transition: border-color var(--au-duree-survol) var(--au-ease); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ ::placeholder { color: var(--texte-secondaire); opacity: 0.6; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--texte-secondaire); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--violet); }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--violet); }
.champ__liste { position: relative; display: block; }
.champ__liste select { padding-right: 48px; cursor: pointer; }
.champ__liste svg { position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; transform: translateY(-50%); color: var(--texte-secondaire); pointer-events: none; }
.champ option { background: var(--nuit); color: var(--blanc); }
.au-etat { color: var(--texte-secondaire); }
.au-etat:empty { display: none; }
.au-etat.est-ok { color: var(--blanc); }
.au-etat.est-erreur { color: var(--violet); }
@media (max-width: 809px) { .au-champs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Apparitions (jouées une fois) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .au-revele { opacity: 0; transform: translateY(40px); transition: opacity var(--au-duree) var(--au-ease), transform var(--au-duree) var(--au-ease); transition-delay: calc(var(--au-i, 0) * var(--au-decalage-carte)); }
  .au-revele--echelle { transform: scale(0.94); }
  .au-revele.est-visible { opacity: 1; transform: none; }
  .au-mots .au-mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .au-mots .au-mot > span { display: inline-block; transform: translateY(100%); transition: transform var(--au-duree) var(--au-ease); transition-delay: calc(var(--au-i, 0) * var(--au-decalage-mot)); }
  .au-mots.est-visible .au-mot > span { transform: none; }
  .au-surtitre.au-anime::before { transform: scale(0); transition: transform 0.4s var(--au-ease); }
  .au-surtitre.au-anime > span { display: inline-block; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--au-ease) 0.2s, transform 0.4s var(--au-ease) 0.2s; }
  .au-surtitre.au-anime.est-visible::before { transform: scale(1); }
  .au-surtitre.au-anime.est-visible > span { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .au-revele { opacity: 0; transition: opacity 0.4s linear; }
  .au-revele.est-visible { opacity: 1; }
  .au-defile { animation: none; }
  .au-transition > i { transform: scale(1); transition: none; }
}