/* =========================================================================
   irh-partner.com — page de redirection
   Hey HR !  ·  IARH Consulting
   ========================================================================= */

/* -- Web fonts servies en local (aucun service tiers à l'exécution) ------- */

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/quicksand-variable.woff2") format("woff2-variations"),
       url("fonts/quicksand-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/carlito-400.woff2") format("woff2");
}

@font-face {
  font-family: "Carlito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/carlito-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/carlito-700.woff2") format("woff2");
}

/* -- Variables ------------------------------------------------------------ */

:root {
  /* Hey HR ! — couleurs officielles */
  --hh-blue:        #1E97D5;
  --hh-blue-dark:   #167AB0;
  --hh-turquoise:   #00B0C0;

  /* IARH Consulting — palette charte v1.1 */
  --iarh-navy-dark: #111E35; /* fond couverture, sections */
  --iarh-navy:      #1A2B4A; /* en-tête, cartes */
  --iarh-navy-mid:  #243654; /* secondaires */
  --iarh-steel:     #2C4A6E;
  --iarh-gold:      #C8A850; /* signature, séparateur, logo */
  --iarh-gold-lit:  #E5B94E; /* sur-titre, accent */
  --iarh-glacier:   #BDD4EA;
  --iarh-grey-mid:  #6B7FA3;

  /* Neutres */
  --offwhite:       #F4F6F9;
  --white:          #FFFFFF;
  --ink:            #1A2B4A;
  --ink-soft:       #4A5A78;

  /* Typographies */
  --font-display: "Quicksand", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-iarh:    Calibri, "Carlito", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Carlito", Calibri, "Helvetica Neue", Arial, sans-serif;

  /* Élévations */
  --shadow-card:   0 12px 36px rgba(17, 30, 53, 0.10);
  --shadow-lift:   0 22px 60px rgba(17, 30, 53, 0.18);
  --shadow-portrait: 0 18px 48px rgba(17, 30, 53, 0.22);
}

/* -- Reset minimal -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* -- Layout général ------------------------------------------------------- */

main { display: block; }

/* =========================================================================
   ZONE 1 — Hero
   ========================================================================= */

.hero {
  background: var(--offwhite);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px);
}

.hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-iarh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iarh-gold);
}

.hero-title {
  margin: 0 auto 28px;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--iarh-navy-dark);
}

.hero-lead {
  margin: 0 auto;
  max-width: 56ch;
  font-family: var(--font-iarh);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.lead-brand {
  font-weight: 700;
  white-space: nowrap;
}
.lead-brand--hh   { font-family: var(--font-display); color: var(--hh-blue); }
.lead-brand--iarh { font-family: var(--font-iarh); color: var(--iarh-navy-dark); letter-spacing: 0.04em; }

/* Portrait fondateur ------------------------------------------------------ */

.founder {
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 56ch;
}

.founder-portrait {
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 3px var(--iarh-gold),
    var(--shadow-portrait);
  background: var(--iarh-navy-dark);
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.founder-caption {
  margin: 22px auto 0;
  font-family: var(--font-iarh);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =========================================================================
   ZONE 2 — Les deux marques
   ========================================================================= */

.brands {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--offwhite);
  isolation: isolate; /* pour le séparateur en pseudo-element */
}

/* Séparateur central : dégradé bleu Hey HR ! → or IARH */
.brands::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    var(--hh-turquoise) 0%,
    var(--hh-blue) 28%,
    var(--iarh-navy) 56%,
    var(--iarh-gold) 100%
  );
  border-radius: 2px;
  opacity: 0.7;
}

.brand {
  position: relative;
  display: flex;
  align-items: stretch;
}

.brand-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-logo {
  height: clamp(96px, 9vw, 128px);
  width: auto;
  margin-bottom: clamp(24px, 2.6vw, 32px);
}
.brand-logo--iarh { height: clamp(56px, 6vw, 80px); }

.brand-tagline {
  margin: 0 0 14px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  font-weight: 600;
}

.brand-subtagline {
  margin: 0 0 clamp(28px, 3vw, 40px);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
}

/* -- Côté Hey HR ! -------------------------------------------------------- */

.brand--hh {
  background: var(--white);
  color: var(--ink);
}
.brand--hh .brand-inner { padding-right: clamp(36px, 5vw, 80px); }

.brand--hh .brand-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--iarh-navy-dark);
}

.brand--hh .brand-inner::before {
  /* Petit accent turquoise façon paraphe Hey HR ! */
  content: "";
  width: 56px;
  height: 3px;
  margin-bottom: 32px;
  background: linear-gradient(90deg, var(--hh-blue), var(--hh-turquoise));
  border-radius: 2px;
}

.brand-cta--hh {
  background: var(--hh-blue);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(30, 151, 213, 0.28);
}
.brand-cta--hh:hover,
.brand-cta--hh:focus-visible {
  background: var(--hh-turquoise);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 176, 192, 0.34);
}
.brand-cta--hh:active { transform: translateY(0); }

/* -- Côté IARH Consulting -------------------------------------------------
   Fond offWhite (« Blanc cassé » charte IARH v1.1, fond slides de contenu)
   pour rester compatible avec le logo "fond clair" et conserver l'écriture
   IARH lisible. Le marqueur de marque, c'est la barre verticale or et l'or
   du bouton (signature charte). */

