/* ── Pages de prestation + bloc tarifs ───────────────────────────────
   Uniquement des variables du site : ces pages doivent être indiscernables
   de l'accueil. Chargé aussi par l'accueil, pour le bloc tarifs. */

/* ── Fil d'Ariane ── */
.fil {
  padding-top: calc(var(--pad) + 40px);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.fil a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.25s ease;
}

.fil a:hover { color: var(--accent); }
.fil span[aria-hidden] { margin: 0 8px; color: var(--line-3); }

/* ── En-tête de page de prestation ── */
.presta-hero {
  padding: clamp(32px, 6vh, 64px) 0 clamp(24px, 4vh, 40px);
}

.presta-titre {
  font-family: var(--serif);
  font-size: clamp(38px, 7vw, 70px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.presta-chapeau {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  max-width: 620px;
  color: var(--text-2);
  margin: 0 0 14px;
}

.presta-zone {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin: 0 0 28px;
}

.presta-cta {
  display: inline-block;
  border-radius: 7px;
  text-decoration: none;
  padding: 15px 32px;
}

/* ── Image d'illustration ── */
.presta-image {
  margin: 0 0 clamp(40px, 7vh, 88px);
  max-width: var(--wrap);
  padding: 0 var(--pad);
  margin-left: auto;
  margin-right: auto;
}

.presta-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 7px;
}

/* ── Corps de texte ── */
.presta-texte h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 600;
  margin: clamp(28px, 5vh, 48px) 0 12px;
}

.presta-texte h2:first-child { margin-top: 0; }

.presta-texte p {
  font-size: 16px;
  line-height: 1.75;
  max-width: 660px;
  color: var(--text-2);
  margin: 0;
}

/* ── Bloc tarifs (accueil et pages de prestation) ── */
.tarifs-titre {
  font-family: var(--serif);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 600;
  margin: 0 0 14px;
}

.tarifs-intro {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 620px;
  color: var(--text-3);
  margin: 0 0 clamp(28px, 5vh, 48px);
}

.tarifs-cat {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  color: var(--accent);
  margin: clamp(26px, 4vh, 40px) 0 16px;
}

.tarifs-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tarif {
  padding: 20px;
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: 7px;
}

.tarif-nom {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 6px;
}

.tarif-prix {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
  margin: 0 0 10px;
}

.tarif-prix span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  display: block;
}

.tarif-prix strong { font-weight: 400; }

.tarif-detail {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0;
}

.tarifs-options {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-3);
  max-width: 720px;
  margin: 0;
}

/* Sur les pages de prestation, la nav n'a pas de barre de progression :
   on compense la hauteur perdue. */
.presta-page .nav { border-bottom: 1px solid var(--line); }

@media (max-width: 720px) {
  .fil { padding-top: calc(var(--pad) + 34px); }
  .tarifs-liste { grid-template-columns: 1fr; }
}

/* ── Cartes de prestation cliquables (accueil) ───────────────────────
   Le titre porte le lien visible (c'est son intitulé que Google lit) ;
   ce lien de couverture rend toute la carte cliquable sans dupliquer un
   lien dans l'ordre de tabulation — d'où le tabindex="-1" dans le HTML. */
.service {
  position: relative;
}

.service h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.service:hover h3 a,
.service:focus-within h3 a {
  color: var(--accent);
}

.service-couvre {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Le texte reste sélectionnable malgré le lien de couverture. */
.service h3,
.service p {
  position: relative;
  z-index: 2;
}

/* ── Note des astérisques sous les chiffres du studio ────────────────
   « Multi-caméra » et le délai de livraison dépendent de la formule
   choisie : la note l'explicite au lieu de laisser croire à un standard. */
.figures-note {
  display: grid;
  gap: 5px;
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-4);
  /* Alignée sur la largeur du bloc de chiffres (440 px) : au-delà, le texte
     passait sous l'image décorative posée en absolu à droite du panneau. */
  max-width: 440px;
}

/* « 3 à 5 sem. » passait à la ligne et désalignait les trois colonnes.
   Le chiffre reste sur une ligne, et la taille s'adapte à sa longueur. */
.figures .fig-k {
  white-space: nowrap;
  font-size: clamp(20px, 2.6vw, 30px);
}

.figures > div {
  align-content: start;
}

.figures-note sup {
  color: var(--accent);
  margin-right: 2px;
}

.fig-v sup {
  color: var(--accent);
  font-size: 0.7em;
}

/* ── Lien de langue ────────────────────────────────────────────────
   Dans le pied de page, il hérite du style des liens voisins. Rien à
   surcharger : c'est justement ce qu'on veut, un lien parmi les autres. */

/* ── Widget anti-robots ──────────────────────────────────────────────
   Vide et sans hauteur quand Turnstile n'est pas configuré : le pied du
   formulaire ne bouge donc pas. */
.cf-turnstile:empty {
  display: none;
}

.cf-turnstile {
  margin-top: 14px;
}

.bk-turnstile {
  flex-shrink: 0;
}

/* ── Repère « Découvrir » : centré en bas du hero ─────────────────────
   Il était aligné à droite, en vis-à-vis du sous-titre (`.hero-foot` est un
   flex `space-between`). On empile désormais les deux blocs et on centre le
   repère.

   Il reste DANS LE FLUX plutôt que positionné en absolu : en absolu, sur
   mobile et tablette, le sous-titre passe sur deux lignes et venait le
   recouvrir de 17 px. Empilé, l'espacement est garanti sur toute largeur, et
   la hauteur d'origine du repère est conservée — seul l'axe horizontal
   change, ce qui était la demande.

   Rien n'est posé sur le lien lui-même : anim.js lui applique un `transform`
   en style inline pour l'animer, qui écraserait toute règle de centrage. */
.hero-foot {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 2.4vh, 24px);
}

.hero-cue-wrap {
  align-self: center;
}

/* ── Vidéo d'en-tête : cadrage complet ────────────────────────────────
   Trois effets se multipliaient pour n'afficher que 51 % de l'image
   (1,48× de grossissement sur un écran 1440×900) :

     · object-fit: cover ....... 1,12×  inévitable
     · .hero-media inset: -8% .. 1,16×
     · .hero-video scale(1.14) . 1,14×

   Le premier est incontournable : la vidéo est en 16:9 et la fenêtre
   rarement, donc `cover` rogne les côtés — sans lui, on aurait des bandes
   noires. Il ne rogne QUE les côtés ; toute la hauteur passe.

   Les deux autres servaient de marge au parallaxe, qui fait glisser la
   vidéo de 22 px au plus pendant le défilement. Ils en offraient 144, et
   c'est ce sur-cadrage qui coupait le haut du plan — donc la tête de la
   mariée. Comme tout glissement exige de cacher une partie de l'image, le
   parallaxe a été retiré de cette vidéo (attribut `data-parallax` ôté dans
   index.html) plutôt que réduit : c'était le prix du cadrage complet.

   Résultat : 1,12× au lieu de 1,48×, hauteur intégrale, ~89 % de l'image.

   Rien n'est modifié dans home.css ni anim.js : presta.css charge après, et
   sans l'attribut anim.js n'écrit plus de transform sur cet élément. */
.hero-media {
  inset: 0;
}

.hero-video {
  transform: none;
}