/* =========================================================
   Mobile responsive styles — Accueil
   Loaded after style.css and index.css
   ========================================================= */

@media screen and (max-width: 900px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background: var(--cream, #fffaf2);
  }

  .page-shell {
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: auto;
    padding: 16px 18px 14px;
  }

  .brand {
    width: 100%;
  }

  .brand img {
    width: 150px;
    max-width: 56vw;
    height: auto;
    margin: 0 auto;
  }

/*  .main-nav {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 6px 0 8px;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    font-size: 0.84rem;
  }*/


  .main-nav {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 6px 0 8px;
    justify-content: center;
    gap: 18px;
    overflow-x: visible;
    font-size: 0.84rem;
  }

  .main-nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .site-header .header-cta {
  display: none;
}

  .section-full {
    padding-inline: 20px;
  }

  .section-padded {
    padding: 28px 20px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 24px 20px 0;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.96) 0%, rgba(255, 251, 243, 0.9) 62%, rgba(255, 252, 247, 0) 100%);
  }

  .hero-copy {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 16vw, 4.2rem);
    line-height: 0.95;
  }

  .hero-baseline {
    margin-top: 10px;
    font-size: 1rem;
  }

  .hero-intro {
    max-width: 520px;
    margin-top: 16px;
    font-size: 1rem;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 20px;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    min-height: 44px;
  }

/*  .hero-visual {
    height: auto;
    min-height: auto;
    margin: 18px -20px 0;
  }

  .hero-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }*/

  .hero-visual {
    display: flex;
    justify-content: center;
    width: calc(100% + 40px);
    height: auto;
    min-height: 0;
    margin: 18px -20px 0;
    overflow: hidden;
  }

  .hero-visual img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: cover;
    object-position: center center;
  }

  .hero-badges {
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 14px 20px 18px;
  }

  .hero-badges span:not(.badge-icon) {
    padding: 5px 12px;
    font-size: 0.82rem;
  }

  .values {
    padding: 28px 20px;
    overflow: hidden;
  }

  .decor.decor-left,
  .decor.decor-right {
    display: none;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 480px;
    margin-top: 24px;
  }

  .value-card p {
    max-width: 340px;
    font-size: 0.92rem;
  }

  .about {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 20px;
  }

  .about-photo img {
    min-height: 0;
    max-height: 360px;
    object-fit: cover;
  }

  .about-text {
    padding-right: 0;
  }

  .about h2 {
    text-align: center;
    font-size: clamp(2.6rem, 12vw, 3.8rem);
  }

  .about-text p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .expert-box {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
    text-align: center;
  }

  .expert-coffee-img {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    top: 0;
  }

  .expert-heart {
    display: none;
  }

  .activities {
    padding: 30px 20px;
  }

  .activities-grid {
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 480px;
    margin: 34px auto 0;
  }

  .activity-card {
    min-height: 0;
    padding: 48px 18px 22px;
    text-align: center;
  }

  .activity-card h3 {
    min-height: 0;
    font-size: 2rem;
  }

  .activity-photo {
    height: 180px;
  }

  .activity-card p:not(.activity-subtitle) {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .index-activities-note {
    max-width: 520px;
    margin: 0 auto;
  }

  .activities-note {
    padding-inline: 8px;
    font-size: 1rem;
    line-height: 1.45;
  }

  .index-activities-leaf {
    display: none;
  }

  .meeting-gallery {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 20px;
  }

  .meeting-card,
  .life-card {
    padding: 24px 20px;
  }

  .meeting-card dl {
    max-width: 320px;
    margin: 24px auto 0;
    padding-left: 0;
  }

  .meeting-card > dl {
    transform: none;
  }

  .meeting-card dl > div {
    padding-left: 44px;
    text-align: left;
  }

  .meeting-card .btn-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 52px;
    margin: 24px auto 0;
    padding: 0 28px;
    line-height: 1;
  }

  .meeting-card > a.btn-small + p {
    left: 0;
    text-align: center !important;
  }

  .meeting-decor {
    display: none;
  }

  .life-photos {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto 20px;
  }

  .life-photos img {
    height: 200px;
  }

  .contact-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
    column-gap: 0 !important;
    padding: 28px 20px !important;
    text-align: center;
    border-radius: 14px 14px 0 0;
  }

  .contact-strip .contact-intro {
    grid-column: auto;
    padding: 0;
  }

  .contact-strip .contact-details {
    grid-column: auto;
    width: max-content;
    max-width: 100%;
    margin: 0 auto !important;
    padding-left: 0;
    border-left: 0;
    transform: none;
    justify-items: start;
  }

  .contact-strip .contact-details a,
  .contact-strip .contact-details > span {
    width: max-content;
    max-width: 100%;
    grid-template-columns: 38px max-content;
    justify-content: start;
    text-align: left;
  }

  .contact-strip .contact-visual {
    height: auto;
    overflow: visible;
  }

  .contact-strip .contact-visual > img {
    height: auto;
    max-height: 180px;
  }

  .contact-strip .contact-visual .btn {
    position: static;
    width: 100%;
    max-width: 320px;
    margin: 14px auto 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 26px 20px;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 0;
  }

  .footer-brand img {
    width: 170px;
    margin: 0 auto;
  }

  .footer-village {
    justify-content: center;
  }

  .footer-village img {
    width: 180px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 520px) {
  .site-header {
    padding-inline: 14px;
  }

  .brand img {
    width: 132px;
  }

  .main-nav {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    font-size: 0.8rem;
  }

  .hero {
    padding-inline: 16px;
  }

  .hero h1 {
    font-size: clamp(3rem, 18vw, 3.55rem);
  }

  .hero-actions .btn {
    max-width: none;
  }

/*  .hero-badges {
    padding-inline: 14px;
  }*/

  .hero-visual {
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  .hero-badges {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 12px 14px;
    padding: 14px 20px 18px;
  }

  .hero-badges span:not(.badge-icon) {
    width: 100%;
    justify-content: center;
  }

  .about,
  .activities,
  .meeting-gallery,
  .contact-strip {
    padding-inline: 16px !important;
  }

  .values {
    padding-inline: 16px;
  }

  .activity-photo,
  .life-photos img {
    height: 160px;
  }

  .contact-strip .contact-details {
    max-width: 100%;
    font-size: 0.94rem;
  }

  .footer-links {
    font-size: 0.94rem;
  }
}