/* ==========================================================================
   Aperture One — feuille de style unique
   Noir et argenté. Aucune couleur d'interface : la seule couleur du site
   vient des photos et de la vidéo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root{
  /* ====== SYSTÈME DE DESIGN (refonte du 10/10/2026) ======================
     Toutes les couleurs, polices et mesures du site sont ici. Aucune valeur
     en dur ailleurs : changer une ligne ici change tout le site.
     Noir et argenté uniquement. La couleur vient des photos de soirées.
     ====================================================================== */

  /* ===== LES 7 COULEURS DU SITE =========================================
     Ce sont les seules. Pour ajuster la direction artistique, c'est ici et
     nulle part ailleurs : tout le reste s'y réfère par son rôle.
     Bleu profond, et une lumière blanche : des faisceaux de LED dans le
     brouillard. Aucune autre teinte, jamais d'arc-en-ciel.
     ====================================================================== */
  --fond:      #05080F;   /* Abysse    — le fond, environ 60 % de l'écran */
  --surface:   #0C1424;   /* Nuit      — cartes et sections alternées     */
  --trait:     #1A2740;   /* Marine    — filets, bordures, survols        */
  --accent:    #F3F6FA;   /* Blanc     — la lumière : prix, bouton        */
  --accent-2:  #A9C8E8;   /* Glace     — seconde lumière, badges, liens   */
  --texte:     #EEF2F6;   /* Blanc doux — le texte qui se lit             */
  --texte-2:   #8E9BB0;   /* Brume     — texte secondaire (7:1 sur Abysse)*/

  /* Bordure des contrôles : doit atteindre 3:1 sur le fond (règle WCAG
     pour un élément non textuel), donc plus claire que Marine, qui n'est
     que décorative. #5A6B85 donne 3,5:1 sur Abysse. */
  --bord:      #5A6B85;

  /* LA TOUCHE CHAMPAGNE (07/11/2026). William : « c'est du blanc sur un
     fond bleu, je veux des variations, un site de luxe ». Une seule teinte
     chaude, celle de la lumière ambrée des photos, et en très petite
     quantité : les petits titres au-dessus des sections, les numéros, les
     pictogrammes, quelques filets. Jamais un fond, jamais un bouton, jamais
     un prix. 5,2:1 sur Abysse, lisible en petit.
     Pour revenir à un site sans touche chaude : remplacer cette valeur par
     celle de --accent-2. */
  --or:        #D2B88A;

  /* Les anciens noms restent définis : la feuille compte plus de mille
     lignes écrites avec eux. Ils ne sont plus que des alias de rôle, donc
     changer une couleur ci-dessus suffit à repeindre tout le site. */
  --noir:       var(--fond);
  --carte:      var(--surface);
  --blanc:      var(--accent);
  --arg-poli:   var(--accent-2);
  --arg-brosse: var(--texte-2);
  --arg-ombre:  var(--bord);

  /* Halo de brouillard, en radial-gradient seulement, opacité très faible.
     C'est le bleu glacé de la palette, jamais une autre teinte. */
  --halo:  169, 200, 232;
  --filet: rgba(26, 39, 64, .9);

  /* Plus de dégradé argenté : un bouton et un prix sont d'un seul ton.
     Les seuls dégradés du site sont ceux de la lumière elle-même, dans
     les faisceaux (blanc vers transparent). */
  --metal: var(--accent);

  /* --- Typographie (auto-hébergée : voir css/polices.css) ---------------- */
  /* Titres : Unbounded. Large et contemporaine. Pas d'italique dans la
     famille : un mot se détache par la graisse, 300 contre 600, et sur
     deux titres du site au maximum. */
  --f-t: "Unbounded", "Segoe UI", system-ui, sans-serif;
  /* Texte, petits titres, boutons : Archivo. */
  --f-c: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Prix et chiffres : Archivo, chiffres alignés et de même largeur. */
  --f-p: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-dessin: normal;
  --t-graisse: 300;    /* les grands titres sont fins : Unbounded est large */
  --t-fort:    600;    /* la mise en valeur d'un mot, deux fois sur le site */
  /* Capitales espacées — petits titres et boutons. */
  --t-caps: .22em;

  /* --- Mesures ---------------------------------------------------------- */
  --wrap: 1240px;
  --gout: clamp(20px, 5vw, 56px);
  --sec:  clamp(88px, 11vw, 168px);
  --r:    16px;    /* rayon unique : cartes, champs, images */
  --r-s:  10px;    /* rayon court : badges, petits blocs */

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--noir);
  color: var(--arg-brosse);
  font-family: var(--f-c);
  font-weight: 400;
  font-size: clamp(17px, 1.1vw, 18px);
  line-height: 1.65;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }

/* plusieurs règles de cette feuille posent un display ; sans ça, elles
   l'emporteraient sur l'attribut hidden piloté par le JS. */
[hidden]{ display: none !important; }

a{ color: var(--arg-poli); text-decoration: none; }
a:hover{ color: var(--blanc); }

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

/* Anneau de focus argenté — jamais le contour bleu du navigateur. */
:focus{ outline: none; }
:focus-visible{
  outline: 1px solid var(--arg-poli);
  outline-offset: 3px;
}

.sr{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip{
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 12px 18px; background: var(--noir);
  border: 1px solid var(--arg-poli); color: var(--blanc);
  font-size: 14px; transform: translateY(-200%);
}
.skip:focus{ transform: none; }

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gout);
}

/* Grain : évite l'aplat numérique. SVG inline, aucun fichier externe. */
.grain{
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Titres
   -------------------------------------------------------------------------- */
/* MODÈLE DE SECTION — le même partout, c'est lui qui fait la cohésion :
     œil-de-bœuf en capitales espacées → titre en Unbounded → une phrase →
     contenu.
   <p class="oeil">Prestations</p>
   <h2 class="h2">Ce que j'installe <span class="fort">chez vous</span></h2>
   <p class="lead">…</p>                                                    */
.oeil{
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--f-c);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.4;
  letter-spacing: var(--t-caps);
  text-transform: uppercase;
  color: var(--arg-brosse);
  margin-right: calc(var(--t-caps) * -1);
}

.h2{
  font-family: var(--f-t);
  font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--blanc);
  margin: 0 0 clamp(26px, 3.4vw, 44px);
}
/* la graisse (600 contre 300) détache le mot qui porte le sens :
   Unbounded n'a pas d'italique */
.h2 .fort, h1 .fort{ font-weight: var(--t-fort); }

h3{
  font-family: var(--f-c);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.35;
  letter-spacing: .005em;
  color: var(--blanc);
  margin: 0 0 .7em;
}

.lead{
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--arg-poli);
  max-width: 62ch;
}
/* une phrase de section suit toujours le titre, jamais collée au contenu */
.h2 + .lead{ margin-bottom: clamp(30px, 4vw, 52px); }

.prose{ max-width: 68ch; }

/* --------------------------------------------------------------------------
   4. Sections : filet de séparation + halos immobiles
   Les halos ne bougent pas ; ils changent de place d'une section à l'autre.
   C'est le scroll qui fait balayer le faisceau, pas une animation.
   -------------------------------------------------------------------------- */
.sec{
  position: relative;
  padding-block: var(--sec);
  overflow: hidden;
  overflow: clip;
}

.sec::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(90,90,90,.2) 14%,
    var(--arg-poli) 50%,
    rgba(90,90,90,.2) 86%, transparent 100%);
  opacity: .42;
}

.sec > .wrap{ position: relative; z-index: 1; }

.sec--halo-l::after,
.sec--halo-b::after,
.sec--halo-c::after{
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  width: min(960px, 120vw); height: min(960px, 120vw);
  background: radial-gradient(circle at center,
    rgba(var(--halo), .08) 0%,
    rgba(var(--halo), .03) 36%,
    transparent 68%);
}
.sec--halo-l::after{ left: -22%; top: -14%; }
.sec--halo-b::after{ left: 50%; bottom: -34%; transform: translateX(-50%); }
.sec--halo-c::after{ right: -20%; top: 14%; }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
/* UN SEUL bouton principal : fond argenté, texte noir, capitales espacées.
   Au survol sur ordinateur, il se décale légèrement vers la souris
   (effet magnétique piloté par js/main.js, via --mx / --my). */
.btn{
  position: relative;
  display: inline-block;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--metal);
  color: var(--fond);
  font-family: var(--f-c);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--t-caps);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), filter .22s ease;
  /* compense l'interlettrage traînant de la dernière lettre */
  text-indent: var(--t-caps);
}
.btn:hover{ color: var(--fond); filter: brightness(1.08); }

/* UN SEUL bouton secondaire : contour fin argenté, fond transparent. */
.btn--second{
  background: transparent;
  border-color: var(--arg-ombre);
  color: var(--blanc);
}
.btn--second:hover{ border-color: var(--arg-poli); color: var(--blanc); filter: none; }

.btn--lg{ padding: 19px 46px; font-size: 13.5px; }

.btn[disabled]{ cursor: default; filter: grayscale(.6) brightness(.7); }
.btn[disabled]:hover{ filter: grayscale(.6) brightness(.7); }

/* CARTE unique : fond Nuit, trait fin, coins 16 px. Au survol, un liseré
   argenté fait le tour, comme un faisceau qui balaie le cadre. */
.carte{
  position: relative;
  border-radius: var(--r);
  background: var(--carte);
  border: 1px solid var(--trait);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.carte::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg),
    transparent 0deg, transparent 300deg,
    var(--blanc) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
