/*police points pour titre*/
@font-face{
  font-family: "EnhancedDotDigital7";
  src:
    url("/fonts/enhanced_dot_digital-7.woff2") format("woff2"), /* si tu l’as */
    url("/fonts/enhanced_dot_digital-7.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



:root{
  --bg:#0b0b0b;
  --fg:#f5f5f5;
  --muted:#bdbdbd;
  --frame:#232323;
  --maxw:1200px;
  --paper:#0b0b0b;
  --ink:#fbfbfb;
}


/* RESET */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ border-radius:0; display:block; max-width:100%; height:auto; }

/* HEADER */
.site-header{
  position:fixed; inset:32px 32px auto 32px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:4;
}
.brand img{ display:block; }
.site-nav a{
  color:var(--fg);
  text-decoration:none;
  margin-left:28px;
  letter-spacing:.08em;
  font-size:clamp(12px,1.2vw,14px);
  position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s ease;
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* HERO */
.hero{
  min-height:100svh;
  max-width:var(--maxw);
  margin:0 auto;
  position:relative;
  display:grid;
  align-items:center; justify-items:center;
  padding:10svh 24px 14svh;
}
.stack{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
  z-index:1;
}
.card{
  width:min(360px, 48vw);
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:0px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  outline:2px solid rgba(255,255,255,.06);
  position:absolute;
  transition:transform .5s ease;
}
.c1{ transform: translateY(-6vh) rotate(-9deg); }
.c2{ transform: translateY( 1vh) rotate( 6deg); }
.c3{ transform: translateY(-2vh) rotate(-2deg); outline-color:rgba(27,140,124,.35); }
.hero-title{
  margin:0;
  text-align:center;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:.88;
  font-size:clamp(44px, 8vw, 120px);
  z-index:3;
  position:relative;
  text-transform:uppercase;
}
.hero-title span{ display:block; }
.baseline{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  color:var(--muted);
  font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.2em; text-align:center;
  z-index:3;
}



/* ABOUT SECTION */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 22px 40px;
}
.big{
  margin:8px 0 24px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
line-height: 1.0;
  font-size: clamp(42px, 8vw, 120px);
}
.big .amp {
  font-family:"Great Vibes", cursive;
  font-size:1.2em;
  line-height:0;             
  vertical-align:-0.15em;   
}


.grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:28px;
  align-items:start;
}
.boxed{
  position:relative;
  padding:18px 20px 20px;
  border:1px solid rgba(0,0,0,.18);
}
.boxed::before,
.boxed::after{
  content:""; position:absolute; inset:-8px auto auto -8px;
  width:16px; height:16px; border-top:1px solid rgba(0,0,0,.45); border-left:1px solid rgba(0,0,0,.45);
}
.boxed::after{
  inset:auto -8px -8px auto;
  border-top:none; border-left:none;
  border-right:1px solid rgba(0,0,0,.45); border-bottom:1px solid rgba(0,0,0,.45);
}
.bio p{ margin:0 0 14px; font-size:16px; }
.bio h3{
  margin:14px 0 8px; font-size:12px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase;
}
.portrait{ margin:0; }

/* HOVER CARDS */
.hero:hover .c1{ transform: translateY(-7vh) rotate(-11deg); }
.hero:hover .c2{ transform: translateY( 2vh) rotate( 7.5deg); }
.hero:hover .c3{ transform: translateY(-3vh) rotate(-3deg); }

/* RESPONSIVE */
@media (max-width:960px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .site-header{
    position: fixed;
    top: 16px;
    right: 16px;
    left: 16px;
    bottom: auto;         /* IMPORTANT : on annule le bottom */
  }
  .site-footer{ inset:auto 20px 14px 20px; }
  .card{ width:min(74vw, 340px); }
}



/* La phrase "SURVOLEZ..." ne s’affiche que quand #home est visible */
.site-footer .foot-left{
  transition: opacity .3s ease;
}
body.not-in-hero .site-footer .foot-left{
  opacity: 0;
  pointer-events: none;
}



/* La zone d'effet couvre toute la section hero, y compris les marges internes */
#presentation{
  position:absolute;
  /* .hero a padding: 10svh 24px 14svh; on compense en négatif : */
  left:-24px; right:-24px; top:-10svh; bottom:-14svh;
  overflow:hidden;
  z-index:1; /* derrière le titre/texte */
}

/* Les images qui pop */
.image-trace{
  position:absolute;
  width: 72px;;
  height:auto;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter: brightness(0.5); 
}






