/* ===========================================================
   Erwan Badir — portfolio
   =========================================================== */
:root{
  --ink:#111;
  --paper:#fff;
  --gap:0px;
  --header-h:64px;
  color-scheme:light;
  /* Échelle typographique : titres = intro × nombre d'or (φ ≈ 1.618) */
  --intro-size:clamp(28px, 5vw, 64px);
  --title-size:clamp(45px, 8.09vw, 104px);
  --emoji-font:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
/* Mode sombre : texte clair sur fond sombre, sur tout le site */
:root[data-theme="dark"]{
  --ink:#f2f2f2;
  --paper:#141414;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- En-tête : blend exclusion, aucun bandeau ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  font-size:20px;
  font-weight:500;
  line-height:1.05;
  color:var(--ink);
  pointer-events:none;           /* laisse cliquer les images derrière */
}
/* Accueil : couleur du logo/textes pilotée par JS (noir/blanc selon l'image
   derrière) — voir header-adapt.js. Blanc par défaut avant que le JS s'exécute. */
.page-home .site-header__logo,
.page-home .site-header__tagline,
.page-home .site-header__infos{color:#fff}
.site-header a,
.site-header span,
.site-header button{pointer-events:auto}
.site-header__tagline{text-align:center;flex:1}
.site-header__infos{text-align:right}
/* Bouton thème (☀️ / 🌙), à côté de Infos, absent de l'accueil */
.site-header__theme{
  font-family:var(--emoji-font);
  background:none;border:0;padding:0;margin-left:12px;
  font-size:20px;line-height:1;cursor:pointer;
}
/* Burger + menu : masqués sur desktop, actifs sur mobile */
.site-header__burger{display:none}
.site-header__menu{display:none}
/* Logo SVG : rendu en aplat blanc (via masque) pour garder l'effet exclusion */
.site-header__logomark{
  display:block;
  width:var(--logo-w,150px);height:26px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center;
}
@media(max-width:700px){
  .site-header{font-size:15px;padding:12px 14px;gap:10px;align-items:center}
  .site-header__tagline{display:block;flex:1;text-align:center;font-size:14px;line-height:1.15}
  .site-header__logomark{width:calc(var(--logo-w,150px) * .56);height:17px}
  /* Infos + thème inline -> déplacés dans le burger */
  .site-header > .site-header__infos{display:none}
  .site-header > .site-header__theme{display:none}
  .site-header__burger{
    display:block;background:none;border:0;padding:0;cursor:pointer;
    font-family:inherit;color:inherit;font-size:24px;line-height:1;
  }
  /* Menu déroulant PLEIN ÉCRAN, sans coins arrondis */
  .site-header__menu{
    position:fixed;inset:0;margin:0;
    flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:var(--paper);color:var(--ink);
    border:0;border-radius:0;box-shadow:none;
    z-index:200;overflow-y:auto;padding:76px 20px 40px;
  }
  .site-header__menu.is-open{display:flex}
  .site-header__menu a,
  .site-header__menu button{
    color:var(--ink);font-size:28px;background:none;border:0;padding:0;
    margin:0;cursor:pointer;text-decoration:none;font-family:inherit;
  }
  .site-header__menu .site-header__theme{font-family:var(--emoji-font);font-size:34px}
  .site-header__menu-copy{font-size:15px;opacity:.55}
  .site-header__menu-close{
    position:absolute;top:16px;right:20px;font-size:30px;line-height:1;
  }
  .site-header__menu-infos:hover,
  .site-header__menu a:hover{text-decoration:underline}
}

/* ---------- Curseur licorne ---------- */
.cursor{
  position:fixed;top:0;left:0;
  font-family:var(--emoji-font);
  font-size:40px;line-height:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:200;
  opacity:0;
  transition:opacity .18s ease;
  will-change:transform;
}
/* Sur les appareils à souris : curseur natif masqué partout, emoji visible partout */
@media(hover:hover){
  body.has-cursor,
  body.has-cursor *{cursor:none}
  body.has-cursor .cursor{opacity:1}
}
@media(hover:none),(max-width:700px){.cursor{display:none!important}}

/* ===========================================================
   ACCUEIL — index deux colonnes plein cadre
   =========================================================== */
/* Double-scroll opposé : la colonne GAUCHE monte, la DROITE descend.
   La colonne droite est inversée pour que les 2 images d'un même projet
   restent face à face pendant tout le défilement. Section "épinglée". */
.index{position:relative}                 /* la hauteur (= 1 colonne) est posée par le JS */
.index__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.index__col{position:absolute;top:0;width:50%;will-change:top}
.index__col--left{left:0}
.index__col--right{left:50%}
.cell{
  position:relative;display:block;height:100vh;overflow:hidden;background:#000;
}
.cell__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.001);
  filter:grayscale(1) contrast(1.02);
  transition:filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:filter,transform;
}
.cell:hover .cell__img{filter:grayscale(0);transform:scale(1.05)}  /* couleur + zoom au survol */
.cell--color .cell__img{filter:grayscale(0) contrast(1.02)}        /* image forcée en couleur (réglage projet) */
@media(hover:hover){.cell{cursor:none}}

