/* La Dolce Vita Niort — feuille du site (maquette MCD Builder).
   Valeurs relevées sur le site actuel (1440, 1024, 390 px). Points de rupture : 1024 px (tablette) et 767 px (mobile).
   Règles tablette et mobile regroupées en fin de fichier, dans l'ordre des composants. */

/* ==================================================================== polices */
@font-face { font-family: "Futura LDV"; src: url("../../mcd-builder/assets/e32cd4426901bcda8ac9fbaa90df04e478c2955f.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../../mcd-builder/assets/7c050aa3d446eaeaff7ebda90b400aa3b06b2436.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../../mcd-builder/assets/24cb5b439de57a197a2cda802e76f3db236c3d70.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Trend Sans Four"; src: url("../../mcd-builder/assets/53b40652dd17e4940efb2efdd1dbfbd8eb594497.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* polices de secours aux mêmes dimensions (pas de décalage au chargement) : size-adjust = rapport de largeur mesuré
   dans Chrome sur une phrase type (Futura 900 / Arial gras, Roboto / Arial) ; ascent / descent = métriques hhea / size-adjust.
   La Futura du site n'a pas de lettres accentuées : la secours ne couvre que l'ASCII, les accents tombent sur
   sans-serif comme sur le site. */
@font-face { font-family: "Futura secours"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 900; unicode-range: U+0020-007E; size-adjust: 101.9%; ascent-override: 96.4%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: "Roboto secours"; src: local("Arial"), local("ArialMT"); size-adjust: 98.4%; ascent-override: 94.3%; descent-override: 24.8%; line-gap-override: 0%; }

/* ==================================================================== charte */
:root {
  --rouge: #9b1b2b;
  --rouge-survol: #cf2113;
  --creme: #f4e6d2;
  --noir: #000;
  --blanc: #fff;
  --gris: #333;

  --police-titre: "Futura LDV", "Futura secours", sans-serif;
  --police-texte: "Roboto", "Roboto secours", sans-serif;
  --police-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --police-article: "Trend Sans Four", var(--police-texte);

  --t-titre: 48px;      /* titres de section (Futura) */
  --t-kicker: 24px;     /* surtitres, titres de cartes */
  --t-texte: 16px;
  --t-citation: 48px;   /* avis clients */
  --t-menu: 32px;

  --marge: 6vw;         /* marge gauche / droite des sections */
  --esp-debut: 8vw;     /* espace avant une nouvelle partie (resserré : 15vw sur le site) */
  --esp-suite: 2vw;     /* espace entre un titre de partie et son contenu */
  --haut-entete: 80px;
}

/* ==================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police-systeme);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gris);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
a { color: var(--rouge); text-decoration: none; }
a:hover { color: var(--noir); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main { display: block; }
.wrap { padding-inline: var(--marge); }
.br-mobile { display: none; }

/* ==================================================================== typographie */
.titre {
  font-family: var(--police-titre);
  font-size: var(--t-titre);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--rouge);
}
.kicker {
  font-family: var(--police-texte);
  font-size: var(--t-kicker);
  font-weight: 400;
  line-height: 1;
  color: var(--noir);
}
.texte { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1.5; color: var(--gris); }
.texte p, .texte ul, .texte ol { margin-bottom: .9rem; }
.texte ul, .texte ol { padding-left: 2.5em; }
.texte .nu, .avis__citation .nu { margin-bottom: 0; }
.texte--arial { font-family: Arial, sans-serif; font-size: 16px; line-height: 24px; color: var(--noir); }
.texte--systeme { font-family: var(--police-systeme); font-size: 16px; line-height: 24px; }
.texte a { color: var(--rouge); }

/* ==================================================================== boutons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--blanc);
  background: var(--rouge);
  border: 0;
  transition: transform .3s ease;
}
/* survol du site : le bouton rétrécit à 90 % en 0,3 s, sans changer de couleur */
.btn:hover, .btn:focus-visible, .btn:active { transform: scale(.9); }
.btn--clair { color: var(--rouge); background: var(--blanc); }
.btn--contour { color: var(--rouge); background: var(--blanc); border: 2px solid var(--rouge); }
.btn--plein { width: 100%; }
/* « En savoir plus → » : lien souligné d'un filet rouge */
.lien-fleche {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 900;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--noir);
  border-bottom: 2px solid var(--rouge);
  transition: color .3s ease, border-color .3s ease;
}
.lien-fleche--clair { color: var(--blanc); }
/* survol du site : texte noir et filet crème, y compris sur les liens blancs */
.lien-fleche:hover, .lien-fleche:focus-visible { color: var(--noir); border-color: var(--creme); }

/* ==================================================================== en-tête du site */
.site-entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--haut-entete);
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  transition: background .5s ease-in-out;
}
.site-entete.est-defile { background: var(--blanc); }
.site-entete__gauche, .site-entete__droite { position: relative; z-index: 2; width: 30%; display: flex; align-items: center; }
.site-entete__droite { justify-content: flex-end; }
.site-entete__logo { position: relative; z-index: 2; flex: 1; display: flex; justify-content: center; }
.logo { width: 180px; max-width: 180px; height: auto; }
.logo--rouge { display: none; }
.est-defile .logo--blanc { display: none; }
.est-defile .logo--rouge { display: block; }
/* burger : deux traits qui se croisent à l'ouverture */
.burger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 46px;
}
.burger::before, .burger::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  background: var(--blanc);
  transition: transform .25s ease-out, background .25s;
}
.burger::before { transform: translateY(-3px); }
.burger::after { transform: translateY(3px); }
.burger[aria-expanded="true"]::before { transform: rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: rotate(-45deg); }
.est-defile .burger::before, .est-defile .burger::after { background: var(--rouge); }

