/* =============================================================================
   Z FORCE SÉCURITÉ — feuille de style du site vitrine (thème clair, v2.0)
   =============================================================================
   Refonte du 02/10/2026, demande d'Edithe : « plus clair, pas le fond sombre
   partout ». Le site n'est plus un paquet React compilé : HTML et CSS
   statiques, sans framework, sans aucune ressource chargée chez un tiers.

   PRINCIPE : sections claires (blanc / gris bleuté en alternance) ; le bleu
   nuit de la marque est réservé à quatre BANDEAUX — menu, accueil, zone
   d'intervention (au milieu de la page, v2.1) et pied de page — et au
   panneau des coordonnées. Le logo, dessiné sur fond bleu nuit, n'apparaît
   que sur les bandeaux du haut et du bas.

   RYTHME (v2.1, alternance façon snamtransport.fr) : menu + accueil SOMBRES
   → Qui sommes-nous blanc → Services gris → Zone d'intervention SOMBRE →
   Devis blanc → Recrutement gris → Actualités blanc (v2.2) → FAQ gris →
   pied SOMBRE. Le bandeau du
   milieu casse la suite de sections claires sans revenir au « tout sombre ».

   CONTRASTES (WCAG AA, vérifiés) : texte #1A2433 sur blanc 16:1 ; texte
   secondaire #5A6779 sur blanc 5,8:1 et sur gris 5,3:1 ; bleu d'action
   #1D63B8 sur blanc 5,9:1 ; blanc sur bouton 5,9:1 ; textes clairs du pied
   #C9D6E8 sur bleu nuit 11:1 ;
   pastilles (blanc sur bleu nuit éclairci à 8 %) 14:1.
   ========================================================================== */

@import url("fonts.css");

/* 1. JETONS ------------------------------------------------------------------ */
:root {
  --nuit:        #0B1F3A;   /* bleu nuit de la marque (charte des documents) */
  --nuit-2:      #12305A;
  --bleu:        #1D63B8;   /* bleu d'action : liens, boutons */
  --bleu-fonce:  #17519A;
  --bleu-vif:    #308CE8;   /* accent décoratif uniquement (jamais du texte sur blanc) */
  --bleu-pale:   #E8F1FB;
  --fond:        #FFFFFF;
  --fond-alt:    #F3F6FA;
  --texte:       #1A2433;
  --texte-2:     #5A6779;
  --bord:        #DDE4EE;
  --clair:       #C9D6E8;   /* texte sur bleu nuit */
  --danger:      #C62828;
  --succes:      #1B7A3D;

  --ombre:       0 10px 30px rgb(11 31 58 / .08);
  --ombre-forte: 0 18px 45px rgb(11 31 58 / .16);
  --rayon:       14px;
  --rayon-sm:    10px;
  --police:      "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largeur:     1200px;
  --gouttiere:   clamp(1rem, 4vw, 2rem);
  --section-y:   clamp(4rem, 3rem + 4vw, 6.5rem);
  --menu-h:      4.5rem;
}

