/* ============================================================
   Simon Labbé — Système de marque V2
   Source de vérité : docs/brand-guidelines.md
   Contrainte tenue : 9 gris + 1 accent. Zéro dégradé, zéro ombre.
   ============================================================ */

/* --- 1. Jetons ------------------------------------------------ */
:root{
  --bg:#0b0b0b;
  --s1:#131313; --s2:#1a1a1a; --s3:#232323;
  --line:#2e2e2e; --line2:#3d3d3d;
  --dim:#8a8a8a; --mid:#b8b8b8; --fg:#f2f2f2;
  --acc:#f5b301; --acc-h:#c48f00;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:24px;
  /* La pente de la marque. PC : 20°. tan et 1/cos precalcules (pas de
     trigonometrie fiable en CSS partout). Mobile : 10°, cf. §22. */
  --ang:20deg;--tan:.364;--sec:1.0642;
  --max:1180px;
  --read:68ch;
}

/* --- 2. Réinitialisation -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--acc);color:#0b0b0b}
html{scrollbar-color:var(--acc) var(--s1)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--s1)}
::-webkit-scrollbar-thumb{background:var(--acc);border:3px solid var(--s1);border-radius:99px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* --- 3. Trame ------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.read{max-width:var(--read)}

/* --- 4. Typographie ------------------------------------------- */
.display{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.01em}
h1.display{font-size:clamp(3.2rem,11vw,8.5rem);margin:0}
h2.display{font-size:clamp(2.2rem,6vw,4.4rem);margin:0 0 .3em}
h3{font-family:var(--sans);font-weight:700;font-size:1.15rem;margin:0 0 .5em;letter-spacing:-.01em}

.label{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.28em;color:var(--dim);
  display:block;margin:0 0 1.2em;
}
.label b{color:var(--acc);font-weight:500}


.lede{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--mid);line-height:1.55}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--fg)}

/* Manifeste : très gros corps, l'accent ne touche qu'un fragment */
.manifesto{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5.2vw,3.6rem);line-height:1.08;margin:0;max-width:22ch}
.manifesto em{font-style:italic;color:var(--acc)}

/* Numéro de section en typo évidée */
.secno{font-family:var(--display);font-size:clamp(4rem,13vw,10rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--line2);
  user-select:none;margin:0 0 .12em}   /* plus de marge negative : le chiffre evide mordait sur l'etiquette */

/* --- 5. Signe ------------------------------------------------- */
/* La ligature SL de la carte de visite (charte §4.1). Le signe preexiste a la
   charte : il n'est ni redessine ni « modernise ». Pose en masque et non en
   <img> pour que sa couleur suive les jetons. */
.mark{display:block;
  -webkit-mask:url(logo.svg) center/contain no-repeat;
          mask:url(logo.svg) center/contain no-repeat;
  background:var(--fg);
  aspect-ratio:470.94/292.72;}    /* proportions natives du trace : 1,6088 */
.mark--acc{background:var(--acc)}

/* --- 6. Appel à l'action -------------------------------------- */
.cta{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-weight:700;font-size:.95rem;
  padding:15px 28px;background:var(--acc);color:#0b0b0b;
  text-decoration:none;border:0;cursor:pointer;
  transition:background .18s linear;
}
.cta:hover,.cta:focus-visible{background:var(--acc-h)}
.cta svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.cta-ghost{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 24px;background:transparent;color:var(--fg);
  border:1px solid var(--line2);text-decoration:none;cursor:pointer;
  transition:border-color .18s linear,color .18s linear;
}
.cta-ghost:hover,.cta-ghost:focus-visible{border-color:var(--acc);color:var(--acc)}

/* --- 7. Navigation ------------------------------------------- */
/* header.php est partage avec la V1 : on ne le modifie pas, on le rhabille.
   Son <style> inline impose #FFD700 aux liens ; les selecteurs ci-dessous sont
   plus specifiques et ramenent l'accent de la charte.
   Le comportement au scroll est celui de la V1 : en haut de page la barre est
   plaquee pleine largeur ; passe 10px de scroll son script ajoute .scrolled et
   elle se detache en barre flottante a 95%, arrondie et floutee. */
.header.menu{
  position:fixed;top:0;left:0;right:0;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px clamp(16px,3vw,30px);
  background:var(--bg);
  border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;
  z-index:1000;
  transition:top .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),
             background-color .5s,border-color .5s,border-radius .5s,
             backdrop-filter .5s,padding .5s}
.header.menu.scrolled{
  top:12px;width:min(95%,var(--max));
  background:rgba(19,19,19,.72);
  backdrop-filter:blur(15px) saturate(150%);
  -webkit-backdrop-filter:blur(15px) saturate(150%);
  border:1px solid var(--line2);
  border-radius:25px;
  padding:10px clamp(18px,2.4vw,26px)}

.header.menu .logo{display:flex;align-items:center;transition:transform .5s ease-in-out}
.header.menu .logo:hover{transform:rotate(360deg)}
.header.menu .logo img.favicon{width:28px;height:auto;display:block;filter:invert(1)}

.header.menu .nav-fr,.header.menu .nav-en{display:flex;gap:26px;align-items:center}
.header.menu .nav-fr a,.header.menu .nav-en a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin:0;text-decoration:none;
  transition:color .18s linear}
.header.menu .nav-fr a:hover,.header.menu .nav-en a:hover{color:var(--fg)}
.header.menu .nav-fr a.active,.header.menu .nav-en a.active{color:var(--acc)}
/* Le soulignement anime de Simon, ramene a l'accent de la charte. */
.header.menu .nav-fr a::before,.header.menu .nav-en a::before{background:var(--acc);height:1px;bottom:-6px}

/* Deplace dans la barre par le script : il en devient le 3e enfant flex. */
#lang-toggle-v2{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  background:transparent;color:var(--dim);border:1px solid var(--line2);
  padding:5px 9px;cursor:pointer;flex:0 0 auto;
  transition:color .18s linear,border-color .18s linear}
#lang-toggle-v2:hover{color:var(--acc);border-color:var(--acc)}
/* Sur mobile la barre passe EN BAS, dans la zone du pouce.
   Meme mecanique qu'en haut sur desktop : plaquee au repos, detachee en
   pilule flottante une fois .scrolled pose par le script de header.php.
   env(safe-area-inset-bottom) tient compte de la barre d'accueil iOS. */
@media(max-width:820px){
  .header.menu{
    top:auto;bottom:0;gap:0;
    padding:3px 14px;
    padding-bottom:calc(3px + env(safe-area-inset-bottom,0px));
    border:1px solid transparent;border-top-color:var(--line);border-bottom-color:transparent;
    transition:bottom .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),
               background-color .5s,border-color .5s,border-radius .5s,backdrop-filter .5s}
  .header.menu.scrolled{
    top:auto;bottom:12px;
    border:1px solid var(--line2);
    padding-bottom:calc(3px + env(safe-area-inset-bottom,0px))}

  /* Les liens partent juste apres le signe et se repartissent sur le reste. */
  .header.menu .nav-fr,.header.menu .nav-en{gap:0;flex:1;justify-content:space-between;margin-left:12px}
  /* Cibles tactiles : 44px de haut minimum, quoi que fasse la typo. */
  .header.menu .nav-fr a,.header.menu .nav-en a{
    font-size:.58rem;letter-spacing:.06em;
    display:flex;align-items:center;min-height:42px;padding:0 4px}
  /* Le soulignement actif repasse au-dessus du lien : en bas il serait coupe. */
  .header.menu .nav-fr a::before,.header.menu .nav-en a::before{top:2px;bottom:auto}
  .header.menu .logo img.favicon,.header.menu .logo .mark{width:24px}
  #lang-toggle-v2{display:none}

  /* La barre couvre le bas de page : on lui reserve la place. */
  body{padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))}
}

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:1001}

