/* ==========================================================================
   CDG — Thème Bootstrap 5
   Gabarit statique converti depuis la maquette WordPress/Elementor.

   Toutes les couleurs passent par les variables --cdg-* définies sur :root :
   aucune autre règle n'a besoin de changer pour re-brander le site.

   INTÉGRATION : pour changer de charte, remplacer les valeurs du bloc
   __CHARTE__ ci-dessous. Les palettes alternatives de la maquette (Bleu
   République, Vert Pyrénées, CDG 87…) sont prêtes à copier dans
   assets/css/chartes.css — fichier de référence non chargé par la page.
   Ce fichier-ci est indépendant de bootstrap.min.css (non modifié) : il
   peut être repris tel quel dans un autre projet Bootstrap 5.
   ========================================================================== */

:root {
  /* Palette par défaut — bloc régénéré par update-charte.py, ne pas éditer
     à la main. brand = couleur principale (titres, menu, footer),
     brand-dark = boutons « en lire plus », brand-bg = fonds de sections,
     cta = boutons d'action / icônes / puces, link-hover = survols.
     NB : certaines variables (primary, text, muted…) ne sont pas encore
     utilisées par ce gabarit — elles complètent la charte de la maquette
     pour les gabarits suivants. */
  /* __CHARTE_START__ */
  --cdg-primary: #CC3366;
  --cdg-secondary: #6C757D;
  --cdg-text: #7A7A7A;
  --cdg-accent: #61CE70;
  --cdg-border: #EEEEEE;
  --cdg-dark: #333333;
  --cdg-light: #FAFAFA;
  --cdg-gray: #8F8F8F;
  --cdg-muted: #ABABAB;
  --cdg-placeholder: #B6B6B6;
  --cdg-brand: #6F42C1;
  --cdg-brand-dark: #572FA2;
  --cdg-brand-bg: #F6F1FF;
  --cdg-cta: #FF7A00;
  --cdg-info: #5EC2D2;
  --cdg-link-hover: #BE1D52;
  --cdg-white: #FFFFFF;
  --cdg-logo: url("../img/logo_cdg.png");
  /* __CHARTE_END__ */

  /* Surcharges locales de la charte — déclarées APRÈS le bloc __CHARTE__
     (donc prioritaires) et hors de celui-ci, pour ne pas être effacées au
     prochain update-charte.py. Supprimer une ligne pour revenir à la
     valeur de la maquette.

     · survols : la maquette donne #BE1D52, le gabarit les veut sur le
       violet de marque ;
     · primary : la maquette donne #CC3366 (le rose qui servait d'accent
       aux pages internes — marqueurs d'accordéon, titres de niveau 3,
       liens de documents). Le gabarit l'aligne sur le violet de marque.
       --bs-code-color en dérive et suit donc automatiquement.

     Les deux pointent sur --cdg-brand : elles suivront un changement de
     charte. Pour figer une teinte quelle que soit la charte, remplacer par
     une valeur littérale. */
  --cdg-link-hover: var(--cdg-brand);
  --cdg-primary: var(--cdg-brand);

  /* Familles typographiques (auto-hébergées, cf. assets/fonts/fonts.css) */
  --cdg-font-body: "Archivo", sans-serif;
  --cdg-font-title: "Bricolage Grotesque", sans-serif;
  --cdg-font-card: "Archivo Narrow", sans-serif;
  --cdg-font-condensed: "Barlow Condensed", sans-serif;
  --cdg-font-ui: "Archivo", sans-serif;
  --cdg-font-btn: "Archivo Narrow", sans-serif;

  /* Dégradé unique des pastilles et ronds d'icônes (suit la palette) */
  --cdg-gradient: linear-gradient(160deg,
                  color-mix(in srgb, var(--cdg-cta) 60%, #FFD34D),
                  var(--cdg-cta));

  /* Gris de texte secondaire conforme AA. Le --cdg-text de la charte
     (#7A7A7A) ne donne que 4,29:1 sur blanc — sous le seuil de 4,5:1 du
     RGAA pour du texte courant. On l'assombrit sans sortir de la palette :
     la valeur suit automatiquement un changement de charte. */
  --cdg-text-aa: color-mix(in srgb, var(--cdg-text) 80%, #000);

  /* Hauteur du menu collant (70 px mesurés) : offset des éléments qui se
     figent sous lui, aujourd'hui les entêtes de tableaux. */
  --cdg-sticky-top: 4.5rem;

  /* Pont vers Bootstrap */
  --bs-body-font-family: var(--cdg-font-body);
  --bs-body-font-size: 1.1875rem;           /* 19px comme la maquette */
  --bs-body-color: var(--cdg-dark);
  --bs-link-color: var(--cdg-dark);
  --bs-link-hover-color: var(--cdg-link-hover);

  /* Couleur des <code>. Le #D63384 de Bootstrap ne passe que sur blanc
     (4,50:1) et échoue sur tous les fonds clairs de la charte (3,76 à
     4,06:1). On assombrit --cdg-primary de 15 % : 6,40:1 sur blanc et
     5,34:1 au pire (fond lilas #EEE8F8). Dérivée, donc elle suit la
     charte — même motif que --cdg-text-aa. */
  --bs-code-color: color-mix(in srgb, var(--cdg-primary) 85%, #000);
}

body {
  font-family: var(--cdg-font-body);
  font-size: 1.1875rem;
  color: var(--cdg-dark);
  overflow-x: clip; /* garde-fou : aucun débordement horizontal */
}

a { color: var(--cdg-dark); }
a:hover { color: var(--cdg-link-hover); }

img { border-radius: 5px; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn-cdg-cta,
.btn-cdg-brand,
.btn-cdg-connect {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-family: var(--cdg-font-btn);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

/* Orange « Lire la suite / Je m'abonne » */
.btn-cdg-cta {
  --bs-btn-bg: var(--cdg-cta);
  --bs-btn-hover-bg: var(--cdg-link-hover);
  --bs-btn-active-bg: var(--cdg-link-hover);
  --bs-btn-border-color: var(--cdg-cta);
  --bs-btn-hover-border-color: var(--cdg-link-hover);
  --bs-btn-active-border-color: var(--cdg-link-hover);
  --bs-btn-border-radius: .5rem;
  font-size: .875rem;
  letter-spacing: .5px;
}

/* Violet « En lire plus » (héros, dossiers) */
.btn-cdg-brand {
  --bs-btn-bg: var(--cdg-brand-dark);
  --bs-btn-hover-bg: var(--cdg-brand);
  --bs-btn-active-bg: var(--cdg-brand);
  --bs-btn-border-color: var(--cdg-brand-dark);
  --bs-btn-hover-border-color: var(--cdg-brand);
  --bs-btn-active-border-color: var(--cdg-brand);
  --bs-btn-border-radius: 15px;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 1rem;
  font-size: 1.1875rem;
  letter-spacing: 1px;
}

.btn-cdg-brand.btn-sm {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-border-radius: .625rem;
  font-size: .9375rem;
}

/* Violet « Changer de profil » (page de profil) — pilule, icône à droite */
.btn-cdg-profil {
  --bs-btn-bg: var(--cdg-brand-dark);
  --bs-btn-hover-bg: var(--cdg-dark);
  --bs-btn-active-bg: var(--cdg-dark);
  --bs-btn-border-color: var(--cdg-brand-dark);
  --bs-btn-hover-border-color: var(--cdg-dark);
  --bs-btn-active-border-color: var(--cdg-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-border-radius: 60px;
  font-family: var(--cdg-font-condensed);
  font-size: 1.3125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  display: inline-flex;
  align-items: center;
  gap: 1.0625rem;
  padding: 1rem 1.75rem;
}

/* Bouton secondaire ajouré (« Annuler, retour » des formulaires) */
.btn-cdg-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--cdg-brand);
  --bs-btn-border-color: var(--cdg-brand);
  --bs-btn-hover-bg: var(--cdg-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--cdg-brand);
  --bs-btn-active-bg: var(--cdg-brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--cdg-brand-dark);
  --bs-btn-border-radius: .5rem;
  font-family: var(--cdg-font-btn);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .5px;
}

/* Orange « Se connecter » (barre supérieure) — angles droits, comme la maquette */
.btn-cdg-connect {
  --bs-btn-bg: var(--cdg-cta);
  --bs-btn-hover-bg: var(--cdg-link-hover);
  --bs-btn-border-color: var(--cdg-cta);
  --bs-btn-hover-border-color: var(--cdg-link-hover);
  --bs-btn-border-radius: 0;
  font-size: 1.0625rem;
  text-transform: none;
}

/* ==========================================================================
   Barre supérieure
   ========================================================================== */

.cdg-topbar {
  font-family: var(--cdg-font-ui);
  font-size: .8125rem;
  background: var(--cdg-brand);
  color: #fff;
}

.cdg-topbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
  color: #fff;
}

.cdg-topbar .nav-link:hover { color: rgba(255, 255, 255, .75); }

/* ==========================================================================
   En-tête principal : logo, recherche, raccourcis
   ========================================================================== */

.cdg-header .navbar-brand img { height: 68px; width: auto; border-radius: 0; }

/* Logo piloté par la charte : --cdg-logo vient du bloc __CHARTE__ (chaque
   palette de chartes.css embarque le sien), et `content` remplace l'image
   sans toucher au HTML. L'attribut src reste le logo par défaut et sert de
   repli si la variable n'est pas définie — le texte alternatif est conservé
   dans l'arbre d'accessibilité (vérifié Chrome/Firefox). Comme la hauteur
   est fixée et la largeur automatique, un logo d'un autre rapport
   hauteur/largeur s'adapte tout seul. */
.cdg-header .navbar-brand img,
.cdg-nav .cdg-nav-brand img {
  content: var(--cdg-logo, url("../img/logo_cdg.png"));
}

.cdg-searchbox {
  max-width: 620px;
  border: 1px solid var(--cdg-brand);
  border-radius: 2rem;
  overflow: hidden;
  background: #fff;
}

.cdg-searchbox .form-control {
  border: 0;
  font-family: var(--cdg-font-ui);
  font-size: 1.0625rem;
  color: var(--cdg-brand);
  padding: .625rem 1.5rem;
}

.cdg-searchbox .form-control::placeholder { color: var(--cdg-brand); opacity: .85; }
.cdg-searchbox .form-control:focus { box-shadow: none; }
.cdg-searchbox .btn { border: 0; color: var(--cdg-brand); font-size: 1.25rem; }

.cdg-shortcut {
  text-align: center;
  font-family: var(--cdg-font-btn);
  font-size: .75rem;
  color: var(--cdg-dark);
  text-decoration: none;
  display: inline-block;
}

.cdg-shortcut .cdg-shortcut-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto .375rem;
  border-radius: 50%;
  background: var(--cdg-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  transition: background .2s;
}

/* au survol / focus, la pastille passe au violet (comme la maquette) */
.cdg-shortcut:hover .cdg-shortcut-icon,
.cdg-shortcut:focus-visible .cdg-shortcut-icon {
  background: var(--cdg-brand);
}

/* icônes SVG reprises de la maquette (Font Awesome inline + pictos custom) */
.cdg-svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

/* ==========================================================================
   Navigation principale + mega menu
   ========================================================================== */

.cdg-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* logo et raccourcis intégrés au menu : visibles seulement à l'état collé
   (classe .is-stuck posée par main.js quand le menu atteint le haut) */
.cdg-nav .cdg-nav-brand,
.cdg-nav .cdg-nav-shortcuts { display: none; }

.cdg-nav.is-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }

.cdg-nav.is-stuck > .container-fluid { justify-content: space-between !important; }

.cdg-nav.is-stuck .cdg-nav-brand { display: block; }
.cdg-nav.is-stuck .cdg-nav-brand img { height: 48px; width: auto; border-radius: 0; }

.cdg-nav.is-stuck .cdg-nav-shortcuts {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cdg-nav.is-stuck .cdg-nav-shortcuts .cdg-shortcut-icon {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
}

.cdg-nav .navbar-nav {
  font-family: var(--cdg-font-btn);
  font-weight: 700;
  font-size: 1.25rem;
}

.cdg-nav .nav-link {
  color: var(--cdg-brand);
  padding: .75rem 1.125rem;
}

.cdg-nav .nav-link:hover,
.cdg-nav .nav-link:focus,
.cdg-nav .nav-item.show .nav-link { color: var(--cdg-link-hover); }

.cdg-nav .dropdown-toggle::after {
  vertical-align: .125em;
  margin-left: .375em;
}

/* mega menu pleine largeur */
.cdg-nav .nav-item.dropdown { position: static; }

.cdg-mega {
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
  padding: 1.75rem 2rem;
  border: 0;
  border-top: 3px solid var(--cdg-cta);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, .18);
}

.cdg-mega .cdg-mega-title {
  font-family: var(--cdg-font-card);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cdg-cta);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .625rem;
}

.cdg-mega .cdg-mega-subtitle {
  font-family: var(--cdg-font-card);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cdg-brand);
  margin: .75rem 0 .375rem;
}

