templates/layout/frontEndLayout.html.twig line 305

Open in your IDE?
  1. {% extends 'layout/base.html.twig' %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <link href="{{ asset('assets/css/versions.css') }}" rel="stylesheet">
  6. <link href="{{ asset('assets/css/responsive.css') }}" rel="stylesheet">
  7. <script src="{{ asset('assets/js/modernizer.js') }}"></script>
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  12. <style>
  13. /* ═══════════════════════════════════════════════════════════════
  14. DESIGN SYSTEM — Institut Bethesda / LiveEdu
  15. Charte : Bleu nuit profond · Or champenois · Ivoire chaud
  16. Typo : Cormorant Garamond (prestige) + Outfit (lisibilité)
  17. ═══════════════════════════════════════════════════════════════ */
  18. :root {
  19. --navy: #0b1628;
  20. --navy2: #122040;
  21. --gold: #b8862a;
  22. --gold-lt: #e0b055;
  23. --gold-bg: rgba(184,134,42,.1);
  24. --ivory: #f8f5ef;
  25. --white: #ffffff;
  26. --slate: #2d3f55;
  27. --muted: #6e7e94;
  28. --border: rgba(11,22,40,.09);
  29. --ok: #2a9d5c; --warn: #d4870a; --err: #c0392b; --info: #1a6fb5;
  30. --fd: 'Cormorant Garamond', Georgia, serif;
  31. --fb: 'Outfit', system-ui, sans-serif;
  32. --r1:6px; --r2:12px; --r3:20px;
  33. --sh1:0 2px 8px rgba(11,22,40,.07);
  34. --sh2:0 8px 28px rgba(11,22,40,.11);
  35. --sh3:0 20px 60px rgba(11,22,40,.16);
  36. --nav-h:72px;
  37. --gx: clamp(20px,5vw,72px);
  38. --spy: clamp(60px,8vw,110px);
  39. }
  40. *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  41. html{scroll-behavior:smooth}
  42. body{font-family:var(--fb);background:var(--ivory);color:var(--navy);-webkit-font-smoothing:antialiased;padding-top:var(--nav-h)}
  43. img{max-width:100%;display:block}
  44. a{color:inherit}
  46. /* ════ NAV ════════════════════════════════════════════════ */
  47. .nav{position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);display:flex;align-items:center;padding:0 var(--gx);background:rgba(11,22,40,.9);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05);transition:background .35s,box-shadow .35s}
  48. .nav.solid{background:var(--navy);box-shadow:0 4px 32px rgba(0,0,0,.3)}
  49. .nav__brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0;margin-right:auto}
  50. .nav__crest{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(184,134,42,.5);overflow:hidden;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  51. .nav__crest img{width:100%;height:100%;object-fit:contain;padding:4px}
  52. .nav__name{font-family:var(--fd);font-size:1.18rem;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1}
  53. .nav__sub{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:2px}
  54. .nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 20px 0 0}
  55. .nav__links a{display:block;padding:8px 13px;font-size:.825rem;font-weight:500;color:rgba(255,255,255,.65);text-decoration:none;border-radius:var(--r1);transition:color .18s,background .18s}
  56. .nav__links a:hover{color:#fff;background:rgba(255,255,255,.07)}
  57. .nav__links a.here{color:var(--gold-lt)}
  58. .nav__acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
  59. .nbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 20px;border-radius:var(--r1);font-family:var(--fb);font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .18s;letter-spacing:.02em}
  60. .nbtn-ol{background:transparent;color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.22)}
  61. .nbtn-ol:hover{border-color:var(--gold-lt);color:var(--gold-lt)}
  62. .nbtn-gd{background:var(--gold);color:#fff;border-color:var(--gold)}
  63. .nbtn-gd:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#fff;transform:translateY(-1px)}
  64. .nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:8px;margin-left:8px}
  65. .nav__burger b{display:block;height:1.5px;background:#fff;border-radius:2px;transition:transform .28s,opacity .22s;transform-origin:center}
  66. .nav__burger.open b:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  67. .nav__burger.open b:nth-child(2){opacity:0}
  68. .nav__burger.open b:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  69. .nav__drawer{display:none;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--navy);z-index:899;overflow-y:auto;padding:28px var(--gx) 40px}
  70. .nav__drawer.open{display:block;animation:slideDown .25s ease both}
  71. .nav__drawer ul{list-style:none;padding:0}
  72. .nav__drawer li{border-bottom:1px solid rgba(255,255,255,.06)}
  73. .nav__drawer a{display:flex;align-items:center;gap:10px;padding:15px 4px;font-size:1rem;font-weight:500;color:rgba(255,255,255,.75);text-decoration:none;transition:color .15s}
  74. .nav__drawer a i{color:var(--gold);width:18px;text-align:center}
  75. .nav__drawer a:hover{color:var(--gold-lt)}
  76. .drawer-acts{display:flex;flex-direction:column;gap:12px;margin-top:28px}
  77. .drawer-acts .nbtn{justify-content:center;width:100%;padding:13px}
  78. @media(max-width:900px){.nav__links,.nav__acts{display:none}.nav__burger{display:flex}}
  80. /* ════ BOUTONS ════════════════════════════════════════════ */
  81. .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:var(--r1);font-family:var(--fb);font-size:.875rem;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:all .18s;letter-spacing:.02em;white-space:nowrap}
  82. .btn:hover{transform:translateY(-2px)}
  83. .btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
  84. .btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);box-shadow:0 6px 20px rgba(184,134,42,.3);color:#fff}
  85. .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
  86. .btn-navy:hover{background:var(--navy2);color:#fff}
  87. .btn-ghost{background:transparent;color:var(--navy);border-color:var(--border)}
  88. .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
  89. .btn-ghost-w{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
  90. .btn-ghost-w:hover{border-color:#fff;color:#fff}
  91. .btn-sm{padding:8px 18px;font-size:.8rem}
  92. .btn-lg{padding:15px 34px;font-size:.95rem}
  93. .btn-full{width:100%;justify-content:center}
  95. /* ════ TYPO SECTIONS ══════════════════════════════════════ */
  96. .sec-label{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px}
  97. .sec-label::before{content:'';width:24px;height:1px;background:var(--gold);display:block}
  98. .sec-h{font-family:var(--fd);font-size:clamp(1.9rem,3.5vw,3rem);font-weight:600;line-height:1.12;color:var(--navy);margin-bottom:14px}
  99. .sec-h em{font-style:italic;color:var(--gold)}
  100. .sec-sub{font-size:.95rem;color:var(--muted);line-height:1.75;max-width:520px}
  101. .page-hd{background:var(--navy);padding:60px var(--gx) 52px;position:relative;overflow:hidden}
  102. .page-hd::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
  103. .page-hd__in{position:relative;z-index:1}
  104. .page-hd__title{font-family:var(--fd);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:600;color:#fff;line-height:1.12}
  105. .page-hd__sub{color:rgba(255,255,255,.45);margin-top:10px;font-size:.9rem}
  106. .page-hd__glow{position:absolute;right:-40px;top:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(184,134,42,.18),transparent 68%);pointer-events:none}
  108. /* ════ SECTIONS UTILITAIRES ═══════════════════════════════ */
  109. .section{padding:var(--spy) var(--gx)}
  110. .section--white{background:var(--white)}
  111. .section--ivory{background:var(--ivory)}
  112. .section--navy{background:var(--navy)}
  113. .wrap{max-width:1280px;margin:0 auto}
  115. /* ════ FORMULAIRES AUTH ═══════════════════════════════════ */
  116. .auth-shell{min-height:100vh;display:flex;margin-top:calc(-1 * var(--nav-h));padding-top:0}
  117. .auth-vis{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:60px;background:var(--navy);min-height:100vh}
  118. .auth-vis__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;filter:grayscale(.35) contrast(1.1)}
  119. .auth-vis__ov{position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,22,40,.4) 0%,rgba(11,22,40,.92) 70%)}
  120. .auth-vis__logo{position:absolute;top:48px;left:60px;z-index:2;display:flex;align-items:center;gap:14px}
  121. .auth-vis__crest{width:52px;height:52px;border-radius:50%;border:2px solid rgba(184,134,42,.6);overflow:hidden;background:rgba(255,255,255,.06);padding:3px}
  122. .auth-vis__crest img{width:100%;height:100%;object-fit:contain}
  123. .auth-vis__sname{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:#fff}
  124. .auth-vis__stag{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
  125. .auth-vis__content{position:relative;z-index:2}
  126. .auth-vis__quote{font-family:var(--fd);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;color:#fff;line-height:1.3;margin-bottom:14px}
  127. .auth-vis__quote em{color:var(--gold-lt);font-style:italic}
  128. .auth-vis__caption{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.65;max-width:340px}
  129. .auth-vis__bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-lt),transparent)}
  130. .auth-form{width:min(500px,100%);flex-shrink:0;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,72px) clamp(28px,5vw,60px);min-height:100vh;overflow-y:auto}
  131. .auth-form__title{font-family:var(--fd);font-size:2rem;font-weight:600;color:var(--navy);line-height:1.1}
  132. .auth-form__sub{font-size:.875rem;color:var(--muted);margin-top:8px;margin-bottom:32px;line-height:1.6}
  133. .f-group{margin-bottom:20px}
  134. .f-group label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
  135. .f-group input,.f-group select,.f-group textarea,.f-group .form-control{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--r1);font-family:var(--fb);font-size:.9rem;color:var(--navy);background:var(--ivory);outline:none;transition:border-color .18s,box-shadow .18s,background .18s;appearance:none}
  136. .f-group input:focus,.f-group select:focus,.f-group textarea:focus,.f-group .form-control:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(184,134,42,.13)}
  137. .f-group input::placeholder{color:var(--muted);opacity:.6}
  138. .f-group textarea{resize:vertical;min-height:120px}
  139. .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  140. .f-check{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--slate);line-height:1.5;margin-bottom:24px}
  141. .f-check input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;margin-top:2px}
  142. .f-check a{color:var(--gold);font-weight:600;text-decoration:none}
  143. .f-opts{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;font-size:.82rem}
  144. .f-opts label{display:flex;align-items:center;gap:7px;cursor:pointer}
  145. .f-opts input[type=checkbox]{accent-color:var(--gold)}
  146. .f-opts a{color:var(--gold);font-weight:600;text-decoration:none}
  147. .f-opts a:hover{text-decoration:underline}
  148. .f-alert{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:var(--r1);font-size:.875rem;margin-bottom:22px;border-left:4px solid}
  149. .f-alert--err{background:rgba(192,57,43,.07);border-color:var(--err);color:#922b21}
  150. .f-alert--warn{background:rgba(212,135,10,.07);border-color:var(--warn);color:#7d5c04}
  151. .f-alert--ok{background:rgba(42,157,92,.07);border-color:var(--ok);color:#1a5e36}
  152. .auth-foot{margin-top:26px;text-align:center;font-size:.85rem;color:var(--muted)}
  153. .auth-foot a{color:var(--gold);font-weight:600;text-decoration:none}
  154. .auth-foot a:hover{text-decoration:underline}
  155. .invalid-feedback{font-size:.78rem;color:var(--err);margin-top:5px;display:block}
  156. @media(max-width:720px){.auth-vis{display:none}.auth-form{width:100%;min-height:100vh}.f-row{grid-template-columns:1fr}}
  158. /* ════ FLASH ══════════════════════════════════════════════ */
  159. .flash-stack{position:fixed;top:calc(var(--nav-h) + 12px);right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px;width:calc(100% - 32px)}
  160. .flash-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r1);background:#fff;border-left:4px solid var(--gold);box-shadow:var(--sh2);animation:slideInR .3s ease both}
  161. .flash-item--success{border-color:var(--ok)}.flash-item--danger{border-color:var(--err)}.flash-item--warning{border-color:var(--warn)}.flash-item--info{border-color:var(--info)}
  162. .flash-icon{font-size:.95rem;margin-top:1px}
  163. .flash-item--success .flash-icon{color:var(--ok)}.flash-item--danger .flash-icon{color:var(--err)}.flash-item--warning .flash-icon{color:var(--warn)}.flash-item--info .flash-icon{color:var(--info)}
  164. .flash-text{font-size:.86rem;flex:1;line-height:1.5}
  165. .flash-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.95rem;padding:0;line-height:1}
  166. .flash-close:hover{color:var(--navy)}
  168. /* ════ FOOTER ═════════════════════════════════════════════ */
  169. .footer-bar{height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-lt),var(--gold))}
  170. .footer{background:var(--navy);padding:60px var(--gx) 28px;color:rgba(255,255,255,.5);font-size:.875rem}
  171. .footer__grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:24px}
  172. .footer__logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  173. .footer__crest{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(184,134,42,.4);overflow:hidden;padding:3px;background:rgba(255,255,255,.04)}
  174. .footer__crest img{width:100%;height:100%;object-fit:contain}
  175. .footer__brand-name{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:#fff}
  176. .footer__brand-tag{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-top:1px}
  177. .footer__brand p{font-size:.84rem;line-height:1.75;max-width:280px}
  178. .footer__col h4{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:18px}
  179. .footer__links{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
  180. .footer__links a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s;font-size:.84rem}
  181. .footer__links a:hover{color:var(--gold-lt)}
  182. .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:.76rem}
  183. .footer__bottom a{color:var(--gold);text-decoration:none}
  184. @media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
  185. @media(max-width:520px){.footer__grid{grid-template-columns:1fr;gap:28px}.footer__bottom{flex-direction:column;text-align:center}}
  187. /* ════ COMPOSANTS PAGES ═══════════════════════════════════ */
  188. /* Hero */
  189. .hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;background:var(--navy);margin-top:calc(-1 * var(--nav-h));padding-top:var(--nav-h)}
  190. .hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;filter:grayscale(.5) contrast(1.1)}
  191. .hero__vig{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(11,22,40,.3) 0%,rgba(11,22,40,.88) 70%)}
  192. .hero__vline{position:absolute;left:var(--gx);top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent 0%,var(--gold) 40%,transparent 100%);opacity:.5}
  193. .hero__content{position:relative;z-index:2;padding:0 var(--gx);max-width:860px;animation:fadeUp .9s .1s ease both}
  194. .hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:28px}
  195. .hero__tag::before{content:'';width:32px;height:1px;background:var(--gold-lt)}
  196. .hero__title{font-family:var(--fd);font-size:clamp(2.6rem,6vw,5.2rem);font-weight:600;line-height:1.06;color:#fff;margin-bottom:26px}
  197. .hero__title em{color:var(--gold-lt);font-style:italic}
  198. .hero__body{font-size:clamp(.9rem,1.2vw,1.05rem);color:rgba(255,255,255,.58);line-height:1.8;max-width:500px;margin-bottom:40px}
  199. .hero__ctas{display:flex;gap:14px;flex-wrap:wrap}
  200. .hero__scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;color:rgba(255,255,255,.3);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;animation:bob 2s ease-in-out infinite}
  201. .hero__arrow{width:18px;height:18px;border-right:1.5px solid rgba(255,255,255,.3);border-bottom:1.5px solid rgba(255,255,255,.3);transform:rotate(45deg)}
  203. /* KPI band */
  204. .kpi-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--gold)}
  205. .kpi-item{padding:26px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.2)}
  206. .kpi-item:last-child{border-right:none}
  207. .kpi-num{font-family:var(--fd);font-size:2.4rem;font-weight:700;color:#fff;line-height:1;margin-bottom:5px}
  208. .kpi-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  209. @media(max-width:600px){.kpi-band{grid-template-columns:1fr 1fr}.kpi-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.18)}.kpi-item:nth-child(even){border-left:1px solid rgba(255,255,255,.18)}}
  211. /* Features */
  212. .features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px}
  213. .feat{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:28px 26px;transition:box-shadow .22s,transform .2s,border-color .2s}
  214. .feat:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:rgba(184,134,42,.3)}
  215. .feat__icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-lt));display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;margin-bottom:20px;box-shadow:0 4px 14px rgba(184,134,42,.3)}
  216. .feat__title{font-size:1.05rem;font-weight:600;margin-bottom:9px;color:var(--navy)}
  217. .feat__body{font-size:.875rem;color:var(--muted);line-height:1.7}
  219. /* Examens */
  220. .exams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-top:44px}
  221. .exam-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r2);padding:20px 16px;text-align:center;transition:background .2s,border-color .2s}
  222. .exam-card:hover{background:rgba(184,134,42,.1);border-color:rgba(184,134,42,.25)}
  223. .exam-card__name{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:14px}
  224. .exam-card canvas{display:block;margin:auto;max-width:140px;max-height:140px}
  226. /* CTA band */
  227. .cta-band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:var(--spy) var(--gx);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px;border-top:1px solid rgba(255,255,255,.06)}
  228. .cta-band__title{font-family:var(--fd);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:600;color:#fff}
  229. .cta-band__sub{color:rgba(255,255,255,.45);margin-top:8px;font-size:.9rem}
  230. .cta-band__acts{display:flex;gap:14px;flex-wrap:wrap}
  232. /* Personnes */
  233. .people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:22px}
  234. .person-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:box-shadow .22s,transform .2s}
  235. .person-card:hover{box-shadow:var(--sh2);transform:translateY(-4px)}
  236. .person-card__img{height:195px;overflow:hidden;background:var(--navy)}
  237. .person-card__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:transform .4s,filter .35s}
  238. .person-card:hover .person-card__img img{transform:scale(1.06);filter:grayscale(0)}
  239. .person-card__body{padding:16px 18px 20px}
  240. .person-card__name{font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:4px}
  241. .person-card__role{font-size:.78rem;color:var(--gold);font-weight:500}
  243. /* Staff */
  244. .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
  245. .staff-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:22px 20px;display:flex;align-items:center;gap:18px;transition:box-shadow .2s,transform .18s}
  246. .staff-card:hover{box-shadow:var(--sh1);transform:translateY(-2px)}
  247. .staff-card__av{width:58px;height:58px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2.5px solid var(--gold);padding:2px}
  248. .staff-card__av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  249. .staff-card__name{font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:4px}
  251. /* Empty */
  252. .empty-state{text-align:center;padding:80px 24px}
  253. .empty-state i{font-size:2.4rem;color:var(--gold);opacity:.4;margin-bottom:18px}
  254. .empty-state h3{font-family:var(--fd);font-size:1.4rem;margin-bottom:10px}
  255. .empty-state p{color:var(--muted);font-size:.9rem;margin-bottom:24px}
  257. /* Aide */
  258. .help-layout{display:grid;grid-template-columns:260px 1fr;gap:0;max-width:1180px;margin:0 auto;padding:40px var(--gx) 80px;align-items:start}
  259. .help-sidebar{position:sticky;top:calc(var(--nav-h) + 20px)}
  260. .help-nav{list-style:none}
  261. .help-nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r1);font-size:.86rem;font-weight:500;color:var(--muted);text-decoration:none;border-left:2px solid transparent;transition:all .18s}
  262. .help-nav a:hover,.help-nav a.here{background:var(--white);color:var(--navy);border-left-color:var(--gold);box-shadow:var(--sh1)}
  263. .help-nav a i{width:16px;text-align:center;color:var(--gold)}
  264. .help-nav__label{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 14px 6px}
  265. .help-content{padding-left:36px;border-left:1px solid var(--border)}
  266. .help-sec{margin-bottom:52px}
  267. .help-sec__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  268. .help-sec__icon{width:40px;height:40px;border-radius:9px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  269. .help-sec__title{font-family:var(--fd);font-size:1.3rem;font-weight:600}
  270. .help-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
  271. .help-card__text{padding:20px 22px;font-size:.9rem;line-height:1.8;color:var(--slate)}
  272. .help-card__text a{color:var(--gold);font-weight:600;text-decoration:none}
  273. .help-card__text b{color:var(--navy)}
  274. .help-card__img{border-top:1px solid var(--border)}
  275. .help-card__img img{width:100%}
  276. @media(max-width:760px){.help-layout{grid-template-columns:1fr}.help-sidebar{display:none}.help-content{padding-left:0;border:none}}
  278. /* Contact */
  279. .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  280. .contact-form-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:36px}
  281. @media(max-width:760px){.contact-layout{grid-template-columns:1fr}}
  283. /* Pagination KNP */
  284. .pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:36px}
  285. .page-item .page-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r1);border:1px solid var(--border);background:var(--white);font-size:.82rem;font-weight:500;color:var(--slate);text-decoration:none;transition:all .18s}
  286. .page-item.active .page-link{background:var(--gold);border-color:var(--gold);color:#fff}
  287. .page-item .page-link:hover{border-color:var(--gold);color:var(--gold)}
  289. /* ════ ANIMATIONS ══════════════════════════════════════════ */
  290. @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  291. @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  292. @keyframes slideInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
  293. @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
  294. .anim-up{animation:fadeUp .55s ease both}
  295. {% for i in 1..24 %}
  296. .stagger>*:nth-child({{i}}){animation:fadeUp .5s {{(i*0.065)|round(3)}}s ease both}
  297. {% endfor %}
  298. </style>
  299. {% endblock %}
  301. {% block title %}{% block name %}LiveEdu — Institut Bethesda{% endblock %}{% endblock %}
  303. {# ════ NAVIGATION ══════════════════════════════════════════ #}
  304. {% block partials %}
  305. {{ parent() }}
  306. <nav class="nav" id="mnav">
  307. <a class="nav__brand" href="{{ path('app_home') }}">
  308. <div class="nav__crest"><img src="{{ asset('assets/images/BethesdaLogo.png') }}" alt="Bethesda"></div>
  309. <div><div class="nav__name">Institut Bethesda</div><div class="nav__sub">LiveEdu &bull; Plateforme scolaire</div></div>
  310. </a>
  311. <ul class="nav__links">
  312. <li><a href="{{ path('app_home') }}">Accueil</a></li>
  313. <li><a href="{{ path('app_rooms') }}">Classes</a></li>
  314. <li><a href="{{ path('app_teachers') }}">Enseignants</a></li>
  315. <li><a href="{{ path('app_staff') }}">Direction</a></li>
  316. <li><a href="{{ path('app_contact') }}">Contact</a></li>
  317. <li><a href="{{ path('app_help') }}">Aide</a></li>
  318. </ul>
  319. <div class="nav__acts">
  320. {% if app.user %}
  321. <a href="{{ path('admin_classrooms') }}" class="nbtn nbtn-gd"><i class="fa fa-th-large"></i> Dashboard</a>
  322. {% else %}
  323. <a href="{{ path('app_login') }}" class="nbtn nbtn-ol"><i class="fa fa-sign-in"></i> Connexion</a>
  324. {% endif %}
  325. </div>
  326. <button class="nav__burger" id="mbgr" aria-label="Menu" aria-expanded="false"><b></b><b></b><b></b></button>
  327. </nav>
  328. <div class="nav__drawer" id="mdrw">
  329. <ul>
  330. <li><a href="{{ path('app_home') }}"><i class="fa fa-home"></i> Accueil</a></li>
  331. <li><a href="{{ path('app_rooms') }}"><i class="fa fa-building-o"></i> Classes</a></li>
  332. <li><a href="{{ path('app_teachers') }}"><i class="fa fa-users"></i> Enseignants</a></li>
  333. <li><a href="{{ path('app_staff') }}"><i class="fa fa-shield"></i> Direction</a></li>
  334. <li><a href="{{ path('app_contact') }}"><i class="fa fa-envelope-o"></i> Contact</a></li>
  335. <li><a href="{{ path('app_help') }}"><i class="fa fa-question-circle-o"></i> Aide</a></li>
  336. </ul>
  337. <div class="drawer-acts">
  338. {% if app.user %}
  339. <a href="{{ path('admin_classrooms') }}" class="nbtn nbtn-gd"><i class="fa fa-th-large"></i> Dashboard</a>
  340. {% else %}
  341. <a href="{{ path('app_login') }}" class="nbtn nbtn-gd"><i class="fa fa-sign-in"></i> Connexion</a>
  342. <a href="{{ path('app_register') }}" class="nbtn nbtn-ol"><i class="fa fa-user-plus"></i> Créer un compte</a>
  343. {% endif %}
  344. </div>
  345. </div>
  346. {% endblock %}
  348. {% block body %}{% endblock %}
  350. {# ════ FOOTER ══════════════════════════════════════════════ #}
  351. {% block footer %}
  352. <div class="footer-bar"></div>
  353. <footer class="footer">
  354. <div class="footer__grid">
  355. <div>
  356. <div class="footer__logo">
  357. <div class="footer__crest"><img src="{{ asset('assets/images/BethesdaLogo.png') }}" alt=""></div>
  358. <div><div class="footer__brand-name">Institut Bethesda</div><div class="footer__brand-tag">LiveEdu</div></div>
  359. </div>
  360. <p>Établissement d'enseignement secondaire bilingue, formant les leaders de demain dans un environnement d'excellence académique.</p>
  361. </div>
  362. <div class="footer__col"><h4>Navigation</h4>
  363. <ul class="footer__links">
  364. <li><a href="{{ path('app_home') }}">Accueil</a></li>
  365. <li><a href="{{ path('app_rooms') }}">Nos classes</a></li>
  366. <li><a href="{{ path('app_teachers') }}">Enseignants</a></li>
  367. <li><a href="{{ path('app_staff') }}">Direction</a></li>
  368. </ul>
  369. </div>
  370. <div class="footer__col"><h4>Ressources</h4>
  371. <ul class="footer__links">
  372. <li><a href="{{ path('app_help') }}">Guide d'utilisation</a></li>
  373. <li><a href="{{ path('app_contact') }}">Nous contacter</a></li>
  374. {% if app.user %}<li><a href="{{ path('admin_classrooms') }}">Dashboard</a></li>{% else %}<li><a href="{{ path('app_login') }}">Connexion</a></li>{% endif %}
  375. </ul>
  376. </div>
  377. <div class="footer__col"><h4>Contact</h4>
  378. <ul class="footer__links">
  379. <li><a href="mailto:[email protected]"><i class="fa fa-envelope-o"></i> [email protected]</a></li>
  380. <li><i class="fa fa-map-marker"></i> Cameroun</li>
  381. </ul>
  382. </div>
  383. </div>
  384. <div class="footer__bottom">
  385. <span>© {{ "now"|date("Y") }} Institut Secondaire Bilingue Bethesda. Tous droits réservés.</span>
  386. <span>Conçu par <a href="#">Polyinformatique</a></span>
  387. </div>
  388. </footer>
  389. {% endblock %}
  391. {% block javascripts %}
  392. {{ parent() }}
  393. <script>
  394. (function(){
  395. 'use strict';
  396. /* Nav scroll */
  397. var nav=document.getElementById('mnav');
  398. if(nav){
  399. function ck(){nav.classList.toggle('solid',window.scrollY>48)}
  400. window.addEventListener('scroll',ck,{passive:true});ck();
  401. var p=window.location.pathname;
  402. nav.querySelectorAll('.nav__links a,.nav__drawer a').forEach(function(a){if(a.getAttribute('href')===p)a.classList.add('here')});
  403. }
  404. /* Burger */
  405. var bgr=document.getElementById('mbgr'),drw=document.getElementById('mdrw');
  406. if(bgr&&drw){
  407. bgr.addEventListener('click',function(){
  408. var o=drw.classList.toggle('open');
  409. bgr.classList.toggle('open',o);bgr.setAttribute('aria-expanded',o);
  410. document.body.style.overflow=o?'hidden':'';
  411. });
  412. drw.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){drw.classList.remove('open');bgr.classList.remove('open');bgr.setAttribute('aria-expanded','false');document.body.style.overflow='';})});
  413. }
  414. /* Flash */
  415. document.addEventListener('click',function(e){
  416. var item=e.target.closest&&e.target.closest('.flash-close');
  417. if(item){var el=item.closest('.flash-item');if(el){el.style.opacity='0';el.style.transition='opacity .2s';setTimeout(function(){el.remove()},220)}}
  418. });
  419. setTimeout(function(){document.querySelectorAll('.flash-item').forEach(function(el){el.style.transition='opacity .4s';el.style.opacity='0';setTimeout(function(){el.remove()},420)})},5200);
  420. })();
  421. </script>
  422. {% endblock %}