/* ============================================================
   BASE DU SITE TOM CANTOT
   ============================================================ */

@font-face {
  font-family: 'Amoria';
  src: url('../fonts/Amoria-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Reset de base : supprime les marges/paddings par défaut du navigateur */
* {
  margin: 0;
  padding: 0;
}

/* Variables globales de couleurs et polices (starterkit) */
:root {
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: #D4EEF8;
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* Styles de base HTML (police par défaut, fond, couleur de texte) */
html {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-background);
}
img {
  width: 100%;
  height: auto;
}
/* Conteneur central de toutes les pages (largeur max + marge auto) */
body {
  padding: var(--padding);
  max-width: 70rem;
  margin: 0 auto;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}

/* Classes utilitaires génériques */
.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}

/* --- Header générique du starterkit (remplacé plus bas par ta version épurée) --- */
.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -1rem;
  margin-left: -1rem;
  margin-bottom: 6rem;
}

.logo {
  padding: 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.menu {
  display: flex;
}
.menu a {
  padding: 1rem;
  display: block;
}
.menu a[aria-current] {
  text-decoration: underline;
}

.social {
  display: flex;
  padding: 0 .5rem;
}
.social a {
  padding: 1rem .5rem;
}

/* --- Système de grille du starterkit (utilisé par le champ "layout" Kirby) --- */
.section {
  padding: 3rem 0;
}

.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

/* Les titres héritent de la taille/graisse du contexte (surchargés au cas par cas) */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- Styles des blocs de texte Kirby (.text = contenu généré par l'éditeur Blocks) --- */
.text {
  line-height: 1.5em;
}
.text a {
  text-decoration: underline;
}
.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
  margin-bottom: 1.5rem;
}
.text ul,
.text ol {
  margin-left: 1rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  list-style: disc;
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.h1,
.intro {
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.25em;
}
.text h2,
.h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.text h3,
.h3 {
  font-weight: 600;
}
.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}
.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 3rem 0;
}
.text figcaption {
  padding-top: .75rem;
  font-style: italic;
  color: var(--color-text-grey);
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

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

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

/* --- Conteneurs image/vidéo à ratio fixe (starterkit) --- */
.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
  font-style: italic;
}

/* --- Footer générique du starterkit (remplacé plus bas par ta version épurée) --- */
.footer {
  padding: 9rem 0 6rem;
  line-height: 1.5em;
}
/* TIRET EN BAS DE PAGE 
.footer:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}*/

.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
  color: var(--color-text-grey);
}
.footer p {
  max-width: 15rem;
}
.footer a:hover {
  color: var(--color-text);
}

/* --- Carte Google Maps (si utilisée) --- */
.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Classes utilitaires de marges --- */
.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}

/* Grille en 12 colonnes activée uniquement à partir de 60rem (~960px) */
@media screen and (min-width: 60rem) {
  body {
    --padding: 3rem;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
}

/* --- Pagination (page suivante / précédente sur la liste de notes) --- */
.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text-grey);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* --- Carte "aperçu" d'une note dans la grille (structure de base du starterkit) ---
   Les styles visuels de la cover (texture, fond) sont personnalisés plus bas
   dans la section "LISTE DE PROJETS". */
.note-excerpt {
  line-height: 1.5em;
}
.note-excerpt header {
  margin-bottom: 1.5rem;
}
.note-excerpt figure {
  margin-bottom: .5rem;
}
.note-excerpt-title {
  font-weight: 600;
}
.note-excerpt-date {
  font-style: italic;
  color: var(--color-text-grey);
}

/* --- PDF d'un projet (note.php) : lecteur natif du navigateur en
   iframe, lisible directement sur la page sans téléchargement. --- */
.note-pdf {
  margin: 2rem 0;
}
.note-pdf iframe {
  display: block;
  width: 100%;
  height: 85vh;
  border: 1px solid var(--color-light);
  border-radius: 4px;
}
.note-pdf-fallback {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-decoration: underline;
  color: var(--color-text-grey);
}

/* Intertitres et dates écrits "à la main" dans le texte d'une note
   (convention "## Titre" / ">date<", cf. note.php qui les repère et
   leur pose ces classes) : IBM Plex Sans non gras, en bleu, plus
   grand que le corps de texte pour les intertitres. */
.note-inline-heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5em;
  color: var(--color-duotone-ardoise-text);
  margin-top: 2rem;
}
.note-inline-date {
  font-style: italic;
  color: var(--color-duotone-ardoise-text);
}

