/* ============================================================
   Ciel en Couleurs - Sous-pages (gabarit partagé)
   Menu déroulant Prestations · hero de sous-page · contenu · bande CTA
   ============================================================ */

/* ---------- NAV : menu déroulant « Prestations » ----------- */
.has-sub { position: relative; }
.has-sub > a::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
}
.nav__sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 232px; margin-top: .5rem; padding: .5rem;
  list-style: none; display: grid; gap: .1rem;
  background: rgba(251, 248, 244, .97);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid var(--c-line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.has-sub:hover .nav__sub, .has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
.nav__sub a {
  display: block; padding: .62rem .85rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600;
  text-transform: none; letter-spacing: normal;
  color: var(--c-encre-70) !important;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: var(--c-rose-poudre); color: var(--c-encre) !important; }

/* ---------- MÉGA-MENU « Prestations » ---------------------- */
/* Pont invisible (padding-top) : le hover ne se coupe pas entre l'item et le panneau. */
.megamenu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  padding-top: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.has-sub:hover .megamenu, .has-sub:focus-within .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}
.megamenu__panel {
  display: grid; grid-template-columns: 1fr 236px; gap: 1.4rem;
  width: 640px; max-width: 90vw; padding: 1.1rem;
  background: rgba(251, 248, 244, .98);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid var(--c-line-soft); border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.megamenu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; align-content: start; }
.megamenu__links a {
  display: block; padding: .8rem .9rem; border-radius: 12px;
  text-transform: none; letter-spacing: normal; font-weight: 500;
  color: var(--c-encre) !important;
}
.megamenu__links a::after { display: none; }
.megamenu__links b { display: block; font-family: var(--font-display); font-weight: 420; font-size: 1.18rem; }
.megamenu__links span { display: block; font-size: .82rem; color: var(--c-encre-70); margin-top: .15em; font-weight: 400; }
.megamenu__links a:hover, .megamenu__links a.is-active { background: var(--c-rose-poudre); }
/* Aperçu façon photo argentique imprimée, qui change au survol (voir main.js) */
.megamenu__preview {
  margin: 0; align-self: center;
  background: #fffdfb; padding: 10px 10px 34px; border-radius: 3px;
  box-shadow: 0 18px 40px -18px rgba(33,28,30,.45), 0 2px 6px rgba(33,28,30,.12);
  transform: rotate(-2.2deg);
}
.megamenu__preview img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #e7d3cf; transition: opacity .25s var(--ease); }
.megamenu__preview figcaption { text-align: center; font-family: var(--font-display); font-style: italic; font-size: .96rem; color: var(--c-encre-70); padding-top: 9px; }

/* ---------- HERO de sous-page ------------------------------ */
.subhero {
  position: relative;
  min-height: 60vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--c-ivoire);
}
.subhero__media {
  position: absolute; inset: 0; z-index: -2;
  background-color: #cdd6dd;
  background-size: cover; background-position: center;
  transform: scale(1.03);
}
/* Voile renforcé pour le contraste : sombre en bas-gauche (là où est le texte),
   image quasi intacte ailleurs. */
.subhero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,16,18,.42) 0%, rgba(20,16,18,.08) 24%, transparent 42%),
    linear-gradient(14deg, rgba(20,16,18,.88) 0%, rgba(20,16,18,.5) 38%, rgba(20,16,18,.08) 70%);
}
.subhero__content {
  padding-block: clamp(8rem, 15vh, 11rem) clamp(2.8rem, 6vh, 4.5rem);
  text-align: left;
}
.subhero .eyebrow {
  display: inline-block; margin-bottom: 1.1rem;
  color: rgba(251, 248, 244, .96);
  text-shadow: 0 1px 16px rgba(20,16,18,.5);
}
.subhero h1 {
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.8rem);
  max-width: 17ch; margin: 0 0 1.3rem;
  text-shadow: 0 2px 34px rgba(20,16,18,.6);
}
.subhero__lead {
  color: rgba(251, 248, 244, .94); max-width: 48ch;
  font-size: var(--fs-lead); line-height: 1.55;
  text-shadow: 0 1px 20px rgba(20,16,18,.55);
}
.breadcrumb {
  display: block; margin-bottom: 1.6rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 600; color: rgba(251, 248, 244, .82);
  text-shadow: 0 1px 12px rgba(20,16,18,.5);
}
.breadcrumb a { color: inherit; opacity: .85; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb span { opacity: .55; margin-inline: .5em; }

/* Titres de section : alignés à gauche (jamais centrés en mobile) */
.sec-head.is-center { margin-inline: auto; text-align: center; }
@media (max-width: 760px) {
  .sec-head, .sec-head.is-center { text-align: left; margin-inline: 0; }
}
.sec-head .eyebrow { margin-bottom: .9rem; }
.sec-head h2 { margin-bottom: .7rem; }

/* ---------- Contenu éditorial ------------------------------ */
.prose { max-width: var(--maxw-text); }
.prose p { margin-bottom: 1.1rem; color: var(--c-encre-70); }
.prose p:last-child { margin-bottom: 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr .85fr; } }
.split__media {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3;
  background: #e7d3cf center / cover no-repeat;
}
.split__media.is-portrait { aspect-ratio: 4 / 5; }

.feature-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.feature {
  padding: 1.6rem 1.5rem; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: rgba(255,255,255,.4);
}
.feature b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 420; margin-bottom: .5rem; }
.feature p { font-size: .95rem; color: var(--c-encre-70); }
.feature .num { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-rose-fane); }

/* Liste de teintes / puces prisme */
.ticklist { list-style: none; display: grid; gap: .7rem; margin-top: 1.2rem; }
.ticklist li { display: flex; gap: .7em; align-items: baseline; color: var(--c-encre-70); }
.ticklist li::before { content: "•"; color: var(--c-rose-fane); font-size: .9em; }

/* FAQ */
.faq { display: grid; gap: .8rem; max-width: 780px; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.faq details {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; background: rgba(255,255,255,.4);
}
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-size: 1.15rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-rose-fane); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq details[open] summary { margin-bottom: .7rem; }
.faq p { color: var(--c-encre-70); font-size: .96rem; }

/* Galerie « photo argentique imprimée » (sous-pages) : polaroids en grille,
   angles variés, se redressent au survol. */
.photostack { display: grid; gap: clamp(1.1rem, 2.6vw, 2.2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .photostack { grid-template-columns: repeat(3, 1fr); } }
.photo {
  margin: 0; background: #fffdfb; padding: 12px 12px 44px; border-radius: 3px;
  box-shadow: 0 20px 42px -20px rgba(33,28,30,.42), 0 3px 8px rgba(33,28,30,.12);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #e7d3cf; }
.photo figcaption {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: 1.02rem; color: var(--c-encre-70); padding-top: 13px;
}
.photo:nth-child(3n+1) { transform: rotate(-2.2deg); }
.photo:nth-child(3n+2) { transform: rotate(1.6deg); }
.photo:nth-child(3n+3) { transform: rotate(-1deg); }
.photo:nth-child(4n+2) { transform: rotate(2.4deg); }
.photo:hover {
  transform: rotate(0) scale(1.035); z-index: 2; position: relative;
  box-shadow: 0 30px 60px -18px rgba(33,28,30,.5);
}
@media (prefers-reduced-motion: reduce) { .photo { transition: none; } }

/* Carrousel : en desktop c'est la grille .photostack ; en mobile, swipe + flèches
   avec de grandes images pour l'immersion. */
.carousel { position: relative; }
.carousel__controls { display: none; }
@media (max-width: 760px) {
  .carousel .photostack {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 0;                              /* espacement géré par les marges (léger chevauchement) */
    /* padding-block généreux : l'ombre des polaroids n'est pas coupée par le scroll */
    padding-block: 1.5rem 2.8rem;
    align-items: center;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));  /* pleine largeur, bord à bord */
    padding-inline: calc(var(--gutter) + 6px);
  }
  .carousel .photostack::-webkit-scrollbar { display: none; }
  .carousel .photo {
    flex: 0 0 78%; scroll-snap-align: center;
    margin-inline: -11px;               /* léger chevauchement, comme posées sur une table */
    transform: rotate(var(--tilt, 0deg));
  }
  .carousel .photo:nth-child(odd)   { --tilt: -1.8deg; }
  .carousel .photo:nth-child(even)  { --tilt: 1.9deg; }
  .carousel .photo:nth-child(4n+3)  { --tilt: -1deg; }
  .carousel .photo:nth-child(4n+1)  { --tilt: 1.3deg; }
  .carousel .photo img { aspect-ratio: 3 / 4; }  /* grandes images verticales */
  .carousel__controls {
    display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.1rem;
  }
}
.carousel__nav {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--c-line); background: #fff;
  display: grid; place-items: center; cursor: pointer; color: var(--c-encre);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.carousel__nav:hover, .carousel__nav:focus-visible { background: var(--c-rose-poudre); border-color: var(--c-rose-fane); }
