/* Site vitrine Banal : charte « Galet » (voir CLAUDE.md et brand/tokens.ts).
   Aplats, coins arrondis, trait épais d'encre. Pas de dégradé, pas d'ombre, pas de texture.
   Tomate : une seule touche (le manche de la loupe, dans l'en-tête de page). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #17171C;
  --encre-douce: #4A4E57;
  --galet: #C5CAD3;
  --galet-clair: #E3E6EB;
  --tomate: #FF5233;
  --fond: #F3F4F6;
  --blanc: #FFFFFF;

  --argent: #FFD43B;
  --argent-fond: #FFF4C7;
  --cerveau: #FF8FB3;
  --cerveau-fond: #FFE3EC;
  --objets: #34D399;
  --objets-fond: #D6F7EA;
  --regles: #4C7DFF;
  --regles-fond: #E0E8FF;

  --trait: 4px;
  --rayon: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cadre { width: min(1120px, 100% - 48px); margin-inline: auto; }

a:focus-visible { outline: 4px solid var(--regles); outline-offset: 3px; border-radius: 8px; }

/* ——— En-tête ——— */

.entete { padding: 20px 0; }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; line-height: 0; }
.logo img { width: 132px; height: auto; }

.bouton {
  display: inline-block;
  padding: 0.8em 1.5em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.bouton:hover { transform: translateY(-3px) rotate(-1deg); background: var(--argent); color: var(--encre); }
.bouton-petit { padding: 0.4em 1.1em; font-size: 1rem; }
.bouton-clair { background: var(--blanc); color: var(--encre); }

/* ——— Haut de page ——— */

.hero { padding: 32px 0 72px; }
.hero-grille { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 9vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.pastilles { display: flex; gap: 10px; margin: 28px 0 24px; }
.pastilles i { display: block; width: 26px; height: 26px; border: var(--trait) solid var(--encre); border-radius: 50%; }
.pastilles .argent { background: var(--argent); }
.pastilles .cerveau { background: var(--cerveau); }
.pastilles .objets { background: var(--objets); }
.pastilles .regles { background: var(--regles); }

.accroche { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.chapo { max-width: 34em; margin: 0 0 28px; color: var(--encre-douce); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Le Galet et la loupe (inline : les animations passent par le CSS). */
.scene { display: block; width: 100%; height: auto; overflow: visible; }

.trait { stroke: var(--encre); stroke-width: 7; stroke-linejoin: round; }
.trait.argent { fill: var(--argent); }
.trait.cerveau { fill: var(--cerveau); }
.trait.objets { fill: var(--objets); }
.trait.regles { fill: var(--regles); }
.trait.vide { fill: none; }

.g-corps { fill: var(--galet); }
.g-reflet { fill: var(--galet-clair); }
.g-blanc { fill: var(--blanc); }
.g-encre { fill: var(--encre); }
.g-trait { fill: none; stroke: var(--encre); stroke-width: 4; stroke-linecap: round; }

.manche { stroke: var(--tomate); stroke-width: 22; stroke-linecap: round; }
.lentille { fill: var(--blanc); fill-opacity: 0.55; stroke: var(--encre); stroke-width: 12; }

@keyframes souffle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 0.975); } }
@keyframes cligne { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.galet-vie { transform-box: fill-box; transform-origin: 50% 100%; animation: souffle 2.4s ease-in-out infinite; }
.yeux { transform-box: fill-box; transform-origin: 50% 50%; animation: cligne 4.8s infinite; }
.forme { animation: flotte 5s ease-in-out infinite; }
.f2 { animation-delay: -1.2s; }
.f3 { animation-delay: -2.4s; }
.f4 { animation-delay: -3.6s; }
.loupe-vie { transform-box: fill-box; transform-origin: 30% 30%; animation: balance 4.5s ease-in-out infinite; }

/* ——— Sections ——— */

.bloc { padding: 72px 0; }

h2 { margin: 0 0 28px; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.carte {
  background: var(--blanc);
  border: var(--trait) solid var(--encre);
  border-radius: var(--rayon);
  padding: 28px;
  transition: transform 0.2s;
}
.carte:hover { transform: translateY(-3px) rotate(-0.5deg); }
.carte p { margin: 0; }

.principe, .questions { background: var(--blanc); }
.principe .carte, .questions .carte { background: var(--fond); }

.etapes, .grille-piliers, .liste-questions { list-style: none; margin: 0; padding: 0; }
.etapes, .grille-piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.mini { display: block; width: 120px; height: auto; margin-bottom: 12px; }

.intro { margin: -12px 0 28px; color: var(--encre-douce); }

.pilier.argent { background: var(--argent); --fond-icone: var(--argent-fond); }
.pilier.cerveau { background: var(--cerveau); --fond-icone: var(--cerveau-fond); }
.pilier.objets { background: var(--objets); --fond-icone: var(--objets-fond); }
.pilier.regles { background: var(--regles); --fond-icone: var(--regles-fond); }
.icone { display: block; width: 64px; height: 64px; margin-bottom: 14px; fill: var(--fond-icone); stroke: var(--encre); stroke-width: 4; stroke-linejoin: round; }
.icone .vide { fill: none; }

.liste-questions { display: grid; gap: 16px; }
.liste-questions .carte { padding: 22px 28px; font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }

/* ——— Pied de page ——— */

.pied { padding: 48px 0 28px; background: var(--encre); color: var(--blanc); }
.pied-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pied img { display: block; width: 132px; height: auto; }
.pied p { margin: 0; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied-accroche { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.pied a { color: var(--blanc); font-weight: 700; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pied .copie { margin: 32px auto 0; font-size: 0.9rem; color: var(--galet); }

/* ——— Adaptations ——— */

@media (max-width: 820px) {
  .hero { padding-top: 16px; }
  .hero-grille { grid-template-columns: 1fr; gap: 24px; }
  .scene { max-width: 440px; margin-inline: auto; }
  .bloc { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}