/* =========================================================
   Gaël Auriol — sections
   ========================================================= */

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + clamp(1rem, 4vw, 3rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
}
.hero__name {
  font-size: var(--fs-mega);
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
}
.hero__lede { color: var(--mist); max-width: 46ch; }
.hero__lede strong, .hero__lede { }
.hero__brands {
  margin-top: 2rem;
  display: grid; gap: 0.85rem;
  max-width: 46ch;
}
.hero__brand {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: baseline;
  padding-block: 0.6rem;
  border-top: var(--rule);
  color: var(--mist);
  font-size: 0.95rem;
}
.hero__brand:last-child { border-bottom: var(--rule); }
.hero__brand b { color: var(--chalk); font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: none; }
.dot--onyx    { background: var(--onyx-ember); }
.dot--prevent { background: #33C3D0; }
.dot--ozeo    { background: var(--ozeo-orange); }

.hero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Trois sphères — une par maison — qui se rencontrent et s'entremêlent.
   Le filtre « goo » (SVG) fond les recouvrements en un col : les gouttes se
   touchent et les couleurs se mélangent. */
.hero__orbs { position: relative; height: min(70vh, 620px); }
.hero__orbs::before {
  content: ""; position: absolute; inset: 4%;
  background: radial-gradient(circle at 50% 46%, rgba(203,168,126,0.10), transparent 60%);
  pointer-events: none;
}
.orb-cluster {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(440px, 98%); aspect-ratio: 1;
}
/* Sphères translucides : dégradé radial fondu jusqu'à l'alpha 0, fusion
   « screen » → les recouvrements s'ajoutent, on voit à travers chacune. */
.orb {
  position: absolute; width: 54%; aspect-ratio: 1; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
/* Onyx = braise (rouge chaud) ; OZéO = orange vif (rehaut jaune) ; Prevent = cyan. */
.orb--onyx    { top: 10%; left: 6%;  background: radial-gradient(circle at 36% 30%, rgba(255,201,138,0.95), rgba(234,119,50,0.72) 42%, rgba(163,40,20,0.32) 76%, rgba(94,18,6,0) 100%); }
.orb--prevent { top: 5%;  left: 40%; background: radial-gradient(circle at 36% 30%, rgba(215,245,248,0.95), rgba(52,198,210,0.72) 44%, rgba(30,147,160,0.30) 78%, rgba(14,90,99,0) 100%); }
.orb--ozeo    { top: 38%; left: 22%; background: radial-gradient(circle at 36% 30%, rgba(255,215,102,0.95), rgba(236,103,26,0.72) 44%, rgba(178,63,18,0.30) 78%, rgba(110,42,14,0) 100%); }

/* Sphères de particules Three.js : le canvas remplit le conteneur et masque
   les orbes CSS (qui restent le repli si WebGL/Three est indisponible). */
.hero__orbs canvas { position: absolute; top: 0; left: 0; }
.hero__orbs.has-webgl .orb-cluster { display: none; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--mist-dim); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.2em;
}
.hero__scroll:hover { color: var(--gold-hi); }
.hero__scroll span.line {
  width: 1px; height: 2.2rem; background: linear-gradient(var(--gold-dim), transparent);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__orbs { display: none; }
  .hero { min-height: auto; }
}

/* =========================================================
   Intro « Les trois maisons »
   ========================================================= */
.maisons__intro { display: grid; gap: 1.4rem; max-width: 62ch; }
.maisons__intro .display { font-size: var(--fs-h2); }

/* =========================================================
   Portails de marque — chacun dans SA couleur
   ========================================================= */
.portal { position: relative; overflow: hidden; border-top: var(--rule); }
.portal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.portal__body { display: grid; gap: 1.15rem; align-content: start; position: relative; z-index: 2; }
.portal__index {
  font-weight: 600; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.18em;
}
.portal__logo { height: clamp(46px, 6vw, 64px); width: auto; }
.portal__tagline { font-size: clamp(1.7rem, 3.4vw, 2.7rem); max-width: 18ch; }
.portal__desc { color: var(--mist); max-width: 46ch; }
.portal__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.portal__tags li {
  font-size: 0.76rem; letter-spacing: 0.04em;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--mist);
}
.portal__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.7rem; padding-bottom: 5px;
  font-weight: 600; letter-spacing: 0.01em;
}
/* Souligné plein, dans la couleur de la marque : le survol de la maison est
   franc, jamais ton-sur-ton. Il réagit au survol de tout le portail. */
.portal__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.portal:hover .portal__link::after,
.portal__link:hover::after { transform: scaleX(1); }
.portal__link span { transition: transform 0.25s ease; }
.portal:hover .portal__link span,
.portal__link:hover span { transform: translate(3px, -3px); }

.portal__art { position: relative; min-height: 260px; display: grid; place-items: center; perspective: 900px; }

/* ---- Onyx : noir froid, l'anneau de braise ---- */
.portal--onyx { background: radial-gradient(120% 130% at 82% 12%, #101319, var(--onyx-ink) 68%); color: var(--chalk); }
.portal--onyx .portal__index { color: var(--onyx-ember); }
.portal--onyx .portal__link { color: var(--onyx-ember); }
.portal--onyx .portal__link:hover { color: #FFC98A; }
/* Le vrai tore 3D du logo Onyx (canvas 2D, ring.js). */
.onyx-torus { width: min(360px, 84%); height: auto; aspect-ratio: 1; }

/* ---- Prevent : le carton clair, les pétales ---- */
.portal--prevent { background: var(--prevent-paper); color: var(--prevent-ink); }
.portal--prevent .portal__index { color: var(--prevent-teal); }
.portal--prevent .portal__desc { color: #4D6A7F; }
.portal--prevent .portal__tags li { border-color: #CFE0E6; color: var(--prevent-navy); }
.portal--prevent .portal__link { color: var(--prevent-teal); }
.portal--prevent .portal__link:hover { color: var(--prevent-ink); }
/* Les 3 pétales du logo Prevent (SVG relevé au pixel), qui s'ouvrent à
   l'entrée du portail puis respirent. mix-blend multiply → les recouvrements
   virent au navy, comme sur le logo. */
.petals-wrap { width: min(440px, 100%); }
.petals-svg { width: 100%; height: auto; overflow: visible; }
.petal { mix-blend-mode: multiply; }

/* ---- OZéO : le noir chaud, les confettis ---- */
.portal--ozeo { background: radial-gradient(120% 130% at 18% 12%, var(--ozeo-ink2), var(--ozeo-ink) 68%); color: var(--chalk); }
.portal--ozeo .portal__index { color: var(--ozeo-orange); }
.portal--ozeo .portal__link { color: var(--ozeo-orange); }
.portal--ozeo .portal__link:hover { color: var(--ozeo-yellow); }
.confetti { position: relative; width: min(320px, 76%); aspect-ratio: 1; }
.confetti__orb {
  position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FBBC19, #EC671A 52%, #C83118 100%);
  filter: drop-shadow(0 18px 40px rgba(236,103,26,0.35));
}
.confetti i { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.confetti i:nth-child(1) { background: var(--ozeo-orange);  top: 6%;  left: 20%; }
.confetti i:nth-child(2) { background: var(--ozeo-magenta); top: 14%; right: 12%; width: 18px; height: 18px; }
.confetti i:nth-child(3) { background: var(--ozeo-yellow);  bottom: 20%; left: 8%; width: 11px; height: 11px; }
.confetti i:nth-child(4) { background: var(--ozeo-cyan);    bottom: 8%;  right: 22%; width: 16px; height: 16px; }
.confetti i:nth-child(5) { background: var(--ozeo-red);     top: 44%; left: 2%; width: 10px; height: 10px; }
.confetti i:nth-child(6) { background: var(--ozeo-yellow);  top: 4%;  right: 34%; width: 9px; height: 9px; }

@media (max-width: 860px) {
  .portal__grid { grid-template-columns: minmax(0, 1fr); }
  .portal__art { order: -1; min-height: 200px; }
}

/* =========================================================
   Qui suis-je — portrait + biographie
   ========================================================= */
.profil__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.profil__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.25rem; }
.portrait {
  position: relative;
  width: min(240px, 70%);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.portrait::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -60px 60px -30px rgba(11,11,13,0.6);
}
.profil__caption .name { font-family: var(--serif); font-size: 1.6rem; }
.profil__caption .roles { color: var(--mist); font-size: var(--fs-small); margin-top: 0.25rem; }
.profil__bio { display: grid; gap: 1.1rem; }
.profil__bio .lede { margin-bottom: 0.6rem; }

@media (max-width: 780px) {
  .profil__grid { grid-template-columns: minmax(0, 1fr); }
  .profil__aside { position: static; }
  .portrait { width: 200px; }
}

/* =========================================================
   Frise de carrière
   ========================================================= */
.timeline { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding-left: 2.4rem; }
.timeline__track {
  position: absolute; left: 9px; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: var(--line);
}
.timeline__fill {
  position: absolute; inset: 0; background: linear-gradient(var(--gold), var(--gold-dim));
  transform-origin: 50% 0%;
}
.step { position: relative; padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.step:last-child { padding-bottom: 0; }
.step__dot {
  position: absolute; left: calc(-2.4rem + 3px); top: 0.35rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-800); border: 2px solid var(--line-2);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.step.is-in .step__dot {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(203,168,126,0.14);
}
.step__year { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.step__title { font-family: var(--serif); font-size: 1.5rem; margin-top: 0.15rem; line-height: 1.2; }
.step__text { color: var(--mist); max-width: 56ch; margin-top: 0.4rem; }
.step { opacity: 0.55; transition: opacity 0.5s ease; }
.step.is-in { opacity: 1; }

/* =========================================================
   Rôles
   ========================================================= */
.roles__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: var(--rule); border-radius: var(--radius); overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) {
  .roles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .roles__grid { grid-template-columns: 1fr; }
}
.role {
  background: var(--ink-925);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: grid; gap: 0.5rem; align-content: start;
  transition: background 0.25s ease;
}
.role:hover { background: var(--ink-850); }
.role__label { font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.role__title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.role__text { color: var(--mist); font-size: var(--fs-small); }

/* =========================================================
   Contact
   ========================================================= */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.contact__channels { display: grid; gap: 0.5rem; margin-top: 1.75rem; }
.contact__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.1rem 0; border-top: var(--rule);
  color: var(--chalk); font-size: 1.05rem;
}
.contact__row:last-child { border-bottom: var(--rule); }
.contact__row .label { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mist-dim); margin-bottom: 0.2rem; }
.contact__row a { color: var(--chalk); }
.contact__row a:hover { color: var(--gold-hi); }
.contact__row .arrow { color: var(--gold); }
.contact__intro { color: var(--mist); max-width: 44ch; margin-top: 1rem; }

.contact__form-wrap {
  background: var(--ink-925); border: var(--rule); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}