/* ─── Polices des titres et sous-titres ───
   Polices libres (licence SIL OFL, voir assets/fonts/OFL-Barlow.txt) hébergées avec le site, en
   attendant de savoir si la police de la charte (DIN 1451 Engschrift) peut être utilisée sur un site
   public (voir Notion, Version 1.1.1). Barlow Condensed (titres) et Barlow Semi Condensed
   (sous-titres), sous-ensemble « latin ». La plage de graisses déclarée (100 à 900) empêche le
   navigateur de fabriquer un faux gras : la police s'affiche telle que dessinée. */
@font-face {
  font-family: "BarlowCondensed";
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BarlowSemiCondensed";
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Oswald (texte courant), police libre (licence SIL OFL, voir assets/fonts/OFL-Oswald.txt),
   hébergée avec le site : plus aucun appel à Google Fonts. Sous-ensemble « latin » : couvre
   le français (accents, œ, €, guillemets). Police variable : toutes les graisses de 200 à 700. */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Variables ─── */
:root {
  /* Plancher de lisibilité du texte : nul par défaut, 14 px sur ordinateur (voir
     la fin du fichier). Téléphones et tablettes ne sont pas concernés. */
  --plancher-texte: 0px;
  /* Couleurs */
  --color-navy: #02193e;
  --color-orange: #e76130;
  /* Orange un peu plus foncé (15 %) pour le texte blanc posé dessus : 4,58:1 au lieu de 3,41:1
     (norme d'accessibilité WCAG AA : 4,5:1). La marque garde #e76130 partout ailleurs. */
  --color-orange-fort: #c45229;
  --color-blue: #43659f;
  --color-clair-blue: #c8d1d9;
  --color-white: #ffffff;
  --color-black: #0a0a0a;

  /* Typographie */
  --font-title: "BarlowCondensed", "Arial Narrow", sans-serif;
  --font-subtitle: "BarlowSemiCondensed", "Arial Narrow", sans-serif;
  --font-text: "Oswald", sans-serif;

  /* Espacements */
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Transitions */
  --transition: 0.3s ease;

  --header-height: 7.5rem;
}

/* ─── Reset ─── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* indispensable */
}

html {
  font-size: 1rem;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  background-color: var(--color-navy);
  color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* rendu des fontes plus propre */
}

/* Les boutons et champs de formulaire prennent par défaut une taille de texte
   fixe du navigateur (13,33 px) qui ne suivrait pas l'échelle ordinateur
   (voir la fin du fichier). On l'exprime en rem : même taille qu'avant à 16 px
   de base (13,33 px), et proportionnelle quand la base change. Les règles de
   classe plus bas prennent toujours le dessus. */
button,
input,
select,
textarea {
  font-size: max(0.8333333rem, var(--plancher-texte));
}

/* La bibliothèque d'icônes (Lucide) dessine chaque icône en 24 x 24 px fixes,
   écrits dans le HTML : elles ne suivraient pas l'échelle ordinateur. On leur
   donne la même taille en rem (24 px à 16 px de base). Les règles plus précises
   (.etape-texte svg, par exemple) gardent la priorité. */
.lucide {
  width: 1.5rem;
  height: 1.5rem;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ─── Base ─── */

/* Titres (h1, h2) en DIN Engschrift, sous-titres (h3 à h6) en Alte DIN Mittelschrift,
   comme dans la charte. Les règles de classe plus bas gardent la priorité. Ces deux
   polices n'existent qu'en une graisse : on n'impose pas de gras par-dessus. */
h1,
h2 {
  font-family: var(--font-title);
  font-weight: normal;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-subtitle);
  font-weight: normal;
}

/* ─── Messages flash ─── */
/* Jamais stylés jusqu'ici (bug découvert en Foundation Update) — le
   message de succès du formulaire de contact s'affichait sans aucune
   mise en forme depuis le début. */
.flash {
  max-width: 50rem;
  margin: 1.5rem auto;
  padding: 0.875rem 1.25rem;
  border-radius: 0.375rem;
  font-size: max(0.9375rem, var(--plancher-texte));
  border-left: 0.1875rem solid;
}

.flash--error {
  background-color: rgba(220, 53, 69, 0.1);
  border-left-color: #dc3545;
  color: #dc3545;
}

.flash--success {
  background-color: rgba(46, 204, 113, 0.1);
  border-left-color: #2ecc71;
  color: #1a8f4f;
}

/* ─── Offset header pour les pages sans hero ─── */
.page-top-offset {
  padding-top: var(--header-height);
}

.btn {
  display: inline-block;
  /* ajoute ça */
  background-color: transparent;
  /* transparent plutôt que navy */
  color: var(--color-white);
  padding: 0.75rem 1.75rem;
  /* un peu plus généreux */
  border-radius: 0.25rem;
  /* moins arrondi = plus moderne */
  border: 0.0625rem solid var(--color-white);
  font-family: var(--font-subtitle);
  font-size: max(0.875rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  transition: all var(--transition);
}

.btn:hover {
  background-color: var(--color-orange-fort);
  border-color: var(--color-orange-fort);
  transform: translateY(-0.125rem);
  /* légère élévation au lieu de scale */
}

/* ─── Header ─── */

.site-header {
  height: var(--header-height);
  background-color: transparent;
  /* transparent par défaut */
  width: 100%;
  padding: 3.125rem 2.5rem;
  position: fixed;
  /* fixed plutôt que sticky */
  top: 0;
  left: 0;
  z-index: 100;
  transition:
    background-color 0.4s ease,
    padding 0.4s ease;
}

/* Classe ajoutée par JS au scroll */
.site-header.scrolled {
  background-color: var(--color-navy);
  padding: 0.75rem 2.5rem;
  /* se rétrécit légèrement au scroll */
}

.nav-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nav-logo img {
  height: 5.625rem;
  /* contrôle la taille du logo */
  width: auto;
}

.nav-logo > span {
  color: var(--color-orange);
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 0.125rem;
  /* DIN respire mieux avec du letter-spacing */
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.nav-links-right {
  justify-content: flex-end;
}

.nav-links li a,
.nav-dropdown-toggle {
  font-family: var(--font-subtitle);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-white);
  position: relative;
  /* ← manquait ! le ::after se positionne par rapport à ça */

  border: var(--color-white) 0.0625rem solid;
  border-radius: 3.125rem;
  padding: 0.3125rem 1.25rem;
  /* largeur minimale (et non fixe) : si un mot est plus large que prévu, le
     bouton s'agrandit au lieu de laisser le texte toucher la bordure */
  min-width: 11rem;
  height: 3.125rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: var(--transition);
}

.nav-links a.active,
.nav-dropdown-toggle.active {
  background-color: var(--color-white);
  color: var(--color-black);
}

.nav-links li a:hover,
.nav-dropdown-toggle:hover {
  background-color: var(--color-white);
  color: var(--color-orange);
  transform: scale(1.08);
}

/* ─── Menu déroulant Services ─── */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle i {
  width: 1.125rem;
  height: 1.125rem;
  transition: var(--transition);
}

.nav-dropdown-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0;
  padding: 0.5rem;
  background-color: var(--color-navy);
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.625rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease,
    margin-top 0.3s ease;
}

.nav-dropdown-menu.open {
  max-height: 26.25rem;
  /* largement suffisant pour les 6 liens, sert juste à autoriser l'anim */
  opacity: 1;
  margin-top: 0.5rem;
}

/* Spécificité volontairement plus élevée que ".nav-links li a" : les <a>
   du menu déroulant sont eux aussi des "li a" à l'intérieur de
   ".nav-links", donc héritent sinon du style plein-pilule des boutons
   principaux (bordure, largeur fixe, forme de pilule). */
.nav-dropdown .nav-dropdown-menu li a {
  display: block;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-subtitle);
  font-size: max(1rem, var(--plancher-texte));
  font-weight: normal;
  color: var(--color-white);
  white-space: nowrap;
  transition: var(--transition);
}

.nav-dropdown .nav-dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-orange);
  transform: none;
  /* neutralise le scale(1.08) hérité de ".nav-links li a:hover" */
}

/* À partir de la tablette : le menu se détache en panneau flottant sous
   le bouton. En dessous, il reste dans le flux du menu mobile plein
   écran (pas de position absolue : il s'affiche empilé normalement,
   c'est le max-height qui gère l'ouverture/fermeture dans les deux cas). */
@media (min-width: 1101px) {
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 12.5rem;
    z-index: 50;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
  }
}

/* ─── Hero ─── */