/* Titres style terminal lisible */
.chunk-h2{
  font-family: "VT323", monospace;   /* pixel/ancien ordi */
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: .06em;              /* un peu d’air pour la lisibilité */
  text-transform: none;               /* garde la casse d’origine */
}

/* Curseur qui clignote pendant la frappe */
.tw-caret{
  position: relative;
  white-space: nowrap;       /* effet “ligne” */
  overflow: hidden;
}
.tw-caret::after{
  content: "";
  position: absolute;
  right: -0.04em; top: 50%;
  width: .6ch; height: 1.1em;
  transform: translateY(-60%);
  background: currentColor;
  animation: tw-blink .9s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* Accessibilité : pas d’animation si réduit */
@media (prefers-reduced-motion: reduce){
  .tw-caret::after{ animation: none; }
}



/* Titres des paragraphes : gros, centrés, blancs */
#about .about-zigzag .chunk .chunk-h2{
  font-family: "EnhancedDotDigital7", monospace;
  color:#fff;                          /* blanc */
  font-size: clamp(26px, 4vw, 48px);   /* plus grand */
  letter-spacing:.06em;
  text-transform:none;
  text-align:center !important;        /* force le centrage même sur .chunk--right */
  display:block;
}

/* Curseur du typewriter : un peu plus visible */
#about .about-zigzag .chunk .chunk-h2.tw-caret::after{
  width:.7ch;
  height:1.15em;
  background: currentColor; /* reste blanc */
}

/* le caret vit sur le span, pas sur le h2 */
.tw-wrap{
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.tw-wrap::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  transform: translateY(-60%);
  width:.6ch; height:1.1em;
  background: currentColor;          /* suit la couleur (blanc chez toi) */
  animation: tw-blink .9s steps(1) infinite;
}
.tw-wrap.done::after{ display:none; }
@keyframes tw-blink { 50% { opacity:0; } }



/* Utiliser la police sur les titres tapés */
#about .about-zigzag .chunk .chunk-h2,
#about .about-zigzag .chunk .chunk-h2 .tw-wrap{
  font-family: "EnhancedDotDigital7", monospace !important;
  font-weight: 400; 
}

/* Grossir les titres des paragraphes (typewriter) */
#about .about-zigzag .chunk .chunk-h2,
#about .about-zigzag .chunk .chunk-h2 .tw-wrap{
  font-size: clamp(18px, 3vw, 34px) !important;  /* pour augmenter */
  line-height: 1.05;
}


#about .big{
  margin-bottom: clamp(160px, 14vh, 360px);
}

/* applique sur .tw-wrap.caret--bar */
.tw-wrap.caret--bar::after{
  width: 0.12em;                 /* barre fine */
  height: 1em;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
  background: currentColor;
  animation: tw-blink .9s steps(1) infinite;
}



/* Paragraphes = même police que le gros titre (.big) */
#about .about-zigzag p{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 100;                   /* plus fin */
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.45;
  letter-spacing: .01em;
  color: #fff;                       
}

/* centre chaque bloc de paragraphe sur la page */
#about .about-zigzag .chunk{
  max-width: 68ch;
  margin-inline: auto;   /* centre le bloc */
}

/* justifie le texte des paragraphes */
#about .about-zigzag .chunk p{
  text-align: justify;        /* aligné à gauche ET à droite */
  text-justify: inter-word;   /* meilleure répartition des espaces */
  hyphens: auto;              /* césure automatique (selon langue) */
}

/* si des règles précédentes forzaient l'alignement à gauche/droite,
   on neutralise pour les paragraphes */
#about .about-zigzag .chunk--left p,
#about .about-zigzag .chunk--right p{
  text-align: justify;
}

/* Paragraphes : un peu plus larges et centrés sur la page */
#about .about-zigzag .chunk{
  max-width: clamp(72ch, 90vw, 96ch);  /*  élargi (avant ~68ch) */
  margin-inline: auto;                  /* centre le bloc */
}

/* ====== ALTERNANCE FULL-BLEED PAR RAPPORT AU VIEWPORT ====== */

/* tous les blocs (titre + p) s’étendent sur la largeur de la page */
#about .about-zigzag .chunk{
  width: 100vw;                                  /* plein écran */
  margin-left: calc(50% - 50vw);                 /* sort de la grille */
  margin-right: calc(50% - 50vw);
  max-width: none;                                /* annule 68ch/96ch précédents */
}

