/* Imany Studio - corrections maison. Chargé après le CSS Webflow, donc prioritaire. */

/* Titre principal de page : lu par Google et les lecteurs d'écran, invisible à l'oeil. */
.imany-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Le préloader couvre l'écran en position fixe : il ne doit jamais intercepter un clic. */
.preloader { pointer-events: none; }

/* Blocs retirés (voir hideSelectors dans config.json) */
.social-menu-wrapper .contact-info.no-shadow { display: none !important; }


/* ---- source/style.css ---- */
/* =========================================================================
   Retouches de design maison.

   Ce fichier est ajouté à la fin de assets/custom.css, donc après le CSS de
   Webflow : ses règles gagnent sans avoir besoin de !important.

   Règle de prudence : on ne touche jamais aux propriétés que les animations
   Webflow pilotent (transform, opacity, display sur .menu-wrapper). Uniquement
   de la typographie, de la mise en page et de la couleur.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. La citation des mariés, sur les pages projet

   Avant : deux lignes minuscules, tout en gras, collées sous le titre — le
   message le plus précieux de la page passait pour une légende.

   Après : un vrai bloc de citation. Le label devient une étiquette discrète,
   le témoignage respire, et un guillemet ouvrant en écriture manuscrite —
   la police du logo — l'ancre sans l'alourdir.
   ------------------------------------------------------------------------- */

.hero.for-inner.wp .max-lft-dvc {
  align-items: flex-start;
  /* Pas de `ch` ici : l'unité se calerait sur la petite police de l'étiquette
     et raboterait le bloc. La largeur suit l'écran plutôt que d'être figée :
     sur un grand moniteur, un bloc bloqué à 33rem coupait les lignes alors
     qu'il restait de la place à droite. */
  max-width: min(46rem, 100%);
}

/* l'étiquette */
.hero.for-inner.wp .max-lft-dvc > .top-text._2._3 {
  font-size: .7rem;
  font-weight: var(--font-weight--400);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: left;
  opacity: .5;
  margin-bottom: 0;
}

.hero.for-inner.wp .max-w-left {
  display: block;
  max-width: none;
  position: relative;
  padding-top: 1.5rem;
}

/* un filet fin plutôt qu'un guillemet : la police du logo n'a pas de vrai
   glyphe pour « “ », et un trait tient à toutes les tailles */
.hero.for-inner.wp .max-w-left::before {
  content: "";
  position: absolute;
  top: .75rem;
  left: 0;
  width: 2.6rem;
  height: 1px;
  background: var(--colors--second-color);
  opacity: .45;
}

/* Le bandeau a une hauteur fixe (70vh, puis 500 et 450 px aux paliers).
   Un témoignage un peu long le débordait par le haut et passait sous le menu.
   On le laisse grandir avec son contenu. */
.hero.for-inner.wp {
  height: auto;
  min-height: 70vh;
  padding-top: 9rem;
  /* le bandeau recouvre volontairement la section suivante de 100 px
     (margin-bottom négatif) : la réserve du bas doit dépasser cette valeur,
     sinon la fin d'un long témoignage passe dessous */
  padding-bottom: 9.5rem;
}
@media (max-width: 991px) { .hero.for-inner.wp { min-height: 500px; } }
@media (max-width: 767px) { .hero.for-inner.wp { min-height: 450px; padding-top: 7rem; padding-bottom: 8.5rem; } }

/* la citation elle-même */
.hero.for-inner.wp .max-w-left .top-text.big._2._3 {
  font-size: clamp(1.1rem, .88rem + .78vw, 1.65rem);
  font-weight: var(--font-weight--300);
  line-height: 1.58;
  letter-spacing: 0;
  text-align: left;
  padding: 0;
  opacity: .94;
  text-wrap: pretty;
}

.hero.for-inner.wp .margin-10 { margin-top: 0; }

/* La grille du bandeau fait quatre colonnes : le nom du couple en occupait
   trois, la citation une seule — 295 px, trop étroit pour se lire sans être
   hachée. On repasse à deux moitiés. Les placements viennent de Webflow, sous
   forme de sélecteurs d'identifiant (#w-node-…), qui l'emportent sur n'importe
   quelle classe : d'où le !important, seul moyen de reprendre la main sans
   écrire un identifiant qui change à chaque page. */
.hero.for-inner.wp .inner-grid > *:first-child { grid-area: 1 / 1 / 2 / 3 !important; }
.hero.for-inner.wp .inner-grid > *:last-child  { grid-area: 1 / 3 / 2 / 5 !important; }

@media (max-width: 991px) {
  .hero.for-inner.wp .max-lft-dvc { max-width: 100%; }
}

