/* ==========================================================================
   PAGES DE PROJET (projet-*.html, fabriquées par outils/pages-projets.mjs)
   Mêmes jetons, même grille et mêmes survols que l'accueil.
   ========================================================================== */

/* ---------- Reset, grille adaptative, jetons ---------- */
*{margin:0;padding:0;box-sizing:border-box}
img,video{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer}
figure{margin:0}

html{font-size:16px;background:#efefef}
@media (max-width:1920px){html{font-size:0.833333vw}}
@media (max-width:1440px){html{font-size:1.111111vw}}
@media (max-width:1024px){html{font-size:1.5625vw}}
@media (max-width:640px){html{font-size:4.444444vw}}

:root{
  --background:#efefef;
  --foreground:#121212;
  --accent:#3e69af;
  --surface:#e2e2e2;
  --muted:#5f6166;
  --line:rgba(18,18,18,0.14);
  --line-tag:rgba(18,18,18,0.18);

  --gutter:2.5rem;
  --font-display:"Gantari", sans-serif;
  --font-sans:"Gantari", sans-serif;

  --t-mega:6.5rem;
  --t-h1:5rem;
  --t-h2:3.25rem;
  --t-h3:1.75rem;
  --t-lead:1.375rem;   --lh-lead:1.45;
  --t-body:1.0625rem;  --lh-body:1.6;
  --t-eyebrow:0.8125rem;

  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
@media (max-width:640px){:root{--gutter:16px}}

body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);
  font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#3e69af;color:#efefef}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.eyebrow{display:flex;align-items:center;gap:0.75rem;
  font-size:var(--t-eyebrow);line-height:1.2;font-weight:700;
  text-transform:uppercase;letter-spacing:0.22em;color:var(--muted)}
.eyebrow::before{content:"";flex:none;width:0.5rem;height:0.5rem;border-radius:9999px;background:var(--accent)}

/* ---------- Fondu d'entrée et révélations ---------- */
.js body{opacity:0}
.js.is-ready body{opacity:1;transition:opacity 900ms var(--ease-out)}
/* Tout ce qui porte data-rise monte et apparaît en entrant dans l'écran ;
   les images, elles, reculent doucement en place. Pas de flou. */
.js [data-rise]{opacity:0;transform:translateY(calc(var(--rise,24px) + 24px));
  transition:opacity 700ms var(--ease-expo),transform 1000ms var(--ease-expo);
  transition-delay:var(--delay,0ms)}
.js [data-rise].is-in{opacity:1;transform:none}
.js [data-rise]:not(.is-in) img{transform:scale(1.14)}

/* ---------- Menu du téléphone (la barre : assets/nav.css) ---------- */
.mobile-menu{position:fixed;inset:0;z-index:40;background:var(--background);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 450ms var(--ease-out)}
.mobile-menu.open{opacity:1;pointer-events:auto}
@media (min-width:768px){.mobile-menu{display:none}}
.mobile-menu ul{display:flex;flex-direction:column;align-items:center;gap:1rem}
.mobile-menu a{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:1;
  text-transform:uppercase;letter-spacing:-0.01em}