/* BLOCS GAUCHE : tout collé au bord gauche de la page */
#about .about-zigzag .chunk--left{
  text-align: left;
  padding-left: var(--page-gutter);
  padding-right: calc(var(--page-gutter) * .6);   /* un peu d’air à droite */
}
#about .about-zigzag .chunk--left .chunk-h2{ text-align:left !important; }
#about .about-zigzag .chunk--left p{ text-align:left; }

/* BLOCS DROITE : tout collé au bord droit de la page */
#about .about-zigzag .chunk--right{
  text-align: right;
  padding-right: var(--page-gutter);
  padding-left: calc(var(--page-gutter) * .6);
}
#about .about-zigzag .chunk--right .chunk-h2{ text-align:right !important; }
#about .about-zigzag .chunk--right p{ text-align:right; }

/* IMPORTANT : ca annule l’ancien “full-bleed” uniquement sur les h2
   (on le met au niveau du bloc maintenant) */
#about .about-zigzag .chunk .chunk-h2{
  width:auto; margin:0; padding:0;
  display:block;
}

/* Mobile : redevient simple, lisible (bordures égales) */
@media (max-width: 720px){
  #about .about-zigzag .chunk{
    width: 100%;
    margin: 0 auto;
    padding-inline: var(--page-gutter);
    text-align: left;
  }
  #about .about-zigzag .chunk .chunk-h2,
  #about .about-zigzag .chunk p{
    text-align: left !important;
  }
}



/* largeur cible d’un bloc de texte (~50% viewport) + gouttières */
:root{
  --page-gutter: clamp(14px, 3vw, 36px);
  --block-w: clamp(42ch, 48vw, 64ch);  /* ← ≈ moitié d’écran, bornée en ch */
}

/* chaque bloc (titre + paragraphe) s’étend sur la largeur de page */
#about .about-zigzag .chunk{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: var(--page-gutter);
}

/* on limite la largeur réelle des contenus à ~50% */
#about .about-zigzag .chunk > .chunk-h2,
#about .about-zigzag .chunk > p{
  max-width: var(--block-w);
}

/* BLOCS GAUCHE : collés à gauche de la page : ancien bug corrigé*/
#about .about-zigzag .chunk--left{
  text-align: left;
}
#about .about-zigzag .chunk--left > .chunk-h2,
#about .about-zigzag .chunk--left > p{
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}


/* largeur du texte (~moitié d'écran) */
:root{
  --block-w: clamp(42ch, 48vw, 64ch);
}

/* LEFT blocks = bord gauche */
#about .about-zigzag .chunk--left{
  text-align:left;
}
#about .about-zigzag .chunk--left > .chunk-h2,
#about .about-zigzag .chunk--left > p{
  max-width: var(--block-w);
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

/* RIGHT blocks = bord droit */
#about .about-zigzag .chunk--right{
  text-align:right;
}
#about .about-zigzag .chunk--right > .chunk-h2,
#about .about-zigzag .chunk--right > p{
  max-width: var(--block-w);
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}

.chunk chunk--center chunk--media portrait {
  height: 100px;
}


/* ===== TEST POUR IMG A COTE DE P ET T 1 (AUSSI ACTIVER JS) ===== */
:root{
  --pair-gap: clamp(16px, 3vw, 36px);                /* espace entre texte et image */
  --pair-text-w: clamp(42ch, 48vw, 64ch);            /* largeur max du bloc texte (~1/2 page) */
  --pair-img-w: clamp(220px, 34vw, 520px);           /* largeur de l’image à droite */
}

.pair{
  display: flex;
  align-items: stretch;                               /* étire les enfants à la même hauteur */
  gap: var(--pair-gap);
  width: 100%;                                        /* garde dans le flux de ta section */
  margin-inline: clamp(14px, 3vw, 36px);              /* gouttières pour ne pas coller aux bords */
}

.pair .pair-text{
  flex: 1 1 auto;
  max-width: var(--pair-text-w);                      /* limite la largeur du texte */
  margin: 0;                                          /* aucune marge parasite */
}

.pair .pair-text .chunk-h2{
  width: auto !important;
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0 !important;  /* petit espace sous le titre */
  text-align: left !important;                        /* titre à gauche dans ce bloc */
}

.pair .pair-media{
  flex: 0 0 var(--pair-img-w);                        /* image à droite */
  margin: 0;
  display: flex;
  align-self: stretch;                                /* ← HAUTEUR = celle du bloc texte */
  overflow: hidden;                                   /* pas de débordement */
}

.pair .pair-media img{
  width: 100%;
  height: 100%;                                       /* remplit toute la hauteur du bloc */
  object-fit: cover;                                  /* cadrage propre */
  display: block;
  border-radius: 0;
  outline: 1px solid rgba(255,255,255,.10);           /* optionnel : petit cadre */
}

