/* Theme Name: BOP IMPRESSION Theme URI: https://bopimpression.sn Author: BOP IMPRESSION Description: Thème sur mesure pour BOP IMPRESSION, imprimerie numérique et offset au Sénégal. Tout le contenu (textes, photos, ateliers, équipe, catalogue) se modifie depuis l'admin WordPress : Apparence > Personnaliser pour les textes des sections, et les menus "Produits", "Équipe", "Ateliers", "Clients", "Services" et "Témoignages clients" dans le tableau de bord pour le contenu répétable. Version: 3.67 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: bop-impression */ :root{ --blue:#0856AE; --blue-deep:#1361C4; --teal:#F5A623; --orange:#FF7A29; --orange-deep:#E85D04; --yellow:#F5A623; --sky:#2D9CDB; --ink:#0856AE; --paper:#F5F9FD; --paper-alt:#E9F1FB; --grey:#55677A; --line:#DCE6F0; --radius:16px; --shadow: 0 10px 30px rgba(10,30,51,0.10); --shadow-lg: 0 20px 50px rgba(10,30,51,0.18); --shadow-glow: 0 16px 40px rgba(19,97,196,0.22); /* Effet "3D" façon sonacos.sn : plusieurs ombres douces superposées (pas une seule ombre nette) — ça donne une impression de profondeur/flottement bien plus réaliste qu'une ombre plate classique. Utilisé sur les cartes/photos ci-dessous (voir --shadow-3d) et, en version pour objet détouré (logos, icônes, produits), via filter:drop-shadow (voir .effect-3d-drop). */ --shadow-3d: 0 1px 2px rgba(10,30,51,0.06), 0 8px 16px rgba(10,30,51,0.10), 0 28px 48px -12px rgba(10,30,51,0.28); --shadow-3d-hover: 0 2px 3px rgba(10,30,51,0.07), 0 12px 22px rgba(10,30,51,0.12), 0 36px 60px -12px rgba(10,30,51,0.34); } *{box-sizing:border-box;} /* Le pied de page (footer{background:var(--ink)}) est toujours le dernier élément de la page. Sur Mac/trackpad, le "rebond" de défilement au-delà du bas de la page découvre brièvement le fond de — s'il reste blanc (--paper) alors que le pied de page est bleu foncé, ça donne l'impression d'un "espace blanc" en bas quand on scrolle jusqu'au bout. On aligne donc le fond de sur celui du pied de page. */ html{scroll-behavior:smooth;overflow-x:hidden;background:var(--ink);} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } body{ margin:0; /* v3.64 (demande du client : "quand j'ai essayer avec mon telephone cela bouge") — "overflow-x:hidden" n'était posé QUE sur (ligne juste au-dessus). Sur Safari iOS en particulier, ça ne suffit pas toujours à empêcher le "rebond" élastique du bout des doigts vers la gauche/droite quand un élément plein-écran comme ".cat-carousel-wrap" (voir plus bas, "width:100vw") dépasse d'un pixel ou deux du cadre — la page semblait alors "bouger"/glisser horizontalement pendant le défilement. Il faut le poser sur ET ensemble pour que ce soit fiable sur iOS. */ overflow-x:hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; /* Compense l'en-tête "position:absolute" (voir header.main) qui sort du flux normal — sans ça, tout le contenu remonterait sous l'en-tête sur les pages sans bannière/photo en haut. --header-h est mesuré en JS (site.js) ; le repli 140px sert avant que le JS ait mesuré. */ padding-top:var(--header-h, 140px); } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} .wrap{max-width:1200px;margin:0 auto;padding:0 24px;} section{padding:88px 0;} h1,h2,h3,h4{margin:0 0 .5em 0;font-weight:800;letter-spacing:-0.01em;} /* v2.9 (demande du client : "les titres sur le corps du site exemple engagement et valeurs et tous autres grand titres doit etre en orange") — tous les grands titres de section (h2) du site passent en orange par défaut (déjà le cas pour certains, comme les titres de section sur l'accueil — voir "#realisations .cat-head h2" plus bas : on généralise ce même choix à tout le site au lieu de le répéter section par section). Exceptions volontaires, gardées en blanc pour rester lisibles : les titres posés SUR un fond déjà orange (".cat-cta-strip h2", ".warm-band h2" sur Services/Réalisations) — orange sur orange serait invisible. */ h2{font-size:clamp(26px,4vw,38px);color:var(--orange);} h3{font-size:19px;} p{margin:0 0 1em 0;color:var(--grey);} /* ===== BOUTONS (avec effet de "brillance" au survol) ===== */ .btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 30px;border-radius:100px;font-weight:700;font-size:14.5px;letter-spacing:.01em; border:2px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space:nowrap; } .btn::after{ content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1; background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); transform:skewX(-20deg);transition:left .55s ease;pointer-events:none; } .btn:hover::after{left:130%;} .btn-primary{background:linear-gradient(120deg, var(--blue), var(--blue-deep));color:#fff;box-shadow:var(--shadow-glow);} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(19,97,196,0.32);} .btn-outline{background:transparent;border-color:#fff;color:#fff;} .btn-outline:hover{background:#fff;color:var(--ink);transform:translateY(-2px);} .btn-dark{background:var(--ink);color:#fff;} .btn-dark:hover{background:var(--blue-deep);transform:translateY(-2px);} .section-head{position:relative;max-width:680px;margin:0 auto 48px;text-align:center;isolation:isolate;} .section-head::before,.section-head::after{ content:'';position:absolute;border-radius:50%;filter:blur(38px);z-index:-1;opacity:.28;pointer-events:none; animation:blobFloat 10s ease-in-out infinite; } .section-head::before{width:170px;height:170px;background:var(--blue);top:-56px;left:-30px;} .section-head::after{width:130px;height:130px;background:var(--orange);bottom:-40px;right:-20px;animation-delay:2.4s;} @keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14px,-16px) scale(1.1);}} .section-head .kicker{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;} /* ===== MAIN HEADER ===== Repassé en "static" (demande du client : "entete ne doit pas etre fixe") — l'en-tête défile de nouveau avec la page, il ne reste plus collé en haut de l'écran. ".main::after" (nouveau) : dégradé blanc → transparent posé APRÈS le bas de l'en-tête (pas dedans), pour que la transition vers la photo du diaporama (ou la bannière de page) se fasse en douceur au lieu d'une ligne nette (demande du client : "vers le bad de entete fait une degrader pour qu'on ne voit pas la separation du fond blanc"). Doit être "position:relative" sur "header.main" pour que ce dégradé se positionne par rapport à lui, et avoir un z-index plus élevé que le diaporama pour se voir PAR-DESSUS la photo plutôt que dessous. */ /* v1.52 — nouvel essai (demande du client : "je veux que le header soit en plein largeur enleve le fond blanc... essaye de mettre seulement les menu sur une forme blanc ou bleu") : plus de fond blanc du tout sur l'en-tête — il devient transparent et flotte par-dessus la photo (comme la version "fixe" essayée plus tôt), mais en "position:absolute" et non "fixed" : il défile normalement avec la page au lieu de rester collé en haut de l'écran pendant le défilement (le client ne veut PAS d'en-tête fixe — voir plus haut). Comme un en-tête absolu sort du flux normal, on compense avec --header-h (mesuré en JS, voir site.js) : "body" reçoit un padding-top équivalent, et ".hero-wrap"/".cat-banner" reçoivent une marge négative du même montant pour que leur photo démarre bien à y=0, juste derrière l'en-tête transparent. Seul le menu (.nav-links) reste sur une forme blanche opaque, pour rester lisible quelle que soit la photo en dessous — logo et icônes sociales restent tels quels par-dessus la photo (à ajuster si besoin après retour du client). */ /* v1.56 (référence DevTools envoyée par le client — un en-tête "fixed...bg-gradient-to-b from-white/90 via-white/55 to-transparent backdrop-blur-sm" — avec la consigne : "fait le moi pareille juste moi le nav ne doit pas rester fixe cela doit etre scroler mais tous le reste doit etre pareille") : on reprend EXACTEMENT ce style (dégradé blanc opaque en haut → transparent en bas, flou verre dépoli, pleine largeur, sans forme/pilule bleue) mais en "position:absolute" et non "fixed" — l'en-tête défile normalement avec la page au lieu de rester collé en haut (le client ne veut PAS d'en-tête fixe, redemandé plusieurs fois). Toujours pas de fond plein ni de pilule : juste ce dégradé, sur toute la largeur, qui laisse la photo transparaître en bas de l'en-tête. */ header.main{ position:absolute;top:0;left:0;right:0;width:100%;z-index:60; background:linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } /* v1.79 (demande du client : "pousse le logo vers le gauche encore") — même technique "plein écran" que les flèches du carrousel accueil et le bouton WhatsApp du pied de page : ".nav" sortait auparavant à peine du bord d'une colonne centrée à 1200px (donc un grand vide à gauche du logo sur les écrans larges) ; il atteint maintenant le vrai bord de la fenêtre. */ /* v1.80 (le client a vu le résultat de v1.79 : "le menu est decaler, le menu doit rester au milieu de la page, seul le logo est bon à sa place") — le "gap" fixe utilisé en v1.79 collait le menu juste après le logo, donc pas centré sur la page dès que le logo n'était plus au centre lui non plus. On revient à "justify-content:space-between" pour le logo et les icônes (chacun reste bien à son bord), MAIS le menu (".nav-links") en sort : il devient position:absolute, centré tout seul par rapport à ".nav" (qui fait toute la largeur de l'écran depuis v1.79) — il reste donc exactement au milieu de la page quelle que soit la largeur du logo à gauche ou des icônes à droite. */ .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;width:100vw;max-width:100vw;position:relative;left:50%;transform:translateX(-50%);} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;flex-shrink:0;} /* Le logo BOP IMPRESSION est un visuel complet (emblème + nom en dessous), pas une icône carrée : on l'affiche donc à sa taille/proportion réelle (object-fit:contain, pas de recadrage ni de cercle) pour ne jamais le déformer ou en couper un morceau, quelle que soit sa forme d'origine. */ /* Le logo empile l'emblème ("B") ET le nom complet ("BOP IMPRESSION & SERVICES") en petit texte tout en bas de l'image : à une hauteur trop réduite, ce texte devient illisible même si le logo entier est bien visible. On l'affiche donc nettement plus grand pour que ce texte reste lisible, quitte à ce que l'en-tête/le pied de page soient un peu plus hauts. */ .brand-mark{height:112px;width:auto;max-width:340px;flex-shrink:0;object-fit:contain;} @media (max-width:700px){.brand-mark{height:84px;max-width:260px;}} /* v1.79 (demande du client : "sans toucher au fichier", option retenue — agrandir juste un peu l'emblème dans l'en-tête). Uniquement dans l'en-tête ("header.main .brand-mark", plus spécifique que ".brand-mark" seul) : le pied de page garde sa taille d'origine, on ne l'a pas demandé pour lui. */ header.main .brand-mark{height:128px;max-width:380px;} @media (max-width:700px){header.main .brand-mark{height:96px;max-width:280px;}} /* v1.80 (demande du client : "pour le logo est-ce que tu ne vas pas ajouter de l'ombre blanche comme sur le footer") — sur le pied de page (fond bleu uni), le blanc de l'ovale du logo se détache déjà tout seul. Dans l'en-tête, le fond est une photo claire/floutée : on ajoute donc ici un halo blanc doux DERRIÈRE le logo (filter:drop-shadow, qui suit la forme réelle du PNG transparent plutôt qu'un carré) pour retrouver le même effet de contraste que sur le pied de page. */ header.main .brand-mark{filter:drop-shadow(0 0 14px rgba(255,255,255,.85)) drop-shadow(0 0 28px rgba(255,255,255,.6)) drop-shadow(0 4px 10px rgba(10,30,51,.25));} /* Le menu doit rester centré par rapport à TOUTE la largeur de l'écran (voir commentaire v1.80 plus haut), pas par rapport à l'espace restant entre logo et icônes : position:absolute + left:50% le sort du flux flex normal, ".nav" (position:relative, pleine largeur) sert de repère. */ /* width:max-content — sans ça, "left:50%" réduit la largeur disponible calculée par le navigateur (moitié de la largeur de l'écran environ), ce qui repliait les libellés sur 2 lignes ("NOS RÉALISATIONS" coupé) bien avant que ça soit vraiment nécessaire. Avec "max-content", la pilule garde sa largeur naturelle sur une seule ligne jusqu'à ce que le menu mobile prenne le relais (voir plus bas). */ .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;} /* Masqué visuellement mais gardé dans le DOM pour les lecteurs d'écran et le SEO (voir header.php/footer.php) — le nom du site est déjà écrit dans l'image du logo. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* v1.56 : l'en-tête redevient un dégradé clair (voir header.main) au lieu d'un fond bleu plein — les liens repassent donc en texte sombre ("ink"), lisible sur ce fond clair. */ /* v1.71 (demande du client : "met les ecriture ... en orange et tu ajoute effet 3d derriere pour que les ecriture soit plus visible") — l'en-tête flotte par-dessus la photo du haut de page (position:absolute, voir header.main), donc le texte a besoin d'une vraie ombre portée pour rester lisible quelle que soit la photo, pas juste d'une couleur. */ /* v1.74 (le client trouve le menu toujours peu visible malgré l'ombre) — on avait renforcé l'ombre en un contour net (plusieurs ombres à 0 décalage superposées), mais le client a montré une capture (référence "AfriBlog") où le menu repose sur une vraie pilule blanche opaque au lieu de compter sur une ombre pour se détacher de la photo. */ /* v1.76 (demande du client : "met une fond blanc pour ici seulement sans toucher de l'autre fond comme cette entete en pj") — fond blanc opaque UNIQUEMENT derrière ".nav-links" (pas sur tout "header.main", qui garde son dégradé transparent d'origine : logo et icônes sociales restent par-dessus la photo sans changement). Comme le texte repose maintenant sur du blanc plein, l'ombre épaisse de v1.74 (pensée pour rester lisible SUR LA PHOTO) n'est plus nécessaire pour la lisibilité — on la remplace par une ombre légère, juste pour garder un peu de relief/3D. */ /* v1.78 (demande du client, capture "AfriBlog" à l'appui) : petits points de séparation entre les liens, comme sur sa référence — posés en ::before sur chaque
  • SAUF le premier ("li + li"), pour ne pas avoir de point avant "ACCUEIL" ni après "CONTACT". "gap" repassé à 0 sur le