/* CID : mobile d'abord, puis 700 px, 1100 px et 1440 px. Aucun style dans le HTML (CSP : style-src 'self').
   Inspiration : typographie aérée et sections en récit (style Apple), recherche en pilule et cartes d'annonces (style Airbnb).
   Animations : transform et opacity seulement ; tout est coupé sous prefers-reduced-motion. */
:root {
  color-scheme: light dark;
  --primaire: #0369A1;
  --sur-primaire: #FFFFFF;  /* texte sur fond primaire */
  --accent: #16A34A;        /* texte #000 dessus */
  --fond: #FFFFFF;
  --fond-alt: #F5F5F7;      /* sections en alternance */
  --texte: #222222;
  --carte: #FFFFFF;
  --carte-rgb: 255 255 255;
  --attenue: #F2F2F2;
  --texte-attenue: #6A6A6A; /* 5.4:1 sur blanc */
  --bordure: #DDDDDD;       /* séparateurs décoratifs */
  --bordure-ui: #767676;    /* contour des champs (3:1 minimum) */
  --alerte: #B91C1C;
  --urgence-fond: #B91C1C;
  --urgence-texte: #FFFFFF;
  --focus: #0369A1;
  --voile: rgb(4 22 36 / 0.62);
  --hero-fond: #0C4A6E;
  --ombre: 0 2px 8px rgb(0 0 0 / 0.08);
  --ombre-pilule: 0 3px 12px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.08);
  --ombre-haute: 0 10px 28px rgb(0 0 0 / 0.16);

  --police: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Échelle typographique fluide */
  --t-petit: 0.875rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-chiffre: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  /* Espacements */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e6: 1.5rem; --e8: 2rem; --e12: 3rem; --e16: 4rem;
  --rayon: 12px;
  --rayon-carte: 16px;
  --courbe: cubic-bezier(0.28, 0.11, 0.32, 1);
  --transition: 240ms var(--courbe);
  --h-entete: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primaire: #7DD3FC;
    --sur-primaire: #082F49;
    --fond: #0B1722;
    --fond-alt: #0F1E2D;
    --texte: #E6F1FA;
    --carte: #12263A;
    --carte-rgb: 18 38 58;
    --attenue: #1B3550;
    --texte-attenue: #B4C7D8;
    --bordure: #2C4A66;
    --bordure-ui: #7C93A8;
    --alerte: #FCA5A5;
    --urgence-fond: #FCA5A5;
    --urgence-texte: #450A0A;
    --focus: #7DD3FC;
    --ombre: 0 2px 8px rgb(0 0 0 / 0.4);
    --ombre-pilule: 0 3px 12px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.4);
    --ombre-haute: 0 10px 28px rgb(0 0 0 / 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.47;
  color: var(--texte);
  background: var(--fond);
}
/* Panneau de filtres ouvert : la page derrière ne défile plus */
body:has(dialog[open]) { overflow: hidden; }

img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--primaire); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -0.02em; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.conteneur { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--e4); }
.section { padding-top: var(--e12); padding-bottom: var(--e16); scroll-margin-top: var(--h-entete); }
.section__titre { margin-bottom: var(--e6); font-size: var(--t-h2); font-weight: 700; line-height: 1.1; text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icônes du sprite icones.svg : couleur et trait hérités */
.icone { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--petite { width: 1.125rem; height: 1.125rem; }

/* Lien d'évitement : visible seulement au focus */
.evitement {
  position: absolute; left: var(--e2); top: -4rem; z-index: 30;
  padding: var(--e3) var(--e4); min-height: 44px;
  background: var(--accent); color: #000; font-weight: 700; border-radius: 999px;
}
.evitement:focus { top: var(--e2); }

/* En-tête collant, hauteur constante (pas de décalage) ; translucide une fois le héros passé */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: var(--carte); border-bottom: 1px solid var(--bordure);
}
.entete--compact {
  background: rgb(var(--carte-rgb) / 0.97);
  box-shadow: var(--ombre);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .entete--compact {
    background: rgb(var(--carte-rgb) / 0.92); /* 0.88 donnait 4.49:1 au pire fond, sous le seuil 4.5 */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: var(--h-entete); }
.entete__nom { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--primaire); }
.entete__detail { display: none; font-weight: 400; font-size: var(--t-petit); letter-spacing: 0; color: var(--texte-attenue); }

/* Sélecteur de langue : pilule segmentée */
.langues { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--bordure-ui); border-radius: 999px; }
.langues__bouton {
  min-width: 44px; min-height: 44px; padding: 0 var(--e3);
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--primaire); background: transparent;
  border: 0; border-radius: 999px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.langues__bouton[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); }

/* Héros : titre centré, une phrase, deux actions. Fond de couleur en repli si l'image manque */
.heros {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  /* 2/3 de l'écran (avant : plein écran, jugé trop haut) */
  min-height: 21.75rem;
  min-height: clamp(21.75rem, calc((100svh - var(--h-entete)) * 2 / 3), 34.75rem);
  background: var(--hero-fond); color: #fff; text-align: center;
}
.heros__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  animation: zoom 20s var(--courbe) forwards; /* zoom très léger, une seule fois */
}
.heros::before { content: ""; position: absolute; inset: 0; background: var(--voile); z-index: 1; }
.heros__texte { position: relative; z-index: 2; padding-top: var(--e12); padding-bottom: var(--e12); }
.heros h1 { max-width: 22ch; margin: 0 auto var(--e4); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); /* plus petit que --t-h1 : le texte doit tenir dans le bandeau à 2/3 sans être rogné */ font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.heros p { max-width: 34rem; margin: 0 auto; font-size: var(--t-lead); line-height: 1.35; }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e3) var(--e6); margin-top: var(--e6); }
/* Apparition en cascade du texte (sans JS : l'animation se termine toujours visible) */
.heros__texte > * { animation: apparition 700ms var(--courbe) backwards; }
.heros__texte > :nth-child(2) { animation-delay: 120ms; }
.heros__texte > :nth-child(3) { animation-delay: 240ms; }

/* Lien secondaire avec chevron (le chevron glisse au survol) */
.lien-chevron {
  display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px;
  font-size: 1.1875rem; font-weight: 500; color: #fff; text-decoration: none;
}
.lien-chevron:hover, .lien-chevron:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.lien-chevron .icone { transition: transform var(--transition); }
.lien-chevron:hover .icone { transform: translateX(3px); }

