/* ==========================================================================
   Click'Eat — vitrine publique
   --------------------------------------------------------------------------
   Écrite à la main, sans framework ni police web. Les jetons viennent de
   `clickeat/.interface-design/system.md`, révision du 14 août 2026 :
   orange d'action unique, galets blancs sur sol crème, aucune bordure,
   16 px de rayon, tout ce qui se clique en pilule.

   Le thème clair est le thème du produit : la vitrine ne consulte pas
   `prefers-color-scheme`, exactement comme le logiciel (§ système d'interface).
   Aucune police n'est téléchargée — c'est la règle du produit, et c'est aussi
   ce qui fait tenir la page sur un réseau de Libreville.
   ========================================================================== */

/* ── Jetons ────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --sol: #FAF5F1;          /* le sol teinté, sans lui le galet blanc ne se détache pas */
  --galet: #FFFFFF;
  --muted: #F4EFEA;
  --nuit: #18130E;         /* bandes sombres : sécurité, pied de page */
  --nuit-2: #241E19;
  --nuit-3: #0F0B08;

  /* Encre */
  --encre: #1A1612;
  --estompe: #78726C;
  --encre-nuit: #F7F2ED;
  --estompe-nuit: #A79C93;

  /* Action — une seule couleur, jamais décorative */
  --vermillon: #E8420E;
  --vermillon-fonce: #C7360B;
  --marque: #F08033;
  --lavis: rgba(232, 66, 14, .08);
  --lavis-fort: rgba(232, 66, 14, .14);

  /* Sémantiques */
  --succes: #03A14A;
  --attention: #B98900;

  /* Formes */
  --rayon: 16px;
  --rayon-lg: 24px;
  --rayon-xl: 32px;

  /* Profondeur — deux ombres, sans anneau : à 16 px l'anneau se voit dans les
     angles. Densifiées le 17 août 2026 : aux valeurs du logiciel (.04 et .10),
     un galet blanc posé sur le sol crème ne se détachait pratiquement pas, et
     une page entière de cartes se lisait comme une nappe plate.

     Écart assumé, et **limité à la vitrine** : au back-office les cartes sont
     nombreuses et serrées, des ombres profondes y feraient du bruit. Ici elles
     sont grandes et espacées, elles ont besoin de se poser. Ne pas reporter ces
     valeurs dans `globals.css` du logiciel. */
  --ombre-posee: 0 1px 2px rgba(26, 22, 18, .06), 0 10px 26px -10px rgba(26, 22, 18, .16);
  --ombre-levee: 0 3px 8px rgba(26, 22, 18, .09), 0 28px 56px -22px rgba(26, 22, 18, .30);
  --ombre-marque: 0 2px 8px rgba(232, 66, 14, .26), 0 18px 36px -16px rgba(232, 66, 14, .50);

  /* Mouvement — une seule courbe, trois durées */
  --courbe: cubic-bezier(.23, 1, .32, 1);
  --vite: 120ms;
  --normal: 180ms;
  --lent: 280ms;

  --largeur: 1180px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sol);
  color: var(--encre);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--vermillon);
  outline-offset: 3px;
  border-radius: 6px;
}

.tabulaire { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.saut-contenu {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--encre); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  transition: top var(--normal) var(--courbe);
}
.saut-contenu:focus { top: 16px; }

.lecteur-seul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Trame ────────────────────────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

.bande { padding-block: clamp(72px, 9vw, 128px); }
.bande--serree { padding-block: clamp(56px, 6vw, 88px); }
.bande--nuit { background: var(--nuit); color: var(--encre-nuit); }
.bande--nuit h2 { color: #fff; }

/* Sol plus teinté, pour les sections entièrement faites de galets blancs.
   Nettement plus foncé que `--muted`, qui sert de surface *dans* les galets :
   à 6 unités du crème courant, la différence ne se voyait pas et la section
   n'était pas séparée pour autant. */
.bande--sol { background: #F0E9E2; }

/* ── Éléments de langage ──────────────────────────────────────────────── */

.chapeau {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--lavis);
  color: var(--vermillon);
  font-size: 13px; font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.chapeau svg { width: 15px; height: 15px; }
.bande--nuit .chapeau { background: rgba(240, 128, 51, .16); color: #FFB27A; }

.titre-section {
  font-size: clamp(32px, 4.4vw, 52px);
  max-width: 20ch;
}
.chapo {
  margin-top: 18px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--estompe);
  max-width: 58ch;
  line-height: 1.55;
}
.bande--nuit .chapo { color: var(--estompe-nuit); }

.tete-section { margin-bottom: clamp(40px, 5vw, 64px); }
.tete-section--centree { text-align: center; }
.tete-section--centree .titre-section { margin-inline: auto; }
.tete-section--centree .chapo { margin-inline: auto; }

/* Galets — cartes sans bordure posées sur le sol */
.galet {
  background: var(--galet);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-posee);
  overflow: hidden;
}

/* Boutons — toujours des pilules, jamais dérivés du rayon */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding-inline: 26px;
  border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--vite) var(--courbe),
              box-shadow var(--normal) var(--courbe),
              background-color var(--normal) var(--courbe);
  white-space: nowrap;
}
.bouton svg { width: 17px; height: 17px; flex: none; }
.bouton:active { transform: translateY(1px); }

