/* Polices intégrées au fichier (licence SIL Open Font License) : même rendu sur ordinateur et téléphone, même hors connexion */
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/grenze-gotisch-500.woff2) format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/grenze-gotisch-700.woff2) format('woff2')}
@font-face{font-family:'UnifrakturCook';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/unifrakturcook-700.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/barlow-300.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-600.woff2) format('woff2')}

/* =========================================================
   PALETTE — nocturne, gothique
   nuit    : fond principal (anthracite chaud)
   charbon : fond des sections alternées
   os      : blanc cassé des titres et du texte
   cendre  : texte secondaire
   or      : étoiles, rayons, accents
   ========================================================= */
:root{
  --nuit:#1C1B1A;
  --charbon:#242321;
  --suie:#141312;
  --os:#EEEAE1;
  --cendre:#A19C92;
  --cendre-sombre:#6B675F;
  --or:#D1A54B;
  --ligne:rgba(238,234,225,.16);

  --gothique:"Grenze Gotisch", "UnifrakturMaguntia", "Old English Text MT", serif;   /* titres */
  --texte:"Barlow", "Helvetica Neue", Arial, sans-serif;                      /* texte et petites capitales */

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:7rem; --s7:11rem;
  --marge:clamp(1.25rem, 5vw, 5rem);
  --entete:4rem;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--entete);background:var(--nuit)}
body{
  background:var(--nuit);color:var(--os);
  font-family:var(--texte);font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--or);outline-offset:4px}

/* grain de pellicule sur toute la page */
body::before{content:none}

/* images : noir et blanc, contrastées */
.vue{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.88)}
.cadre{overflow:hidden;background:var(--charbon);position:relative}

/* petites capitales espacées (les « labels » de la référence) */
.label{
  font-family:var(--texte);font-weight:600;font-size:.66rem;line-height:1.6;
  letter-spacing:.28em;text-transform:uppercase;color:var(--os);
}
.label.doux{color:var(--cendre)}
.label.or{color:var(--or)}

/* étoile à quatre branches */
.etoile{width:1.6rem;height:1.6rem;color:var(--or);flex:none}
.etoile.petite{width:1rem;height:1rem}
.etoile.grande{width:2.4rem;height:2.4rem}
.etoile.blanche{color:var(--os)}

/* numéro de page en haut à gauche + titre vertical sur la tranche */
.folio{position:absolute;top:var(--s3);left:var(--marge);font-family:var(--gothique);font-weight:500;font-size:1.1rem;color:var(--cendre);z-index:4}
.tranche{
  position:absolute;left:calc(var(--marge) * .4);bottom:var(--s5);z-index:4;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:600;font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cendre-sombre);
}

/* titres gothiques */
.gothique{font-family:var(--gothique);font-weight:700;line-height:.95;letter-spacing:0}
.titre-section{font-size:clamp(3rem,9vw,8rem);color:var(--os)}
.titre-moyen{font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05}

/* pastille contour (l'URL de la référence) */
.pastille{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.55rem 1.4rem;border:1px solid var(--os);border-radius:999px;
  font-weight:600;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
  color:var(--os);background:transparent;transition:background .25s,color .25s;
}
a.pastille:hover{background:var(--os);color:var(--nuit)}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--marge);
  background:var(--nuit);border-bottom:1px solid var(--ligne);
}
.entete .signature{font-family:var(--gothique);font-weight:700;font-size:1.45rem;line-height:1;text-decoration:none}
.entete nav{display:flex;gap:clamp(1rem,3vw,2.4rem)}
.entete nav a{text-decoration:none;font-weight:600;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cendre);transition:color .2s}
.entete nav a:hover{color:var(--or)}

/* =========================================================
   1. OUVERTURE — l'image en fond, un cadre noir arrondi posé dessus,
   texte centré et empilé (référence « Rituals for Good »)
   ========================================================= */
.ouverture{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,7vh,5rem) clamp(1rem,14vw,14rem);
}
.ouverture .fond{position:absolute;inset:0;z-index:-2}
.ouverture .fond .vue{object-position:50% 35%;filter:grayscale(1) sepia(.32) contrast(.92) brightness(1.2)}
/* voile de brume, comme le ciel délavé de la référence */
.ouverture .fond::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom, rgba(226,218,200,.28), rgba(226,218,200,.08) 45%, rgba(40,36,30,.35));
}

