/* ==========================================================================
   Thème Sauron-Sahuc — repris à l'identique de site/src/app/globals.css.

   Dans le site Next.js, les variables de police étaient posées sur <html> par
   next/font. Ici elles sont déclarées directement ; les fichiers sont
   auto-hébergés (assets/css/fonts.css).
   ========================================================================== */

:root {
  --font-space-grotesk: "Space Grotesk", system-ui, sans-serif;
  --font-manrope: "Manrope", system-ui, sans-serif;
}

/* ==========================================================================
   Design tokens — DA « H » : accent or, thème clair par défaut.

   Le clair est la base et le sombre une surcharge (`data-theme="dark"`), et
   non l'inverse : sans JavaScript, la page rend donc en clair, qui est le
   défaut voulu. Le script du <head> pose l'attribut avant le premier rendu,
   d'après la préférence enregistrée ou, à défaut, celle du système.
   ========================================================================== */

html {
  --bg: #f4f1e9;
  --card: #ffffff;
  --card2: #faf7f0;
  --text: #171d29;
  --soft: #4a5160;
  --muted: #6a7080;
  --border: #17273922;
  --headerbg: #f4f1e9e6;

  /* Constantes, identiques dans les deux thèmes */
  --gold: #c9a24b;
  --on-gold: #0d1016;
  --open: #3ecf8e;
  --soon: #e8a13c;
  --closed: #8d94a5;

  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(48px, 7vw, 88px);
  --container: 1100px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0d1016;
  --card: #151a23;
  --card2: #12161f;
  --text: #eef0f5;
  --soft: #aab1c0;
  --muted: #8d94a5;
  --border: #ffffff12;
  --headerbg: #0d1016e6;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}

h1,
h2,
h3 {
  font-family: var(--font-space-grotesk), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

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

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

/* Lien d'évitement, révélé au clavier uniquement. */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--gold);
  color: var(--on-gold);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}
.skip:focus {
  left: 16px;
}

/* ==========================================================================
   Mise en page
   ========================================================================== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: 840px;
}
.container--article {
  max-width: 800px;
}

.section {
  padding-block: var(--section-y);
}

/* ==========================================================================
   Révélation au scroll — animations pilotées par le scroll quand le
   navigateur les supporte, sinon rien (le contenu est visible d'emblée).
   ========================================================================== */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(56px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slowZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise 0.9s both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    animation: none !important;
  }
}

/* ==========================================================================
   Composants
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
}
.card--gold {
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, #c9a24b1f, transparent 70%),
    var(--card);
  border-color: #c9a24b33;
}
a.card:hover,
.card--link:hover {
  border-color: #c9a24b66;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-align: center;
}
.btn--gold {
  background: var(--gold);
  color: var(--on-gold);
}
.btn--gold:hover {
  background: #d8b464;
  color: var(--on-gold);
}
.btn--outline {
  border-color: #c9a24b66;
  color: var(--text);
  background: transparent;
}
.btn--outline:hover {
  background: var(--gold);
  color: var(--on-gold);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--soft);
}
.pill:hover {
  border-color: #c9a24b66;
  color: var(--gold);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
  background: var(--closed);
}
.dot--open {
  background: var(--open);
}
.dot--soon {
  background: var(--soon);
}
.dot--closed {
  background: var(--closed);
}

.kicker {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 14px;
}

.lead {
  color: var(--soft);
  font-size: 17px;
  line-height: 1.75;
  max-width: 66ch;
  margin: 0;
}

.h1 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 16px;
}
.gold {
  color: var(--gold);
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--headerbg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner,
.header--hero .header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* La page s'étend sous la barre d'état (viewport-fit=cover) : on redonne au
     contenu la place qu'elle occupe, sinon le logo passe dessous. Les insets
     latéraux valent 0 en portrait, et couvrent l'encoche en paysage. */
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: 16px;
  padding-inline:
    calc(var(--gutter) + env(safe-area-inset-left, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px));
  max-width: 1400px;
  margin: 0 auto;
}
/* Pousse la nav et les outils ensemble à droite du logo. */
.header__inner > .nav {
  margin-left: auto;
}
.header__tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Variante posée sur la photo du hero : texte clair figé, fond transparent. */
.header--hero {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  z-index: 2;
}

.logo {
  font-family: var(--font-space-grotesk), system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.header--hero .logo {
  color: #eef0f5;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 13px;
  font-weight: 500;
}
.nav a {
  color: var(--soft);
}
.nav a:hover {
  color: var(--gold);
}
.header--hero .nav a {
  color: #c8cdd9;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--soft);
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
  cursor: default;
}
button.chip {
  cursor: pointer;
}
/* Bascule de thème : pastille ronde à icône, sans libellé. */
.chip--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  flex: none;
}
.chip--icon svg {
  display: block;
}
button.chip:hover {
  border-color: #c9a24b66;
  color: var(--gold);
}
.header--hero .chip {
  background: #0d1016a8;
  backdrop-filter: blur(8px);
  border-color: #ffffff2a;
  color: #c8cdd9;
}

/* ==========================================================================
   Barre CTA de bas de page + pied de page
   ========================================================================== */

.ctabar {
  border-top: 1px solid var(--border);
}
.ctabar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px));
  padding-inline:
    calc(var(--gutter) + env(safe-area-inset-left, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px));
  max-width: 1400px;
  margin: 0 auto;
}
.ctabar__hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.footer {
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  padding-inline:
    calc(var(--gutter) + env(safe-area-inset-left, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px));
  max-width: 1400px;
  margin: 0 auto;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ==========================================================================
   Grilles
   ========================================================================== */

.grid {
  display: grid;
  gap: 20px;
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Contenu + colonne latérale des pages expertises. */
.grid--aside {
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr);
  align-items: start;
}
@media (max-width: 860px) {
  .grid--aside {
    grid-template-columns: 1fr;
  }
}
.aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}
@media (max-width: 860px) {
  .aside {
    position: static;
  }
}

/*
 * Deux registres à ne pas confondre sur les pages expertises :
 *
 * .topic   — le fond du sujet. Surface en relief, généreuse, filet or au-dessus
 *            du titre pour marquer la série.
 * .sidecard — l'encart pratique (rendez-vous, horaires). Surface en retrait,
 *            resserrée, bord gauche or : ça se lit comme une colonne de
 *            service, pas comme un quatrième sujet.
 */
.topic {
  padding: 30px;
}
.topic::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 16px;
}

.sidecard {
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px 18px 18px 6px;
  padding: 20px 22px;
}
.sidecard h2 {
  font-size: 16px;
  margin: 0 0 10px;
}
.sidecard--rdv {
  background:
    radial-gradient(ellipse 130% 100% at 0% 0%, #c9a24b24, transparent 68%),
    var(--card2);
}

.sidecard__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ==========================================================================
   Photos
   ========================================================================== */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border);
  display: block;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
a.photo:hover img {
  transform: scale(1.04);
}
.photo__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #0d1016cc;
  backdrop-filter: blur(8px);
  color: #eef0f5;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
}

/* Portrait manquant : rayures diagonales explicites, pas une photo floue. */
.portrait-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  border: 1px dashed #c9a24b55;
  background: repeating-linear-gradient(
    45deg,
    #c9a24b0f,
    #c9a24b0f 10px,
    transparent 10px,
    transparent 20px
  );
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 16px;
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.stack {
  display: grid;
  gap: 20px;
}
.muted {
  color: var(--muted);
}
.soft {
  color: var(--soft);
}
.small {
  font-size: 13px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.between {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

/* ==========================================================================
   Accueil
   ========================================================================== */

.hero {
  position: relative;
  /*
   * `lvh` et non `svh` : `svh` dimensionne sur le plus PETIT viewport possible,
   * celui où la barre d'adresse du navigateur mobile est déployée. La photo
   * s'arrêtait donc au-dessus de cette barre, laissant un vide.
   *
   * `lvh` prend la hauteur du viewport barre rétractée : l'image passe derrière
   * la barre et remplit l'écran en toutes circonstances. Pas de redimensionnement
   * pendant le défilement non plus, contrairement à `dvh`.
   *
   * `100vh` en repli pour les navigateurs sans unités de viewport dynamiques ;
   * sur mobile il vaut historiquement le grand viewport, donc le même résultat.
   */
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  animation: slowZoom 18s ease-out both;
}
/*
 * Le texte du hero est clair et figé (il repose sur une photo) : le voile doit
 * donc rester sombre sous le texte quel que soit le thème. On ne rejoint
 * --bg que sur les tout derniers %, sous le contenu — sinon, en thème clair,
 * le dégradé vire au crème et le sous-titre devient illisible.
 */
.hero__scrim {
  position: absolute;
  inset: 0;
  /*
   * Pas de fondu vers le fond de page : la photo se termine par un bord franc.
   * Le voile garde donc sa densité jusqu'en bas au lieu de s'éteindre.
   *
   * 1. Tache radiale en bas à gauche, là où se trouve le texte : c'est le seul
   *    endroit qui doit être sombre.
   * 2. Dégradé vertical léger, assez dense en haut pour la lisibilité de
   *    l'en-tête, discret au milieu pour laisser voir la photo.
   */
  background:
    radial-gradient(
      ellipse 80% 55% at 16% 68%,
      #0d1016cc 0%,
      #0d101685 42%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #0d1016a6 0%,
      #0d10167a 16%,
      #0d101647 48%,
      #0d101659 100%
    );
}
.hero__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Marge basse en vh et non en vw : le hero fait 100lvh, la respiration
     sous le texte suit donc la hauteur de l'écran et non sa largeur. */
  padding: 48px var(--gutter)
    calc(clamp(110px, 14vh, 180px) + env(safe-area-inset-bottom, 0px));
  animation: heroIn 1.2s ease both;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0d1016a8;
  backdrop-filter: blur(8px);
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  color: #c8cdd9;
  margin-bottom: 22px;
  width: fit-content;
}
.hero h1 {
  font-size: clamp(42px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  max-width: 13ch;
  color: #eef0f5;
}
.hero__sub {
  margin: 0 0 30px;
  font-size: 17px;
  color: #c8cdd9;
  max-width: 52ch;
  line-height: 1.7;
}

/* Boutons d'intention : radio-like, l'actif se teinte d'or. */
.intent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 15px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--soft);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.intent:hover {
  border-color: #c9a24b44;
  color: var(--text);
}
.intent[data-active="true"] {
  background: #c9a24b1a;
  border-color: #c9a24b44;
  color: var(--text);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Sur mobile la nav passe sur deux lignes : on la resserre pour ne pas
   dévorer le hero plein écran. */
@media (max-width: 560px) {
  /* Ligne 1 : logo à gauche, thème et statut d'ouverture à droite.
     Ligne 2 : les liens de navigation, seuls. */
  .header__inner > .logo {
    order: 1;
  }
  .header__tools {
    order: 2;
    margin-left: auto;
  }
  .header__inner > .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .nav {
    gap: 6px 14px;
    font-size: 12.5px;
  }
  /* La pastille à icône garde sa forme ronde. */
  .chip:not(.chip--icon) {
    padding: 7px 14px;
    font-size: 11.5px;
  }
  .chip--icon {
    width: 30px;
    height: 30px;
  }
  .header__inner {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
    row-gap: 10px;
  }
  .hero__body {
    padding-top: 32px;
  }
}

/* ==========================================================================
   Carrousel d'avis
   ========================================================================== */

.carousel__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 4px 4px;
  list-style: none;
  overflow-x: auto;
  /* `proximity` et non `mandatory` : quand la piste ne déborde que de quelques
     dizaines de pixels (peu de cartes, grand écran), le point d'accroche
     suivant est hors d'atteinte et un snap impératif ramène en butée — le
     carrousel paraît alors bloqué. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* La barre native ferait doublon avec les boutons et casserait la DA. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 26px;
}

.carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 min(100%, 360px);
  display: flex;
  flex-direction: column;
}

/* Les avis n'ont pas tous la même longueur : on aligne les signatures en bas
   plutôt que de laisser les cartes flotter à des hauteurs différentes. */
.carousel__quote {
  margin: 0 0 18px;
  flex: 1;
}

.carousel__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carousel__avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #c9a24b1f;
  border: 1px solid #c9a24b44;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.carousel__controls .chip--icon:disabled {
  opacity: 0.4;
  cursor: default;
}
.carousel__controls .chip--icon:disabled:hover {
  border-color: var(--border);
  color: var(--soft);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    scroll-behavior: auto;
  }
}

.carousel__controls[hidden] {
  display: none;
}