/* Styles partagés par tous les gabarits de page sur mesure (hors accueil, qui reste autonome dans accueil.css). En-tête, pied de page, bandeau héros institutionnel, motifs de section réutilisés sur Services, Projets, Pôle recherche, Blog & Actualités, Carrière et Contact. Deux paliers responsive seulement, comme sur l'accueil : "mid" = min-width 620px, menu replié sous max-width 1010px. */ .cerese-page { width: 100%; /* clip plutôt que hidden (09/10/2026) : hidden fait de .cerese-page un conteneur de défilement, ce qui empêche tout élément position: sticky de rester à l'écran (colonne « À lire aussi » des articles). clip coupe le débordement de la même façon sans cet effet. hidden reste en repli pour les navigateurs qui ignorent clip (Safari antérieur à 16). */ overflow-x: hidden; overflow-x: clip; font-family: var(--cerese-font); color: var(--cerese-encre); background: var(--cerese-blanc); } .cerese-page * { box-sizing: border-box; } .cerese-page a { color: var(--cerese-lien); text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { .cerese-page a:hover { color: var(--cerese-encre); } } /* Exception à la règle ci-dessus, pour les liens posés sur un aplat sombre. .cerese-page a:hover pèse (0,2,1), soit plus que les règles de couleur au repos de ces liens, qui pèsent (0,2,0) : au survol, le lien retour du bandeau passait donc en encre foncée sur le teal, illisible. Signalé par Louis le 07/09 sur « ‹ Blog & Actualités » (pages Le blog du CERESE, Actualités du CERESE, Publications & Articles). Le même lien sert aussi aux 4 pages Département, aux fiches Service, aux fiches chercheur et aux pages Candidature : toutes corrigées d'un coup, la correction portant sur la classe et non sur les gabarits. .cerese-article-hero__retour (blog.css, pages article) a exactement le même défaut et la même couleur de repos, il est traité ici pour que les deux lignes de défense restent au même endroit que la règle globale qu'elles corrigent. Le survol reste signalé, mais par un soulignement plutôt qu'un changement de couleur, même convention que .cerese-map__lien de la page Contact. :active et :focus n'ont besoin de rien : le a:active du thème parent ne pèse que (0,1,1) et perd déjà contre la couleur de repos. */ @media (hover: hover) { .cerese-page a.cerese-hero-inst__retour:hover, .cerese-page a.cerese-article-hero__retour:hover { color: var(--cerese-beige); text-decoration: underline; } } /* Suite de la même exception, étendue le 07/09 après un balayage de tous les liens du site : quatre autres endroits où un lien clair posé sur un aplat sombre basculait en encre foncée au survol, avec la même cause de spécificité. Louis les a validés en bloc. Les deux boutons reçoivent en plus un assombrissement du fond, seul retour visuel qui leur restait une fois la couleur du texte verrouillée : teal vers foncé pour le bouton Contact de l'en-tête (même valeur que son état is-active, déjà au vocabulaire du thème), vert vers la variante assombrie --cerese-lien pour le bouton du bandeau d'appel à l'action. Les liens du pied de page reçoivent un soulignement, comme le lien retour ci-dessus. Tout est sous (hover: hover) : sur mobile, un appui ne doit rien déclencher de tout ça, et l'état ouvert du menu garde ses propres règles. */ @media (hover: hover) { .cerese-page a.cerese-nav__contact:hover { color: var(--cerese-blanc); background: var(--cerese-fonce); } .cerese-page a.cerese-cta-bandeau__bouton:hover { color: var(--cerese-blanc); background: var(--cerese-lien); } .cerese-page .cerese-footer__col a:hover, .cerese-page .cerese-footer__contact a:hover { color: var(--cerese-blanc); text-decoration: underline; } .cerese-page .cerese-footer__bottom-inner a:hover { color: var(--cerese-bordure); text-decoration: underline; } } .cerese-page p { text-wrap: pretty; } /* ===== En-tête (identique sur toutes les pages) ===== */ .cerese-header { background: var(--cerese-blanc); color: var(--cerese-encre); border-bottom: 1px solid var(--cerese-bordure); } .cerese-header__inner { max-width: var(--cerese-container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); min-height: 80px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; } .cerese-page .cerese-header__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cerese-encre); flex: 0 1 auto; min-width: 0; margin-right: auto; } .cerese-header__brand img { width: auto; height: 56px; display: block; } /* Boutons icône (loupe recherche, trois traits menu mobile) : icône seule, sans cadre. !important sur border/color : même conflit de spécificité avec le reset de hello-elementor que partout ailleurs sur ce fichier (voir les commentaires plus bas) — un sélecteur d'attribut/élément du reset a la même force qu'une simple classe, et reset.css se charge après nous. */ .cerese-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: 0 0 auto; background: transparent; border: 0 !important; color: var(--cerese-teal) !important; cursor: pointer; } .cerese-search-toggle:focus { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; } @media (hover: hover) { .cerese-search-toggle:hover { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; } } /* La loupe se place toujours après Contact (nav visible) ou après le menu à trois traits (nav repliée) : comme .cerese-search-toggle est le dernier enfant de .cerese-header__inner dans le HTML, il suffit qu'il suive .cerese-nav dans le code pour arriver au bon endroit dans les deux cas, sans règle CSS spécifique. */ .cerese-burger { display: none !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: 0 0 auto; background: transparent; border: 0 !important; color: var(--cerese-teal) !important; cursor: pointer; } /* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux