| @@ -25,8 +25,16 @@ | ||
| 25 | 25 | font-size: 16px; |
| 26 | 26 | margin: 0; |
| 27 | 27 | } |
| 28 | 28 | |
| 29 | +.ai-account-email { | |
| 30 | + margin-top: 10px !important; | |
| 31 | + font-size: 13px !important; | |
| 32 | + color: #4b5563 !important; | |
| 33 | + font-weight: 500; | |
| 34 | + word-break: break-word; | |
| 35 | +} | |
| 36 | + | |
| 29 | 37 | .ai-auth-form { |
| 30 | 38 | display: flex; |
| 31 | 39 | flex-direction: column; |
| 32 | 40 | gap: 20px; |
| @@ -253,8 +261,14 @@ | ||
| 253 | 261 | color: #0c5460; |
| 254 | 262 | border: 1px solid #bee5eb; |
| 255 | 263 | } |
| 256 | 264 | |
| 265 | +.ai-message.warning { | |
| 266 | + background: #fff3cd; | |
| 267 | + color: #7a4b00; | |
| 268 | + border: 1px solid #ffecb5; | |
| 269 | +} | |
| 270 | + | |
| 257 | 271 | .ai-loading { |
| 258 | 272 | display: inline-block; |
| 259 | 273 | width: 20px; |
| 260 | 274 | height: 20px; |
| @@ -265,9 +279,11 @@ | ||
| 265 | 279 | margin-right: 10px; |
| 266 | 280 | } |
| 267 | 281 | |
| 268 | 282 | @keyframes spin { |
| 269 | - to { transform: rotate(360deg); } | |
| 283 | + to { | |
| 284 | + transform: rotate(360deg); | |
| 285 | + } | |
| 270 | 286 | } |
| 271 | 287 | |
| 272 | 288 | .ai-form-hidden { |
| 273 | 289 | display: none; |
| @@ -278,16 +294,17 @@ | ||
| 278 | 294 | .ai-auth-container { |
| 279 | 295 | margin: 20px; |
| 280 | 296 | padding: 30px 20px; |
| 281 | 297 | } |
| 282 | - | |
| 298 | + | |
| 283 | 299 | .ai-auth-header h2 { |
| 284 | 300 | font-size: 24px; |
| 285 | 301 | } |
| 286 | - | |
| 302 | + | |
| 287 | 303 | .ai-form-group input { |
| 288 | 304 | padding: 10px 14px; |
| 289 | - font-size: 16px; /* Prevents zoom on iOS */ | |
| 305 | + font-size: 16px; | |
| 306 | + /* Prevents zoom on iOS */ | |
| 290 | 307 | } |
| 291 | 308 | } |
| 292 | 309 | |
| 293 | 310 | /* Animation pour les transitions */ |
| @@ -295,10 +312,17 @@ | ||
| 295 | 312 | animation: fadeIn 0.5s ease-in; |
| 296 | 313 | } |
| 297 | 314 | |
| 298 | 315 | @keyframes fadeIn { |
| 299 | - from { opacity: 0; transform: translateY(20px); } | |
| 300 | - to { opacity: 1; transform: translateY(0); } | |
| 316 | + from { | |
| 317 | + opacity: 0; | |
| 318 | + transform: translateY(20px); | |
| 319 | + } | |
| 320 | + | |
| 321 | + to { | |
| 322 | + opacity: 1; | |
| 323 | + transform: translateY(0); | |
| 324 | + } | |
| 301 | 325 | } |
| 302 | 326 | |
| 303 | 327 | /* Dashboard Styles */ |
| 304 | 328 | .ai-dashboard-content { |
| @@ -487,19 +511,19 @@ | ||
| 487 | 511 | @media (max-width: 480px) { |
| 488 | 512 | .ai-dashboard-card { |
| 489 | 513 | padding: 20px; |
| 490 | 514 | } |
| 491 | - | |
| 515 | + | |
| 492 | 516 | .ai-card-header { |
| 493 | 517 | flex-direction: column; |
| 494 | 518 | align-items: flex-start; |
| 495 | 519 | gap: 12px; |
| 496 | 520 | } |
| 497 | - | |
| 521 | + | |
| 498 | 522 | .ai-credits-display { |
| 499 | 523 | font-size: 20px; |
| 500 | 524 | } |
| 501 | - | |
| 525 | + | |
| 502 | 526 | .ai-credit-item { |
| 503 | 527 | flex-direction: column; |
| 504 | 528 | align-items: flex-start; |
| 505 | 529 | gap: 4px; |
| @@ -505,8 +529,40 @@ | ||
| 505 | 529 | gap: 4px; |
| 506 | 530 | } |
| 507 | 531 | } |
| 508 | 532 | |
| 533 | +/* Container plus large uniquement pour le dashboard connecté */ | |
| 534 | +.ai-auth-container--dashboard { | |
| 535 | + max-width: 640px; | |
| 536 | +} | |
| 537 | + | |
| 538 | +@media (max-width: 680px) { | |
| 539 | + .ai-auth-container--dashboard { | |
| 540 | + max-width: none; | |
| 541 | + margin: 20px; | |
| 542 | + padding: 30px 20px; | |
| 543 | + } | |
| 544 | +} | |
| 545 | + | |
| 546 | +/* Feedback card: bouton qui est un <a> et pas un <button>. | |
| 547 | + Les <a> sont en box-sizing: content-box par défaut, donc width: 100% | |
| 548 | + + padding + border débordent du parent. On force border-box. */ | |
| 549 | +.ai-feedback-btn { | |
| 550 | + text-decoration: none; | |
| 551 | + box-sizing: border-box; | |
| 552 | + max-width: 100%; | |
| 553 | +} | |
| 554 | + | |
| 555 | +.ai-feedback-btn:hover, | |
| 556 | +.ai-feedback-btn:focus { | |
| 557 | + text-decoration: none; | |
| 558 | + color: white; | |
| 559 | +} | |
| 560 | + | |
| 561 | +.ai-feedback-btn:focus { | |
| 562 | + color: #007cba; | |
| 563 | +} | |
| 564 | + | |
| 509 | 565 | /* Checkbox personnalisée pour les conditions d'utilisation */ |
| 510 | 566 | .ai-checkbox-group { |
| 511 | 567 | margin-top: 10px; |
| 512 | 568 | } |
| @@ -551,9 +607,9 @@ | ||
| 551 | 607 | border-color: #007cba !important; |
| 552 | 608 | background-color: #f0f8ff !important; |
| 553 | 609 | } |
| 554 | 610 | |
| 555 | -.ai-checkbox-label input[type="checkbox"]:checked ~ .ai-checkbox-custom { | |
| 611 | +.ai-checkbox-label input[type="checkbox"]:checked~.ai-checkbox-custom { | |
| 556 | 612 | background-color: #007cba !important; |
| 557 | 613 | border-color: #007cba !important; |
| 558 | 614 | } |
| 559 | 615 | |
| @@ -569,9 +625,9 @@ | ||
| 569 | 625 | border-width: 0 2px 2px 0 !important; |
| 570 | 626 | transform: rotate(45deg) !important; |
| 571 | 627 | } |
| 572 | 628 | |
| 573 | -.ai-checkbox-label input[type="checkbox"]:checked ~ .ai-checkbox-custom:after { | |
| 629 | +.ai-checkbox-label input[type="checkbox"]:checked~.ai-checkbox-custom:after { | |
| 574 | 630 | display: block !important; |
| 575 | 631 | } |
| 576 | 632 | |
| 577 | 633 | .ai-checkbox-text { |
| @@ -609,15 +665,15 @@ | ||
| 609 | 665 | .ai-checkbox-label { |
| 610 | 666 | font-size: 13px; |
| 611 | 667 | gap: 10px; |
| 612 | 668 | } |
| 613 | - | |
| 669 | + | |
| 614 | 670 | .ai-checkbox-custom { |
| 615 | 671 | height: 18px; |
| 616 | 672 | width: 18px; |
| 617 | 673 | margin-top: 1px; |
| 618 | 674 | } |
| 619 | - | |
| 675 | + | |
| 620 | 676 | .ai-checkbox-custom:after { |
| 621 | 677 | left: 5px; |
| 622 | 678 | top: 1px; |
| 623 | 679 | width: 5px; |
| @@ -622,5 +678,112 @@ | ||
| 622 | 678 | top: 1px; |
| 623 | 679 | width: 5px; |
| 624 | 680 | height: 9px; |
| 625 | 681 | } |
| 626 | -} | |
| 682 | +} | |
| 683 | + | |
| 684 | +/* Promo code (signup) */ | |
| 685 | +.ai-promo-wrap { | |
| 686 | + gap: 10px; | |
| 687 | +} | |
| 688 | + | |
| 689 | +.ai-promo-toggle-btn { | |
| 690 | + background: none; | |
| 691 | + border: none; | |
| 692 | + padding: 0; | |
| 693 | + color: #007cba; | |
| 694 | + font-size: 14px; | |
| 695 | + font-weight: 500; | |
| 696 | + cursor: pointer; | |
| 697 | + text-decoration: underline; | |
| 698 | + align-self: flex-start; | |
| 699 | +} | |
| 700 | + | |
| 701 | +.ai-promo-toggle-btn:hover { | |
| 702 | + color: #005a87; | |
| 703 | +} | |
| 704 | + | |
| 705 | +.ai-promo-panel { | |
| 706 | + display: flex; | |
| 707 | + flex-direction: column; | |
| 708 | + gap: 8px; | |
| 709 | + margin-top: 4px; | |
| 710 | +} | |
| 711 | + | |
| 712 | +.ai-promo-panel[hidden] { | |
| 713 | + display: none !important; | |
| 714 | +} | |
| 715 | + | |
| 716 | +.ai-promo-label { | |
| 717 | + font-weight: 500; | |
| 718 | + color: #232222; | |
| 719 | + font-size: 14px; | |
| 720 | +} | |
| 721 | + | |
| 722 | +.ai-promo-row { | |
| 723 | + display: flex; | |
| 724 | + gap: 8px; | |
| 725 | + align-items: stretch; | |
| 726 | +} | |
| 727 | + | |
| 728 | +.ai-promo-input { | |
| 729 | + flex: 1; | |
| 730 | + min-width: 0; | |
| 731 | + padding: 12px 16px; | |
| 732 | + border: 2px solid #e1e5e9 !important; | |
| 733 | + border-radius: 8px; | |
| 734 | + font-size: 16px; | |
| 735 | + background: #ffffff; | |
| 736 | + color: #1a1a1a !important; | |
| 737 | +} | |
| 738 | + | |
| 739 | +.ai-promo-validate-btn { | |
| 740 | + flex-shrink: 0; | |
| 741 | + padding: 12px 16px; | |
| 742 | + border-radius: 8px; | |
| 743 | + font-size: 14px; | |
| 744 | + font-weight: 600; | |
| 745 | + cursor: pointer; | |
| 746 | + border: 2px solid #007cba; | |
| 747 | + background: #fff; | |
| 748 | + color: #007cba; | |
| 749 | + transition: background 0.2s ease, color 0.2s ease; | |
| 750 | + white-space: nowrap; | |
| 751 | +} | |
| 752 | + | |
| 753 | +.ai-promo-validate-btn:hover:not(:disabled) { | |
| 754 | + background: #f0f7fb; | |
| 755 | +} | |
| 756 | + | |
| 757 | +.ai-promo-validate-btn:disabled { | |
| 758 | + opacity: 0.65; | |
| 759 | + cursor: not-allowed; | |
| 760 | +} | |
| 761 | + | |
| 762 | +.ai-promo-validate-btn.is-loading { | |
| 763 | + pointer-events: none; | |
| 764 | +} | |
| 765 | + | |
| 766 | +.ai-promo-feedback { | |
| 767 | + margin: 0; | |
| 768 | + font-size: 13px; | |
| 769 | + line-height: 1.4; | |
| 770 | + min-height: 1.2em; | |
| 771 | +} | |
| 772 | + | |
| 773 | +.ai-promo-feedback.is-success { | |
| 774 | + color: #155724; | |
| 775 | +} | |
| 776 | + | |
| 777 | +.ai-promo-feedback.is-error { | |
| 778 | + color: #721c24; | |
| 779 | +} | |
| 780 | + | |
| 781 | +@media (max-width: 480px) { | |
| 782 | + .ai-promo-row { | |
| 783 | + flex-direction: column; | |
| 784 | + } | |
| 785 | + | |
| 786 | + .ai-promo-validate-btn { | |
| 787 | + width: 100%; | |
| 788 | + } | |
| 789 | +} | |
