@font-face {
      font-family: 'DomeaScrawl';
      src: url('https://lecrocoquicroque.fr/font/DomeaScrawl-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    :root {
      --rose: #f285b5;
      --noir: #231f20;
      --blanc: #ffffff;
      --bleu: #00beeb;
      --menu-typo: #f172ac;
      --body-bg: #f285b5;
    }

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

    html, body {
      width: 100%;
      min-height: 100vh;
      background-color: var(--body-bg);
      font-family: 'DomeaScrawl', cursive, sans-serif;
    }

    /* ── HEADER / H1 ── */
    header {
      width: 100%;
      padding: 24px 32px 8px;
      text-align: center;
    }

    h1 {
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: clamp(2.8rem, 7vw, 6rem);
      color: var(--bleu);
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    /* ── TAGLINE ── */
    .tagline {
      font-family: 'DomeaScrawl', cursive, sans-serif;
      color: var(--blanc);
      font-size: clamp(1rem, 2.5vw, 1.6rem);
      text-align: center;
      padding: 4px 16px 16px;
      letter-spacing: 0.03em;
    }

    /* ── HERO IMAGE (full width) ── */
.hero-img {
  width: 70%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin:auto;
}
.hero-wrap {
  overflow: hidden;
  width: 100%;
  display: block;
}


.hero-wrap:hover .hero-img {
  transform: scale(1.025);
}
    /* ── 3-COLUMN SECTION ── */
.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    margin: auto;
    margin-bottom: 39px;
}
    .three-col img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
.three-col .img-wrap {
  display: block;
  cursor: default;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

.three-col .img-wrap img {
  width: 100%;
  display: block;
  object-fit: cover;
}

 
    /* Focus visible for keyboard nav (images have no href but wraps might) */
    .three-col .img-wrap:focus-visible {
      outline: 3px solid var(--blanc);
      outline-offset: -3px;
    }
    /* ── BOTTOM NAV ── */
    nav {
      width: 100%;
      background-color: var(--bleu);
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      padding: 14px 16px;
      gap: 8px;
      position: sticky;
      bottom:0;
      z-index:100;
    }
 
    nav a {
      font-family: 'DomeaScrawl', cursive, sans-serif;
      color: var(--menu-typo);
      text-decoration: none;
      font-size: clamp(1rem, 2vw, 1.64rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 10px;
      position: relative;
      transition: color 0.25s ease, transform 0.25s ease;
      /* underline track */
    }
 
    /* Animated double-stroke underline — croco bite effect */
    nav a::before,
    nav a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }
 
    nav a::before {
      background: var(--blanc);
      bottom: 2px;
      transition-delay: 0.04s;
    }
 
    nav a::after {
      background: var(--noir);
      bottom: 0px;
    }
 
    nav a:hover {
      color: var(--blanc);
      transform: translateY(-2px) rotate(-0.8deg);
    }
 
    nav a:hover::before,
    nav a:hover::after {
      transform: scaleX(1);
    }
 
    /* Accessible focus ring */
    nav a:focus-visible {
      outline: 3px solid var(--blanc);
      outline-offset: 3px;
      border-radius: 2px;
    }
 
    /* ── ACCESSIBILITÉ : respect prefers-reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
      .hero-img,
      .three-col .img-wrap img,
      .three-col .img-wrap::after,
      nav a,
      nav a::before,
      nav a::after {
        transition: none !important;
        transform: none !important;
      }
    }
 
    /* ── MOBILE ── */
    @media (max-width: 600px) {
.hero-img {
  width: 98%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin:auto;
}

    h1 {
        font-size: 2.4rem;
      }

      .tagline {
        font-size: 1rem;
      }

      .three-col {
        grid-template-columns: 1fr;
      }
.three-col img {
    max-width: 64%;
    margin: auto;
    padding-bottom: 36px;
}
.hero-img {
    padding-bottom: 36px;
}

      nav {
        flex-direction: column;
        gap: 10px;
        padding: 18px 16px;
      }

      nav a {
        font-size: 1.3rem;
      }
    }

      /* ═══════════════════════════════════
       POPIN — overlay
    ═══════════════════════════════════ */
    .popin-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(35,31,32,0);
      backdrop-filter: blur(0px);
      pointer-events: none;
      transition: background .35s ease, backdrop-filter .35s ease;
    }
    .popin-overlay.is-open {
      background: rgba(35,31,32,.82);
      backdrop-filter: blur(8px);
      pointer-events: all;
    }
 
    /* POPIN — boîte */
    .popin-box {
      position: relative;
      width: 100%;
      max-width: 600px;
      max-height: 90dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      border-radius: 3px;
      background: var(--noir);
      color: var(--blanc);
      border: 2px solid var(--rose);
      box-shadow: 0 0 0 5px rgba(242,133,181,.12), 0 32px 80px rgba(35,31,32,.75);
      opacity: 0;
      transform: translateY(26px) scale(.96) rotate(-.5deg);
      transition: opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
    }
    .popin-overlay.is-open .popin-box {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(0deg);
    }
 
    /* Bande déco */
    .popin-band {
      height: 5px;
      background: repeating-linear-gradient(90deg, var(--rose) 0 20px, var(--bleu) 20px 40px, var(--rose) 40px 60px);
    }
 
    .popin-inner { padding: 1.8rem 2rem 2.2rem; }
 
    .popin-title {
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: clamp(1.7rem, 5vw, 2.5rem);
      color: var(--bleu);
      margin: 0 0 1rem;
      line-height: 1.1;
      letter-spacing: .02em;
    }
 
    .popin-body {
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: clamp(1rem, 2.8vw, 1.15rem);
      line-height: 1.65;
      color: var(--blanc);
    }
    .popin-body p           { margin: 0 0 .8em; }
    .popin-body p:last-child { margin-bottom: 0; }
    .popin-body strong       { color: var(--rose); }
 
    /* Bouton fermer */
    .popin-close {
      position: absolute;
      top: .5rem; right: .6rem;
      width: 2.2rem; height: 2.2rem;
      border: none; background: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      color: var(--rose);
      font-size: 1.2rem; line-height: 1;
      transition: background .18s, transform .18s, color .18s;
    }
    .popin-close:hover {
      background: rgba(242,133,181,.15);
      color: var(--blanc);
      transform: rotate(90deg) scale(1.1);
    }
    .popin-close:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
 
    /* Curseur pointer sur les images */
    .three-col .img-wrap { cursor: pointer; }
 
    /* ═══════════════════════════════════
       FORMULAIRE — floating labels
    ═══════════════════════════════════ */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      margin-top: 1.4rem;
    }
 
    .field-wrap { position: relative; }
 
    /* Champs */
    .field-wrap input,
    .field-wrap textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 1.3rem .9rem .45rem;
      background: rgba(255,255,255,.06);
      border: 1.5px solid rgba(242,133,181,.4);
      border-radius: 3px;
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: 1rem;          /* 16px : bloque le zoom iOS */
      color: var(--blanc);
      transition: border-color .2s, box-shadow .2s;
      -webkit-appearance: none;
      appearance: none;
    }
    .field-wrap input::placeholder,
    .field-wrap textarea::placeholder { color: transparent; }
 
    .field-wrap textarea {
      resize: vertical;
      min-height: 110px;
      padding-top: 1.7rem;
    }
 
    .field-wrap input:focus,
    .field-wrap textarea:focus {
      outline: none;
      border-color: var(--bleu);
      box-shadow: 0 0 0 3px rgba(0,190,235,.18);
    }
 
    /* Label flottant */
    .field-wrap label {
      position: absolute;
      left: .9rem;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: 1rem;
      color: rgba(255,255,255,.45);
      pointer-events: none;
      transition: top .2s, transform .2s, font-size .2s, color .2s;
      line-height: 1;
    }
    /* textarea : label ancré en haut */
    .field-wrap--textarea label {
      top: 1rem;
      transform: none;
    }
 
    /* Label monté au focus ou si valeur */
    .field-wrap input:focus ~ label,
    .field-wrap input:not(:placeholder-shown) ~ label {
      top: .38rem;
      transform: none;
      font-size: .7rem;
      color: var(--rose);
    }
    .field-wrap textarea:focus ~ label,
    .field-wrap textarea:not(:placeholder-shown) ~ label {
      top: .32rem;
      font-size: .7rem;
      color: var(--rose);
    }
 
    /* Honeypots — invisibles humains */
    .hp-field {
      position: absolute;
      left: -9999px; top: -9999px;
      opacity: 0; height: 0;
      overflow: hidden;
      pointer-events: none;
    }
 
    /* Bouton envoyer */
    .btn-send {
      align-self: flex-start;
      padding: .72rem 2.1rem;
      background: var(--rose);
      color: var(--noir);
      border: none;
      border-radius: 3px;
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: 1.1rem;
      letter-spacing: .06em;
      cursor: pointer;
      transition: background .2s, transform .15s, box-shadow .2s;
    }
    .btn-send:hover {
      background: var(--bleu);
      color: var(--blanc);
      transform: scale(1.04) rotate(-.4deg);
      box-shadow: 0 4px 18px rgba(0,190,235,.28);
    }
    .btn-send:active  { transform: scale(.97); }
    .btn-send:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
    /* Feedback */
    .form-feedback {
      display: none;
      padding: .7rem 1rem;
      border-radius: 3px;
      font-family: 'DomeaScrawl', cursive, sans-serif;
      font-size: .95rem;
    }
    .form-feedback.success {
      display: block;
      background: rgba(0,190,235,.1);
      border: 1px solid var(--bleu);
      color: var(--bleu);
    }
    .form-feedback.error {
      display: block;
      background: rgba(242,133,181,.1);
      border: 1px solid var(--rose);
      color: var(--rose);
    }
 
    /* ═══════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════ */
    @media (max-width: 480px) {
      .popin-inner { padding: 1.3rem 1.1rem 1.7rem; }
      .btn-send { width: 100%; text-align: center; align-self: stretch; }
    }
 
    @media (prefers-reduced-motion: reduce) {
      .popin-box { transition: opacity .2s; transform: none !important; }
      .popin-close, .field-wrap label { transition: none; }
    }