/* =========================================================
   Urgence Graphique
   Maquette de référence : 1920 × 1080 px
   Toutes les dimensions sont exprimées en vw (base 1920)
   pour conserver les proportions de la maquette.
   ========================================================= */

/* ---------- fontes ---------- */

@font-face {
  font-family: "Hammer";
  src: url("../fonts/Hammer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louise";
  src: url("../fonts/Louise-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neureal Mono";
  src: url("../fonts/Neureal-Mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- variables ---------- */

:root {
  /* couleurs injectées par js/site.js à chaque chargement ; ces
     valeurs ne servent que le temps d'un souffle, avant le script */
  --couleur-a: #123489;   /* fond accueil */
  --couleur-b: #2E6B3F;   /* cercle accueil / fond projets */
  --encre-a: #ffffff;
  --encre-b: #ffffff;
  --duree-fondu: 0ms;     /* aucun fondu sur la pose initiale */
  --gris: #D8D6D1;        /* fond informations et pages projet — noir 20 %
                             de la maquette, très légèrement réchauffé */

  --marge: 1.875vw;        /* 36 px sur 1920 */
  --filet: 0.104vw;        /* 2 px  sur 1920 */

  --corps-nav: 2.268vw;    /* 43.5 px */
  --corps-titre: 2.656vw;  /* 51 px   */
  --corps-liste: 2.917vw;  /* 56 px   */
  --corps-texte: 2.604vw;  /* 50 px   */
  /* Page Informations : le texte est plus long que dans la maquette et
     doit tenir en un écran avec les mêmes marges. Corps réduit en
     conséquence — 37 px sur 1920, contre 50 px nominal. */
  --corps-informations: 1.93vw;
  --corps-legende: 2.344vw;/* 45 px   */
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Neureal Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--fond);
  color: var(--encre);
  transition: background-color var(--duree-fondu, 0ms) ease-in-out;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* Titre de niveau 1 lu par les moteurs et les lecteurs d'écran, sans
   effet visible : la maquette n'a pas de titre écrit, le logo en
   tient lieu. Le texte reste dans le document, il n'est pas caché
   (display:none le retirerait aussi du référencement). */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* variantes de page */

body.page-accueil       { --fond: var(--couleur-a); --encre: var(--encre-a); }
body.page-projets       { --fond: var(--couleur-b); --encre: var(--encre-b); }
body.page-informations,
body.page-projet        { --fond: var(--gris);      --encre: #000; }

/* ---------- en-tête ---------- */

.entete { z-index: 2; }

/* bloc de tête : reste en haut de l'écran au défilement */
.tete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fond);
  flex: 0 0 auto;
}

.entete {
  position: relative;
  flex: 0 0 auto;
  padding: var(--marge) var(--marge) 0 var(--marge);
}

/* les deux liens de navigation, aux deux bords */
.nav-mobile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.entete a.nav {
  font-family: "Louise", cursive;
  font-size: var(--corps-nav);
  line-height: 1;
}

.entete .titre-courant {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--marge);
  text-align: center;
  font-family: "Hammer", sans-serif;
  font-weight: 700;
  font-size: var(--corps-titre);
  line-height: 1;
  pointer-events: none;
}

.entete .titre-courant a { pointer-events: auto; }

/* filets pointillés — tirets de 13 px / blancs de 10 px sur 1920 */

.filet,
.liste-ligne,
.pied {
  --tiret: repeating-linear-gradient(
    to right,
    currentColor 0 0.677vw,
    transparent 0.677vw 1.198vw
  );
}

.filet {
  height: var(--filet);
  background-image: var(--tiret);
}

.entete + .filet {
  margin: 2.1vw var(--marge) 0 var(--marge);
}

/* ---------- accueil ---------- */

.accueil {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo {
  position: relative;
  /* Réduit par rapport à la maquette : à 39 vw le logo emplissait
     l'écran et ne pouvait presque pas se déplacer. À 22 vw il a de
     la course, comme une balle. */
  width: 22vw;
  height: 22vw;
  border-radius: 50%;
  background: var(--couleur-b);
  transition: background-color var(--duree-fondu, 0ms) ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 23.7vw;
  display: grid;
  place-items: center;
}

.logo-urgence,
.logo-graphique {
  grid-area: 1 / 1;
  line-height: 1;
  white-space: nowrap;
}

.logo-urgence {
  font-family: "Hammer", sans-serif;
  font-weight: 700;
  font-size: 4.02vw;   /* URGENCE */
  color: var(--couleur-a);
  transition: color var(--duree-fondu, 0ms) ease-in-out;
  letter-spacing: 0;
  /* le logo est un lettrage étiré verticalement (comme dans la maquette) */
  transform: scaleY(2.835);
}

.logo-graphique {
  font-family: "Louise", cursive;
  font-size: 5.73vw;   /* graphique */
  color: var(--encre-a);
  transform: translateY(-0.35vw);
}

/* ---------- page projets : les filtres ---------- */

.filtres {
  flex: 0 0 auto;
  margin: 2.6vw var(--marge) 1.2vw var(--marge);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.62vw;
  font-size: var(--corps-legende);
  letter-spacing: -0.05em;
  line-height: 1;
}

.filtre {
  padding: 0.63vw 1.35vw 0.72vw 1.35vw;
  border: var(--filet) solid currentColor;
  border-radius: 10vw;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.filtre:hover { opacity: 0.6; }

.filtre[aria-pressed="true"] {
  background: currentColor;
  opacity: 1;
}

/* le libellé prend la couleur du fond de page une fois la pastille pleine */
.filtre[aria-pressed="true"] span { color: var(--fond); }

.liste-vide {
  padding: 3vw 0;
  font-size: var(--corps-legende);
  letter-spacing: -0.05em;
  opacity: 0.7;
}

/* ---------- page projets : la liste ---------- */

.liste {
  flex: 1 1 auto;
  margin: 0 var(--marge);
  padding-top: 1.4vw;
  display: flex;
  flex-direction: column;
}

.liste-ligne {
  flex: 0 0 auto;            /* hauteur constante, même avec peu de projets */
  height: 7.2vw;             /* 138 px sur 1920 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  font-size: var(--corps-liste);
  letter-spacing: -0.05em;   /* approche −50 */
  line-height: 1;
  transition: opacity 0.15s;
  background-image: var(--tiret);
  background-repeat: no-repeat;
  background-size: 100% var(--filet);
  background-position: top left;
}

.liste-ligne:last-child {
  background-image: var(--tiret), var(--tiret);
  background-position: top left, bottom left;
  background-size: 100% var(--filet), 100% var(--filet);
}

.liste-ligne:hover { opacity: 0.55; }

/* un titre ne se replie jamais : il casserait la hauteur de ligne.
   Si la place manque, ajusterTitresTropLongs() réduit son corps. */
.liste-titre  { white-space: nowrap; }
.liste-annees { white-space: nowrap; }

/* ---------- page informations ---------- */

.contenu {
  flex: 1 1 auto;
  margin: 0 var(--marge);
  padding: 4.17vw 0;       /* 80 px de respiration sous le filet du haut
                              et au-dessus de celui du pied */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.texte {
  font-size: var(--corps-informations);
  letter-spacing: -0.05em;
  line-height: 1.28;
  max-width: 100%;
}

.texte p { margin: 0 0 1.2em 0; }
.texte p:last-child { margin-bottom: 0; }

.texte a:hover { opacity: 0.55; }

.texte .script {
  font-family: "Louise", cursive;
  letter-spacing: 0;
}

/* ---------- pied de page ---------- */

.pied {
  flex: 0 0 auto;
  margin: 0 var(--marge) var(--marge) var(--marge);
  padding: 1.1vw 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
  font-size: var(--corps-legende);
  letter-spacing: -0.05em;
  line-height: 1;
  background-image: var(--tiret), var(--tiret);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--filet), 100% var(--filet);
  background-position: top left, bottom left;
}

.pied a:hover { opacity: 0.55; }

/* ---------- page projet : le diaporama ---------- */

.diapo {
  flex: 1 1 auto;
  position: relative;
  margin: 2.1vw var(--marge) 1.6vw var(--marge);
  overflow: hidden;
}

.diapo-vue {
  position: absolute;
  inset: 0;
  display: none;
  cursor: zoom-in;
  background: #000;
}

.diapo-vue.actif { display: block; }

.diapo-vue img,
.diapo-vue video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* les images détourées respirent un peu ; celles dont le noir fait
     partie de l'œuvre occupent tout le cadre, comme dans la maquette */
  padding: 2.6vw;
}

.diapo-vue.sur-noir img,
.diapo-vue video { padding: 0; cursor: default; }

.diapo-fleche {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
  color: #fff;
  font-family: "Neureal Mono", monospace;
  font-size: 2.6vw;
}

.diapo:hover .diapo-fleche { opacity: 0.85; }
.diapo-precedent { left: 0; }
.diapo-suivant { right: 0; }

.diapo-compteur {
  position: absolute;
  right: 1vw;
  bottom: 0.8vw;
  z-index: 2;
  color: #fff;
  font-size: 1.15vw;
  letter-spacing: -0.05em;
  opacity: 0.7;
  pointer-events: none;
}

.diapo-vide {
  position: absolute;
  background: #000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 1.15vw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- plein écran ---------- */

.pleinecran {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.pleinecran[hidden] { display: none; }

.pleinecran img {
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
}

.pleinecran-fleche {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2.6vw;
  cursor: pointer;
  opacity: 0.6;
}

.pleinecran-fleche:hover { opacity: 1; }
.pleinecran .precedent { left: 0; }
.pleinecran .suivant { right: 0; }

/* ---------- responsive ---------- */

@media screen and (max-width: 900px) {

  /* ------------------------------------------------------
     Mobile : mêmes rapports typographiques que le desktop,
     mais chaque élément prend sa propre ligne plutôt que de
     se disputer la largeur. Rien ne se chevauche, rien n'est
     rogné, aucun défilement horizontal.
     ------------------------------------------------------ */

  :root {
    --marge: 5vw;
    --filet: 0.5vw;
    --corps-nav: 7vw;
    --corps-titre: 6.4vw;
    --corps-liste: 5.6vw;
    --corps-texte: 4.6vw;
    --corps-informations: 4.6vw;
    --corps-legende: 4.4vw;
  }

  /* --- en-tête : titre centré, puis la navigation --- */

  .entete {
    display: block;
    padding: var(--marge) var(--marge) 0 var(--marge);
  }

  .entete .titre-courant {
    position: static;
    width: 100%;
    margin: 0 0 3vw 0;
    line-height: 1.1;
  }

  /* la navigation devient une ligne à elle seule, sous le titre */
  .entete .nav-mobile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  /* Louise a de longues hampes : il leur faut de la place */
  .entete a.nav { line-height: 1.35; }

  .entete + .filet,
  .tete .filet { margin: 2.5vw var(--marge) 0 var(--marge); }

  /* --- accueil --- */

  .logo { width: 46vw; height: 46vw; }
  .logo-lockup { width: 49vw; }
  .logo-urgence { font-size: 8.7vw; }
  .logo-graphique { font-size: 12.4vw; }

  /* --- filtres --- */

  .filtres {
    margin: 3.5vw var(--marge) 2vw var(--marge);
    gap: 1.8vw;
    font-size: 4.2vw;
  }

  .filtre {
    padding: 1.6vw 3.6vw 1.9vw 3.6vw;
    border-radius: 20vw;
  }

  /* --- liste : le titre passe à la ligne, l'année en dessous --- */

  .liste { padding-top: 0; }

  .liste-ligne {
    height: auto;                 /* la hauteur suit le titre */
    min-height: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6vw;
    padding: 3.6vw 0;
    line-height: 1.15;
  }

  .liste-titre {
    white-space: normal;          /* le titre se replie au lieu d'être rogné */
    overflow-wrap: break-word;
  }

  .liste-annees { text-align: center; }

  /* --- page projet : toutes les images empilées, en grand --- */

  .diapo {
    margin: 3vw var(--marge);
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 3vw;
    overflow: visible;
  }

  /* chaque image occupe sa propre bande, à sa hauteur naturelle */
  .diapo-vue img { padding: 5vw; }
  .diapo-vue.sur-noir img,
.diapo-vue video { padding: 0; cursor: default; }

  .diapo .diapo-vue {
    position: relative;
    inset: auto;
    display: block;          /* plus de diaporama : tout est visible */
    aspect-ratio: 3 / 2;
  }

  /* le diaporama n'a plus lieu d'être */
  .diapo-fleche,
  .diapo-compteur { display: none; }

  .diapo-vide { position: relative; aspect-ratio: 3 / 2; }

  /* légende : titre puis mention, chacun sur sa ligne, centrés */
  .pied {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6vw;
    padding: 3.2vw 0;
    line-height: 1.2;
  }

  /* --- informations --- */

  .contenu { padding: 6vw 0; }
  .texte { line-height: 1.32; }
}

/* très petits écrans : on desserre encore la liste */
@media screen and (max-width: 420px) {
  :root { --corps-liste: 6vw; }
  .liste-ligne { padding: 4vw 0; }
}