@property --angle{ syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@media (hover: hover){
  .carte:hover{ border-color: var(--arg-ombre); }
  .carte:hover::after{ opacity: 1; animation: balaie 1.6s linear infinite; }
}
@keyframes balaie{ to{ --angle: 360deg; } }
/* carte mise en avant : le liseré est permanent, sans animation */
.carte--avant{ border-color: var(--arg-ombre); box-shadow: 0 0 0 1px rgba(201, 201, 207, .18); }

/* barre de chargement du bouton d'envoi */
.btn__l{
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--metal); transform: scaleX(0); transform-origin: left;
}
.btn.is-load .btn__l{ animation: charge 1.1s ease-in-out infinite; }
@keyframes charge{
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  51%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-fond{
  background: rgba(0, 0, 0, .88);
  border-bottom-color: var(--filet);
  backdrop-filter: blur(10px);
}
/* Menu mobile ouvert : le flou doit partir. Un élément flouté devient le
   repère des positions « fixed » de ses enfants : le panneau du menu se
   retrouvait alors enfermé dans la hauteur de la barre, et seuls les premiers
   liens s'affichaient dès que la page était défilée (corrigé le 19/09/2026).
   Le panneau couvre l'écran : le flou ne manque à personne. */
.nav.is-ouvert{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav__in{
  max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--gout);
  display: flex; align-items: center; gap: 20px;
}

.nav__logo{ display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__logo img{ width: 38px; height: 38px; object-fit: contain; }
/* Le nom à côté du logo reste en capitales espacées, comme l'arc du
   monogramme. Archivo plutôt qu'Unbounded : à 13 px, Unbounded est trop
   large et le mot déborderait sur le menu. */
.nav__word{
  font-family: var(--f-c);
  font-weight: 400;
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
}

.menu{ display: flex; align-items: center; gap: clamp(16px, 2.1vw, 30px); }
.menu a{
  font-size: 14px; color: var(--arg-brosse); letter-spacing: .02em;
  transition: color .2s ease;
}
.menu a:hover{ color: var(--blanc); }
.menu__cta{
  border: 1px solid var(--arg-ombre);
  padding: 10px 20px; color: var(--blanc) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.menu__cta:hover{ background: var(--arg-poli); color: var(--noir) !important; border-color: transparent; }

.burger{
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--arg-ombre);
  cursor: pointer;
}
.burger__bars{ display: block; width: 18px; margin-inline: auto; }
.burger__bars i{ display: block; height: 1px; background: var(--arg-poli); }
.burger__bars i + i{ margin-top: 5px; }

/* menu sur une seule ligne au-dessus du format mobile : sans ça, entre 761 et
   1023 px, plusieurs liens se coupaient sur deux lignes. Dans cette plage, le
   nom écrit à côté du logo s'efface pour laisser la place (le logo reste). */
@media (min-width: 761px){
  .menu a{ white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1023px){
  .nav__word{ display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 120px var(--gout) 88px;
  overflow: hidden;
  isolation: isolate;
}

/* le poster est TOUJOURS là, en fond. La vidéo se pose par-dessus,
   et seulement sur grand écran (voir js/main.js). */
.hero__media{
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../images/hero-poster.jpg");
  background-size: cover; background-position: center;
}
.hero__media video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.hero__veil{
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, transparent 0%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.68) 0%, rgba(0,0,0,.56) 34%,
      rgba(0,0,0,.80) 74%, #000 100%);
}

.hero__in{ text-align: center; max-width: 780px; }

.hero__logo{
  width: clamp(112px, 17vw, 168px); height: auto;
  margin: 0 auto clamp(26px, 3.4vw, 42px);
  object-fit: contain;
}

.hero__title{ margin: 0 0 clamp(30px, 4vw, 46px); }

.hero__cri{
  display: block;
  font-family: var(--f-t);
  font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse);
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1.1;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-right: -.175em;
}

.hero__sub{
  display: block;
  max-width: 30ch;
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  font-family: var(--f-c);
  font-weight: 300;
  font-size: clamp(15.5px, 1.7vw, 19px);
  line-height: 1.5;
  letter-spacing: .015em;
  color: var(--arg-poli);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   8. Grille utilitaire (12 colonnes)
   -------------------------------------------------------------------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
/* raccourci complet : un simple grid-column-start annulerait le span ci-dessus */
.col-off-1{ grid-column: 7 / -1; }

/* --------------------------------------------------------------------------
   9. Prestations — trois colonnes séparées par des filets, pas trois cartes
   -------------------------------------------------------------------------- */
.presta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.presta__c{ padding: 0 clamp(22px, 3vw, 44px); }
.presta__c:first-child{ padding-left: 0; }
.presta__c:last-child{ padding-right: 0; }
.presta__c + .presta__c{ border-left: 1px solid var(--filet); }

.presta__c h3{ position: relative; padding-top: 22px; }
.presta__c h3::before{
  content: "";
  position: absolute; top: 0; left: 0; width: 30px; height: 1px;
  background: var(--metal);
}

.presta__pour{
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--filet);
  font-size: 14.5px; line-height: 1.55; color: var(--arg-brosse);
}

.presta__tout{
  margin-top: clamp(40px, 5vw, 66px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--filet);
  max-width: 62ch;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--arg-poli);
}

/* --------------------------------------------------------------------------
   10. Matériel — plan de feu
   -------------------------------------------------------------------------- */
.mat__intro{ max-width: 64ch; margin-bottom: clamp(40px, 5vw, 66px); }

.plot{ margin: 0 0 clamp(46px, 6vw, 80px); }
.plot__svg{ width: 100%; height: auto; }
.plot__svg *{ vector-effect: non-scaling-stroke; }

.plot__line{ fill: none; stroke: var(--arg-ombre); stroke-width: 1; }
.plot__solid{ fill: var(--arg-brosse); stroke: none; }
.plot__led{ fill: var(--arg-poli); opacity: .75; }
.plot__faint{ fill: rgba(var(--halo), .055); stroke: none; }
.plot__laser{ fill: none; stroke: rgba(var(--halo), .16); stroke-width: 1; }
.plot__lead{ fill: none; stroke: var(--arg-ombre); stroke-width: 1; opacity: .8; }
.plot__lab text{
  fill: var(--arg-brosse);
  font-family: var(--f-c); font-size: 15px; font-weight: 400; letter-spacing: .02em;
}

.plot__cap{
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-size: 14px; color: var(--arg-brosse); max-width: 68ch;
}

.parc__ast{ font-size: .68em; line-height: 0; vertical-align: super; color: var(--arg-poli); }
.parc__note{
  margin: 20px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--arg-brosse);
  max-width: 72ch;
}

.parc{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(20px, 2.6vw, 40px);
}
.parc li{
  padding: 22px 0 24px;
  border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
}
.parc b{
  grid-row: span 2;
  font-family: var(--f-p); font-variant-numeric: tabular-nums;
  font-weight: 300; font-size: 30px; line-height: 1; color: var(--blanc);
}
.parc span{
  font-weight: 500; font-size: 15.5px; color: var(--blanc); line-height: 1.3;
}
.parc em{
  grid-column: 2; font-style: normal;
  font-size: 13.5px; line-height: 1.5; color: var(--arg-brosse); margin-top: 5px;
}

/* --------------------------------------------------------------------------
   11. Portfolio
   -------------------------------------------------------------------------- */
.filtres{
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filet);
}
.filtre{
  position: relative;
  padding: 4px 0 8px;
  background: none; border: 0;
  font-family: var(--f-c); font-size: 14.5px; letter-spacing: .02em;
  color: var(--arg-brosse); cursor: pointer;
  transition: color .2s ease;
}
.filtre::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--metal); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.filtre:hover{ color: var(--blanc); }
.filtre.is-on{ color: var(--blanc); }
.filtre.is-on::after{ transform: scaleX(1); }

/* --- M7 : la bande de photos, à l'horizontale ---------------------------- */
/* la lumière déborde jusqu'aux bords de l'écran : la section la retient,
   sinon la page gagnerait une barre de défilement horizontale */
#photos{ overflow: hidden; }

/* la marge du haut est la hauteur de ciel dans laquelle les faisceaux
   descendent avant d'atteindre les photos */
.galz{ position: relative; margin-top: clamp(62px, 8vw, 104px); }

/* le rail déborde des gouttières : la photo suivante est toujours amorcée */
.gal__rail{
  position: relative; z-index: 1;
  margin-inline: calc(var(--gout) * -1);
  padding: 0 var(--gout) 4px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gal__rail::-webkit-scrollbar{ display: none; }
.gal__rail:focus-visible{ outline: 1px solid var(--bord); outline-offset: 4px; }

.gal{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start;
  gap: clamp(10px, 1.5vw, 22px);
  width: max-content;
}
.gal__i{
  flex: 0 0 auto;
  width: min(78vw, 430px);
  scroll-snap-align: center;
}
@media (min-width: 760px){
  .gal__i{ width: min(46vw, 620px); }
}
.gal__i[hidden]{ display: none; }

/* la lumière qui balaie au-dessus de la bande. Elle passe DERRIÈRE les
   photos : le faisceau descend du ciel, et la photo l'arrête. */
.gal__lum{
  position: absolute; z-index: 0;
  /* pleine largeur d'écran : aucun bord de cadre ne doit se deviner */
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: clamp(-104px, -8vw, -62px); height: clamp(190px, 21vw, 300px);
  pointer-events: none; overflow: hidden;
  /* aucun bord franc en haut ni en bas : la brume naît et s'éteint */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
}

.gal__b{
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; cursor: zoom-in; line-height: 0;
}
.gal__b img{ width: 100%; height: 100%; object-fit: cover; }
.r169 .gal__b{ aspect-ratio: 16 / 9; }
.r32 .gal__b{ aspect-ratio: 3 / 2; }
.r45 .gal__b{ aspect-ratio: 4 / 5; }
.r11 .gal__b{ aspect-ratio: 1 / 1; }

.gal__vide{ margin-top: 30px; color: var(--arg-brosse); }

/* --------------------------------------------------------------------------
   12. Comment ça se passe — la seule numérotation du site
   -------------------------------------------------------------------------- */
.etapes{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}
.etapes li{
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--filet);
}
.etapes b{
  display: block;
  font-family: var(--f-p); font-variant-numeric: tabular-nums;
  font-weight: 300; font-size: clamp(34px, 3.6vw, 46px); line-height: 1;
  letter-spacing: .02em;
  color: var(--blanc);
  margin-bottom: 18px;
}
.etapes p{ font-size: 15.5px; }

/* --------------------------------------------------------------------------
   13. Témoignages
   -------------------------------------------------------------------------- */
/* Trois colonnes en dur au départ, et rien pour le téléphone : la section
   n'avait jamais été affichée. Réécrite le 03/11/2026, à l'ouverture des
   deux premiers avis. « grid-auto-flow: column » tient deux avis comme
   trois sans qu'on ait à retoucher la feuille. */
.avis{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
.avis figure{ margin: 0; padding: 0; }
.avis figure + figure{
  margin-top: clamp(26px, 3.2vw, 38px);
  padding-top: clamp(26px, 3.2vw, 38px);
  border-top: 1px solid var(--filet);
}
@media (min-width: 820px){
  .avis{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .avis figure{ padding: 0 clamp(22px, 3vw, 44px); }
  .avis figure:first-child{ padding-left: 0; }
  .avis figure:last-child{ padding-right: 0; }
  .avis figure + figure{
    margin-top: 0; padding-top: 0;
    border-top: 0; border-left: 1px solid var(--filet);
  }
}
.avis__lien{
  margin: clamp(30px, 3.6vw, 44px) 0 0;
  font-size: 14px; color: var(--texte-2);
}
/* Le lien Google et le badge Mariages.net, sur une ligne (06/11/2026).
   Sur téléphone, le badge passe dessous s'il manque de place. */
.avis__bas{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px clamp(24px, 3vw, 36px);
  margin: clamp(30px, 3.6vw, 44px) 0 0;
}
.avis__bas .avis__lien{ margin: 0; }

.avis blockquote{ margin: 0; }
.avis blockquote p{
  font-weight: 300;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  line-height: 1.6;
  color: var(--arg-poli);
}
.avis blockquote p::before{ content: "« "; color: var(--arg-ombre); }
.avis blockquote p::after{ content: " »"; color: var(--arg-ombre); }

.avis figcaption{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--filet);
  font-size: 14.5px; color: var(--blanc);
}
.avis figcaption span{ display: block; color: var(--arg-brosse); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq{ max-width: 880px; }
.faq__i{ border-top: 1px solid var(--filet); }
.faq__i:last-child{ border-bottom: 1px solid var(--filet); }
.faq h3{ margin: 0; font-size: inherit; font-weight: 400; }

.faq__q{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 0;
  background: none; border: 0; text-align: left;
  font-family: var(--f-c); font-size: clamp(16px, 1.4vw, 18px); font-weight: 400;
  line-height: 1.4; color: var(--blanc); cursor: pointer;
  transition: color .2s ease;
}
.faq__q:hover{ color: var(--arg-poli); }

.faq__x{
  position: relative; flex: 0 0 auto; width: 14px; height: 14px;
  transition: transform .32s ease;
}
.faq__x::before, .faq__x::after{
  content: ""; position: absolute; left: 0; top: 50%;
  width: 14px; height: 1px; background: var(--arg-poli);
}
.faq__x::after{ transform: rotate(90deg); }
.faq__i.is-open .faq__x{ transform: rotate(135deg); }

.faq__a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
}
.faq__i.is-open .faq__a{ grid-template-rows: 1fr; }
.faq__a > div{
  overflow: hidden; visibility: hidden;
  transition: visibility 0s .34s;
}
.faq__i.is-open .faq__a > div{ visibility: visible; transition-delay: 0s; }
.faq__a p{
  max-width: 68ch; padding-bottom: 26px;
  font-size: 15.5px; color: var(--arg-brosse);
}

/* --------------------------------------------------------------------------
   15. Formulaire de devis
   -------------------------------------------------------------------------- */
.dev__intro{ max-width: 60ch; margin-bottom: clamp(40px, 5vw, 64px); }
.dev{ max-width: 880px; }

.f2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 44px); }

/* p.fld:last-child : sinon « p:last-child » annule la marge du 2e champ
   d'une ligne, et sur mobile (une colonne) les champs se collent */
.fld, p.fld:last-child{ margin: 0 0 30px; }
.fld label{
  display: block; margin-bottom: 8px;
  font-size: 13.5px; letter-spacing: .03em; color: var(--arg-brosse);
}
.fld label i{ font-style: normal; color: var(--arg-poli); }

.fld input,
.fld select,
.fld textarea{
  width: 100%;
  padding: 11px 2px;
  background-color: transparent;
  background-image: linear-gradient(var(--arg-ombre), var(--arg-ombre));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border: 0; border-radius: 0;
  color: var(--blanc);
  font-family: var(--f-c); font-size: 16px; line-height: 1.4;
  transition: background-size .2s ease;
}
.fld textarea{ resize: vertical; min-height: 120px; }
.fld select{ appearance: none; -webkit-appearance: none; cursor: pointer; }
/* liste déroulante : sans couleurs explicites, Windows ouvre la liste sur un
   fond blanc avec le texte blanc des options, illisible sauf au survol */
.fld select{ background-color: var(--noir); }
/* couleurs écrites en dur (pas de variables) et color-scheme sur la liste
   elle-même : Windows ouvre alors la liste en sombre, texte blanc */
