/*
 * Styles communs à toutes les pages : couleurs, en-tête, menu, bloc « Un renseignement ? », pied de page.
 * Les styles propres à une page sont dans assets/css/<page>.css.
 */

:root {
  --creme: #FBF7F1;
  --creme-clair: #FFFDF9;
  --beige: #F3ECE2;
  --encre: #3A3634;
  --encre-fonce: #2E2A28;
  --texte: #4A4644;
  --rose: #E4598E;
  --framboise: #C2466F;
  --vert: #A5C34F;
  --turquoise: #3D9D97;
  --turquoise-fonce: #2C7772;
  --ocre: #F0A950;
  --ombre-polaroid: 0 20px 40px rgba(80, 60, 40, .16);
}

body {
  margin: 0;
  background: var(--creme);
  font-family: Figtree, sans-serif;
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--framboise); text-decoration: none; }
a:hover { color: var(--turquoise-fonce); }

.page { background: var(--creme); min-height: 100vh; overflow-x: clip; }

/* ---------- En-tête et menu ---------- */

.entete { position: relative; background: var(--creme-clair); z-index: 2; }
.entete-int {
  max-width: 1040px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.logo img { height: 44px; display: block; }

.menu-bouton {
  display: none; width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  align-items: center; justify-content: center; color: var(--encre); padding: 0;
}
.menu-bouton [hidden] { display: none; }
.menu { display: flex; gap: 28px; font-family: 'Patrick Hand', cursive; font-size: 21px; flex-wrap: wrap; }
.menu a {
  color: var(--c); padding: 0 4px;
  background: linear-gradient(transparent 55%, var(--t) 55%) no-repeat left / 0% 100%;
  transition: background-size .3s;
}
.menu a:hover, .menu a[aria-current="page"] { background-size: 100% 100%; color: var(--c); }

/* Décor sous l'en-tête : deux fines bandes (crème puis couleur) */
.entete-bande { position: absolute; left: 0; right: 0; bottom: -39px; width: 100%; height: 40px; display: block; }

/* Variante de la page d'accueil : l'en-tête se termine par une vague */
.entete--vague { z-index: auto; padding-bottom: 36px; }
.entete-vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40px; display: block; }

/* ---------- Petits éléments réutilisés ---------- */

/* Les trois pastilles rose / vert / turquoise en bas des polaroids */
.points { position: absolute; right: 14px; bottom: 10px; display: flex; gap: 6px; pointer-events: none; }
.points i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.points i:nth-child(1) { background: var(--rose); }
.points i:nth-child(2) { background: var(--vert); }
.points i:nth-child(3) { background: var(--turquoise); }

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vague en haut d'une section, qui fait la jonction avec la section précédente */
.vague-haut { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 80px; display: block; pointer-events: none; }

@keyframes cemSwing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Petit titre manuscrit au-dessus des titres de section */
.surtitre { font-family: Delius, sans-serif; font-size: 26px; }
.surtitre--rose { color: var(--framboise); }
.surtitre--turquoise { color: var(--turquoise); }

