/* =========================================================================
   Satkaar — feuille de style unique
   Charte : bleu nuit, bleu institution, terre de Provence, vert olivier,
   pierre claire, gris ardoise. Contrastes vérifiés au regard du RGAA 4.1.
   ========================================================================= */

/* --- 1. Jetons -------------------------------------------------------- */

:root {
  /* Couleurs de la charte */
  --bleu-nuit: #0e2c4b;
  --bleu-institution: #1e63a8;
  --terre: #d96a34;
  --olivier: #3f8f7a;
  --pierre: #f6f3ee;
  --ardoise: #5c6672;

  /* Déclinaisons de service.
     --terre-fonce porte le texte blanc des boutons (4,6:1) ;
     --terre reste réservé aux filets, aux puces et aux accents. */
  --terre-fonce: #be5620;
  --terre-appui: #a8461b;
  --olivier-fonce: #2e6b5a;
  --bleu-nuit-clair: #1a3f66;
  --blanc: #ffffff;
  --pierre-ombree: #ece7de;
  --trait: #dcd7cd;
  --trait-sombre: #24486e;

  /* Typographie */
  --police-titre: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Inter", "Segoe UI", system-ui, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rythme */
  --largeur: 1140px;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4rem, 9vw, 7rem);
  --rayon: 4px;
  --rayon-carte: 8px;

  --ombre-carte: 0 1px 2px rgba(14, 44, 75, 0.05), 0 8px 24px -16px rgba(14, 44, 75, 0.28);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--bleu-nuit);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- 2. Éléments de base ---------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
  text-wrap: pretty;
}

a {
  color: var(--bleu-institution);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--bleu-nuit);
}

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

img,
svg {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: 3rem 0;
}

/* --- 3. Structure ----------------------------------------------------- */

.contenant {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: var(--section);
}

.section--pierre {
  background: var(--pierre);
}

.section--nuit {
  background: var(--bleu-nuit);
  color: var(--blanc);
}

.section--serre {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bleu-nuit);
  color: var(--blanc);
  padding: 0.85rem 1.25rem;
  font-weight: 600;
}

.lien-evitement:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: var(--blanc);
}

/* --- 4. Titres de section --------------------------------------------- */

.surtitre {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.surtitre::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--terre);
  flex: none;
}

.section--nuit .surtitre {
  color: #a9bdd2;
}

.chapo {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--ardoise);
  max-width: 60ch;
}

.section--nuit .chapo,
.section--nuit p {
  color: #c8d6e4;
}

/* --- 5. Boutons ------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bouton--primaire {
  background: var(--terre-fonce);
  border-color: var(--terre-fonce);
  color: var(--blanc);
}

.bouton--primaire:hover {
  background: var(--terre-appui);
  border-color: var(--terre-appui);
  color: var(--blanc);
}

.bouton--contour {
  background: transparent;
  border-color: var(--bleu-institution);
  color: var(--bleu-institution);
}

.bouton--contour:hover {
  background: var(--bleu-institution);
  color: var(--blanc);
}

.bouton--clair {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--blanc);
}

.bouton--clair:hover {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--bleu-nuit);
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--bleu-institution);
}

.lien-fleche::after {
  content: "→";
  transition: transform 0.15s ease;
}

.lien-fleche:hover::after {
  transform: translateX(3px);
}

.section--nuit .lien-fleche {
  color: var(--blanc);
}

/* Photo d'un lieu, avec légende et crédit (licences libres). */
.photo-lieu {
  margin: 1.75rem 0 0;
}

.photo-lieu img {
  display: block;
  width: 100%;
  border-radius: var(--rayon-carte);
}

.photo-lieu figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #c8d6e4;
}

.photo-lieu__credit {
  display: block;
  font-size: 0.75rem;
  color: #8fa6bf;
}

.photo-lieu__credit a {
  color: inherit;
}

/* Lien dans un texte sur fond bleu nuit. */
.lien-clair {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-color: var(--terre);
  text-decoration-thickness: 2px;
}

.lien-clair:hover {
  color: #f0c9b3;
}

/* --- 6. En-tête ------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bleu-nuit);
  text-decoration: none;
  flex: none;
}

.marque__signe {
  width: clamp(2.5rem, 4.5vw, 3rem);
  height: clamp(2.5rem, 4.5vw, 3rem);
  flex: none;
}

.marque:hover {
  color: var(--bleu-nuit);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.6rem);
}

.nav__lien {
  font-family: var(--police-titre);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--bleu-nuit);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav__lien:hover {
  border-bottom-color: var(--trait);
  color: var(--bleu-nuit);
}

.nav__lien[aria-current] {
  border-bottom-color: var(--terre);
  font-weight: 600;
}

.nav .bouton {
  padding: 0.65rem 1.1rem;
  font-size: 0.95rem;
  margin-left: 0.4rem;
}

.bascule-menu {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.55rem 0.8rem;
  font-family: var(--police-titre);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  cursor: pointer;
}

/* Le repli en menu déroulant n'est activé que si JavaScript a posé la classe
   « js » sur <html> : sans lui, la navigation reste affichée en pile. */
@media (max-width: 940px) {
  .js .bascule-menu {
    display: inline-flex;
  }

  .nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    padding: 0.5rem var(--gouttiere) 1.5rem;
    box-shadow: var(--ombre-carte);
  }

  .js .nav {
    display: none;
  }

  .js .nav[data-ouvert="true"] {
    display: flex;
  }

  .nav__lien {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--pierre-ombree);
  }

  .nav__lien[aria-current] {
    border-bottom-color: var(--terre);
  }

  .nav .bouton {
    margin: 1rem 0 0;
    justify-content: center;
  }

  .entete__interieur {
    position: relative;
  }
}

/* --- 7. Héros --------------------------------------------------------- */

.heros {
  position: relative;
  background: var(--bleu-nuit);
  color: var(--blanc);
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

.heros__fond {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

.heros__interieur {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.heros__illustration .illustration-ia {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
}

@media (max-width: 900px) {
  .heros__interieur {
    grid-template-columns: minmax(0, 1fr);
  }

  .heros__illustration {
    display: none;
  }
}

/* Illustration IA : flux de données, nœuds actifs, barres de prévision. */
.ia-flux {
  stroke-dasharray: 6 14;
  animation: ia-flux 1.6s linear infinite;
}

.ia-flux--lent {
  animation-duration: 2.4s;
}

.ia-flux--decale {
  animation-duration: 2s;
  animation-delay: -0.8s;
  stroke-opacity: 0.6;
}

.ia-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ia-halo 2.4s ease-out infinite;
}

.ia-halo--decale {
  animation-delay: -1.2s;
}

.ia-barre {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ia-barre 3.2s ease-in-out infinite alternate;
}

@keyframes ia-flux {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes ia-halo {
  from {
    transform: scale(0.6);
    opacity: 0.7;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes ia-barre {
  from {
    transform: scaleY(0.55);
  }
  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .illustration-ia * {
    animation: none !important;
  }
}

.heros h1 {
  max-width: 16ch;
}

.heros .chapo {
  color: #cadaea;
  max-width: 56ch;
}

.heros__filet {
  width: 3.5rem;
  height: 3px;
  background: var(--terre);
  margin-bottom: 1.75rem;
}

/* --- 9. Cartes et grilles --------------------------------------------- */

.grille {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grille--3 {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.grille--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.grille--2 {
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
}

.carte--pilier {
  border-top: 3px solid var(--terre);
}

.carte p {
  color: var(--ardoise);
}

.carte .lien-fleche {
  margin-top: auto;
  padding-top: 0.5rem;
}

.carte__numero {
  font-family: var(--police-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--terre-fonce);
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
}

/* --- 10. Listes ------------------------------------------------------- */

.liste-cles {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.liste-cles li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ardoise);
  max-width: 62ch;
}

.liste-cles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  background: var(--terre);
}

.section--nuit .liste-cles li {
  color: #c8d6e4;
}

/* Étapes numérotées (accompagnement), sur fond bleu nuit. */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.etapes li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--trait-sombre);
}

.etapes li:last-child {
  border-bottom: 1px solid var(--trait-sombre);
}

.etapes__numero {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--terre);
  padding-top: 0.3rem;
}

.etapes h3 {
  font-size: 1.12rem;
  margin: 0 0 0.3rem;
}

.etapes p {
  margin: 0;
  font-size: 0.98rem;
}

.etiquettes-liste {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.etiquettes-liste li {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* Bandeau défilant « Ils nous font confiance ». */
.confiance {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--trait);
  overflow: hidden;
}

.confiance__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.confiance__titre {
  font-family: var(--police-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0;
}

.confiance__pause {
  font-family: var(--police-texte);
  font-size: 0.75rem;
  color: var(--ardoise);
  background: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.confiance__pause:hover {
  color: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
}

.defilement {
  display: flex;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.defilement__piste {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: defiler 75s linear infinite;
}

.defilement__piste li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bleu-nuit);
}

.defilement__logo img {
  display: block;
  width: auto;
  height: clamp(3.2rem, 6.5vw, 5rem);
}

/* Logos en longueur (mots-symboles) : moins hauts pour garder le même poids visuel. */
.defilement__logo--horizontal img {
  height: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* Logo fourni en blanc : posé tel quel sur une pastille bleu nuit, sans retouche. */
.defilement__logo--sombre img {
  box-sizing: content-box;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  background: var(--bleu-nuit);
}

/* Logo accompagné de son nom complet, en petit dessous. */
.defilement__marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.defilement__legende {
  font-family: var(--police-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ardoise);
  white-space: nowrap;
}

/* Séparateur après chaque nom : la boucle reste régulière d'une piste à l'autre. */
.defilement__piste li::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: clamp(1.5rem, 4vw, 3rem);
  border-radius: 50%;
  background: var(--terre);
}

.defilement:hover .defilement__piste,
.defilement--pause .defilement__piste {
  animation-play-state: paused;
}

@keyframes defiler {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .defilement {
    mask-image: none;
  }

  .defilement__piste {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 1;
    gap: 0.4rem 2.5rem;
    padding-inline: var(--gouttiere);
  }

  .defilement__piste li::after {
    display: none;
  }

  .defilement__piste[aria-hidden="true"],
  .defilement__piste li[aria-hidden="true"] {
    display: none;
  }
}

/* Grille « bento » des deux métiers : cases de tailles variées. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.bento__case {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.bento__case h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
}

.bento__case .lien-fleche {
  margin-top: auto;
}

.bento__case--conseil {
  grid-column: 1 / span 6;
  grid-row: 1 / span 3;
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: var(--blanc);
}

.bento__case--conseil .carte__numero {
  color: var(--terre);
}

.bento__case--conseil p {
  color: #c8d6e4;
}

.bento__case--conseil .etiquettes-liste li {
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--trait-sombre);
}

.bento__case--conseil .lien-fleche {
  color: var(--blanc);
}

.bento__case--edition {
  grid-column: 7 / span 6;
  background: var(--pierre);
}

.bento__case--edition > p:not(.carte__numero) {
  color: var(--ardoise);
}

.bento__produit {
  position: relative;
  grid-column: span 3;
  min-height: 7.5rem;
  justify-content: space-between;
  text-decoration: none;
  color: var(--bleu-nuit);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento__produit:hover {
  color: var(--bleu-nuit);
  transform: translateY(-3px);
  box-shadow: var(--ombre-carte);
}

.bento__produit strong {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  line-height: 1.1;
}

.bento__secteur {
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.bento__fleche {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.bento__produit:hover .bento__fleche {
  transform: translateX(3px);
}

.bento__produit--isidor {
  background: linear-gradient(135deg, #dfe9f4, #f4f7fb);
  border-color: #cfdcea;
}

.bento__produit--katarina {
  background: linear-gradient(135deg, #dcebd8, #f3f8f1);
  border-color: #cfe0ca;
}

.bento__produit--vanessa {
  background: linear-gradient(135deg, #ece7de, #f8f6f2);
}

.bento__produit--bernard {
  background: linear-gradient(135deg, #13263a, #1f4a3c);
  border-color: #1f4a3c;
  color: var(--blanc);
}

.bento__produit--bernard:hover {
  color: var(--blanc);
}

/* Troisième métier : bandeau pleine largeur sous les deux premiers. */
.bento__case--formation {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(120deg, var(--pierre), var(--blanc));
  border-left: 4px solid var(--terre);
}

.bento__case--formation > div:first-child p:last-child {
  color: var(--ardoise);
  margin-bottom: 0;
}

.bento__case--formation h3 {
  margin-bottom: 0.4rem;
}

.bento__formation-pied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: none;
}

.bento__formation-pied .lien-fleche {
  margin-top: 0;
}

.badge-qualiopi {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--police-titre);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
}

.badge-qualiopi svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--olivier-fonce);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .bento__case--formation {
    flex-direction: column;
    align-items: flex-start;
  }
}

