/* ==========================================================
   Maison Médicale des Primeurs — feuille de style
   ----------------------------------------------------------
   Sommaire
     1. Page            (fond, police générale)
     2. Styles réutilisables  (classes à coller dans le HTML)
     3. En-tête de contact
     4. Colonne de gauche     (logo, menu)
     5. Bulle et sous-menu
     6. Contenu               (règles valables sur toutes les pages)
     7. Éléments propres à certaines pages
     8. Écran moyen           (à partir de 544 px)
     9. Grand écran           (à partir de 800 px)
    10. Très grand écran      (à partir de 1100 px, TOUJOURS EN DERNIER)

   Principe : tout ce qui est hors des blocs @media décrit
   le téléphone. Chaque bloc @media ne contient que ce qui
   change à partir de sa largeur, et les blocs sont rangés
   de la plus petite à la plus grande largeur.
   Dans chaque section, les règles sont classées par ordre
   alphabétique.
   ========================================================== */


/* ===== 1. Page ===== */

body {
  font-family: Verdana, sans-serif;
  font-size: 14px;
  margin: 0;
  padding-bottom: 31.25vw;   /* hauteur de ville.png : hauteur ÷ largeur × 100 */
}

html {
  background-color: #b3e0e4;
  background-image: url("nuages.png"), url("ville.png");
  background-position: right top, center bottom;
  background-repeat: no-repeat;
  background-size: 14% auto, 100% auto;
  min-height: 100%;
}


/* ===== 2. Styles réutilisables ===== */

.accent {
  color: #CE7256;
}

.grand {
  font-size: 1.6em;
}

.gras {
  font-weight: bold;
}

.petit {
  font-size: 0.85em;
}


/* ===== 3. En-tête de contact ===== */

.contact {
  padding: 2px 0;
  text-align: center;
}

.contact a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

.contact p {
  background-color: #f9e9df;
  border-radius: 20px;
  display: inline-block;
  margin: 4px 10px;
  padding: 4px 16px;
}

/* ===== 4. Colonne de gauche ===== */

/* Boutons (menu + titres des sous-menus) : forme commune (.bouton)
   + une couleur par rubrique (.qui, .que, .comment, .infos, .inscrire, .patient, .acti) */
.acti {
  background-color: #129cb9;
}

.bouton {
  clip-path: polygon(3% 15%, 26% 6%, 95% 6%, 99% 56%,
                     98% 81%, 60% 94%, 2% 99%, 0% 48%);   /* les 8 points des anciens boutons */
  color: white;
  display: block;
  font-family: "Amatic SC", cursive;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0;
  padding: 0.25em 0.75em 0.15em;   /* 0.75em à gauche et à droite : marge autour du texte, comme les originaux */
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
  white-space: nowrap;   /* le texte reste sur une ligne */
  width: fit-content;    /* largeur = texte + padding : chaque bouton à sa taille */
}

.comment {
  background-color: #699493;
}

.infos {
  background-color: #f4b78d;
}

.inscrire {
  background-color: #8e7cc3;
}

