/* ========================================================================= cyboo-fixes.css — Correctifs cibles Charge APRES style.css et les bundles, dans includes/header.php. Tout est en override, reversible en supprimant la balise . ========================================================================= */ /* ---- Bug 1 : logo peu visible sur le hero ------------------------------- Header transparent au-dessus du degrade violet->corail. Le logo fourni est fonce (visible sur le header blanc scrolle). On le force en BLANC tant que .nav n'a pas .scrolled -> contraste parfait sur le degrade. Une fois scrolle, .scrolled apparait, le selecteur ne matche plus, le logo couleur revient. Scope .page-accueil : la classe est posee sur le par header.php (). On cible ainsi UNIQUEMENT l'accueil, sans dependre de :has() qui n'est pas fiable partout. */ body.page-accueil .nav:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1); /* transforme le logo en blanc plein */ opacity: 1; } body.page-accueil .nav:not(.scrolled) .nav-logo span { color: #fff !important; /* fallback texte injecte par onerror */ } /* ---- Bug 1b : liens de nav peu visibles sur le hero --------------------- Meme cause que le logo. Les liens sont gris (var(--gris-600)) et le lien actif violet -> invisibles sur le hero transparent. On les force en BLANC tant que .nav n'a pas .scrolled ; au scroll (header blanc), le selecteur ne matche plus et les couleurs d'origine reviennent seules. - Desktop uniquement (>=969px) : sur mobile le menu est un panneau blanc. - 1er niveau uniquement (.nav-links > li > a) : epargne le sous-menu. - Scope .page-accueil : uniquement l'accueil, comme le logo. */ @media (min-width: 969px) { body.page-accueil .nav:not(.scrolled) .nav-links > li > a { color: #fff !important; } body.page-accueil .nav:not(.scrolled) .nav-links > li > a.active, body.page-accueil .nav:not(.scrolled) .nav-links > li > a.nav-phone { color: #fff !important; } } /* ---- Bug 2 : photo "Qui sommes-nous" rognee sur mobile ------------------ .qsn-photo est un . Le crop vient d'un object-fit:cover + hauteur fixe herites d'un bundle. Sur mobile on laisse la hauteur suivre le ratio naturel et on passe en contain : plus aucune partie coupee. */ @media (max-width: 768px) { .qsn-photo { width: 100% !important; height: auto !important; /* supprime la hauteur fixe -> ratio naturel */ max-height: none !important; /* enleve un eventuel plafond de hauteur */ object-fit: contain !important; /* rien n'est coupe */ aspect-ratio: auto !important; /* neutralise un ratio force eventuel */ display: block; } } /* ---- Bug 3 : finition du menu deroulant mobile -------------------------- Le ::after du lien "Nos offres" servait a la fois de barre coral (survol) ET de fleche. Le tap collait le :hover -> barre coral pleine largeur, puis dropdown-open la faisait pivoter a 180deg ("la ligne orange qui fait un 180"). Ici on neutralise tout l'heritage de la barre et on garde un chevron propre, place a droite, qui tourne bas -> haut a l'ouverture. */ @media (max-width: 968px) { /* Texte a gauche, fleche a droite, alignes proprement */ .nav-dropdown > a { display: flex !important; align-items: center; justify-content: space-between; } /* Le chevron : plus de position absolue, plus de fond coral, plus de width:100% */ .nav-dropdown > a::after { content: '\25BC' !important; /* fleche bas (echappement CSS, aucun souci d'encodage) */ position: static !important; /* annule position:absolute de .nav-links a::after */ left: auto !important; bottom: auto !important; width: auto !important; /* neutralise le width:0 / width:100% du survol */ height: auto !important; background: none !important; /* supprime le fond coral -> plus de "ligne orange" */ font-size: 0.7rem !important; margin-left: 8px !important; transition: transform 0.3s !important; transform: rotate(0deg); /* etat ferme */ } .nav-dropdown.dropdown-open > a::after { transform: rotate(180deg) !important; /* fleche haut a l'ouverture */ } /* ---- Numero de telephone : centre dans le bouton pleine largeur ---- */ .nav-phone { display: flex !important; /* rebat le display:block herite en mobile */ width: 100%; /* le bouton remplit la colonne du menu */ justify-content: center; /* centre horizontalement l'icone + le numero */ align-items: center; } } /* ---- Phase design 1 : fleche des cartes offres -------------------------- Les emojis des cartes ont ete remplaces par des icones SVG (dans index.php). Ici on gere juste l'alignement de la petite fleche et son glissement au survol de la carte -> micro-interaction "sur-mesure", zero couleur ajoutee. */ .pillar-link { display: inline-flex; /* remplace inline-block pour aligner texte + fleche */ align-items: center; gap: .4rem; } .pillar-arrow { transition: transform .25s ease; } .pillar-card:hover .pillar-arrow { transform: translateX(4px); /* la fleche avance quand on survole la carte */ } /* ---- Phase design 2 : barre corail en haut des cartes au survol ---------- Sur les cartes (.pillar-card, .formation-card, .product-card), une barre en degrade se deploie de gauche a droite en haut au survol (le ::before qui scaleX). C'est UNIQUEMENT cette barre que l'on retire. Le leger soulevement de la carte au survol (translateY) est conserve tel quel. */ .pillar-card::before, .formation-card::before, .product-card::before { display: none !important; } /* ---- Phase design 3 : titres de section alignes a gauche + intitule ------- Applique a TOUTES les pages (validation patron) : les titres de section passent a gauche (au lieu de centres) et sont precedes d'un petit intitule coral ("NOS OFFRES", "POURQUOI CYBOO"...). Le trait devant l'intitule est retire (demande patron) : l'intitule est du texte coral seul. */ .section-title { text-align: left; max-width: 640px; } .section-title .subtitle { margin-left: 0; margin-right: 0; } .eyebrow { display: inline-block; color: var(--corail); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .9rem; }