/* ============================================================
   style.css — Styles globaux du projet
   ------------------------------------------------------------
   Ce fichier ne contient PAS de tokens (couleurs, tailles,
   polices, arrondis). Tous les tokens dynamiques sont générés
   par includes/tokens.php depuis config/site.php.

   Variables disponibles depuis tokens.php :
     --brand-primary-*   --brand-secondary-*
     --surface-*         --text-*         --border-*
     --density-*         --round-*
     --font-body         --font-heading
     --navbar-height
   ============================================================ */

/* ------------------------------------------------------------
   0. VARIABLES STATIQUES (non dépendantes du thème/densité)
      Typographie, ombres, transitions, espacements généraux
   ------------------------------------------------------------ */
:root {
  /* Tailles de texte — fluides via clamp() */
  --font-size-h1:   clamp(2rem, 4vw, 2.75rem); /* 32px → 44px */
  --font-size-h2:   clamp(1.5rem, 3.5vw, 2rem);
  --font-size-h3:   clamp(1.25rem, 2.5vw, 1.5rem);
  --font-size-h4:   clamp(1.125rem, 2vw, 1.25rem);
  --font-size-xl:   24px;
  --font-size-base: 18px;
  --font-size-sm:   16px;
  --font-size-xs:   12px;

  /* Graisses */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* Interlignage & espacement */
  --line-height-base:    1.5;
  --letter-spacing-idle: 0.01em;

  /* Espacements généraux (non liés à la densité) */
  --spacing-xs:  6px;
  --spacing-sm:  10px;
  --spacing-md:  12px;
  --spacing-lg:  24px;
  --spacing-xl:  48px;
  --spacing-2xl: 80px;

  /* Bordures (épaisseurs fixes) */
  --border-width-main: 1.5px;
  --border-width-btn:  2px;

  /* Ombres */
  --shadow-card:          0 2px 4px rgba(52,93,158,0.12), 0 2px 22px rgba(52,93,158,0.10);
  --shadow-navbar-scroll: 0 2px 16px rgba(0,48,115,0.10);
  --shadow-dropdown:      0 2px 22px rgba(52,93,158,0.16), 0 2px 4px rgba(52,93,158,0.12);

  /* Transitions */
  --transition-fast: 0.18s ease;

  /* Marge responsive (pas liée à la densité, gérée via breakpoints) */
  --page-margin: 24px;

  /* Couleurs d'état — Warning (urgent) */
  --warning-lightest: #fff8f0;
  --warning-border:   #e8c49a;
  --warning-title:    #c0692a;

  /* Couleurs d'état — Danger (grave) */
  --danger-lightest: #fff5f5;
  --danger-border:   #f0b8b8;
  --danger-title:    #c0392b;
}

/* Réduction de font-size-xl en tablette/mobile */
@media (max-width: 999px) {
  :root { --font-size-xl: 20px; }
}

/* ------------------------------------------------------------
   1. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-width: 320px;
  /* Réserve l'espace de la scrollbar en permanence — empêche le décalage */
  scrollbar-gutter: stable;

  /* Scrollbar custom — Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary-light) transparent;
}

/* Scrollbar custom — Chromium / Safari */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-primary-light);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary-medium);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--text-default);
  background: var(--surface-primary);
  margin: 0;
  padding: 0;
  padding-top: var(--navbar-height); /* offset for fixed navbar */
}

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

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

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); font-weight: 500; }
h3 { font-size: var(--font-size-h3); font-weight: 500; }
h4 { font-size: var(--font-size-h4); }

.signifier i {
  color: #ffffff;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------
   2. NAVBAR
   ------------------------------------------------------------ */
.site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: var(--surface-primary);
  z-index: 1000;
  transition: box-shadow var(--transition-fast);
  display: flex;
  align-items: center;
}

.site-navbar.scrolled {
  box-shadow: var(--shadow-navbar-scroll);
}

.site-navbar .navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
}

/* Logo */
.navbar-logo img {
  height: 80px;
  width: auto;
}

