/* ════════════════════════════════════════════════════════════════
   ACCUEIL
   Ouverture en fenêtre + manifeste, projets (galerie des marques),
   qui je suis (portrait, fiche), contact.
   Toutes les scènes animées sont réservées à l'écran, au mouvement autorisé
   et au mode récit : sinon, la page reste une page classique et lisible.
   ════════════════════════════════════════════════════════════════ */

/* la nav vit hors de #open : la portée de la timeline doit couvrir les deux */
:root{timeline-scope:--openTL}

.nav__mark{font-family:var(--font-serif);font-size:1.05rem;letter-spacing:-.02em;text-transform:none}
/* Le grand nom de l'ouverture rétrécit et glisse jusqu'à la place exacte du petit
   nom de la barre, puis lui passe le relais. Les distances (--dx, --dy, --k) sont
   mesurées par accueil.js ; le fond vitré de la barre n'arrive qu'après. */
@media screen and (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  html:not([data-resume]) .nav__mark{opacity:0;animation:relais linear both;animation-timeline:--openTL;animation-range:contain 17% contain 18%;animation-duration:auto}
  @keyframes relais{to{opacity:1}}
  html:not([data-resume]) .nav::before{opacity:0;animation:relais linear both;animation-timeline:--openTL;animation-range:contain 18% contain 26%;animation-duration:auto}
}
}

/* ═════════ 01 : OUVERTURE + MANIFESTE ═════════
   Une seule scène. Le nom, puis une fenêtre sur le travail qui s'ouvre
   jusqu'au plein écran ; le manifeste s'écrit par-dessus.
   Par défaut (sans support, mouvement réduit, mode résumé, impression) :
   le nom, puis un grand bloc image portant la phrase, rien d'épinglé. */
.open__in{text-align:center;padding-top:clamp(8rem,22vh,12rem);padding-bottom:clamp(3rem,8vh,5rem)}
.open__name{font-size:clamp(3rem,12.5vw,10.5rem);margin:1.1rem 0 1.3rem}
.open__role{color:var(--muted);font-size:clamp(.95rem,1.5vw,1.2rem)}