/* le cadre noir */
.cadre-noir{
  position:relative;width:100%;max-width:1060px;
  min-height:min(76vh,720px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(8.2rem,16vh,9.4rem) var(--s3);   /* marges haut et bas identiques : le bloc central est centré */
  background:#0E0D0C;border-radius:14px;text-align:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  overflow:hidden;
}
/* grain de papier noir dans le cadre */
/* TEXTURE DU CADRE — papier noir fibreux, fixe (référence « Rituals for Good ») :
   fibres horizontales, grain fin, quelques fibres et poussières éparses.
   La texture est une petite image en mosaïque, affichée à demi-taille pour rester nette sur écran Retina. */
.cadre-noir{
  background-color:#0B0A09;
  background-image:url("assets/images/texture-cadre.jpg");
  background-size:300px 300px;
}
.cadre-noir::before,.cadre-noir::after{content:none}
.cadre-noir > *{position:relative;z-index:1}
.cadre-noir .embleme{margin-top:1rem}   /* réserve la place du hibou posé au-dessus des rayons */
.cadre-noir .editeur{position:absolute;top:clamp(1.2rem,3vh,1.8rem);left:0;right:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.cadre-noir .editeur strong{font-weight:500;font-size:1rem;letter-spacing:-.01em;line-height:1.2}
.cadre-noir .editeur span{font-weight:600;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cendre)}

/* emblème : étoile et rayons dorés */
/* hibou couronné, dessiné par Ines, à la place de l'étoile */
.cadre-noir .editeur .hibou{position:static;display:block;width:3.2rem;height:auto;margin:.15rem auto 0}   /* collé sous « portfolio · 2026 » */
.embleme .etoile-rayons{position:absolute;left:calc(50% - .95rem);top:-.95rem;width:1.9rem;height:1.9rem;color:var(--or)}   /* au centre des rayons */   /* centré sur le départ des rayons */
/* hibou en signature au bas des sections */
.hibou-fin{position:absolute;left:50%;bottom:clamp(1.4rem,3vh,2.2rem);transform:translateX(-50%);width:clamp(2.4rem,3vw,3rem);height:auto;opacity:.9;pointer-events:none}
.pied .hibou-fin{position:static;transform:none;opacity:.9;justify-self:center}
footer.pied{display:grid;grid-template-columns:1fr auto 1fr}
footer.pied > :last-child{justify-self:end;text-align:right}
@media (max-width:640px){ footer.pied{grid-template-columns:1fr;justify-items:center;text-align:center} footer.pied > :last-child{justify-self:center;text-align:center} .pied .hibou-fin{order:-1} }
.embleme{position:relative;width:clamp(120px,15vw,190px);margin-bottom:clamp(.8rem,2.5vh,1.6rem);color:var(--or)}
.embleme .rayons{width:100%;margin:0}
.embleme .etoile{position:absolute;left:calc(50% - 1.3rem);top:-1.3rem;width:2.6rem;height:2.6rem}

/* titre empilé, lignes serrées */
.titre-couverture{
  font-family:var(--gothique);font-weight:700;color:#EDE4CF;
  font-size:clamp(4.2rem,8.5vw,8rem);line-height:.8;
  display:flex;flex-direction:column;align-items:center;
}
.titre-couverture span:last-child{margin-top:.02em}
.sous-titre{margin-top:clamp(1.2rem,3vh,2rem);font-weight:400;font-size:.82rem;color:var(--cendre);letter-spacing:.01em}

/* bouton crème aux extrémités en pointe, losanges aux bouts */
.bouton-pointe{
  --pointe:.7rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:var(--s3);padding:.6rem 2.2rem;
  background:#EDE4CF;color:#0E0D0C;text-decoration:none;
  font-weight:600;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  clip-path:polygon(var(--pointe) 0,calc(100% - var(--pointe)) 0,100% 50%,calc(100% - var(--pointe)) 100%,var(--pointe) 100%,0 50%);
  transition:background .25s;
}
.bouton-pointe::before,.bouton-pointe::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;background:#0E0D0C;transform:translateY(-50%) rotate(45deg);
}
.bouton-pointe::before{left:calc(var(--pointe) + 2px)}
.bouton-pointe::after{right:calc(var(--pointe) + 2px)}
.bouton-pointe:hover{background:var(--or)}

