/* ==========================================================
   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 */
}

/* Boutons sans l'aspect gris du navigateur (carrousel de l'accueil) */
button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

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%;
  scroll-behavior: smooth;   /* défilement doux vers les ancres (sommaire de inscription/index.html) */
}

/* Cadres intégrés (agenda Google, plan Google Maps) */
iframe {
  border: 0;
  display: block;
  width: 100%;
}

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


/* ===== 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;
}

/* Survol des boutons cliquables (menu, bouton de la newsletter) */
a.bouton:hover {
  background-color: #e2b24a;
  transform: rotate(-1deg) scale(1.03);
}

.patient {
  background-color: #d07256;
}

.que {
  background-color: #e1a2a2;
}

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

/* Doodle entre « Vous inscrire / Déjà patient » et les autres rubriques du menu */
.separation {
  background: url("doodles/feuilles.png") center / 107px 20px no-repeat;   /* tige et feuilles, comme sur le logo */
  border: none;
  flex-basis: 100%;   /* téléphone : force un retour à la ligne dans le menu */
  height: 20px;
  margin: 0;
}

/* 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" : la page affichée ; "true" : une de ses pages (missions, valeurs, charte sous « Notre histoire ») */
  color: #CE7256;
  font-weight: bold;
}

.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;
  scroll-margin-top: 1.5rem;   /* après un saut vers une ancre, le titre ne colle pas au bord de l'écran */
}

.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;
  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 {
  color: #699493;
  font-size: 2rem;
  line-height: 1;
  padding: 0 0.5rem;
}

.lire {
  font: inherit;
  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 */
}

.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-radius: 50%;
  height: 0.6rem;
  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 */
  z-index: 1;                   /* passe devant la bulle */
}

.toutes {
  margin-top: 0.3rem;
}

/* Petits liens alignés à droite : « Toutes les actualités → » (index.html), « ↑ Sommaire » (inscription/index.html) */
.retour,
.toutes {
  display: block;
  font-size: 0.85em;
  text-align: right;
}

/* Agenda (agenda.html) : liste sur téléphone, mois sur grand écran */
.agenda {
  height: 600px;
}

.agenda-mois {
  display: none;
}

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

/* Tableau des horaires (horaire.html) : un jour par ligne,
   le jeudi (horaire différent) ressort, le week-end est grisé */
.horaires .different {
  background-color: #fcede3;
}

.horaires .different strong {
  color: #CE7256;
}

.horaires .ferme {
  color: #999999;
  font-style: italic;
  text-align: center;
}

.horaires .week-end {
  color: #999999;
  font-style: italic;
}

.horaires td,
.horaires th {
  padding: 8px;
}

.horaires tbody th {
  background-color: transparent;
}

/* Cartes de contact (contact.html) : doodle, étiquette, numéro ou adresse.
   Toute la carte est cliquable (voir .moyen a::after). */
.corps .moyen a {   /* .corps devant : sinon « .corps a » le mettrait en noir souligné, jaune au survol */
  color: inherit;
  text-decoration: none;
}

.moyen a::after {
  content: "";
  inset: 0;             /* le lien s'étend sur toute la carte */
  position: absolute;
}

.moyen {
  background-color: white;
  border: 2px solid #fcede3;   /* fond du sous-menu « Infos pratiques » */
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  position: relative;          /* repère pour le lien étendu */
  transition: border-color 0.2s, transform 0.2s;
}

.moyen:focus-within,
.moyen:hover {
  border-color: #f4b78d;       /* couleur du bouton « Infos pratiques » */
  transform: translateY(-2px);
}

.moyen img {
  display: block;
  margin-bottom: 0.75rem;
  width: 56px;
}

.moyen p {
  margin: 0;
}

.moyens {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));   /* côte à côte s'il y a la place, sinon l'une sous l'autre */
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.etiquette {
  color: #6b6b6b;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.precision {
  color: #6b6b6b;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.urgence {
  border-left: 4px solid #d07256;   /* couleur de « Déjà patient » : signale sans crier */
  padding-left: 0.75rem;
}

.valeur {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 0.2rem;   /* l'e-mail passe à la ligne après le @ si besoin (<wbr> dans le HTML) */
}

@media (prefers-reduced-motion: reduce) {
  .moyen {
    transition: none;
  }

  .moyen:focus-within,
  .moyen:hover {
    transform: none;
  }
}

/* Notre équipe (equipe.html) : une carte par secteur, dans les couleurs de « Qui sommes-nous? ».
   Toute la carte mène à la page du secteur (même principe que .moyen) */
.chapeau {
  font-size: 1.1em;
  margin-top: 0;
}

.corps .metier h3 a {   /* .corps devant : sinon « .corps a » le mettrait en noir souligné, jaune au survol */
  color: inherit;
  text-decoration: none;
}

