/* ==========================================================================
   EZDent — Site public d'un cabinet (/cabinet/<slug>)
   ==========================================================================

   Cette feuille ne se suffit pas à elle-même : elle vient APRÈS
   `css/landing.css`, dont elle réutilise les jetons, la grille, les boutons,
   les cartes et les animations d'apparition. Dupliquer ces 1 000 lignes par
   thème serait la garantie de les voir diverger.

   Ce qu'on trouve ici, et rien d'autre :

     1. ce que la page d'un cabinet ajoute (logo, créneaux réels, carte) ;
     2. les corrections nécessaires au thème SOMBRE, parce que `landing.css`
        écrit quelques blancs en dur — un fond clair y était acquis.

   Les COULEURS des thèmes ne sont pas ici : elles sont calculées côté serveur
   par `clinic_site_palette()` et injectées dans un `<style>` de la page, ce qui
   permet la couleur personnalisée. Une classe par thème n'aurait pas pu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Marque du cabinet
   -------------------------------------------------------------------------- */

.ez-clinic-logo {
  height: 2.6rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  border-radius: 8px;
}

.ez-footer .ez-clinic-logo {
  height: 3rem;
  margin-bottom: 1rem;
  /* Un logo sombre sur le pied de page sombre disparaîtrait : la pastille
     claire garantit qu'il reste lisible, quel que soit le fichier fourni. */
  background: rgba(255, 255, 255, 0.92);
  padding: 0.35rem 0.6rem;
}

/* --------------------------------------------------------------------------
   2. Bloc « Disponibilités » — créneaux RÉELS
   -------------------------------------------------------------------------- */

.ez-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
}

.ez-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--ez-radius-pill);
  border: 1px solid var(--ez-primary-100);
  background: var(--ez-primary-50);
  color: var(--ez-primary-800);
  font-weight: 700;
  font-size: var(--ez-step--1);
  transition: transform 0.25s var(--ez-ease), background-color 0.25s var(--ez-ease),
              color 0.25s var(--ez-ease), border-color 0.25s var(--ez-ease);
}

.ez-slot:hover,
.ez-slot:focus-visible {
  transform: translateY(-2px);
  background: var(--ez-primary-600);
  border-color: var(--ez-primary-600);
  color: #fff;
}

.ez-slot__day {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--ez-radius-pill);
  background: var(--ez-accent-100);
  color: var(--ez-accent-600);
  font-weight: 800;
  font-size: var(--ez-step--1);
}

/* Aucun créneau sous trois semaines : on le dit, on n'invente pas d'heures. */
.ez-slots--empty {
  color: var(--ez-ink-500);
  font-size: var(--ez-step--1);
}

/* --------------------------------------------------------------------------
   3. Soins — la DURÉE n'est plus affichée au patient
   -------------------------------------------------------------------------- */

/* La carte d'un soin n'a plus de pied de carte : ni tarif, ni durée. Le titre
   et la description portent seuls l'information, et la carte doit rester de
   hauteur homogène dans la grille. */
.ez-service--plain p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Chiffres clés — de un à quatre
   --------------------------------------------------------------------------

   `.ez-stats` de la vitrine est figé à quatre colonnes, parce que la vitrine en
   affiche toujours exactement quatre. Un cabinet en saisit un à quatre : sans
   cette variante, trois chiffres laissent une case vide au bout de la rangée.
   -------------------------------------------------------------------------- */

.ez-stats--fluid {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* --------------------------------------------------------------------------
   5. Contact et accès
   -------------------------------------------------------------------------- */

.ez-map {
  margin-top: 1.5rem;
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  overflow: hidden;
  box-shadow: var(--ez-shadow-sm);
  line-height: 0;
}

.ez-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Bandeau « n'accepte pas de nouveaux patients »
   -------------------------------------------------------------------------- */

.ez-notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: var(--ez-radius-sm);
  border: 1px solid var(--ez-border);
  background: var(--ez-surface-alt);
  color: var(--ez-ink-700);
  font-size: var(--ez-step--1);
}

.ez-notice i { color: var(--ez-accent-600); margin-top: 0.15rem; }
.ez-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Lisibilité des textes secondaires
   --------------------------------------------------------------------------

   Trois teintes héritées de `landing.css` passent sous le seuil de contraste
   AA (4,5:1) sur fond clair : les liens du pied de page (#8fb4c0 sur le bleu
   le plus sombre, 2,6:1), l'invitation à défiler et la précision sous un avis
   (`--ez-ink-300`, 2,7:1).

   Elles sont relevées ICI, et pas dans `landing.css`, pour ne pas modifier au
   passage l'apparence de la vitrine produit, qui n'est pas l'objet de ce
   travail. La vitrine porte le même défaut : à traiter séparément.
   -------------------------------------------------------------------------- */

.ez-landing .ez-footer a { color: rgba(255, 255, 255, 0.86); }
.ez-landing .ez-footer a:hover { color: #fff; }

.ez-landing .ez-scrollcue,
.ez-landing .ez-quote__meta { color: var(--ez-ink-500); }

.ez-footer__note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   8. Thème sombre
   --------------------------------------------------------------------------

   Les variables de surface et d'encre sont déjà basculées côté serveur. Ne
   restent ici que les endroits où `landing.css` fait une HYPOTHÈSE de fond
   clair — un blanc écrit en dur, ou un « --ez-primary-800 forcément sombre »
   utilisé comme fond sous du texte blanc. Sur fond sombre, ces nuances sont
   inversées : sans ces règles, le thème « Nuit » affiche du texte blanc sur
   un panneau cyan pâle.
   -------------------------------------------------------------------------- */

[data-ez-theme="nuit"] .ez-nav {
  /* Nettement plus opaque que le 0.82 clair : la barre flotte au-dessus des
     dégradés du bandeau, et la translucidité y laissait voir une couture. */
  background: rgba(15, 28, 34, 0.94);
}

/* Seulement quand le menu est déroulant : en rangée, il fait partie de la
   barre et n'a pas de fond propre. */
@media (max-width: 1100px) {
  [data-ez-theme="nuit"] .ez-nav__menu {
    background: var(--ez-surface);
  }
}

[data-ez-theme="nuit"] .ez-stat {
  background: var(--ez-surface-alt);
}

/* Panneau du bandeau et bandeau de rappel : leur dégradé part de
   `--ez-primary-800`, qui est une nuance CLAIRE en thème sombre. Ils sont donc
   reconstruits sur les surfaces, avec une bordure pour rester détachés du
   fond. */
[data-ez-theme="nuit"] .ez-hero__panel {
  background: linear-gradient(155deg, var(--ez-surface-alt), var(--ez-surface-deep));
  border: 1px solid var(--ez-border);
  color: var(--ez-ink-700);
}
[data-ez-theme="nuit"] .ez-hero__panel h2 { color: var(--ez-ink-900); }

[data-ez-theme="nuit"] .ez-cta {
  background: linear-gradient(140deg, var(--ez-surface-alt), var(--ez-primary-50));
  border: 1px solid var(--ez-border);
  color: var(--ez-ink-700);
}
[data-ez-theme="nuit"] .ez-cta h2 { color: var(--ez-ink-900); }
[data-ez-theme="nuit"] .ez-cta p { color: var(--ez-ink-500); }

/* Fond clair + texte blanc : le bouton principal et le retour en haut
   deviennent illisibles quand `--ez-primary-600` est une teinte vive. Le texte
   passe donc en sombre, sur le même fond. */
[data-ez-theme="nuit"] .ez-btn--primary,
[data-ez-theme="nuit"] .ez-btn--primary:hover,
[data-ez-theme="nuit"] .ez-totop,
[data-ez-theme="nuit"] .ez-slot:hover,
[data-ez-theme="nuit"] .ez-slot:focus-visible {
  color: #06222a;
}

[data-ez-theme="nuit"] .ez-brand__mark,
[data-ez-theme="nuit"] .ez-person__avatar { color: #06222a; }

[data-ez-theme="nuit"] .ez-footer {
  background: var(--ez-surface-deep);
  color: var(--ez-ink-500);
  border-top: 1px solid var(--ez-border);
}

[data-ez-theme="nuit"] .ez-footer a { color: var(--ez-ink-500); }
[data-ez-theme="nuit"] .ez-footer a:hover { color: var(--ez-ink-900); }
[data-ez-theme="nuit"] .ez-footer h4 { color: var(--ez-ink-900); }
[data-ez-theme="nuit"] .ez-footer .ez-brand { color: var(--ez-ink-900); }

[data-ez-theme="nuit"] .ez-section--deep .ez-section-head p,
[data-ez-theme="nuit"] .ez-section--deep p { color: var(--ez-ink-500); }

/* Le focus doit rester visible sur fond sombre. */
[data-ez-theme="nuit"] .ez-landing :focus-visible { outline-color: var(--ez-accent-500); }

/* --------------------------------------------------------------------------
   9. Impression — le patient imprime l'adresse et les horaires
   -------------------------------------------------------------------------- */

@media print {
  .ez-slots,
  .ez-map { display: none; }
}