/* 2. BASE -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--menu-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 1rem/1.65 var(--police);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; color: var(--nuit); }
p { margin: 0 0 1rem; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-fonce); text-decoration: underline; }
strong { font-weight: 600; color: var(--nuit); }

/* 3. MISE EN PAGE ------------------------------------------------------------ */
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--fond-alt); }
.entete { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.titre { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; }
/* Surtitre : supprimé partout le 02/10, conservé uniquement pour la section
   Actualités de l'accueil (décision de Christian). */
.surtitre { display: block; color: var(--bleu); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
.chapeau { color: var(--texte-2); font-size: 1.0625rem; margin: 0; }
.grille-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grille-2 { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px)  { .grille-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grille-2 { grid-template-columns: 1.35fr 1fr; } }

.carte { background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(1.5rem, 3vw, 2.25rem); }
.carte h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }

/* 4. BOUTONS ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.75rem; border-radius: var(--rayon-sm); border: 2px solid transparent;
  font: 600 1rem/1 var(--police); cursor: pointer; text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-principal { background: var(--bleu); color: #fff; box-shadow: 0 8px 22px rgb(29 99 184 / .28); }
.btn-principal:hover { background: var(--bleu-fonce); color: #fff; }
.btn-contour { border-color: rgb(255 255 255 / .55); color: #fff; background: rgb(255 255 255 / .06); }
.btn-contour:hover { border-color: #fff; background: rgb(255 255 255 / .14); color: #fff; }
.btn-petit { padding: .7rem 1.25rem; font-size: .875rem; }
.btn-plein { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn svg { width: 1.1rem; height: 1.1rem; }

/* 5. MENU (bandeau bleu nuit) ------------------------------------------------- */
.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--menu-h);
  display: flex; align-items: center;
  background: rgb(11 31 58 / .94); border-bottom: 1px solid rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.menu .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.menu-logo { display: flex; align-items: center; gap: .75rem; color: #fff; font-weight: 700; letter-spacing: .06em; font-size: .9rem; }
.menu-logo:hover { text-decoration: none; color: #fff; }
.menu-logo img { height: 2.75rem; width: auto; }
.menu-liens { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 1.75rem; }
.menu-liens a:not(.btn) { color: var(--clair); font-size: .9rem; font-weight: 500; }
.menu-liens a:not(.btn):hover { color: #fff; text-decoration: none; }
.menu-bouton { display: inline-flex; background: none; border: 0; color: #fff; padding: .5rem; cursor: pointer; }
.menu-bouton svg { width: 1.6rem; height: 1.6rem; }
.menu-panneau { display: none; }
.menu-panneau.ouvert {
  display: block; position: fixed; inset: var(--menu-h) 0 auto 0; z-index: 49;
  background: var(--nuit); padding: .5rem var(--gouttiere) 1.5rem; box-shadow: var(--ombre-forte);
}
.menu-panneau ul { list-style: none; margin: 0; padding: 0; }
.menu-panneau a:not(.btn) { display: block; padding: .9rem 0; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .1); }
.menu-panneau .btn { margin-top: 1rem; }
@media (min-width: 1024px) {
  .menu-liens { display: flex; }
  .menu-bouton, .menu-panneau, .menu-panneau.ouvert { display: none; }
}

/* 6. ACCUEIL (bandeau bleu nuit sur photo) ------------------------------------ */
.accueil {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center;
  min-height: min(92svh, 860px); display: flex; align-items: center; justify-content: center;
  padding: calc(var(--menu-h) + 3rem) var(--gouttiere) 4.5rem;
}
.accueil-fond { position: absolute; inset: 0; z-index: -2; }
.accueil-fond img { width: 100%; height: 100%; object-fit: cover; }
.accueil::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgb(11 31 58 / .72) 0%, rgb(11 31 58 / .55) 60%), linear-gradient(180deg, rgb(11 31 58 / .45) 0%, rgb(11 31 58 / .9) 100%); }
.accueil-logo { width: clamp(9rem, 16vw, 13rem); margin: 0 auto 1.75rem; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }
.accueil h1 { color: #fff; font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem); font-weight: 600; font-style: italic; letter-spacing: .01em; margin-bottom: 1.25rem; }
.accueil h1 span { color: #8CC2F5; }
.accueil-chapeau { color: var(--clair); font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); font-weight: 400; max-width: 40rem; margin: 0 auto 2.25rem; }
.accueil-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; }
@media (min-width: 640px) { .accueil-actions { flex-direction: row; } }
.accueil-defiler { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; color: var(--clair); }
.accueil-defiler svg { width: 2rem; height: 2rem; }

/* 7. QUI SOMMES-NOUS ----------------------------------------------------------- */
.presentation { max-width: 52rem; margin: 0 auto 3rem; font-size: 1.0625rem; color: var(--texte-2); }
.presentation strong { color: var(--nuit); }
.atout { text-align: center; transition: transform .3s, box-shadow .3s, border-color .3s; }
.atout:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: rgb(29 99 184 / .35); }
.picto { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bleu-pale); color: var(--bleu); }
.picto svg { width: 1.75rem; height: 1.75rem; }
.atout p { color: var(--texte-2); font-size: .9375rem; margin: 0; }

/* 8. SERVICES : photo en haut, texte en dessous (lisible sur fond clair) ------ */
.services { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(6, 1fr); }
  .service { grid-column: span 2; }
  /* 5 cartes : la 2e rangée (2 cartes) est centrée */
  .service:nth-child(4) { grid-column: 2 / span 2; } }
.service { background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; }
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.service-visuel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit); }
.service-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.service:hover .service-visuel img { transform: scale(1.05); }
.service-texte { padding: 1.5rem; }
.service-texte h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .6rem; }
.service-texte p { color: var(--texte-2); font-size: .9375rem; margin: 0; }