.brand--iarh {
  background: var(--offwhite);
  color: var(--iarh-navy);
  font-family: var(--font-iarh);
}

/* Barre verticale or signature IARH (charte v1.1) */
.brand--iarh .brand-inner {
  padding-left: clamp(36px, 5vw, 80px);
  border-left: 3px solid var(--iarh-gold);
}

.brand--iarh .brand-tagline {
  color: var(--iarh-navy-dark);
  font-family: var(--font-iarh);
  letter-spacing: 0.005em;
}

.brand--iarh .brand-subtagline {
  color: var(--iarh-grey-mid);
}

.brand-cta--iarh {
  background: var(--iarh-gold);
  color: var(--iarh-navy-dark);
  box-shadow: 0 10px 24px rgba(17, 30, 53, 0.4);
}
.brand-cta--iarh:hover,
.brand-cta--iarh:focus-visible {
  background: var(--iarh-gold-lit);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(229, 185, 78, 0.32);
}
.brand-cta--iarh:active { transform: translateY(0); }

/* -- Bouton commun -------------------------------------------------------- */

.brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-iarh);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}
.brand-cta-arrow {
  transition: transform 220ms ease;
  display: inline-block;
}
.brand-cta:hover .brand-cta-arrow,
.brand-cta:focus-visible .brand-cta-arrow {
  transform: translateX(4px);
}

/* Focus accessible : outline cohérent avec la marque */
.brand-cta--hh:focus-visible   { outline: 3px solid var(--hh-turquoise); outline-offset: 3px; }
.brand-cta--iarh:focus-visible { outline: 3px solid var(--iarh-gold-lit); outline-offset: 3px; }

/* =========================================================================
   ZONE 3 — Pied de page
   ========================================================================= */

.legal {
  background: var(--iarh-navy);
  color: var(--iarh-grey-mid);
  padding: 28px clamp(20px, 4vw, 56px);
  border-top: 2px solid var(--iarh-gold);
}
.legal-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.legal-line {
  margin: 4px 0;
  font-family: var(--font-iarh);
  font-size: 13px;
  line-height: 1.6;
}
.legal-line a {
  color: var(--iarh-glacier);
  text-decoration: none;
  border-bottom: 1px solid rgba(189, 212, 234, 0.35);
  transition: border-color 200ms ease, color 200ms ease;
}
.legal-line a:hover,
.legal-line a:focus-visible {
  color: var(--iarh-gold-lit);
  border-bottom-color: var(--iarh-gold-lit);
}

/* =========================================================================
   Responsive — passage en colonne sous 900 px
   ========================================================================= */

@media (max-width: 900px) {
  .brands {
    grid-template-columns: 1fr;
  }
  .brands::before {
    top: 50%;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(
      90deg,
      var(--hh-turquoise) 0%,
      var(--hh-blue) 32%,
      var(--iarh-gold) 56%,
      var(--iarh-navy) 82%,
      var(--iarh-navy-dark) 100%
    );
  }
  .brand-inner { max-width: none; }
  .brand--iarh .brand-inner {
    border-left: none;
    border-top: 3px solid var(--iarh-gold);
    padding-top: clamp(40px, 6vw, 64px);
  }
  .brand--hh .brand-inner { padding-bottom: clamp(48px, 7vw, 80px); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero { padding-top: 56px; padding-bottom: 40px; }
  .brand-inner { padding: 44px 22px; }
  .brand-cta { padding: 13px 22px; font-size: 14.5px; }
}

/* =========================================================================
   Animations d'entrée — respect de prefers-reduced-motion
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > *,
  .brand-inner > * {
    animation: rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-title    { animation-delay: 60ms; }
  .hero-lead     { animation-delay: 160ms; }
  .founder       { animation-delay: 280ms; }

  .brand--hh   .brand-inner > *:nth-child(1) { animation-delay: 360ms; }
  .brand--hh   .brand-inner > *:nth-child(2) { animation-delay: 440ms; }
  .brand--hh   .brand-inner > *:nth-child(3) { animation-delay: 520ms; }
  .brand--hh   .brand-inner > *:nth-child(4) { animation-delay: 600ms; }
  .brand--iarh .brand-inner > *:nth-child(1) { animation-delay: 420ms; }
  .brand--iarh .brand-inner > *:nth-child(2) { animation-delay: 500ms; }
  .brand--iarh .brand-inner > *:nth-child(3) { animation-delay: 580ms; }
  .brand--iarh .brand-inner > *:nth-child(4) { animation-delay: 660ms; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* =========================================================================
   4K / très grands écrans — limite la largeur
   ========================================================================= */

@media (min-width: 1600px) {
  .brands { max-width: 1600px; margin: 0 auto; }
}

/* =========================================================================
   Print (au cas où)
   ========================================================================= */

@media print {
  .brands::before { display: none; }
  .brand--iarh   { background: var(--white); color: var(--ink); }
  .brand-cta     { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
  .legal         { background: var(--white); color: var(--ink); border-top: 1px solid var(--ink); }
}