/* ==========================================================================
   MAISON DM — FEUILLE DE STYLE
   --------------------------------------------------------------------------
   Ce fichier décrit l'apparence de tous les éléments du site.
   Les couleurs et polices viennent de variables.css (var(--nom)).

   Sommaire :
     1. Base
     2. Outils de mise en page
     3. Titres, textes et liens
     4. Boutons
     5. En-tête et menu
     6. Sections sombres et claires
     7. Accueil : bandeau d'ouverture
     8. Accueil : la maison
     9. Accueil : les deux univers
    10. Galerie et cadres photo
    11. Appel au devis
    12. Pages intérieures
    13. Pied de page
    14. Contenus à compléter et messages d'aide
    15. Animations
    16. Pages DM Cook et DM Events
    17. Page Contact et formulaire de devis
    18. Page Maison DM
    19. Page Galerie et visionneuse
    20. Pages légales
    21. Numéro de téléphone et sa mention
    22. Formulaire : cases à cocher (formules, pièces, personnel)
   ========================================================================== */


/* --- 1. Base -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Un élément marqué "hidden" reste toujours caché */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le menu mobile ouvert empêche la page de défiler derrière lui */
.menu-ouvert {
  overflow: hidden;
}


/* --- 2. Outils de mise en page ------------------------------------------- */

/* Centre le contenu et limite sa largeur */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur-max) + 2 * var(--marge-laterale));
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* Lien invisible, révélé au clavier : permet de sauter le menu */
.lien-evitement {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--or);
  color: var(--noir);
  font-weight: 500;
  text-decoration: none;
}

.lien-evitement:focus {
  top: 1rem;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'œil */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --- 3. Titres, textes et liens ------------------------------------------ */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--police-titres);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); line-height: 1.2; }

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

/* Lien souligné d'un trait fin, utilisé dans les textes */
.lien {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color var(--transition), text-underline-offset var(--transition);
}

.lien:hover {
  color: var(--or-lumiere);
  text-underline-offset: 0.5em;
}

/* Contour visible quand on navigue au clavier (accessibilité) */
:focus-visible {
  outline: 2px solid var(--or-lumiere);
  outline-offset: 4px;
}


/* --- 4. Boutons ----------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Bouton plein doré : l'action principale */
.bouton--plein {
  background: var(--accent);
  color: var(--noir);
}

.bouton--plein:hover {
  background: var(--or-lumiere);
  border-color: var(--or-lumiere);
}

/* Bouton à contour : l'action secondaire */
.bouton--contour {
  background: transparent;
  color: var(--accent);
}

.bouton--contour:hover {
  background: rgba(207, 167, 113, 0.12);
  color: var(--or-lumiere);
}

.bouton--petit {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Petites icônes dans les boutons (flèche, téléchargement) */
.icone {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icône placée avant le texte (téléchargement) ou après (flèche) */
.prestation__telecharger .icone { margin-right: 0.6em; }

/* La flèche descend légèrement au survol */
.bouton--fleche .icone {
  margin-left: 0.6em;
  transition: transform var(--transition);
}

.bouton--fleche:hover .icone {
  transform: translateY(3px);
}


/* --- 5. En-tête et menu -------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noir);
  border-bottom: var(--trait-or);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--hauteur-entete);
}

/* Monogramme + nom "Maison DM" */
.marque {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--ivoire);
  text-decoration: none;
}

.marque img {
  width: 2.6rem;
  height: auto;
}

.marque__nom {
  font-family: var(--police-titres);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Très petits écrans : nom un peu plus compact */
@media (max-width: 24rem) {
  .marque img   { width: 2.2rem; }
  .marque__nom  { font-size: 1.1rem; letter-spacing: 0.16em; }
}

/* Bouton "Menu" : visible seulement sur mobile et tablette */
.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--ivoire);
  font: 500 var(--taille-petit) var(--police-texte);
  cursor: pointer;
}

/* Les deux traits de l'icône, qui se croisent quand le menu est ouvert */
.menu-bouton__icone {
  position: relative;
  width: 1.6rem;
  height: 0.6rem;
}

.menu-bouton__icone::before,
.menu-bouton__icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--or);
  transition: transform var(--transition), top var(--transition);
}