/* menu plein écran (rideau qui descend : clip-path animé par le JS) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  min-height: 100vh;
  padding: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--rouge);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  visibility: hidden;
  overflow-y: auto;
}
.menu.est-ouvert { visibility: visible; }
.est-defile .menu { background: var(--blanc); }
.menu__nav { width: 45%; }
.menu__liste, .menu__sous { list-style: none; padding: 0; margin: 0; }
.menu__item { position: relative; overflow: hidden; }
.menu__lien {
  display: inline-block;
  padding: 24px 0;
  font-family: var(--police-titre);
  font-size: var(--t-menu);
  font-weight: 900;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--blanc);
}
.menu__lien:hover, .menu__lien[aria-current="page"] { color: var(--creme); }
.est-defile .menu__lien { color: var(--rouge); }
.est-defile .menu__lien:hover { color: var(--noir); }
.menu__deplier { width: 24px; height: 24px; margin-left: 6px; vertical-align: 2px; color: var(--blanc); }
.menu__deplier::before { content: ""; display: block; width: 10px; height: 10px; margin: 2px auto 0; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.menu__deplier[aria-expanded="true"]::before { transform: translateY(5px) rotate(-135deg); }
.est-defile .menu__deplier { color: var(--rouge); }
.menu__sous { display: none; padding-left: 24px; }
.menu__item--parent.est-deplie > .menu__sous { display: block; }
.menu__media { width: 45%; display: flex; justify-content: center; }
.menu__img { width: 70%; aspect-ratio: 4 / 5; object-fit: cover; }

/* barre du bas (tablette et mobile) */
.barre-mobile { display: none; }

/* ==================================================================== pied de page */
.site-pied { margin-top: 5vw; }
.site-pied__haut {
  display: flex;
  gap: 5vw;
  padding: 4vw 6vw;
  background: var(--rouge);
  color: var(--blanc);
}
.site-pied__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-pied__logo { display: block; }
.site-pied__logo img { width: 75%; }
.site-pied__texte { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1.5; color: var(--blanc); }
.site-pied__texte p { margin-bottom: .9rem; }
.site-pied__titre { font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1; color: var(--blanc); }
.site-pied__liens { list-style: none; padding: 0; margin: 0; }
.site-pied__liens li { margin: 0 0 6px; font-family: var(--police-texte); font-size: var(--t-texte); line-height: 20px; }
.site-pied__liens li:last-child { margin-bottom: 0; }
.site-pied__liens a { display: block; color: var(--blanc); }
.site-pied__liens a:hover, .site-pied__liens a[aria-current="page"] { color: var(--noir); }
.site-pied__bas {
  display: flex;
  justify-content: space-between;
  padding: 1vw 6vw;
  background: var(--creme);
}
.site-pied__credits { display: flex; gap: 10px; flex-direction: row-reverse; align-items: center; }
.site-pied__mention, .site-pied__credits a {
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--noir);
}

