/* ============================================
   ROSES & METS - STYLES PRINCIPAUX
   ============================================ */

/* === RESET & BASE === */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--espace-5));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  color: var(--texte);
  background-color: var(--surface-page);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

h2,
h3 {
  font-weight: var(--graisse-titre);
  color: var(--marque);
}

strong,
b {
  font-weight: var(--graisse-insistance);
}

/* === UTILITIES === */

/* Système de containers unifié */
.container {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: 0 var(--espace-5);
}

/* Container élargi pour très grands écrans */
@media (min-width: 1536px) {
  .container {
    max-width: var(--largeur-contenu-grand-ecran);
  }
}

/* Section : espacement vertical */
.section {
  padding-block: var(--espace-6);
}

.section__title {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-principal);
  font-weight: var(--graisse-titre);
  line-height: var(--interligne-titre);
  color: var(--marque);
  margin: 0 0 var(--espace-5) 0;
}

@media (max-width: 767px) {
  .section__title {
    font-size: var(--taille-titre-secondaire);
    margin: 0 0 var(--espace-5) 0;
  }
}


/* Section intro : paragraphe d'introduction sous le titre (réutilisable) */
.section__intro {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-lecture);
  color: var(--texte-attenue);
  margin: 0 0 var(--espace-6);
}

/* Section text : paragraphe de contenu standard (réutilisable) */
.section__text {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-lecture);
  color: var(--texte-attenue);
  margin-bottom: var(--espace-4);
}

.section__text:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--espace-7);
  }
}

/* Skip link (accessibilité) */
.skip-link {
  position: absolute;
  top: calc(-1 * var(--retrait-hors-ecran));
  left: 0;
  background-color: var(--marque);
  color: var(--sur-action);
  padding: var(--espace-2) var(--espace-3);
  z-index: var(--plan-evitement);
}

.skip-link:focus {
  top: 0;
}

/* Hidden */
.hidden {
  display: none !important;
}

/* Focus clavier : contour visible sur tout élément focalisable. :where() garde
   une spécificité nulle, si bien que les champs de formulaire conservent leur
   halo (.contact__input:focus). Le lien d'évitement garde le contour de marque :
   il s'affiche sur l'en-tête clair, où un contour clair disparaîtrait. */
:where(a, button, select, summary, [tabindex]):focus-visible {
  outline: var(--trait-focus) solid var(--marque);
  outline-offset: var(--cale-optique);
}

.footer :where(a, button):focus-visible {
  outline-color: var(--sur-marque);
}

.accordion__trigger:focus-visible .accordion__title {
  color: var(--marque-survol);
}

/* === HEADER === */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--plan-entete);
  background-color: var(--surface-page);
  border-bottom: 1px solid var(--bordure);
}

.header__container {
  display: flex;
  align-items: center;
  padding: 0 var(--espace-5);
  height: var(--hauteur-entete);
  max-width: var(--largeur-contenu);
  margin: 0 auto;
}

/* Header élargi pour très grands écrans */
@media (min-width: 1536px) {
  .header__container {
    max-width: var(--largeur-contenu-grand-ecran);
  }
}

.header__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .header__logo-img {
    height: 36px;
  }
}

@media (min-width: 768px) {
  .header__logo-img {
    height: 44px;
  }
}

/* À partir de 1024px, trois colonnes : le logo, la navigation au centre exact
   de l'en-tête, et le groupe langue + réservation. Les deux colonnes de côté
   partagent l'espace à parts égales, ce qui centre la navigation. En dessous,
   la place manquait pour la centrer : l'en-tête passe au menu hamburger dès la
   tablette (seuil avancé de 768 à 1024px le 2026-10-07). Les seuils du menu
   sont les neuf blocs de l'en-tête ; la taille du logo garde les siens. */
.header__actions {
  display: none;
}

@media (min-width: 1024px) {
  .header__container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .header__logo {
    justify-self: start;
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    justify-self: end;
  }
}

/* Mobile actions: phone icon + hamburger */
.header__mobile-actions {
  display: none;
  align-items: center;
  gap: var(--espace-4);
  margin-left: auto;
}

/* Show mobile actions only on mobile (< 768px) */
@media (max-width: 1023px) {
  .header__mobile-actions {
    display: flex;
  }
}

.header__phone-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile-confort);
  height: var(--cible-tactile-confort);
  background-color: var(--signal);
  border-radius: 0;
  transition: background-color var(--transition-etat);
}

.header__phone-icon-only svg {
  width: var(--icone-contact);
  height: var(--icone-contact);
  filter: brightness(0) invert(1);
}

.header__phone-icon-only:hover {
  background-color: var(--signal-survol);
}

.header__phone {
  display: block;
}

/* Phone button mobile variant (inside menu) */
.header__phone--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .header__phone--mobile {
    display: block;
    margin-top: var(--espace-6);
    padding-top: var(--espace-6);
    border-top: 1px solid var(--bordure);
  }
}

/* Social media mobile variant (inside menu) */
.header__social--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .header__social--mobile {
    display: flex;
    gap: var(--espace-4);
    justify-content: center;
    margin-top: auto;
    padding-bottom: 0;
  }
}

.header__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile-confort);
  height: var(--cible-tactile-confort);
  border-radius: 50%;
  background-color: var(--surface-pastille);
  color: var(--marque);
  transition: background-color var(--transition-etat), color var(--transition-etat);
}

.header__social-link:hover {
  background-color: var(--surface-pastille);
  color: var(--marque-survol);
}

.header__social-icon {
  width: var(--icone-reseau);
  height: var(--icone-reseau);
}

/* Phone button desktop variant (in header) */
.header__phone--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .header__phone--desktop {
    display: block;
  }
}

.header__phone-button {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  height: var(--cible-tactile-confort);
  padding: 0 var(--espace-3);
  background-color: var(--signal);
  text-decoration: none;
  transition: background-color var(--transition-etat);
  width: 100%;
  justify-content: center;
}

@media (min-width: 1024px) {
  .header__phone-button {
    width: auto;
  }
}

.header__phone-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.header__phone-label {
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  font-weight: var(--graisse-libelle);
  color: var(--sur-action);
  white-space: nowrap;
}

.header__phone-button:hover {
  background-color: var(--signal-survol);
}

/* Mobile menu toggle */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-2);
  z-index: calc(var(--plan-entete) + 1);
}

@media (max-width: 1023px) {
  .header__toggle {
    display: flex;
  }
}

.header__toggle-bar {
  display: block;
  width: 2rem;
  height: 0.25rem;
  background-color: var(--marque);
  transition: transform var(--transition-etat), opacity var(--transition-etat);
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
  transform: translateY(var(--bascule-burger)) rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
  transform: translateY(calc(-1 * var(--bascule-burger))) rotate(-45deg);
}

/* Navigation */
.header__nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: var(--largeur-menu-mobile);
  height: 100vh;
  background-color: var(--surface-page);
  box-shadow: var(--ombre-panneau);
  padding: calc(var(--hauteur-entete) + var(--espace-4)) var(--espace-5);
  z-index: var(--plan-entete);
  transition: right var(--transition-etat);
  display: flex;
  flex-direction: column;
}

.header__nav.is-open {
  right: 0;
}

.header__nav-scrim {
  position: fixed;
  inset: 0;
  background-color: var(--voile-fort);
  z-index: var(--plan-entete);
}

.header__nav-scrim[hidden] {
  display: none;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.nav-list__link {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-libelle);
  color: var(--marque);
  padding: var(--espace-3);
  text-transform: capitalize;
}

.nav-list__link:hover,
.nav-list__link:focus {
  color: var(--marque-survol);
}

@media (min-width: 1024px) {
  .header__nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .nav-list {
    flex-direction: row;
    gap: 0;
    align-items: center;
  }

  .nav-list__link {
    font-size: var(--taille-corps);
  }
}

/* === LANGUAGE SWITCHER (mobile) === */