/* Bouton arrondi rose */
.bouton-rose {
  display: inline-block; background: var(--framboise); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: 999px; transition: all .2s;
}
.bouton-rose:hover { background: var(--turquoise-fonce); color: #fff; transform: translateY(-2px); }
.bouton-rose--petit { font-size: 14px; padding: 10px 18px; }

/* Bouton arrondi turquoise, pour « Prendre rendez-vous » : le bleu-vert du logo, foncé pour que le texte blanc se lise bien */
.bouton-turquoise {
  display: inline-flex; align-items: center; gap: 8px; background: var(--turquoise-fonce); color: #fff;
  font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 999px; transition: all .2s;
}
.bouton-turquoise:hover { background: var(--framboise); color: #fff; transform: translateY(-2px); }
.bouton-turquoise svg { flex-shrink: 0; }

/* Dans l'en-tête, à droite du menu ; libellé raccourci quand la place manque (« Rendez-vous », puis « RDV ») */
.entete-rdv { padding: 10px 18px; font-size: 14.5px; }
.entete-rdv-court, .entete-rdv-mini { display: none; }

/* ---------- Bloc « Un renseignement ? » ---------- */

.appel-vague { position: relative; padding-top: 72px; }
.appel-vague svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 72px; display: block; }
.appel { background: var(--turquoise); color: #fff; overflow: hidden; }
.appel-int {
  max-width: 1040px; margin: 0 auto; padding: 36px 24px 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative;
}
.appel h2 {
  margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: 28px; color: #fff;
  max-width: 640px; text-wrap: balance;
}
.appel p { margin: 0; font-size: 16px; }
.appel-bouton {
  margin-top: 4px; background: #fff; color: var(--turquoise-fonce); font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: 14px; transition: all .2s;
}
.appel-bouton:hover { background: #FCE3EC; color: var(--framboise); transform: translateY(-2px); }
.appel-dessin {
  position: absolute; bottom: 10px; pointer-events: none;
  filter: brightness(0) invert(1); opacity: .9;
}
.appel-dessin--droite { right: 40px; width: 70px; transform: rotate(-6deg); }
.appel-dessin--gauche { left: 40px; width: 46px; transform: rotate(6deg); }

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

.pied { color: var(--encre); background: #FCF7F1; }
.pied-int {
  max-width: 1040px; margin: 0 auto; padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px;
}
.pied a.pied-mentions { color: var(--encre); }
/* Adresse · téléphone (sur téléphone : le numéro passe dessous, sans le point) */
.pied-coordonnees { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.pied a.pied-telephone { color: var(--encre); font-weight: 600; white-space: nowrap; }
.pied a.pied-telephone:hover { color: var(--framboise); }
.reseaux { display: flex; gap: 10px; }
.reseaux a {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(58, 54, 52, .08); color: var(--encre);
  display: flex; align-items: center; justify-content: center; transition: all .25s;
}
.reseaux a:hover { color: #fff; transform: translateY(-3px); }
.reseaux a.instagram:hover { background: var(--rose); }
.reseaux a.facebook:hover { background: var(--turquoise); }
.reseaux a.pinterest:hover { background: var(--vert); }
.reseaux a.youtube:hover { background: #E8B04B; }

/* ---------- Page en construction (temporaire) ---------- */

.chantier { max-width: 760px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.chantier h1 { font-family: Delius, sans-serif; color: var(--encre); }

/* ---------- Écrans moyens, tablettes et téléphones ---------- */

/* En-tête sur une seule ligne : « Rendez-vous » en court et menu un peu resserré */
@media (max-width: 1099px) {
  .menu { gap: 20px; }
  .entete-rdv-long { display: none; }
  .entete-rdv-court { display: inline; }
}
/* Plus étroit : bouton Menu, « Rendez-vous » à côté ; le menu ouvert passe dessous */
@media (max-width: 980px) {
  .entete-int { column-gap: 10px; }
  .entete-rdv { order: 1; margin-left: auto; }
  .menu-bouton { display: flex; order: 2; }
  .menu { display: none; flex-direction: column; width: 100%; gap: 14px; padding: 6px 0 4px; order: 3; }
  .menu[data-ouvert="true"] { display: flex; }
}

@media (max-width: 760px) {
  .mob-masque { display: none !important; }
  .logo img { height: 40px; }
  .entete-rdv { padding: 9px 14px; font-size: 14px; gap: 6px; }
  .pied-coordonnees { flex-direction: column; align-items: flex-start; }
  .pied-separateur { display: none; }
  .pied a.pied-telephone { display: inline-block; padding: 10px 0; }
}
/* Téléphones : logo, « RDV » et bouton Menu tiennent toujours sur une ligne */
@media (max-width: 480px) {
  .entete-int { column-gap: 8px; }
  .logo img { height: 36px; }
  .entete-rdv-court { display: none; }
  .entete-rdv-mini { display: inline; }
}
@media (max-width: 340px) {
  .logo img { height: 30px; }
}