/* portfolio.lisieresubtil.com
   Les captures occupent la page, le fond se voit à peine. Le nom d'un site paraît
   au survol de sa carte. La police de titre est Bona Nova SC, celle du mot « Bâtir »
   sur batir.lisieresubtil.com. */

:root {
  --papier: #faf8f4;
  --papier-creux: #f2eee7;
  --encre: #17161a;
  --encre-douce: #6b6862;
  --trait: #e0dbd2;
  --vert-wa: #1f7a4d;
  --marge: clamp(1rem, 3.5vw, 2.75rem);
  --joint: clamp(6px, 0.85vw, 12px);
  --trame: rgba(52, 76, 108, 0.10);
  --trame-forte: rgba(52, 76, 108, 0.22);
  --pas: 26px;
  --courbe: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Fond de papier à dessin : une trame fine tous les 26 px, une ligne de coupe tous les
   huit carreaux. Les traits sont posés en gradients répétés plutôt qu'en image, donc
   rien à télécharger et le rendu reste net à toute densité d'écran. */
body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    linear-gradient(to right, var(--trame-forte) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trame-forte) 1px, transparent 1px),
    linear-gradient(to right, var(--trame) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trame) 1px, transparent 1px);
  background-size:
    calc(var(--pas) * 8) calc(var(--pas) * 8),
    calc(var(--pas) * 8) calc(var(--pas) * 8),
    var(--pas) var(--pas),
    var(--pas) var(--pas);
  background-position: -1px -1px;
  color: var(--encre);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--encre); color: var(--papier); padding: 0.75rem 1.25rem;
}
.lien-evitement:focus { left: 0; }

/* ---------- barre du haut : le titre y tient lieu de marque ---------- */

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2.5vw, 1.75rem) var(--marge);
}

.barre-titre {
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.barre-titre a { text-decoration: none; }

.barre-liens {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
}

.barre-lien {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-douce);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--encre), var(--encre));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s;
}
.barre-lien:hover, .barre-lien:focus-visible { color: var(--encre); background-size: 100% 1px; }
.barre-lien[aria-current='page'] { color: var(--encre); background-size: 100% 1px; }

@media (max-width: 30rem) {
  .barre-lien { font-size: 0.6875rem; letter-spacing: 0.06em; }
}

/* ---------- bouton WhatsApp ---------- */

.bouton-wa {
  --fond: var(--encre);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--fond);
  border-radius: 999px;
  color: var(--fond);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bouton-wa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fond);
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bouton-wa:hover, .bouton-wa:focus-visible { color: var(--papier); }
.bouton-wa:hover::before, .bouton-wa:focus-visible::before { transform: translateY(0); }
.bouton-wa svg { width: 1.15em; height: 1.15em; flex: none; }

.bouton-wa--vert { --fond: var(--vert-wa); }

.bouton-wa--petit {
  padding: 0.6rem 1.1rem;
  font-size: 0.8125rem;
}
@media (max-width: 30rem) {
  .bouton-wa--petit { padding: 0.55rem; }
  .bouton-wa--petit span { display: none; }
  .bouton-wa--petit svg { width: 1.35em; height: 1.35em; }
}

/* ---------- les cartes, plein cadre ---------- */

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--joint);
  padding: var(--joint);
}

@media (min-width: 60rem) {
  .grille { grid-template-columns: 1fr 1fr; }
}

.carte {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--papier-creux);
  text-decoration: none;
  aspect-ratio: 16 / 10;
}

.carte-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le voile et le nom se lèvent ensemble au survol : la capture reste le sujet. */
.carte-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 14, 18, 0.62) 0%, rgba(15, 14, 18, 0.18) 38%, rgba(15, 14, 18, 0) 68%);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.carte-nom {
  position: absolute;
  left: clamp(1.1rem, 3vw, 2.25rem);
  right: clamp(1.1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 2.8vw, 2rem);
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: #fdfcfa;
  text-shadow: 0 1px 14px rgba(15, 14, 18, 0.45);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .carte:hover .carte-voile,
  .carte:focus-visible .carte-voile { opacity: 1; }
  .carte:hover .carte-nom,
  .carte:focus-visible .carte-nom { opacity: 1; transform: none; }
  .carte:hover .carte-image,
  .carte:focus-visible .carte-image { transform: scale(1.028); }
}