/* Chiffres clés : bande gris très clair */
.chiffres { background: var(--fond-alt); }
.chiffres__liste {
  list-style: none; margin: 0; padding: var(--e12) 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e8) var(--e4); text-align: center;
}
.chiffre { display: flex; flex-direction: column; align-items: center; }
.chiffre__nombre { font-size: var(--t-chiffre); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--primaire); font-variant-numeric: tabular-nums; }
.chiffre__libelle { font-weight: 500; color: var(--texte-attenue); }
/* Page des bourses : la liste suit directement la bande des chiffres (.conteneur écrase le padding de .section) */
.chiffres + .section, .heros + .section { padding-top: var(--e12); padding-bottom: var(--e16); } /* bandeau sans chiffres (Actualités) */

/* Recherche : sans JS ou sur petit écran, champs empilés ; en pilule segmentée dès 700 px */
.recherche { margin-bottom: var(--e6); scroll-margin-top: calc(var(--h-entete) + var(--e4)); }
.filtres {
  display: grid; gap: var(--e3); padding: var(--e4);
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre);
}
.champ { position: relative; display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.champ label { font-weight: 600; font-size: 0.8125rem; }
.champ select {
  width: 100%; min-height: 48px; padding: 0 var(--e2); text-overflow: ellipsis;
  font: inherit; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bordure-ui); border-radius: var(--rayon);
}
.filtres__go { display: none; }

/* Pilule compacte des petits écrans : ouvre le panneau de filtres */
.pilule-mobile {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 56px; padding: var(--e2) var(--e4);
  font: inherit; text-align: left; cursor: pointer; color: var(--texte);
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 999px; box-shadow: var(--ombre-pilule);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pilule-mobile__texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pilule-mobile__texte strong { font-weight: 600; }
.pilule-mobile__texte span { font-size: var(--t-petit); color: var(--texte-attenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panneau de filtres (<dialog> natif) : plein écran sur mobile */
.dialogue {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  color: var(--texte); background: var(--carte); border: 0;
}
.dialogue[open] { display: flex; flex-direction: column; animation: monter 320ms var(--courbe); }
.dialogue::backdrop { background: rgb(0 0 0 / 0.45); }
.dialogue__tete, .dialogue__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); }
.dialogue__tete { border-bottom: 1px solid var(--bordure); }
.dialogue__pied { border-top: 1px solid var(--bordure); }
.dialogue__titre { font-size: 1.1875rem; font-weight: 700; }
.dialogue__corps { flex: 1; overflow-y: auto; padding: var(--e4); }
.dialogue__fermer {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  color: var(--texte); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--transition);
}
.dialogue__fermer:hover { background: var(--attenue); }
.dialogue .filtres { padding: 0; border: 0; box-shadow: none; }

/* Fiche détaillée de l'offre : panneau centré, lisible sans quitter le site */
.dialogue--offre {
  margin: auto; height: auto; max-height: min(90vh, 48rem);
  width: min(44rem, calc(100vw - 2rem)); border-radius: var(--rayon-carte);
}
.dialogue--offre .dialogue__tete { justify-content: flex-start; }
.dialogue--offre .dialogue__fermer { margin-left: auto; }
.offre-detail__orga { margin: 0; font-weight: 600; }
.offre-detail__titre { font-size: 1.25rem; line-height: 1.35; margin: 0 0 var(--e2); overflow-wrap: anywhere; }
.offre-detail__titre:focus { outline: none; }
.offre-detail__lieu, .offre-detail__dates { color: var(--texte-attenue); }
.offre-detail__resume { white-space: pre-line; line-height: 1.65; overflow-wrap: anywhere; }
.offre-detail__resume--vide { font-style: italic; }

