/* ==========================================================================
   Ikigai — hero animé (cadre d'ouverture de la présentation)
   Personnalité de mouvement : « Premium » (élégant, sans rebond).
   - Courbe signature : cubic-bezier(0.4, 0, 0.2, 1)
   - Durées : rapide 240 ms, standard 480 ms, lente 900 ms
   - Entrée type : montée de 16 à 24 unités + fondu, ou démasquage par le bas
   Sans JavaScript, tout s'affiche dans son état final (rien n'est caché).
   ========================================================================== */

.ik-hero {
  --ink: #16130e;
  --paper: #fcf4e4;
  --vermillon: #c43a1f;      /* accent : 4,8:1 sur le papier (AA) */
  --ink-soft: rgba(22, 19, 14, .62);
  --rule: rgba(22, 19, 14, .22);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  position: relative;
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* Grain de papier (couche d'ambiance fixe) */
.ik-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .086  0 0 0 0 .075  0 0 0 0 .055  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.ik-hero__grid {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 48fr 52fr;
  align-items: center;
  gap: 2cqw;
  padding: 3.4cqw 5cqw 6.2cqw;
  box-sizing: border-box;
}

/* ---------- Colonne texte ---------- */
.ik-hero__texte { align-self: center; }

.ik-hero__kicker {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  margin: 0 0 2.2cqw;
  font: 500 .84cqw/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ik-hero__filet {
  display: block;
  width: 4.2cqw;
  height: 1px;
  background: var(--ink);
  transform-origin: left center;
}

.ik-hero h1 { margin: 0; font-weight: 400; }
.ik-hero__mot {
  display: block;
  font: 600 10.2cqw/.92 var(--serif);
  letter-spacing: -.025em;
  margin-left: -.06em;
}
/* Chaque lettre sort d'un masque (révélation par le bas) */
.ik-hero__lettre-masque { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin-bottom: -.14em; }
.ik-hero__lettre { display: inline-block; }
.ik-hero__h1-sous {
  display: block;
  margin-top: 1.3cqw;
  font: 400 1.42cqw/1.3 var(--sans);
  letter-spacing: -.005em;
}

.ik-hero__jp {
  margin: 1.4cqw 0 0;
  font: 400 .98cqw/1.4 var(--sans);
  color: var(--ink-soft);
}
.ik-hero__jp span[lang="ja"] { font-family: var(--jp); font-size: 1.15em; color: var(--vermillon); letter-spacing: .08em; margin-right: .4em; }

.ik-hero__intro {
  max-width: 36ch;
  margin: 1.9cqw 0 0;
  font: 400 1.14cqw/1.6 var(--sans);
}
.ik-hero__citation {
  margin: 1.4cqw 0 0;
  padding-left: 1.2cqw;
  border-left: 2px solid var(--vermillon);
  font: italic 400 1.24cqw/1.45 var(--serif);
}

.ik-hero__citation p { margin: 0; }
.ik-hero .ik-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ik-hero__chiffres {
  display: flex;
  gap: 2.6cqw;
  margin: 2.2cqw 0 0;
  padding: 1.4cqw 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.ik-hero__chiffres li { display: flex; flex-direction: column; gap: .3cqw; }
.ik-hero__nombre { font: 600 3cqw/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.ik-hero__libelle { font: 500 .78cqw/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.ik-hero__indice {
  position: absolute;
  left: 5cqw;
  bottom: 2.4cqw;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .8cqw;
  font: 500 .8cqw/1 var(--sans);
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.ik-hero__indice kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.9cqw;
  height: 1.9cqw;
  padding: 0 .5cqw;
  border: 1px solid var(--rule);
  border-radius: .3cqw;
  font: 500 .78cqw/1 var(--sans);
  color: var(--ink);
  background: rgba(255, 255, 255, .45);
}
.ik-hero__fleche { display: inline-block; }

/* ---------- Diagramme ---------- */
.ik-hero__schema { position: relative; height: 100%; display: grid; place-items: center; }
.ik-hero__schema svg { width: min(100%, 44cqw); height: auto; overflow: visible; }

/* Halo lumineux derrière le centre (ambiance) */
.ik-hero__halo-p { position: absolute; inset: 0; pointer-events: none; }   /* plan de parallaxe */
.ik-hero__halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 34cqw; height: 34cqw;
  margin: -17cqw 0 0 -17cqw;
  pointer-events: none;
}
.ik-hero__halo::before {                /* le dégradé porte la dérive d'ambiance ; le bloc, l'entrée et la parallaxe */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 58, 31, .16), rgba(196, 58, 31, .05) 55%, transparent 72%);
}

/* Pas de vector-effect: non-scaling-stroke : il empêche le navigateur d'accélérer les
   transformations des cercles (entrée, respiration) et les renvoie sur le fil principal. */
.ik-hero .cercle-trait { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ik-hero .cercle-fond { fill: var(--ink); fill-opacity: .045; mix-blend-mode: multiply; }
.ik-hero .centre-fond { fill: var(--vermillon); }
.ik-hero .onde { fill: none; stroke: var(--vermillon); stroke-width: .8; opacity: 0; }

.ik-hero .t-cercle { font: 400 13.5px/1 var(--sans); fill: var(--ink); letter-spacing: .01em; }
.ik-hero .t-inter { font: 600 11px/1 var(--sans); fill: var(--ink); letter-spacing: .22em; text-transform: uppercase; }
.ik-hero .t-centre { font: italic 600 25px/1 var(--serif); fill: var(--paper); letter-spacing: .01em; }
.ik-hero .t-centre-jp { font: 400 11px/1 var(--jp); fill: var(--paper); letter-spacing: .25em; opacity: .9; }

/* Repères d'impression aux coins (clin d'œil au studio d'impression) */
.ik-hero__reperes { position: absolute; inset: 1.6cqw; z-index: 2; pointer-events: none; }
.ik-hero__repere { position: absolute; width: 1.5cqw; height: 1.5cqw; }
.ik-hero__repere::before, .ik-hero__repere::after { content: ""; position: absolute; background: var(--ink); opacity: .55; }
.ik-hero__repere::before { width: 100%; height: 1px; top: 50%; }
.ik-hero__repere::after { width: 1px; height: 100%; left: 50%; }
.ik-hero__repere--hg { top: 0; left: 0; } .ik-hero__repere--hd { top: 0; right: 0; }
.ik-hero__repere--bg { bottom: 0; left: 0; } .ik-hero__repere--bd { bottom: 0; right: 0; }

/* Éléments SVG animés : la transformation se calcule sur leur propre boîte */
.ik-hero svg g, .ik-hero svg circle, .ik-hero svg text { transform-box: fill-box; transform-origin: center; }

/* ---------- Couche d'ambiance (après l'entrée) ---------- */
.ik-hero.is-vivant .respire { animation: ikRespire var(--duree, 7s) ease-in-out infinite alternate; animation-delay: var(--decalage, 0s); }
.ik-hero.is-vivant .ik-hero__halo::before { animation: ikHalo 14s ease-in-out infinite alternate; }
.ik-hero.is-vivant .ik-hero__fleche { animation: ikFleche 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
.ik-hero.is-pause .respire,
.ik-hero.is-pause .ik-hero__halo::before,
.ik-hero.is-pause .ik-hero__fleche { animation-play-state: paused; }

@keyframes ikRespire { from { transform: translate(0, 0) scale(.992); } to { transform: translate(var(--dx, 0), var(--dy, -3px)) scale(1.008); } }
@keyframes ikHalo { from { transform: translate(-1.2cqw, .6cqw) scale(.96); opacity: .85; } to { transform: translate(1cqw, -.8cqw) scale(1.04); opacity: 1; } }
@keyframes ikFleche { 0%, 55%, 100% { transform: translateX(0); } 75% { transform: translateX(.35cqw); } }

/* Pendant l'entrée, aucun « flash » : le script masque les éléments dès le
   chargement (classe sur <html>) et les fait apparaître lui-même. Filet de
   sécurité : la classe ik-hero-pret, posée au bout de 3 s, révèle tout. */
html.ik-hero-js:not(.ik-hero-pret) .ik-hero:not(.is-lance) [data-entree] { opacity: 0; }

/* ---------- Écrans étroits : mise en page empilée ---------- */
@container (max-width: 760px) {
  .ik-hero__grid { aspect-ratio: auto; grid-template-columns: 1fr; padding: 9cqw 6cqw 10cqw; gap: 6cqw; }
  .ik-hero__mot { font-size: 21cqw; }
  .ik-hero__kicker { font-size: 2.6cqw; margin-bottom: 4cqw; white-space: normal; letter-spacing: .12em; }
  .ik-hero__filet { width: 8cqw; }
  .ik-hero__h1-sous { font-size: 4.6cqw; margin-top: 3cqw; }
  .ik-hero__jp { font-size: 3.4cqw; margin-top: 3cqw; }
  .ik-hero__intro { font-size: 4.1cqw; margin-top: 4cqw; }
  .ik-hero__citation { font-size: 4.1cqw; padding-left: 3cqw; margin-top: 3cqw; }
  .ik-hero__chiffres { gap: 6cqw; margin-top: 5cqw; padding-top: 4cqw; flex-wrap: wrap; }
  .ik-hero__nombre { font-size: 8.5cqw; }
  .ik-hero__libelle { font-size: 2.6cqw; }
  .ik-hero__schema svg { width: 100%; }
  .ik-hero .cercle-trait { stroke-width: 2.2; }   /* le trait suit l'échelle du schéma : on l'épaissit en petit */
  .ik-hero__halo { width: 90cqw; height: 90cqw; margin: -45cqw 0 0 -45cqw; }
  .ik-hero__indice { display: none; }   /* raccourcis clavier : inutiles sur téléphone */
  .ik-hero__reperes { inset: 3cqw; }
  .ik-hero__repere { width: 4cqw; height: 4cqw; }
}

@media (pointer: coarse) { .ik-hero__indice { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ik-hero.is-vivant .respire,
  .ik-hero.is-vivant .ik-hero__halo::before,
  .ik-hero.is-vivant .ik-hero__fleche { animation: none; }
}