/* --- 8. Hero -------------------------------------------------- */
/* Tout le hero est regle sur UNE droite : l'oblique « / » a 20°.
   - la video est coupee par elle (bord gauche) ;
   - le filet d'accent la materialise ;
   - le texte y est COLLE : un flottant invisible porte sa forme
     (shape-outside), chaque ligne demarre sur l'arete + --gap ;
   - les boutons sont tranches par elle : cotes paralleles a 20°.
   Une seule pente, portee par --ang/--tan/--sec (§1) : 20° sur PC, 10° sur
   mobile (a 20° le decalage mangeait la moitie de l'ecran). */
.hero{
  --hero-h:clamp(600px,100svh,960px);
  --slash-x:clamp(16px,3vw,64px);       /* pied de l'arete */
  --slash-d:calc(var(--hero-h) * var(--tan)); /* decalage en tete : H x tan */
  --gap:clamp(18px,1.8vw,28px);         /* texte <-> arete */
  --col:min(600px,44vw);                /* largeur utile du texte */
  position:relative;height:var(--hero-h);overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--s1);
  clip-path:polygon(calc(var(--slash-x) + var(--slash-d)) 0, 100% 0, 100% 100%, var(--slash-x) 100%)}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08)}

/* Filet d'accent le long de l'arete : barre verticale pivotee de 20deg,
   allongee de 1/cos(20deg) pour couvrir toute la hauteur. */
.hero__edge{position:absolute;left:var(--slash-x);bottom:0;width:2px;
  height:calc(var(--hero-h) * var(--sec));background:var(--acc);
  transform-origin:bottom center;transform:rotate(var(--ang));z-index:2;pointer-events:none}

/* Voile de lisibilite (charte §4.4). Axe a 110deg = 20deg + 90deg :
   ses lignes d'egale densite sont PARALLELES au /. Le texte vit juste a
   droite de l'arete, donc le voile reste dense sur la largeur du texte
   et ne s'ouvre qu'au-dela. Arrets rapproches : pas de moire. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  --v1:34%;--v2:46%;--v3:54%;--v4:61%;--v5:68%;--v6:76%;--v7:85%;--v8:93%;
  background:linear-gradient(var(--scrim-ang,calc(var(--ang) + 90deg)),
    rgba(11,11,11,.97) 0,
    rgba(11,11,11,.93) var(--v1),
    rgba(11,11,11,.88) var(--v2),
    rgba(11,11,11,.78) var(--v3),
    rgba(11,11,11,.60) var(--v4),
    rgba(11,11,11,.38) var(--v5),
    rgba(11,11,11,.18) var(--v6),
    rgba(11,11,11,.06) var(--v7),
    rgba(11,11,11,0)   var(--v8))}

.hero__flow{position:absolute;inset:0;z-index:3;
  padding-right:max(var(--gut), calc(100% - var(--slash-x) - var(--slash-d) - var(--gap) - var(--col)))}
.hero__shape{float:left;height:100%;
  width:calc(var(--slash-x) + var(--slash-d) + var(--gap));
  shape-outside:polygon(0 0, 100% 0, calc(100% - var(--slash-d)) 100%, 0 100%)}
/* --copy-top est pose par le script (centrage reel) ; valeur de repli sans JS. */
.hero__copy{margin-top:var(--copy-top,calc(var(--hero-h) * .2))}

/* L'ecart marque -> mot vaut la garde d'espace mesuree : H/4, soit
   15,5 % de la largeur du logotype (ratio 1,6088). En ligne, pour que
   lui aussi demarre sur l'arete. */
.hero__logotype{display:inline-block;vertical-align:top;
  --lw:clamp(96px,min(13vw,19vh),190px);width:var(--lw);
  margin:0 0 calc(var(--lw) * .155);
  /* Le signe est une boite haute : sous lui l'arete recule de h x tan20.
     On le recale de 45 % de ce recul pour que son flanc gauche (le ventre
     du S, a mi-hauteur) soit a la meme distance de l'arete que le texte. */
  margin-left:calc(var(--lw) * -.6216 * var(--tan) * .45)}
.hero__wordmark{font-family:var(--display);font-weight:400;font-size:clamp(.9rem,1.8vw,1.15rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--mid);margin:0 0 12px}
.hero__sig{font-family:var(--display);font-size:clamp(2rem,min(3.8vw,6.4vh),3.4rem);
  line-height:1.04;margin:0 0 18px}
.hero__sig .slash{color:var(--acc);font-style:normal}
/* Chaque segment est insecable : sur ecran etroit la signature se range
   en trois marches qui descendent le long de l'arete. */
.hero__sig .nw{white-space:nowrap}
.hero .lede{margin:0}
.hero__actions{margin:clamp(20px,3.4vh,30px) 0 0;line-height:0}
/* Chaque bouton a son porteur : en ligne sur PC (cote a cote), en bloc sur
   mobile (l'un sous l'autre). Un porteur bloc garde ses lignes le long de
   la forme — c'est ce qui fait que le second bouton suit la pente aussi. */
.hero__btn{display:inline}

/* Boutons tranches par l'oblique — TOUS les boutons du site, pas seulement
   ceux du hero : parallelogramme a 20deg. Hauteur fixe 52px -> decalage
   52 x tan20 = 19px. Dans le hero, le premier recule de ce decalage pour
   que son pied touche la meme distance a l'arete que le texte au-dessus. */
