/* meetly.css — système de design unique partagé par toutes les pages Meetly.
   Règle : UNE seule couleur d'action (le bleu). Les couleurs sémantiques (vert/ambre/rouge)
   sont réservées aux STATUTS. Tout le reste est neutre. Aucune couleur décorative. */

/* La police est chez nous, plus chez Google. Trois raisons : une page qui dépend d'un
   serveur tiers s'affiche dans la police de secours quand ce serveur est lent ou bloqué,
   et personne ne s'en rend compte ; hotliner Google Fonts envoie l'adresse IP de chaque
   client européen à Google, ce qui a déjà valu des condamnations ; et le fichier est
   variable, donc les quatre graisses tiennent dans 134 Ko au total. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin.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:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* surfaces */
  --surface:#ffffff;
  --canvas:#f9fafb;
  --line:#e5e7eb;
  --line-soft:#f1f3f5;

  /* texte */
  --ink:#0a0a0a;
  --body:#262626;
  --muted:#6b7280;
  --faint:#9ca3af;

  /* action unique */
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --brand-soft:#eff6ff;
  --brand-line:#dbe4f7;
  --ring:0 0 0 3px rgba(37,99,235,.16);

  /* statuts (jamais décoratifs) */
  --ok:#047857;   --ok-soft:#f0fdf9;   --ok-line:#a7e8d0;
  --warn:#b45309; --warn-soft:#fffbeb; --warn-line:#fde68a;
  --bad:#dc2626;  --bad-soft:#fef2f2;  --bad-line:#fecaca;
  /* La coche est BLEUE. Eric, le 11/08 : « vraiment 2 couleurs, du blanc et du bleu,
     partout, vraiment la même chose ». On avait mis un carré encre pour ne pas
     concurrencer le bouton principal ; deux encres différentes dans une même carte se
     voient plus que la concurrence qu'on cherchait à éviter. Une seule couleur d'action. */
  --coche:var(--brand); --coche-hover:var(--brand-dark);
  /* le crochet, dessine une fois : meme geste que les icones, bouts et angles arrondis */
  --crochet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3.1L12.8 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* formes */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-pill:999px;
  /* les badges d'etat : rectangle arrondi, pas une gelule. Une gelule se lit comme un
     bouton, et l'oeil essaie de cliquer dessus. */
  --r-badge:9px;
  --sh-1:0 1px 2px rgba(10,20,50,.04);
  --sh-2:0 4px 12px rgba(10,20,50,.06);
  --sh-pop:0 14px 38px -14px rgba(10,20,50,.22);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.02em}
h1{font-size:32px;line-height:1.2}
h2{font-size:20px;line-height:1.35}
h3{font-size:16px;line-height:1.4}
@media(max-width:640px){ h1{font-size:24px} }
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 10px}

/* un seul anneau de focus, partout, au clavier uniquement */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-lg);
  font:600 14px var(--font);cursor:pointer;background:var(--brand);color:#fff;
  transition:background .14s,border-color .14s,box-shadow .14s,color .14s;white-space:nowrap;
}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:translateY(.5px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;flex:none}

.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.sec:hover{background:var(--canvas);box-shadow:var(--sh-2)}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn.ghost:hover{background:var(--canvas);color:var(--ink)}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{height:36px;padding:0 13px;font-size:13px;border-radius:var(--r)}
.btn.block{width:100%}

/* bouton icône carré (36px = cible tactile correcte) */
.iconbtn{
  width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  color:var(--muted);cursor:pointer;transition:.14s;
}
.iconbtn:hover{background:var(--canvas);color:var(--ink)}
.iconbtn.danger:hover{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none}

/* ---------- champs ---------- */
label{display:block;font:500 13px var(--font);color:var(--ink);margin:0 0 7px}
label .opt{color:var(--faint);font-weight:400}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 13px;
  font:15px var(--font);color:var(--ink);background:var(--surface);
}
textarea{line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:#d5d9e0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input[aria-invalid="true"]{border-color:var(--bad)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field{margin-bottom:16px}
.field .help{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.field .bad{font-size:12.5px;color:var(--bad);margin-top:6px;display:none}
.field.err .bad{display:block}

/* champ avec préfixe (ex : meetly.co/ ) */
/* L'unité se lit dans le champ, pas entre parenthèses dans l'étiquette : « Un créneau
   toutes les [30] minutes » se lit comme une phrase, « Intervalle des créneaux (min) »
   se lit comme un fichier de configuration. */
.unite{position:relative;display:block}
.unite input{padding-right:104px}
.unite span{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:13px;pointer-events:none;white-space:nowrap}

.prefixed{display:flex;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.prefixed:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.prefixed .pfx{display:flex;align-items:center;padding:0 12px;background:var(--canvas);border-right:1px solid var(--line);color:var(--muted);font-size:13.5px;white-space:nowrap}
.prefixed input{border:0;border-radius:0}
.prefixed input:focus{box-shadow:none}

/* ---------- cartes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.card.pad-sm{padding:18px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:16px;flex-wrap:wrap}
/* Sur écran étroit, le titre et son option se disputaient la ligne : l'icône partait
   au-dessus du mot, et la case à cocher venait se loger à côté de l'icône. */
@media(max-width:560px){ .card-hd{align-items:flex-start;gap:2px} .card-hd>*{flex-basis:100%} }
.card-sub{color:var(--muted);font-size:13.5px;margin:6px 0 18px;line-height:1.55}
.sep{border:0;border-top:1px solid var(--line-soft);margin:20px 0}

/* Les icônes sont remises à la même surface optique par une mise à l'échelle (voir
   meetly.js). Sans ceci, l'échelle emporterait le trait avec elle et une icône réduite
   de 14 % paraîtrait plus fine que ses voisines. */
.mic *{vector-effect:non-scaling-stroke}

/* ---------- pastilles & badges ----------
   .pill = neutre par défaut. On ne colore QUE si ça porte un statut. */
.pill{display:inline-flex;align-items:center;gap:6px;flex:none;
  font:600 12px var(--font);letter-spacing:0;padding:6px 11px;border-radius:var(--r-badge);
  background:var(--canvas);color:var(--muted);border:1px solid var(--line)}
.pill svg{width:13px;height:13px;stroke:currentColor;fill:none}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.pill.info{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.pill::before{content:none}
.pill.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- avatar / initiales ---------- */
/* Le point de statut porte déjà la couleur, alors il reste petit et calme. */
.pill.dot::before{opacity:.85}
.pill:not(.ok):not(.warn):not(.bad):not(.info).dot::before{background:var(--faint)}
.av{width:42px;height:42px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--canvas);border:1px solid var(--line);color:var(--muted);
  font:600 14px var(--font);letter-spacing:.02em;text-transform:uppercase;user-select:none}
/* Les initiales étaient posées à plat sur un aplat pâle. Un dégradé très court et un
   liseré interne leur donnent du relief sans rien crier. */
.av.brand{background:linear-gradient(160deg,#eff6ff,#dce9fd);border-color:var(--brand-line);color:var(--brand-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.av.sm{width:30px;height:30px;font-size:11.5px}
.av.xs{width:22px;height:22px;font-size:9.5px}
img.av{object-fit:cover;padding:0;display:block}

/* Lien discret rendu par un bouton. Il faisait 15 px de haut : on vise le mot, pas
   l'espace autour, et on le rate. */
.linkbtn{border:0;background:none;padding:7px 0;margin-top:0;font:500 12.5px var(--font);
  color:var(--brand);cursor:pointer;text-align:left;min-height:32px;font-family:inherit}
.linkbtn:hover{text-decoration:underline}
.linkbtn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}

/* ---------- interrupteur ---------- */
.switch{width:44px;height:26px;flex:none;border:0;padding:0;border-radius:var(--r-pill);background:#d6dae1;position:relative;cursor:pointer;transition:background .16s;-webkit-tap-highlight-color:transparent}
.switch.on{background:var(--brand)}
/* La cible fait 44 px de haut, l'interrupteur en garde 26 : on gagne le doigt sans
   grossir le dessin. */
.switch::before{content:"";position:absolute;inset:-9px -2px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .16s}
.switch.on::after{left:21px}
.switch:focus-visible{outline:none;box-shadow:var(--ring)}
@media(prefers-reduced-motion:reduce){ .switch,.switch::after{transition:none} }

/* ---------- bandeaux ---------- */
.banner{display:flex;gap:10px;border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.5;border:1px solid}
.banner svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none;margin-top:1px}
.banner.ok{background:var(--ok-soft);border-color:var(--ok-line);color:#166534}
.banner.bad{background:var(--bad-soft);border-color:var(--bad-line);color:#991b1b}
.banner.warn{background:var(--warn-soft);border-color:var(--warn-line);color:#92400e}
.banner.info{background:var(--canvas);border-color:var(--line);color:var(--muted)}

/* case à cocher */
/* La case du navigateur ne suit ni notre rayon, ni notre trait : au milieu de champs
   dessinés elle se voyait comme une pièce rapportée. On la redessine.

   Le crochet est un VRAI trait, avec des bouts et des angles arrondis, découpé dans un
   aplat blanc. Le pliage de deux bordures qu'on faisait avant donnait un crochet aux
   bouts coupés net, jamais tout à fait centré, et qui grossissait mal : c'est ce qui
   faisait « pas beau » sans qu'on sache dire pourquoi. Là, c'est le même dessin que les
   icônes du reste de l'interface. */
/* La zone qu'on vise fait 40 px de haut, pas 20 : au doigt comme à la souris, une case
   de 20 px se rate une fois sur trois. Le carré, lui, reste petit et discret. */
.check{display:flex;align-items:flex-start;gap:11px;margin:0;font-weight:400;font-size:14px;
  color:var(--body);cursor:pointer;line-height:1.45;padding:9px 0;
  -webkit-tap-highlight-color:transparent}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;position:relative;
  width:20px;height:20px;margin:0;padding:0;
  border:1.5px solid #d3d8e0;border-radius:6px;background:var(--surface);
  cursor:pointer;box-shadow:inset 0 1px 1px rgba(10,20,50,.04);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
/* La cible déborde du carré sans déplacer quoi que ce soit à l'écran. */
.check input::before{content:"";position:absolute;inset:-11px -8px}
.check:hover input:not(:disabled){border-color:#b8c0cc}
.check input:active:not(:disabled){transform:scale(.94)}
.check input:checked{background:var(--coche);border-color:var(--coche);box-shadow:none}
.check:hover input:checked:not(:disabled){background:var(--coche-hover);border-color:var(--coche-hover)}
.check input::after{
  content:"";position:absolute;inset:0;background:#fff;
  -webkit-mask:var(--crochet) center / 12px 12px no-repeat;
          mask:var(--crochet) center / 12px 12px no-repeat;
  opacity:0;transform:scale(.6);
  transition:opacity .1s ease,transform .16s cubic-bezier(.2,.9,.3,1.35);
}
.check input:checked::after{opacity:1;transform:scale(1)}
.check input:focus-visible{outline:none;border-color:var(--coche);box-shadow:var(--ring)}
.check input:disabled{background:var(--canvas);border-color:var(--line);cursor:not-allowed;opacity:.55}
.check input:disabled ~ span{color:var(--faint)}
.check > span{padding-top:1px}

/* Une option qui vit seule dans une carte mérite sa ligne cliquable, pas une case
   posée dans le vide. Le clic prend toute la largeur. */
.check.ligne{align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);transition:border-color .13s ease,background .13s ease}
.check.ligne:hover{border-color:#d5d9e0;background:var(--canvas)}
.check.ligne:has(input:checked){border-color:#c9cfd8;background:var(--canvas)}
.check.ligne:has(input:checked) span{color:var(--ink);font-weight:500}

/* sélecteur compact, pour une barre d'outils plutôt qu'un formulaire */
select.mini{width:auto;padding:9px 34px 9px 12px;font-size:13.5px;background-position:right 10px center}

/* ---------- état vide ---------- */
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:54px 24px;text-align:center}
.empty .ic{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--canvas);display:flex;align-items:center;justify-content:center}
.empty .ic svg{width:21px;height:21px;stroke:var(--faint);fill:none;stroke-width:1.8}
.empty b{display:block;color:var(--ink);font-weight:600;margin-bottom:5px}
/* Le texte restait en ligne, donc le bouton se posait au bout de la dernière phrase et
   la recouvrait sur écran étroit. Chacun sa ligne, et une largeur de lecture tenable. */
.empty span{display:block;color:var(--muted);font-size:14px;max-width:46ch;margin:0 auto;line-height:1.55}
.empty .btn{margin-top:18px}
@media(max-width:520px){ .empty{padding:38px 18px} }

/* ---------- chargement ---------- */
.sk{background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);background-size:400% 100%;
  animation:skw 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes skw{0%{background-position:100% 50%}100%{background-position:0 50%}}
.spin{width:24px;height:24px;border:2.5px solid var(--line);border-top-color:var(--brand);border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
.spin.sm{width:16px;height:16px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .spin{border-color:rgba(255,255,255,.45);border-top-color:#fff}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:12px 16px;font:500 14px var(--font);box-shadow:var(--sh-pop);animation:tin .18s ease}
.toast svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none}
.toast.ok svg{stroke:#4ade80} .toast.bad svg{stroke:#fca5a5}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- boîte de dialogue ---------- */
.ovl{position:fixed;inset:0;background:rgba(15,23,42,.44);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;animation:fin .14s ease}
@keyframes fin{from{opacity:0}to{opacity:1}}
.dlg{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);width:min(420px,100%);padding:26px}
.dlg.wide{width:min(560px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
/* Deux champs côte à côte, un seul en dessous de 520 px. C'était écrit en style dans le
   balisage, donc aucune règle d'écran ne pouvait le contredire : sur téléphone, l'email
   et le téléphone se partageaient 168 px chacun. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.duo.un{grid-template-columns:1fr}
@media(max-width:520px){ .duo{grid-template-columns:1fr;gap:0} }
.dlg h3{font-size:18px;margin-bottom:8px}
.dlg p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.dlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
@media(max-width:420px){ .dlg .row{flex-direction:column-reverse} .dlg .row .btn{width:100%} }

/* ---------- pied de page commun ----------
   Une bande à part, pas trois mots gris qui flottent au bas du contenu : sa propre
   surface blanche, son propre trait, sa propre respiration. Aucun logo, la marque est
   déjà en haut de la page. Les liens font 36 px de haut, pas 19. */
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--faint);font-size:12.5px;padding:16px 0;margin-top:34px;
  border-top:1px solid var(--line)}
.mfoot .pw{color:var(--muted)}
.mfoot .pw b{color:var(--body);font-weight:600;letter-spacing:-.01em}
.mfoot .pw b i{font-style:normal;color:var(--brand)}
.mfoot nav{display:flex;gap:2px;margin-right:-11px}
.mfoot nav a{color:var(--faint);text-decoration:none;display:inline-flex;align-items:center;
  min-height:36px;padding:0 11px;border-radius:var(--r-sm)}
.mfoot nav a:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}
.mfoot nav a:focus-visible{outline:none;box-shadow:var(--ring)}
@media(max-width:520px){
  .mfoot{justify-content:center;gap:2px;margin-top:26px}
  .mfoot .pw:empty{display:none}
  .mfoot nav{margin:0;flex-wrap:wrap;justify-content:center}
}