/* Jérémie & Jeannette — Mariage · Photo & Vidéo */

/* ---------- POLICES GRATUITES (Google Fonts, dossier Font/FONT GOOGLE) ----------
   Intitules de page manuscrits ....... Open Heart   (remplace Pretty Dahlia)
   Noms de prestations / titres ....... Abril Fatface en majuscules
   Descriptions & prix ................ Reem Kufi Ink en majuscules
   Pastilles / puces .................. FcoFlares
   Options en bas de page ............. Cinzel Decorative
   Le reste (navigation, boutons) ..... Sekuya
   Bacana est fournie comme alternative a Open Heart pour les intitules. */
@font-face { font-family: 'Open Heart'; src: url('../assets/fonts/OpenHeart.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bacana'; src: url('../assets/fonts/Bacana.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Abril Fatface'; src: url('../assets/fonts/AbrilFatface.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Reem Kufi Ink'; src: url('../assets/fonts/ReemKufiInk.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cinzel Decorative'; src: url('../assets/fonts/CinzelDecorative.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sekuya'; src: url('../assets/fonts/Sekuya.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'FcoFlares'; src: url('../assets/fonts/FcoFlares.woff2') format('woff2'), url('../assets/fonts/FcoFlares.TTF') format('truetype'); font-display: swap; }

/* ---------- POLICES PAYANTES (desactivees) ----------
   Les fichiers restent dans assets/fonts. Pour revenir aux polices payantes :
   reactiver ces declarations puis remettre dans :root
   --script: 'Pretty Dahlia'; --display: 'Copperplate Gothic'; --sans: 'LEMON MILK';
@font-face { font-family: 'Pretty Dahlia'; src: url('../assets/fonts/Pretty Dahlia.woff2') format('woff2'), url('../assets/fonts/Pretty Dahlia.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Copperplate Gothic'; src: url('../assets/fonts/COPRGTL.woff2') format('woff2'), url('../assets/fonts/COPRGTL.TTF') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Copperplate Gothic'; src: url('../assets/fonts/COPRGTB.woff2') format('woff2'), url('../assets/fonts/COPRGTB.TTF') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
---------------------------------------------------- */

:root {
  --paper: #f7f7f7;
  --paper-soft: #ffffff;
  --paper-warm: #efefef;
  --ink: #2d2418;
  --ink-soft: #6f5b40;
  --muted: #7a6748;
  --gold: #b88b36;
  --gold-deep: #7b5618;
  --gold-hi: #f0d28a;
  --wine: #572b2e;
  --line: rgba(45, 36, 24, .14);
  --line-strong: rgba(123, 86, 24, .32);
  --glass: rgba(255, 250, 239, .72);
  --shadow: 0 28px 80px rgba(63, 42, 16, .16);
  --script: 'Open Heart', cursive;
  --display: 'Abril Fatface', serif;
  --sans: 'Reem Kufi Ink', system-ui, sans-serif;
  --flare: 'FcoFlares', serif;
  --option: 'Cinzel Decorative', serif;
  --ui: 'Sekuya', system-ui, sans-serif;
  --gold-grad: linear-gradient(112deg, #7c5517 0%, #bd8d35 30%, #f0d28a 50%, #b7832e 72%, #6b4613 100%);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Hauteur reservee sous la barre de navigation, qui est fixe : c'est ce
     retrait qui empeche un titre vise par une ancre (#prestations, #contact,
     #faq...) d'arriver cache derriere elle. La valeur vaut la hauteur de la
     barre plus sa marge haute, arrondie au-dessus. Elle est reprise dans les
     deux requetes de media qui changent cette hauteur, en fin de feuille. */
  --topbar-space: 96px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topbar-space);
}
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 8%, rgba(184, 139, 54, .08), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(87, 43, 46, .05), transparent 24rem),
    linear-gradient(180deg, #ffffff, #f7f7f7 44%, #f2f2f2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .01em;
  word-spacing: .13em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Chasse de l'espace entre les mots ----------
   Reem Kufi Ink, la police de tout le texte courant, est dessinee d'abord
   pour l'arabe. Son espace latin mesure 0.13 em, la ou une police latine
   ordinaire tourne autour de 0.25 a 0.30 em (LEMON MILK : 0.29 em,
   Copperplate Gothic : 0.25 em). A 14 px, l'espace entre deux mots faisait
   donc moins de 2 px, et l'interlettrage de .01em pose sur body l'ecrasait
   encore : les mots se touchaient. Dans le tableau comparatif, "Duree du
   film" se lisait "Dureedu film".
   Le word-spacing pose ci-dessus rend l'espace manquant et ramene le blanc
   inter-mots a environ 0.26 em, la valeur d'une police latine normale.
   Abril Fatface, la police des titres, a le meme defaut en moins marque
   (espace a 0.18 em) : elle est reprise plus bas.

   A SAVOIR AVANT DE TOUCHER A CES VALEURS
   word-spacing ecrit en em est calcule sur la taille de l'element qui le
   declare, puis herite en pixels figes. Le .13em pose sur body vaut donc
   1.8 px partout, ce qui reste juste entre 12 et 16 px mais devient trop
   serre au-dela. D'ou les redeclarations ci-dessous : elles ne changent pas
   la valeur, elles la font recalculer a la taille du bloc. Tout nouveau
   bloc de texte courant depassant 16 px doit etre ajoute a cette liste. */
.hero .sub,
.subpage .lede,
.docu-quote p,
.docu-pack-tagline,
.docu-pack-list li,
.plaquette-sub,
.pack li {
  word-spacing: .13em;
}

/* Abril Fatface : espace a 0.18 em. Les titres en capitales tres espacees
   ("45 MIN A 1 H", "FILM DE MARIAGE") souffraient le plus, l'interlettrage
   eloignant les lettres sans eloigner les mots. */
.cinema-card h3,
.pack h3,
.docu-pillar h3,
.docu-timeline-title,
.promo-badge,
.promo-title,
.promo-code,
.avis-card blockquote,
.faq-item summary,
.legal h2,
.apropos-portrait h3,
.subpage h2,
.subpage h3,
.tarifs-cat h3,
.info-card h3,
.site-footer h2,
.compare thead th {
  word-spacing: .08em;
}

/* Sekuya, elle, a un espace genereux (0.5 em). Le 1.8 px herite du corps
   s'ajoutait par-dessus et decollait les mots des boutons et du menu. */
.topbar nav a,
.hero .accroche,
.invite,
.mail,
.whatsapp,
.text-link,
.gamme-switch button,
.docu-cta,
.social-link,
.docu-pack-name,
.docu-pack-illu .docu-pack-name,
.pack h3.docu-nom {
  word-spacing: normal;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('../assets/img/textures/paper-texture.webp') repeat;
  background-size: 560px;
  opacity: .12;
  mix-blend-mode: multiply;
  pointer-events: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; font: inherit; cursor: pointer; color: inherit; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -200px;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--paper-soft);
  transition: top .25s ease;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Mots composes insecables ----------
   Un trait d'union est une occasion de retour a la ligne pour le
   navigateur : "bande-son" se coupait en "bande-" / "son", "contactez-nous"
   en "contactez-" / "nous". hyphens: none ne l'empeche pas, la propriete
   ne vise que la cesure automatique, pas les traits d'union ecrits.
   Il faut donc marquer les mots concernes un par un.
   A n'employer que sur des mots courts : un groupe insecable trop long
   deborde de sa colonne sur un petit ecran. */
.nowrap { white-space: nowrap; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.flare {
  font-family: var(--flare);
  color: var(--gold);
  font-size: 1.1em;
  line-height: 1;
}

.illu { mix-blend-mode: multiply; }

/* Barre de navigation fixe : elle reste a l'ecran pendant tout le defilement,
   sur les six pages. Elle etait en position: absolute, donc posee sur le haut
   de la page et perdue des le premier defilement ; le menu n'etait alors
   joignable qu'en remontant.
   Trois consequences, toutes traitees :
     - le contenu doit demarrer plus bas que la barre. C'est deja le cas :
       .hero reserve 120 px, .subpage 132 px, .legal 140 px, pour une barre
       qui descend a 79 px du haut. Toute nouvelle page doit prevoir le meme
       retrait, sinon son premier titre passera dessous.
     - une ancre visee par un lien interne arriverait sous la barre : d'ou le
       scroll-padding-top pose sur html, calcule sur --topbar-space.
     - z-index 50, au-dessus du bouton de retour en haut (45) : le menu
       deroulant mobile s'ouvre vers le bas et pourrait le croiser. Le lien
       d'evitement reste seul au-dessus, a 100. */
.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  width: min(calc(100% - 32px), 1180px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 50px rgba(63, 42, 16, .09);
  backdrop-filter: blur(18px);
}
.topbar .brand {
  font-family: var(--script);
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar nav a {
  position: relative;
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}
.topbar nav a:hover,
.topbar nav a:focus-visible {
  background: rgba(184, 139, 54, .12);
  color: var(--gold-deep);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(184, 139, 54, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Bouton retour en haut ---------- */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 250, 239, .94);
  color: var(--gold-deep);
  box-shadow: 0 12px 30px rgba(63, 42, 16, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s, background .25s ease, color .25s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--ink);
  color: var(--paper-soft);
}
.back-to-top:active { transform: scale(.94); }

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  width: min(100% - 40px, 1220px);
  margin: 0 auto;
  padding: 120px 0 76px;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow,
.page-head .mariage,
.choice-card .tag,
.pack .hours,
.pack .price .label,
.gamme-options .name,
.contact .zone {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero .eyebrow {
  margin: 0 0 18px;
  color: var(--wine);
}
/* Intitule manuscrit en image detouree (source : Font/Ecriture Titre PNG),
   place au-dessus du titre du hero */
.title-script {
  width: min(100%, 560px);
  height: auto;
  margin: 0 0 10px -6px;
  opacity: .9;
}
/* Titre du hero : meme ecriture que le bouton "Voir les tarifs" */
.hero .accroche {
  display: block;
  max-width: none;
  margin: 0;
  padding: .1em 0 .1em .04em;
  font-family: var(--ui);
  font-size: clamp(26px, 3.15vw, 44px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero .sub {
  max-width: 610px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .02em;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 38px;
}
.invite,
.mail,
.whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-soft);
  box-shadow: 0 18px 40px rgba(45, 36, 24, .18);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease;
}
.invite:hover,
.mail:hover {
  transform: translateY(-2px);
  background: var(--wine);
  box-shadow: 0 24px 54px rgba(87, 43, 46, .2);
}
.invite:active,
.mail:active,
.whatsapp:active { transform: translateY(0) scale(.98); }
.whatsapp {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.whatsapp:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper-soft);
  box-shadow: 0 18px 40px rgba(45, 36, 24, .18);
}
.text-link {
  position: relative;
  color: var(--gold-deep);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform .25s ease;
}
.text-link:hover::after { transform: scaleX(.62); }

/* ---------- Lien au fil du texte ----------
   .text-link ci-dessus est fait pour un lien ISOLE, seul sur sa ligne :
   11 px, capitales, interlettrage .14em. Pose au milieu d'un paragraphe
   en 14 px minuscules, il casse la ligne de lecture, l'oeil bute sur un
   bloc de capitales plus petit que le texte qui l'entoure. Son
   soulignement en ::after absolu se place en plus de travers des que le
   lien passe a la ligne.
   Celui-ci herite du corps, de la casse et de l'interlettrage du texte
   qui l'accueille. Il ne se distingue que par la couleur et un
   soulignement discret qui s'affirme au survol. */
.inline-link {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(123, 86, 24, .38);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.inline-link:hover,
.inline-link:focus-visible {
  color: var(--wine);
  text-decoration-color: currentColor;
}

.hero-visual {
  position: relative;
  min-height: clamp(480px, 63vw, 720px);
  perspective: 1000px;
}
.hero-sheet {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: absolute;
  width: min(75%, 430px);
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: var(--paper-soft);
  transition: transform .35s var(--ease);
}
.hero-sheet-main {
  right: 4%;
  top: 3%;
  z-index: 2;
  transform: rotate(4deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.hero-sheet-back {
  left: 2%;
  bottom: 4%;
  opacity: .88;
  transform: rotate(-8deg) scale(.92) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  filter: saturate(.9);
}
.hero-stats {
  position: absolute;
  left: 0;
  bottom: 64px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-stats span {
  min-width: 98px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 38px rgba(63, 42, 16, .08);
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.hero-stats b {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 1180 px, comme .choice-grid, .cinema-grid, .docu-packs et .docu-more :
   l'intitule d'une section doit tomber sur la meme verticale que les cartes
   qu'il annonce. A 1120 px il etait rentre de 30 px a l'interieur de son
   propre contenu, ce qui se voyait sur toute la page d'accueil.
   .galerie-collage et .faq-list restent plus etroits volontairement : le
   collage est une composition centree, la foire aux questions est bridee a
   la largeur de lecture. */
.page-head {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 88px 0 8px;
  text-align: left;
}
/* La marge basse doit couvrir les jambages : le degrade dore est decoupe
   sur la boite de l'element, tout ce qui depasse devient invisible. */
/* margin et font-weight sont fixes ici parce que ces intitules sont des <h2> :
   sans cela, le navigateur appliquerait sa marge par defaut et un gras de
   synthese sur une police manuscrite qui n'a qu'une graisse. */
.page-head .script {
  display: block;
  margin: 0;
  padding: .18em 0 .3em .08em;
  font-family: var(--script);
  font-size: clamp(62px, 9vw, 124px);
  font-weight: 300;
  line-height: 1;
}
.page-head .mariage {
  margin-top: 8px;
  color: var(--ink);
}

.choice {
  position: relative;
  padding: 18px 0 108px;
}

.cinema {
  position: relative;
  padding: 26px 0 88px;
}
.cinema-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(100% - 40px, 1180px);
  margin: 36px auto 0;
}
.cinema-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 70px rgba(63, 42, 16, .07);
}
.cinema-card .num {
  display: inline-block;
  color: var(--wine);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cinema-card h3 {
  margin: 14px 0 8px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cinema-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(100% - 40px, 1180px);
  margin: 48px auto 0;
}
.choice-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 430px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 70px rgba(63, 42, 16, .07);
  text-align: center;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.choice-card.in { opacity: 1; transform: none; }
.choice-card:nth-child(2).in { transition-delay: .08s; }
.choice-card:nth-child(3).in { transition-delay: .16s; }
.choice-card:hover {
  border-color: rgba(184, 139, 54, .42);
  box-shadow: 0 30px 84px rgba(63, 42, 16, .16);
  transform: translateY(-6px);
}
.choice-card .media {
  position: relative;
  height: 210px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 210, 138, .28), transparent 54%),
    linear-gradient(145deg, rgba(255, 250, 239, .52), rgba(221, 203, 169, .18));
}
.choice-card .media::after {
  content: '';
  position: absolute;
  inset: auto 9% 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 139, 54, .38), transparent);
  border: 0;
  border-radius: 0;
}
.choice-card .media img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 74%;
  max-height: 170px;
  height: auto;
  object-fit: contain;
  opacity: .82;
  transform: translateY(-6px) scale(1);
  transition: transform .7s var(--ease);
}
.choice-card:hover .media img { transform: translateY(-10px) scale(1.08) rotate(-2deg); }
/* Taille calee pour que "Photos & Vidéos" tienne sur une seule ligne
   dans la carte la plus etroite (grille 3 colonnes). */
.choice-card h3 {
  align-self: end;
  margin: 18px 0 8px;
  font-family: var(--script);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.2;
}
.choice-card .tag { color: var(--wine); }
.choice-card .from {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.choice-card .from b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.gamme {
  padding: 22px 0 112px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(240, 238, 234, .14));
}
.gamme-shell {
  width: min(100% - 40px, 1240px);
  margin: 28px auto 0;
}
.gamme-main { min-width: 0; }
.gamme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 48px rgba(63, 42, 16, .08);
  backdrop-filter: blur(14px);
}
.gamme-switch button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .24s ease, color .24s ease, transform .24s var(--ease), box-shadow .24s ease;
}
.gamme-switch button:hover {
  background: rgba(184, 139, 54, .1);
  color: var(--gold-deep);
}
.gamme-switch button.is-active {
  background: var(--ink);
  color: var(--paper-soft);
  box-shadow: 0 12px 28px rgba(45, 36, 24, .16);
}
.gamme-switch button:active {
  transform: scale(.98);
}
.packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.packs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pack {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 30px;
  animation: pack-in .6s var(--ease) backwards;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(240, 238, 234, .62)),
    var(--paper-soft);
  box-shadow: 0 20px 64px rgba(63, 42, 16, .09);
  outline: none;
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.pack:nth-child(2) { animation-delay: .07s; }
.pack:nth-child(3) { animation-delay: .14s; }
.pack:nth-child(4) { animation-delay: .21s; }
@keyframes pack-in {
  from { opacity: 0; transform: translateY(22px); }
}
.pack:hover,
.pack:focus-within {
  transform: translateY(-5px);
  border-color: rgba(184, 139, 54, .45);
  box-shadow: 0 32px 80px rgba(63, 42, 16, .16);
}
.pack .illu-side {
  position: absolute;
  right: -42px;
  bottom: -44px;
  /* Largeur portee de 210 a 320 px. A ratio 1:1 il faut elargir pour
     retrouver l'encombrement qu'avait l'illustration du temps ou elle
     etait etiree, 210 de large sur 500 de haut. Seul ce nombre est a
     bouger pour ajuster la taille. */
  width: min(66%, 320px);
  /* Indispensable des lors que la balise porte width= et height= : sans
     cela l'attribut height impose 500 px de haut pendant que le CSS
     ramene la largeur a 210, et l'illustration est etiree. Les cartes de
     l'accueil sont fabriquees par main.js sans ces attributs, le defaut
     ne s'y voyait donc pas. Meme regle que .choice-card .media img et
     .docu-pack-illu img. */
  height: auto;
  opacity: .18;
  pointer-events: none;
  transition: opacity .35s ease, transform .5s var(--ease);
}
.pack:hover .illu-side,
.pack:focus-within .illu-side {
  opacity: .34;
  transform: rotate(-4deg) scale(1.05);
}
.pack h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.pack .hours {
  position: relative;
  z-index: 1;
  margin: 10px 0 22px;
  color: var(--wine);
}
.pack ul {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pack li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pack li .flare { flex: 0 0 auto; }
.pack .price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pack .price .label { color: var(--muted); }
.pack .price .amount {
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.pack .price .strike {
  margin-right: 8px;
  color: var(--muted);
  font-size: .6em;
  text-decoration: line-through;
}
.price-on-request {
  font-size: 20px !important;
  letter-spacing: .08em !important;
}

.gamme-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.gamme-options .opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  font-family: var(--option);
}
.gamme-options .name {
  color: var(--ink-soft);
  font-family: var(--option);
}
.gamme-options .name .note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
}
.gamme-options .val {
  color: var(--gold-deep);
  font-family: var(--option);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Option mise en avant (Animation) : encadre dore */
.gamme-options .opt--hl {
  padding: 14px 22px;
  border: 2px solid var(--gold);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 50%, rgba(240, 210, 138, .28), transparent 62%),
    rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(123, 86, 24, .12);
}
.gamme-options .opt--hl .name { color: var(--ink); }
.gamme-options .opt--hl .val { font-size: 17px; }

.docu {
  position: relative;
  padding: 28px 0 112px;
}

/* --- Packs Docu Portrait --- */
.docu-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: min(100% - 40px, 1180px);
  margin: 44px auto 0;
}
.docu-pack-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(184, 139, 54, .28);
  border-radius: 24px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 24px 72px rgba(63, 42, 16, .10);
  outline: none;
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.docu-pack-card:hover,
.docu-pack-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(184, 139, 54, .55);
  box-shadow: 0 36px 90px rgba(63, 42, 16, .16);
}
.docu-pack-card--prestige {
  border-color: var(--gold-deep);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,236,228,.78));
}
.docu-pack-illu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 60%, rgba(240, 210, 138, .32), transparent 68%),
    linear-gradient(160deg, rgba(255,250,235,.6), rgba(225,210,178,.2));
  border-radius: 24px 24px 0 0;
  padding: 22px 28px;
}
.docu-pack-card--cinema .docu-pack-illu {
  background:
    radial-gradient(circle at 30% 30%, rgba(240, 210, 138, .34), transparent 36%),
    radial-gradient(circle at 78% 78%, rgba(87, 43, 46, .20), transparent 34%),
    linear-gradient(150deg, rgba(56, 35, 15, .96), rgba(104, 71, 28, .84));
  color: var(--paper-soft);
}
.docu-pack-card--editorial .docu-pack-illu {
  background:
    radial-gradient(circle at 62% 25%, rgba(240, 210, 138, .26), transparent 34%),
    linear-gradient(155deg, rgba(255,250,245,.92), rgba(241,232,220,.78));
}
.docu-pack-illu-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-soft);
  text-transform: uppercase;
}
/* Nom du pack remonte dans le bandeau illustre */
.docu-pack-illu .docu-pack-name {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: .06em;
  line-height: 1.05;
}
.docu-pack-card--cinema .docu-pack-illu-copy {
  color: rgba(255, 250, 239, .88);
}
.docu-pack-illu-kicker {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
}
.docu-pack-illu-line {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .08em;
}
.docu-pack-illu img {
  align-self: center;
  width: min(40%, 150px);
  height: auto;
  opacity: .9;
  transition: transform .5s var(--ease), opacity .35s ease;
}
.docu-pack-card--cinema .docu-pack-illu img {
  width: min(40%, 170px);
  opacity: .98;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .20));
}
.docu-pack-card--prestige .docu-pack-illu img {
  width: min(40%, 165px);
}

