/* ==========================================================================
   Portfolio de Mikaël Mahussier : feuille de style

   Sommaire
   1. Réglages (variables) : c'est ici qu'on change le design
   2. Polices
   3. Base de la page
   4. Boutons
   5. Fond vidéo de l'accueil
   6. Panneau d'accueil et bouton « À propos »
   7. Panneaux qui s'ouvrent par-dessus (sections, projets)
   8. Page de section (grille de vignettes)
   9. Page de projet (texte + galerie)
   10. Panneau « À propos »
   11. Animations d'ouverture et de fermeture
   12. Visionneuse (image en grand)
   13. Petits écrans (téléphone)
   ========================================================================== */


/* 1. Réglages ---------------------------------------------------------------
   Comme les uniformes d'un shader : on change une valeur ici,
   et tout le site suit. */
:root {
  /* Couleurs */
  --couleur-panneau: #fbebda;              /* fond crème des panneaux */
  --couleur-texte: rgba(0, 0, 0, 0.85);    /* noir à 85 % */
  --couleur-filet: rgba(0, 0, 0, 0.15);    /* bordures légères, traits <hr> */
  --couleur-bordure-image: rgba(0, 0, 0, 0.6);
  --couleur-bouton-blanc: #ffffff;
  --couleur-fond-video: #000000;
  --opacite-video: 0.8;

  /* Polices */
  --police-titre: "Sofia Sans Condensed Variable", "Arial Narrow", sans-serif;
  --graisse-titre: 700;
  --interlettrage-titre: -0.015em;
  --police-texte: "Recursive Variable", ui-monospace, monospace;
  --graisse-texte: 350;
  --mono-texte: 0.66;                      /* 0 = lettres proportionnelles, 1 = chasse fixe */

  /* Tailles de texte (en rem, voir --echelle) */
  --taille-texte: 1rem;
  --taille-titre: 4.5rem;
  --interligne-texte: 1.2;

  /* Espacements et formes */
  --marge-panneau: 1.2rem;                 /* espace entre le bord de l'écran et un panneau */
  --interieur-panneau: 1rem;               /* espace entre le bord du panneau et son contenu */
  --ecart: 1rem;                           /* écart entre colonnes et entre images */
  --epaisseur-bordure: 0.1rem;
  --arrondi-panneau: 0.8rem;
  --arrondi-bouton: 0.6rem;
  --arrondi-image: 0.4rem;

  /* Animations */
  --duree-ouverture: 0.3s;
  --duree-a-propos: 0.35s;
  --courbe: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Échelle : 1rem vaut 0,712 % de la largeur de la fenêtre (13,6 px sur un écran de 1910 px),
     comme sur le site Cargo. Tout le site grandit et rétrécit avec la fenêtre, comme un plan à l'échelle. */
  --echelle: 0.712vw;
}


/* 2. Polices ----------------------------------------------------------------
   Polices libres (licence SIL Open Font License), fichiers dans assets/polices.
   « unicode-range » : le navigateur ne télécharge le second fichier que si la page
   contient des caractères rares (latin étendu). */
@font-face {
  font-family: "Recursive Variable";
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url("../assets/polices/recursive-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Recursive Variable";
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url("../assets/polices/recursive-latin-etendu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans Condensed Variable";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../assets/polices/sofia-sans-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Condensed Variable";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../assets/polices/sofia-sans-condensed-latin-etendu.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 3. Base de la page ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* la bordure et le padding sont comptés dans la largeur */
}

html {
  font-size: var(--echelle);
}

body {
  margin: 0;
  background: var(--couleur-fond-video);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-weight: var(--graisse-texte);
  font-size: var(--taille-texte);
  line-height: var(--interligne-texte);
  font-variation-settings: "MONO" var(--mono-texte);
}

h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--taille-titre);
  line-height: 1;
  letter-spacing: var(--interlettrage-titre);
  font-variation-settings: normal;
}

p {
  margin: 0 0 1.2em;
}

