/* CMTC — Design tokens & shared styles */

:root {
  /* Couleurs issues du logo CMTC 2026 (vert-canard #1F8289) */
  --green: #1F8289;
  --green-dark: #196B70;
  --green-darker: #134E52;
  --green-50: #E9F2F3;
  --green-100: #CEE4E5;
  --green-200: #9AC7CA;
  --ink: #0F2424;
  --ink-2: #1F3A3A;
  --gray-900: #18302F;
  --gray-700: #4A6160;
  --gray-500: #7C9091;
  --gray-300: #C7D3D3;
  --gray-200: #E4ECEC;
  --gray-100: #F1F5F5;
  --gray-50: #F7FAFA;
  --white: #FFFFFF;
  --warn: #E8A33C;
  --urgent: #D8483F;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,36,36,.05), 0 1px 3px rgba(15,36,36,.04);
  --shadow-md: 0 4px 12px rgba(15,36,36,.06), 0 2px 6px rgba(15,36,36,.04);
  --shadow-lg: 0 18px 50px rgba(15,36,36,.10), 0 8px 24px rgba(15,36,36,.06);
}

* { box-sizing: border-box; }

.cmtc {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

.cmtc h1, .cmtc h2, .cmtc h3, .cmtc h4 {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.cmtc .display {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.cmtc .h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.028em; }
.cmtc .h2 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; }
.cmtc .h3 { font-size: 20px; line-height: 1.3; }
.cmtc .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-dark);
  font-weight: 600;
}

.cmtc p { margin: 0; }
.cmtc .lede { font-size: 18px; line-height: 1.55; color: var(--gray-700); }
.cmtc .small { font-size: 13px; color: var(--gray-700); }
.cmtc .tiny { font-size: 11px; letter-spacing: 0.06em; color: var(--gray-500); }

.cmtc a { color: inherit; text-decoration: none; }
.cmtc button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  transition: all .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green) !important;
  color: white !important;
}
.btn-primary:hover { background: var(--green-dark) !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20,160,157,.28); }
.btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--gray-300) !important;
}
.btn-ghost:hover { border-color: var(--ink) !important; }
.btn-light {
  background: white !important;
  color: var(--ink) !important;
}
.btn-light:hover { background: var(--gray-100) !important; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* Pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--green-50);
  color: var(--green-darker);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.01em;
}

/* Containers */
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.container-tight { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* Layout helpers */
.section { padding: 96px 0; }
.section-sm { padding: 56px 0; }
.divider { height: 1px; background: var(--gray-200); }

/* Cards */
.card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  transition: all .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--green-100); }

/* Form controls */
.input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: white;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: all .15s;
}
.input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.label { font-size: 13px; font-weight: 500; color: var(--gray-700); display: block; margin-bottom: 6px; }

/* Hide native scrollbars in artboards */
.artboard-scroll { width: 100%; height: 100%; overflow-y: auto; }
.artboard-scroll::-webkit-scrollbar { width: 0; }

/* Subtle dotted pattern */
.dot-pattern {
  background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Marquee/ticker */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 30s linear infinite; }

/* Subtle entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp .5s ease both; }

/* Transition de page (routing SPA) */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageIn .45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ============================================================
   RESPONSIVE
   Le design est desktop-first et pose ses grilles en styles
   inline. On les neutralise via des sélecteurs d'attribut sur
   l'attribut `style` rendu par React (en kebab-case).
   ============================================================ */

/* Pas de débordement horizontal */
/* `overflow-x: hidden` fait de l'élément un conteneur de défilement et
   neutralise `position: sticky` sur toute la page — l'en-tête ne restait
   donc pas en haut. `clip` bloque le débordement horizontal sans créer ce
   conteneur ; `hidden` reste en repli pour les navigateurs anciens. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }

/* ---- Header : bascule bureau ↔ mobile ---- */
.cmtc-burger { display: none; }
@media (max-width: 980px) {
  .cmtc-desktop-nav, .cmtc-desktop-actions { display: none !important; }
  .cmtc-burger { display: inline-flex !important; }
}

