/* ============================================================
   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: #eff2ec;
  --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-family-sans);
  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;
  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;
}

/* --- 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 {
  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-bleu-text);
  margin-top: 2rem;
}
.note-inline-date {
  color: var(--color-duotone-bleu-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;
  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) {
  .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;
  color: var(--color-text-grey);
}

@media screen and (max-width: 72rem) {
  .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;
  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,500;1,600&display=swap');

:root {
  --font-title: 'Amoria', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --color-duotone-olive: #d9d9a8;
  --color-duotone-rose: #e8c9c9;
  --color-duotone-violet: #d4cbe8;
  --color-duotone-olive-text: #6b6b2e;
  --color-duotone-rose-text: #9c5c5c;
  --color-duotone-violet-text: #5a4a7a;
  --color-duotone-bleu: #d6e0ee;
  --color-duotone-bleu-text: #5b7a9e;
  --color-duotone-sombre: #585c57;
  --color-duotone-sombre-text: #585c57;
  --color-turbine: #4a8b3f;
}

/* 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: 70px 50px;
  mask-size: 70px 50px;
  -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: 70px 50px;
  mask-size: 70px 50px;
  -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: 42px 30px;
  mask-size: 42px 30px;
  -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 {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 4rem);
  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: 70px 50px;
  mask-size: 70px 50px;
  -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: 70px 50px;
  mask-size: 70px 50px;
  -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).
   ------------------------------------------------------------ */

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

.duotone-olive .project-title {
  color: var(--color-duotone-olive-text);
}
.duotone-rose .project-title {
  color: var(--color-duotone-rose-text);
}
.duotone-violet .project-title {
  color: var(--color-duotone-violet-text);
}

.duotone-bleu .project-title {
  color: var(--color-duotone-bleu-text);
}

.duotone-sombre .project-title {
  color: var(--color-duotone-sombre-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;
}

/* 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;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
  -webkit-mask-image: url('../img/noise.svg');
  mask-image: url('../img/noise.svg');
  -webkit-mask-size: 42px 30px;
  mask-size: 42px 30px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
  transition: transform 0.2s ease;
}
.note-back:hover {
  transform: translateX(-0.25rem);
}
.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: 42px 30px;
  mask-size: 42px 30px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  mask-mode: alpha;
}

/* ------------------------------------------------------------
   7. PAGE PROJET INDIVIDUEL — MISES EN PAGE DES IMAGES
   Concerne : les différentes dispositions possibles pour une
   page projet, choisies via le champ "layout" du projet dans
   le panel (column / grid / split / double / libre).
   ------------------------------------------------------------ */

/* -- Layout "column" (type "Refuge") : image principale + colonne empilée -- */
.layout-column .project-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.5fr 1fr;
  gap: var(--gutter, 3rem);
  align-items: stretch;
}
.layout-column .project-detail-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
.layout-column .project-detail-images a {
  flex: 1;
  display: block;
  overflow: hidden;
}

/* -- Layout "grid" (type "Habiter/Habitat") : grille 2x2 -- */
.layout-grid .project-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: var(--gutter, 3rem);
  align-items: stretch;
}
.layout-grid .project-detail-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}
.layout-grid .project-detail-images a {
  display: block;
  overflow: hidden;
}

/* -- Éléments communs aux layouts column/grid -- */
.project-main-image {
  display: flex;
}
.project-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-detail-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- Layout "split" (type "Totem") : 2 images en haut, 3 en bas -- */
.layout-split .project-top-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--gutter, 3rem);
  margin-bottom: 2rem;
}
.layout-split .project-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.layout-split .project-top-row img,
.layout-split .project-bottom-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.layout-split .project-text {
  max-width: 60ch;
}

/* -- Layout "double" : 2x (grande image + 2 petites empilées) -- */
.project-double-block {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  align-items: stretch;
}
.project-double-main {
  display: flex;
}
.project-double-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-double-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.project-double-stack a {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: block;
}
.project-double-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cas d'une seule image dans le stack (portrait affiché en entier) */
.project-double-stack.single {
  height: 100%;
}
.project-double-stack.single a {
  aspect-ratio: auto;
  height: 100%;
}
.project-double-stack.single img {
  object-fit: contain;
  height: 100%;
}
/* Pied de bloc "double" : texte + image finale côte à côte */
.project-double-footer {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: flex-start;
}
.project-double-footer .project-text {
  flex: 0 0 66%;
  max-width: 66%;
}
.project-double-extra {
  flex: 0 0 calc(34% - 1.5rem);
}
.project-double-extra a {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.project-double-extra img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- Layout "libre" : blocs Kirby natifs (texte/image/titre en drag & drop) -- */
.project-custom-layout img {
  width: 100%;
  display: block;
}
.project-custom-layout .k-layout-column {
  padding: 0 0.75rem;
}
.project-custom-layout .k-block-type-text {
  font-family: var(--font-body);
  line-height: 1.7;
}
.project-custom-layout .k-block-type-heading {
  font-family: var(--font-title);
  text-transform: uppercase;
}

/* -- Texte descriptif du projet (commun à tous les layouts) -- */
.project-text {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 40ch;
  align-self: start;
}
.project-text .project-meta {
  font-style: italic;
  font-weight: 500;
  margin-top: 2rem;
  display: block;
}
.project-text-full {
  width: 100%;
  max-width: 100%;
  margin-top: 2rem;
}


/* ------------------------------------------------------------
   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)
   ------------------------------------------------------------ */

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--color-black);
  margin-top: 4rem;
}
.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;
}