.logo img {
  display: block;
  margin: 0 auto 20px;
  transform: translateX(7.5%);   /* le texte MMP est à gauche dans l'image (la spirale à droite) : on le recentre visuellement */
  width: 180px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.menu .bouton:hover {
  background-color: #e2b24a;
  transform: rotate(-1deg) scale(1.03);
}

.patient {
  background-color: #d07256;
}

.que {
  background-color: #e1a2a2;
}

.qui {
  background-color: #91c998;
}

/* Icônes des réseaux sociaux, sous le menu (couleur dans les fichiers .svg) */
.reseaux {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;
}

.reseaux a:hover img {
  transform: rotate(-4deg) scale(1.15);   /* même petit geste que les boutons du menu */
}

.reseaux img {
  display: block;
  height: 1.6rem;
  transition: transform 0.2s;
  width: 1.6rem;
}


/* ===== 5. Bulle et sous-menu ===== */

.bulle {
  background-color: white;
  border-radius: 40px;
  margin: 20px;
  padding: 30px;
}

.duo {
  margin-top: 20px;   /* même écart sous le menu que la bulle des autres pages */
}

.sous-menu {
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 15px 20px;
}

.sous-menu a {
  color: black;
  text-decoration: none;
}

.sous-menu a:hover {
  color: #FFCC00;
}

.sous-menu a[aria-current="page"] {
  color: #CE7256;
  font-weight: bold;
}

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

.sous-menu p {
  color: #CE7256;
  font-style: italic;
}

.sous-menu ul {
  list-style: none;
  padding: 0;
}

/* Fond du sous-menu : couleur de sa rubrique, éclaircie à 75 % de blanc.
   :has(.qui) = « qui contient un élément .qui » (le titre du sous-menu) */
.sous-menu:has(.acti) {
  background-color: #c4e6ee;
}

.sous-menu:has(.comment) {
  background-color: #dae4e4;
}

.sous-menu:has(.infos) {
  background-color: #fcede3;
}

.sous-menu:has(.inscrire) {
  background-color: #e3def0;
}

.sous-menu:has(.patient) {
  background-color: #f3dcd5;
}

.sous-menu:has(.que) {
  background-color: #f8e8e8;
}

.sous-menu:has(.qui) {
  background-color: #e4f2e5;
}


/* ===== 6. Contenu ===== */

.corps a {
  color: black;
}

.corps a:hover {
  color: #FFCC00;
}

.corps h3 {
  color: #CE7256;
}

.corps img {
  align-self: center;
  max-width: 100%;
}

.corps table {
  border-collapse: collapse;
  margin: 10px 0;
}

.corps th,
.corps td {
  border: 1px solid #cccccc;
  padding: 4px 12px;
  text-align: left;
}

.corps th {
  background-color: #ecd0c6;
}

address {
  font-style: normal;
}

blockquote {
  border-left: 4px solid #e6f2e6;
  margin: 0 0 20px;
  padding-left: 15px;
}


/* ===== 7. Éléments propres à certaines pages ===== */

/* Accueil (index.html) */
.accueil {
  text-align: center;
}

/* Accueil en deux bulles (index.html) : Bienvenue + Actualités
   Le fond (classe .news sur <html>) remplace ville.png sur cette page.
   Sur téléphone : bulles l'une sous l'autre, ville en bas de page. */
.actu {
  align-items: start;
  border-bottom: 1px solid #DCE9E8;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;   /* photo au-dessus, texte en dessous */
  padding-bottom: 0.5rem;
}

.actu .texte {
  min-width: 0;   /* empêche un long mot d'élargir la colonne */
}

.actu img {
  aspect-ratio: 1 / 1;   /* cadre carré fixe */
  border-radius: 6px;
  margin: 0;
  object-fit: contain;   /* l'image entière tient dans le cadre */
  width: 100%;
}

.actu p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;   /* texte coupé après 6 lignes */
  display: -webkit-box;
  line-clamp: 6;
  margin: 0.25rem 0;
  overflow: hidden;
}

.actu time {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
}

.actu.ouvert p {
  -webkit-line-clamp: unset;   /* texte déplié : plus de limite de lignes */
  line-clamp: none;
}

/* Carrousel : les cartes côte à côte, on fait défiler à l'horizontale */
.carrousel {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  overflow-x: auto;                /* défilement horizontal */
  overscroll-behavior-x: contain;  /* le geste ne fait pas « page précédente » */
  padding: 0;
  scroll-snap-type: x mandatory;   /* chaque défilement s'arrête pile sur une carte */
  scrollbar-width: none;           /* barre de défilement cachée (Firefox, Chrome) */
}

.carrousel::-webkit-scrollbar {
  display: none;                   /* barre cachée (Safari) */
}

/* Chaque carte fait 85 % : les 15 % restants montrent le début de la suivante */
.carrousel .actu {
  border-bottom: 0;
  flex: 0 0 85%;
  scroll-snap-align: start;        /* la carte s'aligne sur le bord gauche */
}

.carrousel .actu:last-child {
  flex-basis: 100%;                /* la dernière prend toute la place : rien à annoncer après */
}

.colonne .bulle {
  margin-top: 0;              /* collée sous sa bannière */
  min-height: 0;              /* hauteur = son contenu */
  padding: 25px 30px 15px;
  position: relative;         /* repère pour placer la mascotte */
}

.fleche {
  background: none;
  border: 0;
  color: #699493;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  padding: 0 0.5rem;
}