.hero {
  position: relative;
  /* référence pour l'overlay et le content */
  height: 85vh;
  overflow: hidden;
  /* cache les débordements de la vidéo */
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-video {
  position: absolute;
  /* sort du flux, se superpose */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* remplit sans déformer */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* raccourci pour top:0; right:0; bottom:0; left:0 */
  background: linear-gradient(
    to bottom,
    rgba(2, 25, 62, 0.3) 0%,
    /* navy transparent en haut */ rgba(0, 0, 0, 0.6) 50%,
    /* noir au milieu */ rgba(2, 25, 62, 0.95) 100%
      /* navy opaque en bas — fondu vers le site */
  );
  z-index: 1;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--space-md);
  /* sert uniquement de repère de positionnement pour ses enfants —
     titre/catégorie/info sont chacun placés indépendamment dans les
     coins, comme sur les maquettes de Gaspard, pas centrés en bloc */
}

.hero-title {
  position: absolute;
  top: calc(var(--header-height) + var(--space-lg));
  /* sous le header (fixed, transparent, superposé au hero) — sans ça
     le titre se retrouve caché derrière/collé aux boutons de la nav */
  left: 5rem;
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--color-white);
  letter-spacing: 0.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.hero-categorie {
  position: absolute;
  top: calc(var(--header-height) + var(--space-lg));
  right: 5rem;
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--color-orange);
  letter-spacing: 0.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.hero-info {
  position: absolute;
  left: 5rem;
  top: 50%;
  transform: translateY(-50%);
  /* centré verticalement à gauche, comme sur la maquette — plus collé au bas */
  max-width: 26.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-info-titre {
  font-family: var(--font-subtitle);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-white);
  letter-spacing: 0.125rem;
  text-transform: uppercase;
}

.hero-info-description {
  font-family: var(--font-text);
  font-size: max(0.9375rem, var(--plancher-texte));
  color: var(--color-white);
  opacity: 0.85;
  line-height: 1.5;
}

.hero-cta {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
}

.hero-cta:hover {
  /* .btn:hover pose transform: translateY(-2px), qui remplacerait
     entièrement le translateX(-50%) ci-dessus (une seule valeur de
     transform possible) — on combine les deux ici pour garder le
     bouton centré tout en gardant la même légère élévation au survol
     que les autres .btn du site. */
  transform: translateX(-50%) translateY(-0.125rem);
}

.hero-player {
  z-index: 3;
  position: absolute;
  top: 50%;
  right: 5rem;
  transform: translateY(-50%);
  /* centré verticalement à droite, symétrique de .hero-info */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}

.hero-player-titre {
  font-family: var(--font-subtitle);
  font-size: max(0.8125rem, var(--plancher-texte));
  color: var(--color-white);
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-player-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-progress {
  width: 10rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.hero-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 0.125rem;
  background-color: var(--color-orange);
  /* mis à jour en JS via l'événement "timeupdate" de la vidéo active */
  transition: width 0.15s linear;
}

.hero-prev,
.hero-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--color-white);
  color: var(--color-white);
  transition: var(--transition);
}

.hero-prev:hover,
.hero-next:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* ─── Section commercial ─── */

.section-commercial {
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background-color: #0a0a0a;
}

.texte-image {
  display: flex;
  justify-content: space-between;
}

.texte-btn {
  width: 45%;
  /* fixée ici, sur l'enfant du flex .texte-image — avant, le % était posé
     sur le <p> à l'intérieur, qui se calculait par rapport à .texte-btn,
     lui-même sans largeur propre (donc dépendant de son propre contenu) */
  margin-left: 2.5rem;
}

.texte-btn p {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
}

.texte-image img {
  width: 33%;
}

/* ─── Section réalisations ─── */

.section-realisations {
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background-color: var(--color-navy);
}

.section-header {
  display: flex;
  justify-content: space-between;
  /* titre à gauche, bouton à droite */
  align-items: center;
}

.section-title {
  font-family: var(--font-title);
  color: var(--color-orange);
  /* orange pour les titres de section */
  font-size: 2.625rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
}

/* ─── Carousel ─── */

.realisations-carrousel {
  display: grid;
}

.realisations-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--transition);
}

.realisations-slide.active {
  opacity: 1;
  z-index: 1;
}

.realisations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ─── Card ─── */

.realisation-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
  cursor: pointer;
  aspect-ratio: 16/9;
  /* ← déplace le ratio ici */
}

.card-thumbnail {
  width: 100%;
  height: 100%;
  /* ← prend toute la place de la card */
  overflow: hidden;
}

.card-thumbnail img,
.card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-thumbnail-placeholder {
  background-color: #0a0a0a;
}

/* L'image zoome légèrement au hover — effet cinématographique */
.realisation-card:hover .card-thumbnail img {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  /* se superpose à la thumbnail */
  inset: 0;
  /* couvre toute la card */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* contenu collé en bas */
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Le hover se déclenche sur la CARD, pas sur l'overlay */
.realisation-card:hover .card-overlay {
  opacity: 1;
}

.card-type {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  /* au-dessus de tout, même de l'overlay */
  display: inline-block;
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-orange-fort);
  padding: 0.25rem 0.625rem;
  border-radius: 0.125rem;
}

