/* Yann Tassoua, portfolio. Direction A « Fil blanc » (Kimia, Oya). Theme sombre unique, decision explicite. */

:root{
  --bg:#0E1633;
  --surface:#16204A;
  --border:#2A3766;
  --ink:#F3EFE6;
  --ink-2:#B9BFD6;
  --accent:#E9B872;
  --accent-hover:#F2CB8E;
  --accent-soft:#22305A;
  --display:"Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter:80px;
  --max:1280px;
  --rail:56px;
  --sec:160px;
  color-scheme:dark;
}
@media (max-width:1024px){ :root{ --gutter:48px; --sec:120px; --rail:40px; } }
@media (max-width:820px){ :root{ --gutter:24px; --sec:96px; --rail:14px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (max-width:820px){ body{ font-size:17px; } }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; text-wrap:balance; }
h2{ font-family:var(--display); font-weight:500; font-size:54px; line-height:1.02; letter-spacing:-0.035em; font-variation-settings:"wdth" 112; }
h3{ font-family:var(--sans); font-weight:600; font-size:24px; line-height:1.2; letter-spacing:-0.01em; }
@media (max-width:820px){ h2{ font-size:36px; } h3{ font-size:20px; } }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--accent); color:var(--bg); }

/* Langue : un seul bloc visible a la fois */
[lang="en"]{ display:none; }
html[data-lang="en"] [lang="en"]{ display:revert; }
html[data-lang="en"] [lang="fr"]{ display:none; }
html[data-lang="en"] span[lang="en"], html[data-lang="fr"] span[lang="fr"]{ display:inline; }
html[data-lang="en"] div[lang="en"]{ display:block; }

.eyebrow{
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--accent); margin:0 0 20px;
}

/* Le fil blanc */
#fil{
  position:absolute; top:0; left:0; width:100%;
  pointer-events:none; z-index:5; overflow:visible;
}
#fil path{
  fill:none; stroke:rgba(243,239,230,0.72); stroke-width:1.5; stroke-linecap:round;
  filter:blur(0.4px);
}
.fil-anchor{ position:absolute; left:50%; top:27%; width:1px; height:1px; }

/* Barre haute */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--gutter);
  background:transparent;
  transition:background 240ms ease, box-shadow 240ms ease;
}
.top.is-stuck{ background:rgba(14,22,51,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--border); }
.top__name{ font-weight:500; text-decoration:none; font-size:16px; letter-spacing:-0.01em; }
.lang{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; }
.lang__btn{ background:none; border:0; padding:6px 2px; color:var(--ink-2); font:inherit; letter-spacing:inherit; cursor:pointer; }
.lang__btn.is-on{ color:var(--ink); }
.lang__sep{ color:var(--border); }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-weight:500; font-size:16px; line-height:1; text-decoration:none;
  border:1px solid transparent; white-space:nowrap;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn--sm{ padding:10px 16px; font-size:14px; }
.btn--accent{ background:var(--accent); color:var(--bg); }
.btn--accent:hover{ background:var(--accent-hover); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
.btn__arrow{ display:inline-block; transition:transform 160ms ease; }
.btn--accent:hover .btn__arrow{ transform:translateX(4px); }

/* Hero */
.hero{
  position:relative;
  display:grid; grid-template-columns:7fr 5fr; align-items:end;
  gap:24px;
  max-width:var(--max); margin:0 auto; padding:24px var(--gutter) 0;
  min-height:min(88vh, 900px);
}
.hero__text{ position:relative; z-index:6; padding-bottom:72px; }
.hero__name{
  font-family:var(--display); font-weight:600; font-size:clamp(60px, 10.4vw, 168px); line-height:0.86; letter-spacing:-0.05em; font-variation-settings:"wdth" 118;
  display:flex; flex-direction:column; margin:8px 0 28px;
}
.hero__last{ font-style:italic; padding-left:0.02em; }
.hero__claim{ font-family:var(--display); font-weight:500; font-size:clamp(21px, 2vw, 28px); line-height:1.3; letter-spacing:-0.025em; font-variation-settings:"wdth" 100; max-width:20em; margin-bottom:16px; }
.hero__sub{ color:var(--ink-2); max-width:34em; margin-bottom:36px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__portrait{
  position:relative; margin:0; align-self:end; justify-self:end;
  width:min(100%, 620px);
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}
.hero__portrait img{ width:100%; height:auto; }
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; align-items:start; min-height:0; padding-top:8px; }
  .hero__portrait{ order:-1; justify-self:center; width:min(100%, 360px); aspect-ratio:4/5; overflow:hidden; }
  .hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
  .hero__text{ padding-bottom:40px; }
  .hero__name{ font-size:52px; }
  .hero__claim{ font-size:26px; }
}

