/* ============================================================ perso.css — Surcharges MIAL du thème Sendagi ============================================================ PALETTE VERT FOUGÈRE — tirée de squelettes/img/sanctuary.jpg Remplace la palette orange/ambre de Sendagi --mial-vert #4E7A43 Vert naturel moyen (boutons, catégories) --mial-vert-sombre #1C3A27 Vert mousse foncé (navbar, header, footer) --mial-vert-vif #6AA34F Vert lumineux des feuilles(hover léger, slides) --mial-vert-nuit #0B1A12 Vert forêt très sombre (hover profond) --mial-vert-fougere #2F5B36 Vert fougère (accent intermédiaire) --mial-vert-clair #F3F2EA Blanc cassé de la fleur (fonds clairs) --mial-vert-bordure #88C46A Vert clair végétal (séparateurs) --mial-accent #D8C96B Cœur jaune pâle de la fleur (accent chaud) ============================================================ */ :root { --mial-vert: #4E7A43; --mial-vert-sombre: #1C3A27; --mial-vert-vif: #6AA34F; --mial-vert-nuit: #0B1A12; --mial-vert-fougere:#2F5B36; --mial-vert-clair: #F3F2EA; --mial-vert-bordure:#88C46A; --mial-accent: #D8C96B; } /* ------------------------------------------------------------ 1. FOND DE PAGE, BANDEAU D'ACCUEIL et HEADLINE Sendagi : body / .header-home / .headline-wrapper → #f39325 url(bg-pattern-fade.png) repeat .headline-wrapper mobile : border-top #f39325 ------------------------------------------------------------ */ /* Le body en blanc cassé — fond naturel du contenu. Les espaces parasites entre sections sont couverts en forçant margin-top: 0 sur les premiers éléments après le header. */ body { background-color: var(--mial-vert-clair) !important; } /* Zone logo + menus desktop — home et articles .header-home : conteneur du logo sur la home (full-width) .header-logo-band : surcharge MIAL du inc_header.html pour les articles (full-width) → vert naturel moyen #4E7A43 */ .header-home, .header-logo-band { background: var(--mial-vert) url(../img/bg-pattern-fade.png) repeat !important; border-top: 3px solid var(--mial-vert-sombre) !important; /* #1C3A27 — liseré sombre bien visible */ padding-top: 10px !important; /* harmonisé home + articles */ padding-bottom: 10px !important; /* espace en bas des deux headers */ padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Logo desktop : cercle, taille réduite, 15px d'espace à droite */ .header-logo-img { border-radius: 50% !important; width: 70px !important; height: 70px !important; object-fit: cover !important; margin-right: 15px !important; } /* Logo mobile (navbar) : cercle net, taille fixe */ .header-logo-rwd { border-radius: 50% !important; width: 40px !important; height: 40px !important; object-fit: cover !important; margin-right: 8px !important; } /* Le
intérieur peut avoir son propre fond ou des marges verticales qui laissent le body blanc cassé visible. On le force transparent et sans marges parasites. */ .header-home > header, .header-logo-band > header { background: transparent !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; } /* Textes blancs dans le header des articles (Sendagi ne cible que .header-home) */ .header-logo-band .banner-title, .header-logo-band .banner-nav-home { color: var(--mial-vert-clair) !important; } .header-logo-band .banner-desc { color: rgba(243, 242, 234, 0.85) !important; /* #F3F2EA à 85% opacité */ } /* Bandeau diapo home .home-row-0 est maintenant hors du .header-home et hors du .container → fond fougère, pleine largeur naturelle, 10px d'espace haut et bas margin-top: 0 évite la bande blanche entre header et diapo */ .home-row-0, .home-row-0-0 { background-color: var(--mial-vert-fougere) !important; padding-top: 20px !important; padding-bottom: 20px !important; margin-top: 0 !important; } /* Bandeau titre articles — full-width car c'est un wrapper externe → vert fougère #2F5B36 margin-top: 0 évite la bande blanche entre header et bandeau titre */ .headline-wrapper { background: var(--mial-vert-fougere) url(../img/bg-pattern-fade.png) repeat !important; margin-top: 0 !important; } /* Sur mobile : header desktop caché (logo présent dans la navbar .rwd-show) → évite la bande blanche du padding-top body entre navbar et contenu */ @media (max-width: 768px) { .header-logo-band, .header-home { display: none !important; } } @media (max-width: 768px) { .headline-wrapper { border-top-color: var(--mial-vert-fougere) !important; } /* Espace sous la navbar fixe (≈56px) pour le bandeau titre des articles */ .headline-wrapper { margin-top: 60px !important; } /* Sur mobile : diapo home — remplace le padding-top de 20px par 60px pour créer l'espace sous la navbar directement dans le fond fougère, sans espace parasite interne avant le contenu du carousel */ .home-row-0 { padding-top: 60px !important; } /* Espaceur dédié pour la home — div.rwd-show.mial-navbar-spacer dans le template */ .mial-navbar-spacer { height: 60px !important; background-color: transparent !important; } } /* ------------------------------------------------------------ 2. BARRE DE NAVIGATION FIXE (rwd mobile) Zone logo + menus : vert naturel moyen #4E7A43 ------------------------------------------------------------ */ .navbar { background-color: var(--mial-vert) !important; } /* ------------------------------------------------------------ 3. BOUTONS Sendagi : #f6a800 / hover #8f4018 Sendagi dans slides (owl) : #ec6825 ------------------------------------------------------------ */ .btn-sendagi { background-color: var(--mial-vert) !important; color: var(--mial-vert-clair) !important; } .btn-sendagi:hover, .btn-sendagi:focus { background-color: var(--mial-vert-nuit) !important; color: var(--mial-vert-clair) !important; } .item .btn-sendagi { background-color: var(--mial-vert-vif) !important; } /* ------------------------------------------------------------ 4. POINTS DE NAVIGATION DU CARROUSEL (owlcarousel) Sendagi : #ec6825 ------------------------------------------------------------ */ .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: var(--mial-vert) !important; } /* ------------------------------------------------------------ 5. CATÉGORIES / SURTITRE (home-row-1-categorie) Sendagi : #f6a800 ------------------------------------------------------------ */ .home-row-1-categorie { color: var(--mial-vert) !important; } .item .home-row-1-categorie { color: var(--mial-vert-vif) !important; } /* ------------------------------------------------------------ 6. BLOCS ARTICLES DE LA HOME (home-row-1-*) Le body étant vert sombre, tous les .home-row doivent avoir un fond explicite. Sendagi : .home-row-1-2 / .home-row-even → #f9f9f9 (légèrement grisé) → On uniformise en blanc cassé pour tous. ------------------------------------------------------------ */ .home-row-1, .home-row-1-2, .home-row-even { background-color: var(--mial-vert-clair) !important; /* #F3F2EA — blanc cassé de la fleur */ } /* Centrage des titres et boutons "Lire la suite" dans les blocs articles home UNIQUEMENT dans .home-row-1, pas dans le diapo (.home-row-0 / .item) */ .home-row-1 .home-row-1-titre, .home-row-1 .home-row-1-link { text-align: center !important; } .home-row-1 .home-row-1-link { display: block !important; } /* Annule explicitement pour les slides du diapo */ .home-row-0 .home-row-1-titre, .item .home-row-1-titre { text-align: left !important; } /* Espace autour de l'image du PREMIER article du contenu home uniquement (les items 2+ ont leur image en tête de bloc, pas besoin de marge en haut) */ .home-row-1-1 img { margin-top: 15px !important; margin-bottom: 15px !important; } /* Sur mobile : supprime le padding-top des blocs articles 2+ pour que l'image (passée en premier par order-first) ne soit pas décollée du haut */ @media (max-width: 768px) { .home-row-1:not(.home-row-1-1) { padding-top: 0 !important; } .home-row-1:not(.home-row-1-1) .content { padding-top: 0 !important; } .home-row-1:not(.home-row-1-1) .home-row-1-illus { margin-top: 0 !important; padding-top: 0 !important; } } /* ------------------------------------------------------------ 6b. BLOC home-row-2 (publications en pied de home) Sendagi : background #f6a800, liens hover #f0e1c2 ------------------------------------------------------------ */ /* Vert fougère #2F5B36 — plus clair que le header/footer, plus sombre que le principal */ .home-row-2 { background-color: var(--mial-vert-fougere) !important; } .home-row-2 a:hover { color: var(--mial-vert-clair) !important; } /* ------------------------------------------------------------ 7. LOGO NOM DU SITE dans le header Sendagi : #d8840c (pages internes) / #fff via .header-logo--white (home) Sur le fond vert vif du header → blanc. Sur les pages internes (fond blanc cassé) → vert naturel. ------------------------------------------------------------ */ /* Pages internes : logo sur fond clair → vert naturel */ .header-logo-name { color: var(--mial-vert) !important; } /* Header home et pages avec fond coloré : logo blanc cassé */ .header-logo--white .header-logo-name, .header-home .header-logo-name { color: var(--mial-vert-clair) !important; } .header-logo-name:hover { color: var(--mial-vert-nuit) !important; } .header-logo--white .header-logo-name:hover, .header-home .header-logo-name:hover { color: var(--mial-vert-clair) !important; } /* ------------------------------------------------------------ 8. FOOTER Sendagi : .footer background #f6a800 footer-row-1 border #f9c14a footer a:hover #7e735f ------------------------------------------------------------ */ .footer { background-color: var(--mial-vert-sombre) !important; } .footer-row-1 { border-bottom-color: var(--mial-vert-bordure) !important; } .footer a:hover { color: var(--mial-vert-clair) !important; } /* ------------------------------------------------------------ 9. SECTIONS A2A et TROMBI Sendagi : #d08115 ------------------------------------------------------------ */ /* Masque le bloc "articles proposés à la suite" en bas des articles */ .a2a-wrapper, .a2a-zone { display: none !important; } .a2a-categorie { color: var(--mial-vert) !important; } .trombi-item { border-top-color: var(--mial-vert-bordure) !important; } .trombi-item a:hover { color: var(--mial-vert) !important; } /* ------------------------------------------------------------ 10b. BALISES CODE — couleur orange Sendagi originale Bootstrap 4 impose #e83e8c (rose) sur les inline. On restaure l'orange Sendagi #f39325. ------------------------------------------------------------ */ code { color: var(--mial-vert-sombre) !important; /* #1C3A27 — vert mousse foncé */ } /* Blocs pre/code : fond sombre, texte clair — pas affecté par la couleur inline */ pre code { color: inherit !important; } /* ------------------------------------------------------------ 10. ARTICLE — TITRES H2 et LIENS Sendagi : h2 background #b7501e liens #ff5400 / hover #4f1b02 ------------------------------------------------------------ */ .article-texte h2 { background-color: var(--mial-vert-sombre) !important; color: var(--mial-vert-clair) !important; } .article-texte a { color: var(--mial-vert) !important; } .article-texte a:hover { color: var(--mial-vert-nuit) !important; } /* ------------------------------------------------------------ 11. TABLEAUX — alternance de lignes Sendagi : odd #d5c8948a / even #d5c894 (beige) ------------------------------------------------------------ */ tr.odd { background-color: rgba(78, 122, 67, 0.12) !important; } tr.even { background-color: var(--mial-vert-clair) !important; } /* ------------------------------------------------------------ 12. FORMULAIRES Sendagi : fieldset.previsu legend #f39325 form fields border orange ------------------------------------------------------------ */ fieldset.previsu legend { background-color: var(--mial-vert) !important; color: var(--mial-vert-clair) !important; } /* ------------------------------------------------------------ 13. ALERTES ET INDICATEURS Sendagi : alert-ok #f7b526 ------------------------------------------------------------ */ .alert-ok { color: var(--mial-vert) !important; } /* ------------------------------------------------------------ 14. FONDS BLANCS DE SENDAGI — remplacement global par #F3F2EA Sendagi utilise #fff / #ffffff / white sur plusieurs éléments de contenu. ------------------------------------------------------------ */ /* Contenu principal (wrapper articles et pages internes) */ .content-main-wrapper, .content-wrapper, .article-wrapper, .a2a-wrapper { background-color: var(--mial-vert-clair) !important; } /* Extra content (publications secondaires dans home-row-2) : fond fougère #2F5B36 pour s'intégrer au fond de leur zone */ .publication-item { background-color: var(--mial-vert-fougere) !important; } /* Formulaires SPIP */ .formulaire_spip .text, .formulaire_spip textarea, .formulaire_spip select { background-color: var(--mial-vert-clair) !important; } /* Éléments HTML natifs : input, textarea, select */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea, select { background-color: var(--mial-vert-clair) !important; color: var(--mial-vert-sombre) !important; } /* Placeholder de la barre de recherche et des champs (lisible sur fond blanc cassé) */ input::placeholder, textarea::placeholder { color: var(--mial-vert) !important; opacity: 0.7 !important; } /* Tableaux */ th { background-color: var(--mial-vert-clair) !important; }