/* ==========================================================================
   MARION HERVÉ — Portfolio
   Direction : atelier éditorial. Fond papier, encre marine, filets fins,
   index numéroté, capitales très espacées. Le marine ne sert que d'accroche
   en tête de page ; tout le reste respire sur du papier.
   ========================================================================== */

/* ---------- Polices auto-hébergées (aucun appel à Google) ---------------- */
@font-face{font-family:"Anton";src:url("../fonts/anton-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* Charte */
  --navy:#2a2d57; --blue:#386bb3; --coral:#ed6c4f;
  --sky:#98c0d9;  --sand:#d8bd9a; --ink:#1d1d1b; --white:#fff;
  --dore:#d4be9e;   /* bulle du menu — demandé le 14 sept. 2026 */

  /* Papier : le sable désaturé, pour ne pas jaunir les visuels */
  --paper:#f7f5f1;
  --paper-2:#efece5;
  --line:rgba(42,45,87,.16);
  --line-soft:rgba(42,45,87,.09);
  --mute:rgba(42,45,87,.58);

  --font-display:"Anton",Impact,sans-serif;
  --font-ui:"Poppins",system-ui,sans-serif;
  --font-text:"Montserrat",system-ui,sans-serif;

  --ease:cubic-bezier(.34,.9,.4,1);
  --dur:.55s;

  /* Gouttière unique : toute la page s'aligne dessus */
  /* Hauteur de la barre de menu. Le logo s'aligne dessus : un seul
     chiffre à changer pour redimensionner les deux ensemble. */
  --barre:44px;

  --gut:clamp(1.25rem,5vw,5.5rem);
  --max:78rem;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;          /* neutralisé si « réduire les animations » */
}
/* Le titre de section ne doit pas se glisser sous la pilule du menu. */
#travaux{scroll-margin-top:5rem}
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:var(--font-text); font-size:.95rem; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, l'attribut height du HTML
   impose une hauteur fixe et l'image se retrouve étirée dès qu'elle est
   contrainte en largeur. */
img,svg{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{list-style:none; padding:0}
::selection{background:var(--coral); color:var(--white)}

.wrap{width:min(100% - 2*var(--gut), var(--max)); margin-inline:auto}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- Micro-typographie ------------------------------------------- */
.label{
  font-family:var(--font-text); font-weight:500;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
}
.display{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem,8.6vw,8.5rem); line-height:.92; letter-spacing:.005em;
}
.h2{font-family:var(--font-ui); font-weight:600; font-size:clamp(1.35rem,2.6vw,2.1rem); line-height:1.2; letter-spacing:-.01em}
.h3{font-family:var(--font-ui); font-weight:600; font-size:1rem; line-height:1.4}
.lede{font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.7; color:var(--navy)}
.mute{color:var(--mute)}
/* Bleu ciel de la charte, demandé le 8 août 2026.
   À savoir : sur le fond papier, ce bleu ne donne qu'un contraste de 1,8:1
   là où la norme d'accessibilité en demande 4,5 pour du texte. Les numéros
   restent lisibles de près, beaucoup moins en extérieur ou pour un œil
   fatigué. Le bleu principal #386bb3 monterait à 4,9:1 — un seul mot à
   changer ici si tu veux basculer. */
.num{font-family:var(--font-ui); font-weight:600; font-size:.7rem; letter-spacing:.06em; color:var(--sky)}

/* ==========================================================================
   MENU — conservé de la version précédente, resserré
   ========================================================================== */
.pill{
  position:fixed; left:50%; top:1.1rem; transform:translateX(-50%);
  height:var(--barre);
  display:flex; align-items:center; gap:.5rem;
  background:var(--white); border-radius:100px; padding:.3rem;
  box-shadow:0 6px 24px rgba(42,45,87,.14), 0 0 0 1px rgba(42,45,87,.05);
  z-index:60;
}
.pill a{
  display:flex; align-items:center; gap:0;
  padding:.42rem 1rem; border-radius:100px;
  color:var(--navy); text-decoration:none; background:transparent;
  transition:background var(--dur) var(--ease), gap var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* overflow:visible est indispensable. Un <svg> rogne son contenu par defaut,
   et sur un ecran a densite fractionnaire (1,7x chez Marion) l'arrondi du
   viewport peut manger la derniere fraction de pixel. Les deux pictos dont le
   trace touche exactement le bord droit de leur zone de dessin - accueil et
   contact, tous deux larges de 15,3 unites - se retrouvaient coupes. */
.pill svg{width:16px; height:16px; flex:none; overflow:visible;
          transition:color var(--dur) var(--ease)}
.pill .lb{
  display:grid; grid-template-columns:0fr; opacity:0;
  transition:grid-template-columns var(--dur) var(--ease), opacity .35s var(--ease);
  font-family:var(--font-ui); font-weight:500; font-size:.75rem; white-space:nowrap;
}
.pill .lb>span{overflow:hidden; min-width:0}
/* Bulle dorée, texte et picto marine : le blanc sur ce doré tomberait à
   1,8:1 de contraste, le marine monte à 7,2:1. */
/* Deux états distincts : le survol est un doré atténué, la page courante
   le doré plein. Un survol identique à la sélection faisait croire à deux
   pages actives à la fois. */
.pill a:hover,.pill a:focus-visible{background:rgba(212,190,158,.42); gap:.5rem; color:var(--navy)}
.pill a[aria-current]{background:var(--dore); gap:.5rem; color:var(--navy)}
.pill a:hover svg,.pill a:focus-visible svg,.pill a[aria-current] svg{color:var(--navy)}
.pill a:hover .lb,.pill a:focus-visible .lb,.pill a[aria-current] .lb{grid-template-columns:1fr; opacity:1}
.pill a:focus-visible{outline:2px solid var(--coral); outline-offset:3px}

/* ==========================================================================
   EN-TÊTE SOMBRE — la seule surface marine du site
   ========================================================================== */
.head{
  position:relative; background:var(--navy); color:var(--white);
  padding:clamp(7rem,14vh,10rem) 0 clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.head::before{ /* quadrillage : deux dégradés, aucune image */
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:clamp(22px,1.5vw,30px) clamp(22px,1.5vw,30px);
}
.head::after{ /* halo, pour que le marine ne soit pas une surface morte */
  content:''; position:absolute; inset:auto -10% -60% auto; width:70vw; height:70vw;
  background:radial-gradient(circle,rgba(56,107,179,.5),transparent 62%);
  pointer-events:none;
}
.head .wrap{position:relative; z-index:3}
/* Seule l'accroche d'accueil porte le grand « Hello ! » ; les titres des
   autres pages restent à l'échelle éditoriale. */
/* Un cran sous l'échelle initiale : 72 px au lieu de 86 sur un écran de
   1440. Le « Hello ! » de l'accueil garde sa taille. */
.head:not(.accueil) .display{font-size:clamp(2.1rem,5vw,4.4rem)}
.head:not(.accueil) .lede{font-size:clamp(.92rem,1.05vw,1rem)}

/* Titre des pages intérieures. La largeur maximale (--large) sert la mesure
   au format bureau ; au petit écran le titre prend toute la colonne. */
/* Interligne 1,04 et non 0,92 comme le « Hello ! » : celui-ci tient sur une
   ligne, l'interligne n'y joue pas. Ici les titres se replient, et à 0,92 les
   jambages d'une ligne venaient toucher les accents de la suivante. */
.titre-page{color:var(--white); margin:.7rem 0 1rem; max-width:var(--large,16ch); line-height:1.04}
.head .label{color:rgba(255,255,255,.55)}
.head a{color:var(--white)}

/* Le logo est calé sur la hauteur de la pilule du menu :
   16px de picto + 2×.42rem de marge interne + 2×.3rem de marge de pilule. */
.marque{display:flex; align-items:center; height:var(--barre); text-decoration:none}
.marque svg{height:var(--barre); width:auto; color:var(--white)}
.marque b{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;   /* lu, jamais vu */
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.hero{display:grid; gap:clamp(2rem,5vw,4rem); align-items:end; grid-template-columns:1fr}
.hero-txt{max-width:34rem}
/* Au-dessus d'un titre de cette masse, un écart numériquement égal se lit
   plus grand qu'en dessous : l'œil mesure depuis la ligne de base, et le
   bloc des capitales pèse vers le haut. D'où 2,6rem ici contre 3,8rem
   d'écart réel en dessous — c'est ce déséquilibre qui donne l'équilibre. */
.hero .display{color:var(--white); margin:2.6rem 0 1.1rem}
.hero .lede{color:rgba(255,255,255,.72); max-width:30rem}

/* Curseur de frappe — signature reprise de la version précédente */
.ch{display:inline-block; position:relative; padding:.14em .04em; margin:-.14em -.04em; vertical-align:bottom}
.ch>span{display:block}
.js .ch>span{opacity:0}
.js .ch.tapee>span{opacity:1}
.ch.ici::before{
  content:''; position:absolute; left:0; top:.18em; bottom:.18em;
  width:.055em; background:var(--coral); animation:clignote .82s steps(1) infinite;
}
@keyframes clignote{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.ch.fin{width:.1em}

.meta-hero{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.8rem}
.meta-hero li{display:flex; align-items:center; gap:.5rem}
.meta-hero i{width:5px; height:5px; border-radius:50%; background:var(--coral); flex:none}

.scroll-cue{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:clamp(2.5rem,6vh,4rem);
  text-decoration:none;
}
.scroll-cue span{width:44px; height:1px; background:rgba(255,255,255,.4); position:relative; overflow:hidden}
.scroll-cue span::after{
  content:''; position:absolute; inset:0; background:var(--coral);
  transform:translateX(-100%); animation:glisse 2.4s var(--ease) infinite;
}
@keyframes glisse{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- Section ------------------------------------------------------ */
.section{padding:clamp(3.5rem,9vh,6.5rem) 0}
.section-tete{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:baseline;
  justify-content:space-between; padding-bottom:1.4rem; margin-bottom:clamp(2rem,4vw,3.2rem);
  border-bottom:1px solid var(--line);
}

/* ---------- Sélection de projets : liste éditoriale ---------------------- */
.selection{display:grid; gap:clamp(2.5rem,5vw,4rem)}
.projet-ligne{
  display:grid; grid-template-columns:1fr; gap:1.2rem;
  text-decoration:none; position:relative; isolation:isolate;
}
.projet-ligne .vue{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--paper-2); aspect-ratio:4/3;
}
.projet-ligne .vue img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.projet-ligne:hover .vue img{transform:scale(1.04)}
.projet-ligne .corps{display:flex; flex-direction:column; gap:.5rem}
.projet-ligne .titre{
  font-family:var(--font-ui); font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.85rem); line-height:1.15; letter-spacing:-.015em;
}
.projet-ligne .resume{margin-top:.5rem}
.projet-ligne .tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem}
.tag{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:.3rem .6rem; border:1px solid var(--line); border-radius:100px; color:var(--mute);
  text-decoration:none;   /* sur la page projet, ce sont des liens */
}
.fleche{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:.6rem;
  text-decoration:none;   /* le soulignement par défaut du navigateur */
  font-family:var(--font-ui); font-weight:500; font-size:.75rem;
  letter-spacing:.02em; color:var(--coral);
}
.fleche svg{width:15px; transition:transform var(--dur) var(--ease)}
.projet-ligne:hover .fleche svg{transform:translateX(6px)}

/* ==========================================================================
   PORTFOLIO — filtres + grille
   ========================================================================== */
.filtres{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:clamp(2rem,4vw,3rem)}
.filtre{
  font-family:var(--font-text); font-weight:500;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--mute);
  border:1px solid var(--line);
  transition:all var(--dur) var(--ease);
}
.filtre:hover{border-color:var(--navy); color:var(--navy)}
.filtre[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:var(--white)}
.filtre:focus-visible{outline:2px solid var(--coral); outline-offset:2px}

.grille{
  display:grid; gap:clamp(1.4rem,2.6vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.carte{text-decoration:none; display:flex; flex-direction:column; gap:.85rem}
.carte .vue{overflow:hidden; border-radius:2px; background:var(--paper-2); aspect-ratio:4/3}
.carte .vue img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.carte:hover .vue img{transform:scale(1.05)}
.carte .h3{transition:color var(--dur) var(--ease)}
.carte:hover .h3{color:var(--coral)}
.carte.cache{display:none}
.vide{padding:3rem 0; text-align:center; color:var(--mute)}

/* ==========================================================================
   À PROPOS — CV
   ========================================================================== */
.duo{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr}
.portrait{border-radius:2px; overflow:hidden; background:var(--paper-2)}

.cv{display:grid; gap:0}
.poste{
  display:grid; grid-template-columns:1fr; gap:.5rem;
  padding:1.6rem 0; border-top:1px solid var(--line);
  transition:background .4s var(--ease);
}
.poste:last-child{border-bottom:1px solid var(--line)}
.poste .dates{font-family:var(--font-ui); font-weight:600; font-size:.72rem; letter-spacing:.06em; color:var(--sky)}
.poste ul{display:grid; gap:.35rem; margin-top:.5rem}
.poste ul li{position:relative; padding-left:1rem; font-size:.88rem; color:var(--mute)}
.poste ul li::before{content:''; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--coral)}

.jauges{display:grid; gap:1.15rem}
.jauge .haut{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.45rem}
.jauge .piste{height:2px; background:var(--line-soft); overflow:hidden}
.jauge .part{
  height:100%; width:0; background:var(--navy);
  transition:width 1.3s var(--ease); transition-delay:var(--d,0s);
}
.vu .jauge .part{width:var(--w)}

.outils{display:flex; flex-wrap:wrap; gap:.45rem}
.outil{
  font-family:var(--font-ui); font-weight:500; font-size:.7rem;
  padding:.45rem .95rem; border:1px solid var(--line); border-radius:100px;
}

/* ==========================================================================
   PAGE PROJET
   ========================================================================== */
.fiche{display:grid; gap:.9rem 2.5rem; grid-template-columns:1fr}
.fiche div{display:grid; gap:.2rem; padding:.9rem 0; border-top:1px solid var(--line)}
.galerie{display:grid; gap:clamp(1rem,2vw,1.8rem)}
.galerie figure{margin:0; background:var(--paper-2); border-radius:2px; overflow:hidden}
.prose{max-width:38rem; display:grid; gap:1.1rem}
.prose p{color:var(--mute)}

.nav-projet{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-block:1px solid var(--line)}
.nav-projet a{
  background:var(--paper); padding:clamp(1.4rem,3vw,2.2rem) var(--gut); text-decoration:none;
  display:grid; gap:.35rem; transition:background .4s var(--ease);
}
.nav-projet a:hover{background:var(--paper-2)}
.nav-projet .nav-int{display:block}
.nav-projet .suiv{text-align:right}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.form{display:grid; gap:1.1rem}
.champ{display:grid; gap:.45rem}
.champ label{font-family:var(--font-ui); font-weight:500; font-size:.72rem; letter-spacing:.04em}
.champ input,.champ textarea,.champ select{
  font:inherit; font-size:.9rem; color:var(--navy);
  padding:.8rem .9rem; border:1px solid var(--line); border-radius:2px;
  background:var(--white); width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.champ textarea{resize:vertical; min-height:8rem}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(42,45,87,.08);
}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:var(--coral)}
.erreur{font-size:.7rem; color:var(--coral); min-height:1em}
.duo-champ{display:grid; gap:1.1rem; grid-template-columns:1fr}

.btn{
  font-family:var(--font-ui); font-weight:500; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.95rem 1.7rem; border-radius:100px; cursor:pointer;
  background:var(--navy); color:var(--white); border:1px solid var(--navy);
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{background:var(--coral); border-color:var(--coral); transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--coral); outline-offset:3px}
/* Corail en permanence, et non seulement au survol. Le survol garde son
   soulèvement et gagne une ombre teintée : la couleur ne sert plus à
   signaler l'état, elle appartient au bouton. */
.btn.accent{background:var(--coral); border-color:var(--coral); color:var(--white)}
.btn.accent:hover{background:var(--coral); border-color:var(--coral)}

.btn.creux{background:transparent; color:var(--navy)}
.btn.creux:hover{background:var(--navy); color:var(--white)}

.recu{
  display:none; gap:.8rem; align-items:flex-start; padding:1.1rem 1.2rem;
  border:1px solid var(--line); border-left:2px solid var(--coral);
  background:var(--white); border-radius:2px;
}
.recu.on{display:flex}

.coord{display:grid; gap:1.4rem}
.coord a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.15rem}
.coord a:hover{border-color:var(--coral); color:var(--coral)}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied{background:var(--navy); color:var(--white); padding:clamp(3rem,7vh,5rem) 0 2rem; margin-top:auto}
.pied a{color:var(--white); text-decoration:none}
.pied .label{color:rgba(255,255,255,.5)}
.pied-haut{display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:2.5rem}
.pied .display{color:var(--white); font-size:clamp(1.9rem,5vw,3.4rem)}
.pied-bas{
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:center;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15);
  font-size:.72rem; color:rgba(255,255,255,.55);
}
.pied-bas a{color:rgba(255,255,255,.55); text-decoration:none; transition:color .3s var(--ease)}
.pied-bas a:hover,.pied-bas a:focus-visible{color:var(--white)}
.liens{display:grid; gap:.6rem}
.liens a{
  display:inline-block; font-size:.85rem;
  background-image:linear-gradient(var(--coral),var(--coral));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.liens a:hover{background-size:100% 1px}

/* ==========================================================================
   APPARITIONS AU DÉFILEMENT
   Sans JavaScript, tout est visible : l'état masqué dépend de la classe .js
   ========================================================================== */
.js .rvl{opacity:0; transform:translateY(18px)}
.js .rvl.vu{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0s);
}

/* ==========================================================================
   RESPONSIVE — construit du petit vers le grand
   ========================================================================== */
@media (max-width:720px){
  /* Le menu devient une barre basse : pas de survol sur un écran tactile,
     donc les libellés restent visibles en permanence.
     La grille 0fr/1fr et le rognage ne servent qu'au dépliage au survol :
     sur mobile ils tronqueraient le texte, on les neutralise. */
  /* 4 px de marge interne ne suffisaient pas : la bulle marine de la page
     active arrivait à fleur du bord, et son arrondi se superposait à celui
     de la pilule — d'où le croissant blanc qui ressemblait à une découpe.
     Marge portée à 7 px, et les pictos s'éloignent des bords du même coup. */
  /* La hauteur fixe sert à aligner le logo sur la barre au format bureau.
     Au petit écran les entrées passent en colonne et deviennent plus hautes
     que cette valeur : la bulle marine dépassait alors de la barre blanche,
     en haut comme en bas. La pilule reprend donc la hauteur de son contenu. */
  .pill{
    top:auto; bottom:.85rem; height:auto; padding:.44rem .5rem; gap:.1rem;
    max-width:calc(100vw - 1.5rem);
  }
  .pill a{flex-direction:column; gap:.28rem; padding:.5rem .72rem}
  .pill .lb{display:block; opacity:1; font-size:.56rem; letter-spacing:.01em}
  .pill .lb>span{overflow:visible}
  .pill svg{width:18px; height:18px}
  .pill a:hover,.pill a:focus-visible,.pill a[aria-current]{gap:.28rem}

  .head{padding-top:clamp(3.5rem,9vh,5rem)}
  /* La place pour la barre du bas était prise sur le corps de page, dont le
     fond est clair : il restait une bande claire sous le pied de page. On la
     donne au pied de page lui-même, qui passe donc derrière la barre. */
  body{padding-bottom:0}
  .pied{padding-bottom:6.5rem}
}