.cta,.cta-ghost{--cut:calc(52px * var(--tan));height:52px;line-height:1;vertical-align:top;
  padding:0 calc(26px + var(--cut));
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.hero__actions .cta,.hero__actions .cta-ghost{margin:0 6px 10px 0}
.hero__btn:first-child > a{margin-left:calc(-1 * var(--cut))}
/* Le contour d'un bouton fantome serait mange par la decoupe : on le
   redessine en deux couches decoupees (filet + fond), meme pente. */
.cta-ghost{position:relative;border:0;isolation:isolate;background:none}
.cta-ghost::before,.cta-ghost::after{content:"";position:absolute;z-index:-1;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.cta-ghost::before{inset:0;background:var(--line2);transition:background .18s linear}
.cta-ghost::after{inset:1px;background:var(--bg)}
.hero .cta-ghost::after{background:rgba(11,11,11,.9)}
.cta-ghost:hover::before,.cta-ghost:focus-visible::before{background:var(--acc)}

/* Mobile : meme systeme, pas une version degradee. La pente reste a 20deg,
   le hero prend l'ecran moins la barre du bas, et le texte se pose en bas
   (le script l'y ancre) : l'image respire au-dessus, le texte descend le
   long de l'arete jusqu'aux boutons. */
@media(max-width:820px){
  .hero{--hero-h:max(600px,calc(100svh - 50px - env(safe-area-inset-bottom,0px)));
    --slash-x:6px;--gap:16px;--col:100vw}
  .hero__flow{padding-right:16px}
  .hero__logotype{--lw:clamp(72px,20vw,96px)}
  .hero__btn{display:block}
  .hero__btn > a{margin-left:calc(-1 * var(--cut))}
  .hero__wordmark{font-size:.8rem;letter-spacing:.28em;margin-bottom:8px}
  .hero__sig{font-size:clamp(1.75rem,8.4vw,2.3rem);margin-bottom:12px}
  .hero .lede{font-size:.95rem;line-height:1.5}
  .cta,.cta-ghost{--cut:calc(48px * var(--tan));height:48px;padding:0 calc(18px + var(--cut))}
  .cta{font-size:.9rem}
  .cta-ghost{font-size:.68rem;letter-spacing:.14em}
  /* Meme voile, arrets decales : le texte occupe presque toute la largeur. */
  .hero__scrim{--v1:40%;--v2:52%;--v3:60%;--v4:67%;--v5:74%;--v6:81%;--v7:89%;--v8:96%}
}

/* --- 9. Domaines (rangee statique, sans defilement) ----------- */
.disciplines{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--s1);padding:16px 0}
.disciplines ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:0 8px}
.disciplines li{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);padding:4px 14px;white-space:nowrap}
.disciplines li+li{border-left:1px solid var(--line2)}

/* Sur mobile la rangee unique se casse en lignes bancales et les filets de
   gauche tombent en debut de ligne. On repasse donc sur la meme trame en
   cellules que les chiffres et les competences : 2 colonnes, filets propres. */
@media(max-width:899px){
  .disciplines{padding:0}
  .disciplines ul{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
  .disciplines li{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:14px 12px;min-height:52px;font-size:.62rem;letter-spacing:.14em;
    white-space:normal;line-height:1.35;
    border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  .disciplines li+li{border-left:0}
  .disciplines li:nth-child(2n){border-right:0}
  .disciplines li:nth-last-child(-n+2){border-bottom:0}
}

/* --- 10. Chiffres --------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:30px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media(max-width:759px){.stat:nth-child(2n){border-right:0}}
.stat__n{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;
  margin:0 0 8px}
.stat__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* --- 11. Section --------------------------------------------- */
.section{padding:clamp(64px,9vw,124px) 0;border-top:1px solid var(--line)}
.section__head{margin:0 0 clamp(32px,5vw,60px)}
.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,64px)}
@media(min-width:900px){.split{grid-template-columns:.9fr 1.1fr}}

/* --- 12. Savoir-faire ----------------------------------------- */
.skills{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:700px){.skills{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.skills{grid-template-columns:repeat(3,1fr)}}
.skill{padding:28px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .2s linear}
.skill:hover{background:var(--s1)}
.skill__i{width:26px;height:26px;stroke:var(--acc);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin:0 0 16px}
.skill p{color:var(--dim);font-size:.94rem;margin:0}
.skill__t{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--line2);
  display:block;margin-bottom:14px}

/* --- 13. Réalisations ----------------------------------------- */
.works{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:700px){.works{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.works{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;transition:background .2s linear}
.work:hover{background:var(--s1)}
.work__img{aspect-ratio:16/10;overflow:hidden;background:var(--s2);
  /* Coins coupes par la meme pente que le hero : 60px x tan. */
  --c:calc(60px * var(--tan));
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - 60px),calc(100% - var(--c)) 100%,0 100%,0 60px)}
.work__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:filter .35s linear}
.work:hover .work__img img{filter:grayscale(0)}
.work__body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.work__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--acc);
  display:block;margin-bottom:12px}
.work p{color:var(--dim);font-size:.9rem;margin:0}
.work__go{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  transition:color .2s linear,gap .2s linear}
.work:hover .work__go{color:var(--acc);gap:14px}
.work__go svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* --- 14. Démarche (3 étapes) ---------------------------------- */
.steps{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:32px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step__n{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--acc);
  display:block;margin-bottom:14px}
.step p{color:var(--dim);font-size:.94rem;margin:0}

/* --- 16. FAQ -------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;
  justify-content:space-between;align-items:center;gap:20px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--acc);font-size:1.3rem;
  line-height:1;transition:transform .22s linear}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__body{padding:0 0 24px;color:var(--dim);max-width:var(--read)}

/* --- 17. Contact ---------------------------------------------- */
.contact__form{display:grid;gap:18px;max-width:560px}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:var(--s1);border:1px solid var(--line);color:var(--fg);
  font-family:var(--sans);font-size:1rem;padding:14px 16px;border-radius:0;
  transition:border-color .18s linear}
.field input:focus,.field textarea:focus{border-color:var(--acc);outline:none}
.field textarea{min-height:130px;resize:vertical}

/* --- 18. Pied ------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:44px 0 34px}
.foot__in{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
.foot__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--dim)}
.foot__links{display:flex;flex-wrap:wrap;gap:22px}
.foot__links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .18s linear}
.foot__links a:hover{color:var(--acc)}

/* --- 19. Modale ----------------------------------------------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(11,11,11,.96);
  display:none;padding:5vh 4vw;overflow:auto}
.modal[open],.modal.is-open{display:block}
.modal__close{position:fixed;top:18px;right:24px;font-size:2rem;line-height:1;
  background:none;border:0;color:var(--fg);cursor:pointer;z-index:210}
.modal__close:hover{color:var(--acc)}
#modal-body{max-width:1000px;margin:0 auto}
#modal-body iframe{width:100%;height:min(72vh,620px);border:1px solid var(--line)}
#modal-body img{width:100%;height:auto;border:1px solid var(--line)}

/* --- 20. Apparition ------------------------------------------- */
.rise{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1)}
.rise.is-in{opacity:1;transform:none;filter:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;filter:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* --- 21. Pages intérieures ------------------------------------ */
/* Ajoutees avec /v2/projets et /v2/projet/<slug> : la V2 ne s'arrete plus
   a l'accueil. Memes jetons, memes filets, aucune couleur en plus. */

/* Lien d'evitement : premier element focalisable de chaque page. */
.skip{position:absolute;left:-9999px;top:0;z-index:1100;
  background:var(--acc);color:#0b0b0b;padding:12px 18px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* Le signe remplace le favicon dans la barre des pages interieures. */
.header.menu .logo .mark{width:30px}

/* Les cartes de projet sont de vrais liens, plus des boutons :
   elles s'ouvrent sans JS, se partagent, et se suivent a l'indexation. */
a.work{text-decoration:none;color:inherit}
.work h2{font-family:var(--sans);font-weight:700;font-size:1.15rem;
  margin:0 0 .5em;letter-spacing:-.01em}

/* La barre etant fixe, la premiere section reserve sa hauteur.
   Sous 820px la barre passe en bas : plus rien a reserver en haut. */
.section--first{border-top:0;padding-top:clamp(112px,15vh,170px)}
@media(max-width:820px){.section--first{padding-top:clamp(40px,8vw,64px)}}
.section--first h1.display{font-size:clamp(2.4rem,6.4vw,4.6rem);margin:0 0 .3em}

/* Fil d'Ariane */
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);display:flex;flex-wrap:wrap;
  align-items:center;gap:10px;margin:0 0 clamp(28px,5vw,48px)}
.crumb a{text-decoration:none;color:var(--dim);transition:color .18s linear}
.crumb a:hover{color:var(--acc)}
.crumb span[aria-hidden]{color:var(--line2)}
.crumb [aria-current]{color:var(--fg)}

/* Media d'une realisation : 16/9 tenu par le cadre, jamais par la marge. */
.pmedia{margin:0 0 clamp(36px,6vw,64px)}
.pmedia__frame{position:relative;aspect-ratio:16/9;background:var(--s1);
  border:1px solid var(--line)}
.pmedia__frame iframe,.pmedia__frame video{position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block;background:#000}
.pmedia__photo{display:block;border:1px solid var(--line);background:var(--s1)}
.pmedia__photo img{width:100%;height:auto}

/* Recit a gauche, fiche technique a droite. */
.psplit{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,56px);
  padding:0 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
@media(min-width:900px){.psplit{grid-template-columns:1.35fr .65fr}}
.pmeta{border-top:1px solid var(--line)}
.pmeta__i{display:flex;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.pmeta__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.pmeta__v{font-size:.92rem;color:var(--fg);text-align:right}

/* Precedent / suivant : la page ne se termine jamais en cul-de-sac. */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-bottom:1px solid var(--line)}
.pnav__a{display:flex;flex-direction:column;gap:8px;padding:26px 24px;
  text-decoration:none;color:inherit;border-right:1px solid var(--line);
  transition:background .2s linear}
.pnav__a:last-child{border-right:0}
.pnav__a--r{text-align:right;align-items:flex-end}
.pnav__a:hover{background:var(--s1)}
.pnav__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc)}
.pnav__t{font-weight:600;font-size:1rem;color:var(--fg)}
@media(max-width:640px){
  .pnav{grid-template-columns:1fr}
  .pnav__a{border-right:0;border-bottom:1px solid var(--line)}
  .pnav__a--r{text-align:left;align-items:flex-start}
}

/* Relance de fin de page */
.endnote{padding:clamp(44px,7vw,88px) 0 0}

/* Accuse de reception du formulaire. Un filet a gauche, pas d'aplat colore :
   l'accent signale, il ne remplit pas. */
.note{font-size:.95rem;max-width:560px;margin:0 0 22px;padding:14px 18px;
  background:var(--s1);border:1px solid var(--line);border-left:2px solid var(--acc)}
.note--ko{border-left-color:var(--mid);color:var(--mid)}

/* --- 22. Mobile ----------------------------------------------- */
/* Repris ecran par ecran a 390px : gouttiere 18px, rythme vertical
   resserre, titres a l'echelle du pouce, cellules sans double marge. */
@media(max-width:820px){
  :root{--gut:18px;--ang:10deg;--tan:.1763;--sec:1.0154}
  body{font-size:16px}
  .section{padding:56px 0}
  .section__head{margin-bottom:28px}
  .secno{font-size:4.4rem}
  h2.display{font-size:clamp(2.1rem,9.4vw,2.7rem)}
  .manifesto{font-size:clamp(1.8rem,8.4vw,2.3rem)}
  .lede{font-size:1.02rem}

  .stat{padding:22px 16px}
  .stat__n{font-size:2.6rem}
  .stat__l{display:block;font-size:.6rem;letter-spacing:.12em;line-height:1.5}

  .skill,.step{padding:24px 0;border-right:0}
  .work{border-right:0}
  .work__body{padding:18px 0 24px}

  .faq summary{padding:18px 0;font-size:.98rem}
  .contact__form .cta{width:100%;justify-content:center}

  .foot__in{flex-direction:column;align-items:flex-start;gap:18px}
  .foot__links{gap:14px 20px}
}

/* --- 23. Signature technique ---------------------------------- */
/* Moderne, futuriste, sobre : rien que la charte n'autorise deja. Mono,
   gris, filets de 1px ; l'accent ne marque que le signal (angle, seconde). */

/* HUD du hero */
.hud{position:absolute;inset:0;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
/* Toujours dans le sombre : au pied de l'arete sur PC (sous le voile),
   dans le coin noir en haut a gauche sur mobile. Jamais sur l'image claire. */
.hud__tr{position:absolute;bottom:20px;left:calc(var(--slash-x) + 64px);
  display:flex;align-items:center;gap:22px}
.hud__time{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.hud__tr span:last-child::before{content:"";display:inline-block;width:5px;height:5px;
  background:var(--acc);margin-right:9px;vertical-align:1px;animation:hud-blink 2s steps(1) infinite}
.hud__angle{position:absolute;bottom:20px;left:calc(var(--slash-x) + 20px);color:var(--acc)}
.hud__scroll{position:absolute;right:clamp(16px,3vw,30px);bottom:22px;
  display:flex;align-items:center;gap:12px}
.hud__scroll i{position:relative;display:block;width:1px;height:46px;background:var(--line2);overflow:hidden}
.hud__scroll i::after{content:"";position:absolute;left:0;top:-16px;width:1px;height:16px;
  background:var(--acc);animation:hud-scroll 1.9s cubic-bezier(.6,0,.4,1) infinite}
@keyframes hud-blink{50%{opacity:0}}
@keyframes hud-scroll{to{transform:translateY(62px)}}
@media(max-width:820px){
  .hud__tr{top:18px;left:18px;bottom:auto;flex-direction:column;align-items:flex-start;gap:6px;font-size:.56rem}
  .hud__angle,.hud__scroll{display:none}
}

/* Entree : l'arete se trace de bas en haut, puis chaque bloc glisse LE LONG
   du « / » (24px vers le haut, 8,7px vers la droite = tan20). */
.hero__edge{animation:edge-draw .9s cubic-bezier(.7,0,.2,1) both}
@keyframes edge-draw{from{transform:rotate(var(--ang)) scaleY(0)}to{transform:rotate(var(--ang)) scaleY(1)}}
.hero__copy > *{animation:along-slash .8s cubic-bezier(.2,.7,.2,1) both}
.hero__copy > :nth-child(1){animation-delay:.45s}
.hero__copy > :nth-child(2){animation-delay:.53s}
.hero__copy > :nth-child(3){animation-delay:.61s}
.hero__copy > :nth-child(4){animation-delay:.69s}
.hero__copy > :nth-child(5){animation-delay:.77s}
.hud{animation:hud-in 1s ease-out .9s both}
@keyframes along-slash{from{opacity:0;transform:translate(calc(-24px * var(--tan)),24px)}to{opacity:1;transform:none}}
@keyframes hud-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero__edge,.hero__copy > *,.hud,.hud__scroll i::after,.hud__tr span:last-child::before{animation:none}
}

/* --- 24. Grille-wireframe ------------------------------------- */
/* La trame n'est pas un decor : c'est LA grille de la page. 12 colonnes
   sur la largeur utile (4 sur mobile), et tout s'y cale — cartes en 3,
   chiffres en 4, domaines en 6, textes en 5 + 6. Les croix marquent les
   intersections, comme sur un wireframe annote. */
:root{--cols:12}
.gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(var(--cols),1fr)}
.gridlines span{border-left:1px solid var(--s1)}
.gridlines span:first-child{border-left-color:var(--s3)}
.gridlines span:last-child{border-right:1px solid var(--s3)}
.gridlines span:nth-child(3n+1):not(:first-child),
.gridlines span:nth-child(4n+1):not(:first-child){border-left-color:var(--s2)}