/* Desktop nav links */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-links .nav-link-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--density-nav-item-tb) var(--density-nav-item-lr);
  border-radius: var(--round-navbar-item);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--text-nav-idle);
  letter-spacing: var(--letter-spacing-idle);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}

.navbar-links .nav-link-item:hover {
  color: var(--brand-primary-medium);
}

.navbar-links .nav-link-item.active {
  font-weight: 700;
  color: var(--brand-primary-medium);
  letter-spacing: 0;
}

/* Active dot indicator */
.navbar-links .nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-primary-medium);
}

/* CTA Button in navbar */
a.btn-cta,
button.btn-cta,
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-primary-dark);
  color: #ffffff !important;
  border: var(--border-width-btn) solid var(--brand-primary-dark);
  border-radius: var(--round-button);
  padding: 0 var(--density-btn-lr);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  height: var(--density-btn-height-cta);
  min-width: 44px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

a.btn-cta i,
button.btn-cta i,
.btn-cta i {
  color: #ffffff !important;
}

a.btn-cta:hover,
button.btn-cta:hover,
.btn-cta:hover {
  background: var(--brand-primary-medium);
  border-color: var(--brand-primary-medium);
  color: #ffffff !important;
}

/* Secondary / outline button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--brand-primary-dark);
  border: var(--border-width-btn) solid var(--brand-primary-dark);
  border-radius: var(--round-button);
  padding: 0 var(--density-btn-lr);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  height: var(--density-btn-height-cta);
  min-width: 44px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--brand-primary-dark);
  color: #ffffff;
}

/* Hamburger button */
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--brand-primary-dark);
  font-size: 24px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Mobile dropdown */
.navbar-mobile-dropdown {
  display: none;
  position: absolute;
  top: calc(var(--navbar-height) - 12px);
  left: 25px;
  right: 25px;
  width: auto;
  background: var(--surface-primary);
  border: var(--border-width) solid var(--brand-primary-lighter);
  border-radius: var(--round-navbar-list);
  box-shadow: var(--shadow-dropdown);
  padding: var(--density-frame-inner);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.navbar-mobile-dropdown.open {
  display: flex;
}

.navbar-mobile-dropdown .nav-link-item {
  width: 100%;
  text-align: center;
  padding: 10px var(--density-nav-item-lr);
  border-radius: var(--round-navbar-item);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--text-nav-idle);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color var(--transition-fast);
}

.navbar-mobile-dropdown .nav-link-item:hover {
  color: var(--brand-primary-medium);
}

.navbar-mobile-dropdown .nav-link-item.active {
  font-weight: 700;
  color: var(--brand-primary-medium);
}

.navbar-mobile-dropdown .nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-primary-medium);
}

