/* ─────────────────────────────────────────────────────
   ACCUEIL — survols et ajustements propres à la page
   ───────────────────────────────────────────────────── */

/* Haut de page : boutons empilés sous 900px */
@media (max-width: 899.98px) {
  .accueil-hero-btns {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Cartes Expertises : titre + « En savoir plus » en rouge, flèche décalée */
.accueil-exp-card:hover .accueil-exp-card__title,
.accueil-exp-card:hover .accueil-exp-card__more { color: #e30713 !important; }
.accueil-exp-card:hover .accueil-exp-card__arrow { transform: translateX(4px) !important; }

/* Organisation : au survol, la pastille numérotée se remplit de rouge en fondu */
.accueil-pilier__num { position: relative; isolation: isolate; transition: color .5s ease !important; }
.accueil-pilier__num::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #e30713; opacity: 0;
  transition: opacity .5s ease;
}
.accueil-pilier:hover .accueil-pilier__num { color: #fff !important; }
.accueil-pilier:hover .accueil-pilier__num::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .accueil-pilier__num, .accueil-pilier__num::before { transition: none !important; }
}

/* Culture : bouton « Candidature spontanée » */
.accueil-btn-outline:hover {
  background: #e30713 !important;
  border-color: #e30713 !important;
}

/* Bouton secondaire du haut de page : lisible sur la vidéo (fond sombre + bordure blanche) */
.accueil-btn-ghost:hover,
.accueil-btn-ghost:focus-visible {
  background: #fff !important;
  color: #141414 !important;
  border-color: #fff !important;
  text-shadow: none !important;
}

/* Organisation (mobile) : l'encart de chiffres déborde sous la photo,
   on laisse de l'air avant « Notre organisation ». */
@media (max-width: 860px) {
  .accueil-orga-grid { row-gap: 88px !important; }
  .accueil-encart { right: 0 !important; left: 16px; }
}

/* Expertises : les liens « En savoir plus » sont alignés en bas de chaque carte,
   quelle que soit la longueur des textes. */
.expertise-grid > .reveal { height: 100%; }
.accueil-exp-card { display: flex !important; flex-direction: column; height: 100%; }
.accueil-exp-card > div:last-child { display: flex; flex-direction: column; flex: 1; }
.accueil-exp-card__more { margin-top: auto; align-self: flex-start; }

/* ─────────────────────────────────────────────────────
   NOTRE ORGANISATION : apparition en fondu + photo qui suit le texte
   ───────────────────────────────────────────────────── */
.js .accueil-orga .reveal {
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s), transform 1.4s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s);
}
.js .accueil-orga-grid > .reveal:first-child { transform: translateY(24px) scale(.97); }
.js .accueil-orga-grid > .reveal:first-child.is-visible { transform: none; }
@media (max-width: 860px) {
  .accueil-orga-grid > .reveal:first-child { position: static !important; }
}

/* Héros : barre rouge qui suit le défilement le long des chiffres clés */
.accueil-stats__barre {
  position: absolute; top: 0; right: 0; z-index: 1; width: 2px; height: 0;
  background: #e30713; pointer-events: none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1);
}