/* =========================================================
   LYS ENTRETIEN — feuille de style unique — version 5
   L'accueil tient sur un seul écran, sans défilement.
   Les pages intérieures (à domicile, bureaux, chantier, contact)
   utiliseront la même feuille.
   Conçue pour le téléphone d'abord. Safari iOS 15 et Chrome Android.
   ========================================================= */


/* ---------- 1. LES COULEURS ET LES POLICES ----------
   Tout le site pioche ses couleurs ici.
   Change une valeur à cet endroit et elle change partout. */

:root {
  --blanc:        #FFFFFF;
  --encre:        #12332E;  /* le texte, un vert très sombre */
  --encre-douce:  #4C635F;  /* les textes secondaires */
  --menthe:       #16786A;  /* les liens, les pastilles, le nom */
  --menthe-clair: #EAF6F2;  /* le fond général */
  --corail:       #C4564B;  /* accent rare : les prix */
  --filet:        #C9DED8;  /* les traits et les contours */

  /* Police d'affichage : un serif, choisi pour se distinguer des
     sites de nettoyage qui utilisent tous du sans-serif bleu. */
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino,
           Georgia, "Noto Serif", "Times New Roman", serif;

  /* Police de lecture : celle du téléphone, la plus lisible qui soit. */
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --marge: 20px;
}


/* ---------- 2. RÉGLAGES GÉNÉRAUX ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--menthe-clair);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--menthe); }

/* Le contour de sélection au clavier : obligatoire pour l'accessibilité. */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--menthe);
  outline-offset: 2px;
}


/* ---------- 3. LA PAGE D'ACCUEIL EN UN SEUL ÉCRAN ----------
   Les trois blocs (barre du haut, centre, bas) se répartissent la
   hauteur de l'écran. Le centre prend toute la place qui reste.
   Si le téléphone est vraiment petit, la page défile un peu :
   c'est voulu, ça vaut mieux qu'un texte coupé. */

.page-accueil {
  min-height: 100vh;
  min-height: -webkit-fill-available;  /* corrige la barre de Safari iOS */
  display: flex;
  flex-direction: column;
  padding: 0 var(--marge);
  position: relative;
  overflow-x: hidden;
}


/* ---------- 4. LE FOND ET LE VOILE ----------
   L'illustration est en fond d'écran, très éclaircie, pour que le
   texte reste lisible même en plein soleil. Le voile menthe s'efface
   au chargement : c'est le geste de l'essuyage, la signature du site.
   Pour supprimer l'animation, efface le bloc @keyframes essuyage
   et la ligne "animation:" dans .voile. */