.navbar-mobile-dropdown .btn-cta {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ------------------------------------------------------------
   3. HERO SECTION
   ------------------------------------------------------------ */
.section-hero {
  background: url('../img/hero-bg.jpg') center center / cover no-repeat;
  padding: var(--density-hero-tb) 0;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.hero-text {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}

/* Quand .hero-visual n'a pas d'image, il se rétracte */
.hero-visual {
  flex: 1 1 45%;
  min-width: 0;
}

.hero-visual:not(:has(img)):not(:has(video)) {
  flex: 0 0 0;
  overflow: hidden;
}

.hero-title {
  font-size: var(--font-size-h1);
  font-weight: 500;
  color: var(--brand-primary-dark);
  line-height: 1;
  margin: 0 0 20px;
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--text-default);
  margin: 0 0 32px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-visual {
  flex: 1 1 45%;
  min-width: 0;
}

.hero-logo-large {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   4. PHOTO GALLERY STRIP
   ------------------------------------------------------------ */
.section-gallery {
  padding: 40px 0;
  overflow: hidden;
}

.gallery-container {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Override Bootstrap gutter to 24px */
.g-gallery {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 24px;
}

.gallery-item {
  height: 261px;
  width: 100%;
  display: block;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--round-photo);
  overflow: hidden;
  transition: transform 0.4s ease;
}

.gallery-item img:hover {
  transform: scale(1.04);
}

/* ------------------------------------------------------------
   5. PHILOSOPHY SECTION
   ------------------------------------------------------------ */
.section-philosophy {
  background: var(--surface-primary);
  padding: var(--density-section-tb) 0;
}

.philosophy-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.section-philosophy .section-title {
  text-align: center;
  margin-bottom: 48px;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.philosophy-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.philosophy-card-img {
  width: 100%;
  border-radius: var(--round-photo);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.philosophy-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.philosophy-card-body h3 {
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--text-default);
  margin: 0 0 12px;
}

.philosophy-card-body p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 14px;
}

.philosophy-card-body p:last-child {
  margin-bottom: 0;
}

/* Tablette : 2 colonnes, 3e card pleine largeur */
@media (max-width: 1000px) and (min-width: 641px) {
  .philosophy-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .philosophy-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  .philosophy-card--wide .philosophy-card-img {
    flex: 0 0 55%;
  }

  .philosophy-card--wide .philosophy-card-body {
    flex: 1;
    padding-top: 8px;
  }
}

/* Mobile : colonne unique */
@media (max-width: 640px) {
  .philosophy-inner {
    padding: 0 var(--page-margin);
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .philosophy-card--wide {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------
   6. MISSION SECTION
   ------------------------------------------------------------ */
.section-mission {
  background:
    url('../img/vine-bg.jpg') center center / cover no-repeat;
  background-color: var(--brand-secondary-lightest);
  padding: var(--density-section-tb) 0;
}

.mission-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

.mission-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 40px;
}

/* Signifier inline dans le titre — adapté pour H2 */
.signifier--inline {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--round-signifier);
  background: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.mission-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.mission-col p {
  font-size: var(--font-size-sm);
  color: var(--text-default);
  line-height: 1.75;
  margin: 0 0 20px;
}

.mission-col p:last-of-type {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mission-inner {
    padding: 0 var(--page-margin);
  }
}

/* ------------------------------------------------------------
   6. SERVICES SECTION (dark background)
   ------------------------------------------------------------ */
.section-services {
  background: var(--surface-primary);
  padding: var(--density-section-tb) 0;
  color: var(--text-default);
}

.section-services .section-title {
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--text-default);
  margin: 0 0 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

.service-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.service-card-photo {
  flex-shrink: 0;
  width: 166px;
  height: 166px;
  overflow: hidden;
  background: transparent;
}

.service-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card-body h3 {
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--text-default);
  margin: 0 0 12px;
  line-height: 1.3;
}

.service-card-body p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 10px;
}

.service-card-body p:last-of-type {
  margin-bottom: 16px;
}

/* ------------------------------------------------------------
   6. URGENCES SECTION
   ------------------------------------------------------------ */
.section-urgences {
  padding: 40px 0;
  background: var(--surface-primary);
}

.urgences-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Urgent box */
.urgence-box {
  border-radius: var(--round-frame);
  padding: 28px 32px;
}

.urgence-box-urgent {
  background: var(--warning-bg);
  border: 1.5px solid var(--warning-border);
}

.urgence-box-grave {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger-border);
}

.urgence-box-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 14px;
}

.urgence-box-title h2,
.urgence-box-title h3 {
  margin: 0;
  line-height: 1.3;
}

.urgence-box-urgent .urgence-box-title {
  color: var(--warning-text);
}

.urgence-box-grave .urgence-box-title {
  color: var(--danger-text);
}

.urgence-box-urgent .signifier {
  background: var(--warning-text);
  color: #fff;
}

.urgence-box-grave .signifier {
  background: var(--danger-text);
  color: #fff;
}

.urgence-box p {
  font-size: var(--font-size-sm);
  color: #444;
  line-height: 1.7;
  margin: 0 0 18px;
}

.urgence-box p:last-child {
  margin-bottom: 0;
}

.btn-emergency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1;
  color: var(--warning-text);
  text-decoration: none;
  background: transparent;
  border: var(--border-width-btn) solid var(--warning-border);
  border-radius: var(--round-button);
  padding: 0 var(--density-btn-lr);
  height: var(--density-btn-height-cta);
  min-width: 44px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-emergency:hover {
  background: var(--warning-text);
  color: #ffffff;
  border-color: var(--warning-text);
}

/* ------------------------------------------------------------
   7. CONTACT SECTION
   ------------------------------------------------------------ */
.section-contact {
  padding: var(--density-section-tb) 0;
  background: var(--surface-primary);
}

.contact-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}

