/* ==========================================================================
   WEDDING NATION — Landing page mariage
   --------------------------------------------------------------------------
   Sommaire :
   1. Polices (@font-face)
   2. Variables CSS (couleurs, typo, layout)
   3. Reset / base
   4. Utilitaires (.btn, .sr-only...)
   5. Navigation
   6. Hero
   7. Pillars (blocs alternés sous le hero)
   8. Team / Notre histoire
   9. Offres (photo + enveloppes + animation)
   10. Galerie (slider)
   11. Contact (carte + formulaire)
   12. Footer
   13. Responsive
   ========================================================================== */


/* ==========================================================================
   1. POLICES
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Relationship';
  src: url('../assets/fonts/Relationship-melodrame.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'La Graziela';
  src: url('../assets/fonts/La-Graziela-Script-Demo.otf') format('opentype');
  font-weight: normal;
  font-display: swap;
}


/* ==========================================================================
   2. VARIABLES — modifier ici pour changer les couleurs/polices globalement
   ========================================================================== */

:root {
  /* Palette brief */
  --c-beige-light:   #f5f5e9;   /* fond crème principal */
  --c-beige-cream:   #faf2d6;   /* fond crème chaud */
  --c-cream:         #f8f0c9;   /* crème jaune pâle */
  --c-nude:          #d0bab0;   /* rose nude — footer */
  --c-taupe:         #a08b79;   /* taupe moyen */
  --c-taupe-dark:    #846d63;   /* taupe foncé — texte principal */
  --c-brown-dark:    #746259;   /* marron foncé */
  --c-pink:          #c78d97;   /* rose poudré — boutons */

  /* Usages sémantiques */
  --color-bg:        var(--c-beige-light);
  --color-text:      var(--c-taupe-dark);
  --color-text-soft: var(--c-taupe);
  --color-accent:    var(--c-pink);
  --color-primary:   var(--c-brown-dark);

  /* Typographies */
  --font-body:     'Poppins', system-ui, -apple-system, sans-serif;
  --font-display:  'Relationship', 'La Graziela', serif; /* titres italiques romantiques */
  --font-script:   'La Graziela', 'Relationship', cursive;

  /* Layout */
  --max-width: 1280px;
  --radius:    4px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    250ms;
  --t-med:     500ms;
  --t-slow:    800ms;
}


/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: opacity var(--t-fast); }
a:hover { opacity: 0.7; }

button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul    { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--color-primary);
  line-height: 1.15;
}

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


/* ==========================================================================
   4. UTILITAIRES
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.9em 2.4em;
  border-radius: 0;                    /* bouton rectangulaire */
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  background-color: var(--c-pink);
  color: #fff;
  border: 1px solid var(--c-pink);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}

.btn:hover {
  background: transparent;
  color: var(--c-pink);
  opacity: 1;
  transform: translateY(-2px);
}

.btn--dark {
  background-color: var(--c-brown-dark);
  border-color: var(--c-brown-dark);
  color: var(--c-beige-light);
}
.btn--dark:hover {
  background: transparent;
  color: var(--c-brown-dark);
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 3rem;
}

.nav__menu {
  display: flex;
  gap: 2.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.nav__menu--left  { justify-content: flex-start; }
.nav__menu--right { justify-content: flex-end; }

.nav__menu a {
  position: relative;
  padding-bottom: 4px;
  color: #fff;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: #fff;
  transition: width var(--t-fast), left var(--t-fast);
}
.nav__menu a:hover::after { width: 100%; left: 0; }

/* Logo central "Wedding Nation" (SVG crème) */
.nav__logo {
  display: block;
}
.nav__logo img {
  width: 240px;
  height: auto;
  filter: brightness(0) invert(1); /* passe en blanc pur sur la photo */
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__burger span {
  width: 26px; height: 2px;
  background-color: #fff;
  transition: var(--t-fast);
}


/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;   /* cadre plus haut pour mieux voir le couple */
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile léger uniforme + assombrissement en haut pour la nav */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%),
    rgba(116, 98, 89, 0.15);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;                 /* pleine largeur pour que le centrage soit exact */
  text-align: center;
  padding: 0 1.5rem;
  /* plus de max-width : le titre en nowrap peut être large, */
  /* on laisse tout l'écran pour le centrer proprement */
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5.2rem);
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.2);
  white-space: nowrap;          /* force une seule ligne (desktop/tablette) */
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}


