/*
  Responsive — Étape 4 : adaptation desktop intermédiaire, tablette et mobile.
  La pose 1920 px de layout.css/components.css reste la référence ; toutes les
  règles ci-dessous s'appliquent sous 1920 px uniquement.
*/

/* -------------------------------------------------------------------------- */
/* Desktop intermédiaire — 1440 à 1919 px                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1919px) and (min-width: 1280px) {
  .page-shell {
    max-inline-size: 100%;
    min-block-size: auto;
  }

  .section-shell {
  }

  .site-header {
    inset-block-start: 42px;
  }

  .site-header__inner {
    min-block-size: 96px;
  }

  .brand {
    inline-size: clamp(330px, 23vw, 390px);
    min-block-size: 108px;
    gap: 18px;
  }

  .brand__mark {
    flex-basis: clamp(76px, 5.2vw, 92px);
    inline-size: clamp(76px, 5.2vw, 92px);
    block-size: clamp(92px, 6vw, 108px);
  }

  .brand__text {
    inline-size: clamp(220px, 16vw, 280px);
    font-size: clamp(28px, 2.1vw, 34px);
  }

  .menu-button {
    inline-size: 76px;
    block-size: 76px;
  }

  .hero {
    block-size: clamp(820px, 62vw, 900px);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(500px, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 48px;
    block-size: 100%;
    padding-block-start: 70px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
    max-inline-size: 620px;
  }

  .hero__media {
    justify-self: stretch;
    block-size: clamp(680px, 57vw, 820px);
    margin-inline-end: calc(48px - ((100vw - min(calc(100% - 96px), 1500px)) / 2));
  }

  .hero__title {
    max-inline-size: 610px;
    font-size: clamp(72px, 5.2vw, 94px);
  }

  .hero__eyebrow {
    margin-block-end: 34px;
  }

  .hero__text {
    max-inline-size: 500px;
    font-size: 17px;
  }

  .trust-strip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding-block: 22px 26px;
  }

  .trust-item {
    gap: 12px;
    padding-inline: 14px;
  }

  .trust-item__icon,
  .benefit-item__icon,
  .utility-footer__icon {
    inline-size: 40px;
    block-size: 40px;
  }

  .workshops {
    block-size: 880px;
    padding-block-start: 88px;
  }

  .workshops__heading {
    inline-size: min(760px, 100%);
    margin-block-end: 54px;
  }

  .workshops__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }

  .workshop-card {
    block-size: 570px;
  }

  .workshop-card__link {
    grid-template-rows: 270px 1fr;
  }

  .workshop-card__body {
    padding: 26px 24px 24px;
  }

  .workshop-card__title {
    font-size: clamp(24px, 1.75vw, 28px);
  }

  .workshop-card__text {
    margin-block-start: 20px;
    font-size: 15px;
    line-height: 1.62;
  }

  .workshop-card__arrow {
    inset-inline-end: 24px;
    inset-block-end: 24px;
  }

  .workshops__compare {
    margin-block-start: 38px;
  }

  .venues {
    block-size: 750px;
  }

  .venues__inner {
    grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
    gap: 36px;
  }

  .venues__media-group {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    padding-block: 68px 60px;
  }

  .benefits {
    block-size: 390px;
    padding-block-start: 62px;
  }

  .benefits__heading {
    inline-size: min(760px, 100%);
    margin-block-end: 56px;
  }

  .benefit-item {
    padding-inline: 18px;
  }

  .reservation {
    block-size: 425px;
  }

  .reservation__inner {
    grid-template-columns: minmax(390px, 0.42fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .reservation__copy {
    padding-inline-start: 25%;
  }

  .reservation__media {
    block-size: 430px;
  }

  .utility-footer {
    block-size: auto;
    padding-block: 32px 28px;
  }

  .utility-footer__item {
    padding-inline: 28px;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop compact — 1280 à 1439 px                                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 1439px) and (min-width: 1280px) {
  .page-shell {
    max-inline-size: 100%;
    min-block-size: auto;
  }

  .section-shell {
	  
  }

  .site-header {
    inset-block-start: 34px;
  }

  .site-header__inner {
    min-block-size: 86px;
  }

  .brand {
    inline-size: 310px;
    min-block-size: 92px;
    gap: 16px;
  }

  .brand__mark {
    flex-basis: 68px;
    inline-size: 68px;
    block-size: 82px;
  }

  .brand__text {
    inline-size: 218px;
    font-size: 27px;
  }

  .menu-button {
    inline-size: 68px;
    block-size: 68px;
  }

  .hero {
    block-size: 800px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(430px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 36px;
    block-size: 100%;
    padding-block-start: 64px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
    max-inline-size: 540px;
  }

  .hero__media {
    block-size: 680px;
    margin-inline-end: -40px;
  }

  .hero__title {
    max-inline-size: 540px;
    font-size: clamp(64px, 5.3vw, 78px);
  }

  .hero__eyebrow {
    margin-block-end: 28px;
  }

  .hero__text {
    max-inline-size: 450px;
    margin-block-start: 28px;
    font-size: 16px;
  }

  .hero__actions {
    margin-block-start: 36px;
  }

  .cta-group {
    gap: 18px;
  }

  .button {
    min-block-size: 52px;
  }

  .trust-strip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding-block: 20px 24px;
  }

  .trust-item {
    gap: 10px;
    padding-inline: 10px;
  }

  .trust-item__icon {
    inline-size: 36px;
    block-size: 36px;
  }

  .trust-item__copy {
    font-size: 12.5px;
  }

  .workshops {
    block-size: auto;
    min-block-size: 1040px;
    padding-block: 78px 70px;
  }

  .workshops__heading {
    inline-size: min(720px, 100%);
    margin-block-end: 48px;
  }

  .workshops__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .workshop-card {
    block-size: 540px;
  }

  .workshop-card:last-child {
    grid-column: 2 / span 2;
  }

  .workshop-card__link {
    grid-template-rows: 250px 1fr;
  }

  .workshop-card__body {
    padding: 24px 24px 24px;
  }

  .workshop-card__text {
    margin-block-start: 18px;
    font-size: 14.5px;
    line-height: 1.58;
  }

  .workshops__compare {
    margin-block-start: 36px;
  }

  .venues {
    block-size: 680px;
  }

  .venues__inner {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 30px;
  }

  .venues__media-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-block: 68px 58px;
  }

  .venue-mini-card {
    grid-template-columns: 86px 1fr;
    gap: 16px;
  }

  .venue-mini-card__thumb {
    inline-size: 86px;
    block-size: 82px;
  }

  .benefits {
    block-size: 380px;
    padding-block-start: 56px;
  }

  .benefits__heading {
    inline-size: min(700px, 100%);
    margin-block-end: 48px;
  }

  .benefit-item {
    padding-inline: 14px;
  }

  .benefit-item h3 {
    font-size: 14.5px;
  }

  .benefit-item p {
    font-size: 13px;
  }

  .reservation {
    block-size: 500px;
  }

  .reservation__inner {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 56px;
  }

  .reservation__copy {
    padding-inline-start: 0;
  }

  .reservation__media {
    block-size: 410px;
  }

  .utility-footer {
    block-size: auto;
    padding-block: 28px 26px;
  }

  .utility-footer__item {
    gap: 14px;
    padding-inline: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablette paysage / grande tablette — 1024 à 1279 px                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 1279px) and (min-width: 1024px) {
  .page-shell {
    max-inline-size: 100%;
    min-block-size: auto;
  }

  .section-shell {
    inline-size: min(calc(100% - 96px), var(--container-tablet));
  }

  .site-header {
    inset-block-start: 32px;
  }

  .site-header__inner {
    min-block-size: 76px;
  }

  .brand {
    inline-size: 286px;
    min-block-size: 82px;
    gap: 14px;
  }

  .brand__mark {
    flex-basis: 60px;
    inline-size: 60px;
    block-size: 74px;
  }

  .brand__text {
    inline-size: 206px;
    font-size: 24px;
  }

  .menu-button {
    inline-size: 64px;
    block-size: 64px;
  }

  .hero {
    block-size: auto;
    min-block-size: 960px;
  }

  .hero::after {
    block-size: 120px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    block-size: auto;
    padding-block: 170px 80px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
    max-inline-size: 720px;
  }

  .hero__title {
    max-inline-size: 720px;
    font-size: clamp(62px, 7.2vw, 86px);
  }

  .hero__text {
    max-inline-size: 610px;
  }

  .hero__media {
    block-size: 500px;
    margin: 0;
    border-radius: 18px;
  }

  .hero__media::before {
    background:
      linear-gradient(90deg, rgba(245,241,236,.86) 0%, rgba(245,241,236,.20) 32%, rgba(0,0,0,.10) 100%),
      linear-gradient(180deg, rgba(245,241,236,0) 68%, rgba(245,241,236,.72) 100%);
  }

  .trust-strip {
    position: relative;
    inset: auto;
    block-size: auto;
    padding-block: 4px 12px;
  }

  .trust-strip__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 0;
  }

  .trust-item:nth-child(3n + 1)::before {
    display: none;
  }

  .workshops {
    block-size: auto;
    padding-block: 90px;
  }

  .workshops__heading {
    inline-size: min(760px, 100%);
    margin-block-end: 54px;
  }

  .workshops__grid {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: max(48px, calc((100vw - var(--container-tablet)) / 2));
    padding-block: 4px 22px;
    scroll-padding-inline: max(48px, calc((100vw - var(--container-tablet)) / 2));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .workshop-card {
    flex: 0 0 min(42vw, 430px);
    block-size: 610px;
    scroll-snap-align: start;
  }

  .workshop-card:last-child {
    grid-column: auto;
    inline-size: auto;
    justify-self: auto;
  }

  .workshop-card__link {
    grid-template-rows: 300px 1fr;
  }

  .venues {
    block-size: auto;
    padding-block: 88px;
  }

  .venues__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    block-size: auto;
  }

  .venues__copy {
    max-inline-size: 720px;
  }

  .venue-mini-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .venues__media-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-block: 0;
    block-size: 560px;
  }

  .benefits {
    block-size: auto;
    padding-block: 82px;
  }

  .benefits__heading {
    inline-size: min(760px, 100%);
    margin-block-end: 54px;
  }

  .benefits__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 0;
  }

  .benefit-item:nth-child(4) {
    grid-column: 1 / span 1;
  }

  .reservation {
    block-size: auto;
  }

  .reservation__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    block-size: auto;
  }

  .reservation__copy {
    padding-inline-start: 0;
    max-inline-size: 620px;
  }

  .reservation__media {
    block-size: 420px;
  }

  .utility-footer {
    block-size: auto;
    padding-block: 34px;
  }

  .utility-footer__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 0;
  }

  .utility-footer__item:nth-child(2n + 1)::before {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablette portrait — 768 à 1023 px                                           */
