/* ==========================================================================
   La Médocaine — pages CMS

   Chargée pour `page_name === 'cms'` depuis `_partials/stylesheets.tpl`.

   Le socle (`custom.css`, section « Pages éditoriales et de service ») donne
   déjà à ces pages leur typographie, leur rythme vertical et leur mesure de
   lecture de 47,5 rem. Ce fichier ne le répète pas : il ne contient que les
   deux mises en page qui n'existent pas dans le socle, la foire aux questions
   et la page « À propos ».

   Le contenu de ces pages est saisi en back-office, où PrestaShop le fait
   passer par HTMLPurifier : celui-ci supprime les balises HTML5 (section,
   article, nav) et les attributs qu'il ne connaît pas (srcset, loading,
   aria-*). D'où une structure en div, et le responsive porté par le CSS.

   Mobile first, tokens du socle, aucune taille fixe.
   ========================================================================== */

/* ==========================================================================
   Foire aux questions
   ========================================================================== */

.md-faq__intro {
  font-size: var(--md-fs-md);
  color: var(--md-text-muted);
  margin-bottom: 2rem;
}

/* Sommaire : le raccourci vers la bonne rubrique, et un bloc de liens
   internes que les moteurs suivent volontiers. */
.md-faq__toc {
  background-color: var(--md-white);
  border: 1px solid var(--md-border);
  border-left: 3px solid var(--md-accent);
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
}

.md-faq__toc-title {
  font-size: var(--md-fs-2xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  color: var(--md-text-muted);
  margin-bottom: .75rem;
}

.md-faq__toc ul {
  display: grid;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lien en bloc avec de l'air : 22 px de haut ne se visent pas au doigt. */
.md-faq__toc a {
  display: block;
  padding-block: .5rem;
  font-family: var(--md-font-display);
  font-size: var(--md-fs-lg);
  line-height: 1.2;
  text-decoration: none;
}

.md-faq__toc a:hover { text-decoration: underline; }

/* Ancres : le JavaScript de Hummingbird pose déjà `scroll-padding-top` à la
   hauteur de l'en-tête collant. Une seconde réserve ici laissait le titre visé
   156 px trop bas, la fin de la rubrique précédente encore à l'écran. */
.md-faq__cat { padding-top: .5rem; }

.md-faq__cat > h2 {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--md-border);
}

.md-faq__item + .md-faq__item { margin-top: 1.5rem; }

.md-faq__item > h3 { margin-top: 0; }

.md-faq__footnote {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-border);
  font-size: var(--md-fs-xs);
  color: var(--md-text-muted);
}

@media (min-width: 768px) {
  .md-faq__toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Page « À propos » (CMS 4)

   Gabarit éditorial pleine largeur, repris de la maquette Figma
   `Z8HsUiKkxJVhDinit0GYDX` (node 2:879), dans la palette du site : le bleu
   d'encre remplace le marron des aplats et le doré des accents. Les italiques
   se distinguent par le dessin de la Cormorant, plus par la couleur.
   ========================================================================== */

/* Le titre générique « À propos » du gabarit laisse la place au vrai titre,
   porté par le contenu : une seule `h1` sur la page, et plus parlante. */
.cms-id-4 .page-header { display: none; }

/* Le socle borne les enfants du contenu à la mesure de lecture. Cette page
   est un gabarit large : on lève la contrainte, chaque bloc pose la sienne. */
#cms .page-content > .md-about { max-width: none; }

.md-about > * + * { margin-top: var(--md-section-y); }

/* Zones sombres : image de la cave et bande de valeurs.
   Le socle colore les titres et les paragraphes des pages CMS avec une
   spécificité d'identifiant (`#cms .page-content …`). Plutôt que de la rejouer
   sur chaque élément, on redéfinit ici les tokens dont il se sert : ses règles
   continuent de s'appliquer, avec les bonnes valeurs.
   La redéfinition porte sur les ENFANTS, car le fond des blocs utilise lui
   aussi `--md-navy` : la poser sur le parent le repeindrait en crème. */
.md-about__figure-bar > *,
.md-about__values > * {
  --md-navy: var(--md-cream);
  --md-navy-soft: var(--md-cream);
  --md-text: var(--md-cream);
  --md-text-muted: var(--md-on-dark);
}

/* ⚠️ Les titres de cette page sont scopés comme le socle (`#cms .page-content
   :is(h2, h3)`, `#cms h1`) : à spécificité moindre, taille et marges du socle
   l'emportaient (grand titre à 28 px, 36 px de marge au-dessus des h3). */
#cms .page-content .md-about h2 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--md-navy);
  margin-block: 0 1.5rem;
  max-width: 20ch;
}

/* Titres de bloc : nettement plus grands que le texte qui suit, et à pleine
   couleur, quand le texte courant reste en gris chaud. C'est cet écart qui
   fait lire la page en diagonale. */