.contact-inner .section-title {
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 8px;
}

.contact-inner .section-subtitle {
  text-align: center;
  font-size: var(--font-size-xl);
  color: #555;
  margin: 0 0 36px;
}

.contact-map {
  width: 100%;
  height: 340px;
  border-radius: var(--round-frame);
  overflow: hidden;
  border: none;
  margin-bottom: 24px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-info-block {
  background: var(--brand-primary-lightest);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--round-frame);
  padding: var(--density-frame-inner);
}

.contact-info-block h3 {
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.contact-info-block h3 > span.signifier ~ * {
  margin: 0;
}

.contact-info-block address {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: #222;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
}

.contact-info-block p {
  font-size: var(--font-size-sm);
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.contact-info-block ul {
  list-style: none;
  padding: 0;
  font-size: var(--font-size-sm);
  color: #222;
  line-height: 1.8;
}

.contact-info-list {
  list-style: disc;
  padding-left: 18px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}

.contact-info-list li {
  line-height: 1.7;
  margin-bottom: 4px;
}

.contact-info-list li:last-child {
  margin-bottom: 0;
}

.contact-info-block address {
  line-height: 1.7;
  font-style: normal;
  margin-bottom: 12px;
}

.contact-info-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 12px 0 0;
}

/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--surface-footer-alt);
  color: var(--text-footer);
  padding: 48px 0 24px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.footer-brand .footer-logo img {
  height: 80px;
  width: auto;
  margin-bottom: 16px;
}

.footer-brand address {
  font-style: normal;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-footer);
  line-height: 1.7;
  margin: 0;
}

.footer-nav h5 {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 16px;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav ul li a {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-footer);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav ul li a:hover {
  color: var(--text-on-brand);
}

.footer-nav ul li a.footer-cta-link {
  color: var(--text-footer-link);
  font-weight: 600;
}

.footer-nav ul li a.footer-cta-link:hover {
  color: #fff;
}

.footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 20px 32px 0;
  border-top: 1px solid rgba(0,48,115,0.15);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-footer);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--text-footer-link);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
}

/* ------------------------------------------------------------
   9. UTILITY / SHARED
   ------------------------------------------------------------ */
.section-title-block {
  text-align: center;
  margin-bottom: 40px;
}

/* ============================================================
   SYSTÈME ALT — variante secondaire
   ------------------------------------------------------------
   Ajouter la classe .alt sur n'importe quel composant ou
   conteneur pour substituer la couleur brand primaire par
   la couleur brand secondaire. Les composants enfants
   s'adaptent automatiquement sans règles supplémentaires.
   ============================================================ */
.alt {
  --brand-primary-subtle:   var(--brand-secondary-subtle);
  --brand-primary-lightest: var(--brand-secondary-lightest);
  --brand-primary-lighter:  var(--brand-secondary-lighter);
  --brand-primary-light:    var(--brand-secondary-light);
  --brand-primary-medium:   var(--brand-secondary-medium);
  --brand-primary-dark:     var(--brand-secondary-dark);
  --brand-primary-darker:   var(--brand-secondary-darker);
  --brand-primary-darkest:  var(--brand-secondary-darkest);
  --card-border:            var(--card-border-alt);
}

/* Honeypot anti-spam */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Signifier — carré d'icône indépendant */
.signifier {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--round-signifier);
  background: var(--brand-primary-dark);
  color: #ffffff;
  font-size: 20px;
  padding: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand-primary-dark);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ------------------------------------------------------------
   10. SERVICES PAGE
   ------------------------------------------------------------ */

/* Page header (dark banner) */
.page-header {
  background: var(--brand-primary-dark);
  padding: 48px 32px;
  text-align: center;
}

.page-header-title {
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 10px;
}

