/* =====================================================================
   XYLIS — feuille de style du site vitrine
   ---------------------------------------------------------------------
   Elle se pose PAR-DESSUS Bootstrap 5.3 : Bootstrap fournit la grille,
   la barre de navigation et l'accordéon ; ce fichier fournit l'identité.

   Organisation, dans cet ordre :
     1. Jetons          couleurs, typographie, rayons, ombres, rythme
     2. Socle           réglages de base, titres, liens, accessibilité
     3. En-tête         barre de navigation et méga-menu
     4. Héros           haut de page commun à toutes les rubriques
     5. Sections        conteneur, en-tête de section, fonds
     6. Blocs           cartes, repères, étapes, listes, panneaux, FAQ…
     7. Accueil         pièces qui n'existent que sur la page d'accueil
     8. Appel et pied
     9. Divers          bouton de remontée, impression, préférences

   RÈGLE DE NOMMAGE : toute classe du site commence par « xy- ». Ce qui
   ne commence pas par « xy- » vient de Bootstrap et n'est pas à nous.
   ===================================================================== */

/* =====================================================================
   1. JETONS
   ===================================================================== */

:root {
  /* --- encres et fonds --- */
  --xy-encre:        #071320;
  --xy-encre-2:      #0c2136;
  --xy-encre-3:      #16334d;
  --xy-texte:        #22394c;
  /* #526677 et non #5f7688 : sur le fond crème, ce dernier ne donnait que
     4,43:1, sous le seuil de 4,5:1 exigé pour du texte courant. Le chapeau de
     section, la légende des tableaux et le texte des cartes s'y affichent. */
  --xy-texte-doux:   #526677;
  /* Réservé aux fonds SOMBRES : sur blanc il ne donne que 2,5:1. */
  --xy-texte-clair:  #91a5b5;
  --xy-blanc:        #ffffff;
  --xy-creme:        #f4f8fa;
  --xy-creme-2:      #eaf1f5;
  --xy-ligne:        #dde7ee;
  --xy-ligne-sombre: rgba(255, 255, 255, .12);

  /* --- accents de famille --- */
  --xy-seve:         #14c29b;   /* hébergement */
  /* La déclinaison foncée sert de COULEUR DE TEXTE (liens, surtitres, valeurs
     de repères) autant que de fond au survol. #0d9d7d ne donnait que 3,4:1 sur
     blanc — sous le seuil de lisibilité. #0a7a61 donne 5,3:1 sur blanc, 5,0:1
     sur le fond crème, et reste lisible en blanc dessus (5,3:1). */
  --xy-seve-fonce:   #0a7a61;
  --xy-seve-pale:    #e5f8f3;
  --xy-flux:         #3f8cff;   /* opérateur */
  /* #1a5fc8 et non #1f6ae0 : sur le fond pâle de la famille, les numéros
     d'étape ne donnaient que 4,40:1, sous le seuil. Celui-ci donne 5,25:1
     sur le pâle et 5,88:1 sur blanc. */
  --xy-flux-fonce:   #1a5fc8;
  --xy-flux-pale:    #e8f1ff;

  /* L'accent courant. Il bascule selon la famille de la page : c'est le
     seul endroit où les deux métiers se distinguent visuellement. */
  --xy-accent:       var(--xy-seve);
  --xy-accent-fonce: var(--xy-seve-fonce);
  --xy-accent-pale:  var(--xy-seve-pale);

  /* --- typographie --- */
  --xy-titre-police: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --xy-texte-police: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- géométrie --- */
  --xy-rayon-s:  10px;
  --xy-rayon:    16px;
  --xy-rayon-l:  24px;
  --xy-rayon-xl: 32px;

  /* --- ombres --- */
  --xy-ombre-s: 0 1px 2px rgba(7, 19, 32, .05);
  --xy-ombre:   0 8px 24px -12px rgba(7, 19, 32, .18);
  --xy-ombre-l: 0 24px 60px -28px rgba(7, 19, 32, .35);

  /* --- rythme vertical des sections --- */
  --xy-section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- transitions --- */
  --xy-glisse: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* La famille « opérateur » repeint l'accent. Rien d'autre ne change :
   même grille, même typographie, mêmes blocs. */
.xy-couleur-flux {
  --xy-accent:       var(--xy-flux);
  --xy-accent-fonce: var(--xy-flux-fonce);
  --xy-accent-pale:  var(--xy-flux-pale);
}

/* =====================================================================
   2. SOCLE
   ===================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body.xy-page {
  font-family: var(--xy-texte-police);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--xy-texte);
  background: var(--xy-blanc);
  -webkit-font-smoothing: antialiased;
  /* « clip » et non « hidden » : hidden fait du corps un conteneur de
     défilement, et l'en-tête en position sticky cesse alors de coller dans
     plusieurs navigateurs. clip découpe sans créer ce conteneur. La ligne
     hidden reste en repli pour les navigateurs qui ignorent clip — ils
     retrouvent l'ancien comportement, pas une page cassée. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--xy-titre-police);
  color: var(--xy-encre);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.18;
}

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--xy-accent-fonce);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--xy-glisse);
}
a:hover { color: var(--xy-encre); }

strong { font-weight: 600; color: var(--xy-encre); }

/**
 * ... SAUF sur fond sombre, où --xy-encre est EXACTEMENT la couleur du fond.
 *
 * Un <strong> y devenait invisible — noir sur noir, contraste 1:1. Constaté
 * sur le panneau « Nous joindre autrement » de la page de contact : les
 * libellés « Téléphone : », « Courriel : », « Urgences : » étaient bien là,
 * mais effacés. Et comme ils occupent des largeurs différentes, chaque valeur
 * démarrait à un retrait différent : la colonne paraissait en dents de scie,
 * ce qui se lisait comme un défaut d'alignement alors que c'était un défaut
 * de couleur.
 *
 * Cette famille de défauts ne peut PAS être vue par le contrôle de livraison,
 * qui lit le HTML sans calculer aucune couleur. Elle se voit à l'œil, ou pas
 * du tout.
 */
.xy-panneau strong,
.xy-fond-sombre strong,
.xy-heros strong,
.xy-accueil-heros strong,
.xy-appel strong,
.xy-pied strong,
.xy-metier strong { color: #fff; }

/* Même raison pour un lien : la déclinaison foncée de l'accent ne donne que
   3,5:1 sur l'encre. Sur le panneau sombre, c'est l'accent clair qui porte. */
.xy-panneau a { color: var(--xy-accent); }

::selection { background: var(--xy-accent); color: #fff; }

/* Icônes : elles héritent de la taille et de la couleur du texte. */
.xy-icone {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
}

/* Lien d'évitement, visible seulement au clavier. */
.xy-evitement {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--xy-encre);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--xy-rayon-s) var(--xy-rayon-s);
  text-decoration: none;
  transition: top var(--xy-glisse);
}
.xy-evitement:focus { top: 0; color: #fff; }

/**
 * L'anneau de focus est la seule chose qui dise à quelqu'un naviguant au
 * clavier OÙ IL SE TROUVE. Il était peint avec l'accent clair : 2,3:1 sur
 * blanc, donc invisible sur les dix-sept pages à fond clair. Il prend la
 * déclinaison foncée (5,3:1 sur blanc, 5,0:1 sur crème) et redevient clair
 * là où le fond est sombre.
 */
:focus-visible {
  outline: 3px solid var(--xy-accent-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}
.xy-entete :focus-visible,
.xy-heros :focus-visible,
.xy-appel :focus-visible,
.xy-pied :focus-visible,
.xy-fond-sombre :focus-visible,
.xy-panneau :focus-visible,
.xy-remonter:focus-visible {
  outline-color: var(--xy-accent);
}

/**
 * Bootstrap pose « outline: 0 » sur ces trois éléments, à une spécificité
 * qui bat la règle générale ci-dessus. Sans ces sélecteurs, le bouton du
 * menu, les entrées de menu et les questions de la FAQ n'ont AUCUN
 * indicateur de focus. On vise :focus-visible pour ne pas rallumer l'anneau
 * au clic de souris.
 */
.xy-navbar .navbar-toggler:focus-visible,
.xy-navbar .nav-link:focus-visible,
.xy-faq .accordion-button:focus-visible {
  outline: 3px solid var(--xy-accent);
  outline-offset: -3px;
  box-shadow: none;
}
.xy-faq .accordion-button:focus-visible { outline-color: var(--xy-accent-fonce); }

/* Cible du lien d'évitement : focalisable par le fragment, sans anneau. */
#contenu:focus { outline: none; }

/* --- boutons ------------------------------------------------------- */

.xy-bouton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .975rem;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--xy-glisse), background var(--xy-glisse),
              border-color var(--xy-glisse), color var(--xy-glisse),
              box-shadow var(--xy-glisse);
  white-space: nowrap;
}
.xy-bouton .xy-icone { transition: transform var(--xy-glisse); }
.xy-bouton:hover { transform: translateY(-2px); }
.xy-bouton:hover .xy-icone { transform: translateX(3px); }

.xy-bouton-primaire {
  background: var(--xy-accent);
  color: #04231c;
  box-shadow: 0 10px 24px -12px var(--xy-accent);
}
.xy-couleur-flux .xy-bouton-primaire { color: #041a33; }
.xy-bouton-primaire:hover {
  background: var(--xy-accent-fonce);
  color: #fff;
}

.xy-bouton-clair {
  background: #fff;
  color: var(--xy-encre);
}
.xy-bouton-clair:hover { background: var(--xy-creme); color: var(--xy-encre); }

.xy-bouton-fantome {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.xy-bouton-fantome:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* Sur fond clair, le bouton fantôme s'encre. */
.xy-fond-clair .xy-bouton-fantome,
.xy-fond-creme .xy-bouton-fantome {
  border-color: var(--xy-ligne);
  color: var(--xy-encre);
}
.xy-fond-clair .xy-bouton-fantome:hover,
.xy-fond-creme .xy-bouton-fantome:hover {
  border-color: var(--xy-encre);
  background: transparent;
}

/* =====================================================================
   3. EN-TÊTE
   ===================================================================== */

.xy-entete {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(7, 19, 32, .92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--xy-ligne-sombre);
}

/* L'écart horizontal des entrées passe par la variable de Bootstrap : la
   règle `.navbar-expand-lg .navbar-nav .nav-link` pèse plus lourd que la
   nôtre, et notre padding horizontal était donc ignoré en mode bureau. */
.xy-navbar {
  padding: .65rem 0;
  --bs-navbar-nav-link-padding-x: .95rem;
}

/* --- marque --- */
.xy-marque {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  padding: 0;
}
.xy-marque-signe {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--xy-accent);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--xy-ligne-sombre);
  border-radius: 12px;
  transition: transform var(--xy-glisse);
}
.xy-marque-signe svg { width: 26px; height: 26px; }
.xy-marque:hover .xy-marque-signe { transform: rotate(-6deg) scale(1.04); }
.xy-marque-texte { display: flex; flex-direction: column; line-height: 1.1; }
.xy-marque-nom {
  font-family: var(--xy-titre-police);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.03em;
  color: #fff;
}
.xy-marque-baseline {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--xy-texte-clair);
  font-weight: 500;
}