.lang-switcher {
  display: none;
}

@media (max-width: 1023px) {
  .lang-switcher--mobile {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    align-self: center;
    margin-top: var(--espace-5);
    padding: 0;
    border: none;
    background: none;
    font-family: var(--police-corps);
    font-size: var(--taille-corps);
  }
}

.lang-switcher__btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--graisse-courante);
  color: var(--texte-attenue);
  cursor: pointer;
  letter-spacing: var(--approche-langue);
  transition: color var(--transition-etat);
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
}

.lang-switcher__btn:hover,
.lang-switcher__btn:focus-visible {
  color: var(--marque-survol);
}

.lang-switcher__btn.is-active {
  color: var(--marque);
  font-weight: var(--graisse-actif);
  cursor: default;
}

.lang-switcher__sep {
  color: var(--filet-doux);
  opacity: var(--opacite-separateur);
  user-select: none;
}

/* === LANGUAGE DROPDOWN (desktop) === */

.lang-dropdown {
  display: none;
}

@media (min-width: 1024px) {
  .lang-dropdown--desktop {
    display: block;
    position: relative;
  }
}

.lang-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--cale-fine);
  height: var(--cible-tactile-confort);
  padding: 0 var(--espace-3);
  background: none;
  border: var(--trait-bordure) solid var(--bordure);
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  font-weight: var(--graisse-libelle);
  color: var(--marque);
  cursor: pointer;
  letter-spacing: var(--approche-selecteur-langue);
  transition: border-color var(--transition-etat), color var(--transition-etat);
  white-space: nowrap;
}

.lang-dropdown__trigger:hover,
.lang-dropdown__trigger:focus-visible {
  border-color: var(--marque);
  color: var(--marque-survol);
}

.lang-dropdown__chevron {
  transition: transform var(--transition-etat);
}

.lang-dropdown--open .lang-dropdown__chevron {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--cale-detachement));
  right: 0;
  min-width: 110px;
  background: var(--surface-page);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-flottante);
  list-style: none;
  margin: 0;
  padding: var(--espace-1) 0;
  z-index: var(--plan-menu-langue);
}

.lang-dropdown--open .lang-dropdown__menu {
  display: block;
}

.lang-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  width: 100%;
  padding: var(--espace-2) var(--espace-3);
  background: none;
  border: none;
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  font-weight: var(--graisse-courante);
  color: var(--texte);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-etat), color var(--transition-etat);
}

.lang-dropdown__option:hover,
.lang-dropdown__option:focus-visible {
  color: var(--marque-survol);
}

.lang-dropdown__option.is-active {
  color: var(--marque);
  font-weight: var(--graisse-actif);
  cursor: default;
}

/* === CARDS === */

/* Classe de base réutilisable pour toutes les cartes */
.card {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
}

/* === BUTTONS === */

.btn {
  display: inline-block;
  /* 12 px de marge verticale et l'interligne du corps : un bouton de
     55 px environ (2026-10-09). */
  padding: calc(var(--espace-2) + var(--espace-1)) var(--espace-4);
  font-weight: var(--graisse-bouton);
  text-align: center;
  cursor: pointer;
  border: var(--trait-appui) solid transparent;
  font-size: var(--taille-corps);
}

.btn--primary {
  background-color: var(--marque);
  color: var(--sur-action);
  border-color: var(--marque);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--marque-survol);
  border-color: var(--marque-survol);
}

.btn--secondary {
  background-color: transparent;
  color: var(--marque);
  border-color: var(--marque);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--surface-douce);
  color: var(--marque-survol);
  border-color: var(--marque-survol);
}

.btn--full {
  width: 100%;
}

/* === MOTIFS PARTAGÉS ===
   Des motifs de la charte que plusieurs pages emploient, sous un nom à eux,
   et non sous celui de la première page qui les a portés. Décrits dans
   DESIGN.md, reproduits dans le design system. */

/* La rose en filigrane, derrière le contenu d'un bloc : la carte du hero de
   l'accueil, le titre de la page carte. La rose est peinte pour le fond
   --surface (images-derivees.sh) : à n'employer que sur lui. */
.filigrane-rose {
  position: relative;
}

.filigrane-rose::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/logo/rose.svg?v=ef25e2a8d5');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  z-index: 0;
  pointer-events: none;
}

.filigrane-rose > * {
  position: relative;
  z-index: 1;
}

/* La rose a des formes pleines, peintes dans la couleur de son fond : sur le
   blanc (carte du hero), sa version blanche, aux traits vert très pâle. */
.filigrane-rose--blanc::before {
  background-image: url('../assets/images/logo/rose-sur-blanc.svg?v=7622e065fc');
}

/* Le cadre double d'une carte imprimée : un double filet de marque, puis un
   filet doux. Le contenu va dans .cadre-double__interieur. */
.cadre-double {
  padding: var(--espace-1);
  border: var(--filet-encart) double var(--marque);
}

.cadre-double__interieur {
  padding: var(--espace-5) var(--espace-3);
  border: var(--trait-bordure) solid var(--filet-doux);
}

/* Un titre centré entre deux filets doux qui courent jusqu'aux bords. */
.titre-filets {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
}

.titre-filets::before,
.titre-filets::after {
  content: "";
  flex: 1 1 0;
  border-top: var(--trait-bordure) solid var(--filet-doux);
}

/* Un prix, à la main, comme sur une ardoise : Satisfy, en corail. */
.prix {
  font-family: var(--police-manuscrite);
  font-weight: var(--graisse-manuscrite);
  font-size: var(--taille-manuscrit);
  color: var(--signal);
  white-space: nowrap;
}

/* Un bouton plus serré, pour une rangée de choix : les ancres de la carte. */
.btn--compact {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile-confort);
  padding: 0 var(--espace-3);
  font-weight: var(--graisse-libelle);
  text-decoration: none;
}

/* === HERO SECTION === */

.hero {
  position: relative;
  padding-top: calc(var(--espace-7) + var(--espace-2));
  min-height: 600px;
  display: flex;
  align-items: center;
}

.hero__image-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--voile-leger);
  z-index: 1;
}

.hero__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__card {
  position: relative;
  z-index: 1;
  background-color: var(--surface-page);
  padding: var(--espace-7);
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  box-shadow: var(--ombre-carte-hero);
}

.hero__card .btn {
  flex: none;
}

.hero__subtitle {
  position: relative;
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  color: var(--marque);
  text-transform: uppercase;
  letter-spacing: var(--approche-sous-titre);
  text-wrap: balance;
  margin: 0 0 var(--espace-6) 0;
}

.hero__title {
  font-family: var(--police-affiche);
  font-size: var(--taille-titre-page);
  font-weight: var(--graisse-manuscrite);
  color: var(--marque);
  margin: 0 0 var(--espace-6) 0;       /* autant qu'au-dessus, sous le sous-titre */
  line-height: var(--interligne-manuscrit);
  letter-spacing: var(--approche-affiche);
  text-wrap: balance;
}


/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .hero {
    min-height: 500px;
  }

  .hero__card {
    padding: var(--espace-5);
    max-width: 100%;
  }

  .hero__card::before {
    background-size: auto 80%;
  }

  .hero__subtitle {
    margin: 0 0 var(--espace-4) 0;
  }

  .hero__title {
    font-size: var(--taille-titre-page-mobile);
    margin: 0 0 var(--espace-4) 0;
  }

}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    min-height: 550px;
  }

  .hero__card {
    padding: var(--espace-6);
  }

  .hero__title {
    font-size: var(--taille-titre-page);
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 700px;
  }

  .hero__card {
    padding: var(--espace-7);
    max-width: 550px;
  }

  .hero__title {
    font-size: var(--taille-titre-page);
  }

}

/* Au-dela de 1440px, le bloc d'ouverture garde volontairement les valeurs du
   palier 1024px. Un palier grand ecran y portait la hauteur a 800px, la carte
   a 650px et le titre a 72px : sur un ecran d'ordinateur portable large, la
   carte devenait envahissante et le sous-titre passait sur deux lignes.
   Retire le 2026-08-28 sur constat du fondateur, captures a l'appui. */

/* === SERVICES TRAITEUR SECTION === */

.services-traiteur__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

@media (min-width: 1024px) {
  .services-traiteur__container {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--espace-7);
    align-items: start;
  }
}

/* Menu des services (colonne gauche) - Mosaïque 2x2 */
.services-traiteur__menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-3);
}

@media (min-width: 768px) {
  .services-traiteur__menu {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

/* Item de service - Carré dans la mosaïque */
.service-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--espace-6);
  border: 1px solid var(--bordure);
  background-color: var(--surface);
  cursor: pointer;
  transition: all var(--transition-etat);
  text-align: left;
  min-height: 200px;
  position: relative;
}

@media (max-width: 767px) {
  .service-item {
    min-height: 180px;
    padding: var(--espace-4);
  }
}

@media (min-width: 768px) {
  .service-item {
    min-height: 0;
  }
}

.service-item:hover {
  background-color: var(--surface-appuyee);
}

.service-item.is-active {
  background-color: var(--mise-en-avant-fond);
  border-color: var(--mise-en-avant-contour);
}

.service-item.is-active .service-item__title {
  color: var(--signal);
}

.service-item.is-active .service-item__description {
  color: var(--signal);
}

.service-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  align-items: flex-start;
  width: 100%;
}

.service-item__title {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-titre-carte);
  color: var(--marque);
  text-transform: uppercase;
  line-height: var(--interligne-titre);
  margin: 0;
}

.service-item__description {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
  color: var(--marque);
  margin: 0;
}

.service-item__chevron {
  display: none;
}

/* Container image + panneau (colonne droite) */
.services-traiteur__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 400px;
}

@media (min-width: 1024px) {
  .services-traiteur__details {
    height: 100%;
  }
}

.services-traiteur__image-wrapper {
  flex: 1;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
}

@media (min-width: 1024px) {
  .services-traiteur__image-wrapper {
    flex: 1;
    min-height: 0;
  }
}

.services-traiteur__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition-suivi);
}

/* Panneau d'informations */
.services-traiteur__info {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-top: none;
  padding: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.services-traiteur__info-title {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre);
  color: var(--marque);
  margin: 0;
  text-transform: uppercase;
}

.services-traiteur__info-description {
  display: none;
}

.services-traiteur__info-price {
  font-family: var(--police-manuscrite);
  font-size: var(--taille-manuscrit);
  color: var(--signal);
  font-weight: var(--graisse-manuscrite);
  margin: 0;
  /* TEMPORAIRE : Masqué en attendant les tarifs définitifs */
  display: none;
}

.services-traiteur__info-actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin-top: var(--espace-2);
}

@media (min-width: 768px) {
  .services-traiteur__info-actions {
    flex-direction: row;
    gap: var(--espace-4);
  }

  .services-traiteur__info-actions .btn {
    flex: 1;
  }
}

/* --- Service Cards (Mobile/Tablette) --- */

/* Container des cards */
.services-traiteur__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
  .services-traiteur__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espace-5);
  }
}

/* Desktop : cacher les cards, afficher le système interactif */
@media (min-width: 1024px) {
  .services-traiteur__cards {
    display: none;
  }
}

/* Mobile/Tablette : cacher le système interactif */
@media (max-width: 1023px) {
  .services-traiteur__container {
    display: none;
  }
}

/* Card individuelle - Hérite des styles de base de .card */
.service-card {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Image de la card */
.service-card__image-wrapper {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: var(--surface-appuyee);
  position: relative;
}

@media (min-width: 768px) {
  .service-card__image-wrapper {
    height: 220px;
  }
}

.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenu de la card */
.service-card__content {
  padding: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  flex: 1;
}

.service-card__title {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre-carte);
  color: var(--marque);
  text-transform: uppercase;
  line-height: var(--interligne-titre);
  margin: 0;
}

.service-card__description {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps-carte);
  color: var(--marque);
  margin: 0;
  flex: 1;
}

.service-card__price {
  margin: 0;
  margin-top: var(--espace-2);
  display: none; /* Masqué temporairement - à réactiver plus tard */
}

/* === CHEF SECTION === */

.chef-section__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

@media (min-width: 1024px) {
  .chef-section__container {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--espace-7);
    align-items: start;
  }
}

/* Inversion colonnes chef : texte à gauche, photo à droite */
@media (min-width: 1024px) {
  .chef-section__image-wrapper {
    order: 2;
  }
  .chef-section__content {
    order: 1;
  }
}

/* Hauteurs partagées des wrappers d'images (hauteur libre sur desktop, gérée par JS) */
.chef-section__image-wrapper,
.engagements__left,
.restaurant-info__right {
  min-height: 400px;
  max-height: 450px;
}

@media (max-width: 767px) {
  .chef-section__image-wrapper,
  .engagements__left,
  .restaurant-info__right {
    min-height: 300px;
    max-height: 350px;
  }
}

@media (min-width: 1024px) {
  .chef-section__image-wrapper,
  .engagements__left,
  .restaurant-info__right {
    min-height: 0;
    max-height: none; /* Hauteur gérée dynamiquement par JavaScript */
  }
}

.chef-section__image-wrapper {
  overflow: hidden;
}

.chef-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
  display: block;
}

.chef-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
}

.chef-quote {
  background-color: var(--mise-en-avant-fond);
  padding: var(--espace-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid var(--mise-en-avant-contour);
}

@media (max-width: 767px) {
  .chef-quote {
    padding: var(--espace-4);
  }
}

.chef-quote__text {
  font-family: var(--police-manuscrite);
  font-size: var(--taille-manuscrit);
  color: var(--signal);
  line-height: var(--interligne-citation);
  margin: 0 0 var(--espace-3) 0;
  white-space: pre-wrap;
}

.chef-quote__author {
  font-family: var(--police-manuscrite);
  font-size: var(--taille-manuscrit);
  color: var(--signal);
  font-style: normal;
  display: block;
}

/* Chef quote variant in contact section - collée en bas de la colonne */
.chef-quote--contact {
  margin-top: auto;
}

/* Sur mobile et tablette : formulaire avant les infos contact */
@media (max-width: 1023px) {
  .contact__col:not(.contact__col--form) {
    order: 2; /* Infos contact + citation après */
  }

  .contact__col--form {
    order: 1; /* Formulaire en premier */
  }

  .chef-quote--contact {
    margin-top: var(--espace-6);
  }
}

/* === ENGAGEMENTS SECTION === */

.engagements__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

@media (min-width: 1024px) {
  .engagements__container {
    grid-template-columns: 1fr 1.3fr;
    gap: var(--espace-7);
    align-items: stretch;
  }
}

.engagements__left {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .engagements__left {
    display: block; /* Retire flexbox pour que l'image remplisse correctement la div */
  }
}

/* Element picture doit prendre toute la hauteur du container */
.engagements__left picture {
  display: block;
  width: 100%;
  height: 100%;
}

.engagements__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.engagements__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.engagements__content {
  width: 100%;
}

/* Card avec fond coloré pour effet "cadre qui respire" */
.engagements__content--card {
  background-color: var(--surface);
  padding: var(--espace-6);
  border: 1px solid var(--bordure);
}

@media (max-width: 767px) {
  .engagements__content--card {
    padding: var(--espace-4);
  }
}

@media (min-width: 1024px) {
  .engagements__content--card {
    padding: var(--espace-7);
  }
}

/* Section valeurs, carte de mise en avant */
.valeurs__card {
  background-color: var(--mise-en-avant-fond);
  padding: var(--espace-6);
  border: 1px solid var(--mise-en-avant-contour);
}

@media (max-width: 767px) {
  .valeurs__card {
    padding: var(--espace-4);
  }
}

@media (min-width: 1024px) {
  .valeurs__card {
    padding: var(--espace-7);
  }
}

/* Titre de la section valeurs */
.valeurs__title {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-secondaire);
  font-weight: var(--graisse-titre);
  color: var(--signal);
  text-align: center;
  margin: 0 0 var(--espace-5) 0;
}