.mention-qualiopi {
  font-size: 0.88rem;
}

.bento__chiffre {
  grid-column: span 4;
  justify-content: flex-end;
}

.bento__chiffre p:last-child {
  color: var(--ardoise);
  font-size: 0.95rem;
  margin: 0;
}

.chiffre {
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bleu-nuit);
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.chiffre small {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--terre-fonce);
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bento__case--conseil,
  .bento__case--edition {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento__produit {
    grid-column: span 3;
  }

  .bento__chiffre {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento__produit,
  .bento__chiffre {
    grid-column: 1 / -1;
  }

  .bento__produit {
    min-height: 6rem;
  }
}

/* Les dix expertises du conseil : cinq par ligne, la dernière ligne centrée si incomplète. */
.expertises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.expertise {
  flex: 0 1 calc((100% - 4rem) / 5);
  min-width: 0;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: 1.25rem 1.15rem;
}

.expertise__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.expertise__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--pierre);
  color: var(--terre-fonce);
}

.expertise__icone svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.expertise__numero {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ardoise);
  margin: 0;
}

.expertise h3 {
  font-size: 1.08rem;
  margin: 0 0 0.4rem;
}

.expertise p:last-child {
  font-size: 0.95rem;
  color: var(--ardoise);
  margin: 0;
}

@media (max-width: 1080px) {
  .expertise {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 560px) {
  .expertise {
    flex-basis: 100%;
  }
}

.section--nuit .expertise {
  background: var(--bleu-nuit-clair);
  border-color: var(--trait-sombre);
}

.section--nuit .expertise__numero {
  color: #8fa6bf;
}

.section--nuit .expertise__icone {
  background: rgba(255, 255, 255, 0.07);
  color: var(--terre);
}

.section--nuit .expertise p:last-child {
  color: #c8d6e4;
}

/* Vitrine : l'écran d'un logiciel posé sur un fond aux couleurs du produit. */
.vitrine {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1rem;
  margin-bottom: 1.4rem;
  border-radius: 6px;
  overflow: hidden;
}

.vitrine img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

a.vitrine:hover img {
  transform: scale(1.04);
}

.vitrine--isidor {
  background: linear-gradient(135deg, #dfe9f4, #f4f7fb);
}

.vitrine--katarina {
  background: linear-gradient(135deg, #dcebd8, #f3f8f1);
}

.vitrine--vanessa {
  background: linear-gradient(135deg, #ece7de, #f8f6f2);
}

.vitrine--bernard {
  background: linear-gradient(135deg, #13263a, #1f4a3c);
}

.vitrine--grande {
  aspect-ratio: auto;
  padding: clamp(1rem, 3vw, 2rem);
  margin: 0;
  border-radius: var(--rayon-carte);
}

/* Comparaison avant / après (Katarina, saisie). */
.cartes-saisie {
  display: grid;
  gap: 0.75rem;
}

.carte-saisie {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: 1.2rem 1.3rem;
  background: var(--pierre);
}

.carte-saisie p:last-child {
  margin: 0;
  color: var(--ardoise);
}

.carte-saisie__avant {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 0.35rem;
}

.carte-saisie--apres {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
}

.carte-saisie--apres .carte-saisie__avant {
  color: var(--terre);
}

.carte-saisie--apres p:last-child {
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 1.1rem;
}

/* Liste de domaines ou de publics (Isidor, Bernard). */
.domaines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.75rem;
}

.domaines li {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: 1rem 1.1rem;
  font-size: 0.93rem;
  color: var(--ardoise);
}

.domaines strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  color: var(--bleu-nuit);
  margin-bottom: 0.15rem;
}

.domaines--colonne {
  grid-template-columns: 1fr;
}

/* Bloc tarif (Isidor). */
.tarif {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--terre);
  border-radius: var(--rayon-carte);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.tarif__titre {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 0.5rem;
}

.tarif__prix {
  font-family: var(--police-titre);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.tarif__prix span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ardoise);
}

.tarif__detail {
  color: var(--ardoise);
  margin: 0.3rem 0 0;
}

/* Carte d'un logiciel (accueil, page Logiciels). */
.carte--produit h3 {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

.carte--produit .produit__nom h3 {
  margin-bottom: 0;
}

.carte .accroche-carte {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--bleu-nuit);
}

.heros .surtitre {
  color: #a9bdd2;
}

/* --- 11. Duo produit -------------------------------------------------- */

.produit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.produit + .produit {
  margin-top: var(--section);
  padding-top: var(--section);
  border-top: 1px solid var(--trait);
}

.produit--seul {
  grid-template-columns: minmax(0, 48rem);
}

.produit__nom {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.produit__nom h2 {
  margin: 0;
}



.accroche {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--terre-fonce);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .produit {
    grid-template-columns: 1fr;
  }
}

/* --- 12. Aperçus d'interface (fac-similés) ---------------------------- */

.apercu {
  background: var(--pierre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: 1rem;
  box-shadow: var(--ombre-carte);
}

.apercu__barre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 0.9rem;
}

.apercu__pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trait);
}

.apercu__titre {
  margin-left: 0.5rem;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  color: var(--ardoise);
}

.apercu__ligne {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  margin-bottom: 0.5rem;
}

.apercu__ligne:last-child {
  margin-bottom: 0;
}

.apercu__etat {
  margin-left: auto;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

.etat--recu {
  background: rgba(30, 99, 168, 0.13);
  color: #164a7d;
}
.etat--cours {
  background: rgba(217, 106, 52, 0.16);
  color: var(--terre-appui);
}
.etat--clos {
  background: rgba(63, 143, 122, 0.16);
  color: var(--olivier-fonce);
}

/* --- 13. Bloc territoire ---------------------------------------------- */

.territoire {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Quand la colonne de droite est une liste et non une image, l'alignement
   centré fait flotter le titre : on cale les deux colonnes en haut. */
.territoire--haut {
  align-items: start;
}

.territoire > div > svg,
.carte-territoire svg {
  width: 100%;
}

@media (max-width: 860px) {
  .territoire {
    grid-template-columns: 1fr;
  }
}

/* --- 14. Verbatims ---------------------------------------------------- */

.verbatim {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--terre);
  border-radius: var(--rayon-carte);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.verbatim blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--police-titre);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--bleu-nuit);
}

.verbatim figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ardoise);
}

.verbatim__type {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre-fonce);
  margin: 0 0 0.9rem;
}

.verbatim__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.verbatim__statut {
  margin: 1rem 0 0;
}

.verbatim figcaption strong {
  display: block;
  color: var(--bleu-nuit);
  font-family: var(--police-titre);
}

/* --- 15. Appel à l'action final --------------------------------------- */

.cta {
  background: var(--bleu-nuit);
  color: var(--blanc);
  border-radius: var(--rayon-carte);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.cta h2 {
  margin-bottom: 0.5rem;
}

.cta p {
  color: #c8d6e4;
  margin: 0;
}

@media (max-width: 820px) {
  .cta {
    grid-template-columns: 1fr;
  }
}

/* --- 16. En-tête de page intérieure ----------------------------------- */

.entete-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(38rem 26rem at 12% 0%, rgba(217, 106, 52, 0.16), transparent 70%),
    radial-gradient(34rem 24rem at 92% 100%, rgba(30, 99, 168, 0.14), transparent 70%),
    var(--pierre);
  border-bottom: 1px solid var(--trait);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

/* Trame de points, visible au centre et fondue sur les bords. */
.entete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(14, 44, 75, 0.1) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 20%, transparent 75%);
}

/* Halo qui dérive lentement derrière le titre. */
.entete-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  top: -10rem;
  left: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 143, 122, 0.14), transparent 65%);
  animation: aurore 22s ease-in-out infinite alternate;
}

@keyframes aurore {
  to {
    transform: translate(-28rem, 9rem) scale(1.25);
  }
}

.entete-page h1,
.entete-page .chapo,
.entete-page > .contenant > p {
  margin-inline: auto;
}

.entete-page h1 {
  max-width: 22ch;
}

.entete-page .surtitre {
  justify-content: center;
}

/* Mot clé du titre, en dégradé terre → bleu institution. */
.accent {
  background: linear-gradient(95deg, var(--terre-fonce) 10%, var(--bleu-institution) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .accent {
    color: CanvasText;
    background: none;
  }
}

.fil {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ardoise);
  margin-bottom: 1.25rem;
}

.fil a {
  color: var(--ardoise);
}

.fil span {
  padding-inline: 0.4rem;
  color: var(--terre-fonce);
}

/* --- 17. Engagements (souveraineté) ----------------------------------- */

.engagement {
  border-top: 1px solid var(--trait);
  padding-top: 1.75rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
}

.engagement h3 {
  margin: 0;
  font-size: 1.2rem;
}

.engagement p:last-child {
  margin-bottom: 0;
}

.engagement + .engagement {
  margin-top: 2.25rem;
}