/* Regle 01 -> 12 */
.ruler{border-top:1px solid var(--line)}
.ruler ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),1fr)}
.ruler li{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--line2);
  padding:7px 0 7px 6px;border-left:1px solid var(--s2)}
.ruler li:last-child{border-right:1px solid var(--s2)}

/* Domaines : 6 cellules de 2 colonnes, sans aplat (la grille se voit). */
.disciplines{background:none;padding:0}
.disciplines ul{display:grid;grid-template-columns:repeat(6,1fr);gap:0;justify-content:stretch}
.disciplines li{text-align:center;padding:16px 8px;white-space:normal;line-height:1.35;
  border-left:1px solid var(--line)}
.disciplines li+li{border-left:1px solid var(--line)}
.disciplines li:last-child{border-right:1px solid var(--line)}

/* Textes cales : 5 colonnes + 1 de goutiere + 6. */
@media(min-width:900px){
  .split{grid-template-columns:repeat(12,1fr);gap:0}
  .split > :first-child{grid-column:1 / 6;padding-right:24px}
  .split > :last-child{grid-column:7 / 13}
  .psplit{grid-template-columns:repeat(12,1fr);gap:0}
  .psplit > :first-child{grid-column:1 / 8;padding-right:24px}
  .psplit > :last-child{grid-column:9 / 13}
}
.contact__form{max-width:none;grid-template-columns:repeat(12,1fr);column-gap:0}
.contact__form > *{grid-column:1 / 7}
.faq{max-width:calc(100% * 8 / 12)}

/* Croix aux intersections : bords de section x bords de la grille. */
.section{position:relative;counter-increment:sec}
body{counter-reset:sec}
.section::before,.section::after{content:"+";position:absolute;top:0;
  font-family:var(--mono);font-size:15px;line-height:1;color:var(--line2);
  transform:translate(-50%,-52%);pointer-events:none}
.section::before{left:calc(max(0px,(100% - var(--max)) / 2) + var(--gut))}
.section::after{left:calc(100% - max(0px,(100% - var(--max)) / 2) - var(--gut))}
/* Coordonnee de section, en haut a droite : « § 02 — #skills ». */
.section > .wrap{position:relative}
.section > .wrap::before{content:"§ " counter(sec,decimal-leading-zero) " — #" attr(data-id);
  position:absolute;right:var(--gut);top:calc(-1 * clamp(64px,9vw,124px) + 12px);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--line2)}
.section--first > .wrap::before{display:none}

/* Croix aux coins des cellules (competences, realisations, etapes, chiffres). */
.skill,.work,.step,.stat{position:relative}
.skill::after,.work::after,.step::after,.stat::after{content:"+";position:absolute;right:0;bottom:0;
  transform:translate(50%,52%);font-family:var(--mono);font-size:13px;line-height:1;
  color:var(--line2);pointer-events:none;z-index:1}
.stats{border-left:1px solid var(--line)}

@media(max-width:820px){
  :root{--cols:4}
  .gridlines span:nth-child(n+5){display:none}
  .gridlines span:nth-child(4){border-right:1px solid var(--s3)}
  .ruler li:nth-child(n+5){display:none}
  .ruler li:nth-child(4){border-right:1px solid var(--s2)}
  .disciplines ul{grid-template-columns:repeat(2,1fr)}
  .disciplines li{border-bottom:1px solid var(--line);font-size:.6rem;letter-spacing:.12em;padding:14px 6px}
  .disciplines li:nth-child(2n){border-right:1px solid var(--line)}
  .disciplines li:nth-last-child(-n+2){border-bottom:0}
  .contact__form > *{grid-column:1 / -1}
  .faq{max-width:none}
  .section > .wrap::before{top:-44px}
}

/* --- 25. Registre « haut de gamme » ---------------------------- */
/* Reference : addveo.com. Ce qui fait le haut de gamme, transpose dans
   la charte : alternance sombre / clair, rails aux bords du contenu,
   grotesque serree avec UNE fin de phrase en serif italique, beaucoup
   d'air, apparitions mot par mot. Le jaune reste l'unique accent. */

/* Typo : Manrope serree ; la fin du titre en Instrument Serif italique. */
.display{font-family:var(--sans);font-weight:500;letter-spacing:-.045em;line-height:1.02}
h2.display{font-size:clamp(2.2rem,4.8vw,3.9rem);margin:0 0 .35em;max-width:18ch}
.section--first h1.display{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.display em,.manifesto em{font-family:var(--display);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--acc)}
.manifesto{font-family:var(--sans);font-weight:500;letter-spacing:-.04em;line-height:1.08;
  font-size:clamp(1.9rem,3.8vw,3.1rem)}
.lede{letter-spacing:-.01em}
body{letter-spacing:-.005em}

/* Etiquette de section : phrase courte, un trait jaune pose sur le rail. */
.label{font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:-.01em;
  text-transform:none;color:var(--mid);position:relative;margin-bottom:1.1em}
.label b{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--dim);font-weight:500}
.label::before{content:"";position:absolute;left:calc(-1 * var(--gut) - 1px);top:-3px;bottom:-3px;
  width:2px;background:var(--acc)}
.secno{display:none}

/* Rails : les sections portent leur air DANS le .wrap, qui porte les
   rails (bords de la zone utile). Ils courent ainsi d'un bord a l'autre
   de chaque section, sombre ou claire. */
.section{padding:0}
.section > .wrap{padding-top:clamp(84px,11vw,156px);padding-bottom:clamp(84px,11vw,156px);
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.section--first > .wrap{padding-top:clamp(112px,15vh,170px)}
.section > .wrap::before{top:14px}

/* Sections claires. La charte a deja son clair (#f2f2f2) ; les filets
   y sont le noir de la marque en transparence. Le jaune ne sert jamais
   de couleur de texte sur clair (contraste 1,8:1) : il souligne. */
.section--light{background:#f2f2f2;color:#0b0b0b;
  --bg:#f2f2f2;--fg:#0b0b0b;--mid:#2e2e2e;--dim:#3d3d3d;
  --line:rgba(11,11,11,.1);--line2:rgba(11,11,11,.2);
  --s1:rgba(11,11,11,.035);--s2:rgba(11,11,11,.06)}
.section--light .display em,.section--light .manifesto em{color:inherit;
  text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:.07em;text-underline-offset:.14em}
.section--light .display em .rv-w,.section--light .manifesto em .rv-w{text-decoration:inherit;
  text-decoration-line:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:.07em;text-underline-offset:.14em}
.section--light .step__n{color:#0b0b0b}
.section--light .skill__t{color:rgba(11,11,11,.35)}
.section--light .label b{color:#8a8a8a}
.section--light strong{color:#0b0b0b}

/* Bande de confiance */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding-top:26px;padding-bottom:28px;text-align:center}
.trust__cap{font-size:.86rem;color:var(--dim);margin:0 0 16px}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px clamp(22px,4vw,48px)}
.trust li{font-weight:600;font-size:clamp(.95rem,1.4vw,1.1rem);letter-spacing:-.03em;color:var(--mid)}
.trust li sup{font-size:.6em}

/* Mots des titres : du flou au net, en montant, en cascade. */
.rv-words .rv-w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.32em);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),filter .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--rv-base,0s) + var(--i) * 45ms)}
.rv-words.is-shown .rv-w{opacity:1;filter:none;transform:none}
.hero__sig{--rv-base:.5s}
.hero__sig.rv-words{animation:none}          /* ses mots s'animent deja un par un */