.menu-bouton__icone::before { top: 0; }
.menu-bouton__icone::after  { top: 100%; }

.menu-bouton[aria-expanded="true"] .menu-bouton__icone::before {
  top: 50%;
  transform: rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-bouton__icone::after {
  top: 50%;
  transform: rotate(-45deg);
}

/* Menu sur mobile : panneau plein écran sous l'en-tête */
.nav {
  position: fixed;
  inset: var(--hauteur-entete) 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem var(--marge-laterale) 2.5rem;
  background: var(--noir);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.nav.est-ouvert {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease;
}

.nav__liste {
  display: flex;
  flex-direction: column;
}

.nav__liste a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: var(--trait-or);
  color: var(--ivoire);
  font-family: var(--police-titres);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.nav__liste a[aria-current="page"] {
  color: var(--or);
}

/* Menu sur grand écran (à partir de 64rem, soit 1024 pixels) */
@media (min-width: 64rem) {
  .menu-bouton {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .nav__liste {
    flex-direction: row;
    gap: 2rem;
  }

  .nav__liste a {
    position: relative;
    padding: 0.4rem 0;
    border: 0;
    font-family: var(--police-texte);
    font-size: var(--taille-petit);
    color: var(--grege);
    transition: color var(--transition);
  }

  .nav__liste a:hover,
  .nav__liste a[aria-current="page"] {
    color: var(--ivoire);
  }

  /* Trait doré sous la page en cours */
  .nav__liste a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--or);
  }
}


/* --- 6. Sections sombres et claires ------------------------------------- */

.section {
  padding-block: var(--espace-section);
}

.section--sombre {
  background: var(--noir);
  color: var(--ivoire);
}

.section--claire {
  background: var(--ivoire);
  color: var(--anthracite);
}

/* Sur fond clair, l'or devient bronze pour rester lisible */
.section--claire .lien {
  color: var(--bronze);
}

.section--claire .lien:hover {
  color: var(--anthracite);
}

.section--claire .bouton--plein {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--ivoire);
}

.section--claire .bouton--plein:hover {
  background: var(--anthracite);
}

.section--claire .bouton--contour {
  border-color: var(--bronze);
  color: var(--bronze);
}

.section--claire :focus-visible {
  outline-color: var(--bronze);
}

/* Titre de section accompagné d'un lien aligné à droite */
.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}


/* --- 7. Accueil : bandeau d'ouverture ----------------------------------- */

.ouverture {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(54rem, calc(100svh - var(--hauteur-entete)));
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  text-align: center;
}

/* Le grand cercle doré, comme une assiette vue du dessus */
.ouverture__cercle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(118vmin, 64rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}

.ouverture__cercle circle {
  fill: none;
  stroke: var(--or);
  stroke-width: 1;
  stroke-opacity: 0.32;
  vector-effect: non-scaling-stroke;
}