@media (max-width: 780px) {
  .engagement {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* --- 18. Références --------------------------------------------------- */

.reference {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

.reference__entete {
  background: var(--bleu-nuit);
  color: var(--blanc);
  padding: 1.5rem clamp(1.5rem, 2.6vw, 2rem);
}

.reference__entete h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

.reference__rang {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9bdd2;
  margin-bottom: 0.4rem;
}

.reference__corps {
  padding: clamp(1.5rem, 2.6vw, 2rem);
}

.etude {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--pierre-ombree);
}

.etude:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.etude dt {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bleu-nuit);
}

.etude dd {
  margin: 0;
  color: var(--ardoise);
}

.carte-territoire {
  background: var(--pierre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (max-width: 800px) {
  .carte-territoire {
    grid-template-columns: 1fr;
  }
}

.legende {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ardoise);
}

.legende li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.legende span {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex: none;
}

.pastille--bleu {
  background: var(--bleu-institution);
}
.pastille--terre {
  background: var(--terre);
}
.pastille--olivier {
  background: var(--olivier);
}

/* --- 19. Équipe ------------------------------------------------------- */


/* Fondateur : portrait, présentation et parcours. */
.fondateur {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.fondateur__photo {
  width: 16.5rem;
  height: 16.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.fondateur__nom {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 0.2rem;
}

.fondateur__titre {
  font-family: var(--police-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre-fonce);
  margin-bottom: 1rem;
}

.fondateur p:not(.fondateur__titre) {
  color: var(--ardoise);
}

@media (max-width: 720px) {
  .fondateur {
    grid-template-columns: minmax(0, 1fr);
  }

  .fondateur__photo {
    width: min(16.5rem, 70vw);
    height: min(16.5rem, 70vw);
  }
}

.parcours {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.parcours__titre {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

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

.parcours__liste li {
  display: grid;
  grid-template-columns: 8rem 15rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  align-items: baseline;
  padding-block: 0.8rem;
  border-top: 1px solid var(--trait);
}

.parcours__liste li:last-child {
  border-bottom: 1px solid var(--trait);
}

.parcours__annees {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  color: var(--terre-fonce);
}

.parcours__liste strong {
  font-family: var(--police-titre);
  font-weight: 600;
}

.parcours__liste li > span:last-child {
  color: var(--ardoise);
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .parcours__liste li {
    grid-template-columns: minmax(0, 1fr);
  }
}





/* --- 20. Formulaire --------------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1.15rem;
}

.champ-groupe {
  display: grid;
  gap: 0.35rem;
}

.champ-groupe label {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.94rem;
}

.champ-groupe .facultatif {
  font-family: var(--police-texte);
  font-weight: 400;
  color: var(--ardoise);
  font-size: 0.86rem;
}

.champ {
  width: 100%;
  font-family: var(--police-texte);
  font-size: 1rem;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid #b9b2a7;
  border-radius: var(--rayon);
  padding: 0.7rem 0.85rem;
}

.champ::placeholder {
  color: #8b8579;
}

.champ:focus-visible {
  border-color: var(--bleu-institution);
  outline: 3px solid rgba(30, 99, 168, 0.35);
  outline-offset: 0;
}

.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

@media (max-width: 620px) {
  .paire {
    grid-template-columns: 1fr;
  }
}

.erreur {
  color: #a3231b;
  font-size: 0.9rem;
  margin: 0;
}

.champ[aria-invalid="true"] {
  border-color: #a3231b;
  border-width: 2px;
}

.confirmation {
  border: 1px solid var(--olivier);
  border-left: 4px solid var(--olivier);
  background: rgba(63, 143, 122, 0.09);
  border-radius: var(--rayon-carte);
  padding: 1.5rem;
}

.confirmation--erreur {
  border-color: #a3231b;
  background: rgba(163, 35, 27, 0.06);
}

.confirmation--erreur p {
  color: #a3231b;
}

.confirmation h2 {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  color: var(--olivier-fonce);
}

.confirmation p:last-child {
  margin-bottom: 0;
}

.coordonnees {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.coordonnees dt {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 0.15rem;
}

.coordonnees dd {
  margin: 0;
  font-size: 1.02rem;
}

.coordonnees .espace-dd {
  margin-top: 0.75rem;
}

/* Téléphone et moment de rappel, réunis dans un seul bloc. */
.bloc-rappel {
  display: grid;
  gap: 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: 1.25rem;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.bloc-rappel__aide {
  font-size: 0.88rem;
  color: var(--ardoise);
  margin: -0.75rem 0 0;
}

.creneaux {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0; /* sinon le fieldset s'élargit au lieu de laisser défiler les jours */
}

.creneaux__question {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0;
  margin-bottom: 0.6rem;
}

.creneaux__moment {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 1rem 0 0.45rem;
}

.creneaux__cadre {
  position: relative;
}

.creneaux__defilement {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0.35rem 0.15rem 0.6rem;
}

.creneaux__defilement::-webkit-scrollbar {
  display: none;
}

.creneaux__cadre--droite .creneaux__defilement {
  mask-image: linear-gradient(to right, #000 82%, transparent);
}

.creneaux__cadre--gauche .creneaux__defilement {
  mask-image: linear-gradient(to right, transparent, #000 18%);
}

.creneaux__cadre--gauche.creneaux__cadre--droite .creneaux__defilement {
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.creneaux__jours {
  display: flex;
  gap: 0.5rem;
  width: max-content;
}

.creneaux__heures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.5rem;
}

.creneaux__fleche {
  position: absolute;
  top: calc(50% - 0.15rem);
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(14, 44, 75, 0.15);
  cursor: pointer;
}

.creneaux__fleche--precedent {
  left: -0.5rem;
}

.creneaux__fleche--suivant {
  right: -0.5rem;
}

.creneaux__fleche:hover {
  border-color: var(--bleu-nuit);
  color: var(--bleu-nuit);
}

/* Pastille : un bouton radio caché, et son habillage. */
.puce {
  position: relative;
  display: block;
  cursor: pointer;
  scroll-snap-align: start;
}

.puce--texte {
  display: inline-block;
}

.puce__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.puce__corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.puce--jour .puce__corps {
  width: 3.9rem;
  height: 4.2rem;
  line-height: 1.15;
}

.puce--heure .puce__corps,
.puce--texte .puce__corps {
  height: 2.6rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.puce--texte .puce__corps {
  padding-inline: 1.15rem;
}

.puce__petit {
  font-size: 0.7rem;
  color: var(--ardoise);
}

.puce__grand {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}

.puce:hover .puce__corps {
  border-color: var(--bleu-nuit);
}

.puce__radio:checked + .puce__corps {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: var(--blanc);
  box-shadow: 0 6px 14px -6px rgba(14, 44, 75, 0.7);
}

.puce__radio:checked + .puce__corps .puce__petit {
  color: rgba(255, 255, 255, 0.85);
}

.puce__radio:focus-visible + .puce__corps {
  outline: 3px solid rgba(30, 99, 168, 0.45);
  outline-offset: 2px;
}

/* Aides à la rédaction du message (dictée, reformulation), sur le modèle du CRM :
   deux pastilles fines, en haut à droite du champ, sur la ligne du libellé. */
.assistant-message__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.outils-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.outil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--police-texte);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: #475569;
  background: var(--blanc);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.outil svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outil:hover {
  border-color: var(--bleu-nuit);
  color: var(--bleu-nuit);
}

.outil:focus-visible {
  outline: 3px solid rgba(30, 99, 168, 0.35);
  outline-offset: 1px;
}

.outil:disabled {
  opacity: 0.4;
  cursor: progress;
}

/* Dictée en cours : pastille rouge qui pulse. */
.outil[aria-pressed="true"] {
  background: #fce8e6;
  border-color: #c5221f;
  color: #c5221f;
  animation: pulsation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulsation {
  50% { opacity: 0.5; }
}

.outils-message__etat {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ardoise);
}

.outils-message__etat:empty {
  display: none;
}

.outils-message__etat--erreur {
  color: #a3231b;
}

.outils-message__annuler {
  font: inherit;
  color: var(--bleu-institution);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* --- 21. Pages légales ------------------------------------------------ */

/* La classe est posée sur le conteneur : on limite la mesure des enfants
   plutôt que du bloc, pour que le texte reste à l'aplomb du titre de page. */
.prose > * {
  max-width: 72ch;
}

.prose h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
}

.prose h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
}

.prose ul {
  padding-left: 1.2rem;
  color: var(--ardoise);
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}

.prose th {
  font-family: var(--police-titre);
  background: var(--pierre);
}

.tableau-defilant {
  overflow-x: auto;
}

/* --- 22. Marqueur de rédaction (à retirer avant mise en ligne) -------- */

.jalon {
  display: inline-block;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terre-appui);
  background: rgba(217, 106, 52, 0.13);
  border: 1px dashed var(--terre);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: baseline;
  white-space: nowrap;
}

.section--nuit .jalon,
.reference__entete .jalon {
  color: #f3b98f;
  background: rgba(217, 106, 52, 0.22);
}

/* --- 23. Pied de page ------------------------------------------------- */

.pied {
  background: var(--bleu-nuit);
  color: #c8d6e4;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.95rem;
}

.pied a {
  color: #c8d6e4;
  text-decoration: none;
}

.pied a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--trait-sombre);
}

@media (max-width: 780px) {
  .pied__haut {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.pied .marque {
  color: var(--blanc);
  margin-bottom: 0.9rem;
}

.pied h2 {
  font-size: 0.78rem;
  font-family: var(--police-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a9bdd2;
  margin-bottom: 1rem;
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pied__bas {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.87rem;
  color: #a9bdd2;
}

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 24. Utilitaires -------------------------------------------------- */

.sans-marge {
  margin-bottom: 0;
}

.espace-t {
  margin-top: 2.5rem;
}

.sans-espace-t {
  margin-top: 0;
}

/* Titre de section secondaire, sous un H2 de page déjà posé. */
.titre-secondaire {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.mention {
  font-size: 0.9rem;
  color: var(--ardoise);
  margin: 0;
}

.pile {
  display: grid;
  gap: 1.25rem;
}

.mesure {
  max-width: 62ch;
}

.centre {
  text-align: center;
  margin-inline: auto;
}

/* L'attribut hidden doit l'emporter sur les display posés par les composants. */
[hidden] {
  display: none !important;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le signe de marque sur fond bleu nuit : le carré doit rester lisible. */
.pied .marque__signe rect {
  fill: var(--bleu-nuit-clair);
}

/* Labels et réseaux : tuiles, avec logo quand il est disponible. */
.labels-tuiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  gap: 0.75rem;
}

.labels-tuiles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 8.5rem;
  padding: 1rem;
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
}

.labels-tuiles__logo img {
  width: auto;
  height: 6rem;
  object-fit: contain;
}

.labels-tuiles strong {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  color: var(--bleu-nuit);
}

.labels-tuiles span {
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
}

/* --- Effets de mouvement (inspirés des sites de 2026) ------------------ */

/* Apparition au défilement : posée par apparitions.js, retirée une fois l'élément arrivé. */
.a-apparaitre {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delai, 0ms),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delai, 0ms);
}

.a-apparaitre.apparu {
  opacity: 1;
  transform: none;
}

/* Cartes qui se soulèvent au survol. */
.carte,
.expertise,
.domaines li,
.labels-tuiles li,
.reference,
.verbatim {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.carte:hover,
.expertise:hover,
.domaines li:hover,
.labels-tuiles li:hover,
.reference:hover,
.verbatim:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(14, 44, 75, 0.04), 0 18px 36px -18px rgba(14, 44, 75, 0.35);
  border-color: rgba(217, 106, 52, 0.45);
}

.section--nuit .expertise:hover {
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

.expertise__icone {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.expertise:hover .expertise__icone {
  transform: scale(1.08) rotate(-4deg);
}

/* En-tête du site en verre dépoli. */
.entete {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Appel à l'action : halo lumineux qui respire doucement. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  right: -8rem;
  top: -12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 106, 52, 0.38), transparent 65%);
  animation: halo-cta 9s ease-in-out infinite alternate;
}

@keyframes halo-cta {
  to {
    transform: translate(-6rem, 5rem) scale(1.2);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entete-page::after,
  .cta::before {
    animation: none !important;
  }

  .carte:hover,
  .expertise:hover,
  .domaines li:hover,
  .labels-tuiles li:hover,
  .reference:hover,
  .verbatim:hover {
    transform: none;
  }
}

/* --- Espace client ------------------------------------------------------ */

.nav__compte {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--police-titre);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav__compte svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.nav__compte:hover {
  border-color: var(--bleu-nuit);
  color: var(--bleu-nuit);
}

/* Écrans d'accès : une carte centrée sur le fond « aurore ». */
.acces {
  text-align: left;
  min-height: calc(100vh - 5rem);
  display: grid;
  align-items: center;
}

.acces__carte {
  max-width: 28rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--trait);
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(14, 44, 75, 0.35);
}

.acces__carte .surtitre {
  justify-content: flex-start;
}

.acces__carte h1 {
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  margin-bottom: 0.4rem;
}

.acces__intro {
  color: var(--ardoise);
  margin-bottom: 1.5rem;
}

.acces__bouton {
  width: 100%;
  justify-content: center;
}

.acces__liens {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
}

.acces__note {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem;
  color: var(--ardoise);
}

.aide-champ {
  font-size: 0.8rem;
  color: var(--ardoise);
}

.aide-champ ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}

/* Projets du client. */
.projet-client {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.projet-client__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.projet-client__type {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre-fonce);
}

.statut {
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

.statut--en_cours {
  background: rgba(30, 99, 168, 0.1);
  color: var(--bleu-institution);
}

.statut--a_venir {
  background: rgba(217, 106, 52, 0.12);
  color: var(--terre-appui);
}

.statut--termine {
  background: rgba(63, 143, 122, 0.12);
  color: var(--olivier-fonce);
}

.projet-client h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.avancement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avancement__barre {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--pierre-ombree);
  overflow: hidden;
}

.avancement__barre span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--terre), var(--bleu-institution));
}

.avancement__valeur {
  font-family: var(--police-mono);
  font-size: 0.82rem;
  color: var(--bleu-nuit);
}

.projet-client__etape {
  margin: 1rem 0 0;
  font-size: 0.95rem;
}

.projet-client__etape span {
  display: block;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
}

.projet-client__dates {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--ardoise);
}

.termines {
  margin-top: 2rem;
}

.termines summary {
  cursor: pointer;
  font-family: var(--police-titre);
  font-weight: 600;
  margin-bottom: 1rem;
}

.vide {
  color: var(--ardoise);
}

.entete-bloc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filtre {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--bleu-nuit);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.filtre[aria-current] {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: var(--blanc);
}

/* --- Questions fréquentes --------------------------------------------- */

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.faq-grille__note {
  color: var(--ardoise);
}

.faq {
  display: grid;
  gap: 0.6rem;
}

.faq__item {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item[open] {
  border-color: rgba(217, 106, 52, 0.45);
  box-shadow: 0 14px 30px -20px rgba(14, 44, 75, 0.35);
}

.faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--bleu-nuit);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--terre-fonce);
  transition: transform 0.25s ease;
}

.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__item p {
  margin: 0;
  padding: 0 1.2rem 1.15rem;
  color: var(--ardoise);
}

/* --- En-têtes de page avec visuel (tantôt à droite, tantôt à gauche) ---- */

.entete-page--image {
  text-align: left;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.entete-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.entete-page--inverse .entete-page__visuel {
  order: -1;
}

.entete-page--image h1,
.entete-page--image .chapo,
.entete-page--image .entete-page__texte > p {
  margin-inline: 0;
}

.entete-page--image .surtitre {
  justify-content: flex-start;
}

.entete-page__visuel {
  position: relative;
}

.visuel-page {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 24px 40px rgba(14, 44, 75, 0.14));
}