select{ color-scheme: dark; }
select option{ background-color: #000000; color: #FFFFFF; }
.fld select option[value=""]{ color: var(--arg-brosse); }
.fld input::placeholder,
.fld textarea::placeholder{ color: #8A8A8A; }

.fld input:focus,
.fld select:focus,
.fld textarea:focus{
  outline: none;
  background-image: var(--metal);
  background-size: 100% 1px;
}
.fld input:focus-visible,
.fld select:focus-visible,
.fld textarea:focus-visible{ outline: 1px solid var(--arg-poli); outline-offset: 4px; }

/* état d'erreur : sans couleur — le filet s'éclaircit et s'épaissit */
.fld.is-ko input,
.fld.is-ko select,
.fld.is-ko textarea{
  background-image: linear-gradient(var(--blanc), var(--blanc));
  background-size: 100% 2px;
}
.err{
  display: block; margin-top: 9px;
  font-size: 13.5px; line-height: 1.4; color: var(--blanc);
}
.err::before{ content: "— "; color: var(--arg-brosse); }

.sel{ position: relative; display: block; }
.sel::after{
  content: ""; position: absolute; right: 4px; top: 46%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--arg-brosse);
  border-bottom: 1px solid var(--arg-brosse);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.fset{ margin: 0 0 30px; padding: 0; border: 0; }
.fset legend{
  padding: 0; margin-bottom: 14px;
  font-size: 13.5px; letter-spacing: .03em; color: var(--arg-brosse);
}
.cks{ display: flex; flex-wrap: wrap; gap: 14px 32px; }
.ck{ display: inline-flex; align-items: center; cursor: pointer; }
.ck input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck span{ position: relative; padding-left: 27px; font-size: 15px; color: var(--arg-poli); }
.ck span::before{
  content: ""; position: absolute; left: 0; top: 3px;
  width: 15px; height: 15px; border: 1px solid var(--arg-ombre);
}
.ck input:checked + span{ color: var(--blanc); }
.ck input:checked + span::before{ background: var(--metal); border-color: transparent; }
.ck input:checked + span::after{
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--noir); border-bottom: 1.5px solid var(--noir);
  transform: rotate(-45deg);
}
.ck input:focus-visible + span::before{ outline: 1px solid var(--arg-poli); outline-offset: 3px; }

/* honeypot : hors écran, jamais display:none */
.hp{
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}

.form__end{
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px 30px;
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--filet);
}
.form__rgpd{ flex: 1 1 280px; font-size: 13px; line-height: 1.5; color: var(--arg-brosse); }

.form__ko{
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--arg-poli);
  font-size: 15px; color: var(--blanc);
}
.form__ko a{ text-decoration: underline; text-underline-offset: 3px; }

.merci{ max-width: 60ch; }
.merci h3{
  font-family: var(--f-t); font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse); font-size: clamp(23px, 3vw, 32px);
  letter-spacing: .085em; text-transform: uppercase; color: var(--blanc);
  margin-bottom: .6em;
}
.merci p{ font-size: 16.5px; }
.merci b{ color: var(--blanc); font-weight: 500; }
.merci a{ text-decoration: underline; text-underline-offset: 3px; }

/* bas de la page d'accueil : renvoi vers le formulaire unique (devis.html),
   avec le téléphone et l'email en liens directs */
.dev-court{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px); align-items: start;
  max-width: 980px;
}
@media (min-width: 900px){
  .dev-court{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.dev-court__texte .lead{ max-width: 52ch; margin-bottom: clamp(24px, 3vw, 34px); }
.dev-court__note{ margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--arg-poli); }
.dev-court__contact{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dev-court__contact li{
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 0; border-bottom: 1px solid var(--filet);
}
.dev-court__contact span{ font-size: 13.5px; color: var(--arg-brosse); }
.dev-court__contact a{ font-size: clamp(17px, 1.6vw, 20px); color: var(--blanc); }
.dev-court__contact a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.pied{
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(30px, 3.5vw, 46px);
  border-top: 1px solid var(--filet);
}
.pied__in{
  display: grid; grid-template-columns: auto repeat(3, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.pied__mk img{ width: 74px; height: 74px; object-fit: contain; opacity: .9; }
.pied__col h2{
  margin: 0 0 14px;
  font-family: var(--f-c); font-weight: 500; font-size: 14px;
  letter-spacing: .02em; color: var(--blanc);
}
.pied__col p{ font-size: 14.5px; line-height: 1.8; }
.pied__col a{ color: var(--arg-brosse); }
.pied__col a:hover{ color: var(--blanc); }

.pied__bas{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px;
  margin-top: clamp(46px, 5.5vw, 76px);
  padding-top: 22px;
  border-top: 1px solid var(--filet);
}
/* l'argent d'ombre ne passe pas le contraste sur du texte : réservé aux filets */
.pied__bas p{ margin: 0; font-size: 13px; color: var(--arg-brosse); }

/* --- Badge partenaire Mariages.net (06/11/2026) ---------------------------
   L'image est celle de Mariages.net, chargée depuis leurs serveurs : on ne
   la retouche pas (ni filtre, ni recadrage, c'est leur label). On la pose
   à sa taille d'origine, 154 × 45, et la largeur est fixée ici pour que
   rien ne bouge pendant qu'elle se charge. Le même habillage sert au pied
   de page et à la section des avis. */
.label-mn{ display: inline-block; flex: 0 0 auto; line-height: 0; }
.label-mn img{ width: 154px; height: 45px; max-width: none; }
.pied__col .pied__label{ margin: 0; line-height: 0; }

/* Le badge à la fin de la page Mariages, sous les boutons (06/11/2026) */
.mn-fin{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding-top: clamp(22px, 2.8vw, 30px);
  border-top: 1px solid var(--trait);
}
.mn-fin__t{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texte-2); }

/* --- page Mariages (06/11/2026) ------------------------------------------- */
/* sous les questions, le renvoi vers toutes celles de l'accueil */
.mar-toutes{ margin: clamp(22px, 2.8vw, 30px) 0 0; font-size: 14.5px; }
.mar-toutes a{ text-decoration: underline; text-underline-offset: 4px; }
/* la bande de lumière suit l'en-tête de la page, sans la grande marge
   qu'elle avait sous le titre de section de l'accueil */
.p-mariages .bande{ margin-top: 0; }

/* L'accueil, section « Le soir de votre mariage » en version courte : la
   ligne de l'offre étincelles (même habillage que dans le ruban), puis les
   deux boutons vers la page Mariages et vers les tarifs. */
.t-ruban__etinc.mar-court__offre{ margin: 0 0 clamp(20px, 2.6vw, 28px); }

/* --------------------------------------------------------------------------
   17. Lightbox — codée à la main
   -------------------------------------------------------------------------- */
.lb{
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(0, 0, 0, .96);
  opacity: 0;
  transition: opacity .26s ease;
}
.lb.is-on{ opacity: 1; }
.lb[hidden]{ display: none; }

/* M7 : l'ouverture en iris. La photo s'ouvre depuis l'endroit cliqué, comme
   le diaphragme d'un objectif. Les flèches et la croix n'attendent pas. */
.lb--iris .lb__f{
  clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%));
  transition: clip-path .52s cubic-bezier(.22,.7,.26,1);
}
.lb--iris.is-on .lb__f{ clip-path: circle(135% at var(--ix, 50%) var(--iy, 50%)); }

@media (prefers-reduced-motion: reduce){
  .lb--iris .lb__f, .lb--iris.is-on .lb__f{ clip-path: none; transition: none; }
}

.lb__f{ margin: 0; text-align: center; }
.lb__f img{
  max-width: min(94vw, 1500px); max-height: 82vh;
  width: auto; height: auto; margin-inline: auto;
}
.lb__f figcaption{
  margin-top: 18px; font-size: 14px; color: var(--arg-brosse);
  max-width: 70ch; margin-inline: auto;
}

.lb button{
  position: absolute; z-index: 2;
  background: transparent; border: 1px solid var(--arg-ombre);
  cursor: pointer;
  transition: border-color .2s ease;
}
.lb button:hover{ border-color: var(--arg-poli); }

.lb__x{ top: clamp(16px, 3vw, 30px); right: clamp(16px, 3vw, 30px); width: 46px; height: 46px; }
.lb__x span[aria-hidden]{ position: absolute; inset: 0; }
.lb__x span[aria-hidden]::before,
.lb__x span[aria-hidden]::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1px; background: var(--arg-poli);
  transform-origin: center;
}
.lb__x span[aria-hidden]::before{ transform: translate(-50%, -50%) rotate(45deg); }
.lb__x span[aria-hidden]::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.lb__p, .lb__n{ top: 50%; margin-top: -23px; width: 46px; height: 46px; }
.lb__p{ left: clamp(10px, 2.4vw, 30px); }
.lb__n{ right: clamp(10px, 2.4vw, 30px); }
.lb__p span[aria-hidden], .lb__n span[aria-hidden]{
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-left: 1px solid var(--arg-poli); border-bottom: 1px solid var(--arg-poli);
}
.lb__p span[aria-hidden]{ transform: translate(-40%, -50%) rotate(45deg); }
.lb__n span[aria-hidden]{ transform: translate(-60%, -50%) rotate(-135deg); }

/* --------------------------------------------------------------------------
   18. Mentions légales
   -------------------------------------------------------------------------- */