.page-header-subtitle {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.80);
  margin: 0;
}

/* Services list */
.section-services-list {
  padding: 48px 0;
  background: var(--surface-primary);
}

.services-list-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Service detail card */
.service-detail-card {
  background: var(--brand-primary-lightest);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--round-frame);
  overflow: hidden;
}

.service-detail-img {
  width: 100%;
  height: 240px;
  padding: 24px 32px 0;
  box-sizing: border-box;
}

.service-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--round-frame);
  transition: transform 0.4s ease;
}

.service-detail-img img:hover {
  transform: scale(1.03);
}

.service-detail-body {
  padding: 24px 32px 28px;
  text-align: center;
}

.service-detail-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 14px;
  line-height: 1.35;
}

.service-detail-text {
  font-size: var(--font-size-sm);
  color: #444;
  line-height: 1.65;
  margin: 0 0 10px;
}

.service-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  color: #444;
  line-height: 1.9;
}

/* Full-width photo */
.section-fullwidth-photo {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
}

.section-fullwidth-photo img {
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* RDV banner */
.section-rdv-banner {
  padding: 32px 0;
  background: var(--surface-primary);
}

.rdv-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--brand-primary-lightest);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--round-frame);
}

@media (max-width: 999px) {
  .rdv-banner-inner {
    margin: 0 var(--page-margin);
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .rdv-banner-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.rdv-banner-title {
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-primary-dark);
  margin: 0 0 4px;
}

.rdv-banner-subtitle {
  font-size: var(--font-size-sm);
  color: #555;
  margin: 0;
}

/* RDV CTA — version légère sans card */
.section-rdv-cta {
  padding: var(--density-section-tb) 0;
  background: var(--brand-primary-lightest);
}

.rdv-cta-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rdv-cta-title {
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 6px;
}

.rdv-cta-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 999px) {
  .rdv-cta-inner {
    padding: 0 var(--page-margin);
  }
}

@media (max-width: 640px) {
  .rdv-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------
   11. CONTACT PAGE
   ------------------------------------------------------------ */
.section-contact-urgences {
  padding: 56px 0;
  background: var(--surface-primary);
}

.contact-urgences-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-urgences-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0;
  text-align: center;
}

.contact-urgences-intro {
  font-size: var(--font-size-base);
  color: var(--text-default);
  line-height: 1.75;
  margin: 0;
  text-align: justify;
}

/* Form card */
.contact-form-card {
  background: var(--brand-primary-lightest);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--round-frame);
  padding: 28px 32px;
}

.contact-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.contact-form-card-title {
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-primary-dark);
  margin: 0;
}

/* Form groups */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.required-star {
  color: var(--warning-text);
}

/* Inputs */
.form-control-orl {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  background: var(--surface-primary);
  border: 1.5px solid var(--brand-primary-lighter);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.form-control-orl::placeholder {
  color: #aaa;
}

.form-control-orl:focus {
  border-color: var(--brand-primary-medium);
  box-shadow: 0 0 0 3px rgba(39,125,189,0.12);
}

/* Select wrapper */
.form-select-wrap {
  position: relative;
}

.form-select-orl {
  cursor: pointer;
  padding-right: 36px;
}

.form-select-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-primary-medium);
  font-size: 13px;
  pointer-events: none;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Checkbox */
.form-checkbox-group {
  margin-top: 4px;
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--brand-primary-dark);
  border-radius: 4px;
}

.form-checkbox-text {
  font-size: var(--font-size-sm);
  color: #555;
  line-height: 1.6;
}

/* Submit */
.form-captcha-group {
  display: flex;
  justify-content: center;
}

.form-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Feedback */
.form-feedback {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: 20px;
}

.form-feedback--success {
  background: #f0faf4;
  border: 1.5px solid #6fcf97;
  color: #1a6b3a;
}

.form-feedback--error {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger-border);
  color: var(--danger-text);
}

/* ------------------------------------------------------------ */

.section-contact-doctors .doctor-bio {
  display: none;
}

/* ------------------------------------------------------------ */

/* ------------------------------------------------------------
   13. CLINIC PAGE
   ------------------------------------------------------------ */