/* -- Mise en page "texte + marge droite" d'une note --------------
   TOUT le contenu (texte, images, galeries, vidéos...) est plafonné
   à une colonne de largeur confortable ; l'espace libre à droite de
   cette colonne reste vide et sert uniquement de marge pour le bloc
   "Image en marge" (seul élément autorisé à en sortir). -- */
.note.text {
  max-width: 42rem;
}

/* Bloc "Image en marge" : sort volontairement de la colonne de texte
   (marge négative) pour flotter dans l'espace vide à droite, à la
   hauteur où le bloc est inséré. Sélecteur renforcé (.note.text
   figure.note-margin-image) pour l'emporter sur ".text figure"
   (margin: 3rem 0) plus haut dans ce fichier, plus spécifique qu'un
   simple ".note-margin-image". */
.note.text figure.note-margin-image {
  float: right;
  clear: right;
  width: 280px;
  margin: 0.25rem 0 1.5rem 2rem;
  margin-right: -320px;
}
.note-margin-image img {
  display: block;
  width: 100%;
  height: auto;
}
.note-margin-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-grey);
}

/* En dessous de cette largeur, la colonne de texte (42rem) + la
   marge qui sort de son côté droit ne tiennent plus dans l'écran :
   l'image en marge repasse dans le flux normal, pleine largeur. */
@media screen and (max-width: 72rem) {
  /* Sélecteur aussi spécifique que ".note.text figure.note-margin-image"
     ci-dessus (règle desktop) : un simple ".note-margin-image" ici serait
     toujours perdant dans la cascade et cette règle ne s'appliquerait
     jamais, à aucune largeur d'écran. */
  .note.text figure.note-margin-image {
    float: none;
    width: 100%;
    margin: 1.5rem 0;
  }
}

/* Bloc "Fichiers en marge" : liste de fichiers téléchargeables (ex.
   des .zip), chacun avec sa description (issue du champ "Description"
   propre au fichier). Même principe de sortie en marge que l'image
   en marge ci-dessus. */
.note.text .note-margin-files {
  float: right;
  clear: right;
  width: 280px;
  margin: 0.25rem 0 1.5rem 2rem;
  margin-right: -320px;
}
.note-margin-files ul {
  list-style: none;
}
.note.text .note-margin-files li {
  list-style: none;
  margin-bottom: 1.5rem;
}
.note-margin-files li:last-child {
  margin-bottom: 0;
}
.note-margin-files-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-black);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-black);
}
.note-margin-files-name {
  overflow-wrap: anywhere;
}
.note-margin-files-size {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-grey);
  white-space: nowrap;
}
.note-margin-files-caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-grey);
}

@media screen and (max-width: 72rem) {
  .note.text .note-margin-files {
    float: none;
    width: 100%;
    margin: 1.5rem 0;
  }
}

/* Bloc "Image + texte côte à côte" : pleine largeur du conteneur,
   image et texte en deux colonnes ; "position" (gauche/droite,
   réglée dans le bloc) inverse leur ordre. */
.note-side-by-side {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.note-side-by-side--right {
  flex-direction: row-reverse;
}
.note-side-by-side-image {
  flex: 0 0 42%;
}
.note-side-by-side-image img {
  display: block;
  width: 100%;
  height: auto;
}
.note-side-by-side-text {
  flex: 1;
  max-width: none;
}

@media screen and (max-width: 60rem) {
  .note-side-by-side,
  .note-side-by-side--right {
    flex-direction: column;
  }
  .note-side-by-side-image {
    flex-basis: auto;
    width: 100%;
  }
}

/* Bloc "Galerie légendée" : grille responsive, une légende par
   image (issue du champ "Caption" propre à chaque fichier), à la
   différence de la galerie standard qui n'a qu'une légende globale. */
.gallery--captioned ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  list-style: none;
}
.gallery--captioned li img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery--captioned figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-grey);
}

/* Bloc "Galerie" standard : sans la limite de hauteur ci-dessous,
   une image au format très vertical (ex. un schéma en portrait)
   s'affiche à la largeur de sa colonne de grille tout en gardant
   son ratio d'origine, ce qui la rend démesurément haute et fait
   prendre à la galerie beaucoup trop de place dans la page. */
.gallery:not(.gallery--captioned) li img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 24rem;
  margin: 0 auto;
}


/* ============================================================
   STYLE PORTFOLIO PERSONNALISÉ
   Tout ce qui suit a été ajouté/modifié par toi par-dessus le
   starterkit. C'est ici que se trouvent 95% des réglages que tu
   voudras retoucher.
   ============================================================ */