/* ==========================================================================
   7. PILLARS (2 blocs alternés sous le hero)
   ========================================================================== */

.pillars {
  background-color: var(--c-beige-light);
  padding: 6rem 0;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* Chaque pillar prend toute la largeur pour que les photos puissent */
/* être collées près des bords de l'écran */
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;  /* photo taille fixe + texte fluide */
  column-gap: 4rem;
  align-items: start;               /* émoticône alignée avec le haut de la photo */
  width: 100%;
  padding-left: 5vw;                /* photo près du bord gauche */
  padding-right: 5vw;
}

/* Bloc 2 inversé : texte à gauche, photo à droite */
.pillar--reverse {
  grid-template-columns: 1fr auto;
}
.pillar--reverse .pillar__image { order: 2; justify-self: end; }
.pillar--reverse .pillar__text  { order: 1; text-align: right; }

.pillar__image {
  width: 100%;
  max-width: 420px;                 /* photos plus grandes */
  justify-self: start;              /* collée au bord gauche */
}

.pillar__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.pillar__text {
  max-width: 520px;
  color: var(--c-taupe);          /* même teinte que les émoticônes */
}

/* Bloc 2 inversé : texte aligné à droite */
.pillar--reverse .pillar__text { justify-self: end; }
.pillar--reverse .pillar__ornament { margin-left: auto; }
.pillar--reverse .pillar__text p   { margin-left: auto; }

.pillar__ornament {
  width: 150px;                    /* bloc 1 : légèrement réduit */
  height: auto;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

/* Le SVG emoticones-9 est plus "fin" : on le compense un peu */
.pillar--reverse .pillar__ornament {
  width: 220px;
}

/* Titre simple, pas de rond, pas de chevauchement */
.pillar__text h2 {
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-taupe);
}

.pillar__text p {
  font-size: 1.15rem;              /* paragraphe un peu plus grand */
  line-height: 1.55;
  color: var(--c-taupe);           /* couleur identique aux émoticônes */
  max-width: 38ch;
}


/* ==========================================================================
   8. TEAM / NOTRE HISTOIRE
   ========================================================================== */

/* ------- Team : fond beige + texture horizontale 35% ------- */
.team {
  position: relative;
  background-color: var(--c-beige-light);
  padding: 6rem clamp(2rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;     /* photo légèrement plus large que le texte */
  gap: 5rem;
  align-items: center;
  width: 100%;                          /* pleine largeur de la page */
  overflow: hidden;
}

/* Texture en fond (opacité 35%) — pleine largeur, bande horizontale */
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  background-image: url('../assets/images/textures-1.jpeg');
  background-size: auto 100%;           /* garde la hauteur, se répète à l'horizontale */
  background-position: center;
  background-repeat: repeat-x;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

/* Tous les enfants directs passent au-dessus de la texture */
.team > * { position: relative; z-index: 1; }


/* ------- Photo ordinateur agrandie, poussée à gauche ------- */
.team__image {
  position: relative;
  width: 100%;
  max-width: 560px;                      /* photo plus grosse */
  justify-self: start;
  margin-left: clamp(2rem, 6vw, 6rem);   /* légèrement décalée vers la droite */
}

.team__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

/* Mot "Team" AU CENTRE de la photo, 2 polices */
.team__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-cream);                 /* #f8f0c9 */
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.team__label-t {
  font-family: 'La Graziela', cursive;
  font-size: clamp(7rem, 12vw, 11rem);
  vertical-align: -0.05em;
}

.team__label-eam {
  font-family: 'Relationship', serif;
  font-style: italic;
  font-size: clamp(5rem, 9vw, 8rem);
  margin-left: -0.1em;
}


/* ------- Colonne texte centrée ------- */
.team__content {
  position: relative;
  max-width: 560px;
  text-align: center;                    /* textes centrés */
  justify-self: center;
}