@media (prefers-reduced-motion:no-preference){
  .ouverture .fond .vue{animation:lent 3s cubic-bezier(.2,.7,.2,1) both}
  .cadre-noir{animation:apparait 1s .1s both}
  .titre-couverture{animation:monte 1.4s .35s cubic-bezier(.2,.7,.2,1) both}
  .embleme,.cadre-noir .editeur,.sous-titre,.bouton-pointe{animation:apparait 1.2s .9s both}
  .etoile.scintille{animation:scintille 3.2s ease-in-out infinite}
  @keyframes lent{from{transform:scale(1.12)}to{transform:scale(1.02)}}
  @keyframes monte{from{transform:translateY(18%);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
  @keyframes apparait{from{opacity:0}to{opacity:1}}
  @keyframes scintille{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
}

/* =========================================================
   2. À PROPOS — texte en colonnes à gauche, portrait en ogive à droite
   (image de référence, bandeau 2)
   ========================================================= */
.apropos{background:var(--charbon);padding:var(--s6) var(--marge);display:flex;align-items:center}
.bloc-artiste{
  width:100%;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
.bloc-textes h2{margin-bottom:var(--s4)}
.colonnes{font-size:.9em;color:var(--cendre)}   /* une seule colonne sur toute la largeur du bloc texte */
.colonnes p{break-inside:avoid}
.colonnes p + p{margin-top:var(--s2)}
/* parcours : Education / Experience côte à côte */
.parcours{margin-top:var(--s5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.parcours .label{margin-bottom:var(--s2)}
.entree + .entree{margin-top:var(--s3)}
.entree strong{display:block;font-weight:500;color:var(--os);line-height:1.35}
.entree span{display:block;font-size:.82em;color:var(--cendre);line-height:1.5;margin-top:.15rem}
.entree ul{list-style:none;margin-top:.5rem;font-size:.82em;color:var(--cendre);line-height:1.55}
.entree li{position:relative;padding-left:1.1rem}
.entree li::before{content:"✦";position:absolute;left:0;top:.05em;color:var(--or);font-size:.8em}
@media (max-width:560px){ .parcours{grid-template-columns:1fr} }

.autel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;gap:clamp(.6rem,2vw,1.6rem);
  justify-self:center;width:min(100%,460px);
}
.vertical{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--gothique);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1;white-space:nowrap;
}
.ogive-bloc{position:relative;display:flex;flex-direction:column;align-items:center}
.ogive-bloc .etoile{position:absolute;top:-.4rem}
.ogive-bloc .etoile.g{left:-1.8rem}
.ogive-bloc .etoile.d{right:-2.6rem;top:1.2rem}
.ogive{
  width:100%;aspect-ratio:3/4.3;margin:0;
  clip-path:url(#ogive);
}
.ogive .vue{object-position:50% 30%}
.ogive-bloc .pastille{margin-top:var(--s3);position:relative;z-index:2;background:var(--charbon);width:100%}
/* VERSION BOUCLIER : bandeau noir, filets rouges et blancs, inscription blanche */
/* PIERRE GRAVÉE — bandeau à inscription qui épouse l'ogive du portrait (d'après une plate-tombe médiévale) :
   double filet de part et d'autre, texte en textura qui suit l'arc ; le bas reste ouvert. */
.pierre{position:relative;width:100%;aspect-ratio:416/494}
.pierre > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pierre .ogive{position:absolute;left:14.90%;right:14.90%;top:12.15%;bottom:0.40%;width:auto;aspect-ratio:auto;margin:0}
.inscription{font-family:"UnifrakturCook","Grenze Gotisch",serif;font-weight:700;font-size:64px;fill:#EDE4CF;paint-order:stroke;stroke:#242321;stroke-width:5px;stroke-linejoin:round}   /* lettres plus hautes que le bandeau : elles « mordent » les filets, un liseré sombre coupe les traits derrière elles */
.rayons{width:78%;height:auto;color:var(--or);margin-top:-2px}
.reseaux{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;row-gap:.4rem;margin-top:var(--s3)}   /* sous le cadre photo, centrés */
.reseaux li{display:flex;align-items:center}
.reseaux li + li::before{content:"";width:4px;height:4px;background:var(--or);transform:rotate(45deg);margin:0 1.1rem}
.reseaux a{display:block;font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--cendre)}
.reseaux a:hover{color:var(--or)}

/* =========================================================
   3. ÉCLATS — mosaïque triangulaire (image de référence, bandeau 3)
   ========================================================= */
.eclats{position:relative;aspect-ratio:16/8.5;min-height:420px;overflow:hidden;background:var(--suie)}
.eclat{position:absolute;inset:0;margin:0}
.eclat .vue{position:absolute;inset:0}
.eclat.gauche{clip-path:polygon(0 0,42% 0,54% 100%,0 100%)}
.eclat.gauche .vue{object-position:10% 40%;transform:scale(1.4);transform-origin:14% 38%;filter:grayscale(.35) sepia(.55) contrast(1.1) brightness(.8)}   /* seule image teintée, comme la rose */
.eclat.centre{clip-path:polygon(21% 0,79% 0,50% 100%);z-index:2}
.eclat.centre .vue{object-position:50% 25%;filter:grayscale(1) contrast(1.05) brightness(1.02)}
.eclat.droite{clip-path:polygon(70% 0,100% 0,100% 100%,58% 100%)}
.eclat.droite .vue{object-position:80% 50%}
/* tessons sombres texturés dans les coins */
.eclat.sombre{
  z-index:3;background:
    repeating-linear-gradient(118deg, rgba(238,234,225,.05) 0 1px, transparent 1px 9px),
    var(--suie);
}
.eclat.sombre.a{clip-path:polygon(0 58%,24% 100%,0 100%)}
.eclat.sombre.b{clip-path:polygon(100% 38%,100% 100%,82% 100%)}
.eclats .legende{
  position:absolute;z-index:4;left:50%;top:62%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;width:min(22rem,70%);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* =========================================================
   4. PROJETS
   ========================================================= */
.projets{padding:var(--s6) 0 var(--s6)}
.projets-tete{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin:0 var(--marge) var(--s6);padding-bottom:var(--s3);border-bottom:1px solid var(--ligne);
}
.projets-tete .droite{display:flex;align-items:center;gap:var(--s2);padding-bottom:1rem}

.projet{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:center;
  margin:0 var(--marge) var(--s7);
}
.projet.inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.projet:last-child{margin-bottom:0}
.projet .texte{max-width:34ch}
.projet h3{margin:var(--s2) 0}
.projet p{color:var(--cendre);font-size:.95em}
.projet .meta{margin-top:var(--s3)}
.projet .pastille{margin-top:var(--s4)}
.projet .label{font-size:.66rem}

/* A : image encadrée d'un filet décalé */
.encadre{position:relative}
.encadre::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--ligne);pointer-events:none}
.encadre .cadre{aspect-ratio:1600/848}
.encadre .vue{object-position:50% 40%;transition:filter .8s ease}
.encadre:hover .vue{filter:grayscale(.2) contrast(1.05) brightness(.95)}
.encadre .etoile{position:absolute;right:-.9rem;top:-.9rem;z-index:2}

/* B : losange étiré, avec son double en filet */
.losange-bloc{position:relative;width:min(70%,380px);margin:0 auto;aspect-ratio:3/5}
.losange{position:absolute;inset:0;clip-path:polygon(50% 0,100% 46%,50% 100%,0 46%)}
.losange-filet{position:absolute;inset:0;width:100%;height:100%;color:var(--os);opacity:.35;transform:translate(16px,-16px)}
.losange-bloc .etoile{position:absolute;left:-.4rem;top:18%}

/* C : panorama coupé en biais */
.projet.large{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.biais{grid-column:1/-1;aspect-ratio:21/8;margin:0;clip-path:polygon(0 16%,100% 0,100% 84%,0 100%)}
.projet.large h3{margin-top:0}

/* =========================================================
   5. ÉTUDES — frise d'ogives à faire défiler
   ========================================================= */
.pellicule-section{background:var(--charbon);padding:var(--s6) 0;overflow:hidden}
.pellicule-titre{margin:0 var(--marge) var(--s5);display:grid;grid-template-columns:auto 1fr;align-items:end;gap:var(--s2) var(--s5)}
.pellicule-titre p{max-width:34ch;color:var(--cendre);padding-bottom:1rem;justify-self:end;text-align:right}
.pellicule{position:relative;padding:var(--s4) 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.pellicule-piste{
  display:flex;gap:clamp(1.2rem,3vw,2.5rem);padding:0 var(--marge);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge);scrollbar-width:none;cursor:grab;
}
.pellicule-piste::-webkit-scrollbar{display:none}
.pellicule-piste.glisse{cursor:grabbing;scroll-snap-type:none;user-select:none}
.pellicule-piste.glisse img{pointer-events:none}
.image-film{flex:0 0 clamp(200px,22vw,300px);scroll-snap-align:start;margin:0;text-align:center}
.image-film .cadre{aspect-ratio:3/4.3;clip-path:url(#ogive)}
.image-film figcaption{margin-top:var(--s2)}
.pellicule-aide{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) var(--marge) 0}
.fleche{
  width:2.8rem;height:2.8rem;border-radius:50%;
  border:1px solid var(--ligne);background:transparent;color:var(--os);
  font-size:1rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.fleche:hover{background:var(--os);color:var(--nuit);border-color:var(--os)}
.fleche:disabled{opacity:.25;cursor:default;background:transparent;color:var(--os)}

/* =========================================================
   6. LOGICIELS ET COMPÉTENCES
   ========================================================= */
.competences{
  padding:var(--s6) var(--marge);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,7vw,7rem);
  align-content:center;max-width:1200px;margin:0 auto;
}
.competences h2,.competences h3{font-family:var(--gothique);font-weight:700;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05}
.logiciels{display:grid;gap:var(--s3);margin-top:var(--s4)}
.logiciel{margin:0;display:grid;grid-template-columns:56px 1fr;gap:var(--s3);align-items:center}
.icone{width:56px;height:56px;object-fit:contain;filter:grayscale(1) brightness(1.1);opacity:.85;transition:filter .3s,opacity .3s}
.logiciel:hover .icone{filter:none;opacity:1}
.logiciel figcaption strong{display:block;font-weight:600;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase}
.logiciel figcaption span{display:block;font-size:.9em;color:var(--cendre)}
.liste-savoir{list-style:none;margin-top:var(--s4)}
.liste-savoir li{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--ligne);color:var(--cendre)}
.liste-savoir li:last-child{border-bottom:1px solid var(--ligne)}
.liste-savoir .label{padding-top:.35em}

/* =========================================================
   7. CONTACT
   ========================================================= */
.contact{
  position:relative;overflow:hidden;
  background:var(--suie);
  padding:var(--s7) var(--marge) var(--s4);
  display:flex;flex-direction:column;justify-content:space-between;
}
.contact .soleil{position:absolute;right:0;top:0;width:clamp(360px,56vw,900px);height:auto;opacity:.35;pointer-events:none}
.contact h2{font-size:clamp(3.6rem,13vw,12rem);line-height:.9;position:relative}
.contact .accroche{margin-top:var(--s3);max-width:34ch;color:var(--cendre)}
/* liens de contact : liste verticale, pastilles de même largeur ; le CV plus bas, à part */
.bulles{display:grid;grid-template-columns:auto auto;align-items:center;width:max-content;max-width:100%;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.bulles .pastille.cv{margin-top:var(--s4);grid-column:1/-1;padding:1.25rem 2.6rem;font-size:.85rem}   /* plus grand, aligné sur la marge gauche */
/* icônes posées à gauche des boutons, hors de la zone cliquable */
.bulles .icone-lien{width:1.5rem;height:1.5rem;color:var(--os);display:block}
.icone-insta{background-color:currentColor;-webkit-mask:url("assets/icons/instagram.png") center/contain no-repeat;mask:url("assets/icons/instagram.png") center/contain no-repeat}
.bulles .pastille{padding:.9rem 1.8rem;font-size:.7rem}
.pied{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s7);padding-top:var(--s3);border-top:1px solid var(--ligne);
}
.pied .signe{display:flex;align-items:center;gap:.8rem}

/* =========================================================
   EFFET « PAGE APRÈS PAGE »
   ========================================================= */
html.defilement-doux{scroll-behavior:auto}
/* Écrans tactiles : défilement natif, sans aimantation entre les pages (l'accrochage donnait
   un défilement trop rapide suivi d'un freinage brutal). L'élan naturel du téléphone est conservé. */
@media (pointer:coarse){
  html{scroll-snap-type:none;scroll-behavior:auto}
  html .feuille{scroll-snap-align:none}
  body{overscroll-behavior-y:none}
}
.feuille{
  position:relative;scroll-snap-align:start;
  min-height:calc(100vh - var(--entete));
  min-height:calc(100svh - var(--entete));
}
.feuille.eclats{min-height:0}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:860px){
  .bloc-artiste,.projet,.projet.inverse,.projet.large,.competences{grid-template-columns:1fr}
  .projet.inverse .texte{order:2}
  .autel{width:min(100%,360px)}
  .pellicule-titre{grid-template-columns:1fr}
  .pellicule-titre p{justify-self:start;text-align:left;padding-bottom:0}
}
@media (max-width:640px){
  .entete{flex-wrap:wrap;row-gap:.5rem}
  .entete nav{gap:.9rem;flex-wrap:wrap}
  .entete nav a{letter-spacing:.18em}
  .ouverture{padding:var(--s3) var(--s2)}
  .cadre-noir{min-height:calc(100svh - var(--entete) - 3rem)}
  .eclats{aspect-ratio:4/5}
  .eclat.gauche{clip-path:polygon(0 0,30% 0,58% 100%,0 100%)}
  .eclat.centre{clip-path:polygon(8% 0,92% 0,50% 100%)}
  .eclat.droite{clip-path:polygon(78% 0,100% 0,100% 100%,52% 100%)}
  .eclats .legende{top:auto;bottom:12%}
  .liste-savoir li{grid-template-columns:1fr;gap:.2rem}
  .tranche{display:none}
  .ogive-bloc .etoile.d{right:-1.4rem}
  .encadre::before{inset:-8px 8px 8px -8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  a.pastille{transition:none}
}

/* Titres gothiques : même crème que « Ines Bakkouch » sur la première page */
:root{--creme:#EDE4CF}
.titre-couverture,.gothique,.titre-section,.vertical,.competences h2,.competences h3,.contact h2{color:var(--creme)}

/* ÉTOILE NETTE à quatre branches droites — remplace les rinceaux */
.etoile-nette{display:block;color:var(--or)}
.ogive-bloc .etoile-nette{position:absolute;z-index:3;width:clamp(1.8rem,2.6vw,2.4rem);height:auto;aspect-ratio:1;pointer-events:none}
.ogive-bloc .etoile-nette.g{left:-1.6rem;top:-.2rem}
.ogive-bloc .etoile-nette.d{right:-2.4rem;top:1.4rem;width:clamp(1.3rem,1.9vw,1.8rem)}
@media (max-width:640px){ .ogive-bloc .etoile-nette.g{left:-.5rem} .ogive-bloc .etoile-nette.d{right:-.5rem} }
.eclats .legende .etoile-nette{width:1.7rem;height:1.7rem;color:var(--os)}
@media (prefers-reduced-motion:no-preference){
  .etoile-nette.scintille{animation:scintille 3.2s ease-in-out infinite}
  .etoile-nette.d.scintille{animation-delay:1.1s}
}

/* bandeau image entre About me et Projects (modèle) */
.eclats{aspect-ratio:auto;min-height:0;background:var(--nuit)}
.bandeau-image{margin:0;width:100%;aspect-ratio:16/7;min-height:280px;overflow:hidden}
.bandeau-image .vue{width:100%;height:100%;object-fit:cover}
/* pied de page : texte encadré de deux losanges dorés, comme les liens sous le portrait */
.pied .signe{display:flex;align-items:center;gap:1.1rem}
.pied .losange-or{width:4px;height:4px;background:var(--or);transform:rotate(45deg);flex:none}

/* APPARITION EN CASCADE (inspirée des éditions Carmin) : chaque image entre à l'écran
   par un fondu et une légère montée, l'une après l'autre ; au survol, l'image se soulève. */
.motion-ready .revele{opacity:0;transform:translate3d(0,.9rem,0);
  transition:opacity 420ms ease-out,transform 560ms cubic-bezier(.22,1,.36,1);transition-delay:var(--delai,0ms)}
.motion-ready .revele.est-visible{opacity:1;transform:none}
.projet .encadre .cadre{transition:transform 180ms ease-out,box-shadow 180ms ease-out}
.projet .encadre:hover .cadre{transform:translateY(-4px);box-shadow:0 14px 24px -16px rgba(0,0,0,.8)}
@media (max-width:767px){ .motion-ready .revele{transform:translate3d(0,.5rem,0);transition-duration:360ms,480ms} }
@media (prefers-reduced-motion:reduce){ .motion-ready .revele{opacity:1!important;transform:none!important;transition:none!important}
  .image-film:hover .cadre,.projet .encadre:hover .cadre{transform:none} }

/* Studies : forme en ogive tenue par un masque (et non plus un clip-path), pour qu'elle
   reste intacte pendant les animations dans tous les navigateurs, y compris Safari. */
.image-film .cadre{clip-path:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0,1 L0,.46 C0,.24 .22,.08 .5,0 C.78,.08 1,.24 1,.46 L1,1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0,1 L0,.46 C0,.24 .22,.08 .5,0 C.78,.08 1,.24 1,.46 L1,1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.image-film .cadre,.image-film:hover .cadre{transform:none;box-shadow:none;transition:none}
.image-film{transition:transform 180ms ease-out}
.motion-ready .image-film.revele.est-visible:hover{transform:translateY(-4px);transition-delay:0ms}

/* marge dans la frise : la pointe de l'ogive n'est plus rognée quand l'image se soulève */
.pellicule-piste{padding-top:14px;padding-bottom:14px}

/* =========================================================
   PAGES SUPPLÉMENTAIRES — projets et studies
   ========================================================= */
/* accueil : vignettes de la frise cliquables, lien vers la page Studies */
.image-film a.cadre{display:block}
.pellicule-aide .voir-tout{margin-left:auto}
@media (max-width:640px){ .pellicule-aide{flex-wrap:wrap} .pellicule-aide .voir-tout{margin-left:0;width:100%} }

.entete nav a[aria-current="page"]{color:var(--or)}
.sous-page main{display:block}

/* en-tête de page */
.p-intro{padding:var(--s5) var(--marge) var(--s5);max-width:1400px;margin:0 auto}
.retour{display:inline-flex;gap:.6em;text-decoration:none;margin-bottom:var(--s5);transition:color .2s}
.retour:hover{color:var(--or)}
.p-intro-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.p-titre h1{margin-top:var(--s2);overflow-wrap:break-word}
.p-titre .rayons{width:min(220px,60%);margin:var(--s3) 0 0}
.p-texte{color:var(--cendre);max-width:52ch}
.p-texte > p + p{margin-top:var(--s2)}
.p-texte .label{margin-bottom:var(--s2)}
.fiche{margin-top:var(--s4)}
.fiche li{grid-template-columns:6.5rem 1fr}

/* image principale */
.p-couverture{margin:var(--s3) var(--marge) var(--s6);max-width:1400px}
@media (min-width:1560px){ .p-couverture{margin-left:auto;margin-right:auto} }
.p-couverture .cadre{display:block;aspect-ratio:auto}
.p-couverture .etoile{width:1.8rem;height:1.8rem}

/* sur les pages projets, les images gardent leurs couleurs */
.sous-page .piece .vue,.sous-page .p-couverture .vue{filter:none;height:auto}
.zoom{display:block;cursor:zoom-in}

/* blocs */
.p-bloc{padding:0 var(--marge) var(--s6);max-width:1400px;margin:0 auto}
.p-bloc-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--ligne)}
.p-note{max-width:48ch;color:var(--cendre);font-size:.95em}
.mosaique{columns:2;column-gap:clamp(1rem,2.5vw,2rem)}
.piece{margin:0 0 clamp(1rem,2.5vw,2rem);break-inside:avoid;background:var(--charbon)}
.piece .zoom{overflow:hidden}
.piece img{width:100%;height:auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.piece .zoom:hover img{transform:scale(1.025)}
.rangee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.rangee .piece{margin:0;background:none}
.rangee .piece .zoom{background:var(--charbon)}
.rangee figcaption{margin-top:var(--s1)}

/* projets précédent / suivant */
.p-suite{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);
  margin:0 var(--marge) var(--s6);padding:var(--s4) 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.p-suite > a:not(.pastille){display:flex;flex-direction:column;gap:.3rem;text-decoration:none}
.p-suite .gothique{font-size:clamp(1.6rem,3vw,2.6rem);transition:color .2s}
.p-suite a:hover .gothique{color:var(--or)}
.p-suite .suivant{text-align:right;align-items:flex-end}

/* page Studies */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s5)}
.filtre{font-family:var(--texte);font-weight:600;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--ligne);background:transparent;color:var(--cendre);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.filtre:hover{border-color:var(--os);color:var(--os)}
.filtre[aria-pressed="true"]{background:var(--os);border-color:var(--os);color:var(--nuit)}
.grille-etudes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:var(--s5) clamp(1.2rem,3vw,2.5rem);
  padding:var(--s3) var(--marge) var(--s6);max-width:1400px;margin:0 auto}
.carte-etude{margin:0;text-align:center;transition:transform 180ms ease-out}
.carte-etude[hidden]{display:none}
.carte-etude .cadre{aspect-ratio:3/4.3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0,1 L0,.46 C0,.24 .22,.08 .5,0 C.78,.08 1,.24 1,.46 L1,1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0,1 L0,.46 C0,.24 .22,.08 .5,0 C.78,.08 1,.24 1,.46 L1,1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.carte-etude .vue{transition:filter .6s ease}
.carte-etude:hover .vue{filter:none}
.carte-etude figcaption{margin-top:var(--s2)}
.motion-ready .carte-etude.revele.est-visible:hover{transform:translateY(-4px);transition-delay:0ms}

/* pied des sous-pages */
.fin-page{position:relative;background:var(--suie);padding:var(--s2) var(--marge) var(--s4)}
.fin-page .pied{margin-top:0}
.fin-page .pied a{text-decoration:none}
.fin-page .pied a:hover{color:var(--or)}

/* visionneuse (image agrandie) */
.visionneuse{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s2);
  padding:clamp(1rem,4vw,3rem);background:rgba(14,13,12,.96);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.visionneuse.ouverte{opacity:1;visibility:visible}
.visionneuse figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-height:0;height:100%;justify-content:center}
.visionneuse img{max-width:100%;max-height:calc(100vh - 8rem);max-height:calc(100svh - 8rem);width:auto;height:auto;object-fit:contain}
.visionneuse .fleche{flex:none}
.visionneuse .fermer{position:absolute;top:clamp(.8rem,2vw,1.5rem);right:clamp(.8rem,2vw,1.5rem)}
@media (max-width:640px){
  .visionneuse{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;padding:3.5rem .8rem 1rem}
  .visionneuse figure{grid-column:1/-1;grid-row:1}
  .visionneuse .prec{grid-row:2;justify-self:start}.visionneuse .suiv{grid-row:2;justify-self:end}
}

@media (max-width:860px){
  .p-intro-grille{grid-template-columns:1fr;align-items:start}
  .rangee{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mosaique{columns:1}
  .p-suite{grid-template-columns:1fr 1fr}
  .p-suite .pastille{grid-column:1/-1;grid-row:2;justify-self:center}
  .retour{margin-bottom:var(--s4)}
}
@media (max-width:640px){
  .grille-etudes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) 1rem}
  .carte-etude figcaption{font-size:.55rem;letter-spacing:.18em}
}
/* Steel Apostles : galerie divisée par corps */
.p-bloc.corps .p-bloc-tete .label.or{margin-bottom:.4rem}
.p-bloc.corps + .p-bloc.corps{padding-top:var(--s2)}
/* Steel Apostles : titre de chapitre « Characters » */
.p-chapitre{max-width:1400px;margin:0 auto;padding-top:var(--s2)}
.p-chapitre .projets-tete{margin-bottom:var(--s5)}
.p-chapitre .etoile{color:var(--or)}
@media (min-width:1560px){ .p-chapitre .projets-tete{margin-left:var(--marge);margin-right:var(--marge)} }
/* Steel Apostles : bloc Research — une image et son texte, comme les projets de l'accueil */
.p-recherche .projet{margin:0;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.p-recherche .encadre .cadre{aspect-ratio:1600/1000}
.p-recherche .encadre .vue{filter:none}
.p-recherche .texte p:not(.label){color:var(--cendre);font-size:.95em}
@media (max-width:860px){ .p-recherche .projet{grid-template-columns:1fr} }
.p-recherche .projet h2{margin:var(--s2) 0}
/* Steel Apostles : 3 images par corps — une verticale et deux horizontales empilées ;
   la verticale passe d'un côté à l'autre d'un corps à l'autre */
.trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(1rem,2.5vw,2rem)}
.trio .piece{margin:0}
.trio .piece:first-child{grid-row:1 / span 2;grid-column:1}
.trio.inverse .piece:first-child{grid-column:2}
.trio.inverse .piece:not(:first-child){grid-column:1}
.trio .piece:first-child .zoom{height:100%}
.trio .piece:first-child img{height:100%;object-fit:cover}
.trio .piece:not(:first-child) img{aspect-ratio:1600/1000;object-fit:cover}
@media (max-width:640px){
  .trio,.trio.inverse{grid-template-columns:1fr}
  .trio .piece:first-child,.trio.inverse .piece:first-child,.trio.inverse .piece:not(:first-child){grid-column:1;grid-row:auto}
  .trio .piece:first-child img{height:auto}
}
/* petit titre « Props » entre les deux images horizontales */
.titre-props{display:flex;align-items:center;gap:.8rem;margin:0;font-weight:inherit}
.titre-props .gothique{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;color:var(--creme)}
.titre-props::after{content:"";flex:1;height:1px;background:var(--ligne)}
.titre-props .losange-or{width:5px;height:5px;background:var(--or);transform:rotate(45deg);flex:none}
.trio{grid-template-rows:auto auto auto}
.trio .piece:first-child{grid-row:1 / span 3}
.trio.inverse .titre-props{grid-column:1}
@media (max-width:640px){ .trio.inverse .titre-props{grid-column:1} }
/* deuxième image sous la couverture : filet et étoile de l'autre côté, écart resserré */
.p-couverture:has(+ .suite-couverture){margin-bottom:var(--s5)}
.suite-couverture.encadre::before{inset:-14px -14px 14px 14px}
.suite-couverture .etoile{right:auto;left:-.9rem}
@media (max-width:640px){ .suite-couverture.encadre::before{inset:-8px -8px 8px 8px} }
/* image d'ensemble des trois corps, sous le titre Characters */
.p-chapitre .lineup{margin:0 var(--marge) var(--s6)}
@media (min-width:1560px){ .p-chapitre .lineup{margin-left:var(--marge);margin-right:var(--marge)} }
/* la verticale suit la hauteur de la colonne d'à côté (elle ne l'étire plus) */
.trio .piece:first-child{position:relative;min-height:0}
.trio .piece:first-child .zoom{position:absolute;inset:0}
.trio .piece:first-child img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:640px){
  .trio .piece:first-child .zoom{position:static}
  .trio .piece:first-child img{height:auto}
}
/* image horizontale fournie (planche) : affichée en entier, sans recadrage */
.trio .piece.entiere img{aspect-ratio:auto;height:auto}
.p-recherche .encadre .cadre{aspect-ratio:1920/1080}
/* images verticales un peu plus petites : colonne plus étroite (4/9 de la largeur) ; l'image remplit
   toujours son cadre, mais c'est désormais sa hauteur qui la dimensionne, donc le personnage est plus petit */
.trio{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
.trio.inverse{grid-template-columns:minmax(0,5fr) minmax(0,4fr)}
.trio .piece:first-child img{object-fit:cover;object-position:50% 50%}
@media (max-width:640px){ .trio,.trio.inverse{grid-template-columns:1fr} .trio .piece:first-child{width:88%;justify-self:center} }
/* outils de la fiche projet, avec leur petit logo */
.fiche .outil{display:inline-flex;align-items:center;gap:.45rem;margin-right:1.1rem;white-space:nowrap}
.fiche .outil img{width:18px;height:18px;object-fit:contain;filter:grayscale(1) brightness(1.1);opacity:.85}
/* chapitre suivant les trois corps : un peu d'air avant son titre */
.p-bloc.corps + .p-chapitre{padding-top:var(--s4)}
/* les deux premières images (couverture et Fortified Bunker) côte à côte, sur la largeur du contenu */
.p-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
  width:calc(min(100%,1400px) - 2 * var(--marge));margin:var(--s3) auto var(--s6)}
.p-duo .p-couverture{margin:0;width:auto;max-width:none}
.p-duo .p-couverture .cadre{aspect-ratio:1.6;overflow:hidden}
.p-duo .p-couverture .vue{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){ .p-duo{grid-template-columns:1fr;gap:var(--s4)} }
/* étoiles aux coins extérieurs de la ligne (et non au milieu) */
.p-duo .p-couverture:first-of-type .etoile{right:auto;left:-.9rem}
.p-duo .suite-couverture .etoile{left:auto;right:-.9rem}
/* Fortified Bunker : une grande image horizontale, puis deux plus petites qui font ensemble toute la largeur */
.p-chapitre#fortified-bunker .lineup{margin-bottom:clamp(1rem,2.5vw,2rem)}
.bunker-galerie{padding-top:0}
.bunker-galerie .piece{margin:0}
.bunker-galerie .grande img{aspect-ratio:2/1;object-fit:cover}
.bunker-galerie .duo-petites{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(1rem,2.5vw,2rem)}
.bunker-galerie .duo-petites img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:640px){ .bunker-galerie .duo-petites{grid-template-columns:1fr} }
/* « Final pieces » : même police que Year / Field / Format, en italique, écrit verticalement
   sur la tranche gauche des deux premières images et centré sur leur hauteur */