.ouverture__contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ouverture__monogramme {
  width: clamp(8.5rem, 20vw, 12.5rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.ouverture__titre {
  max-width: 16ch;
  color: var(--or);
  font-weight: 400;
  line-height: 1.04;
}

.ouverture__texte {
  margin: 1.5rem auto 2.25rem;
  color: var(--grege);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
}

.ouverture .groupe-boutons {
  justify-content: center;
}

/* Sur téléphone, le bandeau prend la hauteur de son contenu */
@media (max-width: 47.99rem) {
  .ouverture {
    min-height: auto;
    padding-block: 4.5rem 5rem;
  }
}


/* --- 8. Accueil : la maison --------------------------------------------- */

.deux-colonnes {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 56rem) {
  .deux-colonnes {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: start;
  }
}

.texte-courant {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}


/* --- 9. Accueil : les deux univers -------------------------------------- */

.titre-centre {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.univers {
  display: grid;
  gap: 3.5rem;
}

/* Deux colonnes séparées par un trait doré vertical, comme un chemin de table */
@media (min-width: 56rem) {
  .univers {
    grid-template-columns: 1fr 1px 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.univers__separateur {
  display: none;
  background: linear-gradient(to bottom, transparent, var(--or) 18%, var(--or) 82%, transparent);
  opacity: 0.5;
}

@media (min-width: 56rem) {
  .univers__separateur {
    display: block;
  }
}

.univers__bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Chaque univers prend l'or de son logo */
.univers__bloc--cook   { --accent: var(--or-cook); }
.univers__bloc--events { --accent: var(--or-events); }

/* Zone du logo : même hauteur pour les deux, logos alignés en bas */
.univers__logo {
  display: flex;
  align-items: flex-end;
  height: 10.5rem;
  margin-bottom: 2rem;
}

.univers__bloc--cook .univers__logo img   { width: auto; height: 7rem; }
.univers__bloc--events .univers__logo img { width: auto; height: 10.5rem; }

.univers__bloc h3 {
  margin-bottom: 1rem;
  color: var(--accent);
}

.univers__bloc p {
  color: var(--grege);
}

/* Liste avec de petits cercles dorés */
.liste-cercles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin: 0.5rem 0 2rem;
}

.liste-cercles li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.liste-cercles li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.univers__bloc .bouton {
  margin-top: auto;
}


/* --- 10. Galerie et cadres photo ---------------------------------------- */

.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* Sur téléphone, l'aperçu de l'accueil défile horizontalement */
@media (max-width: 40rem) {
  .galerie-grille--defilante {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 0.75rem;
  }

  .galerie-grille--defilante > * {
    scroll-snap-align: start;
  }
}

.galerie-grille figure {
  margin: 0;
}

/* Cadre en forme de dôme, comme la cloche du logo DM Cook */
.dome {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 2px 2px;
}

.dome img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-grille figcaption {
  margin-top: 0.75rem;
  font-size: var(--taille-petit);
  color: inherit;
  opacity: 0.8;
}

/* Cadre vide, en attendant les photos */
.dome--vide {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: var(--ivoire-fonce);
  border: var(--trait-bronze);
  color: var(--bronze);
  font-size: var(--taille-petit);
}

.dome--vide img {
  width: 3.5rem;
  height: auto;
  opacity: 0.55;
}

.section--sombre .dome--vide {
  background: var(--noir-doux);
  border: var(--trait-or);
  color: var(--grege);
}


/* --- 11. Appel au devis -------------------------------------------------- */

.appel {
  text-align: center;
  border-top: var(--trait-or);
}

.appel__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.appel h2 {
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.appel p {
  margin-inline: auto;
  color: var(--grege);
}

.appel .bouton {
  margin-top: 1rem;
}

.appel__direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  font-size: var(--taille-petit);
}

.appel__direct a {
  color: var(--ivoire);
}


/* --- 12. Pages intérieures ----------------------------------------------- */

.bandeau-page {
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
  border-bottom: var(--trait-or);
}

.bandeau-page h1 {
  color: var(--accent);
  font-weight: 400;
}

.bandeau-page p {
  margin-top: 1.25rem;
  color: var(--grege);
  font-size: 1.1875rem;
}

.chantier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}


/* --- 13. Pied de page ---------------------------------------------------- */

.pied {
  background: var(--noir-doux);
  color: var(--grege);
  font-size: var(--taille-petit);
  border-top: var(--trait-or);
}

.pied__grille {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 7vw, 5rem);
}

@media (min-width: 48rem) {
  .pied__grille {
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
    gap: 2rem;
  }
}

.pied__marque img {
  width: 3.5rem;
  margin-bottom: 1.25rem;
}

.pied__nom {
  margin-bottom: 0.35rem;
  color: var(--ivoire);
  font-family: var(--police-titres);
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pied__signature {
  font-family: var(--police-titres);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--or);
}

.pied__titre {
  margin-bottom: 1rem;
  color: var(--ivoire);
  font-family: var(--police-texte);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.pied li + li {
  margin-top: 0.5rem;
}

.pied a {
  color: var(--grege);
  text-decoration: none;
  transition: color var(--transition);
}

.pied a:hover {
  color: var(--or);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(185, 178, 166, 0.15);
  font-size: 0.875rem;
}

.pied__bas p {
  margin: 0;
}

.pied__bas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.pied__bas li + li {
  margin-top: 0;
}


/* --- 14. Contenus à compléter et messages d'aide ------------------------ */

/* Repère les informations encore manquantes : à remplir dans /contenus */
.a-completer {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font-size: 0.85em;
  opacity: 0.85;
}

/* Bandeau d'aide affiché uniquement sur votre ordinateur */
.aide-locale {
  position: relative;
  z-index: 60;
  padding: 0.85rem var(--marge-laterale);
  background: var(--or-lumiere);
  color: var(--noir);
  font-size: var(--taille-petit);
  text-align: center;
}


/* --- 15. Animations ------------------------------------------------------
   Un seul moment animé, à l'ouverture de l'accueil : le cercle se dessine,
   puis le monogramme et la signature apparaissent. */

@keyframes dessiner-cercle {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

.ouverture__cercle circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: dessiner-cercle 2.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.ouverture__monogramme {
  animation: apparaitre 1.2s ease-out 0.3s both;
}

.ouverture__titre,
.ouverture__texte,
.ouverture .groupe-boutons {
  animation: apparaitre 1s ease-out both;
}

.ouverture__titre      { animation-delay: 0.9s; }
.ouverture__texte      { animation-delay: 1.15s; }
.ouverture .groupe-boutons { animation-delay: 1.35s; }

/* Si la personne a demandé moins d'animations dans ses réglages, on les retire */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}


/* --- 16. Pages DM Cook et DM Events ------------------------------------- */

/* Bandeau d'ouverture : logo à gauche, présentation à droite */
.bandeau-univers {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: var(--trait-or);
}

.bandeau-univers__grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .bandeau-univers__grille {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.bandeau-univers__logo img {
  width: min(100%, 25rem);
}

.univers-events .bandeau-univers__logo img {
  width: min(85%, 21rem);
}

.bandeau-univers h1 {
  margin-bottom: 1.5rem;
  color: var(--accent);
  font-weight: 400;
}

.bandeau-univers p {
  color: var(--grege);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
}

.bandeau-univers .groupe-boutons {
  margin-top: 2.25rem;
}

/* Trois engagements, séparés par un trait bronze */
.trois-points {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48rem) {
  .trois-points {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.trois-points > div {
  padding-top: 1.5rem;
  border-top: var(--trait-bronze);
}

.trois-points h3 {
  margin-bottom: 0.75rem;
}

/* Petite phrase à droite du titre "Nos prestations" */
.entete-section__note {
  margin: 0;
  color: var(--grege);
}

/* Liste des prestations (remplie à partir des fichiers JSON) */
.prestations {
  display: grid;
  gap: 3.5rem clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 48rem) {
  .prestations {
    grid-template-columns: repeat(2, 1fr);
  }
}

.prestation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2rem;
  border-top: var(--trait-or);
}

.prestation__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
}

.prestation__titre {
  margin-bottom: 0.5rem;
  color: var(--accent);
}

/* Phrase d'accroche, dans la police des titres */
.prestation__accroche {
  margin-bottom: 1rem;
  color: var(--ivoire);
  font-family: var(--police-titres);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.3;
}

.prestation__description {
  color: var(--grege);
}

.prestation__reperes {
  margin: 0.75rem 0 2rem;
  font-size: var(--taille-petit);
}

.prestation__tarif {
  margin-bottom: 1.5rem;
  color: var(--ivoire);
  font-size: var(--taille-petit);
  font-weight: 500;
}

/* Le bouton reste en bas, aligné d'une colonne à l'autre */
.prestation__telecharger {
  margin-top: auto;
}

/* Postes de DM Events : service, accueil, renfort */
.prestation__postes {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  margin: 1.5rem 0 0.5rem;
}

.poste {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(185, 178, 166, 0.2);
}

.poste__titre {
  margin: 0 0 0.35rem;
  color: var(--ivoire);
  font-family: var(--police-titres);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}

.poste__description {
  margin: 0;
  color: var(--grege);
  font-size: var(--taille-petit);
}

/* Une seule prestation : texte à gauche, postes à droite */
@media (min-width: 56rem) {
  .prestations--unique {
    grid-template-columns: 1fr;
  }

  .prestations--unique .prestation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }

  .prestations--unique .prestation > * {
    grid-column: 1;
  }

  .prestations--unique .prestation__postes {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin: 0;
  }

  .prestations--unique .prestation__telecharger {
    justify-self: start;
    margin-top: 0;
  }

  .prestations--unique .poste:first-child {
    padding-top: 0.35rem;
    border-top: 0;
  }
}

/* Lien vers l'autre univers, en bas des prestations */
.passerelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: clamp(4rem, 8vw, 5.5rem);
  padding: 2.25rem 0 0;
  border-top: var(--trait-or);
}

.passerelle img {
  flex: none;
  width: 9.5rem;
}

.passerelle.univers-events img {
  width: 7rem;
}

.passerelle div {
  flex: 1 1 18rem;
}

.passerelle p {
  margin-bottom: 0.5rem;
  color: var(--grege);
}

.passerelle .passerelle__titre {
  color: var(--ivoire);
  font-family: var(--police-titres);
  font-size: var(--taille-h3);
  line-height: 1.2;
}


/* --- 17. Page Contact et formulaire de devis ---------------------------- */

/* Formulaire à gauche, informations à droite */
.contact {
  display: grid;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

/* Chaque groupe de questions */
.groupe {
  min-width: 0;
  margin: 0 0 2.75rem;
  padding: 0;
  border: 0;
}

.groupe legend {
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0 0 0.6rem;
  border-bottom: var(--trait-bronze);
  font-family: var(--police-titres);
  font-size: var(--taille-h3);
  font-weight: 500;
  line-height: 1.2;
}

.groupe__aide {
  margin: -0.5rem 0 1rem;
  color: #5E574D;
  font-size: var(--taille-petit);
}

.grille-champs {
  display: grid;
  gap: 1.25rem 1.5rem;
}

@media (min-width: 40rem) {
  .grille-champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .champ--large {
    grid-column: 1 / -1;
  }
}

.champ label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--taille-petit);
  font-weight: 500;
}

.champ label small {
  font-size: inherit;
  font-weight: 400;
  color: #5E574D;
}

/* Zones de saisie */
.formulaire input:not([type="checkbox"]),
.formulaire select,
.formulaire textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(28, 26, 23, 0.25);
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--anthracite);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.formulaire textarea {
  resize: vertical;
}