.bouton--principal { background: var(--vermillon); color: #fff; box-shadow: var(--ombre-marque); }
.bouton--principal:hover { background: var(--vermillon-fonce); }

.bouton--galet { background: var(--galet); color: var(--encre); box-shadow: var(--ombre-posee); }
.bouton--galet:hover { box-shadow: var(--ombre-levee); }

.bouton--fantome { background: transparent; color: var(--encre); }
.bouton--fantome:hover { background: var(--lavis); color: var(--vermillon); }

.bouton--nuit { background: rgba(255, 255, 255, .10); color: #fff; }
.bouton--nuit:hover { background: rgba(255, 255, 255, .18); }

.bouton--blanc { background: #fff; color: var(--vermillon); }
.bouton--blanc:hover { background: #FFF3EC; }

.bouton--petit { height: 40px; padding-inline: 20px; font-size: 14px; }

/* Puce à compteur intégré — la maquette met le compteur *dans* la puce */
.puce {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding-inline: 16px;
  border: 0; border-radius: 999px;
  background: var(--galet); color: var(--encre);
  box-shadow: var(--ombre-posee);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all var(--normal) var(--courbe);
}
.puce em {
  font-style: normal; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--muted); color: var(--estompe);
}
.puce[aria-selected="true"] { background: var(--vermillon); color: #fff; box-shadow: var(--ombre-marque); }
.puce[aria-selected="true"] em { background: rgba(255, 255, 255, .22); color: #fff; }

/* Pastille d'icône — carré arrondi teinté de 40 px */
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 14px;
  background: var(--lavis);
  color: var(--vermillon);
}
.pastille svg { width: 21px; height: 21px; }
.pastille--pleine { background: var(--vermillon); color: #fff; }
.pastille--nuit { background: rgba(240, 128, 51, .16); color: var(--marque); }

/* ── Filigranes ───────────────────────────────────────────────────────────
   Deux objets, posés sur les cartes qui parlent du produit lui-même. Ils
   passent **sous** le contenu (`z-index: 0` contre `position: relative` sur le
   contenu) et n'interceptent aucun clic. Leur opacité est réglée pour qu'on
   les voie en regardant la carte, pas en la lisant. */

.filigrane {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Le sceau, en coin. Débordant : un logo entier posé dans une carte se lit
   comme un tampon de validation, un logo coupé par le bord se lit comme une
   signature. */
.filigrane--sceau {
  right: -26px; bottom: -26px;
  width: 168px; height: 168px;
  opacity: .10;
  transform: rotate(-8deg);
}
.filigrane--sceau svg { width: 100%; height: 100%; }
/* Sur l'aplat vermillon, le blanc rend beaucoup moins qu'il ne rend sur du
   noir : à opacité égale le sceau y disparaissait. */
.formule--vedette .filigrane--sceau { opacity: .16; }

/* La trame de points : le plan de salle vu de haut. */
.filigrane--trame {
  inset: 0;
  background-image: radial-gradient(circle at 1.5px 1.5px, currentColor 1.5px, transparent 0);
  background-size: 22px 22px;
  opacity: .14;
  mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 0%, #000, transparent 70%);
}

/* Toute carte qui porte un filigrane doit remonter son contenu au-dessus. */
.porte-filigrane { position: relative; overflow: hidden; }
.porte-filigrane > *:not(.filigrane) { position: relative; z-index: 1; }

/* Le fil — signature de la page : trois gestes, un trait qui les relie */
.fil {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vermillon) 18%, var(--marque) 82%, transparent);
  border-radius: 2px;
  transform-origin: left center;
}

/* ── Barre de navigation ──────────────────────────────────────────────── */

.barre {
  position: sticky; top: 0; z-index: 50;
  padding-top: 16px;
  transition: padding-top var(--lent) var(--courbe);
}
.barre.tassee { padding-top: 8px; }

.barre__interieur {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow var(--lent) var(--courbe), background-color var(--lent) var(--courbe);
}
.barre.tassee .barre__interieur {
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ombre-levee);
}

.marque-lien { display: flex; align-items: center; gap: 10px; flex: none; }
.marque-lien svg { height: 28px; width: auto; }

.barre__liens { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.barre__liens a {
  padding: 9px 15px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--estompe);
  transition: all var(--vite) var(--courbe);
  white-space: nowrap; /* « Le logiciel » sur deux lignes déformait la barre */
}
.barre__liens a:hover { color: var(--encre); background: var(--muted); }

.barre__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.bascule-menu {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  border: 0; border-radius: 999px; background: var(--muted);
  align-items: center; justify-content: center; cursor: pointer;
}
.bascule-menu svg { width: 20px; height: 20px; }

.menu-mobile {
  display: none;
  margin-top: 10px; padding: 14px;
  border-radius: var(--rayon-lg);
  background: var(--galet); box-shadow: var(--ombre-levee);
}
.menu-mobile.ouvert { display: block; }
.menu-mobile a {
  display: block; padding: 13px 16px; border-radius: 999px;
  font-weight: 600; font-size: 16px;
}
.menu-mobile a:hover { background: var(--muted); }
.menu-mobile .bouton { width: 100%; margin-top: 10px; }

/* ── Ouverture ────────────────────────────────────────────────────────── */

.ouverture {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(72px, 8vw, 112px);
  position: relative;
  isolation: isolate; /* le fond reste sous l'ouverture, jamais sous la barre */
}

/* ── Le carrousel de fond ─────────────────────────────────────────────────
   Une bande de photos et de vidéos derrière l'ouverture, sous un voile crème.
   Le fond donne le mouvement ; il ne porte aucune information, et il ne doit
   jamais coûter un point de contraste au texte. D'où deux couches de voile :
   l'une tempère toute la bande, l'autre pose du crème plein sous la colonne
   de texte. */

.fond {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Aucun arrondi ici : le voile éteint déjà la bande sur ses quatre bords, et
     un rayon laissait un arc visible dans les angles du bas. */
}

.fond__vue {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--courbe);
}
.fond__vue.est-active { opacity: 1; }

.fond__vue img,
.fond__vue video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  /* Les photos sont saturées et froides par endroits ; on les ramène vers le
     crème du produit pour qu'elles ne se battent pas avec l'orange d'action. */
  filter: saturate(.82) contrast(.96);
}

/* Couche 1 — tempère la bande entière. Couche 2 — crème plein sous le texte,
   qui s'efface vers la droite. Le dégradé du bas raccorde au sol de la page. */
.fond__voile {
  position: absolute; inset: 0;
  background:
    /* Raccord haut et bas : la bande ne se coupe pas net, elle naît du sol
       et y retourne. */
    linear-gradient(180deg, var(--sol) 0%, rgba(250, 245, 241, 0) 15%, rgba(250, 245, 241, 0) 70%, var(--sol) 100%),
    /* Crème plein sous la colonne de texte jusqu'à 30 %, puis la photo monte.
       Rien d'écrit ne passe au-delà de 46 % : les seuls objets qui s'y trouvent
       sont des galets blancs, qui gagnent au contraire à se détacher. */
    linear-gradient(100deg, var(--sol) 0%, var(--sol) 30%, rgba(250, 245, 241, .82) 46%, rgba(250, 245, 241, .46) 74%, rgba(250, 245, 241, .38) 100%);
}

/* Sur la photo, la composition a besoin d'un peu plus de relief qu'un galet
   posé sur le sol nu. */
.ouverture .composition__ecran { box-shadow: 0 4px 10px rgba(26, 22, 18, .08), 0 40px 80px -32px rgba(26, 22, 18, .34); }

/* ── Commande du carrousel ──────────────────────────────────────────────── */

.fond-commande {
  position: absolute; right: max(24px, calc((100% - var(--largeur)) / 2 + 24px)); bottom: 26px;
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: var(--ombre-posee);
}

.fond-commande__vue {
  width: 26px; height: 5px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(26, 22, 18, .16);
  cursor: pointer;
  transition: background-color var(--normal) var(--courbe), width var(--lent) var(--courbe);
}
.fond-commande__vue:hover { background: rgba(26, 22, 18, .34); }
.fond-commande__vue[aria-current="true"] { width: 40px; background: var(--vermillon); }

.fond-commande__pause {
  width: 28px; height: 28px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--encre);
  cursor: pointer;
  transition: background-color var(--normal) var(--courbe);
}
.fond-commande__pause:hover { background: var(--muted); }
.fond-commande__pause svg { width: 14px; height: 14px; }

