/* ============================================================
   FOC STUDIO — PAGE LES OFFRES
   ------------------------------------------------------------
   Page minimale : son rôle est d'aiguiller vers la bonne offre.
   On NE redéfinit PAS les boxes ni le contact (ils gardent leur
   style partagé dans components.css) — ici, uniquement la mise en
   scène propre à cette page : le composant offres devient un
   "landing" plein écran et son entrée est renforcée.
   ============================================================ */

/* Le trail décoratif est rose par défaut → invisible sur le fond
   rose ; ici le landing est rouge, on garde donc le rose pour qu'il
   vive bien sur le rouge. */
.page-offres {
  --trail-color: var(--rose);
}

/* ---------- Le composant offres en landing centré ----------
   Les couleurs (fond feu, cartes) sont gérées par le composant partagé
   (components.css) puisque ce traitement est désormais le même PARTOUT.
   Ici, on ne fait que la mise en page propre à la page : la section
   occupe la hauteur d'écran et centre les 2 portes d'entrée. Le
   padding-top compense le header fixe pour un centrage optique correct. */
.page-offres .offres {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: clamp(8rem, 14vh, 12rem);
}

.page-offres .offres-inner {
  width: 100%;
}

/* ---------- Entrée renforcée ----------
   Les boxes sont en haut de page : leurs reveals se déclenchent au
   chargement → c'est l'animation d'entrée. On l'amplifie ici (durée
   plus ample) SANS toucher au composant partagé : on ne fait que
   surcharger la durée de transition, les classes/variantes restent
   celles du composant (.reveal--left / .reveal--right). */
@media (prefers-reduced-motion: no-preference) {
  .page-offres .offres .reveal {
    transition-duration: 0.9s;
  }
}

/* ---------- Responsive ----------
   Sur petit écran le centrage vertical strict comprime le contenu :
   on libère la hauteur et on garde juste une marge haute confortable. */
@media (max-width: 768px) {
  .page-offres .offres {
    min-height: auto;
    /* Juste la place du header fixe (~60px) + un peu d'air : on dégage le
       haut pour que les 2 offres soient visibles d'emblée sur mobile. */
    padding-top: clamp(4.5rem, 12vh, 6rem);
  }
}