/* hero2.css — Intro scroll (cohérent avec le thème global)
   Recommandé : charger styles.css AVANT ce fichier dans le HTML :
   <link rel="stylesheet" href="static/css/styles.css" />
   <link rel="stylesheet" href="static/css/hero2.css" />
*/

:root{
  /* Thème : reprend les variables du site si présentes (styles.css), sinon fallback */
  --bg: var(--bg, #f3efe6);
  --fg: var(--ink, #141311);
  --muted: var(--muted, #5a554b);
  --hair: var(--hairline, rgba(20,19,17,.10));
  --paper: var(--paper, #fbf9f4);
  --accent: var(--accent, #f06a00);

  --max: 1100px;

  /* Signature */
  --sig-color: rgba(20,19,17,.75);

  /* Composition */
  --stage-top-pad: 72px;       /* espace sous la topbar */
  --portrait-width: 360px;     /* base */
  --portrait-vw: 34vw;         /* responsive */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .1px;
}

/* =========================
   Top bar
========================= */
.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background: color-mix(in oklab, var(--bg) 86%, white 14%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

.topbar__inner{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  height: 52px;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-brand{
  font-weight: 600;
  letter-spacing: .28em;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  opacity: .92;
}

/* =========================
   Scroll hero
========================= */
.scroll-hero{ position: relative; }

.scroll-hero__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.scroll-hero__spacer{
  height: 190vh; /* longueur de scroll (ajuste si besoin) */
}

/* Stage (ancré haut) */
.stage{
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: var(--stage-top-pad);
  padding-bottom: 45vh; /* <-- AJOUTE ÇA */
}


/* Portrait */
.portrait{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--stage-top-pad) + 30px);
  margin: 0;

  width: min(var(--portrait-width), var(--portrait-vw));
  aspect-ratio: 3 / 4;

  display: grid;
  place-items: center;

  z-index: 3;
  will-change: transform;
}

.portrait img{
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  filter: drop-shadow(0 18px 40px rgba(20,19,17,.10));
}

/* Signature */
.signature{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(980px, 92vw);
  z-index: 2;
  will-change: transform;
  pointer-events:none;
}

.signature__svg{ width:100%; height:auto; }

.sig{
  fill:none;
  stroke: var(--sig-color);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sig--main{ stroke-width: 10; }
.sig--thin{ stroke-width: 6; opacity:.8; }

/* Bloc texte qui apparaît */
.below{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: 0;
  width: min(760px, 92vw);
  text-align:center;
  opacity: 0;
  will-change: transform, opacity;
  z-index: 4;
  padding: 0 10px;
}

.quote{
  margin:0 0 10px;
  font-weight:600;
  letter-spacing:.04em;
  color: var(--fg);
}

.small{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
  margin-inline:auto;
  line-height: 1.55;
}

/* =========================
   Next section (cartes liens)
========================= */
.next{
  border-top: 1px solid var(--hair);
  background: var(--bg);
  color: var(--fg);
}

.next__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.next .kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fg) 55%, transparent);
  margin: 0 0 12px 0;
}

.next h2{
  margin: 0 0 40px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fg);
}

.next-links{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cartes sur une ligne */
  gap: 24px;
  max-width: 1100px; /* ou 100% si tu préfères */
  margin: 0 auto;    /* centre le bloc */
  align-items: stretch;
}

.next-link{
  display: block;
  padding: 32px 34px;
  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.25)
    );

  border: 1px solid var(--hair);
  color: var(--fg);

  text-decoration: none;
  cursor: pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Hover = subtil, premium */
.next-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(20,19,17,.14);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.75),
      rgba(255,255,255,.35)
    );
}

.next-link__title{
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.next-link__desc{
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

/* =========================
   Responsive
========================= */
@media (max-width: 720px){
  .hero-brand{
    letter-spacing: .18em;
    font-size: 11px;
  }
  
}
@media (prefers-reduced-motion: reduce){
  .portrait,
  .signature,
  .below{
    transition: none !important;
  }
}

@media (max-width: 980px){
  .next-links{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .next-links{
    grid-template-columns: 1fr;
  }
}

/* === Reset liens uniquement pour la section next === */
.next a,
.next a:visited,
.next a:hover,
.next a:active{
  color: inherit;
  text-decoration: none;
}


/* Variante plus éditoriale pour le blog */
.next-link--soft{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.35),
      rgba(255,255,255,.18)
    );
  border-style: dashed;
  opacity: .95;
}

.next-link--soft:hover{
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.25)
    );
}

