/* =========================================================
   Marco Ferri — réplique visuelle du site existant
   Valeurs relevées sur le DOM rendu de la version en ligne (voir README)
   ========================================================= */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/montserrat-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/montserrat-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/greatvibes-400.ttf') format('truetype');
}

/* Typo mariage : serif de caractère en italique (remplace la script Great
   Vibes, jugée trop naïve — round du 2026-08-27). Fichier variable, licence
   OFL, auto-hébergé. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italique.woff2') format('woff2');
}

:root {
  --bleu: rgb(29, 128, 195);
  --noir: #000;
  --gris-fonce: rgb(33, 33, 33);
  --blanc: #fff;

  /* Substituts des polices Wix — voir README, section « écarts » */
  --f-titre: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-corps: Avenir, 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-futura: Futura, 'Century Gothic', 'Avenir Next', sans-serif;
  --f-script: 'Cormorant Garamond', Georgia, serif;

  --largeur: 1440px;
  --contenu: 980px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--f-corps);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100%, var(--largeur)); margin: 0 auto; }
.contenu { width: min(100% - 48px, var(--contenu)); margin: 0 auto; }

/* ---------------- En-tête ---------------- */
/* En-tête : position sticky et transition all 0.2s ease-in, relevées sur l'original.
   Son top vaut 50px en ligne — c'est la hauteur de la bannière de la plateforme,
   retirée ici, d'où top: 0. */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--noir);
  transition: all .2s ease-in;
}
.entete.defile { box-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.entete-inner {
  width: min(100% - 32px, var(--largeur));
  margin: 0 auto;
  height: 103px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo img { width: 88px; height: 88px; object-fit: contain; } /* emblème 2026, carré */

.langue {
  margin-left: 8px;
  height: 32px;
  min-width: 108px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .5);
  font-family: var(--f-corps);
  font-size: 16px;
  cursor: pointer;
}
.langue svg { width: 12px; height: 12px; flex: none; }
/* Bascule de langue réelle (2026-08-28) : le bouton visuel devient un lien */
a.langue { text-decoration: none; color: inherit; justify-content: center; min-width: 92px; }
/* survol relevé : fond rgba(199,199,199,0.2), sans transition (0s) */
.langue:hover { background: rgba(199, 199, 199, .2); }

.nav-principale { margin-left: auto; display: flex; align-items: center; gap: 34px; }
/* liens de navigation : transition color 0.4s ease, relevée sur l'original */
.nav-principale a {
  font-size: 16px;
  color: var(--blanc);
  transition: color .25s ease;
}
.nav-principale a:hover { color: var(--bleu); }
.nav-principale a.actif { color: var(--bleu); }

.reseaux { display: flex; align-items: center; gap: 14px; margin-left: 30px; }
.reseaux a { width: 24px; height: 24px; display: grid; place-items: center; transition: opacity .25s ease; }
.reseaux a:hover { opacity: .65; }
.reseaux svg { width: 20px; height: 20px; fill: var(--blanc); }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.burger span { display: block; width: 26px; height: 2px; background: var(--blanc); margin: 6px 0; transition: transform .3s ease, opacity .3s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-mobile {
  display: none;
  position: fixed;
  inset: 103px 0 0 0;
  background: var(--noir);
  z-index: 99;
  padding: 32px 24px;
  transform: translateX(100%);
  transition: transform .32s ease;
}
.menu-mobile { visibility: hidden; transition: transform .32s ease, visibility .32s; }
.menu-mobile.ouvert { transform: translateX(0); visibility: visible; }
.menu-mobile a { display: block; font-size: 22px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* ---------------- Héros ---------------- */
.heros { position: relative; height: 812px; overflow: hidden; background: var(--noir); }
.heros video, .heros img.fond { width: 100%; height: 100%; object-fit: cover; }
.heros .logo-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; /* logo 2026 complet (emblème + nom), presque carré */
  max-width: 62vw;
  max-height: 70%;
  object-fit: contain;
  /* Logo 2026 : lettres fines blanches, illisibles sur les zones claires de la
     vidéo sans un voile sombre derrière (fond de l'img = sous les pixels transparents). */
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .35) 60%, transparent);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .75)) drop-shadow(0 0 2px rgba(0, 0, 0, .9));
  height: auto; /* sinon l'attribut height=483 fige la hauteur : logo étiré dès que la largeur rétrécit */
  pointer-events: none;
}
/* Bord bas du héros : séparateur Wix relevé dans le DOM original — un div de
   1440x48 collé au bas du héros portant un SVG en background-image
   (comp-msjfrd84-bottom, preserveAspectRatio='none', fill #000000). Ce n'est
   pas une droite mais une courbe, épaisse à gauche (48 px) et presque nulle à
   droite (~4 px sur 200 d'unités) ; la bande bleue en dessous commence à plat.
   Chemin repris tel quel. */
.heros::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%20100%201920%20200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23000000%27%20d%3D%27M1920%20300v-4.067c-455.162%200-690.876-51.203-1082.65-129.288C490.044%2097.423%200%20100.013%200%20100.013V300h1920z%27%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Média de la bande bleue : 739x607 à x=230, y=1063 sur l'original — il ne déborde
   pas du héros, il est entièrement dans la bande (qui commence à y=965). */
.media-chevauchant {
  position: absolute;
  left: 230px;
  top: 98px;
  width: 739px;
  height: 607px;
  z-index: 0;
  pointer-events: none;
}

/* ---------------- Bandes ---------------- */
.bande { position: relative; }
.bande-bleue { background: var(--bleu); }
.bande-sombre { background: var(--gris-fonce); }
/* Fondu nuit -> gris : la section démarre dans le noir de la séquence et
   glisse vers le gris sombre sur ~340 px (retour Jules : passage smooth). */
.fondu-nuit { background: linear-gradient(180deg, #0B0B0D 0%, var(--gris-fonce) 340px); }
.bande-noire { background: var(--noir); }
.bande-degrade-45 { background: linear-gradient(45deg, rgb(199, 199, 199) 0%, rgb(29, 128, 195) 100%); }
.bande-degrade-90 { background: linear-gradient(90deg, rgb(29, 128, 195) 0%, rgb(11, 11, 11) 100%); }

/* ---------------- Titres ---------------- */
h1, h2, h3, .titre,
.titre-175, .titre-144, .titre-96, .titre-68, .titre-48, .titre-36, .titre-24 {
  font-family: var(--f-titre);
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
}
.titre-96 { font-size: 96px; line-height: 1.05; }
.titre-144 { font-size: 144px; line-height: 1.02; }
.titre-175 { font-size: 175px; line-height: 1; }
.titre-68 { font-size: 68px; line-height: 1.05; }
.titre-48 { font-size: 48px; line-height: 1.15; }
.titre-36 { font-size: 36px; line-height: 1.2; }
.titre-24 { font-size: 24px; line-height: 1.3; }
.titre-script { font-family: var(--f-script); font-weight: 400; letter-spacing: 0; }
.titre-futura { font-family: var(--f-futura); font-weight: 300; }

p { margin: 0 0 16px; }
.texte { font-family: var(--f-corps); font-size: 16px; line-height: 1.62; }
.sur-titre { font-size: 18px; letter-spacing: .22em; text-transform: uppercase; font-family: var(--f-corps); }

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-corps);
  cursor: pointer;
  border: 0;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-bleu {
  background: var(--bleu);
  color: var(--noir);
  font-size: 18px;
  padding: 14px 28px;
  min-width: 164px;
}
.btn-bleu:hover { background: #fff; color: var(--noir); transform: translateY(-2px); }
/* Boutons CORPORATIFS / MARIAGES / PRIVÉS. L'original passait le fond au
   bleu au survol — invisible sur la bande bleue qui les porte (round 4,
   item 7) : écart assumé, le survol passe au blanc, cohérent avec les
   autres boutons du site. */
.btn-noir {
  background: var(--noir);
  color: var(--bleu);
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  padding: 12px 20px;
  gap: 10px;
  transition: all .2s ease;
}
.btn-noir:hover { background: #fff; color: var(--noir); transform: translateY(-2px); }
.btn-noir .fleche { font-size: 11px; }

/* États focus/survol discrets sur tout élément actionnable (round 4, item 7).
   Contour blanc : lisible sur toutes nos surfaces (noir, bleu, dégradés). */
.btn:focus-visible, .envoyer:focus-visible, .gal-fleche:focus-visible,
.vignette:focus-visible, .avis-point:focus-visible, .langue:focus-visible,
.burger:focus-visible, .nav-principale a:focus-visible, .pied a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------------- Formes organiques ---------------- */
.cercle-media {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  object-fit: cover;
}
.arche {
  border-radius: 50% 50% 6px 6px / 38% 38% 3px 3px;
  overflow: hidden;
  object-fit: cover;
}
/* Bloc « Événements privés » : empilement de disques, repris de la référence.
   Trois cercles pleins largeur superposés verticalement. */
.blob-quadrilobe {
  -webkit-mask-image:
    radial-gradient(circle at 50% 16%, #000 99.5%, transparent 100%),
    radial-gradient(circle at 50% 50%, #000 99.5%, transparent 100%),
    radial-gradient(circle at 50% 84%, #000 99.5%, transparent 100%);
  -webkit-mask-size: 100% 34%, 100% 34%, 100% 34%;
  -webkit-mask-position: 50% 0%, 50% 50%, 50% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle at 50% 16%, #000 99.5%, transparent 100%),
    radial-gradient(circle at 50% 50%, #000 99.5%, transparent 100%),
    radial-gradient(circle at 50% 84%, #000 99.5%, transparent 100%);
  mask-size: 100% 34%, 100% 34%, 100% 34%;
  mask-position: 50% 0%, 50% 50%, 50% 100%;
  mask-repeat: no-repeat;
}

/* ---------------- Cercles clients ---------------- */
.clients { display: grid; grid-template-columns: repeat(4, 220px); gap: 25px; justify-content: center; }
.client {
  width: 220px; height: 220px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform .3s ease;
}
.client:hover { transform: scale(1.05); }
/* L'original rend les <img> à 220x220, pleine cellule (le logo occupe ~62 % du
   disque dans le fichier rendu) : l'image remplit le cercle, le retrait est un
   padding interne, invisible à la mesure (border-box). */
.client img { width: 100%; height: 100%; object-fit: contain; padding: 19%; }

/* ---------------- Signature manuscrite ----------------
   Positions relevées sur l'original : logo MF à x=257 (213 px après la marge
   de contenu), mot manuscrit à x=443, 19 px plus haut que le logo. */
.signature { display: flex; align-items: flex-start; gap: 15px; padding: 60px 0 60px 213px; }
.signature .mf { width: 130px; margin-top: 8px; }
.signature .mot { width: 267px; }

/* ---------------- Pied de page ---------------- */
.pied {
  border-top: 0;
  padding: 26px 0 34px;
  font-family: var(--f-corps);
  font-size: 13px;
  font-weight: 700;
}
.pied-inner { display: flex; justify-content: center; gap: 96px; }
.pied a { text-decoration: underline; }

/* ---------------- Séquence signature : Mariages -> Corporatif ----------------
   (reference/prompt-sequence-signature.md) Une section, deux phases, un seul
   jeu d'éléments : les arches (Phase 1, rideau au scroll) se referment en
   cercles porteurs des logos partenaires (Phase 2, « Ils nous font
   confiance »). Timeline globale t (contain 0 -> 100 de la section) :
   - Phase 1 (0 -> 45 %) : extérieures 2.25 -> 24.75 %, centrale 8.1 -> 30.6 %
     (proportions du prototype A : départs 0.05/0.18, durée 0.50), parallaxe
     interne 50-70 px, centrale posée 180 px plus bas.
   - Phase 2 (45 -> 84.6 %) : e = quad in-out — nuit et vignettage, morph
     arche -> cercle (le bas remonte 595 -> 456 pendant que l'arc du bas se
     bombe ry 2 -> 228 : cercle parfait sans « pop », même structure de path
     pour l'interpolation), centrale réalignée (-180 px), recadrage du groupe
     (.seq-monde), photo -> blanc dès e=0.55, logos décalés de 0.06, bascule
     des titres ; puis 4 petits logos + CTA posé (85.7 -> 93.4 %).
   Pilotage par la classe sur <html> (script en tête d'index.html) :
   seq-css = animations CSS scroll-driven, seq-js = repli rAF (site.js),
   aucune classe (reduced-motion, sans JS) = version posée : scène mariage
   d'un écran puis bloc .seq-statique. Transforms/opacity/clip-path seulement.
   Exceptions de design assumées (le site ne les avait pas) : anneau #1D80C3,
   rail de progression, vignettage. */

.sequence {
  position: relative;
  --seq-echelle: 1;
  --seq-p2-e: 0.72;         /* plafond d'échelle finale, lu par site.js */
}
html.seq-css .sequence, html.seq-js .sequence { height: 300vh; }

.seq-colle {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: linear-gradient(45deg, rgb(199, 199, 199) 0%, rgb(29, 128, 195) 100%);
}
html.seq-css .seq-colle, html.seq-js .seq-colle { position: sticky; top: 0; }

/* Nuit et vignettage : sous les arches, comme le prototype B.
   La nuit porte le ciel étoilé (retour Jules : la scène des partenaires vit
   en continu) — ses enfants héritent de l'opacité pilotée par le scroll. */
.seq-nuit { position: absolute; inset: 0; background: #0B0B0D; opacity: 0; overflow: hidden; }
.seq-nuit::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 34%, rgba(29, 128, 195, 0.11), transparent 70%);
  animation: seq-nebuleuse 11s ease-in-out infinite alternate;
}
.seq-etoiles { position: absolute; inset: -80px; background-repeat: repeat; }
.seq-etoiles-a {
  background-image:
    radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1px 1px at 180px 92px, rgba(255, 255, 255, 0.65), transparent 55%),
    radial-gradient(1.4px 1.4px at 322px 204px, rgba(255, 255, 255, 0.8), transparent 55%),
    radial-gradient(1px 1px at 421px 58px, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1px 1px at 518px 282px, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 100px 250px, rgba(255, 255, 255, 0.6), transparent 55%);
  background-size: 560px 380px;
  animation: seq-etoiles-derive-a 46s ease-in-out infinite alternate,
             seq-etoiles-scintille 5.2s ease-in-out infinite alternate;
}
.seq-etoiles-b {
  background-image:
    radial-gradient(1px 1px at 68px 140px, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1.3px 1.3px at 240px 40px, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1px 1px at 380px 310px, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1px 1px at 500px 150px, rgba(255, 255, 255, 0.45), transparent 55%),
    radial-gradient(1.1px 1.1px at 150px 330px, rgba(255, 255, 255, 0.6), transparent 55%);
  background-size: 640px 470px;
  animation: seq-etoiles-derive-b 62s ease-in-out infinite alternate,
             seq-etoiles-scintille 7.4s ease-in-out -2.6s infinite alternate;
}
.seq-etoiles-c {
  background-image:
    radial-gradient(2px 2px at 90px 60px, rgba(140, 199, 238, 0.9), transparent 55%),
    radial-gradient(1.7px 1.7px at 310px 240px, rgba(140, 199, 238, 0.7), transparent 55%),
    radial-gradient(2px 2px at 520px 120px, rgba(255, 255, 255, 0.85), transparent 55%),
    radial-gradient(1.6px 1.6px at 200px 380px, rgba(140, 199, 238, 0.6), transparent 55%);
  background-size: 720px 520px;
  animation: seq-etoiles-derive-c 54s ease-in-out infinite alternate,
             seq-etoiles-scintille 6.1s ease-in-out -4.1s infinite alternate;
}
@keyframes seq-etoiles-derive-a { to { transform: translate3d(-46px, 24px, 0); } }
@keyframes seq-etoiles-derive-b { to { transform: translate3d(38px, -30px, 0); } }
@keyframes seq-etoiles-derive-c { to { transform: translate3d(-26px, -40px, 0); } }
@keyframes seq-etoiles-scintille { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes seq-nebuleuse {
  from { opacity: 0.65; transform: scale(1); }
  to { opacity: 1; transform: scale(1.12); }
}
.seq-vignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.72) 100%);
}

/* Le monde : porte le recadrage de la Phase 2 (translation + échelle) */
.seq-monde { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }

.seq-tetes { position: absolute; top: 127px; left: 0; right: 0; text-align: center; padding: 0 44px; }
/* Écrin de lisibilité : voile radial discret derrière les titres, toujours
   présent — invisible sur le dégradé, décisif quand les photos montent. */
.seq-tetes::before {
  content: ""; position: absolute; inset: -50px -10% -70px; z-index: -1;
  background: radial-gradient(ellipse 55% 75% at 50% 42%, rgba(15, 15, 17, 0.35), transparent 72%);
  pointer-events: none;
}
.seq-titre1, .seq-sous { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5); }
.seq-tetes .seq-titre2 { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6); }
/* Sous-titre au pied de l'arche centrale : posé bas-centre, l'arche monte
   derrière lui ; un voile radial discret garde la lisibilité sur la photo. */
.seq-sous {
  position: absolute; left: 0; right: 0; bottom: 64px; z-index: 1;
  margin: 0; text-align: center; padding: 0 44px;
}
.seq-sous::before {
  content: ""; position: absolute; left: -44px; right: -44px; top: -280px; bottom: -64px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 11, 13, 0.03) 30%,
              rgba(11, 11, 13, 0.12) 58%, rgba(11, 11, 13, 0.30) 82%, rgba(11, 11, 13, 0.42) 100%);
}
.seq-cta { margin-top: 28px; }
.seq-titre2 {
  margin: 0;
  font-family: var(--f-titre); font-weight: 700; font-size: 24px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanc);
}
/* Filet lumineux qui respire sous le titre des partenaires */
.seq-titre2::after {
  content: ""; display: block; width: 64px; height: 2px; margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #1D80C3, transparent);
  animation: seq-filet-souffle 4s ease-in-out infinite;
}
@keyframes seq-filet-souffle {
  0%, 100% { transform: scaleX(0.55); opacity: 0.55; }
  50% { transform: scaleX(1); opacity: 1; }
}
.seq-tetes .seq-titre2 { position: absolute; top: 78px; left: 0; right: 0; opacity: 0; visibility: hidden; }