@media (min-width: 768px) {
  .valeurs__title {
    font-size: var(--taille-titre-principal);
  }
}

/* Grille compacte des valeurs */
.valeurs__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-4);
}

@media (max-width: 767px) {
  .valeurs__grid {
    gap: var(--espace-3);
  }
}

@media (min-width: 1024px) {
  .valeurs__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--espace-4);
  }
}

.valeur-item-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espace-2);
  flex: 0 0 calc(50% - var(--espace-4) / 2); /* 2 colonnes sur mobile */
  max-width: calc(50% - var(--espace-4) / 2);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .valeur-item-compact {
    flex: 0 0 calc(33.333% - var(--espace-4) * 2 / 3); /* 3 colonnes sur tablette */
    max-width: calc(33.333% - var(--espace-4) * 2 / 3);
  }
}

@media (min-width: 1024px) {
  .valeur-item-compact {
    flex: initial;
    max-width: none;
  }
}

.valeur-item-compact__icon {
  flex-shrink: 0;
}

.valeur-item-compact__icon-img {
  width: var(--icone-valeur-mobile);
  height: var(--icone-valeur-mobile);
  object-fit: contain;
}

@media (min-width: 768px) {
  .valeur-item-compact__icon-img {
    width: var(--icone-valeur);
    height: var(--icone-valeur);
  }
}

.valeur-item-compact__title {
  font-family: var(--police-manuscrite);
  font-size: var(--taille-manuscrit);
  font-weight: var(--graisse-manuscrite);
  color: var(--signal);
  margin: 0;
  line-height: var(--interligne-manuscrit);
}

@media (max-width: 767px) {
  .valeur-item-compact__title {
    font-size: var(--taille-manuscrit-mobile);
    line-height: var(--interligne-manuscrit-mobile);
  }
}

@media (min-width: 768px) {
  .valeur-item-compact__title {
    font-size: var(--taille-manuscrit);
  }
}

/* Accordion */
.accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.accordion__item {
  display: block;
  padding-block: var(--espace-4);
}

.accordion__item:first-child {
  padding-top: 0;
}

.accordion__item:last-child {
  padding-bottom: 0;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}

.accordion__trigger:hover,
.accordion__trigger:focus {
  background-color: transparent;
}

.accordion__title {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre);
  color: var(--marque);
  margin: 0;
  text-transform: uppercase;
  line-height: normal;
}

@media (max-width: 767px) {
  .accordion__title {
    font-size: var(--taille-accent);
  }
}

.accordion__icon {
  font-size: var(--taille-glyphe);
  color: var(--marque);
  transition: transform var(--transition-etat);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-accordeon),
              opacity var(--transition-accordeon),
              padding var(--transition-accordeon);
}

.accordion__panel[hidden] {
  display: block;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
}

.accordion__panel:not([hidden]) {
  max-height: 1000px;
  opacity: 1;
}

.accordion__content {
  padding-top: var(--espace-3);
  line-height: var(--interligne-corps);
  font-size: var(--taille-corps);
  color: var(--marque);
}

/* Accordion compact variant - less space between items */
.accordion--compact .accordion__item {
  padding-block: var(--espace-3);
}

/* Spacing around accordion */
.accordion-intro {
  margin-bottom: var(--espace-4);
}

.accordion-conclusion {
  margin-top: var(--espace-4);
}

/* === GALERIE SECTION === */

.galerie {
  position: relative;
}

/* Wrapper pour les gradients - uniquement autour de la grille scrollable */
.galerie__wrapper {
  position: relative;
}

.galerie__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-3);
  width: 100%;
}

.galerie__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1;
}

.galerie__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-etat);
}

.galerie__img:hover {
  transform: scale(var(--zoom-survol-image));
}

/* Tablette */
@media (min-width: 768px) {
  .galerie__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espace-4);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .galerie__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espace-5);
  }
}

/* === CONTACT SECTION === */

.contact__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-6);
}

@media (min-width: 1024px) {
  .contact__container {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--espace-7);
  }
}

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

.contact__col--card {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  padding: var(--espace-6);
}

@media (max-width: 767px) {
  .contact__col--card {
    padding: var(--espace-4);
  }
}

.contact__title {
  font-family: var(--police-corps);
  font-weight: var(--graisse-titre);
  font-size: var(--taille-titre-carte);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: var(--espace-4);
  color: var(--marque);
  line-height: normal;
}

.contact__info {
  line-height: var(--interligne-corps);
  font-size: var(--taille-corps);
}

.contact__info p {
  margin-bottom: var(--espace-2);
}

.contact__info strong {
  color: var(--marque);
  font-weight: var(--graisse-titre);
}

.contact__info a {
  color: var(--marque);
  font-weight: var(--graisse-libelle);
  text-decoration: none;
  transition: color var(--transition-etat);
}

.contact__info a:hover {
  color: var(--marque-survol);
}

.contact__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--espace-2);
  color: var(--marque);
  flex-shrink: 0;
  width: var(--icone-contact);
  height: var(--icone-contact);
}

@media (max-width: 767px) {
  .contact__icon {
    width: var(--icone-contact-mobile);
    height: var(--icone-contact-mobile);
  }
}

/* Classe pour messages d'erreur des champs de formulaire */
.field-error {
  color: var(--signal);
  font-size: var(--taille-note);
  margin-top: var(--espace-1);
  display: block;
}

.contact__input.error {
  border-color: var(--signal);
  border-width: var(--trait-appui);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.contact__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-3);
}

.contact__label {
  font-family: var(--police-corps);
  font-size: var(--taille-legende);
  font-weight: var(--graisse-libelle);
  color: var(--texte);
  margin-bottom: var(--espace-1);
}

.contact__field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .contact__form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact__input {
  width: 100%;
  padding: var(--espace-3);
  border: var(--trait-bordure) solid var(--bordure);
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte);
  background-color: var(--surface-page);
  transition: border-color var(--transition-etat);
}

.contact__input::placeholder {
  color: var(--texte-attenue);
}

.contact__input:focus {
  outline: none;
  border-color: var(--marque);
  box-shadow: var(--anneau-focus);
}

.contact__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23636059' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espace-3) center;
  padding-right: var(--espace-7);
  cursor: pointer;
}

.contact__textarea {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--police-corps);
}

.contact__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  font-size: var(--taille-note);
  color: var(--texte-attenue);
  line-height: var(--interligne-corps);
  cursor: pointer;
  margin-top: var(--espace-2);
}

.contact__checkbox input[type="checkbox"] {
  margin-top: var(--cale-case-a-cocher);
  cursor: pointer;
  flex-shrink: 0;
}

.contact__checkbox input[type="checkbox"].error {
  outline: var(--trait-focus) solid var(--signal);
  outline-offset: var(--cale-optique);
}

.contact__checkbox input[type="checkbox"].error ~ label {
  color: var(--signal);
}

.contact__message {
  padding: var(--espace-3);
  font-size: var(--taille-note);
  text-align: center;
}

.contact__message--success {
  background-color: var(--surface-douce);
  color: var(--marque);
  border: var(--trait-bordure) solid var(--filet-doux);
}

.contact__message--error {
  color: var(--signal);
}

/* === FOOTER === */

.footer {
  color: var(--sur-marque);
}

.footer__main {
  background-color: var(--marque);
  padding-block: var(--espace-6);
}

.footer__main .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-5);
}

.footer__logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__logo-img {
  height: auto;
  max-width: 170px;
  width: 100%;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__nav-link {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-libelle);
  color: var(--sur-marque);
  text-decoration: none;
  transition: color var(--transition-etat);
  padding: 0 var(--espace-2);
}