/* ------------------------------------------------------------
   1. POLICES & VARIABLES DU PORTFOLIO
   - Amoria : la police-titre "gravée" (chargée plus haut via @font-face)
   - IBM Plex Sans : la police de texte courant
   - Les couleurs "duotone-*" servent aux thèmes de couleur par
     projet (olive / rose / violet / bleu), utilisées sur la
     page de chaque projet.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

:root {
  --font-title: 'Amoria', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  /* Palette de teinte des projets : tons terreux/doux qui complètent
     le fond jaune pastel (plutôt que des couleurs vives type rouge/
     bleu/vert qui "jurent" avec le fond). */
  --color-duotone-terracotta: #c17c5b;
  --color-duotone-terracotta-tint: #0080FF;
  --color-duotone-terracotta-text: #0080FF;
  --color-duotone-sauge: #7f9473;
  --color-duotone-sauge-tint: #0080FF;
  --color-duotone-sauge-text: #0080FF;
  --color-duotone-ardoise: #6b8ca3;
  --color-duotone-ardoise-tint: #0080FF;
  --color-duotone-ardoise-text: #0080FF;
  --color-turbine: #4a8b3f;
  --color-hover-dark: #333;
}

/* Applique la police de texte courant (IBM Plex Sans) aux zones de texte,
   au header et au footer */
.text,
.project-meta,
.header,
.home-header,
.footer {
  font-family: var(--font-body);
}


/* ------------------------------------------------------------
   2. EN-TÊTE DU SITE (header épuré + logo + menu déroulant)
   Concerne : le bandeau fixe en haut de toutes les pages, avec
   le badge "Accueil" à gauche et le bouton menu à droite.
   ------------------------------------------------------------ */

/* Bandeau fixe en haut de l'écran */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem;
  margin: 0;
}

/* Pousse le contenu de la page sous le header fixe */
.main {
  padding-top: 4rem;
}

/* Icône "Accueil" en haut à gauche */
.home-badge {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.home-badge:hover {
  transform: scale(1.05);
}
.home-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Bouton menu (sprite animé en haut à droite) */
.menu-toggle {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  background-image: url('../img/menu-sprite.png');
  background-repeat: no-repeat;
  background-size: 5200% 100%;
  background-position: 0% 0;
}
.menu-toggle:hover {
  transform: scale(1.05);
}

/* Anime le sprite du bouton menu à l'ouverture/fermeture (classes ajoutées en JS) */
.menu-toggle.is-open {
  animation: menu-sprite-play 0.9s steps(51) forwards;
}
.menu-toggle.is-closing {
  animation: menu-sprite-play 0.9s steps(51) reverse forwards;
}

@keyframes menu-sprite-play {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* Menu déroulant (liste des pages du site) */
.menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  flex-direction: column;
  background: var(--color-white);
  min-width: 14rem;
  padding: 0.5rem 0;
  z-index: 10;
}
.menu.is-open {
  display: flex;
}
.menu a {
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  isolation: isolate;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-black);
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu a:hover,
.menu a:focus-visible {
  color: var(--color-white);
  padding-left: 1.5rem;
}
.menu a:hover::before,
.menu a:focus-visible::before {
  opacity: 1;
}


/* ------------------------------------------------------------
   3. PAGE D'ACCUEIL (hero "PORT FOLIO")
   Concerne : uniquement la page d'accueil (template photography.php),
   le grand titre + la ligne d'infos (sous-titre / nom / année).
   ------------------------------------------------------------ */

.home-hero {
  min-height: 100vh;
  margin-top: -4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%
}

/* Gros titre "Tom cantot" avec la texture pointillée */
.home-title {
  font-family: var(--font-title);
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0 0 1rem;
  color: #6b6b2e;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

/* Ligne "Design espace et objet — Cantôt Tom — 2026" sous le titre */
.home-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-top: 1px solid var(--color-black);
  margin-top: 4rem;
  position: relative; /* nécessaire pour positionner .home-name au centre */
}

.home-meta-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
}

/* Nom affiché seul sous l'icône du hero d'accueil */
.home-name {
  margin-top: -2rem;
  width: auto;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #6b6b2e;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 71px 51px;
  mask-size: 71px 51px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}


/* ------------------------------------------------------------
   4. TITRES DE PAGE GÉNÉRIQUES (ex. "Projets")
   Concerne : le titre en haut de la page de liste des projets
   (et toute autre page utilisant le snippet intro.php avec
   template "notes"). Même effet visuel que .project-title et
   .home-title mais avec un motif plus petit adapté à la taille
   de police plus réduite.
   ------------------------------------------------------------ */

.page-heading-back,
.note-back {
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.page-heading-back:hover,
.note-back:hover {
  transform: translateX(-0.25rem);
}

/* .note-back sits outside any masked ancestor, so it carries its
   own trame; .page-heading-back is a descendant of the already-
   masked .page-heading and inherits that texture directly. */
.note-back {
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

.page-heading {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  padding: 0.3em 0;
  color: var(--color-black);
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}


/* ------------------------------------------------------------
   5. LISTE DE PROJETS / CARTES (grille "Projets")
   Concerne : la photo de couverture de chaque carte-projet dans
   la grille (snippet note.php -> .note-excerpt-cover).
   ------------------------------------------------------------ */

/* Fond blanc derrière l'image, pour que les "trous" du masque
   n'affichent pas de zones noires */
.note-excerpt-cover {
  background: var(--color-code-white);
}

/* Texture pointillée appliquée sur la photo de couverture */
.note-excerpt-cover img {
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}


/* ------------------------------------------------------------
   6. PAGE PROJET INDIVIDUEL — TITRE + COULEURS "DUOTONE"
   Concerne : le titre en haut de la page d'un projet
   (snippet project-content.php -> .project-title), et sa couleur
   selon le champ "color" choisi dans le panel (olive/rose/violet).
   ------------------------------------------------------------ */

/* Les liens directs vers un projet (sous "PORTFOLIO"/"← Scénographie"
   sur la home) pointent vers l'ancre #slug de son <article> : décale
   le point d'arrivée du scroll pour que le titre ne colle pas au bord
   haut de l'écran. */
[id] {
  scroll-margin-top: 2rem;
}

.project-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin-bottom: 2rem;
  color: var(--color-black);
  overflow-wrap: anywhere;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

.duotone-terracotta .project-title {
  color: var(--color-duotone-terracotta-text);
}
.duotone-ardoise .project-title {
  color: var(--color-duotone-ardoise-text);
}
.duotone-sauge .project-title {
  color: var(--color-duotone-sauge-text);
}

/* Titre d'une page "note" individuelle (rubrique Projets) : même
   traitement que .project-title ci-dessus (typo Amoria, grande
   taille, trame pointillée façon logo "TOM"), mais toujours en noir
   — pas de teinte "duotone" ici. */
.note-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.note-header-titles {
  flex: 1;
}
.note-subheading {
  margin-top: 0.5rem;
  font-style: italic;
}

/* Flèche "retour" vers Projets, sur chaque page de la rubrique :
   même trame pointillée que les titres/le logo "TOM", assez grande
   pour avoir le même poids visuel que les autres flèches du site. */
.note-back {
  flex-shrink: 0;
  display: block;
  font-size: 5rem;
}
.note-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--color-black);
  overflow-wrap: break-word;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

/* ------------------------------------------------------------
   7. PAGE PROJET — MISE EN PAGE UNIFIÉE (3 colonnes)
   Une seule disposition pour tous les projets, home et page
   individuelle confondues : colonne 1 = toutes les images (2fr),
   colonne 2 = texte (1fr), colonne 3 = vidéo si présente, sinon
   laissée vide (1fr). Remplace les anciens systèmes "column /
   grid / split / double / libre" choisis au cas par cas.
   ------------------------------------------------------------ */

.project-columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gutter, 3rem);
  align-items: start;
}

.project-col-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.project-hero,
.project-hero a {
  display: block;
}
.project-hero img {
  width: 100%;
  height: auto;
  display: block;
}
/* Le reste des images (après la première, en couverture) se range en
   grille 2 colonnes — "grand format" mais sans qu'une longue galerie
   n'étire la page à l'infini en une seule colonne verticale.
   "align-items: start" (plutôt que le "stretch" par défaut d'une
   grille CSS) empêche chaque case d'être étirée à la hauteur de la
   plus grande image de sa rangée : sans ça, l'image elle-même garde
   sa hauteur naturelle mais la case (sur laquelle est posée la teinte
   "duotone", cf. plus loin) reste plus grande d'un côté et la teinte
   déborde dans le vide au lieu de coller à la photo. Aucun recadrage
   ici — chaque photo garde ses proportions d'origine. */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.project-gallery a {
  display: block;
}
.project-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.project-col-text {
  font-size: 1rem;
  line-height: 1.7;
}
/* Une longue URL sans espace (cf. meta du projet "mdlvref") forçait un
   débordement horizontal ; scopé au lien lui-même plutôt qu'à toute la
   colonne pour ne pas fausser le calcul de largeur minimale de la
   grille CSS parente. */
.project-col-text a {
  overflow-wrap: anywhere;
}
.project-col-text .project-meta {
  font-style: italic;
  font-weight: 500;
  margin-top: 2rem;
  display: block;
}

.project-col-video {
  align-self: start;
}


/* ------------------------------------------------------------
   8. TEXTE D'INTRODUCTION DU PORTFOLIO (page d'accueil)
   ------------------------------------------------------------ */

.portfolio-intro {
  width: 100%;
  margin: 0 0 6rem;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.7;
}


/* ------------------------------------------------------------
   9. FOOTER PERSONNALISÉ (réseaux sociaux + pages)
   ------------------------------------------------------------ */

/* Bande paysage animée (pixel art) à la place du trait de séparation
   d'origine. image-rendering:pixelated pour rester nette en la mettant
   à l'échelle, quelle que soit la largeur réelle de la page. */
/* Tuilé en arrière-plan à sa résolution native (répété, pas étiré) :
   un <img width:100%> sur une image source de 480px de large devenait
   flou/pixelisé dès que le footer dépassait cette largeur à l'écran. */
.footer-strip {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 4rem;
  background-image: url('../img/footer/footer-strip.gif');
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 64px;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 0;
  font-size: 0.9rem;
}
.footer-contact p {
  margin-bottom: 0.25rem;
}
.footer-pages,
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-social a,
.footer-pages a {
  text-decoration: underline;
}
.footer-copyright {
  padding-bottom: 2rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-text-grey);
}


/* ------------------------------------------------------------
   10. RESPONSIVE — ÉCRANS ÉTROITS (< 60rem / ~960px)
   Concerne : réduction de taille du badge/menu (le passage en une
   seule colonne des projets est géré par ".project-columns" plus
   loin dans ce fichier).
   ------------------------------------------------------------ */

@media screen and (max-width: 60rem) {
  .home-badge,
  .menu-toggle {
    width: 3rem;
    height: 3rem;
  }
}

/* ===== BOUTON RETOUR EN HAUT ===== */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 90;
  cursor: pointer;
}
.back-to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-black);
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 102px 82px;
  mask-size: 102px 82px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
  transition: background-color 0.2s ease;
}
.back-to-top:hover::before {
  background-color: var(--color-hover-dark);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  position: relative;
}

