/*
Theme Name: Mirow Événementiel
Theme URI: https://mirow.fr
Author: Mirow Événementiel
Description: Thème bloc sur mesure pour Mirow Événementiel — location d'effets spéciaux à Marseille.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mirow
Tags: block-theme, full-site-editing, one-column
*/

/* Registre relevé sur light-sound.fr : fond noir, un seul accent or,
   Montserrat (titres) + Rubik (texte), angles vifs, bandes bord à bord,
   affiches inclinées skewY(2deg).
   Les règles qui posent des marges sont préfixées par « body » : le CSS de
   mise en page de WordPress (:root :where(.is-layout-flow) > *) a une
   spécificité (0,1,0) et est imprimé après cette feuille. */

:root {
  --or: #BF9341;
  --noir: #000000;
  --anthracite: #232323;
  --ardoise: #1A2229;
  --blanc: #FFFFFF;
  --pointille: rgba(255, 255, 255, .5);
  --titre: 'Montserrat', sans-serif;
  --texte: 'Rubik', sans-serif;
  --barre-h: 77px;
  --conteneur: 1110px;

  --i-effets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 27 19 13M17 11l4 4'/%3E%3Cpath d='M22 3v4M22 13v4M15 10h4M25 10h4M17.5 5.5l2 2M24.5 12.5l2 2M26.5 5.5l-2 2'/%3E%3C/svg%3E");
  --i-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 5H5v22h20V15'/%3E%3Cpath d='M26 4l2 2-12 12-3 1 1-3z'/%3E%3Cpath d='M9 12h7M9 17h4M9 22h10'/%3E%3C/svg%3E");
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h5l2 7-3 2c1.5 3.5 4 6 7 7l2-3 7 2v5c0 1-1 2-2 2C14 26 6 18 6 6c0-1 1-2 2-2z'/%3E%3C/svg%3E");
  --i-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 29s9-9 9-16a9 9 0 0 0-18 0c0 7 9 16 9 16z'/%3E%3Ccircle cx='16' cy='13' r='3.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
}
img, video { display: block; max-width: 100%; height: auto; } /* height:auto obligatoire : l'attribut height des blocs image l'emporterait sur aspect-ratio */
a { color: inherit; text-decoration: none; }
body h1, body h2, body h3, body p, body ul, body figure { margin: 0; }
body ul { padding: 0; list-style: none; }

/* Neutralisation de l'espacement automatique : blockGap à 0 dans theme.json,
   et ici seulement à spécificité nulle (jamais .wp-block-group > *). */
:where(.wp-block-group) > :where(*) { margin-block: 0; }
body figure.wp-block-image, body figure.wp-block-video { margin: 0; }

/* icône = pseudo-élément masqué, couleur = currentColor */
.ico-effets > .wp-block-navigation-item__content::before,
.ico-contact > .wp-block-navigation-item__content::before,
.ico-tel > .wp-block-navigation-item__content::before,
.encart-lieu::before {
  content: ''; flex: none;
  width: 28px; height: 28px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.ico-effets > .wp-block-navigation-item__content::before  { -webkit-mask-image: var(--i-effets);  mask-image: var(--i-effets); }
.ico-contact > .wp-block-navigation-item__content::before { -webkit-mask-image: var(--i-contact); mask-image: var(--i-contact); }
.ico-tel > .wp-block-navigation-item__content::before     { -webkit-mask-image: var(--i-tel);     mask-image: var(--i-tel); }
.encart-lieu::before { -webkit-mask-image: var(--i-lieu); mask-image: var(--i-lieu); width: 22px; height: 22px; }

/* ───────── Barre de navigation ───────── */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--barre-h);
  display: flex; align-items: center;
  padding: 8px 80px;
  background: var(--or);
  transition: height .3s ease;
}
.barre.reduite { --barre-h: 64px; }
.admin-bar .barre { top: 32px; }
@media (max-width: 782px) { .admin-bar .barre { top: 46px; } }

