/* === Normalize (minimal — preserve Lab rendering) === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; min-height: 100svh; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* === App styles === */
@font-face {
  font-family: 'Host Grotesk';
  src: url('../_fonts/HostGrotesk-VariableFont_wght.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: 'Host Grotesk Italic';
  src: url('../_fonts/HostGrotesk-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
/* Animation logo — 3 phases séquentielles */
/* Phase 1 (0-45%) : animation originale du symbole, centrée dans le header (+259px sur X) */
/* Phase 2 (55-100%) : le symbole assemblé translate de +259px vers 0 (sa place finale) */
/* Phase 3 : texte esms glisse de gauche à droite (delay après phase 2) */

/* circle — original : translate(-56.8, 96.9) bounce scale, puis settle à (0,0) */
/* centré : même chose mais +259px sur tous les X, settle à (259, 0) */
@keyframes circleMove {
  0%   { opacity: 0; transform: translate(202.2px, 96.9px) scale(.25); }
  8%   { opacity: 1; transform: translate(202.2px, 96.9px) scale(1.16); }
  14%  { opacity: 1; transform: translate(202.2px, 96.9px) scale(.94); }
  20%  { opacity: 1; transform: translate(202.2px, 96.9px) scale(1); }
  45%  { opacity: 1; transform: translate(259px, 0) scale(1); }
  55%  { opacity: 1; transform: translate(259px, 0) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* drop-blue — original : translate(-120, -35) rotate(-40deg), settle à (0,0) */
/* centré : +259px sur X, settle à (259, 0) */
@keyframes dropBlueMove {
  0%   { opacity: 0; transform: translate(139px, -35px) rotate(-40deg) scale(.965); }
  6%   { opacity: 1; }
  45%  { opacity: 1; transform: translate(259px, 0) rotate(0deg) scale(1); }
  55%  { opacity: 1; transform: translate(259px, 0) rotate(0deg) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* drop-turquoise — original : translate(114, 43) rotate(40deg), settle à (0,0) */
/* centré : +259px sur X, settle à (259, 0) */
@keyframes dropTurquoiseMove {
  0%   { opacity: 0; transform: translate(373px, 43px) rotate(40deg) scale(.965); }
  6%   { opacity: 1; }
  45%  { opacity: 1; transform: translate(259px, 0) rotate(0deg) scale(1); }
  55%  { opacity: 1; transform: translate(259px, 0) rotate(0deg) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* wave — original : scale(.99) → scale(1), position déjà au centre du symbole */
/* centré : à +259px, settle à (259, 0) */
@keyframes waveReveal {
  0%   { opacity: 0; transform: translate(259px, 0) scale(.99); }
  45%  { opacity: 1; transform: translate(259px, 0) scale(1); }
  55%  { opacity: 1; transform: translate(259px, 0) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* esms text — glisse de gauche à droite via clip-path */
@keyframes esmsSlideIn {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Base */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p, blockquote, h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

body {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: rgb(250, 250, 251);
}

/* Selection par page */

#home-page ::selection {
  background-color: rgb(33, 37, 41);
  color: rgb(250, 250, 251);
}

#lab-po38yag ::selection {
  background-color: rgb(40, 205, 232);
  color: rgb(250, 250, 251);
}

#approche-page ::selection {
  background-color: rgb(105, 148, 255);
  color: rgb(33, 37, 41);
}

#ml-page ::selection,
#conf-page ::selection {
  background-color: rgb(31, 95, 207);
  color: rgb(250, 250, 251);
}

#home-page {
  animation: page-bg-landscape linear both;
  animation-timeline: scroll(root);
}

/* Landscape — transition au bleu vers 25-30% (about visible à ~25% du scroll) */
@keyframes page-bg-landscape {
  0%   { background-color: rgb(105, 148, 255); }
  25%  { background-color: rgb(105, 148, 255); }
  30%  { background-color: rgb(31, 95, 207); }
  50%  { background-color: rgb(31, 95, 207); }
  65%  { background-color: rgb(250,250,251); }
  100% { background-color: rgb(250,250,251); }
}

/* Portrait — page plus longue, le about-left arrive vers 15% du scroll */
@keyframes page-bg-portrait {
  0%   { background-color: rgb(105, 148, 255); }
  15%  { background-color: rgb(105, 148, 255); }
  20%  { background-color: rgb(31, 95, 207); }
  35%  { background-color: rgb(31, 95, 207); }
  65%  { background-color: rgb(31, 95, 207); }
  70%  { background-color: rgb(250, 250, 251); }
  100% { background-color: rgb(250,250,251); }
}

@media (orientation: portrait) {
  #home-page {
    animation: page-bg-portrait linear both;
    animation-timeline: scroll(root);
  }
}

/* Hierarchie typographique */

h1 {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  font-weight: 700;
}

h2 {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  font-weight: 600;
}

h3 {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-style: italic;
}

p {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  font-weight: 400;
}

blockquote, em {
  font-family: 'Host Grotesk Italic', system-ui, sans-serif;
  font-weight: 400;
}

small, caption, .caption {
  font-family: 'Host Grotesk Italic', system-ui, sans-serif;
  font-weight: 300;
}

/* Etats des liens */

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid rgb(31, 95, 207);
  outline-offset: 3px;
  border-radius: 3px;
}

a:active {
  text-decoration: underline;
}

/* Boutons — curseur par defaut pour accessibilite */

button, [role="button"] {
  cursor: default;
}

/* Header nav links */

#link-expertises:hover,
#link-approche:hover,
#link-accueil:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* CTA boutons — override les etats liens texte */

#btn-formation:hover {
  color: rgb(250,250,251);
  outline: 2px solid rgb(31, 95, 207);
  outline-offset: 3px;
}

#btn-expertises:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#btn-discover:hover {
  text-decoration: none;
  outline: 2px solid #fafafb;
  outline-offset: 3px;
}

#btn-formation:focus-visible,
#btn-discover:focus-visible,
#btn-expertises:focus-visible {
  outline: 2px solid rgb(31, 95, 207);
  outline-offset: 3px;
}

#btn-formation:active {
  text-decoration: none;
  background-color: rgb(20, 63, 143);
  transform: scale(0.97);
}

#btn-expertises:active {
  transform: scale(0.97);
}

