/* OWAN — design tokens relevés sur https://onboarding.owan.fr (26/09/2026).
   Source : /static/owan.css + styles et SVG en ligne des pages. Rien d'inventé ;
   ce qui n'existe pas dans le funnel est marqué « à définir » dans le brandbook.
   Police chargée par le funnel :
   @import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); */

:root{

  /* ── Couleurs de base, déclarées dans :root de owan.css (« palette projet ») ── */
  --owan-dark: #0E1322;                                 /* Encre. :root --dark (identique à --ink). */
  --owan-accent: #542DF3;                               /* Primaire : bouton, focus, liens d'action. :root --accent. */
  --owan-success: #9AD567;                              /* Succès. Jamais utilisé plein : seulement en teintes (rgba). :root --success. */
  --owan-warning: #FFC05F;                              /* Alerte. Jamais utilisé plein : seulement en teintes (rgba). :root --warning. */
  --owan-danger: #F86251;                               /* Erreur : bordure des champs en erreur. :root --danger. */

  /* ── Dérivés déclarés dans :root de owan.css ── */
  --owan-ink: #0E1322;                                  /* Texte principal. :root --ink. */
  --owan-muted: rgba(14,19,34,.56);                     /* Texte secondaire : libellés, sous-titres. Rendu #787B83 sur blanc. :root --muted. */
  --owan-muted-2: rgba(14,19,34,.42);                   /* Texte tertiaire : notes, icônes, libellé flottant. Rendu #9A9CA2 sur blanc. :root --muted-2. */
  --owan-line: rgba(14,19,34,.06);                      /* Bordure des champs au repos. :root --line. */
  --owan-focus: rgba(84,45,243,.30);                    /* Bordure au focus (recherche pays). :root --focus. */
  --owan-focus-ring: rgba(84,45,243,.12);               /* Anneau de focus des champs. :root --focus-ring. */
  --owan-card: #FFFFFF;                                 /* Fond des cartes. :root --card. */
  --owan-unipro: #F5F7FB;                               /* Fond de l'encart Unipro. :root --unipro. */

  /* ── Fonds écrits en dur dans les règles ── */
  --owan-bg-top: #EFF2F8;                               /* Haut du fond de page (dégradé vers blanc). body. */
  --owan-white: #FFFFFF;                                /* Blanc : bas du fond, champs, puces, listes. body, .field input, .puce. */
  --owan-ghost-hover: #FAF9FF;                          /* Fond du bouton secondaire au survol. .cta-ghost:hover. */

  /* ── Bouton principal ── */
  --owan-cta-top: #6B47F7;                              /* Haut du dégradé du bouton principal. .cta. */
  --owan-cta-bottom: #4A27DC;                           /* Bas du dégradé du bouton principal. .cta. */

  /* ── Couleurs d'état écrites en dur ── */
  --owan-success-ink: #4D7A27;                          /* Texte vert : badge sécurité, badge par défaut, case verte. .secure, .tpl-badge, .t-vert. */
  --owan-success-icon: #6AAB36;                         /* Icône verte : bouclier, cercle de validation. .secure svg, .check-ring circle, .t-vert. */
  --owan-success-strong: #5D9A32;                       /* Coche de validation, bouton « ✓ Enregistré ». .check-trait, .tpl-save.saved. */
  --owan-danger-ink: #C23B2D;                           /* Texte des messages d'erreur. .erreur-box. */
  --owan-warning-ink: #8A6212;                          /* Texte ambre : badge SMS, pastille ambre. .tpl-badge.sms, .t-ambre. */
  --owan-warning-icon: #C8891A;                         /* Icône ambre (page /paiements). .t-ambre --teinte. */
  --owan-social-ink: #BE185D;                           /* Texte du badge « Réseaux ». .tpl-badge.social. */

  /* ── Couleur tierce ── */
  --owan-telegram: #229ED9;                             /* Avion Telegram de l'étape 6 (couleur de Telegram, pas d'OWAN). */

  /* ── Teintes (couleur de base + transparence) ── */
  --owan-success-tile-from: rgba(154,213,103,.28);      /* Tuile d'icône, début du dégradé. .icone. */
  --owan-success-tile-to: rgba(154,213,103,.12);        /* Tuile d'icône, fin du dégradé. .icone. */
  --owan-success-tint: rgba(154,213,103,.16);           /* Fond du badge sécurité et de la case verte. .secure, .t-vert --fond. */
  --owan-success-badge: rgba(154,213,103,.18);          /* Fond du badge de catégorie par défaut. .tpl-badge. */
  --owan-success-tile-border: rgba(154,213,103,.37);    /* Bordure de la tuile d'icône. .icone. */
  --owan-success-line: rgba(154,213,103,.45);           /* Bordure de la case verte. .t-vert --trait. */
  --owan-danger-tint: rgba(248,98,81,.10);              /* Fond d'erreur et halo du champ en erreur. .erreur-box, .field input.err. */
  --owan-danger-line: rgba(248,98,81,.30);              /* Bordure du message d'erreur. .erreur-box. */
  --owan-warning-tint: rgba(255,192,95,.18);            /* Fond du badge SMS et de la pastille ambre. .tpl-badge.sms, .t-ambre --fond. */
  --owan-warning-line: rgba(255,192,95,.55);            /* Bordure ambre. .t-ambre --trait. */
  --owan-accent-07: rgba(84,45,243,.07);                /* Fond de la case bleue et de la pastille cochée. .t-bleu --fond, .puce.on. */
  --owan-accent-08: rgba(84,45,243,.08);                /* Surlignage de liste, fond des variables. .iti__highlight, .banque-liste li:hover, .tpl-vars code. */
  --owan-accent-10: rgba(84,45,243,.1);                 /* Fond du badge « Email ». .tpl-badge.email. */
  --owan-accent-22: rgba(84,45,243,.22);                /* Bordure du bouton secondaire. .cta-ghost. */
  --owan-accent-24: rgba(84,45,243,.24);                /* Bordure de pastille au survol. .puce:hover. */
  --owan-accent-28: rgba(84,45,243,.28);                /* Bordure de la case bleue. .t-bleu --trait. */
  --owan-social-tint: rgba(219,39,119,.12);             /* Fond du badge « Réseaux ». .tpl-badge.social. */
  --owan-ink-035: rgba(14,19,34,.035);                  /* Fond d'une case verrouillée sans teinte. .verrou. */
  --owan-ink-045: rgba(14,19,34,.045);                  /* Fond de la pastille « Étape 1 / 6 ». .step-pill. */
  --owan-ink-05: rgba(14,19,34,.05);                    /* Fond du bouton œil au survol. .eye:hover. */
  --owan-ink-18: rgba(14,19,34,.18);                    /* Trait de progression inactif. .bar. */
  --owan-white-90: rgba(255,255,255,.9);                /* Reflet : liseré haut de carte, éclat du trait courant. .card, .bar.current::after. */

  /* ── Dégradés ── */
  --owan-grad-signature: linear-gradient(var(--owan-grad-angle, 45deg), #8978F9 0%, #8282FC 8%, #838AF9 16%, #8B93FA 25%, #AE7EF9 33%, #CD69F5 42%, #D264F6 50%, #F87C42 58%, #F88B45 66%, #F99C4E 75%, #FBB05C 83%, #FCC16C 92%, #FFDDA4 100%); /* Mot en dégradé des titres (.grad), « répliqué depuis Gradient-square.webp, sans grain ». Angle 45deg qui tourne de 360° en 18 s. */
  --owan-grad-cta: linear-gradient(180deg, #6B47F7 0%, #542DF3 52%, #4A27DC 100%); /* Bouton principal. .cta. */
  --owan-grad-page: linear-gradient(180deg, #EFF2F8 0%, #FFFFFF 58%); /* Fond de page, attaché à la fenêtre. body. */
  --owan-grad-tile: linear-gradient(160deg, rgba(154,213,103,.28), rgba(154,213,103,.12)); /* Tuile d'icône verte. .icone. */

  /* ── Typographie ── */
  --owan-font: 'Rethink Sans', system-ui, -apple-system, Segoe UI, sans-serif; /* Google Fonts, variable 400 à 800 + italique 500. :root --font. */
  --owan-font-weight-regular: 400;                      /* Titres, libellés, nom d'étape. */
  --owan-font-weight-medium: 500;                       /* Saisie, boutons, badges, messages. */
  --owan-font-weight-semibold: 600;                     /* Titre d'un message type, bouton Enregistrer, mot en gras du sous-titre. */
  --owan-font-weight-bold: 700;                         /* Numéro d'étape, titres de section en capitales, badges 10 px. */
  --owan-font-weight-extrabold: 800;                    /* Importée par la feuille de style, utilisée nulle part. */
  --owan-font-size-24: 24px;                            /* Titre d'accueil, titre de remerciement. .hero h1, .merci h2. */
  --owan-font-size-15: 15px;                            /* Saisie, libellés, boutons, sous-titres. .field input, .cta, .scene .sous. */
  --owan-font-size-14-5: 14.5px;                        /* Nom de l'étape, intro des messages. .step-name, .tpl-intro. */
  --owan-font-size-14: 14px;                            /* Listes déroulantes, case verrouillée, champs des messages. .iti__country-list, .verrou, .tpl-body input. */
  --owan-font-size-13-5: 13.5px;                        /* Message d'erreur, pastilles, bouton Enregistrer. .erreur-box, .puce, .tpl-save. */
  --owan-font-size-13: 13px;                            /* Pastille d'étape, badge sécurité. .step-pill, .secure. */
  --owan-font-size-12-5: 12.5px;                        /* Notes, description d'un message type. .scene .note, .tpl-head .d. */
  --owan-font-size-12: 12px;                            /* Titres de section en capitales, libellés de champ. .sect-titre, .tpl-cat, .tpl-label. */
  --owan-font-size-11-5: 11.5px;                        /* Liste des variables. .tpl-vars. */
  --owan-font-size-11: 11px;                            /* Variable [entreprise]. .tpl-vars code. */
  --owan-font-size-10: 10px;                            /* Badge Email / SMS / Réseaux. .tpl-badge. */
  --owan-font-size-title: clamp(24px, 6vw, 30px);       /* Titre de scène fluide, de 24 à 30 px. .scene h1. */
  --owan-line-height-title-scene: 1.16;                 /* .scene h1 */
  --owan-line-height-title-hero: 1.18;                  /* .hero h1 */
  --owan-line-height-title-merci: 1.2;                  /* .merci h2 */
  --owan-line-height-tight: 1.4;                        /* .tpl-head .d */
  --owan-line-height-base: 1.5;                         /* .erreur-box, .tpl-intro, textarea, .tpl-vars */
  --owan-line-height-note: 1.55;                        /* .scene .note */
  --owan-line-height-body: 1.6;                         /* .scene .sous, .merci p */
  --owan-tracking-title: -0.012em;                      /* Titres. .hero h1, .scene h1. */
  --owan-tracking-caps: 0.14em;                         /* Titres de section en capitales. .sect-titre, .tpl-cat. */

  /* ── Rayons (du plus petit au plus grand) ── */
  --owan-radius-4: 4px;                                 /* Variable [entreprise]. .tpl-vars code */
  --owan-radius-5: 5px;                                 /* Fond du libellé flottant. .field label */
  --owan-radius-8: 8px;                                 /* Pastille d'étape. .step-pill */
  --owan-radius-9: 9px;                                 /* Bouton œil, recherche et lignes de liste. .eye, .iti-search, .iti__country */
  --owan-radius-10: 10px;                               /* Champs, bouton Enregistrer. :root --radius */
  --owan-radius-11: 11px;                               /* Badge sécurité. .secure */
  --owan-radius-12: 12px;                               /* Message d'erreur. .erreur-box */
  --owan-radius-14: 14px;                               /* Listes déroulantes. .iti__country-list, .banque-liste */
  --owan-radius-15: 15px;                               /* Boutons principal et secondaire. .cta */
  --owan-radius-16: 16px;                               /* Carte de message type. .tpl-card */
  --owan-radius-18: 18px;                               /* Encart Unipro et son onglet. .unipro, .unipro-badge */
  --owan-radius-20: 20px;                               /* Badge de catégorie. .tpl-badge */
  --owan-radius-22: 22px;                               /* Tuile d'icône. .icone */
  --owan-radius-30: 30px;                               /* Carte principale. :root --radius-lg */
  --owan-radius-pill: 99px;                             /* Traits de progression, pastilles de choix. .bar, .puce */

  /* ── Espacements et gabarit (aucune échelle déclarée dans le funnel : valeurs des composants) ── */
  --owan-wrap-max: 464px;                               /* Largeur de colonne des étapes. .wrap */
  --owan-wrap-max-paiements: 600px;                     /* Colonne de /paiements. .wrap-paie */
  --owan-wrap-max-templates: 640px;                     /* Colonne de l'étape 5. .tpl-wrap */
  --owan-wrap-padding-top: 29px;                        /* .wrap */
  --owan-wrap-padding-top-desktop: 46px;                /* .wrap à partir de 700 px */
  --owan-wrap-padding-x: 18px;                          /* .wrap */
  --owan-wrap-padding-bottom: 72px;                     /* .wrap */
  --owan-card-padding-y: 22px;                          /* .card */
  --owan-card-padding-x: 20px;                          /* .card */
  --owan-block-gap: 22px;                               /* Écart entre blocs : badge sécurité, encart Unipro, traits, sections. .secure, .unipro, .bars, .sect */
  --owan-field-gap: 13px;                               /* Écart entre deux champs. .field */
  --owan-row-gap: 11px;                                 /* Écart entre deux colonnes de champs. .row, .ligne */
  --owan-input-padding-y: 10px;                         /* .field input */
  --owan-input-padding-x: 16px;                         /* .field input */
  --owan-input-icon-offset: 46px;                       /* Retrait du texte quand le champ a une icône. .field-icon input */
  --owan-cta-padding-y: 17px;                           /* .cta */
  --owan-cta-padding-x: 22px;                           /* .cta */
  --owan-cta-gap: 9px;                                  /* Texte / flèche. .cta */
  --owan-cta-stack-gap: 10px;                           /* Bouton secondaire sous le principal. .cta-ghost */
  --owan-bars-width: 118px;                             /* .bars */
  --owan-bars-gap: 5px;                                 /* .bars */
  --owan-bar-height: 3px;                               /* .bar */
  --owan-tile-size: 74px;                               /* .icone */
  --owan-tile-size-mobile: 63px;                        /* .icone sous 700 px */
  --owan-logo-height: 64px;                             /* .brand .logo */
  --owan-logo-height-mobile: 58px;                      /* .brand .logo sous 700 px */

  /* ── Épaisseurs de bordure ── */
  --owan-border-control: 1.5px;                         /* Champs, pastilles, cases, bouton secondaire. */
  --owan-border-hairline: 1px;                          /* Message d'erreur, tuile, carte de message, listes. */

  /* ── Ombres et anneaux ── */
  --owan-shadow-card: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -28px rgba(14,19,34,.16), 0 8px 24px -16px rgba(14,19,34,.05); /* .card */
  --owan-shadow-cta: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 6px rgba(0,0,0,.18), 0 10px 22px -8px rgba(84,45,243,.55), 0 3px 8px -4px rgba(84,45,243,.5); /* .cta */
  --owan-shadow-cta-hover: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 6px rgba(0,0,0,.18), 0 14px 30px -8px rgba(84,45,243,.62), 0 3px 8px -4px rgba(84,45,243,.5); /* .cta:hover */
  --owan-shadow-cta-active: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.22), 0 6px 14px -8px rgba(84,45,243,.5); /* .cta:active */
  --owan-shadow-ghost: 0 4px 14px -8px rgba(84,45,243,.4); /* .cta-ghost */
  --owan-shadow-ghost-hover: 0 6px 18px -8px rgba(84,45,243,.5); /* .cta-ghost:hover */
  --owan-shadow-tile: 0 12px 26px -14px rgba(154,213,103,.7), inset 0 1px 0 rgba(255,255,255,.7); /* .icone */
  --owan-shadow-dropdown: 0 16px 40px -10px rgba(14,19,34,.25); /* .iti__country-list, .banque-liste */
  --owan-shadow-message-card: 0 18px 40px -30px rgba(14,19,34,.18); /* .tpl-card */
  --owan-shadow-ring-focus: 0 0 0 2px rgba(84,45,243,.12); /* Champ au focus. .field input:focus */
  --owan-shadow-ring-error: 0 0 0 4px rgba(248,98,81,.10); /* Champ en erreur. .field input.err */
  --owan-shadow-ring-chip: 0 0 0 1.5px rgba(84,45,243,.30); /* Pastille cochée, teinte par défaut. .puce.on */

  /* ── Mouvement ── */
  --owan-duration-enter: 550ms;                         /* Entrée du logo, du titre, de la carte, du bouton ; pop de la coche. rise, pop */
  --owan-duration-draw: 500ms;                          /* Tracé de la coche. draw */
  --owan-duration-open: 300ms;                          /* Ouverture d'un message type. .tpl-card.open .tpl-body */
  --owan-duration-hover: 200ms;                         /* Ombre du bouton, flèche, chevron. .cta, .tpl-chevron */
  --owan-duration-field: 180ms;                         /* Bordure et anneau des champs. .field input */
  --owan-duration-label: 160ms;                         /* Montée du libellé flottant. .field label */
  --owan-duration-quick: 150ms;                         /* Œil, pastilles, bouton Enregistrer. .eye, .puce, .tpl-save */
  --owan-duration-press: 140ms;                         /* Enfoncement du bouton. .cta:active */
  --owan-duration-shine: 5000ms;                        /* Éclat qui traverse le trait de l'étape courante. barShine */
  --owan-duration-grad-spin: 18000ms;                   /* Rotation du dégradé du mot mis en valeur. gradSpin */
  --owan-ease-rise: cubic-bezier(.2,.7,.2,1);           /* Entrées (rise). */
  --owan-ease-pop: cubic-bezier(.3,1.6,.4,1);           /* Rebond de la tuile de validation (pop). */

  /* ── Points de rupture (pour mémoire : une variable CSS ne marche pas dans @media) ── */
  --owan-breakpoint-sm: 420px;                          /* (max-width:420px) : libellé long de /paiements rétréci */
  --owan-breakpoint-md: 620px;                          /* (min-width:620px) : /paiements passe sur deux colonnes */
  --owan-breakpoint-lg: 700px;                          /* (max-width:700px) / (min-width:700px) : mobile / bureau */
}