.cdg-mega ul { list-style: none; margin: 0; padding: 0; }

.cdg-mega ul a {
  display: block;
  padding: .1875rem 0;
  font-family: var(--cdg-font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--cdg-dark);
  text-decoration: none;
}

.cdg-mega ul a:hover { color: var(--cdg-link-hover); }

/* ==========================================================================
   Héros « À la Une » (cartes + carrousels)
   ========================================================================== */

.cdg-hero-card {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cdg-brand-bg);
  height: 100%;
}

.cdg-hero-card .cdg-hero-img {
  flex: 0 0 30%;
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.cdg-hero-card .cdg-hero-body { flex: 1 1 auto; padding: 2.5rem; }

.cdg-hero-label {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--cdg-brand);
  margin-bottom: .75rem;
}

.cdg-hero-title {
  font-family: var(--cdg-font-title);
  font-size: 1.4375rem;
  font-weight: 800;
  color: var(--cdg-dark);
  margin-bottom: .75rem;
}

.cdg-hero-text { font-size: .9375rem; color: var(--cdg-dark); margin-bottom: 1.5rem; }

/* variante « grande carte » du second héros */
.cdg-hero-card-lg .cdg-hero-img { flex-basis: 32%; min-height: 280px; }
.cdg-hero-card-lg .cdg-hero-title { font-size: 1.75rem; }