.frame{
  position:relative;z-index:2;overflow:hidden;isolation:isolate;
  margin:0 var(--gutter);min-height:88svh;border-radius:var(--radius-lg);
  display:grid;place-items:center;background:#111
}
.frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.frame__img + .frame__img{opacity:0}
.frame__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(10 10 10 / .5),rgb(10 10 10 / .72))}
/* la phrase vit toujours sur l'image : couleurs fixes, quel que soit le thème */
.manifest{
  font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(2.15rem,5.2vw,4.4rem);max-width:17ch;margin:0 auto;text-align:center;
  color:#f5f3ef;padding:0 var(--gutter)
}
.manifest .w[data-accent]{color:#e07a6e;font-style:italic}
/* le trait qui entoure « voix » : dessiné une fois pour toutes sans animation,
   tracé au fil du scroll quand l'ouverture est animée */
.manifest .w[data-accent]{position:relative;white-space:nowrap}
.trait{position:absolute;left:-9%;top:-18%;width:122%;height:136%;overflow:visible;pointer-events:none}
.trait path{fill:none;stroke:#e07a6e;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}

@media screen and (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  html:not([data-resume]) #open{height:330svh;view-timeline-name:--openTL}
  html:not([data-resume]) .stage{position:sticky;top:0;height:100svh;overflow:hidden}
  html:not([data-resume]) .open__in{
    position:absolute;inset:0;padding:0 var(--gutter) 30svh;z-index:3;pointer-events:none;
    display:flex;flex-direction:column;justify-content:center;align-items:center
  }
  /* la mention et le rôle s'effacent vite, le nom, lui, voyage */
  html:not([data-resume]) .open__in .eyebrow,
  html:not([data-resume]) .open__role{
    animation:heroOut linear both;animation-timeline:--openTL;
    animation-range:contain 0% contain 8%;animation-duration:auto
  }
  @keyframes heroOut{to{opacity:0;transform:translateY(-3svh)}}
  html:not([data-resume]) .open__name{
    width:fit-content;margin-left:auto;margin-right:auto;transform-origin:0 0;
    animation:nomRange linear both;animation-timeline:--openTL;
    animation-range:contain 0% contain 18%;animation-duration:auto
  }
  @keyframes nomRange{
    0%{transform:none}
    97%{opacity:1}
    100%{transform:translate(var(--dx,0px),var(--dy,-40svh)) scale(var(--k,.12));opacity:0}
  }

  /* la fenêtre : une vignette sous le nom, qui s'ouvre jusqu'aux bords.
     En fin de scène, ses coins inférieurs s'arrondissent : elle part comme une carte. */
  html:not([data-resume]) .frame{
    position:absolute;inset:0;margin:0;min-height:0;border-radius:0;
    clip-path:inset(64% calc(50% - clamp(88px,12vw,180px)) 9% round 18px);
    animation:frameOpen linear both;animation-timeline:--openTL;
    animation-range:contain 0% contain 100%;animation-duration:auto
  }
  @keyframes frameOpen{
    0%{clip-path:inset(64% calc(50% - clamp(88px,12vw,180px)) 9% round 18px)}
    36%,93%{clip-path:inset(0 0 0 0 round 0)}
    100%{clip-path:inset(0 0 0 0 round 0 0 var(--radius-lg) var(--radius-lg))}
  }
  /* l'image se pose pendant que la fenêtre s'ouvre */
  /* le point d'ancrage du zoom est choisi pour que la petite fenêtre du départ
     cadre la tasse et les mains, pas un pli de sweat noir */
  html:not([data-resume]) .frame__img:first-of-type{
    animation:frameSettle linear both;animation-timeline:--openTL;
    transform-origin:-24% 12%;
    animation-range:contain 0% contain 40%;animation-duration:auto
  }
  @keyframes frameSettle{from{transform:scale(1.3)}to{transform:none}}
  /* écran en hauteur : l'image est rognée sur les côtés, on recentre sur la tasse */
  @media (orientation: portrait){
    html:not([data-resume]) .frame__img:first-of-type{object-position:30% 50%;transform-origin:-6% -14%}
  }
  /* puis les autres projets passent en fondu, sous la phrase */
  html:not([data-resume]) .frame__img + .frame__img{
    animation:frameNext linear both;animation-timeline:--openTL;animation-duration:auto
  }
  @keyframes frameNext{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
  html:not([data-resume]) .frame__img:nth-of-type(2){animation-range:contain 60% contain 64%}
  html:not([data-resume]) .frame__img:nth-of-type(3){animation-range:contain 79% contain 83%}

  html:not([data-resume]) .frame__veil{
    opacity:0;animation:veilIn linear both;animation-timeline:--openTL;
    animation-range:contain 22% contain 40%;animation-duration:auto
  }
  @keyframes veilIn{to{opacity:1}}

  /* le manifeste s'allume mot à mot. On joue sur l'opacité plutôt que sur la couleur :
     le téléphone la calcule sans repeindre la page, le défilement reste fluide */
  html:not([data-resume]) .manifest .w{
    opacity:.16;
    animation:lightUp linear both;animation-timeline:--openTL;animation-duration:auto;
    animation-range:contain calc(38% + var(--i,0) * var(--step,3%)) contain calc(38% + var(--i,0) * var(--step,3%) + 9%)
  }
  @keyframes lightUp{to{opacity:1}}
  html:not([data-resume]) .trait path{stroke-dashoffset:1;animation:trace linear both;animation-timeline:--openTL;
    animation-range:contain 64% contain 74%;animation-duration:auto}
  @keyframes trace{to{stroke-dashoffset:0}}
  html:not([data-resume]) .manifest{
    opacity:0;animation:veilIn linear both;animation-timeline:--openTL;
    animation-range:contain 30% contain 40%;animation-duration:auto
  }
}
}

/* ═════════ QUI JE SUIS ═════════
   Après la galerie, le défilement continue de raconter : le portrait se dévoile, un trait
   rature « forcing », puis deux pistes se dessinent, l'une pour le terrain, l'autre pour
   l'école, avant « La suite » qui mène au contact.
   Sans animation (version courte, mouvement réduit, vieux navigateur) : tout est là, à plat. */
#about{padding-top:clamp(4rem,10vh,7rem);padding-bottom:clamp(3rem,8vh,5rem);view-timeline-name:--qui}
.about__grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(1.8rem,6vw,5.5rem);align-items:center}
.about__media{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.about__media img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.about__title{font-size:clamp(1.9rem,4.2vw,3.1rem);margin:.9rem 0 1.6rem}
.about__body > p{color:var(--muted);margin-bottom:1rem;max-width:50ch}
.about__body .about__conviction{color:var(--text);font-family:var(--font-serif);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.25;margin-top:1.5rem;view-timeline-name:--conviction}
.about__conviction em{font-style:italic;color:var(--accent-text)}
.biffe{position:relative;white-space:nowrap}
.rature{position:absolute;left:-6%;top:28%;width:112%;height:46%;overflow:visible;pointer-events:none}
.rature path{fill:none;stroke:var(--accent-text);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
#about .vers-methode{margin-top:.6rem}
@media(max-width:820px){
  .about__grid{grid-template-columns:1fr}
  .about__media{width:min(72vw,300px)}
}

/* deux pistes côte à côte : le terrain, l'école. Chacune a sa ligne, du plus récent au plus ancien */
.parcours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,5rem);margin-top:clamp(4rem,10vh,6.5rem)}
.piste__titre{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--text);
  padding-bottom:.9rem;margin-bottom:1.8rem;border-bottom:1px solid var(--line)}
