/* ═══ SentryReply — /connect · /connected ═══════════════════════════════════
   Les deux pages d'autorisation Gmail.

   Feuille autonome, et c'est délibéré : main.css porte tout le gréement de la
   page d'accueil (preloader, sections épinglées, `cursor:none` global) dont ces
   pages n'ont aucun besoin — et dont elles ne doivent surtout pas hériter. En
   revanche les jetons sont recopiés à l'identique : mêmes fontes, même accent,
   même papier crème que l'acte « You do nothing ».

   Le crème comme fond, ici, n'est pas qu'une citation : c'est la page où l'on
   demande une permission. Elle doit être calme, et enchaîner sans heurt sur
   l'écran de consentement Google, qui est blanc.                              */

:root{
  --cream:#f3efe6;
  --ink:#16140f;
  --ink-2:rgba(22,20,15,.78);
  --ink-dim:rgba(22,20,15,.55);
  --ink-faint:rgba(22,20,15,.4);
  --rule:rgba(22,20,15,.16);
  --rule-soft:rgba(22,20,15,.09);
  --accent:#ff4f30;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --col:640px;          /* la colonne unique — tout partage ce bord gauche */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}

::selection{background:var(--accent);color:#0d0c0a}
a{color:inherit}
b,strong{font-weight:500}

.serif{font-family:var(--serif);font-weight:400}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ital{font-style:italic}
.accent-t{color:var(--accent)}

/* la colonne : bloc centré, texte ferré à gauche — comme tout le site */
.col{
  width:100%;max-width:var(--col);
  margin:0 auto;
  padding:0 clamp(22px,6vw,32px);
}

/* ═══ grain ═══ (identique à main.css, un cran plus discret sur le crème) */
.grain{
  position:fixed;inset:-100px;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ═══ mât ═══ */
.mast{padding:26px 0 0}
.mast-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.mark{font-size:21px;text-decoration:none}
.mast-note{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ═══ corps ═══ */
/* padding-top/bottom, jamais le raccourci `padding` : .col porte déjà les
   marges latérales, et un raccourci ici les remettrait à zéro — le texte
   viendrait coller au bord de l'écran sur mobile. */
.sheet{padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(34px,5vh,52px)}

.kicker{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:20px;
}
.hail{
  font-size:clamp(19px,2.6vw,24px);line-height:1.3;
  color:var(--ink-dim);margin-bottom:10px;
}
.hail[hidden]{display:none}

.h1{
  font-size:clamp(46px,8vw,74px);
  line-height:.98;letter-spacing:-.025em;
  margin-bottom:24px;
}
.lead{
  font-size:clamp(16.5px,1.9vw,19.5px);
  line-height:1.6;color:var(--ink-2);max-width:44ch;
}
.lead+.lead{margin-top:16px}
.lead b{color:var(--ink)}

/* ═══ le registre — ce que Google va demander, et ce qu'il ne demandera pas.
   C'est la pièce à conviction de la phrase « I cannot read your mailbox » :
   sans les deux lignes refusées, la promesse n'est qu'une affirmation. ═══ */
.ledger{
  list-style:none;margin:34px 0 0;
  border-top:1px solid var(--rule);
}
.ledger li{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule-soft);
}
.ledger .what{font-size:15.5px;color:var(--ink)}
.ledger .tag{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.ledger .no .what{color:var(--ink-faint)}
.ledger .no .tag{color:var(--ink-faint)}

/* ═══ bouton — repris trait pour trait de main.css ═══ */
.act{margin-top:36px}
.btn{
  display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:var(--accent);color:#0d0c0a;text-decoration:none;
  padding:22px 34px;border-radius:12px;
  transition:box-shadow .3s,transform .3s ease;
  box-shadow:0 20px 60px -18px rgba(255,79,48,.55);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 26px 70px -18px rgba(255,79,48,.7)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.btn-label{font-size:18px;font-weight:500}
.btn-time{font-size:11.5px;letter-spacing:.08em;opacity:.75}

/* lien secondaire, quand l'action principale est ailleurs */
.quiet{
  display:inline-block;margin-top:26px;
  font-size:14px;color:var(--ink-dim);
  text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;transition:color .25s,border-color .25s;
}
.quiet:hover{color:var(--ink);border-color:var(--ink)}

/* ═══ note d'avertissement — filet accent, jamais un encadré d'alerte ═══ */
.note{
  margin-top:30px;padding-left:18px;
  border-left:1px solid rgba(255,79,48,.4);
  font-size:13.5px;line-height:1.75;color:var(--ink-dim);
  max-width:50ch;
}
.note b{color:var(--ink)}
.note+.note{margin-top:20px}

/* ═══ pied ═══ */
.foot{
  margin-top:auto;padding:34px 0 44px;
  border-top:1px solid var(--rule-soft);
}
.foot-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap;
  font-size:12.5px;line-height:1.9;color:var(--ink-faint);
}
.foot a{text-decoration:none;border-bottom:1px solid var(--rule-soft)}
.foot a:hover{color:var(--ink)}

/* ═══ réseaux (papier crème) ═══
   Mêmes règles que le footer sombre : gris au repos, couleur de marque au
   survol seulement. Les icônes n'ont pas de soulignement — la bordure du
   `.foot a` générique les entourerait bêtement. */
.foot-right{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.social-row{display:inline-flex;align-items:center;gap:10px}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:7px;
  color:var(--ink-faint);border:1px solid var(--rule-soft);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;
}
.foot .social{border-bottom:1px solid var(--rule-soft)}
.social svg{display:block}
.social:hover,.social:focus-visible{transform:translateY(-2px);border-color:var(--rule)}
.social-li:hover,.social-li:focus-visible{color:#0a66c2;background:rgba(10,102,194,.08)}
.social-ig:hover,.social-ig:focus-visible{background:rgba(214,36,159,.08)}
.social-ig:hover svg path,.social-ig:hover svg circle,
.social-ig:focus-visible svg path,.social-ig:focus-visible svg circle{fill:url(#igGradLight)}
@media (prefers-reduced-motion:reduce){.social{transition:none}.social:hover{transform:none}}

/* ═══ curseur ═══
   `cursor:none` n'est posé QUE par le JS (classe sur <html>) : si le script ne
   part pas, on garde le curseur natif. main.css, lui, masque le curseur depuis
   la CSS — un pari qu'on ne refait pas sur une page de permission. */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  border-radius:50%;display:none;will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--accent)}
.cursor-ring{
  width:34px;height:34px;border:1px solid rgba(22,20,15,.3);
  transition:width .25s,height .25s,border-color .25s;
}
.cursor-ring.grow{width:64px;height:64px;border-color:var(--accent)}
html.cursored .cursor-dot,html.cursored .cursor-ring{display:block}
@media (pointer:fine){
  html.cursored body,html.cursored a,html.cursored button{cursor:none}
}

@media (max-width:520px){
  body{font-size:16.5px}
  .ledger li{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .btn{width:100%;align-items:center;padding:20px 26px}
  .foot-row{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .btn,.quiet,.cursor-ring{transition:none}
  .btn:hover{transform:none}
}

/* ═══ onboarding après connexion ══════════════════════════════════════════
   La page de succès ne dit plus « rien d'autre à faire » : il reste deux
   gestes à l'agente, et les cacher ne les ferait pas disparaître. Deux
   étapes numérotées, dans la même sobriété que le reste. */

.steps{list-style:none;margin:52px 0 0;padding:0;counter-reset:none}
.step{
  padding:34px 0;
  border-top:1px solid var(--rule);
}
.step:last-child{padding-bottom:8px}
.steps+.note{margin-top:40px}
.step-n{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;
}
.step-h{
  font-size:clamp(28px,4.2vw,40px);line-height:1.04;letter-spacing:-.02em;
  margin-bottom:16px;
}
.step-note{
  margin-top:16px;font-size:13.5px;line-height:1.7;
  color:var(--ink-dim);max-width:50ch;
}

/* l'adresse d'ingestion : c'est la chose qu'elle doit copier, elle doit donc
   être la plus lisible de la page — et sélectionnable d'un geste */
.inbound{
  margin-top:22px;padding:18px 20px;
  border:1px solid rgba(255,79,48,.4);border-radius:10px;
  background:rgba(255,79,48,.05);
  font-size:clamp(15px,2.4vw,19px);letter-spacing:.01em;
  color:var(--ink);word-break:break-all;
  cursor:pointer;user-select:all;
  transition:background .25s,border-color .25s;
}
.inbound:hover{background:rgba(255,79,48,.09);border-color:rgba(255,79,48,.6)}
.inbound.copied{background:rgba(255,79,48,.14)}

/* ═══ formulaire de fiche ═══ */
.pform{margin-top:26px}
.pf-row{
  display:grid;grid-template-columns:170px 1fr;gap:18px;
  align-items:baseline;padding:4px 0;
}
.pf-row label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:14px;transition:color .3s ease;
}
.pf-row:focus-within label{color:var(--ink-dim)}
.pf-row.invalid label{color:var(--accent)}
.pf-opt{letter-spacing:.06em;opacity:.6;text-transform:none}

.pf-cell{position:relative;padding:12px 0 13px}
.pf-cell::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule-soft);
}
.pf-cell::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.pf-row:focus-within .pf-cell::after{transform:scaleX(1)}
.pf-row.invalid .pf-cell::after{transform:scaleX(1);opacity:.55}

.pf-cell input{
  width:100%;background:none;border:0;padding:0;
  color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.65;caret-color:var(--accent);
}
.pf-cell input:focus{outline:none}
.pf-cell input::placeholder{color:var(--ink-faint);opacity:.7;transition:opacity .3s}
.pf-cell input:focus::placeholder{opacity:.35}

.pf-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.pf-send{border:0;cursor:pointer;font-family:var(--sans);padding:18px 28px}
.pf-send:disabled{opacity:.45;cursor:default;transform:none}
.pf-msg{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);min-height:1.2em;
}
.pf-msg.err{color:var(--accent)}
.pf-msg.ok{color:var(--ink)}

@media (max-width:520px){
  .pf-row{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .pf-row label{padding-top:0}
  .pf-foot{flex-direction:column;align-items:stretch;gap:16px}
  .pf-send{width:100%;align-items:center}
  .pf-msg{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .pf-cell::after,.inbound{transition:none}
}

/* La lecture que le système fait de ses créneaux. Discrète — c'est une
   confirmation, pas une alerte — mais présente, pour qu'une erreur se voie. */
.pf-read{
  margin-top:14px; font-size:12px; letter-spacing:.02em;
  color:var(--ink-3, #6c6759);
}
.pf-read a{ color:inherit; text-decoration-color:var(--accent, #ff4f30); }