.formulaire ::placeholder {
  color: #8C857A;
}

.formulaire input:not([type="checkbox"]):focus,
.formulaire select:focus,
.formulaire textarea:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(138, 100, 56, 0.18);
  outline: none;
}

/* Flèche des listes déroulantes */
.formulaire select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6438' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

/* Champ mal rempli et message d'erreur */
.formulaire [aria-invalid="true"] {
  border-color: #9B2C2C !important;
}

/* Petit texte d'explication sous un champ */
.champ__aide {
  margin: 0.45rem 0 0;
  color: #5E574D;
  font-size: 0.8125rem;
}

.champ__erreur {
  margin: 0.45rem 0 0;
  color: #9B2C2C;
  font-size: 0.875rem;
}

/* Choix de l'activité : deux grandes cases à cocher */
.activites {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .activites {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.activite {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem 1.15rem 3.2rem;
  border: 1px solid rgba(28, 26, 23, 0.25);
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.activite input {
  position: absolute;
  top: 1.35rem;
  left: 1.2rem;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--bronze);
}

.activite:hover {
  border-color: var(--bronze);
}

.activite:has(input:checked) {
  border-color: var(--bronze);
  box-shadow: inset 0 0 0 1px var(--bronze);
  background: #FBF8F3;
}

.activite__nom {
  font-family: var(--police-titres);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}

.activite__detail {
  color: #5E574D;
  font-size: var(--taille-petit);
}

/* Bouton d'envoi et mentions */
.formulaire__envoi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.formulaire__mention {
  margin: 0;
  color: #5E574D;
  font-size: 0.875rem;
}

.formulaire__statut {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--bronze);
  border-radius: 6px;
  background: #FBF8F3;
  font-size: var(--taille-petit);
}

/* Colonne d'informations : carte noire, reste visible en défilant */
.contact__infos {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 12px;
  background: var(--noir);
  color: var(--grege);
}

@media (min-width: 64rem) {
  .contact__infos {
    position: sticky;
    top: calc(var(--hauteur-entete) + 1.5rem);
  }
}

.contact__infos h2 {
  margin: 0 0 1rem;
  color: var(--or);
  font-size: 1.6rem;
}

.contact__infos h2:not(:first-child) {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: var(--trait-or);
}

.contact__coordonnees li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.35rem 0;
}

