intermédiaires
générés par drupal_view() — peu importe leur hauteur/display, ça ne
peut plus casser.
Technique layout nav+titre : CSS Grid avec hauteur explicite (pas
min-height) — grid-template-rows: auto 1fr place la nav en haut
(hauteur automatique) et le titre en bas de l'espace restant.
========================================================================== */
body.path-frontpage main {
margin-top: 0;
}
.site-header {
flex-shrink: 0; /* empêche le header d'être écrasé par le flex-column
de .dialog-off-canvas-main-canvas (pattern sticky-footer
Bootstrap, body/wrapper en h-100 = hauteur 1 écran) */
}
.site-header--hero {
position: relative;
height: 640px;
}
@media screen and (max-width: 560px) {
.site-header--hero {
height: 760px;
}
}
@media screen and (max-width: 560px) {
.site-header__hero-partner-logo {
height: 40px;
right: 1rem;
bottom: 1rem;
}
}
.site-header__hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
/* Parent DIRECT de l'
![]()
(généré par drupal_view). Un height:100% sur
l'image se calcule contre CE parent-là, pas contre .site-header__hero-media
(l'ancêtre positionné) — ce sont deux mécanismes CSS différents (percentage
height vs containing block d'un absolute). Sans cette ligne, le pourcentage
de l'image n'a rien de défini à calculer et échoue. */
.site-header__hero-media .views-element-container {
height: 100%;
display: block;
}
.site-header__hero-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.site-header__hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
/* Voile en 3 couches :
1) Vignette ancrée en bas à gauche (là où vit tout le bloc texte :
eyebrow doré + titre + sous-titre doré + boutons). Calculé pour
atteindre au moins 85% d'opacité sur TOUTE cette zone, pas juste
un point — c'est le seuil nécessaire pour que le texte doré (le
plus fragile des trois) garde 4.5:1 de contraste même dans le pire
des cas (un pixel quasi blanc de la photo juste derrière une lettre).
Le blanc du titre n'a besoin que de ~60%, donc à 85%+ les deux
passent large.
2) Vignette ancrée en bas à droite, même principe mais plus petite/
discrète — juste de quoi faire ressortir le logo partenaire,
pas un gros bloc de texte à couvrir.
3) Assombrissement léger en haut, pour la barre de nav transparente. */
background:
radial-gradient(
ellipse 1100px 650px at -5% 105%,
rgba(10, 8, 5, 0.92) 0%,
rgba(10, 8, 5, 0.88) 45%,
rgba(10, 8, 5, 0.55) 70%,
rgba(10, 8, 5, 0) 90%
),
radial-gradient(
ellipse 510px 250px at 100% 105%,
rgba(10, 8, 5, 0.75) 40%,
rgba(10, 8, 5, 0.55) 70%,
rgba(10, 8, 5, 0.2) 90%,
rgba(10, 8, 5, 0) 150%
),
linear-gradient(
to bottom,
rgba(10, 8, 5, 0.5) 0%,
rgba(10, 8, 5, 0) 20%
)
}
.site-header__bar {
position: relative;
z-index: 3;
width: 100%;
}
.site-header--hero .site-header__inner {
position: relative;
z-index: 2;
background: transparent;
margin-top: 0;
margin-bottom: 0;
}
.site-header--hero .site-header__logo svg path[fill="#0c100f"] {
fill: #ffffff;
}
.site-header--hero .site-header__menu .dropdown-toggle {
color: #ffffff;
}
.site-header--hero .site-header__menu .dropdown-toggle:hover,
.site-header--hero .site-header__menu .dropdown-toggle[aria-expanded="true"] {
color: var(--cl-gold);
}
.site-header--hero .site-header__search svg {
fill: #ffffff;
}
.site-header--hero .site-header__toggler span {
background: #ffffff;
}
.site-header--hero .site-header__menu .dropdown-menu {
background: #ffffff;
}
.site-header--hero .site-header__menu .dropdown-menu a {
color: var(--cl-ink);
}
.site-header__hero-content {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
max-width: var(--cl-container-max);
width: 100%;
padding: 2rem 1.25rem 3rem;
box-sizing: border-box;
color: #fff;
}
.hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 1em;
color: white;
margin-bottom: 0.5rem;
}
.hero__title {
font-family: var(--cl-font-display);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.05;
margin: 0 0 0.5rem;
}
.hero__subtitle {
font-style: italic;
color: white;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-cta--outline {
background: transparent;
border: 1px solid #fff;
}
.btn-cta--outline:hover {
background: rgba(255, 255, 255, 0.15);
}
/* --- menu mobile : en absolute, indépendant du flex/grid du header --- */
#mobileNav {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 15;
background: var(--cl-bg-cream);
max-height: calc(100vh - 80px);
overflow-y: auto;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}
#mobileNav .accordion {
border-radius: 0;
}
#mobileNav .accordion-item {
background: transparent;
border: none;
border-bottom: 1px solid rgba(43, 42, 38, 0.12);
}
#mobileNav .accordion-header {
margin: 0;
}
#mobileNav .accordion-button {
padding: 1rem 1.25rem;
color: var(--cl-ink);
box-shadow: none !important; /* nécessaire : override du focus-ring Bootstrap */
}
#mobileNav .accordion-button::after {
filter: none;
}
#mobileNav .accordion-body {
background: rgba(255, 255, 255, 0.5);
padding: 0.25rem 1.25rem 1rem;
}
#mobileNav .btn-cta--block {
border-radius: 0;
}
/* --- responsive barre du header --- */
@media screen and (max-width: 767px) {
.site-header__inner {
padding: 0.6rem 1rem;
gap: 0.6rem;
}
.site-header__logo svg {
width: 46px;
}
.site-header__actions {
gap: 0.5rem;
}
.btn-cta {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
gap: 0.35rem;
width:100%;
text-align:center;
display:inline-block;
}
.btn-cta svg {
width: 14px;
height: 14px;
}
.site-header__search svg {
width: 18px;
height: 18px;
}
.site-header__toggler {
width: 40px;
height: 20px;
}
}
@media screen and (max-width: 560px) {
.btn-cta {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
gap: 0.35rem;
width:100%;
text-align:center;
display:inline-block;
}
.site-header__hero-content {
padding: 1.25rem 1rem 4.5rem;
}
.hero__title {
font-size: 2rem;
}
.hero__cta {
gap: 0.6rem;
}
.hero__cta .btn-cta {
flex: 1 1 auto;
justify-content: center;
}
.site-header__inner
{
max-width: var(--cl-container-max);
margin: 0 auto;
display: block;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.75rem 1.25rem;
}
a.site-header__logo
{
width: 100%;
height: auto;
display: block;
margin-bottom: 10%;
margin-top: 12%;
}
a.site-header__logo svg
{
width: 69%;
height: auto;
position:relative;
margin:0 auto;
}
.site-header__actions
{
display:block;
}
.site-header__actions a.site-header__search:first-child,
.site-header__actions button.site-header__search:first-child
{
background:#b07f2e;
border-radius:5px;
padding: 5px;
vertical-align: top;
}
.site-header__actions a.site-header__search,
.site-header__actions button.site-header__search
{
width: 100%;
height: auto;
position:relative;
display: inline-block;
text-align: center;
border:1px solid white;
margin-bottom:2%;
}
.site-header__actions button.site-header__toggler
{
margin: 0 auto;
margin-top: 3%;
background: #B07F2E;
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius:5px;
}
}
@media screen and (max-width: 380px) {
.btn-cta__label {
display: none;
}
.btn-cta {
padding: 0.5rem;
}
.site-header__inner {
gap: 0.4rem;
}
.site-header__actions
{
display:block;
}
.site-header__actions a.site-header__search:first-child,
.site-header__actions button.site-header__search:first-child
{
background:#999;
border-radius:5px;
padding: 5px;
vertical-align: top;
}
.site-header__actions a.btn-cta,
.site-header__actions button.site-header__search
{
width: 100%;
height: auto;
position:relative;
display: inline-block;
text-align: center;
margin-bottom:2%;
border:1px solid white;
}
.site-header__actions button.site-header__toggler
{
margin: 0 auto;
margin-top: 3%;
background: #B07F2E;
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius:5px;
}
}
button.site-header__search
{
background:none;
border:none;
}
/* ==========================================================================
REFONTE 2026 — panneau de recherche (#siteSearch)
========================================================================== */
#siteSearch {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 20;
background: #fff;
border-top: 1px solid var(--cl-card-border);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}
.site-header__search-panel {
max-width: var(--cl-container-max);
margin: 0 auto;
padding: 1.5rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.search-panel__form {
flex: 1 1 auto;
display: flex;
align-items: center;
max-width: 640px;
margin: 0 auto;
background: var(--cl-bg-cream);
border: 1px solid var(--cl-card-border);
border-radius: 999px;
padding: 0.35rem 0.35rem 0.35rem 1.5rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-panel__form:focus-within {
border-color: var(--cl-gold-dark);
box-shadow: 0 0 0 3px rgba(132, 98, 38, 0.12);
}
.search-panel__input {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
padding: 0.65rem 0.5rem;
font-family: var(--cl-font-body);
font-size: 1rem;
color: var(--cl-ink);
}
.search-panel__input:focus-visible {
outline: 2px solid var(--cl-gold-dark);
outline-offset: 2px;
border-radius: 2px;
}
.search-panel__input::placeholder {
color: #6b6459;
}
.search-panel__submit {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--cl-gold-dark);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-panel__submit:hover {
background: var(--cl-gold-darker);
}
.search-panel__submit:focus-visible {
outline: 2px solid var(--cl-gold-dark);
outline-offset: 2px;
}
.search-panel__submit svg {
width: 18px;
height: 18px;
fill: #fff;
}
.search-panel__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: none;
border: none;
padding: 0.6rem 0.85rem;
border-radius: var(--cl-radius);
font-family: var(--cl-font-body);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--cl-ink);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.search-panel__close:hover {
background: var(--cl-bg-cream);
color: var(--cl-gold-dark);
}
.search-panel__close svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.search-panel__close:focus-visible {
outline: 2px solid var(--cl-gold-dark);
outline-offset: 2px;
}
@media screen and (max-width: 640px) {
.site-header__search-panel {
padding: 1.1rem 1rem;
gap: 0.6rem;
}
.search-panel__form {
padding-left: 1rem;
}
.search-panel__close-label {
display: none; /* juste l'icône, pour laisser la place au champ */
}
}
/* ==========================================================================
REFONTE 2026 — titre de page générique + fil d'Ariane
Concerne toutes les pages internes standard (page.html.twig), pas
seulement /programme, mais visible en premier ici.
========================================================================== */
.region-breadcrumb .breadcrumb {
max-width: var(--cl-container-max);
margin: 1.5rem auto 0;
padding: 0 1.25rem;
font-size: 0.85rem;
}
.region-breadcrumb .breadcrumb a {
color: var(--cl-gold-dark);
text-decoration: none;
}
.region-breadcrumb .breadcrumb a:hover {
text-decoration: underline;
}
#block-b5subtheme-page-title {
max-width: var(--cl-container-max);
margin: 0 auto;
padding: 1rem 1.25rem 2rem;
}
#block-b5subtheme-page-title h1 {
font-family: var(--cl-font-display);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: var(--cl-ink);
margin: 0;
}
/* ==========================================================================
REFONTE 2026 — pages internes : bloc "Informations clés" + carte
"Aller plus loin" (sidebar)
========================================================================== */
/* --- Bloc "Informations clés" --- */
.info-cles-block {
background: var(--cl-bg-cream);
border: 1px solid var(--cl-card-border);
border-radius: var(--cl-radius);
padding: 1.5rem;
}
.info-cles-block__label {
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.03em;
color: var(--cl-gold-dark);
margin: 0 0 1.25rem;
}
.info-cles-block__label svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.info-cles-block__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.info-cle {
padding: 0.9rem 0;
border-top: 1px solid var(--cl-card-border);
}
.info-cle__entete {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--cl-gold-dark);
margin: 0 0 0.4rem;
}
.info-cle__row {
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
@media screen and (max-width: 480px) {
.info-cle__row {
flex-direction: column;
gap: 0.4rem;
}
}
.info-cle:first-child {
border-top: none;
padding-top: 0;
}
.info-cle:last-child {
padding-bottom: 0;
}
.info-cle__icon {
flex: 0 0 auto;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cl-gold-dark);
margin-top: 0.2rem;
}
.info-cle__icon i {
font-size: 1.05rem;
line-height: 1;
}
.info-cle__text {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.info-cle__titre {
font-family: var(--cl-font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--cl-ink);
}
.info-cle__desc {
font-size: 0.8rem;
color: #6b6459;
line-height: 1.4;
}
/* --- Carte "Aller plus loin" --- */
.apl-card-wrap {
margin-top: 1.5rem;
}
.apl-card {
display: block;
background: #fff;
border: 1px solid var(--cl-card-border);
border-radius: var(--cl-radius);
padding: 1.5rem;
text-decoration: none;
color: var(--cl-ink);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.apl-card:hover {
border-color: var(--cl-gold-dark);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
/* Variante sans lien (field_apl_lien vide, field_apl_texte seul rempli) :
même carte, mais pas cliquable — on retire l'effet de survol pour ne
pas laisser croire qu'il y a un clic possible. */
.apl-card--static {
cursor: default;
}
.apl-card--static:hover {
border-color: var(--cl-card-border);
box-shadow: none;
}
.apl-card__icon {
display: inline-flex;
width: 20px;
height: 20px;
color: var(--cl-gold-dark);
margin-bottom: 0.5rem;
}
.apl-card__icon svg {
width: 100%;
height: 100%;
}
.apl-card__label {
display: block;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.03em;
color: var(--cl-gold-dark);
margin-bottom: 0.5rem;
}
.apl-card__body {
font-size: 0.9rem;
line-height: 1.5;
color: var(--cl-ink);
margin-bottom: 0.75rem;
}
.apl-card__body p:last-child {
margin-bottom: 0;
}
.apl-card__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--cl-font-display);
font-weight: 700;
font-size: 0.9rem;
color: var(--cl-gold-dark);
}
.apl-card__cta svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.apl-card:hover .apl-card__cta svg {
transform: translateX(3px);
}
/* ==========================================================================
REFONTE 2026 — bloc "Informations pratiques"
(field--field-informations-pratiques.html.twig)
v3 : structure Twig nettoyée (plus de colonne icône, plus de SVG
trombone, plus de wrapper .informations-pratiques-right — le contenu
est directement dans .informations-pratiques-container). Cadre épuré,
liseré doré à gauche, même codes visuels que les autres cartes du site
(.apl-card, .info-cles-block).
========================================================================== */
.informations-pratiques-container {
background: var(--cl-bg-cream);
border: 1px solid var(--cl-card-border);
border-left: 4px solid var(--cl-gold-dark);
border-radius: var(--cl-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.informations-pratiques-container div {
background: transparent !important;
}
.informations-pratiques-title {
font-family: var(--cl-font-display);
font-weight: 700;
font-size: 1rem;
color: var(--cl-ink);
margin-bottom: 0.6rem;
}
.informations-pratiques-content {
font-size: 0.9rem;
line-height: 1.5;
color: var(--cl-ink);
}
.informations-pratiques-text p {
margin-bottom: 0.75rem;
}
.informations-pratiques-text p:last-child {
margin-bottom: 0;
}
.informations-pratiques-text a {
color: var(--cl-gold-dark);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.2s ease;
}
.informations-pratiques-text a:hover {
text-decoration-color: var(--cl-gold-dark);
}
/* ==========================================================================
REFONTE 2026 — footer : 2 logos partenaires côte à côte, sous le logo
principal du château
========================================================================== */
.site-footer__partner-logos {
display: flex;
align-items: center;
gap: 1.25rem;
margin-top: 1rem;
}
.site-footer__partner-logos svg {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.site-footer__partner-logos svg #layer1 path {
fill: #000 !important;
}
.site-footer__partner-logos svg path {
fill: #fff !important;
}
/* ==========================================================================
REFONTE 2026 — paragraphe "Les partenaires"
(paragraph--les-partenaires.html.twig)
Répété un grand nombre de fois : chaque carte est nettement séparée
(bordure + espacement) pour ne jamais se mélanger avec la suivante,
quel que soit le nombre d'instances.
========================================================================== */
.partenaire-card {
padding: 1.5rem 0;
border-bottom: 1px solid var(--cl-card-border);
}
.partenaire-card:first-child {
padding-top: 0;
}
.partenaire-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.partenaire-card__titre {
font-family: var(--cl-font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--cl-ink);
margin: 0 0 1rem;
}
.partenaire-card__row {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.partenaire-card__image {
flex: 0 0 auto;
display: block;
width: 160px;
border-radius: var(--cl-radius);
overflow: hidden;
transition: opacity 0.2s ease;
}
.partenaire-card__image:hover {
opacity: 0.85;
}
.partenaire-card__image img {
width: 100%;
height: auto;
display: block;
}
.partenaire-card__text {
flex: 1 1 auto;
min-width: 0;
font-size: 0.9rem;
line-height: 1.6;
color: var(--cl-ink);
}
.partenaire-card__text p {
margin: 0 0 0.75rem;
}
.partenaire-card__text p:last-child {
margin-bottom: 0;
}
.partenaire-card__text a {
color: var(--cl-gold-dark);
text-decoration: underline;
}
/* --- Mobile : image en haut, texte en dessous --- */
@media screen and (max-width: 640px) {
.partenaire-card__row {
flex-direction: column;
gap: 1rem;
}
.partenaire-card__image {
width: 100%;
max-width: 220px;
}
}
/* ==========================================================================
REFONTE 2026 — zone d'alerte (fermeture/problème)
N'existe dans le DOM que si la vue "alertes" a un résultat (vérifié
côté Twig, voir page--front.html.twig) — jamais de bandeau vide.
========================================================================== */
.site-alert {
position: relative;
background: #8C8A63;
color: #fff;
}
/* Lien étiré : le vrai
du titre (généré par la vue) s'étire en CSS
pour couvrir toute la bannière, sans dupliquer le lien ni imbriquer
tout le contenu dans une balise (ce qui serait moins propre
sémantiquement). Un seul lien réel, juste rendu cliquable partout. */
.site-alert a {
color: inherit;
text-decoration: none;
}
.site-alert a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Sécurité : si un des multiples wrapper générés par Views entre
le lien et .site-alert hérite d'un position (relative/absolute) venu
d'ailleurs, le lien étiré ci-dessus se cale sur CE wrapper-là au lieu
de toute la bannière — exactement le même piège que celui déjà
rencontré avec .contextual-region sur la galerie photo. On neutralise
explicitement toute la chaîne pour être sûr que .site-alert reste le
seul ancêtre positionné. */
.site-alert__inner,
.site-alert__message,
.site-alert .views-element-container,
.site-alert .view,
.site-alert .view-content,
.site-alert .views-row,
.site-alert .views-field,
.site-alert .field-content {
position: static !important;
}
.site-alert:hover {
filter: brightness(1.08);
}
.site-alert__inner {
max-width: var(--cl-container-max);
margin: 0 auto;
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.site-alert__icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
}
.site-alert__message {
font-size: 0.9rem;
line-height: 1.4;
}
.site-alert__message p {
margin: 0;
}
.site-alert__message a {
color: #000;
text-decoration: none;
font-size:1.3em;
}
@media screen and (max-width: 560px) {
.site-alert__inner {
padding: 0.75rem 1rem;
}
.site-alert__message {
font-size: 0.85rem;
}
}
/* ==========================================================================
REFONTE 2026 — puces en flèche pour les listes du contenu éditorial
Scopé à .node__content pour ne toucher ni aux menus (header/footer/
dropdowns), ni à nos listes custom (why-visit, informations clés),
qui vivent en dehors de cette zone et gardent leur propre style.
========================================================================== */
.node__content ul {
list-style: none;
margin: 0 0 1rem;
padding-left: 0;
}
.node__content ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
line-height: 1.6;
}
.node__content ul li::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: var(--cl-gold-dark);
font-weight: 700;
}
/* Listes imbriquées : une 2e flèche, légèrement plus discrète */
.node__content ul ul {
margin-top: 0.5rem;
}
.node__content ul ul li::before {
color: var(--cl-ink);
opacity: 0.6;
}
.block-views-blocksidebar-informations-cles-block-1
{
margin-top:5%;
}
/* ==========================================================================
REFONTE 2026 — galerie photo (field_galeriephoto)
Nécessite field--field-galeriephoto.html.twig (chaque photo imprimée
2 fois : vignette carrée cliquable + modale Bootstrap pour le zoom).
Paragraphe répété : field_mediaimage (Média Image) + field_description
(texte court, légende, affichée SOUS la photo).
========================================================================== */
.field--name-field-galeriephoto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem 1.25rem;
margin: 2rem 0;
/* Sans ça, chaque case s'étire par défaut à la hauteur de la plus
grande de sa ligne — une vignette sans légende se retrouvait avec
un vide en dessous, donnant l'impression d'un décalage. Avec
align-items:start, chaque case garde sa propre hauteur (juste
l'image, ou image + légende), toutes alignées en haut. */
align-items: start;
}
/* --- Vignette (déclencheur) --- */
.galeriephoto-trigger {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
}
.galeriephoto-trigger .paragraph--type--galeriephoto {
display: flex;
flex-direction: column;
}
.galeriephoto-trigger .field--name-field-mediaimage {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--cl-radius);
overflow: hidden;
background: var(--cl-bg-cream);
}
/* Même technique que le hero/les cartes agenda : l'image se cale en
position:absolute directement, ce qui ignore tous les
wrapper
intermédiaires générés par le champ Média. */
.galeriephoto-trigger .field--name-field-mediaimage img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.galeriephoto-trigger:hover .field--name-field-mediaimage img {
transform: scale(1.06);
}
.galeriephoto-trigger .field--name-field-description {
margin-top: 0.6rem;
font-size: 0.85rem;
color: #6b6459;
line-height: 1.4;
}
/* Masque les liens/boutons "Modifier · Supprimer" que Drupal affiche en
survol pour les admins connectés (contextual links). */
.galeriephoto-trigger .contextual {
display: none;
}
/* Drupal core applique position:relative à .contextual-region — sans le
neutraliser, l'image (position:absolute) se cale sur ce conteneur-là
au lieu de .field--name-field-mediaimage, et s'effondre à 0px. */
.galeriephoto-trigger .contextual-region {
position: static !important;
}
/* --- Modale (zoom plein écran) --- */
.galeriephoto-modal .modal-dialog {
max-width: 900px;
}
.galeriephoto-modal .modal-content {
background: transparent;
border: none;
}
.galeriephoto-modal .modal-body {
padding: 0;
position: relative;
}
.galeriephoto-modal .field--name-field-mediaimage img {
width: 100%;
height: auto;
border-radius: var(--cl-radius);
display: block;
}
.galeriephoto-modal .field--name-field-description {
margin-top: 1rem;
color: #fff;
text-align: center;
font-size: 0.95rem;
}
.galeriephoto-modal .contextual {
display: none;
}
.galeriephoto-modal__close {
position: absolute;
top: -2.75rem;
right: 0;
filter: invert(1);
opacity: 0.9;
}
.galeriephoto-modal__close:hover {
opacity: 1;
}
@media screen and (max-width: 480px) {
.field--name-field-galeriephoto {
grid-template-columns: repeat(2, 1fr);
gap: 1rem 0.75rem;
}
}
/* Logo partenaire, bas droite de la photo du hero (accueil uniquement) */
.site-header__hero-partner-logo {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 2;
height: 100px;
width: auto;
/* Force le logo en blanc, quelle que soit sa couleur d'origine dans
le fichier SVG — technique fiable pour un
![]()
externe, sans
risque de recopier/corrompre un tracé vectoriel complexe dans
le Twig en l'inlinant. */
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* ==========================================================================
REFONTE 2026 — page "Plan du site"
Chaque menu placé dans region-content devient une section : titre +
grille de liens en flèche. Scopé à .region-content:has(.block-menu.navigation) .block-menu.navigation
pour ne toucher à aucun autre menu du site (header, footer...).
========================================================================== */
.region-content:has(.block-menu.navigation) .block-menu.navigation {
max-width: var(--cl-container-max);
margin: 0 auto;
padding: 0 1.25rem;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation + .block-menu.navigation {
margin-top: 0.5rem;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation h5 {
font-family: var(--cl-font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--cl-ink);
margin: 2rem 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--cl-card-border);
}
.region-content:has(.block-menu.navigation) .block-menu.navigation ul.menu-level-0 {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.5rem 1.5rem;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation .nav-item {
margin: 0;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation .nav-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
color: var(--cl-ink);
text-decoration: none;
font-family: var(--cl-font-body);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation .nav-link::before {
content: "→";
color: var(--cl-gold-dark);
font-weight: 700;
flex-shrink: 0;
}
.region-content:has(.block-menu.navigation) .block-menu.navigation .nav-link:hover {
color: var(--cl-gold-dark);
text-decoration: underline;
}
@media screen and (max-width: 560px) {
.region-content:has(.block-menu.navigation) .block-menu.navigation ul.menu-level-0 {
grid-template-columns: 1fr;
}
.site-header__hero-partner-logo
{
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 2;
height: 50px;
width: auto;
/* Force le logo en blanc, quelle que soit sa couleur d'origine dans
le fichier SVG — technique fiable pour un
![]()
externe, sans
risque de recopier/corrompre un tracé vectoriel complexe dans
le Twig en l'inlinant. */
filter: brightness(0) invert(1);
opacity: 0.9;
}
}
/* Bloc "body" ajouté à la main sur la page Plan du site (liens type
Nos Partenaires / Notre programme, hors des menus système) — même
style de lien en flèche que les sections menu, pour rester cohérent.
Scopé via :has(.block-menu.navigation) — cette combinaison précise
(des blocs menu système posés directement dans region-content) est
propre à cette page, ça évite de dépendre d'une classe de
dont on n'est pas sûr du nom exact généré par Drupal. */
.region-content:has(.block-menu.navigation) .field--name-body {
max-width: var(--cl-container-max);
margin: 2rem auto 0;
padding: 2rem 1.25rem 0;
border-top: 1px solid var(--cl-card-border);
}
.region-content:has(.block-menu.navigation) .field--name-body p {
margin: 0 0 0.6rem;
}
.region-content:has(.block-menu.navigation) .field--name-body a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--cl-ink);
text-decoration: none;
font-family: var(--cl-font-body);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.region-content:has(.block-menu.navigation) .field--name-body a::before {
content: "→";
color: var(--cl-gold-dark);
font-weight: 700;
}
.region-content:has(.block-menu.navigation) .field--name-body a:hover {
color: var(--cl-gold-dark);
text-decoration: underline;
}
.field.field--name-field-mediaimage.field--type-entity-reference.field--label-hidden.field__item
{
text-align:center;
margin-top:2%;
margin-bottom:2%;
}
.field--name-body img
{
max-width:100%;
height:auto;
position:relative;
margin:0 auto;
margin-top:2%;
margin-bottom:2%;
text-align:center;
display:block;
}
@media screen and (max-width: 990px) {
.order-3.col-12.col-lg-3 .block-views-blocksidebar-infos-page-block-1
{
display:none;
}
.order-3.col-12.col-lg-3 .block-views-blocksidebar-informations-cles-block-1
{
display:none;
}
}
@media screen and (min-width: 991px) {
.order-1.order-lg-2.col-12.col-lg-9 .field--name-field-aller-plus-loin
{
display:none;
}
.order-1.order-lg-2.col-12.col-lg-9 .field--name-field_informations_cle
{
display:none;
}
}