.footer__nav-link:hover {
  color: var(--sur-marque-survol);
}

/* Footer Social Media */
.footer__social {
  display: flex;
  gap: var(--espace-4);
  justify-content: center;
  margin-top: var(--espace-5);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile-confort);
  height: var(--cible-tactile-confort);
  border-radius: 50%;
  background-color: var(--sur-marque);
  color: var(--marque);
  transition: background-color var(--transition-etat), color var(--transition-etat);
}

.footer__social-link:hover {
  background-color: var(--sur-marque-survol);
  color: var(--marque-survol);
}

.footer__social-icon {
  width: var(--icone-reseau);
  height: var(--icone-reseau);
}

/* Footer Bottom */
.footer__bottom {
  background-color: var(--marque-profonde);
  padding-block: var(--espace-3);
}

.footer__bottom .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-3);
  text-align: center;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--espace-3);
  justify-content: center;
  font-size: var(--taille-note);
}

.footer__legal a,
.footer__legal button {
  font-family: var(--police-corps);
  color: var(--sur-marque);
  text-decoration: none;
  transition: color var(--transition-etat);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
}

.footer__legal a:hover,
.footer__legal button:hover {
  color: var(--sur-marque-survol);
}

.footer__copyright {
  font-family: var(--police-corps);
  font-size: var(--taille-legende);
  color: var(--sur-marque);
}

.footer__credit {
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  color: var(--sur-marque);
}

/* Heart emoji animation */
.heart-emoji {
  display: inline-block;
  cursor: pointer;
  transition: transform var(--transition-etat);
  user-select: none;
}

.heart-emoji:hover {
  transform: scale(var(--zoom-survol-coeur));
  animation: heartbeat var(--duree-battement) ease-in-out;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.4);
  }
}

/* Heart explosion effect */
.heart-particle {
  position: fixed;
  pointer-events: none;
  font-size: var(--taille-glyphe);
  z-index: var(--plan-particules);
  animation: heart-explosion var(--duree-explosion) ease-out forwards;
}

@keyframes heart-explosion {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--rotate));
  }
}

/* Footer tablette et + */
@media (min-width: 768px) {
  .footer__logo-img {
    max-width: 200px;
  }

  .footer__nav {
    flex-direction: row;
    gap: var(--espace-4);
  }

  .footer__nav-link {
    padding: 0 var(--espace-4);
  }

  .footer__bottom .container {
    flex-direction: row;
    gap: var(--espace-4);
    text-align: left;
  }

  .footer__legal {
    flex-direction: row;
    gap: var(--espace-4);
  }
}

/* === MODALES === */

.modal-container {
  position: fixed;
  inset: 0;
  background-color: var(--voile-fort);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--plan-modale);
  padding: var(--espace-3);
}

.modal-container[hidden] {
  display: none;
}

.modal__content {
  background-color: var(--surface-page);
  max-width: var(--largeur-modale);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--espace-6);
  position: relative;
  box-shadow: var(--ombre-modale);
}

@media (max-width: 767px) {
  .modal__content {
    padding: var(--espace-4);
  }
}

.modal__close {
  position: absolute;
  top: var(--espace-3);
  right: var(--espace-3);
  width: 3rem;
  height: 3rem;
  background-color: var(--surface-appuyee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--taille-glyphe);
  cursor: pointer;
}

.modal__close:hover,
.modal__close:focus {
  background-color: var(--marque);
  color: var(--sur-action);
}

.modal__content h2 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-secondaire);
  font-weight: var(--graisse-titre);
  color: var(--marque);
  margin-bottom: var(--espace-5);
}

.modal__content h3 {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre);
  color: var(--marque);
  margin-top: var(--espace-5);
  margin-bottom: var(--espace-3);
}

.modal__content p {
  font-family: var(--police-corps);
  line-height: var(--interligne-lecture);
  margin-bottom: var(--espace-3);
  color: var(--texte-attenue);
}

/* Bloc d'alerte dans les modales (document en cours de rédaction, etc.) */
.modal__alert {
  padding: var(--espace-5);
  background-color: var(--mise-en-avant-fond);
  border-left: var(--trait-alerte) solid var(--signal);
  margin: var(--espace-3) 0;
}

.modal__content ul,
.modal__content ol {
  margin-left: var(--espace-5);
  margin-bottom: var(--espace-3);
  list-style: disc;
}

.modal__content li {
  line-height: var(--interligne-lecture);
  margin-bottom: var(--espace-2);
}

/* === RESTAURANT INFO SECTION === */

.restaurant-info__container {
  display: grid;
  grid-template-columns: 1fr;
}

/* Mobile/Tablette : pas de gap, espacement géré par padding sur l'image */
@media (max-width: 1023px) {
  .restaurant-info__container {
    gap: 0;
  }
}

/* Desktop : gap 3xl entre colonnes */
@media (min-width: 1024px) {
  .restaurant-info__container {
    grid-template-columns: 1fr 1.3fr;
    gap: var(--espace-7);
    align-items: stretch;
  }
}

.restaurant-info__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Mobile/Tablette : déballer les enfants pour réorganiser */
@media (max-width: 1023px) {
  .restaurant-info__left {
    display: contents; /* Permet de réorganiser titre et image */
  }

  /* Titre en premier */
  .restaurant-info__left .section__title {
    order: 1;
  }

  /* Textes et grid d'infos après l'image */
  .restaurant-info__left .section__text,
  .restaurant-info__left .restaurant-info__grid {
    order: 3;
  }
}

/* Desktop : texte à gauche (order 2 = à droite en grid) */
@media (min-width: 1024px) {
  .restaurant-info__left {
    order: 2;
  }
}

.restaurant-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
}

@media (min-width: 768px) {
  .restaurant-info__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--espace-6);
  }

  /* Adresse : colonne 1, rangée 1 */
  .restaurant-info__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  /* Réservations : colonne 1, rangée 2 */
  .restaurant-info__item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  /* Horaires : colonne 2, occupe les 2 rangées */
  .restaurant-info__item:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

.restaurant-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.restaurant-info__subtitle {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre);
  color: var(--texte);
}

.restaurant-info__text {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte-attenue);
  line-height: var(--interligne-lecture);
}

.restaurant-info__text a {
  color: var(--marque);
  text-decoration: none;
  transition: color var(--transition-etat);
}

.restaurant-info__text a:hover {
  color: var(--marque-survol);
}

.restaurant-info__hours {
  margin: 0;
  padding: 0;
}

.restaurant-info__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-3);
  padding: var(--espace-1) 0;
  border-bottom: 1px solid var(--bordure);
  font-size: var(--taille-corps);
  color: var(--texte-attenue);
}

.restaurant-info__hours-row:last-child {
  border-bottom: none;
}

.restaurant-info__hours-row dt {
  font-weight: var(--graisse-libelle);
}

.restaurant-info__hours-row dd {
  margin: 0;
  text-align: right;
}

.restaurant-info__hours-closed {
  color: var(--texte-attenue);
  font-style: italic;
}

.restaurant-info__note {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  margin-bottom: var(--espace-3);
  padding: var(--espace-2) var(--espace-3);
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  color: var(--texte-attenue);
  background-color: var(--surface-douce);
  border-left: var(--filet-encart) solid var(--filet-doux);
  line-height: var(--interligne-corps);
}

.restaurant-info__note-icon {
  flex-shrink: 0;
  margin-top: var(--cale-optique);
  color: var(--marque);
}

.restaurant-info__note a {
  color: var(--marque);
  text-decoration: underline;
  font-weight: var(--graisse-libelle);
  transition: color var(--transition-etat);
}

.restaurant-info__note a:hover {
  color: var(--marque-survol);
}

