/* MUNGO Fret & Transit — accueil (complète styles.css ; ordre des couches déclaré dans styles.css) */
@layer components {
  /* ---------- extrait de conversation (statique) ---------- */
  .excerpt { margin: 0; }
  .excerpt__win { background: var(--c-beton); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--sh-3); color: var(--c-ink); max-width: 30rem; margin-inline: auto; }
  .excerpt__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; background: var(--c-white); border-bottom: 1px solid var(--c-line-soft); }
  .excerpt__name { font-weight: 800; color: var(--c-marine); }
  .excerpt__log { display: grid; gap: 0.85rem; padding: 1.1rem; }
  .excerpt figcaption, .excerpt + figcaption { margin-top: 0.85rem; font-size: 0.875rem; color: #AFC0D2; text-align: center; }
  .band--marine .excerpt figcaption { color: #AFC0D2; }

}

@layer pages {
  /* ---------- héros de l'accueil ---------- */
  .hero { position: relative; padding-top: clamp(2rem, 1.2rem + 3.5vw, 4.5rem); overflow: hidden; }
  .hero::before { content: ''; position: absolute; inset: 0 0 auto 55%; height: 100%; background: linear-gradient(180deg, var(--c-beton), rgb(238 240 242 / 0)); z-index: -1; }
  .hero__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  @media (min-width: 64em) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
  .hero__txt { display: grid; gap: var(--sp-5); justify-items: start; }
  .hero h1 { font-size: clamp(2.3rem, 1.75rem + 2.6vw, 3.85rem); max-width: 15ch; }
  .hero .lead { max-width: 44ch; }
  .ask { width: 100%; max-width: 36rem; display: grid; gap: 0.6rem; padding: 1.1rem; border-radius: var(--r-3); background: var(--c-white); box-shadow: var(--sh-2); border: 1px solid var(--c-line-soft); }
  .ask__label { font-weight: 800; color: var(--c-marine); font-size: 1rem; }
  .ask__row { display: flex; gap: 0.5rem; }
  .ask__input { flex: 1; min-width: 0; min-height: 3.1rem; padding: 0.6em 0.9em; border: 1.5px solid var(--c-control); border-radius: var(--r-2); font-size: 1rem; }
  .ask__input:focus-visible { outline: none; border-color: var(--c-marine); box-shadow: 0 0 0 3px rgb(184 70 11 / 0.35); }
  .ask__btn { flex: none; }
  .ask__ex { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .ask__ex-l { font-size: 0.8125rem; color: var(--c-muted); margin-right: 0.15rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
  .ask__ex .chip { font-size: 0.875rem; min-height: 2.5rem; background: var(--c-beton); border-color: transparent; }
  .ask__ex .chip:hover { background: var(--c-orange-pale); border-color: var(--c-orange); }
  .ask__ai { display: flex; gap: 0.45em; align-items: flex-start; font-size: 0.8125rem; color: var(--c-muted); }
  .ask__ai .i { width: 1.05em; height: 1.05em; color: var(--c-orange-text); margin-top: 0.15em; }
  @media (max-width: 29.99em) { .ask__row { flex-direction: column; } .ask__btn { width: 100%; } }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .en-note { display: flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--c-marine); padding: 0.6rem 0.9rem; border-radius: var(--r-2); background: var(--c-sky); font-size: 0.9375rem; }
  .en-note .i { color: var(--c-orange-text); }
  .hero__media { position: relative; padding-bottom: 3.5rem; }
  .hero__fig { margin: 0; border-radius: var(--r-4); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--sh-3); position: relative; }
  .hero__fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgb(11 42 74 / 0) 40%, rgb(11 42 74 / 0.45)); }
  @media (max-width: 63.99em) { .hero__fig { aspect-ratio: 16 / 10; } }
  .plabel {
    position: absolute; left: clamp(-1.5rem, -2vw, 0rem); bottom: 0; width: min(19rem, 80%); padding: 1rem 1.1rem 0.9rem; background: var(--c-white); color: var(--c-ink);
    border-radius: var(--r-2); box-shadow: var(--sh-3); display: grid; gap: 0.6rem; transform: rotate(-2deg);
    -webkit-mask: radial-gradient(circle at 0 62%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 62%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  }
  @media (max-width: 63.99em) { .hero__media { padding-bottom: 0; } .plabel { position: relative; left: auto; bottom: auto; width: min(17.5rem, 86%); margin: -4.5rem 0.5rem 0 auto; } }
  .plabel__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 2px solid var(--c-ink); }
  .plabel__brand { font-weight: 800; letter-spacing: 0.02em; color: var(--c-marine); }
  .plabel__no { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; }
  .plabel__f { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.75rem; }
  .plabel__f dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
  .plabel__f dd { font-weight: 700; font-size: 0.875rem; color: var(--c-marine); }
  .plabel .pill { font-size: 0.75rem; }
  .plabel .barcode { padding-top: 0.5rem; border-top: 1.5px dashed var(--c-line); }
  .hero__route { margin-top: clamp(1rem, 3vw, 2.5rem); }
  .route { width: 100%; height: auto; max-height: 210px; overflow: visible; }
  .route__main { stroke: var(--c-marine); }
  .route__branch { stroke: var(--c-control); }
  .route__draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .js .route__draw { animation: draw 0.9s 0.2s var(--ease) both; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .route__pins circle { fill: var(--c-orange); stroke: var(--c-white); stroke-width: 3; }
  .route__codes text { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; fill: var(--c-marine); }
  .route__codes .route__city { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; fill: var(--c-muted); font-size: 14px; }
  .route__vehicle circle { fill: var(--c-marine); }
  .route__vehicle path { fill: var(--c-white); }
  @media (max-width: 39.99em) { .route__city { display: none; } }

  /* ---------- étapes ---------- */
  .steps { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: s; }
  .step { display: grid; gap: 0.5rem; align-content: start; position: relative; }
  .step__ph { margin: 0 0 0.6rem; aspect-ratio: 4 / 3; border-radius: var(--r-3); overflow: hidden; position: relative; }
  .step__n { font-size: 0.8125rem; font-weight: 600; color: var(--c-orange-text); display: flex; align-items: center; gap: 0.6rem; letter-spacing: 0.1em; }
  .step__n::after { content: ''; flex: 1; border-top: 2px dashed var(--c-line); }
  .step:last-child .step__n::after { border-top-style: solid; border-color: var(--c-orange); max-width: 2rem; }
  .step p:last-child { color: var(--c-muted); font-size: 0.975rem; }
  .stamp--photo { position: absolute; right: 0.75rem; bottom: 0.75rem; }

  /* ---------- bande « l'assistant, en vrai » ---------- */
  .agentband { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
  .agentband__txt { display: grid; gap: var(--sp-5); justify-items: start; align-content: start; }
  .agentband__txt p { color: #C9D5E2; max-width: 52ch; }
  .agentband__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  @media (min-width: 64em) {
    .agentband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
    .agentband__lists { grid-column: 1 / -1; }
  }

  /* ---------- engagements (bento) ---------- */
  .bento { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .bento > li { position: relative; padding: 1.5rem; border-radius: var(--r-3); background: var(--c-white); display: grid; gap: 0.6rem; align-content: start; }
  .bento > li p { color: var(--c-muted); font-size: 0.975rem; }
  .bento__ic { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 50%; background: var(--c-orange-pale); color: var(--c-orange-text); }
  .bento__big { padding: 0 !important; overflow: hidden; }
  .bento__ph { margin: 0; aspect-ratio: 16 / 9; }
  .bento__txt { padding: 1.5rem; display: grid; gap: 0.6rem; }
  .stamp--bento { position: absolute; right: 1rem; top: 1rem; }
  @media (min-width: 64em) {
    .bento { grid-template-columns: repeat(3, 1fr); }
    .bento__big { grid-row: span 2; grid-column: span 1; display: grid; grid-template-rows: 1fr auto; }
    .bento__big .bento__ph { aspect-ratio: auto; min-height: 14rem; }
  }

  /* ---------- histoire et équipe ---------- */
  .story { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
  @media (min-width: 64em) { .story { grid-template-columns: 0.9fr 1.1fr; } }
  .story__ph { margin: 0; }
  .story__ph img { border-radius: var(--r-4); aspect-ratio: 1 / 1; object-position: 50% 78%; }
  @media (max-width: 63.99em) { .story__ph img { aspect-ratio: 16 / 9; } }
  .story__ph figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--c-muted); }
  .story__txt { display: grid; gap: var(--sp-4); max-width: 38rem; }
  .story__txt h2 { margin-top: -0.25rem; }
  .story__why { font-weight: 700; color: var(--c-marine); padding: 0.9rem 1.1rem; border-radius: var(--r-2); background: var(--c-orange-pale); border-left: 4px solid var(--c-orange); }
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; margin-top: var(--sp-3); }
  .facts li { display: grid; padding-top: 0.75rem; border-top: 2px solid var(--c-marine); }
  .facts b { font-size: var(--step-3); font-weight: 600; color: var(--c-marine); line-height: 1.1; }
  .facts span { font-size: 0.875rem; color: var(--c-muted); }
  .team { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  @media (min-width: 64em) { .team { grid-template-columns: repeat(3, 1fr); } }
  .person { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-3); background: var(--c-white); }
  .person__av { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; background: var(--c-marine); color: var(--c-white); }
  .person__av--1 { background: var(--c-orange); color: var(--c-ink); }
  .person__av--2 { background: var(--c-sky); color: var(--c-marine); }
  .person__n { font-weight: 800; color: var(--c-marine); }
  .person__r { font-size: 0.9375rem; color: var(--c-muted); line-height: 1.35; }
  .person__c { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-orange-text); margin-top: 0.15rem; }
  .section--beton .team .person { background: var(--c-white); }
  .section:not(.section--beton) .team .person { background: var(--c-beton); }

}