/* From agenda.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From comite.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From contact.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ .contact-links .actions.special { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; } .contact-links .actions.special li { width: 100%; } ..contact-links .actions.special .button { width: 100%; border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 600; letter-spacing: 0.02em; font-size: 1rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); border: 1px solid rgba(15, 23, 42, 0.04); transition: background 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .contact-links .actions.special .button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22); } .contact-links .actions.special .button:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); opacity: 0.96; } .contact-links .actions.special .button span.label { display: inline-flex; align-items: center; gap: 0.5rem; } /* Couleurs harmonisées par service (version officielle mais cohérente entre elles) */ .contact-links .button.whatsapp { background-color: #524751; color: #ffffff !important; } .contact-links .button.phone { background-color: #524751; color: #ffffff !important; } .contact-links .button.email { background-color: #524751; color: #ffffff !important; } .contact-links .button.facebook { background-color: #524751; color: #ffffff !important; } .contact-links .button.instagram { background-color: #524751; color: #ffffff !important; } .contact-links .button.youtube { background-color: #524751; color: #ffffff !important; } .contact-links .button:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); } /* Ajustements pour mobile */ @media (max-width: 600px) { .contact-links .actions.special .button { font-size: 0.95rem; padding: 0.65rem 1.2rem; } } /* From ecole.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } #nav .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Correctif de la ligne grise sous le dernier élément de la liste */ ul.alt li:last-child { border-bottom: none !important; } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .box h4 { font-weight: bold; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* --- AJOUT : STYLES BOUTON IDENTIQUES À index.html --- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } /* ---------------------------------------------------- */ /* From elements.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From event.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From formation.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ h4 { font-weight: bold; } .box { text-align: center; } .box h4 { font-weight: bold; } /* From gallerie.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ * { box-sizing: border-box; } .container .gallery a img { float: left; width: 25%; height: auto; border: 2px solid #fff; -webkit-transition: -webkit-transform .15s ease; -moz-transition: -moz-transform .15s ease; -o-transition: -o-transform .15s ease; -ms-transition: -ms-transform .15s ease; transition: transform .15s ease; position: relative; } .clear { clear: both; } a { color: #009688; text-decoration: none; } a:hover { color: #01695f; text-decoration: none; } /* From helvetiaroom.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bloc contact (remplace le blockquote avec ligne grise) */ .contact-card { max-width: 900px; margin: 1.3rem auto 1.8rem; padding: 1rem 1.4rem; border-radius: 14px; border: 1px solid rgba(185, 28, 28, 0.25); background: #fef2f2; font-size: 0.95rem; color: var(--text-main); } .contact-card b { color: var(--accent); } /* Images de la salle (style proche index) */ .room-images { margin: 1.2rem 0 1.6rem; display: flex; justify-content: center; } .room-image { width: 100%; max-width: 930px; border-radius: 18px; display: block; box-shadow: var(--shadow-soft); } /* Carte Google Maps */ .room-map-wrapper { margin: 1.5rem 0 1.75rem; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25); } .room-map-wrapper iframe { width: 100%; height: 420px; border: 0; } /* Boutons (mêmes styles que index) */ .actions { display: flex; gap: 0.75rem; justify-content: center; } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER – identique à index.html */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From historique.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From index.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From onlyImages.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ body { font-family: 'Raleway', sans-serif; font-size: 20px; line-height: 34px; } * { box-sizing: border-box; } .container .gallery a img { float: left; width: 25%; height: auto; border: 2px solid #fff; -webkit-transition: -webkit-transform .15s ease; -moz-transition: -moz-transform .15s ease; -o-transition: -o-transform .15s ease; -ms-transition: -ms-transform .15s ease; transition: transform .15s ease; position: relative; } .clear { clear: both; } a { color: #009688; text-decoration: none; } a:hover { color: #01695f; text-decoration: none; } /* From presentation.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* From presentation_directeur.html */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* Styles spécifiques à cette page */ :root { --bg-page: #f4f5f7; --bg-card: #ffffff; --bg-header: rgba(15, 23, 42, 0.92); --accent: #524751; --accent-soft: #f1e9f5; --text-main: #111827; --text-muted: #6b7280; --radius-card: 16px; --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.16); --transition-fast: 0.2s ease-in-out; --max-width: 1100px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); background: radial-gradient(circle at top, #ffffff 0, #f2f3f7 50%, #e5e7eb 100%); } a { text-decoration: none; color: inherit; } #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ #header { position: sticky; top: 0; z-index: 50; background: var(--bg-header); backdrop-filter: blur(10px); color: #f9fafb; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } #header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.03em; } #header h1 a { color: #f9fafb; font-weight: 700; } #header h1 a:hover { color: #e5e7eb; } #nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; } #nav > ul > li > a { color: #e5e7eb; position: relative; } #nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -0.25rem; width: 0; height: 2px; background-color: var(--accent); transition: width var(--transition-fast); } #nav > ul > li > a:hover::after { width: 100%; } /* Bouton dans le header */ #nav .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.2); background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb !important; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 20px rgba(82, 70, 81, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } #nav .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(82, 70, 81, 0.45); } /* Sous-menus */ #nav ul ul { background: var(--bg-header); } /* HERO / BANNER */ #banner { display: flex; align-items: center; justify-content: center; padding: 4.5rem 1.5rem 2.5rem; text-align: center; } #buttontomain { display: inline-flex; flex-direction: column; align-items: center; gap: 1.5rem; cursor: pointer; } .hero-logo { max-width: 260px; width: 70%; height: auto; filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } #buttontomain:hover .hero-logo { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.45)); } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); color: #111827; font-size: 1.3rem; animation: bounce 1.8s infinite; background: rgba(255, 255, 255, 0.9); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* MAIN */ #main { flex: 1; max-width: var(--max-width); margin: 0 auto 3rem; padding: 0 1.5rem 3rem; } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-soft); text-align: center; /* Tous les textes dans les cartes centrés */ } .card-header-center { text-align: center; } .card-title-main { font-size: 1.7rem; margin: 0 0 0.4rem; } .card-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* Bandeau NEWS */ .news-banner { background: linear-gradient(90deg, #524751, #6a5d68); color: #f9fafb; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.75rem 1.25rem; border-radius: 999px; margin: 0 auto 1.5rem; font-size: 0.8rem; max-width: 500px; box-shadow: 0 10px 24px rgba(82, 70, 81, 0.55); } /* Teaser NEWS */ #news-teaser h3 { margin-top: 0; font-size: 1.25rem; } .news-image-wrapper { display: flex; justify-content: center; margin-top: 1.25rem; } .news-image { width: 100%; max-width: 520px; border-radius: 18px; display: block; } /* Features */ .features-grid { display: grid; gap: 1.25rem; } @media (min-width: 720px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature-item { display: flex; flex-direction: column; /* Empile icône + texte */ align-items: center; /* Centre horizontalement */ gap: 0.55rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-align: center; /* Texte centré */ } .feature-item:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); border-color: #d1d5db; } .feature-icon { font-size: 1.6rem; padding: 0.4rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .feature-content h3 { margin: 0 0 0.15rem; font-size: 1.05rem; } .feature-content p { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* Bloc Isérables */ .iserables-image { width: 100%; border-radius: 18px; display: block; margin-bottom: 1rem; } .iserables-title { font-size: 1.3rem; margin: 0 0 0.4rem; } .iserables-text { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.95rem; } .actions { display: flex; gap: 0.75rem; justify-content: center; /* Boutons centrés */ } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #524751, #6a5d68); color: #f9fafb; box-shadow: 0 12px 26px rgba(82, 70, 81, 0.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(82, 70, 81, 0.55); } .btn-ghost { background: #ffffff; color: var(--accent); border-color: rgba(82, 70, 81, 0.35); } .btn-ghost:hover { background: #fef2f2; } /* FOOTER */ #footer { padding: 2rem 1.5rem 2.5rem; border-top: 1px solid #e5e7eb; background: rgba(248, 250, 252, 0.95); text-align: center; } #footer .icons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; justify-content: center; gap: 0.9rem; } #footer .icons a { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; align-items: center; justify-content: center; background: #111827; color: #f9fafb; font-size: 0.9rem; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #footer .icons a:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); } #footer small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } /* Responsive header */ @media (max-width: 768px) { #header { flex-wrap: wrap; gap: 0.5rem; } #nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .card { padding: 1.4rem 1.25rem 1.3rem; } } /* === Helvétia custom overrides (generated) === */ /* ===================== */ /* Helvétia theme global overrides */ /* ===================== */ /* Palette principale inspirée de la casquette (rouge / orange / bleu nuit) */ :root { --helv-accent-start: #524751; /* orange vif */ --helv-accent-end: #6a5d68; /* rouge profond */ --helv-accent-soft: #f1e9f5; --helv-header-bg: rgba(15,23,42,0.94); /* bleu nuit légèrement translucide */ } /* Boutons principaux (nav + actions) */ #nav .button, .button.primary, .btn-primary, .actions .button, .actions.special .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.55rem 1.4rem; border: 1px solid rgba(248, 250, 252, 0.2); background-image: linear-gradient(135deg, var(--helv-accent-start), var(--helv-accent-end)); color: #f9fafb !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.35); box-shadow: 0 10px 22px rgba(82, 70, 81, 0.55); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out; white-space: normal; } #nav .button:hover, .button.primary:hover, .btn-primary:hover, .actions .button:hover, .actions.special .button:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 16px 30px rgba(185, 28, 28, 0.65); } /* Variante bouton clair */ .btn-secondary { background: #f9fafb; color: #1f2933; border-color: rgba(148, 163, 184, 0.9); } /* Header aux couleurs de la charte */ #header { background: var(--helv-header-bg); } /* Menu texte survol */ #nav > ul > li > a::after { background-color: var(--helv-accent-start); } /* Bannière : fond par défaut cohérent avec le slider */ #banner { background-color: #374151; background-image: url("assets/css/images/overlay.png"), url("images/banner/banner.jpg"); background-position: top, center center; background-repeat: repeat, no-repeat; background-size: auto, cover; color: #ffffff; } /* Meilleure lisibilité du logo sur mobile */ @media (max-width: 840px) { #header { position: fixed; top: 0; left: 0; right: 0; } #banner { padding-top: 5.2rem; /* laisse la place pour le header fixe */ } /* On masque le menu horizontal, on garde le burger du template */ #header #nav > ul { display: none; } } /* Légère marge pour le contenu principal sous le header fixe sur les pages internes */ @media (max-width: 840px) { #main, section.container, .wrapper { margin-top: 4.5rem; } } /* --- Correction header / menu sur mobile --- */ @media screen and (max-width: 840px) { /* On garde le header fixe existant */ #header { display: flex; align-items: center; justify-content: flex-start; padding-left: 1.2rem; padding-right: 4.5rem; /* laisse la place au burger à droite */ } #header h1 { font-size: 1.1rem; line-height: 1.2; margin: 0; max-width: 75%; /* évite que le texte passe sous le bouton */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Déplacement de l’icône burger à droite */ #navButton .toggle:before { left: auto; /* annule la valeur du template */ right: 0.75em; /* place le bouton à droite */ } } /* --- Header mobile : centrage horizontal + vertical --- */ @media screen and (max-width: 840px) { /* Structure générale : header centré et uniforme */ #header { display: flex; align-items: center; /* centre verticalement */ justify-content: center; /* centre horizontalement */ position: relative; height: 60px; /* hauteur fixe propre */ padding: 0 1rem; } /* Titre centré dans la zone utile */ #header h1 { font-size: 1.2rem; margin: 0; text-align: center; width: 100%; line-height: 1; /* évite que le texte flotte */ display: flex; align-items: center; /* centrage vertical du texte */ justify-content: center; /* centrage horizontal */ } /* Bouton hamburger placé à droite et centré verticalement */ #navButton .toggle:before { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); /* centrage vertical parfait */ } }