/* ============================================================
   PRESTATIONS — direction artistique dédiée (2026)
   Ne réutilise que les jetons de couleur/typo de style.css.
   Le nav flottant et le footer restent ceux du reste du site ;
   tout le contenu de cette page est spécifique.
   ============================================================ */

.p26{ background:var(--bg); color:var(--ink); overflow-x:clip; }

/* ------------------------------------------------------------
   HERO — fond aurore animé + spot qui suit le curseur + titre
   qui se décode lettre par lettre + navigation rapide par pastilles
   ------------------------------------------------------------ */
.p26-hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem 6vw 5rem;
  isolation:isolate;
  background:#0B0907;
}

.p26-aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.p26-aurora i{
  position:absolute; border-radius:50%; filter:blur(70px);
  mix-blend-mode:screen; opacity:0.55; will-change:transform;
}
.p26-aurora i:nth-child(1){
  width:52vw; height:52vw; top:-16%; left:-10%;
  background:radial-gradient(circle, #3E7CB1, transparent 68%);
  animation:p26drift1 16s ease-in-out infinite alternate;
}
.p26-aurora i:nth-child(2){
  width:44vw; height:44vw; bottom:-18%; right:-8%;
  background:radial-gradient(circle, #E8A23D, transparent 68%);
  animation:p26drift2 19s ease-in-out infinite alternate;
}
.p26-aurora i:nth-child(3){
  width:38vw; height:38vw; top:30%; left:42%;
  background:radial-gradient(circle, #7FA25B, transparent 68%);
  animation:p26drift3 22s ease-in-out infinite alternate;
}
@keyframes p26drift1{ to{ transform:translate3d(10vw,8vh,0) scale(1.25); } }
@keyframes p26drift2{ to{ transform:translate3d(-8vw,-10vh,0) scale(0.85); } }
@keyframes p26drift3{ to{ transform:translate3d(-6vw,10vh,0) scale(1.15); } }

/* grille technique, très discrète, façon plan d'architecte */
.p26-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(243,239,230,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,239,230,0.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}

/* spot lumineux qui suit la souris — piloté par --mx/--my en JS */
.p26-spotlight{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle 380px at var(--mx,50%) var(--my,20%), rgba(255,255,255,0.07), transparent 70%);
}

.p26-hero-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; text-align:center; }

.p26-back{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  margin-bottom:2rem; transition:color .2s ease;
}
.p26-back:hover{ color:var(--ink); }

.p26-eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:'JetBrains Mono',monospace; font-size:1.0625rem;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--ocre);
  border:1px solid rgba(232,162,61,0.35); border-radius:99px;
  padding:0.6rem 1.4rem; margin-bottom:1.8rem;
  background:rgba(232,162,61,0.06);
}
.p26-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ocre); box-shadow:0 0 8px var(--ocre); }

.p26-title{
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(2.75rem, 7vw, 5.75rem); line-height:1.02; letter-spacing:-0.02em;
  margin-bottom:1.6rem;
}
.p26-title .word{ display:inline-block; white-space:nowrap; }
.p26-title .char{ display:inline-block; }
/* le mot « artisan » : un reflet doré balaie le texte de gauche à droite, en boucle lente */
.p26-title .accent{
  background-image:linear-gradient(100deg,
    #C98A3E 0%, #C98A3E 32%, #FFF3D6 46%, #FFE9A8 50%, #FFF3D6 54%, #C98A3E 68%, #C98A3E 100%);
  background-size:300% 100%;
  background-position:200% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:p26shine 5.5s linear infinite;
}
@keyframes p26shine{
  from{ background-position:200% 0; }
  to{ background-position:-100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .p26-title .accent{ animation:none; background-position:50% 0; }
}

.p26-lead{
  font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--ink-soft);
  max-width:56ch; margin:0 auto 2.6rem; line-height:1.7;
}

.p26-cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.2rem; }

