/* ==========================================================================
   WEST RISE ACADEMY — feuille de style unique
   Palette, composants et animations. Aucune dépendance externe.
   ========================================================================== */

/* --- 1. Polices ----------------------------------------------------------- */

/* Polices auto-hébergées. Volontairement pas de Google Fonts en CDN :
   cela évite une requête vers un serveur tiers, accélère l'affichage, et
   supprime la transmission de l'adresse IP des visiteurs à Google — sujet
   sensible côté RGPD en France. */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graduate';
  src: url('../fonts/graduate-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Freshman : le fichier n'est pas encore fourni. La déclaration est donc
   mise en sommeil — sinon chaque page réclamait un fichier inexistant et
   récoltait une erreur 404. Le rendu ne change pas : la pile de polices
   bascule d'elle-même sur Graduate, très proche visuellement.

   POUR L'ACTIVER : déposez freshman.woff2 dans /fonts, puis retirez les
   deux lignes de commentaire ci-dessous.

@font-face {
  font-family: 'Freshman';
  src: url('../fonts/freshman.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/

/* --- 2. Jetons de design -------------------------------------------------- */
:root {
  --noir:        #1A1A1A;
  --anthracite:  #2A2A2A;
  --or:          #C49C64;  /* doré chaud, teinte du logo (35°) et non jaune */
  --or-clair:    #D9BC8C;  /* survol et reflets */
  --beige:       #E4D2AE;  /* filets fins, détails */
  --or-profond:  #95713F;  /* le doré exact du blason, pour les aplats */
  --blanc:       #F5F5F5;
  --gris:        #9A9A9A;
  --gris-fonce:  #3A3A3A;

  --font-display: 'Freshman', 'Graduate', 'Impact', sans-serif;
  --font-texte:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-s: 4px;
  --r-m: 8px;

  --ombre-m: 0 12px 40px rgba(0, 0, 0, .55);
  --ombre-l: 0 30px 80px rgba(0, 0, 0, .7);
  --lueur-or: 0 0 60px rgba(196, 156, 100, .28);

  --gouttiere: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vh, 140px);
  --contenu: 1200px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- 3. Réinitialisation -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

::selection { background: var(--or); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* --- 4. Typographie ------------------------------------------------------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
}
h1 { font-size: clamp(1.75rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.95rem); }

h3 {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .01em;
  line-height: 1.3;
}

p { max-width: 68ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--or);
}
.eyebrow.center::after {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--or);
}

.lead  { font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: var(--blanc); }
.muted { color: var(--gris); }
.or    { color: var(--or); }

/* --- 5. Mise en page ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--contenu);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--anthracite); }
.section--tight { padding-block: clamp(48px, 7vh, 88px); }
.center { text-align: center; }
.center p, .center .lead, .center blockquote { margin-inline: auto; }
p.center, .mini.center { margin-inline: auto; }
[style*="text-align:center"] p { margin-inline: auto; }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Toutes les têtes de section sont centrées par défaut. Le décentrage
   n'était pas voulu : il venait de blocs sans la classe .center. */
.section-head { margin-bottom: clamp(36px, 5vw, 64px); text-align: center; }
.section-head .eyebrow,
.section-head h2 { margin-inline: auto; }
.section-head p { margin-inline: auto; }
.section-head--left { text-align: left; }
.section-head--left .eyebrow, .section-head--left h2 { margin-inline: 0; }
.section-head .eyebrow { margin-bottom: 18px; }

/* Filet doré décoratif */
.rule {
  width: 56px;
  height: 2px;
  background: var(--or);
  margin: 22px 0;
}
.center .rule { margin-inline: auto; }

/* --- 6. Boutons ----------------------------------------------------------- */
.btn {
  --bg: var(--or);
  --fg: var(--noir);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 32px;
  border: 1px solid var(--bg);
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--fg);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease);
}
/* Remplissage qui monte au survol */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--noir);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--or); border-color: var(--or); }

.btn--ghost { --bg: transparent; --fg: var(--or); border-color: var(--or); }
.btn--ghost::after { background: var(--or); }
.btn--ghost:hover { color: var(--noir); }

.btn--dark { --bg: var(--noir); --fg: var(--or); }
.btn--dark::after { background: var(--blanc); }
.btn--dark:hover { color: var(--noir); border-color: var(--noir); }

.btn--full { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.center .btn-row { justify-content: center; }

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--or);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(196, 156, 100, .35);
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.arrow-link:hover { gap: 18px; border-color: var(--or); }

