/* Carb€uro -- styles propres au site, au-dessus de Paper Kit 2 Pro
   (Creative Tim, licence personnelle). Palette reprise TELLE QUELLE de
   l'app (lib/themes/darkmode.dart) plutôt qu'inventée : _secondary
   0xfffc8a03 (orange de marque -- FAB, icônes, accents) et _primary
   0xff1f2a35 (fond sombre -- correspond aussi aux captures d'écran
   promotionnelles, toutes sur fond bleu-nuit/noir). Un précédent essai
   vert/bleu n'avait aucun lien avec l'identité réelle de l'app -- corrigé
   suite au retour direct de l'utilisateur. */

:root {
  --ce-orange: #fc8a03;
  --ce-dark: #1f2a35;
  --ce-dark-deep: #12181f;
  --ce-gradient: linear-gradient(135deg, var(--ce-dark) 0%, var(--ce-dark-deep) 100%);
}

html {
  /* Remplace le smooth-scroll de paper-kit.js (retiré lors du passage à
     Bootstrap 5.3.8) pour les liens d'ancre de la nav
     (#fonctionnalites/#pays/etc.) -- un défilement fluide en CSS pur,
     sans dépendance JS. */
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Nav -- vraie navbar Bootstrap 5 responsive (motif "navbar-fixed"
   officiel, repris à la demande explicite de l'utilisateur suite au
   constat que le précédent "Simple header" sans toggler/collapse
   n'était pas réellement utilisable sur mobile : trop de liens pour
   flex-wrap proprement en dessous de 992px). Reste visible pendant le
   défilement (position: sticky, fond opaque) -- pas de fondu au scroll
   à gérer. */
.ce-navbar {
  background: var(--ce-dark);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.ce-navbar-brand {
  color: #fff;
  font-weight: 700;
}
.ce-navbar-brand:hover,
.ce-navbar-brand:focus {
  color: #fff;
}
.ce-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.3);
}
.ce-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.2);
}
/* paper-kit.min.css (chargé avant ce fichier) embarque son propre menu
   mobile "off-canvas" de Paper Kit 2 Pro pour .navbar-collapse
   (@media max-width:991px -- position:fixed, largeur 230px, glissant
   depuis la droite, display:none!important par défaut) : jamais un
   problème tant que le "Simple header" n'utilisait pas les classes
   Bootstrap standard, mais entre en conflit direct avec le vrai
   .navbar-collapse de Bootstrap 5 maintenant utilisé ici -- bug réel vu
   en direct (menu mobile poussé hors écran, ne s'ouvrait jamais
   visuellement malgré la classe .show correctement posée par JS).
   Neutralisé ici avec !important (nécessaire pour gagner sur les
   !important de paper-kit), borné à max-width:1199.98px (juste sous le
   seuil navbar-expand-xl) pour ne jamais toucher l'affichage desktop. */
@media (max-width: 1199.98px) {
  .ce-navbar #ceNavbarCollapse {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
    background: transparent !important;
    border-left: none !important;
    padding: 0 !important;
    right: auto !important;
    top: auto !important;
    box-shadow: none !important;
  }
  .ce-navbar #ceNavbarCollapse:not(.show) {
    display: none !important;
  }
  .ce-navbar #ceNavbarCollapse.show {
    display: block !important;
  }
}
/* Même conflit sur l'icône du bouton hamburger : la règle générique de
   paper-kit .navbar-toggler-icon{width:24px;height:2px;background:gray}
   (pensée pour UNE SEULE des 3 barres de son propre système à 3 <span>,
   pas pour l'unique <span> de Bootstrap 5) écrasait à la fois le
   background-image (SVG remplacé par un aplat gris) ET la hauteur
   (2px !) -- résultat : un simple trait gris de 2px de haut, quasiment
   invisible et surtout une zone cliquable ~12px de haut sur mobile (bien
   sous le minimum tactile ~44px), ce qui rendait le bouton hamburger
   inutilisable en pratique -- bug réel signalé par l'utilisateur en
   production. Toutes les propriétés concernées réaffectées ici (taille
   Bootstrap 5 standard 1.5em + SVG officiel, 3 barres blanches cohérent
   avec navbar-dark). */