/* --- liens du menu --- */
.xy-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
  font-size: .975rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  transition: color var(--xy-glisse), background var(--xy-glisse);
}
/* :focus-visible et non :focus — bootstrap.Dropdown.show() donne le focus au
   déclencheur, et un simple survol laissait donc l'entrée allumée en
   permanence après que la souris était partie ailleurs. */
.xy-navbar .nav-link:hover,
.xy-navbar .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }
.xy-navbar .nav-link.active { color: var(--xy-accent); }
.xy-navbar .dropdown-toggle::after { margin-left: .45em; opacity: .6; }

.xy-nav-action { margin-left: .75rem; }
.xy-nav-action .xy-bouton { padding: .6rem 1.2rem; font-size: .925rem; }

.xy-burger {
  border: 1px solid var(--xy-ligne-sombre);
  border-radius: 12px;
  color: #fff;
  padding: .45rem .6rem;
  font-size: 1.4rem;
  line-height: 1;
}
.xy-burger:focus { box-shadow: none; }

/* --- méga-menu --- */

/**
 * ANCRAGE — c'est le point délicat de toute cette feuille, et il coûtait cher.
 *
 * Bootstrap DÉSACTIVE Popper pour les menus déroulants d'une barre de
 * navigation : il pose data-bs-popper="static" et se contente de
 * `.dropdown-menu[data-bs-popper] { top: 100%; left: 0 }`. Le menu est donc
 * collé au bord GAUCHE de son <li>, sans aucun recalage anti-débordement.
 *
 * Comme la barre est alignée à droite, un panneau de 660 px partant du <li>
 * « Opérateur » finissait ~270 px au-delà du bord droit du conteneur. Et
 * comme le corps est en overflow-x: clip, rien ne défilait : la colonne de
 * droite du menu et le lien « Vue d'ensemble » étaient purement COUPÉS, donc
 * incliquables, sur tout écran de moins d'environ 1840 px.
 *
 * On rend donc le <li> non positionné pour que le bloc de référence devienne
 * le conteneur de la barre, et on colle le panneau à SON bord droit.
 * Le sélecteur `.dropdown-menu.xy-megamenu` est nécessaire : à une seule
 * classe, `.xy-megamenu` perdrait contre `.dropdown-menu[data-bs-popper]`.
 */
@media (min-width: 992px) {
  .xy-navbar > .container { position: relative; }
  .xy-navbar .xy-dropdown { position: static; }
  .dropdown-menu.xy-megamenu { left: auto; right: 0; }

  /* L'écart sous la barre passe par la variable de Bootstrap : une
     margin-top posée ici serait battue en spécificité et ignorée. */
  .xy-megamenu { --bs-dropdown-spacer: .6rem; }

  /* Il y avait ici un « pont » invisible au-dessus du panneau, destiné à
     empêcher le mouseleave de se déclencher pendant que la souris
     traversait cet écart. Le menu ne s'ouvre plus au survol : le pont n'a
     plus d'objet, et il capturait les clics dans la bande de .6rem sous la
     barre. Retiré avec le survol, à ne pas remettre sans lui. */
}

.xy-megamenu {
  border: 1px solid var(--xy-ligne);
  border-radius: var(--xy-rayon-l);
  box-shadow: var(--xy-ombre-l);
  padding: 1.15rem;
  background: #fff;
  min-width: min(660px, 92vw);
}
.xy-megamenu-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .5rem .8rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--xy-ligne);
}
.xy-megamenu-titre {
  margin: 0;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--xy-encre);
}
.xy-megamenu-tout {
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--xy-accent-fonce);
}
.xy-megamenu-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem;
}
.xy-megamenu-lien {
  display: flex;
  gap: .8rem;
  padding: .7rem .75rem;
  border-radius: var(--xy-rayon);
  text-decoration: none;
  color: var(--xy-texte);
  transition: background var(--xy-glisse);
}
.xy-megamenu-lien:hover { background: var(--xy-creme); color: var(--xy-texte); }
.xy-megamenu-lien.est-actif { background: var(--xy-accent-pale); }
.xy-megamenu-icone {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--xy-accent-pale);
  color: var(--xy-accent-fonce);
  font-size: 1.15rem;
}
.xy-megamenu-corps { display: flex; flex-direction: column; min-width: 0; }
.xy-megamenu-nom {
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .96rem;
  color: var(--xy-encre);
  line-height: 1.3;
}
.xy-megamenu-desc {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--xy-texte-doux);
  margin-top: .15rem;
}