.page{ padding-top: clamp(130px, 15vw, 190px); padding-bottom: clamp(70px, 9vw, 120px); }
.page h1{
  font-family: var(--f-t); font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse); font-size: clamp(24px, 4vw, 40px);
  letter-spacing: .135em; text-transform: uppercase; color: var(--blanc);
  margin: 0 0 clamp(36px, 4.5vw, 58px); margin-right: -.135em;
}
.page h2{
  margin: clamp(38px, 4.5vw, 58px) 0 14px;
  padding-top: 22px; border-top: 1px solid var(--filet);
  font-family: var(--f-c); font-weight: 500; font-size: 17px; color: var(--blanc);
}
.page .prose{ max-width: 68ch; }
.page a{ text-decoration: underline; text-underline-offset: 3px; }
.todo{
  display: inline-block; padding: 1px 8px;
  border: 1px solid var(--arg-ombre); color: var(--arg-poli);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   19. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px){
  .parc{ grid-template-columns: repeat(2, 1fr); }
  .pied__in{ grid-template-columns: auto 1fr 1fr; }
  .pied__mk{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  /* les libellés du plan de feu deviendraient illisibles : la liste prend le relais */
  .plot__lab, .plot__lead{ display: none; }

  .col-5, .col-6, .col-off-1{ grid-column: 1 / -1; }

  .presta{ grid-template-columns: 1fr; }
  .presta__c{ padding: 0; }
  .presta__c + .presta__c{
    border-left: 0; border-top: 1px solid var(--filet);
    margin-top: 34px; padding-top: 34px;
  }

  .avis{ grid-template-columns: 1fr; }
  .avis figure{ padding: 0; }
  .avis figure + figure{
    border-left: 0; border-top: 1px solid var(--filet);
    margin-top: 34px; padding-top: 34px;
  }

  .etapes{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .burger{ display: block; }

  .menu{
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 4px;
    padding: 90px var(--gout) 40px;
    background: #000;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s ease, visibility 0s .34s;
    overflow-y: auto;
  }
  .menu.is-on{ transform: none; visibility: visible; transition-delay: 0s; }
  .menu a{
    width: 100%; padding: 18px 0;
    border-bottom: 1px solid var(--filet);
    font-size: 19px; color: var(--blanc);
  }
  .menu__cta{
    margin-top: 26px; width: auto; border: 1px solid var(--arg-ombre);
    padding: 15px 28px; font-size: 15px;
  }
  body.is-bloque{ overflow: hidden; }

  .f2{ grid-template-columns: 1fr; }

  .gal{ gap: 14px; }

  .etapes{ grid-template-columns: 1fr; gap: 0; }
  .etapes li{ padding: 26px 0 30px; }
  .etapes b{ margin-bottom: 12px; }

  .parc{ grid-template-columns: 1fr; }

  .pied__in{ grid-template-columns: 1fr 1fr; }

  .lb__p, .lb__n{ top: auto; bottom: 18px; margin-top: 0; }
  .lb__p{ left: 18px; }
  .lb__n{ right: 18px; }
  .lb__f img{ max-height: 70vh; }
}

@media (max-width: 460px){
  .pied__in{ grid-template-columns: 1fr; }
  .nav__word{ display: none; }
}

/* --------------------------------------------------------------------------
   20. prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* « Laisser un avis » sous les coordonnees du bloc devis */
.dev-court__avis{ margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--arg-brosse); }
.dev-court__avis a{ color: var(--arg-poli); text-decoration: underline; text-underline-offset: 3px; }
.dev-court__avis a:hover{ color: var(--blanc); }

/* ==========================================================================
   SYSTÈME DE DESIGN — couche ajoutée le 10/10/2026
   Brouillard qui dérive, bouton magnétique, garde-fou « réduire les
   animations ». Rien ici ne clignote : les pulsations les plus rapides
   durent plusieurs secondes (jamais plus de 3 changements par seconde).
   ========================================================================== */

/* Halos de brouillard : ils dérivent très lentement, sans jamais revenir
   brusquement à leur place (alternate). */
@media (prefers-reduced-motion: no-preference){
  .sec--halo-l::after{ animation: derive-a 54s ease-in-out infinite alternate; }
  .sec--halo-b::after{ animation: derive-b 67s ease-in-out infinite alternate; }
  .sec--halo-c::after{ animation: derive-c 61s ease-in-out infinite alternate; }
}
@keyframes derive-a{
  from{ transform: translate3d(0, 0, 0) scale(1); }
  to  { transform: translate3d(7%, 5%, 0) scale(1.1); }
}
@keyframes derive-b{
  from{ transform: translate3d(-50%, 0, 0) scale(1); }
  to  { transform: translate3d(-44%, -6%, 0) scale(1.12); }
}
@keyframes derive-c{
  from{ transform: translate3d(0, 0, 0) scale(1.06); }
  to  { transform: translate3d(-6%, 7%, 0) scale(1); }
}

/* Champs et images : même rayon que les cartes. */
input, select, textarea{ border-radius: var(--r-s); }
.photo img, .gal img{ border-radius: var(--r); }

/* GARDE-FOU — « réduire les animations » : plus d'intro, plus de dérive,
   plus de balayage. Il reste des fondus courts, rien qui se déplace. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    transition-property: opacity, color, background-color, border-color !important;
    scroll-behavior: auto !important;
  }
  .btn{ transform: none !important; }
}

/* --------------------------------------------------------------------------
   Apparitions au défilement et fondu entre les pages
   La classe « js-apparitions » n'est posée que par js/motion.js : sans
   JavaScript, aucun contenu n'est caché.
   -------------------------------------------------------------------------- */
.js-apparitions .ap{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.js-apparitions .ap.est-la{ opacity: 1; transform: none; will-change: auto; }

/* L'IRIS : deux volets de lumière qui se referment, un très court noir,
   puis la page suivante s'ouvre par un faisceau. 600 ms au total. */
.iris{
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none; opacity: 0;
}
.iris__l, .iris__r{
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: var(--fond);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.iris__l{ left: 0; transform: translateX(-101%); }
.iris__r{ right: 0; transform: translateX(101%); }
.iris.ferme{ opacity: 1; }
.iris.ferme .iris__l, .iris.ferme .iris__r{ transform: none; }
/* « pose » : les volets sont mis en place d'un coup, sans animation, pour
   reprendre la fermeture de la page précédente sans aucun à-coup */
.iris.pose .iris__l, .iris.pose .iris__r{ transition: none; }
/* à l'ouverture, les volets repartent sur les côtés */
.iris.ouvre{ opacity: 1; }
.iris.ouvre .iris__l{ transform: translateX(-101%); }
.iris.ouvre .iris__r{ transform: translateX(101%); }

@media (prefers-reduced-motion: reduce){
  .js-apparitions .ap{ opacity: 1; transform: none; }
  .iris{ display: none; }
}

/* Les View Transitions natives sont désactivées : « navigation: auto »
   rejetait une promesse à chaque ancre interne (« Transition was skipped »)
   et polluait la console. Le fondu est piloté par js/motion.js, et sera
   remplacé par l'iris de la phase 3. */

/* ==========================================================================
   ACCUEIL — aperçu des packs, réassurance, bandeau défilant, faisceaux
   ========================================================================== */

/* --- aperçu des trois packs --------------------------------------------- */
.apercu{ margin-top: clamp(40px, 5vw, 64px); }
.apercu__lancement{
  margin: 0 0 16px; padding: 11px 18px;
  border: 1px solid var(--accent-2);
  background: rgba(14, 14, 16, .6);
}
.apercu__lancement .t-ruban__l{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0;
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--arg-poli);
}
.apercu__lancement b{
  font-weight: 600;
  color: var(--accent);
}
.apercu__lancement i{ color: var(--arg-ombre); font-style: normal; }
.apercu__packs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px){ .apercu__packs{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.apercu__p{
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte);
  color: var(--arg-poli);
  transition: border-color .25s ease, transform .25s ease;
}
.apercu__p:hover{ border-color: var(--arg-ombre); transform: translateY(-2px); color: var(--arg-poli); }
.apercu__nom{ font-weight: 500; font-size: 16px; color: var(--blanc); }
.apercu__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-weight: 300;
  font-size: 28px; line-height: 1; color: var(--blanc);
}
.apercu__prix small{
  font-family: var(--f-c); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--arg-brosse); margin-right: 6px;
}
.apercu__l{ font-size: 13px; color: var(--arg-brosse); }
.apercu__cta{ margin: 18px 0 0; }