hr {
  height: 1px;
  margin: 0.8rem 0;
  border: 0;
  background: var(--couleur-filet);
}

a {
  color: inherit;
}

/* Liens dans les textes : soulignés discrètement */
.texte a {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 0.15em;
}

/* Pendant l'appui, liens et vignettes passent à 70 % d'opacité (comme sur Cargo) */
a:active {
  opacity: 0.7;
}

/* Contour visible quand on navigue au clavier (touche Tab) */
:focus-visible {
  outline: 2px solid var(--couleur-texte);
  outline-offset: 2px;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

/* Texte réservé aux lecteurs d'écran (invisible à l'œil) */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 4. Boutons ----------------------------------------------------------------
   Un seul modèle de bouton, avec deux variantes : large et blanc. */
.bouton {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: var(--epaisseur-bordure) solid var(--couleur-filet);
  border-radius: var(--arrondi-bouton);
  background: none;
  color: var(--couleur-texte);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.bouton-large {
  display: block;
  text-align: center;
}

.bouton-blanc {
  border-color: var(--couleur-bordure-image);
  background: var(--couleur-bouton-blanc);
}


/* 5. Fond vidéo de l'accueil ----------------------------------------------- */
.fond-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* couvre tout l'écran, quitte à rogner les bords */
  opacity: var(--opacite-video);
}


/* 6. Panneau d'accueil et bouton « À propos » ------------------------------ */
.cadre {
  /* La « carte » crème qu'on retrouve partout */
  padding: var(--interieur-panneau);
  border: var(--epaisseur-bordure) solid var(--couleur-filet);
  border-radius: var(--arrondi-panneau);
  background: var(--couleur-panneau);
}

.accueil {
  position: fixed;
  top: 0;
  left: 0;
  width: 33.33%;
  padding: var(--marge-panneau);
}

.accueil h1 {
  line-height: 0.8;
  width: max-content;  /* le titre prend la largeur de son texte...            */
  white-space: nowrap; /* ...et titre-ajuste.js règle sa taille pour remplir le panneau */
  margin-bottom: 2.4rem;
}

.accueil-boutons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lien-a-propos {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.5rem; /* écart entre le bouton de langue et « À propos » */
  padding: var(--marge-panneau);
}

.lien-a-propos .bouton {
  border-color: #858585;
  background: var(--couleur-panneau);
}


/* 7. Panneaux qui s'ouvrent par-dessus ---------------------------------------
   « calque » = toute la fenêtre, qu'on peut faire défiler.
   Un clic sur le calque, en dehors du panneau, le ferme. */
.calque {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: var(--marge-panneau);
  visibility: hidden;
  /* on attend la fin de l'animation de fermeture avant de cacher le calque */
  transition: visibility 0s linear var(--duree-a-propos);
}

.calque.ouvert {
  visibility: visible;
  transition-delay: 0s;
}

.calque .panneau {
  min-height: calc(100vh - 2 * var(--marge-panneau));
}

.panneau:focus {
  outline: none;
}

.barre-haut {
  display: flex;
  justify-content: space-between;
  gap: var(--ecart);
  margin-bottom: 2.4rem;
}

/* Boutons de droite de la barre (section suivante, langue) */
.barre-droite {
  display: flex;
  gap: var(--ecart);
}

/* Projet précédent / suivant, en bas de chaque projet */
.projet-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--ecart);
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--couleur-filet);
}

/* Grille de 12 colonnes, comme dans Cargo */
.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ecart);
  align-items: start;
}


/* 8. Page de section ------------------------------------------------------- */
.colonne {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.vignette {
  display: block;
  text-decoration: none;
}

.vignette img {
  width: 100%;
  height: auto;
  border: var(--epaisseur-bordure) solid var(--couleur-bordure-image);
  border-radius: var(--arrondi-image);
}

.vignette h2 {
  margin: 0.5em 0 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--taille-titre);
  line-height: 1;
  letter-spacing: var(--interlettrage-titre);
}