/* ---------- En-tête du projet ---------- */
.p-head{padding:9rem var(--gutter) 3rem;display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:1024px){
  .p-head{grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
  .p-head-main{grid-column:1 / span 7}
  .p-head-side{grid-column:9 / span 4}
}
.retour{display:inline-flex;align-items:center;gap:0.5rem;
  font-size:var(--t-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--muted);
  transition:color 340ms var(--ease-out)}
.retour .arrow{color:var(--accent);transition:translate 500ms var(--ease-expo)}
.p-num{margin-top:3rem;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:0.22em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.p-titre{margin-top:1rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:0.92;letter-spacing:-0.015em;font-size:var(--t-h1)}
@media (min-width:640px){.p-titre{font-size:var(--t-mega)}}
.p-nature{margin-top:1rem;font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:0.18em;color:var(--muted)}
.p-resume{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--foreground)}

/* ---------- Tags ---------- */
.tags{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.5rem}
.tag{display:inline-flex;align-items:center;padding:0.375rem 0.75rem;border:1px solid var(--line-tag);border-radius:9999px;
  font-size:var(--t-eyebrow);line-height:1.2;font-weight:700;letter-spacing:0.04em;color:var(--foreground);
  transition:border-color 300ms var(--ease-out),color 300ms var(--ease-out),background-color 300ms var(--ease-out)}
.tag--cadre{background:var(--accent);border-color:var(--accent);color:#efefef}

/* ---------- Image principale, posée sur un panneau ---------- */
.p-cover{padding:0 var(--gutter)}
.p-cover-panel{display:flex;justify-content:center;align-items:center;padding:3rem;background:var(--surface);overflow:hidden}
@media (min-width:1024px){.p-cover-panel{padding:5rem}}
.p-cover-panel img,.p-cover-panel video{width:auto;height:auto;max-width:100%;max-height:80vh;
  box-shadow:0 1.5rem 3rem -1.5rem rgba(18,18,18,0.35);transition:transform 1100ms var(--ease-expo)}
.legende{margin-top:0.875rem;font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:0.18em;color:var(--muted)}

/* ---------- Fiche ---------- */
.p-fiche{margin:4rem var(--gutter) 0;padding-top:2rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:1.75rem}
@media (min-width:640px){.p-fiche{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.p-fiche{grid-template-columns:repeat(4,1fr);gap:var(--gutter)}}
.p-fiche dt{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:0.18em;color:var(--muted)}
.p-fiche dd{margin-top:0.5rem;font-size:var(--t-body);line-height:var(--lh-body)}

/* ---------- Blocs ---------- */
.bloc{padding:7rem var(--gutter) 0}
.bloc-head{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:1024px){
  .bloc-head{grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
  .bloc-head h2{grid-column:1 / span 4}
  .bloc-head p{grid-column:6 / span 6}
}
.bloc-head h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:1;letter-spacing:-0.01em;font-size:var(--t-h2)}
.bloc-head p{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--muted)}
.bloc-corps{margin-top:3rem}

.galerie{display:grid;grid-template-columns:1fr;gap:var(--gutter);align-items:start}
@media (min-width:768px){.galerie{grid-template-columns:repeat(var(--colonnes,2),1fr)}}
.galerie--1 .cadre{display:flex;justify-content:center;padding:3rem;background:var(--surface)}
@media (min-width:1024px){.galerie--1 .cadre{padding:5rem}}
.galerie--1 .cadre img,.galerie--1 .cadre video{width:auto;height:auto;max-width:100%;max-height:80vh}
.cadre{overflow:hidden;background:var(--surface)}
.cadre img,.cadre video{width:100%;height:auto;transition:transform 1100ms var(--ease-expo)}

/* Palette */
.palette{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media (min-width:768px){.palette{grid-template-columns:repeat(3,1fr)}}
.couleur{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;min-height:18rem;padding:1.75rem;
  background:var(--couleur);color:var(--sur-couleur);box-shadow:inset 0 0 0 1px var(--line);
  transition:translate 600ms var(--ease-expo)}
.couleur-nom{font-size:var(--t-h3);font-weight:700;line-height:1.15}
.couleur-code{margin-top:0.375rem;font-size:var(--t-eyebrow);letter-spacing:0.18em;font-variant-numeric:tabular-nums}
.couleur-role{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:0.18em;opacity:0.8}

/* Typographies */
.typos{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media (min-width:768px){.typos{grid-template-columns:repeat(2,1fr)}}
.typo{padding:2rem;background:var(--surface)}
.typo-aa{font-size:9rem;line-height:1;letter-spacing:-0.02em;color:var(--accent);transition:color 400ms var(--ease-out)}
.typo-nom{margin-top:1.5rem;font-size:var(--t-h3);line-height:1.15}
.typo-role{margin-top:0.25rem;font-family:var(--font-sans);font-weight:400;font-size:var(--t-eyebrow);
  text-transform:uppercase;letter-spacing:0.18em;color:var(--muted)}
.typo-alphabet{margin-top:1.5rem;font-size:var(--t-body);line-height:1.6;color:var(--muted);word-spacing:0.25em}

/* Déclinaisons du signe */
.declinaisons{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:1024px){.declinaisons{grid-template-columns:repeat(3,1fr);gap:var(--gutter)}}
.decl{display:flex;flex-direction:column}
.decl-fond{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden}
.decl-fond > *{transition:transform 700ms var(--ease-expo)}
.decl-clair{background:#efefef;color:#121212;box-shadow:inset 0 0 0 1px var(--line)}
.decl-noir{background:#121212;color:#efefef}
.decl-indigo{background:#343089;color:#efefef}
.decl svg{width:38%;height:auto}
.decl-pastille{display:flex;align-items:center;justify-content:center;width:46%;aspect-ratio:1;border-radius:9999px;
  background:#121212;color:#efefef}
.decl-pastille svg{width:62%}
.decl-app{display:flex;align-items:center;justify-content:center;width:40%;aspect-ratio:1;border-radius:22%;
  background:#343089;color:#efefef}
.decl-app svg{width:62%}
.decl-nom{display:flex;align-items:center;gap:0.75rem;width:70%}
.decl-nom svg{width:34%;flex:none}
.decl-nom span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:0.95;font-size:var(--t-h3)}
.decl figcaption,.mock figcaption,.galerie figcaption{margin-top:0.875rem;font-size:var(--t-eyebrow);text-transform:uppercase;
  letter-spacing:0.18em;color:var(--muted)}

/* Mises en situation */
.mockups{display:grid;grid-template-columns:1fr;gap:var(--gutter);align-items:end}
@media (min-width:1024px){.mockups{grid-template-columns:1.3fr 1fr 0.8fr}}
.mock-scene{display:flex;align-items:center;justify-content:center;padding:3rem 2rem;background:var(--surface);
  aspect-ratio:4/3;overflow:hidden}
.mock-scene > *{transition:transform 900ms var(--ease-expo)}
.carte{position:relative;width:100%;max-width:22rem;aspect-ratio:85/55;border-radius:0.5rem;
  background:#121212 center/cover no-repeat;color:#efefef;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1.5rem 3rem -1.5rem rgba(18,18,18,0.5)}
.carte svg{width:24%}
.affiche{width:62%;aspect-ratio:3/4;background:#343089 center/cover no-repeat;color:#efefef;
  display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;
  box-shadow:0 1.5rem 3rem -1.5rem rgba(18,18,18,0.5)}
.affiche svg{width:30%}
.affiche-nom{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:0.9;font-size:var(--t-h3)}
.profil{width:52%;aspect-ratio:1;border-radius:9999px;background:#343089 center/cover no-repeat;color:#efefef;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1.5rem 3rem -1.5rem rgba(18,18,18,0.5)}
.profil svg{width:48%}

/* ---------- Notes, appel, lien ---------- */
.p-notes{padding:7rem var(--gutter) 0;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:1024px){
  .p-notes{grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
  .p-notes .eyebrow{grid-column:1 / span 4;align-self:start}
  .p-notes-corps{grid-column:6 / span 6}
}
.p-notes-corps p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--muted)}
.p-notes-corps p + p{margin-top:1rem}
.p-appel{margin-top:1.5rem;color:var(--foreground) !important}
.bouton{margin-top:2rem;display:inline-flex;align-items:center;gap:0.75rem;padding:0.875rem 1.5rem;border-radius:9999px;
  background:var(--foreground);color:#efefef;font-size:var(--t-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:0.18em;
  transition:background-color 340ms var(--ease-out)}
.bouton .arrow{display:inline-block;transition:transform 500ms var(--ease-expo)}

/* ---------- Projet suivant ---------- */
.suivant{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
  margin:8rem var(--gutter) 0;padding-block:3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:768px){.suivant{grid-template-columns:1fr 16rem}}
.suivant-titre{margin-top:1rem;display:flex;align-items:baseline;gap:1rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:0.95;letter-spacing:-0.01em;
  font-size:var(--t-h2);transition:color 400ms var(--ease-out)}
@media (min-width:640px){.suivant-titre{font-size:var(--t-h1)}}
.suivant-titre .arrow{color:var(--accent);transition:translate 600ms var(--ease-expo)}
.suivant-image{overflow:hidden;background:var(--surface);aspect-ratio:1}
.suivant-image img{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--ease-expo)}

/* ---------- Pied ---------- */
.fin{padding:5rem var(--gutter) 3rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:0.18em;color:var(--muted)}
.fin a{transition:color 340ms var(--ease-out)}
/* ---------- Survols (souris seulement) ---------- */
@media (hover:hover) and (min-width:769px){
  .retour:hover{color:var(--foreground)}
  .retour:hover .arrow{translate:-0.375rem 0}
  .tag:hover{border-color:var(--accent);color:var(--accent)}
  .tag--cadre:hover{background:transparent}
  .p-cover-panel:hover img,.p-cover-panel:hover video{transform:scale(1.03)}
  .cadre:hover img,.cadre:hover video{transform:scale(1.04)}
  .couleur:hover{translate:0 -0.5rem}
  .typo:hover .typo-aa{color:var(--foreground)}
  .decl:hover .decl-fond > *{transform:scale(1.1) rotate(-6deg)}
  .mock:hover .mock-scene > *{transform:scale(1.05) rotate(-2deg)}
  .bouton:hover{background:var(--accent)}
  .bouton:hover .arrow{transform:rotate(45deg)}
  .suivant:hover .suivant-titre{color:var(--accent)}
  .suivant:hover .suivant-titre .arrow{translate:0.75rem 0}
  .suivant:hover .suivant-image img{transform:scale(1.08)}
  .fin a:hover{color:var(--foreground)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms !important;animation:none !important}
  [data-rise]{opacity:1 !important;transform:none !important;filter:none !important}
}