.equipe {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   /* autant de colonnes qu'il y a de place */
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.metier {
  background-color: white;
  border: 2px solid #e4f2e5;   /* fond du sous-menu « Qui sommes-nous? » */
  border-radius: 20px;
  padding: 1rem 1.25rem;
  position: relative;          /* repère pour le lien étendu */
  transition: border-color 0.2s, transform 0.2s;
}

.metier a::after {
  content: "";
  inset: 0;   /* le lien s'étend sur toute la carte */
  position: absolute;
}

.metier:focus-within,
.metier:has(a):hover {   /* :has(a) : la carte de l'ostéopathe, sans lien, ne bouge pas */
  border-color: #91c998;     /* couleur du bouton « Qui sommes-nous? » */
  transform: translateY(-2px);
}

.metier h3 {
  align-items: center;
  color: #3d7345;   /* vert (au lieu du brique de « .corps h3 ») : #91c998 assombri, lisible sur blanc */
  display: flex;
  justify-content: space-between;   /* nom du secteur à gauche, nombre à droite */
  margin: 0 0 0.5rem;
}

.metier li {
  font-size: 0.9em;
  padding: 0.15rem 0;
}

.metier p {
  color: #6b6b6b;
  margin: 0;
}

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

/* Petite pastille avec le nombre de personnes du secteur */
.nombre {
  background-color: #e4f2e5;
  border-radius: 999px;
  color: #3d7345;   /* #91c998 assombri : lisible sur le vert pâle */
  font-size: 0.8rem;
  padding: 0.1rem 0.6rem;
}

/* Partenaire extérieur : bordure en pointillés, il ne fait pas partie de l'équipe */
.partenaire {
  background-color: transparent;
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  .metier {
    transition: none;
  }

  .metier:focus-within,
  .metier:has(a):hover {
    transform: none;
  }
}

/* Notre histoire, Nos missions, Nos valeurs, Notre charte (historique.html, missions.html,
   valeurs.html, charte.html) : quatre pages reliées par un menu en haut (.onglets) */
.onglets {
  margin: 0 0 1.5rem;
}

.onglets a {
  background-color: #e4f2e5;   /* fond du sous-menu « Qui sommes-nous? » */
  border-radius: 999px;
  color: #3d7345;
  display: block;
  font-weight: bold;
  padding: 0.35rem 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

/* .corps devant : sinon « .corps a:hover » le mettrait en jaune */
.corps .onglets a:hover,
.corps .onglets a:focus-visible {
  background-color: #91c998;
  color: white;
}

/* L'onglet de la page affichée : vert foncé */
.corps .onglets a[aria-current="page"] {
  background-color: #3d7345;
  color: white;
}

.onglets ul {
  display: flex;
  flex-wrap: wrap;   /* sur téléphone, les onglets passent à la ligne */
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Titre de la page, sous les onglets : plus grand que les h3, en vert */
.partie {
  color: #3d7345;
  font-size: 1.5em;
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .onglets a {
    transition: none;
  }
}

/* La frise de l'histoire, puis la phrase de conclusion encadrée */
.credo {
  background-color: #e4f2e5;   /* fond du sous-menu « Qui sommes-nous? » */
  border-radius: 20px;
  font-size: 1.1em;
  line-height: 1.6;
  margin: 1.5rem 0 0;
  max-width: 40rem;
  padding: 1rem 1.5rem;
}

/* Petit titre au-dessus de chaque étape */
.etape {
  color: #3d7345;   /* même vert que les titres de l'équipe */
  display: block;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frise {
  list-style: none;
  margin: 0;
  max-width: 40rem;   /* lignes pas trop longues : plus facile à lire */
  padding: 0 0 0 0.5rem;   /* de la place pour les ronds, qui débordent à gauche */
}

/* Le trait vertical : la bordure gauche de chaque étape */
.frise li {
  border-left: 2px solid #c6e3ca;   /* vert pâle, un peu plus soutenu que le fond du sous-menu */
  padding: 0 0 1.5rem 1.5rem;
  position: relative;   /* repère pour placer le rond */
}

/* Un rond vert sur le trait, à hauteur du petit titre */
.frise li::before {
  background-color: #91c998;   /* couleur du bouton « Qui sommes-nous? » */
  border: 3px solid white;     /* le trait s'arrête net autour du rond */
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -10px;   /* -(10 + 3 + 3) ÷ 2 - 2 ÷ 2 : centré sur le trait */
  position: absolute;
  top: 0;
  width: 10px;
}

.frise li:last-child {
  border-left-color: transparent;   /* le trait s'arrête au dernier rond */
  padding-bottom: 0;
}

.frise p {
  line-height: 1.6;
  margin: 0.25rem 0 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;
  height: 150px;
  object-fit: cover; /* recadre au lieu de déformer : toutes les vignettes ont la même taille */
  display: block;
}

/* Bouton « Lire la newsletter » (newsletter.html) : un .bouton du menu, en plus grand
   (.corps devant : sinon « .corps a » le mettrait en noir, puis en jaune au survol) */
.corps .lire-newsletter,
.corps .lire-newsletter:hover {
  color: white;
}

.corps .lire-newsletter {
  font-size: 1.8rem;
  margin: 1.5rem auto 0.3rem;   /* auto : centré */
}

.nouvel-onglet {
  margin-top: 0;
  text-align: center;
}

/* Coche de confirmation (confirmation.html) */
.corps .coche {   /* .corps devant : sinon « .corps img » la centrerait */
  align-self: flex-start;
  display: block;
  margin: 0 0 1.5rem;
  width: 100px;
}

/* Variante centrée (confirmation.html, confirmationsantecom.html) */
.corps.centre {
  text-align: center;
}

.corps.centre .coche {
  align-self: center;
}

.merci {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Accessibilité (accessibilite.html) : liste aérée, un point = un paragraphe */
.aeree li > strong:first-of-type {   /* first-of-type : le doodle passe avant */
  color: #CE7256;   /* début de chaque point : même couleur que les titres */
}

.aeree li {
  display: flow-root;   /* le point contient son doodle flottant */
}

/* Entre deux points : la vague orange (accordée au bouton « Infos pratiques »), comme entre les sections de « Vous inscrire » */
.aeree li + li {
  background: url("doodles/vague-orange.svg") center top / 120px 12px no-repeat;
  margin-top: 1.5rem;
  padding-top: 2.5rem;
}

.aeree blockquote {
  margin: 0.6rem 0 0;
}

/* Vous inscrire (inscription/index.html) : une seule page, sommaire à ancres */
.corps section {
  display: flow-root;   /* la section contient son doodle flottant */
}

/* Choix de la langue, en haut de la page (inscription/ et ses traductions nl/, es/, en/, pt/) */
.langues {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.3rem 0.9rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.corps .langues a[aria-current] {   /* .corps devant : sinon « .corps a » l'emporterait */
  color: #5f4b9e;   /* mauve foncé des titres de « Vous inscrire » */
  font-weight: bold;
  text-decoration: none;
}

/* Titres en mauve foncé (au lieu du brique) : accordés au bouton « Vous inscrire » et aux doodles */
.bulle:has(.inscrire) .corps h3 {
  color: #5f4b9e;   /* #8e7cc3 assombri : assez contrasté pour du texte sur blanc */
}

/* Rubrique « Qui sommes-nous? » : vert au lieu du brique (titres et page active du sous-menu) */
.bulle:has(.qui) .corps h3,
.bulle:has(.qui) .sous-menu a[aria-current],
.bulle:has(.qui) .aeree li > strong:first-of-type {   /* début de chaque point (soins-accessibles.html) */
  color: #3d7345;   /* #91c998 assombri : même vert que les onglets et les titres de l'équipe */
}

/* Des soins accessibles, version « Qui sommes-nous? » (soins-accessibles.html) : vague verte entre les points.
   Les doodles verts (*-vert.svg) sont choisis directement dans le HTML */
.bulle:has(.qui) .aeree li + li {
  background-image: url("doodles/vague-verte.svg");
}

/* Entre deux sections : la vague, centrée, avec de l'air au-dessus et en dessous */
.corps section + section {
  background: url("doodles/vague.svg") center top / 120px 12px no-repeat;
  margin-top: 1.5rem;
  padding-top: 2.5rem;
}

/* Rubrique « Déjà patient » (nid.html) : vague brique, accordée au bouton */
.bulle:has(.patient) .corps section + section {
  background-image: url("doodles/vague-brique.svg");
}

/* Un doodle par section, à droite du titre (image décorative : alt="") */
.corps .doodle {   /* .corps devant : sinon « .corps img » le centrerait */
  float: right;
  margin: 0.4rem 0 0.5rem 1rem;
  transform: rotate(6deg);
  transition: transform 0.3s;
  width: 56px;
}

/* Un sur deux penche de l'autre côté : effet « collé à la main » */
.corps section:nth-of-type(even) .doodle,
.aeree li:nth-child(even) .doodle {
  transform: rotate(-7deg);
}

/* Survol de la section : le doodle fait un petit geste, comme les boutons du menu */
.corps section:hover .doodle,
.aeree li:hover .doodle {
  transform: rotate(-2deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .corps .doodle {
    transition: none;
  }
}

/* Rubrique « Comment ça marche? » : bleu-vert au lieu du brique (titres, page active, vague entre sections) */
.bulle:has(.comment) .corps h3,
.bulle:has(.comment) .sous-menu a[aria-current] {
  color: #3f6564;   /* #699493 assombri : lisible sur blanc et sur le bleu pâle */
}

.bulle:has(.comment) .corps section + section {
  background-image: url("doodles/vague-bleue.svg");
}

/* Le forfait (forfait.html) : Primy en intro, puis des cartes illustrées.
   Les doodles bleu-vert (*-bleu.svg) sont choisis dans le HTML (images décoratives : alt="") */
.a-savoir {
  border-left: 4px solid #699493;   /* couleur du bouton « Comment ça marche? » */
  line-height: 1.6;
  padding-left: 0.75rem;
}

.en-bref {
  align-items: center;
  background-color: #dae4e4;   /* fond du sous-menu « Comment ça marche? » */
  border-radius: 20px;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}

.en-bref p {
  font-size: 1.1em;
  line-height: 1.6;
  margin: 0;
}

.corps .primy-bref {   /* .corps devant : sinon « .corps img » la centrerait */
  flex-shrink: 0;
  transform: rotate(-4deg);
  width: 70px;
}

.forfait .credo {
  background-color: #dae4e4;   /* bleu pâle au lieu du vert de « Qui sommes-nous? » */
}

.forfait h4 {
  color: #3f6564;
  margin: 0.5rem 0;
}

/* Cartes : même cadre partout (accord à trois, soins compris, solidarités, règles) */
.regles li,
.secret,
.soins li,
.solidarites > div,
.trio li {
  background-color: white;
  border: 2px solid #dae4e4;
  border-radius: 20px;
  padding: 1rem 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}

.regles li:hover,
.soins li:hover,
.solidarites > div:hover,
.trio li:hover {
  border-color: #699493;
  transform: translateY(-2px);
}

/* Les doodles des cartes : penchés, comme collés à la main */
.corps .regles img,
.corps .secret img,
.corps .soins img,
.corps .solidarites img,
.corps .trio img {
  align-self: auto;
  display: block;
  transform: rotate(6deg);
  width: 52px;
}

.corps .regles li:nth-child(even) img,
.corps .soins li:nth-child(even) img,
.corps .solidarites > div:nth-child(even) img,
.corps .trio li:nth-child(even) img {
  transform: rotate(-7deg);
}

.regles,
.soins,
.trio {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.regles {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));   /* côte à côte s'il y a la place, sinon l'une sous l'autre */
}

.soins,
.trio {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));   /* plus étroites : les trois cartes tiennent sur une ligne */
}

.regles p,
.soins p,
.trio p {
  margin: 0.3rem 0 0;
}

.regles strong,
.soins strong {
  color: #3f6564;
  display: block;
  margin-top: 0.5rem;
}

.secret {
  align-items: flex-start;   /* le cadenas reste en haut, à côté du titre */
  display: flex;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.secret h4 {
  margin-top: 0;
}

.secret p {
  margin: 0.4rem 0;
}

/* Les trois secrets, en petites pastilles */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.pastilles li {
  background-color: #dae4e4;
  border-radius: 999px;
  color: #3f6564;
  font-size: 0.9em;
  padding: 0.2rem 0.75rem;
}

/* Encadré « Ce qui n'est pas compris » : pointillés brique, pastilles barrées d'un ✗ */
.pas-compris {
  border: 2px dashed #ecd0c6;   /* brique pâle : signale sans alarmer */
  border-radius: 20px;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
}

.pas-compris h4 {
  margin-top: 0;
}

.pas-compris p {
  margin: 0.4rem 0;
}

.pas-compris .pastilles li {
  background-color: #f9e9df;
  color: #4a3328;
}

.pas-compris .pastilles li::before {
  color: #CE7256;
  content: "✗ ";
  font-weight: bold;
}

/* Ce qui est compris (✓) ou non (✗) dans le forfait */
.soins .oui::before {
  color: #3f6564;
  content: "✓ ";
  font-weight: bold;
}

.soins .non {
  color: #6b6b6b;
}

.soins .non::before {
  color: #CE7256;
  content: "✗ ";
  font-weight: bold;
}

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

.solidarites p {
  line-height: 1.6;
  margin: 0.4rem 0 0;
}

/* L'accord à trois : vous, la maison médicale, votre mutuelle */
.trio .etiquette {
  color: #3f6564;
  display: block;
  font-weight: bold;
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .regles li,
  .soins li,
  .solidarites > div,
  .trio li {
    transition: none;
  }

  .regles li:hover,
  .soins li:hover,
  .solidarites > div:hover,
  .trio li:hover {
    transform: none;
  }
}

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

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


/* ===== 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;
  }

  .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;
  }

  .separation {
    flex-basis: auto;
    width: 107px;
  }


  /* 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;
  }

  .corps .doodle {
    margin-right: 0.5rem;
    width: 76px;   /* plus de place : doodles un peu plus grands */
  }

  .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;
  }

}