/* ─────────────────────────────────────────────────────────
   Émotivance · Design system — Coque
   En-tête et pied de page, communs aux 9 surfaces publiques.

   Le préfixe `em-` date de la migration : cette feuille a été
   posée sur les neuf surfaces alors que leur corps vivait encore
   dans l'ancienne DA, et aucune classe ne devait entrer en
   collision. La cohabitation a pris fin en phase 6 — plus aucune
   page ne charge `styles.css` — mais le préfixe est conservé :
   il distingue toujours la coque du corps des pages.

   Seule variable posée sur `:root` : `--header-h`, écrite par
   shell.js et lue par les ancres de toutes les pages.
   ───────────────────────────────────────────────────────── */


/* ═══ Tokens de la coque ══════════════════════════════ */

.em-header,
.em-footer {
  /* La coque dupliquait la palette en dur tant qu'elle devait
     cohabiter avec l'ancienne feuille sans lui emprunter `:root`.
     Cette cohabitation a pris fin : les tokens locaux ne sont plus
     que des alias des tokens globaux. Une seule source de vérité —
     changer la palette dans tokens.css suffit désormais. */
  --em-p1: var(--primary-1);
  --em-p2: var(--primary-2);
  --em-p3: var(--primary-3);
  --em-p4: var(--primary-4);
  --em-p5: var(--primary-5);
  --em-white: var(--white);
  --em-accent-text: var(--accent-text);
  --em-ornament: var(--ornament);

  --em-heading: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --em-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --em-line: var(--line-gold);
  --em-line-soft: var(--line-gold-soft);
  --em-shadow: var(--shadow);
  --em-shadow-lg: var(--shadow-lg);

  --em-r-sm: 8px;
  --em-r-lg: 16px;
  --em-r-xl: 24px;
  --em-r-2xl: 32px;
  --em-r-pill: 999px;

  --em-gutter: clamp(15px, 1rem + 1vw, 30px);
  /* Le coin inversé occupe exactement la gouttière : plus large, il
     déborderait de la fenêtre aux largeurs où la gouttière rétrécit. */
  --em-cut: var(--em-gutter);
  --em-dur: 300ms;
  --em-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--em-body);
  line-height: 1.6;
  color: var(--em-p2);
}

.em-container {
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding-inline: var(--em-gutter);
}

/* Bouton de la coque — pilule à pastille rotative. */
.em-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--em-r-pill);
  background: var(--em-p1);
  color: var(--em-white);
  font-family: var(--em-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color var(--em-dur) var(--em-ease),
    color            var(--em-dur) var(--em-ease),
    border-color     var(--em-dur) var(--em-ease);
}
.em-btn:hover {
  background: var(--em-white);
  color: var(--em-accent-text);
  border-color: var(--em-p3);
}
.em-btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--em-r-pill);
  background: var(--em-white);
  color: var(--em-accent-text);
  transition: transform var(--em-dur) var(--em-ease);
}
.em-btn:hover .em-btn__icon { transform: rotate(180deg); }
.em-btn__icon svg { width: 13px; height: 13px; display: block; }

.em-btn--white { background: var(--em-white); color: var(--em-accent-text); }
.em-btn--white:hover { background: var(--em-p1); color: var(--em-white); border-color: transparent; }
.em-btn--white .em-btn__icon { background: var(--em-p5); }

/* ─ L'appel de la barre de navigation ─────────────────
   Aplat bleu nuit, libellé champagne : 5,38:1. C'est le sens imposé
   par la direction artistique — le champagne se pose sur le bleu.
   L'inverse aurait forcé un libellé blanc sur champagne, qui ne
   tient que 2,23:1 et serait illisible sur le bouton le plus vu
   du site. Vaut aussi pour le tiroir mobile, dans le même en-tête. */
.em-header .em-btn {
  background: var(--slab-ink);
  color: var(--on-slab-ink);
}
.em-header .em-btn__icon {
  background: var(--ornament-on-ink);
  color: var(--on-slab-ink);
}
.em-header .em-btn:hover {
  background: var(--em-white);
  color: var(--em-accent-text);
  border-color: var(--em-ornament);
}
.em-header .em-btn:hover .em-btn__icon {
  background: var(--slab-ink);
  color: var(--on-slab-ink);
}


/* ═══ En-tête ═════════════════════════════════════════
   `sticky` et non `fixed` : la barre occupe sa place dans le
   flux, donc aucune page n'a besoin de réserver de padding.
   C'est ce qui permet de la poser sur les gabarits encore
   dans l'ancienne DA sans toucher à leur mise en page.       */

.em-header {
  position: sticky;
  top: 0;
  z-index: 80;
}

.em-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 0 0 var(--em-r-xl) var(--em-r-xl);
  background: var(--em-white);
  transition: box-shadow var(--em-dur) var(--em-ease);
}
.em-header.is-stuck .em-header__bar { box-shadow: var(--em-shadow); }

@media (min-width: 768px) {
  .em-header__bar { padding: 14px 20px; }
}

/* Coins inversés — le blanc se prolonge puis s'incurve.
   Reproduits en gradient : aucune image. */
.em-header__cut {
  position: absolute;
  top: 0;
  display: none;
  width: var(--em-cut);
  height: var(--em-cut);
  pointer-events: none;
}
.em-header__cut--l {
  inset-inline-start: calc(var(--em-cut) * -1);
  background: radial-gradient(
    circle var(--em-cut) at 0 100%,
    transparent 0 var(--em-cut),
    var(--em-white) calc(var(--em-cut) + 0.5px)
  );
}
.em-header__cut--r {
  inset-inline-end: calc(var(--em-cut) * -1);
  background: radial-gradient(
    circle var(--em-cut) at 100% 100%,
    transparent 0 var(--em-cut),
    var(--em-white) calc(var(--em-cut) + 0.5px)
  );
}
@media (min-width: 768px) { .em-header__cut { display: block; } }

.em-header__brand { display: inline-flex; align-items: center; z-index: 1; }
.em-header__brand img { height: 26px; width: auto; display: block; }

@media (min-width: 1024px) {
  .em-header__brand {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.em-nav { display: none; align-items: center; gap: 20px; z-index: 1; }
.em-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--em-p2);
  text-decoration: none;
  transition: color var(--em-dur) var(--em-ease);
}
.em-nav a:hover,
.em-nav a.is-active { color: var(--em-accent-text); }
@media (min-width: 1024px) { .em-nav { display: flex; } }

.em-header__actions { display: flex; align-items: center; gap: 10px; z-index: 1; }
.em-header__cta { display: none; }
@media (min-width: 768px) { .em-header__cta { display: inline-flex; } }

.em-burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--em-r-pill);
  background: var(--em-p3);
  color: var(--em-white);
  cursor: pointer;
  transition: background-color var(--em-dur) var(--em-ease);
}
.em-burger:hover { background: var(--em-p1); }
.em-burger svg { width: 20px; height: 20px; display: block; }
@media (min-width: 1024px) { .em-burger { display: none; } }
@media (pointer: coarse) { .em-burger { width: 44px; height: 44px; } }


/* ═══ Tiroir ══════════════════════════════════════════
   Panneau descendant sous la barre, jamais un plein écran :
   la barre reste visible, donc le repère aussi.

   Le délai asymétrique sur `visibility` est indispensable :
   incluse dans une transition classique, elle reste calculée
   à `hidden` pendant toute l'ouverture, et les liens du
   tiroir refusent alors le focus.                            */

.em-drawer {
  position: fixed;
  inset-inline: var(--em-gutter, 20px);
  top: calc(var(--header-h, 68px) + 8px);
  z-index: 79;
  max-height: calc(100dvh - var(--header-h, 68px) - 24px);
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--em-r-xl, 24px);
  background: #fff;
  box-shadow: var(--em-shadow-lg, 0 24px 60px -30px rgba(99, 59, 44, .45));
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform  300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 300ms;
}
.em-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform  300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.em-drawer__links { display: flex; flex-direction: column; }
.em-drawer__links a {
  padding: 14px 4px;
  border-bottom: 1px solid rgba(152, 106, 62, .08);
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--em-p3);
  text-decoration: none;
}
.em-drawer__links a:last-child { border-bottom: 0; }
.em-drawer__links a.is-active { color: var(--em-accent-text); }
.em-drawer .em-btn { margin-top: 16px; justify-content: center; }

@media (min-width: 1024px) { .em-drawer { display: none; } }

/* Contrat des ancres internes : toute cible d'ancre dégage la
   barre collante. --header-h est posé par shell.js. */
[id] { scroll-margin-top: calc(var(--header-h, 68px) + 16px); }


/* ═══ Pied de page ════════════════════════════════════
   Dalle sable détachée des bords. Le dégradé remplace la
   photographie de fond du kit (budget de 7 visuels).         */

.em-footer {
  position: relative;
  margin-inline: clamp(10px, 1rem + 1.5vw, 50px);
  /* Rythme resserré : le pied de page tient dans une hauteur
     d'écran standard (~750px) sans scroll supplémentaire. */
  padding-block: clamp(48px, 2.5rem + 2.2vw, 76px) clamp(20px, 1rem + 1vw, 28px);
  border-radius: var(--em-r-2xl) var(--em-r-2xl) 0 0;
  background: linear-gradient(180deg, var(--em-p5) 0%, var(--em-p4) 70%);
  overflow: hidden;
}
.em-footer :is(h2, h3) {
  margin: 0;
  font-family: var(--em-heading);
  font-weight: 400;
  color: var(--em-p3);
  letter-spacing: -0.02em;
}
.em-footer p { margin: 0; }
.em-footer a { text-decoration: none; }

/* Bloc d'appel — discours distinct de celui des pages, pour
   ne pas répéter le CTA de fin de section. */
.em-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(36px, 2rem + 1.6vw, 56px);
}
.em-footer__cta h2 {
  font-size: clamp(30px, 1.5rem + 1.9vw, 46px);
  line-height: 1.1;
  max-width: 16ch;
}
/* La largeur de lecture s'applique au texte, pas à la rangée
   de boutons — sans quoi ceux-ci s'empilent inutilement. */
.em-footer__cta p { max-width: 46ch; font-size: 17px; }
.em-footer__cta div { display: flex; flex-wrap: wrap; gap: 14px; }

.em-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: clamp(32px, 1.75rem + 1.4vw, 44px);
}
@media (min-width: 640px) { .em-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-footer__grid { grid-template-columns: 1.9fr 1.2fr 1.2fr 1.6fr; gap: 44px; } }

.em-footer__col { display: flex; flex-direction: column; gap: 12px; }
.em-footer__col h3 { font-size: 19px; margin-bottom: 2px; }
.em-footer__col a { font-size: 15px; font-weight: 600; color: var(--em-p3); transition: color var(--em-dur) var(--em-ease); }
.em-footer__col a:hover { color: var(--em-accent-text); }
.em-footer__col p { font-size: 15px; }

.em-footer__brand img { height: 30px; width: auto; display: block; }

.em-footer__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.em-footer__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--em-p2);
}
.em-footer__trust svg { width: 18px; height: 18px; color: var(--em-p1); flex: none; }

.em-footer__contact { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.em-footer__contact li > * { display: flex; align-items: flex-start; gap: 12px; }
.em-footer__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--em-r-sm);
  background: var(--em-p4);
  color: var(--em-p1);
}
.em-footer__icon svg { width: 18px; height: 18px; }
.em-footer__contact span:not(.em-footer__icon) {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--em-p2);
}
.em-footer__contact a span:not(.em-footer__icon) { color: var(--em-p3); }

.em-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--em-line-soft);
  text-align: center;
}
@media (min-width: 768px) {
  .em-footer__bottom { flex-direction: row; justify-content: space-between; text-align: start; }
}
.em-footer__bottom p,
.em-footer__bottom a { font-size: 14px; color: var(--em-p2); }
.em-footer__legal { display: flex; gap: 16px; }
.em-footer__legal a { color: var(--em-p2); }
.em-footer__legal a:hover { color: var(--em-accent-text); }

.em-footer__social { display: flex; gap: 8px; }
.em-footer__social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--em-r-sm);
  background: var(--em-p5);
  color: var(--em-p1);
  transition: background-color var(--em-dur) var(--em-ease), color var(--em-dur) var(--em-ease);
}
.em-footer__social a:hover { background: var(--em-p1); color: var(--em-white); }
.em-footer__social svg { width: 18px; height: 18px; }
@media (pointer: coarse) { .em-footer__social a { width: 44px; height: 44px; } }

/* ═══ Voile du tiroir ═════════════════════════════════
   Le tiroir descendait sur une page restée pleinement lisible :
   le titre du hero courait autour du panneau, et rien n'indiquait
   que le reste était hors service. Un voile le pose au premier
   plan.

   `pointer-events: none` est indispensable : le voile appartient
   au tiroir, donc un clic dessus serait vu comme « dans le
   tiroir » par shell.js et ne le fermerait pas. Transparent aux
   clics, il laisse le geste atteindre la page — et le tiroir se
   ferme comme prévu.                                          */

/* Le voile est porté par l'EN-TÊTE, jamais par le tiroir : un
   pseudo-élément en `z-index: -1` se peint au-dessus du fond de son
   propre parent, il aurait donc teinté le panneau blanc qu'il devait
   mettre en valeur. Posé sur l'en-tête, il passe sous le tiroir
   (z-index 79) comme sous la barre, et ne couvre que la page. */
@media (max-width: 1023px) {
  .em-header::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--em-p3) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 300ms var(--em-ease),
      visibility 0s linear 300ms;
  }
  .em-header:has(.em-drawer.is-open)::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms var(--em-ease), visibility 0s linear 0s;
  }
}


/* ═══ Confort tactile — coque ═════════════════════════ */

@media (pointer: coarse) {
  /* Les liens du pied de page font 24px de haut : au doigt, deux
     liens voisins se touchent. La prise passe à 44px sans écarter
     visuellement la liste — c'est la boîte du lien qui grandit,
     l'interligne reste celui du dessin. */
  .em-footer__col a,
  .em-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .em-footer__col { gap: 2px; }
  .em-footer__col h3 { margin-bottom: 6px; }

  .em-footer__contact li > * { min-height: 44px; align-items: center; }
  .em-drawer__links a { padding-block: 16px; }

  /* Le logo est un lien vers l'accueil : 26px de haut, c'est la
     hauteur de l'image, pas celle d'une cible. */
  .em-header__brand { min-height: 44px; }

  /* Mentions légales et crédit du bandeau de bas de page. */
  .em-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ═══ Téléphone — < 600px ═════════════════════════════ */

@media (max-width: 599px) {
  /* Le pied de page portait le rythme du bureau : titre d'appel de
     46px, colonnes espacées de 32px. Resserré, il tient en un écran
     et demi au lieu de trois. */
  .em-footer { padding-block: 44px 20px; }
  .em-footer__cta h2 { font-size: clamp(26px, 1.35rem + 2.6vw, 34px); }
  .em-footer__cta { margin-bottom: 32px; }
  .em-footer__cta div { width: 100%; }
  /* Deux appels côte à côte sur 350px donnaient deux boutons coupés :
     ils s'empilent, chacun sur toute la largeur. */
  .em-footer__cta div > * { flex: 1 1 100%; justify-content: center; }
  .em-footer__grid { gap: 26px; margin-bottom: 28px; }
  .em-footer__col h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .em-header__bar,
  .em-drawer,
  .em-btn,
  .em-btn__icon { transition-duration: 0.01ms; }
}