/* -------------------------------------------------------------------------- */

@media (max-width: 1023px) and (min-width: 768px) {
  .page-shell {
    max-inline-size: 100%;
    min-block-size: auto;
  }

  .section-shell {
    inline-size: min(calc(100% - 64px), 704px);
  }

  .site-header {
    inset-block-start: 28px;
  }

  .site-header__inner {
    min-block-size: 72px;
  }

  .brand {
    inline-size: 258px;
    min-block-size: 72px;
    gap: 12px;
  }

  .brand__mark {
    flex-basis: 52px;
    inline-size: 52px;
    block-size: 64px;
  }

  .brand__text {
    inline-size: 194px;
    font-size: 22px;
  }

  .menu-button {
    inline-size: 60px;
    block-size: 60px;
  }

  .hero {
    block-size: auto;
    min-block-size: 920px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    block-size: auto;
    padding-block: 315px 72px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
  }

  .hero__eyebrow {
    margin-block-end: 28px;
  }

  .hero__title {
    max-inline-size: 640px;
    font-size: clamp(56px, 8.5vw, 70px);
  }

  .hero__text {
    max-inline-size: 580px;
    margin-block-start: 28px;
    font-size: 17px;
  }

  .hero__actions {
    margin-block-start: 36px;
  }

  .hero__media {
    block-size: 420px;
    border-radius: 18px;
  }

  .trust-strip {
    position: relative;
    inset: auto;
    block-size: auto;
    padding-block: 4px 12px;
  }

  .trust-strip__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 0;
  }

  .trust-item {
    padding-inline: 12px;
  }

  .trust-item:nth-child(3n + 1)::before {
    display: none;
  }

  .workshops {
    block-size: auto;
    padding-block: 82px;
  }

  .workshops__heading {
    inline-size: 100%;
    margin-block-end: 46px;
  }

  .workshops__grid {
    display: flex;
    gap: 22px;
    justify-content: flex-start;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: max(48px, calc((100vw - var(--container-tablet)) / 2));
    padding-block: 4px 22px;
    scroll-padding-inline: max(48px, calc((100vw - var(--container-tablet)) / 2));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .workshop-card {
    flex: 0 0 min(58vw, 380px);
    block-size: 580px;
    scroll-snap-align: start;
  }

  .workshop-card:last-child {
    grid-column: auto;
    inline-size: auto;
    justify-self: auto;
  }

  .workshop-card__link {
    grid-template-rows: 270px 1fr;
  }

  .workshop-card__body {
    padding: 26px 24px 24px;
  }

  .workshop-card__text {
    margin-block-start: 18px;
    font-size: 15px;
  }

  .venues {
    block-size: auto;
    padding-block: 78px;
  }

  .venues__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    block-size: auto;
  }

  .venue-mini-list {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .venues__media-group {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 0;
    block-size: auto;
  }

  .venue-media {
    block-size: 430px;
  }

  .benefits {
    block-size: auto;
    padding-block: 76px;
  }

  .benefits__heading {
    inline-size: 100%;
    margin-block-end: 50px;
  }

  .benefits__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 38px 0;
  }

  .benefit-item:nth-child(odd)::before {
    display: none;
  }

  .reservation {
    block-size: auto;
    padding-block: 78px;
  }

  .reservation__inner {
    grid-template-columns: 1fr;
    gap: 42px;
    block-size: auto;
  }

  .reservation__copy {
    padding-inline-start: 0;
  }

  .reservation__media {
    block-size: 390px;
  }

  .utility-footer {
    block-size: auto;
    padding-block: 32px;
  }

  .utility-footer__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 0;
  }

  .utility-footer__item {
    padding-inline: 24px;
  }

  .utility-footer__item:nth-child(2n + 1)::before {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile — 390 à 767 px                                                       */
/* -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .trust-strip .trust-item[data-trust="tools"] .trust-item__icon svg,
  .trust-strip .trust-item[data-trust="zero"] .trust-item__icon svg,
  .trust-strip .trust-item[data-trust="tools"] .trust-item__icon svg *,
  .trust-strip .trust-item[data-trust="zero"] .trust-item__icon svg * {
    fill: currentColor !important;
    color: #000 !important;
  }
}
@media (max-width: 767px) {
  .page-shell {
    max-inline-size: 100%;
    min-block-size: auto;
  }

  .section-shell {
    inline-size: min(calc(100% - 48px), var(--container-mobile));
  }

  .site-header {
    inset-block-start: 22px;
  }

  .site-header__inner {
    align-items: flex-start;
    min-block-size: 60px;
  }

  .brand {
    inline-size: min(260px, calc(100vw - 112px));
    min-block-size: 60px;
    gap: 10px;
  }

  .brand__mark {
    flex-basis: clamp(38px, 12vw, 48px);
    inline-size: clamp(38px, 10vw, 48px);
    block-size: clamp(48px, 12vw, 58px);
  }

  .brand__text {
    inline-size: min(188px, calc(100vw - 170px));
    padding-block-start: 1px;
    font-size: clamp(18px, 5vw, 21px);
    letter-spacing: 0.082em;
  }

  .menu-button {
    inline-size: 52px;
    block-size: 52px;
    gap: 5px;
  }

  .menu-button__line {
    inline-size: 18px;
  }

  .hero {
    block-size: auto;
    min-block-size: 820px;
  }

  .hero::after {
    block-size: 90px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    block-size: auto;
    padding-block: 126px 58px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
  }

  .hero__eyebrow {
    margin-block-end: 22px;
    font-size: 10px;
  }

  .hero__title {
    max-inline-size: 100%;
    font-size: clamp(46px, 13vw, 58px);
    line-height: 0.98;
  }

  .hero__text {
    max-inline-size: 100%;
    margin-block-start: 24px;
    font-size: 16px;
    line-height: 1.68;
  }

  .hero__actions {
    display: grid;
    gap: 14px;
    margin-block-start: 32px;
  }

  .hero__actions .button,
  .reservation__copy .button,
  .button--compare {
    inline-size: 90%;
  }

  .hero__b2b-link {
    margin-block-start: 18px;
  }

  .hero__media {
    block-size: 360px;
    border-radius: 16px;
  }

.brand__logo-mark {
  object-position: center 45%;
}

  .trust-strip {
    position: relative;
    inset: auto;
    block-size: auto;
    padding-block: 6px 14px 0;
  }

  .trust-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }

  .trust-item {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding-inline: 10px;
    text-align: center;
  }

  .trust-item:nth-child(odd)::before {
    display: none;
  }

  .trust-item__icon {
    inline-size: 38px;
    block-size: 38px;
  }

  .trust-item__copy {
    font-size: 12px;
  }

  .trust-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-inline-size: 220px;
  }

  .workshops {
    block-size: auto;
    padding-block: 70px;
  }

  .workshops__heading {
    inline-size: 100%;
    margin-block-end: 36px;
  }

  .workshops__grid {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: max(24px, calc((100vw - var(--container-mobile)) / 2));
    padding-block: 4px 18px;
    scroll-padding-inline: max(24px, calc((100vw - var(--container-mobile)) / 2));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .workshops__grid::-webkit-scrollbar {
    block-size: 4px;
  }

  .workshops__grid::-webkit-scrollbar-thumb {
    border-radius: var(--pill-radius);
    background: rgba(177, 138, 90, .34);
  }

  .workshop-card {
    flex: 0 0 min(82vw, 342px);
    block-size: 560px;
    scroll-snap-align: start;
  }

  .workshop-card__link {
    grid-template-rows: 255px 1fr;
  }

  .workshop-card__body {
    padding: 26px 24px 24px;
  }

  .workshop-card__title {
    font-size: clamp(26px, 8vw, 32px);
  }

  .workshop-card__text {
    margin-block-start: 18px;
    font-size: 15px;
    line-height: 1.58;
  }

  .workshop-card__meta {
    padding-block-start: 20px;
  }

  .workshops__compare {
    margin-block-start: 22px;
  }

  .button--compare {
    min-inline-size: 0;
  }

  .venues {
    block-size: auto;
    padding-block: 70px;
  }

  .venues__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    block-size: auto;
  }

  .venues__title,
  .reservation__title,
  .section-heading__title {
    font-size: clamp(34px, 9vw, 44px);
  }

  .venues__text,
  .reservation__copy p:not(.eyebrow) {
    font-size: 16px;
  }

  .venue-mini-list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-block-start: 32px;
  }

  .venue-mini-card {
    grid-template-columns: 88px 1fr;
    gap: 16px;
  }

  .venue-mini-card__thumb {
    inline-size: 86px;
    block-size: 82px;
  }

  .venues__media-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 0;
    block-size: auto;
  }

  .venue-media {
    block-size: 360px;
    border-radius: 12px;
  }

  .benefits {
    block-size: auto;
    padding-block: 66px;
  }

  .benefits__heading {
    inline-size: 100%;
    margin-block-end: 40px;
  }

  .benefits__list {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .benefit-item {
    padding-inline: 0;
  }

  .benefit-item + .benefit-item::before {
    inset-inline: 22%;
    inset-block-start: -15px;
    inset-block-end: auto;
    inline-size: auto;
    block-size: 1px;
  }

  .reservation {
    block-size: auto;
    padding-block: 68px 0;
  }

  .reservation__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    block-size: auto;
  }

  .reservation__copy {
    padding-inline-start: 0;
	margin-left: 13%;
    margin-top: 10%;
  }

  .reservation__media {
    block-size: 340px;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
	    block-size: 29% !important;
  }

  .utility-footer {
    block-size: auto;
    padding-block: 28px 32px;
  }

  .utility-footer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
  }

  .utility-footer__item {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding-inline: 14px;
    text-align: center;
  }

  .utility-footer__item:nth-child(odd)::before {
    display: none;
  }

  .utility-footer__icon {
    inline-size: 38px;
    block-size: 38px;
  }

  .foundation-state {
    padding-inline: var(--section-pad-x-mobile);
  }
}

/* -------------------------------------------------------------------------- */
/* Petit mobile — sous 390 px                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 389px) {
  .section-shell {
    inline-size: calc(100% - 32px);
  }

  .brand {
    inline-size: min(232px, calc(100vw - 94px));
    gap: 8px;
  }

  .brand__mark {
    flex-basis: 34px;
    inline-size: 34px;
    block-size: 44px;
  }

  .brand__text {
    inline-size: min(174px, calc(100vw - 142px));
    font-size: 16px;
    letter-spacing: 0.075em;
  }

  .menu-button {
    inline-size: 48px;
    block-size: 48px;
  }

  .hero__title {
    font-size: clamp(40px, 12vw, 48px);
  }

  .hero__media {
    block-size: 320px;
  }

  .trust-strip__list,
  .utility-footer__list {
    grid-template-columns: 1fr;
  }

  .trust-item::before,
  .utility-footer__item::before {
    display: none !important;
  }

  .workshops__grid {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .workshop-card {
    flex-basis: min(86vw, 318px);
  }

  .venue-mini-card {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Ajustements ciblés — hero média mobile/tablette + trust desktop             */
/* -------------------------------------------------------------------------- */

/* Desktop uniquement : contraste sur les deux items placés sur la zone sombre du hero. */
@media (min-width: 1280px) {
	  .trust-item[data-trust="groups"] .trust-item__icon,
  .trust-item[data-trust="groups"] .trust-item__copy,
  .trust-item[data-trust="groups"] .trust-item__copy strong,
  .trust-item[data-trust="groups"] .trust-item__copy span,
  .trust-item[data-trust="tools"] .trust-item__icon,
  .trust-item[data-trust="tools"] .trust-item__copy,
  .trust-item[data-trust="tools"] .trust-item__copy strong,
  .trust-item[data-trust="tools"] .trust-item__copy span,
  .trust-item[data-trust="zero"] .trust-item__icon,
  .trust-item[data-trust="zero"] .trust-item__copy,
  .trust-item[data-trust="zero"] .trust-item__copy strong,
  .trust-item[data-trust="zero"] .trust-item__copy span {
    color: #fff;
    mix-blend-mode: difference;
  }
}

/* Sous 1920 : on annule le translateX du hero desktop dès que le média passe en grille/flux. */
@media (max-width: 1919px) {
  .hero__media {
    transform: none;
  }

  .hero__image {
    object-position: 64% 44%;
  }
}

/* Tablette et mobile en paysage : split propre, verre/cocktail recentré dans le média. */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {
  .hero {
    min-block-size: 760px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(320px, 0.48fr) minmax(0, 0.52fr);
    align-items: center;
    gap: 28px;
    padding-block: 128px 120px;
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
    transform: none;
  }

  .hero__copy {
    z-index: 3;
    max-inline-size: 420px;
  }

  .hero__title {
    font-size: clamp(54px, 6vw, 72px);
    line-height: 1;
  }

  .hero__text {
    max-inline-size: 390px;
  }

  .hero__media {
    block-size: 467px;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
	width: 111%;
  }

  .hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 100% 45%;
  }
.brand__logo-mark {
  object-position: center -20%;
}
  .trust-strip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 26px;
    padding-block: 0;
  }

  .trust-strip__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }

  .trust-item {
    justify-content: center;
    gap: 10px;
  }

  .trust-item__copy {
    font-size: 12px;
    line-height: 1.2;
  }

  .trust-item__icon {
    inline-size: 36px;
    block-size: 36px;
  }
}