.docu-pack-card--cinema .docu-pack-pack-body,
.docu-pack-card--cinema .docu-pack-body {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.docu-pack-card--cinema .docu-pack-body .docu-pack-sub,
.docu-pack-card--cinema .docu-pack-body .docu-pack-tagline,
.docu-pack-card--cinema .docu-pack-body .docu-pack-list li,
.docu-pack-card--cinema .docu-pack-body .docu-hint,
.docu-pack-card--cinema .docu-pack-body .docu-urgency,
.docu-pack-card--cinema .docu-pack-body .docu-strike {
  color: rgba(255, 250, 239, .82);
}
.docu-pack-card--cinema .docu-pack-body .docu-pack-name,
.docu-pack-card--cinema .docu-pack-body .docu-promo {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.docu-pack-card--cinema .docu-pack-body .docu-pack-list li {
  border-bottom-color: rgba(255, 250, 239, .14);
}
.docu-pack-card--cinema .docu-pack-body .docu-pack-price {
  border-top-color: rgba(255, 250, 239, .14);
}
.docu-pack-card:hover .docu-pack-illu img,
.docu-pack-card:focus-within .docu-pack-illu img {
  transform: translateY(-6px) scale(1.08) rotate(-3deg);
  opacity: 1;
}
.docu-pack-body {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.docu-pack-name {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.docu-pack-sub {
  margin: 0 0 16px;
  color: var(--wine);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.docu-pack-tagline {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
}
.docu-pack-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.docu-pack-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.docu-pack-list li:last-child { border-bottom: none; }
.docu-pack-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.docu-strike {
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: var(--wine);
  opacity: .7;
  transition: opacity .35s ease;
}
.docu-pack-card:hover .docu-strike,
.docu-pack-card:focus-within .docu-strike { opacity: 1; }
.docu-promo {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: 0;
  opacity: 1;
  transition: opacity .35s ease;
  font-variant-numeric: tabular-nums;
}
.docu-pack-card:hover .docu-promo,
.docu-pack-card:focus-within .docu-promo { opacity: 1; }
.docu-discount {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--wine);
  color: var(--paper-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.docu-urgency {
  margin: 10px 0 0;
  color: var(--wine);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  font-style: italic;
}
.docu-onreq {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.docu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-soft);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  width: fit-content;
  transition: transform .25s var(--ease), background .25s ease;
}
.docu-cta:hover {
  background: var(--wine);
  transform: translateY(-2px);
}
.docu-cta--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--ink);
}
.docu-cta--gold:hover {
  background: var(--paper-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* --- Pull-quote --- */
.docu-quote {
  position: relative;
  width: min(100% - 40px, 860px);
  margin: 48px auto 0;
  padding: 40px 44px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,240,238,.72));
  box-shadow: 0 22px 64px rgba(63, 42, 16, .08);
  text-align: center;
}
.docu-quote .flare {
  display: block;
  font-size: 1.8em;
  margin-bottom: 16px;
}
/* Meme police que les descriptions de prestations ("Interviews individuelles...") */
.docu-quote p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .03em;
  color: var(--ink);
}
.docu-quote em {
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.docu-quote cite {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- Piliers --- */
.docu-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(100% - 40px, 1180px);
  margin: 44px auto 0;
}
.docu-pillar {
  padding: 28px 22px 24px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 20px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 16px 48px rgba(63, 42, 16, .07);
}
.docu-pillar-illu {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 18px;
  opacity: .72;
}
.docu-pillar h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.docu-pillar p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.8;
}

/* --- Timeline --- */
.docu-timeline {
  width: min(100% - 40px, 860px);
  margin: 56px auto 0;
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 16px 48px rgba(63, 42, 16, .07);
}
.docu-timeline-title {
  margin: 0 0 32px;
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-steps li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}
.timeline-steps li:last-child { border-bottom: none; }
.timeline-steps li img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: .7;
}
.timeline-steps li div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.timeline-steps strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.timeline-steps span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

/* ===== GALERIE ===== */
.galerie {
  position: relative;
  padding: 26px 0 96px;
}
.galerie-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 240px);
  gap: 28px;
  width: min(100% - 40px, 1000px);
  margin: 56px auto 0;
}
.gal-item {
  --rot: 0deg;
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  box-shadow: 0 14px 36px rgba(63, 42, 16, .14);
  opacity: 0;
  transform: rotate(var(--rot)) translateY(32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .35s ease;
}
.gal-item.in { opacity: 1; transform: rotate(var(--rot)) translateY(0); }
.gal-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s ease;
  filter: saturate(.92);
}
.gal-item:hover img {
  transform: scale(1.04);
  filter: saturate(1.08);
}
.gal-item img { cursor: zoom-in; }
.gal-item:hover {
  box-shadow: 0 18px 40px rgba(63, 42, 16, .18);
  z-index: 5;
}

