/* Airmedia — l'identité commune (16/10/2026, Rachid : « ONELLA devient Airmedia », « le même branding que Airmedia
   Films, le marron doré »). Reprise d'Airmedia Films (assets/css/base.css de ce projet) : Cormorant Garamond pour les
   titres, Barlow pour le texte, Corinthia pour un seul mot mis en valeur par titre et pour le logo écrit ; l'or antique
   et son dégradé ; la « nuit » chaude des fonds sombres ; le crème des fonds clairs. L'ancienne identité ne revient
   nulle part. Utilisée par l'accueil, les pages légales et la 404 ; les propositions, le guide et les autres pages
   reprennent les mêmes jetons. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/barlow-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Corinthia'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/corinthia.woff2') format('woff2'); }

:root {
  --creme: #f9f8f6;
  --creme-sombre: #f3ecdd;
  --papier: #ffffff;
  --encre: #1a1612;
  --texte: #3d372f;
  --attenue: #7a7168;
  --bordure: rgba(192, 170, 127, 0.24);
  /* L'or antique, du plus sombre au plus clair. */
  --or: #a67940;
  --or-texte: #7d5a2c;   /* étiquettes et petits textes dorés sur fond clair (lisibles) */
  --or-clair: #e7bc76;
  --or-lumiere: #f4cd91; /* sur fond sombre */
  --dore-jour: linear-gradient(100deg, #7e5626 0%, #b8864a 22%, #e9c283 44%, #f6d59c 50%, #c99a57 62%, #9a6b35 82%, #7e5626 100%);
  --dore-nuit: linear-gradient(100deg, #c99a57 0%, #f1cf92 40%, #fbe3b6 52%, #d9aa66 70%, #b98a4b 100%);
  --dore-bouton: linear-gradient(100deg, #c99a57 0%, #ecc788 45%, #f6d9a4 55%, #d2a462 100%);
  --or-reflet: var(--dore-jour);
  /* La nuit chaude : de l'encre vers un brun doré, en diagonale. Tous les fonds sombres. */
  --fond-nuit: linear-gradient(160deg, #1a1612 0%, #2c231a 45%, #54402c 100%);
  --fond-nuit-voile: linear-gradient(160deg, rgba(26, 22, 18, 0.95) 0%, rgba(44, 35, 26, 0.95) 45%, rgba(84, 64, 44, 0.95) 100%);
  --ombre-carte: 0 12px 48px rgba(26, 22, 18, 0.10);
  --ombre-douce: 0 24px 60px -28px rgba(54, 38, 18, 0.45);
  --rayon: 12px;
  --rayon-grand: 20px;
  --police-titre: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --police-texte: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --police-script: 'Corinthia', 'Snell Roundhand', 'Brush Script MT', cursive;
  --largeur: 1180px;
  --marge: clamp(20px, 4vw, 48px);
  --entete-hauteur: 88px;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.mouvement-reduit { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 400; color: var(--encre); margin: 0; letter-spacing: -0.012em; }
h1 { font-size: clamp(44px, 1.1rem + 5vw, 92px); line-height: 1; font-weight: 300; }
h2 { font-size: clamp(36px, 1.2rem + 3.3vw, 66px); line-height: 1.04; font-weight: 300; text-wrap: balance; }
h3 { font-size: clamp(23px, 1.05rem + 0.9vw, 30px); line-height: 1.15; font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--encre); }
::selection { background: var(--or-clair); color: var(--encre); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }

/* Le mot mis en valeur : l'écriture Corinthia, droite, dorée (son dégradé à l'écran). Un seul par titre. */
h1 em, h2 em, h3 em, .dore, .logo-ecrit, .script {
  font-family: var(--police-script); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--or);
}
h1 em, h2 em, .dore { font-size: 1.42em; line-height: 0.7; padding-inline: 0.04em 0.12em; margin-right: -0.1em; }
h1 em, h2 em { white-space: nowrap; }
@media (max-width: 359px) { h1 em, h2 em { white-space: normal; } }
h3 em { font-size: 1.5em; line-height: 0.7; padding-inline: 0.04em 0.12em; margin-right: -0.08em; }
p .dore { font-size: 1.7em; line-height: 0.5; }
.logo-ecrit { display: inline-block; line-height: 1; word-spacing: 0.19em; white-space: nowrap;
  padding: 0.12em 0.14em 0.2em 0.08em; margin: -0.12em -0.14em -0.2em -0.08em; }
@media screen {
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    h1 em, h2 em, h3 em, .dore, .logo-ecrit, .script {
      background-image: var(--or-reflet); background-size: 220% 100%; background-position: 30% 50%;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    .logo-ecrit { background-size: 100% 100%; background-position: 0 50%; }
  }
}
/* Les petits mots en Corinthia sur fond clair (titres h3) : un or plus soutenu, sinon le reflet pâle les rend peu lisibles. */
h3 em { --or-reflet: linear-gradient(100deg, #7e5626 0%, #9a6b35 30%, #c3924f 52%, #9a6b35 76%, #7e5626 100%); }
.nuit, .section--nuit, .entete, .pied, .nuit h3 em, .section--nuit h3 em { --or-reflet: var(--dore-nuit); }
@media (forced-colors: active) { h1 em, h2 em, h3 em, .dore, .logo-ecrit, .script { -webkit-text-fill-color: currentColor; background: none; } }

/* Utilitaires */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--encre); color: var(--creme-sombre); border-radius: var(--rayon); transition: top 0.2s; }
.evitement:focus { top: 16px; }
.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }
.conteneur--etroit { max-width: 780px; }
.section { padding-block: clamp(76px, 10vw, 136px); position: relative; }
.section--blanc { background: var(--papier); }
.section--nuit { background: var(--fond-nuit); color: rgba(243, 236, 221, 0.86); }
.section--nuit h1, .section--nuit h2, .section--nuit h3, .section--nuit strong { color: var(--creme-sombre); }
.centre { text-align: center; }
.sans-coupure { white-space: nowrap; }

/* Étiquettes : Barlow espacée, or antique, entre deux filets (« — LE PREMIER RENDEZ-VOUS — »). */
.etiquette { display: flex; align-items: center; gap: 16px; width: fit-content; margin: 0 0 18px; font-weight: 500; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--or-texte); }
.etiquette::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.centre .etiquette { margin-inline: auto; }
.centre .etiquette::after { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.section--nuit .etiquette, .nuit .etiquette { color: var(--or-lumiere); }
.filet { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--or), transparent); opacity: 0.7; }
.chapeau { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; max-width: 40em; }
.centre .chapeau { margin-inline: auto; }

