/* Feuille de style unique du site.
   Les couleurs sont declarees une fois ici et reprises partout ; changer la
   palette d'un site revient a changer ces quelques lignes. */

:root {
  /* Les deux couleurs du logo, relevees dans le fichier : le vert profond de
     la goutte et l'olive de la serrure. Le premier porte le texte et les
     liens — 11:1 sur le fond creme ; le second ne sert qu'a decorer, il ne
     contraste pas assez (3,4:1) pour du texte courant. */
  --fond: #f7f5f0;
  --fond-carte: #ffffff;
  --texte: #24261f;
  --texte-doux: #4f5a52;
  --accent: #1f3a33;       /* la goutte du logo */
  --accent-olive: #6e8f47;       /* la serrure du logo */
  --accent-olive-fond: #445f28;  /* le meme, assombri pour porter du texte */
  --accent-clair: #e8eee0;
  --bord: #e2e0d8;
  --rayon: 12px;
  --largeur: 46rem;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Le site est CLAIR, pour tout le monde : les couleurs sont celles du logo,
     et la mise en page en bandeaux repose sur un accent fonce. Sans cette
     ligne, le navigateur d'un visiteur en theme sombre peindrait les champs
     et les ascenseurs en sombre au milieu d'une page claire.

     Ancien commentaire, garde pour memoire :
     Dit au navigateur que le site sait s'afficher dans les deux themes. Sans
     cette ligne, il peint les champs de formulaire, les listes deroulantes et
     les ascenseurs en clair meme sur fond sombre : un champ de saisie blanc au
     milieu d'une page noire. Defaut trouve sur au-gre-des-petales.be le
     21/09/2026, sur le champ de quantite du formulaire de commande. */
  color-scheme: light;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1rem;
}

main.conteneur { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

h1, h2 { line-height: 1.2; font-weight: 650; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--accent-clair);
  padding: .1em .35em;
  border-radius: 4px;
}

/* En-tete ------------------------------------------------------------- */
.entete {
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bord);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--texte);
  text-decoration: none;
}

/* Le nom, puis la ligne qui le precise : « Mon commerce » / « atelier de
   reparation · Chastre ». Le second disparait s'il n'est pas renseigne. */
.marque__nom { font-weight: 700; }
.marque__sous {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu__liste {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__liste a {
  text-decoration: none;
  color: var(--texte-doux);
  padding: .2rem 0;
}

.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--texte);
  border-bottom: 2px solid var(--accent);
}

/* Le bouton n'apparait que sur petit ecran, et seulement si le JS a pris la
   main : sans JS, le menu reste visible. */
.menu__bouton { display: none; }

@media (max-width: 34rem) {
  .menu__bouton[hidden] { display: none; }
  .menu__bouton {
    display: block;
    font: inherit;
    color: var(--texte);
    background: var(--accent-clair);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .35rem .8rem;
    cursor: pointer;
  }
  .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; gap: .4rem; }
}

/* Contenu ------------------------------------------------------------- */
.hero__accroche {
  font-size: 1.15rem;
  color: var(--texte-doux);
  max-width: 34rem;
}

.reperes { margin: 0; }
.reperes dt { margin-top: .9rem; }
.reperes dd { margin: .15rem 0 0; color: var(--texte-doux); }

.bouton {
  display: inline-block;
  margin-top: 1rem;
  padding: .55rem 1.1rem;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--fond-carte);
  text-decoration: none;
  font-weight: 600;
}

/* Pied ---------------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--bord);
  padding: 1.25rem 0;
  color: var(--texte-doux);
  font-size: .9rem;
}

.pied p { margin: 0; }

.pied__barre {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}

/* Version et date de compilation : presentes mais discretes. Pour les retirer
   d'un site livre au client, supprimer ce bloc et le paragraphe correspondant
   dans templates/partials/pied.html. */
