/* ==========================================================================
   PORTFOLIO GUILLAUME TESSON — PANNEAU DE RÉGLAGES

   Ce fichier contient les valeurs destinées à être modifiées.
   Le fichier style.css contient la structure et les règles de présentation.

   Convention :
   - X positif = déplacement vers la droite
   - X négatif = déplacement vers la gauche
   - Y positif = déplacement vers le bas
   - Y négatif = déplacement vers le haut
   ========================================================================== */

:root{
  /* 01 — COULEURS ET TYPOGRAPHIE */
  --bg:#f2f0ea;
  --ink:#111;
  --muted:#686762;
  --card-bg:rgba(242,240,234,.94);
  --card-border:rgba(17,17,17,.07);
  --card-link-color:rgba(17,17,17,.46);

  --font-body:"Space Grotesk",Arial,sans-serif;
  --font-display:"Space Grotesk",Arial,sans-serif;
  --display-weight:500;
  --display-spacing:-.045em;
  --small-label-size:10px;

  /* 02 — MARGES GÉNÉRALES */
  --pad:clamp(18px,3vw,52px);
  --header-top:18px;
  --nav-gap:26px;
  --nav-size:10px;

  /* 03 — HERO */
  --hero-right:clamp(30px,4.2vw,76px);
  --hero-top:clamp(135px,19vh,220px);
  --hero-x:0px;
  --hero-y:70px;

  --hero-name-size:clamp(18px,2.1vw,35.4px);
  --hero-role-size:clamp(8px,.72vw,12px);
  --hero-role-x:0px;
  --hero-role-gap:clamp(5px,.45vw,8px);

  --hero-name-join:-.23em;
  --hero-role-word-gap:.04em;
  --intro-scroll-bottom:32px;

  /* 04 — TITRES DE SECTION */
  --section-head-height:150px;
  --section-head-top:70px;

  /* 05 — CARTELS DES PROJETS */
  --card-padding:16px 18px 14px;
  --card-max-width:360px;
  --card-link-y:26px;
  --card-link-width:clamp(26px,4vw,72px);

  /* 06 — PARCOURS */
  --timeline-padding-top:100px;
  --timeline-padding-bottom:150px;
  --timeline-head-gap:30px;
  --timeline-head-bottom:80px;
  --timeline-axis-clearance-desktop:clamp(48px,4.4vw,76px);

  /* 07 — À PROPOS */
  --about-padding-y:120px;
  --about-columns:1.3fr .7fr;
  --about-gap:10vw;

  /* 08 — FICHES PROJET ET GALERIE */
  --project-bar-padding-y:16px;
  --gallery-section-top:clamp(70px,9vw,130px);
  --gallery-section-bottom:clamp(80px,11vw,160px);
  --gallery-bottom-padding:22px;
  --gallery-gap:clamp(16px,2.2vw,34px);
  --gallery-image-height:min(68svh,760px);
  --gallery-image-max-width:82vw;
  --lightbox-padding:clamp(18px,3vw,48px);

  /* 09 — CONTACT */
  --contact-padding-y:90px;
  --contact-profile-padding-y:clamp(80px,10vw,150px);
  --contact-profile-gap:clamp(24px,3.6vw,58px);
  --contact-details-y:clamp(-46px,-2.7vw,-24px);

  /* 10 — CV */
  --cv-padding-top:clamp(70px,9vw,130px);
  --cv-padding-bottom:clamp(100px,13vw,190px);
  --cv-year-padding-y:clamp(17px,1.8vw,25px);

  /* 11 — DESIGN CONTROL PANEL : PROJETS CHOISIS */
  --selected-title-size:clamp(27px,3.1vw,50px);
  --selected-first-title-size:clamp(29px,3.25vw,52px);
  --selected-artist-size:clamp(17px,1.35vw,21px);
  --selected-venue-size:11px;
  --selected-year-size:10px;
  --selected-link-size:9px;
  --selected-project-gap:clamp(54px,6vw,96px);
  --selected-project-reveal-gap:clamp(58px,7vw,110px);
  --selected-reveal-offset:6px;
  --selected-image-motion:1.35s;
  --selected-text-motion:1.2s;

  /* 12 — DESIGN CONTROL PANEL : PARCOURS */
  --timeline-item-min-height:190px;
  --timeline-item-compact-height:145px;
  --timeline-item-expanded-height:230px;
  --timeline-column-gap:24px;
  --timeline-project-image-width:clamp(135px,15vw,220px);
  --timeline-project-gap:20px;
  --timeline-project-max-width:520px;
  --timeline-title-size:clamp(16px,1.6vw,24px);
  --timeline-year-size:clamp(20px,2.8vw,42px);
  --timeline-meta-size:10px;
  --timeline-connector-opacity:.58;
  /* La longueur est calculée automatiquement depuis offset dans data.js. */

  /* 13 — DESIGN CONTROL PANEL : FICHE PROJET */
  --detail-opening-min-height:78svh;
  --detail-opening-top:clamp(80px,12vh,150px);
  --detail-opening-bottom:clamp(65px,9vh,110px);
  --detail-opening-gap:clamp(50px,8vw,140px);
  --detail-title-size:clamp(62px,9vw,148px);
  --detail-hero-height:min(84svh,920px);
  --detail-facts-gap-y:38px;
  --detail-facts-gap-x:34px;

  /* 14 — DESIGN CONTROL PANEL : GALERIE, PRESSE ET VIDÉO */
  --gallery-heading-size:11px;
  --gallery-caption-size:9px;
  --press-short-size:clamp(28px,4.1vw,68px);
  --press-medium-size:clamp(23px,3.15vw,50px);
  --press-long-size:clamp(18px,2.15vw,34px);
  --video-width:min(720px,52vw);
  --lightbox-bg:rgba(8,8,8,.97);

  /* 15 — DESIGN CONTROL PANEL : COLLABORATIONS */
  --collaboration-size:clamp(24px,3.55vw,55px);
  --collaboration-line-height:1.03;
  --collaboration-spacing:-.043em;
  --collaboration-xl:1em;
  --collaboration-lg:.82em;
  --collaboration-md:.68em;
  --collaboration-sm:.56em;

  /* 16 — DESIGN CONTROL PANEL : CONTACT */
  --contact-columns:minmax(0,1.58fr) minmax(230px,.42fr);
  --contact-name-size:clamp(30px,3.8vw,58px);
  --contact-role-size:11px;
  --contact-address-size:clamp(13px,1.05vw,17px);
  --contact-address-gap:7px;
  --contact-photo-ratio:1.56/1;

  /* 17 — DESIGN CONTROL PANEL : CV */
  --cv-intro-width:min(430px,48vw);
  --cv-intro-indent:clamp(70px,9vw,150px);
  --cv-intro-title-size:clamp(12px,1vw,15px);
  --cv-intro-text-size:clamp(10px,.78vw,12px);
  --cv-year-size:clamp(16px,1.45vw,22px);
  --cv-entry-size:clamp(14px,1.35vw,19px);
  --cv-entry-gap:8px;

}

@media (max-width:800px){
  :root{
    /* HERO MOBILE */
    --hero-right:18px;
    --hero-top:clamp(142px,20vh,205px);
    --hero-name-size:clamp(12px,3.72vw,19.2px);
    --hero-role-size:clamp(6px,1.85vw,9px);
    --hero-x:0px;
    --hero-y:0px;
    --hero-role-x:0px;
    --hero-role-gap:4px;
    --hero-name-join:-.20em;

    /* CONTACT MOBILE */
    --contact-profile-gap:24px;
    --contact-details-y:0px;

    /* DESIGN CONTROL PANEL MOBILE */
    --selected-title-size:clamp(21px,6.8vw,30px);
    --selected-first-title-size:clamp(21px,6.8vw,30px);
    --selected-artist-size:13px;
    --selected-mobile-copy-width:38vw;
    --selected-mobile-copy-max-width:154px;
    --selected-mobile-copy-offset:4.5vw;

    --timeline-item-min-height:94px;
    --timeline-item-compact-height:86px;
    --timeline-item-expanded-height:108px;
    --timeline-project-image-width:58px;
    --timeline-title-size:11px;
    --timeline-year-size:clamp(14px,4.4vw,21px);
    --timeline-meta-size:8px;

    --detail-opening-min-height:auto;
    --detail-opening-top:78px;
    --detail-opening-bottom:38px;
    --detail-opening-gap:34px;
    --detail-title-size:16vw;
    --detail-hero-height:68svh;
    --detail-facts-gap-y:19px;

    --gallery-heading-size:10px;
    --gallery-caption-size:9px;
    --video-width:100%;

    --collaboration-size:8.4vw;
    --collaboration-xl:1em;
    --collaboration-lg:.84em;
    --collaboration-md:.7em;
    --collaboration-sm:.6em;

    --contact-columns:1fr;
    --contact-name-size:10.5vw;
    --contact-role-size:10px;
    --contact-address-size:15px;
    --contact-photo-ratio:1.35/1;

    --cv-intro-width:min(84vw,340px);
    --cv-intro-indent:28px;
    --cv-intro-title-size:12px;
    --cv-intro-text-size:10px;
    --cv-year-size:18px;
    --cv-entry-size:14px;

  }
}