/* magazine.css — Direction "magazine" de l'accueil, pensée mobile-first :
   les styles de base visent le smartphone, les media queries min-width
   enrichissent pour tablette / ordinateur. */

.kicker{
  margin:0 0 10px; font-family:var(--font-body,'Public Sans',sans-serif); font-size:.72rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand-strong,#0d8b73); text-align:inherit;
}
/* Titres : serif moderne, grands, serrés ; accents en italique */
.section-rich h2,.section-alt h2,.section-cta h2,.instants h2,.environs h2,.avis-section h2{
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600;
  font-size:clamp(1.85rem,7vw,3.1rem); line-height:1.08; letter-spacing:-.015em;
}
.section-rich h2 em,.section-alt h2 em,.instants h2 em,.environs h2 em,.hero-copy h1 em{
  font-style:italic; font-weight:500; color:var(--brand-strong,#0d8b73);
}
.section-rich p,.section-alt p,.lead{ line-height:1.7; }

/* ================= HÉROS VIDÉO ================= */
.hero-video{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  min-height:calc(100vh - 70px);
  display:flex; align-items:flex-end; background:#1b2430;
}
@supports (height:100svh){ .hero-video{ min-height:calc(100svh - 70px); } }
/* Sous 1024px la barre d'actions (≈72px) occupe le bas de l'écran : le héros s'arrête au-dessus */
@media (max-width:1023px){
  .hero-video{ min-height:calc(100vh - 70px - 72px); }
  @supports (height:100svh){ .hero-video{ min-height:calc(100svh - 70px - 72px - env(safe-area-inset-bottom)); } }
}
.hero-media{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; z-index:-2; }
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(27,36,48,.15) 0%,rgba(27,36,48,.05) 35%,rgba(16,24,32,.82) 100%);
}
.hero-copy{ width:100%; box-sizing:border-box; padding:0 20px 28px; text-align:left; }
.hero-copy .kicker{ color:#f3e3a0; }
.hero-copy h1{
  margin:0 0 12px; font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600;
  font-size:clamp(2.3rem,10.5vw,5.4rem); line-height:1.02; letter-spacing:-.02em; color:#fff; text-align:left;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-copy h1 em{ color:#f3e3a0; }
.hero-sub{ margin:0 0 22px; max-width:34ch; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.92); text-align:left; }
/* Boutons dans la zone du pouce : pleine largeur sur mobile */
.hero-ctas{ display:flex; flex-direction:column; gap:10px; }
.hero-btn{
  display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:8px;
  font-weight:800; font-size:1rem; text-decoration:none; transition:transform .15s ease, background .2s ease;
}
.hero-btn.primary{ background:#fff; color:var(--brand-deep,#0b6c58); }
.hero-btn.ghost{ border:1.5px solid rgba(255,255,255,.85); color:#fff; background:rgba(255,255,255,.08); }
.hero-btn:active{ transform:scale(.98); }
.hero-btn:focus-visible,.hero-toggle:focus-visible{ outline:3px solid #f3e3a0; outline-offset:3px; }
.hero-toggle{
  position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(16,24,32,.45); color:#fff; display:flex; align-items:center; justify-content:center;
}
.hero-toggle[hidden]{ display:none; }
.hero-toggle .i-pause{ width:12px; height:14px; border-left:4px solid currentColor; border-right:4px solid currentColor; box-sizing:border-box; }
.hero-toggle.is-paused .i-pause{ width:0; height:0; border:0; border-left:12px solid currentColor; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; }
@media (min-width:768px){
  .hero-video{ min-height:min(86vh,820px); align-items:center; }
  .hero-shade{ background:linear-gradient(90deg,rgba(16,24,32,.78) 0%,rgba(16,24,32,.35) 55%,rgba(16,24,32,.1) 100%); }
  .hero-copy{ max-width:1200px; margin:0 auto; padding:0 40px; }
  .hero-sub{ font-size:1.15rem; }
  .hero-ctas{ flex-direction:row; }
  .hero-btn:hover{ transform:translateY(-1px); }
  .hero-toggle{ top:auto; bottom:22px; right:22px; }
}

/* ================= INSTANTS DE VIE ================= */
.instants{ padding:56px 0 48px; background:var(--paper,#fffefb); }
.instants-head{ padding:0 20px; margin-bottom:22px; text-align:left; }
.instants-head h2{ margin:0; text-align:left; }
.instants-head h2::after{ content:none !important; }
/* Mobile : défilement horizontal au pouce */
.instants-grid{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; padding:0 20px 8px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.instants-grid::-webkit-scrollbar{ display:none; }
.instant{ position:relative; margin:0; scroll-snap-align:center; border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:#e8f7f3; }
.instant img{ width:100%; height:100% !important; object-fit:cover; display:block; transition:transform .8s ease; }
.instant figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:40px 16px 14px; color:#fff; text-align:left;
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-size:1.05rem; line-height:1.3;
  background:linear-gradient(180deg,transparent,rgba(16,24,32,.72));
}
@media (min-width:768px){
  .instants{ padding:84px 0 100px; }
  .instants-head{ max-width:1200px; margin:0 auto 32px; padding:0 40px; }
  .instants-grid{
    max-width:1200px; margin:0 auto; padding:0 40px; overflow:visible;
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-columns:auto; gap:18px;
  }
  .instant.tall{ transform:translateY(28px); }
  .instant:hover img{ transform:scale(1.04); }
}

/* ================= ENVIRONS ================= */
.environs{ padding:56px 0; background:linear-gradient(180deg,var(--brand-soft-2,#f1fcfa) 0%,#fff 100%); }
.env-head{ padding:0 20px; margin-bottom:20px; text-align:left; }
.env-head h2{ margin:0 0 10px; text-align:left; }
.env-head h2::after{ content:none !important; }
.env-lead{ margin:0; max-width:56ch; color:var(--ink-soft,#4b5a63); text-align:left; }
.env-layout{ display:flex; flex-direction:column; gap:18px; }
.env-list{
  list-style:none; margin:0; padding:0 20px 6px; display:grid; grid-auto-flow:column; grid-auto-columns:84%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.env-list::-webkit-scrollbar{ display:none; }
.env-card{
  scroll-snap-align:start; display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line,#e4ece9);
  border-radius:14px; padding:16px; box-shadow:0 8px 20px -16px rgba(27,36,48,.35); text-align:left;
}
.env-card h3{ margin:0; font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:1.12rem; text-align:left; }
.env-where{ margin:2px 0 6px; font-size:.78rem; font-weight:700; color:var(--brand-strong,#0d8b73); text-align:left; }
.env-desc{ margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-soft,#4b5a63); text-align:left; }
.env-ico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--brand-soft,#e8f7f3); position:relative; }
.env-ico::before{
  content:""; position:absolute; inset:10px; background:var(--brand-deep,#0b6c58);
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
}
.env-ico[data-ico="transport"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 2 4 3 4 7v9a3 3 0 0 0 2 2.8L5 21h2l1-2h8l1 2h2l-1-2.2A3 3 0 0 0 20 16V7c0-4-3-5-8-5zM7.5 17A1.5 1.5 0 1 1 9 15.5 1.5 1.5 0 0 1 7.5 17zm9 0a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5zM18 11H6V7h12z'/%3E%3C/svg%3E"); }
.env-ico[data-ico="plane"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E"); }
.env-ico[data-ico="market"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16l1 5a3 3 0 0 1-5 2.2A3 3 0 0 1 12 12a3 3 0 0 1-4-.8A3 3 0 0 1 3 9zm1 9.5a4.9 4.9 0 0 0 3-.6 4.9 4.9 0 0 0 4 .9 4.9 4.9 0 0 0 4-.9 4.9 4.9 0 0 0 3 .6V20H5zM10 15v5h4v-5z'/%3E%3C/svg%3E"); }
.env-ico[data-ico="culture"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7zM4 11v7h3v-7zm6.5 0v7h3v-7zM17 11v7h3v-7zM2 20v2h20v-2z'/%3E%3C/svg%3E"); }
.env-ico[data-ico="park"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6 5 5 0 0 0-2 9 5 5 0 0 0 7 1v4h2v-4a5 5 0 0 0 7-1 5 5 0 0 0-2-9 6 6 0 0 0-6-6z'/%3E%3C/svg%3E"); }
.env-ico[data-ico="study"]{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9zM5 13.2V17c0 1.7 3.1 3 7 3s7-1.3 7-3v-3.8L12 17z'/%3E%3C/svg%3E"); }
.env-map{ margin:0 20px; border-radius:16px; overflow:hidden; position:relative; min-height:320px; background:#dbece7; }
.env-map-facade{ position:absolute; inset:0; }
.env-map-facade img{ width:100%; height:100% !important; object-fit:cover; filter:saturate(.7) brightness(.5); }
.env-map-copy{ position:absolute; inset:auto 0 0 0; padding:20px; color:#fff; text-align:left; display:flex; flex-direction:column; gap:10px; }
.env-map-copy p{ margin:0; color:#fff; text-align:left; font-size:1rem; }
.env-map-copy small{ font-size:.72rem; opacity:.85; }
.env-map-load{
  min-height:52px; border:0; border-radius:8px; cursor:pointer; font:inherit; font-weight:800; font-size:1rem;
  background:#fff; color:var(--brand-deep,#0b6c58);
}
.env-map-load:focus-visible,.env-map-ext:focus-visible{ outline:3px solid #f3e3a0; outline-offset:2px; }
.env-map-ext{ color:#fff !important; font-weight:700; font-size:.88rem; min-height:44px; display:inline-flex; align-items:center; }
.env-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (min-width:768px){
  .environs{ padding:84px 0; }
  .env-head{ max-width:1200px; margin:0 auto 32px; padding:0 40px; }
  .env-layout{ max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:stretch; }
  .env-list{ grid-auto-flow:row; grid-template-columns:1fr 1fr; grid-auto-columns:auto; overflow:visible; padding:0; }
  .env-map{ margin:0; min-height:100%; }
}
@media (min-width:768px) and (max-width:1023px){
  .env-layout{ grid-template-columns:1fr; }
  .env-map{ min-height:380px; }
}

/* =====================================================================
   SYSTÈME "MAGAZINE" COMMUN À TOUTES LES SECTIONS DE L'ACCUEIL
   (même DA que "Les petits détails") — mobile-first
   ===================================================================== */
.mag{
  --mag-bg:#fffefb; --mag-alt:#f4faf8;
  width:100%; box-sizing:border-box; padding:56px 0; position:relative; background:var(--mag-bg);
  color:var(--ink,#1b2430); text-align:left;
}
.mag.mag-alt{ background:var(--mag-alt); }
.mag .inner,.mag .mag-inner{ width:auto; max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.mag p,.mag li,.mag h3{ text-align:left; }
.mag-head{ margin:0 0 26px; }
.mag-head h2,.mag h2{
  margin:0; text-align:left !important; color:var(--ink,#1b2430);
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600;
  font-size:clamp(1.85rem,7vw,3.1rem); line-height:1.08; letter-spacing:-.015em;
}
.mag h2 em,.fav-head h2 em{ font-style:italic; font-weight:500; color:var(--brand-strong,#0d8b73); }
.mag h2::after,.mag .inner > h2::after,.mag-head h2::after{ content:none !important; display:none !important; }
.mag .lead{ margin:14px 0 0; max-width:62ch; font-size:1.05rem; line-height:1.75; color:var(--ink-soft,#4b5a63); text-align:left; }
.mag h3{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.25rem; line-height:1.25; color:var(--ink,#1b2430); letter-spacing:0; }

/* Cartes : même langage que les photos (arrondi 14px, ombre douce) */
.mag .value-item,.mag .engagement,.mag .check-list li,.mag .why-list li,.mag .steps-timeline li,.mag .faq-item,.mag .flag-card{
  background:#fff; border:1px solid var(--line,#e4ece9); border-radius:14px;
  box-shadow:0 10px 26px -20px rgba(27,36,48,.45); transform:none;
}
.mag .value-item:hover,.mag .engagement:hover,.mag .steps-timeline li:hover{ transform:translateY(-3px); box-shadow:0 18px 32px -22px rgba(27,36,48,.5); }

/* Grilles numérotées 01 / 02… en serif italique */
.mag .value-grid,.mag .engagements-grid{ counter-reset:mag; display:grid; grid-template-columns:1fr; gap:14px; margin:0; }
.mag .value-item,.mag .engagement{ counter-increment:mag; position:relative; padding:22px 20px 22px; }
.mag .value-item::before,.mag .engagement::before{
  content:counter(mag, decimal-leading-zero); display:block; margin-bottom:10px;
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-size:2.1rem; line-height:1; color:var(--brand-strong,#0d8b73);
}
/* Neutralise l'ancien voile dégradé (position absolue, opacité 0) de .engagement::before */
.mag .value-item,.mag .engagement{ text-align:left; border-radius:14px; }
.mag .value-item::before,.mag .engagement::before{
  position:static; inset:auto; opacity:1; background:none; transition:none; text-align:left;
}
.mag .value-item h3,.mag .engagement h3{ margin:0 0 6px; color:var(--ink,#1b2430); letter-spacing:0; font-size:1.25rem; }
/* Drapeaux : format raisonnable */
.mag .flags-grid{ max-width:640px; grid-template-columns:repeat(2,1fr); gap:16px; }
.mag .flag-card img,.mag .flag-card svg{ aspect-ratio:3/2; height:auto; object-fit:cover; }
.mag .value-item p,.mag .engagement p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink-soft,#4b5a63); }

/* ADN */
.mag .cols-2{ margin:0; display:grid; grid-template-columns:1fr; gap:28px; }
.mag .cols-2 h3{ margin:0 0 12px; }
.mag .check-list{ gap:10px; }
.mag .check-list li{ padding:14px 16px 14px 48px; font-size:.98rem; }
.mag .check-list li::before{
  content:""; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  background:var(--brand-soft,#e8f7f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6c58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mag .cols-2 p{ color:var(--ink-soft,#4b5a63); line-height:1.7; }

/* Pourquoi : liste éditoriale numérotée (bloc + numéro positionné : le texte reste d'un seul tenant) */
.mag .why-list{ counter-reset:why; max-width:none; margin:0; display:grid; grid-template-columns:1fr; gap:12px; }
.mag .why-list li{ counter-increment:why; position:relative; display:block; padding:18px 20px 18px 70px; font-size:1rem; line-height:1.6; color:var(--ink-soft,#4b5a63); }
.mag .why-list li::before{
  content:counter(why, decimal-leading-zero); position:absolute; left:20px; top:14px; font-family:var(--font-display,'Fraunces',Georgia,serif);
  font-style:italic; font-size:1.6rem; line-height:1.2; color:var(--brand-strong,#0d8b73);
}
.mag .why-list li strong{ display:block; font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:1.15rem; font-weight:600; margin-bottom:2px; }

/* Sections bord à bord, sans bandes entre elles, et même colonne de contenu partout */
main.fade-in-main{ padding:0 !important; max-width:none !important; }
.mag,.instants,.environs,.avis-section,.logements-slider{ margin-top:0 !important; margin-bottom:0 !important; }
.instants-head,.instants-grid,.env-head,.env-layout,.avis-section .inner{ box-sizing:border-box; }
@media (min-width:768px){
  .instants-head,.env-head,.env-layout,.avis-section .inner{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px; }
  .instants-grid{ max-width:1200px; padding-left:40px; padding-right:40px; }
}
.mag .why-list li strong{ color:var(--ink,#1b2430); }

/* Processus : grands numéros italiques au lieu des pastilles */
.mag .steps-timeline{ max-width:none; margin:0; display:grid; grid-template-columns:1fr; gap:14px; }
.mag .steps-timeline li{ padding:22px 20px; gap:6px; }
.mag .steps-timeline .step-badge{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0; color:var(--brand-strong,#0d8b73);
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-weight:500; font-size:2.6rem; line-height:1; justify-content:flex-start;
}
.mag .steps-timeline .step-badge::before{ content:"0"; }
.mag .steps-timeline h3{ font-size:1.25rem; letter-spacing:0; }
.mag .steps-timeline p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft,#4b5a63); }

/* Racines (drapeaux) */
.mag .flags-grid{ margin:0; }
.mag .flag-card{ overflow:hidden; padding:0 0 14px; }
.mag .flag-label{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-size:1.15rem; padding:0 16px; text-align:left; }

/* FAQ : questions en serif, accordéon épuré */
.mag .faq-list{ display:flex; flex-direction:column; gap:10px; }
.mag .faq-item{ overflow:hidden; }
.mag .faq-question{
  min-height:60px; padding:16px 20px; color:var(--ink,#1b2430); background:#fff;
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.08rem; line-height:1.35;
}
.mag .faq-question::after{ color:var(--brand-strong,#0d8b73); font-family:var(--font-body,'Public Sans',sans-serif); font-size:1.4rem; font-weight:400; }
.mag .faq-answer p{ margin:0; padding:0 20px 18px; color:var(--ink-soft,#4b5a63); line-height:1.7; }

/* Présentation : texte + grande photo */
.mag-split-grid{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
.mag-photo{ position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:#e8f7f3; }
.mag-photo img{ width:100%; height:100% !important; object-fit:cover; display:block; }
.mag-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:40px 16px 14px; color:#fff; text-align:left;
  font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-size:1.05rem;
  background:linear-gradient(180deg,transparent,rgba(16,24,32,.72));
}

/* Bandeau titre au-dessus du slider */
.mag-band{ padding:48px 0 18px; }
.mag-band .mag-head{ margin:0; }

/* Appel final : fond onyx, titre clair */
.mag-cta{ background:linear-gradient(135deg,#1b2430 0%,#24313d 60%,#0b6c58 140%); color:#fff; padding:64px 0; }
.mag-cta h2{ color:#fff !important; }
.mag-cta h2 em{ color:#f3e3a0; }
.mag-cta .kicker{ color:#f3e3a0; }
.mag-cta .lead{ color:rgba(255,255,255,.85); }
.mag-cta .cta-actions{ justify-content:flex-start; margin-top:24px; flex-direction:column; gap:10px; }
.mag-cta .btn-cta{ display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:8px; padding:0 24px; font-size:1rem; font-weight:800; letter-spacing:0; }
.mag-cta .btn-cta.alt{ background:transparent; border:1.5px solid rgba(255,255,255,.8); color:#fff; }

/* Avis & favoris : alignés sur la même DA */
.avis-section{ background:var(--mag-alt,#f4faf8); text-align:left; }
.avis-section .inner > h2,.avis-section h2{ text-align:left !important; }
.avis-section h2 em{ font-style:italic; font-weight:500; color:var(--brand-strong,#0d8b73); }
.avis-section h2::after{ content:none !important; }
.avis-section .avis-lead{ margin:12px 0 26px; text-align:left; }
.avis-section .kicker{ text-align:left; }
.fav-section{ background:#fffefb; border-radius:14px; }
.fav-head h2{ font-size:clamp(1.6rem,6vw,2.4rem); }
.fav-head .kicker{ margin-bottom:6px; }

@media (min-width:640px){
  .mag .value-grid,.mag .engagements-grid,.mag .steps-timeline{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .mag .why-list{ grid-template-columns:repeat(2,1fr); }
  .mag-cta .cta-actions{ flex-direction:row; }
}
@media (min-width:768px){
  .mag{ padding:88px 0; }
  .mag .inner,.mag .mag-inner{ padding:0 40px; }
  .mag-head{ margin-bottom:36px; }
  .mag-band{ padding:72px 0 24px; }
  .mag .cols-2{ grid-template-columns:1fr 1fr; gap:40px; }
  .mag-split-grid{ grid-template-columns:1.05fr .95fr; gap:56px; }
  .mag-photo{ aspect-ratio:4/5; max-height:620px; transform:translateY(0); }
  .mag-cta{ padding:96px 0; }
}
@media (min-width:1024px){
  .mag .value-grid,.mag .engagements-grid,.mag .steps-timeline{ grid-template-columns:repeat(4,1fr); }
  .mag .steps-timeline li:nth-child(even),.mag .engagement:nth-child(even),.mag .value-item:nth-child(even){ transform:translateY(28px); }
  .mag .steps-timeline li:nth-child(even):hover,.mag .engagement:nth-child(even):hover,.mag .value-item:nth-child(even):hover{ transform:translateY(25px); }
  .mag#mission,.mag#engagements,.mag#processus{ padding-bottom:116px; }
}

/* Espace entre une intro et la grille qui suit */
.mag .lead + .value-grid,.mag .lead + .engagements-grid{ margin-top:28px; }

/* ================= NOS LOGEMENTS : cartes photo (remplace le diaporama) ================= */
.types-grid{
  list-style:none; margin:0; padding:0 0 8px; display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.types-grid::-webkit-scrollbar{ display:none; }
.types-grid li{ scroll-snap-align:center; }
.type-card{
  position:relative; display:block; aspect-ratio:4/5; border-radius:14px; overflow:hidden; text-decoration:none;
  background:#e8f7f3; color:#fff;
}
.type-card img{ width:100%; height:100% !important; object-fit:cover; display:block; transition:transform .8s ease; }
.type-copy{
  position:absolute; left:0; right:0; bottom:0; padding:48px 16px 16px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(180deg,transparent,rgba(16,24,32,.78));
}
.type-copy strong{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-weight:600; font-size:1.45rem; line-height:1.1; color:#fff; }
.type-copy span{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-style:italic; font-size:.98rem; color:rgba(255,255,255,.9); }
.type-card--box{ background:linear-gradient(150deg,#24313d 0%,#1b2430 55%,#0b6c58 140%); }
.type-ico{
  position:absolute; top:38%; left:50%; width:84px; height:84px; transform:translate(-50%,-50%); background:#f3e3a0; opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6v10H3z'/%3E%3Cpath d='M6 20v-8h12v8M6 15h12M6 17.5h12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6v10H3z'/%3E%3Cpath d='M6 20v-8h12v8M6 15h12M6 17.5h12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.type-card:focus-visible{ outline:3px solid var(--gold,#c7ae33); outline-offset:3px; }
@media (min-width:640px){
  .types-grid{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto; overflow:visible; gap:18px; }
}
@media (min-width:1024px){
  .types-grid{ grid-template-columns:repeat(4,1fr); }
  .types-grid li:nth-child(even){ transform:translateY(28px); }
  .logements-types{ padding-bottom:116px; }
  .type-card:hover img{ transform:scale(1.04); }
}