/* =========================================================================
   DESIGN SYSTEM — studio Samuel Tomatis
   Ref : retours designer 16/05/2025 (SAM_SITE_160525.pdf)
   Chargé après tous les autres CSS pour override centralisé.

   Sommaire :
   1. Tokens (variables CSS)
   2. Structure : marges body + séparateur header
   3. Typographie : header nav / chapô / titre section / corps
   4. Layout : largeur 2/3 du corps, hyphenation
   5. Header nav : items serrés, alignement
   6. Footer desktop : symétrique du header (items droite)
   7. Actu : liste verticale avec séparateurs (override du carousel)
   ========================================================================= */


/* ---------- 1. TOKENS ------------------------------------------------------
   Une valeur par (rôle × breakpoint). Modifier ici pour propager partout. */

:root {
  /* Séparateurs & couleurs */
  --ds-color-separator: rgb(128, 128, 128);
  --ds-separator-height: 1px;

  /* Espacements entre items nav (header et footer) */
  --ds-nav-gap: 24px;
}

/* FORCE OPACITY 1 SUR TOUTES LES IMAGES (y compris les états lazysizes :
   lazyload / lazyloading / lazyloaded — sinon les images src directes restent
   grisées car lazysizes ne les "charge" jamais via data-src). */
img,
figure img,
.lazyload,
.lazyloading,
.lazyloaded,
img[loading],
.home-grid img,
.card img,
span.img img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transition: none !important;
}

/* BLOQUE TOUS LES HOVERS SUR IMAGES PARTOUT */
img:hover,
figure:hover,
a:hover img,
a:hover figure,
li:hover img,
li:hover figure,
.card:hover img,
.card img:hover,
span.img:hover,
span.img.img-home:hover {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* ===== PAS DE SCROLL HORIZONTAL — toutes les pages, tous les écrans =====
   Empêche tout débordement horizontal (cause fréquente : un élément large
   qui dépasse la largeur du viewport sur mobile). */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
* {
  max-width: 100%;
}
img,
figure,
video,
iframe,
table {
  max-width: 100% !important;
}


/* ---------- RÈGLES DE CÉSURE GLOBALES ------------------------------------
   Appliquées à tout le site pour une meilleure justification :
   - Minimum 6 caractères pour justifier une césure
   - Au moins 3 lettres avant la césure
   - Au moins 3 lettres après la césure
   - Maximum 2 césures consécutives
   - Pas de césure sur le dernier mot du paragraph
   Note : Les navigateurs modernes supportent ces propriétés avec un fallback
   gracieux pour les navigateurs anciens. */

body {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  -webkit-hyphenate-limit-last: always;
}

/* Les majuscules en début de mot indiquent souvent des noms propres :
   on désactive la césure pour ces mots via hyphens: manual sur les éléments
   appropriés. Les navigateurs n'offrent pas de sélecteur :has-uppercase,
   donc cette règle s'applique au contexte générique. */


/* Tokens dépendant du breakpoint. On les définit sur body (pas :root) car
   index.css redéfinit --padding sur body dans ses media queries. */

@media screen and (min-width: 1101px) {
  body {
    --padding: 36px;
    --ds-font-header: 60px;
    /* Chapô / intro / actu partagent la même taille */
    --ds-font-chapo: 44px;
    --ds-line-chapo: 50px;
    --ds-font-section-title: 60px;
    --ds-line-section-title: 60px;
    --ds-font-body: 25px;
    --ds-line-body: 32px;
    --ds-body-width: 66.6666%;
    --ds-actu-item-font: 44px;
    --ds-actu-item-line: 50px;
    --ds-actu-item-padding: 12px;
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  body {
    --padding: 30px;
    --ds-font-header: 44px;
    --ds-font-chapo: 32px;
    --ds-line-chapo: 38px;
    --ds-font-section-title: 44px;
    --ds-line-section-title: 44px;
    --ds-font-body: 20px;
    --ds-line-body: 25px;
    --ds-body-width: 100%;
    --ds-actu-item-font: 32px;
    --ds-actu-item-line: 38px;
    --ds-actu-item-padding: 12px;
  }
}
@media screen and (max-width: 899px) {
  body {
    --padding: 24px;
    --ds-font-header: 26px;
    /* Chapô et corps distincts (spec PDF page 6–7) */
    --ds-font-chapo: 20px;
    --ds-line-chapo: 24px;
    --ds-font-section-title: 26px;
    --ds-line-section-title: 26px;
    --ds-font-body: 14px;
    --ds-line-body: 18px;
    --ds-body-width: 100%;
    --ds-actu-item-font: 20px;
    --ds-actu-item-line: 24px;
    --ds-actu-item-padding: 12px;
  }
}


/* ---------- 2. SÉPARATEUR SOUS LE HEADER ---------------------------------
   Un seul <hr class="line-header-desktop"> est injecté dans header.php
   (masqué sur home et album via une condition PHP côté snippet).
   Rendu identique sur toutes les pages et tous les breakpoints. */

hr.line-header-desktop {
  display: block !important;
  height: var(--ds-separator-height) !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: var(--ds-color-separator);
}
/* Sur /actu (fond noir), le séparateur du header doit être blanc. */
body.page-actu hr.line-header-desktop {
  background-color: #ffffff !important;
}

/* Padding du header uniforme desktop — s'applique à partir de 900px (le mode
   desktop). Sous 900px c'est le mode mobile/compact qui gère le header.
   Évite qu'about.css @1441+ ne rehausse la ligne de 30 à 48 px sur Info. */
@media screen and (min-width: 900px) {
  header {
    padding: 12px 0 18px 0 !important;
  }
}

/* ---------- 2b. HEADER STICKY (hide-on-scroll-down / show-on-scroll-up) --
   Le wrapper <div.site-header-wrapper> englobe <header> et le <hr>.
   Position fixed en haut du viewport, translate pour cacher, transition. */

.site-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--padding);
  background-color: var(--color-background);
  transform: translateY(0);
  transition: transform 0.3s ease;
  will-change: transform;
}
.site-header-wrapper.is-hidden {
  transform: translateY(-100%);
}
/* Sur /actu (fond noir), le header doit être noir aussi. */
body.page-actu .site-header-wrapper {
  background-color: var(--color-text);
}

