/* =========================================================
   SNTS — base.css
   ========================================================= */

:root{
    /* Canvas */
    --bg: #fbf7ee;               /* papier */
    --text: #0b0b0f;             /* encre */
    --text-light: #f8f7f2;
    --muted: rgba(11,11,15,.68);
  
    /* Accents (zine) */
    --accent:   #00d37f;         /* vert */
    --accent-2: #ff3bd4;         /* rose */
    --accent-3: #2f5bff;         /* bleu */
    --accent-4: #ffd400;         /* jaune */

        
    /* =========================================================
      Accent aléatoire (page entière) — hors offres
      ========================================================= */

    body{
      --page-accent: var(--accent);
    }
    
    body.page-accent-a1{ --page-accent: var(--accent); }
    body.page-accent-a2{ --page-accent: var(--accent-2); }
    body.page-accent-a3{ --page-accent: var(--accent-3); }




    /* Layout */
    --container: min(1160px, 92vw);
    --radius: 18px;
    --radius-pill: 999px;
  
    /* Borders / shadows (imprimé) */
    --bd: 2px solid var(--text);
    --bd-soft: 2px solid rgba(11,11,15,.16);
    --shadow: 7px 7px 0 rgba(11,11,15,.18);
    --shadow-strong: 10px 10px 0 rgba(11,11,15,.22);
  
    /* Surfaces */
    --card: #fffdf7;
    --card-2: #fff3bf;
  
    /* Speeds */
    --speed: .18s;
  }
  
  /* Reset minimal */
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
  }
  
  /* Container / sections */
  .container{ width:var(--container); margin-inline:auto; }
  
  .section{
    padding: clamp(54px, 8vw, 100px) 0;
    color: var(--text);
  }
  
  /* Titles */
  .section-title{
    font-family: var(--font-sans);
    font-size: clamp(30px, 4.4vw, 54px);
    margin: 0 0 12px;
    letter-spacing: -0.03em;
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
  }
  
  .section-subtitle,
  .section-intro{
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.65;
    font-size: 16px;
    max-width: 75ch;
  }
  
  /* Generic grid */
  .grid{ display:grid; gap: 22px; }
  .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  @media (max-width: 960px){ .grid.cols-3{ grid-template-columns: 1fr; } }
  
  /* Cards */
  .card{
    background: var(--card);
    border: var(--bd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  
  /* Cover utility (pour projets) */
  .cover{ position:relative; isolation:isolate; }
  .cover::before{
    content:"";
    position:absolute; inset:0;
    z-index:-2;
    background-image: var(--img, none);
    background-size: cover;
    background-position: top;
    filter: contrast(1.05) saturate(1.05);
    transform: scale(1.02);
  }
  .cover::after{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    background:
      linear-gradient(180deg, rgba(251,247,238,.10) 35%, rgba(11,11,15,.65) 100%);
  }
  
  /* Pattern helpers (dash / hachures) */
  .ls-dash-bg{
    position: relative;
    overflow: hidden;
  }
  .ls-dash-bg::before{
    content:"";
    position:absolute; inset:-30%;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(11,11,15,.16) 0 2px,
        transparent 2px 10px
      );
    opacity: .25;
    transform: rotate(-2deg);
    pointer-events:none;
  }
  
  /* Chips / tags (sticker) */
  .chip{
    display:inline-flex;
    align-items:center;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: var(--bd);
    background: var(--accent-4);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: 4px 4px 0 rgba(11,11,15,.12);
  }
  
  /* Buttons (sticker / editorial) */
  .btn{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration:none;
    background: var(--page-accent);
    color: var(--text);
    border: var(--bd);
    box-shadow: var(--shadow);
    transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  }
  .btn:hover{
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-strong);
    filter: saturate(1.05);
  }
  .btn:active{ transform: translate(0,0); box-shadow: var(--shadow); }
  
  .btn.secondary{
    background: #fff;
  }
  .btn.secondary:hover{
    background: #fff;
  }
  
  .btn.small{
    padding: 10px 14px;
    font-size: 13px;
  }

  @media (max-width: 960px){
    .btn{ 
      width: 100%;
      justify-content: center;
    } 
  }
  
  /* Kicker */
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    color: var(--text);
  }
  .kicker::before{
    content:"";
    width: 14px; height: 14px;
    background: var(--page-accent);
    border: var(--bd);
    border-radius: 999px;
    box-shadow: 3px 3px 0 rgba(11,11,15,.12);
  }
  
  /* Links focus */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline: 3px solid var(--page-accent);
    outline-offset: 2px;
  }
  
  /* Minor helpers */
  .cta-row{ display:flex; gap: 12px; flex-wrap: wrap; }