/* =====================================================================
   GR Studio · portfolio — feuille de style commune (accueil + études)
   Direction : sobre, typographie d'abord, un seul accent, verre pour la nav.
   Règles appliquées : apple-design + emil-design-eng
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --accent:#33c4da;
  --accent-ink:#0e7f93;
  --dark:#000000;
  --dark-2:#161617;
  --dark-ink:#f5f5f7;
  --dark-ink-2:#a1a1a6;
  --wa-bg:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-head:#008069;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius: 22px;
  --wrap: 1080px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.5 var(--font);letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
p{margin:0;}
h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:22px;}

/* Typographie : graisse + taille + interlignage ensemble, tracking selon la taille */
.t-hero{font-size:clamp(3rem,9vw,6.4rem);line-height:1.02;letter-spacing:-0.045em;font-weight:800;}
.t-display{font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.06;letter-spacing:-0.035em;font-weight:700;}
.t-title{font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.12;letter-spacing:-0.025em;font-weight:700;}
.t-lead{font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.42;letter-spacing:-0.017em;color:var(--ink-2);font-weight:500;}
.t-eyebrow{font-size:.95rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink-2);}
.t-small{font-size:.875rem;color:var(--ink-2);letter-spacing:-0.006em;}
.muted{color:var(--ink-2);}

/* ---------- Navigation en verre ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(0,0,0,.08);}
.nav .wrap{display:flex;align-items:center;gap:24px;height:52px;}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.08rem;letter-spacing:-0.02em;}
.brand img{width:38px;height:38px;border-radius:100px;object-fit:cover;}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.82rem;color:var(--ink);}
.nav-links a{opacity:.8;transition:opacity 150ms ease;}
.nav-links a[aria-current="page"]{opacity:1;font-weight:600;}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{opacity:1;} }

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:980px;font-weight:500;font-size:1rem;letter-spacing:-0.01em;padding:11px 22px;transition:transform 160ms var(--ease-out), background-color 200ms ease;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#fff;font-weight:600;}
.btn-sm{font-size:.8rem;padding:6px 14px;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-light{background:#fff;color:var(--ink);}
.btn svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#4fd0e3;}
  .btn-dark:hover{background:#333336;}
}
.link{color:var(--accent-ink);font-weight:500;display:inline-flex;align-items:center;gap:4px;}
.link::after{content:"›";font-size:1.15em;line-height:1;transform:translateY(-1px);transition:transform 160ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .link:hover{text-decoration:underline;} .link:hover::after{transform:translate(2px,-1px);} }
.on-dark .link{color:#33c4da;}

/* ---------- Sections ---------- */
.section{padding-block:clamp(72px,10vw,120px);}
.section-alt{background:var(--bg-alt);}
.section-dark{background:var(--dark);color:var(--dark-ink);}
.section-dark .t-lead,.section-dark .muted,.section-dark .t-small{color:var(--dark-ink-2);}
.section-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,6vw,64px);}
.section-head .t-lead{margin-top:14px;}