.trajet{list-style:none;position:relative;display:flex;flex-direction:column;gap:clamp(1.8rem,5vh,2.6rem);
  padding-left:2.2rem;view-timeline-name:--trajet}
.trajet::before,.trajet::after{content:"";position:absolute;left:.5rem;top:.9rem;bottom:.9rem;width:2px;border-radius:2px;background:var(--line)}
.trajet::after{background:var(--accent-text);transform-origin:50% 0}
.etape{position:relative;view-timeline-name:--etape;display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.3rem 1.2rem;align-items:baseline}
/* le point de l'année, posé sur la ligne */
.etape::before{content:"";position:absolute;left:calc(-2.2rem + .5rem + 1px);top:.7rem;width:13px;height:13px;margin-left:-6.5px;
  border-radius:50%;background:var(--accent-text);border:2px solid var(--accent-text);box-sizing:border-box}
.etape--maintenant::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-text) 18%,transparent)}
.etape__an{font-family:var(--font-serif);font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.02em;color:var(--accent-text)}
.etape__an span{display:block;margin-top:.5rem;font-family:var(--font-sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.etape__fait{display:flex;flex-direction:column;gap:.2rem}
.etape__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.etape__fait b{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.etape__ou{font-size:.9rem;color:var(--muted)}
@media(max-width:820px){
  .parcours{grid-template-columns:1fr;gap:3.2rem}
}
@media(max-width:420px){
  .etape{grid-template-columns:1fr}
  .etape__an span{display:inline;margin:0 0 0 .6rem;vertical-align:.35em}
}

/* la suite : une ligne qui referme le parcours, juste avant le contact */
.la-suite{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:clamp(3rem,8vh,5rem);
  padding-top:1.6rem;border-top:1px solid var(--line)}
.la-suite__k{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;color:var(--accent-text)}
.dispo{display:inline-flex;align-items:center;gap:.6rem;font-size:.84rem;letter-spacing:.04em;color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem .5rem .8rem}
.dispo i{width:8px;height:8px;border-radius:50%;background:#3f9b5f;box-shadow:0 0 0 0 rgb(63 155 95 / .5);animation:pouls 2.4s ease-out infinite}
@keyframes pouls{70%{box-shadow:0 0 0 8px rgb(63 155 95 / 0)}100%{box-shadow:0 0 0 0 rgb(63 155 95 / 0)}}

@media screen and (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  /* le portrait se dévoile en entrant, comme la fenêtre de l'ouverture */
  html:not([data-resume]) .about__media{animation:portraitOuvre linear both;animation-timeline:--qui;
    animation-range:entry 0% entry 70%;animation-duration:auto}
  @keyframes portraitOuvre{from{clip-path:inset(22% 14% 22% 14% round 40px)}to{clip-path:inset(0 round var(--radius-lg))}}
  html:not([data-resume]) .about__media img{animation:portraitPose linear both;animation-timeline:--qui;
    animation-range:entry 0% entry 90%;animation-duration:auto}
  @keyframes portraitPose{from{scale:1.25}to{scale:1}}

  /* la conviction arrive, puis « forcing » est raturé à la main */
  html:not([data-resume]) .about__conviction{animation:rvIn linear both;animation-timeline:view();animation-range:entry 5% entry 60%;animation-duration:auto}
  html:not([data-resume]) .rature path{stroke-dashoffset:1;animation:rature linear both;animation-timeline:--conviction;
    animation-range:cover 35% cover 55%;animation-duration:auto}
  @keyframes rature{to{stroke-dashoffset:0}}

  /* la ligne se remplit au fil du défilement… */
  html:not([data-resume]) .trajet::after{animation:remplit linear both;animation-timeline:--trajet;
    animation-range:cover 18% cover 72%;animation-duration:auto}
  @keyframes remplit{from{scale:1 0}to{scale:1 1}}
  /* … et chaque année s'allume quand on l'atteint */
  html:not([data-resume]) .etape{animation:allume linear both;animation-timeline:view();
    animation-range:entry 70% cover 42%;animation-duration:auto}
  @keyframes allume{from{opacity:.22;translate:0 22px}to{opacity:1;translate:0 0}}
  html:not([data-resume]) .etape::before{animation:pointe linear both;animation-timeline:--etape;
    animation-range:cover 30% cover 42%;animation-duration:auto}
  @keyframes pointe{from{background:var(--bg);scale:.6}to{background:var(--accent-text);scale:1}}
}
}

/* ═════════ 02 : LES PROJETS ═════════ */
#work{padding-top:clamp(3rem,8vh,6rem);padding-bottom:clamp(3rem,8vh,6rem)}
.work__head{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.work__head h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.work__hint{margin-left:auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.work__hint .doigt{display:none}
@media (hover:none){.work__hint .souris{display:none}.work__hint .doigt{display:inline}}

.index{border-top:1px solid var(--line)}
.row{
  display:grid;
  grid-template-columns:2.8rem 5.5rem minmax(0,1fr) minmax(0,auto) 2rem;
  gap:clamp(.8rem,2vw,1.6rem);align-items:center;
  padding:clamp(.9rem,2vw,1.3rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);
  transition:padding-left .45s var(--ease),background-color .4s var(--ease)
}
.row:hover,.row:focus-visible{padding-left:.9rem;background:var(--surface)}
.row__n{font-family:var(--font-serif);color:var(--soft);font-size:.95rem}
/* vignette toujours visible : y compris au tactile et au clavier */
.row__thumb{width:5.5rem;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.row__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.row:hover .row__thumb img{transform:scale(1.07)}
.row__name{font-family:var(--font-serif);font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.05;transition:color .35s var(--ease)}
.row:hover .row__name{color:var(--accent-text)}
.row__tags{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-align:right}
.row__go{justify-self:end;color:var(--soft);transition:transform .4s var(--ease),color .35s var(--ease)}
.row:hover .row__go{transform:translateX(5px);color:var(--accent-text)}
@media(max-width:780px){
  .row{grid-template-columns:2rem 3.6rem minmax(0,1fr) 1.4rem;gap:.8rem}
  .row__thumb{width:3.6rem}
  .row__tags{display:none}
}

/* Aperçu au survol : une grande image suit le curseur avec un peu d'inertie.
   Au clic, c'est elle qui devient la couverture de la page projet.
   Souris uniquement : au tactile et au clavier, la vignette de la ligne suffit. */
.peek{
  position:fixed;left:0;top:0;z-index:40;pointer-events:none;
  width:clamp(220px,21vw,320px);aspect-ratio:4/5;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);
  box-shadow:0 30px 70px rgb(0 0 0 / .25);
  opacity:0;scale:.86;
  transition:opacity .35s var(--ease),scale .5s var(--ease);
  will-change:transform
}
.peek[data-on]{opacity:1;scale:1}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.12;
  transition:opacity .45s var(--ease),scale .9s var(--ease)}
.peek img[data-on]{opacity:1;scale:1}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.peek{display:none}}

/* ═════════ 04 : CONTACT ═════════ */
#contact{background:var(--surface);padding-top:clamp(3rem,9vh,6rem);padding-bottom:2rem;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
#contact h2{font-size:clamp(2.1rem,6.2vw,4.8rem);max-width:15ch;margin:.9rem 0 1.2rem}
.c__lead{color:var(--muted);max-width:40ch;margin-bottom:1.6rem}
#contact h2 em{font-style:italic;color:var(--accent-text)}
/* ailleurs : deux liens discrets, le formulaire reste la voie principale */
.c__ailleurs{display:flex;flex-wrap:wrap;gap:.6rem}
.c__ailleurs a{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.c__ailleurs a:hover{border-color:var(--accent-text);color:var(--accent-text)}
.c__ailleurs a span{transition:translate .45s var(--ressort-vif)}
.c__ailleurs a:hover span{translate:2px -2px}
.c__logo{flex:none;color:#0a66c2;transition:color .3s var(--ease)}
[data-theme=dark] .c__logo{color:#4b9be0}
.c__ailleurs a:hover .c__logo{color:currentColor}
.c__ailleurs a[download]:hover span{translate:0 3px}

/* ═════════ FORMULAIRE ═════════
   Même passerelle Web3Forms que l'ancien site, envoi en arrière-plan. */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.8rem,5vw,4rem);align-items:start}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;min-height:48px;padding:.75rem .9rem;
  background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;font-size:1rem;
  transition:border-color .25s var(--ease)
}
.field input::placeholder,.field textarea::placeholder{color:var(--soft);opacity:1}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-text)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--accent);border-width:2px}
.field__err{display:none;margin-top:.4rem;font-size:.8rem;color:var(--accent-text);letter-spacing:0;text-transform:none}
.field input[aria-invalid="true"] ~ .field__err,
.field textarea[aria-invalid="true"] ~ .field__err{display:block}
.consent{display:flex;gap:.65rem;align-items:flex-start;margin:1.1rem 0 1.4rem;font-size:.88rem;color:var(--muted)}
.consent input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.consent a{color:var(--text)}
.envoyer{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--text);color:var(--bg);border:0;border-radius:999px;
  min-height:48px;padding:.8rem 1.7rem;font:inherit;font-size:.95rem;cursor:pointer;
  transition:background-color .3s var(--ease),transform .3s var(--ease)
}
.envoyer:hover:not(:disabled){background:var(--accent);transform:translateY(-2px)}
.envoyer:disabled{opacity:.55;cursor:progress;transform:none}
.envoyer__spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .7s linear infinite}
.envoyer[data-envoi] .envoyer__spin{display:inline-block}
@keyframes tourne{to{transform:rotate(360deg)}}
/* message parti : le bouton se teinte et une coche se trace */
.envoyer__coche{display:none}
.envoyer__coche path{stroke-dasharray:1;stroke-dashoffset:1}
.envoyer[data-ok]{background:var(--accent);color:var(--on-accent);animation:tape .5s var(--ressort-vif)}
.envoyer[data-ok] .envoyer__coche{display:block;animation:poseCoche .64s var(--ressort-vif) both}
.envoyer[data-ok] .envoyer__coche path{animation:traceCoche .4s var(--ease) .1s forwards}
@keyframes poseCoche{from{scale:.3}}
@keyframes traceCoche{to{stroke-dashoffset:0}}
/* champ manquant : un petit « non » de la tête */
.envoyer[data-non]{animation:non .5s var(--ease)}
@keyframes non{20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}