/* Intro : le signe, puis le rideau se leve (une fois par visite). */
.intro{display:none}
.intro-play .intro{display:flex;position:fixed;inset:0;z-index:2000;background:#0b0b0b;
  align-items:center;justify-content:center;pointer-events:none;
  animation:intro-out .55s cubic-bezier(.7,0,.2,1) 1s forwards}
.intro .mark{width:84px;opacity:0;filter:blur(8px);animation:intro-mark .7s cubic-bezier(.2,.7,.2,1) .1s forwards}
@keyframes intro-mark{to{opacity:1;filter:none}}
@keyframes intro-out{to{opacity:0;visibility:hidden}}
/* Pendant l'intro, le hero attend son tour. */
.intro-play .hero__edge{animation-delay:1.1s}
.intro-play .hero__copy > :nth-child(1){animation-delay:1.5s}
.intro-play .hero__copy > :nth-child(2){animation-delay:1.58s}
.intro-play .hero__copy > :nth-child(3){animation-delay:1.66s}
.intro-play .hero__copy > :nth-child(4){animation-delay:1.74s}
.intro-play .hero__copy > :nth-child(5){animation-delay:1.82s}
.intro-play .hero__sig{--rv-base:1.6s}
.intro-play .hud{animation-delay:2s}

@media(prefers-reduced-motion:reduce){
  .rv-words .rv-w{opacity:1;filter:none;transform:none;transition:none}
  .intro{display:none!important}
}
@media(max-width:820px){
  .section > .wrap{padding-top:64px;padding-bottom:64px}
  .section--first > .wrap{padding-top:40px}
  .label::before{left:calc(-1 * var(--gut) - 1px)}
  h2.display{font-size:clamp(2rem,9vw,2.6rem)}
  .manifesto{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .section > .wrap::before{top:12px}
}

/* Libelles en phrase, pas en capitales espacees : le mono ne reste que
   pour les index et le HUD (la couche « instrument »). */
.cta-ghost{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em;text-transform:none}
.cta{letter-spacing:-.01em}
.stat__l{font-family:var(--sans);font-size:.88rem;letter-spacing:-.01em;text-transform:none;color:var(--mid)}
.work__go{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--mid)}
.header.menu .nav-fr a,.header.menu .nav-en a{font-family:var(--sans);font-size:.9rem;
  letter-spacing:-.01em;text-transform:none;font-weight:500}
.header.menu .nav-fr a.active,.header.menu .nav-en a.active{color:var(--fg)}
.crumb{font-family:var(--sans);font-size:.85rem;letter-spacing:-.01em;text-transform:none}
.pmeta__k{font-family:var(--sans);font-size:.85rem;letter-spacing:-.01em;text-transform:none}
.pnav__k{font-family:var(--sans);font-size:.85rem;letter-spacing:-.01em;text-transform:none}
.field label{font-family:var(--sans);font-size:.85rem;letter-spacing:-.01em;text-transform:none;color:var(--mid)}
.foot__links a{font-family:var(--sans);font-size:.88rem;letter-spacing:-.01em;text-transform:none}
@media(max-width:820px){
  .header.menu .nav-fr a,.header.menu .nav-en a{font-size:.78rem;letter-spacing:-.01em}
  .cta-ghost{font-size:.88rem;letter-spacing:-.01em}
  .stat__l{font-size:.8rem}
}

/* --- 26. Barre de navigation : contraste sur sombre ET sur clair ---- */
/* Detachee, la barre etait un gris a 72 % : sur les sections claires elle
   virait au gris moyen et les liens (#8a8a8a) ne se lisaient plus. Elle
   est desormais plus opaque, et un script lui pose .nav--light quand elle
   survole une section claire : fond clair, texte noir. */