#cms .page-content .md-about h3 {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem);
  line-height: 1.2;
  color: var(--md-text);
  margin-block: 0 .625rem;
}

.md-about p { margin-bottom: 0; }

/* Scopé au même niveau que le socle, qui colore les paragraphes des pages CMS
   depuis `#cms .page-content` : sans cela, la couleur ne passerait pas. */
#cms .page-content .md-about__value p:last-child,
#cms .page-content .md-about__step p:last-child,
#cms .page-content .md-about__person p:last-child,
#cms .page-content .md-about__milestone p:last-child {
  font-size: var(--md-fs-sm);
  color: var(--md-text-muted);
}

/* Surtitre de section : capitales espacées, comme partout sur le site. */
.md-about__eyebrow {
  font-size: var(--md-fs-2xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin-bottom: .75rem;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

#cms .md-about__title {
  font-family: var(--md-font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1rem + 5.5vw, 4.5rem);
  line-height: 1.05;
  color: var(--md-navy);
  margin-block: 0 1.5rem;
}

.md-about__title em { font-style: italic; }

.md-about__lead {
  max-width: 45ch;
  font-size: var(--md-fs-md);
  line-height: 1.7;
}

/* ── Photo de la cave, pleine largeur ────────────────────────────────────── */

/* Même sortie de conteneur que la bande de marque de la fiche produit. */
.md-about__figure {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  color: var(--md-cream);
}

/* Bandeau plutôt que grande image : la photo situe la maison, elle n'a pas à
   occuper un écran entier. Le recadrage garde le centre, donc la devanture. */
.md-about__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* Sous l'image en mobile, posée dessus dès que la place le permet. */
.md-about__figure-bar {
  background-color: var(--md-navy);
  padding: 1.5rem var(--md-gutter);
  display: grid;
  gap: 1.25rem;
}

.md-about__quote {
  font-family: var(--md-font-display);
  font-style: italic;
  font-size: clamp(1.125rem, .9rem + 1vw, 1.75rem);
}

.md-about__figure-meta {
  display: grid;
  gap: 1rem;
  font-size: var(--md-fs-sm);
}


.md-about__figure-meta a {
  color: inherit;
  text-decoration: none;
}

.md-about__figure-meta a:hover { text-decoration: underline; }

/* ── Histoire ────────────────────────────────────────────────────────────── */

.md-about__milestone {
  display: grid;
  gap: .25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--md-border);
}

.md-about__milestone:last-child { border-bottom: 1px solid var(--md-border); }

.md-about__year {
  font-family: var(--md-font-display);
  font-size: var(--md-fs-2xl);
}

.md-about__milestone p:last-child {
  color: var(--md-text-muted);
  line-height: 1.6;
}

/* ── Valeurs : bande d'encre pleine largeur ──────────────────────────────── */

.md-about__values {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--md-section-y);
  /* Marge intérieure = écart entre le bord de l'écran et le contenu de la
     page : les titres de la bande s'alignent sur ceux des sections voisines,
     quelle que soit la largeur du conteneur. */
  padding-inline: calc(50vw - 50%);
  background-color: var(--md-navy);
  color: var(--md-cream);
}

#cms .page-content .md-about__values-title { max-width: 24ch; }

.md-about__values-title em { font-style: italic; }

.md-about__grid {
  display: grid;
  gap: 2rem;
}

.md-about__value p { line-height: 1.6; }

/* Chiffre romain : le repère visuel de la maquette, en crème atténué. */
.md-about__numeral {
  font-family: var(--md-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  opacity: .45;
  margin-bottom: 1rem;
}

/* ── Méthode ─────────────────────────────────────────────────────────────── */

.md-about__steps {
  display: grid;
  gap: 1.5rem;
}

.md-about__step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--md-border);
}

/* Numéro d'étape : assez présent pour donner le sens de lecture, assez
   discret pour ne pas voler la vedette au libellé. */
.md-about__step-num {
  font-family: var(--md-font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  opacity: .55;
  margin-bottom: .5rem;
}

.md-about__step p:last-child {
  color: var(--md-text-muted);
  line-height: 1.6;
}

/* ── Équipe ──────────────────────────────────────────────────────────────── */

.md-about__people {
  display: grid;
  gap: 2.5rem;
}

/* Emplacement de portrait : aplat sable tant que la photo n'est pas fournie.
   Quand elle le sera, une balise img viendra le remplacer. */
.md-about__portrait {
  aspect-ratio: 1;                       /* 4 / 5 à partir de la tablette */
  background-color: var(--md-sand);
  margin-bottom: 1.25rem;
}

#cms .page-content .md-about__person h3 { margin-bottom: .25rem; }

.md-about__person .md-about__eyebrow { margin-bottom: .5rem; }

.md-about__person p:last-child {
  color: var(--md-text-muted);
  line-height: 1.6;
}

/* ── Appel à l'action ────────────────────────────────────────────────────── */

.md-about__cta {
  text-align: center;
  padding-top: var(--md-section-y);
  border-top: 1px solid var(--md-border);
}

#cms .page-content .md-about__cta h2 {
  max-width: none;
  margin-inline: auto;
}


