/* ============================================================
CNCDP - Variables et composants du site uniquement
Le style des pages vient de Bootstrap + l'editeur GrapesJS
============================================================ */
/* La police est chargée par un dans le de base.html.twig, plus par un @import.
Un @import n'est découvert qu'après le téléchargement ET le parsing de cette feuille : le
navigateur enchaînait deux allers-retours réseau avant de peindre le premier texte.
Le est aussi ce qui permet de servir la police choisie dans /admin/apparence. */
:root {
--rose-clair: #ffdaeb; --rose-vif: #fd82bb; --rose-tres-clair: #ffe3e7;
--violet-clair: #daafff; --violet-vif: #9d38da; --violet-profond: #9335e4;
--orange-clair: #feeed4; --orange-vif: #de6d11; --orange-moyen: #fcbc63;
--blanc: #ffffff; --gris-tres-clair: #f8f9fa; --gris-clair: #e9ecef;
--gris-moyen: #adb5bd; --gris-fonce: #495057; --noir-texte: #212529;
--font-principale: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem;
--spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem;
--spacing-3xl: 4rem; --spacing-4xl: 6rem;
--radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
--radius-xl: 1rem; --radius-2xl: 1.5rem;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
}
/* Police globale du site — force Inter sur toutes les pages, y compris celles sans style GrapesJS */
body {
font-family: var(--font-principale);
color: var(--noir-texte);
}
/* Lien d'évitement (base.html.twig) — RGAA 12.7 / WCAG 2.4.1.
Hors de l'écran tant qu'il n'a pas le focus, puis ramené par-dessus l'en-tête.
⚠️ PAS de `display:none` ni de `visibility:hidden` : les deux retirent l'élément de l'ordre de
tabulation, le lien ne serait alors atteignable par personne — c'est l'erreur classique qui
rend un lien d'évitement purement décoratif. Le décalage hors écran, lui, le laisse focusable.
z-index au-dessus de .site-header (1000), qui est `position: sticky` et le masquerait sinon.
`main:focus { outline: none }` : la cible porte tabindex="-1" pour être focusable par
programme ; sans cette règle, certains navigateurs dessinent un cadre autour de TOUTE la page
au premier saut. Le focus reste bien posé, seule son indication visuelle est retirée — elle
n'apporte rien sur un conteneur qui occupe l'écran entier. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1100;
padding: 0.75rem 1.25rem;
background: var(--violet-vif);
color: var(--blanc);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
left: 0;
color: var(--blanc);
}
main:focus {
outline: none;
}
/* Header & Navigation du site */
.site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--blanc); box-shadow: var(--shadow-sm); }
.site-header > .container { max-width: 1320px; } /* Plus large que le container Bootstrap par défaut (1140px) */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.header-brand { display: flex; align-items: center; justify-self: start; }
.main-nav { justify-self: center; }
.brand-logo { height: 2.5rem; width: auto; }
.main-nav .nav-list { display: flex; flex-wrap: wrap; list-style: none; gap: 0.25rem; margin: 0; padding: 0; }
.main-nav a { color: var(--noir-texte); font-weight: 500; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); transition: background-color 0.2s; text-decoration: none; display: block; white-space: nowrap; font-size: 0.95rem; }
.main-nav a:hover, .main-nav a.active { background-color: var(--violet-clair); color: var(--violet-profond); text-decoration: none; }
/* Sous-menus */
.nav-item { position: relative; }
.nav-item.has-submenu > a::after { content: ' ▾'; font-size: 0.7rem; }
.submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; padding: 0.5rem 0; margin: 0; z-index: 1001; }
.nav-item.has-submenu:hover > .submenu { display: block; }
.submenu li { margin: 0; position: relative; }
.submenu .has-submenu > a::after { content: ' ▸'; margin-left: 0.5rem; float: right; }
/* Sous-menu de niveau 2+ : ouvre à droite */
.submenu .submenu { top: -0.5rem; left: 100%; }
.submenu a { padding: 0.5rem 1rem; border-radius: 0; font-weight: 400; white-space: nowrap; }
.submenu a:hover { background-color: var(--violet-clair); }
/* Bouton d'ouverture du sous-menu, injecté par assets/site-nav.js.
Masqué en desktop : les sous-menus s'y ouvrent au survol, un bouton ferait doublon. */
.submenu-toggle { display: none; }
.menu-toggle { display: none; }
/* 2.75rem = 44px, le minimum recommandé pour une cible tactile (WCAG 2.5.8 / iOS HIG).
Le padding de 0.5rem donnait ~36px : atteignable à la souris, imprécis au doigt. */
.menu-toggle-label { display: none; cursor: pointer; font-size: 1.5rem; color: var(--noir-texte); padding: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; grid-column: 3; justify-self: end; }
@media (max-width: 767px) {
.header-inner { display: flex; position: relative; } /* Annule la grille desktop + contexte de positionnement pour le menu absolute */
.main-nav { justify-self: auto; } /* Réinitialise le justify-self hérité de la grille desktop */
.menu-toggle-label { display: flex; order: 1; margin-left: auto; }
.main-nav {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--blanc);
box-shadow: var(--shadow-lg);
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 1rem;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.menu-toggle:checked ~ .main-nav {
max-height: 80vh;
opacity: 1;
padding: 1rem;
overflow-y: auto;
}
.main-nav .nav-list { flex-direction: column; gap: 0.25rem; }
/* 2.75rem : cible tactile confortable pour les entrées de menu déroulées. */
.main-nav a { padding: 0.6875rem 0.6rem; min-height: 2.75rem; display: flex; align-items: center; }
.submenu { position: static; box-shadow: none; border: none; padding-left: 1rem; display: none; border-radius: 0; }
.submenu .submenu { padding-left: 1rem; }
.nav-item.has-submenu:hover > .submenu { display: none; }
.nav-item.has-submenu.open > .submenu { display: block; }
/* Une entrée à sous-menu devient « lien + bouton » : le lien reste navigable, le bouton
déplie. Le chevron ::after est retiré, c'est le bouton qui le porte désormais. */
.nav-item.has-submenu { display: flex; flex-wrap: wrap; align-items: center; }
.nav-item.has-submenu > a { flex: 1; }
.nav-item.has-submenu > a::after,
.submenu .has-submenu > a::after { content: none; }
.nav-item.has-submenu > .submenu { flex-basis: 100%; }
.submenu-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0;
border: 0;
background: transparent;
color: var(--gris-fonce);
font-size: 1rem;
line-height: 1;
cursor: pointer;
border-radius: var(--radius-md);
transition: transform 0.2s, background-color 0.2s;
}
.submenu-toggle:hover { background-color: var(--violet-clair); }
.nav-item.has-submenu.open > .submenu-toggle { transform: rotate(180deg); }
}
/* Resserre le menu entre 768px et 991px (breakpoint Bootstrap "md") : la grille
1fr/auto/1fr du header laisse peu de marge à 7 entrées dont certaines longues
("Avis consultatifs", "Journées d'études") — évite un retour à la ligne prématuré. */
@media (min-width: 768px) and (max-width: 991.98px) {
.main-nav a { padding: 0.5rem 0.4rem; font-size: 0.85rem; }
.main-nav .nav-list { gap: 0.1rem; }
}
.menu-toggle-label .fa-xmark { display: none; }
.menu-toggle:checked ~ .menu-toggle-label .fa-bars { display: none; }
.menu-toggle:checked ~ .menu-toggle-label .fa-xmark { display: inline; }
/* Footer du site */
.site-footer { background: linear-gradient(135deg, var(--violet-vif) 0%, var(--violet-profond) 100%); color: var(--blanc); padding: var(--spacing-3xl) 1rem var(--spacing-xl); }
.site-footer h4 { color: var(--blanc); margin-bottom: var(--spacing-md); font-size: 1.125rem; }
.site-footer a { color: rgba(255,255,255,0.8); }
.site-footer a:hover { color: var(--blanc); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-xl); }
.footer-col address { font-style: normal; line-height: 1.8; }
/* flex-wrap : sans lui, 2 liens légaux ou plus débordaient horizontalement de l'écran sous
400 px — le défilait latéralement sur toutes les pages du site. */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; padding-bottom: 0.5rem; }
/* min-height : cible tactile. Les liens légaux se touchaient presque une fois empilés. */
.footer-legal a { color: rgba(255,255,255,0.7); text-decoration: underline; font-size: 0.85rem; display: inline-flex; align-items: center; min-height: 2.5rem; }
.footer-legal a:hover { color: var(--blanc); }
.footer-copyright { text-align: center; opacity: 0.6; font-size: 0.8rem; margin: 0; }
/* ============================================================
Garde-fou global contre le débordement horizontal
------------------------------------------------------------
Le HTML des pages est composé dans GrapesJS : une largeur fixe, une image trop grande ou un
tableau large y sont vite introduits sans que rien ne le signale, et le site entier se met
alors à défiler latéralement sur mobile.
On ne pose PAS `overflow-x: hidden` sur body : cela casserait `position: sticky` du header
dans plusieurs navigateurs. On contraint plutôt les éléments réellement responsables.
============================================================ */
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
/* Un tableau déborde au lieu de se comprimer : on le fait défiler dans son propre conteneur
plutôt que de laisser la page entière défiler. */
.page-content table, .avis-contenu table { display: block; width: 100%; overflow-x: auto; }
/* Une URL sans espace (lien de document, adresse e-mail) forçait la largeur de sa colonne. */
.site-footer a, .avis-contenu a { overflow-wrap: anywhere; }
/* ============================================================
CSS orphelin retiré le 20/08/2026
------------------------------------------------------------
Les règles .hero*, .section*, .subtitle, .mt-xl, .text-center et .sr-only ne servaient plus
qu'à templates/pages/accueil.html.twig, supprimé le même jour. Elles étaient donc
téléchargées par chaque visiteur sans jamais s'appliquer.
Vérifié AVANT suppression, sur la production et non sur la base locale (dont le contenu a
divergé) : les 8 pages publiques ont été récupérées en HTTP, aucune ne porte l'une de ces
classes. `.text-center` et `.sr-only` sont en outre fournies à l'identique par Bootstrap 4.6,
qui est chargé sur toutes les pages : les retirer ne change rien même si elles réapparaissent
un jour dans un contenu composé dans l'éditeur.
============================================================ */
/* ============================================================
Page Avis — liste (/avis)
============================================================ */
/* Ligne d'un avis : 3 colonnes flex (méta / contenu / action).
Sur mobile, la colonne méta (largeur fixe 100px) + la colonne action
ne laissaient quasi aucune place à la colonne de contenu (titre, résumé,
tags) : le texte se retrouvait compressé dans ~60-80px de large. */
.avis-row { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; transition: background 0.15s; }
.avis-row:hover { background: #fdfbff; }
.avis-row:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.avis-row-meta { flex-shrink: 0; width: 100px; text-align: right; }
.avis-row-content { flex: 1; min-width: 0; }
.avis-row-action { flex-shrink: 0; display: flex; align-items: center; }
/* Message affiché quand le rafraîchissement AJAX des filtres échoue (assets/avis-filters.js).
Auparavant l'échec était avalé : la liste restait grisée à 50 % d'opacité, sans explication. */
.avis-erreur {
text-align: center; padding: 2rem 1rem; margin: 0;
color: var(--gris-fonce); background: var(--blanc);
border: 1px solid var(--gris-clair); border-radius: var(--radius-lg);
}
/* Sélecteurs de filtres : .form-control-sm de Bootstrap fait ~31 px de haut, sous le seuil
confortable au doigt. On rétablit une hauteur tactile sur les seuls écrans tactiles, pour ne
pas alourdir la barre de filtres sur un grand écran piloté à la souris. */
@media (max-width: 767px) {
#avis-filters .form-control-sm { height: 2.75rem; font-size: 1rem; }
/* 16px minimum : en dessous, iOS Safari zoome automatiquement à la prise de focus,
ce qui décale la mise en page et oblige l'utilisateur à dézoomer à la main. */
#avis-filters input, #avis-filters select { font-size: 1rem; }
}
/* Bouton « Lire » — remplace les attributs onmouseover/onmouseout qui étaient inline dans
_list.html.twig. min-height 2.75rem = 44px : le padding de 0.4rem donnait ~32px de haut,
trop juste au doigt sur la liste des avis, qui est la page la plus consultée du site. */
.avis-lire {
display: inline-flex; align-items: center; gap: 0.35rem;
color: var(--violet-vif); text-decoration: none;
font-size: 0.85rem; font-weight: 500; white-space: nowrap;
padding: 0.4rem 0.9rem; min-height: 2.75rem;
border: 1px solid #e8dff5; border-radius: var(--radius-md);
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.avis-lire i { font-size: 0.7rem; }
.avis-lire:hover, .avis-lire:focus-visible {
background-color: var(--violet-vif); color: var(--blanc);
border-color: var(--violet-vif); text-decoration: none;
}
@media (max-width: 575px) {
.avis-row { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 1.25rem; }
.avis-row-meta { width: auto; text-align: left; display: flex; align-items: center; gap: 0.5rem; order: -1; }
.avis-row-content { flex-basis: 100%; order: 0; }
.avis-row-action { flex-basis: 100%; justify-content: flex-end; order: 1; margin-top: -0.5rem; }
/* Pleine largeur : plus facile à viser qu'un bouton de 90 px collé au bord droit. */
.avis-lire { width: 100%; justify-content: center; }
}