.ouverture__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.ouverture h1 {
  font-size: clamp(44px, 6.4vw, 82px);
  letter-spacing: -.045em;
  line-height: .98;
}
.ouverture h1 .marque-mot {
  color: var(--vermillon);
  position: relative;
  white-space: nowrap;
}
/* Le soulignement est tracé, pas décoratif : il rappelle le fil des trois gestes */
.ouverture h1 .marque-mot::after {
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: .04em;
  height: 5px; border-radius: 3px;
  background: var(--marque);
  transform: scaleX(0); transform-origin: left;
  animation: tracer 700ms var(--courbe) 350ms forwards;
}
@keyframes tracer { to { transform: scaleX(1); } }

.ouverture .chapo { margin-top: 26px; font-size: clamp(17px, 1.6vw, 19.5px); max-width: 46ch; }

.ouverture__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.gages { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; }
.gages li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--estompe);
}
.gages svg { width: 17px; height: 17px; color: var(--vermillon); flex: none; }

/* La composition : le produit se montre lui-même, pas une photo d'ambiance */
.composition { position: relative; }

.composition__ecran {
  border-radius: var(--rayon-lg);
  background: var(--galet);
  box-shadow: var(--ombre-levee);
  overflow: hidden;
}
.composition__barre {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: var(--muted);
}
.composition__barre i {
  width: 9px; height: 9px; border-radius: 999px;
  background: #D9D2CB;
}
.composition__barre span {
  margin-left: 8px; font-size: 11.5px; color: var(--estompe);
  font-weight: 500; letter-spacing: .01em;
}
/* La capture fait 3200 px de large : rendue entière, elle se réduit en bouillie.
   On la cadre sur son angle supérieur gauche, à l'échelle où les indicateurs
   redeviennent lisibles — c'est ce qu'on vient y lire. */
.composition__cadre { aspect-ratio: 16 / 11; overflow: hidden; }
.composition__ecran img { width: 152%; max-width: none; height: auto; display: block; }

.carte-flottante {
  position: absolute;
  background: var(--galet);
  border-radius: 18px;
  box-shadow: var(--ombre-levee);
  padding: 14px 16px;
}

.carte-ticket { left: -34px; top: 16%; width: 224px; }
.carte-ticket .entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.carte-ticket .table { font-size: 13px; font-weight: 700; }
.carte-ticket .minuteur {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--vermillon);
  background: var(--lavis); padding: 3px 9px; border-radius: 999px;
}
.carte-ticket li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--estompe); padding: 3px 0;
}
.carte-ticket li b { color: var(--encre); font-weight: 700; }
.carte-ticket li .qte {
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: var(--muted);
  font-size: 11px; font-weight: 700; color: var(--encre);
}

.carte-recette { right: -28px; bottom: 10%; width: 236px; }
.carte-recette .libelle {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--estompe);
}
.carte-recette .valeur {
  font-size: 27px; font-weight: 700; letter-spacing: -.03em;
  margin-top: 4px;
}
.carte-recette .variation {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: rgba(3, 161, 74, .10); color: var(--succes);
}
.carte-recette .variation svg { width: 12px; height: 12px; }

.jeton-qr {
  position: absolute; right: -14px; top: -26px;
  width: 92px; height: 92px;
  border-radius: 26px; padding: 10px;
  background: var(--galet); box-shadow: var(--ombre-levee);
}
.jeton-qr img { width: 100%; height: 100%; }

/* Pulsation « braise » — réservée au temps réel, ici le point du service en cours */
.braise {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--succes); flex: none;
  box-shadow: 0 0 0 0 rgba(3, 161, 74, .5);
  animation: braise 2.4s ease-out infinite;
}
@keyframes braise {
  0% { box-shadow: 0 0 0 0 rgba(3, 161, 74, .45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(3, 161, 74, 0); }
}

/* ── Bandeau des villes ───────────────────────────────────────────────── */

.ruban {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 40px;
  padding-block: 30px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--estompe);
}
.ruban span { display: inline-flex; align-items: center; gap: 9px; }
.ruban svg { width: 15px; height: 15px; color: var(--marque); }

/* ── Les trois gestes ─────────────────────────────────────────────────── */

.gestes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }

/* Le fil qui relie les trois galets. Tracé derrière eux, à la hauteur des
   numéros : sans lui, trois cartes côte à côte se lisent comme trois options
   entre lesquelles choisir, alors que c'est une suite de gestes. */
.gestes::before {
  content: "";
  position: absolute; left: 12%; right: 12%; top: 56px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lavis-fort), var(--marque), var(--lavis-fort));
  z-index: 0;
}

.geste { position: relative; z-index: 1; padding: 28px 26px 26px; }
.geste__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--vermillon); color: #fff;
  box-shadow: var(--ombre-marque);
  font-size: 16px; font-weight: 700;
  margin-bottom: 20px;
}
.geste h3 { font-size: 21px; margin-bottom: 8px; }
.geste p { font-size: 14.5px; color: var(--estompe); line-height: 1.5; }