@media (max-width: 900px) {
  .entete-page__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .entete-page--inverse .entete-page__visuel {
    order: 0;
  }

  .entete-page__visuel {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
  }
}

/* Petites animations des visuels. */
.barre-grandit {
  transform-box: fill-box;
  transform-origin: left;
  animation: barre-grandit 3.6s ease-in-out infinite alternate;
}

@keyframes barre-grandit {
  from { transform: scaleX(0.55); }
  to { transform: scaleX(1); }
}

.progression {
  transform-box: fill-box;
  transform-origin: left;
  animation: progression 5s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}

@keyframes progression {
  from { transform: scaleX(0.35); }
  to { transform: scaleX(0.72); }
}

.flotte {
  animation: flotte 4s ease-in-out infinite;
}

.flotte-lent {
  animation: flotte 6s ease-in-out infinite;
}

@keyframes flotte {
  50% { transform: translateY(-6px); }
}

.point-actif {
  transform-box: fill-box;
  transform-origin: center;
  animation: point-actif 1.8s ease-in-out infinite;
}

@keyframes point-actif {
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* Logiciels : écrans en éventail. */
.eventail {
  position: relative;
  aspect-ratio: 6 / 5;
  max-width: 32rem;
  margin-inline: auto;
}

.eventail__ecran {
  position: absolute;
  width: 58%;
  margin: 0;
  padding: 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(14, 44, 75, 0.08);
  box-shadow: 0 24px 44px -22px rgba(14, 44, 75, 0.45);
  animation: flotte 6s ease-in-out infinite;
}

.eventail__ecran img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.eventail__ecran figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: -0.8rem;
  font-family: var(--police-titre);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  box-shadow: 0 6px 14px -8px rgba(14, 44, 75, 0.4);
}

.eventail__ecran--1 { top: 2%; left: 0; transform: rotate(-5deg); z-index: 1; }
.eventail__ecran--2 { top: 8%; right: 0; transform: rotate(4deg); z-index: 2; animation-delay: -1.5s; }
.eventail__ecran--3 { bottom: 10%; left: 6%; transform: rotate(3deg); z-index: 3; animation-delay: -3s; }
.eventail__ecran--4 { bottom: 4%; right: 4%; transform: rotate(-3deg); z-index: 4; animation-delay: -4.5s; }

/* L'animation de flottement ne doit pas effacer l'inclinaison de chaque écran. */
.eventail__ecran--1 { --inclinaison: -5deg; }
.eventail__ecran--2 { --inclinaison: 4deg; }
.eventail__ecran--3 { --inclinaison: 3deg; }
.eventail__ecran--4 { --inclinaison: -3deg; }

.eventail__ecran {
  animation-name: flotte-incline;
}

@keyframes flotte-incline {
  0%, 100% { transform: rotate(var(--inclinaison)) translateY(0); }
  50% { transform: rotate(var(--inclinaison)) translateY(-8px); }
}

/* À propos : portrait posé sur la carte. */
.apropos-visuel {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
}

.apropos-visuel__portrait {
  position: absolute;
  left: 0;
  top: 2%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 999px;
  box-shadow: 0 18px 36px -18px rgba(14, 44, 75, 0.45);
  animation: flotte 6s ease-in-out infinite;
}

.apropos-visuel__portrait img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.apropos-visuel__portrait p {
  margin: 0;
  display: grid;
  line-height: 1.25;
}

.apropos-visuel__portrait strong {
  font-family: var(--police-titre);
  font-size: 1rem;
  color: var(--bleu-nuit);
}

.apropos-visuel__portrait span {
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre-fonce);
}

@media (prefers-reduced-motion: reduce) {
  .visuel-page *,
  .eventail__ecran,
  .apropos-visuel__portrait {
    animation: none !important;
  }

  .eventail__ecran { transform: rotate(var(--inclinaison)); }
}

/* --- Espace : standards du CRM Vanessa ------------------------------------ */
/* Barre blanche des pages à gauche, bandeau crème, cartes blanches sur fond crème.
   Jetons repris du CRM (tailwind.config.js) : marque #1A2C5B, crème #FAF7F2, bordures #dadce0. */

.app {
  --crm-marque: #1a2c5b;
  --crm-marque-fonce: #10204a;
  --crm-degrade: linear-gradient(180deg, #2a3f75 0%, #1a2c5b 100%);
  --crm-marque-doux: rgba(26, 44, 91, 0.08);
  --crm-creme: #faf7f2;
  --crm-bord: #dadce0;
  --crm-bord-doux: rgba(15, 23, 42, 0.08);
  --crm-texte: #202124;
  --crm-texte-2: #3c4043;
  --crm-muet: #475569;
  --crm-discret: #94a3b8;
  --crm-survol: #f1f3f4;
  --crm-accent: #d9a05b;
  --crm-accent-texte: #8b5a1a;
  --crm-succes: #2d5a3d;
  --crm-alerte: #c5221f;
  --crm-ombre: 0 1px 2px rgba(15, 23, 42, 0.05);
  /* Jetons des tableaux de bord (statistiques, mail, agenda) alignés sur le CRM. */
  --stats-fond: var(--crm-creme);
  --stats-bord: var(--crm-bord-doux);
  --stats-filet: #ece8e1;
  --stats-texte: var(--crm-muet);
  --stats-piste: #efe9df;
  --ombre-carte: var(--crm-ombre);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  background: var(--crm-creme);
  color: var(--crm-texte);
}

/* Barre de navigation. */
.app__rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-right: 1px solid var(--crm-bord);
}

.app__marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--crm-texte);
}

.app__marque .marque__signe {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.app__marque span {
  display: grid;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.app__marque small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--crm-texte-2);
}

.app__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.75rem;
}

.app__pied {
  padding: 1rem 0.75rem;
  border-top: 1px solid var(--crm-bord);
}

.app__version {
  margin: 0.5rem 0 0;
  padding: 0 0.5rem;
  font-size: 0.65rem;
  color: var(--crm-texte-2);
}

/* Menu du compte, en bas du rail : il s'ouvre vers le haut. */
.app__compte {
  position: relative;
}

.app__utilisateur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}

.app__utilisateur::-webkit-details-marker {
  display: none;
}

.app__utilisateur:hover,
.app__compte[open] .app__utilisateur {
  background: var(--crm-survol);
}

.app__initiales {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--crm-marque);
  color: var(--blanc);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.app__identite {
  display: grid;
  flex: 1;
  min-width: 0;
}

.app__identite strong,
.app__identite span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app__identite strong {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--crm-texte);
}

.app__identite span {
  font-size: 0.65rem;
  color: var(--crm-texte-2);
}

.app__chevron {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: var(--crm-texte-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.app__compte[open] .app__chevron {
  transform: rotate(180deg);
}

.app__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 50;
  padding: 0.25rem 0;
  border: 1px solid var(--crm-bord);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.25);
}

.app__menu-tete {
  display: grid;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--crm-bord);
}

.app__menu-tete strong {
  font-size: 0.75rem;
  color: var(--crm-texte);
}

.app__menu-tete span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.65rem;
  color: var(--crm-texte-2);
}

.app__menu form {
  margin: 0;
}

.app__menu-action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 0;
  background: none;
  color: var(--crm-texte-2);
  font: 500 0.85rem/1.3 var(--police-texte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.app__menu-action svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__menu-action:hover {
  background: var(--crm-survol);
  color: var(--crm-texte);
}

.app__menu-action--sortie:hover {
  background: #fce8e6;
  color: var(--crm-alerte);
}

.app__lien {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  color: var(--crm-texte-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app__lien span:first-of-type {
  flex: 1;
}

.app__lien svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__lien:hover {
  background: var(--crm-survol);
  color: var(--crm-texte);
}

.app__lien[aria-current] {
  background: var(--crm-degrade);
  color: var(--blanc);
  font-weight: 600;
}

.app__compteur {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border: 1px solid var(--crm-bord-doux);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--crm-ombre);
  color: #0f172a;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Bandeau et contenu. */
.app__corps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app__bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.5rem;
  background: var(--crm-creme);
}

.app__bandeau-titre {
  flex: 1;
  min-width: 0;
}

.app__bandeau-titre p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app__bandeau h1 {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--crm-texte);
}

.app__bandeau p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--crm-texte-2);
}

.app__outils {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app__qui {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--crm-texte);
}

.app__contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.app__page {
  flex: 1;
  padding: 1.25rem 1.5rem 2rem;
}

/* Barre de page, sur le modèle de celle de l'agenda : filets en haut et en bas,
   navigation ou titre à gauche, actions à droite. */
.app__barre-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  min-height: 3.4rem;
  padding: 0.6rem 1.5rem;
  border-top: 1px solid var(--crm-bord);
  border-bottom: 1px solid var(--crm-bord);
  background: var(--crm-creme);
}

.app__barre-gauche,
.app__barre-droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.app__barre-droite {
  margin-left: auto;
}

.app__barre-page h2 {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 500;
  color: var(--crm-texte);
}

.app__barre-info {
  font-size: 0.8rem;
  color: var(--crm-muet);
}

.app__retour {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border-radius: 999px;
  color: var(--crm-texte-2);
  font-size: 0.85rem;
  text-decoration: none;
}

.app__retour:hover {
  background: var(--crm-survol);
  color: var(--crm-texte);
}

.app__retour svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bouton secondaire de la barre (comme « Aujourd'hui » dans l'agenda). */
.app__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--crm-bord);
  border-radius: 999px;
  background: transparent;
  color: #444746;
  font: 400 0.875rem/1.3 var(--police-texte);
  text-decoration: none;
  cursor: pointer;
}

.app__bouton:hover {
  background: var(--crm-survol);
  color: #444746;
}

.app__bouton svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__bouton--plein {
  border-color: var(--crm-marque);
  background: var(--crm-marque);
  color: var(--blanc);
  font-weight: 500;
}

.app__bouton--plein:hover {
  border-color: var(--crm-marque-fonce);
  background: var(--crm-marque-fonce);
  color: var(--blanc);
}

.app__bouton--danger {
  color: var(--crm-alerte);
}

.app__bouton--danger:hover {
  border-color: var(--crm-alerte);
  background: #fce8e6;
  color: var(--crm-alerte);
}

/* Pages simples de l'espace (tableau de bord client, mot de passe). */
.app__entete {
  margin-bottom: 1.25rem;
}

.app__entete p {
  margin: 0;
  color: var(--crm-muet);
  font-size: 0.9rem;
}

.app__section + .app__section {
  margin-top: 1.75rem;
}

.app__titre {
  margin: 0 0 0.75rem;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--crm-texte);
}

.app__titre-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.app__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
}

.app__vide {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--crm-bord-doux);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--crm-ombre);
  color: var(--crm-muet);
  font-size: 0.9rem;
}

.app__vide svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--crm-discret);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app__vide p {
  margin: 0;
}

.app__carte {
  max-width: 34rem;
  padding: 1.5rem;
  border: 1px solid var(--crm-bord-doux);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--crm-ombre);
}

.app__formulaire {
  max-width: 26rem;
}

.app .bouton {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 500;
}

.app .bouton--primaire {
  background: var(--crm-marque);
  border-color: var(--crm-marque);
}

.app .bouton--primaire:hover {
  background: var(--crm-marque-fonce);
  border-color: var(--crm-marque-fonce);
}

.app .champ {
  padding: 0.55rem 0.75rem;
  border-color: var(--crm-bord);
  border-radius: 8px;
  font-size: 0.9rem;
}

.app .champ:focus-visible {
  border-color: var(--crm-marque);
  outline: 1px solid var(--crm-marque);
  outline-offset: 0;
}

/* Petit écran : la barre passe en haut, les pages sur une ligne qui défile. */
@media (max-width: 1000px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app__rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--crm-bord);
  }

  .app__marque {
    padding: 0.75rem 1rem;
  }

  .app__nav {
    order: 3;
    flex: 1 1 100%;
    grid-auto-flow: column;
    justify-content: start;
    overflow-x: auto;
    padding: 0 0.75rem 0.75rem;
  }

  .app__lien {
    white-space: nowrap;
  }

  .app__pied {
    margin-left: auto;
    padding: 0 0.75rem 0 0;
    border-top: 0;
  }

  .app__version,
  .app__identite,
  .app__chevron {
    display: none;
  }

  .app__menu {
    left: auto;
    right: 0;
    bottom: auto;
    top: calc(100% + 0.4rem);
    min-width: 14rem;
  }

  .app__bandeau {
    position: static;
    padding-inline: 1rem;
  }

  .app__page,
  .app__barre-page {
    padding-inline: 1rem;
  }
}

/* --- Statistiques (espace, équipe Satkaar) ------------------------------ */
/* Aux standards du CRM Vanessa : cartes blanches sur fond crème, chiffres en Fraunces,
   pastilles de filtre, en-têtes de tableaux clairs. */






.stats__direct {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(26, 44, 91, 0.6);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--crm-marque);
}


.stats__pouls {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #0ca30c;
  box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5);
  animation: pouls 2s ease-out infinite;
}

@keyframes pouls {
  to { box-shadow: 0 0 0 0.6rem rgba(12, 163, 12, 0); }
}

/* Barre de période : une carte blanche sur une ligne. */
.stats__periode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--stats-bord);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.stats__periode-libelle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--crm-muet);
}

.stats__periode-libelle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stats__periode-active {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--crm-discret);
}

.stats__periode-active strong {
  font-weight: 500;
  color: #0f172a;
}

.app .filtre {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--crm-bord-doux);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--crm-muet);
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.app .filtre:hover {
  border-color: var(--crm-marque);
  color: var(--crm-marque);
}

.app .filtre[aria-current] {
  background: var(--crm-marque);
  border-color: var(--crm-marque);
  color: var(--blanc);
}

/* Blocs : petit intertitre, 28 px entre deux blocs. */
.stats__bloc + .stats__bloc {
  margin-top: 1.75rem;
}

.stats__bloc > * + * {
  margin-top: 1rem;
}

.stats__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--crm-texte);
}

.stats__titre small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--crm-muet);
}

.stats__titre-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.stats__titre-ligne .stats__titre {
  margin: 0;
}

/* Grilles : tiers (avec une carte large sur deux tiers), moitiés, quarts. */
.stats__rangee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.stats__rangee > .stats__carte {
  align-self: stretch;
}

.stats__large {
  grid-column: span 2;
}

.stats__haut {
  grid-row: span 2;
}

.stats__rangee--moities {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats__rangee--quarts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats__pile {
  display: grid;
  gap: 1rem;
}

@media (max-width: 1280px) {
  .stats__rangee--quarts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .stats__rangee,
  .stats__rangee--moities {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats__large {
    grid-column: auto;
  }

  .stats__haut {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .stats__rangee--quarts {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats__periode-active {
    margin-left: 0;
  }
}

/* Tuiles d'indicateurs. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  gap: 1rem;
}

.tuiles--cles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .tuiles--cles {
    grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  }
}

.tuiles--compactes {
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
}

/* Libellés sur deux lignes réservées : les chiffres restent alignés d'une tuile à l'autre. */
.tuiles--compactes .tuile__libelle {
  line-height: 1.4;
  min-height: 2.8em;
}

@media (min-width: 1101px) {
  .tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tuiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tuiles--4 .tuile__libelle { min-height: 0; }
}

.tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.875rem;
  border: 1px solid var(--stats-bord);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.tuile__libelle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--crm-muet);
}

.tuile__valeur {
  margin: 0.4rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--crm-marque);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.tuile__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.82rem;
}

.tuile__periode,
.tuile__aide {
  margin: 0;
  font-size: 0.75rem;
  color: var(--crm-muet);
}

.tuile__mini {
  width: 100%;
  max-width: 9rem;
  height: 2.1rem;
  margin-top: 0.3rem;
}

.tuile__mini-trace {
  fill: none;
  stroke: var(--crm-marque);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tuile__mini-point {
  fill: var(--crm-marque);
}

/* Pastille d'icône des chiffres clés (KPI du CRM). */
.tuile__icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--crm-marque-doux);
  color: var(--crm-marque);
}

.tuile__icone svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tuile__icone--succes {
  background: rgba(45, 90, 61, 0.12);
  color: var(--crm-succes);
}

.tuile__icone--accent {
  background: rgba(217, 160, 91, 0.2);
  color: var(--crm-accent-texte);
}

.tuiles--compactes .tuile__valeur {
  font-size: 1.6rem;
}






/* Évolutions : pastilles pleines, flèche + signe + couleur. */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem 0.18rem 0.22rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #efebe4;
  color: #1f3347;
}

.delta__fleche {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--blanc);
  background: #4d6075;
}

.delta--bon { background: #d6f2d6; color: #0a520a; }
.delta--bon .delta__fleche { background: #0ca30c; }
.delta--mauvais { background: #fbdada; color: #8f1a1a; }
.delta--mauvais .delta__fleche { background: #d03b3b; }
.delta--neutre { padding-left: 0.6rem; font-weight: 600; }

/* Statuts (performance, santé) : couleur + icône + libellé, jamais la couleur seule. */
.statut-perf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.65rem 0.18rem 0.22rem;
  border-radius: 999px;
  font-weight: 700;
}

.statut-perf span {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
}

.statut-perf--bon { background: #d6f2d6; color: #0a520a; }
.statut-perf--moyen { background: #fff0c7; color: #5e4200; }
.statut-perf--mauvais { background: #fbdada; color: #8f1a1a; }
.statut-perf--bon span { background: #0ca30c; color: var(--blanc); }
.statut-perf--moyen span { background: #fab219; color: var(--crm-marque); }
.statut-perf--mauvais span { background: #d03b3b; color: var(--blanc); }

/* Filet de statut en tête de tuile. */
.tuile--bon,
.tuile--moyen,
.tuile--mauvais {
  border-top-width: 5px;
}

.tuile--bon { border-top-color: #0ca30c; }
.tuile--moyen { border-top-color: #fab219; }
.tuile--mauvais { border-top-color: #d03b3b; }

/* Graphiques. */
.graphe {
  position: relative;
}

.graphe__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.graphe__svg:focus-visible {
  outline: 3px solid rgba(30, 99, 168, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

.graphe__grille {
  stroke: #d7dfe8;
  stroke-width: 1;
}

.graphe__graduation {
  font-family: var(--police-texte);
  font-size: 12px;
  font-weight: 500;
  fill: var(--stats-texte);
  font-variant-numeric: tabular-nums;
}

.graphe__aire {
  fill: var(--crm-marque);
  fill-opacity: 0.16;
}

.graphe__ligne {
  fill: none;
  stroke: var(--crm-marque);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.graphe__point,
.graphe__curseur {
  fill: var(--crm-marque);
  stroke: var(--blanc);
  stroke-width: 2;
}

.graphe__viseur {
  stroke: var(--crm-marque);
  stroke-width: 1;
}

.colonne__barre {
  fill: var(--crm-marque);
  transition: fill 0.15s ease;
}

.colonne:hover .colonne__barre,
.colonne:focus .colonne__barre {
  fill: var(--crm-marque);
}

.colonne:focus {
  outline: none;
}

.colonne:focus-visible rect {
  stroke: rgba(30, 99, 168, 0.5);
  stroke-width: 2;
}

.graphe__infobulle {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.1rem;
  min-width: 7rem;
  padding: 0.55rem 0.8rem;
  background: var(--crm-marque);
  border-radius: 8px;
  box-shadow: 0 10px 24px -10px rgba(14, 44, 75, 0.6);
  pointer-events: none;
}

.graphe__infobulle strong {
  color: var(--blanc);
  font-size: 1rem;
}

.graphe__infobulle span {
  color: #d5e1ee;
  font-size: 0.8rem;
}

/* Cartes, barres horizontales et tableaux. */
.stats__carte {
  padding: 1.25rem 1.5rem 1.35rem;
  border: 1px solid var(--stats-bord);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.stats__carte h3 {
  margin: 0 0 1rem;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

.stats__carte--tableau {
  padding: 0;
  overflow: hidden;
}

.barres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.barres__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "libelle valeur" "piste piste";
  gap: 0.3rem 0.75rem;
  font-size: 0.9rem;
}

.barres__libelle {
  grid-area: libelle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--crm-muet);
}

.barres__libelle small {
  color: var(--stats-texte);
  font-weight: 400;
}

.barres__valeur {
  grid-area: valeur;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--crm-marque);
}

.barres__valeur small {
  font-weight: 500;
  color: var(--stats-texte);
}

.barres__piste {
  grid-area: piste;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--crm-creme);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.barres__barre {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: var(--crm-marque);
}

.stats__tableau-defilant {
  overflow-x: auto;
}

.stats__tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--crm-marque);
}

.stats__tableau th,
.stats__tableau td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--stats-filet);
  vertical-align: top;
}

.stats__tableau td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats__tableau thead th {
  background: #f8f9fa;
  border-bottom: 1px solid var(--crm-bord);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crm-muet);
  white-space: nowrap;
}


.stats__tableau tbody tr:hover {
  background: var(--crm-survol);
}

.stats__tableau tbody tr:last-child > * {
  border-bottom: 0;
}

.stats__tableau tbody th {
  font-weight: 700;
  color: var(--crm-marque);
}

.stats__tableau tbody th small {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--stats-texte);
}

.stats__tableau--simple tbody tr:hover {
  background: none;
}

.stats__tableau--simple th,
.stats__tableau--simple td {
  padding: 0.5rem 0;
}

.stats__tableau--simple tbody th {
  font-weight: 500;
}

.stats__tableau--simple td {
  text-align: right;
  font-weight: 700;
}

.stats__donnees {
  margin-top: 0.9rem;
}

.stats__donnees summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--crm-marque);
}

.stats__donnees[open] summary {
  margin-bottom: 0.75rem;
}

.stats__donnees .stats__tableau-defilant {
  border: 1px solid var(--stats-bord);
  border-radius: 8px;
  background: var(--blanc);
}

.stats__vide {
  margin: 0;
  font-size: 0.9rem;
  color: var(--stats-texte);
}

.stats__alerte {
  margin: 0.75rem 0 0;
  color: #8f1a1a;
  font-size: 0.9rem;
  font-weight: 600;
}

.ok,
.ko {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blanc);
}

.ok { background: #0ca30c; }
.ko { background: #d03b3b; }

.stats__note {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stats-bord);
  font-size: 0.85rem;
  color: var(--stats-texte);
}

/* --- Courriels (espace, équipe Satkaar) --------------------------------- */
/* Sur le modèle du module mail du CRM : dossiers à gauche, liste ou lecture à droite. */

.app--courriel .app__contenu {
  padding-bottom: 1.5rem;
}

.courriel {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.courriel__dossiers {
  position: sticky;
  top: 4.5rem;
  display: grid;
  gap: 1rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--stats-bord);
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.courriel__ecrire {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: 1rem;
  background: var(--crm-marque);
  color: var(--blanc);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--crm-ombre);
}

.courriel__ecrire:hover {
  background: var(--crm-marque-fonce);
  color: var(--blanc);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
}

.courriel__ecrire svg,
.courriel__dossier svg,
.courriel__bouton svg,
.courriel-ligne__piece svg,
.courriel__pieces svg,
.courriel__pieces-saisie svg,
.courriel__vide svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.courriel__nav {
  display: grid;
  gap: 0.15rem;
}

.courriel__dossier {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--crm-muet);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.courriel__dossier:hover {
  background: rgba(26, 44, 91, 0.04);
  color: var(--crm-marque);
}

.courriel__dossier[aria-current] {
  background: var(--crm-marque-doux);
  color: var(--crm-marque-fonce);
  font-weight: 600;
}

.courriel__compteur {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terre-fonce);
}

.courriel__compteur--discret {
  color: var(--stats-texte);
}

.courriel__intertitre {
  margin: 0.9rem 0.75rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stats-texte);
}

.courriel__tronque {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courriel__alerte {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: auto;
  border-radius: 50%;
  background: #d03b3b;
  color: var(--blanc);
  font-size: 0.7rem;
  font-weight: 700;
}

.courriel__avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--crm-marque);
  color: var(--blanc);
  font-size: 0.85rem;
  font-weight: 700;
}

.courriel__avatar--petit {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.7rem;
}

.courriel__avatar--grand {
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.05rem;
}

.courriel__avatar--envoi {
  background: var(--olivier-fonce);
}

.courriel__principal {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.courriel__messages {
  display: grid;
  gap: 0.5rem;
}

.courriel__info {
  margin: 0;
  padding: 0.7rem 1rem;
  border: 1px solid #b7d9b7;
  border-left: 4px solid #0ca30c;
  border-radius: 8px;
  background: #eef9ee;
  color: #0a520a;
  font-weight: 600;
}

.courriel__info--warning {
  border-color: #f0d58a;
  border-left-color: #fab219;
  background: #fff7e0;
  color: #5e4200;
}

.courriel__info--error {
  border-color: #efb6b6;
  border-left-color: #d03b3b;
  background: #fdeeee;
  color: #8f1a1a;
}

.courriel__info--info {
  border-color: var(--crm-bord);
  border-left-color: var(--crm-marque);
  background: var(--crm-survol);
  color: var(--crm-marque);
}

/* En-tête de la zone de droite : titre, recherche, relève. */
.courriel__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.courriel__entete > div {
  flex: 1 1 14rem;
  min-width: 0;
}

.courriel__entete h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.courriel__entete p {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  color: var(--stats-texte);
}

.courriel__recherche {
  flex: 1 1 18rem;
  max-width: 26rem;
}

.courriel__recherche .champ {
  padding: 0.55rem 1rem;
  border-color: var(--crm-bord);
  border-radius: 999px;
  font-size: 0.92rem;
}

.courriel__releve {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.courriel__etat {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--stats-texte);
}

.courriel__etat--erreur {
  color: #8f1a1a;
}

.courriel__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--crm-bord);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--crm-muet);
  font: 500 0.85rem/1.2 var(--police-texte);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.courriel__bouton::-webkit-details-marker {
  display: none;
}

.courriel__bouton:hover {
  background: var(--crm-creme);
  border-color: var(--crm-marque);
  color: var(--crm-marque);
}

.courriel__bouton--plein {
  background: var(--crm-marque);
  border-color: var(--crm-marque);
  color: var(--blanc);
}

.courriel__bouton--plein:hover {
  background: var(--crm-marque-fonce);
  border-color: var(--crm-marque-fonce);
  color: var(--blanc);
}

.courriel__bouton--discret {
  border-color: transparent;
  background: transparent;
}

.courriel__bouton--danger {
  color: #8f1a1a;
}

.courriel__bouton--danger:hover {
  border-color: #d03b3b;
  color: #8f1a1a;
}

.courriel__bouton--danger-plein {
  background: #b3261e;
  border-color: #b3261e;
  color: var(--blanc);
}

.courriel__bouton--danger-plein:hover {
  background: #8f1a1a;
  border-color: #8f1a1a;
  color: var(--blanc);
}

.courriel__bouton--icone {
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
}

.courriel__bouton--etoile {
  border-color: #d99a00;
  color: #a37400;
}

.courriel__bouton--etoile svg {
  fill: #f0b400;
}

.courriel__bouton--grand {
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
}

.courriel__bouton:disabled {
  cursor: wait;
  opacity: 0.75;
}

.courriel__bouton--occupe svg {
  animation: tourner 1s linear infinite;
}

@keyframes tourner {
  to { transform: rotate(360deg); }
}

/* Liste des messages. */
.courriel__liste {
  overflow: hidden;
  border: 1px solid var(--stats-bord);
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

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

.courriel-ligne {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--stats-filet);
  background: var(--crm-creme);
}

.courriel-ligne:last-child {
  border-bottom: 0;
}

.courriel-ligne--non-lu {
  background: var(--blanc);
  box-shadow: inset 4px 0 0 var(--crm-marque);
}

.courriel-ligne:hover {
  background: var(--crm-survol);
}

.courriel-ligne__etoile button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 3.4rem;
  border: 0;
  background: none;
  color: #8a99aa;
  font-size: 1.15rem;
  cursor: pointer;
}

.courriel-ligne__etoile button[aria-pressed="true"] {
  color: #d99a00;
}

.courriel-ligne__lien {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem 0.7rem 0;
  color: var(--crm-marque);
  text-decoration: none;
}

.courriel-ligne__qui {
  flex: 0 0 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--stats-texte);
}

.courriel-ligne__resume {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  white-space: nowrap;
}

.courriel-ligne__sujet {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.courriel-ligne__apercu {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--stats-texte);
}

.courriel-ligne__apercu::before {
  content: "— ";
}

.courriel-ligne--non-lu .courriel-ligne__qui,
.courriel-ligne--non-lu .courriel-ligne__sujet,
.courriel-ligne--non-lu .courriel-ligne__date {
  font-weight: 700;
  color: var(--crm-marque);
}

.courriel-ligne__piece {
  color: var(--stats-texte);
}

.courriel-ligne__boite {
  flex: none;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #efebe4;
  font-size: 0.75rem;
  font-weight: 600;
}

.courriel-ligne__date {
  flex: none;
  min-width: 3.5rem;
  text-align: right;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--stats-texte);
}

.courriel__vide {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--stats-texte);
}

.courriel__vide svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  stroke-width: 1.2;
  color: var(--crm-bord);
}

.courriel__vide p {
  margin: 0;
}

.courriel__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--stats-texte);
}

/* Lecture. */
.courriel__barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.courriel__barre-outils form {
  margin: 0;
}

.courriel__espace {
  flex: 1;
}

.courriel__lecture {
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 2rem;
  border: 1px solid var(--stats-bord);
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.courriel__lecture h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.courriel__entetes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: start;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--stats-filet);
}

.courriel__entetes dl {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.9rem;
}

.courriel__entetes dl div {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.courriel__entetes dt {
  flex: none;
  width: 5.5rem;
  color: var(--stats-texte);
  font-weight: 600;
}

.courriel__entetes dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--crm-marque);
}

.courriel__quand {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.84rem;
  color: var(--stats-texte);
  text-align: right;
}

.courriel__quand time {
  font-weight: 700;
  color: var(--crm-marque);
}

.courriel__images {
  margin: 0 0 1.25rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: #fff7e0;
  color: #5e4200;
  font-size: 0.88rem;
}

.courriel__images a {
  margin-left: 0.5rem;
  font-weight: 700;
  color: var(--crm-marque);
}

.courriel__cadre {
  display: block;
  width: 100%;
  min-height: 12rem;
  border: 0;
}

.courriel__texte {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--crm-marque);
  overflow-wrap: anywhere;
}

.courriel__pieces {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stats-filet);
}

.courriel__pieces h2 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.courriel__pieces ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.courriel__pieces a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 20rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--stats-bord);
  border-radius: 8px;
  color: var(--crm-marque);
  text-decoration: none;
}

.courriel__pieces a:hover {
  border-color: var(--crm-marque);
  background: var(--crm-survol);
}

.courriel__pieces a span {
  display: grid;
  min-width: 0;
}

.courriel__pieces strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.courriel__pieces small {
  font-size: 0.78rem;
  color: var(--stats-texte);
}

/* Rédaction. */
.courriel__redaction {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--stats-bord);
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.courriel__redaction > .courriel__info {
  margin: 1rem 1rem 0;
}

.courriel__entetes-saisie {
  display: grid;
  padding: 0.25rem 1.25rem;
  border-bottom: 1px solid var(--stats-filet);
}

.courriel__champ {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--stats-filet);
}

.courriel__entetes-saisie > .courriel__champ:last-child {
  border-bottom: 0;
}

.courriel__champ label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--stats-texte);
}

.courriel__champ .champ {
  padding: 0.5rem 0.7rem;
  border-color: transparent;
  font-size: 0.95rem;
}

.courriel__champ .champ:hover,
.courriel__champ .champ:focus-visible {
  border-color: var(--crm-bord);
}

.courriel__champ .aide-champ {
  margin: 0.2rem 0.7rem 0;
}

.courriel__copies {
  border-bottom: 1px solid var(--stats-filet);
}

.courriel__copies summary {
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--crm-marque);
}

.courriel__redaction textarea {
  width: 100%;
  min-height: 22rem;
  padding: 1.1rem 1.25rem;
  border: 0;
  resize: vertical;
  font: 0.98rem/1.6 var(--police-texte);
  color: var(--crm-marque);
}

.courriel__redaction textarea:focus-visible {
  outline: 3px solid rgba(30, 99, 168, 0.35);
  outline-offset: -3px;
}

.courriel__redaction > .erreur {
  padding: 0.75rem 1.25rem 0;
}

.courriel__pieces-saisie {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--stats-filet);
  background: var(--crm-creme);
  font-size: 0.9rem;
}

.courriel__pieces-saisie > label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--crm-marque);
}

.courriel__pieces-saisie small {
  font-weight: 500;
  color: var(--stats-texte);
}

.courriel__case {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--crm-marque);
}

.courriel__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--stats-filet);
}

/* Boîtes mail. */
.courriel__boites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
}

.courriel__boite {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.courriel__boite--erreur {
  border-top: 5px solid #d03b3b;
}

.courriel__boite-tete {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.courriel__boite-tete h2 {
  margin: 0;
  font-size: 1.05rem;
}

.courriel__boite-tete p,
.courriel__boite > p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--stats-texte);
}

.courriel__boite-erreur {
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: #fdeeee;
  color: #8f1a1a !important;
  font-weight: 600;
}

.courriel__boite-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--stats-filet);
  font-size: 0.86rem;
}

.courriel__boite-details dt {
  color: var(--stats-texte);
  font-weight: 600;
}

.courriel__boite-details dd {
  margin: 0.1rem 0 0;
  font-weight: 700;
  color: var(--crm-marque);
  overflow-wrap: anywhere;
}

.courriel__boite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.courriel__confirmer form {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.85rem;
  border-radius: 8px;
  background: #fdeeee;
}

.courriel__confirmer p {
  margin: 0;
  font-size: 0.85rem;
  color: #8f1a1a;
}

.courriel__astuce h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.courriel__astuce p {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--stats-texte);
}

.courriel__astuce code {
  white-space: nowrap;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #efebe4;
  font-size: 0.82rem;
  color: var(--crm-marque);
}

/* Formulaire de boîte : une colonne, sections empilées. */
.courriel__formulaire {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.courriel__formulaire .stats__carte h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.courriel__formulaire .courriel__champ {
  grid-template-columns: 12rem minmax(0, 1fr);
}

.courriel__formulaire .courriel__champ .champ {
  border-color: var(--crm-bord);
}

.courriel__formulaire .courriel__champ:last-of-type {
  border-bottom: 0;
}

.courriel__formulaire .courriel__envoi {
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
}

.courriel__champ-seul {
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--stats-texte);
}

@media (max-width: 1100px) {
  .courriel {
    grid-template-columns: minmax(0, 1fr);
  }

  .courriel__dossiers {
    position: static;
  }

  .courriel__nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }

  .courriel__intertitre {
    display: none;
  }
}

@media (max-width: 700px) {
  .courriel-ligne__lien {
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
  }

  .courriel-ligne__qui {
    flex: 1 1 auto;
  }

  .courriel-ligne__resume {
    flex-basis: 100%;
    order: 3;
  }

  .courriel__entetes {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .courriel__quand {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .courriel__champ,
  .courriel__formulaire .courriel__champ {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/* --- Agenda (espace, équipe Satkaar) ------------------------------------ */
/* Calqué sur l'agenda du CRM Vanessa : colonne plate, grille pleine hauteur sans carte,
   filets #dadce0, aujourd'hui en pastille bleu marine. Couleur par catégorie, toujours
   accompagnée de son nom (légende, info-bulle, fiche). */

.agenda--rendez_vous { --c: #1e63a8; }
.agenda--formation { --c: #2e6b5a; }
.agenda--deploiement { --c: #be5620; }
.agenda--interne { --c: #6b4fa0; }
.agenda--autre { --c: #5c6672; }
.agenda--rappel { --c: #0f7c8c; }

.app--agenda .app__page {
  padding: 0;
}

.agenda {
  --heure: 3rem;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  height: calc(100vh - 3.5rem);
  border-top: 1px solid var(--crm-bord);
}

/* Sélecteur Mois / Semaine / Jour du bandeau. */
.agenda__vues,
.app__vues {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--crm-bord);
  border-radius: 999px;
  background: var(--blanc);
}

.agenda__vues a,
.app__vues a {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  color: var(--crm-texte-2);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}

.agenda__vues a:hover,
.app__vues a:hover {
  background: var(--crm-survol);
}

.agenda__vues a[aria-current],
.app__vues a[aria-current] {
  background: var(--crm-marque);
  color: var(--blanc);
}

/* Colonne de gauche. */
.agenda__colonne {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  border-right: 1px solid var(--crm-bord);
  background: var(--crm-creme);
}

.agenda__nouveau {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-radius: 1rem;
  background: var(--crm-marque);
  box-shadow: var(--crm-ombre);
  color: var(--blanc);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.agenda__nouveau:hover {
  background: var(--crm-marque-fonce);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.35);
  color: var(--blanc);
}

.agenda__nouveau svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Mini-calendrier. */
.mini__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.mini__tete strong {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--crm-texte);
}

.mini__tete a {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: var(--crm-texte-2);
}

.mini__tete a:hover {
  background: var(--crm-survol);
}

.mini__tete svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini__grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

.mini__jour-semaine {
  padding: 0.15rem 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--crm-texte-2);
}

.mini__jour {
  position: relative;
  padding: 0.15rem 0;
  border-radius: 999px;
  color: var(--crm-texte);
  font-size: 0.6875rem;
  text-decoration: none;
}

.mini__jour:hover {
  background: var(--crm-survol);
}

.mini__jour--hors {
  color: #9aa0a6;
}

.mini__jour--choisi {
  background: var(--crm-marque-doux);
  font-weight: 600;
}

.mini__jour--aujourdhui,
.mini__jour--aujourdhui:hover {
  background: var(--crm-marque);
  color: var(--blanc);
  font-weight: 500;
}

.mini__point {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--crm-accent);
}

.agenda__legende ul {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0.25rem 0;
  border-top: 1px solid var(--crm-bord);
}

.agenda__legende li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--crm-texte-2);
}

.agenda__pastille {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
  background: var(--c);
}

/* Zone principale : plate, pleine hauteur. */
.agenda__principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--crm-creme);
}

.agenda__messages {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 0;
}

.agenda__barre {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--crm-bord);
}

.agenda__periode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agenda__periode h2 {
  min-width: 10rem;
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--crm-texte);
}

.agenda__fleche {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--crm-texte-2);
}

.agenda__fleche:hover {
  background: var(--crm-survol);
}

.agenda__fleche svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agenda__aujourdhui {
  padding: 0.35rem 1rem;
  border: 1px solid var(--crm-bord);
  border-radius: 999px;
  color: #444746;
  font-size: 0.875rem;
  text-decoration: none;
}

.agenda__aujourdhui:hover {
  background: var(--crm-survol);
  color: #444746;
}

/* Puces d'événement (mois, journée entière). */
.agenda__puce {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin-bottom: 2px;
  padding: 0.125rem 0.375rem;
  border-left: 2px solid var(--c);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 12%, white);
  color: color-mix(in srgb, var(--c) 80%, black);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.agenda__puce:hover {
  opacity: 0.8;
}

.agenda__puce span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda__puce svg {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.agenda__evt--fait {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Vue mois. */
.agenda__mois {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.agenda__mois-tetes,
.agenda__mois-ligne {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda__mois-tetes {
  flex: none;
  border-bottom: 1px solid var(--crm-bord);
}

.agenda__mois-tetes span {
  padding: 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--crm-texte-2);
}

.agenda__mois-ligne {
  flex: 1;
  min-height: 6.25rem;
  border-bottom: 1px solid var(--crm-bord);
}

.agenda__mois-ligne:last-child {
  border-bottom: 0;
}

.agenda__case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0.375rem;
  border-right: 1px solid var(--crm-bord);
}

.agenda__case > .agenda__puce,
.agenda__case > .agenda__plus {
  align-self: stretch;
}

.agenda__case:last-child {
  border-right: 0;
}

.agenda__case--hors {
  background: #fafafa;
}

.agenda__case-creer {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background-color 0.15s ease;
}

.agenda__case-creer:hover {
  background: rgba(26, 44, 91, 0.03);
}

.agenda__case-jour {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  color: var(--crm-texte);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.agenda__case-jour:hover {
  background: var(--crm-survol);
}

.agenda__case--hors .agenda__case-jour {
  color: #9aa0a6;
}

.agenda__case-jour--aujourdhui,
.agenda__case-jour--aujourdhui:hover {
  background: var(--crm-marque);
  color: var(--blanc);
}

.agenda__plus {
  position: relative;
  z-index: 1;
  padding-left: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--crm-marque);
  text-decoration: none;
}

/* Vues semaine et jour. */
.agenda__grille {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-x: auto;
}

.agenda__tetes,
.agenda__rangee-journee,
.agenda__corps {
  display: grid;
  grid-template-columns: 4rem repeat(var(--nb-jours), minmax(0, 1fr));
  min-width: calc(4rem + var(--nb-jours) * 6rem);
}

.agenda__tetes {
  flex: none;
  border-bottom: 1px solid var(--crm-bord);
}

.agenda__coin {
  display: grid;
  place-items: center end;
  padding: 0.35rem 0.5rem;
  border-right: 1px solid var(--crm-bord);
  font-size: 0.625rem;
  color: var(--crm-texte-2);
}

.agenda__coin--ajout {
  place-items: center;
  padding: 0;
  color: var(--crm-texte-2);
}

.agenda__coin--ajout:hover {
  background: var(--crm-survol);
}

.agenda__coin--ajout svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.agenda__tete {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  height: 4rem;
  border-right: 1px solid var(--crm-bord);
  color: var(--crm-texte);
  text-decoration: none;
}

.agenda__tete:last-child {
  border-right: 0;
}

.agenda__tete:hover {
  background: var(--crm-survol);
}

.agenda__tete span {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crm-texte-2);
}

.agenda__tete strong {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
}

.agenda__tete--aujourdhui span {
  color: var(--crm-marque);
}

.agenda__tete--aujourdhui strong {
  background: var(--crm-marque);
  color: var(--blanc);
}

.agenda__rangee-journee {
  flex: none;
  border-bottom: 1px solid var(--crm-bord);
}

.agenda__rangee-journee > div {
  min-width: 0;
  padding: 0.25rem;
  border-right: 1px solid var(--crm-bord);
}

.agenda__rangee-journee > div:last-child {
  border-right: 0;
}

.agenda__defilement {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.agenda__corps {
  height: calc(var(--heure) * var(--nb-heures));
}

.agenda__heures {
  position: relative;
  border-right: 1px solid var(--crm-bord);
}

.agenda__heures span {
  display: block;
  height: var(--heure);
  padding-right: 0.5rem;
  text-align: right;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--crm-texte-2);
  transform: translateY(-0.4rem);
}

.agenda__jour {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--nb-heures), var(--heure));
  border-right: 1px solid var(--crm-bord);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--heure) / 2 - 1px), rgba(241, 243, 244, 0.7) calc(var(--heure) / 2 - 1px) calc(var(--heure) / 2),
    transparent calc(var(--heure) / 2) calc(var(--heure) - 1px), #e8eaed calc(var(--heure) - 1px) var(--heure));
}

.agenda__jour:last-child {
  border-right: 0;
}

.agenda__jour--aujourdhui {
  background-color: rgba(26, 44, 91, 0.012);
}

.agenda__creneau:hover {
  background: rgba(26, 44, 91, 0.04);
}

.agenda__evt {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 0.1rem;
  overflow: hidden;
  margin-top: 1px;
  padding: 0.3rem 0.45rem;
  border-left: 3px solid var(--c);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 12%, white);
  box-shadow: var(--crm-ombre);
  color: color-mix(in srgb, var(--c) 80%, black);
  font-size: 0.6875rem;
  line-height: 1.25;
  text-decoration: none;
}

.agenda__evt:hover,
.agenda__evt:focus-visible {
  z-index: 3;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.35);
}

.agenda__evt strong,
.agenda__evt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda__evt strong {
  font-weight: 600;
}

.agenda__evt span {
  font-size: 0.625rem;
  opacity: 0.8;
}

.agenda__evt--court {
  grid-auto-flow: column;
  justify-content: start;
  gap: 0.35rem;
  padding-block: 0.1rem;
}

.agenda__maintenant {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 1px;
  background: #ef4444;
  pointer-events: none;
}

.agenda__maintenant::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--blanc);
}

/* Fiche et formulaire : même colonne, contenu avec marges. */
.agenda__page {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
}

.agenda__fiche {
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem;
  border: 1px solid var(--stats-bord);
  border-top: 6px solid var(--c);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.agenda__categorie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--crm-muet);
}

.agenda__fiche h2 {
  margin: 0 0 0.35rem;
  font-family: var(--police-texte);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: var(--crm-texte);
}

.agenda__quand {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--crm-texte-2);
}

.agenda__infos {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--stats-filet);
  border-bottom: 1px solid var(--stats-filet);
}

.agenda__infos div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.agenda__infos dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--crm-muet);
}

.agenda__infos dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  color: var(--crm-texte);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.agenda__infos small {
  font-size: 0.78rem;
  color: var(--crm-muet);
}

.agenda__participant {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.agenda__description {
  margin-top: 1.25rem;
  color: var(--crm-texte);
  font-size: 0.9rem;
  line-height: 1.65;
}

.agenda__trace {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  color: var(--crm-muet);
}

.agenda__supprimer {
  position: relative;
}

.agenda__supprimer form {
  position: absolute;
  right: 0;
  z-index: 5;
  width: min(20rem, 80vw);
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.25);
}

.agenda__formulaire .stats__carte {
  display: grid;
  gap: 0.25rem;
}

.agenda__titre-saisie {
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-color: var(--crm-bord);
  font-size: 1.1rem;
  font-weight: 600;
}

.agenda__quand-saisie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0 1.25rem;
}

.agenda__quand-saisie .courriel__champ,
.agenda__formulaire .agenda__quand-saisie .courriel__champ {
  grid-template-columns: 5rem minmax(0, 1fr);
}

.agenda__participants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--stats-filet);
}

.agenda__participants legend {
  float: left;
  width: 100%;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--crm-muet);
}

@media (max-width: 1000px) {
  .agenda {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .agenda__colonne {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--crm-bord);
  }

  .agenda__colonne > * {
    flex: 1 1 13rem;
  }

  .agenda__defilement {
    max-height: 70vh;
  }

  .agenda__barre {
    padding-inline: 1rem;
  }
}

/* --- Contacts (espace, équipe Satkaar) ----------------------------------- */
/* Pipeline commercial par logiciel, aux standards du CRM. Couleur par produit,
   toujours accompagnée de son nom. */

.produit--isidor { --p: #2e6b5a; }
.produit--vanessa { --p: #1e63a8; }
.produit--bernard { --p: #be5620; }
.produit--katarina { --p: #6b4fa0; }
.produit--conseil { --p: #1a2c5b; }
.produit--formation { --p: #8b5a1a; }
.produit--autre { --p: #5c6672; }

.produit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p, #5c6672) 12%, white);
  color: color-mix(in srgb, var(--p, #5c6672) 85%, black);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.produit-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--p, #5c6672);
}

.tuile--lien {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tuile--lien:hover {
  border-color: var(--crm-marque);
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.3);
}

/* Cartes par logiciel. */
.produit-carte {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid var(--stats-bord);
  border-top: 4px solid var(--p);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  color: var(--crm-texte);
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.produit-carte:hover,
.produit-carte--active {
  border-color: var(--p);
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.35);
}

.produit-carte__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.produit-carte .produit-badge {
  font-size: 0.85rem;
  padding: 0.2rem 0.7rem;
}

.produit-carte__voir {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--crm-muet);
}

.produit-carte__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.85rem;
  color: var(--crm-muet);
}

.produit-carte__chiffres strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--crm-marque);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.produit-carte__montants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8rem;
  color: var(--crm-muet);
}

.produit-carte__montants strong {
  color: var(--crm-texte);
}

.entonnoir {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding-top: 0.75rem;
  border-top: 1px solid var(--stats-filet);
}

.entonnoir__etape {
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--p) 7%, white);
  text-align: center;
}

.entonnoir__etape span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.65rem;
  color: var(--crm-muet);
}

.entonnoir__etape strong {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--p) 85%, black);
}

/* Filtres. */
.contacts__filtres {
  margin-bottom: 1rem;
}

.contacts__recherche-form {
  margin: 0;
}

.contacts__recherche {
  width: 16rem;
  max-width: 100%;
}

.app .contacts__recherche {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.contacts__outils {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

/* Pipeline en colonnes. */
.piste {
  display: grid;
  grid-template-columns: repeat(5, minmax(13rem, 1fr));
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.piste__colonne {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--stats-bord);
  border-radius: 12px;
  background: #f4f1ea;
}

.piste__tete {
  padding: 0.7rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--stats-bord);
}

.piste__tete h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-family: var(--police-texte);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crm-muet);
}

.piste__tete h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--blanc);
  color: #0f172a;
  font-size: 0.7rem;
  letter-spacing: 0;
}

.piste__colonne--client .piste__tete h3 {
  color: var(--crm-succes);
}

.piste__tete p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--crm-muet);
}

.piste__cartes {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.6rem;
  min-height: 6rem;
}

.piste__vide {
  margin: 0;
  padding: 0.75rem 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--crm-discret);
}

.piste-carte {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--stats-bord);
  border-left: 3px solid var(--p);
  border-radius: 8px;
  background: var(--blanc);
  box-shadow: var(--crm-ombre);
}

