templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  6.   <title>SHY'N IMPACT • Brillez durablement | Formation & Événementiel</title>
  7.      {% block stylesheets %}
  8.   <!-- Google Fonts -->
  9.   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  10.   <!-- Font Awesome 6 -->
  11.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  12.   <!-- AOS Animation -->
  13.   <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  14.   <!-- Swiper -->
  15.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  16.   
  17.   <style>
  18.     :root {
  19.       --primary: #F56107;
  20.       --primary-dark: #d94f00;
  21.       --primary-light: #ff8c42;
  22.       --secondary: #175912;
  23.       --secondary-light: #1f7a18;
  24.       --dark: #1a1814;
  25.       --darker: #0f0e0a;
  26.       --cream: #fef9f3;
  27.       --white: #ffffff;
  28.       --gray-light: #f5f0eb;
  29.       --gold: #d4af37;
  30.       --text: #2c2416;
  31.       --text-light: #6b6358;
  32.       --shadow-sm: 0 4px 20px rgba(0,0,0,0.06);
  33.       --shadow-md: 0 15px 40px rgba(0,0,0,0.08);
  34.       --shadow-lg: 0 30px 60px rgba(0,0,0,0.12);
  35.       --radius-sm: 16px;
  36.       --radius-md: 24px;
  37.       --radius-lg: 36px;
  38.       --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  39.     }
  41.     * {
  42.       margin: 0;
  43.       padding: 0;
  44.       box-sizing: border-box;
  45.     }
  47.     body {
  48.       font-family: 'Inter', system-ui, sans-serif;
  49.       background: var(--cream);
  50.       color: var(--text);
  51.       line-height: 1.6;
  52.       overflow-x: hidden;
  53.     }
  55.     h1, h2, h3 {
  56.       font-family: 'Playfair Display', Georgia, serif;
  57.       font-weight: 700;
  58.       letter-spacing: -0.5px;
  59.     }
  61.     .container {
  62.       max-width: 1320px;
  63.       margin: 0 auto;
  64.       padding: 0 32px;
  65.     }
  67.     /* Scrollbar */
  68.     ::-webkit-scrollbar { width: 8px; }
  69.     ::-webkit-scrollbar-track { background: #f1e8df; }
  70.     ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
  72.     /* Preloader */
  73.     .preloader {
  74.       position: fixed;
  75.       inset: 0;
  76.       background: var(--dark);
  77.       z-index: 9999;
  78.       display: flex;
  79.       align-items: center;
  80.       justify-content: center;
  81.       transition: opacity 0.6s, visibility 0.6s;
  82.     }
  83.     .preloader.hidden { opacity: 0; visibility: hidden; }
  84.     .loader-logo {
  85.       font-size: 3rem;
  86.       font-weight: 700;
  87.       color: var(--primary);
  88.       animation: pulse 1.2s infinite;
  89.       font-family: 'Playfair Display', serif;
  90.     }
  91.     @keyframes pulse {
  92.       0%, 100% { transform: scale(1); opacity: 0.9; }
  93.       50% { transform: scale(1.08); opacity: 1; }
  94.     }
  96.     /* Navigation */
  97.     .navbar {
  98.       display: flex;
  99.       justify-content: space-between;
  100.       align-items: center;
  101.       padding: 18px 40px;
  102.       background: rgba(26, 24, 20, 0.82);
  103.       backdrop-filter: blur(20px);
  104.       -webkit-backdrop-filter: blur(20px);
  105.       position: fixed;
  106.       width: 100%;
  107.       top: 0;
  108.       z-index: 1000;
  109.       transition: var(--transition);
  110.       border-bottom: 1px solid rgba(245,97,7,0.18);
  111.     }
  112.     .navbar.scrolled {
  113.       padding: 12px 40px;
  114.       background: rgba(15, 14, 10, 0.92);
  115.       box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  116.     }
  117.     .logo {
  118.       font-size: 2rem;
  119.       font-weight: 700;
  120.       color: var(--white);
  121.       letter-spacing: -0.5px;
  122.       text-decoration: none;
  123.       display: flex;
  124.       align-items: center;
  125.       gap: 6px;
  126.     }
  127.     .logo span { color: var(--primary); }
  128.     .nav-links {
  129.       display: flex;
  130.       gap: 32px;
  131.       align-items: center;
  132.     }
  133.     .nav-links a {
  134.       text-decoration: none;
  135.       color: rgba(255,255,255,0.85);
  136.       font-weight: 500;
  137.       font-size: 0.95rem;
  138.       transition: var(--transition);
  139.       position: relative;
  140.       padding: 6px 0;
  141.     }
  142.     .nav-links a::after {
  143.       content: '';
  144.       position: absolute;
  145.       bottom: 0;
  146.       left: 0;
  147.       width: 0;
  148.       height: 2px;
  149.       background: var(--primary);
  150.       transition: width 0.3s;
  151.     }
  152.     .nav-links a:hover { color: var(--white); }
  153.     .nav-links a:hover::after { width: 100%; }
  154.     .btn-nav {
  155.       background: var(--primary);
  156.       color: white;
  157.       padding: 10px 24px;
  158.       border-radius: 40px;
  159.       font-weight: 600;
  160.       transition: var(--transition);
  161.     }
  162.     .btn-nav:hover {
  163.       background: var(--primary-dark);
  164.       transform: translateY(-2px);
  165.       box-shadow: 0 10px 25px rgba(245,97,7,0.4);
  166.     }
  168.     /* Hero */
  169.     .hero-slider {
  170.       width: 100%;
  171.       height: 100vh;
  172.       min-height: 650px;
  173.       position: relative;
  174.     }
  175.     .swiper-hero { width: 100%; height: 100%; }
  176.     .hero-slide {
  177.       background-size: cover;
  178.       background-position: center;
  179.       display: flex;
  180.       align-items: center;
  181.       position: relative;
  182.     }
  183.     .hero-overlay {
  184.       position: absolute;
  185.       inset: 0;
  186.       background: linear-gradient(135deg, rgba(15,14,10,0.8) 0%, rgba(23,30,20,0.5) 70%, rgba(245,97,7,0.25) 100%);
  187.     }
  188.     .hero-content {
  189.       position: relative;
  190.       z-index: 2;
  191.       max-width: 750px;
  192.       margin-left: 8%;
  193.       color: white;
  194.       animation: fadeInUp 1s ease;
  195.     }
  196.     @keyframes fadeInUp {
  197.       from { opacity: 0; transform: translateY(40px); }
  198.       to { opacity: 1; transform: translateY(0); }
  199.     }
  200.     .hero-tag {
  201.       display: inline-block;
  202.       background: rgba(245,97,7,0.2);
  203.       border: 1px solid rgba(245,97,7,0.4);
  204.       padding: 8px 20px;
  205.       border-radius: 40px;
  206.       font-size: 0.9rem;
  207.       letter-spacing: 2px;
  208.       text-transform: uppercase;
  209.       margin-bottom: 24px;
  210.       backdrop-filter: blur(8px);
  211.     }
  212.     .hero-content h1 {
  213.       font-size: 4.2rem;
  214.       line-height: 1.1;
  215.       margin-bottom: 20px;
  216.       text-shadow: 2px 4px 20px rgba(0,0,0,0.5);
  217.     }
  218.     .hero-content p {
  219.       font-size: 1.35rem;
  220.       margin-bottom: 36px;
  221.       font-weight: 300;
  222.     }
  223.     .hero-buttons {
  224.       display: flex;
  225.       gap: 18px;
  226.       flex-wrap: wrap;
  227.     }
  228.     .btn {
  229.       display: inline-flex;
  230.       align-items: center;
  231.       gap: 10px;
  232.       padding: 14px 36px;
  233.       border-radius: 50px;
  234.       font-weight: 600;
  235.       text-decoration: none;
  236.       transition: var(--transition);
  237.       cursor: pointer;
  238.       border: none;
  239.       font-family: 'Inter', sans-serif;
  240.     }
  241.     .btn-primary {
  242.       background: var(--primary);
  243.       color: white;
  244.       box-shadow: 0 12px 28px rgba(245,97,7,0.35);
  245.     }
  246.     .btn-primary:hover {
  247.       background: #e85500;
  248.       transform: translateY(-3px);
  249.       box-shadow: 0 18px 35px rgba(245,97,7,0.5);
  250.     }
  251.     .btn-outline-white {
  252.       background: transparent;
  253.       border: 2px solid white;
  254.       color: white;
  255.     }
  256.     .btn-outline-white:hover {
  257.       background: white;
  258.       color: var(--dark);
  259.     }
  260.     .swiper-pagination-bullet {
  261.       background: white;
  262.       opacity: 0.5;
  263.       width: 12px;
  264.       height: 12px;
  265.     }
  266.     .swiper-pagination-bullet-active {
  267.       background: var(--primary);
  268.       opacity: 1;
  269.       transform: scale(1.3);
  270.     }
  272.     /* Sections communes */
  273.     section {
  274.       padding: 110px 0;
  275.       position: relative;
  276.     }
  277.     .section-header {
  278.       text-align: center;
  279.       margin-bottom: 70px;
  280.     }
  281.     .section-label {
  282.       display: inline-block;
  283.       color: var(--primary);
  284.       font-weight: 700;
  285.       letter-spacing: 3px;
  286.       text-transform: uppercase;
  287.       font-size: 0.85rem;
  288.       margin-bottom: 12px;
  289.     }
  290.     .section-title {
  291.       font-size: 3rem;
  292.       color: var(--secondary);
  293.       margin-bottom: 18px;
  294.       position: relative;
  295.       display: inline-block;
  296.     }
  297.     .section-title::after {
  298.       content: '';
  299.       display: block;
  300.       width: 80px;
  301.       height: 4px;
  302.       background: var(--primary);
  303.       margin: 16px auto 0;
  304.       border-radius: 4px;
  305.     }
  306.     .section-subtitle {
  307.       color: var(--text-light);
  308.       max-width: 650px;
  309.       margin: 0 auto;
  310.       font-size: 1.1rem;
  311.     }
  313.     /* Cards services */
  314.     .services-grid {
  315.       display: grid;
  316.       grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  317.       gap: 36px;
  318.     }
  319.     .service-card {
  320.       background: var(--white);
  321.       border-radius: var(--radius-md);
  322.       padding: 48px 32px 36px;
  323.       position: relative;
  324.       box-shadow: var(--shadow-sm);
  325.       transition: var(--transition);
  326.       border: 1px solid rgba(0,0,0,0.04);
  327.       overflow: hidden;
  328.     }
  329.     .service-card::before {
  330.       content: '';
  331.       position: absolute;
  332.       top: 0;
  333.       left: 0;
  334.       width: 100%;
  335.       height: 6px;
  336.       background: linear-gradient(90deg, var(--primary), var(--secondary));
  337.       transform: scaleX(0);
  338.       transform-origin: left;
  339.       transition: transform 0.4s ease;
  340.     }
  341.     .service-card:hover::before {
  342.       transform: scaleX(1);
  343.     }
  344.     .service-card:hover {
  345.       transform: translateY(-10px);
  346.       box-shadow: var(--shadow-lg);
  347.     }
  348.     .service-icon {
  349.       width: 70px;
  350.       height: 70px;
  351.       background: rgba(245,97,7,0.08);
  352.       display: flex;
  353.       align-items: center;
  354.       justify-content: center;
  355.       border-radius: 20px;
  356.       margin-bottom: 24px;
  357.       font-size: 2rem;
  358.       color: var(--primary);
  359.     }
  360.     .service-card h3 {
  361.       font-size: 1.9rem;
  362.       margin-bottom: 12px;
  363.       color: var(--secondary);
  364.     }
  365.     .badge-premium {
  366.       display: inline-block;
  367.       background: var(--secondary);
  368.       color: white;
  369.       padding: 5px 16px;
  370.       border-radius: 20px;
  371.       font-size: 0.8rem;
  372.       font-weight: 600;
  373.       letter-spacing: 0.5px;
  374.       margin-bottom: 16px;
  375.     }
  376.     .service-list {
  377.       list-style: none;
  378.       margin-top: 16px;
  379.     }
  380.     .service-list li {
  381.       padding: 6px 0;
  382.       display: flex;
  383.       align-items: center;
  384.       gap: 10px;
  385.       color: var(--text-light);
  386.     }
  387.     .service-list i {
  388.       color: var(--secondary);
  389.       font-size: 1rem;
  390.     }
  392.     /* Section alternée */
  393.     .bg-dark-section {
  394.       background: var(--dark);
  395.       color: white;
  396.     }
  397.     .bg-dark-section .section-title { color: white; }
  398.     .bg-dark-section .section-subtitle { color: rgba(255,255,255,0.7); }
  400.     /* Timeline premium */
  401.     .timeline-wrapper {
  402.       position: relative;
  403.       padding: 40px 0;
  404.     }
  405.     .timeline-line {
  406.       position: absolute;
  407.       left: 50%;
  408.       transform: translateX(-50%);
  409.       width: 3px;
  410.       height: 100%;
  411.       background: linear-gradient(to bottom, var(--primary), var(--secondary), var(--primary));
  412.       border-radius: 2px;
  413.       box-shadow: 0 0 20px rgba(245,97,7,0.3);
  414.     }
  415.     .timeline-item {
  416.       display: flex;
  417.       justify-content: center;
  418.       align-items: center;
  419.       margin-bottom: 70px;
  420.       position: relative;
  421.       width: 100%;
  422.     }
  423.     .timeline-item:nth-child(odd) .timeline-card {
  424.       margin-right: 52%;
  425.       text-align: right;
  426.     }
  427.     .timeline-item:nth-child(even) .timeline-card {
  428.       margin-left: 52%;
  429.     }
  430.     .timeline-card {
  431.       width: 42%;
  432.       background: rgba(255,255,255,0.05);
  433.       backdrop-filter: blur(12px);
  434.       border: 1px solid rgba(255,255,255,0.1);
  435.       padding: 30px;
  436.       border-radius: 24px;
  437.       position: relative;
  438.       transition: var(--transition);
  439.     }
  440.     .timeline-card:hover {
  441.       background: rgba(245,97,7,0.08);
  442.       border-color: var(--primary);
  443.       transform: scale(1.02);
  444.     }
  445.     .timeline-year {
  446.       font-size: 2.8rem;
  447.       font-weight: 800;
  448.       color: var(--primary);
  449.       font-family: 'Playfair Display', serif;
  450.       line-height: 1;
  451.     }
  452.     .timeline-dot {
  453.       width: 20px;
  454.       height: 20px;
  455.       background: var(--primary);
  456.       border-radius: 50%;
  457.       position: absolute;
  458.       left: 50%;
  459.       transform: translateX(-50%);
  460.       z-index: 5;
  461.       border: 4px solid var(--dark);
  462.       box-shadow: 0 0 20px rgba(245,97,7,0.7);
  463.     }
  464.     @media (max-width: 900px) {
  465.       .timeline-line { left: 24px; }
  466.       .timeline-item { justify-content: flex-start; padding-left: 60px; }
  467.       .timeline-item:nth-child(odd) .timeline-card,
  468.       .timeline-item:nth-child(even) .timeline-card {
  469.         margin: 0;
  470.         width: 85%;
  471.         text-align: left;
  472.       }
  473.       .timeline-dot { left: 24px; }
  474.     }
  476.     /* Réalisations slider */
  477.     .realisations-section {
  478.       background: linear-gradient(180deg, #fef9f3 0%, #fff5ed 100%);
  479.       border-radius: 60px 60px 0 0;
  480.     }
  481.     .swiper-real {
  482.       padding: 30px 10px 60px;
  483.     }
  484.     .real-card {
  485.       background: white;
  486.       border-radius: 28px;
  487.       padding: 32px 24px;
  488.       text-align: center;
  489.       box-shadow: var(--shadow-md);
  490.       transition: var(--transition);
  491.       border: 1px solid rgba(0,0,0,0.03);
  492.     }
  493.     .real-card:hover {
  494.       transform: translateY(-8px);
  495.       box-shadow: var(--shadow-lg);
  496.     }
  497.     .real-card i {
  498.       font-size: 2.8rem;
  499.       color: var(--primary);
  500.       margin-bottom: 16px;
  501.     }
  503.     /* Contact */
  504.     .contact-grid {
  505.       display: grid;
  506.       grid-template-columns: 1fr 1fr;
  507.       gap: 48px;
  508.       background: white;
  509.       border-radius: 40px;
  510.       padding: 56px;
  511.       box-shadow: var(--shadow-lg);
  512.     }
  513.     .input-group {
  514.       margin-bottom: 22px;
  515.     }
  516.     .input-group input,
  517.     .input-group textarea {
  518.       width: 100%;
  519.       padding: 16px 20px;
  520.       border: 2px solid #e8e0d5;
  521.       border-radius: 16px;
  522.       font-family: 'Inter', sans-serif;
  523.       transition: var(--transition);
  524.       background: #fefcf9;
  525.     }
  526.     .input-group input:focus,
  527.     .input-group textarea:focus {
  528.       outline: none;
  529.       border-color: var(--primary);
  530.       box-shadow: 0 0 0 4px rgba(245,97,7,0.08);
  531.     }
  532.     .map-frame {
  533.       border-radius: 24px;
  534.       overflow: hidden;
  535.       height: 340px;
  536.       box-shadow: var(--shadow-sm);
  537.     }
  538.     .contact-info {
  539.       display: flex;
  540.       flex-direction: column;
  541.       gap: 18px;
  542.       margin-top: 24px;
  543.     }
  544.     .contact-info-item {
  545.       display: flex;
  546.       align-items: center;
  547.       gap: 14px;
  548.       font-size: 1.05rem;
  549.     }
  550.     .contact-info-item i {
  551.       width: 40px;
  552.       height: 40px;
  553.       background: rgba(245,97,7,0.1);
  554.       border-radius: 50%;
  555.       display: flex;
  556.       align-items: center;
  557.       justify-content: center;
  558.       color: var(--primary);
  559.     }
  561.     footer {
  562.       background: var(--darker);
  563.       color: #b0a99e;
  564.       padding: 50px 0 30px;
  565.       text-align: center;
  566.     }
  567.     .footer-brand {
  568.       font-size: 2rem;
  569.       font-weight: 700;
  570.       color: var(--primary);
  571.     }
  573.     /* Responsive */
  574.     @media (max-width: 768px) {
  575.       .navbar { padding: 14px 20px; }
  576.       .nav-links { display: none; }
  577.       .hero-content h1 { font-size: 2.8rem; }
  578.       .section-title { font-size: 2.2rem; }
  579.       .contact-grid { grid-template-columns: 1fr; padding: 28px; }
  580.     }
  581.   </style>
  582.   {% endblock stylesheets %}
  583. </head>
  584. {% block body %}
  585. <body>
  586.   <!-- Preloader -->
  587.   <div class="preloader" id="preloader">
  588.     <div class="loader-logo">SHY'N <span style="color:white;">IMPACT</span></div>
  589.   </div>
  591.   <!-- Navigation -->
  592.   <nav class="navbar" id="navbar">
  593.     <a href="#" class="logo">SHY'N<span>IMPACT</span></a>
  594.     <div class="nav-links">
  595.       <a href="#formations">Formation</a>
  596.       <a href="#communication">Communication</a>
  597.       <a href="#agency">Agency</a>
  598.       <a href="#evolution">Évolution</a>
  599.       <a href="#contact" class="btn-nav">Contact</a>
  600.     </div>
  601.   </nav>
  603.   <!-- Hero Slider -->
  604.   <div class="hero-slider">
  605.     <div class="swiper swiper-hero">
  606.       <div class="swiper-wrapper">
  607.         <div class="swiper-slide hero-slide" style="background-image: url('https://images.pexels.com/photos/3184419/pexels-photo-3184419.jpeg?auto=compress&cs=tinysrgb&w=1920');">
  608.           <div class="hero-overlay"></div>
  609.           <div class="hero-content">
  610.             <span class="hero-tag">✨ Brillez durablement</span>
  611.             <h1>L'excellence événementielle</h1>
  612.             <p>Originalité, compétence et prestige pour des moments inoubliables.</p>
  613.             <div class="hero-buttons">
  614.               <a href="#formations" class="btn btn-primary"><i class="fas fa-graduation-cap"></i> Nos formations</a>
  615.               <a href="#contact" class="btn btn-outline-white"><i class="fas fa-calendar-check"></i> Demander un devis</a>
  616.             </div>
  617.           </div>
  618.         </div>
  619.         <div class="swiper-slide hero-slide" style="background-image: url('https://images.pexels.com/photos/7646818/pexels-photo-7646818.jpeg?auto=compress&cs=tinysrgb&w=1920');">
  620.           <div class="hero-overlay"></div>
  621.           <div class="hero-content">
  622.             <span class="hero-tag">📚 Agréé FDFP</span>
  623.             <h1>SHY'N Formation</h1>
  624.             <p>Capital Humain & expertise certifiée avec partenaires internationaux.</p>
  625.             <div class="hero-buttons">
  626.               <a href="#formations" class="btn btn-primary">Découvrir</a>
  627.             </div>
  628.           </div>
  629.         </div>
  630.         <div class="swiper-slide hero-slide" style="background-image: url('https://images.pexels.com/photos/169198/pexels-photo-169198.jpeg?auto=compress&cs=tinysrgb&w=1920');">
  631.           <div class="hero-overlay"></div>
  632.           <div class="hero-content">
  633.             <span class="hero-tag">💍 La fée des noces</span>
  634.             <h1>SHY'N Agency</h1>
  635.             <p>Wedding planning, hôtesses & stewards d'exception.</p>
  636.             <a href="#agency" class="btn btn-primary"><i class="fas fa-gem"></i> Nos prestations</a>
  637.           </div>
  638.         </div>
  639.       </div>
  640.       <div class="swiper-pagination"></div>
  641.       <div class="swiper-button-next" style="color:white;"></div>
  642.       <div class="swiper-button-prev" style="color:white;"></div>
  643.     </div>
  644.   </div>
  646.   <!-- Formations -->
  647.   <section id="formations" data-aos="fade-up">
  648.     <div class="container">
  649.       <div class="section-header">
  650.         <span class="section-label">Département Formation</span>
  651.         <h2 class="section-title">SHY'N Formation</h2>
  652.         <p class="section-subtitle">Consultants experts, journalisme spécialisé, numérique. Agréé FDFP avec attestation et kit inclus.</p>
  653.       </div>
  654.       <div class="services-grid">
  655.         <div class="service-card" data-aos="fade-right" data-aos-delay="100">
  656.           <div class="service-icon"><i class="fas fa-chalkboard-teacher"></i></div>
  657.           <h3>Formations certifiantes</h3>
  658.           <span class="badge-premium">FDFP</span>
  659.           <p>Attestation, sac, casquette, trousse, t-shirt. Suivi pédagogique personnalisé.</p>
  660.           <ul class="service-list">
  661.             <li><i class="fas fa-check-circle"></i> JRI Média Global (INA France)</li>
  662.             <li><i class="fas fa-check-circle"></i> Journalisme financier (Bloomberg)</li>
  663.             <li><i class="fas fa-check-circle"></i> 250 journalistes (EPJT/CFI)</li>
  664.           </ul>
  665.         </div>
  666.         <div class="service-card" data-aos="fade-up" data-aos-delay="200">
  667.           <div class="service-icon"><i class="fas fa-globe-africa"></i></div>
  668.           <h3>International</h3>
  669.           <span class="badge-premium">Experts</span>
  670.           <p>Interventions nationales & internationales. Mobilisation du capital humain et optimisation des talents.</p>
  671.         </div>
  672.         <div class="service-card" data-aos="fade-left" data-aos-delay="300">
  673.           <div class="service-icon"><i class="fas fa-user-graduate"></i></div>
  674.           <h3>Suivi & Impact</h3>
  675.           <p>Bilan pédagogique, accompagnement managers, changements organisationnels durables.</p>
  676.         </div>
  677.       </div>
  678.     </div>
  679.   </section>
  681.   <!-- Communication -->
  682.   <section id="communication" class="bg-dark-section" data-aos="fade-up">
  683.     <div class="container">
  684.       <div class="section-header">
  685.         <span class="section-label">Agence Conseil</span>
  686.         <h2 class="section-title">SHY'N Communication</h2>
  687.         <p class="section-subtitle">Créativité, stratégie digitale & offline. Salons, galas, séminaires institutionnels.</p>
  688.       </div>
  689.       <div class="services-grid">
  690.         <div class="service-card" style="background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);" data-aos="zoom-in">
  691.           <div class="service-icon"><i class="fas fa-bullhorn"></i></div>
  692.           <h3 style="color:white;">Stratégie 360</h3>
  693.           <p style="color: rgba(255,255,255,0.8);">Réseaux sociaux, SEO, développement web, campagnes TV/radio/presse.</p>
  694.         </div>
  695.         <div class="service-card" style="background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);" data-aos="zoom-in" data-aos-delay="150">
  696.           <div class="service-icon"><i class="fas fa-glass-cheers"></i></div>
  697.           <h3 style="color:white;">Événements prestige</h3>
  698.           <p style="color: rgba(255,255,255,0.8);">DISAF, Gala Chefs d'États, soirées privées, colloques internationaux.</p>
  699.         </div>
  700.       </div>
  701.     </div>
  702.   </section>
  704.   <!-- Agency -->
  705.   <section id="agency" data-aos="fade-up">
  706.     <div class="container">
  707.       <div class="section-header">
  708.         <span class="section-label">Prestations haut de gamme</span>
  709.         <h2 class="section-title">SHY'N Agency</h2>
  710.         <p class="section-subtitle">La fée des noces & prestations distinguées.</p>
  711.       </div>
  712.       <div class="services-grid">
  713.         <div class="service-card" data-aos="flip-left">
  714.           <div class="service-icon"><i class="fas fa-heart"></i></div>
  715.           <h3>Wedding Planning</h3>
  716.           <p>Mariages de charme atypique, coordination complète, conseils exclusifs.</p>
  717.         </div>
  718.         <div class="service-card" data-aos="flip-right">
  719.           <div class="service-icon"><i class="fas fa-user-tie"></i></div>
  720.           <h3>Hôtesses & Stewards</h3>
  721.           <p>Mannequins, casting professionnel pour vos événements d'exception.</p>
  722.         </div>
  723.       </div>
  724.     </div>
  725.   </section>
  727.   <!-- Timeline Évolution -->
  728.   <section id="evolution" class="bg-dark-section" data-aos="fade-up">
  729.     <div class="container">
  730.       <div class="section-header">
  731.         <span class="section-label">Notre histoire</span>
  732.         <h2 class="section-title">2010 - 2026</h2>
  733.         <p class="section-subtitle">Une décennie d'impact et de perfectionnement.</p>
  734.       </div>
  735.       <div class="timeline-wrapper">
  736.         <div class="timeline-line"></div>
  737.         <div class="timeline-item" data-aos="fade-right">
  738.           <div class="timeline-dot"></div>
  739.           <div class="timeline-card">
  740.             <div class="timeline-year">2010</div>
  741.             <h4>Création de SHY'N IMPACT</h4>
  742.             <p>Lancement des premières formations en communication et journalisme.</p>
  743.           </div>
  744.         </div>
  745.         <div class="timeline-item" data-aos="fade-left">
  746.           <div class="timeline-dot"></div>
  747.           <div class="timeline-card">
  748.             <div class="timeline-year">2015</div>
  749.             <h4>Partenariat INA / Bloomberg</h4>
  750.             <p>Formations JRI et journalistes financiers africains.</p>
  751.           </div>
  752.         </div>
  753.         <div class="timeline-item" data-aos="fade-right">
  754.           <div class="timeline-dot"></div>
  755.           <div class="timeline-card">
  756.             <div class="timeline-year">2018</div>
  757.             <h4>Agence événementielle</h4>
  758.             <p>DISAF, salons internationaux et galas institutionnels.</p>
  759.           </div>
  760.         </div>
  761.         <div class="timeline-item" data-aos="fade-left">
  762.           <div class="timeline-dot"></div>
  763.           <div class="timeline-card">
  764.             <div class="timeline-year">2022</div>
  765.             <h4>SHY'N Agency Weddings</h4>
  766.             <p>Lancement wedding planning & hôtesses/stewards.</p>
  767.           </div>
  768.         </div>
  769.         <div class="timeline-item" data-aos="fade-right">
  770.           <div class="timeline-dot"></div>
  771.           <div class="timeline-card">
  772.             <div class="timeline-year">2026</div>
  773.             <h4>Expansion panafricaine</h4>
  774.             <p>Certifications innovantes et présence internationale renforcée.</p>
  775.           </div>
  776.         </div>
  777.       </div>
  778.     </div>
  779.   </section>
  781.   <!-- Réalisations Slider -->
  782.   <section class="realisations-section" data-aos="fade-up">
  783.     <div class="container">
  784.       <div class="section-header">
  785.         <span class="section-label">Portfolio</span>
  786.         <h2 class="section-title">Nos réalisations</h2>
  787.       </div>
  788.       <div class="swiper swiper-real">
  789.         <div class="swiper-wrapper">
  790.           <div class="swiper-slide"><div class="real-card"><i class="fas fa-camera-retro"></i><h4>JRI / INA France</h4><p>Formation 250 journalistes</p></div></div>
  791.           <div class="swiper-slide"><div class="real-card"><i class="fas fa-chart-bar"></i><h4>Bloomberg</h4><p>Journalisme financier</p></div></div>
  792.           <div class="swiper-slide"><div class="real-card"><i class="fas fa-gavel"></i><h4>Gala Chefs d'État</h4><p>Protocole international</p></div></div>
  793.           <div class="swiper-slide"><div class="real-card"><i class="fas fa-ring"></i><h4>Mariages prestige</h4><p>Coordination luxe</p></div></div>
  794.           <div class="swiper-slide"><div class="real-card"><i class="fas fa-users"></i><h4>DISAF Salon</h4><p>Distribution africaine</p></div></div>
  795.         </div>
  796.         <div class="swiper-pagination"></div>
  797.       </div>
  798.     </div>
  799.   </section>
  801.   <!-- Contact -->
  802.   <section id="contact" data-aos="fade-up">
  803.     <div class="container">
  804.       <div class="section-header">
  805.         <span class="section-label">Parlons ensemble</span>
  806.         <h2 class="section-title">Contact</h2>
  807.       </div>
  808.       <div class="contact-grid">
  809.         <div>
  810.           <form>
  811.             <div class="input-group"><input type="text" placeholder="Nom complet" required></div>
  812.             <div class="input-group"><input type="email" placeholder="Email" required></div>
  813.             <div class="input-group"><textarea rows="5" placeholder="Votre message"></textarea></div>
  814.             <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center;"><i class="fas fa-paper-plane"></i> Envoyer</button>
  815.           </form>
  816.           <div class="contact-info">
  817.             <div class="contact-info-item"><i class="fas fa-phone-alt"></i> 05 05 05 5715</div>
  818.             <div class="contact-info-item"><i class="fas fa-envelope"></i> scheinfora@yahoo.fr</div>
  819.             <div class="contact-info-item"><i class="fas fa-map-marker-alt"></i> Abidjan, Côte d'Ivoire</div>
  820.           </div>
  821.         </div>
  822.         <div class="map-frame">
  823.           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3972.582010528194!2d-4.008336!3d5.327784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc1eb7f4e7a2e2d%3A0x7e4f0c9b3b5b5b5!2sAbidjan%2C%20C%C3%B4te%20d'Ivoire!5e0!3m2!1sfr!2sci!4v1690000000000" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  824.         </div>
  825.       </div>
  826.     </div>
  827.   </section>
  829.   {% endblock body %}
  832.   {% block footer %}
  833.   <footer>
  834.     <div class="container">
  835.       <div class="footer-brand">SHY'N <span style="color:white;">IMPACT</span></div>
  836.       <p style="margin: 12px 0;">Brillez durablement · Couleurs : <span style="color:#F56107;">#F56107</span> & <span style="color:#175912;">#175912</span></p>
  837.       <p style="font-size:0.9rem;">© 2025 SHY'N IMPACT - Tous droits réservés.</p>
  838.     </div>
  839.   </footer>
  840.   {% endblock footer %}
  842.   {% block javascripts %}
  843.   <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  844.   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  845.   <script>
  846.     // Preloader
  847.     window.addEventListener('load', () => {
  848.       setTimeout(() => {
  849.         document.getElementById('preloader').classList.add('hidden');
  850.       }, 700);
  851.     });
  853.     // AOS init
  854.     AOS.init({ duration: 900, once: true, easing: 'ease-out-cubic' });
  856.     // Navbar scroll
  857.     window.addEventListener('scroll', () => {
  858.       document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 50);
  859.     });
  861.     // Hero Swiper
  862.     new Swiper('.swiper-hero', {
  863.       loop: true,
  864.       autoplay: { delay: 5000, disableOnInteraction: false },
  865.       pagination: { el: '.swiper-pagination', clickable: true },
  866.       navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  867.       effect: 'fade',
  868.       fadeEffect: { crossFade: true }
  869.     });
  871.     // Réalisations Swiper
  872.     new Swiper('.swiper-real', {
  873.       slidesPerView: 1.2,
  874.       spaceBetween: 24,
  875.       loop: true,
  876.       autoplay: { delay: 3200 },
  877.       pagination: { el: '.swiper-pagination', clickable: true },
  878.       breakpoints: {
  879.         640: { slidesPerView: 2.2 },
  880.         1024: { slidesPerView: 3.2 }
  881.       }
  882.     });
  883.   </script>
  885.    {% endblock javascripts %}
  886. </body>
  887. </html>