.card-title {
  font-family: var(--font-title);
  font-size: max(1.125rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.5rem;

  /* Limite à 2 lignes maximum avec "…" automatique */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-synopsis {
  font-family: var(--font-text);
  font-size: max(0.8125rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.card-cta {
  font-family: var(--font-subtitle);
  font-size: max(0.8125rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-orange);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap 0.2s ease;
}

/* La flèche s'éloigne légèrement au hover */
.realisation-card:hover .card-cta {
  gap: 0.75rem;
}

/* ─── Section Services ─── */

.section-services {
  background-color: #0a0a0a;
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ─── Page Services : « Un accompagnement complet » en parcours numéroté ───
   Volontairement différent des cartes de « Notre façon de travailler » :
   une ligne qui relie les étapes, de la préparation à la livraison. */

.parcours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.parcours::before {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: 1.375rem;
  right: 0;
  height: 0.125rem;
  background-color: rgba(255, 255, 255, 0.35);
}

.parcours-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.parcours-numero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.4rem;
}

.parcours-titre {
  font-family: var(--font-title);
  font-size: 1.5rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-orange);
}

.parcours-etape p,
.parcours-complement p {
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

.parcours-complement {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.5rem 2rem;
  border: 0.0625rem dashed rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
}

.parcours-complement .parcours-titre {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

/* ─── Footer ─── */

.site-footer {
  background-color: var(--color-navy);
  /* manquait ! */
  padding: var(--space-lg) 5rem var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-md);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* aligné à gauche, pas centré */
  gap: 1rem;
  max-width: 18.75rem;
}

.footer-logo {
  height: 3.75rem;
  /* 300px c'était beaucoup trop grand */
  width: auto;
}

.footer-tagline {
  font-family: var(--font-subtitle);
  font-size: max(0.9375rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.5);
  /* discret */
  letter-spacing: 0.0625rem;
  line-height: 1.6;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  /* liens empilés verticalement */
  gap: 1rem;
  align-items: flex-end;
  /* alignés à droite */
}

.footer-nav a {
  font-family: var(--font-subtitle);
  font-size: max(0.875rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
  position: relative;
  padding-bottom: 0.125rem;
}

.footer-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  /* part de la droite — miroir du header */
  width: 0;
  height: 0.0625rem;
  background-color: var(--color-orange);
  transition: width var(--transition);
}

.footer-nav a:hover {
  color: var(--color-white);
}

.footer-nav a:hover::after {
  width: 100%;
}

.footer-bottom {
  text-align: center;
  padding: var(--space-sm) 0;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
  /* plus subtil que gray */
  font-family: var(--font-text);
  font-size: max(0.75rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

/* ─── Page réalisations ─── */

.page-realisations {
  padding: calc(var(--header-height) + var(--space-lg)) 5rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

/* ─── Header de page + filtres ─── */

.page-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-title {
  font-family: var(--font-title);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--color-orange);
  letter-spacing: 0.375rem;
  text-transform: uppercase;
  line-height: 1;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.filtre-btn {
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.125rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all var(--transition);
}

.filtre-btn:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.filtre-btn.active {
  color: var(--color-white);
  background-color: var(--color-orange-fort);
  border-color: var(--color-orange-fort);
}

/* ─── Production mise en avant ─── */

.prod-featured {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  aspect-ratio: 21/9;
  /* format cinéma */
  cursor: pointer;
}

.prod-featured a {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-thumbnail {
  width: 100%;
  height: 100%;
}

.featured-thumbnail img,
.featured-thumbnail .card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.prod-featured:hover .featured-thumbnail img {
  transform: scale(1.03);
}

.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  transition: opacity var(--transition);
}

.featured-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 32.5rem;
}

.featured-title {
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
}

.featured-synopsis {
  font-family: var(--font-text);
  font-size: max(0.875rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-meta {
  display: flex;
  gap: 1rem;
  font-family: var(--font-text);
  font-size: max(0.75rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Sections par type ─── */

.type-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.type-title {
  font-family: var(--font-title);
  font-size: 1.75rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.4;
  /* discret — les cards sont les stars */
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

/* ─── Cards page réalisations ─── */

.page-realisations .realisation-card {
  aspect-ratio: unset;
  background-color: #0d1117;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: transform var(--transition);
  border: 0.0625rem solid rgba(255, 255, 255, 0.06);
}

.page-realisations .realisation-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(255, 255, 255, 0.12);
}

.page-realisations .card-thumbnail {
  aspect-ratio: 16/9;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
}

.page-realisations .card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.page-realisations .realisation-card:hover .card-thumbnail img {
  transform: scale(1.04);
}

/* Cache l'overlay — on affiche les infos en dessous à la place */
.page-realisations .card-overlay {
  display: none;
}

/* ─── Zone infos toujours visible ─── */

.card-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
  /* prend tout l'espace restant */
  border-top: 0.125rem solid transparent;
  /* sera coloré au hover */
  transition: border-color var(--transition);
}

.page-realisations .realisation-card:hover .card-info {
  border-top-color: var(--color-orange);
  /* ligne orange apparaît au hover */
}

.card-info .card-title {
  font-family: var(--font-title);
  font-size: max(1.0625rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.page-realisations .realisation-card:hover .card-title {
  color: var(--color-orange);
}

.card-info .card-synopsis {
  font-family: var(--font-text);
  font-size: max(0.8125rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* max 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  /* pousse la meta vers le bas */
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: auto;
}

/* Séparateur entre année et format */
.card-meta span + span::before {
  content: "·";
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.2);
}

/* ─── Page détail réalisation ─── */

.production-detail {
  display: flex;
  flex-direction: column;
}

/* ─── Hero ─── */

.detail-hero {
  position: relative;
  /* manquait — l'overlay ne se positionnait pas */
  height: 60vh;
  overflow: hidden;
}

.detail-hero-img {
  width: 100%;
  /* 100vw peut créer un scroll horizontal */
  height: 100%;
  object-fit: cover;
}

.detail-hero-placeholder {
  width: 100%;
  height: 100%;
  background-color: #0d1117;
}

.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 25, 62, 0.3) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(2, 25, 62, 1) 100%
  );
  z-index: 1;
}

/* ─── Infos principales ─── */

.detail-infos {
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--color-navy);
}

.detail-badges {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.badge-detail {
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-orange-fort);
  padding: 0.3125rem 0.75rem;
  border-radius: 0.125rem;
}

.badge-detail--outline {
  background-color: transparent;
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.detail-year {
  font-family: var(--font-text);
  font-size: max(0.75rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-left: auto;
  /* pousse l'année à droite */
}

.detail-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 7vw, 5.625rem);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--color-orange);
  line-height: 1;
}

.detail-synopsis {
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  max-width: 43.75rem;
  /* limite la longueur des lignes pour la lisibilité */
}

/* ─── Vidéo ─── */

.detail-video {
  padding: var(--space-lg) 5rem;
  background-color: var(--color-navy);
}

.video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 0.75rem;
  overflow: hidden;
  max-width: 56.25rem;
  /* pas trop large sur grand écran */
  margin: 0 auto;
  /* centré */
  border: 0.0625rem solid rgba(231, 97, 48, 0.25);
  box-shadow:
    0 1.25rem 3.125rem rgba(0, 0, 0, 0.45),
    0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.video-wrapper:hover {
  border-color: rgba(231, 97, 48, 0.5);
  box-shadow:
    0 1.5625rem 3.75rem rgba(0, 0, 0, 0.55),
    0 0 0 0.0625rem rgba(231, 97, 48, 0.12);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Vignette + bouton play — voir docstring Twig sur .video-wrapper */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background-color: rgba(231, 97, 48, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.video-facade-play i {
  width: 2rem;
  height: 2rem;
  color: var(--color-white);
  /* décale légèrement l'icône play pour compenser son asymétrie visuelle */
  margin-left: 0.1875rem;
}

.video-facade:hover .video-facade-play {
  background-color: var(--color-orange);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ─── Équipe ─── */

.detail-equipe {
  background-color: #0a0a0a;
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.detail-suggestions {
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.detail-section-title {
  font-family: var(--font-title);
  font-size: 2rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.4;
  /* discret comme les type-title */
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.equipe-groupe-title {
  font-family: var(--font-subtitle);
  font-size: max(1rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: -0.5rem;
  /* rapproche le titre de sa grille plutôt que du gap du flex parent */
}

.equipe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.equipe-grid--figurants {
  grid-template-columns: repeat(8, 1fr);
  /* figurants : plus nombreux, moins d'infos chacun — cartes plus denses */
  gap: 0.75rem;
}

.equipe-grid--figurants .membre-card {
  padding: 1rem 0.5rem;
  gap: 0.625rem;
}

.equipe-grid--figurants .membre-photo-wrapper {
  width: 3rem;
  height: 3rem;
}

.equipe-grid--figurants .membre-photo-placeholder {
  font-size: max(1.125rem, var(--plancher-texte));
}

.equipe-toggle {
  align-self: flex-start;
  /* sinon le bouton s'étire sur toute la largeur (flex-direction: column
     du parent .detail-equipe étire ses enfants par défaut) */
}

.equipe-repliable {
  display: none;
  flex-direction: column;
  gap: 2.5rem;
  /* même espacement interne que .detail-equipe, puisque ce conteneur
     remplace les enfants directs (acteurs/figurants) qu'il regroupe */
}

.equipe-repliable.open {
  display: flex;
}

.membre-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* 24px c'était trop grand */
  background-color: rgba(255, 255, 255, 0.03);
  border: 0.0625rem solid rgba(255, 255, 255, 0.07);
  /* discret par défaut */
  border-radius: 0.5rem;
  /* moins arrondi que 25px */
  padding: 1.5rem 1rem;
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.membre-card:hover {
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-0.1875rem);
  border-color: var(--color-orange);
  /* orange uniquement au hover */
}

.membre-photo-wrapper {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.membre-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* photo bien cadrée dans le cercle */
}

.membre-photo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.125rem solid var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 1.75rem;
  /* 40px débordait du cercle */
  color: var(--color-orange);
  background-color: rgba(231, 97, 48, 0.08);
}

.membre-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centré sous la photo */
  gap: 0.25rem;
  text-align: center;
}

.membre-nom {
  font-family: var(--font-subtitle);
  font-size: max(0.875rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
  color: var(--color-white);
  text-transform: uppercase;
}

.membre-role {
  font-family: var(--font-text);
  font-size: max(0.75rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
  color: var(--color-orange);
  text-transform: uppercase;
  opacity: 0.8;
}

/* ─── Footer de la page ─── */

.detail-footer {
  padding: var(--space-md) 5rem var(--space-lg);
  background-color: var(--color-navy);
}
/* ─── Page contact ─── */

.page-contact {
  padding: calc(var(--header-height) + var(--space-lg)) 5rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  background-color: var(--color-navy);
}

.contact-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-accroche {
  font-family: var(--font-subtitle);
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.125rem;
}

/* ─── Layout deux colonnes ─── */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem; /* espace entre les deux colonnes */
  align-items: start; /* colonnes alignées en haut */
}

/* ─── Colonne gauche — infos ─── */

.contact-infos {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 0.5rem;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-info-label {
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: var(--color-orange);
}

.contact-info-value {
  /* la zone cliquable s'arrête au texte (sans cela, le lien occupait toute la largeur de la colonne) */
  width: fit-content;
  font-family: var(--font-subtitle);
  font-size: max(1rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}

.contact-info-value:hover {
  color: var(--color-white);
}

/* ─── Formulaire ─── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Honeypot anti-spam : hors-écran plutôt que display:none, pour piéger
   aussi les bots qui savent ignorer les champs masqués grossièrement. */
.contact-form__honeypot {
  position: absolute !important;
  left: -624.9375rem !important;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; /* espace entre nom et email */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form label {
  font-family: var(--font-text);
  font-size: max(0.6875rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition);
}

/* Le label monte en orange quand le champ est actif */
.form-group:focus-within label {
  color: var(--color-orange);
}

.contact-form input,
.contact-form textarea {
  width: 100%; /* prend toute la largeur disponible */
  background: transparent;
  border: none;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.2);
  padding: 0.625rem 0; /* espace au-dessus et en dessous du texte */
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  color: var(--color-white);
  outline: none; /* supprime le contour bleu natif du navigateur */
  transition: border-color var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-size: max(0.875rem, var(--plancher-texte));
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--color-orange);
}

.contact-form textarea {
  height: 8.75rem; /* hauteur fixe raisonnable */
  resize: vertical;
  line-height: 1.6;
}

/* ─── Erreurs de validation ─── */

.form-group--error input,
.form-group--error textarea {
  border-bottom-color: #e74c3c;
}

.form-error {
  font-family: var(--font-text);
  font-size: max(0.75rem, var(--plancher-texte));
  color: #e74c3c;
  letter-spacing: 0.0625rem;
}

.alert--error {
  padding: 0.875rem 1.25rem;
  background-color: rgba(231, 76, 60, 0.1);
  border-left: 0.1875rem solid #e74c3c;
  font-family: var(--font-text);
  font-size: max(0.8125rem, var(--plancher-texte));
  color: #e74c3c;
  letter-spacing: 0.0625rem;
}

/* ─── Bouton submit ─── */

.btn-contact {
  align-self: flex-start; /* le bouton ne prend pas toute la largeur */
  background-color: transparent;
  color: var(--color-white);
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  padding: 0.875rem 2.25rem;
  font-family: var(--font-subtitle);
  font-size: max(0.8125rem, var(--plancher-texte));
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  border-radius: 0.125rem;
  transition: all var(--transition);
  cursor: pointer;
}

.btn-contact:hover {
  background-color: var(--color-orange-fort);
  border-color: var(--color-orange-fort);
  transform: translateY(-0.125rem);
}
/* ─── Page services ─── */

.page-services {
  padding: calc(var(--header-height) + var(--space-lg)) 5rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  background-color: var(--color-navy);
}

/* ─── Page services Mariage ─── */

/* Section travail */
.section-travail {
  position: relative;
  padding: var(--space-lg) 5rem;
}

.travail-contenu {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
}

.travail-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.travail-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La grande photo garde ses proportions : à 100 % de hauteur, elle remplissait
   toute la cellule et le texte en dessous débordait sur la section suivante. */
.travail-texte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  object-fit: cover;
}

.section-travail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.0625rem);
  width: 0.125rem;
  background-color: var(--color-orange);
}

.travail-contenu {
  position: relative;
  z-index: 1;
  background-color: var(--color-navy);
}

.travail-titre {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}

.travail-photos figure {
  position: relative;
}

.travail-photos figcaption {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  /* le texte vertical se lit de bas en haut, comme sur la maquette */
  white-space: nowrap;
  font-size: max(0.85rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
  color: rgba(255, 255, 255, 0.8);
}

.travail-photos figure:nth-child(2) figcaption {
  left: 100%;
  margin-left: 0.625rem;
}

.travail-photos figure:nth-child(3) figcaption {
  right: 100%;
  margin-right: 0.625rem;
}

.travail-texte .surbrillance {
  background-color: var(--color-blue);
}

.travail-texte u {
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-underline-offset: 0.25rem;
}
.travail-titre h2 {
  position: relative;
  display: inline-block;
  background-color: var(--color-orange);
  padding: 0.5rem 1.5rem;
}
/* ligne orange */
.section-packs,
.section-options {
  position: relative;
}

.section-packs::before,
.section-options::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.0625rem);
  /* trait de 2 px centré pile (et non décalé d'un pixel vers la droite) */
  width: 0.125rem;
  background-color: var(--color-orange);
}

.section-packs h2,
.section-options h2 {
  position: relative;
  background-color: var(--color-navy);
}

/* section packs */
.section-packs {
  padding: var(--space-lg) 5rem;
  scroll-margin-top: var(--header-height);
  /* sans ça, le défilement vers #packs cale la section pile sous le
     header fixe, qui recouvre alors "LES 3 PACKS" */
}

.section-packs h2 {
  color: var(--color-orange);
  text-align: center;
  font-size: 5rem;
}

.articles-packs {
  display: flex;
  justify-content: center;
  gap: 9.375rem;
}

.articles-packs article {
  background-color: var(--color-clair-blue);
  color: var(--color-black);
  position: relative;
  flex: 0 1 18.75rem;
  /* largeur cible 300px — peut rétrécir sur petit écran (le 1) mais ne
     grandit plus pour remplir toute la largeur (le 0), contrairement à
     "flex: 1" qui étirait les cartes sur toute la ligne */
  min-height: 40.625rem;
  padding: 3.75rem 1.75rem 4.0625rem;
  border: 0.125rem solid transparent;
  /* transparent dès le départ, pour que l'apparition de la couleur au
     survol ne décale rien (une bordure qui apparaît "de rien" pousserait
     le contenu d'un cran) */
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.articles-packs article:hover {
  transform: translateY(-0.5rem);
  border-color: var(--color-orange);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
}

.articles-packs article h4 {
  font-size: 1.2rem;
  margin-bottom: 0.375rem;
}

.articles-packs .centre {
  margin-top: 3.75rem;
}

.articles-packs article h3 {
  background-color: var(--color-orange-fort);
  color: var(--color-white);
  text-align: center;
  padding: 0.3125rem 0.625rem;
  position: absolute;
  top: -1.25rem;
  left: 0;
}

.articles-packs .centre h3 {
  left: 50%;
  transform: translateX(-50%);
  top: -2.5rem;
}

.articles-packs ul {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: max(1.05rem, var(--plancher-texte));
  line-height: 1.7;
  margin-bottom: 2rem;
}

.articles-packs li.highlight {
  background-color: var(--color-blue);
  color: var(--color-white);
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
}

.articles-packs article span {
  background-color: var(--color-white);
  color: var(--color-black);
  text-align: center;
  padding: 1.375rem 1.25rem;
  position: absolute;
  bottom: -1.875rem;
  left: 1.25rem;
  right: 1.25rem;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Section Options */
.section-options {
  padding: var(--space-lg) 5rem var(--space-xl);
  /* padding-bottom plus grand : c'est lui qui donne la longueur du bout
     de trait visible sous l'accolade, avant la section contact */
}

.section-options header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6.25rem;
}

.section-options header img {
  width: 37.125rem;
  object-fit: cover;
}

.section-options h2 {
  color: var(--color-orange);
  text-align: center;
  font-size: 5rem;
}

.options-conditions {
  display: flex;
  justify-content: space-between;
  gap: 3.75rem;
  position: relative;
  z-index: 1;
  background-color: var(--color-navy);
  /* fond opaque + z-index : le trait vertical central passe derrière ce
     bloc et n'est visible qu'au-dessus et en dessous */
  padding: 1.5rem 0 0;
  /* pas de padding en bas : le bas du bloc doit tomber sur la dernière
     ligne d'option, qui sert de trait de fermeture à l'accolade */
}

.options-conditions::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(50% + 0.0625rem);
  border: 0.125rem solid var(--color-orange);
  border-right: none;
  border-radius: 1rem 0 0 1rem;
  pointer-events: none;
  /* accolade "[" : trait du haut, verticale à gauche, trait du bas, qui
     rejoint le trait central au-dessus et en dessous du bloc */
}

.options {
  flex: 0 0 calc(50% + 7.75rem);
  /* 50% = le centre de la page, là où passe le trait vertical ; 124px =
     largeur du prix (108) + écart (16). Les traits (hr) se terminent donc
     pile au centre, quelle que soit la largeur de la fenêtre, et le prix
     démarre juste à droite du trait central. */
}

.conditions {
  flex: 1;
  min-width: 0;
  /* prend la place restante au lieu d'une largeur fixe de 860px : plus de
     débordement horizontal, le texte passe simplement à la ligne */
}

.options-conditions .option .ligne-prix {
  display: flex;
  align-items: center;
  /* sans ça (stretch par défaut), le hr s'étire sur toute la hauteur de
     la ligne — fixée par le texte du prix, plus haut que le trait — et
     sa bordure reste collée en haut, jamais à la même hauteur que le
     texte du prix, centré lui dans sa propre ligne */
  gap: 1rem;
}

/* Dernière option : sa ligne est fusionnée avec le trait du bas de
   l'accolade (.options-conditions::before) au lieu de laisser une bande
   vide entre deux lignes parallèles. La rangée du prix fait 0 de haut
   (son contenu déborde de façon centrée), donc le bas du bloc tombe
   exactement à la hauteur de la ligne. */
.options-conditions .option:last-child {
  margin-bottom: 0;
}

.options-conditions .option:last-child .ligne-prix {
  height: 0;
  margin-top: 0.9375rem;
}

.options-conditions .option:last-child .ligne-prix hr {
  visibility: hidden;
}

.options-conditions .option .ligne-prix hr {
  flex: 1;
  border: none;
  border-top: 0.1875rem solid var(--color-orange);
  transform-origin: left;
  /* point de départ de l'animation d'apparition : le trait pousse depuis
     la verticale de l'accolade vers la droite */
}

.options-conditions .option .ligne-prix span {
  flex: 0 0 6.75rem;
  text-align: left;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: bolder;
  /* largeur fixe, alignée à gauche (juste après le trait central) : les
     prix forment une colonne
     et tous les hr ont la même longueur (avant, elle dépendait de la
     largeur du texte du prix, "à déterminer" étant bien plus large) */
}

/* Apparition au scroll : la classe "anim" n'est posée que par le JS
   (voir main.js) — sans JS, rien n'est masqué. */
.options-conditions .option.anim .ligne-prix hr {
  transform: scaleX(0);
  transition: transform 0.8s ease;
}

.options-conditions .option.anim .ligne-prix span {
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.options-conditions .option.anim.visible .ligne-prix hr {
  transform: scaleX(1);
}

.options-conditions .option.anim.visible .ligne-prix span {
  opacity: 1;
}

.options-conditions .option h3 {
  font-size: 1.3rem;
  margin: 0.75rem 0 0.375rem;
}

.options-conditions .option p {
  font-size: max(0.95rem, var(--plancher-texte));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.options-conditions .option h3,
.options-conditions .option p {
  padding-left: 1.5rem;
  /* écarte le texte de la verticale gauche de l'accolade, sans toucher
     aux hr qui, eux, doivent s'y raccorder */
}

.options-conditions .option {
  margin-bottom: 2rem;
}

.options-conditions .conditions h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.options-conditions .conditions p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.options-conditions .conditions ul {
  list-style: disc;
  padding-left: 1.25rem;
  font-size: max(1.05rem, var(--plancher-texte));
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Section Options */
.section-contact {
  padding: var(--space-lg) 5rem;
  display: grid;
  grid-template-columns: 67% 33%;
}

.section-contact h2 {
  font-size: 5rem;
}

.section-contact .logo-blanc {
  height: 5.625rem;
  justify-self: end;
}

.section-contact .infos-contact {
  grid-column: 1 / -1;
  margin: 5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-contact .infos-contact .coordonnees a {
  transition: color var(--transition);
}

.section-contact .infos-contact .coordonnees a:hover {
  color: var(--color-orange);
}

.section-contact .bandeau-img {
  display: flex;
}

.section-contact .bandeau-img img {
  height: 20rem;
  object-fit: cover;
  flex: 1;
  min-width: 0;
  /* sans ça, une image garde sa largeur intrinsèque comme largeur
     minimale dans un flex (comportement par défaut), et déborde très
     largement de la colonne de 67% — c'est ce qui poussait les photos
     jusque sous le texte "WAKATU PROD" */
}

.section-contact .bandeau-img img:first-child {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%);
  mask-image: linear-gradient(to right, transparent, black 20%);
}

.section-contact .bandeau-img img:last-child {
  -webkit-mask-image: linear-gradient(to left, transparent, black 20%);
  mask-image: linear-gradient(to left, transparent, black 20%);
}

.section-contact .slogan-services {
  display: flex;
  flex-direction: column;
  text-align: end;
}

.section-contact .slogan-services .WAKATUPROD {
  color: var(--color-orange);
  font-size: 3rem;
  font-weight: bolder;
}

.section-contact .slogan-services .slogan {
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: 500;
}

/* ─── Trait orange central réutilisable (pages Mariage et Corporate) ───
   Mettre la classe "ligne-centrale" sur une <section> : un trait vertical
   la traverse de haut en bas. Chaque enfant direct a un fond opaque et
   passe devant : le trait n'apparaît que dans les espaces entre les blocs
   (gap/marges) et dans le padding haut et bas, donc se raccorde au trait
   de la section voisine. */
.ligne-centrale {
  position: relative;
  padding: var(--space-lg) 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.ligne-centrale::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.0625rem);
  width: 0.125rem;
  background-color: var(--color-orange);
}

.ligne-centrale > * {
  position: relative;
  z-index: 1;
  background-color: var(--color-navy);
}

/* ─── Notre collaboration : 4 étapes (frise) ─── */

.collab-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 2.5rem;
}

.collab-entete img {
  width: 100%;
  height: 16.25rem;
  object-fit: cover;
}

.collab-titre {
  position: relative;
  padding-bottom: 1.5rem;
}

.collab-titre h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
  color: var(--color-orange);
}

.collab-badge {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  padding: 0.375rem 1rem;
  background-color: var(--color-orange-fort);
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: 1.3rem;
  letter-spacing: 0.125rem;
  transform: rotate(-3deg);
}

.etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.5rem 0;
}

.etapes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1.125rem;
  top: 50%;
  height: 0.375rem;
  transform: translateY(-50%);
  background-color: var(--color-white);
  border-radius: 0.1875rem;
}

.etapes::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: 1.375rem solid var(--color-white);
  border-top: 0.875rem solid transparent;
  border-bottom: 0.875rem solid transparent;
}

.etape {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  text-align: center;
}

.etape-numero {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.4rem;
}

.etape-texte {
  padding: 0 1rem;
}

.etape:nth-child(odd) .etape-texte {
  grid-row: 3;
  align-self: start;
  padding-top: 1.75rem;
}

.etape:nth-child(even) .etape-texte {
  grid-row: 1;
  align-self: end;
  padding-bottom: 1.75rem;
}

.etape-texte i,
.etape-texte svg {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-white);
}

.etape-texte h3 {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-orange-fort);
  font-size: max(1.05rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
}

.etape-texte p {
  font-size: max(1rem, var(--plancher-texte));
  line-height: 1.5;
}

/* ─── FAQ (accordéon natif <details>) ─── */

.section-faq {
  padding: var(--space-lg) 5rem var(--space-xl);
}

.section-faq h2 {
  color: var(--color-orange);
  text-align: center;
  font-size: 5rem;
}

.section-faq h2::before {
  content: "";
  display: block;
  width: 0.125rem;
  height: 2.5rem;
  background-color: var(--color-orange);
  margin: 0 auto 1.25rem;
}

.faq-intro {
  margin-top: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.faq-liste {
  max-width: 55rem;
  margin: 3rem auto 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.15);
}

.faq-item {
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.15);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-orange);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--color-orange);
}

.faq-item p {
  padding: 0 3rem 1.5rem 0;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.faq-item[open] p {
  animation: faq-ouverture 0.3s ease;
}

@keyframes faq-ouverture {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Texte enrichi (mots mis en valeur) ─── */

.texte-riche .surbrillance {
  background-color: var(--color-blue);
  padding: 0 0.25rem;
}

.texte-riche u {
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.25rem;
}

/* ─── Vignettes photo avec étiquette (page Corporate) ─── */

.vignette {
  position: relative;
}

.vignette img,
.vignette-vide {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.vignette--large img,
.vignette--large .vignette-vide {
  aspect-ratio: 16 / 6;
}

.vignette-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem dashed rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: max(0.9rem, var(--plancher-texte));
}

.etiquette {
  position: absolute;
  top: -0.75rem;
  left: -0.5rem;
  z-index: 2;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-subtitle);
  font-size: max(0.95rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.etiquette--droite {
  left: auto;
  right: -0.5rem;
  transform: rotate(3deg);
}

/* ─── Corporate : À chaque besoin sa vidéo ─── */

.besoins-contenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5rem;
  align-items: start;
}

.besoins-gauche,
.besoins-droite {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.besoins-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.besoins-contenu p {
  font-size: max(1.15rem, var(--plancher-texte));
  line-height: 1.7;
}

/* ─── Corporate : Une vidéo c'est bien / un plan média c'est mieux ─── */

/* Section plus aérée que le gap standard de .ligne-centrale */
.section-plan-media {
  gap: 6rem;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.plan-media-haut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem;
  align-items: start;
}

.plan-media-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.plan-media-col .vignette-vide {
  min-height: 13.75rem;
}

.plan-media-col h2 {
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  line-height: 1;
  color: var(--color-orange);
}

.plan-media-col p {
  font-size: max(1.15rem, var(--plancher-texte));
  line-height: 1.9;
}

/* ─── Frise verticale : « Notre collaboration » et « Un plan média, c'est mieux » ───
   Les étapes se lisent de haut en bas, reliées par un trait, sur une seule colonne. */

.frise-v {
  position: relative;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.frise-v::before {
  content: "";
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: 1.375rem;
  width: 0.125rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.frise-v-etape {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
}

.frise-v-numero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.4rem;
}

.frise-v-corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.frise-v-corps h3 {
  font-family: var(--font-title);
  font-size: 1.6rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-white);
}

.frise-v-corps p {
  font-size: max(1.05rem, var(--plancher-texte));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.frise-v-corps ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  line-height: 1.9;
}

/* ─── Corporate : Un travail sur le long terme ─── */

.long-terme-titre {
  text-align: center;
  font-size: clamp(2.2rem, 4.5vw, 4.4rem);
  line-height: 1;
  color: var(--color-orange);
}

.long-terme-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 35rem;
  margin: 0 auto;
  text-align: center;
}

.long-terme-contenu p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.durees {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 23.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-title);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.durees li {
  position: relative;
  padding-bottom: 0.875rem;
}

.durees li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.0625rem);
  width: 0.125rem;
  height: 0.75rem;
  background-color: var(--color-orange);
}

.demi-disque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 21.25rem;
  height: 10.625rem;
  padding: 1.75rem 2.5rem 0;
  border: 0.125rem solid var(--color-white);
  border-radius: 0 0 10.625rem 10.625rem;
  /* plein orange + flèche + ombre : on doit comprendre au premier regard que c'est un bouton */
  background-color: var(--color-orange-fort);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: 1.5rem;
  letter-spacing: 0.0625rem;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: -2rem;
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.demi-disque::after {
  content: "→";
  font-size: 2.25rem;
  line-height: 1;
  transition: transform var(--transition);
}

.demi-disque:hover,
.demi-disque:focus-visible {
  background-color: var(--color-white);
  color: var(--color-orange-fort);
  transform: translateY(0.25rem);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.45);
}

