var/cache/dev/twig/84/84bb0ccf4e71a0637706afe4cb4858b5.php line 58

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* Parent/LoginParent.html.twig */
  18. class __TwigTemplate_37bb9239606940e257554a0bc0386491 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'title' => [$this, 'block_title'],
  34.             'stylesheets' => [$this, 'block_stylesheets'],
  35.             'Header' => [$this, 'block_Header'],
  36.             'Content' => [$this, 'block_Content'],
  37.             'Footer' => [$this, 'block_Footer'],
  38.             'javascript' => [$this, 'block_javascript'],
  39.         ];
  40.     }
  42.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  43.     {
  44.         // line 1
  45.         return "Accueil/layoutAccueil.html.twig";
  46.     }
  48.     protected function doDisplay(array $context, array $blocks = []): iterable
  49.     {
  50.         $macros = $this->macros;
  51.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  52.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  54.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  55.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  57.         $this->parent = $this->load("Accueil/layoutAccueil.html.twig", 1);
  58.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  59.         
  60.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  62.         
  63.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  65.     }
  67.     // line 3
  68.     /**
  69.      * @return iterable<null|scalar|\Stringable>
  70.      */
  71.     public function block_title(array $context, array $blocks = []): iterable
  72.     {
  73.         $macros = $this->macros;
  74.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  75.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  77.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  78.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  80.         yield "Connexion Parent — 5sur5séjour";
  81.         
  82.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  84.         
  85.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  87.         yield from [];
  88.     }
  90.     // line 5
  91.     /**
  92.      * @return iterable<null|scalar|\Stringable>
  93.      */
  94.     public function block_stylesheets(array $context, array $blocks = []): iterable
  95.     {
  96.         $macros = $this->macros;
  97.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  98.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  100.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  101.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  103.         // line 6
  104.         yield from $this->yieldParentBlock("stylesheets", $context, $blocks);
  105.         yield "
  106. <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  107. <style>
  108. /* ========================================
  109.    5SUR5 PARENT LOGIN - CLEAN TWO-COLUMN
  110.    Stripe/Notion Quality · No Slider
  111.    ======================================== */
  113. :root {
  114.     --pl-teal: #41A2AA;
  115.     --pl-teal-dark: #359BA3;
  116.     --pl-teal-light: rgba(65, 162, 170, 0.06);
  117.     --pl-orange: #F09E7A;
  118.     --pl-orange-dark: #E8865E;
  119.     --pl-text: #1A1A2E;
  120.     --pl-text-secondary: #5A6178;
  121.     --pl-text-muted: #8E95A9;
  122.     --pl-bg: #FFFFFF;
  123.     --pl-bg-hero: #F8FAFB;
  124.     --pl-border: #E5E9F0;
  125.     --pl-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  126.     --pl-radius: 16px;
  127. }
  129. * {
  130.     box-sizing: border-box;
  131. }
  133. .pl-page {
  134.     min-height: 100vh;
  135.     display: flex;
  136.     flex-direction: column;
  137. }
  139. /* ========================================
  140.    MAIN CONTAINER - TWO COLUMNS
  141.    ======================================== */
  142. .pl-main {
  143.     flex: 1;
  144.     display: flex;
  145.     min-height: calc(100vh - 160px);
  146. }
  148. /* ========================================
  149.    LEFT COLUMN - HERO
  150.    ======================================== */
  151. .pl-hero {
  152.     width: 35%;
  153.     background: var(--pl-bg-hero);
  154.     padding: 40px;
  155.     display: flex;
  156.     flex-direction: column;
  157.     justify-content: center;
  158.     position: relative;
  159. }
  161. .pl-hero-content {
  162.     flex: 1;
  163.     display: flex;
  164.     flex-direction: column;
  165.     justify-content: center;
  166.     max-width: 420px;
  167. }
  169. .pl-hero h1 {
  170.     font-size: 32px;
  171.     font-weight: 700;
  172.     color: var(--pl-text);
  173.     line-height: 1.25;
  174.     margin: 0 0 16px;
  175.     letter-spacing: -0.02em;
  176. }
  178. .pl-hero-subtitle {
  179.     font-size: 17px;
  180.     color: var(--pl-text-secondary);
  181.     line-height: 1.6;
  182.     margin: 0 0 32px;
  183. }
  185. /* Features List - Premium Style */
  186. .pl-features {
  187.     list-style: none;
  188.     padding: 0;
  189.     margin: 0;
  190.     display: flex;
  191.     flex-direction: column;
  192.     gap: 18px;
  193. }
  195. .pl-feature {
  196.     display: flex;
  197.     align-items: flex-start;
  198.     gap: 14px;
  199. }
  201. .pl-feature-icon {
  202.     width: 44px;
  203.     height: 44px;
  204.     border-radius: 12px;
  205.     display: flex;
  206.     align-items: center;
  207.     justify-content: center;
  208.     flex-shrink: 0;
  209. }
  211. .pl-feature-icon svg {
  212.     width: 22px;
  213.     height: 22px;
  214.     color: #fff;
  215. }
  217. .pl-feature-icon.teal { background: var(--pl-teal); }
  218. .pl-feature-icon.orange { background: var(--pl-orange); }
  219. .pl-feature-icon.coral { background: #F56040; }
  220. .pl-feature-icon.brown { background: #c47d5e; }
  222. .pl-feature-text {
  223.     padding-top: 2px;
  224. }
  226. .pl-feature-title {
  227.     font-size: 14px;
  228.     font-weight: 600;
  229.     color: var(--pl-text);
  230.     margin: 0 0 3px;
  231. }
  233. .pl-feature-desc {
  234.     font-size: 13px;
  235.     color: var(--pl-text-muted);
  236.     margin: 0;
  237.     line-height: 1.4;
  238. }
  240. /* Hero image */
  241. .pl-hero-image {
  242.     margin-top: auto;
  243.     border-radius: 12px;
  244.     overflow: hidden;
  245. }
  247. .pl-hero-image img {
  248.     width: 100%;
  249.     height: auto;
  250.     display: block;
  251.     border-radius: 12px;
  252. }
  254. /* Hero decorative illustration */
  255. .pl-hero-illustration {
  256.     margin-top: auto;
  257.     padding-top: 40px;
  258.     position: relative;
  259. }
  261. .pl-hero-illustration svg {
  262.     width: 100%;
  263.     max-width: 320px;
  264.     height: auto;
  265.     opacity: 0.9;
  266. }
  268. /* Floating badges */
  269. .pl-floating-badges {
  270.     position: absolute;
  271.     inset: 0;
  272.     pointer-events: none;
  273. }
  275. .pl-badge {
  276.     position: absolute;
  277.     background: #fff;
  278.     border-radius: 12px;
  279.     padding: 10px 14px;
  280.     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  281.     display: flex;
  282.     align-items: center;
  283.     gap: 10px;
  284.     font-size: 13px;
  285.     font-weight: 500;
  286.     color: var(--pl-text);
  287.     animation: plFloat 3s ease-in-out infinite;
  288. }
  290. .pl-badge-icon {
  291.     width: 32px;
  292.     height: 32px;
  293.     border-radius: 8px;
  294.     display: flex;
  295.     align-items: center;
  296.     justify-content: center;
  297. }
  299. .pl-badge-icon svg {
  300.     width: 18px;
  301.     height: 18px;
  302.     color: #fff;
  303. }
  305. .pl-badge-icon.teal { background: var(--pl-teal); }
  306. .pl-badge-icon.orange { background: var(--pl-orange); }
  307. .pl-badge-icon.coral { background: #F56040; }
  309. .pl-badge-1 {
  310.     top: 20%;
  311.     right: -10px;
  312.     animation-delay: 0s;
  313. }
  315. .pl-badge-2 {
  316.     bottom: 30%;
  317.     left: -5px;
  318.     animation-delay: 1s;
  319. }
  321. .pl-badge-3 {
  322.     bottom: 10%;
  323.     right: 10%;
  324.     animation-delay: 2s;
  325. }
  327. @keyframes plFloat {
  328.     0%, 100% { transform: translateY(0); }
  329.     50% { transform: translateY(-8px); }
  330. }
  332. /* Entry animations */
  333. .pl-hero-content {
  334.     animation: plSlideRight 0.6s ease-out;
  335. }
  337. .pl-card {
  338.     animation: plSlideUp 0.5s ease-out;
  339. }
  341. @keyframes plSlideRight {
  342.     from { opacity: 0; transform: translateX(-20px); }
  343.     to { opacity: 1; transform: translateX(0); }
  344. }
  346. @keyframes plSlideUp {
  347.     from { opacity: 0; transform: translateY(20px); }
  348.     to { opacity: 1; transform: translateY(0); }
  349. }
  351. /* Feature items staggered animation */
  352. .pl-feature {
  353.     opacity: 0;
  354.     animation: plFadeIn 0.4s ease forwards;
  355. }
  357. .pl-feature:nth-child(1) { animation-delay: 0.1s; }
  358. .pl-feature:nth-child(2) { animation-delay: 0.2s; }
  359. .pl-feature:nth-child(3) { animation-delay: 0.3s; }
  360. .pl-feature:nth-child(4) { animation-delay: 0.4s; }
  362. /* ========================================
  363.    RIGHT COLUMN - FORM
  364.    ======================================== */
  365. .pl-form-section {
  366.     width: 58%;
  367.     display: flex;
  368.     align-items: center;
  369.     justify-content: center;
  370.     padding: 40px;
  371.     background: var(--pl-bg);
  372. }
  374. .pl-card {
  375.     width: 100%;
  376.     max-width: 420px;
  377.     background: var(--pl-bg);
  378.     border-radius: var(--pl-radius);
  379.     box-shadow: var(--pl-shadow);
  380.     border: 1px solid var(--pl-border);
  381.     overflow: hidden;
  382. }
  384. /* Tabs */
  385. .pl-tabs {
  386.     display: flex;
  387.     border-bottom: 1px solid var(--pl-border);
  388. }
  390. .pl-tab {
  391.     flex: 1;
  392.     padding: 18px 16px;
  393.     font-size: 14px;
  394.     font-weight: 600;
  395.     color: var(--pl-text-muted);
  396.     background: var(--pl-bg-hero);
  397.     border: none;
  398.     cursor: pointer;
  399.     position: relative;
  400.     transition: all 0.2s ease;
  401. }
  403. .pl-tab:hover {
  404.     color: var(--pl-text-secondary);
  405. }
  407. .pl-tab.active {
  408.     color: var(--pl-teal);
  409.     background: var(--pl-bg);
  410. }
  412. .pl-tab.active::after {
  413.     content: '';
  414.     position: absolute;
  415.     bottom: -1px;
  416.     left: 0;
  417.     right: 0;
  418.     height: 2px;
  419.     background: var(--pl-teal);
  420. }
  422. .pl-tab:focus-visible {
  423.     outline: 2px solid var(--pl-teal);
  424.     outline-offset: -2px;
  425. }
  427. .pl-btn:focus-visible,
  428. .pl-social-btn:focus-visible {
  429.     outline: 2px solid var(--pl-teal);
  430.     outline-offset: 2px;
  431. }
  433. /* Tab panels */
  434. .pl-panel {
  435.     padding: 28px;
  436.     display: none;
  437. }
  439. .pl-panel.active {
  440.     display: block;
  441.     animation: plFadeIn 0.25s ease;
  442. }
  444. @keyframes plFadeIn {
  445.     from { opacity: 0; transform: translateY(6px); }
  446.     to { opacity: 1; transform: translateY(0); }
  447. }
  449. /* Form elements */
  450. .pl-form-group {
  451.     margin-bottom: 18px;
  452. }
  454. .pl-label {
  455.     display: block;
  456.     font-size: 13px;
  457.     font-weight: 500;
  458.     color: var(--pl-text);
  459.     margin-bottom: 6px;
  460. }
  462. .pl-input {
  463.     width: 100%;
  464.     padding: 12px 14px;
  465.     font-size: 15px;
  466.     font-family: inherit;
  467.     color: var(--pl-text);
  468.     background: var(--pl-bg);
  469.     border: 1px solid var(--pl-border);
  470.     border-radius: 8px;
  471.     transition: all 0.2s ease;
  472.     outline: none;
  473. }
  475. .pl-input::placeholder {
  476.     color: var(--pl-text-muted);
  477. }
  479. .pl-input:hover {
  480.     border-color: #D0D6E0;
  481. }
  483. .pl-input:focus {
  484.     border-color: var(--pl-teal);
  485.     box-shadow: 0 0 0 3px var(--pl-teal-light);
  486. }
  488. .pl-input.is-invalid {
  489.     border-color: #EF4444;
  490.     background: #FEF2F2;
  491. }
  493. .pl-input.is-valid {
  494.     border-color: #10B981;
  495.     background: rgba(16, 185, 129, 0.04);
  496. }
  498. .pl-hint {
  499.     font-size: 12px;
  500.     color: var(--pl-text-muted);
  501.     margin-top: 5px;
  502.     display: flex;
  503.     align-items: center;
  504.     gap: 4px;
  505. }
  507. /* Password wrapper */
  508. .pl-password-wrap {
  509.     position: relative;
  510. }
  512. .pl-password-wrap .pl-input {
  513.     padding-right: 44px;
  514. }
  516. .pl-eye-btn {
  517.     position: absolute;
  518.     right: 12px;
  519.     top: 50%;
  520.     transform: translateY(-50%);
  521.     background: none;
  522.     border: none;
  523.     padding: 4px;
  524.     cursor: pointer;
  525.     color: var(--pl-text-muted);
  526.     transition: color 0.2s ease;
  527. }
  529. .pl-eye-btn:hover {
  530.     color: var(--pl-teal);
  531. }
  533. /* Row for name fields */
  534. .pl-row {
  535.     display: flex;
  536.     gap: 12px;
  537. }
  539. .pl-row .pl-form-group {
  540.     flex: 1;
  541. }
  543. /* Primary button */
  544. .pl-btn {
  545.     width: 100%;
  546.     padding: 14px 20px;
  547.     font-size: 15px;
  548.     font-weight: 600;
  549.     font-family: inherit;
  550.     color: #FFF;
  551.     background: linear-gradient(135deg, var(--pl-teal) 0%, var(--pl-teal-dark) 100%);
  552.     border: none;
  553.     border-radius: 8px;
  554.     cursor: pointer;
  555.     transition: all 0.2s ease, transform 0.15s ease;
  556.     box-shadow: 0 2px 8px rgba(65, 162, 170, 0.3);
  557. }
  559. .pl-btn:hover {
  560.     background: linear-gradient(135deg, var(--pl-teal-dark) 0%, #2E8E96 100%);
  561.     box-shadow: 0 4px 16px rgba(65, 162, 170, 0.4);
  562.     transform: translateY(-1px);
  563. }
  565. .pl-btn:active {
  566.     transform: scale(0.98);
  567. }
  569. .pl-btn:disabled {
  570.     opacity: 0.7;
  571.     cursor: not-allowed;
  572. }
  574. .pl-btn-secondary {
  575.     background: linear-gradient(135deg, var(--pl-orange) 0%, var(--pl-orange-dark) 100%);
  576.     box-shadow: 0 2px 8px rgba(240, 158, 122, 0.3);
  577. }
  579. .pl-btn-secondary:hover {
  580.     background: linear-gradient(135deg, var(--pl-orange-dark) 0%, #D67A50 100%);
  581.     box-shadow: 0 4px 16px rgba(240, 158, 122, 0.4);
  582. }
  584. /* Button loading state */
  585. .pl-btn-loading {
  586.     position: relative;
  587.     color: transparent !important;
  588. }
  590. .pl-btn-loading::after {
  591.     content: '';
  592.     position: absolute;
  593.     width: 20px;
  594.     height: 20px;
  595.     top: 50%;
  596.     left: 50%;
  597.     margin-left: -10px;
  598.     margin-top: -10px;
  599.     border: 2px solid rgba(255,255,255,0.3);
  600.     border-top-color: #fff;
  601.     border-radius: 50%;
  602.     animation: plSpin 0.6s linear infinite;
  603. }
  605. /* Forgot link */
  606. .pl-forgot {
  607.     display: inline-block;
  608.     font-size: 13px;
  609.     color: var(--pl-orange);
  610.     margin-top: 12px;
  611.     text-decoration: none;
  612.     transition: color 0.2s ease;
  613. }
  615. .pl-forgot:hover {
  616.     color: var(--pl-orange-dark);
  617.     text-decoration: underline;
  618. }
  620. /* Divider */
  621. .pl-divider {
  622.     display: flex;
  623.     align-items: center;
  624.     margin: 24px 0;
  625.     gap: 14px;
  626. }
  628. .pl-divider-line {
  629.     flex: 1;
  630.     height: 1px;
  631.     background: var(--pl-border);
  632. }
  634. .pl-divider-text {
  635.     font-size: 12px;
  636.     font-weight: 500;
  637.     color: var(--pl-text-muted);
  638.     text-transform: uppercase;
  639.     letter-spacing: 0.04em;
  640. }
  642. /* Social buttons */
  643. .pl-socials {
  644.     display: flex;
  645.     flex-direction: column;
  646.     gap: 10px;
  647. }
  649. .pl-social-btn {
  650.     width: 100%;
  651.     padding: 11px 16px;
  652.     font-size: 14px;
  653.     font-weight: 500;
  654.     font-family: inherit;
  655.     border-radius: 8px;
  656.     cursor: pointer;
  657.     transition: all 0.2s ease, transform 0.15s ease;
  658.     display: flex;
  659.     align-items: center;
  660.     justify-content: center;
  661.     gap: 10px;
  662.     text-decoration: none;
  663. }
  665. .pl-social-btn img {
  666.     width: 18px;
  667.     height: 18px;
  668. }
  670. .pl-social-google {
  671.     background: var(--pl-bg);
  672.     color: var(--pl-text);
  673.     border: 1px solid var(--pl-border);
  674. }
  676. .pl-social-google:hover {
  677.     background: var(--pl-bg-hero);
  678.     border-color: #D0D6E0;
  679. }
  681. .pl-social-facebook {
  682.     background: #1877F2;
  683.     color: #FFF;
  684.     border: 1px solid #1877F2;
  685. }
  687. .pl-social-facebook:hover {
  688.     background: #166FE5;
  689.     transform: translateY(-1px);
  690.     box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
  691. }
  693. .pl-social-google:hover {
  694.     transform: translateY(-1px);
  695.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  696. }
  698. /* Notification prefs (compact) */
  699. .pl-notif-box {
  700.     background: var(--pl-bg-hero);
  701.     border-radius: 8px;
  702.     padding: 12px 14px;
  703.     margin-bottom: 18px;
  704. }
  706. .pl-notif-label {
  707.     font-size: 12px;
  708.     font-weight: 500;
  709.     color: var(--pl-text-secondary);
  710.     margin-bottom: 8px;
  711. }
  713. .pl-notif-opts {
  714.     display: flex;
  715.     gap: 20px;
  716. }
  718. .pl-checkbox {
  719.     display: flex;
  720.     align-items: center;
  721.     gap: 6px;
  722.     font-size: 13px;
  723.     color: var(--pl-text);
  724.     cursor: pointer;
  725. }
  727. .pl-checkbox input {
  728.     width: 16px;
  729.     height: 16px;
  730.     accent-color: var(--pl-teal);
  731.     cursor: pointer;
  732. }
  734. /* Form note */
  735. .pl-note {
  736.     font-size: 12px;
  737.     color: var(--pl-text-muted);
  738.     text-align: center;
  739.     margin-top: 14px;
  740.     line-height: 1.5;
  741. }
  744. .pl-input-code {
  745.     font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  746.     font-size: 18px;
  747.     font-weight: 600;
  748.     letter-spacing: 2px;
  749.     text-transform: uppercase;
  750.     text-align: center;
  751.     padding: 14px 16px;
  752.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.04), rgba(240, 158, 122, 0.04));
  753.     border: 2px solid var(--pl-border);
  754. }
  756. .pl-input-code:focus {
  757.     border-color: var(--pl-teal);
  758.     background: var(--pl-bg);
  759. }
  761. .pl-input-code::placeholder {
  762.     font-weight: 400;
  763.     letter-spacing: 1px;
  764.     color: var(--pl-text-muted);
  765. }
  767. .pl-optional {
  768.     font-weight: 400;
  769.     color: var(--pl-text-muted);
  770. }
  772. .pl-required {
  773.     color: #EF4444;
  774.     margin-left: 2px;
  775. }
  777. /* Error alert */
  778. .pl-error {
  779.     background: #FEF2F2;
  780.     border: 1px solid #FECACA;
  781.     border-radius: 8px;
  782.     padding: 12px 14px;
  783.     margin-bottom: 18px;
  784.     font-size: 13px;
  785.     color: #991B1B;
  786.     display: flex;
  787.     align-items: center;
  788.     gap: 8px;
  789. }
  791. .pl-error svg {
  792.     flex-shrink: 0;
  793.     color: #EF4444;
  794. }
  796. /* ========================================
  797.    FOOTER TRUST BAR
  798.    ======================================== */
  799. .pl-footer-trust {
  800.     background: var(--pl-bg-hero);
  801.     border-top: 1px solid var(--pl-border);
  802.     padding: 16px 24px;
  803.     display: flex;
  804.     justify-content: center;
  805.     gap: 32px;
  806. }
  808. .pl-footer-item {
  809.     display: flex;
  810.     align-items: center;
  811.     gap: 8px;
  812.     font-size: 12px;
  813.     color: var(--pl-text-muted);
  814. }
  816. .pl-footer-item svg {
  817.     width: 16px;
  818.     height: 16px;
  819.     color: var(--pl-teal);
  820. }
  822. /* ========================================
  823.    LOADER
  824.    ======================================== */
  825. .pl-loader {
  826.     position: fixed;
  827.     inset: 0;
  828.     background: rgba(255,255,255,0.95);
  829.     z-index: 9999;
  830.     display: none;
  831.     align-items: center;
  832.     justify-content: center;
  833. }
  835. .pl-loader.active {
  836.     display: flex;
  837. }
  839. .pl-loader-inner {
  840.     text-align: center;
  841. }
  843. .pl-spinner {
  844.     width: 40px;
  845.     height: 40px;
  846.     border: 3px solid var(--pl-border);
  847.     border-top-color: var(--pl-teal);
  848.     border-radius: 50%;
  849.     animation: plSpin 0.7s linear infinite;
  850. }
  852. @keyframes plSpin {
  853.     to { transform: rotate(360deg); }
  854. }
  856. .pl-loader-text {
  857.     margin-top: 16px;
  858.     font-size: 15px;
  859.     font-weight: 600;
  860.     color: var(--pl-text);
  861. }
  863. .pl-loader-sub {
  864.     margin-top: 6px;
  865.     font-size: 13px;
  866.     color: var(--pl-text-secondary);
  867. }
  869. /* ========================================
  870.    RESPONSIVE - MOBILE
  871.    ======================================== */
  872. @media (max-width: 900px) {
  873.     .pl-main {
  874.         flex-direction: column;
  875.         min-height: auto;
  876.     }
  878.     .pl-hero {
  879.         width: 100%;
  880.         padding: 32px 24px;
  881.     }
  883.     .pl-hero-content {
  884.         max-width: 100%;
  885.         animation: none;
  886.     }
  888.     .pl-hero h1 {
  889.         font-size: 26px;
  890.     }
  892.     .pl-hero-subtitle {
  893.         font-size: 15px;
  894.         margin-bottom: 24px;
  895.     }
  897.     .pl-features {
  898.         gap: 14px;
  899.     }
  901.     .pl-feature {
  902.         animation: none;
  903.         opacity: 1;
  904.     }
  906.     .pl-feature-icon {
  907.         width: 38px;
  908.         height: 38px;
  909.     }
  911.     .pl-feature-icon svg {
  912.         width: 18px;
  913.         height: 18px;
  914.     }
  916.     .pl-feature-title {
  917.         font-size: 13px;
  918.     }
  920.     .pl-feature-desc {
  921.         font-size: 12px;
  922.     }
  924.     .pl-hero-illustration {
  925.         display: none;
  926.     }
  928.     .pl-form-section {
  929.         width: 100%;
  930.         padding: 24px 16px 40px;
  931.     }
  933.     .pl-card {
  934.         max-width: 100%;
  935.         box-shadow: none;
  936.         border: none;
  937.         animation: none;
  938.     }
  940.     .pl-panel {
  941.         padding: 24px 20px;
  942.     }
  944.     .pl-row {
  945.         flex-direction: column;
  946.         gap: 0;
  947.     }
  949.     .pl-footer-trust {
  950.         flex-wrap: wrap;
  951.         gap: 16px 24px;
  952.         justify-content: center;
  953.     }
  954. }
  956. @media (max-width: 480px) {
  957.     .pl-hero {
  958.         padding: 24px 20px;
  959.     }
  961.     .pl-hero h1 {
  962.         font-size: 22px;
  963.     }
  965.     .pl-tab {
  966.         padding: 14px 12px;
  967.         font-size: 13px;
  968.     }
  969. }
  970. </style>
  971. ";
  972.         
  973.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  975.         
  976.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  978.         yield from [];
  979.     }
  981.     // line 874
  982.     /**
  983.      * @return iterable<null|scalar|\Stringable>
  984.      */
  985.     public function block_Header(array $context, array $blocks = []): iterable
  986.     {
  987.         $macros = $this->macros;
  988.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  989.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Header"));
  991.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  992.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Header"));
  994.         // line 875
  995.         yield from $this->yieldParentBlock("Header", $context, $blocks);
  996.         yield "
  997. ";
  998.         
  999.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1001.         
  1002.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1004.         yield from [];
  1005.     }
  1007.     // line 878
  1008.     /**
  1009.      * @return iterable<null|scalar|\Stringable>
  1010.      */
  1011.     public function block_Content(array $context, array $blocks = []): iterable
  1012.     {
  1013.         $macros = $this->macros;
  1014.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1015.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  1017.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1018.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  1020.         // line 879
  1021.         yield "<div class=\"pl-page\">
  1022.     <!-- Loader -->
  1023.     <div class=\"pl-loader\" id=\"plLoader\">
  1024.         <div class=\"pl-loader-inner\">
  1025.             <div class=\"pl-spinner\"></div>
  1026.             <p class=\"pl-loader-text\">Création de votre compte...</p>
  1027.             <p class=\"pl-loader-sub\">Préparation de votre espace parent</p>
  1028.         </div>
  1029.     </div>
  1031.     <!-- Main two-column layout -->
  1032.     <main class=\"pl-main\">
  1033.         <!-- LEFT: Hero -->
  1034.         <section class=\"pl-hero\">
  1035.             <div class=\"pl-hero-content\">
  1036.                 <h1>Suivez le séjour de votre enfant en toute sérénité.</h1>
  1037.                 <p class=\"pl-hero-subtitle\">Photos, vidéos et messages vocaux, dans un espace privé réservé aux familles.</p>
  1039.                 <ul class=\"pl-features\">
  1040.                     <li class=\"pl-feature\">
  1041.                         <span class=\"pl-feature-icon orange\">
  1042.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1043.                                 <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>
  1044.                                 <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  1045.                                 <polyline points=\"21 15 16 10 5 21\"/>
  1046.                             </svg>
  1047.                         </span>
  1048.                         <div class=\"pl-feature-text\">
  1049.                             <p class=\"pl-feature-title\">Photos & vidéos en direct</p>
  1050.                             <p class=\"pl-feature-desc\">Visualisez les moments du séjour en toute confidentialité</p>
  1051.                         </div>
  1052.                     </li>
  1053.                     <li class=\"pl-feature\">
  1054.                         <span class=\"pl-feature-icon teal\">
  1055.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1056.                                 <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72\"/>
  1057.                             </svg>
  1058.                         </span>
  1059.                         <div class=\"pl-feature-text\">
  1060.                             <p class=\"pl-feature-title\">Messages vocaux</p>
  1061.                             <p class=\"pl-feature-desc\">Accédez à l’ensemble des messages vocaux enregistrés, en illimité.</p>
  1062.                         </div>
  1063.                     </li>
  1064.                     <li class=\"pl-feature\">
  1065.                         <span class=\"pl-feature-icon coral\">
  1066.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1067.                                 <path d=\"M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6\"/>
  1068.                                 <rect x=\"6\" y=\"5\" width=\"12\" height=\"7\"/>
  1069.                                 <path d=\"M12 3v5\"/>
  1070.                             </svg>
  1071.                         </span>
  1072.                         <div class=\"pl-feature-text\">
  1073.                             <p class=\"pl-feature-title\">Souvenirs personnalisés</p>
  1074.                             <p class=\"pl-feature-desc\">Créez albums, livres et cadeaux uniques du séjour</p>
  1075.                         </div>
  1076.                     </li>
  1077.                     <li class=\"pl-feature\">
  1078.                         <span class=\"pl-feature-icon brown\">
  1079.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1080.                                 <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>
  1081.                                 <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>
  1082.                             </svg>
  1083.                         </span>
  1084.                         <div class=\"pl-feature-text\">
  1085.                             <p class=\"pl-feature-title\">Notifications instantanées</p>
  1086.                             <p class=\"pl-feature-desc\">Restez informé à chaque nouvelle publication</p>
  1087.                         </div>
  1088.                     </li>
  1089.                 </ul>
  1091.                 <!-- Decorative illustration -->
  1092.                 <div class=\"pl-hero-illustration\">
  1093.                     <svg viewBox=\"0 0 400 280\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">
  1094.                         <!-- Background shapes -->
  1095.                         <ellipse cx=\"200\" cy=\"250\" rx=\"180\" ry=\"20\" fill=\"#E5E9F0\" opacity=\"0.5\"/>
  1096.                         
  1097.                         <!-- Phone mockup -->
  1098.                         <rect x=\"140\" y=\"30\" width=\"120\" height=\"200\" rx=\"16\" fill=\"#1A1A2E\"/>
  1099.                         <rect x=\"146\" y=\"40\" width=\"108\" height=\"180\" rx=\"12\" fill=\"#fff\"/>
  1100.                         
  1101.                         <!-- Phone content - photos grid -->
  1102.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"#F09E7A\" opacity=\"0.3\"/>
  1103.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad1)\"/>
  1104.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"#41A2AA\" opacity=\"0.3\"/>
  1105.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad2)\"/>
  1106.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"#F56040\" opacity=\"0.2\"/>
  1107.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"url(#imgGrad3)\"/>
  1108.                         
  1109.                         <!-- Photo icons -->
  1110.                         <circle cx=\"176\" cy=\"79\" r=\"12\" fill=\"#F09E7A\"/>
  1111.                         <path d=\"M170 82l4-5 3 3 5-6 6 8H170z\" fill=\"#fff\"/>
  1112.                         <circle cx=\"226\" cy=\"79\" r=\"10\" fill=\"#41A2AA\"/>
  1113.                         <polygon points=\"221,82 226,74 231,82\" fill=\"#fff\"/>
  1114.                         
  1115.                         <!-- Play button on video -->
  1116.                         <circle cx=\"200\" cy=\"137\" r=\"14\" fill=\"rgba(255,255,255,0.9)\"/>
  1117.                         <polygon points=\"196,131 196,143 208,137\" fill=\"#F56040\"/>
  1118.                         
  1119.                         <!-- Notification bar -->
  1120.                         <rect x=\"152\" y=\"175\" width=\"96\" height=\"38\" rx=\"8\" fill=\"#F8FAFB\"/>
  1121.                         <circle cx=\"168\" cy=\"194\" r=\"10\" fill=\"#41A2AA\"/>
  1122.                         <path d=\"M165 194l2 2 4-4\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>
  1123.                         <rect x=\"184\" y=\"188\" width=\"50\" height=\"6\" rx=\"3\" fill=\"#E5E9F0\"/>
  1124.                         <rect x=\"184\" y=\"198\" width=\"35\" height=\"4\" rx=\"2\" fill=\"#E5E9F0\"/>
  1125.                         
  1126.                         <!-- Phone notch -->
  1127.                         <rect x=\"175\" y=\"34\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#1A1A2E\"/>
  1128.                         
  1129.                         <!-- Decorative elements around -->
  1130.                         <circle cx=\"80\" cy=\"80\" r=\"8\" fill=\"#F09E7A\" opacity=\"0.6\"/>
  1131.                         <circle cx=\"320\" cy=\"100\" r=\"6\" fill=\"#41A2AA\" opacity=\"0.5\"/>
  1132.                         <circle cx=\"340\" cy=\"180\" r=\"10\" fill=\"#F56040\" opacity=\"0.4\"/>
  1133.                         <circle cx=\"60\" cy=\"180\" r=\"5\" fill=\"#41A2AA\" opacity=\"0.4\"/>
  1134.                         
  1135.                         <!-- Hearts/love -->
  1136.                         <path d=\"M300 60c-2-4-8-4-10 0-2-4-8-4-10 0 0 6 10 12 10 12s10-6 10-12z\" fill=\"#F09E7A\" opacity=\"0.7\"/>
  1137.                         
  1138.                         <!-- Stars -->
  1139.                         <path d=\"M70 120l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1 2-4z\" fill=\"#FFD93D\" opacity=\"0.8\"/>
  1140.                         <path d=\"M350 140l1.5 3 3 .5-2 2 .5 3-3-1.5-3 1.5.5-3-2-2 3-.5 1.5-3z\" fill=\"#FFD93D\" opacity=\"0.6\"/>
  1141.                         
  1142.                         <!-- Gradients -->
  1143.                         <defs>
  1144.                             <linearGradient id=\"imgGrad1\" x1=\"152\" y1=\"55\" x2=\"200\" y2=\"103\">
  1145.                                 <stop offset=\"0%\" stop-color=\"#F09E7A\" stop-opacity=\"0.4\"/>
  1146.                                 <stop offset=\"100%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  1147.                             </linearGradient>
  1148.                             <linearGradient id=\"imgGrad2\" x1=\"204\" y1=\"55\" x2=\"248\" y2=\"103\">
  1149.                                 <stop offset=\"0%\" stop-color=\"#41A2AA\" stop-opacity=\"0.4\"/>
  1150.                                 <stop offset=\"100%\" stop-color=\"#359BA3\" stop-opacity=\"0.3\"/>
  1151.                             </linearGradient>
  1152.                             <linearGradient id=\"imgGrad3\" x1=\"152\" y1=\"107\" x2=\"248\" y2=\"167\">
  1153.                                 <stop offset=\"0%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  1154.                                 <stop offset=\"100%\" stop-color=\"#F09E7A\" stop-opacity=\"0.2\"/>
  1155.                             </linearGradient>
  1156.                         </defs>
  1157.                     </svg>
  1158.                     
  1159.                     <!-- Floating notification badges -->
  1160.                     <div class=\"pl-floating-badges\">
  1161.                         <div class=\"pl-badge pl-badge-1\">
  1162.                             <span class=\"pl-badge-icon orange\">
  1163.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1164.                                     <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>
  1165.                                     <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  1166.                                     <polyline points=\"21 15 16 10 5 21\"/>
  1167.                                 </svg>
  1168.                             </span>
  1169.                             <span>+12 photos</span>
  1170.                         </div>
  1171.                         <div class=\"pl-badge pl-badge-2\">
  1172.                             <span class=\"pl-badge-icon teal\">
  1173.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1174.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>
  1175.                                     <polyline points=\"22 4 12 14.01 9 11.01\"/>
  1176.                                 </svg>
  1177.                             </span>
  1178.                             <span>Bien arrivés !</span>
  1179.                         </div>
  1180.                     </div>
  1181.                 </div>
  1182.             </div>
  1183.         </section>
  1185.         <!-- RIGHT: Form -->
  1186.         <section class=\"pl-form-section\">
  1187.             <div class=\"pl-card\">
  1188.                 <!-- Tabs -->
  1189.                 <div class=\"pl-tabs\" role=\"tablist\">
  1190.                     <button class=\"pl-tab active\" role=\"tab\" data-tab=\"login\" aria-selected=\"true\">Se connecter</button>
  1191.                     <button class=\"pl-tab\" role=\"tab\" data-tab=\"register\" aria-selected=\"false\">Créer un compte</button>
  1192.                 </div>
  1194.                 <!-- LOGIN PANEL -->
  1195.                 <div class=\"pl-panel active\" id=\"panel-login\" role=\"tabpanel\">
  1196.                     ";
  1197.         // line 1054
  1198.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 1054, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1199.             // line 1055
  1200.             yield "                    <div class=\"pl-error\">
  1201.                         <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1202.                             <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1203.                             <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>
  1204.                             <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>
  1205.                         </svg>
  1206.                         Identifiant ou mot de passe incorrect.
  1207.                     </div>
  1208.                     ";
  1209.         }
  1210.         // line 1064
  1211.         yield "
  1212.                     <form method=\"post\" action=\"";
  1213.         // line 1065
  1214.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Parent");
  1215.         yield "\" id=\"loginForm\" autocomplete=\"off\">
  1216.                         <!-- Code Séjour - Required for direct access -->
  1217.                         <div class=\"pl-form-group\">
  1218.                             <label class=\"pl-label\">
  1219.                                 Code séjour
  1220.                                 <span class=\"pl-required\">*</span>
  1221.                             </label>
  1222.                             <input type=\"text\" 
  1223.                                 class=\"pl-input pl-input-code\" 
  1224.                                 name=\"code_sejour\" 
  1225.                                 id=\"loginCode\" 
  1226.                                 placeholder=\"   XX000000\"
  1227.                                 maxlength=\"8\"
  1228.                                 autocomplete=\"one-time-code\"
  1229.                                 data-lpignore=\"true\"
  1230.                                 data-form-type=\"other\"
  1231.                                 required>
  1232.                             <p class=\"pl-hint\">
  1233.                                 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1234.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1235.                                     <path d=\"M12 16v-4\"/>
  1236.                                     <path d=\"M12 8h.01\"/>
  1237.                                 </svg>
  1238.                                 Code reçu par l'école ou l'organisateur du séjour
  1239.                             </p>
  1240.                         </div>
  1242.                         <div class=\"pl-form-group\">
  1243.                             <label class=\"pl-label\">Adresse e-mail</label>
  1244.                             <input type=\"email\" class=\"pl-input\" name=\"email\" id=\"loginEmail\" value=\"";
  1245.         // line 1094
  1246.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["last_username"]) || array_key_exists("last_username", $context) ? $context["last_username"] : (function () { throw new RuntimeError('Variable "last_username" does not exist.', 1094, $this->source); })()), "html", null, true);
  1247.         yield "\" placeholder=\"votre@email.com\" autocomplete=\"username\" required>
  1248.                         </div>
  1250.                         <div class=\"pl-form-group\">
  1251.                             <label class=\"pl-label\">Mot de passe</label>
  1252.                             <div class=\"pl-password-wrap\">
  1253.                                 <input type=\"password\" class=\"pl-input\" name=\"password\" id=\"loginPwd\" placeholder=\"••••••••\" autocomplete=\"current-password\" required>
  1254.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"loginPwd\" aria-label=\"Afficher\">
  1255.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1256.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1257.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1258.                                     </svg>
  1259.                                 </button>
  1260.                             </div>
  1261.                         </div>
  1263.                         <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  1264.         // line 1110
  1265.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  1266.         yield "\">
  1268.                         <button type=\"submit\" class=\"pl-btn\">Se connecter</button>
  1269.                         <a href=\"";
  1270.         // line 1113
  1271.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1272.         yield "\" class=\"pl-forgot\">Vous avez oublié votre mot de passe ?</a>
  1273.                     </form>
  1275.                     <div class=\"pl-divider\">
  1276.                         <span class=\"pl-divider-line\"></span>
  1277.                         <span class=\"pl-divider-text\">ou</span>
  1278.                         <span class=\"pl-divider-line\"></span>
  1279.                     </div>
  1281.                     <div class=\"pl-socials\">
  1282.                         <a href=\"";
  1283.         // line 1123
  1284.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  1285.         yield "\" class=\"pl-social-btn pl-social-google\">
  1286.                             <img src=\"";
  1287.         // line 1124
  1288.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  1289.         yield "\" alt=\"\">
  1290.                             Continuer avec Google
  1291.                         </a>
  1292.                         <a href=\"";
  1293.         // line 1127
  1294.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  1295.         yield "\" class=\"pl-social-btn pl-social-facebook\">
  1296.                             <img src=\"";
  1297.         // line 1128
  1298.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  1299.         yield "\" alt=\"\">
  1300.                             Continuer avec Facebook
  1301.                         </a>
  1302.                     </div>
  1303.                 </div>
  1305.                 <!-- REGISTER PANEL -->
  1306.                 <div class=\"pl-panel\" id=\"panel-register\" role=\"tabpanel\">
  1307.                     <form id=\"registerForm\" onsubmit=\"return false;\" autocomplete=\"off\">
  1308.                      
  1309.                         <div class=\"pl-row\">
  1310.                             <div class=\"pl-form-group\">
  1311.                                 <label class=\"pl-label\">Nom</label>
  1312.                                 <input type=\"text\" class=\"pl-input\" id=\"regNom\" name=\"family-name\" placeholder=\"Votre nom\" autocomplete=\"family-name\" required>
  1313.                             </div>
  1314.                             <div class=\"pl-form-group\">
  1315.                                 <label class=\"pl-label\">Prénom</label>
  1316.                                 <input type=\"text\" class=\"pl-input\" id=\"regPrenom\" name=\"given-name\" placeholder=\"Votre prénom\" autocomplete=\"given-name\" required>
  1317.                             </div>
  1318.                         </div>
  1320.                         <div class=\"pl-form-group\">
  1321.                             <label class=\"pl-label\">Adresse e-mail</label>
  1322.                             <input type=\"email\" class=\"pl-input\" id=\"regEmail\" name=\"email\" placeholder=\"votre@email.com\" autocomplete=\"email\" required>
  1323.                         </div>
  1325.                         <div class=\"pl-form-group\">
  1326.                             <label class=\"pl-label\">Mot de passe</label>
  1327.                             <div class=\"pl-password-wrap\">
  1328.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwd\" name=\"new-password\" placeholder=\"Minimum 6 caractères\" autocomplete=\"new-password\" required>
  1329.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwd\" aria-label=\"Afficher\">
  1330.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1331.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1332.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1333.                                     </svg>
  1334.                                 </button>
  1335.                             </div>
  1336.                         </div>
  1338.                         <div class=\"pl-form-group\">
  1339.                             <label class=\"pl-label\">Confirmer le mot de passe</label>
  1340.                             <div class=\"pl-password-wrap\">
  1341.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwdConfirm\" name=\"confirm-password\" placeholder=\"Retapez votre mot de passe\" autocomplete=\"new-password\" required>
  1342.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwdConfirm\" aria-label=\"Afficher\">
  1343.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1344.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1345.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1346.                                     </svg>
  1347.                                 </button>
  1348.                             </div>
  1349.                         </div>
  1351.                         <div class=\"pl-form-group\">
  1352.                             <label class=\"pl-label\">Téléphone portable</label>
  1353.                             <input type=\"tel\" class=\"pl-input\" id=\"regPhone\" placeholder=\"06 12 34 56 78\" required>
  1354.                         </div>
  1356.                         <div class=\"pl-notif-box\">
  1357.                             <p class=\"pl-notif-label\">Recevoir les notifications :</p>
  1358.                             <div class=\"pl-notif-opts\">
  1359.                                 <label class=\"pl-checkbox\">
  1360.                                     <input type=\"checkbox\" id=\"notifSms\">
  1361.                                     SMS
  1362.                                 </label>
  1363.                                 <label class=\"pl-checkbox\">
  1364.                                     <input type=\"checkbox\" id=\"notifEmail\" checked>
  1365.                                     E-mail
  1366.                                 </label>
  1367.                             </div>
  1368.                         </div>
  1370.                         <button type=\"button\" class=\"pl-btn pl-btn-secondary\" onclick=\"handleRegister()\">Créer mon compte Parent</button>
  1371.                         <p class=\"pl-note\">Vous pourrez modifier vos informations et vos préférences de notifications à tout moment.</p>
  1372.                     </form>
  1374.                     <div class=\"pl-divider\">
  1375.                         <span class=\"pl-divider-line\"></span>
  1376.                         <span class=\"pl-divider-text\">ou</span>
  1377.                         <span class=\"pl-divider-line\"></span>
  1378.                     </div>
  1380.                     <div class=\"pl-socials\">
  1381.                         <a href=\"";
  1382.         // line 1210
  1383.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  1384.         yield "\" class=\"pl-social-btn pl-social-google\">
  1385.                             <img src=\"";
  1386.         // line 1211
  1387.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  1388.         yield "\" alt=\"\">
  1389.                             Continuer avec Google
  1390.                         </a>
  1391.                         <a href=\"";
  1392.         // line 1214
  1393.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  1394.         yield "\" class=\"pl-social-btn pl-social-facebook\">
  1395.                             <img src=\"";
  1396.         // line 1215
  1397.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  1398.         yield "\" alt=\"\">
  1399.                             Continuer avec Facebook
  1400.                         </a>
  1401.                     </div>
  1402.                 </div>
  1403.             </div>
  1404.         </section>
  1405.     </main>
  1407.     <!-- Footer trust bar -->
  1408.     <footer class=\"pl-footer-trust\">
  1409.         <span class=\"pl-footer-item\">
  1410.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1411.                 <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>
  1412.                 <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>
  1413.             </svg>
  1414.             Connexion sécurisée
  1415.         </span>
  1416.         <span class=\"pl-footer-item\">
  1417.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1418.                 <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>
  1419.             </svg>
  1420.             Données protégées
  1421.         </span>
  1422.         <span class=\"pl-footer-item\">
  1423.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1424.                 <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1425.                 <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>
  1426.                 <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/>
  1427.             </svg>
  1428.             Hébergé en France
  1429.         </span>
  1430.     </footer>
  1431. </div>
  1432. ";
  1433.         
  1434.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1436.         
  1437.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1439.         yield from [];
  1440.     }
  1442.     // line 1251
  1443.     /**
  1444.      * @return iterable<null|scalar|\Stringable>
  1445.      */
  1446.     public function block_Footer(array $context, array $blocks = []): iterable
  1447.     {
  1448.         $macros = $this->macros;
  1449.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1450.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  1452.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1453.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  1455.         // line 1252
  1456.         yield from $this->yieldParentBlock("Footer", $context, $blocks);
  1457.         yield "
  1458. ";
  1459.         
  1460.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1462.         
  1463.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1465.         yield from [];
  1466.     }
  1468.     // line 1255
  1469.     /**
  1470.      * @return iterable<null|scalar|\Stringable>
  1471.      */
  1472.     public function block_javascript(array $context, array $blocks = []): iterable
  1473.     {
  1474.         $macros = $this->macros;
  1475.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1476.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1478.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1479.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1481.         // line 1256
  1482.         yield from $this->yieldParentBlock("javascript", $context, $blocks);
  1483.         yield "
  1484. <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  1485. <script>
  1486. document.addEventListener('DOMContentLoaded', function() {
  1487.     // Tab switching
  1488.     const tabs = document.querySelectorAll('.pl-tab');
  1489.     const panels = document.querySelectorAll('.pl-panel');
  1491.     tabs.forEach(tab => {
  1492.         tab.addEventListener('click', () => {
  1493.             const target = tab.dataset.tab;
  1495.             tabs.forEach(t => {
  1496.                 t.classList.remove('active');
  1497.                 t.setAttribute('aria-selected', 'false');
  1498.             });
  1499.             tab.classList.add('active');
  1500.             tab.setAttribute('aria-selected', 'true');
  1502.             panels.forEach(p => p.classList.remove('active'));
  1503.             document.getElementById('panel-' + target).classList.add('active');
  1504.         });
  1505.     });
  1507.     // Clear autofilled code séjour field on page load (browser autofill fix)
  1508.     const codeInput = document.getElementById('loginCode');
  1509.     if (codeInput) {
  1510.         // Clear any incorrect autofill value
  1511.         setTimeout(() => {
  1512.             const currentValue = codeInput.value;
  1513.             // If the value doesn't match code séjour format (2 letters + 6 digits), clear it
  1514.             if (currentValue && !/^[A-Z]{2}[0-9]{6}\$/.test(currentValue.toUpperCase())) {
  1515.                 codeInput.value = '';
  1516.             }
  1517.         }, 100);
  1518.     }
  1520.     // Password toggle
  1521.     document.querySelectorAll('.pl-eye-btn').forEach(btn => {
  1522.         btn.addEventListener('click', () => {
  1523.             const input = document.getElementById(btn.dataset.target);
  1524.             const isPassword = input.type === 'password';
  1525.             input.type = isPassword ? 'text' : 'password';
  1526.             btn.querySelector('svg').style.opacity = isPassword ? '0.5' : '1';
  1527.         });
  1528.     });
  1530.     // Auto-format code séjour (uppercase) and validation
  1531.     if (codeInput) {
  1532.         codeInput.addEventListener('input', (e) => {
  1533.             let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
  1534.             e.target.value = value;
  1535.             
  1536.             // Visual feedback when complete
  1537.             if (value.length === 8) {
  1538.                 e.target.style.borderColor = '#41A2AA';
  1539.                 e.target.style.background = 'rgba(65, 162, 170, 0.06)';
  1540.             } else {
  1541.                 e.target.style.borderColor = '';
  1542.                 e.target.style.background = '';
  1543.             }
  1544.         });
  1546.         // Validate on form submit
  1547.         document.getElementById('loginForm').addEventListener('submit', function(e) {
  1548.             const codePattern = /^[A-Z]{2}[0-9]{6}\$/;
  1549.             if (!codePattern.test(codeInput.value)) {
  1550.                 e.preventDefault();
  1551.                 codeInput.classList.add('is-invalid');
  1552.                 Swal.fire({
  1553.                     icon: 'error',
  1554.                     title: 'Code séjour invalide',
  1555.                     html: '<p style=\"margin-bottom:8px;\">Le code doit contenir :</p><p style=\"color:#5A6178;font-size:14px;\"><strong>2 lettres</strong> + <strong>6 chiffres</strong><br>Exemple : <span style=\"color:#41A2AA;font-weight:600;\">PF270076</span></p>',
  1556.                     confirmButtonColor: '#41a2aa'
  1557.                 });
  1558.             } else {
  1559.                 // Show loading state on button
  1560.                 const btn = this.querySelector('button[type=\"submit\"]');
  1561.                 btn.classList.add('pl-btn-loading');
  1562.                 btn.disabled = true;
  1563.             }
  1564.         });
  1565.     }
  1567.     // Add visual feedback when email is valid
  1568.     const emailInputs = document.querySelectorAll('input[type=\"email\"]');
  1569.     emailInputs.forEach(input => {
  1570.         input.addEventListener('blur', function() {
  1571.             const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  1572.             if (this.value && emailRegex.test(this.value)) {
  1573.                 this.classList.add('is-valid');
  1574.                 this.classList.remove('is-invalid');
  1575.             } else if (this.value) {
  1576.                 this.classList.add('is-invalid');
  1577.                 this.classList.remove('is-valid');
  1578.             }
  1579.         });
  1580.         input.addEventListener('input', function() {
  1581.             this.classList.remove('is-valid', 'is-invalid');
  1582.         });
  1583.     });
  1585.     // Login error
  1586.     ";
  1587.         // line 1359
  1588.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 1359, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1589.             // line 1360
  1590.             yield "    Swal.fire({
  1591.         icon: 'error',
  1592.         title: 'Erreur de connexion',
  1593.         text: 'Identifiant ou mot de passe incorrect.',
  1594.         confirmButtonColor: '#41a2aa'
  1595.     });
  1596.     ";
  1597.         }
  1598.         // line 1367
  1599.         yield "});
  1601. // Registration
  1602. function handleRegister() {
  1603.     const loader = document.getElementById('plLoader');
  1604.     const fields = {
  1605.         nom: document.getElementById('regNom'),
  1606.         prenom: document.getElementById('regPrenom'),
  1607.         email: document.getElementById('regEmail'),
  1608.         pwd: document.getElementById('regPwd'),
  1609.         pwdConfirm: document.getElementById('regPwdConfirm'),
  1610.         phone: document.getElementById('regPhone')
  1611.     };
  1613.     // Reset
  1614.     Object.values(fields).forEach(f => f.classList.remove('is-invalid'));
  1616.     // Validate
  1617.     let valid = true;
  1619.     if (!fields.nom.value.trim()) { fields.nom.classList.add('is-invalid'); valid = false; }
  1620.     if (!fields.prenom.value.trim()) { fields.prenom.classList.add('is-invalid'); valid = false; }
  1622.     const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  1623.     if (!emailRegex.test(fields.email.value)) { fields.email.classList.add('is-invalid'); valid = false; }
  1625.     if (fields.pwd.value.length < 6) {
  1626.         fields.pwd.classList.add('is-invalid');
  1627.         Swal.fire({ icon: 'warning', title: 'Mot de passe trop court', text: 'Minimum 6 caractères.', confirmButtonColor: '#41a2aa' });
  1628.         return;
  1629.     }
  1631.     if (fields.pwd.value !== fields.pwdConfirm.value) {
  1632.         fields.pwdConfirm.classList.add('is-invalid');
  1633.         Swal.fire({ icon: 'warning', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  1634.         return;
  1635.     }
  1637.     if (!fields.phone.value.trim()) { fields.phone.classList.add('is-invalid'); valid = false; }
  1639.     if (!valid) return;
  1641.     loader.classList.add('active');
  1643.     const data = {
  1644.         nomparent: fields.nom.value.trim(),
  1645.         prenomparent: fields.prenom.value.trim(),
  1646.         mailprent: fields.email.value.trim(),
  1647.         numtel: fields.phone.value.trim(),
  1648.         passwordparent: fields.pwd.value,
  1649.         confirmpassword: fields.pwdConfirm.value,
  1650.         sms: document.getElementById('notifSms').checked ? 1 : 0,
  1651.         mailnotif: document.getElementById('notifEmail').checked ? 1 : 0
  1652.     };
  1654.     fetch(\"";
  1655.         // line 1422
  1656.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("parent_register");
  1657.         yield "\", {
  1658.         method: 'POST',
  1659.         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  1660.         body: new URLSearchParams(data)
  1661.     })
  1662.     .then(r => r.text())
  1663.     .then(result => {
  1664.         loader.classList.remove('active');
  1666.         if (result === 'eror') {
  1667.             fields.email.classList.add('is-invalid');
  1668.             Swal.fire({
  1669.                 icon: 'error',
  1670.                 title: 'Email déjà utilisé',
  1671.                 text: 'Cette adresse est déjà associée à un compte.',
  1672.                 footer: '<a href=\"";
  1673.         // line 1437
  1674.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1675.         yield "\" style=\"color:#F09E7A;\">Mot de passe oublié ?</a>',
  1676.                 confirmButtonColor: '#41a2aa'
  1677.             });
  1678.         } else if (result === 'erorpasswordconfirm') {
  1679.             fields.pwdConfirm.classList.add('is-invalid');
  1680.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  1681.         } else {
  1682.             Swal.fire({
  1683.                 icon: 'success',
  1684.                 title: '🎉 Bienvenue !',
  1685.                 html: '<p>Votre compte parent est presque prêt.</p><p style=\"color:#5A6178;font-size:14px;\">📩 Un e-mail vous a été envoyé pour activer votre compte.</p>',
  1686.                 confirmButtonText: 'Compris',
  1687.                 confirmButtonColor: '#41a2aa'
  1688.             }).then(() => location.reload());
  1689.         }
  1690.     })
  1691.     .catch(() => {
  1692.         loader.classList.remove('active');
  1693.         Swal.fire({ icon: 'error', title: 'Erreur', text: 'Un problème est survenu. Veuillez réessayer.', confirmButtonColor: '#F09E7A' });
  1694.     });
  1695. }
  1696. </script>
  1697. ";
  1698.         
  1699.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1701.         
  1702.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1704.         yield from [];
  1705.     }
  1707.     /**
  1708.      * @codeCoverageIgnore
  1709.      */
  1710.     public function getTemplateName(): string
  1711.     {
  1712.         return "Parent/LoginParent.html.twig";
  1713.     }
  1715.     /**
  1716.      * @codeCoverageIgnore
  1717.      */
  1718.     public function isTraitable(): bool
  1719.     {
  1720.         return false;
  1721.     }
  1723.     /**
  1724.      * @codeCoverageIgnore
  1725.      */
  1726.     public function getDebugInfo(): array
  1727.     {
  1728.         return array (  1674 => 1437,  1656 => 1422,  1599 => 1367,  1590 => 1360,  1588 => 1359,  1482 => 1256,  1469 => 1255,  1456 => 1252,  1443 => 1251,  1397 => 1215,  1393 => 1214,  1387 => 1211,  1383 => 1210,  1298 => 1128,  1294 => 1127,  1288 => 1124,  1284 => 1123,  1271 => 1113,  1265 => 1110,  1246 => 1094,  1214 => 1065,  1211 => 1064,  1200 => 1055,  1198 => 1054,  1021 => 879,  1008 => 878,  995 => 875,  982 => 874,  104 => 6,  91 => 5,  68 => 3,  45 => 1,);
  1729.     }
  1731.     public function getSourceContext(): Source
  1732.     {
  1733.         return new Source("{% extends 'Accueil/layoutAccueil.html.twig' %}
  1735. {% block title %}Connexion Parent — 5sur5séjour{% endblock %}
  1737. {% block stylesheets %}
  1738. {{ parent() }}
  1739. <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  1740. <style>
  1741. /* ========================================
  1742.    5SUR5 PARENT LOGIN - CLEAN TWO-COLUMN
  1743.    Stripe/Notion Quality · No Slider
  1744.    ======================================== */
  1746. :root {
  1747.     --pl-teal: #41A2AA;
  1748.     --pl-teal-dark: #359BA3;
  1749.     --pl-teal-light: rgba(65, 162, 170, 0.06);
  1750.     --pl-orange: #F09E7A;
  1751.     --pl-orange-dark: #E8865E;
  1752.     --pl-text: #1A1A2E;
  1753.     --pl-text-secondary: #5A6178;
  1754.     --pl-text-muted: #8E95A9;
  1755.     --pl-bg: #FFFFFF;
  1756.     --pl-bg-hero: #F8FAFB;
  1757.     --pl-border: #E5E9F0;
  1758.     --pl-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  1759.     --pl-radius: 16px;
  1760. }
  1762. * {
  1763.     box-sizing: border-box;
  1764. }
  1766. .pl-page {
  1767.     min-height: 100vh;
  1768.     display: flex;
  1769.     flex-direction: column;
  1770. }
  1772. /* ========================================
  1773.    MAIN CONTAINER - TWO COLUMNS
  1774.    ======================================== */
  1775. .pl-main {
  1776.     flex: 1;
  1777.     display: flex;
  1778.     min-height: calc(100vh - 160px);
  1779. }
  1781. /* ========================================
  1782.    LEFT COLUMN - HERO
  1783.    ======================================== */
  1784. .pl-hero {
  1785.     width: 35%;
  1786.     background: var(--pl-bg-hero);
  1787.     padding: 40px;
  1788.     display: flex;
  1789.     flex-direction: column;
  1790.     justify-content: center;
  1791.     position: relative;
  1792. }
  1794. .pl-hero-content {
  1795.     flex: 1;
  1796.     display: flex;
  1797.     flex-direction: column;
  1798.     justify-content: center;
  1799.     max-width: 420px;
  1800. }
  1802. .pl-hero h1 {
  1803.     font-size: 32px;
  1804.     font-weight: 700;
  1805.     color: var(--pl-text);
  1806.     line-height: 1.25;
  1807.     margin: 0 0 16px;
  1808.     letter-spacing: -0.02em;
  1809. }
  1811. .pl-hero-subtitle {
  1812.     font-size: 17px;
  1813.     color: var(--pl-text-secondary);
  1814.     line-height: 1.6;
  1815.     margin: 0 0 32px;
  1816. }
  1818. /* Features List - Premium Style */
  1819. .pl-features {
  1820.     list-style: none;
  1821.     padding: 0;
  1822.     margin: 0;
  1823.     display: flex;
  1824.     flex-direction: column;
  1825.     gap: 18px;
  1826. }
  1828. .pl-feature {
  1829.     display: flex;
  1830.     align-items: flex-start;
  1831.     gap: 14px;
  1832. }
  1834. .pl-feature-icon {
  1835.     width: 44px;
  1836.     height: 44px;
  1837.     border-radius: 12px;
  1838.     display: flex;
  1839.     align-items: center;
  1840.     justify-content: center;
  1841.     flex-shrink: 0;
  1842. }
  1844. .pl-feature-icon svg {
  1845.     width: 22px;
  1846.     height: 22px;
  1847.     color: #fff;
  1848. }
  1850. .pl-feature-icon.teal { background: var(--pl-teal); }
  1851. .pl-feature-icon.orange { background: var(--pl-orange); }
  1852. .pl-feature-icon.coral { background: #F56040; }
  1853. .pl-feature-icon.brown { background: #c47d5e; }
  1855. .pl-feature-text {
  1856.     padding-top: 2px;
  1857. }
  1859. .pl-feature-title {
  1860.     font-size: 14px;
  1861.     font-weight: 600;
  1862.     color: var(--pl-text);
  1863.     margin: 0 0 3px;
  1864. }
  1866. .pl-feature-desc {
  1867.     font-size: 13px;
  1868.     color: var(--pl-text-muted);
  1869.     margin: 0;
  1870.     line-height: 1.4;
  1871. }
  1873. /* Hero image */
  1874. .pl-hero-image {
  1875.     margin-top: auto;
  1876.     border-radius: 12px;
  1877.     overflow: hidden;
  1878. }
  1880. .pl-hero-image img {
  1881.     width: 100%;
  1882.     height: auto;
  1883.     display: block;
  1884.     border-radius: 12px;
  1885. }
  1887. /* Hero decorative illustration */
  1888. .pl-hero-illustration {
  1889.     margin-top: auto;
  1890.     padding-top: 40px;
  1891.     position: relative;
  1892. }
  1894. .pl-hero-illustration svg {
  1895.     width: 100%;
  1896.     max-width: 320px;
  1897.     height: auto;
  1898.     opacity: 0.9;
  1899. }
  1901. /* Floating badges */
  1902. .pl-floating-badges {
  1903.     position: absolute;
  1904.     inset: 0;
  1905.     pointer-events: none;
  1906. }
  1908. .pl-badge {
  1909.     position: absolute;
  1910.     background: #fff;
  1911.     border-radius: 12px;
  1912.     padding: 10px 14px;
  1913.     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  1914.     display: flex;
  1915.     align-items: center;
  1916.     gap: 10px;
  1917.     font-size: 13px;
  1918.     font-weight: 500;
  1919.     color: var(--pl-text);
  1920.     animation: plFloat 3s ease-in-out infinite;
  1921. }
  1923. .pl-badge-icon {
  1924.     width: 32px;
  1925.     height: 32px;
  1926.     border-radius: 8px;
  1927.     display: flex;
  1928.     align-items: center;
  1929.     justify-content: center;
  1930. }
  1932. .pl-badge-icon svg {
  1933.     width: 18px;
  1934.     height: 18px;
  1935.     color: #fff;
  1936. }
  1938. .pl-badge-icon.teal { background: var(--pl-teal); }
  1939. .pl-badge-icon.orange { background: var(--pl-orange); }
  1940. .pl-badge-icon.coral { background: #F56040; }
  1942. .pl-badge-1 {
  1943.     top: 20%;
  1944.     right: -10px;
  1945.     animation-delay: 0s;
  1946. }
  1948. .pl-badge-2 {
  1949.     bottom: 30%;
  1950.     left: -5px;
  1951.     animation-delay: 1s;
  1952. }
  1954. .pl-badge-3 {
  1955.     bottom: 10%;
  1956.     right: 10%;
  1957.     animation-delay: 2s;
  1958. }
  1960. @keyframes plFloat {
  1961.     0%, 100% { transform: translateY(0); }
  1962.     50% { transform: translateY(-8px); }
  1963. }
  1965. /* Entry animations */
  1966. .pl-hero-content {
  1967.     animation: plSlideRight 0.6s ease-out;
  1968. }
  1970. .pl-card {
  1971.     animation: plSlideUp 0.5s ease-out;
  1972. }
  1974. @keyframes plSlideRight {
  1975.     from { opacity: 0; transform: translateX(-20px); }
  1976.     to { opacity: 1; transform: translateX(0); }
  1977. }
  1979. @keyframes plSlideUp {
  1980.     from { opacity: 0; transform: translateY(20px); }
  1981.     to { opacity: 1; transform: translateY(0); }
  1982. }
  1984. /* Feature items staggered animation */
  1985. .pl-feature {
  1986.     opacity: 0;
  1987.     animation: plFadeIn 0.4s ease forwards;
  1988. }
  1990. .pl-feature:nth-child(1) { animation-delay: 0.1s; }
  1991. .pl-feature:nth-child(2) { animation-delay: 0.2s; }
  1992. .pl-feature:nth-child(3) { animation-delay: 0.3s; }
  1993. .pl-feature:nth-child(4) { animation-delay: 0.4s; }
  1995. /* ========================================
  1996.    RIGHT COLUMN - FORM
  1997.    ======================================== */
  1998. .pl-form-section {
  1999.     width: 58%;
  2000.     display: flex;
  2001.     align-items: center;
  2002.     justify-content: center;
  2003.     padding: 40px;
  2004.     background: var(--pl-bg);
  2005. }
  2007. .pl-card {
  2008.     width: 100%;
  2009.     max-width: 420px;
  2010.     background: var(--pl-bg);
  2011.     border-radius: var(--pl-radius);
  2012.     box-shadow: var(--pl-shadow);
  2013.     border: 1px solid var(--pl-border);
  2014.     overflow: hidden;
  2015. }
  2017. /* Tabs */
  2018. .pl-tabs {
  2019.     display: flex;
  2020.     border-bottom: 1px solid var(--pl-border);
  2021. }
  2023. .pl-tab {
  2024.     flex: 1;
  2025.     padding: 18px 16px;
  2026.     font-size: 14px;
  2027.     font-weight: 600;
  2028.     color: var(--pl-text-muted);
  2029.     background: var(--pl-bg-hero);
  2030.     border: none;
  2031.     cursor: pointer;
  2032.     position: relative;
  2033.     transition: all 0.2s ease;
  2034. }
  2036. .pl-tab:hover {
  2037.     color: var(--pl-text-secondary);
  2038. }
  2040. .pl-tab.active {
  2041.     color: var(--pl-teal);
  2042.     background: var(--pl-bg);
  2043. }
  2045. .pl-tab.active::after {
  2046.     content: '';
  2047.     position: absolute;
  2048.     bottom: -1px;
  2049.     left: 0;
  2050.     right: 0;
  2051.     height: 2px;
  2052.     background: var(--pl-teal);
  2053. }
  2055. .pl-tab:focus-visible {
  2056.     outline: 2px solid var(--pl-teal);
  2057.     outline-offset: -2px;
  2058. }
  2060. .pl-btn:focus-visible,
  2061. .pl-social-btn:focus-visible {
  2062.     outline: 2px solid var(--pl-teal);
  2063.     outline-offset: 2px;
  2064. }
  2066. /* Tab panels */
  2067. .pl-panel {
  2068.     padding: 28px;
  2069.     display: none;
  2070. }
  2072. .pl-panel.active {
  2073.     display: block;
  2074.     animation: plFadeIn 0.25s ease;
  2075. }
  2077. @keyframes plFadeIn {
  2078.     from { opacity: 0; transform: translateY(6px); }
  2079.     to { opacity: 1; transform: translateY(0); }
  2080. }
  2082. /* Form elements */
  2083. .pl-form-group {
  2084.     margin-bottom: 18px;
  2085. }
  2087. .pl-label {
  2088.     display: block;
  2089.     font-size: 13px;
  2090.     font-weight: 500;
  2091.     color: var(--pl-text);
  2092.     margin-bottom: 6px;
  2093. }
  2095. .pl-input {
  2096.     width: 100%;
  2097.     padding: 12px 14px;
  2098.     font-size: 15px;
  2099.     font-family: inherit;
  2100.     color: var(--pl-text);
  2101.     background: var(--pl-bg);
  2102.     border: 1px solid var(--pl-border);
  2103.     border-radius: 8px;
  2104.     transition: all 0.2s ease;
  2105.     outline: none;
  2106. }
  2108. .pl-input::placeholder {
  2109.     color: var(--pl-text-muted);
  2110. }
  2112. .pl-input:hover {
  2113.     border-color: #D0D6E0;
  2114. }
  2116. .pl-input:focus {
  2117.     border-color: var(--pl-teal);
  2118.     box-shadow: 0 0 0 3px var(--pl-teal-light);
  2119. }
  2121. .pl-input.is-invalid {
  2122.     border-color: #EF4444;
  2123.     background: #FEF2F2;
  2124. }
  2126. .pl-input.is-valid {
  2127.     border-color: #10B981;
  2128.     background: rgba(16, 185, 129, 0.04);
  2129. }
  2131. .pl-hint {
  2132.     font-size: 12px;
  2133.     color: var(--pl-text-muted);
  2134.     margin-top: 5px;
  2135.     display: flex;
  2136.     align-items: center;
  2137.     gap: 4px;
  2138. }
  2140. /* Password wrapper */
  2141. .pl-password-wrap {
  2142.     position: relative;
  2143. }
  2145. .pl-password-wrap .pl-input {
  2146.     padding-right: 44px;
  2147. }
  2149. .pl-eye-btn {
  2150.     position: absolute;
  2151.     right: 12px;
  2152.     top: 50%;
  2153.     transform: translateY(-50%);
  2154.     background: none;
  2155.     border: none;
  2156.     padding: 4px;
  2157.     cursor: pointer;
  2158.     color: var(--pl-text-muted);
  2159.     transition: color 0.2s ease;
  2160. }
  2162. .pl-eye-btn:hover {
  2163.     color: var(--pl-teal);
  2164. }
  2166. /* Row for name fields */
  2167. .pl-row {
  2168.     display: flex;
  2169.     gap: 12px;
  2170. }
  2172. .pl-row .pl-form-group {
  2173.     flex: 1;
  2174. }
  2176. /* Primary button */
  2177. .pl-btn {
  2178.     width: 100%;
  2179.     padding: 14px 20px;
  2180.     font-size: 15px;
  2181.     font-weight: 600;
  2182.     font-family: inherit;
  2183.     color: #FFF;
  2184.     background: linear-gradient(135deg, var(--pl-teal) 0%, var(--pl-teal-dark) 100%);
  2185.     border: none;
  2186.     border-radius: 8px;
  2187.     cursor: pointer;
  2188.     transition: all 0.2s ease, transform 0.15s ease;
  2189.     box-shadow: 0 2px 8px rgba(65, 162, 170, 0.3);
  2190. }
  2192. .pl-btn:hover {
  2193.     background: linear-gradient(135deg, var(--pl-teal-dark) 0%, #2E8E96 100%);
  2194.     box-shadow: 0 4px 16px rgba(65, 162, 170, 0.4);
  2195.     transform: translateY(-1px);
  2196. }
  2198. .pl-btn:active {
  2199.     transform: scale(0.98);
  2200. }
  2202. .pl-btn:disabled {
  2203.     opacity: 0.7;
  2204.     cursor: not-allowed;
  2205. }
  2207. .pl-btn-secondary {
  2208.     background: linear-gradient(135deg, var(--pl-orange) 0%, var(--pl-orange-dark) 100%);
  2209.     box-shadow: 0 2px 8px rgba(240, 158, 122, 0.3);
  2210. }
  2212. .pl-btn-secondary:hover {
  2213.     background: linear-gradient(135deg, var(--pl-orange-dark) 0%, #D67A50 100%);
  2214.     box-shadow: 0 4px 16px rgba(240, 158, 122, 0.4);
  2215. }
  2217. /* Button loading state */
  2218. .pl-btn-loading {
  2219.     position: relative;
  2220.     color: transparent !important;
  2221. }
  2223. .pl-btn-loading::after {
  2224.     content: '';
  2225.     position: absolute;
  2226.     width: 20px;
  2227.     height: 20px;
  2228.     top: 50%;
  2229.     left: 50%;
  2230.     margin-left: -10px;
  2231.     margin-top: -10px;
  2232.     border: 2px solid rgba(255,255,255,0.3);
  2233.     border-top-color: #fff;
  2234.     border-radius: 50%;
  2235.     animation: plSpin 0.6s linear infinite;
  2236. }
  2238. /* Forgot link */
  2239. .pl-forgot {
  2240.     display: inline-block;
  2241.     font-size: 13px;
  2242.     color: var(--pl-orange);
  2243.     margin-top: 12px;
  2244.     text-decoration: none;
  2245.     transition: color 0.2s ease;
  2246. }
  2248. .pl-forgot:hover {
  2249.     color: var(--pl-orange-dark);
  2250.     text-decoration: underline;
  2251. }
  2253. /* Divider */
  2254. .pl-divider {
  2255.     display: flex;
  2256.     align-items: center;
  2257.     margin: 24px 0;
  2258.     gap: 14px;
  2259. }
  2261. .pl-divider-line {
  2262.     flex: 1;
  2263.     height: 1px;
  2264.     background: var(--pl-border);
  2265. }
  2267. .pl-divider-text {
  2268.     font-size: 12px;
  2269.     font-weight: 500;
  2270.     color: var(--pl-text-muted);
  2271.     text-transform: uppercase;
  2272.     letter-spacing: 0.04em;
  2273. }
  2275. /* Social buttons */
  2276. .pl-socials {
  2277.     display: flex;
  2278.     flex-direction: column;
  2279.     gap: 10px;
  2280. }
  2282. .pl-social-btn {
  2283.     width: 100%;
  2284.     padding: 11px 16px;
  2285.     font-size: 14px;
  2286.     font-weight: 500;
  2287.     font-family: inherit;
  2288.     border-radius: 8px;
  2289.     cursor: pointer;
  2290.     transition: all 0.2s ease, transform 0.15s ease;
  2291.     display: flex;
  2292.     align-items: center;
  2293.     justify-content: center;
  2294.     gap: 10px;
  2295.     text-decoration: none;
  2296. }
  2298. .pl-social-btn img {
  2299.     width: 18px;
  2300.     height: 18px;
  2301. }
  2303. .pl-social-google {
  2304.     background: var(--pl-bg);
  2305.     color: var(--pl-text);
  2306.     border: 1px solid var(--pl-border);
  2307. }
  2309. .pl-social-google:hover {
  2310.     background: var(--pl-bg-hero);
  2311.     border-color: #D0D6E0;
  2312. }
  2314. .pl-social-facebook {
  2315.     background: #1877F2;
  2316.     color: #FFF;
  2317.     border: 1px solid #1877F2;
  2318. }
  2320. .pl-social-facebook:hover {
  2321.     background: #166FE5;
  2322.     transform: translateY(-1px);
  2323.     box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
  2324. }
  2326. .pl-social-google:hover {
  2327.     transform: translateY(-1px);
  2328.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  2329. }
  2331. /* Notification prefs (compact) */
  2332. .pl-notif-box {
  2333.     background: var(--pl-bg-hero);
  2334.     border-radius: 8px;
  2335.     padding: 12px 14px;
  2336.     margin-bottom: 18px;
  2337. }
  2339. .pl-notif-label {
  2340.     font-size: 12px;
  2341.     font-weight: 500;
  2342.     color: var(--pl-text-secondary);
  2343.     margin-bottom: 8px;
  2344. }
  2346. .pl-notif-opts {
  2347.     display: flex;
  2348.     gap: 20px;
  2349. }
  2351. .pl-checkbox {
  2352.     display: flex;
  2353.     align-items: center;
  2354.     gap: 6px;
  2355.     font-size: 13px;
  2356.     color: var(--pl-text);
  2357.     cursor: pointer;
  2358. }
  2360. .pl-checkbox input {
  2361.     width: 16px;
  2362.     height: 16px;
  2363.     accent-color: var(--pl-teal);
  2364.     cursor: pointer;
  2365. }
  2367. /* Form note */
  2368. .pl-note {
  2369.     font-size: 12px;
  2370.     color: var(--pl-text-muted);
  2371.     text-align: center;
  2372.     margin-top: 14px;
  2373.     line-height: 1.5;
  2374. }
  2377. .pl-input-code {
  2378.     font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  2379.     font-size: 18px;
  2380.     font-weight: 600;
  2381.     letter-spacing: 2px;
  2382.     text-transform: uppercase;
  2383.     text-align: center;
  2384.     padding: 14px 16px;
  2385.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.04), rgba(240, 158, 122, 0.04));
  2386.     border: 2px solid var(--pl-border);
  2387. }
  2389. .pl-input-code:focus {
  2390.     border-color: var(--pl-teal);
  2391.     background: var(--pl-bg);
  2392. }
  2394. .pl-input-code::placeholder {
  2395.     font-weight: 400;
  2396.     letter-spacing: 1px;
  2397.     color: var(--pl-text-muted);
  2398. }
  2400. .pl-optional {
  2401.     font-weight: 400;
  2402.     color: var(--pl-text-muted);
  2403. }
  2405. .pl-required {
  2406.     color: #EF4444;
  2407.     margin-left: 2px;
  2408. }
  2410. /* Error alert */
  2411. .pl-error {
  2412.     background: #FEF2F2;
  2413.     border: 1px solid #FECACA;
  2414.     border-radius: 8px;
  2415.     padding: 12px 14px;
  2416.     margin-bottom: 18px;
  2417.     font-size: 13px;
  2418.     color: #991B1B;
  2419.     display: flex;
  2420.     align-items: center;
  2421.     gap: 8px;
  2422. }
  2424. .pl-error svg {
  2425.     flex-shrink: 0;
  2426.     color: #EF4444;
  2427. }
  2429. /* ========================================
  2430.    FOOTER TRUST BAR
  2431.    ======================================== */
  2432. .pl-footer-trust {
  2433.     background: var(--pl-bg-hero);
  2434.     border-top: 1px solid var(--pl-border);
  2435.     padding: 16px 24px;
  2436.     display: flex;
  2437.     justify-content: center;
  2438.     gap: 32px;
  2439. }
  2441. .pl-footer-item {
  2442.     display: flex;
  2443.     align-items: center;
  2444.     gap: 8px;
  2445.     font-size: 12px;
  2446.     color: var(--pl-text-muted);
  2447. }
  2449. .pl-footer-item svg {
  2450.     width: 16px;
  2451.     height: 16px;
  2452.     color: var(--pl-teal);
  2453. }
  2455. /* ========================================
  2456.    LOADER
  2457.    ======================================== */
  2458. .pl-loader {
  2459.     position: fixed;
  2460.     inset: 0;
  2461.     background: rgba(255,255,255,0.95);
  2462.     z-index: 9999;
  2463.     display: none;
  2464.     align-items: center;
  2465.     justify-content: center;
  2466. }
  2468. .pl-loader.active {
  2469.     display: flex;
  2470. }
  2472. .pl-loader-inner {
  2473.     text-align: center;
  2474. }
  2476. .pl-spinner {
  2477.     width: 40px;
  2478.     height: 40px;
  2479.     border: 3px solid var(--pl-border);
  2480.     border-top-color: var(--pl-teal);
  2481.     border-radius: 50%;
  2482.     animation: plSpin 0.7s linear infinite;
  2483. }
  2485. @keyframes plSpin {
  2486.     to { transform: rotate(360deg); }
  2487. }
  2489. .pl-loader-text {
  2490.     margin-top: 16px;
  2491.     font-size: 15px;
  2492.     font-weight: 600;
  2493.     color: var(--pl-text);
  2494. }
  2496. .pl-loader-sub {
  2497.     margin-top: 6px;
  2498.     font-size: 13px;
  2499.     color: var(--pl-text-secondary);
  2500. }
  2502. /* ========================================
  2503.    RESPONSIVE - MOBILE
  2504.    ======================================== */
  2505. @media (max-width: 900px) {
  2506.     .pl-main {
  2507.         flex-direction: column;
  2508.         min-height: auto;
  2509.     }
  2511.     .pl-hero {
  2512.         width: 100%;
  2513.         padding: 32px 24px;
  2514.     }
  2516.     .pl-hero-content {
  2517.         max-width: 100%;
  2518.         animation: none;
  2519.     }
  2521.     .pl-hero h1 {
  2522.         font-size: 26px;
  2523.     }
  2525.     .pl-hero-subtitle {
  2526.         font-size: 15px;
  2527.         margin-bottom: 24px;
  2528.     }
  2530.     .pl-features {
  2531.         gap: 14px;
  2532.     }
  2534.     .pl-feature {
  2535.         animation: none;
  2536.         opacity: 1;
  2537.     }
  2539.     .pl-feature-icon {
  2540.         width: 38px;
  2541.         height: 38px;
  2542.     }
  2544.     .pl-feature-icon svg {
  2545.         width: 18px;
  2546.         height: 18px;
  2547.     }
  2549.     .pl-feature-title {
  2550.         font-size: 13px;
  2551.     }
  2553.     .pl-feature-desc {
  2554.         font-size: 12px;
  2555.     }
  2557.     .pl-hero-illustration {
  2558.         display: none;
  2559.     }
  2561.     .pl-form-section {
  2562.         width: 100%;
  2563.         padding: 24px 16px 40px;
  2564.     }
  2566.     .pl-card {
  2567.         max-width: 100%;
  2568.         box-shadow: none;
  2569.         border: none;
  2570.         animation: none;
  2571.     }
  2573.     .pl-panel {
  2574.         padding: 24px 20px;
  2575.     }
  2577.     .pl-row {
  2578.         flex-direction: column;
  2579.         gap: 0;
  2580.     }
  2582.     .pl-footer-trust {
  2583.         flex-wrap: wrap;
  2584.         gap: 16px 24px;
  2585.         justify-content: center;
  2586.     }
  2587. }
  2589. @media (max-width: 480px) {
  2590.     .pl-hero {
  2591.         padding: 24px 20px;
  2592.     }
  2594.     .pl-hero h1 {
  2595.         font-size: 22px;
  2596.     }
  2598.     .pl-tab {
  2599.         padding: 14px 12px;
  2600.         font-size: 13px;
  2601.     }
  2602. }
  2603. </style>
  2604. {% endblock %}
  2606. {% block Header %}
  2607. {{ parent() }}
  2608. {% endblock %}
  2610. {% block Content %}
  2611. <div class=\"pl-page\">
  2612.     <!-- Loader -->
  2613.     <div class=\"pl-loader\" id=\"plLoader\">
  2614.         <div class=\"pl-loader-inner\">
  2615.             <div class=\"pl-spinner\"></div>
  2616.             <p class=\"pl-loader-text\">Création de votre compte...</p>
  2617.             <p class=\"pl-loader-sub\">Préparation de votre espace parent</p>
  2618.         </div>
  2619.     </div>
  2621.     <!-- Main two-column layout -->
  2622.     <main class=\"pl-main\">
  2623.         <!-- LEFT: Hero -->
  2624.         <section class=\"pl-hero\">
  2625.             <div class=\"pl-hero-content\">
  2626.                 <h1>Suivez le séjour de votre enfant en toute sérénité.</h1>
  2627.                 <p class=\"pl-hero-subtitle\">Photos, vidéos et messages vocaux, dans un espace privé réservé aux familles.</p>
  2629.                 <ul class=\"pl-features\">
  2630.                     <li class=\"pl-feature\">
  2631.                         <span class=\"pl-feature-icon orange\">
  2632.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2633.                                 <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>
  2634.                                 <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  2635.                                 <polyline points=\"21 15 16 10 5 21\"/>
  2636.                             </svg>
  2637.                         </span>
  2638.                         <div class=\"pl-feature-text\">
  2639.                             <p class=\"pl-feature-title\">Photos & vidéos en direct</p>
  2640.                             <p class=\"pl-feature-desc\">Visualisez les moments du séjour en toute confidentialité</p>
  2641.                         </div>
  2642.                     </li>
  2643.                     <li class=\"pl-feature\">
  2644.                         <span class=\"pl-feature-icon teal\">
  2645.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2646.                                 <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72\"/>
  2647.                             </svg>
  2648.                         </span>
  2649.                         <div class=\"pl-feature-text\">
  2650.                             <p class=\"pl-feature-title\">Messages vocaux</p>
  2651.                             <p class=\"pl-feature-desc\">Accédez à l’ensemble des messages vocaux enregistrés, en illimité.</p>
  2652.                         </div>
  2653.                     </li>
  2654.                     <li class=\"pl-feature\">
  2655.                         <span class=\"pl-feature-icon coral\">
  2656.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2657.                                 <path d=\"M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6\"/>
  2658.                                 <rect x=\"6\" y=\"5\" width=\"12\" height=\"7\"/>
  2659.                                 <path d=\"M12 3v5\"/>
  2660.                             </svg>
  2661.                         </span>
  2662.                         <div class=\"pl-feature-text\">
  2663.                             <p class=\"pl-feature-title\">Souvenirs personnalisés</p>
  2664.                             <p class=\"pl-feature-desc\">Créez albums, livres et cadeaux uniques du séjour</p>
  2665.                         </div>
  2666.                     </li>
  2667.                     <li class=\"pl-feature\">
  2668.                         <span class=\"pl-feature-icon brown\">
  2669.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2670.                                 <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>
  2671.                                 <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>
  2672.                             </svg>
  2673.                         </span>
  2674.                         <div class=\"pl-feature-text\">
  2675.                             <p class=\"pl-feature-title\">Notifications instantanées</p>
  2676.                             <p class=\"pl-feature-desc\">Restez informé à chaque nouvelle publication</p>
  2677.                         </div>
  2678.                     </li>
  2679.                 </ul>
  2681.                 <!-- Decorative illustration -->
  2682.                 <div class=\"pl-hero-illustration\">
  2683.                     <svg viewBox=\"0 0 400 280\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">
  2684.                         <!-- Background shapes -->
  2685.                         <ellipse cx=\"200\" cy=\"250\" rx=\"180\" ry=\"20\" fill=\"#E5E9F0\" opacity=\"0.5\"/>
  2686.                         
  2687.                         <!-- Phone mockup -->
  2688.                         <rect x=\"140\" y=\"30\" width=\"120\" height=\"200\" rx=\"16\" fill=\"#1A1A2E\"/>
  2689.                         <rect x=\"146\" y=\"40\" width=\"108\" height=\"180\" rx=\"12\" fill=\"#fff\"/>
  2690.                         
  2691.                         <!-- Phone content - photos grid -->
  2692.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"#F09E7A\" opacity=\"0.3\"/>
  2693.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad1)\"/>
  2694.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"#41A2AA\" opacity=\"0.3\"/>
  2695.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad2)\"/>
  2696.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"#F56040\" opacity=\"0.2\"/>
  2697.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"url(#imgGrad3)\"/>
  2698.                         
  2699.                         <!-- Photo icons -->
  2700.                         <circle cx=\"176\" cy=\"79\" r=\"12\" fill=\"#F09E7A\"/>
  2701.                         <path d=\"M170 82l4-5 3 3 5-6 6 8H170z\" fill=\"#fff\"/>
  2702.                         <circle cx=\"226\" cy=\"79\" r=\"10\" fill=\"#41A2AA\"/>
  2703.                         <polygon points=\"221,82 226,74 231,82\" fill=\"#fff\"/>
  2704.                         
  2705.                         <!-- Play button on video -->
  2706.                         <circle cx=\"200\" cy=\"137\" r=\"14\" fill=\"rgba(255,255,255,0.9)\"/>
  2707.                         <polygon points=\"196,131 196,143 208,137\" fill=\"#F56040\"/>
  2708.                         
  2709.                         <!-- Notification bar -->
  2710.                         <rect x=\"152\" y=\"175\" width=\"96\" height=\"38\" rx=\"8\" fill=\"#F8FAFB\"/>
  2711.                         <circle cx=\"168\" cy=\"194\" r=\"10\" fill=\"#41A2AA\"/>
  2712.                         <path d=\"M165 194l2 2 4-4\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>
  2713.                         <rect x=\"184\" y=\"188\" width=\"50\" height=\"6\" rx=\"3\" fill=\"#E5E9F0\"/>
  2714.                         <rect x=\"184\" y=\"198\" width=\"35\" height=\"4\" rx=\"2\" fill=\"#E5E9F0\"/>
  2715.                         
  2716.                         <!-- Phone notch -->
  2717.                         <rect x=\"175\" y=\"34\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#1A1A2E\"/>
  2718.                         
  2719.                         <!-- Decorative elements around -->
  2720.                         <circle cx=\"80\" cy=\"80\" r=\"8\" fill=\"#F09E7A\" opacity=\"0.6\"/>
  2721.                         <circle cx=\"320\" cy=\"100\" r=\"6\" fill=\"#41A2AA\" opacity=\"0.5\"/>
  2722.                         <circle cx=\"340\" cy=\"180\" r=\"10\" fill=\"#F56040\" opacity=\"0.4\"/>
  2723.                         <circle cx=\"60\" cy=\"180\" r=\"5\" fill=\"#41A2AA\" opacity=\"0.4\"/>
  2724.                         
  2725.                         <!-- Hearts/love -->
  2726.                         <path d=\"M300 60c-2-4-8-4-10 0-2-4-8-4-10 0 0 6 10 12 10 12s10-6 10-12z\" fill=\"#F09E7A\" opacity=\"0.7\"/>
  2727.                         
  2728.                         <!-- Stars -->
  2729.                         <path d=\"M70 120l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1 2-4z\" fill=\"#FFD93D\" opacity=\"0.8\"/>
  2730.                         <path d=\"M350 140l1.5 3 3 .5-2 2 .5 3-3-1.5-3 1.5.5-3-2-2 3-.5 1.5-3z\" fill=\"#FFD93D\" opacity=\"0.6\"/>
  2731.                         
  2732.                         <!-- Gradients -->
  2733.                         <defs>
  2734.                             <linearGradient id=\"imgGrad1\" x1=\"152\" y1=\"55\" x2=\"200\" y2=\"103\">
  2735.                                 <stop offset=\"0%\" stop-color=\"#F09E7A\" stop-opacity=\"0.4\"/>
  2736.                                 <stop offset=\"100%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  2737.                             </linearGradient>
  2738.                             <linearGradient id=\"imgGrad2\" x1=\"204\" y1=\"55\" x2=\"248\" y2=\"103\">
  2739.                                 <stop offset=\"0%\" stop-color=\"#41A2AA\" stop-opacity=\"0.4\"/>
  2740.                                 <stop offset=\"100%\" stop-color=\"#359BA3\" stop-opacity=\"0.3\"/>
  2741.                             </linearGradient>
  2742.                             <linearGradient id=\"imgGrad3\" x1=\"152\" y1=\"107\" x2=\"248\" y2=\"167\">
  2743.                                 <stop offset=\"0%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  2744.                                 <stop offset=\"100%\" stop-color=\"#F09E7A\" stop-opacity=\"0.2\"/>
  2745.                             </linearGradient>
  2746.                         </defs>
  2747.                     </svg>
  2748.                     
  2749.                     <!-- Floating notification badges -->
  2750.                     <div class=\"pl-floating-badges\">
  2751.                         <div class=\"pl-badge pl-badge-1\">
  2752.                             <span class=\"pl-badge-icon orange\">
  2753.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2754.                                     <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>
  2755.                                     <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  2756.                                     <polyline points=\"21 15 16 10 5 21\"/>
  2757.                                 </svg>
  2758.                             </span>
  2759.                             <span>+12 photos</span>
  2760.                         </div>
  2761.                         <div class=\"pl-badge pl-badge-2\">
  2762.                             <span class=\"pl-badge-icon teal\">
  2763.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2764.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>
  2765.                                     <polyline points=\"22 4 12 14.01 9 11.01\"/>
  2766.                                 </svg>
  2767.                             </span>
  2768.                             <span>Bien arrivés !</span>
  2769.                         </div>
  2770.                     </div>
  2771.                 </div>
  2772.             </div>
  2773.         </section>
  2775.         <!-- RIGHT: Form -->
  2776.         <section class=\"pl-form-section\">
  2777.             <div class=\"pl-card\">
  2778.                 <!-- Tabs -->
  2779.                 <div class=\"pl-tabs\" role=\"tablist\">
  2780.                     <button class=\"pl-tab active\" role=\"tab\" data-tab=\"login\" aria-selected=\"true\">Se connecter</button>
  2781.                     <button class=\"pl-tab\" role=\"tab\" data-tab=\"register\" aria-selected=\"false\">Créer un compte</button>
  2782.                 </div>
  2784.                 <!-- LOGIN PANEL -->
  2785.                 <div class=\"pl-panel active\" id=\"panel-login\" role=\"tabpanel\">
  2786.                     {% if error %}
  2787.                     <div class=\"pl-error\">
  2788.                         <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2789.                             <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  2790.                             <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>
  2791.                             <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>
  2792.                         </svg>
  2793.                         Identifiant ou mot de passe incorrect.
  2794.                     </div>
  2795.                     {% endif %}
  2797.                     <form method=\"post\" action=\"{{ path('app_back_Parent') }}\" id=\"loginForm\" autocomplete=\"off\">
  2798.                         <!-- Code Séjour - Required for direct access -->
  2799.                         <div class=\"pl-form-group\">
  2800.                             <label class=\"pl-label\">
  2801.                                 Code séjour
  2802.                                 <span class=\"pl-required\">*</span>
  2803.                             </label>
  2804.                             <input type=\"text\" 
  2805.                                 class=\"pl-input pl-input-code\" 
  2806.                                 name=\"code_sejour\" 
  2807.                                 id=\"loginCode\" 
  2808.                                 placeholder=\"   XX000000\"
  2809.                                 maxlength=\"8\"
  2810.                                 autocomplete=\"one-time-code\"
  2811.                                 data-lpignore=\"true\"
  2812.                                 data-form-type=\"other\"
  2813.                                 required>
  2814.                             <p class=\"pl-hint\">
  2815.                                 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2816.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  2817.                                     <path d=\"M12 16v-4\"/>
  2818.                                     <path d=\"M12 8h.01\"/>
  2819.                                 </svg>
  2820.                                 Code reçu par l'école ou l'organisateur du séjour
  2821.                             </p>
  2822.                         </div>
  2824.                         <div class=\"pl-form-group\">
  2825.                             <label class=\"pl-label\">Adresse e-mail</label>
  2826.                             <input type=\"email\" class=\"pl-input\" name=\"email\" id=\"loginEmail\" value=\"{{ last_username }}\" placeholder=\"votre@email.com\" autocomplete=\"username\" required>
  2827.                         </div>
  2829.                         <div class=\"pl-form-group\">
  2830.                             <label class=\"pl-label\">Mot de passe</label>
  2831.                             <div class=\"pl-password-wrap\">
  2832.                                 <input type=\"password\" class=\"pl-input\" name=\"password\" id=\"loginPwd\" placeholder=\"••••••••\" autocomplete=\"current-password\" required>
  2833.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"loginPwd\" aria-label=\"Afficher\">
  2834.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2835.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  2836.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  2837.                                     </svg>
  2838.                                 </button>
  2839.                             </div>
  2840.                         </div>
  2842.                         <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  2844.                         <button type=\"submit\" class=\"pl-btn\">Se connecter</button>
  2845.                         <a href=\"{{ path('forgotPassparent') }}\" class=\"pl-forgot\">Vous avez oublié votre mot de passe ?</a>
  2846.                     </form>
  2848.                     <div class=\"pl-divider\">
  2849.                         <span class=\"pl-divider-line\"></span>
  2850.                         <span class=\"pl-divider-text\">ou</span>
  2851.                         <span class=\"pl-divider-line\"></span>
  2852.                     </div>
  2854.                     <div class=\"pl-socials\">
  2855.                         <a href=\"{{ path('connect_google_start') }}\" class=\"pl-social-btn pl-social-google\">
  2856.                             <img src=\"{{ asset('/images/icons-google.png') }}\" alt=\"\">
  2857.                             Continuer avec Google
  2858.                         </a>
  2859.                         <a href=\"{{ path('connect_facebook_start') }}\" class=\"pl-social-btn pl-social-facebook\">
  2860.                             <img src=\"{{ asset('/images/icons-facebook.png') }}\" alt=\"\">
  2861.                             Continuer avec Facebook
  2862.                         </a>
  2863.                     </div>
  2864.                 </div>
  2866.                 <!-- REGISTER PANEL -->
  2867.                 <div class=\"pl-panel\" id=\"panel-register\" role=\"tabpanel\">
  2868.                     <form id=\"registerForm\" onsubmit=\"return false;\" autocomplete=\"off\">
  2869.                      
  2870.                         <div class=\"pl-row\">
  2871.                             <div class=\"pl-form-group\">
  2872.                                 <label class=\"pl-label\">Nom</label>
  2873.                                 <input type=\"text\" class=\"pl-input\" id=\"regNom\" name=\"family-name\" placeholder=\"Votre nom\" autocomplete=\"family-name\" required>
  2874.                             </div>
  2875.                             <div class=\"pl-form-group\">
  2876.                                 <label class=\"pl-label\">Prénom</label>
  2877.                                 <input type=\"text\" class=\"pl-input\" id=\"regPrenom\" name=\"given-name\" placeholder=\"Votre prénom\" autocomplete=\"given-name\" required>
  2878.                             </div>
  2879.                         </div>
  2881.                         <div class=\"pl-form-group\">
  2882.                             <label class=\"pl-label\">Adresse e-mail</label>
  2883.                             <input type=\"email\" class=\"pl-input\" id=\"regEmail\" name=\"email\" placeholder=\"votre@email.com\" autocomplete=\"email\" required>
  2884.                         </div>
  2886.                         <div class=\"pl-form-group\">
  2887.                             <label class=\"pl-label\">Mot de passe</label>
  2888.                             <div class=\"pl-password-wrap\">
  2889.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwd\" name=\"new-password\" placeholder=\"Minimum 6 caractères\" autocomplete=\"new-password\" required>
  2890.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwd\" aria-label=\"Afficher\">
  2891.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2892.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  2893.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  2894.                                     </svg>
  2895.                                 </button>
  2896.                             </div>
  2897.                         </div>
  2899.                         <div class=\"pl-form-group\">
  2900.                             <label class=\"pl-label\">Confirmer le mot de passe</label>
  2901.                             <div class=\"pl-password-wrap\">
  2902.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwdConfirm\" name=\"confirm-password\" placeholder=\"Retapez votre mot de passe\" autocomplete=\"new-password\" required>
  2903.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwdConfirm\" aria-label=\"Afficher\">
  2904.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2905.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  2906.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  2907.                                     </svg>
  2908.                                 </button>
  2909.                             </div>
  2910.                         </div>
  2912.                         <div class=\"pl-form-group\">
  2913.                             <label class=\"pl-label\">Téléphone portable</label>
  2914.                             <input type=\"tel\" class=\"pl-input\" id=\"regPhone\" placeholder=\"06 12 34 56 78\" required>
  2915.                         </div>
  2917.                         <div class=\"pl-notif-box\">
  2918.                             <p class=\"pl-notif-label\">Recevoir les notifications :</p>
  2919.                             <div class=\"pl-notif-opts\">
  2920.                                 <label class=\"pl-checkbox\">
  2921.                                     <input type=\"checkbox\" id=\"notifSms\">
  2922.                                     SMS
  2923.                                 </label>
  2924.                                 <label class=\"pl-checkbox\">
  2925.                                     <input type=\"checkbox\" id=\"notifEmail\" checked>
  2926.                                     E-mail
  2927.                                 </label>
  2928.                             </div>
  2929.                         </div>
  2931.                         <button type=\"button\" class=\"pl-btn pl-btn-secondary\" onclick=\"handleRegister()\">Créer mon compte Parent</button>
  2932.                         <p class=\"pl-note\">Vous pourrez modifier vos informations et vos préférences de notifications à tout moment.</p>
  2933.                     </form>
  2935.                     <div class=\"pl-divider\">
  2936.                         <span class=\"pl-divider-line\"></span>
  2937.                         <span class=\"pl-divider-text\">ou</span>
  2938.                         <span class=\"pl-divider-line\"></span>
  2939.                     </div>
  2941.                     <div class=\"pl-socials\">
  2942.                         <a href=\"{{ path('connect_google_start') }}\" class=\"pl-social-btn pl-social-google\">
  2943.                             <img src=\"{{ asset('/images/icons-google.png') }}\" alt=\"\">
  2944.                             Continuer avec Google
  2945.                         </a>
  2946.                         <a href=\"{{ path('connect_facebook_start') }}\" class=\"pl-social-btn pl-social-facebook\">
  2947.                             <img src=\"{{ asset('/images/icons-facebook.png') }}\" alt=\"\">
  2948.                             Continuer avec Facebook
  2949.                         </a>
  2950.                     </div>
  2951.                 </div>
  2952.             </div>
  2953.         </section>
  2954.     </main>
  2956.     <!-- Footer trust bar -->
  2957.     <footer class=\"pl-footer-trust\">
  2958.         <span class=\"pl-footer-item\">
  2959.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2960.                 <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>
  2961.                 <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>
  2962.             </svg>
  2963.             Connexion sécurisée
  2964.         </span>
  2965.         <span class=\"pl-footer-item\">
  2966.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2967.                 <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>
  2968.             </svg>
  2969.             Données protégées
  2970.         </span>
  2971.         <span class=\"pl-footer-item\">
  2972.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  2973.                 <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  2974.                 <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>
  2975.                 <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/>
  2976.             </svg>
  2977.             Hébergé en France
  2978.         </span>
  2979.     </footer>
  2980. </div>
  2981. {% endblock %}
  2983. {% block Footer %}
  2984. {{ parent() }}
  2985. {% endblock %}
  2987. {% block javascript %}
  2988. {{ parent() }}
  2989. <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  2990. <script>
  2991. document.addEventListener('DOMContentLoaded', function() {
  2992.     // Tab switching
  2993.     const tabs = document.querySelectorAll('.pl-tab');
  2994.     const panels = document.querySelectorAll('.pl-panel');
  2996.     tabs.forEach(tab => {
  2997.         tab.addEventListener('click', () => {
  2998.             const target = tab.dataset.tab;
  3000.             tabs.forEach(t => {
  3001.                 t.classList.remove('active');
  3002.                 t.setAttribute('aria-selected', 'false');
  3003.             });
  3004.             tab.classList.add('active');
  3005.             tab.setAttribute('aria-selected', 'true');
  3007.             panels.forEach(p => p.classList.remove('active'));
  3008.             document.getElementById('panel-' + target).classList.add('active');
  3009.         });
  3010.     });
  3012.     // Clear autofilled code séjour field on page load (browser autofill fix)
  3013.     const codeInput = document.getElementById('loginCode');
  3014.     if (codeInput) {
  3015.         // Clear any incorrect autofill value
  3016.         setTimeout(() => {
  3017.             const currentValue = codeInput.value;
  3018.             // If the value doesn't match code séjour format (2 letters + 6 digits), clear it
  3019.             if (currentValue && !/^[A-Z]{2}[0-9]{6}\$/.test(currentValue.toUpperCase())) {
  3020.                 codeInput.value = '';
  3021.             }
  3022.         }, 100);
  3023.     }
  3025.     // Password toggle
  3026.     document.querySelectorAll('.pl-eye-btn').forEach(btn => {
  3027.         btn.addEventListener('click', () => {
  3028.             const input = document.getElementById(btn.dataset.target);
  3029.             const isPassword = input.type === 'password';
  3030.             input.type = isPassword ? 'text' : 'password';
  3031.             btn.querySelector('svg').style.opacity = isPassword ? '0.5' : '1';
  3032.         });
  3033.     });
  3035.     // Auto-format code séjour (uppercase) and validation
  3036.     if (codeInput) {
  3037.         codeInput.addEventListener('input', (e) => {
  3038.             let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
  3039.             e.target.value = value;
  3040.             
  3041.             // Visual feedback when complete
  3042.             if (value.length === 8) {
  3043.                 e.target.style.borderColor = '#41A2AA';
  3044.                 e.target.style.background = 'rgba(65, 162, 170, 0.06)';
  3045.             } else {
  3046.                 e.target.style.borderColor = '';
  3047.                 e.target.style.background = '';
  3048.             }
  3049.         });
  3051.         // Validate on form submit
  3052.         document.getElementById('loginForm').addEventListener('submit', function(e) {
  3053.             const codePattern = /^[A-Z]{2}[0-9]{6}\$/;
  3054.             if (!codePattern.test(codeInput.value)) {
  3055.                 e.preventDefault();
  3056.                 codeInput.classList.add('is-invalid');
  3057.                 Swal.fire({
  3058.                     icon: 'error',
  3059.                     title: 'Code séjour invalide',
  3060.                     html: '<p style=\"margin-bottom:8px;\">Le code doit contenir :</p><p style=\"color:#5A6178;font-size:14px;\"><strong>2 lettres</strong> + <strong>6 chiffres</strong><br>Exemple : <span style=\"color:#41A2AA;font-weight:600;\">PF270076</span></p>',
  3061.                     confirmButtonColor: '#41a2aa'
  3062.                 });
  3063.             } else {
  3064.                 // Show loading state on button
  3065.                 const btn = this.querySelector('button[type=\"submit\"]');
  3066.                 btn.classList.add('pl-btn-loading');
  3067.                 btn.disabled = true;
  3068.             }
  3069.         });
  3070.     }
  3072.     // Add visual feedback when email is valid
  3073.     const emailInputs = document.querySelectorAll('input[type=\"email\"]');
  3074.     emailInputs.forEach(input => {
  3075.         input.addEventListener('blur', function() {
  3076.             const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  3077.             if (this.value && emailRegex.test(this.value)) {
  3078.                 this.classList.add('is-valid');
  3079.                 this.classList.remove('is-invalid');
  3080.             } else if (this.value) {
  3081.                 this.classList.add('is-invalid');
  3082.                 this.classList.remove('is-valid');
  3083.             }
  3084.         });
  3085.         input.addEventListener('input', function() {
  3086.             this.classList.remove('is-valid', 'is-invalid');
  3087.         });
  3088.     });
  3090.     // Login error
  3091.     {% if error %}
  3092.     Swal.fire({
  3093.         icon: 'error',
  3094.         title: 'Erreur de connexion',
  3095.         text: 'Identifiant ou mot de passe incorrect.',
  3096.         confirmButtonColor: '#41a2aa'
  3097.     });
  3098.     {% endif %}
  3099. });
  3101. // Registration
  3102. function handleRegister() {
  3103.     const loader = document.getElementById('plLoader');
  3104.     const fields = {
  3105.         nom: document.getElementById('regNom'),
  3106.         prenom: document.getElementById('regPrenom'),
  3107.         email: document.getElementById('regEmail'),
  3108.         pwd: document.getElementById('regPwd'),
  3109.         pwdConfirm: document.getElementById('regPwdConfirm'),
  3110.         phone: document.getElementById('regPhone')
  3111.     };
  3113.     // Reset
  3114.     Object.values(fields).forEach(f => f.classList.remove('is-invalid'));
  3116.     // Validate
  3117.     let valid = true;
  3119.     if (!fields.nom.value.trim()) { fields.nom.classList.add('is-invalid'); valid = false; }
  3120.     if (!fields.prenom.value.trim()) { fields.prenom.classList.add('is-invalid'); valid = false; }
  3122.     const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  3123.     if (!emailRegex.test(fields.email.value)) { fields.email.classList.add('is-invalid'); valid = false; }
  3125.     if (fields.pwd.value.length < 6) {
  3126.         fields.pwd.classList.add('is-invalid');
  3127.         Swal.fire({ icon: 'warning', title: 'Mot de passe trop court', text: 'Minimum 6 caractères.', confirmButtonColor: '#41a2aa' });
  3128.         return;
  3129.     }
  3131.     if (fields.pwd.value !== fields.pwdConfirm.value) {
  3132.         fields.pwdConfirm.classList.add('is-invalid');
  3133.         Swal.fire({ icon: 'warning', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  3134.         return;
  3135.     }
  3137.     if (!fields.phone.value.trim()) { fields.phone.classList.add('is-invalid'); valid = false; }
  3139.     if (!valid) return;
  3141.     loader.classList.add('active');
  3143.     const data = {
  3144.         nomparent: fields.nom.value.trim(),
  3145.         prenomparent: fields.prenom.value.trim(),
  3146.         mailprent: fields.email.value.trim(),
  3147.         numtel: fields.phone.value.trim(),
  3148.         passwordparent: fields.pwd.value,
  3149.         confirmpassword: fields.pwdConfirm.value,
  3150.         sms: document.getElementById('notifSms').checked ? 1 : 0,
  3151.         mailnotif: document.getElementById('notifEmail').checked ? 1 : 0
  3152.     };
  3154.     fetch(\"{{ path('parent_register') }}\", {
  3155.         method: 'POST',
  3156.         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  3157.         body: new URLSearchParams(data)
  3158.     })
  3159.     .then(r => r.text())
  3160.     .then(result => {
  3161.         loader.classList.remove('active');
  3163.         if (result === 'eror') {
  3164.             fields.email.classList.add('is-invalid');
  3165.             Swal.fire({
  3166.                 icon: 'error',
  3167.                 title: 'Email déjà utilisé',
  3168.                 text: 'Cette adresse est déjà associée à un compte.',
  3169.                 footer: '<a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#F09E7A;\">Mot de passe oublié ?</a>',
  3170.                 confirmButtonColor: '#41a2aa'
  3171.             });
  3172.         } else if (result === 'erorpasswordconfirm') {
  3173.             fields.pwdConfirm.classList.add('is-invalid');
  3174.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  3175.         } else {
  3176.             Swal.fire({
  3177.                 icon: 'success',
  3178.                 title: '🎉 Bienvenue !',
  3179.                 html: '<p>Votre compte parent est presque prêt.</p><p style=\"color:#5A6178;font-size:14px;\">📩 Un e-mail vous a été envoyé pour activer votre compte.</p>',
  3180.                 confirmButtonText: 'Compris',
  3181.                 confirmButtonColor: '#41a2aa'
  3182.             }).then(() => location.reload());
  3183.         }
  3184.     })
  3185.     .catch(() => {
  3186.         loader.classList.remove('active');
  3187.         Swal.fire({ icon: 'error', title: 'Erreur', text: 'Un problème est survenu. Veuillez réessayer.', confirmButtonColor: '#F09E7A' });
  3188.     });
  3189. }
  3190. </script>
  3191. {% endblock %}
  3192. ", "Parent/LoginParent.html.twig", "/var/www/5sur5sejour/templates/Parent/LoginParent.html.twig");
  3193.     }
  3194. }