.md-about__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.md-about__btn {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: var(--md-navy);
  color: var(--md-cream);
  font-size: var(--md-fs-2xs);
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--md-navy);
  transition: background-color .2s ease, color .2s ease;
}

.md-about__btn:hover,
.md-about__btn:focus-visible {
  background-color: transparent;
  color: var(--md-navy);
}

.md-about__btn--ghost {
  background-color: transparent;
  color: var(--md-navy);
}

.md-about__btn--ghost:hover,
.md-about__btn--ghost:focus-visible {
  background-color: var(--md-navy);
  color: var(--md-cream);
}

/* Couleurs des paragraphes typés. Regroupées ici et scopées comme le socle,
   qui colore tout `p` d'une page CMS depuis `#cms .page-content`. Dans les
   zones sombres, les tokens redéfinis plus haut font le reste. */
#cms .page-content :is(.md-about__eyebrow, .md-about__lead, .md-about__cta > p) {
  color: var(--md-text-muted);
}

#cms .page-content :is(.md-about__quote, .md-about__numeral) {
  color: var(--md-cream);
}

#cms .page-content :is(.md-about__year, .md-about__step-num) {
  color: var(--md-text);
}

/* Hauteurs de ligne : le socle impose 1,7 à tout paragraphe d'une page CMS.
   Les chiffres faisaient 48 px de haut pour une police de 28 px, soit 70 px de
   vide entre chaque chiffre et son titre. */
#cms .page-content :is(.md-about__numeral, .md-about__step-num, .md-about__year) { line-height: 1; }

#cms .page-content .md-about__quote { line-height: 1.25; }

#cms .page-content .md-about__figure-meta p { line-height: 1.4; }

/* ── Tablette ────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .md-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Trois portraits : sur deux colonnes, le troisième restait seul. */
  .md-about__people { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .md-about__portrait { aspect-ratio: 4 / 5; }

  .md-about__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .md-about__figure-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .md-about__milestone {
    grid-template-columns: 8rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
  /* En grand écran, la photo devient franchement panoramique : 1440 × 617. */
  /* Photo et bandeau empilés dans la même cellule de grille, au lieu d'un
     bandeau en position absolue : quand le texte prend de la place, c'est la
     figure qui grandit. Entre 992 et 1150 px, le bandeau absolu remontait de
     214 px au-dessus de la photo et la citation tombait à un mot par ligne. */
  .md-about__figure { display: grid; }

  .md-about__img,
  .md-about__figure-bar { grid-area: 1 / 1; }

  .md-about__img {
    aspect-ratio: 21 / 9;
    align-self: stretch;
    height: 100%;
  }

  .md-about__figure-bar {
    align-self: end;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 1.5rem 3rem;
    padding: 7rem clamp(2rem, 4vw, 3.5rem) 2.5rem;
    /* Le texte est blanc sur une photo : le voile doit être franc sous le
       texte et s'éteindre progressivement, quelle que soit l'image. */
    background: linear-gradient(
      to top,
      rgba(33, 28, 53, .94) 0%,
      rgba(33, 28, 53, .88) 40%,
      rgba(33, 28, 53, .55) 70%,
      rgba(33, 28, 53, 0) 100%
    );
  }

  .md-about__figure-meta { gap: 2.5rem; }

  /* Titre à gauche, frise à droite, comme sur la maquette. */
  .md-about__story {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
  }

  .md-about__values { padding-inline: clamp(2rem, 4vw, 3.5rem); }

  .md-about__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Filets de séparation entre colonnes, comme dans la maquette. */
  .md-about__grid,
  .md-about__steps { gap: 0; }

  .md-about__value,
  .md-about__step {
    padding-inline: clamp(1.25rem, 2vw, 2rem);
    border-left: 1px solid var(--md-line);
    border-top: 0;
    padding-top: 0;
  }

  .md-about__value {
    border-left-color: rgba(246, 241, 234, .22);
  }

  .md-about__value:first-child,
  .md-about__step:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .md-about__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-top: 1.5rem;
    border-top: 1px solid var(--md-border);
  }

}

/* Cinq étapes sur deux colonnes : la dernière occupe toute la ligne plutôt que
   de rester seule dans sa moitié. Au-delà de 992 px, elles sont sur une ligne. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .md-about__step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* À partir de 1200 px, la citation et les infos pratiques côte à côte. */
@media (min-width: 1200px) {
  .md-about__figure-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

  .md-about__figure-meta { text-align: right; }
}