@media (min-width:560px){
  .duo-champ{grid-template-columns:1fr 1fr}
  .fiche{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center}
  .projet-ligne{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,4vw,3.5rem); align-items:center}
  /* Une ligne sur deux, l'image passe à droite — et garde la colonne large. */
  .projet-ligne:nth-child(even){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .projet-ligne:nth-child(even) .vue{order:2}
  .projet-ligne .corps{padding-right:2rem}
  .duo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start}
  .fiche{grid-template-columns:repeat(4,1fr)}
  .galerie.deux{grid-template-columns:1fr 1fr}
  .nav-projet{grid-template-columns:1fr 1fr}
  .pied-haut{grid-template-columns:1.4fr .8fr .8fr; gap:3rem}
  .poste{grid-template-columns:9rem 1fr; gap:0 2rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .rvl{opacity:1; transform:none}
  .js .ch>span{opacity:1}
  .ch.ici::before{opacity:0}
  .vu .jauge .part{transition:none}
}

/* L'accroche d'accueil se cale sur la hauteur d'écran plutôt que sur son
   contenu : le vide se répartit au lieu de s'accumuler en haut. */
.head.accueil{display:flex; align-items:center; min-height:100svh; padding-block:clamp(6rem,12vh,8rem) clamp(3rem,6vh,4rem)}
/* Le bloc de texte est centré et large de 1248 px : sa boîte passait
   par-dessus le stylet et avalait le survol. On la rend transparente aux
   clics, et on rétablit la réactivité sur le texte lui-même. */
