/* ============================================
   FONT LOADING
   ============================================ */
@font-face {
  font-family: 'Kalufira';
  src: url('fonts/Kalufira.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   MOBILE / RESPONSIVE OVERRIDES
   Breakpoint: max-width 1024px

   Polices fluides via clamp() :
   - Grands titres (Kalufira) : 28px → 50px entre 320px et 1024px
   - Titres moyens : 24px → 38px
   - Corps de texte : 14px → 20px
   - Encadrés jaunes : 14px → 20px
   - Petits textes : 12px → 16px
   - Réseaux sociaux : 20px → 32px
   ============================================ */

@media screen and (max-width: 1024px) {

  /* ---- GLOBAL RESETS ---- */
  body {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Reset all fixed-width containers */
  .l-constrained,
  .l-constrained-2,
  .l-constrained-3,
  .l-constrained-4,
  .l-constrained-5,
  .texte-3,
  .liens-rs {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
  }

  .l-constrained-5 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ============================================
     HEADER
     ============================================ */
  .header {
    overflow: visible;
  }

  .col-13 {
    padding: 30px 0 40px;
    overflow: visible !important;
  }

  .wrapper-11 {
    height: auto !important;
    width: 100% !important;
    left: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  /* Logo centré */
  .col-9 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    order: 1;
    text-align: center;
  }
  .logo {
    width: clamp(180px, 30vw, 280px);
    margin: 0 auto;
  }

  /* ---- Bloc image GAUCHE (col-10) : olives ---- */
  .col-10 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 80% !important;
    max-width: 400px;
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: 484 / 644;
    background-size: contain !important;
    background-position: center !important;
    order: 3;
    margin-top: 25px;
  }
  /* Masquer les boutons superposés sur les blocs images en mobile */
  .col-10 .layer-6,
  .col-10 .layer-7,
  .col-10 .yummy-copie-4 {
    display: none;
  }

  /* ---- Bloc image CENTRE (col-3) : sous le logo ---- */
  .col-3 {
    width: 80% !important;
    max-width: 400px;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 25px auto 0 !important;
    aspect-ratio: 479 / 568;
    background-size: contain !important;
    background-position: center !important;
  }
  .col-3 .layer-4,
  .col-3 .layer-5 {
    display: none;
  }

  /* ---- Bloc image DROITE (wrapper-6 > col-2) : bouteille ---- */
  .wrapper-6 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 80% !important;
    max-width: 400px;
    height: auto !important;
    order: 6;
    margin-top: 25px;
    margin-bottom: 40px;
  }
  .col-2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: 458 / 568;
    background-size: contain !important;
    background-position: center !important;
  }
  .col-2 .layer,
  .col-2 .layer-2 {
    display: none;
  }
  .layer-3 {
    display: none !important;
  }

  /* ---- Bandeau bas header ---- */
  .layer-8 {
    display: none !important;
  }
  .layer-9-link {
    display: block;
    width: 100%;
    text-align: center;
  }
  .layer-9 {
    display: inline-block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 80% !important;
    max-width: 400px;
    height: auto !important;
    margin: 15px 0 0 !important;
  }

  /* ---- Grande photo bas header ---- */
  .layer-10 {
    position: relative !important;
    right: auto !important;
    margin: 25px auto 40px !important;
    display: block;
    width: 80%;
    max-width: 400px;
  }

  /* Texte accroche "Copiée un peu partout..." */
  .text-2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    order: 2;
    margin-top: 30px;
    font-size: clamp(0.85em, 1.8vw, 1.25em);
    line-height: 1.15;
    padding: 0 10px;
  }
  .text-2 .text-style-5 {
    font-size: clamp(1.3em, 3.25vw, 2.1em);
  }
  .text-2 .text-style-6 {
    font-size: clamp(1.3em, 3.25vw, 2.1em);
  }
  .text-2 .text-style-7 {
    line-height: 1.15em;
  }

  /* Illustration olive */
  .objet-dynamique-vectoriel-copie-14 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    order: 3;
    margin-top: 30px;
    width: clamp(100px, 18vw, 170px);
  }

  /* Suivez-nous + icônes réseaux sociaux header */
  .text {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    order: 4;
    margin-top: 30px;
    font-size: clamp(1.56em, 3.9vw, 2.6em);
    text-align: center;
  }
  .wrapper-4 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    order: 5;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
    width: auto;
    height: auto;
  }
  .wrapper-4 .objet-dynamique-vectoriel-copie-15,
  .wrapper-4 .calque-108-copie {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: clamp(55px, 10vw, 90px);
    height: auto;
  }

  /* ============================================
     DU GOÛT
     ============================================ */
  .du-gout {
    height: auto !important;
    margin: 0 !important;
    overflow: visible;
  }

  .layer-11 {
    display: none;
  }

  .col {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 50px 0 40px;
  }

  .texte {
    width: 100% !important;
    left: auto !important;
    margin: 0 auto !important;
  }

  /* Grand titre "DU GOÛT, DU GOÛT, DU GOÛT !" */
  .text-3 {
    margin: 0 !important;
    font-size: clamp(1.95em, 5.85vw, 3.9em);
    line-height: 1.1em;
    text-align: center;
  }
  .text-3 .text-style-8 {
    font-size: 0.7em;
  }

  /* Corps de texte */
  .text-4 {
    left: auto !important;
    margin: 30px auto 0 !important;
    width: 100% !important;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
  }

  .yummy-copie-6 {
    width: clamp(70px, 12vw, 110px);
    margin: 20px 0 -40px;
    position: relative;
    z-index: 50 !important;
  }

  /* Encadré jaune */
  .rectangle-7-copie-holder {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 35px 20px 15px !important;
    z-index: 1 !important;
  }
  .text-5 {
    left: auto !important;
    width: 100% !important;
    font-size: clamp(0.85em, 1.7vw, 1.15em);
    line-height: 1.15em;
  }

  /* Bouteilles d'huile */
  .group-2 {
    height: auto !important;
    width: 100% !important;
    right: auto !important;
    margin: 40px auto 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    position: relative;
  }
  .objet-dynamique-vectoriel,
  .objet-dynamique-vectoriel-2,
  .objet-dynamique-vectoriel-3 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 30%;
    max-width: 200px;
  }
  .yummy-copie-5,
  .layer-13 {
    display: none;
  }
  .layer-12-link {
    display: block;
    width: 100%;
    text-align: center;
  }
  .layer-12 {
    display: inline-block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: auto !important;
    width: 80% !important;
    max-width: 400px;
    height: auto !important;
    margin: 15px auto 0 !important;
  }

  /* ============================================
     EN DEUX MOTS
     ============================================ */
  .en-deux-mots {
    margin: 0 !important;
    padding: 50px 0;
  }

  .l-constrained {
    height: auto !important;
  }

  .image {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto 20px !important;
    display: block;
    width: clamp(200px, 55vw, 380px);
  }

  .sticker {
    display: none;
  }

  .texte-2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Titre "L'huile d'olive, EN DEUX MOTS" */
  .text-6 {
    margin: 0 !important;
    font-size: clamp(1.7em, 4.55vw, 2.86em);
    line-height: 1.2em;
    text-align: center;
  }

  .wrapper-2 {
    height: auto !important;
    width: 100% !important;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
  }

  .text-7 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
    order: 1;
  }

  .rectangle-7-holder {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 17px 0 0 15% !important;
    width: 85% !important;
    padding: 20px 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    font-size: clamp(0.85em, 1.7vw, 1.15em);
    line-height: 1.15 !important;
    order: 3;
    z-index: 1 !important;
  }

  .et-surtout {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: clamp(100px, 20vw, 170px);
    height: auto !important;
    margin: 15px 0 -40px 0 !important;
    z-index: 50 !important;
    order: 2;
  }
  .layer-14 {
    display: none;
  }

  /* ============================================
     NATURELLE
     ============================================ */
  .naturelle {
    margin: 0 !important;
    background-position: center top !important;
    padding-bottom: 40px;
  }

  .row-2 {
    margin: 0 !important;
  }

  .col-14 {
    float: none !important;
    width: 100% !important;
    margin: 40px 0 0 0 !important;
  }

  /* Titre "UNE HUILE naturelle, COMME ON AIME" */
  .text-9 {
    font-size: clamp(1.95em, 5.85vw, 3.9em);
    line-height: 1.1em;
    text-align: center;
  }

  .text-10 {
    width: 100% !important;
    margin: 25px 0 0 0 !important;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
  }

  .layer-15 {
    float: none !important;
    display: block;
    margin: 30px auto 40px;
    width: 80%;
    max-width: 400px;
  }

  .wrapper-9 {
    height: auto !important;
    width: 100% !important;
    margin: 30px 0 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cropped-hands-man-holding-olives-tarpaulin,
  .close-up-hand-holding-coffee-cup {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 20px auto 0 !important;
    display: block;
    width: 85%;
    max-width: 400px;
  }

  .text-11 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 25px 0 0 0 !important;
    width: 100% !important;
    padding: 0 24px;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
  }

  .layer-16 {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: clamp(40px, 8vw, 60px);
    height: auto !important;
    margin: 15px 0 -30px 4px !important;
    z-index: 50 !important;
    order: 4;
    align-self: flex-start;
  }

  .rectangle-7-copie-4-holder {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 12px 0 0 5% !important;
    width: 95% !important;
    padding: 25px 20px 15px 20px !important;
    order: 5;
    font-size: clamp(0.85em, 1.7vw, 1.15em);
    line-height: 1.15em !important;
    z-index: 1 !important;
  }

  /* ============================================
     TOUT BON
     ============================================ */
  .tout-bon {
    height: auto !important;
    margin: 0 !important;
    overflow: visible;
  }

  .text-13 {
    display: none;
  }

  .col-11 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 50px 0 30px;
  }

  .row-3 {
    width: 100% !important;
    right: auto !important;
    margin: 0 !important;
  }

  .col-15 {
    float: none !important;
    width: 100% !important;
    padding: 0 24px;
  }

  /* Titre "une huile qui a tout bon" */
  .text-14 {
    margin: 0 !important;
    font-size: clamp(1.7em, 4.55vw, 2.86em);
    line-height: 1.2em;
    text-align: center;
  }

  .text-15 {
    left: auto !important;
    width: 100% !important;
    margin: 25px 0 0 0 !important;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
  }

  .sticerk {
    width: clamp(100px, 20vw, 170px);
    margin: 5px 0 -55px -20px;
    position: relative;
    z-index: 50 !important;
  }

  .rectangle-7-copie-2-holder {
    margin: 29px auto 0 auto !important;
    width: 85% !important;
    padding: 30px 15px 10px 15px !important;
    font-size: clamp(0.75em, 1.5vw, 1em);
    line-height: 1.3 !important;
    white-space: normal;
    z-index: 1 !important;
    text-align: center;
  }

  .ce-line-de-ce-rou-pour-france-olive-2022-362-copie {
    float: none !important;
    display: block;
    margin: 30px auto 50px;
    width: 80%;
    max-width: 380px;
  }

  /* Notes de bas / mentions légales */
  .text-17 {
    left: auto !important;
    width: 100% !important;
    padding: 0 24px;
    margin: 25px auto 0 !important;
    font-size: clamp(0.7em, 1.3vw, 0.9em);
    line-height: 1.05;
  }

  /* ============================================
     NOUS C'EST COPEXO
     ============================================ */
  .nous-c-est-copexo {
    margin: 0 !important;
    padding: 50px 0 60px !important;
    background-image: none !important;
    position: relative;
  }
  .nous-c-est-copexo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/fond.png) no-repeat center top;
    background-size: cover;
    opacity: 0.3;
    z-index: 0;
  }
  .nous-c-est-copexo > * {
    position: relative;
    z-index: 1;
  }

  /* Titre "enchanté, NOUS C'EST COPEXO !" */
  .text-18 {
    margin: 0 !important;
    font-size: clamp(1.95em, 5.85vw, 3.9em);
    line-height: 1.1em;
    text-align: center;
  }

  .calque-129 {
    left: auto !important;
    margin: 15px auto 0 !important;
    display: block;
    width: clamp(200px, 35vw, 300px);
  }

  .text-19 {
    left: auto !important;
    width: 100% !important;
    margin: 20px 0 0 0 !important;
    font-size: clamp(0.875em, 1.8vw, 1.25em);
    line-height: 1.2em;
    text-align: left;
  }

  .en-bref {
    left: auto !important;
    margin: 25px 0 -40px !important;
    width: clamp(90px, 15vw, 140px);
    position: relative;
    z-index: 50 !important;
  }

  .rectangle-7-copie-3-holder {
    left: auto !important;
    width: 98% !important;
    margin: 36px 0 0 0 !important;
    font-size: clamp(0.75em, 1.5vw, 1em) !important;
    padding: 20px 15px 20px 15px !important;
    min-height: 0 !important;
    z-index: 1 !important;
  }
  .text-20 {
    width: 100% !important;
    font-size: clamp(0.85em, 1.7vw, 1.15em);
    line-height: 1.15em;
  }

  .text-21 {
    font-size: clamp(0.85em, 1.7vw, 1.15em);
    margin-top: 30px;
    text-align: center;
  }

  /* ============================================
     FOOTER
     ============================================ */
  .footer {
    margin: 0 !important;
    padding: 40px 0;
    text-align: center;
  }

  /* "SUIVEZ-NOUS SUR LES Réseaux" */
  .text-22 {
    margin: 0 !important;
    font-size: clamp(1.56em, 3.9vw, 2.6em);
    text-align: center;
  }

  .wrapper {
    margin: 25px auto 0 !important;
    left: auto !important;
    display: flex;
    justify-content: center;
    gap: 15px;
    width: auto !important;
    height: auto !important;
  }
  .wrapper .objet-dynamique-vectoriel-copie-16,
  .wrapper .calque-108-copie-2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    width: clamp(55px, 10vw, 90px);
    height: auto;
  }

  /* Mentions légales - mobile */
  .mentions-legales-link {
    font-size: 0.85em;
    margin: 20px 0 0;
  }

  /* Modal - mobile */
  .modal-content {
    width: 95%;
    padding: 24px 20px;
    max-height: 90vh;
    font-size: 0.85em;
  }
  .modal-content h2 {
    font-size: 1.4em;
  }

  /* Contact bar - mobile */
  .contact-bar {
    padding: 20px 20px;
  }
  .contact-info {
    flex-direction: column;
    gap: 5px;
    font-size: 0.85em;
    text-align: center;
  }
  .contact-logo {
    height: 40px !important;
  }
}