/* Indice de scroll (mobile) : apparaît puis disparaît une seule fois au début */
.scroll-hint{display:none}
@media(max-width:700px){
  .scroll-hint{
    display:flex;align-items:center;gap:8px;
    position:fixed;left:50%;bottom:26px;
    z-index:90;pointer-events:none;
    padding:9px 16px;border-radius:999px;
    background:rgba(0,0,0,.5);color:#fff;font-size:14px;
    opacity:0;animation:hintShow 4.2s ease forwards;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .scroll-hint__arw{display:inline-block;animation:hintNudge 1s ease-in-out infinite}
}
@keyframes hintShow{
  0%{opacity:0;transform:translate(-50%,10px)}
  12%{opacity:1;transform:translate(-50%,0)}
  72%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,0)}
}
@keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* Nom du projet sur l'accueil (option) : au survol sur desktop */
.cell__name{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:16px 18px;color:#fff;font-size:16px;font-weight:500;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.cell:hover .cell__name{opacity:1;transform:none}

/* Animations réduites : si l'utilisateur l'a activé sur son appareil */
@media(prefers-reduced-motion:reduce){
  .rm .scroll-hint{display:none}
  .rm .hovermoji::after{transition:opacity .1s ease}
  .rm .project__totop{transition:opacity .1s ease}
}

/* ===========================================================
   PAGE PROJET — moitié texte (fixe) / moitié images (défilent)
   =========================================================== */
:root{--proj-gap:24px}                                   /* marge commune (photos + texte↔images) */

/* fond blanc derrière l'en-tête, uniquement sur les pages projet */
.page-project .site-header{mix-blend-mode:normal;background:var(--paper);color:var(--ink)}

.project__main{
  display:grid;
  grid-template-columns:1fr 1fr;                          /* 50 / 50 */
  gap:var(--proj-gap);                                    /* marge texte ↔ images */
  padding:calc(var(--header-h) + var(--proj-gap)) var(--proj-gap) var(--proj-gap);
  align-items:start;
}
.project__aside{
  position:sticky;                                        /* texte + titre fixes */
  top:calc(var(--header-h) + var(--proj-gap));
  height:calc(100vh - var(--header-h) - var(--proj-gap)*2);
  display:flex;flex-direction:column;justify-content:space-between;
}
.project__cat{font-size:clamp(22px,2.5vw,36px);line-height:1.05;font-weight:400;margin-bottom:16px}
.project__cat b{font-weight:700}
.project__name{font-style:italic;font-size:18px;margin-bottom:2px}
.project__client{font-size:18px;font-weight:400}
.project__year{font-size:18px;opacity:.75;margin-bottom:22px}
.project__desc{font-size:16px;line-height:1.5}
.project__desc p+p{margin-top:14px}

.project__foot{margin-top:24px}
.project__totop{
  align-self:center;                       /* centré horizontalement dans la colonne texte */
  background:none;border:0;padding:0;
  font-family:inherit;color:inherit;cursor:pointer;
  font-size:clamp(64px,7vw,120px);         /* flèche généreuse */
  line-height:1;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.project__totop.is-visible{opacity:1;transform:none;pointer-events:auto}
.project__totop:hover{transform:translateY(-6px)}
.project__video{cursor:pointer}
.project__nav{display:flex;justify-content:space-between;font-size:17px;margin-bottom:10px}
.project__nav a.is-disabled{opacity:.25;pointer-events:none}
.project__nav a:hover,.project__social a:hover{text-decoration:underline}
.project__social{display:flex;justify-content:space-between;font-size:13px;opacity:.75}

.project__gallery{
  display:grid;grid-template-columns:1fr 1fr;             /* verticales par paires */
  gap:var(--proj-gap);
  align-items:start;
}
.project__figure{margin:0;overflow:hidden}
.project__figure img,
.project__figure video{width:100%;height:auto;display:block}
.project__figure.wide{grid-column:1 / -1}                /* horizontale / vidéo = pleine largeur */

/* ===========================================================
   PAGE INFOS
   =========================================================== */
.page-infos main{padding-top:calc(var(--header-h) + 8px)}
.infos{
  padding:8px 22px 40px;                            /* pleine largeur, aucun séparateur */
  min-height:calc(100vh - var(--header-h) - 56px);
  min-height:calc(100dvh - var(--header-h) - 56px);
  display:flex;flex-direction:column;               /* pour pousser le footer en bas */
}
.infos__intro{
  font-size:var(--intro-size);                      /* pleine largeur */
  line-height:1.12;font-weight:500;
  letter-spacing:-.01em;margin-bottom:52px;
}
.infos__clients-title{font-size:var(--title-size);font-weight:700;line-height:.95;letter-spacing:-.02em;margin-bottom:20px}
.infos__clients{font-size:clamp(18px,2.4vw,30px);line-height:1.5;margin-bottom:52px}
.infos__clients em{font-style:italic}
.infos__sep{opacity:.3;margin:0 .12em}   /* séparateur vertical fin, espaces resserrés */
.infos__client{white-space:nowrap}
.infos__dot{opacity:.4;margin:0 .5em}
.infos__footer{
  margin-top:auto;                        /* colle le footer en bas de page */
  display:flex;flex-wrap:wrap;gap:16px 40px;
  justify-content:space-between;align-items:baseline;
  font-size:clamp(18px,2.3vw,28px);
}
.infos__footer a:hover{text-decoration:underline}
.infos__h{font-size:var(--title-size);font-weight:700;line-height:.95;letter-spacing:-.02em;margin-bottom:24px}
.mentions__body{font-size:var(--intro-size);line-height:1.12;font-weight:400}   /* regular */

/* hovermoji : au survol, l'emoji REMPLACE le mot (sans décaler le texte autour :
   le mot devient invisible mais garde sa place, l'emoji apparaît au centre). */
.hovermoji{
  font-weight:700;position:relative;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:color .15s ease;
}
.hovermoji:hover{color:transparent}
.hovermoji::after{
  content:attr(data-emoji);
  font-family:var(--emoji-font);
  color:var(--ink);                 /* couleur opaque : sinon l'emoji hérite du transparent au survol */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);
  transform-origin:center center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
  font-size:1.4em;line-height:1;pointer-events:none;z-index:5;
}
.hovermoji:hover::after{transform:translate(-50%,-50%) scale(1)}

/* ===========================================================
   MOBILE — accueil : 1 image/projet, scroll horizontal
   =========================================================== */
@media(max-width:700px){
  .index{
    position:static;
    display:flex;
    flex-flow:row nowrap;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .index{height:auto!important}
  .index__stage{
    position:static;
    height:100vh;height:100dvh;overflow:hidden;
    display:flex;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .index__col--right{display:none}                 /* une seule image par projet sur mobile */
  .index__col--left{position:static;top:auto;width:auto;display:contents;transform:none!important}
  .cell{flex:0 0 100vw;height:100vh;height:100dvh;scroll-snap-align:start}
  .cell__img{height:100%;object-fit:cover;filter:grayscale(0);transform:none!important}
  .cell__name{opacity:1;transform:none;font-size:14px}   /* nom visible en petit sur mobile */

  /* Page projet mobile : UN SEUL scroll horizontal — texte puis images */
  .project__main{
    display:flex;flex-flow:row nowrap;
    height:100vh;height:100dvh;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:0;padding:0;                         /* pas de marge entre photos -> scroll fluide */
  }
  .project__aside{
    position:static;flex:0 0 100vw;height:100%;
    overflow-y:auto;scroll-snap-align:start;
    padding:calc(var(--header-h) + 16px) 16px 20px;
  }
  .project__totop{display:none}         /* pas de retour-en-haut en scroll horizontal mobile */
  .project__foot{display:none}          /* nav + réseaux déplacés dans le burger sur mobile */
  .project__gallery{display:contents}   /* les images/vidéos deviennent des panneaux */
  .project__figure{
    flex:0 0 100vw;height:100%;         /* photo = pile la taille de l'écran */
    scroll-snap-align:start;overflow:hidden;
  }
  .project__figure.wide{grid-column:auto}
  .project__figure img,
  .project__figure video{width:100%;height:100%;object-fit:cover}
  .infos{padding:8px 16px 60px}
  /* footer contact aligné sur toute la largeur ; Mentions légales -> burger */
  .infos__footer{justify-content:space-between;gap:14px 12px;font-size:13px}
  .infos__footer-legal{display:none}
}

/* ---- Mentions légales : accordéon (titres hovermoji + clic) ---- */
.legal{max-width:none;margin-top:8px}
.legal-item__title{
  cursor:pointer;list-style:none;font-weight:700;
  font-size:clamp(32px,6vw,76px);line-height:1.05;letter-spacing:-.01em;
  padding:8px 0;display:flex;align-items:baseline;gap:.3em;
}
.legal-item__title::-webkit-details-marker{display:none}
.legal-item__title::before{content:"+";font-weight:400;opacity:.4;font-size:.5em}
.legal-item[open] .legal-item__title::before{content:"–"}
/* le titre se comporte comme un hovermoji : le texte s'efface, l'emoji prend sa place */
.legal-title-text{position:relative;white-space:normal;transition:color .15s ease}
.legal-item__title:hover .legal-title-text{color:transparent}
.legal-title-text::after{
  content:attr(data-emoji);font-family:var(--emoji-font);color:var(--ink);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
  font-size:1.1em;line-height:1;pointer-events:none;z-index:5;
}
.legal-item__title:hover .legal-title-text::after{transform:translate(-50%,-50%) scale(1)}
.legal-item__body{padding:2px 0 30px;max-width:none}
.legal-item__body p{margin:0 0 .5em;font-size:clamp(22px,4vw,48px);line-height:1.18;font-weight:400}