/* Décor floral en fond, derrière les textes */
.team__bg-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 420px;
  opacity: 0.18;
  z-index: -1;
  pointer-events: none;
}

.team__ornament {
  display: block;
  margin: 0 auto 1.2rem;
  opacity: 0.85;
}
.team__ornament--top    { width: 140px; }
.team__ornament--bottom { width: 70px; margin-top: 1.8rem; margin-bottom: 0; }

.team__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
  color: var(--c-taupe);
}

.team__content p {
  font-size: 1.05rem;                    /* paragraphes plus grands */
  line-height: 1.6;
  margin: 0 auto 1rem;
  max-width: 40ch;
  color: var(--c-taupe);
}


/* ==========================================================================
   9. OFFRES — photo + 4 enveloppes interactives
   ========================================================================== */

.offers {
  background-color: var(--c-beige-light);
  padding: 0 0 14rem;                   /* plus d'espace haut : la photo colle à la section Team */
  text-align: center;
}

.offers__title {
  /* Titre posé en overlay au centre de la photo */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-style: italic;
  color: #faf2d6;
  letter-spacing: 0.02em;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
  z-index: 2;
  pointer-events: none;
}
/* Initiales N V O en La Graziela */
.offers__initial {
  font-family: 'La Graziela', cursive;
  font-style: normal;
  font-size: 1.35em;
  line-height: 0.8;
  vertical-align: -0.08em;
  margin-right: 0.02em;
}

.offers__photo {
  position: relative;                  /* ancre du titre en overlay */
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  margin: 0 0 4rem;                    /* aucun espace en haut, juste sous la photo */
}
.offers__photo img {
  width: 100%;
  height: 520px;                       /* photo plus haute */
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.offers__intro {
  max-width: 980px;                    /* bloc plus large */
  margin: 0 auto 6rem;                 /* espace supplémentaire avec les enveloppes */
  padding: 0 2rem;
  text-align: center;                  /* texte justifié au centre */
}
.offers__intro p {
  font-size: 1.1rem;                   /* texte plus grand */
  line-height: 1.65;
  margin-bottom: 1.2rem;
  color: var(--color-text);
}
.offers__cta-text {
  text-align: center !important;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem !important;
  color: var(--color-primary);
  margin-top: 2.5rem !important;
  text-transform: uppercase;           /* "CHOISISSEZ CE QUI VOUS RESSEMBLE !" */
  letter-spacing: 0.04em;
}

/* Grille des 4 enveloppes */
.envelopes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2.5rem);
  flex-wrap: nowrap;                    /* toujours sur une seule ligne */
  padding: 3rem clamp(1rem, 3vw, 3rem);
  /* Débord possible au-delà du contenu centré pour avoir plus de place */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  /* Place pour les cartes qui montent au-dessus */
  padding-top: 280px;
  margin-top: -280px;
  position: relative;
}

.envelope {
  position: relative;
  width: clamp(240px, 26vw, 440px);    /* enveloppes encore plus grosses */
  flex: 0 1 auto;
}

/* Bouton = enveloppe fermée */
.envelope__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
  z-index: 2;
}

.envelope__btn:hover {
  transform: translateY(-6px);
}

.envelope__closed,
.envelope__open {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
/* L'enveloppe ouverte est superposée, cachée par défaut */
.envelope__open {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
/* Au survol OU état ouvert : on bascule sur l'image "ouverte" */
.envelope:hover .envelope__closed,
.envelope.is-open .envelope__closed {
  opacity: 0;
}
.envelope:hover .envelope__open,
.envelope.is-open .envelope__open {
  opacity: 1;
}

/* Numéro dans le sceau central (approximation du cachet de cire) */
.envelope__number {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 3;
}

/* La carte qui sort de l'enveloppe : CARRE 1x1 avec feuille en fond */
.envelope__card {
  position: absolute;
  left: 50%;
  bottom: 60%;
  /* Carré parfait — largeur = hauteur */
  width: 420px;
  height: 420px;
  transform: translateX(-50%) translateY(40px) scale(0.9);

  background-color: transparent;

  color: var(--color-text);
  padding: 5.5rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  border-radius: 0;
  box-shadow: none;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--t-slow) var(--ease),
    opacity var(--t-med) var(--ease),
    visibility 0s linear var(--t-slow);
  z-index: 1;
}

/* Texture papier en fond (opacité complète) */
.envelope__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/enveloppe marriage 1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}
.envelope__card > * { position: relative; z-index: 1; }