.logo { display: flex; flex-direction: column; align-items: center; color: var(--noir); line-height: 1; }
body .logo-mot {
  font-family: var(--titre); font-weight: 300;
  font-size: 46px; line-height: 1; letter-spacing: .02em;
  transition: font-size .3s ease;
}
.logo-mot strong { font-weight: 800; }
body .logo-sous {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--noir);
  font-family: var(--titre); font-weight: 500;
  font-size: 10px; line-height: 1; letter-spacing: .32em; text-transform: uppercase;
  transition: all .3s ease;
}
.barre.reduite .logo-mot { font-size: 38px; }
body .barre.reduite .logo-sous { margin-top: 3px; padding-top: 3px; font-size: 9px; }

/* core/navigation : le CSS du bloc est imprimé après cette feuille,
   d'où les sélecteurs qualifiés par nav.menu-principal */
nav.menu-principal { margin-left: auto; color: var(--blanc); }
nav.menu-principal .wp-block-navigation__container { gap: 20px; align-items: center; }
nav.menu-principal .wp-block-navigation-item__content {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--blanc);
  transition: opacity .2s;
}
nav.menu-principal .wp-block-navigation-item__content:hover { opacity: .8; }
nav.menu-principal .ico-effets > .wp-block-navigation-item__content::after {   /* chevron du sous-menu */
  content: ''; margin-left: -4px;
  border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
nav.menu-principal .wp-block-navigation__submenu-container {
  min-width: 230px !important; padding: 22px 0;
  background: var(--or) !important; color: var(--blanc) !important;
  border: 0 !important;
  top: 100%; left: 0;
}
nav.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; padding: 7px 28px; font-weight: 500;
}
nav.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--ardoise); opacity: 1; }
nav.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { content: none; }

nav.menu-principal .bouton-tel { margin-left: 20px; }
nav.menu-principal .bouton-tel > .wp-block-navigation-item__content {
  padding: 6px 24px;
  border: 2px solid var(--blanc); border-radius: 3px;
  font-size: 17px; letter-spacing: .03em;
  transition: background .2s, color .2s;
}
nav.menu-principal .bouton-tel > .wp-block-navigation-item__content:hover { background: var(--blanc); color: var(--or); opacity: 1; }

/* bouton du menu mobile + panneau ouvert (blanc sur blanc sans ceci) */
nav.menu-principal .wp-block-navigation__responsive-container-open { color: var(--blanc); padding: 8px; }
nav.menu-principal .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--or) !important;
  color: var(--blanc) !important;
  padding: 24px 24px 40px;
}
/* le menu est justifié à droite dans la barre : dans le panneau, tout revient à gauche comme la maquette */
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-justify: flex-start;
  --navigation-layout-align: flex-start;
  text-align: left;
}
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation-item,
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; }
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__container { gap: 6px; align-items: flex-start !important; }
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation-item__content { padding: 10px 0; font-size: 18px; }
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 6px 38px !important; }
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0; font-size: 16px; }
.wp-block-navigation.menu-principal .is-menu-open .bouton-tel { margin: 14px 0 0; }
.wp-block-navigation.menu-principal .is-menu-open .bouton-tel > .wp-block-navigation-item__content { padding: 6px 24px; }
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container-close { color: var(--blanc); }

