/* Feuille de style unifiée pour Neuropsy & TCC - refonte « clean & reassuring » */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&display=swap');

/* Variables de couleurs (inchangées) */
:root {
  /* Palette principale */
  --background: hsl(30, 40%, 96%);
  --foreground: hsl(24, 30%, 14%);
  --primary: hsl(140, 15%, 28%); /* sage green pour titres */
  --primary-foreground: hsl(30, 40%, 98%);
  --secondary: hsl(20, 25%, 94%); /* beige doux */
  --secondary-foreground: hsl(24, 30%, 20%);
  --muted: hsl(30, 20%, 92%);
  --muted-foreground: hsl(24, 15%, 40%);
  --accent: hsl(28, 35%, 75%); /* beige chaleureux */
  --accent-foreground: hsl(24, 30%, 20%);
  --border: hsl(28, 20%, 85%);
  --card: hsl(30, 45%, 98%);
  --card-foreground: var(--foreground);

  /* Effets */
  --hero-accent: hsl(350, 35%, 70%); /* rose pour halo hero */

  /* Ombres douces et diffuses */
  --shadow-soft: 0 2px 8px -2px hsl(140, 15%, 28%, 0.08), 0 8px 24px -12px hsl(140, 15%, 28%, 0.12);
  --shadow-elegant: 0 4px 14px -4px hsl(140, 15%, 28%, 0.12), 0 16px 40px -18px hsl(140, 15%, 28%, 0.18);
  --shadow-elev: 0 4px 14px -4px hsl(28, 35%, 55%, 0.18);
  --shadow-elev-strong: 0 10px 28px -8px hsl(28, 35%, 50%, 0.28);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* Rayons plus généreux pour un rendu plus doux */
  --radius: 1.25rem;
  --radius-sm: 0.875rem;
  --radius-pill: 999px;
}

/* Reset et base */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: hsl(28, 35%, 75%, 0.45);
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

/* Typography helpers */
.font-serif { font-family: var(--font-serif); }
.text-primary { color: var(--primary); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent { color: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: hsl(30, 40%, 96%, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid hsl(28, 20%, 85%, 0.7);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
}

/* Mobile : marge horizontale du header pour que le logo et le bouton menu ne touchent pas les bords de l’écran */
@media (max-width: 859px) {
  .nav { padding-left: 1.5rem; padding-right: 1.5rem; }
  .banner-pin { display: none; }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.logo-icon {
  color: var(--primary);
  width: 30px;
  height: 30px;
  flex: none;
  transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
  transform: rotate(-6deg) scale(1.05);
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--primary);
  white-space: nowrap;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted-foreground);
  transition: color 0.2s, background 0.2s;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--primary);
  background: hsl(140, 18%, 90%, 0.6);
}

.nav-cta {
  display: none;
}

.mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.mobile-toggle:hover {
  background: hsl(140, 18%, 90%, 0.6);
}

.mobile-toggle:active {
  transform: scale(0.94);
}

/* Menu mobile : panneau qui se déplie en douceur */
.mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
  border-top: 0 solid var(--border);
}

.mobile-menu.open {
  max-height: 420px;
  border-top: 1px solid var(--border);
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0 1.1rem;
}

.mobile-menu a {
  text-decoration: none;
  color: var(--foreground);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 0.2s;
}

.mobile-menu a:hover {
  background: hsl(140, 18%, 90%, 0.6);
}

.mobile-menu .btn {
  margin-top: 0.4rem;
}

@media (min-width: 860px) {
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .mobile-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* Réorganisation de la barre en mobile : bouton menu (accès pouce) à gauche,
   « Neuropsy & TCC » au centre, icône cerveau à droite.
   display:contents fait remonter l'icône et le nom comme enfants directs de .nav,
   ce qui permet de les ordonner autour du bouton menu. Placé après les règles de base
   pour ne pas être écrasé (spécificité égale). */
@media (max-width: 859px) {
  .logo { display: contents; }
  .mobile-toggle { order: 1; }
  .brand-name { order: 2; flex: 1 1 auto; text-align: center; }
  .logo-icon { order: 3; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

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

.btn-brand {
  background: hsl(350, 35%, 52%);
  color: var(--primary-foreground);
  box-shadow: 0 4px 14px -4px hsl(350, 35%, 45%, 0.45);
  padding: 0.6rem 1.3rem;
}

.btn-brand:hover {
  background: hsl(350, 38%, 45%);
  box-shadow: 0 10px 28px -8px hsl(350, 35%, 45%, 0.5);
  transform: translateY(-2px);
}

.btn-brand:active {
  transform: translateY(0);
}

.btn-outline {
  background: transparent;
  color: hsl(350, 38%, 45%);
  box-shadow: inset 0 0 0 1.5px hsl(350, 35%, 52%, 0.55);
  padding: 0.6rem 1.3rem;
}

.btn-outline:hover {
  background: hsl(350, 35%, 52%, 0.08);
  box-shadow: inset 0 0 0 1.5px hsl(350, 35%, 52%);
  transform: translateY(-2px);
}

.btn-outline:active {
  transform: translateY(0);
}

.btn-xl {
  padding: 0.95rem 2.4rem;
  font-size: 1.02rem;
}

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
}

/* ===== Hero (accueil) ===== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, hsl(350, 35%, 70%, 0.16), transparent 55%),
    radial-gradient(110% 80% at 0% 110%, hsl(140, 22%, 70%, 0.18), transparent 55%),
    linear-gradient(180deg, hsl(30, 45%, 97%), hsl(30, 38%, 95%));
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/* Décor botanique SVG */
.hero-botanical {
  position: absolute;
  opacity: 0.55;
  color: var(--primary);
}

.hero-botanical.is-left {
  left: -60px;
  bottom: -40px;
  width: 320px;
  transform: rotate(4deg);
  color: hsl(140, 18%, 45%);
}

.hero-botanical.is-right {
  right: -50px;
  top: -30px;
  width: 280px;
  transform: rotate(-8deg) scaleX(-1);
  color: hsl(28, 30%, 62%);
  opacity: 0.5;
}

.hero-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(640px circle at var(--px, 70%) var(--py, 25%), hsl(350, 35%, 70%, 0.18), transparent 60%);
  z-index: 1;
  transition: background 0.2s ease;
}

/* Décor botanique (PNG détouré, fond transparent) */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--hero-photo-opacity, 0.28);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: hsl(140, 18%, 90%, 0.8);
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.4rem;
}

.hero-eyebrow svg { width: 15px; height: 15px; }

.hero-title {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0 0 1.1rem;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--muted-foreground);
  margin: 0.3rem 0;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 640px) {
  .hero-actions { flex-direction: row; justify-content: center; }
}

@media (min-width: 768px) {
  .hero-content { padding: 5.5rem 2rem 5rem; }
  .hero-title { font-size: 3.9rem; }
  .hero-subtitle { font-size: 1.25rem; }
}

/* ===== Sections ===== */
.section {
  padding: 4rem 0;
}

.section + .section,
.section-intro + .section {
  padding-top: 0;
}

.section-alt {
  background: hsl(30, 35%, 94%, 0.6);
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--primary);
  text-align: center;
  margin: 0 auto 0.75rem;
  line-height: 1.15;
}

.section-lead {
  text-align: center;
  color: var(--muted-foreground);
  max-width: 38rem;
  margin: 0 auto 2.75rem;
}

.section-intro {
  padding: 3rem 0 1rem;
}

.section-LowPadding {
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .section { padding: 5rem 0; }
  .section-title { font-size: 2.4rem; }
  .section-intro { padding: 4rem 0 1.5rem; }
}

/* ===== Grid ===== */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
  .grid-sm-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-sm-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-lg-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Cards ===== */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  transition: box-shadow 0.25s, transform 0.25s;
}

.card:hover {
  box-shadow: var(--shadow-elegant);
  transform: translateY(-3px);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--primary);
  width: 3.25rem;
  height: 3.25rem;
  background: hsl(140, 18%, 90%);
  border-radius: 50%;
}

.card-icon svg { width: 1.6rem; height: 1.6rem; }

.card-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--primary);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}