/* --- 7. Préchargeur ------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: 30px;
  justify-items: center;
  background: var(--noir);
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }
#preloader img {
  width: 108px;
  animation: pulseLogo 2s ease-in-out infinite;
}
@keyframes pulseLogo {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.pl-bar {
  width: 190px;
  height: 2px;
  background: var(--gris-fonce);
  overflow: hidden;
}
.pl-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--or);
  transition: width .25s linear;
}
.pl-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--or);
  letter-spacing: .1em;
}

/* Rideau de transition entre les pages */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--noir);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform .55s var(--ease-out);
}
#curtain.up { transform: translateY(0); }

/* --- 8. Curseur personnalisé --------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9997;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--or-clair);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(196, 156, 100, .8);
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
}
.cursor-ring.grow {
  width: 68px; height: 68px;
  background: rgba(196, 156, 100, .12);
}
.cursor-ring.label::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--or-clair);
}
@media (hover: none), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* --- 9. Grain et barre de progression ------------------------------------ */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9996;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(10) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4%, -6%); }
  30% { transform: translate(5%, -3%); }
  50% { transform: translate(-3%, 5%); }
  70% { transform: translate(4%, 4%); }
  90% { transform: translate(-5%, 2%); }
}

#progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 9995;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--or), var(--beige));
}

/* --- 10. En-tête --------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: transform .45s var(--ease), background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.header.scrolled {
  background: rgba(26, 26, 26, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(196, 156, 100, .18);
}
.header.hidden { transform: translateY(-100%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  max-width: var(--contenu);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 50px; width: auto; }
.brand span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .06em;
  line-height: 1;
}
@media (max-width: 1080px) { .brand span { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
  position: relative;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color .3s ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--or); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--or); }

.burger {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(196, 156, 100, .4);
  border-radius: var(--r-s);
  cursor: pointer;
  position: relative;
}
.burger i {
  position: absolute;
  left: 13px;
  width: 20px; height: 1.5px;
  background: var(--or);
  transition: transform .35s var(--ease), opacity .2s ease;
}
.burger i:nth-child(1) { top: 17px; }
.burger i:nth-child(2) { top: 22px; }
.burger i:nth-child(3) { top: 27px; }
.burger.open i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Le bouton et le nom de marque ne doivent jamais se comprimer : c'est la
   navigation qui absorbe la réduction de largeur. */
.header__cta { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
.brand { flex: 0 0 auto; }
.brand span { white-space: nowrap; }
.nav { flex: 0 1 auto; }
/* Entre 980 et 1200px, la navigation à six entrées se resserre à la valeur
   basse de son propre intervalle d'origine (18px) : aucun changement visible
   au-delà, mais plus de débordement. */
@media (max-width: 1200px) { .nav { gap: 18px; } }

@media (max-width: 980px) {
  .header__inner { height: 64px; }
  .brand img { height: 40px; }
  .nav, .header__cta { display: none; }
  .burger { display: block; }
}

/* Menu mobile plein écran */
.menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  background: var(--noir);
  clip-path: circle(0 at calc(100% - 46px) 46px);
  transition: clip-path .7s var(--ease-out);
  visibility: hidden;
}
.menu.open { clip-path: circle(150% at calc(100% - 46px) 46px); visibility: visible; }
.menu a {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s var(--ease), color .3s ease;
}
.menu.open a { opacity: 1; transform: none; }
.menu a:hover { color: var(--or); }
.menu .btn { margin-top: 28px; opacity: 0; transition: opacity .5s ease .35s; }
.menu.open .btn { opacity: 1; }

/* --- 11. Bannière d'accueil ---------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  will-change: transform;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.62) contrast(1.02) saturate(.96);
}
/* Voile : dégradé bas + vignettage, indispensable à la lisibilité */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--noir) 4%, rgba(26,26,26,.82) 34%, rgba(26,26,26,.35) 70%, rgba(26,26,26,.6) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.55) 100%);
}
.hero__inner {
  width: 100%;
  max-width: var(--contenu);
  margin-inline: auto;
  padding: 0 var(--gouttiere) clamp(90px, 14vh, 150px);
}
.hero h1 { margin: 20px 0 24px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero .lead { max-width: 540px; color: rgba(245, 245, 245, .92); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris);
}
.scroll-hint i {
  width: 1px; height: 44px;
  background: linear-gradient(var(--or), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(44px); opacity: 0; }
}

/* Bannière courte des pages intérieures */
.pagehead {
  position: relative;
  min-height: 46vh;
  display: grid;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
  isolation: isolate;
}
.pagehead img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.4) saturate(.85);
}
.pagehead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--noir), rgba(26,26,26,.55));
}
.breadcrumb {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 14px;
}
.breadcrumb a:hover { color: var(--or); }

/* --- 12. Bandeau défilant ------------------------------------------------ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 11px 0;
  background: var(--or);
  border-block: 1px solid rgba(0, 0, 0, .18);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.25vw, 1.02rem);
  text-transform: uppercase;
  color: var(--noir);
  white-space: nowrap;
}
.marquee span::after { content: '\25C6'; font-size: .62em; opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- 13. Bloc West / Rise ------------------------------------------------ */
.duo { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(28px, 4vw, 60px); }
.duo__sep { background: linear-gradient(transparent, var(--or) 20%, var(--or) 80%, transparent); }
.duo__word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: .9;
  color: var(--or);
  text-transform: uppercase;
  margin-bottom: 18px;
}
@media (max-width: 780px) {
  .duo { grid-template-columns: 1fr; }
  .duo__sep { height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
}

/* --- 14. Cartes ---------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
  background: var(--anthracite);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r-m);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}
.section--alt .card { background: var(--noir); }
.card:hover {
  transform: translateY(-6px);
  border-color: var(--or);
  box-shadow: var(--ombre-m);
}
.card__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: rgba(196, 156, 100, .28);
  line-height: 1;
}
.card__icon {
  width: 46px; height: 46px;
  display: grid; place-content: center;
  border: 1px solid rgba(196, 156, 100, .45);
  border-radius: var(--r-s);
  color: var(--or);
  margin-bottom: 6px;
}
.card__icon svg { width: 22px; height: 22px; }

/* Carte tarif */
.price-card { position: relative; overflow: hidden; }
.price-card--feature {
  border-color: var(--or);
  box-shadow: var(--lueur-or);
}
.price-card__tag {
  position: absolute;
  top: 0; right: 0;
  padding: 7px 16px;
  background: var(--or);
  color: var(--noir);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom-left-radius: var(--r-m);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--or);
  line-height: 1;
}
.price small {
  font-family: var(--font-texte);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gris);
  text-transform: none;
}
.price--todo {
  font-family: var(--font-texte);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.incl { display: grid; gap: 11px; margin-top: 4px; }
.incl li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .93rem;
  color: rgba(245, 245, 245, .88);
}
.incl li::before {
  content: '';
  width: 8px; height: 8px;
  margin-top: 9px;
  border-right: 1.6px solid var(--or);
  border-bottom: 1.6px solid var(--or);
  transform: rotate(45deg);
}
.card > .btn { margin-top: auto; }

/* Version compacte des cartes tarifaires, utilisée sur l'accueil */
.cards--compact { gap: clamp(16px, 2vw, 26px); }
.cards--compact .card { padding: clamp(20px, 2.2vw, 28px); gap: 10px; }
.cards--compact h3 { font-size: 1.02rem; }
.cards--compact .price { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.cards--compact .price small { font-size: .72rem; }
.cards--compact .incl { gap: 8px; }
.cards--compact .incl li { font-size: .86rem; grid-template-columns: 16px 1fr; gap: 9px; }
.cards--compact .incl li::before { width: 7px; height: 7px; margin-top: 8px; }
.cards--compact .btn { padding: 13px 22px; font-size: .72rem; }
.cards--compact .price-card__tag { font-size: .58rem; padding: 5px 12px; }

/* --- 15. Chiffres-clés --------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid rgba(196, 156, 100, .22);
  border-bottom: 1px solid rgba(196, 156, 100, .22);
}
.stat {
  padding: 26px 18px;
  text-align: center;
  border-left: 1px solid rgba(196, 156, 100, .16);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--or);
  line-height: 1;
  margin-bottom: 8px;
}
.stat span {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(196, 156, 100, .16); }
}

/* --- 16. Bloc image + texte --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--rev > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
}

/* Cadre photo dédoublé */
.frame { position: relative; }
.frame img { border-radius: var(--r-m); position: relative; z-index: 1; width: 100%; object-fit: cover; }
.frame::after {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--or);
  border-radius: var(--r-m);
  z-index: 0;
}

/* Variante sans décalage : le filet doré épouse exactement la photo.
   Utilisée pour le portrait de la fondatrice sur l'accueil. */
.frame--net::after { inset: 0; }

/* --- 17. Citation pleine largeur ---------------------------------------- */
.quote {
  padding-block: clamp(64px, 10vh, 120px);
  text-align: center;
  background: var(--noir);
  position: relative;
}
.quote--gold { background: var(--or); }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--or);
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.quote--gold blockquote { color: var(--noir); }
/* Citation de clôture : volontairement plus petite, c'est une signature
   et non un titre de section. */
.quote--sm { padding-block: clamp(44px, 6vh, 76px); }
.quote--sm blockquote {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: none;
  max-width: 720px;
}
.quote__mark {
  display: block;
  width: 44px; height: 1px;
  background: currentColor;
  margin: 0 auto 26px;
  opacity: .6;
}
.quote blockquote + .quote__mark { margin: 26px auto 0; }

/* --- 18. Frise horizontale ---------------------------------------------- */
.timeline-wrap { position: relative; height: 320vh; }
.timeline-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  overflow: hidden;
}
.timeline-head { padding-inline: var(--gouttiere); max-width: var(--contenu); margin: 0 auto 44px; width: 100%; text-align: center; }
.timeline-head p { margin-inline: auto; }
.timeline {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 44px);
  padding-inline: var(--gouttiere);
  will-change: transform;
}
.tl-step {
  position: relative;
  flex: 0 0 clamp(220px, 26vw, 300px);
  padding-top: 46px;
}
.tl-step::before {
  content: '';
  position: absolute;
  top: 11px; left: 0; right: -100%;
  height: 1px;
  background: rgba(196, 156, 100, .3);
}
.tl-step:last-child::before { right: 0; }
.tl-step::after {
  content: '';
  position: absolute;
  top: 5px; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--noir);
  border: 2px solid var(--or);
}
.tl-step--last::after {
  background: var(--or);
  box-shadow: 0 0 0 6px rgba(196, 156, 100, .18);
}
.tl-step b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  color: var(--or);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}
.tl-step span { font-size: .88rem; color: var(--gris); }

/* Repli en frise verticale si le défilement bloqué n'est pas souhaitable */
@media (max-width: 780px) {
  .timeline-wrap { height: auto; }
  .timeline-sticky { position: static; height: auto; display: block; padding-block: var(--section-y); }
  .timeline { flex-direction: column; transform: none !important; gap: 0; }
  .tl-step { flex: none; padding: 0 0 34px 34px; }
  .tl-step::before { top: 0; left: 6px; right: auto; width: 1px; height: 100%; }
  .tl-step:last-child::before { height: 0; }
  .tl-step::after { top: 2px; left: 0; }
}

/* --- 19. Galerie -------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 40px; }
.filters button {
  padding: 10px 22px;
  background: none;
  border: 1px solid rgba(196, 156, 100, .38);
  border-radius: 999px;
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.filters button:hover { border-color: var(--or); color: var(--or); }
.filters button.active { background: var(--or); border-color: var(--or); color: var(--noir); }

.gallery { columns: 3; column-gap: 16px; }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }
.gallery figure {
  position: relative;
  margin: 0 0 16px;
  border-radius: var(--r-m);
  overflow: hidden;
  cursor: pointer;
  break-inside: avoid;
}
.gallery img {
  width: 100%;
  transition: transform .7s var(--ease);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  transition: border-color .4s ease;
}
.gallery figure:hover::after { border-color: var(--or); }
.gallery figure.hide { display: none; }

/* Vignette vidéo : pastille de lecture et légende */
.gallery figure[data-cat="video"] img { aspect-ratio: 9 / 14; object-fit: cover; }
.play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(26, 26, 26, .55);
  border: 1px solid var(--or);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: transform .45s var(--ease), background .35s ease;
  z-index: 2;
}
.play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 18px solid var(--or);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.gallery figure:hover .play { transform: translate(-50%, -50%) scale(1.12); background: rgba(26, 26, 26, .75); }
.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blanc);
  pointer-events: none;
}

/* Galerie à deux photos : pas de maçonnerie, deux grands formats côte à côte */
.gallery--duo { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 940px; margin-inline: auto; }
.gallery--duo figure { margin: 0; }
.gallery--duo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 640px) { .gallery--duo { grid-template-columns: 1fr; } }

/* Visionneuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img, .lightbox video {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: var(--r-m);
  box-shadow: var(--ombre-l);
}
.lightbox video { display: none; background: #000; }
.lightbox.video-mode img { display: none; }
.lightbox.video-mode video { display: block; }
/* Sur une vidéo verticale, les flèches gêneraient les commandes de lecture */
.lightbox.video-mode .lb-prev, .lightbox.video-mode .lb-next { opacity: .35; }
.lb-btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(196, 156, 100, .45);
  border-radius: 50%;
  width: 50px; height: 50px;
  color: var(--or);
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background .3s ease, color .3s ease;
}
.lb-btn:hover { background: var(--or); color: var(--noir); }
.lb-prev { left: 3vw; } .lb-next { right: 3vw; }
.lb-close { top: 3vh; right: 3vw; }
.lb-count {
  position: absolute;
  bottom: 3vh; left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gris);
}

/* --- 20. Partenaires ---------------------------------------------------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); }
.logos a, .logos div {
  display: grid;
  place-content: center;
  width: clamp(140px, 17vw, 210px);
  height: clamp(140px, 17vw, 210px);
  padding: 10px;
  transition: transform .45s var(--ease), filter .45s ease;
}
.logos a:hover, .logos div:hover { transform: translateY(-6px) scale(1.04); }
.logos img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}

.partner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.partner--rev { grid-template-columns: 1fr 220px; }
.partner--rev > *:first-child { order: 2; }
.partner__logo {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  padding: 18px;
}
.partner__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6));
}
.tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--or);
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
}
@media (max-width: 780px) {
  .partner { grid-template-columns: 1fr; }
  .partner--rev > *:first-child { order: 0; }
  .partner__logo { max-width: 210px; }
}

/* --- 21. FAQ ------------------------------------------------------------ */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--or); }
.faq summary i {
  flex: 0 0 auto;
  position: relative;
  width: 16px; height: 16px;
  transition: transform .4s var(--ease);
}
.faq summary i::before, .faq summary i::after {
  content: '';
  position: absolute;
  background: var(--or);
  top: 50%; left: 0;
  width: 16px; height: 1.5px;
  transform: translateY(-50%);
}
.faq summary i::after { transform: translateY(-50%) rotate(90deg); transition: opacity .3s ease; }
.faq details[open] summary i { transform: rotate(135deg); }
.faq details[open] summary { color: var(--or); }
.faq__body { padding-bottom: 26px; color: var(--gris); animation: fadeUp .45s var(--ease); }

/* --- 22. Formulaire et contact ------------------------------------------ */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  display: grid;
  gap: 8px;
  padding: 30px 26px;
  background: var(--anthracite);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-m);
  transition: transform .45s var(--ease), border-color .35s ease, background .35s ease;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--or); }
.contact-card svg { width: 26px; height: 26px; color: var(--or); }
.contact-card b { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.contact-card span { font-size: 1.06rem; font-weight: 600; word-break: break-word; }
.contact-card small { color: var(--gris); }

.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--noir);
  border: 1px solid var(--gris-fonce);
  border-radius: var(--r-s);
  color: var(--blanc);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.section--alt .field input, .section--alt .field select, .section--alt .field textarea { background: var(--anthracite); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(196, 156, 100, .14);
}
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: .86rem; color: var(--gris); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--or); }
.check a { color: var(--or); text-decoration: underline; }
.hp { position: absolute; left: -9999px; }

/* --- 23. Appel à l'action doré ------------------------------------------ */
.cta {
  background: var(--or);
  color: var(--noir);
  text-align: center;
  padding-block: clamp(60px, 9vh, 110px);
}
.cta h2 { color: var(--noir); }
.cta p { color: rgba(26, 26, 26, .78); margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* --- 24. Pied de page --------------------------------------------------- */
.footer { background: var(--anthracite); border-top: 1px solid rgba(196, 156, 100, .28); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(52px, 7vh, 84px);
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.footer ul { display: grid; gap: 11px; }
.footer a:hover { color: var(--or); }
.footer__brand img { height: 66px; margin-bottom: 18px; }
.footer__brand em { color: var(--gris); font-size: .96rem; }
.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a {
  width: 48px; height: 48px;
  display: grid; place-content: center;
  border: 1px solid rgba(196, 156, 100, .5);
  border-radius: var(--r-s);
  color: var(--or);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.socials a:hover { background: var(--or); color: var(--noir); transform: translateY(-3px); }
.socials svg { width: 22px; height: 22px; }

/* Bandeau réseaux sociaux — mis en avant sur l'accueil et en pied de page */
.social-band { background: var(--anthracite); }
.social-band .container {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}
.social-band h3 { font-size: 1.05rem; }
.socials--xl { gap: 16px; }
.socials--xl a {
  width: 64px; height: 64px;
  border-radius: var(--r-m);
  border-color: var(--or);
}
.socials--xl svg { width: 28px; height: 28px; }
.social-handle {
  display: block;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--gris);
  margin-top: 6px;
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-block: 22px;
  text-align: center;
  font-size: .76rem;
  color: var(--gris);
}

/* --- 25. Pages légales -------------------------------------------------- */
.legal { max-width: 760px; }
.legal h3 { color: var(--or); margin: 40px 0 14px; }
.legal p, .legal li { color: var(--gris); font-size: .95rem; }
.legal ul { display: grid; gap: 8px; padding-left: 18px; list-style: disc; }
.legal hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin: 34px 0; }
.legal dl { display: grid; gap: 6px; }
.legal dt { color: var(--blanc); font-weight: 600; margin-top: 14px; }
.legal dd { color: var(--gris); }

/* --- 26. Animations d'apparition ---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }

/* Révélation des titres, lettre par lettre */
.split-char {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .85s var(--ease-out);
  transition-delay: calc(var(--i) * 28ms);
}
.split-line { display: inline-block; overflow: hidden; vertical-align: bottom; }
/* Un mot ne doit jamais être coupé au milieu par un retour à la ligne */
.split-word { display: inline-block; white-space: nowrap; }
.reveal-text.in .split-char { transform: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- 27. Accessibilité : mouvement réduit ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-char { transform: none !important; }
  .timeline-wrap { height: auto; }
  .timeline-sticky { position: static; height: auto; }
  .timeline { flex-wrap: wrap; transform: none !important; }
  .grain, .cursor-dot, .cursor-ring { display: none; }
}

/* --- 28. Divers --------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--or);
  color: var(--noir);
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

.notice {
  padding: 16px 20px;
  border-left: 2px solid var(--or);
  background: rgba(196, 156, 100, .08);
  font-size: .88rem;
  color: var(--gris);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.mini { font-size: .74rem; color: var(--gris); letter-spacing: .04em; }


/* ==========================================================================
   BOUTIQUE
   ========================================================================== */
.produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.produit {
  display: flex;
  flex-direction: column;
  background: var(--anthracite);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}
.produit:hover { transform: translateY(-5px); border-color: var(--or); box-shadow: var(--ombre-m); }

.produit__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noir); }
.produit__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.produit__alt { opacity: 0; }
.produit:hover .produit__alt { opacity: 1; }
.produit:hover .produit__img img { transform: scale(1.03); }

.produit__corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 22px;
  flex: 1;
}
.produit__corps h3 { font-size: 1.02rem; }
.produit__corps p { font-size: .88rem; }

/* Prix et bouton sur une même ligne, calés en bas de carte */
.produit__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.produit__prix {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--or);
  line-height: 1;
}
.produit__prix--todo {
  font-family: var(--font-texte);
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}
.produit__pied .btn { padding: 12px 20px; font-size: .7rem; }

/* --- Trois étapes, sur une ligne, sans encadré --- */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.etape {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: 20px;
  border-left: 1px solid rgba(196, 156, 100, .3);
}
.etape b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--or);
  line-height: 1;
}
.etape span { font-size: .92rem; color: var(--blanc); }
@media (max-width: 760px) {
  .etapes { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Bon de commande : une seule colonne, centrée --- */
.form--centre { max-width: 660px; margin-inline: auto; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px) { .field-row--3 { grid-template-columns: 1fr; } }
.form__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.form__actions .btn { flex: 1 1 220px; }

/* --- Informations pratiques, en texte simple --- */
.infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.infos h4 {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
}
.infos p { font-size: .88rem; }
@media (max-width: 760px) { .infos { grid-template-columns: 1fr; gap: 22px; } }

/* Rappel affiché après le pré-remplissage du bon de commande */
.flash {
  max-width: 660px;
  margin: 0 auto 20px;
  padding: 13px 18px;
  border-left: 2px solid var(--or);
  background: rgba(196, 156, 100, .1);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: .88rem;
  color: var(--blanc);
}


/* ==========================================================================
   TARIFS — cartes en ligne, sur le modèle de la boutique.
   La matière du visuel « West Rise Packages » est portée par l'en-tête de
   carte ; le corps reste sombre, ce qui garde la grille lisible et alignée.
   ========================================================================== */
.tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.tarifs--duo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 820px; margin-inline: auto; }

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--anthracite);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s var(--ease);
}
.tarif:hover { transform: translateY(-5px); border-color: var(--or); box-shadow: var(--ombre-m); }
.tarif--feature { border-color: var(--or); box-shadow: var(--lueur-or); }

/* --- En-tête coloré ----------------------------------------------------- */
.tarif__tete {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 26px 20px 20px;
  text-align: center;
}
/* Coin corné du visuel d'origine, placé en bas de carte */
.tarif::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 36px; aspect-ratio: 1;
  background: linear-gradient(135deg, transparent 0 50%, #F6EBD7 50%, #C8B392 100%);
  box-shadow: -3px -3px 9px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.t--argent     { background: linear-gradient(102deg, #74797E 0%, #FFFFFF 18%, #C6CACE 40%, #FFFFFF 62%, #9BA0A5 88%, #E9ECEE 100%); }
.t--anthracite { background: linear-gradient(102deg, #141414 0%, #3C3C3C 48%, #202020 100%); }
.t--or         { background: linear-gradient(102deg, #8A6A28 0%, #F4DC9B 18%, #C49C64 40%, #FCEFC8 62%, #A67C3A 88%, #EFD69C 100%); }
.t--bronze     { background: linear-gradient(102deg, #6B3F22 0%, #E0AE84 18%, #A5643C 40%, #F4D3B4 62%, #8A522C 88%, #D0956A 100%); }
.t--etain      { background: linear-gradient(102deg, #33383D 0%, #A6AEB6 20%, #666E76 42%, #C2C9D0 64%, #464D54 88%, #939BA3 100%); }

/* Blason en losange, comme sur le visuel */
.tarif__blason {
  width: 74px;
  aspect-ratio: 1;
  background: #0C0C0C;
  border: 1px solid rgba(196, 156, 100, .8);
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.tarif__blason img { width: 66%; transform: rotate(-45deg); }

.tarif__label {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-s);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* L'étiquette prend le contre-pied de la matière */
.t--argent .tarif__label,
.t--etain  .tarif__label { background: #14171A; color: #EDEFF1; }
.t--or     .tarif__label { background: #1A1A1A; color: var(--beige); }
.t--bronze .tarif__label { background: #221108; color: #F2D3B8; }
.t--anthracite .tarif__label { background: var(--or); color: #1A1A1A; }

/* --- Corps -------------------------------------------------------------- */
.tarif__corps { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; flex: 1; }
.tarif__liste { display: grid; gap: 9px; }
.tarif__liste li {
  position: relative;
  padding-left: 18px;
  font-size: .89rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, .88);
}
.tarif__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}

.tarif__pied {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  gap: 14px;
}
.tarif__montant {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  color: var(--or);
  line-height: 1;
}
.tarif__montant small {
  font-family: var(--font-texte);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gris);
}
.tarif__second { font-size: .78rem; color: var(--gris); margin-top: -6px; }
.tarif__pied .btn { padding: 13px 22px; font-size: .72rem; }

.tarif__tag {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  padding: 5px 13px;
  background: var(--or);
  color: #1A1A1A;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-bottom-right-radius: var(--r-m);
}


/* ==========================================================================
   30. ADAPTATION AUX ÉCRANS  (téléphone, tablette, portable, grand écran)
   --------------------------------------------------------------------------
   Ce bloc ne contient que des règles conditionnelles (media queries) ou des
   garde-fous qui n'ont d'effet QUE lorsqu'un contenu déborderait déjà.
   Le rendu au-dessus de 1024 px reste strictement identique à la version
   validée : rien n'est retiré, déplacé ni recoloré.
   ========================================================================== */

/* --- 30.1 Formulaire de contact -----------------------------------------
   La proportion des deux colonnes était portée par un attribut « style »
   écrit dans le HTML, que la règle .split de la ligne 806 ne pouvait donc
   pas replier sur mobile. Elle est ici reprise à l'identique, en classe. */
.split--form { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 900px) { .split--form { grid-template-columns: 1fr; } }

/* --- 30.2 Garde-fous anti-débordement -----------------------------------
   Par défaut, un élément de grille refuse de devenir plus étroit que son
   contenu : un titre ou un mot long élargit alors toute la page et fait
   apparaître une barre de défilement horizontale. Ces deux règles n'ont
   aucun effet tant que la colonne est assez large — donc aucun effet sur
   grand écran. */
.grid > *, .cards > *, .tarifs > *, .produits > *, .etapes > *,
.split > *, .duo > *, .partner > *, .contact-cards > *,
.footer__grid > *, .infos > *, .card, .produit, .tarif { min-width: 0; }

h1, h2, h3, h4, p, li, blockquote, dd, dt, figcaption { overflow-wrap: break-word; }

/* Une ancre visée depuis le menu ne doit pas se retrouver sous l'en-tête. */
[id] { scroll-margin-top: 96px; }
@media (max-width: 980px) { [id] { scroll-margin-top: 78px; } }

/* --- 30.3 Grilles : trois colonnes, puis deux, puis une ------------------ */
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Sous 360 px, les cartes « auto-fit » n'ont plus la place réclamée :
   on abaisse leur largeur minimale plutôt que de laisser la page déborder. */
@media (max-width: 380px) {
  .tarifs, .tarifs--duo, .produits { grid-template-columns: 1fr; }
}

/* --- 30.4 Confort tactile ------------------------------------------------
   Un lien en ligne ne mesure que la hauteur de sa police (≈ 19 px) : c'est
   trop peu pour un doigt. On lui donne une vraie surface, sans changer sa
   taille de texte ni sa couleur. Uniquement sur écran tactile ou étroit. */
@media (max-width: 1024px) {
  .footer ul { gap: 0; }
  .footer ul a { display: inline-block; padding-block: 11px; }
  .breadcrumb a { display: inline-block; padding-block: 11px; }
  .breadcrumb { margin-bottom: 6px; }
  .menu a { padding-block: 7px; }
  .filters button { padding: 13px 22px; }
  .check { grid-template-columns: 26px 1fr; }
  .check input { width: 24px; height: 24px; margin-top: 2px; }
  .arrow-link { padding-block: 11px; }
  .footer__bottom a { display: inline-block; padding-block: 8px; }

  /* Élargissement invisible de la zone tactile de la navigation : la pastille
     transparente agrandit la cible du doigt sans déplacer d'un pixel le texte
     ni le soulignement animé. */
  .nav a { position: relative; }
  .nav a::before { content: ''; position: absolute; inset: -11px -4px; z-index: 1; }

  /* Coordonnées cliquables (téléphone, e-mail) : elles deviennent de vrais
     blocs pour offrir une hauteur de doigt. Même texte, même couleur. */
  .legal dd a, .card a.or, .infos a.or {
    display: inline-block;
    padding-block: 11px;
  }
  .legal dd { line-height: 1.4; }
}

/* --- 30.5 Lisibilité : plus aucun texte sous 12 px sur écran tactile -----
   Les petites capitales espacées descendent jusqu'à 9,3 px : lisible sur un
   écran de portable à 60 cm, beaucoup moins sur un téléphone. Elles sont
   remontées au-dessus de 12 px jusqu'à 900 px de large ; au-delà, la
   typographie d'origine est conservée telle quelle. */
@media (max-width: 900px) {
  .breadcrumb        { font-size: .78rem; }
  .tarif__label      { font-size: .78rem; }
  .tarif__tag,
  .price-card__tag,
  .cards--compact .price-card__tag { font-size: .76rem; }
  .tag               { font-size: .76rem; }
  .produit__prix--todo { font-size: .78rem; }
  .mini              { font-size: .8rem; }
  .stat span         { font-size: .76rem; }
  .tarif__montant small { font-size: .78rem; }
  .eyebrow           { font-size: .78rem; }
  .scroll-hint       { font-size: .74rem; }
  .footer__bottom    { font-size: .8rem; }
}

/* --- 30.6 Téléphone tenu à l'horizontale (hauteur < 520 px) --------------
   La bannière plein écran et la frise à défilement bloqué n'ont pas assez
   de hauteur : la bannière se raccourcit et la frise reprend sa forme
   verticale, exactement comme sur téléphone à la verticale. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__inner { padding-bottom: clamp(44px, 12vh, 90px); }
  .scroll-hint { display: none; }
  .pagehead { min-height: 300px; padding-top: 96px; }

  .timeline-wrap { height: auto; }
  .timeline-sticky { position: static; height: auto; display: block; padding-block: var(--section-y); }
  .timeline { flex-direction: column; transform: none !important; gap: 0; }
  .tl-step { flex: none; padding: 0 0 34px 34px; }
  .tl-step::before { top: 0; left: 6px; right: auto; width: 1px; height: 100%; }
  .tl-step:last-child::before { height: 0; }
  .tl-step::after { top: 2px; left: 0; }
}

/* --- 30.6 bis  Étiquette « le plus choisi » -----------------------------
   Sur une seule colonne, la pastille en angle recouvrait le titre de la
   carte. Elle repasse dans le flux, au-dessus du titre. */
@media (max-width: 720px) {
  .cards--compact .price-card__tag,
  .price-card__tag {
    position: static;
    align-self: flex-start;
    border-radius: var(--r-s);
    margin-bottom: 4px;
  }
}

/* --- 30.7 Visionneuse d'images sur petit écran --------------------------- */
@media (max-width: 640px) {
  .lightbox img, .lightbox video { max-width: 94vw; max-height: 72vh; }
  .lb-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 14px; right: 14px; }
  .lb-count { bottom: 18px; }
}

/* --- 30.8 Derniers ajustements sur les très petits écrans ---------------- */
@media (max-width: 430px) {
  .btn { padding: 16px 24px; letter-spacing: .1em; }
  .btn-row { gap: 12px; }
  .produit__pied { flex-wrap: wrap; }
  .produit__pied .btn { flex: 1 1 100%; }
  .form__actions .btn { flex: 1 1 100%; }
  .footer__brand img { height: 56px; }
  .socials--xl a { width: 56px; height: 56px; }
}

/* Le menu plein écran doit rester défilable si la liste dépasse la hauteur
   (téléphone à l'horizontale, ou grande taille de police système). */
.menu { overflow-y: auto; padding-block: 84px 40px; align-content: safe center; }