/* 9. Page de projet --------------------------------------------------------- */
.projet-texte {
  grid-column: span 4;
}

.projet-medias {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
}

.projet-texte h1 {
  margin-bottom: 0.2em;
}

.date {
  font-style: italic;
  margin-bottom: 2.4rem;
}

/* Galerie « justifiée » : dans une rangée, toutes les images ont la même hauteur
   et remplissent la largeur. Astuce : chaque média reçoit une part de largeur
   proportionnelle à son rapport largeur/hauteur (--ratio, réglé par le script).
   Comme des planches de largeurs différentes ajustées dans un même cadre. */
.rangee {
  display: flex;
  gap: var(--ecart);
  align-items: flex-start;
}

.media {
  flex: var(--ratio) 1 0;
  min-width: 0;
  margin: 0;
}

.media img,
.media video,
.media iframe {
  width: 100%;
  height: auto;
  border: var(--epaisseur-bordure) solid var(--couleur-bordure-image);
  border-radius: var(--arrondi-image);
}

.media iframe {
  aspect-ratio: 16 / 9;
}

/* Aperçu YouTube quand le site est ouvert par double-clic (voir js/affichage.js) */
.youtube-apercu {
  position: relative;
  display: block;
}

.media .youtube-apercu img {
  aspect-ratio: 16 / 9;
  object-fit: cover; /* rogne les bandes noires de l'image fournie par YouTube */
}

.youtube-apercu span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 1.2rem;
  border-radius: var(--arrondi-bouton);
  background: var(--couleur-bouton-blanc);
  border: var(--epaisseur-bordure) solid var(--couleur-bordure-image);
}

.media figcaption {
  margin-top: 0.5em;
}


/* 10. Panneau « À propos » -------------------------------------------------- */
.calque-a-propos {
  padding: 0;
}

.calque-a-propos .panneau {
  width: 33.33%;
  min-height: calc(100vh - 3.6rem);
  margin: 1.8rem 1.8rem 1.8rem auto; /* « auto » à gauche pousse le panneau à droite */
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.05);
}

.a-propos-haut {
  display: flex;
  justify-content: flex-end;
}

.calque-a-propos h1 {
  margin-bottom: 4.8rem;
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--interligne-texte);
  font-variation-settings: "MONO" var(--mono-texte);
}

.a-propos-intro {
  margin-bottom: 3.6rem;
}

.a-propos-contact {
  margin-top: 3.6rem;
}


/* 11. Animations -------------------------------------------------------------
   Ouverture : le panneau monte de 3 % en apparaissant.
   Fermeture : il redescend en s'effaçant. */
.calque .panneau {
  opacity: 0;
  transform: translateY(3%);
  transition:
    opacity var(--duree-ouverture) var(--courbe),
    transform var(--duree-ouverture) var(--courbe);
}

.calque.ouvert .panneau {
  opacity: 1;
  transform: none;
}

/* « À propos » glisse depuis la droite */
.calque-a-propos .panneau {
  transform: translateX(100%);
  transition:
    opacity var(--duree-a-propos) var(--courbe),
    transform var(--duree-a-propos) var(--courbe);
}

/* Si l'ordinateur demande de réduire les animations, on les coupe */
@media (prefers-reduced-motion: reduce) {
  .calque .panneau,
  .calque-a-propos .panneau {
    transition: none;
  }
}


/* 12. Visionneuse -------------------------------------------------------------
   Fond sombre plein écran, image la plus grande possible sans la déformer. */
.media img {
  cursor: zoom-in; /* la loupe indique qu'on peut cliquer pour agrandir */
}

.visionneuse {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
}

.visionneuse::backdrop {
  background: transparent;
}

.visionneuse[open] {
  animation: visionneuse-apparition 0.25s var(--courbe);
}

@keyframes visionneuse-apparition {
  from { opacity: 0; }
}

.visionneuse-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4rem 6rem;
}

.visionneuse-scene img {
  /* l'image tient dans l'écran, moins la place des boutons */
  max-width: calc(100vw - 12rem);
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--arrondi-image);
}