.demi-disque:hover::after,
.demi-disque:focus-visible::after {
  transform: translateX(0.375rem);
}

.demi-disque:focus-visible {
  outline: 0.1875rem solid var(--color-orange);
  outline-offset: 0.25rem;
}

/* ─── Corporate : Com interne / externe / marketing / RH ─── */

.couverture-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.couverture-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.couverture-forme {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
}

.couverture-forme--carre {
  background-color: #02599a;
}

.couverture-forme--rectangle {
  width: 12.5rem;
  background-color: #d2dfee;
}

.couverture-forme--triangle {
  width: 8.125rem;
  background-color: var(--color-orange);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.couverture-forme--rond {
  border-radius: 50%;
  background-color: #3a6199;
}

.couverture-carte h3 {
  font-size: 1.8rem;
  letter-spacing: 0.25rem;
}

.couverture-carte ul {
  align-self: flex-start;
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.couverture-titre {
  text-align: center;
  font-size: clamp(2rem, 4.5vw, 4.4rem);
  line-height: 1;
  color: var(--color-orange);
}

/* ─── Corporate : « Nos petites conditions » sous la FAQ ─── */

.faq-conditions {
  max-width: 55rem;
  margin: 4rem auto 0;
  padding: 2rem 2.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  border-left: 0.1875rem solid var(--color-orange);
  border-radius: 0.25rem;
}

.faq-conditions h3 {
  margin-bottom: 1rem;
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-orange);
}

.faq-conditions ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  line-height: 1.8;
}