/* --- Lightbox --- */
.lightbox {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(25, 18, 8, .82);
  backdrop-filter: blur(4px);
}
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.lightbox-close:hover { background: var(--gold-hi); }

/* --- Popup offre de bienvenue --- */
.promo {
  width: min(92vw, 460px);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--paper-soft);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: visible;
}
.promo::backdrop {
  background: rgba(25, 18, 8, .74);
  backdrop-filter: blur(4px);
}
.promo[open] {
  animation: promoIn .5s var(--ease) both;
}
@keyframes promoIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-inner {
  position: relative;
  padding: 46px 32px 30px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
}
.promo-inner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--gold-grad);
}
.promo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  transition: background .25s ease, transform .25s ease;
}
.promo-close:hover { background: var(--gold-hi); transform: rotate(90deg); }
.promo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #fff;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 14px 30px rgba(123, 86, 24, .35);
}
.promo-eyebrow { margin: 0 0 4px; font-size: 22px; }
.promo-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--ink);
}
.promo-sub {
  margin: 0 auto 22px;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.promo-form { display: flex; flex-direction: column; gap: 12px; }
.promo-form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}
.promo-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 139, 54, .18);
}
.promo-form .invite { width: 100%; }
.promo-form .form-status { margin: 2px 0 0; }
.promo-dismiss {
  margin-top: 14px;
  padding: 4px 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.promo-dismiss:hover { color: var(--ink); }
.promo-thanks-lead { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; }
.promo-code {
  display: inline-block;
  margin: 0 auto 16px;
  padding: 12px 26px;
  border: 2px dashed var(--gold);
  border-radius: 12px;
  background: rgba(240, 210, 138, .16);
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .16em;
}
.promo-thanks-note { margin: 0 auto 22px; max-width: 34ch; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.promo-thanks .invite { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .promo[open] { animation: none; }
  .promo-close:hover { transform: none; }
}
@media (max-width: 480px) {
  .promo-inner { padding: 42px 22px 26px; }
  .promo-title { font-size: 18px; }
}

.gal-1 { --rot: -1.6deg; grid-column: 1 / 8; grid-row: 1 / 2; }
.gal-2 { --rot: 1.4deg; grid-column: 8 / 13; grid-row: 1 / 3; }
.gal-3 { --rot: 1deg; grid-column: 1 / 5; grid-row: 2 / 3; }
.gal-4 { --rot: -2deg; grid-column: 5 / 8; grid-row: 2 / 3; }

/* --- Bandeau complémentaire --- */
.galerie-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 18px;
  width: min(100% - 40px, 1000px);
  margin: 18px auto 0;
}
.galerie-strip .gal-item { --rot: 0deg; }

/* --- Washi tape --- */
.gal-item.tape::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 76px;
  height: 26px;
  background: repeating-linear-gradient(45deg,
    rgba(184, 139, 54, .55) 0 8px,
    rgba(247, 240, 222, .65) 8px 16px);
  border: 1px solid rgba(255, 255, 255, .4);
  opacity: .9;
  transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 3px 6px rgba(63, 42, 16, .18);
  z-index: 3;
  pointer-events: none;
}