.restaurant-info__right {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Mobile/Tablette : image sous le titre (order 2), avec espacement en bas */
@media (max-width: 1023px) {
  .restaurant-info__right {
    order: 2;
    margin-bottom: var(--espace-6);
    display: block; /* Retire flexbox pour que l'image remplisse la div */
  }
}

/* Desktop : image à droite, hauteur dynamique par JS */
@media (min-width: 1024px) {
  .restaurant-info__right {
    order: 1;
    display: block; /* Retire flexbox sur desktop pour permettre au JS de gérer la hauteur */
  }
}

/* Carte Google Maps doit prendre toute la hauteur du container */
.restaurant-info__map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ========================================
   REVIEWS SECTION
   ======================================== */

.reviews {
  background: var(--surface-page);
  padding: var(--espace-6) 0 var(--espace-7);
  position: relative;
}

.reviews .container {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .reviews {
    padding: var(--espace-7) 0 var(--espace-7);
  }
}

/* Wrapper pleine largeur pour les gradients */
.reviews__wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

/* Gradient gauche - invisible par défaut, visible quand on peut scroller vers la gauche */
.reviews__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, var(--surface-page), transparent);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transition-etat);
}

/* Gradient gauche visible quand on a scrollé vers la droite */
.reviews.has-scroll-left .reviews__wrapper::before {
  opacity: 1;
}

/* Gradient droite - visible par défaut, invisible en fin de scroll */
.reviews__wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to left, var(--surface-page), transparent);
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity var(--transition-etat);
}

/* Gradient droite invisible quand on est en fin de scroll */
.reviews.scroll-end .reviews__wrapper::after {
  opacity: 0;
}

.reviews .section__title,
.reviews .section__intro,
.reviews #reviews-stats,
.reviews .reviews-actions {
  padding-left: var(--espace-5);
  padding-right: var(--espace-5);
}

/* ===== Reviews Stats (dans la card) ===== */

.reviews-stats__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-2);
}

.reviews-stats__number {
  font-family: var(--police-corps);
  font-size: var(--taille-chiffre);
  font-weight: var(--graisse-titre);
  color: var(--marque);
}

.reviews-stats__stars {
  display: flex;
  gap: var(--cale-optique);
}

.reviews-stats__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
}

.reviews-stats__total {
  font-family: var(--police-corps);
  font-size: var(--taille-sous-chiffre);
  font-weight: var(--graisse-titre);
  color: var(--marque);
}

.reviews-stats__label {
  font-family: var(--police-corps);
  font-size: var(--taille-legende);
  color: var(--marque);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ===== Reviews Grid (Horizontal Scroll) ===== */

.reviews-grid {
  display: flex;
  gap: var(--espace-4);
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--espace-3);
  /* Cacher la scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Scroll snap - cale sur chaque carte */
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--espace-5), calc((100vw - var(--largeur-contenu)) / 2 + var(--espace-5)));
}

/* Cacher la scrollbar pour navigateurs webkit */
.reviews-grid::-webkit-scrollbar {
  display: none;
}

/* ===== Review Card - Hérite des styles de base de .card ===== */

.review-card {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  padding: var(--espace-4);
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  min-width: 300px;
  max-width: 350px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Carte des statistiques, en mise en avant */
.review-card--stats {
  background-color: var(--mise-en-avant-fond);
  border-color: var(--mise-en-avant-contour);
  color: var(--signal);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.review-card--stats .reviews-stats__number,
.review-card--stats .reviews-stats__total {
  color: var(--signal);
}

.review-card--stats .reviews-stats__label {
  color: var(--signal);
}

/* Espace à gauche de la première card - s'aligne avec le container sur tous les écrans */
.review-card:first-child {
  margin-left: max(var(--espace-5), calc((100vw - var(--largeur-contenu)) / 2 + var(--espace-5)));
}

/* Espace à droite de la dernière card - s'aligne avec le container sur tous les écrans */
.review-card:last-child {
  margin-right: max(var(--espace-5), calc((100vw - var(--largeur-contenu)) / 2 + var(--espace-5)));
}

@media (min-width: 768px) {
  .review-card {
    min-width: 350px;
    max-width: 400px;
  }
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espace-3);
}

.review-card__user {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  flex: 1;
}

.review-card__avatar {
  width: var(--icone-avatar);
  height: var(--icone-avatar);
  background-color: var(--surface-pastille);
  color: var(--sur-pastille);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-corps);
  font-size: var(--taille-accent);
  font-weight: var(--graisse-titre);
  flex-shrink: 0;
}

.review-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-1);
  min-width: 0;
}

.review-card__name {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  font-weight: var(--graisse-titre);
  color: var(--marque);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.review-card__date {
  font-family: var(--police-corps);
  font-size: var(--taille-legende);
  color: var(--marque);
  margin: 0;
  line-height: normal;
  text-align: left;
}

.review-card__rating {
  display: flex;
  gap: var(--cale-optique);
  align-items: center;
  flex-shrink: 0;
}

.star {
  font-size: var(--taille-corps);
  line-height: 1;
}

.star--full {
  color: var(--signal);
}

.star--empty {
  color: var(--bordure);
}

.review-card__content {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--marque);
  line-height: var(--interligne-corps);
  text-align: left;
}

.review-card__content p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__content--expanded p {
  -webkit-line-clamp: unset;
  display: block;
}

.review-card__toggle {
  background: none;
  border: none;
  color: var(--marque);
  font-family: var(--police-corps);
  font-size: var(--taille-legende);
  font-weight: var(--graisse-titre);
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--espace-1) 0;
  margin-top: var(--espace-2);
  text-decoration: underline;
}

.review-card__toggle:hover {
  color: var(--marque-survol);
}

@media (min-width: 1024px) {
  .review-card {
    padding: var(--espace-5);
  }
}

/* ===== Reviews Actions (Buttons) ===== */

.reviews-actions {
  text-align: center;
  margin-top: var(--espace-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--espace-3);
}

.reviews-actions .btn {
  width: 100%;
  max-width: 300px;
}

@media (min-width: 768px) {
  .reviews-actions {
    flex-direction: row;
  }

  .reviews-actions .btn {
    width: auto;
    min-width: 240px;
  }
}

/* ===== Reviews Loading ===== */

.reviews-loading {
  text-align: center;
  padding: 0;
}

.reviews-loading__text {
  font-size: var(--taille-accent);
  color: var(--texte-attenue);
  font-style: italic;
}

/* ===== Reviews Error ===== */

.reviews-error {
  text-align: center;
  padding: var(--espace-7);
  background-color: var(--mise-en-avant-fond);
  border: 1px solid var(--mise-en-avant-contour);
}

.reviews-error p {
  color: var(--signal);
  font-size: var(--taille-corps);
  margin: 0;
}

/* ==========================================================================
   COOKIE CONSENT BANNER - Gestion RGPD
   ========================================================================== */

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface);
  border-top: 1px solid var(--bordure);
  box-shadow: var(--ombre-flottante);
  padding: var(--espace-4);
  transform: translateY(100%);
  transition: transform var(--transition-etat);
  z-index: var(--plan-bandeau); /* En dessous des modales (1050) */
}

.cookie-consent--visible {
  transform: translateY(0);
}

.cookie-consent__container {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.cookie-consent__title {
  font-family: var(--police-corps);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titre);
  color: var(--texte);
  margin: 0;
}

.cookie-consent__text {
  font-size: var(--taille-corps);
  color: var(--texte);
  line-height: var(--interligne-corps);
  margin: 0;
}

.cookie-consent__link {
  color: var(--marque);
  text-decoration: underline;
}

.cookie-consent__link:hover {
  color: var(--marque-survol);
}

.cookie-consent__actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

/* Responsive */
@media (min-width: 768px) {
  .cookie-consent {
    padding: var(--espace-5);
  }

  .cookie-consent__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-consent__content {
    flex: 1;
  }

  .cookie-consent__actions {
    flex-direction: row;
    gap: var(--espace-3);
  }
}

