/* Theme Name: CTI Niger Theme URI: https://cti-ne.com Author: CTI Niger Author URI: https://cti-ne.com Description: Theme institutionnel sur mesure pour le Centre de Traitement Informatique du Niger (CTI Niger) — infrastructure technologique de la microfinance. Design responsive, leger, sans dependance de build. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: cti-niger */ /* ========================================================================== 1. VARIABLES & RESET ========================================================================== */ :root { /* Couleurs de marque, extraites du logo CTI Niger */ --c-navy: #0B1E3F; --c-navy-light: #163363; --c-blue: #1662C4; --c-green: #2FA84F; --c-orange: #F5811F; --c-bg: #FFFFFF; --c-bg-alt: #F4F7FB; --c-bg-dark: #0B1E3F; --c-text: #1B2438; --c-text-muted: #5C6579; --c-border: #E3E8F1; --gradient-brand: linear-gradient(120deg, var(--c-blue) 0%, var(--c-green) 55%, var(--c-orange) 100%); --font-heading: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 2px 8px rgba(11, 30, 63, 0.06); --shadow-md: 0 12px 32px rgba(11, 30, 63, 0.10); --shadow-lg: 0 24px 60px rgba(11, 30, 63, 0.16); --container-w: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* "clip" (et non "hidden") : empeche tout debordement horizontal cause par le panneau de menu mobile hors-ecran (position:fixed + translateX au-dela du viewport). Applique sur , le veritable conteneur de scroll racine — un position:fixed traverse le "overflow" pose sur car il se positionne par rapport au viewport, pas par rapport a son ancetre en flux. "clip" (pas "hidden") pour ne pas perturber position:sticky sur l'en-tete. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--c-text); background: var(--c-bg); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-blue); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--c-orange); } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--c-navy); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; font-size: 1rem; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; background: var(--c-navy); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius-sm); transition: top .2s ease; } .skip-link:focus { top: 1rem; color: #fff; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; } .container--narrow { max-width: 800px; } .kicker { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-orange); margin-bottom: .75rem; } .section { padding: 5rem 0; } .alt-bg { background: var(--c-bg-alt); } .section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; } .section-head__text { color: var(--c-text-muted); } .section-cta { text-align: center; margin-top: 2.5rem; } .check-list { margin: 1.25rem 0; } .check-list li { position: relative; padding-left: 1.8rem; margin-bottom: .6rem; color: var(--c-text); } .check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--gradient-brand); color: #fff; font-size: .75rem; display: flex; align-items: center; justify-content: center; } /* ========================================================================== 2. BOUTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn--primary { background: var(--c-navy); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--c-blue); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; } .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; } .btn--outline { background: transparent; border-color: var(--c-navy); color: var(--c-navy); } .btn--outline:hover { background: var(--c-navy); color: #fff; } .btn--lg { padding: 1rem 2rem; font-size: 1rem; } .btn--sm { padding: .55rem 1.1rem; font-size: .85rem; } /* ========================================================================== 3. HEADER & NAVIGATION ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 999; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); transition: box-shadow .25s ease; } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } /* Empeche le chevauchement avec la barre d'administration WordPress (utilisateur connecte) : #wpadminbar est fixe en haut, la barre du theme doit se decaler sous elle. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; gap: 1.25rem; } .site-branding { display: flex; align-items: center; flex-shrink: 0; } .site-branding img { height: 52px; width: auto; max-width: 220px; object-fit: contain; } .site-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--c-navy); } /* La nav peut se retrecir sans forcer de debordement (min-width:0 = regle flexbox classique) */ .main-nav { min-width: 0; } .main-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; } .main-nav__list li { position: relative; display: flex; align-items: center; } .main-nav__list a { display: block; color: var(--c-navy); font-weight: 600; font-size: .95rem; position: relative; padding: .3rem 0; white-space: nowrap; } .main-nav__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gradient-brand); transition: width .25s ease; } .main-nav__list a:hover, .main-nav__list .current-menu-item > a { color: var(--c-navy); } .main-nav__list a:hover::after, .main-nav__list .current-menu-item > a::after { width: 100%; } /* Sous-menus (menus deroulants) : caches par defaut, affiches au survol/focus. Empile en carte flottante pour ne jamais chevaucher le reste de la navigation. */ .main-nav__list .sub-menu { display: block; visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin-top: .6rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: .5rem; z-index: 20; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .main-nav__list li:hover > .sub-menu, .main-nav__list li:focus-within > .sub-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } .main-nav__list .sub-menu li { display: block; } .main-nav__list .sub-menu a { padding: .55rem .75rem; border-radius: 6px; white-space: nowrap; } .main-nav__list .sub-menu a:hover { background: var(--c-bg-alt); } .main-nav__list .sub-menu a::after { display: none; } .main-nav__list .menu-item-has-children > a { padding-right: 1.1rem; } .main-nav__list .menu-item-has-children > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); } .site-header__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--c-border); background: #fff; flex-shrink: 0; } .nav-toggle__bar { width: 20px; height: 2px; background: var(--c-navy); margin: 0 auto; transition: transform .25s ease, opacity .25s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 4. HERO (accueil) ========================================================================== */ .hero { position: relative; overflow: hidden; padding: 3.5rem 0 9rem; } .hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 12% 15%, rgba(22,98,196,.14), transparent 42%), radial-gradient(circle at 88% 12%, rgba(47,168,79,.16), transparent 38%), radial-gradient(circle at 78% 90%, rgba(245,129,31,.14), transparent 42%), radial-gradient(circle at 8% 85%, rgba(22,98,196,.08), transparent 38%), var(--c-bg-alt); } /* Fine grille de points : renforce l'aspect "digital" sans surcharger */ .hero__bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(11,30,63,.10) 1.4px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); } /* Separateur courbe en pied de section, transition douce vers le bandeau chiffres cles */ .hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; } .hero__wave svg { display: block; width: 100%; height: 90px; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; } .hero__lead { font-size: 1.1rem; color: var(--c-text-muted); max-width: 46ch; } .hero__actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .hero .btn--ghost { border-color: var(--c-navy); color: var(--c-navy); } .hero .btn--ghost:hover { background: var(--c-navy); color: #fff; } .hero__art { display: flex; align-items: center; justify-content: center; } .hero__art img { max-width: 480px; width: 100%; } /* Sur-titre avec puce degradee (repere visuel fort, remplace le "vide" au-dessus du titre) */ .kicker--dot { display: inline-flex; align-items: center; gap: .55rem; } .kicker--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-brand); flex-shrink: 0; } /* Fleche animee dans le bouton principal */ .btn__arrow { display: inline-block; transition: transform .2s ease; } .btn:hover .btn__arrow { transform: translateX(4px); } /* Badges de confiance sous les boutons du hero */ .hero__badges { display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: 2.25rem; } .hero__badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.75); border: 1px solid var(--c-border); backdrop-filter: blur(4px); padding: .45rem .9rem .45rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--c-navy); } .hero__badge .dashicons { font-size: 16px !important; width: 16px !important; height: 16px !important; color: var(--c-green); } /* ========================================================================== 5. STATISTIQUES ========================================================================== */ .stats { background: var(--c-navy); padding: 3rem 0; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stat-card { display: flex; flex-direction: column; gap: .35rem; } .stat-card__number { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; } .stat-card__label { color: rgba(255,255,255,.7); font-size: .85rem; } /* ========================================================================== 6. SERVICES ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .services-grid--full { grid-template-columns: repeat(3, 1fr); } .service-card { display: flex; flex-direction: column; gap: .6rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2rem 1.6rem; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; color: var(--c-text); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--c-text); } .service-card__icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-size: 26px !important; width: 52px !important; height: 52px !important; } .service-card h3 { margin-bottom: 0; font-size: 1.1rem; } .service-card p { color: var(--c-text-muted); font-size: .92rem; margin-bottom: .25rem; } .service-card__more { font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: var(--c-blue); margin-top: auto; } .service-hero-icon { width: 64px !important; height: 64px !important; font-size: 32px !important; display: flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; border-radius: var(--radius-md); margin-bottom: 1rem; } /* ========================================================================== 7. A PROPOS (accueil) + PAGE A PROPOS ========================================================================== */ .about-section__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center; } .about-media-frame { background: #fff; border-radius: var(--radius-lg); padding: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 1px solid var(--c-border); } .about-media-frame img { display: block; width: 100%; height: auto; } .mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .mv-card { background: #fff; border-radius: var(--radius-md); padding: 2.25rem; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); } .mv-card__icon { font-size: 34px !important; width: 34px !important; height: 34px !important; color: var(--c-orange); margin-bottom: 1rem; display: block; } .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .value-card { text-align: center; padding: 1.75rem 1.25rem; } .value-card .dashicons { font-size: 30px !important; width: 30px !important; height: 30px !important; color: var(--c-blue); margin-bottom: .75rem; } .value-card h3 { font-size: 1rem; } .value-card p { color: var(--c-text-muted); font-size: .9rem; } /* ========================================================================== 8. PARTENAIRES ========================================================================== */ .partners-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; opacity: .85; } .partner-logo { display: flex; align-items: center; justify-content: center; filter: grayscale(1); transition: filter .25s ease, opacity .25s ease; opacity: .7; } .partner-logo:hover { filter: grayscale(0); opacity: 1; } .partner-logo img { max-height: 46px; width: auto; } .partner-logo__text { font-family: var(--font-heading); font-weight: 700; color: var(--c-navy); } .partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .partner-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; } .partner-card__text { font-family: var(--font-heading); font-weight: 700; color: var(--c-navy); } .partner-card__link { font-size: .85rem; } /* ========================================================================== 9. ACTUALITES ========================================================================== */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .news-card { display: block; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; color: var(--c-text); } .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--c-text); } .news-card__image { aspect-ratio: 16/10; overflow: hidden; } .news-card__image img { width: 100%; height: 100%; object-fit: cover; } .news-card__body { padding: 1.5rem; } .news-card__body time { font-size: .8rem; color: var(--c-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .news-card__body h3 { margin: .4rem 0 .5rem; font-size: 1.05rem; } .news-card__body p { color: var(--c-text-muted); font-size: .9rem; margin-bottom: 0; } .single-thumb { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 2rem; } /* ========================================================================== 10. CTA FINAL ========================================================================== */ .cta-final { background: var(--c-navy); background-image: var(--gradient-brand); position: relative; } .cta-final::before { content: ""; position: absolute; inset: 0; background: rgba(11,30,63,.82); } .cta-final__inner { position: relative; z-index: 1; text-align: center; padding: 4.5rem 0; } .cta-final h2 { color: #fff; max-width: 640px; margin: 0 auto .75rem; } .cta-final p { color: rgba(255,255,255,.8); max-width: 520px; margin: 0 auto 1.75rem; } /* ========================================================================== 11. PAGE HERO (pages interieures) ========================================================================== */ .page-hero { background: var(--c-bg-alt); padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--c-border); } .page-hero--sm { padding: 2.5rem 0 2rem; } .page-hero h1 { margin-bottom: .5rem; } .page-hero__lead { color: var(--c-text-muted); max-width: 60ch; } .page-hero__meta { color: var(--c-text-muted); font-size: .9rem; } .breadcrumb { font-size: .85rem; color: var(--c-text-muted); margin-bottom: 1rem; } .breadcrumb a { color: var(--c-text-muted); } .breadcrumb a:hover { color: var(--c-orange); } .entry-content h2 { margin-top: 1.75rem; } .entry-content ul, .entry-content ol { list-style: disc; padding-left: 1.4rem; margin-bottom: 1em; } .entry-content ol { list-style: decimal; } .entry-content img { border-radius: var(--radius-md); margin: 1.5rem 0; } /* ========================================================================== 12. CONTACT ========================================================================== */ .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; } .contact-info__list li { display: flex; gap: 1rem; margin-bottom: 1.75rem; } .contact-info__list .dashicons { font-size: 22px !important; width: 22px !important; height: 22px !important; color: var(--c-orange); flex-shrink: 0; margin-top: .1rem; } .contact-info__list strong { display: block; font-family: var(--font-heading); color: var(--c-navy); margin-bottom: .2rem; } .contact-info__list p { margin: 0; color: var(--c-text-muted); } .contact-form-wrap { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2.25rem; box-shadow: var(--shadow-sm); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-field { margin-bottom: 1.25rem; } .form-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; color: var(--c-navy); } .form-field input, .form-field textarea { width: 100%; padding: .75rem .9rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-alt); transition: border-color .2s ease, background .2s ease; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--c-blue); background: #fff; } .hp-field { position: absolute; left: -9999px; top: -9999px; } .form-notice { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-weight: 600; } .form-notice--success { background: #E7F6EC; color: #1E7A37; } .form-notice--error { background: #FDEAE4; color: #B5411A; } .map-section iframe { display: block; } /* ========================================================================== 13. FOOTER ========================================================================== */ .site-footer { background: var(--c-bg-dark); color: rgba(255,255,255,.75); padding: 4.5rem 0 0; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-logo { background: #fff; display: inline-flex; padding: .6rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; } .footer-logo img { height: 38px; width: auto; } .footer-tagline { font-family: var(--font-heading); font-weight: 700; color: #fff; letter-spacing: .03em; } .social-links { display: flex; gap: .75rem; margin-top: 1.25rem; } .social-links a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; color: #fff; } .social-links a:hover { background: var(--gradient-brand); border-color: transparent; color: #fff; } .footer-widget-title { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; } .footer-nav li { margin-bottom: .65rem; } .footer-nav a, .footer-widget a { color: rgba(255,255,255,.72); } .footer-nav a:hover, .footer-widget a:hover { color: var(--c-orange); } .footer-contact li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .9rem; font-size: .92rem; } .footer-contact .dashicons { font-size: 18px !important; width: 18px !important; height: 18px !important; color: var(--c-orange); margin-top: .15rem; } .footer-widget { margin-bottom: 1.5rem; } /* Widgets natifs WordPress ("Archives", "Catégories", "Articles recents", "Calendrier", "Recherche", "Meta", "Nuage de mots-cles"...) deposes dans les colonnes du pied de page : on force un texte clair, quel que soit le balisage genere par WordPress (celui-ci ne connait pas nos classes maison). */ .footer-widget, .footer-widget p, .footer-widget li, .footer-widget label, .footer-widget span, .footer-widget th, .footer-widget td { color: rgba(255,255,255,.75); } /* Widgets "bloc" (Apparence > Widgets version blocs) : un bloc Titre/Paragraphe place par l'utilisateur (ex. bloc Groupe + bloc Titre "Archives") herite sinon du style global h1-h6 = bleu marine sur fond bleu marine = invisible. */ .footer-widget h1, .footer-widget h2, .footer-widget h3, .footer-widget h4, .footer-widget h5, .footer-widget h6 { color: #fff; font-size: 1rem; margin: 0 0 1.1rem; } .footer-widget .wp-block-group, .footer-widget .wp-block-group__inner-container { margin: 0; padding: 0; } .footer-widget ul { list-style: none; margin: 0; padding: 0; } .footer-widget li { margin-bottom: .55rem; font-size: .92rem; } .footer-widget ul ul { margin-top: .5rem; padding-left: 1rem; } /* sous-categories */ .footer-widget a { text-decoration: none; } .footer-widget select, .footer-widget input, .footer-widget textarea { width: 100%; padding: .55rem .75rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; } .footer-widget select option { color: var(--c-text); } /* liste deroulante = rendue par l'OS, texte lisible sur fond clair */ .footer-widget input::placeholder { color: rgba(255,255,255,.5); } .footer-widget table { width: 100%; border-collapse: collapse; } /* widget Calendrier */ .footer-widget caption { color: #fff; margin-bottom: .5rem; } .footer-widget th, .footer-widget td { text-align: center; padding: .3rem; border: 1px solid rgba(255,255,255,.12); font-size: .8rem; } .footer-widget table a { color: var(--c-orange); font-weight: 700; } .footer-bottom__inner { display: flex; justify-content: space-between; padding: 1.5rem 0; font-size: .82rem; color: rgba(255,255,255,.55); } .footer-bottom a { color: rgba(255,255,255,.7); } /* ========================================================================== 14. ANIMATIONS (reveal au scroll, via IntersectionObserver en JS) ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== 15. RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__actions { justify-content: center; } .hero__art { order: -1; } .about-section__inner { grid-template-columns: 1fr; } .services-grid, .services-grid--full, .value-grid, .mv-grid, .partners-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } .footer-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } } /* Bascule vers le menu mobile (hamburger) des que 7 entrees de menu + logo + CTA ne tiennent plus confortablement sur une seule ligne (ecrans "petit laptop"). */ @media (max-width: 1100px) { .main-nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 85vw); height: 100vh; background: #fff; padding: 6rem 1.75rem 2rem; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s ease; z-index: 1000; overflow-y: auto; } body.admin-bar .main-nav { padding-top: calc(6rem + 32px); } .main-nav.is-open { transform: translateX(0); } .main-nav__list { flex-direction: column; align-items: flex-start; gap: .3rem; flex-wrap: nowrap; } .main-nav__list li { display: block; width: 100%; } .main-nav__list a { padding: .7rem 0; white-space: normal; } .main-nav__list .menu-item-has-children > a::before { display: none; } /* En mobile, les sous-menus s'affichent en ligne (accordeon simplifie), plus de survol possible */ .main-nav__list .sub-menu { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: none; position: static; box-shadow: none; border: none; margin: 0 0 .5rem 1rem; padding: 0; } .nav-toggle { display: flex; } .site-header__actions .btn--sm { display: none; } } @media (max-width: 782px) { .services-grid, .services-grid--full, .value-grid, .mv-grid, .partners-grid, .news-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom__inner { flex-direction: column; gap: .5rem; text-align: center; } .stats__grid { grid-template-columns: 1fr 1fr; } }