.card-desc {
  font-size: 0.95rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* ===== Flip cards (tap-friendly) ===== */
.flip-card {
  perspective: 1200px;
  min-height: 230px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 230px;
  display: grid;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  transform-style: preserve-3d;
}

/* Survol (desktop) ET état actif via .is-flipped (clic / tap) */
.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Bascule d'opacité au point milieu de la rotation (0.3s = moitié de 0.6s).
   Filet de sécurité iOS/WebKit : si le moteur ignore backface-visibility et
   garde les deux faces affichées, l'opacité garantit qu'une seule face est
   visible à la fois. La durée 0s + délai 0.3s = bascule instantanée quand la
   carte est de profil (90°), donc invisible à l'œil. */
.flip-card:hover .flip-card-front,
.flip-card.is-flipped .flip-card-front { opacity: 0; }
.flip-card:hover .flip-card-back,
.flip-card.is-flipped .flip-card-back { opacity: 1; }

.flip-card-front,
.flip-card-back {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.18s ease-in-out 0.21s;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-card-front {
  box-shadow: var(--shadow-soft);
  opacity: 1;
}

.flip-card-back {
  transform: rotateY(180deg);
  opacity: 0;
  background:
    radial-gradient(120% 90% at 80% -10%, hsl(350, 40%, 75%, 0.30), transparent 55%),
    radial-gradient(110% 90% at 0% 110%, hsl(140, 30%, 72%, 0.38), transparent 60%),
    linear-gradient(160deg, hsl(140, 30%, 94%), hsl(30, 40%, 96%));
  box-shadow: var(--shadow-elegant);
  justify-content: center;
}

.flip-card-back .card-title {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.flip-card-back .card-desc {
  line-height: 1.6;
  font-size: 0.9rem;
}

/* ===== Indisponibilité TCC =====
   Tout est piloté par la classe "is-complet" sur <article class="flip-card">.
   Pour signaler "plus de place" : ajoute "is-complet" sur la carte.
   Pour réactiver les RDV : retire simplement "is-complet". Rien d'autre à toucher. */
.tcc-ribbon,
.tcc-pastille { display: none; }

/* ===== Bandeau "premières disponibilités" (carte bilan) =====
   Texte piloté par le nom d'un fichier-mois posé à côté de index.html
   (voir script.js). Ton jaune informatif. */
.dispo-info {
  display: inline-flex;
  align-items: center;
  margin-top: 0.7rem;
  padding: 0.34rem 0.85rem;
  background: hsl(28, 78%, 88%);
  color: hsl(22, 62%, 36%);
  border: 1px solid hsl(26, 65%, 73%);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.dispo-info[hidden] { display: none; }

/* Recto : ruban diagonal rose dans le coin supérieur droit.
   Le clip (overflow:hidden) sur la face est inoffensif ici : même si
   WebKit/iOS ignore backface-visibility à cause de ce clip, le filet de
   sécurité en opacité (voir .flip-card-front/back) garantit qu'une seule
   face est visible à la fois pendant le retournement. */
.flip-card.is-complet .flip-card-front { position: relative; overflow: hidden; }
.flip-card.is-complet .flip-card-front > .card-icon,
.flip-card.is-complet .flip-card-front > .card-title,
.flip-card.is-complet .flip-card-front > .card-desc {
  position: relative;
  z-index: 1;
}
.flip-card.is-complet .tcc-ribbon {
  display: block;
  position: absolute;
  z-index: 0;
  top: 26px;
  right: -54px;
  width: 200px;
  padding: 6px 0;
  transform: rotate(45deg);
  text-align: center;
  background: hsl(350, 52%, 91%);
  color: hsl(350, 32%, 38%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px hsl(350, 30%, 40%, 0.18);
}

/* Verso : fond gris uni (au lieu du dégradé) + pastille rose */
.flip-card.is-complet .flip-card-back {
  background: hsl(30, 8%, 93%);
}
.flip-card.is-complet .tcc-pastille {
  display: inline-flex;
  align-items: center;
  margin-top: 0.85rem;
  padding: 0.38rem 0.8rem;
  background: hsl(350, 52%, 91%);
  color: hsl(350, 32%, 33%);
  border: 1px solid hsl(350, 38%, 84%);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

/* Petit indice « appuyer pour retourner » */
.flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-foreground);
  opacity: 0.7;
}

.flip-hint svg { width: 13px; height: 13px; }

.flip-card.is-flipped .flip-card-front .flip-hint,
.flip-card:hover .flip-card-front .flip-hint {
  opacity: 0;
}

/* ===== Contact cards ===== */
.contact-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow 0.25s, transform 0.25s;
}

.contact-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.contact-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(140, 18%, 90%);
  color: var(--primary);
}

.contact-icon svg { width: 1.4rem; height: 1.4rem; }

.contact-title {
  color: var(--primary);
  font-weight: 600;
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.contact-info {
  font-size: 0.95rem;
  color: var(--muted-foreground);
  margin: 0;
}

.contact-info a {
  color: inherit;
  text-decoration: none;
}

.contact-info a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== Map ===== */
.map-container {
  margin-top: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.map-container iframe {
  width: 100%;
  height: 340px;
  border: none;
  display: block;
}

/* ===== Content sections ===== */
.content-section {
  max-width: 4rem;
  margin: 0 auto;
}

.content-section h2,
.content-section h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.content-section h4 {
  color: var(--accent-foreground);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.content-section p {
  color: var(--foreground);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.content-section ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.content-section li {
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

/* ===== FAQ ===== */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  background: var(--card);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.faq-item[open] {
  box-shadow: var(--shadow-soft);
  border-color: hsl(28, 25%, 78%);
}

.faq-summary {
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background 0.2s;
}

.faq-summary:hover {
  background: hsl(140, 18%, 95%, 0.6);
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: hsl(140, 18%, 90%);
  color: var(--primary);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.3s ease, background 0.2s;
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--accent-foreground);
}

.faq-content {
  padding: 0 1.35rem 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.65;
}

.faq-content p { margin: 0; }

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  background: hsl(30, 35%, 94%, 0.5);
}

/* ===== Utilities ===== */
.text-center { text-align: center; }
.hidden { display: none; }

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

/* Lien d'évitement visible au focus */
.sr-only:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  margin: 0;
  clip: auto;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-pill);
  z-index: 100;
}

/* === PAGES DE CONTENU === */
.content-container {
  max-width: 50rem;
  margin: 0 auto;
}

.content-container h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.2;
}

.content-container h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--primary);
  margin: 3rem 0 1.5rem;
  line-height: 1.3;
}

.content-container h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: hsl(140, 20%, 35%);
  margin: 2rem 0 1rem;
  font-weight: 500;
}

.content-container p {
  color: var(--foreground);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.content-container ul {
  margin: 1rem 0 2rem;
  padding-left: 0;
  list-style: none;
}

.content-container li {
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
  position: relative;
  line-height: 1.6;
}

.content-container li::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  border-radius: 50%;
}

/* Cards et sections spéciales */
.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem 1.4rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-soft);
}

.info-card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.info-card h3 {
  margin-top: 0.5rem;
}

.highlight-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, hsl(350, 35%, 70%, 0.14), transparent 60%),
    linear-gradient(135deg, hsl(140, 22%, 93%), hsl(30, 35%, 96%));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.75rem 2rem;
  margin: 3rem 0;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.highlight-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary);
}

.highlight-section p {
  margin-bottom: 2rem;
  color: var(--muted-foreground);
  font-size: 1.08rem;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.three-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .two-column { grid-template-columns: 1fr 1fr; }
  .three-column { grid-template-columns: repeat(3, 1fr); }
}

.column-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s, transform 0.25s;
}

.column-card:hover {
  box-shadow: var(--shadow-elegant);
  transform: translateY(-3px);
}

.column-card h3 {
  margin-top: 0;
  color: var(--primary);
}

/* Cartes de tarifs */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0;
}