/* Un écran tactile ne survole rien : le nom reste posé, en retrait. */
@media (hover: none) {
  .carte-voile { opacity: 1; }
  .carte-nom { opacity: 1; transform: none; }
}

/* ---------- témoignages ---------- */

.temoignages {
  padding: clamp(4rem, 11vh, 7.5rem) var(--marge) 0;
}

.temoignages-titre {
  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;
  margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
}

.temoins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 1100px;
  margin-inline: auto;
}

.temoin { margin: 0; }

.temoin-cadre {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--courbe);
  background: var(--encre);
  transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.temoin-cadre video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--encre);
}
.temoin-cadre:hover { box-shadow: 0 18px 40px -18px rgba(23, 22, 26, 0.35); }

.temoin-lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: rgba(15, 14, 18, 0.12);
  cursor: pointer;
  transition: background 0.5s, opacity 0.4s;
}
.temoin-lecture::after {
  content: '';
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317161a'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 1.5rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.temoin-lecture:hover::after { transform: scale(1.08); }
.temoin-cadre.joue .temoin-lecture { opacity: 0; pointer-events: none; }

.temoin-nom {
  margin: 0.85rem 0 0;
  text-align: center;
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- appel final ---------- */

.final {
  padding: clamp(2rem, 5vh, 3.25rem) var(--marge) clamp(4rem, 11vh, 7rem);
  text-align: center;
}

/* La bulle marche à gauche du bouton : Vie derrière sa grenouille, en rond. */
.final-appel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 1.5rem);
}

.bulle {
  width: clamp(4rem, 9vw, 5.75rem);
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--papier);
  box-shadow: 0 10px 30px -14px rgba(23, 22, 26, 0.45);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bulle:hover { transform: rotate(-4deg) scale(1.04); }

/* La signature : Bona Nova SC rend les minuscules en petites capitales, ce qui donne à
   la ligne son air de mention gravée sans crier comme des majuscules pleines.
   Elle mesure 24,235 em dans cette police avec cet interlettrage, d'où le 3,6 vw qui la
   tient sur une seule ligne jusqu'aux petits téléphones. Au-delà de 533 px de large le
   plafond de 1,2 rem prend le relais. Changer le texte oblige à remesurer. */
.final-signature {
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: min(3.6vw, 1.2rem);
  letter-spacing: 0.055em;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--encre-douce);
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
}

.final-titre {
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
}

/* ---------- page Qui je suis ---------- */

.page {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

.qui {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-top: clamp(2rem, 6vh, 4rem);
}
@media (min-width: 60rem) {
  .qui { grid-template-columns: 1.05fr 1fr; }
  .qui-image { position: sticky; top: clamp(2rem, 6vh, 4rem); }
}

.qui-image { overflow: hidden; }
.qui-image img { width: 100%; }

.qui-titre {
  font-family: 'Bona Nova SC', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.qui-texte p { margin: 0 0 1.4em; max-width: 56ch; }
.qui-texte p:first-of-type {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}
.qui-texte strong { font-weight: 600; }

.qui-outils {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}
.qui-outils li {
  display: flex;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--trait);
  font-size: 0.9375rem;
}
.qui-outils b {
  flex: none;
  width: 6.5rem;
  font-weight: 500;
  color: var(--encre-douce);
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  text-transform: uppercase;
  padding-top: 0.2em;
}

/* ---------- pied de page ---------- */

.pied {
  border-top: 1px solid var(--trait);
  margin-inline: var(--marge);
  padding-block: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--encre-douce);
}
.pied a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.4s, color 0.4s; }
.pied a:hover { color: var(--encre); border-color: var(--trait); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ---------- entrée au défilement ---------- */

.monte-au-scroll {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.monte-au-scroll.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .monte-au-scroll { opacity: 1; transform: none; }
}