/* === ACCESSIBILITÉ : RÉDUCTION DES ANIMATIONS === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   PHONE NOTICE - Encarts réservations par téléphone
   ============================================ */

.phone-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  margin-bottom: var(--espace-4);
  padding: var(--espace-2) var(--espace-3);
  font-family: var(--police-corps);
  font-size: var(--taille-note);
  color: var(--signal);
  background-color: var(--mise-en-avant-fond);
  border-left: var(--filet-encart) solid var(--mise-en-avant-contour);
  line-height: var(--interligne-corps);
}

.phone-notice strong {
  color: var(--signal);
}

.phone-notice__icon {
  flex-shrink: 0;
  margin-top: var(--cale-optique);
  color: var(--signal);
}

.phone-notice a {
  color: var(--signal);
  text-decoration: underline;
  font-weight: var(--graisse-libelle);
  transition: color var(--transition-etat);
  white-space: nowrap;
}

.phone-notice a:hover {
  color: var(--signal-survol);
}

.field-warning {
  margin-top: var(--espace-1);
  font-size: var(--taille-note);
  color: var(--signal);
}

/* ==========================================================================
   PAGE CARTE (/carte, /en/carte) : page publique, connexion, mode édition.
   Servie par carte.php, voir ADR 0023. Une colonne centrée à la
   largeur de lecture, sur téléphone comme sur ordinateur.
   ========================================================================== */

.carte-page {
  background-color: var(--surface);
  padding-bottom: calc(var(--espace-7) * 2);
}

.carte-entete {
  background-color: var(--surface);
  border-bottom: var(--trait-bordure) solid var(--bordure);
}

.carte-entete__interieur {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: var(--espace-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}

.carte-entete__langues {
  display: flex;
  gap: var(--espace-1);
}

.carte-entete__langue {
  min-width: var(--cible-tactile-confort);
  min-height: var(--cible-tactile-confort);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--trait-bordure) solid var(--marque);
  color: var(--marque);
  font-weight: var(--graisse-libelle);
  text-decoration: none;
}

.carte-entete__langue--active {
  background-color: var(--marque);
  color: var(--sur-marque);
}

/* --- Le début de page : le titre sur le fond crème, la rose en filigrane
   derrière lui, comme dans la carte du hero de l'accueil (la rose est peinte
   pour ce fond, --surface). --- */

.carte-tete {
  position: relative;
  max-width: var(--largeur-lecture);
  margin: var(--espace-5) auto;
  padding: var(--espace-6) var(--espace-3) var(--espace-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-2);
  text-align: center;
}

.carte-tete__titre {
  margin: 0;
  font-family: var(--police-affiche);
  font-weight: var(--graisse-manuscrite);
  font-size: var(--taille-titre-page);       /* les tailles du titre du hero */
  line-height: var(--ligne-serree);
  letter-spacing: var(--approche-affiche);
  color: var(--marque);
}

@media (max-width: 767px) {
  .carte-tete__titre {
    font-size: var(--taille-titre-page-mobile);
  }
}

.carte-tete__statut {
  margin: 0;
  font-size: var(--taille-accent);
  line-height: var(--interligne-chapo);
  color: var(--texte);
}

.carte-tete__lien {
  font-size: var(--taille-note);
  color: var(--marque);
}

.carte-bandeau {
  max-width: var(--largeur-lecture);
  margin: var(--espace-3) auto 0;
  padding: var(--espace-3);
  background-color: var(--mise-en-avant-fond);
  border-left: var(--filet-encart) solid var(--signal);
  font-weight: var(--graisse-libelle);
}

/* --- Ancres : une ligne qui défile et reste en haut pendant la lecture --- */

.carte-ancres {
  position: sticky;
  top: 0;
  z-index: var(--plan-ancres);
  display: flex;
  justify-content: center;
  gap: var(--espace-2);
  overflow-x: auto;
  padding: var(--espace-2) var(--espace-3);
  background-color: var(--surface);
}

/* Une ancre amène son titre juste sous la barre, et non sous l'en-tête fixe
   de l'accueil, que la règle générale de html prévoit. */
html:has(.carte-page) {
  scroll-padding-top: calc(var(--cible-tactile-confort) + var(--espace-5));
}

@media (max-width: 767px) {
  .carte-ancres {
    justify-content: flex-start;
  }
}

.carte-ancres__lien {
  flex: none;
}

/* La rubrique en cours, que js/carte-ancres.js marque en lisant la page :
   le style plein, comme la case de langue active de l'en-tête. */
.carte-ancres__lien[aria-current="location"] {
  background-color: var(--marque);
  border-color: var(--marque);
  color: var(--sur-marque);
}

/* --- Le contenu : une feuille posée sur le fond crème, comme une carte
   imprimée. --- */

.carte {
  max-width: var(--largeur-lecture);
  margin: var(--espace-5) auto 0;
  padding: var(--espace-6) var(--espace-5);
  background-color: var(--surface-page);
  border: var(--trait-bordure) solid var(--bordure);
  color: var(--texte);
  line-height: var(--interligne-corps);
}

@media (max-width: 767px) {
  .carte {
    margin-left: var(--espace-3);
    margin-right: var(--espace-3);
    padding: var(--espace-5) var(--espace-3);
  }
}

/* Une règle d'affichage d'un bloc ne doit pas l'emporter sur l'attribut
   hidden, que le mode édition pose pour cacher la page publique : son
   contenu, et ce qui l'annonce hors du bloc principal (titre, bandeau,
   ancres), que la première règle n'atteint pas. Le banc du script d'édition
   lit cette règle pour chaque élément caché. */
.carte [hidden],
.carte-tete[hidden],
.carte-bandeau[hidden],
.carte-ancres[hidden] {
  display: none;
}

.carte__titre {
  margin-bottom: var(--espace-2);
}

.carte__intertitre {
  margin: 0 0 var(--espace-3);
  font-size: var(--taille-titre-secondaire);
  font-weight: var(--graisse-titre);
  line-height: var(--interligne-titre);
  color: var(--marque);
}

/* La formule dans un double cadre, comme une carte imprimée : un double
   filet de marque, puis un filet doux. */
.carte-formule {
  margin: 0 0 var(--espace-6);
  text-align: center;
}

.carte-formule__titre,
.carte-rubrique__titre {
  margin: 0;
  font-family: var(--police-manuscrite);
  font-weight: var(--graisse-manuscrite);
  line-height: var(--ligne-serree);
  color: var(--marque);
}

.carte-formule__titre {
  font-size: var(--taille-titre-principal);
}

.carte-formule--retour .cadre-double__interieur {
  padding: var(--espace-4) var(--espace-3);
}

.carte-formule__retour {
  margin: var(--espace-2) 0 var(--espace-1);
  font-size: var(--taille-accent);
  font-weight: var(--graisse-libelle);
  line-height: var(--interligne-chapo);
  color: var(--texte);
}

.carte-formule--retour .carte-formule__jours {
  margin-bottom: 0;
}

.carte-formule__jours {
  margin: var(--espace-1) 0 var(--espace-3);
  font-size: var(--taille-legende);
  color: var(--texte-attenue);
}

.carte-formule__plat {
  padding: var(--espace-3) 0;
}

.carte-formule__libelle {
  margin: 0 0 var(--espace-1);
  font-family: var(--police-manuscrite);
  font-size: var(--taille-titre-secondaire);
  color: var(--marque);
}

.carte-formule__texte {
  margin: 0;
  font-size: var(--taille-accent);
  line-height: var(--interligne-lecture);
}

.carte-formule__paliers {
  list-style: none;
  margin: var(--espace-2) 0 0;
  padding: var(--espace-4) 0 0;
  border-top: var(--trait-bordure) solid var(--filet-doux);
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

/* Un palier par ligne, son libellé puis son prix : « Entrée + plat + dessert
   30 € », comme sur l'ardoise. */
.carte-formule__palier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: var(--espace-3);
}

