/* ==========================================================================
   LUNARA DIGITAL — Feuille de style principale
   --------------------------------------------------------------------------
   Sommaire
   1.  Variables (couleurs officielles, polices, tailles)
   2.  Base et typographie
   3.  Boutons et liens
   4.  En-tête et menu (PC + burger mobile)
   5.  Hero avec fond vidéo animé
   6.  Sections communes
   7.  Page Accueil
   8.  Page Prestations
   9.  Page Contact (formulaire)
   10. Pages Merci et Mentions légales
   11. Pied de page
   12. Responsive (tablette et mobile)
   13. Réduction des animations
   ========================================================================== */


/* 1. VARIABLES ------------------------------------------------------------ */
:root {
  /* Couleurs officielles Lunara Digital */
  --nuit: #142B4A;          /* Bleu nuit  */
  --ivoire: #F6F2EA;        /* Ivoire     */
  --champagne: #C5A56A;     /* Champagne doré */
  --blanc: #FFFFFF;         /* Blanc      */

  /* Nuances dérivées (fonds sombres, textes secondaires, traits) */
  --nuit-profond: #0A1628;
  --nuit-clair: #1E3A60;
  --encre-douce: #4A5A72;
  --trait: rgba(20, 43, 74, 0.14);
  --trait-fort: rgba(20, 43, 74, 0.24);
  --trait-clair: rgba(246, 242, 234, 0.16);
  --erreur: #A3261C;

  /* Polices */
  --f-titre: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-texte: "Newsreader", Georgia, "Times New Roman", serif;

  /* Mise en page */
  --largeur: 1180px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --entete: 76px;
  --rayon-s: 10px;
  --rayon-m: 18px;
  --rayon-l: 28px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


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

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

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--nuit);
  font-family: var(--f-texte);
  font-size: 1.125rem;          /* 18px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-ouvert { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--nuit);
  outline-offset: 3px;
  border-radius: 4px;
}
.sombre :focus-visible { outline-color: var(--champagne); }

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

.lien-evitement {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--champagne);
  color: var(--nuit);
  font-family: var(--f-titre);
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Réseaux sociaux (pied de page) */
.reseaux {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.reseaux a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #C5A56A;   /* champagne */
  color: #F6F2EA;              /* ivoire */
  font-size: 1.05rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.reseaux a:hover,
.reseaux a:focus-visible {
  background: #C5A56A;
  color: #142B4A;              /* bleu marine */
}
.reseaux {
  align-items: center;
}
.pied .reseaux li,
.pied .reseaux li + li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. BOUTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--or { background: var(--champagne); color: var(--nuit); }
.btn--or:hover { background: #D4B67E; }

.btn--nuit { background: var(--nuit); color: var(--ivoire); }
.btn--nuit:hover { background: var(--nuit-clair); }

.btn--contour-clair {
  border-color: rgba(246, 242, 234, 0.45);
  color: var(--ivoire);
}
.btn--contour-clair:hover {
  border-color: var(--ivoire);
  background: rgba(243, 162, 0, 0.08);
}

.btn--contour {
  border-color: var(--trait-fort);
  color: var(--nuit);
}
.btn--contour:hover { border-color: var(--nuit); }

.btn--petit { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.95rem; }

.lien-fleche {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--nuit);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
  white-space: nowrap;
  transition: text-decoration-color 0.2s;
}
.lien-fleche:hover { text-decoration-color: var(--nuit); }



/* 4. EN-TÊTE ET MENU ------------------------------------------------------ */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--entete);
  color: var(--ivoire);
}
/* Le fond flouté est sur un pseudo-élément : cela évite de "bloquer"
   le menu mobile plein écran à l'intérieur de l'en-tête. */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 29, 53, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(197, 165, 106, 0.2);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.entete.est-defile::before,
.entete--plein::before { opacity: 1; }

/* Police du nom Lunara Digital */
.marque span {
  font-family: "Newsreader", Georgia, serif !important;
  font-style: italic;
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  letter-spacing: .02em;
}

.entete__inner {
  position: relative;
  height: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ivoire);
  text-decoration: none;
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 2;
}
.marque img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(197, 165, 106, 0.45);
}

.nav { display: flex; align-items: center; gap: 2.25rem; }

.nav__liens {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__lien {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: rgba(246, 242, 234, 0.82);
  font-family: var(--f-titre);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
}
.nav__lien:hover,
.nav__lien[aria-current="page"] { color: var(--ivoire); }
/* Petit point doré sous la page active, comme une lune en orbite */
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--champagne);
}

.nav__cta-mobile { display: none; }

.burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivoire);
  cursor: pointer;
}
.burger__ligne {
  position: absolute;
  left: 11px;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.burger__ligne:nth-child(1) { top: 18px; }
.burger__ligne:nth-child(2) { top: 27px; }
.burger[aria-expanded="true"] .burger__ligne:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__ligne:nth-child(2) { top: 22.5px; transform: rotate(-45deg); }

/* ===== MENU MOBILE — tailles harmonisées ===== */
html body .nav.est-ouvert {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 28px !important;
}
html body .nav.est-ouvert .nav__liens {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .nav.est-ouvert .nav__liens li {
  width: 100% !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(197, 165, 106, .25) !important;
}
html body .nav.est-ouvert .nav__liens li:first-child {
  border-top: 1px solid rgba(197, 165, 106, .25) !important;
}
html body .nav.est-ouvert .nav__lien {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 4px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  color: #F6F2EA !important;
}
html body .nav.est-ouvert .nav__lien::after {
  content: "→";
  font-size: 1.1rem;
  color: #C5A56A;
  transition: transform .25s;
}
html body .nav.est-ouvert .nav__lien:hover::after {
  transform: translateX(4px);
}
html body .nav.est-ouvert .nav__lien[aria-current="page"] {
  color: #C5A56A !important;
}
html body .nav.est-ouvert .nav__cta-mobile {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 36px !important;
  padding: 16px 24px !important;
  font-size: 1.05rem !important;
}
/*pour mettre la page de navigation mobile en haut de l'ecran*/
html body .nav.est-ouvert {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 120px 28px 40px !important;
}

/* 5. HERO AVEC FOND VIDÉO ------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ivoire);
  background: var(--nuit-profond) url("../images/fond-etoiles-poster.jpg") center / cover no-repeat;
  /* Bas du hero légèrement arrondi, comme l'horizon d'un astre */
  border-radius: 0 0 50% 50% / 0 0 56px 56px;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile bleu nuit : garde le texte lisible et les étoiles discrètes */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 75% 45%, rgba(197, 165, 106, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(10, 22, 40, 0.6) 0%, rgba(10, 22, 40, 0.2) 30%, rgba(20, 43, 74, 0.35) 70%, rgba(20, 43, 74, 0.85) 100%);
}

.hero__grille {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding: calc(var(--entete) + 3.5rem) var(--gouttiere) 6.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.surtitre {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  font-family: var(--f-titre);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--champagne);
}
.surtitre::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

.hero__titre {
  max-width: 15ch;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 3.9vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.hero__texte {
  max-width: 46ch;
  margin-top: 1.6rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: rgba(246, 242, 234, 0.84);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.hero__signature {
  margin-top: 2.6rem;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--champagne);
}

/* Le logo en médaillon, avec une orbite qui tourne très lentement.
   Le fichier du logo n'est pas modifié : il est seulement affiché en rond. */
.lune {
  position: relative;
  justify-self: center;
  width: min(100%, 410px);
  aspect-ratio: 1;
}
.lune__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(197, 165, 106, 0.38),
    0 40px 90px -30px rgba(0, 0, 0, 0.7),
    0 0 140px rgba(197, 165, 106, 0.1);
}
.lune__orbite {
  position: absolute;
  inset: -8%;
  border: 1px solid rgba(197, 165, 106, 0.26);
  border-radius: 50%;
  animation: orbite 70s linear infinite;
}
.lune__orbite::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 14px rgba(197, 165, 106, 0.85);
}
@keyframes orbite { to { transform: rotate(360deg); } }


/* Pas d'effet de mouvement pour les personnes qui désactivent les animations */
@media (prefers-reduced-motion: reduce) {
  .lune:hover .lune__image { transform: none; }
  .lune:hover .lune__orbite { transform: none; }
}

/* Bouton pause de l'animation (accessibilité) */
.hero__pause {
  position: absolute;
  right: var(--gouttiere);
  bottom: 4.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(246, 242, 234, 0.3);
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.45);
  color: var(--ivoire);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.hero__pause:hover { border-color: var(--champagne); }
.hero__pause svg { width: 14px; height: 14px; }
.hero__pause .icone-lecture { display: none; }
.hero__pause[aria-pressed="true"] .icone-pause { display: none; }
.hero__pause[aria-pressed="true"] .icone-lecture { display: block; }

/* Variante pour les pages intérieures (Prestations, Contact) */
.hero--page {
  min-height: clamp(440px, 64svh, 640px);
}
.hero--page .hero__grille {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 5.5rem;
}
.hero--page .hero__titre { max-width: 18ch; }
.hero--page .hero__texte { max-width: 54ch; }