.contact__coordonnees span {
  width: 6rem;
  font-size: var(--taille-petit);
}

.contact__infos a {
  color: var(--ivoire);
  text-decoration-color: rgba(207, 167, 113, 0.6);
  text-underline-offset: 0.3em;
}

.contact__infos a:hover {
  color: var(--or-lumiere);
}

/* Étapes numérotées (une vraie suite d'étapes) */
.etapes-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes-contact li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  padding: 0.45rem 0;
  counter-increment: etape;
}

.etapes-contact li::before {
  content: counter(etape);
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--or);
  border-radius: 50%;
  color: var(--or);
  font-family: var(--police-titres);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1.6rem;
  text-align: center;
}

.contact__grilles li + li {
  margin-top: 0.6rem;
}

.contact__grilles a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.contact__grilles .icone {
  color: var(--or);
}


/* --- 18. Page Maison DM -------------------------------------------------- */

/* Petit intitulé au-dessus d'un titre (ex. « Notre histoire ») */
.surtitre {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.section--claire .surtitre {
  color: var(--bronze);
}

/* Phrase mise en valeur, précédée d'un court trait doré */
.citation {
  max-width: 34ch;
  margin-top: 2rem;
  color: var(--bronze);
  font-family: var(--police-titres);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
}

.citation::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: currentColor;
}