.section-clinic-intro {
  padding: 48px 0;
  background: var(--surface-primary);
}

.clinic-intro-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}

.clinic-photo-wrap {
  width: 100%;
  height: 420px;
  border-radius: var(--round-frame);
  overflow: hidden;
  margin-bottom: 40px;
}

.clinic-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinic-text p {
  font-size: var(--font-size-base);
  color: var(--text-default);
  line-height: 1.75;
  margin: 0 0 18px;
}

.clinic-text p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   14. TEAM PAGE
   ------------------------------------------------------------ */

/* Page header secondaire — vine-bg.jpg */
.section-page-header {
  background: var(--brand-secondary-lightest) url('../img/vine-bg.jpg') center center / cover no-repeat;
  padding: 64px 0;
  text-align: center;
}

.page-header-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 32px;
}

.section-page-header .page-header-title {
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 12px;
}

.section-page-header .page-header-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Staff grid */
.section-staff {
  padding: var(--density-section-tb) 0;
  background: var(--surface-primary);
}

.staff-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Doctor card — structure */
.doctor-card {
  background: var(--brand-primary-lightest);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--round-frame);
  display: flex;
  flex-direction: column;
}

.doctor-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 20px;
  text-align: center;
}

.doctor-photo-wrap {
  margin-bottom: 16px;
}

.doctor-photo {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--card-border);
}

/* Poste vacant — icône ronde */
.doctor-photo-wrap--icon {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  background: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.doctor-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.doctor-name {
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--brand-primary-dark);
  margin: 0 0 6px;
  line-height: 1.3;
}

.doctor-name--vacant {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.doctor-specialty {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.5;
}

/* Doctor card body */
.doctor-card-body {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor-card-body > p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.doctor-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-default);
  margin: 0;
  line-height: 1.4;
}

.doctor-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doctor-list li {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.doctor-list a.doctor-link {
  color: var(--brand-primary-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doctor-list a.doctor-link:hover {
  color: var(--brand-primary-dark);
}

.link-more {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--brand-primary-medium);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font-body);
}

.link-more:hover {
  color: var(--brand-primary-dark);
}

/* Doctor card footer */
.doctor-card-footer {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doctor-btn {
  width: 100%;
  justify-content: center;
}

/* Team gallery — 5 images, grid 3+2 */
.section-team-gallery {
  margin-top: var(--density-section-tb);
  margin-bottom: 80px;
}

.team-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 32px;
}

.team-gallery-item {
  overflow: hidden;
  border-radius: var(--round-photo);
}

.team-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.team-gallery-item:hover img {
  transform: scale(1.03);
}

/* Row 1: 3 items × 2 cols each */
.tg-1, .tg-2, .tg-3 {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

/* Row 2: 2 items × 3 cols each */
.tg-4, .tg-5 {
  grid-column: span 3;
  aspect-ratio: 16 / 9;
}

/* Modal staff */
.staff-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  z-index: 2000;
}

.staff-modal {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 50px 24px;
  overflow-y: auto;
  pointer-events: none;
}

.staff-modal:not([hidden]) {
  pointer-events: auto;
}

.staff-modal-inner {
  background: var(--surface-primary);
  border-radius: var(--round-frame);
  border: var(--border-width) solid var(--card-border);
  padding: 40px;
  max-width: 900px;
  width: 100%;
  position: relative;
}

.staff-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  border-radius: var(--round-button);
  transition: color var(--transition-fast);
}

.staff-modal-close:hover {
  color: var(--text-default);
}

.staff-modal-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.staff-modal-photo {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card-border);
  display: block;
}

.staff-modal-inner > h3 {
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--brand-primary-dark);
  text-align: center;
  margin: 0 0 32px;
  padding-right: 32px;
}

.staff-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.staff-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Blur du contenu derrière le modal */
body.modal-open .site-navbar,
body.modal-open main,
body.modal-open .site-footer {
  filter: blur(3px);
  transition: filter 0.2s ease;
}

/* ------------------------------------------------------------
   15. RESPONSIVE — TABLET (< 1000px)
   ------------------------------------------------------------ */