/* Liens : soulignement qui se retire puis se redessine */
.lien { position: relative; text-decoration: none; color: inherit; }
.lien::before, .lien::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: right; transition: transform 0.3s ease; }
.lien::after { transform: scaleX(0); transform-origin: left; transition-delay: 0.15s; }
.lien:hover::before, .lien:focus-visible::before { transform: scaleX(0); }
.lien:hover::after, .lien:focus-visible::after { transform: scaleX(1); }

/* Boutons : la feuille d'or, un reflet qui glisse au survol. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 30px; border-radius: var(--rayon); border: 1px solid transparent;
  font-family: var(--police-texte); font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.5s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bouton:hover, .bouton:focus-visible { transform: translateY(-1px); }
.bouton--principal { background: var(--dore-bouton); background-size: 200% 100%; background-position: 0% 50%; color: var(--encre); box-shadow: 0 10px 30px -14px rgba(111, 75, 32, 0.55); }
.bouton--principal:hover, .bouton--principal:focus-visible { background-position: 100% 50%; box-shadow: 0 16px 34px -14px rgba(111, 75, 32, 0.6); }
.bouton--secondaire { background: transparent; color: var(--encre); border-color: var(--or); }
.bouton--secondaire:hover, .bouton--secondaire:focus-visible { background: rgba(166, 121, 64, 0.1); }
.nuit .bouton--secondaire, .section--nuit .bouton--secondaire { color: var(--creme-sombre); border-color: rgba(231, 188, 118, 0.6); }
.nuit .bouton--secondaire:hover, .section--nuit .bouton--secondaire:hover { background: rgba(231, 188, 118, 0.14); }
.bouton svg { flex: none; width: 18px; height: 18px; }
.icone { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Cartes */
.carte { background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); }

