/* ===========================================================================
   Feuille de style du site public Lyova Taches (accueil / boutique / telecharger).
   Charte « papier kraft & post-it » : fond papier, titres manuscrits (Caveat),
   texte en Inter, cartes legerement inclinees avec un bout de scotch colore.

   Les polices sont servies par NOTRE serveur (voir @font-face ci-dessous) :
   aucune requete vers Google, le site tient sa promesse « aucun tiers » et
   s'affiche a l'identique meme sans acces Internet.
   =========================================================================== */

/* Polices du site, servies par NOTRE serveur (aucune requete vers Google).
   Le site tient ainsi sa promesse « aucun tiers », et le rendu reste
   identique meme sans acces Internet.
   Polices variables : un seul fichier couvre toute la plage de graisses.
   Regenerer avec scratchpad/polices.mjs si besoin. */

@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;src:url('/polices/caveat.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/polices/inter.woff2') format('woff2')}

:root{
  --paper:      #EFEAE0;
  --kraft:      #E4DCC8;
  --card:       #FBF8F1;
  --ink:        #3A3226;
  --ink-soft:   #6B6250;
  --line:       #C9BFAA;

  --yellow:     #F0D976; --yellow-ink:#4A3B12; --yellow-pin:#B8934A;
  --blue:       #A8CDE0; --blue-ink:  #173442; --blue-pin:  #4C7A93;
  --pink:       #D98B87; --pink-ink:  #4A1F1C; --pink-pin:  #8F4A46;
  --green:      #B7C99A; --green-ink: #2E3B1C; --green-pin: #5C7A3F;

  --rayon: 7px;
  --rayon-lg: 10px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.cadre{ max-width:1040px; margin:0 auto; padding:0 24px; }

h1,h2,h3{
  font-family:'Caveat', cursive;
  font-weight:700;
  color:var(--ink);
  margin:0 0 0.4em;
  line-height:1.12;
}
h2{ font-size:2rem; }
h3{ font-size:1.5rem; }

p{ color:var(--ink-soft); margin:0 0 1em; }

a{ color:inherit; text-decoration:none; }

header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:10;
}
.nav{
  display:flex; align-items:center; gap:22px;
  padding:16px 24px;
}
.marque{
  display:flex; align-items:center; gap:8px;
  font-family:'Caveat', cursive;
  font-size:1.6rem;
  font-weight:700;
  margin-right:auto;
}
.marque img{ width:26px; height:26px; }
.marque b{ font-weight:700; }

.nav .lien{
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-soft);
  padding:6px 2px;
  position:relative;
}
.nav .lien:hover{ color:var(--ink); }
.nav .lien[aria-current="page"]{ color:var(--ink); }
.nav .lien[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:3px; border-radius:2px;
  background:var(--yellow);
  transform:rotate(-1.5deg);
}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter', sans-serif;
  font-size:13.5px; font-weight:600;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .12s ease, background .15s ease;
}
.btn:hover{ transform:rotate(-0.6deg) translateY(-1px); }
.btn-plein{ background:var(--ink); color:var(--paper); }
.btn-plein:hover{ background:#4a4032; }
.btn-ligne{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ligne:hover{ border-color:var(--ink); }
.btn[aria-disabled="true"]{
  opacity:.5; pointer-events:none; transform:none;
}

.heros{ padding:56px 0 8px; }
.surtitre{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:.04em;
  color:var(--blue-pin);
  background:var(--blue);
  padding:3px 10px;
  border-radius:4px;
  transform:rotate(-2deg);
  margin-bottom:14px;
}
.chapeau{
  max-width:560px;
  font-size:1rem;
  color:var(--ink-soft);
}

.lever{ opacity:0; animation:lever .5s ease forwards; }
.lever-2{ animation-delay:.05s; }
.lever-3{ animation-delay:.1s; }
.lever-4{ animation-delay:.15s; }
@keyframes lever{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .lever{ animation:none; opacity:1; }
}

.grille{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:26px;
  padding:28px 0 12px;
}
.dl-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:26px;
}

.carte{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--rayon-lg);
  padding:26px 22px 22px;
  position:relative;
  box-shadow:0 1px 0 rgba(58,50,38,.04);
}
.carte::before{
  content:"";
  position:absolute; top:-8px; left:24px;
  width:52px; height:16px;
  background:var(--yellow);
  opacity:.85;
  transform:rotate(-3deg);
  border-radius:2px;
}
.grille .carte:nth-child(2)::before,
.dl-grille .carte:nth-child(2)::before{ background:var(--blue); transform:rotate(2deg); left:auto; right:24px; }
.grille .carte:nth-child(3)::before{ background:var(--pink); }
.grille .carte:nth-child(4)::before{ background:var(--green); transform:rotate(2deg); left:auto; right:24px; }

.carte:nth-child(odd){ transform:rotate(-0.4deg); }
.carte:nth-child(even){ transform:rotate(0.4deg); }

.icone{ font-size:1.7rem; margin-bottom:6px; }

.badge{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:600;
  color:var(--yellow-ink);
  background:var(--yellow);
  padding:3px 9px;
  border-radius:4px;
  transform:rotate(-2deg);
  margin-bottom:10px;
}
.badge.ambre{ background:var(--pink); color:var(--pink-ink); }
.badge.avenir{ background:var(--green); color:var(--green-ink); }

.carte h3{ font-size:1.4rem; margin-bottom:8px; }
.carte p{ font-size:13.5px; }
.carte ol, .carte ul{
  margin:0 0 18px; padding-left:20px;
  font-size:13px; color:var(--ink-soft);
}
.carte li{ margin-bottom:6px; }

.dl-note{
  font-family:'Inter', sans-serif;
  font-size:12px; color:var(--ink-soft);
  margin:10px 0 0;
}

.prix{
  font-family:'Caveat', cursive;
  font-size:2rem; font-weight:700;
  color:var(--ink);
  margin:6px 0 14px;
}
.prix small{
  font-family:'Inter', sans-serif;
  font-size:12px; font-weight:500;
  color:var(--ink-soft);
}

.avis-demo{
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--pink-ink);
  background:var(--pink);
  border-radius:6px;
  padding:10px 16px;
  margin:0 0 6px;
  transform:rotate(-0.5deg);
}

.bandeau{
  margin:40px 0 56px;
  padding:34px 28px;
  background:var(--kraft);
  border-radius:var(--rayon-lg);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.bandeau h2{ margin:0; font-size:1.7rem; }

footer{
  border-top:1px solid var(--line);
  padding:22px 0 40px;
}
footer .cadre{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px;
  font-family:'Inter', sans-serif;
  font-size:12.5px; color:var(--ink-soft);
}
footer a{ color:var(--ink-soft); }
footer a:hover{ color:var(--ink); }

@media (max-width:600px){
  .nav{ flex-wrap:wrap; row-gap:10px; }
  .bandeau{ flex-direction:column; align-items:flex-start; }
}