/* En dessous de lg, le menu se déplie dans le flux, en sombre. */
@media (max-width: 991.98px) {
  .xy-menu {
    padding: 1rem 0 .5rem;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .xy-navbar .nav-link { padding: .6rem .4rem; }
  .xy-megamenu {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--xy-ligne-sombre);
    box-shadow: none;
    min-width: 0;
    padding: .75rem;
    /* margin-top passe par la variable, pour la même raison qu'en bureau. */
    --bs-dropdown-spacer: .25rem;
    margin: .25rem 0 .75rem;
  }
  .xy-megamenu-entete { border-bottom-color: var(--xy-ligne-sombre); padding-inline: .25rem; }
  .xy-megamenu-titre { color: #fff; }
  .xy-megamenu-grille { grid-template-columns: 1fr; }
  .xy-megamenu-lien { color: rgba(255, 255, 255, .8); }
  .xy-megamenu-lien:hover,
  .xy-megamenu-lien.est-actif { background: rgba(255, 255, 255, .08); color: #fff; }
  .xy-megamenu-nom { color: #fff; }
  .xy-megamenu-desc { color: var(--xy-texte-clair); }
  .xy-megamenu-icone { background: rgba(255, 255, 255, .08); color: var(--xy-accent); }
  .xy-nav-action { margin: .75rem 0 .25rem; }
  .xy-nav-action .xy-bouton { width: 100%; justify-content: center; }
}

/* =====================================================================
   4. HÉROS
   ===================================================================== */

.xy-heros {
  position: relative;
  background: var(--xy-encre);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.xy-heros-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70ch 40ch at 78% -10%, color-mix(in srgb, var(--xy-accent) 26%, transparent), transparent 65%),
    radial-gradient(60ch 40ch at 8% 110%, color-mix(in srgb, var(--xy-flux) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--xy-encre-2), var(--xy-encre));
}
.xy-heros-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 100%);
}

/* --- fil d'Ariane --- */
.xy-fil { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.xy-fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
}
.xy-fil li { display: flex; align-items: center; gap: .5rem; }
.xy-fil li + li::before {
  content: "/";
  color: rgba(255, 255, 255, .3);
}
.xy-fil a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.xy-fil a:hover { color: #fff; text-decoration: underline; }
.xy-fil span { color: var(--xy-accent); font-weight: 500; }

.xy-heros-surtitre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--xy-accent);
  margin-bottom: 1rem;
}
.xy-heros-surtitre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--xy-accent);
  border-radius: 2px;
}

.xy-heros-titre {
  color: #fff;
  font-size: clamp(2.15rem, 5.2vw, 3.5rem);
  font-weight: 600;
  margin-bottom: 1.1rem;
  max-width: 20ch;
}
.xy-heros-accroche {
  font-size: clamp(1.06rem, 1.9vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  max-width: 62ch;
  margin-bottom: 1.75rem;
}

.xy-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.9rem;
}
.xy-pastilles li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--xy-ligne-sombre);
  font-size: .85rem;
  color: rgba(255, 255, 255, .88);
}
.xy-pastilles .xy-icone { color: var(--xy-accent); font-size: .95rem; }

.xy-heros-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.xy-heros-embleme {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 260px;
  margin-left: auto;
  border-radius: var(--xy-rayon-xl);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--xy-ligne-sombre);
  color: var(--xy-accent);
  font-size: 6.5rem;
  box-shadow: inset 0 0 90px -30px var(--xy-accent);
}

/* --- sommaire de page --- */
.xy-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--xy-ligne-sombre);
}
.xy-sommaire a {
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--xy-glisse);
}
.xy-sommaire a:hover {
  color: #fff;
  border-color: var(--xy-ligne-sombre);
  background: rgba(255, 255, 255, .06);
}
/* Entrée dont la section est à l'écran — posée par xylis.js. */
.xy-sommaire a.est-courant {
  color: var(--xy-accent);
  border-color: color-mix(in srgb, var(--xy-accent) 45%, transparent);
  background: rgba(255, 255, 255, .05);
}

/* =====================================================================
   5. SECTIONS
   ===================================================================== */

.xy-section { padding: var(--xy-section-y) 0; }

/* Bandeau serré, pour la ligne de repères qui suit immédiatement le héros. */
.xy-section-mince { padding: clamp(2rem, 4vw, 3rem) 0; }

.xy-fond-clair  { background: var(--xy-blanc); }
.xy-fond-creme  { background: var(--xy-creme); }
.xy-fond-sombre { background: var(--xy-encre); color: rgba(255, 255, 255, .8); }
.xy-fond-accent { background: var(--xy-accent-pale); }

.xy-fond-sombre h2,
.xy-fond-sombre h3 { color: #fff; }
.xy-fond-sombre .xy-chapeau { color: rgba(255, 255, 255, .72); }

.xy-entete-section { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.xy-entete-centre { margin-inline: auto; text-align: center; }

.xy-surtitre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--xy-accent-fonce);
  margin-bottom: .85rem;
}
.xy-surtitre::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--xy-accent);
  border-radius: 2px;
}
.xy-entete-centre .xy-surtitre::before { display: none; }
.xy-surtitre-clair { color: var(--xy-accent); }

.xy-titre-section {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 1rem;
}
.xy-chapeau {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--xy-texte-doux);
  margin-bottom: 0;
}

.xy-colonne-texte { max-width: 68ch; }

/* --- prose : le texte long des rubriques --- */
.xy-prose h3 {
  font-size: 1.28rem;
  margin: 2rem 0 .75rem;
}
.xy-prose h3:first-child { margin-top: 0; }
.xy-prose p { color: var(--xy-texte); }
.xy-prose ul { padding-left: 1.15rem; margin-bottom: 1.1rem; }
.xy-prose li { margin-bottom: .4rem; }
.xy-prose > *:last-child { margin-bottom: 0; }