/* --- ligne de réassurance ------------------------------------------------ */
.rass{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 26px;
  list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0;
}
@media (min-width: 620px){ .rass{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px){ .rass{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rass li{ display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.45; color: var(--arg-brosse); }
.rass svg{ flex: 0 0 auto; width: 20px; height: 20px; color: var(--arg-poli); }

/* --- bandeau défilant ---------------------------------------------------- */
.defile{
  position: relative; overflow: hidden;
  padding: 16px 0;
  border-block: 1px solid var(--trait);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.defile__piste{ display: flex; width: max-content; animation: defile 38s linear infinite; }
.defile__g{ display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.defile span{
  font-size: clamp(12px, 1.3vw, 14px); letter-spacing: var(--t-caps);
  text-transform: uppercase; color: var(--arg-brosse); white-space: nowrap;
}
.defile i{ color: var(--arg-ombre); font-style: normal; }
@keyframes defile{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }

/* --- faisceaux et poursuite du hero -------------------------------------- */
.faisceaux{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.faisceaux__svg{ width: 100%; height: 100%; filter: blur(10px); mix-blend-mode: screen; }
.faisceau{
  transform-box: fill-box; transform-origin: top center;
  animation: pivote var(--d, 22s) ease-in-out infinite alternate;
}
.faisceau:nth-child(odd){ animation-delay: -4s; }
@keyframes pivote{
  from{ transform: rotate(calc(var(--r, 1) * -9deg)); }
  to  { transform: rotate(calc(var(--r, 1) * 9deg)); }
}
.poursuite{
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  pointer-events: none; will-change: transform;
  background: radial-gradient(circle at center,
    rgba(var(--halo), .10) 0%, rgba(var(--halo), .04) 38%, transparent 68%);
}
@media (prefers-reduced-motion: reduce){
  .faisceau{ animation: none; }
  .defile__piste{ animation: none; }
  .poursuite{ display: none; }
}

/* Titre porté par un chiffre : « 24 projecteurs, une régie, zéro location ».
   Le nombre est en Archivo, aligné sur la ligne de base du titre. */
.h2--chiffre b{
  font-family: var(--f-p);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 300;
  font-size: 1.5em; line-height: .9;
  color: var(--accent-2);
}

/* --------------------------------------------------------------------------
   Rythme : une section sur deux prend la surface Nuit. L'oeil sent le
   changement de partie sans avoir à lire le titre, et la page cesse d'être
   un empilement de blocs identiques sur un seul fond.
   -------------------------------------------------------------------------- */
main > .sec:nth-of-type(even){ background: var(--surface); }
/* le filet du haut ne sert plus quand le fond change déjà */
main > .sec:nth-of-type(even)::before,
main > .sec:nth-of-type(even) + .sec::before{ opacity: 0; }

/* ==========================================================================
   ACCUEIL, VERSION DU 11/10/2026
   Les repères du client : les cases d'orientation, les moments du mariage,
   la scène à essayer, l'aperçu des packs, le déroulé, la barre du bas.
   ========================================================================== */

/* --- hero : deux boutons et une ligne de réassurance --------------------- */
.hero__actions{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0 0 clamp(20px, 3vw, 30px);
}
.hero__rass{
  margin: 0; font-size: clamp(12px, 1.3vw, 13.5px); line-height: 1.6;
  letter-spacing: .04em; color: var(--texte-2);
}
.hero__lumiere{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* le mot éclairé : lisible même dans la pénombre */
.mot{ color: var(--accent-2); transition: color .6s ease, text-shadow .6s ease; }
.est-eclaire .mot, .mot.est-eclaire{
  color: var(--accent);
  text-shadow: 0 0 26px rgba(var(--halo), .35);
}

/* --- les trois cases d'orientation --------------------------------------- */
.sec--serre{ padding-block: clamp(56px, 7vw, 96px); }
.cases{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 820px){ .cases{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.case__a{
  display: block; height: 100%;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); overflow: hidden; color: var(--texte);
  transition: border-color .3s ease, transform .3s ease;
}
.case__a:hover{ border-color: var(--bord); transform: translateY(-2px); color: var(--texte); }
.case__photo{ display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.case__photo img{
  width: 100%; height: 100%; object-fit: cover;
  /* dans la pénombre tant que le faisceau ne s'est pas posé (scène M3) */
  filter: brightness(.42) saturate(.75);
  transition: filter .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.case__a:hover .case__photo img,
.case__a:focus-visible .case__photo img,
.case.est-eclaire .case__photo img{ filter: brightness(1) saturate(1); transform: scale(1.03); }
.case__corps{ display: block; padding: 20px 22px 24px; }
.case__titre{
  display: block; margin-bottom: 8px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.2; color: var(--accent);
}
.case__texte{ display: block; font-size: 14.5px; line-height: 1.6; color: var(--texte-2); }
.case__prix{
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 15px; color: var(--accent-2);
}

/* --- la bande de lumière du mariage --------------------------------------
   Pleine largeur, sans cadre et sans dessin : la salle passe du dîner au
   dernier morceau. Un seul mot posé dessus, en bas à gauche.
   -------------------------------------------------------------------------- */
.bande{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  margin-top: clamp(36px, 4.5vw, 58px);
  min-height: clamp(360px, 52vh, 520px);
  background: linear-gradient(180deg, var(--fond) 0%, #070B14 55%, var(--fond) 100%);
  border-block: 1px solid var(--trait);
}
.bande__lum{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ce qui est posé sur la lumière : un mot, la proposition, le bouton */
.bande__in{
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(30px, 5vw, 56px) var(--gout) clamp(26px, 4vw, 44px);
}
.bande__mot{
  margin: 0 0 10px;
  font-size: 12px; letter-spacing: var(--t-caps);
  text-transform: uppercase; color: var(--texte-2);
}
.bande__phrase{
  margin: 0 0 8px; max-width: 24ch;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(21px, 3vw, 34px); line-height: 1.15; color: var(--accent);
}
.bande__detail{
  margin: 0 0 clamp(20px, 2.6vw, 28px); max-width: 44ch;
  font-size: 14.5px; line-height: 1.6; color: var(--texte-2);
}
.bande__actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(18px, 2.4vw, 28px); margin: 0;
}
.bande__voir{
  font-size: 14px; color: var(--texte-2);
  border-bottom: 1px solid var(--trait); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.bande__voir:hover, .bande__voir:focus-visible{ color: var(--accent); border-bottom-color: var(--bord); }

/* --- ÉTINCELLES FROIDES OFFERTES (06/11/2026) ----------------------------
   L'offre est posée DANS la bande de lumière de la section mariage, entre
   la proposition et les boutons. Elle est encadrée d'un filet fin plutôt
   que d'un fond plein : la vraie lumière passe derrière, il ne faut pas la
   boucher.

   AUCUNE COULEUR. Le « scintillement » est un reflet plus clair qui balaie
   les lettres, obtenu en animant la position d'un dégradé découpé sur le
   texte. Pas de clignotement, pas de rose ni de doré : du blanc qui passe
   sur de l'argent. Durée longue (7 s) pour que ce soit un éclat, pas un
   gyrophare — et tout se fige sous prefers-reduced-motion, plus bas.
   -------------------------------------------------------------------------- */
/* LA BANDE MARIAGE SUR DEUX COLONNES (06/11/2026)
   William trouvait la section vide : un gros bloc de texte à gauche, et
   rien à droite. L'offre étincelles vient donc occuper la colonne de
   droite au lieu de s'empiler sous le texte. Sur téléphone, tout
   redescend en une colonne, dans l'ordre du HTML. */
@media (min-width: 980px){
  .bande__in{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .bande__mot, .bande__phrase, .bande__detail, .bande__actions{ grid-column: 1; }
  .bande__in .etinc-b{
    grid-column: 2; grid-row: 1 / span 4;
    margin: 0; align-self: center;
  }
}

.etinc-b{
  margin: clamp(22px, 2.8vw, 32px) 0 clamp(20px, 2.6vw, 28px);
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--trait);
  border-top-color: var(--bord);
  border-radius: var(--r);
  background: rgba(5, 8, 15, .55);
  backdrop-filter: blur(2px);
  max-width: 54ch;
}
/* Le titre reste du texte en ligne, PAS une boîte flex : sur deux lignes,
   un flex rejetterait le second éclat tout à droite du cadre, détaché du
   mot qu'il accompagne. En ligne, il suit le dernier mot. */
.etinc-b__t{ margin: 0 0 10px; }
.etinc-b__mot{
  display: inline;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.15; letter-spacing: .04em;
  text-transform: uppercase;
  /* le reflet qui balaie : trois arrêts, dont un blanc au milieu */
  background: linear-gradient(100deg,
    var(--accent-2) 0%, var(--accent-2) 38%,
    #FFFFFF 50%,
    var(--accent-2) 62%, var(--accent-2) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: ao-reflet 7s linear infinite;
}
.etinc-b__x{
  margin: 0 0 10px; max-width: 46ch;
  font-size: 14.5px; line-height: 1.6; color: var(--texte);
}
/* les deux photos qui montrent l'effet, côte à côte */
.etinc-b__p{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 12px;
}
.etinc-b__p img{
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; border-radius: var(--r-s);
  border: 1px solid var(--trait);
  filter: saturate(.78) contrast(1.04) brightness(.94);
}
.etinc-b__r{
  margin: 0; max-width: 46ch;
  font-size: 12.5px; line-height: 1.55; color: var(--texte-2);
}
@keyframes ao-reflet{
  from{ background-position: 150% 0; }
  to  { background-position: -150% 0; }
}

/* l'éclat SVG : il prend la couleur de son conteneur, jamais la sienne */
.etinc{
  width: 1em; height: 1em; flex: 0 0 auto;
  fill: currentColor; vertical-align: -.12em;
}
.etinc-b__e{
  display: inline-block; color: var(--accent-2);
  font-size: clamp(13px, 1.7vw, 17px);
  animation: ao-eclat 4.2s ease-in-out infinite;
}
.etinc-b__e:first-child{ margin-right: 10px; }
.etinc-b__e:last-child{ margin-left: 10px; animation-delay: 2.1s; }
@keyframes ao-eclat{
  0%, 100%{ opacity: .45; transform: scale(.88); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

/* Le mouvement s'arrête, l'offre reste lisible : le texte reprend une
   couleur pleine, sinon « color: transparent » le ferait disparaître. */
/* --- TÉLÉPHONE : PLUS DE LUMIÈRE D'ARRIÈRE-PLAN -------------------------
   Sur 375 px, ces faisceaux ne sont plus des faisceaux : ce sont de
   grosses taches floues qui passent derrière le texte et le rendent
   pénible à lire. js/scenes.js ne les anime même plus à cette largeur ;
   ici on cache les canevas et les halos qui restaient.
   Le DESSIN de la scène n'est pas concerné : il garde sa lumière.
   -------------------------------------------------------------------------- */
@media (max-width: 760px){
  .bande__lum, .gal__lum{ display: none; }
  .sec--halo-l::after, .sec--halo-b::after, .sec--halo-c::after{ display: none; }
  /* la bande garde son dégradé de fond, qui lui suffit */
  .bande{ min-height: 0; }
}

@media (prefers-reduced-motion: reduce){
  .etinc-b__mot{
    animation: none;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: var(--accent);
  }
  .etinc-b__e{ animation: none; opacity: 1; transform: none; }
}

/* --- les cinq moments du mariage (frise retirée le 11/10/2026, gardée) --- */
.moments{ margin: clamp(32px, 4vw, 52px) 0 clamp(30px, 4vw, 46px); }
.moments__note{
  margin: 0 var(--gout) 16px; font-size: 12px; letter-spacing: var(--t-caps);
  text-transform: uppercase; color: var(--texte-2);
}
.moments__in{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 44px);
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gout);
}
@media (min-width: 900px){
  .moments__in{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}
.moments__scene{
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); padding: 18px;
}
.moments__liste{ list-style: none; margin: 0; padding: 0; }
.moment{
  padding: 16px 0 16px 18px;
  border-left: 1px solid var(--trait);
  transition: border-color .4s ease;
}
.moment[aria-current="true"]{ border-left-color: var(--accent-2); }
.moment__h{
  margin: 0 0 4px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 13px; letter-spacing: .1em; color: var(--texte-2);
}
.moment__t{
  margin: 0 0 6px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.2; color: var(--accent);
}
.moment__x{ margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-2); max-width: 46ch; }
.mariages__diner{
  max-width: 62ch; margin: 0 0 clamp(22px, 3vw, 30px);
  font-size: 15px; line-height: 1.65; color: var(--texte-2);
}

/* --- quatre arguments numérotés (événements d'entreprise) ----------------
   Première version (03/11/2026) : quatre cartes grises identiques, comme
   partout ailleurs sur la page. William : « c'est chiant, ça donne pas du
   tout envie de lire ». Il avait raison — quatre blocs de même taille, de
   même ton et de même densité, ça se saute.

   Deuxième version : plus de boîtes. Des numéros en Glace, des filets fins,
   deux colonnes sur grand écran. La section entière est posée sur un fond
   un peu plus clair (« .sec--nuit », plus bas) : c'est le seul endroit du
   site où la nuance change, et ça suffit à faire exister la section sans
   sortir de la palette.
   -------------------------------------------------------------------------- */
/* REFAITE LE 07/11/2026, SANS PHOTO (William a renoncé aux photos de
   banque). Deux colonnes sur grand écran : la promesse, les types
   d'événements et les boutons à gauche ; les quatre arguments à droite, en
   cartes de verre fumé avec leur pictogramme champagne, comme « Mon
   matériel ». Derrière, une barre de projecteurs balaie lentement le fond
   (.ent__lum, js/scenes.js), sur grand écran seulement. */
#entreprises{ isolation: isolate; }
.ent__lum{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 95%);
  opacity: .7;
}
@media (max-width: 760px){ .ent__lum{ display: none; } }
.ent__grille{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px); align-items: start;
}
@media (min-width: 1000px){
  .ent__grille{ grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .ent__intro{ position: sticky; top: 112px; }
}
.ent__intro .lead{ max-width: 40ch; }
/* le titre tient dans sa colonne : « d'entreprise », en gras, est long */
.ent__intro .h2{ font-size: clamp(30px, 3.3vw, 44px); }
@media (max-width: 999px){ .ent__intro .h2{ font-size: clamp(30px, 6vw, 52px); } }
.ent__types{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 clamp(26px, 3.2vw, 36px); padding: 0;
}
.ent__types li{
  padding: 7px 14px;
  border: 1px solid rgba(169, 200, 232, .2); border-radius: 999px;
  background: rgba(12, 20, 36, .5);
  font-size: 13px; color: var(--texte);
}
.ent{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 640px){ .ent{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ent li{
  position: relative;
  padding: 24px 22px 26px;
  border: 1px solid rgba(169, 200, 232, .14);
  border-top-color: rgba(210, 184, 138, .34);
  border-radius: var(--r);
  background: rgba(8, 13, 24, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover){
  .ent li:hover{ border-color: rgba(210, 184, 138, .5); transform: translateY(-3px); }
}
.ent__ico{
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border: 1px solid rgba(210, 184, 138, .45); border-radius: 50%;
  color: var(--or);
}
.ent__ico svg{ width: 23px; height: 23px; }
.ent__n{
  position: absolute; right: 22px; top: 26px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 13px; letter-spacing: .12em; color: var(--or); opacity: .8;
}
.ent h3{
  margin: 0 0 8px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.22; color: var(--accent);
}
.ent p{ margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texte-2); }
.ent__a{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(18px, 2.4vw, 28px); margin: 0;
}
@media (prefers-reduced-motion: reduce){ .ent li{ transition: none; } }

/* --- fond d'une nuance plus claire ---------------------------------------
   La seule section du site traitée ainsi. Même palette : Abysse qui
   s'éclaircit vers Nuit au milieu, et un souffle de Glace en haut. Le filet
   de séparation de « .sec » reste visible par-dessus.

   Écrit « main > .sec.sec--nuit » et pas « .sec--nuit » seul : la règle
   d'alternance « main > .sec:nth-of-type(even) », plus haut, est plus
   spécifique. Sans ça, le jour où une section serait ajoutée au-dessus,
   celle-ci redeviendrait grise sans prévenir.
   -------------------------------------------------------------------------- */
main > .sec.sec--nuit{
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(var(--halo), .06) 0%, transparent 60%),
    linear-gradient(180deg, var(--fond) 0%, #0A1220 46%, #080E1A 100%);
}

/* --- petit titre au-dessus d'un h2 --------------------------------------- */
.sur{
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: var(--t-caps);
  text-transform: uppercase; color: var(--texte-2);
}

/* --- images d'illustration -----------------------------------------------
   ATTENTION, RÈGLE DU SITE : « .illus » n'est PAS la galerie. Ce sont des
   images de banque qui montrent un type de soirée, dans une section qui
   parle de ce type de soirée, sans légende et sans ville. Les photos de
   vraies prestations vont uniquement dans « .gal », avec leur légende
   « type · ville · mois ». Ne jamais mélanger les deux : une image de
   banque légendée comme une prestation, c'est un mensonge au client.

   Le filtre et le voile du bas ne sont pas de la décoration : ils ramènent
   une photo quelconque dans le noir et argenté du site, pour qu'elle ne
   jure pas à côté des vraies.
   -------------------------------------------------------------------------- */
.illus{
  position: relative; margin: clamp(30px, 4vw, 48px) 0 0; overflow: hidden;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface);
}
.illus img{
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16 / 9;
  filter: saturate(.8) contrast(1.04) brightness(.92);
}
.illus::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(5, 8, 15, .5) 100%);
}
@media (min-width: 760px){ .illus--large img{ aspect-ratio: 21 / 9; } }

/* --- deux blocs côte à côte (soirées) ------------------------------------ */
.duo{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 820px){ .duo{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.duo__b{
  padding: 0 0 24px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.duo__photo{ display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 20px; }
.duo__photo img{
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.55) saturate(.8);
  transition: filter .7s cubic-bezier(.2,.7,.3,1);
}
.duo__b:hover .duo__photo img, .duo__b.est-eclaire .duo__photo img{ filter: brightness(1) saturate(1); }
.duo__b h3{
  margin: 0 22px 10px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(18px, 2vw, 22px); line-height: 1.2; color: var(--accent);
}
.duo__b p{ margin: 0 22px 16px; font-size: 15px; line-height: 1.65; color: var(--texte-2); }
.duo__b p:last-child{ margin-bottom: 0; }

/* --- la scène à essayer et sa régie -------------------------------------- */
.scene{
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); padding: clamp(16px, 2.4vw, 28px);
}
.scene__svg{ display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; color: var(--accent-2); }
.scene__svg *{ vector-effect: non-scaling-stroke; }

/* LA DIRECTION DU DESSIN (refaite le 11/10/2026)
   Des objets pleins et sombres, cerclés d'un filet clair : ce qui est devant
   masque ce qui est derrière, et la scène se lit d'un coup d'œil. Deux
   épaisseurs seulement, plus les lentilles allumées. Voir l'en-tête de
   js/scene.js pour les trois règles. */
/* les teintes des lentilles : deux couleurs franches plus la glace du
   site, jamais davantage. Elles alternent régulièrement le long des barres. */
.scene__svg{ --l-blanc: #F3F6FA; --l-glace: #A9C8E8; --l-bleu: #6E9FE0; }

.scene__faisceaux{ stroke: none; }
.scene__traits{
  fill: var(--fond);
  stroke: currentColor; stroke-width: 1.1; stroke-opacity: .62;
  stroke-linejoin: round; stroke-linecap: round;
}
/* le détail à l'intérieur d'un objet : plus fin, jamais rempli */
.scene__traits .d{ fill: none; stroke-width: .7; stroke-opacity: .34; }
/* un câble : le trait le plus fin du dessin, celui qu'on remarque à peine */
.scene__traits .f{ fill: none; stroke-width: .55; stroke-opacity: .3; }
.scene__traits .sol{ stroke-opacity: .5; stroke-width: 1; }
/* une lentille allumée : pleine lumière, sans contour */
.scene__traits .l{ fill: var(--l-glace); stroke: none; }
.scene__traits .l--blanc{ fill: var(--l-blanc); }
.scene__traits .l--bleu{ fill: var(--l-bleu); }
.scene__traits .l--glace{ fill: var(--l-glace); }
/* la marque des enceintes, en tout petit */
.scene__traits .m{
  fill: currentColor; fill-opacity: .5; stroke: none;
  font-family: var(--f-p); font-size: 4.4px; font-weight: 500; letter-spacing: .5px;
}
.scene__voiles{ fill: none; stroke: currentColor; stroke-width: 1; stroke-opacity: .55; }

/* La fumée : trois bouffées qui sortent de la buse, montent et se
   dissipent. Elles n'envahissent rien — c'est juste ce qu'il faut pour
   qu'on reconnaisse une machine à brouillard. Sur « transform » et
   « fill-opacity » seulement, donc sans coût pour la page. */
.scene__voiles .fum{
  stroke: none; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: ao-fumee 7.2s linear infinite;
}
.scene__voiles .fum--1{ animation-delay: 2.4s; }
.scene__voiles .fum--2{ animation-delay: 4.8s; }
@keyframes ao-fumee{
  0%   { opacity: 0;   transform: translate(0, 0) scale(.35); }
  16%  { opacity: 1; }
  65%  { opacity: .45; }
  100% { opacity: 0;   transform: translate(-8px, -21px) scale(2.8); }
}
@media (prefers-reduced-motion: reduce){
  .scene__voiles .fum{ animation: none; opacity: .7; }
  .scene__voiles .fum--1{ opacity: .45; transform: translate(-3px, -9px) scale(1.7); }
  .scene__voiles .fum--2{ opacity: .22; transform: translate(-6px, -16px) scale(2.4); }
}

/* le laser : la boîte est un objet comme les autres, le rayon est un fil */
.scene__voiles .boite{ fill: var(--fond); stroke: currentColor; stroke-width: 1.1; stroke-opacity: .62; }
.scene__voiles .boite .l{ stroke: none; }
.scene__voiles .ray line{ stroke-width: .65; stroke-opacity: 1; }

.scene__note{ margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--texte-2); }

/* La vraie photo de la scène montée. Elle prend EXACTEMENT la place du
   dessin : même cadre, même fond, même padding, et l'image est bornée aux
   mêmes 760 px que « .scene__svg ». La photo est recadrée au format du
   viewBox du dessin de l'accueil (210 × 150, soit 1,4:1 — le 306 × 150 est
   celui de la page Tarifs), donc les deux vues ont la même hauteur et rien
   ne saute quand on bascule de l'une à l'autre. */
.scene__vrai{
  margin: 0;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); padding: clamp(16px, 2.4vw, 28px);
}
.scene__vrai img{
  width: 100%; max-width: 760px; height: auto;
  margin-inline: auto; border-radius: 6px;
}

/* --- la bascule schéma / photo -------------------------------------------
   Une pastille à deux positions. La vue active prend le blanc de la
   palette : sur ce site, ce qui est allumé est blanc.
   -------------------------------------------------------------------------- */
.bascule{
  display: inline-flex; gap: 2px;
  margin: 0 0 clamp(18px, 2.2vw, 26px); padding: 3px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--surface);
}
.bascule__b{
  appearance: none; -webkit-appearance: none;
  border: 0; cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  background: transparent; color: var(--texte-2);
  font-family: var(--f-c); font-size: 12px; font-weight: 500;
  letter-spacing: var(--t-caps); text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.bascule__b:hover{ color: var(--accent); }
.bascule__b.est-on{ background: var(--accent); color: var(--fond); }
@media (prefers-reduced-motion: reduce){ .bascule__b{ transition: none; } }

/* --- galerie : légendes --------------------------------------------------- */
.gal__leg{
  display: block; padding: 10px 2px 0;
  font-size: 13px; line-height: 1.5; color: var(--texte-2); text-align: left;
}

/* --- aperçu des packs ----------------------------------------------------- */
.apercu__packs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 820px){ .apercu__packs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.apercu__p{
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px 22px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--texte-2);
  transition: border-color .25s ease, transform .25s ease;
}
.apercu__p:hover{ border-color: var(--bord); transform: translateY(-2px); color: var(--texte-2); }
.apercu__nom{
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.2; color: var(--accent);
}
.apercu__prix{
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums; font-weight: 300;
  font-size: 30px; line-height: 1.15; color: var(--accent);
}
.apercu__euro{ font-size: .5em; font-weight: 400; color: var(--texte-2); }
.apercu__avant{ font-size: 12.5px; color: var(--texte-2); }
.apercu__l{ font-size: 13px; color: var(--accent-2); }
.apercu__pour{ margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--texte-2); }
.apercu__cta{ margin: 20px 0 0; }

/* --- Ruban de l'offre en cours -------------------------------------------
   Sur l'accueil (section des packs) et sur la page Tarifs. Il était dans
   css/tarifs.css, que l'accueil ne charge pas : jusqu'au 06/11/2026, le
   ruban de l'accueil n'avait donc ni cadre, ni marge, et affichait la
   phrase longue ET la phrase courte collées l'une à l'autre.

   Fin, liseré Glace. Il reste à la taille du texte : l'élément le plus
   gros de la page doit rester le PRIX. Seule exception, la ligne des
   étincelles, un cran plus grande et en gras (demande de William).
   -------------------------------------------------------------------------- */
.t-ruban{
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding: 12px 20px;
  border: 1px solid var(--accent-2);
  border-radius: 0;
  background: rgba(14, 14, 16, .6);
}
.t-ruban__l{
  margin: 0;
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--arg-poli);
}
/* la phrase longue sur grand écran, la courte sous 560 px : une seule à la fois */
.t-ruban__court{ display: none; }
@media (max-width: 559px){
  .t-ruban{ padding: 11px 16px; }
  .t-ruban__long{ display: none; }
  .t-ruban__court{ display: inline; }
}
/* La ligne des étincelles : un cran plus grande, le cœur en gras et en
   blanc. Du texte en ligne, PAS une boîte flex : sur téléphone, un flex
   laissait l'éclat seul sur sa ligne, détaché du mot qu'il accompagne. */
.t-ruban__etinc{
  margin: 7px 0 0;
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.4; color: var(--texte-2);
}
.t-ruban__etinc b{ font-weight: 600; color: var(--accent); }
.t-ruban__e{
  display: inline-block; margin-right: 8px; vertical-align: -.05em;
  color: var(--accent-2); font-size: .9em; line-height: 1;
  animation: ao-eclat 4.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .t-ruban__e{ animation: none; opacity: 1; transform: none; } }
.t-ruban__note{
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--arg-brosse); max-width: 72ch;
}

/* les dates de lancement, en points lumineux */
.points{ display: inline-flex; gap: 5px; align-items: center; }
.points .point{
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--trait);
}
.points .point.est-on{ background: var(--accent); box-shadow: 0 0 8px rgba(var(--halo), .7); }

/* --- qui je suis ----------------------------------------------------------
   Le portrait à gauche, l'histoire à droite, puis deux blocs en dessous :
   le matériel et la playlist. Le portrait réutilise « .passe__portrait » et
   la silhouette de secours « .passe__silhouette » : c'est le même mécanisme
   qu'avant, simplement déplacé du bas de la page vers cette section.
   -------------------------------------------------------------------------- */
.moi{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.6vw, 48px); }
@media (min-width: 900px){
  .moi{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
}
.moi__p{ position: sticky; top: 108px; }
@media (max-width: 899px){ .moi__p{ position: static; } }
.moi__t > p{ font-size: 15.5px; line-height: 1.72; color: var(--texte-2); max-width: 58ch; }
/* écrit « .moi__t > .moi__fort » et pas « .moi__fort » seul : la règle
   au-dessus est plus spécifique, et l'emporterait.
   07/11/2026 : plus en Unbounded large, qui faisait un bloc « en gras ».
   Un texte léger, un cran au-dessus du reste ; seul le prénom ressort, en
   champagne. */
.moi__t > .moi__fort{
  font-family: var(--f-c); font-weight: 300;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5; color: var(--texte);
  max-width: 40ch; margin-bottom: 1.2em;
}
.moi__nom{ color: var(--or); font-weight: 400; }
/* la signature sous le texte, comme au bas d'une lettre */
.moi__t > .moi__sign{
  display: flex; align-items: center; gap: 14px;
  margin: 1.8em 0 0;
  font-family: var(--f-t); font-weight: 300;
  font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or);
}
.moi__sign::before{ content: ""; width: 38px; height: 1px; background: currentColor; opacity: .8; }
.moi__sign span{ color: var(--texte-2); letter-spacing: .14em; }
/* le portrait, avec un filet champagne décalé derrière : un cadre de
   galerie, pas une bordure de plus */
.moi__p .passe__portrait{ position: relative; isolation: isolate; }
.moi__p .passe__portrait::before{
  content: ""; position: absolute; z-index: -1;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--or); border-radius: var(--r); opacity: .4;
}
@media (max-width: 899px){
  .moi__p{ max-width: 460px; margin-right: 16px; }
}

/* --- mon matériel -----------------------------------------------------------
   Première version : deux pavés de texte côte à côte. William : « c'est un
   gros pavé ». Une ligne par famille d'appareils, le quoi en gras et le
   pourquoi derrière, se lit en cinq secondes.

   HABILLÉ LE 07/11/2026 (« visuellement, c'est moche ») : un panneau posé
   sur la vraie photo de la scène montée, assombrie du côté du texte, et
   quatre cartes de verre fumé, chacune avec son pictogramme champagne.
   Sur téléphone, la photo s'affiche en haut du panneau et le texte passe
   dessous.
   -------------------------------------------------------------------------- */
.mat{
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(44px, 5.6vw, 76px);
  padding: clamp(28px, 4.4vw, 60px);
  border: 1px solid var(--trait);
  border-radius: calc(var(--r) + 6px);
  background: var(--fond);
}
.mat__fond{ position: absolute; inset: 0; z-index: -1; }
.mat__fond img{
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%;
  opacity: .8; filter: saturate(1.05) brightness(1.1);
}
.mat__fond::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--fond) 0%, rgba(5, 8, 15, .9) 30%, rgba(5, 8, 15, .45) 62%, rgba(5, 8, 15, .2) 100%),
    linear-gradient(0deg, rgba(5, 8, 15, .88) 0%, rgba(5, 8, 15, 0) 50%);
}
.mat__tete{ max-width: 48ch; margin-bottom: clamp(30px, 4vw, 52px); }
.mat__tete .sur{ margin-bottom: 14px; }
.mat__t{
  margin: 0 0 12px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; color: var(--accent);
}
.mat__x{ margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--texte); max-width: 46ch; }
.mat__l{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
@media (min-width: 700px){ .mat__l{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px){ .mat__l{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mat__l li{
  padding: 22px 20px 24px;
  border: 1px solid rgba(169, 200, 232, .14);
  border-top-color: rgba(210, 184, 138, .34);
  border-radius: var(--r);
  background: rgba(7, 11, 20, .66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14.5px; line-height: 1.6; color: var(--texte-2);
  transition: border-color .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover){
  .mat__l li:hover{ border-color: rgba(210, 184, 138, .5); transform: translateY(-3px); }
}
.mat__ico{
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border: 1px solid rgba(210, 184, 138, .45); border-radius: 50%;
  color: var(--or);
}
.mat__ico svg{ width: 24px; height: 24px; }
.mat__l b{ display: block; margin-bottom: 6px; font-weight: 500; color: var(--texte); }
@media (max-width: 699px){
  .mat{ padding-top: 200px; }
  .mat__fond img{ object-position: 60% 30%; opacity: .75; }
  .mat__fond::after{
    background: linear-gradient(180deg, rgba(5, 8, 15, .15) 0%, rgba(5, 8, 15, .75) 160px, var(--fond) 300px);
  }
}
@media (prefers-reduced-motion: reduce){ .mat__l li{ transition: none; } }

/* --- les trois playlists d'exemple ---------------------------------------
   Des titres, pas un lecteur : un embed Spotify ou Deezer déposerait des
   cookies et donnerait l'IP du visiteur à un tiers, ce que les mentions
   légales promettent de ne pas faire.
   Les numéros sont en Archivo, comme tous les chiffres du site.
   -------------------------------------------------------------------------- */
.pl{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  margin: clamp(26px, 3.4vw, 40px) 0 clamp(22px, 2.8vw, 30px);
}
@media (min-width: 780px){ .pl{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); } }
.pl__c{
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--trait); border-top: 1px solid var(--bord);
  border-radius: var(--r); background: var(--surface);
}
/* La liste pousse, donc « … et les vôtres » reste collé en bas de la carte.
   Les trois colonnes peuvent ainsi ne pas avoir le même nombre de titres
   sans que ça se voie : c'est utile le jour où l'une en gagne ou en perd. */
.pl__c ol{ flex: 1 1 auto; }
.pl__c h3{
  margin: 0 0 16px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.25; color: var(--accent);
}
/* « Anniversaire et soirée privée » tient sur deux lignes, les deux autres
   sur une : sans ça, les trois listes ne démarrent pas à la même hauteur. */
@media (min-width: 780px){ .pl__c h3{ min-height: 2.5em; } }
.pl__c ol{ list-style: none; margin: 0; padding: 0; counter-reset: piste; }
.pl__c li{
  position: relative; padding: 0 0 11px 28px; counter-increment: piste;
}
.pl__c li:last-child{ padding-bottom: 0; }
.pl__c li::before{
  content: counter(piste, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 11px; color: var(--texte-2);
}
.pl__c li b{ display: block; font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--texte); }
.pl__c li span{ display: block; font-size: 12.5px; line-height: 1.4; color: var(--texte-2); }
.pl__fin{
  margin: 16px 0 0; padding-top: 13px;
  border-top: 1px solid var(--trait);
  font-size: 13px; color: var(--accent-2);
}
/* La ligne qui cadre la lecture AVANT les trois colonnes, et celle qui la
   referme après. Sans elles, le visiteur comprend « il passe toujours la
   même chose » : exactement l'inverse de ce qu'on vend. */
.pl__avant{
  margin: clamp(22px, 2.8vw, 30px) 0 0;
  font-size: 14.5px; line-height: 1.65; color: var(--texte-2); max-width: 64ch;
}
.pl__note{ margin: 0; font-size: 14px; line-height: 1.65; color: var(--texte-2); max-width: 64ch; }
.pl__note b{ font-weight: 500; color: var(--texte); }

/* --- comment ça se passe --------------------------------------------------- */
.passe{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); }
@media (min-width: 900px){ .passe{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.passe__portrait{ margin: 0 0 18px; }
.passe__portrait img{ width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--trait); }
.passe__silhouette{
  margin: 0 0 18px; padding: 10px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--surface); color: var(--accent-2);
}
.silh{ display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.silh *{ vector-effect: non-scaling-stroke; }
.passe__texte{ margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--texte); max-width: 44ch; }
.passe__etapes{ list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.passe__etapes li{
  position: relative; padding: 0 0 26px 46px; counter-increment: etape;
}
.passe__etapes li::before{
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-2);
  display: grid; place-items: center;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 14px; color: var(--accent-2);
}
.passe__etapes li::after{
  content: ""; position: absolute; left: 15px; top: 36px; bottom: 6px;
  width: 1px; background: var(--trait);
}
.passe__etapes li:last-child{ padding-bottom: 0; }
.passe__etapes li:last-child::after{ display: none; }
.passe__etapes h3{ margin: 4px 0 6px; font-size: 16.5px; color: var(--accent); }
.passe__etapes p{ margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texte-2); max-width: 52ch; }

/* Depuis le 03/11/2026 la section n'a plus de colonne de gauche : les trois
   étapes se mettent côte à côte sur grand écran, et le filet qui les relie
   passe de la verticale à l'horizontale. */
@media (min-width: 900px){
  .passe__etapes--trois{
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 3.2vw, 48px);
  }
  .passe__etapes--trois li{ padding: 48px 0 0; }
  .passe__etapes--trois li::before{ top: 0; left: 0; }
  .passe__etapes--trois li::after{
    left: 42px; right: 0; top: 15px; bottom: auto;
    width: auto; height: 1px;
  }
  .passe__etapes--trois p{ max-width: 42ch; }
}

