/* =========================================================
   iWeb : feuille de style commune à tous les sites clients VisiVit
   Flat design épuré, téléphone d'abord, sans framework.
   Les couleurs se changent ici, dans :root.
   ========================================================= */

:root {
  --primaire: #23507f;       /* bleu (rappel de l'ancien site) : liens, boutons, menu */
  --primaire-fonce: #173a5e; /* survol */
  --pale: #eef3f8;           /* fonds des encarts */
  --rouge: #b42318;          /* urgences, textes mis en valeur par le client */
  --rouge-pale: #fdf0ef;
  --vert: #1f7a4d;           /* message envoyé */

  --encre: #1e2a3a;          /* texte principal */
  --gris: #4f5d6d;           /* texte secondaire */
  --trait: #d9e1ea;          /* bordures */
  --fond: #ffffff;
  --fond-navigateur: var(--pale); /* autour de la feuille blanche, sur grand écran : même bleu que les encarts (choix du 13/10/2026) */

  --rayon: 10px;
  --largeur: 72rem;          /* largeur maximale du contenu */
  --lecture: 48rem;          /* largeur maximale des textes */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: 1.3rem; margin-top: 1.6em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

a { color: var(--primaire); text-underline-offset: .15em; }
a:hover { color: var(--primaire-fonce); }

:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; border-radius: 4px; }
.pied :focus-visible { outline-color: #fff; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40em) { .conteneur { padding: 0 1.5rem; } }

/* Feuille blanche : la page entière ; sur grand écran, elle se détache sur un fond coloré */
.feuille { background: var(--fond); }
@media (min-width: 64em) {
  body { background: var(--fond-navigateur); }
  .feuille {
    max-width: calc(var(--largeur) + 3rem);
    margin: 1.5rem auto;
    border-radius: 14px;
    overflow: hidden; /* coins arrondis du pied de page */
    box-shadow: 0 1px 3px rgb(30 42 58 / .12);
  }
}

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.evitement { position: absolute; left: -999px; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--encre); color: #fff; }
.evitement:focus { left: 1rem; top: 1rem; color: #fff; }

.icone { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem;
  padding: .6rem 1.2rem;
  border: 2px solid var(--primaire);
  border-radius: var(--rayon);
  background: var(--primaire);
  color: #fff;
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
}
.bouton:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: #fff; }
.bouton--appel { background: #fff; color: var(--primaire); }
.bouton--appel:hover { background: var(--pale); color: var(--primaire-fonce); }
.bouton--urgence { background: var(--rouge); border-color: var(--rouge); }
.bouton--urgence:hover { background: #8f1c13; border-color: #8f1c13; }
.bouton--discret { background: #fff; color: var(--primaire); border-color: var(--trait); }
.bouton--discret:hover { background: var(--pale); color: var(--primaire-fonce); border-color: var(--primaire); }

/* ---------- En-tête ---------- */

.entete { border-bottom: 1px solid var(--trait); background: #fff; }

.entete__haut {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; padding-top: .75rem; padding-bottom: .75rem;
}

.marque {
  display: flex; align-items: center; gap: .75rem;
  flex: 1 1 14rem; min-width: 0;
  color: var(--encre); text-decoration: none;
}
.marque:hover { color: var(--primaire); }
.marque__logo { width: 3.25rem; height: 3.25rem; object-fit: contain; flex: none; }
.marque__nom {
  margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto;
}

.entete__actions { display: flex; gap: .5rem; flex: 1 1 100%; }
.entete__actions .bouton--appel { flex: 1; }
.entete__rdv { display: none; } /* sur téléphone : dans le menu */

.bouton-menu {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.9rem; padding: .5rem 1rem;
  border: 2px solid var(--trait); border-radius: var(--rayon);
  background: #fff; color: var(--encre); font: inherit; font-weight: 600; cursor: pointer;
}
.bouton-menu[hidden] { display: none; }
.bouton-menu[aria-expanded="true"] { background: var(--pale); border-color: var(--primaire); }

.entete__adresse { display: none; margin: 0 auto; color: var(--gris); font-size: .95rem; }

.banniere { display: none; }
.banniere img { display: block; width: 100%; max-width: 980px; height: auto; margin: 0; border-radius: 6px; }

/* Menu : sur téléphone, liste dépliée par le bouton « Menu » (sans JavaScript : toujours visible) */
.menu ul { list-style: none; margin: 0 auto; padding-bottom: .75rem; }
.menu li { border-top: 1px solid var(--trait); }
.menu a:not(.bouton) {
  display: block; padding: .75rem .25rem;
  color: var(--encre); font-weight: 600; text-decoration: none;
}
.menu a:not(.bouton):hover { color: var(--primaire); }
.menu a[aria-current="page"] { color: var(--primaire); box-shadow: inset 4px 0 0 var(--primaire); padding-left: .9rem; }
.menu a.menu__urgences { color: var(--rouge); }
.menu .menu__rdv { border-top: 0; padding-top: .75rem; }
.menu .menu__rdv .bouton { width: 100%; }
.js .menu:not(.ouvert) { display: none; }

/* Tablette et plus : grand logo, adresse et bannière */
@media (min-width: 48em) {
  .marque__logo { width: 4.5rem; height: 4.5rem; }
  .marque__nom { font-size: 1.5rem; }
  .entete__actions { flex: none; }
  .entete__adresse { display: block; padding-bottom: .5rem; }
  .banniere { display: block; padding-bottom: .75rem; }
}

/* Ordinateur : menu sur une ligne, bouton « Prendre rendez-vous » dans l'en-tête
   (en dessous de 64em, le menu se déplie avec le bouton « Menu » comme sur téléphone) */
@media (min-width: 64em) {
  .bouton-menu { display: none; }
  .js .menu:not(.ouvert), .menu { display: block; border-top: 1px solid var(--trait); }
  .menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; padding-bottom: 0; }
  .menu li { border-top: 0; }
  .menu a:not(.bouton) { padding: .8rem 0; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--primaire); padding-left: 0; }
  .menu .menu__rdv { display: none; } /* sur ordinateur : dans l'en-tête */
  .entete__rdv { display: inline-flex; }
}
/* Écrans moyens : menu un peu plus serré pour tenir sur une ligne */
@media (min-width: 64em) and (max-width: 74.999em) {
  .menu ul { gap: 0 .9rem; font-size: .95rem; }
}

/* ---------- Pages ---------- */

.page { padding-top: 1.5rem; padding-bottom: 3rem; }
.page__titre { font-size: clamp(1.6rem, 6vw, 2.2rem); overflow-wrap: anywhere; }

.texte, .texte-client { max-width: var(--lecture); }

/* Textes saisis par les clients (nettoyés par le service) */
.texte-client { overflow-wrap: anywhere; }
.texte-client img { display: inline-block; border-radius: 6px; }
.texte-client ul, .texte-client ol { padding-left: 1.4rem; }
.texte-client table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.texte-client td, .texte-client th { padding: .3rem .5rem; border: 1px solid var(--trait); vertical-align: top; }
.texte-client hr { border: 0; border-top: 1px solid var(--trait); margin: 1.5rem 0; }
.centre { text-align: center; }
.droite { text-align: right; }
.gras { font-weight: 700; }
.italique { font-style: italic; }
.souligne { text-decoration: underline; }
.important { color: var(--rouge); }
.grand { font-size: 1.1em; } /* grandes tailles des anciens textes */
/* Tailles choisies avec les boutons A− / A+ de l'administration (fixes : elles ne s'additionnent pas) */
.taille-petit { font-size: .9rem; }
.taille-normal { font-size: 1.0625rem; }
.taille-grand { font-size: 1.3rem; }
.taille-tres-grand { font-size: 1.6rem; line-height: 1.3; }
/* Couleurs de la palette de l'administration (toutes lisibles sur blanc et sur --pale) ;
   le rouge est la classe « important » ci-dessus */
.couleur-bleu { color: var(--primaire); }
.couleur-vert { color: var(--vert); }
.couleur-orange { color: #c2410c; }
.couleur-gris { color: var(--gris); }
.couleur-noir { color: var(--encre); }
.texte-client .centre img { margin: 0 auto; }

.note { color: var(--gris); font-size: .95rem; }
.texte-client + .note, .galerie + .note { margin-top: 1.5rem; }

/* Accueil et pages de texte : contenu et encarts (côte à côte sur grand écran) */
.avec-encarts { display: grid; gap: 2rem; }
.avec-encarts__encarts { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 40em) and (max-width: 59.999em) {
  .avec-encarts__encarts { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* tablette : encarts par deux */
}
@media (min-width: 60em) {
  .avec-encarts { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 3rem; }
}
@media (min-width: 64em) {
  .encart--rdv { display: none; } /* le bouton est dans l'en-tête */
}

.encart { padding: 1.1rem 1.25rem; border-radius: var(--rayon); background: var(--pale); overflow-wrap: anywhere; }
.encart h2 { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--primaire); }
.encart > :last-child, .encart .texte-client > :last-child { margin-bottom: 0; }
.encart__lien { margin: .5rem 0 0; font-weight: 600; }
.encart--rdv .bouton { width: 100%; }
.encart__photo { display: block; font-weight: 600; }
.encart__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: .4rem; }

/* Contact et urgences */
.deux-colonnes { display: grid; gap: 1rem 3rem; }
@media (min-width: 60em) { .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.adresse p { display: flex; gap: .5rem; align-items: flex-start; }
.adresse .icone { margin-top: .2rem; color: var(--primaire); }

.alerte {
  max-width: var(--lecture); margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border-left: 5px solid var(--rouge); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--rouge-pale);
}
.alerte p { margin-bottom: .75rem; }

/* Formulaires */
.formulaire h2 { margin-top: 1.6em; }
@media (min-width: 60em) { .formulaire h2 { margin-top: 0; } }
.champ { margin-bottom: 1rem; }
.champ label { display: block; margin-bottom: .3rem; font-weight: 600; }
.facultatif { font-weight: 400; color: var(--gris); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], select, textarea {
  width: 100%; padding: .65rem .75rem;
  border: 1px solid #8a97a6; border-radius: 8px;
  background: #fff; color: var(--encre);
  font: inherit; font-size: 1rem;
}
textarea { resize: vertical; }
.piege { position: absolute; left: -9999px; }
.message { padding: .75rem 1rem; border-radius: 8px; font-weight: 600; }
.message--ok { background: #e8f5ee; color: var(--vert); }
.message--erreur { background: var(--rouge-pale); color: var(--rouge); }

/* Conseils */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: flex-end; padding: 1rem 1.25rem; border-radius: var(--rayon); background: var(--pale); }
.filtres fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.filtres legend { padding: 0; margin-bottom: .3rem; font-weight: 600; }
.filtres .champ { flex: 1 1 14rem; }
.filtres p { margin-bottom: 1rem; }
.js .filtres[data-auto] button[type="submit"] { display: none; } /* la page se met à jour dès qu'on change un choix */
.puce { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .4rem .4rem 0; padding: .35rem .8rem; border: 1px solid var(--trait); border-radius: 2rem; background: #fff; cursor: pointer; }
.puce:has(input:checked) { border-color: var(--primaire); box-shadow: inset 0 0 0 1px var(--primaire); }

.resultat { margin-top: 1rem; color: var(--gris); }
.theme h2 { font-size: 1.15rem; }
.compte { color: var(--gris); font-weight: 400; }
.liste-conseils { list-style: none; margin: 0; padding: 0; max-width: var(--lecture); }
.liste-conseils li { border-bottom: 1px solid var(--trait); }
.liste-conseils a { display: block; padding: .6rem 0; text-decoration: none; }
.liste-conseils a:hover { text-decoration: underline; }
.fil { color: var(--gris); font-size: .95rem; }
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.etiquettes li { padding: .1rem .7rem; border-radius: 2rem; background: var(--pale); font-size: .9rem; font-weight: 600; }

/* Galerie */
.galerie { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.galerie figure { margin: 0; }
.galerie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.galerie figcaption { margin-top: .4rem; color: var(--gris); font-size: .95rem; }

.widget-rdv { min-height: 20rem; }

/* ---------- Pied de page ---------- */

.pied { padding: 2rem 0 1rem; background: var(--encre); color: #e6ebf1; font-size: .95rem; }
.pied a { color: #fff; }
.pied__colonnes { display: grid; gap: 1rem 3rem; }
@media (min-width: 48em) { .pied__colonnes { grid-template-columns: 2fr 1fr; } }
.pied__colonnes p { margin-bottom: .3rem; }
.pied__nom { font-weight: 700; color: #fff; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: .3rem; }
.pied__visivit { margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid #3a4a5e; color: #c3ccd6; font-size: .85rem; }

/* Page d'essai locale */
.liste-locale li { margin-bottom: .3rem; }
.liste-locale .encours a { font-weight: 700; }

/* ---------- Impression ---------- */

@media print {
  .entete__actions, .menu, .banniere, .evitement, .formulaire, .filtres { display: none !important; }
  .pied { background: none; color: #000; }
  .pied a { color: #000; }
  a { color: #000; }
}