/* contrôles de carrousel : flèches oranges rondes */
.cdg-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--cdg-cta);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background .2s;
}

.cdg-carousel-arrow:hover { background: var(--cdg-link-hover); color: #fff; }
.cdg-carousel-arrow.cdg-prev { left: -12px; }
.cdg-carousel-arrow.cdg-next { right: -12px; }

/* pastilles */
.cdg-indicators {
  display: flex;
  gap: .625rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.cdg-indicators [data-bs-target] {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--cdg-cta);
  opacity: .3;
  transition: opacity .2s;
}

.cdg-indicators .active { opacity: 1; }

.cdg-carousel-pause {
  border: 0;
  background: none;
  color: var(--cdg-cta);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.cdg-carousel-pause:hover { color: var(--cdg-link-hover); }

/* bandeau défilant d'annonces */
.cdg-ticker {
  font-family: var(--cdg-font-title);
  font-size: .8125rem;
  font-weight: 700;
}

/* titres de diapositives : inactifs gris, actif sombre */
.cdg-ticker .cdg-ticker-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cdg-gray);
  transition: color .2s;
}

.cdg-ticker .cdg-ticker-link:hover { color: var(--cdg-link-hover); }
.cdg-ticker .cdg-ticker-link.active { color: var(--cdg-dark); }
.cdg-ticker .cdg-ticker-sep { color: var(--cdg-cta); font-size: .625rem; }

/* défilement des carrousels à la souris (cf. main.js) */
.carousel .carousel-inner { cursor: grab; }
.carousel.cdg-dragging { user-select: none; }
.carousel.cdg-dragging .carousel-inner { cursor: grabbing; }

/* liste d'événements à droite du second héros */
.cdg-event-item {
  border-top: 2px solid var(--cdg-dark);
  padding: 1rem 0;
}

.cdg-event-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cdg-gradient);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdg-event-title {
  font-family: var(--cdg-font-card);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cdg-dark);
  margin: 0;
  transition: color .2s;
}

/* titre de diapositive : bouton pleine largeur, titre à gauche, flèche à
   droite ; inactif gris, actif violet */
.cdg-event-link {
  border: 0;
  background: none;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.cdg-event-link:hover .cdg-event-title { color: var(--cdg-link-hover); }
.cdg-event-link.active .cdg-event-title { color: var(--cdg-brand); }
.cdg-event-desc { font-size: 1.0625rem; color: var(--cdg-dark); margin: .5rem 0 0; }

/* ==========================================================================
   Sections d'actualités
   ========================================================================== */

/* Grands titres : base commune (famille + graisse) — la taille et la
   couleur restent propres à chaque classe. */
.cdg-section-title,
.cdg-modal-title,
.cdg-jesuis-title,
.cdg-newsletter-title,
.cdg-portails-title {
  font-family: var(--cdg-font-title);
  font-weight: 800;
}

.cdg-section-title {
  font-size: 2.3125rem;
  color: var(--cdg-brand);
  margin: 0;
}

.cdg-section-link {
  font-family: var(--cdg-font-condensed);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cdg-cta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

.cdg-section-link:hover { color: var(--cdg-link-hover); }

/* cartes d'actualités : 4 variantes comme sur la maquette */
.card-news {
  border: 0;
  border-radius: 12px;
  text-align: center;
  height: 100%;
}

.card-news.card-news-outline { border: 1px solid var(--cdg-brand); }
.card-news.card-news-soft { background: var(--cdg-brand-bg); }

.card-news.card-news-photo {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.card-news.card-news-photo .card-body { position: relative; z-index: 1; }

.card-news.card-news-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .78);
}

.card-news .card-body {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-news .cdg-card-cat {
  font-family: var(--cdg-font-card);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cdg-brand);
  margin: 0;
}

.card-news .cdg-card-title {
  font-family: var(--cdg-font-card);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.card-news .cdg-card-title a { color: var(--cdg-brand); text-decoration: none; }
.card-news .cdg-card-title a:hover { color: var(--cdg-link-hover); }

.card-news .card-img-top {
  border-radius: 10px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-news.card-news-img .card-body { padding: 0.75rem .75rem; }

/* ==========================================================================
   Bandeau « Les dossiers du moment »
   ========================================================================== */

.cdg-dossiers {
  background: var(--cdg-brand-bg);
  border-radius: 20px;
  padding: 2.5rem 3rem 3rem;
  position: relative;
}

.cdg-dossiers-badge {
  display: inline-block;
  background: #fff;
  color: var(--cdg-brand);
  font-family: var(--cdg-font-title);
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: .5rem 1.5rem;
}

.card-dossier {
  border: 0;
  border-radius: 14px;
  height: 100%;
}

.card-dossier .card-img-top {
  border-radius: 10px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-dossier .card-body { padding: 1.25rem .5rem .5rem; }

.card-dossier .cdg-card-title {
  font-family: var(--cdg-font-card);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--cdg-dark);
  margin-bottom: .625rem;
}

.card-dossier .cdg-card-text { font-size: .9375rem; margin-bottom: 1.25rem; }
.card-dossier .cdg-card-text strong { font-weight: 700; }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.cdg-newsletter {
  background: var(--cdg-brand-bg);
  border-radius: 20px;
  padding: 2.5rem 3rem;
}

.cdg-newsletter-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cdg-gradient);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cdg-newsletter-title {
  font-size: 1.75rem;
  color: var(--cdg-brand);
  margin: 0;
}

.cdg-newsletter-sub { color: var(--cdg-brand); font-size: 1.0625rem; margin: .25rem 0 0; }

.cdg-newsletter .form-control {
  border: 0;
  border-radius: 10px;
  padding: .875rem 1.25rem;
  font-size: 1rem;
}

.cdg-newsletter .btn { 
  font-family: var(--cdg-font-title);
  padding-top: .875rem; 
  padding-bottom: .875rem; 
  justify-content: center; 
  font-weight: 800;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.cdg-footer-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.cdg-backtotop {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--cdg-cta);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.cdg-backtotop:hover { background: var(--cdg-link-hover); }

.cdg-footer {
  background: var(--cdg-brand);
  color: #fff;
  position: relative;
  padding: 3.5rem 0 3rem;
}

.cdg-footer a { color: #fff; text-decoration: none; }
.cdg-footer a:hover { color: rgba(255, 255, 255, .75); }

.cdg-footer-links { font-size: .8125rem; }
.cdg-footer-links .cdg-footer-sep { opacity: .6; margin: 0 .625rem; }

.cdg-footer h2 {
  font-family: var(--cdg-font-body);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.cdg-footer .cdg-footer-text { font-size: .9375rem; }

.cdg-footer .cdg-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--cdg-brand);
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cdg-footer .cdg-social a:hover { background: var(--cdg-cta); color: #fff; }

.cdg-partners h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cdg-dark);
  text-align: center;
  margin-bottom: 2rem;
}

.cdg-partners img { max-height: 90px; width: auto; border-radius: 0; }

/* ==========================================================================
   Onglet flottant « Accès rapide » + fenêtres modales / offcanvas
   ========================================================================== */

/* Onglet flottant « Accès rapide ». Dimensions et position relevées sur la
   maquette (fenêtre 1866×818) : cadre 94×141 px, padding 15 px, centre
   vertical à 58,6 % de la hauteur de fenêtre — donc nettement sous le
   milieu. On garde notre police (Archivo Narrow, la maquette est en
   Barlow) : à taille égale elle est un peu plus étroite. */
.cdg-quick-access {
  position: fixed;
  right: 0;
  top: 58%;
  transform: translateY(-50%);
  z-index: 1040;
  background: var(--cdg-brand);
  color: #fff;
  border: 0;
  border-radius: 12px 0 0 12px;
  padding: .9375rem;
  text-align: center;
  font-family: var(--cdg-font-btn);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.cdg-quick-access .cdg-quick-access-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 1.4375rem;   /* 23 px entre le rond et le libellé (maquette) */
  border-radius: 50%;
  background: var(--cdg-gradient);
  color: #fff;
  font-size: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.cdg-quick-access:hover { background: var(--cdg-brand-dark); }

.cdg-quick-access:hover .cdg-quick-access-icon,
.cdg-quick-access:focus-visible .cdg-quick-access-icon {
  background: #fff;
  color: var(--cdg-brand);
}

.cdg-modal-title {
  font-size: 2.25rem;
  color: var(--cdg-dark);
}

.cdg-modal-title .cdg-modal-title-alt { color: var(--cdg-brand); }

.cdg-modal-title-center { text-align: center; }

.cdg-modal-title-center::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: var(--cdg-dark);
  margin: .625rem auto 0;
}

.cdg-iconbox {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 1.25rem .75rem;
  border-radius: 12px;
  transition: background .2s, filter .2s;
}

.cdg-iconbox:hover { filter: brightness(.96); }

.cdg-iconbox .cdg-iconbox-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto .875rem;
  border-radius: 50%;
  background: var(--cdg-gradient);
  color: #fff;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.cdg-iconbox:hover .cdg-iconbox-icon,
.cdg-iconbox:focus-visible .cdg-iconbox-icon {
  background: var(--cdg-brand);
}

.cdg-iconbox .cdg-iconbox-title {
  font-family: var(--cdg-font-card);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cdg-brand);
  margin: 0;
}

.cdg-iconbox .cdg-iconbox-text { font-size: .9375rem; color: var(--cdg-dark); margin: .5rem 0 0; }

/* tuiles lilas de la modale « Accès Rapides » */
.cdg-iconbox-tile {
  background: var(--cdg-brand-bg);
  border-radius: 20px;
  padding: 2rem 1rem 1.75rem;
  height: 100%;
}

.cdg-portails-title {
  font-size: 1.75rem;
  color: var(--cdg-dark);
}

.cdg-portails-links a {
  color: var(--cdg-brand);
  font-weight: 700;
  text-decoration: none;
}

.cdg-portails-links a:hover { color: var(--cdg-link-hover); }

/* volet « Je Suis… » : bandeau violet plein écran qui descend du haut */
.cdg-jesuis-panel {
  background: var(--cdg-brand);
  color: #fff;
  height: auto;
  max-height: 92vh;
}

.cdg-jesuis-panel .offcanvas-body { padding: 2.5rem 1.5rem; }

.cdg-jesuis-title {
  font-size: 2.5rem;
  color: #fff;
  margin: 0;
}

.cdg-jesuis-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  background: #fff;
  margin-top: .875rem;
}

.cdg-jesuis-panel .cdg-iconbox:hover { filter: none; background: rgba(255, 255, 255, .08); }
.cdg-jesuis-panel .cdg-iconbox-title { color: #fff; }
.cdg-jesuis-panel .cdg-iconbox-text { color: #fff; }
.cdg-jesuis-panel .cdg-iconbox .cdg-iconbox-icon { width: 84px; height: 84px; }

/* sur fond violet, le survol inverse le rond (blanc / picto violet) */
.cdg-jesuis-panel .cdg-iconbox:hover .cdg-iconbox-icon,
.cdg-jesuis-panel .cdg-iconbox:focus-visible .cdg-iconbox-icon {
  background: #fff;
  color: var(--cdg-brand);
}

.cdg-offcanvas .offcanvas-title {
  font-family: var(--cdg-font-card);
  font-weight: 700;
  color: var(--cdg-brand);
}

/* variante « panneau violet » (Contact, Se connecter — comme la maquette) */
.cdg-offcanvas-brand {
  --bs-offcanvas-bg: var(--cdg-brand);
  color: #fff;
}

.cdg-offcanvas-brand .offcanvas-header {
  border-bottom: 2px solid #fff;
  margin: 0 1rem;
  padding-left: 0;
  padding-right: 0;
  align-items: flex-start;
}

.cdg-offcanvas-brand .offcanvas-title {
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.cdg-offcanvas-brand .offcanvas-title i { font-size: 1.75rem; line-height: 1; }

.cdg-offcanvas-brand .btn-close {
  border: 2px solid #fff;
  border-radius: 6px;
  opacity: 1;
  padding: .625rem;
}

.cdg-offcanvas-brand .cdg-service-list li { border-color: rgba(255, 255, 255, .45); }

.cdg-offcanvas-brand .cdg-service-list a {
  color: #fff;
  font-size: 1.0625rem;
  padding: .75rem .25rem;
  justify-content: flex-start;
}

.cdg-offcanvas-brand .cdg-service-list a:hover { color: rgba(255, 255, 255, .75); }
.cdg-offcanvas-brand .cdg-service-list i { color: #fff; }

/* carte « horaires d'ouverture » (bas du panneau Contact) */
.cdg-horaires-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cdg-horaires-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cdg-gradient);
  color: #fff;
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdg-horaires-title {
  font-family: var(--cdg-font-card);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--cdg-cta);
}

.cdg-horaires-text { font-size: .8125rem; color: var(--cdg-dark); }

.cdg-service-list { list-style: none; margin: 0; padding: 0; }

.cdg-service-list li { border-bottom: 1px solid var(--cdg-border); }

.cdg-service-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .25rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--cdg-dark);
}

.cdg-service-list a:hover { color: var(--cdg-link-hover); }

/* menu mobile (offcanvas) : pleine largeur */
.cdg-mobile-menu { --bs-offcanvas-width: 100%; }

.cdg-mobile-menu .accordion-button {
  font-family: var(--cdg-font-btn);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cdg-brand);
}

.cdg-mobile-menu .accordion-button:not(.collapsed) {
  background: var(--cdg-brand-bg);
  color: var(--cdg-brand);
  box-shadow: none;
}

.cdg-mobile-menu .accordion-button:focus { box-shadow: none; }

.cdg-mobile-menu .cdg-mobile-link {
  display: block;
  padding: .875rem 1.25rem;
  font-family: var(--cdg-font-btn);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cdg-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--cdg-border);
}

/* bouton mobile collant « Je suis… » */
.cdg-sticky-jesuis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  padding: .625rem .75rem;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .12);
}

.cdg-sticky-jesuis .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   Tuiles entièrement cliquables
   Le lien du titre est étendu à toute la tuile (.stretched-link Bootstrap) ;
   le bouton d'appel à l'action est décoratif (aria-hidden). Le survol de la
   tuile allume ombre, titre et bouton.
   ========================================================================== */

.cdg-hero-card,
.card-news,
.card-dossier {
  position: relative;
  transition: box-shadow .2s;
}

.cdg-hero-card:hover,
.card-news:hover,
.card-dossier:hover {
  box-shadow: 0 .625rem 1.5rem rgba(51, 51, 51, .16);
}

.cdg-hero-card .cdg-hero-title a,
.card-dossier .cdg-card-title a {
  color: inherit;
  text-decoration: none;
}

.card-news:hover .cdg-card-title a { color: var(--cdg-link-hover); }

.card-news:hover .btn-cdg-cta {
  --bs-btn-bg: var(--cdg-link-hover);
  --bs-btn-border-color: var(--cdg-link-hover);
}

.cdg-hero-card:hover .btn-cdg-brand,
.card-dossier:hover .btn-cdg-brand {
  --bs-btn-bg: var(--cdg-brand);
  --bs-btn-border-color: var(--cdg-brand);
}

/* focus clavier : anneau autour de la tuile entière */
:is(.cdg-hero-card, .card-news, .card-dossier):has(.stretched-link:focus-visible) {
  outline: 3px solid var(--cdg-brand);
  outline-offset: 2px;
}

.stretched-link:focus-visible { outline: 0; }

/* ==========================================================================
   Tableaux de contenu (pages internes)
   ========================================================================== */

.cdg-table thead th {
  background: var(--cdg-brand);
  color: #fff;
  font-family: var(--cdg-font-card);
  font-weight: 700;
}

.cdg-table thead code { color: #FFD9A8; }

.cdg-table > tbody > tr:nth-of-type(even) > * { background: var(--cdg-brand-bg); }

/* légende : au-dessus du tableau, comme la page modèle (Bootstrap la place
   dessous par défaut) */
.cdg-table caption {
  caption-side: top;
  padding: 0 0 .625rem;
  font-family: var(--cdg-font-card);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cdg-brand);
  text-align: center;
}

/* Entête collante — sur un tableau qui fait plusieurs écrans de haut, la
   ligne de titres reste visible sous le menu au lieu de disparaître au
   premier défilement. Le fond violet opaque de thead th masque les lignes
   qui passent dessous ; z-index 2 reste sous le menu (1030).
   ATTENTION : position:sticky se cale sur le conteneur défilant le plus
   proche. Dans un .table-responsive (overflow-x) l'entête se collerait au
   haut du bloc — sans effet visible. Les tableaux de contenu utilisent
   donc .table-responsive-lg : plus de conteneur défilant à partir de lg,
   là où la règle ci-dessous s'applique. */
@media (min-width: 992px) {
  .cdg-table thead th {
    position: sticky;
    top: var(--cdg-sticky-top);
    z-index: 2;
  }
}

/* ==========================================================================
   Pages internes : entête, accordéon de contenu, colonne latérale
   ========================================================================== */

.cdg-page-title {
  font-family: var(--cdg-font-title);
  font-weight: 800;
  font-size: 2rem;
  color: var(--cdg-dark);
  margin: 0;
}

.cdg-breadcrumb { --bs-breadcrumb-divider: '>'; font-size: .875rem; }
.cdg-breadcrumb a { text-decoration: none; color: var(--cdg-dark); }
.cdg-breadcrumb a:hover { color: var(--cdg-link-hover); }
.cdg-breadcrumb .breadcrumb-item.active { color: var(--cdg-text); }

.cdg-badge-maj {
  display: inline-block;
  background: var(--cdg-cta);
  color: #fff;
  font-family: var(--cdg-font-card);
  font-size: .75rem;
  font-weight: 600;
  border-radius: 4px;
  padding: .25rem .625rem;
}

.cdg-print-btn {
  border: 0;
  background: none;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--cdg-dark);
  padding: .25rem;
}

.cdg-print-btn:hover { color: var(--cdg-link-hover); }

/* accordéon de contenu : titres sombres, marqueur +/− couleur primaire */
.cdg-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--cdg-border); }

.cdg-accordion .accordion-button {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--cdg-dark);
  background: none;
  box-shadow: none;
  padding: 1.5rem 0;
  gap: .75rem;
}

.cdg-accordion .accordion-button::after { display: none; }

.cdg-accordion .accordion-button::before {
  content: "\2212";
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cdg-primary);
  line-height: 1;
}

.cdg-accordion .accordion-button.collapsed::before { content: "+"; }

.cdg-accordion .accordion-body { padding: 0 0 1.75rem 2rem; }

.cdg-accordion .accordion-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cdg-primary);
  margin: 1.75rem 0 .75rem;
}