@media screen and (max-width: 60rem) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ===== HERO ACCUEIL : icône + soleil animé ===== */
.home-hero-icon {
  position: relative;
  width: min(55vw, 370px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.home-hero-house {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.home-hero-sun {
  position: absolute;
  top: -3%;
  left: -12%;
  width: 24%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  animation: sun-pulse 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media screen and (max-width: 60rem) {
  .home-hero-icon {
    width: min(70vw, 280px);
  }
}

/* ------------------------------------------------------------
   OISEAUX ANIMÉS (page d'accueil)
   Silhouette pixel-art vue de 3/4 (corps + tête + bec + queue
   fourchue + une seule aile visible). Le battement se fait en
   alternant deux frames d'aile (haute/basse), comme un sprite
   2 images. Le vol traverse l'écran lentement, par groupe de 3,
   toutes les 12 secondes.
   ------------------------------------------------------------ */

.bird-flock {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.bird {
  position: absolute;
  fill: var(--color-duotone-ardoise-text);
  shape-rendering: crispEdges;
  opacity: 0;
  animation: bird-fly 18s linear infinite;
}

.bird-1 { top: 24%; animation-delay: 0s; }
.bird-2 { top: 32%; animation-delay: 0.6s; }
.bird-3 { top: 19%; animation-delay: 1.2s; }

/* Vol lent : apparaît, traverse l'écran, disparaît jusqu'au prochain cycle */
@keyframes bird-fly {
  0%   { opacity: 0; left: -8%;  transform: translateY(0); }
  3%   { opacity: 1; }
  55%  { left: 108%; transform: translateY(-40px); }
  58%  { opacity: 0; }
  100% { opacity: 0; left: -8%; }
}

/* Battement d'ailes : 2 frames alternées, rythme rapide et sec (rétro) */
.wing-up,
.wing-down {
  animation: wing-flap 0.28s steps(1) infinite;
}
.wing-down {
  animation-direction: reverse;
}
@keyframes wing-flap {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media screen and (max-width: 60rem) {
  .bird-3 {
    display: none;
  }
}

/* ------------------------------------------------------------
   TEINTE DUOTONE SUR LES PHOTOS (reproduit le calque Colorize
   de Photoshop) — disparaît au survol pour révéler la photo
   d'origine. S'applique automatiquement à n'importe quel
   conteneur direct d'une image, quelle que soit la mise en page.
   ------------------------------------------------------------ */

.duotone-terracotta :has(> img),
.duotone-ardoise :has(> img),
.duotone-sauge :has(> img),
.duotone-terracotta :has(> iframe),
.duotone-ardoise :has(> iframe),
.duotone-sauge :has(> iframe) {
  position: relative;
}

/* Vidéos (iframe) : pas de transparence à gérer, donc la technique
   d'origine suffit — la teinte (::after) blend contre l'iframe réelle
   juste derrière elle via mix-blend-mode. */
.duotone-terracotta :has(> iframe)::after,
.duotone-ardoise :has(> iframe)::after,
.duotone-sauge :has(> iframe)::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Images : une image PNG sans fond n'a pas de "vraie" zone derrière elle
   pour blend via mix-blend-mode une fois masquée (voir plus bas) — Chrome
   ne recompose pas correctement mix-blend-mode + mask sur le même sous-
   arbre. On reproduit donc le calque Colorize avec deux couches de
   background sur ::after lui-même (le dégradé plein-teinte par-dessus,
   la photo — via --tint-mask, cf. project-content.njk — en dessous)
   blendées par background-blend-mode, puis on masque ce ::after avec
   cette même photo en mode alpha : une PNG transparente n'est alors
   teintée que là où elle a réellement des pixels ; --tint-mask absent
   (mask-image:none) laisse une photo opaque intacte, sans découpe. */
.duotone-terracotta :has(> img)::after,
.duotone-ardoise :has(> img)::after,
.duotone-sauge :has(> img)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  /* The photo layer (and the mask below) use `cover`, not `100% 100%`, to
     match the real <img>'s own object-fit:cover — needed wherever the box
     has a fixed aspect-ratio different from the source image's natural
     one (the video thumbnail, note covers forced to 16:9): a plain stretch
     showed the source's untouched proportions (e.g. YouTube's letterboxed
     hqdefault.jpg) instead of the same crop the visible photo already has. */
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-blend-mode: color;
  -webkit-mask-image: var(--tint-mask, none);
  mask-image: var(--tint-mask, none);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

/* Teinte rouge */
.duotone-terracotta :has(> img)::after {
  background-image: linear-gradient(var(--color-duotone-terracotta-tint), var(--color-duotone-terracotta-tint)), var(--tint-mask, none);
}
.duotone-terracotta :has(> iframe)::after {
  background: var(--color-duotone-terracotta-tint);
}
.duotone-terracotta img,
.duotone-terracotta iframe {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}
/* :not(.note-excerpt) so the tint stays fixed on the Projets grid cards -
   the hover-reveal is meant for a project's own page, not for browsing a
   list of thumbnails where it would flicker on/off as the mouse moves. */
.duotone-terracotta:not(.note-excerpt) :has(> img):hover::after,
.duotone-terracotta:not(.note-excerpt) :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte bleu */
.duotone-ardoise :has(> img)::after {
  background-image: linear-gradient(var(--color-duotone-ardoise-tint), var(--color-duotone-ardoise-tint)), var(--tint-mask, none);
}
.duotone-ardoise :has(> iframe)::after {
  background: var(--color-duotone-ardoise-tint);
}
.duotone-ardoise img,
.duotone-ardoise iframe {
  filter: brightness(1.05);
}
.duotone-ardoise:not(.note-excerpt) :has(> img):hover::after,
.duotone-ardoise:not(.note-excerpt) :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte vert */
.duotone-sauge :has(> img)::after {
  background-image: linear-gradient(var(--color-duotone-sauge-tint), var(--color-duotone-sauge-tint)), var(--tint-mask, none);
}
.duotone-sauge :has(> iframe)::after {
  background: var(--color-duotone-sauge-tint);
}
.duotone-sauge img,
.duotone-sauge iframe {
  filter: brightness(1.05);
}
.duotone-sauge:not(.note-excerpt) :has(> img):hover::after,
.duotone-sauge:not(.note-excerpt) :has(> iframe):hover::after {
  opacity: 0;
}

/* ============================================================
   11. NOUVELLE PAGE D'ACCUEIL — HEADER TEXTE + LISTE DE PROJETS
   Concerne : uniquement le template "home" (snippet header.php
   branche différemment selon $page->intendedTemplate()).
   La trame (masque noise.svg) et le logo maison/soleil ne sont
   PAS appliqués ici pour l'instant, comme convenu — seulement la
   structure et les proportions. Le fond (var(--color-background),
   défini tout en haut du fichier) est désormais le même sur toutes
   les pages du site, plus seulement sur la home.
   ============================================================ */

:root {
  /* Alias : certains éléments (logo, nav latérale) s'en servent
     spécifiquement pour se fondre dans le fond de la page. */
  --color-bg-home: var(--color-background);
}

body.template-home {
  min-height: 100vh;
  /* La home est en pleine largeur (bord à bord), contrairement au
     reste du site qui reste centré sur 70rem. On garde le même
     padding que partout ailleurs pour l'alignement du texte. */
  max-width: none;
}

/* Le header n'est plus fixe sur la home : pas besoin de compenser
   avec le padding-top prévu pour le header fixe des autres pages */
body.template-home .main {
  padding-top: 0;
}

/* -- Bandeau du haut : logo + sous-titre -- */
.home-header {
  position: relative;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Motif runique répété : élément de bloc normal par défaut (page
   Contact), ou callé en bas du header home via le modificateur
   .home-header-rune ci-dessous. Texte réel dans le HTML (pas un
   ::after généré) pour qu'il soit mesurable via getBoundingClientRect
   (nécessaire pour la transition scroll de la home, qui doit
   caler la fin de la ligne dessinée en Canvas sur ce vrai élément). */
.rune-divider {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--color-black);
  margin: 3rem 0;
}
.home-header-rune {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
}

.home-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}

.home-logo {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: var(--color-black);
}

/* Partie "Tom" du logo home : conserve la trame pointillée */
.home-logo-text {
  display: inline-block;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

/* Partie "Cantôt" du logo home : rectangle noir tramé en fond,
   texte net (sans trame) de la couleur du fond de page par-dessus */
.home-logo-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--color-bg-home);
  padding: 0.05em 0.2em;
}

.home-logo-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-black);
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 119px 85px;
  mask-size: 119px 85px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

/* -- Navigation latérale fixe (n'apparaît qu'après un écran de
   scroll, cf. index.js) : rectangle noir plein (pas de trame), texte
   vertical (écriture de côté, pas empilée lettre par lettre), couleur
   du fond de page. Ancrée par le bas avec une marge suffisante pour
   ne jamais chevaucher le bouton "retour en haut" (fixe, en bas à
   droite lui aussi). -- */
.home-side-nav {
  position: fixed;
  right: 0;
  bottom: 6rem;
  transform: translateX(10px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.home-side-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.home-side-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  letter-spacing: 0.02em;
  padding: 0.9rem 0.5rem;
  background-color: var(--color-black);
  color: var(--color-bg-home);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px 0 0 4px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-side-nav a:hover {
  background-color: var(--color-duotone-ardoise);
  transform: translateX(-0.5rem);
  box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.25);
}

.home-header-subtitle {
  font-size: 32px;
  font-weight: 300;
}

/* ------------------------------------------------------------
   HERO "/" UNIQUEMENT (transition scroll vers l'état compact) —
   voir hero-transition.js. Tout est masqué par défaut : sans JS, ou
   si prefers-reduced-motion, la page "/" se comporte comme une page
   normale (état compact direct), ces éléments ne s'affichent jamais.
   ------------------------------------------------------------ */
.home-hero-subdesign {
  display: none;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-text-grey);
  margin-top: 0.5rem;
}
.hero-ship-dock {
  display: none;
  position: fixed;
  z-index: 60;
  pointer-events: none;
}
.hero-ship-dock img {
  display: block;
  width: 100%;
  height: 100%;
}
#hero-canvas {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
}
.hero-scroll-hint {
  display: none;
  position: fixed;
  right: 2.5rem;
  bottom: 2.5rem;
  z-index: 56;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  pointer-events: none;
}
.hero-scroll-hint-arrow {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1.3em;
  animation: hero-scroll-hint-bounce 1.4s ease-in-out infinite;
}
@keyframes hero-scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5em); }
}
body.hero-active .home-hero-subdesign,
body.hero-active .hero-ship-dock,
body.hero-active #hero-canvas,
body.hero-active .hero-scroll-hint {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  body.hero-active .home-hero-subdesign,
  body.hero-active .hero-ship-dock,
  body.hero-active #hero-canvas,
  body.hero-active .hero-scroll-hint {
    display: none !important;
  }
}

.home-header-intro {
  max-width: none;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.home-header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
}

/* -- "PORTFOLIO" + titre de catégorie (ex. "← Objet et espace") sur
   la même ligne : le titre de catégorie reprend la même typo/taille
   que "← Design espace et objet" (.home-header-subtitle) pour rester
   cohérent avec ce lien-là. -- */
.home-portfolio-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Rangée de liens directs vers chaque projet, sous "PORTFOLIO" et sous
   "← Scénographie" : simple raccourci de navigation, sans rapport
   avec les gros titres de section (typo courante, poids "regular"). */
.home-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1rem 0 1.5rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
}
.home-project-links a {
  color: var(--color-black);
  text-decoration: none;
}
.home-project-links a:hover {
  text-decoration: underline;
}

.home-category {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  text-align: center;
}

.home-category-title {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 300;
  margin: 0;
}

/* Séparateur de sous-catégorie au milieu de la liste des projets
   (ex. "← Scénographie" avant "Musée de la vie rurale et
   forestière") : même typo/taille que "← Objet et espace"
   (.home-category-title), mais en bloc autonome avec de l'espace
   au-dessus/en-dessous puisqu'il n'est pas accolé à "PORTFOLIO".
   Le margin-left reprend l'écart que "← Objet et espace" a de base
   avec le bord gauche (largeur de "PORTFOLIO" + son gap), sans
   réafficher "PORTFOLIO" ici. */