/* Mobile portrait : média plein cadre dans le flux, sans décalage, avec cocktail recentré. */
@media (max-width: 767px) and (orientation: portrait) {
  .hero__media {
    inline-size: min(100%, calc(100vw - 48px));
    max-inline-size: none;
    block-size: clamp(340px, 86vw, 430px);
    justify-self: center;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 18px;
    transform: none;
  }

  .hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 99% 44%;
  }
}

/* Mobile paysage : éviter la carte média décentrée et garder le sujet lisible. */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-block-size: 720px;
  }

  .hero__inner {
    padding-block: 108px 112px;
    gap: 24px;
  }

  .hero__media {
    inline-size: min(68vw, 520px);
    block-size: 300px;
    justify-self: center;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 16px;
    transform: none;
  }

  .hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 66% 44%;
  }
}

@media (max-width: 389px) {
  .hero__media {
    inline-size: calc(100vw - 40px);
    block-size: 340px;
  }

  .hero__image {
    object-position: 68% 44%;
  }
}



/* Correction demandée : swipe natif des cartes ateliers sans contrôles visuels. */
@media (max-width: 1279px) {
  .workshops__grid {
    scrollbar-width: none;
  }

  .workshops__grid::-webkit-scrollbar {
    display: none;
  }
}


/* Reservation image — full-section background, from current production asset */
@media (max-width: 1279px) {
  .reservation {
    position: relative;
    overflow: hidden;
  }

  .reservation__inner {
    position: relative;
    z-index: 2;
    min-block-size: clamp(520px, 58vw, 620px);
	width: 100%;
  }

  .reservation__copy {
    position: relative;
    z-index: 3;
	margin-left: 4%;
  }

  .reservation__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    border-radius: 0;
    pointer-events: none;
  }

  .reservation__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 62% center;
  }
}

