/* -- Police locale : Mihaly Display --
   Une règle par variante (poids + style). woff2 est listé en premier
   (plus léger, mieux compressé) ; woff sert de repli pour les
   navigateurs plus anciens qui ne liraient pas le woff2. */

@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-Light.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-Light.woff')  format('woff');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-LightItalic.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-LightItalic.woff')  format('woff');
  font-weight:300;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-Regular.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-Regular.woff')  format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-Italic.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-Italic.woff')  format('woff');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-Bold.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-Bold.woff')  format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Mihaly Display';
  src: url('Mihaly_display_web/MihalyDisplay-BoldItalic.woff2') format('woff2'),
       url('Mihaly_display_web/MihalyDisplay-BoldItalic.woff')  format('woff');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
    /* -- Palette "diurne" -- */
    --fond: #f8f8f8;
    --fond-carte: #ffffff;
    --papier: #221c18;
    --papier-att: #6f665b;
    --accent: #9b0810;
    --accent-clair: #c23a3f;
    --trait: #d5d5d5;

    /* -- Réservé au pied de page, qui reste sombre -- */
    --fond-sombre: #14161a;
    --trait-sombre: #2e3138;
    --papier-sombre-att: #a49e90;
  }
  html{ scrollbar-gutter: stable; }
  *{ box-sizing:border-box; }
  html{ min-height:100%; }
  body{
    background:var(--fond); color:var(--papier); font-family:'Work Sans', sans-serif; margin:0;
    display:flex; flex-direction:column; min-height:100vh;
  }

  header.site{
    background:var(--fond);
    border-bottom:1px solid var(--trait); padding:2rem 0 1.5rem;
  }
  header.site .conteneur{ max-width:1180px; margin:0 auto; padding:0 1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
  header.site h1{ font-family:'Mihaly Display', serif; font-weight:400; font-size:1.5rem; letter-spacing:.02em; margin:0; }
  header.site nav a{ color:var(--papier-att); text-decoration:none; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-left:1.75rem; }
  header.site nav a:hover, header.site nav a.actif{ color:var(--accent); }

  /* -- Sélecteur de langue, injecté par filtre-langue.js
     uniquement sur les pages contenant un texte traduit -- */
  #selecteur-langue{
    font-family:'Work Sans', sans-serif; font-size:.78rem; letter-spacing:.06em;
    color:var(--papier-att); background:transparent; border:1px solid var(--trait);
    border-radius:4px; padding:.3rem .5rem; margin-left:1.25rem; cursor:pointer;
  }
  #selecteur-langue:hover{ color:var(--accent); border-color:var(--accent); }

  /* -- Repère local "Disponible en : FR · DE", inséré par
     filtre-langue.js juste au-dessus d'un texte traduit -- */
  .langues-disponibles{
    font-size:.72rem; letter-spacing:.04em; color:var(--papier-att);
    margin-bottom:.6rem; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  }
  .langues-disponibles button{
    font-family:inherit; font-size:inherit; letter-spacing:inherit;
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    color:var(--papier-att); text-decoration:underline; text-underline-offset:2px;
  }
  .langues-disponibles button.actif{ color:var(--accent); font-weight:600; text-decoration:none; cursor:default; }

  /* -- Étiquette "meta" : auteur / lieu / date, réutilisée telle
     quelle sur .expo-entree, .texte-entree et .entretien -- */
  .meta{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); line-height:1.5; }

  .intitule{ width:100%; max-width:1180px; margin:2.5rem auto 0; padding:0 1.5rem; }
  .intitule .eyebrow{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .intitule h2{ font-family:'Mihaly Display', serif; font-weight:300; font-style:italic; font-size:clamp(1.9rem, 4vw, 2.9rem); margin:.4rem 0 0; }

  /* -- Barre de filtres -- */
  .filtre{
    width:100%; max-width:1180px; margin:2rem auto 0; padding:0 1.5rem 1.25rem;
    display:flex; flex-wrap:wrap; align-items:center; gap:1.75rem;
    border-bottom:1px solid var(--trait);
  }
  .filtre fieldset{ border:none; margin:0; padding:0; display:flex; gap:.6rem; flex-wrap:wrap; }
  .filtre legend{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--papier-att); margin-bottom:.5rem; width:100%; }
  .filtre .categories{ display:flex; flex-direction:column; }
  .filtre .categories span{ position:relative; display:inline-flex; }

  .filtre .categories label{
    font-size:.78rem; letter-spacing:.05em;
    color:var(--papier-att);
    border:1px solid var(--trait);
    padding:.5rem 1rem;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:.5rem;
    transition:.15s ease;
  }
  .filtre .categories label:hover{ color:var(--papier); border-color:var(--papier-att); }
  .filtre .categories input:checked + label{ color:var(--fond); background:var(--accent); border-color:var(--accent); }
  .filtre .categories input{ position:absolute; opacity:0; pointer-events:none; }

  .filtre .periode{ display:flex; flex-direction:column; gap:.6rem; min-width:220px; }
  .filtre .periode .etiquettes{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--papier-att); }
  .filtre .periode .etiquettes strong{ color:var(--accent); font-weight:600; }

  /* -- Double-curseur (deux <input type=range> superposés) -- */
  .double-curseur{
    position:relative;
    height:1.6rem;   /* assez de hauteur pour que les deux curseurs restent cliquables */
  }
  .double-curseur .piste{
    position:absolute; top:50%; left:0; right:0; height:2px;
    background:var(--trait); transform:translateY(-50%);
  }
  .double-curseur .piste-active{
    position:absolute; top:50%; height:2px;
    background:var(--accent); transform:translateY(-50%);
  }
  .double-curseur input[type="range"]{
    position:absolute; top:0; left:0; width:100%; height:1.6rem;
    margin:0; background:transparent;
    -webkit-appearance:none; appearance:none;
    pointer-events:none;   /* la piste elle-même n'intercepte plus le clic */
  }
  /* Seul le "carré" (le thumb) redevient cliquable/glissable */
  .double-curseur input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    pointer-events:auto;
    width:14px; height:14px;
    background:var(--accent);
    border:2px solid var(--fond);
    cursor:pointer;
    margin-top:0;
  }
  .double-curseur input[type="range"]::-moz-range-thumb{
    pointer-events:auto;
    width:14px; height:14px; border-radius:0;
    background:var(--accent); border:2px solid var(--fond); cursor:pointer;
  }
  .double-curseur input[type="range"]::-webkit-slider-runnable-track{ background:transparent; }
  .double-curseur input[type="range"]::-moz-range-track{ background:transparent; }

  .filtre .resultat{ margin-left:auto; font-size:.75rem; color:var(--papier-att); letter-spacing:.05em; }

  /* -- Grille "planche-contact" adaptative -- */
  .galerie{
    width:100%; max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem 4rem;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:2.2rem 1.8rem;
  }
  .oeuvre{
    background:var(--fond-carte); border:1px solid var(--trait); overflow:hidden;
    display:flex; flex-direction:column;
    text-decoration:none; color:inherit; /* .oeuvre est maintenant un <a> */
    transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
  }
  .oeuvre:hover{
    border-color:var(--accent);
    transform:translateY(-6px);
  }
  .oeuvre:hover h3{ color:var(--accent); }
  .oeuvre .cadre{
    aspect-ratio:4/3;
    background:repeating-linear-gradient(135deg, #23262c, #23262c 10px, #1c1f24 10px, #1c1f24 20px);
    display:flex; align-items:center; justify-content:center;
    color:var(--papier-att); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  }
  /* Une vraie photo remplace le <div class="cadre"> : même format 4:3
     uniforme que le placeholder, recadrée proprement (object-fit:cover)
     pour que la grille de la page "Projets personnels" reste régulière —
     contrairement à la planche-contact libre des pages série. */
  .oeuvre img{
    display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  }
  .oeuvre .texte{ padding:1.1rem 1.25rem 1.4rem; }
  .oeuvre .categorie{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
  .oeuvre h3{ font-family:'Mihaly Display', serif; font-weight:400; font-style:italic; font-size:1.15rem; margin:.35rem 0 .5rem; transition:color .2s ease; }
  .oeuvre p{ font-size:.87rem; line-height:1.5; color:var(--papier-att); margin:0 0 .5rem; }
  .oeuvre .annee{ font-size:.75rem; color:var(--papier-att); opacity:.7; }

  /* Classe ajoutée/retirée par JavaScript pour masquer une œuvre :
     un fondu plutôt qu'une disparition sèche. Limite rapide à
     connaître : la vignette masquée garde sa place dans la grille
     le temps du fondu (pas de recomposition animée de la grille) —
     un vrai réagencement fluide demanderait plus de temps à régler proprement. */
  .oeuvre.masquee{ opacity:0; transform:scale(.97); pointer-events:none; }

  footer.site{
    background:var(--fond-sombre);
    border-top:1px solid var(--trait-sombre);
    padding:2rem 1.5rem; text-align:center;
    color:var(--papier-sombre-att); font-size:.8rem;
    margin-top:auto;
  }

  /* ============================================================
     Page d'accueil — sommaire
     ============================================================ */

  .sommaire{
    max-width:820px; margin:0 auto; padding:4.5rem 1.5rem 5rem;
  }

  .sommaire-nom{
    font-family:'Mihaly Display', serif;
    font-weight:400;
    font-size:clamp(2.4rem, 7vw, 4.2rem);
    margin:0 0 1rem;
    line-height:1.05;
  }

  .sommaire-intro{
    max-width:46ch;
    color:var(--papier-att);
    font-size:1rem;
    line-height:1.6;
    margin:0 0 3.5rem;
  }

  .sommaire-liste{ display:flex; flex-direction:column; }

  .entree{
    display:flex; align-items:baseline; gap:1.5rem;
    text-decoration:none; color:var(--papier);
    padding:1.6rem 0;
    border-top:1px solid var(--trait);
    transition:padding-left .2s ease, color .2s ease;
  }
  .sommaire-liste .entree:last-child{ border-bottom:1px solid var(--trait); }

  .entree:hover{ padding-left:.6rem; color:var(--accent); }

  .entree .numero{
    font-family:'Work Sans', sans-serif;
    font-size:.78rem; letter-spacing:.05em;
    color:var(--accent);
    min-width:2rem;
  }

  .entree .titre{
    font-family:'Mihaly Display', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.3rem, 3vw, 1.7rem);
    flex:0 0 auto;
  }

  .entree .desc{
    font-size:.82rem;
    color:var(--papier-att);
    margin-left:auto;
    text-align:right;
    max-width:22ch;
  }

  @media (max-width: 640px){
    .entree{ flex-wrap:wrap; }
    .entree .desc{ margin-left:2rem; text-align:left; }
  }

  /* ============================================================
     Page série (ex. ACCMADIAL, Franco-hongrois)
     ============================================================ */

  .entete-serie{
    width:100%; max-width:1180px; margin:0 auto; padding:3rem 1.5rem 0;
  }
  .entete-serie .eyebrow{
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  }
  .entete-serie h2{
    font-family:'Mihaly Display', serif; font-weight:400;
    font-size:clamp(2rem, 5vw, 3.2rem);
    margin:.4rem 0 .3rem;
  }
  .entete-serie .sous-titre{
    font-family:'Mihaly Display', serif; font-style:italic; font-weight:300;
    font-size:1.15rem; color:var(--papier-att); margin:0 0 1.6rem;
  }
  .entete-serie .intro{
    max-width:62ch; font-size:.95rem; line-height:1.7; color:var(--papier);
    padding-bottom:2rem; border-bottom:1px solid var(--trait);
  }

  /* -- Planche-contact en colonnes CSS : chaque image garde son
     propre format, pas de recadrage forcé, pas de JS. -- */
  .planche-contact{
    width:100%; max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem;
    column-count:3; column-gap:1.4rem; column-fill:balance;
  }
  @media (max-width:900px){ .planche-contact{ column-count:2; } }
  @media (max-width:560px){ .planche-contact{ column-count:1; } }

  /* -- Une fois le JS de répartition passé (voir initMasonry dans
     script.js), on bascule en colonnes flexbox réelles : chaque
     colonne démarre exactement à la même hauteur, sur tous les
     navigateurs — plus besoin de l'algorithme column-count, qui
     est justement la source du décalage observé sur Safari. -- */
  .planche-contact.planche-js{
    column-count:unset; column-gap:unset; column-fill:unset;
    display:flex; align-items:flex-start; gap:1.4rem;
  }
  .planche-contact.planche-js .colonne{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; gap:1.6rem;
  }
  .planche-contact.planche-js figure{
    margin:0; break-inside:auto;
  }

  /* -- ombrees.html seulement : une colonne, une image par ligne,
     à pleine largeur, sans recadrage. -- */
  body.page-ombrees .planche-contact{
    column-count:1;
  }
  body.page-ombrees .planche-contact figure{
    max-width:100%; margin:0 0 2rem;
  }

  body.page-niepce .planche-contact{
    column-count:1;
  }
  body.page-niepce .planche-contact figure{
    max-width:100%; margin:0 0 2rem;
  }

  .planche-contact figure{
    margin:0 0 1.6rem; break-inside:avoid;
  }
  .planche-contact .cadre{
    width:100%;
    background:repeating-linear-gradient(135deg, #23262c, #23262c 10px, #1c1f24 10px, #1c1f24 20px);
  }
  /* Une vraie photo remplace entièrement le <div class="cadre"> —
     elle prend sa propre hauteur naturelle, pas de recadrage. */
  .planche-contact img{
    display:block; width:100%; height:auto;
  }
  .planche-contact figcaption{
    text-align:left;
    font-size:.72rem; color:var(--papier-att); line-height:1.4;
    margin-top:.5rem;
  }


  /* -- Visionneuse plein écran : clic sur une image l'agrandit sur
     fond gris foncé (le même gris que les placeholders), clic à
     nouveau referme. -- */
  .planche-contact figure{ cursor:zoom-in; }

  .visionneuse{
    position:fixed; inset:0; background:#1c1f24;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
    padding:1.5rem;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:1000; cursor:zoom-out;
  }
  .visionneuse.active{ opacity:1; pointer-events:auto; }
  .visionneuse .cadre-grand{
    width:90vw; height:82vh;
    object-fit:contain;   /* remplit le cadre en gardant les proportions, quitte à agrandir une petite image au-delà de sa taille native */
  }
  .visionneuse .legende-grande{
    margin:0; color:var(--papier-sombre-att);
    font-size:.82rem; letter-spacing:.03em; text-align:center;
  }

  /* ============================================================
     Navigation — lisible sur ordinateur, menu bouton sur mobile
     ============================================================ */

  .nav-desktop{ display:block; }

  /* -- Bouton : réservé au mobile, carré blanc à contour noir,
     trois lignes fines noires (inverse du bouton précédent). -- */
  .menu-bouton{
    display:none;
    width:44px; height:44px; flex-shrink:0;
    background:#ffffff; border:1px solid #14161a; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
  }
  .menu-bouton .ligne{
    display:block; height:1px; background:#14161a;
    transition:transform .25s ease, opacity .2s ease;
  }
  .menu-bouton .ligne:nth-child(1){ width:20px; }
  .menu-bouton .ligne:nth-child(2){ width:13px; }
  .menu-bouton .ligne:nth-child(3){ width:20px; }

  /* -- Transformation en croix à l'ouverture -- */
  .menu-bouton.ouvert .ligne:nth-child(1){ width:20px; transform:translateY(6px) rotate(45deg); }
  .menu-bouton.ouvert .ligne:nth-child(2){ opacity:0; }
  .menu-bouton.ouvert .ligne:nth-child(3){ width:20px; transform:translateY(-6px) rotate(-45deg); }

  /* -- Panneau, version puriste : pas d'habillage sombre ni de
     glissement latéral — un simple accordéon sous l'en-tête, dans
     la même palette claire que le reste du site. -- */
  .menu-panneau{
    max-height:0; overflow:hidden;
    background:var(--fond);
    border-bottom:0 solid var(--trait);
    transition:max-height .3s ease;
  }
  .menu-panneau.ouvert{
    max-height:22rem;
    border-bottom:1px solid var(--trait);
  }
  .menu-panneau a{
    display:block;
    padding:1rem 1.5rem;
    max-width:1180px; margin:0 auto;
    font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--papier); text-decoration:none;
    border-top:1px solid var(--trait);
    transition:color .2s ease;
  }
  .menu-panneau a:hover{ color:var(--accent); }

  @media (max-width:780px){
    .nav-desktop{ display:none; }
    .menu-bouton{ display:flex; }
  }

  /* ============================================================
     Expositions — une seule page, une entrée par exposition
     ============================================================ */
  .expo-entree{
    width:100%; max-width:1180px; margin:0 auto; padding:1.8rem 1.5rem;
    border-bottom:1px solid var(--trait);
  }
  .expo-entree:first-of-type{ padding-top:2.5rem; }
  .expo-entree h2{
    font-family:'Mihaly Display', serif; font-weight:400; font-style:italic;
    font-size:clamp(1.4rem, 3vw, 1.8rem); margin:.2rem 0 .5rem;
  }
  .expo-entree .intro{
    max-width:62ch; font-size:.88rem; line-height:1.6; color:var(--papier-att);
    margin:0 0 2rem;
  }

  /* -- Vignette (première image de la galerie) à gauche du titre,
     texte à droite ; empilés l'un sur l'autre en dessous de 700px -- */
  .expo-entete{
    display:flex; gap:1.2rem; align-items:flex-start; margin-bottom:.8rem;
  }
  .vignette-expo{
    flex:0 0 220px; width:220px; height:auto; display:block;
  }
  .expo-texte{ flex:1 1 0; min-width:0; }
  .expo-texte .intro{ margin-bottom:0; }
  @media (max-width:700px){
    .expo-entete{ flex-direction:column; }
    .vignette-expo{ width:100%; max-width:260px; }
  }

  /* -- Galerie repliable, comme "Lire la suite" sur textes.html --
     même mécanique, même signe "+" qui tourne, juste renommé
     "Voir l'expo" / "Fermer". Les entrées sans galerie n'affichent
     simplement pas ce bouton. -- */
  .expo-entree details summary{
    cursor:pointer; list-style:none;
    font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
    display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.6rem;
  }
  .expo-entree details summary::-webkit-details-marker{ display:none; }
  .expo-entree details summary .txt-fermer{ display:none; }
  .expo-entree details[open] summary .txt-lire{ display:none; }
  .expo-entree details[open] summary .txt-fermer{ display:inline; }
  .expo-entree details summary::after{
    content:"+"; color:var(--accent); font-size:1rem;
    display:inline-block; transition:transform .2s ease;
  }
  .expo-entree details[open] summary::after{ transform:rotate(45deg); }
  .expo-entree details summary:hover{ color:var(--accent); }

  .expo-actions{
    width:100%;
  }
  .lien-projet-inline{ color:var(--papier-att); }

  /* ============================================================
     Films — deux par rangée sur ordinateur
     ============================================================ */
  .films-section{ width:100%; max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem 0; }
  .films-section .eyebrow{
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
    margin-bottom:1.5rem; display:block;
  }
  .films-grille{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:2.5rem 2rem;
    align-items:start; padding-bottom:3rem;
  }
  @media (max-width:700px){ .films-grille{ grid-template-columns:1fr; } }

  .film{
    display:flex; flex-direction:column;
    margin-bottom:2.5rem;
  }
  .film .ecran{
    aspect-ratio:16/9; width:100%;
    background:repeating-linear-gradient(135deg, #23262c, #23262c 10px, #1c1f24 10px, #1c1f24 20px);
  }
  .film h3{
    font-family:'Mihaly Display', serif; font-style:italic; font-weight:400;
    font-size:1.15rem; margin:.9rem 0 .3rem;
  }
  .film p{ font-size:.85rem; color:var(--papier-att); line-height:1.5; margin:0; }

  /* ============================================================
     Textes — extrait + "lire la suite" natif (<details>)
     ============================================================ */
  .texte-entree{
    width:100%; max-width:1180px; margin:0 auto; padding:2.4rem 1.5rem;
    border-top:1px solid var(--trait);
    transition:opacity .25s ease, transform .25s ease;
  }
  .texte-entree.masquee{ opacity:0; transform:scale(.98); pointer-events:none; }
  .texte-entree > *{ max-width:65ch; }

  .texte-entree h2{
    font-family:'Mihaly Display', serif; font-weight:400; font-style:italic;
    font-size:1.4rem; margin:.4rem 0 1rem; max-width:32rem;
  }
  .texte-entree .extrait{ font-size:.92rem; line-height:1.7; color:var(--papier); margin:0 0 .8rem; }

  .texte-entree details summary{
    cursor:pointer; list-style:none;
    font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--papier-att);
    display:inline-flex; align-items:center; gap:.4rem;
  }
  .texte-entree details summary::-webkit-details-marker{ display:none; }
  .texte-entree details summary .txt-fermer{ display:none; }
  .texte-entree details[open] summary .txt-lire{ display:none; }
  .texte-entree details[open] summary .txt-fermer{ display:inline; }
  .texte-entree details summary::after{
    content:"+"; color:var(--accent); font-size:1rem;
    display:inline-block; transition:transform .2s ease;
  }
  .texte-entree details[open] summary::after{ transform:rotate(45deg); }
  .texte-entree details summary:hover{ color:var(--accent); }
  .texte-entree details .suite{
    font-size:.92rem; line-height:1.7; color:var(--papier); margin-top:1rem;
  }

  /* -- Actions d'une entrée : "découvrir en images" + "télécharger en PDF" -- */
  .actions-texte{ display:flex; flex-wrap:wrap; gap:1.8rem; margin:0 0 1.4rem; }
  .telecharger-pdf{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--papier); text-decoration:none;
  }
  .telecharger-pdf svg{ color:var(--accent); transition:transform .15s ease; }
  .telecharger-pdf:hover{ color:var(--accent); }
  .telecharger-pdf:hover svg{ transform:translateY(3px); }

  /* -- Badge "PDF", à la place d'écrire le mot en toutes lettres -- */
  .badge-pdf{
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid currentColor; color:var(--accent);
    font-size:.62rem; letter-spacing:.04em; font-weight:600;
    padding:.15rem .32rem; line-height:1;
  }

  /* -- Lien "Fermer l'article", en bas du texte déroulé -- */
  .fermer-article{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--trait); }
  .lien-fermer{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--papier-att); text-decoration:none; cursor:pointer;
  }
  .lien-fermer svg{ color:var(--accent); transition:transform .15s ease; }
  .lien-fermer:hover{ color:var(--accent); }
  .lien-fermer:hover svg{ transform:translateY(-3px); }

  /* ============================================================
     Actualités — liste chronologique
     ============================================================ */
  .actu-liste{ max-width:820px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
  .actu-entree{
    display:flex; gap:1.8rem; padding:1.4rem 0;
    border-top:1px solid var(--trait);
  }
  .actu-liste .actu-entree:last-child{ border-bottom:1px solid var(--trait); }
  .actu-entree .date{
    flex:0 0 auto; width:5.5rem;
    font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  }
  .actu-entree .contenu p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--papier); }
  .actu-entree .contenu a{ color:inherit; }

  /* ============================================================
     CV
     ============================================================ */
  .cv-corps{ width:min(100%, 1180px); margin:0 auto; padding:2.5rem 1.5rem 4rem; }
  .cv-corps section{ margin-bottom:2.4rem; }
  .cv-corps h2{
    font-family:'Mihaly Display', serif; font-weight:400; font-style:italic;
    font-size:1.3rem; margin:0 0 1rem; padding-bottom:.6rem; border-bottom:1px solid var(--trait);
  }
  .cv-corps .cadre{
    background:repeating-linear-gradient(135deg, #23262c, #23262c 10px, #1c1f24 10px, #1c1f24 20px);
    aspect-ratio:4/3;
  }
  .cv-expos-collectives{
    display:flex; gap:1.2rem; flex-wrap:wrap; width:100%; margin:0 0 2rem;
  }
  .cv-expos-collectives figure{ flex:1 1 280px; max-width:320px; margin:0; }
  .cv-expos-collectives figcaption{
    font-size:.75rem; color:var(--papier-att); margin-top:.5rem; line-height:1.4;
  }

  .cv-corps p, .cv-corps li{ font-size:.9rem; line-height:1.7; color:var(--papier); max-width:800px; }
  .cv-corps ul{ margin:0; padding-left:1.1rem; }
  /* ============================================================
     Variante "entretien" pour une page série (ex. ACCMADIAL) —
     dialogue entrelacé, en exception au gabarit standard.
     ============================================================ */

  /* -- Lien d'entrée vers la planche-contact, en haut de page -- */
  .decouvrir-images{
    display:inline-flex; align-items:center; gap:.5rem;
    max-width:1180px; margin:0 auto; padding:0 1.5rem;
    font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--papier); text-decoration:none;
  }
  .decouvrir-images svg{ color:var(--accent); transition:transform .15s ease; }
  .texte-entree .decouvrir-images{ max-width:none; padding:0; margin:0; }
  .decouvrir-images:hover{ color:var(--accent); }
  .decouvrir-images:hover svg{ transform:translate(-3px, -3px); }

  .entretien{
    width:100%; max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem 1rem;
  }
  .entretien p{ max-width:65ch; }
  .entretien .meta{
    margin-bottom:.3rem;
  }
  .entretien .sous-titre{
    font-family:'Mihaly Display', serif; font-style:italic; font-weight:400;
    font-size:1.1rem; color:var(--papier-att); line-height:1.4; margin:0 0 .3rem;
  }
  .entretien .date{
    font-size:.78rem; color:var(--papier-att); margin-bottom:2rem; display:block;
  }
  .entretien .intervenant, .suite .intervenant{
    font-family:'Mihaly Display', serif; font-style:italic; font-weight:400;
    font-size:1.05rem; color:var(--accent);
    margin:2.2rem 0 .5rem;
    padding-top:1.6rem; border-top:1px solid var(--trait);
  }
  .entretien .intervenant:first-of-type, .suite .intervenant:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
  .entretien p, .suite p{
    font-size:.95rem; line-height:1.8; color:var(--papier); margin:0 0 .9rem;
  }

  /* ============================================================
     Navigation chronologique entre projets
     ============================================================ */

  /* -- Barre du bas, sur tous les écrans -- */
  .nav-projets{
    width:100%; max-width:1180px; margin:2.5rem auto 0; padding:1.5rem 1.5rem 3rem;
    border-top:1px solid var(--trait);
    display:flex; justify-content:space-between; gap:1.5rem;
  }
  .nav-projets a{
    display:flex; flex-direction:column; text-decoration:none; color:var(--papier);
    flex:1 1 0;
  }
  .nav-projets .sens{
    font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--papier-att);
    margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem;
  }
  .nav-projets .sens svg{
    width:20px; height:20px; flex-shrink:0;
    transition:transform .15s ease;
  }
  .nav-projets .date-projet{
    font-size:.72rem; color:var(--accent); letter-spacing:.03em; margin-bottom:.15rem;
  }
  .nav-projets .titre-projet{
    font-family:'Mihaly Display', serif; font-style:italic; font-weight:400; font-size:1.05rem;
  }
  .nav-projets a:hover{ color:var(--accent); }
  .nav-projets a:hover .sens{ color:var(--accent); }
  .nav-projets .precedent:hover .sens svg{ transform:translateX(-3px); }
  .nav-projets .suivant{ text-align:right; margin-left:auto; }
  .nav-projets .suivant .sens{ justify-content:flex-end; }
  .nav-projets .suivant:hover .sens svg{ transform:translateX(3px); }

  /* -- Bonus : flèches fixes sur les bords, seulement si l'écran est
     assez large pour ne rien retirer aux 1180px de contenu -- */
  .fleche-laterale{ display:none; }
  @media (min-width:1500px){
    .fleche-laterale{
      display:flex; align-items:flex-start; gap:.7rem;
      position:fixed; top:50%; transform:translateY(-50%);
      text-decoration:none; color:var(--papier-att);
      opacity:.55; transition:opacity .2s ease;
      font-size:.78rem; z-index:400; width:200px;
    }
    .fleche-laterale:hover{ opacity:1; color:var(--accent); }
    .fleche-laterale svg{ flex-shrink:0; width:20px; height:20px; margin-top:.2rem; transition:transform .15s ease; }
    .fleche-laterale.gauche{ left:1.5rem; }
    .fleche-laterale.gauche:hover svg{ transform:translateX(-4px); }
    .fleche-laterale.droite{ right:1.5rem; flex-direction:row-reverse; text-align:right; }
    .fleche-laterale.droite:hover svg{ transform:translateX(4px); }
    .fleche-laterale .contenu-lateral{ display:flex; flex-direction:column; }
    .fleche-laterale .date-lateral{ font-size:.72rem; color:var(--accent); margin-bottom:.2rem; }
    .fleche-laterale .titre-lateral{
      font-family:'Mihaly Display', serif; font-style:italic;
      line-height:1.3; /* plus de troncature : le titre peut passer sur plusieurs lignes */
    }
    /* La barre du bas devient redondante dès que les flèches latérales
       apparaissent — on ne garde qu'un seul jeu de liens à la fois. */
    .nav-projets{ display:none; }
  }

  /* ============================================================
     Thème sombre — page Films uniquement (immersion "salle de
     projection"). Scopé à body.page-films, aucune autre page
     n'est concernée.
     ============================================================ */
  body.page-films{ background:var(--fond-sombre); color:var(--fond); }

  body.page-films header.site{ background:var(--fond-sombre); border-bottom-color:var(--trait-sombre); }
  body.page-films header.site h1{ color:var(--fond); }
  body.page-films .nav-desktop a{ color:var(--papier-sombre-att); }
  body.page-films .nav-desktop a:hover, body.page-films .nav-desktop a.actif{ color:var(--accent); }

  body.page-films .menu-panneau{ background:var(--fond-sombre); }
  body.page-films .menu-panneau.ouvert{ border-bottom-color:var(--trait-sombre); }
  body.page-films .menu-panneau a{ color:var(--fond); border-top-color:var(--trait-sombre); }
  body.page-films .menu-panneau a:hover{ color:var(--accent); }

  body.page-films .films-section{ border-top-color:var(--trait-sombre) !important; }
  body.page-films .film h3{ color:var(--fond); }
  body.page-films .film p{ color:var(--papier-sombre-att); }