/* Responsive : on empile, l’image passe dessous */
@media (max-width: 800px){
  .pair{
    flex-direction: column;
    align-items: stretch;
  }
  .pair .pair-text{ max-width: 100%; }
  .pair .pair-media{
    flex-basis: auto;
    height: auto;
  }
  .pair .pair-media img{
    height: auto;
  }
}

/* on n’étire plus automatiquement l’image, on la limite */
.pair{ align-items: flex-start; }           /* le texte fixe la référence */
.pair .pair-media{
  overflow: hidden;                         /* coupe si besoin */
}
.pair .pair-media img{
  width: 100%;
  height: 100%;                             /* prendra la hauteur fixée en JS */
  object-fit: cover;                        /* remplit sans déformer */
  display: block;
}

/* Espace vertical régulier entre chaque groupe (pair/article) */
#about .about-zigzag > * + *{
  margin-top: clamp(56px, 10vh, 180px) !important; /* ← augmente/diminue ici */
}
#about .about-zigzag .pair{ margin-block: 0 !important; padding-block: 0; }
#about .about-zigzag article{ margin: 0; }
#about .about-zigzag .pair .pair-text .chunk-h2{ margin-top: 0; }


/* —— Taille des paragraphes (force la prise en compte) —— */
#about .about-zigzag .pair .pair-text p,
#about .about-zigzag > article p{
  font-size: clamp(15px, 1.2vw, 20px) !important;  /* ← rétrécis ici */
  line-height: 1.45;
}


/* ===== Footer EXACT (isolé) ===== */
:root{ --pad: clamp(20px, 4vw, 48px); }

.mfoot{
  position: relative;
  margin-top: 120px;
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--frame);
  overflow: hidden;             /* pour couper le mot géant */
  isolation: isolate;           /* z-index propres */
}

/* filet dégradé en haut */
.mfoot__accent{
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 75%,
    rgba(255,255,255,.12) 100%);
}

/* zone centrale */
.mfoot__wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--pad) 150px; /* place pour le bouton */
  position: relative;
  z-index: 2; /* au-dessus du mot géant */
}

/* gauche : logo + baseline */
.mfoot__logo{ display:inline-block; text-decoration:none; color:inherit; }
.mfoot__logo img{ height:44px; width:auto; display:block; }
.mfoot__tagline{
  margin: 16px 0 0;
  color: var(--muted);
  font: inherit;                /* même typo */
  letter-spacing: .02em;
}

/* droite : menu vertical exactement collé au bord droit */
.mfoot__nav{
  position: absolute;
  top: 24px;
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  text-align: right;
  --underline-overflow: 260px;  /* longueur du trait qui dépasse à gauche */
  z-index: 3;
}
.mfoot__nav a{
  position: relative;
  color: var(--fg);
  text-decoration: none;
  font: inherit;                 /* garde ta taille/typo */
  text-transform: uppercase;
  letter-spacing: .18em;
  padding-bottom: 4px;
  opacity: .96;
  outline: none;
}
/* soulignement miroir (de droite vers gauche) */
.mfoot__nav a::after{
  content:"";
  position:absolute;
  right: 0;
  left: calc(-1 * var(--underline-overflow));
  bottom:-2px;
  height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mfoot__nav a:hover::after,
.mfoot__nav a:focus-visible::after{ transform: scaleX(1); }
.mfoot__nav a:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px; border-radius: 6px;
}

/* bas-droite : bouton pilule */
.mfoot__bottom{
  position: absolute;
  right: var(--pad);
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.mfoot__top{
  font: inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  padding: 10px 14px;
  border-radius: 999px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.mfoot__top:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
  opacity: .96;
}

/* mot MATHILDE en arrière-plan */
.mfoot::after{
  content: "MATHILDE";
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .85;
  color: rgba(255,255,255,.18);
  font-size: clamp(160px, 22vw, 420px);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* responsive */
@media (max-width: 900px){
  .mfoot__nav{ top:16px; --underline-overflow:200px; gap:14px; }
  .mfoot__wrap{ padding-bottom:170px; }
}
@media (max-width: 600px){
  .mfoot__nav{ top:14px; --underline-overflow:140px; }
  .mfoot__bottom{ bottom:18px; }
  .mfoot::after{ bottom:-10%; font-size: clamp(120px, 28vw, 300px); }
}



.baseline{
  transition: opacity .85s ease, transform .85s ease;
    text-transform: uppercase;

}
body.scrolled .baseline{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}