/* --- Punaise --- */
.gal-item.pin::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fc7ec, #2f6f9e 75%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset -2px -2px 3px rgba(0, 0, 0, .25);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}


/* --- Doodles décoratifs --- */
.doodle {
  position: absolute;
  color: var(--ink-soft);
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}
.doodle-cloud {
  top: -18px;
  right: 6%;
  width: 90px;
  height: auto;
  transform: rotate(4deg);
}
.doodle-heart {
  top: 50%;
  right: 1%;
  width: 38px;
  height: auto;
  color: var(--wine);
  opacity: .6;
  transform: rotate(-8deg);
}
.doodle-flower {
  bottom: -10px;
  left: 0;
  width: 80px;
  height: auto;
  color: var(--gold-deep);
  opacity: .55;
}
.doodle-star {
  width: 30px;
  height: auto;
  color: var(--gold);
  opacity: .6;
}
.doodle-rings {
  width: 64px;
  height: auto;
  color: var(--ink-soft);
  opacity: .45;
}
.doodle-crown {
  width: 56px;
  height: auto;
  color: var(--gold-deep);
  opacity: .55;
}

/* Doodles — placements par section */
.hero .doodle-star {
  top: 10%;
  left: 3%;
  transform: rotate(-10deg);
}
.hero .doodle-heart {
  top: auto;
  right: auto;
  bottom: 8%;
  left: 2%;
  transform: rotate(10deg);
}
.cinema .doodle-rings {
  top: -8px;
  right: 5%;
  transform: rotate(-6deg);
}
.choice .doodle-flower {
  top: -14px;
  bottom: auto;
  left: auto;
  right: 4%;
  width: 64px;
  transform: rotate(8deg);
}
.docu .doodle-cloud {
  top: 0;
  left: 2%;
  width: 70px;
}
.docu .doodle-star {
  top: auto;
  left: auto;
  bottom: 8%;
  right: 3%;
}
.contact .doodle-star {
  top: 8%;
  left: 6%;
  color: var(--gold);
  opacity: .5;
}
.galerie .doodle-crown {
  top: -6px;
  right: auto;
  left: 52%;
  transform: rotate(-4deg);
}