/* --- fin de page ----------------------------------------------------------- */
.sec--fin{ padding-bottom: clamp(100px, 12vw, 160px); }
.t-fin__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 0 0 22px; }
.t-fin__tel{
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 16px; color: var(--accent-2);
}
.t-fin__tel:hover{ color: var(--accent); }
.t-fin__avis{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--texte-2); }
.t-fin__avis a{ text-decoration: underline; text-underline-offset: 3px; }
.t-fin__avis small{ display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--bord); }

/* --- barre fixe du bas, sur téléphone -------------------------------------- */
.barre-bas{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: 10px;
  padding: 10px var(--gout) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 8, 15, .92);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.barre-bas.est-la{ transform: none; }
.barre-bas__devis{ flex: 1 1 auto; }
.barre-bas__tel{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--bord); border-radius: var(--r-s);
  color: var(--accent);
}
.barre-bas__tel svg{ width: 22px; height: 22px; }
@media (max-width: 860px){
  .barre-bas{ display: flex; }
  body.p-devis .barre-bas{ display: none; }
  /* La barre couvre le bas de l'écran : le pied de page garde sa hauteur
     en plus (environ 74 px, plus la zone du geste de l'iPhone), sinon la
     dernière ligne resterait cachée dessous. La classe est posée par
     js/main.js, seulement sur les pages qui ont la barre. */
  .a-barre-bas .pied{
    padding-bottom: calc(clamp(30px, 3.5vw, 46px) + 78px + env(safe-area-inset-bottom));
  }
}