/* Mini-écran de téléphone dessiné en CSS — aucune image à charger */
.tel {
  margin-top: 22px;
  border-radius: 18px;
  background: var(--muted);
  padding: 12px;
}
.tel__ligne { display: flex; align-items: center; gap: 9px; }
.tel__vignette {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #EEDFD3, #DCC7B4);
}
.tel__texte { flex: 1; min-width: 0; }
.tel__texte b { display: block; font-size: 12.5px; }
.tel__texte span { font-size: 11px; color: var(--estompe); }
.tel__action {
  padding: 5px 12px; border-radius: 999px;
  background: var(--vermillon); color: #fff;
  font-size: 11px; font-weight: 700; flex: none;
}
.tel__action--sombre { background: var(--encre); }
.tel__barre {
  margin-top: 10px; height: 34px; border-radius: 999px;
  background: var(--vermillon); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.tel__pastille {
  position: relative;
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  background: var(--vermillon); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tel__pastille svg { width: 18px; height: 18px; }
.tel__pastille em {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding-inline: 5px;
  border-radius: 999px; background: var(--encre); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--galet);
}

.gestes__conclusion {
  margin-top: 32px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.gestes__conclusion .fil { flex: 1; min-width: 60px; }
.gestes__conclusion p { font-size: 15px; color: var(--estompe); }
.gestes__conclusion b { color: var(--encre); }

/* ── Bande sombre sur photo ────────────────────────────────────────────── */

.bande--photo { position: relative; isolation: isolate; overflow: hidden; }

.bande__fond { position: absolute; inset: 0; z-index: -1; }
.bande__fond img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: saturate(.62) contrast(1.04);
}
/* Le voile est franc — c'est du texte blanc qui passe dessus, et une photo de
   restaurant a des zones claires (nappes, fenêtres) qui le mangeraient. Elle
   n'est pas là pour être regardée, mais pour donner un lieu à la scène. */
.bande__fond::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Plus dense en haut : c'est là que se pose le titre, et un visage de la
       photo tombait juste derrière. La photo s'ouvre plus bas, au niveau des
       panneaux, où elle ne gêne personne. */
    linear-gradient(180deg, var(--nuit) 0%, rgba(24, 19, 14, .93) 14%, rgba(24, 19, 14, .90) 44%, rgba(24, 19, 14, .80) 76%, var(--nuit) 100%);
}

/* ── Avant / après ────────────────────────────────────────────────────── */

/* `stretch` et non `center` : centrés, les deux panneaux se décalent l'un par
   rapport à l'autre dès que leurs textes n'ont pas la même longueur, et la
   comparaison devient bancale. Seule la bascule se centre. */
.confrontation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.bascule {
  align-self: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 999px;
  background: var(--vermillon); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombre-marque);
}
.bascule svg { width: 22px; height: 22px; }

.panneau { padding: 34px 32px; border-radius: var(--rayon-lg); }
.panneau__titre {
  display: flex; align-items: center; gap: 11px;
  font-size: 18px; font-weight: 700; margin-bottom: 24px;
}
.panneau li {
  display: flex; gap: 13px; padding: 13px 0;
  font-size: 15.5px; line-height: 1.45;
}
.panneau li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

/* Sur la bande sombre, le panneau « sans » est du verre : il existe, mais il
   n'a pas de surface à lui. Le panneau « avec » est un galet plein — c'est
   toute la démonstration, et elle se lit avant d'être lue. */