/* ------------------------------------------------------------
   10. RESPONSIVE — ÉCRANS ÉTROITS (< 60rem / ~960px)
   Concerne : passage en une seule colonne pour les layouts
   projet, empilement du footer du layout "double", et
   réduction de taille du badge/menu.
   ------------------------------------------------------------ */

@media screen and (max-width: 60rem) {
  .project-layout {
    grid-template-columns: 1fr;
  }

  .project-double-block {
    grid-template-columns: 1fr;
  }

  .project-double-footer {
    flex-direction: column;
  }

  .project-double-footer .project-text,
  .project-double-extra {
    flex: none;
    max-width: 100%;
  }

  .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: 60px 48px;
  mask-size: 60px 48px;
  -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-duotone-sombre);
}
.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-bleu-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-olive :has(> img),
.duotone-rose :has(> img),
.duotone-violet :has(> img),
.duotone-bleu :has(> img),
.duotone-sombre :has(> img),
.duotone-olive :has(> iframe),
.duotone-rose :has(> iframe),
.duotone-violet :has(> iframe),
.duotone-bleu :has(> iframe),
.duotone-sombre :has(> iframe) {
  position: relative;
}

.duotone-olive :has(> img)::after,
.duotone-rose :has(> img)::after,
.duotone-violet :has(> img)::after,
.duotone-bleu :has(> img)::after,
.duotone-sombre :has(> img)::after,
.duotone-olive :has(> iframe)::after,
.duotone-rose :has(> iframe)::after,
.duotone-violet :has(> iframe)::after,
.duotone-bleu :has(> iframe)::after,
.duotone-sombre :has(> iframe)::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Teinte bleu — pastel avec plus de présence */
.duotone-bleu :has(> img)::after,
.duotone-bleu :has(> iframe)::after {
  background: #9ABFCB;
}
.duotone-bleu img {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}
.duotone-bleu iframe {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}

.duotone-bleu :has(> img):hover::after,
.duotone-bleu :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte olive/vert — pastel avec plus de présence */
.duotone-olive :has(> img)::after,
.duotone-olive :has(> iframe)::after {
  background: #C3CBC0;
}
.duotone-olive img {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}
.duotone-olive iframe {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}

.duotone-olive :has(> img):hover::after,
.duotone-olive :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte rose — pastel avec plus de présence */
.duotone-rose :has(> img)::after,
.duotone-rose :has(> iframe)::after {
  background: #CAA89C;
}
.duotone-rose img {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}
.duotone-rose iframe {
  filter: brightness(1.05); /* équivalent du +10 de Luminosité */
}

.duotone-rose :has(> img):hover::after,
.duotone-rose :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte violet — pastel doux, cohérent avec le fond sauge
   (n'existait pas encore comme filtre monochrome, seulement comme
   couleur de texte : .duotone-violet n'avait pas d'effet image) */
.duotone-violet :has(> img)::after,
.duotone-violet :has(> iframe)::after {
  background: #B9A5BE;
}
.duotone-violet img {
  filter: brightness(1.05);
}
.duotone-violet iframe {
  filter: brightness(1.05);
}

.duotone-violet :has(> img):hover::after,
.duotone-violet :has(> iframe):hover::after {
  opacity: 0;
}

/* Teinte "Fond sombre" — sombre et mat, contraste avec les autres
   teintes pastel */
.duotone-sombre :has(> img)::after,
.duotone-sombre :has(> iframe)::after {
  background: #585c57;
}
.duotone-sombre img {
  filter: brightness(1.05);
}
.duotone-sombre iframe {
  filter: brightness(1.05);
}

.duotone-sombre :has(> img):hover::after,
.duotone-sombre :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 {
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-black);
}

.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: 70px 50px;
  mask-size: 70px 50px;
  -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: 70px 50px;
  mask-size: 70px 50px;
  -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;
}
.home-side-nav a:hover {
  background-color: var(--color-duotone-sombre);
}

@media screen and (max-width: 60rem) {
  .home-side-nav {
    display: none;
  }
}

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

.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;
}

.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;
}

/* -- 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 demandés pour l'affichage des projets (project-content.php)
   directement sur la home : titre plus petit / noir / ancré à droite,
   texte en drapeau (pas centré), images plafonnées en hauteur pour
   tenir sur un écran. Scopé à .home-projects pour ne pas changer le
   rendu des pages projet individuelles. -- */