/* =====================================================================
   6. BLOCS
   ===================================================================== */

/* --- cartes --- */
.xy-carte {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--xy-ligne);
  border-radius: var(--xy-rayon-l);
  box-shadow: var(--xy-ombre-s);
  text-decoration: none;
  position: relative;
  transition: transform var(--xy-glisse), box-shadow var(--xy-glisse),
              border-color var(--xy-glisse);
}
.xy-fond-creme .xy-carte { border-color: transparent; }
.xy-fond-sombre .xy-carte {
  background: rgba(255, 255, 255, .04);
  border-color: var(--xy-ligne-sombre);
  box-shadow: none;
}
.xy-carte-lien:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--xy-accent) 45%, transparent);
  box-shadow: var(--xy-ombre);
}
.xy-carte-icone {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--xy-accent-pale);
  color: var(--xy-accent-fonce);
  font-size: 1.35rem;
  margin-bottom: .35rem;
}
.xy-fond-sombre .xy-carte-icone {
  background: rgba(255, 255, 255, .07);
  color: var(--xy-accent);
}
.xy-carte-titre {
  font-size: 1.15rem;
  margin: 0;
  color: var(--xy-encre);
}
.xy-fond-sombre .xy-carte-titre { color: #fff; }
.xy-carte-texte {
  font-size: .95rem;
  line-height: 1.62;
  color: var(--xy-texte-doux);
  margin: 0;
}
.xy-carte-fleche {
  margin-top: auto;
  padding-top: .9rem;
  color: var(--xy-accent-fonce);
  font-size: 1.1rem;
  transition: transform var(--xy-glisse);
}
.xy-carte-lien:hover .xy-carte-fleche { transform: translateX(5px); }

/* --- repères chiffrés --- */
.xy-reperes { margin: 0; }
.xy-repere {
  height: 100%;
  padding: 1.35rem 1.4rem;
  border-radius: var(--xy-rayon);
  background: #fff;
  border: 1px solid var(--xy-ligne);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.xy-fond-creme .xy-repere { border-color: transparent; }
.xy-fond-sombre .xy-repere {
  background: rgba(255, 255, 255, .04);
  border-color: var(--xy-ligne-sombre);
}
.xy-repere-valeur {
  font-family: var(--xy-titre-police);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--xy-accent-fonce);
  line-height: 1.1;
  /* Les repères sont des phrases courtes, pas des nombres : à 360 px, un mot
     comme « Rétablissement » est plus large que sa carte. La page est en
     lang="fr", la césure automatique est donc correcte ; la coupure brutale
     n'est qu'un filet de sécurité si elle n'est pas disponible. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.xy-fond-sombre .xy-repere-valeur { color: var(--xy-accent); }
.xy-repere-label {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--xy-texte-doux);
}
.xy-fond-sombre .xy-repere-label { color: var(--xy-texte-clair); }

/* --- étapes --- */
.xy-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: xy-etape;
}
.xy-etape {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--xy-ligne);
  position: relative;
}
.xy-etape:first-child { border-top: 0; padding-top: 0; }
.xy-fond-sombre .xy-etape { border-top-color: var(--xy-ligne-sombre); }
.xy-etape-numero {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--xy-accent-pale);
  color: var(--xy-accent-fonce);
  font-family: var(--xy-titre-police);
  font-weight: 700;
  font-size: 1.05rem;
}
.xy-fond-sombre .xy-etape-numero {
  background: rgba(255, 255, 255, .07);
  color: var(--xy-accent);
}
.xy-etape-titre { font-size: 1.12rem; margin: .35rem 0 .4rem; }
.xy-etape-texte {
  margin: 0;
  color: var(--xy-texte-doux);
  font-size: .97rem;
  line-height: 1.65;
}
.xy-fond-sombre .xy-etape-texte { color: var(--xy-texte-clair); }

@media (min-width: 768px) {
  .xy-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .xy-etape:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* --- listes à coches --- */
.xy-liste { list-style: none; margin: 0; padding: 0; }
.xy-liste-item {
  display: flex;
  gap: .8rem;
  padding: .55rem 0;
  align-items: flex-start;
}
.xy-liste-puce {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: .18rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--xy-accent-pale);
  color: var(--xy-accent-fonce);
  font-size: .75rem;
}
.xy-fond-sombre .xy-liste-puce {
  background: rgba(255, 255, 255, .08);
  color: var(--xy-accent);
}
.xy-liste-corps { font-size: .99rem; line-height: 1.6; }
.xy-liste-corps strong { display: inline; }

@media (min-width: 768px) {
  .xy-liste-double {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
  }
}

/* --- duo texte + panneau --- */
.xy-panneau {
  padding: 1.9rem;
  border-radius: var(--xy-rayon-l);
  background: var(--xy-encre);
  color: rgba(255, 255, 255, .82);
  box-shadow: var(--xy-ombre);
  position: relative;
  overflow: hidden;
}
.xy-panneau::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--xy-accent) 34%, transparent), transparent 68%);
  pointer-events: none;
}
.xy-panneau-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: var(--xy-accent);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.xy-panneau-titre { color: #fff; font-size: 1.18rem; margin-bottom: 1rem; }
.xy-panneau-liste { list-style: none; margin: 0; padding: 0; }
.xy-panneau-liste li {
  position: relative;
  padding: .55rem 0 .55rem 1.4rem;
  font-size: .94rem;
  line-height: 1.6;
  border-top: 1px solid var(--xy-ligne-sombre);
}
.xy-panneau-liste li:first-child { border-top: 0; }
.xy-panneau-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xy-accent);
}