@media (max-width: 1040px) {
  .galerie-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 240px);
  }
  .gal-1 { grid-column: 1 / 2; grid-row: 1 / 2; }
  .gal-2 { grid-column: 2 / 3; grid-row: 1 / 2; }
  .gal-3 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .gal-4 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .galerie-strip { grid-auto-rows: 150px; }
}
@media (max-width: 760px) {
  /* Mosaique mobile : une grande photo, deux moyennes, une bandeau.
     Plus compact qu'une pile de photos pleine largeur. */
  .galerie-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 168px;
    gap: 12px;
    width: min(100% - 28px, 460px);
  }
  .gal-1, .gal-2, .gal-3, .gal-4 { --rot: 0deg; }
  .gal-1 { grid-column: 1 / -1; grid-row: span 2; }
  .gal-2 { grid-column: 1 / 2; grid-row: auto; }
  .gal-3 { grid-column: 2 / 3; grid-row: auto; }
  .gal-4 { grid-column: 1 / -1; grid-row: auto; }
  .galerie-collage .gal-item img { height: 100%; }
  .galerie-strip {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
    gap: 12px;
    width: min(100% - 40px, 460px);
  }
  .gal-item.tape::before, .gal-item.pin::after { display: none; }
  .doodle-cloud, .doodle-flower { width: 56px; }
  .doodle-heart { width: 26px; }
  .doodle-crown { width: 40px; }
}
@media (max-width: 480px) {
  .doodle { display: none; }
}

.contact {
  position: relative;
  overflow: hidden;
  padding: 96px 22px 110px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 12%, rgba(184, 139, 54, .12), transparent 32rem),
    radial-gradient(circle at 88% 88%, rgba(87, 43, 46, .07), transparent 28rem),
    linear-gradient(180deg, #fbf8f3, #f2ede3 60%, #efe7d9);
  color: var(--ink);
  text-align: center;
}
.contact .corner {
  position: absolute;
  width: clamp(200px, 34vw, 480px);
  height: auto;
  opacity: .22;
  pointer-events: none;
  filter: sepia(.3);
}
.contact .corner.bl { left: -2%; bottom: -8%; transform: rotate(8deg); }
.contact .corner.r { right: -2%; top: 8%; transform: rotate(-6deg); }
.contact h2 {
  margin: 0 0 24px;
  padding-top: .18em;
  font-family: var(--script);
  font-size: clamp(70px, 11vw, 142px);
  font-weight: 400;
  line-height: .86;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100% - 40px, 860px);
  margin: 26px auto 0;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 70px rgba(63, 42, 16, .08);
  backdrop-filter: blur(6px);
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.contact-form .field.full {
  grid-column: 1 / -1;
}
.contact-form label {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}
.contact-form select option {
  color: var(--ink);
}
.contact-form .invite {
  width: fit-content;
  margin-top: 4px;
}
.form-status {
  margin: 0;
  align-self: center;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: .06em;
}
/* Mention d'information affichee sous chaque formulaire. Le RGPD demande
   qu'elle soit visible au moment de la saisie, pas seulement en pied de page :
   d'ou ce bloc au contact du bouton d'envoi plutot qu'un lien perdu dans le
   pied. Discret, mais lisible : un texte grise a 9px ne vaudrait rien. */
.form-legal {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
  opacity: .85;
}
.contact-form .form-legal {
  grid-column: 1 / -1;
  max-width: 62ch;
}
.plaquette-form .form-legal,
.promo-form .form-legal {
  flex: 1 0 100%;
  margin-top: 6px;
}
.contact .tel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(45, 36, 24, .16);
  border-radius: 999px;
  color: var(--ink);
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.contact .zone {
  margin: 24px 0 0;
  color: var(--ink-soft);
}
.contact .sign {
  margin: 42px 0 0;
  padding-bottom: .22em;
  font-family: var(--script);
  /* Plancher abaisse de 42 a 34 px pour que la signature "Jour J Studio"
     tienne sur une seule ligne sur mobile. Une signature manuscrite coupee en
     deux perd tout son effet. */
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.2;
}
/* Lien vers la page Facebook. Meme graphie que .text-link, sans le trait
   anime : l'icone tient deja lieu de reperage visuel. */
.contact .social {
  margin: 30px 0 0;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-deep);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.social-link:hover,
.social-link:focus-visible { color: var(--wine); }
.social-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.contact .legal-link {
  margin: 22px 0 0;
}

/* Champ optionnel */
.opt-tag {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
}

/* Rangée de CTA + WhatsApp dans le Docu */
.docu-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}
.docu-cta-row .docu-cta { margin-top: 0; }
.docu-cta--wa {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.docu-cta--wa:hover {
  background: var(--ink);
  color: var(--paper-soft);
  box-shadow: none;
}

/* ===== TÉMOIGNAGES ===== */
.avis {
  position: relative;
  padding: 26px 0 96px;
}
.avis .doodle-heart {
  top: 4%;
  right: 5%;
  bottom: auto;
  left: auto;
}
.avis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(100% - 40px, 1180px);
  margin: 48px auto 0;
}
/* Le nombre d'avis n'est pas choisi : Google en renvoie de zero a cinq. A une
   ou deux fiches, trois colonnes laisseraient un grand vide a droite ; la
   grille se resserre alors au centre. Un navigateur sans :has garde trois
   colonnes, ce qui reste lisible. */
.avis-grid:has(.avis-card:only-child) {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}
.avis-grid:has(.avis-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
.avis-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 22px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 22px 70px rgba(63, 42, 16, .07);
}
.avis-stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: .18em;
}
/* Le texte de l'avis est complet dans la page, toujours : Google demande qu'un
   avis soit montre tel quel, et js/avis.js n'en coupe pas un caractere. Seul
   son affichage tient en huit lignes ; au-dela, le bouton "Voir plus" le
   deroule. Sans ce repli, un avis de trente lignes etire toute la rangee de
   fiches et laisse un vide sous celles d'a cote. */
