/* ============================================================
   PAGE ENZO CARTIER - AMBIENT
   Feuille de style propre a la page Ambient (FR et EN).
   Le lecteur de musique garde son style d'origine
   (enzo-cartier.css) : rien n'est modifie ici pour lui.

   Les 4 ambiances selon l'heure du visiteur :
   aube (5h-9h), jour (9h-17h), soir (17h-21h), nuit (21h-5h).
   Les couleurs de chaque ambiance sont reglees plus bas.
   ============================================================ */

@font-face { font-family: "Switzer Variable"; src: url("../fonts/Switzer-Variable.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer Variable"; src: url("../fonts/Switzer-VariableItalic.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Couleurs animables : le passage d'une ambiance a l'autre se fait
   en fondu doux au lieu d'un changement brusque. */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #f4f1ea; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #e3eaeb; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #f1e4dc; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #26323a; }
@property --soft { syntax: "<color>"; inherits: true; initial-value: #4d5a61; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #f3b89a; }

/* ---------- Ambiances ---------- */
html.amb-page { /* jour par defaut */
  --c1: #f4f1ea; --c2: #dfe8ea; --c3: #efe3da;
  --ink: #25313a; --soft: #4b5961; --glow: #f2b797;
  --card: rgba(255, 255, 255, .42); --line: rgba(37, 49, 58, .16);
  --accent: #b9572c; --veil-top: rgba(28, 36, 44, .26); --veil-mid: rgba(28, 36, 44, .16); --halo: .52;
  --btn-bg: #25313a; --btn-ink: #f7f4ee;
  transition: --c1 2.4s ease, --c2 2.4s ease, --c3 2.4s ease, --ink 2.4s ease, --soft 2.4s ease, --glow 2.4s ease;
}
html.amb-page[data-moment="aube"] {
  --c1: #f8e6e1; --c2: #e7ddee; --c3: #f4ddd3;
  --ink: #33283a; --soft: #5b4d61; --glow: #f6b49b;
  --card: rgba(255, 255, 255, .40); --line: rgba(51, 40, 58, .16);
  --accent: #b24f2e; --veil-top: rgba(40, 26, 44, .20); --veil-mid: rgba(40, 26, 44, .10); --halo: .46;
  --btn-bg: #33283a; --btn-ink: #fbf3f0;
}
html.amb-page[data-moment="soir"] {
  --c1: #f3d8d0; --c2: #d6c7e2; --c3: #f0cdbd;
  --ink: #34253a; --soft: #5a4661; --glow: #f09a6c;
  --card: rgba(255, 255, 255, .36); --line: rgba(52, 37, 58, .18);
  --accent: #a8482a; --veil-top: rgba(38, 20, 40, .24); --veil-mid: rgba(38, 20, 40, .12); --halo: .46;
  --btn-bg: #34253a; --btn-ink: #fbf1ec;
}
html.amb-page[data-moment="nuit"] {
  --c1: #1d2236; --c2: #2a2642; --c3: #232a44;
  --ink: #ede8f4; --soft: #c2bcd2; --glow: #7d6fb3;
  --card: rgba(255, 255, 255, .06); --line: rgba(237, 232, 244, .16);
  --accent: #f2a987; --veil-top: rgba(10, 12, 26, .42); --veil-mid: rgba(10, 12, 26, .30); --halo: .40;
  --btn-bg: #ede8f4; --btn-ink: #1d2236;
}

/* ---------- Base ---------- */
html.amb-page { background: var(--c1); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.amb { margin: 0; min-height: 100vh; color: var(--ink); background: transparent; font-family: "Switzer Variable", "Helvetica Neue", Arial, sans-serif; font-weight: 380; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.amb *, .amb *::before, .amb *::after { box-sizing: border-box; }
.amb img { max-width: 100%; display: block; }
.amb a { color: inherit; }
.amb ::selection { background: var(--glow); color: #1d1a22; }
.amb :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* fond degrade fixe (une seule couche, sans effet couteux au defilement) */
.amb-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c3) 90%, transparent), transparent 70%),
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .amb-bg { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); }
}

.amb-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- Bouton retour (coin haut gauche) ---------- */
.amb-back { position: fixed; z-index: 50; top: 18px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; font-size: 13px; letter-spacing: .2px; line-height: 1; text-decoration: none; color: #fff !important; background: rgba(20, 20, 28, .4); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s ease, border-color .3s ease; }
.amb-back:hover { background: rgba(20, 20, 28, .5); border-color: rgba(255, 255, 255, .55); }
.amb-back svg { width: 14px; height: 14px; display: block; }

/* ---------- Haut de page (video) ---------- */
.amb-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.amb-media { position: absolute; inset: 0; background: #2a2630 center / cover no-repeat; }
.amb-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease; }
.amb-media video.is-on { opacity: 1; }
.amb-veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 45%, color-mix(in srgb, var(--c1) 55%, transparent) 82%, var(--c1) 100%); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .amb-veil { background: linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 60%, var(--c1) 100%); }
}
.amb-hero-in { position: relative; z-index: 2; max-width: 980px; padding: 110px 24px 120px; text-shadow: 0 1px 3px rgba(16, 12, 22, .35), 0 2px 26px rgba(16, 12, 22, .45); }
/* la riviere est tres claire : voile un peu plus marque pour garder le texte lisible */
.amb-media[data-fond="fond-jour-riviere"] .amb-veil { background-color: rgba(24, 28, 34, .16); }
/* halo sombre tres doux derriere le texte : lisible meme sur une image claire */
.amb-hero-in::before { content: ""; position: absolute; z-index: -1; left: -18%; right: -18%; top: 6%; bottom: 10%; background: radial-gradient(closest-side, rgba(22, 20, 32, var(--halo, .46)), rgba(22, 20, 32, calc(var(--halo, .46) * .55)) 58%, rgba(22, 20, 32, 0) 100%); pointer-events: none; }
.amb-hello { margin: 0 0 22px; font-size: 14px; letter-spacing: .6px; opacity: .92; font-style: italic; }
.amb-h1 { margin: 0; font-weight: 300; line-height: .9; }
/* meme police que le grand "Enzo Cartier" du site principal */
.amb-h1 .amb-h1-name, .amb-h1 .amb-h1-big { display: block; font-family: "Neue Machina", "Switzer Variable", sans-serif; font-weight: 800; font-style: italic; text-transform: none; }
.amb-h1 .amb-h1-name { font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; }
.amb-h1 .amb-h1-big { font-size: clamp(74px, 13.5vw, 200px); letter-spacing: -.02em; line-height: .95; }
.amb-tag { margin: 26px auto 0; font-size: clamp(19px, 2vw, 25px); font-style: italic; font-weight: 450; letter-spacing: .1px; }
.amb-intro { margin: 18px auto 0; max-width: 580px; font-size: 18px; line-height: 1.6; font-weight: 480; }
.amb-down { position: absolute; z-index: 2; left: 50%; bottom: 34px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .5px; color: var(--ink); text-decoration: none; font-style: italic; }
.amb .amb-down { color: var(--ink); }
.amb-down i { display: block; width: 1px; height: 38px; background: currentColor; opacity: .5; transform-origin: top; animation: ambLine 3.2s ease-in-out infinite; }
@keyframes ambLine { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Sections ---------- */
.amb-sec { padding: 110px 0; }
.amb-label { margin: 0 0 14px; font-size: 13px; letter-spacing: .6px; font-style: italic; color: var(--soft); }
.amb-h2 { margin: 0; font-weight: 320; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.02em; }
.amb-p { margin: 16px 0 0; color: var(--soft); max-width: 560px; }
.amb-head { margin-bottom: 44px; }

/* A + B : sortie de l'album */
.amb-album { padding-top: 40px; }
.amb-release { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; padding: 28px; background: var(--card); border: 1px solid var(--line); }
.amb-cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(30, 20, 40, .45); }
.amb-cover img { width: 100%; height: 100%; object-fit: cover; }
.amb-release-txt { padding: 8px 20px 8px 0; }
.amb-title { margin: 0; font-weight: 300; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.03em; }
.amb-meta { margin: 14px 0 0; color: var(--soft); font-size: 15px; }
.amb-when { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.amb-date { margin: 0; font-size: 19px; }
.amb-count { margin: 6px 0 0; font-size: 15px; color: var(--soft); font-style: italic; }
.amb-count::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: ambPulse 3.6s ease-in-out infinite; }
@keyframes ambPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.amb-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 15px 24px; background: var(--btn-bg); color: var(--btn-ink) !important; text-decoration: none; font-size: 15px; letter-spacing: .2px; transition: transform .3s ease, opacity .3s ease; }
.amb-cta:hover { transform: translateY(-2px); }
.amb-cta svg { width: 18px; height: 18px; display: block; }
.amb-note { margin: 14px 0 0; font-size: 13.5px; color: var(--soft); max-width: 420px; line-height: 1.5; }
.amb-note[hidden] { display: none; }

