/* =========================================================================
   Une Histoire de Pixel — couche d'amélioration visuelle et accessibilité
   Chargée après les styles de la page : ne modifie aucun texte, uniquement
   le rendu, les animations et le confort d'utilisation.
   ========================================================================= */
:root{
  --uhp-ease: cubic-bezier(.22,.61,.36,1);
  --uhp-ease-slow: cubic-bezier(.16,1,.3,1);
}

/* ---------- Accessibilité : focus clavier visible ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:none;border-color:var(--accent-2);box-shadow:0 1px 0 0 var(--accent-2);
}
.field-consent input[type="checkbox"]:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
button.faq-q:focus-visible{outline-offset:6px;}

/* ---------- Apparitions au défilement : courbe plus douce ---------- */
.reveal{transition:opacity 1.1s var(--uhp-ease), transform 1.1s var(--uhp-ease);}

/* ---------- HERO : photo UHP en fond, voile cinéma ---------- */
.hero-placeholder{overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 38%;opacity:.62;
}
.hero-placeholder::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 75%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.8) 100%);
}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.35);}

/* ---------- Banderole défilante entre la bannière et le hero ---------- */
.uhp-ribbon{
  position:relative;overflow:hidden;
  background:var(--bg-alt);color:var(--text);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;
}
.uhp-ribbon::before,.uhp-ribbon::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(30px,8vw,120px);z-index:1;pointer-events:none;
}
.uhp-ribbon::before{left:0;background:linear-gradient(90deg,var(--bg-alt),rgba(239,231,216,0));}
.uhp-ribbon::after{right:0;background:linear-gradient(270deg,var(--bg-alt),rgba(239,231,216,0));}
.uhp-ribbon-track{display:flex;width:max-content;animation:uhpRibbon 48s linear infinite;}
.uhp-ribbon-group{display:flex;align-items:center;flex:none;}
.uhp-ribbon-item{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  white-space:nowrap;color:var(--text);
}
.uhp-ribbon-sep{
  width:6px;height:6px;margin:0 clamp(28px,4vw,56px);flex:none;
  background:var(--accent);transform:rotate(45deg);
}
@media (hover:hover){ .uhp-ribbon:hover .uhp-ribbon-track{animation-play-state:paused;} }
@keyframes uhpRibbon{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:600px){
  .uhp-ribbon{padding:13px 0;}
  .uhp-ribbon-item{font-size:11px;letter-spacing:2.4px;}
  .uhp-ribbon-track{animation-duration:36s;}
}

@media (prefers-reduced-motion: no-preference){
  /* Lent zoom arrière de la photo, puis texte qui se dépose ligne par ligne */
  .hero.hero-armed .hero-bg{transform:scale(1.12);}
  .hero.hero-play .hero-bg{animation:uhpSettle 9s var(--uhp-ease-slow) both;}
  .hero.hero-armed .hero-inner>*{opacity:0;}
  .hero.hero-play .hero-inner>*{animation:uhpRise 1.3s var(--uhp-ease) both;}
  .hero.hero-play .hero-inner>*:nth-child(2){animation-delay:.18s;}
  .hero.hero-play .hero-inner>*:nth-child(3){animation-delay:.36s;}
  .hero.hero-play .hero-inner>*:nth-child(4){animation-delay:.54s;}
}
@keyframes uhpSettle{from{transform:scale(1.12);}to{transform:scale(1);}}
@keyframes uhpRise{
  from{opacity:0;transform:translateY(24px);filter:blur(6px);}
  to{opacity:1;transform:none;filter:blur(0);}
}
@keyframes uhpFade{from{opacity:0;}to{opacity:1;}}

/* ---------- Images éditoriales : dévoilement en rideau + léger parallaxe ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .media-frame.reveal{
    opacity:1;transform:none;
    -webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);
    transition:-webkit-clip-path 1.5s var(--uhp-ease-slow), clip-path 1.5s var(--uhp-ease-slow);
  }
  .js .media-frame.reveal.is-visible{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}
  .js .media-frame.reveal img{
    transform:translate3d(0,var(--uhp-py,0px),0) scale(1.2);
    transition:transform 1.9s var(--uhp-ease-slow);
  }
  .js .media-frame.reveal.is-visible img{transform:translate3d(0,var(--uhp-py,0px),0) scale(1.08);}
  .js .media-frame.reveal.uhp-settled img{transition:none;}
}

/* ---------- Groupes de cartes : apparition échelonnée ---------- */
@media (prefers-reduced-motion: no-preference){
  .uhp-stagger.reveal{opacity:1;transform:none;}
  .uhp-stagger>*{
    opacity:0;transform:translateY(18px);
    transition:opacity .9s var(--uhp-ease), transform .9s var(--uhp-ease);
    transition-delay:calc(var(--uhp-i, 0) * 80ms);
  }
  .uhp-stagger.is-visible>*{opacity:1;transform:none;}
}

/* ---------- Liens d'action : trait qui se dessine ---------- */
.cta{position:relative;}
.cta::before{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--uhp-ease);
}
.cta:hover::before,.cta:focus-visible::before{transform:scaleX(1);transform-origin:left;}

/* ---------- Navigation : section en cours ---------- */
nav.links a.is-active{color:var(--text-on-dark);}
header.site-nav.scrolled nav.links a.is-active{color:var(--text);}
nav.links a.is-active::after{width:100%;}

/* ---------- Films : présentés comme une bande de pellicule cinéma ---------- */
.video-card{position:relative;}
.video-thumb::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.5) 100%);
  transition:opacity .6s ease;
}
.play-btn{
  position:relative;z-index:1;width:58px;height:58px;
  background:rgba(21,20,15,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .6s var(--uhp-ease), background .4s ease, border-color .4s ease;
}
@media (hover:hover){
  .video-card:hover .play-btn{transform:scale(1.08);background:var(--accent);border-color:var(--accent);}
}
.video-card:focus-visible .play-btn{background:var(--accent);border-color:var(--accent);}

.uhp-filmstrip{
  --film-base:#15140F;
  --film-hole:#EFE7D8;
  position:relative;margin-top:50px;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.035)),
    var(--film-base);
  border-radius:3px;
  padding:48px 30px 58px;
  box-shadow:0 40px 80px -45px rgba(21,20,15,.55);
}
/* Perforations : deux rangées qui défilent lentement, comme une pellicule dans le projecteur */
.uhp-filmstrip::before,.uhp-filmstrip::after{
  content:'';position:absolute;left:0;height:14px;width:calc(100% + 56px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='7' y='2' width='14' height='10' rx='2.5' fill='%23EFE7D8'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:28px 14px;
  opacity:.92;pointer-events:none;
}
.uhp-filmstrip::before{top:14px;}
.uhp-filmstrip::after{bottom:14px;}
@media (prefers-reduced-motion: no-preference){
  .uhp-filmstrip::before,.uhp-filmstrip::after{animation:uhpFilmRun 2.8s linear infinite;}
  .js .uhp-filmstrip.reveal{opacity:0;transform:translateX(70px);transition:opacity 1.2s var(--uhp-ease), transform 1.6s var(--uhp-ease-slow);}
  .js .uhp-filmstrip.reveal.is-visible{opacity:1;transform:none;}
}
@keyframes uhpFilmRun{from{transform:translateX(0);}to{transform:translateX(-56px);}}
@keyframes uhpFilmRunY{from{transform:translateY(0);}to{transform:translateY(-56px);}}

.uhp-filmstrip .video-grid{margin-top:0 !important;counter-reset:uhpfilm;}
.uhp-filmstrip .video-card{
  counter-increment:uhpfilm;overflow:visible;background:transparent;border-radius:1px;
  transition:opacity .6s ease, filter .6s ease;
}
.uhp-filmstrip .video-thumb{
  overflow:hidden;border-radius:1px;
  box-shadow:0 0 0 1px rgba(243,238,227,.10);
  aspect-ratio:2.39/1;
  /* vignettes YouTube 4:3 contenant un film scope : on cadre l'image utile, sans bandes noires */
  background-size:auto 180% !important;background-position:center !important;
  transition:background-size 1.2s var(--uhp-ease), box-shadow .6s ease;
}
/* Marquage de bord de film sous chaque image */
.uhp-filmstrip .video-card::after{
  content:'UHP  ' counter(uhpfilm, decimal-leading-zero);
  position:absolute;left:2px;bottom:-26px;white-space:pre;
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:3px;
  color:var(--accent-2);opacity:.7;
}
.uhp-filmstrip .video-card::before{
  content:'';position:absolute;right:2px;bottom:-22px;
  border-left:6px solid var(--accent-2);border-top:4px solid transparent;border-bottom:4px solid transparent;
  opacity:.55;
}
@media (hover:hover){
  .uhp-filmstrip .video-grid:hover .video-card:not(:hover){opacity:.55;filter:saturate(.6);}
  .uhp-filmstrip .video-card:hover .video-thumb{
    background-size:auto 190% !important;
    box-shadow:0 0 0 1px rgba(199,155,117,.55), 0 0 40px rgba(199,155,117,.18);
  }
}
.uhp-filmstrip .video-card:focus-visible{outline-offset:6px;}

/* Tablette et mobile : la pellicule devient verticale, perforations sur les côtés */
@media (max-width:980px){
  .uhp-filmstrip{padding:30px 44px 54px;}
  .uhp-filmstrip .video-grid{row-gap:52px;}
  .uhp-filmstrip::before,.uhp-filmstrip::after{
    top:0;bottom:auto;width:14px;height:calc(100% + 56px);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28'%3E%3Crect x='2' y='7' width='10' height='14' rx='2.5' fill='%23EFE7D8'/%3E%3C/svg%3E");
    background-repeat:repeat-y;background-size:14px 28px;
  }
  .uhp-filmstrip::before{left:14px;}
  .uhp-filmstrip::after{left:auto;right:14px;}
}
@media (max-width:980px) and (prefers-reduced-motion: no-preference){
  .uhp-filmstrip::before,.uhp-filmstrip::after{animation-name:uhpFilmRunY;}
  .js .uhp-filmstrip.reveal{transform:translateY(40px);}
}
@media (max-width:520px){
  .uhp-filmstrip{padding:26px 36px 50px;}
  .uhp-filmstrip::before{left:10px;}
  .uhp-filmstrip::after{right:10px;}
}

/* ---------- Lieux : inversion élégante au survol ---------- */
.venue-item{transition:background .5s var(--uhp-ease), color .5s var(--uhp-ease);}
@media (hover:hover){
  .venue-item:hover{background:var(--dark);color:var(--text-on-dark);}
}

/* ---------- Formules : lignes interactives, formule recommandée soulignée ---------- */
.formule-row{position:relative;transition:background .5s var(--uhp-ease);}
.formule-row::before{
  content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--uhp-ease);
}
.formule-row .fname,.formule-row .formule-meta{transition:transform .55s var(--uhp-ease), color .4s ease;}
.formule-row:has(.badge-recommended){
  background:linear-gradient(90deg, rgba(199,155,117,.10), rgba(199,155,117,0) 70%);
}
.formule-row:has(.badge-recommended)::before{transform:scaleY(1);}
@media (min-width:781px){
  /* La formule recommandée garde un léger retrait par rapport à son filet doré */
  .formule-row:has(.badge-recommended) .fname,
  .formule-row:has(.badge-recommended) .formule-meta{transform:translateX(16px);}
}
@media (hover:hover){
  .formule-row:hover{background:linear-gradient(90deg, rgba(199,155,117,.14), rgba(199,155,117,0) 75%);}
  .formule-row:hover::before{transform:scaleY(1);transform-origin:top;}
  .formule-row:hover .fname,.formule-row:hover .formule-meta{transform:translateX(16px);}
  .formule-row:hover .formule-meta{color:var(--text);}
}
@media (max-width:780px){
  .formule-row:has(.badge-recommended){padding-left:14px;}
  .formule-row{padding-left:14px;}
}

