/* ADvoue - feuille de style unique. UTF-8, aucun script, aucune dependance externe. */

/* Palette passee au noir et blanc le 24/08/2026, pour suivre le
   logotype : un trace a la main, noir, sans couleur.
   --accent vaut desormais le noir du texte. Les liens perdaient
   donc leur seul signe distinctif : ils sont soulignes plus bas. */
:root {
  --fond:      #ffffff;
  --fond-alt:  #f6f6f6;
  --texte:     #141414;
  --texte-doux:#5c5c5c;
  --accent:    #141414;
  --accent-fonce:#000000;
  --trait:     #e4e4e4;
  /* La SEULE couleur du site, et c'est voulu : les etoiles des avis.
     Un accent unique attire l'oeil la ou il sert, sans defaire la
     charte en noir et blanc.

     #b8912f donne 2,95:1 sur blanc. L'or du gite (#c9b38a) n'y
     donnait que 2,04:1 : il est concu pour un fond SOMBRE et se
     delave sur celui-ci. Si l'on veut plus de contraste, #a67c00
     monte a 3,82:1 mais tire vers le bronze.

     Le seuil de 3:1 du WCAG ne s'impose pas strictement ici : les
     etoiles portent aria-hidden et doublent un texte « 5 sur 5 »
     que les lecteurs d'ecran recoivent. Elles informent l'oeil, pas
     l'assistance. */
  --or:        #b8912f;
  --largeur:   1000px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: var(--accent-fonce);
  line-height: 1.25;
}

/* Souligner est desormais le SEUL indice qu'un mot est cliquable :
   la couleur ne le dit plus. Les liens de navigation et les boutons,
   qui se signalent autrement, l'annulent chacun de leur cote. */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-fonce); }

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

.zone { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* --- En-tete --- */

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

.identite {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 20px 18px;
  max-width: var(--largeur);
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Le logotype remplace le nom en texte (24/08/2026). Sa largeur est
   fixee, sa hauteur suit : le fichier fait 475x182, le rapport est
   donc conserve sans le declarer. */
/* Le symbole et le logotype texte, alignes sur leur milieu.
   Chacun garde SON rapport : le symbole est carre, le logotype
   fait 2,61 de large pour 1 de haut et s'ecraserait si on lui
   imposait une largeur. On ne fixe donc que la hauteur du
   second, et les deux cotes du premier — qui est carre. */
.identite .logo {
  flex: 0 0 auto;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* PAS de border-radius : logo.jpg est un dessin au trait CARRE
   (un jardin zen). L'arrondir rognait les angles du portique et la
   base du jardin — verifie a la comparaison le 24/08/2026. On
   n'arrondit une image que si rien d'utile ne vit dans ses angles. */
.identite .logo-marque { width: 56px;  height: 56px; }
.identite .logo-texte  { height: 34px; width: auto; }

@media (max-width: 460px) {
  /* Sur un ecran etroit, le logotype passe en second plan :
     on le reduit plutot que de faire passer le bloc a la ligne. */
  .identite .logo-marque { width: 44px; height: 44px; }
  .identite .logo-texte  { height: 26px; }
}

/* L'accroche est a DROITE du logotype et non dessous. Un filet
   vertical les separe : sans lui, deux blocs de texte cote a cote se
   lisent comme une seule phrase. Sur telephone le filet disparait et
   l'accroche repasse dessous — voir la requete media en bas. */
.identite .accroche {
  font-size: 0.9em;
  color: var(--texte-doux);
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--trait);
  max-width: 30em;
  line-height: 1.5;
}

nav.site {
  background: var(--fond-alt);
  border-bottom: 1px solid var(--trait);
}

nav.site ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--largeur);
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

nav.site a {
  display: inline-block;
  padding: 13px 0;
  text-decoration: none;
  color: var(--texte-doux);
  font-size: 0.95em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

nav.site a { text-decoration: none; }
nav.site a:hover { color: var(--accent-fonce); }
nav.site a.actif { color: var(--accent-fonce); border-bottom-color: var(--accent); }

/* --- Contenu --- */

/* L'espace sous la barre de menu.

   « main.zone » et non « main » : les pages ecrivent
   <main class="zone">, et « .zone { padding: 0 20px } » est un
   selecteur de CLASSE, qui bat un selecteur d'ELEMENT quel que soit
   l'ordre du fichier. Une regle posee sur « main » seul etait donc
   sans effet — l'ecart mesure entre le menu et le titre valait 0
   pixel. Corrige le 24/08/2026, apres mesure.

   Les « div.zone » du pied de page ne sont pas concernes : ils n'ont
   aucune raison de recevoir cet espace. */
main.zone { padding-top: 72px; padding-bottom: 56px; }

section { margin-bottom: 46px; }

h1 { font-size: 2.1em; margin: 0 0 24px; }
h2 { font-size: 1.5em; margin: 0 0 14px; }
h3 { font-size: 1.15em; margin: 0 0 6px; color: var(--texte); }

p { margin: 0 0 16px; }

.chapeau { font-size: 1.1em; color: var(--texte-doux); }

.deux-colonnes {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.deux-colonnes .texte { flex: 1 1 320px; }
.deux-colonnes .visuel { flex: 0 1 300px; }
.deux-colonnes .visuel img { border-radius: 3px; }

figure { margin: 0; }
figure img { border-radius: 3px; }

/* --- Tarifs --- */

.tarifs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  margin: 0;
}

.tarifs li {
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

.tarifs .prix {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45em;
  color: var(--accent);
  margin: 12px 0 0;
  padding-top: 10px;
  margin-top: auto;
}

.tarifs .detail { color: var(--texte-doux); font-size: 0.95em; margin: 0; }

/* --- Encadre --- */

.encadre {
  background: var(--fond-alt);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  border-radius: 0 3px 3px 0;
}

.encadre p:last-child { margin-bottom: 0; }

/* --- Coordonnees --- */

.coordonnees { list-style: none; padding: 0; margin: 0 0 20px; }
.coordonnees li { margin-bottom: 12px; }
.coordonnees .etiquette {
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.bouton { text-decoration: none; }
.bouton:hover { background: var(--accent-fonce); color: #fff; }

/* Variante secondaire : meme gabarit, poids visuel moindre. Sert a
   presenter l e-mail a cote de WhatsApp sans les mettre a egalite. */
.bouton + .bouton { margin-left: 10px; }

.bouton-clair {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--trait);
}

.bouton-clair:hover { background: var(--fond-alt); color: var(--accent-fonce); }

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

footer.site {
  border-top: 1px solid var(--trait);
  background: #fff;
  padding: 26px 0;
  font-size: 0.88em;
  color: var(--texte-doux);
}

footer.site p { margin: 0 0 6px; }

/* --- Petits ecrans --- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7em; }
  .identite { gap: 14px; padding: 18px 20px 14px; }
  nav.site ul { gap: 18px; }
  .deux-colonnes { gap: 22px; }
}

/* =========================================================
   Prise de rendez-vous (reserver.php)
   ========================================================= */

/* La prestation se choisit en cliquant la carte entiere, pas le
   petit rond : le label enveloppe tout le contenu. */
/* Le label est le SEUL enfant du li : c est donc lui qui doit porter la
   colonne flex, sinon le margin-top:auto du prix n a plus de parent
   flexible et les prix des trois cartes cessent de s aligner. */
.tarifs label { display: flex; flex-direction: column; height: 100%; cursor: pointer; }
.tarifs input[type="radio"] { position: absolute; opacity: 0; }
.tarifs li:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Repli pour les navigateurs sans :has() — le focus reste visible. */
.tarifs input[type="radio"]:focus-visible + h3 { outline: 2px solid var(--accent); outline-offset: 3px; }

.jours, .heures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.jour, .heure {
  font: inherit;
  background: #fff;
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 10px 16px;
  cursor: pointer;
}

.heure { min-width: 84px; text-align: center; }

.jour:hover, .heure:hover { border-color: var(--accent); color: var(--accent-fonce); }

.jour.actif, .heure.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.champs { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }

.champs label { display: block; font-size: 0.9em; color: var(--texte-doux); }

.champs input, .champs textarea {
  font: inherit;
  color: var(--texte);
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--trait);
  border-radius: 3px;
  background: #fff;
}

.champs input:focus, .champs textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Piege a robots : hors ecran plutot que display:none, que
   certains remplisseurs automatiques ignorent. */
.piege { position: absolute; left: -9999px; }

.erreur {
  background: #fbeceb;
  border-left: 3px solid #b3413a;
  color: #7d2c27;
  padding: 12px 16px;
  border-radius: 0 3px 3px 0;
}

.mention { font-size: 0.88em; color: var(--texte-doux); }

button.bouton:disabled { opacity: 0.6; cursor: default; }

/* =========================================================
   Avis (avis/index.html)
   ========================================================= */

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

.avis li {
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

/* La note en etoiles. Le texte « 5 sur 5 » reste dans le balisage,
   masque a l'oeil par .lu mais lu par les lecteurs d'ecran : des
   etoiles seules seraient annoncees « etoile noire » cinq fois. */
.avis .note {
  margin: 0 0 10px;
  line-height: 1;
}

/* 0.06em d'ecart : colles, cinq caracteres ★ forment une bande
   illisible ; trop espaces, ils ne se lisent plus comme une note.
   La couleur suit --accent, donc le noir de la charte. */
.avis .etoiles {
  color: var(--or);
  font-size: 1.05em;
  letter-spacing: 0.06em;
}

/* Masquage pour l'oeil SEULEMENT. Ni display:none ni
   visibility:hidden, qui retirent l'element de l'arbre
   d'accessibilite : le texte ne serait plus lu du tout. La
   technique du rognage le laisse dans l'arbre. */
.lu {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.avis blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08em;
  line-height: 1.6;
  color: var(--texte);
}

.avis .signature {
  margin: 12px 0 0;
  font-size: 0.9em;
  color: var(--texte-doux);
}

/* =========================================================
   Les avis, en bulles (24/08/2026)
   ---------------------------------------------------------
   Le probleme a resoudre : une grille classique aligne ses
   elements par LIGNES, et chaque ligne prend la hauteur du plus
   grand. Un avis de trois lignes voisin d'un avis de dix laisse
   donc un trou sous le premier.

   Les colonnes CSS (« columns ») ne fonctionnent pas par lignes :
   elles remplissent la premiere colonne, puis la suivante. Aucun
   trou n'apparait, et les avis de taille voisine se retrouvent
   naturellement cote a cote. C'est le seul moyen d'y arriver sans
   JavaScript.

   break-inside: avoid empeche qu'une bulle soit coupee en deux
   par le passage d'une colonne a l'autre.
   ========================================================= */
.avis-bulles {
  columns: 2;
  column-gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.avis-bulles li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 22px;
  padding: 18px 20px;
  background: var(--fond-alt);
  border: 1px solid var(--trait);
  /* Le coin inferieur gauche droit fait la bulle de dialogue :
     trois coins arrondis, un carre. Plus sobre qu'une fleche. */
  border-radius: 14px 14px 14px 2px;
}

.avis-bulles blockquote { margin: 0 0 10px; }
.avis-bulles p { margin: 0 0 8px; }
.avis-bulles p:last-child { margin: 0; }
.avis-bulles .signature { font-size: .88em; color: var(--texte-doux); }

@media (max-width: 700px) {
  .avis-bulles { columns: 1; }
  /* L'accroche repasse SOUS le logotype : cote a cote, il ne
     resterait quelques centimetres a chacun. */
  .identite .accroche { padding-left: 0; border-left: 0; }
}

/* Le formulaire en grille (24/08/2026) : nom et telephone cote a
   cote, e-mail et message sur toute la largeur. En dessous de
   620 px on retombe sur une seule colonne — deux champs cote a
   cote sur un telephone ne laissent la place ni au libelle ni a
   la saisie. */
.champs-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  max-width: 620px;
}
.champs-grille .pleine-largeur { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .champs-grille { grid-template-columns: 1fr; }
}

/* =========================================================
   Le calendrier de prise de rendez-vous (24/08/2026)
   ---------------------------------------------------------
   Sept colonnes egales, la semaine commencant le lundi. Les
   cases sont carrees par aspect-ratio et non par une hauteur
   fixe : elles suivent donc la largeur disponible, du telephone
   a l'ecran large, sans requete media pour la grille elle-meme.

   Trois etats a distinguer d'un coup d'oeil, sans couleur
   puisque la charte est en noir et blanc :
     disponible   fond blanc, bordure franche, chiffre noir
     indisponible fond gris tres clair, chiffre pale, pas de bordure
     choisi       fond noir, chiffre blanc
   La bordure est donc le signe du « cliquable », et le
   remplissage celui du « choisi ».
   ========================================================= */
.cal { max-width: 420px; }

.cal-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cal-mois { font-size: 1.05em; text-transform: capitalize; }

.cal-nav {
  border: 1px solid var(--trait);
  background: #fff;
  color: var(--texte);
  font-size: 1.2em;
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
  border-radius: 2px;
}
.cal-nav:hover:not(:disabled) { background: var(--texte); color: #fff; border-color: var(--texte); }
/* Desactive et non masque : la place reste occupee, le titre ne saute pas. */
.cal-nav:disabled { opacity: .28; cursor: default; }

.cal-sem, .cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-sem span {
  text-align: center;
  font-size: .72em;
  letter-spacing: .08em;
  color: var(--texte-doux);
  padding-bottom: 4px;
}

.cal-case {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95em;
  border-radius: 2px;
}

/* les cases vides du debut de mois */
.cal-vide { visibility: hidden; }

/* un jour sans creneau, ou passe */
.cal-off { background: var(--fond-alt); color: #b4b4b4; }

/* un jour disponible : c'est la bordure qui dit « cliquable » */
.cal-grille .jour {
  background: #fff;
  border: 1px solid var(--texte);
  color: var(--texte);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.cal-grille .jour:hover { background: var(--fond-alt); }
.cal-grille .jour.actif { background: var(--texte); color: #fff; }
.cal-grille .jour:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }

.cal-pied { font-size: .85em; color: var(--texte-doux); margin: 12px 0 0; }