/* En-tête : transparent sur le haut de page sombre, crème au défilement. */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--entete-hauteur); color: var(--creme-sombre);
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.45s var(--courbe); }
.entete__interieur { height: 100%; width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.entete__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; text-decoration: none; }
.entete__logo .logo-ecrit { font-size: 44px; }
/* La signature sous le logo (Rachid, 16/10/2026 : « Images, idées & communication », comme « Vidéaste de mariage en
   Provence » sous Airmedia Films). */
.entete__signature { padding-left: 4px; font-family: var(--police-texte); font-size: 9.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; color: var(--or-lumiere); }
.entete.est-fixe .entete__signature, .entete--clair .entete__signature, .menu-ouvert .entete__signature { color: var(--or-texte); }
.entete__nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.entete__nav a:not(.bouton) { font-weight: 500; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: inherit; position: relative; padding-block: 6px; }
.entete__nav a:not(.bouton)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--or-clair); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.entete__nav a:not(.bouton):hover::after, .entete__nav a:not(.bouton)[aria-current="true"]::after { transform: scaleX(1); }
.entete__cta { min-height: 42px; padding: 10px 22px; font-size: 13px; }
.entete.est-fixe, .entete--clair { background: rgba(249, 248, 246, 0.88); color: var(--encre); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 var(--bordure);
  --or-reflet: linear-gradient(100deg, #7e5626 0%, #9a6b35 25%, #c3924f 50%, #9a6b35 75%, #7e5626 100%); }
.entete.est-fixe .entete__nav a:not(.bouton)::after, .entete--clair .entete__nav a:not(.bouton)::after { background: var(--or); }
.entete.est-cache { transform: translateY(-100%); }
.entete__lecture { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dore-nuit); transform-origin: left; transform: scaleX(var(--lecture, 0)); opacity: 0; transition: opacity 0.3s ease; }
.entete.est-fixe .entete__lecture { opacity: 1; }
.entete__menu { display: none; width: 44px; height: 44px; padding: 10px; margin-left: auto; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.entete__menu span[aria-hidden] { display: block; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; }
.menu-ouvert .entete__menu span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-ouvert .entete__menu span:nth-child(2) { opacity: 0; }
.menu-ouvert .entete__menu span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 899px) {
  :root { --entete-hauteur: 76px; }
  .entete__logo .logo-ecrit { font-size: 36px; }
  .entete__signature { font-size: 8.5px; letter-spacing: 0.2em; }
  .entete__menu { display: flex; }
  .entete__nav { position: fixed; inset: var(--entete-hauteur) 0 0; flex-direction: column; justify-content: center; gap: 30px; background: rgba(249, 248, 246, 0.97); color: var(--encre); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
  .entete__nav a:not(.bouton) { font-size: 15px; }
  .menu-ouvert .entete__nav { opacity: 1; visibility: visible; }
  .menu-ouvert .entete { background: rgba(249, 248, 246, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--encre); transform: none; }
  .menu-ouvert body { overflow: hidden; }
}

/* Pied de page : la nuit, le logo écrit en grand. */
.pied { background: var(--fond-nuit); color: var(--creme-sombre); padding-block: 64px 36px; text-align: center; box-shadow: inset 0 1px 0 rgba(231, 188, 118, 0.22); }
.pied__interieur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.pied p { margin: 0; }
.pied__nom { font-size: 64px; line-height: 1; }
.pied__role { margin-top: 10px !important; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--or-lumiere); font-weight: 500; }
.pied__contact { margin-top: 18px !important; font-size: 15px; line-height: 1.8; }
.pied__contact a { text-decoration: none; }
.pied__liens { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 14px; }
.pied__liens li + li::before { content: '·'; color: var(--or-clair); margin: 0 14px; }
.pied__films { margin-top: 26px !important; font-size: 13px; color: rgba(243, 236, 221, 0.7); }
.pied__mention { margin-top: 18px !important; font-size: 12px; letter-spacing: 0.06em; color: rgba(243, 236, 221, 0.5); }
@media (max-width: 599px) {
  .pied__liens { flex-direction: column; gap: 8px; }
  .pied__liens li + li::before { content: none; }
}

/* Mouvement réduit : rien ne bouge */
html.mouvement-reduit *, html.mouvement-reduit *::before, html.mouvement-reduit *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }