/* =========================================================================
   base.css — Le système, calqué sur celui de sakazuki.io
   Palette claire, deux courbes d'easing, révélation de texte ligne par ligne,
   liens à texte doublé, bandeaux défilants, angles coupés.
   ========================================================================= */

:root {
  /* --- Palette. Même rôle que chez sakazuki, couleurs de Samira. --- */
  --primaire:    #C4265C;   /* son radis pastèque, là où sakazuki met son rouge */
  --primaire-fonce: #9E1C48;
  --noir:        #0A0A0A;
  --troisieme:   #E3D8CE;   /* beige */
  --clair:       #F4EDE5;   /* le fond de page */
  --champ:       #F7F2EB;
  --blanc:       #FFFFFF;
  --bordure:     #C6BBB0;
  --gris:        #6E655C;

  /* --- Deux courbes, deux seulement, exactement comme chez eux --- */
  --sortie:      cubic-bezier(.23, 1, .32, 1);
  --entree-sortie: cubic-bezier(.645, .045, .355, 1);

  /* --- Survol : le texte roule --- */
  --survol-duree:     .6s;
  /* -50 %, pas -100 %. La pile contient DEUX exemplaires du libellé, donc
     100 % de sa hauteur vaut deux lignes et le second exemplaire dépassait
     par le haut : le libellé disparaissait sans jamais revenir. */
  --survol-montee:    -50%;
  --survol-transition: transform var(--survol-duree) var(--sortie);

  /* --- Révélation de texte --- */
  --ligneDepart:      .18s;
  --ligneDecalage:    .14s;
  --ligneDepartHero:  .4s;

  /* --- Typographie --- */
  --display: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --texte:   'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Gabarit --- */
  --marge:     clamp(1rem, 3.2vw, 2.75rem);
  --contenu:   67.75rem;
  --colonne:   45.5rem;

  /* --- Angles coupés, la signature de forme --- */
  --coche-l:   4.375rem;
  --coche-p:   3.125rem;

  /* --- Le fanion. Une seule mesure, partagée par le triangle du haut et par
     le creux ménagé entre les deux lettres du mot du milieu. --- */
  --fanion-l:    clamp(64px, 6.5vw, 118px);
  --fanion-h:    clamp(34px, 3.5vw, 64px);
  --fanion-haut: clamp(8px, 1vh, 14px);   /* le jour laissé sous le bord de page */
}

@media (max-width: 768px) {
  :root { --coche-l: 2.1875rem; --coche-p: 1.5625rem; }
}

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

html { background: var(--clair); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texte);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--noir);
  background: var(--clair);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--primaire); color: var(--clair); }
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }

/* =========================================================================
   1. TYPOGRAPHIE
   ========================================================================= */

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.t-mv     { font-size: clamp(2.6rem, 9vw, 8.5rem); }
.t-geant  { font-size: clamp(3.4rem, 15vw, 15rem); line-height: .82; }
.t-grand  { font-size: clamp(2rem, 5.4vw, 4.6rem); }
.t-moyen  { font-size: clamp(1.5rem, 3vw, 2.6rem); }
.t-petit  { font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.15; }

.serif-texte {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.75;
  font-weight: 400;
}

.chapo { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.72; }
.petit { font-size: .875rem; line-height: 1.65; color: var(--gris); }

/* L'étiquette : « Benefits01 », « QUESTION 01 », « ( people ) » */
.etiq {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.etiq--rouge { color: var(--primaire); }
.etiq--gris  { color: var(--gris); }
.paren { font-style: italic; text-transform: lowercase; letter-spacing: .04em; }

.numero {
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .16em;
  color: var(--primaire);
}

p + p { margin-top: 1.1em; }
em.rouge { font-style: italic; color: var(--primaire); }

/* =========================================================================
   2. animatedLines — la révélation de texte, mécanisme de sakazuki
   Chaque ligne est un masque, l'intérieur monte de 101 % à 0.
   ========================================================================= */

.al { --alDelai: var(--ligneDepart); display: block; }

.alL { display: block; overflow: visible hidden; }
.alI { display: block; transform: translateY(101%); }

.al.visible .alI {
  animation-name: monteeLigne;
  animation-duration: 1s;
  animation-timing-function: var(--sortie);
  animation-fill-mode: forwards;
}

@keyframes monteeLigne {
  0%  { transform: translateY(101%); }
  to  { transform: translateY(0); }
}

.al.visible .alL:nth-child(1) .alI { animation-delay: var(--alDelai); }
.al.visible .alL:nth-child(2) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 1); }
.al.visible .alL:nth-child(3) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 2); }
.al.visible .alL:nth-child(4) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 3); }
.al.visible .alL:nth-child(5) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 4); }
.al.visible .alL:nth-child(6) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 5); }
.al.visible .alL:nth-child(7) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 6); }
.al.visible .alL:nth-child(8) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 7); }
.al.visible .alL:nth-child(9) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 8); }
.al.visible .alL:nth-child(10) .alI { animation-delay: calc(var(--alDelai) + var(--ligneDecalage) * 9); }

/* Décaler un bloc entier, comme leurs animatedLinesDelayBlock1..4 */
.al--b1 { --alDelai: calc(var(--ligneDepart) + var(--ligneDecalage) * 1); }
.al--b2 { --alDelai: calc(var(--ligneDepart) + var(--ligneDecalage) * 2); }
.al--b3 { --alDelai: calc(var(--ligneDepart) + var(--ligneDecalage) * 3); }
.al--b4 { --alDelai: calc(var(--ligneDepart) + var(--ligneDecalage) * 4); }
.al--hero { --alDelai: var(--ligneDepartHero); }

/* La variante en fondu, leur animatedLinesPhilosophyFade */
.al--fondu .alL { overflow: visible; }
.al--fondu .alI { opacity: 0; transform: translateY(.2rem); }
.al.al--fondu.visible .alI {
  animation-name: fonduLigne;
  animation-duration: .8s;
}
@keyframes fonduLigne {
  0%  { opacity: 0; transform: translateY(.2rem); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Les blocs qui ne sont pas du texte : même vocabulaire, une seule entrée */
[data-vient] { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s var(--sortie), transform 1s var(--sortie); transition-delay: var(--retard, 0ms); }
[data-vient="fondu"]   { transform: none; }
[data-vient="echelle"] { transform: scale(1.04); }
.visible[data-vient], [data-vient].visible { opacity: 1; transform: none; }

/* =========================================================================
   3. LE LIEN À TEXTE DOUBLÉ — leur effet de survol partout dans le site
   Le libellé est écrit deux fois, la pile monte de 100 % au survol.
   ========================================================================= */

/* La hauteur doit valoir EXACTEMENT une ligne, sinon les deux exemplaires du
   libellé s'affichent l'un sous l'autre au lieu d'un seul. C'est la clé. */
.roule { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.35; height: 1.35em; }
.roule__pile { display: block; transition: var(--survol-transition); }
.roule__pile > span { display: block; line-height: 1.35; }
a:hover .roule__pile,
button:hover .roule__pile,
.roule:hover .roule__pile { transform: translateY(var(--survol-montee)); }

/* =========================================================================
   4. LES BANDEAUX DÉFILANTS
   ========================================================================= */

.bandeau { overflow: hidden; width: 100%; }
.bandeau__piste {
  display: flex; width: max-content; flex-wrap: nowrap;
  will-change: transform;
  animation: defileGauche var(--vitesse, 30s) linear infinite;
}
.bandeau--droite .bandeau__piste { animation-name: defileDroite; }
.bandeau__piste > * { flex: none; }

@keyframes defileGauche { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes defileDroite { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* =========================================================================
   5. L'ANGLE COUPÉ — leur notch, la signature de forme
   ========================================================================= */

.coche {
  clip-path: polygon(
    0 0,
    calc(100% - var(--coche-l)) 0,
    100% var(--coche-p),
    100% 100%,
    0 100%
  );
}
.coche--bas {
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    var(--coche-l) 100%,
    0 calc(100% - var(--coche-p))
  );
}

/* =========================================================================
   6. GABARIT
   ========================================================================= */

.env { width: 100%; max-width: calc(var(--contenu) + var(--marge) * 2); margin-inline: auto; padding-inline: var(--marge); }
.env--large { max-width: none; }
.sec { position: relative; padding-block: clamp(5rem, 12vh, 10rem); }
.etroit { max-width: 42rem; }

.trait { height: 1px; background: var(--bordure); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--sortie); }
.visible .trait, .trait.visible { transform: scaleX(1); }

/* =========================================================================
   7. BOUTONS
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 2rem;
  background: var(--primaire); color: var(--clair);
  font-family: var(--display); font-size: .8125rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--survol-duree) var(--sortie), transform .4s var(--sortie);
  --coche-l: 1.6rem; --coche-p: 1.1rem;
}
.btn:hover { background: var(--noir); transform: scale(1.035); }
.btn--vide { background: transparent; color: var(--noir); border: 1px solid var(--noir); }
.btn--vide:hover { background: var(--noir); color: var(--clair); }

.detail {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--primaire);
}
.detail .fl { transition: transform .6s var(--sortie); }
.detail:hover .fl { transform: translateX(6px); }

/* =========================================================================
   7 bis. L'OUVERTURE — l'aplat rose que le fanion perce au chargement
   Le tracé lui-même est réécrit image par image en JS (ouverture.js). Ici,
   seulement la place et la couleur.
   ========================================================================= */

/* Au-dessus de tout : en-tête (100), fanion (101), lien de saut (200).
   pointer-events est neutralisé, pour que le voile ne puisse jamais avaler
   un clic même s'il restait affiché par accident. */
.ouv { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.ouv__svg { display: block; width: 100%; height: 100%; }
.ouv__voile { fill: var(--primaire); }
.ouv--fini { display: none; }

/* Pendant l'ouverture, la page ne défile pas : le grand visuel ne doit pas
   se dérouler derrière le voile. */
html.ouv-en-cours, html.ouv-en-cours body { overflow: hidden; }

/* L'en-tête n'arrive qu'une fois le voile ouvert : le fanion du haut prend
   ainsi la suite du fanion qui vient de s'écarter. */
.ouv-en-cours .tete { opacity: 0; }

/* =========================================================================
   8. UTILITAIRES
   ========================================================================= */

.masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut { position: absolute; top: -100px; left: var(--marge); z-index: 200; background: var(--primaire); color: var(--clair); padding: .8rem 1.4rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; transition: top .3s var(--sortie); }
.saut:focus { top: 1rem; }

/* =========================================================================
   9. MOUVEMENT RÉDUIT
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .alI { transform: none !important; opacity: 1 !important; }
  [data-vient] { opacity: 1 !important; transform: none !important; }
  .trait { transform: scaleX(1) !important; }
  .bandeau__piste { animation: none !important; }

  /* Le grand visuel se déplie en trois blocs empilés, sans épinglage */
  .mv__vue { position: static !important; background-color: var(--clair) !important; }
  .mv__fond, .mv__voile { display: none !important; }
  .mv__scene { color: var(--noir) !important; }
  .mv__diapo { position: static !important; opacity: 1 !important; transform: none !important; padding-block: 4rem; }
  .mv__flanc, .mv__nom { color: var(--noir) !important; }
  .mv__piste { display: none !important; }
}