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

    /* [B1] outline retiré globalement — focus invisible au clavier */
    * {
      outline: none;
    }

    :root {
      --fond: #f8f8f6;
      --surface: #ffffff;
      --texte: #1a1a18;
      --bordure: #e0ddd6;
      --accent: #2d5a4f;
      --rayon: 10px;
    }

    body {
      font-family: Georgia, serif;
      background: var(--fond);
      color: var(--texte);
      line-height: 1.6;
    }

    /* ---- EN-TÊTE ---- */
    .entete {
      background: var(--surface);
      border-bottom: 1px solid var(--bordure);
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.2rem;
      letter-spacing: 0.05em;
    }

    .nav-principale {
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

    .nav-principale a {
      font-size: 0.9rem;
      color: var(--texte);
      text-decoration: none;
    }

    .nav-principale a:hover {
      text-decoration: underline;
    }

    /* ---- HERO ---- */
    .hero {
      padding: 3rem 2rem;
      text-align: center;
      background: var(--surface);
      border-bottom: 1px solid var(--bordure);
    }

    /* [C3] On utilise h4 directement après h1 — h2 et h3 sautés */
    .hero h1 {
      font-size: 2rem;
      font-weight: normal;
      margin-bottom: 0.5rem;
    }

    .hero h4 {
      font-size: 1rem;
      font-weight: normal;
      color: #666;
      margin-bottom: 1.5rem;
    }

    /* [B2] Div cliquable sans tabindex ni role */
    .hero-cta {
      display: inline-block;
      padding: 0.75rem 2rem;
      background: var(--accent);
      color: white;
      border-radius: 6px;
      font-size: 0.95rem;
      cursor: pointer;
    }

    .hero-cta:hover {
      opacity: 0.9;
    }

    /* ---- GRILLE PRODUITS ---- */
    .section-produits {
      padding: 2rem;
    }

    .grille {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 1.25rem;
    }

    .carte-produit {
      background: var(--surface);
      border: 1px solid var(--bordure);
      border-radius: var(--rayon);
      overflow: hidden;
    }

    .carte-produit-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      background: #e8e6e0;
    }

    .carte-produit-corps {
      padding: 1rem;
      position: relative;
    }

    /* [A2] Badge blanc sur jaune pâle — contraste insuffisant */
    .badge-solde {
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f0d060;
      color: #ffffff;
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 99px;
    }

    .produit-nom {
      font-size: 0.95rem;
      margin-bottom: 0.25rem;
    }

    .produit-desc {
      font-size: 0.82rem;
      color: #888;
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }

    .produit-pied {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* [A1] Prix en gris très pâle sur blanc — contraste insuffisant */
    .produit-prix {
      font-size: 1.1rem;
      color: #bbbbbb;
    }

    .produit-btn {
      font-size: 0.8rem;
      padding: 0.4rem 0.9rem;
      background: var(--fond);
      border: 1px solid var(--bordure);
      border-radius: 6px;
      cursor: pointer;
      font-family: Georgia, serif;
    }

    .produit-btn:hover {
      background: #e8e6e0;
    }

    /* ---- SECTION NEWSLETTER ---- */
    .section-newsletter {
      background: var(--surface);
      border-top: 1px solid var(--bordure);
      border-bottom: 1px solid var(--bordure);
      padding: 2rem;
      text-align: center;
    }

    .section-newsletter h2 {
      font-size: 1.1rem;
      font-weight: normal;
      margin-bottom: 1rem;
    }

    .formulaire-newsletter {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      max-width: 400px;
      margin: 0 auto;
    }

    /* [C5] Champ sans label associé */
    .champ-courriel {
      flex: 1;
      padding: 0.6rem 0.9rem;
      border: 1px solid var(--bordure);
      border-radius: 6px;
      font-size: 0.9rem;
      font-family: Georgia, serif;
    }

    .btn-newsletter {
      padding: 0.6rem 1.2rem;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 0.9rem;
      cursor: pointer;
      font-family: Georgia, serif;
    }

    /* ---- FOOTER ---- */
    .footer {
      background: #f0f0f0;
      padding: 1.5rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* [A3] Texte footer sur fond gris — contraste insuffisant */
    .footer-texte {
      font-size: 0.82rem;
      color: #999999;
    }

    .footer-liens {
      display: flex;
      gap: 0.75rem;
    }

    /* [D1] Icônes sociales 16×16px — zone de clic trop petite */
    .icone-sociale {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      color: #999;
      text-decoration: none;
      font-size: 0.75rem;
    }

    /* [B3] Lien sans href */
    .lien-fantome {
      font-size: 0.82rem;
      color: var(--accent);
      cursor: pointer;
    }

    .lien-fantome:hover {
      text-decoration: underline;
    }