@media (max-width: 767px) {
  .hero.for-inner.wp .inner-grid > *:first-child,
  .hero.for-inner.wp .inner-grid > *:last-child { grid-area: auto !important; }
  .hero.for-inner.wp .max-lft-dvc { margin-top: 1.5rem; }
  .hero.for-inner.wp .max-w-left { padding-top: 1.2rem; }
  .hero.for-inner.wp .max-w-left::before { top: .55rem; width: 2rem; }
}


/* -------------------------------------------------------------------------
   2. Le menu

   Avant : une colonne de petits liens serrée à droite, sur 22 % de la largeur.
   Après : les quatre destinations en grand, numérotées, sur un fond flouté qui
   laisse deviner la page qu'on quitte.

   L'effet de survol de Webflow fait défiler deux copies du texte dans une
   fenêtre de 48 px de haut. En passant à des tailles fluides, on redéfinit
   cette hauteur en `em` pour qu'elle suive la police au lieu de couper.
   ------------------------------------------------------------------------- */

.menu-wrapper {
  justify-content: center;
  background-color: color-mix(in srgb, var(--colors--first-color) 86%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(115%);
  backdrop-filter: blur(30px) saturate(115%);
}

.menu-wrapper .navigation-wrapper {
  max-width: min(1080px, 86vw);
  margin-right: auto;
  margin-left: auto;
}

.nav-top-flex {
  --nav-size: clamp(2.1rem, 1rem + 7.4vw, 5.6rem);
  display: flex;
  flex-flow: column;
  align-items: center;
  /* en rem : `em` se calerait sur la police du conteneur (14 px), pas sur
     celle des liens, et donnerait 2 px d'écart au lieu de 9 */
  gap: clamp(.25rem, .55vw, .8rem);
}

.nav-top-flex .menu-item {
  font-size: var(--nav-size);
  position: relative;
  /* réserve pour la numérotation, en rem : en em elle suivrait les 90 px du
     lien et creuserait un trou de 170 px entre le numéro et le mot */
  padding-left: 4.6rem;
}

/* La numérotation. Taille en rem, pas en em : en em elle se calerait sur les
   90 px du lien et deviendrait soit minuscule, soit énorme selon l'écran. */
.nav-top-flex .menu-item::before {
  position: absolute;
  left: 0;
  top: .95rem;
  font-size: .95rem;
  font-weight: var(--font-weight--400);
  letter-spacing: .06em;
  opacity: .62;
  pointer-events: none;
}
.nav-top-flex .menu-item._01::before { content: "[01]"; }
.nav-top-flex .menu-item._02::before { content: "[02]"; }
.nav-top-flex .menu-item._03::before { content: "[03]"; }
.nav-top-flex .menu-item._05::before { content: "[04]"; }

/* la typographie des liens — cadrée sur .nav-top-flex pour ne pas emporter
   les petits boutons légaux du bas de menu, qui partagent les mêmes classes */
.nav-top-flex .button-text {
  font-size: 1em;
  font-weight: var(--font-weight--400);
  text-transform: uppercase;
  letter-spacing: -.02em;
  height: 1.08em;
  line-height: 1.08em;
}
.nav-top-flex .button-text-wrapper {
  height: 1.08em;
  line-height: 1.08em;
}

/* À cette taille, le trait plein sous chaque lien devient une barre qui alourdit
   toute la pile. On le garde, mais réservé au survol. */
.nav-top-flex .button-line-first {
  height: 1px;
  top: -.04em;
  background-color: currentColor;
  opacity: 0;
  transition: opacity .28s ease;
}

.nav-top-flex .menu-item:hover .button-line-first { opacity: .5; }

@media (max-width: 991px) {
  .nav-top-flex .menu-item { padding-left: 3.6rem; }
  .nav-top-flex .menu-item::before { font-size: .8rem; top: .75rem; }
}

@media (max-width: 479px) {
  .nav-top-flex { --nav-size: clamp(1.8rem, 1rem + 6.4vw, 2.6rem); gap: .55rem; }
  .nav-top-flex .menu-item { padding-left: 3rem; }
  .nav-top-flex .menu-item::before { font-size: .72rem; top: .55rem; }
}


/* -------------------------------------------------------------------------
   3. Le bas du menu sur mobile

   Deux défauts d'origine, visibles seulement sous 768 px : les liens du menu
   restaient collés en haut de l'écran, et « Mentions légales » / « Conditions
   générales » se retrouvaient tronqués — leur libellé passe à la ligne alors
   que l'effet de survol de Webflow les enferme dans une fenêtre de 20 px.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* marges automatiques : elles priment sur le space-between du conteneur et
     centrent la pile dans l'espace libre, les liens légaux restant en bas */
  .navigation-content .nav-top-flex { margin-top: auto; margin-bottom: auto; }

  /* on garde la fenêtre de 20 px, indispensable à l'effet de survol :
     c'est le retour à la ligne qu'on empêche */
  .flex-bottom .button-text { white-space: nowrap; }
}