/* État "ouvert" */
.envelope:hover .envelope__card,
.envelope.is-open .envelope__card {
  transform: translateX(-50%) translateY(-30px) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--t-slow) var(--ease),
    opacity var(--t-med) var(--ease) 100ms,
    visibility 0s;
  z-index: 5;
}

.envelope.is-open .envelope__btn {
  transform: translateY(0);
}
/* Petit clin d'oeil visuel : l'enveloppe ouverte paraît légèrement plus "ouverte" */
.envelope:hover .envelope__closed,
.envelope.is-open .envelope__closed {
  transform: translateY(6px);
}

.envelope__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.envelope__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-taupe);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.envelope__card p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0.7rem;
  color: var(--color-text);
}

/* Bloc bas "Envie d'une expérience..." */
.offers__outro {
  max-width: 1500px;                   /* rectangle encore plus large */
  margin: 9rem auto 0;                 /* beaucoup d'espace avec les enveloppes au-dessus */
  padding: 0 2rem;
  text-align: center;
}

.offers__outro-box {
  position: relative;
  border: 2.5px solid var(--c-taupe);  /* trait du rectangle plus épais */
  padding: 4.5rem 4.5rem;              /* plus grand en hauteur et largeur intérieure */
  margin-bottom: 5rem;                 /* espace accru avec la note "Chaque mariage..." */
  background-color: transparent;       /* la texture est gérée par ::before */
  overflow: visible;                   /* laisse l'image déborder */
  z-index: 1;
}

/* Texture qui DEBORDE de 15% du rectangle, à 18% d'opacité */
.offers__outro-box::before {
  content: "";
  position: absolute;
  top: -7.5%;
  left: -7.5%;
  width: 115%;
  height: 115%;
  background-image: url('../assets/images/textures-1.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  z-index: -1;                         /* sous le texte et le cadre */
  pointer-events: none;
}

.offers__outro-box p {
  font-size: 1.05rem;                  /* texte plus grand */
  line-height: 1.65;
  margin-bottom: 1rem;
  color: var(--color-text);
  position: relative;                  /* garde le texte au-dessus du ::before */
  z-index: 1;
}
.offers__outro-box p:last-child { margin-bottom: 0; }

/* Titre de la box en Relationship of melodrame, majuscules */
.offers__outro-box p strong {
  display: block;
  font-family: var(--font-display);    /* Relationship of melodrame */
  font-weight: 400;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--c-taupe);
  margin-bottom: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;           /* titre en majuscules */
}

/* Phrase forcée sur une seule ligne */
.offers__outro-line {
  white-space: nowrap;
}

.offers__outro-note {
  font-size: 1.15rem;                  /* texte plus grand */
  color: var(--color-text);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* Wrapper du bouton "Parlons de votre projet" */
.offers__cta-wrap {
  display: inline-block;
  margin-top: 4.5rem;                  /* bouton placé plus bas */
}

/* Première phrase en MAJUSCULES et GRAS */
.offers__outro-note-strong {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--c-taupe);
}


/* ==========================================================================
   10. GALERIE / SLIDER
   ========================================================================== */

.gallery {
  background-color: var(--c-beige-light);
  padding: 9rem 0 14rem;                /* beaucoup d'espace avant et après la galerie */
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--c-taupe);  /* séparateur fin pleine largeur avec la section Offres */
}

.gallery__header {
  margin-bottom: 2.5rem;
  padding: 0 1.5rem;
}

.gallery__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.5rem, 7vw, 6.5rem);   /* beaucoup plus grand */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.gallery__subtitle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-taupe);
}

.gallery__category {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--color-primary);
}

.slider {
  position: relative;
  max-width: 1800px;                   /* viewport plus large pour agrandir les photos */
  margin: 0 auto;
  padding: 0 4rem;
}