/* ─── Page L'association ─── */

.asso-actions {
  margin-bottom: var(--space-lg);
}

.asso-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.asso-carte {
  padding: 1.75rem 1.5rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
}

.asso-carte i {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;
  color: var(--color-orange);
}

.asso-carte h3 {
  margin-bottom: 0.625rem;
  font-size: 1.4rem;
}

.asso-carte p {
  line-height: 1.6;
}

.asso-rejoindre {
  max-width: 45rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.asso-rejoindre p {
  margin-top: 0.75rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .asso-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .asso-grille {
    grid-template-columns: 1fr;
  }
}

/* ─── Page Nos services : offres Mariage / Corporate ─── */

.offres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.offre {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.03);
  transition: transform var(--transition), border-color var(--transition);
}

.offre:hover {
  transform: translateY(-0.25rem);
  border-color: var(--color-orange);
}

.offre-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.offre-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 2rem;
}

.offre-etiquette {
  padding: 0.25rem 0.75rem;
  background-color: var(--color-orange-fort);
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: max(0.9rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
}

.offre-titre {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--color-white);
}

.offre-corps p {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.offre-corps ul {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
  line-height: 1.8;
}

.offre-corps .btn {
  margin-top: auto;
}

.accompagnement {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .offres {
    grid-template-columns: 1fr;
  }

  .offre-corps {
    padding: 1.5rem;
  }
}

/* ─── Corporate : sections qui respirent (presque une hauteur d'écran) ─── */

.section-long-terme,
.section-couverture {
  min-height: calc(80vh - var(--header-height));
  justify-content: center;
  gap: 4rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.long-terme-contenu {
  gap: 3.5rem;
}

.long-terme-contenu p {
  line-height: 1.9;
}

.couverture-grille {
  gap: 4rem;
}

.couverture-carte {
  gap: 2.25rem;
}

.couverture-carte ul {
  line-height: 2;
}

/* ─── Piliers (accueil + Nos services) ─── */

.piliers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.piliers--detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.pilier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  border-left: 0.1875rem solid var(--color-orange);
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.03);
}