.cdg-accordion .accordion-body h4 { font-size: 1.0625rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.cdg-accordion .accordion-body a { color: var(--cdg-primary); }
.cdg-accordion .accordion-body a:hover { color: var(--cdg-link-hover); }

/* Barre collante Documents / Outils / FAQ — bas de page, centrée.
   Reprend les pastilles de l'en-tête (.cdg-shortcut : rond dégradé +
   libellé) posées sur un bandeau blanc arrondi. z-index sous celui des
   panneaux Bootstrap (1045) : la barre passe derrière le voile quand un
   panneau s'ouvre. */
.cdg-page-tools {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1035;
  display: flex;
  gap: 2rem;
  padding: .75rem 1.75rem;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.cdg-page-tools .cdg-shortcut {
  border: 0;
  background: none;
  padding: 0;
  line-height: 1.2;
}

/* encadré informatif dans le contenu (ex-« cadre » du site d'origine) */
.cdg-note {
  background: var(--cdg-brand-bg);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}

/* variante encadrée : même boîte que les étapes (fond blanc, filet couleur
   d'accent), pour un cadre isolé qui ne fait pas partie d'une séquence */
.cdg-note-outline {
  background: #fff;
  border: 1px solid var(--cdg-dark);
  border-radius: 10px;
  padding: .875rem 1.125rem;
  font-size: .9375rem;
}

.cdg-note-outline > :last-child { margin-bottom: 0; }

/* Étapes de procédure (conversion des « diagrammes » du site d'origine).
   ATTENTION au choix du composant : .cdg-steps dessine une flèche entre
   les éléments, donc une CHRONOLOGIE. Pour une simple liste d'éléments
   encadrés qui ne s'enchaînent pas (obligations, cas de figure…), utiliser
   .cdg-boxlist — mêmes boîtes, sans flèche — sinon le visuel raconte une
   séquence que le texte ne dit pas. */
.cdg-steps-wrap { margin: 1.5rem 0; }

.cdg-steps,
.cdg-boxlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cdg-steps > li,
.cdg-boxlist > li {
  position: relative;
  background: #fff;
  border: 1px solid var(--cdg-dark);
  border-radius: 10px;
  padding: .875rem 1.125rem;
  margin-bottom: 1.75rem;
  font-size: .9375rem;
}

.cdg-steps > li > :last-child,
.cdg-boxlist > li > :last-child { margin-bottom: 0; }

/* flèche de liaison, dessinée en CSS (hampe + pointe) : indépendante de la
   police, contrairement au caractère « ↓ » utilisé auparavant */
.cdg-steps > li:not(:last-child)::before,
.cdg-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
}

.cdg-steps > li:not(:last-child)::before {
  bottom: -1.375rem;
  width: 2px;
  height: .875rem;
  background: var(--cdg-brand);
  transform: translateX(-50%);
}

.cdg-steps > li:not(:last-child)::after {
  bottom: -1.5rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--cdg-brand);
  border-bottom: 2px solid var(--cdg-brand);
  transform: translateX(-50%) rotate(45deg);
}

/* listes de documents (offcanvas Documents / Outils) */
.cdg-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cdg-doc-list li { border-bottom: 1px solid var(--cdg-border); }

.cdg-doc-list a {
  display: flex;
  gap: .625rem;
  padding: .625rem .25rem;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--cdg-dark);
}

.cdg-doc-list a:hover { color: var(--cdg-link-hover); }
.cdg-doc-list .bi { color: var(--cdg-brand); flex: 0 0 auto; margin-top: .125rem; }

/* ==========================================================================
   Alertes Bootstrap aux couleurs de la charte
   --------------------------------------------------------------------------
   Bootstrap 5.3 pilote ses alertes par variables (--bs-alert-color / -bg /
   -border-color) : on les recalcule à partir de la palette --cdg-*, sans
   toucher au fichier Bootstrap. Le balisage reste standard
   (.alert.alert-success…), ce qui évite d'inventer un vocabulaire de plus.

   Chaque variante dérive d'UNE couleur de la charte (--cdg-alert-base) :
     texte  = 55 % de la couleur sur noir   (le contraste le plus faible des
              huit variantes est 5,38:1, au-dessus des 4,5:1 du RGAA — la
              marge tient si la charte change)
     fond   = 12 % de la couleur sur blanc
     filet  = 40 % de la couleur sur blanc

   NB : à ne pas confondre avec .cdg-alert, qui est l'encadré rédactionnel
   « attention » de la page modèle (bandeau violet plein). Les .alert-*
   servent aux messages système : retour de formulaire, confirmation, erreur.
   ========================================================================== */

.alert {
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-border-radius: 12px;
  font-size: 1rem;
}

.alert-primary   { --cdg-alert-base: var(--cdg-brand); }
.alert-secondary { --cdg-alert-base: var(--cdg-secondary); }
.alert-success   { --cdg-alert-base: var(--cdg-accent); }
.alert-info      { --cdg-alert-base: var(--cdg-info); }
.alert-warning   { --cdg-alert-base: var(--cdg-cta); }
.alert-danger    { --cdg-alert-base: var(--cdg-primary); }
.alert-dark      { --cdg-alert-base: var(--cdg-dark); }
.alert-light     { --cdg-alert-base: var(--cdg-gray); }

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-dark,
.alert-light {
  --bs-alert-color: color-mix(in srgb, var(--cdg-alert-base) 55%, #000);
  --bs-alert-bg: color-mix(in srgb, var(--cdg-alert-base) 12%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--cdg-alert-base) 40%, #fff);
  --bs-alert-link-color: color-mix(in srgb, var(--cdg-alert-base) 55%, #000);
}

.alert .alert-heading {
  font-family: var(--cdg-font-card);
  font-weight: 700;
  font-size: 1.1875rem;
  margin-bottom: .375rem;
  margin-top: 0;
}

/* le lien reste souligné : la couleur seule ne suffit pas à le signaler */
.alert .alert-link { text-decoration: underline; }

/* picto optionnel en tête d'alerte, aligné sur la première ligne */
.alert-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* ==========================================================================
   Contenu de page type (page modèle) : titres, listes, encadrés, formulaires
   --------------------------------------------------------------------------
   Ces règles habillent le contenu rédactionnel HORS accordéon (page à plat,
   avec sommaire d'ancres). La page interne repliable garde ses propres
   règles .cdg-accordion .accordion-body.
   ========================================================================== */

.cdg-content h2 {
  font-family: var(--cdg-font-title);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cdg-brand);
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cdg-border);
}

.cdg-content h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cdg-dark);
  margin: 2rem 0 .75rem;
}

.cdg-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cdg-dark);
  margin: 1.5rem 0 .5rem;
}

.cdg-content h5 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cdg-text-aa);
  margin: 1.25rem 0 .5rem;
}

.cdg-content h6 {
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--cdg-text-aa);
  margin: 1.25rem 0 .5rem;
}

.cdg-content :is(h2, h3, h4, h5, h6) { text-wrap: pretty; }

.cdg-content > p,
.cdg-content > ul,
.cdg-content > ol { margin-bottom: 1rem; }

/* Liens de contenu. On EXCLUT les liens qui sont en réalité des composants
   et portent déjà leur couleur : boutons (.btn), tuiles, liens d'alerte.
   Sans cela, cette règle — plus spécifique que le « color: var(--bs-…) »
   de Bootstrap — repeindrait leur libellé. Tout nouveau composant-lien
   est à ajouter à cette liste. */
.cdg-content a:not(.btn):not(.cdg-profil-tile):not(.alert-link) { color: var(--cdg-brand); }
.cdg-content a:not(.btn):not(.cdg-profil-tile):not(.alert-link):hover { color: var(--cdg-dark); }

/* deux couleurs de mise en avant du texte (demande de la page modèle) */
.cdg-text-accent { color: var(--cdg-cta); font-weight: 600; }
.cdg-text-brand { color: var(--cdg-brand); font-weight: 600; }

/* le titre qui suit l'encadré flottant reprend la pleine largeur */
.clear-both { clear: both; }

/* sommaire d'ancres en tête de page */
.cdg-summary {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-left: 3px solid var(--cdg-brand-bg);
}

.cdg-summary a {
  display: inline-block;
  padding: .375rem 1rem;
  color: var(--cdg-dark);
  text-decoration: none;
}

.cdg-summary a::before {
  content: "\203A";
  color: var(--cdg-primary);
  font-weight: 700;
  margin-right: .5rem;
}

.cdg-summary a:hover { color: var(--cdg-link-hover); }

/* encadré « références » : liste de textes de loi */
.cdg-refs ul { margin: 0; padding-left: 1.25rem; }
.cdg-refs li { margin-bottom: .375rem; }
.cdg-refs li:last-child { margin-bottom: 0; }

/* paragraphe type « attention » : bandeau violet, picto d'alerte orange */
.cdg-alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--cdg-brand);
  color: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}

.cdg-alert p { margin: 0; }
.cdg-alert a { color: #fff; text-decoration: underline; }

/* Un composant à fond coloré doit neutraliser la couleur des éléments qu'il
   contient : sans cette règle, le <code> gardait le rose de Bootstrap sur le
   violet, soit 1,45:1. Pendant de « toute règle de couleur sur a doit
   épargner les composants » — cf. .cdg-table thead code, même motif. */
.cdg-alert code,
.cdg-table.cdg-table-colhead > tbody > tr > th code { color: inherit; }

.cdg-alert-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--cdg-light);
}

/* encadré flottant : le texte courant l'habille (à partir de md) */
.cdg-sidebox { margin: 0 0 1.25rem; }

@media (min-width: 768px) {
  .cdg-sidebox {
    float: right;
    width: 22rem;
    max-width: 45%;
    margin: 0 0 1.25rem 1.5rem;
  }
}

/* métadonnées d'un lien document : format et poids du fichier */
.cdg-doc-meta {
  color: var(--cdg-text-aa);
  font-size: .875em;
  white-space: nowrap;
}

/* liste de liens documents posée dans le fil du texte (pas en panneau) */
.cdg-doc-list-inline li { border-bottom: 0; }

/* display: block et non le flex hérité de .cdg-doc-list. En flex, le
   <span class="cdg-doc-meta"> est un item à part : il ne peut ni se replier
   ni rétrécir (white-space: nowrap) et sortait de l'écran sous 400 px.
   Ici tout est dans le flux du texte, donc les métadonnées passent
   naturellement à la ligne — et l'icône reste collée à son libellé, ce que
   flex-wrap ne permettait pas (il aurait isolé l'icône sur sa ligne). */
.cdg-doc-list-inline a {
  display: block;
  padding: .25rem 0;
  color: var(--cdg-primary);
}
.cdg-doc-list-inline a:hover { color: var(--cdg-link-hover); }

/* Insécable pour ne pas séparer le cadenas de son libellé — mais seulement
   là où la place existe : sous 576 px le libellé complet dépasse la largeur
   de l'écran et se retrouvait rogné. */
@media (min-width: 576px) {
  .cdg-doc-prive { white-space: nowrap; }
}

/* Entêtes de tableau en colonne (première cellule de chaque ligne).
   Double classe : il faut passer devant la règle zébrée
   « .cdg-table > tbody > tr:nth-of-type(even) > * », sinon une ligne paire
   afficherait du texte blanc sur fond lilas. */
.cdg-table.cdg-table-colhead > tbody > tr > th {
  background: var(--cdg-brand);
  color: #fff;
  font-family: var(--cdg-font-card);
  font-weight: 700;
}

/* ── Formulaires ────────────────────────────────────────────────────────
   Contrôles Bootstrap natifs ; on ne retouche que la couleur de focus et
   les intitulés, pour rester dans la charte. */

.cdg-form-legend {
  font-family: var(--cdg-font-condensed);
  font-size: 1.375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--cdg-brand);
  margin: 1.5rem 0 .5rem;
}

.cdg-form-required { color: var(--cdg-text-aa); font-size: .9375rem; }

.cdg-form .form-label,
.cdg-form legend.form-label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .375rem;
}

.cdg-form .form-control:focus,
.cdg-form .form-select:focus {
  border-color: var(--cdg-brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cdg-brand) 25%, transparent);
}

.cdg-form .form-check-input:checked {
  background-color: var(--cdg-brand);
  border-color: var(--cdg-brand);
}

.cdg-form .form-check-input:focus {
  border-color: var(--cdg-brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cdg-brand) 25%, transparent);
}

.cdg-input-xs { width: 5.5rem; }

/* ── Catalogue de composants (page type) ────────────────────────────────
   Habillage des démonstrations et de leur code. Ces classes ne servent que
   sur page-modele.html — aucune page livrée ne les utilise. */

.cdg-demo-boxed {
  border: 1px solid var(--cdg-border);
  border-radius: 12px;
  padding: 1.5rem;
  background: #fff;
}

.cdg-code { margin: .5rem 0 2rem; }

.cdg-code summary {
  cursor: pointer;
  font-family: var(--cdg-font-btn);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--cdg-brand);
}

.cdg-code summary:hover { color: var(--cdg-link-hover); }

.cdg-code pre {
  background: var(--cdg-dark);
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
  font-size: .8125rem;
  overflow-x: auto;
  margin: .5rem 0 0;
}

/* pastilles de couleurs de la charte */
.cdg-swatch {
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--cdg-border);
}

.cdg-swatch-name {
  font-family: var(--cdg-font-ui);
  font-size: .8125rem;
  margin: .375rem 0 0;
}

.cdg-fontlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.cdg-fontlist li { font-size: 1.25rem; margin-bottom: .375rem; }

/* grille des icônes disponibles */
.cdg-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cdg-icon-grid > div {
  text-align: center;
  border: 1px solid var(--cdg-border);
  border-radius: 10px;
  padding: 1rem .5rem;
}

.cdg-icon-grid i,
.cdg-icon-grid svg.cdg-svg-icon {
  font-size: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--cdg-brand);
}

.cdg-icon-grid code {
  display: block;
  font-size: .6875rem;
  margin-top: .5rem;
  color: var(--cdg-dark);
}

/* tableaux de correspondance : beaucoup de code, donc plus compacts */
.cdg-table-map td,
.cdg-table-map th { font-size: .9375rem; }

/* bouton d'aide contextuelle à côté d'un champ */
.cdg-help-btn {
  border: 0;
  background: none;
  color: var(--cdg-cta);
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem;
}

.cdg-help-btn:hover { color: var(--cdg-link-hover); }

/* ==========================================================================
   Page de profil « Je suis… » : titre bicolore, bouton, tuiles de raccourcis
   ========================================================================== */

/* titre en deux couleurs suivi d'un filet bicolore (« dual heading ») */
.cdg-dual-title {
  font-family: var(--cdg-font-body);
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 1.15;
  color: var(--cdg-dark);
  margin: 0;
}

.cdg-dual-title span { color: var(--cdg-brand); }

.cdg-title-divider {
  width: 100px;
  height: 8px;
  margin-top: 5px;
  background: linear-gradient(90deg, var(--cdg-dark) 50%, var(--cdg-brand) 50%);
}

/* largeur de contenu de la maquette (~1120 px) : plus étroite que le
   .container Bootstrap (1320 px en xxl), qui étirerait les tuiles */