.ce-navbar .navbar-toggler-icon {
  width: 1.5em !important;
  height: 1.5em !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}
/* Sélecteur de langue -- item actif (drapeau du pays/langue courante) en
   bleu Bootstrap par défaut (--bs-dropdown-link-active-bg), hors thème
   (orange/sombre) -- signalé par l'utilisateur. */
.ce-navbar .dropdown-item.active,
.ce-navbar .dropdown-item:active {
  background-color: var(--ce-orange);
  color: #fff;
}
/* :not(.btn) -- "Télécharger" est aussi un .nav-link (pour s'aligner
   dans le même menu) mais surtout un .btn-neutral (fond clair,
   texte foncé) : sans cette exclusion, cette couleur blanche/transparente
   s'appliquait par-dessus et rendait son texte invisible sur son propre
   fond clair -- bug réel vu en direct après le passage au Simple header. */
.ce-navbar .navbar-nav .nav-link:not(.btn) {
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: .92rem;
  padding: .5rem .9rem;
  border-radius: 50px;
}
.ce-navbar .navbar-nav .nav-link:not(.btn):hover,
.ce-navbar .navbar-nav .nav-link:not(.btn):focus {
  color: #fff;
}
.ce-navbar .navbar-nav .nav-link.active {
  background: var(--ce-orange);
  color: #fff;
}

/* Hero */
.ce-hero {
  background: var(--ce-dark) var(--ce-gradient);
  position: relative;
  overflow: hidden;
  padding: 80px 0 120px;
}
.ce-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0, transparent 40%),
                     radial-gradient(circle at 85% 75%, rgba(255,255,255,.10) 0, transparent 45%);
  pointer-events: none;
}
.ce-hero .ce-app-icon {
  width: 120px;
  height: 120px;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  margin-bottom: 28px;
}
.ce-hero h1 {
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 12px;
}
.ce-hero .ce-tagline {
  color: rgba(255,255,255,.92);
  font-size: 1.25rem;
  max-width: 640px;
  margin: 0 auto 30px;
}
.ce-hero .ce-free-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 30px;
  padding: 6px 18px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 26px;
}
/* Variante compacte du hero pour les pages SEO par pays
   (country_template.php) -- pas de capture d'écran/app-icon à côté, donc
   pas besoin du padding généreux de la home. */
.ce-hero--country {
  padding: 60px 0 70px;
}
/* Les tableaux des pages pays n'ont que 2-4 colonnes : pas de
   min-width de 640 px (prévu pour le tableau à 4 colonnes de la home),
   sinon défilement horizontal inutile sur mobile. */
.ce-coverage-card--compact { max-width: 640px; margin: 0 auto; }
.ce-coverage-card--compact .ce-coverage-table,
.ce-chart-table .ce-coverage-table {
  min-width: 0;
}
.ce-coverage-card--compact .ce-coverage-table td,
.ce-coverage-card--compact .ce-coverage-table th,
.ce-chart-table .ce-coverage-table td,
.ce-chart-table .ce-coverage-table th {
  white-space: normal;
}
.ce-store-buttons--hero {
  max-width: 360px;
  margin: 8px auto 0;
}

/* Pages SEO par pays : courbe de prix (SVG généré côté serveur), carte
   des stations (Leaflet chargé à la demande), enseignes. */
.ce-chart {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20,33,61,.08);
  padding: 18px 18px 14px;
  text-align: left;
}
.ce-chart-legend {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: .85rem;
  color: #1f2a35;
}
.ce-chart-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.ce-chart-plot {
  position: relative;
}
.ce-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}
.ce-chart-tip {
  position: absolute;
  background: #fff;
  border: 1px solid #e2e5eb;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20,33,61,.15);
  padding: 8px 10px;
  font-size: .8rem;
  line-height: 1.5;
  color: #1f2a35;
  pointer-events: none;
  white-space: nowrap;
}
.ce-chart-summary {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: .9rem;
  color: #1f2a35;
}
.ce-chart-table {
  margin-top: 12px;
  font-size: .85rem;
}
.ce-chart-table summary {
  cursor: pointer;
  color: #52606d;
}
.ce-section-title--col {
  font-size: 1.5rem;
  margin: 0 0 14px;
}
/* Captures d'écran compactes sur une seule ligne (pages pays) : défilement
   horizontal sur mobile/tablette, centrées et sans défilement dès 992 px. */