.carte-formule__palier .prix {
  font-size: var(--taille-titre-secondaire);
  line-height: var(--ligne-serree);
}

.carte-formule__palier-libelle {
  color: var(--texte);
}

.carte-formule__palier-note {
  flex-basis: 100%;
  font-size: var(--taille-legende);
  color: var(--texte-attenue);
}

.carte-formule__precisions {
  margin: var(--espace-4) 0 0;
  font-size: var(--taille-note);
  color: var(--texte-attenue);
}

/* La carte, centrée comme une carte imprimée. */
.carte-liste {
  margin: 0 0 var(--espace-6);
  text-align: center;
}

.carte-liste__titre {
  margin-bottom: var(--espace-1);
}

.carte-liste__intro,
.carte-liste__vide {
  margin: 0;
}

.carte-rubrique {
  margin-top: var(--espace-6);
}

.carte-rubrique__titre {
  margin-bottom: var(--espace-4);
  font-size: var(--taille-titre-secondaire);
}

.carte-rubrique__prix {
  display: block;
  margin: calc(-1 * var(--espace-3)) 0 var(--espace-4);
}

.carte-rubrique__plat {
  margin-bottom: var(--espace-4);
}

.carte-rubrique__nom {
  margin: 0;
  font-weight: var(--graisse-titre);
}

.carte-rubrique__description {
  margin: var(--espace-1) 0 0;
  font-size: var(--taille-note);
  line-height: var(--interligne-lecture);
  color: var(--texte-attenue);
}

.carte-rubrique__prix-plat {
  display: block;
  margin: var(--espace-1) 0 0;
}

.carte-reserver {
  margin: 0;
  padding: var(--espace-4) var(--espace-3);
  background-color: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-3);
  text-align: center;
}

.carte-reserver__titre {
  margin: 0;
  font-family: var(--police-manuscrite);
  font-size: var(--taille-titre-secondaire);
  color: var(--marque);
}

.carte-liste__avertissement {
  margin: var(--espace-5) 0 0;
  font-size: var(--taille-legende);
  color: var(--texte-attenue);
}

.carte__retour {
  margin: 0 0 var(--espace-3);
}

.carte__retour a {
  color: var(--marque);
}

/* --- Connexion --- */

.carte-connexion {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin-bottom: var(--espace-5);
}

.carte-connexion__champ,
.carte-edition__champ {
  display: flex;
  flex-direction: column;
}

.carte-connexion__erreur {
  margin: 0 0 var(--espace-3);
  padding: var(--espace-3);
  background-color: var(--mise-en-avant-fond);
  border-left: var(--filet-encart) solid var(--signal);
}

/* --- Barre du bas et messages, pour le personnel connecté --- */

.carte-barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--plan-barre-edition);
  padding: var(--espace-2) var(--espace-3);
  background-color: var(--surface);
  border-top: var(--trait-bordure) solid var(--bordure);
  box-shadow: var(--ombre-flottante);
}

.carte-barre__interieur {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}

.carte-barre__principal {
  flex: 1 1 auto;
}

.carte-barre__interieur .btn {
  min-height: var(--cible-tactile-confort);
}

.carte-barre__statut {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--taille-note);
  color: var(--texte-attenue);
}

.carte-message {
  position: fixed;
  left: var(--espace-3);
  right: var(--espace-3);
  bottom: calc(var(--cible-tactile-confort) + var(--espace-6));
  z-index: var(--plan-message);
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  min-height: var(--cible-tactile-confort);
  padding: var(--espace-2) var(--espace-3);
  background-color: var(--texte);
  color: var(--surface-page);
  box-shadow: var(--ombre-flottante);
}

.carte-message__annuler {
  min-height: var(--cible-tactile-confort);
  padding: 0 var(--espace-3);
  background: none;
  border: var(--trait-bordure) solid var(--surface-page);
  color: var(--surface-page);
  font: inherit;
  font-weight: var(--graisse-bouton);
  cursor: pointer;
}

/* --- Mode édition --- */

.carte-edition__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin: 0 0 var(--espace-6);
}

.carte-edition__bloc > .carte__intertitre {
  margin-bottom: 0;
}

.carte-edition__aide {
  margin: 0;
  font-size: var(--taille-note);
  color: var(--texte-attenue);
}

.carte-edition__alerte,
.carte-edition__erreurs {
  margin: 0;
  padding: var(--espace-3);
  background-color: var(--mise-en-avant-fond);
  border-left: var(--filet-encart) solid var(--signal);
}

.carte-edition__erreurs {
  margin-bottom: var(--espace-5);
}

.carte-edition__erreurs-liste {
  margin: var(--espace-2) 0 0;
  padding-left: var(--espace-4);
}

.carte-edition__entete,
.carte-edition__rangee,
.carte-edition__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
}

.carte-edition__entete {
  justify-content: space-between;
}

.carte-edition__actions {
  justify-content: flex-end;
}

.carte-edition__rangee > .contact__input,
.carte-edition__rangee > .carte-edition__champ {
  flex: 1 1 0;
  min-width: 0;
}

.carte-edition__rangee > .carte-edition__prix {
  flex: 0 0 var(--espace-7);
}

.carte-edition__prix {
  text-align: right;
}

.carte-edition__compteur,
.carte-edition__service {
  font-size: var(--taille-legende);
  color: var(--texte-attenue);
}

.carte-edition__service {
  flex: 0 0 var(--cible-tactile-confort);
}

.carte-edition__ligne,
.carte-edition__jour {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-2);
  background-color: var(--surface);
  border: var(--trait-bordure) solid var(--bordure);
}

.carte-edition__jour > .carte-edition__rangee:first-child {
  justify-content: space-between;
}

.carte-edition__nom-jour {
  font-weight: var(--graisse-libelle);
}

.carte-edition__icone,
.carte-edition__supprimer,
.carte-edition__bascule {
  min-width: var(--cible-tactile-confort);
  min-height: var(--cible-tactile-confort);
  padding: 0 var(--espace-2);
  background-color: var(--surface-page);
  border: var(--trait-bordure) solid var(--bordure);
  color: var(--marque);
  font: inherit;
  cursor: pointer;
}

.carte-edition__icone:disabled {
  color: var(--texte-attenue);
  cursor: default;
}

.carte-edition__supprimer {
  color: var(--signal);
}

.carte-edition__bascule {
  min-width: calc(var(--espace-7) + var(--espace-3));
  color: var(--texte-attenue);
}

.carte-edition__bascule--ouvert {
  background-color: var(--marque);
  border-color: var(--marque);
  color: var(--sur-marque);
}

.carte-edition__lien {
  align-self: flex-start;
  min-height: var(--cible-tactile-confort);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--marque);
  text-decoration: underline;
  cursor: pointer;
}

.carte-edition__replie {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3);
  background-color: var(--surface-douce);
}

.carte-edition__replie > summary {
  min-height: var(--cible-tactile-confort);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  list-style: none;
  color: var(--marque);
  cursor: pointer;
}

/* Le triangle natif disparaît avec display: flex ; un chevron dit qu'on peut
   déplier, et se retourne une fois ouvert. */
.carte-edition__replie > summary::-webkit-details-marker {
  display: none;
}

.carte-edition__replie > summary::after {
  content: '';
  flex: none;
  width: var(--espace-2);
  height: var(--espace-2);
  margin-right: var(--espace-1);
  border-right: var(--trait-appui) solid currentColor;
  border-bottom: var(--trait-appui) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-etat);
}

.carte-edition__replie[open] > summary::after {
  transform: rotate(-135deg);
}

.carte-edition__fermeture {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3);
  background-color: var(--surface-douce);
}

.carte-edition__rubrique {
  margin: var(--espace-4) 0 var(--espace-1);
  font-size: var(--taille-legende);
  font-weight: var(--graisse-titre);
  color: var(--texte-attenue);
}