/* docteurgane.fr — feuille de style unique, sans framework */

:root {
  --bleu-nuit: #0f2d47;
  --bleu-principal: #1a5276;
  --bleu-clair: #eaf1f6;
  --vert-accent: #3a7d63;
  --gris-texte: #3a3f45;
  --gris-clair: #f6f7f8;
  --blanc: #ffffff;
  --bordure: #dbe3ea;
  --marge-max: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: var(--gris-texte);
  background: var(--blanc);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--bleu-nuit);
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; margin-bottom: 0.9rem; }
h3 { font-size: 1.15rem; color: var(--bleu-principal); }

p { margin: 0 0 1rem; }

a { color: var(--bleu-principal); }

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

.conteneur {
  max-width: var(--marge-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* En-tête / navigation */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 0.5rem;
}

.logo {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: #0e8a5b;
  text-decoration: none;
  font-weight: bold;
}

.logo span {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-principale {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
}

.nav-principale a {
  text-decoration: none;
  color: var(--gris-texte);
  font-size: 0.95rem;
}

.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
  color: var(--bleu-principal);
  font-weight: 600;
}

/* Bandeau d'introduction de page */

.bandeau {
  background: var(--bleu-clair);
  padding: 3rem 0;
  text-align: center;
}

.bandeau p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--bleu-nuit);
}

.bandeau.accueil {
  text-align: left;
  padding: 4rem 0;
  overflow: hidden;
}

.bandeau.accueil h1 { font-size: 2.4rem; }

.bandeau.accueil .accroche {
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 0 1.5rem;
}

/* Bandeau d'accueil : texte + photo du cabinet côte à côte */

.accueil-mise-en-page {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.accueil-texte {
  flex: 1 1 480px;
}

.accueil-photo {
  flex: 1 1 360px;
  margin: 0;
}

.accueil-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 32px -14px rgba(15, 45, 71, 0.35);
}

/* Apparition en fondu du bandeau au chargement de la page */

@keyframes apparition {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.bandeau.accueil .accueil-texte h1,
.bandeau.accueil .accueil-texte .accroche,
.bandeau.accueil .accueil-texte .bouton,
.bandeau.accueil .accueil-photo {
  opacity: 0;
  animation: apparition 0.7s ease-out forwards;
}

.bandeau.accueil .accueil-texte h1 { animation-delay: 0s; }
.bandeau.accueil .accueil-texte .accroche { animation-delay: 0.12s; }
.bandeau.accueil .accueil-texte .bouton { animation-delay: 0.22s; }
.bandeau.accueil .accueil-photo { animation-delay: 0.15s; }

/* Apparition au défilement pour les sections situées plus bas */

.anim-apparition {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anim-apparition.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bandeau.accueil .accueil-texte h1,
  .bandeau.accueil .accueil-texte .accroche,
  .bandeau.accueil .accueil-texte .bouton,
  .bandeau.accueil .accueil-photo,
  .anim-apparition {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* Sections génériques */

.section {
  padding: 3rem 0;
}

.section + .section {
  border-top: 1px solid var(--bordure);
}

.section.fond-clair {
  background: var(--gris-clair);
}

/* Grille de cartes */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -14px rgba(15, 45, 71, 0.25);
}

.carte h3 { margin-top: 0; }
.carte p:last-child { margin-bottom: 0; }

/* Bouton */

.bouton {
  display: inline-block;
  background: var(--bleu-principal);
  color: var(--blanc);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
}

.bouton:hover { background: var(--bleu-nuit); }

.bouton.secondaire {
  background: transparent;
  color: var(--bleu-principal);
  border: 1px solid var(--bleu-principal);
}

.bouton.secondaire:hover {
  background: var(--bleu-clair);
}

/* Photos du cabinet */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.galerie figure {
  margin: 0;
}

.galerie img {
  border-radius: 6px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.galerie figcaption {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.4rem;
}

.photo-facade {
  float: right;
  width: 220px;
  margin: 0 0 1rem 1.5rem;
  border-radius: 6px;
}

.video-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.video-accueil video {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
}

.video-accueil figcaption {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Listes de repères (timeline simple) */

.reperes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--bordure);
}

.reperes li {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
}

.reperes li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vert-accent);
}

.reperes .date {
  font-weight: 600;
  color: var(--bleu-principal);
  display: block;
  margin-bottom: 0.15rem;
}

/* Liens de renvoi en fin de section */

.lien-suite {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.repere-carte a {
  font-size: 0.92rem;
}

/* Marqueur temporaire des informations restant à fournir.
   Doit avoir disparu du site avant la mise en ligne. */

mark.a-completer {
  background: #ffe9a8;
  color: #6b4a00;
  padding: 0 0.3rem;
  border-radius: 3px;
  font-size: 0.9rem;
}

/* Pied de page */

.pied {
  background: var(--bleu-nuit);
  color: #cdd9e1;
  padding: 2.5rem 0;
  font-size: 0.9rem;
}

.pied a { color: var(--blanc); }

.pied .conteneur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.pied .conteneur > div {
  flex: 0 1 auto;
}

.pied-avertissement {
  max-width: 640px;
  color: #9fb2bf;
  font-size: 0.82rem;
}

/* Encart d'avertissement / urgence */

.encart-urgence {
  background: #fff4e5;
  border: 1px solid #f0c987;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

@media (max-width: 820px) {
  /* La navigation à sept entrées s'empilait sur trois lignes et mangeait
     l'écran avec l'en-tête collante. Elle passe sur une seule ligne
     défilante horizontalement. */
  .entete .conteneur {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .logo { flex: 0 0 auto; font-size: 1.1rem; }

  .nav-principale {
    flex-wrap: nowrap;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .nav-principale::-webkit-scrollbar { display: none; }

  .nav-principale a { white-space: nowrap; font-size: 0.9rem; }
}

@media (max-width: 820px) {
  .accueil-mise-en-page {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.75rem;
  }

  .accueil-photo {
    flex: none;
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .bandeau { padding: 2.25rem 0; }
  .bandeau.accueil { padding: 2.5rem 0; }
  .bandeau.accueil h1 { font-size: 1.9rem; }
  .section { padding: 2.25rem 0; }
  h1 { font-size: 1.8rem; }
  .photo-facade { float: none; width: 100%; margin: 0 0 1rem; }
  .bouton, .bouton.secondaire { display: block; text-align: center; margin-bottom: 0.6rem; }
}