.ce-gallery-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
}
.ce-gallery-strip .ce-gallery-shot {
  flex: 0 0 auto;
  width: 130px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(20,33,61,.15);
}
@media (min-width: 992px) {
  .ce-gallery-strip { justify-content: center; overflow-x: visible; }
  .ce-gallery-strip .ce-gallery-shot { width: 150px; }
}
.ce-section-title--sub {
  font-size: 1.15rem;
  margin: 22px 0 12px;
}
.ce-faq { text-align: left; margin-top: 8px; }
.ce-faq .ce-section-title--sub { text-align: center; }
.ce-faq-q {
  font-size: .95rem;
  font-weight: 700;
  color: #1f2a35;
  margin: 12px 0 2px;
}
.ce-faq-a {
  font-size: .9rem;
  color: #52606d;
  margin: 0;
}
.ce-gallery-section { padding-top: 40px; padding-bottom: 30px; }
.ce-map-col {
  display: flex;
  flex-direction: column;
}
.ce-map-col .ce-map {
  flex: 1 1 auto;
}
.ce-map {
  min-height: 420px;
  height: 420px;
  width: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,33,61,.12);
  background: #e9edf2;
  position: relative;
  z-index: 0;
}
.ce-map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #52606d;
}
.ce-cluster div {
  border-radius: 50%;
  background: rgba(252,138,3,.9);
  box-shadow: 0 0 0 4px rgba(252,138,3,.35);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  cursor: pointer;
}
.ce-brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ce-brand-list li {
  color: #1f2a35;
}
@media (max-width: 575px) {
  .ce-map { height: 360px; min-height: 360px; }
}
/* .ce-store-buttons est maintenant un d-grid (3 boutons empilés, même
   largeur/hauteur) -- l'espacement vient de gap-2 (utilitaire Bootstrap),
   plus besoin de marges manuelles par bouton comme à l'époque où ils
   étaient côte à côte en inline-block. */
.ce-store-buttons img {
  height: 52px;
}

/* Features */
.ce-section-title {
  font-weight: 700;
  color: var(--ce-dark);
}
.ce-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ce-orange);
  color: #fff;
  font-size: 26px;
  margin-bottom: 18px;
}
.ce-feature-card {
  padding: 10px 6px 26px;
}

/* Pays couverts */
.ce-country-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 30px;
  padding: 8px 16px 8px 10px;
  margin: 5px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ce-dark);
  box-shadow: 0 2px 6px rgba(20,33,61,.05);
}
.ce-country-pill .flag {
  font-size: 1.3rem;
  margin-right: 8px;
}
.ce-coverage-note {
  font-size: .85rem;
  color: #8a94a6;
}
.ce-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 22px;
}
.ce-coverage-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .75);
}
.ce-tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ce-tier-dot.ce-tier-real { background: #2ecc71; }
.ce-tier-dot.ce-tier-national_avg { background: var(--ce-orange); }
.ce-tier-dot.ce-tier-positions_only { background: #8a94a6; }

.ce-coverage-card {
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  overflow-x: auto;
  text-align: left;
}
.ce-coverage-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: .92rem;
}
.ce-coverage-table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: #8a94a6;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #e7e9ee;
  white-space: nowrap;
}
.ce-coverage-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f2f6;
  color: var(--ce-dark);
  vertical-align: middle;
  white-space: nowrap;
}
.ce-coverage-table tbody tr:last-child td {
  border-bottom: none;
}
.ce-coverage-table .ce-country-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}
.ce-coverage-table .flag {
  font-size: 1.15rem;
}
.ce-coverage-table a {
  color: var(--ce-orange);
  font-weight: 600;
  text-decoration: none;
}
.ce-coverage-table a:hover {
  text-decoration: underline;
}
.ce-coverage-table .ce-muted {
  color: #b7bfcc;
}

/* Comment ça marche */
.ce-step-number {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ce-orange);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

/* Soutenir */
.ce-support {
  background: #f6f8fb;
}
.ce-support-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20,33,61,.08);
  padding: 40px;
}

/* Footer */
.ce-footer {
  background: var(--ce-dark);
  color: rgba(255,255,255,.75);
  padding: 40px 0 20px;
}
.ce-footer a {
  color: rgba(255,255,255,.85);
}
.ce-footer a:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .ce-hero { padding: 130px 0 80px; }
  .ce-hero h1 { font-size: 2.1rem; }
}

/* Reveal au scroll -- même mécanique que "Content Areas" dans la démo
   Paper Kit 2 Pro (assets/js/paper-kit.js : classe .add-animation qui
   démarre invisible/décalée, passe à .ce-visible une fois dans le
   viewport) -- réimplémenté ici via IntersectionObserver plutôt que le
   scroll-listener jQuery d'origine, même rendu final, plus léger. */
.ce-reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.ce-reveal.ce-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.ce-reveal-delay-1 { transition-delay: .1s; }
.ce-reveal-delay-2 { transition-delay: .2s; }
.ce-reveal-delay-3 { transition-delay: .3s; }
.ce-reveal-delay-4 { transition-delay: .4s; }
.ce-reveal-delay-5 { transition-delay: .5s; }

/* Mur de captures incliné -- remplace un premier essai "appareils avec
   cadres" jugé trop épars/pas assez mur (retour direct de l'utilisateur,
   référence : section "Beautiful Cards" de la démo Paper Kit 2, cartes
   carrées superposées à des angles différents). Repris ici avec les
   vraies captures de l'app (rectangulaires, pas carrées) : chaque carte
   est juste l'image + ombre + rotation statique, superposées en
   cascade -- pas besoin de cadre d'appareil pour un mur aussi dense. */
.ce-wall {
  position: relative;
  height: 480px;
}
.ce-wall-card {
  position: absolute;
  width: 168px;
  border-radius: 16px;
  box-shadow: 0 22px 45px rgba(0,0,0,.45);
  transition: transform .3s ease, z-index 0s;
}
.ce-wall-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.ce-wall-card:hover {
  transform: translateY(-10px) scale(1.04) !important;
  z-index: 9 !important;
}
.ce-wall-card-1 { top: 10px; left: 90px; transform: rotate(-7deg); z-index: 3; }
.ce-wall-card-2 { top: 0; left: 250px; transform: rotate(5deg); z-index: 4; width: 176px; }
.ce-wall-card-3 { top: 190px; left: 10px; transform: rotate(-4deg); z-index: 2; }
.ce-wall-card-4 { top: 175px; left: 270px; transform: rotate(8deg); z-index: 2; }
.ce-wall-card-5 { top: 340px; left: 140px; transform: rotate(-6deg); z-index: 1; }

/* Petit flottement continu -- le "ça bouge" demandé, discret. Chaque
   carte garde sa propre rotation statique dans le keyframe (une
   animation CSS remplace `transform` en entier, elle ne se combine pas
   avec le `rotate()` posé par .ce-wall-card-N -- déjà le bug trouvé sur
   le premier essai, corrigé de la même façon ici). */
@keyframes ceWallFloat1 { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-12px); } }
@keyframes ceWallFloat2 { 0%,100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-14px); } }
@keyframes ceWallFloat3 { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } }
@keyframes ceWallFloat4 { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-11px); } }
@keyframes ceWallFloat5 { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-13px); } }
/* Déclenché par LE MUR (.ce-wall), pas par chaque carte : .ce-reveal est
   posée sur le conteneur entier (pas de transform statique à perdre là),
   les cartes héritent juste du signal "visible" du parent. */
.ce-wall.ce-visible .ce-wall-card-1 { animation: ceWallFloat1 5s ease-in-out infinite .1s; }
.ce-wall.ce-visible .ce-wall-card-2 { animation: ceWallFloat2 5.6s ease-in-out infinite .3s; }
.ce-wall.ce-visible .ce-wall-card-3 { animation: ceWallFloat3 5.2s ease-in-out infinite .5s; }
.ce-wall.ce-visible .ce-wall-card-4 { animation: ceWallFloat4 5.8s ease-in-out infinite .2s; }
.ce-wall.ce-visible .ce-wall-card-5 { animation: ceWallFloat5 5.4s ease-in-out infinite .4s; }

/* Badges flottants (équivalent des mini-cartes "Pin it"/"Share" de la
   démo Paper Kit 2 -- ici avec de vrais chiffres du projet, pas des
   compteurs sociaux fictifs). */
.ce-floating-badge {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(0,0,0,.3);
  padding: 12px 18px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ce-dark);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ce-floating-badge .nc-icon {
  font-size: 1.3rem;
  color: var(--ce-orange);
}
.ce-badge-countries {
  top: 0;
  left: 0;
}
.ce-badge-free {
  bottom: 30px;
  right: 0;
}
@media (max-width: 767px) {
  .ce-wall { height: 400px; max-width: 340px; margin: 0 auto; }
  .ce-wall-card { width: 130px; }
  .ce-wall-card-2 { width: 138px; }
  .ce-wall-card-1 { left: 60px; }
  .ce-wall-card-2 { left: 180px; }
  .ce-wall-card-3 { left: 0; top: 150px; }
  .ce-wall-card-4 { left: 190px; top: 140px; }
  .ce-wall-card-5 { left: 90px; top: 270px; }
  .ce-floating-badge { padding: 8px 12px; font-size: .8rem; }
}

/* Galerie de captures d'écran */
.ce-gallery-shot {
  max-width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 20px 45px rgba(20,33,61,.18);
  transition: transform .35s ease;
}
.ce-gallery-shot:hover {
  transform: translateY(-8px) scale(1.02);
}
.ce-gallery-item {
  margin-bottom: 30px;
}

/* Sélecteur de langue -- DEUX bugs réels trouvés en direct sur la prod
   (pas un seul) :
   1. paper-kit.min.css contient `.dropdown > .dropdown-menu:first-of-type
      { display: block }` (pensée pour un autre motif du kit) qui rend CE
      menu visible en permanence, quel que soit l'état .show posé par
      Bootstrap -- vérifié via `menu.matches(rule.selectorText)`.
   2. Une fois (1) corrigé, le menu s'ouvrait bien (display:block, classe
      .show posée par Bootstrap) mais restait invisible :
      `opacity:0; visibility:hidden` -- paper-kit.min.css anime ses
      dropdowns via `.dropdown .dropdown-menu { transform:
      translate3d(0,-40px,0) }` puis les révèle via
      `.dropdown.show .dropdown-menu { visibility: visible!important }`.
      Sauf que Bootstrap 5.3 ne pose JAMAIS `.show` sur le `<li
      class="dropdown">` parent (vérifié : `li.className` reste
      "nav-item dropdown" même menu ouvert) -- seul le `<ul
      class="dropdown-menu">` lui-même reçoit `.show`. La règle de
      paper-kit ne peut donc jamais se déclencher (écrite pour un
      comportement de Bootstrap 4, différent sur ce point). Repli complet
      sur mon propre sélecteur fiable (frère adjacent de l'ID du bouton)
      plutôt que de dépendre de `.dropdown.show`. */
#ceLangDropdown + .dropdown-menu {
  display: none;
  opacity: 0;
}
#ceLangDropdown + .dropdown-menu.show {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Surbrillance de la nav au scroll (JS maison ceUpdateSpy, voir le
   <script> en bas de page -- ScrollSpy natif de Bootstrap essayé et
   abandonné, son état ne se mettait jamais à jour) -- la section
   actuellement visible obtient .active sur son lien. Le style (fond
   orange) vient déjà de la règle .ce-navbar .nav-pills .nav-link.active
   plus haut, rien à ajouter ici. */