/* --- tableau --- */
.xy-tableau-boite {
  border: 1px solid var(--xy-ligne);
  border-radius: var(--xy-rayon);
  background: #fff;
  /* PAS « overflow: hidden » : cette boîte porte aussi .table-responsive de
     Bootstrap, et hidden en annulait le overflow-x: auto. Sur téléphone, la
     dernière colonne des tableaux comparatifs était alors coupée, sans aucun
     moyen d'y accéder. auto/hidden découpe toujours aux angles arrondis. */
  overflow-x: auto;
  overflow-y: hidden;
}
.xy-tableau { margin: 0; font-size: .95rem; }
.xy-tableau caption {
  caption-side: bottom;
  padding: .85rem 1.25rem;
  font-size: .84rem;
  color: var(--xy-texte-doux);
  border-top: 1px solid var(--xy-ligne);
}
.xy-tableau thead th {
  background: var(--xy-creme);
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--xy-texte-doux);
  border-bottom: 1px solid var(--xy-ligne);
  padding: .9rem 1.25rem;
  white-space: nowrap;
}
.xy-tableau tbody th,
.xy-tableau tbody td {
  padding: .95rem 1.25rem;
  border-bottom: 1px solid var(--xy-ligne);
  vertical-align: top;
}
.xy-tableau tbody th { font-weight: 600; color: var(--xy-encre); }
.xy-tableau tbody tr:last-child th,
.xy-tableau tbody tr:last-child td { border-bottom: 0; }

/* --- FAQ --- */
.xy-faq { --bs-accordion-border-color: transparent; }
.xy-faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--xy-ligne);
  border-radius: 0 !important;
}
.xy-faq .accordion-button {
  background: transparent;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--xy-encre);
  box-shadow: none;
}
.xy-faq .accordion-button:not(.collapsed) { color: var(--xy-accent-fonce); }
.xy-faq .accordion-button::after {
  position: absolute;
  right: .35rem;
  background-size: 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
}
.xy-faq .accordion-button:focus { box-shadow: none; }
.xy-faq .accordion-body {
  padding: 0 2.5rem 1.5rem 0;
  color: var(--xy-texte-doux);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- encart --- */
.xy-encart {
  display: flex;
  gap: 1.15rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--xy-rayon);
  background: var(--xy-accent-pale);
  border-left: 4px solid var(--xy-accent);
  margin-top: 2rem;
}
.xy-encart-icone {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--xy-accent-fonce);
  line-height: 1;
  margin-top: .15rem;
}
.xy-encart-titre { font-size: 1.06rem; margin-bottom: .4rem; }
.xy-encart-texte {
  margin: 0;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--xy-texte);
}

/* --- formulaire (page de contact) ---------------------------------- */

.xy-formulaire { margin-top: .5rem; }

.xy-label {
  display: block;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .9rem;
  color: var(--xy-encre);
  margin-bottom: .4rem;
}
.xy-label abbr {
  color: var(--xy-accent-fonce);
  text-decoration: none;
  border: 0;
}

.xy-champ {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--xy-texte);
  background: #fff;
  border: 1.5px solid var(--xy-ligne);
  border-radius: var(--xy-rayon-s);
  transition: border-color var(--xy-glisse), box-shadow var(--xy-glisse);
}
.xy-champ:focus {
  border-color: var(--xy-accent-fonce);
  box-shadow: 0 0 0 4px var(--xy-accent-pale);
}
/* Le halo pâle n'est pas un indicateur de focus : sur blanc il tourne autour
   de 1,2:1. L'anneau reste donc, en plus du halo, et non à sa place. */
.xy-champ:focus-visible {
  outline: 3px solid var(--xy-accent-fonce);
  outline-offset: 2px;
}
.xy-champ::placeholder { color: var(--xy-texte-doux); opacity: 1; }
.xy-champ-long { resize: vertical; min-height: 10rem; line-height: 1.65; }
.xy-champ.est-invalide { border-color: #d4483b; }
.xy-champ.est-invalide:focus { box-shadow: 0 0 0 4px rgba(212, 72, 59, .14); }

.xy-erreur {
  margin: .4rem 0 0;
  font-size: .875rem;
  color: #b93a2e;
}
.xy-mention {
  margin: 1rem 0 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--xy-texte-doux);
  max-width: 56ch;
}

/* Le piège à robots doit être invisible sans être « display:none » :
   certains robots ignorent précisément les champs masqués ainsi. */
.xy-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- plan du site --------------------------------------------------- */

.xy-plan-groupe { height: 100%; }
.xy-plan-titre {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.15rem;
  padding-bottom: .8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--xy-ligne);
}
.xy-plan-titre a { color: var(--xy-encre); text-decoration: none; }
.xy-plan-titre a:hover { color: var(--xy-accent-fonce); }
.xy-plan-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--xy-accent-pale);
  color: var(--xy-accent-fonce);
  font-size: 1.05rem;
}
.xy-plan-liste { list-style: none; margin: 0; padding: 0; }
.xy-plan-liste li { padding: .6rem 0; border-top: 1px solid var(--xy-ligne); }
.xy-plan-liste li:first-child { border-top: 0; }
.xy-plan-liste a {
  display: block;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  color: var(--xy-encre);
}
.xy-plan-liste a:hover { color: var(--xy-accent-fonce); }
.xy-plan-liste span {
  display: block;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--xy-texte-doux);
  margin-top: .15rem;
}

/* --- mentions légales ------------------------------------------------ */

.xy-legal {
  margin: 0 0 2rem;
  border: 1px solid var(--xy-ligne);
  border-radius: var(--xy-rayon);
  overflow: hidden;
}
.xy-legal-ligne {
  display: grid;
  gap: .1rem 1.5rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--xy-ligne);
}
.xy-legal-ligne:first-child { border-top: 0; }
@media (min-width: 576px) {
  .xy-legal-ligne { grid-template-columns: minmax(0, 15rem) 1fr; align-items: baseline; }
}
.xy-legal dt {
  font-family: var(--xy-titre-police);
  font-weight: 600;
  font-size: .92rem;
  color: var(--xy-encre);
}
.xy-legal dd { margin: 0; font-size: .96rem; }
.xy-legal-vide {
  color: var(--xy-texte-doux);
  font-style: italic;
}

.xy-prose h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--xy-ligne);
}
.xy-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- messages d'état ------------------------------------------------ */

.xy-message {
  display: flex;
  gap: 1.15rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--xy-rayon);
  border-left: 4px solid var(--xy-accent);
  background: var(--xy-accent-pale);
  margin-bottom: 1.5rem;
}
.xy-message-icone { font-size: 1.5rem; line-height: 1; margin-top: .15rem; color: var(--xy-accent-fonce); }
.xy-message-titre { font-size: 1.2rem; margin-bottom: .5rem; }
.xy-message p { font-size: .97rem; }
.xy-message code {
  background: rgba(7, 19, 32, .07);
  padding: .1rem .35rem;
  border-radius: 5px;
  font-size: .9em;
  color: var(--xy-encre);
}
.xy-message-attente { background: var(--xy-creme-2); border-left-color: var(--xy-texte-clair); }
.xy-message-attente .xy-message-icone { color: var(--xy-texte-doux); }
.xy-message-erreur { background: #fdecea; border-left-color: #d4483b; }
.xy-message-erreur .xy-message-icone { color: #b93a2e; }

/* =====================================================================
   7. ACCUEIL
   ===================================================================== */

.xy-accueil-heros {
  position: relative;
  background: var(--xy-encre);
  color: #fff;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.xy-accueil-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80ch 46ch at 82% -6%, color-mix(in srgb, var(--xy-seve) 30%, transparent), transparent 62%),
    radial-gradient(70ch 46ch at 4% 106%, color-mix(in srgb, var(--xy-flux) 26%, transparent), transparent 60%),
    linear-gradient(170deg, #0d2337, var(--xy-encre) 60%);
}
.xy-accueil-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 25%, #000 15%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 25%, #000 15%, transparent 100%);
}

.xy-accueil-etiquette {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--xy-ligne-sombre);
  font-size: .84rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 1.5rem;
}
.xy-accueil-etiquette b {
  background: var(--xy-seve);
  color: #04231c;
  border-radius: 999px;
  padding: .12rem .6rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Le titre porte désormais des termes métier explicites — donc une phrase plus
   longue que l'accroche imagée qu'il remplace. À 17ch et 4,15rem, elle tombait
   sur cinq lignes et poussait l'appel à l'action hors du premier écran. */
.xy-accueil-titre {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 1.35rem;
  max-width: 22ch;
}
.xy-accueil-titre em {
  font-style: normal;
  background: linear-gradient(100deg, var(--xy-seve), var(--xy-flux));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.xy-accueil-accroche {
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .78);
  max-width: 58ch;
  margin-bottom: 2rem;
}
.xy-accueil-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.5rem; }

/* Les deux métiers, côte à côte, dès le héros. */
.xy-metiers { display: grid; gap: 1rem; }
@media (min-width: 768px) { .xy-metiers { grid-template-columns: 1fr 1fr; } }
.xy-metier {
  display: block;
  padding: 1.6rem;
  border-radius: var(--xy-rayon-l);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--xy-ligne-sombre);
  text-decoration: none;
  color: inherit;
  transition: transform var(--xy-glisse), background var(--xy-glisse),
              border-color var(--xy-glisse);
}
.xy-metier:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .075);
  color: inherit;
}
.xy-metier-1:hover { border-color: color-mix(in srgb, var(--xy-seve) 55%, transparent); }
.xy-metier-2:hover { border-color: color-mix(in srgb, var(--xy-flux) 55%, transparent); }
.xy-metier-entete { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.xy-metier-icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .08);
  font-size: 1.3rem;
}
.xy-metier-1 .xy-metier-icone { color: var(--xy-seve); }
.xy-metier-2 .xy-metier-icone { color: var(--xy-flux); }
/* C'est un <span>, pas un titre : il vit à l'intérieur d'un lien, et un
   véritable h3 y serait discutable. Il porte donc lui-même la typographie
   des titres, sans emprunter la classe utilitaire .h3 de Bootstrap — dont
   la taille entrerait en conflit avec la nôtre à spécificité égale. */