.header.menu.scrolled{background:rgba(11,11,11,.9)}
.header.menu .nav-fr a,.header.menu .nav-en a{color:#b8b8b8}
.header.menu .nav-fr a:hover,.header.menu .nav-en a:hover,
.header.menu .nav-fr a.active,.header.menu .nav-en a.active{color:#f2f2f2}
.header.menu{transition:top .5s cubic-bezier(.4,0,.2,1),bottom .5s cubic-bezier(.4,0,.2,1),
  width .5s cubic-bezier(.4,0,.2,1),background-color .35s,border-color .35s,border-radius .5s,
  backdrop-filter .5s,padding .5s}
.header.menu a{transition:color .35s}
.header.menu .logo img.favicon{transition:filter .35s}

.header.menu.nav--light{background:rgba(242,242,242,.92);border-color:rgba(11,11,11,.14)}
.header.menu.nav--light .nav-fr a,.header.menu.nav--light .nav-en a{color:#2e2e2e}
.header.menu.nav--light .nav-fr a:hover,.header.menu.nav--light .nav-en a:hover,
.header.menu.nav--light .nav-fr a.active,.header.menu.nav--light .nav-en a.active{color:#0b0b0b}
.header.menu.nav--light .logo img.favicon{filter:none}
.header.menu.nav--light .logo .mark{background:#0b0b0b}
.header.menu.nav--light #lang-toggle-v2{color:#2e2e2e;border-color:rgba(11,11,11,.25)}

/* Liens dans le texte courant : couleur du texte, souligne d'accent.
   Lisible sur sombre comme sur clair (le jaune seul ne l'est pas sur clair). */
.faq__body a,.contact__rdv a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .18s linear}
.faq__body a:hover,.contact__rdv a:hover{color:var(--acc)}
.section--light .faq__body a:hover{color:#0b0b0b;text-decoration-thickness:2.5px}
.contact__rdv{color:var(--mid);font-size:.98rem;margin:.9em 0 0}
.contact__rdv a{font-weight:600;margin-left:.25em;white-space:nowrap}
.contact__rdv a::after{content:" →"}

/* Bande de confiance, v2 : logo au-dessus, secteur en dessous. Les logos
   passent en masque CSS : une seule teinte (celle du texte courant), quelle
   que soit leur couleur d'origine — la bande reste dans la charte. */
.trust ul{align-items:flex-end;gap:22px clamp(28px,4.4vw,56px)}
.trust li{display:flex;flex-direction:column;align-items:center;gap:9px}
.trust__logo{display:block;height:30px;width:calc(30px * var(--ratio));background:var(--mid);
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  transition:background .25s}
.trust__word{display:flex;align-items:flex-end;height:30px;font-weight:700;font-size:1.02rem;
  letter-spacing:-.035em;color:var(--mid);line-height:1;white-space:nowrap;transition:color .25s}
.trust__word sup{font-size:.6em}
.trust__sector{font-size:.72rem;color:var(--dim);letter-spacing:0;font-weight:500}
.trust li:hover .trust__logo{background:var(--fg)}
.trust li:hover .trust__word{color:var(--fg)}
@media(max-width:820px){
  .trust ul{gap:20px 26px}
  .trust__logo{height:24px;width:calc(24px * var(--ratio))}
  .trust__word{height:24px;font-size:.9rem}
}

.trust ul{gap:22px clamp(22px,2.8vw,40px)}
.trust__word{display:block;height:30px;line-height:30px}
.trust__logo{height:var(--h,30px);width:calc(var(--h,30px) * var(--ratio))}
@media(max-width:820px){
  .trust__word{height:24px;line-height:24px}
  .trust__logo{height:calc(var(--h,30px) * .8);width:calc(var(--h,30px) * .8 * var(--ratio))}
}

/* Symbole + nom sur une ligne (CCI), ou avatar + nom (chaine YouTube). */
.trust__lockup{display:flex;align-items:center;gap:9px;height:30px}
.trust__lockup .trust__logo{--h:26px}
.trust__lockup .trust__word{height:auto;line-height:1}
.trust__avatar{width:30px;height:30px;border-radius:50%;display:block;opacity:.8;transition:opacity .25s}
.trust li:hover .trust__avatar{opacity:1}
@media(max-width:820px){.trust__lockup{height:24px}.trust__avatar{width:24px;height:24px}
  .trust__lockup .trust__logo{--h:24px}}

/* --- 27. Mobile sans oblique ---------------------------------- */
/* Sur telephone la barre a 20° n'a pas de sens (Simon, 24/09/2026) : elle
   mangeait la largeur et ne structurait rien. On la retire entierement :
   plus d'arete, plus de decoupe de l'image, plus de forme d'habillage. Le
   texte s'aligne sur la goutiere ; le voile monte du bas (0deg) au lieu de
   suivre une pente qui n'existe plus. Les boutons gardent leur coupe : c'est
   le motif de tout le site, pas celui de la barre. */
@media(max-width:820px){
  .hero__edge,.hero__shape{display:none}
  .hero__bg{clip-path:none}
  .hero__flow{padding-left:var(--gut);padding-right:var(--gut)}
  .hero__logotype{margin-left:0}
  .hero__btn > a,.hero__btn:first-child > a{margin-left:0}
  .hero__copy > *{animation-name:rise-up}
  .hero__scrim{--scrim-ang:0deg;
    --v1:44%;--v2:54%;--v3:61%;--v4:67%;--v5:73%;--v6:80%;--v7:88%;--v8:96%}
}
@keyframes rise-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Mobile : pas de grand signe dans le hero (Simon, 24/09/2026) — il est
   deja dans la barre du bas, le hero commence directement par le nom. */
@media(max-width:820px){ .hero__logotype{display:none} }

/* Etiquettes du hero : l'information secondaire sort du paragraphe. */
.hero__tags{margin:14px 0 0;display:block}
.hero__tags span{display:inline-block;margin:0 8px 8px 0;padding:5px 11px;
  font-size:.8rem;font-weight:500;color:var(--mid);border:1px solid var(--line2);letter-spacing:-.01em}
.hero__tags sup{font-size:.65em}
/* Etude de cas : liste des volets */
.plist{list-style:none;margin:1.2em 0 0;padding:0;border-top:1px solid var(--line)}
.plist li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--mid)}
.plist b{color:var(--fg);font-weight:600}
.read a:not(.cta):not(.cta-ghost){color:var(--fg);text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:1.5px;text-underline-offset:3px}

/* --- 28. Images editoriales : elles cassent les blocs de texte --- */
/* Portrait, bandeau, regie : en COULEUR (c'est le travail d'image qu'on
   montre), coins coupes par la meme pente que le reste du site. */
.portrait,.media,.band{margin:0}
.portrait img,.media img{width:100%;height:auto;display:block;
  --c:calc(90px * var(--tan));
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - 90px),calc(100% - var(--c)) 100%,0 100%,0 90px)}
.portrait figcaption{font-size:.82rem;color:var(--dim);margin-top:12px}
@media(min-width:900px){
  .split--profil > .portrait{grid-column:1 / 6;padding-right:0}
  .split--profil > .read{grid-column:7 / 13;align-self:center}
}
.split--profil .manifesto{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.7em}
.profil__lead{font-size:1.05rem;color:var(--mid)}
.facts{list-style:none;margin:1.4em 0 1.8em;padding:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts b{font-weight:600;color:var(--fg)}
.facts span{color:var(--mid)}

.band{position:relative;border-top:1px solid var(--line)}
.band img{width:100%;height:auto;display:block;max-height:70vh;object-fit:cover}
.band figcaption{font-size:.82rem;color:var(--dim);padding-top:12px;padding-bottom:12px}

@media(min-width:900px){
  .section__head--media{display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
  .section__head--media > div{grid-column:1 / 7}
  .section__head--media > .media{grid-column:8 / 13}
}
.section__head--media > .media{margin-top:24px}

/* CV : un lien discret sous les boutons, toujours accessible. */
.hero__cv{margin:6px 0 0;font-size:.9rem}
.hero__cv a{color:var(--mid);text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .18s linear}
.hero__cv a:hover{color:var(--fg)}
.hero__cv span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--dim);margin-left:4px}
@media(max-width:820px){
  .facts li{grid-template-columns:86px 1fr;gap:12px}
  .portrait{max-width:420px}
}
/* Le portrait actuel (carte, fev. 2026) est detoure : fond noir comme sur la
   carte, sinon il flotte sur le clair et la coupe des coins disparait. */
.portrait img{background:#0b0b0b}

/* Photos tranchees par le « / » jaune, a 20° FIXES (y compris sur mobile,
   demande de Simon) : les deux coins coupes portent un filet d'accent,
   comme l'arete du hero. Barre verticale pivotee de 20° autour de son pied,
   allongee de 1/cos20 pour couvrir exactement la hauteur de la coupe. */
.cut{position:relative;display:block;--k:90px;--t:.364;--s:1.0642;--c:calc(var(--k) * var(--t))}
.cut img,.portrait .cut img,.media .cut img{
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--c)) 100%,0 100%,0 var(--k))}
.cut::before,.cut::after{content:"";position:absolute;width:2px;height:calc(var(--k) * var(--s));
  background:var(--acc);transform-origin:bottom left;transform:rotate(20deg);pointer-events:none;z-index:1}
.cut::before{left:0;top:calc(var(--k) - var(--k) * var(--s))}
.cut::after{left:calc(100% - var(--c));top:calc(100% - var(--k) * var(--s))}
@media(max-width:820px){.cut{--k:64px}}
/* Coupes plus franches (Simon, 26/09) : 40 % de la hauteur de la photo,
   toujours a 20°. Tout en proportions pour tenir a toutes les tailles :
   --f = part de la hauteur coupee, --ar = hauteur/largeur de la photo,
   decalage horizontal = f x ar x tan20 (36,4 %). */
.cut{--f:.4;--ar:1.25}
.media .cut{--f:.45;--ar:.625}
.cut img,.portrait .cut img,.media .cut img{
  clip-path:polygon(calc(var(--f) * var(--ar) * 36.4%) 0,100% 0,
    100% calc(100% - var(--f) * 100%),calc(100% - var(--f) * var(--ar) * 36.4%) 100%,
    0 100%,0 calc(var(--f) * 100%))}
.cut::before,.cut::after{height:calc(var(--f) * 106.42%)}
.cut::before{top:calc(var(--f) * 100% - var(--f) * 106.42%)}
.cut::after{left:calc(100% - var(--f) * var(--ar) * 36.4%);top:calc(100% - var(--f) * 106.42%)}