.piliers--detail .pilier {
  gap: 1rem;
  padding: 2.25rem;
}

.pilier-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: rgba(231, 97, 48, 0.12);
  color: var(--color-orange);
}

.pilier-icone i {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
}

.pilier-titre {
  font-family: var(--font-title);
  font-size: 1.3rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-white);
}

.pilier p {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.pilier-lien {
  margin-top: auto;
  color: var(--color-orange);
  font-family: var(--font-title);
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  text-decoration: none;
}

.pilier-lien:hover {
  text-decoration: underline;
}

.approche {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.approche-intro {
  max-width: 45rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1024px) {
  .piliers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .piliers,
  .piliers--detail {
    grid-template-columns: 1fr;
  }

  .piliers--detail .pilier {
    padding: 1.5rem;
  }
}

/* ─── CTA bas de page ─── */

.services-cta {
  display: flex;
  flex-direction: column; /* empilé verticalement, pas côte à côte */
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: var(--space-lg);
  background-color: rgba(255, 255, 255, 0.03);
  border: 0.0625rem solid rgba(255, 255, 255, 0.07);
  border-top: 0.1875rem solid var(--color-orange); /* accent orange en haut */
  border-radius: 0.25rem;
}

.services-cta-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--color-white);
}

.services-cta-sub {
  font-family: var(--font-subtitle);
  font-size: max(1.125rem, var(--plancher-texte));
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.125rem;
}

/* ─── Page à propos : en-tête façon plaquette ─── */

.apropos-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  /* le header est fixe : on réserve sa hauteur pour qu'il ne recouvre pas les photos */
  padding-top: calc(var(--header-height) + var(--space-md));
  background-color: var(--color-navy);
}

.apropos-hero-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: var(--space-lg) 3rem var(--space-lg) 5rem;
}

.apropos-hero-titre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: -5rem;
}

.apropos-hero-trait {
  flex: 0 0 4rem;
  height: 0.1875rem;
  background-color: var(--color-orange);
}

.apropos-hero-titre h1 {
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1;
  color: var(--color-orange);
}

.apropos-hero-etiquette {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-subtitle);
  font-size: max(1.5rem, var(--plancher-texte));
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.apropos-hero-texte p:not(.apropos-hero-etiquette) {
  font-family: var(--font-text);
  font-size: max(1.5rem, var(--plancher-texte));
  line-height: 1.4;
  color: var(--color-white);
}

.apropos-hero + .page-a-propos {
  padding-top: var(--space-xl);
}

.apropos-hero-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.apropos-hero-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ─── Page à propos ─── */

.page-a-propos {
  padding: calc(var(--header-height) + var(--space-lg)) 5rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  background-color: var(--color-navy);
}

.apropos-story {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}

.apropos-story-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.apropos-story-text p {
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.apropos-story-image img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  object-fit: cover;
  border: 0.0625rem solid rgba(255, 255, 255, 0.07);
}

/* Bande "ADN" — traitement volontairement différent des cartes classiques
   (services, valeurs) : plus graphique, façon manifeste/slogan. */
.apropos-adn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-top: 0.0625rem solid rgba(231, 97, 48, 0.25);
  border-bottom: 0.0625rem solid rgba(231, 97, 48, 0.25);
}

.apropos-adn-words {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.apropos-adn-word {
  font-family: var(--font-title);
  font-size: clamp(1.625rem, 5vw, 2.75rem);
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: var(--color-orange);
}

.apropos-adn-sep {
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: rgba(255, 255, 255, 0.25);
}

.apropos-adn-tagline {
  font-family: var(--font-text);
  font-size: max(1rem, var(--plancher-texte));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 35rem;
}

.apropos-adn-slogan {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-subtitle);
  font-size: max(1.125rem, var(--plancher-texte));
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-orange);
}

.apropos-cta-buttons {
  display: flex;
  gap: 1rem;
}

/* ─── Pages légales (mentions légales, politique de confidentialité) ───
   Jamais stylées jusqu'ici — bug découvert en écrivant la politique de
   confidentialité, même famille que .flash et .alert--error avant elles :
   aucune règle ne ciblait .page-mentions-legales/.legal-content, le
   contenu s'affichait donc collé aux bords, sans hiérarchie de titres. */

.page-legal {
  padding: calc(var(--header-height) + var(--space-lg)) 5rem var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background-color: var(--color-navy);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 45rem;
}

