:root{
  --vert:#3f8f7a;
  --gris:#e6e6e2;
  --texte:#2b2b2b;
  --meandres: #3E8F7B;         /* vert principal */
  --meandres-dark:#2E6D5F;     /* hover / titres */
  --ink: #1B1F22;              /* texte */
  --muted:#5D6B6A;
  --paper:#F4F7F5;             /* fond clair */
  --panel:#FFFFFF;             /* cartes */
  --line:#DDE6E3;              /* bordures */
  --shadow: 0 12px 34px rgba(0,0,0,.10);
  --radius: 18px;
}



    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--paper);
    }

    /* Navbar */
    .brand{
      font-weight: 800;
      letter-spacing: .06em;
      color: var(--meandres) !important;
    }
    .brand small{
      display:block;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: lowercase;
      opacity:.9;
      margin-top:-2px;
    }
    .nav-link{ color: var(--ink); opacity:.9; }
    .nav-link:hover{ color: var(--meandres-dark); }



    /* Hauteur de navbar (ajuste au besoin) */
    :root{
      --nav-offset: 84px; /* desktop */
    }

    /* Quand on navigue vers une ancre (#...), le navigateur garde un espace en haut */
    html{
      scroll-padding-top: var(--nav-offset);
    }

    /* Bonus: si tu cliques une ancre qui est sur un élément précis, il respecte aussi l’offset */
    [id]{
      scroll-margin-top: var(--nav-offset);
    }

    /* Mobile: navbar souvent plus haute (brand sur 2 lignes + toggler) */
    @media (max-width: 991.98px){
      :root{
        --nav-offset: 124px; /* mobile/tablette */
      }
    }


     /* Fix Chrome Android: remplace sticky par fixed sur MOBILE seulement */
    @media (max-width: 768px){
      #mainNav{
        position: fixed;
        top: var(--vv-top, 0px); /* <-- la clé */
        left: 0;
        right: 0;
        z-index: 1030;
        background: #fff; /* assure opaque */
        transform: translate3d(0,0,0);
        will-change: top;
        contain: paint;
      }

      /* Le contenu doit descendre du navbar + du vv-top */
      body{
        padding-top: calc(var(--nav-h, 96px) + var(--vv-top, 0px));
      }
    }



.hero{
  position:relative;
  height:70vh;
  overflow:hidden;
}

.hero-bg{
  width:100%;
  height:100%;
  object-fit:cover;
}


.meandre{
  position:absolute;
  top:20%;
  left:0;
  width:100%;
  opacity:0.9;
}




.hero-text{
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  background:rgba(230,230,226,0.85);
  padding:2rem 3rem;
}

.hero h1{ margin:0; font-size:3rem; }
.hero h2{ margin:0; letter-spacing:0.2em; color:#2f6f8f; }



/* IMPORTANT: on garde 768px ici pour que:
   - tablette "portrait" reste visuellement en mobile
   - tablette "landscape" reste en desktop
   L'image mobile est gérée par <picture> dans le html (breakpoint séparé). */


    @media (max-width: 768px){
      .hero{
        height: 42vh;
        min-height: 260px;
        max-height: 420px;
      }
    }

    @media (max-width: 768px){
      .hero-bg{
         object-position: center top;
       }
     }

    /* Sections */
    section{
      padding: 84px 0;
    }
    .section-title{
      font-weight: 800;
      letter-spacing:.02em;
      margin:0 0 10px 0;
    }
    .section-kicker{
      color: var(--meandres-dark);
      font-weight: 1000;
      letter-spacing:.08em;
       /* text-transform: uppercase; */
      font-size: 18px;
      margin-bottom: 10px;
    }
    .section-lead{
      color: var(--muted);
      max-width: 72ch;
      margin: 0;
    }



    /* Cards (images + étiquette) */
    .shot{
      display: flex;
      flex-direction: column;background: var(--panel);
      border: 1px solid var(--line);
     /*border-radius: var(--radius);*/
      border-radius: calc(var(--radius) + 6px);
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,.06);
      height: 100%;
      margin: 0;
    }
    .shot .img-wrap{
      flex: 1 1 auto;
      aspect-ratio: 16 / 10;
      width: auto;
      height: auto;
      background:#E9EFEC;
      overflow:hidden;
    }
    .shot img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .shot .label{
      padding: 10px 14px;
      font-size: 14px;
      color: var(--ink);

      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 12px;
        
      /*background: rgba(244,247,245,0.9);  */
      background: #F9FCFA; /* plus clair que --paper */

      /* évite l'effet "bande blanche qui jure" */
      border-top: 1px solid rgba(0,0,0,.06);

      /* enlève tout espace inutile */
      margin: 0;
      line-height: 1.2;
    }

    .tag{
      font-size: 12px;
      color: var(--meandres-dark);
      border: 1px solid rgba(62,143,123,.35);
      background: rgba(62,143,123,.08);
      padding: .20rem .55rem;
      border-radius: 999px;
      white-space: nowrap;
    }


    /* Le bandeau du bas */
    .label{
      margin-top: auto;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 6px 12px;

      background: var(--paper); /* même vert pâle */
      border-top: 1px solid rgba(0,0,0,0.06);

      /* Hauteur harmonisée (ajuste à ton goût: 78–96px typiquement) */
      min-height: 66px;
    }

    /* 60% texte */
    .label-desc{
      flex: 0 0 60%;
      max-width: 60%;
      line-height: 1.25;
    }

    /* 40% tags (wrap automatique) */
    .label-tags{
      flex: 0 0 40%;
      max-width: 40%;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      align-content: flex-start;
    }

    /* Chaque tag */
    .label .tag{
      display: inline-flex;
      white-space: nowrap;
    }

    /* Section separators (small meandre) */
    .meander-sep{
      width:100%;
      height: 86px;
      opacity: .32;
      margin: 18px 0 -18px 0;
      pointer-events:none;
    }

 
    /* Présentation Méandres */
    .presentation{
      border-bottom: 1px solid var(--line);
    }

    .presentation p{
      max-width: 72ch;
      color: var(--ink);
    }


    /* CTA / Contact */
    .contact{
      background: linear-gradient(180deg, rgba(62,143,123,.08), rgba(62,143,123,.02));
      border-top: 1px solid var(--line);
    }
    .contact-card{
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) + 4px);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    .btn-meandres{
      background: var(--meandres);
      border-color: var(--meandres);
      color:#fff;
      border-radius: 999px;
      padding: .70rem 1.0rem;
      font-weight: 650;
    }
    .btn-meandres:hover{
      background: var(--meandres-dark);
      border-color: var(--meandres-dark);
      color:#fff;
    }


    /* Démarche "marketing" (3 colonnes) */
    .marketing{
      /* on ne touche pas au padding ici : la règle section{} s’applique */
      background-color: #ffffff;
    }

    .demarche-icon{
      width: 100%;
      max-width: 220px;     /* taille “marketing” équilibrée */
      height: auto;
      object-fit: contain;
      background: transparent;
      padding: 0;
      border: none;
      box-shadow: none;
      margin: 0 auto 1rem auto; /* centré + espace sous l’image */
      display: block;
    }

    .demarche-list{
      display: inline-block;        /* garde la liste centrée visuellement */
      text-align: left;             /* lisible */
      margin: 0.5rem auto 0;
      padding-left: 1.1rem;
      max-width: 42ch;
    }

    /* Pour que les ancres (nav sticky) tombent bien */
    #portrait, #diagnostic, #strategie{
      scroll-margin-top: 90px;
    }






    /* --- Carrousel "Mise-en-oeuvre" --- */
    .tools-carousel{
      padding-bottom: 1.75rem; /* un peu moins que 2.25rem */
    }

    /* Zone cliquable */
    .tools-carousel .carousel-control-prev,
    .tools-carousel .carousel-control-next{
      width: 4.25rem;
      opacity: 1;
    }

    /* IMPORTANT: on neutralise tout filtre éventuel */
    .tools-carousel .carousel-control-prev-icon,
    .tools-carousel .carousel-control-next-icon{
      filter: none !important;
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 999px;

      /* pastille */
      background-color: rgba(255,255,255,.62);
      /*box-shadow:
        0 0 0 6px rgba(255,255,255,.55),
        0 12px 26px rgba(0,0,0,.22);*/
      border: 1px solid rgba(0,0,0,.10);

      /* on remplace l’icône bootstrap par un chevron plus épais */
      background-size: 68% 68%;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Chevron gauche (épais) */
    .tools-carousel .carousel-control-prev-icon{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 L5 8 l5.5 5.5' fill='none' stroke='%231B1F22' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Chevron droit (épais) */
    .tools-carousel .carousel-control-next-icon{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 L11 8 l-5.5 5.5' fill='none' stroke='%231B1F22' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }


    /* Indicateurs (petits points) */
    .tools-carousel .carousel-indicators{
      margin-bottom: -1rem;
    }
    .tools-carousel .carousel-indicators [data-bs-target]{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background-color: #000 !important;
      opacity: .35;
    }

    .tools-carousel .carousel-indicators .active{
      background-color: #000 !important;
      opacity: 1;
    }


    /* Retire la bande plus foncée: ombres qui s'additionnent dans le gutter */
    .tools-carousel .shot{
      box-shadow: none;
    }
   

    @media (max-width: 767.98px){
      .tools-carousel .carousel-control-prev,
      .tools-carousel .carousel-control-next{
        width: 44px;
      }

      .tools-carousel .carousel-control-prev{
        left: 6px;
      }

      .tools-carousel .carousel-control-next{
        right: 6px;
      }
    }





    .contact a{
      color: inherit;
      text-decoration: none;
    }

    .contact a:hover{
      text-decoration: underline;
    }


    /* Cartes contact – version "personne" (outline) */
    .contact-card--outline{
      background: transparent;
      border: 1px dashed rgba(62,143,123,.45); /* vert meandres, discret */
      box-shadow: none;
    }

    .contact-card--outline:hover{
      background: rgba(62,143,123,.03);
      border-style: solid;
    }




    footer{
      background:#777777;
      color:#f2f2f2;
      margin:0;                 /* évite toute marge parasite */
      padding:14px 0;           /* ↓ réduit la marge haut/bas */
      font-size:.85rem;
      border-top:1px solid rgba(255,255,255,.08);
    }

    /* IMPORTANT : force le même alignement que tes autres sections */
    footer .container{
      margin: 0 auto;
      padding-left: var(--bs-gutter-x, 1.5rem);
      padding-right: var(--bs-gutter-x, 1.5rem);
    }


    footer a{
      color: #f2f2f2;
      text-decoration: none;
      opacity: .9;
    }

    footer a:hover{
      text-decoration: underline;
      opacity: 1;
    }