/* ---------- Pourquoi nous choisir : sans numéros, titres et textes alignés par rangée ---------- */
.why-card{display:grid;grid-template-columns:1fr;grid-row:span 2;grid-template-rows:subgrid;gap:0;align-content:start;}
.why-card h4{min-height:0 !important;margin-bottom:14px;align-self:end;}
.why-card p{min-height:0 !important;}
/* ---------- Pourquoi nous choisir : filet d'accent ---------- */
.why-card{position:relative;transition:background .5s var(--uhp-ease);}
.why-card::after{
  content:'';position:absolute;left:36px;right:36px;top:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--uhp-ease);
}
@media (hover:hover){
  .why-card:hover{background:#FBF8F3;}
  .why-card:hover::after{transform:scaleX(1);}
}

/* ---------- Méthode : étapes disposées en tableau, filets fins ---------- */
#methode .step > div{display:contents;}
#methode .steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);
  margin-top:60px;
}
#methode .step{
  display:grid;grid-template-columns:1fr;grid-row:span 2;grid-template-rows:subgrid;gap:0;align-content:start;position:relative;background:var(--dark);
  padding:clamp(30px,3vw,44px) clamp(24px,2.6vw,38px);border-bottom:none;
  transition:background .6s var(--uhp-ease);
}
#methode .step h4{font-size:21px;margin-bottom:14px;align-self:end;}
#methode .step h4::before{
  content:'';display:block;width:28px;height:1px;background:var(--accent-2);
  margin-bottom:22px;transition:width .7s var(--uhp-ease);
}
#methode .step p{font-size:14.5px;line-height:1.7;max-width:none;}
@media (hover:hover){
  #methode .step:hover{background:var(--dark-2);}
  #methode .step:hover h4::before{width:56px;}
}
@media (max-width:980px){
  #methode .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  #methode .steps{grid-template-columns:1fr;}
  #methode .step{padding:28px 24px;}
}

/* ---------- Témoignages : guillemet décoratif ---------- */
.testi-card{position:relative;overflow:hidden;transition:border-color .5s ease, transform .6s var(--uhp-ease), box-shadow .6s var(--uhp-ease);}
.testi-card::before{
  content:'\201C';position:absolute;top:-18px;right:20px;
  font-family:var(--serif);font-size:120px;line-height:1;color:var(--accent-2);opacity:.18;
  pointer-events:none;
}
@media (hover:hover){
  .testi-card:hover{border-color:var(--accent-2);transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(21,20,15,.35);}
}

/* ---------- FAQ ---------- */
.faq-q .faq-q-label{transition:color .35s ease;}
@media (hover:hover){ .faq-q:hover .faq-q-label{color:var(--accent);} }
.faq-item.open .faq-q .faq-q-label{color:var(--accent);}

/* ---------- Carrousel : photo active mise en lumière ---------- */
.carousel-track{touch-action:pan-y;}
.carousel-slide img{transition:filter .7s ease;}