/* ==========================================================================
   PRANAYANE — Feuille de style globale
   Systeme de design partage par toutes les pages du site.
   1. Tokens        2. Reset       3. Typographie   4. Boutons
   5. Ornements     6. Header      7. Footer        8. Formulaires
   9. Utilitaires   10. Lecteur audio d'ambiance
   ========================================================================== */

/* 1. Tokens ============================================================== */
:root {
  /* Rose / fuchsia — couleur dominante de la charte */
  --rose-900: #7e0f3f;
  --rose-800: #9b1550;
  --rose-700: #b01b5c;
  --rose-600: #c2185b;
  --rose-500: #cf3e75;
  --rose-400: #de6e96;
  --rose-300: #eda5bc;
  --rose-200: #f7ced9;
  --rose-100: #fbe4ea;
  --rose-50: #fdf3f6;
  --rose-25: #fff9fb;

  /* Vert sauge — feuillages */
  --sage-700: #5e6e3c;
  --sage-600: #6e8143;
  --sage-500: #8a9a5b;
  --sage-300: #b6c391;
  --sage-100: #e6ecd6;

  /* Touches dorees */
  --gold-600: #b8912f;
  --gold-500: #c9a24a;
  --gold-300: #e2c98e;
  --gold-100: #f3e7cc;

  /* Encre */
  --ink: #4a3b42;
  --ink-soft: #6f5c64;
  --ink-mute: #93818a;
  --white: #ffffff;
  --cream: #fffbfc;

  /* Typographie */
  --font-script: "Parisienne", "Snell Roundhand", cursive;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme */
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* Habillage */
  --radius-sm: 3px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 10px rgba(122, 30, 66, 0.06);
  --shadow: 0 10px 34px rgba(122, 30, 66, 0.1);
  --shadow-lg: 0 22px 60px rgba(122, 30, 66, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Hauteur reelle du bandeau (topbar + en-tete), mesuree en JS
     (site.js) et exposee ici pour le hero plein ecran de l'accueil.
     Valeur de repli avant mesure, ou si JS est indisponible. */
  --header-h: 121px;
}

/* 2. Reset =============================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Le <picture> n'est qu'un emballage transparent autour de l'image : il
   doit toujours occuper toute la case (comme le ferait l'img seul), sinon
   son propre gabarit (auto) laisse un vide sous l'image quand elle est
   dimensionnee en hauteur:100% via CSS (mosaique, duo__media, etc). */
picture {
  width: 100%;
  height: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sans cette regle, un `display: grid` d'auteur l'emporte sur l'attribut
   `hidden` de la feuille du navigateur (champs conditionnels du formulaire). */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--rose-600);
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* 3. Typographie ========================================================= */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--rose-800);
}

.display em {
  display: block;
  font-style: italic;
  color: var(--rose-600);
}

.section-head {
  text-align: center;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose-700);
  line-height: 1.25;
}

.section-lead {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 46rem;
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-800);
  line-height: 1.2;
}

.subtitle {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--rose-500);
  letter-spacing: 0.02em;
}

.lede {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.lede strong {
  color: var(--rose-600);
  font-weight: 700;
}

/* 4. Boutons ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--rose-600), var(--rose-500));
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(194, 24, 91, 0.24);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(194, 24, 91, 0.3);
  background: linear-gradient(135deg, var(--rose-700), var(--rose-600));
}

.btn--pill {
  border-radius: 999px;
  padding: 0.62rem 1.5rem;
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  box-shadow: 0 4px 14px rgba(194, 24, 91, 0.22);
}

.btn--ghost {
  background: transparent;
  color: var(--rose-600);
  border: 1px solid var(--rose-300);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--rose-50);
  border-color: var(--rose-500);
  box-shadow: none;
}

/* Lien flechee « En savoir plus » */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-600);
}

.link-more svg {
  width: 1.1rem;
  height: 0.55rem;
  transition: transform 0.3s var(--ease);
}

.link-more:hover svg {
  transform: translateX(5px);
}

