templates/website/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr" data-theme="light">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Skolya — Un suivi scolaire en temps réel</title>
  7.   <link rel="preconnect" href="https://fonts.googleapis.com">
  8.   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  9.   <style>
  10.     /* ══════════════════════════════════════════════════
  11.        SKOLYA DESIGN SYSTEM — exact app_theme.dart
  12.        ══════════════════════════════════════════════════ */
  13.     :root {
  14.       /* ─── Brand palette (light) ─── */
  15.       --sk-primary:          #004AD8;
  16.       --sk-primary-dark:     #0039A6;
  17.       --sk-primary-container:#D8E2FF;
  18.       --sk-secondary:        #5A55A3;
  19.       --sk-secondary-container:#E2DFFF;
  20.       --sk-tertiary:         #00696F;
  21.       --sk-tertiary-container:#9DF2F8;
  23.       /* ─── Gradients (primary only) ─── */
  24.       --sk-grad:   linear-gradient(135deg, #3a7fff 0%, #004AD8 50%, #002882 100%);
  25.       --sk-grad-2: linear-gradient(135deg, #004AD8 0%, #0039A6 100%);
  27.       /* ─── Shimmer (primary shades only) ─── */
  28.       --sk-shimmer: linear-gradient(90deg,
  29.         #004AD8 0%, #3a7fff 35%, #A3C4FF 55%, #3a7fff 70%, #004AD8 100%);
  31.       /* ─── Light surfaces ─── */
  32.       --bg:        #FFFFFF;
  33.       --bg-2:      #E1E6F2;
  34.       --bg-3:      #D8E2FF;
  35.       --bg-card:   #FFFFFF;
  36.       --text:      #1B1D22;
  37.       --text-2:    #454A55;
  38.       --text-3:    #74777F;
  39.       --border:    rgba(0, 74, 216, 0.13);
  40.       --border-h:  rgba(0, 74, 216, 0.30);
  41.       --nav-bg:    rgba(255,255,255,0.92);
  42.       --shadow-sm: 0 2px 12px rgba(0,74,216,0.08);
  43.       --shadow-md: 0 8px 32px rgba(0,74,216,0.12);
  44.       --shadow-lg: 0 16px 48px rgba(0,74,216,0.18);
  45.       --sk-faq-bg: #EEF3FF;
  46.       --sk-footer-bg: #F8F9FF;
  47.     }
  49.     [data-theme="dark"] {
  50.       --sk-primary:          #004AD8;
  51.       --sk-primary-dark:     #0039A6;
  52.       --sk-primary-container:#0039A6;
  53.       --sk-secondary:        #C4C0FF;
  54.       --sk-secondary-container:#423B90;
  55.       --sk-tertiary:         #80D8E0;
  56.       --sk-tertiary-container:#004F54;
  57.       --sk-grad:   linear-gradient(135deg, #3a7fff 0%, #004AD8 50%, #002882 100%);
  58.       --sk-grad-2: linear-gradient(135deg, #004AD8 0%, #0039A6 100%);
  59.       --sk-shimmer: linear-gradient(90deg,
  60.         #A3C4FF 0%, #3a7fff 35%, #004AD8 55%, #3a7fff 70%, #A3C4FF 100%);
  62.       /* Deep navy palette — propre et élégant */
  63.       --bg:        #0E1117;
  64.       --bg-2:      #141824;
  65.       --bg-3:      #1B2238;
  66.       --bg-card:   #17202F;
  67.       --text:      #DDE3F0;
  68.       --text-2:    #8A96B8;
  69.       --text-3:    #505878;
  70.       --border:    rgba(100,140,255,0.10);
  71.       --border-h:  rgba(100,140,255,0.24);
  72.       --nav-bg:    rgba(14,17,23,0.94);
  73.       --shadow-sm: 0 2px 14px rgba(0,0,0,0.4);
  74.       --shadow-md: 0 8px 36px rgba(0,0,0,0.5);
  75.       --shadow-lg: 0 18px 54px rgba(0,0,0,0.6);
  76.       --sk-faq-bg: #0D1525;
  77.       --sk-footer-bg: #08090E;
  78.     }
  80.     /* ══════════════════════════════════════════════════
  81.        RESET & BASE
  82.        ══════════════════════════════════════════════════ */
  83.     *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  84.     html { scroll-behavior:smooth; }
  85.     body {
  86.       font-family:'Poppins',sans-serif;
  87.       background:var(--bg);
  88.       color:var(--text);
  89.       transition:background .35s,color .35s;
  90.       overflow-x:hidden;
  91.     }
  92.     a { text-decoration:none; color:inherit; }
  93.     ul { list-style:none; }
  94.     button { font-family:'Poppins',sans-serif; cursor:pointer; border:none; outline:none; }
  96.     /* ══════════════════════════════════════════════════
  97.        ANIMATIONS
  98.        ══════════════════════════════════════════════════ */
  99.     @keyframes shimmer-txt {
  100.       0%   { background-position:0% 50%; }
  101.       100% { background-position:200% 50%; }
  102.     }
  103.     @keyframes shimmer-sweep {
  104.       0%   { left:-80%; }
  105.       100% { left:130%; }
  106.     }
  107.     @keyframes pulse-ring {
  108.       0%   { transform:scale(1);    opacity:.7; }
  109.       100% { transform:scale(1.65); opacity:0;  }
  110.     }
  111.     @keyframes float {
  112.       0%,100% { transform:translateY(0);   }
  113.       50%      { transform:translateY(-8px); }
  114.     }
  115.     @keyframes shimmer-num {
  116.       0%   { background-position:-200% 0; }
  117.       100% { background-position: 200% 0; }
  118.     }
  120.     .shimmer-txt {
  121.       background:var(--sk-shimmer);
  122.       background-size:200% 100%;
  123.       animation:shimmer-txt 3.5s linear infinite;
  124.       -webkit-background-clip:text;
  125.       background-clip:text;
  126.       -webkit-text-fill-color:transparent;
  127.     }
  129.     /* ══════════════════════════════════════════════════
  130.        LAYOUT
  131.        ══════════════════════════════════════════════════ */
  132.     .container { max-width:1340px; margin:0 auto; padding:0 24px; }
  134.     /* ══════════════════════════════════════════════════
  135.        NAVBAR
  136.        ══════════════════════════════════════════════════ */
  137.     .navbar {
  138.       position:fixed; top:0; left:0; right:0; z-index:9000;
  139.       background:var(--nav-bg);
  140.       backdrop-filter:blur(20px);
  141.       -webkit-backdrop-filter:blur(20px);
  142.       border-bottom:1px solid var(--border);
  143.       transition:box-shadow .3s, background .35s;
  144.     }
  145.     .navbar.scrolled { box-shadow:var(--shadow-md); }
  147.     .nav-inner {
  148.       max-width:1380px; margin:0 auto; padding:0 24px;
  149.       height:68px;
  150.       display:flex; align-items:center; gap:10px;
  151.     }
  153.     /* Logo */
  154.     .nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right:8px; }
  155.     .nav-logo-mark {
  156.       width:38px; height:38px;
  157.       background:var(--sk-grad);
  158.       border-radius:11px;
  159.       display:flex; align-items:center; justify-content:center;
  160.       box-shadow:0 4px 14px rgba(0,74,216,.35);
  161.     }
  162.     .nav-logo-mark svg { width:20px; height:20px; }
  163.     .nav-logo-name { font-size:20px; font-weight:800; letter-spacing:-.4px; }
  165.     /* Links */
  166.     .nav-links { display:flex; align-items:center; gap:2px; flex:1; }
  167.     .nav-links a {
  168.       display:flex; align-items:center; gap:6px;
  169.       padding:7px 13px; border-radius:9px;
  170.       font-size:13.5px; font-weight:500; color:var(--text-2);
  171.       transition:background .2s, color .2s;
  172.       white-space:nowrap;
  173.     }
  174.     .nav-links a svg { width:15px; height:15px; flex-shrink:0; }
  175.     .nav-links a:hover { background:rgba(0,74,216,.07); color:var(--text); }
  176.     .nav-links a.active { background:rgba(0,74,216,.10); color:var(--sk-primary); }
  177.     .nav-links a.active svg { color:var(--sk-primary); }
  179.     /* Right */
  180.     .nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  182.     .btn-icon {
  183.       width:36px; height:36px; border-radius:9px;
  184.       border:1px solid var(--border); background:var(--bg-2);
  185.       display:flex; align-items:center; justify-content:center;
  186.       color:var(--text-2); cursor:pointer; transition:all .2s;
  187.     }
  188.     .btn-icon:hover { background:var(--bg-3); color:var(--text); border-color:var(--border-h); }
  189.     .btn-icon svg { width:16px; height:16px; }
  191.     .lang-wrap { position:relative; }
  192.     .lang-toggle {
  193.       display:flex; align-items:center; gap:5px;
  194.       padding:6px 10px; border-radius:9px;
  195.       border:1px solid var(--border); background:var(--bg-2);
  196.       font-size:12.5px; font-weight:600; color:var(--text-2);
  197.       cursor:pointer; transition:all .2s;
  198.     }
  199.     .lang-toggle:hover { background:var(--bg-3); color:var(--text); }
  200.     .lang-toggle svg { width:12px; height:12px; transition:transform .25s; }
  201.     .lang-toggle.open svg { transform:rotate(180deg); }
  203.     .lang-menu {
  204.       position:absolute; top:calc(100% + 8px); right:0;
  205.       background:var(--bg-card); border:1px solid var(--border);
  206.       border-radius:12px; padding:6px; min-width:130px;
  207.       box-shadow:var(--shadow-md);
  208.       opacity:0; pointer-events:none;
  209.       transform:translateY(-6px); transition:opacity .2s,transform .2s;
  210.       z-index:100;
  211.     }
  212.     .lang-menu.open { opacity:1; pointer-events:all; transform:translateY(0); }
  213.     .lang-menu a {
  214.       display:flex; align-items:center; gap:8px;
  215.       padding:8px 10px; border-radius:7px;
  216.       font-size:13px; font-weight:500; color:var(--text);
  217.       transition:background .15s;
  218.     }
  219.     .lang-menu a:hover { background:rgba(0,74,216,.07); }
  221.     .btn-login {
  222.       padding:7px 16px; border-radius:9px;
  223.       border:1px solid var(--border); background:transparent;
  224.       font-size:13px; font-weight:600; color:var(--text);
  225.       transition:all .2s;
  226.     }
  227.     .btn-login:hover { background:rgba(0,74,216,.07); border-color:var(--border-h); }
  229.     .btn-demo-nav {
  230.       padding:8px 18px; border-radius:9px;
  231.       background:var(--sk-grad);
  232.       font-size:13px; font-weight:700; color:white;
  233.       transition:all .25s;
  234.       box-shadow:0 4px 14px rgba(0,74,216,.3);
  235.       white-space:nowrap;
  236.     }
  237.     .btn-demo-nav:hover {
  238.       opacity:.9; transform:translateY(-1px);
  239.       box-shadow:0 8px 22px rgba(0,74,216,.4);
  240.     }
  242.     /* Hamburger */
  243.     .hamburger {
  244.       display:none; flex-direction:column; gap:5px;
  245.       width:36px; height:36px; align-items:center; justify-content:center;
  246.       border-radius:9px; border:1px solid var(--border); background:var(--bg-2);
  247.       cursor:pointer; transition:all .2s;
  248.     }
  249.     .hamburger span {
  250.       display:block; width:18px; height:2px;
  251.       background:var(--text); border-radius:2px; transition:all .3s;
  252.     }
  253.     .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  254.     .hamburger.open span:nth-child(2) { opacity:0; }
  255.     .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  257.     /* Mobile nav */
  258.     .mobile-nav {
  259.       display:none; position:fixed; top:68px; left:0; right:0;
  260.       background:var(--nav-bg); backdrop-filter:blur(20px);
  261.       border-bottom:1px solid var(--border);
  262.       padding:16px 24px 24px; z-index:8999;
  263.       opacity:0; transform:translateY(-8px);
  264.       transition:opacity .25s,transform .25s;
  265.     }
  266.     .mobile-nav.open { display:block; opacity:1; transform:translateY(0); }
  267.     .mobile-nav ul { display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
  268.     .mobile-nav ul a {
  269.       display:flex; align-items:center; gap:10px;
  270.       padding:12px 14px; border-radius:10px;
  271.       font-size:14.5px; font-weight:500; color:var(--text);
  272.       transition:background .2s;
  273.     }
  274.     .mobile-nav ul a:hover { background:rgba(0,74,216,.08); color:var(--sk-primary); }
  275.     .mobile-nav ul svg { width:17px; height:17px; }
  276.     .mob-actions { display:flex; gap:10px; }
  277.     .mob-actions .btn-login,
  278.     .mob-actions .btn-demo-nav { flex:1; text-align:center; display:block; }
  280.     /* ══════════════════════════════════════════════════
  281.        HERO
  282.        ══════════════════════════════════════════════════ */
  283.     #accueil {
  284.       min-height:100vh; padding:110px 32px 80px;
  285.       display:flex; align-items:center; background:var(--bg);
  286.     }
  287.     .hero-inner {
  288.       max-width:1340px; margin:0 auto;
  289.       display:grid; grid-template-columns:65fr 35fr;
  290.       gap:48px; align-items:stretch;
  291.     }
  292.     .hero-card {
  293.       background: var(--sk-primary);
  294.       border-radius:28px; padding:44px 44px;
  295.       position:relative; overflow:hidden;
  296.       display:flex; flex-direction:column; justify-content:center;
  297.     }
  298.     .hero-card::before {
  299.       content:''; position:absolute;
  300.       top:-60px; right:-60px; width:220px; height:220px;
  301.       border-radius:50%; background:rgba(255,255,255,.07);
  302.       pointer-events:none;
  303.     }
  304.     .hero-sweep {
  305.       position:absolute; top:0; left:-80%;
  306.       width:60%; height:100%;
  307.       background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  308.       animation:shimmer-sweep 4.5s ease-in-out infinite;
  309.       pointer-events:none;
  310.     }
  311.     .hero-badge {
  312.       display:inline-flex; align-items:center; gap:6px;
  313.       background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  314.       padding:5px 12px; border-radius:30px;
  315.       font-size:11px; font-weight:600; color:white;
  316.       margin-bottom:18px; letter-spacing:.3px;
  317.       width:fit-content;
  318.     }
  319.     .hero-title {
  320.       font-size:clamp(26px,3.6vw,44px);
  321.       font-weight:900; line-height:1.18; color:white;
  322.       margin-bottom:20px; letter-spacing:-.5px;
  323.     }
  324.     .hero-sub {
  325.       font-size:15px; line-height:1.75;
  326.       color:rgba(255,255,255,.85); margin-bottom:36px;
  327.     }
  329.     /* Store badges */
  330.     .hero-stores {
  331.       display:flex;
  332.       gap:12px;
  333.       flex-wrap:wrap;
  334.       margin-top:20px;
  335.       align-items:center;
  336.     }
  337.     .store-badge {
  338.       display:inline-block;
  339.       transition:transform .22s, opacity .22s;
  340.     }
  341.     .store-badge:hover { transform:translateY(-2px) scale(1.04); opacity:.9; }
  342.     .store-badge img {
  343.       height:46px;
  344.       width:auto;
  345.       display:block;
  346.       filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
  347.     }
  349.     .hero-btns { display:flex; align-items:center; flex-wrap:wrap; gap:16px; justify-content:space-between; }
  350.     .hero-store-group { display:flex; gap:10px; align-items:center; }
  351.     .btn-hero-1 {
  352.       padding:13px 26px; background:white; color:var(--sk-primary);
  353.       border-radius:11px; font-size:14px; font-weight:800;
  354.       transition:all .25s;
  355.     }
  356.     .btn-hero-1:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); }
  357.     .btn-hero-2 {
  358.       padding:13px 26px; background:rgba(255,255,255,.15); color:white;
  359.       border:1.5px solid rgba(255,255,255,.38); border-radius:11px;
  360.       font-size:14px; font-weight:600;
  361.       backdrop-filter:blur(6px); transition:all .25s;
  362.     }
  363.     .btn-hero-2:hover { background:rgba(255,255,255,.25); }
  365.     .hero-img-box {
  366.       width:100%; aspect-ratio:3/2;
  367.       border-radius:22px; border:2px dashed rgba(255,255,255,0.35);
  368.       background:rgba(255,255,255,0.12);
  369.       display:flex; flex-direction:column; align-items:center; justify-content:center;
  370.       gap:14px; color:rgba(255,255,255,0.7); font-size:13.5px; font-weight:500;
  371.       animation:float 5s ease-in-out infinite;
  372.     }
  373.     /* desktop version (right column) — white border on bg */
  374.     .hero-visual .hero-img-box {
  375.       border-color: var(--border-h);
  376.       background: var(--bg-2);
  377.       color: var(--text-3);
  378.     }
  379.     .hero-img-box svg { width:52px; height:52px; opacity:.35; }
  380.     .hero-img-box span:last-child { font-size:12px; opacity:.6; }
  382.     /* Mobile image lives inside the card */
  383.     .hero-img-mobile { display:none; margin-top:28px; margin-bottom:28px; }
  384.     /* Desktop image in separate column */
  385.     .hero-visual { display:flex; align-items:stretch; justify-content:center; }
  387.     /* ══════════════════════════════════════════════════
  388.        COUNTER BAND
  389.        ══════════════════════════════════════════════════ */
  390.     #counter {
  391.       background:var(--bg-2);
  392.       padding:56px 24px;
  393.       border-top:1px solid var(--border);
  394.       border-bottom:1px solid var(--border);
  395.     }
  396.     .counter-grid {
  397.       max-width:1140px; margin:0 auto;
  398.       display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  399.     }
  400.     .counter-card {
  401.       position:relative; overflow:hidden;
  402.       background:var(--bg-card); border:1px solid var(--border);
  403.       border-radius:18px; padding:30px 22px 28px;
  404.       text-align:center; transition:transform .3s,box-shadow .3s,border-color .3s;
  405.     }
  406.     .counter-card::before {
  407.       content:''; position:absolute;
  408.       top:0; left:0; right:0; height:3px;
  409.       background:var(--sk-grad);
  410.     }
  411.     .counter-card::after {
  412.       content:''; position:absolute;
  413.       top:0; left:-100%; width:55%; height:100%;
  414.       background:linear-gradient(90deg,transparent,rgba(0,74,216,.05),transparent);
  415.       animation:shimmer-sweep 6s ease-in-out infinite;
  416.     }
  417.     .counter-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--border-h); }
  418.     .ctr-emoji { font-size:28px; margin-bottom:12px; display:block; }
  419.     .ctr-num {
  420.       font-size:38px; font-weight:900; letter-spacing:-1px;
  421.       background:var(--sk-shimmer);
  422.       background-size:200% 100%;
  423.       animation:shimmer-num 3.5s linear infinite;
  424.       -webkit-background-clip:text; background-clip:text;
  425.       -webkit-text-fill-color:transparent; line-height:1.1;
  426.     }
  427.     .ctr-lbl {
  428.       display:block; margin-top:8px;
  429.       font-size:13px; font-weight:500; color:var(--text-2);
  430.     }
  432.     /* ══════════════════════════════════════════════════
  433.        SECTION COMMONS
  434.        ══════════════════════════════════════════════════ */
  435.     .sec-badge {
  436.       display:inline-flex; align-items:center; gap:6px;
  437.       background:rgba(0,74,216,.07);
  438.       border:1px solid rgba(0,74,216,.16);
  439.       color:var(--sk-primary);
  440.       padding:6px 16px; border-radius:30px;
  441.       font-size:12px; font-weight:700; margin-bottom:16px; letter-spacing:.3px;
  442.     }
  443.     .sec-badge svg { width:13px; height:13px; }
  444.     .sec-title {
  445.       font-size:clamp(22px,3vw,36px); font-weight:800;
  446.       letter-spacing:-.4px; color:var(--text); margin-bottom:14px;
  447.     }
  448.     .sec-sub {
  449.       font-size:15px; color:var(--text-2); line-height:1.75; max-width:560px;
  450.     }
  452.     /* scroll fade-in */
  453.     .fi {
  454.       opacity:0; transform:translateY(26px);
  455.       transition:opacity .65s ease,transform .65s ease;
  456.     }
  457.     .fi.visible { opacity:1; transform:translateY(0); }
  459.     /* ══════════════════════════════════════════════════
  460.        FEATURES
  461.        ══════════════════════════════════════════════════ */
  462.     #fonctionnalites { background:var(--bg); padding:96px 24px; }
  463.     .feat-hdr { text-align:center; margin-bottom:64px; }
  464.     .feat-hdr .sec-sub { margin:0 auto; }
  466.     .feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  467.     .feat-card {
  468.       position:relative; overflow:hidden;
  469.       background:var(--bg-card); border:1px solid var(--border);
  470.       border-radius:18px; padding:34px 28px; transition:all .3s;
  471.     }
  472.     .feat-card::after {
  473.       content:''; position:absolute; top:0; left:-100%;
  474.       width:55%; height:100%;
  475.       background:linear-gradient(90deg,transparent,rgba(0,74,216,.04),transparent);
  476.       transition:left .6s ease;
  477.     }
  478.     .feat-card:hover::after { left:180%; }
  479.     .feat-card:hover { transform:translateY(-5px); border-color:var(--border-h); box-shadow:var(--shadow-md); }
  480.     .feat-card:hover .feat-icon { background:var(--sk-grad); }
  481.     .feat-card:hover .feat-icon svg { stroke:white; }
  483.     .feat-icon {
  484.       width:52px; height:52px; border-radius:13px;
  485.       background:rgba(0,74,216,.09);
  486.       display:flex; align-items:center; justify-content:center;
  487.       margin-bottom:20px; transition:background .3s;
  488.     }
  489.     .feat-icon svg { width:24px; height:24px; stroke:var(--sk-primary); fill:none; stroke-width:2; transition:stroke .3s; }
  490.     .feat-name { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; }
  491.     .feat-desc { font-size:13.5px; color:var(--text-2); line-height:1.7; }
  493.     /* ══════════════════════════════════════════════════
  494.        FAQ
  495.        ══════════════════════════════════════════════════ */
  496.     #faq { background:var(--sk-faq-bg,#F0F4FF); padding:96px 24px; }
  497.     .faq-wrap {
  498.       max-width:1260px; margin:0 auto;
  499.       display:grid; grid-template-columns:45fr 55fr;
  500.       gap:56px; align-items:start;
  501.     }
  502.     .faq-img-side {
  503.       position:sticky; top:90px;
  504.     }
  505.     .faq-direct-img {
  506.       width:100%;
  507.       border-radius:16px;
  508.       box-shadow:0 16px 48px rgba(0,74,216,.18);
  509.       overflow:hidden;
  510.     }
  511.     .faq-direct-img img {
  512.       width:100%;
  513.       height:auto;
  514.       display:block;
  515.       border-radius:16px;
  516.     }
  517.     .faq-img-box {
  518.       width:100%; aspect-ratio:16/9;
  519.       border-radius:18px; border:2px dashed var(--border-h);
  520.       background:var(--bg-card);
  521.       display:flex; flex-direction:column; align-items:center; justify-content:center;
  522.       gap:12px; color:var(--text-3); font-size:13.5px;
  523.     }
  524.     .faq-img-box svg { width:48px; height:48px; opacity:.35; }
  526.     .accordion { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
  527.     .acc-item {
  528.       background:var(--bg-card); border:1px solid var(--border);
  529.       border-radius:14px; overflow:hidden;
  530.       transition:border-color .25s,box-shadow .25s;
  531.     }
  532.     .acc-item.open { border-color:var(--border-h); box-shadow:var(--shadow-sm); }
  533.     .acc-trigger {
  534.       display:flex; align-items:center; justify-content:space-between;
  535.       gap:16px; padding:20px 22px; cursor:pointer; user-select:none;
  536.     }
  537.     .acc-q { font-size:14.5px; font-weight:600; color:var(--text); }
  538.     .acc-icon {
  539.       width:28px; height:28px; flex-shrink:0; border-radius:8px;
  540.       background:rgba(0,74,216,.09);
  541.       display:flex; align-items:center; justify-content:center;
  542.       color:var(--sk-primary); transition:all .3s;
  543.     }
  544.     .acc-item.open .acc-icon { background:var(--sk-grad); color:white; transform:rotate(180deg); }
  545.     .acc-icon svg { width:14px; height:14px; }
  546.     .acc-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
  547.     .acc-body.open { max-height:250px; }
  548.     .acc-body-inner { padding:0 22px 20px; font-size:13.5px; color:var(--text-2); line-height:1.75; }
  550.     /* ══════════════════════════════════════════════════
  551.        CONTACT
  552.        ══════════════════════════════════════════════════ */
  553.     #contact {
  554.       background:var(--bg);
  555.       padding:80px 24px;
  556.       text-align:center;
  557.       margin-bottom:64px;
  558.     }
  559.     /* La card porte le gradient à 85% de largeur avec bords arrondis */
  560.     .contact-card {
  561.       position:relative; overflow:hidden;
  562.       width:85%; max-width:1200px;
  563.       margin:0 auto;
  564.       background:var(--sk-grad);
  565.       border-radius:32px;
  566.       padding:80px 56px;
  567.     }
  568.     .contact-card::before {
  569.       content:''; position:absolute;
  570.       bottom:-100px; right:-60px; width:380px; height:380px;
  571.       border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none;
  572.     }
  573.     .contact-card::after {
  574.       content:''; position:absolute;
  575.       top:-70px; left:-40px; width:280px; height:280px;
  576.       border-radius:50%; background:rgba(255,255,255,.04); pointer-events:none;
  577.     }
  578.     .contact-sweep {
  579.       position:absolute; top:0; left:-80%;
  580.       width:55%; height:100%;
  581.       background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  582.       animation:shimmer-sweep 5s ease-in-out infinite;
  583.       pointer-events:none; z-index:0;
  584.     }
  585.     .contact-title {
  586.       position:relative; z-index:1;
  587.       font-size:clamp(22px,3vw,34px); font-weight:900; color:white;
  588.       margin-bottom:16px; letter-spacing:-.4px;
  589.     }
  590.     .contact-sub {
  591.       position:relative; z-index:1;
  592.       font-size:15px; color:rgba(255,255,255,.82);
  593.       margin-bottom:36px; line-height:1.7;
  594.     }
  595.     .btn-wa {
  596.       position:relative; z-index:1;
  597.       display:inline-flex; align-items:center; gap:10px;
  598.       padding:15px 34px; background:#25D366; color:white;
  599.       border-radius:13px; font-size:15px; font-weight:700;
  600.       transition:all .25s;
  601.       box-shadow:0 6px 22px rgba(37,211,102,.4);
  602.     }
  603.     .btn-wa:hover { background:#1ab955; transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,.5); }
  604.     .btn-wa svg { width:22px; height:22px; fill:white; flex-shrink:0; }
  606.     /* ══════════════════════════════════════════════════
  607.        FOOTER
  608.        ══════════════════════════════════════════════════ */
  609.     footer { background:var(--sk-footer-bg); border-top:1px solid var(--border); }
  610.     .footer-top {
  611.       max-width:1340px; margin:0 auto;
  612.       padding:64px 24px 52px;
  613.       display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:48px;
  614.     }
  615.     .footer-brand .nav-logo { margin-bottom:14px; }
  616.     .footer-brand p {
  617.       font-size:13.5px; color:var(--text-2); line-height:1.75;
  618.       margin-bottom:22px; max-width:280px;
  619.     }
  620.     .footer-socials { display:flex; gap:10px; }
  621.     .footer-socials a {
  622.       width:36px; height:36px; border-radius:9px;
  623.       border:1px solid var(--border); background:var(--bg-card);
  624.       display:flex; align-items:center; justify-content:center;
  625.       color:var(--text-2); transition:all .2s;
  626.     }
  627.     .footer-socials a:hover { border-color:var(--sk-primary); color:var(--sk-primary); }
  628.     .footer-socials svg { width:16px; height:16px; }
  629.     .footer-col h5 {
  630.       font-size:11px; font-weight:700; color:var(--text);
  631.       margin-bottom:18px; letter-spacing:.8px; text-transform:uppercase;
  632.     }
  633.     .footer-col ul { display:flex; flex-direction:column; gap:10px; }
  634.     .footer-col ul a { font-size:13.5px; color:var(--text-2); transition:color .2s; }
  635.     .footer-col ul a:hover { color:var(--sk-primary); }
  636.     .footer-clist { display:flex; flex-direction:column; gap:12px; }
  637.     .footer-ci {
  638.       display:flex; align-items:flex-start; gap:10px;
  639.       font-size:13.5px; color:var(--text-2);
  640.     }
  641.     .footer-ci svg { width:16px; height:16px; color:var(--sk-primary); flex-shrink:0; margin-top:2px; }
  642.     .footer-bot {
  643.       border-top:1px solid var(--border);
  644.       padding:20px 24px; max-width:1340px; margin:0 auto;
  645.       display:flex; align-items:center; justify-content:space-between;
  646.       gap:16px; flex-wrap:wrap;
  647.     }
  648.     .footer-bot p { font-size:13px; color:var(--text-3); }
  649.     .footer-bot-links { display:flex; gap:20px; }
  650.     .footer-bot-links a { font-size:13px; color:var(--text-3); transition:color .2s; }
  651.     .footer-bot-links a:hover { color:var(--sk-primary); }
  653.     /* ══════════════════════════════════════════════════
  654.        FLOATING WHATSAPP
  655.        ══════════════════════════════════════════════════ */
  656.     .wa-float {
  657.       position:fixed; bottom:28px; right:28px; z-index:8000;
  658.       width:58px; height:58px; border-radius:50%;
  659.       background:#25D366;
  660.       display:flex; align-items:center; justify-content:center;
  661.       box-shadow:0 6px 24px rgba(37,211,102,.45);
  662.       transition:all .3s;
  663.     }
  664.     .wa-float::before {
  665.       content:''; position:absolute;
  666.       border:2px solid #25D366; border-radius:50%;
  667.       width:100%; height:100%;
  668.       animation:pulse-ring 2.2s ease-out infinite;
  669.     }
  670.     .wa-float:hover { transform:scale(1.1); box-shadow:0 10px 32px rgba(37,211,102,.55); }
  671.     .wa-float svg { width:30px; height:30px; fill:white; }
  673.     /* ══════════════════════════════════════════════════
  674.        RESPONSIVE
  675.        ══════════════════════════════════════════════════ */
  676.     /* ══════════════════════════════════════════════════
  677.        APP SCREENSHOTS SECTION
  678.        ══════════════════════════════════════════════════ */
  679.     #apercu { background:var(--bg); padding:96px 24px; }
  680.     .apercu-hdr { text-align:center; margin-bottom:56px; }
  681.     .apercu-hdr .sec-sub { margin:0 auto; }
  684.     /* ══════════════════════════════════════════════════
  685.        APP MOCKUP GRID (images prêtes avec cadres)
  686.        ══════════════════════════════════════════════════ */
  687.     .mockup-grid {
  688.       display:grid;
  689.       grid-template-columns:1fr 1fr;
  690.       gap:48px;
  691.       max-width:1200px;
  692.       margin:0 auto;
  693.     }
  694.     .mockup-item {
  695.       display:flex;
  696.       align-items:center;
  697.       justify-content:center;
  698.       transition:transform .35s, filter .35s;
  699.     }
  700.     .mockup-item:hover { transform:translateY(-8px) scale(1.02); }
  701.     .mockup-img {
  702.       width:100%;
  703.       height:auto;
  704.       display:block;
  705.       border-radius:20px;
  706.       filter: drop-shadow(0 24px 50px rgba(0,74,216,.18));
  707.       transition: filter .35s, transform .35s;
  708.     }
  709.     [data-theme="dark"] .mockup-img {
  710.       filter: drop-shadow(0 20px 40px rgba(0,74,216,.28));
  711.     }
  712.     .mockup-item:hover .mockup-img {
  713.       filter: drop-shadow(0 28px 50px rgba(0,74,216,.25));
  714.     }
  716.     /* ── Remove old phone rules ── */
  717.     @media (max-width:1100px) {
  718.       .feat-grid { grid-template-columns:repeat(2,1fr); }
  719.       .faq-wrap { grid-template-columns:1fr; gap:36px; }
  720.       .faq-img-side { position:static; max-width:700px; width:100%; }
  721.       .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
  722.     }
  723.     @media (max-width:900px) {
  724.       .mockup-grid { grid-template-columns:1fr 1fr; gap:24px; }
  725.       .counter-grid { grid-template-columns:repeat(2,1fr); }
  726.       .hero-inner { grid-template-columns:1fr; gap:36px; }
  727.       .hero-visual { display:none; }
  728.       .hero-img-mobile { display:block; }
  729.       .phones-track { gap:16px; }
  730.       .phone-frame { flex:0 0 160px; }
  731.       .phone-frame.featured { flex:0 0 175px; transform:translateY(-6px); }
  732.     }
  733.     @media (max-width:768px) {
  734.       /* Nav: hide links and auth buttons only — keep theme & lang */
  735.       .nav-links { display:none; }
  736.       .btn-login, .btn-demo-nav { display:none; }
  737.       .hamburger { display:flex; }
  739.       #contact { padding:48px 16px; }
  740.       .contact-card { width:95%; padding:52px 28px; border-radius:22px; }
  741.       section { padding:72px 16px; }
  742.       #accueil { padding:104px 16px 64px; }
  743.       .hero-card { padding:38px 28px; }
  745.       /* FAQ: image goes to top, full width */
  746.       .faq-img-side { display:block; position:static; }
  747.     }
  748.     @media (max-width:580px) {
  749.       .mockup-grid { grid-template-columns:1fr; gap:20px; }
  750.       .feat-grid { grid-template-columns:1fr; }
  751.       .counter-grid { grid-template-columns:1fr 1fr; }
  752.       .hero-btns { flex-direction:column; }
  753.       .hero-stores { gap:10px; }
  754.       .store-badge img { height:34px; }
  755.       .footer-top { grid-template-columns:1fr; }
  756.       .footer-bot { flex-direction:column; text-align:center; }
  757.       .wa-float { bottom:18px; right:18px; }
  758.       /* Phones: horizontal scroll on very small screens */
  759.       .phones-track { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:12px; }
  760.       .phones-track::-webkit-scrollbar { height:4px; }
  761.       .phones-track::-webkit-scrollbar-track { background:var(--bg-3); border-radius:4px; }
  762.       .phones-track::-webkit-scrollbar-thumb { background:var(--sk-primary); border-radius:4px; }
  763.       .phone-frame { flex:0 0 150px; }
  764.       .phone-frame.featured { flex:0 0 165px; transform:translateY(-4px); }
  765.     }
  766.   </style>
  767. </head>
  768. <body>
  770. <!-- ════════════════════════════════════
  771.      NAVBAR
  772.      ════════════════════════════════════ -->
  773. <nav class="navbar" id="navbar">
  774.   <div class="nav-inner">
  776.     <a href="#accueil" class="nav-logo">
  777.       <div class="nav-logo-mark">
  778.         <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
  779.           <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
  780.           <path d="M6 12.5v4c3 3 9 3 12 0v-4"/>
  781.         </svg>
  782.       </div>
  783.       <span class="nav-logo-name shimmer-txt">Skolya</span>
  784.     </a>
  786.     <ul class="nav-links">
  787.       <li><a href="#accueil" class="active">
  788.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  789.           <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
  790.         </svg>
  791.         <span class="t" data-fr="Accueil" data-en="Home">Accueil</span>
  792.       </a></li>
  793.       <li><a href="#fonctionnalites">
  794.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  795.           <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
  796.           <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
  797.         </svg>
  798.         <span class="t" data-fr="Fonctionnalités" data-en="Features">Fonctionnalités</span>
  799.       </a></li>
  800.       <li><a href="#faq">
  801.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  802.           <circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17" stroke-width="3"/>
  803.         </svg>
  804.         FAQ
  805.       </a></li>
  806.       <li><a href="#contact">
  807.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  808.           <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
  809.         </svg>
  810.         <span class="t" data-fr="Contact" data-en="Contact">Contact</span>
  811.       </a></li>
  812.     </ul>
  814.     <div class="nav-right">
  815.       <button class="btn-icon" id="themeBtn" title="Basculer le thème">
  816.         <svg id="iconSun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
  817.           <circle cx="12" cy="12" r="5"/>
  818.           <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
  819.           <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
  820.           <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
  821.           <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
  822.         </svg>
  823.         <svg id="iconMoon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="display:none">
  824.           <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
  825.         </svg>
  826.       </button>
  828.       <div class="lang-wrap">
  829.         <button class="lang-toggle" id="langBtn">
  830.           <span id="flagEl">🇫🇷</span>
  831.           <span id="codeEl">FR</span>
  832.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
  833.         </button>
  834.         <div class="lang-menu" id="langMenu">
  835.           <a href="#" onclick="setLang('fr');return false;">🇫🇷 Français</a>
  836.           <a href="#" onclick="setLang('en');return false;">🇬🇧 English</a>
  837.         </div>
  838.       </div>
  840.       <a href="/login" class="btn-login t" data-fr="Connexion" data-en="Login">Connexion</a>
  841.       <a href="#contact" class="btn-demo-nav t" data-fr="Demander une démo" data-en="Request a demo">Demander une démo</a>
  842.     </div>
  844.     <button class="hamburger" id="hambBtn" aria-label="Menu">
  845.       <span></span><span></span><span></span>
  846.     </button>
  847.   </div>
  848. </nav>
  850. <!-- Mobile nav -->
  851. <div class="mobile-nav" id="mobileNav">
  852.   <ul>
  853.     <li><a href="#accueil" onclick="closeMob()">
  854.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
  855.       <span class="t" data-fr="Accueil" data-en="Home">Accueil</span>
  856.     </a></li>
  857.     <li><a href="#fonctionnalites" onclick="closeMob()">
  858.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
  859.       <span class="t" data-fr="Fonctionnalités" data-en="Features">Fonctionnalités</span>
  860.     </a></li>
  861.     <li><a href="#faq" onclick="closeMob()">
  862.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17" stroke-width="3"/></svg>
  863.       FAQ
  864.     </a></li>
  865.     <li><a href="#contact" onclick="closeMob()">
  866.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
  867.       <span class="t" data-fr="Contact" data-en="Contact">Contact</span>
  868.     </a></li>
  869.   </ul>
  870.   <div class="mob-actions">
  871.     <a href="/login" class="btn-login t" data-fr="Connexion" data-en="Login">Connexion</a>
  872.     <a href="#contact" class="btn-demo-nav t" data-fr="Demander une démo" data-en="Request a demo">Demander une démo</a>
  873.   </div>
  874. </div>
  877. <!-- ════════════════════════════════════
  878.      HERO
  879.      ════════════════════════════════════ -->
  880. <section id="accueil">
  881.   <div class="hero-inner">
  882.     <div class="hero-card fi">
  883.       <div class="hero-sweep"></div>
  884.       <div class="hero-badge">
  885.         🎓 <span class="t" data-fr="Le futur du suivi scolaire commence ici" data-en="The future of school monitoring starts here">Le futur du suivi scolaire commence ici</span>
  886.       </div>
  888.       <!-- Image visible uniquement en responsive (inside card) -->
  889.       <div class="hero-img-mobile">
  890.         <img
  891.             src="{{ asset('assets-website/img/skolya/hero.jpeg') }}"           
  892.             alt="Enseignant et parents utilisent Skolya"
  893.           style="width:100%;border-radius:16px;object-fit:cover;margin-top:24px;display:block;
  894.                  box-shadow:0 12px 32px rgba(0,0,0,.2);"
  895.           loading="eager"
  896.         />
  897.       </div>
  899.       <h1 class="hero-title t"
  900.           data-fr="Réinventez le lien entre l'école et la maison"
  901.           data-en="Reinvent the link between school and home">
  902.         Réinventez le lien entre l'école et la maison
  903.       </h1>
  904.       <p class="hero-sub t"
  905.          data-fr="Skolya révolutionne l'éducation en connectant parents et établissements autour d'une solution digitale complète. Données en temps réel, gestion simplifiée et communication fluide pour une meilleure performance scolaire."
  906.          data-en="Skolya revolutionizes education by connecting parents and schools around a complete digital solution. Real-time data, simplified management and fluid communication for better academic performance.">
  907.         Skolya révolutionne l'éducation en connectant parents et établissements autour d'une solution digitale complète. Données en temps réel, gestion simplifiée et communication fluide pour une meilleure performance scolaire.
  908.       </p>
  909.       <div class="hero-btns">
  910.         <a href="#contact" class="btn-hero-1 t" data-fr="Demander une démo" data-en="Request a demo">Demander une démo</a>
  911.         <div class="hero-store-group">
  912.           <a href="#" class="store-badge" aria-label="Télécharger sur l'App Store" target="_blank" rel="noopener">
  913.             <img src="{{asset('assets-website/img/skolya/appstore_badge.png')}}">          </a>
  914.           <a href="#" class="store-badge" aria-label="Obtenir sur Google Play" target="_blank" rel="noopener">
  915.             <img src="{{asset('assets-website/img/skolya/playstore_badge.png')}}">
  916.           </a>
  917.         </div>
  918.       </div>
  919.     </div>
  921.     <div class="hero-visual fi" style="transition-delay:.15s">
  922.       <img
  923.         src="{{ asset('assets-website/img/skolya/hero.jpeg') }}" 
  924.         alt="Enseignant et parents utilisent Skolya"
  925.              
  926.         style="
  927.           width:100%; height:100%;
  928.           border-radius:24px;
  929.           object-fit:cover;
  930.           box-shadow:0 24px 60px rgba(0,74,216,.18), 0 6px 18px rgba(0,0,0,.1);
  931.           display:block;
  932.         "
  933.         loading="eager"
  934.       />
  935.     </div>
  936.   </div>
  937. </section>
  940. <!-- ════════════════════════════════════
  941.      COUNTER
  942.      ════════════════════════════════════ -->
  943. <section id="counter">
  944.   <div class="counter-grid">
  945.     <div class="counter-card fi">
  946.       <span class="ctr-emoji">👨‍🎓</span>
  947.       <div class="ctr-num" data-target="10000" data-fmt="kplus">0</div>
  948.       <span class="ctr-lbl t" data-fr="Utilisateurs actifs" data-en="Active users">Utilisateurs actifs</span>
  949.     </div>
  950.     <div class="counter-card fi" style="transition-delay:.1s">
  951.       <span class="ctr-emoji">⚡</span>
  952.       <div class="ctr-num" data-target="80" data-fmt="plus">0</div>
  953.       <span class="ctr-lbl t" data-fr="Fonctionnalités" data-en="Features">Fonctionnalités</span>
  954.     </div>
  955.     <div class="counter-card fi" style="transition-delay:.2s">
  956.       <span class="ctr-emoji">🏫</span>
  957.       <div class="ctr-num" data-target="120" data-fmt="plus">0</div>
  958.       <span class="ctr-lbl t" data-fr="Établissements partenaires" data-en="Partner schools">Établissements partenaires</span>
  959.     </div>
  960.     <div class="counter-card fi" style="transition-delay:.3s">
  961.       <span class="ctr-emoji">⭐</span>
  962.       <div class="ctr-num" data-target="98" data-fmt="pct">0</div>
  963.       <span class="ctr-lbl t" data-fr="Clients satisfaits" data-en="Satisfied clients">Clients satisfaits</span>
  964.     </div>
  965.   </div>
  966. </section>
  969. <!-- ════════════════════════════════════
  970.      FEATURES
  971.      ════════════════════════════════════ -->
  972. <section id="fonctionnalites">
  973.   <div class="container">
  974.     <div class="feat-hdr fi">
  975.       <div class="sec-badge">
  976.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
  977.         <span class="t" data-fr="Fonctionnalités" data-en="Features">Fonctionnalités</span>
  978.       </div>
  979.       <h2 class="sec-title t" data-fr="Tout ce dont vous avez besoin" data-en="Everything you need">Tout ce dont vous avez besoin</h2>
  980.       <p class="sec-sub t"
  981.          data-fr="Une solution complète pour moderniser la gestion de votre établissement scolaire et révolutionner l'expérience éducative."
  982.          data-en="A complete solution to modernize the management of your institution and revolutionize the educational experience.">
  983.         Une solution complète pour moderniser la gestion de votre établissement scolaire et révolutionner l'expérience éducative.
  984.       </p>
  985.     </div>
  987.     <div class="feat-grid">
  988.       <div class="feat-card fi">
  989.         <div class="feat-icon">
  990.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  991.             <path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>
  992.             <line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="15" y2="11"/>
  993.           </svg>
  994.         </div>
  995.         <div class="feat-name t" data-fr="Cahiers de Texte Numériques" data-en="Digital Lesson Logs">Cahiers de Texte Numériques</div>
  996.         <div class="feat-desc t"
  997.              data-fr="Chaque enseignant enregistre ses séances en temps réel : chapitre traité, contenu, date et durée. Admins et inspecteurs suivent la progression des cours dans chaque classe — sans déplacement, sans cahiers physiques."
  998.              data-en="Teachers log each session in real time: chapter, content, date and duration. Admins and inspectors track class progress remotely — no travel, no physical registers.">
  999.           Chaque enseignant enregistre ses séances en temps réel : chapitre traité, contenu, date et durée. Admins et inspecteurs suivent la progression des cours dans chaque classe — sans déplacement, sans cahiers physiques.
  1000.         </div>
  1001.       </div>
  1002.       <div class="feat-card fi" style="transition-delay:.06s">
  1003.         <div class="feat-icon"><svg viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" stroke-linecap="round"/></svg></div>
  1004.         <div class="feat-name t" data-fr="Fiche d'appel numérique" data-en="Digital attendance sheet">Fiche d'appel numérique</div>
  1005.         <div class="feat-desc t" data-fr="L'enseignant fait l'appel sur son téléphone ou tablette. En fin de semaine, la fiche d'appel est générée automatiquement avec toutes les absences enregistrées." data-en="Teachers take attendance on phone or tablet. At week's end, a full attendance sheet is automatically generated with all recorded absences.">L'enseignant fait l'appel sur son téléphone ou tablette. En fin de semaine, la fiche d'appel est générée automatiquement avec toutes les absences enregistrées.</div>
  1006.       </div>
  1007.       <div class="feat-card fi" style="transition-delay:.12s">
  1008.         <div class="feat-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
  1009.         <div class="feat-name t" data-fr="Gestion des finances" data-en="Finance management">Gestion des finances</div>
  1010.         <div class="feat-desc t" data-fr="Frais de scolarité gérés de A à Z : reçus de paiement générés automatiquement, notifications en temps réel sur l'app parent et relances automatiques des retards." data-en="School fees managed end-to-end: auto-generated payment receipts, real-time parent app notifications, and automatic late payment reminders.">Frais de scolarité gérés de A à Z : reçus de paiement générés automatiquement, notifications en temps réel sur l'app parent et relances automatiques des retards.</div>
  1011.       </div>
  1013.       <div class="feat-card fi" style="transition-delay:.24s">
  1014.         <div class="feat-icon"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18" stroke-width="3"/></svg></div>
  1015.         <div class="feat-name t" data-fr="App mobile parent" data-en="Parent mobile app">App mobile parent</div>
  1016.         <div class="feat-desc t" data-fr="Une app aussi fluide que WhatsApp, disponible sur Android et iOS. Le parent reçoit et consulte en temps réel toutes les informations concernant ses enfants." data-en="As smooth as WhatsApp, available on Android & iOS. Parents receive and consult real-time information about their children — anytime, anywhere.">Une app aussi fluide que WhatsApp, disponible sur Android et iOS. Le parent reçoit et consulte en temps réel toutes les informations concernant ses enfants.</div>
  1017.       </div>
  1018.       <div class="feat-card fi" style="transition-delay:.30s">
  1019.         <div class="feat-icon"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M7 11V7a5 5 0 0110 0v4" stroke-linecap="round"/></svg></div>
  1020.         <div class="feat-name t" data-fr="Bulletins & Statistiques" data-en="Report cards & Stats">Bulletins & Statistiques</div>
  1021.         <div class="feat-desc t" data-fr="Bulletins conformes aux nouvelles APC, statistiques détaillées pour suivre l'évolution de la classe et de chaque élève individuellement." data-en="APC-compliant report cards, detailed stats tracking class progress and each student's individual evolution.">Bulletins conformes aux nouvelles APC, statistiques détaillées pour suivre l'évolution de la classe et de chaque élève individuellement.</div>
  1022.       </div>
  1023.       <div class="feat-card fi" style="transition-delay:.36s">
  1024.         <div class="feat-icon"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
  1025.         <div class="feat-name t" data-fr="Messagerie instantanée" data-en="Instant messaging">Messagerie instantanée</div>
  1026.         <div class="feat-desc t" data-fr="Une messagerie intégrée connecte parents, enseignants et administration par salle de classe — pour une communication fluide et centralisée." data-en="Built-in messaging connects parents, teachers and admin by classroom — for fluid, centralized communication.">Une messagerie intégrée connecte parents, enseignants et administration par salle de classe — pour une communication fluide et centralisée.</div>
  1027.       </div>
  1028.     </div>
  1029.   </div>
  1030. </section>
  1033. <!-- ════════════════════════════════════
  1034.      APP SCREENSHOTS
  1035.      ════════════════════════════════════ -->
  1036. <section id="apercu">
  1037.   <div class="container">
  1038.     <div class="apercu-hdr fi">
  1039.       <div class="sec-badge">
  1040.         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18" stroke-width="3"/></svg>
  1041.         <span class="t" data-fr="Aperçu de l'application" data-en="App preview">Aperçu de l'application</span>
  1042.       </div>
  1043.       <h2 class="sec-title t" data-fr="Skolya dans votre poche" data-en="Skolya in your pocket">Skolya dans votre poche</h2>
  1044.       <p class="sec-sub t"
  1045.          data-fr="Une interface mobile soignée, pensée pour tous les acteurs de l'école. Intuitive, rapide, et disponible même hors connexion."
  1046.          data-en="A polished mobile interface, designed for every member of the school community. Intuitive, fast, and available even offline.">
  1047.         Une interface mobile soignée, pensée pour tous les acteurs de l'école. Intuitive, rapide, et disponible même hors connexion.
  1048.       </p>
  1049.     </div>
  1051.     <div class="mockup-grid">
  1053.       <div class="mockup-item fi" style="transition-delay:.08s">
  1054.         <img src="{{asset('assets-website/img/skolya/absences-retards.png')}}"
  1055.             alt="Absences et Retards — Skolya app"
  1056.              class="mockup-img" loading="lazy"/>
  1057.       </div>
  1059.       <div class="mockup-item fi" style="transition-delay:.18s">
  1060.         <img src="{{asset('assets-website/img/skolya/devoirs-scolarite.png')}}"
  1061.             alt="Devoirs et Scolarité — Skolya app"
  1062.              class="mockup-img" loading="lazy"/>
  1063.       </div>
  1065.     </div>
  1066.   </div>
  1067. </section>
  1070. <!-- ════════════════════════════════════
  1071.      FAQ
  1072.      ════════════════════════════════════ -->
  1073. <!-- ════════════════════════════════════
  1074.      FAQ
  1075.      ════════════════════════════════════ -->
  1076. <section id="faq">
  1077.   <div class="container">
  1078.     <div class="faq-wrap">
  1079.       <div class="faq-img-side fi">
  1080.         <div class="faq-direct-img">
  1081.           <img src="{{ asset('assets-website/img/skolya/laptop-screen.jpeg') }}" alt="Skolya">
  1082.         </div>
  1083.       </div>
  1085.       <div class="fi" style="transition-delay:.1s">
  1086.         <div class="sec-badge">
  1087.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17" stroke-width="3"/></svg>
  1088.           FAQ
  1089.         </div>
  1090.         <h2 class="sec-title t" data-fr="Questions fréquentes" data-en="Frequently asked questions">Questions fréquentes</h2>
  1091.         <p class="sec-sub t"
  1092.            data-fr="Tout ce que vous devez savoir sur Skolya et comment nous transformons votre établissement."
  1093.            data-en="Everything you need to know about Skolya and how we can transform your institution.">
  1094.           Tout ce que vous devez savoir sur Skolya et comment nous transformons votre établissement.
  1095.         </p>
  1097.         <div class="accordion">
  1098.           <div class="acc-item">
  1099.             <div class="acc-trigger" onclick="toggleAcc(this)">
  1100.               <span class="acc-q t" data-fr="Comment fonctionne Skolya ?" data-en="How does Skolya work?">Comment fonctionne Skolya ?</span>
  1101.               <span class="acc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>
  1102.             </div>
  1103.             <div class="acc-body"><div class="acc-body-inner t"
  1104.               data-fr="Skolya est une plateforme SaaS qui s'intègre facilement dans votre école. Après une rapide configuration, tous vos acteurs — administration, enseignants, parents, élèves — accèdent à leurs espaces personnalisés via web ou mobile."
  1105.               data-en="Skolya is a SaaS platform that integrates easily into your school. After a quick setup, all stakeholders — administration, teachers, parents, students — access their personalized spaces via web or mobile.">
  1106.               Skolya est une plateforme SaaS qui s'intègre facilement dans votre école. Après une rapide configuration, tous vos acteurs — administration, enseignants, parents, élèves — accèdent à leurs espaces personnalisés via web ou mobile.
  1107.             </div></div>
  1108.           </div>
  1109.           <div class="acc-item">
  1110.             <div class="acc-trigger" onclick="toggleAcc(this)">
  1111.               <span class="acc-q t" data-fr="Combien coûte Skolya ?" data-en="How much does Skolya cost?">Combien coûte Skolya ?</span>
  1112.               <span class="acc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>
  1113.             </div>
  1114.             <div class="acc-body"><div class="acc-body-inner t"
  1115.               data-fr="Nos offres sont adaptées à la taille et aux besoins de chaque établissement. Contactez-nous pour un devis personnalisé. Nous proposons des formules flexibles sans engagement long terme."
  1116.               data-en="Our pricing is adapted to the size and needs of each institution. Contact us for a personalized quote. We offer flexible plans with no long-term commitment.">
  1117.               Nos offres sont adaptées à la taille et aux besoins de chaque établissement. Contactez-nous pour un devis personnalisé. Nous proposons des formules flexibles sans engagement long terme.
  1118.             </div></div>
  1119.           </div>
  1120.           <div class="acc-item">
  1121.             <div class="acc-trigger" onclick="toggleAcc(this)">
  1122.               <span class="acc-q t" data-fr="La migration de mes données est-elle sécurisée ?" data-en="Is my data migration secure?">La migration de mes données est-elle sécurisée ?</span>
  1123.               <span class="acc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>
  1124.             </div>
  1125.             <div class="acc-body"><div class="acc-body-inner t"
  1126.               data-fr="Absolument. Nous utilisons un chiffrement de bout en bout et nos serveurs respectent les standards internationaux de sécurité. Votre équipe est accompagnée à chaque étape de la migration."
  1127.               data-en="Absolutely. We use end-to-end encryption and our servers comply with international security standards. Your team is guided every step of the way.">
  1128.               Absolument. Nous utilisons un chiffrement de bout en bout et nos serveurs respectent les standards internationaux de sécurité. Votre équipe est accompagnée à chaque étape de la migration.
  1129.             </div></div>
  1130.           </div>
  1131.           <div class="acc-item">
  1132.             <div class="acc-trigger" onclick="toggleAcc(this)">
  1133.               <span class="acc-q t" data-fr="Y a-t-il une application mobile ?" data-en="Is there a mobile app?">Y a-t-il une application mobile ?</span>
  1134.               <span class="acc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>
  1135.             </div>
  1136.             <div class="acc-body"><div class="acc-body-inner t"
  1137.               data-fr="Oui ! Skolya dispose d'applications natives iOS et Android. L'expérience mobile est pensée pour être fluide et intuitive même avec une connexion limitée, une priorité en Afrique."
  1138.               data-en="Yes! Skolya has native iOS and Android apps. The mobile experience is designed to be smooth even with a limited connection — a key priority in Africa.">
  1139.               Oui ! Skolya dispose d'applications natives iOS et Android. L'expérience mobile est pensée pour être fluide et intuitive même avec une connexion limitée, une priorité en Afrique.
  1140.             </div></div>
  1141.           </div>
  1142.           <div class="acc-item">
  1143.             <div class="acc-trigger" onclick="toggleAcc(this)">
  1144.               <span class="acc-q t" data-fr="Quelle est la durée de mise en place ?" data-en="What is the setup time?">Quelle est la durée de mise en place ?</span>
  1145.               <span class="acc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>
  1146.             </div>
  1147.             <div class="acc-body"><div class="acc-body-inner t"
  1148.               data-fr="En moyenne, un établissement est pleinement opérationnel en moins de 2 semaines. Notre équipe assure la formation de vos personnels et l'onboarding complet."
  1149.               data-en="On average, an institution is fully operational in less than 2 weeks. Our team handles staff training and complete onboarding.">
  1150.               En moyenne, un établissement est pleinement opérationnel en moins de 2 semaines. Notre équipe assure la formation de vos personnels et l'onboarding complet.
  1151.             </div></div>
  1152.           </div>
  1153.         </div>
  1154.       </div>
  1155.     </div>
  1156.   </div>
  1157. </section>
  1160. <!-- ════════════════════════════════════
  1161.      CONTACT
  1162.      ════════════════════════════════════ -->
  1163. <section id="contact">
  1164.   <div class="container">
  1165.     <div class="contact-card fi">
  1166.       <div class="contact-sweep"></div>
  1167.       <h2 class="contact-title t"
  1168.           data-fr="Envie de transformer l'image de votre établissement ?"
  1169.           data-en="Ready to transform your institution's image?">
  1170.         Envie de transformer l'image de votre établissement ?
  1171.       </h2>
  1172.       <p class="contact-sub t"
  1173.          data-fr="Rejoignez les établissements qui font confiance à Skolya pour digitaliser le suivi scolaire de leurs élèves. Notre équipe est disponible pour vous accompagner."
  1174.          data-en="Join the schools that trust Skolya to digitize their management. Our team is ready to support you.">
  1175.         Rejoignez les établissements qui font confiance à Skolya pour digitaliser le suivi scolaire de leurs élèves. Notre équipe est disponible pour vous accompagner.
  1176.       </p>
  1177.       <a href="https://wa.me/237696864017?text=Bonjour%2C%20je%20souhaite%20plus%20d%27informations%20sur%20Skolya" class="btn-wa" target="_blank" rel="noopener">
  1178.         <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
  1179.         <span class="t" data-fr="Nous contacter sur WhatsApp" data-en="Contact us on WhatsApp">Nous contacter sur WhatsApp</span>
  1180.       </a>
  1181.     </div>
  1182.   </div>
  1183. </section>
  1186. <!-- ════════════════════════════════════
  1187.      FOOTER
  1188.      ════════════════════════════════════ -->
  1189. <footer>
  1190.   <div class="footer-top">
  1191.     <div class="footer-brand">
  1192.       <a href="#accueil" class="nav-logo" style="margin-bottom:14px;display:inline-flex">
  1193.         <div class="nav-logo-mark">
  1194.           <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
  1195.             <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
  1196.             <path d="M6 12.5v4c3 3 9 3 12 0v-4"/>
  1197.           </svg>
  1198.         </div>
  1199.         <span class="nav-logo-name shimmer-txt">Skolya</span>
  1200.       </a>
  1201.       <p class="t"
  1202.          data-fr="La plateforme éducative intelligente qui révolutionne le suivi scolaire en Afrique."
  1203.          data-en="The intelligent education platform revolutionizing school management across Africa.">
  1204.         La plateforme éducative intelligente qui révolutionne le suivi scolaire en Afrique.
  1205.       </p>
  1206.       <div class="footer-socials">
  1207.         <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg></a>
  1208.         <a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a>
  1209.         <a href="#" aria-label="Twitter/X"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg></a>
  1210.       </div>
  1211.     </div>
  1213.     <div class="footer-col">
  1214.       <h5 class="t" data-fr="Produit" data-en="Product">Produit</h5>
  1215.       <ul>
  1216.         <li><a href="#fonctionnalites" class="t" data-fr="Fonctionnalités" data-en="Features">Fonctionnalités</a></li>
  1217.         <li><a href="#faq" class="t" data-fr="FAQ" data-en="FAQ">FAQ</a></li>
  1218.         <li><a href="#" class="t" data-fr="Documentation" data-en="Documentation">Documentation</a></li>
  1219.         <li><a href="#" class="t" data-fr="Nouveautés" data-en="Updates">Nouveautés</a></li>
  1220.       </ul>
  1221.     </div>
  1223.     <div class="footer-col">
  1224.       <h5 class="t" data-fr="Entreprise" data-en="Company">Entreprise</h5>
  1225.       <ul>
  1226.         <li><a href="#" class="t" data-fr="À propos" data-en="About us">À propos</a></li>
  1227.         <li><a href="#" class="t" data-fr="Blog" data-en="Blog">Blog</a></li>
  1228.         <li><a href="#" class="t" data-fr="Carrières" data-en="Careers">Carrières</a></li>
  1229.         <li><a href="#" class="t" data-fr="Partenaires" data-en="Partners">Partenaires</a></li>
  1230.       </ul>
  1231.     </div>
  1233.     <div class="footer-col">
  1234.       <h5 class="t" data-fr="Contact" data-en="Contact">Contact</h5>
  1235.       <div class="footer-clist">
  1236.         <div class="footer-ci">
  1237.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
  1238.           contact@skolya.cm
  1239.         </div>
  1240.         <div class="footer-ci">
  1241.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 014.69 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 013.62 1h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
  1242.           +237 696 864 017
  1243.         </div>
  1244.         <div class="footer-ci">
  1245.           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
  1246.           Yaoundé, Cameroun
  1247.         </div>
  1248.       </div>
  1249.     </div>
  1250.   </div>
  1252.   <div class="footer-bot">
  1253.     <p>© 2025 Skolya. <span class="t" data-fr="Tous droits réservés." data-en="All rights reserved.">Tous droits réservés.</span></p>
  1254.     <div class="footer-bot-links">
  1255.       <a href="#" class="t" data-fr="Confidentialité" data-en="Privacy">Confidentialité</a>
  1256.       <a href="#" class="t" data-fr="Conditions" data-en="Terms">Conditions</a>
  1257.     </div>
  1258.   </div>
  1259. </footer>
  1262. <!-- ════════════════════════════════════
  1263.      FLOATING WHATSAPP
  1264.      ════════════════════════════════════ -->
  1265. <a href="https://wa.me/237696864017?text=Bonjour%2C%20je%20souhaite%20plus%20d%27informations%20sur%20Skolya"
  1266.    class="wa-float" target="_blank" rel="noopener" aria-label="WhatsApp">
  1267.   <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
  1268. </a>
  1271. <!-- ════════════════════════════════════
  1272.      SCRIPTS
  1273.      ════════════════════════════════════ -->
  1274. <script>
  1275. (function(){
  1277.   /* ── THEME ── */
  1278.   const html = document.documentElement;
  1279.   const saved = localStorage.getItem('sk-theme') || 'light';
  1280.   html.setAttribute('data-theme', saved);
  1281.   applyIcon(saved);
  1283.   document.getElementById('themeBtn').addEventListener('click', () => {
  1284.     const next = html.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
  1285.     html.setAttribute('data-theme', next);
  1286.     localStorage.setItem('sk-theme', next);
  1287.     applyIcon(next);
  1288.   });
  1290.   function applyIcon(t) {
  1291.     document.getElementById('iconSun').style.display  = t==='light' ? 'block':'none';
  1292.     document.getElementById('iconMoon').style.display = t==='dark'  ? 'block':'none';
  1293.   }
  1295.   /* ── LANGUAGE ── */
  1296.   let lang = localStorage.getItem('sk-lang') || 'fr';
  1297.   applyLang(lang);
  1299.   window.setLang = function(l) {
  1300.     lang = l;
  1301.     localStorage.setItem('sk-lang', l);
  1302.     applyLang(l);
  1303.     document.getElementById('langMenu').classList.remove('open');
  1304.     document.getElementById('langBtn').classList.remove('open');
  1305.   };
  1307.   function applyLang(l) {
  1308.     document.getElementById('flagEl').textContent = l==='fr' ? '🇫🇷' : '🇬🇧';
  1309.     document.getElementById('codeEl').textContent = l.toUpperCase();
  1310.     document.querySelectorAll('.t').forEach(el => {
  1311.       const v = el.getAttribute('data-'+l);
  1312.       if (v) el.textContent = v;
  1313.     });
  1314.     document.documentElement.lang = l;
  1315.   }
  1317.   const langBtn = document.getElementById('langBtn');
  1318.   const langMenu = document.getElementById('langMenu');
  1319.   langBtn.addEventListener('click', e => {
  1320.     e.stopPropagation();
  1321.     langMenu.classList.toggle('open');
  1322.     langBtn.classList.toggle('open');
  1323.   });
  1324.   document.addEventListener('click', () => {
  1325.     langMenu.classList.remove('open');
  1326.     langBtn.classList.remove('open');
  1327.   });
  1329.   /* ── HAMBURGER ── */
  1330.   const hambBtn = document.getElementById('hambBtn');
  1331.   const mobileNav = document.getElementById('mobileNav');
  1332.   hambBtn.addEventListener('click', () => {
  1333.     hambBtn.classList.toggle('open');
  1334.     mobileNav.classList.toggle('open');
  1335.   });
  1336.   window.closeMob = function() {
  1337.     hambBtn.classList.remove('open');
  1338.     mobileNav.classList.remove('open');
  1339.   };
  1341.   /* ── NAVBAR ── */
  1342.   const navbar = document.getElementById('navbar');
  1343.   window.addEventListener('scroll', () => {
  1344.     navbar.classList.toggle('scrolled', window.scrollY > 20);
  1345.     highlightNav();
  1346.   }, { passive:true });
  1348.   const sections = document.querySelectorAll('section[id]');
  1349.   const links = document.querySelectorAll('.nav-links a');
  1350.   function highlightNav() {
  1351.     let cur = '';
  1352.     sections.forEach(s => { if (window.scrollY >= s.offsetTop - 90) cur = s.id; });
  1353.     links.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#'+cur));
  1354.   }
  1356.   /* ── COUNTERS ── */
  1357.   function animCounter(el) {
  1358.     if (el.dataset.done) return;
  1359.     el.dataset.done = '1';
  1360.     const target = +el.dataset.target;
  1361.     const fmt = el.dataset.fmt;
  1362.     const dur = 1800;
  1363.     const t0 = performance.now();
  1364.     (function tick(now) {
  1365.       const p = Math.min((now-t0)/dur, 1);
  1366.       const ease = 1 - Math.pow(1-p, 3);
  1367.       const v = Math.round(ease * target);
  1368.       if (fmt === 'kplus') el.textContent = (v>=1000 ? (v/1000).toFixed(1)+'K' : v) + '+';
  1369.       else if (fmt === 'pct') el.textContent = v + '%';
  1370.       else el.textContent = v + '+';
  1371.       if (p < 1) requestAnimationFrame(tick);
  1372.     })(t0);
  1373.   }
  1375.   /* ── INTERSECTION OBSERVER ── */
  1376.   const io = new IntersectionObserver(entries => {
  1377.     entries.forEach(e => {
  1378.       if (!e.isIntersecting) return;
  1379.       e.target.classList.add('visible');
  1380.       const num = e.target.querySelector('.ctr-num');
  1381.       if (num) animCounter(num);
  1382.     });
  1383.   }, { threshold:0.12 });
  1385.   document.querySelectorAll('.fi, .counter-card').forEach(el => io.observe(el));
  1387.   /* ── ACCORDION ── */
  1388.   window.toggleAcc = function(trigger) {
  1389.     const item = trigger.closest('.acc-item');
  1390.     const isOpen = item.classList.contains('open');
  1391.     document.querySelectorAll('.acc-item').forEach(i => {
  1392.       i.classList.remove('open');
  1393.       i.querySelector('.acc-body').classList.remove('open');
  1394.     });
  1395.     if (!isOpen) {
  1396.       item.classList.add('open');
  1397.       item.querySelector('.acc-body').classList.add('open');
  1398.     }
  1399.   };
  1401. })();
  1402. </script>
  1404. </body>
  1405. </html>