@media (max-width: 479px) {
  .flex-bottom { flex-flow: column; grid-row-gap: 6px; }
}


/* -------------------------------------------------------------------------
   4. Le menu mobile

   Attention : ce n'est PAS le même composant que le menu plein écran ci-dessus.
   Sous 991 px, Webflow masque `.menu-wrapper` et bascule sur sa barre de
   navigation standard — le bouton burger déplace `nav.nav-menu` dans un
   `.w-nav-overlay`.

   Tel quel, ça donnait un bandeau noir qui glissait SOUS l'en-tête : la
   première entrée, « Accueil », disparaissait derrière le logo. On en fait un
   vrai panneau plein écran, aligné sur le menu du bureau.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* Webflow pose une hauteur en ligne sur l'overlay (celle de la page entière,
     3572 px ici) : c'est lui qu'il faut cadrer, pas son enfant. */
  .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    z-index: 900;
    background: transparent;
  }

  .w-nav-overlay .nav-menu {
    height: 100%;
    /* Webflow pose `display: block` en ligne à l'ouverture du menu : sans
       !important, le flex — et donc le centrage vertical — est ignoré. */
    display: flex !important;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    grid-row-gap: .55rem;
    padding: 5rem 1.5rem;
    background-color: color-mix(in srgb, var(--colors--first-color) 88%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(115%);
    backdrop-filter: blur(30px) saturate(115%);
  }

  /* le burger doit rester au-dessus du panneau pour pouvoir le refermer */
  .w-nav-button { position: relative; z-index: 901; }

  .w-nav-overlay .button-link {
    position: relative;
    /* Le template applique `filter: invert(1)` sur .button-link — prévu pour
       retourner des icônes sombres sur fond clair. Sur notre panneau sombre,
       il transformait le texte blanc en quasi-noir. La couleur calculée restait
       bien #f8f8f8 : c'est le filtre, appliqué après, qui la retournait. */
    filter: none;
    color: var(--colors--second-color);
    padding-left: 3.2rem;
    font-size: clamp(1.9rem, 1.1rem + 5.4vw, 2.9rem);
  }

  /* les petites lunes n'apportent rien à cette taille et déséquilibrent la pile */
  .w-nav-overlay .social-circle-small { display: none; }

  .w-nav-overlay .navigation-text-main {
    font-size: 1em;
    font-weight: var(--font-weight--400);
    letter-spacing: -.02em;
    line-height: 1.14;
    color: var(--colors--second-color);
  }

  .w-nav-overlay .button-link::before {
    position: absolute;
    left: 0;
    top: .62rem;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--colors--second-color);
    opacity: .55;
    pointer-events: none;
  }
  .w-nav-overlay .button-link:nth-child(1)::before { content: "[01]"; }
  .w-nav-overlay .button-link:nth-child(2)::before { content: "[02]"; }
  .w-nav-overlay .button-link:nth-child(3)::before { content: "[03]"; }
  .w-nav-overlay .button-link:nth-child(4)::before { content: "[04]"; }
}


/* =========================================================================
   REFONTE VISUELLE — 4 septembre 2026
   Trois blocs indépendants, supprimables séparément.
   Sauvegarde de l'état précédent : source/style.css.avant-refonte
   ========================================================================= */


/* -------------------------------------------------------------------------
   R1. Une seule couleur d'accent

   Le site en portait deux qui faisaient le même travail : le bandeau des
   pages intérieures était brun (#a06932), celui des pages projet bleu pétrole
   (#0f587d). Deux couleurs sans rapport pour un même rôle — la signature d'un
   template assemblé plutôt que dessiné.

   On garde le brun : chaud, accordé aux photos d'extérieur et au registre du
   mariage. Le bleu ne servait qu'au bandeau projet, à une carte de témoignage
   et à une pastille de survol.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc.
   ------------------------------------------------------------------------- */

/* Déclaré sur `body` et non sur `:root` : Webflow redéfinit sa palette sur
   `body` à l'intérieur de chaque point de rupture, et `body` étant plus proche
   des éléments, il l'emporte sur `:root`. Le !important neutralise ces
   redéclarations quelle que soit la largeur d'écran. */