/* 5. Ornements =========================================================== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.ornament::before,
.ornament::after {
  content: "";
  width: clamp(2.5rem, 7vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}

.ornament::after {
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

.ornament svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold-500);
  flex: none;
}

/* Motif decoratif positionne librement */
.motif {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

/* Trois compositions d'hibiscus aquarelle (remplacent les 3 SVG vectoriels
   plus simples) : elles alternent d'un emplacement a l'autre pour eviter de
   repeter la meme image. Pas de 3e composition large disponible pour le
   moment : le coin reprend la fleur seule en gros plan en attendant. */
.motif--hibiscus {
  background-image: url("/assets/media/motifs/motif-hibiscus-1.png");
}

.motif--hibiscus-gerbe {
  background-image: url("/assets/media/motifs/motif-hibiscus-2.png");
}

.motif--hibiscus-coin {
  background-image: url("/assets/media/motifs/motif-hibiscus-fleur-1.png");
}

/* Deux branches, a courbure inverse : la branche part vers la droite (bord
   gauche), le rameau vers la gauche (bord droit) — pour eviter l'effet
   miroir d'une meme image dupliquee. */
.motif--feuillage {
  background-image: url("/assets/media/motifs/motif-hibiscus-branche-droite.png");
}

.motif--feuillage-rameau {
  background-image: url("/assets/media/motifs/motif-hibiscus-branche-gauche.png");
}

/* 6. Header ============================================================== */
.topbar {
  background: var(--rose-50);
  border-bottom: 1px solid var(--rose-100);
  font-size: 0.78rem;
}

.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
}

.topbar__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--rose-700);
  letter-spacing: 0.02em;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem 0.32rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rose-300);
  color: var(--rose-600);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.icon-link svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.icon-link:hover {
  background: var(--rose-600);
  border-color: var(--rose-600);
  color: var(--white);
}

.site-header {
  position: relative;
  z-index: 40;
  background: var(--white);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: 76px;
}

/* Medaillon logo — deborde sur le hero */
.brand {
  position: absolute;
  /* Ancre le logo sur le meme conteneur centre (.shell, plafonne a
     --shell) que le nav et que toutes les sections de la page, plutot
     que sur toute la largeur du site-header : au-dela de --shell, la
     marge exterieure du conteneur centre s'ajoute au gutter, exactement
     comme le calcule .shell lui-meme (largeur 100% / max-width: var(--shell)
     / margin-inline: auto / padding-inline: var(--gutter)). En dessous de
     --shell, cette marge vaut 0 et le resultat est identique a avant
     (left: var(--gutter)). */
  left: calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter));
  top: -14px;
  z-index: 45;
  display: block;
  width: clamp(132px, 14vw, 196px);
  aspect-ratio: 1;
  /* Le lien est un carre (aspect-ratio 1) autour d'un badge rond : sans ceci,
     le contour de focus/hover par defaut du navigateur dessine un carre
     autour du medaillon circulaire. Reinstaure un anneau de focus rond,
     uniquement au clavier. */
  outline: none;
}

.brand:focus-visible {
  outline: 2px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 50%;
}

.brand__badge {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 10px 26px rgba(122, 30, 66, 0.16));
  transition: transform 0.5s var(--ease);
}

.brand__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.brand:hover .brand__badge {
  transform: scale(1.03);
}

/* Navigation principale */
.nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.nav a {
  position: relative;
  padding: 0.55rem 0.95rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-700);
  transition: color 0.25s var(--ease);
}

.nav a + a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 13px;
  background: var(--rose-200);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.15rem;
  height: 1px;
  background: var(--rose-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--rose-500);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rose-200);
  border-radius: var(--radius-sm);
  color: var(--rose-700);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 3px;
  width: 16px;
}

.nav-toggle__bars span {
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* 7. Footer ============================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #a8154f 0%, #bd2160 45%, #d1487f 100%);
  color: var(--white);
  padding-top: clamp(2.75rem, 5vw, 4rem);
}

.site-footer::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -1rem;
  width: clamp(180px, 24vw, 320px);
  aspect-ratio: 320 / 380;
  background: url("/assets/media/motifs/feuillage-voile.svg") center / contain
    no-repeat;
  pointer-events: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.footer-brand {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  align-content: start;
}

.footer-brand__mark {
  width: 34px;
  color: rgba(255, 255, 255, 0.92);
}

.footer-brand__name {
  font-family: var(--font-script);
  font-size: 2.4rem;
  line-height: 1.05;
}

.footer-brand__sub {
  font-family: var(--font-display);
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.footer-col__title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.95);
}

