/* Synaps — carte de visite numérique (/carte/)
   Feuille autonome : la carte est scannée au QR code, souvent en 4G et souvent
   une seule fois. Elle ne charge donc pas styles.css (la landing entière) mais
   redéclare les seules valeurs dont elle a besoin. Les jetons de couleur et de
   typographie sont repris tels quels de styles.css. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #F4F1E9;
  --ink: #14110F;
  --orange: #C34111;
  --creme-2: #ECE6D8;
  --rule: rgba(20, 17, 15, 0.35);
  --ink-70: rgba(20, 17, 15, 0.72);
  --paper-60: rgba(244, 241, 233, 0.6);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --title-font: 'Newsreader', Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

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

/* Plein écran sur téléphone — c'est là que la carte est lue, et chaque pixel
   perdu en marge repousse le formulaire de rappel vers le bas. Au-delà de
   520 px, elle redevient un objet posé sur fond sombre. */
.carte {
  max-width: 470px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}

@media (min-width: 520px) {
  body { padding: clamp(24px, 5vh, 64px) 20px; }
  .carte {
    min-height: 0;
    border: 2px solid var(--ink);
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Bandeau ---------- */

.carte__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
}
.carte__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.carte__mark { width: 9px; height: 9px; background: var(--orange); }
.carte__kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-60);
}

/* ---------- Identité ---------- */

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow--paper { color: rgba(244, 241, 233, 0.72); }

.accent { color: var(--orange); }

/* Le motif est posé en pseudo-élément plutôt qu'en fond direct : son opacité
   se règle alors indépendamment, sans toucher au crème ni au texte. À 0.7, les
   courbes se voient et le numéro reste parfaitement lisible dessus. */
.ident {
  position: relative;
  isolation: isolate;
  padding: 22px 22px 20px;
  overflow: hidden;
  /* La fuite qui donne sa profondeur au basculement du motif. Elle ne concerne
     que des enfants transformés en 3D : le titre et le texte, qui n'en ont
     aucun, ne bougent pas d'un pixel. */
  perspective: 800px;
}
.ident::before {
  content: '';
  position: absolute;
  /* Débord volontaire : la couche se déplace de quatorze pixels au plus sous
     le curseur ou l'inclinaison, ce débord l'empêche de découvrir un bord
     pendant le mouvement. Le basculement pince en plus le bord qui s'éloigne,
     d'où la marge portée à 24 px et l'agrandissement de 5 % plus bas : à six
     degrés sur une carte de 470 px, le bord fuyant rentre d'environ 7 px, et
     14 px de course s'y ajoutent. .ident est en overflow:hidden. */
  inset: -24px;
  z-index: -1;
  background: url('/assets/img/pattern.webp') center / cover no-repeat;
  opacity: 0.78;
  /* Le motif est franc derrière le nom, qui est en encre pleine et le supporte,
     puis s'efface vers le bas où passent le pitch et les horaires, écrits en
     encre atténuée : dessus, les courbes leur mangeaient le contraste. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.14) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.14) 100%);
  /* Quatre variables posées par carte.js : deux de déplacement, deux de
     basculement. Absentes — pas de script, pas de capteur —, le motif reste
     simplement immobile et de face. L'agrandissement garantit que le bord
     fuyant ne découvre jamais le crème. */
  transform:
    translate3d(var(--parallaxe-x, 0px), var(--parallaxe-y, 0px), 0)
    rotateX(var(--bascule-x, 0deg))
    rotateY(var(--bascule-y, 0deg))
    scale(1.05);
}

/* La couche n'est promue sur sa propre couche de composition que si l'effet
   tourne vraiment : sur un appareil qui n'a ni curseur ni inclinaison, autant
   ne rien réserver au compositeur. */
.ident--parallaxe::before { will-change: transform; }

/* Un mouvement décoratif est exactement ce que ce réglage demande d'éteindre. */
@media (prefers-reduced-motion: reduce) {
  .ident::before { transform: none; }
}

.ident__name {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(44px, 14.5vw, 66px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.ident__pitch {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-70);
}
.ident__pitch b { font-weight: 800; color: var(--ink); }

/* Le numéro est le premier geste attendu : il est aussi gros que la mise en
   page le permet, et c'est un lien tel: à part entière. */
.ident__phone {
  display: block;
  margin: 20px 0 0;
  font-size: clamp(27px, 8.6vw, 38px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 700;
  white-space: nowrap;
}
.ident__phone:active { color: var(--orange); }
.ident__prefix { opacity: 0.5; font-weight: 500; }

.ident__hours {
  margin: 10px 0 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(20, 17, 15, 0.62);
}

/* ---------- Actions ---------- */

/* Une colonne, toujours : la carte se tient à une main. Les filets de 1 px sont
   obtenus par l'écart de la grille sur fond encre, comme sur la landing. */
.actions {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.actions--second { border-top: 0; }

.action {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 62px;
  padding: 16px 22px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: left;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.action__label { flex: 1 1 auto; min-width: 0; }
.action__arrow { flex: 0 0 auto; opacity: 0.4; font-weight: 500; }
.action__icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action--orange { background: var(--orange); color: var(--paper); }
.action--star .action__icon { fill: currentColor; stroke-width: 1; }

/* SMS et e-mail sur une seule ligne : ce sont des recours, ils n'ont pas à
   coûter deux bandes de 62 px avant le formulaire de rappel. */
.actions__paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}
/* Cellules de demi-largeur : l'espace y est compté. */
.action--mi { padding-left: 18px; padding-right: 16px; }

.action--orange .action__arrow { opacity: 0.6; }

.action:active { background: var(--ink); color: var(--paper); }
.action--orange:active { background: var(--ink); }

@media (hover: hover) {
  .action:hover { background: var(--ink); color: var(--paper); }
  .action--orange:hover { background: var(--ink); }
}

/* ---------- Rappel, replié ---------- */

/* Plus de pavé sombre au milieu de la page : un simple bandeau crème, un cran
   plus foncé que le papier, qu'on ouvre si on veut. Le contenu reste dans le
   HTML — <details> est natif, il fonctionne sans JavaScript. */
.rappel {
  background: var(--creme-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.rappel__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
/* Safari dessine encore son propre triangle sans cette ligne. */
.rappel__tete::-webkit-details-marker { display: none; }

.rappel__tete-texte { flex: 1 1 auto; min-width: 0; }
.rappel__tete-titre {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.rappel__tete-note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(20, 17, 15, 0.6);
}

.rappel__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--orange);
  color: var(--paper);
}
.rappel__chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.rappel[open] .rappel__chevron svg { transform: rotate(180deg); }

.rappel__corps { padding: 2px 22px 26px; }

.rappel__note {
  margin: 0;
  max-width: 40ch;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(20, 17, 15, 0.68);
}

.rappel__form { display: grid; gap: 12px; margin-top: 18px; }

/* Pot de miel de Netlify : déporté hors de l'écran plutôt que display:none, que
   certains robots savent détecter. Même règle que dans styles.css. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.champ { display: block; }
.champ__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.62);
}
.champ__opt { color: rgba(20, 17, 15, 0.42); }

/* 16 px minimum : en dessous, iOS zoome tout seul à la mise au point et le
   visiteur se retrouve à devoir repincer l'écran au milieu du formulaire. */
.saisie {
  width: 100%;
  padding: 14px 15px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid rgba(20, 17, 15, 0.2);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.saisie::placeholder { color: rgba(20, 17, 15, 0.38); font-weight: 500; }
.saisie:focus { border-color: var(--ink); outline: none; }
.saisie[aria-invalid='true'] { border-color: var(--orange); }

.rappel__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 17px 20px;
  background: var(--orange);
  color: var(--paper);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rappel__btn:active { background: var(--ink); }
.rappel__btn[disabled] { opacity: 0.55; cursor: default; }
@media (hover: hover) { .rappel__btn:hover { background: var(--ink); } }

.rappel__statut {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}
.rappel__statut:empty { display: none; }

/* ---------- Blocs ---------- */

.bloc { padding: 24px 22px; border-bottom: 1px solid var(--rule); }
.bloc--save { padding: 18px 22px; }

/* Enregistrer le contact : le geste qui remplace la carte en carton. En trait
   plutôt qu'en aplat — une seule bande pleine orange sur la page, « Appeler
   maintenant », sinon plus rien ne ressort. Il quitte du même coup le
   plein-cadre des liens d'action : c'est un objet posé dans la page, pas une
   bande de plus. Rempli au contact, il redevient franc au moment du geste. */
.save {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
  -webkit-tap-highlight-color: transparent;
}
.save:active { background: var(--orange); color: var(--paper); }
.save:active .save__note { color: rgba(244, 241, 233, 0.78); }
@media (hover: hover) {
  .save:hover { background: var(--orange); color: var(--paper); }
  .save:hover .save__note { color: rgba(244, 241, 233, 0.78); }
}
.save__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.save__body { display: block; }
.save__title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.save__note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
  /* L'orange passe tout juste le seuil AA sur le crème : le titre le porte,
     la note repasse en encre atténuée, qui se lit bien mieux à 12,5 px. */
  color: var(--ink-70);
}

/* ---------- QR ---------- */

.qr { display: flex; align-items: center; gap: 18px; }
.qr__code {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  padding: 7px;
  background: #fff;
  border: 2px solid var(--ink);
}
.qr__code img { display: block; width: 100%; height: 100%; }
.qr__text { min-width: 0; }
.qr__text .eyebrow { margin-bottom: 8px; }
.qr__lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.qr__url {
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(20, 17, 15, 0.6);
}

/* ---------- Installation ---------- */

.install { border-bottom: 0; }
.install__text {
  margin: 0;
  max-width: 38ch;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-70);
}
.install__btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.install__btn:active { background: var(--orange); color: var(--paper); }
@media (hover: hover) { .install__btn:hover { background: var(--orange); color: var(--paper); } }

.install__ios {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-70);
}
.install__ios b { font-weight: 800; color: var(--ink); }
.install__glyph {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin: 0 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Pied ---------- */

.carte__foot {
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.55);
}
.carte__foot p { margin: 0; }
.carte__foot a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Fenêtre d'installation ---------- */

/* La fenêtre est un composant tiers (<pwa-install>, dans assets/js/vendor/) :
   son apparence lui appartient, c'est le prix de sa couverture. La seule prise
   qu'il laisse est sa couleur d'accent, et elle se passe par son attribut
   `styles` (voir index.html) — il l'applique en style en ligne, qui gagnerait
   de toute façon sur une règle posée ici. Rien à styler dans cette feuille. */

/* ---------- Message éphémère ---------- */

/* Confirme les gestes qui n'ouvrent aucune application : lien copié, carte
   déjà installée. Fixe en bas de l'écran, hors du flux. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  max-width: min(400px, calc(100vw - 32px));
  margin: 0;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--orange);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Accessibilité ---------- */

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ————— Prise de rendez-vous dans le volet —————
   La brique rdv (../assets/css/rdv.css) ne se modifie pas : ses variables
   reprennent la palette de la carte. Le fond crème du volet sert de fond. */
.rappel__corps .rdv {
  --rdv-accent: var(--orange);
  --rdv-accent-texte: var(--paper);
  --rdv-texte: var(--ink);
  --rdv-texte-doux: var(--ink-70);
  --rdv-trait: var(--rule);
  --rdv-fond-case: rgba(20, 17, 15, 0.05);
  --rdv-rayon: 10px;
  --rdv-largeur-calendrier: 100%;
  margin-top: 18px;
}