/* ==========================================================================
   Ascencio — page d'atterrissage temporaire
   Reproduction du hero ascencio.ca (Figma : Ascencio_Master, node 1808-1340)
   Référence de design : 1512 px de large. Les tailles fluides sont exprimées
   en vw calées sur cette largeur, bornées par clamp().
   ========================================================================== */

/* ---------- Polices (auto-hébergées, aucun appel externe) ---------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-900.woff2') format('woff2');
}
/* Sous-ensemble : majuscules, minuscules, chiffres, ponctuation courante */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/pt-sans-700.woff2') format('woff2');
}

/* ---------- Jetons ------------------------------------------------------- */

:root {
  --ascencio-blue: #0087ba;
  --white: #ffffff;
  --black: #000000;

  /* Opacité du voile noir sur la photo. 0.3 = valeur du Figma et du site
     actuel. Voir la note « Contraste » du README : monter à 0.4 fait passer
     le surtitre et l'accroche au-dessus du seuil WCAG AA pour grand texte,
     pour une différence visuelle quasi imperceptible. */
  --hero-scrim: 0.3;

  --header-height: 112px;
  --header-pad-x: 45px;
  --container-max: 1140px;   /* conteneur Elementor d'origine */
  --container-pad: 10px;     /* padding interne du conteneur */

  /* Échelle typographique fluide (valeur de design @ 1512 px) */
  --fs-contact:    clamp(12px,  0.945vw, 14.297px);  /* 14.297 */
  --fs-eyebrow:    clamp(14px,  1.587vw, 24px);      /* 24     */
  --fs-title:      clamp(38px,  6.151vw, 93px);      /* 93     */
  --fs-card-title: clamp(21px,  1.852vw, 28px);      /* 28     */
  --fs-card-sub:   clamp(15px,  1.190vw, 18px);      /* 18     */
  --fs-tagline:    clamp(17px,  1.786vw, 27px);      /* 27     */
  --icon-size:     clamp(38px,  3.307vw, 50px);      /* 50     */
  --logo-width:    clamp(190px, 16.53vw, 250px);     /* 250    */
  --divider-h:     clamp(38px,  5.952vw, 90px);      /* 90     */
}

/* ---------- Base -------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }

a { color: inherit; }

:where(a):focus-visible {
  outline: 2px solid var(--ascencio-blue);
  outline-offset: 3px;
}

/* ---------- En-tête ----------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
  padding: 0 var(--header-pad-x);
  background: var(--white);
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.site-header__logo img {
  width: var(--logo-width);
  height: auto;
}

.site-header__contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-header__contact a {
  font-weight: 700;
  font-size: var(--fs-contact);
  line-height: 1.2;
  letter-spacing: 0.1667em;   /* 2.3828 px / 14.297 px */
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__contact a:hover,
.site-header__contact a:focus-visible {
  color: var(--ascencio-blue);
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Le design mesure 882,77 px de haut @ 1512 px ; on remplit au moins la
     hauteur visible restante pour éviter une bande blanche sous le hero. */
  min-height: max(882px, calc(100svh - var(--header-height)));
  /* Padding symétrique : le contenu se centre verticalement dans le hero,
     ce qui reproduit exactement les 210 px / 215 px du fichier Figma. */
  padding: 100px 0;
  background-color: #1c1c1c;   /* teinte de repli avant chargement de l'image */
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media { display: block; }

/* Le recadrage part du bord gauche, comme dans le Figma : à 1512 px l'image
   est mise à l'échelle à 107 % de la largeur et le débord est rogné à droite. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}

.hero__overlay { background: rgb(0 0 0 / var(--hero-scrim)); }

.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
  color: var(--white);
}

/* Titre : surtitre + accroche */

.hero__heading {
  display: block;
  font-weight: 400;
}

.hero__eyebrow {
  display: block;
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.1125em;   /* 2,7 px / 24 px */
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__title {
  display: block;
  font-family: 'PT Sans', 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -0.0194em;  /* -1,8 px / 93 px */
  text-transform: uppercase;
}

/* Cartes de services (non cliquables) */

.cards {
  display: flex;
  gap: 20px;
  padding: 40px var(--container-pad) 10px;
}

.card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 30px;
  background: var(--ascencio-blue);
}

.card__icon {
  display: block;
  height: var(--icon-size);
  width: var(--icon-size);            /* ratio 1:1 — chart-bar (512×512) */
}

.card__icon--wide {
  width: calc(var(--icon-size) * 640 / 512);   /* user-cog, handshake (640×512) */
}

.card__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--white);
}