/* C : liste des titres (tous bien visibles) */
.amb-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 56px; }
.amb-list li { break-inside: avoid; display: flex; align-items: baseline; gap: 22px; padding: 17px 0; border-top: 1px solid var(--line); font-size: clamp(19px, 1.8vw, 23px); font-weight: 360; letter-spacing: -.01em; color: var(--ink); }
.amb-list li span { flex: 0 0 auto; width: 26px; font-size: 13px; font-weight: 400; color: var(--soft); font-variant-numeric: tabular-nums; }

/* Videos YouTube (chargees seulement au clic) */
.amb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.amb-card .ec-video { background: #2a2630; }
.amb-card .ec-video-img { filter: brightness(.9); }
.amb-card .ec-video-poster:hover .ec-video-img { filter: brightness(.72); }
.amb-card .ec-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 255, 255, .9); color: #1d1a22; }
.amb-card .ec-play svg { width: 24px; height: 24px; }
/* duree en bas a gauche : texte blanc sur fond sombre, bien lisible */
.amb .amb-card .ec-video-label { left: 12px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: .4px; line-height: 1; padding: 6px 9px; background: rgba(14, 12, 20, .78); font-variant-numeric: tabular-nums; text-shadow: none; }
.amb-card h3 { margin: 18px 0 0; font-weight: 380; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.amb-card p { margin: 6px 0 0; font-size: 14.5px; color: var(--soft); font-style: italic; }
.amb-more { display: inline-flex; margin-top: 48px; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Suivre */
.amb-follow-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.amb-pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-size: 15px; transition: border-color .3s ease, transform .3s ease; }
.amb-pill:hover { border-color: var(--ink); transform: translateY(-2px); }
.amb-pill small { color: var(--soft); font-size: 13px; }

/* Bas de page */
.amb-foot { padding: 90px 0 110px; border-top: 1px solid var(--line); }
.amb-slow { margin: 0; font-size: clamp(34px, 5.2vw, 72px); font-weight: 280; font-style: italic; letter-spacing: -.03em; line-height: 1.05; }
.amb-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 56px; font-size: 14px; color: var(--soft); }
.amb-foot-row p { margin: 0; }
.amb-foot-row a { text-underline-offset: 3px; }
.amb-foot-nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.amb-lang a, .amb-lang span { text-decoration: none; }
.amb-lang .on { color: var(--ink); }
.amb-by { margin-top: 6px !important; }