/* ───────── Vidéo d'ouverture ───────── */
.hero {
  position: relative;
  height: 56.25vw;            /* 16:9, comme la référence */
  max-height: 100vh;
  min-height: 260px;
  overflow: hidden;
  background: var(--noir);
}
body .hero-video { height: 100%; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Titres de section ───────── */
.intro { padding: 30px 16px; text-align: center; }
.page-interne .intro { padding-top: calc(var(--barre-h) + 56px); padding-bottom: 40px; }
body .intro-titre, body .section-titre {
  font-family: var(--titre); font-weight: 700;
  font-size: 32px; line-height: 1.35;
  color: var(--or);
  margin-bottom: 18px;
  text-align: center;
  text-wrap: balance; hyphens: none;
}
body .intro-texte, body .section-texte {
  font-family: var(--titre); font-weight: 400;
  font-size: 24px; line-height: 1.6;
  text-align: center;
}

/* ───────── Grille des effets (accueil) ───────── */
.effets { padding: 6px 15px 64px; }
.grille {
  max-width: var(--conteneur); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  row-gap: 64px;
}
.effet { border-left: 1px dotted var(--pointille); }
.effet:nth-child(3n) { border-right: 1px dotted var(--pointille); }

/* carte : relevé exact de la référence — affiche inclinée de 2°, la carte monte au survol */
.carte {
  display: flex; flex-direction: column;
  padding: 0 32px 40px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.carte:hover { transform: translateY(-48px); }

body .affiche {
  position: relative; display: block;
  aspect-ratio: 425 / 647;
  margin-bottom: 40px;
  overflow: hidden;
  background: var(--anthracite);
  transform: skewY(2deg);
}
.affiche .affiche-img { position: absolute; inset: 0; z-index: 0; }
.affiche .affiche-img a { display: block; height: 100%; }
.affiche .affiche-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.affiche::before {          /* ombre haute : lisibilité du titre d'affiche */
  content: ''; position: absolute; inset: 0 0 45% 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.affiche .affiche-titre {
  position: absolute; z-index: 2; inset: 30px 16px auto;
  font-family: var(--titre); font-weight: 800;
  font-size: 36px; line-height: 1.02;
  text-transform: uppercase; text-align: center;
  letter-spacing: .01em;
  color: var(--blanc);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  pointer-events: none;     /* le clic traverse jusqu'au lien de l'image */
}
.carte:hover .affiche-img img { transform: scale(1.01); }

.plus {
  align-self: flex-start;
  font-weight: 500; font-size: 16px;
  transition: color .2s;
}
.plus:hover { color: var(--or); }
.plus-centre { text-align: center; margin-top: 24px; }

/* ───────── Fiches effets (catalogue) ───────── */
.fiche {
  max-width: var(--conteneur); margin: 0 auto;
  display: grid; grid-template-columns: 430px 1fr; align-items: center; gap: 80px;
  padding: 48px 15px;
  border-top: 1px dotted var(--pointille);
  scroll-margin-top: 90px;
}
.fiche.fiche-inverse { grid-template-columns: 1fr 430px; }
.fiche-inverse .fiche-photo { order: 2; }
.fiche .fiche-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--anthracite); }
.fiche .fiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-texte { display: flex; flex-direction: column; }
body .fiche-titre {
  font-family: var(--titre); font-weight: 300;
  font-size: 32px; line-height: 1.3; color: var(--or);
  margin-bottom: 20px;
}
body .fiche-desc { font-size: 18px; line-height: 1.6; font-weight: 300; margin-bottom: 26px; max-width: 520px; }
body .fiche-usages { margin-bottom: 30px; }
.fiche-usages li {
  font-family: var(--titre); font-weight: 500; font-size: 24px; line-height: 1.5;
}

/* ───────── Forfaits (catalogue) ───────── */
.forfaits {
  padding: 72px 15px 64px;
  border-top: 1px dotted var(--pointille);
  scroll-margin-top: 70px;
}
body .forfaits .section-texte { margin-bottom: 40px; }
.grille-forfaits {
  max-width: var(--conteneur); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.forfait {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px;
  background: var(--anthracite);
  text-align: center;
}
body .forfait-nom, body .forfait-prix {
  font-family: var(--titre); font-weight: 500;
  font-size: 16px; line-height: 1.5;
  text-transform: uppercase; color: var(--or);
}
body .forfait-accroche { margin: 4px 0 18px; font-size: 15px; font-weight: 300; }
body .forfait-prix { margin-bottom: 18px; }
body .forfait-liste { margin-bottom: 26px; flex: 1; }
.forfait-liste li { font-size: 15px; line-height: 1.45; padding: 4px 0; }
.forfait .plus { align-self: center; }
body .forfaits-note { max-width: var(--conteneur); margin: 22px auto 0; font-size: 14px; font-weight: 300; text-align: center; }

/* ───────── Bande photo (catalogue) ───────── */
.galerie {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding: 0 16px 64px;
}
.galerie .galerie-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.galerie .galerie-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Bandeau contact ───────── */
.bandeau-contact {
  position: relative;
  padding: 96px 15px;
  overflow: hidden;
}
.bandeau-contact .bandeau-photo { position: absolute; inset: 0; z-index: 0; }
.bandeau-contact .bandeau-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.bandeau-contact::before {   /* voile ardoise à 20 %, comme la référence */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--ardoise); opacity: .2;
}
.conteneur { position: relative; z-index: 2; max-width: var(--conteneur); margin: 0 auto; }
.encart { width: 444px; background: var(--or); }
body .encart-titre {
  padding: 20px 30px;
  font-family: var(--titre); font-weight: 500;
  font-size: 24px; line-height: 1.5;
  color: var(--ardoise);
}
.encart-titre a[href^="mailto:"] { font-weight: 400; color: var(--blanc); }
.encart-lieu {
  display: flex; align-items: center; gap: 10px;
  padding: 0 30px 28px;
  font-weight: 500; color: var(--ardoise);
}

/* ───────── Contact : encart + formulaire WPForms ───────── */
.contact {
  max-width: var(--conteneur); margin: 0 auto;
  display: grid; grid-template-columns: 444px 1fr; gap: 64px; align-items: start;
  padding: 16px 15px 80px;
}
/* WPForms imprime ses propres styles : sélecteurs qualifiés par .formulaire */
.formulaire .wpforms-container { margin: 0 !important; }
.formulaire .wpforms-container .wpforms-form .wpforms-field { margin: 0 0 22px !important; padding: 0 !important; }
.formulaire .wpforms-container .wpforms-form .wpforms-field-label {
  display: block; margin: 0 0 8px !important; padding: 0;
  font-family: var(--texte) !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1.5 !important;
  color: var(--blanc) !important;
}
.formulaire .wpforms-container .wpforms-form .wpforms-field input,
.formulaire .wpforms-container .wpforms-form .wpforms-field select,
.formulaire .wpforms-container .wpforms-form .wpforms-field textarea {
  display: block; width: 100% !important; max-width: none !important; height: auto !important;
  padding: 12px 14px !important;
  background-color: transparent !important; color: var(--blanc) !important;
  border: 1px solid var(--pointille) !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 16px/1.4 var(--texte) !important;
  -webkit-appearance: none; appearance: none;
}
.formulaire .wpforms-container .wpforms-form .wpforms-field select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23fff'/%3E%3C/svg%3E") right 16px center / 10px 6px no-repeat !important;
}
.formulaire .wpforms-field select option { color: var(--noir); }
.formulaire .wpforms-container .wpforms-form .wpforms-field textarea { height: 150px !important; min-height: 0 !important; resize: vertical; }
.formulaire .wpforms-field input::placeholder { color: rgba(255,255,255,.45) !important; }
.formulaire .wpforms-container .wpforms-form .wpforms-field input:focus,
.formulaire .wpforms-container .wpforms-form .wpforms-field select:focus,
.formulaire .wpforms-container .wpforms-form .wpforms-field textarea:focus { outline: none !important; border-color: var(--or) !important; }
.formulaire .wpforms-container .wpforms-form .wpforms-submit-container { margin: 0 !important; padding: 0 !important; }
.formulaire .wpforms-container .wpforms-form button.wpforms-submit {
  height: auto !important; min-height: 42px; padding: 6px 24px !important;
  background: transparent !important; color: var(--blanc) !important;
  border: 2px solid var(--blanc) !important; border-radius: 3px !important; box-shadow: none !important;
  font: 500 17px/1.5 var(--texte) !important; letter-spacing: .03em;
  cursor: pointer; transition: background .2s, color .2s;
}
.formulaire .wpforms-container .wpforms-form button.wpforms-submit:hover { background: var(--blanc) !important; color: var(--noir) !important; }
.formulaire .wpforms-error, .formulaire label.wpforms-error { color: var(--or) !important; font-size: 14px !important; margin-top: 6px !important; }
.formulaire .wpforms-confirmation-container-full {
  background: var(--anthracite) !important; color: var(--blanc) !important; border: 1px solid var(--or) !important;
}

