/* ================================================================
   FEDET  -  distribution-alimentaire.html (styles spécifiques page)
   Référence desktop 1280px  -  capture live geo-distribution.json
   ================================================================ */

/* ---------- Section About us ---------- */
.about-us {
  position: relative;
  z-index: 9;
  background: #fafafa;
  padding: 80px 0;
  overflow-x: clip; /* contient le décalage de révélation (translateX) sans casser la parallaxe */
}
.about-inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* En-tête centré : eyebrow + H2 */
.about-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  line-height: 22px;
}
.eyebrow-badge svg { flex-shrink: 0; }
.about-title { text-align: center; }
.about-title .blue { color: var(--blue); }

/* ---------- Rangées image / texte ---------- */
.about-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.about-row .row-media {
  flex: 1;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.about-row .row-media img.parallax {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  will-change: transform;
}
.about-row .row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.about-row h2 {
  font-family: var(--sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--black);
}
.about-row p { max-width: 510px; }

/* Rangée 2 : texte décalé (~x131 sur le live) */
.row-inset { padding-left: 56px; }

/* Ligne USP (icône + texte) */
.usp {
  display: flex;
  align-items: center;
  gap: 10px;
}
.usp svg { flex-shrink: 0; }
.usp p {
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.shop-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Punchline sombre 22px/700 */
.pull-line {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--black);
}

/* ---------- Témoignages ---------- */
.reviews-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.reviews-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.reviews-heading h2 {
  max-width: 620px;
  font-family: var(--sans);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -1.8px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.review-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  border: 1px solid rgba(36, 81, 159, 0.14);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(9, 9, 9, 0.05);
}
.review-card blockquote {
  font-family: var(--sans);
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.7px;
  color: var(--black);
}
.review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.review-card figcaption strong {
  color: var(--blue-dark);
  font-size: 18px;
}
.review-card figcaption span {
  color: var(--ink);
  font-size: 15px;
}
.review-card figcaption small {
  margin-top: 5px;
  color: var(--gray);
  font-size: 12px;
}

/* ---------- Offre solidaire ---------- */
.offer-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 42px;
  padding: 42px 52px;
  border-radius: 24px;
  background: var(--blue-dark);
  color: var(--white);
}
.offer-price {
  font-family: var(--sans);
  font-size: clamp(76px, 10vw, 136px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -7px;
  white-space: nowrap;
}
.offer-copy .eyebrow { color: rgba(255, 255, 255, 0.72); }
.offer-copy h2 {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: clamp(34px, 4.3vw, 58px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -2px;
}
.offer-copy > p:last-child {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Adresses et cartes Google Maps ---------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.location-card {
  padding: 24px;
  border: 1px solid rgba(9, 9, 9, 0.1);
  border-radius: 20px;
  background: var(--white);
}
.location-card .eyebrow { color: var(--blue); }
.location-card h2 {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
}
.location-card > p:not(.eyebrow) {
  margin: 6px 0 20px;
  color: var(--gray);
}
.map-embed {
  width: 100%;
  height: 347px;
  border-radius: 20px;
  overflow: hidden;
  filter: grayscale(1);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Ticker bleu plein (spécifique à cette page) ---------- */
.ticker-blue {
  background: var(--blue);
  z-index: 9;
}
/* Spec page : ~40px d'écart entre items (base.css partagé : 48px) */
.ticker-blue .ticker-track { gap: 40px; }

/* ---------- Animations d'apparition ---------- */
/* Bloc : translateY(30px) scale(.9) -> normal */
.pop {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.pop.visible { opacity: 1; transform: none; }

/* Mot à mot : blur(10px) + translateY(10px) -> visible (délais posés en JS) */
.wr .w {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
}
.wr.visible .w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ================================================================
   Responsive  -  Framer : >=1200 desktop / 810-1199 tablette / <=809 phone
   ================================================================ */
@media (max-width: 1199px) {
  .about-inner { gap: 60px; }
  .about-row h2 { font-size: 38px; line-height: 52px; }
  .about-row .row-media { height: 381px; }
}

@media (max-width: 809px) {
  .about-us { padding: 60px 0; }
  .about-inner { gap: 40px; }
  .about-title { letter-spacing: -1px; }
  .about-row,
  .about-row.row-flip { flex-direction: column; gap: 20px; align-items: stretch; }
  .locations-grid { grid-template-columns: 1fr; }
  .reviews-heading { align-items: flex-start; flex-direction: column; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { min-height: 0; padding: 24px; }
  .offer-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 24px;
  }
  .offer-price { font-size: clamp(72px, 24vw, 104px); letter-spacing: -5px; }
  .offer-copy h2 { letter-spacing: -1.2px; }
  .location-card { padding: 18px; }
  .location-card h2 { font-size: 27px; }
  .about-row.row-flip .row-content { order: 1; }
  .about-row.row-flip .row-media { order: 2; }
  .about-row .row-media { width: 100%; height: min(300px, 46vh); flex: none; }
  .about-row h2 { font-size: 30px; line-height: 32px; letter-spacing: -0.4px; }
  .about-row p { max-width: none; }
  .row-inset { padding-left: 0; }
  .usp { justify-content: center; width: 100%; }
  .usp svg { display: none; }
  .usp p { font-weight: 700; text-align: center; }
  .map-embed { height: 260px; }
  /* Bouton CTA pleine largeur sur téléphone */
  .about-row .btn-blue { width: 100%; text-align: center; }
}

/* ---------- Footer : lettres FEDET animées à l'entrée à l'écran (cohérent team/404) ---------- */
.site-footer .footer-brand span { animation-play-state: paused; }
.site-footer .footer-brand.visible span { animation-play-state: running; }

/* ================================================================
   Ajouts  -  logo texte, icônes ticker, zoom images, micro-interactions
   ================================================================ */

/* Monogramme FEDET dans la nav  -  repli à spécificité nulle : la règle
   .logo-mark de base.css (ajoutée côté home) prime si elle existe. */
:where(.logo-mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 85px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Astérisque blanc du ticker (remplace les icônes surf du template) */
.ticker-track .tick-star { flex-shrink: 0; }
@media (max-width: 809px) {
  .ticker-track .tick-star { width: 28px; height: 28px; }
}

/* Zoom doux au survol des images de rangée  -  wrapper interne pour ne pas
   entrer en conflit avec le transform inline de la parallaxe (anim.js). */
.row-media .zoom-wrap {
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.row-media:hover .zoom-wrap { transform: scale(1.05); }

/* Punchline : révélation par clip-path (inset 0 100% 0 0 -> 0) */
.pull-line[data-reveal] {
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pull-line[data-reveal].in-view { clip-path: inset(0 0 0 0); }

/* Le « 3 » géant : scale-in avec léger dépassement (ressort) */
.price-heading .p-3 {
  transform-origin: 50% 100%;
  transform: translateY(16px) scale(0.6);
  transition:
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.price-heading.visible .p-3 { transform: none; }

/* Bouton magnétique : le transform est piloté en rAF (JS inline)  - 
   on retire la transition transform de base.css pour éviter le lag,
   mais on CONSERVE la transition opacity pour le reveal (anim.css est
   battu en spécificité par cette règle). Le reveal du bouton = fondu
   seul : l'état caché ne le translate pas, pour éviter tout saut de
   position quand .in-view arrive (transform réservé au rAF). */
.btn-blue.magnetic {
  transition:
    background 0.3s ease,
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-blue.magnetic[data-reveal] { transform: none; }
.btn-blue .btn-label {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-blue:hover .btn-label { transform: translateX(3px); }

/* ---------- prefers-reduced-motion : ajouts statiques ---------- */
@media (prefers-reduced-motion: reduce) {
  .pull-line[data-reveal] { clip-path: none !important; }
  .row-media .zoom-wrap { transition: none !important; }
  .row-media:hover .zoom-wrap { transform: none !important; }
  .price-heading .p-3 { transform: none !important; }
  .btn-blue.magnetic { transform: none !important; }
  .btn-blue:hover .btn-label { transform: none !important; }
}