.panneau--sans {
  background: rgba(255, 255, 255, .055);
  color: var(--estompe-nuit);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.panneau--sans .panneau__titre { color: #fff; }
.panneau--sans li + li { border-top: 1px solid rgba(255, 255, 255, .09); }
.panneau--sans li svg { color: rgba(255, 255, 255, .34); }

.panneau--avec {
  background: var(--galet); color: var(--encre);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18), 0 32px 64px -28px rgba(0, 0, 0, .55);
}
.panneau--avec .panneau__titre { color: var(--encre); }
.panneau--avec li + li { border-top: 1px solid rgba(26, 22, 18, .06); }
.panneau--avec li svg { color: var(--vermillon); }
.panneau--avec li b { font-weight: 600; }

/* ── Modules ──────────────────────────────────────────────────────────── */

.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.module { padding: 28px 26px; transition: box-shadow var(--lent) var(--courbe), transform var(--lent) var(--courbe); }
.module:hover { box-shadow: var(--ombre-levee); transform: translateY(-3px); }
.module h3 { font-size: 18.5px; margin: 18px 0 9px; }
.module p { font-size: 14.5px; color: var(--estompe); line-height: 1.55; }

/* Sept modules dans une grille de trois : le septième prend la rangée entière,
   sinon il laisse une colonne vide à sa droite. */
.module--large { grid-column: 1 / -1; display: flex; gap: 36px; align-items: center; padding: 32px; }
.module--large .contenu { flex: 1; }
.module--large h3 { margin-top: 16px; }
.module--large p { max-width: 62ch; }

/* ── Postes (onglets) ─────────────────────────────────────────────────── */

/* Le module entier est un galet. Les puces y sont logées, séparées du contenu
   par un filet — c'est la barre d'outils du panneau, pas une rangée de boutons
   posée à côté. */
.postes { padding: clamp(20px, 2.4vw, 32px); }

.postes__puces {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(26, 22, 18, .08);
}
/* Dans le galet, la puce au repos est un aplat neutre : à l'ombre, elle
   flotterait sur la même surface blanche qu'elle. */
.postes .puce { box-shadow: none; background: var(--muted); }
.postes .puce:hover { background: var(--lavis); color: var(--vermillon); }
.postes .puce[aria-selected="true"] { background: var(--vermillon); color: #fff; box-shadow: var(--ombre-marque); }
.postes .puce[aria-selected="true"]:hover { background: var(--vermillon-fonce); color: #fff; }
.postes .puce em { background: rgba(26, 22, 18, .07); }

/* L'écran schématique est déjà sur un galet : il n'en remet pas un second. */
.postes .ecran { box-shadow: none; background: var(--muted); padding: clamp(16px, 2vw, 22px); }
.postes .ecran .tuile,
.postes .ecran .ligne,
.postes .ecran .indicateur { background: var(--galet); }
.postes .ecran .tuile--occupee { background: var(--vermillon); }
.postes .ecran .tuile--reservee { background: var(--lavis-fort); }
.postes .ecran .indicateur--principal { background: var(--vermillon); }
.postes .ecran .ligne .vignette { background: linear-gradient(135deg, #EEDFD3, #D9C2AC); }
.postes .ecran__entete { border-bottom-color: rgba(26, 22, 18, .09); }

.poste { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.poste[hidden] { display: none; }
.poste h3 { font-size: clamp(24px, 2.6vw, 31px); margin-bottom: 14px; }
.poste p { color: var(--estompe); font-size: 16px; }
.poste ul { margin-top: 22px; display: grid; gap: 12px; }
.poste li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.poste li svg { width: 18px; height: 18px; color: var(--vermillon); flex: none; margin-top: 3px; }

/* Écrans schématiques : dessinés, jamais des captures approximatives */
.ecran { padding: 20px; border-radius: var(--rayon-lg); background: var(--galet); box-shadow: var(--ombre-levee); }
.ecran__entete {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(26, 22, 18, .07);
}
.ecran__entete b { font-size: 14px; }
.ecran__entete .etat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--estompe);
}

.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tuile {
  border-radius: 14px; padding: 12px 10px;
  background: var(--muted); text-align: center;
}
.tuile b { display: block; font-size: 15px; }
.tuile span { font-size: 10.5px; color: var(--estompe); }
.tuile--occupee { background: var(--vermillon); color: #fff; }
.tuile--occupee span { color: rgba(255, 255, 255, .82); }
.tuile--reservee { background: var(--lavis); color: var(--vermillon); }
.tuile--reservee span { color: var(--vermillon); opacity: .75; }

.lignes { display: grid; gap: 9px; }
.ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 14px; background: var(--muted);
  font-size: 13.5px;
}
.ligne .vignette {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, #EEDFD3, #D9C2AC);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #8A6A4E;
}
.ligne .corps { flex: 1; min-width: 0; }
.ligne .corps b { display: block; font-size: 13.5px; }
.ligne .corps span { font-size: 11.5px; color: var(--estompe); }
.ligne .montant { font-weight: 700; font-size: 13.5px; }
.ligne .etiquette {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.etiquette--attente { background: rgba(185, 137, 0, .12); color: var(--attention); }
.etiquette--cours { background: var(--lavis); color: var(--vermillon); }
.etiquette--prete { background: rgba(3, 161, 74, .12); color: var(--succes); }

.total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--encre); color: #fff;
}
.total span { font-size: 12.5px; color: rgba(255, 255, 255, .68); }
.total b { font-size: 19px; }

.indicateurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.indicateur { padding: 14px; border-radius: 16px; background: var(--muted); }
.indicateur span {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--estompe);
}
.indicateur b { display: block; font-size: 21px; margin-top: 5px; letter-spacing: -.03em; }
.indicateur--principal { background: var(--vermillon); color: #fff; }
.indicateur--principal span { color: rgba(255, 255, 255, .78); }

.courbe { margin-top: 14px; }
.courbe svg { width: 100%; height: auto; }

/* ── Chiffres ─────────────────────────────────────────────────────────── */

/* Un relevé, pas cinq annonces : une surface, cinq colonnes, des filets entre
   elles. Le filet appartient à la colonne suivante, jamais à la première —
   sinon la ligne s'ouvre sur un trait qui ne sépare rien. */
.chiffres {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: clamp(24px, 3vw, 38px) clamp(12px, 1.5vw, 20px);
}
.chiffre { padding: 6px clamp(14px, 1.8vw, 24px); }
.chiffre + .chiffre { border-left: 1px solid rgba(26, 22, 18, .08); }
.chiffre b {
  display: block; font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -.045em; line-height: 1; color: var(--vermillon);
}
.chiffre strong { display: block; font-size: 14.5px; margin-top: 14px; font-weight: 700; }
.chiffre span { display: block; font-size: 13px; color: var(--estompe); margin-top: 7px; line-height: 1.45; }

/* ── Pour qui ─────────────────────────────────────────────────────────── */

.publics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.public { display: flex; flex-direction: column; }
.public:hover { box-shadow: var(--ombre-levee); }

/* Le titre passe **sur** la photo : la carte gagne une hauteur d'image utile,
   et le nom du public arrive avec son visuel au lieu de le commenter après
   coup. Le voile n'est pas un effet — sans lui, un titre blanc sur une nappe
   claire disparaît. */
.public__photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted);
  display: flex; align-items: flex-end;
}
.public__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--courbe);
}
.public:hover .public__photo img { transform: scale(1.05); }
.public__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 8, 6, 0) 38%, rgba(12, 8, 6, .30) 62%, rgba(12, 8, 6, .82) 100%);
}
.public__photo h3 {
  position: relative; z-index: 1;
  padding: 22px 26px;
  color: #fff; font-size: clamp(20px, 2vw, 25px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.public__corps { padding: 24px 26px 26px; }
.public p { font-size: 14.5px; color: var(--estompe); line-height: 1.55; }
.public__note {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(26, 22, 18, .07);
}
.public__note b { font-size: 15px; color: var(--vermillon); }
.public__note span { font-size: 13px; color: var(--estompe); }

/* ── Mise en route ────────────────────────────────────────────────────── */

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }

/* Le chiffre fantôme donne à la carte son rang sans occuper une ligne de texte,
   et pose une profondeur que trois blocs identiques n'avaient pas. Il est
   décoratif : le rang est déjà écrit en toutes lettres dans « Étape 01 ». */
.etape { padding: 30px 28px; position: relative; overflow: hidden; }
.etape::after {
  content: attr(data-rang);
  position: absolute; right: -6px; bottom: -26px;
  font-size: 116px; font-weight: 700; line-height: 1;
  letter-spacing: -.06em;
  color: var(--lavis);
  pointer-events: none;
}
.etape > * { position: relative; }
.etape__rang {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vermillon);
}
/* Le même fil qu'aux trois gestes : les étapes sont une suite, pas trois cases */
.etape__rang::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lavis-fort), transparent);
}
.etape h3 { font-size: 20px; margin: 14px 0 10px; }
.etape p { font-size: 14.5px; color: var(--estompe); line-height: 1.55; }

/* ── Paroles ──────────────────────────────────────────────────────────── */

.paroles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 20px;
}
.parole { padding: 28px 26px; display: flex; flex-direction: column; }
.parole blockquote { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; }
.parole svg.guillemet { width: 26px; height: 26px; color: var(--marque); margin-bottom: 16px; }
.parole footer { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.parole .initiale {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  background: var(--lavis); color: var(--vermillon);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.parole .qui b { display: block; font-size: 14px; }
.parole .qui span { font-size: 12.5px; color: var(--estompe); }

/* La parole de l'éditeur n'est pas un témoignage anonyme : elle est signée,
   elle ouvre la section, et elle est la seule à passer en sombre et en grand. */
.parole--maitresse {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  margin: 0 0 22px;
  border-radius: var(--rayon-xl);
  overflow: hidden;
  background: var(--nuit); color: var(--encre-nuit);
  box-shadow: var(--ombre-levee);
}

/* La photo remplit sa moitié, quelle que soit la hauteur que prend la citation
   à côté : sans `position: absolute`, une image en `cover` impose sa propre
   hauteur et l'un des deux côtés dépasse. */
.parole--maitresse__photo { position: relative; min-height: 300px; background: #1E2050; }
.parole--maitresse__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}

.parole--maitresse__dire {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 54px);
}
.parole--maitresse .guillemet { width: 30px; height: 30px; margin-bottom: 18px; }
.parole--maitresse blockquote {
  color: #fff;
  font-size: clamp(19px, 2.05vw, 27px);
  line-height: 1.36; letter-spacing: -.02em; font-weight: 500;
}
.parole--maitresse footer { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.parole--maitresse .initiale {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: rgba(240, 128, 51, .18); color: #FFB27A;
}
.parole--maitresse .qui b { display: block; font-size: 14px; color: #fff; }
.parole--maitresse .qui span { font-size: 12.5px; color: var(--estompe-nuit); }

/* ── Formules ─────────────────────────────────────────────────────────── */

.formules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }

.formule { padding: 30px 26px 32px; display: flex; flex-direction: column; height: 100%; }
.formule__nom { font-size: 17px; font-weight: 700; }
.formule__prix { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.formule__prix b { font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.formule__prix span { font-size: 13.5px; color: var(--estompe); }
.formule__pitch { margin-top: 12px; font-size: 13.5px; color: var(--estompe); line-height: 1.5; min-height: 42px; }
.formule ul { margin-top: 22px; display: grid; gap: 11px; flex: 1; }
.formule li { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; line-height: 1.45; }
.formule li svg { width: 16px; height: 16px; color: var(--vermillon); flex: none; margin-top: 3px; }
.formule .bouton { margin-top: 26px; width: 100%; }
/* Sur un galet blanc, un bouton blanc à l'ombre ne se lit pas comme un bouton :
   il prend le sol pour surface. */
.formule .bouton--galet { background: var(--muted); box-shadow: none; }
.formule .bouton--galet:hover { background: var(--lavis); color: var(--vermillon); box-shadow: none; }

.formule--vedette { background: var(--vermillon); color: #fff; box-shadow: var(--ombre-marque); position: relative; }
.formule--vedette .formule__prix span,
.formule--vedette .formule__pitch { color: rgba(255, 255, 255, .82); }
.formule--vedette li svg { color: #fff; }
.formule--vedette .etiquette-vedette {
  position: absolute; top: 18px; right: 18px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 11px; font-weight: 700;
}

.note-formules {
  margin-top: 26px; text-align: center;
  font-size: 14px; color: var(--estompe);
}

/* ── Vos données ──────────────────────────────────────────────────────── */

/* Un galet sombre, pas une bande : même densité, autre forme. Les jetons de
   texte sombres sont redéclarés ici parce que la section, elle, est claire. */
.galet-nuit {
  background: var(--nuit); color: var(--encre-nuit);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-levee);
  padding: clamp(38px, 5vw, 68px);
}
.galet-nuit h2 { color: #fff; }
.galet-nuit .chapo { color: var(--estompe-nuit); }
.galet-nuit .chapeau { background: rgba(240, 128, 51, .16); color: #FFB27A; }

.donnees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.donnees__points { display: grid; gap: 14px; }
.donnees__points li {
  display: flex; align-items: center; gap: 15px;
  padding: 17px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  font-size: 15px; font-weight: 500;
}
.donnees__points svg { width: 19px; height: 19px; color: var(--marque); flex: none; }

/* ── Questions ────────────────────────────────────────────────────────── */

.questions { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 5vw, 72px); align-items: start; }

.accordeon { display: grid; gap: 12px; }
.question { border-radius: 18px; background: var(--galet); box-shadow: var(--ombre-posee); overflow: hidden; }
.question__bouton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 21px 24px; border: 0; background: transparent;
  font-size: 16.5px; font-weight: 600; text-align: left; cursor: pointer;
  letter-spacing: -.01em;
}
.question__signe {
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  background: var(--muted); color: var(--vermillon);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--lent) var(--courbe), background-color var(--normal) var(--courbe);
}
.question__signe svg { width: 16px; height: 16px; }
.question__bouton[aria-expanded="true"] .question__signe {
  transform: rotate(45deg); background: var(--vermillon); color: #fff;
}
.question__reponse {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--lent) var(--courbe);
}
.question__reponse > div { overflow: hidden; }
.question__reponse.ouverte { grid-template-rows: 1fr; }
.question__reponse p {
  padding: 0 24px 24px; font-size: 15.5px; color: var(--estompe); line-height: 1.6;
  max-width: 62ch;
}

.encart-contact { padding: 30px 28px; position: sticky; top: 110px; }
.encart-contact h3 { font-size: 21px; margin-bottom: 12px; }
.encart-contact p { font-size: 14.5px; color: var(--estompe); line-height: 1.55; }
.encart-contact .lien-fort {
  display: flex; align-items: center; gap: 11px;
  margin-top: 18px; font-weight: 600; font-size: 15px;
}
.encart-contact .lien-fort svg { width: 17px; height: 17px; color: var(--vermillon); flex: none; }
.encart-contact .lien-fort:hover { color: var(--vermillon); }
.encart-contact .bouton { margin-top: 24px; width: 100%; }

/* ── Appel final ──────────────────────────────────────────────────────── */

/* Le losange occupe toute la largeur disponible et impose sa hauteur : il est
   carré, donc `aspect-ratio` suffit — pas de hauteur en dur à maintenir. */
.appel {
  position: relative;
  display: grid; place-items: center;
  /* 940 px de diagonale : le carré inscrit y fait 664 px, soit la largeur d'un
     paragraphe confortable. En dessous, le texte se serrait en colonne étroite
     au milieu d'une grande forme, ce qui donnait un losange à moitié vide. */
  width: min(100%, 940px);
  margin-inline: auto;
  aspect-ratio: 1;
  color: #fff;
  text-align: center;
}
.appel__losange {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* L'ombre suit la forme réelle, pas sa boîte : une ombre de boîte carrée
     autour d'un losange se verrait aux quatre coins vides. */
  filter: drop-shadow(0 22px 48px rgba(232, 66, 14, .34));
}

/* Le carré inscrit d'un losange vaut sa diagonale ÷ √2, soit ~70 %. On reste
   sous cette valeur pour que le texte ne touche jamais les bords en biais. */
.appel__contenu {
  position: relative; z-index: 1;
  width: 62%;
  display: flex; flex-direction: column; align-items: center;
}

/* Le sceau garde ses vraies couleurs — carré encre, couverts blancs, point
   vermillon. En le passant en blanc sur l'aplat orange, ses couverts blancs
   disparaissaient dans leur propre carré : il ne restait qu'un galet vide.
   C'est exactement le défaut corrigé sur le logotype du logiciel. */
.appel__sceau {
  width: 46px; height: 46px;
  margin-bottom: 22px;
  color: #0C0A09;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .22));
}
.appel__sceau svg { width: 100%; height: 100%; }

.appel h2 { font-size: clamp(28px, 3.4vw, 46px); }
.appel p { margin-top: 18px; font-size: clamp(15px, 1.35vw, 17px); color: rgba(255, 255, 255, .90); }
.appel__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ── Pied de page ─────────────────────────────────────────────────────── */

.pied { background: var(--nuit); color: var(--estompe-nuit); padding-block: clamp(56px, 6vw, 80px) 32px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied__marque svg { height: 30px; width: auto; }
.pied__marque .logo-nuit text { fill: #fff; }
.pied__marque p { margin-top: 18px; font-size: 14.5px; max-width: 34ch; line-height: 1.55; }
.pied h4 { color: #fff; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px; }
.pied li { padding: 6px 0; font-size: 14.5px; }
.pied a:hover { color: #fff; }
.pied__coordonnees { margin-top: 22px; display: grid; gap: 9px; }
.pied__coordonnees a { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.pied__coordonnees svg { width: 16px; height: 16px; color: var(--marque); flex: none; }
.pied__bas {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13.5px;
}

/* ── Apparition au défilement — un seul geste, 60 ms de cascade ───────── */

.apparition { opacity: 0; transform: translateY(16px); }
.apparition.vue {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--courbe), transform 520ms var(--courbe);
}

/* ── L'application, par appareil ──────────────────────────────────────── */

.appareils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }

.appareil { padding: 28px 26px 30px; position: relative; }
.appareil h3 { font-size: 19px; margin: 16px 0 6px; }
.appareil__portee { font-size: 13px; color: var(--estompe); line-height: 1.45; }

.appareil__marche { counter-reset: pas; display: grid; gap: 10px; margin-top: 18px; }
.appareil__marche li {
  counter-increment: pas;
  position: relative; padding-left: 30px;
  font-size: 14px; line-height: 1.5; color: var(--estompe);
}
.appareil__marche li::before {
  content: counter(pas);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 999px; background: var(--lavis); color: var(--vermillon);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.appareil__marche li b { color: var(--encre); font-weight: 600; }

.appareil__note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(26, 22, 18, .08);
  font-size: 12.5px; color: var(--estompe); line-height: 1.45;
}

/* La carte de l'appareil du visiteur est signalée par le script. Sans elle, on
   lui fait lire quatre marches à suivre dont trois ne le concernent pas. */
.appareil.est-le-votre { box-shadow: var(--ombre-levee); }
.appareil.est-le-votre::after {
  content: "Votre appareil";
  position: absolute; top: 20px; right: 22px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--vermillon); color: #fff;
  font-size: 11px; font-weight: 700;
}
.appareil.est-le-votre .pastille { background: var(--vermillon); color: #fff; }

.appareils__pied {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: 26px 30px;
  border-radius: var(--rayon-lg);
  background: var(--galet); box-shadow: var(--ombre-posee);
}
.appareils__pied p { font-size: 15px; color: var(--estompe); line-height: 1.55; max-width: 62ch; }
.appareils__pied b { color: var(--encre); }
.appareils__pied .bouton { flex: none; }

/* ── Page « Accéder à mon compte » ────────────────────────────────────── */

.lien-retour {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--galet); box-shadow: var(--ombre-posee);
  font-size: 14px; font-weight: 600;
  transition: all var(--normal) var(--courbe);
}
.lien-retour:hover { color: var(--vermillon); box-shadow: var(--ombre-levee); }
.lien-retour svg { width: 16px; height: 16px; }

.acces { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; align-items: start; }

.acces__voie { padding: 32px 30px 34px; position: relative; }
.acces__voie h2 { font-size: 22px; margin: 18px 0 12px; }
.acces__voie p { font-size: 15px; color: var(--estompe); line-height: 1.55; }
.acces__voie p + p { margin-top: 12px; }
.acces__voie .pastille { margin-top: 4px; }

/* Le rang est en filigrane dans l'angle, pas dans le flux : il ordonne les
   trois voies sans prendre une ligne de texte à chacune. */
.acces__rang {
  position: absolute; top: 22px; right: 26px;
  font-size: 46px; font-weight: 700; line-height: 1;
  letter-spacing: -.05em;
  color: var(--lavis);
}

.acces__marche { margin-top: 22px; }
.acces__marche h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vermillon);
  margin: 20px 0 10px;
}
.acces__marche ol { counter-reset: marche; display: grid; gap: 9px; }
/* Puce hors du flux, et `li` en bloc : en `display: flex`, chaque balise du
   texte (un `<b>` au milieu d'une phrase) devenait un élément flex à part et
   partait sur sa propre colonne. */
.acces__marche li {
  counter-increment: marche;
  position: relative;
  padding-left: 32px;
  font-size: 14.5px; line-height: 1.5; color: var(--estompe);
}
.acces__marche li::before {
  content: counter(marche);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px;
  border-radius: 999px; background: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--encre);
}
.acces__marche li b { color: var(--encre); font-weight: 600; }

.acces__adresse {
  margin: 18px 0;
  padding: 15px 20px;
  border-radius: 14px;
  background: var(--encre); color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  text-align: center;
  word-break: break-all;
}

.acces__note {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(26, 22, 18, .08);
  font-size: 13.5px;
}

/* ── Adaptations ──────────────────────────────────────────────────────── */

/* Entre 860 et 1120 px, la barre porte encore ses cinq liens : c'est le second
   bouton qui saute, pas la navigation. Le téléphone reste joignable par le pied
   de page et par l'appel final. */
@media (max-width: 1120px) {
  .barre__interieur { gap: 12px; padding-left: 18px; }
  .barre__liens a { padding-inline: 12px; }
  .barre__actions .bouton--fantome { display: none; }
}

@media (max-width: 1040px) {
  .ouverture__grille { grid-template-columns: 1fr; gap: 56px; }
  /* ── Le fond sur téléphone ────────────────────────────────────────────
     En colonne unique, les cartes blanches prennent toute la largeur : il ne
     reste aucune surface au fond, et la photo devenait invisible. Deux gestes
     la font réapparaître.

     1. Une **vraie bande** est ménagée entre le texte et la composition. Sans
        elle, le voile aurait beau s'ouvrir, il s'ouvrirait derrière une carte
        opaque — c'était exactement le défaut.
     2. Le voile est **ancré depuis le bas** (`0deg`), et en pixels. Mesuré : le
        bloc de texte finit à 42 % de la section, mais ce pourcentage bouge dès
        que le titre se replie sur un mot de plus. La distance entre la
        composition et le bas de la section, elle, ne bouge pas — c'est donc
        elle qui sert de repère. */
  .composition { margin-top: 190px; }

  .fond__voile {
    background:
      linear-gradient(0deg,
        var(--sol) 0,                          /* raccord avec le ruban */
        rgba(250, 245, 241, .34) 48px,
        rgba(250, 245, 241, .34) 860px,        /* la bande, et les côtés */
        var(--sol) 950px);                     /* sous le texte : crème plein */
  }
  .fond-commande { right: 24px; bottom: 18px; }
  .composition { max-width: 620px; margin-inline: auto; }
  .carte-ticket { left: -12px; }
  .carte-recette { right: -12px; }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .appareils { grid-template-columns: repeat(2, 1fr); }
  .acces { grid-template-columns: 1fr 1fr; }
  .acces__voie:first-child { grid-column: 1 / -1; }
  /* Sur deux rangées, le filet vertical ne suffit plus : la première colonne de
     la seconde rangée en a besoin d'un horizontal, pas d'un vertical. */
  .chiffres { grid-template-columns: repeat(3, 1fr); row-gap: 4px; }
  .chiffre:nth-child(3n + 1) { border-left: 0; }
  .chiffre:nth-child(n + 4) { border-top: 1px solid rgba(26, 22, 18, .08); padding-top: 24px; margin-top: 18px; }
  .formules { grid-template-columns: repeat(2, 1fr); }
  .questions { grid-template-columns: 1fr; }
  .encart-contact { position: static; }
  .poste { grid-template-columns: 1fr; gap: 28px; }
  .donnees { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .barre__liens { display: none; }
  .barre__actions { display: none; }
  .bascule-menu { display: flex; }
  .gestes { grid-template-columns: 1fr; }
  .gestes::before { display: none; } /* empilés, le fil relierait des cartes qui ne sont plus côte à côte */
  .parole--maitresse { grid-template-columns: 1fr; }
  .parole--maitresse__photo { min-height: 0; aspect-ratio: 16 / 10; }
  /* Empilés, les deux panneaux gardent leur bascule : elle pivote et devient la
     flèche qui descend de l'un à l'autre. */
  .confrontation { grid-template-columns: 1fr; gap: 16px; justify-items: stretch; }
  .bascule { transform: rotate(90deg); margin-inline: auto; }
  .etapes { grid-template-columns: 1fr; }
  .publics { grid-template-columns: 1fr; }
  .acces { grid-template-columns: 1fr; }
  .appareils { grid-template-columns: 1fr; }
  .appareils__pied { flex-direction: column; align-items: stretch; }
  .appareils__pied .bouton { width: 100%; }

  /* Le losange rendu au galet. Sous cette largeur, son carré inscrit tomberait
     à ~250 px : ni le titre ni les deux boutons n'y tiendraient. On garde la
     couleur, la trame et le sceau ; on abandonne la seule chose qui ne
     supporte pas l'étroitesse, la mise sur la pointe. */
  .appel {
    width: 100%;
    aspect-ratio: auto;
    border-radius: var(--rayon-xl);
    background: var(--vermillon);
    box-shadow: var(--ombre-marque);
    overflow: hidden;
    padding: clamp(44px, 8vw, 64px) clamp(26px, 6vw, 44px);
  }
  .appel__losange { display: none; }
  .appel__contenu { width: 100%; }
  /* La trame revient en fond de galet, puisque le SVG qui la portait est retiré. */
  .appel::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .20) 1px, transparent 0);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000, transparent 75%);
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .enveloppe { padding-inline: 18px; }
  .modules { grid-template-columns: 1fr; }
  .module--large { flex-direction: column; align-items: stretch; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffre:nth-child(3n + 1) { border-left: 1px solid rgba(26, 22, 18, .08); }
  .chiffre:nth-child(odd) { border-left: 0; }
  .chiffre:nth-child(n + 3) { border-top: 1px solid rgba(26, 22, 18, .08); padding-top: 22px; margin-top: 16px; }
  .formules { grid-template-columns: 1fr; }
  .carte-ticket, .carte-recette { position: static; width: auto; margin-top: 14px; }
  .jeton-qr { right: 8px; top: -18px; width: 74px; height: 74px; border-radius: 22px; }
  /* Sur un téléphone, le cadrage large ne montre plus rien : on entre dans la
     capture, au-delà de la barre latérale, là où sont les indicateurs. */
  .composition__cadre { aspect-ratio: 5 / 4; }
  .composition__ecran img { width: 300%; margin-left: -46%; }
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .indicateurs { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
  .ouverture__actions .bouton { width: 100%; }
}

/* Le mouvement retire le déplacement, garde les fondus */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .apparition { opacity: 1; transform: none; }
  .ouverture h1 .marque-mot::after { transform: scaleX(1); }
  /* Le carrousel ne tourne pas de lui-même : le script ne le démarre pas, et
     la transition ci-dessous ne sert plus qu'aux changements demandés à la
     main par les puces. */
  .fond__vue { transition-duration: 300ms; }
}

@media print {
  .barre, .appel__actions, .bouton { display: none; }
  body { background: #fff; }
}