/* Rangée de 1416 px (3 x 456 + 2 x 24) ancrée au bas du viewport ;
   l'échelle responsive s'applique au groupe entier, origine bas-centre. */
.seq-arches {
  position: absolute; bottom: 0; left: 50%;
  width: 1416px; height: 0;
  transform: translateX(-50%) scale(var(--seq-echelle, 1));
  transform-origin: 50% 100%;
}
.seq-arche {
  position: absolute; width: 456px; height: 595px;
  overflow: hidden;
  -webkit-clip-path: path('M0 595 L0 228 A228 228 0 0 1 456 228 L456 595 A228 2 0 0 1 0 595 Z');
  clip-path: path('M0 595 L0 228 A228 228 0 0 1 456 228 L456 595 A228 2 0 0 1 0 595 Z');
  will-change: transform;
}
/* Bases 10 px sous le bord bas (jamais visibles pendant la montée) ;
   centrale 180 px plus bas — réalignée en Phase 2. */
.seq-arche-g { left: 0; bottom: -10px; }
.seq-arche-c { left: 480px; bottom: -190px; }
.seq-arche-d { left: 960px; bottom: -10px; }
.seq-arche > img:first-child {
  position: absolute; left: 0; top: -80px;
  width: 100%; height: calc(100% + 80px);
  object-fit: cover;
  will-change: transform;
}
/* masp3030 : le couple est dans le tiers gauche de la photo (x ~25 %) —
   le cover centré le coupait au bord de l'arche (retour Jules, round accueil). */
.seq-arche-g > img:first-child { object-position: 4% 50%; }
/* Le même élément porte la photo puis le logo */
.seq-blanc { position: absolute; inset: 0; background: #fff; opacity: 0; }
.seq-logo {
  position: absolute; left: 50%; top: 228px; width: 250px; height: 250px;
  transform: translate(-50%, -50%); object-fit: contain; opacity: 0;
}
.seq-anneau {
  position: absolute; left: 1px; top: 1px; width: 452px; height: 452px;
  border-radius: 50%; border: 1px solid #1D80C3; opacity: 0;
}

/* Orbites des partenaires (retour Jules : scène vivante en continu) —
   posées AVANT les arches dans le DOM, donc peintes derrière les cercles.
   Géométrie : cercles finaux de rayon 228 centrés à x 228/708/1188, centre
   à 357 px au-dessus du bas de .seq-arches (base -10, haut 585, centre à
   228 du haut) ; orbite de rayon 260 -> bord bas à 97 px. */
.seq-orbite {
  position: absolute; width: 520px; height: 520px; bottom: 97px;
  opacity: 0; pointer-events: none;
}
.seq-orbite-g { left: -32px; }
.seq-orbite-c { left: 448px; }
.seq-orbite-d { left: 928px; }
.seq-orbite::before {
  content: ""; position: absolute; inset: -44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 128, 195, 0.22) 38%, transparent 66%);
  animation: seq-halo 6.5s ease-in-out infinite alternate;
}
.seq-orbite-anneau {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(29, 128, 195, 0.55);
  animation: seq-orbite-tour 26s linear infinite;
}
.seq-orbite-c .seq-orbite-anneau { animation-duration: 34s; animation-direction: reverse; }
.seq-orbite-d .seq-orbite-anneau { animation-duration: 30s; }
.seq-satellite {
  position: absolute; top: -4px; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #8CC7EE; box-shadow: 0 0 10px 2px rgba(29, 128, 195, 0.8);
}
@keyframes seq-orbite-tour { to { transform: rotate(360deg); } }
@keyframes seq-halo {
  from { opacity: 0.55; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.04); }
}

/* Fin de séquence : 4 petits logos + CTA posé (position calée par site.js :
   --seq-fin-haut = cercles-haut + diamètre à l'écran + 34) */