.head.accueil > .wrap{width:min(100% - 2*var(--gut), var(--max)); pointer-events:none}
.head.accueil .hero-txt{pointer-events:auto}

/* ==========================================================================
   ACCUEIL — compétences et scène
   ========================================================================== */

/* Deux colonnes, pas de capitales, une pastille de couleur par entrée.
   La grille « auto 1fr » aligne les pastilles entre elles, colonne par
   colonne — c'est elle qui fait l'alignement, pas un réglage à la main. */
/* Mêmes corps, couleur et interlettrage que le sur-titre « Directrice
   artistique & graphiste » — mais sans les capitales. */
.competences{
  display:grid; grid-template-columns:repeat(2,max-content);
  justify-content:start; gap:.9rem 3rem;
  margin-top:1.8rem;
  font-size:.63rem; letter-spacing:.2em; font-weight:500;
  color:rgba(255,255,255,.55);
}
/* En flex et non en grille : une piste « 1fr » imbriquée dans une colonne
   « auto » est un cas que les moteurs ne résolvent pas de la même façon.
   Safari la ramenait à sa largeur minimale, d'où les retours à la ligne.
   Le flex se dimensionne sur son contenu, sans ambiguïté possible. */
.competences li{display:flex; align-items:center; gap:.65rem; white-space:nowrap}
.competences li::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--pt,var(--coral));
}