/* Apparition orchestrée au chargement (un seul moment, dans le hero) */
.apparait {
  opacity: 0;
  transform: translateY(16px);
  animation: monte 0.95s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.lune.apparait {
  transform: scale(0.96);
  animation: eclot 1.6s var(--ease) 0.25s forwards;
}
@keyframes monte { to { opacity: 1; transform: none; } }
@keyframes eclot { to { opacity: 1; transform: none; } }


/* 6. SECTIONS COMMUNES ---------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section--blanc { background: var(--blanc); }
.section--nuit { background: var(--nuit); color: var(--ivoire); }

.titre-2 {
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.titre-3 {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
}

.chapo {
  max-width: 58ch;
  margin-top: 1.25rem;
  font-size: 1.2rem;
  color: var(--encre-douce);
}
.section--nuit .chapo { color: rgba(246, 242, 234, 0.78); }

.entete-section { max-width: 760px; }

/* Puces rondes dorées pour les listes */
.liste-orbite {
  margin: 0;
  padding: 0;
  list-style: none;
}
.liste-orbite li {
  position: relative;
  padding-left: 1.6rem;
  break-inside: avoid;
}
.liste-orbite li + li { margin-top: 0.55rem; }
.liste-orbite li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--champagne);
  border-radius: 50%;
}

/* Bandeau d'appel à l'action */
.appel {
  position: relative;
  overflow: hidden;
  background: var(--nuit-profond);
  color: var(--ivoire);
  text-align: center;
}
.appel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1100px;
  height: 1100px;
  margin-left: -550px;
  margin-top: -260px;
  border: 1px solid rgba(197, 165, 106, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(197, 165, 106, 0.09), transparent 45%);
  pointer-events: none;
}
.appel .conteneur { position: relative; }
.appel__titre {
  max-width: 20ch;
  margin-inline: auto;
  font-weight: 300;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem);
  letter-spacing: -0.01em;
}
.appel__texte {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  font-size: 1.2rem;
  color: rgba(246, 242, 234, 0.8);
}
.appel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.4rem;
}


/* 7. PAGE ACCUEIL --------------------------------------------------------- */

/* ===== 3 PILIERS — panneau bleu marine ===== */
html body ul.piliers {
  position: relative;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 48px !important;
  margin: 72px 0 0 !important;
  padding: 52px 56px !important;
  list-style: none !important;
  background: #142B4A !important;                     /* bleu marine */
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px -30px rgba(20, 43, 74, .55);
}
/* Cercle doré décoratif dans le coin, rappel de la lune */
html body ul.piliers::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(197, 165, 106, .25);
  pointer-events: none;
}
html body ul.piliers li.pilier {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
/* Enlève les anciens petits traits au-dessus des titres */
html body ul.piliers li.pilier::before,
html body ul.piliers li.pilier::after {
  content: none !important;
  display: none !important;
}
html body ul.piliers li.pilier .titre-3 {
  margin: 0 0 12px !important;
  font-size: 1.5rem !important;
  color: #F6F2EA !important;                          /* ivoire */
}
/* Petit trait doré sous chaque titre */
html body ul.piliers li.pilier .titre-3::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 14px;
  background: #C5A56A;
  transition: width .3s ease;
}
html body ul.piliers li.pilier:hover .titre-3::after {
  width: 77px;                                         /* le trait s'allonge au survol */
}
html body ul.piliers li.pilier p {
  margin: 0 !important;
  color: rgba(246, 242, 234, .78) !important;
  line-height: 1.7;
}

/* Tablette et téléphone : les piliers l'un sous l'autre */
@media (max-width: 860px) {
  html body ul.piliers {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 36px 28px !important;
    margin-top: 48px !important;
  }
}
/* ===== 3 PILIERS — trois blocs bleus séparés ===== */
html body ul.piliers {
  gap: 24px !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
html body ul.piliers::after {
  display: none !important;                       /* retire le grand cercle */
}
html body ul.piliers li.pilier {
  position: relative;
  overflow: hidden;
  padding: 40px 36px !important;
  background: #142B4A !important;                 /* bleu marine */
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 48px -28px rgba(20, 43, 74, .5);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Petit cercle doré décoratif dans le coin de chaque bloc */
html body ul.piliers li.pilier::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(197, 165, 106, .22);
  pointer-events: none;
}
html body ul.piliers li.pilier:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -26px rgba(20, 43, 74, .6);
}

@media (max-width: 860px) {
  html body ul.piliers { gap: 16px !important; }
  html body ul.piliers li.pilier { padding: 32px 26px !important; }
}


/* Constat + trois piliers */
.constat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.constat__texte { font-size: 1.2rem; color: var(--encre-douce); }
.constat__texte strong { color: var(--nuit); font-weight: 500; }

.piliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pilier {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--trait);
}
.pilier::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--champagne);
}
.pilier p { margin-top: 0.7rem; color: var(--encre-douce); }

/* Liste des prestations (accueil) */
.liste-presta {
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}
.presta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 1rem 2.5rem;
  align-items: baseline;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--trait);
}
.presta__titre {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 400;
}
.presta__texte { color: var(--encre-douce); max-width: 52ch; }
.liste-presta__note {
  margin-top: 2rem;
  color: var(--encre-douce);
  font-style: italic;
}
/* Plus d'espace entre "Plusieurs types de prestations…" et les cartes */
section[aria-labelledby="titre-prestations"] .liste-presta {
  margin-top: 28px !important;
}