/* navigation rapide : une pastille par prestation, avec pointeur actif au scroll */
.p26-quicknav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem;
  max-width:900px; margin:0 auto;
}
.p26-qn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
  color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:99px; padding:0.55rem 1rem;
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .2s ease;
}
.p26-qn .dot{ width:7px; height:7px; border-radius:50%; background:var(--qc, var(--ocre)); flex-shrink:0; }
.p26-qn:hover{ transform:translateY(-2px); border-color:var(--qc, var(--ocre)); color:var(--ink); }
.p26-qn.active{ background:var(--qc, var(--ocre)); border-color:var(--qc, var(--ocre)); color:#1a1410; }
.p26-qn.active .dot{ background:#1a1410; }

/* bandeau défilant en pied de hero — droit, en plein bord à bord (indépendant
   du max-width:1200px de .p26-hero-inner grâce à l'astuce left:50% / -50vw) */
.p26-ticker{
  position:relative; z-index:2; margin-top:3.5rem;
  width:100vw; left:50%; margin-left:-50vw;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  overflow:hidden; padding:0.7rem 0;
}
.p26-ticker-track{ display:flex; width:max-content; animation:p26marquee 30s linear infinite; }
.p26-ticker-track span{
  display:flex; align-items:center; gap:1.2rem;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  padding:0 1.4rem; white-space:nowrap;
}
.p26-ticker-track span b{ color:var(--ocre); font-weight:500; }
@keyframes p26marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  .p26-aurora i{ animation:none; }
  .p26-ticker-track{ animation:none; }
}

/* ------------------------------------------------------------
   FICHES PRESTATIONS — plein cadre, image/texture en fond,
   carte verre flottante, chiffre géant en filigrane.
   Le fond est en background-attachment:fixed : il reste immobile derrière
   le contenu pendant le défilement (comme un arrière-plan du site qui
   laisse apparaître l'image), et se referme dès qu'on change de section.
   ------------------------------------------------------------ */
.p26-service{
  position:relative; scroll-margin-top:90px;
  min-height:92svh; display:flex; align-items:center;
  padding:6rem 6vw; overflow:hidden;
}

.p26-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  background-attachment:fixed;
  filter:saturate(0.9);
}
/* le fixed-attachment est capricieux sur mobile (iOS notamment) : on repasse
   en défilement normal en dessous de 900px, sans rien casser visuellement */
@media(max-width:900px){
  .p26-bg{ background-attachment:scroll; }
}

/* teinte + assombrissement : lisibilité du texte, cohérence de palette */
.p26-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(11,9,7,0.94) 0%, rgba(11,9,7,0.72) 38%, rgba(11,9,7,0.35) 62%, rgba(11,9,7,0.7) 100%),
    radial-gradient(ellipse 70% 60% at 15% 20%, var(--accent-fade, rgba(62,124,177,0.28)), transparent 65%);
}
.p26-service.rev .p26-scrim{
  background:
    linear-gradient(280deg, rgba(11,9,7,0.94) 0%, rgba(11,9,7,0.72) 38%, rgba(11,9,7,0.35) 62%, rgba(11,9,7,0.7) 100%),
    radial-gradient(ellipse 70% 60% at 85% 20%, var(--accent-fade, rgba(62,124,177,0.28)), transparent 65%);
}

.p26-num{
  position:absolute; z-index:1; top:-2%; right:2%;
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(9rem, 22vw, 20rem); line-height:1;
  /* contour blanc plein : le filigrane translucide passait inaperçu sur les
     photos de fond, on garde le tracé creux mais en blanc opaque */
  color:transparent; -webkit-text-stroke:2px #FFFFFF;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,0.5));
  pointer-events:none; user-select:none;
}
.p26-service.rev .p26-num{ right:auto; left:2%; }

.p26-card{
  position:relative; z-index:2;
  max-width:560px;
  background:rgba(15,13,11,0.42); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(243,239,230,0.14); border-radius:18px;
  padding:2.6rem 2.4rem;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
  /* apparition douce à l'arrivée dans le viewport */
  opacity:0; transform:translateY(36px) scale(0.98);
  transition:opacity 2s cubic-bezier(.16,.6,.25,1), transform 2s cubic-bezier(.16,.6,.25,1);
}
.p26-service.in-view .p26-card{ opacity:1; transform:none; }
.p26-num{ transition:opacity 2.8s ease .2s, transform 2.8s cubic-bezier(.16,.6,.25,1) .2s; opacity:0; transform:translateY(20px); }
.p26-service.in-view .p26-num{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .p26-card, .p26-num, .p26-frame{ opacity:1; transform:none !important; transition:none; }
}
.p26-service.rev{ justify-content:flex-end; }
.p26-service.rev .p26-card{ margin-left:auto; }

.p26-tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'JetBrains Mono',monospace; font-size:1.0625rem; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--accent, var(--ocre)); font-weight:600;
  margin-bottom:1rem;
}
.p26-tag::before{ content:''; width:20px; height:2px; background:var(--accent, var(--ocre)); }

.p26-card h2{
  font-family:'Fraunces',serif; font-size:clamp(1.95rem,3.4vw,2.75rem);
  line-height:1.08; margin-bottom:1.1rem;
}
.p26-card p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.72; margin-bottom:1.3rem; }

.p26-list{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.7rem; }
.p26-list li{ position:relative; padding-left:1.6rem; font-size:0.9rem; color:var(--ink-soft); line-height:1.55; }
.p26-list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--accent, var(--ocre)); font-weight:700; }

.p26-more{
  display:inline-flex; align-items:center; gap:0.5rem;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:0.94rem;
  border-bottom:1px solid var(--accent, var(--ocre)); padding-bottom:2px;
  transition:gap .2s ease, color .2s ease;
}
.p26-more:hover{ gap:0.8rem; color:var(--accent, var(--ocre)); }

/* -- fond généré, teinté par l'--accent de la section : porté par les sections
      paires (02, 04, 06), qui alternent ainsi avec les fonds photo des impaires.
      Leur photo, elle, passe en cadre latéral (.p26-frame). -- */
.p26-bg-paint{
  background:
    radial-gradient(ellipse 60% 55% at 25% 30%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse 55% 50% at 78% 70%, var(--accent, #E8A23D), transparent 62%),
    radial-gradient(ellipse 70% 60% at 60% 20%, rgba(0,0,0,0.5), transparent 70%),
    linear-gradient(160deg, #1c1712, #0b0907 70%);
  /* pas de photo : rien à garder fixe */
  background-attachment:scroll;
}

/* ------------------------------------------------------------
   CADRE PHOTO LATÉRAL (sections 02 / 04 / 06)
   L'image arrive en glissant depuis le bord, la carte depuis l'autre côté ;
   les deux repartent quand la section quitte l'écran (voir prestations.js,
   qui bascule .in-view dans les deux sens).
   ------------------------------------------------------------ */
.p26-service.has-frame{ justify-content:space-between; gap:clamp(1.8rem,3.5vw,3.4rem); }
.p26-service.has-frame .p26-card{ margin-left:0; flex:1 1 420px; max-width:560px; }
/* le chiffre reste à gauche (règle .rev) : à droite il passait derrière la
   carte de texte, bien plus haute que le cadre photo. On le remonte un peu :
   le cadre agrandi mordait sinon sur le bas des glyphes. */
.p26-service.has-frame .p26-num{ top:-7%; }

.p26-frame{
  position:relative; z-index:2; margin:0;
  flex:1 1 480px; max-width:640px;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(243,239,230,0.16);
  background:rgba(11,9,7,0.55);
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
  opacity:0; transform:translateX(-70px);
  transition:opacity 1.8s cubic-bezier(.16,.6,.25,1), transform 1.8s cubic-bezier(.16,.6,.25,1);
}
.p26-frame::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent, var(--ocre));
}
/* height:auto est indispensable : sans lui, l'attribut height="1086" du <img>
   l'emporte sur aspect-ratio et l'image déborde du cadre */
.p26-frame img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.p26-frame figcaption{
  padding:0.85rem 1.1rem;
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; line-height:1.55;
  color:var(--ink-soft); border-top:1px solid rgba(243,239,230,0.12);
}
.p26-service.in-view .p26-frame{ opacity:1; transform:none; }
/* :not(.in-view) pour ne pas repasser devant la remise à zéro de .in-view */
.p26-service.has-frame:not(.in-view) .p26-card{ transform:translateX(70px); }

/* ------------------------------------------------------------
   BLOCS DE CONTENU — chaque fiche en pioche un différent pour
   éviter six cartes au même moule
   ------------------------------------------------------------ */
/* encadré « bon à savoir » */
.p26-note{
  border-left:3px solid var(--accent, var(--ocre));
  background:rgba(243,239,230,0.05);
  border-radius:0 10px 10px 0;
  padding:1rem 1.15rem; margin-bottom:1.4rem;
  font-size:0.89rem; line-height:1.65; color:var(--ink-soft);
}
.p26-note b{
  display:block; margin-bottom:0.3rem;
  font-family:'Fraunces',serif; font-size:1rem; color:var(--ink);
}

/* trois repères chiffrés côte à côte */
.p26-spec{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-bottom:1.4rem; }
.p26-spec div{
  flex:1 1 120px; border:1px solid var(--line); border-radius:10px;
  padding:0.75rem 0.85rem; background:rgba(243,239,230,0.03);
}
.p26-spec .v{
  display:block; font-family:'Fraunces',serif; font-size:1.1rem;
  color:var(--accent, var(--ocre)); margin-bottom:0.15rem;
}
.p26-spec .k{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft);
}

/* pastilles décodeur (niveaux de finition, classement UPEC) */
.p26-chips{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-bottom:1.3rem; }
.p26-chips span{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.03em;
  border:1px solid var(--line); border-radius:99px;
  padding:0.4rem 0.8rem; color:var(--ink-soft);
}
.p26-chips span b{ color:var(--accent, var(--ocre)); font-weight:700; }

/* mini-étapes numérotées */
.p26-steps{ list-style:none; display:flex; flex-direction:column; gap:0.9rem; margin-bottom:1.6rem; }
.p26-steps li{ display:flex; gap:0.85rem; align-items:flex-start; }
.p26-steps .n{
  flex-shrink:0; padding-top:0.1rem; font-weight:700;
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--accent, var(--ocre));
}
.p26-steps .t{ font-size:0.88rem; line-height:1.55; color:var(--ink-soft); }
.p26-steps .t b{ display:block; margin-bottom:0.1rem; font-size:0.94rem; color:var(--ink); }

@media(max-width:900px){
  .p26-service{ min-height:auto; padding:6rem 6vw; }
  .p26-card{ max-width:100%; }
  .p26-service.rev{ justify-content:flex-start; }
  .p26-service.rev .p26-card{ margin-left:0; }
  .p26-num{ font-size:7rem; }
  /* le cadre passe au-dessus de la carte et glisse verticalement.
     flex:0 0 auto est nécessaire : en colonne, le flex-basis du mode deux
     colonnes s'appliquerait à la hauteur et écraserait le cadre */
  .p26-service.has-frame{ flex-direction:column; align-items:stretch; }
  .p26-service.has-frame .p26-card{ flex:0 0 auto; max-width:100%; }
  /* en colonne il n'y a plus de collision à éviter, et le -7% du mode deux
     colonnes sortirait le chiffre entièrement hors de la section */
  .p26-service.has-frame .p26-num{ top:-2%; }
  .p26-frame{ flex:0 0 auto; max-width:100%; transform:translateY(44px); }
  .p26-service.has-frame:not(.in-view) .p26-card{ transform:translateY(36px); }
}

@media (prefers-reduced-motion: reduce){
  .p26-bg{ transition:none; transform:scale(1); }
}

.p26-section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.p26-section-head h2{ font-family:'Fraunces',serif; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:0.7rem; }
.p26-section-head p{ color:var(--ink-soft); margin-top:0.9rem; font-size:0.98rem; line-height:1.6; }

/* La CTA finale (.p26-final) est desormais definie dans
   assets/navigation-v10.css, chargee par l entete partage : elle sert sur
   toutes les pages publiques, pas seulement sur celles qui chargent cette
   feuille-ci. */