/* ---- Barre supérieure (horaires / adresse / urgences) ---- */
@media (max-width: 860px) {
  .cmtc-topstrip-loc { display: none !important; }
}
@media (max-width: 560px) {
  .cmtc-topstrip { font-size: 11px; gap: 12px !important; }
}

/* ---- Hero de l'accueil : débordement sur petit écran ----
   Une piste de grille `1fr` garde une largeur minimale égale à son
   contenu (`min-width: auto`). La rangée de deux gros boutons, qui ne
   se coupait pas, imposait donc à la colonne une largeur supérieure à
   l'écran : le texte et l'image sortaient du cadre et se faisaient
   rogner par l'`overflow: hidden` de la section.
   min-width: 0 autorise la colonne à se rétrécir ; le retour à la ligne
   des boutons et des chiffres supprime la largeur plancher. */
.cmtc-hero-grid > * { min-width: 0; }

@media (max-width: 768px) {
  .cmtc-hero-grid { gap: 40px !important; }
  .cmtc-hero-actions { flex-wrap: wrap; }
  .cmtc-hero-actions .btn { flex: 1 1 200px; justify-content: center; }
  .cmtc-hero-stats { flex-wrap: wrap; gap: 18px 28px !important; }
  /* Les cartes flottantes débordaient volontairement du visuel :
     sur mobile elles doivent rester dans l'écran. */
  .cmtc-hero-grid .cmtc-hero-flottante-g { left: 8px !important; right: auto !important; }
  .cmtc-hero-grid .cmtc-hero-flottante-d { right: 8px !important; left: auto !important; }
}
@media (max-width: 460px) {
  .cmtc-hero-grid .display { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.12 !important; }
}

/* ---- Tablette : grilles 3–5 colonnes → 2 ou 4 ---- */
@media (max-width: 1024px) {
  [style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(5"] { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---- Mobile : (presque) tout en une colonne ---- */
@media (max-width: 768px) {
  .container, .container-tight { padding-left: 20px !important; padding-right: 20px !important; }

  /* Toute grille inline repasse à une colonne… */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …sauf les créneaux horaires du RDV (repeat(5)) → 3 colonnes */
  [style*="repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* Réduire les grands écarts hérités du bureau */
  [style*="gap: 72"], [style*="gap: 64"], [style*="gap: 56"], [style*="gap: 48"] { gap: 28px !important; }

  /* Cartes disposées en ligne (actualité "à la une") : empiler */
  [style*="flex-direction: row"] { flex-direction: column !important; }
  [style*="grid-column: span 2"] { grid-column: auto !important; }
  [style*="width: 50%"] { width: 100% !important; }

  /* Sections plus compactes */
  .section { padding: 56px 0 !important; }
  .section-sm { padding: 40px 0 !important; }

  /* Bandeaux flex "espace-between" : autoriser le retour à la ligne */
  [style*="justify-content: space-between"] { flex-wrap: wrap; }

  /* Boutons pleine largeur plus confortables au doigt */
  .btn-lg { width: 100%; }

  /* Stepper de prise de RDV : défilement horizontal si nécessaire */
  .cmtc-stepper-wrap {
    justify-content: flex-start !important;
    overflow-x: auto; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Petits mobiles ---- */
@media (max-width: 460px) {
  .container, .container-tight { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 72px"], [style*="padding: 72px 64px"] { padding: 40px 24px !important; }
}

/* ============================================================
   Cartes de spécialité : photo de fond sous un voile blanc
   (utilisées sur l'accueil et la page Spécialités)
   ============================================================ */
.cmtc-spec-card { position: relative; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.cmtc-spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green-100); }
.cmtc-spec-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: scale(1.02); transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.cmtc-spec-card:hover .cmtc-spec-bg { transform: scale(1.08); }
.cmtc-spec-voile {
  position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,.69);
  transition: background .35s ease;
}
.cmtc-spec-card:hover .cmtc-spec-voile { background: rgba(255,255,255,.82); }