@charset "UTF-8";
/* =============================================================================
PNPE — feuille de style unique de la maquette
-----------------------------------------------------------------------------
Pôle National de Promotion de l'Emploi — République Gabonaise
Principes tenus dans ce fichier :
- Aucune dépendance : ni Bootstrap, ni jQuery, ni framework utilitaire.
Le site actuel charge 10 CSS + 10 JS ; ici tout tient en 1 CSS + 1 JS.
- Les couleurs ne sont pas inventées : #1A5193 et #276AAC sont relevés dans
assets/css/style.css du site existant (109 et 40 occurrences), #0089E5 et
#FFCD00 sont échantillonnés sur le logo (assets/images/favicon_pnpe.png).
- Échelle d'espacement de base 4 px, rayons et ombres systématiques : une
seule grammaire, pas de valeur au cas par cas.
- Mobile d'abord. Les grilles sont en auto-fit/minmax : le nombre de
colonnes découle de la place disponible, donc aucune largeur d'écran ne
casse la mise en page.
- Le jaune du logo ne porte JAMAIS de texte sur fond clair (contraste 1,4:1).
Il sert de filet, de pastille, ou de fond sous texte sombre (11:1).
============================================================================= */
/* -----------------------------------------------------------------------------
1. Jetons de conception
-------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* Marque — bleus */
--bleu-900: #0B2A4E;
--bleu-800: #123E74;
--bleu-700: #1A5193; /* couleur principale du site actuel */
--bleu-600: #276AAC; /* déjà présente dans style.css */
--bleu-500: #0089E5; /* échantillonnée sur le logo */
--bleu-200: #BBD4EC;
--bleu-100: #E3EDF7;
--bleu-50: #F3F8FC;
/* Marque — or du logo (accent, jamais porteur de texte sur fond clair) */
--or-500: #FFCD00;
--or-600: #E0B400;
--or-900: #4A3A00; /* texte sombre posé sur l'or */
/* Vert du drapeau — réservé aux états d'aboutissement */
--vert-600: #0B7A4B;
--vert-50: #ECF7F1;
/* Neutres légèrement bleutés, pour rester dans la famille de la marque */
--gris-900: #0F1B2D;
--gris-700: #33425B;
--gris-600: #4C5A73;
--gris-500: #6B7A93;
--gris-300: #C8D1DE;
--gris-200: #E1E7EF;
--gris-100: #F0F4F8;
--gris-50: #F8FAFC;
--blanc: #FFFFFF;
/* Espacement — base 4 px */
--e-1: 0.25rem;
--e-2: 0.5rem;
--e-3: 0.75rem;
--e-4: 1rem;
--e-5: 1.25rem;
--e-6: 1.5rem;
--e-8: 2rem;
--e-10: 2.5rem;
--e-12: 3rem;
--e-16: 4rem;
--e-20: 5rem;
--e-24: 6rem;
/* Rayons */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-plein: 999px;
/* Ombres, teintées de bleu plutôt que de noir */
--ombre-1: 0 1px 2px rgba(11, 42, 78, 0.06), 0 1px 3px rgba(11, 42, 78, 0.08);
--ombre-2: 0 2px 4px rgba(11, 42, 78, 0.06), 0 6px 14px rgba(11, 42, 78, 0.08);
--ombre-3: 0 8px 18px rgba(11, 42, 78, 0.10), 0 18px 36px rgba(11, 42, 78, 0.10);
/* Rythme */
--largeur-max: 1200px;
--largeur-texte: 68ch;
--gouttiere: var(--e-5);
--transition: 180ms ease-out;
/* Typographie fluide — échelle 1.25, bornée de 320 px à 1200 px */
--t-xs: 0.8125rem;
--t-sm: 0.875rem;
--t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
--t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--t-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
--t-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
--t-3xl: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
--t-4xl: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
--t-5xl: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
}
@media (min-width: 48rem) {
:root { --gouttiere: var(--e-8); }
}
/* -----------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem; /* l'en-tête collant ne doit pas masquer l'ancre */
}
body {
margin: 0;
background: var(--blanc);
color: var(--gris-900);
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: var(--t-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* garde-fou : aucune page ne doit déborder */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bleu-500); }
h1, h2, h3, h4 {
margin: 0 0 var(--e-4);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--gris-900);
text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25rem; }
li + li { margin-top: var(--e-2); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--gris-200); margin: var(--e-10) 0; }
::selection { background: var(--bleu-200); color: var(--bleu-900); }
/* Accessibilité : anneau de focus visible, et seulement au clavier */
:focus-visible {
outline: 3px solid var(--bleu-500);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.lien-evitement {
position: absolute;
left: var(--e-4);
top: -4rem;
z-index: 200;
padding: var(--e-3) var(--e-5);
background: var(--bleu-700);
color: var(--blanc);
border-radius: 0 0 var(--r-md) var(--r-md);
font-weight: 600;
text-decoration: none;
transition: top var(--transition);
}
.lien-evitement:focus { top: 0; color: var(--blanc); }
.visuellement-cache {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* -----------------------------------------------------------------------------
3. Mise en page
-------------------------------------------------------------------------- */
.conteneur {
width: 100%;
max-width: var(--largeur-max);
margin-inline: auto;
padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: 860px; }
.section { padding-block: var(--e-12); }
.section--large { padding-block: var(--e-16); }
.section--gris { background: var(--gris-50); }
.section--bleu { background: var(--bleu-50); }
@media (min-width: 48rem) {
.section { padding-block: var(--e-16); }
.section--large { padding-block: var(--e-20); }
}
/* Grilles en auto-fit : le nombre de colonnes suit la place disponible */
.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.grille--large { gap: var(--e-6); }
/* Deux colonnes texte + image, qui s'empilent d'elles-mêmes */
.duo {
display: grid;
gap: var(--e-8);
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
/* Titre de section */
.titre-section { max-width: 44rem; margin-bottom: var(--e-8); }
.titre-section--centre { margin-inline: auto; text-align: center; }
.titre-section p { color: var(--gris-600); font-size: var(--t-lg); }
/* Surtitre : petite étiquette au-dessus du titre, soulignée d'or */
.surtitre {
display: inline-flex;
align-items: center;
gap: var(--e-2);
margin-bottom: var(--e-3);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bleu-600);
}
.surtitre::before {
content: "";
width: 1.75rem; height: 3px;
background: var(--or-500);
border-radius: var(--r-plein);
}
.texte-long { max-width: var(--largeur-texte); }
.texte-long p { color: var(--gris-700); }
.chapeau {
font-size: var(--t-lg);
color: var(--gris-700);
font-weight: 400;
}
/* -----------------------------------------------------------------------------
4. Boutons
-------------------------------------------------------------------------- */
.bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
min-height: 46px; /* cible tactile confortable */
padding: var(--e-3) var(--e-6);
border: 1px solid transparent;
border-radius: var(--r-md);
background: var(--bleu-700);
color: var(--blanc);
font: inherit;
font-weight: 600;
font-size: var(--t-sm);
text-decoration: none;
cursor: pointer;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--bleu-800); color: var(--blanc); box-shadow: var(--ombre-2); }
.bouton:active { transform: translateY(1px); }
.bouton--secondaire {
background: var(--blanc);
color: var(--bleu-700);
border-color: var(--gris-300);
}
.bouton--secondaire:hover { background: var(--bleu-50); color: var(--bleu-800); border-color: var(--bleu-200); }
.bouton--clair {
background: rgba(255, 255, 255, 0.14);
color: var(--blanc);
border-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
}
.bouton--clair:hover { background: var(--blanc); color: var(--bleu-800); border-color: var(--blanc); }
.bouton--or { background: var(--or-500); color: var(--or-900); }
.bouton--or:hover { background: var(--or-600); color: var(--or-900); }
/* Vert : l'action du demandeur d'emploi. C'est déjà la couleur de la porte
« Espace demandeur » et celle des étapes d'aboutissement. Blanc sur
#0B7A4B = 5,4:1, au-dessus du seuil AA. */
.bouton--vert { background: var(--vert-600); color: var(--blanc); }
.bouton--vert:hover { background: #09653E; color: var(--blanc); }
.bouton--large { width: 100%; }
/* Postuler : l'or demandé le 09/10/2026. #473400 sur #F0BE33 = 9,6:1. */
.bouton--postuler { background: #F0BE33; color: #473400; }
.bouton--postuler:hover { background: #E2AE1E; color: #473400; }
/* Lien fléché : l'affordance se lit sans couleur */
.lien-fleche {
display: inline-flex;
align-items: center;
gap: var(--e-2);
min-height: 44px;
font-weight: 600;
font-size: var(--t-sm);
text-decoration: none;
}
.lien-fleche::after {
content: "→";
transition: transform var(--transition);
}
.lien-fleche:hover::after { transform: translateX(4px); }
/* -----------------------------------------------------------------------------
5. En-tête institutionnel
-------------------------------------------------------------------------- */
.bandeau-etat {
background: var(--bleu-900);
color: rgba(255, 255, 255, 0.92);
font-size: var(--t-xs);
}
.bandeau-etat__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-2) var(--e-5);
min-height: 42px;
padding-block: var(--e-1);
}
.bandeau-etat strong { font-weight: 600; letter-spacing: 0.02em; }
.bandeau-etat a { color: inherit; text-decoration: none; }
.bandeau-etat a:hover { color: var(--or-500); }
.bandeau-etat__liens { display: flex; align-items: center; gap: var(--e-4); }
.bandeau-etat__liens a {
display: inline-flex;
align-items: center;
gap: var(--e-1);
min-height: 40px;
white-space: nowrap; /* un numéro coupé en deux lignes n'est plus un numéro */
}
.entete { position: relative; z-index: 60; }
/* Identité : logo PNPE — intitulé — armoiries. Triptyque conservé. */
.identite {
background: var(--blanc);
border-bottom: 1px solid var(--gris-200);
}
.identite__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--e-3);
padding-block: var(--e-3);
}
/* Logo couleur (assets/images/logo_pnpe.png), retrouvé le 06/10/2026 dans
l'administration où il servait sous le nom AdminLTELogo.png. Il remplace la
plaque bleue qui compensait l'absence d'une version lisible sur fond clair.
La version blanche (pnpe_blanc.png) reste employée sur les fonds sombres :
barre de navigation, tiroir mobile, pied de page. */
.identite__logo { display: inline-flex; align-items: center; }
.identite__logo img { height: 38px; width: auto; }
.identite__armoiries img { height: 42px; width: auto; }
.identite__texte { text-align: center; min-width: 0; }
.identite__texte .sigle {
display: block;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bleu-800);
line-height: 1.2;
}
.identite__texte .intitule {
display: none;
font-size: var(--t-xs);
color: var(--gris-500);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (min-width: 48rem) {
.identite__inner { padding-block: var(--e-4); gap: var(--e-6); }
.identite__logo img { height: 50px; }
.identite__armoiries img { height: 56px; }
.identite__texte .sigle { font-size: var(--t-xl); }
.identite__texte .intitule { display: block; margin-top: 2px; }
}
/* Barre de navigation, collante */
.barre-nav {
position: sticky;
top: 0;
z-index: 70;
background: var(--bleu-700);
box-shadow: var(--ombre-1);
}
.barre-nav__inner {
display: flex;
align-items: center;
/* Le menu colle à gauche ; seul le bloc Connexion est repoussé à droite
(margin-left: auto). Avec space-between, le logo réduit — présent mais de
largeur nulle tant que la barre n'est pas décollée — centrait le menu. */
justify-content: flex-start;
gap: var(--e-4);
min-height: 56px;
}
/* Logo réduit, révélé seulement quand la barre est décollée du haut */
.barre-nav__logo {
display: flex;
align-items: center;
gap: var(--e-2);
opacity: 0;
width: 0;
overflow: hidden;
transition: opacity var(--transition);
}
.barre-nav__logo img { height: 30px; }
.barre-nav.est-collee .barre-nav__logo { opacity: 1; width: auto; }
/* Bascule mobile */
.bascule-menu {
display: inline-flex;
align-items: center;
gap: var(--e-2);
min-height: 44px;
padding: var(--e-2) var(--e-3);
margin-left: calc(var(--e-3) * -1);
border: 0;
background: none;
color: var(--blanc);
font: inherit;
font-weight: 600;
font-size: var(--t-sm);
cursor: pointer;
border-radius: var(--r-md);
}
.bascule-menu:hover { background: rgba(255, 255, 255, 0.12); }
.bascule-menu__barres {
position: relative;
width: 20px; height: 2px;
background: currentColor;
border-radius: var(--r-plein);
}
.bascule-menu__barres::before,
.bascule-menu__barres::after {
content: "";
position: absolute;
left: 0;
width: 20px; height: 2px;
background: currentColor;
border-radius: var(--r-plein);
transition: transform var(--transition), top var(--transition);
}
.bascule-menu__barres::before { top: -6px; }
.bascule-menu__barres::after { top: 6px; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres { background: transparent; }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres::before { top: 0; transform: rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-menu__barres::after { top: 0; transform: rotate(-45deg); }
/* -----------------------------------------------------------------------------
6. Navigation — tiroir sur mobile, barre horizontale à partir de 64rem
-------------------------------------------------------------------------- */
.nav-principale { font-size: var(--t-sm); }
.nav-principale__liste {
list-style: none;
margin: 0;
padding: 0;
}
.nav-principale__liste li { margin: 0; }
/* Entrée masquée provisoirement depuis $MENU (_build.php) ; la page existe toujours. */
.nav-principale__liste li.nav-principale__masque { display: none; }
/* Blocs renvoyant vers les offres, masqués tant qu'elles ne sont pas ouvertes
au public (accueil, encart des actualités). */
.masque-provisoire { display: none !important; }
.nav-principale__lien {
display: flex;
align-items: center;
gap: var(--e-2);
min-height: 48px;
padding: var(--e-2) var(--e-4);
color: var(--blanc);
font-weight: 600;
text-decoration: none;
border-radius: var(--r-sm);
}
/* Au survol, le texte reste blanc : la règle générale a:hover (bleu) et la
couleur or de l'entrée courante ne doivent pas s'appliquer. */
.nav-principale__lien:hover,
.nav-principale__liste > li:hover > .nav-principale__lien,
.nav-principale__lien[aria-current="page"]:hover { color: var(--blanc); }
/* --- Mobile : tiroir latéral --- */
@media (max-width: 63.999rem) {
.nav-principale {
position: fixed;
inset: 0 0 0 auto;
width: min(21rem, 88vw);
z-index: 110;
background: var(--bleu-800);
padding: var(--e-5) var(--e-4) var(--e-10);
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition: transform 220ms ease-out, visibility 220ms;
box-shadow: var(--ombre-3);
}
.nav-principale[data-ouvert="true"] { transform: translateX(0); visibility: visible; }
.nav-principale__entete {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
padding-bottom: var(--e-4);
margin-bottom: var(--e-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.nav-principale__entete img { height: 34px; }
.nav-fermer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--r-md);
background: none;
color: var(--blanc);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.nav-fermer:hover { background: rgba(255, 255, 255, 0.12); }
.nav-principale__liste > li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.nav-principale__lien { font-size: var(--t-base); }
.nav-principale__lien[aria-current="page"] { color: var(--or-500); }
/* Sous-menu dépliable : le bouton porte l'état, pas le lien */
.sous-menu {
list-style: none;
margin: 0 0 var(--e-2);
padding: 0 0 0 var(--e-4);
display: none;
}
.a-sous-menu[data-deplie="true"] .sous-menu { display: block; }
.sous-menu a {
display: flex;
align-items: center;
min-height: 44px;
padding: var(--e-1) var(--e-3);
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
border-left: 2px solid rgba(255, 255, 255, 0.22);
}
.sous-menu a:hover { color: var(--blanc); border-left-color: var(--or-500); }
.sous-menu a[aria-current="page"] { color: var(--or-500); border-left-color: var(--or-500); }
.a-sous-menu > .nav-principale__lien { justify-content: space-between; }
.bascule-sous-menu {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-left: auto;
border: 0;
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.12);
color: var(--blanc);
font-size: 0.75rem;
cursor: pointer;
transition: transform var(--transition);
}
.a-sous-menu[data-deplie="true"] .bascule-sous-menu { transform: rotate(180deg); }
.nav-principale__pied {
margin-top: var(--e-6);
padding-top: var(--e-5);
border-top: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.82);
font-size: var(--t-sm);
}
.nav-principale__pied a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--blanc);
}
.voile {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(11, 42, 78, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 220ms, visibility 220ms;
}
.voile[data-ouvert="true"] { opacity: 1; visibility: visible; }
}
/* --- Bureau --- */
@media (min-width: 64rem) {
.bascule-menu, .nav-principale__entete, .nav-principale__pied, .voile, .bascule-sous-menu { display: none; }
.nav-principale__liste { display: flex; align-items: stretch; }
.nav-principale__liste > li { position: relative; }
.nav-principale__lien {
min-height: 56px;
padding-inline: var(--e-4);
border-radius: 0;
position: relative;
}
.nav-principale__lien::after {
content: "";
position: absolute;
inset: auto var(--e-3) 0 var(--e-3);
height: 3px;
background: var(--or-500);
border-radius: var(--r-plein) var(--r-plein) 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--transition);
}
.nav-principale__liste > li:hover > .nav-principale__lien,
.nav-principale__lien:focus-visible { background: rgba(255, 255, 255, 0.10); }
.nav-principale__liste > li:hover > .nav-principale__lien::after,
.nav-principale__lien[aria-current="page"]::after,
.nav-principale__lien[data-rubrique-active]::after { transform: scaleX(1); }
/* Le sous-menu s'ouvre au survol ET au focus clavier */
.sous-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 17rem;
list-style: none;
margin: 0;
padding: var(--e-2);
background: var(--blanc);
border-radius: 0 0 var(--r-md) var(--r-md);
border-top: 3px solid var(--or-500);
box-shadow: var(--ombre-3);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-principale__liste > li:hover > .sous-menu,
.nav-principale__liste > li:focus-within > .sous-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.sous-menu li + li { margin-top: 2px; }
.sous-menu a {
display: flex;
align-items: center;
min-height: 42px;
padding: var(--e-2) var(--e-3);
border-radius: var(--r-sm);
color: var(--gris-700);
font-weight: 500;
text-decoration: none;
}
.sous-menu a:hover { background: var(--bleu-50); color: var(--bleu-800); }
.sous-menu a[aria-current="page"] {
background: var(--bleu-50);
color: var(--bleu-800);
font-weight: 700;
box-shadow: inset 3px 0 0 var(--bleu-700);
}
}
/* Bloc Connexion de la barre de navigation, toujours à droite */
.acces-compte { position: relative; flex-shrink: 0; margin-left: auto; }
.acces-compte__bouton {
display: inline-flex;
align-items: center;
gap: var(--e-2);
min-height: 40px;
padding: var(--e-2) var(--e-4);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: var(--r-md);
background: rgba(255, 255, 255, 0.12);
color: var(--blanc);
font: inherit;
font-weight: 600;
font-size: var(--t-sm);
cursor: pointer;
}
.acces-compte__bouton:hover { background: var(--blanc); color: var(--bleu-800); border-color: var(--blanc); }
.acces-compte__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 14rem;
list-style: none;
margin: 0;
padding: var(--e-2);
background: var(--blanc);
border-radius: var(--r-md);
border-top: 3px solid var(--or-500);
box-shadow: var(--ombre-3);
z-index: 10;
}
.acces-compte__menu[hidden] { display: none; }
.acces-compte__menu a {
display: flex;
align-items: center;
gap: var(--e-2);
min-height: 44px;
padding: var(--e-2) var(--e-3);
border-radius: var(--r-sm);
color: var(--gris-700);
font-weight: 600;
font-size: var(--t-sm);
text-decoration: none;
}
.acces-compte__menu a:hover { background: var(--bleu-50); color: var(--bleu-800); }
.acces-compte__menu .indice { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--gris-500); }
/* -----------------------------------------------------------------------------
7. Hero d'accueil
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: grid;
align-items: end;
min-height: min(78vh, 34rem);
padding-block: var(--e-16) var(--e-12);
background: var(--bleu-900);
color: var(--blanc);
isolation: isolate;
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
/* Dégradé : contraste du texte garanti quelle que soit la photo */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to top, rgba(11, 42, 78, 0.96) 0%, rgba(11, 42, 78, 0.78) 42%, rgba(11, 42, 78, 0.35) 100%);
}
/* Deux colonnes à partir du bureau : le message à gauche, le moteur de
recherche à droite. En dessous, la carte de recherche suit le texte. */
.hero__contenu {
display: grid;
gap: var(--e-8);
/* Le message se centre sur la hauteur de la carte de recherche, qui
dicte celle du hero. */
align-items: center;
}
.hero__texte { max-width: 44rem; }
@media (min-width: 64rem) {
.hero__contenu { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); gap: var(--e-12); }
}
.hero h1 {
font-size: var(--t-5xl);
color: var(--blanc);
letter-spacing: -0.025em;
}
.hero__accroche {
font-size: var(--t-lg);
color: rgba(255, 255, 255, 0.9);
max-width: 38rem;
}
.hero__surtitre {
display: inline-flex;
align-items: center;
gap: var(--e-2);
margin-bottom: var(--e-4);
padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
border-radius: var(--r-plein);
background: rgba(255, 255, 255, 0.14);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blanc);
backdrop-filter: blur(6px);
}
.hero__surtitre .pastille {
display: inline-flex;
padding: 2px var(--e-2);
border-radius: var(--r-plein);
background: var(--or-500);
color: var(--or-900);
font-weight: 700;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
/* Les portes remontent de 5rem sur le hero à partir de 48rem : le bas du hero
réserve ces 5rem plus un vrai espace sous la carte de recherche. En haut,
la carte doit rester proche du menu. */
@media (min-width: 48rem) {
.hero { padding-block: var(--e-10) calc(5rem + var(--e-10)); }
}
/* -----------------------------------------------------------------------------
8. Portes d'accès — les trois entrées du site
-------------------------------------------------------------------------- */
.portes {
display: grid;
gap: var(--e-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* Remontée sur le hero à partir de la tablette */
.portes--chevauchement { position: relative; z-index: 2; margin-top: var(--e-6); }
@media (min-width: 48rem) {
/* Trois portes sur une ligne : en auto-fit, la tablette en mettait deux et
laissait la troisième seule sur sa ligne. */
.portes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portes--chevauchement { margin-top: -5rem; }
}
/* Les trois entrées ne se distinguaient que par leur photo : même cadre, même
couleur, même lien. Chacune porte désormais sa propre couleur d'identité,
déclarée une fois dans --accent et relue par le filet, la pastille, le
surtitre et l'appel à l'action. Changer une porte de couleur ne demande
qu'une ligne.
La couleur n'est jamais le SEUL signal : un pictogramme et un intitulé de
public la doublent, donc la distinction tient aussi en noir et blanc, à
l'impression, et pour un daltonien. */
.porte {
--accent: var(--bleu-700); /* filets, pastille, pastille de flèche */
--accent-texte: var(--bleu-800); /* la même couleur, lisible sur blanc */
--accent-contraste: var(--blanc); /* ce qui se pose SUR l'accent */
display: grid;
grid-template-rows: auto 1fr;
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: var(--ombre-1);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.porte:hover {
transform: translateY(-4px);
box-shadow: var(--ombre-3);
border-color: var(--accent);
color: inherit;
}
/* L'or ne porte pas de texte sur blanc (1,4:1) : sur la porte institutionnelle,
le texte passe en brun-or #4A3A00 (8,5:1) et l'or reste sur les aplats. */
.porte--employeur { --accent: var(--bleu-700); --accent-texte: var(--bleu-800); --accent-contraste: var(--blanc); }
.porte--institution { --accent: var(--or-500); --accent-texte: var(--or-900); --accent-contraste: var(--or-900); }
.porte--demandeur { --accent: var(--vert-600); --accent-texte: var(--vert-600); --accent-contraste: var(--blanc); }
.porte__media { position: relative; aspect-ratio: 16 / 10; background: var(--gris-100); }
.porte__media img { width: 100%; height: 100%; object-fit: cover; }
/* Voile en bas de la photo : la pastille s'y détache quelle que soit l'image. */
.porte__media::before {
content: "";
position: absolute;
inset: 45% 0 0 0;
background: linear-gradient(to top, rgba(11, 42, 78, 0.5), transparent);
pointer-events: none;
}
/* Filet d'identité, à la jonction de la photo et du contenu. */
.porte__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: var(--accent);
}
/* Pastille à cheval sur la photo et le contenu : c'est elle qui donne à chaque
porte sa silhouette propre dès le premier coup d'œil. */
.porte__badge {
position: absolute;
left: var(--e-5);
bottom: -1.375rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.875rem; height: 2.875rem;
border-radius: var(--r-md);
background: var(--accent);
color: var(--accent-contraste);
box-shadow: 0 0 0 4px var(--blanc), var(--ombre-2);
transition: transform var(--transition);
}
.porte:hover .porte__badge { transform: translateY(-2px) scale(1.06); }
.porte__corps {
padding: 2.25rem var(--e-5) var(--e-5); /* le haut dégage la pastille */
display: flex;
flex-direction: column;
gap: var(--e-2);
}
.porte__corps h3 { margin: 0; font-size: var(--t-lg); color: var(--bleu-800); }
.porte__corps p { color: var(--gris-600); font-size: var(--t-sm); }
/* Sélecteur doublé à dessein : `.porte__corps p` ci-dessus est plus spécifique
qu'une simple classe et repeindrait l'intitulé en gris. */
.porte__corps .porte__kicker {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--accent-texte);
}
/* Appel à l'action. Ce n'est pas un lien : toute la carte en est un. La forme
dit « on peut cliquer » sans imbriquer un dans un . */
.porte__cta {
display: flex;
align-items: center;
gap: var(--e-3);
margin-top: auto;
padding-top: var(--e-4);
font-weight: 700;
font-size: var(--t-sm);
line-height: 1.3;
color: var(--accent-texte);
}
.porte__cta::after {
content: "→";
display: grid;
place-items: center;
width: 1.875rem; height: 1.875rem;
margin-left: auto;
flex-shrink: 0;
border-radius: var(--r-plein);
background: var(--accent);
color: var(--accent-contraste);
font-size: 0.9rem;
transition: transform var(--transition);
}
.porte:hover .porte__cta::after { transform: translateX(3px); }
/* -----------------------------------------------------------------------------
9. Bande de chiffres
-------------------------------------------------------------------------- */
.chiffres {
display: grid;
gap: var(--e-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
padding: var(--e-6);
background: var(--bleu-800);
color: var(--blanc);
border-radius: var(--r-lg);
box-shadow: var(--ombre-2);
}
.chiffre { text-align: center; }
.chiffre__valeur {
display: block;
font-size: var(--t-3xl);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
display: block;
margin-top: var(--e-1);
font-size: var(--t-xs);
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0.03em;
}
.chiffre + .chiffre { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: var(--e-5); }
@media (min-width: 40rem) {
.chiffre + .chiffre { border-top: 0; padding-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.16); }
}
/* -----------------------------------------------------------------------------
10. Cartes
-------------------------------------------------------------------------- */
.carte {
display: flex;
flex-direction: column;
gap: var(--e-3);
height: 100%;
padding: var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
box-shadow: var(--ombre-1);
transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.carte h3 { margin: 0; font-size: var(--t-lg); }
.carte p { color: var(--gris-600); font-size: var(--t-sm); margin: 0; }
.carte--lien { text-decoration: none; color: inherit; }
.carte--lien:hover {
color: inherit;
transform: translateY(-3px);
box-shadow: var(--ombre-2);
border-color: var(--bleu-200);
}
.carte__pied { margin-top: auto; padding-top: var(--e-2); }
/* Pastille numérotée, ou icône */
.carte__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem; height: 2.5rem;
border-radius: var(--r-md);
background: var(--bleu-50);
color: var(--bleu-700);
font-weight: 700;
font-size: var(--t-base);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.carte__num--or { background: var(--or-500); color: var(--or-900); }
/* Carte de modalité : un filet de couleur en tête */
.carte--modalite { border-top: 3px solid var(--bleu-600); }
.carte--modalite:nth-child(2) { border-top-color: var(--bleu-500); }
.carte--modalite:nth-child(3) { border-top-color: var(--or-500); }
.carte--modalite:nth-child(4) { border-top-color: var(--vert-600); }
/* Carte de programme, format large avec image */
.carte-programme {
display: grid;
grid-template-rows: auto 1fr;
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: var(--ombre-1);
transition: transform var(--transition), box-shadow var(--transition);
}
.carte-programme:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); color: inherit; }
.carte-programme__media { aspect-ratio: 16 / 9; background: var(--gris-100); }
.carte-programme__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-programme__corps { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); }
.carte-programme__corps h3 { margin: 0; color: var(--bleu-800); }
.carte-programme__etapes {
display: inline-flex;
align-items: center;
gap: var(--e-2);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bleu-600);
}
/* Repère : encadré de mise en avant d'une information de droit */
.repere {
display: flex;
gap: var(--e-4);
padding: var(--e-5);
background: var(--bleu-50);
border-left: 4px solid var(--bleu-700);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.repere__icone {
flex-shrink: 0;
width: 2.25rem; height: 2.25rem;
display: grid; place-items: center;
border-radius: var(--r-plein);
background: var(--bleu-700);
color: var(--blanc);
font-weight: 700;
}
.repere p { color: var(--gris-700); font-size: var(--t-sm); }
.repere strong { color: var(--bleu-800); }
/* -----------------------------------------------------------------------------
11. Liste de missions numérotées
-------------------------------------------------------------------------- */
.missions { list-style: none; margin: 0; padding: 0; counter-reset: mission; display: grid; gap: var(--e-3); }
.missions li {
counter-increment: mission;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--e-4);
align-items: start;
margin: 0;
padding: var(--e-4) var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-md);
color: var(--gris-700);
font-size: var(--t-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
.missions li:hover { border-color: var(--bleu-200); box-shadow: var(--ombre-1); }
.missions li::before {
content: counter(mission, decimal-leading-zero);
display: grid;
place-items: center;
min-width: 2.25rem; height: 2.25rem;
border-radius: var(--r-sm);
background: var(--bleu-700);
color: var(--blanc);
font-weight: 700;
font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
}
/* Liste à puces cochées */
.liste-cochee { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.liste-cochee li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--e-3);
margin: 0;
color: var(--gris-700);
font-size: var(--t-sm);
}
.liste-cochee li::before {
content: "✓";
display: grid; place-items: center;
width: 1.5rem; height: 1.5rem;
border-radius: var(--r-plein);
background: var(--vert-50);
color: var(--vert-600);
font-size: 0.8rem;
font-weight: 700;
}
/* -----------------------------------------------------------------------------
12. Parcours par étapes (remplace les flèches « ⇩ » en texte)
-------------------------------------------------------------------------- */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.etape {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--e-4);
margin: 0;
padding-bottom: var(--e-4);
}
/* Le trait vertical relie les étapes ; il s'arrête à la dernière */
.etape:not(:last-child)::before {
content: "";
position: absolute;
left: 1.1875rem;
top: 2.75rem;
bottom: -0.5rem;
width: 2px;
background: linear-gradient(var(--bleu-200), var(--bleu-100));
border-radius: var(--r-plein);
}
.etape__marqueur {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 2.5rem; height: 2.5rem;
border-radius: var(--r-plein);
background: var(--bleu-700);
color: var(--blanc);
font-weight: 700;
font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 4px var(--blanc), 0 0 0 5px var(--bleu-100);
}
.etape--finale .etape__marqueur { background: var(--vert-600); box-shadow: 0 0 0 4px var(--blanc), 0 0 0 5px var(--vert-50); }
.etape__corps { padding-top: var(--e-1); min-width: 0; }
.etape__rang {
display: block;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bleu-600);
}
.etape__titre {
margin: var(--e-1) 0 var(--e-2);
font-size: var(--t-lg);
letter-spacing: -0.01em;
}
.etape__corps > p { color: var(--gris-700); font-size: var(--t-sm); }
/* Embranchement : deux voies parallèles dans une même étape */
.embranchement {
display: grid;
gap: var(--e-4);
margin-top: var(--e-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.voie {
padding: var(--e-4);
background: var(--gris-50);
border: 1px solid var(--gris-200);
border-radius: var(--r-md);
}
.voie__entete {
display: flex;
align-items: center;
gap: var(--e-2);
margin-bottom: var(--e-3);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gris-600);
}
.voie--directe { background: var(--vert-50); border-color: #CCE8DB; }
.voie--directe .voie__entete { color: var(--vert-600); }
/* Enchaînement vertical à l'intérieur d'une voie */
.enchainement { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.enchainement li {
position: relative;
margin: 0;
padding: var(--e-3) var(--e-4);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-sm);
font-size: var(--t-sm);
font-weight: 600;
color: var(--gris-700);
}
/* Le chevron entre deux maillons est décoratif : aria-hidden côté HTML */
.enchainement li:not(:last-child)::after {
content: "▾";
position: absolute;
left: 50%;
bottom: calc(var(--e-4) * -1);
transform: translate(-50%, 0);
color: var(--bleu-500);
font-size: 0.8rem;
line-height: 1;
}
.enchainement li.est-aboutissement {
background: var(--bleu-700);
border-color: var(--bleu-700);
color: var(--blanc);
}
/* Dispositifs (sigles PAJ, PEL…) */
.dispositifs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); padding: 0; list-style: none; }
.dispositifs li { margin: 0; }
.dispositifs span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: var(--e-1) var(--e-3);
border-radius: var(--r-plein);
background: var(--bleu-100);
color: var(--bleu-800);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.04em;
}
/* -----------------------------------------------------------------------------
13. Documents à télécharger
-------------------------------------------------------------------------- */
.documents { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.document {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--e-4);
padding: var(--e-4);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.document:hover { color: inherit; border-color: var(--bleu-200); background: var(--bleu-50); box-shadow: var(--ombre-1); }
.document__type {
display: grid;
place-items: center;
width: 2.75rem; height: 3.25rem;
border-radius: var(--r-sm);
background: var(--bleu-700);
color: var(--blanc);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
position: relative;
}
/* Coin corné : évoque la feuille sans recourir à une image */
.document__type::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 0.75rem; height: 0.75rem;
background: linear-gradient(225deg, var(--blanc) 50%, transparent 50%);
border-top-right-radius: var(--r-sm);
}
.document__nom { font-weight: 600; font-size: var(--t-sm); color: var(--gris-900); min-width: 0; }
.document__meta { display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-xs); color: var(--gris-500); }
.document__action {
display: grid;
place-items: center;
width: 2.5rem; height: 2.5rem;
border-radius: var(--r-plein);
background: var(--bleu-50);
color: var(--bleu-700);
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.document:hover .document__action { background: var(--bleu-700); color: var(--blanc); }
/* -----------------------------------------------------------------------------
14. Actualités
-------------------------------------------------------------------------- */
.actualites { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.actu {
display: grid;
grid-template-rows: auto 1fr;
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--ombre-1);
transition: transform var(--transition), box-shadow var(--transition);
}
.actu:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); }
.actu__media { position: relative; aspect-ratio: 16 / 10; background: var(--gris-100); overflow: hidden; }
.actu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease-out; }
.actu:hover .actu__media img { transform: scale(1.04); }
/* Date en pastille : repère chronologique lisible d'un coup d'œil */
.actu__date {
position: absolute;
left: var(--e-3); bottom: var(--e-3);
display: grid;
place-items: center;
padding: var(--e-2) var(--e-3);
border-radius: var(--r-md);
background: var(--bleu-700);
color: var(--blanc);
text-align: center;
line-height: 1.05;
box-shadow: var(--ombre-2);
}
.actu__date .jour { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.actu__date .mois { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; }
.actu__corps { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.actu__titre { margin: 0; font-size: var(--t-lg); line-height: 1.3; }
.actu__titre a { color: var(--gris-900); text-decoration: none; }
.actu__titre a:hover { color: var(--bleu-700); }
.actu__extrait { color: var(--gris-600); font-size: var(--t-sm); margin: 0; }
.actu__pied { margin-top: auto; }
/* Actualité en vedette : une colonne sur mobile, deux à partir de 48rem */
.actu--vedette { grid-template-rows: none; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
.actu--vedette { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; }
.actu--vedette .actu__media { aspect-ratio: auto; height: 100%; min-height: 17rem; }
.actu--vedette .actu__corps { padding: var(--e-8); justify-content: center; }
.actu--vedette .actu__titre { font-size: var(--t-2xl); }
}
/* Corps d'article */
.article__entete { margin-bottom: var(--e-8); }
.article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-2) var(--e-4);
margin-bottom: var(--e-4);
font-size: var(--t-sm);
color: var(--gris-500);
}
.article__meta time { font-variant-numeric: tabular-nums; }
.etiquette {
display: inline-flex;
align-items: center;
padding: var(--e-1) var(--e-3);
border-radius: var(--r-plein);
background: var(--bleu-100);
color: var(--bleu-800);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.article__corps { max-width: var(--largeur-texte); }
.article__corps > * + * { margin-top: var(--e-4); }
.article__corps p { color: var(--gris-700); }
.article__corps h2 { font-size: var(--t-2xl); margin-top: var(--e-10); }
.article__corps h3 { margin-top: var(--e-8); }
.article__corps blockquote {
margin: var(--e-8) 0;
padding: var(--e-5) var(--e-6);
border-left: 4px solid var(--or-500);
background: var(--gris-50);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: var(--t-lg);
color: var(--gris-700);
}
.article__corps figure { margin: var(--e-8) 0; }
.article__corps figure img { border-radius: var(--r-md); width: 100%; }
.article__corps figcaption { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--gris-500); }
.article__partage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-10); padding-top: var(--e-6); border-top: 1px solid var(--gris-200); }
.article__partage span { font-size: var(--t-sm); font-weight: 600; color: var(--gris-600); }
/* -----------------------------------------------------------------------------
15. Antennes régionales
-------------------------------------------------------------------------- */
.antennes { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.antenne {
display: flex;
flex-direction: column;
gap: var(--e-3);
padding: var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
box-shadow: var(--ombre-1);
}
.antenne__province {
display: flex;
align-items: baseline;
gap: var(--e-2);
margin: 0;
font-size: var(--t-lg);
color: var(--bleu-800);
}
.antenne__ville {
display: inline-flex;
align-items: center;
padding: var(--e-1) var(--e-2);
border-radius: var(--r-sm);
background: var(--or-500);
color: var(--or-900);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.antenne__coord { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.antenne__coord li {
display: grid;
grid-template-columns: 1.25rem 1fr;
gap: var(--e-3);
margin: 0;
color: var(--gris-700);
}
.antenne__coord .pictogramme { color: var(--bleu-600); text-align: center; line-height: 1.6; }
.antenne__coord a { font-weight: 600; text-decoration: none; }
.antenne__coord a:hover { text-decoration: underline; }
.antenne__pied { margin-top: auto; padding-top: var(--e-2); }
/* -----------------------------------------------------------------------------
16. Formulaires
-------------------------------------------------------------------------- */
.formulaire { display: grid; gap: var(--e-5); }
/* align-items: start — sans quoi un champ muni d'un texte d'aide étire son
voisin et désaligne les deux cadres de saisie. */
.formulaire__ligne {
display: grid;
gap: var(--e-5);
align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.champ { display: grid; gap: var(--e-2); }
.champ > label { font-size: var(--t-sm); font-weight: 600; color: var(--gris-700); }
.champ .obligatoire { color: #B42318; font-weight: 700; }
.champ .aide { font-size: var(--t-xs); color: var(--gris-500); }
.champ input,
.champ select,
.champ textarea {
width: 100%;
min-height: 48px;
padding: var(--e-3) var(--e-4);
border: 1px solid var(--gris-300);
border-radius: var(--r-md);
background: var(--blanc);
color: var(--gris-900);
font: inherit;
font-size: var(--t-base);
transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.champ input[type="file"] { padding: var(--e-2) var(--e-3); cursor: pointer; }
.champ input[type="file"]::file-selector-button {
margin-right: var(--e-3);
padding: var(--e-2) var(--e-3);
border: 1px solid var(--gris-300);
border-radius: var(--r-sm);
background: var(--gris-100);
color: var(--gris-800);
font: inherit;
font-size: var(--t-sm);
cursor: pointer;
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-500); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris-500); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
outline: 0;
border-color: var(--bleu-500);
box-shadow: 0 0 0 3px rgba(0, 137, 229, 0.18);
}
/* Validation à la saisie, sans JS : seuls les champs déjà touchés réagissent */
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #B42318; }
.champ input:user-invalid + .aide::before,
.champ textarea:user-invalid + .aide::before { content: "⚠ "; color: #B42318; }
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.formulaire__pied .mention { font-size: var(--t-xs); color: var(--gris-500); max-width: 32rem; }
/* -----------------------------------------------------------------------------
17. Titre de page et fil d'Ariane
-------------------------------------------------------------------------- */
.titre-page {
position: relative;
padding-block: var(--e-10);
background: var(--bleu-800);
color: var(--blanc);
isolation: isolate;
overflow: hidden;
}
.titre-page__media { position: absolute; inset: 0; z-index: -2; }
.titre-page__media img { width: 100%; height: 100%; object-fit: cover; }
.titre-page::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(100deg, rgba(11, 42, 78, 0.95) 0%, rgba(18, 62, 116, 0.82) 60%, rgba(26, 81, 147, 0.62) 100%);
}
.titre-page h1 { margin: 0; color: var(--blanc); font-size: var(--t-4xl); }
.titre-page .chapeau { color: rgba(255, 255, 255, 0.88); margin-top: var(--e-3); max-width: 46rem; }
@media (min-width: 48rem) { .titre-page { padding-block: var(--e-16); } }
.fil-ariane { margin-bottom: var(--e-5); font-size: var(--t-sm); }
.fil-ariane ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-1) var(--e-2);
list-style: none;
margin: 0;
padding: 0;
}
.fil-ariane li { margin: 0; display: flex; align-items: center; gap: var(--e-2); }
.fil-ariane li + li::before { content: "/"; color: rgba(255, 255, 255, 0.45); }
.fil-ariane a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.fil-ariane a:hover { color: var(--blanc); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--or-500); font-weight: 600; }
/* Sommaire de rubrique : navigation latérale des pages filles */
.sommaire {
padding: var(--e-5);
background: var(--gris-50);
border: 1px solid var(--gris-200);
border-radius: var(--r-lg);
}
.sommaire h2 { font-size: var(--t-base); margin-bottom: var(--e-3); }
.sommaire ul { list-style: none; margin: 0; padding: 0; }
.sommaire li + li { margin-top: var(--e-1); border-top: 1px solid var(--gris-200); }
.sommaire a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
min-height: 46px;
padding: var(--e-2) var(--e-1);
color: var(--gris-700);
font-weight: 600;
font-size: var(--t-sm);
text-decoration: none;
}
.sommaire a:hover { color: var(--bleu-700); }
.sommaire a::after { content: "→"; color: var(--bleu-500); }
.sommaire a[aria-current="page"] { color: var(--bleu-800); }
/* Page en deux colonnes : contenu + colonne d'appui */
/* align-items: start à toutes les largeurs : étirée, la colonne d'appui prend
une hauteur définie et chaque .carte (height: 100 %) la reprend en entier,
d'où des cartes qui se chevauchent sur mobile et tablette. */
.avec-appui { display: grid; gap: var(--e-8); align-items: start; }
.avec-appui__appui .carte { height: auto; }
@media (min-width: 64rem) {
.avec-appui { grid-template-columns: minmax(0, 1fr) 18rem; }
.avec-appui__appui { position: sticky; top: 5.5rem; }
}
/* -----------------------------------------------------------------------------
18. Appel à l'action
-------------------------------------------------------------------------- */
.appel {
display: grid;
gap: var(--e-6);
align-items: center;
padding: var(--e-8);
border-radius: var(--r-xl);
background: linear-gradient(120deg, var(--bleu-800), var(--bleu-700) 55%, var(--bleu-600));
color: var(--blanc);
box-shadow: var(--ombre-2);
position: relative;
overflow: hidden;
}
/* Halo d'or discret, pour que le bloc ne soit pas un simple rectangle bleu */
.appel::after {
content: "";
position: absolute;
top: -40%; right: -10%;
width: 22rem; height: 22rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 205, 0, 0.22), transparent 68%);
pointer-events: none;
}
.appel h2 { color: var(--blanc); margin-bottom: var(--e-2); }
.appel p { color: rgba(255, 255, 255, 0.88); margin: 0; }
.appel__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); position: relative; }
@media (min-width: 56rem) {
.appel { grid-template-columns: 1fr auto; padding: var(--e-10) var(--e-12); }
}
/* -----------------------------------------------------------------------------
19. Partenaires et autres services
-------------------------------------------------------------------------- */
.services-lies { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.service-lie {
display: flex;
flex-direction: column;
gap: var(--e-2);
padding: var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: border-color var(--transition), box-shadow var(--transition);
}
.service-lie:hover { color: inherit; border-color: var(--bleu-200); box-shadow: var(--ombre-1); }
.service-lie__nom { font-weight: 700; color: var(--bleu-800); }
.service-lie p { font-size: var(--t-sm); color: var(--gris-600); margin: 0; }
.service-lie__externe { font-size: var(--t-xs); color: var(--gris-500); margin-top: auto; padding-top: var(--e-2); }
/* -----------------------------------------------------------------------------
20. Pied de page
-------------------------------------------------------------------------- */
.pied {
margin-top: var(--e-16);
background: var(--bleu-900);
color: rgba(255, 255, 255, 0.8);
font-size: var(--t-sm);
}
.pied__haut { padding-block: var(--e-12); }
.pied__grille {
display: grid;
gap: var(--e-8);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pied__identite { display: grid; gap: var(--e-4); }
.pied__identite img { height: 44px; width: auto; }
.pied__identite p { color: rgba(255, 255, 255, 0.72); font-size: var(--t-sm); max-width: 24rem; }
.pied h2 {
margin-bottom: var(--e-4);
color: var(--blanc);
font-size: var(--t-base);
letter-spacing: 0.02em;
}
.pied h2::after {
content: "";
display: block;
width: 2rem; height: 3px;
margin-top: var(--e-2);
background: var(--or-500);
border-radius: var(--r-plein);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 0; }
.pied a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__liens a { display: flex; align-items: center; min-height: 40px; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.reseaux a {
display: grid;
place-items: center;
width: 44px; height: 44px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: var(--r-md);
color: var(--blanc);
transition: background var(--transition), border-color var(--transition);
}
.reseaux a:hover { background: var(--bleu-700); border-color: var(--bleu-500); }
.pied__bas {
padding-block: var(--e-5);
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: var(--t-xs);
}
.pied__bas-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-3) var(--e-5);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.pied__bas ul a { display: inline-flex; align-items: center; min-height: 40px; }
.pied__bas p { margin: 0; color: rgba(255, 255, 255, 0.64); }
/* Retour en haut */
.retour-haut {
position: fixed;
right: var(--e-4);
bottom: var(--e-4);
z-index: 80;
display: grid;
place-items: center;
width: 46px; height: 46px;
border: 0;
border-radius: var(--r-plein);
background: var(--bleu-700);
color: var(--blanc);
font-size: 1.1rem;
cursor: pointer;
box-shadow: var(--ombre-2);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.retour-haut[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.retour-haut:hover { background: var(--bleu-800); }
/* -----------------------------------------------------------------------------
21. Page 404
-------------------------------------------------------------------------- */
.erreur { text-align: center; padding-block: var(--e-20); }
.erreur__code {
font-size: clamp(4.5rem, 14vw, 9rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--bleu-100);
margin-bottom: var(--e-4);
}
.erreur h1 { font-size: var(--t-3xl); }
.erreur p { color: var(--gris-600); max-width: 34rem; margin-inline: auto; }
.erreur__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-8); }
/* -----------------------------------------------------------------------------
22. Recherche et offres d'emploi
-------------------------------------------------------------------------- */
/* --- Le bloc de recherche --------------------------------------------------
Deux champs, un bouton. Le lieu est une LISTE et non une saisie libre :
une saisie libre produit « Libreville », « libreville », « LBV » et
« Estuaire » pour la même chose, et la recherche ne trouve plus rien.
---------------------------------------------------------------------------- */
.recherche {
padding: var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-radius: var(--r-xl);
box-shadow: var(--ombre-2);
}
@media (min-width: 48rem) { .recherche { padding: var(--e-6); } }
.recherche__entete {
display: flex;
align-items: center;
gap: var(--e-3);
margin-bottom: var(--e-5);
}
.recherche__icone {
display: grid;
place-items: center;
width: 2.75rem; height: 2.75rem;
flex-shrink: 0;
border-radius: var(--r-md);
background: var(--bleu-100);
color: var(--bleu-700);
}
.recherche__entete h2 { margin: 0; font-size: var(--t-lg); }
.recherche__entete p { margin: 1px 0 0; font-size: var(--t-sm); color: var(--gris-600); }
.recherche__champs {
display: grid;
gap: var(--e-4);
margin-bottom: var(--e-4);
/* align-items: start — sans quoi le champ « Métier », plus haut d'une ligne
d'aide, étire son voisin et les deux cadres cessent d'être alignés. */
align-items: start;
}
/* Trois listes de même nature : trois colonnes égales dès qu'il y a la place
(page des offres) ; empilées dans la carte étroite du hero. */
@media (min-width: 48rem) {
.recherche__champs--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.recherche__champs--pile { grid-template-columns: minmax(0, 1fr); }
/* Champs plus fins que le reste du site : ce bloc est dense, pas un formulaire
de saisie longue. */
.recherche .champ input,
.recherche .champ select {
min-height: 44px;
padding-block: var(--e-2);
}
.recherche .champ select { padding-right: var(--e-8); }
.recherche .champ > label { font-size: var(--t-xs); }
.recherche .aide { margin-top: -2px; }
/* Le select ne doit pas ressembler à un champ de saisie : chevron explicite. */
.recherche select {
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2333425B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--e-4) center;
padding-right: var(--e-10);
}
.recherche__action .bouton { width: 100%; min-height: 46px; }
/* --- Variante « vedette » : la carte de recherche du hero ------------------
C'est la porte d'entrée principale du site. Posée dans le hero, à droite du
message, sa tête devient un bandeau plein — la zone la plus repérable de
l'accueil après le titre.
La page `offres.html` garde la version sobre : là, le visiteur sait déjà
pourquoi il est venu, le bloc n'a plus à se vendre.
---------------------------------------------------------------------------- */
.recherche--vedette {
padding: 0;
overflow: hidden;
border-color: transparent;
box-shadow: 0 10px 24px rgba(5, 20, 40, 0.28), 0 28px 60px rgba(5, 20, 40, 0.22);
}
.recherche__bandeau {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--e-3) var(--e-4);
padding: var(--e-4) var(--e-5);
background: var(--bleu-700);
color: var(--blanc);
}
/* Le filet qui ferme le bandeau porte les deux accents de la charte, vert puis
or, sur le bleu du bandeau : les trois couleurs se lisent d'un coup d'œil. */
.recherche__bandeau::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 4px;
background: linear-gradient(90deg, var(--vert-600) 0 22%, var(--or-500) 22%);
}
.recherche__bandeau .recherche__icone {
background: rgba(255, 255, 255, 0.16);
color: var(--blanc);
}
/* Le texte prend la place restante à côté de l'icône, même dans la carte
étroite du hero : sans min-width: 0, il passait sous l'icône. */
.recherche__bandeau > div { flex: 1 1 0; min-width: 0; }
.recherche__bandeau h2 { margin: 0; color: var(--blanc); font-size: var(--t-xl); }
.recherche__bandeau p { margin: 1px 0 0; color: rgba(255, 255, 255, 0.84); font-size: var(--t-sm); }
.recherche__corps { padding: var(--e-5); }
@media (min-width: 48rem) { .recherche__corps { padding: var(--e-6); } }
/* Bouton d'or, comme « Je cherche un emploi » dans le hero : dans cette charte,
l'or signale l'action du demandeur d'emploi. */
.recherche--vedette .recherche__action .bouton { min-height: 50px; font-size: var(--t-base); }
.recherche__dessous {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-2) var(--e-4);
margin: var(--e-4) 0 0;
font-size: var(--t-sm);
}
.recherche__dessous .indice { color: var(--gris-500); font-size: var(--t-xs); }
.recherche__dessous .lien-fleche { color: var(--vert-600); }
.recherche__dessous .lien-fleche:hover { color: #09653E; }
/* --- En-tête de résultats --------------------------------------------------- */
.resultats__entete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--e-3) var(--e-5);
margin-bottom: var(--e-5);
}
.resultats__compte { margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--gris-900); }
.resultats__compte span { font-variant-numeric: tabular-nums; }
.resultats__tri { font-size: var(--t-sm); color: var(--gris-500); margin: 0; }
/* Rappel des critères : le visiteur doit voir ce qui filtre sa liste. */
.filtres-actifs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); list-style: none; padding: 0; }
.filtres-actifs li { margin: 0; }
.filtres-actifs[hidden] { display: none; }
.chip {
display: inline-flex;
align-items: center;
gap: var(--e-2);
min-height: 34px;
padding: var(--e-1) var(--e-3);
border-radius: var(--r-plein);
background: var(--bleu-100);
color: var(--bleu-800);
font-size: var(--t-xs);
font-weight: 600;
}
.chip strong { font-weight: 700; }
/* --- Liste d'offres ---------------------------------------------------------
Une ligne = une offre, sans le détail : intitulé, employeur, lieu, contrat,
date. Le reste se lit sur la fiche.
---------------------------------------------------------------------------- */
.offres { display: grid; gap: var(--e-3); }
.offre {
position: relative;
display: grid;
gap: var(--e-3);
padding: var(--e-5);
background: var(--blanc);
border: 1px solid var(--gris-200);
border-left: 4px solid var(--bleu-200);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.offre:hover {
color: inherit;
border-color: var(--bleu-200);
border-left-color: var(--bleu-700);
box-shadow: var(--ombre-2);
transform: translateY(-2px);
}
.offre[hidden] { display: none; }
.offre__haut { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.offre__titre { margin: 0; font-size: var(--t-lg); color: var(--bleu-800); }
.offre__employeur { margin: 2px 0 0; font-size: var(--t-sm); color: var(--gris-600); }
.offre__ref {
font-size: var(--t-xs);
color: var(--gris-500);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Début du descriptif. Deux lignes au plus : la fiche dira le reste. */
.offre__extrait {
margin: 0;
font-size: var(--t-sm);
color: var(--gris-600);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Rappel d'anonymat, en tête de liste */
.note-anonymat {
display: flex;
align-items: start;
gap: var(--e-3);
margin: 0 0 var(--e-5);
padding: var(--e-3) var(--e-4);
background: var(--bleu-50);
border-radius: var(--r-md);
font-size: var(--t-sm);
color: var(--gris-700);
}
.note-anonymat .icone { color: var(--bleu-600); flex-shrink: 0; margin-top: 2px; }
.note-anonymat strong { color: var(--bleu-800); }
.offre__meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0; padding: 0; list-style: none; }
.offre__meta li {
display: inline-flex;
align-items: center;
gap: var(--e-2);
margin: 0;
font-size: var(--t-sm);
color: var(--gris-700);
}
.offre__meta .icone { color: var(--bleu-600); flex-shrink: 0; }
.offre__pied {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-2) var(--e-4);
padding-top: var(--e-3);
border-top: 1px solid var(--gris-100);
}
.offre__date { font-size: var(--t-xs); color: var(--gris-500); }
.offre__restant { font-weight: 600; color: var(--vert-600); }
.offre__suite { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 700; color: var(--bleu-700); }
/* --- État vide --------------------------------------------------------------
Une recherche sans résultat ne doit jamais rendre une page muette : elle dit
ce qui a été cherché et propose la sortie.
---------------------------------------------------------------------------- */
.etat-vide {
padding: var(--e-10) var(--e-6);
text-align: center;
background: var(--gris-50);
border: 1px dashed var(--gris-300);
border-radius: var(--r-lg);
}
.etat-vide[hidden] { display: none; }
.etat-vide__icone {
display: grid;
place-items: center;
width: 3.5rem; height: 3.5rem;
margin: 0 auto var(--e-4);
border-radius: var(--r-plein);
background: var(--blanc);
color: var(--gris-500);
box-shadow: var(--ombre-1);
}
.etat-vide h2 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.etat-vide p { color: var(--gris-600); max-width: 34rem; margin-inline: auto; font-size: var(--t-sm); }
.etat-vide__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-6); }
/* --- Fiche d'une offre ------------------------------------------------------ */
.offre-entete { padding-block: var(--e-8); background: var(--bleu-800); color: var(--blanc); }
.offre-entete h1 { color: var(--blanc); margin-bottom: var(--e-3); font-size: var(--t-3xl); }
.offre-entete__employeur { color: rgba(255, 255, 255, 0.9); font-size: var(--t-lg); margin: 0 0 var(--e-5); }
.offre-entete .offre__meta li { color: rgba(255, 255, 255, 0.92); }
.offre-entete .offre__meta .icone { color: var(--or-500); }
/* Caractéristiques : un tableau de définitions, lisible en une colonne au doigt */
.caracteristiques {
display: grid;
gap: 0;
margin: 0;
border: 1px solid var(--gris-200);
border-radius: var(--r-md);
overflow: hidden;
}
.caracteristiques > div {
display: grid;
grid-template-columns: 1fr;
gap: var(--e-1);
padding: var(--e-4) var(--e-5);
}
.caracteristiques > div + div { border-top: 1px solid var(--gris-200); }
.caracteristiques > div:nth-child(odd) { background: var(--gris-50); }
.caracteristiques dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gris-600); }
.caracteristiques dd { margin: 0; font-weight: 600; color: var(--gris-900); font-size: var(--t-sm); }
@media (min-width: 36rem) {
.caracteristiques > div { grid-template-columns: 12rem 1fr; align-items: baseline; gap: var(--e-4); }
}
/* Encadré de candidature, collant à partir du bureau */
.postuler-encart {
padding: var(--e-6);
background: var(--blanc);
border: 1px solid var(--bleu-200);
border-top: 4px solid var(--bleu-700);
border-radius: var(--r-lg);
box-shadow: var(--ombre-2);
}
.postuler-encart h2 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.postuler-encart p { font-size: var(--t-sm); color: var(--gris-600); }
.postuler-encart .bouton { width: 100%; min-height: 52px; margin-top: var(--e-4); }
.postuler-encart__note {
margin-top: var(--e-4);
padding-top: var(--e-4);
border-top: 1px solid var(--gris-200);
font-size: var(--t-xs);
color: var(--gris-500);
}
/* --- Fenêtre « Postuler » ---------------------------------------------------