body {
  --colors--third-color: #a06932 !important;
}


/* -------------------------------------------------------------------------
   R2. Le bandeau des pages projet devient une image

   C'était un aplat de couleur. Pour un vidéaste, le premier écran d'une page
   projet devrait montrer le couple, pas un rectangle. On réutilise la photo
   qui sert déjà de carte de partage pour chaque mariage, sous un voile sombre
   qui garantit la lisibilité du nom et de la citation.

   Le ciblage passe par `data-wf-item-slug`, l'identifiant que Webflow pose sur
   chaque page projet — pas besoin de toucher au HTML.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc.
   ------------------------------------------------------------------------- */

.hero.for-inner.wp {
  background-size: cover;
  background-position: center 35%;   /* les visages plutôt que le ciel */
  background-repeat: no-repeat;
}

/* Photo choisie DIFFÉRENTE de celle affichée juste en dessous dans la page :
   reprendre la même donnait l'impression d'un doublon accidentel.
   Variantes -p-1600 : 90 à 405 Ko au lieu de 138 à 879. */

[data-wf-item-slug="bela-jean"] .hero.for-inner.wp {
  background-image:
    linear-gradient(rgba(14, 11, 9, .70), rgba(14, 11, 9, .80)),
    url("/assets/69e25bed-69e50f85b2019e4bca08c740_MARIAGE_BELA-JEAN-181-p-1600.webp");
}

[data-wf-item-slug="jodia-michael"] .hero.for-inner.wp {
  background-image:
    linear-gradient(rgba(14, 11, 9, .70), rgba(14, 11, 9, .80)),
    url("/assets/69e25bed-69e512509e7bf83560aa71dd_MARIAGE-MICHAEL-JODIA-247a-p-1600.webp");
}

[data-wf-item-slug="cedric-melissa-yhk1y"] .hero.for-inner.wp {
  background-image:
    linear-gradient(rgba(14, 11, 9, .70), rgba(14, 11, 9, .80)),
    url("/assets/69e25bed-69e510ec48656a9275823716_Capture-d-ecran-2026-04-18-a-11.10.31-p-1600.webp");
}


/* -------------------------------------------------------------------------
   R4. Les boutons d'action

   Deux défauts d'origine, visibles sur « Tout voir » comme sur « Réserver un
   appel » — ce sont les mêmes boutons.

   L'ombre : le template empile quinze couches décalées vers le bas-gauche,
   jusqu'à 50 px de côté et 55 px vers le bas. Ça ne lit pas comme une ombre
   de bouton mais comme une traînée diagonale sous l'élément. Remplacée par
   une ombre courte et centrée.

   La taille : 16 px de texte et 15 px de marge donnaient 46 px de haut, la
   limite basse d'une cible tactile confortable, et c'est peu pour l'action
   principale d'une section.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc.
   ------------------------------------------------------------------------- */

.contact-info.for-button {
  padding: 18px 34px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 6px 18px rgba(0, 0, 0, .12);
  transition: box-shadow .25s ease, transform .25s ease;
}

.contact-info.for-button .top-text {
  font-size: 1.02rem;
  letter-spacing: .01em;
}

.contact-info.for-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 10px 26px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

@media (max-width: 479px) {
  .contact-info.for-button { padding: 16px 28px; }
}


/* -------------------------------------------------------------------------
   R5. L'image de la section « Notre fonctionnement »

   Le cadre n'occupait qu'une colonne sur quatre — 338 px sur une grille de
   1400 — alors que la colonne de texte à gauche s'arrête bien avant. L'image
   source fait plus de 1000 px de large : elle était recadrée pour rien.

   On lui donne la moitié de la grille, un rayon plus généreux et une ombre
   douce qui la décolle du fond presque blanc.

   Ce qu'on ne touche pas : le `transform` de `.paralax-image`, piloté par
   l'animation Webflow. Y ajouter une transition ou un survol la ferait
   saccader.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc.
   ------------------------------------------------------------------------- */

/* Seuil à 1280 px et non 992 : les titres d'étapes gardent une largeur à peu
   près constante (~660 px), donc en dessous l'image élargie leur passait
   dessus. Vérifié : recouvrement de 58 px à 1085 px. */
@media (min-width: 1280px) {
  .service-media-wrap {
    /* Largeur absolue et non en pourcentage : cet élément est positionné dans
       une grille, donc un % se calculerait sur sa CASE (161 px) et non sur la
       grille entière — ça le rétrécissait au lieu de l'élargir. */
    width: min(600px, 38vw);
    max-width: none;
  }

  .image-wrap.for-service {
    max-height: 52vh;         /* remplace le 71.8% d'origine, qui écrasait le cadre élargi */
    border-radius: 14px;
  }

  /* le texte sous l'image suit la nouvelle largeur, sans devenir illisible */
  .service-media-sticky .top-text.big.nm {
    max-width: 48ch;
    line-height: 1.55;
  }
}