.visionneuse-legende,
.visionneuse-compteur {
  position: absolute;
  bottom: 1.2rem;
  margin: 0;
}

.visionneuse-legende {
  left: 1.2rem;
  right: 8rem;
}

.visionneuse-compteur {
  right: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.visionneuse-bouton {
  position: absolute;
  padding: 0.6rem 1rem;
  border: var(--epaisseur-bordure) solid rgba(255, 255, 255, 0.4);
  border-radius: var(--arrondi-bouton);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.visionneuse-bouton:hover {
  background: rgba(255, 255, 255, 0.15);
}

.visionneuse-fermer {
  top: 1.2rem;
  right: 1.2rem;
}

.visionneuse-precedente,
.visionneuse-suivante {
  top: 50%;
  transform: translateY(-50%);
}

.visionneuse-precedente {
  left: 1.2rem;
}

.visionneuse-suivante {
  right: 1.2rem;
}


/* 13. Petits écrans (téléphone) -----------------------------------------------
   Pensé pour le pouce plutôt que copié de Cargo :
   - texte à taille fixe et lisible (plus de mise à l'échelle) ;
   - boutons hauts et pleine largeur, faciles à toucher ;
   - la barre « Fermer / section suivante » reste collée en haut pendant le défilement ;
   - une image par ligne, en pleine largeur, et un toucher l'ouvre en grand. */
@media (max-width: 800px) {
  :root {
    --echelle: 15px;
    --taille-titre: 2.8rem;
    --marge-panneau: 0.5rem;
    --interieur-panneau: 0.9rem;
    --ecart: 0.6rem;
  }

  /* Accueil : le panneau en haut, les trois sections en gros boutons empilés */
  .accueil {
    width: 100%;
  }

  .accueil h1 {
    margin-bottom: 1.2rem;
  }

  .accueil-boutons {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .accueil-boutons .bouton {
    padding: 0.9rem 1rem;
  }

  .lien-a-propos .bouton {
    padding: 0.9rem 1.4rem;
  }

  /* Barre du haut collée pendant le défilement, sur toute la largeur du panneau */
  .barre-haut {
    position: sticky;
    top: calc(-1 * var(--marge-panneau)); /* colle au bord de l'écran, par-dessus la marge */
    z-index: 1;
    margin: calc(-1 * var(--interieur-panneau)) calc(-1 * var(--interieur-panneau)) 1.2rem;
    padding: var(--interieur-panneau);
    border-radius: var(--arrondi-panneau) var(--arrondi-panneau) 0 0;
    background: var(--couleur-panneau);
    border-bottom: 1px solid var(--couleur-filet);
  }

  .barre-haut .bouton {
    padding: 0.7rem 1.1rem;
  }

  .barre-droite {
    gap: 0.5rem;
  }

  /* Précédent / suivant : l'un au-dessus de l'autre, sur toute la largeur */
  .projet-navigation {
    flex-direction: column;
  }

  /* Tout passe sur une seule colonne */
  .grille,
  .rangee {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .colonne {
    gap: 1.6rem;
  }

  .media {
    flex: none;
  }

  .projet-texte .date {
    margin-bottom: 1.2rem;
  }

  .projet-medias {
    margin-top: 1rem;
  }

  /* « À propos » prend tout l'écran */
  .calque-a-propos .panneau {
    width: auto;
    min-height: calc(100vh - 2 * var(--marge-panneau));
    margin: var(--marge-panneau);
  }

  .calque-a-propos h1,
  .a-propos-intro {
    margin-bottom: 2rem;
  }

  /* Visionneuse : l'image prend toute la largeur, boutons en bas sous le pouce */
  .visionneuse-scene {
    padding: 4rem 0.5rem;
  }

  .visionneuse-scene img {
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 12rem);
  }

  .visionneuse-precedente,
  .visionneuse-suivante {
    top: auto;
    bottom: 3.2rem;
    transform: none;
    padding: 0.8rem 1.4rem;
  }
}