.slider__viewport {
  overflow: hidden;
  width: 100%;
}

.slider__track {
  display: flex;
  gap: 1.5rem;
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 calc((100% - 3rem) / 3);   /* 3 visibles (gap 1.5rem × 2) */
  aspect-ratio: 3 / 2;                  /* match le ratio naturel des photos → même proportions partout, pas de déformation */
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider__slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* toutes les photos remplissent le cadre, MÊMES proportions affichées */
  object-position: center;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background var(--t-fast);
  z-index: 5;
}

.slider__arrow:hover { background: #fff; }
.slider__arrow--prev { left: 0.5rem; }
.slider__arrow--next { right: 0.5rem; }
.slider__arrow svg   { width: 22px; height: 22px; }


/* ==========================================================================
   11. CONTACT — carte blanche posée sur une photo de fond
   ========================================================================== */

.contact {
  position: relative;
  padding: 6rem 1.5rem 8rem;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(116,98,89,0.55) 0%, rgba(208,186,176,0.45) 100%);
}

.contact__preamble {
  position: relative; z-index: 2;
  text-align: center;
  margin-bottom: 3rem;
  color: #fff;
}
.contact__preamble h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 4.5vw, 4rem);   /* titre nettement plus gros */
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.contact__preamble span {
  display: block;
  font-family: var(--font-body);           /* Poppins */
  font-weight: 700;                        /* bold */
  font-style: normal;
  font-size: 0.35em;                       /* sous-titre plus petit que le gros titre */
  margin-top: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;               /* majuscules */
}

.contact__card {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 560px;                      /* plus large pour que "Contactez-nous" tienne sur 1 ligne */
  background-color: #fffbee;
  padding: 3.5rem 3rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
  border: 1px solid rgba(116,98,89,0.12);
}

.contact__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.4rem);   /* titre de la carte plus gros */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-primary);
  white-space: nowrap;                     /* force sur une seule ligne */
}

.contact__form .field {
  display: block;
  margin-bottom: 1.6rem;
  position: relative;
}

.field__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-taupe);
  margin-bottom: 0.3rem;
}

.field input,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-taupe);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  padding: 0.4rem 0;
  outline: none;
  transition: border-color var(--t-fast);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--color-primary);
}

.contact__form .btn {
  display: block;
  margin: 2rem auto 0;
  min-width: 180px;
}

