/* Intro : le logo rejoint l’en-tête, puis le voile disparaît. */
.intro-voile { display: none; }
[data-intro] .intro-voile {
  display: flex; position: fixed; inset: 0; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(180deg, #054649 0%, #003C40 55%, #002F32 100%);
  animation: intro-sortie 700ms ease 1250ms forwards;
}
[data-intro] .intro-logo {
  width: min(230px, 46vw); height: auto; opacity: 0;
  animation: intro-logo 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms forwards;
}
.intro-logo { position: relative; }
.intro-logo img { display: block; width: 100%; height: auto; }
.intro-logo-sombre { position: absolute; inset: 0; opacity: 0; }

@keyframes intro-logo {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-sortie {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-voile { display: none !important; }
}

/* Effets visuels du site. */

:root {
  --anim-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --intro-fin: 0ms; /* moment où l'accueil devient lisible derrière le voile */
}
[data-intro="envol"]   { --intro-fin: 1850ms; }

/* Envol : le logo vole se poser à sa place dans l'en-tête pendant que le
   voile s'efface. --dx / --dy / --s sont mesurés par js/animations.js ;
   sans eux, le logo reste au centre et s'efface : rien ne casse. */
[data-intro="envol"] .intro-voile { animation: intro-sortie 800ms ease 1250ms forwards; }
[data-intro="envol"] .intro-logo {
  animation: intro-logo 900ms var(--anim-courbe) 120ms forwards,
             intro-envol 950ms cubic-bezier(0.65, 0, 0.35, 1) 1150ms forwards,
             intro-pose 220ms ease 2080ms forwards;
}
@keyframes intro-envol {
  from { transform: none; }
  to   { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); }
}
@keyframes intro-pose { from { opacity: 1; } to { opacity: 0; } }
/* Le logo reste clair pendant le vol (il survole le vert), et bascule en vert / or
   juste avant de se poser sur le blanc de l'en-tête. */
[data-intro="envol"] .intro-logo-clair  { animation: intro-fondu-sortie 260ms ease 1820ms forwards; }
[data-intro="envol"] .intro-logo-sombre { animation: intro-fondu-entree 260ms ease 1820ms forwards; }
@keyframes intro-fondu-sortie { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-fondu-entree { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   2. Apparitions au défilement
   js/animations.js pose .est-visible quand le bloc entre dans l'écran,
   avec l'échelonnement entre frères. Les états cachés n'existent que si
   les effets sont actifs : sans JS, rien n'est jamais masqué.
   --------------------------------------------------------------------- */
.accueil.animations :is(.section-head, .contact-texte, .cabinet-contenu > p, .cabinet-signature,
                          .associe, .competence, .contact-carte, .footer-marque, .footer-nav, .footer-coordonnees) {
  opacity: 0; translate: 0 22px;
  transition: opacity 0.8s ease, translate 0.8s var(--anim-courbe);
}
/* Même :is() que la règle cachée : « .cabinet-contenu > p » lui donne une spécificité (0,2,1)
   que « .est-visible » seul (0,2,0) ne battrait pas. */
.accueil.animations :is(.section-head, .contact-texte, .cabinet-contenu > p, .cabinet-signature,
                          .associe, .competence, .contact-carte, .footer-marque, .footer-nav, .footer-coordonnees).est-visible {
  opacity: 1; translate: 0 0;
}

/* Filets : la ligne se trace, puis la barre or s'étire. */
.accueil.animations .section-head .section-filet,
.accueil.animations .contact-texte .section-filet {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--anim-courbe) 0.15s;
}
.accueil.animations .editorial-section .section-filet::before { width: 0; transition: width 0.9s var(--anim-courbe) 0.7s; }
.accueil.animations .est-visible .section-filet { transform: scaleX(1); }
.accueil.animations .est-visible .section-filet::before { width: 88px; }

/* Équipe en cascade : la photo se cale pendant que la carte monte. */
.accueil.animations .associe .associe-photo img { transform: scale(1.08); transition: transform 1.4s var(--anim-courbe); }
.accueil.animations .associe.est-visible .associe-photo img { transform: scale(1); }

/* Compétences en cascade : le titre arrive de la gauche, le corps monte
   paragraphe par paragraphe, les carrés or éclosent un à un. */
.accueil.animations .competence .competence-head {
  opacity: 0; translate: -18px 0;
  transition: opacity 0.7s ease, translate 0.7s var(--anim-courbe);
}
.accueil.animations .competence .competence-corps > * {
  opacity: 0; translate: 0 12px;
  transition: opacity 0.6s ease, translate 0.6s var(--anim-courbe);
  transition-delay: calc(0.15s + var(--j, 0) * 90ms);
}
.accueil.animations .competence .liste-puces li::before {
  transform: scale(0);
  transition: transform 0.4s var(--anim-courbe);
  transition-delay: calc(0.35s + var(--j, 0) * 90ms + var(--k, 0) * 60ms);
}
.accueil.animations .competence.est-visible .competence-head,
.accueil.animations .competence.est-visible .competence-corps > * { opacity: 1; translate: 0 0; }
.accueil.animations .competence.est-visible .liste-puces li::before { transform: scale(1); }

/* Signature : la phrase en italique se pose, les lettres se resserrent. */
.accueil.animations .cabinet-signature {
  opacity: 0; letter-spacing: 0.06em;
  transition: opacity 1.2s ease, letter-spacing 1.4s var(--anim-courbe), translate 1.2s var(--anim-courbe);
}
.accueil.animations .cabinet-signature.est-visible { opacity: 1; letter-spacing: normal; }

/* ---------------------------------------------------------------------
   3. Accueil
   --------------------------------------------------------------------- */

@keyframes fondu-monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Les dix domaines s'alignent un à un. */
.accueil.animations .hero-panel {
  opacity: 0; animation: fondu-monte 0.9s var(--anim-courbe) forwards;
  animation-delay: calc(var(--intro-fin) + 200ms);
}
.accueil.animations .hero-domaines li {
  opacity: 0; animation: dom-entre 0.6s var(--anim-courbe) forwards;
  animation-delay: calc(var(--intro-fin) + 450ms + var(--i, 0) * 70ms);
}
@keyframes dom-entre {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.accueil.animations .hero-domaines li:nth-child(1)  { --i: 0; }
.accueil.animations .hero-domaines li:nth-child(2)  { --i: 1; }
.accueil.animations .hero-domaines li:nth-child(3)  { --i: 2; }
.accueil.animations .hero-domaines li:nth-child(4)  { --i: 3; }
.accueil.animations .hero-domaines li:nth-child(5)  { --i: 4; }
.accueil.animations .hero-domaines li:nth-child(6)  { --i: 5; }
.accueil.animations .hero-domaines li:nth-child(7)  { --i: 6; }
.accueil.animations .hero-domaines li:nth-child(8)  { --i: 7; }
.accueil.animations .hero-domaines li:nth-child(9)  { --i: 8; }
.accueil.animations .hero-domaines li:nth-child(10) { --i: 9; }

/* Parallaxe : les anneaux suivent la souris et le défilement, le panneau
   glisse à contre-sens. --mx / --my / --sy sont posés par le JS. */
.accueil.animations .hero-deco {
  translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 12px + var(--sy, 0) * 0.15px);
  transition: translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: translate;
}
.accueil.animations .hero-panel {
  translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px);
  transition: translate 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------------
   4. En-tête
   --------------------------------------------------------------------- */
.animations .brand img,
.animations .nav-bar { transition: height 0.35s var(--anim-courbe); }
.animations .site-header.is-scrolled .nav-bar { height: calc(var(--header-h) - 16px); }
.animations .site-header.is-scrolled .brand img { height: 36px; }
@media (max-width: 767px) {
  .animations .site-header.is-scrolled .brand img { height: 34px; }
}

/* ---------------------------------------------------------------------
   5. Au survol
   --------------------------------------------------------------------- */
.animations .btn { position: relative; overflow: hidden; }
.animations .btn::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
}
.animations .btn:hover::after { transform: translateX(420%) skewX(-18deg); transition: transform 0.75s ease; }

.animations .btn {
  translate: var(--tx, 0px) var(--ty, 0px);
  transition: translate 0.3s var(--anim-courbe), transform var(--transition),
              background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.accueil.animations .associe-photo img { transition: transform 0.9s var(--anim-courbe); }
.accueil.animations .associe:hover .associe-photo img { transform: scale(1.045); }

.animations .lien-fleche:hover::after { transform: translateX(5px) rotate(45deg); }

.accueil.animations .competence:target { animation: cible-flash 2.2s ease-out 1; }
@keyframes cible-flash {
  0%, 30% { background-color: rgba(218, 185, 108, 0.2); }
  100%    { background-color: transparent; }
}

/* ---------------------------------------------------------------------
   6. Lueur et mouvement de la carte contact
   --------------------------------------------------------------------- */
.accueil.animations .hero::after {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 42% at 32% 42%, rgba(218, 185, 108, 0.13), transparent 70%);
  animation: lueur 11s ease-in-out infinite alternate;
}
.accueil.animations .hero-deco { z-index: 0; }
.accueil.animations .hero-grid { z-index: 1; }
@keyframes lueur {
  from { transform: translate(0, 0) scale(1); opacity: 0.75; }
  to   { transform: translate(9%, 6%) scale(1.12); opacity: 1; }
}

.accueil.animations .contact-carte { animation: flotte 7s ease-in-out infinite; }
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------------------------------------------------------------------
   7. Confort : retour en haut
   --------------------------------------------------------------------- */
.remonter { display: none; }
.animations .remonter {
  display: flex; position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--vert); color: var(--or); box-shadow: 0 10px 28px rgba(0, 60, 64, 0.22);
  opacity: 0; translate: 0 14px; pointer-events: none;
  transition: opacity 0.35s ease, translate 0.35s var(--anim-courbe), background-color var(--transition);
}
.animations .remonter.est-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.animations .remonter:hover, .animations .remonter:focus-visible { background: var(--vert-fonce); }
.animations .remonter svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   8. Respect du réglage « réduire les animations » du visiteur
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animations .hero::after, .animations .contact-carte, .animations .hero-domaines li,
  .animations .hero-panel, .animations .hero .eyebrow, .animations .hero-lead {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .animations :is(.section-head, .contact-texte, .cabinet-contenu > p, .cabinet-signature, .associe, .competence,
                  .contact-carte, .footer-marque, .footer-nav, .footer-coordonnees, .competence-head, .competence-corps > *) {
    opacity: 1 !important; translate: 0 0 !important; transition: none !important;
  }
}

/* Le lien masqué ne doit pas recevoir le focus clavier. */
.animations .remonter { visibility: hidden; }
.animations .remonter.est-visible { visibility: visible; }
.animations .nav-ouverte .remonter { visibility: hidden; }