.fond {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("images/fond-lys.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.3;             /* monte à 0.45 pour une image plus présente */
  z-index: 0;
  pointer-events: none;
}

.voile {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(120deg, #CFEBE2, #EAF6F2 60%, #FFFFFF);
  transform-origin: right center;
  animation: essuyage 1.05s cubic-bezier(0.65, 0, 0.2, 1) 0.15s both;
  z-index: 5;
  pointer-events: none;
}

@keyframes essuyage {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tout le contenu passe au-dessus du fond. */
.barre, .centre, .bas {
  position: relative;
  z-index: 2;
}


/* ---------- 5. LA BARRE DU HAUT ET LES PASTILLES ---------- */

.barre {
  flex: none;
  padding: 16px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo {
  font-family: var(--titre);
  font-size: 25px;
  letter-spacing: 0.18em;
  color: var(--menthe);
  text-decoration: none;
}

/* Les pastilles glissent au doigt si elles ne tiennent pas
   toutes sur la largeur de l'écran. */
.pastilles {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.pastilles::-webkit-scrollbar { display: none; }

.pastilles a {
  flex: none;
  text-decoration: none;
  color: var(--encre);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 15px;
  white-space: nowrap;
}


/* ---------- 6. LE CENTRE DE L'ÉCRAN ---------- */

.centre {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px 0;
}

.centre > * { margin: 0; }

.surtitre {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 14px;
}

/* Le nom en très grand. clamp() veut dire : jamais plus petit que
   54 px, jamais plus grand que 120 px, et entre les deux il s'adapte
   à la largeur de l'écran. */
.titre-marque {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(54px, 22vw, 120px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--menthe);
  animation: apparition 0.8s ease 0.6s both;
}

/* Le H1 de l'accueil porte les mots-clés ; il garde le style discret de la sous-marque. */
p.titre-marque { margin: 0.67em 0; }
h1.sous-marque { font-weight: 400; }

.sous-marque {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 10px;
  margin-bottom: 26px;
}

.phrase {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(21px, 6vw, 30px);
  line-height: 1.25;
  margin-bottom: 16px;
  max-width: 17em;
}

.explication {
  font-size: 16px;
  color: var(--encre-douce);
  max-width: 26em;
  margin-bottom: 22px;
}

/* Le numéro de téléphone : le seul vrai bouton de cet écran. */
.numero {
  display: inline-block;
  font-family: var(--titre);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--blanc);
  background: var(--menthe);
  border-radius: 999px;
  padding: 13px 28px;
}

.invitation {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 22px;
}


/* ---------- 7. LE BAS D'ÉCRAN ---------- */

.bas {
  flex: none;
  text-align: center;
  padding: 12px 0 20px;
}

.bas p { margin: 0; }

/* La liste des communes : c'est elle qui dit à Google où
   l'entreprise travaille. Ajoute ou retire un nom directement
   dans le texte, et fais-le aussi dans la fiche d'identité
   en haut du fichier HTML. */
.communes {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--menthe);
  line-height: 1.9;
  margin-bottom: 10px !important;
}

.devise {
  font-family: var(--titre);
  font-style: italic;
  font-size: 15px;
  color: var(--encre);
  margin-bottom: 8px !important;
}

.mentions {
  font-size: 11.5px;
  color: var(--encre-douce);
  line-height: 1.7;
}

.mentions a { color: var(--encre-douce); }


/* ---------- 8. LES GRANDS ÉCRANS ----------
   Sur tablette et ordinateur, la barre du haut se met sur une seule
   ligne : le nom à gauche, les pastilles à droite, comme un site
   classique. Le téléphone reste la référence. */

@media (min-width: 720px) {
  :root { --marge: 40px; }

  .barre {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
  }

  .logo { font-size: 28px; }

  .pastilles a { font-size: 16px; padding: 11px 20px; }

  .explication { font-size: 17.5px; }

  .communes { font-size: 12px; }
}


/* ---------- 9. MOUVEMENT RÉDUIT ----------
   Certaines personnes désactivent les animations dans les réglages
   de leur téléphone, souvent pour des raisons de santé. On les
   respecte : le voile disparaît, le nom s'affiche sans effet. */

@media (prefers-reduced-motion: reduce) {
  .voile { display: none; }
  .voile, .titre-marque { animation: none; }
}


/* =========================================================
   10. LES PAGES INTÉRIEURES
   (à domicile, bureaux, après travaux, contact)
   Ces pages-là défilent normalement : c'est elles qui portent
   le texte que Google va lire.
   ========================================================= */

/* Sur les pages intérieures, la barre du haut reste collée en
   haut de l'écran pendant qu'on descend. */
.page-interieure .barre {
  position: sticky;
  top: 0;
  background: var(--menthe-clair);
  border-bottom: 1px solid var(--filet);
  margin: 0 calc(var(--marge) * -1);
  padding-left: var(--marge);
  padding-right: var(--marge);
  z-index: 10;
}

.page-interieure {
  padding: 0 var(--marge);
  background: var(--menthe-clair);
}

/* La pastille de la page où l'on se trouve. */
.pastilles a.actif {
  background: var(--menthe);
  border-color: var(--menthe);
  color: var(--blanc);
}

.contenu { padding: 34px 0 10px; }

.contenu h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.12;
  margin: 0 0 16px;
  max-width: 16em;
}

.contenu h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 40px 0 14px;
}

.contenu h3 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 6px;
}