@media (max-width: 767px) {
	.cta-group{
		margin-right: -5%;
		margin-left: 5%;
	}
	
  .reservation {
    padding-block: 0px;
  }
#reservation .button{
	    inline-size: 95%;
}
  .reservation__inner {
    min-block-size: 747px;
  }
.reservation__title{
	  width: 100%;
}
  .reservation__image {
    object-position: 86% center;
  }
}


/* Ajustements ciblés : menu burger fixe + footer utilitaire final. */
@media (max-width: 1919px) and (max-height: 1280px) {
  .menu-button {
    inset-block-start: 42px;
    inset-inline-end: 48px;
  }
}

@media (max-width: 1439px) and (min-width: 1280px) {
  .menu-button {
    inset-block-start: 36px;
    inset-inline-end: 40px;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .menu-button {
    inset-block-start: 30px;
    inset-inline-end: 40px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .menu-button {
    inset-block-start: 26px;
    inset-inline-end: 32px;
  }
}

@media (max-width: 767px) {
  .menu-button {
    inset-block-start: 22px;
    inset-inline-end: 24px;
  }

  .utility-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    text-align: center;
  }

  .utility-footer__copyright,
  .utility-footer__top {
    grid-column: 1;
    justify-self: center;
  }
}

@media (max-width: 389px) {
  .menu-button {
    inset-block-start: 18px;
    inset-inline-end: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/* RESP-HERO-001 — Hero page mère fluide 1280–1919px                           */
/* Base 1920×1080 préservée : ces règles ne s'appliquent qu'en dessous de 1920. */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1919px) {
  .hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    block-size: clamp(680px, 100vh, var(--section-hero-h));
    block-size: clamp(680px, 100svh, var(--section-hero-h));
    overflow: hidden;
  }

  .hero__inner {
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 58px);
    block-size: auto;
    min-block-size: 0;
    padding-block: clamp(112px, 15.8vh, 178px) clamp(18px, 3.4vh, 40px);
    padding-block: clamp(112px, 15.8svh, 178px) clamp(18px, 3.4svh, 40px);
  }

  .hero__copy,
  .hero__media {
    position: relative;
    inset: auto;
    inline-size: auto;
  }

  .hero__copy {
    z-index: 3;
    max-inline-size: clamp(440px, 39vw, 640px);
  }

  .hero__media {
    justify-self: stretch;
    block-size: clamp(420px, 64vh, 760px);
    block-size: clamp(420px, 64svh, 760px);
    margin-inline-end: clamp(-48px, -2.8vw, -18px);
    transform: none;
  }

  .hero__title {
    max-inline-size: clamp(440px, 42vw, 645px);
    font-size: clamp(52px, 5.8vw, var(--type-hero-size));
  }

  .hero__eyebrow {
    margin-block-end: clamp(18px, 3.2vh, 40px);
    margin-block-end: clamp(18px, 3.2svh, 40px);
  }

  .hero__text {
    max-inline-size: clamp(390px, 36vw, 500px);
    margin-block-start: clamp(18px, 3.1vh, 34px);
    margin-block-start: clamp(18px, 3.1svh, 34px);
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.62;
  }

  .hero__actions {
    margin-block-start: clamp(22px, 3.8vh, 46px);
    margin-block-start: clamp(22px, 3.8svh, 46px);
  }

  .trust-strip {
    grid-row: 2;
    position: relative;
    inset: auto;
    z-index: 5;
    padding-block: clamp(8px, 1.5vh, 24px) clamp(10px, 2.2vh, 30px);
    padding-block: clamp(8px, 1.5svh, 24px) clamp(10px, 2.2svh, 30px);
  }

  .trust-strip__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, 1.4vw, 32px);
  }

  .trust-item {
    gap: clamp(6px, 0.8vw, 12px);
    padding-inline: clamp(4px, 0.8vw, 14px);
  }

  .trust-item__icon,
  .benefit-item__icon,
  .utility-footer__icon {
    inline-size: clamp(30px, 3vw, 42px);
    block-size: clamp(30px, 3vw, 42px);
  }

  .trust-item__copy {
    font-size: clamp(10.5px, 0.86vw, 13px);
    line-height: 1.25;
  }
}