.home-projects .project-title {
  color: var(--color-black);
  text-align: left;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

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

/* On ne fixe plus une hauteur de boîte (ça laissait un vide rempli
   par la couleur du monochrome autour de l'image, "cadres" visibles).
   On plafonne directement l'image et on empêche le stretch de la
   grille, pour que la boîte épouse exactement la taille de l'image. */
.home-projects .project-main-image,
.home-projects .project-detail-images {
  height: auto;
  align-self: end;
  justify-self: start;
}

/* Les vignettes empilées sont elles-mêmes un conteneur flex : par
   défaut ses enfants s'étirent (stretch) sur toute sa largeur, ce qui
   recréait le même vide/monochrome-qui-déborde à l'intérieur de
   chaque vignette. */
.home-projects .project-detail-images {
  align-items: start;
}

/* Rapproche les colonnes : sans ça, les colonnes gardent leur largeur
   proportionnelle (1.3fr/0.5fr/1fr) même si l'image qu'elles
   contiennent est plus petite, laissant un grand vide avant la
   colonne suivante. */
.home-projects .project-layout {
  grid-template-columns: auto auto 1fr;
  gap: 1.5rem;
}

/* Colonne vidéo en plus, uniquement si un lien YouTube a été détecté
   dans le champ Meta du projet (cf. project-content.php) — sinon la
   grille reste à 3 colonnes comme avant, sans espace réservé en trop. */
.layout-column.has-video .project-layout {
  grid-template-columns: 1.3fr 0.5fr 1fr 1fr;
}

.home-projects .layout-column.has-video .project-layout {
  grid-template-columns: auto auto 1fr 1fr;
}

.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;
}

.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;
}

.home-projects .project-main-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 640px;
  display: block;
}

.home-projects .project-detail-images img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  display: block;
}

/* Preset "Grille 2x2" uniquement (ex. Habiter/Habitat) : le pack de
   4 images est plus haut que les autres presets par défaut, on
   augmente donc son plafond pour qu'il approche la hauteur de la
   grande image. Les autres presets (colonne, split...) ne sont pas
   concernés par cette règle. */
.home-projects .layout-grid .project-detail-images img {
  max-height: 308px;
}

/* Ce preset a 2 vraies colonnes de grille (contrairement à
   "colonne" qui n'en a qu'une) : chaque cellule reste à la largeur
   fixe de sa colonne même quand l'image, plafonnée en hauteur, est
   au format portrait et donc plus étroite (ex. TOTEM) — le filtre
   de teinte "duotone", posé sur la cellule, débordait alors visible
   à droite de l'image. On empêche les cellules de s'étirer en
   largeur pour qu'elles épousent la taille réelle de leur image. */
.home-projects .layout-grid .project-detail-images {
  justify-items: start;
}

/* Layout "double" (Thelma & Louise) sur la home uniquement.

   1) Texte avant les images : l'article passe en colonne flex et les
      blocs d'images (.project-double-block) sont renvoyés après le
      pied de page (.project-double-footer, qui contient le texte) via
      "order", sans toucher au HTML (donc sans effet sur la page
      projet /portfolio/tetl).

   2) Alignement haut/bas dans une rangée : chaque conteneur (image
      principale, vignettes empilées, image finale) reçoit une HAUTEUR
      FIXE identique (300px pour un "principal", 300px réparti en 2
      pour les vignettes empilées) au lieu d'un sizing "auto" — avec
      une image contrainte par max-width ET max-height, les navigateurs
      calculent mal la taille intrinsèque d'un conteneur flex imbriqué
      qui l'englobe (il reste plus grand que l'image réellement
      affichée), ce qui faisait déborder le filtre de teinte "duotone"
      (::after en inset:0 sur le conteneur direct de l'image, cf. plus
      haut) largement autour de l'image. Une hauteur fixe, combinée à
      "height:100%" sur l'image, évite ce calcul ambigu ET garantit que
      toutes les boîtes d'une même rangée font exactement la même
      hauteur (donc alignées en haut et en bas), la largeur variant
      librement selon les proportions propres à chaque photo. */
.home-projects .layout-double {
  display: flex;
  flex-direction: column;
}
.home-projects .layout-double .project-double-block {
  order: 1;
  margin-top: 1.5rem;
}

.home-projects .project-double-block {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}
.home-projects .project-double-main {
  display: flex;
  height: 300px;
  width: auto;
  flex-shrink: 0;
}
.home-projects .project-double-stack {
  height: 300px;
  width: 250px;
  flex-shrink: 0;
  align-items: flex-start;
}
.home-projects .project-double-stack.single {
  height: 300px;
}
.home-projects .project-double-stack a {
  width: auto;
  flex: 1 1 0;
  min-height: 0;
}
.home-projects .project-double-stack a,
.home-projects .project-double-extra a {
  aspect-ratio: auto;
  overflow: visible;
}
.home-projects .project-double-extra {
  flex: none;
  height: 198px;
}
.home-projects .project-double-extra a {
  display: block;
  height: 100%;
}

.home-projects .project-double-main img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
}

.home-projects .project-double-stack img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
}

.home-projects .project-double-stack.single img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
}

.home-projects .project-double-extra img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
}