/* apparition douce au defilement */
.amb-js .amb-fade { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease, transform 1.2s ease; }
.amb-js .amb-fade.is-in { opacity: 1; transform: none; }

/* ---------- Tablette ---------- */
@media screen and (max-width: 991px) {
  .amb-release { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 560px; margin: 0 auto; }
  .amb-release-txt { padding: 0 4px 6px; }
  .amb-list { columns: 1; }
}
/* ---------- Telephone ---------- */
@media screen and (max-width: 767px) {
  .amb { font-size: 16px; }
  .amb-wrap { padding: 0 18px; }
  .amb-back { top: 12px; left: 12px; font-size: 12px; padding: 7px 12px 7px 10px; }
  .amb-hero-in { padding: 90px 18px 120px; }
  .amb-hello { margin-bottom: 16px; font-size: 13px; }
  .amb-intro { font-size: 16.5px; }
  .amb-h1 .amb-h1-name { font-size: 30px; }
  .amb-sec { padding: 72px 0; }
  .amb-album { padding-top: 20px; }
  .amb-release { padding: 16px; }
  .amb-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .amb-list li { padding: 14px 0; gap: 16px; }
  .amb-foot { padding: 64px 0 120px; }
  .amb-foot-row { flex-direction: column; align-items: flex-start; }
}

/* Moins d'animations si le visiteur l'a demande dans son appareil */
@media (prefers-reduced-motion: reduce) {
  html.amb-page { scroll-behavior: auto; }
  .amb-down i, .amb-count::before { animation: none; }
  .amb-js .amb-fade { opacity: 1; transform: none; transition: none; }
}

/* --- Video mise en avant (breathe with me) : sur toute la largeur de la grille --- */
.amb-card--une { grid-column: 1 / -1; }
.amb-card--une h3 { font-size: 26px; }
@media screen and (max-width: 767px) { .amb-card--une h3 { font-size: 21px; } }