/* Espace réservé sous le header sticky (hauteur du header + hr).
   Valeurs mesurées : desktop 91px, tablet 75px, mobile 63px. */
body {
  padding-top: var(--ds-header-height, 91px);
}
@media screen and (min-width: 1101px) { body { --ds-header-height: 91px; } }
@media screen and (min-width: 900px) and (max-width: 1100px) { body { --ds-header-height: 75px; } }
@media screen and (max-width: 899px) { body { --ds-header-height: 63px; } }


/* ---------- 3. TYPOGRAPHIE ------------------------------------------------
   Chaque rôle est mappé sur un token dépendant du breakpoint. */

/* Header nav : "studio" (gauche) et "Studio Info Actu" (droite).
   Source unique de vérité pour la taille — écrase les font-size en dur de
   header.css (44/88/116px) qui provoquaient des sauts de taille incohérents. */
h1.studio-title-header,
h1.studio-title-header.nav-home,
h1.studio-samuel-tomatis-title-header,
.list-desktop,
.list-desktop a,
a.link-list-child-desktop,
li.list-child-desktop,
li.list-child-desktop a {
  font-size: var(--ds-font-header) !important;
  line-height: 1 !important;
}

/* État "page courante" dans le menu : l'item actif est en gras (titleFont),
   les autres items et "studio" passent en light (mainFont).
   Utilise les classes body.page-studio / page-about / page-actu pour cibler
   quand on est sur une page dont un item nav représente la page courante. */
body.page-studio h1.studio-title-header,
body.page-studio h1.studio-samuel-tomatis-title-header,
body.page-about h1.studio-title-header,
body.page-about h1.studio-samuel-tomatis-title-header,
body.page-actu h1.studio-title-header,
body.page-actu h1.studio-samuel-tomatis-title-header {
  font-family: 'mainFont', helvetica, sans-serif !important;
  font-weight: normal !important;
}

/* Item nav courant en gras (desktop + mobile overlay) */
a.link-list-child-desktop.is-current,
.overlay-content > a.is-current .list-mobile-menu,
.overlay-content > a.is-current {
  font-family: 'titleFont', helvetica, sans-serif !important;
  font-weight: bold !important;
}
/* Les autres items (non-courants) restent en mainFont light */
a.link-list-child-desktop:not(.is-current),
.overlay-content > a:not(.is-current):not(.logo-mobile-menu) .list-mobile-menu {
  font-family: 'mainFont', helvetica, sans-serif !important;
  font-weight: normal !important;
}

/* -------- Hover global cohérent sur tout le site -------------------------
   Opacity 0.7 : sobre, universel, aucun décalage/blink de layout.
   Retire aussi les effets historiques mix-blend-mode / invert(70%) qui
   donnaient des rendus incohérents entre les zones. */

/* Transition d'opacité sur les liens texte/boutons — PAS sur les liens
   contenant une image (sinon l'image entière devient semi-transparente). */
a:not(:has(img)):not(:has(figure)),
button {
  transition: opacity 0.15s ease !important;
}
/* Hover opacity : uniquement sur les liens SANS image, et les boutons. */
a:not(:has(img)):not(:has(figure)):hover,
button:hover:not([disabled]),
a.nav-title:hover,
a.link-list-child-desktop:hover,
li.list-child-desktop:hover a.link-list-child-desktop,
.overlay-content > a:hover,
.footer a:hover,
footer a:hover,
.project-prev-next a:hover,
.blocks a:not(:has(img)):not(:has(figure)):hover,
#myBtn:hover,
button#myBtn:hover,
.back-to-top-btn:hover {
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* GARANTIE ABSOLUE : aucun lien contenant une image ne change d'opacité. */
a:has(img),
a:has(figure),
a:has(img):hover,
a:has(figure):hover {
  opacity: 1 !important;
  transition: none !important;
}

/* Boutons "Haut de page" (snippet back-to-top et #myBtn sur home) et
   navigation projet (Précédent/Suivant) — plafonnés à la taille du H1.
   Règle générale : rien ne doit être plus gros que le H1. */
.back-to-top-btn,
#myBtn,
button#myBtn,
section.project-prev-next,
.project-prev-next,
h1.h1-actu {
  font-size: var(--ds-font-header) !important;
  line-height: 1 !important;
}

/* Bouton "Haut de page" : aligné à droite, au-dessus du footer.
   Marges 8px identiques à celles des séparateurs de titre pour rester
   cohérent avec le design system. */
.back-to-top {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
  margin: 0;
}
.back-to-top-btn {
  font-family: 'mainFont', helvetica, sans-serif;
  color: currentColor;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: right;
}
.back-to-top-btn:hover {
  mix-blend-mode: difference;
  filter: invert(70%);
}

/* Chapô (intro de page) — Info & Alga.
   La largeur 2/3 est appliquée au <p> via la règle body.page-* plus bas.
   Ne pas la mettre aussi sur la section : sinon 66.66% × 66.66% ≈ 44% (bug). */
.info-mission-text p,
#info-mission-text p {
  font-size: var(--ds-font-chapo) !important;
  line-height: var(--ds-line-chapo) !important;
}
.info-mission-text,
#info-mission-text {
  width: 100% !important;
}

@media screen and (min-width: 1101px) {
  .info-mission-text,
  #info-mission-text {
    padding: 12px 0 36px !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  .info-mission-text,
  #info-mission-text {
    padding: 12px 0 24px !important;
  }
}

@media screen and (max-width: 899px) {
  .info-mission-text,
  #info-mission-text {
    padding: 12px 0 24px !important;
  }
}

/* Titre de section (Contexte, Contact, etc.) */
.info-title,
#info-title {
  font-size: var(--ds-font-section-title) !important;
  line-height: var(--ds-line-section-title) !important;
}

/* Proportions des colonnes (studio/info) : la largeur du layout Kirby (1/2,
   2/3, 1/3…) est transmise via --col-flex par le template et appliquée en
   flex-grow. Desktop/tablet seulement — sur mobile les colonnes s'empilent. */
@media screen and (min-width: 900px) {
  /* Exclut les sections "two-images" : elles ont leurs propres largeurs
     (width: calc()) dans studio.css, que flex-basis:0 écraserait. */
  body.page-studio section.column-grid:not([id*="two-images"]) .column-grid-column,
  body.page-about section.column-grid:not([id*="two-images"]) .column-grid-column {
    flex: var(--col-flex, 1) 1 0 !important;
    min-width: 0;
  }
}