/* Marquee */
.marquee{ overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; position:relative; z-index:6; background:var(--bg); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 46s linear infinite; }
.marquee__track > span{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); padding:0 28px; position:relative; white-space:nowrap; }
.marquee__track > span::after{ content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--accent); opacity:0.8; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* Sections */
section{ max-width:var(--max); margin:0 auto; padding:var(--sec) var(--gutter) 0; }
.section-head{ max-width:30em; margin-bottom:64px; }
@media (max-width:820px){ .section-head{ margin-bottom:40px; } }

/* Manifeste */
.manifeste{ display:grid; grid-template-columns:320px 1fr 110px; gap:48px; align-items:center; }
.manifeste__portrait{
  margin:0 0 0 calc(var(--gutter) * -0.5); position:relative; justify-self:start;
  width:min(100%, 300px);
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
}
.manifeste__portrait img{ width:100%; height:auto; }
.manifeste__text p{ max-width:34em; margin-bottom:1.2em; }
.manifeste__text p:last-child{ margin-bottom:0; }
.manifeste__gutter{ min-height:100%; }
@media (max-width:1024px){ .manifeste{ grid-template-columns:280px 1fr; gap:32px; } .manifeste__gutter{ display:none; } }
@media (max-width:820px){ .manifeste__portrait{ margin-left:0; width:min(100%, 320px); } }
@media (max-width:820px){
  .manifeste{ grid-template-columns:1fr; gap:8px; }
  .manifeste__portrait{ width:min(100%, 320px); margin:0 auto; }
}

/* Projets */
.projets{ position:relative; }
.rail{ position:absolute; top:0; bottom:0; left:calc(var(--gutter) - var(--rail)); width:1px; }
.projet{
  display:grid; grid-template-columns:6fr 5fr; gap:48px; align-items:center;
  padding:56px 0; border-top:1px solid var(--border);
  position:relative;
}
.projet:last-of-type{ border-bottom:1px solid var(--border); }
.projet__num{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:18px; }
.projet__title{ font-family:var(--display); font-weight:500; font-size:42px; line-height:1.05; letter-spacing:-0.035em; margin-bottom:10px; font-variation-settings:"wdth" 110; }
.projet__role{ color:var(--accent); font-size:15px; font-weight:500; margin-bottom:18px; }
.projet__text > p:not(.projet__num):not(.projet__role):not(.projet__state){ max-width:34em; }
.projet__state{ color:var(--ink-2); font-size:16px; margin-top:16px; max-width:34em; }
.projet__state a{ color:var(--ink); text-decoration-color:var(--border); text-underline-offset:3px; }
.projet__state a:hover{ text-decoration-color:var(--accent); }
.tags{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; background:var(--accent-soft); color:var(--ink); padding:7px 12px; border-radius:999px; }
.projet__media{ position:relative; }
.shot{
  margin:0; aspect-ratio:16/10; overflow:hidden; border-radius:6px;
  background:var(--surface); border:1px solid var(--border);
  transition:transform 240ms ease, border-color 240ms ease;
}
.shot img{ width:100%; height:100%; object-fit:cover; object-position:top; filter:brightness(0.92); transition:filter 240ms ease; }
.projet:hover .shot{ transform:translateY(-4px); border-color:var(--accent-soft); }
.projet:hover .shot img{ filter:brightness(1); }
.shot--phone{
  position:absolute; right:-12px; bottom:-28px; width:26%; aspect-ratio:390/844;
  border-radius:14px; border:1px solid var(--border); box-shadow:0 0 0 6px var(--bg);
}
.shot--empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:24px; color:var(--ink-2);
}
.shot--empty span{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.shot--empty small{ font-size:13px; }
@media (max-width:820px){
  .projet{ grid-template-columns:1fr; gap:28px; padding:40px 0; }
  .projet__media{ order:-1; }
  .projet__title{ font-size:32px; }
  .shot--phone{ right:-4px; bottom:-18px; width:30%; }
}

.aussi{ padding:56px 0 0; max-width:40em; }
.aussi p:not(.eyebrow){ color:var(--ink-2); font-size:16px; }
.aussi__strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:32px; max-width:none; }
.aussi__strip:empty{ display:none; }
.aussi__strip figure{ margin:0; aspect-ratio:4/5; overflow:hidden; border-radius:6px; background:var(--surface); border:1px solid var(--border); }
.aussi__strip img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.92); }
.aussi__strip figcaption{ display:none; }
@media (max-width:820px){ .aussi__strip{ grid-template-columns:repeat(2, 1fr); } }
.aussi:has(.aussi__strip:not(:empty)){ max-width:none; }
.aussi:has(.aussi__strip:not(:empty)) p{ max-width:40em; }

/* Savoir-faire */
.savoir__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; }
.savoir__item h3{ margin-bottom:12px; }
.savoir__item p{ color:var(--ink-2); max-width:30em; }
@media (max-width:820px){ .savoir__grid{ grid-template-columns:1fr; gap:36px; } }

/* Parcours */
.frise{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.frise__item{ display:grid; grid-template-columns:200px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); position:relative; }
.frise__date{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); padding-top:6px; }
.frise__item h3{ margin-bottom:6px; font-size:20px; }
.frise__item p:not(.frise__date){ color:var(--ink-2); max-width:34em; }
.formation{ color:var(--ink-2); font-size:16px; margin-top:32px; max-width:40em; }
@media (max-width:820px){ .frise__item{ grid-template-columns:1fr; gap:8px; } }

/* Contact */
.contact__inner{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:72px var(--gutter);
}
.contact h2{ margin-bottom:20px; }
.contact__text{ max-width:34em; color:var(--ink-2); margin-bottom:36px; }
.contact__mail{ font-family:var(--display); font-weight:500; font-size:clamp(24px, 3vw, 38px); text-decoration:none; letter-spacing:-0.03em; display:inline-block; margin-bottom:28px; word-break:break-all; border-bottom:1px solid var(--border); }
.contact__mail:hover{ border-color:var(--accent); }
.contact__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.contact__dispo{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); }
@media (max-width:820px){ .contact__inner{ padding:48px 24px; } }

/* Pied */
.foot{ max-width:var(--max); margin:0 auto; padding:64px var(--gutter) 40px; color:var(--ink-2); font-size:14px; }

/* Apparition au scroll : cachee seulement quand JS tourne */
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 500ms ease, transform 500ms ease; }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
}

/* Secondes images de fiche */
.shot--doc{
  position:absolute; right:-12px; bottom:-28px; width:30%; aspect-ratio:3/4;
  border-radius:6px; box-shadow:0 0 0 6px var(--bg);
}
.shot--second{
  position:absolute; right:-12px; bottom:-28px; width:44%; aspect-ratio:16/10;
  border-radius:6px; box-shadow:0 0 0 6px var(--bg);
}
@media (max-width:820px){
  .shot--doc{ right:-4px; bottom:-18px; width:32%; }
  .shot--second{ right:-4px; bottom:-18px; width:48%; }
}
.aussi__strip figcaption{ display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); padding:10px 0 0; }
.aussi__strip figure{ aspect-ratio:auto; background:none; border:0; border-radius:0; }
.aussi__strip figure img{ aspect-ratio:4/5; border-radius:6px; border:1px solid var(--border); }

/* v3 : casquette en rotation sous le nom, intro de section, preuves */
.hero__hat{
  font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(24px, 2.8vw, 38px); line-height:1.1; letter-spacing:-0.03em;
  color:var(--accent); min-height:1.2em; margin:-8px 0 18px;
}
.hero__claim{ font-style:normal; }
.section-intro{ color:var(--ink-2); margin-top:16px; max-width:30em; }
.savoir__grid{ grid-template-columns:repeat(3, 1fr); gap:40px 40px; }
.savoir__item p{ max-width:none; }
.proof{ font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); line-height:1.9; margin-top:14px; }
.savoir__item .proof{ color:var(--accent); }
@media (max-width:1024px){ .savoir__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:820px){ .savoir__grid{ grid-template-columns:1fr; gap:32px; } .hero__hat{ font-size:28px; margin-top:-4px; } }

/* Semantique et navigation */
.skip{ position:absolute; left:-999px; top:8px; z-index:50; background:var(--accent); color:var(--bg); padding:10px 14px; border-radius:4px; font-weight:600; text-decoration:none; }
.skip:focus{ left:16px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.top__nav{ display:flex; gap:26px; font-size:14px; font-weight:500; }
.top__nav a{ text-decoration:none; color:var(--ink-2); }
.top__nav a:hover{ color:var(--ink); }
@media (max-width:820px){ .top__nav{ display:none; } }
h2.eyebrow{ font-family:var(--sans); font-weight:500; font-variation-settings:normal; letter-spacing:0.14em; }
ul.proof{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:0 6px; }
ul.proof li + li::before{ content:"· "; }
.contact__address{ font-style:normal; }
.projet__num time, .frise__date time{ font-variant-numeric:tabular-nums; }
.hero__hat{ font-variation-settings:"wdth" 100; }
.contact__mail{ font-variation-settings:"wdth" 105; }

/* Telechargement du CV : boite de dialogue */
.top__cta{ display:flex; align-items:center; gap:10px; }
@media (max-width:820px){ .top__cta .btn--ghost{ display:none; } }

.cvbox{
  width:min(560px, calc(100vw - 32px)); padding:0; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.cvbox::backdrop{ background:rgba(6,10,26,0.72); backdrop-filter:blur(3px); }
.cvbox__form, .cvbox__merci{ padding:40px; position:relative; }
.cvbox h2{ font-size:34px; margin-bottom:12px; }
.cvbox__intro{ color:var(--ink-2); margin-bottom:28px; max-width:32em; }
.cvbox__close{
  position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%;
  background:none; border:1px solid var(--border); color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer;
  transition:border-color 160ms ease, color 160ms ease;
}
.cvbox__close:hover{ border-color:var(--accent); color:var(--ink); }
.champ{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.champ label{ font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-2); }
.champ input{
  font:inherit; font-size:17px; color:var(--ink); background:var(--bg);
  border:1px solid var(--border); border-radius:4px; padding:13px 14px;
  transition:border-color 160ms ease;
}
.champ input::placeholder{ color:var(--ink-2); opacity:0.55; }
.champ input:focus{ border-color:var(--accent); outline:none; }
.champ input:user-invalid{ border-color:#E08A7A; }
.champ--option label{ text-transform:none; letter-spacing:0; font-size:13px; }
.cvbox__erreur{ color:#E9A392; font-size:15px; margin-bottom:16px; }
.cvbox__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px; }
.cvbox__actions .link{ background:none; border:0; padding:0; color:var(--ink-2); font:inherit; font-size:15px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border); }
.cvbox__actions .link:hover{ color:var(--ink); }
.cvbox__legal{ font-size:13px; color:var(--ink-2); margin-top:22px; max-width:34em; }
.cvbox__form.is-busy{ opacity:0.6; pointer-events:none; }
@media (max-width:820px){ .cvbox__form, .cvbox__merci{ padding:30px 22px; } .cvbox h2{ font-size:26px; } }

/* Angle product designer : intitule fixe et ligne de disponibilite */
.hero__hat{ font-style:normal; font-weight:500; color:var(--accent); }
.hero__dispo{ font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-2); margin:0 0 30px; }
@media (max-width:820px){ .hero__dispo{ margin-bottom:24px; } }

/* Le reste du savoir-faire, une seule ligne sous les trois blocs */
.savoir__reste{ color:var(--ink-2); font-size:16px; margin-top:40px; max-width:46em; }

/* À propos ramené à un seul paragraphe : on lui donne du corps */
.manifeste__text{ font-size:clamp(19px, 1.7vw, 23px); line-height:1.55; max-width:30em; }

/* Mention de provenance sous une capture */
.projet__note{ font-size:12px; color:var(--ink-2); margin-top:14px; max-width:32em; line-height:1.5; }
@media (max-width:820px){ .projet__note{ margin-top:26px; } }

/* Liens du pied de page */
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 32px; }
.foot__liens{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.foot__liens a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border); }
.foot__liens a:hover{ text-decoration-color:var(--accent); }

/* Les <button> héritent d'un fond gris du navigateur : on les aligne sur les liens */
button.btn{ font:inherit; font-weight:500; font-size:16px; cursor:pointer; }
button.btn--ghost{ background:transparent; }
button.btn--sm{ font-size:14px; }

/* Témoignages */
.temoignages__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.temoignage{ margin:0; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:20px; }
.temoignage blockquote{ margin:0; }
.temoignage blockquote p{ font-family:var(--display); font-weight:400; font-size:21px; line-height:1.4; letter-spacing:-0.015em; color:var(--ink); }
.temoignage figcaption{ display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--ink-2); }
.temoignage figcaption strong{ color:var(--accent); font-weight:500; }
.temoignages__note{ font-size:12px; color:var(--ink-2); margin-top:32px; }
@media (max-width:1024px){ .temoignages__grid{ grid-template-columns:1fr; gap:28px; max-width:40em; } }
@media (max-width:820px){ .temoignage blockquote p{ font-size:19px; } }

/* Parcours : la description suit l'intitulé dans la colonne de droite */
.frise__item{ row-gap:6px; }
.frise__date{ grid-row:span 2; }
.frise__item h3, .frise__item > p:not(.frise__date){ grid-column:2; }
@media (max-width:820px){
  .frise__date{ grid-row:auto; }
  .frise__item h3, .frise__item > p:not(.frise__date){ grid-column:auto; }
}

/* Quatre témoignages : deux colonnes, deux rangées */
.temoignages__grid{ grid-template-columns:repeat(2, 1fr); gap:48px 64px; }
@media (max-width:1024px){ .temoignages__grid{ grid-template-columns:1fr; gap:28px; } }