.legal-content h2 {
  font-family: var(--font-subtitle);
  font-size: 1.25rem;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--color-orange);
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.legal-content p {
  font-family: var(--font-text);
  font-size: max(0.9375rem, var(--plancher-texte));
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.legal-content a {
  color: var(--color-orange);
  text-decoration: underline;
}

.legal-content strong {
  color: var(--color-white);
}

.legal-content ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  font-family: var(--font-text);
  font-size: max(0.9375rem, var(--plancher-texte));
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

/* Information que seule l'association peut fournir : bien visible tant qu'elle manque. */
.a-completer {
  padding: 0 0.25rem;
  border-radius: 0.125rem;
  background-color: rgba(231, 97, 48, 0.3);
  color: var(--color-white);
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* ─── Hamburger button — visible uniquement sur mobile ─── */

.nav-hamburger {
  display: none; /* caché sur desktop */
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 200;
}

.nav-hamburger span {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background-color: var(--color-white);
  border-radius: 0.125rem;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center;
}

/* Animation des 3 barres → croix quand menu ouvert */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* ════════════════════════════════════════
   TABLETTE — max 1024px
   ════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Réduit les paddings latéraux */
  .section-realisations,
  .section-services,
  .page-realisations,
  .page-services,
  .page-contact,
  .page-a-propos,
  .page-legal,
  .detail-infos,
  .detail-video,
  .detail-equipe,
  .detail-suggestions,
  .detail-footer,
  .site-footer {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  /* En-tête à propos : texte au-dessus, photos en dessous */
  .apropos-hero {
    grid-template-columns: 1fr;
  }

  .apropos-hero-texte {
    padding: 2rem 2.5rem 2.5rem;
  }

  .apropos-hero-titre {
    margin-left: 0;
  }

  /* Story à propos : deux colonnes → empilé */
  .apropos-story {
    grid-template-columns: 1fr;
  }

  /* Grille réalisations : 3 → 2 colonnes */
  .realisations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grille équipe : 5 → 3 colonnes */
  .equipe-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Figurants : 8 → 4 colonnes */
  .equipe-grid--figurants {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Dashboard stats : 4 → 2 colonnes */
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Prod mise en avant : ratio moins large */
  .prod-featured {
    aspect-ratio: 16/9;
  }
}

/* ════════════════════════════════════════
   MOBILE — max 767px
   ════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ─── Paddings ─── */

  .section-realisations,
  .section-services,
  .page-realisations,
  .page-services,
  .page-contact,
  .page-a-propos,
  .page-legal,
  .detail-infos,
  .detail-video,
  .detail-equipe,
  .detail-suggestions,
  .detail-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Réduit les espacements verticaux */
  .section-realisations,
  .section-services,
  .page-realisations,
  .page-services,
  .page-contact,
  .page-a-propos,
  .page-legal {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 3rem;
    gap: 2rem;
  }

  .apropos-hero-texte {
    padding: 2rem 1.25rem 2rem;
  }

  /* Mots de l'ADN empilés, séparateurs masqués */
  .apropos-adn-words {
    flex-direction: column;
    gap: 0.5rem;
  }

  .apropos-adn-sep {
    display: none;
  }

  /* Boutons du CTA empilés */
  .apropos-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .apropos-cta-buttons .btn {
    text-align: center;
  }

  /* ─── Hero ─── */

  .hero {
    height: 70vh; /* un peu moins haut sur mobile */
  }

  .hero-title {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
  }

  /* ─── Grilles → 1 colonne ─── */

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

  /* Parcours : étapes empilées, la ligne devient verticale */
  .parcours {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .parcours::before {
    top: 1.375rem;
    bottom: 1.375rem;
    left: 1.375rem;
    right: auto;
    width: 0.125rem;
    height: auto;
  }

  .parcours-etape {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
  }

  .parcours-numero {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .parcours-complement {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

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

  .equipe-grid--figurants {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ─── Section header ─── */

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  /* ─── Prod mise en avant ─── */

  .prod-featured {
    aspect-ratio: 4/3; /* plus carré sur mobile */
  }

  .featured-overlay {
    padding: 1.5rem 1.25rem;
  }

  .featured-content {
    max-width: 100%;
  }

  /* ─── Contact ─── */

  .contact-layout {
    grid-template-columns: 1fr; /* 2 colonnes → 1 colonne */
    gap: 2.5rem;
  }

  .form-row {
    grid-template-columns: 1fr; /* nom et email empilés */
  }

  /* ─── Footer ─── */

  .site-footer {
    padding: 3rem 1.25rem 1.5rem;
  }

  .footer-main {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-nav {
    align-items: flex-start; /* liens alignés à gauche sur mobile */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }

  /* ─── Page détail ─── */

  .detail-hero {
    height: 40vh;
  }

  .detail-infos,
  .detail-video,
  .detail-equipe,
  .detail-suggestions,
  .detail-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* ─── Filtres ─── */

  .filtres {
    gap: 0.5rem;
  }

  .filtre-btn {
    padding: 0.375rem 0.75rem;
    font-size: max(0.625rem, var(--plancher-texte));
  }

  /* ─── Page réalisations ─── */

  .page-realisations {
    padding: calc(var(--header-height) + 2rem) 1.25rem 3rem;
  }

  .page-title {
    font-size: clamp(2.25rem, 10vw, 3.75rem);
  }
}

@media (max-width: 767px) {
  /* Hero détail — hauteur auto pour ne pas couper */
  .detail-hero {
    height: auto; /* s'adapte au contenu */
    max-height: 55vh;
  }

  .detail-hero-img {
    width: 100%;
    height: 55vw; /* proportionnel à la largeur */
    object-fit: cover;
    object-position: center top; /* cadre sur le haut de l'image */
  }

  /* Cards réalisations — ratio moins agressif sur mobile */
  .realisation-card {
    aspect-ratio: 4/3; /* moins large que 16/9 */
  }

  .page-realisations .card-thumbnail {
    aspect-ratio: 4/3;
  }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — pages Mariage, Corporate, Nos services, accueil
   (ajouté après les règles historiques : même spécificité, donc
   l'ordre dans le fichier fait foi)
   ════════════════════════════════════════════════════════════════ */

/* Les listes à puces des pages de service ont besoin de leurs puces
   (le reset global les retire). */
.offre-corps ul,
.couverture-carte ul,
.faq-conditions ul {
  list-style: disc;
}

/* Photos d'en-tête des options : largeur cible 594px, mais elles
   rétrécissent avec la fenêtre (sinon elles débordent sous ~1400px) */
.section-options header img {
  width: auto;
  flex: 0 1 37.125rem;
  min-width: 0;
}

/* ─── Tablette — max 1024px ─── */

@media (max-width: 1024px) {
  .section-commercial,
  .section-travail,
  .section-packs,
  .section-options,
  .section-contact,
  .section-faq,
  .ligne-centrale {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .section-packs h2,
  .section-options h2,
  .section-contact h2 {
    font-size: 3.5rem;
  }

  .articles-packs {
    gap: 2rem;
  }


  .besoins-contenu,
  .plan-media-haut {
    gap: 3rem;
  }

  .couverture-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3.5rem;
  }

  .section-contact .slogan-services .WAKATUPROD {
    font-size: 2.2rem;
  }

  .section-contact .slogan-services .slogan {
    font-size: 1.8rem;
  }
}

/* ─── Mobile — max 767px ─── */

@media (max-width: 767px) {
  :root {
    --header-height: 5.25rem;
  }

  /* Header plus compact */
  .site-header,
  .site-header.scrolled {
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
  }

  .nav-main {
    width: 100%;
    align-items: center;
  }

  /* ── Hero : titre et catégorie empilés, infos et player en bas ── */
  .hero {
    height: max(85svh, 37.5rem);
  }

  .hero-content {
    padding: 0 1.25rem;
  }

  .hero-title,
  .hero-categorie {
    left: 1.25rem;
    right: 1.25rem;
    font-size: clamp(1.875rem, 9vw, 2.5rem);
    letter-spacing: 0.1875rem;
  }

  .hero-categorie {
    top: calc(var(--header-height) + var(--space-md) + 3rem);
    font-size: clamp(1.5rem, 7vw, 1.875rem);
  }

  .hero-title {
    top: calc(var(--header-height) + var(--space-md));
  }

  .hero-info {
    top: auto;
    bottom: 6.875rem;
    left: 1.25rem;
    right: 1.25rem;
    transform: none;
    max-width: none;
  }

  .hero:has(.hero-player) .hero-info {
    bottom: 11.875rem;
  }

  .hero-player {
    top: auto;
    bottom: 5.5rem;
    left: 1.25rem;
    right: 1.25rem;
    transform: none;
    align-items: stretch;
  }

  .hero-player-titre {
    white-space: normal;
  }

  .hero-player-controls {
    justify-content: space-between;
  }

  .hero-progress {
    flex: 1;
    width: auto;
  }

  .hero-cta {
    bottom: 1.75rem;
  }

  /* ── Sections génériques : marges latérales de 20px ── */
  .section-commercial,
  .section-travail,
  .section-packs,
  .section-options,
  .section-contact,
  .section-faq,
  .ligne-centrale {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section-commercial,
  .section-travail,
  .section-packs,
  .section-options,
  .section-contact,
  .section-faq,
  .ligne-centrale {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .ligne-centrale {
    gap: 2.25rem;
  }

  .section-packs h2,
  .section-options h2,
  .section-contact h2 {
    font-size: 2.4rem;
  }

  /* ── Accueil : "Montrer votre identité" ── */
  .texte-image {
    flex-direction: column;
    gap: 2rem;
  }

  .texte-btn {
    width: 100%;
    margin-left: 0;
  }

  .texte-btn p {
    font-size: max(1.15rem, var(--plancher-texte));
    margin-bottom: 1.5rem;
  }

  .texte-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* ── Mariage : Notre travail ── */
  .travail-contenu {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .travail-titre {
    margin-bottom: 0;
  }

  .travail-titre h2 {
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
  }

  .travail-photos {
    gap: 1.25rem 1rem;
    align-items: start;
  }

  /* height: 100% (desktop) fait déborder les images dans une grille
     à une colonne : hauteur libre + ratio fixe à la place */
  .travail-photos img,
  .travail-texte img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .travail-texte img {
    margin-bottom: 1.25rem;
  }

  /* Légendes verticales : repassées sous la photo, en horizontal */
  .travail-photos figcaption,
  .travail-photos figure:nth-child(2) figcaption,
  .travail-photos figure:nth-child(3) figcaption {
    position: static;
    left: auto;
    right: auto;
    margin: 0.5rem 0 0;
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    text-align: center;
  }

  /* ── Mariage : collaboration (frise → ligne du temps verticale) ── */
  .collab-entete {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .collab-entete img {
    height: 11.25rem;
  }

  .collab-titre {
    padding-bottom: 2.25rem;
  }

  .collab-titre h2 {
    font-size: 2.6rem;
  }

  .etapes {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0 0 3rem;
  }

  .etapes::before {
    left: 1.1875rem;
    right: auto;
    top: 0;
    bottom: 0.875rem;
    width: 0.375rem;
    height: auto;
    transform: none;
  }

  .etapes::after {
    left: 0.625rem;
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
    border-left: 0.875rem solid transparent;
    border-right: 0.875rem solid transparent;
    border-top: 1.375rem solid var(--color-white);
    border-bottom: 0;
  }

  .etape {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 1.125rem;
    justify-items: start;
    align-items: start;
    text-align: left;
  }

  .etape-numero {
    grid-row: 1;
    grid-column: 1;
  }

  .etape:nth-child(odd) .etape-texte,
  .etape:nth-child(even) .etape-texte {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    padding: 0.25rem 0 1.75rem;
  }

  /* ── Mariage : packs ── */
  .articles-packs {
    flex-direction: column;
    align-items: center;
    gap: 4.5rem;
    padding-top: 1.5rem;
  }

  .articles-packs article {
    flex: 0 0 auto;
    width: 100%;
    max-width: 21.25rem;
    min-height: 0;
    padding-bottom: 5rem;
  }

  .articles-packs .centre {
    margin-top: 1.5rem;
  }

  /* ── Mariage : options ── */
  .section-options header {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .section-options header img {
    flex: none;
    width: 100%;
    height: 11.25rem;
  }

  /* fond opaque : le trait central ne doit pas traverser les photos */
  .section-options header {
    position: relative;
    z-index: 1;
    background-color: var(--color-navy);
  }

  .options-conditions {
    flex-direction: column;
    gap: 2.5rem;
    padding-top: 0;
  }

  /* L'accolade centrale n'a pas de sens en une colonne */
  .options-conditions::before {
    display: none;
  }

  .options {
    flex: none;
    width: 100%;
  }

  .options-conditions .option .ligne-prix {
    gap: 0.75rem;
  }

  .options-conditions .option h3,
  .options-conditions .option p {
    padding-left: 0;
  }

  /* ── Mariage + Corporate : contact ── */
  .section-contact {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .section-contact .logo-blanc {
    height: 3.5rem;
  }

  .section-contact .infos-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 2.5rem 0;
  }

  .section-contact .bandeau-img {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .section-contact .bandeau-img img {
    flex: 1 1 calc(50% - 0.375rem);
    height: 8.75rem;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .section-contact .bandeau-img img:first-child,
  .section-contact .bandeau-img img:last-child {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .section-contact .slogan-services {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
  }

  .section-contact .slogan-services .WAKATUPROD {
    font-size: 1.8rem;
  }

  .section-contact .slogan-services .slogan {
    font-size: 1.3rem;
  }

  /* ── FAQ ── */
  .section-faq h2 {
    font-size: 2.4rem;
  }

  /* ── Corporate : besoins ── */
  .besoins-contenu {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .besoins-grille {
    gap: 1.5rem 1rem;
  }

  .besoins-contenu p {
    font-size: max(1.05rem, var(--plancher-texte));
  }

  /* ── Corporate : plan média ── */
  .section-plan-media {
    gap: 3.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .plan-media-haut {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }

  .plan-media-col {
    gap: 1.5rem;
  }

  .plan-media-col h2 {
    font-size: 2.4rem;
  }

  .plan-media-col p {
    font-size: max(1.05rem, var(--plancher-texte));
    line-height: 1.7;
  }

  /* ── Corporate : sections "qui respirent" ── */
  .section-long-terme,
  .section-couverture {
    min-height: 0;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .long-terme-contenu {
    gap: 2rem;
  }

  .long-terme-contenu p {
    line-height: 1.7;
  }

  .demi-disque {
    max-width: 18.75rem;
    height: 9.375rem;
    padding: 1.25rem 1.75rem 0;
    margin-top: -1rem;
  }

  .couverture-grille {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .couverture-carte {
    gap: 1.25rem;
  }

  .couverture-forme {
    width: 5.625rem;
    height: 5.625rem;
  }

  .couverture-forme--rectangle {
    width: 9.375rem;
  }

  .couverture-forme--triangle {
    width: 6.25rem;
  }

  .couverture-carte h3 {
    font-size: 1.5rem;
  }

  .couverture-carte ul {
    align-self: center;
    line-height: 1.8;
  }

}

/* ─── Navigation : menu hamburger jusqu'à 1100px ───
   Les 6 pilules de 160px + le logo demandent ~1240px : en dessous, la
   barre débordait de l'écran (tablettes, petits portables). */

@media (max-width: 1100px) {
  .nav-links {
    display: none;
    position: fixed;
    inset: 0; /* couvre tout l'écran */
    background-color: var(--color-navy);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 150;
  }

  /* Quand le menu est ouvert — classe ajoutée par JS */
  .nav-links.open {
    display: flex;
  }

  /* Les deux listes (position: fixed; inset: 0) se superposeraient :
     on leur donne chacune une moitié d'écran, alignée vers le centre,
     pour qu'elles s'empilent comme un seul menu. */
  .nav-links-left {
    top: 0;
    bottom: 50%;
    justify-content: flex-end;
    padding-bottom: 1rem;
  }

  .nav-links-right {
    top: 50%;
    bottom: 0;
    justify-content: flex-start;
    padding-top: 1rem;
  }

  .nav-links li a,
  .nav-dropdown-toggle {
    font-size: 1.75rem;
    letter-spacing: 0.25rem;
    width: 17.5rem;
  }

  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav-dropdown .nav-dropdown-menu li a {
    width: auto;
    font-size: max(1.125rem, var(--plancher-texte));
    letter-spacing: 0.0625rem;
    text-align: center;
  }

  .nav-hamburger {
    display: flex;
    z-index: 200; /* au-dessus du menu ouvert */
  }

  .nav-main {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .nav-logo img {
    height: 2.25rem;
  }

  .nav-links li a,
  .nav-dropdown-toggle {
    width: 15rem;
    font-size: 1.5rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   ÉCHELLE ORDINATEUR (à partir de 1101 px de large)

   Toutes les longueurs du site sont en rem : ramener la taille de base de
   16 px à 12 px (75 %) donne exactement le rendu qu'on obtenait en réglant
   le navigateur à 75 % de zoom, sans que le visiteur ait rien à faire.
   Les téléphones et les tablettes (1100 px et moins) gardent 16 px : rien
   ne change pour eux. Le pourcentage plutôt qu'une valeur en px respecte
   la taille de texte choisie par chaque visiteur dans son navigateur.
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1101px) {
  :root {
    --plancher-texte: 14px;
  }

  html {
    font-size: 75%;
  }
}

/* PLANCHER DE LISIBILITÉ : à 75 %, 55 tailles de texte tombaient sous 14 px (jusqu'à
   8 px). Chaque taille inférieure s'écrit max(taille, var(--plancher-texte)) : sur
   ordinateur le texte ne descend jamais sous 14 px ; ailleurs la variable vaut 0 et
   rien ne change. Les tailles au-dessus de 14 px à 75 % ne sont pas touchées. */

/* ─── Page Mariage : sections plus aérées ─── */

.section--aeree {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.section--aeree.ligne-centrale {
  gap: 4.5rem;
}

@media (max-width: 767px) {
  .section--aeree {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section--aeree.ligne-centrale {
    gap: 3rem;
  }
}