/* ═══════════════════════════════════════════════════════════════════════════
   Formulaires Uplawder — lettre du cabinet, fiches de synthèse
   Composant : components/uplawder-form.php · Script : js/uplawder-form.js

   Reprise de la charte des pages de campagne du cabinet (papier chaud,
   bordeaux, terracotta), avec les polices du site : Lato et une serif système
   à la place d'Inter et d'Instrument Serif. Aucun chargement de police, donc
   aucun appel externe à déclarer.

   Tout est en classes `uf-`, jamais en identifiants : une page peut porter
   plusieurs instances du composant sans qu'elles se marchent dessus.
   ═══════════════════════════════════════════════════════════════════════════ */

.uf{
  --uf-paper:#fbf8f3;
  --uf-ink:#151514;
  --uf-ink-2:#22201f;
  --uf-muted:#7d7771;
  --uf-line:#ded5cd;
  --uf-bordeaux:#8e261d;
  --uf-bordeaux-d:#6f1a14;
  --uf-terracotta:#c9756c;
  --uf-blush:#f2cac5;
  --uf-ok:#2b6049;
  --uf-serif:Georgia,"Times New Roman",serif;
  --uf-sans:Lato,system-ui,-apple-system,Helvetica,Arial,sans-serif;

  container-type:inline-size;
  max-width:560px;
  /* Posée en élément flex ou grille, la carte se laisserait écraser sous la
     largeur de ses champs. Le plancher cède devant le parent quand celui-ci est
     plus étroit, donc il ne peut jamais provoquer de débordement. */
  min-width:min(100%,300px);
  background:var(--uf-paper);
  padding:38px 40px 42px;
  border:1px solid var(--uf-line);
  border-top:3px solid var(--uf-bordeaux);
  font-family:var(--uf-sans);
  font-size:15px;
  color:var(--uf-ink-2);
  line-height:1.6;
  text-align:left;
}
.uf *{box-sizing:border-box}
.uf [hidden]{display:none!important}

/* ── Titraille ──────────────────────────────────────────────────────────── */
.uf .uf-kicker{
  margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--uf-bordeaux);line-height:1.4;
}
.uf .uf-titre{
  margin:0 0 12px;font-family:var(--uf-serif);font-weight:400;text-transform:none;
  font-size:34px;line-height:1.06;letter-spacing:-.01em;color:var(--uf-ink);
}
.uf .uf-titre em{font-style:italic;color:var(--uf-terracotta)}
.uf .uf-chapo{margin:0 0 28px;font-size:15px;line-height:1.7;color:var(--uf-muted)}

/* ── Champs ─────────────────────────────────────────────────────────────── */
.uf .uf-ligne{display:flex;gap:14px}
.uf .uf-ligne .uf-champ{flex:1}
.uf .uf-champ{margin-bottom:15px}
.uf label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--uf-muted);margin-bottom:7px;line-height:1.4;
}
.uf input[type=text],.uf input[type=email]{
  width:100%;padding:12px 14px;border:1px solid var(--uf-line);border-radius:3px;
  background:#fff;font-family:var(--uf-sans);font-size:15px;color:var(--uf-ink);
  transition:border-color .15s,box-shadow .15s;
}
.uf input[type=text]:focus,.uf input[type=email]:focus{
  outline:none;border-color:var(--uf-bordeaux);box-shadow:0 0 0 3px rgba(142,38,29,.10);
}
.uf [aria-invalid="true"]{border-color:var(--uf-bordeaux)!important;box-shadow:0 0 0 3px rgba(142,38,29,.14)}
.uf .uf-erreur{margin:7px 0 0;font-size:13px;font-weight:700;color:var(--uf-bordeaux);line-height:1.5}

.uf .uf-accord{
  display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;
  padding-left:14px;border-left:2px solid var(--uf-line);
  font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--uf-muted);line-height:1.65;cursor:pointer;
}
.uf .uf-accord input{margin:3px 0 0;width:15px;height:15px;flex:none;accent-color:var(--uf-bordeaux)}
.uf a{
  color:var(--uf-bordeaux);font-weight:700;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;
}
.uf a:hover{color:var(--uf-bordeaux-d)}
/* piège à robots : hors écran, et retiré du parcours clavier comme du lecteur */
.uf .uf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

.uf .uf-envoi{
  margin-top:24px;padding:14px 32px;border:0;border-radius:3px;
  background:var(--uf-bordeaux);color:#fff;font-family:var(--uf-sans);font-size:14px;
  font-weight:700;letter-spacing:.06em;line-height:1.2;cursor:pointer;transition:background .15s;
}
.uf .uf-envoi:hover{background:var(--uf-bordeaux-d)}
.uf .uf-envoi:disabled{opacity:.5;cursor:default}
.uf .uf-bouton{
  display:inline-block;margin-top:18px;padding:14px 32px;border-radius:3px;
  background:var(--uf-bordeaux);color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-decoration:none;
}
.uf .uf-bouton:hover{background:var(--uf-bordeaux-d);color:#fff}

.uf .uf-note{margin:14px 0 0;font-size:13.5px;min-height:1px;line-height:1.6}
.uf .uf-note.is-ko{color:var(--uf-bordeaux);font-weight:700}
.uf .uf-note.is-ok{color:var(--uf-ok);font-weight:700}

.uf .uf-envoi:focus-visible,.uf a:focus-visible,.uf input:focus-visible{
  outline:2px solid var(--uf-terracotta);outline-offset:3px;
}

/* La carte peut être étroite dans une colonne d'article alors que la fenêtre
   est large : c'est la carte qu'on mesure, pas la fenêtre. */
@container (max-width:300px){
  .uf .uf-ligne{display:block}
  .uf .uf-titre{font-size:29px}
}
@media (max-width:560px){
  .uf{padding:30px 26px 34px}
}

/* ═══ Onglet fixe ═══════════════════════════════════════════════════════════
   Posé en bas à droite, à l'horizontale : c'est le seul élément de la page
   qu'il faut remarquer sans le chercher, et une languette verticale sur le
   bord ne se lit pas d'un coup d'œil. Deux lignes, ce qu'on propose et ce que
   ça coûte, plus une croix pour le renvoyer.                                */
.uf-tab{
  position:fixed;right:22px;bottom:22px;z-index:1200;
  display:flex;align-items:center;
  font-family:Lato,system-ui,-apple-system,sans-serif;
  background:#8e261d;border-radius:3px;
  box-shadow:0 12px 34px rgba(24,20,18,.38);
  transition:background .18s,transform .18s,opacity .2s;
}
.uf-tab[hidden]{display:none!important}
.uf-tab:hover{background:#6f1a14;transform:translateY(-2px)}
.uf-tab__open{
  display:flex;align-items:center;gap:13px;text-align:left;
  background:none;border:0;color:#fff;cursor:pointer;
  padding:12px 8px 12px 13px;font-family:inherit;
}
.uf-tab__mark{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.15);display:grid;place-items:center;
  font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1;
}
.uf-tab__txt{display:block;line-height:1.3}
.uf-tab__txt b{display:block;font-size:14px;font-weight:700}
.uf-tab__txt i{display:block;font-style:normal;font-size:11.5px;color:#f2cac5;margin-top:2px}
.uf-tab__close{
  flex:none;align-self:stretch;width:34px;padding:0;
  background:none;border:0;border-left:1px solid rgba(255,255,255,.18);
  color:#f2cac5;font-size:17px;line-height:1;cursor:pointer;
}
.uf-tab__close:hover{color:#fff}
.uf-tab button:focus-visible{outline:2px solid #f2cac5;outline-offset:-3px}

@media (max-width:760px){
  .uf-tab{right:10px;left:10px;bottom:10px}
  .uf-tab__open{flex:1}
}

/* ═══ Fenêtre modale ═══════════════════════════════════════════════════════ */
.uf-modal{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:24px}
.uf-modal[hidden]{display:none!important}
.uf-modal__back{position:absolute;inset:0;background:rgba(20,13,12,.62)}
.uf-modal__card{
  position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;
  box-shadow:0 30px 80px -20px rgba(21,21,20,.5);
}
/* dans la fenêtre, la carte porte déjà l'ombre et le cadre : elle occupe tout */
.uf-modal__card .uf{max-width:none;border:0;border-top:3px solid var(--uf-bordeaux)}
.uf-modal__x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;padding:0;
  border:1px solid #ded5cd;background:#fbf8f3;color:#7d7771;
  font-size:19px;line-height:1;cursor:pointer;
}
.uf-modal__x:hover{border-color:#151514;color:#151514}
.uf-modal__x:focus-visible{outline:2px solid #c9756c;outline-offset:2px}
body.uf-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .uf-tab,.uf-tab__open{transition:none!important}
}