@media (min-width: 1024px) and (max-width: 1919px) and (max-height: 950px) {
  .hero {
    block-size: clamp(640px, 100vh, 800px);
    block-size: clamp(640px, 100svh, 800px);
  }

  .hero__inner {
    padding-block-start: clamp(88px, 13vh, 118px);
    padding-block-start: clamp(88px, 13svh, 118px);
    padding-block-end: clamp(10px, 2vh, 22px);
    padding-block-end: clamp(10px, 2svh, 22px);
  }

  .hero__title {
    font-size: clamp(48px, 5.15vw, 72px);
  }

  .hero__text {
    margin-block-start: 18px;
    line-height: 1.52;
  }

  .hero__actions {
    margin-block-start: 22px;
  }

  .button {
    min-block-size: 50px;
  }

  .trust-strip {
    padding-block: 6px 8px;
  }

  .trust-item__icon {
    inline-size: 30px;
    block-size: 30px;
  }
}

/* =========================================================
   1280 × 720
========================================================= */
@media (min-width: 1260px) and (max-width: 1299px) and (min-height: 700px) and (max-height: 740px) {
  .hero__inner.section-shell {
    inline-size: min(calc(100% - 48px), 1232px) !important;
  }
}


/* =========================================================
   1366 × 768
========================================================= */
@media (min-width: 1350px) and (max-width: 1379px) and (min-height: 740px) and (max-height: 790px) {

}


/* =========================================================
   1400 × 900
========================================================= */
@media (min-width: 1380px) and (max-width: 1439px) and (min-height: 850px) and (max-height: 930px) {

}


/* =========================================================
   1440 × 900
========================================================= */
@media (min-width: 1440px) and (max-width: 1499px) and (min-height: 850px) and (max-height: 930px) {

}


/* =========================================================
   1600 × 900
========================================================= */
@media (min-width: 1500px) and (max-width: 1700px) and (min-height: 850px) and (max-height: 930px) {
  .hero {
    block-size: clamp(648px, 101svh, 806px) !important;
  }
}