/* ---------- Apparition au scroll (vue une fois : légère, rapide) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms);}
.reveal.in{opacity:1;transform:none;}

/* ---------- Pastilles plateforme / avatars ---------- */
.av{width:40px;height:40px;border-radius:100px;object-fit:cover;flex:none;background:#fff;}
.av.fit{object-fit:contain;padding:4px;border:1px solid var(--line);}
.av-stack{display:flex;}
.av-stack img{width:34px;height:34px;border-radius:100px;object-fit:cover;border:2px solid #fff;background:#fff;margin-left:-8px;}
.av-stack img:first-child{margin-left:0;}
.av-stack img.fit{object-fit:contain;padding:3px;}
.ico{width:16px;height:16px;flex:none;}

/* ---------- Contrôle segmenté (filtre) ---------- */
.seg{position:relative;display:inline-flex;background:rgba(118,118,128,.12);border-radius:10px;padding:2px;}
.section-dark .seg{background:rgba(118,118,128,.24);}
.seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-size:.86rem;font-weight:500;padding:7px 18px;border-radius:8px;color:inherit;transition:color 200ms ease;white-space:nowrap;}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:2px;border-radius:8px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  transition:transform 320ms var(--ease-out), width 320ms var(--ease-out), background-color 260ms ease;}
.seg-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);opacity:0;transition:opacity 260ms ease;}
.seg[data-active="all"] .seg-thumb{background:#636366;}
.seg[data-active="long"] .seg-thumb{background:#ff0033;}
.seg[data-active="court"] .seg-thumb::after{opacity:1;}
.seg button[aria-pressed="true"]{color:#fff;}
.section:not(.section-dark) .seg[data-active="all"] .seg-thumb{background:var(--ink);}

/* ---------- Vidéos ---------- */
.video{position:relative;border-radius:18px;overflow:hidden;background:#111;aspect-ratio:16/9;}
.video.v{aspect-ratio:9/16;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.poster{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;background:#111;}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out), opacity 300ms ease;}
.poster .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:100px;background:rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);display:flex;align-items:center;justify-content:center;transition:transform 160ms var(--ease-out), background-color 200ms ease;}
.poster .play svg{width:24px;height:24px;margin-left:3px;fill:#fff;}
.poster:active .play{transform:scale(0.94);}
@media (hover:hover) and (pointer:fine){
  .poster:hover img{transform:scale(1.025);}
  .poster:hover .play{background:rgba(255,255,255,.32);}
}
.v-cap{margin-top:14px;}
.v-cap b{display:block;font-size:1rem;font-weight:600;letter-spacing:-0.015em;}
.v-cap span{font-size:.875rem;color:var(--ink-2);}
.section-dark .v-cap span{color:var(--dark-ink-2);}
.is-hidden{display:none !important;}
/* état de chargement d'une vidéo */
.video iframe{transition:opacity 300ms ease;}
.video iframe.pending{opacity:0;}
.video.is-loading .poster{cursor:progress;}
.video.is-loading .play svg{opacity:0;}
.video.is-loading .play::after{content:"";position:absolute;inset:18px;border-radius:100px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vspin 700ms linear infinite;}
@keyframes vspin{to{transform:rotate(360deg)}}

/* ---------- WhatsApp (repris tel quel : c'est la preuve) ---------- */
.wa{background:var(--wa-bg);border-radius:16px;overflow:hidden;}
.wa-head{display:flex;align-items:center;gap:10px;background:var(--wa-head);color:#fff;padding:9px 12px;font-size:.9rem;font-weight:600;}
.wa-head img{width:30px;height:30px;border-radius:100px;object-fit:cover;background:#fff;}
.wa-head img.fit{object-fit:contain;padding:3px;}
.wa-head small{display:block;font-weight:400;font-size:.7rem;opacity:.85;}
.wa-body{padding:12px 10px 16px;display:flex;flex-direction:column;gap:7px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px;}
.msg{position:relative;max-width:88%;padding:6px 9px 18px;border-radius:9px;font-size:.88rem;line-height:1.38;letter-spacing:0;box-shadow:0 1px .5px rgba(11,20,26,.13);word-wrap:break-word;color:#111b21;}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:2px;}
.msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px;}
.msg .h{position:absolute;right:8px;bottom:3px;font-size:.66rem;color:#667781;display:flex;align-items:center;gap:3px;}
.msg.out .h::after{content:"";width:15px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5l3 3 6-7M6.5 8.5l1 .2 6-7'/%3E%3C/svg%3E") no-repeat center/contain;}
.msg .nm{display:block;font-size:.76rem;font-weight:600;color:#c2410c;margin-bottom:1px;}
.msg .react{position:absolute;bottom:-11px;left:8px;background:#fff;border-radius:100px;padding:0 5px;font-size:.72rem;box-shadow:0 1px 2px rgba(0,0,0,.15);}
/* note vocale */
.voice{position:relative;display:flex;align-items:center;gap:10px;min-width:230px;padding-bottom:12px;}
.voice .vav{position:relative;width:38px;height:38px;flex:none;}
.voice .vav img{width:100%;height:100%;border-radius:100px;object-fit:cover;}
.voice .vav::after{content:"";position:absolute;right:-3px;bottom:-2px;width:15px;height:15px;border-radius:100px;border:2px solid #fff;background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-2.1A7 7 0 0 0 19 12z'/%3E%3C/svg%3E") center/9px no-repeat;}
.voice-play{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;color:#54656f;flex:none;}
.voice-play svg{width:26px;height:26px;}
.voice-wave{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;height:28px;cursor:pointer;}
.voice-wave i{width:3px;border-radius:3px;background:#b9c2c9;min-height:3px;}
.voice-wave i.p{background:#5fb4de;}
.voice-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:100px;background:#5fb4de;pointer-events:none;}
.voice-t{position:absolute;left:86px;bottom:0;font-size:.66rem;color:#667781;}

/* ---------- Contact ---------- */
.pick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px;}
.pick button{border:1px solid var(--line);background:#fff;border-radius:980px;padding:9px 18px;font-size:.92rem;cursor:pointer;transition:transform 160ms var(--ease-out), border-color 200ms ease, background-color 200ms ease;}
.pick button:active{transform:scale(0.97);}
.pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.wa-preview{max-width:440px;margin:22px auto 0;background:var(--wa-out);border-radius:12px 2px 12px 12px;padding:10px 14px;text-align:left;font-size:.95rem;box-shadow:0 1px .5px rgba(11,20,26,.13);}

footer{padding:28px 0 40px;font-size:.78rem;color:var(--ink-3);border-top:1px solid #e8e8ed;}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{transition-duration:0ms !important;animation:none !important;}
}
@media (prefers-reduced-transparency: reduce){
  .nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media (max-width:700px){
  .nav-links{display:none;}
  .nav .btn{margin-left:auto;}
}

/* ---------- Grain au survol (canvas animé, voir site.js) ----------
   data-grain="light" (grain sombre) ou "dark" (grain blanc) sur une section ;
   data-grain-focus sur les éléments qui teintent le grain en cyan quand on s'en approche. */
[data-grain]{position:relative;}
.grain-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
[data-grain] > :not(.grain-canvas){position:relative;z-index:1;}

/* Emplacement de vidéo en attente de lien */
.video.ph{display:flex;align-items:center;justify-content:center;background:#111;box-shadow:inset 0 0 0 1px #333;color:#86868b;font-size:.9rem;text-align:center;padding:16px;}

/* ---------- Loader « GRStudio. » : les lettres s'écrivent puis sautent en vague ----------
   Affiché une seule fois par visite (sessionStorage), retiré quand la page est prête. */
.loader{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:opacity 450ms var(--ease-out), visibility 0s linear 450ms;}
.loader.done{opacity:0;visibility:hidden;}
.no-loader .loader{display:none;}
.loader-word{display:flex;font-size:clamp(3rem,9vw,6.4rem);font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--accent);
  transition:transform 450ms var(--ease-out);}
.loader.done .loader-word{transform:scale(.97);}
.loader-word span{display:inline-block;opacity:0;transform:translateY(.25em);
  animation:ld-in 380ms var(--ease-out) forwards, ld-jump 1.1s ease-in-out infinite;
  animation-delay:calc(var(--i) * 70ms), calc(450ms + var(--i) * 90ms);}
.loader-word .dot{color:var(--ink);}
@keyframes ld-in{to{opacity:1;transform:none;}}
@keyframes ld-jump{0%,55%,100%{transform:translateY(0);}25%{transform:translateY(-.22em);}}
@media (prefers-reduced-motion: reduce){
  .loader-word span{opacity:1;transform:none;animation:none;}
}