.carousel__nav:active { transform: scale(.94); }
.carousel__nav svg { width: 22px; height: 22px; }

/* ---------- Bande CTA (avant footer) ----------------------- */
.cta-band { background: var(--c-encre); color: var(--c-ivoire); text-align: center; }
.cta-band .prisme-line { margin: 0 auto 1.5rem; }
.cta-band .eyebrow { color: #e3b8c4; }
.cta-band h2 { max-width: 20ch; margin: .4rem auto .6rem; }
.cta-band p { color: rgba(251,248,244,.72); max-width: 46ch; margin: 0 auto; }
.cta-band .btn { --btn-bg: var(--c-ivoire); --btn-fg: var(--c-encre); margin-top: 1.8rem; }

/* ---------- Nav pleine (pages sans hero sombre) ------------ */
.nav--solid {
  --nav-fg: var(--c-encre); --nav-fg-dim: var(--c-encre-70);
  background: rgba(251, 248, 244, .9);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  box-shadow: 0 1px 0 var(--c-line-soft);
}
.nav--solid .brand__logo { filter: none; }
.pagehead { padding-top: clamp(8.5rem, 13vh, 11rem); }
.pagehead .eyebrow { color: var(--c-rose-fane); }

/* ---------- Pages légales ---------------------------------- */
.legal { max-width: 820px; }
.legal h2 { font-size: var(--fs-h3); margin: 2rem 0 .8rem; }
.legal p, .legal li { color: var(--c-encre-70); margin-bottom: .8rem; }
.legal ul { padding-left: 1.2rem; }

/* ---------- Vidéo encadrée (effet Blink, gender reveal…) ---- */
.videocard {
  position: relative; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: #e7d3cf;
}
.videocard video { width: 100%; height: 100%; display: block; object-fit: cover; }
.videocard.is-portrait { aspect-ratio: 4 / 5; }
.videocard.is-portrait video { position: absolute; inset: 0; }
.videocard figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2.4rem 1.3rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(33,28,30,.62));
  color: #fff; font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
}

/* ---------- Liste de teintes (chips couleur) --------------- */
.teintes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.teintes li {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em .95em .5em .7em;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--c-line);
  border-radius: 100px; font-size: .9rem; font-weight: 600; color: var(--c-encre);
}
.teintes .dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33,28,30,.14); }
.teintes__note { margin-top: .9rem; font-size: .86rem; color: var(--c-encre-55); }

/* ---------- Badge « supplément » (effet Blink) ------------- */
.tag-supp {
  display: inline-block; margin-left: .6em; vertical-align: middle;
  padding: .3em .75em; border-radius: 100px;
  font-size: .64rem; text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: 700; color: #fff; background: var(--c-rose-fane);
}

/* ---------- Rubrique « Notre agence » ---------------------- */
.agence { background: var(--c-rose-poudre); }
.agence .wrap { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 860px) { .agence .wrap { grid-template-columns: .82fr 1.18fr; } }
.agence__card {
  background: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  box-shadow: var(--shadow-sm); border: 1px solid var(--c-line-soft);
  display: grid; place-items: center;
}
.agence__card img { width: min(300px, 78%); height: auto; }
.agence h2 { margin-bottom: .8rem; }
.agence .prose { margin-bottom: 1.5rem; }

/* ---------- Bloc « appelez-nous » (contact & formulaire) ---- */
.phone-cta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.6rem; padding: .95rem 1.2rem;
  border: 1px solid var(--c-line); border-radius: 18px;
  background: var(--c-ivoire); text-decoration: none; color: var(--c-encre);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.phone-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-rose-fane); }
.phone-cta__icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c-rose-fane), var(--c-rose-fane-dark));
}
.phone-cta__eyebrow {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--c-encre-70);
}
.phone-cta__num {
  display: block; font-family: var(--font-display); font-weight: 460;
  font-size: 1.5rem; line-height: 1.1; color: var(--c-encre);
}
.form__or {
  margin-top: 1rem; text-align: center; font-size: .95rem; color: var(--c-encre-70);
}
.form__or a { color: var(--c-rose-fane-dark); font-weight: 600; white-space: nowrap; }