.image-wrap.for-service {
  border-radius: 14px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .06),
    0 18px 44px rgba(0, 0, 0, .11);
}


/* -------------------------------------------------------------------------
   R6. La barre de navigation flottante du bas

   Les libellés y étaient en minuscules (« Accueil », « Nos films ») alors que
   la barre du haut est déjà en capitales. On aligne les deux. Un peu
   d'interlettrage : en français, les capitales se serrent visuellement et
   deviennent moins lisibles sans respiration.

   Le logo « imany, » gagne une animation. Elle reste discrète : une
   respiration lente et à peine perceptible au repos, un accent plus net au
   survol. Et elle s'annule pour les visiteurs qui ont demandé à leur système
   de réduire les animations.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc.
   ------------------------------------------------------------------------- */

/* Les liens de cette barre ont `overflow: hidden` — indispensable, c'est ce
   qui cache la petite lune qui glisse au survol. Les majuscules étant plus
   larges que les bas-de-casse, le texte débordait et se faisait rogner
   (« CONTACT » réclamait 84 px pour 75 disponibles), et deux libellés
   passaient à la ligne.
   On laisse donc le lien prendre la largeur de son contenu, sans toucher au
   masquage de l'icône. */
.menu-bottom .button-link {
  flex: 0 0 auto;
  min-width: max-content;
}

.menu-bottom .navigation-text-main {
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* --- le logo --- */

/* Le conteneur du logo occupe une colonne de grille de 50 px alors que
   « imany, » en fait près de 90 : sans largeur propre il s'effondrait à 8 px
   et le texte débordait sur le groupe de liens voisin. On lui donne la
   largeur de son contenu et on le centre. */
.menu-bottom {
  /* La colonne centrale du template est figée à 50 px alors que « imany, »
     en réclame davantage : le logo s'y trouvait comprimé. On laisse les trois
     colonnes se dimensionner sur leur contenu. */
  grid-template-columns: auto max-content auto;
}

.menu-bottom .logo-bottom-menu {
  min-width: max-content;
  justify-content: center;
  align-items: center;
  padding-inline: .6rem;
}

.menu-bottom .logo-first.bottom-menu {
  flex: 0 0 auto;
  display: inline-block;
  transform-origin: center;
}

.menu-bottom .top-text.logo {
  display: inline-block;
  transform-origin: center;
  animation: imany-respire 5s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
  will-change: transform;
}

@keyframes imany-respire {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.035) rotate(-.6deg); }
}

.menu-bottom .logo-first.bottom-menu:hover .top-text.logo {
  animation-play-state: paused;
  transform: scale(1.12) rotate(-2deg);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}

@media (prefers-reduced-motion: reduce) {
  .menu-bottom .top-text.logo {
    animation: none;
    transition: none;
  }
  .menu-bottom .logo-first.bottom-menu:hover .top-text.logo {
    transform: none;
  }
}


/* -------------------------------------------------------------------------
   R7. Apparition au défilement

   Le slogan « Des mariages filmés pour l'éternité » n'est pas du texte : il
   est tracé en vectoriel à l'intérieur du SVG du logo. On ne peut donc pas
   animer les mots un par un — on fait apparaître l'ensemble.

   En revanche il est tracé en 90 chemins, un par glyphe : on les trie de
   gauche à droite et on les révèle en cascade, 11 ms d'écart. Le texte semble
   s'écrire.

   La classe `.imany-lettre` est posée par imany.js, jamais écrite dans le
   HTML : sans JavaScript, rien n'est masqué et le logo s'affiche normalement.
   Le déclenchement attend la disparition du préchargeur — sinon l'animation
   se joue derrière l'écran de chargement et personne ne la voit.

   POUR REVENIR EN ARRIÈRE : supprimer ce bloc ET le bloc correspondant
   dans `imanyJs()` (tools/lib.mjs).
   ------------------------------------------------------------------------- */

.imany-lettre {
  opacity: 0;
  transform: translateY(10px);
  transform-box: fill-box;      /* sinon le décalage se calcule sur tout le SVG */
  transform-origin: center;
  transition:
    opacity .22s ease,
    transform .3s cubic-bezier(.2, .8, .2, 1);
}

.imany-lettre.imany-vu {
  opacity: 1;
  transform: none;
}