/* ==================================================================== hero (accueil) */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  background: var(--noir);
}
.hero__media, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1s ease; }
.hero__video--prete { opacity: 1; }
.hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .19); }
.hero__contenu { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hero__titre { font-family: var(--police-texte); font-size: var(--t-citation); line-height: 1; text-align: center; color: var(--blanc); }
.hero__sous-titre { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1; text-align: center; color: var(--blanc); }
.hero__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.hero__avis { min-height: 72px; color: var(--blanc); }

/* ==================================================================== en-tête de page */
.entete {
  position: relative;
  min-height: var(--hauteur, 70vh);
  padding: 6vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}
.entete__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.entete::after { content: ""; position: absolute; inset: 0; background: var(--noir); opacity: var(--voile, 0); }
.entete__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.entete--modele { padding: 0 4vw 164px; }
.entete--modele .entete__contenu { width: min(1200px, 100%); gap: 10px; }
.entete__titre { font-family: var(--police-titre); font-size: var(--t-titre); font-weight: 900; line-height: 1; text-transform: uppercase; text-align: center; color: var(--blanc); }
.entete__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.entete__info { font-family: var(--police-systeme); font-size: 16px; line-height: 24px; color: var(--blanc); text-align: center; }

/* ==================================================================== intro (surtitre + titre + texte, centrés) */
.intro { margin-top: var(--esp-debut); display: flex; flex-direction: column; align-items: center; }
.intro > * { width: 50%; text-align: center; }
.intro--etroite > * { width: 40%; }
.intro .titre { margin-top: 32px; }
.intro__texte { margin-top: 32px; }
.intro__action { margin-top: 32px; }

/* ==================================================================== titre de partie (surtitre + titre, bouton à droite) */
.titre-bloc { margin-top: var(--esp-debut); display: flex; align-items: center; gap: 24px; }
.titre-bloc__textes { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.titre-bloc__action { flex: 1 1 0; text-align: right; }

/* ==================================================================== mosaïque de photos (3 colonnes en parallaxe) */
.mosaique { margin-top: var(--esp-suite); display: flex; gap: 1vw; overflow: hidden; }
.mosaique__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 1vw; will-change: transform; }
.mosaique__img { width: 100%; object-fit: cover; }
.mosaique__img--34 { aspect-ratio: 3 / 4; }
.mosaique__img--43 { aspect-ratio: 4 / 3; }

/* ==================================================================== révélation des photos au défilement */
.revele { overflow: hidden; }
.evenement__img, .croise__img, .histoire__img, .faq__img { width: 100%; height: 100%; object-fit: cover; }
.revele--horizontal > * { transform-origin: left; }
.revele--vertical > * { transform-origin: top; }

/* ==================================================================== événements */
.evenements { margin-top: var(--esp-suite); display: flex; gap: 5vw; align-items: flex-start; }
.evenements__vignettes { position: sticky; top: 145px; flex: 1 1 0; min-width: 0; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4vw; z-index: 1; }
.vignette { display: flex; flex-direction: column; gap: 12px; }
.vignette__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vignette__titre { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1; color: var(--noir); }
.evenements__liste { width: 80%; flex: none; display: flex; flex-direction: column; gap: 6vw; }
.evenements__piste { display: flex; flex-direction: column; gap: 6vw; }
.evenement { display: flex; gap: 2%; }
.evenement__texte { width: 35%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.evenement__titre { font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1; color: var(--rouge); }
.evenement__media { width: 65%; aspect-ratio: 16 / 10; }
.evenement .texte p:last-child { margin-bottom: 0; }

/* ==================================================================== avis clients */
.avis { margin-top: var(--esp-debut); background: var(--creme); }
.avis__inner { padding-block: var(--pb, 5vw); display: flex; flex-direction: column; align-items: center; gap: 1vw; }
.avis__titre { color: var(--noir); }
.avis__carrousel { position: relative; width: 100%; overflow: hidden; }
.avis__liste { list-style: none; padding: 0; display: flex; transition: transform .5s ease; }
.avis__item { flex: 0 0 100%; }
.avis__citation p { font-family: var(--police-texte); font-size: var(--t-citation); line-height: 1.5; text-align: center; color: var(--gris); margin-bottom: .9rem; }
/* flèches du site : rond rouge de 48 px (32 px sur tablette et mobile), triangle blanc au trait */
.avis__fleche, .evenements__fleche {
  position: absolute;
  top: 50%;
  width: var(--fleche, 48px);
  height: var(--fleche, 48px);
  margin-top: calc(var(--fleche, 48px) / -2);
  border-radius: 50%;
  background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18.5 33.5264L18.5 14.4736L35.001 24L18.5 33.5264Z' fill='none' stroke='white'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.avis__fleche--prec, .evenements__fleche--prec { left: 0; transform: scaleX(-1); }
.evenements__fleche { display: none; }
.avis__fleche--suiv, .evenements__fleche--suiv { right: 0; }
.no-js .avis__liste { flex-direction: column; }
.no-js .avis__fleche { display: none; }

/* ==================================================================== photo + texte croisés */
.croise { margin-top: var(--esp-suite); display: flex; justify-content: space-between; gap: 5vw; }
.croise__col { display: flex; flex-direction: column; gap: 2vw; }
.croise__col--a { width: 45%; }
.croise__col--b { width: 50%; justify-content: space-between; align-items: flex-end; }
.croise__media--34 { width: 100%; aspect-ratio: 3 / 4; }
.croise__media--43 { width: 100%; aspect-ratio: 4 / 3; }
.croise__texte { width: 80%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.croise__col--b .croise__texte { align-self: flex-start; margin-left: 20%; }

/* ==================================================================== notre histoire (à propos) */
.histoire { margin-top: var(--esp-debut); display: flex; justify-content: space-between; gap: 5vw; }
.histoire__media { width: 45%; aspect-ratio: 3 / 4; }
.histoire__texte { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2vw; }
.histoire .titre { margin-top: calc(10px - 2vw); }

/* ==================================================================== occasions (3 cartes photo) */
.occasions { margin-top: var(--esp-suite); display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; }
.occasion {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 3 / 4;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--rouge);
}
.occasion__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.occasion::after { content: ""; position: absolute; inset: 0; background: var(--noir); opacity: .2; }
.occasion__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.occasion__surtitre { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1; color: var(--blanc); }
.occasion__titre { font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1; color: var(--blanc); }
.occasion__texte { color: var(--blanc); }

/* ==================================================================== bouton seul, centré */
.cta { margin-top: var(--esp-suite); display: flex; justify-content: center; }

/* ==================================================================== questions fréquentes */
.faq { margin-top: var(--esp-suite); display: flex; gap: 2vw; align-items: flex-start; }
.faq__media { flex: 1 1 0; aspect-ratio: 4 / 3; }
.faq__liste { position: sticky; top: 145px; flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.faq__question { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1.5; color: var(--noir); }
.faq__icone { position: relative; flex: none; width: 15px; height: 15px; }
.faq__icone::before, .faq__icone::after { content: ""; position: absolute; top: 7px; left: 1px; width: 13px; height: 2px; background: var(--noir); }
.faq__icone::after { transform: rotate(90deg); transition: transform .3s; }
.faq__item[open] .faq__icone::after { transform: rotate(0); }
.faq__reponse { padding-top: 16px; }
/* variante avec icônes + / − (page Menu) */
.faq--icones .faq__liste { gap: 0; }
.faq--icones .faq__question { padding: 10px; gap: 10px; }
.faq--icones .faq__icone { width: 13px; }
.faq--icones .faq__reponse { padding: 10px 10px 14px; }

/* ==================================================================== traiteur : photo carrée + texte sur fond rouge */
.split { margin-top: var(--esp-debut); display: flex; align-items: center; background: var(--rouge); }
.split__media { width: 50%; aspect-ratio: 1; object-fit: cover; object-position: top center; }
.split__texte { width: 50%; padding: 7vw 10vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2vw; }
.split .kicker, .split .titre, .split .texte { color: var(--blanc); }
.split--rapproche { margin-top: 7vw; }

/* ==================================================================== carte du menu (onglets) */
.carte { margin-top: var(--esp-debut); display: flex; flex-direction: column; align-items: center; }
.onglets { display: none; width: 100%; }
.js .onglets { display: flex; }
.onglets__bouton {
  flex: 1 1 auto;
  padding: 15px 35px;
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--rouge);
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.onglets__bouton:hover, .onglets__bouton:focus-visible { color: var(--blanc); background: var(--rouge); }
.onglets__bouton[aria-selected="true"] { color: var(--blanc); background: var(--rouge); border-width: 0; }
.carte__panneaux { width: 100%; padding-top: 24px; }
.carte__panneau { padding: 10px; }
.js .carte__panneau[hidden] { display: none; }
.js .carte__rubrique { display: none; }
.carte__rubrique { margin: 14px 0 24px; font-family: var(--police-titre); font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--rouge); }
.plats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.plat__ligne { display: flex; align-items: center; gap: 10px; font-family: var(--police-texte); font-size: var(--t-kicker); line-height: 1.5; color: var(--noir); }
.plat__pointilles { flex: 1 1 0; border-bottom: 2px dotted var(--noir); }
.plat__prix { color: var(--rouge); }
.plat__desc { margin-top: 10px; font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1.5; color: var(--noir); }
.carte__actions { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }

/* ==================================================================== contact */
.coordonnees { margin-top: 5vw; display: flex; gap: 5vw; }
.coordonnees__bloc { flex: 1 1 0; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border: 2px solid var(--rouge); border-radius: 5px; }
.coordonnees__titre { font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1; color: var(--noir); }
.coordonnees .texte ul:last-child { margin-bottom: 0; }
.contact { margin-top: 7vw; display: flex; }
.contact__carte { flex: 1 1 0; }
.contact__iframe { width: 100%; height: 100vh; border: 0; display: block; }
.contact__formulaire { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.contact__titre { color: var(--noir); text-align: center; }
.formulaire { width: 70%; padding: 30px; display: flex; flex-wrap: wrap; margin: 0 -6px; }
.champ { width: 100%; padding: 0 6px; margin-bottom: 12px; display: flex; flex-direction: column; }
.champ--moitie { width: 50%; }
.champ__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.champ__controle {
  width: 100%;
  min-height: 40px;
  padding: 5px 14px;
  font-family: var(--police-texte);
  font-size: 14px;
  color: var(--noir);
  background: var(--blanc);
  border: 0;
  border-bottom: 1px solid #69727d;
  border-radius: 0;
}
textarea.champ__controle { height: 89px; resize: vertical; }
.champ--consentement a { text-decoration: underline; }
.champ--consentement, .champ--consentement label { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-family: var(--police-texte); font-size: 13px; line-height: 1.4; color: var(--gris); }
.formulaire__envoi { width: 100%; text-align: center; }
.formulaire .btn--plein { width: 100%; min-height: 40px; padding: 0; color: var(--noir); background: transparent; transition: color .3s ease; }
.formulaire .btn--plein:hover, .formulaire .btn--plein:focus-visible, .formulaire .btn--plein:active { transform: none; }
.formulaire .btn--plein:hover { color: var(--rouge); }
/* états Contact Form 7 */
/* CF7 enveloppe le formulaire dans div.wpcf7 : il doit prendre toute la colonne pour que le formulaire (70 %) reste centré */
.contact__formulaire > .wpcf7 { width: 100%; display: flex; justify-content: center; }
.champ > label { display: block; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid { border-color: var(--rouge-survol); }
.wpcf7-not-valid-tip { display: block; margin-top: .25em; font-size: .85em; color: var(--rouge-survol); }
.wpcf7-response-output { width: 100%; margin: 1em 0 0; padding: .75em 1em; }
.wpcf7-form.sent .wpcf7-response-output { color: #1b5e20; background: #e8f5e9; }
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output { color: var(--rouge); background: var(--creme); }
.wpcf7-spinner { margin-left: .5em; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }

/* ==================================================================== documents (allergènes) */
.documents { margin-top: 5vw; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.documents__img { width: 100%; }

/* ==================================================================== pages légales */
.legal { margin-top: 5vw; }
/* paragraphes séparés sur le site par une ou deux lignes vides (<br><br>, <br><br><br>) */
.texte .ecart-1, .article-body .ecart-1 { margin-bottom: 24px; }
.texte .ecart-2, .article-body .ecart-2 { margin-bottom: 48px; }
.legal__texte h2 { margin: .5rem 0 1rem; font-size: 2rem; font-weight: 500; line-height: 1.2; color: var(--gris); }
.lien-cookies { color: var(--rouge); }

/* ==================================================================== articles : listes et modèle */
/* l'article à la une sur toute la largeur, puis les autres en grille de 3 cartes carrées (assez larges pour le texte) */
.articles { margin-top: var(--esp-debut); display: flex; flex-direction: column; gap: 24px; }
.articles__une { width: 100%; }
.articles__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; }
.articles__une .post { aspect-ratio: 16 / 7; }
.post--une .post__contenu { max-width: 760px; }
.post--une .post__titre { font-size: calc(var(--t-kicker) * 1.5); }
.post { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--noir); }
.post__lien { position: absolute; inset: 0; z-index: 2; }
.post__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s; }
.post:hover .post__media { transform: scale(1.05); }
.post__contenu { position: relative; z-index: 1; height: 100%; padding: 48px 48px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.post__titre { flex-shrink: 0; font-family: var(--police-texte); font-size: var(--t-kicker); font-weight: 400; line-height: 1.2; color: var(--blanc); }
.post__bas { display: flex; flex-direction: column; gap: 12px; }
.post__extrait { font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1.5; color: var(--blanc); }
.post__meta { font-family: var(--police-texte); font-size: 13px; line-height: 1.4; color: var(--blanc); }
.post__suite { position: relative; z-index: 3; align-self: flex-start; }
.articles__grille .post__contenu { padding: 32px; }
.articles__grille .post__titre, .article__liste .post__titre { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.articles__grille .post__extrait { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.article { margin-top: 101px; display: flex; gap: 24px; align-items: flex-start; }
.article-body { flex: none; width: 80%; min-width: 0; font-family: var(--police-texte); font-size: var(--t-texte); line-height: 1.5; color: var(--noir); }
/* écarts du site : 32 px entre les blocs, 12 px entre une photo, son titre et son texte */
.article-body > * { margin: 0; }
.article-body p, .article-body ul, .article-body ol { margin-bottom: .9rem; }
.article-body h2 { margin: calc(32px + .9rem) 0 32px; font-family: var(--police-article); font-size: 40px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 2px; color: var(--rouge); }
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 { margin: 0 0 12px; font-family: var(--police-texte); font-size: 32px; font-weight: 400; line-height: 1; color: var(--noir); }
.article-body h3 a { color: inherit; }
.article-body figure { margin: 32px 0 12px; }
.article-body p + figure, .article-body ul + figure { margin-top: calc(32px + .9rem); }
.article-body img { width: 100%; }
/* jamais agrandie au-delà de sa taille réelle (photos de presse de 724 à 1260 px) ; photo verticale recadrée à 640 px de haut */
.article-body figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; margin: 0 auto; object-fit: cover; }
.article-body figcaption { font-size: 16px; line-height: 22.4px; text-align: center; color: var(--gris); }
.article-body .avis-google { margin: 32px 0; }
/* articles SEO : encadré « En bref », tableaux, questions et boutons d'appel */
.article-body .en-bref { margin-bottom: 32px; padding: 24px 32px; background: var(--creme); border-left: 4px solid var(--rouge); }
.article-body p + h3, .article-body ul + h3, .article-body ol + h3, .article-body .tableau + h3 { margin-top: 32px; }
.article-body .tableau { margin: 0 0 .9rem; overflow-x: auto; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.article-body th, .article-body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--creme); }
.article-body th { font-weight: 700; color: var(--blanc); background: var(--rouge); }
.article-body ol { padding-left: 1.4em; }
.article__boutons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.article__aside { position: sticky; top: 120px; width: 20%; flex: none; display: flex; flex-direction: column; gap: 24px; }
.sommaire { font-family: var(--police-texte); font-size: 14px; line-height: 1.4; }
.sommaire:empty { display: none; }
.sommaire ul, .sommaire ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sommaire a { color: var(--rouge); }
.article__liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 31px; }
.article__liste .post__contenu { padding: 24px; }
.article__liste .post__titre { font-size: 20px; }
/* colonne d'environ 250 px : titre, date et lien seulement */
.article__liste .post__extrait { display: none; }
.avis-google { color: var(--noir); }

/* ==================================================================== tablette (≤ 1024 px) */
@media (max-width: 1024px) {
  :root { --t-titre: 40px; --t-kicker: 22px; --t-texte: 15px; --t-citation: 40px; --marge: 4vw; --esp-debut: 11vw; --esp-suite: 4vw; --fleche: 32px; }

  .site-entete__droite .btn { display: none; }
  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6vw;
    z-index: 0;
    padding-inline: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .barre-mobile .btn--clair { color: var(--rouge); background: var(--blanc); border: 2px solid var(--rouge); }

  .menu { padding: 96px; flex-direction: column; justify-content: flex-start; align-items: stretch; }
  .menu__nav, .menu__media { width: 100%; }

  .site-pied { margin-top: 8vw; }
  .site-pied__haut { flex-wrap: wrap; padding: 10vw 6vw; }
  .site-pied__col { flex: none; width: 47%; }
  .site-pied__col:last-child { flex: 1 1 100%; }
  .site-pied__logo img { width: 50%; }

  .hero { padding: 32px; justify-content: center; }
  .hero__contenu { gap: 24px; }
  .hero__boutons { display: none; }

  .entete { padding: 6vw; min-height: var(--hauteur-t, var(--hauteur, 70vh)); }
  .entete--modele { padding: 0 4vw 20vw; }
  .entete__media { object-position: var(--cadrage-t, var(--cadrage, center)); }

  .intro > *, .intro--etroite > * { width: 80%; }
  .intro .titre, .intro__texte, .intro__action { margin-top: 24px; }

  .mosaique { margin-top: 5vw; }

  .evenements { flex-direction: column; margin-top: 5vw; }
  .evenements__vignettes { display: none; }
  .evenements__liste { position: relative; width: 100%; overflow: hidden; }
  .evenements__piste { flex-direction: row; gap: 0; transition: transform .5s ease; }
  .evenement { flex: 0 0 100%; flex-direction: row; gap: 57.6px; padding-left: 57.6px; }
  .evenements__fleche { display: block; position: absolute; top: 16px; z-index: 2; }

  .avis__inner { padding-block: 10vw; }

  .croise { margin-top: 5vw; }
  .croise__texte { width: 100%; }
  .croise__col--b .croise__texte { margin-left: 0; }

  .histoire { flex-direction: column; }
  .histoire__media, .histoire__texte { width: 100%; }

  .occasions { flex-direction: column; flex-wrap: nowrap; margin-top: 32px; padding-inline: 24px; }
  .occasion { flex: none; width: 100%; padding: 32px; position: sticky; top: 145px; }

  .cta { margin-top: 32px; padding-inline: 24px; }

  .faq { flex-direction: column; margin-top: 5vw; }
  .faq__media, .faq__liste { width: 100%; flex: none; }
  .faq__liste { position: static; }

  .split { flex-direction: column; }
  .split__media, .split__texte { width: 100%; }
  .split__texte { padding: 10vw 4vw; }

  .coordonnees { margin-top: 10vw; }
  .contact { flex-direction: column; gap: 32px; margin-top: 10vw; }
  .contact__iframe { height: 400px; }
  .contact__formulaire { padding-inline: 4vw; }
  .formulaire { width: 100%; padding: 0; }
  .documents, .legal { margin-top: 10vw; }

  .articles__grille { grid-template-columns: 1fr 1fr; }
  .articles__une .post { aspect-ratio: 16 / 9; }
  .post__contenu, .articles__grille .post__contenu { padding: 32px; }
  .article { flex-direction: column; margin-top: 10vw; }
  .article-body { width: 100%; }
  .article-body h2 { font-size: 32px; }
  .article-body h3 { font-size: 24px; }
  .article__aside { display: none; }
}

/* ==================================================================== mobile (≤ 767 px) */
@media (max-width: 767px) {
  :root { --t-titre: 32px; --t-kicker: 20px; --t-texte: 14px; --t-citation: 32px; --t-menu: 24px; --esp-debut: 20vw; --esp-suite: 10vw; }
  .br-mobile { display: inline; }

  .site-entete__gauche, .site-entete__droite { width: 80px; }

  .menu { padding: 96px; }

  .site-pied { margin-top: 12vw; }
  .site-pied__haut { padding: 15vw 6vw; }
  .site-pied__col { width: 100%; }
  .site-pied__bas { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .site-pied__mention { width: 100%; text-align: center; }
  .site-pied__credits { flex-direction: row; justify-content: center; }

  .hero { padding: 24px; }

  .entete__contenu { gap: 12px; }
  .entete__media { object-position: var(--cadrage-m, var(--cadrage-t, var(--cadrage, center))); }
  .entete__boutons { gap: 12px; }

  .intro > *, .intro--etroite > * { width: 100%; }

  .mosaique { margin-top: 15vw; }
  .mosaique__col { flex: 0 0 49%; }
  .mosaique__col--sans-mobile { display: none; }

  .evenements { margin-top: 10vw; padding-inline: 0; }
  .evenement { flex-direction: column; gap: 16px; padding-inline: 0; }
  .evenement__texte { width: 100%; gap: 10px; padding-inline: 4vw; }
  .evenement__media { width: 100%; }
  .evenement .texte p:last-child { margin-bottom: .9rem; }
  .evenements__fleche { top: 50%; margin-top: -32px; }
  .evenements__fleche--prec { left: 16px; }
  .evenements__fleche--suiv { right: 16px; }

  .avis__inner { padding-block: 15vw; }

  .croise { flex-direction: column; gap: 10vw; margin-top: 10vw; }
  .croise__col--a, .croise__col--b { width: 100%; gap: 5vw; }

  .histoire { gap: 10vw; }
  .histoire__texte { gap: 5vw; }
  .histoire .titre { margin-top: calc(10px - 5vw); }

  .occasions { gap: 24px; margin-top: 24px; padding-inline: 16px; }
  .occasion { padding: 24px; top: 120px; }

  .cta { margin-top: 24px; padding-inline: 16px; }

  .faq { gap: 10vw; margin-top: 7vw; }

  .split { margin-top: var(--esp-debut); }
  .split__texte { padding: 20vw 4vw; gap: 5vw; }

  .champ--moitie { width: 100%; }

  .titre-bloc { flex-direction: column; align-items: stretch; text-align: center; }
  .titre-bloc__action { text-align: center; }

  /* carte : les onglets deviennent un accordéon (titre puis son panneau) */
  .js .carte .onglets, .carte__panneaux { display: contents; }
  .js .carte { display: flex; flex-direction: column; align-items: stretch; }
  .onglets__bouton:nth-child(1) { order: 1; } .carte__panneau:nth-child(1) { order: 2; }
  .onglets__bouton:nth-child(2) { order: 3; } .carte__panneau:nth-child(2) { order: 4; }
  .onglets__bouton:nth-child(3) { order: 5; } .carte__panneau:nth-child(3) { order: 6; }
  .onglets__bouton:nth-child(4) { order: 7; } .carte__panneau:nth-child(4) { order: 8; }
  .onglets__bouton:nth-child(5) { order: 9; } .carte__panneau:nth-child(5) { order: 10; }
  .onglets__bouton:nth-child(6) { order: 11; } .carte__panneau:nth-child(6) { order: 12; }
  .carte__panneau { margin: 10px 0; }
  .carte__actions { order: 99; }

  .coordonnees { flex-direction: column; margin-top: 15vw; }
  .contact { margin-top: 15vw; gap: 24px; }
  .documents, .legal { margin-top: 15vw; }
  .article { margin-top: 15vw; }
  .article-body h2 { font-size: 24px; }
  .article-body h3 { font-size: 18px; }
  .article__aside { display: flex; position: static; width: 100%; }
  .carte__actions, .entete__boutons { gap: 12px; }

  .articles__grille { grid-template-columns: 1fr; }
  .articles__une .post { aspect-ratio: 1; }
  .post--une .post__titre { font-size: var(--t-kicker); }
}

/* marge propre à une section (relevée sur le site quand elle s'écarte de celle du composant) */
.marge { margin-top: var(--mt); }
@media (max-width: 1024px) { .marge { margin-top: var(--mt-t); } }
@media (max-width: 767px) { .marge { margin-top: var(--mt-m); } }

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