.card__title {
  font-weight: 900;
  font-size: var(--fs-card-title);
  line-height: 1.3;
  text-transform: capitalize;
  text-decoration: underline;
  text-underline-position: from-font;
  text-wrap: balance;
}

.card__sub {
  margin-top: -10px;
  font-weight: 700;
  font-size: var(--fs-card-sub);
  line-height: 1.857;
  text-wrap: balance;
}

/* Signature */

.hero__tagline {
  padding-top: 20px;
  font-weight: 800;
  font-size: var(--fs-tagline);
  line-height: 1.4;
  letter-spacing: 0.1em;      /* 2,7 px / 27 px */
  text-transform: uppercase;
  text-wrap: balance;
}

/* Biseau blanc du bas (séparateur de forme Elementor) */

.hero__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--divider-h);
  background: var(--white);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------- Page 404 ---------------------------------------------------- */
/* Même charpente que le hero, sans photo. Sert les groupes d'URL supprimés
   pour de bon (profils de candidats, comptes employeurs, archives vides). */

.hero--404 {
  min-height: max(480px, calc(100svh - var(--header-height)));
  padding: 60px 0;
  background-color: #0d0d0d;
}

.hero--404 .hero__tagline {
  padding-top: 28px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: clamp(15px, 1.19vw, 18px);
  font-weight: 700;
}

.hero__actions { padding-top: 34px; }

.btn {
  display: inline-block;
  padding: 16px 34px;
  background: var(--ascencio-blue);
  color: var(--white);
  font-weight: 800;
  font-size: clamp(13px, 0.93vw, 14px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn:hover,
.btn:focus-visible { background: #006c95; }

/* ---------- Points de rupture ------------------------------------------ */

/* Tablette : les cartes restent sur une ligne mais respirent moins */
@media (max-width: 1200px) {
  :root { --container-pad: 24px; }
}

@media (max-width: 1024px) {
  :root {
    --header-pad-x: 30px;
    --header-height: 96px;
  }
  .card { padding: 24px 18px; }
  .cards { gap: 14px; }
}

/* Cartes empilées */
@media (max-width: 860px) {
  :root {
    --fs-title:      clamp(38px, 9.5vw, 72px);
    --fs-eyebrow:    clamp(14px, 2.4vw, 20px);
    --fs-tagline:    clamp(16px, 2.6vw, 22px);
    --fs-card-title: clamp(22px, 4.2vw, 28px);
    --fs-card-sub:   clamp(15px, 2.4vw, 18px);
    --icon-size:     46px;
    --divider-h:     42px;
  }

  .hero {
    min-height: 0;
    padding: 70px 0 calc(60px + var(--divider-h));
  }

  .cards {
    flex-direction: column;
    gap: 16px;
    padding: 34px var(--container-pad) 0;
  }

  .card { padding: 26px 24px; }
  .hero__tagline { padding-top: 30px; }
}

/* Mobile : en-tête sur deux niveaux */
@media (max-width: 620px) {
  :root {
    --header-pad-x: 20px;
    --container-pad: 20px;
    --logo-width: 180px;
    --fs-contact: 11px;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    height: auto;
    padding: 22px var(--header-pad-x);
  }

  .site-header__contact {
    gap: 6px 18px;
    justify-content: flex-start;
  }

  .hero { padding: 54px 0 calc(48px + var(--divider-h)); }
  .hero__title { letter-spacing: -0.01em; }
}

/* ---------- Impression ------------------------------------------------- */

@media print {
  .hero { min-height: 0; padding: 40px 0; background: none; }
  .hero__media, .hero__overlay, .hero__divider { display: none; }
  .hero__inner { color: #000; }
  .card { background: none; border: 1px solid #ccc; }
  .card__icon svg { fill: #000; }
}