/* case de consentement : elle se coche avec un rebond */
.consent input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;
  border:1.5px solid var(--soft);border-radius:5px;background:var(--bg);cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease}
.consent input::after{content:"";width:9px;height:5px;margin-top:-2px;border:solid var(--on-accent);border-width:0 0 2px 2px;rotate:-45deg;scale:0;transition:scale .4s var(--ressort-vif)}
.consent input:checked{background:var(--accent);border-color:var(--accent);animation:tape .5s var(--ressort-vif)}
.consent input:checked::after{scale:1}
.consent input:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.consent input[aria-invalid="true"]{border-color:var(--accent-text)}
.form__etat{margin-top:1rem;font-size:.92rem;padding:.85rem 1rem;border-radius:var(--radius);display:none}
.form__etat[data-ok]{display:block;background:var(--surface-2);color:var(--text);border-left:3px solid var(--accent-text)}
.form__etat[data-ko]{display:block;background:var(--surface-2);color:var(--text);border-left:3px solid var(--accent)}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:820px){.contact__grid{grid-template-columns:1fr}.form__row{grid-template-columns:1fr}}

/* ═════════ 04 bis : LA GALERIE DES MARQUES ═════════
   Avec les animations au scroll : la liste devient une piste horizontale épinglée.
   On descend, les projets glissent de droite à gauche, et la scène prend la couleur
   de chaque marque. Couleurs de marque fixes, indépendantes du thème (contraste AA).
   Sinon (version courte, mouvement réduit, vieux navigateur) : la liste ci-dessus. */