/* Très grand desktop : sur la page info, les rangées à 2 colonnes passent en
   1/2–1/2 (parts égales), notamment le Parcours (2/3+1/3 en dessous). */
@media screen and (min-width: 1600px) {
  body.page-about section.column-grid:not([id*="two-images"]) .column-grid-column {
    flex: 1 1 0 !important;
  }
}

/* Corps de texte — cible les <p> dans .blocks sur alga et info uniquement.
   Ancienne classe .info-large-text abandonnée. */
body.page-studio .blocks p,
body.page-about .blocks p {
  text-align: justify;
}

/* Listes (Références, etc.) : chaque ligne est un <p> dans une colonne
   info-half-text. Espacement serré (12px), au lieu du margin du corps. */
.info-half-text .blocks p,
#info-half-text .blocks p {
  margin-bottom: 12px !important;
  text-align: left !important;
}

@media screen and (min-width: 1101px) {
  body.page-studio .blocks p,
  body.page-about .blocks p {
    font-size: 25px !important;
    line-height: 32px !important;
    margin-bottom: 0 !important;
  }
  /* Studio : section à colonne unique (prose Contexte, etc.) → texte à 2/3. */
  body.page-studio .column-grid-column:only-child .blocks p {
    width: 66.6666% !important;
  }
  /* Info : les sections à colonne unique sont des listes de CV (Enseignement,
     Acquisitions, Contact…) → pleine largeur. Le chapô reste à 2/3 (règle id). */
  body.page-about .column-grid-column:only-child .blocks p {
    width: 100% !important;
  }
  #info-mission-text .blocks p {
    width: 66.6666% !important;
  }
  /* Section multi-colonnes (ex. Parcours 2/3 + image 1/3) : le texte
     remplit sa colonne, la proportion vient de la colonne elle-même. */
  body.page-studio .column-grid-column:not(:only-child) .blocks p,
  body.page-about .column-grid-column:not(:only-child) .blocks p {
    width: 100% !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  body.page-studio .blocks p,
  body.page-about .blocks p {
    font-size: 20px !important;
    line-height: 25px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
}

@media screen and (max-width: 899px) {
  body.page-studio .blocks p,
  body.page-about .blocks p {
    font-size: 14px !important;
    line-height: 18px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* Pages projet : texte principal aux tailles du design system selon breakpoint.
   Placé APRÈS le body rule pour battre la specificity équivalente. */
.project-text,
.project-text p {
  text-align: justify;
}

@media screen and (min-width: 1101px) {
  .project-text,
  .project-text p {
    font-size: 25px !important;
    line-height: 32px !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  .project-text,
  .project-text p {
    font-size: 20px !important;
    line-height: 25px !important;
  }
}

@media screen and (max-width: 899px) {
  .project-text,
  .project-text p {
    font-size: 14px !important;
    line-height: 18px !important;
  }
}

/* Le chapô n'est pas justifié (garde son alignement naturel). */
body.page-studio #info-mission-text .blocks p,
body.page-about #info-mission-text .blocks p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Ajoute une marge au-dessus des images sur alga et about (pas sur home) */
body.page-studio .blocks figure,
body.page-about .blocks figure {
  margin-top: 12px !important;
}

/* Pas de marge sur la première figure */
body.page-studio .blocks > figure:first-of-type,
body.page-about .blocks > figure:first-of-type {
  margin-top: 0 !important;
}


/* ---------- 4. LAYOUT : largeurs & rythme vertical ------------------------
   Règles universelles (tous breakpoints) sur alga/actu :
   - Bloc d'intro (chapô)     : 12px au-dessus, 12px au-dessous
   - Titre de section         : suivi d'une ligne 1px avec 8px de marge
     (8px entre le titre et la ligne, 8px entre la ligne et le contenu)
   - Marge maximum autorisée  : 12px */

.info-mission-text,
.info-mission-text p,
#info-mission-text,
#info-mission-text p {
  padding: 12px 0 !important;
  margin: 0 !important;
}

.info-title,
#info-title {
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
/* Le séparateur (desktop-line) passe derrière le texte du titre en cas de
   chevauchement (descendantes du "g", etc.). */
section[id*="desktop-line"] {
  position: relative;
  z-index: 0;
}
/* 24px au-dessus de chaque titre de section, sauf le tout premier de la page.
   Le sélecteur de frère ~ ne matche que les titres précédés d'un autre titre.
   (.info-title = page info via classe ; #info-title = page studio via id) */
.info-title ~ .info-title,
#info-title ~ #info-title {
  margin-top: 24px !important;
}
.info-title .column-grid-column,
#info-title .column-grid-column {
  margin: 0 !important;
}
/* Consistance des titres (studio & info) : on neutralise le margin-bottom de
   1.25rem hérité de .h2 (index.css). L'espace de 12px sous chaque titre vient
   uniquement du padding-bottom de .column-grid-column — identique partout. */
.info-title h2,
.info-title .h2,
#info-title h2,
#info-title .h2 {
  margin: 0 !important;
}

/* Sections corps de texte — pas de margin en HAUT (respect du 8px après le
   séparateur). On garde le margin-bottom naturel (24px via .column-grid-column
   dans index.css) pour l'espace entre blocs. Cible les sections dont l'id
   correspond aux id sémantiques du contenu (info-large-text, info-half-text
   et variantes rendues dans l'HTML). */
body.page-studio section.column-grid,
body.page-about section.column-grid {
  /* Rien de global ici — voir la règle de reset ci-dessous. */
}
body.page-studio section.column-grid:not(#info-title):not(.info-title):not([id*="desktop-line"]),
body.page-about section.column-grid:not(#info-title):not(.info-title):not([id*="desktop-line"]) {
  margin-top: 0 !important;
}

/* Ancres de section (titres) : décalage pour ne pas passer sous le header
   sticky quand on arrive via un lien #contact, #parcours, etc. */
section.column-grid.info-title[id] {
  scroll-margin-top: var(--ds-header-height, 91px);
}

/* Séparateur natif du contenu Kirby (block "line") : les sections avec la
   classe "desktop-line" contiennent un <hr>. On lui donne 8px de marge
   au-dessus et au-dessous sur tous les breakpoints. */
section[id*="desktop-line"] {
  margin-bottom: 8px !important;
}
/* Neutralise le margin-bottom: 24px hérité de .column-grid-column pour ces
   sections — sinon 8px + 24px + 8px = 40px au lieu des 8+8 attendus. */
section[id*="desktop-line"] .column-grid-column {
  margin: 0 !important;
}
section[id*="desktop-line"] hr {
  display: block !important;
  height: var(--ds-separator-height) !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: var(--ds-color-separator);
}

/* Pages projet : le conteneur .project-content est déjà à 65.66 % de
   l'écran (album.css) — donc .project-text prend 100 % de son parent
   pour atteindre les 2/3 réels de l'écran. */
@media screen and (min-width: 1101px) {
  .project-text { width: 100% !important; }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  .project-text { width: 100% !important; }
}
@media screen and (max-width: 899px) {
  body.page-studio .blocks p,
  body.page-about .blocks p,
  .project-text {
    width: 100% !important;
    padding: 12px 0 0;
  }

  /* Header mobile : titre 26px + burger sur la même ligne, alignés au centre */
  #desktop-menu-hidden {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 0 12px 0 !important;
  }
  #desktop-menu-hidden .nav-title {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    min-width: 0;          /* autorise le rétrécissement dans le flex */
    overflow: hidden;
  }
  #desktop-menu-hidden h1 {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    /* Toujours sur une ligne ; coupe avec … sur les très petits écrans. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Le burger ne rétrécit jamais : c'est le titre qui se tronque. */
  #desktop-menu-hidden span.navicon-text {
    flex: 0 0 auto !important;
  }
  /* "studio Samuel Tomatis" en mobile : gras (titleFont) sur toutes les
     pages, même celles où la règle body.page-X met le titre en light. */
  #desktop-menu-hidden h1.studio-samuel-tomatis-title-header,
  #desktop-menu-hidden h1.studio-title-header,
  body.page-studio #desktop-menu-hidden h1.studio-samuel-tomatis-title-header,
  body.page-about #desktop-menu-hidden h1.studio-samuel-tomatis-title-header,
  body.page-actu #desktop-menu-hidden h1.studio-samuel-tomatis-title-header {
    font-family: 'titleFont', helvetica, sans-serif !important;
    font-weight: bold !important;
  }
  #desktop-menu-hidden span.navicon-text {
    position: static !important;
    top: auto !important; right: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
  }
  #desktop-menu-hidden .menu-icon {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
  }
  #desktop-menu-hidden .menu-icon .navicon-burger {
    margin: 0 !important;
  }
  /* Compense l'asymétrie visuelle : la moyenne géométrique du burger tombe
     ~4px au-dessus du centre optique de la ligne de texte (le regard
     recentre sur la x-height des minuscules). */
  #desktop-menu-hidden span.navicon-text {
    transform: translateY(3px);
  }
}

/* -------- Page projet (album) : année alignée à droite -------------------- */
.project-title-header {
  align-items: baseline;
}
.project-title-header-year {
  text-align: right;
  justify-self: end;
}


/* ---------- Overlay mobile : espacement 8px entre items nav ---------------
   Le header/logo de l'overlay garde son padding, seuls les items nav
   (Alga/Info/Actu) sont resserrés. */

@media screen and (max-width: 899px) {
  .overlay-content > a:not(.logo-mobile-menu) {
    margin: 12px 24px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .overlay hr {
    margin: 0 24px !important;
    height: 1px !important;
    border: 0 !important;
    background-color: #ffffff !important;
  }

  /* Logo overlay = position/typo identiques au H1 du header sticky pour une
     transition sans saut visuel à l'ouverture.
     Header : padding 24/12 (via #desktop-menu-hidden), body pad-left 24, h1 26px.
     Le wrapper .site-header-wrapper a un padding-left var(--padding) = 24px. */
  .logo-mobile-menu {
    padding: 24px 0 12px 0 !important;
    margin: 0 24px !important;
    display: block !important;
    line-height: 1 !important;
  }
  .logo-mobile-menu .list-mobile-menu.mobile-menu-title {
    font-size: 26px !important;
    line-height: 1 !important;
    font-family: 'titleFont', helvetica, sans-serif !important;
  }

  /* Croix de fermeture positionnée exactement sur le burger du header pour
     que l'ouverture/fermeture donne l'illusion d'un même bouton.
     Le burger est ancré à droite (space-between dans #desktop-menu-hidden)
     avec 24px de body padding + 24px de padding-top sur #desktop-menu-hidden. */
  .overlay .closebtn {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    width: auto !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Overlay mobile ouvert : doit passer au-dessus du header sticky (z-index
   1000) sinon le header bloque le bouton close et les liens du menu. */
.overlay {
  z-index: 2000 !important;
}


/* ---------- 5. HEADER NAV : items serrés, groupe à droite -----------------
   #desktop-menu-visible utilise space-between → studio à gauche, ul à droite.
   À l'intérieur du ul, items packed avec un gap resserré. */

#desktop-menu-visible .list-desktop {
  gap: var(--ds-nav-gap) !important;
  justify-content: flex-end !important;
}
li.list-child-desktop {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}


/* ---------- 6. FOOTER DESKTOP : symétrique du header ----------------------
   Colonne 1 = "studio Samuel Tomatis" (à gauche via space-between).
   Colonne 2 = contact/instagram/english, groupé et aligné à DROITE. */

@media screen and (min-width: 900px) {
  /* Restaure le layout desktop du footer sur tablette (footer.css @721-1100
     force display:contents et masque le logo → on annule ces règles). */
  .footer-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    justify-content: space-between !important;
  }
  .footer a.logo { display: block !important; }
  .footer-grid .list-footer {
    display: flex;
    gap: var(--ds-nav-gap);
    justify-content: flex-end;
  }
  .footer-grid .list-child-footer {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
}


/* ---------- 7. ACTU : liste verticale avec séparateurs --------------------
   Override du carousel horizontal historique (actu.php inline <style>). */

.actu-carousel {
  flex-direction: column !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
}
.actu-carousel section.grid {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.actu-carousel .column {
  width: 100% !important;
  height: auto !important;
}
.actu-carousel .blocks {
  width: 100% !important;
  height: auto !important;
  font-size: var(--ds-actu-item-font) !important;
  line-height: var(--ds-actu-item-line) !important;
}
@media screen and (min-width: 900px) {
  .actu-carousel .blocks p {
    border-bottom: var(--ds-separator-height) solid currentColor;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    font-size: var(--ds-actu-item-font) !important;
    line-height: var(--ds-actu-item-line) !important;
    padding: 24px 0 24px 0 !important;
  }
}

@media screen and (max-width: 899px) {
  .actu-carousel .blocks p {
    border-bottom: var(--ds-separator-height) solid currentColor;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    font-size: var(--ds-actu-item-font) !important;
    line-height: var(--ds-actu-item-line) !important;
    padding: 12px 0 12px 0 !important;
  }
}
/* Force la taille sur TOUS les éléments enfants du paragraphe (a, span, etc.) */
.actu-carousel .blocks p * {
  font-size: var(--ds-actu-item-font) !important;
  line-height: var(--ds-actu-item-line) !important;
}
/* Le contenu Kirby ajoute parfois un <p> vide après le texte → double ligne */
.actu-carousel .blocks p:empty { display: none !important; }
/* Dernier item : pas de séparateur (le footer en fournit un) */
.actu-carousel > section.grid:last-child .blocks p:last-of-type {
  border-bottom: 0 !important;
}

/* Mentions légales (info-legal) : taille par breakpoint.
   Desktop 16/20, tablet 16, mobile 12/16.
   Sélecteur avec id (#info-legal) pour battre body.page-about .blocks p qui
   impose 25px au corps de texte (spécificité supérieure sinon). */
.info-legal,
.info-legal p,
#info-legal .blocks p,
body.page-about #info-legal .blocks p,
body.page-studio #info-legal .blocks p {
  font-size: 16px !important;
  line-height: 20px !important;
}

/* Tablet : 16px / 20px */
@media screen and (min-width: 900px) and (max-width: 1100px) {
  .info-legal,
  .info-legal p,
  #info-legal .blocks p,
  body.page-about #info-legal .blocks p,
  body.page-studio #info-legal .blocks p {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

/* Mobile : 12px / 16px de line-height */
@media screen and (max-width: 899px) {
  .info-legal,
  .info-legal p,
  #info-legal .blocks p,
  body.page-about #info-legal .blocks p,
  body.page-studio #info-legal .blocks p {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* Pas de scroll horizontal sur la page info : les listes (.info-half-text,
   .info-third-text, .info-half-title) doivent passer à la ligne au lieu de
   déborder. Neutralise white-space:nowrap + overflow:scroll d'about.css. */
.info-half-text,
.info-third-text,
.info-half-title,
.info-half-title p,
.info-half-text p,
.info-third-text p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ============================================================
   SKELETON DE CHARGEMENT DES IMAGES — shimmer très doux
   ------------------------------------------------------------
   La classe .img-loading est ajoutée par le JS (footer) au
   CONTENEUR DIRECT de l'image uniquement (le <a> sur les pages
   projet, .img-home sur la home) — jamais au <figure> entier,
   pour ne pas recouvrir la légende/hr. Puis .img-loaded au
   chargement : le shimmer s'efface, l'image apparaît en fondu.
   ============================================================ */

.img-loading {
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
}

/* Shimmer : dégradé très pâle qui balaie lentement et en douceur. */
.img-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(245,245,245,0) 0%,
    rgba(245,245,245,0) 35%,
    rgba(232,232,232,0.9) 50%,
    rgba(245,245,245,0) 65%,
    rgba(245,245,245,0) 100%
  );
  background-color: #f5f5f5;
  background-size: 250% 100%;
  animation: img-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Pendant le chargement, l'image est légèrement masquée (le shimmer prend sa
   place). NB : on n'utilise plus opacity:0 pour éviter que les images restent
   invisibles si le JS ne retire pas la classe. Le shimmer est au-dessus. */
.img-loading img {
  opacity: 1 !important;
}

/* Une fois chargée : shimmer effacé en fondu, image révélée en douceur. */
.img-loaded::after {
  opacity: 0;
  animation: none;
  transition: opacity 600ms ease;
}
.img-loaded img {
  opacity: 1 !important;
  transition: opacity 700ms ease !important;
}

@keyframes img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
  .img-loading::after { animation: none; }
}