/* ───────── FAQ ───────── */
.faq { padding: 64px 15px 96px; border-top: 1px dotted var(--pointille); }
body .faq .section-titre { margin-bottom: 36px; }
.faq-liste { max-width: 820px; margin: 0 auto; border-bottom: 1px dotted var(--pointille); }
.faq-item { border-top: 1px dotted var(--pointille); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  font-family: var(--titre); font-weight: 500; font-size: 20px;
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none;
  font-family: var(--titre); font-weight: 300; font-size: 32px; line-height: 1; color: var(--or);
  transition: transform .25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
body .faq-item p { padding: 0 48px 24px 0; font-weight: 300; font-size: 17px; line-height: 1.6; }

/* ───────── Liste d'articles (index) ───────── */
.liste-articles { max-width: var(--conteneur); margin: 0 auto; padding: 0 15px 80px; }
.liste-articles .wp-block-post { padding: 32px 0; border-top: 1px dotted var(--pointille); }

/* ───────── Pied de page ───────── */
.pied {
  padding: 30px 16px 60px;
  background: var(--anthracite);
  text-align: center;
}

/* ───────── Apparition au défilement (comme la référence) ───────── */
.js .effet, .js .intro > *, .js .encart, .js .fiche, .js .forfait {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.js .visible { opacity: 1 !important; transform: none !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ───────── Tablette ───────── */
@media (max-width: 1100px) {
  .barre { padding: 8px 32px; }
  nav.menu-principal .wp-block-navigation__container { gap: 4px; }
  nav.menu-principal .bouton-tel { margin-left: 8px; }
  .grille-forfaits { grid-template-columns: repeat(2, 1fr); }
  .fiche, .fiche.fiche-inverse { grid-template-columns: 1fr 1fr; gap: 48px; }
  .contact { grid-template-columns: 1fr 1fr; gap: 40px; }
  .encart { width: auto; }
}

/* Le menu passe en bouton à 860 px comme la maquette (core/navigation le fait à 600 px) */
@media (min-width: 600px) and (max-width: 860px) {
  nav.menu-principal .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  nav.menu-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ───────── Mobile ───────── */
@media (max-width: 860px) {
  :root { --barre-h: 64px; }
  .barre { padding: 8px 16px; }
  body .logo-mot { font-size: 36px; }
  body .logo-sous { font-size: 8px; margin-top: 3px; padding-top: 3px; }

  .hero { min-height: 0; }
  body .intro-titre, body .section-titre { font-size: 26px; }
  body .intro-texte, body .section-texte { font-size: 18px; }
  .page-interne .intro { padding-top: calc(var(--barre-h) + 36px); }

  .grille { grid-template-columns: 1fr; max-width: 420px; row-gap: 40px; }
  .effet { border-right: 1px dotted var(--pointille); }
  .carte { padding: 0 20px 34px; }
  .carte:hover { transform: none; }
  body .affiche { margin-bottom: 28px; }

  .fiche, .fiche.fiche-inverse { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px; }
  .fiche-inverse .fiche-photo { order: 0; }
  .fiche .fiche-photo { max-width: 420px; }
  .fiche-usages li { font-size: 20px; }

  .grille-forfaits { grid-template-columns: 1fr; max-width: 420px; }
  .galerie { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 48px; }

  .bandeau-contact { padding: 64px 16px; }
  .encart { width: 100%; max-width: 444px; }
  body .encart-titre { font-size: 20px; }

  .contact { grid-template-columns: 1fr; gap: 40px; padding: 8px 16px 64px; }
  .faq-item summary { font-size: 17px; }
}