.footer-col ul {
  display: grid;
  gap: 0.42rem;
}

.footer-col a,
.footer-col li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--white);
  transform: translateX(3px);
  display: inline-block;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.55;
}

.footer-contact svg {
  width: 13px;
  height: 13px;
  margin-top: 0.34rem;
  flex: none;
  opacity: 0.85;
}

.footer-social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.85rem 0.36rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.footer-social a svg {
  flex: none;
}

.footer-social svg {
  width: 13px;
  height: 13px;
}

.footer-social a:hover {
  background: var(--white);
  color: var(--rose-700);
}

.newsletter-form {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.newsletter {
  display: flex;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Case de consentement sur fond sombre : le .case partage (site clair,
   defini dans accueil.css/interieur.css) n'est pas assez contraste pour le
   pied de page. Selecteurs combines pour l'emporter quel que soit l'ordre
   de chargement des feuilles de style. */
.newsletter-consent.case {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
}

.newsletter-consent.case input {
  accent-color: var(--white);
}

.newsletter-consent.case a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 0.82rem;
}

.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.newsletter input:focus {
  outline: none;
}

.newsletter button {
  display: grid;
  place-items: center;
  width: 44px;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}

.newsletter button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.newsletter svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-block: 1rem 1.15rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.82);
}

.footer-bottom a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom .sep {
  opacity: 0.5;
  margin-inline: 0.5rem;
}

/* 8. Formulaires ========================================================= */
.field {
  position: relative;
  display: block;
}

.field__label {
  position: absolute;
  left: 1rem;
  top: 0.42rem;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  pointer-events: none;
}

.input,
.select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.input::placeholder {
  color: var(--ink-mute);
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px rgba(222, 110, 150, 0.16);
}

/* Champ avec micro-libelle au-dessus de la valeur */
.field--stacked .input,
.field--stacked .select {
  padding-top: 1.42rem;
  padding-bottom: 0.5rem;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c2185b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Emplacement du widget reCAPTCHA (Netlify). Le widget mesure environ
   304x78px une fois rendu : la cellule reserve l'espace et le centre pour
   eviter tout saut de mise en page ou debordement d'une colonne etroite. */
.g-recaptcha-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 78px;
  margin-block: 0.35rem;
}

.field-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--rose-600);
}

.field-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--rose-300);
}

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

/* 9. Utilitaires ========================================================= */
/* L'etat masque n'est applique que si JS est actif : sans JS, tout reste visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 10. Responsive ========================================================= */
@media (max-width: 1180px) {
  .nav a {
    padding-inline: 0.7rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .site-header .shell {
    justify-content: space-between;
    min-height: 68px;
  }

  .brand {
    position: static;
    width: 104px;
    margin-block: 0.6rem;
  }

  .brand__badge {
    filter: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--rose-100);
    box-shadow: var(--shadow);
    display: none;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 0.85rem 0.25rem;
    font-size: 0.74rem;
    border-bottom: 1px solid var(--rose-50);
  }

  .nav a + a::before,
  .nav a::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .topbar__tagline {
    display: none;
  }

  .topbar .shell {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact li {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col a:hover {
    transform: none;
  }
}

/* 10. Lecteur audio d'ambiance ============================================ */
.ambient-player {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rose-200);
  box-shadow: var(--shadow);
}

.ambient-player__toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-600), var(--rose-500));
  color: var(--white);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.ambient-player__toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(194, 24, 91, 0.28);
}

.ambient-player__toggle::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--rose-300);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.ambient-player.is-playing .ambient-player__toggle::after {
  opacity: 1;
  animation: ambiance-pulse 1.8s ease-out infinite;
}

@keyframes ambiance-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.ambient-player__icon {
  width: 18px;
  height: 18px;
}

.ambient-player__icon--pause {
  display: none;
}

.ambient-player.is-playing .ambient-player__icon--play {
  display: none;
}

.ambient-player.is-playing .ambient-player__icon--pause {
  display: block;
}

.ambient-player__volume {
  display: flex;
  align-items: center;
}

.ambient-player__volume input[type="range"] {
  width: 74px;
  accent-color: var(--rose-600);
  cursor: pointer;
}

@media (max-width: 480px) {
  .ambient-player__volume input[type="range"] {
    width: 54px;
  }
}