/* Pour qui */
.qui { position: relative; overflow: hidden; }
.qui::after {
  content: "";
  position: absolute;
  right: -260px;
  top: 50%;
  width: 640px;
  height: 640px;
  margin-top: -320px;
  border: 1px solid rgba(197, 165, 106, 0.16);
  border-radius: 50%;
  pointer-events: none;
}
.qui .conteneur { position: relative; z-index: 1; }
.qui__intro {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--champagne);
}
.qui__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.4rem;
  max-width: 980px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-titre);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.qui__liste li { display: inline-flex; align-items: center; gap: 1.4rem; }
.qui__liste li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champagne);
  opacity: 0.85;
}
.qui__suite {
  max-width: 54ch;
  margin-top: 2rem;
  font-size: 1.2rem;
  color: rgba(246, 242, 234, 0.76);
}

/* ==========================================================
   MÉTHODE — style "orbite" (version nettoyée)
   ========================================================== */
section[aria-labelledby="titre-methode"] {
  overflow: hidden;
}

/* En-tête centré */
section[aria-labelledby="titre-methode"] .entete-section {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
section[aria-labelledby="titre-methode"] .chapo {
  margin-left: auto;
  margin-right: auto;
}

/* Les 3 étapes */
.etapes {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 0 0;
  list-style: none;
}

/* Grand arc doré derrière les étapes */
.etapes::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 4%;
  right: 4%;
  height: 520px;
  border: 1px solid rgba(197, 165, 106, .45);
  border-left-color: rgba(197, 165, 106, .2);
  border-right-color: rgba(197, 165, 106, .2);
  border-bottom-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

/* Cartes blanches */
.etape {
  position: relative;
  padding: 52px 28px 32px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 24px 46px -30px rgba(20, 43, 74, .35);
  transition: transform .3s ease;
}
.etape:hover               { transform: translateY(-6px); }
.etape:nth-child(2)        { transform: translateY(-70px); }   /* étape du milieu surélevée */
.etape:nth-child(2):hover  { transform: translateY(-76px); }

/* Lune "punaise" : centrée, moitié hors de la carte */
.etape__phase {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 64px;
  height: 64px;
  margin: 0 !important;
  padding: 7px;
  border-radius: 50%;
  background: #F6F2EA;
  box-shadow: 0 8px 18px -6px rgba(20, 43, 74, .25), 0 0 0 1px rgba(197, 165, 106, .35);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.etape__phase svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Textes */
.etape__numero {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #C5A56A;
}
.etape .titre-3 {
  margin: 0 0 8px;
}
.etape p {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--encre-douce);
}

/* Tablette et téléphone : étapes l'une sous l'autre, sans arc */
@media (max-width: 860px) {
  .etapes {
    grid-template-columns: 1fr !important;
    gap: 56px;
    padding-top: 40px;
  }
  .etapes::before {
    display: none;
  }
  .etape:nth-child(2),
  .etape:nth-child(2):hover {
    transform: none;
  }
}
/* ==========================================================
   VALEURS (inchangé)
   ========================================================== */
.valeurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.valeur {
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--trait);
}
.valeur p {
  margin-top: 0.6rem;
  color: var(--encre-douce);
}
/* ===== — correctif mobile ===== */
@media (max-width: 860px) {
  html body .etapes {
    grid-template-columns: 1fr !important;
    gap: 64px !important;
    padding-top: 44px !important;
  }
  html body .etapes .etape {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center !important;
    padding: 50px 24px 30px !important;
  }
  html body .etapes .etape__numero,
  html body .etapes .etape .titre-3,
  html body .etapes .etape p {
    display: block !important;
    width: auto !important;
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body .etapes .etape__numero {
    margin-bottom: 4px !important;
  }
  html body .etapes .etape .titre-3 {
    margin-bottom: 8px !important;
  }
}


/* 8. PAGE PRESTATIONS ----------------------------------------------------- */
.sous-nav {
  position: sticky;
  top: var(--entete);
  z-index: 40;
  background: rgba(246, 242, 234, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.sous-nav__liste {
  position: relative;
  display: flex;
  gap: 0.5rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.8rem var(--gouttiere);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sous-nav__liste::-webkit-scrollbar { display: none; }
.sous-nav__lien {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  font-family: var(--f-titre);
  font-size: 0.93rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--nuit);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sous-nav__lien:hover { border-color: var(--nuit); }
.sous-nav__lien.est-actif {
  background: var(--nuit);
  border-color: var(--nuit);
  color: var(--ivoire);
}

.service { scroll-margin-top: calc(var(--entete) + 64px); }
.service__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.service__intro .btn { margin-top: 2rem; }
.service__note {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--champagne);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--encre-douce);
}
.service__bloc + .service__bloc { margin-top: 2.75rem; }
.service__bloc h3 { margin-bottom: 1.1rem; }
.service__bloc--colonnes .liste-orbite { columns: 2; column-gap: 2.5rem; }
.service__bloc--colonnes .liste-orbite li { margin: 0 0 0.55rem; }
.benefices {
  padding: 1.75rem 1.9rem;
  border-radius: var(--rayon-m);
  background: var(--ivoire);
}
.section--blanc .benefices { background: var(--ivoire); }
.service:not(.section--blanc) .benefices { background: var(--blanc); }

/* Formules */
.formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.formule {
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.9rem 1.9rem;
  border: 1px solid var(--trait-clair);
  border-radius: var(--rayon-l);
  background: rgba(10, 22, 40, 0.35);
}
.formule__nom {
  font-weight: 300;
  font-size: 2rem;
  color: var(--champagne);
}
.formule__desc { margin-top: 0.8rem; color: rgba(246, 242, 234, 0.85); }
.formule__exemples-titre {
  margin-top: 1.6rem;
  margin-bottom: 0.8rem;
  font-family: var(--f-titre);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ivoire);
}
.formule .liste-orbite { color: rgba(246, 242, 234, 0.8); font-size: 1.05rem; }
.formule__pied {
  margin-top: auto;
  padding-top: 1.75rem;
}
.formule__tarif {
  margin-bottom: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait-clair);
  font-family: var(--f-titre);
  font-size: 0.98rem;
  color: rgba(246, 242, 234, 0.75);
}
.formules__note {
  max-width: 70ch;
  margin-top: 2rem;
  font-style: italic;
  color: rgba(246, 242, 234, 0.72);
}