.home-section-divider {
  display: block;
  text-align: left;
  margin: 1rem 0 2.5rem 26rem;
}
@media screen and (max-width: 60rem) {
  /* La marge fixe de 26rem ci-dessus sert à aligner le texte sous
     "PORTFOLIO" sur desktop ; sur un écran étroit elle dépasse la
     largeur de l'écran et fait déborder la page horizontalement. */
  .home-section-divider {
    margin-left: 0;
  }
}

/* -- Aperçu d'un projet : titre + médias + texte (project-preview.php) -- */
.home-project {
  margin-bottom: 4rem;
  text-align: left;
}

.home-project-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.home-project-body {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.home-project-media {
  display: flex;
  gap: 1.5rem;
  flex: 1 1 640px;
  min-width: 280px;
}

/* Carré noir par défaut : reste visible même sans média importé,
   l'image (ou future vidéo) vient ensuite le remplir via object-fit */
.home-project-media-item {
  flex: 1;
  aspect-ratio: 1 / 1;
  background: var(--color-black);
  overflow: hidden;
  display: block;
}

.home-project-media-item img,
.home-project-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-project-text {
  flex: 1 1 260px;
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.7;
}

@media screen and (max-width: 60rem) {
  .home-project-media {
    flex-basis: 100%;
  }
  .home-project-text {
    flex-basis: 100%;
    max-width: 100%;
  }
}


/* -- Ajustements pour l'affichage des projets sur la home : titre
   plus petit et texte non centré. Scopé à .home-projects pour ne pas
   changer le rendu de la page individuelle du projet. -- */
.home-projects .project-title {
  color: var(--color-black);
  text-align: left;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.home-projects .project-col-text,
.home-projects .project-col-text p {
  text-align: left !important;
}

.project-video {
  align-self: start;
  position: relative;
}

.project-video-play {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.project-video-play img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-video-icon {
  /* Centré via top/left/transform plutôt que inset+margin:auto :
     ".text :last-child { margin-bottom: 0 }" (plus haut dans ce
     fichier) est plus spécifique que ".project-video-icon" et
     écrasait la marge auto du bas, décentrant le bouton vers le bas
     dès que cette icône se trouve être le dernier enfant de son
     parent (cas des blocs vidéo dans le texte d'une note). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s ease, background 0.2s ease;
  /* Le calque de trame duotone (.duotone-* :has(>img)::after, plus bas
     dans ce fichier) est un enfant généré qui se peint après tous les
     enfants réels du bouton, donc au-dessus de cette icône à z-index
     égal. Sans ce z-index, l'icône disparaît entièrement sous la
     trame (visible seulement au survol, quand la trame passe à
     opacity:0). */
  z-index: 1;
}

.project-video-play:hover .project-video-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.project-video-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.65rem 0 0.65rem 1.05rem;
  border-color: transparent transparent transparent var(--color-black);
}

.project-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ============================================================
   RESPONSIVE MOBILE — colonnes de projet
   Les 3 colonnes (images / texte / vidéo) s'empilent en une seule
   colonne fluide sous 60rem, dans l'ordre naturel du HTML.
   ============================================================ */
@media screen and (max-width: 60rem) {
  .project-columns {
    grid-template-columns: 1fr;
  }
}