/* ===== Section header ===== */
.lazy-img {
  filter: blur(12px);
  transform: scale(1.05);
  transition: filter .6s ease, transform .6s ease;
}
.lazy-img[data-loaded="true"] {
  filter: blur(0);
  transform: scale(1);
}


.ap-section-head{ text-align:center; margin-bottom:clamp(24px,4vw,48px); }
.ap-section-title{ font-weight:700; font-size:clamp(1.6rem,2vw+1rem,2.4rem); margin:0 0 8px; color:#111; }
.ap-section-sub{ margin:0; color:#555; font-size:1rem; }

/* ===== Galerie bandeau avec Swiper ===== */
.ap4-strip{ padding:clamp(24px,5vw,56px) 0; background:var(--beige); }
.strip{ display:grid; gap:16px; }
.strip-row{
  --row-h: clamp(160px, 24vh, 240px);
  height: var(--row-h);
  border-radius:18px;
  overflow:hidden;
  background: transparent;
}

/* Swiper base */
.swiper{ height:100%; }
.swiper-wrapper{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition-timing-function: linear !important; /* défilement linéaire (pas d’easing) */
}

/* Slides: largeur auto + ratio fixe => pas de distorsion */
.swiper-slide{
  width: clamp(220px, 28vw, 360px) !important; /* auto width pour “carrousel infini” */
  height: 100%;
  display: flex; align-items: stretch;
}
.strip-item{
  display:block; width:100%; height:100%;
  aspect-ratio: 4 / 3;                /* ratio garanti */
  border-radius:16px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.strip-item img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.02) contrast(1.02);
}

/* Hover (desktop) */
@media (pointer:fine){
  .strip-item:hover img{ transform:scale(1.05); filter:saturate(1.08) contrast(1.05); }
}

/* Mobile: swipe tactile confortable */
@media (max-width: 991.98px){
  .swiper-slide{ width: 80vw !important; }
  .strip-row{ border-radius:14px; }
}

/* A11Y: moins d’anim si demandé */
@media (prefers-reduced-motion: reduce){
  .swiper, .swiper-wrapper{ transition:none !important; }
}



/* ========= Skeleton + animation de révélation ========= */
.strip-item{ position: relative; display:block; width:100%; height:100%; border-radius:16px; overflow:hidden; }

/* Skeleton shimmer (visible tant que l'image n'est pas "ready") */
.has-skeleton::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.06) 60%) ,
    #f0f2f3;
  background-size: 200% 100%, cover;
  animation: apShimmer 1.2s linear infinite;
  z-index: 1;
}
@keyframes apShimmer{
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}

/* Image cachée au départ (évite flash moche) */
.lazy-img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity: 0; transform: scale(1.02);
  filter: blur(10px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}

/* Quand l'image est décodée et prête */
.lazy-img[data-ready="true"]{
  opacity: 1; transform: scale(1); filter: blur(0);
}

/* Retire le skeleton avec un fondu */
.has-skeleton.is-loaded::before{
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}

/* Option: réduit l'effet sur prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .lazy-img{ transition: opacity .2s ease; transform:none; filter:none; }
  .has-skeleton::before{ animation: none; }
}




/* === Titres de section (réutilisable) === */
.ap-section-head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.ap-section-title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}
.ap-section-sub {
  font-size: 1rem;
  color: #555;
  margin: 0;
}


