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

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. }
  743. /* CGU / RGPD consent block */
  744. .pl-consent-box {
  745.     background: var(--pl-bg-hero);
  746.     border: 1px solid var(--pl-border);
  747.     border-radius: 10px;
  748.     padding: 14px 16px;
  749.     margin-bottom: 18px;
  750.     transition: border-color 0.2s ease;
  751. }
  752. .pl-consent-box.is-invalid {
  753.     border-color: #EF4444;
  754.     background: #FEF2F2;
  755. }
  756. .pl-consent-box .pl-checkbox {
  757.     font-size: 13px;
  758.     line-height: 1.5;
  759.     align-items: flex-start;
  760. }
  761. .pl-consent-box .pl-checkbox input {
  762.     margin-top: 2px;
  763.     flex-shrink: 0;
  764. }
  765. .pl-consent-link {
  766.     color: var(--pl-teal);
  767.     text-decoration: underline;
  768.     cursor: pointer;
  769.     font-weight: 500;
  770.     transition: color 0.2s ease;
  771. }
  772. .pl-consent-link:hover {
  773.     color: var(--pl-teal-dark);
  774. }
  775. .pl-consent-hint {
  776.     font-size: 11px;
  777.     color: var(--pl-text-muted);
  778.     margin-top: 6px;
  779.     padding-left: 22px;
  780.     display: flex;
  781.     align-items: center;
  782.     gap: 4px;
  783. }
  785. /* CGU modal overlay */
  786. .pl-modal-overlay {
  787.     position: fixed;
  788.     inset: 0;
  789.     background: rgba(0,0,0,0.5);
  790.     z-index: 10000;
  791.     display: none;
  792.     align-items: center;
  793.     justify-content: center;
  794.     padding: 20px;
  795.     animation: plFadeIn 0.2s ease;
  796. }
  797. .pl-modal-overlay.active {
  798.     display: flex;
  799. }
  800. .pl-modal {
  801.     background: #fff;
  802.     border-radius: 16px;
  803.     box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  804.     max-width: 640px;
  805.     width: 100%;
  806.     max-height: 80vh;
  807.     display: flex;
  808.     flex-direction: column;
  809.     overflow: hidden;
  810. }
  811. .pl-modal-header {
  812.     display: flex;
  813.     align-items: center;
  814.     justify-content: space-between;
  815.     padding: 18px 24px;
  816.     border-bottom: 1px solid var(--pl-border);
  817.     flex-shrink: 0;
  818. }
  819. .pl-modal-header h3 {
  820.     font-size: 16px;
  821.     font-weight: 700;
  822.     color: var(--pl-text);
  823.     margin: 0;
  824. }
  825. .pl-modal-close {
  826.     width: 32px;
  827.     height: 32px;
  828.     border-radius: 8px;
  829.     border: none;
  830.     background: var(--pl-bg-hero);
  831.     cursor: pointer;
  832.     display: flex;
  833.     align-items: center;
  834.     justify-content: center;
  835.     color: var(--pl-text-secondary);
  836.     transition: all 0.2s ease;
  837. }
  838. .pl-modal-close:hover {
  839.     background: #EEF0F4;
  840.     color: var(--pl-text);
  841. }
  842. .pl-modal-body {
  843.     padding: 24px;
  844.     overflow-y: auto;
  845.     font-size: 13px;
  846.     line-height: 1.7;
  847.     color: var(--pl-text-secondary);
  848. }
  849. .pl-modal-body h4 {
  850.     font-size: 14px;
  851.     font-weight: 600;
  852.     color: var(--pl-text);
  853.     margin: 18px 0 8px;
  854. }
  855. .pl-modal-body h4:first-child {
  856.     margin-top: 0;
  857. }
  858. .pl-modal-body ul {
  859.     padding-left: 20px;
  860.     margin: 8px 0;
  861. }
  862. .pl-modal-body ul li {
  863.     margin-bottom: 4px;
  864. }
  865. .pl-modal-footer {
  866.     padding: 14px 24px;
  867.     border-top: 1px solid var(--pl-border);
  868.     display: flex;
  869.     justify-content: flex-end;
  870.     flex-shrink: 0;
  871. }
  872. .pl-modal-footer .pl-btn {
  873.     width: auto;
  874.     padding: 10px 28px;
  875.     font-size: 13px;
  876. }
  879. .pl-input-code {
  880.     font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  881.     font-size: 18px;
  882.     font-weight: 600;
  883.     letter-spacing: 2px;
  884.     text-transform: uppercase;
  885.     text-align: center;
  886.     padding: 14px 16px;
  887.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.04), rgba(240, 158, 122, 0.04));
  888.     border: 2px solid var(--pl-border);
  889. }
  891. .pl-input-code:focus {
  892.     border-color: var(--pl-teal);
  893.     background: var(--pl-bg);
  894. }
  896. .pl-input-code::placeholder {
  897.     font-weight: 400;
  898.     letter-spacing: 1px;
  899.     color: var(--pl-text-muted);
  900. }
  902. .pl-optional {
  903.     font-weight: 400;
  904.     color: var(--pl-text-muted);
  905. }
  907. .pl-required {
  908.     color: #EF4444;
  909.     margin-left: 2px;
  910. }
  912. /* Error alert */
  913. .pl-error {
  914.     background: #FEF2F2;
  915.     border: 1px solid #FECACA;
  916.     border-radius: 8px;
  917.     padding: 12px 14px;
  918.     margin-bottom: 18px;
  919.     font-size: 13px;
  920.     color: #991B1B;
  921.     display: flex;
  922.     align-items: center;
  923.     gap: 8px;
  924. }
  926. .pl-error svg {
  927.     flex-shrink: 0;
  928.     color: #EF4444;
  929. }
  931. /* ========================================
  932.    FOOTER TRUST BAR
  933.    ======================================== */
  934. .pl-footer-trust {
  935.     background: var(--pl-bg-hero);
  936.     border-top: 1px solid var(--pl-border);
  937.     padding: 16px 24px;
  938.     display: flex;
  939.     justify-content: center;
  940.     gap: 32px;
  941. }
  943. .pl-footer-item {
  944.     display: flex;
  945.     align-items: center;
  946.     gap: 8px;
  947.     font-size: 12px;
  948.     color: var(--pl-text-muted);
  949. }
  951. .pl-footer-item svg {
  952.     width: 16px;
  953.     height: 16px;
  954.     color: var(--pl-teal);
  955. }
  957. /* ========================================
  958.    LOADER
  959.    ======================================== */
  960. .pl-loader {
  961.     position: fixed;
  962.     inset: 0;
  963.     background: rgba(255,255,255,0.95);
  964.     z-index: 9999;
  965.     display: none;
  966.     align-items: center;
  967.     justify-content: center;
  968. }
  970. .pl-loader.active {
  971.     display: flex;
  972. }
  974. .pl-loader-inner {
  975.     text-align: center;
  976. }
  978. .pl-spinner {
  979.     width: 40px;
  980.     height: 40px;
  981.     border: 3px solid var(--pl-border);
  982.     border-top-color: var(--pl-teal);
  983.     border-radius: 50%;
  984.     animation: plSpin 0.7s linear infinite;
  985. }
  987. @keyframes plSpin {
  988.     to { transform: rotate(360deg); }
  989. }
  991. .pl-loader-text {
  992.     margin-top: 16px;
  993.     font-size: 15px;
  994.     font-weight: 600;
  995.     color: var(--pl-text);
  996. }
  998. .pl-loader-sub {
  999.     margin-top: 6px;
  1000.     font-size: 13px;
  1001.     color: var(--pl-text-secondary);
  1002. }
  1004. /* ========================================
  1005.    RESPONSIVE - MOBILE
  1006.    ======================================== */
  1007. @media (max-width: 900px) {
  1008.     .pl-main {
  1009.         flex-direction: column;
  1010.         min-height: auto;
  1011.     }
  1013.     .pl-hero {
  1014.         width: 100%;
  1015.         padding: 32px 24px;
  1016.     }
  1018.     .pl-hero-content {
  1019.         max-width: 100%;
  1020.         animation: none;
  1021.     }
  1023.     .pl-hero h1 {
  1024.         font-size: 26px;
  1025.     }
  1027.     .pl-hero-subtitle {
  1028.         font-size: 15px;
  1029.         margin-bottom: 24px;
  1030.     }
  1032.     .pl-features {
  1033.         gap: 14px;
  1034.     }
  1036.     .pl-feature {
  1037.         animation: none;
  1038.         opacity: 1;
  1039.     }
  1041.     .pl-feature-icon {
  1042.         width: 38px;
  1043.         height: 38px;
  1044.     }
  1046.     .pl-feature-icon svg {
  1047.         width: 18px;
  1048.         height: 18px;
  1049.     }
  1051.     .pl-feature-title {
  1052.         font-size: 13px;
  1053.     }
  1055.     .pl-feature-desc {
  1056.         font-size: 12px;
  1057.     }
  1059.     .pl-hero-illustration {
  1060.         display: none;
  1061.     }
  1063.     .pl-form-section {
  1064.         width: 100%;
  1065.         padding: 24px 16px 40px;
  1066.     }
  1068.     .pl-card {
  1069.         max-width: 100%;
  1070.         box-shadow: none;
  1071.         border: none;
  1072.         animation: none;
  1073.     }
  1075.     .pl-panel {
  1076.         padding: 24px 20px;
  1077.     }
  1079.     .pl-row {
  1080.         flex-direction: column;
  1081.         gap: 0;
  1082.     }
  1084.     .pl-footer-trust {
  1085.         flex-wrap: wrap;
  1086.         gap: 16px 24px;
  1087.         justify-content: center;
  1088.     }
  1089. }
  1091. @media (max-width: 480px) {
  1092.     .pl-hero {
  1093.         padding: 24px 20px;
  1094.     }
  1096.     .pl-hero h1 {
  1097.         font-size: 22px;
  1098.     }
  1100.     .pl-tab {
  1101.         padding: 14px 12px;
  1102.         font-size: 13px;
  1103.     }
  1104. }
  1105. </style>
  1106. ";
  1107.         
  1108.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1110.         
  1111.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1113.         yield from [];
  1114.     }
  1116.     // line 1009
  1117.     /**
  1118.      * @return iterable<null|scalar|\Stringable>
  1119.      */
  1120.     public function block_Header(array $context, array $blocks = []): iterable
  1121.     {
  1122.         $macros = $this->macros;
  1123.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1124.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Header"));
  1126.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1127.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Header"));
  1129.         // line 1010
  1130.         yield from $this->yieldParentBlock("Header", $context, $blocks);
  1131.         yield "
  1132. ";
  1133.         
  1134.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1136.         
  1137.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1139.         yield from [];
  1140.     }
  1142.     // line 1013
  1143.     /**
  1144.      * @return iterable<null|scalar|\Stringable>
  1145.      */
  1146.     public function block_Content(array $context, array $blocks = []): iterable
  1147.     {
  1148.         $macros = $this->macros;
  1149.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1150.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  1152.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1153.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  1155.         // line 1014
  1156.         yield "<div class=\"pl-page\">
  1157.     <!-- Loader -->
  1158.     <div class=\"pl-loader\" id=\"plLoader\">
  1159.         <div class=\"pl-loader-inner\">
  1160.             <div class=\"pl-spinner\"></div>
  1161.             <p class=\"pl-loader-text\">Création de votre compte...</p>
  1162.             <p class=\"pl-loader-sub\">Préparation de votre espace parent</p>
  1163.         </div>
  1164.     </div>
  1166.     <!-- Main two-column layout -->
  1167.     <main class=\"pl-main\">
  1168.         <!-- LEFT: Hero -->
  1169.         <section class=\"pl-hero\">
  1170.             <div class=\"pl-hero-content\">
  1171.                 <h1>Suivez le séjour de votre enfant en toute sérénité.</h1>
  1172.                 <p class=\"pl-hero-subtitle\">Photos, vidéos et messages vocaux, dans un espace privé réservé aux familles.</p>
  1174.                 <ul class=\"pl-features\">
  1175.                     <li class=\"pl-feature\">
  1176.                         <span class=\"pl-feature-icon orange\">
  1177.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1178.                                 <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>
  1179.                                 <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  1180.                                 <polyline points=\"21 15 16 10 5 21\"/>
  1181.                             </svg>
  1182.                         </span>
  1183.                         <div class=\"pl-feature-text\">
  1184.                             <p class=\"pl-feature-title\">Photos & vidéos en direct</p>
  1185.                             <p class=\"pl-feature-desc\">Visualisez les moments du séjour en toute confidentialité</p>
  1186.                         </div>
  1187.                     </li>
  1188.                     <li class=\"pl-feature\">
  1189.                         <span class=\"pl-feature-icon teal\">
  1190.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1191.                                 <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\"/>
  1192.                             </svg>
  1193.                         </span>
  1194.                         <div class=\"pl-feature-text\">
  1195.                             <p class=\"pl-feature-title\">Messages vocaux</p>
  1196.                             <p class=\"pl-feature-desc\">Accédez à l’ensemble des messages vocaux enregistrés, en illimité.</p>
  1197.                         </div>
  1198.                     </li>
  1199.                     <li class=\"pl-feature\">
  1200.                         <span class=\"pl-feature-icon coral\">
  1201.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1202.                                 <path d=\"M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6\"/>
  1203.                                 <rect x=\"6\" y=\"5\" width=\"12\" height=\"7\"/>
  1204.                                 <path d=\"M12 3v5\"/>
  1205.                             </svg>
  1206.                         </span>
  1207.                         <div class=\"pl-feature-text\">
  1208.                             <p class=\"pl-feature-title\">Souvenirs personnalisés</p>
  1209.                             <p class=\"pl-feature-desc\">Créez albums, livres et cadeaux uniques du séjour</p>
  1210.                         </div>
  1211.                     </li>
  1212.                     <li class=\"pl-feature\">
  1213.                         <span class=\"pl-feature-icon brown\">
  1214.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1215.                                 <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>
  1216.                                 <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>
  1217.                             </svg>
  1218.                         </span>
  1219.                         <div class=\"pl-feature-text\">
  1220.                             <p class=\"pl-feature-title\">Notifications instantanées</p>
  1221.                             <p class=\"pl-feature-desc\">Restez informé à chaque nouvelle publication</p>
  1222.                         </div>
  1223.                     </li>
  1224.                 </ul>
  1226.                 <!-- Decorative illustration -->
  1227.                 <div class=\"pl-hero-illustration\">
  1228.                     <svg viewBox=\"0 0 400 280\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">
  1229.                         <!-- Background shapes -->
  1230.                         <ellipse cx=\"200\" cy=\"250\" rx=\"180\" ry=\"20\" fill=\"#E5E9F0\" opacity=\"0.5\"/>
  1231.                         
  1232.                         <!-- Phone mockup -->
  1233.                         <rect x=\"140\" y=\"30\" width=\"120\" height=\"200\" rx=\"16\" fill=\"#1A1A2E\"/>
  1234.                         <rect x=\"146\" y=\"40\" width=\"108\" height=\"180\" rx=\"12\" fill=\"#fff\"/>
  1235.                         
  1236.                         <!-- Phone content - photos grid -->
  1237.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"#F09E7A\" opacity=\"0.3\"/>
  1238.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad1)\"/>
  1239.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"#41A2AA\" opacity=\"0.3\"/>
  1240.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad2)\"/>
  1241.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"#F56040\" opacity=\"0.2\"/>
  1242.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"url(#imgGrad3)\"/>
  1243.                         
  1244.                         <!-- Photo icons -->
  1245.                         <circle cx=\"176\" cy=\"79\" r=\"12\" fill=\"#F09E7A\"/>
  1246.                         <path d=\"M170 82l4-5 3 3 5-6 6 8H170z\" fill=\"#fff\"/>
  1247.                         <circle cx=\"226\" cy=\"79\" r=\"10\" fill=\"#41A2AA\"/>
  1248.                         <polygon points=\"221,82 226,74 231,82\" fill=\"#fff\"/>
  1249.                         
  1250.                         <!-- Play button on video -->
  1251.                         <circle cx=\"200\" cy=\"137\" r=\"14\" fill=\"rgba(255,255,255,0.9)\"/>
  1252.                         <polygon points=\"196,131 196,143 208,137\" fill=\"#F56040\"/>
  1253.                         
  1254.                         <!-- Notification bar -->
  1255.                         <rect x=\"152\" y=\"175\" width=\"96\" height=\"38\" rx=\"8\" fill=\"#F8FAFB\"/>
  1256.                         <circle cx=\"168\" cy=\"194\" r=\"10\" fill=\"#41A2AA\"/>
  1257.                         <path d=\"M165 194l2 2 4-4\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>
  1258.                         <rect x=\"184\" y=\"188\" width=\"50\" height=\"6\" rx=\"3\" fill=\"#E5E9F0\"/>
  1259.                         <rect x=\"184\" y=\"198\" width=\"35\" height=\"4\" rx=\"2\" fill=\"#E5E9F0\"/>
  1260.                         
  1261.                         <!-- Phone notch -->
  1262.                         <rect x=\"175\" y=\"34\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#1A1A2E\"/>
  1263.                         
  1264.                         <!-- Decorative elements around -->
  1265.                         <circle cx=\"80\" cy=\"80\" r=\"8\" fill=\"#F09E7A\" opacity=\"0.6\"/>
  1266.                         <circle cx=\"320\" cy=\"100\" r=\"6\" fill=\"#41A2AA\" opacity=\"0.5\"/>
  1267.                         <circle cx=\"340\" cy=\"180\" r=\"10\" fill=\"#F56040\" opacity=\"0.4\"/>
  1268.                         <circle cx=\"60\" cy=\"180\" r=\"5\" fill=\"#41A2AA\" opacity=\"0.4\"/>
  1269.                         
  1270.                         <!-- Hearts/love -->
  1271.                         <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\"/>
  1272.                         
  1273.                         <!-- Stars -->
  1274.                         <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\"/>
  1275.                         <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\"/>
  1276.                         
  1277.                         <!-- Gradients -->
  1278.                         <defs>
  1279.                             <linearGradient id=\"imgGrad1\" x1=\"152\" y1=\"55\" x2=\"200\" y2=\"103\">
  1280.                                 <stop offset=\"0%\" stop-color=\"#F09E7A\" stop-opacity=\"0.4\"/>
  1281.                                 <stop offset=\"100%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  1282.                             </linearGradient>
  1283.                             <linearGradient id=\"imgGrad2\" x1=\"204\" y1=\"55\" x2=\"248\" y2=\"103\">
  1284.                                 <stop offset=\"0%\" stop-color=\"#41A2AA\" stop-opacity=\"0.4\"/>
  1285.                                 <stop offset=\"100%\" stop-color=\"#359BA3\" stop-opacity=\"0.3\"/>
  1286.                             </linearGradient>
  1287.                             <linearGradient id=\"imgGrad3\" x1=\"152\" y1=\"107\" x2=\"248\" y2=\"167\">
  1288.                                 <stop offset=\"0%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  1289.                                 <stop offset=\"100%\" stop-color=\"#F09E7A\" stop-opacity=\"0.2\"/>
  1290.                             </linearGradient>
  1291.                         </defs>
  1292.                     </svg>
  1293.                     
  1294.                     <!-- Floating notification badges -->
  1295.                     <div class=\"pl-floating-badges\">
  1296.                         <div class=\"pl-badge pl-badge-1\">
  1297.                             <span class=\"pl-badge-icon orange\">
  1298.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1299.                                     <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>
  1300.                                     <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  1301.                                     <polyline points=\"21 15 16 10 5 21\"/>
  1302.                                 </svg>
  1303.                             </span>
  1304.                             <span>+12 photos</span>
  1305.                         </div>
  1306.                         <div class=\"pl-badge pl-badge-2\">
  1307.                             <span class=\"pl-badge-icon teal\">
  1308.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1309.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>
  1310.                                     <polyline points=\"22 4 12 14.01 9 11.01\"/>
  1311.                                 </svg>
  1312.                             </span>
  1313.                             <span>Bien arrivés !</span>
  1314.                         </div>
  1315.                     </div>
  1316.                 </div>
  1317.             </div>
  1318.         </section>
  1320.         <!-- RIGHT: Form -->
  1321.         <section class=\"pl-form-section\">
  1322.             <div class=\"pl-card\">
  1323.                 <!-- Tabs -->
  1324.                 <div class=\"pl-tabs\" role=\"tablist\">
  1325.                     <button class=\"pl-tab active\" role=\"tab\" data-tab=\"login\" aria-selected=\"true\">Se connecter</button>
  1326.                     <button class=\"pl-tab\" role=\"tab\" data-tab=\"register\" aria-selected=\"false\">Créer un compte</button>
  1327.                 </div>
  1329.                 <!-- LOGIN PANEL -->
  1330.                 <div class=\"pl-panel active\" id=\"panel-login\" role=\"tabpanel\">
  1331.                     ";
  1332.         // line 1189
  1333.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 1189, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1334.             // line 1190
  1335.             yield "                    <div class=\"pl-error\">
  1336.                         <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1337.                             <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1338.                             <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>
  1339.                             <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>
  1340.                         </svg>
  1341.                         Identifiant ou mot de passe incorrect.
  1342.                     </div>
  1343.                     ";
  1344.         }
  1345.         // line 1199
  1346.         yield "
  1347.                     <form method=\"post\" action=\"";
  1348.         // line 1200
  1349.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Parent");
  1350.         yield "\" id=\"loginForm\" autocomplete=\"off\">
  1351.                         <!-- Code Séjour - Required for direct access -->
  1352.                         <div class=\"pl-form-group\">
  1353.                             <label class=\"pl-label\">
  1354.                                 Code séjour
  1355.                                 <span class=\"pl-required\">*</span>
  1356.                             </label>
  1357.                             <input type=\"text\" 
  1358.                                 class=\"pl-input pl-input-code\" 
  1359.                                 name=\"code_sejour\" 
  1360.                                 id=\"loginCode\" 
  1361.                                 placeholder=\"   XX000000\"
  1362.                                 maxlength=\"8\"
  1363.                                 autocomplete=\"one-time-code\"
  1364.                                 data-lpignore=\"true\"
  1365.                                 data-form-type=\"other\"
  1366.                                 required>
  1367.                             <p class=\"pl-hint\">
  1368.                                 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1369.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1370.                                     <path d=\"M12 16v-4\"/>
  1371.                                     <path d=\"M12 8h.01\"/>
  1372.                                 </svg>
  1373.                                 Code reçu par l'école ou l'organisateur du séjour
  1374.                             </p>
  1375.                         </div>
  1377.                         <div class=\"pl-form-group\">
  1378.                             <label class=\"pl-label\">Adresse e-mail</label>
  1379.                             <input type=\"email\" class=\"pl-input\" name=\"email\" id=\"loginEmail\" value=\"";
  1380.         // line 1229
  1381.         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.', 1229, $this->source); })()), "html", null, true);
  1382.         yield "\" placeholder=\"votre@email.com\" autocomplete=\"username\" required>
  1383.                         </div>
  1385.                         <div class=\"pl-form-group\">
  1386.                             <label class=\"pl-label\">Mot de passe</label>
  1387.                             <div class=\"pl-password-wrap\">
  1388.                                 <input type=\"password\" class=\"pl-input\" name=\"password\" id=\"loginPwd\" placeholder=\"••••••••\" autocomplete=\"current-password\" required>
  1389.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"loginPwd\" aria-label=\"Afficher\">
  1390.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1391.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1392.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1393.                                     </svg>
  1394.                                 </button>
  1395.                             </div>
  1396.                         </div>
  1398.                         <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  1399.         // line 1245
  1400.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  1401.         yield "\">
  1403.                         <button type=\"submit\" class=\"pl-btn\">Se connecter</button>
  1404.                         <a href=\"";
  1405.         // line 1248
  1406.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1407.         yield "\" class=\"pl-forgot\">Vous avez oublié votre mot de passe ?</a>
  1408.                     </form>
  1410.                     <div class=\"pl-divider\">
  1411.                         <span class=\"pl-divider-line\"></span>
  1412.                         <span class=\"pl-divider-text\">ou</span>
  1413.                         <span class=\"pl-divider-line\"></span>
  1414.                     </div>
  1416.                     <div class=\"pl-socials\">
  1417.                         <a href=\"";
  1418.         // line 1258
  1419.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  1420.         yield "\" class=\"pl-social-btn pl-social-google\">
  1421.                             <img src=\"";
  1422.         // line 1259
  1423.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  1424.         yield "\" alt=\"\">
  1425.                             Continuer avec Google
  1426.                         </a>
  1427.                         <a href=\"";
  1428.         // line 1262
  1429.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  1430.         yield "\" class=\"pl-social-btn pl-social-facebook\">
  1431.                             <img src=\"";
  1432.         // line 1263
  1433.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  1434.         yield "\" alt=\"\">
  1435.                             Continuer avec Facebook
  1436.                         </a>
  1437.                     </div>
  1438.                 </div>
  1440.                 <!-- REGISTER PANEL -->
  1441.                 <div class=\"pl-panel\" id=\"panel-register\" role=\"tabpanel\">
  1442.                     <form id=\"registerForm\" onsubmit=\"return false;\" autocomplete=\"off\">
  1443.                      
  1444.                         <div class=\"pl-row\">
  1445.                             <div class=\"pl-form-group\">
  1446.                                 <label class=\"pl-label\">Nom</label>
  1447.                                 <input type=\"text\" class=\"pl-input\" id=\"regNom\" name=\"family-name\" placeholder=\"Votre nom\" autocomplete=\"family-name\" required>
  1448.                             </div>
  1449.                             <div class=\"pl-form-group\">
  1450.                                 <label class=\"pl-label\">Prénom</label>
  1451.                                 <input type=\"text\" class=\"pl-input\" id=\"regPrenom\" name=\"given-name\" placeholder=\"Votre prénom\" autocomplete=\"given-name\" required>
  1452.                             </div>
  1453.                         </div>
  1455.                         <div class=\"pl-form-group\">
  1456.                             <label class=\"pl-label\">Adresse e-mail</label>
  1457.                             <input type=\"email\" class=\"pl-input\" id=\"regEmail\" name=\"email\" placeholder=\"votre@email.com\" autocomplete=\"email\" required>
  1458.                         </div>
  1460.                         <div class=\"pl-form-group\">
  1461.                             <label class=\"pl-label\">Mot de passe</label>
  1462.                             <div class=\"pl-password-wrap\">
  1463.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwd\" name=\"new-password\" placeholder=\"Minimum 6 caractères\" autocomplete=\"new-password\" required>
  1464.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwd\" aria-label=\"Afficher\">
  1465.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1466.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1467.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1468.                                     </svg>
  1469.                                 </button>
  1470.                             </div>
  1471.                         </div>
  1473.                         <div class=\"pl-form-group\">
  1474.                             <label class=\"pl-label\">Confirmer le mot de passe</label>
  1475.                             <div class=\"pl-password-wrap\">
  1476.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwdConfirm\" name=\"confirm-password\" placeholder=\"Retapez votre mot de passe\" autocomplete=\"new-password\" required>
  1477.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwdConfirm\" aria-label=\"Afficher\">
  1478.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1479.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  1480.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  1481.                                     </svg>
  1482.                                 </button>
  1483.                             </div>
  1484.                         </div>
  1486.                         <div class=\"pl-form-group\">
  1487.                             <label class=\"pl-label\">Téléphone portable</label>
  1488.                             <input type=\"tel\" class=\"pl-input\" id=\"regPhone\" placeholder=\"06 12 34 56 78\" required>
  1489.                         </div>
  1491.                         <div class=\"pl-notif-box\">
  1492.                             <p class=\"pl-notif-label\">Recevoir les notifications :</p>
  1493.                             <div class=\"pl-notif-opts\">
  1494.                                 <label class=\"pl-checkbox\">
  1495.                                     <input type=\"checkbox\" id=\"notifSms\" checked>
  1496.                                     SMS
  1497.                                 </label>
  1498.                                 <label class=\"pl-checkbox\">
  1499.                                     <input type=\"checkbox\" id=\"notifEmail\" checked>
  1500.                                     E-mail
  1501.                                 </label>
  1502.                             </div>
  1503.                         </div>
  1505.                         <div class=\"pl-consent-box\" id=\"consentBox\">
  1506.                             <label class=\"pl-checkbox\">
  1507.                                 <input type=\"checkbox\" id=\"acceptCgu\">
  1508.                                 J'accepte les <span class=\"pl-consent-link\" onclick=\"openCguModal(event)\">Conditions Générales d'Utilisation</span> et la <span class=\"pl-consent-link\" onclick=\"openPolitiqueModal(event)\">Politique de Confidentialité</span>&nbsp;<span class=\"pl-required\">*</span>
  1509.                             </label>
  1510.                             <p class=\"pl-consent-hint\">
  1511.                                 <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/></svg>
  1512.                                 Données hébergées en France, conformité RGPD
  1513.                             </p>
  1514.                         </div>
  1516.                         <button type=\"button\" class=\"pl-btn pl-btn-secondary\" onclick=\"handleRegister()\">Créer mon compte Parent</button>
  1517.                         <p class=\"pl-note\">Vous pourrez modifier vos informations et vos préférences de notifications à tout moment.</p>
  1518.                     </form>
  1520.                     <div class=\"pl-divider\">
  1521.                         <span class=\"pl-divider-line\"></span>
  1522.                         <span class=\"pl-divider-text\">ou</span>
  1523.                         <span class=\"pl-divider-line\"></span>
  1524.                     </div>
  1526.                     <div class=\"pl-socials\">
  1527.                         <a href=\"";
  1528.         // line 1356
  1529.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  1530.         yield "\" class=\"pl-social-btn pl-social-google\">
  1531.                             <img src=\"";
  1532.         // line 1357
  1533.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  1534.         yield "\" alt=\"\">
  1535.                             Continuer avec Google
  1536.                         </a>
  1537.                         <a href=\"";
  1538.         // line 1360
  1539.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  1540.         yield "\" class=\"pl-social-btn pl-social-facebook\">
  1541.                             <img src=\"";
  1542.         // line 1361
  1543.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  1544.         yield "\" alt=\"\">
  1545.                             Continuer avec Facebook
  1546.                         </a>
  1547.                     </div>
  1548.                 </div>
  1549.             </div>
  1550.         </section>
  1551.     </main>
  1553.     <!-- CGU Modal -->
  1554.     <div class=\"pl-modal-overlay\" id=\"cguModal\">
  1555.         <div class=\"pl-modal\">
  1556.             <div class=\"pl-modal-header\">
  1557.                 <h3>Conditions Générales d'Utilisation</h3>
  1558.                 <button class=\"pl-modal-close\" onclick=\"closeCguModal()\">
  1559.                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>
  1560.                 </button>
  1561.             </div>
  1562.             <div class=\"pl-modal-body\">
  1563.                 <h4>1. Objet</h4>
  1564.                 <p>Les présentes Conditions Générales d'Utilisation (CGU) régissent l'accès et l'utilisation de la plateforme 5sur5séjour par les utilisateurs « Parents ». L'inscription implique l'acceptation pleine et entière des présentes conditions.</p>
  1566.                 <h4>2. Accès au service</h4>
  1567.                 <p>L'accès à l'espace Parent nécessite un code séjour fourni par l'accompagnateur ou l'organisateur du séjour. Le Parent crée un compte personnel pour consulter les photos, vidéos et messages vocaux déposés pendant le séjour de son enfant.</p>
  1569.                 <h4>3. Données personnelles collectées</h4>
  1570.                 <ul>
  1571.                     <li>Nom, prénom, adresse e-mail, numéro de téléphone portable</li>
  1572.                     <li>Préférences de notification (SMS, e-mail)</li>
  1573.                     <li>Données de connexion et d'utilisation de la plateforme</li>
  1574.                 </ul>
  1576.                 <h4>4. Finalités du traitement</h4>
  1577.                 <p>Vos données sont utilisées exclusivement pour :</p>
  1578.                 <ul>
  1579.                     <li>Créer et gérer votre compte Parent</li>
  1580.                     <li>Vous donner accès aux contenus du séjour de votre enfant</li>
  1581.                     <li>Vous envoyer des notifications (nouvelles photos, messages, commandes)</li>
  1582.                     <li>Assurer le bon fonctionnement et la sécurité du service</li>
  1583.                 </ul>
  1585.                 <h4>5. Durée de conservation</h4>
  1586.                 <p>Les données personnelles sont conservées pendant la durée d'utilisation du service. Les contenus de séjour (photos, vidéos) sont automatiquement supprimés 2 mois après la fin du séjour. Votre compte est supprimé après 2 ans d'inactivité.</p>
  1588.                 <h4>6. Droits de l'utilisateur</h4>
  1589.                 <p>Conformément au RGPD (Règlement UE 2016/679), vous disposez d'un droit d'accès, de rectification, de suppression, de limitation et de portabilité de vos données. Vous pouvez exercer ces droits par e-mail à <strong>contact@5sur5sejour.com</strong>.</p>
  1591.                 <h4>7. Hébergement et sécurité</h4>
  1592.                 <p>Toutes les données sont hébergées en France (OVH, 2 rue Kellermann, 59100 Roubaix). La plateforme utilise un chiffrement SSL et des mesures de sécurité conformes aux standards en vigueur.</p>
  1594.                 <h4>8. Responsable du traitement</h4>
  1595.                 <p>TRUST CONSEILS — 199 Avenue Francis de Pressensé, 69200 Vénissieux.<br>Contact : <strong>contact@5sur5sejour.com</strong> — Tél. : 05 36 28 29 30</p>
  1596.             </div>
  1597.             <div class=\"pl-modal-footer\">
  1598.                 <button class=\"pl-btn\" onclick=\"closeCguModal()\">J'ai compris</button>
  1599.             </div>
  1600.         </div>
  1601.     </div>
  1603.     <!-- Politique Modal -->
  1604.     <div class=\"pl-modal-overlay\" id=\"politiqueModal\">
  1605.         <div class=\"pl-modal\">
  1606.             <div class=\"pl-modal-header\">
  1607.                 <h3>Politique de Confidentialité</h3>
  1608.                 <button class=\"pl-modal-close\" onclick=\"closePolitiqueModal()\">
  1609.                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>
  1610.                 </button>
  1611.             </div>
  1612.             <div class=\"pl-modal-body\">
  1613.                 <h4>Charte d'utilisation des données personnelles</h4>
  1614.                 <p>La présente politique de confidentialité s'applique à la plateforme 5sur5séjour (5sur5sejour.com), éditée par TRUST CONSEILS.</p>
  1616.                 <h4>Données collectées</h4>
  1617.                 <p>Dans le cadre de l'utilisation du service, nous collectons les données suivantes : nom, prénom, adresse e-mail, numéro de téléphone, données de connexion. Ces données sont nécessaires au fonctionnement du service.</p>
  1619.                 <h4>Base légale du traitement</h4>
  1620.                 <p>Le traitement de vos données repose sur votre consentement (acceptation des présentes conditions lors de l'inscription) et sur l'exécution du contrat de service.</p>
  1622.                 <h4>Destinataires des données</h4>
  1623.                 <p>Vos données personnelles ne sont jamais vendues ni partagées avec des tiers à des fins commerciales. Elles sont accessibles uniquement aux équipes de TRUST CONSEILS dans le cadre strict du fonctionnement du service.</p>
  1625.                 <h4>Transferts de données</h4>
  1626.                 <p>Aucun transfert de données hors de l'Union Européenne n'est effectué. L'ensemble des données est hébergé en France.</p>
  1628.                 <h4>Cookies</h4>
  1629.                 <p>La plateforme utilise des cookies strictement nécessaires au fonctionnement du service (session, authentification). Aucun cookie publicitaire n'est utilisé.</p>
  1631.                 <h4>Vos droits</h4>
  1632.                 <p>Conformément au RGPD et à la loi Informatique et Libertés, vous disposez des droits suivants :</p>
  1633.                 <ul>
  1634.                     <li><strong>Droit d'accès</strong> : obtenir une copie de vos données</li>
  1635.                     <li><strong>Droit de rectification</strong> : corriger vos informations</li>
  1636.                     <li><strong>Droit de suppression</strong> : demander l'effacement de vos données</li>
  1637.                     <li><strong>Droit d'opposition</strong> : vous opposer au traitement</li>
  1638.                     <li><strong>Droit à la portabilité</strong> : recevoir vos données dans un format structuré</li>
  1639.                     <li><strong>Droit de retrait du consentement</strong> : à tout moment</li>
  1640.                 </ul>
  1641.                 <p>Pour exercer vos droits : <strong>contact@5sur5sejour.com</strong></p>
  1642.                 <p>Pour en savoir plus : <a href=\"https://www.cnil.fr/\" target=\"_blank\" rel=\"noopener\" style=\"color:var(--pl-teal);\">www.cnil.fr</a></p>
  1643.             </div>
  1644.             <div class=\"pl-modal-footer\">
  1645.                 <button class=\"pl-btn\" onclick=\"closePolitiqueModal()\">J'ai compris</button>
  1646.             </div>
  1647.         </div>
  1648.     </div>
  1650.     <!-- Footer trust bar -->
  1651.     <footer class=\"pl-footer-trust\">
  1652.         <span class=\"pl-footer-item\">
  1653.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1654.                 <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>
  1655.                 <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>
  1656.             </svg>
  1657.             Connexion sécurisée
  1658.         </span>
  1659.         <span class=\"pl-footer-item\">
  1660.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1661.                 <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>
  1662.             </svg>
  1663.             Données protégées
  1664.         </span>
  1665.         <span class=\"pl-footer-item\">
  1666.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  1667.                 <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  1668.                 <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>
  1669.                 <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\"/>
  1670.             </svg>
  1671.             Hébergé en France
  1672.         </span>
  1673.     </footer>
  1674. </div>
  1675. ";
  1676.         
  1677.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1679.         
  1680.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1682.         yield from [];
  1683.     }
  1685.     // line 1494
  1686.     /**
  1687.      * @return iterable<null|scalar|\Stringable>
  1688.      */
  1689.     public function block_Footer(array $context, array $blocks = []): iterable
  1690.     {
  1691.         $macros = $this->macros;
  1692.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1693.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  1695.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1696.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Footer"));
  1698.         // line 1495
  1699.         yield from $this->yieldParentBlock("Footer", $context, $blocks);
  1700.         yield "
  1701. ";
  1702.         
  1703.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1705.         
  1706.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1708.         yield from [];
  1709.     }
  1711.     // line 1498
  1712.     /**
  1713.      * @return iterable<null|scalar|\Stringable>
  1714.      */
  1715.     public function block_javascript(array $context, array $blocks = []): iterable
  1716.     {
  1717.         $macros = $this->macros;
  1718.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1719.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1721.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1722.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  1724.         // line 1499
  1725.         yield from $this->yieldParentBlock("javascript", $context, $blocks);
  1726.         yield "
  1727. <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  1728. <script>
  1729. document.addEventListener('DOMContentLoaded', function() {
  1730.     // Tab switching
  1731.     const tabs = document.querySelectorAll('.pl-tab');
  1732.     const panels = document.querySelectorAll('.pl-panel');
  1734.     tabs.forEach(tab => {
  1735.         tab.addEventListener('click', () => {
  1736.             const target = tab.dataset.tab;
  1738.             tabs.forEach(t => {
  1739.                 t.classList.remove('active');
  1740.                 t.setAttribute('aria-selected', 'false');
  1741.             });
  1742.             tab.classList.add('active');
  1743.             tab.setAttribute('aria-selected', 'true');
  1745.             panels.forEach(p => p.classList.remove('active'));
  1746.             document.getElementById('panel-' + target).classList.add('active');
  1747.         });
  1748.     });
  1750.     // Clear autofilled code séjour field on page load (browser autofill fix)
  1751.     const codeInput = document.getElementById('loginCode');
  1752.     if (codeInput) {
  1753.         // Clear any incorrect autofill value
  1754.         setTimeout(() => {
  1755.             const currentValue = codeInput.value;
  1756.             // If the value doesn't match code séjour format (2 letters + 6 digits), clear it
  1757.             if (currentValue && !/^[A-Z]{2}[0-9]{6}\$/.test(currentValue.toUpperCase())) {
  1758.                 codeInput.value = '';
  1759.             }
  1760.         }, 100);
  1761.     }
  1763.     // Password toggle
  1764.     document.querySelectorAll('.pl-eye-btn').forEach(btn => {
  1765.         btn.addEventListener('click', () => {
  1766.             const input = document.getElementById(btn.dataset.target);
  1767.             const isPassword = input.type === 'password';
  1768.             input.type = isPassword ? 'text' : 'password';
  1769.             btn.querySelector('svg').style.opacity = isPassword ? '0.5' : '1';
  1770.         });
  1771.     });
  1773.     // Auto-format code séjour (uppercase) and validation
  1774.     if (codeInput) {
  1775.         codeInput.addEventListener('input', (e) => {
  1776.             let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
  1777.             e.target.value = value;
  1778.             
  1779.             // Visual feedback when complete
  1780.             if (value.length === 8) {
  1781.                 e.target.style.borderColor = '#41A2AA';
  1782.                 e.target.style.background = 'rgba(65, 162, 170, 0.06)';
  1783.             } else {
  1784.                 e.target.style.borderColor = '';
  1785.                 e.target.style.background = '';
  1786.             }
  1787.         });
  1789.         // Validate on form submit
  1790.         document.getElementById('loginForm').addEventListener('submit', function(e) {
  1791.             const codePattern = /^[A-Z]{2}[0-9]{6}\$/;
  1792.             if (!codePattern.test(codeInput.value)) {
  1793.                 e.preventDefault();
  1794.                 codeInput.classList.add('is-invalid');
  1795.                 Swal.fire({
  1796.                     icon: 'error',
  1797.                     title: 'Code séjour invalide',
  1798.                     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;\">XX000000</span></p>',
  1799.                     confirmButtonColor: '#41a2aa'
  1800.                 });
  1801.             } else {
  1802.                 // Show loading state on button
  1803.                 const btn = this.querySelector('button[type=\"submit\"]');
  1804.                 btn.classList.add('pl-btn-loading');
  1805.                 btn.disabled = true;
  1806.             }
  1807.         });
  1808.     }
  1810.     // Add visual feedback when email is valid
  1811.     const emailInputs = document.querySelectorAll('input[type=\"email\"]');
  1812.     emailInputs.forEach(input => {
  1813.         input.addEventListener('blur', function() {
  1814.             const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  1815.             if (this.value && emailRegex.test(this.value)) {
  1816.                 this.classList.add('is-valid');
  1817.                 this.classList.remove('is-invalid');
  1818.             } else if (this.value) {
  1819.                 this.classList.add('is-invalid');
  1820.                 this.classList.remove('is-valid');
  1821.             }
  1822.         });
  1823.         input.addEventListener('input', function() {
  1824.             this.classList.remove('is-valid', 'is-invalid');
  1825.         });
  1826.     });
  1828.     // Login error
  1829.     ";
  1830.         // line 1602
  1831.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 1602, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1832.             // line 1603
  1833.             yield "    Swal.fire({
  1834.         icon: 'error',
  1835.         title: 'Erreur de connexion',
  1836.         text: 'Identifiant ou mot de passe incorrect.',
  1837.         confirmButtonColor: '#41a2aa'
  1838.     });
  1839.     ";
  1840.         }
  1841.         // line 1610
  1842.         yield "});
  1844. // Modal CGU / Politique
  1845. function openCguModal(e) { e && e.preventDefault(); document.getElementById('cguModal').classList.add('active'); document.body.style.overflow = 'hidden'; }
  1846. function closeCguModal() { document.getElementById('cguModal').classList.remove('active'); document.body.style.overflow = ''; }
  1847. function openPolitiqueModal(e) { e && e.preventDefault(); document.getElementById('politiqueModal').classList.add('active'); document.body.style.overflow = 'hidden'; }
  1848. function closePolitiqueModal() { document.getElementById('politiqueModal').classList.remove('active'); document.body.style.overflow = ''; }
  1850. document.querySelectorAll('.pl-modal-overlay').forEach(function(overlay) {
  1851.     overlay.addEventListener('click', function(e) {
  1852.         if (e.target === overlay) {
  1853.             overlay.classList.remove('active');
  1854.             document.body.style.overflow = '';
  1855.         }
  1856.     });
  1857. });
  1859. document.addEventListener('keydown', function(e) {
  1860.     if (e.key === 'Escape') { closeCguModal(); closePolitiqueModal(); }
  1861. });
  1863. // Registration
  1864. function handleRegister() {
  1865.     const loader = document.getElementById('plLoader');
  1866.     const fields = {
  1867.         nom: document.getElementById('regNom'),
  1868.         prenom: document.getElementById('regPrenom'),
  1869.         email: document.getElementById('regEmail'),
  1870.         pwd: document.getElementById('regPwd'),
  1871.         pwdConfirm: document.getElementById('regPwdConfirm'),
  1872.         phone: document.getElementById('regPhone')
  1873.     };
  1875.     // Reset
  1876.     Object.values(fields).forEach(f => f.classList.remove('is-invalid'));
  1877.     document.getElementById('consentBox').classList.remove('is-invalid');
  1879.     // Validate
  1880.     let valid = true;
  1882.     if (!fields.nom.value.trim()) { fields.nom.classList.add('is-invalid'); valid = false; }
  1883.     if (!fields.prenom.value.trim()) { fields.prenom.classList.add('is-invalid'); valid = false; }
  1885.     const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  1886.     if (!emailRegex.test(fields.email.value)) { fields.email.classList.add('is-invalid'); valid = false; }
  1888.     if (fields.pwd.value.length < 6) {
  1889.         fields.pwd.classList.add('is-invalid');
  1890.         Swal.fire({ icon: 'warning', title: 'Mot de passe trop court', text: 'Minimum 6 caractères.', confirmButtonColor: '#41a2aa' });
  1891.         return;
  1892.     }
  1894.     if (fields.pwd.value !== fields.pwdConfirm.value) {
  1895.         fields.pwdConfirm.classList.add('is-invalid');
  1896.         Swal.fire({ icon: 'warning', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  1897.         return;
  1898.     }
  1900.     if (!fields.phone.value.trim()) { fields.phone.classList.add('is-invalid'); valid = false; }
  1902.     if (!document.getElementById('acceptCgu').checked) {
  1903.         document.getElementById('consentBox').classList.add('is-invalid');
  1904.         Swal.fire({
  1905.             icon: 'warning',
  1906.             title: 'Conditions requises',
  1907.             html: 'Vous devez accepter les <strong>Conditions Générales d\\'Utilisation</strong> et la <strong>Politique de Confidentialité</strong> pour créer votre compte.',
  1908.             confirmButtonColor: '#41a2aa'
  1909.         });
  1910.         return;
  1911.     }
  1913.     if (!valid) return;
  1915.     loader.classList.add('active');
  1917.     const data = {
  1918.         nomparent: fields.nom.value.trim(),
  1919.         prenomparent: fields.prenom.value.trim(),
  1920.         mailparent: fields.email.value.trim(),
  1921.         numtel: fields.phone.value.trim(),
  1922.         passwordparent: fields.pwd.value,
  1923.         confirmpassword: fields.pwdConfirm.value,
  1924.         sms: document.getElementById('notifSms').checked ? 1 : 0,
  1925.         mailnotif: document.getElementById('notifEmail').checked ? 1 : 0
  1926.     };
  1928.     fetch(\"";
  1929.         // line 1696
  1930.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("parent_register");
  1931.         yield "\", {
  1932.         method: 'POST',
  1933.         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  1934.         body: new URLSearchParams(data)
  1935.     })
  1936.     .then(r => r.text())
  1937.     .then(text => {
  1938.         loader.classList.remove('active');
  1939.         let code = '';
  1940.         try {
  1941.             const parsed = JSON.parse(text);
  1942.             code = typeof parsed === 'string' ? parsed : (parsed && parsed.code !== undefined ? String(parsed.code) : '');
  1943.         } catch (e) {
  1944.             code = text.trim();
  1945.         }
  1947.         if (code === 'eror') {
  1948.             fields.email.classList.add('is-invalid');
  1949.             Swal.fire({
  1950.                 icon: false,
  1951.                 title: '🔐 Vous avez déjà un compte',
  1952.                 text: 'Cette adresse est déjà associée à un compte parent. Vous pouvez vous connecter ou réinitialiser votre mot de passe si besoin.',
  1953.                 footer: '<a href=\"";
  1954.         // line 1718
  1955.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1956.         yield "\" style=\"color:#F09E7A;\">Mot de passe oublié ?</a>',
  1957.                 confirmButtonColor: '#41a2aa'
  1958.             });
  1959.         } else if (code === 'erorpasswordconfirm') {
  1960.             fields.pwdConfirm.classList.add('is-invalid');
  1961.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  1962.         } else if (code === 'done') {
  1963.             Swal.fire({
  1964.                 icon: 'success',
  1965.                 title: '🎉 Bienvenue !',
  1966.                 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>',
  1967.                 confirmButtonText: 'Compris',
  1968.                 confirmButtonColor: '#41a2aa'
  1969.             }).then(() => location.reload());
  1970.         } else {
  1971.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Une réponse inattendue a été reçue. Veuillez réessayer.', confirmButtonColor: '#41a2aa' });
  1972.         }
  1973.     })
  1974.     .catch(() => {
  1975.         loader.classList.remove('active');
  1976.         Swal.fire({ icon: 'error', title: 'Erreur', text: 'Un problème est survenu. Veuillez réessayer.', confirmButtonColor: '#F09E7A' });
  1977.     });
  1978. }
  1979. </script>
  1980. ";
  1981.         
  1982.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1984.         
  1985.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1987.         yield from [];
  1988.     }
  1990.     /**
  1991.      * @codeCoverageIgnore
  1992.      */
  1993.     public function getTemplateName(): string
  1994.     {
  1995.         return "Parent/LoginParent.html.twig";
  1996.     }
  1998.     /**
  1999.      * @codeCoverageIgnore
  2000.      */
  2001.     public function isTraitable(): bool
  2002.     {
  2003.         return false;
  2004.     }
  2006.     /**
  2007.      * @codeCoverageIgnore
  2008.      */
  2009.     public function getDebugInfo(): array
  2010.     {
  2011.         return array (  1955 => 1718,  1930 => 1696,  1842 => 1610,  1833 => 1603,  1831 => 1602,  1725 => 1499,  1712 => 1498,  1699 => 1495,  1686 => 1494,  1543 => 1361,  1539 => 1360,  1533 => 1357,  1529 => 1356,  1433 => 1263,  1429 => 1262,  1423 => 1259,  1419 => 1258,  1406 => 1248,  1400 => 1245,  1381 => 1229,  1349 => 1200,  1346 => 1199,  1335 => 1190,  1333 => 1189,  1156 => 1014,  1143 => 1013,  1130 => 1010,  1117 => 1009,  104 => 6,  91 => 5,  68 => 3,  45 => 1,);
  2012.     }
  2014.     public function getSourceContext(): Source
  2015.     {
  2016.         return new Source("{% extends 'Accueil/layoutAccueil.html.twig' %}
  2018. {% block title %}Connexion Parent — 5sur5séjour{% endblock %}
  2020. {% block stylesheets %}
  2021. {{ parent() }}
  2022. <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  2023. <style>
  2024. /* ========================================
  2025.    5SUR5 PARENT LOGIN - CLEAN TWO-COLUMN
  2026.    Stripe/Notion Quality · No Slider
  2027.    ======================================== */
  2029. :root {
  2030.     --pl-teal: #41A2AA;
  2031.     --pl-teal-dark: #359BA3;
  2032.     --pl-teal-light: rgba(65, 162, 170, 0.06);
  2033.     --pl-orange: #F09E7A;
  2034.     --pl-orange-dark: #E8865E;
  2035.     --pl-text: #1A1A2E;
  2036.     --pl-text-secondary: #5A6178;
  2037.     --pl-text-muted: #8E95A9;
  2038.     --pl-bg: #FFFFFF;
  2039.     --pl-bg-hero: #F8FAFB;
  2040.     --pl-border: #E5E9F0;
  2041.     --pl-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  2042.     --pl-radius: 16px;
  2043. }
  2045. * {
  2046.     box-sizing: border-box;
  2047. }
  2049. .pl-page {
  2050.     min-height: 100vh;
  2051.     display: flex;
  2052.     flex-direction: column;
  2053. }
  2055. /* ========================================
  2056.    MAIN CONTAINER - TWO COLUMNS
  2057.    ======================================== */
  2058. .pl-main {
  2059.     flex: 1;
  2060.     display: flex;
  2061.     min-height: calc(100vh - 160px);
  2062. }
  2064. /* ========================================
  2065.    LEFT COLUMN - HERO
  2066.    ======================================== */
  2067. .pl-hero {
  2068.     width: 35%;
  2069.     background: var(--pl-bg-hero);
  2070.     padding: 40px;
  2071.     display: flex;
  2072.     flex-direction: column;
  2073.     justify-content: center;
  2074.     position: relative;
  2075. }
  2077. .pl-hero-content {
  2078.     flex: 1;
  2079.     display: flex;
  2080.     flex-direction: column;
  2081.     justify-content: center;
  2082.     max-width: 420px;
  2083. }
  2085. .pl-hero h1 {
  2086.     font-size: 32px;
  2087.     font-weight: 700;
  2088.     color: var(--pl-text);
  2089.     line-height: 1.25;
  2090.     margin: 0 0 16px;
  2091.     letter-spacing: -0.02em;
  2092. }
  2094. .pl-hero-subtitle {
  2095.     font-size: 17px;
  2096.     color: var(--pl-text-secondary);
  2097.     line-height: 1.6;
  2098.     margin: 0 0 32px;
  2099. }
  2101. /* Features List - Premium Style */
  2102. .pl-features {
  2103.     list-style: none;
  2104.     padding: 0;
  2105.     margin: 0;
  2106.     display: flex;
  2107.     flex-direction: column;
  2108.     gap: 18px;
  2109. }
  2111. .pl-feature {
  2112.     display: flex;
  2113.     align-items: flex-start;
  2114.     gap: 14px;
  2115. }
  2117. .pl-feature-icon {
  2118.     width: 44px;
  2119.     height: 44px;
  2120.     border-radius: 12px;
  2121.     display: flex;
  2122.     align-items: center;
  2123.     justify-content: center;
  2124.     flex-shrink: 0;
  2125. }
  2127. .pl-feature-icon svg {
  2128.     width: 22px;
  2129.     height: 22px;
  2130.     color: #fff;
  2131. }
  2133. .pl-feature-icon.teal { background: var(--pl-teal); }
  2134. .pl-feature-icon.orange { background: var(--pl-orange); }
  2135. .pl-feature-icon.coral { background: #F56040; }
  2136. .pl-feature-icon.brown { background: #c47d5e; }
  2138. .pl-feature-text {
  2139.     padding-top: 2px;
  2140. }
  2142. .pl-feature-title {
  2143.     font-size: 14px;
  2144.     font-weight: 600;
  2145.     color: var(--pl-text);
  2146.     margin: 0 0 3px;
  2147. }
  2149. .pl-feature-desc {
  2150.     font-size: 13px;
  2151.     color: var(--pl-text-muted);
  2152.     margin: 0;
  2153.     line-height: 1.4;
  2154. }
  2156. /* Hero image */
  2157. .pl-hero-image {
  2158.     margin-top: auto;
  2159.     border-radius: 12px;
  2160.     overflow: hidden;
  2161. }
  2163. .pl-hero-image img {
  2164.     width: 100%;
  2165.     height: auto;
  2166.     display: block;
  2167.     border-radius: 12px;
  2168. }
  2170. /* Hero decorative illustration */
  2171. .pl-hero-illustration {
  2172.     margin-top: auto;
  2173.     padding-top: 40px;
  2174.     position: relative;
  2175. }
  2177. .pl-hero-illustration svg {
  2178.     width: 100%;
  2179.     max-width: 320px;
  2180.     height: auto;
  2181.     opacity: 0.9;
  2182. }
  2184. /* Floating badges */
  2185. .pl-floating-badges {
  2186.     position: absolute;
  2187.     inset: 0;
  2188.     pointer-events: none;
  2189. }
  2191. .pl-badge {
  2192.     position: absolute;
  2193.     background: #fff;
  2194.     border-radius: 12px;
  2195.     padding: 10px 14px;
  2196.     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  2197.     display: flex;
  2198.     align-items: center;
  2199.     gap: 10px;
  2200.     font-size: 13px;
  2201.     font-weight: 500;
  2202.     color: var(--pl-text);
  2203.     animation: plFloat 3s ease-in-out infinite;
  2204. }
  2206. .pl-badge-icon {
  2207.     width: 32px;
  2208.     height: 32px;
  2209.     border-radius: 8px;
  2210.     display: flex;
  2211.     align-items: center;
  2212.     justify-content: center;
  2213. }
  2215. .pl-badge-icon svg {
  2216.     width: 18px;
  2217.     height: 18px;
  2218.     color: #fff;
  2219. }
  2221. .pl-badge-icon.teal { background: var(--pl-teal); }
  2222. .pl-badge-icon.orange { background: var(--pl-orange); }
  2223. .pl-badge-icon.coral { background: #F56040; }
  2225. .pl-badge-1 {
  2226.     top: 20%;
  2227.     right: -10px;
  2228.     animation-delay: 0s;
  2229. }
  2231. .pl-badge-2 {
  2232.     bottom: 30%;
  2233.     left: -5px;
  2234.     animation-delay: 1s;
  2235. }
  2237. .pl-badge-3 {
  2238.     bottom: 10%;
  2239.     right: 10%;
  2240.     animation-delay: 2s;
  2241. }
  2243. @keyframes plFloat {
  2244.     0%, 100% { transform: translateY(0); }
  2245.     50% { transform: translateY(-8px); }
  2246. }
  2248. /* Entry animations */
  2249. .pl-hero-content {
  2250.     animation: plSlideRight 0.6s ease-out;
  2251. }
  2253. .pl-card {
  2254.     animation: plSlideUp 0.5s ease-out;
  2255. }
  2257. @keyframes plSlideRight {
  2258.     from { opacity: 0; transform: translateX(-20px); }
  2259.     to { opacity: 1; transform: translateX(0); }
  2260. }
  2262. @keyframes plSlideUp {
  2263.     from { opacity: 0; transform: translateY(20px); }
  2264.     to { opacity: 1; transform: translateY(0); }
  2265. }
  2267. /* Feature items staggered animation */
  2268. .pl-feature {
  2269.     opacity: 0;
  2270.     animation: plFadeIn 0.4s ease forwards;
  2271. }
  2273. .pl-feature:nth-child(1) { animation-delay: 0.1s; }
  2274. .pl-feature:nth-child(2) { animation-delay: 0.2s; }
  2275. .pl-feature:nth-child(3) { animation-delay: 0.3s; }
  2276. .pl-feature:nth-child(4) { animation-delay: 0.4s; }
  2278. /* ========================================
  2279.    RIGHT COLUMN - FORM
  2280.    ======================================== */
  2281. .pl-form-section {
  2282.     width: 58%;
  2283.     display: flex;
  2284.     align-items: center;
  2285.     justify-content: center;
  2286.     padding: 40px;
  2287.     background: var(--pl-bg);
  2288. }
  2290. .pl-card {
  2291.     width: 100%;
  2292.     max-width: 420px;
  2293.     background: var(--pl-bg);
  2294.     border-radius: var(--pl-radius);
  2295.     box-shadow: var(--pl-shadow);
  2296.     border: 1px solid var(--pl-border);
  2297.     overflow: hidden;
  2298. }
  2300. /* Tabs */
  2301. .pl-tabs {
  2302.     display: flex;
  2303.     border-bottom: 1px solid var(--pl-border);
  2304. }
  2306. .pl-tab {
  2307.     flex: 1;
  2308.     padding: 18px 16px;
  2309.     font-size: 14px;
  2310.     font-weight: 600;
  2311.     color: var(--pl-text-muted);
  2312.     background: var(--pl-bg-hero);
  2313.     border: none;
  2314.     cursor: pointer;
  2315.     position: relative;
  2316.     transition: all 0.2s ease;
  2317. }
  2319. .pl-tab:hover {
  2320.     color: var(--pl-text-secondary);
  2321. }
  2323. .pl-tab.active {
  2324.     color: var(--pl-teal);
  2325.     background: var(--pl-bg);
  2326. }
  2328. .pl-tab.active::after {
  2329.     content: '';
  2330.     position: absolute;
  2331.     bottom: -1px;
  2332.     left: 0;
  2333.     right: 0;
  2334.     height: 2px;
  2335.     background: var(--pl-teal);
  2336. }
  2338. .pl-tab:focus-visible {
  2339.     outline: 2px solid var(--pl-teal);
  2340.     outline-offset: -2px;
  2341. }
  2343. .pl-btn:focus-visible,
  2344. .pl-social-btn:focus-visible {
  2345.     outline: 2px solid var(--pl-teal);
  2346.     outline-offset: 2px;
  2347. }
  2349. /* Tab panels */
  2350. .pl-panel {
  2351.     padding: 28px;
  2352.     display: none;
  2353. }
  2355. .pl-panel.active {
  2356.     display: block;
  2357.     animation: plFadeIn 0.25s ease;
  2358. }
  2360. @keyframes plFadeIn {
  2361.     from { opacity: 0; transform: translateY(6px); }
  2362.     to { opacity: 1; transform: translateY(0); }
  2363. }
  2365. /* Form elements */
  2366. .pl-form-group {
  2367.     margin-bottom: 18px;
  2368. }
  2370. .pl-label {
  2371.     display: block;
  2372.     font-size: 13px;
  2373.     font-weight: 500;
  2374.     color: var(--pl-text);
  2375.     margin-bottom: 6px;
  2376. }
  2378. .pl-input {
  2379.     width: 100%;
  2380.     padding: 12px 14px;
  2381.     font-size: 15px;
  2382.     font-family: inherit;
  2383.     color: var(--pl-text);
  2384.     background: var(--pl-bg);
  2385.     border: 1px solid var(--pl-border);
  2386.     border-radius: 8px;
  2387.     transition: all 0.2s ease;
  2388.     outline: none;
  2389. }
  2391. .pl-input::placeholder {
  2392.     color: var(--pl-text-muted);
  2393. }
  2395. .pl-input:hover {
  2396.     border-color: #D0D6E0;
  2397. }
  2399. .pl-input:focus {
  2400.     border-color: var(--pl-teal);
  2401.     box-shadow: 0 0 0 3px var(--pl-teal-light);
  2402. }
  2404. .pl-input.is-invalid {
  2405.     border-color: #EF4444;
  2406.     background: #FEF2F2;
  2407. }
  2409. .pl-input.is-valid {
  2410.     border-color: #10B981;
  2411.     background: rgba(16, 185, 129, 0.04);
  2412. }
  2414. .pl-hint {
  2415.     font-size: 12px;
  2416.     color: var(--pl-text-muted);
  2417.     margin-top: 5px;
  2418.     display: flex;
  2419.     align-items: center;
  2420.     gap: 4px;
  2421. }
  2423. /* Password wrapper */
  2424. .pl-password-wrap {
  2425.     position: relative;
  2426. }
  2428. .pl-password-wrap .pl-input {
  2429.     padding-right: 44px;
  2430. }
  2432. .pl-eye-btn {
  2433.     position: absolute;
  2434.     right: 12px;
  2435.     top: 50%;
  2436.     transform: translateY(-50%);
  2437.     background: none;
  2438.     border: none;
  2439.     padding: 4px;
  2440.     cursor: pointer;
  2441.     color: var(--pl-text-muted);
  2442.     transition: color 0.2s ease;
  2443. }
  2445. .pl-eye-btn:hover {
  2446.     color: var(--pl-teal);
  2447. }
  2449. /* Row for name fields */
  2450. .pl-row {
  2451.     display: flex;
  2452.     gap: 12px;
  2453. }
  2455. .pl-row .pl-form-group {
  2456.     flex: 1;
  2457. }
  2459. /* Primary button */
  2460. .pl-btn {
  2461.     width: 100%;
  2462.     padding: 14px 20px;
  2463.     font-size: 15px;
  2464.     font-weight: 600;
  2465.     font-family: inherit;
  2466.     color: #FFF;
  2467.     background: linear-gradient(135deg, var(--pl-teal) 0%, var(--pl-teal-dark) 100%);
  2468.     border: none;
  2469.     border-radius: 8px;
  2470.     cursor: pointer;
  2471.     transition: all 0.2s ease, transform 0.15s ease;
  2472.     box-shadow: 0 2px 8px rgba(65, 162, 170, 0.3);
  2473. }
  2475. .pl-btn:hover {
  2476.     background: linear-gradient(135deg, var(--pl-teal-dark) 0%, #2E8E96 100%);
  2477.     box-shadow: 0 4px 16px rgba(65, 162, 170, 0.4);
  2478.     transform: translateY(-1px);
  2479. }
  2481. .pl-btn:active {
  2482.     transform: scale(0.98);
  2483. }
  2485. .pl-btn:disabled {
  2486.     opacity: 0.7;
  2487.     cursor: not-allowed;
  2488. }
  2490. .pl-btn-secondary {
  2491.     background: linear-gradient(135deg, var(--pl-orange) 0%, var(--pl-orange-dark) 100%);
  2492.     box-shadow: 0 2px 8px rgba(240, 158, 122, 0.3);
  2493. }
  2495. .pl-btn-secondary:hover {
  2496.     background: linear-gradient(135deg, var(--pl-orange-dark) 0%, #D67A50 100%);
  2497.     box-shadow: 0 4px 16px rgba(240, 158, 122, 0.4);
  2498. }
  2500. /* Button loading state */
  2501. .pl-btn-loading {
  2502.     position: relative;
  2503.     color: transparent !important;
  2504. }
  2506. .pl-btn-loading::after {
  2507.     content: '';
  2508.     position: absolute;
  2509.     width: 20px;
  2510.     height: 20px;
  2511.     top: 50%;
  2512.     left: 50%;
  2513.     margin-left: -10px;
  2514.     margin-top: -10px;
  2515.     border: 2px solid rgba(255,255,255,0.3);
  2516.     border-top-color: #fff;
  2517.     border-radius: 50%;
  2518.     animation: plSpin 0.6s linear infinite;
  2519. }
  2521. /* Forgot link */
  2522. .pl-forgot {
  2523.     display: inline-block;
  2524.     font-size: 13px;
  2525.     color: var(--pl-orange);
  2526.     margin-top: 12px;
  2527.     text-decoration: none;
  2528.     transition: color 0.2s ease;
  2529. }
  2531. .pl-forgot:hover {
  2532.     color: var(--pl-orange-dark);
  2533.     text-decoration: underline;
  2534. }
  2536. /* Divider */
  2537. .pl-divider {
  2538.     display: flex;
  2539.     align-items: center;
  2540.     margin: 24px 0;
  2541.     gap: 14px;
  2542. }
  2544. .pl-divider-line {
  2545.     flex: 1;
  2546.     height: 1px;
  2547.     background: var(--pl-border);
  2548. }
  2550. .pl-divider-text {
  2551.     font-size: 12px;
  2552.     font-weight: 500;
  2553.     color: var(--pl-text-muted);
  2554.     text-transform: uppercase;
  2555.     letter-spacing: 0.04em;
  2556. }
  2558. /* Social buttons */
  2559. .pl-socials {
  2560.     display: flex;
  2561.     flex-direction: column;
  2562.     gap: 10px;
  2563. }
  2565. .pl-social-btn {
  2566.     width: 100%;
  2567.     padding: 11px 16px;
  2568.     font-size: 14px;
  2569.     font-weight: 500;
  2570.     font-family: inherit;
  2571.     border-radius: 8px;
  2572.     cursor: pointer;
  2573.     transition: all 0.2s ease, transform 0.15s ease;
  2574.     display: flex;
  2575.     align-items: center;
  2576.     justify-content: center;
  2577.     gap: 10px;
  2578.     text-decoration: none;
  2579. }
  2581. .pl-social-btn img {
  2582.     width: 18px;
  2583.     height: 18px;
  2584. }
  2586. .pl-social-google {
  2587.     background: var(--pl-bg);
  2588.     color: var(--pl-text);
  2589.     border: 1px solid var(--pl-border);
  2590. }
  2592. .pl-social-google:hover {
  2593.     background: var(--pl-bg-hero);
  2594.     border-color: #D0D6E0;
  2595. }
  2597. .pl-social-facebook {
  2598.     background: #1877F2;
  2599.     color: #FFF;
  2600.     border: 1px solid #1877F2;
  2601. }
  2603. .pl-social-facebook:hover {
  2604.     background: #166FE5;
  2605.     transform: translateY(-1px);
  2606.     box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
  2607. }
  2609. .pl-social-google:hover {
  2610.     transform: translateY(-1px);
  2611.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  2612. }
  2614. /* Notification prefs (compact) */
  2615. .pl-notif-box {
  2616.     background: var(--pl-bg-hero);
  2617.     border-radius: 8px;
  2618.     padding: 12px 14px;
  2619.     margin-bottom: 18px;
  2620. }
  2622. .pl-notif-label {
  2623.     font-size: 12px;
  2624.     font-weight: 500;
  2625.     color: var(--pl-text-secondary);
  2626.     margin-bottom: 8px;
  2627. }
  2629. .pl-notif-opts {
  2630.     display: flex;
  2631.     gap: 20px;
  2632. }
  2634. .pl-checkbox {
  2635.     display: flex;
  2636.     align-items: center;
  2637.     gap: 6px;
  2638.     font-size: 13px;
  2639.     color: var(--pl-text);
  2640.     cursor: pointer;
  2641. }
  2643. .pl-checkbox input {
  2644.     width: 16px;
  2645.     height: 16px;
  2646.     accent-color: var(--pl-teal);
  2647.     cursor: pointer;
  2648. }
  2650. /* Form note */
  2651. .pl-note {
  2652.     font-size: 12px;
  2653.     color: var(--pl-text-muted);
  2654.     text-align: center;
  2655.     margin-top: 14px;
  2656.     line-height: 1.5;
  2657. }
  2659. /* CGU / RGPD consent block */
  2660. .pl-consent-box {
  2661.     background: var(--pl-bg-hero);
  2662.     border: 1px solid var(--pl-border);
  2663.     border-radius: 10px;
  2664.     padding: 14px 16px;
  2665.     margin-bottom: 18px;
  2666.     transition: border-color 0.2s ease;
  2667. }
  2668. .pl-consent-box.is-invalid {
  2669.     border-color: #EF4444;
  2670.     background: #FEF2F2;
  2671. }
  2672. .pl-consent-box .pl-checkbox {
  2673.     font-size: 13px;
  2674.     line-height: 1.5;
  2675.     align-items: flex-start;
  2676. }
  2677. .pl-consent-box .pl-checkbox input {
  2678.     margin-top: 2px;
  2679.     flex-shrink: 0;
  2680. }
  2681. .pl-consent-link {
  2682.     color: var(--pl-teal);
  2683.     text-decoration: underline;
  2684.     cursor: pointer;
  2685.     font-weight: 500;
  2686.     transition: color 0.2s ease;
  2687. }
  2688. .pl-consent-link:hover {
  2689.     color: var(--pl-teal-dark);
  2690. }
  2691. .pl-consent-hint {
  2692.     font-size: 11px;
  2693.     color: var(--pl-text-muted);
  2694.     margin-top: 6px;
  2695.     padding-left: 22px;
  2696.     display: flex;
  2697.     align-items: center;
  2698.     gap: 4px;
  2699. }
  2701. /* CGU modal overlay */
  2702. .pl-modal-overlay {
  2703.     position: fixed;
  2704.     inset: 0;
  2705.     background: rgba(0,0,0,0.5);
  2706.     z-index: 10000;
  2707.     display: none;
  2708.     align-items: center;
  2709.     justify-content: center;
  2710.     padding: 20px;
  2711.     animation: plFadeIn 0.2s ease;
  2712. }
  2713. .pl-modal-overlay.active {
  2714.     display: flex;
  2715. }
  2716. .pl-modal {
  2717.     background: #fff;
  2718.     border-radius: 16px;
  2719.     box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  2720.     max-width: 640px;
  2721.     width: 100%;
  2722.     max-height: 80vh;
  2723.     display: flex;
  2724.     flex-direction: column;
  2725.     overflow: hidden;
  2726. }
  2727. .pl-modal-header {
  2728.     display: flex;
  2729.     align-items: center;
  2730.     justify-content: space-between;
  2731.     padding: 18px 24px;
  2732.     border-bottom: 1px solid var(--pl-border);
  2733.     flex-shrink: 0;
  2734. }
  2735. .pl-modal-header h3 {
  2736.     font-size: 16px;
  2737.     font-weight: 700;
  2738.     color: var(--pl-text);
  2739.     margin: 0;
  2740. }
  2741. .pl-modal-close {
  2742.     width: 32px;
  2743.     height: 32px;
  2744.     border-radius: 8px;
  2745.     border: none;
  2746.     background: var(--pl-bg-hero);
  2747.     cursor: pointer;
  2748.     display: flex;
  2749.     align-items: center;
  2750.     justify-content: center;
  2751.     color: var(--pl-text-secondary);
  2752.     transition: all 0.2s ease;
  2753. }
  2754. .pl-modal-close:hover {
  2755.     background: #EEF0F4;
  2756.     color: var(--pl-text);
  2757. }
  2758. .pl-modal-body {
  2759.     padding: 24px;
  2760.     overflow-y: auto;
  2761.     font-size: 13px;
  2762.     line-height: 1.7;
  2763.     color: var(--pl-text-secondary);
  2764. }
  2765. .pl-modal-body h4 {
  2766.     font-size: 14px;
  2767.     font-weight: 600;
  2768.     color: var(--pl-text);
  2769.     margin: 18px 0 8px;
  2770. }
  2771. .pl-modal-body h4:first-child {
  2772.     margin-top: 0;
  2773. }
  2774. .pl-modal-body ul {
  2775.     padding-left: 20px;
  2776.     margin: 8px 0;
  2777. }
  2778. .pl-modal-body ul li {
  2779.     margin-bottom: 4px;
  2780. }
  2781. .pl-modal-footer {
  2782.     padding: 14px 24px;
  2783.     border-top: 1px solid var(--pl-border);
  2784.     display: flex;
  2785.     justify-content: flex-end;
  2786.     flex-shrink: 0;
  2787. }
  2788. .pl-modal-footer .pl-btn {
  2789.     width: auto;
  2790.     padding: 10px 28px;
  2791.     font-size: 13px;
  2792. }
  2795. .pl-input-code {
  2796.     font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  2797.     font-size: 18px;
  2798.     font-weight: 600;
  2799.     letter-spacing: 2px;
  2800.     text-transform: uppercase;
  2801.     text-align: center;
  2802.     padding: 14px 16px;
  2803.     background: linear-gradient(135deg, rgba(65, 162, 170, 0.04), rgba(240, 158, 122, 0.04));
  2804.     border: 2px solid var(--pl-border);
  2805. }
  2807. .pl-input-code:focus {
  2808.     border-color: var(--pl-teal);
  2809.     background: var(--pl-bg);
  2810. }
  2812. .pl-input-code::placeholder {
  2813.     font-weight: 400;
  2814.     letter-spacing: 1px;
  2815.     color: var(--pl-text-muted);
  2816. }
  2818. .pl-optional {
  2819.     font-weight: 400;
  2820.     color: var(--pl-text-muted);
  2821. }
  2823. .pl-required {
  2824.     color: #EF4444;
  2825.     margin-left: 2px;
  2826. }
  2828. /* Error alert */
  2829. .pl-error {
  2830.     background: #FEF2F2;
  2831.     border: 1px solid #FECACA;
  2832.     border-radius: 8px;
  2833.     padding: 12px 14px;
  2834.     margin-bottom: 18px;
  2835.     font-size: 13px;
  2836.     color: #991B1B;
  2837.     display: flex;
  2838.     align-items: center;
  2839.     gap: 8px;
  2840. }
  2842. .pl-error svg {
  2843.     flex-shrink: 0;
  2844.     color: #EF4444;
  2845. }
  2847. /* ========================================
  2848.    FOOTER TRUST BAR
  2849.    ======================================== */
  2850. .pl-footer-trust {
  2851.     background: var(--pl-bg-hero);
  2852.     border-top: 1px solid var(--pl-border);
  2853.     padding: 16px 24px;
  2854.     display: flex;
  2855.     justify-content: center;
  2856.     gap: 32px;
  2857. }
  2859. .pl-footer-item {
  2860.     display: flex;
  2861.     align-items: center;
  2862.     gap: 8px;
  2863.     font-size: 12px;
  2864.     color: var(--pl-text-muted);
  2865. }
  2867. .pl-footer-item svg {
  2868.     width: 16px;
  2869.     height: 16px;
  2870.     color: var(--pl-teal);
  2871. }
  2873. /* ========================================
  2874.    LOADER
  2875.    ======================================== */
  2876. .pl-loader {
  2877.     position: fixed;
  2878.     inset: 0;
  2879.     background: rgba(255,255,255,0.95);
  2880.     z-index: 9999;
  2881.     display: none;
  2882.     align-items: center;
  2883.     justify-content: center;
  2884. }
  2886. .pl-loader.active {
  2887.     display: flex;
  2888. }
  2890. .pl-loader-inner {
  2891.     text-align: center;
  2892. }
  2894. .pl-spinner {
  2895.     width: 40px;
  2896.     height: 40px;
  2897.     border: 3px solid var(--pl-border);
  2898.     border-top-color: var(--pl-teal);
  2899.     border-radius: 50%;
  2900.     animation: plSpin 0.7s linear infinite;
  2901. }
  2903. @keyframes plSpin {
  2904.     to { transform: rotate(360deg); }
  2905. }
  2907. .pl-loader-text {
  2908.     margin-top: 16px;
  2909.     font-size: 15px;
  2910.     font-weight: 600;
  2911.     color: var(--pl-text);
  2912. }
  2914. .pl-loader-sub {
  2915.     margin-top: 6px;
  2916.     font-size: 13px;
  2917.     color: var(--pl-text-secondary);
  2918. }
  2920. /* ========================================
  2921.    RESPONSIVE - MOBILE
  2922.    ======================================== */
  2923. @media (max-width: 900px) {
  2924.     .pl-main {
  2925.         flex-direction: column;
  2926.         min-height: auto;
  2927.     }
  2929.     .pl-hero {
  2930.         width: 100%;
  2931.         padding: 32px 24px;
  2932.     }
  2934.     .pl-hero-content {
  2935.         max-width: 100%;
  2936.         animation: none;
  2937.     }
  2939.     .pl-hero h1 {
  2940.         font-size: 26px;
  2941.     }
  2943.     .pl-hero-subtitle {
  2944.         font-size: 15px;
  2945.         margin-bottom: 24px;
  2946.     }
  2948.     .pl-features {
  2949.         gap: 14px;
  2950.     }
  2952.     .pl-feature {
  2953.         animation: none;
  2954.         opacity: 1;
  2955.     }
  2957.     .pl-feature-icon {
  2958.         width: 38px;
  2959.         height: 38px;
  2960.     }
  2962.     .pl-feature-icon svg {
  2963.         width: 18px;
  2964.         height: 18px;
  2965.     }
  2967.     .pl-feature-title {
  2968.         font-size: 13px;
  2969.     }
  2971.     .pl-feature-desc {
  2972.         font-size: 12px;
  2973.     }
  2975.     .pl-hero-illustration {
  2976.         display: none;
  2977.     }
  2979.     .pl-form-section {
  2980.         width: 100%;
  2981.         padding: 24px 16px 40px;
  2982.     }
  2984.     .pl-card {
  2985.         max-width: 100%;
  2986.         box-shadow: none;
  2987.         border: none;
  2988.         animation: none;
  2989.     }
  2991.     .pl-panel {
  2992.         padding: 24px 20px;
  2993.     }
  2995.     .pl-row {
  2996.         flex-direction: column;
  2997.         gap: 0;
  2998.     }
  3000.     .pl-footer-trust {
  3001.         flex-wrap: wrap;
  3002.         gap: 16px 24px;
  3003.         justify-content: center;
  3004.     }
  3005. }
  3007. @media (max-width: 480px) {
  3008.     .pl-hero {
  3009.         padding: 24px 20px;
  3010.     }
  3012.     .pl-hero h1 {
  3013.         font-size: 22px;
  3014.     }
  3016.     .pl-tab {
  3017.         padding: 14px 12px;
  3018.         font-size: 13px;
  3019.     }
  3020. }
  3021. </style>
  3022. {% endblock %}
  3024. {% block Header %}
  3025. {{ parent() }}
  3026. {% endblock %}
  3028. {% block Content %}
  3029. <div class=\"pl-page\">
  3030.     <!-- Loader -->
  3031.     <div class=\"pl-loader\" id=\"plLoader\">
  3032.         <div class=\"pl-loader-inner\">
  3033.             <div class=\"pl-spinner\"></div>
  3034.             <p class=\"pl-loader-text\">Création de votre compte...</p>
  3035.             <p class=\"pl-loader-sub\">Préparation de votre espace parent</p>
  3036.         </div>
  3037.     </div>
  3039.     <!-- Main two-column layout -->
  3040.     <main class=\"pl-main\">
  3041.         <!-- LEFT: Hero -->
  3042.         <section class=\"pl-hero\">
  3043.             <div class=\"pl-hero-content\">
  3044.                 <h1>Suivez le séjour de votre enfant en toute sérénité.</h1>
  3045.                 <p class=\"pl-hero-subtitle\">Photos, vidéos et messages vocaux, dans un espace privé réservé aux familles.</p>
  3047.                 <ul class=\"pl-features\">
  3048.                     <li class=\"pl-feature\">
  3049.                         <span class=\"pl-feature-icon orange\">
  3050.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3051.                                 <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>
  3052.                                 <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  3053.                                 <polyline points=\"21 15 16 10 5 21\"/>
  3054.                             </svg>
  3055.                         </span>
  3056.                         <div class=\"pl-feature-text\">
  3057.                             <p class=\"pl-feature-title\">Photos & vidéos en direct</p>
  3058.                             <p class=\"pl-feature-desc\">Visualisez les moments du séjour en toute confidentialité</p>
  3059.                         </div>
  3060.                     </li>
  3061.                     <li class=\"pl-feature\">
  3062.                         <span class=\"pl-feature-icon teal\">
  3063.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3064.                                 <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\"/>
  3065.                             </svg>
  3066.                         </span>
  3067.                         <div class=\"pl-feature-text\">
  3068.                             <p class=\"pl-feature-title\">Messages vocaux</p>
  3069.                             <p class=\"pl-feature-desc\">Accédez à l’ensemble des messages vocaux enregistrés, en illimité.</p>
  3070.                         </div>
  3071.                     </li>
  3072.                     <li class=\"pl-feature\">
  3073.                         <span class=\"pl-feature-icon coral\">
  3074.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3075.                                 <path d=\"M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6\"/>
  3076.                                 <rect x=\"6\" y=\"5\" width=\"12\" height=\"7\"/>
  3077.                                 <path d=\"M12 3v5\"/>
  3078.                             </svg>
  3079.                         </span>
  3080.                         <div class=\"pl-feature-text\">
  3081.                             <p class=\"pl-feature-title\">Souvenirs personnalisés</p>
  3082.                             <p class=\"pl-feature-desc\">Créez albums, livres et cadeaux uniques du séjour</p>
  3083.                         </div>
  3084.                     </li>
  3085.                     <li class=\"pl-feature\">
  3086.                         <span class=\"pl-feature-icon brown\">
  3087.                             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3088.                                 <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>
  3089.                                 <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>
  3090.                             </svg>
  3091.                         </span>
  3092.                         <div class=\"pl-feature-text\">
  3093.                             <p class=\"pl-feature-title\">Notifications instantanées</p>
  3094.                             <p class=\"pl-feature-desc\">Restez informé à chaque nouvelle publication</p>
  3095.                         </div>
  3096.                     </li>
  3097.                 </ul>
  3099.                 <!-- Decorative illustration -->
  3100.                 <div class=\"pl-hero-illustration\">
  3101.                     <svg viewBox=\"0 0 400 280\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">
  3102.                         <!-- Background shapes -->
  3103.                         <ellipse cx=\"200\" cy=\"250\" rx=\"180\" ry=\"20\" fill=\"#E5E9F0\" opacity=\"0.5\"/>
  3104.                         
  3105.                         <!-- Phone mockup -->
  3106.                         <rect x=\"140\" y=\"30\" width=\"120\" height=\"200\" rx=\"16\" fill=\"#1A1A2E\"/>
  3107.                         <rect x=\"146\" y=\"40\" width=\"108\" height=\"180\" rx=\"12\" fill=\"#fff\"/>
  3108.                         
  3109.                         <!-- Phone content - photos grid -->
  3110.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"#F09E7A\" opacity=\"0.3\"/>
  3111.                         <rect x=\"152\" y=\"55\" width=\"48\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad1)\"/>
  3112.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"#41A2AA\" opacity=\"0.3\"/>
  3113.                         <rect x=\"204\" y=\"55\" width=\"44\" height=\"48\" rx=\"6\" fill=\"url(#imgGrad2)\"/>
  3114.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"#F56040\" opacity=\"0.2\"/>
  3115.                         <rect x=\"152\" y=\"107\" width=\"96\" height=\"60\" rx=\"6\" fill=\"url(#imgGrad3)\"/>
  3116.                         
  3117.                         <!-- Photo icons -->
  3118.                         <circle cx=\"176\" cy=\"79\" r=\"12\" fill=\"#F09E7A\"/>
  3119.                         <path d=\"M170 82l4-5 3 3 5-6 6 8H170z\" fill=\"#fff\"/>
  3120.                         <circle cx=\"226\" cy=\"79\" r=\"10\" fill=\"#41A2AA\"/>
  3121.                         <polygon points=\"221,82 226,74 231,82\" fill=\"#fff\"/>
  3122.                         
  3123.                         <!-- Play button on video -->
  3124.                         <circle cx=\"200\" cy=\"137\" r=\"14\" fill=\"rgba(255,255,255,0.9)\"/>
  3125.                         <polygon points=\"196,131 196,143 208,137\" fill=\"#F56040\"/>
  3126.                         
  3127.                         <!-- Notification bar -->
  3128.                         <rect x=\"152\" y=\"175\" width=\"96\" height=\"38\" rx=\"8\" fill=\"#F8FAFB\"/>
  3129.                         <circle cx=\"168\" cy=\"194\" r=\"10\" fill=\"#41A2AA\"/>
  3130.                         <path d=\"M165 194l2 2 4-4\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>
  3131.                         <rect x=\"184\" y=\"188\" width=\"50\" height=\"6\" rx=\"3\" fill=\"#E5E9F0\"/>
  3132.                         <rect x=\"184\" y=\"198\" width=\"35\" height=\"4\" rx=\"2\" fill=\"#E5E9F0\"/>
  3133.                         
  3134.                         <!-- Phone notch -->
  3135.                         <rect x=\"175\" y=\"34\" width=\"50\" height=\"4\" rx=\"2\" fill=\"#1A1A2E\"/>
  3136.                         
  3137.                         <!-- Decorative elements around -->
  3138.                         <circle cx=\"80\" cy=\"80\" r=\"8\" fill=\"#F09E7A\" opacity=\"0.6\"/>
  3139.                         <circle cx=\"320\" cy=\"100\" r=\"6\" fill=\"#41A2AA\" opacity=\"0.5\"/>
  3140.                         <circle cx=\"340\" cy=\"180\" r=\"10\" fill=\"#F56040\" opacity=\"0.4\"/>
  3141.                         <circle cx=\"60\" cy=\"180\" r=\"5\" fill=\"#41A2AA\" opacity=\"0.4\"/>
  3142.                         
  3143.                         <!-- Hearts/love -->
  3144.                         <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\"/>
  3145.                         
  3146.                         <!-- Stars -->
  3147.                         <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\"/>
  3148.                         <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\"/>
  3149.                         
  3150.                         <!-- Gradients -->
  3151.                         <defs>
  3152.                             <linearGradient id=\"imgGrad1\" x1=\"152\" y1=\"55\" x2=\"200\" y2=\"103\">
  3153.                                 <stop offset=\"0%\" stop-color=\"#F09E7A\" stop-opacity=\"0.4\"/>
  3154.                                 <stop offset=\"100%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  3155.                             </linearGradient>
  3156.                             <linearGradient id=\"imgGrad2\" x1=\"204\" y1=\"55\" x2=\"248\" y2=\"103\">
  3157.                                 <stop offset=\"0%\" stop-color=\"#41A2AA\" stop-opacity=\"0.4\"/>
  3158.                                 <stop offset=\"100%\" stop-color=\"#359BA3\" stop-opacity=\"0.3\"/>
  3159.                             </linearGradient>
  3160.                             <linearGradient id=\"imgGrad3\" x1=\"152\" y1=\"107\" x2=\"248\" y2=\"167\">
  3161.                                 <stop offset=\"0%\" stop-color=\"#F56040\" stop-opacity=\"0.3\"/>
  3162.                                 <stop offset=\"100%\" stop-color=\"#F09E7A\" stop-opacity=\"0.2\"/>
  3163.                             </linearGradient>
  3164.                         </defs>
  3165.                     </svg>
  3166.                     
  3167.                     <!-- Floating notification badges -->
  3168.                     <div class=\"pl-floating-badges\">
  3169.                         <div class=\"pl-badge pl-badge-1\">
  3170.                             <span class=\"pl-badge-icon orange\">
  3171.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3172.                                     <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>
  3173.                                     <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>
  3174.                                     <polyline points=\"21 15 16 10 5 21\"/>
  3175.                                 </svg>
  3176.                             </span>
  3177.                             <span>+12 photos</span>
  3178.                         </div>
  3179.                         <div class=\"pl-badge pl-badge-2\">
  3180.                             <span class=\"pl-badge-icon teal\">
  3181.                                 <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3182.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>
  3183.                                     <polyline points=\"22 4 12 14.01 9 11.01\"/>
  3184.                                 </svg>
  3185.                             </span>
  3186.                             <span>Bien arrivés !</span>
  3187.                         </div>
  3188.                     </div>
  3189.                 </div>
  3190.             </div>
  3191.         </section>
  3193.         <!-- RIGHT: Form -->
  3194.         <section class=\"pl-form-section\">
  3195.             <div class=\"pl-card\">
  3196.                 <!-- Tabs -->
  3197.                 <div class=\"pl-tabs\" role=\"tablist\">
  3198.                     <button class=\"pl-tab active\" role=\"tab\" data-tab=\"login\" aria-selected=\"true\">Se connecter</button>
  3199.                     <button class=\"pl-tab\" role=\"tab\" data-tab=\"register\" aria-selected=\"false\">Créer un compte</button>
  3200.                 </div>
  3202.                 <!-- LOGIN PANEL -->
  3203.                 <div class=\"pl-panel active\" id=\"panel-login\" role=\"tabpanel\">
  3204.                     {% if error %}
  3205.                     <div class=\"pl-error\">
  3206.                         <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3207.                             <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  3208.                             <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>
  3209.                             <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>
  3210.                         </svg>
  3211.                         Identifiant ou mot de passe incorrect.
  3212.                     </div>
  3213.                     {% endif %}
  3215.                     <form method=\"post\" action=\"{{ path('app_back_Parent') }}\" id=\"loginForm\" autocomplete=\"off\">
  3216.                         <!-- Code Séjour - Required for direct access -->
  3217.                         <div class=\"pl-form-group\">
  3218.                             <label class=\"pl-label\">
  3219.                                 Code séjour
  3220.                                 <span class=\"pl-required\">*</span>
  3221.                             </label>
  3222.                             <input type=\"text\" 
  3223.                                 class=\"pl-input pl-input-code\" 
  3224.                                 name=\"code_sejour\" 
  3225.                                 id=\"loginCode\" 
  3226.                                 placeholder=\"   XX000000\"
  3227.                                 maxlength=\"8\"
  3228.                                 autocomplete=\"one-time-code\"
  3229.                                 data-lpignore=\"true\"
  3230.                                 data-form-type=\"other\"
  3231.                                 required>
  3232.                             <p class=\"pl-hint\">
  3233.                                 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3234.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  3235.                                     <path d=\"M12 16v-4\"/>
  3236.                                     <path d=\"M12 8h.01\"/>
  3237.                                 </svg>
  3238.                                 Code reçu par l'école ou l'organisateur du séjour
  3239.                             </p>
  3240.                         </div>
  3242.                         <div class=\"pl-form-group\">
  3243.                             <label class=\"pl-label\">Adresse e-mail</label>
  3244.                             <input type=\"email\" class=\"pl-input\" name=\"email\" id=\"loginEmail\" value=\"{{ last_username }}\" placeholder=\"votre@email.com\" autocomplete=\"username\" required>
  3245.                         </div>
  3247.                         <div class=\"pl-form-group\">
  3248.                             <label class=\"pl-label\">Mot de passe</label>
  3249.                             <div class=\"pl-password-wrap\">
  3250.                                 <input type=\"password\" class=\"pl-input\" name=\"password\" id=\"loginPwd\" placeholder=\"••••••••\" autocomplete=\"current-password\" required>
  3251.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"loginPwd\" aria-label=\"Afficher\">
  3252.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3253.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  3254.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  3255.                                     </svg>
  3256.                                 </button>
  3257.                             </div>
  3258.                         </div>
  3260.                         <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  3262.                         <button type=\"submit\" class=\"pl-btn\">Se connecter</button>
  3263.                         <a href=\"{{ path('forgotPassparent') }}\" class=\"pl-forgot\">Vous avez oublié votre mot de passe ?</a>
  3264.                     </form>
  3266.                     <div class=\"pl-divider\">
  3267.                         <span class=\"pl-divider-line\"></span>
  3268.                         <span class=\"pl-divider-text\">ou</span>
  3269.                         <span class=\"pl-divider-line\"></span>
  3270.                     </div>
  3272.                     <div class=\"pl-socials\">
  3273.                         <a href=\"{{ path('connect_google_start') }}\" class=\"pl-social-btn pl-social-google\">
  3274.                             <img src=\"{{ asset('/images/icons-google.png') }}\" alt=\"\">
  3275.                             Continuer avec Google
  3276.                         </a>
  3277.                         <a href=\"{{ path('connect_facebook_start') }}\" class=\"pl-social-btn pl-social-facebook\">
  3278.                             <img src=\"{{ asset('/images/icons-facebook.png') }}\" alt=\"\">
  3279.                             Continuer avec Facebook
  3280.                         </a>
  3281.                     </div>
  3282.                 </div>
  3284.                 <!-- REGISTER PANEL -->
  3285.                 <div class=\"pl-panel\" id=\"panel-register\" role=\"tabpanel\">
  3286.                     <form id=\"registerForm\" onsubmit=\"return false;\" autocomplete=\"off\">
  3287.                      
  3288.                         <div class=\"pl-row\">
  3289.                             <div class=\"pl-form-group\">
  3290.                                 <label class=\"pl-label\">Nom</label>
  3291.                                 <input type=\"text\" class=\"pl-input\" id=\"regNom\" name=\"family-name\" placeholder=\"Votre nom\" autocomplete=\"family-name\" required>
  3292.                             </div>
  3293.                             <div class=\"pl-form-group\">
  3294.                                 <label class=\"pl-label\">Prénom</label>
  3295.                                 <input type=\"text\" class=\"pl-input\" id=\"regPrenom\" name=\"given-name\" placeholder=\"Votre prénom\" autocomplete=\"given-name\" required>
  3296.                             </div>
  3297.                         </div>
  3299.                         <div class=\"pl-form-group\">
  3300.                             <label class=\"pl-label\">Adresse e-mail</label>
  3301.                             <input type=\"email\" class=\"pl-input\" id=\"regEmail\" name=\"email\" placeholder=\"votre@email.com\" autocomplete=\"email\" required>
  3302.                         </div>
  3304.                         <div class=\"pl-form-group\">
  3305.                             <label class=\"pl-label\">Mot de passe</label>
  3306.                             <div class=\"pl-password-wrap\">
  3307.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwd\" name=\"new-password\" placeholder=\"Minimum 6 caractères\" autocomplete=\"new-password\" required>
  3308.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwd\" aria-label=\"Afficher\">
  3309.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3310.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  3311.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  3312.                                     </svg>
  3313.                                 </button>
  3314.                             </div>
  3315.                         </div>
  3317.                         <div class=\"pl-form-group\">
  3318.                             <label class=\"pl-label\">Confirmer le mot de passe</label>
  3319.                             <div class=\"pl-password-wrap\">
  3320.                                 <input type=\"password\" class=\"pl-input\" id=\"regPwdConfirm\" name=\"confirm-password\" placeholder=\"Retapez votre mot de passe\" autocomplete=\"new-password\" required>
  3321.                                 <button type=\"button\" class=\"pl-eye-btn\" data-target=\"regPwdConfirm\" aria-label=\"Afficher\">
  3322.                                     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3323.                                         <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>
  3324.                                         <circle cx=\"12\" cy=\"12\" r=\"3\"/>
  3325.                                     </svg>
  3326.                                 </button>
  3327.                             </div>
  3328.                         </div>
  3330.                         <div class=\"pl-form-group\">
  3331.                             <label class=\"pl-label\">Téléphone portable</label>
  3332.                             <input type=\"tel\" class=\"pl-input\" id=\"regPhone\" placeholder=\"06 12 34 56 78\" required>
  3333.                         </div>
  3335.                         <div class=\"pl-notif-box\">
  3336.                             <p class=\"pl-notif-label\">Recevoir les notifications :</p>
  3337.                             <div class=\"pl-notif-opts\">
  3338.                                 <label class=\"pl-checkbox\">
  3339.                                     <input type=\"checkbox\" id=\"notifSms\" checked>
  3340.                                     SMS
  3341.                                 </label>
  3342.                                 <label class=\"pl-checkbox\">
  3343.                                     <input type=\"checkbox\" id=\"notifEmail\" checked>
  3344.                                     E-mail
  3345.                                 </label>
  3346.                             </div>
  3347.                         </div>
  3349.                         <div class=\"pl-consent-box\" id=\"consentBox\">
  3350.                             <label class=\"pl-checkbox\">
  3351.                                 <input type=\"checkbox\" id=\"acceptCgu\">
  3352.                                 J'accepte les <span class=\"pl-consent-link\" onclick=\"openCguModal(event)\">Conditions Générales d'Utilisation</span> et la <span class=\"pl-consent-link\" onclick=\"openPolitiqueModal(event)\">Politique de Confidentialité</span>&nbsp;<span class=\"pl-required\">*</span>
  3353.                             </label>
  3354.                             <p class=\"pl-consent-hint\">
  3355.                                 <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/></svg>
  3356.                                 Données hébergées en France, conformité RGPD
  3357.                             </p>
  3358.                         </div>
  3360.                         <button type=\"button\" class=\"pl-btn pl-btn-secondary\" onclick=\"handleRegister()\">Créer mon compte Parent</button>
  3361.                         <p class=\"pl-note\">Vous pourrez modifier vos informations et vos préférences de notifications à tout moment.</p>
  3362.                     </form>
  3364.                     <div class=\"pl-divider\">
  3365.                         <span class=\"pl-divider-line\"></span>
  3366.                         <span class=\"pl-divider-text\">ou</span>
  3367.                         <span class=\"pl-divider-line\"></span>
  3368.                     </div>
  3370.                     <div class=\"pl-socials\">
  3371.                         <a href=\"{{ path('connect_google_start') }}\" class=\"pl-social-btn pl-social-google\">
  3372.                             <img src=\"{{ asset('/images/icons-google.png') }}\" alt=\"\">
  3373.                             Continuer avec Google
  3374.                         </a>
  3375.                         <a href=\"{{ path('connect_facebook_start') }}\" class=\"pl-social-btn pl-social-facebook\">
  3376.                             <img src=\"{{ asset('/images/icons-facebook.png') }}\" alt=\"\">
  3377.                             Continuer avec Facebook
  3378.                         </a>
  3379.                     </div>
  3380.                 </div>
  3381.             </div>
  3382.         </section>
  3383.     </main>
  3385.     <!-- CGU Modal -->
  3386.     <div class=\"pl-modal-overlay\" id=\"cguModal\">
  3387.         <div class=\"pl-modal\">
  3388.             <div class=\"pl-modal-header\">
  3389.                 <h3>Conditions Générales d'Utilisation</h3>
  3390.                 <button class=\"pl-modal-close\" onclick=\"closeCguModal()\">
  3391.                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>
  3392.                 </button>
  3393.             </div>
  3394.             <div class=\"pl-modal-body\">
  3395.                 <h4>1. Objet</h4>
  3396.                 <p>Les présentes Conditions Générales d'Utilisation (CGU) régissent l'accès et l'utilisation de la plateforme 5sur5séjour par les utilisateurs « Parents ». L'inscription implique l'acceptation pleine et entière des présentes conditions.</p>
  3398.                 <h4>2. Accès au service</h4>
  3399.                 <p>L'accès à l'espace Parent nécessite un code séjour fourni par l'accompagnateur ou l'organisateur du séjour. Le Parent crée un compte personnel pour consulter les photos, vidéos et messages vocaux déposés pendant le séjour de son enfant.</p>
  3401.                 <h4>3. Données personnelles collectées</h4>
  3402.                 <ul>
  3403.                     <li>Nom, prénom, adresse e-mail, numéro de téléphone portable</li>
  3404.                     <li>Préférences de notification (SMS, e-mail)</li>
  3405.                     <li>Données de connexion et d'utilisation de la plateforme</li>
  3406.                 </ul>
  3408.                 <h4>4. Finalités du traitement</h4>
  3409.                 <p>Vos données sont utilisées exclusivement pour :</p>
  3410.                 <ul>
  3411.                     <li>Créer et gérer votre compte Parent</li>
  3412.                     <li>Vous donner accès aux contenus du séjour de votre enfant</li>
  3413.                     <li>Vous envoyer des notifications (nouvelles photos, messages, commandes)</li>
  3414.                     <li>Assurer le bon fonctionnement et la sécurité du service</li>
  3415.                 </ul>
  3417.                 <h4>5. Durée de conservation</h4>
  3418.                 <p>Les données personnelles sont conservées pendant la durée d'utilisation du service. Les contenus de séjour (photos, vidéos) sont automatiquement supprimés 2 mois après la fin du séjour. Votre compte est supprimé après 2 ans d'inactivité.</p>
  3420.                 <h4>6. Droits de l'utilisateur</h4>
  3421.                 <p>Conformément au RGPD (Règlement UE 2016/679), vous disposez d'un droit d'accès, de rectification, de suppression, de limitation et de portabilité de vos données. Vous pouvez exercer ces droits par e-mail à <strong>contact@5sur5sejour.com</strong>.</p>
  3423.                 <h4>7. Hébergement et sécurité</h4>
  3424.                 <p>Toutes les données sont hébergées en France (OVH, 2 rue Kellermann, 59100 Roubaix). La plateforme utilise un chiffrement SSL et des mesures de sécurité conformes aux standards en vigueur.</p>
  3426.                 <h4>8. Responsable du traitement</h4>
  3427.                 <p>TRUST CONSEILS — 199 Avenue Francis de Pressensé, 69200 Vénissieux.<br>Contact : <strong>contact@5sur5sejour.com</strong> — Tél. : 05 36 28 29 30</p>
  3428.             </div>
  3429.             <div class=\"pl-modal-footer\">
  3430.                 <button class=\"pl-btn\" onclick=\"closeCguModal()\">J'ai compris</button>
  3431.             </div>
  3432.         </div>
  3433.     </div>
  3435.     <!-- Politique Modal -->
  3436.     <div class=\"pl-modal-overlay\" id=\"politiqueModal\">
  3437.         <div class=\"pl-modal\">
  3438.             <div class=\"pl-modal-header\">
  3439.                 <h3>Politique de Confidentialité</h3>
  3440.                 <button class=\"pl-modal-close\" onclick=\"closePolitiqueModal()\">
  3441.                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/></svg>
  3442.                 </button>
  3443.             </div>
  3444.             <div class=\"pl-modal-body\">
  3445.                 <h4>Charte d'utilisation des données personnelles</h4>
  3446.                 <p>La présente politique de confidentialité s'applique à la plateforme 5sur5séjour (5sur5sejour.com), éditée par TRUST CONSEILS.</p>
  3448.                 <h4>Données collectées</h4>
  3449.                 <p>Dans le cadre de l'utilisation du service, nous collectons les données suivantes : nom, prénom, adresse e-mail, numéro de téléphone, données de connexion. Ces données sont nécessaires au fonctionnement du service.</p>
  3451.                 <h4>Base légale du traitement</h4>
  3452.                 <p>Le traitement de vos données repose sur votre consentement (acceptation des présentes conditions lors de l'inscription) et sur l'exécution du contrat de service.</p>
  3454.                 <h4>Destinataires des données</h4>
  3455.                 <p>Vos données personnelles ne sont jamais vendues ni partagées avec des tiers à des fins commerciales. Elles sont accessibles uniquement aux équipes de TRUST CONSEILS dans le cadre strict du fonctionnement du service.</p>
  3457.                 <h4>Transferts de données</h4>
  3458.                 <p>Aucun transfert de données hors de l'Union Européenne n'est effectué. L'ensemble des données est hébergé en France.</p>
  3460.                 <h4>Cookies</h4>
  3461.                 <p>La plateforme utilise des cookies strictement nécessaires au fonctionnement du service (session, authentification). Aucun cookie publicitaire n'est utilisé.</p>
  3463.                 <h4>Vos droits</h4>
  3464.                 <p>Conformément au RGPD et à la loi Informatique et Libertés, vous disposez des droits suivants :</p>
  3465.                 <ul>
  3466.                     <li><strong>Droit d'accès</strong> : obtenir une copie de vos données</li>
  3467.                     <li><strong>Droit de rectification</strong> : corriger vos informations</li>
  3468.                     <li><strong>Droit de suppression</strong> : demander l'effacement de vos données</li>
  3469.                     <li><strong>Droit d'opposition</strong> : vous opposer au traitement</li>
  3470.                     <li><strong>Droit à la portabilité</strong> : recevoir vos données dans un format structuré</li>
  3471.                     <li><strong>Droit de retrait du consentement</strong> : à tout moment</li>
  3472.                 </ul>
  3473.                 <p>Pour exercer vos droits : <strong>contact@5sur5sejour.com</strong></p>
  3474.                 <p>Pour en savoir plus : <a href=\"https://www.cnil.fr/\" target=\"_blank\" rel=\"noopener\" style=\"color:var(--pl-teal);\">www.cnil.fr</a></p>
  3475.             </div>
  3476.             <div class=\"pl-modal-footer\">
  3477.                 <button class=\"pl-btn\" onclick=\"closePolitiqueModal()\">J'ai compris</button>
  3478.             </div>
  3479.         </div>
  3480.     </div>
  3482.     <!-- Footer trust bar -->
  3483.     <footer class=\"pl-footer-trust\">
  3484.         <span class=\"pl-footer-item\">
  3485.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3486.                 <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>
  3487.                 <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>
  3488.             </svg>
  3489.             Connexion sécurisée
  3490.         </span>
  3491.         <span class=\"pl-footer-item\">
  3492.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3493.                 <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>
  3494.             </svg>
  3495.             Données protégées
  3496.         </span>
  3497.         <span class=\"pl-footer-item\">
  3498.             <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">
  3499.                 <circle cx=\"12\" cy=\"12\" r=\"10\"/>
  3500.                 <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>
  3501.                 <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\"/>
  3502.             </svg>
  3503.             Hébergé en France
  3504.         </span>
  3505.     </footer>
  3506. </div>
  3507. {% endblock %}
  3509. {% block Footer %}
  3510. {{ parent() }}
  3511. {% endblock %}
  3513. {% block javascript %}
  3514. {{ parent() }}
  3515. <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  3516. <script>
  3517. document.addEventListener('DOMContentLoaded', function() {
  3518.     // Tab switching
  3519.     const tabs = document.querySelectorAll('.pl-tab');
  3520.     const panels = document.querySelectorAll('.pl-panel');
  3522.     tabs.forEach(tab => {
  3523.         tab.addEventListener('click', () => {
  3524.             const target = tab.dataset.tab;
  3526.             tabs.forEach(t => {
  3527.                 t.classList.remove('active');
  3528.                 t.setAttribute('aria-selected', 'false');
  3529.             });
  3530.             tab.classList.add('active');
  3531.             tab.setAttribute('aria-selected', 'true');
  3533.             panels.forEach(p => p.classList.remove('active'));
  3534.             document.getElementById('panel-' + target).classList.add('active');
  3535.         });
  3536.     });
  3538.     // Clear autofilled code séjour field on page load (browser autofill fix)
  3539.     const codeInput = document.getElementById('loginCode');
  3540.     if (codeInput) {
  3541.         // Clear any incorrect autofill value
  3542.         setTimeout(() => {
  3543.             const currentValue = codeInput.value;
  3544.             // If the value doesn't match code séjour format (2 letters + 6 digits), clear it
  3545.             if (currentValue && !/^[A-Z]{2}[0-9]{6}\$/.test(currentValue.toUpperCase())) {
  3546.                 codeInput.value = '';
  3547.             }
  3548.         }, 100);
  3549.     }
  3551.     // Password toggle
  3552.     document.querySelectorAll('.pl-eye-btn').forEach(btn => {
  3553.         btn.addEventListener('click', () => {
  3554.             const input = document.getElementById(btn.dataset.target);
  3555.             const isPassword = input.type === 'password';
  3556.             input.type = isPassword ? 'text' : 'password';
  3557.             btn.querySelector('svg').style.opacity = isPassword ? '0.5' : '1';
  3558.         });
  3559.     });
  3561.     // Auto-format code séjour (uppercase) and validation
  3562.     if (codeInput) {
  3563.         codeInput.addEventListener('input', (e) => {
  3564.             let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
  3565.             e.target.value = value;
  3566.             
  3567.             // Visual feedback when complete
  3568.             if (value.length === 8) {
  3569.                 e.target.style.borderColor = '#41A2AA';
  3570.                 e.target.style.background = 'rgba(65, 162, 170, 0.06)';
  3571.             } else {
  3572.                 e.target.style.borderColor = '';
  3573.                 e.target.style.background = '';
  3574.             }
  3575.         });
  3577.         // Validate on form submit
  3578.         document.getElementById('loginForm').addEventListener('submit', function(e) {
  3579.             const codePattern = /^[A-Z]{2}[0-9]{6}\$/;
  3580.             if (!codePattern.test(codeInput.value)) {
  3581.                 e.preventDefault();
  3582.                 codeInput.classList.add('is-invalid');
  3583.                 Swal.fire({
  3584.                     icon: 'error',
  3585.                     title: 'Code séjour invalide',
  3586.                     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;\">XX000000</span></p>',
  3587.                     confirmButtonColor: '#41a2aa'
  3588.                 });
  3589.             } else {
  3590.                 // Show loading state on button
  3591.                 const btn = this.querySelector('button[type=\"submit\"]');
  3592.                 btn.classList.add('pl-btn-loading');
  3593.                 btn.disabled = true;
  3594.             }
  3595.         });
  3596.     }
  3598.     // Add visual feedback when email is valid
  3599.     const emailInputs = document.querySelectorAll('input[type=\"email\"]');
  3600.     emailInputs.forEach(input => {
  3601.         input.addEventListener('blur', function() {
  3602.             const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  3603.             if (this.value && emailRegex.test(this.value)) {
  3604.                 this.classList.add('is-valid');
  3605.                 this.classList.remove('is-invalid');
  3606.             } else if (this.value) {
  3607.                 this.classList.add('is-invalid');
  3608.                 this.classList.remove('is-valid');
  3609.             }
  3610.         });
  3611.         input.addEventListener('input', function() {
  3612.             this.classList.remove('is-valid', 'is-invalid');
  3613.         });
  3614.     });
  3616.     // Login error
  3617.     {% if error %}
  3618.     Swal.fire({
  3619.         icon: 'error',
  3620.         title: 'Erreur de connexion',
  3621.         text: 'Identifiant ou mot de passe incorrect.',
  3622.         confirmButtonColor: '#41a2aa'
  3623.     });
  3624.     {% endif %}
  3625. });
  3627. // Modal CGU / Politique
  3628. function openCguModal(e) { e && e.preventDefault(); document.getElementById('cguModal').classList.add('active'); document.body.style.overflow = 'hidden'; }
  3629. function closeCguModal() { document.getElementById('cguModal').classList.remove('active'); document.body.style.overflow = ''; }
  3630. function openPolitiqueModal(e) { e && e.preventDefault(); document.getElementById('politiqueModal').classList.add('active'); document.body.style.overflow = 'hidden'; }
  3631. function closePolitiqueModal() { document.getElementById('politiqueModal').classList.remove('active'); document.body.style.overflow = ''; }
  3633. document.querySelectorAll('.pl-modal-overlay').forEach(function(overlay) {
  3634.     overlay.addEventListener('click', function(e) {
  3635.         if (e.target === overlay) {
  3636.             overlay.classList.remove('active');
  3637.             document.body.style.overflow = '';
  3638.         }
  3639.     });
  3640. });
  3642. document.addEventListener('keydown', function(e) {
  3643.     if (e.key === 'Escape') { closeCguModal(); closePolitiqueModal(); }
  3644. });
  3646. // Registration
  3647. function handleRegister() {
  3648.     const loader = document.getElementById('plLoader');
  3649.     const fields = {
  3650.         nom: document.getElementById('regNom'),
  3651.         prenom: document.getElementById('regPrenom'),
  3652.         email: document.getElementById('regEmail'),
  3653.         pwd: document.getElementById('regPwd'),
  3654.         pwdConfirm: document.getElementById('regPwdConfirm'),
  3655.         phone: document.getElementById('regPhone')
  3656.     };
  3658.     // Reset
  3659.     Object.values(fields).forEach(f => f.classList.remove('is-invalid'));
  3660.     document.getElementById('consentBox').classList.remove('is-invalid');
  3662.     // Validate
  3663.     let valid = true;
  3665.     if (!fields.nom.value.trim()) { fields.nom.classList.add('is-invalid'); valid = false; }
  3666.     if (!fields.prenom.value.trim()) { fields.prenom.classList.add('is-invalid'); valid = false; }
  3668.     const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+\$/;
  3669.     if (!emailRegex.test(fields.email.value)) { fields.email.classList.add('is-invalid'); valid = false; }
  3671.     if (fields.pwd.value.length < 6) {
  3672.         fields.pwd.classList.add('is-invalid');
  3673.         Swal.fire({ icon: 'warning', title: 'Mot de passe trop court', text: 'Minimum 6 caractères.', confirmButtonColor: '#41a2aa' });
  3674.         return;
  3675.     }
  3677.     if (fields.pwd.value !== fields.pwdConfirm.value) {
  3678.         fields.pwdConfirm.classList.add('is-invalid');
  3679.         Swal.fire({ icon: 'warning', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  3680.         return;
  3681.     }
  3683.     if (!fields.phone.value.trim()) { fields.phone.classList.add('is-invalid'); valid = false; }
  3685.     if (!document.getElementById('acceptCgu').checked) {
  3686.         document.getElementById('consentBox').classList.add('is-invalid');
  3687.         Swal.fire({
  3688.             icon: 'warning',
  3689.             title: 'Conditions requises',
  3690.             html: 'Vous devez accepter les <strong>Conditions Générales d\\'Utilisation</strong> et la <strong>Politique de Confidentialité</strong> pour créer votre compte.',
  3691.             confirmButtonColor: '#41a2aa'
  3692.         });
  3693.         return;
  3694.     }
  3696.     if (!valid) return;
  3698.     loader.classList.add('active');
  3700.     const data = {
  3701.         nomparent: fields.nom.value.trim(),
  3702.         prenomparent: fields.prenom.value.trim(),
  3703.         mailparent: fields.email.value.trim(),
  3704.         numtel: fields.phone.value.trim(),
  3705.         passwordparent: fields.pwd.value,
  3706.         confirmpassword: fields.pwdConfirm.value,
  3707.         sms: document.getElementById('notifSms').checked ? 1 : 0,
  3708.         mailnotif: document.getElementById('notifEmail').checked ? 1 : 0
  3709.     };
  3711.     fetch(\"{{ path('parent_register') }}\", {
  3712.         method: 'POST',
  3713.         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  3714.         body: new URLSearchParams(data)
  3715.     })
  3716.     .then(r => r.text())
  3717.     .then(text => {
  3718.         loader.classList.remove('active');
  3719.         let code = '';
  3720.         try {
  3721.             const parsed = JSON.parse(text);
  3722.             code = typeof parsed === 'string' ? parsed : (parsed && parsed.code !== undefined ? String(parsed.code) : '');
  3723.         } catch (e) {
  3724.             code = text.trim();
  3725.         }
  3727.         if (code === 'eror') {
  3728.             fields.email.classList.add('is-invalid');
  3729.             Swal.fire({
  3730.                 icon: false,
  3731.                 title: '🔐 Vous avez déjà un compte',
  3732.                 text: 'Cette adresse est déjà associée à un compte parent. Vous pouvez vous connecter ou réinitialiser votre mot de passe si besoin.',
  3733.                 footer: '<a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#F09E7A;\">Mot de passe oublié ?</a>',
  3734.                 confirmButtonColor: '#41a2aa'
  3735.             });
  3736.         } else if (code === 'erorpasswordconfirm') {
  3737.             fields.pwdConfirm.classList.add('is-invalid');
  3738.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Les mots de passe ne correspondent pas.', confirmButtonColor: '#41a2aa' });
  3739.         } else if (code === 'done') {
  3740.             Swal.fire({
  3741.                 icon: 'success',
  3742.                 title: '🎉 Bienvenue !',
  3743.                 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>',
  3744.                 confirmButtonText: 'Compris',
  3745.                 confirmButtonColor: '#41a2aa'
  3746.             }).then(() => location.reload());
  3747.         } else {
  3748.             Swal.fire({ icon: 'error', title: 'Erreur', text: 'Une réponse inattendue a été reçue. Veuillez réessayer.', confirmButtonColor: '#41a2aa' });
  3749.         }
  3750.     })
  3751.     .catch(() => {
  3752.         loader.classList.remove('active');
  3753.         Swal.fire({ icon: 'error', title: 'Erreur', text: 'Un problème est survenu. Veuillez réessayer.', confirmButtonColor: '#F09E7A' });
  3754.     });
  3755. }
  3756. </script>
  3757. {% endblock %}
  3758. ", "Parent/LoginParent.html.twig", "/var/www/5sur5sejour/templates/Parent/LoginParent.html.twig");
  3759.     }
  3760. }