.pied__version {
  font-size: .8rem;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

/* En-tete collant : la page est longue, on garde la navigation sous la main
   sans devoir remonter.
   max-height : sur telephone, le menu deplie pourrait depasser l'ecran ; il
   devient defilant plutot que de tout recouvrir. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  max-height: 100vh;
  overflow-y: auto;
}

/* Une cible d'ancre ne doit pas se retrouver cachee derriere l'en-tete. */
:target { scroll-margin-top: 6rem; }


/* ---------- le fond de page ---------- */

/* Trois halos de la couleur d'accent, poses derriere toute la page. Ils
   rompent la monotonie d'un aplat sans rien couter : ni image, ni requete,
   quelques lignes de style. Et comme ils sont faits de « var(--accent) », ils
   prennent la couleur de chaque client sans qu'on y touche.

   Une couche fixe plutot que « background-attachment: fixed » : Safari sur
   iPhone gere mal ce dernier — il repeint la page a chaque mouvement du doigt.
   Ici la couche est posee une fois, derriere le contenu (z-index: -1), et
   n'intercepte aucun clic (pointer-events: none).

   Les trois pourcentages donnent l'intensite. Les baisser pour un fond plus
   sage, les monter pour un fond plus present : c'est le seul reglage. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50rem 35rem at 100% 15%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(55rem 38rem at 0% 100%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}

/* ---------- la page d'accueil ---------- */

/* Les listes d'arguments : une puce par promesse, le titre en gras devant.
   Les puces rondes par defaut font une liste de courses ; un filet a gauche
   tient mieux des paragraphes de deux lignes. */
.garanties {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}

.garanties li {
  border-left: 3px solid var(--accent-olive);
  padding: .1rem 0 .1rem 1rem;
  margin: 0 0 1rem;
}

.garanties li strong { color: var(--texte); }

/* Une page de texte : mentions legales. La largeur est deja limitee par le
   conteneur, mais les titres intermediaires ont besoin d'air. */
.texte-long h2 { margin-top: 2rem; font-size: 1.15rem; }

/* Le lien de courriel recompose par site.js : il doit rester lisible avant
   comme apres, donc pas de police a chasse fixe. */
.courriel { word-break: break-word; }

/* Le symbole du logo, a gauche du nom. Hauteur fixee, largeur libre : le
   dessin est carre, mais autant ne rien contraindre. */
.marque__logo {
  flex: none;
  height: 44px;
  width: auto;
}

.marque__texte { display: flex; flex-direction: column; }

@media (max-width: 34rem) {
  .marque__logo { height: 38px; }
}


/* ---------- les bandeaux ---------- */

/* Chaque section se peint d'un bord a l'autre de l'ecran et ramene son texte a
   une largeur lisible grace au conteneur qu'elle porte. L'alternance clair /
   vert profond donne le rythme de la page : c'est elle qui remplace les photos
   d'un modele d'agence, pour quelques centaines d'octets.

   Le bandeau clair n'a PAS de fond : les halos poses derriere la page
   transparaissent. Le sombre les couvre, et c'est voulu. */
.bande {
  padding: clamp(2.75rem, 7vw, 5rem) 0;
}

.bande + .bande { border-top: 1px solid var(--bord); }

.bande--sombre {
  background: var(--accent);
  color: #d2dcc9;          /* 8,7:1 — lisible sans eblouir */
  border-top: none;
}

.bande--sombre + .bande { border-top: none; }
.bande--sombre h2 { color: #e3e9dd; }          /* 9,9:1 */
.bande--sombre strong { color: #e3e9dd; }
.bande--sombre a { color: var(--accent-olive); }
.bande--sombre .note,
.bande--sombre .bande__pied { color: #aab5a2; }   /* 5,8:1 : en retrait */
.bande--sombre .garanties li { border-left-color: var(--accent-olive); }
.bande--sombre .reperes dd { color: #aab5a2; }
.bande--sombre .realisations li { border-bottom-color: #35514a; }

/* Le premier titre d'un bandeau ne doit pas ajouter sa marge au rembourrage. */
.bande h2:first-child { margin-top: 0; }
.bande > .conteneur > :last-child { margin-bottom: 0; }

/* La phrase qui ferme un bandeau : plus discrete que le corps. */
.bande__pied {
  margin-top: 1.75rem;
  font-size: .95rem;
  color: var(--texte-doux);
}

/* ---------- l'ouverture ---------- */

.hero { padding-top: clamp(2.5rem, 8vw, 5.5rem); }

/* Le texte a gauche, le symbole a droite. Sous 52rem il n'y a plus la place :
   le symbole s'efface plutot que de reduire le titre. */
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 20em;
}

.hero__accroche {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 38rem;
}

/* Pale, et en dessous de tout : un motif, pas une illustration. */
.hero__symbole {
  width: clamp(7rem, 14vw, 11rem);
  height: auto;
  opacity: .14;
}

@media (max-width: 52rem) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__symbole { display: none; }
}

/* ---------- les trois services ---------- */

/* La liste de definitions devient trois cartes cote a cote. Le balisage reste
   un <dl> : c'est bien une liste de termes et de definitions, et un lecteur
   d'ecran doit continuer a l'entendre ainsi. */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.75rem 0 0;
}

.reperes dt {
  margin: 0 0 .4rem;
  font-weight: 650;
  font-size: 1.05rem;
  border-top: 3px solid var(--accent-olive);
  padding-top: .75rem;
}

.reperes dd { margin: 0; color: var(--texte-doux); }

/* ---------- les promesses, sur deux colonnes ---------- */

@media (min-width: 46rem) {
  .garanties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.25rem;
  }
}

/* ---------- les tarifs ---------- */

/* Deux montants, gros, plutot qu'un tableau a trois colonnes : c'est le
   chiffre qu'on vient chercher, pas la grille. */
.tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0 0;
}

.tarif {
  border: 1px solid #3a5a52;
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.tarif p { margin: 0; }

.tarif__nom {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-olive);
  font-weight: 650;
}

.tarif__montant {
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  margin: .4rem 0 .3rem !important;
  color: #e3e9dd;
}

.tarif__detail { color: #aab5a2; font-size: .95rem; }

.tarif__suite {
  margin-top: .9rem !important;
  padding-top: .9rem;
  border-top: 1px solid #3a5a52;
  font-weight: 650;
}


/* ---------- le bandeau olive ---------- */

/* Les deux verts s'inversent le temps d'un bandeau : l'olive passe au fond, et
   c'est lui qui porte les tarifs. Trois bandeaux sombres d'affilee finissaient
   par se confondre ; celui-ci tranche sans sortir de la charte.

   L'olive du logo est trop clair pour un fond de texte — 4,1:1 au mieux. Il est
   donc assombri jusqu'a #445f28, ou les trois niveaux tiennent de 4,8 a 6,4:1. */
.bande--olive {
  background: var(--accent-olive-fond);
  color: #dde7cf;
  border-top: none;
}

.bande--olive + .bande { border-top: none; }
.bande--olive h2 { color: #eef3e6; }
.bande--olive .bande__pied { color: #c9d7b6; }
.bande--olive .tarif { border-color: #5f7d3f; }
.bande--olive .tarif__nom { color: #cfe0ac; }
.bande--olive .tarif__montant { color: #eef3e6; }
.bande--olive .tarif__detail { color: #c9d7b6; }
.bande--olive .tarif__suite { border-top-color: #5f7d3f; }