.p-duo{position:relative}
.tranche-duo{position:absolute;top:50%;left:calc(-14px - 1.1rem);margin:0;
  writing-mode:vertical-rl;transform:translate(-100%,-50%) rotate(180deg);
  font-style:italic;white-space:nowrap;line-height:1}
@media (max-width:760px){
  .tranche-duo{position:static;writing-mode:horizontal-tb;transform:none;grid-column:1/-1;text-align:center;margin-bottom:calc(-1 * var(--s2))}
}
/* planche « Interiors » : affichée en entier */
.bunker-galerie .grande.entiere img{aspect-ratio:auto;height:auto}
/* « Final pieces » un peu plus grand */
.tranche-duo{font-size:.82rem;letter-spacing:.3em}
/* petites images du bunker : planches affichées en entier ; les deux cadres restent alignés en haut */
.bunker-galerie .duo-petites{align-items:start}
.bunker-galerie .duo-petites .entiere img{aspect-ratio:auto;height:auto}
.bunker-galerie .duo-petites img{aspect-ratio:16/9}
/* =========================================================
   MENUS DÉROULANTS — Korps Soldiers et Fortified Bunker
   Le titre sert de bouton : un clic ouvre ou referme la partie.
   ========================================================= */
.deroulant{max-width:1400px;margin:0 auto;padding-top:var(--s3)}
.deroulant > summary{list-style:none;cursor:pointer}
.deroulant > summary::-webkit-details-marker{display:none}
.deroulant-tete{margin-bottom:var(--s4);transition:border-color .3s}
.deroulant[open] > .deroulant-tete{margin-bottom:var(--s5)}
.deroulant-tete .titre-section{transition:color .3s}
.deroulant-tete:hover .titre-section{color:var(--or)}
.deroulant-tete:focus-visible{outline:1px solid var(--or);outline-offset:6px}
.deroulant-tete .droite{display:flex;align-items:center;gap:var(--s2)}
.bouton-deroulant{position:relative;flex:none;width:2.6rem;height:2.6rem;margin-left:var(--s2);border:1px solid var(--ligne);border-radius:50%;
  transition:background .25s,border-color .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.bouton-deroulant::before{content:"";position:absolute;left:50%;top:46%;width:.55rem;height:.55rem;
  border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);transform:translate(-50%,-50%) rotate(45deg)}
.deroulant-tete:hover .bouton-deroulant{border-color:var(--or)}

.deroulant-corps .p-chapitre{padding-top:0}
.deroulant-corps > .p-chapitre .lineup{margin-top:0}
@keyframes ouvre{from{opacity:0;transform:translateY(-.6rem)}to{opacity:1;transform:none}}
@media (max-width:640px){ .deroulant-tete .droite{width:100%} .bouton-deroulant{margin-left:auto} }

/* déroulement façon easehealth.com : flèche qui pivote en 400 ms, bouton qui se teinte,
   la hauteur et le fondu sont animés par pages.js */
.bouton-deroulant{transition:background-color 400ms ease,border-color 400ms ease,transform 400ms ease}
.deroulant.est-ouvert .bouton-deroulant{transform:rotate(180deg);background-color:rgba(209,165,75,.14);border-color:var(--or)}
.deroulant-tete{margin-bottom:var(--s4);transition:margin-bottom 650ms ease}
.deroulant.est-ouvert > .deroulant-tete{margin-bottom:var(--s5)}
.deroulant[open] > .deroulant-tete{margin-bottom:var(--s4)}
.deroulant.est-ouvert[open] > .deroulant-tete{margin-bottom:var(--s5)}
.deroulant-corps{will-change:auto}
.deroulant.en-mouvement .deroulant-corps{will-change:height,opacity}
/* planches affichées en entière : on garde leur format 16:9 réservé avant chargement
   (sinon la hauteur est nulle tant que l'image n'est pas chargée, et le déroulement saute) */
.trio .piece.entiere img,.bunker-galerie .grande.entiere img,.bunker-galerie .duo-petites .entiere img{aspect-ratio:16/9;height:auto}
.deroulant-tete .asterisque{width:1rem;height:1rem;flex:none;display:block}
.mention-deux-lignes{line-height:1.7;text-align:left}
/* portraits en médaillons, centrés à la fin d'une partie */
.portraits{margin:clamp(2.5rem,5vw,4.5rem) auto 0;width:min(88%,840px);text-align:center}
.portraits img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.portraits .zoom:hover img{transform:scale(1.02)}

/* accueil, section Projects : images sans filet décalé ni étoile */
#projets .encadre::before{content:none}
#projets .encadre .etoile{display:none}

/* =========================================================
   PAGE STUDIES — disposition en mosaïque (formats rectangulaires variés, joints fins)
   Motif de 9 vignettes qui se répète : large, 2 hautes, large / haute, 2 carrées, haute, large.
   Les sélecteurs « of :not([hidden]) » gardent le motif intact quand un filtre est actif.
   ========================================================= */
.grille-etudes{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(84px,9.2vw,138px);grid-auto-flow:dense;gap:clamp(6px,.8vw,12px)}
.grille-etudes .carte-etude{position:relative;grid-column:span 3;grid-row:span 2;text-align:left;overflow:hidden}
.grille-etudes .carte-etude .cadre{display:block;height:100%;aspect-ratio:auto;-webkit-mask:none;mask:none}
.grille-etudes .carte-etude figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.6rem .9rem .7rem;pointer-events:none;
  background:linear-gradient(to top,rgba(14,13,12,.78),rgba(14,13,12,0));color:var(--os)}
.motion-ready .grille-etudes .carte-etude.revele.est-visible:hover{transform:none}
.grille-etudes .carte-etude .vue{transition:filter .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.grille-etudes .carte-etude:hover .vue{transform:scale(1.03)}
/* A : large — haute — haute — large (sous la première) */
.grille-etudes .carte-etude:nth-child(9n+1 of :not([hidden])),
.grille-etudes .carte-etude:nth-child(9n+4 of :not([hidden])),
.grille-etudes .carte-etude:nth-child(9n+9 of :not([hidden])){grid-column:span 6;grid-row:span 2}
.grille-etudes .carte-etude:nth-child(9n+2 of :not([hidden])),
.grille-etudes .carte-etude:nth-child(9n+3 of :not([hidden])),
.grille-etudes .carte-etude:nth-child(9n+5 of :not([hidden])),
.grille-etudes .carte-etude:nth-child(9n+8 of :not([hidden])){grid-column:span 3;grid-row:span 4}
/* B : haute — carrée — carrée — haute — large (sous les deux carrées) : 9n+6 et 9n+7 gardent 3 × 2 */
@media (max-width:640px){
  .grille-etudes{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(70px,22vw,110px);gap:6px}
  .grille-etudes .carte-etude{grid-column:span 3;grid-row:span 2}
  .grille-etudes .carte-etude:nth-child(9n+1 of :not([hidden])),
  .grille-etudes .carte-etude:nth-child(9n+4 of :not([hidden])),
  .grille-etudes .carte-etude:nth-child(9n+9 of :not([hidden])){grid-column:span 6;grid-row:span 2}
  .grille-etudes .carte-etude:nth-child(9n+2 of :not([hidden])),
  .grille-etudes .carte-etude:nth-child(9n+3 of :not([hidden])),
  .grille-etudes .carte-etude:nth-child(9n+5 of :not([hidden])),
  .grille-etudes .carte-etude:nth-child(9n+8 of :not([hidden])){grid-column:span 3;grid-row:span 3}
  .grille-etudes .carte-etude figcaption{font-size:.5rem;letter-spacing:.16em;padding:1.2rem .5rem .45rem}
}