/**
 * Page « L'Économie collaborative, c'est quoi ? »
 * Desktop 590:10829 · Mobile 590:11040 — specs validées étape 1
 *
 * Desktop (viewport 1440) : padding section 130px L/R → zone contenu 1180px
 */

.eco-page {
  --eco-bg: #f7f9fc;
  --eco-bg-alt: #f0f4f8;
  --eco-ink: #071a35;
  --eco-body: #262626;
  --eco-purple: #7c3aed;
  --eco-purple-border: #7d3bed;
  --eco-callout-bg: #e8f0fc;
  /* Desktop Figma */
  --eco-pad-x: 130px;
  --eco-content: 1180px;
  background: var(--eco-bg);
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.eco-page *,
.eco-page *::before,
.eco-page *::after {
  box-sizing: border-box;
}

/* Contre * { Quicksand; font-weight:400 } du wall — sans toucher aux titres Quicksand */
.eco-page p,
.eco-page span,
.eco-page li,
.eco-page h3 {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

/* Contre h1/h2 globaux (style-last Montserrat, index-remi 40pt…) */
.eco-page h1,
.eco-page h2 {
  margin: 0;
  padding: 0;
  color: var(--eco-ink);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.eco-page a {
  text-decoration: none;
}

.eco-page a:hover,
.eco-page a:focus {
  text-decoration: none !important;
}

/* Conteneur interne : largeur contenu, SANS padding horizontal supplémentaire */
.eco-hero__inner,
.eco-sectors__inner,
.eco-editorial__inner,
.eco-strategies__inner,
.eco-callout-wrap__inner {
  width: 100%;
  max-width: var(--eco-content);
  margin: 0 auto;
}

/* ========== 1. Hero Area ==========
   Padding top/bottom 48 | L/R 130 | gap titre→paragraphe 28 */
.eco-hero {
  width: 100%;
  padding: 48px var(--eco-pad-x);
}

.eco-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.eco-page h1.eco-hero__title {
  width: 100%;
  color: var(--eco-ink);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 0;
}

.eco-hero__br {
  display: none;
}

.eco-hero__lead {
  max-width: 720px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: left;
}

/* ========== 6. Secteurs — Figma 590:10835 ==========
   Section : pad 56/130 | gap titre→grille 32 | gap cartes 24 | items-start
   Rangée 1 : 4 × 277px — Logement/Alim/Équip h=296 | Transport = hug
   Rangée 2 : 3 × 377px — Culture h=200 | Habillement/Services = hug
   Carte : pad 28 | radius 14 | gap icône→texte 16 | titre→desc 8 */
.eco-sectors {
  width: 100%;
  background: var(--eco-bg-alt);
  padding: 56px var(--eco-pad-x);
}

.eco-sectors__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.eco-page h2.eco-sectors__title {
  width: 100%;
  color: var(--eco-ink);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

/* Flex wrap Figma : tops alignés, hauteurs hétérogènes (pas de stretch) */
.eco-sectors__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px;
  width: 100%;
}

/* Rangée 1 — (1180 − 3×24) / 4 = 277px */
.eco-card {
  flex: 0 0 calc((100% - 72px) / 4);
  width: calc((100% - 72px) / 4);
  max-width: none;
  min-width: 0;
  height: 296px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 14px;
  border: none;
  border-top: 3px solid transparent;
  box-shadow: none;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 28px;
  overflow: visible;
  transition: transform 0.28s ease, filter 0.28s ease;
}

/* Transport : hug contenu — jamais de hauteur fixe (sinon (VTC) déborde) */
.eco-card--transport {
  height: auto;
  min-height: 0;
}

/* Rangée 2 — (1180 − 2×24) / 3 = 377.33px ≈ Figma 377 */
.eco-card.eco-card--wide {
  flex: 0 0 calc((100% - 48px) / 3);
  width: calc((100% - 48px) / 3);
  height: auto;
  min-height: 0;
}

/* Spécificité > .eco-card--wide : Culture = 200px (Figma) */
.eco-card.eco-card--culture {
  height: 200px;
}

@media (hover: hover) and (pointer: fine) {
  .eco-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0px 10px 18px rgba(7, 26, 53, 0.12));
  }
}

.eco-card--logement { border-top-color: rgba(217, 115, 38, 0.4); }
.eco-card--transport { border-top-color: rgba(56, 120, 209, 0.4); }
.eco-card--alimentation { border-top-color: rgba(51, 166, 84, 0.4); }
.eco-card--equipement { border-top-color: rgba(209, 148, 26, 0.4); }
.eco-card--habillement { border-top-color: rgba(184, 71, 140, 0.4); }
.eco-card--services { border-top-color: rgba(125, 59, 237, 0.4); }
.eco-card--culture { border-top-color: rgba(31, 140, 140, 0.4); }

.eco-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eco-card--logement .eco-card__icon { background: #faebde; }
.eco-card--transport .eco-card__icon { background: #e0edfc; }
.eco-card--alimentation .eco-card__icon { background: #e3f5e3; }
.eco-card--equipement .eco-card__icon { background: #fcf2db; }
.eco-card--habillement .eco-card__icon { background: #f7e5f0; }
.eco-card--services .eco-card__icon { background: #ede3fc; }
.eco-card--culture .eco-card__icon { background: #def2f2; }

.eco-card__icon img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.eco-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
}

.eco-page h3.eco-card__title {
  margin: 0;
  padding: 0;
  width: 100%;
  color: var(--eco-ink);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.eco-card__desc {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ========== 2. Éditorial ==========
   Padding top/bottom 56 | L/R 130 | texte max 720 */
.eco-editorial {
  width: 100%;
  padding: 56px var(--eco-pad-x);
}

.eco-editorial__text {
  max-width: 720px;
  margin: 0;
  padding: 0;
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: left;
}

/* ========== 4–5. Stratégies ==========
   Padding section 56 / 130
   Gap titre→cols 32 | gap colonnes 48
   Card padding 32 | radius 16 */
.eco-strategies {
  width: 100%;
  background: var(--eco-bg-alt);
  padding: 56px var(--eco-pad-x);
}

.eco-strategies__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.eco-page h2.eco-strategies__title {
  width: 100%;
  color: var(--eco-ink);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

.eco-strategies__cols {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
}

.eco-strategy {
  flex: 1 1 0;
  width: calc((100% - 48px) / 2);
  min-width: 0;
  min-height: 236px;
  height: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: none;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.05));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  padding: 32px;
  margin: 0;
  overflow: visible;
  position: relative;
  transition: transform 0.28s ease, filter 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .eco-strategy:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0px 8px 16px rgba(7, 26, 53, 0.1));
  }
}

.eco-strategy__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  background: #f0e8fc;
  border-radius: 12px;
  padding: 6px 14px;
  color: var(--eco-purple);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eco-strategy__text {
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ========== 3. Callout ==========
   Padding section 56 / 130 (haut = bas, symétrique)
   Card interne : padding 48 | radius 24 | border-left 4 | gap 32 */
.eco-callout-wrap {
  width: 100%;
  padding: 56px var(--eco-pad-x);
  margin: 0;
}

.eco-callout {
  background: var(--eco-callout-bg);
  border-left: 4px solid var(--eco-purple-border);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px;
  width: 100%;
  margin: 0;
}

/* Figma : footer collé après la section — annule margin-top:100px de styleFooter
   (styleFooter est chargé après via bottom.php → spécificité + !important) */
body:has(#eco-page) footer#bottomPage {
  margin-top: 0 !important;
}

.eco-page h2.eco-callout__title {
  width: 100%;
  color: var(--eco-ink);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

.eco-callout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.eco-callout__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.eco-callout__check {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--eco-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eco-callout__check img {
  width: 12px;
  height: 12px;
  display: block;
}

.eco-callout__item p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--eco-body);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
}

/* Animations — opacity seule (pas de translate : évite texte écrasé / superposé mobile) */
.eco-reveal {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.eco-reveal.is-visible {
  opacity: 1;
}

.eco-card.eco-reveal,
.eco-strategy.eco-reveal {
  transition:
    opacity 0.55s ease var(--eco-delay, 0ms),
    transform 0.28s ease,
    filter 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .eco-reveal {
    opacity: 1;
    transition: none;
  }

  .eco-card,
  .eco-strategy,
  .eco-card.eco-reveal,
  .eco-strategy.eco-reveal {
    transition: none;
  }

  .eco-card:hover {
    transform: none;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
  }

  .eco-strategy:hover {
    transform: none;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.05));
  }
}

/* ========== Mobile Figma 375 (≤768) ==========
   Hero: py 32 / px 16 / gap 16
   Secteurs: py 32 / px 16 / gap titre 24 / cards gap 16 / card pad 20
   Édito / stratégies / callout: py 32 / px 16
   Stratégies: gap cols 20 / card pad 24
   Callout: pad 24 / radius 16 / gap 24 / check 24 */
@media (max-width: 768px) {
  .eco-page {
    --eco-pad-x: 16px;
    --eco-content: none;
  }

  .eco-hero__inner,
  .eco-sectors__inner,
  .eco-editorial__inner,
  .eco-strategies__inner,
  .eco-callout-wrap__inner {
    max-width: none;
  }

  .eco-hero {
    padding: 32px 16px;
  }

  .eco-hero__inner {
    gap: 16px;
  }

  .eco-page h1.eco-hero__title {
    font-size: 24px;
    line-height: 32px;
  }

  .eco-hero__br {
    display: block;
  }

  .eco-hero__lead {
    max-width: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }

  .eco-sectors,
  .eco-editorial,
  .eco-strategies,
  .eco-callout-wrap {
    padding: 32px 16px;
  }

  .eco-sectors__inner,
  .eco-strategies__inner {
    gap: 24px;
  }

  .eco-page h2.eco-sectors__title,
  .eco-page h2.eco-strategies__title,
  .eco-page h2.eco-callout__title {
    font-size: 20px;
    line-height: 28px;
  }

  .eco-sectors__grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .eco-card,
  .eco-card.eco-card--wide,
  .eco-card--transport,
  .eco-card--culture {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 12px;
    padding: 20px;
    gap: 12px;
    overflow: visible;
  }

  .eco-page h3.eco-card__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }

  .eco-card__desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
  }

  .eco-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .eco-card__text {
    gap: 4px;
  }

  /* Stratégies mobile Figma : pad 24 | gap badge→texte 16 | radius 12 | gap cartes 20 */
  .eco-strategies__cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
  }

  .eco-page .eco-strategy {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    border-radius: 12px;
    padding: 24px;
    gap: 16px;
    overflow: visible;
  }

  .eco-page .eco-strategy__badge {
    border-radius: 10px;
  }

  .eco-editorial__text {
    max-width: none;
    font-size: 14px;
    line-height: 20px;
  }

  .eco-callout {
    border-radius: 16px;
    padding: 24px;
    gap: 24px;
  }

  .eco-callout__list {
    gap: 20px;
  }

  .eco-callout__item {
    gap: 12px;
  }

  .eco-callout__check {
    width: 24px;
    height: 24px;
    border-radius: 12px;
  }
}

/* Tablette : pad-x réduit — grille 4+3 qui rétrécit (pas de forçage 2 cols) */
@media (min-width: 769px) and (max-width: 1199px) {
  .eco-page {
    --eco-pad-x: 40px;
    --eco-content: none;
  }

  .eco-hero__inner,
  .eco-sectors__inner,
  .eco-editorial__inner,
  .eco-strategies__inner,
  .eco-callout-wrap__inner {
    max-width: none;
  }

  .eco-strategies__cols {
    gap: 24px;
  }

  .eco-strategy {
    min-height: 0;
    height: auto;
  }
}