/* Logo d'organisation : pastille blanche, repli sur les initiales si l'image manque */
.pastille--logo { width: 4rem; min-width: 4rem; padding: 0; background: #fff; overflow: hidden; }
.pastille__logo { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; box-sizing: border-box; background: #fff; border-radius: inherit; }

/* Boutons (<button> et <a>) : pilules */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.5rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  color: #000; background: var(--accent); border: 2px solid var(--accent); border-radius: 999px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover { background: #15803D; border-color: #15803D; color: #fff; }
.bouton--grand { min-height: 52px; padding: 0 2rem; font-size: 1.1875rem; }
.bouton--discret { color: var(--texte); background: transparent; border-color: var(--bordure-ui); }
.bouton--discret:hover { color: var(--texte); background: var(--attenue); border-color: var(--bordure-ui); }
/* Bouton texte (réinitialiser) */
.lien-bouton {
  min-height: 44px; padding: 0 var(--e3); font: inherit; font-weight: 600; cursor: pointer;
  color: var(--primaire); background: transparent; border: 0; border-radius: 999px;
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-bouton:hover { background: var(--attenue); }
/* Retour d'appui */
.bouton:active, .langues__bouton:active, .rapide:active, .pilule-mobile:active, .filtres__go:active { transform: scale(0.97); }

/* Rangée de catégories : icône + libellé, défilement horizontal, barre collante sous l'en-tête */
.categories {
  position: sticky; top: var(--h-entete); z-index: 15;
  display: flex; gap: var(--e1); overflow-x: auto; scrollbar-width: thin;
  padding: var(--e1) var(--e1) 0; margin: 0 calc(var(--e1) * -1);
  background: var(--fond); border-bottom: 1px solid var(--bordure);
}
.categories:empty { display: none; }
.categories { scroll-margin-top: var(--h-entete); }
.categorie {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--e1);
  width: 6.5rem; min-height: 5rem; padding: var(--e2) var(--e1) var(--e2);
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  color: var(--texte-attenue); background: transparent;
  border: 0; border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.categorie__nom { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.categorie:hover { color: var(--texte); border-bottom-color: var(--bordure); }
/* Actif : soulignement (pas seulement la couleur) */
.categorie[aria-pressed="true"] { color: var(--texte); border-bottom-color: var(--texte); }
.categorie:active { transform: scale(0.97); }

/* Petits filtres secondaires */
.rapides { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.rapides:empty { display: none; }
.rapide {
  min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-weight: 500; cursor: pointer;
  color: var(--texte); background: var(--carte);
  border: 1px solid var(--bordure-ui); border-radius: 999px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.rapide:hover { background: var(--attenue); }
.rapide[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }
/* Pas seulement la couleur : une coche (ignorée des lecteurs d'écran) */
.rapide[aria-pressed="true"]::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }

/* Résultats et états */
.resultats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin: var(--e4) 0; }
.etat__message { font-weight: 600; color: var(--texte-attenue); }
.etat__message--erreur { margin-bottom: var(--e4); padding: var(--e3) var(--e4); background: var(--carte); color: var(--alerte); border: 2px solid var(--alerte); border-radius: var(--rayon); font-weight: 700; }

/* Liste et cartes façon annonces : sans bordure, coins 16 px, grande zone colorée */
.offres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e8) var(--e6); grid-template-columns: 1fr; scroll-margin-top: 10rem; }
.offres--fondu { animation: fondu 240ms var(--courbe); }
.offre {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .offre:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
}
.offre:active { transform: scale(0.995); }
/* Cascade à l'entrée dans l'écran : état initial posé par app.js seulement (sans JS tout est visible) */
.offre--attente { opacity: 0; transform: translateY(12px); }
.offre--apparait { animation: apparition 500ms var(--courbe) backwards; }
.retard-1 { animation-delay: 50ms; }
.retard-2 { animation-delay: 100ms; }
.retard-3 { animation-delay: 150ms; }
.retard-4 { animation-delay: 200ms; }
.retard-5 { animation-delay: 250ms; }

/* Six couleurs d'organisation (texte blanc sur la pastille) */
.offre--c1 { --coul: #0369A1; }
.offre--c2 { --coul: #15803D; }
.offre--c3 { --coul: #B45309; }
.offre--c4 { --coul: #7E22CE; }
.offre--c5 { --coul: #BE185D; }
.offre--c6 { --coul: #475569; }

.offre__visuel {
  display: flex; align-items: center; justify-content: center; min-height: 8rem; /* hauteur réservée : pas de décalage au chargement de la photo */
  background: var(--attenue); /* repli sans color-mix */
  background: linear-gradient(135deg, color-mix(in srgb, var(--coul) 30%, var(--carte)), color-mix(in srgb, var(--coul) 8%, var(--carte)));
}
/* Photo de spécialité (décor) : le chemin est relatif à style.css. --photo n'est lue (donc téléchargée) que lorsque app.js ajoute .offre--visible.
   Voile = couleur de l'organisation assombrie, opaque à 85 % : texte blanc >= 5.3:1 même sur un pixel blanc (clair et sombre). */
.offre--spec-1 { --photo: url("img/spec/s1.jpg"); }
.offre--spec-2 { --photo: url("img/spec/s2.jpg"); }
.offre--spec-3 { --photo: url("img/spec/s3.jpg"); }
.offre--spec-4 { --photo: url("img/spec/s4.jpg"); }
.offre--spec-5 { --photo: url("img/spec/s5.jpg"); }
.offre--spec-6 { --photo: url("img/spec/s6.jpg"); }
.offre--spec-7 { --photo: url("img/spec/s7.jpg"); }
.offre--spec-8 { --photo: url("img/spec/s8.jpg"); }
.offre--spec-9 { --photo: url("img/spec/s9.jpg"); }
.offre--spec-10 { --photo: url("img/spec/s10.jpg"); }
.offre--spec-11 { --photo: url("img/spec/s11.jpg"); }
.offre--spec-1.offre--visible .offre__visuel, .offre--spec-2.offre--visible .offre__visuel, .offre--spec-3.offre--visible .offre__visuel, .offre--spec-4.offre--visible .offre__visuel,
.offre--spec-5.offre--visible .offre__visuel, .offre--spec-6.offre--visible .offre__visuel, .offre--spec-7.offre--visible .offre__visuel, .offre--spec-8.offre--visible .offre__visuel,
.offre--spec-9.offre--visible .offre__visuel, .offre--spec-10.offre--visible .offre__visuel, .offre--spec-11.offre--visible .offre__visuel {
  background: linear-gradient(135deg, color-mix(in srgb, color-mix(in srgb, var(--coul) 75%, #000) 85%, transparent), color-mix(in srgb, color-mix(in srgb, var(--coul) 75%, #000) 70%, transparent)), var(--photo) center / cover no-repeat, var(--attenue);
}

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4rem; height: 4rem; padding: 0 var(--e3); max-width: 90%;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.02em; color: #fff;
  background: var(--coul, #0369A1); border-radius: var(--rayon-carte);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}
.offre__corps { display: flex; flex-direction: column; flex: 1; gap: var(--e2); padding: var(--e4) var(--e4) var(--e6); }
.offre__orga { font-weight: 600; overflow-wrap: anywhere; }
.offre__titre { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
/* Titre sur 2 lignes maximum ; le lien couvre toute la carte (cible large) */
.offre__titre a { display: flex; align-items: flex-start; gap: var(--e1); color: var(--texte); text-decoration: none; scroll-margin-top: 8rem; }
.offre__titre a::after { content: ""; position: absolute; inset: 0; }
/* Le texte méta passe au-dessus du lien étiré : il reste sélectionnable et copiable */
.offre__orga, .offre__lieu, .offre__etiquettes, .puces, .offre__dates { position: relative; z-index: 1; }
.offre__titre a:hover .offre__titre-texte { text-decoration: underline; text-underline-offset: 3px; }
.offre__titre-texte { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.icone-externe { flex: none; margin-top: 0.2em; color: var(--texte-attenue); }
/* Le focus s'affiche autour de toute la carte (là où :has existe) ; sinon l'anneau du lien reste */
@supports selector(:has(a)) {
  .offre__titre a:focus-visible { outline: none; }
  .offre:has(.offre__titre a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
}
/* Contrôles atteints au clavier : ne pas finir sous l'en-tête et la barre collante (WCAG 2.4.11) */
.filtres select, .filtres button, #rapides button, #categories button { scroll-margin-top: 8rem; }
.offre__lieu { color: var(--texte-attenue); overflow-wrap: anywhere; }
.offre__etiquettes { display: flex; flex-wrap: wrap; gap: var(--e2); }

.etiquette {
  padding: 0.125rem 0.625rem; font-size: var(--t-petit); font-weight: 500;
  color: var(--texte); background: var(--attenue); border-radius: 999px;
}

.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.puces li {
  padding: 0.125rem 0.625rem; font-size: var(--t-petit);
  color: var(--texte-attenue); border: 1px solid var(--bordure); border-radius: 999px;
}

/* Date limite bien visible ; l'urgence est un badge avec texte */
.offre__dates { margin-top: auto; padding-top: var(--e3); }
.offre__date { font-weight: 600; color: var(--texte); }
.offre__date--pub { font-weight: 500; color: var(--texte-attenue); }
.offre__urgence { display: inline-block; margin-left: var(--e1); padding: 0.0625rem 0.625rem; font-size: var(--t-petit); font-weight: 700; color: var(--urgence-texte); background: var(--urgence-fond); border-radius: 999px; }
.offre--urgente .offre__date { color: var(--alerte); }

/* Squelettes de chargement (opacité seulement) */
.squelette {
  min-height: 18rem; background: var(--attenue); border-radius: var(--rayon-carte);
  animation: pulse 1.4s ease-in-out infinite;
}

/* Pied de page : colonnes sur fond gris clair */
.pied { padding: var(--e12) 0 var(--e8); color: var(--texte-attenue); background: var(--fond-alt); border-top: 1px solid var(--bordure); }
.pied__colonnes { display: grid; gap: var(--e8); padding-bottom: var(--e8); border-bottom: 1px solid var(--bordure); }
.pied section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); }
.pied__titre { font-size: 1rem; font-weight: 700; color: var(--texte); }
.pied a { display: inline-block; min-height: 24px; color: var(--primaire); }
.pied__avertissement { font-weight: 600; }
.pied__droits { padding-top: var(--e6); font-size: var(--t-petit); }

.noscript { margin: var(--e4) 0; padding: var(--e4); color: var(--alerte); background: var(--carte); border: 2px solid var(--alerte); border-radius: var(--rayon); font-weight: 700; }

/* Page de texte (mentions légales) : lecture confortable, ~680 px */
.page-texte { max-width: 44rem; padding-top: var(--e12); padding-bottom: var(--e16); }
.page-texte h1 { margin-bottom: var(--e4); font-size: var(--t-h2); font-weight: 700; line-height: 1.1; }
.page-texte h2 { font-size: var(--t-lead); font-weight: 700; margin: var(--e8) 0 var(--e2); scroll-margin-top: var(--h-entete); }
.page-texte h3 { font-size: var(--t-h3); font-weight: 600; margin: var(--e6) 0 var(--e1); }
.page-texte p { margin-bottom: var(--e3); line-height: 1.6; overflow-wrap: anywhere; }
.page-texte a { display: inline-block; min-height: 24px; }
.page-texte__nav { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.page-texte__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4); text-decoration: none; border: 1px solid var(--bordure-ui); border-radius: 999px; }
.page-texte__nav a:hover { background: var(--attenue); }

@keyframes apparition { from { opacity: 0; transform: translateY(12px); } }
@keyframes fondu { from { opacity: 0.35; } }
@keyframes zoom { to { transform: scale(1.06); } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes monter { from { opacity: 0; transform: translateY(24px); } }

@media (min-width: 700px) {
  .conteneur { padding: 0 var(--e6); }
  .entete__detail { display: inline; margin-left: var(--e2); }
  .chiffres__liste { grid-template-columns: repeat(4, 1fr); }
  .offres { grid-template-columns: repeat(2, 1fr); }
  .pied__colonnes { grid-template-columns: repeat(3, 1fr); }

  /* Barre de recherche en pilule segmentée */
  .filtres {
    display: flex; align-items: center; max-width: 62rem; margin: 0 auto; padding: 0.375rem 0.5rem 0.375rem 0.375rem; /* 6 champs depuis l'ajout de la région */
    border-radius: 999px; box-shadow: var(--ombre-pilule);
  }
  .champ { flex: 1; padding: 0.125rem 1rem; border-radius: 999px; gap: 0; transition: background var(--transition); }
  .champ:hover { background: var(--fond-alt); }
  .champ + .champ::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--bordure); }
  .champ label { font-size: 0.75rem; }
  .champ select { min-height: 44px; padding: 0; font-weight: 500; background: transparent; border: 0; border-radius: 0; }
  .champ select:focus-visible { outline-offset: 4px; }
  .filtres__go {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-left: var(--e2); padding: 0;
    color: #000; background: var(--accent); border: 0; border-radius: 50%; cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
  }
  .filtres__go:hover { background: #15803D; color: #fff; }
  .resultats { justify-content: center; gap: var(--e4); }
  .rapides { justify-content: center; }
}

@media (min-width: 1100px) {
  .offres { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
  .section { max-width: 88rem; }
  .offres { grid-template-columns: repeat(4, 1fr); }
}

/* Mouvement réduit : aucune animation, état final immédiat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .offre--attente { opacity: 1; transform: none; }
}

/* Espace membre et administration */
.espace { max-width: 52rem; padding-top: var(--e6); padding-bottom: var(--e6); }
.espace h1 { font-size: var(--t-h2); margin-bottom: var(--e3); }
.espace__intro { color: var(--texte-attenue); margin-bottom: var(--e4); }
.formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); max-width: 26rem; margin: var(--e4) 0; }
.formulaire label { font-weight: 600; }
.formulaire input, .formulaire textarea, .formulaire select { padding: 0.7rem 0.8rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--carte); color: var(--texte); font: inherit; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.aide { color: var(--texte-attenue); font-size: var(--t-petit); }
.alerte { padding: var(--e2) var(--e3); border-radius: var(--rayon); background: #FEE2E2; color: #991B1B; margin: var(--e3) 0; }
.alerte--succes { background: #DCFCE7; color: #166534; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.carte-espace { border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: var(--e4); margin: var(--e4) 0; background: var(--carte); }
.carte-espace h2 { font-size: 1.1rem; margin-bottom: var(--e3); }
.profil { display: grid; grid-template-columns: max-content 1fr; gap: var(--e1) var(--e3); margin-bottom: var(--e3); }
.profil dt { font-weight: 600; }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e3); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--e3); border-radius: var(--rayon); background: var(--attenue); }
.stat__valeur { font-size: 1.5rem; font-weight: 700; }
.stat__libelle { color: var(--texte-attenue); font-size: var(--t-petit); }
.sources { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); }
.source { font-size: var(--t-petit); padding: 2px 8px; border-radius: 999px; background: var(--attenue); }
.source--ok { color: #166534; }
.source--ko { color: #991B1B; }
.liste-notifs, .liste-simple { display: grid; gap: var(--e3); }
.notif { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: var(--e3); display: grid; gap: var(--e1); }
.notif--non-lue { border-left: 4px solid var(--focus); }
.notif__date { color: var(--texte-attenue); font-size: var(--t-petit); }
.vide { color: var(--texte-attenue); }
.case { display: flex; align-items: center; gap: var(--e2); font-weight: 500; }
.case input { width: auto; }
.champ .case { min-height: 44px; cursor: pointer; }
.case input { width: 1.25rem; height: 1.25rem; flex: none; }
/* Bouton « Espace membre » de l'en-tête : plein, couleur primaire, pour être repéré au premier coup d'œil */
.entete__actions { display: flex; align-items: center; gap: var(--e2); }
.entete__lien {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  font-weight: 700; color: var(--sur-primaire); background: var(--primaire);
  text-decoration: none; border-radius: 999px; white-space: nowrap;
}
.entete__lien:hover { filter: brightness(1.1); text-decoration: underline; }

/* Tableau de l'administration */
.tableau-defile { overflow-x: auto; margin-top: 0.75rem; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tableau th, .tableau td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--bordure); }
.tableau th { font-weight: 600; }
.tableau td:last-child { text-align: right; white-space: nowrap; }

/* Fréquence du digest */
.frequence { border: 0; padding: 0; margin: 0.9rem 0; display: grid; gap: 0.35rem; }
.frequence legend { font-weight: 600; padding: 0; margin-bottom: 0.3rem; }

/* ===== Animations des pages de compte (transform et opacity ; coupées sous prefers-reduced-motion) ===== */

/* Entrée en cascade : sans JS, l'animation se termine toujours sur le contenu visible */
.espace--entree > *, .carte-auth > * { animation: apparition 600ms var(--courbe) backwards; }
.espace--entree > :nth-child(2), .carte-auth > :nth-child(2) { animation-delay: 80ms; }
.espace--entree > :nth-child(3), .carte-auth > :nth-child(3) { animation-delay: 160ms; }
.espace--entree > :nth-child(4), .carte-auth > :nth-child(4) { animation-delay: 240ms; }
.espace--entree > :nth-child(n+5), .carte-auth > :nth-child(n+5) { animation-delay: 320ms; }

/* Bloc qui apparaît à la demande (code 2FA, enrôlement) */
.apparait:not([hidden]) { animation: apparition 400ms var(--courbe); }

/* Page de connexion : carte posée sur un fond de formes floues qui dérivent lentement */
.page-auth .espace { position: relative; z-index: 1; }
.carte-auth {
  max-width: 30rem; margin-top: var(--e4); padding: var(--e6);
  background: rgb(var(--carte-rgb) / 0.9); border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-haute);
}
.carte-auth .formulaire { max-width: none; }
.fond-anime { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fond-anime span {
  position: absolute; width: 42vmax; height: 42vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.3;
  animation: deriver 18s ease-in-out infinite alternate;
}
.fond-anime span:nth-child(1) { top: -14vmax; left: -12vmax; background: var(--primaire); }
.fond-anime span:nth-child(2) { bottom: -18vmax; right: -12vmax; background: var(--accent); animation-duration: 23s; animation-delay: -7s; }
.fond-anime span:nth-child(3) { top: 35%; left: 45%; width: 28vmax; height: 28vmax; background: #38BDF8; opacity: 0.2; animation-duration: 29s; animation-delay: -13s; }
@keyframes deriver { to { transform: translate(9vmax, 7vmax) scale(1.15); } }

/* Bouton occupé (espace.js pose aria-busy pendant l'appel) : roue de chargement */
.bouton[aria-busy="true"], .lien-bouton[aria-busy="true"] { cursor: progress; }
.bouton:disabled { opacity: 0.85; }
.bouton[aria-busy="true"]::after, .lien-bouton[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; margin-left: 0.6em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: tourner 700ms linear infinite;
}
.lien-bouton[aria-busy="true"]::after { display: inline-block; vertical-align: -0.15em; }
@keyframes tourner { to { transform: rotate(360deg); } }

/* Squelettes des listes de l'espace membre */
.squelette--ligne { min-height: 3rem; list-style: none; border-radius: var(--rayon); }

/* Double authentification */
.formulaire__groupe { display: grid; gap: var(--e2); }
.tfa-etapes { display: grid; gap: var(--e3); margin: var(--e3) 0; padding-left: 1.25rem; }
.tfa-secret {
  display: block; margin: var(--e2) 0; padding: var(--e2) var(--e3);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.1rem; letter-spacing: 0.08em;
  background: var(--attenue); border-radius: var(--rayon); word-break: break-all; user-select: all;
}

/* ===== Page de connexion : présentation + carte (inspiration Stripe / Linear) ===== */
.page-auth main { position: relative; z-index: 1; }
.auth { display: grid; gap: var(--e8); align-items: center; min-height: 100svh; padding-top: var(--e8); padding-bottom: var(--e8); }
.auth .carte-auth { margin: 0; width: 100%; justify-self: center; }
.auth__presentation { order: 2; display: grid; gap: var(--e4); }          /* téléphone : formulaire d'abord */
.auth__marque { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primaire); text-decoration: none; }
.auth__marque span { display: block; font-size: var(--t-petit); font-weight: 500; letter-spacing: 0; color: var(--texte-attenue); }
.auth__accroche { font-size: var(--t-lead); font-weight: 700; line-height: 1.25; max-width: 28rem; }
.avantages { display: grid; gap: var(--e4); margin: 0; padding: 0; list-style: none; }
.avantages li { display: flex; gap: var(--e3); align-items: flex-start; }
.avantages li div { display: grid; gap: 2px; }
.avantages li span:not(.avantages__icone) { color: var(--texte-attenue); font-size: var(--t-petit); }
.avantages__icone {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border-radius: var(--rayon); color: var(--primaire); background: rgb(var(--carte-rgb) / 0.8); box-shadow: var(--ombre);
}
.avantages__icone .icone { width: 1.375rem; height: 1.375rem; }
@media (min-width: 900px) {
  .auth { grid-template-columns: 1.1fr 1fr; gap: var(--e16); }
  .auth__presentation { order: 0; }
  .auth__accroche { font-size: var(--t-h2); }
}

/* Formulaire : libellé + lien sur une ligne, bouton œil, séparateur, boutons pleine largeur */
.formulaire__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.formulaire__lien { font-size: var(--t-petit); color: var(--primaire); }
.champ-mdp { position: relative; display: grid; }
.champ-mdp input { padding-right: 3rem; }
.champ-mdp__bouton {
  position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  color: var(--texte-attenue); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.champ-mdp__bouton:hover, .champ-mdp__bouton[aria-pressed="true"] { color: var(--primaire); background: var(--attenue); }
.bouton--large { width: 100%; }
.separateur { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 var(--e3); color: var(--texte-attenue); font-size: var(--t-petit); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

/* ===== Espace membre : tableau de bord (inspiration Airbnb / Notion) ===== */
.espace--large { max-width: 72rem; }
.fil { margin-bottom: var(--e4); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; font-weight: 800; font-size: 1.375rem;
  color: var(--sur-primaire); background: var(--primaire);
}
.avatar--mini { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
.tableau-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); margin-bottom: var(--e6); }
.tableau-entete__texte { flex: 1; min-width: 12rem; }
.tableau-entete__texte h1 { margin: 0; }
.tableau-entete__actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.surtitre { font-size: var(--t-petit); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-attenue); }
.badge { display: inline-block; padding: 0.125rem 0.625rem; font-size: var(--t-petit); font-weight: 600; border-radius: 999px; background: var(--attenue); }

.bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e6); padding: var(--e4);
  border: 1px solid #FCD34D; border-radius: var(--rayon-carte); background: #FFFBEB; color: #78350F;
}
.bandeau .aide { color: #92400E; }
.bandeau__texte { flex: 1; min-width: 14rem; display: grid; gap: var(--e1); }

.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); margin: 0 0 var(--e6); padding: 0; list-style: none; }
.tuile {
  display: grid; gap: var(--e1); height: 100%; padding: var(--e4);
  color: var(--texte); text-decoration: none; background: var(--carte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-carte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tuile:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.tuile .icone { color: var(--primaire); }
.tuile__valeur { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.tuile__valeur--texte { font-size: 1.125rem; }
.tuile__libelle { color: var(--texte-attenue); font-size: var(--t-petit); }

.tableau-grille { display: grid; gap: var(--e4); }
.tableau-colonne { display: grid; gap: var(--e4); align-content: start; }
.tableau-colonne .carte-espace { margin: 0; }
.carte-espace h2 { display: flex; align-items: center; gap: var(--e2); }
.carte-espace h2 .icone { color: var(--primaire); }
.ligne-liste { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--bordure); }
.ligne-liste:last-child { border-bottom: 0; }
.ligne-liste__texte { display: grid; gap: 2px; min-width: 0; }
.ligne-liste__texte a { font-weight: 600; overflow-wrap: anywhere; }
.liste-simple .vide, .liste-notifs .vide { list-style: none; padding: var(--e3); border-radius: var(--rayon); background: var(--attenue); }
.lien-bouton--icone { display: inline-flex; align-items: center; gap: var(--e2); }

@media (min-width: 700px) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .tableau-grille { grid-template-columns: 1.6fr 1fr; } }

/* ===== En-tête du site : session ouverte ===== */
.entete__lien { gap: var(--e2); }
.entete__lien--connecte { padding-left: 0.3rem; }
.entete__lien .avatar--mini { color: var(--primaire); background: var(--sur-primaire); }
.entete__secondaire { font-weight: 600; color: var(--primaire); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 999px; }
.entete__secondaire:hover { background: var(--attenue); }
/* Petit écran : seule l'initiale reste visible quand la session est ouverte */
@media (max-width: 420px) {
  .entete__lien--connecte #entete-compte-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entete__lien--connecte { padding-right: 0.3rem; }
}

/* ===== Webapp ===== */
.icone-app { width: 1.5rem; height: 1.5rem; border-radius: 6px; }
.hors-ligne { display: grid; justify-items: center; text-align: center; gap: var(--e3); min-height: 80svh; align-content: center; }
.hors-ligne img { border-radius: 22px; box-shadow: var(--ombre-haute); }
button.entete__secondaire { font: inherit; font-weight: 600; background: transparent; border: 0; cursor: pointer; }
.actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e2) 0 var(--e3); }

/* ===== Espaces partenaires : clairement signalés, même gabarit que les cartes ===== */
.partenaire { list-style: none; }
.partenaire__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  color: var(--texte); text-decoration: none; background: var(--carte);
  border: 1px dashed var(--bordure-ui); border-radius: var(--rayon-carte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.partenaire__lien:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.partenaire__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--attenue); }
.partenaire__texte { display: grid; gap: var(--e1); padding: var(--e4); }
.partenaire__mention { justify-self: start; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-attenue); background: var(--attenue); border-radius: 999px; }
.partenaire__nom { font-size: var(--t-h3); }
.partenaire__description { color: var(--texte-attenue); font-size: var(--t-petit); }
.encart-partenaire { max-width: 28rem; }

/* ===== Page d'une offre ===== */
.entete__nom--lien { text-decoration: none; }
.fiche__entete { display: flex; gap: var(--e4); align-items: flex-start; margin-bottom: var(--e3); }
.fiche__entete .pastille { flex: none; }
.fiche__orga { font-weight: 600; color: var(--texte-attenue); }
.fiche__titre { font-size: var(--t-h2); line-height: 1.15; margin: var(--e1) 0; overflow-wrap: anywhere; }
.fiche__lieu, .fiche__dates { color: var(--texte-attenue); }
.fiche__dates { margin: var(--e3) 0 var(--e6); }
.fiche__description #fiche-texte { display: grid; gap: var(--e3); line-height: 1.6; overflow-wrap: anywhere; }
.fiche__description ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--e1); }
.fiche__actions { display: grid; gap: var(--e3); }
.fiche__annonce { margin-top: var(--e4); }
/* Encart « CV et lettre par IA » : en tête de fiche, avant la description, pour être vu sur téléphone aussi */
.cta-cv {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e6); margin: 0 0 var(--e6); padding: var(--e4) var(--e6);
  border: 2px solid var(--accent); border-radius: var(--rayon-carte); background: var(--carte);
}
.cta-cv__texte { flex: 1; min-width: 14rem; display: grid; gap: var(--e1); }
.cta-cv__texte h2 { margin: 0; font-size: var(--t-h3); }
.cta-cv .bouton { flex: none; }
.cta-cv .bouton:disabled { opacity: 0.6; cursor: not-allowed; }
@media (min-width: 960px) { .fiche__actions { position: sticky; top: calc(var(--h-entete) + var(--e4)); } }

/* ===== Carrousel « Offres du jour » : défilement natif (scroll-snap), au doigt, au clavier ou aux boutons ===== */
.carrousel { padding-top: var(--e8); }
.carrousel__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.carrousel__titre { font-size: var(--t-h3); font-weight: 800; }
.carrousel__commandes { display: flex; align-items: center; gap: var(--e2); }
.carrousel__bouton {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer;
  color: var(--texte); background: var(--carte); border: 1px solid var(--bordure-ui); border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
}
.carrousel__bouton:hover { background: var(--attenue); }
.carrousel__bouton:active { transform: scale(0.94); }
.carrousel__bouton--prec .icone { transform: rotate(180deg); }
.carrousel__piste {
  display: flex; gap: var(--e4); margin: 0; padding: var(--e1) var(--e1) var(--e4); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
/* Défilement continu (app.js) : ni aimantation ni lissage CSS, qui contrarieraient le mouvement image par image */
.carrousel__piste--boucle { scroll-snap-type: none; scroll-behavior: auto; }
.carrousel__piste:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--rayon); }
.carrousel__carte {
  flex: 0 0 min(82%, 19rem); scroll-snap-align: start; position: relative;
  display: grid; align-content: start; gap: var(--e2); padding: var(--e4) var(--e4) var(--e6);
  background: var(--carte); border: 1px solid var(--bordure); border-top: 4px solid var(--coul, var(--primaire));
  border-radius: var(--rayon-carte); box-shadow: var(--ombre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carrousel__carte:hover, .carrousel__carte:focus-within { transform: translateY(-3px); box-shadow: var(--ombre-haute); }
.carrousel__orga { font-weight: 600; font-size: var(--t-petit); color: var(--texte-attenue); overflow-wrap: anywhere; }
.carrousel__lien {
  font-weight: 700; line-height: 1.3; color: var(--texte); text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.carrousel__lien::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.carrousel__lien:hover { text-decoration: underline; }
.carrousel__lieu, .carrousel__date { font-size: var(--t-petit); color: var(--texte-attenue); }
@media (min-width: 700px) { .carrousel__carte { flex-basis: calc((100% - 2 * var(--e4)) / 3); } }
@media (min-width: 1100px) { .carrousel__carte { flex-basis: calc((100% - 3 * var(--e4)) / 4); } }
@media (prefers-reduced-motion: reduce) { .carrousel__piste { scroll-behavior: auto; } }

/* ===== Inscription : illustration animée (globe + cartes d'offres), transform et opacity seulement ===== */
.illustration-auth { position: relative; display: grid; place-items: center; min-height: 22rem; }
.globe {
  position: relative; width: min(18rem, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #38BDF8 0%, var(--primaire) 55%, #0C4A6E 100%);
  box-shadow: 0 20px 60px rgb(3 105 161 / 0.35), inset -18px -18px 40px rgb(0 0 0 / 0.25);
}
.globe__meridien, .globe__parallele { position: absolute; inset: 0; border: 1.5px solid rgb(255 255 255 / 0.35); border-radius: 50%; }
.globe__meridien { animation: tourner-globe 14s linear infinite; }
.globe__meridien--2 { animation-delay: -7s; }
.globe__parallele { inset: 30% -5%; border-radius: 50%; transform: scaleY(0.35); }
.globe__parallele--2 { inset: 55% 8% 5%; }
.globe__point {
  position: absolute; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--accent);
}
/* Halo qui grossit en s'effaçant (transform + opacity, pas de box-shadow animée) */
.globe__point::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: pulser 2.4s ease-out infinite; animation-delay: inherit; }
.globe__point--1 { top: 38%; left: 46%; }
.globe__point--2 { top: 55%; left: 30%; animation-delay: -0.6s; } /* délai hérité par le halo */
.globe__point--3 { top: 28%; left: 66%; animation-delay: -1.2s; }
.globe__point--4 { top: 64%; left: 60%; animation-delay: -1.8s; }
.bulle-offre {
  position: absolute; display: flex; align-items: center; gap: var(--e2); max-width: 15rem;
  padding: var(--e2) var(--e3); font-size: var(--t-petit); color: var(--texte);
  background: rgb(var(--carte-rgb) / 0.95); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre-haute);
  animation: flotter 6s ease-in-out infinite;
}
.bulle-offre .icone { color: var(--primaire); flex: none; }
.bulle-offre span { display: grid; color: var(--texte-attenue); }
.bulle-offre strong { color: var(--texte); }
.bulle-offre--1 { top: 6%; left: 0; }
.bulle-offre--2 { top: 42%; right: 0; animation-delay: -2s; }
.bulle-offre--3 { bottom: 14%; left: 6%; animation-delay: -4s; }
.illustration-auth__legende { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-weight: 600; color: var(--texte-attenue); }
@keyframes tourner-globe { from { transform: scaleX(1); } 50% { transform: scaleX(0.05); } to { transform: scaleX(1); } }
@keyframes pulser { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
@keyframes flotter { 50% { transform: translateY(-10px); } }
/* Téléphone : formulaire d'abord, illustration réduite dessous ; ordinateur : côte à côte */
@media (max-width: 899px) { .illustration-auth { min-height: 18rem; } .bulle-offre--3 { display: none; } }

/* ===== Accueil : couleur et mouvement (transform et opacity seulement, coupés en mouvement réduit) ===== */
/* Fond doux derrière toute la page ; main et pied passent au-dessus */
.page-accueil main, .page-accueil .pied { position: relative; z-index: 1; }
.fond-anime--doux span { opacity: 0.14; }
.fond-anime--doux span:nth-child(3) { opacity: 0.1; }

/* Aurore : halos colorés qui dérivent, au-dessus du voile du bandeau et sous le texte */
.aurore { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.aurore span {
  position: absolute; width: 26rem; height: 26rem; border-radius: 50%;
  filter: blur(60px); opacity: 0.45;
  animation: deriver 16s ease-in-out infinite alternate;
}
.aurore span:nth-child(1) { top: -12rem; left: -8rem; background: #38BDF8; }
.aurore span:nth-child(2) { bottom: -14rem; right: -8rem; background: var(--accent); animation-duration: 21s; animation-delay: -6s; }
.aurore span:nth-child(3) { top: 20%; left: 55%; width: 16rem; height: 16rem; background: #0EA5E9; opacity: 0.3; animation-duration: 25s; animation-delay: -11s; }

/* Chiffres clés : bande en dégradé bleu-vert, texte blanc (contraste >= 5:1 sur chaque couleur du dégradé) */
.chiffres { position: relative; overflow: hidden; background: linear-gradient(115deg, #075985 0%, #0369A1 45%, #15803D 100%); }
.chiffres .conteneur { position: relative; z-index: 2; }
.chiffres .aurore span { opacity: 0.3; }
.chiffres .chiffre__nombre { color: #fff; }
.chiffres .chiffre__libelle { color: rgb(255 255 255 / 0.9); }
.chiffre { animation: flotter 7s ease-in-out infinite; }
.chiffre:nth-child(2) { animation-delay: -1.75s; }
.chiffre:nth-child(3) { animation-delay: -3.5s; }
.chiffre:nth-child(4) { animation-delay: -5.25s; }

/* ===== Tableau de bord admin ===== */
/* Couleur des graphiques (une série par graphique), validée : contraste >= 3:1 et teinte dans la bande de clarté
   sur la surface des cartes, en clair (#0369A1) comme en sombre (#3987E5, choisi pour la surface sombre). */
:root { --graphe: #0369A1; --bon: #15803D; --alerte-service: #B45309; }
@media (prefers-color-scheme: dark) { :root { --graphe: #3987E5; --bon: #4ADE80; --alerte-service: #FBBF24; } }

.direct { display: flex; align-items: center; gap: var(--e2); color: var(--texte-attenue); font-size: var(--t-petit); }
.direct__point { position: relative; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--bon); }
.direct__point::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bon); animation: pulser 2s ease-out infinite; }

.tuiles--admin { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tuiles--admin { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tuiles--admin { grid-template-columns: repeat(5, 1fr); } }
.tuile--kpi { animation: apparition 500ms var(--courbe) backwards; }
.tuile--kpi:nth-child(2) { animation-delay: 50ms; } .tuile--kpi:nth-child(3) { animation-delay: 100ms; }
.tuile--kpi:nth-child(4) { animation-delay: 150ms; } .tuile--kpi:nth-child(n+5) { animation-delay: 200ms; }
.tuile__valeur { font-variant-numeric: tabular-nums; }
.tuile__detail { font-size: 0.8125rem; color: var(--texte-attenue); }
.tuile__detail--hausse { color: var(--bon); font-weight: 600; }
.tuile__detail--baisse { color: var(--alerte-service); font-weight: 600; }

/* Histogrammes 14 jours : petits multiples, barres fines arrondies en haut, 2 px d'écart, croissance depuis la base */
.graphes { display: grid; gap: var(--e6); }
@media (min-width: 700px) { .graphes { grid-template-columns: repeat(2, 1fr); } }
.graphe { margin: 0; }
.graphe__titre { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); margin-bottom: var(--e2); color: var(--texte-attenue); font-size: var(--t-petit); font-weight: 600; }
.graphe__total { font-size: 1.375rem; color: var(--texte); font-variant-numeric: tabular-nums; }
.graphe__zone { position: relative; height: 7rem; padding-top: 1.25rem; border-bottom: 1px solid var(--bordure); }
.graphe__max { position: absolute; top: 0; left: 0; font-size: 0.75rem; color: var(--texte-attenue); }
.graphe__barres { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.graphe__colonne { flex: 1; display: flex; align-items: flex-end; cursor: default; }
.graphe__colonne:hover .graphe__barre { opacity: 0.75; }
.graphe__barre {
  width: 100%; min-height: 2px; background: var(--graphe); border-radius: 4px 4px 0 0;
  transform-origin: bottom; animation: pousser 700ms var(--courbe) backwards;
}
.graphe__barre--vide { background: var(--bordure); }
.graphe__axe { display: flex; justify-content: space-between; margin-top: var(--e1); font-size: 0.75rem; color: var(--texte-attenue); }
.graphe__donnees { margin-top: var(--e2); font-size: var(--t-petit); }
.graphe__donnees summary { cursor: pointer; color: var(--primaire); }
.infobulle {
  position: absolute; top: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600;
  color: var(--carte); background: var(--texte); border-radius: 6px;
}
@keyframes pousser { from { transform: scaleY(0); } }

/* Barres horizontales : libellé | barre | valeur */
.barres { display: grid; gap: var(--e2); }
.barres__ligne { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: var(--e3); font-size: var(--t-petit); }
.barres__libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres__piste { height: 0.75rem; background: var(--attenue); border-radius: 4px; overflow: hidden; }
.barres__barre { height: 100%; background: var(--graphe); border-radius: 0 4px 4px 0; transform-origin: left; animation: etirer 800ms var(--courbe) backwards; }
.barres__valeur { font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes etirer { from { transform: scaleX(0); } }

/* État des services : symbole + texte, jamais la couleur seule */
.services { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.service { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--rayon); background: var(--attenue); }
.service__pastille { grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 800; color: var(--carte); }
.service--ok .service__pastille { background: var(--bon); }
.service--alerte .service__pastille { background: var(--alerte-service); }
.service__nom { font-weight: 600; }
.service__etat { font-size: var(--t-petit); color: var(--texte-attenue); }

/* Flux d'activité en direct */
.flux { display: grid; margin: 0; padding: 0; list-style: none; max-height: 26rem; overflow-y: auto; }
.flux__item { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e3); padding: var(--e2) 0 var(--e2) var(--e3); border-left: 3px solid var(--graphe); border-bottom: 1px solid var(--bordure); }
.flux__item--alerte { border-left-color: var(--alerte-service); }
.flux__item--nouveau { animation: arrivee 600ms var(--courbe); }
.flux__action { font-weight: 600; }
.flux__quand { grid-row: span 2; align-self: center; font-size: 0.75rem; color: var(--texte-attenue); white-space: nowrap; }
.flux__qui { font-size: var(--t-petit); color: var(--texte-attenue); overflow-wrap: anywhere; }
@keyframes arrivee { from { opacity: 0; transform: translateX(-12px); } }

/* ===== Menu principal Offres | Bourses : sous la ligne de l'en-tête (téléphone), sur la ligne dès 1100 px ===== */
main.section { padding-top: var(--e8); } /* .conteneur (dès 700 px) remettait le haut à 0 */
.entete__ligne { flex-wrap: wrap; row-gap: 0; min-height: 3.5rem; }
.menu { order: 3; display: flex; gap: var(--e2); width: 100%; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e3);
  font-weight: 600; color: var(--texte-attenue); text-decoration: none; border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--texte); }
.menu a[aria-current="page"] { color: var(--primaire); border-bottom-color: var(--primaire); }
/* Deux lignes d'en-tête : les décalages « sous l'en-tête collant » en tiennent compte */
:root { --h-entete: 6rem; }
@media (min-width: 1100px) {
  :root { --h-entete: 3.5rem; }
  .menu { order: 0; width: auto; margin: 0 auto 0 var(--e4); }
}