/* ---------- La scène ------------------------------------------------------
   .obj      porte la position, en pourcentage du plateau.
   .plateau  boîte au format de la maquette (1789 × 982), centrée et
             dimensionnée comme une image en « cover ». La composition ne se
             déforme donc jamais : elle est seulement recadrée sur les bords.
   .bouge    marque les trois objets photographiés — café, stylet, AirPods.
             Ils ne bougent pas d'eux-mêmes : seul le survol les anime.

   L'ordre compte : le plateau et les objets sont définis AVANT les requêtes
   média, sinon leurs surcharges au petit écran seraient écrasées — à
   spécificité égale, c'est la dernière règle écrite qui l'emporte.
   ------------------------------------------------------------------------ */
.scene{position:absolute; inset:0; z-index:1; pointer-events:none}
.obj{position:absolute; left:var(--x); top:var(--y); width:var(--w)}
/* L'image remplit sa boîte dans les deux sens. Sans ça, un SVG dont la
   taille native est plus petite que la boîte reste à sa taille native —
   la croix de 79 px ne grandissait pas à 11 % de l'en-tête. */
.obj img{width:100%; height:auto}

.plateau{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; aspect-ratio:1789/982;
}
@media (max-aspect-ratio:1789/982){
  .plateau{width:auto; height:100%}
}

.bouge{pointer-events:auto}
/* L'ombre reste permanente : un objet posé au-dessus du fond projette une
   ombre, qu'il bouge ou non. */
.bouge img{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.34));
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.bouge:hover img{
  transform:translateY(-16px) scale(1.04) rotate(-2deg);
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.46));
}

/* ---------- Petit écran ---------------------------------------------------
   Le plateau au format du bureau recadre beaucoup trop sur un écran vertical :
   il ne laissait voir qu'un fragment de la composition. On lui substitue la
   section entière et un placement propre, écrit dans --mx / --my / --mw.
   Les trois objets photographiés disparaissent : à moitié recadrés, ils
   n'apportaient rien. Restent les quatre formes de la charte, aux angles.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .plateau{
    position:absolute; inset:0;
    width:auto; height:auto; aspect-ratio:auto; transform:none;
  }
  .obj{
    left:var(--mx, var(--x));
    top:var(--my, var(--y));
    width:var(--mw, var(--w));
  }
  .obj[data-mobile="off"]{display:none}

  /* Le titre garde sa présence : il ne suit plus la largeur d'écran vers le bas. */
  .hero .display{font-size:clamp(4rem, 16vw, 7rem); margin-top:2rem}

  /* Sur une colonne étroite, un bloc centré tient mieux qu'un fer à gauche :
     il n'y a plus de contrepoint à droite pour justifier l'alignement. */
  .hero-txt{text-align:center; margin-inline:auto}
  .competences{justify-content:center; justify-items:center}
}

@media (max-width:640px){
  .competences{grid-template-columns:max-content; gap:.6rem}
}

@media (prefers-reduced-motion:reduce){
  .bouge img,.bouge:hover img{transform:none}
}

/* ==========================================================================
   PIED DE PAGE — marque et yeux
   ========================================================================== */

/* Le logo remplace les deux lignes de titre : une marque discrète plutôt
   qu'une accroche de plus, la page en contient déjà. */
.pied-marque{display:grid; justify-items:center; gap:2.2rem; text-align:center}
.pied-marque > svg{
  width:clamp(84px, 8.5vw, 128px); height:auto;
  color:var(--white); opacity:.26;
}

/* ---------- Les yeux ------------------------------------------------------
   Purement décoratifs. La pupille est bornée à une ellipse intérieure pour
   qu'elle ne sorte jamais du blanc de l'œil, et son déplacement est calculé
   en JavaScript — aucune transition CSS par-dessus, sinon les deux
   lissages se cumuleraient et le regard traînerait derrière la souris.
   -------------------------------------------------------------------------- */
.yeux{display:flex; gap:.75rem; margin-top:2.8rem}
.oeil{
  width:clamp(36px, 3.4vw, 50px); aspect-ratio:.63;
  border-radius:100px; background:var(--white);
  position:relative; flex:none;
}
/* Centrage par « inset:0 + margin:auto » plutôt que par translate(-50%,-50%) :
   la transformation ne contient alors qu'un déplacement en pixels, que le
   navigateur peut confier à la carte graphique. Et aucune transition CSS —
   le lissage est fait en JavaScript, une seule écriture par image. */
.oeil i{
  position:absolute; inset:0; margin:auto;
  width:54%; aspect-ratio:1; border-radius:50%;
  background:var(--navy);
  will-change:transform;
}

@media (max-width:900px){
  .pied-marque > svg{width:78px}
}

/* ==========================================================================
   PETIT ÉCRAN — tout est centré
   Sur une colonne unique il n'y a plus de contrepoint à droite : un fer à
   gauche n'a plus rien pour s'appuyer. Seuls les champs de formulaire
   gardent leur texte aligné à gauche, sinon la saisie devient pénible.
   ========================================================================== */