/* =========================
   Qualités
========================= */

.qualities{
  margin-top: 36px;
  text-align: center;
}

.qualities__title{
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
}

.qualities__slider{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}


.qualities__image{
  width: 100%;
  max-width: 760px;          /* même largeur que le texte */
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--paper);
  box-shadow: 0 14px 40px rgba(20,19,17,.10);
  max-height: 30vh;
  object-fit: contain;
}


/* Flèches */
.qualities__btn{
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  color: rgba(20,19,17,.55);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}

.qualities__btn:hover{
  transform: translateY(-1px);
  color: rgba(20,19,17,.85);
}

.qualities__btn:active{
  transform: translateY(0px);
}

.qualities__btn:focus{
  outline: none;
}

.qualities__btn:focus-visible{
  outline: 2px solid rgba(240,106,0,.35);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Pagination qualités */
.qualities__pagination{
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,19,17,.55);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.qualities__frame{
  width: 100%;
  max-width: 760px;
  position: relative;
  overflow: hidden;

  /* plus de cadre / plus d’ombre */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  /* garde la hauteur stable */
  aspect-ratio: 16 / 7;
  min-height: 160px;
}




/* Les clones animés sont en absolute, pas l'image principale */
.qualities__image{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  max-height: 30vh;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}





/* Signature derrière tout (sécurité) */
.signature{ z-index: 1; }
.portrait{ z-index: 3; }
.below{ z-index: 4; }

/* clone d'image pendant l'anim (créé par le JS) */
.qualities__image.is-anim{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================
   Fix responsive hero (fenêtre étroite)
   Empêche le texte de passer sur la photo
========================= */
@media (max-width: 980px){
  /* On laisse le sticky, mais on repasse en flow normal dans la stage */
  .stage{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px; /* plus besoin de 45vh dans ce mode */
  }

  /* Portrait en position normale */
  .portrait{
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    margin-top: 18px;
    width: min(360px, 70vw);
    z-index: 3;
  }

  /* Signature optionnel : soit on la cache, soit on la met au-dessus */
  .signature{
    display: none; /* le plus safe pour éviter les collisions visuelles */
  }

  /* Texte en dessous, en position normale */
  .below{
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    opacity: 1 !important;
    width: min(760px, 92vw);
    margin-top: 14px;
    padding: 0 16px;
    z-index: 4;
  }
}

/* =========================
   NARROW MODE (piloté par JS)
   But: éviter texte sur portrait quand la fenêtre est étroite
========================= */

/* Tu peux monter/descendre ce seuil ensuite */
html.is-narrow .stage{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-bottom: 24px !important;
}

/* Portrait en flow normal */
html.is-narrow .portrait{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin-top: 18px !important;
  width: min(360px, 70vw) !important;
}

/* Texte en dessous, en flow normal */
html.is-narrow .below{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  width: min(760px, 92vw) !important;
  margin-top: 14px !important;
  padding: 0 16px !important;
}

/* Signature : le plus safe = on masque en narrow */
html.is-narrow .signature{
  display: none !important;
}

/* =========================
   NARROW: éviter le clipping (Qualités cachées)
========================= */
html.is-narrow .scroll-hero__sticky{
  position: relative !important; /* plus sticky */
  top: auto !important;
  height: auto !important;       /* laisse la hauteur suivre le contenu */
  overflow: visible !important;  /* ne coupe plus le slider */
}

html.is-narrow .scroll-hero__spacer{
  height: 0 !important;          /* plus besoin du faux scroll */
}

/* Optionnel: un peu d’air entre texte et slider en petit */
html.is-narrow .qualities{
  margin-top: 24px !important;
}

/* Optionnel: si la hauteur est vraiment petite, évite un cadre trop écrasé */
html.is-narrow .qualities__frame{
  min-height: 140px !important;
  aspect-ratio: 16 / 8 !important;
}