/* FAQ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.faq__liste { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--f-titre);
  font-size: 1.2rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--nuit), var(--nuit)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--nuit), var(--nuit)) center / 1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__reponse {
  padding: 0 0 1.5rem;
  max-width: 62ch;
  color: var(--encre-douce);
}


/* 9. PAGE CONTACT --------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.contact__aside { position: sticky; top: calc(var(--entete) + 2rem); }
.contact__etapes {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.contact__etapes li {
  position: relative;
  padding-left: 3.25rem;
  counter-increment: etape;
  color: var(--encre-douce);
}
.contact__etapes li + li { margin-top: 1.5rem; }
.contact__etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  font-family: var(--f-titre);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nuit);
}
.contact__etapes strong {
  display: block;
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--nuit);
}
.contact__zone {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
  color: var(--encre-douce);
}
.contact__zone h3 { margin-bottom: 0.5rem; color: var(--nuit); }
.contact__zone a { color: var(--nuit); text-underline-offset: 0.25em; }

.formulaire {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--rayon-l);
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--trait), 0 40px 80px -50px rgba(20, 43, 74, 0.45);
}
.formulaire__groupe {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.formulaire__groupe + .formulaire__groupe { margin-top: 2.25rem; }
.formulaire__legende {
  display: block;
  width: 100%;
  margin-bottom: 1.1rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--trait);
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 500;
}
.grille-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.champ { display: flex; flex-direction: column; gap: 0.45rem; }
.champ--large { grid-column: 1 / -1; }

.champ label,
.choix__titre {
  font-family: var(--f-titre);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--nuit);
}
.requis { color: var(--encre-douce); }
.facultatif {
  font-weight: 400;
  color: var(--encre-douce);
}
.aide {
  font-size: 0.98rem;
  color: var(--encre-douce);
}

.champ input,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-s);
  background: #FBF9F5;
  color: var(--nuit);
  font-family: var(--f-titre);
  font-size: 1rem;              /* 16px minimum : évite le zoom auto sur iPhone */
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { min-height: 150px; resize: vertical; }
/* Le champ en erreur reste visible sous l'en-tête fixe */
.champ input, .champ textarea, .pastille input, .accord input {
  scroll-margin-top: calc(var(--entete) + 2.5rem);
}
.champ input::placeholder,
.champ textarea::placeholder { color: #8391A5; }
.champ input:hover,
.champ textarea:hover { border-color: rgba(20, 43, 74, 0.42); }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--nuit);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(197, 165, 106, 0.45);
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--erreur); }

.erreur {
  min-height: 0;
  font-family: var(--f-titre);
  font-size: 0.92rem;
  color: var(--erreur);
}
.erreur:empty { display: none; }

/* Cases "type de prestation" en forme de pastilles */
.choix { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix__titre { display: block; margin-bottom: 0.3rem; padding: 0; }
.choix__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.pastille { position: relative; }
.pastille input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pastille span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: #FBF9F5;
  font-family: var(--f-titre);
  font-size: 0.97rem;
  line-height: 1.25;
  color: var(--nuit);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  pointer-events: none;
}
.pastille span::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}
.pastille input:hover + span { border-color: var(--nuit); }
.pastille input:checked + span {
  background: var(--nuit);
  border-color: var(--nuit);
  color: var(--ivoire);
}
.pastille input:checked + span::before {
  background: var(--champagne);
  border-color: var(--champagne);
}
.pastille input:focus-visible + span {
  outline: 2px solid var(--nuit);
  outline-offset: 3px;
}
.choix.est-invalide .pastille span { border-color: var(--erreur); }

