/* 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;
  max-width: 33rem;   /* pas de `ch` ici : l'unité se calerait sur la petite
                         police de l'étiquette et raboterait le bloc */
}

/* 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%;
    display: flex;
    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;
    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]"; }
}