/* 8 bis. ZONE D'INTERVENTION (bandeau bleu nuit pleine largeur) ---------------
   Même rôle que le bandeau « .zone » de SNAM : une respiration sombre au
   milieu d'une page claire. Le halo décoratif est un pseudo-élément CSS
   (aucune image, aucun style en ligne : la CSP interdit 'unsafe-inline'). */
.bandeau-zone {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 100%);
  color: var(--clair); padding: var(--section-y) 0; text-align: center;
}
.bandeau-zone::before, .bandeau-zone::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
/* Deux halos : grand cercle en haut à droite, petit en bas à gauche. */
.bandeau-zone::before { width: 34rem; height: 34rem; top: -16rem; right: -10rem;
  background: radial-gradient(circle, rgb(48 140 232 / .22) 0%, rgb(48 140 232 / 0) 70%); }
.bandeau-zone::after  { width: 22rem; height: 22rem; bottom: -12rem; left: -8rem;
  border: 1px solid rgb(255 255 255 / .08); }
.bandeau-zone .titre { color: #fff; }
.bandeau-zone .chapeau { color: var(--clair); }
.bandeau-zone .entete { margin-bottom: 2.25rem; }
.pastilles { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.pastilles li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.15rem; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  color: #fff; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18);
}
/* Le siège est mis en avant (bleu d'action plein, picto de localisation). */
.pastilles .pastille-siege { background: var(--bleu); border-color: var(--bleu); }
.pastilles svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.zone-note { margin: 1.25rem 0 2rem; font-size: .9375rem; color: #9FB3CC; }
.zone-action .btn-principal { box-shadow: 0 8px 22px rgb(0 0 0 / .25); }

/* 9. FORMULAIRES --------------------------------------------------------------- */
.champs-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.champ { margin-bottom: 1.15rem; }
.champ label { display: block; font-size: .875rem; font-weight: 600; color: var(--nuit); margin-bottom: .4rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .8rem 1rem; border-radius: var(--rayon-sm);
  background: var(--fond-alt); border: 1px solid var(--bord); color: var(--texte);
  font: 400 1rem/1.4 var(--police); transition: border-color .2s, box-shadow .2s, background .2s;
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: #8A95A5; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; background: #fff; border-color: var(--bleu); box-shadow: 0 0 0 3px rgb(29 99 184 / .18); }
.pot-de-miel { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.note-form { font-size: .8125rem; color: var(--texte-2); margin: 1rem 0 0; }
.message-form { border-radius: var(--rayon-sm); padding: .85rem 1rem; margin: 1rem 0 0; font-size: .9375rem; font-weight: 500; }
.message-form.ok { background: #E7F5EC; color: var(--succes); border: 1px solid #A9D9B9; }
.message-form.ko { background: #FDECEC; color: var(--danger); border: 1px solid #F2B8B8; }
.lien-candidature { text-align: center; color: var(--texte-2); margin: -1.75rem 0 2.5rem; font-size: .9375rem; }

/* 10. COORDONNÉES (panneau bleu nuit) ----------------------------------------- */
.coordonnees { background: var(--nuit); color: var(--clair); border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--ombre-forte); }
.coordonnees h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1.5rem; }
.coordonnees ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.coordonnees li { display: flex; gap: 1rem; align-items: flex-start; }
.coordonnees .picto { margin: 0; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; background: rgb(255 255 255 / .08); color: #8CC2F5; }
.coordonnees .picto svg { width: 1.25rem; height: 1.25rem; }
.coordonnees small { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #9FB3CC; }
.coordonnees a, .coordonnees strong { color: #fff; font-weight: 600; word-break: break-word; }

/* 11. RECRUTEMENT --------------------------------------------------------------- */
.pile { display: grid; gap: 1.5rem; }
.carte-cnaps .entete-carte { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.carte-cnaps .picto { margin: 0; flex: 0 0 auto; }
.carte-cnaps small { display: block; color: var(--texte-2); font-size: .875rem; }
.carte p { color: var(--texte-2); }
.liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.liste-coches li { display: flex; gap: .75rem; align-items: flex-start; color: var(--texte); }
.liste-coches svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--bleu); margin-top: .15rem; }
.btn-secondaire { background: var(--bleu-pale); color: var(--bleu); }
.btn-secondaire:hover { background: #D6E6F8; color: var(--bleu-fonce); }

/* 12. FAQ (details/summary natifs) --------------------------------------------- */
.faq { max-width: 50rem; margin: 0 auto; display: grid; gap: .85rem; }
.faq details { background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.35rem; font-weight: 600; color: var(--nuit);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--bleu); transition: transform .2s; }
.faq details[open] { box-shadow: var(--ombre); border-color: rgb(29 99 184 / .3); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.35rem 1.25rem; margin: 0; color: var(--texte-2); }

/* 13. PIED DE PAGE (bandeau bleu nuit) ------------------------------------------- */
.pied { background: var(--nuit); color: var(--clair); padding: 3.5rem 0 0; font-size: .9375rem; }
.pied a { color: #fff; }
.pied-grille { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1fr 1.6fr; } }
.pied-marque img { width: 7rem; margin-bottom: 1rem; }
.pied nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pied h2 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.pied dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.pied dt { color: #9FB3CC; }
.pied dd { margin: 0; color: #fff; }
.pied-mention { font-size: .8125rem; color: #9FB3CC; }
.pied-legal { border-top: 1px solid rgb(255 255 255 / .1); padding: 1.25rem 0 1.5rem; text-align: center; font-size: .8125rem; color: #9FB3CC; }
.pied-legal strong { color: #fff; }

/* 14. PAGE INTÉRIEURE (mentions légales) ------------------------------------------ */
.page-texte { padding: calc(var(--menu-h) + 2.5rem) 0 4rem; }
.page-texte .conteneur { max-width: 52rem; }
.page-texte h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); margin-bottom: .35rem; }
.page-texte h2 { font-size: 1.125rem; color: var(--bleu); margin: 2.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bord); }
.page-texte .maj { color: var(--texte-2); font-size: .875rem; margin-bottom: 2rem; }
.page-texte ul { padding-left: 1.25rem; }
.page-texte li { margin: .35rem 0; }
.citation { border-left: 3px solid var(--bleu); background: var(--fond-alt); padding: .75rem 1rem; font-style: italic; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; }

/* 14 bis. ACTUALITÉS ET ARTICLES (v2.2, 02/10/2026) -------------------------------
   Pages intérieures /actualites/ et /actualites/<slug>/ : même thème clair,
   colonne de lecture étroite (~70 caractères), aucun style en ligne (CSP). */

/* Pages intérieures : même menu complet que l'accueil (v2.3). La rubrique en
   cours (aria-current) est signalée en blanc souligné, bureau et mobile. */
.menu-liens a[aria-current]:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 2px; }
.menu-panneau a[aria-current] { color: #8CC2F5; }

.page-article { padding: calc(var(--menu-h) + 1.75rem) 0 var(--section-y); }
.fil-ariane { max-width: 46rem; margin: 0 auto 1.75rem; font-size: .8125rem; color: var(--texte-2); }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.fil-ariane li + li::before { content: "›"; margin-right: .35rem; color: var(--bord); }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 500; }
.entete-page { margin-bottom: 2.5rem; }

.article { max-width: 46rem; margin: 0 auto; }
.article-entete h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; }
.article-meta { color: var(--texte-2); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.article-meta > * + *::before { content: "·"; margin-right: .5rem; }
.article-visuel { margin: 0 0 2.25rem; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: var(--nuit); }
.article-visuel img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }

.article-corps { font-size: 1.0625rem; line-height: 1.75; }
.article-corps p { margin: 0 0 1.15rem; }
.article-chapeau { font-size: 1.1875rem; line-height: 1.65; color: var(--nuit); font-weight: 500; }
.article-corps h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.625rem); margin: 2.75rem 0 1rem; letter-spacing: -.01em; }

/* Puces : petit losange bleu au lieu du disque par défaut. */
.liste-puces { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.liste-puces li { position: relative; padding-left: 1.5rem; }
.liste-puces li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .5rem; height: .5rem; background: var(--bleu); transform: rotate(45deg); border-radius: 1px; }

/* Exemples « constat → action » : trois cartes à filet bleu. */
.pistes { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.pistes li { background: var(--fond-alt); border-left: 4px solid var(--bleu); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; padding: 1rem 1.25rem; }
.pistes strong { display: block; margin-bottom: .2rem; }
.pistes span { color: var(--texte-2); }
.pistes span::before { content: "→ "; color: var(--bleu); font-weight: 700; }

/* Circulation de l'information : étiquettes (span) reliées par des flèches
   en contenu CSS — verticale sur téléphone, horizontale au-delà de 640 px. */
.flux { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.flux li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.flux span { display: inline-block; font-weight: 600; color: var(--nuit); background: var(--bleu-pale); border: 1px solid rgb(29 99 184 / .25); border-radius: 999px; padding: .45rem 1rem; }
.flux li:last-child span { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.flux li:not(:last-child)::after { content: "↓"; color: var(--bleu); font-weight: 700; padding-left: 1.25rem; }
@media (min-width: 640px) {
  .flux { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 0; }
  .flux li { flex-direction: row; align-items: center; gap: 0; }
  .flux li:not(:last-child)::after { content: "→"; padding: 0 .75rem; }
}

/* Démarche en cinq temps : pastilles numérotées. */
.etapes { list-style: none; counter-reset: etape; margin: .5rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.etapes li { counter-increment: etape; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .5rem; border-radius: 999px; background: var(--nuit); color: #fff; font-weight: 600; font-size: .9375rem; }
.etapes li::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bleu); font-size: .8125rem; }

.article-conclusion { font-size: 1.1875rem; font-style: italic; color: var(--nuit); border-left: 3px solid var(--bleu); padding: .25rem 0 .25rem 1.25rem; margin-top: 1.75rem !important; }
.signature { display: grid; gap: .15rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); font-size: .9375rem; color: var(--texte-2); }
.signature strong { font-size: 1rem; }
.signature-lieu { display: inline-flex; align-items: center; gap: .35rem; }
.signature-lieu svg { width: 1rem; height: 1rem; color: var(--bleu); }

/* Questions fréquentes de l'article : visibles en clair (lisibles par les
   moteurs de réponse), cartes à filet bleu comme les exemples. */
.faq-article { margin-top: 3rem; }
.faq-article h2 { margin-top: 0; }
.faq-article-item { border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: 1.15rem 1.35rem; margin-bottom: .85rem; background: var(--fond); }
.faq-article-item h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.faq-article-item p { margin: 0; color: var(--texte-2); font-size: 1rem; line-height: 1.7; }

/* Appel à l'action en fin d'article : panneau bleu nuit. */
.article-cta { margin: 3rem 0 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--rayon); background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--clair); text-align: center; }
.article-cta h2 { color: #fff; font-size: 1.375rem; margin-bottom: .6rem; }
.article-cta p { margin: 0 auto 1.5rem; max-width: 32rem; }
.article-retour { margin: 0; }

/* Cartes d'articles (accueil et page /actualites/). Toute la carte est
   cliquable : le lien du titre s'étend sur la carte (pseudo-élément). */
.cartes-actu { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 46rem; margin: 0 auto; }
.carte-actu { position: relative; display: flex; flex-direction: column; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: transform .3s, box-shadow .3s; }
.carte-actu:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-actu img { width: 100%; aspect-ratio: 640 / 336; object-fit: cover; background: var(--nuit); }
.carte-actu-texte { padding: 1.5rem; }
.carte-actu time { display: block; font-size: .8125rem; color: var(--texte-2); margin-bottom: .4rem; }
.carte-actu h2, .carte-actu h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: .6rem; }
.carte-actu h2 a, .carte-actu h3 a { color: var(--nuit); }
.carte-actu h2 a::after, .carte-actu h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-actu h2 a:hover, .carte-actu h3 a:hover { text-decoration: none; color: var(--bleu); }
.carte-actu p { color: var(--texte-2); font-size: .9375rem; }
.carte-actu-lire { color: var(--bleu); font-weight: 600; font-size: .9375rem; }
@media (min-width: 768px) {
  .cartes-actu-une .carte-actu { flex-direction: row; }
  .cartes-actu-une .carte-actu img { width: 45%; aspect-ratio: auto; }
}
.lien-toutes { text-align: center; margin: 2rem 0 0; font-weight: 600; }

/* 15. ANIMATIONS ------------------------------------------------------------------ */
@keyframes apparition { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.apparait { animation: apparition .9s ease-out both; }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .45s; } .d3 { animation-delay: .75s; } .d4 { animation-delay: 1.05s; }
.flotte { animation: flotte 6s ease-in-out infinite; }
/* Apparition au défilement : .visible posée par js/site.js. Sans JS, tout reste visible. */
.js .revele { opacity: 0; transform: translateY(22px); transition: opacity .7s ease-out, transform .7s ease-out; }
.js .revele.visible { opacity: 1; transform: none; }

/* 16. ACCESSIBILITÉ ---------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 3px; border-radius: 4px; }
.evitement { position: absolute; left: -10000px; top: 0; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; color: var(--nuit); padding: .6rem 1rem; border-radius: 6px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revele { opacity: 1; transform: none; }
}