.contact__feedback {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 1rem;
  min-height: 1.2em;
}
.contact__feedback.is-success { color: #5a7a5a; }
.contact__feedback.is-error   { color: #a04141; }


/* ==========================================================================
   12. FOOTER — fond rose poudré, ornements, texte crème italique
   ========================================================================== */

.site-footer {
  background-color: var(--c-nude);
  color: #faf2d6;
  padding: 4rem 2rem 2rem;
  text-align: center;
  position: relative;
}

.site-footer__ornament {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
/* Teinte les SVG en #faf2d6 via filtre (fiable en local comme en ligne) */
.site-footer__ornament img {
  width: 150px;
  /* brightness(0) = tout devient noir, puis invert/sepia/hue-rotate tintent en crème */
  filter: brightness(0) saturate(100%) invert(97%) sepia(14%) saturate(574%) hue-rotate(340deg) brightness(103%) contrast(97%);
}
.site-footer__ornament--bottom {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
/* Deuxième émoticône : même dessin que le premier, retourné à l'envers */
.site-footer__ornament--bottom img {
  transform: rotate(180deg);
}

.site-footer__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #faf2d6;
  line-height: 1.3;
  margin: 0 auto 0.6rem;
  max-width: 900px;
}

.site-footer__cta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #faf2d6;
  max-width: none;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid #faf2d6;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #faf2d6;
}

.site-footer__links a { color: #faf2d6; }


/* ==========================================================================
   13. COUPLES NAVIGATION BAR — boutons inline sous le subtitle hero
   ========================================================================== */

.mi-couples-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
}

.mi-couples-bar__link {
  font-family: 'Relationship', serif;
  font-style: italic;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-taupe, #a08b79);
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
}

.mi-couples-bar__link:hover {
  border-color: rgba(160, 139, 121, 0.4);
  color: var(--c-brown-dark, #746259);
}

.mi-couples-bar__link.is-current {
  color: var(--c-brown-dark, #746259);
  border-color: rgba(116, 98, 89, 0.3);
  background: rgba(116, 98, 89, 0.06);
  pointer-events: none;
}

/* Discret séparateur entre les boutons */
.mi-couples-bar__sep {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: rgba(160, 139, 121, 0.2);
  border-radius: 1px;
}

@media (max-width: 700px) {
  .mi-couples-bar {
    gap: 0.3rem;
    margin-top: 1rem;
  }
  .mi-couples-bar__link {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }
  .mi-couples-bar__sep {
    display: none;
  }
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* --- Tablette (< 1024px) --- */
@media (max-width: 1024px) {
  .nav { padding: 1.4rem 2rem; }
  .nav__menu { gap: 1.5rem; font-size: 0.72rem; letter-spacing: 0.14em; }
  .nav__logo img { width: 130px; }

  .pillars { padding: 4rem 0; }
  .pillar { padding-left: 4vw; padding-right: 4vw; column-gap: 2.5rem; }
  .pillar__image { max-width: 340px; }

  .team { grid-template-columns: 1fr; gap: 3rem; text-align: center; padding: 5rem 1.5rem; }
  .team__image { justify-self: center; max-width: 360px; }
  /* Le mot "Team" reste bien centré sur la photo */
  .team__content { margin: 0 auto; }

  .envelopes { gap: 1.5rem; padding-top: 260px; margin-top: -260px; }
  .envelope  { width: 220px; }
  .envelope__card { width: 240px; padding: 1.6rem 1.4rem; }

  .slider { padding: 0 3rem; }
  .slider__slide { flex-basis: calc((100% - 1.5rem) / 2); } /* 2 visibles */
}

/* --- Mobile (< 700px) --- */
@media (max-width: 700px) {

  /* Nav mobile : flex pour stacker le logo + burger, puis déployer les 2 menus en dessous */
  .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: none;
    gap: 0;                           /* reset du gap desktop (2rem) qui créait un espace
                                         parasite entre les 2 lignes de menus déployées */
    padding: 1.2rem 1.5rem;
    position: absolute;                   /* reste en overlay sur la photo */
  }

  .nav__menu--left,
  .nav__menu--right {
    display: none;
    flex-basis: 100%;                     /* largeur totale quand déployé */
    order: 99;                            /* tombe tout en bas du nav */
  }

  .nav__logo img { width: 110px; }

  .nav__burger {
    display: flex;
    order: 2;
  }

  /* Menu mobile déployé : les 2 listes s'affichent empilées sous le logo/burger */
  .nav__menu.is-open {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    background: rgba(116,98,89,0.95);
    padding: 1.2rem 2rem;
    margin: 0;
    width: 100%;
    text-align: center;
  }
  /* La liste de droite passe juste après celle de gauche, sans fond dupliqué */
  .nav__menu--right.is-open {
    padding-top: 0;
  }
  .nav__menu--left.is-open {
    padding-bottom: 1.2rem;           /* même espace que le gap interne (1.2rem) :
                                         les 4 items sont régulièrement espacés */
  }

  .nav__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-active span:nth-child(2) { opacity: 0; }
  .nav__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hero { min-height: 85vh; }
  .hero__title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    white-space: normal;        /* wrap autorisé sur mobile */
  }
  .hero__subtitle { font-size: 0.85rem; letter-spacing: 0.1em; }

  /* Pillars */
  .pillars { padding: 3.5rem 1.2rem; gap: 3rem; }
  .pillar,
  .pillar--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .pillar__image, .pillar--reverse .pillar__image {
    justify-self: center;
    order: 1;
    max-width: 260px;
  }
  .pillar__text, .pillar--reverse .pillar__text {
    order: 2;
    padding: 0;
    margin: 0 auto;
    text-align: center;
  }
  .pillar__text h2 {
    font-size: 1.5rem;
  }
  .pillar__ornament,
  .pillar--reverse .pillar__ornament {
    width: 110px;
    margin: 0 auto 0.8rem;
  }

  /* Team */
  .team { padding: 4rem 1.2rem; }
  /* "Team" reste centré sur la photo ; on réduit juste la taille des lettres */
  .team__image { max-width: 280px; }
  .team__label-t   { font-size: clamp(5rem, 22vw, 8rem); }
  .team__label-eam { font-size: clamp(3.5rem, 16vw, 6rem); }

  /* Offres — la photo colle à la section Team */
  .offers { padding: 0 0 5rem; }
  .offers__title { font-size: clamp(2.4rem, 11vw, 3.8rem); }
  .offers__photo { margin: 0 0 2.5rem; }
  .offers__photo img { height: 320px; }
  .offers__intro { padding: 0 1.5rem; max-width: 100%; }
  .offers__intro p { font-size: 1rem; }

  /* CTA "CHOISISSEZ CE QUI VOUS RESSEMBLE !" sur une seule ligne */
  .offers__cta-text {
    font-size: clamp(1rem, 4.2vw, 1.4rem) !important;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .envelopes {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 2rem 1rem 0;
    margin-top: 0;
    width: 100%;
    left: auto;
    transform: none;
  }

  /* Le conteneur envelope prend la largeur de la carte */
  .envelope {
    width: min(300px, 82vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }

  /* La carte occupe tout le conteneur, s'adapte au contenu */
  .envelope__card {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none !important;
    order: -1;
    width: 100%;
    height: auto;
    margin: 0 0 0.6rem;
    padding: 2rem 1.6rem;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    box-shadow: none;
  }
  .envelope__card::before {
    background-size: contain;
    background-position: center center;
  }
  .envelope.is-open .envelope__card {
    display: flex;
  }

  .envelope__eyebrow { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .envelope__title   { font-size: 0.75rem; margin-bottom: 0.6rem; letter-spacing: 0.15em; }
  .envelope__card p  { font-size: 0.72rem; line-height: 1.45; margin-bottom: 0.4rem; }

  /* Outro — phrase ne doit plus déborder */
  .offers__outro { max-width: 100%; padding: 0 1.2rem; }
  .offers__outro-box { padding: 2rem 1.4rem; }
  .offers__outro-box p strong { font-size: 1.5rem; letter-spacing: 0.02em; }
  .offers__outro-line { white-space: normal !important; }  /* autorise le retour à la ligne */
  .offers__outro-note { font-size: 0.95rem; }
  .offers__outro-note-strong { font-size: 1rem; }

  /* Galerie */
  .slider { padding: 0 2rem; }
  .slider__slide { flex-basis: 100%; } /* 1 visible */
  .slider__arrow { width: 36px; height: 36px; }

  /* Contact */
  .contact { padding: 4rem 1.2rem 5rem; min-height: auto; }
  .contact__card { padding: 2.5rem 1.8rem; }

  /* Footer */
  .site-footer { padding: 3rem 1.2rem 2rem; }
  .site-footer__links {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ==========================================================================
   VIDÉO ACCUEIL : plein largeur (sans crop) + CTA devis
   Remplacé la section pillars (2 blocs photo/texte)
   ========================================================================== */
.home-video {
  background-color: var(--c-beige-light);
  padding: 4rem 0 5rem;
}

.home-video__frame {
  width: 100%;
}

.home-video__media {
  display: block;
  width: 100%;
  height: auto;               /* ratio 16:9 préservé — aucun crop */
  background: #111;
}

.home-video__cta {
  text-align: center;
  margin-top: 3rem;
}

.home-video__btn {
  font-size: 0.95rem;
  padding: 1.1em 3em;
}

/* Tablette */
@media (max-width: 900px) {
  .home-video { padding: 3rem 0 4rem; }
  .home-video__cta { margin-top: 2.5rem; }
}

/* Mobile */
@media (max-width: 700px) {
  .home-video { padding: 2rem 0 3rem; }
  .home-video__cta { margin-top: 2rem; }
  .home-video__btn { width: 100%; max-width: 340px; }
}