#btn-discover:active {
  text-decoration: none;
  transform: scale(0.97);
}



/* Entrance animations — scroll-driven */

#hero-text,
#about-photo-wrap,
#about-left,
#about-right,
#testimonials-title,
#testimonial-1,
#testimonial-2,
#testimonial-3,
#testimonial-4,
#testimonial-5,
#testimonial-6,
#cta-expertises,
#footer-qualiopi {
  animation: fade-slide-up ease both;
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
}

@keyframes fade-slide-up {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}

/* Staggered testimonial cards */

#testimonial-2 { animation-delay: 80ms; }
#testimonial-3 { animation-delay: 160ms; }
#testimonial-4 { animation-delay: 40ms; }
#testimonial-5 { animation-delay: 120ms; }
#testimonial-6 { animation-delay: 200ms; }

/* About section text fade */

#about-right {
  animation-range: entry 5% entry 40%;
}

/* Subtle hover lift on testimonial cards */

#testimonial-1,
#testimonial-2,
#testimonial-3,
#testimonial-4,
#testimonial-5,
#testimonial-6 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#testimonial-1:hover,
#testimonial-2:hover,
#testimonial-3:hover,
#testimonial-4:hover,
#testimonial-5:hover,
#testimonial-6:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Footer linkedin hover */

#footer-linkedin:hover {
  text-decoration: none;
}

/* Header glassmorphism */

#header-menu {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}


/* Mobile menu overlay */

#mobile-overlay.open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100svw !important;
  height: 100svh !important;
}

body:has(#mobile-overlay.open) {
  overflow: hidden;
}

#mobile-close:hover {
  background-color: rgb(15, 45, 110);
}

#mobile-close:focus-visible {
  outline: 2px solid rgb(250, 250, 251);
  outline-offset: 3px;
}

#mobile-link-expertises:hover,
#mobile-link-approche:hover,
#mobile-link-accueil:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

#mobile-link-expertises:focus-visible,
#mobile-link-approche:focus-visible,
#mobile-link-accueil:focus-visible {
  outline: 2px solid rgb(250, 250, 251);
  outline-offset: 3px;
  border-radius: 3px;
}

#mobile-btn-formation:hover {
  background-color: rgb(230, 235, 248);
}

#mobile-btn-formation:focus-visible {
  outline: 2px solid rgb(31, 95, 207);
  outline-offset: 3px;
}

#menu-toggle-btn:focus-visible {
  outline: 2px solid rgb(31, 95, 207);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Logo link — no underline on hover */

#logo-link:hover {
  text-decoration: none;
}

/* Footer links — underline on hover */

#footer-privacy:hover,
#footer-legal:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero image — fade in + scale */

#hero-image {
  animation: hero-img-reveal 1.2s ease both;
  animation-delay: 0.3s;
}

@keyframes hero-img-reveal {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Expertise articles — scroll reveal */

#exp-petite-enfance,
#exp-medico-social,
#exp-sanitaire,
#exp-management,
#exp-rh-qvt,
#exp-qualite,
#exp-vae {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#exp-petite-enfance.exp-visible,
#exp-medico-social.exp-visible,
#exp-sanitaire.exp-visible,
#exp-management.exp-visible,
#exp-rh-qvt.exp-visible,
#exp-qualite.exp-visible,
#exp-vae.exp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Expertise accordion */

[id^="exp-"][id$="-header"] {
  cursor: pointer;
}

[id^="exp-"][id$="-title"] {
  transition: font-weight 0.2s ease;
}

[id^="exp-"][id$="-toggle"] {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

[id^="exp-"][id$="-header"].exp-open [id^="exp-"][id$="-title"] {
  font-weight: 300 !important;
}

@media (hover: hover) {
  [id^="exp-"][id$="-header"]:hover [id^="exp-"][id$="-title"] {
    font-weight: 300 !important;
  }

  [id^="exp-"][id$="-header"]:hover [id^="exp-"][id$="-toggle"] {
    background-color: rgba(250, 250, 251, 0.15);
    transform: scale(0.67);
  }
}

@media (hover: none) {
  [id^="exp-"][id$="-toggle"] {
    transition: transform 0.4s ease-out, background-color 0.4s ease-out;
  }

  [id^="exp-"][id$="-header"]:active [id^="exp-"][id$="-toggle"] {
    background-color: rgba(250, 250, 251, 0.15);
    transform: scale(0.67);
    transition: transform 0.1s ease-in, background-color 0.1s ease-in;
  }
}

[id^="exp-"][id$="-toggle"]:focus-visible {
  outline: 2px solid rgb(250, 250, 251);
  outline-offset: 3px;
}

#exp-cta-link:hover {
  text-decoration: none;
  outline: 2px solid rgb(250, 250, 251);
  outline-offset: 3px;
}

#exp-cta-link:focus-visible {
  outline: 2px solid rgb(250, 250, 251);
  outline-offset: 3px;
}

#exp-cta-link:active {
  transform: scale(0.97);
}

#eng-cta:hover {
  text-decoration: none;
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
}

#eng-cta:focus-visible {
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
}

#eng-cta:active {
  transform: scale(0.97);
}



/* === Generated from elements === */