/* ============================================================
   LE CONTACT EN CALQUE
   13/11/2026
   ------------------------------------------------------------
   Deux formes pour un seul contenu :

     téléphone   une feuille qui monte du bas, le pouce y est déjà ;
     ordinateur  un calque centré.

   Pourquoi pas la feuille du bas partout : sur 1440 de large, une feuille
   qui monte du bas est un geste de téléphone transplanté. Le site est
   centré et éditorial, le calque reprend donc le vocabulaire des bandes
   claires, panneau crème et coordonnées en grand sur encre.

   Le panneau est un <dialog> natif : Échap, le piège à focus, le retour du
   focus au déclencheur et le voile viennent du navigateur.
   ============================================================ */

.calque-contact {
  /* on efface la mise en forme par défaut de <dialog> */
  margin: 0;
  padding: 0;
  border: 0;
  max-inline-size: none;
  max-block-size: none;
  inline-size: 100%;
  block-size: 100%;
  background: transparent;
  overflow: hidden;
}

.calque-contact::backdrop {
  background: rgba(9, 11, 12, 0.72);
  opacity: 0;
  transition: opacity 0.4s var(--ease, ease);
}

.calque-contact.est-visible::backdrop { opacity: 1; }

/* Le panneau. La couleur est celle des bandes claires de l'accueil, on
   n'en introduit aucune nouvelle. */
.calque-panneau {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #f0eadf;
  color: #08090a;
  transition: transform 0.42s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.calque-corps { padding: clamp(1.8rem, 4.5vw, 2.8rem); }

/* Le contenu reçoit le focus à l'ouverture : il ne doit pas dessiner de
   cadre, ce n'est pas une commande. Les liens et la croix gardent le leur. */
.calque-corps:focus { outline: none; }

/* La poignée du haut, sur téléphone. Elle dit que la feuille se tire, et
   donne au pouce une cible avant même de lire. */
.calque-poignee {
  flex: 0 0 auto;
  inline-size: 2.5rem;
  block-size: 4px;
  margin: 0.9rem auto 0;
  border-radius: 999px;
  background: rgba(8, 9, 10, 0.18);
}

.calque-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f5733;
}

.calque-titre {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Les coordonnées en lignes pleine largeur : sur téléphone, toute la ligne
   est touchable, pas seulement le texte. Un filet les sépare, c'est le même
   geste que les listes du site. */
.calque-coords {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid rgba(8, 9, 10, 0.14);
}

.calque-coords li { border-block-end: 1px solid rgba(8, 9, 10, 0.14); }

.calque-coords a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding-block: clamp(0.85rem, 2.2vw, 1.1rem);
  color: #08090a;
  text-decoration: none;
  transition: color 0.3s var(--ease, ease);
}

.calque-coords .etiquette {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 9, 10, 0.45);
}

/* La valeur passe à la ligne ENTIÈRE quand elle ne tient pas à côté de son
   étiquette, au lieu d'être coupée au milieu. Mesure du 13/11 : l'adresse
   email sortait en « danigo.hospitality@gmail.co / m ». flex-wrap sur la
   ligne et min-inline-size: 0 sur la valeur suffisent, aucune césure. */
.calque-coords .valeur {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  letter-spacing: -0.02em;
  text-align: right;
}

@media (hover: hover) {
  .calque-coords a:hover { color: #6f5733; }
}

.calque-coords a:focus-visible {
  outline: 2px solid #6f5733;
  outline-offset: 2px;
}

.calque-zone {
  margin: clamp(1.2rem, 2.6vw, 1.6rem) 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(8, 9, 10, 0.6);
  max-inline-size: 36ch;
}

/* La croix. 44px de côté : c'est la seule commande du calque, elle doit se
   toucher sans viser. */
.calque-fermer {
  position: absolute;
  inset-block-start: clamp(0.6rem, 2vw, 1.1rem);
  inset-inline-end: clamp(0.6rem, 2vw, 1.1rem);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(8, 9, 10, 0.5);
  cursor: pointer;
  transition: color 0.3s var(--ease, ease);
}

@media (hover: hover) {
  .calque-fermer:hover { color: #08090a; }
}

.calque-fermer:focus-visible {
  outline: 2px solid #6f5733;
  outline-offset: 2px;
}

/* --- Téléphone : la feuille monte du bas ------------------------------- */
@media (max-width: 768px) {
  .calque-panneau {
    inset: auto 0 0 0;
    border-start-start-radius: 1.4rem;
    border-start-end-radius: 1.4rem;
    transform: translateY(100%);
  }

  .calque-corps {
    padding-block-end: max(1.8rem, env(safe-area-inset-bottom, 0px) + 1.2rem);
  }

  .calque-contact.est-visible .calque-panneau { transform: translateY(0); }

  /* La photo ne monte pas sur téléphone : la feuille doit rester courte,
     le pouce est en bas et les coordonnées sont ce qu'on vient chercher. */
  .calque-photo { display: none; }
}

/* --- Ordinateur : un calque centré ------------------------------------- */
@media (min-width: 769px) {
  .calque-panneau {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: min(48rem, calc(100vw - 5rem));
    flex-direction: row;
    border-radius: 0.5rem;
    overflow: hidden;
    /* la translation de centrage est portée par la même propriété que
       l'animation, elles doivent donc cohabiter dans une seule valeur */
    transform: translate(-50%, calc(-50% + 1.2rem));
    opacity: 0;
    transition: transform 0.42s var(--ease, ease), opacity 0.32s var(--ease, ease);
  }

  .calque-contact.est-visible .calque-panneau {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  /* La poignée est un geste de téléphone, elle n'a rien à faire ici. */
  .calque-poignee { display: none; }

  /* Deux colonnes : la photo porte le calque, sans quoi il reste une boîte
     de texte comme on en voit partout. 42% et non la moitié, le contenu
     doit rester le sujet. */
  .calque-photo {
    flex: 0 0 42%;
    margin: 0;
    overflow: hidden;
  }

  .calque-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .calque-corps { flex: 1 1 auto; align-self: center; }
}

/* --- Le bouton fixe du téléphone ---------------------------------------
   Son habillage vit dans boutons.css, où il a rejoint la famille le 13/11 :
   c'est le MÊME bouton que « Prendre contact » de l'entête, même typo, même
   tiret, même aplat, même rayon. Ici ne restent que sa place et son
   apparition, qui n'appartiennent qu'à lui. */
.contact-flottant {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom, 0));
  inset-inline-start: 50%;
  z-index: 180;
  display: none;
  cursor: pointer;
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.45);
  /* le centrage et l'animation passent par la même propriété, ils doivent
     donc cohabiter dans une seule valeur */
  transform: translate(-50%, 1.2rem);
  opacity: 0;
  transition: opacity 0.35s var(--ease, ease), transform 0.35s var(--ease, ease);
}

@media (max-width: 768px) {
  .contact-flottant { display: inline-flex; }
  .contact-flottant.est-visible { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Le fond ne défile plus sous le calque ouvert ----------------------
   PAS d'overflow: hidden sur <html>. Deux raisons mesurées le 13/11 :

     - masquer la barre de défilement élargit la page de sa largeur, et tout
       le contenu saute horizontalement à l'ouverture. Le panneau de test
       n'a pas de barre, 0px mesuré, ce qui masquait le défaut ;
     - sur iOS, overflow: hidden sur la racine ne verrouille pas de façon
       fiable et la page saute.

   À la place, le corps est figé à sa position courante, et la position est
   rendue à la fermeture. C'est calque-contact.js qui pose le décalage. */
html.calque-ouvert body {
  position: fixed;
  inset-inline: 0;
  inline-size: 100%;
  /* la largeur que la barre occupait est rendue par du rembourrage, mesurée
     en JavaScript à l'ouverture. Sans elle, le contenu s'élargit et saute. */
  padding-inline-end: var(--compensation-barre, 0px);
}

/* Mouvement réduit : on garde l'apparition, on retire le glissement. */
@media (prefers-reduced-motion: reduce) {
  .calque-panneau,
  .contact-flottant,
  .calque-contact::backdrop { transition-duration: 0.01ms; }

  @media (max-width: 768px) {
    .calque-panneau { transform: none; }
  }
}