@property --g-bg{syntax:"<color>";inherits:true;initial-value:#efe6d2}
@property --g-texte{syntax:"<color>";inherits:true;initial-value:#1b1a17}
@property --g-doux{syntax:"<color>";inherits:true;initial-value:#6b5530}
.row__visuel,.row__accroche,.row__ctx{display:none}

@media screen and (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  html:not([data-resume]) #work{height:420svh;padding:0;view-timeline-name:--workTL}
  html:not([data-resume]) #work .stage{
    /* clip et non hidden : une carte qui reçoit le focus ne fait pas défiler la scène en douce */
    position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip;
    display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,3vh,2rem);
    padding-top:4.5rem;padding-bottom:2rem;
    background:var(--g-bg);color:var(--g-texte);
    animation:galerieTeinte linear both;animation-timeline:--workTL;
    animation-range:contain 0% contain 100%;animation-duration:auto
  }
  /* une teinte par marque, tenue le temps que sa carte est au centre */
  @keyframes galerieTeinte{
    0%,14%{--g-bg:#efe6d2;--g-texte:#1b1a17;--g-doux:#6b5530}
    30%,42%{--g-bg:#9a4018;--g-texte:#fbf3e6;--g-doux:#f6dcc4}
    58%,70%{--g-bg:#141414;--g-texte:#e5e5ea;--g-doux:#a09c93}
    86%,93%{--g-bg:#e4ecf3;--g-texte:#10243d;--g-doux:#2f4f73}
    100%{--g-bg:var(--bg);--g-texte:var(--text);--g-doux:var(--soft)}
  }
  html:not([data-resume]) #work .work__head{margin:0;animation:none}
  html:not([data-resume]) #work .work__head .eyebrow,
  html:not([data-resume]) #work .work__hint{color:var(--g-doux)}
  html:not([data-resume]) #work .work__piste{max-width:none;padding:0}
  html:not([data-resume]) #work .index{
    display:flex;gap:clamp(1.2rem,3vw,2.6rem);width:max-content;border:0;
    padding-left:var(--gutter);padding-right:var(--gutter);
    animation:galerieGlisse linear both;animation-timeline:--workTL;
    animation-range:contain 0% contain 100%;animation-duration:auto
  }
  @keyframes galerieGlisse{0%,8%{transform:none}92%,100%{transform:translateX(calc(-100% + 100vw))}}

  /* la carte : grand visuel à gauche, le nom et les tags à droite */
  html:not([data-resume]) #work .row{
    width:min(76vw,1040px);height:min(62svh,620px);flex:none;
    /* le visuel prend la largeur que réclame sa forme (--arv, borné) : une affiche reste entière */
    display:grid;grid-template-columns:min(calc(min(62svh,620px) * var(--arv,1)),62%) minmax(0,1fr);
    grid-template-rows:auto 1fr auto auto auto;
    grid-template-areas:"visuel n" "visuel name" "visuel accroche" "visuel tags" "visuel go";
    column-gap:clamp(1.2rem,3vw,2.6rem);row-gap:.6rem;
    padding:0;border:0;background:none;color:inherit;animation:none;opacity:1;transform:none
  }
  html:not([data-resume]) #work .row:hover,
  html:not([data-resume]) #work .row:focus-visible{padding-left:0;background:none}
  html:not([data-resume]) #work .row__thumb{display:none}
  html:not([data-resume]) #work .row__visuel{
    grid-area:visuel;display:block;border-radius:var(--radius-lg);overflow:hidden;
    position:relative;min-height:0;align-self:stretch;
    background:rgb(0 0 0 / .08);box-shadow:0 30px 70px rgb(0 0 0 / .18)
  }
  /* l'image est posée en absolu : une affiche en portrait n'impose plus sa hauteur à la carte */
  html:not([data-resume]) #work .row__visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
  html:not([data-resume]) #work .row:hover .row__visuel img{transform:scale(1.04)}
  html:not([data-resume]) #work .row__n{grid-area:n;align-self:start;color:var(--g-doux);font-size:1.1rem}
  html:not([data-resume]) #work .row__name{grid-area:name;align-self:end;font-size:clamp(3rem,8vw,7.5rem);line-height:.9;color:inherit}
  html:not([data-resume]) #work .row:hover .row__name{color:inherit}
  html:not([data-resume]) #work .row__tags{grid-area:tags;display:block;text-align:left;color:var(--g-doux)}
  /* ce que raconte le projet, et dans quel cadre il a été fait */
  html:not([data-resume]) #work .row__ctx{display:inline;font-family:var(--font-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
  html:not([data-resume]) #work .row__accroche{grid-area:accroche;display:block;max-width:30ch;margin:.4rem 0 .5rem;
    font-family:var(--font-serif);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.25;color:inherit;text-wrap:pretty}
  html:not([data-resume]) #work .row__go{grid-area:go;justify-self:start;color:inherit;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
  html:not([data-resume]) #work .row__go::before{content:"Lire l’étude de cas "}
  html:not([data-resume]) #work .peek{display:none}

  /* repère de progression : quatre traits, celui de la carte au centre s'allume */
  html:not([data-resume]) #work .work__barre{
    display:block;height:2px;margin:0 var(--gutter);background:color-mix(in srgb,var(--g-texte) 18%,transparent);
    position:relative;overflow:hidden
  }
  html:not([data-resume]) #work .work__barre i{position:absolute;inset:0;background:var(--g-texte);transform-origin:0 50%;
    animation:barGrow linear both;animation-timeline:--workTL;animation-range:contain 8% contain 92%;animation-duration:auto}

  @media(max-width:820px){
    html:not([data-resume]) #work{height:380svh}
    html:not([data-resume]) #work .row{
      width:84vw;height:auto;grid-template-columns:1fr;
      grid-template-rows:auto auto auto auto auto auto;
      grid-template-areas:"visuel" "n" "name" "accroche" "tags" "go"
    }
    html:not([data-resume]) #work .row__visuel{height:40svh}
    html:not([data-resume]) #work .row__accroche{font-size:1.02rem;margin:.1rem 0 .2rem;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    html:not([data-resume]) #work .row__ctx{font-size:.62rem}
    html:not([data-resume]) #work .row__name{font-size:clamp(2.6rem,12vw,3.6rem)}
    html:not([data-resume]) #work .work__head h2{font-size:clamp(1.6rem,7vw,2.2rem)}
    /* chaque carte dit déjà « Lire l'étude de cas » : l'indice libère de la place */
    html:not([data-resume]) #work .work__hint{display:none}
  }
  @media(max-width:820px) and (max-height:700px){
    html:not([data-resume]) #work .row__visuel{height:33svh}
  }
}
}
.work__barre{display:none}