/* Filets jaunes : retires des photos (les coupes restent), reportes sur le
   hero mobile (Simon, 26/09). Le hero mobile prend la meme grammaire que les
   photos : deux coins tranches a 20°, chacun souligne d'un filet d'accent. */
.cut::before,.cut::after{display:none}
@media(max-width:820px){
  .hero{--hk:30%;--hc:calc(var(--hero-h) * .3 * .364)}
  .hero__bg{clip-path:polygon(var(--hc) 0,100% 0,100% calc(100% - var(--hk)),
    calc(100% - var(--hc)) 100%,0 100%,0 var(--hk))}
  .hero::before,.hero::after{content:"";position:absolute;z-index:2;width:2px;
    height:calc(var(--hk) * 1.0642);background:var(--acc);
    transform-origin:bottom left;transform:rotate(20deg);pointer-events:none}
  .hero::before{left:0;top:calc(var(--hk) - var(--hk) * 1.0642)}
  .hero::after{left:calc(100% - var(--hc));top:calc(100% - var(--hk) * 1.0642)}
}

/* Photos : coupes a 45° (Simon, 26/09 — « les 20° sont chelous sur les
   photos »). Chanfrein egal dans les deux sens ; le 20° reste la pente du
   hero et des boutons. */
.cut{--ch:110px}
.cut img,.portrait .cut img,.media .cut img{
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
@media(max-width:820px){.cut{--ch:72px}}

/* --- 29. Retours d'Ariane (graphiste), 28/09/2026 --------------- */
/* Hero en DEUX groupes, avec un vrai saut de taille entre eux :
   1. qui je suis — signe + nom groupes, puis mes titres (petit) ;
   2. ce que je vous apporte — la promesse (tres grand), puis l'action. */
.hero__who{margin:0 0 clamp(28px,4.4vh,46px)}
.hero__id{display:inline-flex;align-items:center;gap:18px;margin:0 0 14px;
  margin-left:calc(-60px * var(--tan) * .45)}
.hero__id .hero__logotype{--lw:clamp(70px,6.4vw,100px);margin:0}
.hero__id .hero__wordmark{margin:0;padding-left:18px;border-left:1px solid var(--line2);
  font-size:clamp(1rem,1.5vw,1.2rem)}
.hero__tags{margin:0}
.hero__tags .hero__cv{display:inline-block;margin:0 8px 8px 0;padding:5px 11px;font-size:.8rem;font-weight:600;
  color:#0b0b0b;background:var(--acc);text-decoration:none;letter-spacing:-.01em}
.hero__tags .hero__cv span{font-family:var(--mono);font-size:.62rem;margin-left:4px;color:#0b0b0b;opacity:.7}
.hero__offer .hero__sig{font-size:clamp(2.5rem,min(5vw,7.6vh),4.6rem);line-height:1.02;margin-bottom:.35em}
.hero__offer .lede{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:34em}
@media(max-width:820px){
  .hero__id{margin-left:0}
  .hero__id .hero__wordmark{padding-left:0;border-left:0}
  .hero__offer .hero__sig{font-size:clamp(2.1rem,10vw,2.8rem)}
}
/* Chiffres en jaune : ils ressortent (essai demande). */
.stat__n{color:var(--acc)}
/* Le « PDF » du badge CV n'est pas une etiquette : pas de cadre ni de marge. */
.hero__tags .hero__cv span{display:inline;border:0;padding:0;margin:0 0 0 5px;font-size:.62rem}
.hero__tags .hero__cv{vertical-align:top;line-height:1.35}
/* Bandeau a la largeur du contenu : la photo (1257 px) n'est jamais agrandie,
   et prend les memes coupes a 45° que les autres photos. */
.band{border-top:0;padding-top:clamp(40px,6vw,72px)}
.band .wrap{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.band img{max-height:none}
.band figcaption{padding-top:14px;padding-bottom:clamp(40px,6vw,72px)}
/* La promesse tient sur une ligne en grand ecran. */
@media(min-width:1100px){.hero{--col:min(760px,56vw)}}

/* Infos personnelles : une ligne de texte, pas des etiquettes (Simon, 28/09).
   Les separateurs reprennent le « / » de la marque. */
.hero__meta{margin:0;font-size:clamp(.9rem,1.1vw,1rem);color:var(--mid);line-height:1.7;letter-spacing:-.01em}
.hero__meta i{font-style:normal;color:var(--acc);margin:0 .6em}
.hero__meta sup{font-size:.65em}
.hero__meta a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--acc);
  text-decoration-thickness:1.5px;text-underline-offset:4px}
.hero__meta a:hover{color:var(--acc)}
/* Titre du profil a droite de la photo. */
.profil__title{font-size:clamp(2rem,3.6vw,3.2rem);margin:0 0 .45em}
.split--profil .manifesto{font-size:clamp(1.3rem,2vw,1.7rem)}
/* Titre du profil resserre sur son texte (Simon, 28/09) : il fait bloc. */
.profil__title{margin:0 0 .22em;line-height:.98}
.split--profil .manifesto{margin-bottom:.55em}
/* Profil (PC) : la colonne de texte a la hauteur exacte de la photo — titre
   cale en haut, bouton « Parlons de votre projet » aligne sur le bas de la
   photo (Simon, 28/09). La legende sort du calcul de hauteur (absolue). */
@media(min-width:900px){
  .split--profil{align-items:stretch}
  .split--profil > .portrait{position:relative;align-self:start}
  .split--profil > .portrait figcaption{position:absolute;top:100%;left:0;margin-top:12px}
  .split--profil > .read{align-self:stretch;display:flex;flex-direction:column}
  .split--profil > .read > :last-child{margin:auto 0 0;line-height:0}
  .split--profil .facts{margin-bottom:1.4em}
}
/* La photo epouse la hauteur du texte : haut du titre = haut de la photo,
   bas du bouton = bas de la photo, a toutes les tailles d'ecran. */
@media(min-width:900px){
  .split--profil > .portrait{align-self:stretch;min-height:460px}
  .split--profil > .portrait .cut{position:absolute;inset:0}
  .split--profil > .portrait .cut img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
}
/* Ecart ligne d'infos -> promesse resserre (Simon, 28/09) : les deux groupes
   se distinguent deja par le saut de taille. */
.hero__who{margin-bottom:clamp(10px,1.8vh,18px)}

/* --- 30. Galerie de projet ---------------------------------------- */
.pgal{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 clamp(40px,6vw,72px)}
@media(min-width:900px){
  .pgal{grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:18px}
  .pgal__i{grid-column:span 4}
  .pgal__i--lead{grid-column:1 / 5;grid-row:span 2}
  .pgal__i:not(.pgal__i--lead){grid-column:span 4}
}
.pgal__i{margin:0}
.pgal__i a{display:block;overflow:hidden;background:var(--s1)}
.pgal__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pgal__i a:hover img{transform:scale(1.03)}
.pgal__i--lead a{height:calc(100% - 30px)}
.pgal__i figcaption{font-size:.8rem;color:var(--dim);margin-top:8px;line-height:1.35}
@media(max-width:899px){.pgal{grid-template-columns:1fr 1fr}.pgal__i--lead{grid-column:1 / -1}}