/* lisieresubtil.com
   Par-dessus la feuille du portfolio (/assets/style.css, copiée à la publication depuis
   /root/portfolio-site). Le portfolio est papier et encre ; l'accueil ajoute une palette
   hiérarchisée : le vert profond porte l'appel et la bande des atouts, l'ocre marque les
   repères (sur-titres, numéros, cadre du portrait), les cartes prennent chacune une teinte
   pâle, l'encre garde le texte. */

:root {
  --vert-fonce: #1b4332;
  --vert: #2d6a4f;
  --ocre: #d4a843;
  --ocre-pale: #f6e7c1;
  --vert-pale: #d8ead9;
  --terre: #b5522f;
  --terre-pale: #f4d9cf;
  --bleu: #2f5d8a;
  --bleu-pale: #dbe6f0;
  --mauve: #6b4c8a;
  --mauve-pale: #e9dff0;
}

.barre-titre { color: var(--vert-fonce); }

.sur-titre {
  margin: 0 0 0.9rem;
  color: var(--ocre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sur-titre--centre { text-align: center; }

/* ---------- présentation ---------- */

.accueil { padding-top: clamp(1.5rem, 5vh, 3.5rem); }

.accueil-grille {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Sans portrait (retiré par Vie le 04/09), l'accroche se compose sur deux colonnes
   alignées sous « Mon portfolio » : le titre et son chapeau à gauche, les points et
   les boutons à droite. Tout reste sur le pas de 26 px. */
@media (min-width: 60rem) {
  .accueil { max-width: none; padding-inline: var(--marge); }
  .accueil-grille { grid-template-columns: 1.2fr 1fr; gap: 0 clamp(3rem, 6vw, 6rem); }
  .accueil-suite { padding-top: var(--pas); }
}


.accueil-titre {
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--vert-fonce);
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

/* Les deux mots qui comptent, soulignés d'un trait ocre posé derrière la ligne. */
.accueil-titre mark {
  background: linear-gradient(transparent 62%, var(--ocre) 62%, var(--ocre) 92%, transparent 92%);
  color: inherit;
  padding: 0 0.08em;
}

.accueil-chapeau {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  max-width: 40ch;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
}

/* Le bouton plein : dans la page, l'appel principal a le vert en fond, les autres
   boutons gardent leur contour. */
.bouton-wa--plein {
  --fond: var(--vert);
  background: var(--fond);
  color: var(--papier);
  font-weight: 500;
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
}
.bouton-wa--plein::before { background: var(--vert-fonce); }
.bouton-wa--plein:hover, .bouton-wa--plein:focus-visible { color: var(--papier); border-color: var(--vert-fonce); }

/* ---------- les quatre points, compacts sous l'accroche ----------
   Un carré de couleur par point, la même famille que l'ocre du cadre : de la couleur
   sans une bande entière, pour que la grille des sites arrive vite. */

.points {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 0;
  max-width: 44ch;
}
.points li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--accent, var(--vert));
}
.point--ocre  { --accent: var(--ocre); }
.point--vert  { --accent: var(--vert); }
.point--bleu  { --accent: var(--bleu); }
.point--terre { --accent: var(--terre); }
.point--mauve { --accent: var(--mauve); }

/* ---------- l'entrée de la grille ---------- */

.grille-titre {
  margin: clamp(3rem, 7vh, 5rem) var(--marge) clamp(1rem, 2.5vw, 1.75rem);
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  color: var(--vert-fonce);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Les deux boutons de l'accroche : le plein appelle, le second mène aux témoignages. */
.accueil-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.bouton-wa--second {
  --fond: var(--vert);
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
  font-weight: 500;
}

/* Les titres du bas suivent la même hiérarchie. */
.temoignages-titre, .final-titre { color: var(--vert-fonce); }
.temoin-nom { color: var(--vert); }

/* ---------- mentions légales, repliées dans le pied ---------- */

.pied-mentions {
  flex-basis: 100%;
  font-size: 0.75rem;
}
.pied-mentions summary {
  cursor: pointer;
  color: var(--encre-douce);
  list-style: none;
  border-bottom: 1px solid transparent;
  display: inline;
}
.pied-mentions summary::-webkit-details-marker { display: none; }
.pied-mentions summary:hover { color: var(--encre); border-color: var(--trait); }
.pied-mentions p { margin: 0.6rem 0 0; max-width: 70ch; line-height: 1.5; }

/* ---------- le texte écrit sur la trame ----------
   La trame du papier a un pas de 26 px (--pas dans la feuille du portfolio). Pour que le
   texte ait l'air écrit dessus, tout le haut de page suit ce pas : interlignes de 26 ou
   52 px, marges et hauteurs de boutons en multiples de 26. La trame est décalée de 20 px
   vers le bas : c'est là que tombe la ligne de base d'Inter entre 15 et 19 px dans une
   ligne de 26, donc le trait passe juste sous les lettres. Les blocs que précède une image
   de hauteur fluide sont recalés par accueil.js (attribut data-caler). */

body { background-position: -1px 20px; }

.barre { padding-top: var(--pas); padding-bottom: var(--pas); }
.barre-titre { line-height: calc(var(--pas) * 2); }

.accueil { padding-top: var(--pas); }
.accueil-grille { align-items: start; gap: 0; }

.sur-titre { line-height: var(--pas); margin: 0; }

.accueil-titre {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  line-height: calc(var(--pas) * 2);
  margin: 0 0 var(--pas);
}
.accueil-chapeau {
  font-size: 1.2rem;
  line-height: var(--pas);
  margin: 0 0 var(--pas);
}

.points { margin: 0 0 var(--pas); }
.points li { padding: 0 0 0 1.5rem; line-height: var(--pas); }
.points li::before { top: calc(var(--pas) / 2 - 0.3rem); }

.accueil-boutons { margin: 0; }
.bouton-wa--plein, .bouton-wa--second {
  height: calc(var(--pas) * 2);
  padding-top: 0;
  padding-bottom: 0;
}

.grille-titre { line-height: calc(var(--pas) * 2); margin-bottom: var(--pas); }

/* Le bouton de la barre tient dans deux pas, sinon il pousse tout le haut de page de
   quelques pixels hors de la trame. Sur téléphone il reste une pastille ronde. */
.bouton-wa--barre { height: calc(var(--pas) * 2); padding-top: 0; padding-bottom: 0; }
@media (max-width: 34rem) {
  .bouton-wa--barre { width: calc(var(--pas) * 2); padding: 0; justify-content: center; }
}
/* Sur téléphone le titre remplit ses lignes de 52 px au lieu d'y flotter. */
.accueil-titre { font-size: clamp(2.5rem, 4.4vw, 3rem); }

/* Une seule épaisseur de trait sur la trame : le portfolio marque une ligne de coupe plus
   forte tous les huit carreaux, Vie la retire ici pour la lisibilité du texte posé dessus. */
body {
  background-image:
    linear-gradient(to right, var(--trame) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trame) 1px, transparent 1px);
  background-size: var(--pas) var(--pas);
}

/* « Mon portfolio » souligné d'ocre, comme « sur mesure » dans l'accroche. */
.barre-title, .barre-titre {
  text-decoration: underline;
  text-decoration-color: var(--ocre);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.1em;
}


/* Les deux mots soulignés restent sur la même ligne. */
.accueil-titre mark { white-space: nowrap; }