.lire {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.mascotte {
  height: 5.5rem;
  position: absolute;   /* hors du flux : la bulle garde sa taille */
  right: 2rem;          /* à 2rem du bord droit de la bulle */
  top: -3rem;           /* remonte au-dessus du bord haut : elle s'assied dessus */
  width: auto;
}

.navigation {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

.navigation[hidden] {
  display: none;                   /* sinon display: flex écrase l'attribut hidden */
}

.news {
  background-image: url("villenews-mobile.png");
  background-position: center bottom;
  background-size: 100% auto;   /* l'image fait toujours la largeur de l'écran */
}

.news body {
  padding-bottom: 60vw;   /* hauteur de villenews-mobile.png : hauteur ÷ largeur × 100 */
}

.points {
  display: flex;
  gap: 0.5rem;
}

.points button {
  background-color: #DCE9E8;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 0.6rem;
  padding: 0;
  width: 0.6rem;
}

.points button[aria-current="true"] {
  background-color: #699493;
}

.titre-bulle {
  align-self: flex-start;       /* pas étirée par la colonne flex */
  display: block;
  height: 4rem;                 /* même hauteur pour toutes les bannières */
  margin: 0 0 -1.2rem 1.6rem;   /* déborde de 1.2rem sur la bulle */
  position: relative;           /* nécessaire pour que z-index agisse */
  width: auto;                  /* largeur selon les proportions de l'image */
  z-index: 1;                   /* passe devant la bulle */
}

.toutes {
  display: block;
  font-size: 0.85em;
  margin-top: 0.3rem;
  text-align: right;
}

/* Agenda (agenda.html) : liste sur téléphone, mois sur grand écran */
.agenda {
  border: 0;
  display: block;
  height: 600px;
  width: 100%;
}

.agenda-mois {
  display: none;
}

/* Plan Google Maps (coordonnees.html) */
.carte {
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
  max-width: 600px;
  width: 100%;
}

/* Icône + texte (contact.html) */
.coord {
  align-items: center;
  display: flex;
  gap: 15px;
}

/* Colonnes de noms (equipe.html) */
.equipe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
}

.equipe ul {
  list-style: none;
  padding: 0;
}

/* Vignettes photos (campagne.html, marche.html) */
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.galerie a:hover img {
  filter: brightness(1.1);
}

.galerie img {
  border-radius: 8px;
  transition: filter 0.2s;
  width: 150px;
}


/* Vous inscrire (envie.html) : une seule page, sommaire à ancres */
html {
  scroll-behavior: smooth;   /* défilement doux quand on clique sur un lien du sommaire */
}

.corps h3 {
  scroll-margin-top: 1.5rem;   /* après un saut, le titre ne colle pas au bord de l'écran */
}

.corps section + section {
  margin-top: 1.5rem;   /* petite pause entre les sections */
}

.primy-intro {
  display: block;
  height: auto;
  margin: 0 auto 1rem;
  width: 120px;
}

.retour {
  color: #8e7cc3;   /* lien « ↑ Sommaire », utile sur téléphone */
  display: block;
  font-size: 0.85em;
  text-align: right;
}

.slogan {
  font-size: 1.17em;   /* taille et graisse d'un titre, sans en être un */
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ===== 8. Écran moyen (à partir de 544 px) ===== */

@media (min-width: 544px) {

  /* Accueil */
  .actu {
    grid-template-columns: 14rem 1fr;   /* photo à gauche, texte à droite */
  }

  .news {
    background-image: url("villenews.png");
  }

  .news body {
    padding-bottom: 25vw;   /* bande réservée aux maisons, en bas de villenews.png */
  }
}


/* ===== 9. Grand écran (à partir de 800 px) ===== */

@media (min-width: 800px) {

  /* Mise en page générale */
  .page {
    display: flex;
  }

  /* Accueil : les deux bulles côte à côte, même largeur */
  .actu {
    gap: 0.5rem;
    grid-template-columns: 1fr;   /* bulle trop étroite pour photo + texte côte à côte */
  }

  .actu img {
    max-height: 52vh;   /* cadre carré, mais jamais plus haut que la moitié de l'écran */
  }

  .actu:not(.ouvert) p {
    -webkit-line-clamp: 4;   /* texte coupé après 4 lignes : la bulle reste compacte */
    line-clamp: 4;
  }

  .duo {
    align-items: flex-start;  /* chaque bulle garde sa propre hauteur */
    align-self: flex-start;   /* ne s'étire pas à la hauteur du menu */
    display: flex;
    flex: 1;                  /* prend la place à droite du menu */
    margin-right: 12vw;       /* même marge droite que les autres pages */
    margin-top: 0;            /* le menu est à côté, plus au-dessus */
  }

  .duo .bulle {
    margin-right: 20px;   /* les 12vw de .bulle sont déjà sur .duo */
  }

  .duo .colonne {
    display: flex;
    flex: 1;
    flex-direction: column;   /* bannière au-dessus, bulle en dessous */
    min-width: 0;
  }

  .news {
    background-attachment: fixed;   /* la ville reste en bas de l'écran */
  }

  .news body {
    padding-bottom: 2rem;
  }

  /* Colonne de gauche */
  .bouton {
    font-size: 1.5rem;
  }

  .espace-avant {
    margin-top: 30px;
  }

  .gauche {
    margin-left: 10px;   /* les boutons ne collent plus au bord de l'écran */
  }

  .menu {
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
  }


  /* Bulle et sous-menu */
  .bulle {
    display: flex;
    flex: 1;
    gap: 40px;
    margin-right: 12vw;
    margin-top: 4px;
    min-height: 30vw;
  }

  .sous-menu {
    width: 200px;
  }

  /* Vous inscrire : le sommaire reste visible pendant qu'on descend */
  .bulle:has(.inscrire) .sous-menu {
    align-self: flex-start;
    position: sticky;
    top: 1.5rem;
  }

  .retour {
    display: none;   /* le sommaire est toujours visible : lien inutile */
  }

  /* Contenu */
  .corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }

  /* Agenda */
  .agenda-liste {
    display: none;
  }

  .agenda-mois {
    display: block;
  }
}


/* ===== 10. Très grand écran (à partir de 1100 px) — TOUJOURS EN DERNIER ===== */

@media (min-width: 1100px) {

  /* Accueil : Bienvenue à gauche (5 parts), Actualités à droite (4 parts) */
  .duo {
    margin-right: 2vw;
  }

  .duo .colonne {
    flex: 5;
  }

  .duo .colonne + .colonne {
    flex: 4;
  }

}