.contenu p { margin: 0 0 16px; }

.chapeau {
  font-size: 18px;
  color: var(--encre-douce);
  max-width: 34em;
}

/* Les listes à puces des prestations. */
.liste-taches {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  max-width: 34em;
}

.liste-taches li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
}

.liste-taches li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menthe);
}

/* Le bloc de prix mis en avant. */
.bloc-prix {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 22px;
  margin: 8px 0 20px;
  max-width: 34em;
}

.bloc-prix .montant {
  font-family: var(--titre);
  font-size: 34px;
  color: var(--corail);
  margin: 0 0 6px;
  line-height: 1.1;
}

.bloc-prix .montant small {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre-douce);
}

.bloc-prix p:last-child {
  margin-bottom: 0;
  font-size: 15.5px;
  color: var(--encre-douce);
}

/* Les questions fréquentes. */
.question {
  border-top: 1px solid var(--filet);
  padding: 18px 0;
  max-width: 34em;
}

.question p {
  margin: 0;
  color: var(--encre-douce);
}

/* Les liens vers les autres prestations, en fin de page. */
.autres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 30px;
}

.autres a {
  text-decoration: none;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 15px;
}

/* ---------- LE FORMULAIRE DES PAGES INTÉRIEURES ---------- */

.bloc-contact {
  border-top: 1px solid var(--filet);
  padding-top: 32px;
  margin-top: 40px;
}

.formulaire {
  display: flex;
  flex-direction: column;
  max-width: 34em;
}

.formulaire label {
  font-size: 14px;
  margin-bottom: 6px;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  font-family: var(--texte);
  font-size: 16px;  /* 16px minimum : en dessous, l'iPhone zoome tout seul */
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 13px 14px;
  margin-bottom: 18px;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.formulaire textarea { resize: vertical; }

.bouton-envoi {
  font-family: var(--texte);
  font-size: 16px;
  color: var(--blanc);
  background: var(--menthe);
  border: 1.5px solid var(--menthe);
  border-radius: 999px;
  padding: 15px 24px;
  cursor: pointer;
  margin-top: 6px;
}

.formulaire-note {
  font-size: 14px;
  color: var(--encre-douce);
  margin-top: 14px;
}

.formulaire-note-erreur {
  color: var(--corail);
  font-weight: 600;
}

.contacts-directs {
  margin-top: 30px;
  border-top: 1px solid var(--filet);
  max-width: 34em;
}

.contact-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: var(--encre);
}

.contact-ligne strong { color: var(--menthe); font-size: 16px; }

.contact-ligne span {
  font-size: 14.5px;
  color: var(--encre-douce);
  text-align: right;
  word-break: break-word;
}

/* ---------- LE PIED DES PAGES INTÉRIEURES ---------- */

.pied-interieur {
  border-top: 1px solid var(--filet);
  margin-top: 40px;
  padding: 26px 0 40px;
  font-size: 14px;
  color: var(--encre-douce);
}

.pied-interieur p { margin: 0 0 6px; }

.pied-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}

@media (min-width: 720px) {
  .contenu h2 { font-size: 32px; }
  .chapeau { font-size: 19px; }
}


/* =========================================================
   MISE EN PAGE COMMUNE À TOUTES LES PAGES
   ========================================================= */

body {
  padding: 0 var(--marge);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.vue[hidden] { display: none; }

/* La barre reste en haut sur toutes les vues. */
.barre {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--menthe-clair);
  border-bottom: 1px solid var(--filet);
  margin: 0 calc(var(--marge) * -1);
  padding-left: var(--marge);
  padding-right: var(--marge);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 20;
}

/* L'accueil occupe la hauteur restante de l'écran. */
.ecran-accueil {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.ecran-accueil .centre { flex: 1 1 auto; }

/* Le fond illustré n'apparaît que sur l'accueil. */
.fond { display: none; }
body.sur-accueil .fond { display: block; }