.accord {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--encre-douce);
}
.accord input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--nuit);
  cursor: pointer;
}
.accord a { color: var(--nuit); text-underline-offset: 0.2em; }

.formulaire__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
}
.formulaire__envoi p { font-size: 0.95rem; color: var(--encre-douce); }
.formulaire button[disabled] { opacity: 0.7; cursor: progress; }
/* ===== CONTACT — liste "Domaine d'activité" ===== */
.champ select {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 16px;
  font-family: inherit;
  font-size: 1rem;
  color: #142B4A;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C5A56A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1px solid rgba(20, 43, 74, .18);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.champ select:focus {
  outline: none;
  border-color: #C5A56A;
  box-shadow: 0 0 0 3px rgba(197, 165, 106, .2);
}
.champ select:invalid {
  color: #8A93A1;
}



/* 10. PAGES MERCI ET MENTIONS LÉGALES ------------------------------------- */
.hero--merci { text-align: center; }
.hero--merci .hero__grille {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.hero--merci .lune { width: 150px; margin-bottom: 1rem; }
.hero--merci .hero__titre { max-width: 18ch; margin-inline: auto; }
.hero--merci .hero__texte { margin-inline: auto; }
.hero--merci .hero__actions { justify-content: center; }

.legal {
  padding-top: calc(var(--entete) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.legal .conteneur { max-width: 820px; }
.legal h1 {
  font-weight: 300;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.5rem);
}
.legal__intro { margin-top: 1.25rem; color: var(--encre-douce); }
.legal h2 {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
  font-size: 1.6rem;
  scroll-margin-top: calc(var(--entete) + 1.5rem);
}
.legal h3 { margin-top: 1.75rem; font-size: 1.2rem; font-weight: 500; }
.legal h2 + p, .legal h3 + p, .legal h2 + ul, .legal h3 + ul { margin-top: 0.9rem; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 0.35rem; }
.a-completer {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: rgba(197, 165, 106, 0.28);
  color: var(--nuit);
  font-family: var(--f-titre);
  font-size: 0.95em;
}


/* 11. PIED DE PAGE -------------------------------------------------------- */
.pied {
  background: var(--nuit-profond);
  color: rgba(246, 242, 234, 0.78);
  border-top: 1px solid var(--trait-clair);
  font-size: 1.02rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
.pied .marque { margin-bottom: 1.25rem; }
.pied__desc { max-width: 34ch; }
.pied__signature {
  margin-top: 1rem;
  font-style: italic;
  color: var(--champagne);
}
.pied__titre {
  margin-bottom: 1rem;
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ivoire);
}
.pied__liens { margin: 0; padding: 0; list-style: none; }
.pied__liens li + li { margin-top: 0.55rem; }
.pied__liens a {
  color: rgba(246, 242, 234, 0.78);
  text-decoration: none;
  transition: color 0.2s;
}
.pied__liens a:hover { color: var(--ivoire); text-decoration: underline; text-underline-offset: 0.25em; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--trait-clair);
  font-family: var(--f-titre);
  font-size: 0.92rem;
  color: rgba(246, 242, 234, 0.6);
}
.pied__bas p { margin: 0; }
.pied__bas a { color: inherit; text-underline-offset: 0.25em; }
.pied__bas a:hover { color: var(--ivoire); }


/* 12. RESPONSIVE ---------------------------------------------------------- */

/* Tablette */
@media (max-width: 1024px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .etape:not(:last-child)::after { display: none; }
  .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formules { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .presta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .presta__lien { grid-column: 2; }
}

/* Menu burger à partir de 900px */
@media (max-width: 900px) {
  :root { --entete: 68px; }

  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    padding: calc(var(--entete) + 1rem) var(--gouttiere) 3rem;
    background:
      radial-gradient(circle at 85% 15%, rgba(197, 165, 106, 0.1), transparent 45%),
      var(--nuit-profond);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .nav.est-ouvert {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s var(--ease);
  }
  .nav__liens { flex-direction: column; gap: 0.75rem; }
  .nav__lien {
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--ivoire);
  }
  .nav__lien[aria-current="page"] { color: var(--champagne); }
  .nav__lien[aria-current="page"]::after { display: none; }
  .nav__cta-desktop { display: none; }
  .nav__cta-mobile { display: inline-flex; }

  .hero__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding-top: calc(var(--entete) + 2.5rem);
    padding-bottom: 5.5rem;
  }
  .lune {
    order: -1;
    justify-self: start;
    width: 150px;
  }
  .lune__orbite { inset: -10%; }

  .constat,
  .service__grille,
  .faq,
  .contact { grid-template-columns: minmax(0, 1fr); }

  .contact__aside { position: static; }
  .pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied__grille > :first-child { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }

  .hero { border-radius: 0 0 50% 50% / 0 0 28px 28px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__pause { bottom: 2.5rem; }

  .piliers,
  .valeurs,
  .etapes { grid-template-columns: minmax(0, 1fr); }

  /* Étapes en colonne, reliées par un axe vertical */
  .etapes { row-gap: 2.25rem; }
  .etape:not(:last-child)::after {
    display: block;
    top: 60px;
    bottom: calc(-2.25rem + 12px);
    left: 24px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .etape {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 1.25rem;
  }
  .etape__phase { grid-row: 1 / span 3; margin-bottom: 0; }

  .presta { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 1.6rem 0; }
  .presta__lien { grid-column: 1; margin-top: 0.3rem; }

  /* Pour qui : une liste verticale avec un point doré devant chaque ligne */
  .qui::after { display: none; }
  .qui__liste { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .qui__liste li { gap: 0.9rem; }
  .qui__liste li:not(:last-child)::after { display: none; }
  .qui__liste li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--champagne);
  }

  .appel::before { width: 700px; height: 700px; margin-left: -350px; margin-top: -120px; }

  .service__bloc--colonnes .liste-orbite { columns: 1; }
  .benefices { padding: 1.4rem 1.3rem; }

  .grille-champs { grid-template-columns: minmax(0, 1fr); }
  .formulaire { border-radius: var(--rayon-m); }
  .formulaire__envoi .btn { width: 100%; }

  .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .appel__actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   CARTES DES PRESTATIONS (page d'accueil)
   À coller tout à la fin de css/style.css
   ========================================================= */
.liste-presta {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  counter-reset: presta;
}
 
.liste-presta .presta {
  counter-increment: presta;
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 32px 28px 28px;
  background: #FAF7F1;                         /* ivoire clair */
  border: 1px solid rgba(197, 165, 106, .35);  /* liseré champagne */
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 43, 74, .04), 0 10px 26px rgba(20, 43, 74, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
 
/* Numéro doré 01, 02, 03… */
.liste-presta .presta::before {
  content: counter(presta, decimal-leading-zero);
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .14em;
  color: #C5A56A;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(197, 165, 106, .45);
  min-width: 34px;
}
 
.liste-presta .presta:hover,
.liste-presta .presta:focus-within {
  transform: translateY(-4px) scale(1.06);
  border-color: #C5A56A;
  box-shadow: 0 16px 36px rgba(20, 43, 74, .12);
}
 
.liste-presta .presta__titre {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
  color: #142B4A;                               /* bleu marine */
}
 
.liste-presta .presta__texte {
  margin: 0;
  max-width: none;
  flex: 1;                                      /* pousse le lien en bas */
}
 
.liste-presta .presta__lien {
  margin-top: auto;
  padding-top: 6px;
}
 
/* Tablette : 2 cartes par ligne */
@media (max-width: 960px) {
  .liste-presta { grid-template-columns: repeat(2, 1fr); }
}
 
/* Téléphone : 1 carte par ligne */
@media (max-width: 620px) {
  .liste-presta { grid-template-columns: 1fr; gap: 16px; }
  .liste-presta .presta { padding: 26px 22px 22px; }
}
 
/* Pas d'animation pour les personnes qui les désactivent */
@media (prefers-reduced-motion: reduce) {
  .liste-presta .presta { transition: none; }
  .liste-presta .presta:hover,
  .liste-presta .presta:focus-within { transform: none; }
}

/* Agrandissement des cartes au survol */
.liste-presta .presta:hover,
.liste-presta .presta:focus-within {
  transform: translateY(-4px) scale(1.03) !important;
}

/* Contenu plus large sur toutes les pages */
.conteneur,
.entete__inner,
.hero__grille {
  max-width: 1800px !important;
}

/* Valeurs en cartes */
.valeurs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.valeurs .valeur {
  margin: 0;
  padding: 28px 26px;
  background: #FAF7F1;                          /* ivoire clair */
  border: 1px solid rgba(197, 165, 106, .35) !important;  /* liseré champagne */
  border-radius: 16px;
}
.valeurs .valeur h3 {
  margin: 0 0 8px;
}
.valeurs .valeur h3::before {
  content: "✦ ";
  color: #C5A56A;                               /* petite étoile dorée */
}
.valeurs .valeur p {
  margin: 0;
}
@media (max-width: 960px) {
  .valeurs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .valeurs { grid-template-columns: 1fr; }
}

/* ===== POUR QUI ? — VERSION DÉFINITIVE (cases + icônes, 2 / 3 / 1) ===== */
html body section.qui .conteneur {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
  grid-template-areas: "intro liste" "suite liste" !important;
  column-gap: 72px !important;
  row-gap: 20px !important;
  align-items: start !important;
}
html body section.qui .qui__intro {
  grid-area: intro !important;
  align-self: end;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important;
}
html body section.qui .qui__suite {
  grid-area: suite !important;
  margin: 0 !important;
  max-width: 42ch;
  font-size: 1.15rem;
  line-height: 1.7;
  text-align: left !important;
}
 
/* Mosaïque : 2 cases en haut, 3 au milieu, 1 en bas */
html body section.qui ul.qui__liste {
  grid-area: liste !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  justify-items: stretch !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body section.qui ul.qui__liste li:nth-child(1),
html body section.qui ul.qui__liste li:nth-child(2) { grid-column: span 3 !important; }
html body section.qui ul.qui__liste li:nth-child(3),
html body section.qui ul.qui__liste li:nth-child(4),
html body section.qui ul.qui__liste li:nth-child(5) { grid-column: span 2 !important; }
html body section.qui ul.qui__liste li:nth-child(6) { grid-column: span 6 !important; }
 
/* Les cases */
html body section.qui ul.qui__liste li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: auto !important;
  min-height: 92px;
  margin: 0 !important;
  padding: 20px 22px !important;
  text-align: left !important;
  background: linear-gradient(160deg, rgba(246,242,234,.06), rgba(246,242,234,.015)) !important;
  border: 1px solid rgba(197, 165, 106, .28) !important;
  border-radius: 14px !important;
  font-family: "Jost", sans-serif !important;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #F6F2EA !important;
  transition: border-color .25s, transform .25s, background .25s !important;
}
 
/* Plus aucun point ni trait */
html body section.qui ul.qui__liste li::after,
html body section.qui ul.qui__liste li:not(:last-child)::after {
  content: none !important;
  display: none !important;
}
 
/* Cercle doré avec icône */
html body section.qui ul.qui__liste li::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(197, 165, 106, .12) !important;
  border: 1px solid rgba(197, 165, 106, .45) !important;
  color: #C5A56A !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  transition: background .25s, color .25s;
}
html body section.qui ul.qui__liste li:nth-child(1)::before { content: "\f54e" !important; } /* boutique */
html body section.qui ul.qui__liste li:nth-child(2)::before { content: "\f6e3" !important; } /* marteau */
html body section.qui ul.qui__liste li:nth-child(3)::before { content: "\f2e7" !important; } /* couverts */
html body section.qui ul.qui__liste li:nth-child(4)::before { content: "\f135" !important; } /* fusée */
html body section.qui ul.qui__liste li:nth-child(5)::before { content: "\e533" !important; } /* groupe */
html body section.qui ul.qui__liste li:nth-child(6)::before { content: "\f1ad" !important; } /* immeuble */
 
/* Survol */
html body section.qui ul.qui__liste li:hover {
  border-color: #C5A56A !important;
  background: rgba(197, 165, 106, .08) !important;
  transform: translateY(-3px);
}
html body section.qui ul.qui__liste li:hover::before {
  background: #C5A56A !important;
  color: #142B4A !important;
}
 
/* Écran moyen : titre au-dessus, cases 2 par 2 */
@media (max-width: 1100px) {
  html body section.qui .conteneur {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "suite" "liste" !important;
  }
}
@media (max-width: 760px) {
  html body section.qui ul.qui__liste { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body section.qui ul.qui__liste li:nth-child(n) { grid-column: span 1 !important; }
}
/* Téléphone : 1 case par ligne */
@media (max-width: 480px) {
  html body section.qui ul.qui__liste { grid-template-columns: 1fr !important; }
}
/* Mosaïque : haut et bas centrés, rangée du milieu plus large */
@media (min-width: 761px) {
  html body section.qui ul.qui__liste {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
/* En haut : 2 cases centrées */
  html body section.qui ul.qui__liste li:nth-child(1) { grid-column: 3 / span 4 !important; }
  html body section.qui ul.qui__liste li:nth-child(2) { grid-column: 7 / span 4 !important; }
/* Au milieu : 3 cases sur toute la largeur */
  html body section.qui ul.qui__liste li:nth-child(3) { grid-column: 1 / span 4 !important; }
  html body section.qui ul.qui__liste li:nth-child(4) { grid-column: 5 / span 4 !important; }
  html body section.qui ul.qui__liste li:nth-child(5) { grid-column: 9 / span 4 !important; }
/* En bas : TPE et PME, même taille que les autres, centré */
  html body section.qui ul.qui__liste li:nth-child(6) { grid-column: 5 / span 4 !important; }
} 

/* 13. RÉDUCTION DES ANIMATIONS --------------------------------------------- */
/* Respecte les personnes qui ont désactivé les animations sur leur appareil */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .apparait, .lune.apparait { opacity: 1; transform: none; animation: none; }
  .lune__orbite { animation: none; }
}