.cdg-profil-page { max-width: 1140px; }

/* tuiles de raccourcis : la tuile entière est le lien */
.cdg-profil-grid {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 1.875rem;
}

/* même tuile, en menu de rubrique : libellé seul, donc plus compacte */
.cdg-tilemenu {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

.cdg-tilemenu .cdg-profil-tile { padding: 1.5rem 1.25rem; gap: .75rem; }
.cdg-tilemenu .cdg-profil-label { font-size: 1.25rem; }

.cdg-profil-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding: 2.9375rem 1.875rem 1.875rem;
  background: #fff;
  border: 2px solid var(--cdg-brand-bg);
  border-radius: 30px;
  color: var(--cdg-brand);
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}

/* au survol, le fond prend le lilas et le filet s'efface (bord blanc) */
.cdg-profil-tile:hover,
.cdg-profil-tile:focus-visible {
  background: var(--cdg-brand-bg);
  border-color: #fff;
  color: var(--cdg-brand);
}

.cdg-profil-tile:focus-visible {
  outline: 3px solid var(--cdg-brand);
  outline-offset: 3px;
}

/* icônes SVG de la maquette : la couleur vient du lien (currentColor) */
.cdg-profil-icon {
  width: 55px;
  height: 55px;
  flex: 0 0 auto;
}

.cdg-profil-label {
  font-family: var(--cdg-font-condensed);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* impression : contenu complet visible, habillage masqué */
@media print {
  .cdg-accordion .accordion-collapse { display: block !important; }
  .cdg-accordion .accordion-button::before { display: none; }
  .cdg-topbar, .cdg-nav, .cdg-quick-access, .cdg-sticky-jesuis,
  .cdg-footer-banner, .cdg-backtotop, .cdg-print-btn,
  .cdg-page-tools { display: none !important; }
  /* rien ne colle sur une feuille : l'entête reprend le fil du tableau
     (Chrome la répète de lui-même en haut de chaque page imprimée) */
  .cdg-table thead th { position: static !important; }
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

/* les cibles d'ancres atterrissent sous le menu collant : on réserve sa
   hauteur au défilement */
[id] { scroll-margin-top: 90px; }

/* anneau de focus visible sur les contrôles personnalisés */
.cdg-carousel-arrow:focus-visible,
.cdg-carousel-pause:focus-visible,
.cdg-quick-access:focus-visible,
.cdg-backtotop:focus-visible,
.cdg-shortcut:focus-visible,
.cdg-iconbox:focus-visible,
.cdg-section-link:focus-visible,
.cdg-ticker-link:focus-visible,
.cdg-event-link:focus-visible,
.cdg-indicators [data-bs-target]:focus-visible {
  outline: 3px solid var(--cdg-brand);
  outline-offset: 2px;
}

/* sur fond violet, l'anneau passe en blanc pour rester visible */
.cdg-topbar .nav-link:focus-visible,
.cdg-footer a:focus-visible,
.cdg-jesuis-panel .cdg-iconbox:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* réduction des animations demandée par le système (le JS coupe aussi
   le défilement automatique des carrousels) */
@media (prefers-reduced-motion: reduce) {
  .carousel-item,
  .cdg-iconbox,
  .cdg-iconbox .cdg-iconbox-icon,
  .cdg-shortcut .cdg-shortcut-icon,
  .cdg-quick-access .cdg-quick-access-icon {
    transition: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* L'onglet « Accès rapide » reprend les dimensions de la maquette, qui est
   une maquette de bureau. Sous 768 px il occuperait 28 % de la largeur et
   recouvrirait le texte des cartes : on y garde le format compact. */
@media (max-width: 767.98px) {
  .cdg-quick-access {
    padding: .875rem .75rem;
    font-size: .75rem;
    line-height: 1.3;
  }
  .cdg-quick-access .cdg-quick-access-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto .5rem;
    font-size: 1.125rem;
  }
}

@media (max-width: 991.98px) {
  /* en-tête collant sur mobile (le menu desktop est masqué) */
  .cdg-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
  .cdg-header.is-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }

  .cdg-hero-card { flex-direction: column; }
  .cdg-hero-card .cdg-hero-img { flex-basis: auto; min-height: 200px; }
  .cdg-hero-card .cdg-hero-body { padding: 1.75rem; }
  .cdg-dossiers { padding: 1.75rem 1.5rem 2rem; }
  .cdg-newsletter { padding: 1.75rem 1.5rem; }
}

@media (max-width: 767.98px) {
  .cdg-hero-card .cdg-hero-img { display: none; }
  .cdg-hero-card-lg .cdg-hero-title { font-size: 1.4375rem; }
  .cdg-section-title { font-size: 1.75rem; }
  body { padding-bottom: 72px; } /* place pour le bouton collant « Je suis… » */
  /* la barre Documents / Outils / FAQ se pose juste au-dessus de celui-ci */
  .cdg-page-tools {
    bottom: 84px;
    gap: 1.25rem;
    padding: .625rem 1.25rem;
  }
  .cdg-page-tools .cdg-shortcut-icon { width: 40px; height: 40px; font-size: 1.25rem; }
  /* flèches ramenées dans le viewport (le conteneur touche les bords) */
  .cdg-carousel-arrow.cdg-prev { left: 4px; }
  .cdg-carousel-arrow.cdg-next { right: 4px; }

  /* page de profil : titre et tuiles compactés, 2 colonnes (cf. maquette) */
  .cdg-dual-title { font-size: 2rem; }
  .btn-cdg-profil { font-size: .8125rem; gap: .75rem; padding: .9375rem 1.25rem; }
  .cdg-profil-grid { --bs-gutter-x: .9375rem; --bs-gutter-y: .9375rem; }
  .cdg-profil-tile { padding: .875rem; gap: .5rem; }
  .cdg-profil-icon { width: 40px; height: 40px; }
  .cdg-profil-label { font-size: 1.2rem; }
}

/* En dessous de 576 px (iPhone 12/13/14 = 390 px), le logo à 68 px et les
   quatre boutons de l'en-tête mobile dépassaient la largeur de l'écran :
   le bouton « Ouvrir le menu » se retrouvait hors cadre, donc inatteignable
   (masqué par le garde-fou overflow-x: clip du body). */
@media (max-width: 575.98px) {
  .cdg-header .navbar-brand img { height: 52px; }
  .cdg-header .d-lg-none .btn { padding-left: .25rem; padding-right: .25rem; }

  /* Gouttière g-5 = 3rem, donc marges négatives de 24 px sur la .row, alors
     que le .container n'a que 12 px de padding : le document débordait de
     12 px de chaque côté. Invisible au-dessus de 576 px (le container a
     alors une max-width et de la marge disponible), bloquant en dessous —
     et comme le body est en overflow-x: clip, l'excédent n'était même pas
     atteignable en défilant. On ramène la gouttière horizontale à la valeur
     par défaut ; l'espacement vertical de g-5 est conservé. */
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}