.xy-metier-titre {
  color: #fff;
  font-family: var(--xy-titre-police);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-size: 1.25rem;
  margin: 0;
}
.xy-metier-texte {
  /* C'est un <span> à l'intérieur d'un <a> : sans display:block, sa
     margin-bottom verticale est ignorée et le texte colle aux pastilles. */
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.xy-metier-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.xy-metier-liste li {
  font-size: .78rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .78);
}

/* Bandeau de confiance sous le héros. */
.xy-bandeau {
  background: var(--xy-encre-2);
  border-top: 1px solid var(--xy-ligne-sombre);
  padding: 1.5rem 0;
}
.xy-bandeau-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.xy-bandeau-liste li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
}
.xy-bandeau-liste .xy-icone { color: var(--xy-seve); font-size: 1.05rem; }

/* Grille de toutes les rubriques. */
.xy-rubrique-groupe + .xy-rubrique-groupe { margin-top: clamp(2.5rem, 5vw, 4rem); }
.xy-rubrique-groupe-titre {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--xy-ligne);
}
.xy-rubrique-groupe-titre .xy-icone { color: var(--xy-accent-fonce); }
.xy-groupe-flux { --xy-accent: var(--xy-flux); --xy-accent-fonce: var(--xy-flux-fonce); --xy-accent-pale: var(--xy-flux-pale); }
.xy-groupe-seve { --xy-accent: var(--xy-seve); --xy-accent-fonce: var(--xy-seve-fonce); --xy-accent-pale: var(--xy-seve-pale); }

/* =====================================================================
   8. APPEL À L'ACTION ET PIED
   ===================================================================== */

.xy-appel {
  position: relative;
  background: var(--xy-encre);
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.xy-appel-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60ch 34ch at 88% 8%, color-mix(in srgb, var(--xy-accent) 30%, transparent), transparent 62%),
    linear-gradient(180deg, var(--xy-encre-2), var(--xy-encre));
}
.xy-appel-titre {
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  margin-bottom: 1rem;
  max-width: 26ch;
}
.xy-appel-texte {
  color: rgba(255, 255, 255, .74);
  max-width: 60ch;
  margin: 0;
  font-size: 1.02rem;
}
.xy-appel-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 992px) { .xy-appel-actions { align-items: flex-end; text-align: right; } }
.xy-appel-tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--xy-titre-police);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.xy-appel-tel:hover { color: var(--xy-accent); }
.xy-appel-tel .xy-icone { color: var(--xy-accent); }
.xy-appel-horaires {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .88rem;
  color: var(--xy-texte-clair);
}

.xy-pied {
  background: #050e18;
  color: rgba(255, 255, 255, .68);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
  font-size: .94rem;
}
.xy-pied-haut { padding-bottom: 2.5rem; }
.xy-marque-pied { margin-bottom: 1.1rem; }
.xy-pied-promesse {
  max-width: 40ch;
  color: var(--xy-texte-clair);
  font-size: .94rem;
  margin-bottom: 1.25rem;
}
.xy-pied-coordonnees {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.xy-pied-coordonnees li { display: flex; align-items: center; gap: .6rem; }
.xy-pied-coordonnees .xy-icone { color: var(--xy-seve); }
.xy-pied-coordonnees a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.xy-pied-coordonnees a:hover { color: var(--xy-seve); }

.xy-pied-reseaux { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.xy-pied-reseaux a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--xy-ligne-sombre);
  color: rgba(255, 255, 255, .75);
  font-size: 1.05rem;
  transition: all var(--xy-glisse);
}
.xy-pied-reseaux a:hover {
  background: var(--xy-seve);
  border-color: var(--xy-seve);
  color: #04231c;
}

.xy-pied-titre {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 1rem;
}
.xy-pied-titre a { color: inherit; text-decoration: none; }
.xy-pied-titre a:hover { color: var(--xy-seve); }
.xy-pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.xy-pied-liste a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: .92rem;
}
.xy-pied-liste a:hover { color: #fff; }

.xy-pied-bas {
  border-top: 1px solid var(--xy-ligne-sombre);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  font-size: .86rem;
  color: var(--xy-texte-clair);
}
.xy-pied-bas p { margin: 0; }
.xy-pied-legal { display: flex; gap: .65rem; }
.xy-pied-legal a { color: var(--xy-texte-clair); text-decoration: none; }
.xy-pied-legal a:hover { color: #fff; }

/* =====================================================================
   9. DIVERS
   ===================================================================== */

.xy-remonter {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--xy-encre);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--xy-ombre);
  z-index: 1020;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--xy-glisse);
}
.xy-remonter.est-visible { opacity: 1; visibility: visible; transform: none; }
.xy-remonter:hover { background: var(--xy-accent); color: #04231c; }

/* Apparition douce des sections au défilement, pilotée par xylis.js. */
.xy-apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.xy-apparait.est-apparu { opacity: 1; transform: none; }

/* Respecter le réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .xy-apparait { opacity: 1; transform: none; }
}

/* Impression : on garde le texte, on jette le décor. */
@media print {
  .xy-entete, .xy-appel, .xy-remonter, .xy-liees, .xy-sommaire,
  .xy-heros-embleme, .xy-heros-actions { display: none !important; }
  .xy-heros, .xy-pied { background: #fff !important; color: #000 !important; }
  .xy-heros-titre, .xy-heros-accroche, .xy-fil a, .xy-fil span { color: #000 !important; }
  .xy-section { padding: 1.5rem 0; }
  body.xy-page { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}