.seq-fin {
  position: absolute; left: 0; right: 0; top: var(--seq-fin-haut, 610px);
  text-align: center; opacity: 0; visibility: hidden;
}
.seq-fin .btn { margin-top: 40px; }
.seq-petits { display: flex; justify-content: center; gap: 25px; }
.seq-petit {
  width: 120px; height: 120px; background: #fff; border-radius: 50%;
  display: inline-flex; overflow: hidden;
  animation: seq-petit-flotte 5.2s ease-in-out infinite alternate;
}
/* Lunes flottantes : lignes de base décalées + périodes désynchronisées */
.seq-petit:nth-child(even) { margin-top: 16px; }
.seq-petit:nth-child(2) { animation-duration: 6.1s; animation-delay: -1.7s; }
.seq-petit:nth-child(3) { animation-duration: 5.6s; animation-delay: -3.2s; }
.seq-petit:nth-child(4) { animation-duration: 6.6s; animation-delay: -0.9s; }
@keyframes seq-petit-flotte { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.seq-petit img { width: 100%; height: 100%; object-fit: contain; padding: 19%; }

/* Rail de progression : 2 px à droite, suit t sur toute la séquence */
.seq-rail {
  position: absolute; right: 24px; top: 50%; width: 2px; height: 120px;
  transform: translateY(-50%); background: rgba(255, 255, 255, 0.14);
  opacity: 0;
}
html.seq-css .seq-rail, html.seq-js .seq-rail { opacity: 1; }
.seq-rail-remplissage {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: #1D80C3; transform: scaleY(0); transform-origin: 50% 0;
}

/* Version posée (aucune classe de pilotage) : les deux mondes empilés */
.seq-statique { background: #0B0B0D; padding: 96px 44px 120px; text-align: center; }
.seq-statique .seq-titre2 { position: static; opacity: 1; visibility: visible; }
.seq-statique-cercles { display: flex; justify-content: center; gap: 25px; margin: 64px 0 48px; }
.seq-statique .btn { margin-top: 56px; }
html.seq-css .seq-statique, html.seq-js .seq-statique { display: none; }

/* ----- Courbes — chorégraphie compacte (2026-08-27) : montée 2-30 % /
   10-38 %, fermeture 34-72 % (la centrale finit de monter pendant que la
   lumière tourne : mouvement continu, zéro temps mort), fin 78-88 %. ----- */
@keyframes seq-monte-ext {
  0%, 2% { transform: translateY(605px); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  30%, 100% { transform: translateY(0); }
}
@keyframes seq-monte-cen {
  0%, 10% { transform: translateY(605px); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  38% { transform: translateY(0); }
  38.01% { transform: translateY(0); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  72%, 100% { transform: translateY(-180px); }
}
@keyframes seq-par-ext {
  0% { transform: translateY(70px) scale(1.07); }
  2% { transform: translateY(70.6px) scale(1.07); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  30% { transform: translateY(9px) scale(1); }
  100% { transform: translateY(30px) scale(1); }
}
@keyframes seq-par-cen {
  0% { transform: translateY(70px) scale(1.07); }
  10% { transform: translateY(73px) scale(1.07); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  38% { transform: translateY(11.4px) scale(1); }
  100% { transform: translateY(30px) scale(1); }
}
@keyframes seq-nuit-op {
  0%, 34% { opacity: 0; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  72%, 100% { opacity: 1; }
}
@keyframes seq-vig-op {
  0%, 31% { opacity: 0; }
  38% { opacity: 0.36; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  72%, 100% { opacity: 0.7; }
}
@keyframes seq-fin-entree {
  0%, 78% { opacity: 0; visibility: hidden; transform: translateY(14px); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  88%, 100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes seq-rail-anim {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes seq-morphe {
  0%, 34% { clip-path: path('M0 595 L0 228 A228 228 0 0 1 456 228 L456 595 A228 2 0 0 1 0 595 Z'); -webkit-clip-path: path('M0 595 L0 228 A228 228 0 0 1 456 228 L456 595 A228 2 0 0 1 0 595 Z'); }
  38.75% { clip-path: path('M0 583.53 L0 228 A228 228 0 0 1 456 228 L456 583.53 A228 9.06 0 0 1 0 583.53 Z'); -webkit-clip-path: path('M0 583.53 L0 228 A228 228 0 0 1 456 228 L456 583.53 A228 9.06 0 0 1 0 583.53 Z'); }
  43.5% { clip-path: path('M0 549.12 L0 228 A228 228 0 0 1 456 228 L456 549.12 A228 30.25 0 0 1 0 549.12 Z'); -webkit-clip-path: path('M0 549.12 L0 228 A228 228 0 0 1 456 228 L456 549.12 A228 30.25 0 0 1 0 549.12 Z'); }
  48.25% { clip-path: path('M0 491.78 L0 228 A228 228 0 0 1 456 228 L456 491.78 A228 65.56 0 0 1 0 491.78 Z'); -webkit-clip-path: path('M0 491.78 L0 228 A228 228 0 0 1 456 228 L456 491.78 A228 65.56 0 0 1 0 491.78 Z'); }
  53% { clip-path: path('M0 411.5 L0 228 A228 228 0 0 1 456 228 L456 411.5 A228 115 0 0 1 0 411.5 Z'); -webkit-clip-path: path('M0 411.5 L0 228 A228 228 0 0 1 456 228 L456 411.5 A228 115 0 0 1 0 411.5 Z'); }
  57.75% { clip-path: path('M0 331.22 L0 228 A228 228 0 0 1 456 228 L456 331.22 A228 164.44 0 0 1 0 331.22 Z'); -webkit-clip-path: path('M0 331.22 L0 228 A228 228 0 0 1 456 228 L456 331.22 A228 164.44 0 0 1 0 331.22 Z'); }
  62.5% { clip-path: path('M0 273.88 L0 228 A228 228 0 0 1 456 228 L456 273.88 A228 199.75 0 0 1 0 273.88 Z'); -webkit-clip-path: path('M0 273.88 L0 228 A228 228 0 0 1 456 228 L456 273.88 A228 199.75 0 0 1 0 273.88 Z'); }
  67.25% { clip-path: path('M0 239.47 L0 228 A228 228 0 0 1 456 228 L456 239.47 A228 220.94 0 0 1 0 239.47 Z'); -webkit-clip-path: path('M0 239.47 L0 228 A228 228 0 0 1 456 228 L456 239.47 A228 220.94 0 0 1 0 239.47 Z'); }
  72%, 100% { clip-path: path('M0 228 L0 228 A228 228 0 0 1 456 228 L456 228 A228 228 0 0 1 0 228 Z'); -webkit-clip-path: path('M0 228 L0 228 A228 228 0 0 1 456 228 L456 228 A228 228 0 0 1 0 228 Z'); }
}
@keyframes seq-logo-g {
  0%, 55.44% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  58.34% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.97); }
  61.25%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes seq-anneau-g {
  0%, 55.44% { opacity: 0; transform: scale(1.08); }
  58.34% { opacity: 0.3; transform: scale(1.03); }
  61.25%, 100% { opacity: 0.55; transform: scale(1); }
}
@keyframes seq-logo-c {
  0%, 56.8% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  60.15% { opacity: 0.57; transform: translate(-50%, -50%) scale(0.97); }
  63.5%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes seq-anneau-c {
  0%, 56.8% { opacity: 0; transform: scale(1.08); }
  60.15% { opacity: 0.31; transform: scale(1.03); }
  63.5%, 100% { opacity: 0.55; transform: scale(1); }
}
@keyframes seq-logo-d {
  0%, 58.3% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  62.46% { opacity: 0.61; transform: translate(-50%, -50%) scale(0.97); }
  66.63%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes seq-anneau-d {
  0%, 58.3% { opacity: 0; transform: scale(1.08); }
  62.46% { opacity: 0.34; transform: scale(1.03); }
  66.63%, 100% { opacity: 0.55; transform: scale(1); }
}
@keyframes seq-blanc {
  0%, 53.98% { opacity: 0; }
  57.75% { opacity: 0.37; }
  62.5% { opacity: 0.72; }
  67.25% { opacity: 0.93; }
  72%, 100% { opacity: 1; }
}
@keyframes seq-titre1-sortie {
  0%, 34% { opacity: 1; transform: translateY(0); visibility: visible; }
  42% { opacity: 0.81; transform: translateY(-1.24px); visibility: visible; }
  48% { opacity: 0.43; transform: translateY(-3.8px); visibility: visible; }
  52.54% { opacity: 0; transform: translateY(-6.66px); visibility: visible; }
  72%, 100% { opacity: 0; transform: translateY(-14px) scale(0.98); visibility: hidden; }
}
@keyframes seq-sous-sortie {
  0%, 34% { opacity: 1; visibility: visible; }
  42% { opacity: 0.81; visibility: visible; }
  48% { opacity: 0.43; visibility: visible; }
  52.54%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes seq-orbite-ap {
  0%, 62% { opacity: 0; }
  70% { opacity: 0.55; }
  74%, 100% { opacity: 1; }
}
@keyframes seq-titre2-entree {
  0%, 54.66% { opacity: 0; visibility: hidden; transform: translateY(12px); }
  57.99% { opacity: 0.35; visibility: visible; transform: translateY(7.83px); }
  62.79% { opacity: 0.72; visibility: visible; transform: translateY(3.38px); }
  66.63% { opacity: 0.9; visibility: visible; transform: translateY(1.15px); }
  72%, 100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
/* ----- Branchement scroll-driven (html.seq-css) ----- */
html.seq-css .sequence { view-timeline: --seq block; }
html.seq-css .seq-arche-g,
html.seq-css .seq-arche-d {
  animation: seq-monte-ext auto both, seq-morphe auto both linear;
  animation-timeline: --seq, --seq;
  animation-range: contain 0% contain 100%;
}
html.seq-css .seq-arche-c {
  animation: seq-monte-cen auto both, seq-morphe auto both linear;
  animation-timeline: --seq, --seq;
  animation-range: contain 0% contain 100%;
}
html.seq-css .seq-arche-g > img:first-child,
html.seq-css .seq-arche-d > img:first-child { animation: seq-par-ext auto both; }
html.seq-css .seq-arche-c > img:first-child { animation: seq-par-cen auto both; }
html.seq-css .seq-nuit { animation: seq-nuit-op auto both linear; }
html.seq-css .seq-vignette { animation: seq-vig-op auto both linear; }
html.seq-css .seq-blanc { animation: seq-blanc auto both linear; }
html.seq-css .seq-arche-g .seq-logo { animation: seq-logo-g auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-arche-c .seq-logo { animation: seq-logo-c auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-arche-d .seq-logo { animation: seq-logo-d auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-arche-g .seq-anneau { animation: seq-anneau-g auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-arche-c .seq-anneau { animation: seq-anneau-c auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-arche-d .seq-anneau { animation: seq-anneau-d auto both linear; animation-timeline: --seq; animation-range: contain 0% contain 100%; }
html.seq-css .seq-titre1 { animation: seq-titre1-sortie auto both linear; }
html.seq-css .seq-sous { animation: seq-sous-sortie auto both linear; }
html.seq-css .seq-tetes .seq-titre2 { animation: seq-titre2-entree auto both linear; }
html.seq-css .seq-fin { animation: seq-fin-entree auto both; }
/* Piège connu : timeline et range dans la MÊME règle que l'animation */
html.seq-css .seq-orbite {
  animation: seq-orbite-ap auto both linear;
  animation-timeline: --seq;
  animation-range: contain 0% contain 100%;
}
html.seq-css .seq-rail-remplissage { animation: seq-rail-anim auto both linear; }
html.seq-css .seq-nuit, html.seq-css .seq-vignette, html.seq-css .seq-blanc,
html.seq-css .seq-logo, html.seq-css .seq-anneau,
html.seq-css .seq-titre1, html.seq-css .seq-sous,
html.seq-css .seq-tetes .seq-titre2, html.seq-css .seq-fin,
html.seq-css .seq-rail-remplissage {
  animation-timeline: --seq;
  animation-range: contain 0% contain 100%;
}

/* Repli JS : état de départ avant la première frame du driver */
html.seq-js .seq-arche { transform: translateY(605px); }

/* Échelle du groupe hors 1440 : paliers sans JS, affinés en continu par
   site.js (min(1, (100vw - marge) / 1416)) ; géométrie corpo par points. */
@media (max-width: 1463px) { .sequence { --seq-echelle: 0.8; } }
@media (max-width: 1180px) { .sequence { --seq-echelle: 0.62; } }
@media (max-width: 900px) {
  .sequence { --seq-echelle: 0.45; --seq-p2-e: 1; }
  .seq-tetes { top: 96px; }
  .seq-sous { bottom: 26px; }
  .seq-tetes .seq-titre2 { top: 44px; }
  .seq-titre2 { font-size: 15px; }
  .seq-petits { gap: 14px; }
  .seq-petit { width: 64px; height: 64px; }
  .seq-rail { right: 14px; }
  .seq-statique-cercles { gap: 16px; }
}
@media (max-width: 640px)  { .sequence { --seq-echelle: 0.258; } }

/* ---------------- Apparitions au défilement ----------------
   Round 4, item 13 : le fadeIn d'opacité seul (1,2 s, hérité de Wix) laisse
   place à une entrée fondu + translation courte, déclenchée au scroll par
   l'IntersectionObserver de site.js, échelonnée entre éléments d'une même
   fournée (--reveal-delai, pas de 90 ms). Courbe alignée sur la séquence
   signature. Sobre : 18 px de course, 0,7 s. */
@keyframes apparition {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.vu {
  animation: apparition 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation-delay: var(--reveal-delai, 0s);
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.vu { opacity: 1; transform: none; animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- Avis des clients (À propos) ----------------
   Carrousel réel : les trois avis de l'original, fondu croisé, points
   cliquables (44 px de zone tactile, pastille visible). Titre en blanc :
   le noir d'origine disparaissait dans la moitié sombre du dégradé. */
.avis-piste { display: grid; }
.avis-diapo {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), visibility 0s .5s;
}
.avis-diapo.actif { opacity: 1; visibility: visible; transition-delay: 0s; }
.avis-diapo blockquote { margin: 0; }
.avis-citation { margin: 78px auto 0; max-width: 640px; }
.avis-texte { max-width: 700px; margin: 34px auto 0; line-height: 1.72; }
.avis-auteur { margin: 30px 0 0; }
.avis-points { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.avis-point {
  width: 44px; height: 44px;
  border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.avis-point::before {
  content: "";
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid #fff; background: transparent;
  transition: background .25s ease, transform .25s ease;
}
.avis-point[aria-current="true"]::before { background: #fff; transform: scale(1.15); }
.avis-point:hover::before { background: rgba(255, 255, 255, 0.55); }

/* ---------------- Formulaire ---------------- */
.champ { margin-bottom: 26px; }
.champ label { display: block; font-size: 16px; margin-bottom: 8px; font-family: var(--f-corps); }
/* champs : transition background-color, border-color, color, border-width
   0.2s ease-in-out — relevée sur le formulaire d'origine */
.champ input, .champ textarea, .champ select {
  width: 100%;
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 0;
  padding: 11px 12px;
  font-family: var(--f-corps);
  font-size: 16px;
  outline: none;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out,
              color .2s ease-in-out, border-width .2s ease-in-out;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--bleu); }
.champ textarea { min-height: 74px; resize: vertical; }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.champ select option { background: var(--gris-fonce); color: #fff; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
/* Le bouton du formulaire est un .btn.btn-bleu comme partout ;
   il ne garde que sa largeur pleine (round 4, item 8). */
.envoyer { width: 100%; }

/* ---------------- Services ----------------
   Géométrie relevée sur l'original (reference/layout-map.json, services) :
   vidéo héros 649x900 à x=114 / y=38 (elle passe sous l'en-tête de 103 px,
   d'où top:-65px), colonne « La différence » à x=832, image Animation collée
   au bord droit de la colonne 980 (x=834), image Ambiance à x=230, texte à
   x=636, signature mordant sur le bas de l'image (y=3562 pour 3601). */
.heros-services { position: relative; }
.heros-serv-video {
  position: absolute;
  left: 114px;
  top: -65px;
  width: 649px;
  height: 900px;
  object-fit: cover;
}
.heros-services > .contenu, .heros-services > .wrap { position: relative; }
.serv-difference { width: 490px; margin: 507px 0 0 602px; }
.serv-dj-bloc { margin-top: 244px; }
.serv-animation { display: grid; grid-template-columns: 1fr 376px; align-items: start; margin-top: 214px; }
.serv-anim-texte { padding-top: 45px; }
.serv-ambiance { display: grid; grid-template-columns: 376px 1fr; column-gap: 30px; align-items: start; margin-top: 2px; }
.serv-amb-texte { padding-top: 71px; }
.serv-signature { margin-top: -39px; padding: 0 44px 90px; }
/* Le CTA occupe l'espace du padding bas d'origine (90 + 70 + 48 + 275 = 483) :
   hauteur de page inchangée. */
.serv-cta { padding: 70px 44px 275px; text-align: center; }

/* ---------------- Galerie à-propos ----------------
   Ruban horizontal de 17 diapositives 980x513 côte à côte (relevé sur
   l'original : x de 230 à 15910, y constant). La fenêtre masque le
   débordement ; la flèche translate le ruban d'une diapositive. En dessous,
   bande de vignettes 120x120 au pas de 130, la 8e coupée au bord droit —
   mesurée au pixel sur la capture de référence. Wix rend ces vignettes en
   background-image, d'où des boutons ici, pas des <img>. */
.galerie { position: relative; }
.gal-fenetre { overflow: hidden; position: relative; }
.gal-ruban { display: flex; transition: transform .45s ease; }
.gal-ruban img { flex: none; width: 100%; height: 513px; object-fit: cover; }
.gal-fleche {
  position: absolute; top: 50%; right: 26px; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s ease;
}
.gal-fleche:hover { background: rgba(0,0,0,.9); }
.vignettes { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.vignettes::-webkit-scrollbar { display: none; }
.vignette {
  flex: none;
  width: 120px; height: 120px;
  border: 0; padding: 0;
  background-size: cover; background-position: center;
  cursor: pointer;
  transition: opacity .25s ease;
}
.vignette:hover { opacity: .8; }

/* =========================================================
   Grilles de section — extraites des styles inline
   =========================================================
   Ces règles reproduisent à l'identique les valeurs qui étaient écrites en
   attribut `style=` dans le HTML pendant la phase « réplique desktop au
   pixel près ». Un style inline l'emporte sur toute règle de feuille de
   style : la media query mobile ne pouvait donc pas les surcharger, ce qui
   laissait la mise en page desktop s'appliquer telle quelle sur iPhone
   (débordement horizontal, vidéos écrasées). Valeurs desktop inchangées —
   seul le point d'accroche change. */

/* Bande bleue d'accroche : le grand retrait haut ménage la place du média
   qui chevauche le bas du héros. */
/* Bas resserré (132 -> 48) : le vide doit encadrer les raccourcis, pas
   les séparer de la suite (round 4, item 9). Le 403 haut reste : c'est la
   place du média chevauchant du héros. */
.bande-accroche { padding: 403px 0 48px; position: relative; overflow: hidden; }

/* Les trois raccourcis CORPORATIFS / MARIAGES / PRIVÉS */
.raccourcis { display: flex; gap: 20px; justify-content: center; margin-top: 52px; }

/* Sections texte + média côte à côte (Événements corporatifs, privés) */
.duo-media { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 0 44px; }


/* Médias masqués des sections duo */
.media-cercle { width: 575px; height: 575px; max-width: 100%; }
.media-quadrilobe { width: 455px; height: 708px; max-width: 100%; }

/* Coordonnées de la page Contact, sur trois colonnes */
/* Trois colonnes auto-dimensionnées : « Régions desservies » tient sur une
   ligne, les trois titres partagent la même ligne de base (round 4, item 18). */
.coordonnees { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 72px; margin: 96px auto 0; }
.coordonnees .titre-24 { white-space: nowrap; }

/* =========================================================
   Mobile — Wix sert une mise en page distincte, calée à 320 px
   ========================================================= */
@media (max-width: 900px) {
  .nav-principale, .reseaux, .langue { display: none; }
  .burger { display: block; }
  .menu-mobile { display: block; }
  .entete-inner { height: 76px; }
  .logo img { width: 62px; height: 62px; }

  .heros { height: 460px; }
  /* Logo remonté et réduit : le duo de CTA (2 lignes en étroit) ne doit
     jamais recouvrir les branches de l'étoile (passe mobile 2026-08-28) */
  .heros .logo-overlay { width: 52vw; max-width: 52vw; top: 38%; }

  .titre-175 { font-size: 74px; }
  .titre-144 { font-size: 52px; }
  .titre-96 { font-size: 44px; }
  .titre-68 { font-size: 36px; }
  .titre-48 { font-size: 30px; }
  .titre-36 { font-size: 24px; }
  .titre-24 { font-size: 20px; }

  .clients { grid-template-columns: repeat(2, 132px); gap: 16px; }
  .client { width: 132px; height: 132px; }

  .duo { grid-template-columns: 1fr; gap: 0; }
  .pied-inner { flex-direction: column; gap: 10px; align-items: center; text-align: center; }
  .gal-ruban img { height: auto; aspect-ratio: 980 / 513; }
  .signature { padding: 40px 0; }

  /* Services : la mise en page absolue du bureau redevient un empilement */
  .heros-serv-video { position: static; width: 100%; height: auto; }
  .serv-difference { width: auto; margin: 48px 0 0; }
  .serv-dj-bloc, .serv-animation, .serv-ambiance { margin-top: 60px; }
  .serv-animation, .serv-ambiance { display: block; }
  .serv-anim-texte, .serv-amb-texte { padding-top: 24px; }
  .serv-signature { margin-top: 0; padding-bottom: 60px; }
  .signature .mf { width: 92px; }
  .signature .mot { width: 186px; }

  /* ---- Grilles de section : tout passe sur une colonne ----
     Ces surcharges ne sont possibles que depuis l'extraction des styles
     inline en classes (voir la section « Grilles de section » ci-dessus). */

  /* Le retrait haut de 403 px ménageait la place du média chevauchant du
     bureau ; sur mobile ce média est replacé dans le flux, le retrait
     redevient normal. */
  .bande-accroche { padding: 72px 0 72px; }
  /* Média décoratif chevauchant : hors sujet sur mobile (positionné en
     absolu à x=230 pour le bureau), on le retire. */
  .media-chevauchant { display: none; }

  /* Les trois raccourcis passent à la ligne au lieu de déborder */
  .raccourcis { flex-wrap: wrap; gap: 12px; margin-top: 36px; }

  /* Texte + média : empilés */
  .duo-media { grid-template-columns: 1fr; gap: 28px; padding: 0 24px; }

  /* Médias masqués : largeur fluide, ratio conservé (sans quoi la hauteur
     figée les écrasait à 26–66 px de large) */
  .media-cercle { width: 100%; height: auto; aspect-ratio: 1; }
  .media-quadrilobe { width: 100%; height: auto; aspect-ratio: 455 / 708; }

  /* Coordonnées Contact : une colonne */
  .coordonnees { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }

  /* ---- Zones tactiles : cible de 44 px (Apple HIG) ---- */
  .burger { padding: 10px; }
  .btn-noir { min-height: 48px; }
  .gal-fleche { width: 44px; height: 44px; }
  .pied a { display: inline-block; padding: 13px 8px; }
}

/* ================= Formes relevées sur l'original =================
   Masques SVG extraits du DOM (reference/masques.json), reproduits à l'identique. */

.forme-blob {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2725%2035.5%20150%20129%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%2725%2035.5%20150%20129%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M60.737%2049.182c8.275-.674%2016.937%201.138%2026.609.273%2015.963-1.427%2031.182-7.908%2046.56-12.017%206.51-1.74%2013.434-2.768%2019.956-1.072%208.065%202.097%2012.642%208.203%2015.303%2015.732%207.508%2021.244%206.428%2037.716%204.132%2060.133-1.29%2012.597-5.185%2027.884-18.721%2032.255-10.643%203.437-22.453-.292-33.448%201.681-19.478%203.496-40.779%2023.034-61.08%2017.279-40.197-11.397-45.26-80.282-18.052-105.9%206.208-5.845%2012.36-7.844%2018.741-8.364z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2725%2035.5%20150%20129%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%2725%2035.5%20150%20129%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M60.737%2049.182c8.275-.674%2016.937%201.138%2026.609.273%2015.963-1.427%2031.182-7.908%2046.56-12.017%206.51-1.74%2013.434-2.768%2019.956-1.072%208.065%202.097%2012.642%208.203%2015.303%2015.732%207.508%2021.244%206.428%2037.716%204.132%2060.133-1.29%2012.597-5.185%2027.884-18.721%2032.255-10.643%203.437-22.453-.292-33.448%201.681-19.478%203.496-40.779%2023.034-61.08%2017.279-40.197-11.397-45.26-80.282-18.052-105.9%206.208-5.845%2012.36-7.844%2018.741-8.364z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  object-fit: cover;
}

.forme-cercle {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2710%2010%20180%20180%27%20viewBox%3D%2710%2010%20180%20180%27%20height%3D%27200%27%20width%3D%27200%27%20y%3D%270%27%20x%3D%270%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M190%20100c0%2049.706-40.294%2090-90%2090s-90-40.294-90-90%2040.294-90%2090-90%2090%2040.294%2090%2090z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2710%2010%20180%20180%27%20viewBox%3D%2710%2010%20180%20180%27%20height%3D%27200%27%20width%3D%27200%27%20y%3D%270%27%20x%3D%270%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M190%20100c0%2049.706-40.294%2090-90%2090s-90-40.294-90-90%2040.294-90%2090-90%2090%2040.294%2090%2090z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  object-fit: cover;
}

.forme-arche {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2742.5%2028.283%20115%20144%27%20viewBox%3D%2742.5%2028.283%20115%20144%27%20height%3D%27200%27%20width%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M100%2028.283c-31.756%200-57.5%2023.983-57.5%2053.568v90.432h115V81.851c0-29.585-25.744-53.568-57.5-53.568z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2742.5%2028.283%20115%20144%27%20viewBox%3D%2742.5%2028.283%20115%20144%27%20height%3D%27200%27%20width%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M100%2028.283c-31.756%200-57.5%2023.983-57.5%2053.568v90.432h115V81.851c0-29.585-25.744-53.568-57.5-53.568z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  object-fit: cover;
}

.forme-quadrilobe {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2733.3%2012%20135.1%20180%27%20viewBox%3D%2733.3%2012%20135.1%20180%27%20height%3D%27200%27%20width%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M123.4%2012.1v45c24.7%200%2045-20.3%2045-45h-45z%27%2F%3E%3Cpath%20d%3D%27M78.3%2057h.9l45.4.1%207-1.1.6-43.9h-7.7c-24.6%200-46.2%2020.2-46.2%2044.9z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%20147h45v-45c-24.7%200-45%2020.3-45%2045z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%2057h-45c0%2024.7%2020.3%2045%2045%2045V57z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M168.4%20102h-45c0%2024.7%2020.3%2045%2045%2045v-45z%27%2F%3E%3Cpath%20d%3D%27M33.3%20191.9h45v-45c-24.7%200-45%2020.3-45%2045z%27%2F%3E%3Cpath%20d%3D%27M123.4%2057.1V102h45c0-24.7-20.3-44.9-45-44.9z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M123.3%20147v45h45c.1-24.7-20.3-45-45-45z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%2057v45h45c0-24.7-20.3-45-45-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M33.3%20102v45c24.7%200%2045-20.3%2045-45h-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M123.3%20147h-45c0%2024.7%2020.3%2045%2045%2045v-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M33.3%2057h45V12c-24.7%200-45%2020.3-45%2045z%27%20opacity%3D%27.33%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%271.0%27%20encoding%3D%27UTF-8%27%3F%3E%3Csvg%20preserveAspectRatio%3D%27none%27%20data-bbox%3D%2733.3%2012%20135.1%20180%27%20viewBox%3D%2733.3%2012%20135.1%20180%27%20height%3D%27200%27%20width%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-type%3D%27shape%27%3E%3Cg%3E%3Cpath%20d%3D%27M123.4%2012.1v45c24.7%200%2045-20.3%2045-45h-45z%27%2F%3E%3Cpath%20d%3D%27M78.3%2057h.9l45.4.1%207-1.1.6-43.9h-7.7c-24.6%200-46.2%2020.2-46.2%2044.9z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%20147h45v-45c-24.7%200-45%2020.3-45%2045z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%2057h-45c0%2024.7%2020.3%2045%2045%2045V57z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M168.4%20102h-45c0%2024.7%2020.3%2045%2045%2045v-45z%27%2F%3E%3Cpath%20d%3D%27M33.3%20191.9h45v-45c-24.7%200-45%2020.3-45%2045z%27%2F%3E%3Cpath%20d%3D%27M123.4%2057.1V102h45c0-24.7-20.3-44.9-45-44.9z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M123.3%20147v45h45c.1-24.7-20.3-45-45-45z%27%20opacity%3D%27.66%27%2F%3E%3Cpath%20d%3D%27M78.3%2057v45h45c0-24.7-20.3-45-45-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M33.3%20102v45c24.7%200%2045-20.3%2045-45h-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M123.3%20147h-45c0%2024.7%2020.3%2045%2045%2045v-45z%27%20opacity%3D%27.33%27%2F%3E%3Cpath%20d%3D%27M33.3%2057h45V12c-24.7%200-45%2020.3-45%2045z%27%20opacity%3D%27.33%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  object-fit: cover;
}


/* =========================================================
   Pages segments — restructuration 6 pages (2026-08-25)
   Briques assemblées depuis l'existant ; seuls ajouts : la grille d'arches
   posées (l'ancienne trilogie statique d'avant la séquence), une rangée de
   statistiques factuelles, une grille de photos, et l'accent doré #C9A961
   strictement scopé à /mariages (règle du brief révision 01).
   ========================================================= */

/* Arche à cadre : recadrage zoomé quand le sujet est excentré dans la
   source (arche droite du héros /mariages : le baiser vit à ~31 %/40 %). */
.arche-cadre { overflow: hidden; }
.arche-cadre img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.28);
  transform-origin: 31% 40%;
}

/* Arches posées (héros /mariages) — géométrie de la trilogie d'origine */
.arches-page { display: grid; grid-template-columns: repeat(3, 456px); gap: 24px; justify-content: center; align-items: start; margin-top: 56px; }
.arches-page img, .arches-page .arche-cadre { width: 456px; height: 595px; object-fit: cover; }
/* masp3030 : le couple est dans le tiers gauche de la photo — le cover
   centré le coupait au bord (retour Jules, même correctif que l'accueil). */
.arches-page > img:first-child { object-position: 4% 50%; }
.arches-page .decalee { margin-top: 180px; }

/* Rangée de statistiques factuelles (Capacité, Depuis 1988) */
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 72px; justify-content: center; text-align: center; }
.stat { margin: 0; }
.stat-chiffre { font-family: var(--f-titre); font-weight: 900; font-size: 48px; line-height: 1; margin: 0; }
.stat-libelle { font-family: var(--f-corps); font-size: 15px; line-height: 1.5; margin: 12px 0 0; }

/* Grille de photos (preuve /mariages) */
.grille-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille-photos img { width: 100%; height: 340px; object-fit: cover; display: block; }

/* Accent doré : /mariages uniquement — jamais nav, footer ni corpo */
.page-mariages { --or: #C9A961; }
.page-mariages main .sur-titre { color: var(--or); }
.page-mariages main .avis-citation { color: var(--or); }

@media (max-width: 900px) {
  .arches-page { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .arches-page img, .arches-page .arche-cadre { width: 100%; height: auto; aspect-ratio: 456 / 595; }
  .arche-cadre img { height: 100%; aspect-ratio: auto; }
  .arches-page .decalee { margin-top: 0; }
  .stats { grid-template-columns: repeat(2, auto); gap: 36px 48px; }
  .stat-chiffre { font-size: 36px; }
  .grille-photos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grille-photos img { height: 180px; }
}

/* Liens texte de Contact : zone tactile de 44 px sans bouger la mise en page
   (padding compensé par des marges négatives). */
.lien-contact { display: inline-block; padding: 12px 6px; margin: -12px -6px; }


/* =========================================================
   Accueil — refonte sur l'arborescence BCBG (2026-08-26)
   Structure et rythme transposés de casino-bcbg ; palette, typos et
   composants CTA de Marco inchangés. Nouvelles briques : duo de CTA sur le
   héros, bande de statistiques, cartes (pourquoi / avis), section claire
   Territoire, CTA final sur photo, pied de page riche.
   ========================================================= */

/* Duo de CTA posé sur le héros (à la BCBG : primaire + contour) */
.heros-cta {
  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  padding: 0 24px;
}
.btn-contour {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: 18px;
  padding: 13px 27px;
  min-width: 164px;
}
.btn-contour:hover { background: #fff; color: var(--noir); border-color: #fff; transform: translateY(-2px); }

/* Bande de statistiques : gros chiffres, libellés en petites caps espacées */
.bande-stats { padding: 72px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bande-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 0; padding: 0 44px; }
.stat-bande { padding: 0 36px; }
.stat-bande + .stat-bande { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.stat-bande .chiffre {
  font-family: var(--f-titre); font-weight: 900; color: var(--bleu);
  font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.02em;
  margin: 0;
}
.stat-bande .libelle {
  margin: 14px 0 0; font-family: var(--f-corps);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); line-height: 1.8;
}

/* Cartes : pourquoi et avis */
.grille-cartes { display: grid; gap: 24px; margin-top: 56px; }
.grille-cartes-2 { grid-template-columns: repeat(2, 1fr); }
.grille-cartes-3 { grid-template-columns: repeat(3, 1fr); }
.carte {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 34px;
  display: flex; flex-direction: column;
}
.carte-icone { width: 56px; height: 56px; color: var(--bleu); }
.carte-icone svg { width: 100%; height: 100%; }
.carte-filet { width: 28px; height: 1px; background: var(--bleu); margin-top: 24px; }
.carte-titre {
  font-family: var(--f-titre); font-weight: 700; text-transform: uppercase;
  font-size: 19px; letter-spacing: 0.02em; line-height: 1.3; margin: 18px 0 0;
}
.carte-texte { font-family: var(--f-corps); font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.75); margin: 14px 0 0; }
.carte-guillemet { font-family: var(--f-titre); font-weight: 900; font-size: 44px; line-height: 1; color: var(--bleu); }
.carte-citation { font-family: var(--f-titre); font-weight: 700; font-size: 17px; line-height: 1.4; margin: 14px 0 0; }
.carte-auteur {
  margin-top: auto; padding-top: 20px;
  font-family: var(--f-corps); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.carte-avis .carte-texte { margin-top: 16px; }

@media (max-width: 900px) {
  .heros-cta { bottom: 24px; gap: 10px; }
  .bande-stats { padding: 56px 0; }
  .bande-stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 36px 0; padding: 0 24px; }
  .stat-bande { padding: 0 20px; }
  .stat-bande:nth-child(odd) { border-left: 0; }
  .stat-bande .chiffre { font-size: 40px; }
  .grille-cartes-2, .grille-cartes-3 { grid-template-columns: 1fr; }
  .carte { padding: 26px; }
}

/* Section claire (Territoire) : contraste de rythme, palette Marco.
   Accent texte assombri (#14618F) pour tenir le AA sur fond clair ;
   le bleu vif reste pour les éléments non textuels (points). */
.section-claire { background: #F4F2EE; color: #0F0F11; }
.section-claire .texte { color: rgba(15, 15, 17, 0.8); }
.claire-accent { color: #14618F; }
.grille-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin-top: 56px; }
.region {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(15, 15, 17, 0.12);
  font-family: var(--f-corps); font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(15, 15, 17, 0.9);
}
.region-point { width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); flex: none; }

@media (max-width: 900px) {
  .grille-regions { grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin-top: 40px; }
  .region { font-size: 13px; letter-spacing: 0.1em; }
}

/* CTA final pleine largeur sur photo */
.cta-photo { position: relative; isolation: isolate; overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.cta-photo-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.55);
}
.cta-photo-voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15, 15, 17, 0.92) 0%, rgba(15, 15, 17, 0.72) 45%, rgba(15, 15, 17, 0.35) 100%);
}
.cta-photo-contenu { padding: 96px 44px; }
.cta-photo .sur-titre { color: var(--bleu); }

/* Pied de page riche (toutes pages) */
.pied-riche { border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--f-corps); }
.pied-riche-inner {
  max-width: var(--contenu); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px;
  padding: 64px 44px 48px;
}
.pied-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pied-col a { font-size: 14px; color: rgba(255, 255, 255, 0.78); text-decoration: none; padding: 4px 0; transition: color .25s ease; }
.pied-col a:hover { color: #fff; }
.pied-titre {
  margin: 0 0 6px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pied-identite img { margin-bottom: 4px; }
.pied-identite .texte { margin: 0; font-weight: 700; }
.pied-note { font-weight: 400 !important; color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.pied-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
  padding: 22px 24px; font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.pied-legal a { color: inherit; text-decoration: underline; padding: 4px 2px; }
.pied-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .cta-photo-contenu { padding: 72px 24px; }
  .pied-riche-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 24px 40px; }
  .pied-col a { padding: 12px 0; min-width: 44px; }
  .pied-legal a { padding: 14px 8px; }
  .pied-legal { gap: 16px; flex-direction: column; align-items: center; text-align: center; }
}


/* =========================================================
   À propos — refonte cinématique (2026-08-26)
   Contenu inchangé (bio intégrale, 17 photos, 3 avis, signature) ; mise en
   scène : héros vidéo avec 1988 en filigrane parallaxe, bio en chapitres
   numérotés, galerie en double ruban défilant, marquee des 7 logos.
   Transforms/opacity seulement ; tout est neutralisé en reduced-motion.
   ========================================================= */

/* La parallaxe écrit --parallaxe (site.js) ; composable avec un transform
   propre à l'élément (ex. centrage du FR·EN·IT de /mariages). */
[data-parallaxe] { transform: translateY(var(--parallaxe, 0px)); }

/* --- Héros cinématique --- */
.apropos-heros {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: flex-end;
}
.apropos-heros-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.5);
  animation: apropos-derive 26s ease-in-out infinite alternate;
}
@keyframes apropos-derive { from { transform: scale(1); } to { transform: scale(1.08); } }
.apropos-heros-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 18% 25%, rgba(29, 128, 195, 0.28), transparent 65%),
    linear-gradient(180deg, rgba(15, 15, 17, 0.55) 0%, rgba(15, 15, 17, 0.25) 45%, rgba(15, 15, 17, 0.92) 100%);
}
.apropos-annee {
  position: absolute; right: -0.06em; top: 6%; z-index: -1; margin: 0;
  font-family: var(--f-titre); font-weight: 900; line-height: 0.8;
  font-size: clamp(180px, 30vw, 420px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  letter-spacing: -0.02em;
  user-select: none;
}
.apropos-heros-contenu { position: relative; max-width: var(--contenu); margin: 0 auto; width: 100%; padding: 0 44px 130px; }
.apropos-titre { margin: 18px 0 0; }
.apropos-titre span {
  display: block;
  font-family: var(--f-titre); font-weight: 900; text-transform: none;
  font-size: clamp(44px, 6.6vw, 96px); line-height: 1.02;
}
.apropos-indice { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); }
.apropos-indice span {
  display: block; width: 2px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--bleu));
  animation: apropos-indice 2.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  transform-origin: 50% 0;
}
@keyframes apropos-indice {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(26px); opacity: 0; }
}

/* --- Chapitres de la bio --- */
.apropos-chapitre { padding: 130px 0; overflow: hidden; }
.chapitre-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center; padding: 0 44px;
}
.chapitre-inverse .chapitre-media { order: 2; }
.chapitre-media { overflow: hidden; }
.chapitre-media img { width: 100%; height: 560px; object-fit: cover; display: block; scale: 1.14; }
.chapitre-media-verticale { justify-self: center; }
.chapitre-media-verticale video { width: 376px; max-width: 100%; height: 640px; object-fit: cover; display: block; }
.chapitre-numero {
  margin: 0 0 10px;
  font-family: var(--f-titre); font-weight: 900; line-height: 1;
  font-size: clamp(96px, 12vw, 160px);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(29, 128, 195, 0.55);
  letter-spacing: -0.02em;
}
.chapitre-numero-clair { -webkit-text-stroke: 1.5px rgba(20, 97, 143, 0.6); }
.chapitre-texte .texte { max-width: 420px; font-size: 17px; line-height: 1.75; }
.chapitre-texte-large { padding-bottom: 64px; }

/* --- Rubans défilants (photos et logos) --- */
.defile-rangee { display: flex; overflow: hidden; }
.defile-piste {
  display: flex; flex: none; align-items: center;
  gap: 18px; padding-right: 18px;
  animation: defiler 80s linear infinite;
}
.defile-inverse .defile-piste { animation-direction: reverse; }
@keyframes defiler { to { transform: translateX(-100%); } }
.apropos-galerie { padding: 110px 0; display: grid; gap: 18px; }
.defile-photos img { height: 300px; width: auto; display: block; }
.defile-logos { margin-top: 8px; }
.defile-logos .defile-piste { gap: 26px; padding-right: 26px; animation-duration: 46s; }
.defile-logo {
  flex: none; width: 148px; height: 148px;
  background: #fff; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
}
.defile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 20%; }

/* --- Avis : guillemet décoratif géant --- */
.apropos-avis { position: relative; overflow: hidden; }
.avis-deco {
  position: absolute; left: -18px; top: -70px;
  font-family: var(--f-titre); font-weight: 900; line-height: 1;
  font-size: 380px; color: rgba(255, 255, 255, 0.07);
  user-select: none; pointer-events: none;
}

/* --- Signature finale --- */
.apropos-fin { padding: 120px 0 130px; }
.signature-finale { display: flex; justify-content: center; align-items: flex-start; gap: 15px; }
.signature-finale .mf { width: 130px; margin-top: 8px; }
.signature-finale .mot { width: 267px; }

@media (max-width: 900px) {
  .apropos-heros-contenu { padding: 0 24px 96px; }
  .apropos-annee { font-size: 150px; top: 10%; }
  .apropos-chapitre { padding: 80px 0; }
  .chapitre-grille { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
  .chapitre-inverse .chapitre-media { order: 0; }
  .chapitre-media img { height: 320px; }
  .chapitre-media-verticale video { height: 480px; }
  .chapitre-texte .texte { font-size: 16px; }
  .apropos-galerie { padding: 72px 0; gap: 12px; }
  .defile-photos img { height: 180px; }
  .defile-logo { width: 104px; height: 104px; }
  .avis-deco { font-size: 220px; top: -40px; }
  .apropos-fin { padding: 80px 0 96px; }
  .signature-finale { flex-direction: column; align-items: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .apropos-heros-fond, .apropos-indice span { animation: none; }
  .apropos-indice { display: none; }
  .defile-piste { animation: none; }
  .defile-piste:nth-child(2) { display: none; }
  .defile-rangee { overflow-x: auto; }
  [data-parallaxe] { --parallaxe: 0px !important; }
}


/* =========================================================
   /mariages — « l'invitation » (2026-08-26)
   Seule page où l'accent doré #C9A961 est permis (brief révision 01) :
   noir + or + Great Vibes. Bouton or = variante scopée du composant CTA
   (mêmes géométrie et états). Textes strictement confirmés.
   ========================================================= */

.page-mariages .btn-or {
  background: var(--or);
  color: var(--noir);
  font-size: 18px;
  padding: 14px 28px;
  min-width: 164px;
}
.page-mariages .btn-or:hover { background: #fff; color: var(--noir); transform: translateY(-2px); }
.titre-script-or { color: var(--or); }
.titre-script { font-style: italic; font-weight: 600; letter-spacing: 0.01em; }
/* Or assombri pour le TEXTE sur fond clair (AA) ; l'or vif reste décoratif */
.page-mariages .section-claire .sur-titre { color: #7A5F1E; }

.filet-or {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.65), transparent);
}
.filet-or-court {
  display: block; width: 44px; height: 1px;
  margin: 26px auto 0;
  background: var(--or);
}

/* Héros : état photo — lueur dorée + arches en profondeur (la vidéo de
   fond du 2026-08-27 a été retirée sur retour de Jules ; le clip
   07-mariages reste dans les assets). */
.mariages-heros { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 110px; }
.mariages-heros .titre-script-or, .mariages-heros .texte { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.mariages-heros-lueur {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 55% 40% at 50% 12%, rgba(201, 169, 97, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 70%, rgba(29, 128, 195, 0.08), transparent 70%);
}
.arches-profondeur img { will-change: transform; }

/* La première danse : bande vidéo pleine largeur */
.mariages-danse {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 78vh;
  display: flex; align-items: center;
}
.mariages-danse-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.6);
}
.mariages-danse-voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(15, 15, 17, 0.9) 0%, rgba(15, 15, 17, 0.55) 50%, rgba(15, 15, 17, 0.2) 100%);
}
.mariages-danse-contenu { padding: 110px 44px; }

/* Multiculturel : art typographique sur crème */
.mariages-langues { position: relative; overflow: hidden; padding: 130px 0; }
.mariages-langues-fond {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(var(--parallaxe, 0px));
  margin: 0; line-height: 1; white-space: nowrap;
  font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(110px, 15vw, 230px); letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 169, 97, 0.4);
  user-select: none; pointer-events: none;
}

/* Mosaïque asymétrique */
.mariages-mosaique-bande { padding: 120px 0; }
.mariages-mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 210px;
  gap: 20px;
}
.mariages-mosaique img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(0.455, 0.03, 0.515, 0.955), filter .6s ease;
  filter: saturate(0.95);
}
.mariages-mosaique img:hover { transform: scale(1.035); filter: saturate(1.05); }
.mosaique-a { grid-column: 1 / 8; grid-row: 1 / 3; }
.mosaique-b { grid-column: 8 / 13; grid-row: 1 / 2; }
.mosaique-c { grid-column: 8 / 13; grid-row: 2 / 4; }
.mosaique-d { grid-column: 1 / 5; grid-row: 3 / 4; }
.mosaique-e { grid-column: 5 / 8; grid-row: 3 / 4; }
.mosaique-f { grid-column: 1 / 13; grid-row: 4 / 5; object-position: 50% 62%; }

/* La lettre d'Elisa */
.mariages-lettre { padding: 30px 0 130px; }
.mariages-lettre-citation {
  margin: 0;
  font-family: var(--f-script);
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.15;
  color: var(--or);
}

/* Finale conversion */
.mariages-final {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 86vh;
  display: flex; align-items: center;
}
.mariages-final-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: saturate(0.9) brightness(0.45);
}
.mariages-final-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(201, 169, 97, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(15, 15, 17, 0.85) 0%, rgba(15, 15, 17, 0.45) 45%, rgba(15, 15, 17, 0.9) 100%);
}
.mariages-final-contenu { text-align: center; padding: 120px 44px; margin: 0 auto; }
.mariages-final-script { margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: 1.1; }
.mariages-reassurance { margin-top: 22px; color: rgba(255, 255, 255, 0.85); }
.mariages-reassurance a { text-decoration: none; color: inherit; }
.mariages-reassurance a:hover { color: #fff; }

@media (max-width: 900px) {
  .mariages-heros { padding: 40px 0 80px; }
  .mariages-danse { min-height: 64vh; }
  .mariages-danse-contenu { padding: 80px 24px; }
  .mariages-langues { padding: 90px 0; }
  .mariages-mosaique-bande { padding: 80px 0; }
  .mariages-mosaique { grid-auto-rows: 130px; gap: 10px; }
  .mosaique-a { grid-column: 1 / 13; grid-row: 1 / 3; }
  .mosaique-b { grid-column: 1 / 7; grid-row: 3 / 4; }
  .mosaique-c { grid-column: 7 / 13; grid-row: 3 / 5; }
  .mosaique-d { grid-column: 1 / 7; grid-row: 4 / 5; }
  .mosaique-e { grid-column: 1 / 13; grid-row: 5 / 6; }
  .mosaique-f { grid-column: 1 / 13; grid-row: 6 / 7; }
  .mariages-lettre { padding: 10px 0 90px; }
  .mariages-final { min-height: 70vh; }
  .mariages-final-contenu { padding: 90px 24px; }
}


/* =========================================================
   /corporatif — « l'architecture » (2026-08-26)
   Caractère bleu acier : filets, colonnes, cellules, compteurs.
   Aucun or ici (réservé à /mariages). Textes confirmés uniquement.
   ========================================================= */

/* Héros plein écran */
.corpo-heros {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: center;
}
.corpo-heros-fond {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.5);
}
.corpo-heros-voile {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 50% 60% at 82% 30%, rgba(29, 128, 195, 0.22), transparent 65%),
    linear-gradient(90deg, rgba(15, 15, 17, 0.94) 0%, rgba(15, 15, 17, 0.7) 48%, rgba(15, 15, 17, 0.3) 100%);
}
/* Colonnes : fines lignes verticales, la trame architecturale */
.corpo-colonnes {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(29, 128, 195, 0.14) 0, rgba(29, 128, 195, 0.14) 1px, transparent 1px, transparent 240px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.corpo-heros-contenu { padding: 140px 44px; }
.corpo-titre { margin: 14px 0 0; }
.corpo-titre span {
  display: block;
  font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(48px, 7vw, 104px); line-height: 1.0;
}
.corpo-heros-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

/* Le mur de confiance : cellules à filets */
.corpo-mur { padding: 120px 0; }
.corpo-cellules {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.cellule {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: background .3s ease, border-color .3s ease;
}
.cellule:hover { background: rgba(29, 128, 195, 0.08); }
.cellule img {
  width: 58%; height: 58%; object-fit: contain;
  filter: grayscale(1) brightness(2.2);
  opacity: 0.8;
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.cellule:hover img { filter: none; opacity: 1; transform: scale(1.05); background: #fff; border-radius: 4px; padding: 6px; }
.cellule-texte span {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: 28px; line-height: 1.1; text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(29, 128, 195, 0.7);
  letter-spacing: 0.06em;
}

/* La salle de contrôle : trame + compteurs */
.corpo-controle { position: relative; overflow: hidden; padding: 120px 0; }
.corpo-grille-fond {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(29, 128, 195, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 128, 195, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
.corpo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
.corpo-stat { border-left: 2px solid var(--bleu); padding-left: 24px; }
.corpo-chiffre {
  margin: 0;
  font-family: var(--f-titre); font-weight: 900; color: var(--bleu);
  font-size: clamp(52px, 6vw, 88px); line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* « QC → MIA » : plus long qu'un chiffre — corps réduit pour tenir dans
   sa colonne (passe mobile 2026-08-28) */
.corpo-stat:last-child .corpo-chiffre { font-size: clamp(36px, 4.2vw, 64px); }

/* Le dossier client : carrousel encadré */
.corpo-avis-bande { padding: 120px 0; }
.corpo-avis-cadre {
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  padding: 26px 44px 42px;
}
.corpo-avis-cadre::before, .corpo-avis-cadre::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--bleu);
}
.corpo-avis-cadre::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.corpo-avis-cadre::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

/* Finale conversion */
.corpo-final {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 78vh;
  display: flex; align-items: center;
}
.corpo-final-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.5) brightness(0.45);
}
.corpo-final-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 50% at 30% 55%, rgba(29, 128, 195, 0.16), transparent 70%),
    linear-gradient(90deg, rgba(15, 15, 17, 0.92) 0%, rgba(15, 15, 17, 0.6) 55%, rgba(15, 15, 17, 0.3) 100%);
}
.corpo-final-contenu { padding: 110px 44px; }
.corpo-final .mariages-reassurance { text-align: left; }

@media (max-width: 900px) {
  .corpo-heros-contenu { padding: 110px 24px; }
  .corpo-colonnes { background-image: repeating-linear-gradient(90deg,
    rgba(29, 128, 195, 0.12) 0, rgba(29, 128, 195, 0.12) 1px, transparent 1px, transparent 120px); }
  .corpo-mur { padding: 80px 0; }
  .corpo-cellules { grid-template-columns: repeat(2, 1fr); }
  .corpo-controle { padding: 80px 0; }
  .corpo-stats { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .corpo-stat { padding-left: 16px; }
  .corpo-stat:last-child { grid-column: 1 / -1; }
  .corpo-avis-bande { padding: 80px 0; }
  .corpo-avis-cadre { padding: 16px 18px 30px; }
  .corpo-final-contenu { padding: 90px 24px; }
}


/* =========================================================
   /prives — « l'énergie » (2026-08-26)
   Néon bleu, mouvement, égaliseur. La section Événements privés d'origine
   reste INTACTE (garde-fou Jules) : seuls une classe et un calque de lueur
   décoratif s'y ajoutent. Textes confirmés uniquement.
   ========================================================= */

.filet-bleu {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29, 128, 195, 0.6), transparent);
}
.neon {
  color: #fff;
  text-shadow: 0 0 16px rgba(29, 128, 195, 0.85), 0 0 44px rgba(29, 128, 195, 0.45);
}

/* Héros : la section protégée, sur fond d'énergie */
.prives-heros { position: relative; overflow: hidden; }
.prives-lueur {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 55% at 22% 40%, rgba(29, 128, 195, 0.2), transparent 65%),
    radial-gradient(ellipse 35% 45% at 85% 75%, rgba(29, 128, 195, 0.12), transparent 70%);
}
.prives-heros .wrap { position: relative; }

/* Les blocs d'époque : manifeste + égaliseur */
.prives-epoques { padding: 120px 0 0; overflow: hidden; }
.prives-manifeste {
  margin: 26px 0 0; max-width: 780px;
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.egaliseur {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 130px; margin: 88px auto 0;
  max-width: var(--contenu); padding: 0 44px;
  border-bottom: 1px solid rgba(29, 128, 195, 0.25);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.egaliseur span {
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(29, 128, 195, 0.75), rgba(29, 128, 195, 0.12));
  transform-origin: 50% 100%;
  animation: eq-onde 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
@keyframes eq-onde { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.egaliseur span:nth-child(10n+1) { height: 46%; animation-duration: 2.6s; }
.egaliseur span:nth-child(10n+2) { height: 88%; animation-duration: 3.4s; animation-delay: -1.1s; }
.egaliseur span:nth-child(10n+3) { height: 34%; animation-duration: 2.4s; animation-delay: -0.4s; }
.egaliseur span:nth-child(10n+4) { height: 66%; animation-duration: 3.1s; animation-delay: -1.8s; }
.egaliseur span:nth-child(10n+5) { height: 100%; animation-duration: 3.7s; animation-delay: -0.7s; }
.egaliseur span:nth-child(10n+6) { height: 52%; animation-duration: 2.8s; animation-delay: -2.2s; }
.egaliseur span:nth-child(10n+7) { height: 74%; animation-duration: 3.3s; animation-delay: -1.4s; }
.egaliseur span:nth-child(10n+8) { height: 40%; animation-duration: 2.5s; animation-delay: -0.2s; }
.egaliseur span:nth-child(10n+9) { height: 82%; animation-duration: 3.6s; animation-delay: -2.6s; }
.egaliseur span:nth-child(10n+10) { height: 60%; animation-duration: 2.9s; animation-delay: -1.0s; }

/* Le marquee néon du répertoire */
.prives-marquee { padding: 96px 0; overflow: hidden; }
.prives-mots { align-items: baseline; gap: 48px; padding-right: 48px; animation-duration: 46s; }
.prives-mots span {
  font-family: var(--f-titre); font-weight: 900; white-space: nowrap;
  font-size: clamp(56px, 7.5vw, 110px); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.mot-plein { color: #fff; text-shadow: 0 0 24px rgba(29, 128, 195, 0.55); }
.mot-contour { color: transparent; -webkit-text-stroke: 1.5px rgba(29, 128, 195, 0.8); }
.mot-point { color: var(--bleu); }

/* L'avis de Diego */
.prives-avis { padding: 110px 0 130px; }
.prives-citation {
  margin: 0;
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Finale conversion */
.prives-final {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 78vh;
  display: flex; align-items: center;
}
.prives-final-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.5);
}
.prives-final-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 55% at 70% 45%, rgba(29, 128, 195, 0.16), transparent 70%),
    linear-gradient(90deg, rgba(15, 15, 17, 0.92) 0%, rgba(15, 15, 17, 0.62) 55%, rgba(15, 15, 17, 0.3) 100%);
}
.prives-final-contenu { padding: 110px 44px; }

@media (max-width: 900px) {
  .prives-epoques { padding: 80px 0 0; }
  .egaliseur { height: 90px; margin-top: 56px; padding: 0 24px; }
  .egaliseur span:nth-child(2n) { display: none; }
  .prives-marquee { padding: 64px 0; }
  .prives-mots { gap: 28px; padding-right: 28px; }
  .prives-avis { padding: 80px 0 90px; }
  .prives-final-contenu { padding: 90px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .egaliseur span { animation: none; }
}


/* =========================================================
   /contact — page de conversion (2026-08-26)
   Modèle : multi-canal + attentes (téléphone en évidence, promesses de la
   page) x réassurance pendant la saisie (rail de confiance sticky), la
   friction des 9 champs traitée en deux étapes (pré-qualification
   événement puis coordonnées). Sans JS : les deux étapes sont visibles.
   ========================================================= */

.contact-heros {
  padding: 110px 0 72px;
  position: relative; isolation: isolate; overflow: hidden;
}
.contact-heros-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.45);
}
.contact-heros-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(15, 15, 17, 0.45), transparent 75%),
    linear-gradient(180deg, rgba(33, 33, 33, 0.75) 0%, rgba(33, 33, 33, 0.45) 55%, rgb(33, 33, 33) 100%);
}
.contact-promesses {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; justify-content: center; gap: 34px; flex-wrap: wrap;
  font-family: var(--f-corps); font-size: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.contact-promesses li { display: flex; align-items: center; gap: 10px; }
.promesse-point { width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }
.contact-tel { margin-top: 28px; }

.contact-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px; padding: 56px 44px 0; align-items: start;
}
.contact-formulaire { max-width: 620px; }

/* Badges d'étapes */
.contact-badges { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.contact-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-corps); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  transition: color .25s ease;
}
.contact-badge i {
  font-style: normal; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3); font-size: 13px;
  transition: all .25s ease;
}
.contact-badge.badge-actif { color: #fff; }
.contact-badge.badge-actif i { background: var(--bleu); border-color: var(--bleu); color: var(--noir); }
.contact-filet { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); max-width: 90px; }

.contact-etape { border: 0; margin: 0; padding: 0; }
.contact-legende { display: block; margin: 0 0 34px; padding: 0; }
.contact-formulaire .envoyer { margin-top: 8px; }
.contact-retour {
  display: block; margin: 18px auto 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-corps); font-size: 14px;
  color: rgba(255, 255, 255, 0.6); padding: 12px;
  transition: color .25s ease;
}
.contact-retour:hover { color: #fff; }

/* Étapes pilotées par JS : sans lui, tout est visible */
[data-etapes].etapes-actif .contact-etape { display: none; }
[data-etapes].etapes-actif .contact-etape.etape-courante { display: block; animation: apparition 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both; }
[data-etapes]:not(.etapes-actif) .contact-badges,
[data-etapes]:not(.etapes-actif) [data-continuer],
[data-etapes]:not(.etapes-actif) [data-retour] { display: none; }
[data-etapes]:not(.etapes-actif) .contact-etape + .contact-etape { margin-top: 56px; }

/* Rail de confiance */
.contact-rail { display: grid; gap: 20px; position: sticky; top: 127px; }
.rail-carte {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px;
}
.rail-tel {
  display: block; font-family: var(--f-titre); font-weight: 900;
  font-size: 26px; color: #fff; text-decoration: none; margin-bottom: 6px;
}
.rail-tel:hover { color: var(--bleu); }
.rail-courriel { display: block; font-size: 15px; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.rail-courriel:hover { color: #fff; }
.rail-regions { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; }
.rail-avis { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.rail-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rail-logos img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 16%;
}
.rail-carte-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rail-stat {
  margin: 0; font-family: var(--f-titre); font-weight: 900;
  font-size: 30px; color: var(--bleu); line-height: 1;
}

@media (max-width: 1100px) {
  .contact-grille { grid-template-columns: 1fr; gap: 48px; padding: 48px 24px 0; }
  .contact-rail { position: static; grid-template-columns: 1fr 1fr; }
  .rail-carte-stats { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .contact-heros { padding: 72px 0 0; }
  .contact-promesses { gap: 14px 24px; }
  .contact-rail { grid-template-columns: 1fr; }
}


/* =========================================================
   Accueil — passe artistique sur Pourquoi / Témoignages / Territoire
   (2026-08-27). Chaque carte a sa matière : photo, crème, onde, dégradé
   électrique. Palette système uniquement (l'or reste à /mariages).
   ========================================================= */

/* --- Bento multi-matières --- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; margin-top: 56px; }
.bento .carte {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 280px; justify-content: flex-end;
  transition: transform .45s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow .45s ease;
}
.bento .carte:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.bento-photo { grid-column: 1 / 8; }
.bento-creme { grid-column: 8 / 13; }
.bento-onde { grid-column: 1 / 6; }
.bento-electrique { grid-column: 6 / 13; }
.bento-fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.75); }
.bento-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 15, 17, 0.15) 0%, rgba(15, 15, 17, 0.85) 100%); }
.bento-creme { background: #F4F2EE; border-color: rgba(15, 15, 17, 0.08); }
.bento-creme .carte-titre { color: #0F0F11; }
.bento-creme .carte-texte { color: rgba(15, 15, 17, 0.75); }
.bento-electrique { background: linear-gradient(135deg, #1668A0 0%, #0A3D61 100%); }
.bento-filigrane {
  position: absolute; right: 6px; top: -14px; z-index: 0; margin: 0;
  font-family: var(--f-titre); font-weight: 900; line-height: 1;
  font-size: 120px; letter-spacing: -0.02em;
  /* Aplat teinté, sans contour tracé : les doubles lignes du text-stroke
     sur Montserrat 900 faisaient bizarre (retour Jules). */
  color: rgba(29, 128, 195, 0.14);
  user-select: none; pointer-events: none;
}
.bento-filigrane-blanc { font-size: 190px; top: -30px; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3); }
.bento-contenu { position: relative; z-index: 1; }
.bento-onde { padding-bottom: 70px; }
.onde-mini {
  position: absolute; left: 30px; right: 30px; bottom: 22px;
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 34px; border-bottom: 1px solid rgba(29, 128, 195, 0.3);
}
.onde-mini span {
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(29, 128, 195, 0.8), rgba(29, 128, 195, 0.15));
  transform-origin: 50% 100%;
  animation: eq-onde 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.onde-mini span:nth-child(5n+1) { height: 55%; animation-duration: 2.6s; }
.onde-mini span:nth-child(5n+2) { height: 95%; animation-duration: 3.3s; animation-delay: -1.2s; }
.onde-mini span:nth-child(5n+3) { height: 40%; animation-duration: 2.4s; animation-delay: -0.5s; }
.onde-mini span:nth-child(5n+4) { height: 75%; animation-duration: 3s; animation-delay: -1.9s; }
.onde-mini span:nth-child(5n+5) { height: 60%; animation-duration: 2.8s; animation-delay: -0.8s; }

/* --- Multiculturel : la célébration — rubans de drapeaux qui dansent ---
   (retours Jules 2026-08-28 : éclatant, artistique, « des pays qui
   dansent », liste ouverte). Rubans sur l'infra .defile-* du site ;
   la danse des cartes est un transform propre (la piste anime le sien). */
.musiques { position: relative; padding: 110px 0 120px; overflow: hidden; }
/* Lueurs d'ambiance : deux nappes de couleur qui respirent — le mix
   d'énergie. Teintes tirées des drapeaux, opacités basses. */
.musiques-lueur {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px);
}
.musiques-lueur-a {
  width: 720px; height: 520px; left: -180px; top: -120px;
  background: radial-gradient(circle, rgba(29, 128, 195, 0.30), rgba(43, 182, 115, 0.12) 55%, transparent 70%);
  animation: lueur-derive-a 13s ease-in-out infinite alternate;
}
.musiques-lueur-b {
  width: 760px; height: 560px; right: -220px; bottom: -160px;
  background: radial-gradient(circle, rgba(242, 169, 59, 0.20), rgba(226, 85, 85, 0.12) 55%, transparent 70%);
  animation: lueur-derive-b 17s ease-in-out infinite alternate;
}
@keyframes lueur-derive-a {
  from { transform: translate(0, 0) scale(1); opacity: 0.75; }
  to { transform: translate(90px, 60px) scale(1.15); opacity: 1; }
}
@keyframes lueur-derive-b {
  from { transform: translate(0, 0) scale(1.1); opacity: 0.7; }
  to { transform: translate(-80px, -50px) scale(1); opacity: 1; }
}
/* Faisceaux de projecteurs : cônes de lumière colorés qui balaient la
   scène depuis le haut, comme un show — mode screen, opacités basses. */
.musiques-faisceaux { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.faisceau {
  position: absolute; top: -60px; width: 190px; height: 130%;
  transform-origin: 50% 0;
  filter: blur(14px); mix-blend-mode: screen;
  animation: faisceau-balaie 9s ease-in-out infinite alternate;
}
.faisceau-1 { left: 6%; background: linear-gradient(180deg, rgba(29, 128, 195, 0.42), transparent 78%); animation-duration: 8.5s; }
.faisceau-2 { left: 26%; background: linear-gradient(180deg, rgba(43, 182, 115, 0.34), transparent 78%); animation-duration: 11s; animation-delay: -4s; }
.faisceau-3 { left: 48%; background: linear-gradient(180deg, rgba(242, 169, 59, 0.30), transparent 78%); animation-duration: 9.5s; animation-delay: -7s; }
.faisceau-4 { left: 68%; background: linear-gradient(180deg, rgba(226, 85, 85, 0.30), transparent 78%); animation-duration: 12s; animation-delay: -2.5s; }
.faisceau-5 { left: 86%; background: linear-gradient(180deg, rgba(142, 90, 200, 0.34), transparent 78%); animation-duration: 10s; animation-delay: -5.5s; }
@keyframes faisceau-balaie {
  from { transform: rotate(-14deg) scaleX(0.8); opacity: 0.65; }
  to { transform: rotate(14deg) scaleX(1.15); opacity: 1; }
}

/* Le mot géant qui change de langue : pile de spans superposés, un seul
   .actif à la fois (site.js) — chaque langue a son dégradé. */
.musiques-mot { position: relative; height: 170px; margin-top: 34px; }
.mot-langue {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%) scale(0.92);
  opacity: 0; visibility: hidden;
  /* Sortie rapide, entrée retardée : jamais deux mots pleins en même temps */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mot-langue.actif {
  opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
  transition: opacity 0.5s ease 0.22s, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.22s, visibility 0.5s 0.22s;
}
.mot-langue b {
  display: block; font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(64px, 9vw, 132px); line-height: 1.05; letter-spacing: -0.01em;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.mot-langue i {
  display: block; margin-top: 6px; font-style: normal;
  font-family: var(--f-corps); font-size: 12px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.mot-langue:nth-child(1) b { background-image: linear-gradient(100deg, #1D80C3, #6FB7E8); }
.mot-langue:nth-child(2) b { background-image: linear-gradient(100deg, #E25555, #F2A93B); }
.mot-langue:nth-child(3) b { background-image: linear-gradient(100deg, #2BB673, #B8E04A); }
.mot-langue:nth-child(4) b { background-image: linear-gradient(100deg, #4A90D9, #9BD0F5); }
.mot-langue:nth-child(5) b { background-image: linear-gradient(100deg, #F2A93B, #E86A3C); }
.mot-langue:nth-child(6) b { background-image: linear-gradient(100deg, #E25555, #8E5AC8); }
.mot-langue:nth-child(7) b { background-image: linear-gradient(100deg, #F2C94C, #E25555); }

/* Égaliseur multicolore : le pouls de la fête au bas de la section */
.musiques-egaliseur {
  display: flex; align-items: flex-end; gap: 4px;
  height: 64px; margin-top: 56px; padding: 0 8px;
}
.musiques-egaliseur span {
  flex: 1; min-width: 0; height: 100%;
  border-radius: 2px 2px 0 0;
  transform-origin: 50% 100%;
  animation: eq-onde 2.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.musiques-egaliseur span:nth-child(5n+1) { background: linear-gradient(180deg, #1D80C3, rgba(29, 128, 195, 0.15)); height: 62%; animation-duration: 2.5s; }
.musiques-egaliseur span:nth-child(5n+2) { background: linear-gradient(180deg, #2BB673, rgba(43, 182, 115, 0.15)); height: 95%; animation-duration: 3.2s; animation-delay: -1.1s; }
.musiques-egaliseur span:nth-child(5n+3) { background: linear-gradient(180deg, #F2A93B, rgba(242, 169, 59, 0.15)); height: 45%; animation-duration: 2.3s; animation-delay: -0.5s; }
.musiques-egaliseur span:nth-child(5n+4) { background: linear-gradient(180deg, #E25555, rgba(226, 85, 85, 0.15)); height: 80%; animation-duration: 3s; animation-delay: -1.8s; }
.musiques-egaliseur span:nth-child(5n+5) { background: linear-gradient(180deg, #8E5AC8, rgba(142, 90, 200, 0.15)); height: 58%; animation-duration: 2.7s; animation-delay: -0.9s; }
.musiques-egaliseur span:nth-child(7n+3) { height: 88%; }
.musiques-egaliseur span:nth-child(9n+5) { height: 35%; }

/* Dégradé multicolore animé sur « toutes vos cultures » */
.mots-cultures {
  background: linear-gradient(90deg, #1D80C3, #2BB673, #F2A93B, #E25555, #1D80C3);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: cultures-irise 7s linear infinite;
}
@keyframes cultures-irise { to { background-position: 320% 0; } }
.musiques-rubans { display: grid; gap: 20px; margin-top: 56px; }
.musiques-piste { gap: 20px; padding-right: 20px; animation-duration: 38s; }
.musique-carte {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 22px 26px 18px; background: rgba(26, 26, 30, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: musique-danse 1.9s ease-in-out infinite;
}
/* Les pays dansent : rebond + inclinaison, désynchronisés carte à carte */
@keyframes musique-danse {
  0%, 100% { transform: translateY(0) rotate(-1.8deg); }
  50% { transform: translateY(-8px) rotate(1.8deg); }
}
.musique-carte:nth-child(3n+2) { animation-duration: 2.2s; animation-delay: -0.7s; }
.musique-carte:nth-child(3n+3) { animation-duration: 1.7s; animation-delay: -1.2s; }
.musique-carte:nth-child(4n+2) { animation-delay: -0.4s; }
.musique-carte:nth-child(5n+4) { animation-duration: 2.05s; animation-delay: -1.6s; }
.musique-carte svg {
  width: 76px; height: 50px; display: block;
  border-radius: 2px; overflow: hidden;
  outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px;
}
.musique-nom {
  font-family: var(--f-corps); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .musiques { padding: 80px 0 90px; }
  .musiques-mot { height: 118px; margin-top: 26px; }
  .mot-langue b { font-size: clamp(46px, 13vw, 72px); }
  .faisceau { width: 110px; filter: blur(10px); }
  .musiques-egaliseur { height: 44px; margin-top: 40px; gap: 3px; }
  .musiques-egaliseur span:nth-child(n+33) { display: none; }
  .musiques-rubans { gap: 14px; margin-top: 42px; }
  .musiques-piste { gap: 14px; padding-right: 14px; animation-duration: 30s; }
  .musique-carte { padding: 16px 18px 13px; gap: 9px; }
  .musique-carte svg { width: 56px; height: 37px; }
  .musique-nom { font-size: 10.5px; letter-spacing: 0.14em; }
  .musiques-lueur { filter: blur(50px); }
}

/* --- Témoignages : trio tricolore décalé --- */
.temoins { position: relative; overflow: hidden; }
.temoins-deco {
  position: absolute; left: -14px; top: -90px;
  font-family: var(--f-script); font-style: italic;
  font-size: 420px; line-height: 1; color: rgba(29, 128, 195, 0.1);
  user-select: none; pointer-events: none;
}
.temoins-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; align-items: start; }
.temoin {
  padding: 34px; display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow .45s ease;
}
.temoin:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.temoin:nth-child(2) { margin-top: 44px; }
.temoin:nth-child(3) { margin-top: 88px; }
.temoin-citation {
  margin: 0; font-family: var(--f-script); font-style: italic; font-weight: 600;
  font-size: 26px; line-height: 1.25;
}
.temoin-texte { margin: 18px 0 0; font-family: var(--f-corps); font-size: 14.5px; line-height: 1.65; }
.temoin-pied { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 0; }
.temoin-initiale {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 900; font-size: 17px;
}
.temoin-auteur { font-family: var(--f-corps); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.temoin-creme { background: #F4F2EE; color: #0F0F11; }
.temoin-creme .temoin-texte { color: rgba(15, 15, 17, 0.78); }
.temoin-creme .temoin-initiale { background: var(--bleu); color: #fff; }
.temoin-creme .temoin-auteur { color: rgba(15, 15, 17, 0.6); }
.temoin-electrique { background: linear-gradient(150deg, #1668A0 0%, #0A3D61 100%); color: #fff; }
.temoin-electrique .temoin-texte { color: rgba(255, 255, 255, 0.88); }
.temoin-electrique .temoin-initiale { background: #fff; color: #0F0F11; }
.temoin-electrique .temoin-auteur { color: rgba(255, 255, 255, 0.75); }
.temoin-nuit { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(29, 128, 195, 0.45); color: #fff; }
.temoin-nuit .temoin-citation { text-shadow: 0 0 18px rgba(29, 128, 195, 0.55); }
.temoin-nuit .temoin-texte { color: rgba(255, 255, 255, 0.78); }
.temoin-nuit .temoin-initiale { border: 1.5px solid var(--bleu); color: var(--bleu); }
.temoin-nuit .temoin-auteur { color: rgba(255, 255, 255, 0.6); }

/* --- Territoire : la route qui se dessine + le nuage de pastilles --- */
.territoire-trace { margin: 40px auto 8px; max-width: 900px; }
.territoire-trace svg { width: 100%; height: auto; display: block; }
.trace-route { stroke-dasharray: 100; stroke-dashoffset: 100; }
.reveal.vu .trace-route { animation: tracer 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.trace-pouls { animation: pouls 2.6s ease-out infinite; transform-origin: 30px 160px; }
@keyframes pouls { 0% { transform: scale(0.6); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* Régions en texte, pas en boutons (retour Jules) : trois traitements
   typographiques dans la même palette — plein #14618F, contour tracé, nuit.
   Points médians entre les mots, aucune affordance de clic. */
.territoire-nuage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 0;
  justify-content: center; margin-top: 44px; max-width: 1000px;
  margin-left: auto; margin-right: auto;
}
.region-mot {
  font-family: var(--f-titre); font-weight: 900; font-size: 26px;
  line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase;
}
.region-mot:not(:last-child)::after {
  content: "·"; margin: 0 20px;
  color: rgba(15, 15, 17, 0.28); font-weight: 400;
  -webkit-text-stroke: 0; -webkit-text-fill-color: rgba(15, 15, 17, 0.28);
}
.region-grand { font-size: 40px; }
.region-plein { color: #14618F; }
/* Aplat bleu vif (AA 3,81 en gros texte) — le contour tracé laissait des
   lignes dans les lettres (retour Jules). */
.region-vif { color: #1D80C3; }
.region-nuit { color: #0F0F11; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .bento-photo, .bento-creme, .bento-onde, .bento-electrique { grid-column: 1 / -1; }
  .bento .carte { min-height: 220px; }
  .bento-filigrane { font-size: 84px; }
  .bento-filigrane-blanc { font-size: 130px; }
  .temoins-grille { grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
  .temoin:nth-child(2), .temoin:nth-child(3) { margin-top: 0; }
  .temoins-deco { font-size: 240px; top: -50px; }
  .territoire-nuage { gap: 6px 18px; }
  .region-mot { font-size: 17px; }
  .region-mot:not(:last-child)::after { content: none; }
  .region-grand { font-size: 24px; }
}

/* =========================================================
   Avis Google (Featurable) — bandeau note + carrousel de cartes.
   Design system Marco : cartes #1A1A1E, coins carrés, filet 1px
   rgba(255,255,255,0.07) -> hover #1D80C3, Montserrat, étoiles #C9A961,
   auteur en petites caps espacées. Rempli par avis-google.js.
   ========================================================= */
.avis-g-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  min-height: 96px; /* hauteur réservée (vitrine + bouton) : zéro saut si l'API se tait */
  margin-top: 26px;
  max-width: 1000px; margin-left: auto; margin-right: auto;
  position: relative; z-index: 1;
}
.avis-g-note { display: inline-flex; align-items: center; gap: 12px; }
/* --- Vitrine WOW (2026-08-28) : note géante en or, étoiles qui
   s'allument une à une puis scintillent --- */
.avis-g-vitrine { display: inline-flex; align-items: center; gap: 24px; text-align: left; }
.avis-g-note-geante {
  font-family: var(--f-titre); font-weight: 900; line-height: 1;
  font-size: clamp(64px, 7vw, 96px); letter-spacing: -0.03em;
  background: linear-gradient(105deg, #8F7434 0%, #C9A961 30%, #F3E3B0 50%, #C9A961 70%, #8F7434 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: note-orfevre 5.5s ease-in-out infinite;
}
@keyframes note-orfevre { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.avis-g-vitrine-pile { display: inline-flex; flex-direction: column; gap: 10px; }
.avis-g-vitrine-pile .avis-g-note-texte { display: inline-flex; align-items: center; gap: 8px; }
.avis-g-etoiles-vitrine { gap: 5px; }
.avis-g-etoiles-vitrine svg {
  width: 26px; height: 26px;
  animation:
    etoile-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.14s) both,
    etoile-scintille 3.8s ease-in-out calc(0.9s + var(--i) * 0.55s) infinite;
}
@keyframes etoile-pop {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes etoile-scintille {
  0%, 86%, 100% { filter: drop-shadow(0 0 0 rgba(201, 169, 97, 0)); transform: scale(1); }
  93% { filter: drop-shadow(0 0 7px rgba(201, 169, 97, 0.9)); transform: scale(1.12); }
}
/* Pluie de scintillements dorés (injectée par avis-google.js) */
.apropos-avis { isolation: isolate; }
.avis-g-ciel { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.avis-g-ciel i {
  position: absolute; width: 14px; height: 14px; background: #C9A961;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 6px rgba(201, 169, 97, 0.7));
  opacity: 0;
  animation: sc-brille 5.2s ease-in-out infinite;
}
.avis-g-ciel i:nth-child(1) { left: 6%; top: 14%; animation-delay: 0s; }
.avis-g-ciel i:nth-child(2) { left: 16%; top: 62%; width: 9px; height: 9px; animation-delay: -1.4s; animation-duration: 4.4s; }
.avis-g-ciel i:nth-child(3) { left: 27%; top: 26%; width: 11px; height: 11px; animation-delay: -2.9s; }
.avis-g-ciel i:nth-child(4) { left: 40%; top: 74%; animation-delay: -0.8s; animation-duration: 6s; }
.avis-g-ciel i:nth-child(5) { left: 55%; top: 10%; width: 10px; height: 10px; animation-delay: -3.6s; }
.avis-g-ciel i:nth-child(6) { left: 66%; top: 58%; width: 8px; height: 8px; animation-delay: -2s; animation-duration: 4.8s; }
.avis-g-ciel i:nth-child(7) { left: 76%; top: 22%; animation-delay: -4.4s; }
.avis-g-ciel i:nth-child(8) { left: 87%; top: 68%; width: 11px; height: 11px; animation-delay: -1s; animation-duration: 5.8s; }
.avis-g-ciel i:nth-child(9) { left: 93%; top: 34%; width: 9px; height: 9px; animation-delay: -3.1s; }
.avis-g-ciel i:nth-child(10) { left: 47%; top: 44%; width: 8px; height: 8px; animation-delay: -5s; animation-duration: 6.4s; }
@keyframes sc-brille {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1) rotate(45deg); }
}
/* Le guillemet géant respire */
.apropos-avis .avis-deco { animation: deco-souffle 8s ease-in-out infinite alternate; }
@keyframes deco-souffle {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 1; transform: scale(1.04); }
}
/* Bouton « Écrire un avis » — contour compact, à droite du bandeau
   (rencontre Marco 2026-08-27) */
.avis-g-ecrire {
  display: inline-flex; align-items: center;
  padding: 11px 22px; border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--f-corps); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; color: #fff; text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.avis-g-ecrire:hover { border-color: #1D80C3; color: #1D80C3; }
.avis-g-logo { width: 20px; height: 20px; flex: none; }
.avis-g-etoiles { display: inline-flex; gap: 2px; }
.avis-g-etoiles svg { width: 16px; height: 16px; }
.avis-g-etoiles .pleine path { fill: #C9A961; }
.avis-g-etoiles .vide path { fill: rgba(201, 169, 97, 0.25); }
.avis-g-note-texte {
  font-family: var(--f-corps); font-size: 14px; color: rgba(255, 255, 255, 0.85);
}
.avis-g-note-texte strong { font-weight: 700; color: #fff; }
/* Variante accueil : bandeau pleine largeur sous le titre Témoignages
   (note à gauche, bouton Écrire un avis à droite) */
.avis-g-bandeau-gauche { max-width: none; }

.avis-g-zone { margin-top: 48px; min-height: 460px; /* squelette = cartes : zéro saut */ }
.avis-g-piste {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.avis-g-fenetre { overflow: hidden; }
.avis-g-cellule { flex: none; padding: 0 12px; box-sizing: border-box; }
.avis-g-carte, .avis-g-squelette {
  background: #1A1A1E;
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 380px;
  padding: 30px;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
/* --- Cartes vivantes (2026-08-28) : accent tournant 5 couleurs (filet
   haut, médaillon, guillemet), flottement doux désynchronisé --- */
.avis-g-carte {
  --acc: #1D80C3;
  position: relative; overflow: hidden;
  border-top: 2px solid var(--acc);
  animation: avis-flotte 5.6s ease-in-out infinite alternate;
}
.avis-g-cellule:nth-child(5n+2) .avis-g-carte { --acc: #2BB673; animation-duration: 6.3s; animation-delay: -1.8s; }
.avis-g-cellule:nth-child(5n+3) .avis-g-carte { --acc: #F2A93B; animation-duration: 5.1s; animation-delay: -3.2s; }
.avis-g-cellule:nth-child(5n+4) .avis-g-carte { --acc: #E25555; animation-duration: 6.8s; animation-delay: -0.9s; }
.avis-g-cellule:nth-child(5n+5) .avis-g-carte { --acc: #8E5AC8; animation-duration: 5.9s; animation-delay: -2.4s; }
@keyframes avis-flotte { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.avis-g-carte::before {
  content: "«"; position: absolute; top: -26px; right: 10px;
  font-family: var(--f-titre); font-weight: 900; font-size: 110px; line-height: 1;
  color: var(--acc); opacity: 0.16; pointer-events: none;
}
.avis-g-carte .avis-g-initiale { color: var(--acc); }
.avis-g-carte .avis-g-avatar { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.avis-g-carte:hover {
  border-color: var(--acc);
  box-shadow: 0 22px 48px -20px var(--acc);
}
.avis-g-carte .avis-g-etoiles svg { animation: etoile-scintille 4.6s ease-in-out calc(var(--i, 1) * 0.4s) infinite; }
.avis-g-tete { display: flex; align-items: center; gap: 14px; }
.avis-g-avatar {
  position: relative; width: 46px; height: 46px; flex: none;
  border-radius: 50%; overflow: hidden; background: #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.avis-g-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.avis-g-initiale {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 900; font-size: 18px; color: #1D80C3;
}
.avis-g-qui { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avis-g-nom {
  font-family: var(--f-corps); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}
.avis-g-date {
  font-family: var(--f-corps); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.avis-g-carte .avis-g-etoiles { margin-top: 18px; }
.avis-g-texte {
  margin: 16px 0 0; font-family: var(--f-corps); font-size: 14.5px;
  line-height: 1.65; color: rgba(255, 255, 255, 0.82);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.avis-g-texte.ouvert { display: block; -webkit-line-clamp: none; overflow: visible; }
.avis-g-suite {
  margin-top: 10px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--f-corps); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #1D80C3;
}
.avis-g-suite:hover { color: #4DA3D8; }
.avis-g-badge {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-corps); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); text-decoration: none;
}
.avis-g-badge:hover { color: #fff; }
.avis-g-badge .avis-g-logo { width: 15px; height: 15px; }
.avis-g-barre {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 34px;
}
.avis-g-fleche {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  background: none; border: 1px solid rgba(29, 128, 195, 0.55); color: #1D80C3;
  font-size: 14px; transition: background 0.25s ease, color 0.25s ease;
}
.avis-g-fleche:hover { background: #1D80C3; color: #0F0F11; }
.avis-g-points { display: flex; align-items: center; }
.avis-g-point {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.avis-g-point span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(29, 128, 195, 0.3); transition: all 0.3s ease;
}
.avis-g-point:hover span { background: rgba(29, 128, 195, 0.6); }
.avis-g-point[aria-current="true"] span { width: 24px; border-radius: 4px; background: #1D80C3; }
.avis-g-squelette { position: relative; overflow: hidden; }
.avis-g-squelette::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: avis-g-brille 1.6s ease-in-out infinite;
}
@keyframes avis-g-brille { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.avis-g-squelettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .avis-g-zone { min-height: 430px; }
  .avis-g-squelettes { grid-template-columns: 1fr; }
  .avis-g-squelette:nth-child(n+2) { display: none; }
  .avis-g-cellule { padding: 0 6px; }
  .avis-g-bandeau { flex-wrap: wrap; justify-content: center; min-height: 170px; }
  .avis-g-vitrine { flex-direction: column; gap: 8px; text-align: center; align-items: center; }
  .avis-g-vitrine-pile { align-items: center; }
  .avis-g-ciel i:nth-child(4), .avis-g-ciel i:nth-child(10) { display: none; }
}

/* =========================================================
   Instagram via Behold — même composant sur l'accueil et À propos.
   Rempli par instagram.js ; squelettes carrés dans la MÊME grille que
   les cartes finales : géométrie identique, zéro saut de layout.
   ========================================================= */
.insta-titre a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.insta-titre a:hover { color: var(--bleu); }
.insta-abonnes {
  margin: 12px 0 0; min-height: 24px; /* réservée : reste vide si le feed se tait */
  color: rgba(255, 255, 255, 0.6); letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 13px;
}
.insta-grille {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px;
  margin-top: 44px;
}
.insta-carte, .insta-squelette {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: #1A1A1E; display: block;
  /* Filet : deux reels du feed ont une couverture noire (donnée source,
     cache Behold) — le filet fait lire une tuile sombre comme une carte,
     pas comme un trou. Demander à Marco de changer ces couvertures. */
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.25s ease;
}
.insta-carte:hover { border-color: #1D80C3; }
.insta-carte img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.25s ease;
}
.insta-voile {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  background: rgba(11, 11, 13, 0.45); color: #fff;
  opacity: 0; transition: opacity 0.25s ease;
}
.insta-voile svg { width: 22px; height: 22px; }
.insta-likes { font-family: var(--f-corps); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.insta-carte:hover .insta-voile, .insta-carte:focus-visible .insta-voile { opacity: 1; }
.insta-carte:hover img { transform: scale(1.03); }
.insta-reel {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
  color: #fff; z-index: 1; opacity: 0.9;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}
.insta-section .btn { margin-top: 44px; }
.insta-squelette::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: avis-g-brille 1.6s ease-in-out infinite;
}

@media (max-width: 1100px) {
  .insta-grille { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .insta-grille { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
  .insta-section .btn { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .insta-squelette::after { animation: none; }
  .insta-carte img, .insta-voile { transition: none; }
  .onde-mini span { animation: none; }
  .trace-route { stroke-dashoffset: 0; animation: none; }
  .trace-pouls { animation: none; opacity: 0; }
  .avis-g-piste { transition: none; }
  .avis-g-squelette::after { animation: none; }
  /* Vitrine et cartes WOW figées */
  .avis-g-note-geante, .avis-g-etoiles svg, .avis-g-carte,
  .avis-g-ciel i, .apropos-avis .avis-deco { animation: none; }
  .avis-g-ciel { display: none; }
  /* Scène des partenaires : tout ce qui vit en continu se fige */
  .seq-etoiles, .seq-nuit::after, .seq-orbite::before,
  .seq-orbite-anneau, .seq-petit, .seq-titre2::after { animation: none; }
  /* Multiculturel : danse, lueurs, faisceaux, égaliseur et dégradé du
     titre figés (les rubans .defile-piste sont déjà figés plus haut) ;
     le mot géant reste sur « Dansez » (site.js ne tourne pas). */
  .musique-carte, .musiques-lueur, .mots-cultures,
  .faisceau, .musiques-egaliseur span { animation: none; }
  .mot-langue { transition: none; }
}

/* =========================================================
   Passe mobile irréprochable (2026-08-29) — exigences Jules :
   zéro débordement, tactile >= 44 px, corps >= 16 px, contrastes AA,
   justification + césure sur le corps, paddings <= 64 px sur mobile,
   carrousels tactiles pour les sections de plus de 3 photos.
   ========================================================= */

/* --- Images : jamais plus larges que le viewport, jamais étirées.
   height:auto ciblé là où un attribut height + une largeur CSS déformaient
   (même bug que le logo du héros). Les photos du ruban À propos gardent
   leur largeur naturelle (marquee en débordement volontaire, clippé). --- */
img { max-width: 100%; }
.defile-photos img, .seq-arche > img:first-child { max-width: none; }
.pied-identite img, .signature .mf, .signature .mot,
.signature-finale .mf, .signature-finale .mot { height: auto; }

/* --- Zones tactiles >= 44 px --- */
.avis-g-ecrire { min-height: 44px; }
.avis-g-suite { min-height: 44px; padding: 0; display: inline-flex; align-items: center; }
.avis-g-badge { min-height: 44px; align-items: center; padding-top: 12px; }
.pied-col a, .pied-legal a, .lien-contact {
  display: inline-flex; align-items: center; min-height: 44px;
}
a.langue { min-height: 44px; }

/* --- Contrastes AA (4,5:1 mesurés sur leurs fonds réels) --- */
.avis-g-date { color: rgba(255, 255, 255, 0.62); }
.avis-g-badge { color: rgba(255, 255, 255, 0.72); }
.insta-abonnes { color: rgba(255, 255, 255, 0.72); }
.mot-langue i { color: rgba(255, 255, 255, 0.66); }
.pied-note { color: rgba(255, 255, 255, 0.72); }
.pied-legal { color: rgba(255, 255, 255, 0.72); }
.rail-regions { color: rgba(255, 255, 255, 0.72); }

/* --- Corps de texte >= 16 px et interlignage 1.5-1.7 sur mobile ;
   16 px sur les champs = pas de zoom automatique iOS. Justification +
   césure sur le corps courant (lang fr/en posé sur <html>). --- */
@media (max-width: 900px) {
  .carte-texte, .avis-g-texte, .pied-note, .rail-regions,
  .libelle, .stat-libelle, .pied-col a, .avis-g-date { font-size: 16px; }
  .avis-g-texte, .carte-texte { line-height: 1.6; }
  .champ input, .champ select, .champ textarea { font-size: 16px; }
  .texte { hyphens: auto; -webkit-hyphens: auto; }
  /* Justification réservée aux longs paragraphes de contenu. Les cartes
     d'avis sont étroites et citent des textes anglais dans une page en
     français : la césure ne s'y applique pas et la justification y creuse
     des rivières. */
  .chapitre-texte .texte, .carte-texte {
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  }
  .avis-g-texte { text-align: left; hyphens: none; }
}

/* --- 320-380 px : les grilles qui explosaient leur colonne --- */
@media (max-width: 380px) {
  .bande-stats .wrap { grid-template-columns: 1fr; gap: 34px 0; }
  .corpo-stats { grid-template-columns: 1fr; }
  .contact-badges { flex-wrap: wrap; gap: 10px; }
  .contact-badge { min-width: 0; }
  .contact-formulaire, .contact-etape, .champ,
  .champ input, .champ select, .champ textarea { min-width: 0; max-width: 100%; }
  .avis-g-vitrine { gap: 4px; }
  .avis-g-note-geante { font-size: 56px; }
}

/* --- Paddings de sections <= 64 px sur mobile (compacité) --- */
@media (max-width: 700px) {
  main .bande, .apropos-chapitre, .apropos-galerie, .prives-marquee,
  .corpo-controle, .corpo-avis-bande, .mariages-mosaique-bande,
  .musiques, .insta-section, .apropos-fin {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* --- Carrousels tactiles (sections de plus de 3 photos) : scroll-snap
   natif, points de position, flèches clavier (site.js [data-carrousel-mobile]
   + instagram.js). Actif sous 900 px seulement. --- */
@media (max-width: 900px) {
  [data-carrousel-fait] {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
  }
  [data-carrousel-fait]::-webkit-scrollbar { display: none; }
  [data-carrousel-fait] > * { flex: 0 0 auto; scroll-snap-align: center; }
  .mariages-mosaique[data-carrousel-fait] > img {
    width: 82vw; height: 100vw; max-height: 62vh; object-fit: cover;
  }
  .insta-grille[data-carrousel-fait] > * { width: 58vw; }
  .carrousel-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
}
@media (min-width: 901px) {
  .carrousel-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-carrousel-fait] { scroll-behavior: auto; }
}

/* --- Finitions passe mobile : les barres de points (12 x 44 px) passent en
   multi-lignes sous 430 px au lieu de déborder ; le lien-titre Instagram et
   le rail contact remontent aux minimums tactiles/lisibilité. --- */
.avis-g-barre, .carrousel-nav { flex-wrap: wrap; max-width: 100%; padding: 0 10px; }
.avis-g-points { flex-wrap: wrap; justify-content: center; row-gap: 0; }
.carrousel-nav { gap: 4px; }
@media (max-width: 430px) {
  /* En étroit : les deux flèches côte à côte, les points en dessous */
  .carrousel-nav .avis-g-points { order: 2; flex-basis: 100%; }
}
.insta-titre a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .rail-avis { font-size: 16px; }
  .pied-legal { font-size: 14px; }
}

/* --- Formulaire branché (2026-08-29) : états d'envoi --- */
.contact-succes {
  border: 1px solid rgba(29, 128, 195, 0.55);
  background: rgba(29, 128, 195, 0.08);
  padding: 44px 36px; max-width: 620px;
}
.contact-erreur {
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid rgba(226, 85, 85, 0.6);
  background: rgba(226, 85, 85, 0.1);
  font-family: var(--f-corps); font-size: 16px; line-height: 1.55; color: #fff;
}
.envoyer[disabled] { opacity: 0.6; cursor: wait; }

/* Filigrane d'équipe (carte « Une équipe vaste ») — remplace le « 5 » */
.bento-filigrane-equipe {
  position: absolute; right: 18px; top: 6px; z-index: 0;
  width: 200px; height: auto; pointer-events: none;
}
@media (max-width: 900px) { .bento-filigrane-equipe { width: 140px; } }

/* --- Badge flottant « Conçu par PULSE O » (2026-08-29, variante A choisie
   par Jules : sombre translucide + icône + petites caps). Fondu d'entrée
   après ~1 s ; s'estompe quand le pied de page arrive (site.js pose
   .badge-efface — le crédit du pied prend le relais) ; réduit 641-900 px,
   masqué <= 640 px (le pied porte déjà la mention). --- */
.badge-pulseo {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 19px;
  background: rgba(15, 15, 17, 0.85); color: #F5F4F1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-decoration: none;
  font-family: var(--f-corps); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; white-space: nowrap;
  opacity: 0;
  animation: badge-entree 0.6s ease 1.1s forwards;
  transition: opacity 0.35s ease;
}
@keyframes badge-entree { to { opacity: 1; } }
/* Le logotype EST la marque (retour Jules) : 26 px, jamais en dessous de
   ~24 px (les échancrures de la rosette se bouchent). */
.badge-pulseo svg { display: block; height: 26px; width: auto; flex: none; }
.badge-pulseo:hover { border-color: rgba(255, 255, 255, 0.4); }
.badge-pulseo.badge-efface { opacity: 0 !important; pointer-events: none; }
@media (max-width: 900px) {
  .badge-pulseo { padding: 9px 13px; font-size: 9.5px; gap: 8px; right: 14px; bottom: 14px; }
  .badge-pulseo svg { height: 22px; }
}
@media (max-width: 640px) { .badge-pulseo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .badge-pulseo { animation: none; opacity: 1; transition: none; }
}
/* Icône PULSE O inline devant la mention du pied */
.pied-pulseo { display: inline-flex; align-items: center; gap: 6px; }
.pied-pulseo svg { height: 12px; width: 12px; flex: none; }

/* =========================================================
   Retours mobiles de Jules (2026-08-31)
   ========================================================= */

/* --- Carrousel d'avis : UNE seule ligne, flèches à hauteur des points.
   Sous 480 px, la rangée de points ne tient pas (12 pastilles de 44 px) :
   elle cède la place à un compteur « n / total » compact. Zones tactiles
   maintenues à 44 px. --- */
.avis-g-barre { flex-wrap: nowrap; gap: 10px; }
.avis-g-compteur { display: none; }
@media (max-width: 480px) {
  .avis-g-barre .avis-g-points { display: none; }
  .avis-g-compteur {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 66px; min-height: 44px;
    font-family: var(--f-corps); font-size: 14px; font-weight: 700;
    letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
  }
}
@media (min-width: 481px) and (max-width: 900px) {
  /* les points tiennent encore, mais resserrés pour rester sur une ligne */
  .avis-g-barre .avis-g-point { width: 30px; }
}

/* --- Pied de page : compact et réparti sur mobile. Les 4 colonnes en
   2×2 déséquilibrées (371 px contre 187 px) devenaient un mur de 874 px. --- */
@media (max-width: 900px) {
  /* Le pied « riche » gardait son rembourrage de bureau (64/44/48) sur
     mobile : d'où l'impression qu'il commençait très loin du contenu. */
  .pied-riche-inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
    padding: 40px 24px 28px;
    align-items: start;
  }
  /* Identité compacte en tête, puis Pages sur deux colonnes internes :
     six liens empilés faisaient à eux seuls 260 px de haut. */
  .pied-identite { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .pied-identite img { width: 62px; margin: 0; }
  .pied-identite .texte { margin: 0; }
  .pied-identite .pied-note { flex-basis: 100%; margin: 0; }
  .pied-riche-inner > .pied-col:nth-child(2) {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
  }
  .pied-riche-inner > .pied-col:nth-child(2) .pied-titre { grid-column: 1 / -1; }
  .pied-col a { min-height: 40px; }
  .pied-col .pied-titre { margin-bottom: 2px; }
  .pied-legal { gap: 12px 22px; padding: 16px 24px 20px; }
}
@media (max-width: 380px) {
  /* on garde deux colonnes jusqu'en bas : passer à une seule rallongeait
     le pied de 120 px sans rien gagner en lisibilité */
  .pied-riche-inner { gap: 22px 14px; padding: 36px 20px 24px; }
  .pied-social a { padding: 0 12px; font-size: 12px; gap: 7px; }
}

/* --- Réseaux sociaux en boutons (demande Jules) : icône + nom, contour
   discret, 44 px de haut, ils remplacent les liens texte du pied. --- */
.pied-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pied-social a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  font-family: var(--f-corps); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pied-social a:hover { border-color: var(--bleu); color: #fff; background: rgba(29, 128, 195, 0.12); }
.pied-social svg { width: 17px; height: 17px; flex: none; fill: currentColor; }