@media (max-width: 999px) {
  :root {
    --font-size-xl: 20px;
  }

  /* Navbar */
  .navbar-links {
    display: none;
  }
  .navbar-hamburger {
    display: inline-flex;
  }

  /* Hero */
  .hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
    padding: 0 var(--page-margin);
  }
  .hero-text {
    order: 1;
    flex: 1 1 100%;
    max-width: 100%;
  }
  .hero-visual {
    order: 0;
    width: 100%;
  }
  .hero-buttons {
    justify-content: center;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 var(--page-margin);
  }

  /* Contact info */
  .contact-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Clinic */
  .clinic-intro-inner {
    padding: 0 var(--page-margin);
  }
  .clinic-photo-wrap {
    height: 320px;
  }

  /* Contact page */
  .contact-urgences-inner {
    max-width: 100%;
  }

  /* Team */
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .staff-inner {
    padding: 0 var(--page-margin);
  }
  .doctor-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Team gallery tablette : 2+1+2 */
  .tg-1, .tg-2 { grid-column: span 3; }
  .tg-3         { grid-column: span 6; aspect-ratio: 16 / 7; }
  .tg-4, .tg-5  { grid-column: span 3; aspect-ratio: 4 / 3; }

  /* Modal */
  .staff-modal {
    padding: 50px 16px;
  }
  .staff-modal-inner {
    padding: 32px 24px;
  }

  /* Services page */
  .services-list-inner {
    max-width: 100%;
    padding: 0 var(--page-margin);
  }
  .service-detail-img {
    height: 200px;
    padding: 20px var(--page-margin) 0;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ------------------------------------------------------------
   14. RESPONSIVE — MOBILE (< 600px)
   ------------------------------------------------------------ */
@media (max-width: 599px) {
  :root {
    --density-section-tb: 40px;
    --page-margin:   16px;
  }

  body {
    padding-top: var(--navbar-height);
  }

  .site-navbar .navbar-inner {
    padding: 0 var(--page-margin);
  }

  /* Hero */
  .hero-inner {
    padding: 0 var(--page-margin);
  }
  .section-hero {
    padding: 40px 0;
  }
  .hero-visual {
    width: 100%;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-buttons .btn-cta,
  .hero-buttons .btn-emergency {
    width: 260px;
    justify-content: center;
  }

  /* Services */
  .services-grid {
    padding: 0 var(--page-margin);
  }

  /* Contact page */
  .contact-urgences-inner {
    padding: 0 var(--page-margin);
  }
  .contact-form-card {
    padding: 22px 20px;
  }
  .form-row-two {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Clinic */
  .clinic-intro-inner {
    padding: 0 var(--page-margin);
  }
  .clinic-photo-wrap {
    height: 220px;
    margin-bottom: 28px;
  }

  /* Team */
  .staff-grid {
    grid-template-columns: 1fr;
  }
  .doctor-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .team-gallery-grid {
    gap: 8px;
    padding: 0;
  }
  .tg-1, .tg-2, .tg-3, .tg-4, .tg-5 {
    grid-column: span 6;
    aspect-ratio: 4 / 3;
  }

  .service-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .service-card-body ul {
    text-align: left;
  }

  /* Services page */
  .page-header {
    padding: 36px var(--page-margin);
  }
  .services-list-inner {
    padding: 0 var(--page-margin);
    gap: 24px;
  }
  .service-detail-img {
    height: 180px;
    padding: 16px var(--page-margin) 0;
  }
  .service-detail-body {
    padding: 20px var(--page-margin) 24px;
  }

  /* Urgences */
  .urgences-inner {
    padding: 0 var(--page-margin);
  }

  .urgence-box {
    padding: 20px var(--page-margin);
  }

  /* Contact */
  .contact-inner {
    padding: 0 var(--page-margin);
  }
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  .contact-map {
    height: 240px;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 var(--page-margin);
  }
  .footer-bottom {
    padding: 20px var(--page-margin) 0;
  }

  /* Navbar mobile dropdown */
  /* width already 100% from base rule */
}