/* ====== Couche "wow" commune à toutes les pages ====== */

/* Transition entre les pages : rideau noir + logo */
#pt{position:fixed;inset:0;z-index:100;background:#0c0b09;display:grid;place-items:center;pointer-events:none;transform:translateY(0);transition:transform .75s cubic-bezier(.77,0,.18,1)}
#pt img{width:200px;height:auto;object-fit:contain;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
#pt:after{content:"";position:absolute;left:50%;top:calc(50% + 34px);width:0;height:1px;background:#c8a35a;transform:translateX(-50%);transition:width .6s cubic-bezier(.77,0,.18,1)}
body.pret #pt{transform:translateY(-100%)}
body.sortie #pt{transform:translateY(0);transition-duration:.55s}
body.sortie #pt img,body.intro #pt img{opacity:1;transform:none}
body.intro #pt:after{width:200px}

/* Barre de progression dorée */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;background:#c8a35a;transform-origin:0 50%;transform:scaleX(0);z-index:30;pointer-events:none}

/* Grain de film, très léger */
body:after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Titres : chaque ligne monte derrière un masque */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block;transform:translateY(110%);transition:transform 1.15s cubic-bezier(.19,1,.22,1)}
body.pret .ln>span{transform:none}
.ln em{display:inline!important}

/* Image d'en-tête : dévoilement latéral + léger dézoom */
.tete-img img,.hero-img img{clip-path:inset(0 0 0 100%);transform:scale(1.18);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1) .25s,transform 2.4s cubic-bezier(.19,1,.22,1) .25s;animation:none!important}
body.pret .tete-img img,body.pret .hero-img img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Harmonie des photos (même grade partout) */
.tete-img img,.face img,.galerie img,.duo-img img,.slide img,.card img,.u-img img{filter:saturate(.88) contrast(1.05) brightness(.96)}

/* Curseur personnalisé (souris uniquement) */
.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#c8a35a;transition:width .35s cubic-bezier(.19,1,.22,1),height .35s cubic-bezier(.19,1,.22,1),margin .35s cubic-bezier(.19,1,.22,1),background .35s;display:grid;place-items:center;mix-blend-mode:normal}
.cur span{font:500 9px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#0c0b09;opacity:0;transition:opacity .2s}
.cur.lien{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(200,163,90,.22);border:1px solid #c8a35a}
.cur.voir{width:86px;height:86px;margin:-43px 0 0 -43px;background:#c8a35a}
.cur.voir span{opacity:1}
@media (hover:none){.cur{display:none}}

/* Cartes : éclat doré qui balaie la face au survol */
.tuile .face:before,.card .face:before{content:"";position:absolute;z-index:3;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(200,163,90,.28),transparent);transform:skewX(-18deg);pointer-events:none}
.tuile:hover .face:before,.card:hover .face:before{animation:eclat .9s ease}
@keyframes eclat{to{left:130%}}
.dos{background:radial-gradient(120% 90% at 100% 0%,rgba(200,163,90,.12),transparent 55%),#15130f!important}

/* Galerie : visionneuse plein écran */
.galerie div{cursor:zoom-in;position:relative}
.galerie div:after{content:"";position:absolute;inset:0;border:1px solid rgba(200,163,90,0);transition:border-color .4s}
.galerie div:hover:after{border-color:rgba(200,163,90,.6)}
#lb{position:fixed;inset:0;z-index:80;background:rgba(8,7,6,.94);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s;cursor:zoom-out}
#lb.on{opacity:1;pointer-events:auto}
#lb img{max-width:88vw;max-height:84vh;width:auto;height:auto;object-fit:contain;transform:scale(.94);transition:transform .5s cubic-bezier(.19,1,.22,1);box-shadow:0 40px 120px rgba(0,0,0,.6)}
#lb.on img{transform:none}
#lb b{position:absolute;top:24px;right:30px;font:500 11px/1 Inter,sans-serif;letter-spacing:.24em;color:#c8a35a}

/* Mise en page des en-têtes : plus d'air pour les titres */
.tete{grid-template-columns:1.12fr .88fr}
.tete-txt{padding-right:5vw}
.tete h1{font-size:clamp(56px,6.4vw,112px)}
.tete-img:after{background:linear-gradient(90deg,#0c0b09 0,rgba(12,11,9,.35) 18%,transparent 40%),linear-gradient(0deg,rgba(12,11,9,.45),transparent 30%)}
@media (max-width:860px){.tete{grid-template-columns:1fr}.tete-img:after{background:linear-gradient(180deg,#0c0b09 0,transparent 30%)}}

/* Liens soulignés qui se dessinent */
.ariane a,.autres a{position:relative}
.btn{position:relative;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  #pt,.ln>span,.tete-img img,.hero-img img{transition:none!important}
  body:after{animation:none}
}

/* v9 (16/10) : retournement SANS 3D. Sur iPhone, Safari affichait le dos des cartes en miroir (« écrit à l'envers », signalé sur Ecopafiesta).
   La carte se replie (scaleX 1→0) puis le dos se déplie (0→1) : aucune rotation, jamais de texte inversé. */
.card .in,.card:hover .in,.card.flip .in,.tuile .in,.tuile:hover .in,.tuile.flip .in,.tuile:focus-visible .in{transform:none!important;transform-style:flat!important}
.card .face,.card .dos,.tuile .face,.tuile .dos{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.card .face,.tuile .face{transform:scaleX(1)!important;opacity:1!important;transition:transform .22s ease-in .22s,opacity 0s linear .22s!important}
.card .dos,.tuile .dos{transform:scaleX(0)!important;opacity:0!important;transition:transform .22s ease-in,opacity 0s linear .22s!important}
.card:hover .face,.card.flip .face,.tuile:hover .face,.tuile.flip .face,.tuile:focus-visible .face{transform:scaleX(0)!important;opacity:0!important;transition:transform .22s ease-in,opacity 0s linear .22s!important}
.card:hover .dos,.card.flip .dos,.tuile:hover .dos,.tuile.flip .dos,.tuile:focus-visible .dos{transform:scaleX(1)!important;opacity:1!important;transition:transform .22s ease-out .22s,opacity 0s linear .22s!important}