@media (min-width: 560px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(56rem, calc(100vw - 4rem));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.price-card {
  text-align: center;
  padding: 1.85rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Indisponibilité TCC (carte tarifs) =====
   Piloté par la classe "is-complet" sur <div class="column-card price-card">.
   Pour réactiver : retire simplement "is-complet". */
.price-card .tcc-ribbon { display: none; }
.price-card.is-complet {
  position: relative;
  overflow: hidden;
}
.price-card.is-complet .tcc-ribbon {
  display: block;
  position: absolute;
  z-index: 0;
  top: 26px;
  right: -54px;
  width: 200px;
  padding: 6px 0;
  transform: rotate(45deg);
  text-align: center;
  background: hsl(350, 52%, 91%);
  color: hsl(350, 32%, 38%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px hsl(350, 30%, 40%, 0.18);
}
.price-card.is-complet > *:not(.tcc-ribbon) {
  position: relative;
  z-index: 1;
}

.price-card .price-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: hsl(140, 18%, 90%);
  color: var(--primary);
  margin-bottom: 0.85rem;
}

.price-card .price-icon svg { width: 1.6rem; height: 1.6rem; }

.price-card h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--primary);
  margin: 0 0 0.25rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-card .price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--primary);
  margin: 0.35rem 0 0.35rem;
}

.price-card .price-note {
  font-size: 0.92rem;
  color: var(--muted-foreground);
  margin: 0.4rem 0 0;
}

/* Page en construction */
.construction {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 0;
}

.construction-inner {
  max-width: 34rem;
  margin: 0 auto;
}

.construction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: hsl(140, 18%, 90%);
  color: var(--primary);
  margin-bottom: 1.75rem;
}

.construction-icon svg { width: 2.6rem; height: 2.6rem; }

.construction h1 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--primary);
  margin: 0 0 1rem;
  line-height: 1.15;
}

.construction p {
  color: var(--muted-foreground);
  font-size: 1.1rem;
  margin: 0 auto 2rem;
  max-width: 28rem;
}

.column-card ul {
  margin-bottom: 0;
}

/* Phase cards */
.phase-card {
  background: linear-gradient(135deg, hsl(140, 24%, 95%), hsl(30, 38%, 97%));
  border: 1px solid hsl(140, 20%, 88%);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 1.5rem 0;
}

.phase-card h3 {
  margin-top: 0;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.phase-number {
  flex: none;
  background: var(--accent);
  color: var(--accent-foreground);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.phase-card ul {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .content-container h1 { font-size: 2rem; }
  .content-container h2 { font-size: 1.5rem; }
  .highlight-section { padding: 1.75rem 1.4rem; }
}

/* === TIMELINE (page À propos) === */
.timeline {
  position: relative;
  margin: 2rem 0;
  padding-left: 1.75rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), hsl(28, 20%, 88%));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1.75rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -0.18rem;
  top: 0.35rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid var(--background);
  box-shadow: 0 0 0 1px var(--border);
  z-index: 1;
}

.timeline-item .timeline-date {
  display: inline-block;
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--accent-foreground);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: hsl(28, 35%, 88%);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
}

.timeline-item h3,
.timeline-item h4 {
  margin-top: 0;
}

.timeline-item h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.35rem;
  font-weight: 500;
  line-height: 1.3;
}

.timeline-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  color: var(--muted-foreground);
  font-weight: 600;
  font-family: var(--font-sans);
}

.timeline-item p:not(.timeline-date) {
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
}

/* === HERO COMPACT (pages internes) === */
.hero-compact {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 0;
  background:
    radial-gradient(120% 120% at 85% -20%, hsl(350, 35%, 70%, 0.14), transparent 55%),
    radial-gradient(110% 110% at 0% 120%, hsl(140, 22%, 70%, 0.16), transparent 55%),
    linear-gradient(180deg, hsl(30, 45%, 97%), hsl(30, 38%, 95%));
}

.hero-compact .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.hero-compact .hero-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(560px circle at var(--px, 70%) var(--py, 35%), hsl(350, 35%, 70%, 0.16), transparent 60%);
  z-index: 1;
}

.hero-compact .hero-content {
  position: relative;
  z-index: 2;
  padding: 0.5rem 0;
  text-align: center;
}

.hero-compact .hero-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.hero-compact .hero-subtitle {
  font-size: 1.08rem;
  color: var(--muted-foreground);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-compact { padding: 5rem 0; }
  .hero-compact .hero-title { font-size: 3rem; }
  .hero-compact .hero-subtitle { font-size: 1.2rem; }
}
/* Apparition douce : le contenu est visible par défaut ;
   l'animation d'entrée est jouée par JS (Web Animations API) en simple bonus.
   Aucun état masqué persistant -> le contenu ne peut jamais rester invisible. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}