/* =============================================================
   Popup « Contacter un mentor » — page publique d'un mentor

   Ce fichier n'est PAS un fork de lernen/css/style.css : il ne contient
   qu'un composant, celui de `#contact-mentor` dans composants.html, et
   chacune de ses règles est préfixée par `.lrn-pop`.

   Pourquoi un fichier à part plutôt que la feuille de la maquette ?
   La fiche publique d'un mentor tourne sous Bootstrap. La feuille de la
   maquette porte les mêmes noms de classe que lui — `.btn`, `.row`,
   `.card`, `.modal`, `.badge` — et la charger telle quelle repeindrait
   la page. L'importer dans une couche CSS ne suffit pas non plus : le
   front pose un reset `*, ::before, ::after { padding: 0; margin: 0 }`
   hors couche, et une règle hors couche l'emporte sur toute règle en
   couche, quelle que soit sa spécificité — la popup perdait tous ses
   espacements.

   Le contenu ci-dessous est EXTRAIT de lernen/css/style.css, sans qu'une
   seule valeur soit retouchée, et préfixé. La maquette reste la source :
   si elle change, relancer l'extraction plutôt que d'éditer ce fichier
   à la main.

   Règle pour la suite : ne pas multiplier les extraits préfixés. Au
   deuxième composant de la maquette qui doit vivre sur une page
   publique, on bascule le front entier dans une couche CSS et ce
   fichier disparaît.
   ============================================================= */

.lrn-pop {
  --brand: #FF6363;
  --brand-dark: #E14A4A;
  --brand-soft: #FFF1F1;
  --brand-tint: #FFF4F4;
  --brand-line: #FFD9D9;
  --brand-line-2: #FFC9C9;
  --grad: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  --grad-bar: linear-gradient(90deg, #FFBCBC, #FF6363);
  --ink: #1C1C1E;
  --ink-soft: #333236;
  --ink-mid: #4A4A4E;
  --muted: #5B5A5E;
  --muted-2: #6E6D72;
  --muted-3: #7C7B80;
  --muted-4: #8A8A8F;
  --muted-5: #9A999E;
  --muted-6: #A3A2A7;
  --cream: #F7F3EF;
  --surface: #F9F7F5;
  --surface-2: #F7F4F2;
  --line: #F0EBE7;
  --line-2: #F2EDE9;
  --line-3: #E9E2DE;
  --line-4: #E4DFDB;
  --track: #F2EDEA;
  --track-2: #EFEAE6;
  --green: #3BB273;
  --gold: #F5A623;
  --r-hero: 34px;
  --r-card: 30px;
  --r-media: 26px;
  --r-lg: 22px;
  --r-md: 20px;
  --r-sm: 18px;
  --r-xs: 16px;
  --pill: 44px;
  --sh-nav: 0 18px 40px -18px rgba(60, 30, 25, .28);
  --sh-card: 0 26px 50px -26px rgba(60, 30, 25, .3);
  --sh-soft: 0 10px 26px -14px rgba(60, 30, 25, .22);
  --sh-chip: 0 4px 12px rgba(0, 0, 0, .12);
  --sh-chip-sm: 0 4px 12px rgba(0, 0, 0, .1);
  --sh-brand: 0 12px 24px -10px rgba(255, 99, 99, .7);
  --sh-brand-sm: 0 12px 24px -12px rgba(255, 99, 99, .7);
  --shell: 1170px;
  --font: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-display: 'Capriola', Georgia, serif;
}

@keyframes paneIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes popScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes popCardIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes popCardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.975); } }

.lrn-pop .brand-mark { width: 36px; height: 36px; border-radius: 50%; background: #1F5F44; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lrn-pop .brand-mark i { width: 15px; height: 19px; border-radius: 60% 40% 55% 45%; background: #fff; transform: rotate(-18deg); }
.lrn-pop .brand-name { font-family: var(--font-display); font-size: 33px; font-weight: 400; letter-spacing: -.025em; color: var(--ink); }
.lrn-pop .ico { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-size: 21px; -webkit-font-feature-settings: 'liga'; font-variant-ligatures: none; }
.lrn-pop .ico--brand { color: var(--brand); }
.lrn-pop .ico--green { color: var(--green); }
.lrn-pop .ico--gold { color: var(--gold); }
.lrn-pop .ico--white { color: #fff; }
.lrn-pop .stack { display: flex; flex-direction: column; gap: 16px; }
.lrn-pop .stack--sm { gap: 14px; }
.lrn-pop .stack--lg { gap: 20px; }
.lrn-pop .gate-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 34px; text-align: center; }
.lrn-pop .gate-brand { display: inline-flex; align-items: center; gap: 10px; }
.lrn-pop .gate-head h1 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: -.015em; }
.lrn-pop .g-field { width: 100%; height: 60px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--pill); background: var(--surface); font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.lrn-pop .g-field::placeholder { color: var(--muted-2); font-weight: 600; }
.lrn-pop .g-field:focus { outline: none; border-color: var(--brand-line); background: #fff; }
.lrn-pop .g-btn { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--pill); font-family: inherit; font-size: 16.5px; font-weight: 800; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.lrn-pop .g-btn--primary { background: var(--brand); color: #fff; }
.lrn-pop .g-btn--primary:hover { background: var(--brand-dark); }
.lrn-pop .g-btn--soft { background: var(--surface); color: var(--ink); }
.lrn-pop .g-btn--soft:hover { border-color: var(--line-2); }
.lrn-pop .g-btn .ico { font-size: 21px; }
.lrn-pop .g-mark { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--brand); }
.lrn-pop .g-mark--in { font-family: inherit; font-size: 17px; color: var(--ink); }
.lrn-pop .gate-or { padding: 4px 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--muted-2); }
.lrn-pop .gate-switch { margin: 14px 0 0; text-align: center; font-size: 15.5px; font-weight: 600; color: var(--muted-2); }
.lrn-pop .gate-switch button, .lrn-pop .gate-switch a { border: none; background: none; padding: 0; font-family: inherit; font-size: 15.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.lrn-pop .gate-switch button:hover, .lrn-pop .gate-switch a:hover { color: var(--brand); }
.lrn-pop .gate-legal { margin: 0; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--muted-2); }
.lrn-pop .gate-legal a { color: var(--muted-2); text-decoration: underline; text-underline-offset: 3px; }
.lrn-pop .gate-legal a:hover { color: var(--brand); }
.lrn-pop .modal-card .gate-head { margin-bottom: 22px; }
.lrn-pop .modal-card .gate-head h1 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: -.015em; }
.lrn-pop .modal-card .gate-switch { margin-top: 14px; }
.lrn-pop .gate-sent { display: flex; align-items: center; gap: 12px; padding: 0 26px; height: 60px; border-radius: var(--pill); background: var(--surface); font-size: 15.5px; font-weight: 700; }
.lrn-pop .gate-sent .ico { color: var(--muted-2); }
.lrn-pop .gate-sent button { border: none; background: none; padding: 0; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--brand); cursor: pointer; }
.lrn-pop .ph { background: repeating-linear-gradient(45deg, #EFE7E3 0 9px, #E6DCD7 9px 18px); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #A2968F; text-align: center; }
.lrn-pop .ph--avatar { background: repeating-linear-gradient(45deg, #EFE0DB 0 8px, #E6D4CE 8px 16px); }
.lrn-pop .ph--gray { background: repeating-linear-gradient(45deg, #E7E3E0 0 7px, #DDD8D4 7px 14px); font-size: 9px; color: #9A938E; }
.lrn-pop .ph--green { background: repeating-linear-gradient(45deg, #E4EBE9 0 8px, #D8E2DF 8px 16px); }
.lrn-pop .ph--sand { background: repeating-linear-gradient(45deg, #EFE9DC 0 8px, #E5DCCB 8px 16px); }
.lrn-pop .grow { flex: 1; min-width: 0; }
.lrn-pop .code-fields { display: flex; gap: 10px; justify-content: center; }
.lrn-pop .code-input { width: 52px; height: 62px; border: 1.5px solid var(--line); border-radius: var(--r-xs); background: var(--surface); text-align: center; font-family: inherit; font-size: 24px; font-weight: 800; color: var(--ink); outline: none; }
.lrn-pop .code-input:focus { background: #fff; border-color: var(--brand); }
.lrn-pop .code-input.is-filled { background: #fff; border-color: var(--brand-line); }
.lrn-pop .modal-card:has(.modal-back) .modal-close { left: auto; right: 18px; }
.lrn-pop .modal-back { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.lrn-pop .modal-back:hover { background: var(--surface); }
.lrn-pop .modal-card { position: relative; width: 100%; max-width: 452px; max-height: 92vh; overflow-y: auto; padding: 34px 30px 28px; border-radius: 30px; background: #fff; box-shadow: 0 44px 90px -28px rgba(60, 30, 25, .45); text-align: center; animation: paneIn .34s cubic-bezier(.22, .8, .28, 1) both; }
.lrn-pop .modal-close { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.lrn-pop .modal-close:hover { background: var(--surface); }
.lrn-pop .modal-avatar { width: 92px; height: 92px; border-radius: 26px; margin: 0 auto 14px; }
.lrn-pop .modal-sub { margin: 6px 0 22px; font-size: 16.5px; font-weight: 600; color: var(--muted); }
.lrn-pop .stars--sm { gap: 2px; }
.lrn-pop .stars--sm .star { width: 24px; height: 24px; background: none; }
.lrn-pop .stars--sm .star .ico { font-size: 18px; }
.lrn-pop .stars--sm .star.is-on { background: none; color: var(--gold); }
.lrn-pop .stars { display: flex; gap: 8px; }
.lrn-pop .star { width: 54px; height: 54px; border-radius: 50%; background: var(--surface); color: var(--muted-5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.lrn-pop .star .ico { font-size: 27px; }
.lrn-pop .star.is-on { background: #FDF4E5; color: var(--gold); }
.lrn-pop .ph > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.lrn-pop .g-error, .lrn-pop .g-note { margin: -4px 0 0; padding: 0 26px; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.lrn-pop .g-error { color: var(--brand); }
.lrn-pop .g-note { color: var(--green); }
.lrn-pop .g-field[aria-invalid="true"] { border-color: var(--brand); }
.lrn-pop .g-btn[disabled] { opacity: .55; cursor: default; }
.lrn-pop .g-btn--primary[disabled]:hover { background: var(--brand); }
.lrn-pop .gate-switch button[disabled] { color: var(--muted-2); cursor: default; }
.lrn-pop .gate-switch button[disabled]:hover { color: var(--muted-2); }

@media (max-height: 700px) {
  .lrn-pop .gate-head { gap: 12px; margin-bottom: 20px; }
  .lrn-pop .gate-head h1 { font-size: 22px; }
  .lrn-pop .g-field, .lrn-pop .g-btn, .lrn-pop .gate-sent { height: 52px; }
  .lrn-pop .gate-or { padding: 0; }
  .lrn-pop .gate-switch { margin-top: 8px; }
}


/* --- coquille de la popup -------------------------------------
   `.modal` et `.modal-title` de la maquette sont rebaptisés ici :
   Bootstrap possède déjà ces deux noms sur les pages publiques.
   Mêmes déclarations, à l'identique, animations comprises.
--------------------------------------------------------------- */
.lrn-pop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 28, 30, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font);
  color: var(--ink);
  text-align: left;
}
.lrn-pop.is-open    { display: flex; animation: popScrim .28s ease both; }
.lrn-pop.is-closing { display: flex; animation: popScrim .22s ease both reverse; pointer-events: none; }
.lrn-pop.is-open .modal-card    { animation: popCardIn .4s cubic-bezier(.22, 1, .32, 1) both; }
.lrn-pop.is-closing .modal-card { animation: popCardOut .22s cubic-bezier(.4, 0, 1, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .lrn-pop.is-open, .lrn-pop.is-closing,
  .lrn-pop.is-open .modal-card, .lrn-pop.is-closing .modal-card { animation-duration: .01ms; }
}

.lrn-pop .lrn-pop-title { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }

/* La police d'icônes de la maquette. */
.lrn-pop .ico {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Le bandeau de chargement de Livewire n'est pas branché sur le site
   public : sans cette règle, le libellé de repos et celui d'attente
   s'afficheraient tous les deux. */
.lrn-pop [wire\:loading] { display: none; }

/* Le reset du front met les éléments à plat : la popup rétablit ce que
   la maquette leur donne. */
.lrn-pop button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.lrn-pop img { display: block; max-width: 100%; }
.lrn-pop p { margin: 0; }
.lrn-pop h1 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -.015em; }
.lrn-pop .modal-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }