/* ===== POLICES SELF-HOSTED ===== */
  /* Bricolage Grotesque — police variable (12..96 opsz, 200..800 wght) */
  @font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  /* Mouta Sans — police variable (100..860 wght) */
  @font-face {
    font-family: 'Mouta Sans';
    font-style: normal;
    font-weight: 100 860;
    font-display: swap;
    src: url(../fonts/MoutaSans-VF.woff) format('woff');
  }

  :root {
    --pink: #E5B8BD;
    --pink-deep: #C9888C;
    --pink-bg: #DDA7AE;
    --sage: #A9BBA6;
    --sage-dark: #758A77;
    --yellow: #D8C84A;
    --yellow-bg: #E2D169;
    --blue-deep: #1E4FA0;
    --blue-mid: #5B7FA0;
    --blue-light: #87B3D8;
    --blue-sky: #A8C7DE;
    --olive: #5C6845;
    --olive-dark: #3F4730;
    --cream: #F1E6D2;
    --beige: #E8D5B7;
    --orange: #D9883D;
    --coral: #C9534F;
    --ink: #1A1A1A;
    --paper: #F4EFE6;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* TOUS LES TEXTES EN BLANC */
  body,
  h1, h2, h3, h4, h5, h6,
  p, a, span, em, strong, li, div,
  .hero-title, .speech, .bubble-title, .star-burst, .provoc-sub,
  .step h3, .step p, .step-num,
  .pote-card h3, .pote-tag, .pote-quote,
  .apropos-text, .apropos-photo,
  .adopter-info, .price-tag,
  .nav-links a, footer {
    color: #fff !important;
  }
  
  
  .step em{
    color: var(--olive) !important;
  }

  /* ...sauf le texte dans les cartes (fond clair) : on garde le noir */
  .step h3, .step p, .step-num,
  .pote-card h3, .pote-tag, .pote-quote,
  .contact-block h3, .contact-block p {
    color: var(--ink) !important;
  }
  .step-num { color: var(--paper) !important; }
  .contact-block a { color: var(--paper) !important; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Mouta Sans', sans-serif;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    line-height: 1.4;
  }

  /* Titres — Bricolage Grotesque */
  h1, h2, h3, h4, h5, h6,
  .hero-title,
  .bubble-title,
  .star-burst,
  .step-num,
  .step h3,
  .pote-card h3,
  .contact-block h3,
  .price-tag {
    font-family: 'Bricolage Grotesque', sans-serif;
  }

  /* ===================================================================
     FORMES SVG RÉUTILISABLES
     Les SVG de marque (dossier /svg) sont des silhouettes noires.
     On les peint avec mask-image : la couleur vient de background,
     la forme du masque, et l'ombre "offset" du filtre drop-shadow.
     =================================================================== */
  .shape {
    position: relative;
    z-index: 0;
  }
  .shape::before {
    content: '';
    position: absolute;
    inset: var(--shape-inset, -8px -14px);
    z-index: -1;
    background:
      var(--shape-tex, url(../textures/texture1.jpeg)) center / 340px repeat,
      var(--shape-fill, var(--sage));
    background-blend-mode: soft-light;
    -webkit-mask-image: var(--shape-mask);
            mask-image: var(--shape-mask);
    filter: drop-shadow(var(--shape-shadow-x, 8px) var(--shape-shadow-y, 8px) 0 var(--shape-shadow, rgba(0,0,0,0.2)));
  }

  /* Masques SVG — évite la frange 1px au bord (anti-aliasing + drop-shadow) */
  .shape::before,
  .speech::before,
  .bubble-title::before,
  .star-burst::before,
  .pote-quote::before,
  .totem-card::before {
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: 100% calc(100% + 2px);
            mask-size: 100% calc(100% + 2px);
    transform: translateZ(0);
  }

  /* TEXTURE D'ENDUIT — 4 textures tileables en overlay sur les fonds.
     mix-blend-mode: soft-light + opacity faible => grain discret,
     la couleur de la section reste dominante. */
  .paper-bg {
    position: relative;
    --tex: url(../textures/texture1.jpeg);
  }
  .paper-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--tex);
    background-size: 520px auto;
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    opacity: 0.7;
    pointer-events: none;
  }
  .paper-bg > * { position: relative; z-index: 1; }

  /* Une texture différente par section (cycle sur les 4) */
  .hero    { --tex: url(../textures/texture1.jpeg); }
  .about   { --tex: url(../textures/texture2.jpeg); }
  .potes   { --tex: url(../textures/texture3.jpeg); }
  .apropos { --tex: url(../textures/texture4.jpeg); }
  .adopter { --tex: url(../textures/texture2.jpeg); }
  .contact { --tex: url(../textures/texture3.jpeg); }

  /* SCRIBBLES / EXPRESSIONS — petits gribouillis BD décoratifs */
  .scribble {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
    display: block;
    vertical-align: top;
    max-width: 100%;
  }

  .pote-portrait svg {
    display: block;
    vertical-align: top;
    max-width: 100%;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }
  nav > * { pointer-events: auto; }

  .logo {
    display: block;
    width: 104px;
    transform: rotate(-4deg);
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.12));
  }
  .logo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    font-size: 17px;
    font-weight: 700;
    overflow: visible;
  }
  .nav-links li {
    overflow: visible;
  }
  .nav-links a {
    color: var(--ink);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    overflow: visible;
    isolation: isolate;
    --nav-hover-mask: url(../svg/forme_10.svg);
  }
  .nav-links a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220%;
    height: 220%;
    transform: translate(-50%, -50%) translateZ(0);
    z-index: -1;
    background: var(--blue-deep);
    -webkit-mask-image: var(--nav-hover-mask);
            mask-image: var(--nav-hover-mask);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }
  .nav-links a:hover::before {
    opacity: 1;
  }

  /* HERO */
  .hero {
    min-height: 100vh;
    background: var(--sage);
    padding: 140px 40px 80px;
    position: relative;
    overflow: hidden;
  }

  .hero-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 800;
    color: var(--paper);
    line-height: 0.95;
    max-width: 1100px;
    transform: rotate(-2deg);
    margin-bottom: 60px;
    letter-spacing: -0.02em;
  }
  .hero-title em {
    font-style: normal;
    display: inline-block;
    transform: rotate(3deg) translateY(-6px);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
  }

  /* TOTEM HERO — forme_18 (masque + texture) */
  .totem-card {
    position: relative;
    width: 100%;
    max-width: min(100%, 420px);
    aspect-ratio: 848 / 727;
  }
  .totem-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      url(../textures/texture4.jpeg) center / 340px repeat,
      var(--blue-deep);
    background-blend-mode: soft-light;
    -webkit-mask-image: url(../svg/forme_18.svg);
            mask-image: url(../svg/forme_18.svg);
    filter: drop-shadow(8px 9px 0 #142f5e);
  }

  /* SPEECH BUBBLE (hero) — vraie forme de bulle */
  .speech {
    position: relative;
    z-index: 0;
    padding: 44px 48px 60px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    max-width: 480px;
    line-height: 1.4;
  }
  .speech::before {
    content: '';
    position: absolute;
    inset: -6px -12px;
    z-index: -1;
    background:
      url(../textures/texture4.jpeg) center / 340px repeat,
      var(--blue-deep);
    background-blend-mode: soft-light;
    -webkit-mask-image: url(../svg/forme_7.svg);
            mask-image: url(../svg/forme_7.svg);
    filter: drop-shadow(8px 9px 0 #142f5e);
  }
  .speech p strong { font-weight: 800; letter-spacing: 0.5px; }

  /* SECTIONS */
  section {
    padding: 120px 40px;
    position: relative;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ABOUT — pink */
  .about { background: var(--pink-bg); }

  /* TITRES BULLE — forme masquée derrière le texte */
  .bubble-title {
    display: inline-block;
    position: relative;
    z-index: 0;
    padding: 36px 56px;
    margin-bottom: 60px;
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    color: var(--paper);
    transform: rotate(-3deg);
  }
  .bubble-title::before {
    content: '';
    position: absolute;
    inset: -24px -76px;          /* forme agrandie (et un peu déformée) pour englober tout le titre */
    z-index: -1;
    background:
      var(--shape-tex, url(../textures/texture1.jpeg)) center / 340px repeat,
      var(--shape-fill, var(--olive));
    background-blend-mode: soft-light;
    -webkit-mask-image: var(--shape-mask);
            mask-image: var(--shape-mask);
    filter: drop-shadow(8px 8px 0 var(--shape-shadow, var(--ink)));
  }
  /* Couleurs sombres (identité) → bon contraste avec le texte blanc.
     Titres sans queue (formes pleines) ; seul « On vous écoute » garde une bulle (forme_22). */
  .bt-cloud-sage  { --shape-fill: var(--olive);     --shape-shadow: var(--olive-dark); --shape-mask: url(../svg/forme_8.svg);  --shape-tex: url(../textures/texture1.jpeg); }
  .bt-coral       { --shape-fill: var(--coral);     --shape-shadow: var(--ink);        --shape-mask: url(../svg/forme_12.svg); --shape-tex: url(../textures/texture2.jpeg); }
  .bt-cloud-cream { --shape-fill: var(--blue-deep); --shape-shadow: var(--ink);        --shape-mask: url(../svg/forme_21.svg); --shape-tex: url(../textures/texture3.jpeg); }
  .bt-orange      { --shape-fill: var(--olive-dark);--shape-shadow: var(--ink);        --shape-mask: url(../svg/forme_22.svg); --shape-tex: url(../textures/texture4.jpeg); }

  .three-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
  }
  .step {
    background: var(--paper);
    padding: 32px;
    border-radius: 24px;
    transform: rotate(-1deg);
    box-shadow: 6px 6px 0 var(--ink);
    position: relative;
  }
  .step:nth-child(2) { transform: rotate(1.5deg); }
  .step:nth-child(3) { transform: rotate(-0.5deg); }
  .step-num {
    position: absolute;
    top: -22px;
    left: -18px;
    width: 56px;
    height: 56px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    transform: rotate(-8deg);
  }
  .step h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  .step p {
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    font-weight: 500;
  }

  /* POTES — beige */
  .potes { background: var(--beige); }

  .potes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 50px;
  }
  .pote-card {
    padding: 28px;
    border-radius: 28px;
    text-align: center;
    position: relative;
    box-shadow: 5px 5px 0 var(--ink);
    transform: rotate(-1deg);
  }
  .pote-card:nth-child(2) { transform: rotate(1deg); }
  .pote-card:nth-child(3) { transform: rotate(-0.5deg); }
  .pote-card.dominique { background: var(--blue-sky); }
  .pote-card.albert { background: var(--pink); }
  .pote-card.camille { background: var(--cream); }

  .pote-portrait {
    aspect-ratio: 1;
    background: var(--paper);
    border-radius: 50%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,0.08);
  }
  .pote-portrait svg { width: 70%; height: auto; }
  .pote-card h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 6px;
  }
  .pote-card .pote-tag {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 16px;
  }

  /* RÉPLIQUE DU POTE — vraie bulle de BD (forme masquée) */
  .pote-quote {
    position: relative;
    z-index: 0;
    font-style: italic;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    padding: 24px 26px 34px;
  }
  .pote-quote::before {
    content: '';
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    background:
      var(--q-tex, url(../textures/texture1.jpeg)) center / 240px repeat,
      var(--ink);
    background-blend-mode: soft-light;
    -webkit-mask-image: var(--q-mask, url(../svg/forme_13.svg));
            mask-image: var(--q-mask, url(../svg/forme_13.svg));
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.18));
  }
  .pote-card:nth-child(1) .pote-quote { --q-mask: url(../svg/forme_13.svg); }
  .pote-card:nth-child(2) .pote-quote { --q-mask: url(../svg/forme_14.svg); }
  .pote-card:nth-child(3) .pote-quote { --q-mask: url(../svg/forme_22.svg); }

  /* PROVOCATION — pink with yellow star */
  .provoc {
    background: var(--pink-bg);
    text-align: center;
    padding: 100px 40px;
  }
  .star-burst {
    display: inline-block;
    position: relative;
    z-index: 0;
    padding: 90px 110px;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: var(--paper);
    line-height: 1;
    transform: rotate(-4deg);
  }
  .star-burst::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      var(--shape-tex, url(../textures/texture2.jpeg)) center / 360px repeat,
      var(--shape-fill, var(--yellow));
    background-blend-mode: soft-light;
    -webkit-mask-image: var(--shape-mask);
            mask-image: var(--shape-mask);
    filter: drop-shadow(10px 10px 0 var(--shape-shadow, var(--orange)));
  }
  .sb-provoc  { --shape-fill: var(--yellow);     --shape-shadow: var(--orange);  --shape-mask: url(../svg/forme_18.svg); }
  .sb-adopter { --shape-fill: var(--blue-light); --shape-shadow: #1A4A8E;        --shape-mask: url(../svg/forme_4.svg); }
  .provoc-sub {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 700;
    transform: rotate(1deg);
    display: inline-block;
  }

  /* HOW IT WORKS — yellow */
  .how { background: var(--yellow-bg); }

  /* APROPOS — sage */
  .apropos { background: var(--sage); color: var(--paper); }
  .apropos .bubble-title { color: var(--ink); }
  .apropos-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .apropos-text {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
  }
  .apropos-text p { margin-bottom: 20px; }
  .apropos-text strong { font-weight: 800; }
  .apropos-photo {
    aspect-ratio: 4/5;
    background: var(--paper);
    border-radius: 12px;
    transform: rotate(-2deg);
    box-shadow: 8px 8px 0 var(--olive-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
  }

  /* ADOPTER — deep blue */
  .adopter {
    background: var(--blue-deep);
    color: var(--paper);
    text-align: center;
  }
  .adopter .star-burst { color: var(--paper); }
  .adopter-info {
    margin-top: 50px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .price-tag {
    display: inline-block;
    background: var(--yellow);
    color: var(--ink);
    padding: 16px 28px;
    border-radius: 40px;
    font-size: 28px;
    font-weight: 800;
    margin: 24px 0;
    transform: rotate(-3deg);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  }

  /* CONTACT — cream */
  .contact { background: var(--pink); }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 40px;
  }
  .contact-block {
    background: var(--paper);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(-1deg);
  }
  .contact-block:nth-child(2) { transform: rotate(1deg); }
  .contact-block h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 16px;
  }
  .contact-block p {
    font-size: 18px;
    margin-bottom: 14px;
    font-weight: 500;
  }
  .contact-block a {
    display: inline-block;
    margin-top: 12px;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: transform 0.15s;
  }
  .contact-block a:hover { transform: translateY(-2px) rotate(-2deg); }

  /* FOOTER */
  footer {
    background: var(--ink);
    color: var(--paper);
    padding: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
  }
  footer .heart { color: var(--coral); }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .three-steps { grid-template-columns: 1fr; }
    .potes-grid { grid-template-columns: 1fr; }
    .apropos-content { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    nav { padding: 16px 20px; }
    .nav-links { gap: 16px; font-size: 14px; }
    .logo { width: 78px; }
    section { padding: 80px 24px; }
    .hero { padding: 110px 24px 60px; }
    .scribble { display: none; }
  }