/* le téléphone au bas du menu plein écran, sur téléphone */
.menu__tel{ display: none; }
@media (max-width: 860px){
  .menu__tel{
    display: block; margin: 26px 0 0; padding-top: 22px;
    border-top: 1px solid var(--trait);
    font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
    font-size: 20px; text-align: center;
  }
  .menu__tel a{ color: var(--accent); }
}

/* ==========================================================================
   LE MOTEUR DE LUMIÈRE — les canevas et l'arrivée
   Le canevas est toujours DERRIÈRE le texte et ne reçoit jamais le clic :
   un prix, un bouton ou un numéro restent lisibles et cliquables, quoi
   qu'il se passe dans la lumière.
   ========================================================================== */
.lum{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* le canevas s'ajoute à ce qu'il y a dessous, comme une vraie lumière */
  mix-blend-mode: screen;
}
.hero__in, .moments__liste, .scene__svg{ position: relative; z-index: 1; }
.moments__scene, .scene{ position: relative; overflow: hidden; }
.scene--vivante .scene__svg{ position: relative; z-index: 1; }

/* --- M1, l'arrivée -------------------------------------------------------- */
.arrivee{
  position: fixed; inset: 0; z-index: 500;
  background: var(--fond);
  pointer-events: none;
  transition: opacity .4s ease;
}
.arrivee.part{ opacity: 0; }
/* pendant l'arrivée, le hero attend son faisceau. Le titre reste lisible :
   il est seulement en retrait, jamais invisible. */
.est-arrivee .hero__sub,
.est-arrivee .hero__actions,
.est-arrivee .hero__rass{ opacity: 0; transition: opacity .5s ease; }
.hero__sub.est-la, .hero__actions.est-la, .hero__rass.est-la{ opacity: 1; }
.est-arrivee .hero__cri{ color: var(--texte-2); }
.hero__cri{ transition: color .7s ease; }
.hero__cri.est-eclaire{ color: var(--accent); }

/* le moment en cours, dans la liste des cinq */
.moment.est-la .moment__t{ color: var(--accent); }
.moment.est-la .moment__x{ color: var(--texte); }

@media (prefers-reduced-motion: reduce){
  .arrivee{ display: none; }
  .est-arrivee .hero__sub,
  .est-arrivee .hero__actions,
  .est-arrivee .hero__rass{ opacity: 1; }
}

/* --- M3, M5 : les blocs sortent de la pénombre quand la lumière arrive --- */
/* sous .js seulement : sans JavaScript, personne ne vient les allumer */
.js .gal__i img{
  filter: brightness(.5) saturate(.8);
  transition: filter .8s cubic-bezier(.2,.7,.3,1);
}
.js .gal__i.est-eclaire img,
.gal__b:hover img, .gal__b:focus-visible img{ filter: none; }

/* M7 : la photo au centre du rail est la seule en pleine lumière, les
   voisines restent visibles mais en retrait. */
.gal__i{ transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.js .galz--vivante .gal__i.est-centre img{ filter: brightness(1.04); }
.js .galz--vivante .gal__i.est-centre{ transform: translateY(-4px); }
.js .galz--vivante .gal__i:not(.est-centre) img{ filter: brightness(.62) saturate(.85); }
.js .galz--vivante .gal__i .gal__leg{ transition: color .6s ease; }
.js .galz--vivante .gal__i:not(.est-centre) .gal__leg{ color: var(--bord); }
.apercu__p, .t-carte{ transition: border-color .3s ease, transform .3s ease, box-shadow .5s ease; }

/* --- M9, M10 : les canevas posés sur les cartes et la fin de page -------- */
.carte__lum, .fin__lum{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  border-radius: inherit;
}
/* Passer les enfants de la carte au-dessus du canevas de lumière. La
   pastille de remise est exclue : elle est posée en absolu en haut à
   droite, et lui mettre position:relative la remettait dans le flux, où
   elle s'étalait sur toute la largeur par-dessus « Transport inclus ». */
.t-carte > *:not(.carte__lum):not(.t-carte__remise),
.sec--fin .wrap{ position: relative; z-index: 1; }
.t-carte > .t-carte__remise{ z-index: 2; }
.sec--fin{ position: relative; overflow: hidden; }

/* --- le pied de page : la salle se rallume doucement --------------------- */
.pied{ transition: background-color .9s ease; }
.fin-de-soiree .pied{ background: var(--surface); }

/* ==========================================================================
   COUCHE VISUELLE DU 07/11/2026
   William : « c'est du blanc sur un fond bleu… je veux un vrai changement
   visuel, mais que ce soit beau. Un site de luxe, pro, attirant, qui attire
   le regard à certains endroits », et surtout pas « un site de promo ».

   Ce qui change, et seulement ça :
   1. une touche champagne (--or), en très petite quantité, sur les petits
      titres, les numéros et les pictogrammes ;
   2. un reflet argenté sur les grands titres, du blanc vers l'argent :
      c'est l'argenté de la marque, pas une couleur de plus ;
   3. un halo chaud derrière deux sections (Qui je suis, la Signature) ;
   4. des surfaces avec un peu de profondeur au lieu d'aplats.
   Placée en fin de feuille : elle l'emporte sur les règles d'origine, qui
   restent intactes au-dessus. Pour tout annuler, supprimer ce bloc.
   ========================================================================== */

/* 1. Les petits titres au-dessus des sections : champagne, avec un filet */
.oeil, .sur{ color: var(--or); }
.oeil::before, .sur::before{
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; margin: -2px 12px 0 0;
  background: currentColor; opacity: .75;
}

/* les numéros : ceux des arguments entreprise, des étapes et des playlists */
.ent__n{ color: var(--or); }
.passe__etapes li::before{ border-color: rgba(210, 184, 138, .6); color: var(--or); }
.pl__c li::before{ color: var(--or); opacity: .85; }

/* 2. Le reflet argenté des grands titres. Le dégradé est répété à chaque
   ligne (sa hauteur est celle d'une ligne), pour qu'un titre sur deux
   lignes ne finisse pas gris en bas. Sans « background-clip: text », les
   titres restent simplement blancs. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .h2, .t-tete h1, .d-page__titre{
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 48%, #B5C3D6 100%);
    background-repeat: repeat-y;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .h2{ background-size: 100% 1.06em; }
  .t-tete h1, .d-page__titre{ background-size: 100% 1.1em; }
}

/* 3. Le halo chaud, derrière Qui je suis et la formule Signature */
.sec--halo-or::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(1000px, 125vw); height: min(1000px, 125vw);
  left: -24%; top: -10%;
  background: radial-gradient(circle at center,
    rgba(210, 184, 138, .075) 0%, rgba(210, 184, 138, .025) 38%, transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  .sec--halo-or::after{ animation: derive-a 58s ease-in-out infinite alternate; }
}
@media (max-width: 760px){ .sec--halo-or::after{ display: none; } }

/* 4. Des surfaces avec un peu de profondeur : un dégradé à peine visible,
   plus clair en haut, comme une lumière qui tombe du plafond */
.case__a, .duo__b, .pl__c, .apercu__p{
  background: linear-gradient(180deg, #101A2D 0%, var(--surface) 55%);
}

/* 5. Le titre du hero (07/11/2026). William trouvait « LA SALLE S'ALLUME »
   en capitales espacées pas très beau. Première version : « La salle » en
   tout petit, « s'allume » en énorme ; William : « s'allume est vingt fois
   plus gros que la salle, c'est too much. J'aime bien qu'il soit plus
   brillant ». Deuxième version, même jour : les deux mots à la MÊME
   taille, sur deux lignes, en minuscules. « La salle » reste dans la
   pénombre, « s'allume » est le mot éclairé, avec son halo. */
.hero__cri{ letter-spacing: 0; text-transform: none; margin-right: 0; }
.hero__pre,
.hero__cri .mot{
  display: block;
  font-family: var(--f-t); font-weight: 400;
  font-size: clamp(40px, 7.4vw, 84px); line-height: 1.06; letter-spacing: -.015em;
}
.hero__pre{ color: rgba(243, 246, 250, .62); }
.hero__cri.est-eclaire .mot{
  text-shadow: 0 0 34px rgba(169, 200, 232, .45), 0 0 90px rgba(169, 200, 232, .2);
}

/* 6. Le bouton « Demander un devis » du menu (07/11/2026). C'était un
   petit carré avec un filet autour : William le trouvait moche. Une
   pastille pleine, blanche, avec un léger halo ; au survol, le halo prend
   la teinte champagne. Sur ordinateur seulement : le menu de téléphone a
   son propre bouton, plus bas. */
@media (min-width: 761px){
  .menu__cta{
    padding: 11px 22px;
    border: 0; border-radius: 999px;
    background: var(--accent); color: var(--fond) !important;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 26px rgba(169, 200, 232, .14);
    transition: box-shadow .3s ease, background-color .3s ease, transform .3s ease;
  }
  .menu__cta:hover, .menu__cta:focus-visible{
    background: #FFFFFF; color: var(--fond) !important;
    box-shadow: 0 0 0 1px rgba(210, 184, 138, .35), 0 8px 30px rgba(210, 184, 138, .28);
    transform: translateY(-1px);
  }
  .menu__cta[aria-current="page"]{ box-shadow: 0 0 0 1px rgba(210, 184, 138, .5), 0 8px 26px rgba(210, 184, 138, .22); }
}

/* 7. Le menu sur téléphone (07/11/2026). Avant : un panneau noir qui
   glissait du côté, des liens empilés. Maintenant un écran entier qui
   apparaît en fondu, avec deux halos (champagne en haut, glace en bas),
   des liens en grand, qui arrivent l'un après l'autre, et le bouton du
   devis en pastille pleine en bas. Le bouton du menu devient un rond, et
   ses deux traits se croisent quand le menu est ouvert. */
.burger{ border-radius: 50%; border-color: rgba(169, 200, 232, .3); }
/* Le logo et le bouton passent AU-DESSUS du menu ouvert : avant, le menu
   plein écran les recouvrait, et on ne pouvait plus le refermer qu'en
   cliquant un lien (corrigé le 07/11/2026). */
.burger, .nav__logo{ position: relative; z-index: 2; }
.burger__bars i{ transition: transform .3s ease; }
.burger[aria-expanded="true"] .burger__bars i:first-child{ transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child{ transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 760px){
  .menu{
    justify-content: flex-start;
    padding: 104px 28px calc(36px + env(safe-area-inset-bottom));
    gap: 0;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(210, 184, 138, .12), transparent 62%),
      radial-gradient(100% 50% at 0% 100%, rgba(169, 200, 232, .10), transparent 60%),
      var(--fond);
    transform: none; opacity: 0;
    transition: opacity .35s ease, visibility 0s .35s;
  }
  .menu.is-on{ opacity: 1; transition-delay: 0s; }
  .menu a{
    display: block; width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(26, 39, 64, .8);
    font-family: var(--f-t); font-weight: 300;
    font-size: clamp(22px, 6.6vw, 28px); line-height: 1.2; letter-spacing: 0;
    color: var(--accent);
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1), color .2s ease;
  }
  .menu.is-on a{ opacity: 1; transform: none; }
  .menu.is-on a:nth-child(2){ transition-delay: .04s; }
  .menu.is-on a:nth-child(3){ transition-delay: .08s; }
  .menu.is-on a:nth-child(4){ transition-delay: .12s; }
  .menu.is-on a:nth-child(5){ transition-delay: .16s; }
  .menu.is-on a:nth-child(6){ transition-delay: .2s; }
  /* plus précis que la règle de css/tarifs.css, qui met la page en cours en blanc */
  .menu a[aria-current="page"]:not(.menu__cta){ color: var(--or); }
  .menu .menu__cta{
    margin-top: 30px; padding: 17px 24px;
    border: 0; border-radius: 999px;
    background: var(--accent); color: var(--fond) !important;
    font-family: var(--f-c); font-size: 13.5px; font-weight: 600;
    letter-spacing: var(--t-caps); text-transform: uppercase; text-align: center;
    text-indent: var(--t-caps);
    transition-delay: .24s;
  }
  .menu .menu__tel{ width: 100%; border-top: 0; padding-top: 0; margin-top: 22px; }
  .menu .menu__tel a{
    border: 0; padding: 0;
    font-family: var(--f-p); font-weight: 400; font-size: 18px;
    color: var(--or); text-align: center;
    opacity: 1; transform: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .menu a{ opacity: 1; transform: none; }
}

/* ==========================================================================
   PAGE MARIAGES — l'en-tête avec Mariages.net, et la formule Signature
   (07/11/2026)
   ========================================================================== */
/* L'en-tête sur deux colonnes : le titre, et à côté, le badge */
.t-tete--mar{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px){
  .t-tete--mar{ grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
}
/* (.mn-ligne, le badge dans la section mariage de l'accueil, a été retiré
   le 07/11/2026 avec le badge lui-même.) */
/* Le badge, discret (07/11/2026, deuxième version) : la carte encadrée
   « faisait pop-up ». Plus de cadre, une petite légende, le badge un peu
   plus petit. */
.mn-carte{
  justify-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 0 0 4px;
}
@media (min-width: 900px){ .mn-carte{ align-items: flex-end; justify-self: end; } }
.mn-carte__t{
  margin: 0;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-2);
}
.mn-carte .label-mn img{ width: 126px; height: auto; opacity: .92; transition: opacity .25s ease; }
.mn-carte .label-mn:hover img{ opacity: 1; }

/* --- Le déroulé de la soirée, à droite de la bande de lumière ------------
   Quatre moments ; celui que la lumière joue s'allume (data-ambiance posé
   sur la bande par js/scenes.js). Sans lumière (téléphone, animations
   réduites), les quatre restent allumés. */
.prog{
  list-style: none; margin: clamp(24px, 3vw, 34px) 0; padding: 0;
  border-left: 1px solid rgba(210, 184, 138, .3);
}
.prog li{
  position: relative; padding: 12px 0 12px 24px;
  transition: opacity .8s ease;
}
.prog li::before{
  content: ""; position: absolute; left: -4px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fond); border: 1px solid var(--or);
  transition: background-color .8s ease, box-shadow .8s ease;
}
.prog__t{
  display: block; margin-bottom: 3px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.25; color: var(--accent);
}
.prog__x{ display: block; font-size: 14px; line-height: 1.55; color: var(--texte-2); max-width: 38ch; }
/* chaque moment est un bouton (07/11/2026) : un clic le met en avant */
.prog__b{
  display: block; width: 100%; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 4px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.prog__b:focus-visible{ outline: 1px solid var(--or); outline-offset: 6px; }
.prog__t{ transition: font-weight .3s ease, color .3s ease; }
.bande[data-ambiance] .prog li{ opacity: .42; }
.bande[data-ambiance] .prog li:hover{ opacity: .8; }
.bande[data-ambiance="diner"] .prog li[data-a="diner"],
.bande[data-ambiance="danse"] .prog li[data-a="danse"],
.bande[data-ambiance="bal"] .prog li[data-a="bal"],
.bande[data-ambiance="final"] .prog li[data-a="final"]{ opacity: 1; }
.bande[data-ambiance="diner"] .prog li[data-a="diner"] .prog__t,
.bande[data-ambiance="danse"] .prog li[data-a="danse"] .prog__t,
.bande[data-ambiance="bal"] .prog li[data-a="bal"] .prog__t,
.bande[data-ambiance="final"] .prog li[data-a="final"] .prog__t{ font-weight: 600; }
.bande[data-ambiance="diner"] .prog li[data-a="diner"]::before,
.bande[data-ambiance="danse"] .prog li[data-a="danse"]::before,
.bande[data-ambiance="bal"] .prog li[data-a="bal"]::before,
.bande[data-ambiance="final"] .prog li[data-a="final"]::before{
  background: var(--or); box-shadow: 0 0 12px rgba(210, 184, 138, .7);
}
/* sur grand écran, le déroulé occupe la colonne de droite de la bande */
@media (min-width: 980px){
  .bande__in .prog{ grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce){ .prog li, .prog li::before{ transition: none; } }

/* --- La formule Signature : trois tableaux, puis le reste en bref --------
   Chaque tableau : une photo et son texte, côte à côte sur grand écran,
   en alternance gauche / droite ; l'un sous l'autre sur téléphone. */
.vit{ display: grid; gap: clamp(36px, 5vw, 72px); margin-top: clamp(8px, 1.4vw, 16px); }
.vit__b{
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
}
@media (min-width: 900px){
  .vit__b{ grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .vit__b--inverse .vit__photo{ order: 2; }
}
.vit__photo{ position: relative; isolation: isolate; margin: 0 16px 16px 0; }
.vit__photo::before{
  content: ""; position: absolute; z-index: -1;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--or); border-radius: var(--r); opacity: .35;
}
.vit__photo img{
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--trait);
}
/* écrit « .vit__t .vit__n » : la règle « .vit__t p », plus bas, est plus
   spécifique qu'une classe seule et l'emporterait */
.vit__t .vit__n{
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: var(--t-caps); text-transform: uppercase;
  color: var(--or);
}
.vit__t h3{
  margin: 0 0 14px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; color: var(--accent);
}
.vit__t p{ font-size: 15.5px; line-height: 1.72; color: var(--texte); max-width: 52ch; }
.vit__t .vit__reserve{ margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--texte-2); }

/* page Soirées (07/11/2026) : le titre du tableau est un h2, la petite
   liste de ce qui est compris, la formule conseillée et les boutons */
.vit__t .vit__h{
  margin: 0 0 14px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(24px, 3vw, 36px); line-height: 1.12; color: var(--accent);
}
.vit__inclus{ list-style: none; margin: 20px 0 0; padding: 0; }
.vit__inclus li{
  position: relative; padding: 7px 0 7px 22px;
  font-size: 14.5px; line-height: 1.5; color: var(--texte);
  border-top: 1px solid var(--trait);
}
.vit__inclus li::before{
  content: ""; position: absolute; left: 0; top: 16px;
  width: 10px; height: 1px; background: var(--or);
}
.vit__t .vit__conseil{ margin: 18px 0 0; font-size: 14px; color: var(--texte-2); }
.vit__conseil b{ font-weight: 500; color: var(--or); }
.vit__a{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(18px, 2.4vw, 28px); margin: 22px 0 0;
}

.sig__aussi{
  margin: clamp(52px, 7vw, 96px) 0 clamp(18px, 2.4vw, 26px);
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; color: var(--accent);
}
.sig__l{
  list-style: none; margin: 0; padding: 0; counter-reset: sig;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(26px, 3vw, 44px);
}
@media (min-width: 700px){ .sig__l{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .sig__l{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sig__l li{
  padding: 20px 0 24px;
  border-top: 1px solid var(--trait);
  counter-increment: sig;
}
.sig__l li::before{
  content: counter(sig, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 12.5px; letter-spacing: .16em; color: var(--or);
}
.sig__l h4{
  margin: 0 0 8px;
  font-family: var(--f-c); font-weight: 500;
  font-size: 16px; line-height: 1.3; color: var(--accent);
}
.sig__l p{ margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texte-2); max-width: 46ch; }
.sig__a{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(18px, 2.4vw, 28px);
  margin: clamp(30px, 3.8vw, 48px) 0 0;
}