/* Hey Mika : jetons et composants communs, d'après les maquettes Miro « FLOW - HEY MIKA » (Mickael Sadoun, 05/11).
   Échelle : les maquettes sont des captures 2880×1800 d'une fenêtre de 1600×1000 (facteur 1,8). Une mesure prise
   sur l'image d'origine se divise par 1,8 ; sur l'image affichée à 2000 px de large, elle se multiplie par 0,8.
   Titres en Syne 700, texte en Manrope. Aucune couleur hors de cette palette. */

:root {
  --fond: #FDF7F0;
  --fond-2: #FEFBF5;
  --carte: #FFFFFF;
  --encre: #2C1A14;
  --texte: #6D5950;
  --doux: #9A877D;
  --ligne: #E8E6E5;
  --ligne-2: #E6DED7;
  --champ-bord: #D9D6D5;
  --orange: #EE5D2B;
  --orange-2: #EF7E32;
  --orange-texte: #C2410C;
  --orange-pale: #F8BDA8;
  --peche: #FDE5DA;
  --peche-clair: #FFF6F1;
  --sable: #FAECDD;
  --sable-2: #F1E3D6;
  --sable-3: #EADCCF;
  --vert: #1F6F5C;
  --vert-fond: #DDF1E8;
  --vert-vif: #2FB37A;
  --bleu: #3B5BA9;
  --bleu-fond: #E8EDFB;
  --jaune: #9A6212;
  --jaune-fond: #FDF0D9;
  --gris: #7A6A61;
  --gris-fond: #F1E8E0;
  --linkedin: #0A66C2;
  --whatsapp: #25D366;
  --wa-entete: #1F6F5C;
  --wa-fond: #EFE7DE;
  --wa-bulle: #CDF1C5;
  --voile: rgba(44, 26, 20, 0.36);

  --titre: "Syne", "Manrope", system-ui, sans-serif;
  --corps: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-carte: 22px;
  --r-bloc: 16px;
  --r-champ: 12px;
  --r-pilule: 999px;
  --ombre-carte: 0 1px 2px rgba(44, 26, 20, 0.04), 0 8px 22px rgba(120, 72, 40, 0.06);
  --ombre-haute: 0 18px 48px rgba(60, 30, 15, 0.16), 0 2px 6px rgba(60, 30, 15, 0.06);
  --ombre-orange: 0 10px 24px rgba(238, 93, 43, 0.28);
  --anneau: 0 0 0 4px rgba(238, 93, 43, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--encre);
  font: 400 15px/1.5 var(--corps); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Syne dessine par défaut des chiffres elzéviriens ; les maquettes ont des chiffres alignés. Hérité, et le raccourci
     « font: » ne le remet pas à zéro (contrairement à font-variant-numeric). */
  font-feature-settings: "lnum" 1;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- typographie ---------- */
.t-page { font: 700 33px/1.15 var(--titre); color: var(--encre); }
.t-carte { font: 700 21px/1.2 var(--titre); color: var(--encre); }
.t-bloc { font: 700 17px/1.25 var(--titre); color: var(--encre); }
.t-sous { font-size: 16px; line-height: 1.5; color: var(--texte); }
.t-label { font-size: 14px; font-weight: 600; color: var(--encre); }
.t-petit { font-size: 13px; color: var(--texte); }
.t-doux { color: var(--doux); }
.t-sur { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux); }
.t-orange { color: var(--orange-texte); }
.t-degrade { background: linear-gradient(90deg, var(--orange), var(--orange-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
strong, b { font-weight: 700; color: var(--encre); }
.t-page, .t-carte, .t-bloc, .modale-entete h2, .logo, [style*="--titre"] { font-variant-numeric: lining-nums; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px;
  border-radius: var(--r-pilule); font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.btn-primaire { background: var(--orange); color: #fff; box-shadow: var(--ombre-orange); }
.btn-primaire:hover:not(:disabled) { background: #E5531F; }
.btn-secondaire { background: #fff; color: var(--encre); border: 1px solid var(--champ-bord); }
.btn-secondaire:hover:not(:disabled) { border-color: #D6CEC8; background: #FFFCFA; }
.btn-sombre { background: #111; color: #fff; border-radius: 14px; }
.btn-sombre:hover:not(:disabled) { background: #000; }
.btn-doux { background: var(--sable); color: var(--encre); }
.btn-lien { height: auto; padding: 0; border-radius: 4px; color: var(--orange-texte); font-weight: 700; font-size: inherit; }
.btn-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-md { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 17px; }
.btn-plein { width: 100%; }
.btn-icone { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: #fff; border: 1px solid var(--ligne); display: inline-grid; place-items: center; color: var(--encre); }
.btn-icone:hover { border-color: #D6CEC8; }
.btn-icone svg { width: 20px; height: 20px; }
.btn.charge { pointer-events: none; }
.btn.charge svg.tourne { animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- champs ---------- */
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ > label, .champ > .label { font-size: 14px; font-weight: 600; color: var(--encre); }
.champ .facultatif { font-weight: 400; color: var(--doux); }
.saisie {
  width: 100%; height: 51px; padding: 0 16px; border: 1px solid var(--champ-bord); border-radius: var(--r-champ);
  background: #fff; color: var(--encre); font-size: 15.5px; outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea.saisie { height: auto; min-height: 96px; padding: 13px 16px; line-height: 1.55; resize: vertical; }
.saisie::placeholder { color: #B5A69D; }
.saisie:hover { border-color: #D8D0CA; }
.saisie:focus, .saisie.focus { border-color: var(--orange); box-shadow: var(--anneau); }
.saisie.ok { border-color: #8FB7AD; }
.saisie.erreur { border-color: #D9534F; box-shadow: 0 0 0 4px rgba(217, 83, 79, .1); }
.saisie-groupe { position: relative; display: flex; align-items: center; }
.saisie-groupe > .saisie { flex: 1; }
.saisie-groupe > .gauche { position: absolute; left: 16px; color: var(--encre); pointer-events: none; display: grid; place-items: center; }
.saisie-groupe > .gauche + .saisie { padding-left: 46px; }
.saisie-groupe > .droite { position: absolute; right: 14px; display: flex; align-items: center; gap: 8px; color: var(--encre); }
.saisie-groupe svg { width: 18px; height: 18px; }
select.saisie { appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232C1A14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.aide { font-size: 13px; color: var(--texte); }
.aide.vert { color: var(--vert); display: inline-flex; align-items: center; gap: 6px; }
.aide.erreur { color: #B42318; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }

/* case à cocher et bouton radio */
.case { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; color: var(--encre); user-select: none; }
.case input { position: absolute; opacity: 0; pointer-events: none; }
.case .boite { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid #D9CFC8; background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.case .boite svg { width: 14px; height: 14px; color: #fff; opacity: 0; stroke-width: 3; }
.case input:checked + .boite { background: var(--orange); border-color: var(--orange); }
.case input:checked + .boite svg { opacity: 1; }
.case input:focus-visible + .boite { box-shadow: var(--anneau); }
.rond { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid #D9CFC8; background: #fff; display: grid; place-items: center; }
.rond::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .15s; }
.choisi .rond, input:checked + .rond { border-color: var(--orange); }
.choisi .rond::after, input:checked + .rond::after { transform: scale(1); }

/* interrupteur */
.inter { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; background: var(--sable-3); cursor: pointer; transition: background .2s; }
.inter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(44,26,20,.25); transition: transform .2s; }
.inter[aria-checked="true"] { background: var(--orange); }
.inter[aria-checked="true"]::after { transform: translateX(18px); }
.inter:disabled { opacity: .5; cursor: not-allowed; }

/* segmenté (Particulier / Professionnel, ≤ 10 s / ≤ 30 s / ≤ 1 min, Liste / Calendrier…) */
.segment { display: inline-flex; padding: 5px; gap: 4px; border-radius: var(--r-pilule); background: var(--sable); }
.segment button { height: 42px; padding: 0 20px; border-radius: var(--r-pilule); font-size: 15.5px; font-weight: 600; color: var(--texte); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.segment button:hover { color: var(--encre); }
.segment button[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(44,26,20,.08), 0 2px 8px rgba(44,26,20,.06); }

/* ---------- puces ---------- */
.puce { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: var(--r-pilule); font-size: 15px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.puce svg { width: 14px; height: 14px; }
.puce-peche { background: var(--peche); border-color: #F6C7B3; color: var(--orange-texte); }
.puce-contour { background: #fff; border-color: var(--champ-bord); color: var(--encre); }
.puce-sable { background: var(--sable); color: var(--encre); }
.puce-orange { background: var(--orange); color: #fff; }
button.puce { cursor: pointer; }
button.puce-contour:hover { border-color: #D6CEC8; }
.puce .retirer { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; color: currentColor; opacity: .75; }
.puce .retirer:hover { opacity: 1; background: rgba(194, 65, 12, .1); }
.puce-pointillee { border: 1.5px dashed #E6C9BA; background: #fff; color: var(--encre); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pilule); font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge svg { width: 13px; height: 13px; }
.badge-orange { background: var(--orange); color: #fff; }
.badge-peche { background: var(--peche); color: var(--orange-texte); }
.badge-vert { background: var(--vert-fond); color: var(--vert); }
.badge-sable { background: var(--sable); color: var(--texte); }
.badge-bleu { background: var(--bleu-fond); color: var(--bleu); }
.compteur { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--orange); color: #fff; font-size: 12.5px; font-weight: 700; }

/* statuts d'une vidéo (maquette 15) */
.statut { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 99px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut-sujet { background: var(--gris-fond); color: var(--gris); }
.statut-storyboard { background: var(--bleu-fond); color: var(--bleu); }
.statut-tournage { background: var(--sable); color: var(--texte); }
.statut-validation { background: var(--peche); color: var(--orange-texte); }
.statut-planifie { background: var(--jaune-fond); color: var(--jaune); }
.statut-publie { background: var(--vert-fond); color: var(--vert); }

/* ---------- cartes et blocs ---------- */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-carte); box-shadow: var(--ombre-carte); }
.carte-pad { padding: 28px; }
.carte.active, .carte.choisie { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 10px 26px rgba(238, 93, 43, .10); }
.bloc-sable { background: var(--sable); border-radius: var(--r-bloc); }
.bloc-peche { background: var(--peche-clair); border: 1px solid #F8D3C3; border-radius: var(--r-bloc); }
.separateur { height: 1px; background: var(--ligne); border: 0; margin: 0; }
.ou-sep { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--texte); letter-spacing: .02em; }
.ou-sep::before, .ou-sep::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }

/* barre de progression */
.progres { height: 8px; border-radius: 99px; background: var(--sable-2); overflow: hidden; }
.progres > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); transition: width .5s ease; }

/* pastille d'icône (cartes d'étape, connecteurs, sujets) */
.pastille { width: 48px; height: 48px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--sable); color: var(--orange-texte); }
.pastille svg { width: 22px; height: 22px; }
.pastille-orange { background: var(--orange); color: #fff; }
.pastille-peche { background: var(--peche); color: var(--orange-texte); }

/* avatar */
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E9D5C3; color: #6B3A22; font-weight: 700; font-size: 15px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* chargement d'une zone (squelettes de la maquette 06) */
.squelette { border-radius: 99px; background: linear-gradient(90deg, #F3E9E1 0%, #F9F2EC 50%, #F3E9E1 100%); background-size: 200% 100%; animation: luit 1.4s ease-in-out infinite; }
@keyframes luit { to { background-position: -200% 0; } }
.tourne { animation: tourne 0.9s linear infinite; }

/* ---------- fenêtres, menus, bulles d'information ---------- */
.voile { position: fixed; inset: 0; z-index: 80; background: var(--voile); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; animation: apparait .18s ease; }
.modale { position: relative; width: min(624px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 30px; padding: 32px 32px 30px; box-shadow: var(--ombre-haute); animation: monte .22s cubic-bezier(.2,.8,.2,1); }
.modale-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modale-entete h2 { font: 700 29px/1.2 var(--titre); color: var(--encre); }
.modale-entete p { margin-top: 12px; font-size: 15px; color: var(--texte); }
.modale .fermer { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--ligne); display: grid; place-items: center; color: var(--encre); background: #fff; }
.modale .fermer:hover { border-color: #D6CEC8; }
.modale .fermer svg { width: 18px; height: 18px; }
.modale-pied { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 28px; }
@keyframes apparait { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.menu { position: fixed; z-index: 90; min-width: 220px; padding: 8px; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre-haute); animation: monte .14s ease; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 11px; font-size: 15px; font-weight: 500; color: var(--encre); text-align: left; cursor: pointer; }
.menu button:hover, .menu a:hover, .menu .actif { background: var(--sable); }
.menu svg { width: 18px; height: 18px; flex: none; }
.menu hr { margin: 6px 4px; border: 0; height: 1px; background: var(--ligne); }
.menu .danger { color: var(--orange-texte); }

.toasts { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 16px; background: var(--encre); color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: var(--ombre-haute); animation: monte .2s ease; pointer-events: auto; }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.erreur { background: #8E2A12; }
.toast.ok svg { color: #7FE0B4; }

.info-bulle { position: relative; display: inline-grid; place-items: center; color: var(--texte); cursor: help; }
.info-bulle svg { width: 16px; height: 16px; }
.info-bulle .texte { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 10px; background: var(--encre); color: #fff; font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.info-bulle:hover .texte, .info-bulle:focus .texte { opacity: 1; }

/* ---------- mascotte ---------- */
.mascotte { display: block; flex: none; filter: drop-shadow(0 6px 10px rgba(238, 93, 43, .22)); }

/* ---------- utilitaires ---------- */
.ligne { display: flex; align-items: center; gap: 12px; }
.ligne-entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pile { display: flex; flex-direction: column; }
.pousse { margin-left: auto; }
.cliquable { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 760px) {
  body { font-size: 15px; }
  .t-page { font-size: 27px; }
  .grille-2 { grid-template-columns: 1fr; }
  .modale { padding: 24px 20px; border-radius: 24px; }
  .modale-entete h2 { font-size: 23px; }
}