/* ═════════ LES PROJETS SUR TÉLÉPHONE ═════════
   Version simple (imposée sous 820 px) : pas de piste horizontale, mais pas non plus
   une liste de vignettes. Chaque projet devient une carte, grande image en tête. */
@media(max-width:820px){
  html[data-resume] #work .work__hint{display:none}
  html[data-resume] #work .index{border:0;display:flex;flex-direction:column;gap:clamp(2.6rem,7vh,3.4rem)}
  html[data-resume] #work .row{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"visuel" "n" "name" "accroche" "tags" "go";
    gap:.35rem;padding:0;border:0;background:none
  }
  html[data-resume] #work .row:hover,html[data-resume] #work .row:focus-visible{padding-left:0;background:none}
  html[data-resume] #work .row__thumb{display:none}
  html[data-resume] #work .row__visuel{grid-area:visuel;display:block;position:relative;aspect-ratio:var(--arc,4/3);margin-bottom:.8rem;
    border-radius:var(--radius-lg);overflow:hidden}
  html[data-resume] #work .row__visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  html[data-resume] #work .row__n{grid-area:n;font-size:.95rem}
  html[data-resume] #work .row__ctx{display:inline;font-family:var(--font-sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
  html[data-resume] #work .row__name{grid-area:name;font-size:clamp(2.3rem,11vw,3rem);line-height:.95}
  html[data-resume] #work .row:hover .row__name{color:inherit}
  html[data-resume] #work .row__accroche{grid-area:accroche;display:block;font-family:var(--font-serif);font-size:1.15rem;line-height:1.3;color:var(--muted);margin:.2rem 0 .3rem}
  html[data-resume] #work .row__tags{grid-area:tags;display:block;text-align:left}
  html[data-resume] #work .row__go{grid-area:go;justify-self:start;margin-top:.3rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
  html[data-resume] #work .row__go::before{content:"Lire l’étude de cas "}
}