/* === Modale === */
.ap-modal{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
  z-index: 2000; padding: 24px;
}
.ap-modal.is-open{ display: grid; animation: fadeIn .22s ease; }
.ap-modal img{ max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.ap-modal-close{
  position: absolute; top: 20px; right: 24px; width: 40px; height: 40px;
  border: none; border-radius: 999px; background: rgba(255,255,255,.85);
  font-size: 2rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease;
}
.ap-modal-close:hover{ background: #fff; }
@keyframes fadeIn{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }




/* ========== ABOUT / NOTRE HISTOIRE (BEM light) ========== */
/* variables projet déjà présentes :
   --beige, --green, --green-600, --black, --ink
   On ajoute des teintes locales avec fallback. */
/* ========== ABOUT (scopé pour éviter les conflits) ========== */
:root{
  --about-bg: var(--beige, #FFF8EC);
  --about-ink: var(--ink, #0e1111);
  --about-muted: #6b7280;
  --about-card: #ffffff;
  --about-border: #e5e7eb;
  --about-accent: var(--green, #0a7a4b);
  --fp-accent: #0a7a4b;    /* vert accent / progress bar */

}

/* ========== ABOUT CTA (compat avec intro-cta) ========== */
.about-cta{ background: transparent; padding: 0 !important; }

/* Grille principale */
.about-cta .ab-wrap{
  max-width: 1200px; margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 32px);
  display: grid; gap: clamp(24px, 5vw, 46px); align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

/* Texte */
.about-cta .ab-copy > * + *{ margin-top: clamp(8px, 1.2vh, 16px); }
.about-cta .ab-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; font-size:.8rem; color:var(--fp-accent);
}
.about-cta .ab-title{
  font-family: var(--title-font);
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.15;
  color: var(--fp-accent);
  margin:.2rem 0 .2rem;
}
.about-cta .ab-sub{
  font-size: clamp(15px, 1.2vw, 18px);
  color:#374151;
  margin:0 0 .2rem;
}

/* Badge rating (copie stylée) */
.about-cta .ab-rating{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .7rem; border-radius:999px; font-weight:600;
  color:#111827; background:#f3f4f600;
  border:1px dashed var(--fp-accent);
  margin: .6rem 0 1.6rem; transition: all .3s ease-out;
}
.about-cta .ab-rating:hover{ color:var(--fp-accent); background:rgba(10,122,75,.06); }
.about-cta .ab-star{ color:#fbbf24; display:inline-flex; }
.about-cta .ab-score{ font-weight:700; }
.about-cta .ab-out, .about-cta .ab-src{ opacity:.75; }

/* Liste infos */

.g-rating {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #111827;
    background: #f3f4f600;
    transition: all .3s ease-out;
}

.about-cta .ab-facts{
  list-style:none; margin:0 0 1rem; padding:0;
  font-size: 14px;
  line-height: 1;
  display:grid; gap:.6rem;
}
.about-cta .ab-facts li{
  align-items:start; 
  color:#111827;
}
.about-cta .ab-facts i{ color:var(--fp-accent); margin-top:.15rem; }

/* Boutons */
.about-cta .ab-buttons{ display:flex; gap:.9rem; flex-wrap:wrap; }
.about-cta .ab-btn{
  padding:.95rem 1.35rem; border-radius:12px; font-weight:600;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; gap:.45rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.about-cta .ab-btn-green{
  background:var(--fp-accent); color:#fff; border:1px solid var(--fp-accent);
  box-shadow:0 8px 22px rgba(10,122,75,.18);
}
.about-cta .ab-btn-green:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(10,122,75,.24); }
.about-cta .ab-btn-outline{
  background:transparent; color:var(--fp-accent); border:1.5px solid var(--fp-accent);
}
.about-cta .ab-btn-outline:hover{ background:rgba(10,122,75,.06); }

/* Illustration */
.about-cta .ab-illu img{
  width: 600px; max-width: 800px; display:block; margin-left:auto;
  border-radius:16px; object-fit:cover; aspect-ratio: 3 / 2;
}

/* Responsive */
@media (max-width: 992px){
    .about-cta .ab-title {
        font-size: 34px;
        margin-bottom: 1.5rem;
    }


  .about-cta .ab-wrap{ grid-template-columns: 1fr; text-align:center; }
  .about-cta .ab-illu img{ margin: 6px auto 0; width:100%; max-width:400px; }
  .about-cta .ab-buttons{ justify-content:center; }
}


/*==========================================
  Categories
===========================================*/
.menu-cards { background: var(--beige); }

/* ====== GRID ====== */
.cat-grid{
  --gap: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 12px;
}
@media (max-width: 1200px){ .cat-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){  .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){  .cat-grid{ grid-template-columns: 1fr; } }

/* ====== CARD ====== */
.cat-card{ list-style: none; }
.cat-link{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: inherit;
}
.cat-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.cat-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  isolation: isolate; /* pour superposer proprement l’overlay */
}
.cat-card__media img{
  width: 100%; height: 100%;
  object-fit: cover; display:block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.cat-link:hover .cat-card__media img{
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.05);
}

/* ====== OVERLAY linéaire (remplace l'ancien radial) ======
   Ancien : radial-gradient(80% 120% at 50% 100%, rgba(10, 122, 75, .35), transparent 60%)
   Nouveau : linéaire du transparent vers un vert sombre translucide */
.cat-card__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 40%,
      rgba(10, 122, 75, 0.336) 100%
    );
  z-index: 1; /* sous la légende */
}

/* ====== BADGE ====== */
.cat-card__badge{
  position:absolute; top:10px; right:10px;
  min-width: 28px; 
  height:28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#0f1110;
  font: 700 13px/28px Inter,system-ui,sans-serif;
  text-align:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 2;
}

/* ====== CAPTION (titre par-dessus l'image) ====== */
.cat-card__caption{
  position: absolute;
  inset: auto 12px 12px 12px; /* bottom spacing */
  z-index: 2;
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.219);      /* légère teinte vert/profond */
  backdrop-filter: blur(2px);              /* effet verre dépoli moderne */
  -webkit-backdrop-filter: blur(6px);
}
.cat-card__title{
  margin: 0;
  font: 800 18px/1.2 Inter,system-ui,sans-serif;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.35);
}

/* figure dans la carte : enlever le margin par défaut */
.cat-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  isolation: isolate;
  margin: 0;          /* <-- fix: retire l'espace blanc */
  display: block;     /* pour être sûr que l'élément occupe toute la largeur */
}




/* ========== SKILL CTA (miroir de about-cta) ========== */
/* Section miroir corrigée */
.skill-cta .sk-wrap{
  max-width: 1200px; margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px);
  display: grid; gap: clamp(24px, 5vw, 60px);
  align-items: center;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

/* Image mieux cadrée */
.skill-cta .sk-illu img{
  width: 100%; max-width: 540px;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 3/2;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Texte */
.skill-cta .sk-copy > * + *{ margin-top: clamp(8px, 1.2vh, 16px); }
.skill-cta .sk-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; font-size:.8rem; color:var(--fp-accent);
}
.skill-cta .sk-title{
  font-family: var(--title-font);
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.15;
  color: var(--fp-accent);
  margin:.2rem 0 .2rem;
}
.skill-cta .sk-sub{
  font-size: clamp(15px, 1.2vw, 18px);
  color:#374151;
  margin:0 0 .2rem;
}

/* Points clés */
.skill-cta .sk-points{
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: grid;
    gap: .6rem;
}
.skill-cta .sk-points li{
  display:grid; grid-template-columns: 22px 1fr; gap:.6rem; align-items:start;
  color:#111827;
}
.skill-cta .sk-points i{ color: var(--fp-accent)!important; margin-top:.15rem; }

.icon {
    color: var(--fp-accent) !important;
}

/* Boutons */
.skill-cta .sk-buttons{
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.skill-cta .sk-btn{
  padding: .9rem 1.4rem;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none;
  min-height: 44px;
}
.skill-cta .sk-btn-green{
  background: var(--fp-accent); color: #fff; border: 1px solid var(--fp-accent);
  box-shadow: 0 6px 18px rgba(10,122,75,.18);
}
.skill-cta .sk-btn-green:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(10,122,75,.24); }
.skill-cta .sk-btn-outline{
  background: transparent; color: var(--fp-accent); border: 1.5px solid var(--fp-accent);
}
.skill-cta .sk-btn-outline:hover{ background: rgba(10,122,75,.06); }





/* Responsive */
@media (max-width: 992px){
  .cat-grid {
    padding: 0;
  }

  .skill-cta .sk-wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .skill-cta .sk-copy{
    max-width: 100%; margin: 0 auto;
  }
  .skill-cta .sk-illu img{
    margin: 0 auto 1.5rem;
    max-width: 400px;
  }
  .skill-cta .sk-points{ text-align: left; margin-left: auto; margin-right: auto; max-width: 420px; }
  .skill-cta .sk-buttons{ justify-content: center; }
}