.section--sombre .citation {
  color: var(--or);
}

.citation--centre {
  margin-inline: auto;
  text-align: center;
}

.citation--centre::before {
  margin-inline: auto;
}

.section--sombre .citation--centre {
  margin-top: clamp(3.5rem, 7vw, 5rem);
}

/* Bandeau d'ouverture : titre à gauche, monogramme à droite */
.bandeau-maison {
  padding-block: clamp(4rem, 9vw, 7rem);
  border-bottom: var(--trait-or);
}

.bandeau-maison__grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .bandeau-maison__grille {
    grid-template-columns: 1fr auto;
    gap: 5rem;
  }
}

.bandeau-maison h1 {
  max-width: 14ch;
  color: var(--or);
  font-weight: 400;
}

.bandeau-maison__intro {
  margin-top: 1.5rem;
  color: var(--grege);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.bandeau-maison__monogramme {
  width: clamp(8rem, 18vw, 13rem);
}

/* L'histoire : photo en dôme et texte côte à côte */
.histoire {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .histoire {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.histoire__photo {
  max-width: 26rem;
}

/* Titre centré avec son introduction */
.entete-centre {
  max-width: 44rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.entete-centre p:last-child {
  margin: 1.25rem auto 0;
  color: var(--grege);
}

/* Les valeurs : nom à gauche, explication à droite, séparés par un filet */
.valeurs__titre {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.valeurs {
  margin: 0;
}

.valeur {
  display: grid;
  gap: 0.5rem 3rem;
  padding: 1.75rem 0;
  border-top: var(--trait-or);
}

.valeur:last-child {
  border-bottom: var(--trait-or);
}

@media (min-width: 48rem) {
  .valeur {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: baseline;
  }
}

.valeur dt {
  color: var(--or);
  font-family: var(--police-titres);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
}

.valeur dd {
  margin: 0;
  max-width: 60ch;
  color: var(--grege);
}

/* La promesse : texte centré */
.promesse__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.promesse h2 {
  margin-bottom: 1.5rem;
}

.promesse p {
  margin-inline: auto;
}

.promesse .groupe-boutons {
  justify-content: center;
  margin-top: 2.5rem;
}


/* --- 19. Page Galerie et visionneuse ------------------------------------- */

/* Boutons de filtre : Toutes / DM Cook / DM Events */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filtres button {
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border: 1px solid rgba(28, 26, 23, 0.25);
  border-radius: 999px;
  background: transparent;
  color: var(--anthracite);
  font: 500 var(--taille-petit) var(--police-texte);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.filtres button:hover {
  border-color: var(--bronze);
}

.filtres button[aria-pressed="true"] {
  border-color: var(--noir);
  background: var(--noir);
  color: var(--ivoire);
}

/* Grille de photos */
.galerie-complete {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 36rem) {
  .galerie-complete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .galerie-complete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.galerie-photo {
  margin: 0;
}

.galerie-photo__bouton {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--ivoire-fonce);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}

.galerie-photo__bouton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.galerie-photo__bouton:hover img {
  transform: scale(1.03);
}

.galerie-photo figcaption {
  margin-top: 0.75rem;
  color: #5E574D;
  font-size: var(--taille-petit);
}

.galerie-vide {
  color: #5E574D;
}

/* Visionneuse (fenêtre par-dessus la page) */
.visionneuse {
  width: min(94vw, 90rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivoire);
  overflow: visible;
}

.visionneuse::backdrop {
  background: rgba(11, 11, 11, 0.94);
}

.visionneuse__cadre {
  margin: 0;
  text-align: center;
}

.visionneuse__image {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 6px;
  object-fit: contain;
}

.visionneuse__legende {
  margin-top: 1rem;
  font-family: var(--police-titres);
  font-size: 1.35rem;
}

.visionneuse__bouton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--or);
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.6);
  color: var(--or);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.visionneuse__bouton:hover {
  background: var(--or);
  color: var(--noir);
}

.visionneuse__bouton .icone {
  width: 1.3rem;
  height: 1.3rem;
}

.visionneuse__precedente { left: 1rem;  top: 50%; transform: translateY(-50%); }
.visionneuse__suivante   { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__fermer     { right: 1rem; top: 1rem; }

@media (max-width: 40rem) {
  .visionneuse__precedente,
  .visionneuse__suivante {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
}


/* --- 20. Pages légales --------------------------------------------------- */

/* Texte aligné sur le reste du site, lignes limitées pour rester lisible */
.texte-legal > * {
  max-width: 46rem;
}

.texte-legal h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
}

.texte-legal h2:first-child,
.texte-legal__date + h2 {
  margin-top: 0;
}

.texte-legal__date {
  margin-bottom: 2rem;
  color: #5E574D;
  font-size: var(--taille-petit);
}

/* Fiche d'identité : intitulé à gauche, valeur à droite */
.fiche {
  margin: 0;
  border-top: var(--trait-bronze);
}

.fiche > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding: 0.8rem 0;
  border-bottom: var(--trait-bronze);
}

@media (min-width: 40rem) {
  .fiche > div {
    grid-template-columns: 11rem 1fr;
  }
}

.fiche dt {
  color: #5E574D;
  font-size: var(--taille-petit);
}

.fiche dd {
  margin: 0;
}

.fiche + p {
  margin-top: 1.25rem;
}

.liste-legale {
  margin: 0 0 1.1em;
  padding-left: 1.25rem;
  list-style: disc;
}

.liste-legale li + li {
  margin-top: 0.4rem;
}

.liste-legale li::marker {
  color: var(--bronze);
}


/* --- 21. Numéro de téléphone et sa mention ------------------------------- */

/* Le lien regroupe le numéro (1re ligne) et la mention (2e ligne) : tout reste cliquable */
a.telephone {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  line-height: 1.3;
  text-decoration: none;
}

/* Mention plus petite et plus discrète (grège atténué, lisible sur fond noir) */
.telephone__mention {
  color: #9C958A;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Page Contact : les intitulés font 6rem de large, pas les lignes du numéro */
.contact__coordonnees .telephone span {
  width: auto;
}

.section--claire .telephone__mention {
  color: #5E574D;
}

/* Là où les liens sont soulignés, seul le numéro garde son soulignement */
.appel__direct .telephone__numero,
.contact__infos .telephone__numero,
.lien.telephone .telephone__numero {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.contact__infos .telephone__numero {
  text-decoration-color: rgba(207, 167, 113, 0.6);
}

/* Dans l'appel au devis (texte centré), la mention est centrée sous le numéro */
.appel__direct {
  align-items: flex-start;
}

.appel__direct .telephone {
  align-items: center;
}


/* --- 22. Formulaire : cases à cocher (formules, pièces, personnel) ------- */

/* Un groupe de cases : même présentation qu'un champ */
.choix,
.choix__bloc {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.groupe .choix > legend {
  width: auto;
  margin-bottom: 0.4rem;
  padding: 0;
  border: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-petit);
  font-weight: 500;
  line-height: 1.4;
}

.choix > .champ__aide {
  margin: 0 0 0.75rem;
}

/* Sous-titre « Dîner buffet : votre formule », « Buffet cocktail : vos pièces » */
.choix__bloc:not([hidden]) ~ .choix__bloc {
  margin-top: 1.5rem;
}

.groupe .choix__bloc legend {
  width: auto;
  margin-bottom: 0.65rem;
  padding: 0;
  border: 0;
  color: var(--bronze);
  font-family: var(--police-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.choix__bloc .champ__aide {
  margin: -0.2rem 0 0.75rem;
}

.choix__liste {
  display: grid;
  gap: 0.6rem;
}

.choix__liste--option {
  margin-top: 0.6rem;
}

@media (min-width: 40rem) {
  .choix__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .choix__liste--option {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48rem) {
  .choix__liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Une case : petite carte cliquable, comme le choix de l'activité */
.case {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(28, 26, 23, 0.25);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.case input {
  grid-row: 1 / span 2;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.1rem 0 0;
  accent-color: var(--bronze);
}

.case:hover {
  border-color: var(--bronze);
}

.case:has(input:checked) {
  border-color: var(--bronze);
  box-shadow: inset 0 0 0 1px var(--bronze);
  background: #FBF8F3;
}

.case__nom {
  font-weight: 500;
}

.case__detail {
  grid-column: 2;
  color: #5E574D;
  font-size: 0.8125rem;
}

.choix > .champ__erreur {
  margin-top: 0.6rem;
}