.avis-card blockquote {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  font-style: italic;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.avis-card blockquote.avis-texte--deplie {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
/* Discret : ce bouton ouvre un texte, il n'appelle pas a l'action. Il reste
   masque tant que js/avis.js n'a pas mesure que l'avis deborde vraiment. */
.avis-plus {
  align-self: flex-start;
  margin: -6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-deep);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.avis-plus:hover,
.avis-plus:focus-visible { color: var(--gold); }
/* Le pied de fiche porte l'avatar de l'auteur a gauche, son nom et la date a
   droite. Google impose de crediter l'auteur avec son avatar, son nom et le
   lien vers son profil : cette ligne n'est pas decorative, elle est la
   condition d'affichage des avis. */
.avis-card figcaption {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.avis-qui {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* L'initiale de l'auteur sur un rond dore. Ce n'est pas un secours en
   l'absence de photo : la photo de profil Google n'est jamais affichee, elle
   viendrait d'un serveur tiers (voir js/avis.js). Toutes les cartes portent
   donc la meme pastille, ce qui tient mieux en ligne qu'un assortiment de
   vignettes de qualites diverses. */
.avis-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(184, 139, 54, .16);
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
}
.avis-card figcaption b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.avis-card figcaption span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.avis-card figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.avis-card figcaption a:hover,
.avis-card figcaption a:focus-visible { color: var(--gold-deep); }
/* Mention de provenance, exigee des que des donnees Places sont affichees
   hors d'une carte Google. Le nom "Google Maps" doit y figurer en toutes
   lettres et rester lisible : ne pas descendre sous 12 px. */
.avis-source {
  width: min(100% - 40px, 1180px);
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.avis-source a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== FAQ ===== */
.faq {
  position: relative;
  padding: 26px 0 96px;
}
.faq .doodle-star {
  top: 6%;
  left: 5%;
}
.faq-list {
  width: min(100% - 40px, 820px);
  margin: 44px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  position: relative;
  list-style: none;
  padding: 22px 42px 22px 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  letter-spacing: .03em;
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item p {
  margin: 0;
  padding: 0 42px 24px 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

/* ===== BANDE CAPTURE EMAIL ===== */
.plaquette-band {
  padding: 10px 0 96px;
}
.plaquette-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(100% - 40px, 1000px);
  margin: 0 auto;
  padding: 40px 44px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(184, 139, 54, .12), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(242, 236, 226, .8));
  box-shadow: 0 22px 64px rgba(63, 42, 16, .08);
}
.plaquette-copy { flex: 1 1 300px; }
.plaquette-copy .script {
  display: block;
  font-family: var(--script);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  padding-bottom: .1em;
}
.plaquette-sub {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
}
.plaquette-form {
  flex: 1 1 320px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.plaquette-form input[type="email"] {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.plaquette-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
}
.plaquette-form .invite { flex: 0 0 auto; }
.plaquette-form .form-status { flex: 1 0 100%; text-align: left; }

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 4px;
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 118px;
  }
  .hero .accroche { max-width: none; }
  .hero-visual {
    min-height: 520px;
    margin-top: -16px;
  }
  .hero-stats {
    position: static;
    margin-top: -20px;
  }
  .choice-grid,
  .cinema-grid,
  .docu-pillars,
  .docu-packs,
  .packs.three,
  .avis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* cartes plus larges en 2 colonnes : le titre peut grandir */
  .choice-card h3 { font-size: clamp(32px, 5.2vw, 58px); }
  .hero-visual {
    margin-top: 26px;
  }
  .hero-stats {
    margin-top: 12px;
  }
}

/* ---------- Passage au menu deroulant ----------
   Le bouton de menu n'apparaissait qu'a 760 px. Or les six liens de la
   navigation mesurent 646 px a eux seuls : ajoutes a la marque et aux
   marges de la barre, ils demandent environ 890 px. Entre 761 et 899 px,
   la barre depassait donc du cadre et TOUTES les pages defilaient de cote,
   sur toute leur hauteur, alors que le site est cense ne jamais defiler
   horizontalement. C'est la plage des tablettes en portrait.
   Le seuil est remonte a 940 px, avec la marge necessaire pour qu'un
   septieme lien ou un intitule plus long ne ramene pas le probleme.
   A VERIFIER si un lien est ajoute au menu : mesurer la largeur de
   .topbar nav et relever ce seuil en consequence. */
@media (max-width: 940px) {
  /* Le bouton de menu fait 40 px, la barre en devient plus haute que sur
     ordinateur : le retrait des ancres suit. */
  :root { --topbar-space: 100px; }
  .nav-toggle { display: flex; }
  .topbar nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 24px;
    /* opaque : le menu doit rester lisible meme sans backdrop-filter */
    background: #fff;
    box-shadow: 0 18px 50px rgba(63, 42, 16, .18);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    /* La barre etant fixe, le menu ouvert ne peut plus se prolonger dans la
       page : ce qui depasse du bas de l'ecran serait inatteignable. Il defile
       donc sur lui-meme. Le cas arrive en paysage sur telephone, ou la
       hauteur utile tombe sous 400 px pour six liens de 44 px. */
    max-height: calc(100dvh - var(--topbar-space) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .topbar nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .topbar nav a { text-align: center; padding: 12px; }
}

@media (max-width: 760px) {
  /* Barre remontee a 10 px du haut et marque reduite : elle regagne quelques
     pixels, le retrait des ancres aussi. */
  :root { --topbar-space: 92px; }
  .topbar {
    top: 10px;
    width: min(calc(100% - 20px), 520px);
  }
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
  /* "Jour J Studio" tient deux fois plus de largeur que l'ancien "Jour J", et
     la marque est en nowrap : sans cette reduction elle pousse le bouton de
     menu hors de la barre sur les petits ecrans. */
  .topbar .brand { font-size: 26px; }
  .hero {
    width: min(100% - 28px, 560px);
    padding: 104px 0 60px;
  }
  .hero .accroche {
    font-size: clamp(24px, 6.6vw, 34px);
  }
  .hero .sub { font-size: 15px; }
  .hero-actions { align-items: stretch; }
  .invite,
  .whatsapp,
  .text-link { width: 100%; }
  .text-link { text-align: center; padding: 12px 0; }
  .hero-actions .mail {
    width: auto;
    min-height: unset;
    padding: 6px 0;
    background: none;
    box-shadow: none;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .02em;
    text-decoration: underline;
    align-self: center;
  }
  .hero-visual { min-height: 440px; }
  .hero-sheet { width: min(78%, 330px); }
  .hero-stats { display: none; }
  .choice-grid,
  .cinema-grid,
  .docu-pillars,
  .docu-packs,
  .packs,
  .packs.three,
  .avis-grid {
    grid-template-columns: 1fr;
  }
  .avis-grid { width: min(100% - 28px, 560px); }
  .plaquette-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 30px 22px;
  }
  .plaquette-sub { max-width: none; }
  .plaquette-form { justify-content: center; }
  .plaquette-form input[type="email"],
  .plaquette-form .invite { flex: 1 0 100%; }
  .plaquette-form .form-status { text-align: center; }
  .docu-cta-row .docu-cta { width: 100%; }
  .docu-pack-illu {
    padding: 18px 16px;
  }
  .docu-pack-illu .docu-pack-name {
    font-size: clamp(19px, 5.8vw, 28px);
    white-space: nowrap;
  }
  .docu-pack-illu img,
  .docu-pack-card--cinema .docu-pack-illu img,
  .docu-pack-card--prestige .docu-pack-illu img {
    width: min(35%, 110px);
  }
  .docu-quote,
  .docu-timeline {
    padding: 28px 22px;
  }
  .docu-timeline-title { font-size: 13px; }
  .choice-card { min-height: 390px; }
  .choice-card h3 { font-size: clamp(40px, 11vw, 66px); }
  .choice-card .media { height: 170px; }
  .gamme-shell {
    width: min(100% - 28px, 560px);
  }
  .gamme-switch {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .page-head,
  .choice-grid,
  .docu-grid,
  .docu-stamp {
    width: min(100% - 28px, 560px);
  }
  .pack { padding: 24px; }
  .pack .price {
    flex-wrap: wrap;
  }
  .contact-actions { max-width: 420px; margin: 0 auto; }
  .contact-form {
    grid-template-columns: 1fr;
    width: min(100% - 28px, 560px);
    padding: 18px;
  }
  .form-status {
    justify-self: start;
  }

  /* ---- Densite mobile : moins de vide, moins de defilement ---- */
  .page-head { padding: 54px 0 4px; }
  .choice { padding: 10px 0 58px; }
  .gamme { padding: 14px 0 62px; }
  .docu { padding: 16px 0 62px; }
  .galerie { padding: 14px 0 54px; }
  .avis { padding: 14px 0 54px; }
  .faq { padding: 14px 0 54px; }
  .plaquette-band { padding: 6px 0 54px; }
  .contact { padding: 62px 18px 74px; }

  /* cartes a hauteur libre : plus de zone vide sous le prix */
  .choice-card { min-height: 0; }
  .choice-card .media { height: 150px; }
  .pack { min-height: 0; }

  /* descriptions un peu plus lisibles sur petit ecran */
  .pack li,
  .docu-pack-list li { font-size: 12px; }

  /* le nom du pack tient sur une ligne dans le bandeau */
  .docu-pack-illu img,
  .docu-pack-card--cinema .docu-pack-illu img,
  .docu-pack-card--prestige .docu-pack-illu img { width: min(28%, 88px); }

  .galerie-collage { gap: 16px; }
  .galerie-strip { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .choice-card,
  .gal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Pages légales ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 22px 110px;
}
.legal h1 {
  font-family: var(--script);
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 400;
  line-height: 1;
  margin: 0 0 36px;
}
.legal h2 {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 36px 0 12px;
}
/* Les sous-titres de la page legale : plus discrets que les h2 dores, ils
   decoupent la section Donnees personnelles en traitements distincts sans
   donner l'impression d'autant de chapitres. */
.legal h3 {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .04em;
  font-weight: 400;
  color: var(--ink);
  margin: 26px 0 8px;
}
.legal p,
.legal li {
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal a {
  color: var(--gold-deep);
  text-decoration: underline;
}
.legal .back {
  display: inline-block;
  margin-bottom: 28px;
}

/* ---------- Formulaire de desinscription ----------
   Pose dans le gabarit .legal, seule page du site a porter un formulaire
   hors de la bande plaquette et du bloc contact. Volontairement nu : le
   retrait du consentement doit etre aussi rapide que l'inscription, une
   mise en page qui appelle a reflechir serait un frein deguise. */
.desinscription-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
  margin: 26px 0 22px;
}
.desinscription-form label {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .04em;
}
.desinscription-form label + input,
.desinscription-form label + textarea {
  margin-bottom: 12px;
}
.desinscription-form input[type="email"],
.desinscription-form textarea {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.desinscription-form input[type="email"] { border-radius: 999px; }
.desinscription-form textarea { resize: vertical; }
.desinscription-form input[type="email"]:focus,
.desinscription-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.desinscription-form .invite {
  width: fit-content;
  margin-top: 6px;
}
.desinscription-form .form-status {
  align-self: flex-start;
  text-align: left;
  line-height: 1.6;
}
/* Le mot "facultatif" doit rester lisible : c'est lui qui autorise a sauter
   le champ, un gris trop pale le ferait manquer et transformerait un champ
   libre en obstacle. */
.facultatif {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* ================================================================
   REFONTE MULTIPAGE
   Ajouts pour la section "Qui sommes-nous" de l'accueil et pour les
   pages tarifs.html, a-propos.html et contact.html.
   Rien au-dessus de cette ligne n'a ete modifie.
   ================================================================ */

/* ---------- Marqueur des contenus a completer ----------
   Tout ce qui reste a fournir (photos, faits personnels) porte cette
   classe. Elle est volontairement voyante : la refonte ne doit pas
   partir en ligne avec un seul de ces marqueurs encore present.
   Pour verifier avant publication : grep -rn "a-completer" refonte/ */
.a-completer {
  padding: 1px 7px;
  border: 1px dashed var(--gold);
  border-radius: 6px;
  background: rgba(240, 210, 138, .18);
  color: var(--gold-deep);
  font-style: normal;
}

/* ---------- Qui sommes-nous ---------- */
.apropos {
  position: relative;
  padding-bottom: 40px;
}
.apropos .doodle-rings {
  right: 4%;
  top: 6%;
  width: 180px;
  color: var(--wine);
}
.apropos-grid {
  width: min(100% - 40px, 1180px);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.apropos-portrait {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.apropos-portrait h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
}
.apropos-role {
  margin: 4px 0 14px;
  color: var(--wine);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.apropos-portrait p:last-child {
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Cadre du portrait. Il garde exactement la place de la photo finale,
   pour que rien ne bouge le jour ou l'image est deposee. */
.portrait-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 4px;
  background: var(--paper-soft);
  box-shadow: 0 18px 46px rgba(63, 42, 16, .12);
  transform: rotate(-1.4deg);
}
.apropos-portrait:nth-child(2) .portrait-slot { transform: rotate(1.2deg); }
.portrait-slot::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
}
.portrait-slot::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 84px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(240, 226, 200, .82);
  box-shadow: 0 2px 8px rgba(63, 42, 16, .12);
}
.portrait-slot span {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.7;
  text-align: center;
}
.portrait-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.apropos-lead {
  width: min(100% - 40px, 1180px);
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.apropos-lead p {
  flex: 1 1 420px;
  margin: 0;
  max-width: 62ch;
  color: var(--ink-soft);
  line-height: 1.75;
}

/* ---------- Note sur les illustrations dessinees a la main ----------
   Le dessin pose a cote n'est pas decoratif : il montre ce dont la
   phrase parle. C'est pourquoi il porte un vrai texte alternatif, alors
   que toutes les autres .illu du site sont en alt vide.
   height:auto est indispensable, la balise portant width= et height=. */
.signature-illu {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 46px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
}
.signature-illu img {
  flex: 0 0 auto;
  width: 78px;
  height: auto;
  opacity: .8;
}
.signature-illu p {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-soft);
  line-height: 1.75;
}
@media (max-width: 560px) {
  .signature-illu {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ---------- Gabarit des pages secondaires ---------- */
.subpage {
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 132px 0 40px;
}
.subpage-narrow { max-width: 780px; }

.breadcrumb {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--gold);
}
.breadcrumb a { color: var(--gold-deep); }
.breadcrumb a:hover { color: var(--wine); }
.breadcrumb [aria-current] { color: var(--ink); }

.subpage h1 {
  margin: 0;
  padding: .1em 0 .24em .04em;
  font-family: var(--script);
  font-size: clamp(54px, 8vw, 104px);
  font-weight: 300;
  line-height: 1;
}
.subpage .lede {
  margin: 6px 0 0;
  max-width: 60ch;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
}
.subpage h2 {
  margin: 64px 0 10px;
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.15;
}
.subpage h3 { font-family: var(--display); font-weight: 400; }
.subpage > p {
  max-width: 68ch;
  color: var(--ink-soft);
  line-height: 1.75;
}
.subpage .section-sub {
  margin: 0 0 26px;
  max-width: 68ch;
  color: var(--muted);
}

/* ---------- Ecriture des noms Docu Portrait ----------
   "Love Moment" et "Love Story" reprennent l'ecriture du titre du hero
   ("VOTRE MARIAGE / VOTRE HISTOIRE"), c'est-a-dire Sekuya en graisse 500,
   et non l'Abril Fatface des noms de formules Quartz, Saphir, Denim.
   Ce sont des noms d'offre, pas des noms de gamme : la distinction est
   voulue.
   La deuxieme ligne du selecteur existe parce que .docu-pack-illu
   .docu-pack-name repose l'interlettrage a .06em ; il faut la meme
   specificite pour le reprendre. La troisieme vise les deux cartes de la
   page tarifs, ou .pack h3 l'emporterait autrement. */
.docu-pack-name,
.docu-pack-illu .docu-pack-name,
.pack h3.docu-nom {
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- Page tarifs : les 3 categories en entree ----------
   Ces cartes sont des liens vers les sections plus bas, pas un
   selecteur qui masquerait les deux autres. C'est voulu : la page
   existe justement pour que les 11 formules soient toutes lisibles
   dans le HTML servi, sans clic et sans JavaScript.
   Classe distincte de .choice-card de l'accueil, a laquelle main.js
   attache un gestionnaire clavier qui bloquerait la touche Entree
   sur un lien. */
.tarifs-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 38px 0 8px;
}
.tarifs-cat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(240, 238, 234, .62)),
    var(--paper-soft);
  box-shadow: 0 20px 64px rgba(63, 42, 16, .09);
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.tarifs-cat:hover,
.tarifs-cat:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(184, 139, 54, .45);
  box-shadow: 0 32px 80px rgba(63, 42, 16, .16);
}
.tarifs-cat .illu {
  position: absolute;
  right: -34px;
  bottom: -36px;
  /* Meme logique que .pack .illu-side : elargie pour compenser la hauteur
     perdue en revenant au ratio 1:1. */
  width: min(62%, 250px);
  height: auto;
  opacity: .18;
  transition: transform .35s var(--ease), opacity .35s ease;
}
.tarifs-cat:hover .illu,
.tarifs-cat:focus-visible .illu {
  transform: translateY(-6px) rotate(-3deg);
  opacity: .26;
}
.tarifs-cat h3 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.1;
}
.tarifs-cat .tag {
  position: relative;
  margin: 6px 0 0;
  color: var(--wine);
  font-size: 13px;
}
.tarifs-cat .count {
  position: relative;
  margin: 2px 0 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tarifs-cat .from {
  position: relative;
  margin: auto 0 0;
  color: var(--ink-soft);
  font-family: var(--option);
  font-size: 13px;
}
.tarifs-cat .from b {
  font-family: var(--sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tarifs-cat .go {
  position: relative;
  margin-top: 14px;
  color: var(--gold-deep);
  font-size: 12px;
  letter-spacing: .08em;
}
.tarifs-cat .go::after {
  content: ' ↓';
  font-family: var(--sans);
}
.compare-wrap + .tarifs-note,
.packs + .tarifs-note,
.faq-list + .tarifs-note,
.gamme-options + .tarifs-note,
.info-grid + .tarifs-note,
.docu-packs + .tarifs-note {
  margin-top: 34px;
}

.tarifs-hint {
  margin: 24px 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: 13px;
}
.tarifs-cats + .tarifs-hint { margin-top: 34px; }

/* ---------- Prix barre dans une carte de formule ----------
   Le montant barre etait ecrit a l'interieur de .amount, qui porte
   .gold-text. Or .gold-text pose -webkit-text-fill-color: transparent,
   une propriete qui s'herite : le "2 500€" heritait de la transparence
   et son color: var(--muted) ne servait a rien. Il est desormais frere
   de .amount, comme sur l'accueil, et reprend sa propre couleur.
   La taille est reposee ici parce que le .6em de la regle d'origine se
   calculait sur .price, soit environ 8 px, illisible. */
.pack .price .strike {
  margin-right: 0;
  font-size: 17px;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

/* Renvoi de la section Docu de l'accueil vers sa page dediee. */
.docu-more {
  width: min(100% - 40px, 1180px);
  margin: 34px auto 0;
  text-align: center;
  font-size: 14px;
}

/* ---------- Page tarifs ---------- */
.tarifs-univers { margin-top: 30px; }
/* Cible d'ancre : l'air au-dessus du titre vient desormais du
   scroll-padding-top pose sur html, qui reserve la hauteur de la barre fixe.
   Les 28 px qui figuraient ici s'y ajoutaient et repoussaient le titre trop
   bas dans l'ecran. */
.tarifs-univers .packs { margin-bottom: 18px; }
.tarifs-univers .gamme-options { margin-bottom: 8px; }

/* Les cartes de la page tarifs sont servies dans le HTML, sans le
   rendu JavaScript de l'accueil : l'animation d'entree en cascade
   n'a plus de declencheur, on la neutralise. */
.tarifs-univers .pack { animation: none; }

/* Ces notes commentent le bloc qui les precede sans lui appartenir. A
   14 px de marge, elles se collaient au bas du tableau comparatif ou des
   cartes de formules : le filet gris de gauche partait dans la continuite
   du cadre et la note se lisait comme une derniere ligne du tableau.
   24 px de base, 34 px derriere un bloc encadre, ou le bord du cadre
   demande plus de blanc qu'une simple fin de paragraphe. */
.tarifs-note {
  margin: 24px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  /* Sans ce plafond, ces paragraphes s'etalaient sur toute la largeur du
     gabarit, soit environ 140 signes par ligne a 13 px. L'oeil perd la
     ligne suivante en revenant a la marge. Toutes les autres zones de
     texte du site sont deja bridees entre 52 et 68 caracteres. */
  max-width: 72ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.info-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(240, 238, 234, .62)),
    var(--paper-soft);
  box-shadow: 0 16px 48px rgba(63, 42, 16, .08);
}
.info-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  letter-spacing: .03em;
}
.info-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- Dates deja prises ----------
   Bloc facultatif en bas de la page Tarifs, alimente par data/tarifs.json.
   Il n'existe dans le HTML que si des dates a venir sont renseignees et que
   l'affichage est demande : ces regles ne s'appliquent donc pas la plupart
   du temps.

   Le ton est volontairement neutre. Une liste de dates prises repond a la
   question que le couple se pose vraiment ("ma date est-elle encore libre")
   sans jouer sur la rarete : c'est une information verifiable, pas un
   argument de vente. */
.dispo-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.dispo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-soft);
}
.dispo .flare {
  font-family: var(--flare);
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
}
.dispo-date {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dispo-etat {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Une date vendue se distingue d'une date simplement indisponible : la
   premiere se lit comme une preuve d'activite, la seconde comme une absence. */
.dispo--reserve .dispo-etat { color: var(--gold-deep); }
.dispo-note {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- Bandeau d'appel en fin de page ---------- */
.cta-band {
  width: min(100% - 40px, 1120px);
  margin: 72px auto 0;
  padding: 44px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .56);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(240, 238, 234, .6)),
    var(--paper-soft);
  box-shadow: var(--shadow);
  text-align: center;
}
.cta-band .script {
  display: block;
  margin: 0;
  font-family: var(--script);
  font-size: clamp(40px, 6vw, 70px);
  font-weight: 300;
  line-height: 1;
  padding-bottom: .16em;
}
.cta-band p {
  margin: 6px auto 22px;
  max-width: 52ch;
  color: var(--ink-soft);
}
.cta-band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---------- Pied de page commun aux pages secondaires ---------- */
.site-footer {
  margin-top: 90px;
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .38);
}
.site-footer-inner {
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.site-footer h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li { margin-bottom: 8px; }
.site-footer a {
  color: var(--ink-soft);
  font-size: 13px;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--wine); }
.site-footer-base {
  width: min(100% - 40px, 1120px);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.site-footer-base .sign {
  font-family: var(--script);
  font-size: 30px;
  line-height: 1;
}

/* Rappel de navigation ajoute dans le pied de page de l'accueil, qui
   porte deja le formulaire de contact. */
.contact .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.contact .footer-nav a { color: var(--ink-soft); }
.contact .footer-nav a:hover,
.contact .footer-nav a:focus-visible { color: var(--wine); }

/* Ces blocs sont ecrits pour l'accueil, ou ils posent eux-memes leur
   largeur. Repris dans une page secondaire, ils sont deja dans le gabarit
   .subpage : on neutralise la largeur en double.
   .docu-pillars et .docu-timeline dormaient dans cette feuille sans etre
   utilisees par aucune page ; la page docu-portrait.html les reprend.
   .faq-list manquait a cette liste : sur docu-portrait.html elle gardait
   ses 820 px d'accueil et se recentrait dans le gabarit de 1120 px, soit
   150 px de retrait de chaque cote. La foire aux questions etait le seul
   bloc de la page a ne pas tomber sur la marge commune. */
.subpage .apropos-grid,
.subpage .apropos-lead,
.subpage .docu-pillars,
.subpage .docu-timeline,
.subpage .faq-list {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.subpage .apropos-grid { margin-top: 40px; }
.subpage .docu-pillars { margin-top: 26px; }
.subpage .docu-timeline { margin-top: 26px; }
.subpage .faq-list { margin-top: 26px; }

/* ---------- Tableau comparatif ----------
   Le tableau defile horizontalement dans son propre cadre sur petit
   ecran : c'est le corps de la page qui ne doit jamais defiler de cote. */
.compare-wrap {
  overflow-x: auto;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .74);
}
.compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}
.compare th,
.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: none; }
.compare thead th {
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare tbody th {
  width: 30%;
  color: var(--ink);
  font-weight: 500;
}
.compare td { color: var(--ink-soft); }
.compare .is-docu {
  background: rgba(240, 210, 138, .14);
  color: var(--ink);
}

/* ---------- Page contact ---------- */
.contact-page .contact-form {
  width: 100%;
  margin: 26px 0 0;
}
.contact-page .contact-actions { justify-content: flex-start; }

@media (max-width: 1040px) {
  .apropos-grid { grid-template-columns: 1fr; }
  .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .subpage { padding-top: 112px; }
  .tarifs-cats { grid-template-columns: 1fr; }
  .apropos-portrait {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .portrait-slot {
    max-width: 260px;
    transform: none;
  }
  .apropos-portrait:nth-child(2) .portrait-slot { transform: none; }
  .cta-band { padding: 32px 22px; }
  .site-footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Le mot le plus long du site sur un petit telephone ----------
   "sommes-nous" mesure 360 px a 62 px, pour une colonne de 332 px sur un
   ecran de 360 px. Rendu insecable, il debordait de la page ; coupe au
   trait d'union, il s'ecrivait "Qui sommes-" / "nous". Les autres intitules
   manuscrits tiennent sans rien changer, le plus large etant "Prestations"
   a 297 px : on ne rapetisse donc que les deux titres qui portent ce mot.
   Ce bloc est en fin de feuille a dessein : .subpage h1 est declare plus
   haut avec la meme specificite, et une requete de media n'ajoute aucun
   poids. Place avant, il serait sans effet. */
@media (max-width: 430px) {
  .apropos .page-head .script { font-size: 52px; }
  .subpage h1 { font-size: clamp(46px, 8vw, 104px); }
}