@media (max-width:900px){

  /* --- En-têtes de page et de section --- */
  .head .wrap{text-align:center}
  .head .lede{margin-inline:auto}
  .titre-page{max-width:none; margin-inline:auto}
  .section-tete{
    flex-direction:column; align-items:center; text-align:center;
    justify-content:center;
  }
  .filtres{justify-content:center; margin-inline:auto}

  /* --- Listes de projets ---
     Le bloc sous chaque visuel reste entièrement au fer à gauche : numéro,
     titre, client, description, catégories, lien. C'est une fiche qui se lit
     en colonne, pas un titre. Centrée, chaque ligne repart d'un point
     différent et l'œil n'a plus de bord auquel se raccrocher.
     « align-items:stretch » rétablit la valeur par défaut du conteneur, sans
     quoi les enfants resteraient des boîtes centrées au contenu aligné à
     gauche — l'alignement porterait sur le texte, pas sur le bloc. */
  .projet-ligne .corps{align-items:stretch; text-align:left; padding-right:0}
  .carte{text-align:left; align-items:stretch}

  /* --- Pages intérieures --- */
  .duo, .prose, .coord, .fiche, .poste{text-align:center}
  .prose{margin-inline:auto}
  .fiche div{align-items:center}
  .poste ul li{padding-left:0}
  .poste ul li::before{display:none}      /* le tiret n'a plus de bord où s'accrocher */
  .jauges{max-width:26rem; margin-inline:auto}
  .outils{justify-content:center}
  .nav-projet .suiv, .nav-projet a{text-align:center}

  /* --- Formulaire : libellés centrés, saisie à gauche --- */
  .champ label, .erreur{text-align:center}
  .champ input, .champ textarea, .champ select{text-align:left}

  /* --- Pied de page ---
     Le logo et le bouton prennent toute la largeur ; « Pages » et « Réseaux »
     se partagent la ligne suivante, côte à côte. Le pied de page perd
     ainsi près de la moitié de sa hauteur sur une colonne étroite. */
  /* Colonnes à la largeur de leur contenu et paire centrée : en « 1fr 1fr »
     chacune se centrait dans sa moitié d'écran, d'où un vide énorme entre
     les deux. L'écart est maintenant un chiffre, pas une conséquence. */
  .pied-haut{grid-template-columns:max-content max-content; justify-content:center;
             gap:2.2rem 3.5rem; text-align:center; justify-items:center}
  /* align-content:start : les deux colonnes ont la même hauteur, sans ça le
     contenu de la plus courte se répartirait dans le vide. */
  .pied-haut > div{display:grid; justify-items:center; align-content:start}
  .pied-marque{grid-column:1 / -1}
  .liens{justify-items:center}
}

/* Les yeux suivent la souris : sans souris ils ne sont qu'un dessin figé.
   Masqués dès qu'il n'y a pas de pointeur, ou sur une colonne étroite. */
@media (max-width:900px), (hover:none){
  .yeux{display:none}
}

/* ==========================================================================
   PAGE PROJET — vidéo et galerie à largeur variable
   ========================================================================== */
.galerie .large, .galerie .video{grid-column:1 / -1}   /* toute la largeur */

.video{
  position:relative; aspect-ratio:16/9; margin:0;
  background:var(--navy); border-radius:2px; overflow:hidden;
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Emplacement, pour la maquette : le lecteur réel prend sa place dès qu'une
   adresse Vimeo ou YouTube est renseignée. */
.video.attente{display:grid; place-items:center; align-content:center; gap:1rem}
.video.attente .label{color:rgba(255,255,255,.5)}
.video.attente .lecture{
  width:56px; height:56px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
}
.video.attente .lecture::after{
  content:''; width:0; height:0; margin-left:4px;
  border:10px solid transparent; border-left:16px solid var(--coral); border-right:0;
}

/* ==========================================================================
   EN-TÊTES DES PAGES INTÉRIEURES — scène décorative
   Même vocabulaire que l'accueil (.obj, .bouge), mais positionné directement
   dans l'en-tête : celui-ci n'a pas de hauteur fixe, un plateau au format
   figé n'aurait pas de sens ici.
   ========================================================================== */
.head.avec-scene{overflow:hidden}
.scene-tete{position:absolute; inset:0; z-index:1; pointer-events:none}
.scene-tete .obj{position:absolute; left:var(--x); top:var(--y); width:var(--w)}
/* L'image remplit sa boîte dans les deux sens. Sans ça, un SVG dont la
   taille native est plus petite que la boîte reste à sa taille native —
   la croix de 79 px ne grandissait pas à 11 % de l'en-tête. */
.obj img{width:100%; height:auto}
.scene-tete .bouge{pointer-events:auto; transform:rotate(var(--rot,0deg))}
.scene-tete .bouge img{
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.38));
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.scene-tete .bouge:hover img{
  transform:translateY(-14px) scale(1.03);
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.48));
}
/* Le bloc de texte ne doit pas avaler le survol de l'image, comme sur l'accueil. */
.head.avec-scene > .wrap{pointer-events:none}
.head.avec-scene > .wrap *{pointer-events:auto}

/* Au petit écran, aucune scène sur les en-têtes intérieurs : une forme seule
   qui se balade en coin n'apporte rien. L'en-tête redevient le bloc sobre. */
@media (max-width:900px){
  .scene-tete{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scene-tete .bouge img,.scene-tete .bouge:hover img{transform:none}
}

/* ==========================================================================
   CONTENU RÉDIGÉ DANS L'ÉDITEUR WORDPRESS — page projet
   Une grille à deux colonnes. Le cartouche « Le projet » occupe la colonne
   de gauche ; les paragraphes, titres et listes se rangent à droite ; toute
   image, galerie ou vidéo prend les deux colonnes. Une image seule occupe
   donc toute la largeur ; une galerie range ses images côte à côte.
   ========================================================================== */
.contenu{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(2rem,5vw,4rem); row-gap:1.1rem; align-items:start;
}
.contenu > *{margin:0; min-width:0}
.contenu > .contenu-tete{grid-column:1; grid-row:1}
.contenu > p, .contenu > h2, .contenu > h3, .contenu > ul, .contenu > ol, .contenu > blockquote{grid-column:2; max-width:38rem}
.contenu > p, .contenu > ul, .contenu > ol, .contenu > blockquote{color:var(--mute)}
.contenu h2, .contenu h3{font-family:var(--font-ui); font-weight:600; color:var(--navy); margin-top:.6rem}
.contenu h2{font-size:1.25rem} .contenu h3{font-size:1rem}
.contenu ul{padding-left:1.1rem} .contenu li{margin:.25rem 0}
.contenu blockquote{border-left:2px solid var(--coral); padding-left:1rem; font-style:italic}

/* Les visuels : toute la largeur, avec de l'air au-dessus du premier */
.contenu > figure, .contenu > .wp-block-gallery, .contenu > .wp-block-embed, .contenu > .video{grid-column:1 / -1}
.contenu > figure + figure, .contenu > .wp-block-gallery + figure, .contenu > figure + .wp-block-gallery{margin-top:0}
.contenu > p + figure, .contenu > ul + figure, .contenu > p + .wp-block-gallery, .contenu > ul + .wp-block-gallery,
.contenu > p + .video, .contenu > .contenu-tete + figure{margin-top:clamp(1.2rem,3vw,2.6rem)}
.contenu figure.wp-block-image{background:var(--paper-2); border-radius:2px; overflow:hidden}
.contenu figure.wp-block-image img{width:100%; height:auto; display:block}
.contenu figure.wp-block-image.aligncenter, .contenu figure.wp-block-image.alignleft, .contenu figure.wp-block-image.alignright,
.contenu figure.wp-block-image.alignwide, .contenu figure.wp-block-image.alignfull{margin-inline:0; float:none; max-width:none}
.contenu figcaption{font-size:.7rem; color:var(--mute); padding:.5rem .1rem 0; text-align:left}
.contenu .wp-block-embed{margin:0} .contenu .wp-block-embed__wrapper{position:relative; aspect-ratio:16/9; border-radius:2px; overflow:hidden; background:var(--navy)}
.contenu .wp-block-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.contenu .video{margin:0}
/* Bloc Vidéo (fichier MP4/WebM, alternative légère au GIF) : pleine largeur */
.contenu .wp-block-video{margin:0}
.contenu .wp-block-video video{display:block; width:100%; height:auto; border-radius:2px}

.couverture img{width:100%; height:auto; display:block}

@media (max-width:900px){
  .contenu{grid-template-columns:1fr; text-align:center}
  .contenu > .contenu-tete, .contenu > p, .contenu > h2, .contenu > h3, .contenu > ul, .contenu > ol, .contenu > blockquote{grid-column:1; max-width:none}
  .contenu .tags{justify-content:center}
  .contenu ul, .contenu ol{list-style-position:inside; padding-left:0}
}

/* Pages À propos et génériques : texte courant, sans grille. */
.prose-page > *{margin:0 0 1.1rem} .prose-page > *:last-child{margin-bottom:0}
.prose-page p{color:var(--mute)} .prose-page p:first-child{color:var(--navy); font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.7}
.prose-page h2{font-family:var(--font-ui); font-weight:600; font-size:1.25rem; color:var(--navy); margin-top:2rem}
.prose-page a{color:var(--coral)}
.poste ul{padding-left:0} .poste .wp-block-list, .poste ul{list-style:none}

/* Message de confirmation ou d'erreur du formulaire, rendu par le serveur */
.recu.on{display:flex; margin-bottom:.5rem}


/* Galerie de l'éditeur : WordPress donne à chaque image une largeur en
   pourcentage prévue pour sa propre mise en page flexible. Dans notre grille
   à deux colonnes, chaque image doit remplir sa cellule. */
.contenu .wp-block-gallery{display:grid !important; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.8rem) !important}
.contenu .wp-block-gallery .wp-block-image, .contenu .wp-block-gallery figure{width:100% !important; max-width:none; margin:0 !important; flex:none}
.contenu .wp-block-gallery img{width:100%; height:auto; display:block}
.contenu .wp-block-gallery.columns-1{grid-template-columns:1fr}
.contenu .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){ .contenu .wp-block-gallery, .contenu .wp-block-gallery.columns-3{grid-template-columns:1fr} }

/* Images non glissables (complète le script ; sans effet sur le zoom ou la sélection du texte) */
img, video{-webkit-user-drag:none; user-drag:none}