.piste-carte:hover {
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.35);
}

.piste-carte__lien {
  display: grid;
  gap: 0.1rem;
  color: var(--crm-texte);
  text-decoration: none;
}

.piste-carte__nom {
  font-size: 0.85rem;
  font-weight: 600;
}

.piste-carte__org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--crm-muet);
}

.piste-carte__infos,
.piste-carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.piste-carte__montant {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--crm-texte);
  white-space: nowrap;
}

.piste-carte__montant abbr {
  text-decoration: none;
  color: var(--crm-muet);
}

.piste-carte__relance {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--crm-muet);
}

.piste-carte__relance svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.piste-carte__relance--due {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #fce8e6;
  color: var(--crm-alerte);
  font-weight: 600;
}

.piste-carte__qui {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.6rem;
}

.contacts__perdus,
.contacts__note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--crm-muet);
}

.contacts__perdus a {
  color: var(--crm-marque);
  font-weight: 600;
}

/* Liste. */
.contacts__tableau th a {
  color: var(--crm-texte);
  text-decoration: none;
}

.contacts__tableau th a:hover {
  color: var(--crm-marque);
  text-decoration: underline;
}

.contacts__du {
  color: var(--crm-alerte);
  font-weight: 600;
}

.etape-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--crm-marque-doux);
  color: var(--crm-marque);
  font-size: 0.72rem;
  font-weight: 600;
}

.etape-badge--client {
  background: rgba(45, 90, 61, 0.12);
  color: var(--crm-succes);
}

.etape-badge--perdu {
  background: #f1f3f4;
  color: var(--crm-texte-2);
}

.etape-badge--proposition,
.etape-badge--demo {
  background: rgba(217, 160, 91, 0.2);
  color: var(--crm-accent-texte);
}

/* Fiche : étapes du pipeline. */
.contacts__outils-fiche {
  margin-bottom: 1rem;
}

.pipeline-etapes {
  margin-bottom: 1rem;
  border-top: 4px solid var(--p);
}

.pipeline-etapes__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.pipeline-etapes__tete h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--police-texte);
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

.pipeline-etapes__tete form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.pipeline-etapes__liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pipeline-etapes__etape form {
  margin: 0;
}

.pipeline-etapes__etape button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--crm-bord);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--crm-muet);
  font: 500 0.8rem/1.2 var(--police-texte);
  cursor: pointer;
}

.pipeline-etapes__etape button:hover {
  border-color: var(--crm-marque);
  color: var(--crm-marque);
}

.pipeline-etapes__puce {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--crm-survol);
  font-size: 0.68rem;
  font-weight: 700;
}

.pipeline-etapes__etape--faite button {
  border-color: transparent;
  background: var(--crm-marque-doux);
  color: var(--crm-marque);
}

.pipeline-etapes__etape--faite .pipeline-etapes__puce {
  background: var(--crm-marque);
  color: var(--blanc);
}

.pipeline-etapes__etape--actuelle button {
  border-color: var(--crm-marque);
  background: var(--crm-degrade);
  color: var(--blanc);
  font-weight: 600;
}

.pipeline-etapes__etape--actuelle .pipeline-etapes__puce {
  background: var(--blanc);
  color: var(--crm-marque);
}

/* Fiche : échanges et informations. */
.contacts__note-form {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--stats-filet);
}

.contacts__note-form textarea {
  width: 100%;
  resize: vertical;
}

.contacts__note-form button {
  justify-self: start;
}

.contacts__note-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.contacts__type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.contacts__type input {
  margin: 0;
  accent-color: var(--crm-marque);
}

.contacts__type:has(input:checked) {
  border-color: var(--crm-marque);
  background: var(--crm-marque-doux);
  color: var(--crm-marque);
}

.chronologie {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chronologie__item {
  position: relative;
  padding: 0 0 1rem 1.25rem;
  border-left: 2px solid var(--stats-filet);
  margin-left: 0.4rem;
}

.chronologie__item::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--blanc);
  border-radius: 50%;
  background: var(--crm-marque);
}

.chronologie__item--etape::before {
  background: var(--crm-accent);
}

.chronologie__item--appel::before {
  background: var(--crm-succes);
}

.chronologie__item:last-child {
  padding-bottom: 0;
}

.chronologie__type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crm-muet);
}

.chronologie__item p {
  margin: 0.2rem 0 0.25rem;
  font-size: 0.875rem;
  color: var(--crm-texte);
}

.chronologie__quand {
  font-size: 0.72rem;
  color: var(--crm-discret);
}

.contacts__mails {
  display: grid;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contacts__mails a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  color: var(--crm-texte);
  text-decoration: none;
  font-size: 0.85rem;
}

.contacts__mails a:hover {
  background: var(--crm-survol);
}

.contacts__mails strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.contacts__mails span:last-child {
  font-size: 0.75rem;
  color: var(--crm-muet);
  white-space: nowrap;
}

.contacts__infos {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.contacts__infos div {
  display: grid;
  gap: 0.1rem;
}

.contacts__infos dt {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--crm-muet);
}

.contacts__infos dd {
  display: grid;
  margin: 0;
  font-size: 0.875rem;
  color: var(--crm-texte);
  overflow-wrap: anywhere;
}

.contacts__infos a {
  color: var(--crm-marque);
}

.contacts__infos small {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--crm-muet);
}

.contacts__potentiel {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--crm-marque);
}

.contacts__demande-date {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--crm-muet);
}

.contacts__demande {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--crm-accent);
  border-radius: 0 8px 8px 0;
  background: var(--crm-creme);
  font-size: 0.85rem;
  color: var(--crm-texte);
}

@media (max-width: 1100px) {
  .pipeline-etapes__liste {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
}

/* --- Agenda : vue Année (12 mois, jours teintés selon le nombre d'éléments) --- */
/* Pleine page : pas de colonne de gauche, les 12 mois s'étirent sur toute la hauteur. */
.agenda--pleine-page {
  grid-template-columns: minmax(0, 1fr);
}

.agenda__barre-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.annee {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.5rem 1rem;
}

.annee__mois {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-rows: minmax(15rem, 1fr);
  gap: 0.75rem;
}

.annee__carte {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px solid var(--stats-bord);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}

.annee__carte h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: var(--police-texte);
  font-size: 0.95rem;
  font-weight: 600;
}

.annee__carte h3 a {
  color: var(--crm-texte);
  text-decoration: none;
}

.annee__carte h3 a:hover {
  color: var(--crm-marque);
  text-decoration: underline;
}

.annee__carte h3 span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--crm-muet);
}

.annee__grille {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(1.15rem, 1fr));
  gap: 3px;
  min-height: 0;
  text-align: center;
}

.annee__jour-semaine {
  padding-bottom: 0.15rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--crm-texte-2);
}

/* Chaque jour occupe sa case : une pastille arrondie qui grandit avec l'écran. */
.annee__jour {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 8px;
  color: var(--crm-texte);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.annee__jour:hover {
  background: var(--crm-survol);
}

.annee__jour--hors {
  color: #c4c7cc;
}

/* Une seule teinte, du clair au foncé (nombre d'éléments dans la journée). */
.annee__jour--1 { background: rgba(26, 44, 91, 0.12); font-weight: 600; }
.annee__jour--2 { background: rgba(26, 44, 91, 0.3); font-weight: 600; }
.annee__jour--3 { background: rgba(26, 44, 91, 0.62); color: var(--blanc); font-weight: 600; }

a.annee__jour--1:hover { background: rgba(26, 44, 91, 0.2); }
a.annee__jour--2:hover { background: rgba(26, 44, 91, 0.4); }
a.annee__jour--3:hover { background: rgba(26, 44, 91, 0.75); }

.annee__jour--aujourdhui {
  box-shadow: inset 0 0 0 2px var(--crm-marque);
  font-weight: 700;
}

.annee__legende {
  display: flex;
  flex: none;
  max-width: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--crm-muet);
}

.annee__legende > span:first-child {
  font-weight: 600;
  color: var(--crm-texte);
}

.annee__echelle {
  display: inline-flex;
  gap: 0.25rem;
}

.annee__echelle .annee__jour {
  width: 1.7rem;
  height: 1.3rem;
  font-size: 0.65rem;
}

/* 12 mois en lignes complètes : 4 × 3, ou 6 × 2 sur grand écran. */
@media (min-width: 1250px) {
  .annee__mois {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(11.5rem, 1fr));
  }
}

@media (min-width: 1800px) {
  .annee__mois {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(13rem, 1fr));
  }
}

/* Créneau de rappel déjà réservé (agenda de l'équipe) : grisé, barré, non sélectionnable. */
.puce:has(.puce__radio:disabled) {
  cursor: not-allowed;
}

.puce__radio:disabled + .puce__corps,
.puce:hover .puce__radio:disabled + .puce__corps {
  border-color: #e3e0da;
  background: #f1efeb;
  color: #a19b91;
  text-decoration: line-through;
  box-shadow: none;
}

.puce__radio:disabled + .puce__corps .puce__petit {
  color: #b3ada3;
}

.creneaux__legende {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--ardoise);
}

.puce__temoin {
  width: 1.4rem;
  height: 0.9rem;
  border: 1px solid #e3e0da;
  border-radius: 4px;
  background: #f1efeb;
}

/* Recherche et relève du Mail, sur une ligne dans la barre de page. */
.app__barre-droite .courriel__recherche {
  flex: none;
  width: 20rem;
  max-width: 100%;
}

.app__barre-droite .courriel__recherche .champ,
.app .contacts__recherche {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.app__barre-droite form {
  margin: 0;
}

@media (min-width: 1001px) {
  .app__barre-droite {
    flex: none;
    flex-wrap: nowrap;
  }
}

/* --- Mail pleine page (comme l'agenda) ------------------------------------- */
/* Dossiers en bande plate à gauche, liste bord à bord qui défile seule. */
@media (min-width: 1001px) {
  .app--courriel .app__contenu {
    height: calc(100vh - 3.5rem);
    overflow: hidden;
  }

  .app--courriel .app__page {
    display: flex;
    min-height: 0;
    padding: 0;
  }

  .app--courriel .courriel {
    flex: 1;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    align-items: stretch;
  }

  .app--courriel .courriel__dossiers {
    position: static;
    align-content: start;
    overflow-y: auto;
    padding: 1rem 0.75rem;
    border: 0;
    border-right: 1px solid var(--crm-bord);
    border-radius: 0;
    background: var(--crm-creme);
    box-shadow: none;
  }

  .app--courriel .courriel__principal {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
  }

  /* Liste des messages : bord à bord, sans carte. */
  .app--courriel .courriel__principal--plein {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--blanc);
  }

  .courriel__principal--plein .courriel__messages {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--crm-bord);
    background: var(--crm-creme);
  }

  .courriel__principal--plein .courriel__liste {
    flex: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .courriel__principal--plein .courriel__vide {
    height: 100%;
    align-content: center;
  }

  .courriel__principal--plein .courriel__pages {
    flex: none;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--crm-bord);
    background: var(--crm-creme);
  }

  .courriel__principal--plein .courriel-ligne__lien {
    padding-right: 1.5rem;
  }

  .courriel__principal--plein .courriel-ligne__etoile button {
    width: 3rem;
    padding-left: 0.5rem;
  }
}

/* Lecture et rédaction aussi en plein cadre. */
@media (min-width: 1001px) {
  .courriel__principal--plein .courriel__lecture {
    flex: 1;
    padding: 1.75rem 2.5rem 2.5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .courriel__principal--plein .courriel__redaction {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .courriel__principal--plein .courriel__redaction textarea {
    flex: 1;
    min-height: 16rem;
  }

  .courriel__principal--plein .courriel__entetes-saisie,
  .courriel__principal--plein .courriel__pieces-saisie,
  .courriel__principal--plein .courriel__envoi {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1001px) {
  .courriel__principal--plein .courriel__redaction textarea {
    padding-inline: 1.5rem;
  }
}

/* Boîtes Gmail et OVH : repère visuel et guide de connexion. */
.courriel__avatar--gmail {
  background: #c5221f;
}

.courriel__import {
  margin: 0;
}

.courriel__guide h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.courriel__guide-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem 2rem;
}

.courriel__guide h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-family: var(--police-texte);
  font-size: 0.9rem;
  font-weight: 600;
}

.courriel__guide ol {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--crm-texte);
}

.courriel__guide p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--crm-muet);
}

.courriel__guide a {
  color: var(--crm-marque);
  font-weight: 600;
}

.courriel__guide-pied {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem;
  border-top: 1px solid var(--stats-filet);
}